feat: apply new typography and refactor flex or grid system props (#59)

.storybook/components/SystemPropsTable/SystemPropsTable.tsx

@@ -25,10 +25,10 @@ const getStoryTitleAndDesignTokenLabelByPropName = (
   if (Object.keys(spacingSystemProps).includes(propName) || ['gap', 'gapX', 'gapY'].includes(propName)) {
     designTokenName = 'spacing';
   }
-  if (['width', 'minWidth', 'maxWidth'].includes(propName)) {
+  if (['width'].includes(propName)) {
     designTokenName = 'width';
   }
-  if (['height', 'minHeight', 'maxHeight'].includes(propName)) {
+  if (['height'].includes(propName)) {
     designTokenName = 'height';
   }
 

.storybook/preview-head.html

@@ -1,6 +1,6 @@
 <link rel="preconnect" href="https://fonts.googleapis.com" />
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-<link href="https://fonts.googleapis.com/css2?family=Agdasima:wght@400;700&family=Montserrat:wght@100;400;500;700&display=swap" rel="stylesheet" />
+<link href="https://fonts.googleapis.com/css2?family=Agdasima:wght@400;700&family=Montserrat:wght@100;400;500;600;700&display=swap" rel="stylesheet" />
 <style>
     body .sb-story {
         font-family: var(--font-family-base) !important;

__tests__/helpers/systemPropsHelper/flexOrGridSystemClassName.test.ts

@@ -0,0 +1,23 @@
+import { flexOrGridSystemClassName } from '@/helpers/systemPropsHelper';
+import { FlexOrGridSystemProps } from '@/types';
+
+describe('Test method flexBoxClassName', () => {
+  test.each([
+    {
+      props: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: {
+          xs: 'xs',
+          md: 's',
+        },
+      },
+      expected: 'items-center@xs justify-center@xs gap-xs@xs gap-s@md',
+    },
+  ] as { props: FlexOrGridSystemProps; expected: string }[])(
+    'return flex or grid class name $expected',
+    ({ props, expected }) => {
+      expect(flexOrGridSystemClassName(props)).toEqual(expected);
+    }
+  );
+});

__tests__/helpers/systemPropsHelper/layoutSystemClassName.test.ts

@@ -0,0 +1,18 @@
+import { layoutSystemClassName } from '@/helpers/systemPropsHelper';
+import { LayoutSystemProps } from '@/types/SystemProps';
+
+describe('Test method ', () => {
+  test.each([
+    {
+      props: {
+        hiddenBelow: 'md',
+      },
+      expected: 'hidden-below@md',
+    },
+  ] as { props: LayoutSystemProps; expected: string }[])(
+    'return layout class name $expected',
+    ({ props, expected }) => {
+      expect(layoutSystemClassName(props)).toEqual(expected);
+    }
+  );
+});

bin/build-design-tokens/index.ts

@@ -14,16 +14,12 @@ const styleDictionary = StyleDictionary.extend({
   platforms: {
     'css/variables': {
       buildPath: './src/styles/',
-      transforms: ['attribute/cti', 'name/cti/kebab', 'name/cti/kebab-only-category-item'],
-      transformGroup: 'css',
+      transforms: ['attribute/cti', 'name/cti/kebab', 'name/cti/kebab-only-category-item', 'math', 'size/px'],
       files: [
         {
           format: 'css/variables',
           filter: (token): boolean => filterExcludesCategories(token, ['asset', 'breakpoint']),
           destination: '_token-custom-properties.scss',
-          options: {
-            outputReferences: true,
-          },
         },
       ],
     },
@@ -36,9 +32,6 @@ const styleDictionary = StyleDictionary.extend({
           filter: (token): boolean => token?.attributes?.category === 'color',
           destination: 'abstracts/variables/_variables.scss',
           mapName: 'variables',
-          options: {
-            outputReferences: true,
-          },
         } as File,
       ],
     },
@@ -50,9 +43,6 @@ const styleDictionary = StyleDictionary.extend({
           format: 'scss/map-deep-with-css-variables',
           filter: (token): boolean => filterExcludesCategories(token, ['asset']),
           destination: 'abstracts/variables/_token-variables.scss',
-          options: {
-            outputReferences: true,
-          },
         },
       ],
       options: {
@@ -61,14 +51,11 @@ const styleDictionary = StyleDictionary.extend({
     },
     'typescript/token-variables': {
       buildPath: './src/',
-      transforms: ['attribute/cti'],
+      transforms: ['attribute/cti', 'math', 'size/px'],
       files: [
         {
           format: 'typescript/object',
           destination: 'constants/tokenVariables.ts',
-          options: {
-            outputReferences: true,
-          },
         },
       ],
     },

bin/build-design-tokens/transforms/register.ts

@@ -1 +1,3 @@
 import './name/cti/kebab-only-category-item';
+import './value/math';
+import './value/size';

bin/build-design-tokens/transforms/value/math.ts

@@ -0,0 +1,12 @@
+import StyleDictionary from 'style-dictionary';
+
+StyleDictionary.registerTransform({
+  name: 'math',
+  type: 'value',
+  transitive: true,
+  matcher: token => typeof token.value === 'string' && /(\+|-|\*|\/)(\s|\d)/.test(token.value),
+  transformer: token => {
+    const cleanExpression = token.value.replace(/[a-z]+/gi, '');
+    return eval(cleanExpression);
+  },
+});

bin/build-design-tokens/transforms/value/size.ts

@@ -0,0 +1,9 @@
+import StyleDictionary from 'style-dictionary';
+
+StyleDictionary.registerTransform({
+  name: 'size/px',
+  type: 'value',
+  transitive: true,
+  matcher: token => token?.type !== 'scale' && ['spacing', 'font-size'].some(name => token.path.includes(name)),
+  transformer: token => `${parseInt(token.value)}px`,
+});

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eleven-labs/design-system",
   "description": "Design System for Eleven Labs",
-  "version": "0.23.0",
+  "version": "0.24.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/eleven-labs/design-system.git"

src/components/Atoms/Blockquote/Blockquote.scss

@@ -2,7 +2,6 @@
 
 .blockquote {
   font-family: Georgia, #{map-get-strict($token-variables, 'font-family', 'blockquote')};
-  font-size: #{map-get-strict($token-variables, 'font-size', 'l')};
 
   &::before, &::after {
     content: "“";

src/components/Atoms/Blockquote/Blockquote.tsx

@@ -1,15 +1,15 @@
 import classNames from 'classnames';
 import React from 'react';
 
-import { Box } from '@/components';
+import { Text } from '@/components';
 import type { ComponentPropsWithoutRef, MarginSystemProps } from '@/types';
 
 import './Blockquote.scss';
 
 export interface BlockquoteProps extends MarginSystemProps, Omit<ComponentPropsWithoutRef<'blockquote'>, 'align'> {}
 
 export const Blockquote: React.FC<BlockquoteProps> = ({ children, className, ...props }) => (
-  <Box as="blockquote" {...props} pl="m" italic className={classNames('blockquote', className)}>
+  <Text as="blockquote" {...props} pl="m" size="m" italic className={classNames('blockquote', className)}>
     {children}
-  </Box>
+  </Text>
 );

src/components/Atoms/Breadcrumb/Breadcrumb.tsx

@@ -10,7 +10,15 @@ export interface BreadcrumbProps extends MarginSystemProps {
 }
 
 export const Breadcrumb: React.FC<BreadcrumbProps> = ({ items, ...props }) => (
-  <Flex {...props} as="ol" itemScope itemType="https://schema.org/BreadcrumbList" gap="xxs-3" className="breadcrumb">
+  <Flex
+    {...props}
+    as="ol"
+    itemScope
+    itemType="https://schema.org/BreadcrumbList"
+    gap="xxs-3"
+    fontWeight="semi-bold"
+    className="breadcrumb"
+  >
     {items.map(({ label, ...itemLink }, index) => (
       <Fragment key={index}>
         <li itemProp="itemListElement" itemScope itemType="https://schema.org/ListItem">
@@ -21,7 +29,7 @@ export const Breadcrumb: React.FC<BreadcrumbProps> = ({ items, ...props }) => (
               </Text>
             </Link>
           ) : (
-            <Text as="span" itemProp="name">
+            <Text as="span" itemProp="name" fontWeight="regular">
               {label}
             </Text>
           )}

src/components/Atoms/Button/Button.scss

@@ -3,38 +3,15 @@
 .button {
   $this: &;
 
-  display: inline-flex;
-  flex-direction: column;
-  padding: map-get-strict($token-variables, 'spacing', 'xxs') map-get-strict($token-variables, 'spacing', 'm');
   background: var(--background-color-button, map-get-strict($token-variables, 'color', 'info'));
   color: var(--color-button, white);
-  font-weight: var(--font-weight-button, map-get-strict($token-variables, 'font-weight', 'medium'));
-  text-transform: uppercase;
+  font-family: map-get-strict($token-variables, 'font-family', 'heading');
   border-width: var(--border-width-button, 0);
   border-style: solid;
   border-color: var(--border-color-button, transparent);
-  border-radius: var(--border-radius-button, 4px);
+  border-radius: var(--border-radius-button, 100px);
   cursor: pointer;
 
-  &::after {
-    content: attr(data-text);
-    content: attr(data-text) / "";
-    height: 0;
-    visibility: hidden;
-    overflow: hidden;
-    user-select: none;
-    pointer-events: none;
-    font-weight: #{map-get-strict($token-variables, 'font-weight', 'bold')};
-
-    @media speech {
-      display: none;
-    }
-  }
-
-  &:hover {
-    --font-weight-button: #{map-get-strict($token-variables, 'font-weight', 'bold')};
-  }
-
   &[disabled] {
     cursor: not-allowed;
   }
@@ -58,4 +35,9 @@
       --border-color-button: #{map-get-strict($token-variables, 'color', 'dark-grey')};
     }
   }
+
+  &--accent {
+    --background-color-button: #{map-get-strict($token-variables, 'color', 'accent')};
+    --color-button: #{map-get-strict($token-variables, 'color', 'primary')};
+  }
 }

src/components/Atoms/Button/Button.stories.ts

@@ -30,3 +30,8 @@ export const ButtonWithVariantSecondary: Story = {};
 ButtonWithVariantSecondary.args = {
   variant: 'secondary',
 };
+
+export const ButtonWithVariantAccent: Story = {};
+ButtonWithVariantAccent.args = {
+  variant: 'accent',
+};

src/components/Atoms/Button/Button.tsx

@@ -1,16 +1,18 @@
 import classNames from 'classnames';
 import * as React from 'react';
 
-import type { BoxProps } from '@/components';
+import type { FlexProps } from '@/components';
+import { Flex } from '@/components';
+import { Icon } from '@/components';
 import { Text } from '@/components';
 import { polyRef } from '@/helpers/polyRef';
 
 import './Button.scss';
 
-export const buttonVariant = ['primary', 'secondary'] as const;
+export const buttonVariant = ['primary', 'secondary', 'accent'] as const;
 export type ButtonVariantType = (typeof buttonVariant)[number];
 
-export interface ButtonProps extends BoxProps {
+export interface ButtonProps extends FlexProps {
   className?: string;
   variant?: ButtonVariantType;
   isChoiceChip?: boolean;
@@ -19,11 +21,19 @@ export interface ButtonProps extends BoxProps {
 
 export const Button = polyRef<'button', ButtonProps>(
   ({ as = 'button', variant = 'primary', isChoiceChip = false, className, children, ...props }, ref) => (
-    <Text
+    <Flex
       {...props}
+      display="inline-flex"
+      flexDirection="row"
+      justifyContent="center"
+      alignItems="center"
       as={as}
       ref={ref}
+      px="m"
+      py="xs"
       size="s"
+      fontWeight="bold"
+      textTransform="uppercase"
       data-text={typeof children === 'string' ? children : ''}
       className={classNames(
         'button',
@@ -34,8 +44,9 @@ export const Button = polyRef<'button', ButtonProps>(
         className
       )}
     >
-      {children}
-    </Text>
+      <Text as="span">{children}</Text>
+      <Icon name="arrow" />
+    </Flex>
   )
 );
 

src/components/Atoms/Typography/Heading/Heading.tsx

@@ -10,7 +10,7 @@ export interface HeadingProps extends Omit<BoxProps, 'textSize'> {
   size?: HeadingSizeType;
 }
 
-export const Heading = polyRef<'h1', HeadingProps>(({ as = 'h1', size, children, className, ...props }, ref) => (
+export const Heading = polyRef<'p', HeadingProps>(({ as = 'p', size, children, className, ...props }, ref) => (
   <Box {...props} as={as} ref={ref} className={classNames({ [`heading-${size}`]: Boolean(size) }, className)}>
     {children}
   </Box>