@redneckz/wildless-cms-uni-blocks 0.2.61 → 0.2.64

package/src/Gallery.tsx

@@ -0,0 +1,132 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { Img } from './Img';
+import { Picture, UniBlockProps } from './types';
+import { ArrowButton } from './ui-kit/ArrowButton';
+import { BlockItem } from './ui-kit/BlockItem';
+import { Button } from './ui-kit/Button';
+import { Title } from './ui-kit/Title';
+
+export interface GalleryCard {
+  title?: string;
+  description?: string;
+  image?: Picture;
+  href?: string;
+  items?: string[];
+}
+
+export interface GalleryContent {
+  title?: string;
+  description?: string;
+  cards?: GalleryCard[];
+}
+
+export interface GalleryProps extends GalleryContent, UniBlockProps {}
+
+const CARD_WIDTH = 384;
+const GALLERY_LENGTH_FOR_SCROLL = 3;
+
+export const Gallery = JSX<GalleryProps>(
+  ({ title, description, context, cards = [], className }) => {
+    const [activeCardIndex, setActiveCardIndex] = context.useState(0);
+
+    function handleNextClick() {
+      setActiveCardIndex(activeCardIndex + 1);
+    }
+
+    function handlePrevClick() {
+      setActiveCardIndex(activeCardIndex - 1);
+    }
+
+    const isGalleryScrollAvailable = cards?.length > GALLERY_LENGTH_FOR_SCROLL;
+
+    const showNextButton =
+      isGalleryScrollAvailable && cards?.length - activeCardIndex > GALLERY_LENGTH_FOR_SCROLL;
+
+    const showPrevButton = isGalleryScrollAvailable && activeCardIndex > 0;
+
+    return (
+      <section
+        className={`relative font-sans text-primary-text bg-white p-12 overflow-hidden ${className}`}
+      >
+        <div className="flex flex-col items-center mb-8">
+          <Title className="font-medium m-0 text-centers">{title}</Title>
+          {description ? (
+            <div className="font-normal text-base max-w-[600px] mt-3">{description}</div>
+          ) : null}
+        </div>
+        <div
+          // Need to place all cards at the center if count of cards less than 4
+          className={`flex ${
+            cards?.length <= GALLERY_LENGTH_FOR_SCROLL ? 'justify-center' : ''
+          } duration-1000`}
+          // All cards has same width
+          style={{ transform: `translateX(-${activeCardIndex * CARD_WIDTH}px)` }}
+          role="list"
+        >
+          {cards?.map(renderCard)}
+        </div>
+        {showPrevButton && (
+          <ArrowButton className="absolute top-1/2 left-8" onClick={handlePrevClick} />
+        )}
+        {showNextButton && (
+          <ArrowButton
+            className="absolute top-1/2 right-1 z-20 rotate-180"
+            onClick={handleNextClick}
+          />
+        )}
+        <div
+          className="absolute top-0 right-0 bottom-0 w-[84px]"
+          style={{
+            background: 'linear-gradient(270deg, #FFFFFF 34.89%, rgba(255, 255, 255, 0) 92.52%)',
+          }}
+        ></div>
+      </section>
+    );
+  },
+);
+
+function renderCard(card: GalleryCard, key: number) {
+  return (
+    <div
+      className="border-solid border rounded-md border-main-divider p-7 mx-2 flex flex-col justify-between items-stretch min-w-[308px] w-[308px] w-full"
+      role="listitem"
+      key={key}
+    >
+      <div>
+        {card.image?.src ? (
+          <div className="flex justify-center">
+            <Img className="mb-6" image={card.image} />
+          </div>
+        ) : null}
+        {card.title ? (
+          <h4
+            className={`font-medium text-xl m-0 ${
+              !card.description && !card.items?.length ? 'text-center' : ''
+            }`}
+          >
+            {card.title}
+          </h4>
+        ) : null}
+        {card.description ? (
+          <div className="font-normal text-sm text-secondary-text mt-2">{card.description}</div>
+        ) : null}
+        {card.items?.length ? renderItems(card.items) : null}
+      </div>
+      {card.href ? (
+        <Button className="mt-6" text="Подробнее" version="secondary" href={card.href} />
+      ) : null}
+    </div>
+  );
+}
+
+function renderItems(items: string[] = []) {
+  return (
+    <section className="max-w-[308px] mt-2" role="list">
+      {items.map((item, i) => (
+        <BlockItem key={String(i)}>
+          <span className="text-sm text-secondary-text">{item}</span>
+        </BlockItem>
+      ))}
+    </section>
+  );
+}

