@salutejs/plasma-new-hope 0.326.0-canary.2002.15300192913.0 → 0.326.0-canary.2006.15341327171.0

package/emotion/cjs/components/Note/Note.template-doc.mdx

@@ -157,3 +157,41 @@ export function App() {
     );
 }
 ```
+
+### hasClose и contolled вариант
+Свойство `hasClose` добавляет крестик в правом верхнем углу. При нажатии сработает функция `onCloseButtonClick`
+
+```tsx live
+import React from 'react';
+import { Note, Button } from '@salutejs/{{ package }}';
+import { IconSaluteOutline } from '@salutejs/plasma-icons';
+
+export function App() {
+  const [state, setState] = useState(true);
+
+  return (
+    <div style=\{{height: '8rem', display: 'block'}}>
+      <Button
+        size="s"
+        style=\{{ marginBottom: "0.5rem" }}
+        onClick={() => setState(!state)}
+      >
+        Открыть
+      </Button>
+      {state && (
+        <Note
+          title="Ваш заголовок"
+          text="Пример с возможностью закрыть по control"
+          view="default"
+          size="s"
+          hasClose
+          onCloseButtonClick={() => {
+            setState(false);
+          }}
+        />
+      )}
+    </div>
+  );
+}
+
+```

package/emotion/es/components/Note/Note.template-doc.mdx

@@ -157,3 +157,41 @@ export function App() {
     );
 }
 ```
+
+### hasClose и contolled вариант
+Свойство `hasClose` добавляет крестик в правом верхнем углу. При нажатии сработает функция `onCloseButtonClick`
+
+```tsx live
+import React from 'react';
+import { Note, Button } from '@salutejs/{{ package }}';
+import { IconSaluteOutline } from '@salutejs/plasma-icons';
+
+export function App() {
+  const [state, setState] = useState(true);
+
+  return (
+    <div style=\{{height: '8rem', display: 'block'}}>
+      <Button
+        size="s"
+        style=\{{ marginBottom: "0.5rem" }}
+        onClick={() => setState(!state)}
+      >
+        Открыть
+      </Button>
+      {state && (
+        <Note
+          title="Ваш заголовок"
+          text="Пример с возможностью закрыть по control"
+          view="default"
+          size="s"
+          hasClose
+          onCloseButtonClick={() => {
+            setState(false);
+          }}
+        />
+      )}
+    </div>
+  );
+}
+
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salutejs/plasma-new-hope",
-  "version": "0.326.0-canary.2002.15300192913.0",
+  "version": "0.326.0-canary.2006.15341327171.0",
   "description": "Salute Design System blueprint",
   "main": "cjs/index.js",
   "module": "es/index.js",
@@ -79,7 +79,7 @@
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^25.0.4",
     "@rollup/plugin-node-resolve": "^15.1.0",
-    "@salutejs/plasma-sb-utils": "0.199.0-canary.2002.15300192913.0",
+    "@salutejs/plasma-sb-utils": "0.198.0",
     "@salutejs/plasma-themes": "0.33.0",
     "@storybook/addon-docs": "8.6.12",
     "@storybook/addon-essentials": "8.6.12",
@@ -117,7 +117,7 @@
     "@linaria/react": "5.0.3",
     "@popperjs/core": "2.11.8",
     "@salutejs/input-core": "2.1.2",
-    "@salutejs/plasma-core": "1.198.0-canary.2002.15300192913.0",
+    "@salutejs/plasma-core": "1.197.0",
     "@salutejs/react-maskinput": "3.2.6",
     "@tanstack/react-table": "8.21.2",
     "@tanstack/react-virtual": "3.13.2",
@@ -137,5 +137,5 @@
   "sideEffects": [
     "*.css"
   ],
-  "gitHead": "a6861daabc666b8fa3b10bdc15b267993d2b04f2"
+  "gitHead": "bb6b5858b23202a011b0353019942d5e9971bbb0"
 }

package/styled-components/cjs/components/Note/Note.template-doc.mdx

@@ -157,3 +157,41 @@ export function App() {
     );
 }
 ```
+
+### hasClose и contolled вариант
+Свойство `hasClose` добавляет крестик в правом верхнем углу. При нажатии сработает функция `onCloseButtonClick`
+
+```tsx live
+import React from 'react';
+import { Note, Button } from '@salutejs/{{ package }}';
+import { IconSaluteOutline } from '@salutejs/plasma-icons';
+
+export function App() {
+  const [state, setState] = useState(true);
+
+  return (
+    <div style=\{{height: '8rem', display: 'block'}}>
+      <Button
+        size="s"
+        style=\{{ marginBottom: "0.5rem" }}
+        onClick={() => setState(!state)}
+      >
+        Открыть
+      </Button>
+      {state && (
+        <Note
+          title="Ваш заголовок"
+          text="Пример с возможностью закрыть по control"
+          view="default"
+          size="s"
+          hasClose
+          onCloseButtonClick={() => {
+            setState(false);
+          }}
+        />
+      )}
+    </div>
+  );
+}
+
+```

package/styled-components/es/components/Note/Note.template-doc.mdx

@@ -157,3 +157,41 @@ export function App() {
     );
 }
 ```
+
+### hasClose и contolled вариант
+Свойство `hasClose` добавляет крестик в правом верхнем углу. При нажатии сработает функция `onCloseButtonClick`
+
+```tsx live
+import React from 'react';
+import { Note, Button } from '@salutejs/{{ package }}';
+import { IconSaluteOutline } from '@salutejs/plasma-icons';
+
+export function App() {
+  const [state, setState] = useState(true);
+
+  return (
+    <div style=\{{height: '8rem', display: 'block'}}>
+      <Button
+        size="s"
+        style=\{{ marginBottom: "0.5rem" }}
+        onClick={() => setState(!state)}
+      >
+        Открыть
+      </Button>
+      {state && (
+        <Note
+          title="Ваш заголовок"
+          text="Пример с возможностью закрыть по control"
+          view="default"
+          size="s"
+          hasClose
+          onCloseButtonClick={() => {
+            setState(false);
+          }}
+        />
+      )}
+    </div>
+  );
+}
+
+```