@arbor-education/design-system.components 0.15.0 → 0.16.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.gather/skills/write-stories/SKILL.md +207 -271
- package/.storybook/preview.ts +5 -0
- package/CHANGELOG.md +17 -0
- package/README.md +8 -0
- package/component-library.md +144 -13
- package/dist/components/articleCard/ArticleCard.stories.d.ts +137 -11
- package/dist/components/articleCard/ArticleCard.stories.d.ts.map +1 -1
- package/dist/components/articleCard/ArticleCard.stories.js +358 -91
- package/dist/components/articleCard/ArticleCard.stories.js.map +1 -1
- package/dist/components/avatar/Avatar.stories.d.ts +6 -6
- package/dist/components/avatar/Avatar.stories.d.ts.map +1 -1
- package/dist/components/avatar/Avatar.stories.js +393 -49
- package/dist/components/avatar/Avatar.stories.js.map +1 -1
- package/dist/components/avatarGroup/AvatarGroup.stories.d.ts +9 -7
- package/dist/components/avatarGroup/AvatarGroup.stories.d.ts.map +1 -1
- package/dist/components/avatarGroup/AvatarGroup.stories.js +688 -65
- package/dist/components/avatarGroup/AvatarGroup.stories.js.map +1 -1
- package/dist/components/banner/Banner.stories.d.ts.map +1 -1
- package/dist/components/banner/Banner.stories.js +7 -3
- package/dist/components/banner/Banner.stories.js.map +1 -1
- package/dist/components/card/Card.stories.d.ts +105 -4
- package/dist/components/card/Card.stories.d.ts.map +1 -1
- package/dist/components/card/Card.stories.js +336 -18
- package/dist/components/card/Card.stories.js.map +1 -1
- package/dist/components/combobox/Combobox.stories.d.ts +134 -21
- package/dist/components/combobox/Combobox.stories.d.ts.map +1 -1
- package/dist/components/combobox/Combobox.stories.js +676 -175
- package/dist/components/combobox/Combobox.stories.js.map +1 -1
- package/dist/components/datePicker/DatePicker.stories.d.ts +119 -27
- package/dist/components/datePicker/DatePicker.stories.d.ts.map +1 -1
- package/dist/components/datePicker/DatePicker.stories.js +575 -47
- package/dist/components/datePicker/DatePicker.stories.js.map +1 -1
- package/dist/components/dateTimePicker/DateTimePicker.stories.d.ts +155 -39
- package/dist/components/dateTimePicker/DateTimePicker.stories.d.ts.map +1 -1
- package/dist/components/dateTimePicker/DateTimePicker.stories.js +674 -103
- package/dist/components/dateTimePicker/DateTimePicker.stories.js.map +1 -1
- package/dist/components/editableText/EditableText.stories.d.ts +53 -12
- package/dist/components/editableText/EditableText.stories.d.ts.map +1 -1
- package/dist/components/editableText/EditableText.stories.js +401 -64
- package/dist/components/editableText/EditableText.stories.js.map +1 -1
- package/dist/components/formField/FormField.d.ts +4 -0
- package/dist/components/formField/FormField.d.ts.map +1 -1
- package/dist/components/formField/FormField.js +2 -1
- package/dist/components/formField/FormField.js.map +1 -1
- package/dist/components/formField/FormField.test.js +5 -0
- package/dist/components/formField/FormField.test.js.map +1 -1
- package/dist/components/formField/fieldset/Fieldset.stories.d.ts +56 -4
- package/dist/components/formField/fieldset/Fieldset.stories.d.ts.map +1 -1
- package/dist/components/formField/fieldset/Fieldset.stories.js +534 -28
- package/dist/components/formField/fieldset/Fieldset.stories.js.map +1 -1
- package/dist/components/formField/inputs/checkbox/CheckboxGroup.d.ts +3 -1
- package/dist/components/formField/inputs/checkbox/CheckboxGroup.d.ts.map +1 -1
- package/dist/components/formField/inputs/checkbox/CheckboxInput.js +1 -1
- package/dist/components/formField/inputs/checkbox/CheckboxInput.js.map +1 -1
- package/dist/components/formField/inputs/colourPickerDropdown/ColourPickerDropdown.stories.d.ts +95 -1
- package/dist/components/formField/inputs/colourPickerDropdown/ColourPickerDropdown.stories.d.ts.map +1 -1
- package/dist/components/formField/inputs/colourPickerDropdown/ColourPickerDropdown.stories.js +386 -9
- package/dist/components/formField/inputs/colourPickerDropdown/ColourPickerDropdown.stories.js.map +1 -1
- package/dist/components/formField/inputs/radio/RadioButtonGroup.d.ts +6 -2
- package/dist/components/formField/inputs/radio/RadioButtonGroup.d.ts.map +1 -1
- package/dist/components/formField/inputs/radio/RadioButtonGroup.js.map +1 -1
- package/dist/components/formField/inputs/radio/RadioButtonInput.stories.d.ts.map +1 -1
- package/dist/components/formField/inputs/radio/RadioButtonInput.stories.js +61 -49
- package/dist/components/formField/inputs/radio/RadioButtonInput.stories.js.map +1 -1
- package/dist/components/formField/inputs/selectDropdown/SelectDropdown.stories.d.ts +188 -166
- package/dist/components/formField/inputs/selectDropdown/SelectDropdown.stories.d.ts.map +1 -1
- package/dist/components/formField/inputs/selectDropdown/SelectDropdown.stories.js +821 -160
- package/dist/components/formField/inputs/selectDropdown/SelectDropdown.stories.js.map +1 -1
- package/dist/components/formField/inputs/time/TimeInput.stories.d.ts +176 -22
- package/dist/components/formField/inputs/time/TimeInput.stories.d.ts.map +1 -1
- package/dist/components/formField/inputs/time/TimeInput.stories.js +851 -92
- package/dist/components/formField/inputs/time/TimeInput.stories.js.map +1 -1
- package/dist/components/formField/label/Label.stories.d.ts +54 -5
- package/dist/components/formField/label/Label.stories.d.ts.map +1 -1
- package/dist/components/formField/label/Label.stories.js +238 -4
- package/dist/components/formField/label/Label.stories.js.map +1 -1
- package/dist/components/icoText/IcoText.stories.d.ts +32 -6
- package/dist/components/icoText/IcoText.stories.d.ts.map +1 -1
- package/dist/components/icoText/IcoText.stories.js +309 -14
- package/dist/components/icoText/IcoText.stories.js.map +1 -1
- package/dist/components/kpiCard/KPICard.stories.d.ts +100 -2
- package/dist/components/kpiCard/KPICard.stories.d.ts.map +1 -1
- package/dist/components/kpiCard/KPICard.stories.js +354 -10
- package/dist/components/kpiCard/KPICard.stories.js.map +1 -1
- package/dist/components/kvpList/KVPList.stories.d.ts +57 -4
- package/dist/components/kvpList/KVPList.stories.d.ts.map +1 -1
- package/dist/components/kvpList/KVPList.stories.js +403 -10
- package/dist/components/kvpList/KVPList.stories.js.map +1 -1
- package/dist/components/modal/Modal.stories.d.ts +113 -9
- package/dist/components/modal/Modal.stories.d.ts.map +1 -1
- package/dist/components/modal/Modal.stories.js +633 -13
- package/dist/components/modal/Modal.stories.js.map +1 -1
- package/dist/components/modal/modalManager/ModalManager.stories.d.ts +34 -10
- package/dist/components/modal/modalManager/ModalManager.stories.d.ts.map +1 -1
- package/dist/components/modal/modalManager/ModalManager.stories.js +463 -85
- package/dist/components/modal/modalManager/ModalManager.stories.js.map +1 -1
- package/dist/components/pill/Pill.d.ts.map +1 -1
- package/dist/components/pill/Pill.js +1 -1
- package/dist/components/pill/Pill.js.map +1 -1
- package/dist/components/pill/Pill.stories.d.ts.map +1 -1
- package/dist/components/pill/Pill.stories.js +11 -13
- package/dist/components/pill/Pill.stories.js.map +1 -1
- package/dist/components/row/Row.stories.d.ts +1 -2
- package/dist/components/row/Row.stories.d.ts.map +1 -1
- package/dist/components/row/Row.stories.js +360 -50
- package/dist/components/row/Row.stories.js.map +1 -1
- package/dist/components/searchBar/SearchBar.stories.d.ts +52 -4
- package/dist/components/searchBar/SearchBar.stories.d.ts.map +1 -1
- package/dist/components/searchBar/SearchBar.stories.js +428 -36
- package/dist/components/searchBar/SearchBar.stories.js.map +1 -1
- package/dist/components/section/Section.stories.d.ts +11 -41
- package/dist/components/section/Section.stories.d.ts.map +1 -1
- package/dist/components/section/Section.stories.js +494 -56
- package/dist/components/section/Section.stories.js.map +1 -1
- package/dist/components/singleUser/SingleUser.stories.d.ts +5 -4
- package/dist/components/singleUser/SingleUser.stories.d.ts.map +1 -1
- package/dist/components/singleUser/SingleUser.stories.js +303 -31
- package/dist/components/singleUser/SingleUser.stories.js.map +1 -1
- package/dist/components/slideoverManager/SlideoverManager.stories.d.ts +32 -11
- package/dist/components/slideoverManager/SlideoverManager.stories.d.ts.map +1 -1
- package/dist/components/slideoverManager/SlideoverManager.stories.js +380 -84
- package/dist/components/slideoverManager/SlideoverManager.stories.js.map +1 -1
- package/dist/components/table/DSDefaultColDef.d.ts.map +1 -1
- package/dist/components/table/DSDefaultColDef.js +4 -3
- package/dist/components/table/DSDefaultColDef.js.map +1 -1
- package/dist/components/table/Table.d.ts +6 -1
- package/dist/components/table/Table.d.ts.map +1 -1
- package/dist/components/table/Table.js +8 -3
- package/dist/components/table/Table.js.map +1 -1
- package/dist/components/table/Table.stories.d.ts +2 -0
- package/dist/components/table/Table.stories.d.ts.map +1 -1
- package/dist/components/table/Table.stories.js +357 -3
- package/dist/components/table/Table.stories.js.map +1 -1
- package/dist/components/table/TableFooter.stories.d.ts +49 -0
- package/dist/components/table/TableFooter.stories.d.ts.map +1 -0
- package/dist/components/table/TableFooter.stories.js +137 -0
- package/dist/components/table/TableFooter.stories.js.map +1 -0
- package/dist/components/table/TableHeader.stories.d.ts +93 -0
- package/dist/components/table/TableHeader.stories.d.ts.map +1 -0
- package/dist/components/table/TableHeader.stories.js +176 -0
- package/dist/components/table/TableHeader.stories.js.map +1 -0
- package/dist/components/table/cellEditors/DateCellEditor.stories.d.ts +44 -0
- package/dist/components/table/cellEditors/DateCellEditor.stories.d.ts.map +1 -0
- package/dist/components/table/cellEditors/DateCellEditor.stories.js +186 -0
- package/dist/components/table/cellEditors/DateCellEditor.stories.js.map +1 -0
- package/dist/components/table/cellRenderers/BooleanCellRenderer.stories.d.ts +40 -0
- package/dist/components/table/cellRenderers/BooleanCellRenderer.stories.d.ts.map +1 -0
- package/dist/components/table/cellRenderers/BooleanCellRenderer.stories.js +209 -0
- package/dist/components/table/cellRenderers/BooleanCellRenderer.stories.js.map +1 -0
- package/dist/components/table/cellRenderers/ButtonCellRenderer.stories.d.ts +48 -0
- package/dist/components/table/cellRenderers/ButtonCellRenderer.stories.d.ts.map +1 -0
- package/dist/components/table/cellRenderers/ButtonCellRenderer.stories.js +244 -0
- package/dist/components/table/cellRenderers/ButtonCellRenderer.stories.js.map +1 -0
- package/dist/components/table/cellRenderers/CheckboxCellRenderer.d.ts.map +1 -1
- package/dist/components/table/cellRenderers/CheckboxCellRenderer.js +3 -1
- package/dist/components/table/cellRenderers/CheckboxCellRenderer.js.map +1 -1
- package/dist/components/table/cellRenderers/CheckboxCellRenderer.stories.d.ts +64 -0
- package/dist/components/table/cellRenderers/CheckboxCellRenderer.stories.d.ts.map +1 -0
- package/dist/components/table/cellRenderers/CheckboxCellRenderer.stories.js +241 -0
- package/dist/components/table/cellRenderers/CheckboxCellRenderer.stories.js.map +1 -0
- package/dist/components/table/cellRenderers/DefaultCellRenderer.stories.d.ts +55 -0
- package/dist/components/table/cellRenderers/DefaultCellRenderer.stories.d.ts.map +1 -0
- package/dist/components/table/cellRenderers/DefaultCellRenderer.stories.js +245 -0
- package/dist/components/table/cellRenderers/DefaultCellRenderer.stories.js.map +1 -0
- package/dist/components/table/cellRenderers/InlineTextCellRenderer.stories.d.ts +67 -0
- package/dist/components/table/cellRenderers/InlineTextCellRenderer.stories.d.ts.map +1 -0
- package/dist/components/table/cellRenderers/InlineTextCellRenderer.stories.js +221 -0
- package/dist/components/table/cellRenderers/InlineTextCellRenderer.stories.js.map +1 -0
- package/dist/components/table/cellRenderers/SelectDropdownCellRenderer.stories.d.ts +75 -0
- package/dist/components/table/cellRenderers/SelectDropdownCellRenderer.stories.d.ts.map +1 -0
- package/dist/components/table/cellRenderers/SelectDropdownCellRenderer.stories.js +270 -0
- package/dist/components/table/cellRenderers/SelectDropdownCellRenderer.stories.js.map +1 -0
- package/dist/components/table/columnFilters/BooleanFilter.stories.d.ts +57 -0
- package/dist/components/table/columnFilters/BooleanFilter.stories.d.ts.map +1 -0
- package/dist/components/table/columnFilters/BooleanFilter.stories.js +198 -0
- package/dist/components/table/columnFilters/BooleanFilter.stories.js.map +1 -0
- package/dist/components/table/columnFilters/TimeFilter.stories.d.ts +58 -0
- package/dist/components/table/columnFilters/TimeFilter.stories.d.ts.map +1 -0
- package/dist/components/table/columnFilters/TimeFilter.stories.js +207 -0
- package/dist/components/table/columnFilters/TimeFilter.stories.js.map +1 -0
- package/dist/components/table/pagination/PaginationPanel.stories.d.ts +113 -0
- package/dist/components/table/pagination/PaginationPanel.stories.d.ts.map +1 -0
- package/dist/components/table/pagination/PaginationPanel.stories.js +272 -0
- package/dist/components/table/pagination/PaginationPanel.stories.js.map +1 -0
- package/dist/components/table/tableControls/TableControls.stories.d.ts +151 -0
- package/dist/components/table/tableControls/TableControls.stories.d.ts.map +1 -0
- package/dist/components/table/tableControls/TableControls.stories.js +356 -0
- package/dist/components/table/tableControls/TableControls.stories.js.map +1 -0
- package/dist/components/table/tableControls/TableSettingsDropdown.d.ts +27 -1
- package/dist/components/table/tableControls/TableSettingsDropdown.d.ts.map +1 -1
- package/dist/components/table/tableControls/TableSettingsDropdown.js +53 -26
- package/dist/components/table/tableControls/TableSettingsDropdown.js.map +1 -1
- package/dist/components/table/tableControls/TableSettingsDropdown.test.d.ts +2 -0
- package/dist/components/table/tableControls/TableSettingsDropdown.test.d.ts.map +1 -0
- package/dist/components/table/tableControls/TableSettingsDropdown.test.js +178 -0
- package/dist/components/table/tableControls/TableSettingsDropdown.test.js.map +1 -0
- package/dist/components/tabs/Tabs.stories.d.ts +22 -4
- package/dist/components/tabs/Tabs.stories.d.ts.map +1 -1
- package/dist/components/tabs/Tabs.stories.js +398 -22
- package/dist/components/tabs/Tabs.stories.js.map +1 -1
- package/dist/components/tabs/TabsItem.stories.d.ts +54 -1
- package/dist/components/tabs/TabsItem.stories.d.ts.map +1 -1
- package/dist/components/tabs/TabsItem.stories.js +61 -9
- package/dist/components/tabs/TabsItem.stories.js.map +1 -1
- package/dist/components/toast/Toast.stories.d.ts +103 -10
- package/dist/components/toast/Toast.stories.d.ts.map +1 -1
- package/dist/components/toast/Toast.stories.js +409 -47
- package/dist/components/toast/Toast.stories.js.map +1 -1
- package/dist/components/toggle/Toggle.stories.d.ts +61 -46
- package/dist/components/toggle/Toggle.stories.d.ts.map +1 -1
- package/dist/components/toggle/Toggle.stories.js +311 -122
- package/dist/components/toggle/Toggle.stories.js.map +1 -1
- package/dist/components/tooltip/Tooltip.stories.d.ts +78 -6
- package/dist/components/tooltip/Tooltip.stories.d.ts.map +1 -1
- package/dist/components/tooltip/Tooltip.stories.js +413 -7
- package/dist/components/tooltip/Tooltip.stories.js.map +1 -1
- package/dist/components/tooltip/TooltipWrapper.stories.d.ts +71 -7
- package/dist/components/tooltip/TooltipWrapper.stories.d.ts.map +1 -1
- package/dist/components/tooltip/TooltipWrapper.stories.js +238 -10
- package/dist/components/tooltip/TooltipWrapper.stories.js.map +1 -1
- package/dist/index.css +8 -0
- package/dist/index.css.map +1 -1
- package/dist/utils/PopupParentContext.stories.d.ts +17 -0
- package/dist/utils/PopupParentContext.stories.d.ts.map +1 -0
- package/dist/utils/PopupParentContext.stories.js +266 -0
- package/dist/utils/PopupParentContext.stories.js.map +1 -0
- package/dist/utils/getDefaultPopupParent.d.ts.map +1 -1
- package/dist/utils/getDefaultPopupParent.js +6 -0
- package/dist/utils/getDefaultPopupParent.js.map +1 -1
- package/package.json +1 -1
- package/src/components/articleCard/ArticleCard.stories.tsx +524 -111
- package/src/components/avatar/Avatar.stories.tsx +504 -59
- package/src/components/avatarGroup/AvatarGroup.stories.tsx +977 -175
- package/src/components/banner/Banner.stories.tsx +7 -3
- package/src/components/card/Card.stories.tsx +466 -36
- package/src/components/combobox/Combobox.stories.tsx +867 -260
- package/src/components/datePicker/DatePicker.stories.tsx +777 -60
- package/src/components/dateTimePicker/DateTimePicker.stories.tsx +910 -132
- package/src/components/editableText/EditableText.stories.tsx +567 -91
- package/src/components/formField/FormField.test.tsx +6 -0
- package/src/components/formField/FormField.tsx +5 -0
- package/src/components/formField/fieldset/Fieldset.stories.tsx +761 -51
- package/src/components/formField/inputs/checkbox/CheckboxGroup.tsx +1 -1
- package/src/components/formField/inputs/checkbox/CheckboxInput.tsx +1 -1
- package/src/components/formField/inputs/colourPickerDropdown/ColourPickerDropdown.stories.tsx +504 -11
- package/src/components/formField/inputs/radio/RadioButtonGroup.tsx +17 -4
- package/src/components/formField/inputs/radio/RadioButtonInput.stories.tsx +71 -59
- package/src/components/formField/inputs/selectDropdown/SelectDropdown.stories.tsx +1079 -168
- package/src/components/formField/inputs/time/TimeInput.stories.tsx +1140 -104
- package/src/components/formField/label/Label.stories.tsx +317 -8
- package/src/components/icoText/IcoText.stories.tsx +442 -31
- package/src/components/kpiCard/KPICard.stories.tsx +475 -30
- package/src/components/kvpList/KVPList.stories.tsx +593 -26
- package/src/components/modal/Modal.stories.tsx +963 -26
- package/src/components/modal/modalManager/ModalManager.stories.tsx +612 -454
- package/src/components/pill/Pill.stories.tsx +11 -13
- package/src/components/pill/Pill.tsx +1 -0
- package/src/components/row/Row.stories.tsx +474 -58
- package/src/components/searchBar/SearchBar.stories.tsx +570 -38
- package/src/components/section/Section.stories.tsx +723 -70
- package/src/components/singleUser/SingleUser.stories.tsx +393 -34
- package/src/components/slideoverManager/SlideoverManager.stories.tsx +572 -342
- package/src/components/table/DSDefaultColDef.ts +25 -5
- package/src/components/table/Table.stories.tsx +411 -3
- package/src/components/table/Table.tsx +9 -2
- package/src/components/table/TableFooter.stories.tsx +196 -0
- package/src/components/table/TableHeader.stories.tsx +251 -0
- package/src/components/table/cellEditors/DateCellEditor.stories.tsx +245 -0
- package/src/components/table/cellRenderers/BooleanCellRenderer.stories.tsx +278 -0
- package/src/components/table/cellRenderers/ButtonCellRenderer.stories.tsx +333 -0
- package/src/components/table/cellRenderers/CheckboxCellRenderer.stories.tsx +337 -0
- package/src/components/table/cellRenderers/CheckboxCellRenderer.tsx +5 -1
- package/src/components/table/cellRenderers/DefaultCellRenderer.stories.tsx +342 -0
- package/src/components/table/cellRenderers/InlineTextCellRenderer.stories.tsx +292 -0
- package/src/components/table/cellRenderers/SelectDropdownCellRenderer.stories.tsx +369 -0
- package/src/components/table/columnFilters/BooleanFilter.stories.tsx +268 -0
- package/src/components/table/columnFilters/TimeFilter.stories.tsx +281 -0
- package/src/components/table/pagination/PaginationPanel.stories.tsx +327 -0
- package/src/components/table/tableControls/TableControls.stories.tsx +415 -0
- package/src/components/table/tableControls/TableSettingsDropdown.test.tsx +207 -0
- package/src/components/table/tableControls/TableSettingsDropdown.tsx +103 -39
- package/src/components/tabs/Tabs.stories.tsx +540 -60
- package/src/components/tabs/TabsItem.stories.tsx +82 -8
- package/src/components/toast/Toast.stories.tsx +539 -77
- package/src/components/toggle/Toggle.stories.tsx +371 -135
- package/src/components/tooltip/Tooltip.stories.tsx +606 -15
- package/src/components/tooltip/TooltipWrapper.stories.tsx +348 -12
- package/src/docs/Contributing.mdx +241 -0
- package/src/docs/UsingComponents.mdx +93 -0
- package/src/docs/Welcome.mdx +68 -0
- package/src/global.scss +7 -0
- package/src/utils/PopupParentContext.stories.tsx +367 -0
- package/src/utils/getDefaultPopupParent.ts +6 -0
- package/.ralph/storybook-upgrade/knowledge.md +0 -308
- package/.ralph/storybook-upgrade/prd.json +0 -777
- package/.ralph/storybook-upgrade/progress.md +0 -342
- package/src/components/table/TableWIP.mdx +0 -3
|
@@ -1,46 +1,422 @@
|
|
|
1
1
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useState } from 'react';
|
|
3
|
+
import { Controls, Heading as DocHeading, Markdown, Primary as DocPrimary, Stories, Subtitle, Title, } from '@storybook/addon-docs/blocks';
|
|
2
4
|
import { Tabs } from './Tabs';
|
|
5
|
+
// ---------------------------------------------------------------------------
|
|
6
|
+
// Docs page content
|
|
7
|
+
// ---------------------------------------------------------------------------
|
|
8
|
+
const DESCRIPTION_INTRO = [
|
|
9
|
+
'`Tabs` renders a tab strip — a `<ul role="tablist">` containing `Tabs.Item` elements.',
|
|
10
|
+
'`Tabs` is **purely presentational**: it does not manage which tab is active.',
|
|
11
|
+
'You control the `active` state on each `Tabs.Item` and listen for clicks via `tabElementProps.onClick`.',
|
|
12
|
+
].join(' ');
|
|
13
|
+
const USAGE_GUIDANCE = [
|
|
14
|
+
'### When to use',
|
|
15
|
+
'',
|
|
16
|
+
'- **Page-level navigation** — switching between major sections of a page (Overview, Details, Settings)',
|
|
17
|
+
'- **Content filtering** — toggling between views of the same data (e.g. List / Calendar / Map)',
|
|
18
|
+
'- **Step indicators** — showing progress through a multi-section form (read-only, non-interactive)',
|
|
19
|
+
'',
|
|
20
|
+
'---',
|
|
21
|
+
'',
|
|
22
|
+
'### When NOT to use',
|
|
23
|
+
'',
|
|
24
|
+
'| Situation | Use instead |',
|
|
25
|
+
'|---|---|',
|
|
26
|
+
'| More than ~7 tabs — the strip becomes hard to scan | Consider a sidebar nav or `Dropdown` |',
|
|
27
|
+
'| Showing/hiding content in an accordion pattern | [`Section`](?path=/docs/components-section--docs) with `collapsible` |',
|
|
28
|
+
].join('\n');
|
|
29
|
+
const DEVELOPER_NOTES = [
|
|
30
|
+
'### Controlling active state',
|
|
31
|
+
'',
|
|
32
|
+
'`Tabs` does **not** manage active state. Wire it yourself:',
|
|
33
|
+
'',
|
|
34
|
+
'```tsx',
|
|
35
|
+
"import { Tabs } from '@arbor-education/design-system.components';",
|
|
36
|
+
"import { useState } from 'react';",
|
|
37
|
+
'',
|
|
38
|
+
'function PupilTabs() {',
|
|
39
|
+
" const [active, setActive] = useState('overview');",
|
|
40
|
+
'',
|
|
41
|
+
' return (',
|
|
42
|
+
' <Tabs>',
|
|
43
|
+
" <Tabs.Item active={active === 'overview'} tabElementProps={{ onClick: () => setActive('overview') }}>",
|
|
44
|
+
' Overview',
|
|
45
|
+
' </Tabs.Item>',
|
|
46
|
+
" <Tabs.Item active={active === 'details'} tabElementProps={{ onClick: () => setActive('details') }}>",
|
|
47
|
+
' Details',
|
|
48
|
+
' </Tabs.Item>',
|
|
49
|
+
" <Tabs.Item active={active === 'assessment'} tabElementProps={{ onClick: () => setActive('assessment') }}>",
|
|
50
|
+
' Assessment',
|
|
51
|
+
' </Tabs.Item>',
|
|
52
|
+
' </Tabs>',
|
|
53
|
+
' );',
|
|
54
|
+
'}',
|
|
55
|
+
'```',
|
|
56
|
+
'',
|
|
57
|
+
'---',
|
|
58
|
+
'',
|
|
59
|
+
'### Link tabs (router navigation)',
|
|
60
|
+
'',
|
|
61
|
+
'Use `tabElement="link"` when tabs navigate to different routes.',
|
|
62
|
+
'The inner element renders as `<a>` — pass your href via `tabElementProps`:',
|
|
63
|
+
'',
|
|
64
|
+
'```tsx',
|
|
65
|
+
'<Tabs>',
|
|
66
|
+
' <Tabs.Item tabElement="link" tabElementProps={{ href: "/pupils/overview" }} active>',
|
|
67
|
+
' Overview',
|
|
68
|
+
' </Tabs.Item>',
|
|
69
|
+
' <Tabs.Item tabElement="link" tabElementProps={{ href: "/pupils/details" }}>',
|
|
70
|
+
' Details',
|
|
71
|
+
' </Tabs.Item>',
|
|
72
|
+
'</Tabs>',
|
|
73
|
+
'```',
|
|
74
|
+
'',
|
|
75
|
+
'For React Router, wrap `TabsItem` in `<NavLink>` as the `tabElementProps` does not accept a',
|
|
76
|
+
'`component` override — use the `<Link>` component to wrap or pass `href` for standard anchors.',
|
|
77
|
+
'',
|
|
78
|
+
'---',
|
|
79
|
+
'',
|
|
80
|
+
'### Sub-component props',
|
|
81
|
+
'',
|
|
82
|
+
'#### `Tabs`',
|
|
83
|
+
'',
|
|
84
|
+
'Accepts all `HTMLAttributes<HTMLUListElement>` plus `children`.',
|
|
85
|
+
'',
|
|
86
|
+
'| Prop | Type | Default | Description |',
|
|
87
|
+
'|---|---|---|---|',
|
|
88
|
+
'| `children` | `ReactNode` | — | `Tabs.Item` elements |',
|
|
89
|
+
'| `className` | `string` | — | Extra CSS class on the `<ul>` |',
|
|
90
|
+
'',
|
|
91
|
+
'#### `Tabs.Item`',
|
|
92
|
+
'',
|
|
93
|
+
'| Prop | Type | Default | Description |',
|
|
94
|
+
'|---|---|---|---|',
|
|
95
|
+
'| `active` | `boolean` | `false` | Marks this tab as selected — sets `aria-selected` and active styles |',
|
|
96
|
+
'| `tabElement` | `"button" \\| "link"` | `"button"` | Inner element type. `"button"` for JS-controlled tabs; `"link"` for anchor/router navigation |',
|
|
97
|
+
'| `tabElementProps` | `ButtonHTMLAttributes` or `AnchorHTMLAttributes` | — | Props forwarded to the inner `<button>` or `<a>`. Use `onClick` for state control; `href` for links |',
|
|
98
|
+
'| `iconName` | `keyof allowedIcons` | — | Optional icon rendered before the label text (16 px) |',
|
|
99
|
+
'| `children` | `ReactNode` | — | Tab label text |',
|
|
100
|
+
'| `className` | `string` | — | Extra CSS class on the `<li>` wrapper |',
|
|
101
|
+
'',
|
|
102
|
+
'---',
|
|
103
|
+
'',
|
|
104
|
+
'### Accessibility',
|
|
105
|
+
'',
|
|
106
|
+
'- `Tabs` renders `role="tablist"` on the `<ul>`',
|
|
107
|
+
'- Each `Tabs.Item` renders `role="presentation"` on the `<li>` and `role="tab"` + `aria-selected` on the inner element',
|
|
108
|
+
'- Arrow key navigation within the tab list is provided by the browser for `role="tab"` elements',
|
|
109
|
+
'- `Tabs`/`TabsItem` only render the **tab strip** — tab panel content is your responsibility.',
|
|
110
|
+
' Associate each panel with its tab using `aria-controls` on the tab and `role="tabpanel"` + `aria-labelledby` on the panel',
|
|
111
|
+
].join('\n');
|
|
112
|
+
const RELATED_COMPONENTS = [
|
|
113
|
+
'## Related components',
|
|
114
|
+
'',
|
|
115
|
+
'[Section](?path=/docs/components-section--docs) · [Dropdown](?path=/docs/components-dropdown--docs)',
|
|
116
|
+
].join('\n');
|
|
117
|
+
const PROPS_INTRO = 'The preview below is wired to the **Controls** panel — tweak any prop to see the story update in real time.';
|
|
118
|
+
// ---------------------------------------------------------------------------
|
|
119
|
+
// Docs page
|
|
120
|
+
// ---------------------------------------------------------------------------
|
|
121
|
+
function TabsDocsPage() {
|
|
122
|
+
return (_jsxs(_Fragment, { children: [_jsx(Title, {}), _jsx(Subtitle, {}), _jsx(Markdown, { children: DESCRIPTION_INTRO }), _jsx(DocHeading, { children: "Interactive example" }), _jsx(Markdown, { children: PROPS_INTRO }), _jsx(DocPrimary, {}), _jsx(Controls, {}), _jsx(DocHeading, { children: "Usage guidance" }), _jsx(Markdown, { children: USAGE_GUIDANCE }), _jsx(DocHeading, { children: "Developer notes" }), _jsx(Markdown, { children: DEVELOPER_NOTES }), _jsx(DocHeading, { children: "Examples" }), _jsx(Stories, { title: "" }), _jsx(Markdown, { children: RELATED_COMPONENTS })] }));
|
|
123
|
+
}
|
|
124
|
+
// ---------------------------------------------------------------------------
|
|
125
|
+
// Meta
|
|
126
|
+
// ---------------------------------------------------------------------------
|
|
3
127
|
const meta = {
|
|
4
128
|
title: 'Components/Tabs',
|
|
5
129
|
component: Tabs,
|
|
130
|
+
tags: ['autodocs'],
|
|
6
131
|
parameters: {
|
|
7
132
|
layout: 'padded',
|
|
133
|
+
docs: {
|
|
134
|
+
page: TabsDocsPage,
|
|
135
|
+
},
|
|
8
136
|
},
|
|
9
|
-
tags: ['autodocs'],
|
|
10
137
|
argTypes: {
|
|
11
138
|
children: {
|
|
12
139
|
control: false,
|
|
13
|
-
description: '
|
|
140
|
+
description: '`Tabs.Item` elements that make up the tab strip.',
|
|
141
|
+
table: {
|
|
142
|
+
type: { summary: 'ReactNode' },
|
|
143
|
+
},
|
|
14
144
|
},
|
|
15
145
|
className: {
|
|
16
146
|
control: 'text',
|
|
17
|
-
description: '
|
|
147
|
+
description: 'Extra CSS class applied to the `<ul>` element.',
|
|
148
|
+
table: {
|
|
149
|
+
type: { summary: 'string' },
|
|
150
|
+
defaultValue: { summary: 'undefined' },
|
|
151
|
+
},
|
|
18
152
|
},
|
|
19
153
|
},
|
|
20
154
|
};
|
|
21
155
|
export default meta;
|
|
22
|
-
//
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
156
|
+
// ---------------------------------------------------------------------------
|
|
157
|
+
// Helper
|
|
158
|
+
// ---------------------------------------------------------------------------
|
|
159
|
+
const withDescription = (story, description) => ({
|
|
160
|
+
...story,
|
|
161
|
+
parameters: {
|
|
162
|
+
...story.parameters,
|
|
163
|
+
docs: {
|
|
164
|
+
...story.parameters?.docs,
|
|
165
|
+
description: {
|
|
166
|
+
story: description,
|
|
167
|
+
},
|
|
168
|
+
},
|
|
26
169
|
},
|
|
170
|
+
});
|
|
171
|
+
// ---------------------------------------------------------------------------
|
|
172
|
+
// Templates
|
|
173
|
+
// ---------------------------------------------------------------------------
|
|
174
|
+
const DefaultTemplate = () => {
|
|
175
|
+
const [active, setActive] = useState('overview');
|
|
176
|
+
return (_jsxs(Tabs, { children: [_jsx(Tabs.Item, { active: active === 'overview', tabElementProps: { onClick: () => setActive('overview') }, children: "Overview" }), _jsx(Tabs.Item, { active: active === 'details', tabElementProps: { onClick: () => setActive('details') }, children: "Details" }), _jsx(Tabs.Item, { active: active === 'assessment', tabElementProps: { onClick: () => setActive('assessment') }, children: "Assessment" }), _jsx(Tabs.Item, { active: active === 'attendance', tabElementProps: { onClick: () => setActive('attendance') }, children: "Attendance" })] }));
|
|
27
177
|
};
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
children: (_jsxs(_Fragment, { children: [_jsx(Tabs.Item, { tabElement: "link", tabElementProps: { href: '#overview' }, active: true, children: "Overview" }), _jsx(Tabs.Item, { tabElement: "link", tabElementProps: { href: '#details' }, children: "Details" }), _jsx(Tabs.Item, { tabElement: "link", tabElementProps: { href: '#settings' }, children: "Settings" })] })),
|
|
32
|
-
},
|
|
178
|
+
const WithIconsTemplate = () => {
|
|
179
|
+
const [active, setActive] = useState('profile');
|
|
180
|
+
return (_jsxs(Tabs, { children: [_jsx(Tabs.Item, { iconName: "user", active: active === 'profile', tabElementProps: { onClick: () => setActive('profile') }, children: "Profile" }), _jsx(Tabs.Item, { iconName: "date", active: active === 'timetable', tabElementProps: { onClick: () => setActive('timetable') }, children: "Timetable" }), _jsx(Tabs.Item, { iconName: "chart-column-increasing", active: active === 'results', tabElementProps: { onClick: () => setActive('results') }, children: "Results" }), _jsx(Tabs.Item, { iconName: "settings", active: active === 'settings', tabElementProps: { onClick: () => setActive('settings') }, children: "Settings" })] }));
|
|
33
181
|
};
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
},
|
|
182
|
+
const WithLinkTabsTemplate = () => (_jsxs(Tabs, { children: [_jsx(Tabs.Item, { tabElement: "link", tabElementProps: { href: '#overview' }, active: true, children: "Overview" }), _jsx(Tabs.Item, { tabElement: "link", tabElementProps: { href: '#details' }, children: "Details" }), _jsx(Tabs.Item, { tabElement: "link", tabElementProps: { href: '#assessment' }, children: "Assessment" }), _jsx(Tabs.Item, { tabElement: "link", tabElementProps: { href: '#attendance' }, children: "Attendance" })] }));
|
|
183
|
+
const WithManyTabsTemplate = () => {
|
|
184
|
+
const [active, setActive] = useState('autumn');
|
|
185
|
+
const terms = ['Autumn 1', 'Autumn 2', 'Spring 1', 'Spring 2', 'Summer 1', 'Summer 2'];
|
|
186
|
+
return (_jsx(Tabs, { children: terms.map(term => (_jsx(Tabs.Item, { active: active === term, tabElementProps: { onClick: () => setActive(term) }, children: term }, term))) }));
|
|
39
187
|
};
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
children: (_jsxs(_Fragment, { children: [_jsx(Tabs.Item, { active: true, iconName: "list", children: "Tab 1" }), _jsx(Tabs.Item, { iconName: "list", children: "Tab 2" }), _jsx(Tabs.Item, { iconName: "list", children: "Tab 3" }), _jsx(Tabs.Item, { iconName: "list", children: "Tab 4" }), _jsx(Tabs.Item, { iconName: "list", children: "Tab 5" }), _jsx(Tabs.Item, { iconName: "list", children: "Tab 6" }), _jsx(Tabs.Item, { iconName: "list", children: "Tab 7" }), _jsx(Tabs.Item, { iconName: "list", children: "Tab 8" })] })),
|
|
44
|
-
},
|
|
188
|
+
const MixedTabsTemplate = () => {
|
|
189
|
+
const [active, setActive] = useState('overview');
|
|
190
|
+
return (_jsxs(Tabs, { children: [_jsx(Tabs.Item, { active: active === 'overview', tabElementProps: { onClick: () => setActive('overview') }, children: "Overview" }), _jsx(Tabs.Item, { active: active === 'details', tabElementProps: { onClick: () => setActive('details') }, children: "Details" }), _jsx(Tabs.Item, { tabElement: "link", tabElementProps: { href: '#help' }, children: "Help" })] }));
|
|
45
191
|
};
|
|
192
|
+
// ---------------------------------------------------------------------------
|
|
193
|
+
// Stories
|
|
194
|
+
// ---------------------------------------------------------------------------
|
|
195
|
+
export const Default = withDescription({
|
|
196
|
+
render: DefaultTemplate,
|
|
197
|
+
parameters: {
|
|
198
|
+
controls: { disable: true },
|
|
199
|
+
docs: {
|
|
200
|
+
source: {
|
|
201
|
+
language: 'tsx',
|
|
202
|
+
code: `
|
|
203
|
+
import { Tabs } from '@arbor-education/design-system.components';
|
|
204
|
+
import { useState } from 'react';
|
|
205
|
+
|
|
206
|
+
function PupilTabs() {
|
|
207
|
+
const [active, setActive] = useState('overview');
|
|
208
|
+
|
|
209
|
+
return (
|
|
210
|
+
<Tabs>
|
|
211
|
+
<Tabs.Item
|
|
212
|
+
active={active === 'overview'}
|
|
213
|
+
tabElementProps={{ onClick: () => setActive('overview') }}
|
|
214
|
+
>
|
|
215
|
+
Overview
|
|
216
|
+
</Tabs.Item>
|
|
217
|
+
<Tabs.Item
|
|
218
|
+
active={active === 'details'}
|
|
219
|
+
tabElementProps={{ onClick: () => setActive('details') }}
|
|
220
|
+
>
|
|
221
|
+
Details
|
|
222
|
+
</Tabs.Item>
|
|
223
|
+
<Tabs.Item
|
|
224
|
+
active={active === 'assessment'}
|
|
225
|
+
tabElementProps={{ onClick: () => setActive('assessment') }}
|
|
226
|
+
>
|
|
227
|
+
Assessment
|
|
228
|
+
</Tabs.Item>
|
|
229
|
+
<Tabs.Item
|
|
230
|
+
active={active === 'attendance'}
|
|
231
|
+
tabElementProps={{ onClick: () => setActive('attendance') }}
|
|
232
|
+
>
|
|
233
|
+
Attendance
|
|
234
|
+
</Tabs.Item>
|
|
235
|
+
</Tabs>
|
|
236
|
+
);
|
|
237
|
+
}
|
|
238
|
+
export default PupilTabs;
|
|
239
|
+
`.trim(),
|
|
240
|
+
},
|
|
241
|
+
},
|
|
242
|
+
},
|
|
243
|
+
}, [
|
|
244
|
+
'`Tabs` does **not** manage which tab is active — that is your responsibility.',
|
|
245
|
+
'Control `active` on each `Tabs.Item` and listen for clicks via `tabElementProps.onClick`.',
|
|
246
|
+
'Click the tabs to see the active state switch.',
|
|
247
|
+
].join(' '));
|
|
248
|
+
export const WithIcons = withDescription({
|
|
249
|
+
render: WithIconsTemplate,
|
|
250
|
+
parameters: {
|
|
251
|
+
controls: { disable: true },
|
|
252
|
+
docs: {
|
|
253
|
+
source: {
|
|
254
|
+
language: 'tsx',
|
|
255
|
+
code: `
|
|
256
|
+
import { Tabs } from '@arbor-education/design-system.components';
|
|
257
|
+
import { useState } from 'react';
|
|
258
|
+
|
|
259
|
+
function PupilTabsWithIcons() {
|
|
260
|
+
const [active, setActive] = useState('profile');
|
|
261
|
+
|
|
262
|
+
return (
|
|
263
|
+
<Tabs>
|
|
264
|
+
<Tabs.Item
|
|
265
|
+
iconName="user"
|
|
266
|
+
active={active === 'profile'}
|
|
267
|
+
tabElementProps={{ onClick: () => setActive('profile') }}
|
|
268
|
+
>
|
|
269
|
+
Profile
|
|
270
|
+
</Tabs.Item>
|
|
271
|
+
<Tabs.Item
|
|
272
|
+
iconName="date"
|
|
273
|
+
active={active === 'timetable'}
|
|
274
|
+
tabElementProps={{ onClick: () => setActive('timetable') }}
|
|
275
|
+
>
|
|
276
|
+
Timetable
|
|
277
|
+
</Tabs.Item>
|
|
278
|
+
<Tabs.Item
|
|
279
|
+
iconName="chart-column-increasing"
|
|
280
|
+
active={active === 'results'}
|
|
281
|
+
tabElementProps={{ onClick: () => setActive('results') }}
|
|
282
|
+
>
|
|
283
|
+
Results
|
|
284
|
+
</Tabs.Item>
|
|
285
|
+
</Tabs>
|
|
286
|
+
);
|
|
287
|
+
}
|
|
288
|
+
export default PupilTabsWithIcons;
|
|
289
|
+
`.trim(),
|
|
290
|
+
},
|
|
291
|
+
},
|
|
292
|
+
},
|
|
293
|
+
}, [
|
|
294
|
+
'Add an icon before the tab label with the `iconName` prop.',
|
|
295
|
+
'Icons render at 16 px and use any name from the icon library.',
|
|
296
|
+
'Keep labels short when using icons — the icon + text combination can make tabs wide.',
|
|
297
|
+
].join(' '));
|
|
298
|
+
export const WithLinkTabs = withDescription({
|
|
299
|
+
render: WithLinkTabsTemplate,
|
|
300
|
+
parameters: {
|
|
301
|
+
controls: { disable: true },
|
|
302
|
+
docs: {
|
|
303
|
+
source: {
|
|
304
|
+
language: 'tsx',
|
|
305
|
+
code: `
|
|
306
|
+
import { Tabs } from '@arbor-education/design-system.components';
|
|
307
|
+
|
|
308
|
+
// Use tabElement="link" when tabs navigate to different URLs.
|
|
309
|
+
// The inner element renders as <a> — pass href via tabElementProps.
|
|
310
|
+
function PupilLinkTabs() {
|
|
311
|
+
return (
|
|
312
|
+
<Tabs>
|
|
313
|
+
<Tabs.Item tabElement="link" tabElementProps={{ href: '/pupils/overview' }} active>
|
|
314
|
+
Overview
|
|
315
|
+
</Tabs.Item>
|
|
316
|
+
<Tabs.Item tabElement="link" tabElementProps={{ href: '/pupils/details' }}>
|
|
317
|
+
Details
|
|
318
|
+
</Tabs.Item>
|
|
319
|
+
<Tabs.Item tabElement="link" tabElementProps={{ href: '/pupils/assessment' }}>
|
|
320
|
+
Assessment
|
|
321
|
+
</Tabs.Item>
|
|
322
|
+
<Tabs.Item tabElement="link" tabElementProps={{ href: '/pupils/attendance' }}>
|
|
323
|
+
Attendance
|
|
324
|
+
</Tabs.Item>
|
|
325
|
+
</Tabs>
|
|
326
|
+
);
|
|
327
|
+
}
|
|
328
|
+
export default PupilLinkTabs;
|
|
329
|
+
`.trim(),
|
|
330
|
+
},
|
|
331
|
+
},
|
|
332
|
+
},
|
|
333
|
+
}, [
|
|
334
|
+
'Use `tabElement="link"` when each tab navigates to a different URL.',
|
|
335
|
+
'The inner element renders as `<a>` — pass `href` (and any other anchor attributes) via `tabElementProps`.',
|
|
336
|
+
'Set `active` on the tab that matches the current route.',
|
|
337
|
+
].join(' '));
|
|
338
|
+
export const WithManyTabs = withDescription({
|
|
339
|
+
render: WithManyTabsTemplate,
|
|
340
|
+
parameters: {
|
|
341
|
+
controls: { disable: true },
|
|
342
|
+
docs: {
|
|
343
|
+
source: {
|
|
344
|
+
language: 'tsx',
|
|
345
|
+
code: `
|
|
346
|
+
import { Tabs } from '@arbor-education/design-system.components';
|
|
347
|
+
import { useState } from 'react';
|
|
348
|
+
|
|
349
|
+
function TermTabs() {
|
|
350
|
+
const [active, setActive] = useState('Autumn 1');
|
|
351
|
+
const terms = ['Autumn 1', 'Autumn 2', 'Spring 1', 'Spring 2', 'Summer 1', 'Summer 2'];
|
|
352
|
+
|
|
353
|
+
return (
|
|
354
|
+
<Tabs>
|
|
355
|
+
{terms.map(term => (
|
|
356
|
+
<Tabs.Item
|
|
357
|
+
key={term}
|
|
358
|
+
active={active === term}
|
|
359
|
+
tabElementProps={{ onClick: () => setActive(term) }}
|
|
360
|
+
>
|
|
361
|
+
{term}
|
|
362
|
+
</Tabs.Item>
|
|
363
|
+
))}
|
|
364
|
+
</Tabs>
|
|
365
|
+
);
|
|
366
|
+
}
|
|
367
|
+
export default TermTabs;
|
|
368
|
+
`.trim(),
|
|
369
|
+
},
|
|
370
|
+
},
|
|
371
|
+
},
|
|
372
|
+
}, [
|
|
373
|
+
'Tabs wrap onto multiple lines when there are more tabs than the strip can fit.',
|
|
374
|
+
'If you have more than ~7 tabs, consider whether a `Dropdown` or sidebar navigation',
|
|
375
|
+
'would be easier to scan. Dynamic lists of tabs (e.g. academic terms) are a good use case',
|
|
376
|
+
'for rendering `Tabs.Item` from an array.',
|
|
377
|
+
].join(' '));
|
|
378
|
+
export const MixedButtonAndLink = withDescription({
|
|
379
|
+
render: MixedTabsTemplate,
|
|
380
|
+
parameters: {
|
|
381
|
+
controls: { disable: true },
|
|
382
|
+
docs: {
|
|
383
|
+
source: {
|
|
384
|
+
language: 'tsx',
|
|
385
|
+
code: `
|
|
386
|
+
import { Tabs } from '@arbor-education/design-system.components';
|
|
387
|
+
import { useState } from 'react';
|
|
388
|
+
|
|
389
|
+
function PupilTabsMixed() {
|
|
390
|
+
const [active, setActive] = useState('overview');
|
|
391
|
+
|
|
392
|
+
return (
|
|
393
|
+
<Tabs>
|
|
394
|
+
<Tabs.Item
|
|
395
|
+
active={active === 'overview'}
|
|
396
|
+
tabElementProps={{ onClick: () => setActive('overview') }}
|
|
397
|
+
>
|
|
398
|
+
Overview
|
|
399
|
+
</Tabs.Item>
|
|
400
|
+
<Tabs.Item
|
|
401
|
+
active={active === 'details'}
|
|
402
|
+
tabElementProps={{ onClick: () => setActive('details') }}
|
|
403
|
+
>
|
|
404
|
+
Details
|
|
405
|
+
</Tabs.Item>
|
|
406
|
+
<Tabs.Item tabElement="link" tabElementProps={{ href: '/help' }}>
|
|
407
|
+
Help
|
|
408
|
+
</Tabs.Item>
|
|
409
|
+
</Tabs>
|
|
410
|
+
);
|
|
411
|
+
}
|
|
412
|
+
export default PupilTabsMixed;
|
|
413
|
+
`.trim(),
|
|
414
|
+
},
|
|
415
|
+
},
|
|
416
|
+
},
|
|
417
|
+
}, [
|
|
418
|
+
'You can mix `button` and `link` tabs in the same strip.',
|
|
419
|
+
'Use `tabElement="button"` (default) for JS-controlled tabs and `tabElement="link"` for any tab that',
|
|
420
|
+
'navigates to an external URL or a help page — without disrupting the active state of the in-page tabs.',
|
|
421
|
+
].join(' '));
|
|
46
422
|
//# sourceMappingURL=Tabs.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tabs.stories.js","sourceRoot":"","sources":["../../../src/components/tabs/Tabs.stories.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"Tabs.stories.js","sourceRoot":"","sources":["../../../src/components/tabs/Tabs.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EACL,QAAQ,EACR,OAAO,IAAI,UAAU,EACrB,QAAQ,EACR,OAAO,IAAI,UAAU,EACrB,OAAO,EACP,QAAQ,EACR,KAAK,GACN,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,8EAA8E;AAC9E,oBAAoB;AACpB,8EAA8E;AAE9E,MAAM,iBAAiB,GAAG;IACxB,uFAAuF;IACvF,8EAA8E;IAC9E,yGAAyG;CAC1G,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAEZ,MAAM,cAAc,GAAG;IACrB,iBAAiB;IACjB,EAAE;IACF,wGAAwG;IACxG,gGAAgG;IAChG,oGAAoG;IACpG,EAAE;IACF,KAAK;IACL,EAAE;IACF,qBAAqB;IACrB,EAAE;IACF,6BAA6B;IAC7B,WAAW;IACX,+FAA+F;IAC/F,2HAA2H;CAC5H,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAEb,MAAM,eAAe,GAAG;IACtB,8BAA8B;IAC9B,EAAE;IACF,4DAA4D;IAC5D,EAAE;IACF,QAAQ;IACR,mEAAmE;IACnE,mCAAmC;IACnC,EAAE;IACF,wBAAwB;IACxB,qDAAqD;IACrD,EAAE;IACF,YAAY;IACZ,YAAY;IACZ,6GAA6G;IAC7G,kBAAkB;IAClB,oBAAoB;IACpB,2GAA2G;IAC3G,iBAAiB;IACjB,oBAAoB;IACpB,iHAAiH;IACjH,oBAAoB;IACpB,oBAAoB;IACpB,aAAa;IACb,MAAM;IACN,GAAG;IACH,KAAK;IACL,EAAE;IACF,KAAK;IACL,EAAE;IACF,mCAAmC;IACnC,EAAE;IACF,iEAAiE;IACjE,4EAA4E;IAC5E,EAAE;IACF,QAAQ;IACR,QAAQ;IACR,uFAAuF;IACvF,cAAc;IACd,gBAAgB;IAChB,+EAA+E;IAC/E,aAAa;IACb,gBAAgB;IAChB,SAAS;IACT,KAAK;IACL,EAAE;IACF,6FAA6F;IAC7F,gGAAgG;IAChG,EAAE;IACF,KAAK;IACL,EAAE;IACF,yBAAyB;IACzB,EAAE;IACF,aAAa;IACb,EAAE;IACF,iEAAiE;IACjE,EAAE;IACF,yCAAyC;IACzC,mBAAmB;IACnB,yDAAyD;IACzD,gEAAgE;IAChE,EAAE;IACF,kBAAkB;IAClB,EAAE;IACF,yCAAyC;IACzC,mBAAmB;IACnB,0GAA0G;IAC1G,sJAAsJ;IACtJ,oLAAoL;IACpL,kGAAkG;IAClG,mDAAmD;IACnD,wEAAwE;IACxE,EAAE;IACF,KAAK;IACL,EAAE;IACF,mBAAmB;IACnB,EAAE;IACF,iDAAiD;IACjD,wHAAwH;IACxH,iGAAiG;IACjG,+FAA+F;IAC/F,6HAA6H;CAC9H,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAEb,MAAM,kBAAkB,GAAG;IACzB,uBAAuB;IACvB,EAAE;IACF,qGAAqG;CACtG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAEb,MAAM,WAAW,GAAG,6GAA6G,CAAC;AAElI,8EAA8E;AAC9E,YAAY;AACZ,8EAA8E;AAE9E,SAAS,YAAY;IACnB,OAAO,CACL,8BACE,KAAC,KAAK,KAAG,EACT,KAAC,QAAQ,KAAG,EACZ,KAAC,QAAQ,cAAE,iBAAiB,GAAY,EACxC,KAAC,UAAU,sCAAiC,EAC5C,KAAC,QAAQ,cAAE,WAAW,GAAY,EAClC,KAAC,UAAU,KAAG,EACd,KAAC,QAAQ,KAAG,EACZ,KAAC,UAAU,iCAA4B,EACvC,KAAC,QAAQ,cAAE,cAAc,GAAY,EACrC,KAAC,UAAU,kCAA6B,EACxC,KAAC,QAAQ,cAAE,eAAe,GAAY,EACtC,KAAC,UAAU,2BAAsB,EACjC,KAAC,OAAO,IAAC,KAAK,EAAC,EAAE,GAAG,EACpB,KAAC,QAAQ,cAAE,kBAAkB,GAAY,IACxC,CACJ,CAAC;AACJ,CAAC;AAED,8EAA8E;AAC9E,OAAO;AACP,8EAA8E;AAE9E,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,IAAI;IACf,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,MAAM,EAAE,QAAQ;QAChB,IAAI,EAAE;YACJ,IAAI,EAAE,YAAY;SACnB;KACF;IACD,QAAQ,EAAE;QACR,QAAQ,EAAE;YACR,OAAO,EAAE,KAAK;YACd,WAAW,EAAE,kDAAkD;YAC/D,KAAK,EAAE;gBACL,IAAI,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE;aAC/B;SACF;QACD,SAAS,EAAE;YACT,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,gDAAgD;YAC7D,KAAK,EAAE;gBACL,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;gBAC3B,YAAY,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE;aACvC;SACF;KACF;CAC0B,CAAC;AAE9B,eAAe,IAAI,CAAC;AAGpB,8EAA8E;AAC9E,SAAS;AACT,8EAA8E;AAE9E,MAAM,eAAe,GAAG,CAAC,KAA0B,EAAE,WAAmB,EAAS,EAAE,CAAC,CAAC;IACnF,GAAI,KAAe;IACnB,UAAU,EAAE;QACV,GAAG,KAAK,CAAC,UAAU;QACnB,IAAI,EAAE;YACJ,GAAG,KAAK,CAAC,UAAU,EAAE,IAAI;YACzB,WAAW,EAAE;gBACX,KAAK,EAAE,WAAW;aACnB;SACF;KACF;CACF,CAAC,CAAC;AAEH,8EAA8E;AAC9E,YAAY;AACZ,8EAA8E;AAE9E,MAAM,eAAe,GAAG,GAAG,EAAE;IAC3B,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,UAAU,CAAC,CAAC;IACjD,OAAO,CACL,MAAC,IAAI,eACH,KAAC,IAAI,CAAC,IAAI,IAAC,MAAM,EAAE,MAAM,KAAK,UAAU,EAAE,eAAe,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,UAAU,CAAC,EAAE,yBAEvF,EACZ,KAAC,IAAI,CAAC,IAAI,IAAC,MAAM,EAAE,MAAM,KAAK,SAAS,EAAE,eAAe,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,SAAS,CAAC,EAAE,wBAErF,EACZ,KAAC,IAAI,CAAC,IAAI,IAAC,MAAM,EAAE,MAAM,KAAK,YAAY,EAAE,eAAe,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,YAAY,CAAC,EAAE,2BAE3F,EACZ,KAAC,IAAI,CAAC,IAAI,IAAC,MAAM,EAAE,MAAM,KAAK,YAAY,EAAE,eAAe,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,YAAY,CAAC,EAAE,2BAE3F,IACP,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,iBAAiB,GAAG,GAAG,EAAE;IAC7B,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,SAAS,CAAC,CAAC;IAChD,OAAO,CACL,MAAC,IAAI,eACH,KAAC,IAAI,CAAC,IAAI,IACR,QAAQ,EAAC,MAAM,EACf,MAAM,EAAE,MAAM,KAAK,SAAS,EAC5B,eAAe,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,SAAS,CAAC,EAAE,wBAG9C,EACZ,KAAC,IAAI,CAAC,IAAI,IACR,QAAQ,EAAC,MAAM,EACf,MAAM,EAAE,MAAM,KAAK,WAAW,EAC9B,eAAe,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,0BAGhD,EACZ,KAAC,IAAI,CAAC,IAAI,IACR,QAAQ,EAAC,yBAAyB,EAClC,MAAM,EAAE,MAAM,KAAK,SAAS,EAC5B,eAAe,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,SAAS,CAAC,EAAE,wBAG9C,EACZ,KAAC,IAAI,CAAC,IAAI,IACR,QAAQ,EAAC,UAAU,EACnB,MAAM,EAAE,MAAM,KAAK,UAAU,EAC7B,eAAe,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,UAAU,CAAC,EAAE,yBAG/C,IACP,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,oBAAoB,GAAG,GAAG,EAAE,CAAC,CACjC,MAAC,IAAI,eACH,KAAC,IAAI,CAAC,IAAI,IAAC,UAAU,EAAC,MAAM,EAAC,eAAe,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,EAAE,MAAM,+BAE/D,EACZ,KAAC,IAAI,CAAC,IAAI,IAAC,UAAU,EAAC,MAAM,EAAC,eAAe,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,wBAEtD,EACZ,KAAC,IAAI,CAAC,IAAI,IAAC,UAAU,EAAC,MAAM,EAAC,eAAe,EAAE,EAAE,IAAI,EAAE,aAAa,EAAE,2BAEzD,EACZ,KAAC,IAAI,CAAC,IAAI,IAAC,UAAU,EAAC,MAAM,EAAC,eAAe,EAAE,EAAE,IAAI,EAAE,aAAa,EAAE,2BAEzD,IACP,CACR,CAAC;AAEF,MAAM,oBAAoB,GAAG,GAAG,EAAE;IAChC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC/C,MAAM,KAAK,GAAG,CAAC,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,CAAC,CAAC;IACvF,OAAO,CACL,KAAC,IAAI,cACF,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CACjB,KAAC,IAAI,CAAC,IAAI,IAER,MAAM,EAAE,MAAM,KAAK,IAAI,EACvB,eAAe,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,YAElD,IAAI,IAJA,IAAI,CAKC,CACb,CAAC,GACG,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,iBAAiB,GAAG,GAAG,EAAE;IAC7B,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,UAAU,CAAC,CAAC;IACjD,OAAO,CACL,MAAC,IAAI,eACH,KAAC,IAAI,CAAC,IAAI,IAAC,MAAM,EAAE,MAAM,KAAK,UAAU,EAAE,eAAe,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,UAAU,CAAC,EAAE,yBAEvF,EACZ,KAAC,IAAI,CAAC,IAAI,IAAC,MAAM,EAAE,MAAM,KAAK,SAAS,EAAE,eAAe,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,SAAS,CAAC,EAAE,wBAErF,EACZ,KAAC,IAAI,CAAC,IAAI,IAAC,UAAU,EAAC,MAAM,EAAC,eAAe,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,qBAEnD,IACP,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,8EAA8E;AAC9E,UAAU;AACV,8EAA8E;AAE9E,MAAM,CAAC,MAAM,OAAO,GAAU,eAAe,CAC3C;IACE,MAAM,EAAE,eAAe;IACvB,UAAU,EAAE;QACV,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;QAC3B,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqCf,CAAC,IAAI,EAAE;aACC;SACF;KACF;CACF,EACD;IACE,+EAA+E;IAC/E,2FAA2F;IAC3F,gDAAgD;CACjD,CAAC,IAAI,CAAC,GAAG,CAAC,CACZ,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU,eAAe,CAC7C;IACE,MAAM,EAAE,iBAAiB;IACzB,UAAU,EAAE;QACV,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;QAC3B,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkCf,CAAC,IAAI,EAAE;aACC;SACF;KACF;CACF,EACD;IACE,4DAA4D;IAC5D,+DAA+D;IAC/D,sFAAsF;CACvF,CAAC,IAAI,CAAC,GAAG,CAAC,CACZ,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAU,eAAe,CAChD;IACE,MAAM,EAAE,oBAAoB;IAC5B,UAAU,EAAE;QACV,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;QAC3B,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;;;;CAwBf,CAAC,IAAI,EAAE;aACC;SACF;KACF;CACF,EACD;IACE,qEAAqE;IACrE,2GAA2G;IAC3G,yDAAyD;CAC1D,CAAC,IAAI,CAAC,GAAG,CAAC,CACZ,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAU,eAAe,CAChD;IACE,MAAM,EAAE,oBAAoB;IAC5B,UAAU,EAAE;QACV,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;QAC3B,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;;;CAuBf,CAAC,IAAI,EAAE;aACC;SACF;KACF;CACF,EACD;IACE,gFAAgF;IAChF,oFAAoF;IACpF,0FAA0F;IAC1F,0CAA0C;CAC3C,CAAC,IAAI,CAAC,GAAG,CAAC,CACZ,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAU,eAAe,CACtD;IACE,MAAM,EAAE,iBAAiB;IACzB,UAAU,EAAE;QACV,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;QAC3B,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4Bf,CAAC,IAAI,EAAE;aACC;SACF;KACF;CACF,EACD;IACE,yDAAyD;IACzD,qGAAqG;IACrG,wGAAwG;CACzG,CAAC,IAAI,CAAC,GAAG,CAAC,CACZ,CAAC"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import type { StoryObj } from '@storybook/react-vite';
|
|
2
2
|
import { allowedIcons } from '../icon/allowedIcons';
|
|
3
|
+
declare function TabsItemDocsPage(): import("react/jsx-runtime").JSX.Element;
|
|
3
4
|
declare const meta: {
|
|
4
5
|
title: string;
|
|
5
6
|
component: (props: {
|
|
@@ -12,6 +13,7 @@ declare const meta: {
|
|
|
12
13
|
tabElement?: "link";
|
|
13
14
|
tabElementProps?: import("react").AnchorHTMLAttributes<HTMLAnchorElement>;
|
|
14
15
|
}) & import("react").HTMLAttributes<HTMLLIElement>)) => import("react/jsx-runtime").JSX.Element;
|
|
16
|
+
tags: string[];
|
|
15
17
|
decorators: ((Story: import("storybook/internal/csf").PartialStoryFn<import("@storybook/react-vite").ReactRenderer, {
|
|
16
18
|
active?: boolean | undefined;
|
|
17
19
|
iconName?: keyof typeof allowedIcons | undefined;
|
|
@@ -585,30 +587,81 @@ declare const meta: {
|
|
|
585
587
|
}>) => import("react/jsx-runtime").JSX.Element)[];
|
|
586
588
|
parameters: {
|
|
587
589
|
layout: string;
|
|
590
|
+
docs: {
|
|
591
|
+
page: typeof TabsItemDocsPage;
|
|
592
|
+
};
|
|
588
593
|
};
|
|
589
|
-
tags: string[];
|
|
590
594
|
argTypes: {
|
|
591
595
|
active: {
|
|
592
596
|
control: "boolean";
|
|
593
597
|
description: string;
|
|
598
|
+
table: {
|
|
599
|
+
type: {
|
|
600
|
+
summary: string;
|
|
601
|
+
};
|
|
602
|
+
defaultValue: {
|
|
603
|
+
summary: string;
|
|
604
|
+
};
|
|
605
|
+
};
|
|
594
606
|
};
|
|
595
607
|
tabElement: {
|
|
596
608
|
control: "select";
|
|
597
609
|
options: string[];
|
|
598
610
|
description: string;
|
|
611
|
+
table: {
|
|
612
|
+
type: {
|
|
613
|
+
summary: string;
|
|
614
|
+
};
|
|
615
|
+
defaultValue: {
|
|
616
|
+
summary: string;
|
|
617
|
+
};
|
|
618
|
+
};
|
|
619
|
+
};
|
|
620
|
+
tabElementProps: {
|
|
621
|
+
control: false;
|
|
622
|
+
description: string;
|
|
623
|
+
table: {
|
|
624
|
+
type: {
|
|
625
|
+
summary: string;
|
|
626
|
+
};
|
|
627
|
+
defaultValue: {
|
|
628
|
+
summary: string;
|
|
629
|
+
};
|
|
630
|
+
};
|
|
599
631
|
};
|
|
600
632
|
iconName: {
|
|
601
633
|
control: "select";
|
|
602
634
|
options: string[];
|
|
603
635
|
description: string;
|
|
636
|
+
table: {
|
|
637
|
+
type: {
|
|
638
|
+
summary: string;
|
|
639
|
+
};
|
|
640
|
+
defaultValue: {
|
|
641
|
+
summary: string;
|
|
642
|
+
};
|
|
643
|
+
};
|
|
604
644
|
};
|
|
605
645
|
children: {
|
|
606
646
|
control: "text";
|
|
607
647
|
description: string;
|
|
648
|
+
table: {
|
|
649
|
+
type: {
|
|
650
|
+
summary: string;
|
|
651
|
+
};
|
|
652
|
+
};
|
|
608
653
|
};
|
|
609
654
|
className: {
|
|
610
655
|
control: "text";
|
|
611
656
|
description: string;
|
|
657
|
+
table: {
|
|
658
|
+
type: {
|
|
659
|
+
summary: string;
|
|
660
|
+
};
|
|
661
|
+
defaultValue: {
|
|
662
|
+
summary: string;
|
|
663
|
+
};
|
|
664
|
+
};
|
|
612
665
|
};
|
|
613
666
|
};
|
|
614
667
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabsItem.stories.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/TabsItem.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"TabsItem.stories.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/TabsItem.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAW5D,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAM5D,iBAAS,gBAAgB,4CAmBxB;AAMD,QAAA,MAAM,IAAI;;;;yBA/Be,mBAAoB;;;;;;;;;;;yBAApB,mBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yBAApB,mBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2GZ,CAAC;AAElC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC"}
|