@popsure/dirty-swan 0.56.7 → 0.57.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index.js +2 -2
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/lib/components/accordion/index.d.ts +2 -1
- package/dist/cjs/lib/components/accordion/index.stories.d.ts +5 -1
- package/dist/esm/components/accordion/index.js +2 -2
- package/dist/esm/components/accordion/index.js.map +1 -1
- package/dist/esm/components/accordion/index.stories.js +4 -0
- package/dist/esm/components/accordion/index.stories.js.map +1 -1
- package/dist/esm/lib/components/accordion/index.d.ts +2 -1
- package/dist/esm/lib/components/accordion/index.stories.d.ts +5 -1
- package/package.json +1 -1
- package/src/lib/components/accordion/index.stories.tsx +4 -0
- package/src/lib/components/accordion/index.tsx +3 -1
|
@@ -19,6 +19,7 @@ export interface AccordionProps {
|
|
|
19
19
|
multiple?: boolean;
|
|
20
20
|
onClick?: (item: AccordionItem) => void;
|
|
21
21
|
variant?: 'default' | 'bordered';
|
|
22
|
+
renderAnswer?: (answer: ReactNode) => ReactNode;
|
|
22
23
|
}
|
|
23
|
-
declare const Accordion: ({ items, classNames, variant, multiple, onClick, }: AccordionProps) => JSX.Element;
|
|
24
|
+
declare const Accordion: ({ items, classNames, variant, multiple, onClick, renderAnswer, }: AccordionProps) => JSX.Element;
|
|
24
25
|
export { Accordion };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { AccordionProps } from '.';
|
|
2
2
|
declare const story: {
|
|
3
3
|
title: string;
|
|
4
|
-
component: ({ items, classNames, variant, multiple, onClick, }: AccordionProps) => JSX.Element;
|
|
4
|
+
component: ({ items, classNames, variant, multiple, onClick, renderAnswer, }: AccordionProps) => JSX.Element;
|
|
5
5
|
argTypes: {
|
|
6
6
|
classNames: {
|
|
7
7
|
description: string;
|
|
@@ -15,6 +15,10 @@ declare const story: {
|
|
|
15
15
|
items: {
|
|
16
16
|
description: string;
|
|
17
17
|
};
|
|
18
|
+
renderAnswer: {
|
|
19
|
+
description: string;
|
|
20
|
+
action: boolean;
|
|
21
|
+
};
|
|
18
22
|
onClick: {
|
|
19
23
|
description: string;
|
|
20
24
|
action: boolean;
|
|
@@ -15,7 +15,7 @@ styleInject(css_248z);
|
|
|
15
15
|
|
|
16
16
|
var Accordion = function (_a) {
|
|
17
17
|
var _b;
|
|
18
|
-
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;
|
|
18
|
+
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;
|
|
19
19
|
var _g = useState([]), selectedQuestionId = _g[0], setSelectedQuestionId = _g[1];
|
|
20
20
|
var isDefaultVariant = variant === 'default';
|
|
21
21
|
var handleClick = useCallback(function (questionData) {
|
|
@@ -53,7 +53,7 @@ var Accordion = function (_a) {
|
|
|
53
53
|
},
|
|
54
54
|
_e[styles === null || styles === void 0 ? void 0 : styles.answerIcon] = !isDefaultVariant && icon,
|
|
55
55
|
_e[styles === null || styles === void 0 ? void 0 : styles.answerIconDefault] = isDefaultVariant && icon,
|
|
56
|
-
_e)), children: answer }) })] }, id));
|
|
56
|
+
_e)), children: renderAnswer ? renderAnswer(answer) : answer }) })] }, id));
|
|
57
57
|
}) }));
|
|
58
58
|
};
|
|
59
59
|
|
|
@@ -1 +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":";;;;;;;;;;;;;;;
|
|
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 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":"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"}
|
|
@@ -30,6 +30,10 @@ var story = {
|
|
|
30
30
|
items: {
|
|
31
31
|
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.',
|
|
32
32
|
},
|
|
33
|
+
renderAnswer: {
|
|
34
|
+
description: 'Function that allows you to render the answer in a custom way',
|
|
35
|
+
action: true,
|
|
36
|
+
},
|
|
33
37
|
onClick: {
|
|
34
38
|
description: 'Function that runs on click of the Accordion item',
|
|
35
39
|
action: true,
|
|
@@ -1 +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;;;;;"}
|
|
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 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;;;;;"}
|
|
@@ -19,6 +19,7 @@ export interface AccordionProps {
|
|
|
19
19
|
multiple?: boolean;
|
|
20
20
|
onClick?: (item: AccordionItem) => void;
|
|
21
21
|
variant?: 'default' | 'bordered';
|
|
22
|
+
renderAnswer?: (answer: ReactNode) => ReactNode;
|
|
22
23
|
}
|
|
23
|
-
declare const Accordion: ({ items, classNames, variant, multiple, onClick, }: AccordionProps) => JSX.Element;
|
|
24
|
+
declare const Accordion: ({ items, classNames, variant, multiple, onClick, renderAnswer, }: AccordionProps) => JSX.Element;
|
|
24
25
|
export { Accordion };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { AccordionProps } from '.';
|
|
2
2
|
declare const story: {
|
|
3
3
|
title: string;
|
|
4
|
-
component: ({ items, classNames, variant, multiple, onClick, }: AccordionProps) => JSX.Element;
|
|
4
|
+
component: ({ items, classNames, variant, multiple, onClick, renderAnswer, }: AccordionProps) => JSX.Element;
|
|
5
5
|
argTypes: {
|
|
6
6
|
classNames: {
|
|
7
7
|
description: string;
|
|
@@ -15,6 +15,10 @@ declare const story: {
|
|
|
15
15
|
items: {
|
|
16
16
|
description: string;
|
|
17
17
|
};
|
|
18
|
+
renderAnswer: {
|
|
19
|
+
description: string;
|
|
20
|
+
action: boolean;
|
|
21
|
+
};
|
|
18
22
|
onClick: {
|
|
19
23
|
description: string;
|
|
20
24
|
action: boolean;
|
package/package.json
CHANGED
|
@@ -17,6 +17,10 @@ const story = {
|
|
|
17
17
|
items: {
|
|
18
18
|
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.',
|
|
19
19
|
},
|
|
20
|
+
renderAnswer: {
|
|
21
|
+
description: 'Function that allows you to render the answer in a custom way',
|
|
22
|
+
action: true,
|
|
23
|
+
},
|
|
20
24
|
onClick: {
|
|
21
25
|
description: 'Function that runs on click of the Accordion item',
|
|
22
26
|
action: true,
|
|
@@ -27,6 +27,7 @@ export interface AccordionProps {
|
|
|
27
27
|
multiple?: boolean;
|
|
28
28
|
onClick?: (item: AccordionItem) => void;
|
|
29
29
|
variant?: 'default' | 'bordered';
|
|
30
|
+
renderAnswer?: (answer: ReactNode) => ReactNode;
|
|
30
31
|
};
|
|
31
32
|
|
|
32
33
|
const Accordion = ({
|
|
@@ -35,6 +36,7 @@ const Accordion = ({
|
|
|
35
36
|
variant = 'default',
|
|
36
37
|
multiple = false,
|
|
37
38
|
onClick,
|
|
39
|
+
renderAnswer,
|
|
38
40
|
}: AccordionProps) => {
|
|
39
41
|
const [selectedQuestionId, setSelectedQuestionId] = useState<(string[])>([]);
|
|
40
42
|
const isDefaultVariant = variant === 'default';
|
|
@@ -141,7 +143,7 @@ const Accordion = ({
|
|
|
141
143
|
},
|
|
142
144
|
)}
|
|
143
145
|
>
|
|
144
|
-
{answer}
|
|
146
|
+
{renderAnswer ? renderAnswer(answer) : answer}
|
|
145
147
|
</div>
|
|
146
148
|
</AnimateHeight>
|
|
147
149
|
</div>
|