diff --git a/stories/FormRadio/Documentation.stories.mdx b/stories/FormRadio/Documentation.stories.mdx deleted file mode 100644 index 171f25f3..00000000 --- a/stories/FormRadio/Documentation.stories.mdx +++ /dev/null @@ -1,70 +0,0 @@ -import { Meta, Story, Canvas, Props } from '@storybook/addon-docs/blocks'; -import { FormRadio } from '../../src/formRadio/FormRadio'; -import '../style.css'; - - - -# FormRadio - -A radio component ready to use in your form. - -FormRadio is UI/UX agnostic so you need to provide your style to have the look and feel you prefer. - -## Usage - -Use the radio component when users can only select one option from a list. - -An example with all the available properties is: - -```js - -``` - - diff --git a/stories/FormRadio/Live.stories.mdx b/stories/FormRadio/Live.stories.mdx deleted file mode 100644 index 50373310..00000000 --- a/stories/FormRadio/Live.stories.mdx +++ /dev/null @@ -1,30 +0,0 @@ -import { Meta, Story, Canvas, Props } from '@storybook/addon-docs/blocks'; -import { FormRadio } from '../../src/formRadio/FormRadio'; -import FormRadioLive from '../liveEdit/FormRadioLive'; - - - -# Form Radio - -In the live editor you can play with all the available properties, change the look and feel and interact with the component - - - - - - - -# Properties - -below are described the list of all available properties. the one marked with (\*) are mandatory the other instead are optional. - - diff --git a/stories/FormRadio/Styled.stories.mdx b/stories/FormRadio/Styled.stories.mdx deleted file mode 100644 index c872c417..00000000 --- a/stories/FormRadio/Styled.stories.mdx +++ /dev/null @@ -1,781 +0,0 @@ -import { Meta, Story, Canvas, Props } from '@storybook/addon-docs/blocks'; -import { FormInput } from '../../src/formInput/FormInput'; -import { FormRadio } from '../../src/formRadio/FormRadio'; -import '../style.css'; - - - -# GOVUK Style - -In this section we're using the formRadio component providing the GovUk style passing the relative `className`. Feel free to use your own css and style the formRadio as you prefer - - - - {() => { - const [value, setValue] = React.useState(''); - const handleChange = event => setValue(event.target.value); - return ( -
- handleChange(e)} - /> - handleChange(e)} - /> -
- ); - }} -
-
- -# Stacked - - - - {() => { - const [value, setValue] = React.useState(''); - const handleChange = event => setValue(event.target.value); - return ( -
- handleChange(e)} - /> - handleChange(e)} - /> - handleChange(e)} - /> - handleChange(e)} - /> -
- ); - }} -
-
- -# Disabled - - - - {() => { - const [value, setValue] = React.useState(''); - const handleChange = event => setValue(event.target.value); - return ( -
- handleChange(e)} - /> - handleChange(e)} - /> - handleChange(e)} - /> -
- ); - }} -
-
- -# Preselected - - - - {() => { - const [value, setValue] = React.useState('Yes'); - const handleChange = event => setValue(event.target.value); - return ( -
- handleChange(e)} - /> - handleChange(e)} - /> -
- ); - }} -
-
- -# With hints - - - - {() => { - const [value, setValue] = React.useState(''); - const handleChange = event => setValue(event.target.value); - return ( -
- handleChange(e)} - /> - handleChange(e)} - /> -
- ); - }} -
-
- -# Reveal - - - - {() => { - const [value, setValue] = React.useState(''); - const [emailValue, setEmailValue] = React.useState(''); - const [phoneValue, setPhoneValue] = React.useState(''); - const [textMessageValue, setTextMessageValue] = React.useState(''); - const handleChange = event => setValue(event.target.value); - const handleEmailChange = value => { - setEmailValue(value); - } - const handlePhoneChange = value => { - setPhoneValue(value); - } - const handleTextMessageChange = value => { - setTextMessageValue(value); - } - return ( -
- handleEmailChange(e) - }} - name="contact" - selected={value === "email"} - onChange={e => handleChange(e)} - /> - handlePhoneChange(e) - }} - name="contact" - selected={value === "phone"} - onChange={e => handleChange(e)} - /> - handleTextMessageChange(e) - }} - name="contact" - selected={value === "text"} - onChange={e => handleChange(e)} - /> -
- ); - }} -
-
- -The css we used to styled the formRadio component is the following: - -```css -.govuk-hint { - font-family: 'GDS Transport', arial, sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - font-weight: 400; - font-size: 16px; - font-size: 1rem; - line-height: 1.25; - display: block; - margin-bottom: 15px; - color: #505a5f; -} - -@media print { - .govuk-hint { - font-family: sans-serif; - } -} - -@media (min-width: 40.0625em) { - .govuk-hint { - font-size: 19px; - font-size: 1.1875rem; - line-height: 1.31579; - } -} - -@media print { - .govuk-hint { - font-size: 14pt; - line-height: 1.15; - } -} - -.govuk-label:not(.govuk-label--m):not(.govuk-label--l):not(.govuk-label--xl) - + .govuk-hint { - margin-bottom: 10px; -} - -.govuk-fieldset__legend:not(.govuk-fieldset__legend--m):not(.govuk-fieldset__legend--l):not(.govuk-fieldset__legend--xl) - + .govuk-hint { - margin-bottom: 10px; -} - -.govuk-fieldset__legend + .govuk-hint { - margin-top: -5px; -} - -.govuk-label { - font-family: 'GDS Transport', arial, sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - font-weight: 400; - font-size: 16px; - font-size: 1rem; - line-height: 1.25; - color: #0b0c0c; - display: block; - margin-bottom: 5px; -} - -@media print { - .govuk-label { - font-family: sans-serif; - } -} - -@media (min-width: 40.0625em) { - .govuk-label { - font-size: 19px; - font-size: 1.1875rem; - line-height: 1.31579; - } -} - -@media print { - .govuk-label { - font-size: 14pt; - line-height: 1.15; - } -} - -@media print { - .govuk-label { - color: #000; - } -} - -.govuk-label--xl { - font-family: 'GDS Transport', arial, sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - font-weight: 700; - font-size: 32px; - font-size: 2rem; - line-height: 1.09375; - margin-bottom: 15px; -} - -@media print { - .govuk-label--xl { - font-family: sans-serif; - } -} - -@media (min-width: 40.0625em) { - .govuk-label--xl { - font-size: 48px; - font-size: 3rem; - line-height: 1.04167; - } -} - -@media print { - .govuk-label--xl { - font-size: 32pt; - line-height: 1.15; - } -} - -.govuk-label--l { - font-family: 'GDS Transport', arial, sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - font-weight: 700; - font-size: 24px; - font-size: 1.5rem; - line-height: 1.04167; - margin-bottom: 15px; -} - -@media print { - .govuk-label--l { - font-family: sans-serif; - } -} - -@media (min-width: 40.0625em) { - .govuk-label--l { - font-size: 36px; - font-size: 2.25rem; - line-height: 1.11111; - } -} - -@media print { - .govuk-label--l { - font-size: 24pt; - line-height: 1.05; - } -} - -.govuk-label--m { - font-family: 'GDS Transport', arial, sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - font-weight: 700; - font-size: 18px; - font-size: 1.125rem; - line-height: 1.11111; - margin-bottom: 10px; -} - -@media print { - .govuk-label--m { - font-family: sans-serif; - } -} - -@media (min-width: 40.0625em) { - .govuk-label--m { - font-size: 24px; - font-size: 1.5rem; - line-height: 1.25; - } -} - -@media print { - .govuk-label--m { - font-size: 18pt; - line-height: 1.15; - } -} - -.govuk-label--s { - font-family: 'GDS Transport', arial, sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - font-weight: 700; - font-size: 16px; - font-size: 1rem; - line-height: 1.25; -} - -@media print { - .govuk-label--s { - font-family: sans-serif; - } -} - -@media (min-width: 40.0625em) { - .govuk-label--s { - font-size: 19px; - font-size: 1.1875rem; - line-height: 1.31579; - } -} - -@media print { - .govuk-label--s { - font-size: 14pt; - line-height: 1.15; - } -} - -.govuk-label-wrapper { - margin: 0; -} - -.govuk-radios__item { - font-family: 'GDS Transport', arial, sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - font-weight: 400; - font-size: 16px; - font-size: 1rem; - line-height: 1.25; - display: block; - position: relative; - min-height: 40px; - margin-bottom: 10px; - padding-left: 40px; - clear: left; -} - -@media print { - .govuk-radios__item { - font-family: sans-serif; - } -} - -@media (min-width: 40.0625em) { - .govuk-radios__item { - font-size: 19px; - font-size: 1.1875rem; - line-height: 1.31579; - } -} - -@media print { - .govuk-radios__item { - font-size: 14pt; - line-height: 1.15; - } -} - -.govuk-radios__item:last-child, -.govuk-radios__item:last-of-type { - margin-bottom: 0; -} - -.govuk-radios__input { - cursor: pointer; - position: absolute; - z-index: 1; - top: -2px; - left: -2px; - width: 44px; - height: 44px; - margin: 0; - opacity: 0; -} - -.govuk-radios__label { - display: inline-block; - margin-bottom: 0; - padding: 8px 15px 5px; - cursor: pointer; - -ms-touch-action: manipulation; - touch-action: manipulation; -} - -.govuk-radios__label:before { - content: ''; - -webkit-box-sizing: border-box; - box-sizing: border-box; - position: absolute; - top: 0; - left: 0; - width: 40px; - height: 40px; - border: 2px solid currentColor; - border-radius: 50%; - background: transparent; -} - -.govuk-radios__label:after { - content: ''; - position: absolute; - top: 10px; - left: 10px; - width: 0; - height: 0; - border: 10px solid currentColor; - border-radius: 50%; - opacity: 0; - background: currentColor; -} - -.govuk-radios__hint { - display: block; - padding-right: 15px; - padding-left: 15px; -} - -.govuk-radios__input:focus + .govuk-radios__label:before { - border-width: 4px; - -webkit-box-shadow: 0 0 0 4px #fd0; - box-shadow: 0 0 0 4px #fd0; -} - -.govuk-radios__input:checked + .govuk-radios__label:after { - opacity: 1; -} - -.govuk-radios__input:disabled, -.govuk-radios__input:disabled + .govuk-radios__label { - cursor: default; -} - -.govuk-radios__input:disabled + .govuk-radios__label { - opacity: 0.5; -} - -@media (min-width: 40.0625em) { - .govuk-radios--inline:after { - content: ''; - display: block; - clear: both; - } - - .govuk-radios--inline .govuk-radios__item { - margin-right: 20px; - float: left; - clear: none; - } -} - -.govuk-radios--inline.govuk-radios--conditional .govuk-radios__item { - margin-right: 0; - float: none; -} -``` - - diff --git a/stories/FormRadio/UnStyled.stories.mdx b/stories/FormRadio/UnStyled.stories.mdx deleted file mode 100644 index eabd44fd..00000000 --- a/stories/FormRadio/UnStyled.stories.mdx +++ /dev/null @@ -1,56 +0,0 @@ -import { Meta, Story, Canvas, Props } from '@storybook/addon-docs/blocks'; -import { FormRadio } from '../../src/formRadio/FormRadio'; -import '../style.css'; - - - -### An example of 'un-styled' Radio - - - - {() => { - const [value, setValue] = React.useState(''); - const handleChange = event => { - setValue(event.currentTarget.value); - }; - return ( - - ); - }} - /> - - - -### An example of 'nested' Radio - - - - {() => { - const [value, setValue] = React.useState(''); - const handleChange = event => { - setValue(event.currentTarget.value); - }; - return ( - - ); - }} - /> - - - -### Properties - -