diff --git a/README.md b/README.md index 21c0791..e3a9c5b 100644 --- a/README.md +++ b/README.md @@ -142,7 +142,7 @@ import { DesignTokenDocBlock } from 'storybook-design-token/dist/doc-blocks'; ; ``` -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 index eb4deba..cf10aba 100644 --- 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 = ({ {viewType === 'table' && ( - + )} {viewType === 'card' && ( - + )} ); diff --git a/addon/src/components/TokenCards.tsx b/addon/src/components/TokenCards.tsx index 9f44a37..1512b89 100644 --- 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) => { )} - { - setTokenValueOverwrites((tokenValueOverwrites) => ({ - ...tokenValueOverwrites, - [token.name]: newValue === token.rawValue ? undefined : newValue - })); - }} - readonly={readonly} - token={token} - /> + {showValueColumn && ( + { + setTokenValueOverwrites((tokenValueOverwrites) => ({ + ...tokenValueOverwrites, + [token.name]: + newValue === token.rawValue ? undefined : newValue + })); + }} + readonly={readonly} + token={token} + /> + )} { +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) => { Name - Value + {showValueColumn && Value} Preview @@ -145,19 +150,21 @@ export const TokenTable = ({ categories, readonly }: TokenTableProps) => { )} - - { - setTokenValueOverwrites((tokenValueOverwrites) => ({ - ...tokenValueOverwrites, - [token.name]: - newValue === token.rawValue ? undefined : newValue - })); - }} - readonly={readonly} - token={token} - /> - + {showValueColumn && ( + + { + setTokenValueOverwrites((tokenValueOverwrites) => ({ + ...tokenValueOverwrites, + [token.name]: + newValue === token.rawValue ? undefined : newValue + })); + }} + readonly={readonly} + token={token} + /> + + )}