@databiosphere/findable-ui 23.0.0 → 24.0.0

package/src/components/Stepper/components/Step/stories/step.stories.tsx

@@ -0,0 +1,87 @@
+import { Stepper } from "@mui/material";
+import { Meta, StoryObj, composeStories } from "@storybook/react";
+import React, { ComponentProps } from "react";
+import { CONTROL_TYPE } from "../../../../../storybook/controls/types";
+import { configureControls } from "../../../../../storybook/controls/utils";
+import { LOREM_IPSUM } from "../../../../../storybook/loremIpsum";
+import { STEPPER_PROPS } from "../../../../../styles/common/mui/stepper";
+import { StepContent } from "../components/StepContent/stepContent";
+import * as stories from "../components/StepLabel/stories/stepLabel.stories";
+import { Step } from "../step";
+import { BOOLEAN_CONTROLS, DISABLED_CONTROLS } from "./contants";
+
+const {
+  Active: ActiveStepLabel,
+  Completed: CompletedStepLabel,
+  Default: StepLabel,
+} = composeStories(stories);
+
+const meta: Meta<typeof Step> = {
+  argTypes: {
+    ...configureControls<ComponentProps<typeof Step>>(
+      DISABLED_CONTROLS,
+      CONTROL_TYPE.DISABLED
+    ),
+    ...configureControls<ComponentProps<typeof Step>>(
+      BOOLEAN_CONTROLS,
+      CONTROL_TYPE.BOOLEAN
+    ),
+    index: { control: { type: "number" } },
+  },
+  component: Step,
+  decorators: [
+    (Story, context): JSX.Element => (
+      <Stepper
+        connector={null}
+        orientation={STEPPER_PROPS.ORIENTATION.VERTICAL}
+        sx={{
+          display: "grid",
+          gridTemplateColumns: "minmax(auto, 816px)",
+          height: "100vh",
+          placeContent: "center center",
+        }}
+      >
+        <Story {...context} />
+      </Stepper>
+    ),
+  ],
+  parameters: { layout: "fullscreen" },
+  title: "Components/Stepper/Step",
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Active: Story = {
+  args: {
+    active: true,
+    children: [
+      <ActiveStepLabel key="label" />,
+      <StepContent key="step-content">{LOREM_IPSUM.LONG}</StepContent>,
+    ],
+    completed: false,
+  },
+};
+
+export const Completed: Story = {
+  args: {
+    active: false,
+    children: [
+      <CompletedStepLabel key="label" />,
+      <StepContent key="step-content">{LOREM_IPSUM.LONG}</StepContent>,
+    ],
+    completed: true,
+  },
+};
+
+export const Default: Story = {
+  args: {
+    active: false,
+    children: [
+      <StepLabel key="label" />,
+      <StepContent key="step-content">{LOREM_IPSUM.LONG}</StepContent>,
+    ],
+    completed: false,
+  },
+};

package/src/components/common/Form/components/Select/select.tsx

@@ -5,6 +5,7 @@ import {
 } from "@mui/material";
 import React, { ReactNode } from "react";
 import { TEXT_BODY_400 } from "../../../../../theme/common/typography";
+import { DropDownIcon } from "./components/DropDownIcon/dropDownIcon";
 import { InputFormControl } from "./select.styles";
 
 /**
@@ -29,7 +30,13 @@ export const Select = ({
   return (
     <InputFormControl className={className} isFilled={isFilled}>
       {label && <Typography variant={TEXT_BODY_400}>{label}</Typography>}
-      <MSelect fullWidth inputProps={{ onBlur }} size="small" {...props}>
+      <MSelect
+        fullWidth
+        IconComponent={DropDownIcon}
+        inputProps={{ onBlur }}
+        size="small"
+        {...props}
+      >
         {children}
       </MSelect>
     </InputFormControl>

package/src/components/common/KeyValuePairs/components/KeyElType/keyElType.tsx

@@ -1,20 +1,25 @@
-import { Typography } from "@mui/material";
-import React, { ReactNode } from "react";
+import { Typography, TypographyProps } from "@mui/material";
+import React from "react";
+import { TYPOGRAPHY_PROPS } from "../../../../../styles/common/mui/typography";
 
 /**
  * Basic KeyValuePairs "key" wrapper component.
  */
 
-export interface KeyElTypeProps {
-  children: ReactNode;
-}
-
 export const KeyElType = ({
   children,
-  ...props /* Spread props to allow for Mui TypographyProps specific prop overrides e.g. "variant". */
-}: KeyElTypeProps): JSX.Element => {
+  color = TYPOGRAPHY_PROPS.COLOR.INK_LIGHT,
+  component = "div",
+  variant = TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_400_2_LINES,
+  ...props /* MuiTypographyProps */
+}: TypographyProps): JSX.Element => {
   return (
-    <Typography color="ink.light" variant="text-body-400-2lines" {...props}>
+    <Typography
+      color={color}
+      component={component}
+      variant={variant}
+      {...props}
+    >
       {children}
     </Typography>
   );

package/src/components/common/KeyValuePairs/components/ValueElType/valueElType.tsx

@@ -1,20 +1,19 @@
-import { Typography } from "@mui/material";
-import React, { ReactNode } from "react";
+import { Typography, TypographyProps } from "@mui/material";
+import React from "react";
+import { TYPOGRAPHY_PROPS } from "../../../../../styles/common/mui/typography";
 
 /**
  * Basic KeyValuePairs "value" wrapper component.
  */
 
-export interface ValueElTypeProps {
-  children: ReactNode;
-}
-
 export const ValueElType = ({
   children,
-  ...props /* Spread props to allow for Mui TypographyProps specific prop overrides e.g. "variant". */
-}: ValueElTypeProps): JSX.Element => {
+  component = "div",
+  variant = TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_400_2_LINES,
+  ...props /* MuiTypographyProps */
+}: TypographyProps): JSX.Element => {
   return (
-    <Typography variant="text-body-400-2lines" {...props}>
+    <Typography component={component} variant={variant} {...props}>
       {children}
     </Typography>
   );

package/src/storybook/controls/constants.ts

@@ -0,0 +1,12 @@
+import { ArgTypes } from "@storybook/react";
+import { CONTROL_TYPE } from "./types";
+
+export const CONTROL_CONFIG_MAP: Record<
+  CONTROL_TYPE,
+  ArgTypes[keyof ArgTypes]["control"]
+> = {
+  [CONTROL_TYPE.BOOLEAN]: { type: "boolean" },
+  [CONTROL_TYPE.DISABLED]: false,
+};
+
+export const MUI_CONTROLS = ["classes", "className", "ref", "sx"] as const;

package/src/storybook/controls/types.ts

@@ -0,0 +1,4 @@
+export enum CONTROL_TYPE {
+  BOOLEAN = "boolean",
+  DISABLED = "disabled",
+}

package/src/storybook/controls/utils.ts

@@ -0,0 +1,18 @@
+import { Args, ArgTypes } from "@storybook/react";
+import { CONTROL_CONFIG_MAP } from "./constants";
+import { CONTROL_TYPE } from "./types";
+
+/**
+ * Configures controls for specified keys with the given control type.
+ * @param keys - ArgType keys.
+ * @param controlType - The type of control to apply (from CONTROL_TYPE enum).
+ * @returns An object of ArgTypes with the specified control configuration.
+ */
+export function configureControls<TArg = Args>(
+  keys: (keyof TArg)[],
+  controlType: CONTROL_TYPE
+): Partial<ArgTypes<TArg>> {
+  return Object.fromEntries(
+    keys.map((key) => [key, { control: CONTROL_CONFIG_MAP[controlType] }])
+  ) as Partial<ArgTypes<TArg>>;
+}

package/src/storybook/decorators.tsx

@@ -0,0 +1,17 @@
+import { ThemeProvider as EmotionThemeProvider } from "@emotion/react";
+import { CssBaseline, ThemeProvider } from "@mui/material";
+import { Preview } from "@storybook/react";
+import React from "react";
+import { createAppTheme } from "../theme/theme";
+
+export const decorators: Preview["decorators"] = (Story, context) => {
+  const theme = createAppTheme();
+  return (
+    <EmotionThemeProvider theme={theme}>
+      <ThemeProvider theme={theme}>
+        <CssBaseline />
+        <Story {...context} />
+      </ThemeProvider>
+    </EmotionThemeProvider>
+  );
+};

package/src/storybook/loremIpsum.ts

@@ -0,0 +1,5 @@
+export const LOREM_IPSUM = {
+  LONG: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.",
+  SHORT:
+    "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.",
+};

package/src/storybook/parameters.ts

@@ -0,0 +1,14 @@
+import { Preview } from "@storybook/react";
+
+export const parameters: Preview["parameters"] = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    expanded: true,
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+    sort: "alpha",
+  },
+  layout: "centered",
+};

