@ssa-ui-kit/core 0.0.1-alpha

package/src/components/StepLabel/StepLabel.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+
+import Icon from '@components/Icon';
+import { useStepperContext } from '@components/Stepper';
+import { useStepContext } from '@components/Step';
+
+import {
+  label,
+  labelIcon,
+  labelIconVertical,
+  labelText,
+  labelTitle,
+} from './styles';
+import { useTheme } from '@emotion/react';
+
+const StepLabel = ({
+  children,
+  StepIcon,
+}: {
+  children?: React.ReactNode;
+  StepIcon?: React.FC<{ index: number; completed: boolean; active: boolean }>;
+}) => {
+  const theme = useTheme();
+  const { orientation, color } = useStepperContext();
+  const { index, active, completed } = useStepContext();
+
+  const styleIcon = orientation === 'vertical' ? labelIconVertical : labelIcon;
+
+  return (
+    <div
+      role="listitem"
+      css={label}
+      style={{
+        flexDirection: orientation === 'vertical' ? 'row' : 'column',
+      }}>
+      <div css={styleIcon}>
+        {/* If user set a custom icon, overwrite default */}
+        {StepIcon ? (
+          <StepIcon index={index} completed={completed} active={completed} />
+        ) : completed ? (
+          <Icon name="check" size={16} color={color} />
+        ) : (
+          <div
+            css={labelTitle(
+              active || completed
+                ? color
+                : (theme.colors.greyLighter as string),
+            )}>
+            <span
+              style={{
+                color:
+                  active || completed ? theme.colors.white : theme.colors.grey,
+              }}>
+              {index + 1}
+            </span>
+          </div>
+        )}
+      </div>
+
+      <div css={labelText}>{children}</div>
+    </div>
+  );
+};
+
+export default StepLabel;

package/src/components/StepLabel/index.ts

@@ -0,0 +1 @@
+export { default } from './StepLabel';

package/src/components/StepLabel/styles.ts

@@ -0,0 +1,38 @@
+import { css } from '@emotion/react';
+
+export const label = css`
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+`;
+export const labelIcon = css`
+  display: flex;
+  height: 22px;
+
+  align-items: center;
+`;
+export const labelIconVertical = css`
+  display: flex;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+
+  width: 24px;
+  height: 24px;
+
+  margin-right: 5px;
+`;
+export const labelText = css`
+  text-align: center;
+`;
+export const labelTitle = (color: string) => css`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: 24px;
+  height: 24px;
+
+  border-radius: 50%;
+  background-color: ${color};
+`;

package/src/components/Stepper/Stepper.context.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+
+import { StepperContextType } from './types';
+
+const StepperContext = React.createContext<StepperContextType>({
+  activeStep: 0,
+  orientation: 'horizontal',
+  color: 'grey',
+  inverted: false,
+});
+
+export function useStepperContext(): StepperContextType {
+  return React.useContext(StepperContext);
+}
+
+export default StepperContext;

package/src/components/Stepper/Stepper.spec.tsx

