@redneckz/wildless-cms-uni-blocks 0.2.115 → 0.2.116

package/mobile/src/icons/VisaIcon.svg

@@ -1 +1 @@
-<svg id="icon" width="52" height="17" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.37 16.407 21 .729h4.206l-2.632 15.678h-4.205ZM37.77 1.067C36.939.75 35.633.41 34 .41c-4.156 0-7.084 2.126-7.109 5.173-.023 2.253 2.09 3.51 3.686 4.26 1.638.768 2.188 1.258 2.18 1.944-.01 1.051-1.307 1.531-2.516 1.531-1.684 0-2.579-.238-3.96-.823l-.542-.249-.59 3.51c.982.437 2.799.816 4.685.836 4.422 0 7.293-2.102 7.325-5.356.016-1.784-1.105-3.14-3.532-4.26-1.47-.725-2.37-1.209-2.36-1.943 0-.652.762-1.349 2.408-1.349a7.655 7.655 0 0 1 3.149.601l.377.18.57-3.397ZM48.595.729h-3.25c-1.007 0-1.761.28-2.203 1.3l-6.248 14.367h4.418s.722-1.932.885-2.356l5.388.007c.126.549.511 2.35.511 2.35H52L48.595.728Zm-5.157 10.123c.348-.903 1.676-4.382 1.676-4.382-.025.041.345-.908.558-1.497l.284 1.352.974 4.527h-3.492ZM.054.73 0 1.055c1.663.409 3.148 1 4.448 1.737l3.733 13.589 4.45-.005L19.255.729h-4.456L10.68 11.42l-.439-2.172a7.126 7.126 0 0 0-.066-.202L8.744 2.053C8.489 1.06 7.75.764 6.837.729H.054Z" fill="#0E4595"/></svg>
+<svg title="Visa" width="52" height="17" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.37 16.407 21 .729h4.206l-2.632 15.678h-4.205ZM37.77 1.067C36.939.75 35.633.41 34 .41c-4.156 0-7.084 2.126-7.109 5.173-.023 2.253 2.09 3.51 3.686 4.26 1.638.768 2.188 1.258 2.18 1.944-.01 1.051-1.307 1.531-2.516 1.531-1.684 0-2.579-.238-3.96-.823l-.542-.249-.59 3.51c.982.437 2.799.816 4.685.836 4.422 0 7.293-2.102 7.325-5.356.016-1.784-1.105-3.14-3.532-4.26-1.47-.725-2.37-1.209-2.36-1.943 0-.652.762-1.349 2.408-1.349a7.655 7.655 0 0 1 3.149.601l.377.18.57-3.397ZM48.595.729h-3.25c-1.007 0-1.761.28-2.203 1.3l-6.248 14.367h4.418s.722-1.932.885-2.356l5.388.007c.126.549.511 2.35.511 2.35H52L48.595.728Zm-5.157 10.123c.348-.903 1.676-4.382 1.676-4.382-.025.041.345-.908.558-1.497l.284 1.352.974 4.527h-3.492ZM.054.73 0 1.055c1.663.409 3.148 1 4.448 1.737l3.733 13.589 4.45-.005L19.255.729h-4.456L10.68 11.42l-.439-2.172a7.126 7.126 0 0 0-.066-.202L8.744 2.053C8.489 1.06 7.75.764 6.837.729H.054Z" fill="#0E4595"/></svg>

package/mobile/src/icons/WalletAdd2Icon.svg

