@arbor-education/design-system.components 0.15.0 → 0.16.1
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 +23 -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 +3 -0
- package/dist/components/table/Table.stories.d.ts.map +1 -1
- package/dist/components/table/Table.stories.js +384 -5
- package/dist/components/table/Table.stories.js.map +1 -1
- package/dist/components/table/Table.test.js +30 -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/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/HideColumnsDropdown.d.ts.map +1 -1
- package/dist/components/table/tableControls/HideColumnsDropdown.js +9 -3
- package/dist/components/table/tableControls/HideColumnsDropdown.js.map +1 -1
- 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 +460 -5
- package/src/components/table/Table.test.tsx +53 -0
- 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/HideColumnsDropdown.tsx +11 -2
- 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,37 +1,189 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Controls, Heading as DocHeading, Markdown, Primary as DocPrimary, Stories, Subtitle, Title, } from '@storybook/addon-docs/blocks';
|
|
2
3
|
import { useEffect, useState } from 'react';
|
|
3
4
|
import { SearchBar } from './SearchBar';
|
|
5
|
+
// ---------------------------------------------------------------------------
|
|
6
|
+
// Docs page content
|
|
7
|
+
// ---------------------------------------------------------------------------
|
|
8
|
+
const DESCRIPTION_INTRO = [
|
|
9
|
+
'SearchBar is a space-efficient search input that starts collapsed — showing only a search icon or a',
|
|
10
|
+
'short label — and expands into a full text input when clicked. It is designed for use in navigation',
|
|
11
|
+
'bars, table headers, and other space-constrained contexts where search is a secondary action.',
|
|
12
|
+
].join('\n');
|
|
13
|
+
const USAGE_GUIDANCE = [
|
|
14
|
+
'### When to use',
|
|
15
|
+
'',
|
|
16
|
+
'- **Table headers** — filter a data table without dominating the header layout',
|
|
17
|
+
'- **Navigation bars** — compact global search that expands on demand',
|
|
18
|
+
'- **Space-constrained sidebars** — secondary search that should not distract from primary content',
|
|
19
|
+
'- **Any context where search is optional** — consumers can click to open or ignore it entirely',
|
|
20
|
+
'',
|
|
21
|
+
'---',
|
|
22
|
+
'',
|
|
23
|
+
'### When NOT to use',
|
|
24
|
+
'',
|
|
25
|
+
'| Situation | Use instead |',
|
|
26
|
+
'|---|---|',
|
|
27
|
+
'| Search is the primary action on the page | A full-width `TextInput` with a visible label — always-visible inputs reduce cognitive load when search is the main task |',
|
|
28
|
+
'| Search drives a list of suggested results | [`Combobox`](?path=/docs/components-combobox--docs) — it handles filtering + suggestions + keyboard selection |',
|
|
29
|
+
'| You need a labelled form field with validation | [`FormField`](?path=/docs/components-formfield--docs) — SearchBar has no label or error state |',
|
|
30
|
+
'| The input must always be visible | Set `alwaysOpen` to `true` — or use a plain `TextInput` if you also need a label |',
|
|
31
|
+
].join('\n');
|
|
32
|
+
const DEVELOPER_NOTES = [
|
|
33
|
+
'### Critical usage patterns',
|
|
34
|
+
'',
|
|
35
|
+
'**`searchValue` and `setSearchValue` are a controlled pair.** Always pass both. Passing `searchValue`',
|
|
36
|
+
'without `setSearchValue` creates a frozen input — the user can see the value but typing has no effect.',
|
|
37
|
+
'Passing `setSearchValue` without `searchValue` will work but leaves state management up to an',
|
|
38
|
+
'anonymous internal variable, which makes reset and restore difficult.',
|
|
39
|
+
'',
|
|
40
|
+
'**`alwaysOpen` removes the clear button entirely.** When `alwaysOpen` is `true`, the component never',
|
|
41
|
+
'shows the collapsed state AND never renders the clear (×) button. There is no built-in way for the',
|
|
42
|
+
'user to clear the input. If you use `alwaysOpen`, add an external "Reset" button or clear link in your',
|
|
43
|
+
'UI and call `setSearchValue(\'\')` programmatically.',
|
|
44
|
+
'',
|
|
45
|
+
'**Non-empty `searchValue` forces the expanded state on mount.** If your page restores filter state',
|
|
46
|
+
'from a URL parameter or localStorage, passing a pre-filled `searchValue` will start the component',
|
|
47
|
+
'expanded — no flash of the collapsed button. This is intentional behaviour, not a side-effect.',
|
|
48
|
+
'',
|
|
49
|
+
'**`placeholderText` and `hoverText` label the COLLAPSED BUTTON, not the `<input>`.** They appear',
|
|
50
|
+
'only in the inactive state. The expanded `<input>` has no visible placeholder — it uses',
|
|
51
|
+
'`aria-label="Search input"` for accessibility.',
|
|
52
|
+
'',
|
|
53
|
+
'**`hoverText` swaps in on hover of the collapsed button.** When the user mouses away, the component',
|
|
54
|
+
'reverts to `placeholderText` (or an icon-only state if `placeholderText` is not set). This is a',
|
|
55
|
+
'hover-only affordance — there is no keyboard-equivalent of the hover swap.',
|
|
56
|
+
'',
|
|
57
|
+
'**Theming.** SearchBar is designed for brand-coloured and dark backgrounds. Its default background,',
|
|
58
|
+
'icon, and text colours use the `--search-global-*` token family. If you are placing it on a white or',
|
|
59
|
+
'light-grey background, override these tokens to ensure sufficient contrast:',
|
|
60
|
+
'',
|
|
61
|
+
'| Token | Controls |',
|
|
62
|
+
'|---|---|',
|
|
63
|
+
'| `--search-global-default-color-background` | Resting background |',
|
|
64
|
+
'| `--search-global-hover-color-background` | Hover background |',
|
|
65
|
+
'| `--search-global-focus-color-background` | Expanded/focused background |',
|
|
66
|
+
'| `--search-global-default-color-icon` | Search icon colour at rest |',
|
|
67
|
+
'| `--search-global-hover-color-icon` | Search icon colour on hover |',
|
|
68
|
+
'| `--search-global-focus-color-icon` | Search icon colour when active |',
|
|
69
|
+
'| `--search-global-default-color-text` | Placeholder and label text colour |',
|
|
70
|
+
'| `--search-global-radius` | Border radius of the component |',
|
|
71
|
+
'',
|
|
72
|
+
'---',
|
|
73
|
+
'',
|
|
74
|
+
'### Accessibility',
|
|
75
|
+
'',
|
|
76
|
+
'- The collapsed state renders a `<button>` — fully keyboard-operable and screen-reader-accessible',
|
|
77
|
+
'- The expanded `<input>` has `aria-label="Search input"` — do not add a visible `<label>` externally',
|
|
78
|
+
'- The clear button has `aria-label="Clear search"` and responds to `Enter` and `Space` in addition to click',
|
|
79
|
+
'- The search icon in the expanded state has `screenReaderText="Search icon"` rendered as a visually hidden span',
|
|
80
|
+
'- There is no `role="search"` landmark on the component — wrap in `<form role="search">` if you need a search landmark',
|
|
81
|
+
].join('\n');
|
|
82
|
+
const RELATED_COMPONENTS = [
|
|
83
|
+
'## Related components',
|
|
84
|
+
'',
|
|
85
|
+
'[Combobox](?path=/docs/components-combobox--docs) · [Table](?path=/docs/components-table--docs) · [FormField](?path=/docs/components-formfield--docs)',
|
|
86
|
+
].join('\n');
|
|
87
|
+
const PROPS_INTRO = 'The preview below is wired to the **Controls** panel — tweak any prop to see the story update in real time.';
|
|
88
|
+
function SearchBarDocsPage() {
|
|
89
|
+
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 })] }));
|
|
90
|
+
}
|
|
91
|
+
// ---------------------------------------------------------------------------
|
|
92
|
+
// Meta
|
|
93
|
+
// ---------------------------------------------------------------------------
|
|
4
94
|
const meta = {
|
|
5
95
|
title: 'Components/SearchBar',
|
|
6
96
|
component: SearchBar,
|
|
97
|
+
tags: ['autodocs'],
|
|
7
98
|
parameters: {
|
|
8
99
|
layout: 'padded',
|
|
100
|
+
docs: {
|
|
101
|
+
page: SearchBarDocsPage,
|
|
102
|
+
},
|
|
9
103
|
},
|
|
10
|
-
tags: ['autodocs'],
|
|
11
104
|
argTypes: {
|
|
12
105
|
searchValue: {
|
|
13
106
|
control: 'text',
|
|
14
|
-
description:
|
|
107
|
+
description: [
|
|
108
|
+
'The controlled value of the search input.',
|
|
109
|
+
'If non-empty on mount, the component starts in the expanded state.',
|
|
110
|
+
'Always pair with `setSearchValue`.',
|
|
111
|
+
].join(' '),
|
|
112
|
+
table: {
|
|
113
|
+
type: { summary: 'string' },
|
|
114
|
+
defaultValue: { summary: 'undefined' },
|
|
115
|
+
},
|
|
15
116
|
},
|
|
16
117
|
setSearchValue: {
|
|
17
|
-
|
|
18
|
-
|
|
118
|
+
control: false,
|
|
119
|
+
action: 'setSearchValue',
|
|
120
|
+
description: [
|
|
121
|
+
'Callback fired when the search input changes and when the clear button is clicked.',
|
|
122
|
+
'Always pair with `searchValue`. Omitting this creates a frozen, non-interactive input.',
|
|
123
|
+
].join(' '),
|
|
124
|
+
table: {
|
|
125
|
+
type: { summary: '(searchValue: string) => void' },
|
|
126
|
+
defaultValue: { summary: 'undefined' },
|
|
127
|
+
},
|
|
19
128
|
},
|
|
20
129
|
placeholderText: {
|
|
21
130
|
control: 'text',
|
|
22
|
-
description:
|
|
131
|
+
description: [
|
|
132
|
+
'Label text displayed inside the collapsed (inactive) button beside the search icon.',
|
|
133
|
+
'This is NOT the HTML input placeholder — it labels the collapsed button state only.',
|
|
134
|
+
'When absent, the collapsed button shows an icon only.',
|
|
135
|
+
].join(' '),
|
|
136
|
+
table: {
|
|
137
|
+
type: { summary: 'string' },
|
|
138
|
+
defaultValue: { summary: 'undefined' },
|
|
139
|
+
},
|
|
23
140
|
},
|
|
24
141
|
hoverText: {
|
|
25
142
|
control: 'text',
|
|
26
|
-
description:
|
|
143
|
+
description: [
|
|
144
|
+
'Text shown in the collapsed button when the user hovers over it.',
|
|
145
|
+
'Replaces `placeholderText` on hover and reverts on mouse-leave.',
|
|
146
|
+
'Only active in the collapsed (inactive) state — has no effect when expanded.',
|
|
147
|
+
].join(' '),
|
|
148
|
+
table: {
|
|
149
|
+
type: { summary: 'string' },
|
|
150
|
+
defaultValue: { summary: 'undefined' },
|
|
151
|
+
},
|
|
27
152
|
},
|
|
28
153
|
alwaysOpen: {
|
|
29
154
|
control: 'boolean',
|
|
30
|
-
description:
|
|
155
|
+
description: [
|
|
156
|
+
'When `true`, the component renders permanently expanded and the clear (×) button is hidden.',
|
|
157
|
+
'The collapsed button state is never shown. The consumer is responsible for clearing the',
|
|
158
|
+
'search value externally — there is no built-in clear affordance.',
|
|
159
|
+
].join(' '),
|
|
160
|
+
table: {
|
|
161
|
+
type: { summary: 'boolean' },
|
|
162
|
+
defaultValue: { summary: 'false' },
|
|
163
|
+
},
|
|
31
164
|
},
|
|
32
165
|
},
|
|
33
166
|
};
|
|
34
167
|
export default meta;
|
|
168
|
+
// ---------------------------------------------------------------------------
|
|
169
|
+
// Helper: attach a per-story description to docs
|
|
170
|
+
// ---------------------------------------------------------------------------
|
|
171
|
+
const withDescription = (story, description) => ({
|
|
172
|
+
...story,
|
|
173
|
+
parameters: {
|
|
174
|
+
...story.parameters,
|
|
175
|
+
docs: {
|
|
176
|
+
...story.parameters?.docs,
|
|
177
|
+
description: {
|
|
178
|
+
story: description,
|
|
179
|
+
},
|
|
180
|
+
},
|
|
181
|
+
},
|
|
182
|
+
});
|
|
183
|
+
// ---------------------------------------------------------------------------
|
|
184
|
+
// Template components — all stories need local state because SearchBar is
|
|
185
|
+
// a fully controlled component. Without useState the input is frozen.
|
|
186
|
+
// ---------------------------------------------------------------------------
|
|
35
187
|
const InteractiveSearchBar = (args) => {
|
|
36
188
|
const [value, setValue] = useState(args.searchValue ?? '');
|
|
37
189
|
useEffect(() => {
|
|
@@ -39,39 +191,279 @@ const InteractiveSearchBar = (args) => {
|
|
|
39
191
|
}, [args.searchValue]);
|
|
40
192
|
return _jsx(SearchBar, { ...args, searchValue: value, setSearchValue: setValue });
|
|
41
193
|
};
|
|
42
|
-
|
|
43
|
-
|
|
194
|
+
const WithPlaceholderTextTemplate = () => {
|
|
195
|
+
const [value, setValue] = useState('');
|
|
196
|
+
return (_jsx("div", { style: { background: 'var(--color-brand-600)', padding: 'var(--spacing-xlarge)' }, children: _jsx(SearchBar, { searchValue: value, setSearchValue: setValue, placeholderText: "Search pupils" }) }));
|
|
44
197
|
};
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
placeholderText: 'Search...',
|
|
49
|
-
},
|
|
198
|
+
const WithHoverTextTemplate = () => {
|
|
199
|
+
const [value, setValue] = useState('');
|
|
200
|
+
return (_jsx("div", { style: { background: 'var(--color-brand-600)', padding: 'var(--spacing-xlarge)' }, children: _jsx(SearchBar, { searchValue: value, setSearchValue: setValue, placeholderText: "Search pupils", hoverText: "Search all pupils and staff" }) }));
|
|
50
201
|
};
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
placeholderText: 'Search...',
|
|
55
|
-
hoverText: 'Start searching',
|
|
56
|
-
},
|
|
202
|
+
const WithHoverTextOnlyTemplate = () => {
|
|
203
|
+
const [value, setValue] = useState('');
|
|
204
|
+
return (_jsx("div", { style: { background: 'var(--color-brand-600)', padding: 'var(--spacing-xlarge)' }, children: _jsx(SearchBar, { searchValue: value, setSearchValue: setValue, hoverText: "Search pupils" }) }));
|
|
57
205
|
};
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
hoverText: 'Start searching',
|
|
62
|
-
},
|
|
206
|
+
const WithSearchValueTemplate = () => {
|
|
207
|
+
const [value, setValue] = useState('Emily Johnson');
|
|
208
|
+
return (_jsx("div", { style: { background: 'var(--color-brand-600)', padding: 'var(--spacing-xlarge)' }, children: _jsx(SearchBar, { searchValue: value, setSearchValue: setValue, placeholderText: "Search pupils" }) }));
|
|
63
209
|
};
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
210
|
+
const AlwaysOpenTemplate = () => {
|
|
211
|
+
const [value, setValue] = useState('');
|
|
212
|
+
return (_jsxs("div", { style: { background: 'var(--color-brand-600)', padding: 'var(--spacing-xlarge)', display: 'flex', flexDirection: 'column', gap: 'var(--spacing-large)' }, children: [_jsx(SearchBar, { searchValue: value, setSearchValue: setValue, alwaysOpen: true }), _jsx("p", { className: "ds-text", style: { margin: 0, color: 'var(--color-mono-white)', fontSize: '0.875rem' }, children: "Note: no clear button \u2014 the \u00D7 icon is absent when alwaysOpen is true." })] }));
|
|
213
|
+
};
|
|
214
|
+
const AlwaysOpenWithValueTemplate = () => {
|
|
215
|
+
const [value, setValue] = useState('Year 8');
|
|
216
|
+
return (_jsxs("div", { style: { background: 'var(--color-brand-600)', padding: 'var(--spacing-xlarge)', display: 'flex', flexDirection: 'column', gap: 'var(--spacing-large)' }, children: [_jsx(SearchBar, { searchValue: value, setSearchValue: setValue, alwaysOpen: true }), _jsx("p", { className: "ds-text", style: { margin: 0, color: 'var(--color-mono-white)', fontSize: '0.875rem' }, children: "Pre-filled value with no clear button \u2014 the consumer must provide external clearing." })] }));
|
|
70
217
|
};
|
|
71
|
-
|
|
72
|
-
|
|
218
|
+
const ControlledByParentTemplate = () => {
|
|
219
|
+
const [value, setValue] = useState('');
|
|
220
|
+
return (_jsxs("div", { style: { background: 'var(--color-brand-600)', padding: 'var(--spacing-xlarge)', display: 'flex', flexDirection: 'column', gap: 'var(--spacing-large)' }, children: [_jsx(SearchBar, { searchValue: value, setSearchValue: setValue, placeholderText: "Search reports" }), _jsx("p", { className: "ds-text", style: { margin: 0, color: 'var(--color-mono-white)', fontSize: '0.875rem' }, children: value
|
|
221
|
+
? `Active filter: "${value}" — ${value.length} character${value.length === 1 ? '' : 's'}`
|
|
222
|
+
: 'No active filter — click the search icon and start typing' })] }));
|
|
223
|
+
};
|
|
224
|
+
// ---------------------------------------------------------------------------
|
|
225
|
+
// Stories
|
|
226
|
+
// ---------------------------------------------------------------------------
|
|
227
|
+
export const Default = withDescription({
|
|
73
228
|
args: {
|
|
74
|
-
|
|
229
|
+
placeholderText: 'Search',
|
|
230
|
+
alwaysOpen: false,
|
|
75
231
|
},
|
|
76
|
-
}
|
|
232
|
+
render: args => (_jsx("div", { style: { background: 'var(--color-brand-600)', padding: 'var(--spacing-xlarge)' }, children: _jsx(InteractiveSearchBar, { ...args }) })),
|
|
233
|
+
}, [
|
|
234
|
+
'The interactive canvas — every prop is wired to the Controls panel below.',
|
|
235
|
+
'Click the search icon to expand the input. The story background is brand-coloured to reflect the',
|
|
236
|
+
'real-world context (navigation bars, table headers) where SearchBar is designed to be used.',
|
|
237
|
+
].join(' '));
|
|
238
|
+
export const WithPlaceholderText = withDescription({
|
|
239
|
+
render: WithPlaceholderTextTemplate,
|
|
240
|
+
parameters: {
|
|
241
|
+
controls: { disable: true },
|
|
242
|
+
docs: {
|
|
243
|
+
source: {
|
|
244
|
+
language: 'tsx',
|
|
245
|
+
code: `
|
|
246
|
+
import { useState } from 'react';
|
|
247
|
+
import { SearchBar } from '@arbor-education/design-system.components';
|
|
248
|
+
|
|
249
|
+
function PupilSearchExample() {
|
|
250
|
+
const [value, setValue] = useState('');
|
|
251
|
+
return (
|
|
252
|
+
<SearchBar
|
|
253
|
+
searchValue={value}
|
|
254
|
+
setSearchValue={setValue}
|
|
255
|
+
placeholderText="Search pupils"
|
|
256
|
+
/>
|
|
257
|
+
);
|
|
258
|
+
}
|
|
259
|
+
export default PupilSearchExample;
|
|
260
|
+
`.trim(),
|
|
261
|
+
},
|
|
262
|
+
},
|
|
263
|
+
},
|
|
264
|
+
}, [
|
|
265
|
+
'`placeholderText` adds a label beside the search icon in the collapsed state — making the affordance',
|
|
266
|
+
'explicit without taking up much space. Click the label to expand the full input.',
|
|
267
|
+
'Note: this is a label on the collapsed button, not the HTML `placeholder` attribute on the input.',
|
|
268
|
+
].join(' '));
|
|
269
|
+
export const WithHoverText = withDescription({
|
|
270
|
+
render: WithHoverTextTemplate,
|
|
271
|
+
parameters: {
|
|
272
|
+
controls: { disable: true },
|
|
273
|
+
docs: {
|
|
274
|
+
source: {
|
|
275
|
+
language: 'tsx',
|
|
276
|
+
code: `
|
|
277
|
+
import { useState } from 'react';
|
|
278
|
+
import { SearchBar } from '@arbor-education/design-system.components';
|
|
279
|
+
|
|
280
|
+
function PupilSearchWithHoverExample() {
|
|
281
|
+
const [value, setValue] = useState('');
|
|
282
|
+
return (
|
|
283
|
+
<SearchBar
|
|
284
|
+
searchValue={value}
|
|
285
|
+
setSearchValue={setValue}
|
|
286
|
+
placeholderText="Search pupils"
|
|
287
|
+
hoverText="Search all pupils and staff"
|
|
288
|
+
/>
|
|
289
|
+
);
|
|
290
|
+
}
|
|
291
|
+
export default PupilSearchWithHoverExample;
|
|
292
|
+
`.trim(),
|
|
293
|
+
},
|
|
294
|
+
},
|
|
295
|
+
},
|
|
296
|
+
}, [
|
|
297
|
+
'When both `placeholderText` and `hoverText` are set, the label swaps to `hoverText` on mouse-enter',
|
|
298
|
+
'and reverts to `placeholderText` on mouse-leave. Hover the icon to see the swap.',
|
|
299
|
+
'This is a hover-only affordance — keyboard users always see `placeholderText`.',
|
|
300
|
+
].join(' '));
|
|
301
|
+
export const WithHoverTextOnly = withDescription({
|
|
302
|
+
render: WithHoverTextOnlyTemplate,
|
|
303
|
+
parameters: {
|
|
304
|
+
controls: { disable: true },
|
|
305
|
+
docs: {
|
|
306
|
+
source: {
|
|
307
|
+
language: 'tsx',
|
|
308
|
+
code: `
|
|
309
|
+
import { useState } from 'react';
|
|
310
|
+
import { SearchBar } from '@arbor-education/design-system.components';
|
|
311
|
+
|
|
312
|
+
function IconOnlySearchExample() {
|
|
313
|
+
const [value, setValue] = useState('');
|
|
314
|
+
return (
|
|
315
|
+
<SearchBar
|
|
316
|
+
searchValue={value}
|
|
317
|
+
setSearchValue={setValue}
|
|
318
|
+
hoverText="Search pupils"
|
|
319
|
+
/>
|
|
320
|
+
);
|
|
321
|
+
}
|
|
322
|
+
export default IconOnlySearchExample;
|
|
323
|
+
`.trim(),
|
|
324
|
+
},
|
|
325
|
+
},
|
|
326
|
+
},
|
|
327
|
+
}, [
|
|
328
|
+
'When `placeholderText` is absent but `hoverText` is set, the button shows an icon only at rest.',
|
|
329
|
+
'Hovering reveals the label text. This pattern works well in very narrow navigation bars where',
|
|
330
|
+
'every pixel counts — the icon provides the affordance at rest and hover confirms the action.',
|
|
331
|
+
].join(' '));
|
|
332
|
+
export const WithSearchValue = withDescription({
|
|
333
|
+
render: WithSearchValueTemplate,
|
|
334
|
+
parameters: {
|
|
335
|
+
controls: { disable: true },
|
|
336
|
+
docs: {
|
|
337
|
+
source: {
|
|
338
|
+
language: 'tsx',
|
|
339
|
+
code: `
|
|
340
|
+
import { useState } from 'react';
|
|
341
|
+
import { SearchBar } from '@arbor-education/design-system.components';
|
|
342
|
+
|
|
343
|
+
// Restore a previously entered search value from URL params or session storage.
|
|
344
|
+
// Passing a non-empty searchValue starts the component in the expanded state.
|
|
345
|
+
function RestoredSearchExample() {
|
|
346
|
+
const [value, setValue] = useState('Emily Johnson');
|
|
347
|
+
return (
|
|
348
|
+
<SearchBar
|
|
349
|
+
searchValue={value}
|
|
350
|
+
setSearchValue={setValue}
|
|
351
|
+
placeholderText="Search pupils"
|
|
352
|
+
/>
|
|
353
|
+
);
|
|
354
|
+
}
|
|
355
|
+
export default RestoredSearchExample;
|
|
356
|
+
`.trim(),
|
|
357
|
+
},
|
|
358
|
+
},
|
|
359
|
+
},
|
|
360
|
+
}, [
|
|
361
|
+
'Passing a non-empty `searchValue` starts the component expanded — no flash of the collapsed button.',
|
|
362
|
+
'This is the correct pattern for restoring filter state from URL parameters or local storage.',
|
|
363
|
+
'The clear (×) button is visible and clears both the value and collapses the input.',
|
|
364
|
+
].join(' '));
|
|
365
|
+
export const AlwaysOpen = withDescription({
|
|
366
|
+
render: AlwaysOpenTemplate,
|
|
367
|
+
parameters: {
|
|
368
|
+
controls: { disable: true },
|
|
369
|
+
docs: {
|
|
370
|
+
source: {
|
|
371
|
+
language: 'tsx',
|
|
372
|
+
code: `
|
|
373
|
+
import { useState } from 'react';
|
|
374
|
+
import { SearchBar } from '@arbor-education/design-system.components';
|
|
375
|
+
|
|
376
|
+
// alwaysOpen=true: permanently expanded, no clear button.
|
|
377
|
+
// Wire up an external reset mechanism if users need to clear.
|
|
378
|
+
function PersistentSearchExample() {
|
|
379
|
+
const [value, setValue] = useState('');
|
|
380
|
+
return (
|
|
381
|
+
<SearchBar
|
|
382
|
+
searchValue={value}
|
|
383
|
+
setSearchValue={setValue}
|
|
384
|
+
alwaysOpen
|
|
385
|
+
/>
|
|
386
|
+
);
|
|
387
|
+
}
|
|
388
|
+
export default PersistentSearchExample;
|
|
389
|
+
`.trim(),
|
|
390
|
+
},
|
|
391
|
+
},
|
|
392
|
+
},
|
|
393
|
+
}, [
|
|
394
|
+
'`alwaysOpen` keeps the input permanently expanded and **removes the clear (×) button entirely**.',
|
|
395
|
+
'The collapsed button state is never shown. Use this in sidebars or fixed layouts where search is',
|
|
396
|
+
'always visible. Because there is no built-in clear affordance, add an external "Reset" button or',
|
|
397
|
+
'call `setSearchValue(\'\')` from your own UI when the user wants to clear.',
|
|
398
|
+
].join(' '));
|
|
399
|
+
export const AlwaysOpenWithValue = withDescription({
|
|
400
|
+
render: AlwaysOpenWithValueTemplate,
|
|
401
|
+
parameters: {
|
|
402
|
+
controls: { disable: true },
|
|
403
|
+
docs: {
|
|
404
|
+
source: {
|
|
405
|
+
language: 'tsx',
|
|
406
|
+
code: `
|
|
407
|
+
import { useState } from 'react';
|
|
408
|
+
import { SearchBar } from '@arbor-education/design-system.components';
|
|
409
|
+
|
|
410
|
+
// alwaysOpen + pre-filled value: expanded with no collapse or clear affordance.
|
|
411
|
+
// The consumer is responsible for all value management.
|
|
412
|
+
function PersistentFilteredSearchExample() {
|
|
413
|
+
const [value, setValue] = useState('Year 8');
|
|
414
|
+
return (
|
|
415
|
+
<SearchBar
|
|
416
|
+
searchValue={value}
|
|
417
|
+
setSearchValue={setValue}
|
|
418
|
+
alwaysOpen
|
|
419
|
+
/>
|
|
420
|
+
);
|
|
421
|
+
}
|
|
422
|
+
export default PersistentFilteredSearchExample;
|
|
423
|
+
`.trim(),
|
|
424
|
+
},
|
|
425
|
+
},
|
|
426
|
+
},
|
|
427
|
+
}, [
|
|
428
|
+
'`alwaysOpen` combined with a pre-filled `searchValue` — the component starts expanded with a value',
|
|
429
|
+
'and no way for the user to clear it through the component itself.',
|
|
430
|
+
'This combination is appropriate when an external "Reset filters" action exists in the parent UI.',
|
|
431
|
+
].join(' '));
|
|
432
|
+
export const ControlledByParent = withDescription({
|
|
433
|
+
render: ControlledByParentTemplate,
|
|
434
|
+
parameters: {
|
|
435
|
+
controls: { disable: true },
|
|
436
|
+
docs: {
|
|
437
|
+
source: {
|
|
438
|
+
language: 'tsx',
|
|
439
|
+
code: `
|
|
440
|
+
import { useState } from 'react';
|
|
441
|
+
import { SearchBar } from '@arbor-education/design-system.components';
|
|
442
|
+
|
|
443
|
+
// Always provide both searchValue and setSearchValue together.
|
|
444
|
+
// The parent owns the state — SearchBar is a fully controlled component.
|
|
445
|
+
function ReportSearchExample() {
|
|
446
|
+
const [value, setValue] = useState('');
|
|
447
|
+
return (
|
|
448
|
+
<div>
|
|
449
|
+
<SearchBar
|
|
450
|
+
searchValue={value}
|
|
451
|
+
setSearchValue={setValue}
|
|
452
|
+
placeholderText="Search reports"
|
|
453
|
+
/>
|
|
454
|
+
{value && <p>Filtering by: "{value}"</p>}
|
|
455
|
+
</div>
|
|
456
|
+
);
|
|
457
|
+
}
|
|
458
|
+
export default ReportSearchExample;
|
|
459
|
+
`.trim(),
|
|
460
|
+
},
|
|
461
|
+
},
|
|
462
|
+
},
|
|
463
|
+
}, [
|
|
464
|
+
'The controlled pattern: the parent component owns `searchValue` state and passes both `searchValue`',
|
|
465
|
+
'and `setSearchValue` to SearchBar. The live value is displayed below — showing how a table filter,',
|
|
466
|
+
'URL parameter, or analytics event would respond to the search.',
|
|
467
|
+
'Click the search icon, type, and watch the status text update on every keystroke.',
|
|
468
|
+
].join(' '));
|
|
77
469
|
//# sourceMappingURL=SearchBar.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchBar.stories.js","sourceRoot":"","sources":["../../../src/components/searchBar/SearchBar.stories.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"SearchBar.stories.js","sourceRoot":"","sources":["../../../src/components/searchBar/SearchBar.stories.tsx"],"names":[],"mappings":";AACA,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,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,8EAA8E;AAC9E,oBAAoB;AACpB,8EAA8E;AAE9E,MAAM,iBAAiB,GAAG;IACxB,qGAAqG;IACrG,qGAAqG;IACrG,+FAA+F;CAChG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAEb,MAAM,cAAc,GAAG;IACrB,iBAAiB;IACjB,EAAE;IACF,gFAAgF;IAChF,sEAAsE;IACtE,mGAAmG;IACnG,gGAAgG;IAChG,EAAE;IACF,KAAK;IACL,EAAE;IACF,qBAAqB;IACrB,EAAE;IACF,6BAA6B;IAC7B,WAAW;IACX,yKAAyK;IACzK,+JAA+J;IAC/J,oJAAoJ;IACpJ,yHAAyH;CAC1H,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAEb,MAAM,eAAe,GAAG;IACtB,6BAA6B;IAC7B,EAAE;IACF,uGAAuG;IACvG,wGAAwG;IACxG,+FAA+F;IAC/F,uEAAuE;IACvE,EAAE;IACF,sGAAsG;IACtG,oGAAoG;IACpG,wGAAwG;IACxG,sDAAsD;IACtD,EAAE;IACF,oGAAoG;IACpG,mGAAmG;IACnG,gGAAgG;IAChG,EAAE;IACF,kGAAkG;IAClG,yFAAyF;IACzF,gDAAgD;IAChD,EAAE;IACF,qGAAqG;IACrG,iGAAiG;IACjG,4EAA4E;IAC5E,EAAE;IACF,qGAAqG;IACrG,sGAAsG;IACtG,6EAA6E;IAC7E,EAAE;IACF,sBAAsB;IACtB,WAAW;IACX,qEAAqE;IACrE,iEAAiE;IACjE,4EAA4E;IAC5E,uEAAuE;IACvE,sEAAsE;IACtE,yEAAyE;IACzE,8EAA8E;IAC9E,+DAA+D;IAC/D,EAAE;IACF,KAAK;IACL,EAAE;IACF,mBAAmB;IACnB,EAAE;IACF,mGAAmG;IACnG,sGAAsG;IACtG,6GAA6G;IAC7G,iHAAiH;IACjH,wHAAwH;CACzH,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAEb,MAAM,kBAAkB,GAAG;IACzB,uBAAuB;IACvB,EAAE;IACF,uJAAuJ;CACxJ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAEb,MAAM,WAAW,GAAG,6GAA6G,CAAC;AAElI,SAAS,iBAAiB;IACxB,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,sBAAsB;IAC7B,SAAS,EAAE,SAAS;IACpB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,MAAM,EAAE,QAAQ;QAChB,IAAI,EAAE;YACJ,IAAI,EAAE,iBAAiB;SACxB;KACF;IACD,QAAQ,EAAE;QACR,WAAW,EAAE;YACX,OAAO,EAAE,MAAM;YACf,WAAW,EAAE;gBACX,2CAA2C;gBAC3C,oEAAoE;gBACpE,oCAAoC;aACrC,CAAC,IAAI,CAAC,GAAG,CAAC;YACX,KAAK,EAAE;gBACL,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;gBAC3B,YAAY,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE;aACvC;SACF;QACD,cAAc,EAAE;YACd,OAAO,EAAE,KAAK;YACd,MAAM,EAAE,gBAAgB;YACxB,WAAW,EAAE;gBACX,oFAAoF;gBACpF,wFAAwF;aACzF,CAAC,IAAI,CAAC,GAAG,CAAC;YACX,KAAK,EAAE;gBACL,IAAI,EAAE,EAAE,OAAO,EAAE,+BAA+B,EAAE;gBAClD,YAAY,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE;aACvC;SACF;QACD,eAAe,EAAE;YACf,OAAO,EAAE,MAAM;YACf,WAAW,EAAE;gBACX,qFAAqF;gBACrF,qFAAqF;gBACrF,uDAAuD;aACxD,CAAC,IAAI,CAAC,GAAG,CAAC;YACX,KAAK,EAAE;gBACL,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;gBAC3B,YAAY,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE;aACvC;SACF;QACD,SAAS,EAAE;YACT,OAAO,EAAE,MAAM;YACf,WAAW,EAAE;gBACX,kEAAkE;gBAClE,iEAAiE;gBACjE,8EAA8E;aAC/E,CAAC,IAAI,CAAC,GAAG,CAAC;YACX,KAAK,EAAE;gBACL,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;gBAC3B,YAAY,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE;aACvC;SACF;QACD,UAAU,EAAE;YACV,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE;gBACX,6FAA6F;gBAC7F,yFAAyF;gBACzF,kEAAkE;aACnE,CAAC,IAAI,CAAC,GAAG,CAAC;YACX,KAAK,EAAE;gBACL,IAAI,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;gBAC5B,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;aACnC;SACF;KACF;CAC+B,CAAC;AAEnC,eAAe,IAAI,CAAC;AAGpB,8EAA8E;AAC9E,iDAAiD;AACjD,8EAA8E;AAE9E,MAAM,eAAe,GAAG,CAAC,KAAY,EAAE,WAAmB,EAAS,EAAE,CAAC,CAAC;IACrE,GAAG,KAAK;IACR,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,0EAA0E;AAC1E,sEAAsE;AACtE,8EAA8E;AAE9E,MAAM,oBAAoB,GAAG,CAAC,IAA4C,EAAE,EAAE;IAC5E,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,WAAW,IAAI,EAAE,CAAC,CAAC;IAC3D,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,IAAI,CAAC,WAAW,IAAI,EAAE,CAAC,CAAC;IACnC,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC;IACvB,OAAO,KAAC,SAAS,OAAK,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,cAAc,EAAE,QAAQ,GAAI,CAAC;AAC/E,CAAC,CAAC;AAEF,MAAM,2BAA2B,GAAG,GAAG,EAAE;IACvC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACvC,OAAO,CACL,cAAK,KAAK,EAAE,EAAE,UAAU,EAAE,wBAAwB,EAAE,OAAO,EAAE,uBAAuB,EAAE,YACpF,KAAC,SAAS,IACR,WAAW,EAAE,KAAK,EAClB,cAAc,EAAE,QAAQ,EACxB,eAAe,EAAC,eAAe,GAC/B,GACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,qBAAqB,GAAG,GAAG,EAAE;IACjC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACvC,OAAO,CACL,cAAK,KAAK,EAAE,EAAE,UAAU,EAAE,wBAAwB,EAAE,OAAO,EAAE,uBAAuB,EAAE,YACpF,KAAC,SAAS,IACR,WAAW,EAAE,KAAK,EAClB,cAAc,EAAE,QAAQ,EACxB,eAAe,EAAC,eAAe,EAC/B,SAAS,EAAC,6BAA6B,GACvC,GACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,yBAAyB,GAAG,GAAG,EAAE;IACrC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACvC,OAAO,CACL,cAAK,KAAK,EAAE,EAAE,UAAU,EAAE,wBAAwB,EAAE,OAAO,EAAE,uBAAuB,EAAE,YACpF,KAAC,SAAS,IACR,WAAW,EAAE,KAAK,EAClB,cAAc,EAAE,QAAQ,EACxB,SAAS,EAAC,eAAe,GACzB,GACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,uBAAuB,GAAG,GAAG,EAAE;IACnC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAC;IACpD,OAAO,CACL,cAAK,KAAK,EAAE,EAAE,UAAU,EAAE,wBAAwB,EAAE,OAAO,EAAE,uBAAuB,EAAE,YACpF,KAAC,SAAS,IACR,WAAW,EAAE,KAAK,EAClB,cAAc,EAAE,QAAQ,EACxB,eAAe,EAAC,eAAe,GAC/B,GACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,kBAAkB,GAAG,GAAG,EAAE;IAC9B,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACvC,OAAO,CACL,eAAK,KAAK,EAAE,EAAE,UAAU,EAAE,wBAAwB,EAAE,OAAO,EAAE,uBAAuB,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,sBAAsB,EAAE,aAC3J,KAAC,SAAS,IACR,WAAW,EAAE,KAAK,EAClB,cAAc,EAAE,QAAQ,EACxB,UAAU,SACV,EACF,YAAG,SAAS,EAAC,SAAS,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,yBAAyB,EAAE,QAAQ,EAAE,UAAU,EAAE,gGAE/F,IACA,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,2BAA2B,GAAG,GAAG,EAAE;IACvC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC7C,OAAO,CACL,eAAK,KAAK,EAAE,EAAE,UAAU,EAAE,wBAAwB,EAAE,OAAO,EAAE,uBAAuB,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,sBAAsB,EAAE,aAC3J,KAAC,SAAS,IACR,WAAW,EAAE,KAAK,EAClB,cAAc,EAAE,QAAQ,EACxB,UAAU,SACV,EACF,YAAG,SAAS,EAAC,SAAS,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,yBAAyB,EAAE,QAAQ,EAAE,UAAU,EAAE,0GAE/F,IACA,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,0BAA0B,GAAG,GAAG,EAAE;IACtC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACvC,OAAO,CACL,eAAK,KAAK,EAAE,EAAE,UAAU,EAAE,wBAAwB,EAAE,OAAO,EAAE,uBAAuB,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,sBAAsB,EAAE,aAC3J,KAAC,SAAS,IACR,WAAW,EAAE,KAAK,EAClB,cAAc,EAAE,QAAQ,EACxB,eAAe,EAAC,gBAAgB,GAChC,EACF,YAAG,SAAS,EAAC,SAAS,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,yBAAyB,EAAE,QAAQ,EAAE,UAAU,EAAE,YAChG,KAAK;oBACJ,CAAC,CAAC,mBAAmB,KAAK,OAAO,KAAK,CAAC,MAAM,aAAa,KAAK,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,EAAE;oBACzF,CAAC,CAAC,2DAA2D,GAC7D,IACA,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,8EAA8E;AAC9E,UAAU;AACV,8EAA8E;AAE9E,MAAM,CAAC,MAAM,OAAO,GAAU,eAAe,CAC3C;IACE,IAAI,EAAE;QACJ,eAAe,EAAE,QAAQ;QACzB,UAAU,EAAE,KAAK;KAClB;IACD,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,CACd,cAAK,KAAK,EAAE,EAAE,UAAU,EAAE,wBAAwB,EAAE,OAAO,EAAE,uBAAuB,EAAE,YACpF,KAAC,oBAAoB,OAAK,IAAI,GAAI,GAC9B,CACP;CACF,EACD;IACE,2EAA2E;IAC3E,kGAAkG;IAClG,6FAA6F;CAC9F,CAAC,IAAI,CAAC,GAAG,CAAC,CACZ,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAU,eAAe,CACvD;IACE,MAAM,EAAE,2BAA2B;IACnC,UAAU,EAAE;QACV,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;QAC3B,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE;;;;;;;;;;;;;;;CAef,CAAC,IAAI,EAAE;aACC;SACF;KACF;CACF,EACD;IACE,sGAAsG;IACtG,kFAAkF;IAClF,mGAAmG;CACpG,CAAC,IAAI,CAAC,GAAG,CAAC,CACZ,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAU,eAAe,CACjD;IACE,MAAM,EAAE,qBAAqB;IAC7B,UAAU,EAAE;QACV,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;QAC3B,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE;;;;;;;;;;;;;;;;CAgBf,CAAC,IAAI,EAAE;aACC;SACF;KACF;CACF,EACD;IACE,oGAAoG;IACpG,kFAAkF;IAClF,gFAAgF;CACjF,CAAC,IAAI,CAAC,GAAG,CAAC,CACZ,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAU,eAAe,CACrD;IACE,MAAM,EAAE,yBAAyB;IACjC,UAAU,EAAE;QACV,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;QAC3B,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE;;;;;;;;;;;;;;;CAef,CAAC,IAAI,EAAE;aACC;SACF;KACF;CACF,EACD;IACE,iGAAiG;IACjG,+FAA+F;IAC/F,8FAA8F;CAC/F,CAAC,IAAI,CAAC,GAAG,CAAC,CACZ,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAU,eAAe,CACnD;IACE,MAAM,EAAE,uBAAuB;IAC/B,UAAU,EAAE;QACV,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;QAC3B,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE;;;;;;;;;;;;;;;;;CAiBf,CAAC,IAAI,EAAE;aACC;SACF;KACF;CACF,EACD;IACE,qGAAqG;IACrG,8FAA8F;IAC9F,oFAAoF;CACrF,CAAC,IAAI,CAAC,GAAG,CAAC,CACZ,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAU,eAAe,CAC9C;IACE,MAAM,EAAE,kBAAkB;IAC1B,UAAU,EAAE;QACV,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;QAC3B,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE;;;;;;;;;;;;;;;;;CAiBf,CAAC,IAAI,EAAE;aACC;SACF;KACF;CACF,EACD;IACE,kGAAkG;IAClG,kGAAkG;IAClG,kGAAkG;IAClG,4EAA4E;CAC7E,CAAC,IAAI,CAAC,GAAG,CAAC,CACZ,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAU,eAAe,CACvD;IACE,MAAM,EAAE,2BAA2B;IACnC,UAAU,EAAE;QACV,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;QAC3B,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE;;;;;;;;;;;;;;;;;CAiBf,CAAC,IAAI,EAAE;aACC;SACF;KACF;CACF,EACD;IACE,oGAAoG;IACpG,mEAAmE;IACnE,kGAAkG;CACnG,CAAC,IAAI,CAAC,GAAG,CAAC,CACZ,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAU,eAAe,CACtD;IACE,MAAM,EAAE,0BAA0B;IAClC,UAAU,EAAE;QACV,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;QAC3B,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;CAoBf,CAAC,IAAI,EAAE;aACC;SACF;KACF;CACF,EACD;IACE,qGAAqG;IACrG,oGAAoG;IACpG,gEAAgE;IAChE,mFAAmF;CACpF,CAAC,IAAI,CAAC,GAAG,CAAC,CACZ,CAAC"}
|
|
@@ -1,45 +1,15 @@
|
|
|
1
|
-
import type { Meta } from '@storybook/react-vite';
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
2
|
import { Section } from './Section';
|
|
3
3
|
declare const meta: Meta<typeof Section>;
|
|
4
|
-
export declare const Default: {
|
|
5
|
-
args: {
|
|
6
|
-
title: string;
|
|
7
|
-
children: import("react/jsx-runtime").JSX.Element[];
|
|
8
|
-
};
|
|
9
|
-
};
|
|
10
|
-
export declare const NestedSections: {
|
|
11
|
-
args: {
|
|
12
|
-
title: string;
|
|
13
|
-
collapsible: boolean;
|
|
14
|
-
children: import("react/jsx-runtime").JSX.Element[];
|
|
15
|
-
};
|
|
16
|
-
};
|
|
17
|
-
export declare const WithRows: {
|
|
18
|
-
args: {
|
|
19
|
-
title: string;
|
|
20
|
-
children: import("react/jsx-runtime").JSX.Element[];
|
|
21
|
-
};
|
|
22
|
-
};
|
|
23
|
-
export declare const WithClickableRows: {
|
|
24
|
-
args: {
|
|
25
|
-
title: string;
|
|
26
|
-
buttonText: string;
|
|
27
|
-
children: import("react/jsx-runtime").JSX.Element[];
|
|
28
|
-
};
|
|
29
|
-
};
|
|
30
|
-
export declare const CollapsibleWithRows: {
|
|
31
|
-
args: {
|
|
32
|
-
title: string;
|
|
33
|
-
collapsible: boolean;
|
|
34
|
-
children: import("react/jsx-runtime").JSX.Element[];
|
|
35
|
-
};
|
|
36
|
-
};
|
|
37
|
-
export declare const NestedSectionsWithRows: {
|
|
38
|
-
args: {
|
|
39
|
-
title: string;
|
|
40
|
-
collapsible: boolean;
|
|
41
|
-
children: import("react/jsx-runtime").JSX.Element[];
|
|
42
|
-
};
|
|
43
|
-
};
|
|
44
4
|
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof meta>;
|
|
6
|
+
export declare const Default: Story;
|
|
7
|
+
export declare const WithHeadingLevel: Story;
|
|
8
|
+
export declare const WithTitleIcon: Story;
|
|
9
|
+
export declare const WithActionButton: Story;
|
|
10
|
+
export declare const Collapsible: Story;
|
|
11
|
+
export declare const CollapsibleInitiallyCollapsed: Story;
|
|
12
|
+
export declare const CollapsibleWithActionButton: Story;
|
|
13
|
+
export declare const WithRows: Story;
|
|
14
|
+
export declare const NestedCollapsibleSections: Story;
|
|
45
15
|
//# sourceMappingURL=Section.stories.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Section.stories.d.ts","sourceRoot":"","sources":["../../../src/components/section/Section.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"Section.stories.d.ts","sourceRoot":"","sources":["../../../src/components/section/Section.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAa5D,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAoHpC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,OAAO,CAgJ9B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAkBnC,eAAO,MAAM,OAAO,EAAE,KAoBrB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KA8D9B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KA8C3B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAqD9B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAyCzB,CAAC;AAEF,eAAO,MAAM,6BAA6B,EAAE,KA4C3C,CAAC;AAEF,eAAO,MAAM,2BAA2B,EAAE,KAkDzC,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAmDtB,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KAiEvC,CAAC"}
|