@salutejs/plasma-new-hope 0.317.0-canary.1877.14213779024.0 → 0.317.0-canary.1886.14214080050.0

package/emotion/es/components/Typography/Typography.styles.js

@@ -1,4 +1,4 @@
 import { css } from '@emotion/react';
 import { applyHyphens, applyHyphensNormal } from '../../mixins';
 import { classes, tokens } from './tokens';
-export var base = /*#__PURE__*/css("font-family:var(", tokens.typoFontFamily, ");font-size:var(", tokens.typoFontSize, ");font-style:var(", tokens.typoFontStyle, ");letter-spacing:var(", tokens.typoFontLetterSpacing, ");line-height:var(", tokens.typoFontLineHeight, ");font-weight:var(", tokens.typoFontWeight, ");&.", classes.typoBold, "{font-weight:var(", tokens.typoFontWeightBold, ");}&.", classes.typoWithNoWrap, "{white-space:nowrap;}", applyHyphensNormal, ";&.", classes.typoWithBreakWord, "{", applyHyphens, ";};label:plasma-new-hope__base;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvVHlwb2dyYXBoeS9UeXBvZ3JhcGh5LnN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFNdUIiLCJmaWxlIjoiLi4vLi4vLi4vLi4vc3JjLWVtb3Rpb24vY29tcG9uZW50cy9UeXBvZ3JhcGh5L1R5cG9ncmFwaHkuc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG5pbXBvcnQgeyBhcHBseUh5cGhlbnMsIGFwcGx5SHlwaGVuc05vcm1hbCB9IGZyb20gJy4uLy4uL21peGlucyc7XG5cbmltcG9ydCB7IGNsYXNzZXMsIHRva2VucyB9IGZyb20gJy4vdG9rZW5zJztcblxuZXhwb3J0IGNvbnN0IGJhc2UgPSBjc3NgXG4gICAgZm9udC1mYW1pbHk6IHZhcigke3Rva2Vucy50eXBvRm9udEZhbWlseX0pO1xuICAgIGZvbnQtc2l6ZTogdmFyKCR7dG9rZW5zLnR5cG9Gb250U2l6ZX0pO1xuICAgIGZvbnQtc3R5bGU6IHZhcigke3Rva2Vucy50eXBvRm9udFN0eWxlfSk7XG4gICAgbGV0dGVyLXNwYWNpbmc6IHZhcigke3Rva2Vucy50eXBvRm9udExldHRlclNwYWNpbmd9KTtcbiAgICBsaW5lLWhlaWdodDogdmFyKCR7dG9rZW5zLnR5cG9Gb250TGluZUhlaWdodH0pO1xuICAgIGZvbnQtd2VpZ2h0OiB2YXIoJHt0b2tlbnMudHlwb0ZvbnRXZWlnaHR9KTtcblxuICAgICYuJHtjbGFzc2VzLnR5cG9Cb2xkfSB7XG4gICAgICAgIGZvbnQtd2VpZ2h0OiB2YXIoJHt0b2tlbnMudHlwb0ZvbnRXZWlnaHRCb2xkfSk7XG4gICAgfVxuXG4gICAgJi4ke2NsYXNzZXMudHlwb1dpdGhOb1dyYXB9IHtcbiAgICAgICAgd2hpdGUtc3BhY2U6IG5vd3JhcDtcbiAgICB9XG5cbiAgICAke2FwcGx5SHlwaGVuc05vcm1hbH07XG5cbiAgICAmLiR7Y2xhc3Nlcy50eXBvV2l0aEJyZWFrV29yZH0ge1xuICAgICAgICAke2FwcGx5SHlwaGVuc307XG4gICAgfVxuYDtcbiJdfQ== */"));
+export var base = /*#__PURE__*/css("font-family:var(", tokens.typoFontFamily, ");font-size:var(", tokens.typoFontSize, ");font-style:var(", tokens.typoFontStyle, ");letter-spacing:var(", tokens.typoFontLetterSpacing, ");line-height:var(", tokens.typoFontLineHeight, ");font-weight:var(", tokens.typoFontWeight, ");&.", classes.typoBold, "{font-weight:var(", tokens.typoFontWeightBold, ");}&.", classes.typoMedium, "{font-weight:var(", tokens.typoFontWeightMedium, ");}&.", classes.typoWithNoWrap, "{white-space:nowrap;}", applyHyphensNormal, ";&.", classes.typoWithBreakWord, "{", applyHyphens, ";};label:plasma-new-hope__base;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvVHlwb2dyYXBoeS9UeXBvZ3JhcGh5LnN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFNdUIiLCJmaWxlIjoiLi4vLi4vLi4vLi4vc3JjLWVtb3Rpb24vY29tcG9uZW50cy9UeXBvZ3JhcGh5L1R5cG9ncmFwaHkuc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG5pbXBvcnQgeyBhcHBseUh5cGhlbnMsIGFwcGx5SHlwaGVuc05vcm1hbCB9IGZyb20gJy4uLy4uL21peGlucyc7XG5cbmltcG9ydCB7IGNsYXNzZXMsIHRva2VucyB9IGZyb20gJy4vdG9rZW5zJztcblxuZXhwb3J0IGNvbnN0IGJhc2UgPSBjc3NgXG4gICAgZm9udC1mYW1pbHk6IHZhcigke3Rva2Vucy50eXBvRm9udEZhbWlseX0pO1xuICAgIGZvbnQtc2l6ZTogdmFyKCR7dG9rZW5zLnR5cG9Gb250U2l6ZX0pO1xuICAgIGZvbnQtc3R5bGU6IHZhcigke3Rva2Vucy50eXBvRm9udFN0eWxlfSk7XG4gICAgbGV0dGVyLXNwYWNpbmc6IHZhcigke3Rva2Vucy50eXBvRm9udExldHRlclNwYWNpbmd9KTtcbiAgICBsaW5lLWhlaWdodDogdmFyKCR7dG9rZW5zLnR5cG9Gb250TGluZUhlaWdodH0pO1xuICAgIGZvbnQtd2VpZ2h0OiB2YXIoJHt0b2tlbnMudHlwb0ZvbnRXZWlnaHR9KTtcblxuICAgICYuJHtjbGFzc2VzLnR5cG9Cb2xkfSB7XG4gICAgICAgIGZvbnQtd2VpZ2h0OiB2YXIoJHt0b2tlbnMudHlwb0ZvbnRXZWlnaHRCb2xkfSk7XG4gICAgfVxuXG4gICAgJi4ke2NsYXNzZXMudHlwb01lZGl1bX0ge1xuICAgICAgICBmb250LXdlaWdodDogdmFyKCR7dG9rZW5zLnR5cG9Gb250V2VpZ2h0TWVkaXVtfSk7XG4gICAgfVxuXG4gICAgJi4ke2NsYXNzZXMudHlwb1dpdGhOb1dyYXB9IHtcbiAgICAgICAgd2hpdGUtc3BhY2U6IG5vd3JhcDtcbiAgICB9XG5cbiAgICAke2FwcGx5SHlwaGVuc05vcm1hbH07XG5cbiAgICAmLiR7Y2xhc3Nlcy50eXBvV2l0aEJyZWFrV29yZH0ge1xuICAgICAgICAke2FwcGx5SHlwaGVuc307XG4gICAgfVxuYDtcbiJdfQ== */"));

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

