@redneckz/wildless-cms-uni-blocks 0.12.3 → 0.12.5

package/src/components/ProductBlock/ProductBlock.example.json

@@ -12,17 +12,7 @@
       "size": {
         "width": 234,
         "height": 234
-      },
-      "sources": [
-        {
-          "media": 1279,
-          "size": {
-            "width": 164
-          },
-          "format": "webp",
-          "alignment": "northeast"
-        }
-      ]
+      }
     },
     "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"],
     "isDotted": true,

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

@@ -18,12 +18,6 @@ const image: Picture = {
     width: 234,
     height: 234,
   },
-  sources: [
-    {
-      src: 'money-1.png',
-      format: 'png',
-    },
-  ],
 };
 
 const benefits: ComplexBenefitContent[] = [

package/src/components/ProductTile/ProductTile.example.json

@@ -7,17 +7,7 @@
       "format": "webp",
       "size": {
         "width": 242
-      },
-      "sources": [
-        {
-          "media": 1279,
-          "size": {
-            "width": 145
-          },
-          "format": "webp",
-          "alignment": "southeast"
-        }
-      ]
+      }
     },
     "version": "primary",
     "benefits": [
@@ -43,6 +33,8 @@
         "version": "primary"
       }
     ],
-    "isImageOnRightSide": true
+    "imageOptions": {
+      "directionRight": true
+    }
   }
 }

package/src/components/Tabs/LinkTab.tsx

@@ -1,6 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
-import { getLinkTabClassName } from './tabItemClasses';
+import { style } from '../../utils/style';
+import { getTabClassName } from './tabItemClasses';
 import type { LinkTabData, TabData, TabsMode } from './TabsContent';
 
 interface LinkTabProps {
@@ -23,14 +24,24 @@ export const LinkTab = JSX<LinkTabProps>((props) => {
   };
 
   return (
-    <a
+    <div
+      className={getTabClassName('block', active, tabsMode)}
       role="tab"
-      className={getLinkTabClassName('link', active, tabsMode)}
-      target={tab.target}
-      href={adjustedProps.href}
-      onClick={handleClick}
+      aria-selected={active}
+      onClick={() => onClick(tab)}
     >
-      <span className={getLinkTabClassName('text', active, tabsMode)}>{tab.text}</span>
-    </a>
+      <a
+        role="tab"
+        className={style(
+          'flex flex-1 items-center justify-center h-full',
+          getTabClassName('text', active, tabsMode),
+        )}
+        target={tab.target}
+        href={adjustedProps.href}
+        onClick={handleClick}
+      >
+        <span>{tab.text}</span>
+      </a>
+    </div>
   );
 });

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

@@ -0,0 +1,55 @@
+import '../../setup-fixture';
+
+import { Tabs } from './Tabs';
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <Tabs
+        className="col-span-12"
+        tabs={[
+          { type: 'group', ref: 'tab1', title: 'Вкладка 1' },
+          { type: 'group', ref: 'tab2', title: 'Вкладка 2' },
+          { type: 'link', href: 'https://google.com', text: 'Вкладка 3' },
+          { type: 'link', href: 'https://yandex.com', text: 'Вкладка 4' },
+        ]}
+        tabsMode="wideScreen"
+      />
+    </div>
+  ),
+  scrollable: (
+    <div className="container grid grid-cols-12">
+      <Tabs
+        className="col-span-12"
+        tabs={[
+          { type: 'group', ref: 'tab1', title: 'Вкладка 1' },
+          { type: 'group', ref: 'tab2', title: 'Вкладка 2' },
+          { type: 'link', href: 'https://google.com', text: 'Вкладка 3' },
+          { type: 'link', href: 'https://yandex.com', text: 'Вкладка 4' },
+          { type: 'link', href: 'https://ya.com', text: 'Вкладка 5' },
+          { type: 'link', href: 'https://habr.com', text: 'Вкладка 6' },
+          { type: 'link', href: 'https://kremlin.com', text: 'Вкладка 7' },
+          { type: 'link', href: 'https://gov.com', text: 'Вкладка 8' },
+          { type: 'group', ref: 'tab3', title: 'Вкладка 9' },
+        ]}
+        tabsMode="scrollable"
+      />
+    </div>
+  ),
+  centered: (
+    <div className="container grid grid-cols-12">
+      <Tabs
+        className="col-span-12"
+        tabs={[
+          { type: 'group', ref: 'tab1', title: '2021' },
+          { type: 'group', ref: 'tab2', title: '2020' },
+          { type: 'link', href: 'https://google.com', text: '2019' },
+          { type: 'link', href: 'https://yandex.com', text: '2018' },
+          { type: 'link', href: 'https://ya.com', text: '2017' },
+          { type: 'link', href: 'https://habr.com', text: '2016' },
+        ]}
+        tabsMode="centered"
+      />
+    </div>
+  ),
+};

