@popsure/dirty-swan 0.33.1 → 0.33.2

package/dist/esm/components/input/checkbox/index.js

@@ -1,6 +1,11 @@
 import { _ as __assign, d as __spreadArray } from '../../../tslib.es6-5bc94358.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { c as classnames } from '../../../index-e9e37a34.js';
+import { s as styleInject } from '../../../style-inject.es-1f59c1d0.js';
+
+var css_248z = ".styles-module_container__3zJJC {\n  max-width: 100%;\n}";
+var styles = {"container":"styles-module_container__3zJJC"};
+styleInject(css_248z);
 
 var Checkbox = function (_a) {
     var options = _a.options, _b = _a.value, value = _b === void 0 ? [] : _b, onChange = _a.onChange, _c = _a.wide, wide = _c === void 0 ? false : _c, _d = _a.inlineLayout, inlineLayout = _d === void 0 ? false : _d, _e = _a.className, className = _e === void 0 ? '' : _e, _f = _a.labelClassName, labelClassName = _f === void 0 ? '' : _f, _g = _a.optionClassName, optionClassName = _g === void 0 ? '' : _g;
@@ -26,7 +31,7 @@ var Checkbox = function (_a) {
         onChange(newValues);
     };
     var entries = Object.entries(options);
-    return (jsx("div", __assign({ className: classnames(className, 'd-flex gap8', {
+    return (jsx("div", __assign({ className: classnames(className, styles.container, 'd-flex gap8', {
             ws10: wide,
             ws6: !wide,
             'fd-row': inlineLayout,

package/dist/esm/components/input/checkbox/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../../src/lib/components/input/checkbox/index.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport { ReactNode } from \"react\";\n\nexport interface CheckboxWithDescription {\n  title: string;\n  description?: string;\n  icon?: (selected: boolean) => ReactNode;\n}\n\nexport interface CheckboxProps<ValueType extends string> {\n  options: Record<ValueType, string | CheckboxWithDescription>;\n  value?: ValueType[];\n  onChange: (value: ValueType[]) => void;\n  wide?: boolean;\n  inlineLayout?: boolean;\n  className?: string;\n  labelClassName?: string;\n  optionClassName?: string\n}\n\nexport const Checkbox = <ValueType extends string>({\n  options,\n  value = [],\n  onChange,\n  wide = false,\n  inlineLayout = false,\n  className = '',\n  labelClassName = '',\n  optionClassName = '',\n}: CheckboxProps<ValueType> & {  }) => {\n  const hasNoneValue = Object.keys(options).includes('NONE');\n\n  const handleOnChange = (newValue: ValueType) => {\n    if (value?.includes(newValue)) {\n      const filteredCheckboxValues = value.filter(\n        (selectedValue) => selectedValue !== newValue\n      );\n\n      onChange(filteredCheckboxValues);\n      return;\n    }\n\n    if (hasNoneValue && newValue === 'NONE') {\n      onChange([newValue]);\n      return;\n    }\n\n    if (hasNoneValue && newValue !== 'NONE') {\n      const newValues = value\n        ? [...value.filter((v) => v !== 'NONE'), newValue]\n        : [newValue];\n      onChange(newValues);\n      return;\n    }\n\n    const newValues = value\n      ? [...value, newValue]\n      : [newValue];\n    onChange(newValues);\n  };\n\n\n  const entries = Object.entries(options) as [\n    ValueType,\n    string | CheckboxWithDescription\n  ][];\n\n  return (\n    <div\n      className={classNames(className, 'd-flex gap8', {\n        ws10: wide,\n        ws6: !wide,\n        'fd-row': inlineLayout,\n        'f-wrap': inlineLayout,\n        'fd-column': !inlineLayout,\n      })}\n    >\n      {entries.map(([currentValue, label]) => {\n        const checked = value?.includes(currentValue);\n        const customIcon = (label as CheckboxWithDescription)?.icon;\n\n        return (\n          <div className={optionClassName} key={currentValue}>\n            <input\n              className={classNames(\n                \"p-checkbox\", {\n                  'p-checkbox--no-icon': customIcon\n                }\n              )}\n              id={currentValue}\n              type=\"checkbox\"\n              value={currentValue}\n              onChange={() => handleOnChange(currentValue)}\n              checked={checked}\n              data-testid={`checkbox-input-${currentValue}`}\n            />\n\n            <label\n              htmlFor={currentValue}\n              className={classNames(\n                labelClassName,\n                'p-label p-label--bordered pr16',\n                {\n                  'jc-center': customIcon,\n                  'fd-column': customIcon\n                }\n              )}\n              data-cy={`checkbox-${currentValue}`}\n              data-testid={`checkbox-${currentValue}`}\n            >\n              {customIcon && (\n                <div className=\"mt8\">{customIcon?.(checked)}</div>\n              )}\n\n              {typeof label === 'string' ? label : (\n                <div>\n                  <p className=\"p-p\">{label.title}</p>\n                  <span className=\"d-block p-p p-p--small tc-grey-600\">\n                    {label.description}\n                  </span>\n                </div>\n              )}\n            </label>\n          </div>\n        );\n      })}\n    </div>\n  );\n};\n"],"names":["_jsx","classNames","_jsxs"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../../../src/lib/components/input/checkbox/index.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport { ReactNode } from \"react\";\n\nimport styles from './styles.module.scss';\nexport interface CheckboxWithDescription {\n  title: string;\n  description?: string;\n  icon?: (selected: boolean) => ReactNode;\n}\n\nexport interface CheckboxProps<ValueType extends string> {\n  options: Record<ValueType, string | CheckboxWithDescription>;\n  value?: ValueType[];\n  onChange: (value: ValueType[]) => void;\n  wide?: boolean;\n  inlineLayout?: boolean;\n  className?: string;\n  labelClassName?: string;\n  optionClassName?: string\n}\n\nexport const Checkbox = <ValueType extends string>({\n  options,\n  value = [],\n  onChange,\n  wide = false,\n  inlineLayout = false,\n  className = '',\n  labelClassName = '',\n  optionClassName = '',\n}: CheckboxProps<ValueType> & {  }) => {\n  const hasNoneValue = Object.keys(options).includes('NONE');\n\n  const handleOnChange = (newValue: ValueType) => {\n    if (value?.includes(newValue)) {\n      const filteredCheckboxValues = value.filter(\n        (selectedValue) => selectedValue !== newValue\n      );\n\n      onChange(filteredCheckboxValues);\n      return;\n    }\n\n    if (hasNoneValue && newValue === 'NONE') {\n      onChange([newValue]);\n      return;\n    }\n\n    if (hasNoneValue && newValue !== 'NONE') {\n      const newValues = value\n        ? [...value.filter((v) => v !== 'NONE'), newValue]\n        : [newValue];\n      onChange(newValues);\n      return;\n    }\n\n    const newValues = value\n      ? [...value, newValue]\n      : [newValue];\n    onChange(newValues);\n  };\n\n\n  const entries = Object.entries(options) as [\n    ValueType,\n    string | CheckboxWithDescription\n  ][];\n\n  return (\n    <div\n      className={classNames(className, styles.container, 'd-flex gap8', {\n        ws10: wide,\n        ws6: !wide,\n        'fd-row': inlineLayout,\n        'f-wrap': inlineLayout,\n        'fd-column': !inlineLayout,\n      })}\n    >\n      {entries.map(([currentValue, label]) => {\n        const checked = value?.includes(currentValue);\n        const customIcon = (label as CheckboxWithDescription)?.icon;\n\n        return (\n          <div className={optionClassName} key={currentValue}>\n            <input\n              className={classNames(\n                \"p-checkbox\", {\n                  'p-checkbox--no-icon': customIcon\n                }\n              )}\n              id={currentValue}\n              type=\"checkbox\"\n              value={currentValue}\n              onChange={() => handleOnChange(currentValue)}\n              checked={checked}\n              data-testid={`checkbox-input-${currentValue}`}\n            />\n\n            <label\n              htmlFor={currentValue}\n              className={classNames(\n                labelClassName,\n                'p-label p-label--bordered pr16',\n                {\n                  'jc-center': customIcon,\n                  'fd-column': customIcon\n                }\n              )}\n              data-cy={`checkbox-${currentValue}`}\n              data-testid={`checkbox-${currentValue}`}\n            >\n              {customIcon && (\n                <div className=\"mt8\">{customIcon?.(checked)}</div>\n              )}\n\n              {typeof label === 'string' ? label : (\n                <div>\n                  <p className=\"p-p\">{label.title}</p>\n                  <span className=\"d-block p-p p-p--small tc-grey-600\">\n                    {label.description}\n                  </span>\n                </div>\n              )}\n            </label>\n          </div>\n        );\n      })}\n    </div>\n  );\n};\n"],"names":["_jsx","classNames","_jsxs"],"mappings":"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"}

package/dist/esm/components/input/checkbox/index.stories.js

@@ -4,6 +4,7 @@ import { Checkbox } from './index.js';
 import { i as images } from '../../../index-db2e797f.js';
 import '../../../tslib.es6-5bc94358.js';
 import '../../../index-e9e37a34.js';
+import '../../../style-inject.es-1f59c1d0.js';
 
 var story = {
     title: 'JSX/Inputs/Checkbox',

package/dist/esm/components/input/checkbox/index.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.stories.js","sources":["../../../../../../src/lib/components/input/checkbox/index.stories.tsx"],"sourcesContent":["\nimport { useState } from 'react';\nimport { Checkbox, CheckboxProps } from '.';\nimport { images } from '../../../util/images';\n\nconst story = {\n  title: 'JSX/Inputs/Checkbox',\n  component: Checkbox,\n  argTypes: {\n    options: {\n      description: 'Object that contains the possible options for rendering in the input.',\n      defaultValue: {\n        CAT:{\n          title: 'Cat',\n          description: 'At least 1'\n        },\n        DOG:{\n          title: 'Dog',\n          description: 'At least 2'\n        },\n        NONE:{\n          title: 'None',\n          description: 'No pets'\n        }\n      }\n    },\n    value: {\n      description: 'Current checked values.',\n    },\n    onChange: {\n      description: 'Function called everytime a value changes.',\n      action: true,\n      table: {\n        category: \"Callbacks\",\n      },\n    },\n    wide: {\n      description: 'Property that defines if options should fill 100% of available horizontal space',\n      defaultValue: false\n    },\n    inlineLayout: {\n      description: 'Property that defines if options should show inline instead of block. Check inline checkbox options story for examples.',\n      defaultValue: false\n    },\n    className: {\n      description: 'Wrapper classNames for custom styling',\n      defaultValue: ''\n    },\n    optionClassName: {\n      description: 'Option classNames for custom styling',\n      defaultValue: ''\n    },\n    labelClassName: {\n      description: 'Label classNames for custom styling',\n      defaultValue: ''\n    },\n  }\n};\n\nexport const CheckboxStory = ({ \n  onChange,\n  options,\n  wide,\n  className,\n  optionClassName,\n  labelClassName,\n  inlineLayout,\n}: CheckboxProps<string>) => {\n  const [checkedValues, setCheckedValues] = useState<string[]>([]);\n\n  const handleOnChange = (newValue: string[]) => {\n    setCheckedValues(newValue);\n    onChange(newValue);\n  }\n\n  return (\n    <Checkbox \n      wide={wide}\n      options={options} \n      onChange={handleOnChange}\n      value={checkedValues}\n      className={className}\n      labelClassName={labelClassName}\n      optionClassName={optionClassName}\n      inlineLayout={inlineLayout}\n    />\n  );\n}\n\nexport const CheckboxWithCustomWrapperStyles = ({ onChange }: CheckboxProps<string>) => {\n  const [checkedValues, setCheckedValues] = useState<string[]>([]);\n\n  const handleOnChange = (newValue: string[] = []) => {\n    setCheckedValues(newValue);\n    onChange(newValue);\n  }\n\n  return (\n    <Checkbox \n      onChange={handleOnChange}\n      value={checkedValues}\n      options={{\n        CAT1: 'Cat',\n        DOG1: 'Dog',\n      }} \n      className=\"p32 bg-primary-300 br24 bs-lg\"\n    />\n  );\n}\n\nexport const CheckboxWithCustomOptionStyles = ({ onChange }: CheckboxProps<string>) => {\n  const [checkedValues, setCheckedValues] = useState<string[]>([]);\n\n  const handleOnChange = (newValue: string[] = []) => {\n    setCheckedValues(newValue);\n    onChange(newValue);\n  }\n\n  return (\n    <Checkbox \n      onChange={handleOnChange}\n      value={checkedValues}\n      options={{\n        CAT2: 'Cat',\n        DOG2: 'Dog',\n      }} \n      optionClassName=\"mb32 p24 bg-green-100 br12 bs-lg\"\n    />\n  );\n}\n\nexport const CheckboxWithCustomLabelStyles = ({ onChange }: CheckboxProps<string>) => {\n  const [checkedValues, setCheckedValues] = useState<string[]>([]);\n\n  const handleOnChange = (newValue: string[] = []) => {\n    setCheckedValues(newValue);\n    onChange(newValue);\n  }\n\n  return (\n    <Checkbox \n      onChange={handleOnChange}\n      value={checkedValues}\n      options={{\n        CAT3: 'Cat',\n        DOG3: 'Dog',\n      }} \n      labelClassName=\"bg-grey-900 tc-white\"\n    />\n  );\n}\n\nexport const CheckboxWithInlineLayout = ({ onChange }: CheckboxProps<string>) => {\n  const [checkedValues, setCheckedValues] = useState<string[]>([]);\n\n  const handleOnChange = (newValue: string[] = []) => {\n    setCheckedValues(newValue);\n    onChange(newValue);\n  }\n\n  return (\n    <Checkbox \n      onChange={handleOnChange}\n      value={checkedValues}\n      options={{\n        CAT4: 'Cat',\n        DOG4: 'Dog',\n        FISHER: 'Fish',\n        RABBIT: 'Rabbit',\n        RAT: 'Rat',\n        ANOTHER: 'Other',\n      }} \n      optionClassName=\"w30\"\n      inlineLayout\n      wide\n    />\n  );\n}\n\nexport const CheckboxWithCustomLabel = ({ onChange, wide, className, optionClassName, inlineLayout }: CheckboxProps<string>) => {\n  const [checkedValues, setCheckedValues] = useState<string[]>([]);\n\n  const handleOnChange = (newValue: string[] = []) => {\n    setCheckedValues(newValue);\n    onChange(newValue);\n  }\n\n  return (\n    <Checkbox \n      options={{\n        BIGDOG: {\n          icon: () => <img src={images.bigDog} alt='' />,\n          title: 'Dog',\n        },\n        FISH:{\n          icon: () => <img src={images.brokenAquarium} alt='' />,\n          title: 'Fish',\n        },\n        OTHER:{\n          icon: () => <img src={images.brokenGlass} alt='' />,\n          title: 'Other',\n        }\n      }} \n      onChange={handleOnChange}\n      value={checkedValues}\n      optionClassName=\"w30\"\n      inlineLayout\n    />\n  );\n}\n\nCheckboxStory.storyName = 'Checkbox';\n\nexport default story;\n"],"names":["_jsx"],"mappings":";;;;;;;IAKM,KAAK,GAAG;IACZ,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,QAAQ;IACnB,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,WAAW,EAAE,uEAAuE;YACpF,YAAY,EAAE;gBACZ,GAAG,EAAC;oBACF,KAAK,EAAE,KAAK;oBACZ,WAAW,EAAE,YAAY;iBAC1B;gBACD,GAAG,EAAC;oBACF,KAAK,EAAE,KAAK;oBACZ,WAAW,EAAE,YAAY;iBAC1B;gBACD,IAAI,EAAC;oBACH,KAAK,EAAE,MAAM;oBACb,WAAW,EAAE,SAAS;iBACvB;aACF;SACF;QACD,KAAK,EAAE;YACL,WAAW,EAAE,yBAAyB;SACvC;QACD,QAAQ,EAAE;YACR,WAAW,EAAE,4CAA4C;YACzD,MAAM,EAAE,IAAI;YACZ,KAAK,EAAE;gBACL,QAAQ,EAAE,WAAW;aACtB;SACF;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,iFAAiF;YAC9F,YAAY,EAAE,KAAK;SACpB;QACD,YAAY,EAAE;YACZ,WAAW,EAAE,yHAAyH;YACtI,YAAY,EAAE,KAAK;SACpB;QACD,SAAS,EAAE;YACT,WAAW,EAAE,uCAAuC;YACpD,YAAY,EAAE,EAAE;SACjB;QACD,eAAe,EAAE;YACf,WAAW,EAAE,sCAAsC;YACnD,YAAY,EAAE,EAAE;SACjB;QACD,cAAc,EAAE;YACd,WAAW,EAAE,qCAAqC;YAClD,YAAY,EAAE,EAAE;SACjB;KACF;EACD;IAEW,aAAa,GAAG,UAAC,EAQN;QAPtB,QAAQ,cAAA,EACR,OAAO,aAAA,EACP,IAAI,UAAA,EACJ,SAAS,eAAA,EACT,eAAe,qBAAA,EACf,cAAc,oBAAA,EACd,YAAY,kBAAA;IAEN,IAAA,KAAoC,QAAQ,CAAW,EAAE,CAAC,EAAzD,aAAa,QAAA,EAAE,gBAAgB,QAA0B,CAAC;IAEjE,IAAM,cAAc,GAAG,UAAC,QAAkB;QACxC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;QAC3B,QAAQ,CAAC,QAAQ,CAAC,CAAC;KACpB,CAAA;IAED,QACEA,IAAC,QAAQ,IACP,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,cAAc,EACxB,KAAK,EAAE,aAAa,EACpB,SAAS,EAAE,SAAS,EACpB,cAAc,EAAE,cAAc,EAC9B,eAAe,EAAE,eAAe,EAChC,YAAY,EAAE,YAAY,WAC1B,EACF;AACJ,EAAC;IAEY,+BAA+B,GAAG,UAAC,EAAmC;QAAjC,QAAQ,cAAA;IAClD,IAAA,KAAoC,QAAQ,CAAW,EAAE,CAAC,EAAzD,aAAa,QAAA,EAAE,gBAAgB,QAA0B,CAAC;IAEjE,IAAM,cAAc,GAAG,UAAC,QAAuB;QAAvB,yBAAA,EAAA,aAAuB;QAC7C,gBAAgB,CAAC,QAAQ,CAAC,CAAC;QAC3B,QAAQ,CAAC,QAAQ,CAAC,CAAC;KACpB,CAAA;IAED,QACEA,IAAC,QAAQ,IACP,QAAQ,EAAE,cAAc,EACxB,KAAK,EAAE,aAAa,EACpB,OAAO,EAAE;YACP,IAAI,EAAE,KAAK;YACX,IAAI,EAAE,KAAK;SACZ,EACD,SAAS,EAAC,+BAA+B,WACzC,EACF;AACJ,EAAC;IAEY,8BAA8B,GAAG,UAAC,EAAmC;QAAjC,QAAQ,cAAA;IACjD,IAAA,KAAoC,QAAQ,CAAW,EAAE,CAAC,EAAzD,aAAa,QAAA,EAAE,gBAAgB,QAA0B,CAAC;IAEjE,IAAM,cAAc,GAAG,UAAC,QAAuB;QAAvB,yBAAA,EAAA,aAAuB;QAC7C,gBAAgB,CAAC,QAAQ,CAAC,CAAC;QAC3B,QAAQ,CAAC,QAAQ,CAAC,CAAC;KACpB,CAAA;IAED,QACEA,IAAC,QAAQ,IACP,QAAQ,EAAE,cAAc,EACxB,KAAK,EAAE,aAAa,EACpB,OAAO,EAAE;YACP,IAAI,EAAE,KAAK;YACX,IAAI,EAAE,KAAK;SACZ,EACD,eAAe,EAAC,kCAAkC,WAClD,EACF;AACJ,EAAC;IAEY,6BAA6B,GAAG,UAAC,EAAmC;QAAjC,QAAQ,cAAA;IAChD,IAAA,KAAoC,QAAQ,CAAW,EAAE,CAAC,EAAzD,aAAa,QAAA,EAAE,gBAAgB,QAA0B,CAAC;IAEjE,IAAM,cAAc,GAAG,UAAC,QAAuB;QAAvB,yBAAA,EAAA,aAAuB;QAC7C,gBAAgB,CAAC,QAAQ,CAAC,CAAC;QAC3B,QAAQ,CAAC,QAAQ,CAAC,CAAC;KACpB,CAAA;IAED,QACEA,IAAC,QAAQ,IACP,QAAQ,EAAE,cAAc,EACxB,KAAK,EAAE,aAAa,EACpB,OAAO,EAAE;YACP,IAAI,EAAE,KAAK;YACX,IAAI,EAAE,KAAK;SACZ,EACD,cAAc,EAAC,sBAAsB,WACrC,EACF;AACJ,EAAC;IAEY,wBAAwB,GAAG,UAAC,EAAmC;QAAjC,QAAQ,cAAA;IAC3C,IAAA,KAAoC,QAAQ,CAAW,EAAE,CAAC,EAAzD,aAAa,QAAA,EAAE,gBAAgB,QAA0B,CAAC;IAEjE,IAAM,cAAc,GAAG,UAAC,QAAuB;QAAvB,yBAAA,EAAA,aAAuB;QAC7C,gBAAgB,CAAC,QAAQ,CAAC,CAAC;QAC3B,QAAQ,CAAC,QAAQ,CAAC,CAAC;KACpB,CAAA;IAED,QACEA,IAAC,QAAQ,IACP,QAAQ,EAAE,cAAc,EACxB,KAAK,EAAE,aAAa,EACpB,OAAO,EAAE;YACP,IAAI,EAAE,KAAK;YACX,IAAI,EAAE,KAAK;YACX,MAAM,EAAE,MAAM;YACd,MAAM,EAAE,QAAQ;YAChB,GAAG,EAAE,KAAK;YACV,OAAO,EAAE,OAAO;SACjB,EACD,eAAe,EAAC,KAAK,EACrB,YAAY,QACZ,IAAI,iBACJ,EACF;AACJ,EAAC;IAEY,uBAAuB,GAAG,UAAC,EAAmF;QAAjF,QAAQ,cAAA,SAAM,cAAW,oBAAiB;IAC5E,IAAA,KAAoC,QAAQ,CAAW,EAAE,CAAC,EAAzD,aAAa,QAAA,EAAE,gBAAgB,QAA0B,CAAC;IAEjE,IAAM,cAAc,GAAG,UAAC,QAAuB;QAAvB,yBAAA,EAAA,aAAuB;QAC7C,gBAAgB,CAAC,QAAQ,CAAC,CAAC;QAC3B,QAAQ,CAAC,QAAQ,CAAC,CAAC;KACpB,CAAA;IAED,QACEA,IAAC,QAAQ,IACP,OAAO,EAAE;YACP,MAAM,EAAE;gBACN,IAAI,EAAE,cAAM,OAAAA,aAAK,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,EAAC,EAAE,WAAG,GAAA;gBAC9C,KAAK,EAAE,KAAK;aACb;YACD,IAAI,EAAC;gBACH,IAAI,EAAE,cAAM,OAAAA,aAAK,GAAG,EAAE,MAAM,CAAC,cAAc,EAAE,GAAG,EAAC,EAAE,WAAG,GAAA;gBACtD,KAAK,EAAE,MAAM;aACd;YACD,KAAK,EAAC;gBACJ,IAAI,EAAE,cAAM,OAAAA,aAAK,GAAG,EAAE,MAAM,CAAC,WAAW,EAAE,GAAG,EAAC,EAAE,WAAG,GAAA;gBACnD,KAAK,EAAE,OAAO;aACf;SACF,EACD,QAAQ,EAAE,cAAc,EACxB,KAAK,EAAE,aAAa,EACpB,eAAe,EAAC,KAAK,EACrB,YAAY,iBACZ,EACF;AACJ,EAAC;AAED,aAAa,CAAC,SAAS,GAAG,UAAU;;;;;"}
+{"version":3,"file":"index.stories.js","sources":["../../../../../../src/lib/components/input/checkbox/index.stories.tsx"],"sourcesContent":["\nimport { useState } from 'react';\nimport { Checkbox, CheckboxProps } from '.';\nimport { images } from '../../../util/images';\n\nconst story = {\n  title: 'JSX/Inputs/Checkbox',\n  component: Checkbox,\n  argTypes: {\n    options: {\n      description: 'Object that contains the possible options for rendering in the input.',\n      defaultValue: {\n        CAT:{\n          title: 'Cat',\n          description: 'At least 1'\n        },\n        DOG:{\n          title: 'Dog',\n          description: 'At least 2'\n        },\n        NONE:{\n          title: 'None',\n          description: 'No pets'\n        }\n      }\n    },\n    value: {\n      description: 'Current checked values.',\n    },\n    onChange: {\n      description: 'Function called everytime a value changes.',\n      action: true,\n      table: {\n        category: \"Callbacks\",\n      },\n    },\n    wide: {\n      description: 'Property that defines if options should fill 100% of available horizontal space',\n      defaultValue: false\n    },\n    inlineLayout: {\n      description: 'Property that defines if options should show inline instead of block. Check inline checkbox options story for examples.',\n      defaultValue: false\n    },\n    className: {\n      description: 'Wrapper classNames for custom styling',\n      defaultValue: ''\n    },\n    optionClassName: {\n      description: 'Option classNames for custom styling',\n      defaultValue: ''\n    },\n    labelClassName: {\n      description: 'Label classNames for custom styling',\n      defaultValue: ''\n    },\n  }\n};\n\nexport const CheckboxStory = ({ \n  onChange,\n  options,\n  wide,\n  className,\n  optionClassName,\n  labelClassName,\n  inlineLayout,\n}: CheckboxProps<string>) => {\n  const [checkedValues, setCheckedValues] = useState<string[]>([]);\n\n  const handleOnChange = (newValue: string[]) => {\n    setCheckedValues(newValue);\n    onChange(newValue);\n  }\n\n  return (\n    <Checkbox \n      wide={wide}\n      options={options} \n      onChange={handleOnChange}\n      value={checkedValues}\n      className={className}\n      labelClassName={labelClassName}\n      optionClassName={optionClassName}\n      inlineLayout={inlineLayout}\n    />\n  );\n}\n\nexport const CheckboxWithCustomWrapperStyles = ({ onChange }: CheckboxProps<string>) => {\n  const [checkedValues, setCheckedValues] = useState<string[]>([]);\n\n  const handleOnChange = (newValue: string[] = []) => {\n    setCheckedValues(newValue);\n    onChange(newValue);\n  }\n\n  return (\n    <Checkbox \n      onChange={handleOnChange}\n      value={checkedValues}\n      options={{\n        CAT1: 'Cat',\n        DOG1: 'Dog',\n      }} \n      className=\"p32 bg-primary-300 br24 bs-lg\"\n    />\n  );\n}\n\nexport const CheckboxWithCustomOptionStyles = ({ onChange }: CheckboxProps<string>) => {\n  const [checkedValues, setCheckedValues] = useState<string[]>([]);\n\n  const handleOnChange = (newValue: string[] = []) => {\n    setCheckedValues(newValue);\n    onChange(newValue);\n  }\n\n  return (\n    <Checkbox \n      onChange={handleOnChange}\n      value={checkedValues}\n      options={{\n        CAT2: 'Cat',\n        DOG2: 'Dog',\n      }} \n      optionClassName=\"mb32 p24 bg-green-100 br12 bs-lg\"\n    />\n  );\n}\n\nexport const CheckboxWithCustomLabelStyles = ({ onChange }: CheckboxProps<string>) => {\n  const [checkedValues, setCheckedValues] = useState<string[]>([]);\n\n  const handleOnChange = (newValue: string[] = []) => {\n    setCheckedValues(newValue);\n    onChange(newValue);\n  }\n\n  return (\n    <Checkbox \n      onChange={handleOnChange}\n      value={checkedValues}\n      options={{\n        CAT3: 'Cat',\n        DOG3: 'Dog',\n      }} \n      labelClassName=\"bg-grey-900 tc-white\"\n    />\n  );\n}\n\nexport const CheckboxWithInlineLayout = ({ onChange }: CheckboxProps<string>) => {\n  const [checkedValues, setCheckedValues] = useState<string[]>([]);\n\n  const handleOnChange = (newValue: string[] = []) => {\n    setCheckedValues(newValue);\n    onChange(newValue);\n  }\n\n  return (\n    <Checkbox \n      onChange={handleOnChange}\n      value={checkedValues}\n      options={{\n        CAT4: 'Cat',\n        DOG4: 'Dog',\n        FISHER: 'Fish',\n        RABBIT: 'Rabbit',\n        RAT: 'Rat',\n        ANOTHER: 'Other',\n      }} \n      optionClassName=\"w30\"\n      inlineLayout\n      wide\n    />\n  );\n}\n\nexport const CheckboxWithCustomLabel = ({ onChange, wide, className, optionClassName, inlineLayout }: CheckboxProps<string>) => {\n  const [checkedValues, setCheckedValues] = useState<string[]>([]);\n\n  const handleOnChange = (newValue: string[] = []) => {\n    setCheckedValues(newValue);\n    onChange(newValue);\n  }\n\n  return (\n    <Checkbox \n      options={{\n        BIGDOG: {\n          icon: () => <img src={images.bigDog} alt='' />,\n          title: 'Dog',\n        },\n        FISH:{\n          icon: () => <img src={images.brokenAquarium} alt='' />,\n          title: 'Fish',\n        },\n        OTHER:{\n          icon: () => <img src={images.brokenGlass} alt='' />,\n          title: 'Other',\n        }\n      }} \n      onChange={handleOnChange}\n      value={checkedValues}\n      optionClassName=\"w30\"\n      inlineLayout\n    />\n  );\n}\n\nCheckboxStory.storyName = 'Checkbox';\n\nexport default story;\n"],"names":["_jsx"],"mappings":"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"}

package/dist/esm/components/input/checkbox/index.test.js

@@ -7,6 +7,7 @@ import 'react-dom';
 import '../../../_commonjsHelpers-e7f67fd8.js';
 import 'react-dom/test-utils';
 import '../../../index-e9e37a34.js';
+import '../../../style-inject.es-1f59c1d0.js';
 
 var mockOnChange = jest.fn();
 var setup = function (onChange, value) {

package/dist/esm/components/input/checkbox/index.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.test.js","sources":["../../../../../../src/lib/components/input/checkbox/index.test.tsx"],"sourcesContent":["import { render } from '../../../util/testUtils';\n\nimport { Checkbox, CheckboxProps } from '.';\n\nconst mockOnChange = jest.fn();\n\nconst setup = (onChange: CheckboxProps<string>['onChange'], value?: string[]) => {\n  const utils = render(\n    <Checkbox\n      options={{\n        CAT: 'Cat',\n        DOG: 'Dog',\n        NONE: 'None',\n      }}\n      onChange={onChange}\n      value={value}\n    />\n  );\n\n  return utils;\n};\n\ndescribe('Checkbox component', () => {\n  it('Should render options', () => {\n    const { getByText } = setup(mockOnChange);\n\n    expect(getByText('Cat')).toBeInTheDocument();\n    expect(getByText('Dog')).toBeInTheDocument();\n    expect(getByText('None')).toBeInTheDocument();\n  });\n\n  it('Should call onchange on selecting an option', async () => {\n    const { getByTestId, user } = setup(mockOnChange);\n\n    await user.click(getByTestId('checkbox-DOG'));\n\n    expect(mockOnChange).toBeCalledWith([\"DOG\"]);\n  });\n\n  it('Should render checked items when value is passed', async () => {\n    const { getByTestId } = setup(mockOnChange, ['CAT']);\n\n    expect(getByTestId('checkbox-input-CAT')).toBeChecked();\n  });\n\n  it('Should call onchange with NONE and removing other items on selecting NONE option', async () => {\n    const { getByTestId, user } = setup(mockOnChange, ['CAT', 'DOG']);\n\n    await user.click(getByTestId('checkbox-NONE'));\n\n    expect(mockOnChange).toBeCalledWith([\"NONE\"]);\n  });\n\n  it('Should call onchange empty when removing NONE option', async () => {\n    const { getByTestId, user } = setup(mockOnChange, ['NONE']);\n\n    await user.click(getByTestId('checkbox-NONE'));\n\n    expect(mockOnChange).toBeCalledWith([]);\n  });\n\n  it('Should render custom description', () => {\n      const { getByText } = render(\n        <Checkbox\n          options={{\n            CAT: {\n              title: 'Cat',\n              description: 'Cat description'\n            },\n          }}\n          onChange={mockOnChange}\n        />\n      );\n\n    expect(getByText('Cat description')).toBeInTheDocument();\n  });\n\n  it('Should render custom icon', () => {\n      const { getByText } = render(\n        <Checkbox\n          options={{\n            CAT: {\n              title: 'Cat',\n              icon: () => 'ICON'\n            },\n          }}\n          onChange={mockOnChange}\n        />\n      );\n\n    expect(getByText('ICON')).toBeInTheDocument();\n  });\n\n  it('Should render custom icon with selected', () => {\n      const { getByText } = render(\n        <Checkbox\n          options={{\n            CAT: {\n              title: 'Cat',\n              icon: (selected) => selected ? 'SELECTED-ICON' : 'ICON'\n            },\n          }}\n          onChange={mockOnChange}\n          value={['CAT']}\n        />\n      );\n\n    expect(getByText('SELECTED-ICON')).toBeInTheDocument();\n  });\n});\n"],"names":["render","_jsx"],"mappings":"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"}
+{"version":3,"file":"index.test.js","sources":["../../../../../../src/lib/components/input/checkbox/index.test.tsx"],"sourcesContent":["import { render } from '../../../util/testUtils';\n\nimport { Checkbox, CheckboxProps } from '.';\n\nconst mockOnChange = jest.fn();\n\nconst setup = (onChange: CheckboxProps<string>['onChange'], value?: string[]) => {\n  const utils = render(\n    <Checkbox\n      options={{\n        CAT: 'Cat',\n        DOG: 'Dog',\n        NONE: 'None',\n      }}\n      onChange={onChange}\n      value={value}\n    />\n  );\n\n  return utils;\n};\n\ndescribe('Checkbox component', () => {\n  it('Should render options', () => {\n    const { getByText } = setup(mockOnChange);\n\n    expect(getByText('Cat')).toBeInTheDocument();\n    expect(getByText('Dog')).toBeInTheDocument();\n    expect(getByText('None')).toBeInTheDocument();\n  });\n\n  it('Should call onchange on selecting an option', async () => {\n    const { getByTestId, user } = setup(mockOnChange);\n\n    await user.click(getByTestId('checkbox-DOG'));\n\n    expect(mockOnChange).toBeCalledWith([\"DOG\"]);\n  });\n\n  it('Should render checked items when value is passed', async () => {\n    const { getByTestId } = setup(mockOnChange, ['CAT']);\n\n    expect(getByTestId('checkbox-input-CAT')).toBeChecked();\n  });\n\n  it('Should call onchange with NONE and removing other items on selecting NONE option', async () => {\n    const { getByTestId, user } = setup(mockOnChange, ['CAT', 'DOG']);\n\n    await user.click(getByTestId('checkbox-NONE'));\n\n    expect(mockOnChange).toBeCalledWith([\"NONE\"]);\n  });\n\n  it('Should call onchange empty when removing NONE option', async () => {\n    const { getByTestId, user } = setup(mockOnChange, ['NONE']);\n\n    await user.click(getByTestId('checkbox-NONE'));\n\n    expect(mockOnChange).toBeCalledWith([]);\n  });\n\n  it('Should render custom description', () => {\n      const { getByText } = render(\n        <Checkbox\n          options={{\n            CAT: {\n              title: 'Cat',\n              description: 'Cat description'\n            },\n          }}\n          onChange={mockOnChange}\n        />\n      );\n\n    expect(getByText('Cat description')).toBeInTheDocument();\n  });\n\n  it('Should render custom icon', () => {\n      const { getByText } = render(\n        <Checkbox\n          options={{\n            CAT: {\n              title: 'Cat',\n              icon: () => 'ICON'\n            },\n          }}\n          onChange={mockOnChange}\n        />\n      );\n\n    expect(getByText('ICON')).toBeInTheDocument();\n  });\n\n  it('Should render custom icon with selected', () => {\n      const { getByText } = render(\n        <Checkbox\n          options={{\n            CAT: {\n              title: 'Cat',\n              icon: (selected) => selected ? 'SELECTED-ICON' : 'ICON'\n            },\n          }}\n          onChange={mockOnChange}\n          value={['CAT']}\n        />\n      );\n\n    expect(getByText('SELECTED-ICON')).toBeInTheDocument();\n  });\n});\n"],"names":["render","_jsx"],"mappings":";;;;;;;;;;;AAIA,IAAM,YAAY,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;AAE/B,IAAM,KAAK,GAAG,UAAC,QAA2C,EAAE,KAAgB;IAC1E,IAAM,KAAK,GAAGA,YAAM,CAClBC,IAAC,QAAQ,IACP,OAAO,EAAE;YACP,GAAG,EAAE,KAAK;YACV,GAAG,EAAE,KAAK;YACV,IAAI,EAAE,MAAM;SACb,EACD,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,WACZ,CACH,CAAC;IAEF,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AAEF,QAAQ,CAAC,oBAAoB,EAAE;IAC7B,EAAE,CAAC,uBAAuB,EAAE;QAClB,IAAA,SAAS,GAAK,KAAK,CAAC,YAAY,CAAC,UAAxB,CAAyB;QAE1C,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;QAC7C,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;QAC7C,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;KAC/C,CAAC,CAAC;IAEH,EAAE,CAAC,6CAA6C,EAAE;;;;;oBAC1C,KAAwB,KAAK,CAAC,YAAY,CAAC,EAAzC,WAAW,iBAAA,EAAE,IAAI,UAAA,CAAyB;oBAElD,qBAAM,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,cAAc,CAAC,CAAC,EAAA;;oBAA7C,SAA6C,CAAC;oBAE9C,MAAM,CAAC,YAAY,CAAC,CAAC,cAAc,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;;;;SAC9C,CAAC,CAAC;IAEH,EAAE,CAAC,kDAAkD,EAAE;;;YAC7C,WAAW,GAAK,KAAK,CAAC,YAAY,EAAE,CAAC,KAAK,CAAC,CAAC,YAAjC,CAAkC;YAErD,MAAM,CAAC,WAAW,CAAC,oBAAoB,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;;;SACzD,CAAC,CAAC;IAEH,EAAE,CAAC,kFAAkF,EAAE;;;;;oBAC/E,KAAwB,KAAK,CAAC,YAAY,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,EAAzD,WAAW,iBAAA,EAAE,IAAI,UAAA,CAAyC;oBAElE,qBAAM,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC,EAAA;;oBAA9C,SAA8C,CAAC;oBAE/C,MAAM,CAAC,YAAY,CAAC,CAAC,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;;;;SAC/C,CAAC,CAAC;IAEH,EAAE,CAAC,sDAAsD,EAAE;;;;;oBACnD,KAAwB,KAAK,CAAC,YAAY,EAAE,CAAC,MAAM,CAAC,CAAC,EAAnD,WAAW,iBAAA,EAAE,IAAI,UAAA,CAAmC;oBAE5D,qBAAM,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC,EAAA;;oBAA9C,SAA8C,CAAC;oBAE/C,MAAM,CAAC,YAAY,CAAC,CAAC,cAAc,CAAC,EAAE,CAAC,CAAC;;;;SACzC,CAAC,CAAC;IAEH,EAAE,CAAC,kCAAkC,EAAE;QAC3B,IAAA,SAAS,GAAKD,YAAM,CAC1BC,IAAC,QAAQ,IACP,OAAO,EAAE;gBACP,GAAG,EAAE;oBACH,KAAK,EAAE,KAAK;oBACZ,WAAW,EAAE,iBAAiB;iBAC/B;aACF,EACD,QAAQ,EAAE,YAAY,WACtB,CACH,UAVgB,CAUf;QAEJ,MAAM,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;KAC1D,CAAC,CAAC;IAEH,EAAE,CAAC,2BAA2B,EAAE;QACpB,IAAA,SAAS,GAAKD,YAAM,CAC1BC,IAAC,QAAQ,IACP,OAAO,EAAE;gBACP,GAAG,EAAE;oBACH,KAAK,EAAE,KAAK;oBACZ,IAAI,EAAE,cAAM,OAAA,MAAM,GAAA;iBACnB;aACF,EACD,QAAQ,EAAE,YAAY,WACtB,CACH,UAVgB,CAUf;QAEJ,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;KAC/C,CAAC,CAAC;IAEH,EAAE,CAAC,yCAAyC,EAAE;QAClC,IAAA,SAAS,GAAKD,YAAM,CAC1BC,IAAC,QAAQ,IACP,OAAO,EAAE;gBACP,GAAG,EAAE;oBACH,KAAK,EAAE,KAAK;oBACZ,IAAI,EAAE,UAAC,QAAQ,IAAK,OAAA,QAAQ,GAAG,eAAe,GAAG,MAAM,GAAA;iBACxD;aACF,EACD,QAAQ,EAAE,YAAY,EACtB,KAAK,EAAE,CAAC,KAAK,CAAC,WACd,CACH,UAXgB,CAWf;QAEJ,MAAM,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;KACxD,CAAC,CAAC;AACL,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@popsure/dirty-swan",
-  "version": "0.33.1",
+  "version": "0.33.2",
   "author": "Vincent Audoire <vincent@getpopsure.com>",
   "license": "MIT",
   "private": false,

package/src/lib/components/input/checkbox/index.tsx

@@ -1,6 +1,7 @@
 import classNames from "classnames";
 import { ReactNode } from "react";
 
+import styles from './styles.module.scss';
 export interface CheckboxWithDescription {
   title: string;
   description?: string;
@@ -67,7 +68,7 @@ export const Checkbox = <ValueType extends string>({
 
   return (
     <div
-      className={classNames(className, 'd-flex gap8', {
+      className={classNames(className, styles.container, 'd-flex gap8', {
         ws10: wide,
         ws6: !wide,
         'fd-row': inlineLayout,

package/src/lib/components/input/checkbox/styles.module.scss

@@ -0,0 +1,3 @@
+.container {
+  max-width: 100%;
+}