@cloud-ru/uikit-product-site-cookie-policy 1.1.0 → 1.2.0

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.2.0 (2025-12-22)
+
+
+### Features
+
+* **SITE-10433:** update component site-cookie ([6471e9e](https://gitverse.ru/cloud-ru-tech/uikit-product/commits/6471e9ec8830b2dbdac7b77c87c53980159626cd))
+
+
+
+
+
 # 1.1.0 (2025-12-17)
 
 

package/README.md

@@ -10,7 +10,13 @@ CookiePolicy — баннер для информирования пользов
 
 [//]: DOCUMENTATION_SECTION_START
 [//]: THIS_SECTION_IS_AUTOGENERATED_PLEASE_DONT_EDIT_IT
-
+## CookiePolicy
+### Props
+| name | type | default value | description |
+|------|------|---------------|-------------|
+| layoutType* | enum LayoutType: `"mobile"`, `"tablet"`, `"desktop"`, `"desktopSmall"` | - |  |
+| className | `string` | - | Дополнительный className root элемента |
+| onClick | `() => void` | - | Событие клика на кнопку |
 
 
 [//]: DOCUMENTATION_SECTION_END

package/dist/cjs/components/CookiePolicy.d.ts

@@ -1 +1,8 @@
-export declare function CookiePolicy(): import("react/jsx-runtime").JSX.Element | null;
+import { WithLayoutType } from '@cloud-ru/uikit-product-utils';
+export type CookiePolicyProps = WithLayoutType<{
+    /** Дополнительный className root элемента */
+    className?: string;
+    /** Событие клика на кнопку */
+    onClick?(): void;
+}>;
+export declare function CookiePolicy({ className, onClick, layoutType }: CookiePolicyProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/cjs/components/CookiePolicy.js

@@ -5,18 +5,26 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CookiePolicy = CookiePolicy;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
 const react_1 = require("react");
 const uikit_product_utils_1 = require("@cloud-ru/uikit-product-utils");
 const button_1 = require("@snack-uikit/button");
 const constants_1 = require("../constants");
 const CookiePolicyDescription_1 = require("./CookiePolicyDescription");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
-function CookiePolicy() {
+function CookiePolicy({ className, onClick, layoutType }) {
     const [skipWidget, setSkipWidget] = (0, uikit_product_utils_1.useLocalStorage)(constants_1.COOKIE_POLICY_STORAGE_KEY, 'false');
+    const [showCookiePolicy, setShowCookiePolicy] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        if (skipWidget === 'false')
+            setShowCookiePolicy(true);
+    }, [skipWidget]);
     const handleClickSubmit = (0, react_1.useCallback)(() => {
         setSkipWidget('true');
-    }, [setSkipWidget]);
-    if (skipWidget !== 'false')
+        setShowCookiePolicy(false);
+        onClick === null || onClick === void 0 ? void 0 : onClick();
+    }, [setSkipWidget, onClick]);
+    if (!showCookiePolicy)
         return null;
-    return ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.cookiePolicyWrapper, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.cookiePolicyDescriptionWithButton, children: [(0, jsx_runtime_1.jsx)(CookiePolicyDescription_1.CookiePolicyDescription, {}), (0, jsx_runtime_1.jsx)(button_1.ButtonFilled, { onClick: handleClickSubmit, label: constants_1.COOKIE_POLICY_RIGHT_SECTION_TEXT, size: 'm' })] }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.cookiePolicyWrapper, className), "data-layout-type": layoutType, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.cookiePolicyDescriptionWithButton, "data-layout-type": layoutType, children: [(0, jsx_runtime_1.jsx)(CookiePolicyDescription_1.CookiePolicyDescription, {}), (0, jsx_runtime_1.jsx)(button_1.ButtonFilled, { onClick: handleClickSubmit, label: constants_1.COOKIE_POLICY_RIGHT_SECTION_TEXT, size: 'm', fullWidth: layoutType === 'mobile' })] }) }));
 }

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

@@ -5,6 +5,15 @@
   padding:24px;
   display:flex;
   overflow:hidden;
