acinguiux-ds-react-framework 0.0.1

package/CHANGELOG.md

@@ -0,0 +1,8 @@
+# acinguiux-ds-react-framework
+
+## 0.0.1
+
+### Patch Changes
+
+- small Table fixes
+

package/build/esm/components/Accordion/Accordion.consts.d.ts

@@ -0,0 +1,20 @@
+import { FC } from 'react';
+import { IIconProps } from '../Icon/Icon.types';
+import { AccordionIconSetType, AccordionSize } from './Accordion.types';
+type AccordionConstsType = {
+    [size in AccordionSize]: {
+        minHeight: number;
+        bodyPadding: string;
+        iconSize: string;
+    };
+};
+export declare const accordionConsts: AccordionConstsType;
+type AccordionIconType = {
+    [iconSet in AccordionIconSetType]: {
+        active: FC<IIconProps>;
+        inactive: FC<IIconProps>;
+    };
+};
+export declare const AccordionIcon: AccordionIconType;
+export {};
+//# sourceMappingURL=Accordion.consts.d.ts.map

package/build/esm/components/Accordion/Accordion.consts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.consts.d.ts","sourceRoot":"","sources":["../../../../src/components/Accordion/Accordion.consts.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAK3B,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAAE,oBAAoB,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAExE,KAAK,mBAAmB,GAAG;KACxB,IAAI,IAAI,aAAa,GAAG;QACvB,SAAS,EAAE,MAAM,CAAC;QAClB,WAAW,EAAE,MAAM,CAAC;QACpB,QAAQ,EAAE,MAAM,CAAC;KAClB;CACF,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,mBAgB7B,CAAC;AAEF,KAAK,iBAAiB,GAAG;KACtB,OAAO,IAAI,oBAAoB,GAAG;QACjC,MAAM,EAAE,EAAE,CAAC,UAAU,CAAC,CAAC;QACvB,QAAQ,EAAE,EAAE,CAAC,UAAU,CAAC,CAAC;KAC1B;CACF,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,iBAS3B,CAAC"}

package/build/esm/components/Accordion/Accordion.consts.js

@@ -0,0 +1,30 @@
+import { Sizes } from 'acinguiux-ds-react-base';
+import { Add, ChevronSmallDown, ChevronSmallUp, Minus } from '../Icon/components';
+export const accordionConsts = {
+    [Sizes.Small]: {
+        minHeight: 40,
+        bodyPadding: '0 20px 20px',
+        iconSize: '20px',
+    },
+    [Sizes.Medium]: {
+        minHeight: 56,
+        bodyPadding: '0 20px 20px',
+        iconSize: '20px',
+    },
+    [Sizes.Large]: {
+        minHeight: 72,
+        bodyPadding: '0 24px 24px',
+        iconSize: '24px',
+    },
+};
+export const AccordionIcon = {
+    chevron: {
+        active: ChevronSmallUp,
+        inactive: ChevronSmallDown,
+    },
+    plus: {
+        active: Minus,
+        inactive: Add,
+    },
+};
+//# sourceMappingURL=Accordion.consts.js.map

package/build/esm/components/Accordion/Accordion.consts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.consts.js","sourceRoot":"","sources":["../../../../src/components/Accordion/Accordion.consts.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAEhD,OAAO,EAAE,GAAG,EAAE,gBAAgB,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAYlF,MAAM,CAAC,MAAM,eAAe,GAAwB;IAClD,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE;QACb,SAAS,EAAE,EAAE;QACb,WAAW,EAAE,aAAa;QAC1B,QAAQ,EAAE,MAAM;KACjB;IACD,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE;QACd,SAAS,EAAE,EAAE;QACb,WAAW,EAAE,aAAa;QAC1B,QAAQ,EAAE,MAAM;KACjB;IACD,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE;QACb,SAAS,EAAE,EAAE;QACb,WAAW,EAAE,aAAa;QAC1B,QAAQ,EAAE,MAAM;KACjB;CACF,CAAC;AASF,MAAM,CAAC,MAAM,aAAa,GAAsB;IAC9C,OAAO,EAAE;QACP,MAAM,EAAE,cAAc;QACtB,QAAQ,EAAE,gBAAgB;KAC3B;IACD,IAAI,EAAE;QACJ,MAAM,EAAE,KAAK;QACb,QAAQ,EAAE,GAAG;KACd;CACF,CAAC","sourcesContent":["import { FC } from 'react';\n\nimport { Sizes } from 'acinguiux-ds-react-base';\n\nimport { Add, ChevronSmallDown, ChevronSmallUp, Minus } from '../Icon/components';\nimport { IIconProps } from '../Icon/Icon.types';\nimport { AccordionIconSetType, AccordionSize } from './Accordion.types';\n\ntype AccordionConstsType = {\n  [size in AccordionSize]: {\n    minHeight: number;\n    bodyPadding: string;\n    iconSize: string;\n  };\n};\n\nexport const accordionConsts: AccordionConstsType = {\n  [Sizes.Small]: {\n    minHeight: 40,\n    bodyPadding: '0 20px 20px',\n    iconSize: '20px',\n  },\n  [Sizes.Medium]: {\n    minHeight: 56,\n    bodyPadding: '0 20px 20px',\n    iconSize: '20px',\n  },\n  [Sizes.Large]: {\n    minHeight: 72,\n    bodyPadding: '0 24px 24px',\n    iconSize: '24px',\n  },\n};\n\ntype AccordionIconType = {\n  [iconSet in AccordionIconSetType]: {\n    active: FC<IIconProps>;\n    inactive: FC<IIconProps>;\n  };\n};\n\nexport const AccordionIcon: AccordionIconType = {\n  chevron: {\n    active: ChevronSmallUp,\n    inactive: ChevronSmallDown,\n  },\n  plus: {\n    active: Minus,\n    inactive: Add,\n  },\n};\n"]}

package/build/esm/components/Accordion/Accordion.d.ts

@@ -0,0 +1,5 @@
+import { ReactElement } from 'react';
+import { IAccordionProps } from './Accordion.types';
+declare const Accordion: ({ className, size, children, bodyPadding, disabled, fullWidth, borders, iconSet, ...rest }: IAccordionProps) => ReactElement;
+export default Accordion;
+//# sourceMappingURL=Accordion.d.ts.map