package/src/Header/HeaderSecondaryMenu.tsx

@@ -1,8 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { GridIcon, LoupeIcon, ProfileIcon } from '../Icons/index';
+import type { UniBlockProps } from '../types';
+import { Icon } from '../ui-kit/Icon';
 import { TopItem } from '../ui-kit/TopItem';
 import { HeaderSecondaryMenuButton } from './HeaderSecondaryMenuButton';
-import type { UniBlockProps } from '../types';
 
 interface HeaderSecondaryMenuContent {
   defaultLocation?: string;
@@ -36,19 +36,19 @@ export const HeaderSecondaryMenu = JSX<HeaderSecondaryMenuProps>(
           className="mr-5 text-primary-text hover:text-primary-main"
           ariaLabel="Поиск по сайту"
         >
-          {LoupeIcon({ 'aria-hidden': true })}
+          <Icon name="LoupeIcon" aria-hidden="true" />
         </HeaderSecondaryMenuButton>
         <HeaderSecondaryMenuButton
           className="mr-5 text-primary-text hover:text-primary-main"
           ariaLabel="Профиль"
         >
-          {ProfileIcon({ 'aria-hidden': true })}
+          <Icon name="ProfileIcon" aria-hidden="true" />
         </HeaderSecondaryMenuButton>
         <HeaderSecondaryMenuButton
           className="mr-5 text-secondary-light hover:text-secondary-active min-w-[32px] min-h-[32px]"
           ariaLabel="Дополнительные ссылки"
         >
-          {GridIcon({ 'aria-hidden': true })}
+          <Icon name="GridIcon" aria-hidden="true" />
         </HeaderSecondaryMenuButton>
       </div>
     );

package/src/MobileAppTile.fixture.tsx

@@ -12,6 +12,22 @@ export default {
           href: 'https://rshbnaturaldbo.onelink.me/qhkF/f182074f?af_qr=true',
           src: 'data:image/png;base64,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',
         }}
+        buttons={[
+          {
+            aboveText: 'Загрузите в',
+            text: 'App Store',
+            icon: 'AppleIcon',
+            href: '#',
+            version: 'secondary',
+          },
+          {
+            aboveText: 'Доступно в',
+            text: 'Google Play',
+            icon: 'PlayMarketIcon',
+            href: '#',
+            version: 'secondary',
+          },
+        ]}
       />
     </div>
   ),

package/src/ProductBlockInner.tsx

@@ -1,12 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { EmptyWalletIcon, PercentageSquareIcon, CalendarIcon } from './Icons/index';
-import type { UniBlockProps, Benefit } from './types';
-import { BaseTile } from './BaseTile';
-import { Title } from './ui-kit/Title';
 import type { BaseTileContent } from './BaseTile';
+import { BaseTile } from './BaseTile';
+import type { Benefit } from './BenefitsBlock';
 import { Img } from './Img';
