@salutejs/plasma-new-hope 0.82.1-canary.1210.9126725322.0 → 0.83.0-canary.1194.9157747369.0

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

@@ -11,98 +11,46 @@ import { PropsTable, Description } from '@site/src/components';
 
 ## Использование
 
-Перед использованием убедитесь, что `PopupProvider` подключен.
-Компонент Modal во многом схож с Popup, добавляет при этом подложку(`overlay`), а также блокирует scroll и focus.
+### Провайдер контекста
+Поместите `ModalsProvider` в [корень приложения](../../#корень-приложения) или там, где будете применять модальные окна:
 
-```tsx live
-import React, { useState } from 'react';
-import { surfaceSolidSecondary } from '@salutejs/{{ vertical }}/tokens';
-import { SSRProvider, Button, Modal, PopupProvider } from '@salutejs/{{ package }}';
+```tsx title="index.ts"
+import ReactDOM from 'react-dom';
+import { ModalsProvider } from '@salutejs/{{ package }}';
 
-export function App() {
-    const [isOpenA, setIsOpenA] = useState(false);
-    const [isOpenB, setIsOpenB] = useState(false);
+import { App } from './App';
 
-    return (
-        <SSRProvider>
-            <PopupProvider>
-                <div style=\{{ height: "300px" }}>
-                    <div style=\{{ display: 'flex', flexDirection: 'column' }}>
-                        <Button text="Открыть A" onClick={() => setIsOpenA(true)} />
-                    </div>
-                    <Modal
-                        id="modalA"
-                        onClose={() => setIsOpenA(false)}
-                        isOpen={isOpenA}
-                        placement="center"
-                        offset={[0, 0]}
-                    >
-                        <div style=\{{ background: `${surfaceSolidSecondary}`, padding: "1rem" }}>
-                            <Button onClick={() => setIsOpenA(false)}>Close</Button>
-                            <Button text="Открыть B" onClick={() => setIsOpenB(true)} />
-                            Content
-                        </div>
-                        <Modal
-                            id="modalB"
-                            onClose={() => setIsOpenB(false)}
-                            isOpen={isOpenB}
-                            placement="right"
-                            offset={[0, 0]}
-                        >
-                            <div style=\{{ background: `${surfaceSolidSecondary}`, padding: "1rem" }}>
-                                <Button onClick={() => setIsOpenB(false)}>Close</Button>
-                                Content
-                            </div>
-                        </Modal>
-                    </Modal>
-                </div>
-            </PopupProvider>
-        </SSRProvider>
-    );
-}
+ReactDOM.render(
+    <ModalsProvider>
+        <App />
+    </ModalsProvider>,
+    document.getElementById('root')
+);
 ```
 
-## Подключение анимации
-Подключение анимации аналогично тому, как это происходит в `Popup` - через свойство `withAnimation`(управление через `popupClasses`, `modalClasses`).
-Для добавления анимации в оверлей необходимо использовать класс `.modal-overlay` через переменную `modalClasses.overlay` из пакета.
-
-Пример:
-
-```tsx
-import styled from 'styled-components';
-import { Modal } from '@salutejs/{{ package }}';
-
-const StyledModal = styled(Modal)`
-    && > .${popupClasses.root}, .${modalClasses.overlay} {
-        animation: fadeIn 1s forwards;
-    }
+### Вызов модального окна
+После подключения `ModalsProvider` поместите компонент `Modal` туда, где необходимо применить модальное окно:
 
-    &&.${popupClasses.endAnimation} .${popupClasses.root} {
-        animation: fadeOut 1s forwards;
-    }
-
-    &&.${popupClasses.endAnimation} .${modalClasses.overlay} {
-        animation: fadeOut 1s forwards;
-    }
-
-    @keyframes fadeIn {
-        from {
-            opacity: 0;
-        }
+```tsx live
+import React from 'react';
+import { Modal, Headline3, P1, Button } from '@salutejs/{{ package }}';
 
-        to {
-            opacity: 1;
-        }
-    }
+export function App() {
+    const [isOpen, setIsOpen] = React.useState(false);
 
-    @keyframes fadeOut {
-        from {
-            opacity: 1;
-        }
+    const close = React.useCallback(() => {
+      setIsOpen(false);
+    }, []);
 
-        to {
-            opacity: 0;
-        }
-    }
-`;
+    return (
+        <div>
+            <Button text="Открыть модальное окно" onClick={() => setIsOpen(!isOpen)} />
+            <Modal isOpen={isOpen} onClose={close}>
+                <Headline3 mb={10}>Модальное окно</Headline3>
+                <P1>Содержимое модального окна.</P1>
+                <Button text="Закрыть" onClick={close} />
+            </Modal>
+        </div>
+    );
+}
 ```

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

@@ -34,7 +34,8 @@ ReactDOM.render(
 ```
 
 ### Вызов уведомления
-После подключения `NotificationsProvider` станет возможен вызов функции `addNotification`,который приведет к отображению оповещения.
+После подключения `NotificationsProvider` станет возможен вызов функции `addNotification`,
+который приведет к отображению оповещения.
 Функция принимает значения свойств компонента `Notification`:
 
 ```tsx live

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

@@ -12,7 +12,7 @@ import { PropsTable, Description } from '@site/src/components';
 ```tsx live
 import React from 'react';
 import styled from "styled-components";
-import { surfaceSolidTertiary } from "@salutejs/{{ vertical }}/tokens";
+import { surfaceSolid03 } from "@salutejs/plasma-tokens/brands/{{ theme }}";
 import { Popover, Button } from '@salutejs/{{ package }}';
 
 export function App() {
@@ -26,7 +26,7 @@ export function App() {
             position: absolute;
             width: 0.5rem;
             height: 0.5rem;
-            background: ${surfaceSolidTertiary};
+            background: ${surfaceSolid03};
         }
 
         &::before {
@@ -37,7 +37,7 @@ export function App() {
     `;
 
     const StyledContent = styled.div`
-        background: ${surfaceSolidTertiary};
+        background: ${surfaceSolid03};
         padding: 1rem;
 
         display: flex;

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

@@ -1,79 +1,45 @@
 ---
-id: popup
-title: Popup
+id: popupBase
+title: PopupBase
 ---
 
 import { PropsTable, Description } from '@site/src/components';
 
-# Popup
-<Description name="Popup" />
-<PropsTable name="Popup" />
+# PopupBase
+<Description name="PopupBase" />
+<PropsTable name="PopupBase" />
 
 ### Провайдер контекста
 
-Поместите `PopupProvider` в [корень приложения](../../#корень-приложения) или там, где будете применять Popup:
+Поместите `PopupBaseProvider` в [корень приложения](../../#корень-приложения) или там, где будете применять PopupBase:
 
 ```tsx title="index.ts"
 import ReactDOM from 'react-dom';
-import { PopupProvider } from '@salutejs/sdds-serv';
+import { PopupBaseProvider } from '@salutejs/{{ package }}';
 
 import { App } from './App';
 
 ReactDOM.render(
-    <PopupProvider>
+    <PopupBaseProvider>
         <App />
-    </PopupProvider>,
+    </PopupBaseProvider>,
     document.getElementById('root')
 );
 ```
 
 ### Использование
 
-Popup можно использовать как и на всем окне, так и в отдельном фрейме - свойство `frame`.
-
+PopupBase можно использовать как и на всем окне, так и в отдельном фрейме - свойство `frame`.
 Также это свойство поддерживает передачу id элемента, в котором будет использоваться компонент.
-
 Само позиционирование можно указать с помощью свойства `placement`(center - по умолчанию; left, right, top, bottom и их комбинации),
-а также определить отступы от точки с помощью `offset`.
+ а также определить отступы от точки с помощью `offset`.
 
 ```tsx live
 import React, { useRef } from 'react';
-import styled from 'styled-components';
-import { surfaceSolidTertiary, surfaceSolidSecondary } from '@salutejs/{{ vertical }}/tokens';
-
-import { SSRProvider, Button, Popup, PopupProvider } from  '@salutejs/{{ package }}';
+import { surfaceSolid03, surfaceSolid02 } from '@salutejs/plasma-tokens/brands/{{ theme }}';
+import { SSRProvider, Button, PopupBase, PopupBaseProvider } from  '@salutejs/{{ package }}';
 
 export function App() {
-    const StyledButton = styled(Button)`
-        margin-top: 1rem;
-        width: 15rem;
-    `;
-
-    const StyledWrapper = styled.div`
-        height: 500px;
-    `;
-
-    const OtherContent = styled.div`
-        margin-top: 1rem;
-        width: 400px;
-        height: 500px;
-        background: ${surfaceSolidTertiary};
-        position: absolute;
-
-        display: flex;
-        align-items: flex-start;
-        justify-content: center;
-        padding: 1rem;
-
-        bottom: 0;
-        right: 0;
-    `;
-
-    const Content = styled.div`
-        background: ${surfaceSolidSecondary};
-        padding: 1rem;
-    `;
-
     const [isOpenA, setIsOpenA] = React.useState(false);
     const [isOpenB, setIsOpenB] = React.useState(false);
 
@@ -81,28 +47,59 @@ export function App() {
 
     return (
         <SSRProvider>
-            <PopupProvider>
-                <StyledWrapper>
+            <PopupBaseProvider>
+                <div style=\{{height: "500px"}}>
                     <div style=\{{ display: 'flex', flexDirection: 'column' }}>
-                        <StyledButton text="Открыть в document" onClick={() => setIsOpenB(true)} />
-                        <StyledButton text="Открыть во Frame" onClick={() => setIsOpenA(true)} />
+                        <Button 
+                            style=\{{
+                                marginTop: "1rem",
+                                width: "15rem"
+                            }} 
+                            text="Открыть в document" 
+                            onClick={() => setIsOpenB(true)} 
+                        />
+                        <Button 
+                            style=\{{
+                                marginTop: "1rem",
+                                width: "15rem"
+                            }} 
+                            text="Открыть во Frame" 
+                            onClick={() => setIsOpenA(true)} 
+                        />
                     </div>
-                    <Popup
+                    <PopupBase
                         id="popupA"
                         frame={ref}
                         isOpen={isOpenA}
                         placement="center"
                         offset={[0, 0]}
                     >
-                        <Content>
+                        <div style=\{{ background: surfaceSolid02, padding: "1rem" }}>
                             <Button onClick={() => setIsOpenA(false)}>Close</Button>
                             <>Content</>
-                        </Content>
-                    </Popup>
-                    <OtherContent ref={ref}>
+                        </div>
+                    </PopupBase>
+                    <div 
+                        ref={ref} 
+                        style=\{{
+                            marginTop: "1rem",
+                            width: "400px",
+                            height: "500px",
+                            background: surfaceSolid03,
+                            position: "absolute",
+
+                            display: "flex",
+                            alignItems: "flex-start",
+                            justifyContent: "center",
+                            padding: "1rem",
+
+                            bottom: 0,
+                            right: 0
+                        }}
+                    >
                         <>Frame</>
-                    </OtherContent>
-                    <Popup
+                    </div>
+                    <PopupBase
                         id="popupB"
                         frame="document"
                         isOpen={isOpenB}
@@ -113,9 +110,9 @@ export function App() {
                             <Button onClick={() => setIsOpenB(false)}>Close</Button>
                             <>Content</>
                         </Content>
-                    </Popup>
-                </StyledWrapper>
-            </PopupProvider>
+                    </PopupBase>
+                </div>
+            </PopupBaseProvider>
         </SSRProvider>
     );
 }
@@ -124,19 +121,19 @@ export function App() {
 ## Подключение анимации
 
 Для подключения анимации нужно добавить параметр `withAnimation`.
-Само управление происходит с помощью классов через переменные `endAnimation`, `endTransition` из объекта `PopupClasses` для `Popup`.
-Для добавления анимации необходимо использовать класс `.popup-root` через переменную `PopupClasses.root` из пакета.
+Само управление происходит с помощью классов через переменные `endAnimation`, `endTransition` из объекта `popupBaseClasses` для `PopupBase`.
+Для добавления анимации необходимо использовать класс `.popup-base-root` через переменную `popupBaseClasses.root` из пакета.
 
 Пример:
 
 ```tsx
-const StyledPopupTransition = styled(Popup)`
-    && > .${PopupClasses.root} {
+const StyledPopupTransition = styled(PopupBase)`
+    && > .${popupBaseClasses.root} {
         opacity: 1;
         transition: opacity 0.5s 0.1s;
     }
 
-    &&.${PopupClasses.endTransition} > .${PopupClasses.root} {
+    &&.${popupBaseClasses.endTransition} > .${popupBaseClasses.root} {
         opacity: 0;
         transition: opacity 0.5s 0.1s;
     }
@@ -146,12 +143,12 @@ const StyledPopupTransition = styled(Popup)`
 или
 
 ```tsx
-const StyledPopupAnimation = styled(Popup)`
-    && > .${PopupClasses.root} {
+const StyledPopupAnimation = styled(PopupBase)`
+    && > .${popupBaseClasses.root} {
         animation: fadeIn 1s forwards;
     }
 
-    &&.${PopupClasses.endAnimation} > .${PopupClasses.root} {
+    &&.${popupBaseClasses.endAnimation} > .${popupBaseClasses.root} {
         animation: fadeOut 1s forwards;
     }
 
@@ -185,7 +182,14 @@ const StyledPopupAnimation = styled(Popup)`
     return (
         <>
             <div>
-                <StyledButton text="Открыть" onClick={() => setIsOpen(true)} />
+                <Button 
+                    style=\{{
+                        marginTop: "1rem",
+                        width: "15rem"
+                    }} 
+                    text="Открыть" 
+                    onClick={() => setIsOpen(true)} 
+                />
             </div>
             <StyledPopupAnimation
                 id="popup-id"

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

@@ -27,9 +27,8 @@ export function App() {
 }
 ```
 
-## RadioGroup
+## Группа радиокнопок
 Компоненты `Radiobox` следует объединять в `RadioGroup`
-
 ```tsx live
 <RadioGroup aria-labelledby="radiogroup-title-id">
     <H3 id="radiogroup-title-id">Заголовок</H3>

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

@@ -25,8 +25,8 @@ import { PropsTable, Description } from '@site/src/components';
 Внутри данного провайдера есть доступ к хуку `useSegment`.
 
 ```tsx live
-import React from 'react';
-import { SegmentGroup, SegmentItem, SegmentProvider, useSegment } from '@salutejs/{{ package }}';
+import React, { useState } from 'react';
+import { SegmentGroup, SegmentItem, SegmentProvider } from '@salutejs/{{ package }}';
 
 export function App() {
     const items = Array(8).fill(0);

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

@@ -6,7 +6,7 @@ title: Skeleton
 import { PropsTable, Description } from '@site/src/components';
 
 # Skeleton
-Набор компонентов для создания скелетов загрузки (placeholders).
+Набор компонентов для создания скелетов загрузки (плейсхолдеров).
 
 ## LineSkeleton
 <Description name="LineSkeleton" />
@@ -77,13 +77,13 @@ export function App() {
 ```
 
 ## Доступность
-При использовании hook `withSkeleton` необходимо воспользоваться атрибутами WAI ARIA. Пример с кнопкой:
+При использование хока `withSkeleton` необходимо воспользоваться атрибутами WAI ARIA. Пример с кнопкой:
 
 ```tsx
 import React, { useState } from 'react';
 import { Button } from '@salutejs/{{ package }}';
 
-const ButtonSkeleton = withSkeleton<ButtonProps & WithSkeletonProps>(Button);
+const ButtonSkeleton = withSkeleton<ButtonProps & WithSkeletonProps>(BasicButton);
 
 export default function App () {
     const [skeleton, setSkeleton] = useState(false);
@@ -100,4 +100,4 @@ export default function App () {
 }
 ```
 
-Таким образом, при `skeleton=true` и `aria-busy=true` screen-reader будет оповещать о соответствующем статусе компонента.
+Таким образом, при `skeleton=true` и `aria-busy=true` скринридер будет оповещать о соответствующем статусе компонента.

package/styled-components/es/components/Slider/Slider.js

@@ -0,0 +1,38 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import React, { forwardRef } from 'react';
+import { base as viewCSS } from './variations/_view/base';
+import { base as sizeCSS } from './variations/_size/base';
+import { base as disabledCSS } from './variations/_disabled/base';
+import { SingleSlider, DoubleSlider } from './components';
+var isSingleValueProps = function isSingleValueProps(props) {
+  return typeof props.value === 'number';
+};
+export var sliderRoot = function sliderRoot(Root) {
+  return /*#__PURE__*/forwardRef(function (props, ref) {
+    return /*#__PURE__*/React.createElement(Root, _extends({
+      ref: ref
+    }, props), isSingleValueProps(props) && /*#__PURE__*/React.createElement(SingleSlider, props), !isSingleValueProps(props) && /*#__PURE__*/React.createElement(DoubleSlider, props));
+  });
+};
+export var sliderConfig = {
+  name: 'Slider',
+  tag: 'div',
+  layout: sliderRoot,
+  base: '',
+  variations: {
+    view: {
+      css: viewCSS
+    },
+    size: {
+      css: sizeCSS
+    },
+    disabled: {
+      css: disabledCSS,
+      attrs: true
+    }
+  },
+  defaults: {
+    view: 'default',
+    size: 'm'
+  }
+};

package/styled-components/es/components/Slider/Slider.tokens.js

@@ -0,0 +1,71 @@
+export var classes = {
+  labelPlacementOuter: 'slider-label-placement-outer',
+  labelPlacementInner: 'slider-label-placement-inner',
+  rangeValuesPlacementOuter: 'slider-range-values-placement-outer',
+  rangeValuesPlacementInner: 'slider-range-values-placement-inner',
+  maxRangeValue: 'slider-max-range-value',
+  hideMinValue: 'slider-hide-min-value',
+  hideMaxValue: 'slider-hide-max-value',
+  textFieldActive: 'slider-text-field-active',
+  firstTextField: 'slider-first-text-field',
+  secondTextField: 'slider-second-text-field',
+  activeRangeValue: 'slider-active-range-value'
+};
+export var tokens = {
+  height: '--plasma-slider-height',
+  labelWrapperGap: '--plasma-slider-label-wrapper-gap',
+  labelWrapperMarginBottom: '--plasma-slider-label-wrapper-margin-bottom',
+  labelWrapperMarginRight: '--plasma-slider-label-wrapper-margin-right',
+  labelColor: '--plasma-slider-label-color',
+  labelFontFamily: '--plasma-slider-label-font-family',
+  labelFontSize: '--plasma-slider-label-font-size',
+  labelFontStyle: '--plasma-slider-label-font-style',
+  labelFontWeight: '--plasma-slider-label-font-weight',
+  labelLetterSpacing: '--plasma-slider-label-letter-spacing',
+  labelLineHeight: '--plasma-slider-label-line-height',
+  rangeMinValueMargin: '--plasma-slider-range-min-value-margin',
+  rangeMaxValueMargin: '--plasma-slider-range-max-value-margin',
+  rangeValueBottomOffset: '--plasma-slider-range-value-bottom-offset',
+  rangeValueColor: '--plasma-slider-range-value-color',
+  rangeValueFontFamily: '--plasma-slider-range-value-font-family',
+  rangeValueFontSize: '--plasma-slider-range-value-font-size',
+  rangeValueFontStyle: '--plasma-slider-range-value-font-style',
+  rangeValueFontWeight: '--plasma-slider-range-value-font-weight',
+  rangeValueLetterSpacing: '--plasma-slider-range-value-letter-spacing',
+  rangeValueLineHeight: '--plasma-slider-range-value-line-height',
+  doubleWrapperGap: '--plasma-slider-double-wrapper-gap',
+  thumbSize: '--plasma-slider-thumb-size',
+  thumbBorder: '--plasma-slider-thumb-border',
+  thumbBorderColor: '--plasma-slider-thumb-border-color',
+  thumbBackgroundColor: '--plasma-slider-thumb-background-color',
+  thumbFocusBorderColor: '--plasma-slider-thumb-focus-border-color',
+  currentValueTopOffset: '--plasma-slider-current-value-top-offset',
+  currentValueFontFamily: '--plasma-slider-current-value-font-family',
+  currentValueFontSize: '--plasma-slider-current-value-font-size',
+  currentValueFontStyle: '--plasma-slider-current-value-font-style',
+  currentValueFontWeight: '--plasma-slider-current-value-font-weight',
+  currentValueLetterSpacing: '--plasma-slider-current-value-letter-spacing',
+  currentValueLineHeight: '--plasma-slider-current-value-line-height',
+  railBackgroundColor: '--plasma-slider-rail-background-color',
+  railHeight: '--plasma-slider-rail-height',
+  railBorderRadius: '--plasma-slider-rail-border-radius',
+  railIndent: '--plasma-slider-rail-indent',
+  fillColor: '--plasma-slider-fill-color',
+  textFieldWrapperGap: '--plasma-slider-text-field-wrapper-gap',
+  textFieldFontFamily: '--plasma-slider-text-field-font-family',
+  textFieldFontSize: '--plasma-slider-text-field-font-size',
+  textFieldFontStyle: '--plasma-slider-text-field-font-style',
+  textFieldFontWeight: '--plasma-slider-text-field-font-weight',
+  textFieldLetterSpacing: '--plasma-slider-text-field-letter-spacing',
+  textFieldLineHeight: '--plasma-slider-text-field-line-height',
+  textFieldHeight: '--plasma-slider-text-field-height',
+  textFieldPadding: '--plasma-slider-text-field-padding',
+  textFieldBorderRadius: '--plasma-slider-text-field-border-radius',
+  textFieldColor: '--plasma-slider-text-field-color',
+  textFieldActiveColor: '--plasma-slider-text-field-active-color',
+  textFieldBackgroundColor: '--plasma-slider-text-field-background-color',
+  textFieldCaretColor: '--plasma-slider-text-field-caret-color',
+  textFieldPlaceholderColor: '--plasma-slider-text-field-placeholder-color',
+  textFiledFocusColor: '--plasma-slider-text-field-focus-color',
+  disabledOpacity: '--plasma-slider-disabled-opacity'
+};

package/styled-components/es/components/Slider/Slider.types.js

@@ -0,0 +1 @@
+export {};