package/build/esm/components/Accordion/Accordion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../../src/components/Accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,YAAY,EAAa,MAAM,OAAO,CAAC;AASvD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEpD,QAAA,MAAM,SAAS,+FAUZ,eAAe,KAAG,YA8BpB,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/build/esm/components/Accordion/Accordion.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { useTheme } from 'styled-components';
+import { Sizes, ACCORDION_CLASS } from 'acinguiux-ds-react-base';
+import { accordionConsts, AccordionIcon } from './Accordion.consts';
+import * as Styled from './Accordion.styles';
+const Accordion = ({ className, size = Sizes.Medium, children, bodyPadding = true, disabled = false, fullWidth = true, borders = true, iconSet = 'plus', ...rest }) => {
+    const theme = useTheme();
+    const handleExpandIcon = ({ isActive, collapsible }) => {
+        const Icon = AccordionIcon[iconSet][isActive ? 'active' : 'inactive'];
+        const iconColor = collapsible === 'disabled' ? theme.text.onSurface.inactive : undefined;
+        return _jsx(Icon, { width: accordionConsts[size].iconSize, height: accordionConsts[size].iconSize, fill: iconColor });
+    };
+    const additionalProps = {
+        ...(disabled && { collapsible: 'disabled' }),
+    };
+    return (_jsx(Styled.Accordion, { className: classNames(ACCORDION_CLASS, className), prefixCls: ACCORDION_CLASS, size: size, expandIcon: handleExpandIcon, bodyPadding: bodyPadding, fullWidth: fullWidth, borders: borders, destroyInactivePanel: true, ...additionalProps, ...rest, children: children }));
+};
+export default Accordion;
+//# sourceMappingURL=Accordion.js.map

package/build/esm/components/Accordion/Accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../../../../src/components/Accordion/Accordion.tsx"],"names":[],"mappings":";AAEA,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAEjE,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACpE,OAAO,KAAK,MAAM,MAAM,oBAAoB,CAAC;AAG7C,MAAM,SAAS,GAAG,CAAC,EACjB,SAAS,EACT,IAAI,GAAG,KAAK,CAAC,MAAM,EACnB,QAAQ,EACR,WAAW,GAAG,IAAI,EAClB,QAAQ,GAAG,KAAK,EAChB,SAAS,GAAG,IAAI,EAChB,OAAO,GAAG,IAAI,EACd,OAAO,GAAG,MAAM,EAChB,GAAG,IAAI,EACS,EAAgB,EAAE;IAClC,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,MAAM,gBAAgB,GAAG,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAsB,EAAa,EAAE;QACpF,MAAM,IAAI,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC;QACtE,MAAM,SAAS,GAAG,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC;QAEzF,OAAO,KAAC,IAAI,IAAC,KAAK,EAAE,eAAe,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE,MAAM,EAAE,eAAe,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE,IAAI,EAAE,SAAS,GAAI,CAAC;IAClH,CAAC,CAAC;IAEF,MAAM,eAAe,GAAG;QACtB,GAAG,CAAC,QAAQ,IAAI,EAAE,WAAW,EAAE,UAAU,EAAE,CAAC;KAC7C,CAAC;IAEF,OAAO,CACL,KAAC,MAAM,CAAC,SAAS,IACf,SAAS,EAAE,UAAU,CAAC,eAAe,EAAE,SAAS,CAAC,EACjD,SAAS,EAAE,eAAe,EAC1B,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,gBAAgB,EAC5B,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,oBAAoB,WAChB,eAAe,KACf,IAAI,YAEP,QAAQ,GACQ,CACpB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["import React, { ReactElement, ReactNode } from 'react';\n\nimport classNames from 'classnames';\nimport { CollapsePanelProps } from 'rc-collapse';\nimport { useTheme } from 'styled-components';\nimport { Sizes, ACCORDION_CLASS } from 'acinguiux-ds-react-base';\n\nimport { accordionConsts, AccordionIcon } from './Accordion.consts';\nimport * as Styled from './Accordion.styles';\nimport { IAccordionProps } from './Accordion.types';\n\nconst Accordion = ({\n  className,\n  size = Sizes.Medium,\n  children,\n  bodyPadding = true,\n  disabled = false,\n  fullWidth = true,\n  borders = true,\n  iconSet = 'plus',\n  ...rest\n}: IAccordionProps): ReactElement => {\n  const theme = useTheme();\n\n  const handleExpandIcon = ({ isActive, collapsible }: CollapsePanelProps): ReactNode => {\n    const Icon = AccordionIcon[iconSet][isActive ? 'active' : 'inactive'];\n    const iconColor = collapsible === 'disabled' ? theme.text.onSurface.inactive : undefined;\n\n    return <Icon width={accordionConsts[size].iconSize} height={accordionConsts[size].iconSize} fill={iconColor} />;\n  };\n\n  const additionalProps = {\n    ...(disabled && { collapsible: 'disabled' }),\n  };\n\n  return (\n    <Styled.Accordion\n      className={classNames(ACCORDION_CLASS, className)}\n      prefixCls={ACCORDION_CLASS}\n      size={size}\n      expandIcon={handleExpandIcon}\n      bodyPadding={bodyPadding}\n      fullWidth={fullWidth}\n      borders={borders}\n      destroyInactivePanel\n      {...additionalProps}\n      {...rest}\n    >\n      {children}\n    </Styled.Accordion>\n  );\n};\n\nexport default Accordion;\n"]}

package/build/esm/components/Accordion/Accordion.stories.d.ts

@@ -0,0 +1,18 @@
+import { StoryFn } from '@storybook/react';
+import { IAccordionProps } from './Accordion.types';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, import("@storybook/types").Args>;
+export default _default;
+export declare const Default: StoryFn<IAccordionProps>;
+export declare const DifferentSizes: StoryFn<IAccordionProps>;
+export declare const Extra: StoryFn<IAccordionProps>;
+export declare const Expanded: StoryFn<IAccordionProps>;
+export declare const Disabled: StoryFn<IAccordionProps>;
+export declare const Nested: StoryFn<IAccordionProps>;
+export declare const CustomItemHeader: StoryFn<IAccordionProps>;
+export declare const WithoutExpandIcon: StoryFn<IAccordionProps>;
+export declare const WithoutBorders: StoryFn<IAccordionProps>;
+export declare const WithoutBodyPadding: StoryFn<IAccordionProps>;
+export declare const WidthFitContent: StoryFn<IAccordionProps>;
+export declare const IconSet: StoryFn<IAccordionProps>;
+export declare const ManageActiveKey: StoryFn<IAccordionProps>;
+//# sourceMappingURL=Accordion.stories.d.ts.map

package/build/esm/components/Accordion/Accordion.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Accordion/Accordion.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAajD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;;AAOpD,wBA8BU;AAEV,eAAO,MAAM,OAAO,EAAE,OAAO,CAAC,eAAe,CAmB5C,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,OAAO,CAAC,eAAe,CAgBnD,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,OAAO,CAAC,eAAe,CA2D1C,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,OAAO,CAAC,eAAe,CAsB7C,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,OAAO,CAAC,eAAe,CAuB7C,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,OAAO,CAAC,eAAe,CAmC3C,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,OAAO,CAAC,eAAe,CA0BrD,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,eAAe,CAsBtD,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,OAAO,CAAC,eAAe,CAsBnD,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,OAAO,CAAC,eAAe,CAuBvD,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,OAAO,CAAC,eAAe,CASpD,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,OAAO,CAAC,eAAe,CAwB5C,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,OAAO,CAAC,eAAe,CA0CpD,CAAC"}

