Merge pull request #128 from buildo/3692848-implement_stepper

#3692848: Implement Stepper

Author: veej

packages/bento-design-system/src/Icons/IconCheckCircleSolid.tsx

@@ -0,0 +1,14 @@
+import { IconProps } from "./IconProps";
+import { svgIconProps } from "./svgIconProps";
+
+export function IconPositive(props: IconProps) {
+  return (
+    <svg {...svgIconProps(props)}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12 24a12 12 0 1 0 0-24 12 12 0 0 0 0 24Zm5.56-13.94a1.5 1.5 0 0 0-2.12-2.12l-4.94 4.939-1.94-1.94a1.5 1.5 0 0 0-2.12 2.121l3 3a1.5 1.5 0 0 0 2.12 0l6-6Z"
+      />
+    </svg>
+  );
+}

packages/bento-design-system/src/Icons/IconPositive.tsx

@@ -1,5 +1,4 @@
 export * from "./IconCheck";
-export * from "./IconCheckCircleSolid";
 export * from "./IconChevronDown";
 export * from "./IconChevronRight";
 export * from "./IconChevronUp";
@@ -9,6 +8,7 @@ export * from "./IconInformative";
 export * from "./IconMinus";
 export * from "./IconNegative";
 export * from "./IconPlaceholder";
+export * from "./IconPositive";
 export * from "./IconProps";
 export * from "./IconSearch";
 export * from "./IconUser";

packages/bento-design-system/src/Icons/index.ts

@@ -0,0 +1,13 @@
+import { FunctionComponent } from "react";
+import { IconProps } from "../Icons";
+import { BentoSprinkles } from "../internal";
+import { LabelProps } from "../Typography/Label/Label";
+
+export type StepperConfig = {
+  spaceBetweenSteps: BentoSprinkles["gap"];
+  internalSpacing: BentoSprinkles["gap"];
+  labelSize: LabelProps["size"];
+  numberSize: LabelProps["size"];
+  labelUppercase: boolean;
+  doneIcon: FunctionComponent<IconProps>;
+};

packages/bento-design-system/src/Stepper/Config.ts

@@ -0,0 +1,44 @@
+import { bentoSprinkles } from "../internal";
+import { strictRecipe } from "../util/strictRecipe";
+
+export const stepRecipe = strictRecipe({
+  variants: {
+    status: {
+      todo: bentoSprinkles({
+        color: "textSecondary",
+      }),
+      inProgress: bentoSprinkles({
+        color: "textInteractive",
+      }),
+      done: bentoSprinkles({
+        color: "textSecondary",
+      }),
+    },
+  },
+});
+
+export const stepIconRecipe = strictRecipe({
+  base: bentoSprinkles({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: 24,
+    height: 24,
+    borderRadius: "circled",
+  }),
+  variants: {
+    status: {
+      todo: bentoSprinkles({
+        background: "backgroundOverlay",
+        color: "textSecondary",
+      }),
+      inProgress: bentoSprinkles({
+        color: "textPrimaryInverse",
+        background: "backgroundInteractive",
+      }),
+      done: bentoSprinkles({
+        color: "foregroundSecondary",
+      }),
+    },
+  },
+});

packages/bento-design-system/src/Stepper/Stepper.css.ts

@@ -0,0 +1,62 @@
+import { Box, Inline } from "../internal";
+import { Label, LocalizedString, unsafeLocalizedString } from "..";
+import { stepIconRecipe, stepRecipe } from "./Stepper.css";
+import { StepperConfig } from "./Config";
+
+type Step = {
+  label: LocalizedString;
+};
+
+type Props = {
+  currentStep: number;
+  steps: Array<Step>;
+};
+
+type StepStatus = "todo" | "inProgress" | "done";
+
+export function createStepper(config: StepperConfig) {
+  return function Stepper({ currentStep, steps }: Props) {
+    return (
+      <Inline space={config.spaceBetweenSteps} alignY="center">
+        {steps.map(({ label }, index) => {
+          const status =
+            index < currentStep ? "done" : index === currentStep ? "inProgress" : "todo";
+          return <Step label={label} index={index} status={status} key={label} />;
+        })}
+      </Inline>
+    );
+  };
+
+  function Step({
+    label,
+    index,
+    status,
+  }: {
+    label: LocalizedString;
+    index: number;
+    status: StepStatus;
+  }) {
+    return (
+      <Box className={stepRecipe({ status })}>
+        <Inline space={config.internalSpacing} alignY="center">
+          <StepIcon status={status} index={index} />
+          <Label size={config.labelSize} uppercase={config.labelUppercase}>
+            {label}
+          </Label>
+        </Inline>
+      </Box>
+    );
+  }
+
+  function StepIcon({ status, index }: { status: StepStatus; index: number }) {
+    return (
+      <Box className={stepIconRecipe({ status })}>
+        {status === "done" ? (
+          config.doneIcon({ size: 24 })
+        ) : (
+          <Label size={config.numberSize}>{unsafeLocalizedString(index + 1)}</Label>
+        )}
+      </Box>
+    );
+  }
+}

