fix: CI issues

.storybook/main.js

@@ -13,6 +13,7 @@ module.exports = {
     return config;
   },
   addons: [
+    "@storybook/addon-knobs",
     "@storybook/addon-toolbars",
     "@storybook/addon-viewport",
     {

src/BottomSheet/BottomSheet.spec.tsx

@@ -11,6 +11,7 @@ describe("BottomSheet", () => {
 
     renderWithNDSProvider(
       <BottomSheet
+        title="Some title"
         isOpen={true}
         onClose={onCloseMock}
         primaryAction={primaryActionMock}

src/Button/Button.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import styled, { useTheme } from "styled-components";
+import type { IconName } from "@nulogy/icons";
 import { space, SpaceProps, variant } from "styled-system";
 import { Icon } from "../Icon";
 import { DefaultNDSThemeType } from "../theme";
@@ -9,12 +10,11 @@ import {
   ComponentVariant,
 } from "../NDSProvider/ComponentVariantContext";
 import { subPx } from "../utils";
-import icons from "@nulogy/icons";
 
 export type ButtonProps = SpaceProps &
   React.ComponentPropsWithRef<"button"> & {
     className?: string;
-    icon?: keyof typeof icons | "loading";
+    icon?: IconName | "loading";
     iconSide?: "left" | "right";
     size?: "small" | "medium";
     variant?: ComponentVariant;

src/Button/ControlIcon.tsx

@@ -1,4 +1,4 @@
-import icons from "@nulogy/icons";
+import type { IconName } from "@nulogy/icons";
 import React from "react";
 import styled from "styled-components";
 import { layout, LayoutProps, space, SpaceProps } from "styled-system";
@@ -8,7 +8,7 @@ type ControlIconProps = React.ComponentPropsWithRef<"button"> &
   SpaceProps &
   LayoutProps & {
     onClick?: React.MouseEventHandler<HTMLButtonElement>;
-    icon: keyof typeof icons | "loading";
+    icon: IconName | "loading";
     toggled?: boolean;
     disabled?: boolean;
     size?: string;

src/Button/IconicButton.tsx

@@ -4,6 +4,7 @@ import { space, SpaceProps, variant } from "styled-system";
 import { Manager, Reference, Popper } from "react-popper-2";
 import { transparentize } from "polished";
 import icons from "@nulogy/icons";
+import { IconName } from "@nulogy/icons";
 import { Icon } from "../Icon";
 import { Text } from "../Type";
 import { DefaultNDSThemeType } from "../theme";
@@ -13,7 +14,7 @@ interface BaseProps {
   variant?: ComponentVariant;
   color?: string;
   labelHidden?: boolean;
-  icon?: keyof typeof icons | "loading";
+  icon?: IconName | "loading";
   iconSize?: string;
   hoverBackgroundColor?: string;
   fontSize?: string;

src/FieldLabel/FramedIcon.tsx

@@ -1,12 +1,12 @@
 import React, { ReactElement } from "react";
-import icons from "@nulogy/icons";
+import { IconName } from "@nulogy/icons";
 import { Flex } from "../Flex";
 import { Tooltip } from "../Tooltip";
 import { Icon } from "../Icon";
 
 interface FramedIconProps extends React.ComponentPropsWithoutRef<"svg"> {
   iconSize: string;
-  icon: keyof typeof icons | "loading";
+  icon: IconName | "loading";
   focusable?: boolean;
   maxWidth?: string;
   tooltip?: string | ReactElement;

src/Icon/Icon.story.tsx

@@ -1,8 +1,8 @@
 import React from "react";
+import { useTheme } from "styled-components";
 import icons from "@nulogy/icons";
 import type { IconName } from "@nulogy/icons";
-import { Box, DefaultNDSThemeType, Flex, Icon, InlineIcon } from "../index";
-import { useTheme } from "styled-components";
+import { Box, Flex, Icon, InlineIcon } from "../index";
 
 const iconNames = [...Object.keys(icons), "loading"] as IconName[];
 const iconSubset = [...iconNames.slice(0, 5), "loading"] as IconName[];

src/Icon/Icon.tsx

@@ -2,10 +2,11 @@ import React from "react";
 import styled, { useTheme } from "styled-components";
 import { space, SpaceProps } from "styled-system";
 import icons from "@nulogy/icons";
+import { IconName } from "@nulogy/icons";
 import LoadingIcon from "./LoadingIcon";
 
 interface IconProps extends SpaceProps {
-  icon: keyof typeof icons | "loading";
+  icon: IconName | "loading";
   className?: string;
   size?: string;
   title?: string;

src/Input/InputField.tsx

@@ -1,6 +1,7 @@
 import React, { forwardRef } from "react";
 import styled, { CSSObject, useTheme } from "styled-components";
 import { position, PositionProps, space, SpaceProps, variant } from "styled-system";
+import { IconName } from "@nulogy/icons";
 import { Icon } from "../Icon";
 import { Box, BoxProps } from "../Box";
 import { Flex } from "../Flex";
@@ -16,10 +17,10 @@ type NativeInputProps = Omit<React.ComponentPropsWithRef<"input">, "size" | "hei
 export interface InputFieldProps extends NativeInputProps {
   htmlSize?: number;
   variant?: ComponentVariant;
-  iconRight?: keyof typeof icons | "loading";
-  iconLeft?: keyof typeof icons | "loading";
-  iconRightSize?: keyof typeof icons | "loading";
-  iconLeftSize?: keyof typeof icons | "loading";
+  iconRight?: IconName | "loading";
+  iconLeft?: IconName | "loading";
+  iconRightSize?: string;
+  iconLeftSize?: string;
   error?: boolean;
   labelText?: string;
   requirementText?: string;

src/Select/customReactSelectStyles.spec.tsx

@@ -1,4 +1,4 @@
-import { desktop as theme } from "../theme/theme";
+import { desktop as theme } from "../theme";
 import { getControlBorderRadius, getMenuBorderRadius, showIndicatorSeparator } from "./customReactSelectStyles";
 
 describe("custom react-select styles", () => {

src/theme/mergeThemes.spec.tsx

@@ -1,5 +1,5 @@
 import { mergeThemes } from "./mergeThemes.util";
-import { desktop as NDSTheme } from "./theme";
+import { legacy as NDSTheme } from "./theme";
 
 describe("mergedThemes", () => {
   it("returns the default nds theme if custom theme is undefined", () => {

src/theme/theme.ts

@@ -2,7 +2,7 @@
 // Do not edit directly.
 import { DefaultNDSThemeType } from "./theme.type";
 
-type ThemeKey = "legacy" | "desktop" | "tablet" | "phone";
+type ThemeKey = "legacy" | "experimental" | "tablet" | "phone";
 
 export const themes: Record<ThemeKey, DefaultNDSThemeType> = {
   legacy: {
@@ -153,7 +153,7 @@ export const themes: Record<ThemeKey, DefaultNDSThemeType> = {
     },
     borders: [],
   },
-  desktop: {
+  experimental: {
     colors: {
       black: "#011e38",
       blackBlue: "#122b47",
@@ -599,4 +599,4 @@ export const themes: Record<ThemeKey, DefaultNDSThemeType> = {
   },
 };
 
-export const { legacy, desktop, tablet, phone } = themes;
+export const { legacy, experimental, tablet, phone } = themes;

src/theme/useNDSTheme.tsx

@@ -34,7 +34,7 @@ export const getThemeByVariant = (
     return isTabletSize ? themes.tablet : themes.phone;
   }
 
-  return featureFlags.experimentalDesktopTypographyScale ? themes.desktop : themes.legacy;
+  return featureFlags.experimentalDesktopTypographyScale ? themes.experimental : themes.legacy;
 };
 
 export function useNDSTheme(variant: ComponentVariant = "desktop", customTheme?: ThemeType): DefaultNDSThemeType {