@dnanpm/styleguide 4.0.8 → 4.0.10

package/build/es/components/Checkbox/Checkbox.js

@@ -6,116 +6,57 @@ import { getMultipliedSize, getDividedSize } from '../../utils/styledUtils.js';
 
 // TODO: Implement proper svg icon after https://jira.dna.fi/browse/STYLE-238 is done
 const SVGIconData = () => {
-    const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="16px" height="16px">` +
-        `<path d="M9.57 19.44L3.19 13a.6.6 0 0 1 .81-.84l5.53 5.58 11-10.93a.6.6 0 0 1 .84.85z" />` +
-        `</svg>`;
-    return `data:image/svg+xml,${encodeURIComponent(svg)}`;
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="16px" height="16px">` + `<path d="M9.57 19.44L3.19 13a.6.6 0 0 1 .81-.84l5.53 5.58 11-10.93a.6.6 0 0 1 .84.85z" />` + `</svg>`;
+  return `data:image/svg+xml,${encodeURIComponent(svg)}`;
 };
-const Container = styled.div `
-    display: flex;
-    font-size: ${theme.fontSize.default};
-    line-height: ${theme.lineHeight.default};
-    margin-bottom: ${getMultipliedSize(theme.base.baseHeight, 0.5)};
-`;
-const Input = styled.input `
-    display: inline-grid;
-    appearance: none;
-    place-content: center;
-    float: left;
-    margin: 0;
-    cursor: pointer;
-    font-family: ${theme.fontFamily.default};
-    font-size: ${theme.fontSize.default};
-    line-height: ${theme.lineHeight.default};
-    min-width: ${getMultipliedSize(theme.base.baseWidth, 2)};
-    width: ${getMultipliedSize(theme.base.baseWidth, 2)};
-    height: ${getMultipliedSize(theme.base.baseWidth, 2)};
-    color: ${theme.color.line.L01};
-    border: 2px solid ${theme.color.line.L01};
-    background-color: ${theme.color.background.white.default};
-    position: relative;
-    top: ${getDividedSize(theme.base.baseWidth, 5)};
-    border-radius: ${theme.radius.s};
-
-    & + label {
-        cursor: pointer;
-        color: ${theme.color.text.black};
-        font-weight: ${theme.fontWeight.medium};
-        padding-left: ${getMultipliedSize(theme.base.baseWidth, 1)};
-    }
-
-    &::before {
-        content: '';
-        transform: scale(0);
-        background-color: currentColor;
-    }
-
-    &:checked {
-        color: ${theme.color.default.pink};
-        border-color: ${theme.color.default.pink};
-
-        &::before {
-            transform: scale(1);
-            width: ${getMultipliedSize(theme.base.baseHeight, 1.6)};
-            height: ${getMultipliedSize(theme.base.baseHeight, 1.6)};
-            background-image: url('${SVGIconData}');
-        }
-    }
-
-    &:disabled {
-        cursor: not-allowed;
-        color: ${theme.color.text.gray};
-        background-color: ${theme.color.line.L02 + theme.color.transparency.T40};
-        border-color: ${theme.color.line.L01 + theme.color.transparency.T40};
-
-        & + label {
-            cursor: not-allowed;
-            color: ${theme.color.text.gray};
-        }
-    }
-
-    &:disabled:checked {
-        color: ${theme.color.background.pink.E02};
-        border-color: ${theme.color.background.pink.E02};
-        background-color: ${theme.color.background.white.default};
-
-        &::before {
-            background-color: ${theme.color.background.pink.E02};
-        }
-    }
-
-    &:focus-visible {
-        outline: none;
-        box-shadow:
-            0px 0px 0px 2px ${theme.color.focus.light},
-            0px 0px 0px 4px ${theme.color.focus.dark};
+const Container = styled.div.withConfig({
+  displayName: "Checkbox__Container",
+  componentId: "sc-6v924a-0"
+})(["display:flex;font-size:", ";line-height:", ";margin-bottom:", ";"], theme.fontSize.default, theme.lineHeight.default, getMultipliedSize(theme.base.baseHeight, 0.5));
+const Input = styled.input.withConfig({
+  displayName: "Checkbox__Input",
+  componentId: "sc-6v924a-1"
+})(["display:inline-grid;appearance:none;place-content:center;float:left;margin:0;cursor:pointer;font-family:", ";font-size:", ";line-height:", ";min-width:", ";width:", ";height:", ";color:", ";border:2px solid ", ";background-color:", ";position:relative;top:", ";border-radius:", ";& + label{cursor:pointer;color:", ";font-weight:", ";padding-left:", ";}&::before{content:'';transform:scale(0);background-color:currentColor;}&:checked{color:", ";border-color:", ";&::before{transform:scale(1);width:", ";height:", ";background-image:url('", "');}}&:disabled{cursor:not-allowed;color:", ";background-color:", ";border-color:", ";& + label{cursor:not-allowed;color:", ";}}&:disabled:checked{color:", ";border-color:", ";background-color:", ";&::before{background-color:", ";}}&:focus-visible{outline:none;box-shadow:0px 0px 0px 2px ", ",0px 0px 0px 4px ", ";}"], theme.fontFamily.default, theme.fontSize.default, theme.lineHeight.default, getMultipliedSize(theme.base.baseWidth, 2), getMultipliedSize(theme.base.baseWidth, 2), getMultipliedSize(theme.base.baseWidth, 2), theme.color.line.L01, theme.color.line.L01, theme.color.background.white.default, getDividedSize(theme.base.baseWidth, 5), theme.radius.s, theme.color.text.black, theme.fontWeight.medium, getMultipliedSize(theme.base.baseWidth, 1), theme.color.default.pink, theme.color.default.pink, getMultipliedSize(theme.base.baseHeight, 1.6), getMultipliedSize(theme.base.baseHeight, 1.6), SVGIconData, theme.color.text.gray, theme.color.line.L02 + theme.color.transparency.T40, theme.color.line.L01 + theme.color.transparency.T40, theme.color.text.gray, theme.color.background.pink.E02, theme.color.background.pink.E02, theme.color.background.white.default, theme.color.background.pink.E02, theme.color.focus.light, theme.color.focus.dark);
+const Mandatory = styled.span.withConfig({
+  displayName: "Checkbox__Mandatory",
+  componentId: "sc-6v924a-2"
+})(["color:", ";margin-left:", ";"], theme.color.default.pink, getMultipliedSize(theme.base.baseHeight, 0.5));
+const ErrorMessage = styled.div.withConfig({
+  displayName: "Checkbox__ErrorMessage",
+  componentId: "sc-6v924a-3"
+})(["font-size:", ";line-height:", ";color:", ";margin-bottom:", ";"], theme.fontSize.s, theme.lineHeight.s, theme.color.notification.error, getMultipliedSize(theme.base.baseHeight, 0.5));
+const Checkbox = _a => {
+  var {
+      'data-testid': dataTestId
+    } = _a,
+    props = __rest(_a, ['data-testid']);
+  const errorId = `${props.id}-error`;
+  const handleChange = () => {
+    if (props.onChange && !props.disabled) {
+      props.onChange(!props.value);
     }
-`;
-const Mandatory = styled.span `
-    color: ${theme.color.default.pink};
-    margin-left: ${getMultipliedSize(theme.base.baseHeight, 0.5)};
-`;
-const ErrorMessage = styled.div `
-    font-size: ${theme.fontSize.s};
-    line-height: ${theme.lineHeight.s};
-    color: ${theme.color.notification.error};
-    margin-bottom: ${getMultipliedSize(theme.base.baseHeight, 0.5)};
-`;
-const Checkbox = (_a) => {
-    var { 'data-testid': dataTestId } = _a, props = __rest(_a, ['data-testid']);
-    const errorId = `${props.id}-error`;
-    const handleChange = () => {
-        if (props.onChange && !props.disabled) {
-            props.onChange(!props.value);
-        }
-    };
-    return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(Container, null,
-            React__default.createElement(Input, { id: props.id, name: props.name, type: "checkbox", className: props.className, checked: Boolean(props.value), onChange: handleChange, disabled: props.disabled, "data-testid": dataTestId, "aria-required": props.required, "aria-invalid": props.error ? 'true' : undefined, "aria-errormessage": props.error && props.errorMessage ? errorId : undefined, "data-checked": Boolean(props.value) }),
-            React__default.createElement("label", { htmlFor: props.id, "data-testid": dataTestId && `${dataTestId}-label` },
-                props.label,
-                props.required && React__default.createElement(Mandatory, null, "*"))),
-        props.error && props.errorMessage && (React__default.createElement(ErrorMessage, { "data-testid": dataTestId && `${dataTestId}-error`, id: errorId, role: "alert" }, props.errorMessage))));
+  };
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Container, null, /*#__PURE__*/React__default.createElement(Input, {
+    id: props.id,
+    name: props.name,
+    type: "checkbox",
+    className: props.className,
+    checked: Boolean(props.value),
+    onChange: handleChange,
+    disabled: props.disabled,
+    "data-testid": dataTestId,
+    "aria-required": props.required,
+    "aria-invalid": props.error ? 'true' : undefined,
+    "aria-errormessage": props.error && props.errorMessage ? errorId : undefined,
+    "data-checked": Boolean(props.value)
+  }), /*#__PURE__*/React__default.createElement("label", {
+    htmlFor: props.id,
+    "data-testid": dataTestId && `${dataTestId}-label`
+  }, props.label, props.required && /*#__PURE__*/React__default.createElement(Mandatory, null, "*"))), props.error && props.errorMessage && (/*#__PURE__*/React__default.createElement(ErrorMessage, {
+    "data-testid": dataTestId && `${dataTestId}-error`,
+    id: errorId,
+    role: "alert"
+  }, props.errorMessage)));
 };
 
 export { Checkbox as default };

