@salutejs/plasma-new-hope 0.67.0-canary.1148.8444175533.0 → 0.67.0-canary.1148.8449780048.0

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

@@ -0,0 +1,123 @@
+---
+id: buttonGroup
+title: ButtonGroup
+---
+
+import { PropsTable, Description } from '@site/src/components';
+
+# ButtonGroup
+<Description name="ButtonGroup" />
+<PropsTable name="ButtonGroup" exclude={['css']} />
+
+## Использование
+Компонент `ButtonGroup` - это обертка для Button. Принимает в себя группу кнопок.
+
+```tsx live
+import React from 'react';
+import { ButtonGroup, Button } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <ButtonGroup>
+            {Array(5)
+                .fill(true)
+                .map((_, i) => (
+                    <Button text={`Button ${i}`} />
+                ))}
+        </ButtonGroup>
+    );
+}
+```
+
+## Примеры
+
+### Размер и вид группы кнопок
+Размер и вид группы кнопок задается с помощью свойств `size` и `view` соответственно.
+С помощью свойства `isCommonButtonStyles` можно отключить переопределение стилей для всех кнопок внутри группы. 
+Тогда каждая кнопка будет иметь настраиваемый размер и вид. 
+
+```tsx live
+import React from 'react';
+import { ButtonGroup, Button } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <div>
+            <ButtonGroup size="s" view="secondary">
+                {Array(5)
+                    .fill(true)
+                    .map((_, i) => (
+                        <Button text={`Button ${i}`} />
+                    ))}
+            </ButtonGroup>
+            
+            <ButtonGroup isCommonButtonStyles={false}>
+                <Button size="m" text="Default" />
+                <Button size="s" text="Primary" view="primary" />
+                <Button size="xs" text="Success" view="success" />
+            </ButtonGroup>
+        </div>
+    );
+}
+```
+
+### Ориентация группы кнопок и отступы между кнопками
+
+Группа кнопок может располагаться вертикально или горизонтально и иметь три вида отступов:
+
+```tsx live
+import React from 'react';
+import { ButtonGroup, Button } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <div>
+            <ButtonGroup size="xs" orientation="vertical" gap="none">
+                {Array(5)
+                    .fill(true)
+                    .map((_, i) => (
+                        <Button text={`Button ${i}`} />
+                    ))}
+            </ButtonGroup>
+
+            <ButtonGroup size="xs" orientation="horizontal" gap="wide">
+                {Array(4)
+                    .fill(true)
+                    .map((_, i) => (
+                        <Button text={`Button ${i}`} />
+                    ))}
+            </ButtonGroup>
+        </div>
+    );
+}
+```
+
+### Границы кнопки
+Границы кнопки задаются с помощью свойства `shape`.
+
+```tsx live
+import React from 'react';
+import { ButtonGroup, Button } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <div>
+            <ButtonGroup size="xs" shape="segmented">
+                {Array(3)
+                    .fill(true)
+                    .map((_, i) => (
+                        <Button text={`Button ${i}`} />
+                    ))}
+            </ButtonGroup>
+
+            <ButtonGroup size="xs" shape="default">
+                {Array(3)
+                    .fill(true)
+                    .map((_, i) => (
+                        <Button text={`Button ${i}`} />
+                    ))}
+            </ButtonGroup>
+        </div>
+    );
+}
+```

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