packages/bento-design-system/src/Stepper/createStepper.tsx

@@ -39,6 +39,7 @@ export * from "./Placeholder/Placeholder";
 export * from "./Popover/Popover";
 export * from "./ProgressBar/createProgressBar";
 export * from "./SearchBar/createSearchBar";
+export * from "./Stepper/createStepper";
 export * from "./Switch/createSwitch";
 export * from "./Table/createTable";
 export * from "./Tabs/createTabs";

packages/bento-design-system/src/index.ts

@@ -4,7 +4,7 @@ import { AvatarConfig } from "../Avatar/Config";
 import { BannerConfig } from "../Banner/Config";
 import { BreadcrumbConfig } from "../Breadcrumb/Config";
 import {
-  IconCheckCircleSolid,
+  IconPositive,
   IconChevronRight,
   IconClose,
   IconIdea,
@@ -41,6 +41,7 @@ import { TableConfig } from "../Table/Config";
 import { TabsConfig } from "../Tabs/Config";
 import { ToastConfig } from "../Toast/Config";
 import { ProgressBarConfig } from "../ProgressBar/Config";
+import { StepperConfig } from "../Stepper/Config";
 
 export const actions: ActionsConfig = {
   buttonsAlignment: "right",
@@ -71,7 +72,7 @@ export const banner: BannerConfig = {
   closeIcon: IconClose,
   kindIcons: {
     informative: IconInformative,
-    positive: IconCheckCircleSolid,
+    positive: IconPositive,
     warning: IconWarning,
     negative: IconNegative,
     secondary: IconIdea,
@@ -415,3 +416,12 @@ export const progressBar: ProgressBarConfig = {
   radius: "circledX",
   discreteInternalSpacing: 8,
 };
+
+export const stepper: StepperConfig = {
+  spaceBetweenSteps: 40,
+  internalSpacing: 8,
+  labelSize: "large",
+  numberSize: "large",
+  labelUppercase: false,
+  doneIcon: IconPositive,
+};

packages/bento-design-system/src/util/defaultConfigs.tsx

@@ -0,0 +1,20 @@
+import { Stepper } from "../";
+import { createComponentStories, formatMessage } from "../util";
+
+const { defaultExport, createStory } = createComponentStories({
+  component: Stepper,
+  args: {},
+});
+
+export default defaultExport;
+
+export const stepper = createStory({
+  currentStep: 2,
+  steps: [
+    { label: formatMessage("Step 1") },
+    { label: formatMessage("Step 2") },
+    { label: formatMessage("Step 3") },
+    { label: formatMessage("Step 4") },
+    { label: formatMessage("Step 5") },
+  ],
+});

packages/storybook/stories/Components/Stepper.stories.tsx

@@ -21,6 +21,7 @@ import {
   createAvatar,
   createFormLayoutComponents,
   createSearchBar,
+  createStepper,
   createSwitch,
   createFeedback,
   IllustrationNegative,
@@ -135,3 +136,4 @@ export const tableColumn = createTableColumns({ Button, ButtonLink, Chip, Link,
 export const Navigation = createNavigation(defaultConfigs.navigation);
 export const Menu = createMenu(defaultConfigs.menu, { List });
 export const ProgressBar = createProgressBar(defaultConfigs.progressBar);
+export const Stepper = createStepper(defaultConfigs.stepper);