@@ -23,6 +23,22 @@ title: Typography
 По умолчанию в типографике если текст превышает ширину элемента, то слова будут переноситься по пробелам.
 Чтобы запретить перенос по пробелам, необходимо установить свойство `noWrap` в значении `true`.
 
+## Смена тега
+Если при использовании компонентов необходимо сменить тег, то можно использовать свойство `as`:
+
+```tsx live
+import React from 'react';
+import { BodyM } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <BodyM as="h3">
+            BodyM
+        </BodyM>
+    );
+}
+```
+
 ## Состав
 
 ### Hero unit
@@ -36,12 +52,15 @@ export function App() {
         <div style=\{{ display: 'block' }}>
             <DsplL bold={false}>DsplL</DsplL>
             <DsplL>DsplL Bold</DsplL>
+            <DsplL medium>DsplL Medium</DsplL>
 
             <DsplM bold={false}>DsplM</DsplM>
             <DsplM>DsplM Bold</DsplM>
+            <DsplM medium>DsplM Medium</DsplM>
 
             <DsplS bold={false}>DsplS</DsplS>
             <DsplS>DsplS Bold</DsplS>
+            <DsplS medium>DsplS Medium</DsplS>
         </div>
     );
 }
@@ -58,18 +77,23 @@ export function App() {
         <div style=\{{ display: 'block' }}>
             <H1 bold={false}>H1</H1>
             <H1>H1 Bold</H1>
+            <H1 medium>H1 Medium</H1>
 
             <H2 bold={false}>H2</H2>
             <H2>H2 Bold</H2>
+            <H2 medium>H2 Medium</H2>
 
             <H3 bold={false}>H3</H3>
             <H3>H3 Bold</H3>
+            <H3 medium>H3 Medium</H3>
 
             <H4 bold={false}>H4</H4>
             <H4>H4 Bold</H4>
+            <H4 medium>H4 Medium</H4>
 
             <H5 bold={false}>H5</H5>
             <H5>H5 Bold</H5>
+            <H5 medium>H5 Medium</H5>
         </div>
     );
 }
