Get storybook running

Disable the graph stories in the welcome page.
tektoncd · Jul 23, 2024 · a64a4af · a64a4af
1 parent 4235efd
commit a64a4af
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 27 deletions.
diff --git a/.storybook/Container.scss b/.storybook/Container.scss
@@ -15,10 +15,10 @@ limitations under the License.
 @use '@carbon/react/scss/theme' as *;
 @import './welcome';
 
-@import '@tektoncd/dashboard-graph/src/components/Graph.scss';
-@import '@tektoncd/dashboard-graph/src/components/ZoomablePipelineGraph.scss';
+// @import '@tektoncd/dashboard-graph/src/components/Graph.scss';
+// @import '@tektoncd/dashboard-graph/src/components/ZoomablePipelineGraph.scss';
 
-@import '@tektoncd/dashboard-graph/src/components/newGraph.scss';
+// @import '@tektoncd/dashboard-graph/src/components/newGraph.scss';
 
 .tkn--storybook-theme {
   background-color: $background;

diff --git a/.storybook/Welcome.mdx b/.storybook/Welcome.mdx
@@ -16,8 +16,8 @@ import LinkTo from '@storybook/addon-links/react';
 
 import PackageInfo from '../packages/components/package.json';
 import * as DetailsHeaderStories from '../packages/components/src/components/DetailsHeader/DetailsHeader.stories';
-import * as GraphStories from '../packages/graph/src/components/Graph/Graph.stories';
-import * as NodeStories from '../packages/graph/src/components/Node/Node.stories';
+// import * as GraphStories from '../packages/graph/src/components/Graph/Graph.stories';
+// import * as NodeStories from '../packages/graph/src/components/Node/Node.stories';
 import * as RunHeaderStories from '../packages/components/src/components/RunHeader/RunHeader.stories';
 
 import tektonDashboardLogo from '../src/images/tekton-dashboard-color.svg';
@@ -103,7 +103,9 @@ import tektonDashboardLogo from '../src/images/tekton-dashboard-color.svg';
 
       An example of these are the <LinkTo className="storylink" kind="Experimental/Graph/Graph" story="Detailed-1">`Graph`</LinkTo> components published in `@tektoncd/dashboard-graph` which provide a visualisation of a pipeline's structure.
 
+      {/*
       <Canvas className="tkn-graph-story" of={GraphStories.Condensed1} withToolbar />
       <Canvas className="tkn-graph-story" of={GraphStories.Detailed1} showToolbar />
+      */}
     </div>
 </Unstyled>
diff --git a/.storybook/welcome.scss b/.storybook/welcome.scss
@@ -55,11 +55,11 @@ limitations under the License.
   }
 
   a, a:hover, a:visited, a.storylink code {
-    color: $link-01;
+    color: $link-primary;
   }
 
   a:hover {
-    color: $hover-primary-text;
+    color: $link-primary-hover;
     text-decoration: underline;
   }
 
@@ -76,6 +76,6 @@ limitations under the License.
   }
 
   .tkn-graph-story .sb-story {
-    background-color: $ui-background;
+    background-color: $background;
   }
 }
diff --git a/packages/components/src/components/ViewYAML/ViewYAML.scss b/packages/components/src/components/ViewYAML/ViewYAML.scss
@@ -15,8 +15,8 @@ limitations under the License.
 @use '@carbon/react/scss/config' as *;
 
 .#{$prefix}--snippet--multi.tkn--view-yaml--dark {
-  background-color: colors.$gray-90; // TODO: $inverse-02 - see Log.scss
-  color: colors.$gray-10;            //       $inverse-01
+  background-color: colors.$gray-90; // TODO: $background-inverse - see Log.scss
+  color: colors.$gray-10;            //       $text-inverse
 }
 
 .tkn--view-yaml--title {

diff --git a/packages/graph/src/components/Graph.scss b/packages/graph/src/components/Graph.scss
@@ -1,5 +1,5 @@
 /*
-Copyright 2019-2023 The Tekton Authors
+Copyright 2019-2024 The Tekton Authors
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
@@ -11,33 +11,35 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+@use '@carbon/react/scss/theme' as *;
+
 .graph {
   #edge-arrow path {
-    fill: $ui-04;
-    stroke: $ui-04;
+    fill: $border-strong;
+    stroke: $border-strong;
   }
 
   .visx-network-link path {
-    stroke: $ui-04;
+    stroke: $border-strong;
     marker-end: url(#edge-arrow);
   }
 
   .Task {
     rect {
       fill: #FFFFFF;
-      stroke: $ui-04;
+      stroke: $border-strong;
     }
 
     .label-hitbox {
       stroke: transparent;
     }
 
     text {
-      fill: $ui-04;
+      fill: $toggle-off;
     }
 
     .chevron, .status-icon {
-      fill: $ui-04;
+      fill: $toggle-off;
     }
   }
 

diff --git a/packages/graph/src/components/ZoomablePipelineGraph.scss b/packages/graph/src/components/ZoomablePipelineGraph.scss
@@ -18,13 +18,13 @@ limitations under the License.
   inline-size: 300px;
   block-size: 600px;
   overflow: hidden;
-  outline: 1px solid $ui-03;
+  outline: 1px solid $border-subtle;
 
   .toolbar {
     inline-size: 100%;
     align-self: bottom;
     text-align: center;
-    background-color: $ui-03;
+    background-color: $layer-accent;
   }
 
   svg {

diff --git a/packages/graph/src/components/newGraph.scss b/packages/graph/src/components/newGraph.scss
@@ -12,6 +12,7 @@ limitations under the License.
 */
 
 @use '@carbon/react/scss/config' as *;
+@use '@carbon/react/scss/theme' as *;
 
 // TODO: resolve errors preventing the dark theme from being used here
 // @import '@carbon/elements/scss/themes/mixins';
@@ -22,16 +23,16 @@ limitations under the License.
 
 .#{$prefix}--cc--card-node {
   &.card-status-success {
-    border-color: $support-02;
+    border-color: $support-success;
   }
   &.card-status-success-warning {
-    border-color: $support-03;
+    border-color: $support-warning;
   }
   &.card-status-failed {
-    border-color: $support-01;
+    border-color: $support-error;
   }
   &.card-status-unknown {
-    border-color: $ui-04;
+    border-color: $border-strong;
   }
 }
 
@@ -56,18 +57,18 @@ limitations under the License.
   }
 
   &.status-icon-failed {
-    fill: $support-01;
+    fill: $support-error;
   }
 
   &.status-icon-success {
-    fill: $support-02;
+    fill: $support-success;
   }
 
   &.status-icon-success-warning {
-    fill: $support-02;
+    fill: $support-success;
 
     path:nth-child(2) {
-      fill: $support-03;
+      fill: $support-warning;
     }
   }
 }