@databiosphere/findable-ui 23.0.0 → 24.0.0

package/lib/utils/tests.d.ts

@@ -10,3 +10,15 @@ export declare function getAnchorEl(id: string): HTMLAnchorElement;
  * @returns HTML button element.
  */
 export declare function getButtonById(id: string): HTMLButtonElement;
+/**
+ * Returns class names of the given element.
+ * @param element - Element.
+ * @returns element class names.
+ */
+export declare function getClassNames(element?: Element | null): string | null;
+/**
+ * Returns tag name of the given element.
+ * @param element - Element.
+ * @returns element tag name.
+ */
+export declare function getTagName(element?: Element | null): string | null;

package/lib/utils/tests.js

@@ -15,3 +15,23 @@ export function getAnchorEl(id) {
 export function getButtonById(id) {
     return screen.getByTestId(id);
 }
+/**
+ * Returns class names of the given element.
+ * @param element - Element.
+ * @returns element class names.
+ */
+export function getClassNames(element) {
+    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) {
+    if (!element)
+        return null;
+    return element.tagName.toLowerCase();
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@databiosphere/findable-ui",
-  "version": "23.0.0",
+  "version": "24.0.0",
   "description": "",
   "scripts": {
     "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",

package/src/components/Loading/loading.stories.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import { PAPER_PANEL_STYLE } from "../common/Paper/paper";
 import { Loading } from "./loading";
 
-const meta = {
+const meta: Meta<typeof Loading> = {
   argTypes: {
     appear: { control: "boolean" },
     iconSize: { control: "select", options: ["small", "medium", "large"] },
@@ -30,7 +30,7 @@ const meta = {
     ),
   ],
   title: "Components/Communication/Loading",
-} satisfies Meta<typeof Loading>;
+};
 
 export default meta;
 

package/src/components/Stepper/components/Step/components/StepContent/stepContent.styles.ts

@@ -0,0 +1,18 @@
+import styled from "@emotion/styled";
+import { StepContent } from "@mui/material";
+import { smokeMain } from "../../../../../../styles/common/mixins/colors";
+import { sectionPadding } from "../../../../../common/Section/section.styles";
+
+export const StyledStepContent = styled(StepContent)`
+  &.MuiStepContent-root {
+    .MuiCollapse-wrapperInner.MuiCollapse-vertical {
+      > .MuiGrid2-root {
+        ${sectionPadding};
+        border-top: 1px solid ${smokeMain};
+        display: grid;
+        gap: 24px;
+        justify-items: flex-start;
+      }
+    }
+  }
+`;

package/src/components/Stepper/components/Step/components/StepContent/stepContent.tsx

@@ -0,0 +1,16 @@
+import { Grid2, StepContentProps } from "@mui/material";
+import React from "react";
+import { BaseComponentProps } from "../../../../../types";
+import { StyledStepContent } from "./stepContent.styles";
+
+export const StepContent = ({
+  children,
+  className,
+  ...props /* MuiStepContentProps */
+}: BaseComponentProps & StepContentProps): JSX.Element => {
+  return (
+    <StyledStepContent className={className} {...props}>
+      <Grid2>{children}</Grid2>
+    </StyledStepContent>
+  );
+};

package/src/components/Stepper/components/Step/components/StepIcon/components/CompletedIcon/completedIcon.styles.ts

@@ -0,0 +1,19 @@
+import styled from "@emotion/styled";
+import { SvgIcon } from "@mui/material";
+import {
+  inkLight,
+  smokeDark,
+} from "../../../../../../../../styles/common/mixins/colors";
+
+export const StyledSvgIcon = styled(SvgIcon)`
+  &.MuiSvgIcon-root {
+    border-radius: 50%;
+    box-sizing: content-box;
+    padding: 4px;
+
+    &.Mui-completed {
+      border: 2px solid ${smokeDark};
+      color: ${inkLight};
+    }
+  }
+`;

package/src/components/Stepper/components/Step/components/StepIcon/components/CompletedIcon/completedIcon.tsx

@@ -0,0 +1,20 @@
+import { stepIconClasses } from "@mui/material";
+import React from "react";
+import { TestIdProps } from "../../../../../../../types";
+import { StyledSvgIcon } from "./completedIcon.styles";
+import { SVG_ICON_PROPS } from "./contants";
+
+export const CompletedIcon = ({ testId }: TestIdProps): JSX.Element => {
+  return (
+    <StyledSvgIcon
+      {...SVG_ICON_PROPS}
+      className={stepIconClasses.completed}
+      data-testid={testId}
+    >
+      <path
+        d="M7.18129 13.1814C7.08109 13.1814 6.98419 13.1625 6.89059 13.1247C6.79699 13.0875 6.7064 13.0251 6.61879 12.9375L3.44989 9.7686C3.2999 9.61857 3.22819 9.42813 3.23479 9.1971C3.24079 8.96551 3.3188 8.77471 3.46879 8.6247C3.61879 8.47471 3.80629 8.3997 4.03129 8.3997C4.25629 8.3997 4.4438 8.47471 4.59379 8.6247L7.21909 11.25L13.4255 5.0436C13.5755 4.89361 13.7597 4.8186 13.9781 4.8186C14.1971 4.8186 14.3816 4.89361 14.5316 5.0436C14.6816 5.19361 14.7566 5.37811 14.7566 5.5971C14.7566 5.81551 14.6816 5.99971 14.5316 6.1497L7.74379 12.9375C7.65619 13.0251 7.56559 13.0875 7.47199 13.1247C7.37839 13.1625 7.2815 13.1814 7.18129 13.1814Z"
+        fill="currentColor"
+      />
+    </StyledSvgIcon>
+  );
+};

package/src/components/Stepper/components/Step/components/StepIcon/components/CompletedIcon/contants.ts

@@ -0,0 +1,6 @@
+import { SvgIconProps } from "@mui/material";
+
+export const SVG_ICON_PROPS: SvgIconProps = {
+  fontSize: "small",
+  viewBox: "0 0 18 18",
+};

package/src/components/Stepper/components/Step/components/StepIcon/constants.ts

@@ -0,0 +1 @@
+export const STEP_ICON_TEST_ID = "step-icon";

package/src/components/Stepper/components/Step/components/StepIcon/stepIcon.styles.ts

@@ -0,0 +1,32 @@
+import styled from "@emotion/styled";
+import { StepIcon } from "@mui/material";
+import {
+  inkLight,
+  primaryMain,
+  smokeDark,
+} from "../../../../../../styles/common/mixins/colors";
+
+export const StyledStepIcon = styled(StepIcon)`
+  &.MuiSvgIcon-root {
+    border: 2px solid ${smokeDark};
+    border-radius: 50%;
+    color: transparent;
+    height: 32px;
+    width: 32px;
+
+    .MuiStepIcon-text {
+      fill: ${inkLight};
+      font-size: 13px;
+      font-weight: 600;
+      line-height: 24px;
+    }
+
+    &.Mui-active {
+      border-color: ${primaryMain};
+
+      .MuiStepIcon-text {
+        fill: ${primaryMain};
+      }
+    }
+  }
+`;

package/src/components/Stepper/components/Step/components/StepIcon/stepIcon.tsx

@@ -0,0 +1,21 @@
+import { StepIconProps } from "@mui/material";
+import React from "react";
+import { TestIdProps } from "../../../../../types";
+import { CompletedIcon } from "./components/CompletedIcon/completedIcon";
+import { StyledStepIcon } from "./stepIcon.styles";
+
+export const StepIcon = ({
+  completed,
+  icon,
+  testId,
+  ...props
+}: StepIconProps & TestIdProps): JSX.Element => {
+  return (
+    <StyledStepIcon
+      completed={completed}
+      data-testid={testId}
+      icon={completed ? <CompletedIcon testId={testId} /> : icon}
+      {...props}
+    />
+  );
+};

package/src/components/Stepper/components/Step/components/StepIcon/stories/stepIcon.stories.tsx

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import React, { Fragment } from "react";
+import { StepIcon } from "../stepIcon";
+
+const meta: Meta<typeof StepIcon> = {
+  component: StepIcon,
+  decorators: [
+    (Story, context): JSX.Element => (
+      <div style={{ display: "grid", gap: 24 }}>
+        <Story {...context} />
+      </div>
+    ),
+  ],
+  title: "Components/Stepper/StepIcon",
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Active: Story = {
+  args: {
+    active: true,
+    completed: false,
+    icon: 1,
+  },
+};
+
+export const Completed: Story = {
+  args: {
+    active: false,
+    completed: true,
+    icon: 1,
+  },
+};
+
+export const Default: Story = {
+  args: {
+    active: false,
+    completed: false,
+    icon: 1,
+  },
+};
+
+export const AllStates: Story = {
+  render: () => (
+    <Fragment>
+      <StepIcon active={false} completed={false} icon={1} />
+      <StepIcon active={true} completed={false} icon={2} />
+      <StepIcon active={false} completed={true} icon={3} />
+    </Fragment>
+  ),
+};

package/src/components/Stepper/components/Step/components/StepLabel/components/Label/components/Icon/constants.ts

@@ -0,0 +1,14 @@
+import { Info } from "@mui/icons-material";
+import { SvgIconProps, TooltipProps } from "@mui/material";
+import { SVG_ICON_PROPS as MUI_SVG_ICON_PROPS } from "../../../../../../../../../../styles/common/mui/svgIcon";
+
+export const SVG_ICON_PROPS: SvgIconProps = {
+  color: MUI_SVG_ICON_PROPS.COLOR.INK_LIGHT,
+  component: Info,
+  fontSize: MUI_SVG_ICON_PROPS.FONT_SIZE.XSMALL,
+};
+
+export const TOOLTIP_PROPS: Omit<TooltipProps, "children" | "title"> = {
+  disableInteractive: true,
+  slotProps: { tooltip: { sx: { maxWidth: 196, textAlign: "center" } } },
+};

package/src/components/Stepper/components/Step/components/StepLabel/components/Label/components/Icon/icon.tsx

@@ -0,0 +1,13 @@
+import { SvgIcon, Tooltip } from "@mui/material";
+import React from "react";
+import { SVG_ICON_PROPS, TOOLTIP_PROPS } from "./constants";
+import { IconProps } from "./types";
+
+export const Icon = ({ slotProps }: IconProps): JSX.Element | null => {
+  if (!slotProps?.tooltip?.title) return null;
+  return (
+    <Tooltip {...TOOLTIP_PROPS} {...slotProps?.tooltip}>
+      <SvgIcon {...SVG_ICON_PROPS} {...slotProps?.svgIcon} />
+    </Tooltip>
+  );
+};

package/src/components/Stepper/components/Step/components/StepLabel/components/Label/components/Icon/stories/contants.ts

@@ -0,0 +1,6 @@
+import { ComponentProps } from "react";
+import { Icon } from "../icon";
+
+export const DISABLED_CONTROLS: (keyof ComponentProps<typeof Icon>)[] = [
+  "slotProps",
+];

package/src/components/Stepper/components/Step/components/StepLabel/components/Label/components/Icon/stories/icon.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ComponentProps } from "react";
+import { CONTROL_TYPE } from "../../../../../../../../../../../storybook/controls/types";
+import { configureControls } from "../../../../../../../../../../../storybook/controls/utils";
+import { LOREM_IPSUM } from "../../../../../../../../../../../storybook/loremIpsum";
+import { Icon } from "../icon";
+import { DISABLED_CONTROLS } from "./contants";
+
+const meta: Meta<typeof Icon> = {
+  argTypes: configureControls<ComponentProps<typeof Icon>>(
+    DISABLED_CONTROLS,
+    CONTROL_TYPE.DISABLED
+  ),
+  component: Icon,
+  title: "Components/Stepper/StepLabel/Icon",
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    slotProps: {
+      tooltip: {
+        title: LOREM_IPSUM.SHORT,
+      },
+    },
+  },
+};

package/src/components/Stepper/components/Step/components/StepLabel/components/Label/components/Icon/types.ts

@@ -0,0 +1,8 @@
+import { SvgIconProps, TooltipProps } from "@mui/material";
+
+export interface IconProps {
+  slotProps?: {
+    svgIcon?: SvgIconProps;
+    tooltip?: Omit<TooltipProps, "children">;
+  };
+}

package/src/components/Stepper/components/Step/components/StepLabel/components/Label/constants.ts

@@ -0,0 +1,8 @@
+import { TypographyProps } from "@mui/material";
+import { TYPOGRAPHY_PROPS as MUI_TYPOGRAPHY_PROPS } from "../../../../../../../../styles/common/mui/typography";
+
+export const TYPOGRAPHY_PROPS: TypographyProps = {
+  color: MUI_TYPOGRAPHY_PROPS.COLOR.INK_MAIN,
+  component: "div",
+  variant: MUI_TYPOGRAPHY_PROPS.VARIANT.TEXT_HEADING_XSMALL,
+};

package/src/components/Stepper/components/Step/components/StepLabel/components/Label/label.styles.ts

@@ -0,0 +1,8 @@
+import styled from "@emotion/styled";
+import { Typography } from "@mui/material";
+
+export const StyledTypography = styled(Typography)`
+  align-items: center;
+  display: flex;
+  gap: 4px;
+`;

package/src/components/Stepper/components/Step/components/StepLabel/components/Label/label.tsx

@@ -0,0 +1,10 @@
+import { TypographyProps } from "@mui/material";
+import React from "react";
+import { TYPOGRAPHY_PROPS } from "./constants";
+import { StyledTypography } from "./label.styles";
+
+export const Label = ({
+  ...props /* MuiTypographyProps */
+}: TypographyProps): JSX.Element => {
+  return <StyledTypography {...TYPOGRAPHY_PROPS} {...props} />;
+};

package/src/components/Stepper/components/Step/components/StepLabel/components/Label/stories/label.stories.tsx

@@ -0,0 +1,31 @@
+import { composeStories, type Meta, type StoryObj } from "@storybook/react";
+import React from "react";
+import * as stories from "../components/Icon/stories/icon.stories";
+import { Label } from "../label";
+
+const { Default: Icon } = composeStories(stories);
+
+const meta: Meta<typeof Label> = {
+  component: Label,
+  parameters: { controls: { disable: true } },
+  title: "Components/Stepper/StepLabel/Label",
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: { children: "Annotation Files" },
+};
+
+export const WithIcon: Story = {
+  args: {
+    children: (
+      <>
+        Annotation Files
+        <Icon />
+      </>
+    ),
+  },
+};

package/src/components/Stepper/components/Step/components/StepLabel/components/Optional/constants.ts

@@ -0,0 +1,7 @@
+import { TypographyProps } from "@mui/material";
+import { TYPOGRAPHY_PROPS as MUI_TYPOGRAPHY_PROPS } from "../../../../../../../../styles/common/mui/typography";
+
+export const TYPOGRAPHY_PROPS: TypographyProps = {
+  color: MUI_TYPOGRAPHY_PROPS.COLOR.INK_LIGHT,
+  variant: MUI_TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_400,
+};

package/src/components/Stepper/components/Step/components/StepLabel/components/Optional/optional.tsx

@@ -0,0 +1,9 @@
+import { Typography, TypographyProps } from "@mui/material";
+import React from "react";
+import { TYPOGRAPHY_PROPS } from "./constants";
+
+export const Optional = ({
+  ...props /* MuiTypographyProps */
+}: TypographyProps): JSX.Element => {
+  return <Typography {...TYPOGRAPHY_PROPS} {...props} />;
+};

package/src/components/Stepper/components/Step/components/StepLabel/constants.ts

@@ -0,0 +1,10 @@
+import { StepLabelProps } from "@mui/material";
+import { StepIcon } from "../StepIcon/stepIcon";
+import { Label } from "./components/Label/label";
+
+export const STEP_LABEL_PROPS: StepLabelProps = {
+  slots: {
+    label: Label,
+    stepIcon: StepIcon,
+  },
+};

package/src/components/Stepper/components/Step/components/StepLabel/stepLabel.styles.ts

@@ -0,0 +1,13 @@
+import styled from "@emotion/styled";
+import { StepLabel } from "@mui/material";
+
+export const StyledStepLabel = styled(StepLabel)`
+  .MuiStepLabel-iconContainer {
+    padding-right: 16px;
+  }
+
+  .MuiStepLabel-labelContainer {
+    display: grid;
+    gap: 4px;
+  }
+`;

package/src/components/Stepper/components/Step/components/StepLabel/stepLabel.tsx

@@ -0,0 +1,10 @@
+import { StepLabelProps } from "@mui/material";
+import React from "react";
+import { STEP_LABEL_PROPS } from "./constants";
+import { StyledStepLabel } from "./stepLabel.styles";
+
+export const StepLabel = ({
+  ...props /* MuiStepLabelProps */
+}: StepLabelProps): JSX.Element => {
+  return <StyledStepLabel {...STEP_LABEL_PROPS} {...props} />;
+};

package/src/components/Stepper/components/Step/components/StepLabel/stories/contants.ts

@@ -0,0 +1,19 @@
+import { ComponentProps } from "react";
+import { MUI_CONTROLS } from "../../../../../../../storybook/controls/constants";
+import { StepLabel } from "../stepLabel";
+
+export const DISABLED_CONTROLS: (keyof ComponentProps<typeof StepLabel>)[] = [
+  ...MUI_CONTROLS,
+  "children",
+  "error",
+  "icon",
+  "optional",
+  "slotProps",
+  "slots",
+];
+
+export const EXCLUDED_CONTROLS: (keyof ComponentProps<typeof StepLabel>)[] = [
+  "componentsProps", // deprecated
+  "StepIconComponent", // deprecated
+  "StepIconProps", // deprecated
+];

package/src/components/Stepper/components/Step/components/StepLabel/stories/stepLabel.stories.tsx

@@ -0,0 +1,48 @@
+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 * as stories from "../components/Label/stories/label.stories";
+import { Optional } from "../components/Optional/optional";
+import { StepLabel } from "../stepLabel";
+import { DISABLED_CONTROLS, EXCLUDED_CONTROLS } from "./contants";
+
+const { Default: Label, WithIcon: LabelWithIcon } = composeStories(stories);
+
+const meta: Meta<typeof StepLabel> = {
+  argTypes: configureControls<ComponentProps<typeof StepLabel>>(
+    DISABLED_CONTROLS,
+    CONTROL_TYPE.DISABLED
+  ),
+  component: StepLabel,
+  parameters: { controls: { exclude: EXCLUDED_CONTROLS } },
+  title: "Components/Stepper/StepLabel",
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Active: Story = {
+  args: {
+    children: <LabelWithIcon />,
+    icon: 1,
+    slotProps: { stepIcon: { active: true } },
+  },
+};
+
+export const Completed: Story = {
+  args: {
+    children: <LabelWithIcon />,
+    icon: 1,
+    optional: <Optional>3 files selected</Optional>,
+    slotProps: { stepIcon: { completed: true } },
+  },
+};
+
+export const Default: Story = {
+  args: {
+    children: <Label />,
+    icon: 1,
+  },
+};

package/src/components/Stepper/components/Step/constants.ts

@@ -0,0 +1,6 @@
+import { StepProps } from "@mui/material";
+import { FluidPaper } from "../../../common/Paper/paper.styles";
+
+export const STEP_PROPS: StepProps = {
+  component: FluidPaper,
+};

package/src/components/Stepper/components/Step/step.styles.ts

@@ -0,0 +1,33 @@
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { Step } from "@mui/material";
+import { smokeLightest, white } from "../../../../styles/common/mixins/colors";
+import { sectionPadding } from "../../../common/Section/section.styles";
+
+export const StyledStep = styled(Step)`
+  &.MuiStep-root {
+    &.MuiStep-vertical {
+      background-color: ${smokeLightest};
+
+      .MuiStepLabel-root {
+        ${sectionPadding};
+      }
+
+      .MuiStepContent-root {
+        border: none;
+        margin: 0;
+        padding: 0;
+      }
+
+      &.Mui-completed {
+        background-color: ${white};
+      }
+
+      ${(props) =>
+        props.active &&
+        css`
+          background-color: ${white(props)};
+        `};
+    }
+  }
+`;

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

@@ -0,0 +1,12 @@
+import { StepProps } from "@mui/material";
+import React from "react";
+import { BaseComponentProps } from "../../../types";
+import { STEP_PROPS } from "./constants";
+import { StyledStep } from "./step.styles";
+
+export const Step = ({
+  className,
+  ...props /* MuiStepProps */
+}: BaseComponentProps & StepProps): JSX.Element => {
+  return <StyledStep {...STEP_PROPS} className={className} {...props} />;
+};

package/src/components/Stepper/components/Step/stories/contants.ts

@@ -0,0 +1,18 @@
+import { ComponentProps } from "react";
+import { MUI_CONTROLS } from "../../../../../storybook/controls/constants";
+import { Step } from "../step";
+
+export const BOOLEAN_CONTROLS: (keyof ComponentProps<typeof Step>)[] = [
+  "active",
+  "completed",
+  "disabled",
+  "expanded",
+  "last",
+];
+
+export const DISABLED_CONTROLS: (keyof ComponentProps<typeof Step>)[] = [
+  ...MUI_CONTROLS,
+  "children",
+  "component",
+  "style",
+];