@@ -86,19 +110,24 @@ export function App() {
     return (
         <div style=\{{ display: 'block' }}>
             <BodyL>BodyL</BodyL>
-            <BodyL bold>BodyL полужирный</BodyL>
+            <BodyL bold>BodyL Bold</BodyL>
+            <BodyL medium>BodyL Medium</BodyL>
 
             <BodyM>BodyM</BodyM>
-            <BodyM bold>BodyM полужирный</BodyM>
+            <BodyM bold>BodyM Bold</BodyM>
+            <BodyM medium>BodyM Medium</BodyM>
 
             <BodyS>BodyS</BodyS>
-            <BodyS bold>BodyS полужирный</BodyS>
+            <BodyS bold>BodyS Bold</BodyS>
+            <BodyS medium>BodyS Medium</BodyS>
 
             <BodyXS>BodyXS</BodyXS>
-            <BodyXS bold>BodyXS полужирный</BodyXS>
+            <BodyXS bold>BodyXS Bold</BodyXS>
+            <BodyXS medium>BodyXS Medium</BodyXS>
 
             <BodyXXS>BodyXXS</BodyXXS>
-            <BodyXXS bold>BodyXXS полужирный</BodyXXS>
+            <BodyXXS bold>BodyXXS Bold</BodyXXS>
+            <BodyXXS medium>BodyXXS Medium</BodyXXS>
         </div>
     );
 }
@@ -115,16 +144,20 @@ export function App() {
     return (
         <div style=\{{ display: 'block' }}>
             <TextL>TextL</TextL>
-            <TextL bold>TextL полужирный</TextL>
+            <TextL bold>TextL Bold</TextL>
+            <TextL medium>TextL Medium</TextL>
 
             <TextM>TextM</TextM>
-            <TextM bold>TextM полужирный</TextM>
+            <TextM bold>TextM Bold</TextM>
+            <TextM medium>TextM Medium</TextM>
 
             <TextS>TextS</TextS>
-            <TextS bold>TextS полужирный</TextS>
+            <TextS bold>TextS Bold</TextS>
+            <TextS medium>TextS Medium</TextS>
 
             <TextXS>TextXS</TextXS>
-            <TextXS bold>TextXS полужирный</TextXS>
+            <TextXS bold>TextXS Bold</TextXS>
+            <TextXS medium>TextXS Medium</TextXS>
         </div>
     );
 }

package/emotion/es/components/Typography/tokens.js

@@ -1,7 +1,8 @@
 export var classes = {
   typoWithNoWrap: 'with-no-wrap',
   typoWithBreakWord: 'with-break-word',
-  typoBold: 'typography-bold'
+  typoBold: 'typography-bold',
+  typoMedium: 'typography-medium'
 };
 export var tokens = {
   typoFontFamily: '--typo-font-family',
@@ -9,6 +10,7 @@ export var tokens = {
   typoFontStyle: '--typo-font-style',
   typoFontWeight: '--typo-font-weight',
   typoFontWeightBold: '--typo-font-weight-bold',
+  typoFontWeightMedium: '--typo-font-weight-medium',
   typoFontLetterSpacing: '--typo-font-letter-spacing',
   typoFontLineHeight: '--typo-font-line-height'
 };