package/src/components/Tabs/Tabs.fixture.tsx

@@ -11,7 +11,7 @@ export default {
           { type: 'group', ref: 'tab1', title: 'Вкладка 1' },
           { type: 'group', ref: 'tab2', title: 'Вкладка 2' },
           { type: 'link', href: 'https://google.com', text: 'Вкладка 3' },
-          { type: 'group', ref: 'tab3', title: 'Вкладка 4' },
+          { type: 'link', href: 'https://yandex.com', text: 'Вкладка 4' },
         ]}
         tabsMode="wideScreen"
       />
@@ -27,12 +27,10 @@ export default {
           { type: 'link', href: 'https://google.com', text: 'Вкладка 3' },
           { type: 'link', href: 'https://yandex.com', text: 'Вкладка 4' },
           { type: 'link', href: 'https://ya.com', text: 'Вкладка 5' },
-          { type: 'link', href: 'https://habr.com', text: 'Вкладка за номером 6' },
+          { type: 'link', href: 'https://habr.com', text: 'Вкладка 6' },
           { type: 'link', href: 'https://kremlin.com', text: 'Вкладка 7' },
           { type: 'link', href: 'https://gov.com', text: 'Вкладка 8' },
           { type: 'group', ref: 'tab3', title: 'Вкладка 9' },
-          { type: 'link', href: 'https://vc.com', text: 'Вкладка номер 10' },
-          { type: 'link', href: 'https://ria.com', text: 'Вкладка номер 11' },
         ]}
         tabsMode="scrollable"
       />
