@redneckz/wildless-cms-uni-blocks 0.14.78 → 0.14.80

package/mobile/lib/components/OfficesAtmsMap/renderOfficeCard.js

@@ -1,40 +1,53 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@redneckz/uni-jsx/jsx-runtime";
+import { Foldable } from '../../ui-kit/Foldable/Foldable.js';
+import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection.js';
 import { Icon } from '../../ui-kit/Icon/Icon.js';
 import { Text } from '../../ui-kit/Text/Text.js';
-import { Badge } from './Badge.js';
 import { CardCell } from './CardCell.js';
 import { CardRow } from './CardRow.js';
 import { getScheduleDescription } from './getScheduleDescription.js';
 import { getWorkScheduleWeek } from './getWorkScheduleWeek.js';
 import { renderAlternativeDay, renderBusinessSchedule } from './renderBusinessSchedule.js';
-const currentWeekDayIdx = new Date().getDay();
+import { renderCurrency } from './renderCurrency.js';
+import { renderCurrentDaySchedule } from './renderCurrentDaySchedule.js';
+import { renderDay } from './renderDay.js';
+import { renderFoldButton } from './renderFoldButton.js';
 export const renderOfficeCard = ({ name, address, phone, fax, phoneBusiness, phoneNatural, phoneCallCentre, phoneCurrencyControl, workSchedule, exchangeRate, }, index) => {
     if (!workSchedule) {
         return null;
     }
+    const workScheduleWeek = getWorkScheduleWeek(workSchedule);
+    return (_jsxs("div", { className: "bg-white col-span-12 p-3xl sm:border-green sm:border", children: [_jsxs("div", { className: "sm:flex sm:justify-between", children: [_jsxs("div", { children: [_jsx(Text, { size: "text-h4", children: name }), address ? (_jsxs("div", { className: "flex pb-xl pt-xs gap-2xs", children: [_jsx(Icon, { name: "GeolocationIcon", width: "24", height: "24" }), _jsx(Text, { size: "text-l", children: address })] })) : null] }), renderCurrentDaySchedule(workScheduleWeek)] }), _jsx("div", { className: "hidden sm:block", children: renderCardContent({
+                    phone,
+                    fax,
+                    phoneBusiness,
+                    phoneNatural,
+                    phoneCallCentre,
+                    phoneCurrencyControl,
+                    workSchedule,
+                    exchangeRate,
+                }) }), _jsx(Foldable, { className: "block sm:hidden", renderFoldableSection: ({ isUnfolded }) => {
+                    return (_jsx(FoldableSection, { isUnfolded: isUnfolded, children: renderCardContent({
+                            phone,
+                            fax,
+                            phoneBusiness,
+                            phoneNatural,
+                            phoneCallCentre,
+                            phoneCurrencyControl,
+                            workSchedule,
+                            exchangeRate,
+                        }) }));
+                }, 
+                //** TODO: remove styles with refactoring  DefaultFoldButton*/
+                renderFoldButton: ({ isUnfolded, onToggle }) => renderFoldButton({ isUnfolded, onToggle }) })] }, String(index)));
+};
+const renderCardContent = ({ phone, fax, phoneBusiness, phoneNatural, phoneCallCentre, phoneCurrencyControl, workSchedule, exchangeRate, }) => {
     const workScheduleWeek = getWorkScheduleWeek(workSchedule);
     const labelSchedule = workSchedule?.businessScheduleVisibleTag
         ? 'Для физических лиц'
         : 'Для физических и юридических лиц';
-    return (_jsxs("div", { className: "bg-white col-span-12 p-3xl border-green border", children: [_jsxs("div", { className: "flex justify-between", children: [_jsx(Text, { size: "text-h4", children: name }), renderCurrentDaySchedule(workScheduleWeek)] }), address ? (_jsxs("div", { className: "flex pb-xl pt-xs gap-2xs", children: [_jsx(Icon, { name: "GeolocationIcon", width: "24", height: "24" }), _jsx(Text, { size: "text-l", children: address })] })) : null, _jsxs(CardRow, { className: "flex-wrap", children: [_jsx(CardCell, { label: "\u0424\u0430\u043A\u0441", value: fax }), _jsx(CardCell, { label: "\u0422\u0435\u043B\u0435\u0444\u043E\u043D \u0444\u0438\u043B\u0438\u0430\u043B\u0430", value: phone }), _jsx(CardCell, { label: "\u0414\u043B\u044F \u043E\u0431\u0440\u0430\u0449\u0435\u043D\u0438\u0439 \u044E\u0440\u0438\u0434\u0438\u0447\u0435\u0441\u043A\u0438\u0445 \u043B\u0438\u0446", value: phoneBusiness }), _jsx(CardCell, { label: "\u041E\u0431\u0441\u043B\u0443\u0436\u0438\u0432\u0430\u043D\u0438\u0435 \u0444\u0438\u0437\u0438\u0447\u0435\u0441\u043A\u0438\u0445 \u043B\u0438\u0446", value: phoneNatural }), _jsx(CardCell, { label: "\u0414\u043B\u044F \u043A\u043E\u043D\u0441\u0443\u043B\u044C\u0442\u0430\u0446\u0438\u0439 \u043F\u043E \u0432\u0430\u043B\u044E\u0442\u043D\u043E\u043C\u0443 \u043A\u043E\u043D\u0442\u0440\u043E\u043B\u044E", value: phoneCurrencyControl }), _jsx(CardCell, { label: "\u041A\u043E\u043D\u0442\u0430\u043A\u0442-\u0446\u0435\u043D\u0442\u0440", value: phoneCallCentre })] }), workSchedule.isMatchesPattern ? (_jsx(CardRow, { children: _jsx(CardCell, { label: labelSchedule, labelSize: "text-l", className: "w-full max-w-none", children: _jsx("div", { className: "flex flex-wrap gap-xs sm:justify-between pt-xs", children: workScheduleWeek?.map(renderDay) }) }) })) : (_jsxs(CardRow, { children: [_jsx(CardCell, { label: labelSchedule, labelSize: "text-l", children: _jsx("div", { className: "flex gap-1", children: workScheduleWeek?.map(renderAlternativeDay) }) }), getScheduleDescription(workScheduleWeek)] })), workSchedule?.businessScheduleVisibleTag
+    return (_jsxs("div", { children: [_jsxs(CardRow, { className: "flex-wrap", children: [_jsx(CardCell, { label: "\u0424\u0430\u043A\u0441", value: fax }), _jsx(CardCell, { label: "\u0422\u0435\u043B\u0435\u0444\u043E\u043D \u0444\u0438\u043B\u0438\u0430\u043B\u0430", value: phone }), _jsx(CardCell, { label: "\u0414\u043B\u044F \u043E\u0431\u0440\u0430\u0449\u0435\u043D\u0438\u0439 \u044E\u0440\u0438\u0434\u0438\u0447\u0435\u0441\u043A\u0438\u0445 \u043B\u0438\u0446", value: phoneBusiness }), _jsx(CardCell, { label: "\u041E\u0431\u0441\u043B\u0443\u0436\u0438\u0432\u0430\u043D\u0438\u0435 \u0444\u0438\u0437\u0438\u0447\u0435\u0441\u043A\u0438\u0445 \u043B\u0438\u0446", value: phoneNatural }), _jsx(CardCell, { label: "\u0414\u043B\u044F \u043A\u043E\u043D\u0441\u0443\u043B\u044C\u0442\u0430\u0446\u0438\u0439 \u043F\u043E \u0432\u0430\u043B\u044E\u0442\u043D\u043E\u043C\u0443 \u043A\u043E\u043D\u0442\u0440\u043E\u043B\u044E", value: phoneCurrencyControl }), _jsx(CardCell, { label: "\u041A\u043E\u043D\u0442\u0430\u043A\u0442-\u0446\u0435\u043D\u0442\u0440", value: phoneCallCentre })] }), workSchedule?.isMatchesPattern ? (_jsx(CardRow, { children: _jsx(CardCell, { label: labelSchedule, labelSize: "text-l", className: "w-full max-w-none", children: _jsx("div", { className: "flex flex-wrap gap-xs sm:justify-between pt-xs", children: workScheduleWeek?.map(renderDay) }) }) })) : (_jsxs(CardRow, { children: [_jsx(CardCell, { label: labelSchedule, labelSize: "text-l", children: _jsx("div", { className: "flex gap-1", children: workScheduleWeek?.map(renderAlternativeDay) }) }), getScheduleDescription(workScheduleWeek)] })), workSchedule?.businessScheduleVisibleTag
                 ? renderBusinessSchedule(workSchedule?.businessScheduleDescription)
-                : null, exchangeRate?.currencies?.length ? (_jsx(CardRow, { className: "flex-wrap", children: exchangeRate?.currencies?.map(renderCurrency) })) : null] }, String(index)));
-};
-export const renderCurrency = ({ currency, buyExchangeRate, saleExchangeRate }, i) => (_jsxs("div", { className: "flex gap-lg h-full", children: [currency?.currency ? _jsx(CardCell, { label: "\u0412\u0430\u043B\u044E\u0442\u0430", value: currency.currency }) : null, buyExchangeRate ? _jsx(CardCell, { label: "\u041A\u0443\u043F\u0438\u0442\u044C", value: String(buyExchangeRate) }) : null, saleExchangeRate ? _jsx(CardCell, { label: "\u041F\u0440\u043E\u0434\u0430\u0442\u044C", value: String(saleExchangeRate) }) : null] }, String(i)));
-//TODO: Add logic time https://github.com/redneckz/wildless-cms-uni-blocks/pull/1549
-export const renderCurrentDaySchedule = (workScheduleWeek) => {
-    const [currentWeekDay] = workScheduleWeek?.slice(currentWeekDayIdx - 1) ?? [];
-    if (!currentWeekDay) {
-        return null;
-    }
-    const { lunchHour, status, workTime, hasLunch } = currentWeekDay;
-    return status ? (_jsxs("div", { className: "flex gap-s items-start whitespace-nowrap", children: [workTime ? _jsx(Badge, { color: "green", children: workTime }) : null, lunchHour && hasLunch ? _jsx(Badge, { color: "yellow", children: `перерыв: ${lunchHour}` }) : null] })) : (_jsx(Badge, { color: "red", children: "\u0412\u044B\u0445\u043E\u0434\u043D\u043E\u0439" }));
-};
-export const renderDay = ({ title, status, workTime, lunchHour, hasLunch }, index) => (_jsx(CardCell, { label: title, value: status && workTime ? workTime : '', subText: getSubTextLunch(lunchHour, hasLunch, status), subColor: !status || hasLunch ? 'text-error' : 'text-green-dark' }, String(index)));
-const getSubTextLunch = (lunchHour, hasLunch = false, status = false) => {
-    if (!status) {
-        return 'Не работает';
-    }
-    return lunchHour && hasLunch ? `Перерыв ${lunchHour}` : lunchHour;
+                : null, exchangeRate?.currencies?.length ? (_jsx(CardRow, { className: "flex-wrap", children: exchangeRate?.currencies?.map(renderCurrency) })) : null] }));
 };
 //# sourceMappingURL=renderOfficeCard.js.map

