@redneckz/wildless-cms-uni-blocks 0.2.76 → 0.2.79

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.d.ts

@@ -0,0 +1,2 @@
+import type { InputRangeProps } from './InputRangeProps';
+export declare const InputRange: (props: import("@redneckz/uni-jsx").PropsWithChildren<InputRangeProps, any>, context?: any) => any;

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

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@redneckz/uni-jsx/jsx-runtime";
+import { JSX } from '@redneckz/uni-jsx';
+export const InputRange = JSX(({ className, title, items = [], min = 1, max = 100, step = 1, value = min, onChange }) => {
+    const handleChange = (value) => {
+        if (!onChange)
+            return;
+        const sanitizedValue = Number(value.replace(/\D/g, ''));
+        onChange(sanitizedValue);
+    };
+    const inputStyle = {
+        backgroundSize: `${(value * 100) / max - 1}% 100%`,
+    };
+    const handleBlur = () => {
+        if (!onChange)
+            return;
+        if (value < min)
+            onChange(min);
+        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)))) })] }));
+});
+//# sourceMappingURL=InputRange.js.map

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

@@ -0,0 +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"}

package/lib/ui-kit/InputRange/InputRangeProps.d.ts

@@ -0,0 +1,10 @@
+export interface InputRangeProps {
+    className?: string;
+    items?: string[];
+    min?: number;
+    max?: number;
+    step?: number;
+    value?: number;
+    title?: string;
+    onChange?: (value: number) => void;
+}

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=InputRangeProps.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InputRangeProps.js","sourceRoot":"","sources":["../../../src/ui-kit/InputRange/InputRangeProps.ts"],"names":[],"mappings":""}

package/lib/utils/clamp.d.ts

@@ -0,0 +1 @@
+export declare const clamp: (value: number, min: number, max: number) => number;

package/lib/utils/clamp.js

@@ -0,0 +1,2 @@
+export const clamp = (value, min, max) => Math.max(min, Math.min(value, max));
+//# sourceMappingURL=clamp.js.map

package/lib/utils/clamp.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"clamp.js","sourceRoot":"","sources":["../../src/utils/clamp.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,KAAa,EAAE,GAAW,EAAE,GAAW,EAAE,EAAE,CAC/D,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.2.76",
+  "version": "0.2.79",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",
@@ -84,8 +84,8 @@
     "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",

package/src/common.css

@@ -98,4 +98,44 @@
     scroll-snap-stop: always;
     width: 100%;
   }
+
+  input[type='range'].slider {
+    -webkit-appearance: none;
+    height: 4px;
+    background: transparent;
+    border-radius: 5px;
+    background-image: linear-gradient(#42ab44, #42ab44);
+    background-repeat: no-repeat;
+  }
+
+  input[type='range'].slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    height: 18px;
+    width: 18px;
+    border-radius: 50%;
+    background: #fff;
+    cursor: pointer;
+    box-shadow: none;
+    border: 3px solid #42ab44;
+  }
+
+  input[type='range'].slider::-moz-range-thumb {
+    height: 12px;
+    width: 12px;
+    border-radius: 50%;
+    background: #fff;
+    cursor: pointer;
+    box-shadow: none;
+    border: 3px solid #42ab44;
+  }
+
+  input[type='range'].slider::-ms-thumb {
+    height: 18px;
+    width: 18px;
+    border-radius: 50%;
+    background: #fff;
+    cursor: pointer;
+    box-shadow: none;
+    border: 3px solid #42ab44;
+  }
 }

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

@@ -0,0 +1,4 @@
+import { CreditCalculator } from './CreditCalculator';
+import { context } from '../../setup-fixture';
+
+export default <CreditCalculator context={context} />;

package/src/components/CreditCalculator/CreditCalculator.tsx

