@cloud-ru/uikit-product-site-hero 1.1.0 → 1.1.1

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 1.1.1 (2025-12-15)
+
+
+### Bug Fixes
+
+* **SITE-10411:** add missing HeroSlider styles ([fdc9edf](https://gitverse.ru/cloud-ru-tech/uikit-product/commits/fdc9edf140c657c6857ba9496fafe81e8ae0e32e))
+
+
+
+
+
 # 1.1.0 (2025-12-15)
 
 

package/dist/cjs/components/HeroSlider/HeroSlider.js

@@ -50,5 +50,5 @@ function HeroSlider(_a) {
     return ((0, jsx_runtime_1.jsxs)("section", { className: (0, classnames_1.default)(styles_module_scss_1.default.root, className), id: id, "data-appearance": currentAppearance, "data-color": currentColor, "data-layout-type": layoutType, children: [(0, jsx_runtime_1.jsx)(carousel_1.Carousel, Object.assign({ className: styles_module_scss_1.default.heroCarousel, arrows: false, pagination: false, infiniteScroll: true, autoSwipe: autoSwipe, state: {
                     page: currentPage,
                     onChange: setCurrentPage,
-                }, gap: '0' }, (0, uikit_product_utils_1.extractSupportProps)(rest), { children: items.map((item, i) => ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.carouselItemWrapper, "data-layout-type": layoutType, children: (0, jsx_runtime_1.jsx)(components_1.HeroSlide, Object.assign({}, item, { className: styles_module_scss_1.default.heroSlide, layoutType: layoutType })) }, `${item.title}${i}`))) })), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.tabsWrapper), "data-layout-type": layoutType, children: (0, jsx_runtime_1.jsx)(components_1.TabsRowHeroSlider, { className: styles_module_scss_1.default.tabs, appearance: currentAppearance, active: currentTab, items: tabs, onTabClick: handleTabClick }) }), (0, jsx_runtime_1.jsx)(components_1.Control, { className: styles_module_scss_1.default.control, variant: 'prev', onClick: handleLeftClick }), (0, jsx_runtime_1.jsx)(components_1.Control, { className: styles_module_scss_1.default.control, variant: 'next', onClick: handleRightClick })] }));
+                }, gap: '0' }, (0, uikit_product_utils_1.extractSupportProps)(rest), { children: items.map((item, i) => ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.carouselItemWrapper, "data-layout-type": layoutType, children: (0, jsx_runtime_1.jsx)(components_1.HeroSlide, Object.assign({}, item, { className: styles_module_scss_1.default.heroSlide, layoutType: layoutType })) }, `${item.title}${i}`))) })), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.tabsWrapper), "data-layout-type": layoutType, children: (0, jsx_runtime_1.jsx)(components_1.TabsRowHeroSlider, { className: styles_module_scss_1.default.tabs, appearance: currentAppearance, active: currentTab, items: tabs, animationEnabled: autoSwipe === AUTO_SWIPE, onTabClick: handleTabClick }) }), (0, jsx_runtime_1.jsx)(components_1.Control, { className: styles_module_scss_1.default.control, variant: 'prev', onClick: handleLeftClick }), (0, jsx_runtime_1.jsx)(components_1.Control, { className: styles_module_scss_1.default.control, variant: 'next', onClick: handleRightClick })] }));
 }

package/dist/cjs/components/HeroSlider/components/TabHeroSlider/TabHeroSlider.d.ts