@@ -44,21 +42,14 @@ export default {
         className="col-span-12"
         tabs={[
           { type: 'group', ref: 'tab1', title: '2021' },
-          { type: 'link', href: 'https://google.com', text: '2020' },
-          { type: 'group', ref: 'tab3', title: '2019' },
+          { type: 'group', ref: 'tab2', title: '2020' },
+          { type: 'link', href: 'https://google.com', text: '2019' },
           { type: 'link', href: 'https://yandex.com', text: '2018' },
-          { type: 'group', ref: 'tab5', title: '2017' },
-          { type: 'link', href: 'https://ya.com', text: '2016' },
-          { type: 'link', href: 'https://habr.com', text: '2014' },
+          { type: 'link', href: 'https://ya.com', text: '2017' },
+          { type: 'link', href: 'https://habr.com', text: '2016' },
+          { type: 'link', href: 'https://kremlin.com', text: '2015' },
+          { type: 'link', href: 'https://gov.com', text: '2014' },
           { type: 'group', ref: 'tab3', title: '2013' },
-          { type: 'link', href: 'https://kremlin.com', text: '2012' },
-          { type: 'group', ref: 'tab5', title: '2011' },
-          { type: 'link', href: 'https://ria.com', text: '2009' },
-          { type: 'group', ref: 'tab8', title: '2008' },
-          { type: 'group', ref: 'tab8', title: '2007' },
-          { type: 'group', ref: 'tab8', title: '2006' },
-          { type: 'group', ref: 'tab8', title: '2005' },
-          { type: 'group', ref: 'tab8', title: '2004' },
         ]}
         tabsMode="centered"
       />

package/src/components/Tabs/Tabs.tsx

@@ -3,6 +3,7 @@ import { useCallback, useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { defaultEventBus } from '../../EventBus/defaultEventBus';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { style } from '../../utils/style';
 import { CenteredTabs } from './CenteredTabs';
 import { renderTab } from './renderTab';
 import { ScrollableTabs } from './ScrollableTabs';
@@ -16,7 +17,7 @@ interface RenderTabsProps extends TabsBlockProps {
 }
 
 export const Tabs = JSX<TabsBlockProps>((props) => {
-  const { className = '', tabs, isSticky, ...rest } = props;
+  const { className = '', isSticky, tabs, ...rest } = props;
 
   const [currentTab, setCurrentTab] = useState(tabs ? tabs[0] : undefined);
 
@@ -41,9 +42,11 @@ export const Tabs = JSX<TabsBlockProps>((props) => {
 
   return (
     <BlockWrapper
-      className={`relative box-border flex gap-x-1 w-full ${
-        isSticky ? 'sticky top-1 z-20' : ''
-      } ${className}`}
+      className={style(
+        'relative box-border flex gap-x-1 w-full overflow-x-auto no-scrollbar',
+        isSticky ? 'sticky top-1 z-20' : '',
+        className,
+      )}
       defaultPadding="p-0"
       role="tablist"
       {...rest}

package/src/components/Tabs/renderGroupTab.tsx

@@ -1,18 +1,12 @@
+import { style } from '../../utils/style';
 import type { RenderTabProps } from './renderTab';
-import {
-  ACTIVE_TEXT_CLASSES,
-  getGroupTabClassName,
-  INACTIVE_TEXT_CLASSES,
-  TEXT_CLASSES,
-  WHITE_ACTIVE_TEXT_CLASSES,
-} from './tabItemClasses';
+import { getTabClassName } from './tabItemClasses';
 import type { GroupTabData, TabsMode } from './TabsContent';
 
 const BADGE_CLASSES =
-  'min-w-[22px] h-[22px] rounded-full text-xs ml-2 flex justify-center items-center';
-const ACTIVE_BADGE_CLASSES = 'bg-white/30 text-white';
-const INACTIVE_BADGE_CLASSES =
-  'bg-main-divider text-secondary-text group-hover/btn:text-primary-main';
+  'bg-main-divider min-w-[22px] h-[22px] rounded-full text-xs ml-2 flex justify-center items-center';
+const LIGHT_BADGE_CLASSES = 'bg-white/30 text-white';
+const DARK_BADGE_CLASSES = 'text-secondary-text group-hover/btn:text-primary-main';
 
 export const renderGroupTab =
   ({ page, currentTab, showCounter, onClick, tabsMode }: RenderTabProps) =>
@@ -27,39 +21,33 @@ export const renderGroupTab =
     return (
       <div
         key={`group-${String(i)}`}
-        className={getGroupTabClassName('div', active, tabsMode)}
+        className={getTabClassName('block', active, tabsMode)}
         role="tab"
         aria-selected={active}
         onClick={() => onClick(tab)}
       >
         <div
-          className={`flex flex-1 items-center justify-center ${getGroupTabClassName(
-            'text',
-            active,
-            tabsMode,
-          )}`}
+          className={style(
+            'flex flex-1 items-center justify-center h-full',
+            getTabClassName('text', active, tabsMode),
+          )}
         >
-          {renderTitle(tab.title, active, tabsMode)}
-          {renderCount(showCounter, count, active)}
+          <span>{tab.title}</span>
+          {showCounter && count ? renderCount(tabsMode, count, active) : null}
         </div>
       </div>
     );
   };
 
-const renderTitle = (title: string | undefined, active: boolean, tabsMode?: TabsMode) => {
-  const activeClassName = active ? WHITE_ACTIVE_TEXT_CLASSES : INACTIVE_TEXT_CLASSES;
-  const titleClassName =
-    tabsMode === 'scrollable'
-      ? `${TEXT_CLASSES} ${activeClassName}`
-      : `${TEXT_CLASSES} ${active ? ACTIVE_TEXT_CLASSES : INACTIVE_TEXT_CLASSES}`;
-
-  return title ? <h3 className={titleClassName}>{title}</h3> : null;
-};
-
-const renderCount = (showCounter: boolean | undefined, count: number, active: boolean) => {
-  return showCounter && count ? (
-    <div className={`${BADGE_CLASSES} ${active ? ACTIVE_BADGE_CLASSES : INACTIVE_BADGE_CLASSES}`}>
+const renderCount = (tabsMode: TabsMode | undefined, count: number, active: boolean) => {
+  return (
+    <div
+      className={style(
+        BADGE_CLASSES,
+        active && tabsMode !== 'scrollable' ? LIGHT_BADGE_CLASSES : DARK_BADGE_CLASSES,
+      )}
+    >
       {count}
     </div>
-  ) : null;
+  );
 };

package/src/components/Tabs/tabItemClasses.ts

@@ -9,12 +9,12 @@ export const WIDESCREEN_ACTIVE_LINK_CLASSES = 'bg-primary-main text-white';
 
 export const TEXT_CLASSES = 'font-sans text-m text-center';
 export const ACTIVE_TEXT_CLASSES = 'text-white';
-export const INACTIVE_TEXT_CLASSES = 'text-secondary-text group-hover/btn:text-primary-main';
+export const INACTIVE_TEXT_CLASSES = 'text-secondary-text sm:group-hover/btn:text-primary-main';
 
 export const WHITE_ACTIVE_TEXT_CLASSES = 'text-primary-main';
 
-const GROUP_TAB_CLASSES = {
-  div: {
+const TAB_CLASSES = {
+  block: {
     scrollable: {
       active: `inline-flex px-4 grow whitespace-nowrap ${LINK_CLASSES} ${SCROLLABLE_ACTIVE_LINK_CLASSES}`,
       default: `inline-flex px-4 grow whitespace-nowrap ${LINK_CLASSES} ${INACTIVE_LINK_CLASSES}`,
@@ -30,37 +30,7 @@ const GROUP_TAB_CLASSES = {
   },
   text: {
     scrollable: {
-      active: `h-full border-0 border-b-2`,
-      default: ``,
-    },
-    centered: {
-      active: '',
-      default: '',
-    },
-    wideScreen: {
-      active: '',
-      default: '',
-    },
-  },
-};
-const LINK_TAB_CLASSES = {
-  link: {
-    scrollable: {
-      active: `inline-flex px-4 grow whitespace-nowrap ${LINK_CLASSES} ${SCROLLABLE_ACTIVE_LINK_CLASSES}`,
-      default: `inline-flex px-4 grow whitespace-nowrap ${LINK_CLASSES} ${INACTIVE_LINK_CLASSES}`,
-    },
-    centered: {
-      active: `px-4 rounded-md ${LINK_CLASSES} ${WIDESCREEN_ACTIVE_LINK_CLASSES} whitespace-nowrap`,
-      default: `px-4 rounded-md ${LINK_CLASSES} group/btn bg-transparent whitespace-nowrap`,
-    },
-    wideScreen: {
-      active: `${LINK_CLASSES} ${WIDESCREEN_ACTIVE_LINK_CLASSES}`,
-      default: `${LINK_CLASSES} ${INACTIVE_LINK_CLASSES}`,
-    },
-  },
-  text: {
-    scrollable: {
-      active: `${TEXT_CLASSES} flex items-center h-full border-0 border-b-2 ${WHITE_ACTIVE_TEXT_CLASSES}`,
+      active: `${TEXT_CLASSES} flex items-center h-full border-0 border-b-2`,
       default: `${TEXT_CLASSES} ${INACTIVE_TEXT_CLASSES}`,
     },
     centered: {
@@ -68,22 +38,19 @@ const LINK_TAB_CLASSES = {
       default: `${TEXT_CLASSES} ${INACTIVE_TEXT_CLASSES}`,
     },
     wideScreen: {
-      active: `${TEXT_CLASSES} ${ACTIVE_TEXT_CLASSES}`,
-      default: `${TEXT_CLASSES} ${INACTIVE_TEXT_CLASSES}`,
+      active: `${TEXT_CLASSES} ${ACTIVE_TEXT_CLASSES} text-black px-2.5 bg-white sm:bg-primary-main sm:text-white`,
+      default: `${TEXT_CLASSES} ${INACTIVE_TEXT_CLASSES} px-2.5 bg-white`,
     },
   },
 };
 
-export const getGroupTabClassName = (type: string, active: boolean, tabsMode?: TabsMode) => {
-  const styleActive = active ? 'active' : 'default';
-  const mode = tabsMode || 'wideScreen';
-
-  return GROUP_TAB_CLASSES[type][mode][styleActive];
-};
-
-export const getLinkTabClassName = (type: string, active: boolean, tabsMode?: TabsMode) => {
+export const getTabClassName: (type: string, active: boolean, tabsMode?: TabsMode) => string = (
+  type,
+  active,
+  tabsMode,
+) => {
   const styleActive = active ? 'active' : 'default';
   const mode = tabsMode || 'wideScreen';
 
-  return LINK_TAB_CLASSES[type][mode][styleActive];
+  return TAB_CLASSES[type][mode][styleActive];
 };

package/src/components/TariffsTable/TariffsTable.mobile.tsx

@@ -24,7 +24,6 @@ export const TariffsTable = JSX<TariffsTableProps>(
   }) => {
     const colData = getColData(columns);
     const tiles = getTiles(rowHeaders, colData);
-    const headingMargin = description ? 'mb-2' : 'mb-8';
 
     return (
       <section

package/src/components/Tile/Tile.example.json

@@ -7,17 +7,7 @@
       "format": "webp",
       "size": {
         "width": 445
-      },
-      "sources": [
-        {
-          "media": 1279,
-          "size": {
-            "width": 276
-          },
-          "format": "webp",
-          "alignment": "southeast"
-        }
-      ]
+      }
     },
     "isDotted": true,
     "listItemSize": "M",

package/src/ui-kit/PhoneInput/PhoneInput.tsx

@@ -11,7 +11,11 @@ export const PhoneInput = JSX<InputProps>(({ children, onChange, ...inputProps }
   );
 
   return (
-    <Input onChange={handleChange} onFocus={handleChange} {...inputProps}>
+    <Input
+      onChange={handleChange}
+      onFocus={(event) => handleChange((event?.target?.value as string) || '')}
+      {...inputProps}
+    >
       {children}
     </Input>
   );

package/tailwind.config.cjs

@@ -9,6 +9,19 @@ module.exports = {
     filter: true,
   },
   theme: {
+    screens: {
+      sm: '640px',
+      // => @media (min-width: 640px) { ... }
+
+      md: '768px',
+      // => @media (min-width: 768px) { ... }
+
+      lg: '1024px',
+      // => @media (min-width: 1024px) { ... }
+
+      xl: '1280px',
+      // => @media (min-width: 1280px) { ... }
+    },
     container: {
       center: true,
     },
@@ -20,20 +33,20 @@ module.exports = {
     },
     extend: {
       spacing: {
-        xxl: '3rem',
-        xl: '2.5rem',
-        lg: '2rem',
-        m: '1.5rem',
-        s: '1rem',
-        xs: '0.5rem',
-        text: '0.75rem',
+        xxl: '3rem', // 48px
+        xl: '2.5rem', // 40
+        lg: '2rem', // 32px
+        m: '1.5rem', // 24px
+        s: '1rem', // 16px
+        xs: '0.5rem', // 8px
+        text: '0.75rem', // 12px
       },
       padding: {
-        default: '3rem',
-        lg: '3rem',
-        m: '2.25rem',
-        s: '1.5rem',
-        xs: '0.75rem',
+        default: '3rem', // 48px
+        lg: '3rem', // 48px
+        m: '2.25rem', // 36px
+        s: '1.5rem', // 24px
+        xs: '0.75rem', // 12px
       },
       transitionProperty: {
         height: 'height',