@arbor-education/design-system.components 0.14.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 +27 -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/number/NumberInput.d.ts.map +1 -1
- package/dist/components/formField/inputs/number/NumberInput.js +14 -2
- package/dist/components/formField/inputs/number/NumberInput.js.map +1 -1
- package/dist/components/formField/inputs/number/NumberInput.test.js +21 -0
- package/dist/components/formField/inputs/number/NumberInput.test.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 +7 -1
- package/dist/components/table/Table.d.ts.map +1 -1
- package/dist/components/table/Table.js +12 -5
- package/dist/components/table/Table.js.map +1 -1
- package/dist/components/table/Table.stories.d.ts +3 -0
- package/dist/components/table/Table.stories.d.ts.map +1 -1
- package/dist/components/table/Table.stories.js +445 -3
- package/dist/components/table/Table.stories.js.map +1 -1
- package/dist/components/table/Table.test.js +184 -0
- package/dist/components/table/Table.test.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/cellEditors/NumberCellEditor.d.ts +13 -0
- package/dist/components/table/cellEditors/NumberCellEditor.d.ts.map +1 -0
- package/dist/components/table/cellEditors/NumberCellEditor.js +35 -0
- package/dist/components/table/cellEditors/NumberCellEditor.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 +27 -0
- package/dist/index.css.map +1 -1
- package/dist/index.d.ts +3 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +3 -2
- package/dist/index.js.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/number/NumberInput.test.tsx +28 -0
- package/src/components/formField/inputs/number/NumberInput.tsx +15 -0
- 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 +504 -3
- package/src/components/table/Table.test.tsx +255 -0
- package/src/components/table/Table.tsx +15 -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/cellEditors/NumberCellEditor.tsx +83 -0
- package/src/components/table/cellEditors/numberCellEditor.scss +11 -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/table.scss +11 -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/index.scss +1 -0
- package/src/index.ts +3 -2
- 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,102 +1,398 @@
|
|
|
1
|
-
import { jsx as _jsx,
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Heading as DocHeading, Markdown, Stories, Subtitle, Title, } from '@storybook/addon-docs/blocks';
|
|
2
3
|
import { SlideoverManager } from './SlideoverManager';
|
|
3
4
|
import { SlideoverUtils } from '../../utils/SlideoverUtils';
|
|
4
5
|
import { Button } from '../button/Button';
|
|
5
|
-
import { Section } from '../section/Section';
|
|
6
6
|
import { FormField } from '../formField/FormField';
|
|
7
|
-
import {
|
|
8
|
-
|
|
7
|
+
import { Section } from '../section/Section';
|
|
8
|
+
// ---------------------------------------------------------------------------
|
|
9
|
+
// Docs page content
|
|
10
|
+
// ---------------------------------------------------------------------------
|
|
11
|
+
const DESCRIPTION_INTRO = [
|
|
12
|
+
'`SlideoverManager` is a container that manages a **stack** of slideover panels.',
|
|
13
|
+
'Mount it once near the root of your application and push slideovers onto the stack via `SlideoverUtils.addSlideover()`.',
|
|
14
|
+
'The built-in **Back** button pops the top panel, enabling drill-down navigation patterns.',
|
|
15
|
+
].join(' ');
|
|
16
|
+
const USAGE_GUIDANCE = [
|
|
17
|
+
'### When to use',
|
|
18
|
+
'',
|
|
19
|
+
'- **Editing a record** while keeping the parent list visible in context',
|
|
20
|
+
'- **Detail panels** — viewing supplementary information without a full-page navigation',
|
|
21
|
+
'- **Drill-down flows** — e.g. Pupil → Assessments → Edit Assessment (stacked panels)',
|
|
22
|
+
'',
|
|
23
|
+
'---',
|
|
24
|
+
'',
|
|
25
|
+
'### When NOT to use',
|
|
26
|
+
'',
|
|
27
|
+
'| Situation | Use instead |',
|
|
28
|
+
'|---|---|',
|
|
29
|
+
'| A short confirmation or irreversible action | [`Modal`](?path=/docs/components-modals-modal--docs) — modals are better for blocking decisions |',
|
|
30
|
+
'| Navigation to a distinct page/route | Standard page navigation |',
|
|
31
|
+
'| A floating menu or dropdown | [`Dropdown`](?path=/docs/components-dropdown--docs) |',
|
|
32
|
+
'',
|
|
33
|
+
'---',
|
|
34
|
+
'',
|
|
35
|
+
'### `SlideoverProps` — what goes inside each panel',
|
|
36
|
+
'',
|
|
37
|
+
'| Prop | Type | Default | Description |',
|
|
38
|
+
'|---|---|---|---|',
|
|
39
|
+
'| `title` | `string` | — | Header title text |',
|
|
40
|
+
'| `children` | `ReactNode` | — | Main scrollable content |',
|
|
41
|
+
'| `footerContents` | `ReactNode` | — | Sticky footer — use for primary actions (Save / Cancel) |',
|
|
42
|
+
'| `headerIcon` | `IconName` | — | Icon rendered next to the title |',
|
|
43
|
+
'| `centerHeaderText` | `boolean` | `true` | Whether the header text is centred |',
|
|
44
|
+
'| `hideBackButton` | `boolean` | — | Hides the Back chevron button in the header |',
|
|
45
|
+
'',
|
|
46
|
+
'---',
|
|
47
|
+
'',
|
|
48
|
+
'### `SlideoverManager` props',
|
|
49
|
+
'',
|
|
50
|
+
'| Prop | Type | Default | Description |',
|
|
51
|
+
'|---|---|---|---|',
|
|
52
|
+
'| `slideovers` | `SlideoverProps[]` | — | Initial stack of slideovers to mount pre-opened |',
|
|
53
|
+
].join('\n');
|
|
54
|
+
const DEVELOPER_NOTES = [
|
|
55
|
+
'### Setup — mount once at the app root',
|
|
56
|
+
'',
|
|
57
|
+
'`SlideoverManager` must be mounted **once** near the root of your application.',
|
|
58
|
+
'It subscribes to global PubSub events — mounting multiple instances means all receive the same events,',
|
|
59
|
+
'causing duplicate slideovers.',
|
|
60
|
+
'',
|
|
61
|
+
'```tsx',
|
|
62
|
+
'// App root',
|
|
63
|
+
'function App() {',
|
|
64
|
+
' return (',
|
|
65
|
+
' <div>',
|
|
66
|
+
' <SlideoverManager slideovers={[]} />',
|
|
67
|
+
' <YourRouter />',
|
|
68
|
+
' </div>',
|
|
69
|
+
' );',
|
|
70
|
+
'}',
|
|
71
|
+
'```',
|
|
72
|
+
'',
|
|
73
|
+
'---',
|
|
74
|
+
'',
|
|
75
|
+
'### Pushing and popping slideovers',
|
|
76
|
+
'',
|
|
77
|
+
'```ts',
|
|
78
|
+
"import { SlideoverUtils } from '@arbor-education/design-system.components';",
|
|
79
|
+
'',
|
|
80
|
+
'// Push a new panel onto the stack',
|
|
81
|
+
'SlideoverUtils.addSlideover({',
|
|
82
|
+
" title: 'Edit Pupil',",
|
|
83
|
+
' children: <EditPupilForm />,',
|
|
84
|
+
' footerContents: (',
|
|
85
|
+
' <>',
|
|
86
|
+
' <Button variant="secondary" onClick={SlideoverUtils.removeSlideover}>Cancel</Button>',
|
|
87
|
+
' <Button onClick={handleSave}>Save</Button>',
|
|
88
|
+
' </>',
|
|
89
|
+
' ),',
|
|
90
|
+
'});',
|
|
91
|
+
'',
|
|
92
|
+
'// Pop the top panel',
|
|
93
|
+
'SlideoverUtils.removeSlideover();',
|
|
94
|
+
'',
|
|
95
|
+
'// Clear the entire stack',
|
|
96
|
+
'SlideoverUtils.removeAllSlideovers();',
|
|
97
|
+
'```',
|
|
98
|
+
'',
|
|
99
|
+
'---',
|
|
100
|
+
'',
|
|
101
|
+
'### Stacking behaviour',
|
|
102
|
+
'',
|
|
103
|
+
'Each `SlideoverUtils.addSlideover()` call pushes a new panel on top of the current one.',
|
|
104
|
+
'The **Back** button (rendered automatically in each header) calls `SlideoverUtils.removeSlideover()` to pop the top panel.',
|
|
105
|
+
'Set `hideBackButton={true}` on panels that should not allow the user to go back — use your own close action instead.',
|
|
106
|
+
'',
|
|
107
|
+
'---',
|
|
108
|
+
'',
|
|
109
|
+
'### Accessibility',
|
|
110
|
+
'',
|
|
111
|
+
'- The overlay dims the background and traps focus inside the active slideover panel.',
|
|
112
|
+
'- The Back button is keyboard accessible and labelled.',
|
|
113
|
+
'- Ensure the `title` prop is always set — it is the visible and accessible heading for the panel.',
|
|
114
|
+
].join('\n');
|
|
115
|
+
const RELATED_COMPONENTS = [
|
|
116
|
+
'## Related components',
|
|
117
|
+
'',
|
|
118
|
+
'[Modal](?path=/docs/components-modals-modal--docs) · [ModalManager](?path=/docs/components-modals-modalmanager--docs) · [Section](?path=/docs/components-section--docs) · [Button](?path=/docs/components-button--docs)',
|
|
119
|
+
].join('\n');
|
|
120
|
+
// ---------------------------------------------------------------------------
|
|
121
|
+
// Docs page
|
|
122
|
+
// ---------------------------------------------------------------------------
|
|
123
|
+
function SlideoverManagerDocsPage() {
|
|
124
|
+
return (_jsxs(_Fragment, { children: [_jsx(Title, {}), _jsx(Subtitle, {}), _jsx(Markdown, { children: DESCRIPTION_INTRO }), _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 })] }));
|
|
125
|
+
}
|
|
126
|
+
// ---------------------------------------------------------------------------
|
|
127
|
+
// Meta
|
|
128
|
+
// ---------------------------------------------------------------------------
|
|
9
129
|
const meta = {
|
|
10
130
|
title: 'Components/SlideoverManager',
|
|
131
|
+
component: SlideoverManager,
|
|
132
|
+
tags: ['autodocs'],
|
|
11
133
|
parameters: {
|
|
12
134
|
layout: 'fullscreen',
|
|
135
|
+
docs: {
|
|
136
|
+
page: SlideoverManagerDocsPage,
|
|
137
|
+
},
|
|
13
138
|
},
|
|
14
139
|
argTypes: {
|
|
15
|
-
|
|
16
|
-
control:
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
description: 'Whether to center the header text',
|
|
140
|
+
slideovers: {
|
|
141
|
+
control: false,
|
|
142
|
+
description: 'Initial stack of `SlideoverProps` to display on mount. Pass `[]` for the standard programmatic use case.',
|
|
143
|
+
table: {
|
|
144
|
+
type: { summary: 'SlideoverProps[]' },
|
|
145
|
+
defaultValue: { summary: '[]' },
|
|
146
|
+
},
|
|
23
147
|
},
|
|
24
148
|
},
|
|
25
|
-
args: {
|
|
26
|
-
centerHeaderText: true,
|
|
27
|
-
},
|
|
28
|
-
decorators: [
|
|
29
|
-
Story => (_jsxs("div", { children: [_jsx(Story, {}), _jsxs("div", { style: { padding: '1rem' }, children: [_jsx("p", { children: "The SlideoverManager is a container that manages the display of slideovers. It listens for events to add or remove slideovers." }), _jsx("p", { children: "Use the buttons below to add slideovers with different content." })] })] })),
|
|
30
|
-
],
|
|
31
149
|
};
|
|
32
150
|
export default meta;
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
}
|
|
47
|
-
SlideoverUtils.removeSlideover();
|
|
48
|
-
};
|
|
49
|
-
const removeAllSlideovers = () => {
|
|
50
|
-
slideoverCount = 0;
|
|
51
|
-
SlideoverUtils.removeAllSlideovers();
|
|
52
|
-
};
|
|
53
|
-
export const Default = {
|
|
54
|
-
render: args => (_jsxs(_Fragment, { children: [_jsx(SlideoverManager, { slideovers: [] }), _jsxs("div", { style: { padding: '1rem', display: 'flex', gap: '1rem' }, children: [_jsx(Button, { onClick: () => addSlideoverWithContent(_jsx("p", { children: "This is a simple slideover." }), args.headerIcon, args.centerHeaderText), children: "Add Simple Slideover" }), _jsx(Button, { onClick: removeSlideover, variant: "secondary", children: "Remove Last Slideover" }), _jsx(Button, { onClick: removeAllSlideovers, variant: "primary-destructive", children: "Remove All" })] })] })),
|
|
55
|
-
};
|
|
56
|
-
export const WithSections = {
|
|
57
|
-
render: args => (_jsxs(_Fragment, { children: [_jsx(SlideoverManager, { slideovers: [] }), _jsxs("div", { style: { padding: '1rem', display: 'flex', gap: '1rem' }, children: [_jsx(Button, { onClick: () => addSlideoverWithContent(_jsxs(_Fragment, { children: [_jsx(Section, { title: "Section 1", collapsible: true, children: _jsx("p", { children: "Aliquip ea tempor officia irure do qui culpa. Laborum proident laboris aliqua ad Lorem eiusmod fugiat dolore qui occaecat adipisicing. Dolore quis nisi occaecat commodo labore ad nulla aliquip in. Enim labore nisi laborum nostrud officia ad nulla ut quis. Aute excepteur quis amet aliquip. Excepteur Lorem cupidatat adipisicing consectetur ipsum Lorem. Deserunt dolor veniam sit mollit elit aliquip duis." }) }), _jsx(Section, { title: "Section 2", collapsible: true, collapsed: true, children: _jsx("p", { children: "Veniam adipisicing culpa id esse duis in officia consequat veniam ad ullamco sint sunt anim. Incididunt exercitation dolor Lorem anim aute ad deserunt. Nulla culpa sint aliqua ea Lorem sint. Elit sit consectetur minim cillum consectetur pariatur Lorem labore consectetur nisi consectetur officia exercitation. Est consectetur commodo deserunt ipsum aliqua occaecat qui sunt consectetur." }) })] }), args.headerIcon, args.centerHeaderText), children: "Add Slideover with Sections" }), _jsx(Button, { onClick: removeSlideover, variant: "secondary", children: "Remove Last Slideover" }), _jsx(Button, { onClick: removeAllSlideovers, variant: "primary-destructive", children: "Remove All" })] })] })),
|
|
58
|
-
};
|
|
59
|
-
export const WithFormFields = {
|
|
60
|
-
render: (args) => {
|
|
61
|
-
const formFieldId = generateUuid();
|
|
62
|
-
return (_jsxs(_Fragment, { children: [_jsx(SlideoverManager, { slideovers: [] }), _jsxs("div", { style: { padding: '1rem', display: 'flex', gap: '1rem' }, children: [_jsx(Button, { onClick: () => addSlideoverWithContent(_jsx(_Fragment, { children: _jsx(FormField, { id: formFieldId, label: "Your Name", inputType: "text", inputProps: { placeholder: 'e.g. Jane Doe' }, fieldDescription: "Please enter your full name." }) }), args.headerIcon, args.centerHeaderText), children: "Add Slideover with Form" }), _jsx(Button, { onClick: removeSlideover, variant: "secondary", children: "Remove Last Slideover" }), _jsx(Button, { onClick: removeAllSlideovers, variant: "primary-destructive", children: "Remove All" })] })] }));
|
|
151
|
+
// ---------------------------------------------------------------------------
|
|
152
|
+
// Helper
|
|
153
|
+
// ---------------------------------------------------------------------------
|
|
154
|
+
const withDescription = (story, description) => ({
|
|
155
|
+
...story,
|
|
156
|
+
parameters: {
|
|
157
|
+
...story.parameters,
|
|
158
|
+
docs: {
|
|
159
|
+
...story.parameters?.docs,
|
|
160
|
+
description: {
|
|
161
|
+
story: description,
|
|
162
|
+
},
|
|
163
|
+
},
|
|
63
164
|
},
|
|
64
|
-
};
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
165
|
+
});
|
|
166
|
+
// ---------------------------------------------------------------------------
|
|
167
|
+
// Page wrapper used in all templates
|
|
168
|
+
// ---------------------------------------------------------------------------
|
|
169
|
+
const PageBackground = ({ children }) => (_jsxs("div", { style: { padding: 'var(--spacing-xlarge)', minHeight: '100vh', background: 'var(--color-grey-050)' }, children: [_jsx("h1", { style: { margin: '0 0 var(--spacing-large)', fontSize: 'var(--font-size-5-18)', fontWeight: 600 }, children: "Pupil List" }), _jsx("p", { style: { margin: '0 0 var(--spacing-large)', color: 'var(--color-grey-600)' }, children: "Click the button below to open a slideover panel." }), children] }));
|
|
170
|
+
// ---------------------------------------------------------------------------
|
|
171
|
+
// Templates
|
|
172
|
+
// ---------------------------------------------------------------------------
|
|
173
|
+
const DefaultTemplate = () => (_jsxs(PageBackground, { children: [_jsx(SlideoverManager, { slideovers: [] }), _jsxs("div", { style: { display: 'flex', gap: 'var(--spacing-small)' }, children: [_jsx(Button, { onClick: () => SlideoverUtils.addSlideover({
|
|
174
|
+
title: 'Pupil Record',
|
|
175
|
+
children: (_jsx("p", { children: "Select a pupil from the list to view their record here." })),
|
|
176
|
+
}), children: "Open slideover" }), _jsx(Button, { variant: "secondary", onClick: SlideoverUtils.removeSlideover, children: "Remove last" }), _jsx(Button, { variant: "primary-destructive", onClick: SlideoverUtils.removeAllSlideovers, children: "Close all" })] })] }));
|
|
177
|
+
const WithFooterActionsTemplate = () => (_jsxs(PageBackground, { children: [_jsx(SlideoverManager, { slideovers: [] }), _jsx(Button, { onClick: () => SlideoverUtils.addSlideover({
|
|
178
|
+
title: 'Edit Pupil Details',
|
|
179
|
+
children: (_jsxs(Section, { title: "Personal details", children: [_jsx(FormField, { id: "pupil-name", label: "Full name", inputType: "text", inputProps: { placeholder: 'e.g. Alex Johnson', defaultValue: 'Alex Johnson' } }), _jsx(FormField, { id: "pupil-dob", label: "Date of birth", inputType: "text", inputProps: { placeholder: 'DD/MM/YYYY', defaultValue: '12/03/2015' } }), _jsx(FormField, { id: "pupil-year", label: "Year group", inputType: "text", inputProps: { defaultValue: 'Year 5' } })] })),
|
|
180
|
+
footerContents: (_jsxs("div", { style: { display: 'flex', gap: 'var(--spacing-small)', justifyContent: 'flex-end' }, children: [_jsx(Button, { variant: "secondary", onClick: SlideoverUtils.removeSlideover, children: "Cancel" }), _jsx(Button, { onClick: SlideoverUtils.removeSlideover, children: "Save changes" })] })),
|
|
181
|
+
}), children: "Edit pupil details" })] }));
|
|
182
|
+
const StackedSlideoverTemplate = () => (_jsxs(PageBackground, { children: [_jsx(SlideoverManager, { slideovers: [] }), _jsx(Button, { onClick: () => SlideoverUtils.addSlideover({
|
|
183
|
+
title: 'Pupil: Alex Johnson',
|
|
184
|
+
children: (_jsxs(Section, { title: "Assessments", children: [_jsx("p", { style: { margin: '0 0 var(--spacing-medium)' }, children: "3 assessments recorded this term." }), _jsx(Button, { variant: "secondary", onClick: () => SlideoverUtils.addSlideover({
|
|
185
|
+
title: 'Edit Assessment',
|
|
186
|
+
children: (_jsxs(_Fragment, { children: [_jsx(FormField, { id: "assessment-name", label: "Assessment name", inputType: "text", inputProps: { defaultValue: 'Autumn Reading Assessment' } }), _jsx(FormField, { id: "assessment-score", label: "Score", inputType: "number", inputProps: { defaultValue: '78', min: 0, max: 100 } }), _jsx(FormField, { id: "assessment-notes", label: "Notes", inputType: "textarea", inputProps: { placeholder: 'Add a note…' } })] })),
|
|
187
|
+
footerContents: (_jsxs("div", { style: { display: 'flex', gap: 'var(--spacing-small)', justifyContent: 'flex-end' }, children: [_jsx(Button, { variant: "secondary", onClick: SlideoverUtils.removeSlideover, children: "Cancel" }), _jsx(Button, { onClick: SlideoverUtils.removeSlideover, children: "Save" })] })),
|
|
188
|
+
}), children: "Edit latest assessment" })] })),
|
|
189
|
+
}), children: "View pupil record" })] }));
|
|
190
|
+
const HideBackButtonTemplate = () => (_jsxs(PageBackground, { children: [_jsx(SlideoverManager, { slideovers: [] }), _jsx(Button, { onClick: () => SlideoverUtils.addSlideover({
|
|
191
|
+
title: 'Confirm deletion',
|
|
192
|
+
hideBackButton: true,
|
|
193
|
+
children: (_jsxs("p", { children: ["Are you sure you want to remove", ' ', _jsx("strong", { children: "Alex Johnson" }), ' ', "from Year 5? This cannot be undone."] })),
|
|
194
|
+
footerContents: (_jsxs("div", { style: { display: 'flex', gap: 'var(--spacing-small)', justifyContent: 'flex-end' }, children: [_jsx(Button, { variant: "secondary", onClick: SlideoverUtils.removeSlideover, children: "Cancel" }), _jsx(Button, { variant: "primary-destructive", onClick: SlideoverUtils.removeSlideover, children: "Remove pupil" })] })),
|
|
195
|
+
}), children: "Remove pupil" })] }));
|
|
196
|
+
// ---------------------------------------------------------------------------
|
|
197
|
+
// Stories
|
|
198
|
+
// ---------------------------------------------------------------------------
|
|
199
|
+
export const Default = withDescription({
|
|
200
|
+
render: DefaultTemplate,
|
|
201
|
+
parameters: {
|
|
202
|
+
controls: { disable: true },
|
|
203
|
+
docs: {
|
|
204
|
+
source: {
|
|
205
|
+
language: 'tsx',
|
|
206
|
+
code: `
|
|
207
|
+
import { SlideoverManager, SlideoverUtils } from '@arbor-education/design-system.components';
|
|
208
|
+
|
|
209
|
+
// Mount SlideoverManager once near your app root.
|
|
210
|
+
// Then call SlideoverUtils.addSlideover() from anywhere in the tree.
|
|
211
|
+
function AppRoot() {
|
|
212
|
+
return (
|
|
213
|
+
<div>
|
|
214
|
+
<SlideoverManager slideovers={[]} />
|
|
215
|
+
<main>
|
|
216
|
+
<button
|
|
217
|
+
type="button"
|
|
218
|
+
onClick={() =>
|
|
219
|
+
SlideoverUtils.addSlideover({
|
|
220
|
+
title: 'Pupil Record',
|
|
221
|
+
children: <p>Pupil details go here.</p>,
|
|
222
|
+
})
|
|
223
|
+
}
|
|
224
|
+
>
|
|
225
|
+
Open slideover
|
|
226
|
+
</button>
|
|
227
|
+
</main>
|
|
228
|
+
</div>
|
|
229
|
+
);
|
|
230
|
+
}
|
|
231
|
+
export default AppRoot;
|
|
232
|
+
`.trim(),
|
|
233
|
+
},
|
|
234
|
+
},
|
|
85
235
|
},
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
236
|
+
}, [
|
|
237
|
+
'Mount `SlideoverManager` once near the root of your application.',
|
|
238
|
+
'Then call `SlideoverUtils.addSlideover()` from anywhere — event handlers, Redux actions, or any component in the tree.',
|
|
239
|
+
'The **Back** button in the panel header calls `SlideoverUtils.removeSlideover()` automatically.',
|
|
240
|
+
].join(' '));
|
|
241
|
+
export const WithFooterActions = withDescription({
|
|
242
|
+
render: WithFooterActionsTemplate,
|
|
243
|
+
parameters: {
|
|
244
|
+
controls: { disable: true },
|
|
245
|
+
docs: {
|
|
246
|
+
source: {
|
|
247
|
+
language: 'tsx',
|
|
248
|
+
code: `
|
|
249
|
+
import { Button, FormField, Section, SlideoverManager, SlideoverUtils } from '@arbor-education/design-system.components';
|
|
250
|
+
|
|
251
|
+
function EditPupilButton() {
|
|
252
|
+
return (
|
|
253
|
+
<>
|
|
254
|
+
<SlideoverManager slideovers={[]} />
|
|
255
|
+
<Button
|
|
256
|
+
onClick={() =>
|
|
257
|
+
SlideoverUtils.addSlideover({
|
|
258
|
+
title: 'Edit Pupil Details',
|
|
259
|
+
children: (
|
|
260
|
+
<Section title="Personal details">
|
|
261
|
+
<FormField id="pupil-name" label="Full name" inputType="text" inputProps={{ placeholder: 'e.g. Alex Johnson' }} />
|
|
262
|
+
<FormField id="pupil-dob" label="Date of birth" inputType="text" inputProps={{ placeholder: 'DD/MM/YYYY' }} />
|
|
263
|
+
</Section>
|
|
264
|
+
),
|
|
265
|
+
footerContents: (
|
|
266
|
+
<div style={{ display: 'flex', gap: 'var(--spacing-small)', justifyContent: 'flex-end' }}>
|
|
267
|
+
<Button variant="secondary" onClick={SlideoverUtils.removeSlideover}>
|
|
268
|
+
Cancel
|
|
269
|
+
</Button>
|
|
270
|
+
<Button onClick={() => { /* save logic */ SlideoverUtils.removeSlideover(); }}>
|
|
271
|
+
Save changes
|
|
272
|
+
</Button>
|
|
273
|
+
</div>
|
|
274
|
+
),
|
|
275
|
+
})
|
|
276
|
+
}
|
|
277
|
+
>
|
|
278
|
+
Edit pupil details
|
|
279
|
+
</Button>
|
|
280
|
+
</>
|
|
281
|
+
);
|
|
282
|
+
}
|
|
283
|
+
export default EditPupilButton;
|
|
284
|
+
`.trim(),
|
|
285
|
+
},
|
|
286
|
+
},
|
|
100
287
|
},
|
|
101
|
-
}
|
|
288
|
+
}, [
|
|
289
|
+
'Pass `footerContents` to render a sticky footer with action buttons.',
|
|
290
|
+
'Use `SlideoverUtils.removeSlideover()` in your Save and Cancel handlers to close the panel after the action completes.',
|
|
291
|
+
].join(' '));
|
|
292
|
+
export const StackedSlideovers = withDescription({
|
|
293
|
+
render: StackedSlideoverTemplate,
|
|
294
|
+
parameters: {
|
|
295
|
+
controls: { disable: true },
|
|
296
|
+
docs: {
|
|
297
|
+
source: {
|
|
298
|
+
language: 'tsx',
|
|
299
|
+
code: `
|
|
300
|
+
import { Button, FormField, Section, SlideoverManager, SlideoverUtils } from '@arbor-education/design-system.components';
|
|
301
|
+
|
|
302
|
+
// Each addSlideover() call stacks a new panel on top.
|
|
303
|
+
// The Back button in each header pops the top panel.
|
|
304
|
+
function PupilDrillDown() {
|
|
305
|
+
return (
|
|
306
|
+
<>
|
|
307
|
+
<SlideoverManager slideovers={[]} />
|
|
308
|
+
<Button
|
|
309
|
+
onClick={() =>
|
|
310
|
+
SlideoverUtils.addSlideover({
|
|
311
|
+
title: 'Pupil: Alex Johnson',
|
|
312
|
+
children: (
|
|
313
|
+
<Section title="Assessments">
|
|
314
|
+
<Button
|
|
315
|
+
variant="secondary"
|
|
316
|
+
onClick={() =>
|
|
317
|
+
SlideoverUtils.addSlideover({
|
|
318
|
+
title: 'Edit Assessment',
|
|
319
|
+
children: (
|
|
320
|
+
<FormField id="score" label="Score" inputType="number" inputProps={{ defaultValue: '78' }} />
|
|
321
|
+
),
|
|
322
|
+
footerContents: (
|
|
323
|
+
<Button onClick={SlideoverUtils.removeSlideover}>Save</Button>
|
|
324
|
+
),
|
|
325
|
+
})
|
|
326
|
+
}
|
|
327
|
+
>
|
|
328
|
+
Edit latest assessment
|
|
329
|
+
</Button>
|
|
330
|
+
</Section>
|
|
331
|
+
),
|
|
332
|
+
})
|
|
333
|
+
}
|
|
334
|
+
>
|
|
335
|
+
View pupil record
|
|
336
|
+
</Button>
|
|
337
|
+
</>
|
|
338
|
+
);
|
|
339
|
+
}
|
|
340
|
+
export default PupilDrillDown;
|
|
341
|
+
`.trim(),
|
|
342
|
+
},
|
|
343
|
+
},
|
|
344
|
+
},
|
|
345
|
+
}, [
|
|
346
|
+
'Each `SlideoverUtils.addSlideover()` call stacks a new panel on top of the current one.',
|
|
347
|
+
'The user can drill down through related records and navigate back with the **Back** button.',
|
|
348
|
+
'This is the primary pattern for Pupil → Assessment → Edit flows in Arbor.',
|
|
349
|
+
].join(' '));
|
|
350
|
+
export const HideBackButton = withDescription({
|
|
351
|
+
render: HideBackButtonTemplate,
|
|
352
|
+
parameters: {
|
|
353
|
+
controls: { disable: true },
|
|
354
|
+
docs: {
|
|
355
|
+
source: {
|
|
356
|
+
language: 'tsx',
|
|
357
|
+
code: `
|
|
358
|
+
import { Button, SlideoverManager, SlideoverUtils } from '@arbor-education/design-system.components';
|
|
359
|
+
|
|
360
|
+
// hideBackButton prevents the user navigating back — use when the action must be
|
|
361
|
+
// explicitly confirmed or cancelled, not dismissed by accident.
|
|
362
|
+
function RemovePupilButton() {
|
|
363
|
+
return (
|
|
364
|
+
<>
|
|
365
|
+
<SlideoverManager slideovers={[]} />
|
|
366
|
+
<Button
|
|
367
|
+
variant="primary-destructive"
|
|
368
|
+
onClick={() =>
|
|
369
|
+
SlideoverUtils.addSlideover({
|
|
370
|
+
title: 'Confirm deletion',
|
|
371
|
+
hideBackButton: true,
|
|
372
|
+
children: (
|
|
373
|
+
<p>Are you sure you want to remove Alex Johnson from Year 5?</p>
|
|
374
|
+
),
|
|
375
|
+
footerContents: (
|
|
376
|
+
<div style={{ display: 'flex', gap: 'var(--spacing-small)', justifyContent: 'flex-end' }}>
|
|
377
|
+
<Button variant="secondary" onClick={SlideoverUtils.removeSlideover}>Cancel</Button>
|
|
378
|
+
<Button variant="primary-destructive" onClick={SlideoverUtils.removeSlideover}>Remove pupil</Button>
|
|
379
|
+
</div>
|
|
380
|
+
),
|
|
381
|
+
})
|
|
382
|
+
}
|
|
383
|
+
>
|
|
384
|
+
Remove pupil
|
|
385
|
+
</Button>
|
|
386
|
+
</>
|
|
387
|
+
);
|
|
388
|
+
}
|
|
389
|
+
export default RemovePupilButton;
|
|
390
|
+
`.trim(),
|
|
391
|
+
},
|
|
392
|
+
},
|
|
393
|
+
},
|
|
394
|
+
}, [
|
|
395
|
+
'Set `hideBackButton={true}` when the panel represents an action the user must explicitly confirm or cancel.',
|
|
396
|
+
'Without a Back button, the user must interact with the footer actions — reducing accidental dismissal.',
|
|
397
|
+
].join(' '));
|
|
102
398
|
//# sourceMappingURL=SlideoverManager.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SlideoverManager.stories.js","sourceRoot":"","sources":["../../../src/components/slideoverManager/SlideoverManager.stories.tsx"],"names":[],"mappings":";AACA,OAAO,
|
|
1
|
+
{"version":3,"file":"SlideoverManager.stories.js","sourceRoot":"","sources":["../../../src/components/slideoverManager/SlideoverManager.stories.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DSDefaultColDef.d.ts","sourceRoot":"","sources":["../../../src/components/table/DSDefaultColDef.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"DSDefaultColDef.d.ts","sourceRoot":"","sources":["../../../src/components/table/DSDefaultColDef.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,eAAe,EACf,iBAAiB,EACjB,MAAM,EACN,gCAAgC,EAChC,kBAAkB,EACnB,MAAM,mBAAmB,CAAC;AAQ3B,eAAO,MAAM,qBAAqB,EAAE,kBAOnC,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAC9B,QACI,gCAAgC,GAChC,eAAe,GACf,iBAAiB,QAStB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,MAgD7B,CAAC"}
|
|
@@ -14,12 +14,13 @@ export const shouldSuppressFocus = (params) => {
|
|
|
14
14
|
if (typeof params.column !== 'object') {
|
|
15
15
|
return false;
|
|
16
16
|
}
|
|
17
|
-
return params.column?.getColDef()
|
|
17
|
+
return (params.column?.getColDef()?.cellRendererParams
|
|
18
|
+
?.suppressCellFocusAndFocusFirstElement ?? false);
|
|
18
19
|
};
|
|
19
20
|
export const DSDefaultColDef = {
|
|
20
21
|
cellStyle: cellColorStyles,
|
|
21
22
|
valueGetter: (params) => {
|
|
22
|
-
const { data, colDef: { field } } = params;
|
|
23
|
+
const { data, colDef: { field }, } = params;
|
|
23
24
|
if (data == null || field == null) {
|
|
24
25
|
return undefined;
|
|
25
26
|
}
|
|
@@ -27,7 +28,7 @@ export const DSDefaultColDef = {
|
|
|
27
28
|
},
|
|
28
29
|
valueFormatter: defaultValueFormatter,
|
|
29
30
|
filterValueGetter: (params) => {
|
|
30
|
-
const { data, colDef: { field } } = params;
|
|
31
|
+
const { data, colDef: { field }, } = params;
|
|
31
32
|
if (data == null || field == null) {
|
|
32
33
|
return undefined;
|
|
33
34
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DSDefaultColDef.js","sourceRoot":"","sources":["../../../src/components/table/DSDefaultColDef.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"DSDefaultColDef.js","sourceRoot":"","sources":["../../../src/components/table/DSDefaultColDef.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEpD,mEAAmE;AACnE,MAAM,cAAc,GAAG,CAAC,KAAc,EAA+B,EAAE;IACrE,OAAO,KAAK,IAAI,IAAI,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,OAAO,IAAI,KAAK,CAAC;AACxE,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAuB,CAAC,MAAM,EAAE,EAAE;IAClE,MAAM,EAAE,KAAK,EAAE,GAAG,MAAM,CAAC;IACzB,IAAI,cAAc,CAAC,KAAK,CAAC,EAAE,CAAC;QAC1B,OAAO,KAAK,CAAC,KAAK,CAAC;IACrB,CAAC;IAED,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,CACjC,MAGqB,EACrB,EAAE;IACF,IAAI,OAAO,MAAM,CAAC,MAAM,KAAK,QAAQ,EAAE,CAAC;QACtC,OAAO,KAAK,CAAC;IACf,CAAC;IACD,OAAO,CACL,MAAM,CAAC,MAAM,EAAE,SAAS,EAAE,EAAE,kBAAkB;QAC5C,EAAE,qCAAqC,IAAI,KAAK,CACnD,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAW;IACrC,SAAS,EAAE,eAAe;IAC1B,WAAW,EAAE,CAAC,MAAM,EAAE,EAAE;QACtB,MAAM,EACJ,IAAI,EACJ,MAAM,EAAE,EAAE,KAAK,EAAE,GAClB,GAAG,MAAM,CAAC;QACX,IAAI,IAAI,IAAI,IAAI,IAAI,KAAK,IAAI,IAAI,EAAE,CAAC;YAClC,OAAO,SAAS,CAAC;QACnB,CAAC;QACD,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC;IACrB,CAAC;IACD,cAAc,EAAE,qBAAqB;IACrC,iBAAiB,EAAE,CAAC,MAAM,EAAE,EAAE;QAC5B,MAAM,EACJ,IAAI,EACJ,MAAM,EAAE,EAAE,KAAK,EAAE,GAClB,GAAG,MAAM,CAAC;QACX,IAAI,IAAI,IAAI,IAAI,IAAI,KAAK,IAAI,IAAI,EAAE,CAAC;YAClC,OAAO,SAAS,CAAC;QACnB,CAAC;QACD,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC;QAC9B,IAAI,cAAc,CAAC,SAAS,CAAC,EAAE,CAAC;YAC9B,OAAO,SAAS,CAAC,KAAK,CAAC;QACzB,CAAC;QACD,OAAO,SAAS,CAAC;IACnB,CAAC;IACD,kBAAkB,EAAE,CAAC,MAAM,EAAE,EAAE;QAC7B,MAAM,EAAE,KAAK,EAAE,GAAG,MAAM,CAAC;QACzB,IAAI,cAAc,CAAC,KAAK,CAAC,EAAE,CAAC;YAC1B,OAAO,KAAK,CAAC,KAAK,CAAC;QACrB,CAAC;QACD,OAAO,KAAK,CAAC;IACf,CAAC;IACD,gBAAgB,EAAE;QAChB,YAAY,EAAE,IAAI;KACnB;IACD,cAAc,EAAE;QACd,gCAAgC,EAAE,mBAAmB;KACtD;IACD,kBAAkB,EAAE;QAClB,0BAA0B,EAAE,CAAC,MAAwC,EAAE,EAAE;YACvE,IAAI,mBAAmB,CAAC,MAAM,CAAC,EAAE,CAAC;gBAChC,OAAO,IAAI,CAAC;YACd,CAAC;YACD,OAAO,KAAK,CAAC;QACf,CAAC;KACF;CACF,CAAC"}
|