@@ -5,6 +5,7 @@ export type TabHeroSliderBase = {
 type TabHeroSliderProps = TabHeroSliderBase & {
     active: boolean;
     appearance: AppearanceType;
+    animationEnabled: boolean;
     onClick: () => void;
 };
 export declare function TabHeroSlider(props: TabHeroSliderProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/HeroSlider/components/TabHeroSlider/TabHeroSlider.js

@@ -9,6 +9,6 @@ const uikit_product_site_rich_text_1 = require("@cloud-ru/uikit-product-site-ric
 const typography_1 = require("@snack-uikit/typography");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 function TabHeroSlider(props) {
-    const { title, appearance, active, onClick } = props;
-    return ((0, jsx_runtime_1.jsxs)("button", { className: styles_module_scss_1.default.tab, type: 'button', role: 'tab', onClick: onClick, "data-appearance": appearance, "data-active": active, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography.SansBodyS, { children: (0, jsx_runtime_1.jsx)(uikit_product_site_rich_text_1.RichText, { richText: title }) }), active && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.timeline })] }));
+    const { title, appearance, active, animationEnabled, onClick } = props;
+    return ((0, jsx_runtime_1.jsxs)("button", { className: styles_module_scss_1.default.tab, type: 'button', role: 'tab', onClick: onClick, "data-appearance": appearance, "data-active": active, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography.SansBodyS, { children: (0, jsx_runtime_1.jsx)(uikit_product_site_rich_text_1.RichText, { richText: title }) }), active && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.timeline, "data-animation-enabled": animationEnabled })] }));
 }

package/dist/cjs/components/HeroSlider/components/TabHeroSlider/styles.module.css

@@ -19,14 +19,14 @@
   color:var(--sys-graphite-text-disabled, #a3a3a3);
   border-color:var(--sys-graphite-accent-pressed, #4e4e4e);
 }
-.tab[data-appearance=graphite][data-active=true]{
+.tab[data-appearance=graphite]:hover, .tab[data-appearance=graphite][data-active=true]{
   color:var(--sys-graphite-on-accent, #ffffff);
 }
 .tab[data-appearance=decor]{
   color:var(--sys-neutral-text-support, #656774);
   border-color:var(--sys-invert-neutral-decor-activated, #6d707f);
 }
-.tab[data-appearance=decor][data-active=true]{
+.tab[data-appearance=decor]:hover, .tab[data-appearance=decor][data-active=true]{
   color:var(--sys-neutral-text-main, #41424e);
 }
 .tab[data-appearance=brand]{
@@ -36,7 +36,7 @@
 .tab[data-appearance=brand] .timeline{
   border-color:var(--sys-fluorescent-yellow-accent-default, #cff500);
 }
-.tab[data-appearance=brand][data-active=true]{
+.tab[data-appearance=brand]:hover, .tab[data-appearance=brand][data-active=true]{
   color:var(--sys-primary-text-main, #0d402b);
 }
 
@@ -45,8 +45,11 @@
   top:-1px;
   left:0px;
   z-index:1;
-  width:0;
+  width:100%;
   border-top:3px solid var(--sys-primary-accent-default, #26d07c);
+}
+.timeline[data-animation-enabled=true]{
+  width:0;
   animation:growTimeline 5s linear forwards;
 }
 

package/dist/cjs/components/HeroSlider/components/TabsRowHeroSlider/TabsRowHeroSlider.d.ts

@@ -5,6 +5,7 @@ type TabsRowHeroSliderProps = {
     appearance: AppearanceType;
     active: TabHeroSliderBase;
     items: TabHeroSliderBase[];
+    animationEnabled: boolean;
     onTabClick: (page: TabHeroSliderBase) => void;
 };
 export declare function TabsRowHeroSlider(props: TabsRowHeroSliderProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/HeroSlider/components/TabsRowHeroSlider/TabsRowHeroSlider.js

@@ -10,7 +10,7 @@ const react_1 = require("react");
 const TabHeroSlider_1 = require("../TabHeroSlider");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 function TabsRowHeroSlider(props) {
-    const { className, items, appearance, active, onTabClick } = props;
+    const { className, items, appearance, active, animationEnabled, onTabClick } = props;
     const containerRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         const container = containerRef.current;
@@ -31,5 +31,5 @@ function TabsRowHeroSlider(props) {
     const handleTabClick = (tab) => () => {
         onTabClick(tab);
     };
-    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.tabs, className), ref: containerRef, children: items.map((tab, i) => ((0, jsx_runtime_1.jsx)(TabHeroSlider_1.TabHeroSlider, Object.assign({ appearance: appearance, active: tab === active, onClick: handleTabClick(tab) }, tab), `tab-${i}-${tab.title}`))) }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.tabs, className), ref: containerRef, children: items.map((tab, i) => ((0, jsx_runtime_1.jsx)(TabHeroSlider_1.TabHeroSlider, Object.assign({ appearance: appearance, active: tab === active, animationEnabled: animationEnabled, onClick: handleTabClick(tab) }, tab), `tab-${i}-${tab.title}`))) }));
 }

package/dist/esm/components/HeroSlider/HeroSlider.js

@@ -44,5 +44,5 @@ export function HeroSlider(_a) {
     return (_jsxs("section", { className: cn(styles.root, className), id: id, "data-appearance": currentAppearance, "data-color": currentColor, "data-layout-type": layoutType, children: [_jsx(Carousel, Object.assign({ className: styles.heroCarousel, arrows: false, pagination: false, infiniteScroll: true, autoSwipe: autoSwipe, state: {
                     page: currentPage,
                     onChange: setCurrentPage,
-                }, gap: '0' }, extractSupportProps(rest), { children: items.map((item, i) => (_jsx("div", { className: styles.carouselItemWrapper, "data-layout-type": layoutType, children: _jsx(HeroSlide, Object.assign({}, item, { className: styles.heroSlide, layoutType: layoutType })) }, `${item.title}${i}`))) })), _jsx("div", { className: cn(styles.tabsWrapper), "data-layout-type": layoutType, children: _jsx(TabsRowHeroSlider, { className: styles.tabs, appearance: currentAppearance, active: currentTab, items: tabs, onTabClick: handleTabClick }) }), _jsx(Control, { className: styles.control, variant: 'prev', onClick: handleLeftClick }), _jsx(Control, { className: styles.control, variant: 'next', onClick: handleRightClick })] }));
+                }, gap: '0' }, extractSupportProps(rest), { children: items.map((item, i) => (_jsx("div", { className: styles.carouselItemWrapper, "data-layout-type": layoutType, children: _jsx(HeroSlide, Object.assign({}, item, { className: styles.heroSlide, layoutType: layoutType })) }, `${item.title}${i}`))) })), _jsx("div", { className: cn(styles.tabsWrapper), "data-layout-type": layoutType, children: _jsx(TabsRowHeroSlider, { className: styles.tabs, appearance: currentAppearance, active: currentTab, items: tabs, animationEnabled: autoSwipe === AUTO_SWIPE, onTabClick: handleTabClick }) }), _jsx(Control, { className: styles.control, variant: 'prev', onClick: handleLeftClick }), _jsx(Control, { className: styles.control, variant: 'next', onClick: handleRightClick })] }));
 }