@@ -0,0 +1,128 @@
+import { Matcher, screen, waitFor, within } from '@testing-library/dom';
+
+import Stepper from './index';
+import Step from '@components/Step';
+import StepLabel from '@components/StepLabel';
+
+const getCheckIcon = async (query: Matcher) => {
+  const item = await screen.findByText(query);
+  const icon = item.parentNode as HTMLElement;
+
+  const checkIcon = await within(icon).queryByTitle(/check/i);
+
+  return checkIcon;
+};
+
+describe('Stepper', () => {
+  it('Default stepper with 1 item check', async () => {
+    const steps = ['itemA', 'itemB'];
+
+    render(
+      <Stepper activeStep={1}>
+        {steps.map((step, index) => {
+          return (
+            <Step key={index}>
+              <StepLabel>{step}</StepLabel>
+            </Step>
+          );
+        })}
+      </Stepper>,
+    );
+
+    await waitFor(async () => {
+      const stepper = await screen.findByTestId('stepper');
+
+      expect(stepper).toHaveStyle('flex-direction: row');
+
+      await screen.findByText(/itemA/i);
+      await screen.findByText(/itemB/i);
+
+      const itemA = await screen.findByText(/itemA/i);
+      const iconA = itemA.parentNode as HTMLElement;
+
+      await within(iconA).findByTitle(/check/i);
+
+      const itemB = await screen.findByText(/itemB/i);
+      const iconB = itemB.parentNode as HTMLElement;
+
+      const checkIconB = await within(iconB).queryByTitle(/check/i);
+
+      expect(checkIconB).not.toBeInTheDocument();
+    });
+  });
+
+  it('Default stepper with no item check', async () => {
+    const steps = ['itemA', 'itemB'];
+
+    render(
+      <Stepper activeStep={0}>
+        {steps.map((step, index) => {
+          return (
+            <Step key={index}>
+              <StepLabel>{step}</StepLabel>
+            </Step>
+          );
+        })}
+      </Stepper>,
+    );
+
+    const checkIconA = await getCheckIcon(/itemA/i);
+
+    expect(checkIconA).not.toBeInTheDocument();
+
+    const checkIconB = await getCheckIcon(/itemB/i);
+
+    expect(checkIconB).not.toBeInTheDocument();
+  });
+
+  it('Vertical stepper with 2 item check', async () => {
+    const steps = ['itemA', 'itemB'];
+
+    render(
+      <Stepper activeStep={1} orientation="vertical">
+        {steps.map((step, index) => {
+          return (
+            <Step key={index}>
+              <StepLabel>{step}</StepLabel>
+            </Step>
+          );
+        })}
+      </Stepper>,
+    );
+
+    await waitFor(async () => {
+      const stepper = await screen.findByTestId('stepper');
+
+      expect(stepper).toHaveStyle('flex-direction: column');
+
+      await screen.findByText(/itemA/i);
+      await screen.findByText(/itemB/i);
+
+      await getCheckIcon(/itemA/i);
+      await getCheckIcon(/itemB/i);
+    });
+  });
+
+  it('Stepper with inverted items', async () => {
+    const steps = ['itemA', 'itemB'];
+
+    render(
+      <Stepper activeStep={1} inverted>
+        {steps.map((step, index) => {
+          return (
+            <Step key={index}>
+              <StepLabel>{step}</StepLabel>
+            </Step>
+          );
+        })}
+      </Stepper>,
+    );
+
+    await waitFor(async () => {
+      const [topItem, bottomItem] = await screen.queryAllByText(/item/i);
+
+      expect(topItem).toHaveTextContent(/itemB/i);
+      expect(bottomItem).toHaveTextContent(/itemA/i);
+    });
+  });
+});

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