@@ -0,0 +1,208 @@
+---
+id: calendar
+title: Calendar
+---
+
+import { PropsTable, Description } from '@site/src/components';
+
+# Calendar
+Компоненты календарей для выбора даты или диапазона дат.
+
+## Calendar
+
+<Description name="Calendar" />
+<PropsTable name="Calendar" />
+
+Представляет собой универсальный компонент `Calendar`, в котором можно настроить любое доступное представление: базовый, двойной, базовый с диапазоном, двойной с диапазоном.
+
+```tsx live
+import React from 'react';
+import { Calendar } from '@salutejs/{{ package }}';
+
+export function App() {
+    const isRange = false;
+    const isDouble = false;
+    const min = new Date(2022, 4, 0);
+    const max = new Date(2022, 6, 15);
+    const date = {
+        day: 6,
+        monthIndex: 5,
+        year: 2022,
+    }
+
+    const [value, setValue] = React.useState(new Date(2022, 5, 6));
+    const [valueRange, setValueRange] = React.useState([new Date(2022, 5, 6), new Date(2022, 5, 10)]);
+
+    const handleOnChange = React.useCallback((newValue) => {
+        setValue(newValue);
+    }, []);
+    const handleOnRangeChange = React.useCallback((newValue) => {
+        setValueRange(newValue);
+    }, []);
+
+    const baseEvents = [
+        {
+            date: new Date(2022, 5, 6),
+        },
+        {
+            date: new Date(2022, 5, 10),
+            color: 'red',
+        },
+        {
+            date: new Date(2022, 5, 10),
+            color: 'green',
+        },
+        {
+            date: new Date(2022, 5, 10),
+            color: 'blue',
+        },
+    ];
+
+    const eventsRange = Array.from(Array(10),((_, day) => ({
+        date: new Date(2022, 5, 15 + day),
+        color: 'purple',
+    })));
+
+    const disabledDays = Array.from(Array(5),((_, day) => ({
+        date: new Date(2022, 5, 11 + day),
+
+    })));
+
+    return (
+        <div>
+            <Calendar
+                isRange={isRange}
+                isDouble={isDouble}
+                value={(isRange ? valueRange : value)}
+                eventList={[...baseEvents, ...eventsRange]}
+                disabledList={disabledDays}
+                date={date}
+                min={min}
+                max={max}
+                onChangeValue={(isRange ? handleOnRangeChange : handleOnChange)}
+            />
+        </div>
+    );
+}
+```
+
+## CalendarBase
+<Description name="CalendarBase" />
+<PropsTable name="CalendarBase" />
+
+```tsx live
+import React from 'react';
+import { CalendarBase } from '@salutejs/{{ package }}';
+
+export function App() {
+    const min = new Date(2022, 4, 0);
+    const max = new Date(2022, 7, 15);
+
+    const [value, setValue] = React.useState(new Date(2022, 5, 6));
+    const handleOnChange = React.useCallback((newValue) => {
+        setValue(newValue);
+    }, []);
+
+    return (
+        <div>
+            <CalendarBase
+                value={value}
+                min={min}
+                max={max}
+                onChangeValue={handleOnChange}
+            />
+        </div>
+    );
+}
+```
+
+## CalendarDouble
+<Description name="CalendarDouble" />
+<PropsTable name="CalendarDouble" />
+
+```tsx live
+import React from 'react';
+import { CalendarDouble } from '@salutejs/{{ package }}';
+
+export function App() {
+    const min = new Date(2022, 4, 0);
+    const max = new Date(2022, 7, 15);
+
+    const [value, setValue] = React.useState(new Date(2022, 5, 6));
+    const handleOnChange = React.useCallback((newValue) => {
+        setValue(newValue);
+    }, []);
+
+    return (
+        <div>
+            <CalendarDouble
+                value={value}
+                min={min}
+                max={max}
+                onChangeValue={handleOnChange}
+            />
+        </div>
+    );
+}
+```
+
+## CalendarBaseRange
+<Description name="CalendarBaseRange" />
+<PropsTable name="CalendarBaseRange" />
+
+```tsx live
+import React from 'react';
+import { CalendarBaseRange } from '@salutejs/{{ package }}';
+
+export function App() {
+    const min = new Date(2022, 4, 0);
+    const max = new Date(2022, 7, 15);
+
+    const [value, setValue] = React.useState([new Date(2022, 5, 6), new Date(2022, 5, 16)]);
+    const handleOnChange = React.useCallback((newValue) => {
+        setValue(newValue);
+    }, []);
+
+    return (
+        <div>
+            <CalendarBaseRange
+                value={value}
+                min={min}
+                max={max}
+                onChangeValue={handleOnChange}
+            />
+        </div>
+    );
+}
+```
+
+## CalendarDoubleRange
+<Description name="CalendarDoubleRange" />
+<PropsTable name="CalendarDoubleRange" />
+
+```tsx live
+import React from 'react';
+import { CalendarDoubleRange } from '@salutejs/{{ package }}';
+
+export function App() {
+    const min = new Date(2022, 4, 0);
+    const max = new Date(2022, 7, 15);
+
+    const [value, setValue] = React.useState([new Date(2022, 5, 6), new Date(2022, 6, 16)]);
+    const handleOnChange = React.useCallback((newValue) => {
+        setValue(newValue);
+    }, []);
+
+    return (
+        <div>
+            <CalendarDoubleRange
+                value={value}
+                min={min}
+                max={max}
+                onChangeValue={handleOnChange}
+            />
+        </div>
+    );
+}
+```
+

package/styled-components/cjs/components/Cell/Cell.js

