docs(DataTable): add a basic story with two lines of text (#13457)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Apr 5, 2023 · 298036a · 298036a
1 parent 4c4f2f4
commit 298036a
Show file tree

Hide file tree

Showing 2 changed files with 128 additions and 10 deletions.
diff --git a/packages/react/src/components/DataTable/stories/DataTable-basic.stories.js b/packages/react/src/components/DataTable/stories/DataTable-basic.stories.js
@@ -19,6 +19,7 @@ const {
 } = DataTable;
 
 import mdx from '../DataTable.mdx';
+import './datatable-story.scss';
 
 export default {
   title: 'Components/DataTable/Basic',
@@ -126,6 +127,128 @@ export const Default = () => {
   );
 };
 
+export const XLWithTwoLines = () => {
+  const rows = [
+    {
+      id: 'load-balancer-1',
+      name: (
+        <div className="sb-two-lines">
+          <p>Load Balancer 1</p>
+          <p>Austin, Tx</p>
+        </div>
+      ),
+      rule: 'Round robin',
+      Status: 'Starting',
+      other: 'Test',
+      example: '22',
+    },
+    {
+      id: 'load-balancer-2',
+      name: (
+        <div className="sb-two-lines">
+          <p>Load Balancer 2</p>
+          <p>Austin, Tx</p>
+        </div>
+      ),
+      rule: 'DNS delegation',
+      status: 'Active',
+      other: 'Test',
+      example: '22',
+    },
+    {
+      id: 'load-balancer-3',
+      name: (
+        <div className="sb-two-lines">
+          <p>Load Balancer 3</p>
+          <p>Austin, Tx</p>
+        </div>
+      ),
+      rule: 'Round robin',
+      status: 'Disabled',
+      other: 'Test',
+      example: '22',
+    },
+    {
+      id: 'load-balancer-4',
+      name: (
+        <div className="sb-two-lines">
+          <p>Load Balancer 4</p>
+          <p>Austin, Tx</p>
+        </div>
+      ),
+      rule: 'Round robin',
+      status: 'Disabled',
+      other: 'Test',
+      example: '22',
+    },
+    {
+      id: 'load-balancer-5',
+      name: (
+        <div className="sb-two-lines">
+          <p>Load Balancer 5</p>
+          <p>Austin, Tx</p>
+        </div>
+      ),
+      rule: 'Round robin',
+      status: 'Disabled',
+      other: 'Test',
+      example: '22',
+    },
+    {
+      id: 'load-balancer-6',
+      name: (
+        <div className="sb-two-lines">
+          <p>Load Balancer 6</p>
+          <p>Austin, Tx</p>
+        </div>
+      ),
+      rule: 'Round robin',
+      status: 'Disabled',
+      other: 'Test',
+      example: '22',
+    },
+    {
+      id: 'load-balancer-7',
+      name: (
+        <div className="sb-two-lines">
+          <p>Load Balancer 7</p>
+          <p>Austin, Tx</p>
+        </div>
+      ),
+      rule: 'Round robin',
+      status: 'Disabled',
+      other: 'Test',
+      example: '22',
+    },
+  ];
+  const headers = ['Name', 'Rule', 'Status', 'Other', 'Example'];
+
+  return (
+    <Table size="xl" useZebraStyles={false}>
+      <TableHead>
+        <TableRow>
+          {headers.map((header) => (
+            <TableHeader id={header.key} key={header}>
+              {header}
+            </TableHeader>
+          ))}
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {rows.map((row) => (
+          <TableRow key={row.id}>
+            {Object.keys(row)
+              .filter((key) => key !== 'id')
+              .map((key) => {
+                return <TableCell key={key}>{row[key]}</TableCell>;
+              })}
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+};
+
 export const Playground = (args) => {
   const rows = [
     {

diff --git a/packages/react/src/components/DataTable/stories/datatable-story.scss b/packages/react/src/components/DataTable/stories/datatable-story.scss
@@ -5,17 +5,12 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import '~@carbon/type/scss/type';
-@import '~@carbon/themes/scss/themes';
+@use '@carbon/styles/scss/type';
 
-.demo-inner-container-header {
-  @include carbon--type-style('productive-heading-01');
-
-  color: $text-01;
+.sb-two-lines p:first-child {
+  @include type.type-style('body-compact-01');
 }
 
-.demo-inner-container-content {
-  @include carbon--type-style('body-long-01');
-
-  color: $text-02;
+.sb-two-lines p:last-child {
+  @include type.type-style('label-01');
 }