feat(Wizard): add isCompleted to WizardStep

kiwicom · Aug 13, 2023 · aff00ae · aff00ae
1 parent fb2c88a
commit aff00ae
Show file tree

Hide file tree

Showing 7 changed files with 23 additions and 36 deletions.
diff --git a/packages/orbit-components/src/Wizard/CheckCircle.tsx b/packages/orbit-components/src/Wizard/CheckCircle.tsx
diff --git a/packages/orbit-components/src/Wizard/README.md b/packages/orbit-components/src/Wizard/README.md
@@ -36,7 +36,8 @@ Then use `Wizard` as the container for multiple `WizardStep`s:
 
 ## WizardStep props
 
-| Name      | Type                            | Default | Description                         |
-| :-------- | :------------------------------ | :------ | :---------------------------------- |
-| `title`   | `string`                        |         | Name of the step.                   |
-| `onClick` | `event => void \| Promise<any>` |         | Function which handles click event. |
+| Name          | Type                            | Default | Description                         |
+| :------------ | :------------------------------ | :------ | :---------------------------------- |
+| `title`       | `string`                        |         | Name of the step.                   |
+| `onClick`     | `event => void \| Promise<any>` |         | Function which handles click event. |
+| `isCompleted` | `boolean`                       |         | Marks current step as completed.    |
diff --git a/packages/orbit-components/src/Wizard/Wizard.stories.tsx b/packages/orbit-components/src/Wizard/Wizard.stories.tsx
@@ -20,16 +20,17 @@ export const Default = () => {
     <Wizard
       id="wizard"
       direction={direction}
-      completedSteps={3}
-      activeStep={3}
+      completedSteps={2}
+      activeStep={1}
       labelClose={labelClose}
-      labelProgress={`3 ${labelProgress} 3`}
+      labelProgress={`2 ${labelProgress} 6`}
       onChangeStep={action("onChangeStep")}
     >
       <WizardStep title="Search" />
       <WizardStep title="Passenger details" />
       <WizardStep title="Ticket fare" />
-      <WizardStep title="Customize your trip" />
+      <WizardStep title="Kiwi.com guarantee" isCompleted />
+      <WizardStep title="Seating" />
       <WizardStep title="Overview & Payment" />
     </Wizard>
   );

diff --git a/packages/orbit-components/src/Wizard/WizardStep.js.flow b/packages/orbit-components/src/Wizard/WizardStep.js.flow
@@ -8,6 +8,7 @@ export type Props = {|
   ...Globals,
   +title: Translation,
   +onClick?: (SyntheticEvent<HTMLElement>) => void | Promise<any>,
+  +isCompleted?: boolean,
 |};
 
 declare export var StyledStepIconContainer: StyledComponent<any, any, HTMLElement>;

diff --git a/packages/orbit-components/src/Wizard/WizardStep.tsx b/packages/orbit-components/src/Wizard/WizardStep.tsx
@@ -139,7 +139,7 @@ StyledButtonWrapper.defaultProps = {
   theme: defaultTheme,
 };
 
-const WizardStep = ({ dataTest, title, onClick }: WizardStepProps) => {
+const WizardStep = ({ dataTest, title, onClick, isCompleted }: WizardStepProps) => {
   const theme = useTheme();
   const {
     index,
@@ -192,7 +192,7 @@ const WizardStep = ({ dataTest, title, onClick }: WizardStepProps) => {
       spacing="XSmall"
       spaceAfter={isColumnOnDesktop ? "large" : "none"}
     >
-      <WizardStepIcon />
+      <WizardStepIcon isCompleted={isCompleted} />
       <div
         css={css`
           padding: ${theme.orbit.paddingBadge};

diff --git a/packages/orbit-components/src/Wizard/WizardStepIcon.tsx b/packages/orbit-components/src/Wizard/WizardStepIcon.tsx
@@ -3,7 +3,7 @@ import styled, { css } from "styled-components";
 import { convertHexToRgba } from "@kiwicom/orbit-design-tokens";
 
 import Text from "../Text";
-import CheckCircle from "./CheckCircle";
+import Check from "../icons/Check";
 import useTheme from "../hooks/useTheme";
 import defaultTheme from "../defaultTheme";
 import { WizardStepContext } from "./WizardContext";
@@ -33,17 +33,20 @@ StyledStepIconContainer.defaultProps = {
   theme: defaultTheme,
 };
 
-const WizardStepIcon = () => {
+const WizardStepIcon = ({ isCompleted }: { isCompleted?: boolean }) => {
   const { index, status, isCompact, isActive } = React.useContext(WizardStepContext);
   const theme = useTheme();
 
   return (
     <StyledStepIconContainer $disabled={status === "disabled"} $glow={isActive && !isCompact}>
-      {status === "completed" ? (
-        <CheckCircle
-          ariaLabel="completed"
+      {isCompleted || status === "completed" ? (
+        <Check
           size="small"
-          customColor={theme.orbit.paletteProductNormal}
+          customColor={
+            isCompleted && status !== "completed" && status !== "available"
+              ? theme.orbit.paletteInkDark
+              : theme.orbit.paletteWhiteNormal
+          }
         />
       ) : (
         <Text

diff --git a/packages/orbit-components/src/Wizard/types.d.ts b/packages/orbit-components/src/Wizard/types.d.ts
@@ -16,5 +16,6 @@ export interface Props extends Common.Globals {
 
 export interface WizardStepProps extends Common.Globals {
   readonly title: string;
+  readonly isCompleted?: boolean;
   readonly onClick?: Common.Event<React.SyntheticEvent<HTMLElement>>;
 }