Merge pull request #16 from jamesgiu/RP-add-labels

RP-add-labels
jamesgiu · Apr 29, 2024 · 56a10fb · 56a10fb
2 parents b43a52d + 467c943
commit 56a10fb
Show file tree

Hide file tree

Showing 6 changed files with 110 additions and 4 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "quick-cyc",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A component library for pipelines and acyclic flows in React",
   "scripts": {
     "rollup": "rollup -c",

diff --git a/src/components/Pipeline/Pipeline.stories.tsx b/src/components/Pipeline/Pipeline.stories.tsx
@@ -194,6 +194,61 @@ export const Subpipeline: Story = {
     ]
   }
 };
+
+export const Annotated: Story = {
+  args: {
+    label: 'Annotated pipeline',
+    schema: [
+      {
+      icon:PipelineIcons.Icon2fa,
+      intent:PipelineIntent.SUCCESS,
+      active:false,
+      attempts:1,
+      size:PipelineSize.M,
+      outerLabel: "Auth",
+      },
+      {
+        intent:PipelineIntent.SUCCESS,
+        active:false,
+        size:PipelineSize.S,
+      },
+      {
+        icon:PipelineIcons.IconAward,
+        intent:PipelineIntent.SUCCESS,
+        active:false,
+        attempts:1,
+        size:PipelineSize.M,
+        outerLabel: "Verify",
+      },
+      {
+        intent:PipelineIntent.SUCCESS,
+        active:false,
+        size:PipelineSize.S,
+      },
+      {
+        icon:PipelineIcons.IconClock,
+        intent:PipelineIntent.IN_PROGRESS,
+        active:true,
+        size:PipelineSize.M,
+        outerLabel: "Sleep",
+      },
+      {
+        intent:PipelineIntent.IN_PROGRESS,
+        active:true,
+        progressPercent: 30,
+        size:PipelineSize.S,
+      },
+      {
+        icon:PipelineIcons.Icon3dRotate,
+        intent:PipelineIntent.NONE,
+        active:false,
+        size:PipelineSize.M,
+        outerLabel: "Restore",
+      },
+    ]
+  }
+};
+
 
 
 export default meta;
diff --git a/src/components/Pipeline/Pipeline.tsx b/src/components/Pipeline/Pipeline.tsx
@@ -26,6 +26,8 @@ const renderPipeline = (schema: Array<PipelineNodeProps| PipelinePipeProps | Pip
             percentComplete={node.percentComplete}
             size={node.size}
             active={node.active}
+            innerLabel={node.innerLabel}
+            outerLabel={node.outerLabel}
           />
       );
     } else if (Object.keys(item).includes("schema")) { 

diff --git a/src/components/Pipeline/shared/PipelineNode/PipelineNode.css b/src/components/Pipeline/shared/PipelineNode/PipelineNode.css
@@ -138,4 +138,39 @@
 .qc-node-wrapper.qc-size-l,
 .qc-node-wrapper.qc-size-xl {
     padding: 30px;
+}
+
+.qc-node-label {
+    margin: auto;
+    text-align: center;
+    display: block;
+    margin-top: -5px;
+}
+
+.qc-size-xs .qc-node-label,
+.qc-size-s .qc-node-label,
+.qc-size-xs .qc-node-outer-label,
+.qc-size-s .qc-node-outer-label {
+    font-size: 0.8rem;
+}
+
+.qc-size-l .qc-node-label,
+.qc-size-xl .qc-node-label {
+    font-size: 1.2rem;
+}
+
+.qc-node-outer-label {
+    border-style:solid;
+    bottom: 1;
+    border-radius: 20px;
+    position: absolute;
+    width: 100%;
+    left: 0;
+    text-align: center;
+    z-index: 2;
+    opacity: 0.8;
+}
+
+.qc-node-outer-label-inner {
+    margin: 5px;
 }
diff --git a/src/components/Pipeline/shared/PipelineNode/PipelineNode.stories.tsx b/src/components/Pipeline/shared/PipelineNode/PipelineNode.stories.tsx
@@ -25,7 +25,8 @@ export const Primary: Story = {
       icon: PipelineIcons.Icon2fa,
       size: PipelineSize.M,
       attempts: 2,
-      percentComplete: 30,
+      percentComplete: 80,
+      outerLabel: "Deploy",
     }
 };
 

diff --git a/src/components/Pipeline/shared/PipelineNode/PipelineNode.tsx b/src/components/Pipeline/shared/PipelineNode/PipelineNode.tsx
@@ -1,4 +1,4 @@
-import React, { CSSProperties } from "react";
+import React from "react";
 import { PipelineIntent, PipelineSize } from "../../types";
 import * as allIcons from "@tabler/icons-react";
 import { PipelineIcons } from "../../icons";
@@ -14,6 +14,8 @@ export interface PipelineNodeProps {
     percentComplete?: number,
     attempts?: number,
     onNodeClick?: ()=>void,
+    innerLabel?: string,
+    outerLabel?: string,
     className?: string,
 }
 
@@ -41,7 +43,18 @@ export const PipelineNode = (props: PipelineNodeProps) => {
                 }
                 <span className={"qc-node-icon"} onClick={props.onNodeClick}>
                     <IconToBeUsed/>
-                </span>    
+                    {props.innerLabel && 
+                    <span className={"qc-node-label"}>
+                            {props.innerLabel}
+                    </span>}
+                </span> 
+
+                {props.outerLabel && 
+                <div className={"qc-node-outer-label" + ` ${props.intent}`}>
+                    <span className="qc-node-outer-label-inner">
+                        {props.outerLabel}
+                    </span>
+                </div>}   
             </span>
     </span>);
   };