From ce316baf3c5615122e3ab41ceedbc78137e86b48 Mon Sep 17 00:00:00 2001 From: Hassan Abouelela <47495861+HassanAbouelela@users.noreply.github.com> Date: Mon, 4 Jan 2021 02:25:55 +0300 Subject: Updates Models Changes the models to match the backend. Signed-off-by: Hassan Abouelela <47495861+HassanAbouelela@users.noreply.github.com> --- src/tests/components/FormListing.test.tsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) (limited to 'src/tests/components') diff --git a/src/tests/components/FormListing.test.tsx b/src/tests/components/FormListing.test.tsx index ad76381..f071c33 100644 --- a/src/tests/components/FormListing.test.tsx +++ b/src/tests/components/FormListing.test.tsx @@ -17,9 +17,11 @@ const openFormListing: Form = { "id": "my-question", "name": "My question", "type": QuestionType.ShortText, - "data": {} + "data": {}, + required: false } - ] + ], + webhook: null }; const closedFormListing: Form = { @@ -32,9 +34,11 @@ const closedFormListing: Form = { "id": "what-should-i-ask", "name": "What should I ask?", "type": QuestionType.ShortText, - "data": {} + "data": {}, + required: false } - ] + ], + webhook: null }; test("renders form listing with specified title", () => { -- cgit v1.2.3 From d2cc29d22203cfea0adc61ceaa72ba936070045a Mon Sep 17 00:00:00 2001 From: Hassan Abouelela <47495861+HassanAbouelela@users.noreply.github.com> Date: Mon, 4 Jan 2021 02:29:27 +0300 Subject: Updates HeaderBar Changes header bar component to accept a description, and render it properly on different screens. Additionally adds a button to return to the home page. Updates tests. Signed-off-by: Hassan Abouelela <47495861+HassanAbouelela@users.noreply.github.com> --- src/components/HeaderBar/index.tsx | 131 ++++++++++++++++++++++---------- src/components/HeaderBar/logo.svg | 3 + src/tests/components/HeaderBar.test.tsx | 23 +++++- 3 files changed, 115 insertions(+), 42 deletions(-) create mode 100644 src/components/HeaderBar/logo.svg (limited to 'src/tests/components') diff --git a/src/components/HeaderBar/index.tsx b/src/components/HeaderBar/index.tsx index dfe3957..439851d 100644 --- a/src/components/HeaderBar/index.tsx +++ b/src/components/HeaderBar/index.tsx @@ -1,59 +1,110 @@ /** @jsx jsx */ -import { css, jsx } from "@emotion/react"; +import { jsx, css } from "@emotion/react"; import Header1 from "./header_1.svg"; import Header2 from "./header_2.svg"; +import Logo from "./logo.svg"; + +import { Link } from "react-router-dom"; interface HeaderBarProps { - title?: string + title?: string + description?: string } const headerImageStyles = css` -z-index: -1; -top: 0; -position: absolute; -width: 100%; -transition: height 1s; + * { + z-index: -1; + top: 0; + position: absolute; + width: 100%; + transition: height 1s; + } +`; + +const headerTextStyles = css` + transition: margin 1s; + font-family: "Uni Sans", "Hind", "Arial", sans-serif; + + margin: 0 2rem 10rem 2rem; + + .title { + font-size: 3vmax; + margin-bottom: 0; + } + + .description { + font-size: 1.5vmax; + } + + .title, .description { + transition: font-size 1s; + } + + @media (max-width: 480px) { + margin-top: 7rem; + text-align: center; + + .title { + font-size: 5vmax; + } + + .description { + font-size: 2vmax; + } + } +`; + +const homeButtonStyles = css` + svg { + transform: scale(0.25); + transition: top 300ms, transform 300ms; + + @media (max-width: 480px) { + transform: scale(0.15); + } + } + + * { + position: absolute; + top: -10rem; + right: 1rem; + + z-index: 0; + transform-origin: right; + + @media (max-width: 700px) { + top: -11.5rem; + } + + @media (max-width: 480px) { + top: -12.5rem; + } + } `; -function HeaderBar({ title }: HeaderBarProps): JSX.Element { +function HeaderBar({ title, description }: HeaderBarProps): JSX.Element { if (!title) { title = "Python Discord Forms"; } - - return
+ + return (
- - +
+ + +
+ +
+

{title}

+

{description}

+
+ + + +
-

- {title} -

-
; + ); } export default HeaderBar; diff --git a/src/components/HeaderBar/logo.svg b/src/components/HeaderBar/logo.svg new file mode 100644 index 0000000..e7f43fc --- /dev/null +++ b/src/components/HeaderBar/logo.svg @@ -0,0 +1,3 @@ + +image/svg+xml + diff --git a/src/tests/components/HeaderBar.test.tsx b/src/tests/components/HeaderBar.test.tsx index 9c232ad..dd77c8b 100644 --- a/src/tests/components/HeaderBar.test.tsx +++ b/src/tests/components/HeaderBar.test.tsx @@ -2,16 +2,35 @@ import React from "react"; import { render } from "@testing-library/react"; import "@testing-library/jest-dom/extend-expect"; import HeaderBar from "../../components/HeaderBar"; +import { MemoryRouter } from "react-router-dom"; test("renders header bar with title", () => { - const { getByText } = render(); + const { getByText } = render(); const formListing = getByText(/Python Discord Forms/i); expect(formListing).toBeInTheDocument(); }); test("renders header bar with custom title", () => { - const { getByText } = render(); + const { getByText } = render(); const formListing = getByText(/Testing title/i); expect(formListing).toBeInTheDocument(); }); +test("renders header bar with custom description", () => { + const { getByText } = render(); + const formListing = getByText(/Testing description/i); + expect(formListing).toBeInTheDocument(); +}); + +test("renders header bar with custom title and description", () => { + const { getByText } = render( + + + + ); + + const title = getByText(/Testing title/i); + const description = getByText(/Testing description/i); + expect(title).toBeInTheDocument(); + expect(description).toBeInTheDocument(); +}); -- cgit v1.2.3