@@ -1 +1 @@
-<svg id="icon" width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.19 7.06C6.45 7.02 6.72 7 7 7h10c.26 0 .51.01.75.05C20.33 7.35 22 9.26 22 12v5c0 3-2 5-5 5H7.63c.31-.26.58-.58.79-.94.37-.6.58-1.31.58-2.06 0-2.21-1.79-4-4-4-1.2 0-2.27.53-3 1.36V12c0-.87.17-1.66.48-2.33" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M17.75 7.05C17.51 7.01 17.26 7 17 7H7c-.28 0-.55.02-.81.06.14-.28.34-.54.58-.78l3.25-3.26a3.525 3.525 0 0 1 4.96 0l1.75 1.77c.64.63.98 1.43 1.02 2.26Z" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M9 19c0 .75-.21 1.46-.58 2.06A3.97 3.97 0 0 1 5 23a3.97 3.97 0 0 1-3.42-1.94A3.92 3.92 0 0 1 1 19c0-2.21 1.79-4 4-4s4 1.79 4 4ZM6.49 18.98H3.51M5 17.52v2.99" stroke="#42AB44" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M22 12.5h-3c-1.1 0-2 .9-2 2s.9 2 2 2h3" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
+<svg title="Пополнение карты" width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.19 7.06C6.45 7.02 6.72 7 7 7h10c.26 0 .51.01.75.05C20.33 7.35 22 9.26 22 12v5c0 3-2 5-5 5H7.63c.31-.26.58-.58.79-.94.37-.6.58-1.31.58-2.06 0-2.21-1.79-4-4-4-1.2 0-2.27.53-3 1.36V12c0-.87.17-1.66.48-2.33" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M17.75 7.05C17.51 7.01 17.26 7 17 7H7c-.28 0-.55.02-.81.06.14-.28.34-.54.58-.78l3.25-3.26a3.525 3.525 0 0 1 4.96 0l1.75 1.77c.64.63.98 1.43 1.02 2.26Z" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M9 19c0 .75-.21 1.46-.58 2.06A3.97 3.97 0 0 1 5 23a3.97 3.97 0 0 1-3.42-1.94A3.92 3.92 0 0 1 1 19c0-2.21 1.79-4 4-4s4 1.79 4 4ZM6.49 18.98H3.51M5 17.52v2.99" stroke="#42AB44" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M22 12.5h-3c-1.1 0-2 .9-2 2s.9 2 2 2h3" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/mobile/src/icons/WalletAddIcon.svg

@@ -1 +1 @@
-<svg id="icon" width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 15.44h-5M12 13v5" stroke="#42AB44" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 22H8.1c-.24 0-.48-.02-.71-.05-3.18-.21-4.88-1.91-5.09-5.09-.03-.23-.05-.47-.05-.71V14.2c0-2.01 1.22-3.74 2.96-4.49.6-.25 1.24-.39 1.92-.39h9.76c.49 0 .97.07 1.41.2 2 .6 3.46 2.47 3.46 4.67v1.95c0 .2-.01.4-.02.6-.19 3.5-2.14 5.26-5.84 5.26" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="m12.9 2.52-.03.07-2.9 6.73H7.12c-.68 0-1.33.14-1.92.39l1.75-4.18.04-.1.07-.16c.02-.06.04-.12.07-.17 1.31-3.03 2.79-3.72 5.77-2.58Z" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M18.29 9.52c-.45-.14-.93-.2-1.41-.2H9.97l2.9-6.73.03-.07c.15.05.29.12.44.18l2.21.93c1.23.51 2.09 1.04 2.61 1.68.1.12.18.23.25.36.09.14.16.28.2.43.04.09.07.18.09.26.27.84.11 1.87-.41 3.16ZM6.95 5.53 5.2 9.71a4.894 4.894 0 0 0-2.96 4.49v-2.93c0-2.84 2.02-5.21 4.71-5.74Z" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M21.76 11.27v2.93c0-2.2-1.46-4.07-3.46-4.67.52-1.3.67-2.32.42-3.17-.02-.09-.05-.18-.09-.26 1.86.96 3.13 2.93 3.13 5.17Z" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
+<svg title="Кошелёк с плюсом" width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 15.44h-5M12 13v5" stroke="#42AB44" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 22H8.1c-.24 0-.48-.02-.71-.05-3.18-.21-4.88-1.91-5.09-5.09-.03-.23-.05-.47-.05-.71V14.2c0-2.01 1.22-3.74 2.96-4.49.6-.25 1.24-.39 1.92-.39h9.76c.49 0 .97.07 1.41.2 2 .6 3.46 2.47 3.46 4.67v1.95c0 .2-.01.4-.02.6-.19 3.5-2.14 5.26-5.84 5.26" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="m12.9 2.52-.03.07-2.9 6.73H7.12c-.68 0-1.33.14-1.92.39l1.75-4.18.04-.1.07-.16c.02-.06.04-.12.07-.17 1.31-3.03 2.79-3.72 5.77-2.58Z" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M18.29 9.52c-.45-.14-.93-.2-1.41-.2H9.97l2.9-6.73.03-.07c.15.05.29.12.44.18l2.21.93c1.23.51 2.09 1.04 2.61 1.68.1.12.18.23.25.36.09.14.16.28.2.43.04.09.07.18.09.26.27.84.11 1.87-.41 3.16ZM6.95 5.53 5.2 9.71a4.894 4.894 0 0 0-2.96 4.49v-2.93c0-2.84 2.02-5.21 4.71-5.74Z" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M21.76 11.27v2.93c0-2.2-1.46-4.07-3.46-4.67.52-1.3.67-2.32.42-3.17-.02-.09-.05-.18-.09-.26 1.86.96 3.13 2.93 3.13 5.17Z" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/mobile/src/icons/WalletIcon.svg

