Skip to content

Commit

Permalink
Feat: Adds tokens to Radio (#89)
Browse files Browse the repository at this point in the history 
* Feat: Adds tokens to `Radio` (#87)

* Creates Input Radio

* Styles Radio

* Adds Radio to Storybook

* Adds tokens tables

* Fixes Storybook table width

* Fixes Checkbox hovers

* Updates Changelog

* Fix typo

Co-authored-by: Fanny Chien <fannychienn@gmail.com>

* Updates Checkbox Story to use TokenTable

Co-authored-by: Fanny Chien <fannychienn@gmail.com>

* Updates Changelog

* Updates RadioProps to add FSUI props

Co-authored-by: Eduardo Formiga <eduardo.formiga@vtex.com.br>

* Tweaks `Radio` token list order

Co-authored-by: Fanny Chien <fannychienn@gmail.com>
Co-authored-by: Eduardo Formiga <eduardo.formiga@vtex.com.br>
  • Loading branch information
@hellofanny @eduardoformiga
3 people authored Jun 7, 2022
1 parent 3196748 commit f12b84e
Show file tree
Hide file tree
Showing 8 changed files with 528 additions and 243 deletions.
5 changes: 5 additions & 0 deletions .storybook/storybook.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,11 @@
width: 50%;
}

.sbdocs-table td code {
line-height: 1.3;
white-space: break-spaces;
}

.sbdocs-table td > div {
float: left;
width: 1.5rem;
Expand Down
2 changes: 2 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

### Added

- Creates `Radio` component ([#89](https://github.com/vtex-sites/gatsby.store/pull/89))
- Applies new local tokens to `Price` ([#83](https://github.com/vtex-sites/gatsby.store/pull/83))
- Applies new local tokens to `Alert` ([#77](https://github.com/vtex-sites/gatsby.store/pull/77))
- Refactors `Button` component and adds Storybook doc ([#52](https://github.com/vtex-sites/gatsby.store/pull/52))
Expand All @@ -22,6 +23,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

### Changed

- Updates `Checkbox` tokens ([#89](https://github.com/vtex-sites/gatsby.store/pull/89))
- Uses `Hero` component from FSUI ([#92](https://github.com/vtex-sites/gatsby.store/pull/92))
- Uses CSS Modules on `Checkbox` component ([#81](https://github.com/vtex-sites/gatsby.store/pull/81))
- Uses CSS Modules on `QuantitySelector` component ([#75](https://github.com/vtex-sites/gatsby.store/pull/75))
Expand Down
337 changes: 105 additions & 232 deletions src/components/ui/Checkbox/Checkbox.stories.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,12 @@ import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'

import Checkbox from '.'

import {
TokenTable,
TokenRow,
TokenDivider,
} from 'src/../.storybook/components'

<Meta
title="Atoms/Checkbox"
component={Checkbox}
Expand Down Expand Up @@ -106,111 +112,41 @@ The `Checkbox` component uses [FastStore UI Checkbox](https://www.faststore.dev/

<ArgsTable story="default" />

<table
style={{
width: '100%',
}}
>
<thead>
<tr>
<th>Local token</th>
<th>Default value/Global token linked</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<code>--fs-checkbox-width</code>
</td>
<td>
<code>1.25rem</code>
</td>
</tr>
<tr>
<td>
<code>--fs-checkbox-height</code>
</td>
<td>
<code>var(--fs-checkbox-width)</code>
</td>
</tr>
<tr>
<td>
<code>--fs-checkbox-border-width</code>
</td>
<td>
<code>var(--fs-border-width)</code>
</td>
</tr>
<tr>
<td>
<code>--fs-checkbox-border-radius</code>
</td>
<td>
<code>var(--fs-border-radius)</code>
</td>
</tr>
<tr>
<td>
<code>--fs-checkbox-border-color</code>
</td>
<td>
<div style={{ backgroundColor: 'var(--fs-border-color)' }} />
<code>var(--fs-border-color)</code>
</td>
</tr>
<tr>
<td>
<code>--fs-checkbox-border-color-hover</code>
</td>
<td>
<div style={{ backgroundColor: 'var(--fs-color-text)' }} />
<code>var(--fs-color-text)</code>
</td>
</tr>
<tr>
<td>
<code>--fs-checkbox-transition</code>
</td>
<td>
<pre
style={{
fontSize: '0.8125rem',
backgroundColor: '#F8F8F8',
color: '#333333',
padding: '3px 5px',
border: '1px solid #EEEEEE',
borderRadius: '3px',
}}
>
border var(--fs-transition-timing) var(--fs-transition-function),
background-color var(--fs-transition-timing)
var(--fs-transition-function), box-shadow var(--fs-transition-timing)
var(--fs-transition-function)
</pre>
</td>
</tr>
<tr>
<td>
<code>--fs-checkbox-bkg-color-hover</code>
</td>
<td>
<div style={{ backgroundColor: 'var(--fs-color-primary-bkg-light)' }} />
<code>var(--fs-color-primary-bkg-light)</code>
</td>
</tr>
<tr>
<td>
<code>--fs-checkbox-shadow-hover</code>
</td>
<td>
<code>
0 0 0 var(--fs-checkbox-border-width) var(--fs-border-color-active)
</code>
</td>
</tr>
</tbody>
</table>
<TokenTable>
<TokenRow token="--fs-checkbox-width" value="1.25rem" />
<TokenRow token="--fs-checkbox-height" value="var(--fs-checkbox-width)" />
<TokenDivider />
<TokenRow token="--fs-checkbox-border-width" value="var(--fs-border-width)" />
<TokenRow
token="--fs-checkbox-border-radius"
value="var(--fs-border-radius)"
/>
<TokenRow
token="--fs-checkbox-border-color"
value="var(--fs-border-color)"
isColor
/>
<TokenRow
token="--fs-checkbox-border-color-hover"
value="var(--fs-border-color-active)"
isColor
/>
<TokenDivider />
<TokenRow
token="--fs-checkbox-transition"
value="border var(--fs-transition-timing) var(--fs-transition-function), background-color var(--fs-transition-timing) var(--fs-transition-function), box-shadow var(--fs-transition-timing) var(--fs-transition-function)"
/>
<TokenDivider />
<TokenRow
token="--fs-checkbox-bkg-color-hover"
value="var(--fs-color-primary-bkg-light)"
isColor
/>
<TokenRow
token="--fs-checkbox-shadow-hover"
value="0 0 0 var(--fs-checkbox-border-width) var(--fs-border-color-active)"
/>
</TokenTable>

---

Expand All @@ -232,43 +168,28 @@ The `Checkbox` component uses [FastStore UI Checkbox](https://www.faststore.dev/
</Story>
</Canvas>

<table>
<thead>
<tr>
<th>Local token</th>
<th>Default value/Global token linked</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<code>--fs-checkbox-checked-bkg-color</code>
</td>
<td>
<div style={{ backgroundColor: 'var(--fs-color-primary-bkg)' }} />
<code>var(--fs-color-primary-bkg)</code>
</td>
</tr>
<tr>
<td>
<code>--fs-checkbox-checked-bkg-color-hover</code>
</td>
<td>
<div style={{ backgroundColor: 'var(--fs-color-primary-bkg-hover)' }} />
<code>var(--fs-color-primary-bkg-hover)</code>
</td>
</tr>
<tr>
<td>
<code>--fs-checkbox-checked-border-color</code>
</td>
<td>
<div style={{ backgroundColor: 'var(--fs-border-color-active)' }} />
<code>var(--fs-border-color-active)</code>
</td>
</tr>
</tbody>
</table>
<TokenTable>
<TokenRow
token="--fs-checkbox-checked-bkg-color"
value="var(--fs-color-primary-bkg)"
isColor
/>
<TokenRow
token="--fs-checkbox-checked-bkg-color-hover"
value="var(--fs-color-primary-bkg-hover)"
isColor
/>
<TokenRow
token="--fs-checkbox-checked-border-color-hover"
value="var((--fs-border-color-hover)"
isColor
/>
<TokenRow
token="--fs-checkbox-checked-shadow-hover"
value="0 0 0 var(--fs-checkbox-border-width)
var(--fs-checkbox-checked-border-color-hover)"
/>
</TokenTable>

### Disabled

Expand All @@ -286,51 +207,27 @@ The `Checkbox` component uses [FastStore UI Checkbox](https://www.faststore.dev/
</Story>
</Canvas>

<table>
<thead>
<tr>
<th>Local token</th>
<th>Default value/Global token linked</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<code>--fs-checkbox-disabled-bkg-color</code>
</td>
<td>
<div style={{ backgroundColor: 'var(--fs-color-disabled-bkg)' }} />
<code>var(--fs-color-disabled-bkg)</code>
</td>
</tr>
<tr>
<td>
<code>--fs-checkbox-disabled-border-width</code>
</td>
<td>
<code>var(--fs-checkbox-border-width)</code>
</td>
</tr>
<tr>
<td>
<code>--fs-checkbox-disabled-border-color</code>
</td>
<td>
<div style={{ backgroundColor: 'var(--fs-border-color-disabled)' }} />
<code>var(--fs-border-color-disabled)</code>
</td>
</tr>
<tr>
<td>
<code>--fs-checkbox-disabled-text-color</code>
</td>
<td>
<div style={{ backgroundColor: 'var(--fs-color-disabled-text)' }} />
<code>var(--fs-color-disabled-text)</code>
</td>
</tr>
</tbody>
</table>
<TokenTable>
<TokenRow
token="--fs-checkbox-disabled-bkg-color"
value="var(--fs-color-disabled-bkg)"
isColor
/>
<TokenRow
token="--fs-checkbox-disabled-border-width"
value="var(--fs-checkbox-border-width)"
/>
<TokenRow
token="--fs-checkbox-disabled-border-color"
value="var(--fs-border-color-disabled)"
isColor
/>
<TokenRow
token="--fs-checkbox-disabled-text-color"
value="var(--fs-color-disabled-text)"
isColor
/>
</TokenTable>

### Partial

Expand All @@ -348,48 +245,24 @@ The `Checkbox` component uses [FastStore UI Checkbox](https://www.faststore.dev/
</Story>
</Canvas>

<table>
<thead>
<tr>
<th>Local token</th>
<th>Default value/Global token linked</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<code>--fs-checkbox-partial-bkg-color</code>
</td>
<td>
<div style={{ backgroundColor: 'var(--fs-color-neutral-0)' }} />
<code>var(--fs-color-neutral-0)</code>
</td>
</tr>
<tr>
<td>
<code>--fs-checkbox-partial-border-width</code>
</td>
<td>
<code>var(--fs-checkbox-border-width)</code>
</td>
</tr>
<tr>
<td>
<code>--fs-checkbox-partial-border-color</code>
</td>
<td>
<div style={{ backgroundColor: 'var(--fs-color-primary-bkg)' }} />
<code>var(--fs-color-primary-bkg)</code>
</td>
</tr>
<tr>
<td>
<code>--fs-checkbox-partial-hover</code>
</td>
<td>
<div style={{ backgroundColor: 'var(--fs-color-primary-bkg-light)' }} />
<code>var(--fs-color-primary-bkg-light)</code>
</td>
</tr>
</tbody>
</table>
<TokenTable>
<TokenRow
token="--fs-checkbox-partial-bkg-color"
value="var(--fs-color-body-bkg)"
isColor
/>
<TokenRow
token="--fs-checkbox-partial-border-width"
value="var(--fs-checkbox-border-width)"
/>
<TokenRow
token="--fs-checkbox-partial-border-color"
value="var(--fs-color-primary-bkg)"
isColor
/>
<TokenRow
token="--fs-checkbox-partial-bkg-color-hover"
value="var(--fs-color-primary-bkg-light)"
isColor
/>
</TokenTable>
Loading

1 comment on commit f12b84e

@vercel
Copy link

@vercel vercel bot commented on f12b84e Jun 7, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

gatsby-store-storybook – ./

gatsby-store-storybook-faststore.vercel.app
gatsby-store-pi.vercel.app
gatsby-store-storybook-git-main-faststore.vercel.app

Please sign in to comment.