From d36f5eecef67a864d8a68d979fa2d3d2b305015e Mon Sep 17 00:00:00 2001 From: Lorenzo Kappeler Date: Mon, 18 May 2020 17:13:16 +0200 Subject: [PATCH 01/43] WIP: first draft desktop header --- src/components/header/dropdown.tsx | 75 +++++++++++++++++ src/components/header/index.tsx | 87 ++++++++++++++++++++ src/components/header/themeContext.ts | 84 +++++++++++++++++++ src/components/icons/.DS_Store | Bin 0 -> 6148 bytes src/components/icons/CFY/icon.tsx | 18 ++++ src/components/icons/CFY/line.svg | 1 + src/components/icons/CFY/lineWhite.svg | 1 + src/components/icons/CFY/logo.tsx | 27 ++++++ src/components/icons/CFY/small.svg | 1 + src/components/icons/CFY/smallWhite.svg | 1 + src/components/icons/heart.tsx | 19 +++++ src/components/icons/plus.tsx | 19 +++++ src/components/icons/profile.tsx | 19 +++++ src/components/icons/tmp.svg | 4 + src/index.ts | 2 + src/tailwind/defaultConfig.ts | 71 ++++++++-------- stories/header/header.stories.js | 104 ++++++++++++++++++++++++ 17 files changed, 498 insertions(+), 35 deletions(-) create mode 100644 src/components/header/dropdown.tsx create mode 100644 src/components/header/index.tsx create mode 100644 src/components/header/themeContext.ts create mode 100644 src/components/icons/.DS_Store create mode 100644 src/components/icons/CFY/icon.tsx create mode 100644 src/components/icons/CFY/line.svg create mode 100644 src/components/icons/CFY/lineWhite.svg create mode 100644 src/components/icons/CFY/logo.tsx create mode 100644 src/components/icons/CFY/small.svg create mode 100644 src/components/icons/CFY/smallWhite.svg create mode 100644 src/components/icons/heart.tsx create mode 100644 src/components/icons/plus.tsx create mode 100644 src/components/icons/profile.tsx create mode 100644 src/components/icons/tmp.svg create mode 100644 stories/header/header.stories.js diff --git a/src/components/header/dropdown.tsx b/src/components/header/dropdown.tsx new file mode 100644 index 000000000..d6cf89ff6 --- /dev/null +++ b/src/components/header/dropdown.tsx @@ -0,0 +1,75 @@ +import React, { FC, useState, useEffect } from "react" +import classNames from "classnames" + +import ArrowDownM from "../icons/arrowDownMCrop" +import { HeaderTheme } from "." + +interface Props { + renderParent: () => JSX.Element + children: JSX.Element + theme?: HeaderTheme + stickOut?: "left" | "right" +} + +const HeaderDropdown: FC = ({ + renderParent, + theme = HeaderTheme.WHITE, + stickOut = "right", + children +}) => { + const [isOpen, setIsOpen] = useState(false) + + // TODO: header theme bg + + useEffect(() => { + if (isOpen) { + document.addEventListener("click", toggle) + document.addEventListener("keydown", toggle) + } + + return () => { + document.removeEventListener("click", toggle) + document.removeEventListener("keydown", toggle) + } + }, [isOpen]) + + const toggle = () => setIsOpen(!isOpen) + + const renderClosedState = () => { + return ( +
+ {renderParent()} + +
+ ) + } + + const renderOpenState = () => { + return ( +
+
+ {renderParent()} + +
+
+ {children} +
+
+ ) + } + + return <>{isOpen ? renderOpenState() : renderClosedState()} +} + +export default HeaderDropdown diff --git a/src/components/header/index.tsx b/src/components/header/index.tsx new file mode 100644 index 000000000..bfecd06fa --- /dev/null +++ b/src/components/header/index.tsx @@ -0,0 +1,87 @@ +import React, { FC } from "react" +import classNames from "classnames" + +import Logo from "../icons/CFY/logo" +import Profile from "../icons/profile" +import Heart from "../icons/heart" +import Plus from "../icons/plus" + +import HeaderDropdown from "./dropdown" +import Button from "../button" + +export enum HeaderTheme { + WHITE = "white", + DARK = "dark", + TRANSPARENT = "transparent" +} + +interface Props { + renderLogo?: () => JSX.Element + links?: Array<() => JSX.Element> + renderCTAButton?: () => JSX.Element + iconButtons?: Array<() => JSX.Element> + renderProfileContent?: () => JSX.Element + renderLanguageNavigation?: () => JSX.Element + theme?: HeaderTheme +} + +const Header: FC = ({ + theme = HeaderTheme.WHITE, + renderLogo = () => , + links = [], + renderCTAButton = () => null, + iconButtons = [], + renderProfileContent = () => null, + renderLanguageNavigation = () => null +}) => { + const defaultTheme = { + headerBackground: "bg-white" + } + + const selectedTheme = defaultTheme + console.log("theme ", theme) + console.log("logo ", renderLogo()) + + return ( +
+ +
+ ) +} + +export default Header diff --git a/src/components/header/themeContext.ts b/src/components/header/themeContext.ts new file mode 100644 index 000000000..72eba9faf --- /dev/null +++ b/src/components/header/themeContext.ts @@ -0,0 +1,84 @@ +import { createContext, useContext, FC, ComponentType } from "react" +import { LoginContext } from "./login" +import Role from "~/types/roles" +import { getSortedUserRoleList } from "~/server/routing/roleBasedRendering" +import { Listing } from "@carforyou/api-client" +import { ListingType } from "~/types/params" + +export type ActionButton = ComponentType<{ + listing: Listing + onSuccess?: () => void +}> + +export interface UserActions { + header: { + showProfileLink: boolean + limitListings: { + active: boolean + limit?: number + } + } + overview: { + actionButtons: ActionButton[] + navigationItems: ListingType[] + } +} + +const initialContext: UserActions = { + header: { + showProfileLink: false, + limitListings: { + active: false + } + }, + overview: { + actionButtons: [], + navigationItems: [] + } +} + +const UserActionsContext = createContext(initialContext) +export default UserActionsContext + +interface Props { + children: JSX.Element + userActions?: UserActions +} + +const roleBasedUserActions: { + [key in Role]: UserActions +} = { + [Role.Default]: initialContext, + [Role.PrivateSeller]: { + ...initialContext, + header: { + showProfileLink: true, + limitListings: { + active: true, + limit: 1 + } + } + }, + [Role.Dealer]: { + ...initialContext, + header: { + showProfileLink: false, + limitListings: { + active: false + } + } + } +} + +export const UserActionsProvider: FC = ({ children, userActions }) => { + const { currentUser } = useContext(LoginContext) + const [userRole] = getSortedUserRoleList(currentUser) + + const actions = userActions || roleBasedUserActions[userRole] + + return ( + + {children} + + ) +} diff --git a/src/components/icons/.DS_Store b/src/components/icons/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..46fef127e22632fa53abf1fc1be016a9c7a7e068 GIT binary patch literal 6148 zcmeHK&1%~~5Z<-jR*Iph(1Qa#EacFO4=%0htMK0`kW!hLlC-XbL@f}Kk!0&&45AOv z2S~1M`W|f`qA!wrW_H&h#_6q;VrF3Wo1LARWj~4iVT|$KB6z`=#TYX{5o;zi_Xv)o z?nq605INS!=YE{}(7X2MJJIC$9~r=JS7&`TV(T_iy+<8^UqzwwG0)G>}6Pe>+B!<<^J)ynSLZDHH? zx-C}SZl^6?y?ni1n}%`teDwCi;`5h_%dg+AzW?|svlxe8Rmu~M8~6o=ref)4Nt`C1 zz_W?oL=h4L!~ij{2Mp+~&1mkyT4)Kx05R})8NmHPfFe2?D}{3FfCjIRINm@+0UO^E zh(e>Iu~G;lAY7#as#LC@7+j@;U+6eTW2I1~GcIR_I(lZVUnpG84t^oS8Fv&?OAHVL z+YHoI*TVCE_~-Zkb`tf70b*dU7~qY8JLtiZ^x3+zI6P|w=toc#jH?vhrhp-jVu;0~ dxCJT&`~nR?M`NWBJRo!tkTg(34E$3DZUAKJUhMz? literal 0 HcmV?d00001 diff --git a/src/components/icons/CFY/icon.tsx b/src/components/icons/CFY/icon.tsx new file mode 100644 index 000000000..0377d048e --- /dev/null +++ b/src/components/icons/CFY/icon.tsx @@ -0,0 +1,18 @@ +import React, { FC } from "react" + +const Icon: FC<{}> = () => { + return ( + + + + ) +} + +export default Icon diff --git a/src/components/icons/CFY/line.svg b/src/components/icons/CFY/line.svg new file mode 100644 index 000000000..f00a9bbe3 --- /dev/null +++ b/src/components/icons/CFY/line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/icons/CFY/lineWhite.svg b/src/components/icons/CFY/lineWhite.svg new file mode 100644 index 000000000..8531d72a4 --- /dev/null +++ b/src/components/icons/CFY/lineWhite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/icons/CFY/logo.tsx b/src/components/icons/CFY/logo.tsx new file mode 100644 index 000000000..636494b48 --- /dev/null +++ b/src/components/icons/CFY/logo.tsx @@ -0,0 +1,27 @@ +import React, { FC } from "react" + +const Logo: FC<{}> = () => { + return ( + + + + + + ) +} + +export default Logo diff --git a/src/components/icons/CFY/small.svg b/src/components/icons/CFY/small.svg new file mode 100644 index 000000000..b5160b025 --- /dev/null +++ b/src/components/icons/CFY/small.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/icons/CFY/smallWhite.svg b/src/components/icons/CFY/smallWhite.svg new file mode 100644 index 000000000..dc736f0af --- /dev/null +++ b/src/components/icons/CFY/smallWhite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/icons/heart.tsx b/src/components/icons/heart.tsx new file mode 100644 index 000000000..a963e7838 --- /dev/null +++ b/src/components/icons/heart.tsx @@ -0,0 +1,19 @@ +import React, { FC } from "react" + +interface Props { + color?: string + width?: number + height?: number +} + +const Heart: FC = ({ color = "#A0A7AB", width = 32, height = 32 }) => ( + + + +) + +export default Heart diff --git a/src/components/icons/plus.tsx b/src/components/icons/plus.tsx new file mode 100644 index 000000000..4ff157748 --- /dev/null +++ b/src/components/icons/plus.tsx @@ -0,0 +1,19 @@ +import React, { FC } from "react" + +interface Props { + color?: string + width?: number + height?: number +} + +const Plus: FC = ({ color = "#232A36", width = 32, height = 32 }) => ( + + + +) + +export default Plus diff --git a/src/components/icons/profile.tsx b/src/components/icons/profile.tsx new file mode 100644 index 000000000..aeb912338 --- /dev/null +++ b/src/components/icons/profile.tsx @@ -0,0 +1,19 @@ +import React, { FC } from "react" + +interface Props { + color?: string + width?: number + height?: number +} + +const Profile: FC = ({ color = "#A0A7AB", width = 32, height = 32 }) => ( + + + +) + +export default Profile diff --git a/src/components/icons/tmp.svg b/src/components/icons/tmp.svg new file mode 100644 index 000000000..529fdf259 --- /dev/null +++ b/src/components/icons/tmp.svg @@ -0,0 +1,4 @@ + + + \ No newline at end of file diff --git a/src/index.ts b/src/index.ts index 5e9715834..f91160d14 100755 --- a/src/index.ts +++ b/src/index.ts @@ -13,6 +13,7 @@ import Checkbox from "./components/checkbox" import RadioButton from "./components/radioButton" import WithLabel from "./components/fieldHelpers/withLabel" import WithValidationError from "./components/fieldHelpers/withValidationError" +import Header from "./components/header/index" import useModal from "./hooks/useModal" @@ -33,4 +34,5 @@ export { WithLabel, WithValidationError, useModal, + Header } diff --git a/src/tailwind/defaultConfig.ts b/src/tailwind/defaultConfig.ts index 52ff6ef54..577123c53 100644 --- a/src/tailwind/defaultConfig.ts +++ b/src/tailwind/defaultConfig.ts @@ -25,7 +25,7 @@ export default { sm: "576px", md: "768px", lg: "1024px", - xl: "1280px", + xl: "1280px" }, colors: { @@ -58,7 +58,7 @@ export default { "great-deal": "#149246", "not-defined": "#A0A7AB", yellow: "#FCB001", - "yellow-light": "#FEEFCC", + "yellow-light": "#FEEFCC" }, /* @@ -69,7 +69,7 @@ export default { | Class name: .bg-{color} | */ - backgroundColor: (theme) => theme("colors"), + backgroundColor: theme => theme("colors"), /* |----------------------------------------------------------------------------- @@ -88,7 +88,7 @@ export default { right: "right", "right-bottom": "right bottom", "right-top": "right top", - top: "top", + top: "top" }, /* @@ -103,7 +103,7 @@ export default { backgroundSize: { auto: "auto", cover: "cover", - contain: "contain", + contain: "contain" }, /* @@ -114,9 +114,9 @@ export default { | Class name: .border-{color} | */ - borderColor: (theme) => ({ + borderColor: theme => ({ ...theme("colors"), - default: theme("colors.grey-light", "currentColor"), + default: theme("colors.grey-light", "currentColor") }), /* @@ -135,7 +135,7 @@ export default { "2": "2px", "4": "4px", "10": "10px", - "20": "20px", + "20": "20px" }, /* @@ -150,7 +150,7 @@ export default { default: "1px", "0": "0", "2": "2px", - "5": "5px", + "5": "5px" }, /* @@ -171,7 +171,7 @@ export default { soft: "0 4px 18px 0 rgba(35,42,54,0.1)", hard: "0 4px 18px 0 rgba(35,42,54,0.4)", harder: "0 0 18px 0 rgba(35,42,54,0.8)", - focus: "0px 0px 1px 2px rgba(54, 150, 185, 0.6)", + focus: "0px 0px 1px 2px rgba(54, 150, 185, 0.6)" }, /* @@ -183,7 +183,7 @@ export default { | */ fontFamily: { - sans: ["Muli, Century Gothic, Lucida Grande, Sans-Serif"], + sans: ["Muli, Century Gothic, Lucida Grande, Sans-Serif"] }, /* @@ -202,7 +202,7 @@ export default { xl: "24px", "2xl": "32px", "3xl": "48px", - "4xl": "72px", + "4xl": "72px" }, /* @@ -214,7 +214,7 @@ export default { */ fontWeight: { regular: 400, - bold: 700, + bold: 700 }, /* @@ -235,7 +235,7 @@ export default { radioIndicator: "12px", input: "52px", "20": "20px", - "40": "40px", + "40": "40px" }, /* @@ -259,7 +259,7 @@ export default { modalClose: "10px", floatingLabel: "13px", "-floatingLabel": "-13px", - radioIndicator: "5px", + radioIndicator: "5px" }, /* @@ -275,7 +275,7 @@ export default { */ letterSpacing: { normal: "0", - wide: "1px", + wide: "1px" }, /* @@ -294,7 +294,7 @@ export default { md: 2, lg: 2.5, xl: 3, - label: "24px", + label: "24px" }, /* @@ -320,7 +320,7 @@ export default { "40": "40px", labelPopupIcon: "3px", "-selectMenu": "-21px", - "-selectWithHintMenu": "-43px", + "-selectWithHintMenu": "-43px" }, /* @@ -334,7 +334,7 @@ export default { maxHeight: { full: "100%", dropdown: "240px", - dropdownSM: "190px", + dropdownSM: "190px" }, /* @@ -346,7 +346,7 @@ export default { | */ maxWidth: { - full: "100%", + full: "100%" }, /* @@ -364,6 +364,7 @@ export default { screen: "100vh", "36": "36px", "52": "52px", + header: "85px" }, /* @@ -378,7 +379,7 @@ export default { "0": "0", auto: "auto", full: "100%", - screen: "100vw", + screen: "100vw" }, /* @@ -396,7 +397,7 @@ export default { "40": ".4", "60": ".6", "80": ".8", - "100": "1", + "100": "1" }, /* @@ -423,14 +424,14 @@ export default { "25": "25px", "30": "30px", "40": "40px", - floatingLabelInputFocused: "12px", + floatingLabelInputFocused: "12px" }, customRotate: { "90": "90deg", "180": "180deg", "270": "270deg", - "360": "360deg", + "360": "360deg" }, /* |----------------------------------------------------------------------------- @@ -440,7 +441,7 @@ export default { | Class name: .text-{color} | */ - textColor: (theme) => theme("colors"), + textColor: theme => theme("colors"), /* |----------------------------------------------------------------------------- @@ -473,11 +474,11 @@ export default { modalSmall: "370px", modalLarge: "770px", checkbox: "24px", - radioIndicator: "12px", + radioIndicator: "12px" }, transitionDuration: { - "200": "200ms", + "200": "200ms" }, /* @@ -494,7 +495,7 @@ export default { clearButton: 10, modalClose: 10, dropdownMenu: 20, - modal: 98, + modal: 98 }, /* @@ -505,19 +506,19 @@ export default { | Class name: .bg-gradient-{direction}-{color} | */ - linearGradients: (theme) => ({ + linearGradients: theme => ({ directions: { "to-top": "to top", "to-right": "to right", "to-bottom": "to bottom", - "to-left": "to left", + "to-left": "to left" }, colors: { fade: ["rgba(255,255,255,0) 90%", "rgba(255,255,255,1) 100%"], grey: [theme("colors")["grey-bright"], `${theme("colors").white} 20%`], - black: ["rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)"], - }, - }), + black: ["rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)"] + } + }) }, variants: { @@ -591,8 +592,8 @@ export default { skew: ["responsive", "hover", "focus"], transitionProperty: ["responsive", "hover"], transitionTimingFunction: ["responsive", "hover"], - transitionDuration: ["responsive", "hover"], + transitionDuration: ["responsive", "hover"] }, corePlugins: {}, - plugins: [TransformPlugin, require("tailwindcss-gradients")()], + plugins: [TransformPlugin, require("tailwindcss-gradients")()] } diff --git a/stories/header/header.stories.js b/stories/header/header.stories.js new file mode 100644 index 000000000..44ab780f6 --- /dev/null +++ b/stories/header/header.stories.js @@ -0,0 +1,104 @@ +import React from "react" +import { storiesOf } from "@storybook/react" +import { action } from "@storybook/addon-actions" +import { wInfo } from "../utils" + +import Header, { HeaderTheme } from "../../src/components/header/index" +import HeaderDropdown from "../../src/components/header/dropdown" +import Button from "../../src/components/button" +import Plus from "../../src/components/icons/plus" +import Heart from "../../src/components/icons/heart" + +storiesOf("Header", module) + .add( + "empty", + wInfo(` + Empty + ~~~~ +
+ ~~~~ + `)(() => { + return ( +
+
+
+ ) + }) + ) + .add( + "Car For You", + wInfo(` + Empty + ~~~~ +
+ ~~~~ + `)(() => { + const links = [ + () => Auto Kaufen, + () => Auto Verkaufen, + () => Für Garagisten, + () => ( + Sich Informieren} + theme={HeaderTheme.WHITE} // TODO reafactor the theme to a context + > + + + ) + ] + const renderCTAButton = () => ( + + ) + const iconButtons = [() => ] + const renderProfileContent = () => ( +
+

Some dummy profile tooltip content.

+
+ ) + const renderLanguageNavigation = () => ( + DE} + theme={HeaderTheme.WHITE} + > + + + ) + + return ( +
+
+
+ ) + }) + ) From 62f0d935bd6979def47eb2c3c5f6c03dde126937 Mon Sep 17 00:00:00 2001 From: Lorenzo Kappeler Date: Mon, 18 May 2020 18:47:08 +0200 Subject: [PATCH 02/43] feat: desktop layouts for header variations --- assets/header.css | 11 + assets/index.css | 1 + src/components/header/dropdown.tsx | 29 ++- src/components/header/index.tsx | 113 +++++----- src/components/header/themeContext.ts | 88 +------- src/components/icons/CFY/icon.tsx | 18 -- src/components/icons/CFY/line.svg | 1 - src/components/icons/CFY/lineWhite.svg | 1 - src/components/icons/CFY/small.svg | 1 - src/components/icons/CFY/smallWhite.svg | 1 - src/components/icons/{CFY => }/logo.tsx | 30 ++- src/tailwind/defaultConfig.ts | 5 +- stories/header/header.stories.js | 278 ++++++++++++++++++++++-- 13 files changed, 380 insertions(+), 197 deletions(-) create mode 100644 assets/header.css delete mode 100644 src/components/icons/CFY/icon.tsx delete mode 100644 src/components/icons/CFY/line.svg delete mode 100644 src/components/icons/CFY/lineWhite.svg delete mode 100644 src/components/icons/CFY/small.svg delete mode 100644 src/components/icons/CFY/smallWhite.svg rename src/components/icons/{CFY => }/logo.tsx (86%) diff --git a/assets/header.css b/assets/header.css new file mode 100644 index 000000000..4289c7a8e --- /dev/null +++ b/assets/header.css @@ -0,0 +1,11 @@ +.bg-header--transparent { + background: linear-gradient( + -180deg, + rgba(0, 0, 0, 0.5) 0%, + rgba(0, 0, 0, 0.5) 22%, + rgba(0, 0, 0, 0.3) 38%, + rgba(0, 0, 0, 0.2) 53%, + rgba(0, 0, 0, 0.1) 79%, + rgba(0, 0, 0, 0) 100% + ); +} diff --git a/assets/index.css b/assets/index.css index 76b87cfe3..46efcd345 100644 --- a/assets/index.css +++ b/assets/index.css @@ -4,3 +4,4 @@ @import "./input/index.css"; @import "./spinner.css"; @import "./intercom.css"; +@import "./header.css"; diff --git a/src/components/header/dropdown.tsx b/src/components/header/dropdown.tsx index d6cf89ff6..c4769a7a0 100644 --- a/src/components/header/dropdown.tsx +++ b/src/components/header/dropdown.tsx @@ -1,8 +1,8 @@ -import React, { FC, useState, useEffect } from "react" +import React, { FC, useState, useEffect, useContext } from "react" import classNames from "classnames" import ArrowDownM from "../icons/arrowDownMCrop" -import { HeaderTheme } from "." +import HeaderThemeContext, { HeaderTheme } from "./themeContext" interface Props { renderParent: () => JSX.Element @@ -13,13 +13,11 @@ interface Props { const HeaderDropdown: FC = ({ renderParent, - theme = HeaderTheme.WHITE, stickOut = "right", children }) => { const [isOpen, setIsOpen] = useState(false) - - // TODO: header theme bg + const theme = useContext(HeaderThemeContext) useEffect(() => { if (isOpen) { @@ -39,27 +37,40 @@ const HeaderDropdown: FC = ({ return (
{renderParent()} - +
) } const renderOpenState = () => { return ( -
+
{renderParent()}
diff --git a/src/components/header/index.tsx b/src/components/header/index.tsx index bfecd06fa..5d11b5da0 100644 --- a/src/components/header/index.tsx +++ b/src/components/header/index.tsx @@ -1,19 +1,11 @@ import React, { FC } from "react" import classNames from "classnames" -import Logo from "../icons/CFY/logo" +import Logo from "../icons/logo" import Profile from "../icons/profile" -import Heart from "../icons/heart" -import Plus from "../icons/plus" import HeaderDropdown from "./dropdown" -import Button from "../button" - -export enum HeaderTheme { - WHITE = "white", - DARK = "dark", - TRANSPARENT = "transparent" -} +import { HeaderTheme, HeaderThemeProvider } from "./themeContext" interface Props { renderLogo?: () => JSX.Element @@ -26,7 +18,7 @@ interface Props { } const Header: FC = ({ - theme = HeaderTheme.WHITE, + theme = HeaderTheme.LIGHT, renderLogo = () => , links = [], renderCTAButton = () => null, @@ -34,53 +26,66 @@ const Header: FC = ({ renderProfileContent = () => null, renderLanguageNavigation = () => null }) => { - const defaultTheme = { - headerBackground: "bg-white" + let iconColor = "#A0A7AB" + if (theme === HeaderTheme.DARK || theme === HeaderTheme.TRANSPARENT) { + iconColor = "#FFF" } - const selectedTheme = defaultTheme - console.log("theme ", theme) - console.log("logo ", renderLogo()) - return ( -
- +
+
+ ) } diff --git a/src/components/header/themeContext.ts b/src/components/header/themeContext.ts index 72eba9faf..85a5abe0b 100644 --- a/src/components/header/themeContext.ts +++ b/src/components/header/themeContext.ts @@ -1,84 +1,12 @@ -import { createContext, useContext, FC, ComponentType } from "react" -import { LoginContext } from "./login" -import Role from "~/types/roles" -import { getSortedUserRoleList } from "~/server/routing/roleBasedRendering" -import { Listing } from "@carforyou/api-client" -import { ListingType } from "~/types/params" +import { createContext } from "react" -export type ActionButton = ComponentType<{ - listing: Listing - onSuccess?: () => void -}> - -export interface UserActions { - header: { - showProfileLink: boolean - limitListings: { - active: boolean - limit?: number - } - } - overview: { - actionButtons: ActionButton[] - navigationItems: ListingType[] - } -} - -const initialContext: UserActions = { - header: { - showProfileLink: false, - limitListings: { - active: false - } - }, - overview: { - actionButtons: [], - navigationItems: [] - } -} - -const UserActionsContext = createContext(initialContext) -export default UserActionsContext - -interface Props { - children: JSX.Element - userActions?: UserActions -} - -const roleBasedUserActions: { - [key in Role]: UserActions -} = { - [Role.Default]: initialContext, - [Role.PrivateSeller]: { - ...initialContext, - header: { - showProfileLink: true, - limitListings: { - active: true, - limit: 1 - } - } - }, - [Role.Dealer]: { - ...initialContext, - header: { - showProfileLink: false, - limitListings: { - active: false - } - } - } +export enum HeaderTheme { + LIGHT = "light", + DARK = "dark", + TRANSPARENT = "transparent" } -export const UserActionsProvider: FC = ({ children, userActions }) => { - const { currentUser } = useContext(LoginContext) - const [userRole] = getSortedUserRoleList(currentUser) +const HeaderThemeContext = createContext(HeaderTheme.LIGHT) - const actions = userActions || roleBasedUserActions[userRole] - - return ( - - {children} - - ) -} +export const HeaderThemeProvider = HeaderThemeContext.Provider +export default HeaderThemeContext diff --git a/src/components/icons/CFY/icon.tsx b/src/components/icons/CFY/icon.tsx deleted file mode 100644 index 0377d048e..000000000 --- a/src/components/icons/CFY/icon.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React, { FC } from "react" - -const Icon: FC<{}> = () => { - return ( - - - - ) -} - -export default Icon diff --git a/src/components/icons/CFY/line.svg b/src/components/icons/CFY/line.svg deleted file mode 100644 index f00a9bbe3..000000000 --- a/src/components/icons/CFY/line.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/components/icons/CFY/lineWhite.svg b/src/components/icons/CFY/lineWhite.svg deleted file mode 100644 index 8531d72a4..000000000 --- a/src/components/icons/CFY/lineWhite.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/components/icons/CFY/small.svg b/src/components/icons/CFY/small.svg deleted file mode 100644 index b5160b025..000000000 --- a/src/components/icons/CFY/small.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/components/icons/CFY/smallWhite.svg b/src/components/icons/CFY/smallWhite.svg deleted file mode 100644 index dc736f0af..000000000 --- a/src/components/icons/CFY/smallWhite.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/components/icons/CFY/logo.tsx b/src/components/icons/logo.tsx similarity index 86% rename from src/components/icons/CFY/logo.tsx rename to src/components/icons/logo.tsx index 636494b48..752143cc2 100644 --- a/src/components/icons/CFY/logo.tsx +++ b/src/components/icons/logo.tsx @@ -1,23 +1,41 @@ import React, { FC } from "react" -const Logo: FC<{}> = () => { +interface Props { + colors?: { + icon: string + carFor: string + you: string + } + width?: number + height?: number +} + +const Logo: FC = ({ + colors = { + icon: "#F73B47", + carFor: "#1D1D1B", + you: "#F73B47" + }, + width = 170, + height = 26 +}) => { return ( diff --git a/src/tailwind/defaultConfig.ts b/src/tailwind/defaultConfig.ts index 577123c53..1086a9aef 100644 --- a/src/tailwind/defaultConfig.ts +++ b/src/tailwind/defaultConfig.ts @@ -234,6 +234,8 @@ export default { checkbox: "24px", radioIndicator: "12px", input: "52px", + header: "85px", + headerTransparent: "166px", "20": "20px", "40": "40px" }, @@ -363,8 +365,7 @@ export default { full: "100%", screen: "100vh", "36": "36px", - "52": "52px", - header: "85px" + "52": "52px" }, /* diff --git a/stories/header/header.stories.js b/stories/header/header.stories.js index 44ab780f6..fff05589c 100644 --- a/stories/header/header.stories.js +++ b/stories/header/header.stories.js @@ -3,15 +3,17 @@ import { storiesOf } from "@storybook/react" import { action } from "@storybook/addon-actions" import { wInfo } from "../utils" -import Header, { HeaderTheme } from "../../src/components/header/index" +import Header from "../../src/components/header/index" +import { HeaderTheme } from "../../src/components/header/themeContext" import HeaderDropdown from "../../src/components/header/dropdown" import Button from "../../src/components/button" import Plus from "../../src/components/icons/plus" import Heart from "../../src/components/icons/heart" +import Logo from "../../src/components/icons/logo" storiesOf("Header", module) .add( - "empty", + "Theme LIGHT", wInfo(` Empty ~~~~ @@ -19,38 +21,159 @@ storiesOf("Header", module) ~~~~ `)(() => { return ( -
+
) }) ) .add( - "Car For You", + "Theme DARK", wInfo(` Empty ~~~~ + const renderLogo = () => ( + + ) +
+ ~~~~ + `)(() => { + const renderLogo = () => ( + + ) + return ( +
+
+
+ ) + }) + ) + .add( + "Theme TRANSPARENT", + wInfo(` + Empty + ~~~~ + const renderLogo = () => ( + + )
+
+ ~~~~ + `)(() => { + const renderLogo = () => ( + + ) + return ( +
+
+
+
+
+ ) + }) + ) + .add( + "Content Example - Car For You", + wInfo(` + Content Example - Car For You + ~~~~ + const links = [ + () => Auto Kaufen, + () => Auto Verkaufen, + () => Für Garagisten, + () => ( + Sich Informieren}> + + + ) + ] + const renderCTAButton = () => ( + + ) + const iconButtons = [() => ] + const renderProfileContent = () => ( +
+

Some dummy profile tooltip content.

+
+ ) + const renderLanguageNavigation = () => ( + DE} + > + + + ) +
~~~~ `)(() => { const links = [ - () => Auto Kaufen, - () => Auto Verkaufen, - () => Für Garagisten, + () => Auto Kaufen, + () => Auto Verkaufen, + () => Für Garagisten, () => ( - Sich Informieren} - theme={HeaderTheme.WHITE} // TODO reafactor the theme to a context - > + Sich Informieren}> @@ -59,7 +182,7 @@ storiesOf("Header", module) const renderCTAButton = () => ( ) - const iconButtons = [() => ] + const iconButtons = [() => ] const renderProfileContent = () => (

Some dummy profile tooltip content.

@@ -67,30 +190,27 @@ storiesOf("Header", module) ) const renderLanguageNavigation = () => ( DE} - theme={HeaderTheme.WHITE} + renderParent={() => DE} > ) return ( -
+
( + + ) + const links = [ + () => Meine Inserate, + () => Automarkt, + () => News + ] + const renderCTAButton = () => ( + + ) + const renderProfileContent = () => ( +
+

Some dummy profile tooltip content.

+
+ ) + const renderLanguageNavigation = () => ( + DE}> + + + ) +
+ ~~~~ + `)(() => { + const renderLogo = () => ( + + ) + const links = [ + () => Meine Inserate, + () => Automarkt, + () => News + ] + const renderCTAButton = () => ( + + ) + const renderProfileContent = () => ( +
+

Some dummy profile tooltip content.

+
+ ) + const renderLanguageNavigation = () => ( + DE}> + + + ) + + return ( +
+
+
+ ) + }) + ) From 19dcc6da99e0cb717e7c0861047db4fc1aa9b61d Mon Sep 17 00:00:00 2001 From: Lorenzo Kappeler Date: Tue, 19 May 2020 15:33:35 +0200 Subject: [PATCH 03/43] feat: mobile navigations --- src/components/header/dropdown.tsx | 35 ++++-- src/components/header/index.tsx | 107 +++++++++++++---- src/components/icons/logo.tsx | 8 +- src/components/icons/logout.tsx | 19 ++++ src/components/icons/myCars.tsx | 19 ++++ src/components/icons/tmp.svg | 4 - src/tailwind/defaultConfig.ts | 80 +++++++------ stories/header/header.stories.js | 177 ++++++++++++++++++----------- 8 files changed, 308 insertions(+), 141 deletions(-) create mode 100644 src/components/icons/logout.tsx create mode 100644 src/components/icons/myCars.tsx delete mode 100644 src/components/icons/tmp.svg diff --git a/src/components/header/dropdown.tsx b/src/components/header/dropdown.tsx index c4769a7a0..73e01059b 100644 --- a/src/components/header/dropdown.tsx +++ b/src/components/header/dropdown.tsx @@ -14,7 +14,7 @@ interface Props { const HeaderDropdown: FC = ({ renderParent, stickOut = "right", - children + children, }) => { const [isOpen, setIsOpen] = useState(false) const theme = useContext(HeaderThemeContext) @@ -35,14 +35,23 @@ const HeaderDropdown: FC = ({ const renderClosedState = () => { return ( -
+
{renderParent()}
@@ -51,26 +60,32 @@ const HeaderDropdown: FC = ({ const renderOpenState = () => { return ( -
-
+
+
{renderParent()}
diff --git a/src/components/header/index.tsx b/src/components/header/index.tsx index 5d11b5da0..3c8af770e 100644 --- a/src/components/header/index.tsx +++ b/src/components/header/index.tsx @@ -6,13 +6,17 @@ import Profile from "../icons/profile" import HeaderDropdown from "./dropdown" import { HeaderTheme, HeaderThemeProvider } from "./themeContext" +import useModal from "../../hooks/useModal" interface Props { renderLogo?: () => JSX.Element links?: Array<() => JSX.Element> renderCTAButton?: () => JSX.Element iconButtons?: Array<() => JSX.Element> - renderProfileContent?: () => JSX.Element + profile?: { + renderWelcomeMessage: () => JSX.Element + renderContent: () => JSX.Element + } renderLanguageNavigation?: () => JSX.Element theme?: HeaderTheme } @@ -23,64 +27,127 @@ const Header: FC = ({ links = [], renderCTAButton = () => null, iconButtons = [], - renderProfileContent = () => null, - renderLanguageNavigation = () => null + profile = { + renderWelcomeMessage: () => null, + renderContent: () => null, + }, + renderLanguageNavigation = () => null, }) => { let iconColor = "#A0A7AB" if (theme === HeaderTheme.DARK || theme === HeaderTheme.TRANSPARENT) { iconColor = "#FFF" } + const languageNavigation = renderLanguageNavigation() + + const renderMobileNavigation = () => { + return ( +
+
+ +
+
+ {profile.renderWelcomeMessage()} +
+ {links.map((renderLink, index) => { + return
{renderLink()}
+ })} +
+ {profile.renderContent()} +
+ {languageNavigation} +
+
+ ) + } + + const { openModal, renderModal } = useModal(renderMobileNavigation, { + size: "fullscreen", + style: "white", + }) + return (
diff --git a/src/components/icons/logo.tsx b/src/components/icons/logo.tsx index 752143cc2..4c251b29c 100644 --- a/src/components/icons/logo.tsx +++ b/src/components/icons/logo.tsx @@ -6,8 +6,8 @@ interface Props { carFor: string you: string } - width?: number - height?: number + width?: number | string + height?: number | string } const Logo: FC = ({ @@ -16,8 +16,8 @@ const Logo: FC = ({ carFor: "#1D1D1B", you: "#F73B47" }, - width = 170, - height = 26 + width = "auto", + height = "auto" }) => { return ( = ({ color = "#a0a7ab", width = 32, height = 32 }) => ( + + + +) + +export default Logout diff --git a/src/components/icons/myCars.tsx b/src/components/icons/myCars.tsx new file mode 100644 index 000000000..3e1aff387 --- /dev/null +++ b/src/components/icons/myCars.tsx @@ -0,0 +1,19 @@ +import React, { FC } from "react" + +interface Props { + color?: string + width?: number | string + height?: number | string +} + +const MyCars: FC = ({ color = "#a0a7ab", width = 32, height = 32 }) => ( + + + +) + +export default MyCars diff --git a/src/components/icons/tmp.svg b/src/components/icons/tmp.svg deleted file mode 100644 index 529fdf259..000000000 --- a/src/components/icons/tmp.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - \ No newline at end of file diff --git a/src/tailwind/defaultConfig.ts b/src/tailwind/defaultConfig.ts index 1086a9aef..9d0bbb3ef 100644 --- a/src/tailwind/defaultConfig.ts +++ b/src/tailwind/defaultConfig.ts @@ -25,7 +25,7 @@ export default { sm: "576px", md: "768px", lg: "1024px", - xl: "1280px" + xl: "1280px", }, colors: { @@ -58,7 +58,7 @@ export default { "great-deal": "#149246", "not-defined": "#A0A7AB", yellow: "#FCB001", - "yellow-light": "#FEEFCC" + "yellow-light": "#FEEFCC", }, /* @@ -69,7 +69,7 @@ export default { | Class name: .bg-{color} | */ - backgroundColor: theme => theme("colors"), + backgroundColor: (theme) => theme("colors"), /* |----------------------------------------------------------------------------- @@ -88,7 +88,7 @@ export default { right: "right", "right-bottom": "right bottom", "right-top": "right top", - top: "top" + top: "top", }, /* @@ -103,7 +103,7 @@ export default { backgroundSize: { auto: "auto", cover: "cover", - contain: "contain" + contain: "contain", }, /* @@ -114,9 +114,9 @@ export default { | Class name: .border-{color} | */ - borderColor: theme => ({ + borderColor: (theme) => ({ ...theme("colors"), - default: theme("colors.grey-light", "currentColor") + default: theme("colors.grey-light", "currentColor"), }), /* @@ -135,7 +135,7 @@ export default { "2": "2px", "4": "4px", "10": "10px", - "20": "20px" + "20": "20px", }, /* @@ -150,7 +150,7 @@ export default { default: "1px", "0": "0", "2": "2px", - "5": "5px" + "5": "5px", }, /* @@ -171,7 +171,7 @@ export default { soft: "0 4px 18px 0 rgba(35,42,54,0.1)", hard: "0 4px 18px 0 rgba(35,42,54,0.4)", harder: "0 0 18px 0 rgba(35,42,54,0.8)", - focus: "0px 0px 1px 2px rgba(54, 150, 185, 0.6)" + focus: "0px 0px 1px 2px rgba(54, 150, 185, 0.6)", }, /* @@ -183,7 +183,7 @@ export default { | */ fontFamily: { - sans: ["Muli, Century Gothic, Lucida Grande, Sans-Serif"] + sans: ["Muli, Century Gothic, Lucida Grande, Sans-Serif"], }, /* @@ -202,7 +202,7 @@ export default { xl: "24px", "2xl": "32px", "3xl": "48px", - "4xl": "72px" + "4xl": "72px", }, /* @@ -214,7 +214,7 @@ export default { */ fontWeight: { regular: 400, - bold: 700 + bold: 700, }, /* @@ -235,9 +235,10 @@ export default { radioIndicator: "12px", input: "52px", header: "85px", + headerSmall: "60px", headerTransparent: "166px", "20": "20px", - "40": "40px" + "40": "40px", }, /* @@ -261,7 +262,7 @@ export default { modalClose: "10px", floatingLabel: "13px", "-floatingLabel": "-13px", - radioIndicator: "5px" + radioIndicator: "5px", }, /* @@ -277,7 +278,7 @@ export default { */ letterSpacing: { normal: "0", - wide: "1px" + wide: "1px", }, /* @@ -296,7 +297,7 @@ export default { md: 2, lg: 2.5, xl: 3, - label: "24px" + label: "24px", }, /* @@ -317,12 +318,15 @@ export default { "10": "10px", "15": "15px", "20": "20px", + "22": "22px", "25": "25px", "30": "30px", "40": "40px", labelPopupIcon: "3px", + headerMenu: "15px", + "-headerMenu": "-15px", "-selectMenu": "-21px", - "-selectWithHintMenu": "-43px" + "-selectWithHintMenu": "-43px", }, /* @@ -336,7 +340,7 @@ export default { maxHeight: { full: "100%", dropdown: "240px", - dropdownSM: "190px" + dropdownSM: "190px", }, /* @@ -348,7 +352,7 @@ export default { | */ maxWidth: { - full: "100%" + full: "100%", }, /* @@ -365,7 +369,7 @@ export default { full: "100%", screen: "100vh", "36": "36px", - "52": "52px" + "52": "52px", }, /* @@ -380,7 +384,7 @@ export default { "0": "0", auto: "auto", full: "100%", - screen: "100vw" + screen: "100vw", }, /* @@ -398,7 +402,7 @@ export default { "40": ".4", "60": ".6", "80": ".8", - "100": "1" + "100": "1", }, /* @@ -425,14 +429,14 @@ export default { "25": "25px", "30": "30px", "40": "40px", - floatingLabelInputFocused: "12px" + floatingLabelInputFocused: "12px", }, customRotate: { "90": "90deg", "180": "180deg", "270": "270deg", - "360": "360deg" + "360": "360deg", }, /* |----------------------------------------------------------------------------- @@ -442,7 +446,7 @@ export default { | Class name: .text-{color} | */ - textColor: theme => theme("colors"), + textColor: (theme) => theme("colors"), /* |----------------------------------------------------------------------------- @@ -475,11 +479,15 @@ export default { modalSmall: "370px", modalLarge: "770px", checkbox: "24px", - radioIndicator: "12px" + radioIndicator: "12px", + logoDefault: "170px", + logoSmall: "140px", + menuDropdown: "220px", + profileDropdown: "320px", }, transitionDuration: { - "200": "200ms" + "200": "200ms", }, /* @@ -496,7 +504,7 @@ export default { clearButton: 10, modalClose: 10, dropdownMenu: 20, - modal: 98 + modal: 98, }, /* @@ -507,19 +515,19 @@ export default { | Class name: .bg-gradient-{direction}-{color} | */ - linearGradients: theme => ({ + linearGradients: (theme) => ({ directions: { "to-top": "to top", "to-right": "to right", "to-bottom": "to bottom", - "to-left": "to left" + "to-left": "to left", }, colors: { fade: ["rgba(255,255,255,0) 90%", "rgba(255,255,255,1) 100%"], grey: [theme("colors")["grey-bright"], `${theme("colors").white} 20%`], - black: ["rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)"] - } - }) + black: ["rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)"], + }, + }), }, variants: { @@ -593,8 +601,8 @@ export default { skew: ["responsive", "hover", "focus"], transitionProperty: ["responsive", "hover"], transitionTimingFunction: ["responsive", "hover"], - transitionDuration: ["responsive", "hover"] + transitionDuration: ["responsive", "hover"], }, corePlugins: {}, - plugins: [TransformPlugin, require("tailwindcss-gradients")()] + plugins: [TransformPlugin, require("tailwindcss-gradients")()], } diff --git a/stories/header/header.stories.js b/stories/header/header.stories.js index fff05589c..98307c1af 100644 --- a/stories/header/header.stories.js +++ b/stories/header/header.stories.js @@ -10,6 +10,67 @@ import Button from "../../src/components/button" import Plus from "../../src/components/icons/plus" import Heart from "../../src/components/icons/heart" import Logo from "../../src/components/icons/logo" +import MyCars from "../../src/components/icons/myCars" +import Profile from "../../src/components/icons/profile" +import Logout from "../../src/components/icons/logout" + +const renderLanguageNavigation = () => ( + DE} + > + + +) + +const profile = { + renderWelcomeMessage: () => ( +
Herzlich wilkommen!
+ ), + renderContent: () => { + return ( + <> + DEIN KAUFEN + + +   Deine Favoriten. + +
+ DEIN VERKAUFEN + + +   Kostenlos inserieren + + + +   Deine Inserate + + + +   Dein Konto + +
+ + +   Abmelden + + + ) + }, +} storiesOf("Header", module) .add( @@ -49,7 +110,7 @@ storiesOf("Header", module) colors={{ icon: "#f73b47", carFor: "#FFF", - you: "#f73b47" + you: "#f73b47", }} /> ) @@ -83,7 +144,7 @@ storiesOf("Header", module) colors={{ icon: "#FFF", carFor: "#FFF", - you: "#FFF" + you: "#FFF", }} /> ) @@ -107,7 +168,7 @@ storiesOf("Header", module) () => Für Garagisten, () => ( Sich Informieren}> -
    +
    • Additional info one
      • @@ -160,54 +221,45 @@ storiesOf("Header", module) ~~~~ `)(() => { const links = [ - () => Auto Kaufen, - () => Auto Verkaufen, - () => Für Garagisten, + () => ( + + Auto Kaufen + + ), + () => ( + + Auto Verkaufen + + ), + () => ( + + Für Garagisten + + ), () => ( Sich Informieren}> -
        -
      • + - ) + ), ] const renderCTAButton = () => ( - - ) - const iconButtons = [() => ] - const renderProfileContent = () => ( -
        -

        Some dummy profile tooltip content.

        +
        +
        ) - const renderLanguageNavigation = () => ( - DE} - > - - - ) + const iconButtons = [() => ] return (
        @@ -215,7 +267,7 @@ storiesOf("Header", module) links={links} renderCTAButton={renderCTAButton} iconButtons={iconButtons} - renderProfileContent={renderProfileContent} + profile={profile} renderLanguageNavigation={renderLanguageNavigation} />
        @@ -282,40 +334,31 @@ storiesOf("Header", module) colors={{ icon: "#f73b47", carFor: "#FFF", - you: "#f73b47" + you: "#f73b47", }} /> ) const links = [ - () => Meine Inserate, - () => Automarkt, - () => News + () => ( + + Meine Inserate + + ), + () => ( + + Automarkt + + ), + () => ( + + News + + ), ] const renderCTAButton = () => ( - - ) - const renderProfileContent = () => ( -
        -

        Some dummy profile tooltip content.

        -
        - ) - const renderLanguageNavigation = () => ( - DE}> - - + ) return ( @@ -325,7 +368,7 @@ storiesOf("Header", module) renderLogo={renderLogo} links={links} renderCTAButton={renderCTAButton} - renderProfileContent={renderProfileContent} + profile={profile} renderLanguageNavigation={renderLanguageNavigation} />
        From 7338ef934d755ff01478a0e9d5c619a036eacfa6 Mon Sep 17 00:00:00 2001 From: Lorenzo Kappeler Date: Tue, 19 May 2020 15:58:28 +0200 Subject: [PATCH 04/43] chore: cleanup and update code examples --- src/components/header/dropdown.tsx | 2 + src/components/header/index.tsx | 13 +- src/components/icons/.DS_Store | Bin 6148 -> 6148 bytes stories/header/header.stories.js | 246 +++++++++++++++++------------ 4 files changed, 160 insertions(+), 101 deletions(-) diff --git a/src/components/header/dropdown.tsx b/src/components/header/dropdown.tsx index 73e01059b..2ac3b9891 100644 --- a/src/components/header/dropdown.tsx +++ b/src/components/header/dropdown.tsx @@ -39,6 +39,7 @@ const HeaderDropdown: FC = ({ className={classNames( "flex items-center cursor-pointer text-black py-10 lg:py-0", { + "lg:text-black": theme === HeaderTheme.LIGHT, "lg:text-white": theme === HeaderTheme.DARK || theme === HeaderTheme.TRANSPARENT, } @@ -49,6 +50,7 @@ const HeaderDropdown: FC = ({ JSX.Element theme?: HeaderTheme + mobileMenuText?: string } const Header: FC = ({ @@ -32,6 +33,7 @@ const Header: FC = ({ renderContent: () => null, }, renderLanguageNavigation = () => null, + mobileMenuText = "MENU", }) => { let iconColor = "#A0A7AB" if (theme === HeaderTheme.DARK || theme === HeaderTheme.TRANSPARENT) { @@ -145,7 +147,16 @@ const Header: FC = ({
        {languageNavigation}
        {/* Menu Block Groups for mobile */}
        - MENÜ + + {mobileMenuText} + {renderModal()}
diff --git a/src/components/icons/.DS_Store b/src/components/icons/.DS_Store index 46fef127e22632fa53abf1fc1be016a9c7a7e068..5008ddfcf53c02e82d7eee2e57c38e5672ef89f6 100644 GIT binary patch delta 70 zcmZoMXfc=|#>AjHu~2NHo+1YW5HK<@2y8ZFzQ(fIf%z8GW_AvK4xj>{$am(+{342+ UKzW7)kiy9(Jj$D6L{=~Z03S{czyJUM delta 373 zcmZoMXfc=|#>B)qF;Q%yo}wrd0|Nsi1A_oVaY0f}eiD%PHK|}@;&R4%kPI_}GlLsL zWKub@Y))oziGjflMkZz!RyKAHPA+avZa!|#*x-!(^5BxhlG0+Q#G-fsnc&Qn)TG3s z@XVBwjF8kk*PPU{)I9$ppTv^XqG*ufko^1{paKXxF)1uFwLD%x#5q5&Br!9uKD7vJ zAjFWE@XWlF{Bo!K(!7*num-51=&s?E&}bQDaC&1!2oIXEQM-GbsuoBC$WUb1xA@ONApr)03=AqzCWJZy zq@aOO7F?8 ( - DE} - > - - -) +const renderLanguageNavigationFactory = ( + renderParent = () => DE +) => { + return () => { + return ( + + + + ) + } +} const profile = { renderWelcomeMessage: () => ( @@ -162,62 +165,80 @@ storiesOf("Header", module) wInfo(` Content Example - Car For You ~~~~ + const renderLanguageNavigationFactory = ( + renderParent = () => DE + ) => { + return () => { + return ( + + + + ) + } + } const links = [ - () => Auto Kaufen, - () => Auto Verkaufen, - () => Für Garagisten, + () => ( + + Auto Kaufen + + ), + () => ( + + Auto Verkaufen + + ), + () => ( + + Für Garagisten + + ), () => ( Sich Informieren}> -