added initial files for duration, easing and spacing variable stories #10
Conversation
|
|
||
| const Duration: Story = args => { | ||
| return ( | ||
| <div className={styles['duration']}> |
There was a problem hiding this comment.
This can be written as styles.duration. The [] syntax is only needed when there's a hyphen in the class name.
| if (space.includes('-')) { | ||
| space = space.replace('-', '.'); | ||
| } else { | ||
| space = space + '.0'; |
There was a problem hiding this comment.
Rather than add .0 only to remove it later to force the ordering, I would sort your array of key/value pairs by the numerical value of the key. This also ensures that the tokens will end up in order even if the CSS variables are not written in order. Something like:
{Object.entries(args.spacing as SpacingOptions)
.sort(([keyA], [keyB]) => Number(keyA) - Number(keyB))
.map(([name, unit]) => (...
| <tr key={`spacing-${name}`}> | ||
| <td>{name.replace('.0', '')}</td> | ||
| <td> | ||
| {Number(unit.replace('px', '')) / |
There was a problem hiding this comment.
You can shorten this a bit by using parseInt() (or parseFloat(), but I think it's a safe assumption that the spacing tokens in pixels will be integers). That will both convert the string to a number and chop off the px without having to separately do a string replace.
| <td>{name.replace('.0', '')}</td> | ||
| <td> | ||
| {Number(unit.replace('px', '')) / | ||
| Number(basefontsize.replace('px', ''))} |
There was a problem hiding this comment.
Since you're not displaying the baseFontSize anywhere in the story, you could remove the unit and make it a number up where you declare the variable. A touch more efficient, since you're not reconverting it for every iteration of the loop.
| BaseFontSize = value; | ||
| } | ||
| return BaseFontSize; | ||
| }, {} as string); |
There was a problem hiding this comment.
Couple things here. Let's make this baseFontSize instead of basefontsize -- we typically use camelCase for JS variables. I also don't think .reduce() is the right method here. You're trying to find a specific variable, so I'd use .find(). That also allows you to set a fallback value in case there is no base font size variable.
Something like:
const baseFontVar = allVars.find(
([key]) => key.indexOf('--base-font-size') === 0,
);
const baseFontSize = baseFontVar ? parseInt(baseFontVar[1]) : 16;
(See comment further down for why I'm using parseInt() here).
No description provided.