Skip to content

Commit

Permalink
add motion base tokens to storybook
Browse files Browse the repository at this point in the history
  • Loading branch information
lukasoppermann committed Dec 23, 2024
1 parent 47194a7 commit 818026c
Showing 1 changed file with 96 additions and 0 deletions.
96 changes: 96 additions & 0 deletions docs/storybook/stories/Motion/Base.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
import React from 'react'
// eslint-disable-next-line import/extensions
import baseMotionTokens from '../../../../dist/docs/base/motion/motion.json'
import {DataTable, Table} from '@primer/react/drafts'
import {InlineCode} from '../StorybookComponents/InlineCode/InlineCode'
import {getTokensByName} from '../utilities/getTokensByName'

export default {
title: 'Motion/Base',
parameters: {
controls: {hideNoControlsWarning: true},
tags: ['snapshotLight'],
},
}

export const Base = () => {
const data = getTokensByName(baseMotionTokens, 'base').map(token => {
return {
id: token.name,
...token,
}
})

return (
<>
<Table.Container>
<h2 id="weight">Base duration</h2>
<DataTable
aria-labelledby="weight"
data={data
.filter(item => item.type === 'duration')
.sort((a, b) => a.name.replace('base-duration-', '') - b.name.replace('base-duration-', ''))}
columns={[
{
header: 'Token',
field: 'name',
rowHeader: true,
renderCell: row => {
return <InlineCode value={row.name} copyClipboard />
},
},
{
header: 'Output value',
field: 'value',
rowHeader: true,
renderCell: row => {
return <p>{row.value}</p>
},
},
{
header: 'Source value',
field: 'original',
rowHeader: true,
renderCell: row => {
return <p>{row.original.$value}</p>
},
},
]}
/>
</Table.Container>
<Table.Container>
<h2 id="easing">Base easing</h2>
<DataTable
aria-labelledby="easing"
data={data.filter(item => item.type === 'cubicBezier')}
columns={[
{
header: 'Token',
field: 'name',
rowHeader: true,
renderCell: row => {
return <InlineCode value={row.name} copyClipboard />
},
},
{
header: 'Output value',
field: 'value',
rowHeader: true,
renderCell: row => {
return <p>{JSON.stringify(row.value)}</p>
},
},
{
header: 'Source value',
field: 'original',
rowHeader: true,
renderCell: row => {
return <p>{JSON.stringify(row.original.$value)}</p>
},
},
]}
/>
</Table.Container>
</>
)
}

0 comments on commit 818026c

Please sign in to comment.