Ajoute un composant Button

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",

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<HTMLButtonElement>(null)
+	const buttonProps = useButton(props, buttonRef)
+
+	return (
+		<StyledButton {...buttonProps} ref={buttonRef} color={color} size={size}>
+			{children}
+		</StyledButton>
+	)
+}
+
+const StyledButton = styled.button<ButtonVisualProps>`
+	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]};
+	}
+`

mon-entreprise/source/design-system/buttons/index.ts

@@ -0,0 +1 @@
+export { Button } from './Button'

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'

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
 			}
 

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',

mon-entreprise/source/design-system/typography/index.ts

@@ -0,0 +1,2 @@
+export * as headings from './heading'
+export * as paragraphs from './paragraphs'

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"