Skip to content

Commit

Permalink
chore: More tokens in docs (#534)
Browse files Browse the repository at this point in the history 
* chore: Add navigation to the sections of the design token page

* Add UI for all design token values

* chore: expose more tokens on the design tokens docs page

* Correct font size id

Co-authored-by: Bryan Joseph <bryanjos@users.noreply.github.com>
  • Loading branch information
@bryanjos
Bryan Joseph and bryanjos authored Mar 19, 2020
1 parent fe6f28c commit 6e2f5ee
Show file tree
Hide file tree
Showing 2 changed files with 116 additions and 162 deletions.
20 changes: 19 additions & 1 deletion docs-src/src/layouts/Navigation.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,9 @@ export default function Navigation() {
<Menu.Item text>
<h5>Design Tokens</h5>
</Menu.Item>
<Menu.Item>
<a href="/design-tokens/#blur">Blur</a>
</Menu.Item>
<Menu.Item>
<a href="/design-tokens/#border-radius">Border Radius</a>
</Menu.Item>
Expand All @@ -60,7 +63,22 @@ export default function Navigation() {
<a href="/design-tokens/#font-sizes">Font Sizes</a>
</Menu.Item>
<Menu.Item>
<a href="/design-tokens/#font-weights">Font Weights</a>
<a href="/design-tokens/#font-weights">Font Weights</a>
</Menu.Item>
<Menu.Item>
<a href="/design-tokens/#grid">Grid</a>
</Menu.Item>
<Menu.Item>
<a href="/design-tokens/#icon-sizes">Icon Sizes</a>
</Menu.Item>
<Menu.Item>
<a href="/design-tokens/#line-heights">Line Heights</a>
</Menu.Item>
<Menu.Item>
<a href="/design-tokens/#opacity">Opacity</a>
</Menu.Item>
<Menu.Item>
<a href="/design-tokens/#screen-widths">Screen Widths</a>
</Menu.Item>
<Menu.Item>
<a href="/design-tokens/#shadows">Shadows</a>
Expand Down
258 changes: 97 additions & 161 deletions docs-src/src/pages/design-tokens.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,23 +72,6 @@ function ColorRows() {
return rows
}

function Colors() {
return (
<React.Fragment>
<h2 id="colors">Colors</h2>
<Table>
<Table.Head>
<Table.Row>
<Table.Header width="50%">Token</Table.Header>
<Table.Header width="50%">Value</Table.Header>
</Table.Row>
</Table.Head>
<Table.Body>{ColorRows()}</Table.Body>
</Table>
</React.Fragment>
)
}

function FontSizeRows() {
const rows = []
const fontSizes = DesignTokens.font.size
Expand Down Expand Up @@ -120,23 +103,6 @@ function FontSizeRows() {
return rows
}

function FontSizes() {
return (
<React.Fragment>
<h2 id="font-sizes">Font Sizes</h2>
<Table>
<Table.Head>
<Table.Row>
<Table.Header width="50%">Token</Table.Header>
<Table.Header width="50%">Value</Table.Header>
</Table.Row>
</Table.Head>
<Table.Body>{FontSizeRows()}</Table.Body>
</Table>
</React.Fragment>
)
}

function FontRows() {
const rows = []
const fontFamilies = DesignTokens.font.family
Expand Down Expand Up @@ -168,23 +134,6 @@ function FontRows() {
return rows
}

function Fonts() {
return (
<React.Fragment>
<h2 id="fonts">Fonts</h2>
<Table>
<Table.Head>
<Table.Row>
<Table.Header width="50%">Token</Table.Header>
<Table.Header width="50%">Value</Table.Header>
</Table.Row>
</Table.Head>
<Table.Body>{FontRows()}</Table.Body>
</Table>
</React.Fragment>
)
}

function BorderRadiusRows() {
const rows = []
const radii = DesignTokens.border.radius
Expand Down Expand Up @@ -219,69 +168,6 @@ function BorderRadiusRows() {
return rows
}

function BorderRadius() {
return (
<React.Fragment>
<h2 id="border-radius">Border Radius</h2>
<Table>
<Table.Head>
<Table.Row>
<Table.Header width="50%">Token</Table.Header>
<Table.Header width="50%">Value</Table.Header>
</Table.Row>
</Table.Head>
<Table.Body>{BorderRadiusRows()}</Table.Body>
</Table>
</React.Fragment>
)
}

// TODO is exampleStyle necessary here? How can I eliminate this useless thang
function ZIndexRows() {
const rows = []
const zIndices = DesignTokens['z-index']

for (const index in zIndices) {
const exampleStyle = {
zIndex: zIndices[index].value,
}

rows.push(
<Table.Row>
<Table.Data>
<Table.HeaderInline>Token:</Table.HeaderInline>
<pre className="DesignTokenVariable">${zIndices[index].name}
<p className="DesignTokenComment">{zIndices[index].comment}</p>
</pre>
</Table.Data>
<Table.Data>
<Table.HeaderInline>Value:</Table.HeaderInline>
<pre className="DesignTokenVariable">{zIndices[index].value}</pre>
</Table.Data>
</Table.Row>
)
}

return rows
}

function ZIndex() {
return (
<React.Fragment>
<h2 id="z-index">Z-Index</h2>
<Table>
<Table.Head>
<Table.Row>
<Table.Header width="50%">Token</Table.Header>
<Table.Header width="50%">Value</Table.Header>
</Table.Row>
</Table.Head>
<Table.Body>{ZIndexRows()}</Table.Body>
</Table>
</React.Fragment>
)
}

// TODO fix name not being displayed at same spacing as value!
function SpacingRows() {
const rows = []
Expand Down Expand Up @@ -315,23 +201,6 @@ function SpacingRows() {
return rows
}

function Spacing() {
return (
<React.Fragment>
<h2 id="spacing">Spacing</h2>
<Table>
<Table.Head>
<Table.Row>
<Table.Header width="50%">Token</Table.Header>
<Table.Header width="50%">Value</Table.Header>
</Table.Row>
</Table.Head>
<Table.Body>{SpacingRows()}</Table.Body>
</Table>
</React.Fragment>
)
}

function ShadowRows() {
const rows = []
const shadows = DesignTokens.box.shadow
Expand Down Expand Up @@ -366,23 +235,6 @@ function ShadowRows() {
return rows
}

function Shadows() {
return (
<React.Fragment>
<h2 id="shadows">Shadows</h2>
<Table>
<Table.Head>
<Table.Row>
<Table.Header width="50%">Token</Table.Header>
<Table.Header width="50%">Value</Table.Header>
</Table.Row>
</Table.Head>
<Table.Body>{ShadowRows()}</Table.Body>
</Table>
</React.Fragment>
)
}

function FontWeightRows() {
const rows = []
const fontWeights = DesignTokens.font.weight
Expand Down Expand Up @@ -416,20 +268,56 @@ function FontWeightRows() {
return rows
}

function FontWeight() {
function getTokenValue(token) {
if(!token || !token.value){
return null
}

if(Object.prototype.toString.call(token.value) === '[object Object]') {
return token.value.value
} else if (typeof token.value === 'string' ||token.value instanceof String)
return token.value
else {
return null
}
}

function NoExampleRows(tokens) {
const rows = []

const flattenedTokens = flattenDesignTokens(tokens)

for (const index in flattenedTokens) {
rows.push(
<Table.Row>
<Table.Data>
<Table.HeaderInline>Token:</Table.HeaderInline>
<pre className="DesignTokenVariable">${flattenedTokens[index].name}
<p className="DesignTokenComment">{flattenedTokens[index].comment}</p>
</pre>
</Table.Data>
<Table.Data>
<Table.HeaderInline>Value:</Table.HeaderInline>
<pre className="DesignTokenVariable">{getTokenValue(flattenedTokens[index])}</pre>
</Table.Data>
</Table.Row>
)
}

return rows
}

function DesignTokenTable({children}) {
return (
<React.Fragment>
<h2 id="font-weights">Font Weights</h2>
<Table>
<Table.Head>
<Table.Row>
<Table.Header width="50%">Token</Table.Header>
<Table.Header width="50%">Value</Table.Header>
</Table.Row>
</Table.Head>
<Table.Body>{FontWeightRows()}</Table.Body>
<Table.Body>{children}</Table.Body>
</Table>
</React.Fragment>
)
}

Expand All @@ -451,14 +339,62 @@ function DesignTokensPage({location}) {
<p>For more information on design tokens, check out the post <a href="https://css-tricks.com/what-are-design-tokens/">here</a></p>
</Col>
<Col>
<BorderRadius />
<Colors />
<Fonts />
<FontSizes />
<FontWeight />
<Shadows />
<Spacing />
<ZIndex />
<h2 id="blur">Blur</h2>
<DesignTokenTable>
{NoExampleRows(DesignTokens.blur)}
</DesignTokenTable>
<h2 id="border-radius">Border Radius</h2>
<DesignTokenTable>
{BorderRadiusRows()}
</DesignTokenTable>
<h2 id="colors">Colors</h2>
<DesignTokenTable>
{ColorRows()}
</DesignTokenTable>
<h2 id="fonts">Fonts</h2>
<DesignTokenTable>
{FontRows()}
</DesignTokenTable>
<h2 id="font-sizes">Fonts Sizes</h2>
<DesignTokenTable>
{FontSizeRows()}
</DesignTokenTable>
<h2 id="font-weights">Font Weights</h2>
<DesignTokenTable>
{FontWeightRows()}
</DesignTokenTable>
<h2 id="grid">Grid</h2>
<DesignTokenTable>
{NoExampleRows(DesignTokens.grid)}
</DesignTokenTable>
<h2 id="icon-sizes">Icon Sizes</h2>
<DesignTokenTable>
{NoExampleRows(DesignTokens.icon.size)}
</DesignTokenTable>
<h2 id="line-heights">Line Heights</h2>
<DesignTokenTable>
{NoExampleRows(DesignTokens["line-height"])}
</DesignTokenTable>
<h2 id="opacity">Opacity</h2>
<DesignTokenTable>
{NoExampleRows(DesignTokens.opacity)}
</DesignTokenTable>
<h2 id="screen-widths">Screen Widths</h2>
<DesignTokenTable>
{NoExampleRows(DesignTokens.screen.width)}
</DesignTokenTable>
<h2 id="shadows">Shadows</h2>
<DesignTokenTable>
{ShadowRows()}
</DesignTokenTable>
<h2 id="spacing">Spacing</h2>
<DesignTokenTable>
{SpacingRows()}
</DesignTokenTable>
<h2 id="z-index">Z-Index</h2>
<DesignTokenTable>
{NoExampleRows(DesignTokens['z-index'])}
</DesignTokenTable>
</Col>
</Row>
</Layout>
Expand Down

0 comments on commit 6e2f5ee

Please sign in to comment.