Improve responsive values for Button

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

packages/canon/.storybook/preview.tsx

@@ -11,7 +11,7 @@ import '../src/css/components.css';
 
 // Custom themes
 import './themes/backstage.css';
-import { ThemeProvider } from '../src/theme/context';
+import { CanonProvider } from '../src/contexts/canon';
 
 const preview: Preview = {
   parameters: {
@@ -98,9 +98,9 @@ const preview: Preview = {
       });
 
       return (
-        <ThemeProvider>
+        <CanonProvider>
           <Story />
-        </ThemeProvider>
+        </CanonProvider>
       );
     },
   ],

packages/canon/.storybook/themes/backstage.css

@@ -12,7 +12,7 @@
 
   --canon-font-regular: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
 
-  .button {
+  .cn-button {
     border-radius: 60px;
     font-weight: 400;
     text-transform: uppercase;
@@ -25,39 +25,40 @@
     background-color: #1f5493;
     padding: 6px 16px;
     box-shadow: none;
-  }
 
-  .button:hover {
-    box-shadow: none;
-  }
+    &:hover {
+      box-shadow: none;
+    }
 
-  .button.primary {
-    color: #fff;
-    background-color: rgb(21, 58, 102);
-    box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
-      0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
-  }
+    &.cn-button-primary {
+      color: #fff;
+      background-color: rgb(21, 58, 102);
+      box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
+        0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
 
-  .button.primary:hover {
-    box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2),
-      0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
-  }
+      &:hover {
+        box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2),
+          0px 4px 5px 0px rgba(0, 0, 0, 0.14),
+          0px 1px 10px 0px rgba(0, 0, 0, 0.12);
+      }
+    }
 
-  .button.secondary {
-    background-color: transparent;
-    border: 1px solid rgba(31, 84, 147, 0.5);
-    color: #1f5493;
-  }
+    &.cn-button-secondary {
+      background-color: transparent;
+      border: 1px solid rgba(31, 84, 147, 0.5);
+      color: #1f5493;
 
-  .button.secondary:hover {
-    border: 1px solid #1f5493;
-    background-color: rgba(31, 84, 147, 0.04);
-  }
+      &:hover {
+        border: 1px solid #1f5493;
+        background-color: rgba(31, 84, 147, 0.04);
+      }
+    }
 
-  .button.tertiary {
-    background-color: transparent;
-    border: none;
-    color: #1f5493;
+    &.cn-button-tertiary {
+      background-color: transparent;
+      border: none;
+      color: #1f5493;
+    }
   }
 }
 

packages/canon/docs/Responsive.mdx

@@ -136,7 +136,7 @@ import { Chip } from './components/Chip';
 </Text>
 
 <Source