@@ -0,0 +1,106 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { UniBlockProps } from '../../types';
+import { Button } from '../../ui-kit/Button/Button';
+import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
+import { InputRange } from '../../ui-kit/InputRange/InputRange';
+import { clamp } from '../../utils/clamp';
+
+export interface CreditCalculatorProps extends UniBlockProps {}
+
+const borderStyle = 'border-solid border-3 border-primary-main rounded-md';
+
+const MIN_MONEY = 50000;
+const MAX_MONEY = 3000000;
+const STEP_MONEY = 1000;
+
+const CREDIT_TERM_YEARS = [2, 3, 4, 5, 6, 7];
+
+const MIN_MONTHS = 1;
+const MAX_MONTHS = 84;
+const STEP_MONTHS = 1;
+
+const MONTHS_IN_YEAR = 12;
+
+export const CreditCalculator = JSX<CreditCalculatorProps>(({ context, className }) => {
+  const [moneyValue, setMoneyValue] = context.useState(350000);
+  const [monthsValue, setMonthsValue] = context.useState(12);
+  const [isAnnuityChecked, setIsAnnuityChecked] = context.useState(true);
+  const [isInsuranceChecked, setIsInsuranceChecked] = context.useState(true);
+
+  const handleButtonClick = (value: number) => {
+    setMonthsValue(clamp(value * MONTHS_IN_YEAR, MIN_MONTHS, MAX_MONTHS));
+  };
+
+  return (
+    <section className={`font-sans text-primary-text bg-white p-4 ${className}`}>
+      <div className={`box-border p-12 flex flex-col justify-between ${borderStyle}`}>
+        <div className="flex justify-between">
+          <div className="grow mr-11">
+            <InputRange
+              title="Желаемая сумма кредита, ₽"
+              items={['От 50 000 рублей', 'До 3 000 000 рублей']}
+              min={MIN_MONEY}
+              max={MAX_MONEY}
+              step={STEP_MONEY}
+              value={moneyValue}
+              onChange={setMoneyValue}
+            />
+            <InputRange
+              title="Срок кредита, месяцев"
+              items={['Или выберите из предложенных вариантов ниже']}
+              min={MIN_MONTHS}
+              max={MAX_MONTHS}
+              step={STEP_MONTHS}
+              value={monthsValue}
+              onChange={setMonthsValue}
+            />
+            <div className="flex mb-7">
+              {CREDIT_TERM_YEARS.map((number, i) => renderButton(number, i, handleButtonClick))}
+            </div>
+            <Checkbox
+              text="Получаю пенсию на карту Россельхозбанка"
+              checked={isAnnuityChecked}
+              onChange={setIsAnnuityChecked}
+            />
+            <Checkbox
+              className="mb-4"
+              text="Комплексная страховая защита"
+              checked={isInsuranceChecked}
+              onChange={setIsInsuranceChecked}
+            />
+          </div>
+          <div className="p-9 bg-primary-main rounded-md text-white">
+            <div className="text-base mb-5">Наше предложение</div>
+            <div className="text-sm opacity-60">Ежемесячный платёж</div>
+            <div className="text-lg mb-3">26 827 ₽</div>
+            <div className="text-sm opacity-60">Ставка</div>
+            <div className="text-lg">16,9 %</div>
+          </div>
+        </div>
+        <div className="flex items-center">
+          <Button className="mr-3" text="Отправить заявку" version="primary" href="#" />
+          <div
+            className="w-80 text-xxs leading-4 text-secondary-text"
+            aria-label="Соглашение на обработку персональных данных"
+          >
+            Отправляя заявку, вы соглашаетесь на обработку персональных данных соответственно
+            требованиям ФЗ «О персональных данных»
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+});
+
+const renderButton = (number: number, i: number, handleClick: (number: number) => void) => (
+  <div
+    key={String(i)}
+    className="bg-secondary-light rounded-3xl h-10 w-[75px] box-border mr-2 flex items-center justify-center cursor-pointer"
+    role="button"
+    onClick={() => handleClick(number)}
+  >
+    <span className="font-medium text-sm">
+      {number} {number > 4 ? 'лет' : 'года'}
+    </span>
+  </div>
+);

package/src/content-page-repository/ContentPageRepository.ts

@@ -5,6 +5,7 @@ import type { ContentPageDef } from '../types';
 import type { TransformationOptions } from './TransformationOptions';
 import { transformContentPage } from './transformContentPage';
 
+const INDEX_PAGE_SLUG = 'index';
 const find = util.promisify(glob);
 
 export function ContentPageRepository({
@@ -16,6 +17,11 @@ export function ContentPageRepository({
     return await Promise.all(pagePaths.map(readPage));
   }
 
+  async function getSecondaryContentPages() {
+    const pages = await getAllContentPages();
+    return pages.filter((content) => content.slug !== INDEX_PAGE_SLUG);
+  }
+
   async function getContentPageBySlug(slug: string): Promise<ContentPageDef | undefined> {
     const pages = await getAllContentPages();
     return pages.find((content) => content.slug === slug);
@@ -26,6 +32,14 @@ export function ContentPageRepository({
     return page && toMobilePage(page);
   }
 
+  async function getIndexPage() {
+    return await getContentPageBySlug(INDEX_PAGE_SLUG);
+  }
+
+  async function getIndexMobilePage() {
+    return await getMobilePageBySlug(INDEX_PAGE_SLUG);
+  }
+
   const cache: Record<string, ContentPageDef> = {};
   async function readPage(filePath: string): Promise<ContentPageDef> {
     if (!(filePath in cache)) {
@@ -41,5 +55,8 @@ export function ContentPageRepository({
     getAllContentPages,
     getContentPageBySlug,
     getMobilePageBySlug,
+    getSecondaryContentPages,
+    getIndexPage,
+    getIndexMobilePage,
   };
 }

package/src/icons/DocIcon.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M9.809 2.759A2.813 2.813 0 0 1 11.742 2h5.524C18.776 2 20 3.16 20 4.59v13.82c0 1.43-1.224 2.59-2.734 2.59H6.734C5.224 21 4 19.84 4 18.41v-5.95c0-.477.408-.864.911-.864.504 0 .912.387.912.864v5.95c0 .476.408.863.911.863h10.532c.503 0 .911-.387.911-.864V4.591c0-.477-.408-.864-.911-.864h-5.367v4.03c0 .955-.816 1.728-1.823 1.728H4.911c-.368 0-.7-.21-.842-.533a.83.83 0 0 1 .198-.941l5.542-5.252Zm.267 2.19L7.112 7.758h2.964v-2.81Z" fill="#1C1C1C" />
+  <rect x="8" y="12" width="8" height="2" rx="1" fill="#42AB44" />
+  <rect x="8" y="15" width="5" height="2" rx="1" fill="#42AB44" />
+</svg>

package/src/icons/MinusIcon.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15 12h5M4 12h7" stroke="#42AB44" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/src/icons/PlusIcon.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 18V6M15 12h5M4 12h7M12 20V4" stroke="#42AB44" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/src/ui-kit/Checkbox/Checkbox.tsx

@@ -0,0 +1,36 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { CheckboxProps } from './CheckboxProps';
+import { SVG } from '../SVG';
+
+const CHECK_PATHS = [
+  {
+    d: 'M10.207.793a1 1 0 0 1 0 1.414l-6 6a1 1 0 0 1-1.414 0l-2.5-2.5a1 1 0 0 1 1.414-1.414L3.5 6.086 8.793.793a1 1 0 0 1 1.414 0Z',
+    fillRule: 'evenodd',
+    clipRule: 'evenodd',
+    fill: 'white',
+  },
+];
+
+export const Checkbox = JSX<CheckboxProps>(({ text, checked, onChange, className }) => (
+  <div className={className}>
+    <label className="flex items-center cursor-pointer relative">
+      <input
+        className={`peer appearance-none w-5 h-5 border-solid border rounded border-black checked:bg-primary-main checked:border-primary-main`}
+        type="checkbox"
+        onChange={(e) => {
+          onChange(e.target.checked);
+        }}
+        checked={checked}
+      />
+      <SVG
+        paths={CHECK_PATHS}
+        className="hidden absolute left-2 ml-px peer-checked:block"
+        width="11"
+        height="9"
+        fill="white"
+        viewBox="0 0 11 9"
+      />
+      {text ? <span className="font-sans ml-2 text-sm cursor-pointer">{text}</span> : null}
+    </label>
+  </div>
+));

package/src/ui-kit/Checkbox/CheckboxProps.ts

@@ -0,0 +1,6 @@
+export interface CheckboxProps {
+  text?: string;
+  checked: boolean;
+  onChange: (value: boolean) => void;
+  className?: string;
+}

package/src/ui-kit/Icon/IconProps.ts

@@ -19,6 +19,9 @@ export enum IconMap {
   'TelegramIcon',
   'VKIcon',
   'GlassIcon',
+  'DocIcon',
+  'PlusIcon',
+  'MinusIcon',
 }
 
 export type IconName = keyof typeof IconMap;