@cloud-ru/uikit-product-fields-predefined 0.15.2 → 0.16.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloud-ru/uikit-product-fields-predefined",
   "title": "Fields Predefined",
-  "version": "0.15.2",
+  "version": "0.16.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -34,7 +34,7 @@
   "dependencies": {
     "@cloud-ru/uikit-product-icons": "16.1.1",
     "@cloud-ru/uikit-product-mobile-dropdown": "0.9.31",
-    "@cloud-ru/uikit-product-mobile-fields": "0.12.3",
+    "@cloud-ru/uikit-product-mobile-fields": "0.12.4",
     "@cloud-ru/uikit-product-mobile-modal": "0.9.28",
     "@cloud-ru/uikit-product-mobile-tooltip": "0.5.4",
     "@cloud-ru/uikit-product-utils": "8.1.0",
@@ -61,5 +61,5 @@
     "react-hook-form": ">=7.51.0",
     "yup": ">=0.32.0"
   },
-  "gitHead": "1a98d6d9bff32edcbb3f9b0be0a14dce3f2abe5d"
+  "gitHead": "f0d31e819998afe109833b200e61860543bcf54b"
 }

package/src/components/FieldAi/FieldAi.tsx

@@ -1,7 +1,7 @@
 import cn from 'classnames';
 import { forwardRef, KeyboardEventHandler, useEffect, useMemo, useRef, useState } from 'react';
 
