npm - @salutejs/plasma-new-hope - Versions diffs - 0.236.0-canary.1681.12494238870.0 → 0.236.0-canary.1681.12503763792.0 - Mend

@salutejs/plasma-new-hope 0.236.0-canary.1681.12494238870.0 → 0.236.0-canary.1681.12503763792.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (41) hide show

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

@@ -0,0 +1,159 @@
+---
+id: note
+title: Note
+---
+import { PropsTable, Description } from '@site/src/components';
+# Note
+Компонент для отображения текста в виде информационных, предупреждающих, обычных подсказок.
+<Description name="Note" />
+<PropsTable name="Note" />
+## Примеры
+### Вид компонента
+Вид компонента задается с помощью свойства `view`:
+```tsx live
+import React from 'react';
+import { Note } from '@salutejs/{{ package }}';
+import { IconSaluteOutline } from '@salutejs/plasma-icons';
+export function App() {
+    return (
+        <div>
+            <Note
+                title="Title"
+                text="Text"
+                view="default"
+                size="s"
+                contentBefore={<IconSaluteOutline size="xs" color="inherit" />}
+            />
+            <Note
+                title="Title"
+                text="Text"
+                view="positive"
+                size="s"
+                contentBefore={<IconSaluteOutline size="xs" color="inherit" />}
+            />
+            <Note
+                title="Title"
+                text="Text"
+                view="warning"
+                size="s"
+                contentBefore={<IconSaluteOutline size="xs" color="inherit" />}
+            />
+            <Note
+                title="Title"
+                text="Text"
+                view="negative"
+                size="s"
+                contentBefore={<IconSaluteOutline size="xs" color="inherit" />}
+            />
+            <Note
+                title="Title"
+                text="Text"
+                view="info"
+                size="s"
+                contentBefore={<IconSaluteOutline size="xs" color="inherit" />}
+            />
+        </div>
+    );
+}
+```
+### Размер компонента
+Размер компонента задается с помощью свойства `size`.
+Так же можно указать собственную ширину и высоту с помощью `width` и `height` соответственно.
+Или же задать `stretch` чтобы `Note` занял всю доступную ширину и высоту.
+```tsx live
+import React from 'react';
+import { Note } from '@salutejs/{{ package }}';
+export function App() {
+    return (
+        <div style=\{{ flexDirection: "column" }}>
+            <div style=\{{ display: "flex", gap: "1rem" }}>
+                <Note
+                    title="Title"
+                    text="Text"
+                    view="default"
+                    size="l"
+                />
+                <Note
+                    title="Title"
+                    text="Text"
+                    view="default"
+                    size="m"
+                />
+                <Note
+                    title="Title"
+                    text="Text"
+                    view="default"
+                    size="s"
+                />
+                <Note
+                    title="Title"
+                    text="Text"
+                    view="default"
+                    size="xs"
+                />
+            </div>
+            <Note
+                title="Title"
+                text="Text"
+                view="default"
+                size="l"
+                width="400"
+                height="116"
+            />
+            <div style=\{{ width: "300px", height: "300px" }}>
+                <Note
+                    title="Title"
+                    text="Text"
+                    view="default"
+                    size="l"
+                    stretch
+                />
+            </div>
+        </div>
+    );
+}
+```
+### Размерность и положение `contentBefore`
+Размерность и положение `contentBefore` задается с помощью свойства `contentBeforeSizing`:
+```tsx live
+import React from 'react';
+import { Note } from '@salutejs/{{ package }}';
+import { IconSaluteOutline } from '@salutejs/plasma-icons';
+export function App() {
+    return (
+        <div>
+            <Note
+                title="Title"
+                text="Text"
+                view="default"
+                size="s"
+                contentBefore={<IconSaluteOutline size="xs" color="inherit" />}
+                contentBeforeSizing="fixed"
+            />
+            <Note
+                title="Title"
+                text="Text"
+                view="positive"
+                size="s"
+                contentBefore={<IconSaluteOutline size="m" color="inherit" />}
+                contentBeforeSizing="scalable"
+            />
+        </div>
+    );
+}
+```

package/styled-components/cjs/components/Note/variations/_size/base.js CHANGED Viewed

