fix: issues with scaling up the theme

.storybook/nds-theme/ThemeColorInput.js

@@ -27,15 +27,14 @@ const Swatch = styled.div(({ color }) => ({
 
 const ThemeColorInput = ({ color, onChange }) => {
   const [displayColorPicker, setDisplayColorPicker] = useState(false);
-  const [value, setValue] = useState(color || "#000");
   return (
     <>
-      <Swatch color={value} />
-      <ThemeInput onClick={() => setDisplayColorPicker(true)} value={value} readOnly />
+      <Swatch color={color} />
+      <ThemeInput onClick={() => setDisplayColorPicker(true)} value={color} readOnly />
       {displayColorPicker ? (
         <Popover>
           <CloseableArea onClick={() => setDisplayColorPicker(false)} />
-          <ChromePicker color={value} onChange={(e) => setValue(e.hex)} onChangeComplete={(e) => onChange(e)} />
+          <ChromePicker color={color} onChangeComplete={(e) => onChange(e)} />
         </Popover>
       ) : null}
     </>

.storybook/nds-theme/index.tsx

@@ -1,9 +1,8 @@
-import React, { useEffect, useState } from "react";
-import addons from "@storybook/addons";
+import React from "react";
 import { select } from "@storybook/addon-knobs";
 import { NDSProvider } from "../../src";
 import { ALL_NDS_LOCALES } from "../../src/locales.const";
-import { desktop, desktop as NDSTheme } from "../../src/theme";
+import { desktop } from "../../src/theme";
 import { ComponentVariant } from "../../src/NDSProvider/ComponentVariantContext";
 import { useLocalStorage } from "./useLocalStorage/useLocalStorage";
 
@@ -21,7 +20,6 @@ const StorybookNDSProvider = ({ children }) => {
     deserializer: (value) => JSON.parse(value),
   });
   const [themeVariant] = useLocalStorage<ComponentVariant>("nds-sb-theme-variant", "desktop");
-  // const [loading, setLoading] = useState(true);
 
   return (
     <NDSProvider locale={select("NDSProvider Locale", localeKnobOptions, "en_US")} variant={themeVariant} theme={theme}>

.storybook/nds-theme/register.tsx

@@ -1,54 +1,39 @@
 // .storybook/my-addon/register.js
 
-import React, { useEffect } from "react";
+import React from "react";
 import { addons, types, RenderOptions } from "@storybook/addons";
 import { AddonPanel } from "@storybook/components";
-import { useChannel } from "@storybook/api";
-import { STORY_CHANGED } from "@storybook/core-events";
-import { Box, Flex, NDSProvider, Heading3, Heading2 } from "../../src";
+import { Box, Flex, NDSProvider, Heading3, Heading2, QuietButton } from "../../src";
+import { themes } from "../../src/theme";
 import ThemeKey from "./ThemeKey";
 import { ThemeInput, ThemeOption, ThemeSelect } from "./ThemeInput";
 import ThemeColorInput from "./ThemeColorInput";
 import { useLocalStorage } from "./useLocalStorage/useLocalStorage";
-import { themes } from "../../src/theme";
 
 const ADDON_ID = "ndsThemeAddon";
 const PANEL_ID = `${ADDON_ID}/panel`;
 
-export const EVENTS = {
-  THEME_UPDATE: "theme-update",
-  VARIANT_UPDATE: "theme-variant-update",
-};
-
 const composeTheme = (data, theme) => {
   const themeGroup = Object.keys(data)[0];
   const key = Object.keys(data[themeGroup])[0];
   const newValue = data[themeGroup][key];
-  const newTheme = {
+  return {
     ...theme,
     [themeGroup]: {
       ...theme[themeGroup],
       ...(newValue && data[themeGroup]),
     },
   };
-  return newTheme;
 };
 
+const DEFAULT_THEME_VARIANT = "desktop";
+
 const ThemePanel = () => {
-  const [themeVariant, setThemeVariant] = useLocalStorage("nds-sb-theme-variant", "desktop");
+  const [themeVariant, setThemeVariant] = useLocalStorage("nds-sb-theme-variant", DEFAULT_THEME_VARIANT);
   const [theme, setTheme] = useLocalStorage("nds-sb-theme", themes[themeVariant], {
     serializer: (value) => JSON.stringify(value),
     deserializer: (value) => JSON.parse(value),
   });
-  const channel = addons.getChannel();
-  const emit = useChannel({});
-
-  useEffect(() => {
-    channel.on(STORY_CHANGED, () => {
-      emit(EVENTS.VARIANT_UPDATE, themeVariant);
-      emit(EVENTS.THEME_UPDATE, theme);
-    });
-  });
 
   const onChange = (group, prop) => (e) => {
     const value = e.target.value;
@@ -61,7 +46,6 @@ const ThemePanel = () => {
       theme
     );
     setTheme(nextTheme);
-    emit(EVENTS.THEME_UPDATE, nextTheme);
   };
 
   const onChangeColor = (group, prop) => (e) => {
@@ -75,7 +59,6 @@ const ThemePanel = () => {
       theme
     );
     setTheme(nextTheme);
-    emit(EVENTS.THEME_UPDATE, nextTheme);
   };
 
   const onVariantChange = (e) => {
@@ -84,14 +67,25 @@ const ThemePanel = () => {
 
     const theme = themes[variant];
     setTheme(theme);
+  };
 
-    emit(EVENTS.VARIANT_UPDATE, e.target.value);
+  const reset = () => {
+    setThemeVariant(DEFAULT_THEME_VARIANT);
+    setTheme(themes.desktop);
   };
 
   return (
     <NDSProvider>
       <Box m="x3">
-        <Heading2 fontWeight="light">Variant</Heading2>
+        <Flex>
+          <Heading2 flexGrow={1} fontWeight="light">
+            Theme
+          </Heading2>
+          <QuietButton size="small" onClick={reset}>
+            Reset all
+          </QuietButton>
+        </Flex>
+        <Heading3>Variant</Heading3>
         <ThemeSelect value={themeVariant} onChange={onVariantChange}>
           <ThemeOption value="desktop">Desktop</ThemeOption>
           <ThemeOption value="touch">Touch</ThemeOption>
@@ -106,7 +100,7 @@ const ThemePanel = () => {
               {group === "colors" ? (
                 <ThemeColorInput color={theme[group][prop]} onChange={onChangeColor(group, prop)} />
               ) : (
-                <ThemeInput defaultValue={theme[group][prop]} onChange={onChange(group, prop)} />
+                <ThemeInput value={theme[group][prop]} onChange={onChange(group, prop)} />
               )}
             </Flex>
           ))}

.storybook/nds-theme/useLocalStorage/useEventListener.ts

@@ -38,6 +38,7 @@ function useEventListener<K extends keyof DocumentEventMap>(
   options?: boolean | AddEventListenerOptions
 ): void;
 
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 function useEventListener<
   KW extends keyof WindowEventMap,
   KH extends keyof HTMLElementEventMap & keyof SVGElementEventMap,

.storybook/nds-theme/useLocalStorage/useLocalStorage.ts

@@ -1,6 +1,7 @@
-import {  useCallback, useEffect, useState,  type Dispatch, type SetStateAction } from "react";
-import {useEventCallback} from "./useEventCallback";
-import {useEventListener} from "./useEventListener";
+import { useCallback, useEffect, useState } from "react";
+import type { Dispatch, SetStateAction } from "react";
+import { useEventCallback } from "./useEventCallback";
+import { useEventListener } from "./useEventListener";
 
 declare global {
   // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
@@ -42,7 +43,7 @@ export function useLocalStorage<T>(
       }
       // Support 'undefined' as a value
       if (value === "undefined") {
-        return (undefined as unknown) as T;
+        return undefined as unknown as T;
       }
 
       const defaultValue = initialValue instanceof Function ? initialValue() : initialValue;

package.json

@@ -7,6 +7,7 @@
     "access": "public"
   },
   "scripts": {
+    "ci": "yarn && yarn build && yarn test && yarn run check",
     "new": "plop",
     "start": "concurrently \"yarn build --watch\" \"yarn start:storybook\"",
     "start:e2e": "yarn concurrently --kill-others \"yarn start --ci\" \"yarn wait-on http://localhost:9999 && cypress open\"",
@@ -77,6 +78,7 @@
     "@semantic-release/release-notes-generator": "^10.0.3",
     "@storybook/addon-a11y": "^6.1.9",
     "@storybook/addon-actions": "^6.1.9",
+    "@storybook/addon-docs": "6.1.9",
     "@storybook/addon-knobs": "^6.1.9",
     "@storybook/addon-storysource": "^6.1.9",
     "@storybook/addon-viewport": "^7.6.6",
@@ -168,7 +170,7 @@
   },
   "husky": {
     "hooks": {
-      "pre-push": "yarn run check"
+      "pre-push": "yarn run ci"
     }
   },
   "jest": {

src/Alert/Alert.story.tsx

@@ -8,9 +8,9 @@ export default {
 };
 
 const alertTypes = ["danger", "informative", "success", "warning"] as const;
-
 export const AlertTypes = () => (
   <Flex flexDirection="column" gap="x1">
+    {" "}
     {alertTypes.map((type) => (
       <Alert key={type} type={type} title={type}>
         This is an alert with type &quot;{type}&quot;

src/Alert/Alert.tsx

@@ -79,7 +79,9 @@ const Alert = ({
   return (
     <Flex
       bg={alertColours[type].backgroundColor}
-      p="x2"
+      py="x2"
+      paddingLeft="x2"
+      paddingRight="x1_5"
       borderRadius="medium"
       borderLeftWidth="4px"
       borderLeftColor={alertColours[type].borderColor}
@@ -88,12 +90,12 @@ const Alert = ({
       alignItems={children ? "flex-start" : undefined}
       {...props}
     >
-      {type === "danger" && <Icon icon="error" mr="x1" color={alertColours[type].borderColor} />}
-      {type === "success" && <Icon icon="check" mr="x1" color={alertColours[type].borderColor} />}
-      <Box mr="auto">
+      {type === "danger" && <Icon size="x3" icon="error" mr="x1" color={alertColours[type].borderColor} />}
+      {type === "success" && <Icon size="x3" icon="check" mr="x1" color={alertColours[type].borderColor} />}
+      <Flex flexDirection="column" gap="half" mr="auto">
         {title && <Text fontWeight="bold">{title}</Text>}
-        {children}
-      </Box>
+        <Box>{children}</Box>
+      </Flex>
       {isCloseable && <CloseButton onClick={hideAlert} aria-label={closeAriaLabel} />}
     </Flex>
   );

src/Alert/CloseButton.tsx

@@ -1,29 +1,18 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { Icon } from "../Icon";
-import { Link } from "../Link";
 import { Flex } from "../Flex";
+import { ControlIcon } from "../Button";
 
 type CloseButtonProps = {
-  onClick: any;
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
   "aria-label": string;
 };
 
 const CloseButton = ({ onClick, "aria-label": ariaLabel }: CloseButtonProps) => {
   const { t } = useTranslation();
   return (
     <Flex ml="x2" height="x3">
-      <Link
-        as="button"
-        type="button"
-        color="darkGrey"
-        lineHeight="0"
-        hover="blue"
-        onClick={onClick}
-        aria-label={ariaLabel || t("close")}
-      >
-        <Icon icon="close" size="x2" />
-      </Link>
+      <ControlIcon size="x3" icon="close" onClick={onClick} aria-label={ariaLabel || t("close")} label={t("close")} />
     </Flex>
   );
 };

src/AsyncSelect/AsyncSelect.story.tsx

@@ -2,15 +2,9 @@ import React, { useRef } from "react";
 import { action } from "@storybook/addon-actions";
 import { useState } from "react";
 import { AsyncSelect, Button } from "../index";
-import { filterOptions } from "../utils/story/simulatedAPIRequests";
-import { provinces } from "./fixtures";
+import { loadMatchingProvinces } from "./fixtures";
 import { Flex } from "../Flex";
 
-const loadMatchingProvinces = async (inputValue: string) => {
-  const data = await filterOptions(inputValue, provinces);
-  return await data.json();
-};
-
 export default {
   title: "Components/AsyncSelect",
 };

src/AsyncSelect/fixtures.ts

@@ -1,3 +1,10 @@
+import { filterOptions } from "../utils/story/simulatedAPIRequests";
+
+export const loadMatchingProvinces = async (inputValue: string) => {
+  const data = await filterOptions(inputValue, provinces);
+  return await data.json();
+};
+
 export const provinces = [
   {
     label: "Alberta",

src/Button/Button.story.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { Flex } from "../Flex";
 import { Button, PrimaryButton, DangerButton, QuietButton } from ".";
+import { Heading2, Heading4 } from "../Type";
 
 export default {
   title: "Components/Buttons",
@@ -26,20 +27,24 @@ _QuietButton.story = {
 };
 
 export const WithDifferentSizes = () => (
-  <Flex flexDirection="column" gap="x1">
-    <Flex alignItems="center" gap="x1">
-      <Button size="small">Create project</Button>
-      <Button size="medium">Create project</Button>
+  <Flex flexDirection="column" gap="x2">
+    <Flex flexDirection="column">
+      <Heading4>Medium size (default)</Heading4>
+      <Flex gap="x1">
+        <Button>Secondary Button</Button>
+        <PrimaryButton>Primary Button</PrimaryButton>
+        <DangerButton>Danger Button</DangerButton>
+        <QuietButton>Quiet Button</QuietButton>
+      </Flex>
     </Flex>
-
-    <Flex alignItems="center" gap="x1">
-      <PrimaryButton size="small">Create project</PrimaryButton>
-      <PrimaryButton size="medium">Create project</PrimaryButton>
-    </Flex>
-
-    <Flex alignItems="center" gap="x1">
-      <QuietButton size="small">Create project</QuietButton>
-      <QuietButton size="medium">Create project</QuietButton>
+    <Flex flexDirection="column">
+      <Heading4>Small size</Heading4>
+      <Flex gap="x1">
+        <Button size="small">Secondary Button</Button>
+        <PrimaryButton size="small">Primary Button</PrimaryButton>
+        <DangerButton size="small">Danger Button</DangerButton>
+        <QuietButton size="small">Quiet Button</QuietButton>
+      </Flex>
     </Flex>
   </Flex>
 );

src/Button/Button.tsx

@@ -29,9 +29,12 @@ const WrapperButton = styled.button<ButtonProps>(
     width: fullWidth ? "100%" : "auto",
   }),
   ({ disabled, theme }) => ({
+    userSelect: "none",
+    touchAction: "none",
     display: "inline-flex",
     justifyContent: "center",
     alignItems: "center",
+    fontSize: theme.fontSizes.medium,
     fontWeight: theme.fontWeights.medium,
     textDecoration: "none",
     verticalAlign: "middle",
@@ -61,7 +64,6 @@ const WrapperButton = styled.button<ButtonProps>(
     "&:disabled": {
       opacity: ".5",
     },
-    fontSize: "medium",
     padding: `${subPx(theme.space.x1)} ${theme.space.x2}`,
   }),
   ({ theme }) =>
@@ -80,19 +82,6 @@ const WrapperButton = styled.button<ButtonProps>(
         },
       },
     }),
-  ({ theme }) =>
-    variant({
-      variants: {
-        desktop: {
-          fontSize: "medium",
-          padding: `${subPx(theme.space.x1)} ${theme.space.x2}`,
-        },
-        touch: {
-          fontSize: "medium",
-          padding: `${subPx(theme.space.x2)} ${theme.space.x3}`,
-        },
-      },
-    }),
   space
 );