feat: button v2 components, update typography

project44 · Aug 8, 2024 · 8c03341 · 8c03341
1 parent 3b2776a
commit 8c03341
Show file tree

Hide file tree

Showing 8 changed files with 124 additions and 174 deletions.
diff --git a/.changeset/fluffy-pumpkins-exist.md b/.changeset/fluffy-pumpkins-exist.md
@@ -0,0 +1,5 @@
+---
+'@project44-manifest/react': major
+---
+
+button-v2 components, typography standard colors
diff --git a/packages/react/src/components/FormControl/FormControl.tsx b/packages/react/src/components/FormControl/FormControl.tsx
@@ -73,8 +73,9 @@ export const FormControl = createComponent<FormControlOptions>((props, forwarded
         <Typography
           as="label"
           className="manifest-form-control__label"
-          variant="subtextBold"
           {...labelProps}
+          color="primary"
+          variant="subtextBold"
         >
           {label}
           {!isRequired && (
@@ -90,8 +91,9 @@ export const FormControl = createComponent<FormControlOptions>((props, forwarded
       {helperText && (
         <Typography
           className="manifest-form-control__helper-text"
-          variant="caption"
           {...helperTextProps}
+          color="primary"
+          variant="subtextBold"
         >
           {helperText}
         </Typography>

diff --git a/packages/react/src/components/Typography/Typography.styles.ts b/packages/react/src/components/Typography/Typography.styles.ts
@@ -21,9 +21,15 @@ export const useStyles = css({
       caption: { typography: '$caption' },
       captionBold: { typography: '$caption-bold' },
     },
+    color: {
+      primary: { color: '$text-primary' },
+      secondary: { color: '$text-secondary' },
+      tertiary: { color: '$text-tertiary' },
+    },
   },
 
   defaultVariants: {
     variant: 'body',
+    color: 'primary',
   },
 });
diff --git a/packages/react/src/components/Typography/Typography.tsx b/packages/react/src/components/Typography/Typography.tsx
@@ -11,7 +11,7 @@ export interface TypographyOptions<T extends As = TypographyElement>
   /**
    * The display variant of the text.
    *
-   * @default 'primary'
+   * @default 'body'
    */
   variant?:
     | 'body'
@@ -24,14 +24,28 @@ export interface TypographyOptions<T extends As = TypographyElement>
     | 'subtextBold'
     | 'subtitle'
     | 'title';
+
+  /**
+   * The display color of the text.
+   *
+   * @default 'primary'
+   */
+  color?: 'primary' | 'secondary' | 'tertiary';
 }
 
 export type TypographyProps<T extends As = TypographyElement> = Props<TypographyOptions<T>>;
 
 export const Typography = createComponent<TypographyOptions>((props, forwardedRef) => {
-  const { as: Comp = 'span', className: classNameProp, css, variant = 'body', ...other } = props;
-
-  const { className } = useStyles({ css, variant });
+  const {
+    as: Comp = 'span',
+    className: classNameProp,
+    css,
+    variant = 'body',
+    color = 'primary',
+    ...other
+  } = props;
+
+  const { className } = useStyles({ css, color, variant });
 
   const classes = cx(className, classNameProp, {
     'manifest-typography': true,

diff --git a/packages/react/src/components/Typography/story/Typography.stories.tsx b/packages/react/src/components/Typography/story/Typography.stories.tsx
@@ -0,0 +1,14 @@
+import { Typography } from '../../..';
+
+export default {
+  title: 'Components/Typography',
+  component: Typography,
+};
+
+export function Default() {
+  return <Typography>Lorem ipsum</Typography>;
+}
+
+export function Tertiary() {
+  return <Typography color="tertiary">Lorem ipsum</Typography>;
+}
diff --git a/packages/react/src/components/button/button.styles.ts b/packages/react/src/components/button/button.styles.ts
@@ -23,6 +23,22 @@ export const StyledButton = styled('button', {
   userSelect: 'none',
   whiteSpace: 'nowrap',
 
+  '&:focus-visible': {
+    '&:after': {
+      backgroundColor: 'transparent',
+      border: '2px solid $colors$palette-indigo-200',
+      // TODO: replace with design token once its defined
+      borderRadius: '4px',
+      bottom: '-4px',
+      content: '',
+      display: 'block',
+      left: '-4px',
+      position: 'absolute',
+      right: '-4px',
+      top: '-4px',
+    },
+  },
+
   variants: {
     hasEndIcon: {
       true: {
@@ -42,49 +58,60 @@ export const StyledButton = styled('button', {
         boxShadow: 'none',
       },
     },
-    isFocusVisible: {
-      true: {
-        '&:after': {
-          backgroundColor: 'transparent',
-          border: '2px solid $colors$palette-indigo-200',
-          // TODO: replace with design token once its defined.s
-          borderRadius: '4px',
-          bottom: '-4px',
-          content: '',
-          display: 'block',
-          left: '-4px',
-          position: 'absolute',
-          right: '-4px',
-          top: '-4px',
-        },
-      },
-      false: {},
-    },
-    isHovered: {
-      true: {},
-    },
-    isPressed: {
-      true: {},
-    },
     variant: {
       danger: {
         backgroundColor: '$palette-red-500',
         color: '$palette-white',
+        '&:hover': {
+          background:
+            'linear-gradient(0deg, rgba(9, 21, 33, 0.15), rgba(9, 21, 33, 0.15)), $colors$palette-red-500',
+        },
+        '&:active': {
+          background:
+            'linear-gradient(0deg, rgba(9, 21, 33, 0.3), rgba(9, 21, 33, 0.3)), $colors$palette-red-500',
+          boxShadow: 'inset 0px 1px 1px rgba(5, 10, 26, 0.25)',
+        },
       },
       brand: {
         background: '$brand-gradient',
         color: '$palette-white',
+        '&:hover': {
+          background: '$brand-hover',
+        },
+        '&:active': {
+          background: '$brand-active',
+        },
       },
       primary: {
         backgroundColor: '$primary-default',
         color: '$palette-white',
+        '&:hover': {
+          backgroundColor: '$primary-hover',
+        },
+        '&:active': {
+          backgroundColor: '$primary-active',
+          boxShadow: 'inset 0px 1px 1px rgba(5, 10, 26, 0.25)',
+        },
       },
       secondary: {
         backgroundColor: '$palette-white',
+        '&:hover': {
+          backgroundColor: '$palette-grey-100',
+        },
+        '&:active': {
+          backgroundColor: '$palette-grey-300',
+          boxShadow: 'inset 0px 1px 1px rgba(5, 10, 26, 0.25)',
+        },
       },
       tertiary: {
         backgroundColor: 'transparent',
         boxShadow: 'none',
+        '&:hover': {
+          backgroundColor: '$palette-grey-100',
+        },
+        '&:active': {
+          backgroundColor: '$palette-grey-300',
+        },
       },
     },
     size: {
@@ -117,83 +144,7 @@ export const StyledButton = styled('button', {
         borderColor: '$border-disabled',
       },
     },
-    {
-      isHovered: true,
-      variant: 'primary',
-      css: {
-        backgroundColor: '$primary-hover',
-      },
-    },
-    {
-      isHovered: true,
-      variant: 'secondary',
-      css: {
-        backgroundColor: '$palette-grey-100',
-      },
-    },
-    {
-      isHovered: true,
-      variant: 'tertiary',
-      css: {
-        backgroundColor: '$palette-grey-100',
-      },
-    },
-    {
-      isHovered: true,
-      variant: 'brand',
-      css: {
-        background: '$brand-hover',
-      },
-    },
-    {
-      isHovered: true,
-      variant: 'danger',
-      css: {
-        background:
-          'linear-gradient(0deg, rgba(9, 21, 33, 0.15), rgba(9, 21, 33, 0.15)), $colors$palette-red-500',
-      },
-    },
-    {
-      isPressed: true,
-      variant: 'primary',
-      css: {
-        backgroundColor: '$primary-active',
-        boxShadow: 'inset 0px 1px 1px rgba(5, 10, 26, 0.25)',
-      },
-    },
-    {
-      isPressed: true,
-      variant: 'secondary',
-      css: {
-        backgroundColor: '$palette-grey-300',
-        boxShadow: 'inset 0px 1px 1px rgba(5, 10, 26, 0.25)',
-      },
-    },
-    {
-      isPressed: true,
-      variant: 'tertiary',
-      css: {
-        backgroundColor: '$palette-grey-300',
-      },
-    },
-    {
-      isPressed: true,
-      variant: 'brand',
-      css: {
-        background: '$brand-active',
-      },
-    },
-    {
-      isPressed: true,
-      variant: 'danger',
-      css: {
-        background:
-          'linear-gradient(0deg, rgba(9, 21, 33, 0.3), rgba(9, 21, 33, 0.3)), $colors$palette-red-500',
-        boxShadow: 'inset 0px 1px 1px rgba(5, 10, 26, 0.25)',
-      },
-    },
   ],
-
   defaultVariants: {
     size: 'medium',
     variant: 'primary',