@popsure/dirty-swan 0.56.7 → 0.57.1

package/dist/cjs/lib/components/accordion/index.d.ts

@@ -19,6 +19,7 @@ export interface AccordionProps {
     multiple?: boolean;
     onClick?: (item: AccordionItem) => void;
     variant?: 'default' | 'bordered';
+    renderAnswer?: (answer: ReactNode) => ReactNode;
 }
-declare const Accordion: ({ items, classNames, variant, multiple, onClick, }: AccordionProps) => JSX.Element;
+declare const Accordion: ({ items, classNames, variant, multiple, onClick, renderAnswer, }: AccordionProps) => JSX.Element;
 export { Accordion };

package/dist/cjs/lib/components/accordion/index.stories.d.ts

@@ -1,7 +1,7 @@
 import { AccordionProps } from '.';
 declare const story: {
     title: string;
-    component: ({ items, classNames, variant, multiple, onClick, }: AccordionProps) => JSX.Element;
+    component: ({ items, classNames, variant, multiple, onClick, renderAnswer, }: AccordionProps) => JSX.Element;
     argTypes: {
         classNames: {
             description: string;
@@ -15,6 +15,10 @@ declare const story: {
         items: {
             description: string;
         };
+        renderAnswer: {
+            description: string;
+            action: boolean;
+        };
         onClick: {
             description: string;
             action: boolean;

package/dist/esm/components/accordion/index.js

@@ -15,7 +15,7 @@ styleInject(css_248z);
 
 var Accordion = function (_a) {
     var _b;
-    var _c = _a.items, items = _c === void 0 ? [] : _c, _d = _a.classNames, classNames$1 = _d === void 0 ? {} : _d, _e = _a.variant, variant = _e === void 0 ? 'default' : _e, _f = _a.multiple, multiple = _f === void 0 ? false : _f, onClick = _a.onClick;
+    var _c = _a.items, items = _c === void 0 ? [] : _c, _d = _a.classNames, classNames$1 = _d === void 0 ? {} : _d, _e = _a.variant, variant = _e === void 0 ? 'default' : _e, _f = _a.multiple, multiple = _f === void 0 ? false : _f, onClick = _a.onClick, renderAnswer = _a.renderAnswer;
     var _g = useState([]), selectedQuestionId = _g[0], setSelectedQuestionId = _g[1];
     var isDefaultVariant = variant === 'default';
     var handleClick = useCallback(function (questionData) {
@@ -53,7 +53,7 @@ var Accordion = function (_a) {
                                 },
                                 _e[styles === null || styles === void 0 ? void 0 : styles.answerIcon] = !isDefaultVariant && icon,
                                 _e[styles === null || styles === void 0 ? void 0 : styles.answerIconDefault] = isDefaultVariant && icon,
-                                _e)), children: answer }) })] }, id));
+                                _e)), children: renderAnswer ? renderAnswer(answer) : answer }) })] }, id));
         }) }));
 };
 