@@ -22,6 +22,8 @@ var cellRoot = exports.cellRoot = function cellRoot(Root) {
   return /*#__PURE__*/(0, _react.forwardRef)(function (props, outerRootRef) {
     var _props$size = props.size,
       size = _props$size === void 0 ? 'm' : _props$size,
+      _props$view = props.view,
+      view = _props$view === void 0 ? 'default' : _props$view,
       left = props.contentLeft,
       right = props.contentRight,
       _props$alignLeft = props.alignLeft,
@@ -38,6 +40,7 @@ var cellRoot = exports.cellRoot = function cellRoot(Root) {
     return /*#__PURE__*/_react["default"].createElement(Root, {
       ref: outerRootRef,
       size: size,
+      view: view,
       className: (0, _utils.cx)(stretchingClass)
     }, /*#__PURE__*/_react["default"].createElement(_Cell.CellRoot, {
       className: _Cell2.classes.cellRoot

package/styled-components/cjs/components/Cell/Cell.tokens.js

@@ -7,9 +7,9 @@ exports.tokens = exports.classes = void 0;
 var tokens = exports.tokens = {
   cellColor: '--plasma-cell-color',
   cellBackgroundColor: '--plasma-cell-background-color',
-  cellPadding: '--plasma-cell-padding',
+  cellPadding: '--plasma-cell-content-padding',
   cellPaddingLeftContent: '--plasma-cell-left-padding',
-  cellPaddingContent: '--plasma-cell-padding',
+  cellPaddingContent: '--plasma-cell-content-padding',
   cellPaddingRightContent: '--plasma-cell-right-padding',
   cellTextboxGap: '--plasma-cell-textbox-gap',
   cellGap: '--plasma-cell-gap',
@@ -37,7 +37,6 @@ var tokens = exports.tokens = {
   cellSubtitleLineHeight: '--plasma-cell-subtitle-line-height'
 };
 var classes = exports.classes = {
-  cellStretch: 'cell-stretch',
   autoStretching: 'cell-stretching-auto',
   filledStretching: 'cell-stretching-filled',
   fixedStretching: 'cell-stretching-fixed',

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

@@ -0,0 +1,44 @@
+---
+id: checkbox
+title: Checkbox
+---
+
+import { PropsTable, Description } from '@site/src/components';
+
+# Checkbox
+<Description name="Checkbox" />
+<PropsTable name="Checkbox" exclude={['css', 'focused']} />
+
+## Использование
+Компонент `Checkbox` может содержать лейбл и описание.
+
+```tsx live
+import React from 'react';
+import { Checkbox } from '@salutejs/s{{package}}';
+
+export function App() {
+    return (
+        <Checkbox label="Чекбокс" description="Описание" defaultChecked />
+    );
+}
+```
+
+Свойства `description` и `label` могут принимать JSX элементы.
+
+По умолчанию, контент внутри лейбла и описания многострочный.
+
+Для того чтобы стал однострочным, необходимо использовать свойство `singleLine`(по умолчанию `false`).
+
+```tsx live
+import React from 'react';
+import { Checkbox } from '@salutejs/s{{package}}';
+
+export function App() {
+    return (
+        <Checkbox
+            label={<div>Чекбокс со <a href="/#">ссылкой</a></div>}
+            description={<div>Описание чекбокса со <a href="/#">ссылкой</a></div>}
+        />
+    );
+}
+```

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

@@ -0,0 +1,90 @@
+---
+id: chip
+title: Chip
+---
+
+import { PropsTable, Description } from '@site/src/components';
+
+# Chip
+Chips могут отображаться в нескольких размерах и цветах, могут содержать текст и/или иконку.
+
+## Chip
+<Description name="Chip" />
+<PropsTable name="Chip" exclude={['css', 'focused']} />
+
+## Использование
+Компонент `Chip` может содержать текст, который указывается в
+свойстве `text`, или любой контент напрямую через `children`.
+
+Свойство `text` можно использовать вместе со свойствами `contentLeft` и `contentRight`.
+С их помощью можно размещать **иконку** слева или справа от текста.
+
+Так же есть свойство `contentClearButton`, которое позволяет прокинуть custom **иконку**.
+
+```tsx live
+import React from 'react';
+import { Chip } from '@salutejs/{{ package }}';
+import { IconDownload } from '@salutejs/plasma-icons';
+
+export function App() {
+    return (
+        <div>
+            <Chip text="Текст" />
+
+            <Chip text="Текст" contentLeft={<IconDownload color="inherit" />} />
+
+            <Chip contentLeft={<IconDownload color="inherit" />} />
+
+            <Chip text="Текст" />
+
+            <Chip text="Текст" contentLeft={<IconDownload color="inherit" />} />
+
+            <Chip>
+                Текст
+            </Chip>
+        </div>
+    );
+}
+```
+
+## Примеры
+
+### Размер Chip
+Размер Chip задается с помощью свойства `size`. Возможные значения свойства: `"l"`, `"m"`, `"s"` или `"xs"`:
+
+```tsx live
+import React from 'react';
+import { Chip } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <div>
+            <Chip text="Chip" size="l" />
+            <Chip text="Chip" size="m" />
+            <Chip text="Chip" size="s" />
+            <Chip text="Chip" size="xs" />
+        </div>
+    );
+}
+```
+
+### Вид Chip
+Вид Chip задается с помощью свойства `view`. Возможные значения свойства `view`:
++ `"default"` – основная;
++ `"secondary"` – вторичная;
++ `"positive"` – успешное завершение;
+
+```tsx live
+import React from 'react';
+import { Chip } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <div>
+            <Chip text="Chip" size="m" view="default" />
+            <Chip text="Chip" size="m" view="secondary" />
+            <Chip text="Chip" size="m" view="positive" />
+        </div>
+    );
+}
+```