@@ -8,4 +8,4 @@ var _styledComponents = /*#__PURE__*/require("styled-components");
 var _Note = /*#__PURE__*/require("../../Note.tokens");
 var _Note2 = /*#__PURE__*/require("../../Note.styles");
 var _mixins = /*#__PURE__*/require("../../../../mixins");
-var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["padding:var(", ");border-radius:var(", ");height:var(", ");width:var(", ");gap:var(", ");&.", "{width:100%;height:100%;}", "{width:var(", ");height:var(", ");padding:var(", ");box-sizing:border-box;}&.", "{align-items:center;padding:var(", ");gap:var(", ");", "{width:unset;height:unset;padding:unset;}}", "{width:var(", ");gap:var(", ");}", ",", "{width:100%;min-height:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");", "}", ",", "{font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");word-break:break-all;}"], _Note.tokens.padding, _Note.tokens.borderRadius, _Note.privateTokens.height, _Note.privateTokens.width, _Note.tokens.gap, _Note.classes.stretch, _Note2.ContentBefore, _Note.tokens.fixedContentBeforeWidth, _Note.tokens.fixedContentBeforeHeight, _Note.tokens.fixedContentBeforePadding, _Note.classes.contentAlignCenter, _Note.tokens.paddingScalable, _Note.tokens.gapScalable, _Note2.ContentBefore, _Note2.ContentWrapper, _Note.privateTokens.contentWidthWithOffset, _Note.tokens.contentGap, _Note2.Title, _Note2.TitleHelper, _Note.tokens.titleLineHeight, _Note.tokens.titleFontFamily, _Note.tokens.titleFontSize, _Note.tokens.titleFontStyle, _Note.tokens.titleFontWeight, _Note.tokens.titleLetterSpacing, _Note.tokens.titleLineHeight, /*#__PURE__*/(0, _mixins.applyEllipsis)(), _Note2.Text, _Note2.TextHelper, _Note.tokens.textFontFamily, _Note.tokens.textFontSize, _Note.tokens.textFontStyle, _Note.tokens.textFontWeight, _Note.tokens.textLetterSpacing, _Note.tokens.textLineHeight);
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["padding:var(", ");border-radius:var(", ");height:var(", ");width:var(", ");gap:var(", ");&.", "{width:100%;height:100%;}", "{width:var(", ");height:var(", ");padding:var(", ");box-sizing:border-box;}&.", "{align-items:center;padding:var(", ");gap:var(", ");", "{width:fit-content;height:fit-content;padding:unset;}}", "{width:var(", ");gap:var(", ");}", ",", "{width:100%;min-height:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");", "}", ",", "{font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");word-break:break-all;}"], _Note.tokens.padding, _Note.tokens.borderRadius, _Note.privateTokens.height, _Note.privateTokens.width, _Note.tokens.gap, _Note.classes.stretch, _Note2.ContentBefore, _Note.tokens.fixedContentBeforeWidth, _Note.tokens.fixedContentBeforeHeight, _Note.tokens.fixedContentBeforePadding, _Note.classes.contentAlignCenter, _Note.tokens.paddingScalable, _Note.tokens.gapScalable, _Note2.ContentBefore, _Note2.ContentWrapper, _Note.privateTokens.contentWidthWithOffset, _Note.tokens.contentGap, _Note2.Title, _Note2.TitleHelper, _Note.tokens.titleLineHeight, _Note.tokens.titleFontFamily, _Note.tokens.titleFontSize, _Note.tokens.titleFontStyle, _Note.tokens.titleFontWeight, _Note.tokens.titleLetterSpacing, _Note.tokens.titleLineHeight, /*#__PURE__*/(0, _mixins.applyEllipsis)(), _Note2.Text, _Note2.TextHelper, _Note.tokens.textFontFamily, _Note.tokens.textFontSize, _Note.tokens.textFontStyle, _Note.tokens.textFontWeight, _Note.tokens.textLetterSpacing, _Note.tokens.textLineHeight);

package/styled-components/es/components/Note/Note.js CHANGED Viewed

