@commercetools-frontend/ui-kit 19.10.0 → 19.12.0

package/dist/commercetools-frontend-ui-kit.cjs.dev.js

@@ -89,7 +89,7 @@ var text__default = /*#__PURE__*/_interopDefault(text);
 var viewSwitcher__default = /*#__PURE__*/_interopDefault(viewSwitcher);
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "19.10.0";
+var version = "19.11.0";
 
 exports.i18n = i18n__namespace;
 Object.defineProperty(exports, 'LeadingIcon', {

package/dist/commercetools-frontend-ui-kit.cjs.prod.js

@@ -89,7 +89,7 @@ var text__default = /*#__PURE__*/_interopDefault(text);
 var viewSwitcher__default = /*#__PURE__*/_interopDefault(viewSwitcher);
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "19.10.0";
+var version = "19.11.0";
 
 exports.i18n = i18n__namespace;
 Object.defineProperty(exports, 'LeadingIcon', {

package/dist/commercetools-frontend-ui-kit.esm.js

@@ -38,6 +38,6 @@ export { useDataTableSortingState, usePaginationState, useRowSelection, useSorti
 export { customProperties, designTokens } from '@commercetools-uikit/design-system';
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "19.10.0";
+var version = "19.11.0";
 
 export { version };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@commercetools-frontend/ui-kit",
   "description": "A preset of all the UI-Kit components.",
-  "version": "19.10.0",
+  "version": "19.12.0",
   "bugs": "https://github.com/commercetools/ui-kit/issues",
   "repository": {
     "type": "git",
@@ -24,42 +24,42 @@
   "dependencies": {
     "@babel/runtime": "^7.20.13",
     "@babel/runtime-corejs3": "^7.20.13",
-    "@commercetools-uikit/accessible-hidden": "19.10.0",
-    "@commercetools-uikit/avatar": "19.10.0",
-    "@commercetools-uikit/buttons": "19.10.0",
-    "@commercetools-uikit/card": "19.10.0",
-    "@commercetools-uikit/collapsible": "19.10.0",
-    "@commercetools-uikit/collapsible-motion": "19.10.0",
-    "@commercetools-uikit/collapsible-panel": "19.10.0",
-    "@commercetools-uikit/constraints": "19.10.0",
-    "@commercetools-uikit/data-table": "19.10.0",
-    "@commercetools-uikit/data-table-manager": "19.10.0",
-    "@commercetools-uikit/design-system": "19.10.0",
-    "@commercetools-uikit/dropdown-menu": "19.10.0",
-    "@commercetools-uikit/field-errors": "19.10.0",
-    "@commercetools-uikit/field-label": "19.10.0",
-    "@commercetools-uikit/fields": "19.10.0",
-    "@commercetools-uikit/grid": "19.10.0",
-    "@commercetools-uikit/hooks": "19.10.0",
-    "@commercetools-uikit/i18n": "19.10.0",
-    "@commercetools-uikit/icons": "19.10.0",
-    "@commercetools-uikit/inputs": "19.10.0",
-    "@commercetools-uikit/label": "19.10.0",
-    "@commercetools-uikit/link": "19.10.0",
-    "@commercetools-uikit/loading-spinner": "19.10.0",
-    "@commercetools-uikit/messages": "19.10.0",
-    "@commercetools-uikit/notifications": "19.10.0",
-    "@commercetools-uikit/pagination": "19.10.0",
-    "@commercetools-uikit/primary-action-dropdown": "19.10.0",
-    "@commercetools-uikit/progress-bar": "19.10.0",
-    "@commercetools-uikit/selectable-search-input": "19.10.0",
-    "@commercetools-uikit/spacings": "19.10.0",
-    "@commercetools-uikit/stamp": "19.10.0",
-    "@commercetools-uikit/tag": "19.10.0",
-    "@commercetools-uikit/text": "19.10.0",
-    "@commercetools-uikit/tooltip": "19.10.0",
-    "@commercetools-uikit/utils": "19.10.0",
-    "@commercetools-uikit/view-switcher": "19.10.0"
+    "@commercetools-uikit/accessible-hidden": "19.12.0",
+    "@commercetools-uikit/avatar": "19.12.0",
+    "@commercetools-uikit/buttons": "19.12.0",
+    "@commercetools-uikit/card": "19.12.0",
+    "@commercetools-uikit/collapsible": "19.12.0",
+    "@commercetools-uikit/collapsible-motion": "19.12.0",
+    "@commercetools-uikit/collapsible-panel": "19.12.0",
+    "@commercetools-uikit/constraints": "19.12.0",
+    "@commercetools-uikit/data-table": "19.12.0",
+    "@commercetools-uikit/data-table-manager": "19.12.0",
+    "@commercetools-uikit/design-system": "19.12.0",
+    "@commercetools-uikit/dropdown-menu": "19.12.0",
+    "@commercetools-uikit/field-errors": "19.12.0",
+    "@commercetools-uikit/field-label": "19.12.0",
+    "@commercetools-uikit/fields": "19.12.0",
+    "@commercetools-uikit/grid": "19.12.0",
+    "@commercetools-uikit/hooks": "19.12.0",
+    "@commercetools-uikit/i18n": "19.12.0",
+    "@commercetools-uikit/icons": "19.12.0",
+    "@commercetools-uikit/inputs": "19.12.0",
+    "@commercetools-uikit/label": "19.12.0",
+    "@commercetools-uikit/link": "19.12.0",
+    "@commercetools-uikit/loading-spinner": "19.12.0",
+    "@commercetools-uikit/messages": "19.12.0",
+    "@commercetools-uikit/notifications": "19.12.0",
+    "@commercetools-uikit/pagination": "19.12.0",
+    "@commercetools-uikit/primary-action-dropdown": "19.12.0",
+    "@commercetools-uikit/progress-bar": "19.12.0",
+    "@commercetools-uikit/selectable-search-input": "19.12.0",
+    "@commercetools-uikit/spacings": "19.12.0",
+    "@commercetools-uikit/stamp": "19.12.0",
+    "@commercetools-uikit/tag": "19.12.0",
+    "@commercetools-uikit/text": "19.12.0",
+    "@commercetools-uikit/tooltip": "19.12.0",
+    "@commercetools-uikit/utils": "19.12.0",
+    "@commercetools-uikit/view-switcher": "19.12.0"
   },
   "devDependencies": {
     "moment": "2.30.1",

package/materials/internals/story/samplers.js

@@ -1,82 +0,0 @@
-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

@@ -1,270 +0,0 @@
-/* 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,219 +0,0 @@
-/* eslint-disable default-case */
-import { useCallback, useMemo, useState } from 'react';
-import { storiesOf } from '@storybook/react';
-import styled from '@emotion/styled';
-import merge from 'lodash/merge';
-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 {
-  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);
-  font-family: ${designTokens.fontFamily};
-  color: ${designTokens.colorSolid}
-  margin: 10px;
-  > * + * {
-    margin: 16px 0 0 0;
-  }
-`;
-
-const DetailsGroupsContainer = styled.main`
-  display: flex;
-  flex-direction: column;
-  gap: 40px;
-`;
-
-const BasicCellRenderer = (cellData) => {
-  if (cellData.columnKey !== 'description') {
-    return <TokenBodyCell tokenName={cellData.tokenName} />;
-  } else {
-    return cellData.tokenData.description;
-  }
-};
-
-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(
-        {},
-        definition.decisionGroupsByTheme.default,
-        definition.decisionGroupsByTheme[theme]
-      ),
-    [theme]
-  );
-
-  const searchTextChangeHandler = useCallback((event) => {
-    setFilterText(event.target.value);
-  }, []);
-
-  return (
-    <Background>
-      <header>
-        <TextInput
-          value={filterText}
-          onChange={searchTextChangeHandler}
-          horizontalConstraint={13}
-        />
-        <h2>Table of Contents</h2>
-        <ul>
-          <li>
-            <TokenGroupLinks
-              id="choices"
-              config={currentThemeChoices}
-              filterText={filterText}
-            >
-              Choices
-            </TokenGroupLinks>
-          </li>
-          <li>
-            <TokenGroupLinks id="states">States</TokenGroupLinks>
-          </li>
-          <li>
-            <TokenGroupLinks id="component-groups">
-              Component Groups
-            </TokenGroupLinks>
-          </li>
-          <li>
-            <TokenGroupLinks id="variants">Variants</TokenGroupLinks>
-          </li>
-          <li>
-            <TokenGroupLinks
-              id="decisions"
-              config={currentThemeDecisions}
-              filterText={filterText}
-            >
-              Decisions
-            </TokenGroupLinks>
-          </li>
-        </ul>
-      </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}
-        />
-      </DetailsGroupsContainer>
-    </Background>
-  );
-}
-
-storiesOf('Basics|Tokens', module)
-  .addParameters({
-    readme: {
-      // Show readme at the addons panel
-      sidebar: Readme,
-    },
-  })
-  .add('All Tokens', () => <Story />);