CCR-77 Fix chart container disabled title color (#166)

lib/components/ChartContainer/ChartContainer.css

@@ -58,6 +58,10 @@
   height: 36px;
 }
 
+.disabledTitle {
+  color: var(--vds-color-slate-lighter);
+}
+
 .content {
   padding: 12px 24px 24px;
 }

lib/components/ChartContainer/ChartContainer.js

@@ -25,8 +25,12 @@ function ChartContainer({
   disabled,
   children,
 }) {
-  const subtitleStyle = cn(styles.subtitle, onBackClick ? styles.withBack : styles.withNoBack);
-  const titleStyle = cn(styles.title, onBackClick ? styles.leftItem : styles.withNoBack);
+  const subtitleStyle = cn(styles.subtitle, onBackClick ? styles.withBack : styles.withNoBack, {
+    [styles.disabledTitle]: disabled,
+  });
+  const titleStyle = cn(styles.title, onBackClick ? styles.leftItem : styles.withNoBack, {
+    [styles.disabledTitle]: disabled,
+  });
 
   return (
     <div className={styles.container}>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "virtuoso-design-system",
-  "version": "1.19.10",
+  "version": "1.19.11",
   "description": "A set of reusable elements that enable Virtru designers and Virtru engineers to create consistent Virtru products.",
   "author": "Virtru CI <[email protected]>",
   "main": "dist/bundle.cjs.js",

stories/vrc-stories/ChartContainer.js

@@ -6,28 +6,28 @@ import styles from 'lib/styles/build/js/design_tokens';
 import ChartContainer from '@/components/ChartContainer/ChartContainer';
 import Select from '@/components/Select/Select';
 
-const children = (
-  <div
-    style={{
-      background: styles.vds.color.red.lightest.value,
-      width: '930px',
-      height: '300px',
-      border: `1px solid ${styles.vds.color.slate.darker.value}`,
-      borderRadius: '5px',
-    }}
-  />
-);
-const props = {
+const chartProps = {
   title: 'Where is my protected data going?',
   subtitle: (
     <>
       <span> 30,212 recipients at </span>
       <span style={{ fontWeight: styles.vds.font.weight.bold.value }}> company-one.com </span>
     </>
   ),
+  children: (
+    <div
+      style={{
+        background: styles.vds.color.red.lightest.value,
+        width: '930px',
+        height: '300px',
+        border: `1px solid ${styles.vds.color.slate.darker.value}`,
+        borderRadius: '5px',
+      }}
+    />
+  ),
 };
 
-const select = (
+const WrappedSelect = (props) => (
   <div style={{ width: '240px' }}>
     <Select
       value="Select another domain"
@@ -47,6 +47,7 @@ const select = (
       ]}
       placeholder="Select another domain"
       isSearchable
+      {...props}
     />
   </div>
 );
@@ -60,11 +61,9 @@ storiesOf('ChartContainer', module)
       onSettingsClick={() => {
         alert('settings');
       }}
-      select={select}
-      {...props}
-    >
-      {children}
-    </ChartContainer>
+      select={<WrappedSelect />}
+      {...chartProps}
+    />
   ))
   .add('no select', () => (
     <ChartContainer
@@ -74,19 +73,28 @@ storiesOf('ChartContainer', module)
       onSettingsClick={() => {
         alert('settings');
       }}
-      {...props}
-    >
-      {children}
-    </ChartContainer>
+      {...chartProps}
+    />
   ))
   .add('no back', () => (
     <ChartContainer
       onSettingsClick={() => {
         alert('settings');
       }}
-      {...props}
-    >
-      {children}
-    </ChartContainer>
+      {...chartProps}
+    />
   ))
-  .add('minimal', () => <ChartContainer {...props}>{children}</ChartContainer>);
+  .add('minimal', () => <ChartContainer {...chartProps} />)
+  .add('disabled', () => (
+    <ChartContainer
+      disabled
+      onBackClick={() => {
+        alert('back');
+      }}
+      onSettingsClick={() => {
+        alert('settings');
+      }}
+      select={<WrappedSelect isDisabled />}
+      {...chartProps}
+    />
+  ));