From 680bb5998060ffaa3e51bbbb87bcd13ca14aeccf Mon Sep 17 00:00:00 2001
From: Yuri Haruta <yuri.haruta@fortanix.com>
Date: Wed, 16 Oct 2024 11:09:22 +0200
Subject: [PATCH] Implement Stepper component

---
 src/assets/icons/_icons.ts                    |  1 +
 src/assets/icons/check.svg                    |  3 +
 .../navigations/Stepper/Stepper.module.scss   | 88 +++++++++++++++++
 .../navigations/Stepper/Stepper.stories.tsx   | 68 +++++++++++++
 .../navigations/Stepper/Stepper.tsx           | 95 +++++++++++++++++++
 5 files changed, 255 insertions(+)
 create mode 100644 src/assets/icons/check.svg
 create mode 100644 src/components/navigations/Stepper/Stepper.module.scss
 create mode 100644 src/components/navigations/Stepper/Stepper.stories.tsx
 create mode 100644 src/components/navigations/Stepper/Stepper.tsx

diff --git a/src/assets/icons/_icons.ts b/src/assets/icons/_icons.ts
index a065710..7ace2d4 100644
--- a/src/assets/icons/_icons.ts
+++ b/src/assets/icons/_icons.ts
@@ -11,6 +11,7 @@ export const icons = {
   'authentication': {},
   'calendar': {},
   'caret-down': {},
+  'check': {},
   'cloud-accounts': {},
   'copy': {},
   'cross': {},
diff --git a/src/assets/icons/check.svg b/src/assets/icons/check.svg
new file mode 100644
index 0000000..7b5f89c
--- /dev/null
+++ b/src/assets/icons/check.svg
@@ -0,0 +1,3 @@
+<svg width="10" height="8" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.70117 8L0.169829 3.93515C-0.0701441 3.6126 -0.0540098 3.13178 0.206864 2.83149C0.467737 2.53121 0.885448 2.51263 1.16567 2.78886L3.70117 5.70742L8.48967 0.195487C8.76989 -0.0807414 9.1876 -0.0621695 9.44847 0.238117C9.70934 0.538403 9.72548 1.01922 9.4855 1.34177L3.70117 8Z" fill="currentColor"/>
+</svg>
diff --git a/src/components/navigations/Stepper/Stepper.module.scss b/src/components/navigations/Stepper/Stepper.module.scss
new file mode 100644
index 0000000..2b13c71
--- /dev/null
+++ b/src/components/navigations/Stepper/Stepper.module.scss
@@ -0,0 +1,88 @@
+/* Copyright (c) Fortanix, Inc.
+|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
+|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+@use '../../../styling/defs.scss' as bk;
+
+@layer baklava.components {
+  .bk-stepper {
+    @include bk.component-base(bk-stepper);
+    
+    &.bk-stepper--horizontal {
+      display: flex;
+      gap: bk.$spacing-9;
+    }
+    
+    &.bk-stepper--vertical {
+      .bk-stepper__item {
+        &:not(:first-child):not(:first-child) {
+          margin-top: bk.$spacing-9;
+      
+          .bk-stepper__item__circle {
+            &::before {
+              position: absolute;
+              content: '';
+              width: 0;
+              height: bk.$spacing-9;
+              top: -42px;
+              left: 50%;
+              border: 0.5px solid #{bk.$theme-stepper-border-disabled};
+            }
+          }
+        }
+      }
+    }
+    
+    .bk-stepper__item {
+      display: flex;
+      align-items: center;
+      color: #{bk.$theme-stepper-text-disabled};
+      cursor: pointer;
+      
+      .bk-stepper__item__circle {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        margin-right: bk.$spacing-3;
+        border: 2px solid #{bk.$theme-stepper-border-disabled};
+        border-radius: 50%;
+        width: 28px;
+        height: 28px;
+        font-weight: bk.$font-weight-bold;
+        font-size: bk.$font-size-m;
+      }
+      
+      .bk-stepper__item__circle__icon {
+        font-size: bk.$font-size-xs;
+      }
+      
+      .bk-stepper__item__title {
+        font-size: bk.$font-size-m;
+      }
+      
+      .bk-stepper__item__optional {
+        margin-left: bk.$spacing-2;
+        font-size: bk.$font-size-xs;
+      }
+             
+      &[aria-selected="true"] {
+        color: #{bk.$theme-stepper-text-selected};
+        
+        .bk-stepper__item__circle {
+          border-color: #{bk.$theme-stepper-border-default};
+          background-color: #{bk.$theme-stepper-background-default};
+          color: #{bk.$theme-stepper-text-selected-number};
+        }
+      }
+      
+      &.bk-stepper__item--checked {
+        color: #{bk.$theme-stepper-text-selected};
+        
+        .bk-stepper__item__circle {
+          border-color: #{bk.$theme-stepper-border-default};
+        }
+      }
+    }
+  }
+}
diff --git a/src/components/navigations/Stepper/Stepper.stories.tsx b/src/components/navigations/Stepper/Stepper.stories.tsx
new file mode 100644
index 0000000..8bea494
--- /dev/null
+++ b/src/components/navigations/Stepper/Stepper.stories.tsx
@@ -0,0 +1,68 @@
+/* Copyright (c) Fortanix, Inc.
+|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
+|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import * as React from 'react';
+
+import { Stepper, Step } from './Stepper.tsx';
+
+
+type StepperArgs = React.ComponentProps<typeof Stepper>;
+type Story = StoryObj<StepperArgs>;
+
+export default {
+  component: Stepper,
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+  },
+  args: {},
+  render: (args) => <Stepper {...args}/>,
+} satisfies Meta<StepperArgs>;
+
+const defaultSteps: Step[] = [1,2,3,4].map(index => { 
+  return {
+    stepKey: `${index}`,
+    title: `Step${index}`,
+    isOptional: index === 4,
+  };
+});
+
+type StepperWithTriggerProps = React.PropsWithChildren<Partial<StepperArgs>>;
+const StepperWithTrigger = (props: StepperWithTriggerProps) => {
+  const { steps = defaultSteps, activeKey, ...stepperContext } = props;
+  const [activeStepKey, setActiveStepKey] = React.useState<string>(activeKey || '1');
+  return (
+    <Stepper
+      onSwitch={setActiveStepKey}
+      activeKey={activeStepKey}
+      steps={steps}
+      {...stepperContext}
+    />
+  );
+};
+
+const BaseStory: Story = {
+  args: {},
+  render: (args) => <StepperWithTrigger {...args} />,
+};
+
+export const Standard: Story = {
+    ...BaseStory,
+  name: 'Standard',
+  args: { ...BaseStory.args },
+};
+
+export const Horizontal: Story = {
+    ...BaseStory,
+  name: 'Horizontal',
+  args: {
+    ...BaseStory.args,
+    direction: 'horizontal',
+  },
+};
+
diff --git a/src/components/navigations/Stepper/Stepper.tsx b/src/components/navigations/Stepper/Stepper.tsx
new file mode 100644
index 0000000..7700790
--- /dev/null
+++ b/src/components/navigations/Stepper/Stepper.tsx
@@ -0,0 +1,95 @@
+/* Copyright (c) Fortanix, Inc.
+|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
+|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import * as React from 'react';
+import { type ClassNameArgument, type ComponentProps, classNames as cx } from '../../../util/componentUtil.ts';
+
+import { Icon } from '../../graphics/Icon/Icon.tsx';
+
+import cl from './Stepper.module.scss';
+
+export { cl as SteppersClassNames };
+
+export type Step = {
+  stepKey: string,
+  title: React.ReactNode,
+  className?: ClassNameArgument,
+  hide?: boolean,
+  isOptional?: boolean,
+};
+
+export type StepperKey = Step['stepKey'];
+
+export type StepperDirection = 'vertical' | 'horizontal';
+
+export type StepperProps = React.PropsWithChildren<ComponentProps<'ul'> & {
+  /** Whether this component should be unstyled. */
+  unstyled?: undefined | boolean,
+  
+  /** Step items. */
+  steps: Step[],
+  
+  /** Active key of step. */
+  activeKey?: string,
+  
+  /** Whether this component should be displayed vertically or horizontally. */
+  direction?: StepperDirection,
+  
+  /** Callback executed when active step is changed. */
+  onSwitch: (stepKey: StepperKey) => void,
+}>;
+/**
+ * A stepper component
+ */
+export const Stepper = (props: StepperProps) => {
+  const { unstyled = false, steps = [], activeKey, direction = 'vertical', onSwitch, ...propsRest } = props;
+  
+  const handleKeyDown = (event: React.KeyboardEvent, stepKey: Step['stepKey']) => {
+    if (event.key === 'Enter') {
+      onSwitch(stepKey);
+    }
+  };
+  
+  return (
+    <ul
+      {...propsRest}
+      className={cx({
+        bk: true,
+        [cl['bk-stepper']]: !unstyled,
+        [cl['bk-stepper--horizontal']]: direction === 'horizontal',
+        [cl['bk-stepper--vertical']]: direction === 'vertical',
+      }, propsRest.className)}
+    >
+      {steps.map((step, index) => {
+        if (step.hide) return null;
+        const isActive = step.stepKey === activeKey;
+        const isChecked = index < steps.findIndex(step => step.stepKey === activeKey);
+        return (
+          <li
+            role="tab"
+            tabIndex={0}
+            aria-selected={isActive ? 'true': 'false'}
+            data-tab={step.stepKey}
+            key={step.stepKey}
+            className={cx({
+              [cl['bk-stepper__item']]: true,
+              [cl['bk-stepper__item--checked']]: isChecked,
+            }, step.className)}
+            onClick={() => { onSwitch(step.stepKey); }}
+            onKeyDown={(event) => { handleKeyDown(event, step.stepKey); }}
+          >
+            <span className={cx(cl['bk-stepper__item__circle'])}>
+              {isChecked
+                ? <Icon icon="check" className={cx(cl['bk-stepper__item__circle__icon'])}/> 
+                : index + 1
+              }
+            </span>
+            <span className={cx(cl['bk-stepper__item__title'])}>{step.title}</span>
+            {step.isOptional && <span className={cx(cl['bk-stepper__item__optional'])}>(Optional)</span>}
+          </li>
+        )
+      })}
+    </ul>
+  );
+};