-
-const ICONS = { EmptyWalletIcon, PercentageSquareIcon, CalendarIcon };
+import type { UniBlockProps } from './types';
+import { Icon } from './ui-kit/Icon';
+import { Title } from './ui-kit/Title';
 
 export interface ProductBlockInnerContent extends BaseTileContent {
   benefits?: Benefit[];
@@ -40,9 +39,12 @@ function renderBenefit(benefit: Benefit, i: number) {
   return (
     <div key={String(i)} className="flex gap-4 items-center">
       {benefit.icon && (
-        <div className="w-[50px] h-[50px] min-w-[50px] min-h-[50px] bg-main rounded-full p-[10px] box-border">
-          {ICONS[benefit.icon as keyof typeof ICONS]?.()}
-        </div>
+        <Icon
+          className="w-[50px] h-[50px] min-w-[50px] min-h-[50px] bg-main rounded-full p-[10px] box-border"
+          name={benefit.icon}
+          width="24"
+          height="24"
+        />
       )}
       <div className="flex gap-1 flex-col h-full">
         <h4 className="font-medium text-xl m-0">{benefit.label}</h4>

package/src/ProductTile.tsx

@@ -1,8 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { UniBlockProps, Benefit } from './types';
-import { BlockVersion } from './types';
-import { Tile } from './Tile';
 import type { BaseTileContent } from './BaseTile';
+import type { Benefit } from './BenefitsBlock';
+import { Tile } from './Tile';
+import type { UniBlockProps } from './types';
+import { BlockVersion } from './types';
 
 export interface ProductTileContent extends BaseTileContent {
   benefits?: Benefit[];

package/src/ProjectSettings.ts

@@ -5,6 +5,7 @@ export interface ProjectSettings {
   FORCED_DRAFT_FLOW: boolean;
   ENABLE_ASSIST?: boolean;
   SITEMAP?: string;
+  CDN?: string; // Should ends with "/"
 }
 
 export const projectSettings = new (class implements ProjectSettings {
@@ -35,4 +36,7 @@ export const projectSettings = new (class implements ProjectSettings {
   get SITEMAP() {
     return this._.SITEMAP;
   }
+  get CDN() {
+    return this._.CDN;
+  }
 })();

package/src/StepsBlock.tsx

@@ -1,14 +1,13 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { NewDocIcon, PassSendIcon, ActualBalanceIcon } from './Icons/index';
 import type { UniBlockProps } from './types';
+import { Icon, IconName } from './ui-kit/Icon';
 import { Title } from './ui-kit/Title';
 import { joinList } from './utils/joinList';
 
-const ICONS = { NewDocIcon, PassSendIcon, ActualBalanceIcon };
 export interface Step {
   label: string;
   description?: string;
-  icon?: keyof typeof ICONS;
+  icon?: IconName;
 }
 
 export interface StepsBlockContent {
@@ -44,7 +43,7 @@ const renderStepIcon = (step: Step, i: number) => {
   return (
     <div key={String(i)} className="flex flex-col items-center text-center relative">
       <div className="h-[100px] w-[100px] min-w-[100px] min-h-[100px] bg-secondary-light rounded-full p-[26px] box-border z-10">
-        {(step.icon && ICONS[step.icon]?.({ width: 48, height: 48 })) || (
+        {(step.icon && <Icon name={step.icon} width="48" height="48" />) || (
           <span className="font-medium text-title-sm text-secondary-text">{i + 1}</span>
         )}
       </div>

package/src/icons/ActualBalanceIcon.svg

@@ -0,0 +1,186 @@
+<svg
+  width="48"
+  height="48"
+  viewBox="0 0 70 70"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <mask
+    id="mask0_2530_3510"
+    style="mask-type: alpha"
+    maskUnits="userSpaceOnUse"
+    x="2"
+    y="4"
+    width="55"
+    height="61"
+  >
+    <path d="M35.058 4.24L2.116 48.392l21.841 16.296L56.9 20.536 35.058 4.24z" fill="#fff" />
+  </mask>
+  <g mask="url(#mask0_2530_3510)">
+    <path
+      d="M35.058 4.24L2.116 48.392l21.841 16.296L56.9 20.536 35.058 4.24z"
+      fill="url(#paint0_linear_2530_3510)"
+    />
+    <path
+      d="M35.058 4.24L2.116 48.392l21.841 16.296L56.9 20.536 35.058 4.24z"
+      fill="url(#paint1_linear_2530_3510)"
+    />
+    <path d="M49.367 12.968l-33.47 21.717 2.132 1.616 38.285-18.808-6.947-4.525z" fill="#FA552D" />
+    <path
+      d="M49.367 12.968l-33.47 21.717 2.132 1.616 38.285-18.808-6.947-4.525z"
+      fill="url(#paint2_linear_2530_3510)"
+    />
+    <path
+      d="M49.367 12.968l-33.47 21.717 2.132 1.616 38.285-18.808-6.947-4.525z"
+      fill="url(#paint3_linear_2530_3510)"
+    />
+    <path fill="#42AB44" d="M0.908203 41.4221H12.851203V56.5531H0.908203z" />
+  </g>
+  <mask
+    id="mask1_2530_3510"
+    style="mask-type: alpha"
+    maskUnits="userSpaceOnUse"
+    x="6"
+    y="14"
+    width="62"
+    height="50"
+  >
+    <path d="M55.187 14.567L6.004 39.377l12.274 24.33 49.183-24.81-12.274-24.33z" fill="#fff" />
+  </mask>
+  <g mask="url(#mask1_2530_3510)">
+    <path d="M55.187 14.567L6.004 39.377l12.274 24.33 49.183-24.81-12.274-24.33z" fill="#FFCDBD" />
+    <path
+      d="M55.187 14.567L6.004 39.377l12.274 24.33 49.183-24.81-12.274-24.33z"
+      fill="url(#paint4_linear_2530_3510)"
+    />
+    <path d="M67.462 33.264l-54.495 8.05 3.982 26.958 54.495-8.05-3.982-26.958z" fill="#42AB44" />
+  </g>
+  <mask
+    id="mask2_2530_3510"
+    style="mask-type: alpha"
+    maskUnits="userSpaceOnUse"
+    x="4"
+    y="30"
+    width="59"
+    height="36"
+  >
+    <path d="M58.603 30.767l-54.496 8.05L8.09 65.775l54.496-8.05-3.982-26.958z" fill="#fff" />
+  </mask>
+  <g mask="url(#mask2_2530_3510)">
+    <path
+      d="M58.603 30.767l-54.496 8.05L8.09 65.775l54.496-8.05-3.982-26.958z"
+      fill="url(#paint5_linear_2530_3510)"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M58.603 30.765L4.107 38.814l.54 3.652 13.994-2.067 2.902 19.65-13.99 2.066.54 3.652 13.99-2.066v.007l22.709-3.355-.001-.006 17.798-2.63-.54-3.651-17.797 2.629-2.903-19.65 17.793-2.629-.539-3.651z"
+      fill="url(#paint6_linear_2530_3510)"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M58.603 30.765L4.107 38.814l.54 3.652 13.994-2.067 2.902 19.65-13.99 2.066.54 3.652 13.99-2.066v.007l22.709-3.355-.001-.006 17.798-2.63-.54-3.651-17.797 2.629-2.903-19.65 17.793-2.629-.539-3.651z"
+      fill="url(#paint7_linear_2530_3510)"
+    />
+    <path
+      d="M48.36 32.281l-7.541 1.114L44.8 60.353l7.543-1.114-3.982-26.958zM56.743 38.907l-4.241.627a1.308 1.308 0 01-.382-2.587l4.241-.627a1.308 1.308 0 01.382 2.587z"
+      fill="#42AB44"
+    />
+    <path
+      d="M31.702 55.28l-2.33.344-.802-5.428-1.724.254-.166-1.128 1.724-.255-1.101-7.45 4.67-.69c.965-.142 1.822-.085 2.572.17.751.256 1.362.681 1.836 1.276.471.596.773 1.329.903 2.206.131.89.048 1.681-.252 2.376-.3.695-.787 1.26-1.462 1.7-.675.44-1.5.73-2.47.874l-2.196.324.802 5.427h-.004zm2.631-3.974l.167 1.128-7.204 1.064-.166-1.128 7.203-1.064zm-2.205-3.512a6.002 6.002 0 001.552-.43c.452-.2.795-.492 1.023-.88.229-.386.296-.905.2-1.556-.082-.554-.264-.993-.545-1.314a2.099 2.099 0 00-1.092-.651c-.446-.114-.965-.125-1.553-.038l-1.805.267.712 4.823 1.508-.223v.002z"
+      fill="#fff"
+    />
+  </g>
+  <defs>
+    <linearGradient
+      id="paint0_linear_2530_3510"
+      x1="14.7502"
+      y1="4.23757"
+      x2="26.9602"
+      y2="26.3432"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop stop-color="#FEFFCF" />
+      <stop offset="1" stop-color="#FFE7DA" />
+    </linearGradient>
+    <linearGradient
+      id="paint1_linear_2530_3510"
+      x1="18.587"
+      y1="26.316"
+      x2="32.8984"
+      y2="36.8759"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop stop-color="#DCFFE5" />
+      <stop offset="1" stop-color="#EBE78C" />
+    </linearGradient>
+    <linearGradient
+      id="paint2_linear_2530_3510"
+      x1="50.4489"
+      y1="15.511"
+      x2="26.7341"
+      y2="29.0153"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop stop-color="#FFA183" />
+      <stop offset="1" stop-color="#FFA183" stop-opacity="0" />
+    </linearGradient>
+    <linearGradient
+      id="paint3_linear_2530_3510"
+      x1="49.3436"
+      y1="-56.8124"
+      x2="-1.00392"
+      y2="-52.0477"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop stop-color="#42AB44" />
+      <stop offset="1" stop-color="#201B37" />
+    </linearGradient>
+    <linearGradient
+      id="paint4_linear_2530_3510"
+      x1="30.5957"
+      y1="26.9721"
+      x2="38.6904"
+      y2="42.8088"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop stop-color="#DCFFE5" />
+      <stop offset="1" stop-color="#EBE78C" />
+    </linearGradient>
+    <linearGradient
+      id="paint5_linear_2530_3510"
+      x1="4.59823"
+      y1="42.1396"
+      x2="53.0558"
+      y2="55.1262"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop stop-color="#FFF7F4" />
+      <stop offset="0.34234" stop-color="#FEFFCF" />
+      <stop offset="1" stop-color="#FFE7DA" />
+      <stop offset="1" stop-color="#FFE7DA" />
+    </linearGradient>
+    <linearGradient
+      id="paint6_linear_2530_3510"
+      x1="19.1708"
+      y1="32.1466"
+      x2="29.8454"
+      y2="57.3534"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop stop-color="#FFCA42" />
+      <stop offset="1" stop-color="#FFA183" />
+    </linearGradient>
+    <linearGradient
+      id="paint7_linear_2530_3510"
+      x1="20.2683"
+      y1="42.9389"
+      x2="26.6235"
+      y2="64.3382"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop stop-color="#7DC15D" />
+      <stop offset="1" stop-color="#FEE54F" />
+    </linearGradient>
+  </defs>
+</svg>

package/src/icons/AppleIcon.svg

@@ -0,0 +1,13 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#a)">
+    <path
+      d="M19.406 12.761c-.023-3.028 2.793-4.511 2.93-4.572-1.603-2.073-4.075-2.357-4.968-2.377-2.083-.204-4.098 1.117-5.174 1.117-1.076 0-2.725-1.097-4.488-1.056-2.266.04-4.395 1.198-5.563 3.007-2.404 3.698-.618 9.124 1.694 12.09 1.145 1.464 2.496 3.09 4.259 3.028 1.717-.06 2.358-.975 4.441-.975 2.06 0 2.656.975 4.465.935 1.854-.02 3.022-1.463 4.12-2.947 1.329-1.666 1.855-3.332 1.878-3.413 0 0-3.549-1.2-3.594-4.837Zm-3.389-8.92c.916-1.037 1.557-2.419 1.374-3.841-1.35.061-3.022.833-3.984 1.829-.847.894-1.625 2.337-1.42 3.698 1.512.102 3.069-.67 4.03-1.686Z"
+      fill="#42AB44"
+    />
+  </g>
+  <defs>
+    <clipPath id="a">
+      <rect width="24" height="24" rx="6" fill="#fff" />
+    </clipPath>
+  </defs>
+</svg>

package/src/icons/CalendarIcon.svg

@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+  <path
+    stroke="#1C1C1C"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-miterlimit="10"
+    stroke-width="2"
+    d="M8 2v3M16 2v3M3.5 9.09h17M3 13.01V8.5c0-3 1.5-5 5-5h8c3.5 0 5 2 5 5V17c0 3-1.5 5-5 5H8c-3.5 0-5-2-5-5"
+  />
+  <path
+    stroke="#42AB44"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="3"
+    d="M15.991 13h.018M15.991 17.006h.018M11.991 13h.018M11.991 17.006h.018M7.991 13h.018M7.991 17.006h.018"
+  />
+</svg>