@zohodesk/components 1.0.0-temp-256.1 → 1.0.0-temp-259.1

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

@@ -1,168 +1,144 @@
 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;
-  }
+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}`)];
+}; // text: true  → isInherit flag இருக்கும் → bg context-ல இருந்து filledTextTone/textTone pick பண்ணும்
+// text: 'red' → directly textTone use பண்ணும்
+// text absent → null → no text
 
-  if (hasState) {
-    return `${tone}-${intensity.hover}`;
-  }
 
-  return `${tone}-${isLighter ? intensity.borderLight : intensity.base}`;
+const resolveTextTone = (textConfig, bgConfig) => {
+  if (!textConfig) return null;
+  if (textConfig.isInherit && bgConfig) return bgConfig.isLighter ? bgConfig.textTone : bgConfig.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
 }) => {
-  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 textTone = resolveTextTone(textConfig, bgConfig);
+  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 selected = buildStateClasses({
+    appearance: selectedAppearance,
+    state: 'selected',
+    paletteConfig
+  });
+
+  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/helpers/colorHelpers/text/textColor.module.css

@@ -1,22 +1,22 @@
 /* Theme-aware Brand Palette (changes with CTA theme selection) */
 .text-brand-80 {
-    color: var(--zdt_v1_palette_brand_text);
+    color: var(--zd-text-brand);
 }
 
 .hover\:text-brand-80:hover {
-    color: var(--zdt_v1_palette_brand_text);
+    color: var(--zd-text-brand);
 }
 
 .focus\:text-brand-80:focus {
-    color: var(--zdt_v1_palette_brand_text);
+    color: var(--zd-text-brand);
 }
 
 .active\:text-brand-80:active {
-    color: var(--zdt_v1_palette_brand_text);
+    color: var(--zd-text-brand);
 }
 
 .selected\:text-brand-80 {
-    color: var(--zdt_v1_palette_brand_text);
+    color: var(--zd-text-brand);
 }
 
 .text-brand-100 {
@@ -41,23 +41,23 @@
 
 /* Static Grey Palette */
 .text-grey-65 {
-    color: var(--zdt_v1_palette_grey_text);
+    color: var(--zd-text-secondary);
 }
 
 .hover\:text-grey-65:hover {
-    color: var(--zdt_v1_palette_grey_text);
+    color: var(--zd-text-secondary);
 }
 
 .focus\:text-grey-65:focus {
-    color: var(--zdt_v1_palette_grey_text);
+    color: var(--zd-text-secondary);
 }
 
 .active\:text-grey-65:active {
-    color: var(--zdt_v1_palette_grey_text);
+    color: var(--zd-text-secondary);
 }
 
 .selected\:text-grey-65 {
-    color: var(--zdt_v1_palette_grey_text);
+    color: var(--zd-text-secondary);
 }
 
 .text-grey-100 {
@@ -82,43 +82,43 @@
 
 /* Static Blue Palette */
 .text-blue-80 {
-    color: var(--zdt_v1_palette_blue_text);
+    color: var(--zd-text-info);
 }
 
 .hover\:text-blue-80:hover {
-    color: var(--zdt_v1_palette_blue_text);
+    color: var(--zd-text-info);
 }
 
 .focus\:text-blue-80:focus {
-    color: var(--zdt_v1_palette_blue_text);
+    color: var(--zd-text-info);
 }
 
 .active\:text-blue-80:active {
-    color: var(--zdt_v1_palette_blue_text);
+    color: var(--zd-text-info);
 }
 
 .selected\:text-blue-80 {
-    color: var(--zdt_v1_palette_blue_text);
+    color: var(--zd-text-info);
 }
 
 .text-blue-100 {
-    color: var(--zdt_v1_palette_blue_hover_text);
+    color: var(--zd-text-info-hover);
 }
 
 .hover\:text-blue-100:hover {
-    color: var(--zdt_v1_palette_blue_hover_text);
+    color: var(--zd-text-info-hover);
 }
 
 .focus\:text-blue-100:focus {
-    color: var(--zdt_v1_palette_blue_hover_text);
+    color: var(--zd-text-info-hover);
 }
 
 .active\:text-blue-100:active {
-    color: var(--zdt_v1_palette_blue_hover_text);
+    color: var(--zd-text-info-hover);
 }
 
 .selected\:text-blue-100 {
-    color: var(--zdt_v1_palette_blue_hover_text);
+    color: var(--zd-text-info-hover);
 }
 
 /* Static Green Palette */
@@ -307,62 +307,62 @@
 }
 
 .text-white {
-    color: var(--zdt_v1_palette_white);
+    color: var(--zd-text-inverse);
 }
 
 .hover\:text-white:hover {
-    color: var(--zdt_v1_palette_white);
+    color: var(--zd-text-inverse);
 }
 
 .focus\:text-white:focus {
-    color: var(--zdt_v1_palette_white);
+    color: var(--zd-text-inverse);
 }
 
 .active\:text-white:active {
-    color: var(--zdt_v1_palette_white);
+    color: var(--zd-text-inverse);
 }
 
 .selected\:text-white {
-    color: var(--zdt_v1_palette_white);
+    color: var(--zd-text-inverse);
 }
 
 .text-black {
-    color: var(--zdt_v1_palette_black);
+    color: var(--zd-text-primary);
 }
 
 .hover\:text-black:hover {
-    color: var(--zdt_v1_palette_black);
+    color: var(--zd-text-primary);
 }
 
 .focus\:text-black:focus {
-    color: var(--zdt_v1_palette_black);
+    color: var(--zd-text-primary);
 }
 
 .active\:text-black:active {
-    color: var(--zdt_v1_palette_black);
+    color: var(--zd-text-primary);
 }
 
 .selected\:text-black {
-    color: var(--zdt_v1_palette_black);
+    color: var(--zd-text-primary);
 }
 
 /* CTA-aware filled text — adapts to CTA theme */
 .text-brand-filled {
-    color: var(--zdt_v1_palette_brand_filled_text);
+    color: var(--zd-text-onBrand);
 }
 
 .hover\:text-brand-filled:hover {
-    color: var(--zdt_v1_palette_brand_filled_text);
+    color: var(--zd-text-onBrand);
 }
 
 .focus\:text-brand-filled:focus {
-    color: var(--zdt_v1_palette_brand_filled_text);
+    color: var(--zd-text-onBrand);
 }
 
 .active\:text-brand-filled:active {
-    color: var(--zdt_v1_palette_brand_filled_text);
+    color: var(--zd-text-onBrand);
 }
 
 .selected\:text-brand-filled {
-    color: var(--zdt_v1_palette_brand_filled_text);
+    color: var(--zd-text-onBrand);
 }

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;