@heliux-org/design-system-core 0.0.151 → 0.0.152

package/src/components/Workflow/Workflow.tsx

@@ -6,13 +6,24 @@ import Flex from "../Flex/Flex";
 import { IconType } from "../Icon/IconConstants";
 import { Check } from "../Icon/Icons";
 import { SubIcon } from "../../types";
+import { StepsStatus } from "./WorkflowConstants";
 
 export interface WorkflowProps {
-  children: Iterable<ReactElement<typeof Step>>;
+  children: ReactElement<typeof Step>[];
+  status?: StepsStatus;
 }
 
-export default function Workflow({ children }: WorkflowProps) {
-  return <div className={"workflow-bar"}>{children}</div>;
+export default function Workflow({
+  children,
+  status = StepsStatus.DEFAULT,
+}: WorkflowProps) {
+  return (
+    <div className={"workflow-bar"}>
+      {React.Children.map(children, (child) =>
+        React.cloneElement(child, { status } as Partial<StepProps>)
+      )}
+    </div>
+  );
 }
 
 export interface StepProps extends PropsWithChildren {
@@ -30,6 +41,8 @@ export interface StepProps extends PropsWithChildren {
   headingIconClassName?: string;
   highlightIndex?: boolean;
   activeSubHeading?: React.ReactNode;
+  isFinalStep?: boolean;
+  status?: StepsStatus;
 }
 
 export function Step({
@@ -45,10 +58,14 @@ export function Step({
   headingIconClassName = "",
   highlightIndex = false,
   activeSubHeading,
+  status = StepsStatus.DEFAULT,
+  isFinalStep = false,
 }: StepProps) {
   const classes = classNames(
     "workflow-bar-step",
     `workflow-bar-step-${state.status}`,
+    `workflow-bar-step-${status}`,
+    `workflow-bar-${isFinalStep && "final"}-step-${status}`,
     className
   );
 

package/src/components/Workflow/WorkflowConstants.ts

@@ -0,0 +1,6 @@
+export enum StepsStatus {
+  DEFAULT = "default",
+  FAILED = "failed",
+  CANCELLED = "cancelled",
+  SUCCEEDED = "succeeded",
+}

package/src/components/Workflow/__stories__/Workflow.stories.tsx

@@ -5,6 +5,8 @@ import Workflow, { Step } from "../Workflow";
 import { useEffect } from "react";
 import React from "react";
 import { Check } from "../../Icon/Icons";
+import { StepsStatus } from "../WorkflowConstants";
+import Flex from "../../Flex/Flex";
 
 export default {
   title: "Data display/Workflow",
@@ -39,23 +41,87 @@ export const Default = {
       args.current == mine
         ? "active"
         : args.current < mine
-          ? "incomplete"
-          : "complete";
+        ? "incomplete"
+        : "complete";
 
     return (
-      <Workflow>
-        <Step index="1" title="First step" state={{ status: stepState(1) }}>
-          <Button onClick={() => jumpTo(2)}>Next</Button>
-        </Step>
-        <Step index="2" title="Second step" state={{ status: stepState(2) }}>
-          <Button onClick={() => jumpTo(1)}>Back</Button>
-          <Button onClick={() => jumpTo(3)}>Next</Button>
-        </Step>
-        <Step index="3" title="Third step" state={{ status: stepState(3) }} headingIcon={Check}>
-          <Button onClick={() => jumpTo(2)}>Back</Button>
-          <Button onClick={() => { }}>Finish</Button>
-        </Step>
-      </Workflow>
+      <Flex direction={Flex.directions.COLUMN}>
+        <Workflow>
+          <Step index="1" title="First step" state={{ status: stepState(1) }}>
+            <Button onClick={() => jumpTo(2)}>Next</Button>
+          </Step>
+          <Step index="2" title="Second step" state={{ status: stepState(2) }}>
+            <Button onClick={() => jumpTo(1)}>Back</Button>
+            <Button onClick={() => jumpTo(3)}>Next</Button>
+          </Step>
+          <Step
+            index="3"
+            title="Third step"
+            state={{ status: stepState(3) }}
+            headingIcon={Check}
+          >
+            <Button onClick={() => jumpTo(2)}>Back</Button>
+            <Button onClick={() => {}}>Finish</Button>
+          </Step>
+        </Workflow>
+        <Workflow status={StepsStatus.CANCELLED}>
+          <Step index="1" title="First step" state={{ status: stepState(1) }}>
+            <Button onClick={() => jumpTo(2)}>Next</Button>
+          </Step>
+          <Step index="2" title="Second step" state={{ status: stepState(2) }}>
+            <Button onClick={() => jumpTo(1)}>Back</Button>
+            <Button onClick={() => jumpTo(3)}>Next</Button>
+          </Step>
+          <Step
+            index="3"
+            title="Third step"
+            state={{ status: stepState(3) }}
+            headingIcon={Check}
+            isFinalStep
+          >
+            <Button onClick={() => jumpTo(2)}>Back</Button>
+            <Button onClick={() => {}}>Finish</Button>
+          </Step>
+        </Workflow>
+        <Workflow status={StepsStatus.FAILED}>
+          <Step index="1" title="First step" state={{ status: stepState(1) }}>
+            <Button onClick={() => jumpTo(2)}>Next</Button>
+          </Step>
+          <Step index="2" title="Second step" state={{ status: stepState(2) }}>
+            <Button onClick={() => jumpTo(1)}>Back</Button>
+            <Button onClick={() => jumpTo(3)}>Next</Button>
+          </Step>
+          <Step
+            index="3"
+            title="Third step"
+            state={{ status: stepState(3) }}
+            headingIcon={Check}
+            isFinalStep
+          >
+            <Button onClick={() => jumpTo(2)}>Back</Button>
+            <Button onClick={() => {}}>Finish</Button>
+          </Step>
+        </Workflow>
+        <Workflow status={StepsStatus.SUCCEEDED}>
+          <Step index="1" title="First step" state={{ status: stepState(1) }}>
+            <Button onClick={() => jumpTo(2)}>Next</Button>
+          </Step>
+          <Step index="2" title="Second step" state={{ status: stepState(2) }}>
+            <Button onClick={() => jumpTo(1)}>Back</Button>
+            <Button onClick={() => jumpTo(3)}>Next</Button>
+          </Step>
+          <Step
+            index="3"
+            title="Third step"
+            state={{ status: stepState(3) }}
+            headingIcon={Check}
+            isFinalStep
+          >
+            <Button onClick={() => jumpTo(2)}>Back</Button>
+            <Button onClick={() => {}}>Finish</Button>
+          </Step>
+        </Workflow>
+      </Flex>
     );
   },
 };

package/src/components/Workflow/index.ts

@@ -1 +1,2 @@
 export * from "./Workflow";
+export * from "./WorkflowConstants";

package/src/components/Workflow/workflow.scss

@@ -124,4 +124,33 @@
     font-size: 12px;
     font-weight: 400;
     color: var(--text-secondary);   
+}
+
+.workflow-bar-step-failed {
+    background-color: var(--surface-alert) !important;
+    color: var(--text-secondary) !important;
+}
+
+.workflow-bar-step-cancelled {
+    background-color: var(--surface-level-200) !important;
+    color: var(--text-secondary) !important;
+}
+
+.workflow-bar-final-step-succeeded {
+    background-color: var(--positive-color) !important;
+    color: var(--color-white) !important;
+}
+
+.workflow-bar-final-step-failed {
+    background-color: var(--negative-color) !important;
+    color: var(--color-white) !important;
+}
+
+.workflow-bar-final-step-cancelled {
+    background-color: var(--surface-level-300) !important;
+    color: var(--text-primary) !important;
+}
+
+.icon-color{
+    color: var(--color-solar-flare-500);
 }

package/src/components/index.ts

@@ -173,6 +173,7 @@ export { DirectionType, ColorType } from "./Divider/DividerConstants";
 export * from "./Dropdown/DropdownConstants";
 export { InputType } from "./EditableInput/EditableInputConstants";
 export * from "./Flex/FlexConstants";
+export * from "./Workflow/WorkflowConstants";
 export { GridElementRef, DirectionMap, DirectionMaps, Position } from "./GridKeyboardNavigationContext/GridKeyboardNavigationContextConstants";
 export * from "./HeaderActions/HeaderActionsConstants";
 export * from "./Icon/IconConstants";