Feat: [HOP-68, HOP-69] Data Viz tokens and color sections (#81)

gsoft-inc · Nov 1, 2023 · 1ede3f2 · 1ede3f2
1 parent 3d15b06
commit 1ede3f2
Show file tree

Hide file tree

Showing 9 changed files with 2,561 additions and 13 deletions.
diff --git a/.changeset/proud-clocks-worry.md b/.changeset/proud-clocks-worry.md
@@ -0,0 +1,6 @@
+---
+"@hopper-ui/tokens": minor
+"docs": minor
+---
+
+Added data viz tokens and added sections to the color page in the docs.
diff --git a/apps/docs/components/tableSection/TableSection.tsx b/apps/docs/components/tableSection/TableSection.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 import Table from "@/components/ui/table/Table";
 

diff --git a/apps/docs/components/tabs/Tabs.tsx b/apps/docs/components/tabs/Tabs.tsx
@@ -1,33 +1,31 @@
 "use client";
 
-import { useState } from "react";
+import { Children, useState, type ReactElement, isValidElement } from "react";
 import cx from "classnames";
 
-import Table from "@/components/ui/table/Table";
-
 import "./tabs.css";
 
 interface TabProps {
     title: string;
     category: string;
-    data: {
-        name: string;
-        value: string;
-    }[];
 }
 
 interface TabsProps {
     tabs: TabProps[];
     className?: string;
+    children?: React.ReactNode;
 }
 
-const Tabs = ({ tabs, className }: TabsProps) => {
+const Tabs = ({ tabs, className, children }: TabsProps) => {
     const [selected, setSelected] = useState(0);
 
     const handleOnClick = (index: number): void => {
         setSelected(index);
     };
 
+    const arrayChildren = Children.toArray(children);
+    const selectedChild = arrayChildren[selected];
+
     return (
         <div className={cx("hd-tabs", className)}>
             <ul className="hd-tabs__list">
@@ -47,7 +45,7 @@ const Tabs = ({ tabs, className }: TabsProps) => {
                 ))}
             </ul>
             <div className="hd-tabs__content">
-                <div className="hd-tabs__pane"><Table category={tabs[selected].category} data={tabs[selected].data} /></div>
+                <div className="hd-tabs__pane">{(selectedChild && isValidElement(selectedChild)) && (selectedChild as ReactElement).props.children}</div>
             </div>
         </div>
     );

diff --git a/apps/docs/content/tokens/semantic/color.mdx b/apps/docs/content/tokens/semantic/color.mdx
@@ -8,10 +8,316 @@ import tokensDark from '../../../datas/tokens-dark.json';
 export const categoryKey = "color";
 
 export const tabs = [
-  { title: "Light", data: tokens.semantic[categoryKey], category: categoryKey },
-  { title: "Dark", data: tokensDark.semantic[categoryKey], category: categoryKey },
+  { title: "Light", category: categoryKey },
+  { title: "Dark", category: categoryKey }
 ];
 
+{/* It's important to keep the Headers with ##, with no spaces on the left so that it shows up in the aside.
+We do not want to do this for the dark mode, otherwise, we see double the headers in the aside. */}
+
 # Semantic Color
+<Tabs tabs={tabs}>
+  <div>
+## Neutral
+    <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
+      ["hop-neutral"]
+    } />
+## Primary
+    <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
+      ["hop-primary"]
+    } />
+## Success
+    <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
+      ["hop-success"]
+    } />
+## Warning
+    <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
+      ["hop-warning"]
+    } />
+## Danger
+    <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
+      ["hop-danger"]
+    } />
+## Information
+    <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
+      ["hop-information"]
+    } />
+## Upsell
+    <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
+      ["hop-upsell"]
+    } />
+
+## Decorative
+    ### Option 1
+    <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
+      ["hop-decorative-option1"]
+    } />
+    ### Option 2
+    <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
+      ["hop-decorative-option2"]
+    } />
+    ### Option 3
+    <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
+      ["hop-decorative-option3"]
+    } />
+    ### Option 4
+    <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
+      ["hop-decorative-option4"]
+    } />
+    ### Option 5
+    <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
+      ["hop-decorative-option5"]
+    } />
+    ### Option 6
+    <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
+      ["hop-decorative-option6"]
+    } />
+    ### Option 7
+    <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
+      ["hop-decorative-option7"]
+    } />
+    ### Option 8
+    <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
+      ["hop-decorative-option8"]
+    } />
+    ### Option 9
+    <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
+      ["hop-decorative-option9"]
+    } />
+
+## Status
+
+    ### Neutral
+    <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
+      ["hop-status-neutral"]
+    } />
+    ### Progress
+    <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
+      ["hop-status-progress"]
+    } />
+    ### Positive
+    <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
+      ["hop-status-positive"]
+    } />
+    ### Caution
+    <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
+      ["hop-status-caution"]
+    } />
+    ### Negative
+    <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
+      ["hop-status-negative"]
+    } />
+    ### Inactive
+    <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
+      ["hop-status-inactive"]
+    } />
+    ### Option 1
+    <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
+      ["hop-status-option1"]
+    } />
+    ### Option 2
+    <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
+      ["hop-status-option2"]
+    } />
+    ### Option 3
+    <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
+      ["hop-status-option3"]
+    } />
+    ### Option 4
+    <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
+      ["hop-status-option4"]
+    } />
+    ### Option 5
+    <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
+      ["hop-status-option5"]
+    } />
+    ### Option 6
+    <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
+      ["hop-status-option6"]
+    } />
+
+## Data Visualization
+    <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
+      ["hop-unavailable", "hop-text"]
+    } />
+
+    ### Monochromatic - Primary
+    <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
+      ["hop-monochromatic-primary"]
+    } />
+
+    ### Monochromatic - Positive
+    <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
+      ["hop-monochromatic-positive"]
+    } />
+
+    ### Monochromatic - Negative
+    <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
+      ["hop-monochromatic-negative"]
+    } />
+
+    ### Diverging Sequence 1
+    <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
+      ["hop-diverging-sequence-1"]
+    } />
+
+    ### Diverging Sequence 2
+    <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
+      ["hop-diverging-sequence-2"]
+    } />
+
+    ### Categorical - Sequences
+    <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
+      ["hop-categorical-sequence"]
+    } />
+
+    ### Categorical - 2 Color Groups
+    <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
+      ["hop-categorical-2"]
+    } />
+
+    ### Categorical - 3 Color Groups
+    <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
+      ["hop-categorical-3"]
+    } />
+
+    ### Categorical - 4 Color Groups
+    <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
+      ["hop-categorical-4"]
+    } />
+
+    ### Categorical - 5 Color Groups
+    <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
+      ["hop-categorical-5"]
+    } />
+
+    ### Categorical - 6 Color Groups
+    <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
+      ["hop-categorical-6"]
+    } />
+  </div>
+  <div>
+    ## Neutral
+    <TableSection categoryKey={categoryKey} tokens={tokensDark.semantic[categoryKey]} categories={
+      ["hop-neutral"]
+    } />
+    ## Primary
+    <TableSection categoryKey={categoryKey} tokens={tokensDark.semantic[categoryKey]} categories={
+      ["hop-primary"]
+    } />
+    ## Success
+    <TableSection categoryKey={categoryKey} tokens={tokensDark.semantic[categoryKey]} categories={
+      ["hop-success"]
+    } />
+    ## Warning
+    <TableSection categoryKey={categoryKey} tokens={tokensDark.semantic[categoryKey]} categories={
+      ["hop-warning"]
+    } />
+    ## Danger
+    <TableSection categoryKey={categoryKey} tokens={tokensDark.semantic[categoryKey]} categories={
+      ["hop-danger"]
+    } />
+    ## Information
+    <TableSection categoryKey={categoryKey} tokens={tokensDark.semantic[categoryKey]} categories={
+      ["hop-information"]
+    } />
+    ## Upsell
+    <TableSection categoryKey={categoryKey} tokens={tokensDark.semantic[categoryKey]} categories={
+      ["hop-upsell"]
+    } />
+
+    ## Decorative
+    ### Option 1
+    <TableSection categoryKey={categoryKey} tokens={tokensDark.semantic[categoryKey]} categories={
+      ["hop-decorative-option1"]
+    } />
+    ### Option 2
+    <TableSection categoryKey={categoryKey} tokens={tokensDark.semantic[categoryKey]} categories={
+      ["hop-decorative-option2"]
+    } />
+    ### Option 3
+    <TableSection categoryKey={categoryKey} tokens={tokensDark.semantic[categoryKey]} categories={
+      ["hop-decorative-option3"]
+    } />
+    ### Option 4
+    <TableSection categoryKey={categoryKey} tokens={tokensDark.semantic[categoryKey]} categories={
+      ["hop-decorative-option4"]
+    } />
+    ### Option 5
+    <TableSection categoryKey={categoryKey} tokens={tokensDark.semantic[categoryKey]} categories={
+      ["hop-decorative-option5"]
+    } />
+    ### Option 6
+    <TableSection categoryKey={categoryKey} tokens={tokensDark.semantic[categoryKey]} categories={
+      ["hop-decorative-option6"]
+    } />
+    ### Option 7
+    <TableSection categoryKey={categoryKey} tokens={tokensDark.semantic[categoryKey]} categories={
+      ["hop-decorative-option7"]
+    } />
+    ### Option 8
+    <TableSection categoryKey={categoryKey} tokens={tokensDark.semantic[categoryKey]} categories={
+      ["hop-decorative-option8"]
+    } />
+    ### Option 9
+    <TableSection categoryKey={categoryKey} tokens={tokensDark.semantic[categoryKey]} categories={
+      ["hop-decorative-option9"]
+    } />
+
+    ## Status
+
+    ### Neutral
+    <TableSection categoryKey={categoryKey} tokens={tokensDark.semantic[categoryKey]} categories={
+      ["hop-status-neutral"]
+    } />
+    ### Progress
+    <TableSection categoryKey={categoryKey} tokens={tokensDark.semantic[categoryKey]} categories={
+      ["hop-status-progress"]
+    } />
+    ### Positive
+    <TableSection categoryKey={categoryKey} tokens={tokensDark.semantic[categoryKey]} categories={
+      ["hop-status-positive"]
+    } />
+    ### Caution
+    <TableSection categoryKey={categoryKey} tokens={tokensDark.semantic[categoryKey]} categories={
+      ["hop-status-caution"]
+    } />
+    ### Negative
+    <TableSection categoryKey={categoryKey} tokens={tokensDark.semantic[categoryKey]} categories={
+      ["hop-status-negative"]
+    } />
+    ### Inactive
+    <TableSection categoryKey={categoryKey} tokens={tokensDark.semantic[categoryKey]} categories={
+      ["hop-status-inactive"]
+    } />
+    ### Option 1
+    <TableSection categoryKey={categoryKey} tokens={tokensDark.semantic[categoryKey]} categories={
+      ["hop-status-option1"]
+    } />
+    ### Option 2
+    <TableSection categoryKey={categoryKey} tokens={tokensDark.semantic[categoryKey]} categories={
+      ["hop-status-option2"]
+    } />
+    ### Option 3
+    <TableSection categoryKey={categoryKey} tokens={tokensDark.semantic[categoryKey]} categories={
+      ["hop-status-option3"]
+    } />
+    ### Option 4
+    <TableSection categoryKey={categoryKey} tokens={tokensDark.semantic[categoryKey]} categories={
+      ["hop-status-option4"]
+    } />
+    ### Option 5
+    <TableSection categoryKey={categoryKey} tokens={tokensDark.semantic[categoryKey]} categories={
+      ["hop-status-option5"]
+    } />
+    ### Option 6
+    <TableSection categoryKey={categoryKey} tokens={tokensDark.semantic[categoryKey]} categories={
+      ["hop-status-option6"]
+    } />
 
-<Tabs tabs={tabs} />
+    ## Data Visualization
+    <TableSection categoryKey={categoryKey} tokens={tokensDark.semantic[categoryKey]} categories={
+      ["hop-unavailable", "hop-text"]
+    } />
+  </div>
+</Tabs>