@commercetools-uikit/design-system 15.14.0 → 15.14.1

package/dist/commercetools-uikit-design-system.cjs.dev.js

@@ -536,7 +536,6 @@ var themes = {
     sizeHeightTag: '26px'
   },
   test: {
-    colorPrimary: '#00b39e',
     fontFamily: "'Inter', system-ui",
     alignItemsForSelectInputTag: 'center',
     backgroundColorForButtonWhenActive: 'hsl(0deg 0% 10% / 10%)',
@@ -784,8 +783,8 @@ var themes = {
     paddingForTableManagerDraggableTag: 'var(--spacing-10) 0',
     paddingForCollapsiblePanelHeader: 'var(--spacing-30) 0',
     paddingForCollapsiblePanelHeaderAsCondensed: 'var(--spacing-20) 0',
-    paddingForCollapsiblePanelSectionWrapper: 'var(--spacing-50) 0 var(--spacing-70) calc(var(--spacing-30) + var(--spacing-10))',
-    paddingForCollapsiblePanelSectionWrapperAsCondensed: 'var(--spacing-40) 0 var(--spacing-70) calc(var(--spacing-30) + var(--spacing-10))',
+    paddingForCollapsiblePanelSectionWrapper: 'var(--spacing-50) 0 0 calc(var(--spacing-30) + var(--spacing-10))',
+    paddingForCollapsiblePanelSectionWrapperAsCondensed: 'var(--spacing-40) 0 0 calc(var(--spacing-30) + var(--spacing-10))',
     paddingForCollapsiblePanelSectionDescription: '0 0 var(--spacing-40)',
     paddingForCollapsiblePanelSectionDescriptionAsCondensed: '0 0 var(--spacing-40)',
     paddingForInput: '16px',
@@ -1510,7 +1509,7 @@ var withThemeContext = function withThemeContext(WrappedComponent) {
 };
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "15.14.0";
+var version = "15.14.1";
 
 exports.ThemeProvider = ThemeProvider;
 exports.customProperties = designTokens$1;

package/dist/commercetools-uikit-design-system.cjs.prod.js

@@ -536,7 +536,6 @@ var themes = {
     sizeHeightTag: '26px'
   },
   test: {
-    colorPrimary: '#00b39e',
     fontFamily: "'Inter', system-ui",
     alignItemsForSelectInputTag: 'center',
     backgroundColorForButtonWhenActive: 'hsl(0deg 0% 10% / 10%)',
@@ -784,8 +783,8 @@ var themes = {
     paddingForTableManagerDraggableTag: 'var(--spacing-10) 0',
     paddingForCollapsiblePanelHeader: 'var(--spacing-30) 0',
     paddingForCollapsiblePanelHeaderAsCondensed: 'var(--spacing-20) 0',
-    paddingForCollapsiblePanelSectionWrapper: 'var(--spacing-50) 0 var(--spacing-70) calc(var(--spacing-30) + var(--spacing-10))',
-    paddingForCollapsiblePanelSectionWrapperAsCondensed: 'var(--spacing-40) 0 var(--spacing-70) calc(var(--spacing-30) + var(--spacing-10))',
+    paddingForCollapsiblePanelSectionWrapper: 'var(--spacing-50) 0 0 calc(var(--spacing-30) + var(--spacing-10))',
+    paddingForCollapsiblePanelSectionWrapperAsCondensed: 'var(--spacing-40) 0 0 calc(var(--spacing-30) + var(--spacing-10))',
     paddingForCollapsiblePanelSectionDescription: '0 0 var(--spacing-40)',
     paddingForCollapsiblePanelSectionDescriptionAsCondensed: '0 0 var(--spacing-40)',
     paddingForInput: '16px',
@@ -1510,7 +1509,7 @@ var withThemeContext = function withThemeContext(WrappedComponent) {
 };
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "15.14.0";
+var version = "15.14.1";
 
 exports.ThemeProvider = ThemeProvider;
 exports.customProperties = designTokens$1;

package/dist/commercetools-uikit-design-system.esm.js

@@ -511,7 +511,6 @@ var themes = {
     sizeHeightTag: '26px'
   },
   test: {
-    colorPrimary: '#00b39e',
     fontFamily: "'Inter', system-ui",
     alignItemsForSelectInputTag: 'center',
     backgroundColorForButtonWhenActive: 'hsl(0deg 0% 10% / 10%)',
@@ -759,8 +758,8 @@ var themes = {
     paddingForTableManagerDraggableTag: 'var(--spacing-10) 0',
     paddingForCollapsiblePanelHeader: 'var(--spacing-30) 0',
     paddingForCollapsiblePanelHeaderAsCondensed: 'var(--spacing-20) 0',
-    paddingForCollapsiblePanelSectionWrapper: 'var(--spacing-50) 0 var(--spacing-70) calc(var(--spacing-30) + var(--spacing-10))',
-    paddingForCollapsiblePanelSectionWrapperAsCondensed: 'var(--spacing-40) 0 var(--spacing-70) calc(var(--spacing-30) + var(--spacing-10))',
+    paddingForCollapsiblePanelSectionWrapper: 'var(--spacing-50) 0 0 calc(var(--spacing-30) + var(--spacing-10))',
+    paddingForCollapsiblePanelSectionWrapperAsCondensed: 'var(--spacing-40) 0 0 calc(var(--spacing-30) + var(--spacing-10))',
     paddingForCollapsiblePanelSectionDescription: '0 0 var(--spacing-40)',
     paddingForCollapsiblePanelSectionDescriptionAsCondensed: '0 0 var(--spacing-40)',
     paddingForInput: '16px',
@@ -1485,6 +1484,6 @@ var withThemeContext = function withThemeContext(WrappedComponent) {
 };
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "15.14.0";
+var version = "15.14.1";
 
 export { ThemeProvider, designTokens$1 as customProperties, designTokens$1 as designTokens, themes, transformTokensToCssVarsReferences, transformTokensToCssVarsValues, useTheme, version, withThemeContext };

package/dist/declarations/src/design-tokens.d.ts

@@ -482,7 +482,6 @@ export declare const themes: {
         readonly sizeHeightTag: "26px";
     };
     readonly test: {
-        readonly colorPrimary: "#00b39e";
         readonly fontFamily: "'Inter', system-ui";
         readonly alignItemsForSelectInputTag: "center";
         readonly backgroundColorForButtonWhenActive: "hsl(0deg 0% 10% / 10%)";
@@ -730,8 +729,8 @@ export declare const themes: {
         readonly paddingForTableManagerDraggableTag: "var(--spacing-10) 0";
         readonly paddingForCollapsiblePanelHeader: "var(--spacing-30) 0";
         readonly paddingForCollapsiblePanelHeaderAsCondensed: "var(--spacing-20) 0";
-        readonly paddingForCollapsiblePanelSectionWrapper: "var(--spacing-50) 0 var(--spacing-70) calc(var(--spacing-30) + var(--spacing-10))";
-        readonly paddingForCollapsiblePanelSectionWrapperAsCondensed: "var(--spacing-40) 0 var(--spacing-70) calc(var(--spacing-30) + var(--spacing-10))";
+        readonly paddingForCollapsiblePanelSectionWrapper: "var(--spacing-50) 0 0 calc(var(--spacing-30) + var(--spacing-10))";
+        readonly paddingForCollapsiblePanelSectionWrapperAsCondensed: "var(--spacing-40) 0 0 calc(var(--spacing-30) + var(--spacing-10))";
         readonly paddingForCollapsiblePanelSectionDescription: "0 0 var(--spacing-40)";
         readonly paddingForCollapsiblePanelSectionDescriptionAsCondensed: "0 0 var(--spacing-40)";
         readonly paddingForInput: "16px";

package/materials/internals/definition.yaml

@@ -220,12 +220,6 @@ choiceGroupsByTheme:
         break-point-jumbodesktop: 1920px
 
   test:
-    colors:
-      label: Colors
-      prefix: color
-      description: Dark theme colors overwrite
-      choices:
-        color-primary: '#00b39e'
     fontFamilies:
       label: Font families
       prefix: font-family
@@ -1891,9 +1885,9 @@ decisionGroupsByTheme:
         padding-for-collapsible-panel-header-as-condensed:
           choice: 'var(--spacing-20) 0'
         padding-for-collapsible-panel-section-wrapper:
-          choice: 'var(--spacing-50) 0 var(--spacing-70) calc(var(--spacing-30) + var(--spacing-10))'
+          choice: 'var(--spacing-50) 0 0 calc(var(--spacing-30) + var(--spacing-10))'
         padding-for-collapsible-panel-section-wrapper-as-condensed:
-          choice: 'var(--spacing-40) 0 var(--spacing-70) calc(var(--spacing-30) + var(--spacing-10))'
+          choice: 'var(--spacing-40) 0 0 calc(var(--spacing-30) + var(--spacing-10))'
         padding-for-collapsible-panel-section-description:
           choice: '0 0 var(--spacing-40)'
         padding-for-collapsible-panel-section-description-as-condensed:

package/materials/internals/story/samplers.js

@@ -0,0 +1,82 @@
+import styled from '@emotion/styled';
+
+const BasicSample = styled.div``;
+
+const BorderRadiusSample = styled.div`
+  width: calc(${(props) => props.value} + 2 * ${(props) => props.value});
+  min-width: 20px;
+  height: calc(${(props) => props.value} + 2 * ${(props) => props.value});
+  min-height: 20px;
+  background-color: pink;
+  border-radius: ${(props) => props.value};
+  display: inline-block;
+  margin: 0 10px;
+`;
+
+const ColorSample = styled.div`
+  width: 30px;
+  height: 30px;
+  background-color: ${(props) => props.value};
+  box-shadow: inset 0 0 5px 0 rgba(0, 0, 0, 0.1);
+  display: inline-block;
+`;
+
+const FontColorSampleStyle = styled.div`
+  color: ${(props) => props.value};
+  font-size: 24pt;
+  font-weight: bolder;
+  display: inline-block;
+`;
+const FontColorSample = (props) => (
+  <FontColorSampleStyle {...props}>Aa</FontColorSampleStyle>
+);
+
+const FontSizeSampleStyle = styled.div`
+  font-size: ${(props) => props.value};
+  font-weight: bolder;
+  display: inline-block;
+`;
+const FontSizeSample = (props) => (
+  <FontSizeSampleStyle {...props}>Aa</FontSizeSampleStyle>
+);
+
+const FontWeightSampleStyle = styled.div`
+  font-weight: ${(props) => props.value};
+  font-size: 2rem;
+  display: inline-block;
+`;
+const FontWeightSample = (props) => (
+  <FontWeightSampleStyle {...props}>Aa</FontWeightSampleStyle>
+);
+
+const ShadowSample = styled.div`
+  width: 50px;
+  height: 50px;
+  box-shadow: ${(props) => props.value};
+  display: inline-block;
+  margin: 0 10px;
+`;
+
+const SpacingSample = styled.div`
+  width: ${(props) => props.value};
+  height: ${(props) => props.value};
+  background-color: lightblue;
+  display: inline-block;
+  margin: 0 10px;
+`;
+
+const samplersMap = {
+  'background-color': ColorSample,
+  'border-color': ColorSample,
+  'border-radius': BorderRadiusSample,
+  color: ColorSample,
+  'font-color': FontColorSample,
+  'font-size': FontSizeSample,
+  'font-weight': FontWeightSample,
+  'icon-color': ColorSample,
+  shadow: ShadowSample,
+  spacing: SpacingSample,
+};
+
+export const getSampleComponent = (cssRuleName) =>
+  samplersMap[cssRuleName] || BasicSample;

package/materials/internals/story/shared-components.js

@@ -0,0 +1,270 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+/* eslint-disable jsx-a11y/anchor-has-content */
+import styled from '@emotion/styled';
+import PropTypes from 'prop-types';
+import upperFirst from 'lodash/upperFirst';
+import deprecatedTokens from '../deprecated-tokens';
+
+const getIsDeprecated = (token) => deprecatedTokens.includes(token);
+
+const filterGroupItemsValues = (groupItems, searchText) =>
+  Object.entries(groupItems).filter(
+    ([key, value]) =>
+      key.toLowerCase().includes(searchText.toLowerCase()) ||
+      value?.toLowerCase?.().includes(searchText.toLowerCase()) ||
+      value?.description?.toLowerCase().includes(searchText.toLowerCase())
+  );
+
+const Table = styled.table`
+  border: 1px solid #ccc;
+  border-collapse: collapse;
+  & tr td {
+    border: 1px solid #ccc;
+    padding: 15px;
+    text-align: left;
+  }
+  & thead td {
+    background-color: gray;
+    color: white;
+    font-weight: bold;
+  }
+`;
+
+const GroupStyle = styled.div`
+  padding: 10px;
+  display: ${(props) => (props.isVisible ? 'block' : 'none')};
+`;
+
+export const Token = styled.p`
+  font-family: monospace;
+`;
+
+const DeprecationBadge = () => <b style={{ color: 'orange' }}>DEPRECATED</b>;
+DeprecationBadge.displayName = 'DeprecationBadge';
+
+export const TokenBodyCell = (props) => (
+  <>
+    <Token>{props.tokenName}</Token>
+    {getIsDeprecated(props.tokenName) && <DeprecationBadge />}
+  </>
+);
+TokenBodyCell.propTypes = {
+  tokenName: PropTypes.string.isRequired,
+};
+
+export const TokenGroupLinks = (props) => {
+  return (
+    <>
+      <a
+        href={`#${props.id}`}
+        onClick={(event) => {
+          event.preventDefault();
+          window.scrollTo({
+            top: document.getElementById(props.id).offsetTop,
+            behavior: 'smooth',
+          });
+        }}
+      >
+        {props.children}
+      </a>
+      {Boolean(props.config) && (
+        <ul>
+          {Object.entries(props.config).map(
+            ([key, configGroup]) =>
+              filterGroupItemsValues(
+                configGroup.choices || configGroup.decisions,
+                props.filterText
+              ).length > 0 && (
+                <li key={key}>
+                  <a
+                    href={`#${props.id}-${configGroup.prefix}`}
+                    onClick={(event) => {
+                      event.preventDefault();
+                      window.scrollTo({
+                        top: document.getElementById(
+                          `${props.id}-${configGroup.prefix}`
+                        ).offsetTop,
+                        behavior: 'smooth',
+                      });
+                    }}
+                  >
+                    {configGroup.label}
+                  </a>
+                </li>
+              )
+          )}
+        </ul>
+      )}
+    </>
+  );
+};
+TokenGroupLinks.propTypes = {
+  id: PropTypes.string.isRequired,
+  config: PropTypes.object,
+  filterText: PropTypes.string,
+  children: PropTypes.node.isRequired,
+};
+
+const TableBody = (props) => {
+  return (
+    <tbody>
+      {props.groupItems.map(([tokenName, tokenData]) => {
+        return (
+          <tr key={`${props.groupItemsPrefix}-${tokenName}-body-row-key`}>
+            {props.columnsConfig.map((columnConfig) => (
+              <td
+                key={`${props.groupItemsPrefix}-${tokenName}-${columnConfig.key}-body-cell-key`}
+              >
+                {props.cellRenderer({
+                  columnKey: columnConfig.key,
+                  groupItemsPrefix: props.groupItemsPrefix,
+                  tokenName,
+                  tokenData,
+                  themeName: props.themeName,
+                })}
+              </td>
+            ))}
+          </tr>
+        );
+      })}
+    </tbody>
+  );
+};
+TableBody.propTypes = {
+  groupItems: PropTypes.array.isRequired,
+  groupItemsPrefix: PropTypes.string,
+  themeName: PropTypes.string.isRequired,
+  columnsConfig: PropTypes.arrayOf(
+    PropTypes.shape({
+      key: PropTypes.string.isRequired,
+      label: PropTypes.string,
+    })
+  ).isRequired,
+  cellRenderer: PropTypes.func.isRequired,
+};
+
+const TokensDetailsTable = (props) => (
+  <Table>
+    <thead>
+      <tr>
+        {props.columnsConfig.map((columnsConfig, index) => (
+          <td
+            key={columnsConfig.key}
+            style={{
+              minWidth: index === 0 ? 400 : 'auto',
+            }}
+          >
+            {columnsConfig.label || upperFirst(columnsConfig.key)}
+          </td>
+        ))}
+      </tr>
+    </thead>
+    <TableBody
+      groupItems={props.tokensGroupData}
+      groupItemsPrefix={props.tokensGroupPrefix}
+      themeName={props.themeName}
+      columnsConfig={props.columnsConfig}
+      cellRenderer={props.cellRenderer}
+    />
+  </Table>
+);
+TokensDetailsTable.propTypes = {
+  columnsConfig: PropTypes.arrayOf(
+    PropTypes.shape({
+      key: PropTypes.string.isRequired,
+      label: PropTypes.string,
+    })
+  ).isRequired,
+  cellRenderer: PropTypes.func.isRequired,
+  themeName: PropTypes.string.isRequired,
+  tokensGroupPrefix: PropTypes.string,
+  tokensGroupData: PropTypes.array.isRequired,
+};
+
+export function SingleTokensGroupDetails(props) {
+  const filteredGroupItems = filterGroupItemsValues(
+    props.groupItems,
+    props.filterText
+  );
+
+  return (
+    <section>
+      <h2 id={props.id}>{props.title || upperFirst(props.id)}</h2>
+      {props.subtitle && <p>{props.subtitle}</p>}
+      <GroupStyle isVisible={filteredGroupItems.length > 0}>
+        <TokensDetailsTable
+          columnsConfig={props.columnsConfig}
+          cellRenderer={props.cellRenderer}
+          themeName={props.themeName}
+          tokensGroupPrefix=""
+          tokensGroupData={filteredGroupItems}
+        />
+      </GroupStyle>
+    </section>
+  );
+}
+SingleTokensGroupDetails.propTypes = {
+  id: PropTypes.string.isRequired,
+  title: PropTypes.string,
+  subtitle: PropTypes.string,
+  filterText: PropTypes.string.isRequired,
+  groupItems: PropTypes.object.isRequired,
+  columnsConfig: PropTypes.arrayOf(
+    PropTypes.shape({
+      key: PropTypes.string.isRequired,
+      label: PropTypes.string,
+    })
+  ).isRequired,
+  cellRenderer: PropTypes.func.isRequired,
+  themeName: PropTypes.string.isRequired,
+};
+
+export const MultiTokensGroupDetails = (props) => (
+  <section>
+    <h2 id={props.id}>{props.title || upperFirst(props.id)}</h2>
+    {props.subtitle && <p>{props.subtitle}</p>}
+    {Object.entries(props.tokensGroupData).map(
+      ([tokenGroupKey, tokenGroupConfig]) => {
+        const filteredTokensGroups = filterGroupItemsValues(
+          tokenGroupConfig[props.id],
+          props.filterText
+        );
+
+        return (
+          <GroupStyle
+            key={`tokens-group_${tokenGroupKey}`}
+            isVisible={filteredTokensGroups.length > 0}
+          >
+            <a id={`${props.id}-${tokenGroupConfig.prefix}`} />
+            <h3>{tokenGroupConfig.label}</h3>
+            {Boolean(tokenGroupConfig.description) && (
+              <p>{tokenGroupConfig.description}</p>
+            )}
+            <TokensDetailsTable
+              columnsConfig={props.columnsConfig}
+              cellRenderer={props.cellRenderer}
+              themeName={props.themeName}
+              tokensGroupPrefix={tokenGroupConfig.prefix}
+              tokensGroupData={filteredTokensGroups}
+            />
+          </GroupStyle>
+        );
+      }
+    )}
+  </section>
+);
+MultiTokensGroupDetails.propTypes = {
+  id: PropTypes.string.isRequired,
+  title: PropTypes.string,
+  subtitle: PropTypes.string,
+  filterText: PropTypes.string.isRequired,
+  tokensGroupData: PropTypes.object.isRequired,
+  columnsConfig: PropTypes.arrayOf(
+    PropTypes.shape({
+      key: PropTypes.string.isRequired,
+      label: PropTypes.string,
+    })
+  ).isRequired,
+  cellRenderer: PropTypes.func.isRequired,
+  themeName: PropTypes.string.isRequired,
+};

package/materials/internals/tokens.story.js

@@ -1,36 +1,26 @@
-import { Component } from 'react';
-import PropTypes from 'prop-types';
+/* eslint-disable default-case */
+import { useCallback, useMemo, useState } from 'react';
 import { storiesOf } from '@storybook/react';
 import styled from '@emotion/styled';
-import TextInput from '@commercetools-uikit/text-input';
 import merge from 'lodash/merge';
-import { designTokens } from '@commercetools-uikit/design-system';
+import TextInput from '@commercetools-uikit/text-input';
+import { designTokens, useTheme } from '@commercetools-uikit/design-system';
 import Readme from './TOKENS.md';
 import definition from './definition.yaml';
-import deprecatedTokens from './deprecated-tokens';
-
-const choiceGroupsByTheme =
-  process.env.NODE_ENV !== 'production'
-    ? definition.choiceGroupsByTheme
-    : { default: definition.choiceGroupsByTheme.default };
-const allThemesNames = Object.keys(choiceGroupsByTheme);
-
-const getIsDeprecated = (token) => deprecatedTokens.includes(token);
-
-const Table = styled.table`
-  border: 1px solid #ccc;
-  border-collapse: collapse;
-  & tr td {
-    border: 1px solid #ccc;
-    padding: 15px;
-    text-align: left;
-  }
-  & thead td {
-    background-color: gray;
-    color: white;
-    font-weight: bold;
-  }
-`;
+import {
+  MultiTokensGroupDetails,
+  Token,
+  TokenBodyCell,
+  TokenGroupLinks,
+  SingleTokensGroupDetails,
+} from './story/shared-components';
+import { getSampleComponent } from './story/samplers';
+
+const findChoiceValue = (theme, choiceName) => {
+  return Object.values(theme)
+    .map((choiceGroup) => choiceGroup.choices)
+    .find((choices) => choices[choiceName])?.[choiceName];
+};
 
 const Background = styled.div`
   background-color: rgba(0, 0, 0, 0.01);
@@ -42,668 +32,181 @@ const Background = styled.div`
   }
 `;
 
-const GroupStyle = styled.div`
-  padding: 10px;
-  display: ${(props) => (props.isVisible ? 'block' : 'none')};
-`;
-
-const Token = styled.p`
-  font-family: monospace;
-`;
-
-const TokenRow = styled.td`
-  min-width: 400px;
-`;
-
-const Description = styled.p`
-  font-size: 10pt;
-  margin: 10px 0;
+const DetailsGroupsContainer = styled.main`
+  display: flex;
+  flex-direction: column;
+  gap: 40px;
 `;
 
-const DeprecationBadge = () => <b style={{ color: 'orange' }}>DEPRECATED</b>;
-DeprecationBadge.displayName = 'DeprecationBadge';
-
-const getThemeChoiceByName = (theme, choiceName) =>
-  Object.values(theme)
-    .map((choiceGroup) => choiceGroup.choices)
-    .find((choices) => choices[choiceName]);
-
-const getChoiceValue = (choiceName, theme) => {
-  const defaultChoice = getThemeChoiceByName(
-    choiceGroupsByTheme.default,
-    choiceName
-  );
-
-  const themeChoice = getThemeChoiceByName(
-    choiceGroupsByTheme[theme],
-    choiceName
-  );
-
-  return defaultChoice
-    ? themeChoice?.[choiceName] ?? defaultChoice[choiceName]
-    : undefined;
+const BasicCellRenderer = (cellData) => {
+  if (cellData.columnKey !== 'description') {
+    return <TokenBodyCell tokenName={cellData.tokenName} />;
+  } else {
+    return cellData.tokenData.description;
+  }
 };
 
-const filterChoiceGroupValues = (choices, searchText) =>
-  Object.entries(choices).filter(
-    ([key, value]) =>
-      key.toLowerCase().includes(searchText.toLowerCase()) ||
-      value.toLowerCase().includes(searchText.toLowerCase())
-  );
-
-const filterDecisionGroupValues = (decisions, searchText) =>
-  Object.entries(decisions).filter(
-    ([key, decision]) =>
-      key.toLowerCase().includes(searchText.toLowerCase()) ||
-      decision.choice.toLowerCase().includes(searchText.toLowerCase()) ||
-      getChoiceValue(decision.choice)
-        .toLowerCase()
-        .includes(searchText.toLowerCase())
-  );
-
-const filterStatesGroupValues = (states, searchText) =>
-  Object.entries(states).filter(
-    ([key, state]) =>
-      key.toLowerCase().includes(searchText.toLowerCase()) ||
-      (state.description &&
-        state.description.toLowerCase().includes(searchText.toLowerCase()))
-  );
-
-const filterComponentGroupsGroupValues = (componentGroups, searchText) =>
-  Object.entries(componentGroups).filter(
-    ([key, state]) =>
-      key.toLowerCase().includes(searchText.toLowerCase()) ||
-      (state.description &&
-        state.description.toLowerCase().includes(searchText.toLowerCase()))
-  );
-
-const filterVariantsGroupValues = (variants, searchText) =>
-  Object.entries(variants).filter(
-    ([key, state]) =>
-      key.toLowerCase().includes(searchText.toLowerCase()) ||
-      (state.description &&
-        state.description.toLowerCase().includes(searchText.toLowerCase()))
-  );
-
-const getDefaultThemeChoiceGroupProperty = (choiceGroup, property) =>
-  choiceGroupsByTheme.default[choiceGroup][property];
-
-const ChoiceGroup = (props) => {
-  const choices = Object.entries(choiceGroupsByTheme).reduce(
-    (acc, [theme, themeChoices]) => {
-      // default theme is used as a blueprint
-      const themeChoicesBasedOnDefaultTheme = merge(
+function Story() {
+  const [filterText, setFilterText] = useState('');
+  const { theme } = useTheme();
+  const currentThemeChoices = useMemo(() => {
+    return merge(
+      {},
+      definition.choiceGroupsByTheme.default,
+      definition.choiceGroupsByTheme[theme]
+    );
+  }, [theme]);
+  const currentThemeDecisions = useMemo(
+    () =>
+      merge(
         {},
-        choiceGroupsByTheme.default,
-        themeChoices
-      );
-      const filteredThemeChoices = Object.fromEntries(
-        filterChoiceGroupValues(
-          themeChoicesBasedOnDefaultTheme[props.choiceGroup].choices,
-          props.searchText
-        )
-      );
-      const filteredThemeChoicesNames = Object.keys(filteredThemeChoices);
-
-      return merge(
-        acc,
-        ...filteredThemeChoicesNames.map((name) => ({
-          [name]: { [theme]: filteredThemeChoices[name] },
-        }))
-      );
-    },
-    {}
+        definition.decisionGroupsByTheme.default,
+        definition.decisionGroupsByTheme[theme]
+      ),
+    [theme]
   );
 
-  return (
-    <GroupStyle isVisible={Object.values(choices).length > 0}>
-      <a
-        id={`choice-${getDefaultThemeChoiceGroupProperty(
-          props.choiceGroup,
-          'prefix'
-        )}`}
-      />
-      <h3>{getDefaultThemeChoiceGroupProperty(props.choiceGroup, 'label')}</h3>
-      {getDefaultThemeChoiceGroupProperty(props.choiceGroup, 'description') && (
-        <p>
-          {getDefaultThemeChoiceGroupProperty(props.choiceGroup, 'description')}
-        </p>
-      )}
-      <Table>
-        <thead>
-          <tr>
-            <TokenRow>Token</TokenRow>
-            {allThemesNames.map((theme) => {
-              return <td key={theme}>{theme}</td>;
-            })}
-          </tr>
-        </thead>
-        <tbody>
-          {Object.entries(choices).map(([name, values]) => (
-            <tr key={name}>
-              <td>
-                <>
-                  <Token>{name}</Token>
-                  {getIsDeprecated(name) && <DeprecationBadge />}
-                </>
-              </td>
-              {Object.entries(values).map(([theme, value]) => (
-                <td key={theme}>{props.renderSample(value)}</td>
-              ))}
-            </tr>
-          ))}
-        </tbody>
-      </Table>
-    </GroupStyle>
-  );
-};
-ChoiceGroup.displayName = 'ChoiceGroup';
-ChoiceGroup.propTypes = {
-  searchText: PropTypes.string.isRequired,
-  choiceGroup: PropTypes.shape({
-    label: PropTypes.string.isRequired,
-    prefix: PropTypes.string.isRequired,
-    description: PropTypes.string,
-    choices: PropTypes.objectOf(PropTypes.string),
-  }).isRequired,
-  renderSample: PropTypes.func.isRequired,
-};
-ChoiceGroup.defaultProps = {
-  renderSample: (value) => value,
-};
-
-const DecisionGroup = (props) => {
-  const decisions = filterDecisionGroupValues(
-    props.decisionGroup.decisions,
-    props.searchText
-  );
-  return (
-    <GroupStyle isVisible={decisions.length > 0}>
-      <a id={`decision-${props.decisionGroup.prefix}`} />
-      <h3>{props.decisionGroup.label}</h3>
-      <Table>
-        <thead>
-          <tr>
-            <TokenRow>Token</TokenRow>
-            <td>Choice</td>
-            {allThemesNames.map((theme) => {
-              return <td key={theme}>{theme}</td>;
-            })}
-          </tr>
-        </thead>
-        <tbody>
-          {decisions.map(([name, decision]) => (
-            <tr key={name}>
-              <td>
-                <Token>{name}</Token>
-                <Description>{decision.description}</Description>
-                {decision.deprecated && <DeprecationBadge />}
-              </td>
-              <td>
-                <Token>{decision.choice}</Token>
-              </td>
-              {allThemesNames.map((theme) => {
-                return (
-                  <td key={theme}>
-                    {props.renderSample(
-                      getChoiceValue(decision.choice, theme),
-                      name
-                    )}
-                  </td>
-                );
-              })}
-            </tr>
-          ))}
-        </tbody>
-      </Table>
-    </GroupStyle>
-  );
-};
-DecisionGroup.displayName = 'DecisionGroup';
-DecisionGroup.propTypes = {
-  searchText: PropTypes.string.isRequired,
-  decisionGroup: PropTypes.shape({
-    label: PropTypes.string.isRequired,
-    prefix: PropTypes.string.isRequired,
-    decisions: PropTypes.shape({
-      choice: PropTypes.string.isRequired,
-      description: PropTypes.string,
-    }),
-  }).isRequired,
-  renderSample: PropTypes.func.isRequired,
-};
-DecisionGroup.defaultProps = {
-  renderSample: (value) => value,
-};
-
-const StatesGroup = (props) => {
-  const states = filterStatesGroupValues(props.states, props.searchText);
-  return (
-    <GroupStyle isVisible={states.length > 0}>
-      <Table>
-        <thead>
-          <tr>
-            <TokenRow>State</TokenRow>
-            <td>Description</td>
-          </tr>
-        </thead>
-        <tbody>
-          {states.map(([name, state]) => (
-            <tr key={name}>
-              <td>
-                <Token>{name}</Token>
-                {state.deprecated && <DeprecationBadge />}
-              </td>
-              <td>{state.description}</td>
-            </tr>
-          ))}
-        </tbody>
-      </Table>
-    </GroupStyle>
-  );
-};
-StatesGroup.displayName = 'StatesGroup';
-StatesGroup.propTypes = {
-  searchText: PropTypes.string.isRequired,
-  states: PropTypes.shape({
-    decisions: PropTypes.objectOf(PropTypes.string),
-    description: PropTypes.string,
-  }).isRequired,
-};
-
-const ComponentGroupsGroup = (props) => {
-  const componentGroups = filterComponentGroupsGroupValues(
-    props.states,
-    props.searchText
-  );
-  return (
-    <GroupStyle isVisible={componentGroups.length > 0}>
-      <Table>
-        <thead>
-          <tr>
-            <TokenRow>State</TokenRow>
-            <td>Description</td>
-          </tr>
-        </thead>
-        <tbody>
-          {componentGroups.map(([name, componentGroup]) => (
-            <tr key={name}>
-              <td>
-                <Token>{name}</Token>
-                {componentGroup.deprecated && <DeprecationBadge />}
-              </td>
-              <td>{componentGroup.description}</td>
-            </tr>
-          ))}
-        </tbody>
-      </Table>
-    </GroupStyle>
-  );
-};
-ComponentGroupsGroup.displayName = 'ComponentGroupsGroup';
-ComponentGroupsGroup.propTypes = {
-  searchText: PropTypes.string.isRequired,
-  states: PropTypes.shape({
-    decisions: PropTypes.objectOf(PropTypes.string),
-  }).isRequired,
-};
+  const searchTextChangeHandler = useCallback((event) => {
+    setFilterText(event.target.value);
+  }, []);
 
-const VariantsGroup = (props) => {
-  const variants = filterVariantsGroupValues(props.states, props.searchText);
   return (
-    <GroupStyle isVisible={variants.length > 0}>
-      <Table>
-        <thead>
-          <tr>
-            <TokenRow>State</TokenRow>
-            <td>Description</td>
-          </tr>
-        </thead>
-        <tbody>
-          {variants.map(([name, variant]) => (
-            <tr key={name}>
-              <td>
-                <Token>{name}</Token>
-                {variant.deprecated && <DeprecationBadge />}
-              </td>
-              <td>{variant.description}</td>
-            </tr>
-          ))}
-        </tbody>
-      </Table>
-    </GroupStyle>
-  );
-};
-VariantsGroup.displayName = 'VariantsGroup';
-VariantsGroup.propTypes = {
-  searchText: PropTypes.string.isRequired,
-  states: PropTypes.shape({
-    decisions: PropTypes.objectOf(PropTypes.string),
-    description: PropTypes.string,
-  }).isRequired,
-};
-
-const ColorSample = styled.div`
-  width: 30px;
-  height: 30px;
-  background-color: ${(props) => props.color};
-  box-shadow: inset 0 0 5px 0 rgba(0, 0, 0, 0.1);
-  display: inline-block;
-`;
-
-const FontColorSampleStyle = styled.div`
-  color: ${(props) => props.color};
-  font-size: 24pt;
-  font-weight: bolder;
-  display: inline-block;
-`;
-
-const FontColorSample = (props) => (
-  <FontColorSampleStyle {...props}>Aa</FontColorSampleStyle>
-);
-FontColorSample.displayName = 'FontColorSample';
-
-const BorderRadiusSample = styled.div`
-  width: calc(
-    ${(props) => props.borderRadius} + 2 * ${(props) => props.borderRadius}
-  );
-  min-width: 20px;
-  height: calc(
-    ${(props) => props.borderRadius} + 2 * ${(props) => props.borderRadius}
-  );
-  min-height: 20px;
-  background-color: pink;
-  border-radius: ${(props) => props.borderRadius};
-  display: inline-block;
-  margin: 0 10px;
-`;
-
-const ShadowSample = styled.div`
-  width: 50px;
-  height: 50px;
-  box-shadow: ${(props) => props.shadow};
-  display: inline-block;
-  margin: 0 10px;
-`;
-
-const SpacingSample = styled.div`
-  width: ${(props) => props.spacing};
-  height: ${(props) => props.spacing};
-  background-color: lightblue;
-  display: inline-block;
-  margin: 0 10px;
-`;
-
-class Story extends Component {
-  static displayName = 'Story';
-
-  state = {
-    searchText: '',
-  };
-
-  render() {
-    return (
-      <Background>
+    <Background>
+      <header>
         <TextInput
-          value={this.state.searchText}
-          onChange={(event) => {
-            this.setState({ searchText: event.target.value });
-          }}
-          horizontalConstraint="m"
+          value={filterText}
+          onChange={searchTextChangeHandler}
+          horizontalConstraint={13}
         />
         <h2>Table of Contents</h2>
         <ul>
           <li>
-            <a
-              href="#choices"
-              onClick={(event) => {
-                event.preventDefault();
-                window.scrollTo(
-                  0,
-                  document.getElementById('choices').offsetTop
-                );
-              }}
+            <TokenGroupLinks
+              id="choices"
+              config={currentThemeChoices}
+              filterText={filterText}
             >
               Choices
-            </a>
-            <ul>
-              {Object.entries(choiceGroupsByTheme.default).map(
-                ([key, choiceGroup]) =>
-                  filterChoiceGroupValues(
-                    choiceGroup.choices,
-                    this.state.searchText
-                  ).length > 0 && (
-                    <li key={key}>
-                      <a
-                        href={`#${choiceGroup.prefix}`}
-                        onClick={(event) => {
-                          event.preventDefault();
-                          window.scrollTo(
-                            0,
-                            document.getElementById(
-                              `choice-${choiceGroup.prefix}`
-                            ).offsetTop
-                          );
-                        }}
-                      >
-                        {choiceGroup.label}
-                      </a>
-                    </li>
-                  )
-              )}
-            </ul>
+            </TokenGroupLinks>
           </li>
           <li>
-            <a
-              href="#states"
-              onClick={(event) => {
-                event.preventDefault();
-                window.scrollTo(0, document.getElementById('states').offsetTop);
-              }}
-            >
-              States
-            </a>
+            <TokenGroupLinks id="states">States</TokenGroupLinks>
           </li>
           <li>
-            <a
-              href="#component-groups"
-              onClick={(event) => {
-                event.preventDefault();
-                window.scrollTo(
-                  0,
-                  document.getElementById('component-groups').offsetTop
-                );
-              }}
-            >
+            <TokenGroupLinks id="component-groups">
               Component Groups
-            </a>
+            </TokenGroupLinks>
           </li>
           <li>
-            <a
-              href="#variants"
-              onClick={(event) => {
-                event.preventDefault();
-                window.scrollTo(
-                  0,
-                  document.getElementById('variants').offsetTop
-                );
-              }}
-            >
-              Variants
-            </a>
+            <TokenGroupLinks id="variants">Variants</TokenGroupLinks>
           </li>
           <li>
-            {' '}
-            <a
-              href="#decisions"
-              onClick={(event) => {
-                event.preventDefault();
-                window.scrollTo(
-                  0,
-                  document.getElementById('decisions').offsetTop
-                );
-              }}
+            <TokenGroupLinks
+              id="decisions"
+              config={currentThemeDecisions}
+              filterText={filterText}
             >
               Decisions
-            </a>{' '}
-            <ul>
-              {Object.entries(definition.decisionGroupsByTheme.default).map(
-                ([key, decisionGroup]) =>
-                  filterDecisionGroupValues(
-                    decisionGroup.decisions,
-                    this.state.searchText
-                  ).length > 0 && (
-                    <li key={key}>
-                      <a
-                        href={`#${decisionGroup.prefix}`}
-                        onClick={(event) => {
-                          event.preventDefault();
-                          window.scrollTo(
-                            0,
-                            document.getElementById(
-                              `decision-${decisionGroup.prefix}`
-                            ).offsetTop
-                          );
-                        }}
-                      >
-                        {decisionGroup.label}
-                      </a>
-                    </li>
-                  )
-              )}
-            </ul>
+            </TokenGroupLinks>
           </li>
         </ul>
-
-        <h2 id="choices">Choices</h2>
-        <p>
-          This is the palette of values you may chose from when creating design
-          tokens.
-        </p>
-        <ChoiceGroup
-          choiceGroup="colors"
-          searchText={this.state.searchText}
-          renderSample={(value) => (
-            <>
-              <ColorSample color={value} /> {value}
-            </>
-          )}
-        />
-        <ChoiceGroup
-          choiceGroup="borderRadiuses"
-          searchText={this.state.searchText}
-          renderSample={(value) => (
-            <>
-              <BorderRadiusSample borderRadius={value} /> {value}
-            </>
-          )}
-        />
-        <ChoiceGroup
-          choiceGroup="shadows"
-          searchText={this.state.searchText}
-          renderSample={(value) => (
-            <>
-              <ShadowSample shadow={value} /> {value}
-            </>
-          )}
-        />
-        <ChoiceGroup
-          choiceGroup="constraints"
-          searchText={this.state.searchText}
-        />
-        <ChoiceGroup
-          choiceGroup="spacings"
-          searchText={this.state.searchText}
-          renderSample={(value) => (
-            <>
-              <SpacingSample spacing={value} /> {value}
-            </>
-          )}
-        />
-        <ChoiceGroup
-          choiceGroup="transitions"
-          searchText={this.state.searchText}
-        />
-        <ChoiceGroup
-          choiceGroup="breakpoints"
-          searchText={this.state.searchText}
-        />
-
-        <h2 id="states">States</h2>
-        <StatesGroup
-          states={definition.states}
-          searchText={this.state.searchText}
-        />
-
-        <h2 id="component-groups">Component Groups</h2>
-        <ComponentGroupsGroup
-          states={definition.componentGroups}
-          searchText={this.state.searchText}
-        />
-
-        <h2 id="variants">Variants</h2>
-        <VariantsGroup
-          states={definition.variants}
-          searchText={this.state.searchText}
-        />
-
-        <h2 id="decisions">Decisions</h2>
-        <p>
-          These are specific decisions where a choice gets applied to an element
-          (optionally in a certain state).
-        </p>
-        <DecisionGroup
-          decisionGroup={
-            definition.decisionGroupsByTheme.default.backgroundColors
-          }
-          searchText={this.state.searchText}
-          renderSample={(value) => (
-            <>
-              <ColorSample color={value} /> {value}
-            </>
-          )}
-        />
-        <DecisionGroup
-          decisionGroup={definition.decisionGroupsByTheme.default.borderColors}
-          searchText={this.state.searchText}
-          renderSample={(value) => (
-            <>
-              <ColorSample color={value} /> {value}
-            </>
-          )}
-        />
-        <DecisionGroup
-          decisionGroup={
-            definition.decisionGroupsByTheme.default.borderRadiuses
-          }
-          searchText={this.state.searchText}
-          renderSample={(value) => (
-            <>
-              <BorderRadiusSample borderRadius={value} /> {value}
-            </>
-          )}
-        />
-        <DecisionGroup
-          decisionGroup={definition.decisionGroupsByTheme.default.fontColors}
-          searchText={this.state.searchText}
-          renderSample={(value) => (
-            <>
-              <FontColorSample color={value} /> {value}
-            </>
-          )}
-        />
-        <DecisionGroup
-          decisionGroup={definition.decisionGroupsByTheme.default.shadows}
-          searchText={this.state.searchText}
-          renderSample={(value) => (
-            <>
-              <ShadowSample shadow={value} /> {value}
-            </>
-          )}
+      </header>
+
+      <DetailsGroupsContainer>
+        <MultiTokensGroupDetails
+          id="choices"
+          subtitle="This is the palette of values you may chose from when creating design tokens."
+          themeName={theme}
+          filterText={filterText}
+          columnsConfig={[{ key: 'token' }, { key: 'value' }]}
+          cellRenderer={(data) => {
+            if (data.columnKey === 'token') {
+              return <Token>{data.tokenName}</Token>;
+            } else {
+              const ChoiceSample = getSampleComponent(data.groupItemsPrefix);
+              return (
+                <>
+                  <ChoiceSample value={data.tokenData} />
+                  &nbsp;{data.tokenData}
+                </>
+              );
+            }
+          }}
+          tokensGroupData={currentThemeChoices}
+        />
+
+        <SingleTokensGroupDetails
+          id="states"
+          columnsConfig={[{ key: 'state' }, { key: 'description' }]}
+          cellRenderer={BasicCellRenderer}
+          groupItems={definition.states}
+          themeName={theme}
+          filterText={filterText}
+        />
+
+        <SingleTokensGroupDetails
+          id="component-groups"
+          title="Component Groups"
+          columnsConfig={[
+            { key: 'component-group', label: 'Component Group' },
+            { key: 'description' },
+          ]}
+          cellRenderer={BasicCellRenderer}
+          groupItems={definition.componentGroups}
+          themeName={theme}
+          filterText={filterText}
+        />
+
+        <SingleTokensGroupDetails
+          id="variants"
+          columnsConfig={[{ key: 'variant' }, { key: 'description' }]}
+          cellRenderer={BasicCellRenderer}
+          groupItems={definition.variants}
+          themeName={theme}
+          filterText={filterText}
+        />
+
+        <MultiTokensGroupDetails
+          id="decisions"
+          subtitle="These are specific decisions where a choice gets applied to an element (optionally in a certain state)."
+          themeName={theme}
+          filterText={filterText}
+          columnsConfig={[
+            { key: 'token' },
+            { key: 'choice' },
+            { key: 'value' },
+          ]}
+          cellRenderer={(data) => {
+            switch (data.columnKey) {
+              case 'token':
+                return <Token>{data.tokenName}</Token>;
+              case 'choice':
+                return <Token>{data.tokenData.choice}</Token>;
+              case 'value':
+                const ChoiceSample = getSampleComponent(data.groupItemsPrefix);
+                const choiceValue = findChoiceValue(
+                  currentThemeChoices,
+                  data.tokenData.choice
+                );
+                if (choiceValue) {
+                  return (
+                    <>
+                      <ChoiceSample value={choiceValue} />
+                      &nbsp;{choiceValue}
+                    </>
+                  );
+                } else {
+                  return <Token>---</Token>;
+                }
+              default:
+                return null;
+            }
+          }}
+          tokensGroupData={currentThemeDecisions}
         />
-      </Background>
-    );
-  }
+      </DetailsGroupsContainer>
+    </Background>
+  );
 }
 
 storiesOf('Basics|Tokens', module)

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@commercetools-uikit/design-system",
   "description": "Core package of the commercetools design system.",
-  "version": "15.14.0",
+  "version": "15.14.1",
   "bugs": "https://github.com/commercetools/ui-kit/issues",
   "repository": {
     "type": "git",
@@ -25,7 +25,7 @@
   "dependencies": {
     "@babel/runtime": "^7.20.13",
     "@babel/runtime-corejs3": "^7.20.13",
-    "@commercetools-uikit/hooks": "15.14.0",
+    "@commercetools-uikit/hooks": "15.14.1",
     "@emotion/react": "^11.10.5",
     "lodash": "4.17.21",
     "prop-types": "15.8.1",