@redneckz/wildless-cms-uni-blocks 0.3.7 → 0.3.10

package/src/components/ProductGallery/ProductGalleryBlock.mobile.tsx

@@ -12,7 +12,7 @@ export interface ProductGalleryBlockProps extends UniBlockProps {
 export const ProductGalleryBlock = JSX<ProductGalleryBlockProps>(
   ({ block, headingType, context }) => {
     return (
-      <section className="flex grow-0 shrink-0 basis-full px-4 pt-6" role="listitem">
+      <section className="flex grow-0 shrink-0 basis-full px-4 pt-6">
         <div className="flex grow">
           <ProductBlockInner context={context} headingType={headingType || 'h2'} {...block} />
         </div>

package/src/components/PromoTile/PromoTile.fixture.tsx

@@ -1,5 +1,6 @@
 import { context } from '../../setup-fixture';
 import { PromoTile } from './PromoTile';
+import { getCurrentDate } from '../../utils/getCurrentDate'
 
 export default {
   default: (
@@ -10,7 +11,7 @@ export default {
         title="Акции и спецпредложения"
         description="Пенсионный кредит по специальной процентной ставке"
         version="secondary"
-        date="2022-04-16"
+        date={getCurrentDate()}
         buttons={[
           {
             text: 'Все акции',

package/src/components/Tile/Tile.tsx

@@ -10,7 +10,7 @@ import { BaseTile } from '../BaseTile/BaseTile';
 import { getTileHeadingType } from '../BaseTile/getTileHeadingType';
 import { getTileMinHeight } from '../BaseTile/getTileMinHeight';
 import { getTileRightPadding } from '../BaseTile/getTileRightPadding';
-import type { TileContent } from '../Tile/TileContent';
+import type { TileContent } from './TileContent';
 
 export interface TileProps extends TileContent, UniBlockProps {
   role?: string;
@@ -37,7 +37,7 @@ export const Tile = JSX<TileProps>((props) => {
 
   return (
     <section
-      className={`font-sans p-9 box-border ${className} ${
+      className={`overflow-hidden font-sans p-9 box-border ${className} ${
         tileStyleMap[version]
       } ${getTileRightPadding(className)} ${getTileMinHeight(className)} `}
       role={role}

package/src/icons/OkIcon.svg

@@ -1,5 +1,6 @@
 <svg title="Лого «Одноклассники»" viewBox="0 0 12 20" xmlns="http://www.w3.org/2000/svg">
   <path
+    fill="currentColor"
     d="M5.986 10.341C3.05 10.341.61 7.995.61 5.22.61 2.347 3.05 0 5.987 0c3.036 0 5.375 2.346 5.375 5.22a5.048 5.048 0 0 1-1.578 3.628 5.451 5.451 0 0 1-3.78 1.494h-.018Zm0-7.324A2.186 2.186 0 0 0 3.797 5.22c0 1.196.946 2.106 2.19 2.106 1.293 0 2.189-.91 2.189-2.106.001-1.199-.896-2.203-2.19-2.203Zm2.14 11.586 3.037 2.825c.598.621.598 1.531 0 2.106-.646.621-1.643.621-2.14 0l-3.036-2.873-2.937 2.873c-.298.287-.697.43-1.146.43-.348 0-.746-.144-1.095-.43-.597-.575-.597-1.485 0-2.107l3.086-2.825a14.303 14.303 0 0 1-3.182-1.339c-.747-.383-.896-1.34-.498-2.059.498-.718 1.393-.909 2.19-.43a7.08 7.08 0 0 0 3.583.97 7.08 7.08 0 0 0 3.583-.97c.797-.479 1.742-.288 2.19.43.448.72.248 1.675-.45 2.06-.944.574-2.039 1.005-3.184 1.34Z"
   />
 </svg>

package/src/types.ts

@@ -26,21 +26,19 @@ export interface SlotsMap {
 }
 
 export interface ContentPageMeta {
-  title: string;
-  slug: string;
-  main: ContentPageMetaMain;
+  title?: string;
+  slug?: string;
+  main?: {
+    description?: string;
+    keywords?: string[];
+    canonical?: string;
+    robots?: string[];
+  };
   og?: Record<string, string>;
   twitter?: Record<string, string>;
   jsonLd?: string;
 }
 
-export interface ContentPageMetaMain {
-  description?: string;
-  keywords?: string[];
-  canonical?: string;
-  robots?: string[];
-}
-
 export interface ContentPageDef extends ContentPageMeta {
   style?: string[];
   blocks?: BlockDef[]; //! for compatibility

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

@@ -19,7 +19,7 @@ export const BlockItem = JSX<BlockItemProps>(
   ({ className = '', isDotted = true, text, children, version = 'primary' }) => {
     return (
       <div className={`font-sans flex items-start ${className}`} role="listitem">
-        {isDotted && <div className={getListStyle(version)} />}!!!!!
+        {isDotted && <div className={getListStyle(version)} />}
         <span className={TEXT_STYLE_MAP[version]}>{text || children}</span>
       </div>
     );

package/src/ui-kit/Button/Button.fixture.tsx

@@ -9,12 +9,8 @@ export default {
         <p>Private clients</p>
         <div className="flex gap-6" data-theme="pc">
           <Button href="https://www.rshb.ru/" target="_blank" text="Primary" version="primary" />
-          <Button
-            href="https://www.rshb.ru/"
-            target="_blank"
-            text="Secondary"
-            version="secondary"
-          />
+          <Button href="https://www.rshb.ru/" target="_blank" text="Link" version="secondary" />
+          <Button href="https://www.rshb.ru/" target="_blank" text="Secondary" version="link" />
         </div>
       </div>
       <div>

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

@@ -6,7 +6,7 @@ export interface DescriptionProps extends DescriptionContent {
 }
 
 export const Description = JSX<DescriptionProps>((props) => {
-  const { className, description } = props;
+  const { className = '', description } = props;
 
-  return <div className={`font-normal text-m-md ${className || ''}`}>{description}</div>;
+  return <div className={`font-normal text-m-md ${className}`}>{description}</div>;
 });

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

@@ -6,22 +6,17 @@ export const InputRange = JSX<InputRangeProps>(
   ({ className, title, items = [], min = 1, max = 100, step = 1, value = min, onChange }) => {
     const handleChange = (value: string) => {
       if (!onChange) return;
-
       const sanitizedValue = Number(value.replace(/\D/g, ''));
       onChange(sanitizedValue);
     };
-
     const inputStyle = {
       backgroundSize: `${(((value - min) * 100) / (max - min)).toFixed(2)}% 100%`,
     };
-
     const handleBlur = () => {
       if (!onChange) return;
-
       if (value < min) onChange(min);
       if (value > max) onChange(max);
     };
-
     return (
       <div className={className}>
         <label className="block relative">
@@ -32,14 +27,12 @@ export const InputRange = JSX<InputRangeProps>(
           ) : null}
           <input
             className={`m-0 font-sans text-sm w-full h-12 border border-solid border-main-stroke rounded-md
-                        outline-none p-0 pl-4 m-0 box-border text-primary-text ${
-                          title ? 'pt-4' : ''
-                        }`}
+                        outline-none p-0 pl-4 m-0 box-border text-primary-text ${ title ? 'pt-4' : '' }`}
             value={addSpacesBetweenNumbers(value)}
             onChange={(e) => handleChange(e.target.value)}
             onBlur={handleBlur}
           />
-          <div className="absolute inset-x-0 top-8 px-4">
+          <div className="absolute inset-x-0 top-[35px] px-4 leading-[18px]">
             <input
               className="box-border w-full m-0 cursor-pointer slider"
               type="range"
@@ -54,9 +47,7 @@ export const InputRange = JSX<InputRangeProps>(
         </label>
         <div className="flex justify-between my-3">
           {items.map((item, i) => (
-            <span key={String(i)} className="text-xs leading-[14px] text-secondary-text pl-4">
-              {item}
-            </span>
+            <span key={String(i)} className="text-xs leading-[14px] text-secondary-text pl-4"> {item} </span>
           ))}
         </div>
       </div>

package/src/ui-kit/SearchBar/SearchBar.mobile.tsx

@@ -1,6 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
-import { Button } from '../Button/Button';
 import { Icon } from '../Icon/Icon';
 
 export const SearchBar = JSX<UniBlockProps>(({ className, context }) => {
@@ -23,24 +22,23 @@ export const SearchBar = JSX<UniBlockProps>(({ className, context }) => {
       <input
         id="search-bar-input"
         className={
-          'h-12 pl-12 w-full peer font-sans font-normal text-base text-black border border-solid rounded h-full box-border outline-none pr-[6%] border-main-divider focus:border-primary-text'
+          'h-12 pl-12 w-full peer placeholder-transparent font-sans font-normal text-base text-black border border-solid rounded box-border outline-none pr-[6%] border-main-divider focus:border-primary-text'
         }
         value={term}
         onChange={(e) => setTerm(e.target.value)}
         type="text"
         name="search-bar-input"
+        placeholder="some search"
       />
-      <Button
-        version="primary"
-        text="Найти"
-        className="w-auto invisible peer-focus:visible absolute top-1 right-1"
+      <button
+        className="visible peer-placeholder-shown:invisible absolute top-2 right-3 w-6 h-6 p-1 bg-transparent cursor-pointer"
         onClick={(e) => {
           e.preventDefault();
-          console.log('click');
+          setTerm('');
         }}
       >
-        <div className="font-normal text-sm px-9 py-[9px]">Найти</div>
-      </Button>
+        <Icon name="CloseIcon" width="24" height="24" />
+      </button>
     </form>
   );
 });

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

@@ -1,10 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { DEFAULT_GAP, DEFAULT_PADDING } from './constants';
+import { SwipeListControlDots } from './SwipeListControlDots';
+import { SwipeListControlList } from './SwipeListControlList';
 import type { SwipeListControlProps } from './SwipeListControlProps';
-import { getScrollPoints } from './utils/getScrollPoints';
 import { getIndexParts } from './utils/getIndexParts';
-import { SwipeListControlList } from './SwipeListControlList';
-import { SwipeListControlDots } from './SwipeListControlDots';
-import { DEFAULT_GAP, DEFAULT_PADDING } from './constants';
+import { getScrollPoints } from './utils/getScrollPoints';
 
 export const SwipeListControl = JSX<SwipeListControlProps>(
   ({
@@ -14,6 +14,7 @@ export const SwipeListControl = JSX<SwipeListControlProps>(
     gap = DEFAULT_GAP,
     padding = DEFAULT_PADDING,
     showDots = true,
+    onSlideChange,
   }) => {
     const [activeIndex, setActiveIndex] = context.useState<number>(0);
     const [indexFraction, setIndexFraction] = context.useState<number>(0);
@@ -35,28 +36,35 @@ export const SwipeListControl = JSX<SwipeListControlProps>(
       });
 
       const { index, fraction } = getIndexParts(scrollLeft, scrollPoints);
+      if (index !== activeIndex && onSlideChange) {
+        onSlideChange();
+      }
       setActiveIndex(index);
       setIndexFraction(fraction);
     };
 
     return (
       <div className={className}>
-        <SwipeListControlList
-          gap={gap}
-          padding={padding}
-          activeIndex={activeIndex}
-          onScroll={handleScroll}
-        >
-          {children}
-        </SwipeListControlList>
-        <SwipeListControlDots
-          activeIndex={activeIndex}
-          indexFraction={indexFraction}
-          showDots={showDots}
-        >
-          {children}
-        </SwipeListControlDots>
+        {renderSwipeList({ gap, padding, activeIndex, handleScroll, children })}
+        {renderSwipelistDots({ activeIndex, indexFraction, showDots, children })}
       </div>
     );
   },
 );
+
+const renderSwipeList = ({ gap, padding, activeIndex, handleScroll, children }) => (
+  <SwipeListControlList
+    gap={gap}
+    padding={padding}
+    activeIndex={activeIndex}
+    onScroll={handleScroll}
+  >
+    {children}
+  </SwipeListControlList>
+);
+
+const renderSwipelistDots = ({ activeIndex, indexFraction, showDots, children }) => (
+  <SwipeListControlDots activeIndex={activeIndex} indexFraction={indexFraction} showDots={showDots}>
+    {children}
+  </SwipeListControlDots>
+);

package/src/ui-kit/SwipeListControl/SwipeListControlProps.ts

@@ -16,4 +16,5 @@ export interface SwipeContainer {
 export interface SwipeListControlProps extends SwipeContainer, UniBlockProps {
   /** @title Точки-индикаторы */
   showDots?: boolean;
+  onSlideChange?: () => void;
 }

package/src/utils/getAccordionItems.ts

@@ -3,7 +3,7 @@ export const getAccordionItems = (items) =>
     label: item.text || '',
     blocks: [
       {
-        accordionBlockType: 'LinkDocs',
+        accordionBlockType: 'LinkList',
         documents: item.items || [],
       },
     ],

package/src/utils/getCurrentDate.ts

@@ -0,0 +1,3 @@
+export const getCurrentDate = () => {
+  return new Date().toJSON().slice(0, "YYYY-MM-DD".length);
+};