package/build/esm/components/Accordion/Accordion.stories.js

@@ -0,0 +1,221 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import styled from 'styled-components';
+import { Sizes, Variants, TextTypes } from 'acinguiux-ds-react-base';
+import Showcase from '../_internalComponents/Showcase/Showcase';
+import Button from '../Button/Button';
+import Flexbox from '../Flexbox/Flexbox';
+import Grid from '../Grid/Grid';
+import Barrel from '../Icon/components/Barrel';
+import CrossSquare from '../Icon/components/CrossSquare';
+import Tag from '../Tag/Tag';
+import Text from '../Text/components/Text/Text';
+import Accordion from './Accordion';
+import Heading from '../Text/components/Heading/Heading';
+import Label from '../Text/components/Label/Label';
+import Placeholder from '../_internalComponents/Placeholder/Placeholder';
+import { GITHUB_COMPONENT_BASE_URL } from '../../utils/storybookUtils';
+import { Sentiments } from '../../types/types';
+export default {
+    title: 'Data Display/Accordion',
+    component: Accordion,
+    parameters: {
+        storyLink: `${GITHUB_COMPONENT_BASE_URL}/Accordion/Accordion.stories.tsx`,
+        include: [
+            'activeKey',
+            'bodyPadding',
+            'borders',
+            'className',
+            'defaultActiveKey',
+            'disabled',
+            'fullWidth',
+            'iconSet',
+            'items',
+            'nested',
+            'size',
+        ],
+    },
+    argTypes: {
+        activeKey: { description: 'Insert array with key values, like: [0, 1]' },
+        borders: { control: 'boolean' },
+        defaultActiveKey: { description: 'Insert array with key values, like: [0, 1]' },
+        className: { control: 'text' },
+        items: { control: 'object' },
+        size: {
+            options: [Sizes.Small, Sizes.Medium, Sizes.Large],
+            control: 'radio',
+        },
+    },
+};
+export const Default = (args) => (_jsx(Accordion, { items: [
+        { label: 'This is panel 1', children: 'Content for panel 1' },
+        { label: 'This is panel 2', children: _jsx(Placeholder, {}) },
+        {
+            label: 'This is panel 3',
+            children: (_jsx(Accordion, { items: [
+                    { label: 'This is nested panel 3-1', children: 'Content for panel 3-1' },
+                    { label: 'This is nested panel 2', children: _jsx(Placeholder, {}) },
+                ] })),
+        },
+    ], ...args }));
+export const DifferentSizes = (args) => (_jsxs(Flexbox, { gap: "80px", children: [_jsx(Showcase, { label: "Small", children: _jsx(Accordion, { size: Sizes.Small, items: [{ label: 'This is panel 1', children: 'Content for panel 1' }], ...args }) }), _jsx(Showcase, { label: "Medium", children: _jsx(Accordion, { size: Sizes.Medium, items: [{ label: 'This is panel 1', children: 'Content for panel 1' }], ...args }) }), _jsx(Showcase, { label: "Large", children: _jsx(Accordion, { size: Sizes.Large, items: [{ label: 'This is panel 1', children: 'Content for panel 1' }], ...args }) })] }));
+export const Extra = (args) => {
+    const StyledTag = styled(Tag) `
+    margin-left: 24px;
+  `;
+    return (_jsx(Accordion, { items: [
+            {
+                label: 'This is panel 1',
+                extra: _jsx(Placeholder, { style: { height: '40px' } }),
+                children: 'Content for panel 1',
+            },
+            {
+                label: 'This is panel 2',
+                extra: _jsx(CrossSquare, { width: 20 }),
+                children: 'Content for panel 2',
+            },
+            {
+                label: 'This is panel 3',
+                extra: (_jsx(StyledTag, { sentiment: Sentiments.Neutral, variant: Variants.Subtle, children: "Label" })),
+                children: 'Content for panel 3',
+            },
+            {
+                label: 'This is panel 4',
+                children: (_jsx(Accordion, { items: [
+                        {
+                            label: 'This is nested panel 4-1',
+                            extra: _jsx(Placeholder, { style: { height: '40px' } }),
+                            children: 'Content for panel 4-1',
+                        },
+                        {
+                            label: 'This is nested panel 4-2',
+                            extra: _jsx(CrossSquare, { width: 20 }),
+                            children: 'Content for panel 4-2',
+                        },
+                        {
+                            label: 'This is nested panel 4-3',
+                            extra: (_jsx(StyledTag, { sentiment: Sentiments.Neutral, variant: Variants.Subtle, children: "Label" })),
+                            children: 'Content for panel 4-3',
+                        },
+                    ] })),
+            },
+        ], ...args }));
+};
+export const Expanded = (args) => (_jsx(Accordion, { defaultActiveKey: ['1', '3'], items: [
+        { label: 'This is panel 1', key: '1', children: 'Content for panel 1' },
+        { label: 'This is panel 2', key: '2', children: _jsx(Placeholder, {}) },
+        {
+            label: 'This is panel 3',
+            key: '3',
+            children: (_jsx(Accordion, { nested: true, items: [
+                    { label: 'This is nested panel 3-1', key: '31', children: 'Content for panel 3-1' },
+                    { label: 'This is nested panel 3-2', key: '32', children: _jsx(Placeholder, {}) },
+                ] })),
+        },
+    ], ...args }));
+export const Disabled = (args) => (_jsx(Accordion, { defaultActiveKey: ['1', '3'], disabled: true, items: [
+        { label: 'This is panel 1', key: '1', children: 'Content for panel 1' },
+        { label: 'This is panel 2', key: '2', children: _jsx(Placeholder, {}) },
+        {
+            label: 'This is panel 3',
+            key: '3',
+            children: (_jsx(Accordion, { nested: true, items: [
+                    { label: 'This is nested panel 3-1', key: '31', children: 'Content for panel 3-1' },
+                    { label: 'This is nested panel 3-2', key: '32', children: _jsx(Placeholder, {}) },
+                ] })),
+        },
+    ], ...args }));
+export const Nested = (args) => (_jsx(Accordion, { defaultActiveKey: ['2'], items: [
+        { label: 'This is panel 1', children: 'Content for panel 1' },
+        { label: 'This is panel 2', children: _jsx(Placeholder, {}) },
+        {
+            label: 'This is panel 3',
+            children: (_jsx(Accordion, { nested: true, defaultActiveKey: 2, items: [
+                    { label: 'This is nested panel 3-1', children: 'Content for panel 3-1' },
+                    { label: 'This is nested panel 3-2', children: _jsx(Placeholder, {}) },
+                    {
+                        label: 'This is nested panel 3-3',
+                        children: (_jsx(Accordion, { nested: true, defaultActiveKey: 1, items: [
+                                { label: 'This is nested nested panel 3-3-1', children: 'Content for panel 3-3-1' },
+                                { label: 'This is nested nested panel 3-3-2', children: _jsx(Placeholder, {}) },
+                            ] })),
+                    },
+                ] })),
+        },
+    ], ...args }));
+export const CustomItemHeader = (args) => (_jsx(Accordion, { items: [
+        {
+            label: (_jsxs(_Fragment, { children: [_jsx(Heading, { level: 4, bold: true, children: "This is panel 1" }), _jsx(Label, { prominence: "subtle", children: "Label as a description" })] })),
+            children: 'Content for panel 1',
+        },
+        {
+            label: (_jsxs(Flexbox, { flexDirection: "column", gap: "4px", children: [_jsx("span", { children: "This header is a component" }), _jsx(Barrel, { height: "16px", width: "16px" })] })),
+            children: 'Content for panel with component',
+        },
+    ], ...args }));
+export const WithoutExpandIcon = (args) => (_jsx(Accordion, { items: [
+        { label: 'This is panel 1', showArrow: false, children: 'Content for panel 1' },
+        { label: 'This is panel 2', showArrow: false, children: _jsx(Placeholder, {}) },
+        {
+            label: 'This is panel 3',
+            showArrow: false,
+            children: (_jsx(Accordion, { nested: true, defaultActiveKey: 1, items: [
+                    { label: 'This is nested nested panel 3-1', showArrow: false, children: 'Content for panel 3-1' },
+                    { label: 'This is nested nested panel 3-2', showArrow: false, children: _jsx(Placeholder, {}) },
+                ] })),
+        },
+    ], ...args }));
+export const WithoutBorders = (args) => (_jsx(Accordion, { borders: false, items: [
+        { label: 'This is panel 1', children: 'Content for panel 1' },
+        { label: 'This is panel 2', children: _jsx(Placeholder, {}) },
+        {
+            label: 'This is panel 3',
+            children: (_jsx(Accordion, { nested: true, defaultActiveKey: 2, items: [
+                    { label: 'This is nested panel 3-1', children: 'Content for panel 3-1' },
+                    { label: 'This is nested panel 3-2', children: _jsx(Placeholder, {}) },
+                ] })),
+        },
+    ], ...args }));
+export const WithoutBodyPadding = (args) => (_jsx(Accordion, { bodyPadding: false, items: [
+        { label: 'This is panel 1', children: 'Content for panel 1' },
+        { label: 'This is panel 2', children: _jsx(Placeholder, {}) },
+        {
+            label: 'This is panel 3',
+            children: (_jsx(Accordion, { nested: true, defaultActiveKey: 2, bodyPadding: false, items: [
+                    { label: 'This is nested panel 3-1', children: 'Content for panel 3-1' },
+                    { label: 'This is nested panel 3-2', children: _jsx(Placeholder, {}) },
+                ] })),
+        },
+    ], ...args }));
+export const WidthFitContent = (args) => (_jsx(Accordion, { fullWidth: false, items: [
+        { label: 'This is panel 1', children: 'Content for panel 1' },
+        { label: 'This is panel 2', children: _jsx(Placeholder, {}) },
+    ], ...args }));
+export const IconSet = (args) => (_jsxs(Flexbox, { gap: "24px", flexGrow: 1, children: [_jsx(Showcase, { label: "Chevron", style: { width: '200px' }, noWrapper: true, children: _jsx(Accordion, { fullWidth: true, iconSet: "chevron", items: [{ label: 'This is panel 1', children: 'Content for panel 1' }], ...args }) }), _jsx(Showcase, { label: "Plus", style: { width: '200px' }, noWrapper: true, children: _jsx(Accordion, { fullWidth: true, iconSet: "plus", items: [
+                    {
+                        label: 'This is panel 1',
+                        children: 'Content for panel 1',
+                    },
+                ], ...args }) })] }));
+export const ManageActiveKey = ({ size }) => {
+    const [activeKey, setActiveKey] = useState([0]);
+    const handleActiveKey = () => {
+        const newActiveKey = Array.isArray(activeKey)
+            ? [...activeKey, Number(activeKey.slice(-1)) + 1]
+            : Number(activeKey) + 1;
+        setActiveKey(newActiveKey);
+    };
+    const ContentWithButtons = () => (_jsxs(Grid, { gap: "24px", children: [_jsx(Text, { type: TextTypes.Span, children: "Content for panel." }), _jsx(Flexbox, { children: _jsx(Button, { onClick: handleActiveKey, children: "Next" }) })] }));
+    return (_jsx(Accordion, { size: size, activeKey: activeKey, items: [
+            { label: 'This is panel 1', children: _jsx(ContentWithButtons, {}) },
+            { label: 'This is panel 2', children: _jsx(ContentWithButtons, {}) },
+            { label: 'This is panel 3', children: _jsx(ContentWithButtons, {}) },
+            {
+                label: 'This is panel 4',
+                children: (_jsx(Button, { onClick: () => {
+                        setActiveKey([0]);
+                    }, children: "Collapse al and go back to panel 1" })),
+            },
+        ] }));
+};
+//# sourceMappingURL=Accordion.stories.js.map

