@redneckz/wildless-cms-uni-blocks 0.2.72 → 0.2.75

package/src/ExchangeRateTile.tsx

@@ -2,7 +2,7 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { ExchangeRateTileContent } from './ExchangeRateTileContent';
 import { Tile } from './Tile';
 import type { UniBlockProps } from './types';
-import { ButtonProps } from './ui-kit/ButtonProps';
+import type { ButtonProps } from './ui-kit/ButtonProps';
 import { Icon } from './ui-kit/Icon';
 
 export interface ExchangeRateTileProps extends ExchangeRateTileContent, UniBlockProps {}
@@ -19,6 +19,7 @@ const buttons: ButtonProps[] = [
   {
     text: 'Все показатели',
     href: 'https://cbr.ru/currency_base/daily/',
+    version: 'secondary',
   },
 ];
 

package/src/Footer/Contacts.tsx

@@ -18,6 +18,7 @@ export const Contacts = JSX<ContactsProps>(({ className, items, hasButton, conte
       {items?.length ? items.map(renderContact) : null}
       {hasButton ? (
         <Button
+          version="primary"
           className="my-4"
           {...useLink(
             { router, handlerDecorator },

package/src/Footer/SocialMedia.tsx

@@ -4,6 +4,7 @@ import type { UniBlockProps } from '../types';
 import { Icon } from '../ui-kit/Icon';
 import type { IconName } from '../ui-kit/IconProps';
 import { useLink } from '../useLink';
+import { Button } from '../ui-kit/Button';
 
 const ICONS_MAP: Array<{ origins: string[]; icon: IconName; label: string }> = [
   { origins: ['t.me', 'telegram.org'], icon: 'TelegramIcon', label: 'Телеграм' },
@@ -34,15 +35,18 @@ interface MediaButtonProps {
 const MediaButton = JSX<MediaButtonProps>(({ href }) => {
   const { icon, label } =
     ICONS_MAP.find(({ origins }) => origins.some((_) => href?.includes(_))) || {};
+
+  if (!icon) return null;
+
   return (
-    <a
-      className="flex items-center justify-center border-solid border border-main-divider rounded-full no-underline outline-none w-9 h-9"
+    <Button
+      rounded
       href={href}
       target="_blank"
       rel="noopener noreferrer"
       aria-label={label}
-    >
-      {icon && <Icon className="block" name={icon} /> /* TODO width & height */}
-    </a>
+      className="border-solid border border-main-divider w-9 h-9 flex items-center justify-center hover:text-primary-main"
+      appendLeft={<Icon name={icon} />}
+    />
   );
 });

package/src/Gallery.fixture.tsx

@@ -2,7 +2,7 @@ import { context } from './setup-fixture';
 
 import { Gallery, GalleryProps } from './Gallery';
 import { Gallery as MobileGallery } from './Gallery.mobile';
-import { Picture } from './model/Picture';
+import type { Picture } from './model/Picture';
 
 const image: Picture = {
   src: 'money-1.png',

package/src/Gallery.mobile.tsx

@@ -1,9 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { GalleryProps } from './Gallery';
 import type { GalleryCard } from './GalleryContent';
-import { Img } from './Img';
 import { BlockItem } from './ui-kit/BlockItem';
 import { Button } from './ui-kit/Button';
+import { Img } from './ui-kit/Img';
 import { Title } from './ui-kit/Title';
 
 export const Gallery = JSX<GalleryProps>(({ title, description, cards = [], className }) => {

package/src/Gallery.tsx

@@ -1,124 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { GalleryCard, GalleryContent } from './GalleryContent';
-import { Img } from './Img';
+import { GalleryContent } from './GalleryContent';
+import { GalleryInner } from './GalleryInner';
 import { 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 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}
-            ariaLabel="Пролистать влево"
-          />
-        )}
-        {showNextButton && (
-          <ArrowButton
-            className="absolute top-1/2 right-1 z-20 rotate-180"
-            onClick={handleNextClick}
-            ariaLabel="Пролистать вправо"
-          />
-        )}
-        <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="box-border border-solid border rounded-md border-main-divider p-7 mx-2 flex flex-col justify-between items-stretch min-w-[364px] w-[364px] 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>
-  );
-}
+export const Gallery = JSX<GalleryProps>((props) => <GalleryInner {...props} version="normal" />);

package/src/GalleryInner.tsx

@@ -0,0 +1,135 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { GalleryCard, GalleryContent } from './GalleryContent';
+import type { GalleryVersion } from './model/GalleryVersion';
+import type { UniBlockProps } from './types';
+import { ArrowButton } from './ui-kit/ArrowButton';
+import { BlockItem } from './ui-kit/BlockItem';
+import { Button } from './ui-kit/Button';
+import { Img } from './ui-kit/Img';
+import { Title } from './ui-kit/Title';
+
+export interface GalleryInnerProps extends GalleryContent, UniBlockProps {
+  version?: GalleryVersion;
+}
+
+const cardStyleMap: Record<GalleryVersion, string> = {
+  normal: 'min-w-[364px] w-[364px]',
+  mini: 'min-w-[260px] w-[260px]',
+};
+
+const cardWidthMap: Record<GalleryVersion, number> = {
+  normal: 380,
+  mini: 276,
+};
+
+const galleryLengthForScrollMap: Record<GalleryVersion, number> = {
+  normal: 3,
+  mini: 4,
+};
+
+export const GalleryInner = JSX<GalleryInnerProps>(
+  ({ title, description, context, cards = [], className, version = 'normal' }) => {
+    const [activeCardIndex, setActiveCardIndex] = context.useState(0);
+
+    function handleNextClick() {
+      setActiveCardIndex(activeCardIndex + 1);
+    }
+
+    function handlePrevClick() {
+      setActiveCardIndex(activeCardIndex - 1);
+    }
+
+    const isGalleryScrollAvailable = cards?.length > galleryLengthForScrollMap[version];
+
+    const showNextButton =
+      isGalleryScrollAvailable &&
+      cards?.length - activeCardIndex > galleryLengthForScrollMap[version];
+
+    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 ? <Title className="font-medium m-0 text-center">{title}</Title> : null}
+          {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 <= galleryLengthForScrollMap[version] ? 'justify-center' : ''
+          } duration-1000`}
+          // All cards has same width
+          style={{ transform: `translateX(-${activeCardIndex * cardWidthMap[version]}px)` }}
+          role="list"
+        >
+          {cards?.map((card, i) => renderCard(card, i, version))}
+        </div>
+        {showPrevButton && (
+          <ArrowButton
+            className="absolute top-1/2 left-8 rotate-180"
+            onClick={handlePrevClick}
+            ariaLabel="Пролистать влево"
+          />
+        )}
+        {showNextButton && (
+          <ArrowButton
+            className="absolute top-1/2 right-1 z-10"
+            onClick={handleNextClick}
+            ariaLabel="Пролистать вправо"
+          />
+        )}
+        <div className="absolute top-0 right-0 bottom-0 w-[84px] bg-opacity-to-white"></div>
+      </section>
+    );
+  },
+);
+
+function renderCard(card: GalleryCard, i: number, version: GalleryVersion) {
+  return (
+    <div
+      className={`box-border border-solid border rounded-md border-main-divider p-7 mx-2 flex flex-col justify-between items-stretch ${cardStyleMap[version]} w-full`}
+      role="listitem"
+      key={String(i)}
+    >
+      <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 ? (
+          <section className="max-w-[308px] mt-2" role="list">
+            {card.items.map(renderItem)}
+          </section>
+        ) : null}
+      </div>
+      {card.href ? (
+        <Button className="mt-6" text="Подробнее" version="secondary" href={card.href} />
+      ) : null}
+    </div>
+  );
+}
+
+function renderItem(item: string, i: number) {
+  return (
+    <BlockItem key={String(i)}>
+      <span className="text-sm text-secondary-text">{item}</span>
+    </BlockItem>
+  );
+}

package/src/MiniGallery.fixture.tsx

@@ -0,0 +1,90 @@
+import { context } from './setup-fixture';
+
+import { MiniGallery, MiniGalleryProps } from './MiniGallery';
+import { Picture } from './model/Picture';
+
+const image: Picture = {
+  src: 'domovoj-kupon.png',
+  format: 'webp',
+  size: {
+    width: 120,
+    height: 70,
+  },
+};
+
+const defaultProps: MiniGalleryProps = {
+  title: 'Вы можете оплатить бонусными баллами',
+  description: 'Удобный каталог с большим ассортиментом товаров и сервисов',
+  context,
+  cards: [
+    {
+      title: 'Более 5000 товаров',
+      description:
+        'Время копить: ставка растет в зависимости от срока нахождения средств на Счете!',
+      image,
+    },
+    {
+      title: 'Более 1000 развлечений',
+      description: 'Порядок и условия предоставления в соответствии с 106 ФЗ',
+      image,
+    },
+    {
+      title: 'Фермерские продукты',
+      description: 'Высокий процент даже при небольшой сумме денежных средств',
+      image,
+    },
+    {
+      title: '«Моя выгода»',
+      description:
+        'Время копить: ставка растет в зависимости от срока нахождения средств на Счете!',
+      image,
+    },
+    {
+      title: 'Фермерские продукты',
+      description: 'Высокий процент даже при небольшой сумме денежных средств',
+      image,
+    },
+    {
+      title: 'Фермерские продукты',
+      description: 'Высокий процент даже при небольшой сумме денежных средств',
+      image,
+    },
+  ],
+};
+
+const onlyTitleProps: MiniGalleryProps = {
+  title: 'Вы можете оплатить бонусными баллами',
+  description: 'Удобный каталог с большим ассортиментом товаров и сервисов',
+  context,
+  cards: [
+    {
+      title: 'Более 5000 товаров',
+      image,
+    },
+    {
+      title: 'Более 1000 развлечений',
+      image,
+    },
+    {
+      title: 'Фермерские продукты',
+      image,
+    },
+    {
+      title: '«Моя выгода»',
+      image,
+    },
+    {
+      title: 'Фермерские продукты',
+      image,
+    },
+    {
+      title: 'Фермерские продукты',
+      image,
+    },
+  ],
+};
+
+export default {
+  default: <MiniGallery {...defaultProps} />,
+  'only title': <MiniGallery {...onlyTitleProps} />,
+};

package/src/MiniGallery.tsx

@@ -0,0 +1,10 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { GalleryContent } from './GalleryContent';
+import { GalleryInner } from './GalleryInner';
+import { UniBlockProps } from './types';
+
+export interface MiniGalleryProps extends GalleryContent, UniBlockProps {}
+
+export const MiniGallery = JSX<MiniGalleryProps>((props) => (
+  <GalleryInner {...props} version="mini" />
+));

package/src/ProductBlock.fixture.tsx

@@ -1,7 +1,7 @@
 import { context } from './setup-fixture';
 
 import { ProductBlock } from './ProductBlock';
-import { Picture } from './model/Picture';
+import type { Picture } from './model/Picture';
 
 const image: Picture = {
   src: 'money-1.png',

package/src/ProductBlockInner.tsx

@@ -1,10 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { BaseTile } from './BaseTile';
 import type { Benefit } from './BenefitsBlockContent';
-import { Img } from './Img';
 import type { ProductBlockInnerContent } from './ProductBlockInnerContent';
 import type { UniBlockProps } from './types';
 import { Icon } from './ui-kit/Icon';
+import { Img } from './ui-kit/Img';
 import { Title } from './ui-kit/Title';
 
 export interface ProductBlockInnerProps extends ProductBlockInnerContent, UniBlockProps {}
@@ -18,7 +18,7 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
             /* TODO Why <Title> is duplicated here?  */
             <Title
               size={titleSize || 'XL'}
-              className="font-medium m-0 mb-4 whitespace-pre-wrap max-w-[600px]"
+              className="font-medium m-0 mb-4 whitespace-pre-wrap max-w-[600px] text-primary-text"
             >
               {title}
             </Title>
@@ -47,7 +47,7 @@ function renderBenefit(benefit: Benefit, i: number) {
         />
       )}
       <div className="flex gap-1 flex-col h-full">
-        <h4 className="font-medium text-xl m-0">{benefit.label}</h4>
+        <h4 className="font-medium text-primary-text text-xl m-0">{benefit.label}</h4>
         {benefit.description && (
           <div className="font-normal text-sm text-secondary-text">{benefit.description}</div>
         )}

package/src/ProductTile.fixture.tsx

@@ -1,7 +1,7 @@
 import { context } from './setup-fixture';
 
 import { ProductTile } from './ProductTile';
-import { Picture } from './model/Picture';
+import type { Picture } from './model/Picture';
 
 const cardWithMoney: Picture = {
   src: 'card-with-diamond.png',

package/src/TextBlock.fixture.tsx

@@ -1,6 +1,6 @@
 import { context } from './setup-fixture';
 import { TextBlock } from './TextBlock';
-import { Picture } from './model/Picture';
+import type { Picture } from './model/Picture';
 
 const image: Picture = {
   src: 'bank-card.png',

package/src/TextBlock.tsx

@@ -1,8 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { Img } from './Img';
 import type { Picture } from './model/Picture';
 import type { TextBlockContent, TextBlockVersion } from './TextBlockContent';
 import type { UniBlockProps } from './types';
+import { Img } from './ui-kit/Img';
 
 export interface TextBlockProps extends TextBlockContent, UniBlockProps {}
 
@@ -13,7 +13,7 @@ const textBlockStyleMaps: Record<
   primary: {
     background: 'bg-white',
     icon: 'bg-primary-main text-white',
-    title: 'text-base',
+    title: 'text-primary-text',
     description: 'text-secondary-text',
   },
   secondary: {
@@ -25,7 +25,7 @@ const textBlockStyleMaps: Record<
   'secondary-light': {
     background: 'bg-primary-main/10',
     icon: 'bg-primary-main text-white',
-    title: 'text-base',
+    title: 'text-primary-text',
     description: 'text-secondary-text',
   },
 };
@@ -40,7 +40,9 @@ export const TextBlock = JSX<TextBlockProps>(
         {iconVersion && iconVersion === 'small' ? renderIcon(textBlockStyleMap.icon) : null}
         {iconVersion && iconVersion === 'big' ? renderImage(image) : null}
         <div className="py-0.5">
-          {title && <div className={`font-medium mb-1 ${textBlockStyleMap.title}`}>{title}</div>}
+          {title && (
+            <div className={`font-medium text-base mb-1 ${textBlockStyleMap.title}`}>{title}</div>
+          )}
           {description && (
             <div className={`text-sm ${textBlockStyleMap.description}`}>{description}</div>
           )}

package/src/Tile.fixture.tsx

@@ -1,7 +1,7 @@
 import { context } from './setup-fixture';
 
 import { Tile } from './Tile';
-import { Picture } from './model/Picture';
+import type { Picture } from './model/Picture';
 
 const image: Picture = {
   src: 'money-1.png',

package/src/common.css

@@ -7,6 +7,8 @@
   --color-primary-active: 36, 95, 52;
   --color-secondary-hover: 216, 242, 217;
   --color-secondary-active: 197, 226, 198;
+  --color-gradient-from: 141, 189, 76;
+  --color-gradient-to: 69, 172, 69;
 }
 /* Business clients | Light-Green */
 [data-theme='bc'] {
@@ -15,6 +17,8 @@
   --color-primary-active: 60, 94, 16;
   --color-secondary-hover: 232, 244, 217;
   --color-secondary-active: 216, 227, 202;
+  --color-gradient-from: 141, 189, 76; /* TODO: change color to theme bc */
+  --color-gradient-to: 69, 172, 69; /* TODO: change color to theme bc */
 }
 /* Ecosystem own | Yellow */
 [data-theme='eo'] {
@@ -23,6 +27,38 @@
   --color-primary-active: 126, 99, 12;
   --color-secondary-hover: 241, 236, 221;
   --color-secondary-active: 229, 222, 199;
+  --color-gradient-from: 141, 189, 76; /* TODO: change color to theme eo */
+  --color-gradient-to: 69, 172, 69; /* TODO: change color to theme eo */
+}
+
+[data-theme='eo2'] {
+  --color-primary-main: 255, 204, 0;
+  --color-primary-hover: 187, 151, 39;
+  --color-primary-active: 126, 99, 12;
+  --color-secondary-hover: 241, 236, 221;
+  --color-secondary-active: 229, 222, 199;
+  --color-gradient-from: 141, 189, 76; /* TODO: change color to theme eo */
+  --color-gradient-to: 69, 172, 69; /* TODO: change color to theme eo */
+}
+
+[data-theme='eo3'] {
+  --color-primary-main: 225, 186, 30;
+  --color-primary-hover: 187, 151, 39;
+  --color-primary-active: 126, 99, 12;
+  --color-secondary-hover: 241, 236, 221;
+  --color-secondary-active: 229, 222, 199;
+  --color-gradient-from: 141, 189, 76; /* TODO: change color to theme eo */
+  --color-gradient-to: 69, 172, 69; /* TODO: change color to theme eo */
+}
+
+[data-theme='eo4'] {
+  --color-primary-main: 233, 191, 23;
+  --color-primary-hover: 187, 151, 39;
+  --color-primary-active: 126, 99, 12;
+  --color-secondary-hover: 241, 236, 221;
+  --color-secondary-active: 229, 222, 199;
+  --color-gradient-from: 141, 189, 76; /* TODO: change color to theme eo */
+  --color-gradient-to: 69, 172, 69; /* TODO: change color to theme eo */
 }
 
 @tailwind components;

package/src/icons/AppleIcon.svg

@@ -1,13 +1 @@
-<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>
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 24"><path d="M18.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"/></svg>