@@ -1 +1 @@
-<svg id="icon" width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.75 16.86v2.03c0 1.72-1.6 3.11-3.57 3.11-1.97 0-3.58-1.39-3.58-3.11v-2.03c0 1.72 1.6 2.94 3.58 2.94 1.97 0 3.57-1.23 3.57-2.94Z" stroke="#42AB44" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M10.75 14.11c0 .5-.14.96-.38 1.36-.59.97-1.8 1.58-3.2 1.58-1.4 0-2.61-.62-3.2-1.58-.24-.4-.38-.86-.38-1.36 0-.86.4-1.63 1.04-2.19.65-.57 1.54-.91 2.53-.91.99 0 1.88.35 2.53.91.66.55 1.06 1.33 1.06 2.19Z" stroke="#42AB44" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M10.75 14.11v2.75c0 1.72-1.6 2.94-3.57 2.94-1.97 0-3.58-1.23-3.58-2.94v-2.75C3.6 12.39 5.2 11 7.18 11c.99 0 1.88.35 2.53.91.64.56 1.04 1.34 1.04 2.2Z" stroke="#42AB44" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M22 10.97v2.06c0 .55-.44 1-1 1.02h-1.96c-1.08 0-2.07-.79-2.16-1.87-.06-.63.18-1.22.6-1.63.37-.38.88-.6 1.44-.6H21c.56.02 1 .47 1 1.02Z" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M16 3.5c.26 0 .51.01.75.05C19.33 3.85 21 5.76 21 8.5v1.45h-2.08c-.56 0-1.07.22-1.44.6-.42.41-.66 1-.6 1.63.09 1.08 1.08 1.87 2.16 1.87H21v1.45c0 3-2 5-5 5h-2.5M2 10.5v-2c0-2.72 1.64-4.62 4.19-4.94.26-.04.53-.06.81-.06h5" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
+<svg title="Кошелёк" width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.75 16.86v2.03c0 1.72-1.6 3.11-3.57 3.11-1.97 0-3.58-1.39-3.58-3.11v-2.03c0 1.72 1.6 2.94 3.58 2.94 1.97 0 3.57-1.23 3.57-2.94Z" stroke="#42AB44" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M10.75 14.11c0 .5-.14.96-.38 1.36-.59.97-1.8 1.58-3.2 1.58-1.4 0-2.61-.62-3.2-1.58-.24-.4-.38-.86-.38-1.36 0-.86.4-1.63 1.04-2.19.65-.57 1.54-.91 2.53-.91.99 0 1.88.35 2.53.91.66.55 1.06 1.33 1.06 2.19Z" stroke="#42AB44" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M10.75 14.11v2.75c0 1.72-1.6 2.94-3.57 2.94-1.97 0-3.58-1.23-3.58-2.94v-2.75C3.6 12.39 5.2 11 7.18 11c.99 0 1.88.35 2.53.91.64.56 1.04 1.34 1.04 2.2Z" stroke="#42AB44" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M22 10.97v2.06c0 .55-.44 1-1 1.02h-1.96c-1.08 0-2.07-.79-2.16-1.87-.06-.63.18-1.22.6-1.63.37-.38.88-.6 1.44-.6H21c.56.02 1 .47 1 1.02Z" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M16 3.5c.26 0 .51.01.75.05C19.33 3.85 21 5.76 21 8.5v1.45h-2.08c-.56 0-1.07.22-1.44.6-.42.41-.66 1-.6 1.63.09 1.08 1.08 1.87 2.16 1.87H21v1.45c0 3-2 5-5 5h-2.5M2 10.5v-2c0-2.72 1.64-4.62 4.19-4.94.26-.04.53-.06.81-.06h5" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/mobile/src/icons/WalletWithMoneyIcon.svg

@@ -1 +1 @@
-<svg id="icon" width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20 12.063V11a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-1.063" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="m5 7 8.571-5L15 4.308M10 7l8-4 2 2.91" stroke="#42AB44" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M16.56 18H21a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1h-7a1 1 0 0 0-1 1v3" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round"/></svg>
+<svg title="Кошелёк с деньгами" width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20 12.063V11a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-1.063" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="m5 7 8.571-5L15 4.308M10 7l8-4 2 2.91" stroke="#42AB44" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M16.56 18H21a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1h-7a1 1 0 0 0-1 1v3" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round"/></svg>

