Merge branch 'nephila-feature/show-value-option'

UX-and-I · Oct 28, 2021 · 0d3a021 · 0d3a021
2 parents 8a8c106 + 8ce11fc
commit 0d3a021
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 29 deletions.
diff --git a/README.md b/README.md
@@ -142,7 +142,7 @@ import { DesignTokenDocBlock } from 'storybook-design-token/dist/doc-blocks';
 <DesignTokenDocBlock categoryName="Colors" viewType="card" />;
 ```
 
-The `categoryName` parameter references your token category name (the part after `@tokens` in your stylesheet annotations). The `viewType` parameter can be set to `card` or `table` to switch between both presentations.
+The `categoryName` parameter references your token category name (the part after `@tokens` in your stylesheet annotations). The `viewType` parameter can be set to `card` or `table` to switch between both presentations. In some cases you might want to hide the token values. You can do that by passing `showValueColumn={false}`.
 Check the [demo file](https://github.com/UX-and-I/storybook-design-token/blob/v1/demo/src/design-tokens/colors.stories.mdx) for usage examples.
 
 ## Browser support

diff --git a/addon/src/components/DesignTokenDocBlock.tsx b/addon/src/components/DesignTokenDocBlock.tsx
@@ -9,6 +9,7 @@ import { TokenTable } from './TokenTable';
 
 export interface DesignTokenDocBlockProps {
   categoryName: string;
+  showValueColumn?: boolean;
   viewType?: 'card' | 'table';
 }
 
@@ -28,6 +29,7 @@ function getMainStory(context: CompatDocsContextProps) {
 
 export const DesignTokenDocBlock = ({
   categoryName,
+  showValueColumn = true,
   viewType = 'table'
 }: DesignTokenDocBlockProps) => {
   const context = useContext(DocsContext);
@@ -66,11 +68,19 @@ export const DesignTokenDocBlock = ({
     <Container className="design-token-container">
       {viewType === 'table' && (
         <Card className="design-token-card">
-          <TokenTable categories={tab.categories} readonly />
+          <TokenTable
+            categories={tab.categories}
+            readonly
+            showValueColumn={showValueColumn}
+          />
         </Card>
       )}
       {viewType === 'card' && (
-        <TokenCards categories={tab.categories} readonly />
+        <TokenCards
+          categories={tab.categories}
+          readonly
+          showValueColumn={showValueColumn}
+        />
       )}
     </Container>
   );

diff --git a/addon/src/components/TokenCards.tsx b/addon/src/components/TokenCards.tsx
@@ -13,9 +13,14 @@ import { ToolButton } from './ToolButton';
 interface TokenCardsProps {
   categories: Category[];
   readonly?: boolean;
+  showValueColumn?: boolean;
 }
 
-export const TokenCards = ({ categories, readonly }: TokenCardsProps) => {
+export const TokenCards = ({
+  categories,
+  readonly,
+  showValueColumn = true
+}: TokenCardsProps) => {
   const [tokenValueOverwrites, setTokenValueOverwrites] = useState<{
     [tokenName: string]: any;
   }>({});
@@ -86,16 +91,19 @@ export const TokenCards = ({ categories, readonly }: TokenCardsProps) => {
             </WithTooltip>
           )}
 
-          <TokenValue
-            onValueChange={(newValue) => {
-              setTokenValueOverwrites((tokenValueOverwrites) => ({
-                ...tokenValueOverwrites,
-                [token.name]: newValue === token.rawValue ? undefined : newValue
-              }));
-            }}
-            readonly={readonly}
-            token={token}
-          />
+          {showValueColumn && (
+            <TokenValue
+              onValueChange={(newValue) => {
+                setTokenValueOverwrites((tokenValueOverwrites) => ({
+                  ...tokenValueOverwrites,
+                  [token.name]:
+                    newValue === token.rawValue ? undefined : newValue
+                }));
+              }}
+              readonly={readonly}
+              token={token}
+            />
+          )}
 
           <TokenPreview
             token={{

diff --git a/addon/src/components/TokenTable.tsx b/addon/src/components/TokenTable.tsx
@@ -14,9 +14,14 @@ import { ToolButton } from './ToolButton';
 interface TokenTableProps {
   categories: Category[];
   readonly?: boolean;
+  showValueColumn?: boolean;
 }
 
-export const TokenTable = ({ categories, readonly }: TokenTableProps) => {
+export const TokenTable = ({
+  categories,
+  readonly,
+  showValueColumn = true
+}: TokenTableProps) => {
   const [tokenValueOverwrites, setTokenValueOverwrites] = useState<{
     [tokenName: string]: any;
   }>({});
@@ -111,7 +116,7 @@ export const TokenTable = ({ categories, readonly }: TokenTableProps) => {
       <thead className="docblock-argstable-head">
         <tr>
           <th>Name</th>
-          <th>Value</th>
+          {showValueColumn && <th>Value</th>}
           <th>Preview</th>
         </tr>
       </thead>
@@ -145,19 +150,21 @@ export const TokenTable = ({ categories, readonly }: TokenTableProps) => {
                 </WithTooltip>
               )}
             </td>
-            <td>
-              <TokenValue
-                onValueChange={(newValue) => {
-                  setTokenValueOverwrites((tokenValueOverwrites) => ({
-                    ...tokenValueOverwrites,
-                    [token.name]:
-                      newValue === token.rawValue ? undefined : newValue
-                  }));
-                }}
-                readonly={readonly}
-                token={token}
-              />
-            </td>
+            {showValueColumn && (
+              <td>
+                <TokenValue
+                  onValueChange={(newValue) => {
+                    setTokenValueOverwrites((tokenValueOverwrites) => ({
+                      ...tokenValueOverwrites,
+                      [token.name]:
+                        newValue === token.rawValue ? undefined : newValue
+                    }));
+                  }}
+                  readonly={readonly}
+                  token={token}
+                />
+              </td>
+            )}
             <td>
               <TokenPreview
                 token={{