@redneckz/wildless-cms-uni-blocks 0.2.77 → 0.2.81

package/lib/ui-kit/Button/Button.fixture.d.ts

@@ -0,0 +1,13 @@
+import '../../setup-fixture';
+declare const _default: {
+    all: any;
+    'primary (Private clients)': any;
+    'secondary (Private clients)': any;
+    'primary (Business clients)': any;
+    'secondary (Business clients)': any;
+    'primary (Ecosystem own)': any;
+    'secondary (Ecosystem own)': any;
+    'primary (disabled)': any;
+    'secondary (disabled)': any;
+};
+export default _default;

package/lib/ui-kit/Button/LikeButton.fixture.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+    default: any;
+    rotate: any;
+};
+export default _default;

package/lib/ui-kit/HeaderItem/HeaderItem.fixture.d.ts

@@ -0,0 +1,6 @@
+import '../../setup-fixture';
+declare const _default: {
+    default: any;
+    active: any;
+};
+export default _default;

package/lib/ui-kit/Icon/Icon.fixture.d.ts

@@ -0,0 +1,5 @@
+import '../../setup-fixture';
+declare const _default: {
+    all: any;
+};
+export default _default;

package/lib/ui-kit/Icon/IconProps.d.ts

@@ -18,7 +18,10 @@ export declare enum IconMap {
     'SignDocsIcon' = 16,
     'TelegramIcon' = 17,
     'VKIcon' = 18,
-    'GlassIcon' = 19
+    'GlassIcon' = 19,
+    'DocIcon' = 20,
+    'PlusIcon' = 21,
+    'MinusIcon' = 22
 }
 export declare type IconName = keyof typeof IconMap;
 export interface IconProps {

package/lib/ui-kit/Icon/IconProps.js

@@ -20,5 +20,8 @@ export var IconMap;
     IconMap[IconMap["TelegramIcon"] = 17] = "TelegramIcon";
     IconMap[IconMap["VKIcon"] = 18] = "VKIcon";
     IconMap[IconMap["GlassIcon"] = 19] = "GlassIcon";
+    IconMap[IconMap["DocIcon"] = 20] = "DocIcon";
+    IconMap[IconMap["PlusIcon"] = 21] = "PlusIcon";
+    IconMap[IconMap["MinusIcon"] = 22] = "MinusIcon";
 })(IconMap || (IconMap = {}));
 //# sourceMappingURL=IconProps.js.map