package/mobile/src/services/sitemap/checkIsHrefSameOrigin.spec.ts

@@ -0,0 +1,20 @@
+import { checkIsHrefSameOrigin } from './checkIsHrefSameOrigin';
+
+describe('checkIsHrefSameOrigin', () => {
+  it('should check is URL has the same origin', () => {
+    expect(
+      checkIsHrefSameOrigin('http://foo.ru/other/path', {
+        pathname: '/some/path',
+        href: 'http://foo.ru/some/path',
+      }),
+    ).toEqual(true);
+  });
+  it('should check is URL has the other origin', () => {
+    expect(
+      checkIsHrefSameOrigin('http://foo.ru/other/path', {
+        pathname: '/some/path',
+        href: 'http://bar.ru/some/path',
+      }),
+    ).toEqual(false);
+  });
+});

package/mobile/src/services/sitemap/checkIsHrefSameOrigin.ts

@@ -0,0 +1,6 @@
+import { getOrigin } from '../../utils/url';
+
+export const checkIsHrefSameOrigin = (
+  href: string | undefined,
+  router: { pathname?: string; href?: string },
+) => getOrigin(href) === getOrigin(router.href);

package/mobile/src/services/sitemap/isTopItemActive.spec.ts

@@ -0,0 +1,59 @@
+import type { Router } from '../../components/ContentPage/ContentPageContext';
+import { isTopItemActive } from './isTopItemActive';
+
+const router: Router = {
+  href: 'https://foo.ru/natural/credits',
+  pathname: '/natural',
+  push: () => undefined,
+  query: {},
+};
+
+describe('isTopItemActive', () => {
+  it('should check is top item active', () => {
+    const menuItem = {
+      href: 'https://foo.ru/natural',
+      items: [
+        {
+          href: 'https://bar.ru/credits',
+        },
+      ],
+    };
+    expect(isTopItemActive(router)(menuItem)).toEqual(true);
+  });
+
+  it('should check is sub item active', () => {
+    const menuItem = {
+      href: 'https://bar.ru/natural',
+      items: [
+        {
+          href: 'https://foo.ru/natural/credits',
+        },
+      ],
+    };
+    expect(isTopItemActive(router)(menuItem)).toEqual(true);
+  });
+
+  it('should check is top item has same origin', () => {
+    const menuItem = {
+      href: 'https://foo.ru/svoe',
+      items: [
+        {
+          href: 'https://bar.ru/credits',
+        },
+      ],
+    };
+    expect(isTopItemActive(router)(menuItem)).toEqual(true);
+  });
+
+  it('should check is top item has not active', () => {
+    const menuItem = {
+      href: 'https://bar.ru/svoe',
+      items: [
+        {
+          href: 'https://bar.ru/svoe/credits',
+        },
+      ],
+    };
+    expect(isTopItemActive(router)(menuItem)).toEqual(false);
+  });
+});

package/mobile/src/services/sitemap/isTopItemActive.ts

@@ -1,4 +1,5 @@
 import type { Router } from '../../components/ContentPage/ContentPageContext';
+import { checkIsHrefSameOrigin } from './checkIsHrefSameOrigin';
 import { isHrefActive } from './isHrefActive';
 import { isSubItemActive } from './isSubItemActive';
 import { TopMenuItem } from './SitemapProps';
@@ -6,4 +7,6 @@ import { TopMenuItem } from './SitemapProps';
 export const isTopItemActive =
   (router: Router) =>
   (topItem: TopMenuItem): boolean =>
-    topItem.items?.some(isSubItemActive(router)) || isHrefActive(topItem.href, router);
+    topItem.items?.some(isSubItemActive(router)) ||
+    isHrefActive(topItem.href, router) ||
+    checkIsHrefSameOrigin(topItem.href, router);

package/mobile/src/ui-kit/BlockItem/BlockItem.tsx

