SELF-243: Add Steps Component (#472)

* feat: add icon button

* feat: add steps component

* refactor: Ken PR review

CHANGELOG.md

@@ -2,6 +2,16 @@
 
 ## v2.0.32
 
+- Add `<Steps />` component
+- Adds the icons:
+  - `Back`
+  - `CampaignAutomated`
+  - `CampaignOneTime`
+  - `Next`
+  - `Success`
+
+## v2.0.32
+
 - Add `<IconButton />` component
 
 ## v2.0.31
@@ -25,7 +35,7 @@
 
 ## v2.0.29
 
-- Make `PrimeVue` and external dependency
+- Make `PrimeVue` an external dependency
 
 ## v2.0.28
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lob/ui-components",
-  "version": "2.0.32",
+  "version": "2.0.33",
   "engines": {
     "node": ">=20.2.0",
     "npm": ">=10.2.0"

src/components/Icon/types.ts

@@ -13,10 +13,13 @@ export const IconName = {
   APP_WINDOWS: 'AppWindows',
   ARROW_DOWN_TO_LINE: 'ArrowDownToLine',
   ARROW_TREND_UP: 'ArrowTrendUp',
+  BACK: 'Back',
   BANK_ACCOUNT: 'BankAccount',
   BARS: 'Bars',
   BELL: 'Bell',
   BULLHORN: 'Bullhorn',
+  CAMPAIGN_AUTOMATED: 'CampaignAutomated',
+  CAMPAIGN_ONE_TIME: 'CampaignOneTime',
   CAR: 'Car',
   CIRCLE_CHECK: 'CircleCheck',
   CIRCLE_CLOSE: 'CircleClose',
@@ -41,6 +44,7 @@ export const IconName = {
   LIGHTNING: 'Lightning',
   LOCATION_PIN: 'LocationPin',
   MONEY_BILL: 'MoneyBill',
+  NEXT: 'Next',
   OPEN_BOOK: 'OpenBook',
   PIE_CHART_SLICE: 'PieChartSlice',
   PLAN_BUSINESS: 'PlanBusiness',
@@ -51,6 +55,7 @@ export const IconName = {
   PLAN_STARTUP: 'PlanStartup',
   PLUS: 'Plus',
   SIGNAL: 'Signal',
+  SUCCESS: 'Success',
   TRIANGLE_EXCLAMATION: 'TriangleExclamation',
   USER: 'User',
   USERS: 'Users',

src/components/IconButton/IconButton.vue

@@ -22,7 +22,7 @@
 import Icon from '@/components/Icon/Icon.vue';
 import { IconName } from '@/components/Icon/types';
 import { Size } from '@/types';
-import ConditionalWrapper from '@/components/ConditionalWrapper.vue';
+import ConditionalWrapper from '@/utils/ConditionalWrapper.vue';
 import Button from 'primevue/button';
 import { AnchorHTMLAttributes, computed, defineOptions } from 'vue';
 

src/components/IconButton/__tests__/IconButton.spec.ts

@@ -1,13 +1,31 @@
 import '@testing-library/jest-dom';
-import { IconName } from '@/main';
+import {
+  IconButtonColor,
+  IconButtonSize,
+  IconButtonVariant,
+  IconName
+} from '@/main';
 import { render } from '@testing-library/vue';
 
 import IconButton from '../IconButton.vue';
 
 describe('IconButton', () => {
-  it('renders', () => {
+  it.each([
+    { icon: IconName.APP_WINDOWS, size: IconButtonSize.SM },
+    { icon: IconName.APP_WINDOWS, size: IconButtonSize.MD },
+    { icon: IconName.APP_WINDOWS, size: IconButtonSize.LG },
+    { icon: IconName.APP_WINDOWS, size: IconButtonSize.XL },
+    { icon: IconName.APP_WINDOWS, color: IconButtonColor.ERROR },
+    { icon: IconName.APP_WINDOWS, color: IconButtonColor.INFO },
+    { icon: IconName.APP_WINDOWS, color: IconButtonColor.NEUTRAL },
+    { icon: IconName.APP_WINDOWS, color: IconButtonColor.SUCCESS },
+    { icon: IconName.APP_WINDOWS, color: IconButtonColor.UPGRADE },
+    { icon: IconName.APP_WINDOWS, color: IconButtonColor.WARNING },
+    { icon: IconName.APP_WINDOWS, variant: IconButtonVariant.OUTLINED },
+    { icon: IconName.APP_WINDOWS, variant: IconButtonVariant.PRIMARY }
+  ])('renders', (props) => {
     const { getByTestId } = render(IconButton, {
-      props: { icon: IconName.APP_WINDOWS }
+      props
     });
     expect(getByTestId('uic-icon-button')).toBeVisible();
   });

src/components/Steps/Steps.mdx

@@ -0,0 +1,10 @@
+import { Canvas, ArgTypes, PRIMARY_STORY } from '@storybook/addon-docs';
+import { Primary } from './Steps.stories';
+
+# Steps
+
+<Canvas of={Primary} />
+
+## Props
+
+<ArgTypes story={PRIMARY_STORY} />

src/components/Steps/Steps.stories.ts

@@ -0,0 +1,26 @@
+import { Meta, StoryObj } from '@storybook/vue3';
+import mdx from './Steps.mdx';
+// @ts-ignore No types from Vue file
+import Steps from './Steps.vue';
+
+const meta: Meta<typeof Steps> = {
+  title: 'Components/Steps',
+  component: Steps,
+  parameters: {
+    docs: {
+      page: mdx
+    }
+  }
+};
+
+export default meta;
+
+export const Primary: StoryObj<typeof Steps> = {
+  args: {
+    items: [
+      { label: 'Step 1', status: 'success' },
+      { label: 'Step 2' },
+      { label: 'Step 3' }
+    ]
+  }
+};

src/components/Steps/Steps.vue

@@ -0,0 +1,119 @@
+<template>
+  <Steps
+    v-model:activeStep="activeStep"
+    :model="primeVueItems"
+    :pt="{ menu: { class: 'uic-steps-menu' } }"
+    :readonly="false"
+    data-testid="uic-steps"
+  >
+    <template #item="{ active, index, label }">
+      <span :class="['uic-steps-action', { active }]">
+        <span :class="['uic-steps-step', { icon: Boolean(stepIcons[index]) }]">
+          <Icon
+            v-if="stepIcons[index]"
+            :icon="stepIcons[index]"
+            data-testid="uic-steps-icon"
+          />
+          <template v-else>
+            {{ index + 1 }}
+          </template>
+        </span>
+        <span class="uic-steps-label">{{ label }}</span>
+        <Transition>
+          <span v-if="active" class="uic-steps-active-indicator" />
+        </Transition>
+      </span>
+    </template>
+  </Steps>
+</template>
+
+<script setup lang="ts">
+import Steps, { StepsProps } from 'primevue/steps';
+import { computed, defineModel } from 'vue';
+
+import { Icon, IconName } from '../Icon';
+import { StepItem } from './types';
+
+const props = withDefaults(
+  defineProps<{
+    items: StepItem[];
+    readonly?: boolean;
+  }>(),
+  {
+    readonly: false
+  }
+);
+
+const activeStep = defineModel<number>('activeStep', { default: 0 });
+
+const primeVueItems = computed<StepsProps['model']>(() => {
+  return props.items.map((item) => ({
+    label: item.label
+  }));
+});
+
+const stepIcons = computed<Record<number, IconName>>(() => {
+  const icons: Record<number, IconName> = {};
+
+  props.items.forEach((item, index) => {
+    if (item.status === 'success') {
+      icons[index] = IconName.SUCCESS;
+    }
+  });
+
+  return icons;
+});
+</script>
+
+<style lang="scss">
+.uic-steps-menu {
+  @apply flex gap-12;
+}
+.uic-steps-action {
+  @apply relative;
+  @apply cursor-pointer;
+  @apply flex gap-2 items-center;
+  @apply py-4;
+}
+.uic-steps-label {
+  @apply type-small-600 text-gray-600;
+  @apply transition-colors;
+
+  .active & {
+    @apply text-upgrade;
+  }
+}
+.uic-steps-step {
+  @apply flex items-center justify-center;
+  @apply w-5 h-5 rounded-full;
+  @apply bg-gray-50;
+  @apply type-xs-600 text-gray-600;
+  @apply transition-colors;
+
+  .active & {
+    @apply bg-transparent;
+    @apply border border-upgrade;
+    @apply text-upgrade;
+  }
+
+  &.icon {
+    @apply bg-upgrade;
+    @apply text-white;
+    @apply border-none;
+  }
+}
+.uic-steps-active-indicator {
+  @apply absolute bottom-0 left-0 right-0;
+  @apply bg-upgrade h-[2px];
+
+  &.v-enter-active,
+  &.v-leave-active {
+    transition: opacity 0.25s ease-in-out;
+  }
+
+  &.v-enter-from,
+  &.v-leave-to {
+    opacity: 0;
+  }
+}
+</style>

src/components/Steps/__tests__/Steps.spec.ts

@@ -0,0 +1,42 @@
+import '@testing-library/jest-dom';
+import { render, within } from '@testing-library/vue';
+
+import Steps from '../Steps.vue';
+
+type PropsType = InstanceType<typeof Steps>['$props'];
+
+const DEFAULT_PROPS: PropsType = {
+  items: [{ label: 'Step 1' }, { label: 'Step 2' }, { label: 'Step 3' }]
+};
+
+describe('Steps', () => {
+  let props: PropsType;
+
+  beforeEach(() => {
+    props = { ...DEFAULT_PROPS };
+  });
+
+  it('renders', () => {
+    const { getByTestId } = render(Steps, { props });
+
+    const steps = getByTestId('uic-steps');
+    expect(steps).toBeVisible();
+    const { getByText: stepsGetByText } = within(steps);
+    expect(stepsGetByText('Step 1')).toBeVisible();
+    expect(stepsGetByText('Step 2')).toBeVisible();
+    expect(stepsGetByText('Step 3')).toBeVisible();
+  });
+
+  it('renders icons with statuses', async () => {
+    props = {
+      ...props,
+      items: [
+        { label: 'Step 1', status: 'success' },
+        { label: 'Step 2' },
+        { label: 'Step 3' }
+      ]
+    };
+    const { findByTestId } = render(Steps, { props });
+    expect(await findByTestId('uic-steps-icon')).toBeVisible();
+  });
+});

src/components/Steps/constants.ts

@@ -0,0 +1,4 @@
+export const StepsStatus = {
+  SUCCESS: 'success'
+} as const;
+export type StepsStatus = (typeof StepsStatus)[keyof typeof StepsStatus];

src/components/Steps/index.ts

@@ -0,0 +1,3 @@
+export * from './constants';
+export { default as Steps } from './Steps.vue';
+export * from './types';

src/components/Steps/types.ts

@@ -0,0 +1,6 @@
+import { StepsStatus } from './constants';
+
+export interface StepItem {
+  label: string;
+  status?: StepsStatus;
+}

src/main.ts

@@ -25,11 +25,12 @@ const ComponentLibrary = {
 
 // TODO Utilize the components export but first we will have to remove global usage.
 export * from './components/Badge';
+export * from './components/ColorPicker';
 export * from './components/Icon';
 export * from './components/IconButton';
-export * from './components/Modal';
 export * from './components/ImageFileUpload';
-export * from './components/ColorPicker';
+export * from './components/Modal';
+export * from './components/Steps';
 
 export default ComponentLibrary;