package/dist/esm/components/HeroSlider/components/TabHeroSlider/TabHeroSlider.d.ts

@@ -5,6 +5,7 @@ export type TabHeroSliderBase = {
 type TabHeroSliderProps = TabHeroSliderBase & {
     active: boolean;
     appearance: AppearanceType;
+    animationEnabled: boolean;
     onClick: () => void;
 };
 export declare function TabHeroSlider(props: TabHeroSliderProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/HeroSlider/components/TabHeroSlider/TabHeroSlider.js

@@ -3,6 +3,6 @@ import { RichText } from '@cloud-ru/uikit-product-site-rich-text';
 import { Typography } from '@snack-uikit/typography';
 import styles from './styles.module.css';
 export function TabHeroSlider(props) {
-    const { title, appearance, active, onClick } = props;
-    return (_jsxs("button", { className: styles.tab, type: 'button', role: 'tab', onClick: onClick, "data-appearance": appearance, "data-active": active, children: [_jsx(Typography.SansBodyS, { children: _jsx(RichText, { richText: title }) }), active && _jsx("div", { className: styles.timeline })] }));
+    const { title, appearance, active, animationEnabled, onClick } = props;
+    return (_jsxs("button", { className: styles.tab, type: 'button', role: 'tab', onClick: onClick, "data-appearance": appearance, "data-active": active, children: [_jsx(Typography.SansBodyS, { children: _jsx(RichText, { richText: title }) }), active && _jsx("div", { className: styles.timeline, "data-animation-enabled": animationEnabled })] }));
 }

package/dist/esm/components/HeroSlider/components/TabHeroSlider/styles.module.css

@@ -19,14 +19,14 @@
   color:var(--sys-graphite-text-disabled, #a3a3a3);
   border-color:var(--sys-graphite-accent-pressed, #4e4e4e);
 }
-.tab[data-appearance=graphite][data-active=true]{
+.tab[data-appearance=graphite]:hover, .tab[data-appearance=graphite][data-active=true]{
   color:var(--sys-graphite-on-accent, #ffffff);
 }
 .tab[data-appearance=decor]{
   color:var(--sys-neutral-text-support, #656774);
   border-color:var(--sys-invert-neutral-decor-activated, #6d707f);
 }
-.tab[data-appearance=decor][data-active=true]{
+.tab[data-appearance=decor]:hover, .tab[data-appearance=decor][data-active=true]{
   color:var(--sys-neutral-text-main, #41424e);
 }
 .tab[data-appearance=brand]{
@@ -36,7 +36,7 @@
 .tab[data-appearance=brand] .timeline{
   border-color:var(--sys-fluorescent-yellow-accent-default, #cff500);
 }
-.tab[data-appearance=brand][data-active=true]{
+.tab[data-appearance=brand]:hover, .tab[data-appearance=brand][data-active=true]{
   color:var(--sys-primary-text-main, #0d402b);
 }
 
@@ -45,8 +45,11 @@
   top:-1px;
   left:0px;
   z-index:1;
-  width:0;
+  width:100%;
   border-top:3px solid var(--sys-primary-accent-default, #26d07c);
+}
+.timeline[data-animation-enabled=true]{
+  width:0;
   animation:growTimeline 5s linear forwards;
 }
 

package/dist/esm/components/HeroSlider/components/TabsRowHeroSlider/TabsRowHeroSlider.d.ts

@@ -5,6 +5,7 @@ type TabsRowHeroSliderProps = {
     appearance: AppearanceType;
     active: TabHeroSliderBase;
     items: TabHeroSliderBase[];
+    animationEnabled: boolean;
     onTabClick: (page: TabHeroSliderBase) => void;
 };
 export declare function TabsRowHeroSlider(props: TabsRowHeroSliderProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/HeroSlider/components/TabsRowHeroSlider/TabsRowHeroSlider.js

@@ -4,7 +4,7 @@ import { useEffect, useRef } from 'react';
 import { TabHeroSlider } from '../TabHeroSlider';
 import styles from './styles.module.css';
 export function TabsRowHeroSlider(props) {
-    const { className, items, appearance, active, onTabClick } = props;
+    const { className, items, appearance, active, animationEnabled, onTabClick } = props;
     const containerRef = useRef(null);
     useEffect(() => {
         const container = containerRef.current;
@@ -25,5 +25,5 @@ export function TabsRowHeroSlider(props) {
     const handleTabClick = (tab) => () => {
         onTabClick(tab);
     };
-    return (_jsx("div", { className: cn(styles.tabs, className), ref: containerRef, children: items.map((tab, i) => (_jsx(TabHeroSlider, Object.assign({ appearance: appearance, active: tab === active, onClick: handleTabClick(tab) }, tab), `tab-${i}-${tab.title}`))) }));
+    return (_jsx("div", { className: cn(styles.tabs, className), ref: containerRef, children: items.map((tab, i) => (_jsx(TabHeroSlider, Object.assign({ appearance: appearance, active: tab === active, animationEnabled: animationEnabled, onClick: handleTabClick(tab) }, tab), `tab-${i}-${tab.title}`))) }));
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloud-ru/uikit-product-site-hero",
   "title": "Site Hero",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -56,5 +56,5 @@
   "peerDependencies": {
     "@cloud-ru/uikit-product-locale": "*"
   },
-  "gitHead": "fdcf94a6757e590c66ace1a43667bb29ce748d64"
+  "gitHead": "acf24c0bfa98c4117bf6b90eb9927d1cf4f6038c"
 }

package/src/components/HeroSlider/HeroSlider.tsx

@@ -87,6 +87,7 @@ export function HeroSlider({ id, tabs: tabsProp, layoutType, items: itemsProp, c
           appearance={currentAppearance}
           active={currentTab}
           items={tabs}
+          animationEnabled={autoSwipe === AUTO_SWIPE}
           onTabClick={handleTabClick}
         />
       </div>

package/src/components/HeroSlider/components/TabHeroSlider/TabHeroSlider.tsx

@@ -11,11 +11,12 @@ export type TabHeroSliderBase = {
 type TabHeroSliderProps = TabHeroSliderBase & {
   active: boolean;
   appearance: AppearanceType;
+  animationEnabled: boolean;
   onClick: () => void;
 };
 
 export function TabHeroSlider(props: TabHeroSliderProps) {
-  const { title, appearance, active, onClick } = props;
+  const { title, appearance, active, animationEnabled, onClick } = props;
 
   return (
     <button
@@ -29,7 +30,7 @@ export function TabHeroSlider(props: TabHeroSliderProps) {
       <Typography.SansBodyS>
         <RichText richText={title} />
       </Typography.SansBodyS>
-      {active && <div className={styles.timeline} />}
+      {active && <div className={styles.timeline} data-animation-enabled={animationEnabled} />}
     </button>
   );
 }

package/src/components/HeroSlider/components/TabHeroSlider/styles.module.scss

@@ -32,6 +32,7 @@ $brand: 'brand';
     color: var.$sys-graphite-text-disabled;
     border-color: var.$sys-graphite-accent-pressed;
 
+    &:hover,
     &[data-active='true'] {
       color: var.$sys-graphite-on-accent;
     }
@@ -41,6 +42,7 @@ $brand: 'brand';
     color: var.$sys-neutral-text-support;
     border-color: var.$sys-invert-neutral-decor-activated;
 
+    &:hover,
     &[data-active='true'] {
       color: var.$sys-neutral-text-main;
     }
@@ -54,6 +56,7 @@ $brand: 'brand';
       border-color: var.$sys-fluorescent-yellow-accent-default;
     }
 
+    &:hover,
     &[data-active='true'] {
       color: var.$sys-primary-text-main;
     }
@@ -69,11 +72,14 @@ $brand: 'brand';
   /* stylelint-disable-next-line declaration-property-value-allowed-list */
   z-index: 1;
 
-  width: 0;
+  width: 100%;
 
   border-top: 3px solid var.$sys-primary-accent-default;
 
-  animation: growTimeline 5s linear forwards;
+  &[data-animation-enabled='true'] {
+    width: 0;
+    animation: growTimeline 5s linear forwards;
+  }
 }
 
 @keyframes growTimeline {

package/src/components/HeroSlider/components/TabsRowHeroSlider/TabsRowHeroSlider.tsx

@@ -10,11 +10,12 @@ type TabsRowHeroSliderProps = {
   appearance: AppearanceType;
   active: TabHeroSliderBase;
   items: TabHeroSliderBase[];
+  animationEnabled: boolean;
   onTabClick: (page: TabHeroSliderBase) => void;
 };
 
 export function TabsRowHeroSlider(props: TabsRowHeroSliderProps) {
-  const { className, items, appearance, active, onTabClick } = props;
+  const { className, items, appearance, active, animationEnabled, onTabClick } = props;
 
   const containerRef = useRef<HTMLDivElement>(null);
 
@@ -49,6 +50,7 @@ export function TabsRowHeroSlider(props: TabsRowHeroSliderProps) {
           key={`tab-${i}-${tab.title}`}
           appearance={appearance}
           active={tab === active}
+          animationEnabled={animationEnabled}
           onClick={handleTabClick(tab)}
           {...tab}
         />