This repository has been archived by the owner on Dec 3, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Extracts the CAR FOR YOU header in tree theme variations: Light, Dark and Transparent
BREAKING CHANGE: refactor button size interface:
- removed: small: boolean
- replaced: size: "samll" | "larege" | "responsive"
* WIP: first draft desktop header
* feat: desktop layouts for header variations
* feat: mobile navigations
* chore: cleanup and update code examples
* chore remove .DS_Store
* chore: fix format
* chore: update snapshots
* unify classNames to use one condition per theme
* chore: use ternary operation to determine fill color
* chore: move theme conditions to context
* feat: use tailwind propertiers for svg icon components
* chore: use tailwind colors everywhere
* fix: propper BEM name for custom class
* chore: update snapshots
* chore: cleanup remove unused classes
* fix: make demo with carforyou content responsive
* chore: update snapshot
* chore: minor optimizations
* fix: export all header types and components
* fix: export all the icons
* chore: white text by default for transparent theme
* chore: add transparent example and tweak some missed theme specific classes
* fix: add grey border to light theme
* chore: optimize dropdowns
* chore: update snapshots
* chore: format to the new rules
* fix: mixed up button sizes
* chore: use bigger logo for ld breakpoint
* fix: z-index for menues
* fix: update snapshots
* chore: make navigation fit width and create a separate z-index for the dropdowns
* chore: update snapshots
* fix: trigger pre release
* chore: clean up logo
* BREAKING CHANGE: refactor button size interface
* chore: clean up icons and move examples to storybook folder
* fix: only export required icons
* fix: remove render props where not needed
* fix: clean up themeing colors
* chore: change interface for language navigation
* fix: update snapshots
* fix: remove unused variable
* fix: move sections to named functions- Loading branch information
Showing
20 changed files
with
1,072 additions
and
11 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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% | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -4,3 +4,4 @@ | |
| @import "./input/index.css"; | ||
| @import "./spinner.css"; | ||
| @import "./intercom.css"; | ||
| @import "./header.css"; | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,105 @@ | ||
| import React, { FC, useState, useEffect, useContext } from "react" | ||
| import classNames from "classnames" | ||
|
|
||
| import { defaultConfig as tailwindConfig } from "../../tailwind/index" | ||
| const { | ||
| theme: { | ||
| colors: { black: colorDropdownArrow }, | ||
| }, | ||
| } = tailwindConfig | ||
|
|
||
| import ArrowDownM from "../icons/arrowDownMCrop" | ||
| import HeaderThemeContext, { HeaderTheme } from "./themeContext" | ||
|
|
||
| interface Props { | ||
| renderParent: () => JSX.Element | ||
| children: JSX.Element | ||
| theme?: HeaderTheme | ||
| stickOut?: "left" | "right" | ||
| } | ||
|
|
||
| const HeaderDropdown: FC<Props> = ({ | ||
| renderParent, | ||
| stickOut = "right", | ||
| children, | ||
| }) => { | ||
| const [isOpen, setIsOpen] = useState(false) | ||
| const { isDark, isTransparent } = useContext(HeaderThemeContext) | ||
|
|
||
| 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 ( | ||
| <div | ||
| className={classNames( | ||
| "flex items-center cursor-pointer py-10 lg:py-0 hover:opacity-60", | ||
| { | ||
| "lg:text-white": isDark || isTransparent, | ||
| } | ||
| )} | ||
| onClick={toggle} | ||
| > | ||
| {renderParent()} | ||
| <ArrowDownM | ||
| height="28" | ||
| width="28" | ||
| color={colorDropdownArrow} | ||
| className={classNames("inline-block", { | ||
| "lg:text-white": isDark || isTransparent, | ||
| })} | ||
| /> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| const renderOpenState = () => { | ||
| return ( | ||
| <div className="bg-grey-1 lg:bg-transparent relative z-headerDropdown cursor-pointer -mx-headerMenu lg:mx-0 px-14 lg:px-0 py-10 lg:py-0"> | ||
| <div | ||
| className={classNames( | ||
| "flex items-center font-bold lg:font-regular hover:opacity-60", | ||
| { | ||
| "lg:text-white": isDark || isTransparent, | ||
| } | ||
| )} | ||
| onClick={toggle} | ||
| > | ||
| {renderParent()} | ||
| <ArrowDownM | ||
| height="28" | ||
| width="28" | ||
| className={classNames("inline-block customRotate-180", { | ||
| "lg:text-white": isDark || isTransparent, | ||
| })} | ||
| /> | ||
| </div> | ||
| <div | ||
| className={classNames( | ||
| "text-black text-left whitespace-no-wrap bg-grey-1 md:bg-white relative lg:absolute lg:border lg:border-grey-2 lg:rounded-4 lg:shadow-hard", | ||
| { | ||
| "right-0": stickOut === "left", | ||
| } | ||
| )} | ||
| > | ||
| {children} | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| return isOpen ? renderOpenState() : renderClosedState() | ||
| } | ||
|
|
||
| export default HeaderDropdown |
Oops, something went wrong.