@@ -0,0 +1,292 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { css } from '@emotion/react';
+
+import Step from '@components/Step';
+import StepLabel from '@components/StepLabel';
+import Icons from '@components/Icon/icons';
+
+import { StepperProps } from './types';
+import Stepper from './index';
+
+export default {
+  title: 'Components/Stepper',
+  component: Stepper,
+  argTypes: {
+    sx: {
+      control: {
+        disable: true,
+      },
+    },
+    color: {
+      table: {
+        type: {
+          summary: 'string',
+        },
+      },
+    },
+    orientation: {
+      table: {
+        type: {
+          summary: 'string',
+        },
+      },
+      options: ['vertical', 'horizontal'],
+      control: {
+        type: 'select',
+      },
+    },
+  },
+} as Meta<typeof Stepper>;
+
+/*
+ *
+ * EXAMPLE 1
+ * Default horizontal stepper
+ */
+
+export const Horizontal: StoryObj = ({
+  color,
+  activeStep,
+  orientation,
+  inverted,
+}: StepperProps) => {
+  const steps = ['step 1', 'step 2', 'step 3'];
+
+  return (
+    <div style={{ width: '100%' }}>
+      <Stepper
+        activeStep={activeStep}
+        orientation={orientation}
+        color={color}
+        inverted={inverted}>
+        {steps.map((step, index) => {
+          return (
+            <Step key={index}>
+              <StepLabel>{step}</StepLabel>
+            </Step>
+          );
+        })}
+      </Stepper>
+    </div>
+  );
+};
+
+Horizontal.args = {
+  color: 'rgba(117, 153, 222, 1)',
+  activeStep: 0,
+  orientation: 'horizontal',
+  inverted: false,
+};
+Horizontal.storyName = 'Stepper';
+
+/*
+ *
+ * EXAMPLE 2
+ * Vertical stepper
+ */
+
+export const Vertical: StoryObj = ({
+  inverted,
+  color,
+  activeStep,
+  orientation,
+}: StepperProps) => {
+  const steps = ['step 1', 'step 2', 'step 3'];
+
+  return (
+    <div style={{ width: '100%' }}>
+      <Stepper
+        inverted={inverted}
+        activeStep={activeStep}
+        orientation={orientation}
+        color={color}>
+        {steps.map((step, index) => {
+          return (
+            <Step key={index}>
+              <StepLabel>{step}</StepLabel>
+            </Step>
+          );
+        })}
+      </Stepper>
+    </div>
+  );
+};
+
+Vertical.args = {
+  color: 'rgba(82, 197, 135, 1)',
+  activeStep: 1,
+  orientation: 'vertical',
+  inverted: false,
+};
+Vertical.storyName = 'Stepper vertical';
+
+/*
+ *
+ * EXAMPLE 3
+ * Simple customizations
+ */
+
+const CustomStep: React.FC = (props: {
+  index?: number;
+  active?: boolean;
+  completed?: boolean;
+}) => {
+  const { active, completed } = props;
+
+  return (
+    <div
+      css={css`
+        width: 10px;
+        height: 10px;
+        background-color: ${active || completed ? '#52c587' : '#e0e0e0'};
+        border-radius: 50%;
+      `}></div>
+  );
+};
+
+export const Custom: StoryObj = ({
+  inverted,
+  color,
+  activeStep,
+  orientation,
+}: StepperProps) => {
+  const steps = ['step 1', 'step 2', 'step 3'];
+
+  return (
+    <div style={{ width: '100%' }}>
+      <Stepper
+        inverted={inverted}
+        activeStep={activeStep}
+        orientation={orientation}
+        color={color}
+        sx={{
+          rowGap: 0,
+        }}>
+        {steps.map((step, index) => {
+          return (
+            <Step key={index}>
+              <StepLabel StepIcon={CustomStep}>{step}</StepLabel>
+            </Step>
+          );
+        })}
+      </Stepper>
+    </div>
+  );
+};
+
+Custom.args = {
+  color: 'rgba(82, 197, 135, 1)',
+  activeStep: 1,
+  orientation: 'vertical',
+  inverted: false,
+};
+Custom.storyName = 'Stepper custom';
+
+/*
+ *
+ * EXAMPLE 4
+ * Custom Icons and Connector
+ */
+
+const CustomStepIcons: React.FC = (props: {
+  index?: number;
+  active?: boolean;
+  completed?: boolean;
+}) => {
+  const { index, active, completed } = props;
+
+  const customContainer = css`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    background-color: ${active || completed ? '#52c587' : '#e0e0e0'};
+  `;
+  const getColor = () => (active || completed ? '#fff' : 'grey');
+
+  switch (index) {
+    case 0:
+      return (
+        <div css={customContainer}>
+          <Icons name="calendar" color={getColor()} size={12} />
+        </div>
+      );
+    case 1:
+      return (
+        <div css={customContainer}>
+          <Icons name="settings" color={getColor()} size={12} />
+        </div>
+      );
+    case 2:
+      return (
+        <div css={customContainer}>
+          <Icons name="notification" color={getColor()} size={12} />
+        </div>
+      );
+    default:
+      return null;
+  }
+};
+
+const CustomConnector = ({
+  active,
+  completed,
+}: {
+  active?: boolean;
+  completed?: boolean;
+}) => {
+  return (
+    <div
+      css={css`
+        flex: 1 1 auto;
+        margin-left: calc(12px - 1px);
+      `}>
+      <span
+        css={css`
+          display: block;
+          border-color: ${active || completed
+            ? 'rgba(82, 197, 135, 1)'
+            : 'grey'};
+          border-left-style: dashed;
+          border-left-width: 2px;
+          min-height: 30px;
+        `}></span>
+    </div>
+  );
+};
+
+export const CustomIcons: StoryObj = ({
+  inverted,
+  activeStep,
+}: StepperProps) => {
+  const steps = ['step 1', 'step 2', 'step 3'];
+
+  return (
+    <div style={{ width: '100%' }}>
+      <Stepper
+        orientation="vertical"
+        inverted={inverted}
+        activeStep={activeStep}
+        color="rgba(82, 197, 135, 1)">
+        {steps.map((step, index) => {
+          return (
+            <Step key={index} Connector={CustomConnector}>
+              <StepLabel StepIcon={CustomStepIcons}>{step}</StepLabel>
+            </Step>
+          );
+        })}
+      </Stepper>
+    </div>
+  );
+};
+
+CustomIcons.args = {
+  activeStep: 1,
+  inverted: false,
+};
+CustomIcons.parameters = {
+  controls: { disable: true },
+};
+CustomIcons.storyName = 'Stepper custom icons';

