From 5e699a0acc44086bf5d64604ed26dedece8e8308 Mon Sep 17 00:00:00 2001 From: Haider Alshamma Date: Mon, 25 Nov 2024 14:42:18 -0500 Subject: [PATCH] fix: CI issues --- .storybook/main.js | 1 + src/BottomSheet/BottomSheet.spec.tsx | 1 + src/Button/Button.tsx | 4 ++-- src/Button/ControlIcon.tsx | 4 ++-- src/Button/IconicButton.tsx | 3 ++- src/FieldLabel/FramedIcon.tsx | 4 ++-- src/Icon/Icon.story.tsx | 4 ++-- src/Icon/Icon.tsx | 3 ++- src/Input/InputField.tsx | 9 +++++---- src/Select/customReactSelectStyles.spec.tsx | 2 +- src/theme/mergeThemes.spec.tsx | 2 +- src/theme/theme.ts | 6 +++--- src/theme/useNDSTheme.tsx | 2 +- 13 files changed, 25 insertions(+), 20 deletions(-) diff --git a/.storybook/main.js b/.storybook/main.js index 4ef614adb..94674ba7c 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -13,6 +13,7 @@ module.exports = { return config; }, addons: [ + "@storybook/addon-knobs", "@storybook/addon-toolbars", "@storybook/addon-viewport", { diff --git a/src/BottomSheet/BottomSheet.spec.tsx b/src/BottomSheet/BottomSheet.spec.tsx index 2763a41e5..a17ea71f2 100644 --- a/src/BottomSheet/BottomSheet.spec.tsx +++ b/src/BottomSheet/BottomSheet.spec.tsx @@ -11,6 +11,7 @@ describe("BottomSheet", () => { renderWithNDSProvider( & { className?: string; - icon?: keyof typeof icons | "loading"; + icon?: IconName | "loading"; iconSide?: "left" | "right"; size?: "small" | "medium"; variant?: ComponentVariant; diff --git a/src/Button/ControlIcon.tsx b/src/Button/ControlIcon.tsx index f97d6577f..d81cafb8e 100644 --- a/src/Button/ControlIcon.tsx +++ b/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; - icon: keyof typeof icons | "loading"; + icon: IconName | "loading"; toggled?: boolean; disabled?: boolean; size?: string; diff --git a/src/Button/IconicButton.tsx b/src/Button/IconicButton.tsx index 0655f8927..5184171b0 100644 --- a/src/Button/IconicButton.tsx +++ b/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; diff --git a/src/FieldLabel/FramedIcon.tsx b/src/FieldLabel/FramedIcon.tsx index 43125a843..2edb26d11 100644 --- a/src/FieldLabel/FramedIcon.tsx +++ b/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; diff --git a/src/Icon/Icon.story.tsx b/src/Icon/Icon.story.tsx index dd8872d53..b48709817 100644 --- a/src/Icon/Icon.story.tsx +++ b/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[]; diff --git a/src/Icon/Icon.tsx b/src/Icon/Icon.tsx index b168f4c7c..47fe5e831 100644 --- a/src/Icon/Icon.tsx +++ b/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; diff --git a/src/Input/InputField.tsx b/src/Input/InputField.tsx index 385ed35eb..fd51d33b5 100644 --- a/src/Input/InputField.tsx +++ b/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, "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; diff --git a/src/Select/customReactSelectStyles.spec.tsx b/src/Select/customReactSelectStyles.spec.tsx index d2cf415e5..31083eeb5 100644 --- a/src/Select/customReactSelectStyles.spec.tsx +++ b/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", () => { diff --git a/src/theme/mergeThemes.spec.tsx b/src/theme/mergeThemes.spec.tsx index f13dfe7d4..3813151e2 100644 --- a/src/theme/mergeThemes.spec.tsx +++ b/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", () => { diff --git a/src/theme/theme.ts b/src/theme/theme.ts index 8b450dbf9..013b3aed6 100644 --- a/src/theme/theme.ts +++ b/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 = { legacy: { @@ -153,7 +153,7 @@ export const themes: Record = { }, borders: [], }, - desktop: { + experimental: { colors: { black: "#011e38", blackBlue: "#122b47", @@ -599,4 +599,4 @@ export const themes: Record = { }, }; -export const { legacy, desktop, tablet, phone } = themes; +export const { legacy, experimental, tablet, phone } = themes; diff --git a/src/theme/useNDSTheme.tsx b/src/theme/useNDSTheme.tsx index 7b96c8825..90eaece69 100644 --- a/src/theme/useNDSTheme.tsx +++ b/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 {