package/lib/ui-kit/Icon/IconProps.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconProps.js","sourceRoot":"","sources":["../../../src/ui-kit/Icon/IconProps.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,OAqBX;AArBD,WAAY,OAAO;IACjB,+DAAmB,CAAA;IACnB,+CAAW,CAAA;IACX,qDAAc,CAAA;IACd,+CAAW,CAAA;IACX,mEAAqB,CAAA;IACrB,iDAAY,CAAA;IACZ,2DAAiB,CAAA;IACjB,6CAAU,CAAA;IACV,6CAAU,CAAA;IACV,+CAAW,CAAA;IACX,kDAAY,CAAA;IACZ,0CAAQ,CAAA;IACR,sDAAc,CAAA;IACd,sEAAsB,CAAA;IACtB,0DAAgB,CAAA;IAChB,oDAAa,CAAA;IACb,sDAAc,CAAA;IACd,sDAAc,CAAA;IACd,0CAAQ,CAAA;IACR,gDAAW,CAAA;AACb,CAAC,EArBW,OAAO,KAAP,OAAO,QAqBlB"}
+{"version":3,"file":"IconProps.js","sourceRoot":"","sources":["../../../src/ui-kit/Icon/IconProps.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,OAwBX;AAxBD,WAAY,OAAO;IACjB,+DAAmB,CAAA;IACnB,+CAAW,CAAA;IACX,qDAAc,CAAA;IACd,+CAAW,CAAA;IACX,mEAAqB,CAAA;IACrB,iDAAY,CAAA;IACZ,2DAAiB,CAAA;IACjB,6CAAU,CAAA;IACV,6CAAU,CAAA;IACV,+CAAW,CAAA;IACX,kDAAY,CAAA;IACZ,0CAAQ,CAAA;IACR,sDAAc,CAAA;IACd,sEAAsB,CAAA;IACtB,0DAAgB,CAAA;IAChB,oDAAa,CAAA;IACb,sDAAc,CAAA;IACd,sDAAc,CAAA;IACd,0CAAQ,CAAA;IACR,gDAAW,CAAA;IACX,4CAAS,CAAA;IACT,8CAAU,CAAA;IACV,gDAAW,CAAA;AACb,CAAC,EAxBW,OAAO,KAAP,OAAO,QAwBlB"}

package/lib/ui-kit/InputRange/InputRange.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@redneckz/uni-jsx/jsx-runtime";
 import { JSX } from '@redneckz/uni-jsx';
+import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers.js';
 export const InputRange = JSX(({ className, title, items = [], min = 1, max = 100, step = 1, value = min, onChange }) => {
     const handleChange = (value) => {
         if (!onChange)
@@ -8,7 +9,7 @@ export const InputRange = JSX(({ className, title, items = [], min = 1, max = 10
         onChange(sanitizedValue);
     };
     const inputStyle = {
-        backgroundSize: `${(value * 100) / max - 1}% 100%`,
+        backgroundSize: `${(((value - min) * 100) / (max - min)).toFixed(2)}% 100%`,
     };
     const handleBlur = () => {
         if (!onChange)
@@ -18,6 +19,6 @@ export const InputRange = JSX(({ className, title, items = [], min = 1, max = 10
         if (value > max)
             onChange(max);
     };
-    return (_jsxs("div", { className: className, children: [_jsxs("div", { className: "relative", children: [title ? (_jsx("span", { className: "absolute text-xs text-secondary-text top-1 mt-0.5 pl-4 ml-0.5", children: title })) : null, _jsx("input", { className: `m-0 font-sans text-sm w-full h-12 border-2 border-solid border-main-divider rounded-md outline-none p-0 pl-4 m-0 box-border text-primary-text ${title ? 'pt-4' : ''}`, value: String(value).replace(/\B(?=(\d{3})+(?!\d))/g, ' '), onChange: (e) => handleChange(e.target.value), onBlur: handleBlur }), _jsx("div", { className: "absolute inset-x-0 mt-0.5 top-8 px-4", children: _jsx("input", { className: "box-border w-full m-0 cursor-pointer slider", type: "range", min: min, max: max, step: step, value: value, onChange: (e) => handleChange(e.target.value), style: inputStyle }) })] }), _jsx("div", { className: "flex justify-between mt-3 mb-4", children: items.map((item, i) => (_jsx("span", { className: "text-xs text-secondary-text pl-4", children: item }, String(i)))) })] }));
+    return (_jsxs("div", { className: className, children: [_jsxs("div", { className: "relative", children: [title ? (_jsx("span", { className: "absolute text-xs text-secondary-text top-1 mt-0.5 pl-4 ml-0.5", children: title })) : null, _jsx("input", { className: `m-0 font-sans text-sm w-full h-12 border-2 border-solid border-main-divider rounded-md outline-none p-0 pl-4 m-0 box-border text-primary-text ${title ? 'pt-4' : ''}`, value: addSpacesBetweenNumbers(value), onChange: (e) => handleChange(e.target.value), onBlur: handleBlur }), _jsx("div", { className: "absolute inset-x-0 mt-0.5 top-8 px-4", children: _jsx("input", { className: "box-border w-full m-0 cursor-pointer slider", type: "range", min: min, max: max, step: step, value: value, onChange: (e) => handleChange(e.target.value), style: inputStyle }) })] }), _jsx("div", { className: "flex justify-between mt-3 mb-4", children: items.map((item, i) => (_jsx("span", { className: "text-xs text-secondary-text pl-4", children: item }, String(i)))) })] }));
 });
 //# sourceMappingURL=InputRange.js.map

package/lib/ui-kit/InputRange/InputRange.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputRange.js","sourceRoot":"","sources":["../../../src/ui-kit/InputRange/InputRange.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGxC,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAC3B,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,GAAG,EAAE,EAAE,GAAG,GAAG,CAAC,EAAE,GAAG,GAAG,GAAG,EAAE,IAAI,GAAG,CAAC,EAAE,KAAK,GAAG,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE;IACxF,MAAM,YAAY,GAAG,CAAC,KAAa,EAAE,EAAE;QACrC,IAAI,CAAC,QAAQ;YAAE,OAAO;QAEtB,MAAM,cAAc,GAAG,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC;QACxD,QAAQ,CAAC,cAAc,CAAC,CAAC;IAC3B,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG;QACjB,cAAc,EAAE,GAAG,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,QAAQ;KACnD,CAAC;IAEF,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,IAAI,CAAC,QAAQ;YAAE,OAAO;QAEtB,IAAI,KAAK,GAAG,GAAG;YAAE,QAAQ,CAAC,GAAG,CAAC,CAAC;QAC/B,IAAI,KAAK,GAAG,GAAG;YAAE,QAAQ,CAAC,GAAG,CAAC,CAAC;IACjC,CAAC,CAAC;IAEF,OAAO,CACL,eAAK,SAAS,EAAE,SAAS,aACvB,eAAK,SAAS,EAAC,UAAU,aACtB,KAAK,CAAC,CAAC,CAAC,CACP,eAAM,SAAS,EAAC,+DAA+D,YAC5E,KAAK,GACD,CACR,CAAC,CAAC,CAAC,IAAI,EACR,gBACE,SAAS,EAAE,iJACT,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EACnB,EAAE,EACF,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,uBAAuB,EAAE,GAAG,CAAC,EAC1D,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAC7C,MAAM,EAAE,UAAU,GAClB,EACF,cAAK,SAAS,EAAC,sCAAsC,YACnD,gBACE,SAAS,EAAC,6CAA6C,EACvD,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAC7C,KAAK,EAAE,UAAU,GACjB,GACE,IACF,EACN,cAAK,SAAS,EAAC,gCAAgC,YAC5C,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC,CACtB,eAAsB,SAAS,EAAC,kCAAkC,YAC/D,IAAI,IADI,MAAM,CAAC,CAAC,CAAC,CAEb,CACR,CAAC,GACE,IACF,CACP,CAAC;AACJ,CAAC,CACF,CAAC"}
+{"version":3,"file":"InputRange.js","sourceRoot":"","sources":["../../../src/ui-kit/InputRange/InputRange.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,uBAAuB,EAAE,MAAM,qCAAqC,CAAC;AAG9E,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAC3B,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,GAAG,EAAE,EAAE,GAAG,GAAG,CAAC,EAAE,GAAG,GAAG,GAAG,EAAE,IAAI,GAAG,CAAC,EAAE,KAAK,GAAG,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE;IACxF,MAAM,YAAY,GAAG,CAAC,KAAa,EAAE,EAAE;QACrC,IAAI,CAAC,QAAQ;YAAE,OAAO;QAEtB,MAAM,cAAc,GAAG,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC;QACxD,QAAQ,CAAC,cAAc,CAAC,CAAC;IAC3B,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG;QACjB,cAAc,EAAE,GAAG,CAAC,CAAC,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ;KAC5E,CAAC;IAEF,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,IAAI,CAAC,QAAQ;YAAE,OAAO;QAEtB,IAAI,KAAK,GAAG,GAAG;YAAE,QAAQ,CAAC,GAAG,CAAC,CAAC;QAC/B,IAAI,KAAK,GAAG,GAAG;YAAE,QAAQ,CAAC,GAAG,CAAC,CAAC;IACjC,CAAC,CAAC;IAEF,OAAO,CACL,eAAK,SAAS,EAAE,SAAS,aACvB,eAAK,SAAS,EAAC,UAAU,aACtB,KAAK,CAAC,CAAC,CAAC,CACP,eAAM,SAAS,EAAC,+DAA+D,YAC5E,KAAK,GACD,CACR,CAAC,CAAC,CAAC,IAAI,EACR,gBACE,SAAS,EAAE,iJACT,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EACnB,EAAE,EACF,KAAK,EAAE,uBAAuB,CAAC,KAAK,CAAC,EACrC,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAC7C,MAAM,EAAE,UAAU,GAClB,EACF,cAAK,SAAS,EAAC,sCAAsC,YACnD,gBACE,SAAS,EAAC,6CAA6C,EACvD,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAC7C,KAAK,EAAE,UAAU,GACjB,GACE,IACF,EACN,cAAK,SAAS,EAAC,gCAAgC,YAC5C,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC,CACtB,eAAsB,SAAS,EAAC,kCAAkC,YAC/D,IAAI,IADI,MAAM,CAAC,CAAC,CAAC,CAEb,CACR,CAAC,GACE,IACF,CACP,CAAC;AACJ,CAAC,CACF,CAAC"}

package/lib/ui-kit/Logo/Logo.fixture.d.ts

@@ -0,0 +1,3 @@
+import '../../setup-fixture';
+declare const _default: any;
+export default _default;

package/lib/ui-kit/TopItem/TopItem.fixture.d.ts

@@ -0,0 +1,6 @@
+import '../../setup-fixture';
+declare const _default: {
+    default: any;
+    active: any;
+};
+export default _default;

package/lib/utils/addSpacesBetweenNumbers.d.ts

@@ -0,0 +1 @@
+export declare const addSpacesBetweenNumbers: (number: number) => string;

package/lib/utils/addSpacesBetweenNumbers.js

@@ -0,0 +1,2 @@
+export const addSpacesBetweenNumbers = (number) => new Intl.NumberFormat('ru-RU', { maximumSignificantDigits: 3 }).format(number);
+//# sourceMappingURL=addSpacesBetweenNumbers.js.map

package/lib/utils/addSpacesBetweenNumbers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"addSpacesBetweenNumbers.js","sourceRoot":"","sources":["../../src/utils/addSpacesBetweenNumbers.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,MAAc,EAAE,EAAE,CACxD,IAAI,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,EAAE,wBAAwB,EAAE,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.2.77",
+  "version": "0.2.81",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",
@@ -79,13 +79,13 @@
   "scripts": {
     "start": "npm run cosmos",
     "build": "npm run build:lib && npm run build:commonjs && npm run bundle && npm run build:style && npm run build:icons",
-    "postbuild": "npm run size",
+    "postbuild": "npm run size && npm run cosmos:export && copyfiles --up 1 \"./docs/**/*\" ./build",
     "build:lib": "rimraf ./lib && tsc --build --verbose",
     "postbuild:lib": "replace-in-file --configFile=replace-config.lib.cjs --verbose",
     "build:commonjs": "rimraf ./dist && tsc --module commonjs --noImplicitUseStrict --outDir dist",
     "bundle": "rimraf ./bundle && rollup -c && npm run build:schema",
-    "build:schema": "ts-json-schema-generator --path './src/**/*Content.ts' --no-type-check --type '*' -o ./bundle/blocks.schema.json",
-    "build:style": "postcss './src/**/*.css' --env production --dir ./lib",
+    "build:schema": "ts-json-schema-generator --path ./src/**/*Content.ts --no-type-check -o ./bundle/blocks.schema.json",
+    "build:style": "postcss ./src/**/*.css --env production --dir ./lib",
     "build:icons": "svgo -f ./src/icons -o ./cosmos-static/icons",
     "size": "size-limit",
     "test": "jest --coverage",
@@ -121,6 +121,7 @@
     "@size-limit/file": "^7.0.8",
     "@types/jest": "^28.1.1",
     "autoprefixer": "^10.4.7",
+    "copyfiles": "^2.4.1",
     "css-loader": "^6.7.1",
     "cssnano": "^5.1.11",
     "html-webpack-plugin": "^5.5.0",

package/src/ProjectSettings.ts

@@ -6,6 +6,7 @@ export interface ProjectSettings {
   ENABLE_ASSIST?: boolean;
   SITEMAP?: string;
   CDN?: string; // Should ends with "/"
+  CREDIT_CALCULATOR?: string;
 }
 
 export const projectSettings = new (class implements ProjectSettings {

package/src/components/Accordion/Accordion.fixture.tsx

@@ -0,0 +1,62 @@
+import { context } from '../../setup-fixture';
+import type { AccordionProps } from './Accordion';
+import type { TextBlockContent } from '../TextBlock/TextBlockContent';
+import { Accordion } from './Accordion';
+
+const TEXT_BLOCK: TextBlockContent = {
+  title: 'Title',
+  description:
+    'Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque minima odio soluta cupiditate pariatur, labore molestias quas necessitatibus nesciunt in praesentium accusamus provident sequi maiores autem. Voluptas quam neque iste?',
+  blockVersion: 'secondary-light',
+  iconVersion: 'small',
+};
+
+const propsTextBlock: AccordionProps = {
+  title: 'Accordion title',
+  context,
+  accordionItems: [
+    {
+      label: 'Accordion label 1',
+      blocks: [
+        {
+          type: 'TextBlock',
+          data: TEXT_BLOCK,
+        },
+        {
+          type: 'TextBlock',
+          data: TEXT_BLOCK,
+        },
+      ],
+    },
+    {
+      label: 'Accordion label 2',
+      blocks: [
+        {
+          type: 'TextBlock',
+          data: TEXT_BLOCK,
+        },
+        {
+          type: 'TextBlock',
+          data: TEXT_BLOCK,
+        },
+      ],
+    },
+    {
+      label: 'Accordion label 3',
+      blocks: [
+        {
+          type: 'TextBlock',
+          data: TEXT_BLOCK,
+        },
+        {
+          type: 'TextBlock',
+          data: TEXT_BLOCK,
+        },
+      ],
+    },
+  ],
+};
+
+export default {
+  'with text block': <Accordion {...propsTextBlock} />,
+};

package/src/components/Accordion/Accordion.tsx

@@ -0,0 +1,22 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
+import type { AccordionContent } from './AccordionContent';
+import { AccordionItem } from './AccordionItem';
+import { Title } from '../../ui-kit/Title/Title';
+
+export interface AccordionProps extends AccordionContent, UniBlockProps {}
+
+export const Accordion = JSX<AccordionProps>(({ title, accordionItems, context, className }) => {
+  return (
+    <section className={`p-[50px] font-sans bg-white text-primary-text ${className || ''}`}>
+      {title ? <Title className="m-0 mb-2.5">{title}</Title> : null}
+      {accordionItems?.length ? (
+        <ul className="list-none m-0 p-0">
+          {accordionItems.map((item, i) => (
+            <AccordionItem key={`AccordionItem${i}`} {...item} context={context} />
+          ))}
+        </ul>
+      ) : null}
+    </section>
+  );
+});

package/src/components/Accordion/AccordionBlocks.tsx

@@ -0,0 +1,7 @@
+import { TextBlock } from '../TextBlock/TextBlock';
+
+const AccordionBlocks = {
+  TextBlock,
+};
+
+export default AccordionBlocks;

package/src/components/Accordion/AccordionContent.ts

@@ -0,0 +1,18 @@
+import type { TextBlockContent } from '../TextBlock/TextBlockContent';
+
+export interface AccordionContent {
+  title?: string;
+  accordionItems?: AccordionItemContent[];
+}
+
+export interface AccordionItemContent {
+  label?: string;
+  blocks?: AccordionBlockContent[];
+}
+
+export type AccordionBlockContent = {
+  type?: string;
+  data?: AccordionDataContent;
+};
+
+export type AccordionDataContent = TextBlockContent;

package/src/components/Accordion/AccordionItem.tsx

@@ -0,0 +1,68 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
+import type { AccordionItemContent, AccordionBlockContent } from './AccordionContent';
+import { Icon } from '../../ui-kit/Icon/Icon';
+import AccordionBlocks from './AccordionBlocks';
+
+export interface AccordionItemProps extends AccordionItemContent, UniBlockProps {}
+
+export const AccordionItem = JSX<AccordionItemProps>(({ label, blocks, context }) => {
+  const [isActive, setIsActive] = context.useState(false);
+  const hasContent = blocks?.length;
+  const icon = isActive ? 'MinusIcon' : 'PlusIcon';
+
+  const handleToggle = (e) => {
+    if (!hasContent) return null;
+    setIsActive(!isActive);
+    const contentBlock = getContentBlock(e);
+    contentBlock.style.maxHeight = contentBlock.style.maxHeight
+      ? null
+      : `${contentBlock.scrollHeight}px`;
+  };
+
+  return (
+    <li className="border-0 border-b border-solid border-main-divider last:border-b-0">
+      <button
+        className={`border-none bg-transparent px-0 py-5 flex justify-between text-left w-full font-sans text-primary-text
+        ${hasContent ? 'group cursor-pointer' : ''}`}
+        onClick={handleToggle}
+      >
+        <span
+          className={`m-0 text-xl pr-2.5 font-medium ${
+            hasContent ? 'group-hover:text-primary-main' : ''
+          }`}
+        >
+          {label}
+        </span>
+        {hasContent ? <Icon name={icon} width="24" height="24" /> : null}
+      </button>
+      {hasContent ? (
+        <div
+          className={`${
+            isActive ? 'pb-5' : ''
+          } text-sm transition-all duration-300 max-h-0 overflow-hidden group-last:last:pb-0 `}
+        >
+          {blocks?.length ? blocks.map(renderComponent) : null}
+        </div>
+      ) : null}
+    </li>
+  );
+});
+
+// TODO: draft, for dynamic rendering of components
+
+const renderComponent = (block: AccordionBlockContent, i: number) => {
+  if (block.type && block.data && !AccordionBlocks.hasOwnProperty(block.type)) {
+    return null;
+  }
+
+  const AccordionBlock = block.type && AccordionBlocks[block.type];
+  return (
+    <div className="mb-5 last:mb-0" key={`component${i}`}>
+      <AccordionBlock {...block.data} />
+    </div>
+  );
+};
+
+const getContentBlock = (e) =>
+  e.target.tagName === 'BUTTON' ? e.target.nextSibling : e.target.parentNode.nextSibling;

package/src/components/Blocks.ts

@@ -14,6 +14,7 @@ import { StepsBlock } from './StepsBlock/StepsBlock';
 import { TextBlock } from './TextBlock/TextBlock';
 import { Tile } from './Tile/Tile';
 import { ComparisonTable } from './ComparisonTable/ComparisonTable';
+import { Accordion } from './Accordion/Accordion';
 
 export const Blocks = {
   Header,
@@ -32,4 +33,5 @@ export const Blocks = {
   Gallery,
   MiniGallery,
   ComparisonTable,
+  Accordion,
 };

package/src/components/ContentPage/ContentPage.page.json

@@ -1282,6 +1282,84 @@
         ]
       }
     },
+    {
+      "type": "Accordion",
+      "style": ["col-span-12"],
+      "content": {
+        "title": "Accordion title",
+        "accordionItems": [
+          {
+            "label": "Accordion label 1",
+            "blocks": [
+              {
+                "type": "TextBlock",
+                "data": {
+                  "title": "Title",
+                  "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque minima odio soluta cupiditate pariatur, labore molestias quas necessitatibus nesciunt in praesentium accusamus provident sequi maiores autem. Voluptas quam neque iste?",
+                  "blockVersion": "secondary-light",
+                  "iconVersion": "small"
+                }
+              },
+              {
+                "type": "TextBlock",
+                "data": {
+                  "title": "Title",
+                  "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque minima odio soluta cupiditate pariatur, labore molestias quas necessitatibus nesciunt in praesentium accusamus provident sequi maiores autem. Voluptas quam neque iste?",
+                  "blockVersion": "secondary-light",
+                  "iconVersion": "small"
+                }
+              }
+            ]
+          },
+          {
+            "label": "Accordion label 2",
+            "blocks": [
+              {
+                "type": "TextBlock",
+                "data": {
+                  "title": "Title",
+                  "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque minima odio soluta cupiditate pariatur, labore molestias quas necessitatibus nesciunt in praesentium accusamus provident sequi maiores autem. Voluptas quam neque iste?",
+                  "blockVersion": "secondary-light",
+                  "iconVersion": "small"
+                }
+              },
+              {
+                "type": "TextBlock",
+                "data": {
+                  "title": "Title",
+                  "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque minima odio soluta cupiditate pariatur, labore molestias quas necessitatibus nesciunt in praesentium accusamus provident sequi maiores autem. Voluptas quam neque iste?",
+                  "blockVersion": "secondary-light",
+                  "iconVersion": "small"
+                }
+              }
+            ]
+          },
+          {
+            "label": "Accordion label 3",
+            "blocks": [
+              {
+                "type": "TextBlock",
+                "data": {
+                  "title": "Title",
+                  "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque minima odio soluta cupiditate pariatur, labore molestias quas necessitatibus nesciunt in praesentium accusamus provident sequi maiores autem. Voluptas quam neque iste?",
+                  "blockVersion": "secondary-light",
+                  "iconVersion": "small"
+                }
+              },
+              {
+                "type": "TextBlock",
+                "data": {
+                  "title": "Title",
+                  "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque minima odio soluta cupiditate pariatur, labore molestias quas necessitatibus nesciunt in praesentium accusamus provident sequi maiores autem. Voluptas quam neque iste?",
+                  "blockVersion": "secondary-light",
+                  "iconVersion": "small"
+                }
+              }
+            ]
+          }
+        ]
+      }
+    },
     {
       "type": "Footer",
       "style": ["col-span-12"],

package/src/components/CreditCalculator/CreditCalculator.fixture.tsx

@@ -1,4 +1,4 @@
 import { CreditCalculator } from './CreditCalculator';
 import { context } from '../../setup-fixture';
 
-export default <CreditCalculator context={context} />;
+export default <CreditCalculator context={context} directoryName="credit-calculator-data" />;