package/src/components/Stepper/Stepper.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { css } from '@emotion/react';
+
+import { StepperContextType, StepperProps } from './types';
+import { StepperContext } from '.';
+
+const Stepper = ({
+  activeStep = 0,
+  orientation = 'horizontal',
+  color = '#4178e1',
+  inverted = false,
+  children,
+  sx,
+}: StepperProps) => {
+  const childrenArray = React.Children.toArray(children).filter(Boolean);
+
+  if (inverted) {
+    childrenArray.reverse();
+  }
+
+  const steps = (childrenArray as React.ReactElement[]).map((child, index) => {
+    return React.cloneElement(child, {
+      index: inverted ? childrenArray.length - index - 1 : index,
+      ...child.props,
+    });
+  });
+
+  const contextValue: StepperContextType = React.useMemo(
+    () => ({ activeStep, orientation, color, inverted }),
+    [activeStep, orientation, color, inverted],
+  );
+
+  return (
+    <StepperContext.Provider value={contextValue}>
+      <div
+        data-testid="stepper"
+        css={css`
+          display: flex;
+          flex-direction: ${orientation === 'vertical' ? 'column' : 'row'};
+          row-gap: 8px;
+        `}
+        style={{ ...sx }}>
+        {steps}
+      </div>
+    </StepperContext.Provider>
+  );
+};
+
+export default Stepper;

package/src/components/Stepper/index.ts

@@ -0,0 +1,5 @@
+export { default } from './Stepper';
+export {
+  default as StepperContext,
+  useStepperContext,
+} from './Stepper.context';

package/src/components/Stepper/types.ts

@@ -0,0 +1,17 @@
+export interface StepperProps {
+  activeStep?: number;
+  orientation?: 'horizontal' | 'vertical';
+  color?: string;
+  inverted?: boolean;
+  sx?: React.CSSProperties;
+  children:
+    | React.ReactElement<React.PropsWithChildren>[]
+    | React.ReactElement<React.PropsWithChildren>;
+}
+
+export interface StepperContextType {
+  activeStep: number;
+  orientation: 'horizontal' | 'vertical';
+  color: string;
+  inverted?: boolean;
+}