@@ -54,7 +54,7 @@ export var noteRoot = function noteRoot(Root) {
     var contentWidthWithOffsetToken = contentBefore ? "calc(100% - ".concat(contentBeforeWidth, " - var(").concat(contentGapToken, "))") : '100%';
     var setTruncatedText = function setTruncatedText() {
       var _titleHelperRef$curre;
-      if (!canUseDOM || !text || !(contentWrapperRef !== null && contentWrapperRef !== void 0 && contentWrapperRef.current) || !(textRenderHelperRef !== null && textRenderHelperRef !== void 0 && textRenderHelperRef.current)) {
+      if (!canUseDOM || !text || !(contentWrapperRef !== null && contentWrapperRef !== void 0 && contentWrapperRef.current) || !(textRenderHelperRef !== null && textRenderHelperRef !== void 0 && textRenderHelperRef.current) || !width && !height) {
         return;
       }
       var contentHeight = contentWrapperRef.current.offsetHeight;

package/styled-components/es/components/Note/Note.styles.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { css } from 'styled-components';
 export var base = /*#__PURE__*/css(["position:relative;display:flex;box-sizing:border-box;"]);
 export var ContentBefore = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-2xk8rv-0"
-})([""]);
+})(["display:flex;"]);
 export var ContentWrapper = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-2xk8rv-1"
 })(["display:flex;flex-direction:column;box-sizing:border-box;"]);

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

@@ -0,0 +1,159 @@
+---
+id: note
+title: Note
+---
+import { PropsTable, Description } from '@site/src/components';
+# Note
+Компонент для отображения текста в виде информационных, предупреждающих, обычных подсказок.
+<Description name="Note" />
+<PropsTable name="Note" />
+## Примеры
+### Вид компонента
+Вид компонента задается с помощью свойства `view`:
+```tsx live
+import React from 'react';
+import { Note } from '@salutejs/{{ package }}';
+import { IconSaluteOutline } from '@salutejs/plasma-icons';
+export function App() {
+    return (
+        <div>
+            <Note
+                title="Title"
+                text="Text"
+                view="default"
+                size="s"
+                contentBefore={<IconSaluteOutline size="xs" color="inherit" />}
+            />
+            <Note
+                title="Title"
+                text="Text"
+                view="positive"
+                size="s"
+                contentBefore={<IconSaluteOutline size="xs" color="inherit" />}
+            />
+            <Note
+                title="Title"
+                text="Text"
+                view="warning"
+                size="s"
+                contentBefore={<IconSaluteOutline size="xs" color="inherit" />}
+            />
+            <Note
+                title="Title"
+                text="Text"
+                view="negative"
+                size="s"
+                contentBefore={<IconSaluteOutline size="xs" color="inherit" />}
+            />
+            <Note
+                title="Title"
+                text="Text"
+                view="info"
+                size="s"
+                contentBefore={<IconSaluteOutline size="xs" color="inherit" />}
+            />
+        </div>
+    );
+}
+```
+### Размер компонента
+Размер компонента задается с помощью свойства `size`.
+Так же можно указать собственную ширину и высоту с помощью `width` и `height` соответственно.
+Или же задать `stretch` чтобы `Note` занял всю доступную ширину и высоту.
+```tsx live
+import React from 'react';
+import { Note } from '@salutejs/{{ package }}';
+export function App() {
+    return (
+        <div style=\{{ flexDirection: "column" }}>
+            <div style=\{{ display: "flex", gap: "1rem" }}>
+                <Note
+                    title="Title"
+                    text="Text"
+                    view="default"
+                    size="l"
+                />
+                <Note
+                    title="Title"
+                    text="Text"
+                    view="default"
+                    size="m"
+                />
+                <Note
+                    title="Title"
+                    text="Text"
+                    view="default"
+                    size="s"
+                />
+                <Note
+                    title="Title"
+                    text="Text"
+                    view="default"
+                    size="xs"
+                />
+            </div>
+            <Note
+                title="Title"
+                text="Text"
+                view="default"
+                size="l"
+                width="400"
+                height="116"
+            />
+            <div style=\{{ width: "300px", height: "300px" }}>
+                <Note
+                    title="Title"
+                    text="Text"
+                    view="default"
+                    size="l"
+                    stretch
+                />
+            </div>
+        </div>
+    );
+}
+```
+### Размерность и положение `contentBefore`
+Размерность и положение `contentBefore` задается с помощью свойства `contentBeforeSizing`:
+```tsx live
+import React from 'react';
+import { Note } from '@salutejs/{{ package }}';
+import { IconSaluteOutline } from '@salutejs/plasma-icons';
+export function App() {
+    return (
+        <div>
+            <Note
+                title="Title"
+                text="Text"
+                view="default"
+                size="s"
+                contentBefore={<IconSaluteOutline size="xs" color="inherit" />}
+                contentBeforeSizing="fixed"
+            />
+            <Note
+                title="Title"
+                text="Text"
+                view="positive"
+                size="s"
+                contentBefore={<IconSaluteOutline size="m" color="inherit" />}
+                contentBeforeSizing="scalable"
+            />
+        </div>
+    );
+}
+```