package/build/esm/components/Accordion/Accordion.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.stories.js","sourceRoot":"","sources":["../../../../src/components/Accordion/Accordion.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { Key, useState } from 'react';\n\nimport { Meta, StoryFn } from '@storybook/react';\nimport styled from 'styled-components';\nimport { Sizes, Variants, TextTypes } from 'acinguiux-ds-react-base';\n\nimport Showcase from '../_internalComponents/Showcase/Showcase';\nimport Button from '../Button/Button';\nimport Flexbox from '../Flexbox/Flexbox';\nimport Grid from '../Grid/Grid';\nimport Barrel from '../Icon/components/Barrel';\nimport CrossSquare from '../Icon/components/CrossSquare';\nimport Tag from '../Tag/Tag';\nimport Text from '../Text/components/Text/Text';\nimport Accordion from './Accordion';\nimport { IAccordionProps } from './Accordion.types';\nimport Heading from '../Text/components/Heading/Heading';\nimport Label from '../Text/components/Label/Label';\nimport Placeholder from '../_internalComponents/Placeholder/Placeholder';\nimport { GITHUB_COMPONENT_BASE_URL } from '../../utils/storybookUtils';\nimport { Sentiments } from '../../types/types';\n\nexport default {\n  title: 'Data Display/Accordion',\n  component: Accordion,\n  parameters: {\n    storyLink: `${GITHUB_COMPONENT_BASE_URL}/Accordion/Accordion.stories.tsx`,\n    include: [\n      'activeKey',\n      'bodyPadding',\n      'borders',\n      'className',\n      'defaultActiveKey',\n      'disabled',\n      'fullWidth',\n      'iconSet',\n      'items',\n      'nested',\n      'size',\n    ],\n  },\n  argTypes: {\n    activeKey: { description: 'Insert array with key values, like: [0, 1]' },\n    borders: { control: 'boolean' },\n    defaultActiveKey: { description: 'Insert array with key values, like: [0, 1]' },\n    className: { control: 'text' },\n    items: { control: 'object' },\n    size: {\n      options: [Sizes.Small, Sizes.Medium, Sizes.Large],\n      control: 'radio',\n    },\n  },\n} as Meta;\n\nexport const Default: StoryFn<IAccordionProps> = (args) => (\n  <Accordion\n    items={[\n      { label: 'This is panel 1', children: 'Content for panel 1' },\n      { label: 'This is panel 2', children: <Placeholder /> },\n      {\n        label: 'This is panel 3',\n        children: (\n          <Accordion\n            items={[\n              { label: 'This is nested panel 3-1', children: 'Content for panel 3-1' },\n              { label: 'This is nested panel 2', children: <Placeholder /> },\n            ]}\n          />\n        ),\n      },\n    ]}\n    {...args}\n  />\n);\n\nexport const DifferentSizes: StoryFn<IAccordionProps> = (args) => (\n  <Flexbox gap=\"80px\">\n    <Showcase label=\"Small\">\n      <Accordion size={Sizes.Small} items={[{ label: 'This is panel 1', children: 'Content for panel 1' }]} {...args} />\n    </Showcase>\n    <Showcase label=\"Medium\">\n      <Accordion\n        size={Sizes.Medium}\n        items={[{ label: 'This is panel 1', children: 'Content for panel 1' }]}\n        {...args}\n      />\n    </Showcase>\n    <Showcase label=\"Large\">\n      <Accordion size={Sizes.Large} items={[{ label: 'This is panel 1', children: 'Content for panel 1' }]} {...args} />\n    </Showcase>\n  </Flexbox>\n);\n\nexport const Extra: StoryFn<IAccordionProps> = (args) => {\n  const StyledTag = styled(Tag)`\n    margin-left: 24px;\n  `;\n\n  return (\n    <Accordion\n      items={[\n        {\n          label: 'This is panel 1',\n          extra: <Placeholder style={{ height: '40px' }} />,\n          children: 'Content for panel 1',\n        },\n        {\n          label: 'This is panel 2',\n          extra: <CrossSquare width={20} />,\n          children: 'Content for panel 2',\n        },\n        {\n          label: 'This is panel 3',\n          extra: (\n            <StyledTag sentiment={Sentiments.Neutral} variant={Variants.Subtle}>\n              Label\n            </StyledTag>\n          ),\n          children: 'Content for panel 3',\n        },\n        {\n          label: 'This is panel 4',\n          children: (\n            <Accordion\n              items={[\n                {\n                  label: 'This is nested panel 4-1',\n                  extra: <Placeholder style={{ height: '40px' }} />,\n                  children: 'Content for panel 4-1',\n                },\n                {\n                  label: 'This is nested panel 4-2',\n                  extra: <CrossSquare width={20} />,\n                  children: 'Content for panel 4-2',\n                },\n                {\n                  label: 'This is nested panel 4-3',\n                  extra: (\n                    <StyledTag sentiment={Sentiments.Neutral} variant={Variants.Subtle}>\n                      Label\n                    </StyledTag>\n                  ),\n                  children: 'Content for panel 4-3',\n                },\n              ]}\n            />\n          ),\n        },\n      ]}\n      {...args}\n    />\n  );\n};\n\nexport const Expanded: StoryFn<IAccordionProps> = (args) => (\n  <Accordion\n    defaultActiveKey={['1', '3']}\n    items={[\n      { label: 'This is panel 1', key: '1', children: 'Content for panel 1' },\n      { label: 'This is panel 2', key: '2', children: <Placeholder /> },\n      {\n        label: 'This is panel 3',\n        key: '3',\n        children: (\n          <Accordion\n            nested\n            items={[\n              { label: 'This is nested panel 3-1', key: '31', children: 'Content for panel 3-1' },\n              { label: 'This is nested panel 3-2', key: '32', children: <Placeholder /> },\n            ]}\n          />\n        ),\n      },\n    ]}\n    {...args}\n  />\n);\n\nexport const Disabled: StoryFn<IAccordionProps> = (args) => (\n  <Accordion\n    defaultActiveKey={['1', '3']}\n    disabled\n    items={[\n      { label: 'This is panel 1', key: '1', children: 'Content for panel 1' },\n      { label: 'This is panel 2', key: '2', children: <Placeholder /> },\n      {\n        label: 'This is panel 3',\n        key: '3',\n        children: (\n          <Accordion\n            nested\n            items={[\n              { label: 'This is nested panel 3-1', key: '31', children: 'Content for panel 3-1' },\n              { label: 'This is nested panel 3-2', key: '32', children: <Placeholder /> },\n            ]}\n          />\n        ),\n      },\n    ]}\n    {...args}\n  />\n);\n\nexport const Nested: StoryFn<IAccordionProps> = (args) => (\n  <Accordion\n    defaultActiveKey={['2']}\n    items={[\n      { label: 'This is panel 1', children: 'Content for panel 1' },\n      { label: 'This is panel 2', children: <Placeholder /> },\n      {\n        label: 'This is panel 3',\n        children: (\n          <Accordion\n            nested\n            defaultActiveKey={2}\n            items={[\n              { label: 'This is nested panel 3-1', children: 'Content for panel 3-1' },\n              { label: 'This is nested panel 3-2', children: <Placeholder /> },\n              {\n                label: 'This is nested panel 3-3',\n                children: (\n                  <Accordion\n                    nested\n                    defaultActiveKey={1}\n                    items={[\n                      { label: 'This is nested nested panel 3-3-1', children: 'Content for panel 3-3-1' },\n                      { label: 'This is nested nested panel 3-3-2', children: <Placeholder /> },\n                    ]}\n                  />\n                ),\n              },\n            ]}\n          />\n        ),\n      },\n    ]}\n    {...args}\n  />\n);\n\nexport const CustomItemHeader: StoryFn<IAccordionProps> = (args) => (\n  <Accordion\n    items={[\n      {\n        label: (\n          <>\n            <Heading level={4} bold>\n              This is panel 1\n            </Heading>\n            <Label prominence=\"subtle\">Label as a description</Label>\n          </>\n        ),\n        children: 'Content for panel 1',\n      },\n      {\n        label: (\n          <Flexbox flexDirection=\"column\" gap=\"4px\">\n            <span>This header is a component</span>\n            <Barrel height=\"16px\" width=\"16px\" />\n          </Flexbox>\n        ),\n        children: 'Content for panel with component',\n      },\n    ]}\n    {...args}\n  />\n);\n\nexport const WithoutExpandIcon: StoryFn<IAccordionProps> = (args) => (\n  <Accordion\n    items={[\n      { label: 'This is panel 1', showArrow: false, children: 'Content for panel 1' },\n      { label: 'This is panel 2', showArrow: false, children: <Placeholder /> },\n      {\n        label: 'This is panel 3',\n        showArrow: false,\n        children: (\n          <Accordion\n            nested\n            defaultActiveKey={1}\n            items={[\n              { label: 'This is nested nested panel 3-1', showArrow: false, children: 'Content for panel 3-1' },\n              { label: 'This is nested nested panel 3-2', showArrow: false, children: <Placeholder /> },\n            ]}\n          />\n        ),\n      },\n    ]}\n    {...args}\n  />\n);\n\nexport const WithoutBorders: StoryFn<IAccordionProps> = (args) => (\n  <Accordion\n    borders={false}\n    items={[\n      { label: 'This is panel 1', children: 'Content for panel 1' },\n      { label: 'This is panel 2', children: <Placeholder /> },\n      {\n        label: 'This is panel 3',\n        children: (\n          <Accordion\n            nested\n            defaultActiveKey={2}\n            items={[\n              { label: 'This is nested panel 3-1', children: 'Content for panel 3-1' },\n              { label: 'This is nested panel 3-2', children: <Placeholder /> },\n            ]}\n          />\n        ),\n      },\n    ]}\n    {...args}\n  />\n);\n\nexport const WithoutBodyPadding: StoryFn<IAccordionProps> = (args) => (\n  <Accordion\n    bodyPadding={false}\n    items={[\n      { label: 'This is panel 1', children: 'Content for panel 1' },\n      { label: 'This is panel 2', children: <Placeholder /> },\n      {\n        label: 'This is panel 3',\n        children: (\n          <Accordion\n            nested\n            defaultActiveKey={2}\n            bodyPadding={false}\n            items={[\n              { label: 'This is nested panel 3-1', children: 'Content for panel 3-1' },\n              { label: 'This is nested panel 3-2', children: <Placeholder /> },\n            ]}\n          />\n        ),\n      },\n    ]}\n    {...args}\n  />\n);\n\nexport const WidthFitContent: StoryFn<IAccordionProps> = (args) => (\n  <Accordion\n    fullWidth={false}\n    items={[\n      { label: 'This is panel 1', children: 'Content for panel 1' },\n      { label: 'This is panel 2', children: <Placeholder /> },\n    ]}\n    {...args}\n  />\n);\n\nexport const IconSet: StoryFn<IAccordionProps> = (args) => (\n  <Flexbox gap=\"24px\" flexGrow={1}>\n    <Showcase label=\"Chevron\" style={{ width: '200px' }} noWrapper>\n      <Accordion\n        fullWidth\n        iconSet=\"chevron\"\n        items={[{ label: 'This is panel 1', children: 'Content for panel 1' }]}\n        {...args}\n      />\n    </Showcase>\n    <Showcase label=\"Plus\" style={{ width: '200px' }} noWrapper>\n      <Accordion\n        fullWidth\n        iconSet=\"plus\"\n        items={[\n          {\n            label: 'This is panel 1',\n            children: 'Content for panel 1',\n          },\n        ]}\n        {...args}\n      />\n    </Showcase>\n  </Flexbox>\n);\n\nexport const ManageActiveKey: StoryFn<IAccordionProps> = ({ size }) => {\n  const [activeKey, setActiveKey] = useState<Key | Key[]>([0]);\n\n  const handleActiveKey = () => {\n    const newActiveKey = Array.isArray(activeKey)\n      ? [...activeKey, Number(activeKey.slice(-1)) + 1]\n      : Number(activeKey) + 1;\n    setActiveKey(newActiveKey);\n  };\n\n  const ContentWithButtons = () => (\n    <Grid gap=\"24px\">\n      <Text type={TextTypes.Span}>Content for panel.</Text>\n      <Flexbox>\n        <Button onClick={handleActiveKey}>Next</Button>\n      </Flexbox>\n    </Grid>\n  );\n\n  return (\n    <Accordion\n      size={size}\n      activeKey={activeKey}\n      items={[\n        { label: 'This is panel 1', children: <ContentWithButtons /> },\n        { label: 'This is panel 2', children: <ContentWithButtons /> },\n        { label: 'This is panel 3', children: <ContentWithButtons /> },\n        {\n          label: 'This is panel 4',\n          children: (\n            <Button\n              onClick={() => {\n                setActiveKey([0]);\n              }}\n            >\n              Collapse al and go back to panel 1\n            </Button>\n          ),\n        },\n      ]}\n    />\n  );\n};\n"]}

