@dnanpm/styleguide 4.0.9 → 4.0.10

package/build/es/components/Pill/Pill.js

@@ -5,15 +5,16 @@ import theme from '../../themes/theme.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
 import { shade } from '../Button/Button.js';
 
-const getStandardPillStyles = ({ isChecked, isDisabled, }) => {
-    const alphaValue = isDisabled ? theme.color.transparency.T30 : theme.color.transparency.T100;
-    const bgColor = isChecked
-        ? theme.color.background.plum.default
-        : theme.color.background.orange.E02;
-    const hoverBgColor = isChecked ? '#441632' : '#FFB557'; // Only Pill component specific colors to be used on user interaction styles
-    const textColor = isChecked ? theme.color.default.white : theme.color.default.black;
-    const disabledTextColor = isDisabled ? theme.color.text.gray : textColor;
-    return `
+const getStandardPillStyles = ({
+  isChecked,
+  isDisabled
+}) => {
+  const alphaValue = isDisabled ? theme.color.transparency.T30 : theme.color.transparency.T100;
+  const bgColor = isChecked ? theme.color.background.plum.default : theme.color.background.orange.E02;
+  const hoverBgColor = isChecked ? '#441632' : '#FFB557'; // Only Pill component specific colors to be used on user interaction styles
+  const textColor = isChecked ? theme.color.default.white : theme.color.default.black;
+  const disabledTextColor = isDisabled ? theme.color.text.gray : textColor;
+  return `
       font-size: ${theme.fontSize.s};
       font-weight: ${theme.fontWeight.medium};
       padding: 2px ${getMultipliedSize(theme.base.baseHeight, 2.5)};
@@ -23,68 +24,59 @@ const getStandardPillStyles = ({ isChecked, isDisabled, }) => {
       ${!isDisabled ? `&:hover { background-color: ${hoverBgColor}; }` : ''}
     `;
 };
-const getDefaultButtonStyles = ({ isChecked, isDisabled, }) => {
-    const alphaValue = isDisabled ? theme.color.transparency.T30 : theme.color.transparency.T100;
-    const hoverColor = '#441632'; // Only Pill component specific colors to be used on user interaction styles
-    const disabledBgColor = isDisabled ? theme.color.default.plum : shade.plum.lighter;
-    const bgColor = isChecked ? disabledBgColor : 'transparent';
-    const textColor = isChecked ? theme.color.default.white : theme.color.default.plum;
-    const disabledTextColor = isDisabled ? theme.color.text.gray : textColor;
-    const disabledBorderColor = isDisabled ? 'transparent' : shade.plum.lighter;
-    const borderColor = isChecked
-        ? disabledBorderColor
-        : `${theme.color.default.plum}${alphaValue}`;
-    return `
+const getDefaultButtonStyles = ({
+  isChecked,
+  isDisabled
+}) => {
+  const alphaValue = isDisabled ? theme.color.transparency.T30 : theme.color.transparency.T100;
+  const hoverColor = '#441632'; // Only Pill component specific colors to be used on user interaction styles
+  const disabledBgColor = isDisabled ? theme.color.default.plum : shade.plum.lighter;
+  const bgColor = isChecked ? disabledBgColor : 'transparent';
+  const textColor = isChecked ? theme.color.default.white : theme.color.default.plum;
+  const disabledTextColor = isDisabled ? theme.color.text.gray : textColor;
+  const disabledBorderColor = isDisabled ? 'transparent' : shade.plum.lighter;
+  const borderColor = isChecked ? disabledBorderColor : `${theme.color.default.plum}${alphaValue}`;
+  return `
       font-size: ${theme.fontSize.default};
       font-weight: ${theme.fontWeight.bold};
       padding: 6px ${getMultipliedSize(theme.base.baseHeight, 2.5)};
       background-color: ${bgColor}${alphaValue};
       color: ${disabledTextColor};
       border: 2px solid ${borderColor};
-      ${!isDisabled
-        ? `
+      ${!isDisabled ? `
         &:hover { 
             border: 2px solid ${hoverColor};
             color: ${theme.color.default.white}; 
             background-color: ${hoverColor}; 
-        }`
-        : ''}
+        }` : ''}
     `;
 };
-const Label = styled.label `
-    all: unset;
-    position: relative;
-    display: inline-block;
-    border-radius: ${theme.radius.pill};
-    line-height: ${theme.lineHeight.default};
-    text-align: center;
-    transition: all 0.2s ease-in-out;
-
-    ${({ $isChecked, $isDisabled, $isDefaultButtonStyle }) => $isDefaultButtonStyle
-    ? getDefaultButtonStyles({ isChecked: $isChecked, isDisabled: $isDisabled })
-    : getStandardPillStyles({ isChecked: $isChecked, isDisabled: $isDisabled })}
-
-    ${({ $isDisabled }) => `cursor: ${$isDisabled ? 'not-allowed' : 'pointer'};`}
-
-    &:focus-within, *:focus > & {
-        outline: none;
-        box-shadow:
-            0px 0px 0px 2px ${theme.color.focus.light},
-            0px 0px 0px 4px ${theme.color.focus.dark};
-    }
-
-    ${({ $position }) => ($position === 'right' || $position === 'middle') &&
-    `
+const Label = styled.label.withConfig({
+  displayName: "Pill__Label",
+  componentId: "sc-1v4xyar-0"
+})(["all:unset;position:relative;display:inline-block;border-radius:", ";line-height:", ";text-align:center;transition:all 0.2s ease-in-out;", " ", " &:focus-within,*:focus > &{outline:none;box-shadow:0px 0px 0px 2px ", ",0px 0px 0px 4px ", ";}", " ", " ", ""], theme.radius.pill, theme.lineHeight.default, ({
+  $isChecked,
+  $isDisabled,
+  $isDefaultButtonStyle
+}) => $isDefaultButtonStyle ? getDefaultButtonStyles({
+  isChecked: $isChecked,
+  isDisabled: $isDisabled
+}) : getStandardPillStyles({
+  isChecked: $isChecked,
+  isDisabled: $isDisabled
+}), ({
+  $isDisabled
+}) => `cursor: ${$isDisabled ? 'not-allowed' : 'pointer'};`, theme.color.focus.light, theme.color.focus.dark, ({
+  $position
+}) => ($position === 'right' || $position === 'middle') && `
             margin-left: ${getMultipliedSize(theme.base.baseWidth, 1)};
-        `}
-
-    ${({ $position }) => ($position === 'left' || $position === 'middle') &&
-    `
+        `, ({
+  $position
+}) => ($position === 'left' || $position === 'middle') && `
             margin-right: ${getMultipliedSize(theme.base.baseWidth, 1)};
-        `}
-    
-    ${({ $position }) => $position === 'auto' &&
-    `
+        `, ({
+  $position
+}) => $position === 'auto' && `
         margin: ${getMultipliedSize(theme.base.baseWidth, 0.5)};
 
         &:first-of-type {
@@ -94,31 +86,48 @@ const Label = styled.label `
         &:last-of-type {
             margin-right: 0;
         }
-    `}
-`;
-const Input = styled.input `
-    appearance: none;
-    display: block;
-    border: 0 none;
-    margin: 0;
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-
-    &:focus-visible {
-        outline: 0 none;
-    }
-
-    ${({ $isDisabled }) => `cursor: ${$isDisabled ? 'not-allowed' : 'pointer'};`}
-`;
-const Pill = (_a) => {
-    var { type = 'none', 'data-testid': dataTestId } = _a, props = __rest(_a, ["type", 'data-testid']);
-    const isDefaultType = type === 'none';
-    return (React__default.createElement(Label, { as: isDefaultType ? 'button' : 'label', id: isDefaultType ? props.id : undefined, htmlFor: !isDefaultType ? props.id : undefined, type: isDefaultType ? 'button' : undefined, "$position": props.position, "$isChecked": props.isChecked || props.isDefaultChecked, "$isDisabled": props.isDisabled, className: props.className, "data-testid": dataTestId, "$isDefaultButtonStyle": props.isDefaultButtonStyle, "aria-label": props.ariaLabel, disabled: isDefaultType ? props.isDisabled : undefined, onClick: isDefaultType && !props.isDisabled ? props.onClick : undefined },
-        props.children,
-        !isDefaultType && (React__default.createElement(Input, { id: props.id, name: props.name, type: type, defaultChecked: props.isDefaultChecked, checked: props.isChecked, value: props.value, onChange: props.onChange, disabled: props.isDisabled, readOnly: !props.onChange, "data-testid": dataTestId && `${dataTestId}-input`, "data-checked": props.isChecked, "$isDisabled": props.isDisabled }))));
+    `);
+const Input = styled.input.withConfig({
+  displayName: "Pill__Input",
+  componentId: "sc-1v4xyar-1"
+})(["appearance:none;display:block;border:0 none;margin:0;width:100%;height:100%;position:absolute;top:0;left:0;&:focus-visible{outline:0 none;}", ""], ({
+  $isDisabled
+}) => `cursor: ${$isDisabled ? 'not-allowed' : 'pointer'};`);
+const Pill = _a => {
+  var {
+      type = 'none',
+      'data-testid': dataTestId
+    } = _a,
+    props = __rest(_a, ["type", 'data-testid']);
+  const isDefaultType = type === 'none';
+  return /*#__PURE__*/React__default.createElement(Label, {
+    as: isDefaultType ? 'button' : 'label',
+    id: isDefaultType ? props.id : undefined,
+    htmlFor: !isDefaultType ? props.id : undefined,
+    type: isDefaultType ? 'button' : undefined,
+    "$position": props.position,
+    "$isChecked": props.isChecked || props.isDefaultChecked,
+    "$isDisabled": props.isDisabled,
+    className: props.className,
+    "data-testid": dataTestId,
+    "$isDefaultButtonStyle": props.isDefaultButtonStyle,
+    "aria-label": props.ariaLabel,
+    disabled: isDefaultType ? props.isDisabled : undefined,
+    onClick: isDefaultType && !props.isDisabled ? props.onClick : undefined
+  }, props.children, !isDefaultType && (/*#__PURE__*/React__default.createElement(Input, {
+    id: props.id,
+    name: props.name,
+    type: type,
+    defaultChecked: props.isDefaultChecked,
+    checked: props.isChecked,
+    value: props.value,
+    onChange: props.onChange,
+    disabled: props.isDisabled,
+    readOnly: !props.onChange,
+    "data-testid": dataTestId && `${dataTestId}-input`,
+    "data-checked": props.isChecked,
+    "$isDisabled": props.isDisabled
+  })));
 };
 
 export { Pill as default };

package/build/es/components/PillGroup/PillGroup.js

@@ -1,38 +1,55 @@
 import React__default from 'react';
 
-const PillGroup = ({ children, label, id, type, className, description, groupVariant, 'data-testid': dataTestId = 'pill-group', }) => {
-    const isFieldset = groupVariant === 'fieldset';
-    const Wrapper = isFieldset ? 'fieldset' : 'div';
-    const labelId = `${id}-label`;
-    const descriptionId = `${id}-description`;
-    const labelDataTestId = `${dataTestId}-label`;
-    const descriptionDataTestId = `${dataTestId}-description`;
-    const isRadioGroup = type === 'radio' && groupVariant === 'radiogroup';
-    const isCheckboxAndButtonGroup = (type === 'checkbox' || type === 'none') && groupVariant === 'group';
-    let customRole;
-    if (isRadioGroup) {
-        customRole = 'radiogroup';
-    }
-    else if (isCheckboxAndButtonGroup) {
-        customRole = 'group';
-    }
-    else {
-        customRole = undefined;
-    }
-    const renderLabel = () => {
-        if (!label)
-            return null;
-        return isFieldset ? (React__default.createElement("legend", { "data-testid": labelDataTestId }, label)) : (React__default.createElement("div", { id: labelId, "data-testid": labelDataTestId }, label));
-    };
-    const renderDescription = () => {
-        if (!description)
-            return null;
-        return (React__default.createElement("div", { id: descriptionId, "data-testid": descriptionDataTestId }, description));
-    };
-    return (React__default.createElement(Wrapper, { id: isFieldset ? id : undefined, role: customRole, "aria-labelledby": !isFieldset && labelId ? labelId : undefined, "aria-describedby": !isFieldset && description ? descriptionId : undefined, className: className, "data-testid": dataTestId },
-        renderLabel(),
-        renderDescription(),
-        children));
+const PillGroup = ({
+  children,
+  label,
+  id,
+  type,
+  className,
+  description,
+  groupVariant,
+  'data-testid': dataTestId = 'pill-group'
+}) => {
+  const isFieldset = groupVariant === 'fieldset';
+  const Wrapper = isFieldset ? 'fieldset' : 'div';
+  const labelId = `${id}-label`;
+  const descriptionId = `${id}-description`;
+  const labelDataTestId = `${dataTestId}-label`;
+  const descriptionDataTestId = `${dataTestId}-description`;
+  const isRadioGroup = type === 'radio' && groupVariant === 'radiogroup';
+  const isCheckboxAndButtonGroup = (type === 'checkbox' || type === 'none') && groupVariant === 'group';
+  let customRole;
+  if (isRadioGroup) {
+    customRole = 'radiogroup';
+  } else if (isCheckboxAndButtonGroup) {
+    customRole = 'group';
+  } else {
+    customRole = undefined;
+  }
+  const renderLabel = () => {
+    if (!label) return null;
+    return isFieldset ? (/*#__PURE__*/React__default.createElement("legend", {
+      "data-testid": labelDataTestId
+    }, label)) : (/*#__PURE__*/React__default.createElement("div", {
+      id: labelId,
+      "data-testid": labelDataTestId
+    }, label));
+  };
+  const renderDescription = () => {
+    if (!description) return null;
+    return /*#__PURE__*/React__default.createElement("div", {
+      id: descriptionId,
+      "data-testid": descriptionDataTestId
+    }, description);
+  };
+  return /*#__PURE__*/React__default.createElement(Wrapper, {
+    id: isFieldset ? id : undefined,
+    role: customRole,
+    "aria-labelledby": !isFieldset && labelId ? labelId : undefined,
+    "aria-describedby": !isFieldset && description ? descriptionId : undefined,
+    className: className,
+    "data-testid": dataTestId
+  }, renderLabel(), renderDescription(), children);
 };
 
 export { PillGroup as default };

package/build/es/components/PixelLoader/PixelLoader.js

@@ -3,41 +3,44 @@ import React__default from 'react';
 import { keyframes, styled } from 'styled-components';
 import theme from '../../themes/theme.js';
 
-const loading = keyframes `
-    0% {
-        transform: scale(1);
-    }
-    20% {
-        transform: scale(1.4, 1.4);
-    }
-    40% {
-        transform: scale(1);
-    }
-`;
-const PixelLoaderWrapper = styled.div `
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 0.125rem;
-`;
-const Pixel = styled.div `
-    background-color: ${({ $color }) => $color || theme.color.default.pink};
-    display: inline-block;
-    width: 0.625rem;
-    height: 0.625rem;
-    margin: 0.125rem;
-    animation: ${loading} 1s ease-in-out infinite;
-    animation-delay: ${({ $delay }) => $delay}s;
-`;
+const loading = keyframes(["0%{transform:scale(1);}20%{transform:scale(1.4,1.4);}40%{transform:scale(1);}"]);
+const PixelLoaderWrapper = styled.div.withConfig({
+  displayName: "PixelLoader__PixelLoaderWrapper",
+  componentId: "sc-1qpqbdi-0"
+})(["display:flex;justify-content:center;align-items:center;padding:0.125rem;"]);
+const Pixel = styled.div.withConfig({
+  displayName: "PixelLoader__Pixel",
+  componentId: "sc-1qpqbdi-1"
+})(["background-color:", ";display:inline-block;width:0.625rem;height:0.625rem;margin:0.125rem;animation:", " 1s ease-in-out infinite;animation-delay:", "s;"], ({
+  $color
+}) => $color || theme.color.default.pink, loading, ({
+  $delay
+}) => $delay);
 /** @visibleName Pixel Loader */
-const PixelLoader = (_a) => {
-    var { className, 'data-testid': dataTestId } = _a, props = __rest(_a, ["className", 'data-testid']);
-    return (React__default.createElement(PixelLoaderWrapper, { className: className, "data-testid": dataTestId },
-        props.label && React__default.createElement("span", { className: "visually-hidden" }, props.label),
-        React__default.createElement(Pixel, { "$color": props.color, "$delay": "-0.27" }),
-        React__default.createElement(Pixel, { "$color": props.color, "$delay": "-0.18" }),
-        React__default.createElement(Pixel, { "$color": props.color, "$delay": "-0.09" }),
-        React__default.createElement(Pixel, { "$color": props.color, "$delay": "0" })));
+const PixelLoader = _a => {
+  var {
+      className,
+      'data-testid': dataTestId
+    } = _a,
+    props = __rest(_a, ["className", 'data-testid']);
+  return /*#__PURE__*/React__default.createElement(PixelLoaderWrapper, {
+    className: className,
+    "data-testid": dataTestId
+  }, props.label && /*#__PURE__*/React__default.createElement("span", {
+    className: "visually-hidden"
+  }, props.label), /*#__PURE__*/React__default.createElement(Pixel, {
+    "$color": props.color,
+    "$delay": "-0.27"
+  }), /*#__PURE__*/React__default.createElement(Pixel, {
+    "$color": props.color,
+    "$delay": "-0.18"
+  }), /*#__PURE__*/React__default.createElement(Pixel, {
+    "$color": props.color,
+    "$delay": "-0.09"
+  }), /*#__PURE__*/React__default.createElement(Pixel, {
+    "$color": props.color,
+    "$delay": "0"
+  }));
 };
 
 export { PixelLoader as default };