package/styled-components/es/components/Note/variations/_size/base.js CHANGED Viewed

@@ -2,4 +2,4 @@ import { css } from 'styled-components';
 import { classes, privateTokens, tokens } from '../../Note.tokens';
 import { ContentBefore, ContentWrapper, Text, TextHelper, Title, TitleHelper } from '../../Note.styles';
 import { applyEllipsis } from '../../../../mixins';
-export var base = /*#__PURE__*/css(["padding:var(", ");border-radius:var(", ");height:var(", ");width:var(", ");gap:var(", ");&.", "{width:100%;height:100%;}", "{width:var(", ");height:var(", ");padding:var(", ");box-sizing:border-box;}&.", "{align-items:center;padding:var(", ");gap:var(", ");", "{width:unset;height:unset;padding:unset;}}", "{width:var(", ");gap:var(", ");}", ",", "{width:100%;min-height:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");", "}", ",", "{font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");word-break:break-all;}"], tokens.padding, tokens.borderRadius, privateTokens.height, privateTokens.width, tokens.gap, classes.stretch, ContentBefore, tokens.fixedContentBeforeWidth, tokens.fixedContentBeforeHeight, tokens.fixedContentBeforePadding, classes.contentAlignCenter, tokens.paddingScalable, tokens.gapScalable, ContentBefore, ContentWrapper, privateTokens.contentWidthWithOffset, tokens.contentGap, Title, TitleHelper, tokens.titleLineHeight, tokens.titleFontFamily, tokens.titleFontSize, tokens.titleFontStyle, tokens.titleFontWeight, tokens.titleLetterSpacing, tokens.titleLineHeight, /*#__PURE__*/applyEllipsis(), Text, TextHelper, tokens.textFontFamily, tokens.textFontSize, tokens.textFontStyle, tokens.textFontWeight, tokens.textLetterSpacing, tokens.textLineHeight);
+export var base = /*#__PURE__*/css(["padding:var(", ");border-radius:var(", ");height:var(", ");width:var(", ");gap:var(", ");&.", "{width:100%;height:100%;}", "{width:var(", ");height:var(", ");padding:var(", ");box-sizing:border-box;}&.", "{align-items:center;padding:var(", ");gap:var(", ");", "{width:fit-content;height:fit-content;padding:unset;}}", "{width:var(", ");gap:var(", ");}", ",", "{width:100%;min-height:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");", "}", ",", "{font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");word-break:break-all;}"], tokens.padding, tokens.borderRadius, privateTokens.height, privateTokens.width, tokens.gap, classes.stretch, ContentBefore, tokens.fixedContentBeforeWidth, tokens.fixedContentBeforeHeight, tokens.fixedContentBeforePadding, classes.contentAlignCenter, tokens.paddingScalable, tokens.gapScalable, ContentBefore, ContentWrapper, privateTokens.contentWidthWithOffset, tokens.contentGap, Title, TitleHelper, tokens.titleLineHeight, tokens.titleFontFamily, tokens.titleFontSize, tokens.titleFontStyle, tokens.titleFontWeight, tokens.titleLetterSpacing, tokens.titleLineHeight, /*#__PURE__*/applyEllipsis(), Text, TextHelper, tokens.textFontFamily, tokens.textFontSize, tokens.textFontStyle, tokens.textFontWeight, tokens.textLetterSpacing, tokens.textLineHeight);