+  border-radius:4px;
+}
+.cookiePolicyWrapper[data-layout-type=tablet]{
+  padding:16px;
+  max-width:704px;
+}
+.cookiePolicyWrapper[data-layout-type=mobile]{
+  padding:16px;
+  max-width:328px;
 }
 
 .cookiePolicyDescription{
@@ -17,22 +26,10 @@
   justify-content:space-between;
   gap:80px;
 }
-
-@media (max-width: 1023px){
-  .cookiePolicyWrapper{
-    padding:16px;
-    max-width:704px;
-  }
-  .cookiePolicyDescriptionWithButton{
-    gap:24px;
-  }
+.cookiePolicyDescriptionWithButton[data-layout-type=tablet]{
+  gap:24px;
 }
-@media (max-width: 767px){
-  .cookiePolicyWrapper{
-    max-width:328px;
-  }
-  .cookiePolicyDescriptionWithButton{
-    flex-direction:column;
-    gap:16px;
-  }
+.cookiePolicyDescriptionWithButton[data-layout-type=mobile]{
+  flex-direction:column;
+  gap:16px;
 }

package/dist/cjs/constants.d.ts

@@ -1,2 +1,2 @@
-export declare const COOKIE_POLICY_RIGHT_SECTION_TEXT = "\u041F\u041E\u041D\u042F\u0422\u041D\u041E";
+export declare const COOKIE_POLICY_RIGHT_SECTION_TEXT = "\u041F\u043E\u043D\u044F\u0442\u043D\u043E";
 export declare const COOKIE_POLICY_STORAGE_KEY = "userAgreeWithCookie";

package/dist/cjs/constants.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.COOKIE_POLICY_STORAGE_KEY = exports.COOKIE_POLICY_RIGHT_SECTION_TEXT = void 0;
-exports.COOKIE_POLICY_RIGHT_SECTION_TEXT = 'ПОНЯТНО';
+exports.COOKIE_POLICY_RIGHT_SECTION_TEXT = 'Понятно';
 exports.COOKIE_POLICY_STORAGE_KEY = 'userAgreeWithCookie';

package/dist/esm/components/CookiePolicy.d.ts

@@ -1 +1,8 @@
-export declare function CookiePolicy(): import("react/jsx-runtime").JSX.Element | null;
+import { WithLayoutType } from '@cloud-ru/uikit-product-utils';
+export type CookiePolicyProps = WithLayoutType<{
+    /** Дополнительный className root элемента */
+    className?: string;
+    /** Событие клика на кнопку */
+    onClick?(): void;
+}>;
+export declare function CookiePolicy({ className, onClick, layoutType }: CookiePolicyProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/esm/components/CookiePolicy.js

@@ -1,16 +1,24 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback } from 'react';
+import cn from 'classnames';
+import { useCallback, useEffect, useState } from 'react';
 import { useLocalStorage } from '@cloud-ru/uikit-product-utils';
 import { ButtonFilled } from '@snack-uikit/button';
 import { COOKIE_POLICY_RIGHT_SECTION_TEXT, COOKIE_POLICY_STORAGE_KEY } from '../constants';
 import { CookiePolicyDescription } from './CookiePolicyDescription';
 import s from './styles.module.css';
-export function CookiePolicy() {
+export function CookiePolicy({ className, onClick, layoutType }) {
     const [skipWidget, setSkipWidget] = useLocalStorage(COOKIE_POLICY_STORAGE_KEY, 'false');
+    const [showCookiePolicy, setShowCookiePolicy] = useState(false);
+    useEffect(() => {
+        if (skipWidget === 'false')
+            setShowCookiePolicy(true);
+    }, [skipWidget]);
     const handleClickSubmit = useCallback(() => {
         setSkipWidget('true');
-    }, [setSkipWidget]);
-    if (skipWidget !== 'false')
+        setShowCookiePolicy(false);
+        onClick === null || onClick === void 0 ? void 0 : onClick();
+    }, [setSkipWidget, onClick]);
+    if (!showCookiePolicy)
         return null;
-    return (_jsx("div", { className: s.cookiePolicyWrapper, children: _jsxs("div", { className: s.cookiePolicyDescriptionWithButton, children: [_jsx(CookiePolicyDescription, {}), _jsx(ButtonFilled, { onClick: handleClickSubmit, label: COOKIE_POLICY_RIGHT_SECTION_TEXT, size: 'm' })] }) }));
+    return (_jsx("div", { className: cn(s.cookiePolicyWrapper, className), "data-layout-type": layoutType, children: _jsxs("div", { className: s.cookiePolicyDescriptionWithButton, "data-layout-type": layoutType, children: [_jsx(CookiePolicyDescription, {}), _jsx(ButtonFilled, { onClick: handleClickSubmit, label: COOKIE_POLICY_RIGHT_SECTION_TEXT, size: 'm', fullWidth: layoutType === 'mobile' })] }) }));
 }

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

@@ -5,6 +5,15 @@
   padding:24px;
   display:flex;
   overflow:hidden;
+  border-radius:4px;
+}
+.cookiePolicyWrapper[data-layout-type=tablet]{
+  padding:16px;
+  max-width:704px;
+}
+.cookiePolicyWrapper[data-layout-type=mobile]{
+  padding:16px;
+  max-width:328px;
 }
 
 .cookiePolicyDescription{
@@ -17,22 +26,10 @@
   justify-content:space-between;
   gap:80px;
 }