-import { EyeClosedSVG, EyeSVG } from '@cloud-ru/uikit-product-icons';
+import { EyeClosedSVG, EyeSVG, PasswordLockSVG } from '@cloud-ru/uikit-product-icons';
 import { useLocale } from '@cloud-ru/uikit-product-locale';
 import {
   AdaptiveFieldTextArea,
@@ -10,12 +10,15 @@ import {
 } from '@cloud-ru/uikit-product-mobile-fields';
 import { WithLayoutType } from '@cloud-ru/uikit-product-utils';
 import { ButtonFunction, ButtonOutline } from '@snack-uikit/button';
+import { themeVars } from '@snack-uikit/figma-tokens';
 import { Tooltip } from '@snack-uikit/tooltip';
+import { Typography } from '@snack-uikit/typography';
 
 import { FieldSubmitButton } from '../../helperComponents/FieldSubmitButton';
 import { TextAreaActionsFooter } from '../../helperComponents/TextAreaActionsFooter';
 import { isTouchDevice as isTouchDeviceHelper } from '../../helpers';
 import { AIDisclaimer } from '../AIDisclaimer/AIDisclaimer';
+import { AlertButton } from './components/AlertButton';
 import { MobileFieldAi } from './components/MobileFieldAi';
 import { WithPasswordValidation } from './components/WithPasswordValidation';
 import styles from './styles.module.scss';
@@ -29,11 +32,25 @@ export type FieldAiProps = WithLayoutType<
     onSubmit(value: string): void;
     /** Действие при клике по кнопке сброса контекста */
     onResetContextClick?(): void;
+    /** Действие для отмены секьюрности поля */
+    onCancelSecure?(): void;
   }
 >;
 
 export const FieldAi = forwardRef<HTMLTextAreaElement, FieldAiProps>(
-  ({ secure = false, onSubmit: handleSubmitProp, value, onResetContextClick, disabled, className, ...props }, ref) => {
+  (
+    {
+      secure = false,
+      onSubmit: handleSubmitProp,
+      value,
+      onResetContextClick,
+      onCancelSecure,
+      disabled,
+      className,
+      ...props
+    },
+    ref,
+  ) => {
     const { layoutType, validationState } = props;
     const { t } = useLocale('FieldsPredefined');
     const isTouchDevice = isTouchDeviceHelper(layoutType);
@@ -48,6 +65,7 @@ export const FieldAi = forwardRef<HTMLTextAreaElement, FieldAiProps>(
     const passwordValidation = useMemo(() => getValidationPassword(value), [value]);
     const isPasswordValid = isPasswordMode ? Object.values(passwordValidation).every(Boolean) : true;
     const showPasswordError = !isPasswordValid && secure && value;
+    const showPasswordAlert = Boolean(onCancelSecure) && secure === 'password';
 
     useEffect(
       () => () => {
@@ -113,7 +131,14 @@ export const FieldAi = forwardRef<HTMLTextAreaElement, FieldAiProps>(
     }
 
     return (
-      <div className={cn(styles.wrapper, className)}>
+      <div className={cn(styles.wrapper, isPasswordMode && styles.passwordWrapper, className)}>
+        {showPasswordAlert && (
+          <div className={styles.alert}>
+            <PasswordLockSVG size={16} color={themeVars.sys.neutral.textSupport} />
+            <Typography.SansBodyS className={styles.alertText}>{t('FieldAi.secret.alert.text')}</Typography.SansBodyS>
+            <AlertButton label={t('FieldAi.secret.alert.button')} onClick={onCancelSecure} />
+          </div>
+        )}
         <WithPasswordValidation
           showValidation={isPasswordMode}
           passwordValidation={passwordValidation}

package/src/components/FieldAi/components/AlertButton/AlertButton.tsx

@@ -0,0 +1,16 @@
+import { Typography } from '@snack-uikit/typography';
+
+import styles from './styles.module.scss';
+
+export type AlertButtonProps = {
+  label: string;
+  onClick?(): void;
+};
+
+export function AlertButton({ label, onClick }: AlertButtonProps) {
+  return (
+    <button onClick={onClick} className={styles.button}>
+      <Typography.SansLabelM className={styles.label}>{label}</Typography.SansLabelM>
+    </button>
+  );
+}

package/src/components/FieldAi/components/AlertButton/index.ts

@@ -0,0 +1 @@
+export * from './AlertButton';

package/src/components/FieldAi/components/AlertButton/styles.module.scss

@@ -0,0 +1,20 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables' as stv;
+
+.button {
+  outline: none;
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+  height: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.label {
+  color: stv.$sys-blue-text-support;
+
+  &:hover {
+    color: stv.$sys-neutral-text-main;
+  }
+}

package/src/components/FieldAi/styles.module.scss

@@ -1,9 +1,38 @@
+/* stylelint-disable color-no-hex */
 @use '@sbercloud/figma-tokens-cloud-platform/build/scss/components/styles-tokens-fields' as ste;
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables' as stv;
 
 .wrapper {
   display: flex;
   flex-direction: column;
   gap: ste.$dimension-050m;
+  position: relative;
+}
+
+.passwordWrapper {
+  gap: 0;
+}
+
+.alert {
+  display: flex;
+  gap: 8px;
+  padding: 4px 8px;
+  border-radius: 8px 8px 0 0;
+  border: 1px solid stv.$sys-blue-decor-activated;
+  background-color: stv.$sys-blue-decor-default;
+  box-sizing: border-box;
+  height: 38px;
+  position: absolute;
+  left: 0;
+  top: -26px;
+  width: 100%;
+  color: stv.$sys-neutral-text-main;
+}
+
+.alertText {
+  flex: 1;
+  min-width: 0;
+  color: stv.$sys-neutral-text-main;
 }
 
 .secured {
@@ -34,18 +63,28 @@
 
 .submitButton {
   &:not([data-disabled]) {
-    /* stylelint-disable-next-line color-no-hex */
-    background: radial-gradient(92.53% 92.53% at 65.87% 21.69%, #7CB5F2 15%, #5FD7C2 45%, #26D07C 65%);
+    background: radial-gradient(92.53% 92.53% at 65.87% 21.69%, #7cb5f2 15%, #5fd7c2 45%, #26d07c 65%);
   }
 }
 
 .textarea {
-  &> :first-child {
-    &[data-validation=default]:not([data-readonly]):not([data-disable-focus]):focus-within:not([data-disabled]) {
+  & > :first-child {
+    &[data-validation='default']:not([data-readonly]):not([data-disable-focus]):focus-within:not([data-disabled]) {
       border-color: transparent;
-      /* stylelint-disable-next-line color-no-hex */
-      background: linear-gradient(var(--sys-neutral-background2-level), var(--sys-neutral-background2-level) 0) padding-box, radial-gradient(92.53% 92.53% at 65.87% 21.69%, #7CB5F2 8%, #78B9EC 17%, #70C6DD 28%, #64D8C7 38%, #5FD7C2 44%, #54D5B3 51%, #40D39C 58%, #26D07C 66%) border-box;
+      background:
+        linear-gradient(var(--sys-neutral-background2-level), var(--sys-neutral-background2-level) 0) padding-box,
+        radial-gradient(
+            92.53% 92.53% at 65.87% 21.69%,
+            #7cb5f2 8%,
+            #78b9ec 17%,
+            #70c6dd 28%,
+            #64d8c7 38%,
+            #5fd7c2 44%,
+            #54d5b3 51%,
+            #40d39c 58%,
+            #26d07c 66%
+          )
+          border-box;
     }
   }
 }
-