package/src/styles/common/mui/stepper.ts

@@ -0,0 +1,14 @@
+import { StepperProps } from "@mui/material";
+
+type StepperPropsOptions = {
+  ORIENTATION: typeof ORIENTATION;
+};
+
+const ORIENTATION: Record<string, StepperProps["orientation"]> = {
+  HORIZONTAL: "horizontal",
+  VERTICAL: "vertical",
+};
+
+export const STEPPER_PROPS: StepperPropsOptions = {
+  ORIENTATION,
+};

package/src/styles/common/mui/svgIcon.ts

@@ -0,0 +1,35 @@
+import { SvgIconProps } from "@mui/material";
+
+type SvgIconPropsOptions = {
+  COLOR: typeof COLOR;
+  FONT_SIZE: typeof FONT_SIZE;
+};
+
+const COLOR: Record<string, SvgIconProps["color"]> = {
+  ACTION: "action",
+  DISABLED: "disabled",
+  ERROR: "error",
+  INFO: "info",
+  INHERIT: "inherit",
+  INK_LIGHT: "inkLight",
+  INK_MAIN: "inkMain",
+  PRIMARY: "primary",
+  SECONDARY: "secondary",
+  SUCCESS: "success",
+  WARNING: "warning",
+};
+
+const FONT_SIZE: Record<string, SvgIconProps["fontSize"]> = {
+  INHERIT: "inherit",
+  LARGE: "large",
+  MEDIUM: "medium",
+  SMALL: "small",
+  XSMALL: "xsmall",
+  XXLARGE: "xxlarge",
+  XXSMALL: "xxsmall",
+};
+
+export const SVG_ICON_PROPS: SvgIconPropsOptions = {
+  COLOR,
+  FONT_SIZE,
+};