-
-@media (max-width: 1023px){
-  .cookiePolicyWrapper{
-    padding:16px;
-    max-width:704px;
-  }
-  .cookiePolicyDescriptionWithButton{
-    gap:24px;
-  }
+.cookiePolicyDescriptionWithButton[data-layout-type=tablet]{
+  gap:24px;
 }
-@media (max-width: 767px){
-  .cookiePolicyWrapper{
-    max-width:328px;
-  }
-  .cookiePolicyDescriptionWithButton{
-    flex-direction:column;
-    gap:16px;
-  }
+.cookiePolicyDescriptionWithButton[data-layout-type=mobile]{
+  flex-direction:column;
+  gap:16px;
 }

package/dist/esm/constants.d.ts

@@ -1,2 +1,2 @@
-export declare const COOKIE_POLICY_RIGHT_SECTION_TEXT = "\u041F\u041E\u041D\u042F\u0422\u041D\u041E";
+export declare const COOKIE_POLICY_RIGHT_SECTION_TEXT = "\u041F\u043E\u043D\u044F\u0442\u043D\u043E";
 export declare const COOKIE_POLICY_STORAGE_KEY = "userAgreeWithCookie";

package/dist/esm/constants.js

@@ -1,2 +1,2 @@
-export const COOKIE_POLICY_RIGHT_SECTION_TEXT = 'ПОНЯТНО';
+export const COOKIE_POLICY_RIGHT_SECTION_TEXT = 'Понятно';
 export const COOKIE_POLICY_STORAGE_KEY = 'userAgreeWithCookie';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloud-ru/uikit-product-site-cookie-policy",
   "title": "Site Cookie Policy",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -39,7 +39,8 @@
     "@cloud-ru/uikit-product-utils": "8.1.0",
     "@snack-uikit/button": "0.19.7",
     "@snack-uikit/link": "0.17.12",
-    "@snack-uikit/typography": "0.8.7"
+    "@snack-uikit/typography": "0.8.7",
+    "classnames": "2.5.1"
   },
-  "gitHead": "1a98d6d9bff32edcbb3f9b0be0a14dce3f2abe5d"
+  "gitHead": "6974dbef2c07e14bc62de04868a85f7a931b48b0"
 }

package/src/components/CookiePolicy.tsx

@@ -1,26 +1,46 @@
-import { useCallback } from 'react';
+import cn from 'classnames';
+import { useCallback, useEffect, useState } from 'react';
 