-  code={`<ThemeProvider breakpoints={{
+  code={`<CanonProvider breakpoints={{
   xs: 0,
   sm: 640,
   md: 768,

packages/canon/src/components/Button/Button.stories.tsx

@@ -104,3 +104,18 @@ export const Disabled: Story = {
     disabled: true,
   },
 };
+
+export const Responsive: Story = {
+  args: {
+    children: 'Button',
+    variant: {
+      xs: 'primary',
+      sm: 'secondary',
+      md: 'tertiary',
+    },
+    size: {
+      xs: 'small',
+      sm: 'medium',
+    },
+  },
+};

packages/canon/src/components/Button/Button.tsx

@@ -17,6 +17,7 @@
 import React, { forwardRef } from 'react';
 import { Icon } from '../Icon';
 import { ButtonProps } from './types';
+import { useCanon } from '../../contexts/canon';
 
 /** @public */
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
@@ -30,15 +31,28 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       children,
     } = props;
 
+    const { getResponsiveValue } = useCanon();
+
+    // Get the responsive value for the variant
+    const responsiveSize = getResponsiveValue(size);
+    const responsiveVariant = getResponsiveValue(variant);
+
     return (
       <button
         {...props}
         ref={ref}
         disabled={disabled}
-        className={`button ${variant} ${size}`}
+        className={[
+          'cn-button',
+          `cn-button-${responsiveSize}`,
+          `cn-button-${responsiveVariant}`,
+        ].join(' ')}
       >
         <span
-          className={['button-content', iconStart && iconEnd ? 'icon-both' : '']
+          className={[
+            'cn-button-content',
+            iconStart && iconEnd ? 'cn-button-content-icon-both' : '',
+          ]
             .filter(Boolean)
             .join(' ')}
         >

packages/canon/src/components/Button/Docs.mdx

@@ -26,11 +26,11 @@ import { PropsTable } from '../../../docs/components/PropsTable/PropsTable';
   data={{
     size: {
       type: ['small', 'medium'],
-      responsive: false,
+      responsive: true,
     },
     variant: {
       type: ['primary', 'secondary', 'tertiary'],
-      responsive: false,
+      responsive: true,
     },
     disabled: {
       type: 'boolean',

packages/canon/src/components/Button/styles.css

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-.button {
+.cn-button {
   all: unset;
   display: inline-flex;
   align-items: center;
@@ -27,56 +27,56 @@
   transition: all 150ms ease;
   cursor: pointer;
   border-radius: 8px;
-}
 
-.button.primary {
-  background-color: var(--canon-accent);
-  color: var(--canon-text-primary-on-accent);
-}
+  &.cn-button-primary {
+    background-color: var(--canon-accent);
+    color: var(--canon-text-primary-on-accent);
 
-.button.primary:hover {
-  background-color: transparent;
-  box-shadow: inset 0 0 0 1px var(--canon-outline-focus);
-  color: var(--canon-text-primary);
-}
+    &:hover {
+      background-color: transparent;
+      box-shadow: inset 0 0 0 1px var(--canon-outline-focus);
+      color: var(--canon-text-primary);
+    }
+  }
 
-.button.secondary {
-  background-color: transparent;
-  box-shadow: inset 0 0 0 1px var(--canon-outline);
-  color: var(--canon-text-primary);
-}
+  &.cn-button-secondary {
+    background-color: transparent;
+    box-shadow: inset 0 0 0 1px var(--canon-outline);
+    color: var(--canon-text-primary);
 
-.button.secondary:hover {
-  box-shadow: inset 0 0 0 1px var(--canon-outline-hover);
-}
+    &:hover {
+      box-shadow: inset 0 0 0 1px var(--canon-outline-hover);
+    }
+  }
 
-.button.tertiary {
-  background-color: transparent;
-  color: var(--canon-text-primary);
-}
+  &.cn-button-tertiary {
+    background-color: transparent;
+    color: var(--canon-text-primary);
 
-.button.tertiary:hover {
-  color: var(--canon-text-secondary);
-}
+    &:hover {
+      color: var(--canon-text-secondary);
+    }
+  }
 
-.button.small {
-  padding-left: 6px;
-  padding-right: 6px;
-  height: 32px;
-}
+  &.cn-button-small {
+    padding-left: 6px;
+    padding-right: 6px;
+    height: 32px;
+  }
 
-.button.medium {
-  padding-left: 8px;
-  padding-right: 8px;
-  height: 40px;
-}
+  &.cn-button-medium {
+    padding-left: 8px;
+    padding-right: 8px;
+    height: 40px;
+  }
 
-.button-content {
-  display: flex;
-  align-items: center;
-  gap: var(--canon-spacing-xs);
-}
+  &.cn-button-content {
+    display: flex;
+    align-items: center;
+    gap: var(--canon-spacing-xs);
 
-.button-content.icon-both {
-  flex: 1;
+    &.cn-button-content-icon-both {
+      flex: 1;
+    }
+  }
 }

packages/canon/src/components/Button/types.ts

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 import { IconNames } from '../Icon';
+import { Breakpoint } from '../../layout/types';
 
 /**
  * Properties for {@link Button}
@@ -21,8 +22,12 @@ import { IconNames } from '../Icon';
  * @public
  */
 export interface ButtonProps {
-  size?: 'small' | 'medium';
-  variant?: 'primary' | 'secondary' | 'tertiary';
+  size?: 'small' | 'medium' | Partial<Record<Breakpoint, 'small' | 'medium'>>;
+  variant?:
+    | 'primary'
+    | 'secondary'
+    | 'tertiary'
+    | Partial<Record<Breakpoint, 'primary' | 'secondary' | 'tertiary'>>;
   children: React.ReactNode;
   disabled?: boolean;
   iconStart?: IconNames;

packages/canon/src/components/Heading/Heading.tsx

@@ -16,12 +16,12 @@
 
 import React, { forwardRef } from 'react';
 import { HeadingProps } from './types';
-import { useTheme } from '../../theme/context';
+import { useCanon } from '../../contexts/canon';
 
 export const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(
   (props, ref) => {
     const { children, variant = 'title1', as = 'h1', ...restProps } = props;
-    const { getResponsiveValue } = useTheme();
+    const { getResponsiveValue } = useCanon();
 
     // Get the responsive value for the variant
     const responsiveVariant = getResponsiveValue(variant);

packages/canon/src/components/Icon/Icon.stories.tsx

@@ -17,7 +17,7 @@
 import React from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 import { Icon } from './Icon';
-import { ThemeProvider } from '../../theme/context';
+import { CanonProvider } from '../../contexts/canon';
 import { defaultIcons } from './icons';
 
 const meta = {
@@ -52,9 +52,9 @@ export const WithCustomIcon: Story = {
   },
   decorators: [
     Story => (
-      <ThemeProvider overrides={{ arrowDown: () => <div>Custom Icon</div> }}>
+      <CanonProvider overrides={{ arrowDown: () => <div>Custom Icon</div> }}>
         <Story />
-      </ThemeProvider>
+      </CanonProvider>
     ),
   ],
 };

packages/canon/src/components/Icon/Icon.tsx

@@ -15,13 +15,13 @@
  */
 
 import React from 'react';
-import { useTheme } from '../../theme/context';
+import { useCanon } from '../../contexts/canon';
 import type { IconProps } from './types';
 
 /** @public */
 export const Icon = (props: IconProps) => {
   const { name, size = 16 } = props;
-  const { icons } = useTheme();
+  const { icons } = useCanon();
 
   const RemixIcon = icons[name] as React.ComponentType<{ className?: string }>;
 

packages/canon/src/components/Text/Text.tsx

@@ -16,7 +16,7 @@
 
 import React, { forwardRef } from 'react';
 import { TextProps } from './types';
-import { useTheme } from '../../theme/context';
+import { useCanon } from '../../contexts/canon';
 
 export const Text = forwardRef<HTMLParagraphElement, TextProps>(
   (props, ref) => {
@@ -27,7 +27,7 @@ export const Text = forwardRef<HTMLParagraphElement, TextProps>(
       ...restProps
     } = props;
 
-    const { getResponsiveValue } = useTheme();
+    const { getResponsiveValue } = useCanon();
 
     // Get the responsive values for the variant and weight
     const responsiveVariant = getResponsiveValue(variant);

packages/canon/src/contexts/canon.tsx

@@ -29,26 +29,26 @@ const defaultBreakpoints: Breakpoints = {
   '2xl': '1536px',
 };
 
-interface ThemeContextProps {
+interface CanonContextProps {
   icons: IconMap;
   breakpoint: keyof Breakpoints;
   getResponsiveValue: (value: string | Partial<Breakpoints>) => string;
 }
 
-const ThemeContext = createContext<ThemeContextProps>({
+const CanonContext = createContext<CanonContextProps>({
   icons: defaultIcons,
   breakpoint: 'md',
   getResponsiveValue: () => '',
 });
 
-interface ThemeProviderProps {
+interface CanonProviderProps {
   children?: ReactNode;
   overrides?: Partial<Record<IconNames, React.ComponentType>>;
   breakpoints?: Partial<Breakpoints>;
 }
 
 /** @public */
-export const ThemeProvider = (props: ThemeProviderProps) => {
+export const CanonProvider = (props: CanonProviderProps) => {
   const { children, overrides, breakpoints = defaultBreakpoints } = props;
 
   // Merge provided overrides with default icons
@@ -93,13 +93,13 @@ export const ThemeProvider = (props: ThemeProviderProps) => {
   };
 
   return (
-    <ThemeContext.Provider
+    <CanonContext.Provider
       value={{ icons: combinedIcons, breakpoint, getResponsiveValue }}
     >
       {children}
-    </ThemeContext.Provider>
+    </CanonContext.Provider>
   );
 };
 
 /** @public */
-export const useTheme = () => useContext(ThemeContext);
+export const useCanon = () => useContext(CanonContext);