@zohodesk/components 1.0.0-temp-257.1 → 1.0.0-temp-259.2

package/es/v1/Switch/__tests__/__snapshots__/Switch.spec.js.snap

@@ -3,12 +3,12 @@
 exports[`Switch - Snapshot Render with a11y attributes 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container medium unChecked enabled"
+    class="d-inline-flex d-flex-row d-items-center container medium unChecked enabled"
     data-id="flex"
     data-test-id="flex"
   >
     <div
-      class="noShrink trackWrapper"
+      class="d-flex-shrink-0 trackWrapper"
       data-id="flex"
       data-test-id="flex"
     >
@@ -46,12 +46,12 @@ exports[`Switch - Snapshot Render with a11y attributes 1`] = `
 exports[`Switch - Snapshot Render with customClass 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container medium unChecked enabled"
+    class="d-inline-flex d-flex-row d-items-center container medium unChecked enabled"
     data-id="flex"
     data-test-id="flex"
   >
     <div
-      class="noShrink trackWrapper"
+      class="d-flex-shrink-0 trackWrapper"
       data-id="flex"
       data-test-id="flex"
     >
@@ -89,13 +89,13 @@ exports[`Switch - Snapshot Render with customClass 1`] = `
 exports[`Switch - Snapshot Render with customId and testId 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container medium unChecked enabled"
+    class="d-inline-flex d-flex-row d-items-center container medium unChecked enabled"
     data-id="switch-customId"
     data-selector-id="switch-customId"
     data-test-id="switch-testId"
   >
     <div
-      class="noShrink trackWrapper"
+      class="d-flex-shrink-0 trackWrapper"
       data-id="flex"
       data-test-id="flex"
     >
@@ -133,12 +133,12 @@ exports[`Switch - Snapshot Render with customId and testId 1`] = `
 exports[`Switch - Snapshot Render with default props 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container medium unChecked enabled"
+    class="d-inline-flex d-flex-row d-items-center container medium unChecked enabled"
     data-id="flex"
     data-test-id="flex"
   >
     <div
-      class="noShrink trackWrapper"
+      class="d-flex-shrink-0 trackWrapper"
       data-id="flex"
       data-test-id="flex"
     >
@@ -176,12 +176,12 @@ exports[`Switch - Snapshot Render with default props 1`] = `
 exports[`Switch - Snapshot Render with isChecked=true 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container medium checked enabled"
+    class="d-inline-flex d-flex-row d-items-center container medium checked enabled"
     data-id="flex"
     data-test-id="flex"
   >
     <div
-      class="noShrink trackWrapper"
+      class="d-flex-shrink-0 trackWrapper"
       data-id="flex"
       data-test-id="flex"
     >
@@ -220,12 +220,12 @@ exports[`Switch - Snapshot Render with isChecked=true 1`] = `
 exports[`Switch - Snapshot Render with isDisabled=true 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container medium checked disabled"
+    class="d-inline-flex d-flex-row d-items-center container medium checked disabled"
     data-id="flex"
     data-test-id="flex"
   >
     <div
-      class="noShrink trackWrapper"
+      class="d-flex-shrink-0 trackWrapper"
       data-id="flex"
       data-test-id="flex"
     >
@@ -265,12 +265,12 @@ exports[`Switch - Snapshot Render with isDisabled=true 1`] = `
 exports[`Switch - Snapshot Render with tag attributes 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container medium unChecked enabled"
+    class="d-inline-flex d-flex-row d-items-center container medium unChecked enabled"
     data-id="flex"
     data-test-id="flex"
   >
     <div
-      class="noShrink trackWrapper"
+      class="d-flex-shrink-0 trackWrapper"
       data-id="flex"
       data-test-id="flex"
     >

package/es/v1/helpers/colorHelpers/background/backgroundColor.module.css

@@ -141,23 +141,23 @@
     background-color: var(--zd-bg-secondary);
 }
 
-.bg-grey-15 {
+.bg-grey-20 {
     background-color: var(--zdt_v1_palette_grey_light_hover_bg);
 }
 
-.hover\:bg-grey-15:hover {
+.hover\:bg-grey-20:hover {
     background-color: var(--zdt_v1_palette_grey_light_hover_bg);
 }
 
-.focus\:bg-grey-15:focus {
+.focus\:bg-grey-20:focus {
     background-color: var(--zdt_v1_palette_grey_light_hover_bg);
 }
 
-.active\:bg-grey-15:active {
+.active\:bg-grey-20:active {
     background-color: var(--zdt_v1_palette_grey_light_hover_bg);
 }
 
-.selected\:bg-grey-15 {
+.selected\:bg-grey-20 {
     background-color: var(--zdt_v1_palette_grey_light_hover_bg);
 }
 

package/es/v1/helpers/colorHelpers/border/borderColor.module.css

@@ -101,23 +101,23 @@
     border-color: var(--zd-border-tertiary);
 }
 
-.border-grey-15 {
+.border-grey-20 {
     border-color: var(--zd-border-secondary);
 }
 
-.hover\:border-grey-15:hover {
+.hover\:border-grey-20:hover {
     border-color: var(--zd-border-secondary);
 }
 
-.focus\:border-grey-15:focus {
+.focus\:border-grey-20:focus {
     border-color: var(--zd-border-secondary);
 }
 
-.active\:border-grey-15:active {
+.active\:border-grey-20:active {
     border-color: var(--zd-border-secondary);
 }
 
-.selected\:border-grey-15 {
+.selected\:border-grey-20 {
     border-color: var(--zd-border-secondary);
 }
 

package/es/v1/helpers/colorHelpers/colorHelper.js

@@ -1,168 +1,146 @@
 import paletteBgStyle from "./background/backgroundColor.module.css";
 import paletteBorderStyle from "./border/borderColor.module.css";
 import paletteTextStyle from "./text/textColor.module.css";
-import { DUMMY_OBJECT } from '@zohodesk/dotkit/es/utils/constants';
 import { PALETTE_CONFIG, TONE_INTENSITY } from "./constants";
 
 const withState = (state, key) => state ? `${state}:${key}` : key;
 
-const toBgIntensity = (tone, hasState, isLighter) => {
-  const intensity = TONE_INTENSITY[tone];
-
-  if (!intensity) {
-    return tone;
-  }
-
-  if (hasState) {
-    return `${tone}-${isLighter ? intensity.lightHover : intensity.hover}`;
-  }
-
-  return `${tone}-${isLighter ? intensity.light : intensity.base}`;
+const resolveConfig = (value, paletteConfig) => {
+  if (!value) return null;
+  if (value === true) return paletteConfig ? { ...paletteConfig,
+    isInherit: true
+  } : null;
+  return PALETTE_CONFIG[value] || {
+    tone: value,
+    textTone: value,
+    filledTextTone: value
+  };
 };
 
-const toTextIntensity = (tone, hasState) => {
-  const intensity = TONE_INTENSITY[tone];
-
-  if (!intensity) {
-    return tone;
-  }
+const isContinuingTone = (config, restConfig) => !!(config && restConfig && config.tone === restConfig.tone && !!config.isLighter === !!restConfig.isLighter);
 
-  if (hasState) {
-    return `${tone}-${intensity.textHover ?? intensity.hover}`;
-  }
-
-  return `${tone}-${intensity.base}`;
+const getBgClass = (state, config, darker) => {
+  const {
+    tone,
+    isLighter
+  } = config;
+  const intensity = TONE_INTENSITY[tone];
+  if (!intensity) return paletteBgStyle[withState(state, `bg-${tone}`)];
+  const shade = darker ? isLighter ? intensity.lightHover : intensity.hover : isLighter ? intensity.light : intensity.base;
+  return paletteBgStyle[withState(state, `bg-${tone}-${shade}`)];
 };
 
-const toBorderIntensity = (tone, hasState, isLighter) => {
+const getBorderClass = (state, config, darker) => {
+  const {
+    tone,
+    isLighter
+  } = config;
   const intensity = TONE_INTENSITY[tone];
+  if (!intensity) return paletteBorderStyle[withState(state, `border-${tone}`)];
+  const shade = darker ? intensity.hover : isLighter ? intensity.borderLight : intensity.base;
+  return paletteBorderStyle[withState(state, `border-${tone}-${shade}`)];
+};
 
-  if (!intensity) {
-    return tone;
-  }
-
-  if (hasState) {
-    return `${tone}-${intensity.hover}`;
-  }
+const getTextClass = (state, textTone, darker) => {
+  const intensity = TONE_INTENSITY[textTone];
+  if (!intensity) return paletteTextStyle[withState(state, `text-${textTone}`)];
+  const shade = darker ? intensity.textHover ?? intensity.hover : intensity.base;
+  return paletteTextStyle[withState(state, `text-${textTone}-${shade}`)];
+};
 
-  return `${tone}-${isLighter ? intensity.borderLight : intensity.base}`;
+const resolveTextTone = (textConfig, bgConfig) => {
+  if (!textConfig) return null;
+  if (textConfig.isInherit && bgConfig) return bgConfig.isLighter ? textConfig.textTone : textConfig.filledTextTone;
+  return textConfig.textTone || null;
 };
 
-export const getBgClass = ({
-  state,
-  tone,
-  isLighter
-}) => paletteBgStyle[withState(state, `bg-${toBgIntensity(tone, !!state, isLighter)}`)];
-export const getTextClass = ({
-  state,
-  textTone
-}) => paletteTextStyle[withState(state, `text-${toTextIntensity(textTone, !!state)}`)];
-export const getBorderClass = ({
-  state,
-  tone,
-  isLighter
-}) => paletteBorderStyle[withState(state, `border-${toBorderIntensity(tone, !!state, isLighter)}`)];
+const BG_BORDER_INVALID = new Set(['black', 'white']);
+const TEXT_INVALID = new Set(['transparent']);
 
-const buildPaletteClasses = (config, {
-  bgAppearance,
-  borderAppearance,
-  paletteShade,
-  isSelected
+const buildStateClasses = ({
+  appearance,
+  state,
+  paletteConfig,
+  restAppearance,
+  restPaletteConfig,
+  textFallbackBgConfig
 }) => {
-  const {
-    tone,
-    textTone,
-    filledTextTone
-  } = config;
-  const isLighter = paletteShade === 'lighter';
-  const hasBgState = bgAppearance !== 'none';
-  const isFilledBg = bgAppearance === 'default';
-  const hasBorderState = borderAppearance !== 'none';
-  const hasTransparentBorder = borderAppearance === 'onHover' || borderAppearance === 'none';
-  const baseTextTone = isFilledBg && !isLighter ? filledTextTone : textTone;
-  const stateTextTone = hasBgState && !isLighter ? filledTextTone : textTone;
+  if (!appearance) return {
+    bg: '',
+    text: '',
+    border: ''
+  };
+  const rawBgConfig = resolveConfig(appearance.bg, paletteConfig);
+  const rawBorderConfig = resolveConfig(appearance.border, paletteConfig);
+  const rawTextConfig = resolveConfig(appearance.text, paletteConfig);
+  const bgConfig = rawBgConfig && !BG_BORDER_INVALID.has(rawBgConfig.tone) ? rawBgConfig : null;
+  const borderConfig = rawBorderConfig && !BG_BORDER_INVALID.has(rawBorderConfig.tone) ? rawBorderConfig : null;
+  const textConfig = rawTextConfig && !TEXT_INVALID.has(rawTextConfig.tone) ? rawTextConfig : null;
+  const restBgConfig = restAppearance ? resolveConfig(restAppearance.bg, restPaletteConfig) : null;
+  const restBorderConfig = restAppearance ? resolveConfig(restAppearance.border, restPaletteConfig) : null;
+  const restTextConfig = restAppearance ? resolveConfig(restAppearance.text, restPaletteConfig) : null;
+  const bg = bgConfig ? getBgClass(state, bgConfig, isContinuingTone(bgConfig, restBgConfig)) || '' : '';
+  const border = borderConfig ? getBorderClass(state, borderConfig, isContinuingTone(borderConfig, restBorderConfig)) || '' : state ? '' : paletteBorderStyle['border-transparent'] || '';
+  const effectiveBgForText = bgConfig || textFallbackBgConfig || restBgConfig || null;
+  const textTone = resolveTextTone(textConfig, effectiveBgForText);
+  const restTextTone = resolveTextTone(restTextConfig, restBgConfig);
+  const text = textTone ? getTextClass(state, textTone, textTone === restTextTone) || '' : '';
   return {
-    bg: isSelected ? hasBgState ? getBgClass({
-      state: 'selected',
-      tone,
-      isLighter
-    }) : '' : isFilledBg ? getBgClass({
-      tone,
-      isLighter
-    }) : '',
-    hoverBg: hasBgState ? getBgClass({
-      state: 'hover',
-      tone,
-      isLighter
-    }) : '',
-    focusBg: hasBgState ? getBgClass({
-      state: 'focus',
-      tone,
-      isLighter
-    }) : '',
-    activeBg: hasBgState ? getBgClass({
-      state: 'active',
-      tone,
-      isLighter
-    }) : '',
-    text: isSelected ? getTextClass({
-      state: 'selected',
-      textTone: hasBgState ? stateTextTone : baseTextTone
-    }) : getTextClass({
-      textTone: baseTextTone
-    }),
-    hoverText: getTextClass({
-      state: 'hover',
-      textTone: stateTextTone
-    }),
-    focusText: getTextClass({
-      state: 'focus',
-      textTone: stateTextTone
-    }),
-    activeText: getTextClass({
-      state: 'active',
-      textTone: stateTextTone
-    }),
-    border: isSelected ? !hasBorderState ? getBorderClass({
-      tone: 'transparent'
-    }) : getBorderClass({
-      state: 'selected',
-      tone
-    }) : hasTransparentBorder ? getBorderClass({
-      tone: 'transparent'
-    }) : getBorderClass({
-      tone,
-      isLighter
-    }),
-    hoverBorder: hasBorderState ? getBorderClass({
-      state: 'hover',
-      tone
-    }) : '',
-    focusBorder: hasBorderState ? getBorderClass({
-      state: 'focus',
-      tone
-    }) : '',
-    activeBorder: hasBorderState ? getBorderClass({
-      state: 'active',
-      tone
-    }) : ''
+    bg,
+    text,
+    border
   };
 };
 
 const getPaletteClasses = ({
   palette,
-  bgAppearance,
-  borderAppearance,
-  paletteShade,
-  isSelected
+  appearance,
+  hoverAppearance,
+  selectedAppearance
 }) => {
-  const config = PALETTE_CONFIG[palette];
-  return config ? buildPaletteClasses(config, {
-    bgAppearance,
-    borderAppearance,
-    paletteShade,
-    isSelected
-  }) : DUMMY_OBJECT;
+  const paletteConfig = PALETTE_CONFIG[palette];
+  const base = buildStateClasses({
+    appearance,
+    state: undefined,
+    paletteConfig
+  });
+  const rawRestBgConfig = resolveConfig(appearance?.bg, paletteConfig);
+  const restBgForText = rawRestBgConfig && !BG_BORDER_INVALID.has(rawRestBgConfig.tone) ? rawRestBgConfig : null;
+  const selected = buildStateClasses({
+    appearance: selectedAppearance,
+    state: 'selected',
+    paletteConfig,
+    textFallbackBgConfig: restBgForText
+  });
+
+  const buildInteractive = state => buildStateClasses({
+    appearance: hoverAppearance,
+    state,
+    paletteConfig,
+    restAppearance: appearance,
+    restPaletteConfig: paletteConfig
+  });
+
+  const hover = buildInteractive('hover');
+  const focus = buildInteractive('focus');
+  const active = buildInteractive('active');
+  return {
+    bg: base.bg,
+    selectedBg: selected.bg,
+    hoverBg: hover.bg,
+    focusBg: focus.bg,
+    activeBg: active.bg,
+    text: base.text,
+    selectedText: selected.text,
+    hoverText: hover.text,
+    focusText: focus.text,
+    activeText: active.text,
+    border: base.border,
+    selectedBorder: selected.border,
+    hoverBorder: hover.border,
+    focusBorder: focus.border,
+    activeBorder: active.border
+  };
 };
 
 export default getPaletteClasses;

package/es/v1/helpers/colorHelpers/constants/index.js

@@ -10,8 +10,8 @@ export const TONE_INTENSITY = {
     base: 65,
     hover: 55,
     light: 10,
-    lightHover: 15,
-    borderLight: 15,
+    lightHover: 20,
+    borderLight: 20,
     textHover: 100
   },
   blue: {
@@ -51,29 +51,70 @@ export const TONE_INTENSITY = {
   }
 };
 export const PALETTE_CONFIG = {
-  default: {
+  brand: {
     tone: 'brand',
     textTone: 'brand',
     filledTextTone: 'brand-filled'
   },
-  primary: {
+  brandLighter: {
+    tone: 'brand',
+    textTone: 'brand',
+    filledTextTone: 'brand',
+    isLighter: true
+  },
+  info: {
     tone: 'blue',
     textTone: 'blue',
     filledTextTone: 'white'
   },
+  infoLighter: {
+    tone: 'blue',
+    textTone: 'blue',
+    filledTextTone: 'blue',
+    isLighter: true
+  },
   secondary: {
     tone: 'grey',
     textTone: 'grey',
     filledTextTone: 'white'
   },
+  secondaryLighter: {
+    tone: 'grey',
+    textTone: 'grey',
+    filledTextTone: 'grey',
+    isLighter: true
+  },
   danger: {
     tone: 'red',
     textTone: 'red',
     filledTextTone: 'white'
   },
+  dangerLighter: {
+    tone: 'red',
+    textTone: 'red',
+    filledTextTone: 'red',
+    isLighter: true
+  },
   success: {
     tone: 'green',
     textTone: 'green',
     filledTextTone: 'white'
+  },
+  successLighter: {
+    tone: 'green',
+    textTone: 'green',
+    filledTextTone: 'green',
+    isLighter: true
+  },
+  warning: {
+    tone: 'orange',
+    textTone: 'orange',
+    filledTextTone: 'white'
+  },
+  warningLighter: {
+    tone: 'orange',
+    textTone: 'orange',
+    filledTextTone: 'orange',
+    isLighter: true
   }
 };

package/es/v1/shared/{Loader/Loader.js → Spinner/Spinner.js}

@@ -2,9 +2,9 @@ import React from 'react';
 import propTypes from "./props/propTypes";
 import defaultProps from "./props/defaultProps";
 import { cn } from "@dot-system/css-utility";
-import style from "./Loader_v1.module.css";
+import style from "./Spinner_v1.module.css";
 
-const Loader = props => {
+const Spinner = props => {
   const {
     customClass
   } = props;
@@ -29,6 +29,6 @@ const Loader = props => {
   }));
 };
 
-Loader.propTypes = propTypes;
-Loader.defaultProps = defaultProps;
-export default Loader;
+Spinner.propTypes = propTypes;
+Spinner.defaultProps = defaultProps;
+export default Spinner;

package/es/v1/shared/{Loader/__tests__/Loader.spec.js → Spinner/__tests__/Spinner.spec.js}

@@ -1,17 +1,17 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import Loader from "../Loader";
-describe('Loader', () => {
+import Spinner from "../Spinner";
+describe('Spinner', () => {
   test('renders default snapshot', () => {
     const {
       asFragment
-    } = render( /*#__PURE__*/React.createElement(Loader, null));
+    } = render( /*#__PURE__*/React.createElement(Spinner, null));
     expect(asFragment()).toMatchSnapshot();
   });
   test('renders with customClass', () => {
     const {
       asFragment
-    } = render( /*#__PURE__*/React.createElement(Loader, {
+    } = render( /*#__PURE__*/React.createElement(Spinner, {
       customClass: {
         wrapper: 'my-custom-class'
       }

package/{lib/v1/shared/Loader/__tests__/__snapshots__/Loader.spec.js.snap → es/v1/shared/Spinner/__tests__/__snapshots__/Spinner.spec.js.snap}

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
-exports[`Loader renders default snapshot 1`] = `
+exports[`Spinner renders default snapshot 1`] = `
 <DocumentFragment>
   <svg
     aria-hidden="true"
@@ -24,7 +24,7 @@ exports[`Loader renders default snapshot 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Loader renders with customClass 1`] = `
+exports[`Spinner renders with customClass 1`] = `
 <DocumentFragment>
   <svg
     aria-hidden="true"

package/lib/Accordion/Accordion.js

@@ -128,9 +128,4 @@ var Accordion = /*#__PURE__*/function (_React$Component) {
 
 exports["default"] = Accordion;
 Accordion.propTypes = _propTypes.Accordion_propTypes;
-Accordion.defaultProps = _defaultProps.Accordion_defaultProps; // if (__DOCS__) {
-//   Accordion.docs = {
-//     componentGroup: 'Animation',
-//     folderName: 'Style Guide'
-//   };
-// }
+Accordion.defaultProps = _defaultProps.Accordion_defaultProps;

package/lib/Accordion/AccordionItem.js

@@ -105,9 +105,4 @@ var AccordionItem = /*#__PURE__*/function (_React$Component) {
 
 exports["default"] = AccordionItem;
 AccordionItem.propTypes = _propTypes.AccordionItem_propTypes;
-AccordionItem.defaultProps = _defaultProps.AccordionItem_defaultProps; // if (__DOCS__) {
-//   AccordionItem.docs = {
-//     componentGroup: 'Animation',
-//     folderName: 'Style Guide'
-//   };
-// }
+AccordionItem.defaultProps = _defaultProps.AccordionItem_defaultProps;

package/lib/Animation/Animation.js

@@ -92,11 +92,4 @@ var Animation = /*#__PURE__*/function (_React$Component) {
 
 exports["default"] = Animation;
 Animation.propTypes = _propTypes.propTypes;
-Animation.defaultProps = _defaultProps.defaultProps; // if (__DOCS__) {
-//   Animation.docs = {
-//     componentGroup: 'Animation',
-//     folderName: 'Style Guide',
-//     external: true,
-//     description: ' '
-//   };
-// }
+Animation.defaultProps = _defaultProps.defaultProps;

package/lib/AppContainer/AppContainer.js

@@ -206,9 +206,4 @@ var AppContainer = /*#__PURE__*/function (_React$Component) {
 
 exports["default"] = AppContainer;
 AppContainer.propTypes = _propTypes.propTypes;
-AppContainer.defaultProps = _defaultProps.defaultProps; // if (__DOCS__) {
-//   AppContainer.docs = {
-//     componentGroup: 'Template',
-//     folderName: 'Style Guide'
-//   };
-// }
+AppContainer.defaultProps = _defaultProps.defaultProps;