@@ -6,12 +6,12 @@ const LIST_STYLE_CLASSES = 'rounded-full inline-block mr-3';
 
 const TEXT_STYLE_MAP: Record<BlockItemVersion, string> = {
   primary: 'text-primary-text',
-  secondary: 'text-secondary-text',
+  secondary: '',
 };
 
 const LIST_STYLE_MAP: Record<BlockItemVersion, string> = {
   primary: 'bg-primary-main',
-  secondary: 'bg-secondary-text',
+  secondary: 'bg-white',
 };
 
 export const BlockItem = JSX<BlockItemProps>(

package/mobile/src/ui-kit/Heading/Heading.tsx

@@ -0,0 +1,20 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { HeadingProps } from './HeadingProps';
+
+const HeadingClass: Record<HeadingProps['type'], string> = {
+  h1: 'text-m-title',
+  h2: 'text-m-title',
+  h3: 'text-m-title-md',
+  h4: 'text-m-title-xs',
+  h5: 'text-m-title-xs',
+  h6: 'text-m-title-xs',
+};
+
+export const Heading = JSX<HeadingProps>((props) => {
+  const { className, type, text } = props;
+  const Tag = type;
+
+  return (
+    <Tag className={`font-sans font-medium ${HeadingClass[type]} ${className || ''}`}>{text}</Tag>
+  );
+});

package/mobile/src/ui-kit/Heading/HeadingProps.ts

@@ -0,0 +1,14 @@
+/**
+ *
+ * @title Тип заголовка
+ * @enumNames [
+ *   "h1", "h2", "h3", "h4", "h5", "h6"
+ * ]
+ */
+export type HeadingType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+
+export interface HeadingProps {
+  className?: string;
+  type: HeadingType;
+  text?: string;
+}

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

@@ -1,154 +1,6 @@
-/**
- * Icons sorted by name
- */
-export enum IconMap {
-  'ActualBalanceIcon',
-  'AppleIcon',
-  'AtmIcon',
-  'BankIcon',
-  'BurgerIcon',
-  'BurgerIconWhite',
-  'Calendar2Icon',
-  'CalendarCircleIcon',
-  'CalendarIcon',
-  'CalendarTickIcon',
-  'CalendarWhiteIcon',
-  'CardIcon',
-  'CardPosIcon',
-  'CardTickIcon',
-  'CardWithGemIcon',
-  'ChartSquareIcon',
-  'ClockIcon',
-  'CloseIcon',
-  'ComfortableCompIcon',
-  'CreditCardsIcon',
-  'DocIcon',
-  'DocumentTextIcon',
-  'DollarIcon',
-  'EarthIcon',
-  'EmptyWalletChangeIcon',
-  'EmptyWalletIcon',
-  'EmptyWalletWhiteIcon',
-  'EuroIcon',
-  'GeolocationIcon',
-  'GlassIcon',
-  'GlobalIcon',
-  'GridIcon',
-  'GridIconWhite',
-  'InterestGrowthIcon',
-  'InterestIcon',
-  'JCBIcon',
-  'LoupeIcon',
-  'MasterCardIcon',
-  'MinusIcon',
-  'MirIcon',
-  'MoneyIcon',
-  'MoneyInsuranceIcon',
-  'MonitorMobileIcon',
-  'NewDocIcon',
-  'OfficeIcon',
-  'OkIcon',
-  'PassSendIcon',
-  'PercentageRoundIcon',
-  'PercentageSquareIcon',
-  'PercentageSquareWhiteIcon',
-  'PersonalCardIcon',
-  'PlayMarketIcon',
-  'PlusIcon',
-  'Profile2UserIcon',
-  'ProfileIcon',
-  'RoundRubleIcon',
-  'SafeIcon',
-  'ShieldTickIcon',
-  'SignDocsIcon',
-  'SmallClockIcon',
-  'TelegramIcon',
-  'UnionPayIcon',
-  'UserTickIcon',
-  'VisaIcon',
-  'VKIcon',
-  'WalletAddIcon',
-  'WalletAdd2Icon',
-  'WalletIcon',
-  'WalletWithMoneyIcon',
-}
+import type { IconName } from '../../icons/IconName';
 
-/**
- * @title Иконка
- * @enumNames [
- *    "Деньги",
- *    "Лого «Apple»",
- *    "Банкомат",
- *    "Банк",
- *    "Бургер",
- *    "Бургер (белый)",
- *    "Календарь 2",
- *    "Скруглённый календарь",
- *    "Календарь",
- *    "Календарь с галочкой",
- *    "Календарь белый",
- *    "Кред. карта",
- *    "Кред. карта под наклоном",
- *    "Кред. карта с галочкой",
- *    "Карта с драгоценностями",
- *    "Деньги внутри кошелька",
- *    "Часы",
- *    "Крестик",
- *    "Кресло",
- *    "Скидка",
- *    "Кредитные карты",
- *    "Огромная скидка",
- *    "Документ",
- *    "Документ с текстом",
- *    "Доллар",
- *    "Пустой кошелёк с возвратом",
- *    "Пустой кошелёк",
- *    "Пустой кошелёк (белый)",
- *    "Евро",
- *    "Геолокация",
- *    "Зеркало",
- *    "Глобус",
- *    "Сетка",
- *    "Сетка (белая)",
- *    "Диаграмма роста",
- *    "Скидка",
- *    "JCB",
- *    "Лупа",
- *    "MasterCard",
- *    "Минус",
- *    "МИР",
- *    "Деньги",
- *    "Денежное страхование",
- *    "Монитор и мобильный",
- *    "Новый документ",
- *    "Офис",
- *    "Лого «Одноклассники»",
- *    "Бизнес",
- *    "Проценты (круг.)",
- *    "Проценты",
- *    "Проценты белые",
- *    "Персональная карта",
- *    "Лого «PlayMarket»",
- *    "Плюс",
- *    "Профиль, 2 персоны",
- *    "Профиль",
- *    "Рубль (круг.)",
- *    "Сейф",
- *    "Безопасность",
- *    "Подписанные документы",
- *    "Маленькие часы",
- *    "Лого «Telegram»",
- *    "UnionPay",
- *    "Пользователь",
- *    "Visa",
- *    "Лого «VK»",
- *    "Пополнение карты",
- *    "Кошелёк с плюсом",
- *    "Кошелёк",
- *    "Кошелёк с деньгами",
- *  ]
- */
-export type IconName = keyof typeof IconMap;
+export type { IconName };
 
 export interface IconProps {
   className?: string;

package/mobile/src/ui-kit/Logo/Logo.tsx

@@ -33,6 +33,7 @@ export const Logo = JSX<Partial<LogoProps>>(
         className={`inline-flex items-center font-sans no-underline ${className}`}
         href={href || 'https://rshb.ru/'}
         target={targetBlank ? '_blank' : '_self'}
+        aria-label="Россельхозбанк"
       >
         <SVG
           className={`${SVG_COLOR[bgColor]} w-10 h-[38px]`}

package/mobile/src/ui-kit/SwipeListControl/SwipeListControl.tsx

@@ -0,0 +1,62 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { SwipeListControlProps } from './SwipeListControlProps';
+import { getScrollPoints } from './utils/getScrollPoints';
+import { getIndexParts } from './utils/getIndexParts';
+import { SwipeListControlList } from './SwipeListControlList';
+import { SwipeListControlDots } from './SwipeListControlDots';
+import { DEFAULT_GAP, DEFAULT_PADDING } from './constants';
+
+export const SwipeListControl = JSX<SwipeListControlProps>(
+  ({
+    className,
+    context,
+    children,
+    gap = DEFAULT_GAP,
+    padding = DEFAULT_PADDING,
+    showDots = true,
+  }) => {
+    const [activeIndex, setActiveIndex] = context.useState<number>(0);
+    const [indexFraction, setIndexFraction] = context.useState<number>(0);
+
+    const handleScroll = (e: UIEvent) => {
+      const { scrollLeft, clientWidth, childElementCount, scrollWidth, children } =
+        e.currentTarget as HTMLElement;
+
+      // horizontal PADDING / 2 to compensate padding-margin combo of child container
+      // without CSS calc function, as wrapper element gets bigger in the DOM, remaining same visually
+      const itemWidth = (children[0] as HTMLElement).offsetWidth - padding / 2;
+      const scrollPoints = getScrollPoints({
+        gap,
+        padding,
+        clientWidth,
+        scrollWidth,
+        childElementCount,
+        itemWidth,
+      });
+
+      const { index, fraction } = getIndexParts(scrollLeft, scrollPoints);
+      setActiveIndex(index);
+      setIndexFraction(fraction);
+    };
+
+    return (
+      <div className={className}>
+        <SwipeListControlList
+          gap={gap}
+          padding={padding}
+          activeIndex={activeIndex}
+          onScroll={handleScroll}
+        >
+          {children}
+        </SwipeListControlList>
+        <SwipeListControlDots
+          activeIndex={activeIndex}
+          indexFraction={indexFraction}
+          showDots={showDots}
+        >
+          {children}
+        </SwipeListControlDots>
+      </div>
+    );
+  },
+);

package/mobile/src/ui-kit/SwipeListControl/SwipeListControlDots.tsx

@@ -0,0 +1,51 @@
+import { JSX } from '@redneckz/uni-jsx';
+
+const DOT_STYLES = 'bg-primary-main opacity-30 w-1.5 h-1.5 min-w-1.5 min-h-1.5 rounded-full';
+const BASE_DOT_WIDTH = 6;
+const ACTIVE_DOT_WIDTH_CHANGE = 16;
+const BASE_DOT_OPACITY = 0.3;
+const ACTIVE_DOT_OPACITY_CHANGE = 0.7;
+
+export interface SwipeListControlDotsProps {
+  activeIndex: number;
+  indexFraction: number;
+  showDots?: boolean;
+}
+
+export const SwipeListControlDots = JSX<SwipeListControlDotsProps>(
+  ({ children, activeIndex, indexFraction, showDots }) => {
+    return showDots && children?.length ? (
+      <div className="flex gap-2 mx-auto mt-[22px] w-fit">
+        {children?.map((_, idx) => (
+          <div
+            key={String(idx)}
+            className={`${DOT_STYLES}`}
+            style={getDotStyles(idx, activeIndex, indexFraction)}
+            aria-hidden
+          />
+        ))}
+      </div>
+    ) : null;
+  },
+);
+
+const getDotStyles = (
+  currentIdx: number,
+  activeIndex: number,
+  indexFraction: number,
+): Record<string, string> | null => {
+  if (currentIdx < activeIndex || currentIdx > activeIndex + 1) return null;
+
+  const leftIndexMod = 1 - indexFraction;
+  const rightIndexMod = indexFraction;
+
+  return currentIdx === activeIndex
+    ? {
+        opacity: `${BASE_DOT_OPACITY + ACTIVE_DOT_OPACITY_CHANGE * leftIndexMod}`,
+        width: `${BASE_DOT_WIDTH + ACTIVE_DOT_WIDTH_CHANGE * leftIndexMod}px`,
+      }
+    : {
+        opacity: `${BASE_DOT_OPACITY + ACTIVE_DOT_OPACITY_CHANGE * rightIndexMod}`,
+        width: `${BASE_DOT_WIDTH + ACTIVE_DOT_WIDTH_CHANGE * rightIndexMod}px`,
+      };
+};

package/mobile/src/ui-kit/SwipeListControl/SwipeListControlItem.tsx

@@ -0,0 +1,20 @@
+import { JSX } from '@redneckz/uni-jsx';
+
+/**
+ * @title Элемент списка
+ */
+export interface SwipeListControlItemProps {
+  className?: string;
+  style?: Record<string, string>;
+  'aria-current'?: boolean;
+}
+
+export const SwipeListControlItem = JSX<SwipeListControlItemProps>(
+  ({ className = '', children, ...rest }) => {
+    return (
+      <div className={`snap-center snap-always min-w-full ${className}`} role="listitem" {...rest}>
+        {children}
+      </div>
+    );
+  },
+);

package/mobile/src/ui-kit/SwipeListControl/SwipeListControlList.tsx

@@ -0,0 +1,48 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { SwipeListControlItem } from './SwipeListControlItem';
+import { getContainerStyle } from './utils/getContainerStyle';
+import { DEFAULT_GAP, DEFAULT_PADDING } from './constants';
+import { SwipeContainer } from './SwipeListControlProps';
+
+/**
+ * @title Список
+ */
+export interface SwipeListControlListProps extends SwipeContainer {
+  className?: string;
+  activeIndex: number;
+  onScroll?: (e: UIEvent) => void;
+}
+
+export const SwipeListControlList = JSX<SwipeListControlListProps>(
+  ({
+    className = '',
+    children,
+    activeIndex,
+    onScroll,
+    gap = DEFAULT_GAP,
+    padding = DEFAULT_PADDING,
+  }) => {
+    return (
+      <div
+        className={`overflow-auto flex horizontal-list no-scrollbar ${className}`}
+        style={{ ...getContainerStyle(padding), gap: `${gap}px` }}
+        role="list"
+        onScroll={onScroll}
+      >
+        {children?.length ? (
+          children?.map((child, idx) => (
+            <SwipeListControlItem
+              key={String(idx)}
+              style={getContainerStyle(padding / 4)}
+              aria-current={Boolean(activeIndex === idx)}
+            >
+              {child}
+            </SwipeListControlItem>
+          ))
+        ) : (
+          <SwipeListControlItem>{children}</SwipeListControlItem>
+        )}
+      </div>
+    );
+  },
+);

package/mobile/src/ui-kit/SwipeListControl/SwipeListControlProps.ts

@@ -0,0 +1,19 @@
+import type { UniBlockProps } from '../../types';
+
+/**
+ * @title Контейнер
+ */
+export interface SwipeContainer {
+  /** @title Расстояние между элементами */
+  gap?: number;
+  /** @title Отступы */
+  padding?: number;
+}
+
+/**
+ * @title Swipe-контроллер
+ */
+export interface SwipeListControlProps extends SwipeContainer, UniBlockProps {
+  /** @title Точки-индикаторы */
+  showDots?: boolean;
+}

package/mobile/src/ui-kit/SwipeListControl/constants.ts

@@ -0,0 +1,10 @@
+// column-gap between children of SwipeListControl container
+export const DEFAULT_GAP = 14;
+/*
+  Horizontal padding used on a container above SwipeListControl.
+  Same value used on a SwipeListControlChildren container to compensate it
+  and get rid of a clipping effect caused by overflow: hidden.
+ */
+export const DEFAULT_PADDING = 16;
+
+// Classes used to compensate outer container padding, so that child elements won't be clipped

package/mobile/src/ui-kit/SwipeListControl/utils/getContainerStyle.ts

@@ -0,0 +1,9 @@
+// styles used to compensate outer container padding to get rid of clipping effect
+export const getContainerStyle = (padding: number): Record<string, string> => {
+  return {
+    marginLeft: `${-padding}px`,
+    marginRight: `${-padding}px`,
+    paddingLeft: `${padding}px`,
+    paddingRight: `${padding}px`,
+  };
+};

package/mobile/src/ui-kit/SwipeListControl/utils/getIndexParts.spec.ts

@@ -0,0 +1,19 @@
+import { getIndexParts } from './getIndexParts';
+
+// pre-baked array containing [start, end] boundary scrollLeft values for scrollableElements
+const scrollPoints: [number, number][] = [
+  [0, 100],
+  [100, 200],
+];
+
+describe('getIndexParts', () => {
+  it("should return index and it's decimal part if scrollLeft lies within given intervals, right boundary non-inclusive", () => {
+    expect(getIndexParts(0, scrollPoints)).toEqual({ index: 0, fraction: 0 });
+    expect(getIndexParts(199, scrollPoints)).toEqual({ index: 1, fraction: 0.99 });
+  });
+
+  it('should return index equal -1 and fraction equal 0 if scrollLeft is outside given intervals', () => {
+    expect(getIndexParts(-1, scrollPoints)).toEqual({ index: -1, fraction: 0 });
+    expect(getIndexParts(200, scrollPoints)).toEqual({ index: -1, fraction: 0 });
+  });
+});

package/mobile/src/ui-kit/SwipeListControl/utils/getIndexParts.ts

@@ -0,0 +1,20 @@
+/*
+  Returns object containing whole index part, and it's decimal part for a given
+  scrollLeft value of a container and an array of tuple containing values of a
+  start and end boundaries of a scrollable child, right boundary non-inclusive.
+  Returns object with index equal -1 and fraction equal 0 if scrollLeft is outside given scrollPoints
+ */
+export const getIndexParts = (
+  scrollLeft: number,
+  scrollPoints: [number, number][],
+): {
+  index: number;
+  fraction: number;
+} => {
+  const index = scrollPoints.findIndex(([start, end]) => start <= scrollLeft && scrollLeft < end);
+  if (index < 0) return { index, fraction: 0 };
+
+  const [start, end] = scrollPoints[index];
+  const fraction = (scrollLeft - start) / (end - start);
+  return { index, fraction };
+};

package/mobile/src/ui-kit/SwipeListControl/utils/getScrollPoints.spec.ts

@@ -0,0 +1,24 @@
+import { getScrollPoints } from './getScrollPoints';
+
+const props = {
+  gap: 14,
+  padding: 16,
+  clientWidth: 500,
+  scrollWidth: 1914,
+  childElementCount: 4,
+  itemWidth: 460, // clientWidth - 1 * padding - gap = visible 10px of adjacent element
+};
+
+// pre-baked array containing accurate [start, end] boundary scrollLeft values for scrollableElements
+const scrollPoints: [number, number][] = [
+  [0, 470],
+  [470, 944],
+  [944, 1414],
+  [1414, 1914],
+];
+
+describe('getScrollPoints', () => {
+  it('should return array containing scroll breakpoints delimiting each child', () => {
+    expect(getScrollPoints(props)).toEqual(scrollPoints);
+  });
+});