wingsuit-designsystem / wingsuit

Twig for Storybook
GNU General Public License v2.0
90 stars 16 forks source link

Present font weights on the Storybook Typography page #230

Open blackbart420 opened 1 year ago

blackbart420 commented 1 year ago

Hello, on the storybook page "Typography", displaying the choosed typefaces and font sizes, is there a way to show also the font weights?

I edited the file "typeset.stories.mdx" as following but it has no effect:

import { Meta, Subtitle } from '@storybook/addon-docs';
import { Typeset } from '@wingsuit-designsystem/storybook';
const tailwindFile = require('../../config/silo/tailwind.json');
const fontFamilies = tailwindFile.tailwind.theme.fontFamily;
const intFontSizes = tailwindFile.tailwind.theme.fontSize;
const intFontWeights = tailwindFile.tailwind.theme.fontWeight;
const fontSizes = {}
Object.keys(intFontSizes).forEach((key)=>{
  fontSizes[key] = [intFontSizes[key][0]]
})
const fontWeights = {}
Object.keys(intFontWeights).forEach((key)=>{
  fontWeights[key] = [intFontWeights[key]]
})

<Meta title="Tokens/Typography"
parameters={{ viewMode: 'docs', previewTabs: { canvas: { hidden: true }}}}
/>

# Typography
<Subtitle>Choosed typefaces and font sizes</Subtitle>

<div>
{
  Object.keys(fontFamilies).map((key,i)=>{
    return (
      <div key={key}>
        <Subtitle><b>Font Family:</b> {fontFamilies[key][0]} ({key})</Subtitle>
        <Typeset fontFamily={fontFamilies[key][0]} classNamePrefix="text-" fontSizes={fontSizes} fontWeights={fontWeights} />
      </div>
    )
  })
}
</div>

Thank you