From 2fb04ded9ed4f5aa2b0229beea4326a727afada1 Mon Sep 17 00:00:00 2001 From: Alexandre Valsamou-Stanislawski Date: Tue, 19 Oct 2021 13:59:08 +0200 Subject: [PATCH] Ajoute un composant Button --- mon-entreprise/package.json | 1 + .../source/design-system/buttons/Button.tsx | 55 +++++++++++++++++++ .../source/design-system/buttons/index.ts | 1 + mon-entreprise/source/design-system/index.ts | 2 + .../source/design-system/styled.d.ts | 2 +- mon-entreprise/source/design-system/theme.ts | 2 +- .../source/design-system/typography/index.ts | 2 + yarn.lock | 29 ++++++++++ 8 files changed, 92 insertions(+), 2 deletions(-) create mode 100644 mon-entreprise/source/design-system/buttons/Button.tsx create mode 100644 mon-entreprise/source/design-system/buttons/index.ts diff --git a/mon-entreprise/package.json b/mon-entreprise/package.json index 6f2b5f4f4..f2b26862a 100644 --- a/mon-entreprise/package.json +++ b/mon-entreprise/package.json @@ -64,6 +64,7 @@ }, "dependencies": { "@babel/runtime": "^7.3.4", + "@react-aria/button": "^3.3.4", "@react-aria/searchfield": "^3.2.0", "@react-aria/textfield": "^3.4.0", "@react-pdf/renderer": "^1.6.10", diff --git a/mon-entreprise/source/design-system/buttons/Button.tsx b/mon-entreprise/source/design-system/buttons/Button.tsx new file mode 100644 index 000000000..ccbbf12b2 --- /dev/null +++ b/mon-entreprise/source/design-system/buttons/Button.tsx @@ -0,0 +1,55 @@ +import { useButton } from '@react-aria/button' +import { AriaButtonProps } from '@react-types/button' +import { useRef } from 'react' +import styled from 'styled-components' + +type Size = 'XL' | 'MD' | 'XS' +type Color = 'primary' | 'secondary' | 'tertiary' + +type ButtonVisualProps = { + color: Color + size: Size +} +type ButtonProps = ButtonVisualProps & AriaButtonProps<'button'> + +export const Button = (props: ButtonProps) => { + const { children, color, size } = props + const buttonRef = useRef(null) + const buttonProps = useButton(props, buttonRef) + + return ( + + {children} + + ) +} + +const StyledButton = styled.button` + background-color: ${({ theme, color }) => + theme.colors.bases[color][color === 'primary' ? 700 : 300]}; + color: ${({ theme, color }) => + theme.colors.extended.grey[color === 'primary' ? 100 : 800]}; + padding: ${({ size }) => { + if (size === 'XL') return '1.25rem 2rem' + if (size === 'MD') return '0.875rem 2rem' + if (size === 'XS') return '0.5rem 2rem' + }}; + + border-radius: 2.5rem; + font-size: 1rem; + line-height: 1.5rem; + + &::hover { + background-color: ${({ theme, color }) => + theme.colors.bases[color][ + color === 'primary' ? 800 : color === 'secondary' ? 500 : 400 + ]}; + } + + &::disabled { + background-color: ${({ theme, color }) => + theme.colors.bases[color][color === 'primary' ? 200 : 100]}; + color: ${({ theme, color }) => + theme.colors.extended.grey[color === 'primary' ? 100 : 400]}; + } +` diff --git a/mon-entreprise/source/design-system/buttons/index.ts b/mon-entreprise/source/design-system/buttons/index.ts new file mode 100644 index 000000000..4d0a670f4 --- /dev/null +++ b/mon-entreprise/source/design-system/buttons/index.ts @@ -0,0 +1 @@ +export { Button } from './Button' diff --git a/mon-entreprise/source/design-system/index.ts b/mon-entreprise/source/design-system/index.ts index 80b88756b..7f9b95b57 100644 --- a/mon-entreprise/source/design-system/index.ts +++ b/mon-entreprise/source/design-system/index.ts @@ -1,4 +1,6 @@ export * as layout from './layout' export * as field from './field' +export * as button from './buttons' +export * as typography from './typography' export { GlobalStyle } from './global-style' diff --git a/mon-entreprise/source/design-system/styled.d.ts b/mon-entreprise/source/design-system/styled.d.ts index a99a03eb9..58a3c6bcb 100644 --- a/mon-entreprise/source/design-system/styled.d.ts +++ b/mon-entreprise/source/design-system/styled.d.ts @@ -34,7 +34,7 @@ declare module 'styled-components' { colors: { bases: { primary: Palette - seconday: Palette + secondary: Palette tertiary: Palette } diff --git a/mon-entreprise/source/design-system/theme.ts b/mon-entreprise/source/design-system/theme.ts index 6f82f4727..25bffaa71 100644 --- a/mon-entreprise/source/design-system/theme.ts +++ b/mon-entreprise/source/design-system/theme.ts @@ -13,7 +13,7 @@ export const theme: DefaultTheme = { 700: '#1D458C', 800: '#122F62', }, - seconday: { + secondary: { 100: '#E0FDFF', 200: '#AFFBFF', 300: '#7AEEF4', diff --git a/mon-entreprise/source/design-system/typography/index.ts b/mon-entreprise/source/design-system/typography/index.ts index e69de29bb..22a0462b2 100644 --- a/mon-entreprise/source/design-system/typography/index.ts +++ b/mon-entreprise/source/design-system/typography/index.ts @@ -0,0 +1,2 @@ +export * as headings from './heading' +export * as paragraphs from './paragraphs' diff --git a/yarn.lock b/yarn.lock index b78361ca8..98fe7be6b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3041,6 +3041,18 @@ promise-limit "^2.5.0" puppeteer "^1.7.0" +"@react-aria/button@^3.3.4": + version "3.3.4" + resolved "https://registry.yarnpkg.com/@react-aria/button/-/button-3.3.4.tgz#3af6eb4e0a479a76ba7386d541051d1273cd68fa" + integrity sha512-vebTcf9YpwaKCvsca2VWhn6eYPa15OJtMENwaGop72UrL35Oa7xDgU0RG22RAjRjt8HRVlAfLpHkJQW6GBGU3g== + dependencies: + "@babel/runtime" "^7.6.2" + "@react-aria/focus" "^3.5.0" + "@react-aria/interactions" "^3.6.0" + "@react-aria/utils" "^3.9.0" + "@react-stately/toggle" "^3.2.3" + "@react-types/button" "^3.4.1" + "@react-aria/focus@^3.5.0": version "3.5.0" resolved "https://registry.yarnpkg.com/@react-aria/focus/-/focus-3.5.0.tgz#02b85f97d6114af1eccc0902ce40723b626cb7f9" @@ -3205,6 +3217,16 @@ "@react-types/searchfield" "^3.1.2" "@react-types/shared" "^3.8.0" +"@react-stately/toggle@^3.2.3": + version "3.2.3" + resolved "https://registry.yarnpkg.com/@react-stately/toggle/-/toggle-3.2.3.tgz#a4de6edc16982990492c6c557e5194f46dacc809" + integrity sha512-p5eVjXwNo4y4CeybxfjYmbTzNMNiI67uspbRAJnawWBVWw8X+yIvRfpjYAsqmvsJ+DsvwybSTlQDT6taGoWEsA== + dependencies: + "@babel/runtime" "^7.6.2" + "@react-stately/utils" "^3.2.2" + "@react-types/checkbox" "^3.2.3" + "@react-types/shared" "^3.8.0" + "@react-stately/utils@^3.2.2": version "3.2.2" resolved "https://registry.yarnpkg.com/@react-stately/utils/-/utils-3.2.2.tgz#468eafa60740c6b0b847a368215dfaa55e87f505" @@ -3219,6 +3241,13 @@ dependencies: "@react-types/shared" "^3.8.0" +"@react-types/checkbox@^3.2.3": + version "3.2.3" + resolved "https://registry.yarnpkg.com/@react-types/checkbox/-/checkbox-3.2.3.tgz#2b9d529c55c9884519c7f626f0fe8be7d0f18be1" + integrity sha512-YqeAFyrpaxI/eW6zQ7tVkKIASgzpywRrc6C/rV6Mw0zzGGSSvmYvdOBx9yHOEvpts7dLgaGlmLK6CeG7s4yGKg== + dependencies: + "@react-types/shared" "^3.8.0" + "@react-types/label@^3.5.0": version "3.5.0" resolved "https://registry.yarnpkg.com/@react-types/label/-/label-3.5.0.tgz#c7093871f42c62e1b5523f61a0856a2f58d4cf2a"