package/build/esm/components/Accordion/Accordion.styles.d.ts

@@ -0,0 +1,7 @@
+import { FunctionComponent, ReactNode } from 'react';
+import { IAccordionProps } from './Accordion.types';
+declare const Accordion: import("styled-components").StyledComponent<FunctionComponent<{}>, import("styled-components").DefaultTheme, IAccordionProps & {
+    expandIcon: (props: object) => ReactNode;
+}, never>;
+export { Accordion };
+//# sourceMappingURL=Accordion.styles.d.ts.map

package/build/esm/components/Accordion/Accordion.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Accordion/Accordion.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOrD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEpD,QAAA,MAAM,SAAS;wBAC2B,MAAM,KAAK,SAAS;SA8F7D,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/build/esm/components/Accordion/Accordion.styles.js

@@ -0,0 +1,100 @@
+import RCAccordion from 'rc-collapse';
+import styled, { css } from 'styled-components';
+import { Sizes } from 'acinguiux-ds-react-base';
+import { accordionConsts } from './Accordion.consts';
+const Accordion = styled(RCAccordion) `
+  ${({ prefixCls, size, bodyPadding, fullWidth, nested, borders, theme }) => css `
+    width: ${fullWidth ? '100%' : 'fit-content'};
+    color: ${theme.text.onSurface.strong};
+    transition: height 0.3s, opacity 0.3s;
+
+    ${nested &&
+    css `
+      padding-left: 24px;
+    `}
+
+    .${prefixCls}-panel-header, .${prefixCls}-header {
+      ${size === Sizes.Small && theme.label.medium.bold}
+      ${size === Sizes.Medium && theme.heading[4].bold}
+      ${size === Sizes.Large && theme.heading[3].demi}
+      min-height: ${accordionConsts[size || Sizes.Medium].minHeight}px;
+    }
+
+    .${prefixCls}-header {
+      display: flex;
+      align-items: center;
+    }
+
+    .${prefixCls}-panel-content,.${prefixCls}-content {
+      ${bodyPadding &&
+    css `
+        padding: ${accordionConsts[size || Sizes.Medium].bodyPadding};
+      `}
+    }
+
+    .${prefixCls}-panel-item:last-of-type, .${prefixCls}-item:last-of-type {
+      border-bottom: none;
+    }
+
+    .${prefixCls}-panel-expand-icon, .${prefixCls}-expand-icon {
+      display: flex;
+      margin-right: 6px;
+    }
+
+    /** Items */
+
+    .${prefixCls}-item {
+      ${borders &&
+    css `
+        border-bottom: 1px solid ${theme.border.subtle};
+      `}
+
+      .${prefixCls}-header {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        cursor: pointer;
+
+        .${prefixCls}-extra {
+          display: flex;
+          align-items: center;
+          justify-self: flex-end;
+          margin-left: auto;
+        }
+
+        &-collapsible-only {
+          cursor: default;
+
+          .${prefixCls}-header-text {
+            cursor: pointer;
+          }
+        }
+      }
+
+      .${prefixCls}-content-active {
+        opacity: 1;
+        height: auto;
+      }
+
+      .${prefixCls}-content-inactive {
+        display: none;
+      }
+
+      &-disabled {
+        background-color: ${theme.background.inactive};
+        border-color: ${theme.border.subtle};
+        color: ${theme.text.onSurface.inactive};
+        cursor: not-allowed;
+
+        .${prefixCls}-header, .${prefixCls}-content-active, svg,
+        * {
+          cursor: not-allowed;
+          color: ${theme.text.onSurface.inactive};
+          fill: ${theme.text.onSurface.inactive};
+        }
+      }
+    }
+  `}
+`;
+export { Accordion };
+//# sourceMappingURL=Accordion.styles.js.map