package/src/styles/common/mui/typography.ts

@@ -18,6 +18,7 @@ const VARIANT: Record<string, TypographyOwnProps["variant"]> = {
   TEXT_BODY_SMALL_400: "text-body-small-400",
   TEXT_HEADING_LARGE: "text-heading-large",
   TEXT_HEADING_SMALL: "text-heading-small",
+  TEXT_HEADING_XSMALL: "text-heading-xsmall",
 };
 
 export const TYPOGRAPHY_PROPS: TypographyPropsOptions = {

package/src/tests/mui/constants.ts

@@ -0,0 +1,4 @@
+export const MUI_CLASSES = {
+  ACTIVE: "Mui-active",
+  COMPLETED: "Mui-completed",
+};

package/src/theme/common/components.ts

@@ -1,5 +1,4 @@
 import { Components, Theme } from "@mui/material";
-import { DropDownIcon } from "../../components/common/Form/components/Select/components/DropDownIcon/dropDownIcon";
 import { CHIP_PROPS } from "../../styles/common/mui/chip";
 import { desktopUp, mobileUp, tabletUp } from "./breakpoints";
 import {
@@ -1180,9 +1179,6 @@ export const MuiRadio = (theme: Theme): Components["MuiRadio"] => {
  * MuiSelect Component
  */
 export const MuiSelect: Components["MuiSelect"] = {
-  defaultProps: {
-    IconComponent: DropDownIcon,
-  },
   styleOverrides: {
     select: {
       minHeight: "unset",

package/src/theme/common/typography.ts

@@ -20,6 +20,7 @@ const TYPOGRAPHY = {
   TEXT_HEADING_LARGE: "text-heading-large",
   TEXT_HEADING_SMALL: "text-heading-small",
   TEXT_HEADING_XLARGE: "text-heading-xlarge",
+  TEXT_HEADING_XSMALL: "text-heading-xsmall",
   TEXT_UPPERCASE_500: "text-uppercase-500",
 } as const;
 export const {
@@ -37,6 +38,7 @@ export const {
   TEXT_HEADING_LARGE,
   TEXT_HEADING_SMALL,
   TEXT_HEADING_XLARGE,
+  TEXT_HEADING_XSMALL,
   TEXT_UPPERCASE_500,
 } = TYPOGRAPHY;
 
@@ -189,6 +191,15 @@ export const textHeadingXLarge: CSSProperties = {
   },
 };
 
+/**
+ * Typography Option "text-heading-xsmall"
+ */
+export const textHeadingXSmall: CSSProperties = {
+  fontSize: 16,
+  fontWeight: 500,
+  lineHeight: "24px",
+};
+
 /**
  * Typography Option "text-uppercase-500"
  */

package/src/theme/theme.ts

@@ -55,6 +55,7 @@ export function createAppTheme(customOptions?: ThemeOptions): Theme {
         [T.TEXT_HEADING_LARGE]: T.textHeadingLarge,
         [T.TEXT_HEADING_SMALL]: T.textHeadingSmall,
         [T.TEXT_HEADING_XLARGE]: T.textHeadingXLarge,
+        [T.TEXT_HEADING_XSMALL]: T.textHeadingXSmall,
         [T.TEXT_UPPERCASE_500]: T.textUppercase500,
         fontFamily: T.fontFamily,
       },

package/src/utils/tests.ts

@@ -17,3 +17,23 @@ export function getAnchorEl(id: string): HTMLAnchorElement {
 export function getButtonById(id: string): HTMLButtonElement {
   return screen.getByTestId(id);
 }
+
+/**
+ * Returns class names of the given element.
+ * @param element - Element.
+ * @returns element class names.
+ */
+export function getClassNames(element?: Element | null): string | null {
+  if (!element) return null;
+  return element.getAttribute("class");
+}
+
+/**
+ * Returns tag name of the given element.
+ * @param element - Element.
+ * @returns element tag name.
+ */
+export function getTagName(element?: Element | null): string | null {
+  if (!element) return null;
+  return element.tagName.toLowerCase();
+}

package/tests/setup.ts

@@ -0,0 +1,6 @@
+import { setProjectAnnotations } from "@storybook/react";
+import { decorators } from "../src/storybook/decorators";
+import { parameters } from "../src/storybook/parameters";
+
+// Set project annotations once before all tests
+setProjectAnnotations({ decorators, parameters });

package/tests/stepIcon.test.tsx

@@ -0,0 +1,42 @@
+import { composeStories } from "@storybook/react";
+import { render, screen } from "@testing-library/react";
+import React from "react";
+import { STEP_ICON_TEST_ID } from "../src/components/Stepper/components/Step/components/StepIcon/constants";
+import * as stories from "../src/components/Stepper/components/Step/components/StepIcon/stories/stepIcon.stories";
+import { MUI_CLASSES } from "../src/tests/mui/constants";
+import { getClassNames, getTagName } from "../src/utils/tests";
+
+const { Active, Completed, Default } = composeStories(stories);
+
+describe("StepIcon", () => {
+  it("renders correctly", () => {
+    render(<Default testId={STEP_ICON_TEST_ID} />);
+    const stepIconEl = screen.getByTestId(STEP_ICON_TEST_ID);
+    expect(stepIconEl).not.toBeNull();
+  });
+
+  it("renders inactive step icon", () => {
+    render(<Default testId={STEP_ICON_TEST_ID} />);
+    const stepIconEl = screen.getByTestId(STEP_ICON_TEST_ID);
+    expect(stepIconEl.textContent).toEqual("1");
+    expect(getClassNames(stepIconEl)).not.toContain(MUI_CLASSES.ACTIVE);
+    expect(getClassNames(stepIconEl)).not.toContain(MUI_CLASSES.COMPLETED);
+  });
+
+  it("renders active step icon", () => {
+    render(<Active testId={STEP_ICON_TEST_ID} />);
+    const stepIconEl = screen.getByTestId(STEP_ICON_TEST_ID);
+    expect(stepIconEl.textContent).toEqual("1");
+    expect(getClassNames(stepIconEl)).toContain(MUI_CLASSES.ACTIVE);
+    expect(getClassNames(stepIconEl)).not.toContain(MUI_CLASSES.COMPLETED);
+  });
+
+  it("renders completed step icon", () => {
+    render(<Completed testId={STEP_ICON_TEST_ID} />);
+    const stepIconEl = screen.getByTestId(STEP_ICON_TEST_ID);
+    expect(stepIconEl.textContent).not.toEqual("1");
+    expect(getClassNames(stepIconEl)).not.toContain(MUI_CLASSES.ACTIVE);
+    expect(getClassNames(stepIconEl)).toContain(MUI_CLASSES.COMPLETED);
+    expect(getTagName(stepIconEl.firstElementChild)).toBe("path");
+  });
+});

package/types/data-explorer-ui.d.ts

@@ -203,6 +203,7 @@ declare module "@mui/material/styles" {
     "text-heading-large": TypographyStyleOptions;
     "text-heading-small": TypographyStyleOptions;
     "text-heading-xlarge": TypographyStyleOptions;
+    "text-heading-xsmall": TypographyStyleOptions;
     "text-uppercase-500": TypographyStyleOptions;
   }
 
@@ -221,6 +222,7 @@ declare module "@mui/material/styles" {
     "text-heading-large"?: TypographyStyleOptions;
     "text-heading-small"?: TypographyStyleOptions;
     "text-heading-xlarge"?: TypographyStyleOptions;
+    "text-heading-xsmall"?: TypographyStyleOptions;
     "text-uppercase-500"?: TypographyStyleOptions;
   }
 }
@@ -253,6 +255,7 @@ declare module "@mui/material/Typography" {
     "text-heading-large": true;
     "text-heading-small": true;
     "text-heading-xlarge": true;
+    "text-heading-xsmall": true;
     "text-uppercase-500": true;
   }
 }