package/types/components/Note/Note.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Note.d.ts","sourceRoot":"","sources":["../../../src/components/Note/Note.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmE,MAAM,OAAO,CAAC;AAKxF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE/C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAM9C,eAAO,MAAM,QAAQ,SAAU,UAAU,cAAc,EAAE,SAAS,CAAC;;;;;;;;;;+~~EAkI9D~~,CAAC;AAEN,eAAO,MAAM,UAAU;;;~~mBApIQ~~,UAAU,cAAc,EAAE,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;~~CAqJlE~~,CAAC"}
1	+ {"version":3,"file":"Note.d.ts","sourceRoot":"","sources":["../../../src/components/Note/Note.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmE,MAAM,OAAO,CAAC;AAKxF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE/C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAM9C,eAAO,MAAM,QAAQ,SAAU,UAAU,cAAc,EAAE,SAAS,CAAC;;;;;;;;;;+EAwI9D,CAAC;AAEN,eAAO,MAAM,UAAU;;;mBA1IQ,UAAU,cAAc,EAAE,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;CA2JlE,CAAC"}

package/types/components/Note/Note.styles.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Note.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Note/Note.styles.ts"],"names":[],"mappings":";AAGA,eAAO,MAAM,IAAI,0CAIhB,CAAC;AAEF,eAAO,MAAM,aAAa,~~qKAAe~~,CAAC;~~AAE1C~~,eAAO,MAAM,cAAc,qKAI1B,CAAC;AAEF,eAAO,MAAM,KAAK,qKAAe,CAAC;AAClC,eAAO,MAAM,WAAW,qKAKvB,CAAC;AAEF,eAAO,MAAM,IAAI,uKAGhB,CAAC;AACF,eAAO,MAAM,UAAU,uKAOtB,CAAC"}
1	+ {"version":3,"file":"Note.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Note/Note.styles.ts"],"names":[],"mappings":";AAGA,eAAO,MAAM,IAAI,0CAIhB,CAAC;AAEF,eAAO,MAAM,aAAa,qKAEzB,CAAC;AAEF,eAAO,MAAM,cAAc,qKAI1B,CAAC;AAEF,eAAO,MAAM,KAAK,qKAAe,CAAC;AAClC,eAAO,MAAM,WAAW,qKAKvB,CAAC;AAEF,eAAO,MAAM,IAAI,uKAGhB,CAAC;AACF,eAAO,MAAM,UAAU,uKAOtB,CAAC"}

package/cjs/components/Note/variations/_size/base_9srgcd.css DELETED Viewed

@@ -1 +0,0 @@

- .bnp62xb{padding:var(--plasma-note-padding);border-radius:var(--plasma-note-border-radius);height:var(--plasma_private-note-height);width:var(--plasma_private-note-width);gap:var(--plasma-note-gap);}.bnp62xb.note-stretch{width:100%;height:100%;}.bnp62xb .c1i6bkpn{width:var(--plasma-note-fixed-content-before-width);height:var(--plasma-note-fixed-content-before-height);padding:var(--plasma-note-fixed-content-before-padding);box-sizing:border-box;}.bnp62xb.note-content-align-center{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:var(--plasma-note-padding-scalable);gap:var(--plasma-note-gap-scalable);}.bnp62xb.note-content-align-center .c1i6bkpn{width:unset;height:unset;padding:unset;}.bnp62xb .cendmch{width:var(--plasma_private-note-content-width-with-offset);gap:var(--plasma-note-content-gap);}.bnp62xb .t1wkjxug,.bnp62xb .te86upw{width:100%;min-height:var(--plasma-note-title-line-height);font-family:var(--plasma-note-title-font-family);font-size:var(--plasma-note-title-font-size);font-style:var(--plasma-note-title-font-style);font-weight:var(--plasma-note-title-font-weight);-webkit-letter-spacing:var(--plasma-note-title-letter-spacing);-moz-letter-spacing:var(--plasma-note-title-letter-spacing);-ms-letter-spacing:var(--plasma-note-title-letter-spacing);letter-spacing:var(--plasma-note-title-letter-spacing);line-height:var(--plasma-note-title-line-height);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.bnp62xb .t1kp0wa7,.bnp62xb .tf1lafs{font-family:var(--plasma-note-text-font-family);font-size:var(--plasma-note-text-font-size);font-style:var(--plasma-note-text-font-style);font-weight:var(--plasma-note-text-font-weight);-webkit-letter-spacing:var(--plasma-note-text-letter-spacing);-moz-letter-spacing:var(--plasma-note-text-letter-spacing);-ms-letter-spacing:var(--plasma-note-text-letter-spacing);letter-spacing:var(--plasma-note-text-letter-spacing);line-height:var(--plasma-note-text-line-height);word-break:break-all;}

package/es/components/Note/variations/_size/base_9srgcd.css DELETED Viewed

@@ -1 +0,0 @@