package/build/esm/components/Accordion/Accordion.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.styles.js","sourceRoot":"","sources":["../../../../src/components/Accordion/Accordion.styles.ts"],"names":[],"mappings":"AAEA,OAAO,WAAW,MAAM,aAAa,CAAC;AACtC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAEhD,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAGrD,MAAM,SAAS,GAAG,MAAM,CAAC,WAA2C,CAAC,CAEpE;IACG,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;aACnE,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,aAAa;aAClC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM;;;MAGlC,MAAM;IACR,GAAG,CAAA;;KAEF;;OAEE,SAAS,mBAAmB,SAAS;QACpC,IAAI,KAAK,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI;QAC/C,IAAI,KAAK,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI;QAC9C,IAAI,KAAK,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI;oBACjC,eAAe,CAAC,IAAI,IAAI,KAAK,CAAC,MAAM,CAAC,CAAC,SAAS;;;OAG5D,SAAS;;;;;OAKT,SAAS,mBAAmB,SAAS;QACpC,WAAW;IACb,GAAG,CAAA;mBACU,eAAe,CAAC,IAAI,IAAI,KAAK,CAAC,MAAM,CAAC,CAAC,WAAW;OAC7D;;;OAGA,SAAS,8BAA8B,SAAS;;;;OAIhD,SAAS,wBAAwB,SAAS;;;;;;;OAO1C,SAAS;QACR,OAAO;IACT,GAAG,CAAA;mCAC0B,KAAK,CAAC,MAAM,CAAC,MAAM;OAC/C;;SAEE,SAAS;;;;;;WAMP,SAAS;;;;;;;;;;aAUP,SAAS;;;;;;SAMb,SAAS;;;;;SAKT,SAAS;;;;;4BAKU,KAAK,CAAC,UAAU,CAAC,QAAQ;wBAC7B,KAAK,CAAC,MAAM,CAAC,MAAM;iBAC1B,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ;;;WAGnC,SAAS,aAAa,SAAS;;;mBAGvB,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ;kBAC9B,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ;;;;GAI5C;CACF,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,CAAC","sourcesContent":["import { FunctionComponent, ReactNode } from 'react';\n\nimport RCAccordion from 'rc-collapse';\nimport styled, { css } from 'styled-components';\nimport { Sizes } from 'acinguiux-ds-react-base';\n\nimport { accordionConsts } from './Accordion.consts';\nimport { IAccordionProps } from './Accordion.types';\n\nconst Accordion = styled(RCAccordion as unknown as FunctionComponent)<\n  IAccordionProps & { expandIcon: (props: object) => ReactNode }\n>`\n  ${({ prefixCls, size, bodyPadding, fullWidth, nested, borders, theme }) => css`\n    width: ${fullWidth ? '100%' : 'fit-content'};\n    color: ${theme.text.onSurface.strong};\n    transition: height 0.3s, opacity 0.3s;\n\n    ${nested &&\n    css`\n      padding-left: 24px;\n    `}\n\n    .${prefixCls}-panel-header, .${prefixCls}-header {\n      ${size === Sizes.Small && theme.label.medium.bold}\n      ${size === Sizes.Medium && theme.heading[4].bold}\n      ${size === Sizes.Large && theme.heading[3].demi}\n      min-height: ${accordionConsts[size || Sizes.Medium].minHeight}px;\n    }\n\n    .${prefixCls}-header {\n      display: flex;\n      align-items: center;\n    }\n\n    .${prefixCls}-panel-content,.${prefixCls}-content {\n      ${bodyPadding &&\n      css`\n        padding: ${accordionConsts[size || Sizes.Medium].bodyPadding};\n      `}\n    }\n\n    .${prefixCls}-panel-item:last-of-type, .${prefixCls}-item:last-of-type {\n      border-bottom: none;\n    }\n\n    .${prefixCls}-panel-expand-icon, .${prefixCls}-expand-icon {\n      display: flex;\n      margin-right: 6px;\n    }\n\n    /** Items */\n\n    .${prefixCls}-item {\n      ${borders &&\n      css`\n        border-bottom: 1px solid ${theme.border.subtle};\n      `}\n\n      .${prefixCls}-header {\n        display: flex;\n        justify-content: flex-start;\n        align-items: center;\n        cursor: pointer;\n\n        .${prefixCls}-extra {\n          display: flex;\n          align-items: center;\n          justify-self: flex-end;\n          margin-left: auto;\n        }\n\n        &-collapsible-only {\n          cursor: default;\n\n          .${prefixCls}-header-text {\n            cursor: pointer;\n          }\n        }\n      }\n\n      .${prefixCls}-content-active {\n        opacity: 1;\n        height: auto;\n      }\n\n      .${prefixCls}-content-inactive {\n        display: none;\n      }\n\n      &-disabled {\n        background-color: ${theme.background.inactive};\n        border-color: ${theme.border.subtle};\n        color: ${theme.text.onSurface.inactive};\n        cursor: not-allowed;\n\n        .${prefixCls}-header, .${prefixCls}-content-active, svg,\n        * {\n          cursor: not-allowed;\n          color: ${theme.text.onSurface.inactive};\n          fill: ${theme.text.onSurface.inactive};\n        }\n      }\n    }\n  `}\n`;\n\nexport { Accordion };\n"]}

