From 48310e09d199c12010d7f18e77002b8a02dc31e0 Mon Sep 17 00:00:00 2001 From: Johan Girod Date: Fri, 8 Sep 2023 15:51:50 +0200 Subject: [PATCH] Styled component update : Fix Errors on landing --- site/package.json | 1 + site/source/components/App.tsx | 8 ++-- site/source/components/SimulateurCard.tsx | 5 +-- site/source/design-system/card/Article.tsx | 2 +- site/source/design-system/card/Card.tsx | 2 +- site/source/design-system/card/SmallCard.tsx | 2 +- .../design-system/field/NumberField.tsx | 6 +-- .../design-system/field/SearchField.tsx | 10 ++--- .../design-system/field/TextAreaField.tsx | 39 ++++++++++--------- site/source/design-system/field/TextField.tsx | 32 +++++++-------- .../source/design-system/layout/Container.tsx | 4 +- site/source/design-system/layout/Grid.tsx | 2 +- site/source/design-system/layout/index.tsx | 30 ++++++++++++++ site/source/design-system/switch/Switch.tsx | 24 ++++++------ site/source/design-system/typography/link.tsx | 1 - yarn.lock | 3 +- 16 files changed, 103 insertions(+), 68 deletions(-) create mode 100644 site/source/design-system/layout/index.tsx diff --git a/site/package.json b/site/package.json index 0dcc9567a..a11cbe99c 100644 --- a/site/package.json +++ b/site/package.json @@ -94,6 +94,7 @@ "redux": "^4.2.0", "reselect": "^4.1.7", "styled-components": "^6.0.7", + "stylis": "^4.0.0", "whatwg-fetch": "^3.6.2" }, "devDependencies": { diff --git a/site/source/components/App.tsx b/site/source/components/App.tsx index 2c5120774..3857a857a 100644 --- a/site/source/components/App.tsx +++ b/site/source/components/App.tsx @@ -111,7 +111,7 @@ const App = () => { const engine = useEngine() return ( - + {!isEmbedded &&
}
{ } const StyledLayout = styled.div<{ - isEmbedded: boolean + $isEmbedded: boolean }>` - ${({ isEmbedded }) => - !isEmbedded && + ${({ $isEmbedded }) => + !$isEmbedded && css` flex-direction: column; display: flex; diff --git a/site/source/components/SimulateurCard.tsx b/site/source/components/SimulateurCard.tsx index 24bbcfadb..b02a9d4f0 100644 --- a/site/source/components/SimulateurCard.tsx +++ b/site/source/components/SimulateurCard.tsx @@ -26,7 +26,6 @@ export function SimulateurCard({ beta, small = false, fromGérer = false, - ...props }: SimulateurCardProps) { const isIframe = useIsEmbedded() const { t } = useTranslation() @@ -39,7 +38,7 @@ export function SimulateurCard({ return ( <> {small ? ( - + } to={{ @@ -61,7 +60,7 @@ export function SimulateurCard({ /> ) : ( - + diff --git a/site/source/design-system/card/Article.tsx b/site/source/design-system/card/Article.tsx index 70dbafa22..2bbfd0795 100644 --- a/site/source/design-system/card/Article.tsx +++ b/site/source/design-system/card/Article.tsx @@ -50,7 +50,7 @@ export function Article({ as={elementType} > {ctaLabel} - {linkProps.external && } + {linkProps.target === '_blank' && } diff --git a/site/source/design-system/card/Card.tsx b/site/source/design-system/card/Card.tsx index c4862d7f9..b80aa1e8a 100644 --- a/site/source/design-system/card/Card.tsx +++ b/site/source/design-system/card/Card.tsx @@ -90,7 +90,7 @@ export function Card(props: CardProps) { tabIndex={undefined} > {ctaLabel} - {linkProps.external && } + {linkProps.target === '_blank' && } )} diff --git a/site/source/design-system/card/SmallCard.tsx b/site/source/design-system/card/SmallCard.tsx index 183f4e80b..062cbdd85 100644 --- a/site/source/design-system/card/SmallCard.tsx +++ b/site/source/design-system/card/SmallCard.tsx @@ -45,7 +45,7 @@ export function SmallCard({ as="span" > {titleProps.children} - {linkProps.external && } + {linkProps.target === '_blank' && } {children && {children}} diff --git a/site/source/design-system/field/NumberField.tsx b/site/source/design-system/field/NumberField.tsx index 4efdc32a1..69bfe912f 100644 --- a/site/source/design-system/field/NumberField.tsx +++ b/site/source/design-system/field/NumberField.tsx @@ -100,9 +100,9 @@ export default function NumberField(props: NumberFieldProps) { )} diff --git a/site/source/design-system/field/SearchField.tsx b/site/source/design-system/field/SearchField.tsx index 6dab7f403..c3d1f44e7 100644 --- a/site/source/design-system/field/SearchField.tsx +++ b/site/source/design-system/field/SearchField.tsx @@ -38,9 +38,9 @@ const SearchInputContainer = styled(StyledInputContainer)` } ` -const IconContainer = styled.div<{ hasLabel?: boolean }>` +const IconContainer = styled.div<{ $hasLabel?: boolean }>` padding: calc( - ${({ hasLabel = false }) => (hasLabel ? '1rem' : '0rem')} + 0.5rem + ${({ $hasLabel = false }) => ($hasLabel ? '1rem' : '0rem')} + 0.5rem ) 0 0.5rem; ` @@ -67,10 +67,10 @@ export default function SearchField( return ( - + {props.isSearchStalled ? : } & { inputRef?: RefObject - small?: boolean + $small?: boolean rows?: number | undefined } @@ -24,8 +24,8 @@ export default function TextAreaField(props: TextAreaFieldProps) { return ( )} @@ -38,7 +38,10 @@ export default function TextAreaField(props: TextAreaFieldProps) { ref={props.inputRef || ref} /> {props.label && ( - + {props.label} )} @@ -131,9 +134,9 @@ export const StyledSuffix = styled.span` ` export const StyledTextAreaContainer = styled.div<{ - hasError: boolean - hasLabel: boolean - small?: boolean + $hasError: boolean + $hasLabel: boolean + $small?: boolean }>` border-radius: ${({ theme }) => theme.box.borderRadius}; border: ${({ theme }) => @@ -153,8 +156,8 @@ export const StyledTextAreaContainer = styled.div<{ transition: all 0.2s; :focus-within { - outline-color: ${({ theme, hasError }) => - hasError + outline-color: ${({ theme, $hasError }) => + $hasError ? theme.colors.extended.error[400] : theme.darkMode ? theme.colors.bases.primary[100] @@ -176,8 +179,8 @@ export const StyledTextAreaContainer = styled.div<{ `} } - ${({ hasLabel }) => - hasLabel && + ${({ $hasLabel }) => + $hasLabel && css` ${StyledTextArea}:not(:focus):placeholder-shown { color: transparent; @@ -196,8 +199,8 @@ export const StyledTextAreaContainer = styled.div<{ transform: translateY(-50%); } - ${({ theme, hasError }) => - hasError && + ${({ theme, $hasError }) => + $hasError && css` && { border-color: ${theme.colors.extended.error[400]}; @@ -209,18 +212,18 @@ export const StyledTextAreaContainer = styled.div<{ `} ${StyledTextArea}, ${StyledSuffix} { - padding: ${({ hasLabel, theme, small }) => - small + padding: ${({ $hasLabel, theme, $small }) => + $small ? css` ${theme.spacings.xxs} ${theme.spacings.xs} ` - : css`calc(${hasLabel ? LABEL_HEIGHT : '0rem'} + ${ + : css`calc(${$hasLabel ? LABEL_HEIGHT : '0rem'} + ${ theme.spacings.xs }) ${theme.spacings.sm} ${theme.spacings.xs}`}; } - ${({ small }) => - small && + ${({ $small }) => + $small && css` ${StyledSuffix}, ${StyledTextArea} { font-size: 1rem; diff --git a/site/source/design-system/field/TextField.tsx b/site/source/design-system/field/TextField.tsx index fb19d17cd..b6720cb6c 100644 --- a/site/source/design-system/field/TextField.tsx +++ b/site/source/design-system/field/TextField.tsx @@ -21,8 +21,8 @@ export default function TextField(props: TextFieldProps) { return ( )} @@ -127,9 +127,9 @@ export const StyledSuffix = styled.span` ` export const StyledInputContainer = styled.div<{ - hasError: boolean - hasLabel: boolean - small?: boolean + $hasError: boolean + $hasLabel: boolean + $small?: boolean }>` border-radius: ${({ theme }) => theme.box.borderRadius}; border: ${({ theme }) => @@ -150,8 +150,8 @@ export const StyledInputContainer = styled.div<{ transition: all 0.2s; :focus-within { - outline-color: ${({ theme, hasError }) => - hasError + outline-color: ${({ theme, $hasError }) => + $hasError ? theme.colors.extended.error[400] : theme.darkMode ? theme.colors.bases.primary[100] @@ -173,8 +173,8 @@ export const StyledInputContainer = styled.div<{ `} } - ${({ hasLabel }) => - hasLabel && + ${({ $hasLabel }) => + $hasLabel && css` ${StyledInput}:not(:focus):placeholder-shown { color: transparent; @@ -193,8 +193,8 @@ export const StyledInputContainer = styled.div<{ transform: translateY(-50%); } - ${({ theme, hasError }) => - hasError && + ${({ theme, $hasError }) => + $hasError && css` && { border-color: ${theme.colors.extended.error[400]}; @@ -206,12 +206,12 @@ export const StyledInputContainer = styled.div<{ `} ${StyledInput}, ${StyledSuffix} { - padding: ${({ hasLabel, theme, small }) => - small + padding: ${({ $hasLabel, theme, $small }) => + $small ? css` ${theme.spacings.xxs} ${theme.spacings.xs} ` - : css`calc(${hasLabel ? LABEL_HEIGHT : '0rem'} + ${ + : css`calc(${$hasLabel ? LABEL_HEIGHT : '0rem'} + ${ theme.spacings.xs }) ${theme.spacings.sm} ${theme.spacings.xs}`}; color: ${({ theme }) => @@ -220,8 +220,8 @@ export const StyledInputContainer = styled.div<{ : theme.colors.extended.grey[800]}; } - ${({ small }) => - small && + ${({ $small }) => + $small && css` ${StyledSuffix}, ${StyledInput} { font-size: 1rem; diff --git a/site/source/design-system/layout/Container.tsx b/site/source/design-system/layout/Container.tsx index 54cde83b9..4df10992d 100644 --- a/site/source/design-system/layout/Container.tsx +++ b/site/source/design-system/layout/Container.tsx @@ -86,7 +86,9 @@ const OuterContainer = styled.div` flex-direction: column; min-width: 100vw; background-color: ${({ theme, $backgroundColor }) => - $backgroundColor ? $backgroundColor(theme) : theme.colors}; + $backgroundColor + ? $backgroundColor(theme) + : theme.colors.extended.grey[100]}; @media print { min-width: initial; } diff --git a/site/source/design-system/layout/Grid.tsx b/site/source/design-system/layout/Grid.tsx index a4d4800b7..5ec399bf8 100644 --- a/site/source/design-system/layout/Grid.tsx +++ b/site/source/design-system/layout/Grid.tsx @@ -62,8 +62,8 @@ type GridProps = */ export default function FluidGrid(props: GridProps) { if (props.container === true) { - // eslint-disable-next-line @typescript-eslint/no-unused-vars const { container, item, ...containerProps } = props // Omit props.container and props.item + // eslint-disable-next-line @typescript-eslint/no-unused-vars return } else if (props.item === true) { diff --git a/site/source/design-system/layout/index.tsx b/site/source/design-system/layout/index.tsx new file mode 100644 index 000000000..dda93c517 --- /dev/null +++ b/site/source/design-system/layout/index.tsx @@ -0,0 +1,30 @@ +import { styled } from 'styled-components' + +import { Theme } from '@/types/styled' + +export { default as Container } from './Container' +export { default as Grid } from './Grid' +type SpacingProps = + | { xxl: true } + | { xl: true } + | { lg: true } + | { md: true } + | { sm: true } + | { xs: true } + | { xxs: true } + +export function Spacing(props: SpacingProps) { + return ( + key in props + ) ?? 'md' + } + /> + ) +} + +const SpacingStyled = styled.div<{ $size: keyof Theme['spacings'] }>` + height: ${({ theme, $size }) => theme.spacings[$size]}; +` diff --git a/site/source/design-system/switch/Switch.tsx b/site/source/design-system/switch/Switch.tsx index 06d98be13..8ff8c6c47 100644 --- a/site/source/design-system/switch/Switch.tsx +++ b/site/source/design-system/switch/Switch.tsx @@ -22,8 +22,8 @@ const sizeDico = { interface StyledProps { checked: boolean disabled: boolean - size: Size - light: boolean + $size: Size + $light: boolean } const StyledSpan = styled.span` @@ -43,7 +43,7 @@ const StyledSpan = styled.span` ` const StyledSwitch = styled.span` - --switch-size: ${({ size }) => sizeDico[size]}; + --switch-size: ${({ $size }) => sizeDico[$size]}; display: inline-flex; transition: all 0.15s ease-in-out; background-color: ${({ theme, checked }) => @@ -55,9 +55,9 @@ const StyledSwitch = styled.span` padding: 0.2rem; margin: 0 ${({ theme }) => theme.spacings.xxs}; border-radius: var(--switch-size); - width: calc(var(--switch-size) + ${({ light }) => (light ? 4 : 0)}px); - ${({ light }) => - light + width: calc(var(--switch-size) + ${({ $light }) => ($light ? 4 : 0)}px); + ${({ $light }) => + $light ? css` border: 2px #ffffffbf solid; ` @@ -105,7 +105,7 @@ type AriaSwitchProps = Parameters[0] export type SwitchProps = AriaSwitchProps & { size?: Size - light?: boolean + $light?: boolean children?: ReactNode className?: string role?: string @@ -118,7 +118,7 @@ export type SwitchProps = AriaSwitchProps & { export const Switch = (props: SwitchProps) => { const { size = 'MD', - light = false, + $light = false, children, className, invertLabel = false, @@ -137,8 +137,8 @@ export const Switch = (props: SwitchProps) => { {children} )} @@ -151,8 +151,8 @@ export const Switch = (props: SwitchProps) => { role={props?.role} /> {children} diff --git a/yarn.lock b/yarn.lock index c7b52802a..6a735529a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -25165,6 +25165,7 @@ __metadata: serve-static: ^1.15.0 storybook: ^7.0.5 styled-components: ^6.0.7 + stylis: ^4.0.0 ts-morph: ^17.0.1 ts-node: ^10.9.1 typescript: ^5.2.2 @@ -25995,7 +25996,7 @@ __metadata: languageName: node linkType: hard -"stylis@npm:^4.3.0": +"stylis@npm:^4.0.0, stylis@npm:^4.3.0": version: 4.3.0 resolution: "stylis@npm:4.3.0" checksum: 6120de3f03eacf3b5adc8e7919c4cca991089156a6badc5248752a3088106afaaf74996211a6817a7760ebeadca09004048eea31875bd8d4df51386365c50025