-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
📝(react) add forms examples to documentation
We think doing this really illustrates what the design system looks in real life, all components living together next to each other.
- Loading branch information
Showing
5 changed files
with
154 additions
and
4 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,5 @@ | ||
--- | ||
"@openfun/cunningham-react": minor | ||
--- | ||
|
||
add forms examples to documentation |
147 changes: 146 additions & 1 deletion
147
packages/react/src/components/Forms/Examples/index.stories.tsx
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 |
---|---|---|
@@ -1,9 +1,154 @@ | ||
import { Meta } from "@storybook/react"; | ||
import React from "react"; | ||
import { Input } from ":/components/Forms/Input"; | ||
import { Checkbox } from ":/components/Forms/Checkbox"; | ||
import { Button } from ":/components/Button"; | ||
import { Select } from ":/components/Forms/Select"; | ||
import { CunninghamProvider } from ":/components/Provider"; | ||
import { Switch } from ":/components/Forms/Switch"; | ||
import { Radio } from ":/components/Forms/Radio"; | ||
|
||
export default { | ||
title: "Components/Forms/Examples", | ||
} as Meta; | ||
|
||
export const Login = () => { | ||
return <div>DOUDOU</div>; | ||
return ( | ||
<form | ||
style={{ | ||
display: "flex", | ||
flexDirection: "column", | ||
gap: "1rem", | ||
width: "400px", | ||
}} | ||
> | ||
<h1 | ||
className="fs-h3 fw-bold clr-greyscale-900" | ||
style={{ textAlign: "center" }} | ||
> | ||
Please log-in! | ||
</h1> | ||
<Input label="Email address" fullWidth={true} /> | ||
<Input | ||
label="Password" | ||
type="password" | ||
text="Forgot your password ?" | ||
fullWidth={true} | ||
name="password" | ||
required={true} | ||
/> | ||
<div> | ||
<Checkbox label="Remember me" /> | ||
</div> | ||
<Button fullWidth={true}>Log-in</Button> | ||
</form> | ||
); | ||
}; | ||
|
||
export const Application = () => { | ||
return ( | ||
<CunninghamProvider> | ||
<form | ||
style={{ | ||
display: "flex", | ||
flexDirection: "column", | ||
gap: "1rem", | ||
width: "400px", | ||
}} | ||
> | ||
<h1 | ||
className="fs-h3 fw-bold clr-greyscale-900" | ||
style={{ textAlign: "center" }} | ||
> | ||
Application | ||
</h1> | ||
<Select | ||
label="Context" | ||
options={[ | ||
{ | ||
label: "Ask a document", | ||
}, | ||
{ | ||
label: "Download files", | ||
}, | ||
{ | ||
label: "Ask for help", | ||
}, | ||
]} | ||
fullWidth={true} | ||
/> | ||
<div style={{ display: "flex", gap: "1rem" }}> | ||
<Input label="First name" /> | ||
<Input label="Last name" /> | ||
</div> | ||
<Input | ||
label="Email address" | ||
fullWidth={true} | ||
text="Only @acme.com domain is authorized" | ||
/> | ||
<Input label="ZIP" fullWidth={true} /> | ||
<Input label="City" fullWidth={true} /> | ||
<div> | ||
<Switch label="SMS Notification" fullWidth={true} /> | ||
<Switch label="Subscribe to newsletter" fullWidth={true} /> | ||
</div> | ||
<Checkbox label="Agree to the terms and services" fullWidth={true} /> | ||
<Button fullWidth={true}>Apply</Button> | ||
<Button fullWidth={true} color="secondary"> | ||
Need help ? | ||
</Button> | ||
</form> | ||
</CunninghamProvider> | ||
); | ||
}; | ||
|
||
export const Sports = () => { | ||
return ( | ||
<CunninghamProvider> | ||
<form | ||
style={{ | ||
display: "flex", | ||
flexDirection: "column", | ||
gap: "1rem", | ||
width: "400px", | ||
}} | ||
> | ||
<h1 | ||
className="fs-h3 fw-bold clr-greyscale-900" | ||
style={{ textAlign: "center" }} | ||
> | ||
Register | ||
</h1> | ||
<div style={{ display: "flex", gap: "1rem" }}> | ||
<Input label="First name" /> | ||
<Input label="Last name" /> | ||
</div> | ||
|
||
<div style={{ display: "flex", gap: "0.5rem" }}> | ||
<Radio name="gender" label="Male" fullWidth={true} /> | ||
<Radio name="gender" label="Female" /> | ||
<Radio name="gender" label="Other" /> | ||
</div> | ||
<Select | ||
label="Competition" | ||
options={[ | ||
{ | ||
label: "Athletics", | ||
}, | ||
{ | ||
label: "Swimming", | ||
}, | ||
{ | ||
label: "Marathon", | ||
}, | ||
]} | ||
fullWidth={true} | ||
/> | ||
<Button fullWidth={true}>Apply</Button> | ||
<Button fullWidth={true} color="secondary"> | ||
Need help ? | ||
</Button> | ||
</form> | ||
</CunninghamProvider> | ||
); | ||
}; |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
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 |
---|---|---|
@@ -1 +1 @@ | ||
export const tokens = {"theme":{"colors":{"primary-text":"#FFFFFF","primary-100":"#EBF2FC","primary-200":"#8CB5EA","primary-300":"#5894E1","primary-400":"#377FDB","primary-500":"#055FD2","primary-600":"#0556BF","primary-700":"#044395","primary-800":"#033474","primary-900":"#022858","secondary-text":"#555F6B","secondary-100":"#F2F7FC","secondary-200":"#EBF3FA","secondary-300":"#E2EEF8","secondary-400":"#DDEAF7","secondary-500":"#D4E5F5","secondary-600":"#C1D0DF","secondary-700":"#97A3AE","secondary-800":"#757E87","secondary-900":"#596067","greyscale-000":"#FFFFFF","greyscale-100":"#FAFAFB","greyscale-200":"#F3F4F4","greyscale-300":"#E7E8EA","greyscale-400":"#C2C6CA","greyscale-500":"#9EA3AA","greyscale-600":"#79818A","greyscale-700":"#555F6B","greyscale-800":"#303C4B","greyscale-900":"#0C1A2B","success-text":"#FFFFFF","success-100":"#EFFCD3","success-200":"#DBFAA9","success-300":"#BEF27C","success-400":"#A0E659","success-500":"#76D628","success-600":"#5AB81D","success-700":"#419A14","success-800":"#2C7C0C","success-900":"#1D6607","info-text":"#FFFFFF","info-100":"#EBF2FC","info-200":"#8CB5EA","info-300":"#5894E1","info-400":"#377FDB","info-500":"#055FD2","info-600":"#0556BF","info-700":"#044395","info-800":"#033474","info-900":"#022858","warning-text":"#FFFFFF","warning-100":"#FFF8CD","warning-200":"#FFEF9B","warning-300":"#FFE469","warning-400":"#FFDA43","warning-500":"#FFC805","warning-600":"#DBA603","warning-700":"#B78702","warning-800":"#936901","warning-900":"#7A5400","danger-text":"#FFFFFF","danger-100":"#F4B0B0","danger-200":"#EE8A8A","danger-300":"#E65454","danger-400":"#E13333","danger-500":"#DA0000","danger-600":"#C60000","danger-700":"#9B0000","danger-800":"#780000","danger-900":"#5C0000"},"font":{"sizes":{"h1":"1.75rem","h2":"1.375rem","h3":"1.125rem","h4":"0.8125rem","h5":"0.625rem","h6":"0.5rem","l":"1rem","m":"0.8125rem","s":"0.6875rem"},"weights":{"thin":200,"light":300,"regular":400,"medium":500,"bold":600,"extrabold":700,"black":800},"families":{"base":"\"Roboto Flex Variable\", sans-serif","accent":"\"Roboto Flex Variable\", sans-serif"}},"spacings":{"xl":"4rem","l":"3rem","b":"1.625rem","s":"1rem","t":"0.5rem","st":"0.25rem"},"transitions":{"ease-in":"cubic-bezier(0.32, 0, 0.67, 0)","ease-out":"cubic-bezier(0.33, 1, 0.68, 1)","ease-in-out":"cubic-bezier(0.65, 0, 0.35, 1)","duration":"250ms"}},"components":{"forms-switch":{"accent-color":"#419A14","rail-background-color":"#9EA3AA","rail-background-color--disabled":"#C2C6CA","rail-border-radius":"50vw","handle-background-color":"white","handle-background-color--disabled":"#F3F4F4","handle-border-radius":"50%"},"forms-select":{"border-color":"#E7E8EA","border-color--focus":"#0556BF","border-color--hover":"#9EA3AA","border-radius":"8px","border-radius--focus":"2px","border-radius--hover":"2px","border-style":"solid","border-width":"2px","color":"#303C4B","font-size":"1rem","height":"3.5rem","item-background-color--hover":"#F3F4F4","item-background-color--selected":"#EBF2FC","item-color":"#303C4B","item-color--disabled":"#9EA3AA","item-font-size":"1rem","background-color":"white","menu-background-color":"white","label-color--focus":"#0556BF"},"forms-radio":{"border-color":"#E7E8EA","accent-color":"#419A14"},"forms-input":{"font-weight":400,"font-size":"1rem","border-radius":"8px","border-radius--hover":"2px","border-radius--focus":"2px","border-width":"2px","border-color":"#E7E8EA","border-color--hover":"#9EA3AA","border-color--focus":"#0556BF","border-style":"solid","color":"#303C4B","label-color--focus":"#0556BF"},"forms-field":{"width":"292px","font-size":"0.6875rem","color":"#79818A"},"forms-checkbox":{"background-color--hover":"#F3F4F4","font-size":"0.8125rem","font-weight":500,"color":"#0C1A2B","border-color":"#E7E8EA","border-radius":"2px","accent-color":"#419A14","size":"1.5rem"},"button":{"border-radius":"8px","border-radius--active":"2px","medium-height":"48px","small-height":"32px","medium-font-size":"1rem","small-font-size":"0.8125rem","font-weight":400}}}; | ||
export const tokens = {"theme":{"colors":{"primary-text":"#FFFFFF","primary-100":"#EBF2FC","primary-200":"#8CB5EA","primary-300":"#5894E1","primary-400":"#377FDB","primary-500":"#055FD2","primary-600":"#0556BF","primary-700":"#044395","primary-800":"#033474","primary-900":"#022858","secondary-text":"#555F6B","secondary-100":"#F2F7FC","secondary-200":"#EBF3FA","secondary-300":"#E2EEF8","secondary-400":"#DDEAF7","secondary-500":"#D4E5F5","secondary-600":"#C1D0DF","secondary-700":"#97A3AE","secondary-800":"#757E87","secondary-900":"#596067","greyscale-000":"#FFFFFF","greyscale-100":"#FAFAFB","greyscale-200":"#F3F4F4","greyscale-300":"#E7E8EA","greyscale-400":"#C2C6CA","greyscale-500":"#9EA3AA","greyscale-600":"#79818A","greyscale-700":"#555F6B","greyscale-800":"#303C4B","greyscale-900":"#0C1A2B","success-text":"#FFFFFF","success-100":"#EFFCD3","success-200":"#DBFAA9","success-300":"#BEF27C","success-400":"#A0E659","success-500":"#76D628","success-600":"#5AB81D","success-700":"#419A14","success-800":"#2C7C0C","success-900":"#1D6607","info-text":"#FFFFFF","info-100":"#EBF2FC","info-200":"#8CB5EA","info-300":"#5894E1","info-400":"#377FDB","info-500":"#055FD2","info-600":"#0556BF","info-700":"#044395","info-800":"#033474","info-900":"#022858","warning-text":"#FFFFFF","warning-100":"#FFF8CD","warning-200":"#FFEF9B","warning-300":"#FFE469","warning-400":"#FFDA43","warning-500":"#FFC805","warning-600":"#DBA603","warning-700":"#B78702","warning-800":"#936901","warning-900":"#7A5400","danger-text":"#FFFFFF","danger-100":"#F4B0B0","danger-200":"#EE8A8A","danger-300":"#E65454","danger-400":"#E13333","danger-500":"#DA0000","danger-600":"#C60000","danger-700":"#9B0000","danger-800":"#780000","danger-900":"#5C0000"},"font":{"sizes":{"h1":"1.75rem","h2":"1.375rem","h3":"1.125rem","h4":"0.8125rem","h5":"0.625rem","h6":"0.5rem","l":"1rem","m":"0.8125rem","s":"0.6875rem"},"weights":{"thin":200,"light":300,"regular":400,"medium":500,"bold":600,"extrabold":700,"black":800},"families":{"base":"\"Roboto Flex Variable\", sans-serif","accent":"\"Roboto Flex Variable\", sans-serif"}},"spacings":{"xl":"4rem","l":"3rem","b":"1.625rem","s":"1rem","t":"0.5rem","st":"0.25rem"},"transitions":{"ease-in":"cubic-bezier(0.32, 0, 0.67, 0)","ease-out":"cubic-bezier(0.33, 1, 0.68, 1)","ease-in-out":"cubic-bezier(0.65, 0, 0.35, 1)","duration":"250ms"}},"components":{"forms-switch":{"accent-color":"#419A14","rail-background-color":"#9EA3AA","rail-background-color--disabled":"#C2C6CA","rail-border-radius":"50vw","handle-background-color":"white","handle-background-color--disabled":"#F3F4F4","handle-border-radius":"50%"},"forms-select":{"border-color":"#E7E8EA","border-color--focus":"#0556BF","border-color--hover":"#9EA3AA","border-radius":"8px","border-radius--focus":"2px","border-radius--hover":"2px","border-style":"solid","border-width":"1px","color":"#303C4B","font-size":"1rem","height":"3.5rem","item-background-color--hover":"#F3F4F4","item-background-color--selected":"#EBF2FC","item-color":"#303C4B","item-color--disabled":"#9EA3AA","item-font-size":"1rem","background-color":"white","menu-background-color":"white","label-color--focus":"#0556BF"},"forms-radio":{"border-color":"#E7E8EA","accent-color":"#419A14"},"forms-input":{"font-weight":400,"font-size":"1rem","border-radius":"8px","border-radius--hover":"2px","border-radius--focus":"2px","border-width":"1px","border-color":"#E7E8EA","border-color--hover":"#9EA3AA","border-color--focus":"#0556BF","border-style":"solid","color":"#303C4B","label-color--focus":"#0556BF"},"forms-field":{"width":"292px","font-size":"0.6875rem","color":"#79818A"},"forms-checkbox":{"background-color--hover":"#F3F4F4","font-size":"0.8125rem","font-weight":500,"color":"#0C1A2B","border-color":"#E7E8EA","border-radius":"2px","accent-color":"#419A14","size":"1.5rem"},"button":{"border-radius":"8px","border-radius--active":"2px","medium-height":"48px","small-height":"32px","medium-font-size":"1rem","small-font-size":"0.8125rem","font-weight":400}}}; |
Oops, something went wrong.