fix(nonlinear): update styling (#2907)

* fix(nonlinear): update styling * fix: story * fix: style update * fix: rename story labels * fix: comments --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · May 2, 2023 · 6fdaac3 · 6fdaac3
1 parent b47e9a9
commit 6fdaac3
Show file tree

Hide file tree

Showing 4 changed files with 226 additions and 86 deletions.
diff --git a/packages/cloud-cognitive/src/components/NonLinearReading/NonLinearReading.js b/packages/cloud-cognitive/src/components/NonLinearReading/NonLinearReading.js
@@ -9,7 +9,7 @@ import React, { useState } from 'react';
 
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { ChevronUp16 } from '@carbon/icons-react';
+import { ChevronDown16 } from '@carbon/icons-react';
 
 import { getDevtoolsProps } from '../../global/js/utils/devtools';
 import { pkg } from '../../settings';
@@ -50,7 +50,7 @@ export let NonLinearReading = React.forwardRef(
     return (
       <span
         {...rest}
-        className={cx(blockClass, className)}
+        className={cx(blockClass, `${blockClass}__${theme}`, className)}
         ref={ref}
         role="main"
         {...getDevtoolsProps(componentName)}
@@ -59,19 +59,17 @@ export let NonLinearReading = React.forwardRef(
         <button
           type="button"
           aria-expanded={isOpen}
-          className={cx(`${blockClass}__term-${theme}`, [
+          className={cx(`${blockClass}__keyword`, [
             isOpen
-              ? [`${blockClass}__term-${theme}--open`]
-              : [`${blockClass}__term-${theme}--closed`],
+              ? [`${blockClass}__keyword-open`]
+              : [`${blockClass}__keyword-closed`],
           ])}
           onClick={handleToggle}
         >
           {children}
-          {isOpen && <ChevronUp16 />}
+          <ChevronDown16 />
         </button>{' '}
-        {isOpen && (
-          <span className={`${blockClass}--body-${theme}`}>{definition}</span>
-        )}{' '}
+        {isOpen && <span className={`${blockClass}__body`}>{definition}</span>}{' '}
       </span>
     );
   }
@@ -86,7 +84,7 @@ NonLinearReading.displayName = componentName;
 // See https://www.npmjs.com/package/prop-types#usage.
 NonLinearReading.propTypes = {
   /**
-   * The term of the component appears as a pill.
+   * The keyword of the component appears as a pill.
    */
   children: PropTypes.node.isRequired,
 
@@ -96,7 +94,7 @@ NonLinearReading.propTypes = {
   className: PropTypes.string,
 
   /**
-   * The content that appears when the term is toggled open.
+   * The content that appears when the keyword is toggled open.
    */
   definition: PropTypes.node.isRequired,
 

diff --git a/packages/cloud-cognitive/src/components/NonLinearReading/NonLinearReading.stories.js b/packages/cloud-cognitive/src/components/NonLinearReading/NonLinearReading.stories.js
@@ -8,6 +8,7 @@
 import React from 'react';
 
 import {
+  getSelectedCarbonTheme,
   getStoryTitle,
   prepareStory,
 } from '../../global/js/utils/story-helper';
@@ -17,40 +18,156 @@ import mdx from './NonLinearReading.mdx';
 
 import styles from './_storybook-styles.scss';
 
+const storyClass = 'non-linear-reading-stories';
+
 export default {
   title: getStoryTitle(NonLinearReading.displayName),
   component: NonLinearReading,
   parameters: {
     styles,
+    layout: 'padded',
     docs: {
       page: mdx,
     },
   },
+  argTypes: {
+    definition: {
+      table: {
+        disable: true,
+      },
+    },
+    theme: {
+      control: { type: null },
+    },
+  },
 };
 
 const defaultProps = {
+  definition: (
+    <>
+      This is a technical component that uses a set of rules to process alerts
+      from your{' '}
+      <a href="https://www.ibm.com/" target="_blank" rel="noreferrer">
+        sources
+      </a>
+      , and streamline threat analysis.
+    </>
+  ),
   theme: 'light',
 };
 
 // As a standalone component, the "story" is meaningless:
-// just a pill for a term, expanding to show its definition.
+// just a pill for a keyword, expanding to show its definition.
 // Should always be shown in context with surrounding text.
-const Template = (args) => {
+
+const TemplateSingleLevel = (args) => {
+  const theme = getSelectedCarbonTheme();
+
   return (
-    <>
+    <div className={`${storyClass}__viewport`}>
       XDR Connect’s correlation
-      <NonLinearReading {...args} />
+      <NonLinearReading {...args} theme={theme} />
       creates a case by processing data from alerts across multiple security
       tools.
-    </>
+    </div>
+  );
+};
+
+const TemplateMultipleLevel = (args) => {
+  const theme = getSelectedCarbonTheme();
+
+  return (
+    <div className={`${storyClass}__viewport`}>
+      Findings are created by the alerts{' '}
+      <NonLinearReading
+        {...args}
+        definition={
+          <>
+            We examine the alerts from each source, and{' '}
+            <NonLinearReading
+              {...args}
+              definition="Correlation allows us to identify connections between common
+                  observables, tactics, and techniques, and to remove any
+                  duplicate data, thereby streamlining the investigation for
+                  you."
+              theme={theme}
+            >
+              correlate
+            </NonLinearReading>{' '}
+            them together with{' '}
+            <a href="https://www.ibm.com/" target="_blank" rel="noreferrer">
+              rules
+            </a>
+            . While a case can contain multiple alerts, a single finding can
+            only be created from a single alert. So, when you select a finding,
+            you can drill right down to the raw data behind it: the payload. We
+            also use our
+            <NonLinearReading
+              {...args}
+              definition="
+                  Our threat intelligence service contains an enrichment
+                  capability. During the enrichment process, we add context that
+                  is used to establish the severity of artifacts associated with
+                  a finding. This is what determines the severity of the finding
+                  itself. Bear in mind that each case can have multiple
+                  findings, and every finding will have its own severity.
+                "
+              theme={theme}
+            >
+              threat intelligence service
+            </NonLinearReading>
+            to establish the severity of the artifacts.
+          </>
+        }
+        theme={theme}
+      >
+        ingested
+      </NonLinearReading>{' '}
+      from your own security systems. The findings here are confirmed findings
+      that have been created from alerts ingested from your own sources, before
+      being enriched to create cases.
+    </div>
   );
 };
 
-export const Default = prepareStory(Template, {
+const TemplateWithGradientBackground = (args) => {
+  return (
+    <div className={`${storyClass}__viewport`}>
+      <div className="gradient-bg">
+        XDR Connect’s correlation
+        <NonLinearReading {...args} theme="dark" />
+        creates a case by processing data from alerts across multiple security
+        tools.
+      </div>
+      <br />
+      Some other Novice to pro components use a gradient background as shown
+      above.
+      <br />
+      If using NonLinearReading inside one of these components, always use{' '}
+      <code>theme=&quot;dark&quot;</code>.
+    </div>
+  );
+};
+
+export const SingleLevel = prepareStory(TemplateSingleLevel, {
   args: {
     ...defaultProps,
     children: 'engine,',
-    definition:
-      'This is a technical component that uses a set of rules to process alerts from your sources, and streamline threat analysis.',
   },
 });
+
+export const MultipleLevel = prepareStory(TemplateMultipleLevel, {
+  args: {
+    ...defaultProps,
+  },
+});
+
+export const WithGradientBackground = prepareStory(
+  TemplateWithGradientBackground,
+  {
+    args: {
+      ...defaultProps,
+      children: 'engine,',
+    },
+  }
+);