package/build/es/components/Chip/Chip.js

@@ -4,53 +4,59 @@ import { styled } from 'styled-components';
 import theme from '../../themes/theme.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
 
-const getStyling = ({ $type }) => {
-    switch ($type) {
-        case 'success':
-            return `
+const getStyling = ({
+  $type
+}) => {
+  switch ($type) {
+    case 'success':
+      return `
                 color: ${theme.color.text.white};
                 border: 2px solid ${theme.color.notification.success};
                 background-color: ${theme.color.notification.success};
             `;
-        case 'error':
-            return `
+    case 'error':
+      return `
                 color: ${theme.color.text.black};
                 border: 2px solid ${theme.color.notification.error};
                 background-color: ${theme.color.background.white.default};
             `;
-        case 'default':
-        default:
-            return `
+    case 'default':
+    default:
+      return `
                 color: ${theme.color.text.black};
                 border: 2px solid ${theme.color.line.L01};
                 background-color: ${theme.color.background.white.default};
             `;
-    }
+  }
 };
-const Element = styled.div `
-    all: unset;
-    display: inline-block;
-    border-radius: ${theme.radius.pill};
-    padding: 1px ${getMultipliedSize(theme.base.baseHeight, 1)};
-    font-size: ${theme.fontSize.s};
-    line-height: ${theme.lineHeight.s};
-    font-weight: ${theme.fontWeight.medium};
-    text-align: center;
-    ${({ onClick }) => onClick && `cursor: pointer`};
-
-    ${({ $type }) => getStyling({ $type })}
-
-    &:focus-visible {
-        outline: none;
-        box-shadow:
-            0px 0px 0px 2px ${theme.color.focus.light},
-            0px 0px 0px 4px ${theme.color.focus.dark};
-    }
-`;
-const Chip = (_a) => {
-    var { type = 'default', 'data-testid': dataTestId } = _a, props = __rest(_a, ["type", 'data-testid']);
-    const label = props.ariaLabel || (typeof props.children === 'string' ? props.children : undefined);
-    return (React__default.createElement(Element, { as: props.onClick ? 'button' : 'div', id: props.id, "$type": type, onClick: props.onClick, className: props.className, "data-testid": dataTestId, "aria-label": label, "aria-describedby": props.ariaDescribedBy, tabIndex: 0 }, props.children));
+const Element = styled.div.withConfig({
+  displayName: "Chip__Element",
+  componentId: "sc-1i2uw72-0"
+})(["all:unset;display:inline-block;border-radius:", ";padding:1px ", ";font-size:", ";line-height:", ";font-weight:", ";text-align:center;", ";", " &:focus-visible{outline:none;box-shadow:0px 0px 0px 2px ", ",0px 0px 0px 4px ", ";}"], theme.radius.pill, getMultipliedSize(theme.base.baseHeight, 1), theme.fontSize.s, theme.lineHeight.s, theme.fontWeight.medium, ({
+  onClick
+}) => onClick && `cursor: pointer`, ({
+  $type
+}) => getStyling({
+  $type
+}), theme.color.focus.light, theme.color.focus.dark);
+const Chip = _a => {
+  var {
+      type = 'default',
+      'data-testid': dataTestId
+    } = _a,
+    props = __rest(_a, ["type", 'data-testid']);
+  const label = props.ariaLabel || (typeof props.children === 'string' ? props.children : undefined);
+  return /*#__PURE__*/React__default.createElement(Element, {
+    as: props.onClick ? 'button' : 'div',
+    id: props.id,
+    "$type": type,
+    onClick: props.onClick,
+    className: props.className,
+    "data-testid": dataTestId,
+    "aria-label": label,
+    "aria-describedby": props.ariaDescribedBy,
+    tabIndex: 0
+  }, props.children);
 };
 
 export { Chip as default };