package/dist/esm/components/accordion/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/lib/components/accordion/index.tsx"],"sourcesContent":["import classnamesUtil from 'classnames';\nimport { ReactNode, useCallback, useState } from 'react';\nimport AnimateHeight from 'react-animate-height';\n\nimport styles from './style.module.scss';\nimport { ChevronDownIcon } from '../icon';\nimport { Card } from '../cards/card';\n\nexport interface AccordionItem {\n  id: string;\n  question: string;\n  icon?: ReactNode;\n  answer: ReactNode;\n}\n\nexport interface AccordionProps {\n  items: AccordionItem[];\n  classNames?: {\n    questionWrapper?: string;\n    buttonWrapper?: string;\n    wrapper?: string;\n    question?: string;\n    answer?: string;\n    icon?: string;\n    markdown?: string;\n  };\n  multiple?: boolean;\n  onClick?: (item: AccordionItem) => void;\n  variant?: 'default' | 'bordered';\n};\n\nconst Accordion = ({\n  items = [],\n  classNames = {},\n  variant = 'default',\n  multiple = false,\n  onClick,\n}: AccordionProps) => {\n  const [selectedQuestionId, setSelectedQuestionId] = useState<(string[])>([]);\n  const isDefaultVariant = variant === 'default';\n\n  const handleClick = useCallback((questionData:  AccordionItem) => {\n    const { id } = questionData;\n    if (selectedQuestionId.includes(id)) {\n      if (!multiple) {\n        setSelectedQuestionId([]);\n        return\n      }\n\n      setSelectedQuestionId((selectedItems) => \n        selectedItems.filter((selectedId) => selectedId !== id)\n      );\n    } else {\n      onClick?.(questionData);\n      setSelectedQuestionId((selectedIds) => [\n        id, ...multiple ? selectedIds : [],\n      ]);\n    }\n  }, [multiple, onClick, selectedQuestionId]);\n\n  return (\n    <div\n      className={\n        classnamesUtil(\n          {\n            'br8': !isDefaultVariant,\n            [styles.wrapperBordered]: !isDefaultVariant,\n          }\n        )\n      }\n    >\n      {items.map((questionData) => {\n        const { question, answer, id, icon } = questionData;\n        const isOpen = selectedQuestionId.includes(id);\n\n        return (\n          <div\n            key={id}\n            className={classnamesUtil(\n              classNames?.questionWrapper,\n              styles.container,\n              { [styles.containerBordered]: !isDefaultVariant }\n            )}\n          >\n            <Card\n              title={question}\n              titleVariant=\"small\"\n              density='compact'\n              icon={icon}\n              classNames={{\n                icon: classnamesUtil(\n                  classNames?.icon,\n                  styles.icon,\n                  'tc-grey-700',\n                ),\n                buttonWrapper: classnamesUtil(\n                  'py8 my8',\n                  classNames?.buttonWrapper,\n                  styles.buttonWrapper, {\n                    [styles.buttonWrapperDefault]: isDefaultVariant,\n                  },\n                ),\n                wrapper: classnamesUtil(\n                  classNames?.wrapper,\n                'bg-transparent br0 py0',\n                  { 'pl0': isDefaultVariant },\n                ),\n                title: classnamesUtil(\n                  classNames?.question,\n                  styles.question,\n                  { [styles.questionOpen]: isOpen }\n                ),\n                ...classNames,\n              }}\n              dropShadow={false}\n              onClick={() => handleClick(questionData)}\n              aria-expanded={isOpen}\n              actionIcon={\n                <ChevronDownIcon\n                  className={classnamesUtil(styles.chevron, {\n                    [styles.chevronOpen]: isOpen\n                  })}\n                  size={20}\n                  noMargin\n                />\n              }\n            />\n\n            <AnimateHeight\n              duration={300}\n              height={isOpen ? 'auto' : 0}\n            >\n              <div \n                className={classnamesUtil(\n                  classNames?.answer,\n                  'tc-grey-600 pr16 pb24', \n                  { \n                    'pl16': !isDefaultVariant,\n                    [styles?.answerIcon]: !isDefaultVariant && icon,\n                    [styles?.answerIconDefault]: isDefaultVariant && icon,\n                  },\n                )}\n              >\n                  {answer}\n              </div>\n            </AnimateHeight>\n          </div>\n        );\n      })}\n    </div>\n  );\n};\n\nexport { Accordion };"],"names":["classNames","_jsx","classnamesUtil","_jsxs"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../../src/lib/components/accordion/index.tsx"],"sourcesContent":["import classnamesUtil from 'classnames';\nimport { ReactNode, useCallback, useState } from 'react';\nimport AnimateHeight from 'react-animate-height';\n\nimport styles from './style.module.scss';\nimport { ChevronDownIcon } from '../icon';\nimport { Card } from '../cards/card';\n\nexport interface AccordionItem {\n  id: string;\n  question: string;\n  icon?: ReactNode;\n  answer: ReactNode;\n}\n\nexport interface AccordionProps {\n  items: AccordionItem[];\n  classNames?: {\n    questionWrapper?: string;\n    buttonWrapper?: string;\n    wrapper?: string;\n    question?: string;\n    answer?: string;\n    icon?: string;\n    markdown?: string;\n  };\n  multiple?: boolean;\n  onClick?: (item: AccordionItem) => void;\n  variant?: 'default' | 'bordered';\n  renderAnswer?: (answer: ReactNode) => ReactNode;\n};\n\nconst Accordion = ({\n  items = [],\n  classNames = {},\n  variant = 'default',\n  multiple = false,\n  onClick,\n  renderAnswer,\n}: AccordionProps) => {\n  const [selectedQuestionId, setSelectedQuestionId] = useState<(string[])>([]);\n  const isDefaultVariant = variant === 'default';\n\n  const handleClick = useCallback((questionData:  AccordionItem) => {\n    const { id } = questionData;\n    if (selectedQuestionId.includes(id)) {\n      if (!multiple) {\n        setSelectedQuestionId([]);\n        return\n      }\n\n      setSelectedQuestionId((selectedItems) => \n        selectedItems.filter((selectedId) => selectedId !== id)\n      );\n    } else {\n      onClick?.(questionData);\n      setSelectedQuestionId((selectedIds) => [\n        id, ...multiple ? selectedIds : [],\n      ]);\n    }\n  }, [multiple, onClick, selectedQuestionId]);\n\n  return (\n    <div\n      className={\n        classnamesUtil(\n          {\n            'br8': !isDefaultVariant,\n            [styles.wrapperBordered]: !isDefaultVariant,\n          }\n        )\n      }\n    >\n      {items.map((questionData) => {\n        const { question, answer, id, icon } = questionData;\n        const isOpen = selectedQuestionId.includes(id);\n\n        return (\n          <div\n            key={id}\n            className={classnamesUtil(\n              classNames?.questionWrapper,\n              styles.container,\n              { [styles.containerBordered]: !isDefaultVariant }\n            )}\n          >\n            <Card\n              title={question}\n              titleVariant=\"small\"\n              density='compact'\n              icon={icon}\n              classNames={{\n                icon: classnamesUtil(\n                  classNames?.icon,\n                  styles.icon,\n                  'tc-grey-700',\n                ),\n                buttonWrapper: classnamesUtil(\n                  'py8 my8',\n                  classNames?.buttonWrapper,\n                  styles.buttonWrapper, {\n                    [styles.buttonWrapperDefault]: isDefaultVariant,\n                  },\n                ),\n                wrapper: classnamesUtil(\n                  classNames?.wrapper,\n                'bg-transparent br0 py0',\n                  { 'pl0': isDefaultVariant },\n                ),\n                title: classnamesUtil(\n                  classNames?.question,\n                  styles.question,\n                  { [styles.questionOpen]: isOpen }\n                ),\n                ...classNames,\n              }}\n              dropShadow={false}\n              onClick={() => handleClick(questionData)}\n              aria-expanded={isOpen}\n              actionIcon={\n                <ChevronDownIcon\n                  className={classnamesUtil(styles.chevron, {\n                    [styles.chevronOpen]: isOpen\n                  })}\n                  size={20}\n                  noMargin\n                />\n              }\n            />\n\n            <AnimateHeight\n              duration={300}\n              height={isOpen ? 'auto' : 0}\n            >\n              <div \n                className={classnamesUtil(\n                  classNames?.answer,\n                  'tc-grey-600 pr16 pb24', \n                  { \n                    'pl16': !isDefaultVariant,\n                    [styles?.answerIcon]: !isDefaultVariant && icon,\n                    [styles?.answerIconDefault]: isDefaultVariant && icon,\n                  },\n                )}\n              >\n                  {renderAnswer ? renderAnswer(answer) : answer}\n              </div>\n            </AnimateHeight>\n          </div>\n        );\n      })}\n    </div>\n  );\n};\n\nexport { Accordion };"],"names":["classNames","_jsx","classnamesUtil","_jsxs"],"mappings":";;;;;;;;;;;;;;;IAgCM,SAAS,GAAG,UAAC,EAOF;;QANf,aAAU,EAAV,KAAK,mBAAG,EAAE,KAAA,EACV,kBAAe,EAAfA,YAAU,mBAAG,EAAE,KAAA,EACf,eAAmB,EAAnB,OAAO,mBAAG,SAAS,KAAA,EACnB,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAChB,OAAO,aAAA,EACP,YAAY,kBAAA;IAEN,IAAA,KAA8C,QAAQ,CAAa,EAAE,CAAC,EAArE,kBAAkB,QAAA,EAAE,qBAAqB,QAA4B,CAAC;IAC7E,IAAM,gBAAgB,GAAG,OAAO,KAAK,SAAS,CAAC;IAE/C,IAAM,WAAW,GAAG,WAAW,CAAC,UAAC,YAA4B;QACnD,IAAA,EAAE,GAAK,YAAY,GAAjB,CAAkB;QAC5B,IAAI,kBAAkB,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE;YACnC,IAAI,CAAC,QAAQ,EAAE;gBACb,qBAAqB,CAAC,EAAE,CAAC,CAAC;gBAC1B,OAAM;aACP;YAED,qBAAqB,CAAC,UAAC,aAAa;gBAClC,OAAA,aAAa,CAAC,MAAM,CAAC,UAAC,UAAU,IAAK,OAAA,UAAU,KAAK,EAAE,GAAA,CAAC;aAAA,CACxD,CAAC;SACH;aAAM;YACL,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,YAAY,CAAC,CAAC;YACxB,qBAAqB,CAAC,UAAC,WAAW,IAAK;gBACrC,EAAE;eAAK,QAAQ,GAAG,WAAW,GAAG,EAAE,UACnC,CAAC,CAAC;SACJ;KACF,EAAE,CAAC,QAAQ,EAAE,OAAO,EAAE,kBAAkB,CAAC,CAAC,CAAC;IAE5C,QACEC,aACE,SAAS,EACPC,UAAc;gBAEV,KAAK,EAAE,CAAC,gBAAgB;;YACxB,GAAC,MAAM,CAAC,eAAe,IAAG,CAAC,gBAAgB;gBAE9C,YAGF,KAAK,CAAC,GAAG,CAAC,UAAC,YAAY;;YACd,IAAA,QAAQ,GAAuB,YAAY,SAAnC,EAAE,MAAM,GAAe,YAAY,OAA3B,EAAE,EAAE,GAAW,YAAY,GAAvB,EAAE,IAAI,GAAK,YAAY,KAAjB,CAAkB;YACpD,IAAM,MAAM,GAAG,kBAAkB,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;YAE/C,QACEC,cAEE,SAAS,EAAED,UAAc,CACvBF,YAAU,aAAVA,YAAU,uBAAVA,YAAU,CAAE,eAAe,EAC3B,MAAM,CAAC,SAAS,YACd,GAAC,MAAM,CAAC,iBAAiB,IAAG,CAAC,gBAAgB,MAChD,aAEDC,IAAC,IAAI,IACH,KAAK,EAAE,QAAQ,EACf,YAAY,EAAC,OAAO,EACpB,OAAO,EAAC,SAAS,EACjB,IAAI,EAAE,IAAI,EACV,UAAU,aACR,IAAI,EAAEC,UAAc,CAClBF,YAAU,aAAVA,YAAU,uBAAVA,YAAU,CAAE,IAAI,EAChB,MAAM,CAAC,IAAI,EACX,aAAa,CACd,EACD,aAAa,EAAEE,UAAc,CAC3B,SAAS,EACTF,YAAU,aAAVA,YAAU,uBAAVA,YAAU,CAAE,aAAa,EACzB,MAAM,CAAC,aAAa;gCAClB,GAAC,MAAM,CAAC,oBAAoB,IAAG,gBAAgB;oCAElD,EACD,OAAO,EAAEE,UAAc,CACrBF,YAAU,aAAVA,YAAU,uBAAVA,YAAU,CAAE,OAAO,EACrB,wBAAwB,EACtB,EAAE,KAAK,EAAE,gBAAgB,EAAE,CAC5B,EACD,KAAK,EAAEE,UAAc,CACnBF,YAAU,aAAVA,YAAU,uBAAVA,YAAU,CAAE,QAAQ,EACpB,MAAM,CAAC,QAAQ,YACb,GAAC,MAAM,CAAC,YAAY,IAAG,MAAM,MAChC,IACEA,YAAU,GAEf,UAAU,EAAE,KAAK,EACjB,OAAO,EAAE,cAAM,OAAA,WAAW,CAAC,YAAY,CAAC,GAAA,mBACzB,MAAM,EACrB,UAAU,EACRC,IAAC,eAAe,IACd,SAAS,EAAEC,UAAc,CAAC,MAAM,CAAC,OAAO;gCACtC,GAAC,MAAM,CAAC,WAAW,IAAG,MAAM;oCAC5B,EACF,IAAI,EAAE,EAAE,EACR,QAAQ,SACR,GAEJ,EAEFD,IAAC,aAAa,IACZ,QAAQ,EAAE,GAAG,EACb,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,CAAC,YAE3BA,aACE,SAAS,EAAEC,UAAc,CACvBF,YAAU,aAAVA,YAAU,uBAAVA,YAAU,CAAE,MAAM,EAClB,uBAAuB;oCAErB,MAAM,EAAE,CAAC,gBAAgB;;gCACzB,GAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,UAAU,IAAG,CAAC,gBAAgB,IAAI,IAAI;gCAC/C,GAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,iBAAiB,IAAG,gBAAgB,IAAI,IAAI;oCAExD,YAEE,YAAY,GAAG,YAAY,CAAC,MAAM,CAAC,GAAG,MAAM,GAC3C,GACQ,KApEX,EAAE,CAqEH,EACN;SACH,CAAC,GACE,EACN;AACJ;;;;"}

package/dist/esm/components/accordion/index.stories.js

@@ -30,6 +30,10 @@ var story = {
         items: {
             description: 'Accordion items to be displayed. Each item should have an id, question, and answer. Optionally, an icon can be added to the item. \n\nThe answer property accepts markdown.',
         },
+        renderAnswer: {
+            description: 'Function that allows you to render the answer in a custom way',
+            action: true,
+        },
         onClick: {
             description: 'Function that runs on click of the Accordion item',
             action: true,

package/dist/esm/components/accordion/index.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.stories.js","sources":["../../../../../src/lib/components/accordion/index.stories.tsx"],"sourcesContent":["import { Accordion, AccordionProps } from '.';\nimport { ArthritisIcon, CpuIcon, WindIcon, ZapIcon } from '../icon';\n\nconst story = {\n  title: 'JSX/Accordion',\n  component: Accordion,\n  argTypes: {\n    classNames: {\n      description: 'Class names for the Accordion component and its children elements',\n    },\n    variant: {\n      description: 'Variant that defines the style of the Accordion',\n    },\n    multiple: {\n      description: 'Allow multiple items to be open at the same time',\n    },\n    items: {\n      description: 'Accordion items to be displayed. Each item should have an id, question, and answer. Optionally, an icon can be added to the item. \\n\\nThe answer property accepts markdown.',\n    },\n    onClick: {\n      description: 'Function that runs on click of the Accordion item',\n      action: true,\n      table: {\n        category: 'Callbacks',\n      },\n    },\n  },\n  args: {\n    items: [\n      {\n        id: '1',\n        question: 'What is the meaning of life?',\n        answer: '42',\n        icon: <CpuIcon size={24} />\n      },\n      {\n        id: '2',\n        question: 'How old is the universe?',\n        answer: '13.8 billion years',\n        icon: <ZapIcon size={24} />,\n      },\n      {\n        id: '3',\n        question: 'What is the capital of France?',\n        answer: 'Paris',\n        icon: <WindIcon size={24} />,\n      },\n      {\n        id: '4',\n        question: 'Who painted the Mona Lisa?',\n        answer: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.',\n        icon: <ArthritisIcon size={24} />,\n      },\n    ],\n    variant: 'default',\n    multiple: false,\n    classNames: {\n      questionWrapper: '',\n      buttonWrapper: '',\n      wrapper: '',\n      icon: '',\n      question: '',\n      answer: '',\n      markdown: ''\n    },\n  }\n};\n \nexport const AccordionStory = ({\n  items,\n  multiple,\n  onClick,\n  variant\n}: AccordionProps) => (\n  <Accordion\n    items={items}\n    multiple={multiple}\n    variant={variant}\n    onClick={onClick}\n  />\n);\n\nAccordionStory.storyName = \"Accordion\";\n \nexport default story;\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;;IAGM,KAAK,GAAG;IACZ,KAAK,EAAE,eAAe;IACtB,SAAS,EAAE,SAAS;IACpB,QAAQ,EAAE;QACR,UAAU,EAAE;YACV,WAAW,EAAE,mEAAmE;SACjF;QACD,OAAO,EAAE;YACP,WAAW,EAAE,iDAAiD;SAC/D;QACD,QAAQ,EAAE;YACR,WAAW,EAAE,kDAAkD;SAChE;QACD,KAAK,EAAE;YACL,WAAW,EAAE,6KAA6K;SAC3L;QACD,OAAO,EAAE;YACP,WAAW,EAAE,mDAAmD;YAChE,MAAM,EAAE,IAAI;YACZ,KAAK,EAAE;gBACL,QAAQ,EAAE,WAAW;aACtB;SACF;KACF;IACD,IAAI,EAAE;QACJ,KAAK,EAAE;YACL;gBACE,EAAE,EAAE,GAAG;gBACP,QAAQ,EAAE,8BAA8B;gBACxC,MAAM,EAAE,IAAI;gBACZ,IAAI,EAAEA,IAAC,OAAO,IAAC,IAAI,EAAE,EAAE,GAAI;aAC5B;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,QAAQ,EAAE,0BAA0B;gBACpC,MAAM,EAAE,oBAAoB;gBAC5B,IAAI,EAAEA,IAAC,OAAO,IAAC,IAAI,EAAE,EAAE,GAAI;aAC5B;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,QAAQ,EAAE,gCAAgC;gBAC1C,MAAM,EAAE,OAAO;gBACf,IAAI,EAAEA,IAAC,QAAQ,IAAC,IAAI,EAAE,EAAE,GAAI;aAC7B;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,QAAQ,EAAE,4BAA4B;gBACtC,MAAM,EAAE,4KAA4K;gBACpL,IAAI,EAAEA,IAAC,aAAa,IAAC,IAAI,EAAE,EAAE,GAAI;aAClC;SACF;QACD,OAAO,EAAE,SAAS;QAClB,QAAQ,EAAE,KAAK;QACf,UAAU,EAAE;YACV,eAAe,EAAE,EAAE;YACnB,aAAa,EAAE,EAAE;YACjB,OAAO,EAAE,EAAE;YACX,IAAI,EAAE,EAAE;YACR,QAAQ,EAAE,EAAE;YACZ,MAAM,EAAE,EAAE;YACV,QAAQ,EAAE,EAAE;SACb;KACF;EACD;IAEW,cAAc,GAAG,UAAC,EAKd;QAJf,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,OAAO,aAAA,EACP,OAAO,aAAA;IACa,QACpBA,IAAC,SAAS,IACR,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,GAChB;AANkB,EAOpB;AAEF,cAAc,CAAC,SAAS,GAAG,WAAW;;;;;"}
+{"version":3,"file":"index.stories.js","sources":["../../../../../src/lib/components/accordion/index.stories.tsx"],"sourcesContent":["import { Accordion, AccordionProps } from '.';\nimport { ArthritisIcon, CpuIcon, WindIcon, ZapIcon } from '../icon';\n\nconst story = {\n  title: 'JSX/Accordion',\n  component: Accordion,\n  argTypes: {\n    classNames: {\n      description: 'Class names for the Accordion component and its children elements',\n    },\n    variant: {\n      description: 'Variant that defines the style of the Accordion',\n    },\n    multiple: {\n      description: 'Allow multiple items to be open at the same time',\n    },\n    items: {\n      description: 'Accordion items to be displayed. Each item should have an id, question, and answer. Optionally, an icon can be added to the item. \\n\\nThe answer property accepts markdown.',\n    },\n    renderAnswer: {\n      description: 'Function that allows you to render the answer in a custom way',\n      action: true,\n    },\n    onClick: {\n      description: 'Function that runs on click of the Accordion item',\n      action: true,\n      table: {\n        category: 'Callbacks',\n      },\n    },\n  },\n  args: {\n    items: [\n      {\n        id: '1',\n        question: 'What is the meaning of life?',\n        answer: '42',\n        icon: <CpuIcon size={24} />\n      },\n      {\n        id: '2',\n        question: 'How old is the universe?',\n        answer: '13.8 billion years',\n        icon: <ZapIcon size={24} />,\n      },\n      {\n        id: '3',\n        question: 'What is the capital of France?',\n        answer: 'Paris',\n        icon: <WindIcon size={24} />,\n      },\n      {\n        id: '4',\n        question: 'Who painted the Mona Lisa?',\n        answer: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.',\n        icon: <ArthritisIcon size={24} />,\n      },\n    ],\n    variant: 'default',\n    multiple: false,\n    classNames: {\n      questionWrapper: '',\n      buttonWrapper: '',\n      wrapper: '',\n      icon: '',\n      question: '',\n      answer: '',\n      markdown: ''\n    },\n  }\n};\n \nexport const AccordionStory = ({\n  items,\n  multiple,\n  onClick,\n  variant\n}: AccordionProps) => (\n  <Accordion\n    items={items}\n    multiple={multiple}\n    variant={variant}\n    onClick={onClick}\n  />\n);\n\nAccordionStory.storyName = \"Accordion\";\n \nexport default story;\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;;IAGM,KAAK,GAAG;IACZ,KAAK,EAAE,eAAe;IACtB,SAAS,EAAE,SAAS;IACpB,QAAQ,EAAE;QACR,UAAU,EAAE;YACV,WAAW,EAAE,mEAAmE;SACjF;QACD,OAAO,EAAE;YACP,WAAW,EAAE,iDAAiD;SAC/D;QACD,QAAQ,EAAE;YACR,WAAW,EAAE,kDAAkD;SAChE;QACD,KAAK,EAAE;YACL,WAAW,EAAE,6KAA6K;SAC3L;QACD,YAAY,EAAE;YACZ,WAAW,EAAE,+DAA+D;YAC5E,MAAM,EAAE,IAAI;SACb;QACD,OAAO,EAAE;YACP,WAAW,EAAE,mDAAmD;YAChE,MAAM,EAAE,IAAI;YACZ,KAAK,EAAE;gBACL,QAAQ,EAAE,WAAW;aACtB;SACF;KACF;IACD,IAAI,EAAE;QACJ,KAAK,EAAE;YACL;gBACE,EAAE,EAAE,GAAG;gBACP,QAAQ,EAAE,8BAA8B;gBACxC,MAAM,EAAE,IAAI;gBACZ,IAAI,EAAEA,IAAC,OAAO,IAAC,IAAI,EAAE,EAAE,GAAI;aAC5B;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,QAAQ,EAAE,0BAA0B;gBACpC,MAAM,EAAE,oBAAoB;gBAC5B,IAAI,EAAEA,IAAC,OAAO,IAAC,IAAI,EAAE,EAAE,GAAI;aAC5B;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,QAAQ,EAAE,gCAAgC;gBAC1C,MAAM,EAAE,OAAO;gBACf,IAAI,EAAEA,IAAC,QAAQ,IAAC,IAAI,EAAE,EAAE,GAAI;aAC7B;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,QAAQ,EAAE,4BAA4B;gBACtC,MAAM,EAAE,4KAA4K;gBACpL,IAAI,EAAEA,IAAC,aAAa,IAAC,IAAI,EAAE,EAAE,GAAI;aAClC;SACF;QACD,OAAO,EAAE,SAAS;QAClB,QAAQ,EAAE,KAAK;QACf,UAAU,EAAE;YACV,eAAe,EAAE,EAAE;YACnB,aAAa,EAAE,EAAE;YACjB,OAAO,EAAE,EAAE;YACX,IAAI,EAAE,EAAE;YACR,QAAQ,EAAE,EAAE;YACZ,MAAM,EAAE,EAAE;YACV,QAAQ,EAAE,EAAE;SACb;KACF;EACD;IAEW,cAAc,GAAG,UAAC,EAKd;QAJf,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,OAAO,aAAA,EACP,OAAO,aAAA;IACa,QACpBA,IAAC,SAAS,IACR,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,GAChB;AANkB,EAOpB;AAEF,cAAc,CAAC,SAAS,GAAG,WAAW;;;;;"}

package/dist/esm/components/table/Table.js

@@ -39,7 +39,7 @@ import '../modal/regularModal/index.js';
 import './components/TableContents/Collapsible.js';
 import '../icon/icons/ChevronLeft.js';
 
-var css_248z = ".Table-module_wrapper__2MMNq {\n  position: relative;\n}\n\n.Table-module_container__3VFLP {\n  overflow-x: auto;\n  overflow-y: hidden;\n  -ms-overflow-style: none;\n  /* IE and Edge */\n  scrollbar-width: none;\n  /* Firefox */\n  -webkit-overflow-scrolling: touch;\n  scroll-snap-type: x mandatory;\n}\n.Table-module_container__3VFLP::-webkit-scrollbar {\n  display: none;\n}\n@media (min-width: 34rem) {\n  .Table-module_container__3VFLP {\n    scroll-snap-type: unset;\n  }\n}\n\n.Table-module_stickyHeader__2uEpP {\n  display: flex;\n  position: sticky;\n  z-index: 9;\n}\n\n@media (max-width: 34rem) {\n  .Table-module_modalContent__1PNgv {\n    min-width: initial;\n  }\n}";
+var css_248z = ".Table-module_wrapper__2MMNq {\n  position: relative;\n}\n\n.Table-module_container__3VFLP {\n  overflow-x: auto;\n  overflow-y: hidden;\n  -ms-overflow-style: none;\n  /* IE and Edge */\n  scrollbar-width: none;\n  /* Firefox */\n  -webkit-overflow-scrolling: touch;\n  scroll-snap-type: x mandatory;\n}\n.Table-module_container__3VFLP::-webkit-scrollbar {\n  display: none;\n}\n@media (min-width: 34rem) {\n  .Table-module_container__3VFLP {\n    scroll-snap-type: unset;\n  }\n}\n\n.Table-module_stickyHeader__2uEpP {\n  display: flex;\n  position: sticky;\n  z-index: 9;\n  top: 0;\n}\n\n@media (max-width: 34rem) {\n  .Table-module_modalContent__1PNgv {\n    min-width: initial;\n  }\n}";
 var styles = {"wrapper":"Table-module_wrapper__2MMNq","container":"Table-module_container__3VFLP","stickyHeader":"Table-module_stickyHeader__2uEpP","modalContent":"Table-module_modalContent__1PNgv"};
 styleInject(css_248z);
 
@@ -83,7 +83,7 @@ var Table = function (_a) {
                                     });
                                 },
                             }
-                            : {}), activeCellProps, { imageComponent: imageComponent, isNavigation: true })) })] })) : (jsx("div", { "aria-hidden": true, className: styles.stickyHeader, style: { top: "".concat(stickyHeaderTopOffset, "px") }, children: jsx("div", { className: styles.container, ref: headerRef, children: jsx(TableSection, { cellReplacements: cellReplacements, className: className, hideColumns: hideColumns, openModal: handleOpenModal, tableCellRows: [(_j = (_h = tableData === null || tableData === void 0 ? void 0 : tableData[0]) === null || _h === void 0 ? void 0 : _h.rows) === null || _j === void 0 ? void 0 : _j[0]], title: title, imageComponent: imageComponent }) }) })), jsx("div", { ref: containerRef, className: classNames(styles.container, 'pb8'), children: jsx(TableContents, { tableData: tableData, title: title, className: className, collapsibleSections: collapsibleSections, hideColumns: hideColumns, hideDetails: hideDetails, isMobile: isMobile, shouldHideDetails: shouldHideDetails, openModal: handleOpenModal, cellReplacements: cellReplacements, imageComponent: imageComponent }) }), (tableData === null || tableData === void 0 ? void 0 : tableData.length) > 1 && hideDetails && (jsx(Card, { "data-testid": "show-hide-details", classNames: {
+                            : {}), activeCellProps, { imageComponent: imageComponent, isNavigation: true })) })] })) : (jsx("div", { "aria-hidden": true, className: styles.stickyHeader, style: { paddingTop: "".concat(stickyHeaderTopOffset, "px") }, children: jsx("div", { className: styles.container, ref: headerRef, children: jsx(TableSection, { cellReplacements: cellReplacements, className: className, hideColumns: hideColumns, openModal: handleOpenModal, tableCellRows: [(_j = (_h = tableData === null || tableData === void 0 ? void 0 : tableData[0]) === null || _h === void 0 ? void 0 : _h.rows) === null || _j === void 0 ? void 0 : _j[0]], title: title, imageComponent: imageComponent }) }) })), jsx("div", { ref: containerRef, className: classNames(styles.container, 'pb8'), children: jsx(TableContents, { tableData: tableData, title: title, className: className, collapsibleSections: collapsibleSections, hideColumns: hideColumns, hideDetails: hideDetails, isMobile: isMobile, shouldHideDetails: shouldHideDetails, openModal: handleOpenModal, cellReplacements: cellReplacements, imageComponent: imageComponent }) }), (tableData === null || tableData === void 0 ? void 0 : tableData.length) > 1 && hideDetails && (jsx(Card, { "data-testid": "show-hide-details", classNames: {
                     buttonWrapper: 'm8 mt32',
                     title: 'd-flex gap8 ai-center jc-center fw-bold',
                     wrapper: 'bg-grey-200',

package/dist/esm/components/table/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","sources":["../../../../../src/lib/components/table/Table.tsx"],"sourcesContent":["import { TableCell } from './components/TableCell/TableCell';\nimport { BottomOrRegularModal } from '../modal';\nimport { ReactNode, useCallback, useRef, useState } from 'react';\nimport { ChevronDownIcon, ChevronUpIcon } from '../icon';\nimport { Card } from '../cards/card';\n\nimport styles from './Table.module.scss';\nimport { useMediaQuery } from '../../hooks/useMediaQuery';\nimport { TableContents } from './components/TableContents/TableContents';\nimport classNames from 'classnames';\nimport { useTableNavigation } from './utils/useTableNavigation/useTableNavigation';\nimport { TableControls } from './components/TableControls/TableControls';\nimport { TableSection } from './components/TableSection/TableSection';\nimport { useScrollSync } from './utils/useScrollSync/useScrollSync';\nimport {\n  CellReplacements,\n  isBaseCell,\n  ModalData,\n  ModalFunction,\n  TableCellData,\n  TableData,\n} from './types';\n\ntype TextOverrides = {\n  showDetails?: string;\n  hideDetails?: string;\n};\n\nexport interface TableProps {\n  cellReplacements?: CellReplacements;\n  className?: string;\n  collapsibleSections?: boolean;\n  hideColumns?: number[];\n  hideDetails?: boolean;\n  imageComponent?: (args: any) => JSX.Element;\n  modalContentRenderer?: (content: ReactNode) => ReactNode;\n  onModalOpen?: ModalFunction;\n  onSelectionChanged?: (index: number) => void;\n  stickyHeaderTopOffset?: number;\n  tableData: TableData;\n  textOverrides?: TextOverrides;\n  title: string;\n}\n\nconst defaultTextOverrides = {\n  showDetails: 'Show details',\n  hideDetails: 'Hide details',\n};\n\nconst Table = ({\n  cellReplacements,\n  className,\n  collapsibleSections,\n  hideColumns = [],\n  hideDetails,\n  imageComponent,\n  modalContentRenderer,\n  onModalOpen,\n  onSelectionChanged,\n  stickyHeaderTopOffset = 0,\n  tableData,\n  textOverrides: definedTextOverrides,\n  title,\n}: TableProps) => {\n  const textOverrides = { ...defaultTextOverrides, ...definedTextOverrides };\n  const isMobile = useMediaQuery('BELOW_MOBILE');\n  const [infoModalData, setInfoModalData] = useState<ModalData | null>(null);\n  const [shouldHideDetails, setShouldHideDetails] = useState(true);\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const headerRef = useRef<HTMLDivElement | null>(null);\n  const columnsLength = tableData[0].rows[0].length;\n\n  useScrollSync(headerRef, containerRef, !isMobile);\n\n  const { activeSection, navigateTable } = useTableNavigation({\n    enabled: isMobile,\n    containerRef,\n    onSelectionChanged,\n  });\n\n  const titleCell = {\n    text: '',\n    ...tableData?.[0]?.rows?.[0]?.[0] || {},\n  };\n  const currentActiveSection = tableData?.[0]?.rows?.[0]?.[activeSection];\n  const currentActiveSectionReplacements =\n    (currentActiveSection.cellId &&\n      cellReplacements?.[currentActiveSection.cellId]) ||\n    {};\n\n  const activeCellProps = {\n    ...currentActiveSection,\n    ...currentActiveSectionReplacements,\n  } as TableCellData;\n\n  const handleOpenModal: ModalFunction = useCallback(({ body, title }) => {\n    onModalOpen?.({ body, title });\n    setInfoModalData({ body, title });\n  }, []);\n\n  return (\n    <div className={classNames(styles.wrapper, 'bg-white')}>\n      {isMobile ? (\n        <>\n          {titleCell?.text && (\n            <TableCell\n              {...titleCell}\n              align='left'\n              isNavigation\n              isTopLeftCell\n              type={undefined}\n            />\n          )}\n\n          <TableControls\n            activeSection={activeSection}\n            columnsLength={columnsLength}\n            navigateTable={navigateTable}\n            stickyHeaderTopOffset={stickyHeaderTopOffset}\n          >\n            <TableCell\n              {...(isBaseCell(currentActiveSection)\n                ? {\n                    openModal: (body: ReactNode) =>\n                      handleOpenModal({\n                        body,\n                        title: currentActiveSection?.text,\n                      }),\n                  }\n                : {})}\n              {...activeCellProps}\n              imageComponent={imageComponent}\n              isNavigation\n            />\n          </TableControls>\n        </>\n      ) : (\n        <div\n          aria-hidden\n          className={styles.stickyHeader}\n          style={{ top: `${stickyHeaderTopOffset}px` }}\n        >\n          <div className={styles.container} ref={headerRef}>\n            <TableSection\n              cellReplacements={cellReplacements}\n              className={className}\n              hideColumns={hideColumns}\n              openModal={handleOpenModal}\n              tableCellRows={[tableData?.[0]?.rows?.[0]]}\n              title={title}\n              imageComponent={imageComponent}\n            />\n          </div>\n        </div>\n      )}\n\n      <div ref={containerRef} className={classNames(styles.container, 'pb8')}>\n        <TableContents\n          tableData={tableData}\n          title={title}\n          className={className}\n          collapsibleSections={collapsibleSections}\n          hideColumns={hideColumns}\n          hideDetails={hideDetails}\n          isMobile={isMobile}\n          shouldHideDetails={shouldHideDetails}\n          openModal={handleOpenModal}\n          cellReplacements={cellReplacements}\n          imageComponent={imageComponent}\n        />\n      </div>\n\n      {tableData?.length > 1 && hideDetails && (\n        <Card\n          data-testid=\"show-hide-details\"\n          classNames={{\n            buttonWrapper: 'm8 mt32',\n            title: 'd-flex gap8 ai-center jc-center fw-bold',\n            wrapper: 'bg-grey-200',\n          }}\n          title={\n            <>\n              {shouldHideDetails\n                ? textOverrides.showDetails\n                : textOverrides.hideDetails}\n              {shouldHideDetails ? (\n                <ChevronDownIcon size={20} />\n              ) : (\n                <ChevronUpIcon size={20} />\n              )}\n            </>\n          }\n          actionIcon={null}\n          dropShadow={false}\n          titleVariant=\"small\"\n          density=\"compact\"\n          onClick={() => setShouldHideDetails((current) => !current)}\n        />\n      )}\n\n      <BottomOrRegularModal\n        isOpen={infoModalData?.body ? true : false}\n        title={infoModalData?.title}\n        onClose={() => setInfoModalData(null)}\n      >\n        <div className={classNames(styles.modalContent, \"pt8 p24 wmn6\")}>\n          {modalContentRenderer\n            ? modalContentRenderer(infoModalData?.body)\n            : infoModalData?.body}\n        </div>\n      </BottomOrRegularModal>\n    </div>\n  );\n};\n\nexport { Table };\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"Table.js","sources":["../../../../../src/lib/components/table/Table.tsx"],"sourcesContent":["import { TableCell } from './components/TableCell/TableCell';\nimport { BottomOrRegularModal } from '../modal';\nimport { ReactNode, useCallback, useRef, useState } from 'react';\nimport { ChevronDownIcon, ChevronUpIcon } from '../icon';\nimport { Card } from '../cards/card';\n\nimport styles from './Table.module.scss';\nimport { useMediaQuery } from '../../hooks/useMediaQuery';\nimport { TableContents } from './components/TableContents/TableContents';\nimport classNames from 'classnames';\nimport { useTableNavigation } from './utils/useTableNavigation/useTableNavigation';\nimport { TableControls } from './components/TableControls/TableControls';\nimport { TableSection } from './components/TableSection/TableSection';\nimport { useScrollSync } from './utils/useScrollSync/useScrollSync';\nimport {\n  CellReplacements,\n  isBaseCell,\n  ModalData,\n  ModalFunction,\n  TableCellData,\n  TableData,\n} from './types';\n\ntype TextOverrides = {\n  showDetails?: string;\n  hideDetails?: string;\n};\n\nexport interface TableProps {\n  cellReplacements?: CellReplacements;\n  className?: string;\n  collapsibleSections?: boolean;\n  hideColumns?: number[];\n  hideDetails?: boolean;\n  imageComponent?: (args: any) => JSX.Element;\n  modalContentRenderer?: (content: ReactNode) => ReactNode;\n  onModalOpen?: ModalFunction;\n  onSelectionChanged?: (index: number) => void;\n  stickyHeaderTopOffset?: number;\n  tableData: TableData;\n  textOverrides?: TextOverrides;\n  title: string;\n}\n\nconst defaultTextOverrides = {\n  showDetails: 'Show details',\n  hideDetails: 'Hide details',\n};\n\nconst Table = ({\n  cellReplacements,\n  className,\n  collapsibleSections,\n  hideColumns = [],\n  hideDetails,\n  imageComponent,\n  modalContentRenderer,\n  onModalOpen,\n  onSelectionChanged,\n  stickyHeaderTopOffset = 0,\n  tableData,\n  textOverrides: definedTextOverrides,\n  title,\n}: TableProps) => {\n  const textOverrides = { ...defaultTextOverrides, ...definedTextOverrides };\n  const isMobile = useMediaQuery('BELOW_MOBILE');\n  const [infoModalData, setInfoModalData] = useState<ModalData | null>(null);\n  const [shouldHideDetails, setShouldHideDetails] = useState(true);\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const headerRef = useRef<HTMLDivElement | null>(null);\n  const columnsLength = tableData[0].rows[0].length;\n\n  useScrollSync(headerRef, containerRef, !isMobile);\n\n  const { activeSection, navigateTable } = useTableNavigation({\n    enabled: isMobile,\n    containerRef,\n    onSelectionChanged,\n  });\n\n  const titleCell = {\n    text: '',\n    ...tableData?.[0]?.rows?.[0]?.[0] || {},\n  };\n  const currentActiveSection = tableData?.[0]?.rows?.[0]?.[activeSection];\n  const currentActiveSectionReplacements =\n    (currentActiveSection.cellId &&\n      cellReplacements?.[currentActiveSection.cellId]) ||\n    {};\n\n  const activeCellProps = {\n    ...currentActiveSection,\n    ...currentActiveSectionReplacements,\n  } as TableCellData;\n\n  const handleOpenModal: ModalFunction = useCallback(({ body, title }) => {\n    onModalOpen?.({ body, title });\n    setInfoModalData({ body, title });\n  }, []);\n\n  return (\n    <div className={classNames(styles.wrapper, 'bg-white')}>\n      {isMobile ? (\n        <>\n          {titleCell?.text && (\n            <TableCell\n              {...titleCell}\n              align='left'\n              isNavigation\n              isTopLeftCell\n              type={undefined}\n            />\n          )}\n\n          <TableControls\n            activeSection={activeSection}\n            columnsLength={columnsLength}\n            navigateTable={navigateTable}\n            stickyHeaderTopOffset={stickyHeaderTopOffset}\n          >\n            <TableCell\n              {...(isBaseCell(currentActiveSection)\n                ? {\n                    openModal: (body: ReactNode) =>\n                      handleOpenModal({\n                        body,\n                        title: currentActiveSection?.text,\n                      }),\n                  }\n                : {})}\n              {...activeCellProps}\n              imageComponent={imageComponent}\n              isNavigation\n            />\n          </TableControls>\n        </>\n      ) : (\n        <div\n          aria-hidden\n          className={styles.stickyHeader}\n          style={{ paddingTop: `${stickyHeaderTopOffset}px` }}\n        >\n          <div className={styles.container} ref={headerRef}>\n            <TableSection\n              cellReplacements={cellReplacements}\n              className={className}\n              hideColumns={hideColumns}\n              openModal={handleOpenModal}\n              tableCellRows={[tableData?.[0]?.rows?.[0]]}\n              title={title}\n              imageComponent={imageComponent}\n            />\n          </div>\n        </div>\n      )}\n\n      <div ref={containerRef} className={classNames(styles.container, 'pb8')}>\n        <TableContents\n          tableData={tableData}\n          title={title}\n          className={className}\n          collapsibleSections={collapsibleSections}\n          hideColumns={hideColumns}\n          hideDetails={hideDetails}\n          isMobile={isMobile}\n          shouldHideDetails={shouldHideDetails}\n          openModal={handleOpenModal}\n          cellReplacements={cellReplacements}\n          imageComponent={imageComponent}\n        />\n      </div>\n\n      {tableData?.length > 1 && hideDetails && (\n        <Card\n          data-testid=\"show-hide-details\"\n          classNames={{\n            buttonWrapper: 'm8 mt32',\n            title: 'd-flex gap8 ai-center jc-center fw-bold',\n            wrapper: 'bg-grey-200',\n          }}\n          title={\n            <>\n              {shouldHideDetails\n                ? textOverrides.showDetails\n                : textOverrides.hideDetails}\n              {shouldHideDetails ? (\n                <ChevronDownIcon size={20} />\n              ) : (\n                <ChevronUpIcon size={20} />\n              )}\n            </>\n          }\n          actionIcon={null}\n          dropShadow={false}\n          titleVariant=\"small\"\n          density=\"compact\"\n          onClick={() => setShouldHideDetails((current) => !current)}\n        />\n      )}\n\n      <BottomOrRegularModal\n        isOpen={infoModalData?.body ? true : false}\n        title={infoModalData?.title}\n        onClose={() => setInfoModalData(null)}\n      >\n        <div className={classNames(styles.modalContent, \"pt8 p24 wmn6\")}>\n          {modalContentRenderer\n            ? modalContentRenderer(infoModalData?.body)\n            : infoModalData?.body}\n        </div>\n      </BottomOrRegularModal>\n    </div>\n  );\n};\n\nexport { Table };\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/esm/components/table/components/TableControls/TableControls.js

@@ -8,13 +8,13 @@ import 'react';
 import '../../../icon/IconWrapper/IconWrapper.js';
 import '../../../../tslib.es6-a39f91fc.js';
 
-var css_248z = ".TableControls-module_stickyHeader__1f6Ta {\n  display: flex;\n  position: sticky;\n  left: 0;\n  right: 0;\n  min-height: 72px;\n  z-index: 9;\n}\n\n.TableControls-module_controlButton__2kQiG {\n  border-radius: 50% !important;\n  width: 32px;\n  height: 32px;\n  padding: 0;\n  min-width: 32px;\n}";
+var css_248z = ".TableControls-module_stickyHeader__1f6Ta {\n  display: flex;\n  position: sticky;\n  left: 0;\n  right: 0;\n  min-height: 72px;\n  z-index: 9;\n  top: 0;\n}\n\n.TableControls-module_controlButton__2kQiG {\n  border-radius: 50% !important;\n  width: 32px;\n  height: 32px;\n  padding: 0;\n  min-width: 32px;\n}";
 var styles = {"stickyHeader":"TableControls-module_stickyHeader__1f6Ta","controlButton":"TableControls-module_controlButton__2kQiG"};
 styleInject(css_248z);
 
 var TableControls = function (_a) {
     var activeSection = _a.activeSection, children = _a.children, columnsLength = _a.columnsLength, stickyHeaderTopOffset = _a.stickyHeaderTopOffset, navigateTable = _a.navigateTable;
-    return (jsxs("div", { "aria-hidden": true, className: classNames('d-flex ai-center jc-between bg-white px8', styles.stickyHeader), style: { top: "".concat(stickyHeaderTopOffset, "px") }, children: [jsx(Button, { className: styles.controlButton, disabled: activeSection <= 1, hideLabel: true, leftIcon: jsx(ChevronLeftIcon, {}), onClick: function () { return navigateTable(); }, type: "button", variant: "filledGray", "data-testid": "previous-section-button", children: "Previous section" }), children, jsx(Button, { className: styles.controlButton, disabled: activeSection >= columnsLength - 1, hideLabel: true, leftIcon: jsx(ChevronRightIcon, {}), onClick: function () { return navigateTable(true); }, type: "button", variant: "filledGray", "data-testid": "next-section-button", children: "Next section" })] }));
+    return (jsxs("div", { "aria-hidden": true, className: classNames('d-flex ai-center jc-between bg-white px8', styles.stickyHeader), style: { paddingTop: "".concat(stickyHeaderTopOffset, "px") }, children: [jsx(Button, { className: styles.controlButton, disabled: activeSection <= 1, hideLabel: true, leftIcon: jsx(ChevronLeftIcon, {}), onClick: function () { return navigateTable(); }, type: "button", variant: "filledGray", "data-testid": "previous-section-button", children: "Previous section" }), children, jsx(Button, { className: styles.controlButton, disabled: activeSection >= columnsLength - 1, hideLabel: true, leftIcon: jsx(ChevronRightIcon, {}), onClick: function () { return navigateTable(true); }, type: "button", variant: "filledGray", "data-testid": "next-section-button", children: "Next section" })] }));
 };
 
 export { TableControls };

package/dist/esm/components/table/components/TableControls/TableControls.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableControls.js","sources":["../../../../../../../src/lib/components/table/components/TableControls/TableControls.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport { ChevronLeftIcon, ChevronRightIcon } from '../../../icon';\nimport styles from './TableControls.module.scss';\nimport { Button } from '../../../button';\nimport classNames from 'classnames';\n\nexport interface TableControlsProps {\n  activeSection: number;\n  children: ReactNode;\n  columnsLength: number;\n  stickyHeaderTopOffset: number;\n  navigateTable: (next?: boolean) => void;\n}\n\nconst TableControls = ({\n  activeSection,\n  children,\n  columnsLength,\n  stickyHeaderTopOffset,\n  navigateTable,\n}: TableControlsProps) => {\n  return (\n    <div\n      aria-hidden\n      className={classNames(\n        'd-flex ai-center jc-between bg-white px8',\n        styles.stickyHeader\n      )}\n      style={{ top: `${stickyHeaderTopOffset}px` }}\n    >\n      <Button\n        className={styles.controlButton}\n        disabled={activeSection <= 1}\n        hideLabel\n        leftIcon={<ChevronLeftIcon />}\n        onClick={() => navigateTable()}\n        type=\"button\"\n        variant=\"filledGray\"\n        data-testid=\"previous-section-button\"\n      >\n        Previous section\n      </Button>\n\n      {children}\n\n      <Button\n        className={styles.controlButton}\n        disabled={activeSection >= columnsLength - 1}\n        hideLabel\n        leftIcon={<ChevronRightIcon />}\n        onClick={() => navigateTable(true)}\n        type=\"button\"\n        variant=\"filledGray\"\n        data-testid=\"next-section-button\"\n      >\n        Next section\n      </Button>\n    </div>\n  );\n};\n\nexport { TableControls };\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;IAcM,aAAa,GAAG,UAAC,EAMF;QALnB,aAAa,mBAAA,EACb,QAAQ,cAAA,EACR,aAAa,mBAAA,EACb,qBAAqB,2BAAA,EACrB,aAAa,mBAAA;IAEb,QACEA,mCAEE,SAAS,EAAE,UAAU,CACnB,0CAA0C,EAC1C,MAAM,CAAC,YAAY,CACpB,EACD,KAAK,EAAE,EAAE,GAAG,EAAE,UAAG,qBAAqB,OAAI,EAAE,aAE5CC,IAAC,MAAM,IACL,SAAS,EAAE,MAAM,CAAC,aAAa,EAC/B,QAAQ,EAAE,aAAa,IAAI,CAAC,EAC5B,SAAS,QACT,QAAQ,EAAEA,IAAC,eAAe,KAAG,EAC7B,OAAO,EAAE,cAAM,OAAA,aAAa,EAAE,GAAA,EAC9B,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,YAAY,iBACR,yBAAyB,iCAG9B,EAER,QAAQ,EAETA,IAAC,MAAM,IACL,SAAS,EAAE,MAAM,CAAC,aAAa,EAC/B,QAAQ,EAAE,aAAa,IAAI,aAAa,GAAG,CAAC,EAC5C,SAAS,QACT,QAAQ,EAAEA,IAAC,gBAAgB,KAAG,EAC9B,OAAO,EAAE,cAAM,OAAA,aAAa,CAAC,IAAI,CAAC,GAAA,EAClC,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,YAAY,iBACR,qBAAqB,6BAG1B,IACL,EACN;AACJ;;;;"}
+{"version":3,"file":"TableControls.js","sources":["../../../../../../../src/lib/components/table/components/TableControls/TableControls.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport { ChevronLeftIcon, ChevronRightIcon } from '../../../icon';\nimport styles from './TableControls.module.scss';\nimport { Button } from '../../../button';\nimport classNames from 'classnames';\n\nexport interface TableControlsProps {\n  activeSection: number;\n  children: ReactNode;\n  columnsLength: number;\n  stickyHeaderTopOffset: number;\n  navigateTable: (next?: boolean) => void;\n}\n\nconst TableControls = ({\n  activeSection,\n  children,\n  columnsLength,\n  stickyHeaderTopOffset,\n  navigateTable,\n}: TableControlsProps) => {\n  return (\n    <div\n      aria-hidden\n      className={classNames(\n        'd-flex ai-center jc-between bg-white px8',\n        styles.stickyHeader\n      )}\n      style={{ paddingTop: `${stickyHeaderTopOffset}px` }}\n    >\n      <Button\n        className={styles.controlButton}\n        disabled={activeSection <= 1}\n        hideLabel\n        leftIcon={<ChevronLeftIcon />}\n        onClick={() => navigateTable()}\n        type=\"button\"\n        variant=\"filledGray\"\n        data-testid=\"previous-section-button\"\n      >\n        Previous section\n      </Button>\n\n      {children}\n\n      <Button\n        className={styles.controlButton}\n        disabled={activeSection >= columnsLength - 1}\n        hideLabel\n        leftIcon={<ChevronRightIcon />}\n        onClick={() => navigateTable(true)}\n        type=\"button\"\n        variant=\"filledGray\"\n        data-testid=\"next-section-button\"\n      >\n        Next section\n      </Button>\n    </div>\n  );\n};\n\nexport { TableControls };\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;IAcM,aAAa,GAAG,UAAC,EAMF;QALnB,aAAa,mBAAA,EACb,QAAQ,cAAA,EACR,aAAa,mBAAA,EACb,qBAAqB,2BAAA,EACrB,aAAa,mBAAA;IAEb,QACEA,mCAEE,SAAS,EAAE,UAAU,CACnB,0CAA0C,EAC1C,MAAM,CAAC,YAAY,CACpB,EACD,KAAK,EAAE,EAAE,UAAU,EAAE,UAAG,qBAAqB,OAAI,EAAE,aAEnDC,IAAC,MAAM,IACL,SAAS,EAAE,MAAM,CAAC,aAAa,EAC/B,QAAQ,EAAE,aAAa,IAAI,CAAC,EAC5B,SAAS,QACT,QAAQ,EAAEA,IAAC,eAAe,KAAG,EAC7B,OAAO,EAAE,cAAM,OAAA,aAAa,EAAE,GAAA,EAC9B,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,YAAY,iBACR,yBAAyB,iCAG9B,EAER,QAAQ,EAETA,IAAC,MAAM,IACL,SAAS,EAAE,MAAM,CAAC,aAAa,EAC/B,QAAQ,EAAE,aAAa,IAAI,aAAa,GAAG,CAAC,EAC5C,SAAS,QACT,QAAQ,EAAEA,IAAC,gBAAgB,KAAG,EAC9B,OAAO,EAAE,cAAM,OAAA,aAAa,CAAC,IAAI,CAAC,GAAA,EAClC,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,YAAY,iBACR,qBAAqB,6BAG1B,IACL,EACN;AACJ;;;;"}

package/dist/esm/lib/components/accordion/index.d.ts

@@ -19,6 +19,7 @@ export interface AccordionProps {
     multiple?: boolean;
     onClick?: (item: AccordionItem) => void;
     variant?: 'default' | 'bordered';
+    renderAnswer?: (answer: ReactNode) => ReactNode;
 }
-declare const Accordion: ({ items, classNames, variant, multiple, onClick, }: AccordionProps) => JSX.Element;
+declare const Accordion: ({ items, classNames, variant, multiple, onClick, renderAnswer, }: AccordionProps) => JSX.Element;
 export { Accordion };

package/dist/esm/lib/components/accordion/index.stories.d.ts

@@ -1,7 +1,7 @@
 import { AccordionProps } from '.';
 declare const story: {
     title: string;
-    component: ({ items, classNames, variant, multiple, onClick, }: AccordionProps) => JSX.Element;
+    component: ({ items, classNames, variant, multiple, onClick, renderAnswer, }: AccordionProps) => JSX.Element;
     argTypes: {
         classNames: {
             description: string;
@@ -15,6 +15,10 @@ declare const story: {
         items: {
             description: string;
         };
+        renderAnswer: {
+            description: string;
+            action: boolean;
+        };
         onClick: {
             description: string;
             action: boolean;

package/package.json

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

package/src/lib/components/accordion/index.stories.tsx

@@ -17,6 +17,10 @@ const story = {
     items: {
       description: 'Accordion items to be displayed. Each item should have an id, question, and answer. Optionally, an icon can be added to the item. \n\nThe answer property accepts markdown.',
     },
+    renderAnswer: {
+      description: 'Function that allows you to render the answer in a custom way',
+      action: true,
+    },
     onClick: {
       description: 'Function that runs on click of the Accordion item',
       action: true,

package/src/lib/components/accordion/index.tsx

@@ -27,6 +27,7 @@ export interface AccordionProps {
   multiple?: boolean;
   onClick?: (item: AccordionItem) => void;
   variant?: 'default' | 'bordered';
+  renderAnswer?: (answer: ReactNode) => ReactNode;
 };
 
 const Accordion = ({
@@ -35,6 +36,7 @@ const Accordion = ({
   variant = 'default',
   multiple = false,
   onClick,
+  renderAnswer,
 }: AccordionProps) => {
   const [selectedQuestionId, setSelectedQuestionId] = useState<(string[])>([]);
   const isDefaultVariant = variant === 'default';
@@ -141,7 +143,7 @@ const Accordion = ({
                   },
                 )}
               >
-                  {answer}
+                  {renderAnswer ? renderAnswer(answer) : answer}
               </div>
             </AnimateHeight>
           </div>

package/src/lib/components/table/Table.module.scss

@@ -26,6 +26,7 @@
   display: flex;
   position: sticky;
   z-index: 9;
+  top: 0;
 }
 
 .modalContent {

package/src/lib/components/table/Table.tsx

@@ -138,7 +138,7 @@ const Table = ({
         <div
           aria-hidden
           className={styles.stickyHeader}
-          style={{ top: `${stickyHeaderTopOffset}px` }}
+          style={{ paddingTop: `${stickyHeaderTopOffset}px` }}
         >
           <div className={styles.container} ref={headerRef}>
             <TableSection

package/src/lib/components/table/components/TableControls/TableControls.module.scss

@@ -6,6 +6,7 @@
   right: 0;
   min-height: 72px;
   z-index: 9;
+  top: 0;
 }
 
 .controlButton {

package/src/lib/components/table/components/TableControls/TableControls.tsx

@@ -26,7 +26,7 @@ const TableControls = ({
         'd-flex ai-center jc-between bg-white px8',
         styles.stickyHeader
       )}
-      style={{ top: `${stickyHeaderTopOffset}px` }}
+      style={{ paddingTop: `${stickyHeaderTopOffset}px` }}
     >
       <Button
         className={styles.controlButton}