@salutejs/plasma-new-hope 0.109.0-canary.1310.10007111729.0 → 0.109.0-dev.0

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

@@ -3,7 +3,10 @@ id: calendar
 title: Calendar
 ---
 
-import { PropsTable, Description } from '@site/src/components';
+import { PropsTable, Description, StorybookLink } from '@site/src/components';
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
 
 # Calendar
 Компоненты календарей для выбора даты или диапазона дат.
@@ -15,194 +18,277 @@ import { PropsTable, Description } from '@site/src/components';
 
 Представляет собой универсальный компонент `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" />
+<Tabs>
+    <TabItem value="calendar" label="Calendar" default>
+        ```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(undefined);
+            const [valueRange, setValueRange] = React.useState([undefined]);
+
+            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>
+            );
+        }
+        ```
+    </TabItem>
+    <TabItem value="calendar_base" label="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>
+            );
+        }
+        ```
+    </TabItem>
+    <TabItem value="calendar_double" label="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>
+            );
+        }
+        ```
+    </TabItem>
+    <TabItem value="calendar_base_range" label="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>
+            );
+        }
+        ```
+    </TabItem>
+    <TabItem value="calendar_double_range" label="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>
+            );
+        }
+        ```
+    </TabItem>
+</Tabs>
+
+## Размер календаря.
+Размер календаря задается с помощью свойства `size`.
 
 ```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 [value, setValue] = React.useState(undefined);
     const handleOnChange = React.useCallback((newValue) => {
         setValue(newValue);
     }, []);
 
     return (
-        <div>
+        <div style=\{{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "2rem" }}>
             <CalendarBase
                 value={value}
-                min={min}
-                max={max}
                 onChangeValue={handleOnChange}
+                size="l"
             />
-        </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
+            <CalendarBase
                 value={value}
-                min={min}
-                max={max}
                 onChangeValue={handleOnChange}
+                size="m"
             />
-        </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
+            <CalendarBase
                 value={value}
-                min={min}
-                max={max}
                 onChangeValue={handleOnChange}
+                size="s"
+            />
+            <CalendarBase
+                value={value}
+                onChangeValue={handleOnChange}
+                size="xs"
             />
         </div>
     );
 }
 ```
 
-## CalendarDoubleRange
-<Description name="CalendarDoubleRange" />
-<PropsTable name="CalendarDoubleRange" />
+## Сетка выбора даты.
+Конечное отображение сетки календаря задается с помощью свойства `type`.
 
 ```tsx live
 import React from 'react';
-import { CalendarDoubleRange } from '@salutejs/{{ package }}';
+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), new Date(2022, 6, 16)]);
+    const [value, setValue] = React.useState(undefined);
     const handleOnChange = React.useCallback((newValue) => {
         setValue(newValue);
     }, []);
 
     return (
-        <div>
-            <CalendarDoubleRange
+        <div style=\{{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "2rem" }}>
+            <CalendarBase
+                value={value}
+                onChangeValue={handleOnChange}
+                type="Days"
+            />
+            <CalendarBase
+                value={value}
+                onChangeValue={handleOnChange}
+                type="Months"
+            />
+            <CalendarBase
                 value={value}
-                min={min}
-                max={max}
                 onChangeValue={handleOnChange}
+                type="Quarters"
+            />
+            <CalendarBase
+                value={value}
+                onChangeValue={handleOnChange}
+                type="Years"
             />
         </div>
     );
 }
-```
-
+```

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

@@ -3,15 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.tokens = exports.classes = void 0;
+exports.tokens = exports.innerTokens = exports.classes = void 0;
 var classes = exports.classes = {
   dayOfWeek: 'day-of-week',
-  dayDisabled: 'day-disabled',
-  dayDisabledCurrent: 'day-disabled-current',
-  daySideInRange: 'day-side-in-range',
-  dayInRange: 'day-in-range',
-  daySideLeft: 'day-side-left',
-  daySideRight: 'day-side-right',
+  dayInCurrentMonth: 'day-in-current-month',
+  disabled: 'item-disabled',
+  disabledCurrent: 'item-disabled-current',
+  sideInRange: 'item-side-in-range',
+  inRange: 'item-in-range',
+  sideLeft: 'item-side-left',
+  sideRight: 'item-side-right',
   selectableItem: 'item-selectable',
   selectedItem: 'item-selected',
   currentItem: 'item-current',
@@ -19,6 +20,18 @@ var classes = exports.classes = {
   doubleHeaderDate: 'double-header-date',
   doubleHeaderLastDateWrapper: 'double-header--last-date-wrapper'
 };
+var innerTokens = exports.innerTokens = {
+  dateStructureFontFamily: '--plasma-calendar-date-structure-font-family',
+  dateStructureFontSize: '--plasma-calendar-date-structure-font-size',
+  dateStructureFontStyle: '--plasma-calendar-date-structure-font-style',
+  dateStructureFontWeight: '--plasma-calendar-date-structure-font-weight',
+  dateStructureFontLetterSpacing: '--plasma-calendar-date-structure-font-letter-spacing',
+  dateStructureFontLineHeight: '--plasma-calendar-date-structure-line-height',
+  dateStructureSelectedFontWeight: '--plasma-calendar-date-structure-selected-font-weight',
+  dateStructureWidth: '--plasma-calendar-date-structure-width',
+  dateStructureHeight: '--plasma-calendar-date-structure-height',
+  dateStructureBorderRadius: '--plasma-calendar-date-structure-border-radius'
+};
 var tokens = exports.tokens = {
   calendarWidth: '--plasma-calendar-width',
   calendarHeight: '--plasma-calendar-height',
@@ -34,6 +47,18 @@ var tokens = exports.tokens = {
   calendarYearFontLineHeight: '--plasma-calendar-year-line-height',
   calendarYearFontWeight: '--plasma-calendar-year-font-weight',
   calendarYearSelectedFontWeight: '--plasma-calendar-year-selected-font-weight',
+  /* Токены размера сетки дней */
+  calendarQuartersPadding: '--plasma-calendar-quarters-padding',
+  calendarQuarterItemBorderRadius: '--plasma-calendar-quarter-item-border-radius',
+  calendarQuarterItemWidth: '--plasma-calendar-quarter-item-width',
+  calendarQuarterItemHeight: '--plasma-calendar-quarter-item-height',
+  calendarQuarterFontFamily: '--plasma-calendar-quarter-font-family',
+  calendarQuarterFontSize: '--plasma-calendar-quarter-font-size',
+  calendarQuarterFontStyle: '--plasma-calendar-quarter-font-style',
+  calendarQuarterFontLetterSpacing: '--plasma-calendar-quarter-font-letter-spacing',
+  calendarQuarterFontLineHeight: '--plasma-calendar-quarter-line-height',
+  calendarQuarterFontWeight: '--plasma-calendar-quarter-font-weight',
+  calendarQuarterSelectedFontWeight: '--plasma-calendar-quarter-selected-font-weight',
   /* Токены размера сетки месяцев */
   calendarMonthsPadding: '--plasma-calendar-months-padding',
   calendarMonthItemBorderRadius: '--plasma-calendar-month-item-border-radius',