package/build/esm/components/Accordion/Accordion.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Accordion.test.d.ts.map

package/build/esm/components/Accordion/Accordion.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.test.d.ts","sourceRoot":"","sources":["../../../../src/components/Accordion/Accordion.test.tsx"],"names":[],"mappings":""}

package/build/esm/components/Accordion/Accordion.test.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { act } from '@testing-library/react-hooks';
+import { Sizes } from 'acinguiux-ds-react-base';
+import { render, userEvent, describe, it, expect, screen } from '../../utils/viTestUtils';
+import Accordion from './Accordion';
+import AccordionPanel from './components/AccordionPanel/AccordionPanel';
+const text = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.';
+describe('Accordion component', () => {
+    it('should render with default props', () => {
+        render(_jsxs(Accordion, { children: [_jsx(AccordionPanel, { header: "Panel 1", children: text }), _jsx(AccordionPanel, { header: "Panel 2", children: text })] }));
+        expect(screen.getByText('Panel 1')).toBeInTheDocument();
+        expect(screen.getByText('Panel 2')).toBeInTheDocument();
+        act(() => {
+            userEvent.click(screen.getByText('Panel 1'));
+        });
+        expect(screen.getByText(text)).toBeInTheDocument();
+    });
+    it('should render with proper small size', () => {
+        render(_jsxs(Accordion, { size: Sizes.Small, children: [_jsx(AccordionPanel, { header: "Panel 1", children: text }), _jsx(AccordionPanel, { header: "Panel 2", children: text })] }));
+        expect(screen.getByText('Panel 1')).toBeInTheDocument();
+    });
+    it('should render with proper medium size', () => {
+        render(_jsxs(Accordion, { size: Sizes.Medium, children: [_jsx(AccordionPanel, { header: "Panel 1", children: text }), _jsx(AccordionPanel, { header: "Panel 2", children: text })] }));
+        expect(screen.getByText('Panel 1')).toBeInTheDocument();
+    });
+    it('should render with proper large size', () => {
+        render(_jsxs(Accordion, { size: Sizes.Large, children: [_jsx(AccordionPanel, { header: "Panel 1", children: text }), _jsx(AccordionPanel, { header: "Panel 2", children: text })] }));
+        expect(screen.getByText('Panel 1')).toBeInTheDocument();
+    });
+    it('should render with additional props', () => {
+        render(_jsxs(Accordion, { activeKey: [0], bodyPadding: false, fullWidth: false, nested: true, iconSet: "chevron", children: [_jsx(AccordionPanel, { header: "Panel 1", border: false, children: text }), _jsx(AccordionPanel, { label: "Panel 2", children: text })] }));
+        expect(screen.getByText('Panel 1')).toBeInTheDocument();
+        expect(screen.getByText('Panel 2')).toBeInTheDocument();
+    });
+});
+//# sourceMappingURL=Accordion.test.js.map