package/mobile/lib/components/OfficesAtmsMap/renderOfficeCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"renderOfficeCard.js","sourceRoot":"","sources":["../../../src/components/OfficesAtmsMap/renderOfficeCard.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"renderOfficeCard.js","sourceRoot":"","sources":["../../../src/components/OfficesAtmsMap/renderOfficeCard.tsx"],"names":[],"mappings":"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"}

package/mobile/src/components/LinkDocs/LinkDocItem.tsx

@@ -9,7 +9,7 @@ export interface LinkDocItemProps extends LinkDoc {
 
 export const LinkDocItem = JSX<LinkDocItemProps>(
   ({ icon, text, href, target, fileFormat, fileSize }) => {
-    const prefix = fileFormat || fileSize ? ',' : '';
+    const prefix = fileSize && fileFormat ? ',' : '';
     const size = fileSize ?? '';
     const format = fileFormat ? String(fileFormat) : '';
 
@@ -23,11 +23,13 @@ export const LinkDocItem = JSX<LinkDocItemProps>(
         {icon}
         {text ? (
           <Text size="text-l" font="font-light">
-            {text}
-            <Text color="text-secondary-text">{href && `${size} ${prefix} ${format}`}</Text>
+            {text} {addSpace(size, format)}
+            <Text color="text-secondary-text">{href && `${size + prefix + format}`}</Text>
           </Text>
         ) : null}
       </a>
     );
   },
 );
+
+const addSpace = (size: string, format: string) => (size || format ? <span>&#44;&nbsp;</span> : '');

package/mobile/src/components/LinkDocs/LinkDocs.tsx

@@ -74,7 +74,8 @@ const renderLinkDocItem =
         ? formatBytes(docBlockDef?.attachment?.fileSize || 0)
         : docBlockDef?.fileSize;
 
-    const fileFormat = docBlockDef?.docType !== 'Attachment' ? docBlockDef?.fileFormat : '';
+    const fileFormat =
+      docBlockDef?.docType === 'Attachment' ? getExtFromHref(href) : docBlockDef?.fileFormat;
 
     return (
       <div key={String(i)} role="listitem">
@@ -89,3 +90,13 @@ const renderLinkDocItem =
       </div>
     );
   };
+
+const getExtFromHref = (href?: string) => {
+  if (!href) {
+    return '';
+  }
+
+  const index = href.lastIndexOf('.');
+
+  return index !== -1 ? href.substring(index + 1) : '';
+};

package/mobile/src/components/OfficesAtmsMap/Badge.tsx

@@ -18,7 +18,7 @@ export interface BadgeProps {
 export const Badge = JSX<BadgeProps>(({ className, children, color = 'gray' }) => (
   <div
     className={style(
-      'p-s border border-gray rounded-md flex items-center',
+      'p-s sm:border sm:border-gray rounded-md flex items-center',
       colorStyle[color].border,
       className,
     )}

package/mobile/src/components/OfficesAtmsMap/CardRow.tsx

@@ -8,7 +8,7 @@ export interface CardRowProps {
 export const CardRow = JSX<CardRowProps>(({ className, children }) => (
   <div
     className={style(
-      'flex border-t border-solid border-main-divider py-xl gap-x-6xl gap-y-xl',
+      'sm:flex sm:border-t sm:border-solid sm:border-main-divider py-xl gap-x-6xl gap-y-xl',
       className,
     )}
   >

package/mobile/src/components/OfficesAtmsMap/OfficesAtmsMapContent.ts

@@ -11,7 +11,7 @@ export type ItemList = {
 };
 
 /**
- * @title Офисы
+ * @title Офисам
  * @default {"dataType": "offices"}
  */
 export type OfficesDef = {
@@ -19,7 +19,7 @@ export type OfficesDef = {
 };
 
 /**
- * @title Банкоматы
+ * @title Банкоматам
  * @default {"dataType": "atms"}
  */
 export type AtmsDef = {
@@ -37,7 +37,7 @@ export type EmptyOfficesAtmsBlock = {
 };
 
 /**
- * @title Данные
+ * @title Данные по
  * @default { "dataType": "" }
  */
 export type OfficesAtmsBlockDef = EmptyOfficesAtmsBlock | OfficesDef | AtmsDef;

package/mobile/src/components/OfficesAtmsMap/OfficesAtmsMapLayout.tsx

@@ -74,14 +74,14 @@ export const OfficesAtmsMapLayout = JSX<OfficesAtmsMapLayoutProps<Branch | Atm>>
 
 const renderDescriptionBlock = ({ description, list }: AtmsDef) =>
   description || list?.length ? (
-    <div className="p-xl mb-2xl border border-gray rounded-md">
+    <div className="p-xl mb-2xl border-b sm:border border-main-divider sm:rounded-md">
       {description ? (
         <Paragraph size="text-l" font="font-light">
           {description}
         </Paragraph>
       ) : null}
       {list?.length ? (
-        <div className="flex gap-2xl flex-wrap pt-xs">
+        <div className="flex flex-col sm:flex-row gap-2xl sm:flex-wrap pt-xs">
           {list.map((item, i) => (
             <div key={String(i)} className="flex gap-xs items-center">
               {item?.image ? <Img image={item.image} /> : null}

package/mobile/src/components/OfficesAtmsMap/renderAtmCard.tsx

@@ -1,9 +1,12 @@
+import { Foldable } from '../../ui-kit/Foldable/Foldable';
+import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
 import { Icon } from '../../ui-kit/Icon/Icon';
 import { Text } from '../../ui-kit/Text/Text';
 import { Badge } from './Badge';
 import { CardCell } from './CardCell';
 import { CardRow } from './CardRow';
 import { type Atm } from './OfficesAtmsMapProps';
+import { renderFoldButton } from './renderFoldButton';
 
 export const renderAtmCard = (
   {
@@ -36,18 +39,34 @@ export const renderAtmCard = (
   ];
 
   return (
-    <div key={String(index)} className="bg-white col-span-12 p-3xl border-green border">
-      <div className="flex justify-between">
-        <Text size="text-h4">{capitalizedFirstLetter(location)}</Text>
+    <div key={String(index)} className="bg-white col-span-12 p-3xl sm:border-green sm:border">
+      <div className="sm:flex sm:justify-between">
+        <div>
+          <Text size="text-h4">{capitalizedFirstLetter(location)}</Text>
+          {address ? (
+            <div className="flex pb-xl pt-xs gap-2xs">
+              <Icon name="GeolocationIcon" width="24" height="24" />
+              <Text size="text-l">{address}</Text>
+            </div>
+          ) : null}
+        </div>
         <Badge color="green">{capitalizedFirstLetter(workTime)}</Badge>
       </div>
-      {address ? (
-        <div className="flex pb-xl pt-xs gap-2xs">
-          <Icon name="GeolocationIcon" width="24" height="24" />
-          <Text size="text-l">{address}</Text>
-        </div>
-      ) : null}
-      <CardRow className="flex-wrap">{additionalInfo?.map(renderInfo)}</CardRow>
+      <div className="hidden sm:block">
+        <CardRow className="flex-wrap">{additionalInfo?.map(renderInfo)}</CardRow>
+      </div>
+      <Foldable
+        className="block sm:hidden"
+        renderFoldableSection={({ isUnfolded }) => {
+          return (
+            <FoldableSection isUnfolded={isUnfolded}>
+              <CardRow className="flex-wrap">{additionalInfo?.map(renderInfo)}</CardRow>
+            </FoldableSection>
+          );
+        }}
+        //** TODO: Remove styles with refactoring  DefaultFoldButton*/
+        renderFoldButton={({ isUnfolded, onToggle }) => renderFoldButton({ isUnfolded, onToggle })}
+      />
     </div>
   );
 };

package/mobile/src/components/OfficesAtmsMap/renderCurrency.tsx

@@ -0,0 +1,13 @@
+import { CardCell } from './CardCell';
+import { type Currency } from './OfficesAtmsMapProps';
+
+export const renderCurrency = (
+  { currency, buyExchangeRate, saleExchangeRate }: Currency,
+  i: number,
+) => (
+  <div key={String(i)} className="flex gap-lg h-full">
+    {currency?.currency ? <CardCell label="Валюта" value={currency.currency} /> : null}
+    {buyExchangeRate ? <CardCell label="Купить" value={String(buyExchangeRate)} /> : null}
+    {saleExchangeRate ? <CardCell label="Продать" value={String(saleExchangeRate)} /> : null}
+  </div>
+);

package/mobile/src/components/OfficesAtmsMap/renderCurrentDaySchedule.tsx

@@ -0,0 +1,24 @@
+import { Badge } from './Badge';
+import { type WorkScheduleWeek } from './OfficesAtmsMapProps';
+
+const currentWeekDayIdx = new Date().getDay();
+
+//TODO: Add logic time https://github.com/redneckz/wildless-cms-uni-blocks/pull/1549
+export const renderCurrentDaySchedule = (workScheduleWeek?: WorkScheduleWeek[]) => {
+  const [currentWeekDay] = workScheduleWeek?.slice(currentWeekDayIdx - 1) ?? [];
+
+  if (!currentWeekDay) {
+    return null;
+  }
+
+  const { lunchHour, status, workTime, hasLunch } = currentWeekDay;
+
+  return status ? (
+    <div className="flex gap-s items-start whitespace-nowrap">
+      {workTime ? <Badge color="green">{workTime}</Badge> : null}
+      {lunchHour && hasLunch ? <Badge color="yellow">{`перерыв: ${lunchHour}`}</Badge> : null}
+    </div>
+  ) : (
+    <Badge color="red">Выходной</Badge>
+  );
+};

package/mobile/src/components/OfficesAtmsMap/renderDay.tsx

@@ -0,0 +1,23 @@
+import { CardCell } from './CardCell';
+import { type WorkScheduleWeek } from './OfficesAtmsMapProps';
+
+const getSubTextLunch = ({ lunchHour, hasLunch = false, status = false }: WorkScheduleWeek) => {
+  if (!status) {
+    return 'Не работает';
+  }
+
+  return lunchHour && hasLunch ? `Перерыв ${lunchHour}` : lunchHour;
+};
+
+export const renderDay = (
+  { title, status, workTime, lunchHour, hasLunch }: WorkScheduleWeek,
+  index: number,
+) => (
+  <CardCell
+    key={String(index)}
+    label={title}
+    value={status && workTime ? workTime : ''}
+    subText={getSubTextLunch({ lunchHour, hasLunch, status })}
+    subColor={!status || hasLunch ? 'text-error' : 'text-green-dark'}
+  />
+);

package/mobile/src/components/OfficesAtmsMap/renderFiltrationForm.tsx

@@ -18,7 +18,7 @@ export const renderFiltrationForm = (
 ) => (
   <div className="pb-2xl">
     {filters?.length ? (
-      <div className="flex flex-wrap gap-3xl pb-2xl">
+      <div className="flex flex-col sm:flex-row sm:flex-wrap gap-3xl pb-2xl">
         {filters.map((key) => (
           <Checkbox key={key} text={FILTRATION_LABELS[key]} {...field(key)} />
         ))}

package/mobile/src/components/OfficesAtmsMap/renderFoldButton.tsx

@@ -0,0 +1,17 @@
+import { type IconName } from '../../icons/IconName';
+import { type VNode } from '../../model/VNode';
+import { type FoldablePartProps } from '../../ui-kit/Foldable/FoldablePartProps';
+import { Icon } from '../../ui-kit/Icon/Icon';
+
+const ICONS: IconName[] = ['ArrowDownIcon', 'ArrowUpIcon'];
+const labels = ['Подробнее', 'Скрыть'];
+
+export const renderFoldButton = ({ isUnfolded, onToggle }: FoldablePartProps): VNode => (
+  <button
+    className="w-full py-2xl cursor-pointer text-primary-main flex items-center border-b border-solid border-main-divider"
+    onClick={onToggle}
+  >
+    <div className="pr-m">{labels[Number(isUnfolded)]}</div>
+    <Icon className="text-primary-text" name={ICONS[Number(isUnfolded)]} width="16" height="16" />
+  </button>
+);

package/mobile/src/components/OfficesAtmsMap/renderOfficeCard.tsx

@@ -1,14 +1,17 @@
+import { Foldable } from '../../ui-kit/Foldable/Foldable';
+import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
 import { Icon } from '../../ui-kit/Icon/Icon';
 import { Text } from '../../ui-kit/Text/Text';
-import { Badge } from './Badge';
 import { CardCell } from './CardCell';
 import { CardRow } from './CardRow';
 import { getScheduleDescription } from './getScheduleDescription';
 import { getWorkScheduleWeek } from './getWorkScheduleWeek';
-import { type Branch, type Currency, type WorkScheduleWeek } from './OfficesAtmsMapProps';
+import { type Branch } from './OfficesAtmsMapProps';
 import { renderAlternativeDay, renderBusinessSchedule } from './renderBusinessSchedule';
-
-const currentWeekDayIdx = new Date().getDay();
+import { renderCurrency } from './renderCurrency';
+import { renderCurrentDaySchedule } from './renderCurrentDaySchedule';
+import { renderDay } from './renderDay';
+import { renderFoldButton } from './renderFoldButton';
 
 export const renderOfficeCard = (
   {
@@ -29,23 +32,76 @@ export const renderOfficeCard = (
     return null;
   }
 
+  const workScheduleWeek = getWorkScheduleWeek(workSchedule);
+
+  return (
+    <div key={String(index)} className="bg-white col-span-12 p-3xl sm:border-green sm:border">
+      <div className="sm:flex sm:justify-between">
+        <div>
+          <Text size="text-h4">{name}</Text>
+          {address ? (
+            <div className="flex pb-xl pt-xs gap-2xs">
+              <Icon name="GeolocationIcon" width="24" height="24" />
+              <Text size="text-l">{address}</Text>
+            </div>
+          ) : null}
+        </div>
+        {renderCurrentDaySchedule(workScheduleWeek)}
+      </div>
+      <div className="hidden sm:block">
+        {renderCardContent({
+          phone,
+          fax,
+          phoneBusiness,
+          phoneNatural,
+          phoneCallCentre,
+          phoneCurrencyControl,
+          workSchedule,
+          exchangeRate,
+        })}
+      </div>
+      <Foldable
+        className="block sm:hidden"
+        renderFoldableSection={({ isUnfolded }) => {
+          return (
+            <FoldableSection isUnfolded={isUnfolded}>
+              {renderCardContent({
+                phone,
+                fax,
+                phoneBusiness,
+                phoneNatural,
+                phoneCallCentre,
+                phoneCurrencyControl,
+                workSchedule,
+                exchangeRate,
+              })}
+            </FoldableSection>
+          );
+        }}
+        //** TODO: remove styles with refactoring  DefaultFoldButton*/
+        renderFoldButton={({ isUnfolded, onToggle }) => renderFoldButton({ isUnfolded, onToggle })}
+      />
+    </div>
+  );
+};
+
+const renderCardContent = ({
+  phone,
+  fax,
+  phoneBusiness,
+  phoneNatural,
+  phoneCallCentre,
+  phoneCurrencyControl,
+  workSchedule,
+  exchangeRate,
+}: Branch) => {
   const workScheduleWeek = getWorkScheduleWeek(workSchedule);
   const labelSchedule = workSchedule?.businessScheduleVisibleTag
     ? 'Для физических лиц'
     : 'Для физических и юридических лиц';
 
   return (
-    <div key={String(index)} className="bg-white col-span-12 p-3xl border-green border">
-      <div className="flex justify-between">
-        <Text size="text-h4">{name}</Text>
-        {renderCurrentDaySchedule(workScheduleWeek)}
-      </div>
-      {address ? (
-        <div className="flex pb-xl pt-xs gap-2xs">
-          <Icon name="GeolocationIcon" width="24" height="24" />
-          <Text size="text-l">{address}</Text>
-        </div>
-      ) : null}
+    <div>
       <CardRow className="flex-wrap">
         <CardCell label="Факс" value={fax} />
         <CardCell label="Телефон филиала" value={phone} />
@@ -54,7 +110,7 @@ export const renderOfficeCard = (
         <CardCell label="Для консультаций по валютному контролю" value={phoneCurrencyControl} />
         <CardCell label="Контакт-центр" value={phoneCallCentre} />
       </CardRow>
-      {workSchedule.isMatchesPattern ? (
+      {workSchedule?.isMatchesPattern ? (
         <CardRow>
           <CardCell label={labelSchedule} labelSize="text-l" className="w-full max-w-none">
             <div className="flex flex-wrap gap-xs sm:justify-between pt-xs">
@@ -79,55 +135,3 @@ export const renderOfficeCard = (
     </div>
   );
 };
-
-export const renderCurrency = (
-  { currency, buyExchangeRate, saleExchangeRate }: Currency,
-  i: number,
-) => (
-  <div key={String(i)} className="flex gap-lg h-full">
-    {currency?.currency ? <CardCell label="Валюта" value={currency.currency} /> : null}
-    {buyExchangeRate ? <CardCell label="Купить" value={String(buyExchangeRate)} /> : null}
-    {saleExchangeRate ? <CardCell label="Продать" value={String(saleExchangeRate)} /> : null}
-  </div>
-);
-
-//TODO: Add logic time https://github.com/redneckz/wildless-cms-uni-blocks/pull/1549
-export const renderCurrentDaySchedule = (workScheduleWeek?: WorkScheduleWeek[]) => {
-  const [currentWeekDay] = workScheduleWeek?.slice(currentWeekDayIdx - 1) ?? [];
-
-  if (!currentWeekDay) {
-    return null;
-  }
-
-  const { lunchHour, status, workTime, hasLunch } = currentWeekDay;
-
-  return status ? (
-    <div className="flex gap-s items-start whitespace-nowrap">
-      {workTime ? <Badge color="green">{workTime}</Badge> : null}
-      {lunchHour && hasLunch ? <Badge color="yellow">{`перерыв: ${lunchHour}`}</Badge> : null}
-    </div>
-  ) : (
-    <Badge color="red">Выходной</Badge>
-  );
-};
-
-export const renderDay = (
-  { title, status, workTime, lunchHour, hasLunch }: WorkScheduleWeek,
-  index: number,
-) => (
-  <CardCell
-    key={String(index)}
-    label={title}
-    value={status && workTime ? workTime : ''}
-    subText={getSubTextLunch(lunchHour, hasLunch, status)}
-    subColor={!status || hasLunch ? 'text-error' : 'text-green-dark'}
-  />
-);
-
-const getSubTextLunch = (lunchHour?: string, hasLunch = false, status = false) => {
-  if (!status) {
-    return 'Не работает';
-  }
-
-  return lunchHour && hasLunch ? `Перерыв ${lunchHour}` : lunchHour;
-};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.14.78",
+  "version": "0.14.80",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

package/src/components/LinkDocs/LinkDocItem.tsx

@@ -9,7 +9,7 @@ export interface LinkDocItemProps extends LinkDoc {
 
 export const LinkDocItem = JSX<LinkDocItemProps>(
   ({ icon, text, href, target, fileFormat, fileSize }) => {
-    const prefix = fileFormat || fileSize ? ',' : '';
+    const prefix = fileSize && fileFormat ? ',' : '';
     const size = fileSize ?? '';
     const format = fileFormat ? String(fileFormat) : '';
 
@@ -23,11 +23,13 @@ export const LinkDocItem = JSX<LinkDocItemProps>(
         {icon}
         {text ? (
           <Text size="text-l" font="font-light">
-            {text}
-            <Text color="text-secondary-text">{href && `${size} ${prefix} ${format}`}</Text>
+            {text} {addSpace(size, format)}
+            <Text color="text-secondary-text">{href && `${size + prefix + format}`}</Text>
           </Text>
         ) : null}
       </a>
     );
   },
 );
+
+const addSpace = (size: string, format: string) => (size || format ? <span>&#44;&nbsp;</span> : '');

package/src/components/LinkDocs/LinkDocs.tsx

@@ -74,7 +74,8 @@ const renderLinkDocItem =
         ? formatBytes(docBlockDef?.attachment?.fileSize || 0)
         : docBlockDef?.fileSize;
 
-    const fileFormat = docBlockDef?.docType !== 'Attachment' ? docBlockDef?.fileFormat : '';
+    const fileFormat =
+      docBlockDef?.docType === 'Attachment' ? getExtFromHref(href) : docBlockDef?.fileFormat;
 
     return (
       <div key={String(i)} role="listitem">
@@ -89,3 +90,13 @@ const renderLinkDocItem =
       </div>
     );
   };
+
+const getExtFromHref = (href?: string) => {
+  if (!href) {
+    return '';
+  }
+
+  const index = href.lastIndexOf('.');
+
+  return index !== -1 ? href.substring(index + 1) : '';
+};

package/src/components/OfficesAtmsMap/Badge.tsx

@@ -18,7 +18,7 @@ export interface BadgeProps {
 export const Badge = JSX<BadgeProps>(({ className, children, color = 'gray' }) => (
   <div
     className={style(
-      'p-s border border-gray rounded-md flex items-center',
+      'p-s sm:border sm:border-gray rounded-md flex items-center',
       colorStyle[color].border,
       className,
     )}

package/src/components/OfficesAtmsMap/CardRow.tsx

@@ -8,7 +8,7 @@ export interface CardRowProps {
 export const CardRow = JSX<CardRowProps>(({ className, children }) => (
   <div
     className={style(
-      'flex border-t border-solid border-main-divider py-xl gap-x-6xl gap-y-xl',
+      'sm:flex sm:border-t sm:border-solid sm:border-main-divider py-xl gap-x-6xl gap-y-xl',
       className,
     )}
   >