@redneckz/wildless-cms-uni-blocks 0.3.29 → 0.3.32

package/mobile/src/components/PictureText/PictureTextContent.ts

@@ -1,3 +1,4 @@
+import { BlockVersion } from '../../model/BlockVersion';
 import type { HeadingContent } from '../../ui-kit/Heading/HeadingContent';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
@@ -8,6 +9,12 @@ export type TitleWithImageContent = HeadingContent & ImageContent;
  * @title Картинка с текстом
  */
 export interface PictureTextContent extends TitleWithImageContent {
+  version?: BlockVersion;
   /** @title Список преимуществ */
   benefits?: Benefit[];
+  /**
+   * @title Картинка справа/текст слева
+   * @default false
+   */
+  directionRight?: boolean;
 }

package/mobile/src/components/ProductGalleryGreen/ProductGalleryGreen.example.json

@@ -10,7 +10,8 @@
         "image": {
           "format": "webp",
           "size": {
-            "width": 280
+            "width": 608,
+            "height": 299
           }
         },
         "version": "primary",

package/mobile/src/components/ProductGalleryGreen/ProductGalleryGreen.tsx

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
+import type { BlockVersion } from '../../model/BlockVersion';
 import { Icon } from '../../ui-kit/Icon/Icon';
 import type { ProductBlockInnerContent } from '../ProductBlock/ProductBlockContent';
 import { ProductBlockInner } from '../ProductBlock/ProductBlockInner';
@@ -7,23 +8,39 @@ import type { ProductGalleryGreenContent } from './ProductGalleryGreenContent';
 
 export interface ProductGalleryProps extends ProductGalleryGreenContent, UniBlockProps {}
 
+const productGalleryGreenStyleMap: Record<BlockVersion, string> = {
+  primary: 'bg-white text-primary-text',
+  secondary: 'bg-primary-main text-white',
+};
+
+const productBlockStyleMap: Record<BlockVersion, string> = {
+  primary: 'text-secondary-text',
+  secondary: 'text-white/80',
+};
+
+const productSlideStyleMap: Record<BlockVersion, string> = {
+  primary: 'bg-white text-primary-text',
+  secondary: 'bg-primary-main text-white',
+};
+
 export const ProductGalleryGreen = JSX<ProductGalleryProps>(
-  ({ className = '', context, slides = [], anchor = null }) => {
+  ({ className = '', context, slides = [], version = 'primary', duration = 0, anchor = null }) => {
     const galleryNav = slides.map((s) => s.nav);
     const galleryBlocks = slides.map((s) => s.productBlock);
     const [activeSlideIndex, setActiveSlideIndex] = context.useState(0);
 
     return (
       <section
-        className={`box-border pt-[70px] relative font-sans overflow-hidden bg-primary-main w-100 ${className}`}
         id={anchor}
+        className={`box-border pt-[70px] overflow-hidden relative font-sans w-100 ${className}
+        ${productGalleryGreenStyleMap[version]}`}
       >
         <div
           className="flex duration-1000 pb-14"
           style={{ transform: `translateX(-${activeSlideIndex}00%)` }}
           role="list"
         >
-          {galleryBlocks.map((_, i) => renderProductBlock(_, i, context))}
+          {galleryBlocks.map((_, i) => renderProductBlock({ ..._, version }, i, context))}
         </div>
 
         <div className="flex items-center absolute bottom-6 left-0 right-0 px-9 box-border">
@@ -33,6 +50,8 @@ export const ProductGalleryGreen = JSX<ProductGalleryProps>(
               i,
               activeSlideIndex,
               onClick: () => setActiveSlideIndex(i),
+              version,
+              duration,
             }),
           )}
         </div>
@@ -42,6 +61,9 @@ export const ProductGalleryGreen = JSX<ProductGalleryProps>(
 );
 
 function renderProductBlock(block: ProductBlockInnerContent, i: number, context) {
+  const { version } = block;
+  const additionalClass = version ? productBlockStyleMap[version] : '';
+
   return (
     <section
       key={String(i)}
@@ -55,10 +77,9 @@ function renderProductBlock(block: ProductBlockInnerContent, i: number, context)
           </div>
         ) : null}
         <ProductBlockInner
-          className="pl-2.5 pt-2.5 pb-1.5 pr-[6.25rem] z-[1]"
+          className={`pl-2.5 pt-2.5 pb-1.5 pr-[6.25rem] z-[1] ${additionalClass}`}
           context={context}
           textBlockClassName="mb-[154px]"
-          version="secondary"
           {...block}
         />
         <Icon
@@ -72,32 +93,34 @@ function renderProductBlock(block: ProductBlockInnerContent, i: number, context)
   );
 }
 