package/build/esm/components/Accordion/Accordion.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.test.js","sourceRoot":"","sources":["../../../../src/components/Accordion/Accordion.test.tsx"],"names":[],"mappings":"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","sourcesContent":["import { act } from '@testing-library/react-hooks';\nimport { Sizes } from 'acinguiux-ds-react-base';\n\nimport { render, userEvent, describe, it, expect, screen } from '../../utils/viTestUtils';\nimport Accordion from './Accordion';\nimport AccordionPanel from './components/AccordionPanel/AccordionPanel';\n\nconst text = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.';\n\ndescribe('Accordion component', () => {\n  it('should render with default props', () => {\n    render(\n      <Accordion>\n        <AccordionPanel header=\"Panel 1\">{text}</AccordionPanel>\n        <AccordionPanel header=\"Panel 2\">{text}</AccordionPanel>\n      </Accordion>,\n    );\n    expect(screen.getByText('Panel 1')).toBeInTheDocument();\n    expect(screen.getByText('Panel 2')).toBeInTheDocument();\n\n    act(() => {\n      userEvent.click(screen.getByText('Panel 1'));\n    });\n\n    expect(screen.getByText(text)).toBeInTheDocument();\n  });\n\n  it('should render with proper small size', () => {\n    render(\n      <Accordion size={Sizes.Small}>\n        <AccordionPanel header=\"Panel 1\">{text}</AccordionPanel>\n        <AccordionPanel header=\"Panel 2\">{text}</AccordionPanel>\n      </Accordion>,\n    );\n    expect(screen.getByText('Panel 1')).toBeInTheDocument();\n  });\n\n  it('should render with proper medium size', () => {\n    render(\n      <Accordion size={Sizes.Medium}>\n        <AccordionPanel header=\"Panel 1\">{text}</AccordionPanel>\n        <AccordionPanel header=\"Panel 2\">{text}</AccordionPanel>\n      </Accordion>,\n    );\n    expect(screen.getByText('Panel 1')).toBeInTheDocument();\n  });\n\n  it('should render with proper large size', () => {\n    render(\n      <Accordion size={Sizes.Large}>\n        <AccordionPanel header=\"Panel 1\">{text}</AccordionPanel>\n        <AccordionPanel header=\"Panel 2\">{text}</AccordionPanel>\n      </Accordion>,\n    );\n    expect(screen.getByText('Panel 1')).toBeInTheDocument();\n  });\n\n  it('should render with additional props', () => {\n    render(\n      <Accordion activeKey={[0]} bodyPadding={false} fullWidth={false} nested iconSet=\"chevron\">\n        <AccordionPanel header=\"Panel 1\" border={false}>\n          {text}\n        </AccordionPanel>\n        <AccordionPanel label=\"Panel 2\">{text}</AccordionPanel>\n      </Accordion>,\n    );\n    expect(screen.getByText('Panel 1')).toBeInTheDocument();\n    expect(screen.getByText('Panel 2')).toBeInTheDocument();\n  });\n});\n"]}

package/build/esm/components/Accordion/Accordion.types.d.ts

@@ -0,0 +1,31 @@
+import { ReactNode } from 'react';
+import { CollapseProps, ItemType } from 'rc-collapse/lib/interface';
+import { Sizes } from 'acinguiux-ds-react-base';
+import { LargeSize, MediumSize, SmallSize } from '../../types/types';
+/**
+ * @deprecated DeprecatedSize prop has been deprecated, please use AccordionSize
+ */
+type DeprecatedSize = SmallSize | MediumSize | LargeSize;
+export type AccordionSize = Sizes.Small | Sizes.Medium | Sizes.Large | DeprecatedSize;
+export type AccordionIconSetType = 'chevron' | 'plus';
+export interface IAccordionProps extends Omit<CollapseProps, 'expandIcon' | 'items' | 'collapsible'> {
+    size?: AccordionSize;
+    /**
+     * @deprecated children prop has been deprecated, please use items instead
+     */
+    children?: ReactNode | ReactNode[];
+    items?: ItemType[];
+    bodyPadding?: boolean;
+    fullWidth?: boolean;
+    disabled?: boolean;
+    nested?: boolean;
+    borders?: boolean;
+    iconSet?: AccordionIconSetType;
+    /**
+     * @deprecated collapsible prop has been deprecated, please use disabled boolean if you want to disable whole
+     * Accordion
+     */
+    collapsible?: string | undefined;
+}
+export {};
+//# sourceMappingURL=Accordion.types.d.ts.map