@salutejs/plasma-new-hope 0.83.0-canary.1213.9176450261.0 → 0.84.0-canary.1194.9208145301.0

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

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

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

@@ -0,0 +1,33 @@
+---
+id: progress
+title: Progress
+---
+
+import { PropsTable, Description } from '@site/src/components';
+
+# Progress
+<Description name="Progress" />
+<PropsTable name="Progress" exclude={['css']} />
+
+##Примеры
+
+### Вид прогресса
+Вид прогресса задается с помощью свойства `view`. Возможные значения свойства `view`:
++ `"default"` – по умолчанию;
++ `"primary"` – основная;
++ `"secondary"` – вторичная;
++ `"accent"` – акцентная;
++ `"success"` – успешное завершение;
++ `"warning"` – предупреждение;
++ `"error"` – ошибка;
+
+```tsx live
+import React from 'react';
+import { Progress } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <Progress value={25} view="success" displayValue />
+    );
+}
+```

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

@@ -27,8 +27,9 @@ 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, { useState } from 'react';
-import { SegmentGroup, SegmentItem, SegmentProvider } from '@salutejs/{{ package }}';
+import React from 'react';
+import { SegmentGroup, SegmentItem, SegmentProvider, useSegment } 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() {
 ```
 
 ## Доступность
-При использование хока `withSkeleton` необходимо воспользоваться атрибутами WAI ARIA. Пример с кнопкой:
+При использовании hook `withSkeleton` необходимо воспользоваться атрибутами WAI ARIA. Пример с кнопкой:
 
 ```tsx
 import React, { useState } from 'react';
 import { Button } from '@salutejs/{{ package }}';
 
-const ButtonSkeleton = withSkeleton<ButtonProps & WithSkeletonProps>(BasicButton);
+const ButtonSkeleton = withSkeleton<ButtonProps & WithSkeletonProps>(Button);
 
 export default function App () {
     const [skeleton, setSkeleton] = useState(false);
@@ -100,4 +100,4 @@ export default function App () {
 }
 ```
 
-Таким образом, при `skeleton=true` и `aria-busy=true` скринридер будет оповещать о соответствующем статусе компонента.
+Таким образом, при `skeleton=true` и `aria-busy=true` screen-reader будет оповещать о соответствующем статусе компонента.

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 {};