-function renderNavButton({ slide, i, activeSlideIndex, onClick }) {
+function renderNavButton({ slide, i, activeSlideIndex, onClick, version, duration }) {
   const isActiveBtn = i === activeSlideIndex;
   const btnClassName = isActiveBtn
-    ? 'bg-white shadow-dark-blue/42 h-[102px] w-[354px] min-w-[354px] max-w-[354px] p-0'
-    : 'bg-white/10 min-w-[277px] px-0 pt-4 pb-[23px] hover:pt-[21px] hover:pb-7 ease-in duration-300';
-  const btnTitleClassName = isActiveBtn
-    ? 'text-[18px] text-primary-text pb-[10px]'
-    : 'text-m-base text-white pb-[3px]';
-  const btnDescClassName = isActiveBtn
-    ? 'text-[18px] text-secondary-text'
-    : 'text-m-base text-white';
-
+    ? 'bg-white shadow-dark-blue/42 h-[102px] w-[354px] min-w-[354px] max-w-[354px] p-0 border-none'
+    : `min-w-[277px] px-0 pt-4 pb-[23px] hover:py-[26px] hover:py-[26px] ease-in duration-300 
+      ${productSlideStyleMap[version]}`;
+  const btnTitleClassName = isActiveBtn ? 'text-primary-text' : productBlockStyleMap[version];
+  const btnDescClassName = isActiveBtn ? 'text-secondary-text' : productBlockStyleMap[version];
+  const additionalBorder = version === 'secondary' ? 'border-white/50' : '';
+  const progressBarClassName = isActiveBtn ? 'animate-slide' : '';
   return (
     <button
       type="button"
       key={String(i)}
       onClick={onClick}
       aria-label={slide?.title}
-      className={`box-border font-sans group relative overflow-hidden border-white/50 border-[1px] cursor-pointer text-left mb-6a mx-1 grow basis-0 backdrop-blur-sm
-        ${btnClassName}
+      className={`box-border font-sans group relative overflow-hidden border-[1px] cursor-pointer text-left mx-1 grow basis-0 backdrop-blur-sm
+      ${btnClassName} ${additionalBorder}
       `}
     >
       <div className="border-0 px-6">
         <div className={`font-medium ${btnTitleClassName}`}>{slide?.title}</div>
         <div className={`text-secondary-text ${btnDescClassName}`}>{slide.description}</div>
       </div>
+      <div
+        className={`absolute bottom-0 left-0 w-full h-[3px] bg-primary-main -translate-x-full ${progressBarClassName}`}
+        style={{ animationDuration: `${duration}s`, animationFillMode: 'forwards' }}
+      ></div>
     </button>
   );
 }

package/mobile/src/components/ProductGalleryGreen/ProductGalleryGreenContent.ts

@@ -1,4 +1,5 @@
 import type { ProductBlockInnerContent } from '../ProductBlock/ProductBlockContent';
+import type { BlockVersion } from '../../model/BlockVersion';
 
 /** @title Кнопка под слайдом */
 interface ProductGalleryNav {
@@ -29,4 +30,5 @@ export interface ProductGalleryGreenContent {
   duration?: number;
   /** @title Слайды */
   slides?: ProductSlide[];
+  version?: BlockVersion;
 }

package/mobile/src/components/Recommendation/Recommendation.tsx

@@ -24,7 +24,7 @@ export const Recommendation = JSX<RecommendationProps>(
         className={`relative font-sans p-[50px] overflow-hidden ${blockClassName} ${className}`}
         id={anchor}
       >
-        {title ? <Heading headingType="h3" className="mb-8" title={title} /> : null}
+        {title ? <Heading headingType="h2" className="mb-8" title={title} /> : null}
         <div
           className="flex duration-1000 gap-4"
           style={{ transform: `translateX(-${activeCardIndex * CARD_SHIFT}px)` }}

package/mobile/src/components/Recommendation/RecommendationCard.tsx

@@ -25,7 +25,7 @@ export const RecommendationCard = JSX<RecommendationCardProps>(
           image={image?.src && <Img className="mt-auto ml-7" image={image} />}
         >
           {description ? <Description description={description} /> : null}
-          {items?.length ? <List items={items} version={version} /> : null}
+          {items?.length ? <List className="text-m-base" items={items} version={version} /> : null}
         </BaseTile>
       </section>
     );

package/mobile/src/components/StepsBlock/StepsBlock.tsx

@@ -16,6 +16,16 @@ type StyleType = {
   iconConnector: string;
 };
 
+const STEPS_SIZE_MAP: Record<SizeVersion, string> = {
+  normal: 'h-[70px] w-[70px] min-w-[70px] min-h-[70px]',
+  small: 'h-[50px] w-[50px] min-w-[50px] min-h-[50px]',
+};
+
+const STEPS_TILE_DESCRIPTION_HEIGHT_MAP: Record<SizeVersion, string> = {
+  normal: 'min-h-[70px]',
+  small: 'min-h-[50px]',
+};
+
 const STEPS_BLOCK_STYLE_MAPS: Record<BlockVersion, StyleType> = {
   primary: {
     background: 'bg-white',
@@ -88,7 +98,9 @@ const renderStepTitle = (params: RenderStepTitleParams) => {
             <div className={`min-h-8 h-full w-[2px] ${style.iconConnector} ${margin}`} />
           )}
         </div>
-        <div className="flex flex-col justify-start relative">
+        <div
+          className={`flex flex-col justify-center h-fit ${STEPS_TILE_DESCRIPTION_HEIGHT_MAP[size]}`}
+        >
           {step.label && (
             <div className="font-medium text-m-title-xs m-0 text-left">{step.label}</div>
           )}
@@ -110,10 +122,7 @@ const renderStepTitle = (params: RenderStepTitleParams) => {
 const renderIconArea = (params: RenderStepTitleParams) => {
   const { step, size, i, version } = params;
   const style = styleMaps(version);
-  const iconAreaSize =
-    size === 'normal'
-      ? 'h-[70px] w-[70px] min-w-[70px] min-h-[70px]'
-      : 'h-[50px] w-[50px] min-w-[50px] min-h-[50px]';
+  const iconAreaSize = STEPS_SIZE_MAP[size];
 
   const iconSize = size === 'normal' ? '38' : '27';
   const iconTextSize = size === 'normal' ? 'text-m-title' : 'text-m-title-xs';

package/mobile/src/components/StepsBlock/StepsBlockContent.ts

@@ -1,4 +1,4 @@
-import type { IconName } from '../../ui-kit/Icon/IconProps';
+import type { IconName } from '../../icons/IconName';
 import type { SizeVersion } from '../../model/SizeVersion';
 import type { BlockVersion } from '../../model/BlockVersion';
 
@@ -26,9 +26,10 @@ export interface StepsBlockContent {
   /**
    * @title Шаги
    * @minItems 2
-   * @maxItems 3
+   * @maxItems 4
    */
   steps?: Step[];
+  /** @title Размер шагов (моб.) */
   size?: SizeVersion; // TODO: mobile content
   version?: BlockVersion; // TODO: mobile content
 }

package/mobile/src/components/TextBlock/TextBlockContent.ts

@@ -23,7 +23,7 @@ export interface TextBlockContent {
   iconVersion?: TextBlockIconVersion;
   image?: Picture;
   blockVersion?: TextBlockVersion;
-  /** @title Маркеры списка (моб.) */ // TODO: mobile prop
+  /** @title Буллиты */ // TODO: mobile prop
   isDotted?: boolean;
   /** @title Список (моб.) */ // TODO: mobile prop
   items?: string[];

package/mobile/src/ui-kit/BlocksList/EmbeddableBlocks.tsx

@@ -1,23 +1,15 @@
 import { Headline } from '../../components/Headline/Headline';
 import { LinkDocs } from '../../components/LinkDocs/LinkDocs';
-import { PictureText } from '../../components/PictureText/PictureText';
 import { ProductBlock } from '../../components/ProductBlock/ProductBlock';
 import { TextBlock } from '../../components/TextBlock/TextBlock';
-import { Tile } from '../../components/Tile/Tile';
-import { ProductTile } from '../../components/ProductTile/ProductTile';
 import { Gallery } from '../../components/Gallery/Gallery';
-import { MiniGallery } from '../../components/MiniGallery/MiniGallery';
 import { LinkList } from '../../components/LinkList/LinkList';
 
 export const EmbeddableBlocks = {
   Headline,
   LinkDocs,
   TextBlock,
-  PictureText,
   ProductBlock,
-  Tile,
-  ProductTile,
   Gallery,
-  MiniGallery,
   LinkList,
 };

package/mobile/src/ui-kit/BlocksList/renderBlocksList.tsx

@@ -2,27 +2,19 @@ import type { JSXBlock } from '../../components/ContentPage/ContentPage';
 import type { ContentPageContext } from '../../components/ContentPage/ContentPageContext';
 import type { BlockDef, ColumnsCount } from './BlocksListProps';
 import { EmbeddableBlocks } from './EmbeddableBlocks';
-import { BlockVersion } from '../../model/BlockVersion';
 
 type EmbeddableBlocksProps = {
   blocks?: BlockDef[];
   context: ContentPageContext;
   columns?: ColumnsCount;
   className?: string;
-  version?: BlockVersion;
 };
 
-export const renderBlocksList = ({
-  blocks,
-  context,
-  className,
-  columns,
-  version,
-}: EmbeddableBlocksProps) =>
-  blocks?.length ? blocks.map(renderBlock({ context, className, columns, version })) : null;
+export const renderBlocksList = ({ blocks, context, className, columns }: EmbeddableBlocksProps) =>
+  blocks?.length ? blocks.map(renderBlock({ context, className, columns })) : null;
 
 export const renderBlock =
-  ({ context, columns, className, version }: EmbeddableBlocksProps) =>
+  ({ context, columns, className }: EmbeddableBlocksProps) =>
   (block: BlockDef, i: number) => {
     const type = block?.blockListType;
     if (!type || !(type in EmbeddableBlocks)) {
@@ -32,7 +24,7 @@ export const renderBlock =
     const EmbeddedBlock: JSXBlock = EmbeddableBlocks[type];
     return (
       <div className={`${className} ${columnsCountClass}`} key={`block_${i}`}>
-        <EmbeddedBlock context={context} {...block} blockVersion={version} className="!p-0" />
+        <EmbeddedBlock context={context} {...block} className="!p-0" />
       </div>
     );
   };

package/mobile/src/ui-kit/Button/ButtonInner.tsx

@@ -13,8 +13,8 @@ export const ButtonInner = JSX<ButtonInnerProps>((props) => {
       {appendLeft ? appendLeft : null}
       {isWithText(props) ? (
         <div>
-          <div className="text-m-2xs text-left">{aboveText}</div>
-          <div className="text-m-button font-medium text-left">{text}</div>
+          <div className="text-m-2xs font-light text-left">{aboveText}</div>
+          <div className="text-m-button text-left">{text}</div>
         </div>
       ) : null}
     </div>

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

@@ -22,7 +22,7 @@ export const SwipeListControlDots = JSX<SwipeListControlDotsProps>(
       const contentContainer = (e.currentTarget as HTMLElement).parentElement
         ?.previousElementSibling;
 
-      contentContainer?.children[idx]?.scrollIntoView({ behavior: 'smooth' });
+      contentContainer?.children[idx]?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
     };
 
     return showDots && children?.length ? (

package/mobile/src/ui-kit/SwipeListControl/utils/getScrollPoints.spec.ts

@@ -17,8 +17,26 @@ const scrollPoints: [number, number][] = [
   [1414, 1914],
 ];
 
+const twoItemsScrollPointsProps = {
+  gap: 14,
+  padding: 16,
+  clientWidth: 414,
+  scrollWidth: 794,
+  childElementCount: 2,
+  itemWidth: 380,
+};
+
+const twoItemsScrollPoints: [number, number][] = [
+  [0, 380],
+  [380, 794],
+];
+
 describe('getScrollPoints', () => {
   it('should return array containing scroll breakpoints delimiting each child', () => {
     expect(getScrollPoints(props)).toEqual(scrollPoints);
   });
+
+  it('should correctly handle case with 2 items in container', () => {
+    expect(getScrollPoints(twoItemsScrollPointsProps)).toEqual(twoItemsScrollPoints);
+  });
 });

package/mobile/src/ui-kit/SwipeListControl/utils/getScrollPoints.ts

@@ -16,9 +16,17 @@ export const getScrollPoints = ({
   scrollWidth: number;
   childElementCount: number;
   itemWidth: number;
-}) => {
-  const scrollItemWidth = itemWidth + gap;
+}): [number, number][] => {
   const scrollableDistance = scrollWidth - clientWidth;
+
+  if (childElementCount === 2) {
+    return [
+      [0, scrollableDistance],
+      [scrollableDistance, scrollWidth],
+    ];
+  }
+
+  const scrollItemWidth = itemWidth + gap;
   const edgeScrollDistance = clientWidth - gap - padding;
 
   const lastScrollableIdx = childElementCount - 2;

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

@@ -19,7 +19,7 @@ const renderTab =
     return (
       <div
         key={String(index)}
-        className={`flex h-full flex-1 cursor-pointer mr-2 last:mr-0 ${
+        className={`flex h-full flex-1 cursor-pointer mr-2 last:mr-0 box-content ${
           isActive ? ACTIVE_TAB_STYLE : TAB_STYLE
         }`}
         role="tab"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.3.29",
+  "version": "0.3.32",
   "private": false,
   "license": "MIT",
   "author": "ЦК",
@@ -109,14 +109,13 @@
     "clean:actual": "rimraf ./cypress/snapshots/actual || exit 0"
   },
   "peerDependencies": {
-    "cypress": "^10.4.0",
+    "cypress": "^10.6.0",
     "cypress-visual-regression": "^1.7.0",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
   "dependencies": {
     "@redneckz/uni-jsx": "^0.1.6",
-    "cypress-visual-regression": "^1.7.0",
     "glob": "^8.0.3",
     "remark-html": "^15.0.1",
     "remark-parse": "^10.0.1",

package/src/components/Accordion/Accordion.example.json

@@ -3,6 +3,7 @@
   "accordionItems": [
     {
       "label": "Аккордеон 1",
+      "labelIcon": "CardIcon",
       "blocks": [
         {
           "blockListType": "TextBlock",
@@ -18,6 +19,7 @@
     },
     {
       "label": "Аккордеон 2",
+      "labelIcon": "CardIcon",
       "blocks": [
         {
           "blockListType": "TextBlock",
@@ -33,6 +35,7 @@
     },
     {
       "label": "Аккордеон 3",
+      "labelIcon": "CardIcon",
       "blocks": [
         {
           "blockListType": "TextBlock",

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

@@ -45,6 +45,7 @@ const propsTextBlock: AccordionProps = {
     },
     {
       label: 'Accordion label 2',
+      labelIcon: 'CardIcon',
       blocks: [PICTURE_TEXT_ACCORDION_BLOCK],
     },
     {

package/src/components/Accordion/Accordion.fixture.tsx

@@ -63,6 +63,8 @@ const MINI_GALLERY_ACCORDION_BLOCK: MiniGalleryBlockListDef = {
 
 const propsBlock: AccordionProps = {
   context,
+  title: 'Accordion title',
+  description: 'Accordion description',
   accordionItems: [
     {
       label: 'Accordion label 1',

package/src/components/Accordion/Accordion.tsx

@@ -1,5 +1,4 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { BlockVersion } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../types';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import type { AccordionContent } from './AccordionContent';
@@ -7,28 +6,16 @@ import { AccordionItem } from './AccordionItem';
 
 export interface AccordionProps extends AccordionContent, UniBlockProps {}
 
-const accordionStyleMap: Record<BlockVersion, string> = {
-  primary: 'bg-white text-primary-text',
-  secondary: 'bg-primary-main text-white',
-};
-
 export const Accordion = JSX<AccordionProps>(
-  ({ title, accordionItems, context, className = '', version = 'primary', anchor = null }) => {
+  ({ title, description, accordionItems, context, className = '', anchor = null }) => {
     return (
-      <section
-        className={`p-[50px] font-sans ${className} ${accordionStyleMap[version]}`}
-        id={anchor}
-      >
+      <section className={`p-[50px] font-sans bg-white text-primary-text ${className}`} id={anchor}>
         {title ? <Heading headingType="h4" className="mb-2.5" title={title} /> : null}
+        {description ? <div className="mb-2.5 text-base">{description}</div> : null}
         {accordionItems?.length ? (
           <ul className="list-none m-0 p-0">
             {accordionItems.map((item, i) => (
-              <AccordionItem
-                key={`AccordionItem${i}`}
-                {...item}
-                version={version}
-                context={context}
-              />
+              <AccordionItem key={`AccordionItem${i}`} {...item} context={context} />
             ))}
           </ul>
         ) : null}

package/src/components/Accordion/AccordionContent.ts

@@ -1,5 +1,6 @@
-import type { BlockDef, ColumnsCount } from '../../ui-kit/BlocksList/BlocksListProps';
+import type { BlockDef } from '../../ui-kit/BlocksList/BlocksListProps';
 import type { BlockVersion } from '../../model/BlockVersion';
+import type { IconName } from '../../icons/IconName';
 /**
  * @title Элемент списка
  */
@@ -20,9 +21,7 @@ export interface AccordionItemCommonProps {
    * @default false
    */
   bordered?: boolean; // TODO: только для мобильной версии
-  version?: BlockVersion;
-
-  columns?: ColumnsCount;
+  labelIcon?: IconName; // TODO: только для мобильной версии
 }
 
 /**
@@ -35,7 +34,7 @@ export interface AccordionContent {
   /** @title Список */
   accordionItems?: AccordionItemCommonProps[];
   /** @title Описание */
-  description?: string; // TODO: только для мобильной версии
+  description?: string;
   /**
    * @title Отображать/скрывать обводку у элемента списка
    * @default false

package/src/components/Accordion/AccordionItem.mobile.tsx

@@ -7,34 +7,39 @@ import { useActiveHandler } from './useActiveHandler';
 
 export interface AccordionItemProps extends AccordionItemCommonProps, UniBlockProps {}
 
-export const AccordionItem = JSX<AccordionItemProps>(({ label, blocks, bordered, context }) => {
-  const { hasContent, icon, handleToggle } = useActiveHandler({
-    context,
-    blocks,
-  });
+export const AccordionItem = JSX<AccordionItemProps>(
+  ({ label, labelIcon, blocks, bordered, context }) => {
+    const { hasContent, icon, handleToggle } = useActiveHandler({
+      context,
+      blocks,
+    });
 
-  return (
-    <li
-      className={`${
-        bordered ? 'border p-4 rounded mb-4' : 'border-0 border-b last:border-b-0'
-      } border-solid border-main-divider`}
-    >
-      <button
-        className={`border-none bg-transparent flex justify-between text-left w-full font-sans text-primary-text
+    return (
+      <li className={`${borderedLiClass(bordered)} border-solid border-main-divider`}>
+        <button
+          className={`border-none bg-transparent flex justify-between text-left w-full font-sans text-primary-text
           ${bordered ? '' : 'py-[14px] px-0'}
           ${hasContent ? 'group cursor-pointer' : ''}`}
-        onClick={handleToggle}
-      >
-        <span
-          className={`text-m-title-xs pr-2.5 font-medium ${
-            hasContent ? 'group-hover:text-primary-main' : ''
-          }`}
+          onClick={handleToggle}
         >
-          {label}
-        </span>
-        {hasContent ? <Icon name={icon} width="24" height="24" asSVG /> : null}
-      </button>
-      {hasContent ? <AccordionItemInner blocks={blocks} context={context} /> : null}
-    </li>
-  );
-});
+          <span
+            className={`text-m-title-xs pr-2.5 font-medium flex ${
+              hasContent ? 'group-hover:text-primary-main' : ''
+            }`}
+          >
+            {labelIcon ? (
+              <Icon name={labelIcon} width="24" height="24" asSVG className="mr-3" />
+            ) : null}
+            {label}
+          </span>
+          {hasContent ? <Icon name={icon} width="24" height="24" asSVG /> : null}
+        </button>
+        {hasContent ? <AccordionItemInner blocks={blocks} context={context} /> : null}
+      </li>
+    );
+  },
+);
+
+function borderedLiClass(bordered) {
+  return bordered ? 'border p-4 rounded mb-4' : 'border-0 border-b last:border-b-0';
+}