-import { useLocalStorage } from '@cloud-ru/uikit-product-utils';
+import { useLocalStorage, WithLayoutType } from '@cloud-ru/uikit-product-utils';
 import { ButtonFilled } from '@snack-uikit/button';
 
 import { COOKIE_POLICY_RIGHT_SECTION_TEXT, COOKIE_POLICY_STORAGE_KEY } from '../constants';
 import { CookiePolicyDescription } from './CookiePolicyDescription';
 import s from './styles.module.scss';
 
-export function CookiePolicy() {
+export type CookiePolicyProps = WithLayoutType<{
+  /** Дополнительный className root элемента */
+  className?: string;
+  /** Событие клика на кнопку */
+  onClick?(): void;
+}>;
+
+export function CookiePolicy({ className, onClick, layoutType }: CookiePolicyProps) {
   const [skipWidget, setSkipWidget] = useLocalStorage<'true' | 'false'>(COOKIE_POLICY_STORAGE_KEY, 'false');
+  const [showCookiePolicy, setShowCookiePolicy] = useState(false);
+
+  useEffect(() => {
+    if (skipWidget === 'false') setShowCookiePolicy(true);
+  }, [skipWidget]);
 
   const handleClickSubmit = useCallback(() => {
     setSkipWidget('true');
-  }, [setSkipWidget]);
+    setShowCookiePolicy(false);
+    onClick?.();
+  }, [setSkipWidget, onClick]);
 
-  if (skipWidget !== 'false') return null;
+  if (!showCookiePolicy) return null;
 
   return (
-    <div className={s.cookiePolicyWrapper}>
-      <div className={s.cookiePolicyDescriptionWithButton}>
+    <div className={cn(s.cookiePolicyWrapper, className)} data-layout-type={layoutType}>
+      <div className={s.cookiePolicyDescriptionWithButton} data-layout-type={layoutType}>
         <CookiePolicyDescription />
-        <ButtonFilled onClick={handleClickSubmit} label={COOKIE_POLICY_RIGHT_SECTION_TEXT} size='m' />
+        <ButtonFilled
+          onClick={handleClickSubmit}
+          label={COOKIE_POLICY_RIGHT_SECTION_TEXT}
+          size='m'
+          fullWidth={layoutType === 'mobile'}
+        />
       </div>
     </div>
   );

package/src/components/styles.module.scss

@@ -1,8 +1,5 @@
 @use '@sbercloud/figma-tokens-web/build/scss/styles-theme-variables' as ds;
 
-$breakpoint-mobile: 767px;
-$breakpoint-tablet: 1023px;
-
 .cookiePolicyWrapper {
   background: ds.$sys-graphite-accent-default;
   width: 100%;
@@ -10,6 +7,17 @@ $breakpoint-tablet: 1023px;
   padding: 24px;
   display: flex;
   overflow: hidden;
+  border-radius: 4px;
+
+  &[data-layout-type='tablet'] {
+    padding: 16px;
+    max-width: 704px;
+  }
+
+  &[data-layout-type='mobile'] {
+    padding: 16px;
+    max-width: 328px;
+  }
 }
 
 .cookiePolicyDescription {
@@ -21,25 +29,12 @@ $breakpoint-tablet: 1023px;
   align-items: center;
   justify-content: space-between;
   gap: 80px;
-}
-
-@media (max-width: $breakpoint-tablet) {
-  .cookiePolicyWrapper {
-    padding: 16px;
-    max-width: 704px;
-  }
 
-  .cookiePolicyDescriptionWithButton {
+  &[data-layout-type='tablet'] {
     gap: 24px;
   }
-}
-
-@media (max-width: $breakpoint-mobile) {
-  .cookiePolicyWrapper {
-    max-width: 328px;
-  }
 
-  .cookiePolicyDescriptionWithButton {
+  &[data-layout-type='mobile'] {
     flex-direction: column;
     gap: 16px;
   }

package/src/constants.ts

@@ -1,3 +1,3 @@
-export const COOKIE_POLICY_RIGHT_SECTION_TEXT = 'ПОНЯТНО';
+export const COOKIE_POLICY_RIGHT_SECTION_TEXT = 'Понятно';
 
 export const COOKIE_POLICY_STORAGE_KEY = 'userAgreeWithCookie';