@redneckz/wildless-cms-uni-blocks 0.14.4 → 0.14.6

package/src/components/CarouselInvestmentCard/CarouselInvestmentCard.example.json

@@ -8,7 +8,7 @@
   "title": "Заголовок",
   "description": "Описание",
   "additionalDescription": "Описание 1-2",
-  "columnsMode": "1",
+  "columnsMode": 1,
   "cardsList": [
     {
       "parameter": "Параметр",

package/src/components/CarouselInvestmentCard/CarouselInvestmentCard.tsx

@@ -68,7 +68,11 @@ export const CarouselInvestmentCard = JSX<CarouselInvestmentCardProps>(
 const renderCardList = (cardsList: CardsListItem[]) =>
   cardsList.map((item, i) => (
     <li key={String(i)}>
-      {item?.parameter ? <Text size="text-h6">{item.parameter}</Text> : null}
+      {item?.parameter ? (
+        <div className="inline pr-xs">
+          <Text size="text-h6">{item.parameter}</Text>
+        </div>
+      ) : null}
       {item?.parameterDescription ? (
         <Text size="text-m" font="font-light" color="text-secondary-text">
           {item.parameterDescription}

package/src/components/CarouselProductCard/CarouselProductCard.example.json

@@ -15,8 +15,6 @@
       { "text": "Элемент списка 1", "title": "Элемент заголовка 1" },
       { "text": "Элемент списка 2", "title": "Элемент заголовка 2" },
       { "text": "Элемент списка 3", "title": "Элемент заголовка 3" }
-    ],
-    "align": "text-center",
-    "isFullWidth": true
+    ]
   }
 }

package/src/components/CarouselProductCard/CarouselProductCard.fixture.mobile.tsx

@@ -0,0 +1,92 @@
+import '../../setup-fixture';
+
+import type { Picture } from '../../model/Picture';
+import { CarouselProductCard } from './CarouselProductCard';
+import type { CarouselProductCardContent } from './CarouselProductCardContent';
+import type { ButtonContent } from '../../ui-kit/Button/ButtonContent';
+
+const isDotted = false;
+
+const image: Picture = {
+  src: 'money-1.png',
+  format: 'webp',
+  size: {
+    width: 140,
+    height: 140,
+  },
+  title: 'money',
+};
+
+const buttonPrimary: ButtonContent = {
+  href: '/credit-cards',
+  text: 'Подробнее',
+  target: '_blank',
+  version: 'secondary',
+};
+
+const buttonPrimaryIcon: ButtonContent = {
+  href: '/credit-cards',
+  text: 'Подробнее',
+  target: '_blank',
+  version: 'secondary',
+  icon: { icon: 'BankIcon' },
+};
+
+const defaultItems = [
+  { text: 'Качественные фермерские продукты напрямую от производителей' },
+  { text: 'Самая большая база сельских туров по России' },
+  { text: 'Площадки для создания комфортной жизни за городом' },
+];
+
+export const PRODUCT_CARD: CarouselProductCardContent = {
+  title: 'Более 5000 товаров',
+  description: 'Время копить: ставка растет в зависимости от срока нахождения средств на Счете!',
+  icon: image,
+  button: buttonPrimary,
+  isDotted,
+  items: defaultItems,
+  isImageFullWidth: true,
+  additionalDescription: 'Дополнительное описание',
+};
+
+export const PRODUCT_CARD_SMALL: CarouselProductCardContent = {
+  title: 'Более 5000 товаров Более 5000 товаров Более 5000 товаров',
+  icon: image,
+  button: buttonPrimary,
+  isDotted,
+  isButtonFullWidth: true,
+};
+export const PRODUCT_CARD_EVENT: CarouselProductCardContent = {
+  title: 'Более 5000 товаров',
+  icon: image,
+  isDotted,
+  additionalDescription: 'Дополнительное описание',
+  isTopPosition: true,
+  isImageFullWidth: true,
+};
+
+const CAROUSEL_PRODUCT_CARD = <CarouselProductCard className="col-span-12" {...PRODUCT_CARD} />;
+const CAROUSEL_PRODUCT_CARD_SECONDARY = (
+  <CarouselProductCard
+    className="col-span-12"
+    {...PRODUCT_CARD}
+    version="secondary"
+    isDotted={true}
+    button={buttonPrimaryIcon}
+    isButtonFullWidth={true}
+  />
+);
+const CAROUSEL_PRODUCT_CARD_SMALL = (
+  <CarouselProductCard className="col-span-12" {...PRODUCT_CARD_SMALL} />
+);
+
+const CAROUSEL_PRODUCT_CARD_EVENT = (
+  <CarouselProductCard className="col-span-12" {...PRODUCT_CARD_EVENT} />
+);
+
+export default {
+  default: <div className="container grid grid-cols-12">{CAROUSEL_PRODUCT_CARD}</div>,
+  secondary: <div className="container grid grid-cols-12">{CAROUSEL_PRODUCT_CARD_SECONDARY}</div>,
+  small: <div className="container grid grid-cols-12">{CAROUSEL_PRODUCT_CARD_SMALL}</div>,
+  event: <div className="container grid grid-cols-12">{CAROUSEL_PRODUCT_CARD_EVENT}</div>,
+};

package/src/components/CarouselProductCard/CarouselProductCard.fixture.tsx

@@ -54,9 +54,21 @@ export const PRODUCT_CARD_SMALL: CarouselProductCardContent = {
   button: buttonPrimary,
   isDotted,
   isButtonFullWidth: false,
+  align: 'text-left',
+};
+
+export const PRODUCT_CARD_EVENT: CarouselProductCardContent = {
+  title: 'Более 5000 товаров',
+  icon: image,
+  isDotted,
+  additionalDescription: 'Дополнительное описание',
+  align: 'text-left',
+  isTopPosition: true,
+  isImageFullWidth: true,
 };
 
 const CAROUSEL_PRODUCT_CARD = <CarouselProductCard className="col-span-4" {...PRODUCT_CARD} />;
+
 const CAROUSEL_PRODUCT_CARD_SECONDARY = (
   <CarouselProductCard
     className="col-span-4"
@@ -67,12 +79,18 @@ const CAROUSEL_PRODUCT_CARD_SECONDARY = (
     isButtonFullWidth={false}
   />
 );
+
 const CAROUSEL_PRODUCT_CARD_SMALL = (
   <CarouselProductCard className="col-span-4" {...PRODUCT_CARD_SMALL} />
 );
 
+const CAROUSEL_PRODUCT_CARD_EVENT = (
+  <CarouselProductCard className="col-span-4" {...PRODUCT_CARD_EVENT} />
+);
+
 export default {
   default: <div className="container grid grid-cols-12">{CAROUSEL_PRODUCT_CARD}</div>,
   secondary: <div className="container grid grid-cols-12">{CAROUSEL_PRODUCT_CARD_SECONDARY}</div>,
   small: <div className="container grid grid-cols-12">{CAROUSEL_PRODUCT_CARD_SMALL}</div>,
+  event: <div className="container grid grid-cols-12">{CAROUSEL_PRODUCT_CARD_EVENT}</div>,
 };

package/src/components/CarouselProductCard/CarouselProductCard.tsx

@@ -14,6 +14,7 @@ import { Text } from '../../ui-kit/Text/Text';
 import { style } from '../../utils/style';
 import { HEADLINE_SMALL_VERSION } from '../Headline/headlineVersionStyles';
 import { AlignStyles } from '../../model/AlignStyles';
+import type { TextAlign } from '../../ui-kit/Text/TextProps';
 
 export interface CarouselProductCardProps extends CarouselProductCardContent, UniBlockProps {}
 
@@ -39,16 +40,16 @@ export const CarouselProductCard = JSX<CarouselProductCardProps>(
   }) => {
     return (
       <BlockWrapper
-        className={style('flex flex-col justify-between', align, className)}
+        className={style('flex flex-col justify-between', className)}
         defaultPadding="p-0"
         version={version}
         {...rest}
       >
         <LinkWrapper className="p-m flex flex-col gap-xs" href={href} target={target}>
-          {renderCardTitle(headlineSmallVersion, title)}
-          {renderDescription(description)}
+          {renderCardTitle(headlineSmallVersion, title, align)}
+          {renderDescription(description, align)}
           {renderItems(items, isDotted, version)}
-          {renderAdditionalDescription(additionalDescription)}
+          {renderAdditionalDescription(additionalDescription, align)}
           {renderImage(icon, isImageFullWidth, isTopPosition)}
         </LinkWrapper>
         {renderButtonsSection([button], {
@@ -63,33 +64,42 @@ export const CarouselProductCard = JSX<CarouselProductCardProps>(
 const renderImage = (image?: Picture, isImageFullWidth?: boolean, isTopPosition?: boolean) => (
   <div
     className={style(
-      'flex gap-lg',
+      'flex gap-y-lg justify-center',
+      isImageFullWidth ? 'min-w-full h-full' : '',
       isTopPosition ? 'order-first' : 'order-last',
-      !isImageFullWidth ? 'justify-center' : '',
     )}
   >
-    {image?.src ? <Img className="shrink-0" image={image} /> : null}
+    {image?.src ? <Img image={image} /> : null}
     {image?.icon ? (
       <Img
-        className={style('shrink-0', !isImageFullWidth ? 'w-8 h-8 min-w-8' : '')}
+        className={style(!isImageFullWidth ? 'w-8 h-8 min-w-8' : 'w-full h-full')}
         image={image}
       />
     ) : null}
   </div>
 );
 
-const renderCardTitle = (headlineSmallVersion: string, title?: string) =>
-  title ? <Text size={HEADLINE_SMALL_VERSION[headlineSmallVersion]}>{title}</Text> : null;
+const renderCardTitle = (headlineSmallVersion: string, title?: string, align?: TextAlign) =>
+  title ? (
+    <Text align={align} size={HEADLINE_SMALL_VERSION[headlineSmallVersion]}>
+      {title}
+    </Text>
+  ) : null;
 
-const renderDescription = (description?: string) =>
-  description ? <Paragraph size="text-l">{description}</Paragraph> : null;
+const renderDescription = (description?: string, align?: TextAlign) =>
+  description ? (
+    <Paragraph align={align} size="text-l">
+      {description}
+    </Paragraph>
+  ) : null;
 
-const renderAdditionalDescription = (additionalDescription?: string) =>
+const renderAdditionalDescription = (additionalDescription?: string, align?: TextAlign) =>
   additionalDescription ? (
     <Text
       size="text-m"
       font="font-light"
       color="text-secondary-text group-data-secondary:text-white/80"
+      align={align}
     >
       {additionalDescription}
     </Text>

package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.example.json

@@ -15,8 +15,7 @@
         "href": "https://t.me",
         "target": "_blank",
         "version": "gray",
-        "rounded": false,
-        "text": "Текст"
+        "rounded": false
       }
     ],
     "version": "primary",

package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.fixture.mobile.tsx

@@ -1,9 +1,9 @@
 import '../../setup-fixture';
 
 import type { Picture } from '../../model/Picture';
-import type { SocialMediaLink } from '../Footer/FooterContent';
-import { CarouselRecommendationCard } from './CarouselRecommendationCard';
+import type { ButtonContent } from '../../ui-kit/Button/ButtonContent';
 import type { CarouselRecommendationCardContent } from './CarouselRecommendationCardContent';
+import { CarouselRecommendationCard } from './CarouselRecommendationCard';
 
 const icon: Picture = {
   src: 'product-basket.png',
@@ -15,7 +15,7 @@ const icon: Picture = {
   title: 'product-basket',
 };
 
-const socialMediaWithText: SocialMediaLink[] = [
+const socialMediaWithText: ButtonContent[] = [
   {
     href: 'https://t.me',
     text: 'Telegram',
@@ -30,7 +30,7 @@ const socialMediaWithText: SocialMediaLink[] = [
   },
 ];
 
-const socialMediaWithoutText: SocialMediaLink[] = [
+const socialMediaWithoutText: ButtonContent[] = [
   {
     href: 'https://t.me',
   },

package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.fixture.tsx

@@ -1,9 +1,9 @@
 import '../../setup-fixture';
 
 import type { Picture } from '../../model/Picture';
-import type { SocialMediaLink } from '../Footer/FooterContent';
-import { CarouselRecommendationCard } from './CarouselRecommendationCard';
+import type { ButtonContent } from '../../ui-kit/Button/ButtonContent';
 import type { CarouselRecommendationCardContent } from './CarouselRecommendationCardContent';
+import { CarouselRecommendationCard } from './CarouselRecommendationCard';
 
 const icon: Picture = {
   src: 'product-basket.png',
@@ -15,22 +15,22 @@ const icon: Picture = {
   title: 'product-basket',
 };
 
-const socialMediaWithText: SocialMediaLink[] = [
+const socialMediaWithText: ButtonContent[] = [
   {
     href: 'https://t.me',
-    text: 'Telegram',
+    text: 'Телеграм',
   },
   {
     href: 'https://vk.com',
-    text: 'Telegram',
+    text: 'ВКонтакте',
   },
   {
     href: 'https://ok.ru',
-    text: 'Telegram',
+    text: 'Одноклассники',
   },
 ];
 
-const socialMediaWithoutText: SocialMediaLink[] = [
+const socialMediaWithoutText: ButtonContent[] = [
   {
     href: 'https://t.me',
   },

package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.mobile.tsx

@@ -43,7 +43,7 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
             <List className="flex flex-col gap-xs" items={items} listItemSize="XS" />
           ) : null}
           {renderIcon(icon)}
-          {socialMedia.length ? <SocialMedia media={socialMedia} /> : null}
+          {socialMedia.length ? <SocialMedia media={socialMedia} showButtonText={true} /> : null}
         </LinkWrapper>
       </BlockWrapper>
     );

package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.tsx

@@ -51,7 +51,9 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
               ) : null
             }
             backImage={icon?.icon || icon?.src ? <Img image={icon} /> : null}
-            buttons={socialMedia.length ? <SocialMedia media={socialMedia} /> : null}
+            buttons={
+              socialMedia.length ? <SocialMedia media={socialMedia} showButtonText={true} /> : null
+            }
           >
             {items.length ? <List items={items} listItemSize={listItemSize} /> : null}
           </BaseTile>

package/src/components/CarouselRecommendationCard/CarouselRecommendationCardContent.ts

@@ -2,8 +2,8 @@ import type { AlignProps, HeadlineCommonProps } from '../../model/HeadlineType';
 import type { UniBlockContent } from '../../model/JSXBlock';
 import type { LinkCommonProps } from '../../model/LinkProps';
 import type { IconProps } from '../../model/Picture';
+import type { ButtonContent } from '../../ui-kit/Button/ButtonContent';
 import type { ListContent } from '../../ui-kit/List/ListContent';
-import type { SocialMediaLink } from '../Footer/FooterContent';
 
 /**
  * @title Карточка рекомендаций
@@ -15,5 +15,5 @@ export type CarouselRecommendationCardContent = UniBlockContent &
   LinkCommonProps &
   AlignProps & {
     /** @title Соц сети */
-    socialMedia?: SocialMediaLink[];
+    socialMedia?: ButtonContent[];
   };

package/src/components/Depository/Depository.example.json

@@ -0,0 +1 @@
+{}

package/src/components/Depository/Depository.fixture.tsx

@@ -0,0 +1,10 @@
+import '../../setup-fixture';
+import { Depository } from './Depository';
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <Depository className="col-span-12" />
+    </div>
+  ),
+};

package/src/components/Depository/Depository.tsx

@@ -0,0 +1,43 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
+import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { Pagination } from '../../ui-kit/Pagination/Pagination';
+import { style } from '../../utils/style';
+import type { DepositoryContent } from './DepositoryContent';
+import { DepositoryItem } from './DepositoryItem';
+import { useDepository } from './useDepository';
+
+const DEFAULT_ITEMS_COUNT = 10;
+
+interface DepositoryProps extends DepositoryContent, UniBlockProps {}
+
+export const Depository: JSXBlock<DepositoryProps> = JSX<DepositoryProps>(
+  ({ className, ...rest }) => {
+    const [currentPage, setCurrentPage] = useState(0);
+    const [itemCount] = useState(DEFAULT_ITEMS_COUNT);
+
+    const { totalPages = 0, items } = useDepository(itemCount, currentPage);
+
+    const handleChangePage = useCallback((page) => setCurrentPage(page - 1), []);
+
+    return (
+      <BlockWrapper className={style(className, 'container p-4xl')} {...rest}>
+        <div className="flex flex-col">
+          <div className="grid grid-cols-12 pb-lg border-gray border-opacity-50 border-b">
+            <span className="col-span-2 text-gray text-m">Дата</span>
+            <span className="col-span-10 text-gray text-m">Тема</span>
+          </div>
+          {items?.map((params) => (
+            <DepositoryItem key={String(params.publicId)} {...params} />
+          ))}
+          <Pagination
+            currentPage={currentPage + 1}
+            onPageChange={handleChangePage}
+            totalPages={totalPages + 1}
+          />
+        </div>
+      </BlockWrapper>
+    );
+  },
+);

package/src/components/Depository/Depository.ui.json

@@ -0,0 +1 @@
+{}

package/src/components/Depository/DepositoryContent.ts

@@ -0,0 +1,3 @@
+import type { UniBlockContent } from '../../model/JSXBlock';
+
+export type DepositoryContent = UniBlockContent;

package/src/components/Depository/DepositoryItem.tsx

@@ -0,0 +1,21 @@
+import { useLink } from '../../hooks/useLink';
+import { convertTimestampToDate } from '../../utils/convertTimestampToDate';
+import { DepositoryDataItem } from './useDepository';
+
+export const DepositoryItem = ({ title, timestamp = 0, publicId }: DepositoryDataItem) => {
+  const link = useLink();
+  const { href } = link({ href: `/api/v1/depository/${publicId}/file` });
+
+  return (
+    <div className="grid grid-cols-12 py-lg border-gray border-opacity-50 border-b" key={publicId}>
+      <div className="col-span-2 text-m">
+        <span>{convertTimestampToDate(timestamp)}</span>
+      </div>
+      <div className="col-span-10 text-h6 hover:text-primary-active">
+        <a href={href} download aria-label="Скачать">
+          {title}
+        </a>
+      </div>
+    </div>
+  );
+};

package/src/components/Depository/useDepository.ts

@@ -0,0 +1,23 @@
+import { useAsyncData } from '@redneckz/uni-jsx/lib/hooks/useAsyncData';
+import { fetchJSONUnsafe } from '../../utils/fetchJSON';
+
+export interface DepositoryDataItem {
+  publicId?: number;
+  timestamp?: number;
+  title?: number;
+}
+
+interface DepositoryData {
+  content?: DepositoryDataItem[];
+  totalPages?: number;
+  totalElements?: number;
+}
+
+export const useDepository = (size: number, page: number) => {
+  const { data } = useAsyncData<DepositoryData>(
+    `/api/v1/depository?page=${page}&size=${size}`,
+    fetchJSONUnsafe,
+  );
+
+  return { items: data?.content, totalPages: data?.totalPages };
+};

package/src/components/Footer/Footer.mobile.tsx

@@ -39,7 +39,7 @@ export const Footer = JSX<FooterProps>(({ className, ...rest }) => {
       </div>
       <Contacts className="overflow-hidden" items={contacts} />
       <div className="mt-xl">
-        <SocialMedia className="mb-xl" media={socialMedia} buttonSize="stretched">
+        <SocialMedia className="mb-xl" media={socialMedia} stretched={true}>
           Соцсети
         </SocialMedia>
         <Text size="text-s" font="font-light" color="text-secondary-text">

package/src/components/Footer/FooterContent.ts

@@ -1,11 +1,7 @@
 import type { DescriptionProps } from '../../model/HeadlineType';
 import type { UniBlockContent } from '../../model/JSXBlock';
 import type { LinkProps } from '../../model/LinkProps';
-import type { IconProps, Picture } from '../../model/Picture';
-
-export interface SocialMediaLink extends LinkProps {
-  icon?: Picture;
-}
+import type { IconProps } from '../../model/Picture';
 
 /**
  * @title Тип контакта

package/src/components/Footer/FooterDataProps.ts

@@ -1,12 +1,13 @@
 import type { LinkProps } from '../../model/LinkProps';
 import type { SitemapData } from '../../services/sitemap/SitemapData';
-import type { ContactGroup, SocialMediaLink } from './FooterContent';
+import type { ButtonContent } from '../../ui-kit/Button/ButtonContent';
+import type { ContactGroup } from './FooterContent';
 
 export interface FooterDataProps extends SitemapData {
   documents?: LinkProps[];
   relatedEnterprises?: LinkProps[];
   contacts?: ContactGroup[];
-  socialMedia?: SocialMediaLink[];
-  mobileApps?: SocialMediaLink[];
+  socialMedia?: ButtonContent[];
+  mobileApps?: ButtonContent[];
   horizontalNavigationTitle?: string; // TODO: для мобильной версии
 }

package/src/components/Footer/SocialMedia.tsx

@@ -1,29 +1,61 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import type { Picture } from '../../model/Picture';
 import type { ButtonContent } from '../../ui-kit/Button/ButtonContent';
+import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Text } from '../../ui-kit/Text/Text';
 import { style } from '../../utils/style';
-import type { ButtonSize } from './MediaButton';
-import { MediaButton } from './MediaButton';
+import { findIconByHref } from './findIconByHref';
 
 export interface SocialMediaProps {
   className?: string;
   media?: ButtonContent[];
-  buttonSize?: ButtonSize;
+  showButtonText?: boolean;
+  stretched?: boolean;
 }
 
 export const SocialMedia = JSX<SocialMediaProps>(
-  ({ className = '', media, children, buttonSize }) => (
-    <div className="flex flex-col sm:flex-col-reverse gap-xs">
-      {children ? (
-        <Text size="text-s" font="font-light" color="text-secondary-text">
-          {children}
-        </Text>
-      ) : null}
-      <div className={style('flex gap-xs', className)}>
-        {media?.map((_, index) => (
-          <MediaButton key={String(index)} buttonSize={buttonSize} {..._} />
-        ))}
+  ({ className = '', media, showButtonText, stretched, children }) => {
+    const [hasText, setHasText] = useState<boolean | undefined>();
+    const buttons: ButtonContent[] | undefined = media?.map((_) => {
+      const { href, icon, text } = _;
+      const { iconMapped } = findIconByHref(href);
+      const iconCustom = getFilteredIcon(icon) ?? iconMapped;
+      const buttonText = showButtonText ? { text } : {};
+
+      if (!hasText && text) {
+        setHasText(true);
+      }
+
+      return {
+        ...buttonText,
+        icon: { ...iconCustom, iconVersion: 'color' },
+        version: 'white',
+      };
+    });
+
+    const buttonClassName = style(
+      'border border-solid hover:border-transparent group-data-primary:border-main-divider border-main-divider group-data-gray:border-green group/media',
+      showButtonText && hasText ? '' : ' basis-auto',
+      stretched ? 'flex-1 justify-center' : '',
+    );
+
+    return (
+      <div className="flex flex-col sm:flex-col-reverse gap-xs">
+        {children ? (
+          <Text size="text-s" font="font-light" color="text-secondary-text">
+            {children}
+          </Text>
+        ) : null}
+        <div className={style('flex gap-xs', className)}>
+          {renderButtonsSection(buttons, {
+            className: stretched ? 'w-full' : '',
+            buttonClassName,
+          })}
+        </div>
       </div>
-    </div>
-  ),
+    );
+  },
 );
+
+const getFilteredIcon = (icon: Picture | undefined) => (icon?.src || icon?.icon ? icon : undefined);

package/src/components/Footer/iconsMap.ts

@@ -10,36 +10,29 @@ export const ICONS_MAP: Array<IconsMapItem> = [
   {
     origins: ['t.me', 'telegram.org'],
     iconMapped: { icon: 'TelegramIcon' },
-    label: 'Телеграм',
   },
   {
     origins: ['vk.com'],
     iconMapped: { icon: 'VKIcon' },
-    label: 'ВКонтакте',
   },
   {
     origins: ['ok.ru'],
     iconMapped: { icon: 'OkIcon' },
-    label: 'Одноклассники',
   },
   {
     origins: ['apps.apple.com'],
     iconMapped: { icon: 'AppleIcon' },
-    label: 'App Store',
   },
   {
     origins: ['play.google.com'],
     iconMapped: { icon: 'PlayMarketIcon' },
-    label: 'Google Play',
   },
   {
     origins: ['youtube.com'],
     iconMapped: { icon: 'YoutubeIcon' },
-    label: 'Youtube',
   },
   {
     origins: ['rutube.ru'],
     iconMapped: { icon: 'RutubeIcon' },
-    label: 'Rutube',
   },
 ];