fix: add button sizes to styled-system variants

.eslintrc.js

@@ -8,7 +8,13 @@ module.exports = {
   ],
   rules: {
     'import/no-unresolved': [2, { ignore: ['minerva-ui', '@docusaurus', '@theme'] }],
-    "import/no-unused-modules": 0,
+    'import/no-unused-modules': 0,
+    // "import/no-unused-modules": [
+    //   1,
+    //   {
+    //     "unusedExports": true,
+    //   }
+    // ],
     'react/display-name': 1,
     'react/react-in-jsx-scope': 0,
   },

src/Button/Button.stories.tsx

@@ -37,6 +37,13 @@ export const Variants = () => (
   </Stack>
 );
 
+export const Sizes = () => (
+  <Stack horizontal alignItems="flex-start">
+    <Button size="sm">Small Button</Button>
+    <Button>Button</Button>
+  </Stack>
+);
+
 export const LoadingButton = Template.bind({});
 LoadingButton.args = {
   children: 'Basic Button',

src/Button/index.tsx

@@ -35,7 +35,9 @@ export const buttonVariants = {
   },
 };
 
-export interface ButtonProps extends MinervaProps, PseudoBoxProps {
+export interface ButtonProps
+  extends Omit<MinervaProps, 'size'>,
+    Omit<PseudoBoxProps, 'size'> {
   children?: React.ReactNode;
   /** Toggles disabled pseudo class */
   disabled?: boolean;
@@ -45,35 +47,38 @@ export interface ButtonProps extends MinervaProps, PseudoBoxProps {
   name?: string;
   /** Button variant styles inherited from theme */
   variant?: string;
+  /** Size variants defined using Styled System variants (https://styled-system.com/variants) */
+  size?: any;
   /** HTML Button Type (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) */
   type?: 'button' | 'reset' | 'submit';
 }
 
-// export const Button = forwardRefWithAs<ButtonProps, 'button'>(function Button(
-//   {
-//     children,
-//     disabled = false,
-//     as: Comp = 'button',
-//     isLoading = false,
-//     name,
-//     variant,
-//     ...props
-//   },
-//   forwardedRef
-// ) {
+export function useVariant(componentName: string, variant?: string) {
+  const theme = useTheme();
+
+  const componentVariants = theme?.variants?.[componentName];
+
+  const variantExistsInTheme =
+    variant &&
+    componentVariants &&
+    Object.keys(componentVariants).includes(variant);
+
+  // if a variant is provided and it doesn't exist in the current theme, warn in development
+  warning(
+    !variant || variantExistsInTheme,
+    `Variant "${variant}" not found in theme variants for <Button />:\n\n${theme
+      ?.variants?.Button &&
+      `Expected one of:\n[${Object.keys(theme.variants.Button).join(', ')}]`}`
+  );
+
+  const variantStyles =
+    variant && theme?.variants?.[componentName]
+      ? theme.variants[componentName][variant]
+      : {};
+
+  return variantStyles;
+}
 
-// export const Button = forwardRef(function Button(
-//   {
-//     children,
-//     disabled = false,
-//     as: Comp = 'button',
-//     isLoading = false,
-//     name,
-//     variant,
-//     ...props
-//   }: ButtonProps,
-//   forwardedRef
-// ) {
 export const Button = forwardRefWithAs<ButtonProps, 'button'>(function Button(
   {
     children,
@@ -86,29 +91,14 @@ export const Button = forwardRefWithAs<ButtonProps, 'button'>(function Button(
   },
   forwardedRef
 ) {
-  const theme = useTheme();
-
-  // if a variant is provided and it doesn't exist in the current theme, warn in development
-  warning(
-    !variant ||
-      (variant &&
-        theme?.variants?.Button &&
-        Object.keys(theme?.variants?.Button).includes(variant)),
-    `Variant "${variant}" not found in theme variants for <Button />:\n\n${theme
-      ?.variants?.Button &&
-      `Expected one of:\n[${Object.keys(theme.variants.Button).join(', ')}]`}`
-  );
+  const componentStyles = useComponentStyles('Button');
+  const variantStyles = useVariant('Button', variant);
 
   warning(
     children || (!children && name),
     'Buttons without children require a `name` attribute to be accessible.'
   );
 
-  const variantStyles =
-    variant && theme?.variants?.Button ? theme.variants.Button[variant] : {};
-
-  const componentStyles = useComponentStyles('Button');
-
   return (
     <PseudoBox
       ref={forwardedRef}

src/layout.tsx

@@ -14,6 +14,7 @@ import StyledSystem, {
   typography,
   compose,
   system,
+  variant,
 } from 'styled-system';
 import {
   createShouldForwardProp,
@@ -331,7 +332,17 @@ export const Box = styled('div').withConfig({
     boxSizing: 'border-box',
     minWidth: 0,
   },
-  systemProps
+  systemProps,
+  variant({
+    prop: 'size',
+    variants: {
+      sm: {
+        padding: '12px 20px',
+        // paddingLeft: '20px',
+        // paddingRight: '20px',
+      },
+    },
+  })
 );
 
 // export const Box = styled('div')<MinervaProps>(

src/theme.ts

@@ -80,10 +80,10 @@ const defaultTheme: MinervaTheme = {
     fontSize: '14px',
     _hover: { backgroundColor: 'red' },
     lineHeight: '20px',
-    paddingTop: '8px',
-    paddingBottom: '8px',
-    paddingLeft: '16px',
-    paddingRight: '16px',
+    paddingTop: '16px',
+    paddingBottom: '16px',
+    paddingLeft: '60px',
+    paddingRight: '60px',
     borderRadius: '5px',
     borderStyle: 'solid',
     borderColor: '#d2d6dc',