From 81c257f95654e4b968202940ba69c241b17d04a3 Mon Sep 17 00:00:00 2001 From: Geoffrey Chong Date: Tue, 25 Jul 2023 10:52:26 +1000 Subject: [PATCH 1/6] remove codeql --- .github/workflows/codeql-analysis.yml | 66 --------------------------- 1 file changed, 66 deletions(-) delete mode 100644 .github/workflows/codeql-analysis.yml diff --git a/.github/workflows/codeql-analysis.yml b/.github/workflows/codeql-analysis.yml deleted file mode 100644 index e8a6b01..0000000 --- a/.github/workflows/codeql-analysis.yml +++ /dev/null @@ -1,66 +0,0 @@ -# For most projects, this workflow file will not need changing; you simply need -# to commit it to your repository. -# -# You may wish to alter this file to override the set of languages analyzed, -# or to provide custom queries or build logic. -# -# ******** NOTE ******** -# We have attempted to detect the languages in your repository. Please check -# the `language` matrix defined below to confirm you have the correct set of -# supported CodeQL languages. -# -name: "codeQL" - -on: - push: - branches: [main, canary] - pull_request: - # The branches below must be a subset of the branches above - branches: [main] - schedule: - - cron: "27 1 * * 3" - -jobs: - analyze: - name: Analyze - runs-on: ubuntu-latest - permissions: - actions: read - contents: read - security-events: write - - strategy: - fail-fast: false - matrix: - language: ["javascript"] - # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python' ] - # Learn more: - # https://docs.github.com/en/free-pro-team@latest/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#changing-the-languages-that-are-analyzed - - steps: - - name: Checkout repository - uses: actions/checkout@v3 - - # Initializes the CodeQL tools for scanning. - - name: Initialize CodeQL - uses: github/codeql-action/init@v2 - with: - languages: ${{ matrix.language }} - # If you wish to specify custom queries, you can do so here or in a config file. - # By default, queries listed here will override any specified in a config file. - # Prefix the list here with "+" to use these queries and those in the config file. - # queries: ./path/to/local/query, your-org/your-repo/queries@main - - # ℹī¸ Command-line programs to run using the OS shell. - # 📚 https://git.io/JvXDl - - # ✏ī¸ If the Autobuild fails above, remove it and uncomment the following three lines - # and modify them (or add more) to build your code if your project - # uses a compiled language - - #- run: | - # make bootstrap - # make release - - - name: Perform CodeQL Analysis - uses: github/codeql-action/analyze@v2 From 2df1309c5da8cca1f17b2a8f3e063b6162e9fb1b Mon Sep 17 00:00:00 2001 From: Geoffrey Chong Date: Tue, 25 Jul 2023 11:14:24 +1000 Subject: [PATCH 2/6] remove KAIO --- package.json | 10 +- packages/components/CHANGELOG.md | 611 ------------ packages/components/future/README.md | 27 - packages/components/future/package.json | 5 - packages/components/icons/academy.icon.svg | 17 - .../icons/action-off-white.icon.svg | 18 - packages/components/icons/action-off.icon.svg | 17 - packages/components/icons/action-on.icon.svg | 17 - packages/components/icons/add-link.icon.svg | 3 - packages/components/icons/add-white.icon.svg | 18 - packages/components/icons/add.icon.svg | 17 - .../components/icons/archived-white.icon.svg | 18 - packages/components/icons/archived.icon.svg | 17 - .../components/icons/arrow-backward.icon.svg | 17 - packages/components/icons/arrow-down.icon.svg | 17 - .../components/icons/arrow-forward.icon.svg | 17 - packages/components/icons/arrow-left.icon.svg | 17 - .../components/icons/arrow-right.icon.svg | 17 - packages/components/icons/arrow-up.icon.svg | 17 - packages/components/icons/blank.icon.svg | 17 - packages/components/icons/bold.icon.svg | 3 - .../components/icons/bookmark-off.icon.svg | 3 - .../components/icons/bookmark-on.icon.svg | 3 - packages/components/icons/branching.icon.svg | 15 - .../components/icons/bulletted-list.icon.svg | 3 - .../components/icons/ca-monogram.icon.svg | 17 - packages/components/icons/camera.icon.svg | 19 - .../components/icons/caution-white.icon.svg | 1 - packages/components/icons/caution.icon.svg | 1 - packages/components/icons/check.icon.svg | 17 - .../components/icons/chevron-down.icon.svg | 4 - .../components/icons/chevron-left.icon.svg | 17 - .../components/icons/chevron-right.icon.svg | 17 - packages/components/icons/chevron-up.icon.svg | 5 - .../components/icons/clear-white.icon.svg | 18 - packages/components/icons/clear.icon.svg | 4 - packages/components/icons/close.icon.svg | 1 - .../components/icons/closed-white.icon.svg | 18 - packages/components/icons/closed.icon.svg | 17 - .../icons/comment-add-white.icon.svg | 18 - .../components/icons/comment-add.icon.svg | 17 - .../icons/comment-disabled-white.icon.svg | 18 - .../icons/comment-disabled.icon.svg | 17 - .../components/icons/comment-white.icon.svg | 20 - packages/components/icons/comment.icon.svg | 17 - .../components/icons/communications.icon.svg | 15 - .../icons/competency-library.icon.svg | 7 - packages/components/icons/configure.icon.svg | 17 - packages/components/icons/connect.icon.svg | 3 - packages/components/icons/custom.icon.svg | 17 - packages/components/icons/dashboard.icon.svg | 19 - .../components/icons/date-end-white.icon.svg | 19 - packages/components/icons/date-end.icon.svg | 17 - .../icons/date-range-white.icon.svg | 21 - packages/components/icons/date-range.icon.svg | 17 - .../icons/date-start-white.icon.svg | 19 - packages/components/icons/date-start.icon.svg | 17 - .../components/icons/decrease-indent.icon.svg | 3 - .../icons/delta-bare-white.icon.svg | 18 - packages/components/icons/delta-bare.icon.svg | 17 - packages/components/icons/delta-flat.icon.svg | 1 - .../components/icons/delta-negative.icon.svg | 1 - .../components/icons/delta-positive.icon.svg | 1 - .../components/icons/delta-white.icon.svg | 19 - packages/components/icons/delta.icon.svg | 18 - .../components/icons/demographics.icon.svg | 17 - packages/components/icons/department.icon.svg | 6 - .../components/icons/draft-white.icon.svg | 19 - packages/components/icons/draft.icon.svg | 17 - packages/components/icons/drag.icon.svg | 17 - packages/components/icons/duplicate.icon.svg | 17 - packages/components/icons/edit.icon.svg | 17 - .../components/icons/effectiveness.icon.svg | 17 - packages/components/icons/ellipsis.icon.svg | 17 - packages/components/icons/email.icon.svg | 15 - .../components/icons/empty-white.icon.svg | 13 - packages/components/icons/empty.icon.svg | 7 - packages/components/icons/end.icon.svg | 1 - .../icons/engagement-white.icon.svg | 18 - packages/components/icons/engagement.icon.svg | 17 - .../components/icons/equal-white.icon.svg | 19 - packages/components/icons/equal.icon.svg | 12 - .../icons/exclamation-octagon-white.icon.svg | 19 - .../icons/exclamation-octagon.icon.svg | 17 - .../icons/exclamation-white.icon.svg | 19 - .../components/icons/exclamation.icon.svg | 17 - packages/components/icons/experience.icon.svg | 17 - .../components/icons/export-white.icon.svg | 18 - packages/components/icons/export.icon.svg | 17 - .../components/icons/external-link.icon.svg | 17 - .../icons/face-dissatisfied-white.icon.svg | 16 - .../icons/face-dissatisfied.icon.svg | 17 - .../icons/face-neutral-white.icon.svg | 21 - .../components/icons/face-neutral.icon.svg | 17 - .../icons/face-satisfied-white.icon.svg | 21 - .../components/icons/face-satisfied.icon.svg | 17 - .../face-very-dissatisfied-white.icon.svg | 21 - .../icons/face-very-dissatisfied.icon.svg | 17 - .../icons/face-very-satisfied-white.icon.svg | 21 - .../icons/face-very-satisfied.icon.svg | 17 - packages/components/icons/factors.icon.svg | 15 - .../components/icons/favorite-off.icon.svg | 15 - .../components/icons/favorite-on.icon.svg | 15 - .../icons/feedback-classify-white.icon.svg | 18 - .../icons/feedback-classify.icon.svg | 17 - .../icons/feedback-completed-white.icon.svg | 19 - .../icons/feedback-completed.icon.svg | 17 - .../icons/feedback-report-white.icon.svg | 20 - .../components/icons/feedback-report.icon.svg | 17 - .../icons/feedback-review-white.icon.svg | 19 - .../components/icons/feedback-review.icon.svg | 17 - .../icons/feedback-share-white.icon.svg | 18 - .../components/icons/feedback-share.icon.svg | 17 - packages/components/icons/file-white.icon.svg | 20 - packages/components/icons/file.icon.svg | 17 - packages/components/icons/filter.icon.svg | 17 - .../components/icons/flag-off-white.icon.svg | 13 - packages/components/icons/flag-off.icon.svg | 17 - packages/components/icons/flag-on.icon.svg | 17 - packages/components/icons/full.icon.svg | 4 - packages/components/icons/grid-view.icon.svg | 17 - packages/components/icons/guidance.icon.svg | 15 - packages/components/icons/hamburger.icon.svg | 17 - .../components/icons/heatmap-white.icon.svg | 18 - packages/components/icons/heatmap.icon.svg | 17 - packages/components/icons/hierarchy.icon.svg | 17 - packages/components/icons/home.icon.svg | 17 - .../components/icons/import-white.icon.svg | 18 - packages/components/icons/import.icon.svg | 17 - .../components/icons/increase-indent.icon.svg | 3 - .../icons/information-white.icon.svg | 19 - .../components/icons/information.icon.svg | 17 - packages/components/icons/insight.icon.svg | 19 - packages/components/icons/invisible.icon.svg | 12 - packages/components/icons/italics.icon.svg | 3 - packages/components/icons/kebab.icon.svg | 19 - .../components/icons/kiosk-white.icon.svg | 19 - packages/components/icons/kiosk.icon.svg | 17 - .../components/icons/launch-white.icon.svg | 18 - packages/components/icons/launch.icon.svg | 12 - .../components/icons/leaderboard.icon.svg | 15 - packages/components/icons/list-view.icon.svg | 17 - packages/components/icons/lock-white.icon.svg | 18 - packages/components/icons/lock.icon.svg | 17 - packages/components/icons/log-out.icon.svg | 17 - packages/components/icons/maximize.icon.svg | 1 - packages/components/icons/meatballs.icon.svg | 17 - packages/components/icons/minimize.icon.svg | 1 - packages/components/icons/minus.icon.svg | 17 - packages/components/icons/navigator.icon.svg | 17 - .../components/icons/notification.icon.svg | 17 - .../icons/numbered-list-rtl.icon.svg | 3 - .../components/icons/numbered-list.icon.svg | 3 - packages/components/icons/open-white.icon.svg | 15 - packages/components/icons/open.icon.svg | 17 - .../components/icons/organization.icon.svg | 3 - .../icons/participation-white.icon.svg | 18 - .../components/icons/participation.icon.svg | 19 - .../components/icons/pause-white.icon.svg | 19 - packages/components/icons/pause.icon.svg | 17 - packages/components/icons/percentage.icon.svg | 6 - .../components/icons/permissions.icon.svg | 17 - packages/components/icons/person.icon.svg | 17 - .../components/icons/photo-upload.icon.svg | 3 - packages/components/icons/power.icon.svg | 17 - .../components/icons/print-white.icon.svg | 15 - packages/components/icons/print.icon.svg | 17 - .../components/icons/process-manager.icon.svg | 17 - .../components/icons/promotion-white.icon.svg | 18 - packages/components/icons/promotion.icon.svg | 12 - .../components/icons/question-white.icon.svg | 19 - packages/components/icons/question.icon.svg | 12 - packages/components/icons/questions.icon.svg | 15 - packages/components/icons/redo.icon.svg | 17 - packages/components/icons/refresh.icon.svg | 17 - .../components/icons/remove-link.icon.svg | 3 - packages/components/icons/repeats.icon.svg | 17 - .../components/icons/report-sharing.icon.svg | 17 - packages/components/icons/report.icon.svg | 17 - packages/components/icons/restore.icon.svg | 11 - packages/components/icons/save.icon.svg | 15 - .../components/icons/search-white.icon.svg | 18 - packages/components/icons/search.icon.svg | 17 - .../components/icons/security-tip.icon.svg | 3 - packages/components/icons/send-rtl.icon.svg | 15 - packages/components/icons/send.icon.svg | 17 - .../components/icons/settings-white.icon.svg | 18 - packages/components/icons/settings.icon.svg | 17 - packages/components/icons/share.icon.svg | 17 - packages/components/icons/skip-white.icon.svg | 19 - packages/components/icons/skip.icon.svg | 12 - .../components/icons/sort-ascending.icon.svg | 17 - .../components/icons/sort-descending.icon.svg | 17 - packages/components/icons/spinner.icon.svg | 1 - packages/components/icons/star-off.icon.svg | 15 - packages/components/icons/star-on.icon.svg | 15 - packages/components/icons/start.icon.svg | 1 - .../components/icons/subtract-white.icon.svg | 18 - packages/components/icons/subtract.icon.svg | 17 - .../components/icons/success-white.icon.svg | 18 - packages/components/icons/success.icon.svg | 9 - packages/components/icons/support.icon.svg | 17 - .../components/icons/surveys-white.icon.svg | 20 - packages/components/icons/surveys.icon.svg | 17 - packages/components/icons/sync.icon.svg | 17 - packages/components/icons/tag.icon.svg | 17 - .../components/icons/tasks-white.icon.svg | 18 - packages/components/icons/tasks.icon.svg | 17 - .../components/icons/template-white.icon.svg | 20 - packages/components/icons/template.icon.svg | 17 - .../icons/text-analytics-white.icon.svg | 22 - .../components/icons/text-analytics.icon.svg | 14 - .../components/icons/thumbs-down.icon.svg | 17 - packages/components/icons/thumbs-up.icon.svg | 17 - packages/components/icons/time-white.icon.svg | 18 - packages/components/icons/time.icon.svg | 12 - .../components/icons/translation.icon.svg | 15 - packages/components/icons/trash.icon.svg | 17 - .../icons/unattributed-white.icon.svg | 21 - .../components/icons/unattributed.icon.svg | 17 - packages/components/icons/underline.icon.svg | 3 - packages/components/icons/undo.icon.svg | 17 - packages/components/icons/user-add.icon.svg | 17 - .../components/icons/user-delete.icon.svg | 17 - packages/components/icons/user-exit.icon.svg | 17 - .../components/icons/user-select.icon.svg | 17 - .../components/icons/user-settings.icon.svg | 17 - .../components/icons/user-update.icon.svg | 17 - packages/components/icons/user.icon.svg | 17 - packages/components/icons/users.icon.svg | 17 - packages/components/icons/visible.icon.svg | 17 - packages/components/icons/writing.icon.svg | 17 - packages/components/icons/zoom-in.icon.svg | 3 - packages/components/icons/zoom-out.icon.svg | 3 - packages/components/jest.config.ts | 44 - packages/components/locales/ar.json | 24 - packages/components/locales/bg.json | 24 - packages/components/locales/cs.json | 24 - packages/components/locales/cy.json | 24 - packages/components/locales/da.json | 24 - packages/components/locales/de.json | 24 - packages/components/locales/el.json | 24 - packages/components/locales/en-GB.json | 24 - packages/components/locales/en.json | 25 - packages/components/locales/es-419.json | 24 - packages/components/locales/es.json | 24 - packages/components/locales/et.json | 24 - packages/components/locales/fi.json | 24 - packages/components/locales/fr-CA.json | 24 - packages/components/locales/fr.json | 24 - packages/components/locales/he.json | 24 - packages/components/locales/hi.json | 24 - packages/components/locales/ht.json | 24 - packages/components/locales/hu.json | 24 - packages/components/locales/id.json | 24 - packages/components/locales/it.json | 24 - packages/components/locales/ja.json | 24 - packages/components/locales/km-KH.json | 24 - packages/components/locales/ko.json | 24 - packages/components/locales/lt.json | 24 - packages/components/locales/lv.json | 24 - packages/components/locales/mi.json | 24 - packages/components/locales/ms.json | 24 - packages/components/locales/nb.json | 24 - packages/components/locales/nl.json | 24 - packages/components/locales/pl.json | 24 - packages/components/locales/pt-BR.json | 24 - packages/components/locales/pt.json | 24 - packages/components/locales/ro.json | 24 - packages/components/locales/ru.json | 24 - packages/components/locales/si-LK.json | 24 - packages/components/locales/sk.json | 24 - packages/components/locales/sr.json | 24 - packages/components/locales/sv.json | 24 - packages/components/locales/th.json | 24 - packages/components/locales/tl.json | 24 - packages/components/locales/tr.json | 24 - packages/components/locales/uk.json | 24 - packages/components/locales/vi.json | 24 - packages/components/locales/zh-TW.json | 24 - packages/components/locales/zh.json | 24 - packages/components/package.json | 104 -- packages/components/postcss.config.js | 9 - packages/components/rollup.config.mjs | 87 -- packages/components/setupTests.ts | 1 - .../components/src/Button/Button.module.scss | 199 ---- packages/components/src/Button/Button.tsx | 49 - .../_docs/Button.stickersheet.stories.tsx | 241 ----- packages/components/src/Button/_mixins.scss | 18 - .../components/src/Button/_variables.scss | 24 - .../components/GenericButton.module.scss | 92 -- .../Button/components/GenericButton.spec.tsx | 113 --- .../src/Button/components/GenericButton.tsx | 366 ------- packages/components/src/Button/index.ts | 1 - .../src/ButtonGroup/ButtonGroup.module.scss | 72 -- .../src/ButtonGroup/ButtonGroup.tsx | 70 -- .../ButtonGroup/_docs/ButtonGroup.stories.tsx | 227 ----- packages/components/src/ButtonGroup/index.ts | 1 - .../src/ClearButton/ClearButton.module.scss | 73 -- .../src/ClearButton/ClearButton.tsx | 34 - packages/components/src/ClearButton/index.ts | 1 - .../components/src/Filter/Filter.spec.tsx | 61 -- packages/components/src/Filter/Filter.tsx | 72 -- .../components/src/Filter/_docs/Filter.mdx | 93 -- .../_docs/Filter.stickersheet.stories.tsx | 49 - .../src/Filter/_docs/Filter.stories.tsx | 54 -- .../_docs/controls/renderTriggerControls.tsx | 30 - .../FilterContents/FilterContents.module.scss | 5 - .../FilterContents/FilterContents.tsx | 24 - .../Filter/components/FilterContents/index.ts | 1 - .../FilterPopover/FilterPopover.module.scss | 11 - .../FilterPopover/FilterPopover.tsx | 58 -- .../Filter/components/FilterPopover/index.ts | 1 - packages/components/src/Filter/index.ts | 3 - packages/components/src/Filter/types.ts | 3 - .../src/FilterBar/FilterBar.module.scss | 19 - .../src/FilterBar/FilterBar.spec.tsx | 890 ------------------ .../components/src/FilterBar/FilterBar.tsx | 54 -- .../src/FilterBar/_docs/FilterBar.mdx | 343 ------- .../_docs/FilterBar.stickersheet.stories.tsx | 181 ---- .../src/FilterBar/_docs/FilterBar.stories.tsx | 672 ------------- .../FilterBar/context/FilterBarContext.tsx | 134 --- .../reducer/filterBarStateReducer.spec.ts | 65 -- .../context/reducer/filterBarStateReducer.ts | 40 - .../reducer/setupFilterBarState.spec.tsx | 62 -- .../context/reducer/setupFilterBarState.ts | 41 - .../reducer/updateSingleFilter.spec.ts | 62 -- .../context/reducer/updateSingleFilter.ts | 15 - .../context/reducer/updateValues.spec.ts | 158 ---- .../FilterBar/context/reducer/updateValues.ts | 16 - .../components/src/FilterBar/context/types.ts | 38 - .../utils/checkShouldUpdateValues.spec.ts | 69 -- .../context/utils/checkShouldUpdateValues.ts | 22 - .../context/utils/getInactiveFilters.spec.ts | 66 -- .../context/utils/getInactiveFilters.ts | 10 - .../context/utils/getIsUsableWhenArgs.spec.ts | 50 - .../context/utils/getIsUsableWhenArgs.ts | 20 - .../context/utils/getMappedFilters.spec.tsx | 32 - .../context/utils/getMappedFilters.ts | 10 - .../context/utils/getValidValue.spec.ts | 32 - .../FilterBar/context/utils/getValidValue.ts | 8 - .../utils/updateDependentFilters.spec.ts | 180 ---- .../context/utils/updateDependentFilters.ts | 37 - packages/components/src/FilterBar/index.ts | 4 - .../AddFiltersMenu/AddFiltersMenu.spec.tsx | 84 -- .../AddFiltersMenu/AddFiltersMenu.tsx | 35 - .../subcomponents/AddFiltersMenu/index.ts | 1 - .../ClearAllButton/ClearAllButton.module.scss | 3 - .../ClearAllButton/ClearAllButton.tsx | 20 - .../subcomponents/ClearAllButton/index.ts | 1 - .../FilterBarButton/FilterBarButton.spec.tsx | 65 -- .../FilterBarButton/FilterBarButton.tsx | 32 - .../subcomponents/FilterBarButton/index.ts | 1 - .../FilterBarDatePicker.spec.tsx | 165 ---- .../FilterBarDatePicker.tsx | 63 -- .../FilterBarDatePicker/index.ts | 1 - .../FilterBarDateRangePicker.spec.tsx | 180 ---- .../FilterBarDateRangePicker.tsx | 64 -- .../FilterBarDateRangePicker/index.ts | 1 - .../FilterBarMultiSelect.spec.tsx | 294 ------ .../FilterBarMultiSelect.tsx | 116 --- .../FilterBarMultiSelect/index.ts | 1 - .../FilterBarSelect/FilterBarSelect.spec.tsx | 248 ----- .../FilterBarSelect/FilterBarSelect.tsx | 73 -- .../subcomponents/FilterBarSelect/index.ts | 1 - .../src/FilterBar/subcomponents/index.ts | 4 - packages/components/src/FilterBar/types.ts | 42 - .../FilterBar/utils/checkArraysMatch.spec.ts | 18 - .../src/FilterBar/utils/checkArraysMatch.ts | 4 - .../FilterButton/FilterButton.module.scss | 22 - .../FilterButton/FilterButton.spec.tsx | 42 - .../FilterButton/FilterButton.tsx | 60 -- .../src/FilterButton/FilterButton/index.ts | 1 - .../FilterButtonRemovable.spec.tsx | 84 -- .../FilterButtonRemovable.tsx | 49 - .../FilterButtonRemovable/index.ts | 1 - .../_docs/FilterButton.stories.tsx | 54 -- .../_docs/FilterButtonRemovable.stories.tsx | 46 - .../src/FilterButton/_docs/filter-buttons.mdx | 46 - .../filter-buttons.stickersheet.stories.tsx | 84 -- .../FilterButtonBase.module.scss | 57 -- .../FilterButtonBase/FilterButtonBase.tsx | 25 - .../FilterButtonBase/_variables.scss | 17 - .../_subcomponents/FilterButtonBase/index.ts | 1 - packages/components/src/FilterButton/index.ts | 2 - .../FilterDatePicker.playwright.spec.tsx | 27 - .../FilterDatePicker.spec.tsx | 251 ----- .../src/FilterDatePicker/FilterDatePicker.tsx | 54 -- .../_docs/FilterDatePicker.mdx | 46 - .../FilterDatePicker.stickersheet.stories.tsx | 127 --- .../_docs/FilterDatePicker.stories.tsx | 337 ------- .../_docs/controls/defaultMonthControls.ts | 16 - .../_docs/controls/disabledDaysControls.ts | 42 - .../_docs/controls/validationControls.ts | 82 -- .../hooks/useDateInputHandlers.spec.ts | 355 ------- .../hooks/useDateInputHandlers.ts | 99 -- .../hooks/useDateValidation.spec.tsx | 81 -- .../hooks/useDateValidation.ts | 58 -- .../components/src/FilterDatePicker/index.ts | 6 - .../DateInputField/DateInputField.module.scss | 3 - .../DateInputField/DateInputField.tsx | 93 -- .../subcomponents/DateInputField/index.ts | 1 - .../FilterDatePickerField.module.scss | 7 - .../FilterDatePickerField.spec.tsx | 337 ------- .../FilterDatePickerField.tsx | 201 ---- .../filterDatePickerFieldReducer.tsx | 54 -- .../FilterDatePickerField/index.ts | 1 - .../components/src/FilterDatePicker/types.ts | 17 - .../utils/getDateValidationHandler.spec.tsx | 90 -- .../utils/getDateValidationHandler.tsx | 41 - .../utils/transformDateToInputValue.ts | 7 - .../utils/validateDate.spec.ts | 128 --- .../FilterDatePicker/utils/validateDate.ts | 27 - .../FilterDateRangePicker.spec.tsx | 122 --- .../FilterDateRangePicker.tsx | 58 -- .../_docs/FilterDateRangePicker.mdx | 50 - ...erDateRangePicker.stickersheet.stories.tsx | 197 ---- .../_docs/FilterDateRangePicker.stories.tsx | 449 --------- .../_docs/controls/defaultMonthControls.ts | 16 - .../_docs/controls/disabledDaysControls.ts | 42 - .../_docs/controls/validationControls.ts | 82 -- .../src/FilterDateRangePicker/index.ts | 2 - .../DateInputDescription.module.scss | 10 - .../DateInputDescription.spec.tsx | 43 - .../DateInputDescription.tsx | 51 - .../DateInputDescription/index.ts | 1 - .../formatDescriptionInputFormat.spec.ts | 12 - .../utils/formatDescriptionInputFormat.ts | 2 - .../DateRangeDisplayLabel.module.scss | 6 - .../DateRangeDisplayLabel.tsx | 26 - .../DateRangeDisplayLabel/index.ts | 1 - .../DateRangeInputField.module.scss | 48 - .../DateRangeInputField.spec.tsx | 116 --- .../DateRangeInputField.tsx | 151 --- .../DateRangeInputField/index.ts | 1 - .../DateRangeValidationMessage.module.scss | 6 - .../DateRangeValidationMessage.spec.tsx | 91 -- .../DateRangeValidationMessage.tsx | 83 -- .../DateRangeValidationMessage/index.ts | 1 - .../FilterDateRangePickerField.module.scss | 9 - .../FilterDateRangePickerField.spec.tsx | 701 -------------- .../FilterDateRangePickerField.tsx | 324 ------- .../filterDateRangePickerFieldReducer.tsx | 77 -- .../hooks/useEndDateValidation.spec.tsx | 68 -- .../hooks/useEndDateValidation.ts | 71 -- .../hooks/useStartDateValidation.spec.tsx | 35 - .../hooks/useStartDateValidation.ts | 36 - .../FilterDateRangePickerField/index.ts | 1 - .../FilterDateRangePickerField/types.ts | 6 - .../utils/isValidRange.spec.ts | 51 - .../utils/isValidRange.ts | 7 - .../validateEndDateBeforeStartDate.spec.ts | 105 --- .../utils/validateEndDateBeforeStartDate.ts | 53 -- .../utils/isCompleteDateRange.spec.ts | 23 - .../utils/isCompleteDateRange.ts | 6 - .../FilterMultiSelect.playwright.spec.tsx | 143 --- .../FilterMultiSelect/FilterMultiSelect.tsx | 35 - .../components/src/FilterMultiSelect/index.ts | 5 - .../MenuTriggerProvider.spec.tsx | 189 ---- .../MenuTriggerProvider.tsx | 66 -- .../provider/MenuTriggerProvider/index.ts | 1 - .../SelectionProvider.spec.tsx | 589 ------------ .../SelectionProvider/SelectionProvider.tsx | 106 --- .../provider/SelectionProvider/index.ts | 1 - .../src/FilterMultiSelect/provider/index.ts | 2 - .../subcomponents/ListBox/ListBox.module.scss | 18 - .../subcomponents/ListBox/ListBox.tsx | 97 -- .../subcomponents/ListBox/index.ts | 1 - .../ListBoxSection/ListBoxSection.module.scss | 3 - .../ListBoxSection/ListBoxSection.tsx | 25 - .../subcomponents/ListBoxSection/index.ts | 1 - .../LoadMoreButton/LoadMoreButton.module.scss | 5 - .../LoadMoreButton/LoadMoreButton.tsx | 13 - .../subcomponents/LoadMoreButton/index.ts | 1 - .../MenuFooter/MenuFooter.module.scss | 9 - .../MenuLayout/MenuFooter/MenuFooter.tsx | 12 - .../MenuLayout/MenuFooter/index.ts | 1 - .../MenuLoadingSkeleton.module.scss | 10 - .../MenuLoadingSkeleton.tsx | 32 - .../MenuLayout/MenuLoadingSkeleton/index.ts | 1 - .../subcomponents/MenuLayout/index.ts | 2 - .../MenuPopup/MenuPopup.module.scss | 26 - .../subcomponents/MenuPopup/MenuPopup.tsx | 61 -- .../subcomponents/MenuPopup/index.ts | 1 - .../MultiSelectOption.module.scss | 113 --- .../MultiSelectOption.spec.tsx | 104 -- .../MultiSelectOption/MultiSelectOption.tsx | 65 -- .../subcomponents/MultiSelectOption/index.ts | 1 - .../NoResults/NoResults.module.scss | 3 - .../subcomponents/NoResults/NoResults.tsx | 20 - .../subcomponents/NoResults/index.ts | 1 - .../subcomponents/Root/Root.tsx | 83 -- .../subcomponents/Root/index.ts | 1 - .../SearchInput/SearchInput.module.scss | 6 - .../SearchInput/SearchInput.spec.tsx | 52 - .../subcomponents/SearchInput/SearchInput.tsx | 44 - .../subcomponents/SearchInput/index.ts | 1 - .../SectionDivider/SectionDivider.module.scss | 3 - .../SectionDivider/SectionDivider.tsx | 9 - .../subcomponents/SectionDivider/index.ts | 1 - .../ClearButton/ClearButton.spec.tsx | 69 -- .../ClearButton/ClearButton.tsx | 43 - .../ClearButton/index.ts | 1 - .../SelectAllButton/SelectAllButton.spec.tsx | 113 --- .../SelectAllButton/SelectAllButton.tsx | 41 - .../SelectAllButton/index.ts | 1 - .../SelectionControlButton.module.scss | 71 -- .../SelectionControlButton/index.ts | 2 - .../FilterTriggerButton.tsx | 42 - .../Trigger/FilterTriggerButton/index.ts | 1 - .../RemovableFilterTrigger.tsx | 42 - .../Trigger/RemovableFilterTrigger/index.ts | 1 - .../subcomponents/Trigger/index.ts | 2 - .../FilterMultiSelect/subcomponents/index.ts | 12 - .../components/src/FilterMultiSelect/types.ts | 12 - .../utils/getSelectedOptionKeys.spec.ts | 51 - .../utils/getSelectedOptionKeys.ts | 18 - .../utils/getSelectedOptionLabels.spec.ts | 51 - .../utils/getSelectedOptionLabels.ts | 19 - .../utils/getTruncatedLabel.ts | 19 - .../utils/getTruncatedLabels.spec.ts | 52 - .../src/FilterMultiSelect/utils/index.ts | 3 - .../src/FilterSelect/FilterSelect.module.scss | 7 - .../src/FilterSelect/FilterSelect.spec.tsx | 216 ----- .../src/FilterSelect/FilterSelect.tsx | 141 --- .../src/FilterSelect/_docs/FilterSelect.mdx | 32 - .../FilterSelect.stickersheet.stories.tsx | 288 ------ .../_docs/FilterSelect.stories.tsx | 88 -- .../src/FilterSelect/_docs/mockData.ts | 94 -- .../FilterSelect/context/SelectContext.tsx | 37 - .../src/FilterSelect/context/index.ts | 1 - packages/components/src/FilterSelect/index.ts | 2 - .../subcomponents/ListBox/ListBox.module.scss | 12 - .../subcomponents/ListBox/ListBox.tsx | 43 - .../subcomponents/ListBox/index.ts | 1 - .../ListBoxSection/ListBoxSection.module.scss | 20 - .../ListBoxSection/ListBoxSection.tsx | 43 - .../subcomponents/ListBoxSection/index.ts | 1 - .../subcomponents/ListItem/ListItem.tsx | 19 - .../subcomponents/ListItem/index.ts | 1 - .../subcomponents/ListItems/ListItems.tsx | 22 - .../subcomponents/ListItems/index.ts | 1 - .../subcomponents/Option/Option.module.scss | 85 -- .../subcomponents/Option/Option.tsx | 55 -- .../subcomponents/Option/index.ts | 1 - .../subcomponents/Overlay/Overlay.tsx | 48 - .../subcomponents/Overlay/index.ts | 1 - .../SectionDivider/SectionDivider.module.scss | 11 - .../SectionDivider/SectionDivider.tsx | 9 - .../subcomponents/SectionDivider/index.ts | 1 - packages/components/src/FilterSelect/types.ts | 35 - .../FilterSelect/utils/isSelectOptionGroup.ts | 6 - ...transformSelectItemToCollectionElement.tsx | 18 - .../src/InputSearch/InputSearch.module.scss | 240 ----- .../src/InputSearch/InputSearch.spec.tsx | 50 - .../src/InputSearch/InputSearch.tsx | 89 -- packages/components/src/InputSearch/index.ts | 1 - .../KaizenProvider/KaizenProvider.spec.tsx | 29 - .../src/KaizenProvider/KaizenProvider.tsx | 21 - .../OptionalIntlProvider.spec.tsx | 39 - .../OptionalIntlProvider.tsx | 19 - .../OptionalIntlProvider/index.ts | 1 - .../ThemeProvider/ThemeManager.spec.ts | 26 - .../ThemeProvider/ThemeManager.ts | 82 -- .../ThemeProvider/ThemeProvider.tsx | 88 -- .../src/KaizenProvider/ThemeProvider/index.ts | 3 - .../ThemeProvider/themes/heart.ts | 314 ------ .../ThemeProvider/themes/index.ts | 5 - .../ThemeProvider/themes/types.ts | 250 ----- .../KaizenProvider/_docs/KaizenProvider.mdx | 54 -- .../_docs/code-diffs/migration-bonus.diff | 12 - .../migration-fe-template-bonus.diff | 17 - .../migration-fe-template-to-v1.diff | 20 - .../_docs/code-diffs/migration-to-v1.diff | 15 - .../_docs/internationalization-in-kaizen.mdx | 64 -- .../_docs/managing-the-theme.mdx | 46 - .../components/src/KaizenProvider/index.ts | 2 - .../LabelledMessage.module.scss | 10 - .../src/LabelledMessage/LabelledMessage.tsx | 20 - .../LabelledMessage.stickersheet.stories.tsx | 28 - .../_docs/LabelledMessage.stories.tsx | 42 - .../components/src/LabelledMessage/index.ts | 1 - packages/components/src/SVG/SVG.module.scss | 74 -- packages/components/src/SVG/SVG.spec.tsx | 66 -- packages/components/src/SVG/SVG.tsx | 82 -- packages/components/src/SVG/icons/AddIcon.tsx | 14 - .../components/src/SVG/icons/CheckIcon.tsx | 14 - .../src/SVG/icons/ChevronDownIcon.tsx | 14 - .../src/SVG/icons/ChevronUpIcon.tsx | 14 - .../components/src/SVG/icons/ClearIcon.tsx | 12 - .../components/src/SVG/icons/CloseIcon.tsx | 14 - .../src/SVG/icons/IndicatorActiveIcon.tsx | 16 - .../src/SVG/icons/IndicatorInactiveIcon.tsx | 14 - .../components/src/SVG/icons/SearchIcon.tsx | 13 - .../components/src/SVG/icons/SuccessIcon.tsx | 11 - .../components/src/SVG/icons/VisibleIcon.tsx | 12 - packages/components/src/SVG/index.ts | 1 - packages/components/src/SVG/styles.scss | 19 - packages/components/src/Workflow/Workflow.tsx | 57 -- .../_docs/ProgressStepper.stories.tsx | 127 --- .../src/Workflow/_docs/Workflow.mdx | 174 ---- .../src/Workflow/_docs/Workflow.stories.tsx | 232 ----- .../Workflow/_docs/WorkflowFooter.stories.tsx | 154 --- .../Workflow/_docs/WorkflowHeader.stories.tsx | 121 --- .../src/Workflow/_docs/controls/controls.tsx | 78 -- .../src/Workflow/_docs/controls/index.tsx | 1 - packages/components/src/Workflow/index.ts | 1 - .../Workflow/subcomponents/Footer/Footer.tsx | 38 - .../FooterActions/FooterActions.module.scss | 15 - .../FooterActions/FooterActions.tsx | 30 - .../Footer/components/FooterActions/index.ts | 1 - .../ProgressStepper.module.scss | 105 --- .../ProgressStepper/ProgressStepper.tsx | 134 --- .../components/ProgressStepper/index.ts | 1 - .../components/Root/FooterRoot.module.scss | 22 - .../Footer/components/Root/Root.tsx | 23 - .../Footer/components/Root/index.ts | 1 - .../subcomponents/Footer/components/index.ts | 3 - .../Workflow/subcomponents/Footer/index.ts | 2 - .../Workflow/subcomponents/Header/Header.tsx | 21 - .../components/Actions/Actions.module.scss | 17 - .../Header/components/Actions/Actions.tsx | 25 - .../Header/components/Actions/index.ts | 1 - .../components/Branding/Branding.module.scss | 17 - .../Header/components/Branding/Branding.tsx | 22 - .../Header/components/Branding/index.ts | 1 - .../Header/components/Root/Root.module.scss | 24 - .../Header/components/Root/Root.tsx | 20 - .../Header/components/Root/index.tsx | 1 - .../components/Titles/Titles.module.scss | 23 - .../Header/components/Titles/Titles.tsx | 56 -- .../Header/components/Titles/index.ts | 1 - .../subcomponents/Header/components/index.ts | 4 - .../Workflow/subcomponents/Header/index.ts | 2 - .../subcomponents/Main/Main.module.scss | 4 - .../src/Workflow/subcomponents/Main/Main.tsx | 22 - .../src/Workflow/subcomponents/Main/index.tsx | 1 - .../subcomponents/Wrapper/Wrapper.module.scss | 9 - .../subcomponents/Wrapper/Wrapper.tsx | 22 - .../Workflow/subcomponents/Wrapper/index.ts | 1 - .../src/Workflow/subcomponents/index.ts | 4 - .../src/__future__/Workflow/Workflow.tsx | 57 -- .../_docs/ProgressStepper.stories.tsx | 137 --- .../__future__/Workflow/_docs/Workflow.mdx | 173 ---- .../Workflow/_docs/Workflow.stories.tsx | 256 ----- .../Workflow/_docs/WorkflowFooter.stories.tsx | 161 ---- .../Workflow/_docs/WorkflowHeader.stories.tsx | 121 --- .../Workflow/_docs/controls/controls.tsx | 78 -- .../Workflow/_docs/controls/index.tsx | 1 - .../src/__future__/Workflow/index.ts | 1 - .../Workflow/subcomponents/Footer/Footer.tsx | 38 - .../FooterActions/FooterActions.module.scss | 15 - .../FooterActions/FooterActions.tsx | 30 - .../Footer/components/FooterActions/index.ts | 1 - .../ProgressStepper.module.scss | 105 --- .../ProgressStepper/ProgressStepper.spec.tsx | 45 - .../ProgressStepper/ProgressStepper.tsx | 146 --- .../components/ProgressStepper/index.ts | 1 - .../components/Root/FooterRoot.module.scss | 22 - .../Footer/components/Root/Root.tsx | 23 - .../Footer/components/Root/index.ts | 1 - .../subcomponents/Footer/components/index.ts | 3 - .../Workflow/subcomponents/Footer/index.ts | 2 - .../Workflow/subcomponents/Header/Header.tsx | 21 - .../components/Actions/Actions.module.scss | 17 - .../Header/components/Actions/Actions.tsx | 25 - .../Header/components/Actions/index.ts | 1 - .../components/Branding/Branding.module.scss | 17 - .../Header/components/Branding/Branding.tsx | 22 - .../Header/components/Branding/index.ts | 1 - .../Header/components/Root/Root.module.scss | 24 - .../Header/components/Root/Root.tsx | 20 - .../Header/components/Root/index.tsx | 1 - .../components/Titles/Titles.module.scss | 23 - .../Header/components/Titles/Titles.tsx | 56 -- .../Header/components/Titles/index.ts | 1 - .../subcomponents/Header/components/index.ts | 4 - .../Workflow/subcomponents/Header/index.ts | 2 - .../subcomponents/Main/Main.module.scss | 4 - .../Workflow/subcomponents/Main/Main.tsx | 22 - .../Workflow/subcomponents/Main/index.tsx | 1 - .../subcomponents/Wrapper/Wrapper.module.scss | 9 - .../subcomponents/Wrapper/Wrapper.tsx | 22 - .../Workflow/subcomponents/Wrapper/index.ts | 1 - .../Workflow/subcomponents/index.ts | 4 - packages/components/src/__future__/index.ts | 1 - packages/components/src/index.ts | 15 - .../components/src/types/DataAttributes.ts | 1 - packages/components/src/types/DatePicker.ts | 6 - .../components/src/types/OverrideClassName.ts | 4 - .../components/src/types/StringSuggestions.ts | 4 - packages/components/src/utils/console.ts | 15 - .../components/src/utils/getNodeText.spec.tsx | 31 - packages/components/src/utils/getNodeText.ts | 10 - packages/components/src/utils/isRefObject.ts | 3 - packages/components/styles/_button-reset.scss | 10 - packages/components/styles/_forms.scss | 86 -- packages/components/styles/legacy/_color.scss | 62 -- .../components/styles/legacy/_layout.scss | 60 -- packages/components/styles/legacy/_type.scss | 679 ------------- packages/components/styles/tailwind.css | 3 - packages/components/tailwind.config.js | 11 - packages/components/tsconfig.json | 33 - 703 files changed, 4 insertions(+), 29027 deletions(-) delete mode 100644 packages/components/CHANGELOG.md delete mode 100644 packages/components/future/README.md delete mode 100644 packages/components/future/package.json delete mode 100644 packages/components/icons/academy.icon.svg delete mode 100644 packages/components/icons/action-off-white.icon.svg delete mode 100644 packages/components/icons/action-off.icon.svg delete mode 100644 packages/components/icons/action-on.icon.svg delete mode 100644 packages/components/icons/add-link.icon.svg delete mode 100644 packages/components/icons/add-white.icon.svg delete mode 100644 packages/components/icons/add.icon.svg delete mode 100644 packages/components/icons/archived-white.icon.svg delete mode 100644 packages/components/icons/archived.icon.svg delete mode 100644 packages/components/icons/arrow-backward.icon.svg delete mode 100644 packages/components/icons/arrow-down.icon.svg delete mode 100644 packages/components/icons/arrow-forward.icon.svg delete mode 100644 packages/components/icons/arrow-left.icon.svg delete mode 100644 packages/components/icons/arrow-right.icon.svg delete mode 100644 packages/components/icons/arrow-up.icon.svg delete mode 100644 packages/components/icons/blank.icon.svg delete mode 100644 packages/components/icons/bold.icon.svg delete mode 100644 packages/components/icons/bookmark-off.icon.svg delete mode 100644 packages/components/icons/bookmark-on.icon.svg delete mode 100644 packages/components/icons/branching.icon.svg delete mode 100644 packages/components/icons/bulletted-list.icon.svg delete mode 100644 packages/components/icons/ca-monogram.icon.svg delete mode 100644 packages/components/icons/camera.icon.svg delete mode 100644 packages/components/icons/caution-white.icon.svg delete mode 100644 packages/components/icons/caution.icon.svg delete mode 100644 packages/components/icons/check.icon.svg delete mode 100644 packages/components/icons/chevron-down.icon.svg delete mode 100644 packages/components/icons/chevron-left.icon.svg delete mode 100644 packages/components/icons/chevron-right.icon.svg delete mode 100644 packages/components/icons/chevron-up.icon.svg delete mode 100644 packages/components/icons/clear-white.icon.svg delete mode 100644 packages/components/icons/clear.icon.svg delete mode 100644 packages/components/icons/close.icon.svg delete mode 100644 packages/components/icons/closed-white.icon.svg delete mode 100644 packages/components/icons/closed.icon.svg delete mode 100644 packages/components/icons/comment-add-white.icon.svg delete mode 100644 packages/components/icons/comment-add.icon.svg delete mode 100644 packages/components/icons/comment-disabled-white.icon.svg delete mode 100644 packages/components/icons/comment-disabled.icon.svg delete mode 100644 packages/components/icons/comment-white.icon.svg delete mode 100644 packages/components/icons/comment.icon.svg delete mode 100644 packages/components/icons/communications.icon.svg delete mode 100644 packages/components/icons/competency-library.icon.svg delete mode 100644 packages/components/icons/configure.icon.svg delete mode 100644 packages/components/icons/connect.icon.svg delete mode 100644 packages/components/icons/custom.icon.svg delete mode 100644 packages/components/icons/dashboard.icon.svg delete mode 100644 packages/components/icons/date-end-white.icon.svg delete mode 100644 packages/components/icons/date-end.icon.svg delete mode 100644 packages/components/icons/date-range-white.icon.svg delete mode 100644 packages/components/icons/date-range.icon.svg delete mode 100644 packages/components/icons/date-start-white.icon.svg delete mode 100644 packages/components/icons/date-start.icon.svg delete mode 100644 packages/components/icons/decrease-indent.icon.svg delete mode 100644 packages/components/icons/delta-bare-white.icon.svg delete mode 100644 packages/components/icons/delta-bare.icon.svg delete mode 100644 packages/components/icons/delta-flat.icon.svg delete mode 100644 packages/components/icons/delta-negative.icon.svg delete mode 100644 packages/components/icons/delta-positive.icon.svg delete mode 100644 packages/components/icons/delta-white.icon.svg delete mode 100644 packages/components/icons/delta.icon.svg delete mode 100644 packages/components/icons/demographics.icon.svg delete mode 100644 packages/components/icons/department.icon.svg delete mode 100644 packages/components/icons/draft-white.icon.svg delete mode 100644 packages/components/icons/draft.icon.svg delete mode 100644 packages/components/icons/drag.icon.svg delete mode 100644 packages/components/icons/duplicate.icon.svg delete mode 100644 packages/components/icons/edit.icon.svg delete mode 100644 packages/components/icons/effectiveness.icon.svg delete mode 100644 packages/components/icons/ellipsis.icon.svg delete mode 100644 packages/components/icons/email.icon.svg delete mode 100644 packages/components/icons/empty-white.icon.svg delete mode 100644 packages/components/icons/empty.icon.svg delete mode 100644 packages/components/icons/end.icon.svg delete mode 100644 packages/components/icons/engagement-white.icon.svg delete mode 100644 packages/components/icons/engagement.icon.svg delete mode 100644 packages/components/icons/equal-white.icon.svg delete mode 100644 packages/components/icons/equal.icon.svg delete mode 100644 packages/components/icons/exclamation-octagon-white.icon.svg delete mode 100644 packages/components/icons/exclamation-octagon.icon.svg delete mode 100644 packages/components/icons/exclamation-white.icon.svg delete mode 100644 packages/components/icons/exclamation.icon.svg delete mode 100644 packages/components/icons/experience.icon.svg delete mode 100644 packages/components/icons/export-white.icon.svg delete mode 100644 packages/components/icons/export.icon.svg delete mode 100644 packages/components/icons/external-link.icon.svg delete mode 100644 packages/components/icons/face-dissatisfied-white.icon.svg delete mode 100644 packages/components/icons/face-dissatisfied.icon.svg delete mode 100644 packages/components/icons/face-neutral-white.icon.svg delete mode 100644 packages/components/icons/face-neutral.icon.svg delete mode 100644 packages/components/icons/face-satisfied-white.icon.svg delete mode 100644 packages/components/icons/face-satisfied.icon.svg delete mode 100644 packages/components/icons/face-very-dissatisfied-white.icon.svg delete mode 100644 packages/components/icons/face-very-dissatisfied.icon.svg delete mode 100644 packages/components/icons/face-very-satisfied-white.icon.svg delete mode 100644 packages/components/icons/face-very-satisfied.icon.svg delete mode 100644 packages/components/icons/factors.icon.svg delete mode 100644 packages/components/icons/favorite-off.icon.svg delete mode 100644 packages/components/icons/favorite-on.icon.svg delete mode 100644 packages/components/icons/feedback-classify-white.icon.svg delete mode 100644 packages/components/icons/feedback-classify.icon.svg delete mode 100644 packages/components/icons/feedback-completed-white.icon.svg delete mode 100644 packages/components/icons/feedback-completed.icon.svg delete mode 100644 packages/components/icons/feedback-report-white.icon.svg delete mode 100644 packages/components/icons/feedback-report.icon.svg delete mode 100644 packages/components/icons/feedback-review-white.icon.svg delete mode 100644 packages/components/icons/feedback-review.icon.svg delete mode 100644 packages/components/icons/feedback-share-white.icon.svg delete mode 100644 packages/components/icons/feedback-share.icon.svg delete mode 100644 packages/components/icons/file-white.icon.svg delete mode 100644 packages/components/icons/file.icon.svg delete mode 100644 packages/components/icons/filter.icon.svg delete mode 100644 packages/components/icons/flag-off-white.icon.svg delete mode 100644 packages/components/icons/flag-off.icon.svg delete mode 100644 packages/components/icons/flag-on.icon.svg delete mode 100644 packages/components/icons/full.icon.svg delete mode 100644 packages/components/icons/grid-view.icon.svg delete mode 100644 packages/components/icons/guidance.icon.svg delete mode 100644 packages/components/icons/hamburger.icon.svg delete mode 100644 packages/components/icons/heatmap-white.icon.svg delete mode 100644 packages/components/icons/heatmap.icon.svg delete mode 100644 packages/components/icons/hierarchy.icon.svg delete mode 100644 packages/components/icons/home.icon.svg delete mode 100644 packages/components/icons/import-white.icon.svg delete mode 100644 packages/components/icons/import.icon.svg delete mode 100644 packages/components/icons/increase-indent.icon.svg delete mode 100644 packages/components/icons/information-white.icon.svg delete mode 100644 packages/components/icons/information.icon.svg delete mode 100644 packages/components/icons/insight.icon.svg delete mode 100644 packages/components/icons/invisible.icon.svg delete mode 100644 packages/components/icons/italics.icon.svg delete mode 100644 packages/components/icons/kebab.icon.svg delete mode 100644 packages/components/icons/kiosk-white.icon.svg delete mode 100644 packages/components/icons/kiosk.icon.svg delete mode 100644 packages/components/icons/launch-white.icon.svg delete mode 100644 packages/components/icons/launch.icon.svg delete mode 100644 packages/components/icons/leaderboard.icon.svg delete mode 100644 packages/components/icons/list-view.icon.svg delete mode 100644 packages/components/icons/lock-white.icon.svg delete mode 100644 packages/components/icons/lock.icon.svg delete mode 100644 packages/components/icons/log-out.icon.svg delete mode 100644 packages/components/icons/maximize.icon.svg delete mode 100644 packages/components/icons/meatballs.icon.svg delete mode 100644 packages/components/icons/minimize.icon.svg delete mode 100644 packages/components/icons/minus.icon.svg delete mode 100644 packages/components/icons/navigator.icon.svg delete mode 100644 packages/components/icons/notification.icon.svg delete mode 100644 packages/components/icons/numbered-list-rtl.icon.svg delete mode 100644 packages/components/icons/numbered-list.icon.svg delete mode 100644 packages/components/icons/open-white.icon.svg delete mode 100644 packages/components/icons/open.icon.svg delete mode 100644 packages/components/icons/organization.icon.svg delete mode 100644 packages/components/icons/participation-white.icon.svg delete mode 100644 packages/components/icons/participation.icon.svg delete mode 100644 packages/components/icons/pause-white.icon.svg delete mode 100644 packages/components/icons/pause.icon.svg delete mode 100644 packages/components/icons/percentage.icon.svg delete mode 100644 packages/components/icons/permissions.icon.svg delete mode 100644 packages/components/icons/person.icon.svg delete mode 100644 packages/components/icons/photo-upload.icon.svg delete mode 100644 packages/components/icons/power.icon.svg delete mode 100644 packages/components/icons/print-white.icon.svg delete mode 100644 packages/components/icons/print.icon.svg delete mode 100644 packages/components/icons/process-manager.icon.svg delete mode 100644 packages/components/icons/promotion-white.icon.svg delete mode 100644 packages/components/icons/promotion.icon.svg delete mode 100644 packages/components/icons/question-white.icon.svg delete mode 100644 packages/components/icons/question.icon.svg delete mode 100644 packages/components/icons/questions.icon.svg delete mode 100644 packages/components/icons/redo.icon.svg delete mode 100644 packages/components/icons/refresh.icon.svg delete mode 100644 packages/components/icons/remove-link.icon.svg delete mode 100644 packages/components/icons/repeats.icon.svg delete mode 100644 packages/components/icons/report-sharing.icon.svg delete mode 100644 packages/components/icons/report.icon.svg delete mode 100644 packages/components/icons/restore.icon.svg delete mode 100644 packages/components/icons/save.icon.svg delete mode 100644 packages/components/icons/search-white.icon.svg delete mode 100644 packages/components/icons/search.icon.svg delete mode 100644 packages/components/icons/security-tip.icon.svg delete mode 100644 packages/components/icons/send-rtl.icon.svg delete mode 100644 packages/components/icons/send.icon.svg delete mode 100644 packages/components/icons/settings-white.icon.svg delete mode 100644 packages/components/icons/settings.icon.svg delete mode 100644 packages/components/icons/share.icon.svg delete mode 100644 packages/components/icons/skip-white.icon.svg delete mode 100644 packages/components/icons/skip.icon.svg delete mode 100644 packages/components/icons/sort-ascending.icon.svg delete mode 100644 packages/components/icons/sort-descending.icon.svg delete mode 100644 packages/components/icons/spinner.icon.svg delete mode 100644 packages/components/icons/star-off.icon.svg delete mode 100644 packages/components/icons/star-on.icon.svg delete mode 100644 packages/components/icons/start.icon.svg delete mode 100644 packages/components/icons/subtract-white.icon.svg delete mode 100644 packages/components/icons/subtract.icon.svg delete mode 100644 packages/components/icons/success-white.icon.svg delete mode 100644 packages/components/icons/success.icon.svg delete mode 100644 packages/components/icons/support.icon.svg delete mode 100644 packages/components/icons/surveys-white.icon.svg delete mode 100644 packages/components/icons/surveys.icon.svg delete mode 100644 packages/components/icons/sync.icon.svg delete mode 100644 packages/components/icons/tag.icon.svg delete mode 100644 packages/components/icons/tasks-white.icon.svg delete mode 100644 packages/components/icons/tasks.icon.svg delete mode 100644 packages/components/icons/template-white.icon.svg delete mode 100644 packages/components/icons/template.icon.svg delete mode 100644 packages/components/icons/text-analytics-white.icon.svg delete mode 100644 packages/components/icons/text-analytics.icon.svg delete mode 100644 packages/components/icons/thumbs-down.icon.svg delete mode 100644 packages/components/icons/thumbs-up.icon.svg delete mode 100644 packages/components/icons/time-white.icon.svg delete mode 100644 packages/components/icons/time.icon.svg delete mode 100644 packages/components/icons/translation.icon.svg delete mode 100644 packages/components/icons/trash.icon.svg delete mode 100644 packages/components/icons/unattributed-white.icon.svg delete mode 100644 packages/components/icons/unattributed.icon.svg delete mode 100644 packages/components/icons/underline.icon.svg delete mode 100644 packages/components/icons/undo.icon.svg delete mode 100644 packages/components/icons/user-add.icon.svg delete mode 100644 packages/components/icons/user-delete.icon.svg delete mode 100644 packages/components/icons/user-exit.icon.svg delete mode 100644 packages/components/icons/user-select.icon.svg delete mode 100644 packages/components/icons/user-settings.icon.svg delete mode 100644 packages/components/icons/user-update.icon.svg delete mode 100644 packages/components/icons/user.icon.svg delete mode 100644 packages/components/icons/users.icon.svg delete mode 100644 packages/components/icons/visible.icon.svg delete mode 100644 packages/components/icons/writing.icon.svg delete mode 100644 packages/components/icons/zoom-in.icon.svg delete mode 100644 packages/components/icons/zoom-out.icon.svg delete mode 100644 packages/components/jest.config.ts delete mode 100644 packages/components/locales/ar.json delete mode 100644 packages/components/locales/bg.json delete mode 100644 packages/components/locales/cs.json delete mode 100644 packages/components/locales/cy.json delete mode 100644 packages/components/locales/da.json delete mode 100644 packages/components/locales/de.json delete mode 100644 packages/components/locales/el.json delete mode 100644 packages/components/locales/en-GB.json delete mode 100644 packages/components/locales/en.json delete mode 100644 packages/components/locales/es-419.json delete mode 100644 packages/components/locales/es.json delete mode 100644 packages/components/locales/et.json delete mode 100644 packages/components/locales/fi.json delete mode 100644 packages/components/locales/fr-CA.json delete mode 100644 packages/components/locales/fr.json delete mode 100644 packages/components/locales/he.json delete mode 100644 packages/components/locales/hi.json delete mode 100644 packages/components/locales/ht.json delete mode 100644 packages/components/locales/hu.json delete mode 100644 packages/components/locales/id.json delete mode 100644 packages/components/locales/it.json delete mode 100644 packages/components/locales/ja.json delete mode 100644 packages/components/locales/km-KH.json delete mode 100644 packages/components/locales/ko.json delete mode 100644 packages/components/locales/lt.json delete mode 100644 packages/components/locales/lv.json delete mode 100644 packages/components/locales/mi.json delete mode 100644 packages/components/locales/ms.json delete mode 100644 packages/components/locales/nb.json delete mode 100644 packages/components/locales/nl.json delete mode 100644 packages/components/locales/pl.json delete mode 100644 packages/components/locales/pt-BR.json delete mode 100644 packages/components/locales/pt.json delete mode 100644 packages/components/locales/ro.json delete mode 100644 packages/components/locales/ru.json delete mode 100644 packages/components/locales/si-LK.json delete mode 100644 packages/components/locales/sk.json delete mode 100644 packages/components/locales/sr.json delete mode 100644 packages/components/locales/sv.json delete mode 100644 packages/components/locales/th.json delete mode 100644 packages/components/locales/tl.json delete mode 100644 packages/components/locales/tr.json delete mode 100644 packages/components/locales/uk.json delete mode 100644 packages/components/locales/vi.json delete mode 100644 packages/components/locales/zh-TW.json delete mode 100644 packages/components/locales/zh.json delete mode 100644 packages/components/package.json delete mode 100644 packages/components/postcss.config.js delete mode 100644 packages/components/rollup.config.mjs delete mode 100644 packages/components/setupTests.ts delete mode 100644 packages/components/src/Button/Button.module.scss delete mode 100755 packages/components/src/Button/Button.tsx delete mode 100644 packages/components/src/Button/_docs/Button.stickersheet.stories.tsx delete mode 100644 packages/components/src/Button/_mixins.scss delete mode 100644 packages/components/src/Button/_variables.scss delete mode 100755 packages/components/src/Button/components/GenericButton.module.scss delete mode 100644 packages/components/src/Button/components/GenericButton.spec.tsx delete mode 100755 packages/components/src/Button/components/GenericButton.tsx delete mode 100644 packages/components/src/Button/index.ts delete mode 100644 packages/components/src/ButtonGroup/ButtonGroup.module.scss delete mode 100644 packages/components/src/ButtonGroup/ButtonGroup.tsx delete mode 100644 packages/components/src/ButtonGroup/_docs/ButtonGroup.stories.tsx delete mode 100644 packages/components/src/ButtonGroup/index.ts delete mode 100644 packages/components/src/ClearButton/ClearButton.module.scss delete mode 100644 packages/components/src/ClearButton/ClearButton.tsx delete mode 100644 packages/components/src/ClearButton/index.ts delete mode 100644 packages/components/src/Filter/Filter.spec.tsx delete mode 100644 packages/components/src/Filter/Filter.tsx delete mode 100644 packages/components/src/Filter/_docs/Filter.mdx delete mode 100644 packages/components/src/Filter/_docs/Filter.stickersheet.stories.tsx delete mode 100644 packages/components/src/Filter/_docs/Filter.stories.tsx delete mode 100644 packages/components/src/Filter/_docs/controls/renderTriggerControls.tsx delete mode 100644 packages/components/src/Filter/components/FilterContents/FilterContents.module.scss delete mode 100644 packages/components/src/Filter/components/FilterContents/FilterContents.tsx delete mode 100644 packages/components/src/Filter/components/FilterContents/index.ts delete mode 100644 packages/components/src/Filter/components/FilterPopover/FilterPopover.module.scss delete mode 100644 packages/components/src/Filter/components/FilterPopover/FilterPopover.tsx delete mode 100644 packages/components/src/Filter/components/FilterPopover/index.ts delete mode 100644 packages/components/src/Filter/index.ts delete mode 100644 packages/components/src/Filter/types.ts delete mode 100644 packages/components/src/FilterBar/FilterBar.module.scss delete mode 100644 packages/components/src/FilterBar/FilterBar.spec.tsx delete mode 100644 packages/components/src/FilterBar/FilterBar.tsx delete mode 100644 packages/components/src/FilterBar/_docs/FilterBar.mdx delete mode 100644 packages/components/src/FilterBar/_docs/FilterBar.stickersheet.stories.tsx delete mode 100644 packages/components/src/FilterBar/_docs/FilterBar.stories.tsx delete mode 100644 packages/components/src/FilterBar/context/FilterBarContext.tsx delete mode 100644 packages/components/src/FilterBar/context/reducer/filterBarStateReducer.spec.ts delete mode 100644 packages/components/src/FilterBar/context/reducer/filterBarStateReducer.ts delete mode 100644 packages/components/src/FilterBar/context/reducer/setupFilterBarState.spec.tsx delete mode 100644 packages/components/src/FilterBar/context/reducer/setupFilterBarState.ts delete mode 100644 packages/components/src/FilterBar/context/reducer/updateSingleFilter.spec.ts delete mode 100644 packages/components/src/FilterBar/context/reducer/updateSingleFilter.ts delete mode 100644 packages/components/src/FilterBar/context/reducer/updateValues.spec.ts delete mode 100644 packages/components/src/FilterBar/context/reducer/updateValues.ts delete mode 100644 packages/components/src/FilterBar/context/types.ts delete mode 100644 packages/components/src/FilterBar/context/utils/checkShouldUpdateValues.spec.ts delete mode 100644 packages/components/src/FilterBar/context/utils/checkShouldUpdateValues.ts delete mode 100644 packages/components/src/FilterBar/context/utils/getInactiveFilters.spec.ts delete mode 100644 packages/components/src/FilterBar/context/utils/getInactiveFilters.ts delete mode 100644 packages/components/src/FilterBar/context/utils/getIsUsableWhenArgs.spec.ts delete mode 100644 packages/components/src/FilterBar/context/utils/getIsUsableWhenArgs.ts delete mode 100644 packages/components/src/FilterBar/context/utils/getMappedFilters.spec.tsx delete mode 100644 packages/components/src/FilterBar/context/utils/getMappedFilters.ts delete mode 100644 packages/components/src/FilterBar/context/utils/getValidValue.spec.ts delete mode 100644 packages/components/src/FilterBar/context/utils/getValidValue.ts delete mode 100644 packages/components/src/FilterBar/context/utils/updateDependentFilters.spec.ts delete mode 100644 packages/components/src/FilterBar/context/utils/updateDependentFilters.ts delete mode 100644 packages/components/src/FilterBar/index.ts delete mode 100644 packages/components/src/FilterBar/subcomponents/AddFiltersMenu/AddFiltersMenu.spec.tsx delete mode 100644 packages/components/src/FilterBar/subcomponents/AddFiltersMenu/AddFiltersMenu.tsx delete mode 100644 packages/components/src/FilterBar/subcomponents/AddFiltersMenu/index.ts delete mode 100644 packages/components/src/FilterBar/subcomponents/ClearAllButton/ClearAllButton.module.scss delete mode 100644 packages/components/src/FilterBar/subcomponents/ClearAllButton/ClearAllButton.tsx delete mode 100644 packages/components/src/FilterBar/subcomponents/ClearAllButton/index.ts delete mode 100644 packages/components/src/FilterBar/subcomponents/FilterBarButton/FilterBarButton.spec.tsx delete mode 100644 packages/components/src/FilterBar/subcomponents/FilterBarButton/FilterBarButton.tsx delete mode 100644 packages/components/src/FilterBar/subcomponents/FilterBarButton/index.ts delete mode 100644 packages/components/src/FilterBar/subcomponents/FilterBarDatePicker/FilterBarDatePicker.spec.tsx delete mode 100644 packages/components/src/FilterBar/subcomponents/FilterBarDatePicker/FilterBarDatePicker.tsx delete mode 100644 packages/components/src/FilterBar/subcomponents/FilterBarDatePicker/index.ts delete mode 100644 packages/components/src/FilterBar/subcomponents/FilterBarDateRangePicker/FilterBarDateRangePicker.spec.tsx delete mode 100644 packages/components/src/FilterBar/subcomponents/FilterBarDateRangePicker/FilterBarDateRangePicker.tsx delete mode 100644 packages/components/src/FilterBar/subcomponents/FilterBarDateRangePicker/index.ts delete mode 100644 packages/components/src/FilterBar/subcomponents/FilterBarMultiSelect/FilterBarMultiSelect.spec.tsx delete mode 100644 packages/components/src/FilterBar/subcomponents/FilterBarMultiSelect/FilterBarMultiSelect.tsx delete mode 100644 packages/components/src/FilterBar/subcomponents/FilterBarMultiSelect/index.ts delete mode 100644 packages/components/src/FilterBar/subcomponents/FilterBarSelect/FilterBarSelect.spec.tsx delete mode 100644 packages/components/src/FilterBar/subcomponents/FilterBarSelect/FilterBarSelect.tsx delete mode 100644 packages/components/src/FilterBar/subcomponents/FilterBarSelect/index.ts delete mode 100644 packages/components/src/FilterBar/subcomponents/index.ts delete mode 100644 packages/components/src/FilterBar/types.ts delete mode 100644 packages/components/src/FilterBar/utils/checkArraysMatch.spec.ts delete mode 100644 packages/components/src/FilterBar/utils/checkArraysMatch.ts delete mode 100644 packages/components/src/FilterButton/FilterButton/FilterButton.module.scss delete mode 100644 packages/components/src/FilterButton/FilterButton/FilterButton.spec.tsx delete mode 100644 packages/components/src/FilterButton/FilterButton/FilterButton.tsx delete mode 100644 packages/components/src/FilterButton/FilterButton/index.ts delete mode 100644 packages/components/src/FilterButton/FilterButtonRemovable/FilterButtonRemovable.spec.tsx delete mode 100644 packages/components/src/FilterButton/FilterButtonRemovable/FilterButtonRemovable.tsx delete mode 100644 packages/components/src/FilterButton/FilterButtonRemovable/index.ts delete mode 100644 packages/components/src/FilterButton/_docs/FilterButton.stories.tsx delete mode 100644 packages/components/src/FilterButton/_docs/FilterButtonRemovable.stories.tsx delete mode 100644 packages/components/src/FilterButton/_docs/filter-buttons.mdx delete mode 100644 packages/components/src/FilterButton/_docs/filter-buttons.stickersheet.stories.tsx delete mode 100644 packages/components/src/FilterButton/_subcomponents/FilterButtonBase/FilterButtonBase.module.scss delete mode 100644 packages/components/src/FilterButton/_subcomponents/FilterButtonBase/FilterButtonBase.tsx delete mode 100644 packages/components/src/FilterButton/_subcomponents/FilterButtonBase/_variables.scss delete mode 100644 packages/components/src/FilterButton/_subcomponents/FilterButtonBase/index.ts delete mode 100644 packages/components/src/FilterButton/index.ts delete mode 100644 packages/components/src/FilterDatePicker/FilterDatePicker.playwright.spec.tsx delete mode 100644 packages/components/src/FilterDatePicker/FilterDatePicker.spec.tsx delete mode 100644 packages/components/src/FilterDatePicker/FilterDatePicker.tsx delete mode 100644 packages/components/src/FilterDatePicker/_docs/FilterDatePicker.mdx delete mode 100644 packages/components/src/FilterDatePicker/_docs/FilterDatePicker.stickersheet.stories.tsx delete mode 100644 packages/components/src/FilterDatePicker/_docs/FilterDatePicker.stories.tsx delete mode 100644 packages/components/src/FilterDatePicker/_docs/controls/defaultMonthControls.ts delete mode 100644 packages/components/src/FilterDatePicker/_docs/controls/disabledDaysControls.ts delete mode 100644 packages/components/src/FilterDatePicker/_docs/controls/validationControls.ts delete mode 100644 packages/components/src/FilterDatePicker/hooks/useDateInputHandlers.spec.ts delete mode 100644 packages/components/src/FilterDatePicker/hooks/useDateInputHandlers.ts delete mode 100644 packages/components/src/FilterDatePicker/hooks/useDateValidation.spec.tsx delete mode 100644 packages/components/src/FilterDatePicker/hooks/useDateValidation.ts delete mode 100644 packages/components/src/FilterDatePicker/index.ts delete mode 100644 packages/components/src/FilterDatePicker/subcomponents/DateInputField/DateInputField.module.scss delete mode 100644 packages/components/src/FilterDatePicker/subcomponents/DateInputField/DateInputField.tsx delete mode 100644 packages/components/src/FilterDatePicker/subcomponents/DateInputField/index.ts delete mode 100644 packages/components/src/FilterDatePicker/subcomponents/FilterDatePickerField/FilterDatePickerField.module.scss delete mode 100644 packages/components/src/FilterDatePicker/subcomponents/FilterDatePickerField/FilterDatePickerField.spec.tsx delete mode 100644 packages/components/src/FilterDatePicker/subcomponents/FilterDatePickerField/FilterDatePickerField.tsx delete mode 100644 packages/components/src/FilterDatePicker/subcomponents/FilterDatePickerField/filterDatePickerFieldReducer.tsx delete mode 100644 packages/components/src/FilterDatePicker/subcomponents/FilterDatePickerField/index.ts delete mode 100644 packages/components/src/FilterDatePicker/types.ts delete mode 100644 packages/components/src/FilterDatePicker/utils/getDateValidationHandler.spec.tsx delete mode 100644 packages/components/src/FilterDatePicker/utils/getDateValidationHandler.tsx delete mode 100644 packages/components/src/FilterDatePicker/utils/transformDateToInputValue.ts delete mode 100644 packages/components/src/FilterDatePicker/utils/validateDate.spec.ts delete mode 100644 packages/components/src/FilterDatePicker/utils/validateDate.ts delete mode 100644 packages/components/src/FilterDateRangePicker/FilterDateRangePicker.spec.tsx delete mode 100644 packages/components/src/FilterDateRangePicker/FilterDateRangePicker.tsx delete mode 100644 packages/components/src/FilterDateRangePicker/_docs/FilterDateRangePicker.mdx delete mode 100644 packages/components/src/FilterDateRangePicker/_docs/FilterDateRangePicker.stickersheet.stories.tsx delete mode 100644 packages/components/src/FilterDateRangePicker/_docs/FilterDateRangePicker.stories.tsx delete mode 100644 packages/components/src/FilterDateRangePicker/_docs/controls/defaultMonthControls.ts delete mode 100644 packages/components/src/FilterDateRangePicker/_docs/controls/disabledDaysControls.ts delete mode 100644 packages/components/src/FilterDateRangePicker/_docs/controls/validationControls.ts delete mode 100644 packages/components/src/FilterDateRangePicker/index.ts delete mode 100644 packages/components/src/FilterDateRangePicker/subcomponents/DateInputDescription/DateInputDescription.module.scss delete mode 100644 packages/components/src/FilterDateRangePicker/subcomponents/DateInputDescription/DateInputDescription.spec.tsx delete mode 100644 packages/components/src/FilterDateRangePicker/subcomponents/DateInputDescription/DateInputDescription.tsx delete mode 100644 packages/components/src/FilterDateRangePicker/subcomponents/DateInputDescription/index.ts delete mode 100644 packages/components/src/FilterDateRangePicker/subcomponents/DateInputDescription/utils/formatDescriptionInputFormat.spec.ts delete mode 100644 packages/components/src/FilterDateRangePicker/subcomponents/DateInputDescription/utils/formatDescriptionInputFormat.ts delete mode 100644 packages/components/src/FilterDateRangePicker/subcomponents/DateRangeDisplayLabel/DateRangeDisplayLabel.module.scss delete mode 100644 packages/components/src/FilterDateRangePicker/subcomponents/DateRangeDisplayLabel/DateRangeDisplayLabel.tsx delete mode 100644 packages/components/src/FilterDateRangePicker/subcomponents/DateRangeDisplayLabel/index.ts delete mode 100644 packages/components/src/FilterDateRangePicker/subcomponents/DateRangeInputField/DateRangeInputField.module.scss delete mode 100644 packages/components/src/FilterDateRangePicker/subcomponents/DateRangeInputField/DateRangeInputField.spec.tsx delete mode 100644 packages/components/src/FilterDateRangePicker/subcomponents/DateRangeInputField/DateRangeInputField.tsx delete mode 100644 packages/components/src/FilterDateRangePicker/subcomponents/DateRangeInputField/index.ts delete mode 100644 packages/components/src/FilterDateRangePicker/subcomponents/DateRangeValidationMessage/DateRangeValidationMessage.module.scss delete mode 100644 packages/components/src/FilterDateRangePicker/subcomponents/DateRangeValidationMessage/DateRangeValidationMessage.spec.tsx delete mode 100644 packages/components/src/FilterDateRangePicker/subcomponents/DateRangeValidationMessage/DateRangeValidationMessage.tsx delete mode 100644 packages/components/src/FilterDateRangePicker/subcomponents/DateRangeValidationMessage/index.ts delete mode 100644 packages/components/src/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/FilterDateRangePickerField.module.scss delete mode 100644 packages/components/src/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/FilterDateRangePickerField.spec.tsx delete mode 100644 packages/components/src/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/FilterDateRangePickerField.tsx delete mode 100644 packages/components/src/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/filterDateRangePickerFieldReducer.tsx delete mode 100644 packages/components/src/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/hooks/useEndDateValidation.spec.tsx delete mode 100644 packages/components/src/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/hooks/useEndDateValidation.ts delete mode 100644 packages/components/src/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/hooks/useStartDateValidation.spec.tsx delete mode 100644 packages/components/src/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/hooks/useStartDateValidation.ts delete mode 100644 packages/components/src/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/index.ts delete mode 100644 packages/components/src/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/types.ts delete mode 100644 packages/components/src/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/utils/isValidRange.spec.ts delete mode 100644 packages/components/src/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/utils/isValidRange.ts delete mode 100644 packages/components/src/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/utils/validateEndDateBeforeStartDate.spec.ts delete mode 100644 packages/components/src/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/utils/validateEndDateBeforeStartDate.ts delete mode 100644 packages/components/src/FilterDateRangePicker/utils/isCompleteDateRange.spec.ts delete mode 100644 packages/components/src/FilterDateRangePicker/utils/isCompleteDateRange.ts delete mode 100644 packages/components/src/FilterMultiSelect/FilterMultiSelect.playwright.spec.tsx delete mode 100644 packages/components/src/FilterMultiSelect/FilterMultiSelect.tsx delete mode 100644 packages/components/src/FilterMultiSelect/index.ts delete mode 100644 packages/components/src/FilterMultiSelect/provider/MenuTriggerProvider/MenuTriggerProvider.spec.tsx delete mode 100644 packages/components/src/FilterMultiSelect/provider/MenuTriggerProvider/MenuTriggerProvider.tsx delete mode 100644 packages/components/src/FilterMultiSelect/provider/MenuTriggerProvider/index.ts delete mode 100644 packages/components/src/FilterMultiSelect/provider/SelectionProvider/SelectionProvider.spec.tsx delete mode 100644 packages/components/src/FilterMultiSelect/provider/SelectionProvider/SelectionProvider.tsx delete mode 100644 packages/components/src/FilterMultiSelect/provider/SelectionProvider/index.ts delete mode 100644 packages/components/src/FilterMultiSelect/provider/index.ts delete mode 100644 packages/components/src/FilterMultiSelect/subcomponents/ListBox/ListBox.module.scss delete mode 100644 packages/components/src/FilterMultiSelect/subcomponents/ListBox/ListBox.tsx delete mode 100644 packages/components/src/FilterMultiSelect/subcomponents/ListBox/index.ts delete mode 100644 packages/components/src/FilterMultiSelect/subcomponents/ListBoxSection/ListBoxSection.module.scss delete mode 100644 packages/components/src/FilterMultiSelect/subcomponents/ListBoxSection/ListBoxSection.tsx delete mode 100644 packages/components/src/FilterMultiSelect/subcomponents/ListBoxSection/index.ts delete mode 100644 packages/components/src/FilterMultiSelect/subcomponents/LoadMoreButton/LoadMoreButton.module.scss delete mode 100644 packages/components/src/FilterMultiSelect/subcomponents/LoadMoreButton/LoadMoreButton.tsx delete mode 100644 packages/components/src/FilterMultiSelect/subcomponents/LoadMoreButton/index.ts delete mode 100644 packages/components/src/FilterMultiSelect/subcomponents/MenuLayout/MenuFooter/MenuFooter.module.scss delete mode 100644 packages/components/src/FilterMultiSelect/subcomponents/MenuLayout/MenuFooter/MenuFooter.tsx delete mode 100644 packages/components/src/FilterMultiSelect/subcomponents/MenuLayout/MenuFooter/index.ts delete mode 100644 packages/components/src/FilterMultiSelect/subcomponents/MenuLayout/MenuLoadingSkeleton/MenuLoadingSkeleton.module.scss delete mode 100644 packages/components/src/FilterMultiSelect/subcomponents/MenuLayout/MenuLoadingSkeleton/MenuLoadingSkeleton.tsx delete mode 100644 packages/components/src/FilterMultiSelect/subcomponents/MenuLayout/MenuLoadingSkeleton/index.ts delete mode 100644 packages/components/src/FilterMultiSelect/subcomponents/MenuLayout/index.ts delete mode 100644 packages/components/src/FilterMultiSelect/subcomponents/MenuPopup/MenuPopup.module.scss delete mode 100644 packages/components/src/FilterMultiSelect/subcomponents/MenuPopup/MenuPopup.tsx delete mode 100644 packages/components/src/FilterMultiSelect/subcomponents/MenuPopup/index.ts delete mode 100644 packages/components/src/FilterMultiSelect/subcomponents/MultiSelectOption/MultiSelectOption.module.scss delete mode 100644 packages/components/src/FilterMultiSelect/subcomponents/MultiSelectOption/MultiSelectOption.spec.tsx delete mode 100644 packages/components/src/FilterMultiSelect/subcomponents/MultiSelectOption/MultiSelectOption.tsx delete mode 100644 packages/components/src/FilterMultiSelect/subcomponents/MultiSelectOption/index.ts delete mode 100644 packages/components/src/FilterMultiSelect/subcomponents/NoResults/NoResults.module.scss delete mode 100644 packages/components/src/FilterMultiSelect/subcomponents/NoResults/NoResults.tsx delete mode 100644 packages/components/src/FilterMultiSelect/subcomponents/NoResults/index.ts delete mode 100644 packages/components/src/FilterMultiSelect/subcomponents/Root/Root.tsx delete mode 100644 packages/components/src/FilterMultiSelect/subcomponents/Root/index.ts delete mode 100644 packages/components/src/FilterMultiSelect/subcomponents/SearchInput/SearchInput.module.scss delete mode 100644 packages/components/src/FilterMultiSelect/subcomponents/SearchInput/SearchInput.spec.tsx delete mode 100644 packages/components/src/FilterMultiSelect/subcomponents/SearchInput/SearchInput.tsx delete mode 100644 packages/components/src/FilterMultiSelect/subcomponents/SearchInput/index.ts delete mode 100644 packages/components/src/FilterMultiSelect/subcomponents/SectionDivider/SectionDivider.module.scss delete mode 100644 packages/components/src/FilterMultiSelect/subcomponents/SectionDivider/SectionDivider.tsx delete mode 100644 packages/components/src/FilterMultiSelect/subcomponents/SectionDivider/index.ts delete mode 100644 packages/components/src/FilterMultiSelect/subcomponents/SelectionControlButton/ClearButton/ClearButton.spec.tsx delete mode 100644 packages/components/src/FilterMultiSelect/subcomponents/SelectionControlButton/ClearButton/ClearButton.tsx delete mode 100644 packages/components/src/FilterMultiSelect/subcomponents/SelectionControlButton/ClearButton/index.ts delete mode 100644 packages/components/src/FilterMultiSelect/subcomponents/SelectionControlButton/SelectAllButton/SelectAllButton.spec.tsx delete mode 100644 packages/components/src/FilterMultiSelect/subcomponents/SelectionControlButton/SelectAllButton/SelectAllButton.tsx delete mode 100644 packages/components/src/FilterMultiSelect/subcomponents/SelectionControlButton/SelectAllButton/index.ts delete mode 100644 packages/components/src/FilterMultiSelect/subcomponents/SelectionControlButton/SelectionControlButton.module.scss delete mode 100644 packages/components/src/FilterMultiSelect/subcomponents/SelectionControlButton/index.ts delete mode 100644 packages/components/src/FilterMultiSelect/subcomponents/Trigger/FilterTriggerButton/FilterTriggerButton.tsx delete mode 100644 packages/components/src/FilterMultiSelect/subcomponents/Trigger/FilterTriggerButton/index.ts delete mode 100644 packages/components/src/FilterMultiSelect/subcomponents/Trigger/RemovableFilterTrigger/RemovableFilterTrigger.tsx delete mode 100644 packages/components/src/FilterMultiSelect/subcomponents/Trigger/RemovableFilterTrigger/index.ts delete mode 100644 packages/components/src/FilterMultiSelect/subcomponents/Trigger/index.ts delete mode 100644 packages/components/src/FilterMultiSelect/subcomponents/index.ts delete mode 100644 packages/components/src/FilterMultiSelect/types.ts delete mode 100644 packages/components/src/FilterMultiSelect/utils/getSelectedOptionKeys.spec.ts delete mode 100644 packages/components/src/FilterMultiSelect/utils/getSelectedOptionKeys.ts delete mode 100644 packages/components/src/FilterMultiSelect/utils/getSelectedOptionLabels.spec.ts delete mode 100644 packages/components/src/FilterMultiSelect/utils/getSelectedOptionLabels.ts delete mode 100644 packages/components/src/FilterMultiSelect/utils/getTruncatedLabel.ts delete mode 100644 packages/components/src/FilterMultiSelect/utils/getTruncatedLabels.spec.ts delete mode 100644 packages/components/src/FilterMultiSelect/utils/index.ts delete mode 100644 packages/components/src/FilterSelect/FilterSelect.module.scss delete mode 100644 packages/components/src/FilterSelect/FilterSelect.spec.tsx delete mode 100644 packages/components/src/FilterSelect/FilterSelect.tsx delete mode 100644 packages/components/src/FilterSelect/_docs/FilterSelect.mdx delete mode 100644 packages/components/src/FilterSelect/_docs/FilterSelect.stickersheet.stories.tsx delete mode 100644 packages/components/src/FilterSelect/_docs/FilterSelect.stories.tsx delete mode 100644 packages/components/src/FilterSelect/_docs/mockData.ts delete mode 100644 packages/components/src/FilterSelect/context/SelectContext.tsx delete mode 100644 packages/components/src/FilterSelect/context/index.ts delete mode 100644 packages/components/src/FilterSelect/index.ts delete mode 100644 packages/components/src/FilterSelect/subcomponents/ListBox/ListBox.module.scss delete mode 100644 packages/components/src/FilterSelect/subcomponents/ListBox/ListBox.tsx delete mode 100644 packages/components/src/FilterSelect/subcomponents/ListBox/index.ts delete mode 100644 packages/components/src/FilterSelect/subcomponents/ListBoxSection/ListBoxSection.module.scss delete mode 100644 packages/components/src/FilterSelect/subcomponents/ListBoxSection/ListBoxSection.tsx delete mode 100644 packages/components/src/FilterSelect/subcomponents/ListBoxSection/index.ts delete mode 100644 packages/components/src/FilterSelect/subcomponents/ListItem/ListItem.tsx delete mode 100644 packages/components/src/FilterSelect/subcomponents/ListItem/index.ts delete mode 100644 packages/components/src/FilterSelect/subcomponents/ListItems/ListItems.tsx delete mode 100644 packages/components/src/FilterSelect/subcomponents/ListItems/index.ts delete mode 100644 packages/components/src/FilterSelect/subcomponents/Option/Option.module.scss delete mode 100644 packages/components/src/FilterSelect/subcomponents/Option/Option.tsx delete mode 100644 packages/components/src/FilterSelect/subcomponents/Option/index.ts delete mode 100644 packages/components/src/FilterSelect/subcomponents/Overlay/Overlay.tsx delete mode 100644 packages/components/src/FilterSelect/subcomponents/Overlay/index.ts delete mode 100644 packages/components/src/FilterSelect/subcomponents/SectionDivider/SectionDivider.module.scss delete mode 100644 packages/components/src/FilterSelect/subcomponents/SectionDivider/SectionDivider.tsx delete mode 100644 packages/components/src/FilterSelect/subcomponents/SectionDivider/index.ts delete mode 100644 packages/components/src/FilterSelect/types.ts delete mode 100644 packages/components/src/FilterSelect/utils/isSelectOptionGroup.ts delete mode 100644 packages/components/src/FilterSelect/utils/transformSelectItemToCollectionElement.tsx delete mode 100644 packages/components/src/InputSearch/InputSearch.module.scss delete mode 100644 packages/components/src/InputSearch/InputSearch.spec.tsx delete mode 100644 packages/components/src/InputSearch/InputSearch.tsx delete mode 100644 packages/components/src/InputSearch/index.ts delete mode 100644 packages/components/src/KaizenProvider/KaizenProvider.spec.tsx delete mode 100644 packages/components/src/KaizenProvider/KaizenProvider.tsx delete mode 100644 packages/components/src/KaizenProvider/OptionalIntlProvider/OptionalIntlProvider.spec.tsx delete mode 100644 packages/components/src/KaizenProvider/OptionalIntlProvider/OptionalIntlProvider.tsx delete mode 100644 packages/components/src/KaizenProvider/OptionalIntlProvider/index.ts delete mode 100644 packages/components/src/KaizenProvider/ThemeProvider/ThemeManager.spec.ts delete mode 100644 packages/components/src/KaizenProvider/ThemeProvider/ThemeManager.ts delete mode 100644 packages/components/src/KaizenProvider/ThemeProvider/ThemeProvider.tsx delete mode 100644 packages/components/src/KaizenProvider/ThemeProvider/index.ts delete mode 100644 packages/components/src/KaizenProvider/ThemeProvider/themes/heart.ts delete mode 100644 packages/components/src/KaizenProvider/ThemeProvider/themes/index.ts delete mode 100644 packages/components/src/KaizenProvider/ThemeProvider/themes/types.ts delete mode 100644 packages/components/src/KaizenProvider/_docs/KaizenProvider.mdx delete mode 100644 packages/components/src/KaizenProvider/_docs/code-diffs/migration-bonus.diff delete mode 100644 packages/components/src/KaizenProvider/_docs/code-diffs/migration-fe-template-bonus.diff delete mode 100644 packages/components/src/KaizenProvider/_docs/code-diffs/migration-fe-template-to-v1.diff delete mode 100644 packages/components/src/KaizenProvider/_docs/code-diffs/migration-to-v1.diff delete mode 100644 packages/components/src/KaizenProvider/_docs/internationalization-in-kaizen.mdx delete mode 100644 packages/components/src/KaizenProvider/_docs/managing-the-theme.mdx delete mode 100644 packages/components/src/KaizenProvider/index.ts delete mode 100644 packages/components/src/LabelledMessage/LabelledMessage.module.scss delete mode 100644 packages/components/src/LabelledMessage/LabelledMessage.tsx delete mode 100644 packages/components/src/LabelledMessage/_docs/LabelledMessage.stickersheet.stories.tsx delete mode 100644 packages/components/src/LabelledMessage/_docs/LabelledMessage.stories.tsx delete mode 100644 packages/components/src/LabelledMessage/index.ts delete mode 100644 packages/components/src/SVG/SVG.module.scss delete mode 100644 packages/components/src/SVG/SVG.spec.tsx delete mode 100644 packages/components/src/SVG/SVG.tsx delete mode 100644 packages/components/src/SVG/icons/AddIcon.tsx delete mode 100644 packages/components/src/SVG/icons/CheckIcon.tsx delete mode 100644 packages/components/src/SVG/icons/ChevronDownIcon.tsx delete mode 100644 packages/components/src/SVG/icons/ChevronUpIcon.tsx delete mode 100644 packages/components/src/SVG/icons/ClearIcon.tsx delete mode 100644 packages/components/src/SVG/icons/CloseIcon.tsx delete mode 100644 packages/components/src/SVG/icons/IndicatorActiveIcon.tsx delete mode 100644 packages/components/src/SVG/icons/IndicatorInactiveIcon.tsx delete mode 100644 packages/components/src/SVG/icons/SearchIcon.tsx delete mode 100644 packages/components/src/SVG/icons/SuccessIcon.tsx delete mode 100644 packages/components/src/SVG/icons/VisibleIcon.tsx delete mode 100644 packages/components/src/SVG/index.ts delete mode 100644 packages/components/src/SVG/styles.scss delete mode 100644 packages/components/src/Workflow/Workflow.tsx delete mode 100644 packages/components/src/Workflow/_docs/ProgressStepper.stories.tsx delete mode 100644 packages/components/src/Workflow/_docs/Workflow.mdx delete mode 100644 packages/components/src/Workflow/_docs/Workflow.stories.tsx delete mode 100644 packages/components/src/Workflow/_docs/WorkflowFooter.stories.tsx delete mode 100644 packages/components/src/Workflow/_docs/WorkflowHeader.stories.tsx delete mode 100644 packages/components/src/Workflow/_docs/controls/controls.tsx delete mode 100644 packages/components/src/Workflow/_docs/controls/index.tsx delete mode 100644 packages/components/src/Workflow/index.ts delete mode 100644 packages/components/src/Workflow/subcomponents/Footer/Footer.tsx delete mode 100644 packages/components/src/Workflow/subcomponents/Footer/components/FooterActions/FooterActions.module.scss delete mode 100644 packages/components/src/Workflow/subcomponents/Footer/components/FooterActions/FooterActions.tsx delete mode 100644 packages/components/src/Workflow/subcomponents/Footer/components/FooterActions/index.ts delete mode 100644 packages/components/src/Workflow/subcomponents/Footer/components/ProgressStepper/ProgressStepper.module.scss delete mode 100644 packages/components/src/Workflow/subcomponents/Footer/components/ProgressStepper/ProgressStepper.tsx delete mode 100644 packages/components/src/Workflow/subcomponents/Footer/components/ProgressStepper/index.ts delete mode 100644 packages/components/src/Workflow/subcomponents/Footer/components/Root/FooterRoot.module.scss delete mode 100644 packages/components/src/Workflow/subcomponents/Footer/components/Root/Root.tsx delete mode 100644 packages/components/src/Workflow/subcomponents/Footer/components/Root/index.ts delete mode 100644 packages/components/src/Workflow/subcomponents/Footer/components/index.ts delete mode 100644 packages/components/src/Workflow/subcomponents/Footer/index.ts delete mode 100644 packages/components/src/Workflow/subcomponents/Header/Header.tsx delete mode 100644 packages/components/src/Workflow/subcomponents/Header/components/Actions/Actions.module.scss delete mode 100644 packages/components/src/Workflow/subcomponents/Header/components/Actions/Actions.tsx delete mode 100644 packages/components/src/Workflow/subcomponents/Header/components/Actions/index.ts delete mode 100644 packages/components/src/Workflow/subcomponents/Header/components/Branding/Branding.module.scss delete mode 100644 packages/components/src/Workflow/subcomponents/Header/components/Branding/Branding.tsx delete mode 100644 packages/components/src/Workflow/subcomponents/Header/components/Branding/index.ts delete mode 100644 packages/components/src/Workflow/subcomponents/Header/components/Root/Root.module.scss delete mode 100644 packages/components/src/Workflow/subcomponents/Header/components/Root/Root.tsx delete mode 100644 packages/components/src/Workflow/subcomponents/Header/components/Root/index.tsx delete mode 100644 packages/components/src/Workflow/subcomponents/Header/components/Titles/Titles.module.scss delete mode 100644 packages/components/src/Workflow/subcomponents/Header/components/Titles/Titles.tsx delete mode 100644 packages/components/src/Workflow/subcomponents/Header/components/Titles/index.ts delete mode 100644 packages/components/src/Workflow/subcomponents/Header/components/index.ts delete mode 100644 packages/components/src/Workflow/subcomponents/Header/index.ts delete mode 100644 packages/components/src/Workflow/subcomponents/Main/Main.module.scss delete mode 100644 packages/components/src/Workflow/subcomponents/Main/Main.tsx delete mode 100644 packages/components/src/Workflow/subcomponents/Main/index.tsx delete mode 100644 packages/components/src/Workflow/subcomponents/Wrapper/Wrapper.module.scss delete mode 100644 packages/components/src/Workflow/subcomponents/Wrapper/Wrapper.tsx delete mode 100644 packages/components/src/Workflow/subcomponents/Wrapper/index.ts delete mode 100644 packages/components/src/Workflow/subcomponents/index.ts delete mode 100644 packages/components/src/__future__/Workflow/Workflow.tsx delete mode 100644 packages/components/src/__future__/Workflow/_docs/ProgressStepper.stories.tsx delete mode 100644 packages/components/src/__future__/Workflow/_docs/Workflow.mdx delete mode 100644 packages/components/src/__future__/Workflow/_docs/Workflow.stories.tsx delete mode 100644 packages/components/src/__future__/Workflow/_docs/WorkflowFooter.stories.tsx delete mode 100644 packages/components/src/__future__/Workflow/_docs/WorkflowHeader.stories.tsx delete mode 100644 packages/components/src/__future__/Workflow/_docs/controls/controls.tsx delete mode 100644 packages/components/src/__future__/Workflow/_docs/controls/index.tsx delete mode 100644 packages/components/src/__future__/Workflow/index.ts delete mode 100644 packages/components/src/__future__/Workflow/subcomponents/Footer/Footer.tsx delete mode 100644 packages/components/src/__future__/Workflow/subcomponents/Footer/components/FooterActions/FooterActions.module.scss delete mode 100644 packages/components/src/__future__/Workflow/subcomponents/Footer/components/FooterActions/FooterActions.tsx delete mode 100644 packages/components/src/__future__/Workflow/subcomponents/Footer/components/FooterActions/index.ts delete mode 100644 packages/components/src/__future__/Workflow/subcomponents/Footer/components/ProgressStepper/ProgressStepper.module.scss delete mode 100644 packages/components/src/__future__/Workflow/subcomponents/Footer/components/ProgressStepper/ProgressStepper.spec.tsx delete mode 100644 packages/components/src/__future__/Workflow/subcomponents/Footer/components/ProgressStepper/ProgressStepper.tsx delete mode 100644 packages/components/src/__future__/Workflow/subcomponents/Footer/components/ProgressStepper/index.ts delete mode 100644 packages/components/src/__future__/Workflow/subcomponents/Footer/components/Root/FooterRoot.module.scss delete mode 100644 packages/components/src/__future__/Workflow/subcomponents/Footer/components/Root/Root.tsx delete mode 100644 packages/components/src/__future__/Workflow/subcomponents/Footer/components/Root/index.ts delete mode 100644 packages/components/src/__future__/Workflow/subcomponents/Footer/components/index.ts delete mode 100644 packages/components/src/__future__/Workflow/subcomponents/Footer/index.ts delete mode 100644 packages/components/src/__future__/Workflow/subcomponents/Header/Header.tsx delete mode 100644 packages/components/src/__future__/Workflow/subcomponents/Header/components/Actions/Actions.module.scss delete mode 100644 packages/components/src/__future__/Workflow/subcomponents/Header/components/Actions/Actions.tsx delete mode 100644 packages/components/src/__future__/Workflow/subcomponents/Header/components/Actions/index.ts delete mode 100644 packages/components/src/__future__/Workflow/subcomponents/Header/components/Branding/Branding.module.scss delete mode 100644 packages/components/src/__future__/Workflow/subcomponents/Header/components/Branding/Branding.tsx delete mode 100644 packages/components/src/__future__/Workflow/subcomponents/Header/components/Branding/index.ts delete mode 100644 packages/components/src/__future__/Workflow/subcomponents/Header/components/Root/Root.module.scss delete mode 100644 packages/components/src/__future__/Workflow/subcomponents/Header/components/Root/Root.tsx delete mode 100644 packages/components/src/__future__/Workflow/subcomponents/Header/components/Root/index.tsx delete mode 100644 packages/components/src/__future__/Workflow/subcomponents/Header/components/Titles/Titles.module.scss delete mode 100644 packages/components/src/__future__/Workflow/subcomponents/Header/components/Titles/Titles.tsx delete mode 100644 packages/components/src/__future__/Workflow/subcomponents/Header/components/Titles/index.ts delete mode 100644 packages/components/src/__future__/Workflow/subcomponents/Header/components/index.ts delete mode 100644 packages/components/src/__future__/Workflow/subcomponents/Header/index.ts delete mode 100644 packages/components/src/__future__/Workflow/subcomponents/Main/Main.module.scss delete mode 100644 packages/components/src/__future__/Workflow/subcomponents/Main/Main.tsx delete mode 100644 packages/components/src/__future__/Workflow/subcomponents/Main/index.tsx delete mode 100644 packages/components/src/__future__/Workflow/subcomponents/Wrapper/Wrapper.module.scss delete mode 100644 packages/components/src/__future__/Workflow/subcomponents/Wrapper/Wrapper.tsx delete mode 100644 packages/components/src/__future__/Workflow/subcomponents/Wrapper/index.ts delete mode 100644 packages/components/src/__future__/Workflow/subcomponents/index.ts delete mode 100644 packages/components/src/__future__/index.ts delete mode 100644 packages/components/src/index.ts delete mode 100644 packages/components/src/types/DataAttributes.ts delete mode 100644 packages/components/src/types/DatePicker.ts delete mode 100644 packages/components/src/types/OverrideClassName.ts delete mode 100644 packages/components/src/types/StringSuggestions.ts delete mode 100644 packages/components/src/utils/console.ts delete mode 100644 packages/components/src/utils/getNodeText.spec.tsx delete mode 100644 packages/components/src/utils/getNodeText.ts delete mode 100644 packages/components/src/utils/isRefObject.ts delete mode 100644 packages/components/styles/_button-reset.scss delete mode 100644 packages/components/styles/_forms.scss delete mode 100644 packages/components/styles/legacy/_color.scss delete mode 100644 packages/components/styles/legacy/_layout.scss delete mode 100644 packages/components/styles/legacy/_type.scss delete mode 100644 packages/components/styles/tailwind.css delete mode 100644 packages/components/tailwind.config.js delete mode 100644 packages/components/tsconfig.json diff --git a/package.json b/package.json index 25b3590..f5e16af 100644 --- a/package.json +++ b/package.json @@ -10,8 +10,7 @@ "scripts": { "build": "yarn turbo prepublish", "clean": "yarn turbo clean && yarn storybook:clean && rimraf node_modules", - "test": "jest && yarn test:pkg:aio", - "test:pkg:aio": "yarn pkg:aio test && yarn pkg:aio build", + "test": "jest", "test:pkg:c-library:sass": "yarn pkg:c-library test-scss-compile", "test:ci": "jest --ci", "compile": "tsc && yarn pkg:aio compile", @@ -32,10 +31,9 @@ "chromatic": "chromatic", "commit": "yarn changeset", "pkg:c-library": "yarn workspace @kaizen/component-library", - "pkg:aio": "yarn workspace @kaizen/components", - "ci:test": "yarn test:ci && yarn pkg:aio test:ci", - "ci:test:react-16": "USE_REACT_16=true yarn test:ci && yarn pkg:aio ci:test:react-16", - "ci:test:react-17": "USE_REACT_17=true yarn test:ci && yarn pkg:aio ci:test:react-17", + "ci:test": "yarn test:ci", + "ci:test:react-16": "USE_REACT_16=true yarn test:ci", + "ci:test:react-17": "USE_REACT_17=true yarn test:ci", "ci:version": "yarn turbo prepublish && yarn changeset version", "ci:publish": "yarn turbo prepublish && yarn changeset publish" }, diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md deleted file mode 100644 index eb7a5c8..0000000 --- a/packages/components/CHANGELOG.md +++ /dev/null @@ -1,611 +0,0 @@ -# Change Log - -## 1.19.2 - -### Patch Changes - -- [#3852](https://github.com/cultureamp/kaizen-design-system/pull/3852) [`2e0a8db1d`](https://github.com/cultureamp/kaizen-design-system/commit/2e0a8db1db16f7a7bda4ab3c7dbad5691238facf) - **FilterDateRangePicker** - - Fixed issue where validation was not returning the correct input value -- Updated dependencies [[`2e0a8db1d`](https://github.com/cultureamp/kaizen-design-system/commit/2e0a8db1db16f7a7bda4ab3c7dbad5691238facf), [`6621d8912`](https://github.com/cultureamp/kaizen-design-system/commit/6621d89125658392205963f89e230660bc6fddc2)]: - - @kaizen/date-picker@6.2.2 - - @kaizen/draft-form@10.4.7 - -## 1.19.1 - -### Patch Changes - -- [#3861](https://github.com/cultureamp/kaizen-design-system/pull/3861) [`9c2a798ff`](https://github.com/cultureamp/kaizen-design-system/commit/9c2a798ff527c6fa4bad3e3299d0aad986384c2c) - Expose currently selected values on FilterBar via useFilterBarContext - -- Updated dependencies [[`5afdddade`](https://github.com/cultureamp/kaizen-design-system/commit/5afdddaded55b173dc39e469a2dfa15fe135155f)]: - - @kaizen/date-picker@6.2.1 - -## 1.19.0 - -### Minor Changes - -- [#3858](https://github.com/cultureamp/kaizen-design-system/pull/3858) [`1303b7dc6`](https://github.com/cultureamp/kaizen-design-system/commit/1303b7dc6e3b761d19f955d58380f55ff30fffbf) - Add OptionalIntlProvider to KaizenProvider - This change makes KaizenProvider set up an IntlProvider from the `@cultureamp/i18n-react-intl` package - when one isn't present already in the consuming repo. - This means that consumers implementing KaizenProvider will not need to set up their own IntlProvider to have - translations in their app. - -- [#3811](https://github.com/cultureamp/kaizen-design-system/pull/3811) [`99a1f1cef`](https://github.com/cultureamp/kaizen-design-system/commit/99a1f1cef00ddb046c7cfb26adfe986a4a7869bc) - Add internal translation support for FilterDateRangePicker. - - This change allows internal strings in FilterDateRangePicker to be translated when - consuming app has set up an IntlProvider through `@cultureamp/i18n-react-intl`. - For info regarding the set up process for Intl in Kaizen, see [here](https://cultureamp.design/storybook/?path=/docs/components-kaizen-provider-internationalization-in-kaizen--docs). - -### Patch Changes - -- [#3859](https://github.com/cultureamp/kaizen-design-system/pull/3859) [`f52f9d41b`](https://github.com/cultureamp/kaizen-design-system/commit/f52f9d41b2a607f1ce5885287635a71a59a8063f) - test - -## 1.18.1 - -### Patch Changes - -- [#3850](https://github.com/cultureamp/kaizen-design-system/pull/3850) [`713427924`](https://github.com/cultureamp/kaizen-design-system/commit/713427924bec6b2c7f81b90037360b62ae8ad8ce) - Remove OptionalIntlProvider from KaizenProvider. - This change means that consumers will need to provide their own IntlProvider from `@cultureamp/i18n-react-intl`. - For more info, see our [Internationalization in Kaizen docs](https://cultureamp.design/storybook/?path=/docs/components-kaizen-provider-internationalization-in-kaizen--docs) - -- [#3722](https://github.com/cultureamp/kaizen-design-system/pull/3722) [`adb9c58e0`](https://github.com/cultureamp/kaizen-design-system/commit/adb9c58e0791ea08ebece42fb5e5ae47d2bc73c5) - **FilterDatePicker** - - - Fixed issue where selecting the dates from the date pickers would return a validation object containing the previously picked date rather than the current one in the `inputValue` key. - - Fixed ref types. Only for internal usage. - -- [#3847](https://github.com/cultureamp/kaizen-design-system/pull/3847) [`8d1b4ace1`](https://github.com/cultureamp/kaizen-design-system/commit/8d1b4ace17533c29d6fc7f849b3948e39879e73b) - - Update FilterBarMultiSelect to clear values when items change - - Fix FilterBarContext type definitions to infer Id - - Update FilterBarSelect to clear values when items change - -## 1.18.0 - -### Minor Changes - -- [#3812](https://github.com/cultureamp/kaizen-design-system/pull/3812) [`b5dad5623`](https://github.com/cultureamp/kaizen-design-system/commit/b5dad5623e5fc683fe88757478a9b1079498b494) - Add functionality for dependent filters to ``. - - Consumers can now set a `isUsableWhen` attribute to their `filters`. - Filters with this attribute will be checked against the current state - and shown/hidden from the FilterBar options (both active/inactive) accordingly. - -- [#3808](https://github.com/cultureamp/kaizen-design-system/pull/3808) [`7fdabc423`](https://github.com/cultureamp/kaizen-design-system/commit/7fdabc423641ce0c263bec056d09e18435d2beba) - What the change is: - Adds the OptionalIntlProvider to KaizenProvider - - What feature it enables: - This change provides support for internal translations in Kaizen components. - With this change, when an app is wrapped in KaizenProvider it will allow Kaizen components - with translations built in to translate their messages successfully. - -### Patch Changes - -- [#3809](https://github.com/cultureamp/kaizen-design-system/pull/3809) [`9e30ae7be`](https://github.com/cultureamp/kaizen-design-system/commit/9e30ae7be2428dc53c84edcc5bf0f763c84f80a7) - **Button** - Remove `component-library` style imports by absorbing the styles. - -- [#3793](https://github.com/cultureamp/kaizen-design-system/pull/3793) [`a791bd50d`](https://github.com/cultureamp/kaizen-design-system/commit/a791bd50d6538d5b8e18b02831d0108922b6199c) - Patch `@cultureamp/i18n-react-intl` dependency - -- [#3793](https://github.com/cultureamp/kaizen-design-system/pull/3793) [`a791bd50d`](https://github.com/cultureamp/kaizen-design-system/commit/a791bd50d6538d5b8e18b02831d0108922b6199c) - Patch `react-focus-on` depdendency - -- Updated dependencies [[`042e5971d`](https://github.com/cultureamp/kaizen-design-system/commit/042e5971d8ca883656b14e4f4438bb716b7c88c7), [`a791bd50d`](https://github.com/cultureamp/kaizen-design-system/commit/a791bd50d6538d5b8e18b02831d0108922b6199c)]: - - @kaizen/date-picker@6.2.0 - -## 1.17.1 - -### Patch Changes - -- [#3786](https://github.com/cultureamp/kaizen-design-system/pull/3786) [`bbb569f5d`](https://github.com/cultureamp/kaizen-design-system/commit/bbb569f5d55e9adb208ef0bf35d81ab97c50c89e) - Updates the future release /dist reference path in package.json - - this will fix the imports for future components - - ie: `import {Workflow} from "@kaizen/components/future" - -## 1.17.0 - -### Minor Changes - -- [#3781](https://github.com/cultureamp/kaizen-design-system/pull/3781) [`405d54ad2`](https://github.com/cultureamp/kaizen-design-system/commit/405d54ad2d1da5d30f64abeb6d2f0c0f73d2f098) - Add clear all functionality to FilterBar. - - All selected values are cleared, and any active removable filters are made inactive and moved into the Add Filters menu. - -- [#3761](https://github.com/cultureamp/kaizen-design-system/pull/3761) [`41a305dee`](https://github.com/cultureamp/kaizen-design-system/commit/41a305dee9e22d612e127265f3b2e412100e1162) - Create /future release for Workflow component that updates Steps to array of objects and stepName to currentStepId - - updates the stepName to currentStepId - - updates steps from non-empty array of strings to non-empty array of Steps - - exports Step and Steps types for convenience in consuming repos - - refactor Workflow to use the new type and id to reference active steps from array - - adds test coverage to ProgressStepper and improve docs - -### Patch Changes - -- [#3780](https://github.com/cultureamp/kaizen-design-system/pull/3780) [`abb973ab4`](https://github.com/cultureamp/kaizen-design-system/commit/abb973ab43e566910aa0898d6fa9c6d2a5e9f8c6) - Refactor FilterBar context state with less duplication of values. - -- [#3783](https://github.com/cultureamp/kaizen-design-system/pull/3783) [`3c2c7ede9`](https://github.com/cultureamp/kaizen-design-system/commit/3c2c7ede9f835db3793d966c8f0126a0f2dbcd70) - Refactor FilterBar to loop through singular dispatch actions instead of having a separate batch action for the same result. - -## 1.16.0 - -### Minor Changes - -- [#3762](https://github.com/cultureamp/kaizen-design-system/pull/3762) [`ad68bd64a`](https://github.com/cultureamp/kaizen-design-system/commit/ad68bd64a76c7ce079f732851d751c40c40abcc0) - Add removable filters to FilterBar. - This allows the user to hide filters which are less important/not being used. - The filters can be added back to the active filters list through the Add Filters menu. - -## 1.15.1 - -### Patch Changes - -- [#3741](https://github.com/cultureamp/kaizen-design-system/pull/3741) [`2955df1a7`](https://github.com/cultureamp/kaizen-design-system/commit/2955df1a759d83d4375ce47e71763731a2c6b017) - Switch the import in `FilterMultiSelect` for `InputSearch` from `draft-form` to use the new component which is KAIO compatible. - -## 1.15.0 - -### Minor Changes - -- [#3689](https://github.com/cultureamp/kaizen-design-system/pull/3689) [`62c302774`](https://github.com/cultureamp/kaizen-design-system/commit/62c302774c981843613fc0f4c554345c70222350) - Add Button component which is mostly a copy of the original `@kaizen/button` with the exception of `icon` which now accepts JSX.Element instead. - -### Patch Changes - -- [#3689](https://github.com/cultureamp/kaizen-design-system/pull/3689) [`62c302774`](https://github.com/cultureamp/kaizen-design-system/commit/62c302774c981843613fc0f4c554345c70222350) - - Remove `component-library` as a dependency - - - Add `SVG` title to `aria-label` when it is meanigful. - -- [#3730](https://github.com/cultureamp/kaizen-design-system/pull/3730) [`175fed21f`](https://github.com/cultureamp/kaizen-design-system/commit/175fed21f609bcee5cc287a92e39e1682167573d) - Fix the display of missing icons by migrating the `ClearButton` and `InputSearch` components as well as convert the `CheckIcon` and `SearchIcon` into React Icons which are used in `FilterMultiSelect`'s subcomponents. - -## 1.14.0 - -### Minor Changes - -- [#3727](https://github.com/cultureamp/kaizen-design-system/pull/3727) [`988f72305`](https://github.com/cultureamp/kaizen-design-system/commit/988f723056e2d4df600c6766a5a14586a63d9b7b) - Add FilterMultiSelect to KAIO and refactor to use FilterButton. - Remove `@kaizen/select` from dependencies. - -## 1.13.0 - -### Minor Changes - -- [#3673](https://github.com/cultureamp/kaizen-design-system/pull/3673) [`24dca6f74`](https://github.com/cultureamp/kaizen-design-system/commit/24dca6f7416732a733b128a40193c9a6feb4f0c2) - KaizenProvider will now add @cultureamp/i18n-react-intl's StaticIntlProvider to - the consuming app (if one isn't provided already). This ensures that Kaizen components - with translated strings get translated properly in consuming repos. - -### Patch Changes - -- [#3723](https://github.com/cultureamp/kaizen-design-system/pull/3723) [`4caca6b44`](https://github.com/cultureamp/kaizen-design-system/commit/4caca6b44b550628acfe17aed2dc98fd1be4c12a) - - Remove ids and xlinks from React SVGs - - Adds position sticky to Workflow Footer on desktop - - Updates footer styles to add padding for small screen sizes - - adds 400% story for chromatic - - Adds z-index of 1 to navigation elements and 0 to main Workflow components - - Adds word break for long step names - -## 1.12.0 - -### Minor Changes - -- [#3706](https://github.com/cultureamp/kaizen-design-system/pull/3706) [`2065dabbc`](https://github.com/cultureamp/kaizen-design-system/commit/2065dabbc440be17011bde11a9dca50517e2e155) - Add FilterbarMultiSelect component - -- [#3667](https://github.com/cultureamp/kaizen-design-system/pull/3667) [`91f4f9a29`](https://github.com/cultureamp/kaizen-design-system/commit/91f4f9a297531bf56fad381184a9c11b21814e5b) - - Add FilterDatePicker component to allow consumers to have single date selection - - - Add FilterBarDatePicker component for FilterBar compatibility - -- [#3705](https://github.com/cultureamp/kaizen-design-system/pull/3705) [`043b95ba0`](https://github.com/cultureamp/kaizen-design-system/commit/043b95ba043f6918897efa45e7ad648fc5ee7caa) - Retrofit FilterDateRangePicker to FilterBar - -### Patch Changes - -- Updated dependencies [[`91f4f9a29`](https://github.com/cultureamp/kaizen-design-system/commit/91f4f9a297531bf56fad381184a9c11b21814e5b), [`2065dabbc`](https://github.com/cultureamp/kaizen-design-system/commit/2065dabbc440be17011bde11a9dca50517e2e155)]: - - @kaizen/date-picker@6.1.0 - - @kaizen/select@6.17.3 - -## 1.11.0 - -### Minor Changes - -- [#3685](https://github.com/cultureamp/kaizen-design-system/pull/3685) [`4a4cb6019`](https://github.com/cultureamp/kaizen-design-system/commit/4a4cb6019365320fe76d83c44fd21b53dbea6938) - Add FilterBar and FilterBar.Select (extends FilterSelect). - -### Patch Changes - -- [#3685](https://github.com/cultureamp/kaizen-design-system/pull/3685) [`4a4cb6019`](https://github.com/cultureamp/kaizen-design-system/commit/4a4cb6019365320fe76d83c44fd21b53dbea6938) - Fix FilterSelect to find the matching item using the `selectedKey` prop when the item value is a number, as the useSelectState hook transforms the number to a string. - -- [#3698](https://github.com/cultureamp/kaizen-design-system/pull/3698) [`858258df8`](https://github.com/cultureamp/kaizen-design-system/commit/858258df874036b6d937493142d427fb6eb881e5) - Change `FilterPopover` to position `absolute` instead of `fixed`. - The `fixed` strategy causes contents to disappear off a page (not scrollable) when it goes beyond the window boundary. - -## 1.10.1 - -### Patch Changes - -- [#3695](https://github.com/cultureamp/kaizen-design-system/pull/3695) [`04661f9ee`](https://github.com/cultureamp/kaizen-design-system/commit/04661f9ee1962a3bcc2d93fabac8097e6128f32f) - This is a patch to manually trigger a re-release - -## 1.10.0 - -### Minor Changes - -- [#3687](https://github.com/cultureamp/kaizen-design-system/pull/3687) [`5b06b110e`](https://github.com/cultureamp/kaizen-design-system/commit/5b06b110e3831867827ee87cb9a387665dc0d644) - - remove dep on @kaizen/draft-modal as it was causing the compiled dist to fail on Next projects - - remove WorkflowExit component from Workflow pkg - - Update reference in docs and provide implementation example - - Move Workflow Wrapper div into exportable component - - Move styles into Wrapper folder - -### Patch Changes - -- [#3678](https://github.com/cultureamp/kaizen-design-system/pull/3678) [`d434bda3e`](https://github.com/cultureamp/kaizen-design-system/commit/d434bda3e5d520c71899d30dabdba02f97d911a0) - Dependency upgrades - -- Updated dependencies [[`d434bda3e`](https://github.com/cultureamp/kaizen-design-system/commit/d434bda3e5d520c71899d30dabdba02f97d911a0), [`959541e4d`](https://github.com/cultureamp/kaizen-design-system/commit/959541e4dc02655577dfee98931e84df2c079576)]: - - @kaizen/draft-tooltip@5.4.46 - - @kaizen/date-picker@6.0.2 - - @kaizen/component-library@16.9.0 - -## 1.9.0 - -### Minor Changes - -- [#3643](https://github.com/cultureamp/kaizen-design-system/pull/3643) [`7ea62ca13`](https://github.com/cultureamp/kaizen-design-system/commit/7ea62ca13e2dd8ed92618bcb388035b6fcf36bbe) - Adds Workflow Components and Workflow documentation folder to storybook - -## 1.8.7 - -### Patch Changes - -- Updated dependencies [[`21e381314`](https://github.com/cultureamp/kaizen-design-system/commit/21e381314daffd8171208f33e3627bccf54ddd6a), [`b6480c659`](https://github.com/cultureamp/kaizen-design-system/commit/b6480c6591a6f1b73ce4388ee9c341b5c421666c)]: - - @kaizen/date-picker@6.0.0 - - @kaizen/draft-form@10.4.4 - -## 1.8.6 - -### Patch Changes - -- [#3595](https://github.com/cultureamp/kaizen-design-system/pull/3595) [`0e0750e87`](https://github.com/cultureamp/kaizen-design-system/commit/0e0750e872e3381420df7bf2947d9deb9db8b705) - Remove .turbo from distributed files - -- [#3618](https://github.com/cultureamp/kaizen-design-system/pull/3618) [`b4eaa8c45`](https://github.com/cultureamp/kaizen-design-system/commit/b4eaa8c45b10abe795138638f273fabe416580da) - Update dependency date-fns to ^2.30.0 - -- [#3611](https://github.com/cultureamp/kaizen-design-system/pull/3611) [`589244ad0`](https://github.com/cultureamp/kaizen-design-system/commit/589244ad0c307edca845d19843f2db282050fe29) - Fix supported design-tokens versions - -- Updated dependencies [[`0e0750e87`](https://github.com/cultureamp/kaizen-design-system/commit/0e0750e872e3381420df7bf2947d9deb9db8b705), [`b4eaa8c45`](https://github.com/cultureamp/kaizen-design-system/commit/b4eaa8c45b10abe795138638f273fabe416580da), [`e4f5f5ce5`](https://github.com/cultureamp/kaizen-design-system/commit/e4f5f5ce50b4e1a4aa8b189c247d0f2a8fea722f), [`589244ad0`](https://github.com/cultureamp/kaizen-design-system/commit/589244ad0c307edca845d19843f2db282050fe29)]: - - @kaizen/component-library@16.7.5 - - @kaizen/draft-divider@2.2.10 - - @kaizen/draft-tooltip@5.4.43 - - @kaizen/hosted-assets@2.0.2 - - @kaizen/date-picker@5.21.16 - - @kaizen/draft-form@10.4.2 - - @kaizen/typography@2.3.10 - - @kaizen/a11y@1.7.11 - -## 1.8.5 - -### Patch Changes - -- [#3608](https://github.com/cultureamp/kaizen-design-system/pull/3608) [`cc96d9835`](https://github.com/cultureamp/kaizen-design-system/commit/cc96d98351ae380fe1a1e8a33d65d80232ed7a57) - Update usages of classnames to not use object syntax - -- Updated dependencies [[`cc96d9835`](https://github.com/cultureamp/kaizen-design-system/commit/cc96d98351ae380fe1a1e8a33d65d80232ed7a57)]: - - @kaizen/component-library@16.7.4 - - @kaizen/draft-divider@2.2.9 - - @kaizen/draft-tooltip@5.4.42 - - @kaizen/design-tokens@10.3.7 - - @kaizen/date-picker@5.21.15 - - @kaizen/draft-form@10.4.1 - - @kaizen/typography@2.3.9 - -## 1.8.4 - -### Patch Changes - -- [#3592](https://github.com/cultureamp/kaizen-design-system/pull/3592) [`dcd98eb9f`](https://github.com/cultureamp/kaizen-design-system/commit/dcd98eb9fbb5d03356d803bb90685e33b151075d) - Update dependencies: - - - `@react-aria/focus` to `^3.12.0` - - `@react-aria/listbox` to `^3.9.0` - - `@react-aria/overlays` to `^3.14.0` - - `@react-aria/select` to `^3.10.0` - - `@react-aria/utils` to `^3.16.0` - - `@react-stately/collections` to `^3.7.0` - - `@react-stately/select` to `^3.5.0` - -- [#3585](https://github.com/cultureamp/kaizen-design-system/pull/3585) [`739d87b0c`](https://github.com/cultureamp/kaizen-design-system/commit/739d87b0cd917e7c0f3becf2cc0fd8f9667f7a6c) - Update dependencies: - - `@react-aria/button` to `^3.7.1` - - `@react-types/shared` to `^3.18.0` - - `react-focus-on` to `^3.8.1` - - `@rollup/plugin-alias` to `^4.0.4` - - `@rollup/plugin-node-resolve` to `^15.0.2` - - `esbuild` to `^0.17.18` - - `sass` to `^1.62.1` -- Updated dependencies [[`739d87b0c`](https://github.com/cultureamp/kaizen-design-system/commit/739d87b0cd917e7c0f3becf2cc0fd8f9667f7a6c), [`acb0fdf3d`](https://github.com/cultureamp/kaizen-design-system/commit/acb0fdf3de2c1e852971b30fa0db4691e2a4ad0d), [`dcd98eb9f`](https://github.com/cultureamp/kaizen-design-system/commit/dcd98eb9fbb5d03356d803bb90685e33b151075d), [`c2f5be19e`](https://github.com/cultureamp/kaizen-design-system/commit/c2f5be19e5868aafd6771bab3a15e016664aa949), [`739d87b0c`](https://github.com/cultureamp/kaizen-design-system/commit/739d87b0cd917e7c0f3becf2cc0fd8f9667f7a6c), [`739d87b0c`](https://github.com/cultureamp/kaizen-design-system/commit/739d87b0cd917e7c0f3becf2cc0fd8f9667f7a6c)]: - - @kaizen/component-library@16.7.3 - - @kaizen/draft-tooltip@5.4.41 - - @kaizen/date-picker@5.21.14 - - @kaizen/draft-form@10.3.13 - - @kaizen/design-tokens@10.3.6 - -## 1.8.3 - -### Patch Changes - -- [#3558](https://github.com/cultureamp/kaizen-design-system/pull/3558) [`f09c085ee`](https://github.com/cultureamp/kaizen-design-system/commit/f09c085ee78c6dc79afc291faa6e284b333d1e93) - Use native focus-visible selector for focus styling instead of polyfill class - -- Updated dependencies [[`2fcba667e`](https://github.com/cultureamp/kaizen-design-system/commit/2fcba667e576ff974d9f790172e894351eba3875), [`f09c085ee`](https://github.com/cultureamp/kaizen-design-system/commit/f09c085ee78c6dc79afc291faa6e284b333d1e93)]: - - @kaizen/date-picker@5.21.12 - - @kaizen/draft-form@10.3.12 - - @kaizen/a11y@1.7.10 - -## 1.8.2 - -### Patch Changes - -- [#3540](https://github.com/cultureamp/kaizen-design-system/pull/3540) [`1228800bc`](https://github.com/cultureamp/kaizen-design-system/commit/1228800bc215bc33731888bc81ef68be1a3c19d9) - Add type="button" to buttons missing an explicit type - -- Updated dependencies [[`1228800bc`](https://github.com/cultureamp/kaizen-design-system/commit/1228800bc215bc33731888bc81ef68be1a3c19d9), [`11691d3dd`](https://github.com/cultureamp/kaizen-design-system/commit/11691d3dd152f013241233474ea9409fe76e7796)]: - - @kaizen/component-library@16.7.2 - - @kaizen/date-picker@5.21.11 - -## 1.8.1 - -### Patch Changes - -- [#3536](https://github.com/cultureamp/kaizen-design-system/pull/3536) [`82ba2fa0d`](https://github.com/cultureamp/kaizen-design-system/commit/82ba2fa0d20c66a1688d2609d4bd7775b129349c) - - enforced no-implicit-any across kaizen - -- Updated dependencies [[`82ba2fa0d`](https://github.com/cultureamp/kaizen-design-system/commit/82ba2fa0d20c66a1688d2609d4bd7775b129349c)]: - - @kaizen/component-library@16.7.1 - - @kaizen/draft-tooltip@5.4.40 - - @kaizen/date-picker@5.21.10 - -## 1.8.0 - -### Minor Changes - -- a7ffc2239: \* Add FilterDateRangePicker component - - Filter which allows user to select a date range - - Add LabelledMessage component - - Utility component which helps create colon-separated text which supports right-to-left i18n - -### Patch Changes - -- Updated dependencies [a7ffc2239] -- Updated dependencies [fb901eec2] - - @kaizen/date-picker@5.21.9 - - @kaizen/component-library@16.7.0 - -## 1.7.13 - -### Patch Changes - -- 7b1a97028: Adding a build step before publishing. Patching components affected by the lack of build step prior to this fix - -All notable changes to this project will be documented in this file. -See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. - -## [1.7.12](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/components@1.7.11...@kaizen/components@1.7.12) (2023-04-06) - -**Note:** Version bump only for package @kaizen/components - -## [1.7.11](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/components@1.7.10...@kaizen/components@1.7.11) (2023-04-05) - -**Note:** Version bump only for package @kaizen/components - -## [1.7.10](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/components@1.7.9...@kaizen/components@1.7.10) (2023-04-04) - -**Note:** Version bump only for package @kaizen/components - -## [1.7.9](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/components@1.7.8...@kaizen/components@1.7.9) (2023-03-31) - -**Note:** Version bump only for package @kaizen/components - -## [1.7.8](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/components@1.7.7...@kaizen/components@1.7.8) (2023-03-31) - -**Note:** Version bump only for package @kaizen/components - -## [1.7.7](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/components@1.7.4...@kaizen/components@1.7.7) (2023-03-31) - -**Note:** Version bump only for package @kaizen/components - -## [1.7.4](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/components@1.7.3...@kaizen/components@1.7.4) (2023-03-30) - -**Note:** Version bump only for package @kaizen/components - -## [1.7.3](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/components@1.7.2...@kaizen/components@1.7.3) (2023-03-29) - -**Note:** Version bump only for package @kaizen/components - -## [1.7.2](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/components@1.7.1...@kaizen/components@1.7.2) (2023-03-29) - -**Note:** Version bump only for package @kaizen/components - -## [1.7.1](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/components@1.6.5...@kaizen/components@1.7.1) (2023-03-29) - -**Note:** Version bump only for package @kaizen/components - -## [1.6.5](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/components@1.6.4...@kaizen/components@1.6.5) (2023-03-28) - -**Note:** Version bump only for package @kaizen/components - -## [1.6.4](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/components@1.6.3...@kaizen/components@1.6.4) (2023-03-23) - -**Note:** Version bump only for package @kaizen/components - -## [1.6.3](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/components@1.6.2...@kaizen/components@1.6.3) (2023-03-23) - -### Bug Fixes - -- tooltip aio error ([#3378](https://github.com/cultureamp/kaizen-design-system/issues/3378)) ([3693d57](https://github.com/cultureamp/kaizen-design-system/commit/3693d57858f6640742b317f3671169eb3808a418)) - -## [1.6.2](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/components@1.6.1...@kaizen/components@1.6.2) (2023-03-22) - -### Bug Fixes - -- tooltip-aio-error ([#3374](https://github.com/cultureamp/kaizen-design-system/issues/3374)) ([949890a](https://github.com/cultureamp/kaizen-design-system/commit/949890aef62a60ff9de0790fac2034199fb422bf)) - -## [1.6.1](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/components@1.6.0...@kaizen/components@1.6.1) (2023-03-22) - -**Note:** Version bump only for package @kaizen/components - -# [1.6.0](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/components@1.5.1...@kaizen/components@1.6.0) (2023-03-22) - -### Features - -- css processing ([#3362](https://github.com/cultureamp/kaizen-design-system/issues/3362)) ([38c0fa3](https://github.com/cultureamp/kaizen-design-system/commit/38c0fa3475a5f78cd4f2c9836815b53d65f2d039)) - -## [1.5.1](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/components@1.5.0...@kaizen/components@1.5.1) (2023-03-21) - -**Note:** Version bump only for package @kaizen/components - -# [1.5.0](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/components@1.4.26...@kaizen/components@1.5.0) (2023-03-16) - -### Features - -- **filter:** Add Filter component into the AIO ([#3341](https://github.com/cultureamp/kaizen-design-system/issues/3341)) ([1806853](https://github.com/cultureamp/kaizen-design-system/commit/180685395ee53094f618af7f7292b16d72eb348b)) - -## [1.4.26](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/components@1.4.25...@kaizen/components@1.4.26) (2023-03-14) - -**Note:** Version bump only for package @kaizen/components - -## [1.4.25](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/components@1.4.24...@kaizen/components@1.4.25) (2023-03-03) - -### Bug Fixes - -- remove re-exports ([#3343](https://github.com/cultureamp/kaizen-design-system/issues/3343)) ([1f928f1](https://github.com/cultureamp/kaizen-design-system/commit/1f928f1de9ff51a0d8a205c2d9fe991056855ec6)) - -## [1.4.24](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/components@1.4.23...@kaizen/components@1.4.24) (2023-03-03) - -**Note:** Version bump only for package @kaizen/components - -## [1.4.23](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/components@1.4.22...@kaizen/components@1.4.23) (2023-03-02) - -**Note:** Version bump only for package @kaizen/components - -## [1.4.22](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/components@1.4.21...@kaizen/components@1.4.22) (2023-03-02) - -**Note:** Version bump only for package @kaizen/components - -## [1.4.21](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/components@1.4.20...@kaizen/components@1.4.21) (2023-03-02) - -**Note:** Version bump only for package @kaizen/components - -## [1.4.20](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/components@1.4.19...@kaizen/components@1.4.20) (2023-03-01) - -**Note:** Version bump only for package @kaizen/components - -## [1.4.19](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/components@1.4.18...@kaizen/components@1.4.19) (2023-02-28) - -**Note:** Version bump only for package @kaizen/components - -## [1.4.18](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/components@1.4.17...@kaizen/components@1.4.18) (2023-02-28) - -**Note:** Version bump only for package @kaizen/components - -## [1.4.17](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/components@1.4.16...@kaizen/components@1.4.17) (2023-02-28) - -### Bug Fixes - -- design-tokens-aio-import ([#3323](https://github.com/cultureamp/kaizen-design-system/issues/3323)) ([9dcf307](https://github.com/cultureamp/kaizen-design-system/commit/9dcf30761a5c8886c64b207ddb9484e8f8fb3962)) - -## [1.4.16](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/components@1.4.15...@kaizen/components@1.4.16) (2023-02-27) - -### Bug Fixes - -- make @kaizen/tailwind a dep ([#3321](https://github.com/cultureamp/kaizen-design-system/issues/3321)) ([77c36e9](https://github.com/cultureamp/kaizen-design-system/commit/77c36e9141047063693f67baf3d800c96c511daf)) - -## [1.4.15](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/components@1.4.14...@kaizen/components@1.4.15) (2023-02-27) - -### Bug Fixes - -- replace esbuild with tsup ([#3311](https://github.com/cultureamp/kaizen-design-system/issues/3311)) ([7fa6990](https://github.com/cultureamp/kaizen-design-system/commit/7fa6990a3479a4d3c33a8370ff1b5f3adf51e543)) - -## [1.4.14](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/components@1.4.13...@kaizen/components@1.4.14) (2023-02-26) - -**Note:** Version bump only for package @kaizen/components - -## [1.4.13](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/components@1.4.12...@kaizen/components@1.4.13) (2023-02-23) - -**Note:** Version bump only for package @kaizen/components - -## [1.4.12](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/components@1.4.11...@kaizen/components@1.4.12) (2023-02-23) - -**Note:** Version bump only for package @kaizen/components - -## [1.4.11](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/components@1.4.10...@kaizen/components@1.4.11) (2023-02-23) - -**Note:** Version bump only for package @kaizen/components - -## [1.4.10](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/components@1.4.9...@kaizen/components@1.4.10) (2023-02-23) - -**Note:** Version bump only for package @kaizen/components - -## [1.4.9](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/components@1.4.8...@kaizen/components@1.4.9) (2023-02-22) - -**Note:** Version bump only for package @kaizen/components - -## [1.4.8](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/components@1.4.7...@kaizen/components@1.4.8) (2023-02-22) - -**Note:** Version bump only for package @kaizen/components - -## [1.4.7](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/components@1.4.6...@kaizen/components@1.4.7) (2023-02-22) - -**Note:** Version bump only for package @kaizen/components - -## [1.4.6](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/components@1.4.5...@kaizen/components@1.4.6) (2023-02-21) - -**Note:** Version bump only for package @kaizen/components - -## [1.4.5](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/components@1.4.4...@kaizen/components@1.4.5) (2023-02-21) - -### Bug Fixes - -- aio cjs exports ([#3305](https://github.com/cultureamp/kaizen-design-system/issues/3305)) ([b778f5c](https://github.com/cultureamp/kaizen-design-system/commit/b778f5c802769d699e2472b7869076b372404de8)) - -## [1.4.4](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/components@1.4.3...@kaizen/components@1.4.4) (2023-02-21) - -**Note:** Version bump only for package @kaizen/components - -## [1.4.3](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/components@1.4.2...@kaizen/components@1.4.3) (2023-02-21) - -**Note:** Version bump only for package @kaizen/components - -## [1.4.2](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/components@1.4.1...@kaizen/components@1.4.2) (2023-02-20) - -**Note:** Version bump only for package @kaizen/components - -## [1.4.1](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/components@1.4.0...@kaizen/components@1.4.1) (2023-02-20) - -**Note:** Version bump only for package @kaizen/components - -# [1.4.0](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/components@1.3.7...@kaizen/components@1.4.0) (2023-02-20) - -### Features - -- re-export-all-existing-components-from-the-new-aio ([#3285](https://github.com/cultureamp/kaizen-design-system/issues/3285)) ([c9a483d](https://github.com/cultureamp/kaizen-design-system/commit/c9a483db2fe6b21f0b75552dc7b6735df6ae68df)) - -## [1.3.7](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/components@1.3.6...@kaizen/components@1.3.7) (2023-02-19) - -**Note:** Version bump only for package @kaizen/components - -## [1.3.6](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/components@1.3.5...@kaizen/components@1.3.6) (2023-02-17) - -### Bug Fixes - -- try to resolve regression issue ([#3293](https://github.com/cultureamp/kaizen-design-system/issues/3293)) ([f335590](https://github.com/cultureamp/kaizen-design-system/commit/f3355903f457fa46e81faac9dc5ee893784dfe9d)) - -## [1.3.5](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/components@1.3.4...@kaizen/components@1.3.5) (2023-02-17) - -### Bug Fixes - -- future package.json routes ([#3292](https://github.com/cultureamp/kaizen-design-system/issues/3292)) ([99d46c7](https://github.com/cultureamp/kaizen-design-system/commit/99d46c7b9ccb5eee2057b2153c956e66958fc236)) - -## [1.3.4](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/components@1.3.3...@kaizen/components@1.3.4) (2023-02-17) - -### Bug Fixes - -- components bundling ([#3282](https://github.com/cultureamp/kaizen-design-system/issues/3282)) ([dab93f4](https://github.com/cultureamp/kaizen-design-system/commit/dab93f4b02a350aff44cdf3e0cd9d06f22a49677)) - -## [1.3.3](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/components@1.3.2...@kaizen/components@1.3.3) (2023-02-17) - -**Note:** Version bump only for package @kaizen/components - -## [1.3.2](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/components@1.3.1...@kaizen/components@1.3.2) (2023-02-17) - -**Note:** Version bump only for package @kaizen/components - -## [1.3.1](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/components@1.3.0...@kaizen/components@1.3.1) (2023-02-16) - -**Note:** Version bump only for package @kaizen/components - -# [1.3.0](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/components@1.2.0...@kaizen/components@1.3.0) (2023-02-15) - -### Features - -- 44-processing-tailwind-css ([#3273](https://github.com/cultureamp/kaizen-design-system/issues/3273)) ([4f2ace5](https://github.com/cultureamp/kaizen-design-system/commit/4f2ace55edb1d3b5fc0005b65165fd584357a0d2)) - -# [1.2.0](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/components@1.1.0...@kaizen/components@1.2.0) (2023-02-13) - -### Features - -- **KaizenProvider:** add KaizenProvider to @kaizen/components ([#3239](https://github.com/cultureamp/kaizen-design-system/issues/3239)) ([16819f0](https://github.com/cultureamp/kaizen-design-system/commit/16819f0717dfebd6a938b2784dc84751650f8be4)) - -# 1.1.0 (2023-01-24) - -### Features - -- add components AIO ([#3229](https://github.com/cultureamp/kaizen-design-system/issues/3229)) ([2b63a37](https://github.com/cultureamp/kaizen-design-system/commit/2b63a3726fafa02c977ba84eedaab4119e40cf51)) diff --git a/packages/components/future/README.md b/packages/components/future/README.md deleted file mode 100644 index 7848272..0000000 --- a/packages/components/future/README.md +++ /dev/null @@ -1,27 +0,0 @@ -# Entrypoint: future - -This directory is here to redirect any imports from `@kaizen/components/future` to the correct distribution of compiled code to allow for treeshaking of future components. - -More details: [https://github.com/theKashey/multiple-entry-points-example](https://github.com/theKashey/multiple-entry-points-example) - -## Contribution - -All "future" components are to be added to the `src/__future__` directory. - -### What is a "future" component? - -These are components which are scheduled to replace an already existing component. **It is not** to house unfinished components. - -eg. `Table` has been rebuilt and released as a "future" component for consumers to adopt. - -``` -// Current import which will be deprecated: -import { Table } from "@kaizen/components" - -// Consumers adopt future components: -import { Table } from "@kaizen/components/future" -``` - -Eventually, all future components are moved to the root import. - -More details [Kaizen AIO strategy: Old & new components side-by-side](https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/2963439636/Kaizen+all-in-one+strategy#Old-%26-new-components-side-by-side) \ No newline at end of file diff --git a/packages/components/future/package.json b/packages/components/future/package.json deleted file mode 100644 index 91124e4..0000000 --- a/packages/components/future/package.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "main": "../dist/cjs/future.js", - "module": "../dist/esm/future.js", - "types": "../dist/esm/dts/__future__/index.d.ts" -} diff --git a/packages/components/icons/academy.icon.svg b/packages/components/icons/academy.icon.svg deleted file mode 100644 index 0750073..0000000 --- a/packages/components/icons/academy.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - 2. Atoms/Icons/Navigational/Global/academy - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/action-off-white.icon.svg b/packages/components/icons/action-off-white.icon.svg deleted file mode 100644 index 35bbdde..0000000 --- a/packages/components/icons/action-off-white.icon.svg +++ /dev/null @@ -1,18 +0,0 @@ - - - - action-off-white - Created with Sketch. - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/action-off.icon.svg b/packages/components/icons/action-off.icon.svg deleted file mode 100644 index 5da6533..0000000 --- a/packages/components/icons/action-off.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - action-off - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/action-on.icon.svg b/packages/components/icons/action-on.icon.svg deleted file mode 100644 index 099a5fe..0000000 --- a/packages/components/icons/action-on.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - action-on - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/add-link.icon.svg b/packages/components/icons/add-link.icon.svg deleted file mode 100644 index 9d2a5fd..0000000 --- a/packages/components/icons/add-link.icon.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/components/icons/add-white.icon.svg b/packages/components/icons/add-white.icon.svg deleted file mode 100644 index 363fdd2..0000000 --- a/packages/components/icons/add-white.icon.svg +++ /dev/null @@ -1,18 +0,0 @@ - - - - add-white - Created with Sketch. - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/add.icon.svg b/packages/components/icons/add.icon.svg deleted file mode 100644 index bd3b031..0000000 --- a/packages/components/icons/add.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - Icons/Actions/add - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/archived-white.icon.svg b/packages/components/icons/archived-white.icon.svg deleted file mode 100644 index ecd52a5..0000000 --- a/packages/components/icons/archived-white.icon.svg +++ /dev/null @@ -1,18 +0,0 @@ - - - - archived-white - Created with Sketch. - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/archived.icon.svg b/packages/components/icons/archived.icon.svg deleted file mode 100644 index d644219..0000000 --- a/packages/components/icons/archived.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - Icons/Surveys/survey-archived - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/arrow-backward.icon.svg b/packages/components/icons/arrow-backward.icon.svg deleted file mode 100644 index a1ff2d8..0000000 --- a/packages/components/icons/arrow-backward.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - arrow-backward - Created with Sketch. - - - - - - - - - - - - diff --git a/packages/components/icons/arrow-down.icon.svg b/packages/components/icons/arrow-down.icon.svg deleted file mode 100644 index 81daf6b..0000000 --- a/packages/components/icons/arrow-down.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - arrow-down - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/arrow-forward.icon.svg b/packages/components/icons/arrow-forward.icon.svg deleted file mode 100644 index 840f4bb..0000000 --- a/packages/components/icons/arrow-forward.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - arrow-forward - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/arrow-left.icon.svg b/packages/components/icons/arrow-left.icon.svg deleted file mode 100644 index 414e5c5..0000000 --- a/packages/components/icons/arrow-left.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - arrow-left - Created with Sketch. - - - - - - - - - - - - diff --git a/packages/components/icons/arrow-right.icon.svg b/packages/components/icons/arrow-right.icon.svg deleted file mode 100644 index d6bfa0f..0000000 --- a/packages/components/icons/arrow-right.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - arrow-right - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/arrow-up.icon.svg b/packages/components/icons/arrow-up.icon.svg deleted file mode 100644 index 07929bf..0000000 --- a/packages/components/icons/arrow-up.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - Atoms/Icons/Directional/arrow-up - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/blank.icon.svg b/packages/components/icons/blank.icon.svg deleted file mode 100644 index 6331b35..0000000 --- a/packages/components/icons/blank.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - blank - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/bold.icon.svg b/packages/components/icons/bold.icon.svg deleted file mode 100644 index 418da59..0000000 --- a/packages/components/icons/bold.icon.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/components/icons/bookmark-off.icon.svg b/packages/components/icons/bookmark-off.icon.svg deleted file mode 100644 index 591e477..0000000 --- a/packages/components/icons/bookmark-off.icon.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/components/icons/bookmark-on.icon.svg b/packages/components/icons/bookmark-on.icon.svg deleted file mode 100644 index b6a6892..0000000 --- a/packages/components/icons/bookmark-on.icon.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/components/icons/branching.icon.svg b/packages/components/icons/branching.icon.svg deleted file mode 100644 index 2c88285..0000000 --- a/packages/components/icons/branching.icon.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - 2. Style/Icons/Informational/branching - Created with Sketch. - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/bulletted-list.icon.svg b/packages/components/icons/bulletted-list.icon.svg deleted file mode 100644 index 93f2578..0000000 --- a/packages/components/icons/bulletted-list.icon.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/components/icons/ca-monogram.icon.svg b/packages/components/icons/ca-monogram.icon.svg deleted file mode 100644 index 72718d2..0000000 --- a/packages/components/icons/ca-monogram.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - Icons/Navigational/Global/ca-monogram - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/camera.icon.svg b/packages/components/icons/camera.icon.svg deleted file mode 100644 index dcabfcf..0000000 --- a/packages/components/icons/camera.icon.svg +++ /dev/null @@ -1,19 +0,0 @@ - - - - photo-upload icon - Created with Sketch. - - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/caution-white.icon.svg b/packages/components/icons/caution-white.icon.svg deleted file mode 100644 index 7cc1134..0000000 --- a/packages/components/icons/caution-white.icon.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/components/icons/caution.icon.svg b/packages/components/icons/caution.icon.svg deleted file mode 100644 index a1de659..0000000 --- a/packages/components/icons/caution.icon.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/components/icons/check.icon.svg b/packages/components/icons/check.icon.svg deleted file mode 100644 index 8c625c3..0000000 --- a/packages/components/icons/check.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - Icons/Informational/check - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/chevron-down.icon.svg b/packages/components/icons/chevron-down.icon.svg deleted file mode 100644 index a980f67..0000000 --- a/packages/components/icons/chevron-down.icon.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/packages/components/icons/chevron-left.icon.svg b/packages/components/icons/chevron-left.icon.svg deleted file mode 100644 index b40d89f..0000000 --- a/packages/components/icons/chevron-left.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - chevron-left - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/chevron-right.icon.svg b/packages/components/icons/chevron-right.icon.svg deleted file mode 100644 index d5a2d45..0000000 --- a/packages/components/icons/chevron-right.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - chevron-right - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/chevron-up.icon.svg b/packages/components/icons/chevron-up.icon.svg deleted file mode 100644 index a62c334..0000000 --- a/packages/components/icons/chevron-up.icon.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/packages/components/icons/clear-white.icon.svg b/packages/components/icons/clear-white.icon.svg deleted file mode 100644 index 995412a..0000000 --- a/packages/components/icons/clear-white.icon.svg +++ /dev/null @@ -1,18 +0,0 @@ - - - - clear - Created with Sketch. - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/clear.icon.svg b/packages/components/icons/clear.icon.svg deleted file mode 100644 index a4c4982..0000000 --- a/packages/components/icons/clear.icon.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - \ No newline at end of file diff --git a/packages/components/icons/close.icon.svg b/packages/components/icons/close.icon.svg deleted file mode 100644 index f455b6c..0000000 --- a/packages/components/icons/close.icon.svg +++ /dev/null @@ -1 +0,0 @@ -Icons/Actions/close \ No newline at end of file diff --git a/packages/components/icons/closed-white.icon.svg b/packages/components/icons/closed-white.icon.svg deleted file mode 100644 index d28f755..0000000 --- a/packages/components/icons/closed-white.icon.svg +++ /dev/null @@ -1,18 +0,0 @@ - - - - closed-white - Created with Sketch. - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/closed.icon.svg b/packages/components/icons/closed.icon.svg deleted file mode 100644 index cdb21b9..0000000 --- a/packages/components/icons/closed.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - Icons/Surveys/survey-closed - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/comment-add-white.icon.svg b/packages/components/icons/comment-add-white.icon.svg deleted file mode 100644 index d41af57..0000000 --- a/packages/components/icons/comment-add-white.icon.svg +++ /dev/null @@ -1,18 +0,0 @@ - - - - comment-add-white - Created with Sketch. - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/comment-add.icon.svg b/packages/components/icons/comment-add.icon.svg deleted file mode 100644 index 538f072..0000000 --- a/packages/components/icons/comment-add.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - comment-add - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/comment-disabled-white.icon.svg b/packages/components/icons/comment-disabled-white.icon.svg deleted file mode 100644 index 1584b65..0000000 --- a/packages/components/icons/comment-disabled-white.icon.svg +++ /dev/null @@ -1,18 +0,0 @@ - - - - comment-disabled-white - Created with Sketch. - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/comment-disabled.icon.svg b/packages/components/icons/comment-disabled.icon.svg deleted file mode 100644 index e54a92e..0000000 --- a/packages/components/icons/comment-disabled.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - comment-disabled - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/comment-white.icon.svg b/packages/components/icons/comment-white.icon.svg deleted file mode 100644 index 7abab6c..0000000 --- a/packages/components/icons/comment-white.icon.svg +++ /dev/null @@ -1,20 +0,0 @@ - - - - comment-white - Created with Sketch. - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/comment.icon.svg b/packages/components/icons/comment.icon.svg deleted file mode 100644 index 15902bb..0000000 --- a/packages/components/icons/comment.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - comment - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/communications.icon.svg b/packages/components/icons/communications.icon.svg deleted file mode 100644 index 6187db5..0000000 --- a/packages/components/icons/communications.icon.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - 2. Style/Icons/Informational/communications - Created with Sketch. - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/competency-library.icon.svg b/packages/components/icons/competency-library.icon.svg deleted file mode 100644 index dcd22d1..0000000 --- a/packages/components/icons/competency-library.icon.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/packages/components/icons/configure.icon.svg b/packages/components/icons/configure.icon.svg deleted file mode 100644 index 7d116e7..0000000 --- a/packages/components/icons/configure.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - Atoms/Icons/Actions/configure - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/connect.icon.svg b/packages/components/icons/connect.icon.svg deleted file mode 100644 index dfbb30d..0000000 --- a/packages/components/icons/connect.icon.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/components/icons/custom.icon.svg b/packages/components/icons/custom.icon.svg deleted file mode 100644 index b0d8c18..0000000 --- a/packages/components/icons/custom.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - custom - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/dashboard.icon.svg b/packages/components/icons/dashboard.icon.svg deleted file mode 100644 index 7c6febf..0000000 --- a/packages/components/icons/dashboard.icon.svg +++ /dev/null @@ -1,19 +0,0 @@ - - - - Atoms/Icons/Navigational/Effectiveness/dashboard - Created with Sketch. - - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/date-end-white.icon.svg b/packages/components/icons/date-end-white.icon.svg deleted file mode 100644 index 64e095b..0000000 --- a/packages/components/icons/date-end-white.icon.svg +++ /dev/null @@ -1,19 +0,0 @@ - - - - date-end-white - Created with Sketch. - - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/date-end.icon.svg b/packages/components/icons/date-end.icon.svg deleted file mode 100644 index 011b67a..0000000 --- a/packages/components/icons/date-end.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - date-end - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/date-range-white.icon.svg b/packages/components/icons/date-range-white.icon.svg deleted file mode 100644 index c92e68b..0000000 --- a/packages/components/icons/date-range-white.icon.svg +++ /dev/null @@ -1,21 +0,0 @@ - - - - date-range-white - Created with Sketch. - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/date-range.icon.svg b/packages/components/icons/date-range.icon.svg deleted file mode 100644 index 4266de2..0000000 --- a/packages/components/icons/date-range.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - date-range - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/date-start-white.icon.svg b/packages/components/icons/date-start-white.icon.svg deleted file mode 100644 index 82dd3c5..0000000 --- a/packages/components/icons/date-start-white.icon.svg +++ /dev/null @@ -1,19 +0,0 @@ - - - - date-start-white - Created with Sketch. - - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/date-start.icon.svg b/packages/components/icons/date-start.icon.svg deleted file mode 100644 index b23d6a8..0000000 --- a/packages/components/icons/date-start.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - date-start - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/decrease-indent.icon.svg b/packages/components/icons/decrease-indent.icon.svg deleted file mode 100644 index c7897e6..0000000 --- a/packages/components/icons/decrease-indent.icon.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/components/icons/delta-bare-white.icon.svg b/packages/components/icons/delta-bare-white.icon.svg deleted file mode 100644 index cdd5971..0000000 --- a/packages/components/icons/delta-bare-white.icon.svg +++ /dev/null @@ -1,18 +0,0 @@ - - - - delta-bare-white - Created with Sketch. - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/delta-bare.icon.svg b/packages/components/icons/delta-bare.icon.svg deleted file mode 100644 index 3486e14..0000000 --- a/packages/components/icons/delta-bare.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - delta-bare - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/delta-flat.icon.svg b/packages/components/icons/delta-flat.icon.svg deleted file mode 100644 index bff5728..0000000 --- a/packages/components/icons/delta-flat.icon.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/packages/components/icons/delta-negative.icon.svg b/packages/components/icons/delta-negative.icon.svg deleted file mode 100644 index 26a1c21..0000000 --- a/packages/components/icons/delta-negative.icon.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/components/icons/delta-positive.icon.svg b/packages/components/icons/delta-positive.icon.svg deleted file mode 100644 index 26e53fe..0000000 --- a/packages/components/icons/delta-positive.icon.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/components/icons/delta-white.icon.svg b/packages/components/icons/delta-white.icon.svg deleted file mode 100644 index 2a5d956..0000000 --- a/packages/components/icons/delta-white.icon.svg +++ /dev/null @@ -1,19 +0,0 @@ - - - - delta-white - Created with Sketch. - - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/delta.icon.svg b/packages/components/icons/delta.icon.svg deleted file mode 100644 index 4fd59d3..0000000 --- a/packages/components/icons/delta.icon.svg +++ /dev/null @@ -1,18 +0,0 @@ - - - - delta - Created with Sketch. - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/demographics.icon.svg b/packages/components/icons/demographics.icon.svg deleted file mode 100644 index f99cf8b..0000000 --- a/packages/components/icons/demographics.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - demographics - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/department.icon.svg b/packages/components/icons/department.icon.svg deleted file mode 100644 index 582b7bc..0000000 --- a/packages/components/icons/department.icon.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/packages/components/icons/draft-white.icon.svg b/packages/components/icons/draft-white.icon.svg deleted file mode 100644 index 729a30d..0000000 --- a/packages/components/icons/draft-white.icon.svg +++ /dev/null @@ -1,19 +0,0 @@ - - - - draft-white - Created with Sketch. - - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/draft.icon.svg b/packages/components/icons/draft.icon.svg deleted file mode 100644 index ea17825..0000000 --- a/packages/components/icons/draft.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - draft - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/drag.icon.svg b/packages/components/icons/drag.icon.svg deleted file mode 100644 index 3475037..0000000 --- a/packages/components/icons/drag.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - 2. Style/Icons/Actions/drag - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/duplicate.icon.svg b/packages/components/icons/duplicate.icon.svg deleted file mode 100644 index b3449b8..0000000 --- a/packages/components/icons/duplicate.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - Icons/Actions/duplicate - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/edit.icon.svg b/packages/components/icons/edit.icon.svg deleted file mode 100644 index 24fe042..0000000 --- a/packages/components/icons/edit.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - edit - Created with Sketch. - - - - - - - - - - - - diff --git a/packages/components/icons/effectiveness.icon.svg b/packages/components/icons/effectiveness.icon.svg deleted file mode 100644 index 2f103f7..0000000 --- a/packages/components/icons/effectiveness.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - effectiveness - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/ellipsis.icon.svg b/packages/components/icons/ellipsis.icon.svg deleted file mode 100644 index cb9f5fa..0000000 --- a/packages/components/icons/ellipsis.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - meatballs - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/email.icon.svg b/packages/components/icons/email.icon.svg deleted file mode 100644 index 86382b3..0000000 --- a/packages/components/icons/email.icon.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - 2. Style/Icons/Zugata/email - Created with Sketch. - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/empty-white.icon.svg b/packages/components/icons/empty-white.icon.svg deleted file mode 100644 index 1f72cb4..0000000 --- a/packages/components/icons/empty-white.icon.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - empty-white - Created with Sketch. - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/empty.icon.svg b/packages/components/icons/empty.icon.svg deleted file mode 100644 index 3154a75..0000000 --- a/packages/components/icons/empty.icon.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - \ No newline at end of file diff --git a/packages/components/icons/end.icon.svg b/packages/components/icons/end.icon.svg deleted file mode 100644 index 7c03e15..0000000 --- a/packages/components/icons/end.icon.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/components/icons/engagement-white.icon.svg b/packages/components/icons/engagement-white.icon.svg deleted file mode 100644 index 0939738..0000000 --- a/packages/components/icons/engagement-white.icon.svg +++ /dev/null @@ -1,18 +0,0 @@ - - - - engagement-white - Created with Sketch. - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/engagement.icon.svg b/packages/components/icons/engagement.icon.svg deleted file mode 100644 index fe8184a..0000000 --- a/packages/components/icons/engagement.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - engagement - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/equal-white.icon.svg b/packages/components/icons/equal-white.icon.svg deleted file mode 100644 index abe63b4..0000000 --- a/packages/components/icons/equal-white.icon.svg +++ /dev/null @@ -1,19 +0,0 @@ - - - - equal-white - Created with Sketch. - - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/equal.icon.svg b/packages/components/icons/equal.icon.svg deleted file mode 100644 index 51c620a..0000000 --- a/packages/components/icons/equal.icon.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - equal - Created with Sketch. - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/exclamation-octagon-white.icon.svg b/packages/components/icons/exclamation-octagon-white.icon.svg deleted file mode 100644 index 175cfe6..0000000 --- a/packages/components/icons/exclamation-octagon-white.icon.svg +++ /dev/null @@ -1,19 +0,0 @@ - - - - exclamation-octagon-white - Created with Sketch. - - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/exclamation-octagon.icon.svg b/packages/components/icons/exclamation-octagon.icon.svg deleted file mode 100644 index 3a18003..0000000 --- a/packages/components/icons/exclamation-octagon.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - exclamation-octagon - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/exclamation-white.icon.svg b/packages/components/icons/exclamation-white.icon.svg deleted file mode 100644 index 9a707d5..0000000 --- a/packages/components/icons/exclamation-white.icon.svg +++ /dev/null @@ -1,19 +0,0 @@ - - - - 2. Atoms/Icons/Informational/warning - Created with Sketch. - - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/exclamation.icon.svg b/packages/components/icons/exclamation.icon.svg deleted file mode 100644 index fa2a2c4..0000000 --- a/packages/components/icons/exclamation.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - exclamation-white - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/experience.icon.svg b/packages/components/icons/experience.icon.svg deleted file mode 100644 index 2c4cebf..0000000 --- a/packages/components/icons/experience.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - experience - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/export-white.icon.svg b/packages/components/icons/export-white.icon.svg deleted file mode 100644 index 65169a7..0000000 --- a/packages/components/icons/export-white.icon.svg +++ /dev/null @@ -1,18 +0,0 @@ - - - - export-white - Created with Sketch. - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/export.icon.svg b/packages/components/icons/export.icon.svg deleted file mode 100644 index 221e259..0000000 --- a/packages/components/icons/export.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - export - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/external-link.icon.svg b/packages/components/icons/external-link.icon.svg deleted file mode 100644 index c9b95cb..0000000 --- a/packages/components/icons/external-link.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - external-link - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/face-dissatisfied-white.icon.svg b/packages/components/icons/face-dissatisfied-white.icon.svg deleted file mode 100644 index 19d40c8..0000000 --- a/packages/components/icons/face-dissatisfied-white.icon.svg +++ /dev/null @@ -1,16 +0,0 @@ - - - - face-dissatisfied-white - Created with Sketch. - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/face-dissatisfied.icon.svg b/packages/components/icons/face-dissatisfied.icon.svg deleted file mode 100644 index d10e5bc..0000000 --- a/packages/components/icons/face-dissatisfied.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - dissatisfied - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/face-neutral-white.icon.svg b/packages/components/icons/face-neutral-white.icon.svg deleted file mode 100644 index 79dbdde..0000000 --- a/packages/components/icons/face-neutral-white.icon.svg +++ /dev/null @@ -1,21 +0,0 @@ - - - - face-neutral-white - Created with Sketch. - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/face-neutral.icon.svg b/packages/components/icons/face-neutral.icon.svg deleted file mode 100644 index 3ccd74a..0000000 --- a/packages/components/icons/face-neutral.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - neutral - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/face-satisfied-white.icon.svg b/packages/components/icons/face-satisfied-white.icon.svg deleted file mode 100644 index 74ddf95..0000000 --- a/packages/components/icons/face-satisfied-white.icon.svg +++ /dev/null @@ -1,21 +0,0 @@ - - - - face-satisfied-white - Created with Sketch. - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/face-satisfied.icon.svg b/packages/components/icons/face-satisfied.icon.svg deleted file mode 100644 index de97086..0000000 --- a/packages/components/icons/face-satisfied.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - satisfied - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/face-very-dissatisfied-white.icon.svg b/packages/components/icons/face-very-dissatisfied-white.icon.svg deleted file mode 100644 index 39cd735..0000000 --- a/packages/components/icons/face-very-dissatisfied-white.icon.svg +++ /dev/null @@ -1,21 +0,0 @@ - - - - face-very-dissatisfied-white - Created with Sketch. - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/face-very-dissatisfied.icon.svg b/packages/components/icons/face-very-dissatisfied.icon.svg deleted file mode 100644 index 01513a4..0000000 --- a/packages/components/icons/face-very-dissatisfied.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - very-dissatisfied - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/face-very-satisfied-white.icon.svg b/packages/components/icons/face-very-satisfied-white.icon.svg deleted file mode 100644 index 94e2ae6..0000000 --- a/packages/components/icons/face-very-satisfied-white.icon.svg +++ /dev/null @@ -1,21 +0,0 @@ - - - - face-very-satisfied-white - Created with Sketch. - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/face-very-satisfied.icon.svg b/packages/components/icons/face-very-satisfied.icon.svg deleted file mode 100644 index 78892bc..0000000 --- a/packages/components/icons/face-very-satisfied.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - very-satisfied - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/factors.icon.svg b/packages/components/icons/factors.icon.svg deleted file mode 100644 index 26a4a28..0000000 --- a/packages/components/icons/factors.icon.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - 2. Style/Icons/Informational/factors - Created with Sketch. - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/favorite-off.icon.svg b/packages/components/icons/favorite-off.icon.svg deleted file mode 100644 index 03e21ed..0000000 --- a/packages/components/icons/favorite-off.icon.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - 2. Style/Icons/Zugata/favorite-off - Created with Sketch. - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/favorite-on.icon.svg b/packages/components/icons/favorite-on.icon.svg deleted file mode 100644 index d0a3db1..0000000 --- a/packages/components/icons/favorite-on.icon.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - 2. Style/Icons/Zugata/favorite-on - Created with Sketch. - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/feedback-classify-white.icon.svg b/packages/components/icons/feedback-classify-white.icon.svg deleted file mode 100644 index 4b68fec..0000000 --- a/packages/components/icons/feedback-classify-white.icon.svg +++ /dev/null @@ -1,18 +0,0 @@ - - - - feedback-classify-white - Created with Sketch. - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/feedback-classify.icon.svg b/packages/components/icons/feedback-classify.icon.svg deleted file mode 100644 index 9bdc0c7..0000000 --- a/packages/components/icons/feedback-classify.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - feedback-classify - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/feedback-completed-white.icon.svg b/packages/components/icons/feedback-completed-white.icon.svg deleted file mode 100644 index 454677e..0000000 --- a/packages/components/icons/feedback-completed-white.icon.svg +++ /dev/null @@ -1,19 +0,0 @@ - - - - feedback-completed-white - Created with Sketch. - - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/feedback-completed.icon.svg b/packages/components/icons/feedback-completed.icon.svg deleted file mode 100644 index d79514e..0000000 --- a/packages/components/icons/feedback-completed.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - feedback-completed - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/feedback-report-white.icon.svg b/packages/components/icons/feedback-report-white.icon.svg deleted file mode 100644 index 3386663..0000000 --- a/packages/components/icons/feedback-report-white.icon.svg +++ /dev/null @@ -1,20 +0,0 @@ - - - - feedback-report-white - Created with Sketch. - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/feedback-report.icon.svg b/packages/components/icons/feedback-report.icon.svg deleted file mode 100644 index a97376b..0000000 --- a/packages/components/icons/feedback-report.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - feedback-report - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/feedback-review-white.icon.svg b/packages/components/icons/feedback-review-white.icon.svg deleted file mode 100644 index edf9922..0000000 --- a/packages/components/icons/feedback-review-white.icon.svg +++ /dev/null @@ -1,19 +0,0 @@ - - - - feedback-review-white - Created with Sketch. - - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/feedback-review.icon.svg b/packages/components/icons/feedback-review.icon.svg deleted file mode 100644 index 43623d1..0000000 --- a/packages/components/icons/feedback-review.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - feedback-review - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/feedback-share-white.icon.svg b/packages/components/icons/feedback-share-white.icon.svg deleted file mode 100644 index b2e33c1..0000000 --- a/packages/components/icons/feedback-share-white.icon.svg +++ /dev/null @@ -1,18 +0,0 @@ - - - - feedback-share-white - Created with Sketch. - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/feedback-share.icon.svg b/packages/components/icons/feedback-share.icon.svg deleted file mode 100644 index f0c16a9..0000000 --- a/packages/components/icons/feedback-share.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - feedback-share - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/file-white.icon.svg b/packages/components/icons/file-white.icon.svg deleted file mode 100644 index 7d7fb96..0000000 --- a/packages/components/icons/file-white.icon.svg +++ /dev/null @@ -1,20 +0,0 @@ - - - - file-white - Created with Sketch. - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/file.icon.svg b/packages/components/icons/file.icon.svg deleted file mode 100644 index 550cbed..0000000 --- a/packages/components/icons/file.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - file - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/filter.icon.svg b/packages/components/icons/filter.icon.svg deleted file mode 100644 index 9e33bac..0000000 --- a/packages/components/icons/filter.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - filter - Created with Sketch. - - - - - - - - - - - - diff --git a/packages/components/icons/flag-off-white.icon.svg b/packages/components/icons/flag-off-white.icon.svg deleted file mode 100644 index db5b7b6..0000000 --- a/packages/components/icons/flag-off-white.icon.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - flag-off-white - Created with Sketch. - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/flag-off.icon.svg b/packages/components/icons/flag-off.icon.svg deleted file mode 100644 index 4b88502..0000000 --- a/packages/components/icons/flag-off.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - flag-off - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/flag-on.icon.svg b/packages/components/icons/flag-on.icon.svg deleted file mode 100644 index dc71de4..0000000 --- a/packages/components/icons/flag-on.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - flag-on - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/full.icon.svg b/packages/components/icons/full.icon.svg deleted file mode 100644 index 9e11db9..0000000 --- a/packages/components/icons/full.icon.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/packages/components/icons/grid-view.icon.svg b/packages/components/icons/grid-view.icon.svg deleted file mode 100644 index 119964b..0000000 --- a/packages/components/icons/grid-view.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - grid-view - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/guidance.icon.svg b/packages/components/icons/guidance.icon.svg deleted file mode 100644 index a7aae82..0000000 --- a/packages/components/icons/guidance.icon.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - 2. Style/Icons/Informational/guidance - Created with Sketch. - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/hamburger.icon.svg b/packages/components/icons/hamburger.icon.svg deleted file mode 100644 index 0482d05..0000000 --- a/packages/components/icons/hamburger.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - hamburger - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/heatmap-white.icon.svg b/packages/components/icons/heatmap-white.icon.svg deleted file mode 100644 index 2e9a343..0000000 --- a/packages/components/icons/heatmap-white.icon.svg +++ /dev/null @@ -1,18 +0,0 @@ - - - - heatmap-white - Created with Sketch. - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/heatmap.icon.svg b/packages/components/icons/heatmap.icon.svg deleted file mode 100644 index f569099..0000000 --- a/packages/components/icons/heatmap.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - heatmap - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/hierarchy.icon.svg b/packages/components/icons/hierarchy.icon.svg deleted file mode 100644 index 968bd9c..0000000 --- a/packages/components/icons/hierarchy.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - hierarchy - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/home.icon.svg b/packages/components/icons/home.icon.svg deleted file mode 100644 index b1def82..0000000 --- a/packages/components/icons/home.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - home - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/import-white.icon.svg b/packages/components/icons/import-white.icon.svg deleted file mode 100644 index 6a8ba1d..0000000 --- a/packages/components/icons/import-white.icon.svg +++ /dev/null @@ -1,18 +0,0 @@ - - - - import-white - Created with Sketch. - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/import.icon.svg b/packages/components/icons/import.icon.svg deleted file mode 100644 index b95c8c1..0000000 --- a/packages/components/icons/import.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - import - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/increase-indent.icon.svg b/packages/components/icons/increase-indent.icon.svg deleted file mode 100644 index 12ad5fe..0000000 --- a/packages/components/icons/increase-indent.icon.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/components/icons/information-white.icon.svg b/packages/components/icons/information-white.icon.svg deleted file mode 100644 index 026190a..0000000 --- a/packages/components/icons/information-white.icon.svg +++ /dev/null @@ -1,19 +0,0 @@ - - - - information-white - Created with Sketch. - - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/information.icon.svg b/packages/components/icons/information.icon.svg deleted file mode 100644 index e826b17..0000000 --- a/packages/components/icons/information.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - information-white - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/insight.icon.svg b/packages/components/icons/insight.icon.svg deleted file mode 100644 index c34c9ac..0000000 --- a/packages/components/icons/insight.icon.svg +++ /dev/null @@ -1,19 +0,0 @@ - - - - Atoms/Icons/Navigational/Engagement/insight - Created with Sketch. - - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/invisible.icon.svg b/packages/components/icons/invisible.icon.svg deleted file mode 100644 index 1201878..0000000 --- a/packages/components/icons/invisible.icon.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - invisible - Created with Sketch. - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/italics.icon.svg b/packages/components/icons/italics.icon.svg deleted file mode 100644 index 245cdd0..0000000 --- a/packages/components/icons/italics.icon.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/components/icons/kebab.icon.svg b/packages/components/icons/kebab.icon.svg deleted file mode 100644 index 7a14e47..0000000 --- a/packages/components/icons/kebab.icon.svg +++ /dev/null @@ -1,19 +0,0 @@ - - - - kebab - Created with Sketch. - - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/kiosk-white.icon.svg b/packages/components/icons/kiosk-white.icon.svg deleted file mode 100644 index abc0ff6..0000000 --- a/packages/components/icons/kiosk-white.icon.svg +++ /dev/null @@ -1,19 +0,0 @@ - - - - kiosk-white - Created with Sketch. - - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/kiosk.icon.svg b/packages/components/icons/kiosk.icon.svg deleted file mode 100644 index 9b6a256..0000000 --- a/packages/components/icons/kiosk.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - kiosk - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/launch-white.icon.svg b/packages/components/icons/launch-white.icon.svg deleted file mode 100644 index c024845..0000000 --- a/packages/components/icons/launch-white.icon.svg +++ /dev/null @@ -1,18 +0,0 @@ - - - - launch-white - Created with Sketch. - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/launch.icon.svg b/packages/components/icons/launch.icon.svg deleted file mode 100644 index b91e287..0000000 --- a/packages/components/icons/launch.icon.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - launch - Created with Sketch. - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/leaderboard.icon.svg b/packages/components/icons/leaderboard.icon.svg deleted file mode 100644 index 9934e36..0000000 --- a/packages/components/icons/leaderboard.icon.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - 2. Style/Icons/Zugata/leaderboard - Created with Sketch. - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/list-view.icon.svg b/packages/components/icons/list-view.icon.svg deleted file mode 100644 index 411e962..0000000 --- a/packages/components/icons/list-view.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - Icons/Views/list-view - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/lock-white.icon.svg b/packages/components/icons/lock-white.icon.svg deleted file mode 100644 index 638bef7..0000000 --- a/packages/components/icons/lock-white.icon.svg +++ /dev/null @@ -1,18 +0,0 @@ - - - - 2. Atoms/Icons/Informational/lock - Created with Sketch. - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/lock.icon.svg b/packages/components/icons/lock.icon.svg deleted file mode 100644 index 51e09ec..0000000 --- a/packages/components/icons/lock.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - 2. Atoms/Icons/Informational/lock - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/log-out.icon.svg b/packages/components/icons/log-out.icon.svg deleted file mode 100644 index b657393..0000000 --- a/packages/components/icons/log-out.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - log-out - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/maximize.icon.svg b/packages/components/icons/maximize.icon.svg deleted file mode 100644 index d859326..0000000 --- a/packages/components/icons/maximize.icon.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/components/icons/meatballs.icon.svg b/packages/components/icons/meatballs.icon.svg deleted file mode 100644 index cb9f5fa..0000000 --- a/packages/components/icons/meatballs.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - meatballs - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/minimize.icon.svg b/packages/components/icons/minimize.icon.svg deleted file mode 100644 index 6361761..0000000 --- a/packages/components/icons/minimize.icon.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/components/icons/minus.icon.svg b/packages/components/icons/minus.icon.svg deleted file mode 100644 index c2888d4..0000000 --- a/packages/components/icons/minus.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - minus - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/navigator.icon.svg b/packages/components/icons/navigator.icon.svg deleted file mode 100644 index 95708d1..0000000 --- a/packages/components/icons/navigator.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - navigator - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/notification.icon.svg b/packages/components/icons/notification.icon.svg deleted file mode 100644 index 8028d33..0000000 --- a/packages/components/icons/notification.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - 2. Style/Icons/Informational/notification - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/numbered-list-rtl.icon.svg b/packages/components/icons/numbered-list-rtl.icon.svg deleted file mode 100644 index 77780b0..0000000 --- a/packages/components/icons/numbered-list-rtl.icon.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/components/icons/numbered-list.icon.svg b/packages/components/icons/numbered-list.icon.svg deleted file mode 100644 index 32f0d9b..0000000 --- a/packages/components/icons/numbered-list.icon.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/components/icons/open-white.icon.svg b/packages/components/icons/open-white.icon.svg deleted file mode 100644 index 8bc0ec4..0000000 --- a/packages/components/icons/open-white.icon.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - open-white - Created with Sketch. - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/open.icon.svg b/packages/components/icons/open.icon.svg deleted file mode 100644 index 9800130..0000000 --- a/packages/components/icons/open.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - open - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/organization.icon.svg b/packages/components/icons/organization.icon.svg deleted file mode 100644 index 16c284e..0000000 --- a/packages/components/icons/organization.icon.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/components/icons/participation-white.icon.svg b/packages/components/icons/participation-white.icon.svg deleted file mode 100644 index 0c0bcaa..0000000 --- a/packages/components/icons/participation-white.icon.svg +++ /dev/null @@ -1,18 +0,0 @@ - - - - participation-white - Created with Sketch. - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/participation.icon.svg b/packages/components/icons/participation.icon.svg deleted file mode 100644 index f8d7a52..0000000 --- a/packages/components/icons/participation.icon.svg +++ /dev/null @@ -1,19 +0,0 @@ - - - - Atoms/Icons/Navigational/Effectiveness/participation - Created with Sketch. - - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/pause-white.icon.svg b/packages/components/icons/pause-white.icon.svg deleted file mode 100644 index b6446e6..0000000 --- a/packages/components/icons/pause-white.icon.svg +++ /dev/null @@ -1,19 +0,0 @@ - - - - pause-white - Created with Sketch. - - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/pause.icon.svg b/packages/components/icons/pause.icon.svg deleted file mode 100644 index 4054e18..0000000 --- a/packages/components/icons/pause.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - pause - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/percentage.icon.svg b/packages/components/icons/percentage.icon.svg deleted file mode 100644 index 32a0290..0000000 --- a/packages/components/icons/percentage.icon.svg +++ /dev/null @@ -1,6 +0,0 @@ - - percentage - - diff --git a/packages/components/icons/permissions.icon.svg b/packages/components/icons/permissions.icon.svg deleted file mode 100644 index 5a4c53d..0000000 --- a/packages/components/icons/permissions.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - permissions - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/person.icon.svg b/packages/components/icons/person.icon.svg deleted file mode 100644 index 74f005b..0000000 --- a/packages/components/icons/person.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - self - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/photo-upload.icon.svg b/packages/components/icons/photo-upload.icon.svg deleted file mode 100644 index e571232..0000000 --- a/packages/components/icons/photo-upload.icon.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/components/icons/power.icon.svg b/packages/components/icons/power.icon.svg deleted file mode 100644 index eef7ae0..0000000 --- a/packages/components/icons/power.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - power - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/print-white.icon.svg b/packages/components/icons/print-white.icon.svg deleted file mode 100644 index 1a11bdf..0000000 --- a/packages/components/icons/print-white.icon.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - print-white - Created with Sketch. - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/print.icon.svg b/packages/components/icons/print.icon.svg deleted file mode 100644 index f228c24..0000000 --- a/packages/components/icons/print.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - print - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/process-manager.icon.svg b/packages/components/icons/process-manager.icon.svg deleted file mode 100644 index d97b971..0000000 --- a/packages/components/icons/process-manager.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - process-manager - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/promotion-white.icon.svg b/packages/components/icons/promotion-white.icon.svg deleted file mode 100644 index 55a8ca4..0000000 --- a/packages/components/icons/promotion-white.icon.svg +++ /dev/null @@ -1,18 +0,0 @@ - - - - promotion-white - Created with Sketch. - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/promotion.icon.svg b/packages/components/icons/promotion.icon.svg deleted file mode 100644 index f77f9b1..0000000 --- a/packages/components/icons/promotion.icon.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - promotion - Created with Sketch. - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/question-white.icon.svg b/packages/components/icons/question-white.icon.svg deleted file mode 100644 index df0d0dc..0000000 --- a/packages/components/icons/question-white.icon.svg +++ /dev/null @@ -1,19 +0,0 @@ - - - - question-white - Created with Sketch. - - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/question.icon.svg b/packages/components/icons/question.icon.svg deleted file mode 100644 index 326b40a..0000000 --- a/packages/components/icons/question.icon.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - question - Created with Sketch. - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/questions.icon.svg b/packages/components/icons/questions.icon.svg deleted file mode 100644 index f9116c0..0000000 --- a/packages/components/icons/questions.icon.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - 2. Style/Icons/Navigational/Engagement/questions - Created with Sketch. - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/redo.icon.svg b/packages/components/icons/redo.icon.svg deleted file mode 100644 index 679eec4..0000000 --- a/packages/components/icons/redo.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - redo - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/refresh.icon.svg b/packages/components/icons/refresh.icon.svg deleted file mode 100644 index 8e0447d..0000000 --- a/packages/components/icons/refresh.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - refresh - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/remove-link.icon.svg b/packages/components/icons/remove-link.icon.svg deleted file mode 100644 index d15bdb8..0000000 --- a/packages/components/icons/remove-link.icon.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/components/icons/repeats.icon.svg b/packages/components/icons/repeats.icon.svg deleted file mode 100644 index e4d6533..0000000 --- a/packages/components/icons/repeats.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - repeats - Created with Sketch. - - - - - - - - - - - - diff --git a/packages/components/icons/report-sharing.icon.svg b/packages/components/icons/report-sharing.icon.svg deleted file mode 100644 index eec5942..0000000 --- a/packages/components/icons/report-sharing.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - Atoms/Icons/Actions/report-sharing-2 - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/report.icon.svg b/packages/components/icons/report.icon.svg deleted file mode 100644 index c08a880..0000000 --- a/packages/components/icons/report.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - report - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/restore.icon.svg b/packages/components/icons/restore.icon.svg deleted file mode 100644 index bb86d96..0000000 --- a/packages/components/icons/restore.icon.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - restore - Created with Sketch. - - - - - - \ No newline at end of file diff --git a/packages/components/icons/save.icon.svg b/packages/components/icons/save.icon.svg deleted file mode 100644 index f96cef4..0000000 --- a/packages/components/icons/save.icon.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - 2. Style/Icons/Zugata/save - Created with Sketch. - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/search-white.icon.svg b/packages/components/icons/search-white.icon.svg deleted file mode 100644 index c6d60e8..0000000 --- a/packages/components/icons/search-white.icon.svg +++ /dev/null @@ -1,18 +0,0 @@ - - - - search-white - Created with Sketch. - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/search.icon.svg b/packages/components/icons/search.icon.svg deleted file mode 100644 index 772cf6b..0000000 --- a/packages/components/icons/search.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - search - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/security-tip.icon.svg b/packages/components/icons/security-tip.icon.svg deleted file mode 100644 index 3fd3fdf..0000000 --- a/packages/components/icons/security-tip.icon.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/components/icons/send-rtl.icon.svg b/packages/components/icons/send-rtl.icon.svg deleted file mode 100644 index 341880b..0000000 --- a/packages/components/icons/send-rtl.icon.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - 2. Style/Icons/Actions/send Copy - Created with Sketch. - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/send.icon.svg b/packages/components/icons/send.icon.svg deleted file mode 100644 index da2995b..0000000 --- a/packages/components/icons/send.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - send - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/settings-white.icon.svg b/packages/components/icons/settings-white.icon.svg deleted file mode 100644 index 5fede9b..0000000 --- a/packages/components/icons/settings-white.icon.svg +++ /dev/null @@ -1,18 +0,0 @@ - - - - settings-white - Created with Sketch. - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/settings.icon.svg b/packages/components/icons/settings.icon.svg deleted file mode 100644 index beff219..0000000 --- a/packages/components/icons/settings.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - settings - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/share.icon.svg b/packages/components/icons/share.icon.svg deleted file mode 100644 index 0aa1c63..0000000 --- a/packages/components/icons/share.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - share - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/skip-white.icon.svg b/packages/components/icons/skip-white.icon.svg deleted file mode 100644 index b8b1a6f..0000000 --- a/packages/components/icons/skip-white.icon.svg +++ /dev/null @@ -1,19 +0,0 @@ - - - - skip-white - Created with Sketch. - - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/skip.icon.svg b/packages/components/icons/skip.icon.svg deleted file mode 100644 index f77838f..0000000 --- a/packages/components/icons/skip.icon.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - skip - Created with Sketch. - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/sort-ascending.icon.svg b/packages/components/icons/sort-ascending.icon.svg deleted file mode 100644 index 0e34b2e..0000000 --- a/packages/components/icons/sort-ascending.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - Icons/Directional/sort-ascending - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/sort-descending.icon.svg b/packages/components/icons/sort-descending.icon.svg deleted file mode 100644 index 7c0b4ee..0000000 --- a/packages/components/icons/sort-descending.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - Icons/Directional/sort-descending - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/spinner.icon.svg b/packages/components/icons/spinner.icon.svg deleted file mode 100644 index d63d182..0000000 --- a/packages/components/icons/spinner.icon.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/packages/components/icons/star-off.icon.svg b/packages/components/icons/star-off.icon.svg deleted file mode 100644 index 1e8fb6f..0000000 --- a/packages/components/icons/star-off.icon.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - 2. Style/Icons/Zugata/star-off - Created with Sketch. - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/star-on.icon.svg b/packages/components/icons/star-on.icon.svg deleted file mode 100644 index aa3e33f..0000000 --- a/packages/components/icons/star-on.icon.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - 2. Style/Icons/Zugata/star-on - Created with Sketch. - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/start.icon.svg b/packages/components/icons/start.icon.svg deleted file mode 100644 index 8909be3..0000000 --- a/packages/components/icons/start.icon.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/components/icons/subtract-white.icon.svg b/packages/components/icons/subtract-white.icon.svg deleted file mode 100644 index f748371..0000000 --- a/packages/components/icons/subtract-white.icon.svg +++ /dev/null @@ -1,18 +0,0 @@ - - - - subtract-white - Created with Sketch. - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/subtract.icon.svg b/packages/components/icons/subtract.icon.svg deleted file mode 100644 index a86eaf9..0000000 --- a/packages/components/icons/subtract.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - subtract - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/success-white.icon.svg b/packages/components/icons/success-white.icon.svg deleted file mode 100644 index ba0179c..0000000 --- a/packages/components/icons/success-white.icon.svg +++ /dev/null @@ -1,18 +0,0 @@ - - - - success-white - Created with Sketch. - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/success.icon.svg b/packages/components/icons/success.icon.svg deleted file mode 100644 index 3838670..0000000 --- a/packages/components/icons/success.icon.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - diff --git a/packages/components/icons/support.icon.svg b/packages/components/icons/support.icon.svg deleted file mode 100644 index 1b5a522..0000000 --- a/packages/components/icons/support.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - 2. Atoms/Icons/Navigational/Global/support - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/surveys-white.icon.svg b/packages/components/icons/surveys-white.icon.svg deleted file mode 100644 index 4d79d44..0000000 --- a/packages/components/icons/surveys-white.icon.svg +++ /dev/null @@ -1,20 +0,0 @@ - - - - surveys-white - Created with Sketch. - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/surveys.icon.svg b/packages/components/icons/surveys.icon.svg deleted file mode 100644 index c95f52b..0000000 --- a/packages/components/icons/surveys.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - surveys - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/sync.icon.svg b/packages/components/icons/sync.icon.svg deleted file mode 100644 index 874f63c..0000000 --- a/packages/components/icons/sync.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - sync - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/tag.icon.svg b/packages/components/icons/tag.icon.svg deleted file mode 100644 index d60bb87..0000000 --- a/packages/components/icons/tag.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - tag - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/tasks-white.icon.svg b/packages/components/icons/tasks-white.icon.svg deleted file mode 100644 index 6bc346f..0000000 --- a/packages/components/icons/tasks-white.icon.svg +++ /dev/null @@ -1,18 +0,0 @@ - - - - tasks - Created with Sketch. - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/tasks.icon.svg b/packages/components/icons/tasks.icon.svg deleted file mode 100644 index 9a39afd..0000000 --- a/packages/components/icons/tasks.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - tasks - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/template-white.icon.svg b/packages/components/icons/template-white.icon.svg deleted file mode 100644 index 8498ca2..0000000 --- a/packages/components/icons/template-white.icon.svg +++ /dev/null @@ -1,20 +0,0 @@ - - - - template-white - Created with Sketch. - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/template.icon.svg b/packages/components/icons/template.icon.svg deleted file mode 100644 index 44ed936..0000000 --- a/packages/components/icons/template.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - template - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/text-analytics-white.icon.svg b/packages/components/icons/text-analytics-white.icon.svg deleted file mode 100644 index e33c990..0000000 --- a/packages/components/icons/text-analytics-white.icon.svg +++ /dev/null @@ -1,22 +0,0 @@ - - - - icon/text_analytics_beta-white - Created with Sketch. - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/text-analytics.icon.svg b/packages/components/icons/text-analytics.icon.svg deleted file mode 100644 index 93b91b5..0000000 --- a/packages/components/icons/text-analytics.icon.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - icon/text_analytics_beta - Created with Sketch. - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/thumbs-down.icon.svg b/packages/components/icons/thumbs-down.icon.svg deleted file mode 100644 index 88d8ace..0000000 --- a/packages/components/icons/thumbs-down.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - dislike - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/thumbs-up.icon.svg b/packages/components/icons/thumbs-up.icon.svg deleted file mode 100644 index c1fa61d..0000000 --- a/packages/components/icons/thumbs-up.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - like - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/time-white.icon.svg b/packages/components/icons/time-white.icon.svg deleted file mode 100644 index 91baa04..0000000 --- a/packages/components/icons/time-white.icon.svg +++ /dev/null @@ -1,18 +0,0 @@ - - - - time-white - Created with Sketch. - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/time.icon.svg b/packages/components/icons/time.icon.svg deleted file mode 100644 index dbdcacd..0000000 --- a/packages/components/icons/time.icon.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - time - Created with Sketch. - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/translation.icon.svg b/packages/components/icons/translation.icon.svg deleted file mode 100644 index ad1aae6..0000000 --- a/packages/components/icons/translation.icon.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - 2. Style/Icons/Informational/translation - Created with Sketch. - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/trash.icon.svg b/packages/components/icons/trash.icon.svg deleted file mode 100644 index 24c006e..0000000 --- a/packages/components/icons/trash.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - trash - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/unattributed-white.icon.svg b/packages/components/icons/unattributed-white.icon.svg deleted file mode 100644 index ea511f4..0000000 --- a/packages/components/icons/unattributed-white.icon.svg +++ /dev/null @@ -1,21 +0,0 @@ - - - - unattributed-white - Created with Sketch. - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/unattributed.icon.svg b/packages/components/icons/unattributed.icon.svg deleted file mode 100644 index 3b01268..0000000 --- a/packages/components/icons/unattributed.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - unattributed - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/underline.icon.svg b/packages/components/icons/underline.icon.svg deleted file mode 100644 index 4c44d69..0000000 --- a/packages/components/icons/underline.icon.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/components/icons/undo.icon.svg b/packages/components/icons/undo.icon.svg deleted file mode 100644 index a2c444b..0000000 --- a/packages/components/icons/undo.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - Icons/Actions/undo - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/user-add.icon.svg b/packages/components/icons/user-add.icon.svg deleted file mode 100644 index 46b5b6f..0000000 --- a/packages/components/icons/user-add.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - user-add - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/user-delete.icon.svg b/packages/components/icons/user-delete.icon.svg deleted file mode 100644 index e8061b2..0000000 --- a/packages/components/icons/user-delete.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - user-deleted - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/user-exit.icon.svg b/packages/components/icons/user-exit.icon.svg deleted file mode 100644 index 8f7946c..0000000 --- a/packages/components/icons/user-exit.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - user-exit - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/user-select.icon.svg b/packages/components/icons/user-select.icon.svg deleted file mode 100644 index 4f84964..0000000 --- a/packages/components/icons/user-select.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - user-selected - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/user-settings.icon.svg b/packages/components/icons/user-settings.icon.svg deleted file mode 100644 index 8644e8f..0000000 --- a/packages/components/icons/user-settings.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - user-settings - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/user-update.icon.svg b/packages/components/icons/user-update.icon.svg deleted file mode 100644 index b323a2d..0000000 --- a/packages/components/icons/user-update.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - user-updated - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/user.icon.svg b/packages/components/icons/user.icon.svg deleted file mode 100644 index df64755..0000000 --- a/packages/components/icons/user.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - user - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/users.icon.svg b/packages/components/icons/users.icon.svg deleted file mode 100644 index 961a721..0000000 --- a/packages/components/icons/users.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - users - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/visible.icon.svg b/packages/components/icons/visible.icon.svg deleted file mode 100644 index 6c683ca..0000000 --- a/packages/components/icons/visible.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - Icons/Views/visible - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/writing.icon.svg b/packages/components/icons/writing.icon.svg deleted file mode 100644 index 3176983..0000000 --- a/packages/components/icons/writing.icon.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - writing - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/icons/zoom-in.icon.svg b/packages/components/icons/zoom-in.icon.svg deleted file mode 100644 index 9a6e842..0000000 --- a/packages/components/icons/zoom-in.icon.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/components/icons/zoom-out.icon.svg b/packages/components/icons/zoom-out.icon.svg deleted file mode 100644 index 246e150..0000000 --- a/packages/components/icons/zoom-out.icon.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/components/jest.config.ts b/packages/components/jest.config.ts deleted file mode 100644 index 20de3a4..0000000 --- a/packages/components/jest.config.ts +++ /dev/null @@ -1,44 +0,0 @@ -/* eslint-disable no-console */ -import { JestConfigWithTsJest } from "ts-jest" -// @ts-ignore -import sharedConfig from "../../jest.config.js" - -const jestConfig: JestConfigWithTsJest = { - ...sharedConfig, - roots: [""], - modulePathIgnorePatterns: [], - moduleNameMapper: { - ...sharedConfig.moduleNameMapper, - "~types/(.*)$": "/src/types/$1", - "~utils/(.*)$": "/src/utils/$1", - "~components/(.*)$": "/src/$1", - "~icons/(.*)$": "/src/SVG/icons/$1", - "^__@cultureamp/i18n-react-intl/locales/(.*)": "/locales/$1", - }, -} - -export default jestConfig - -process.env.TZ = "UTC" - -if (process.env.USE_REACT_16 === "true") { - console.log("=== React 16 tests ===") - module.exports.cacheDirectory = ".cache/jest-cache-react-16" - module.exports.moduleNameMapper = { - ...module.exports.moduleNameMapper, - "^react-dom((\\/.*)?)$": "react-dom-16$1", - "^react((\\/.*)?)$": "react-16$1", - "^@testing-library/react((\\/.*)?)$": "@testing-library/react-12$1", - "^react-test-renderer((\\/.*)?)$": "react-test-renderer-17$1", - } -} else if (process.env.USE_REACT_17 === "true") { - console.log("=== React 17 tests ===") - module.exports.cacheDirectory = ".cache/jest-cache-react-17" - module.exports.moduleNameMapper = { - ...module.exports.moduleNameMapper, - "^react-dom((\\/.*)?)$": "react-dom-17$1", - "^react((\\/.*)?)$": "react-17$1", - "^@testing-library/react((\\/.*)?)$": "@testing-library/react-12$1", - "^react-test-renderer((\\/.*)?)$": "react-test-renderer-17$1", - } -} diff --git a/packages/components/locales/ar.json b/packages/components/locales/ar.json deleted file mode 100644 index 85cdc6e..0000000 --- a/packages/components/locales/ar.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "smartling" : { - "string_format" : "icu", - "translate_paths" : [ - { - "instruction" : "*/description", - "key" : "{*}/message", - "path" : "*/message" - }], - "variants_enabled" : true - }, - "filterDateRangePicker.dateFrom" : { - "description" : "Label for the 'Date from' date range input field", - "message" : "اŲ„ØĒØ§ØąŲŠØŽ Ų…Ų†" - }, - "filterDateRangePicker.dateTo" : { - "description" : "Label for the 'Date to' date range input field", - "message" : "اŲ„ØĒØ§ØąŲŠØŽ ØĨŲ„Ų‰" - }, - "filterDateRangePicker.inputFormat" : { - "description" : "Label for the 'Input format' subtext", - "message" : "ØĒŲ†ØŗŲŠŲ‚ اŲ„ØĨد؎اŲ„" - } -} diff --git a/packages/components/locales/bg.json b/packages/components/locales/bg.json deleted file mode 100644 index 710e317..0000000 --- a/packages/components/locales/bg.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "smartling" : { - "string_format" : "icu", - "translate_paths" : [ - { - "instruction" : "*/description", - "key" : "{*}/message", - "path" : "*/message" - }], - "variants_enabled" : true - }, - "filterDateRangePicker.dateFrom" : { - "description" : "Label for the 'Date from' date range input field", - "message" : "ОŅ‚ Đ´Đ°Ņ‚Đ°" - }, - "filterDateRangePicker.dateTo" : { - "description" : "Label for the 'Date to' date range input field", - "message" : "До Đ´Đ°Ņ‚Đ°" - }, - "filterDateRangePicker.inputFormat" : { - "description" : "Label for the 'Input format' subtext", - "message" : "ФОŅ€ĐŧĐ°Ņ‚ ĐŊĐ° вŅŠĐ˛ĐĩĐļĐ´Đ°ĐŊĐĩ" - } -} diff --git a/packages/components/locales/cs.json b/packages/components/locales/cs.json deleted file mode 100644 index dcb9e52..0000000 --- a/packages/components/locales/cs.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "smartling" : { - "string_format" : "icu", - "translate_paths" : [ - { - "instruction" : "*/description", - "key" : "{*}/message", - "path" : "*/message" - }], - "variants_enabled" : true - }, - "filterDateRangePicker.dateFrom" : { - "description" : "Label for the 'Date from' date range input field", - "message" : "Datum od" - }, - "filterDateRangePicker.dateTo" : { - "description" : "Label for the 'Date to' date range input field", - "message" : "Datum do" - }, - "filterDateRangePicker.inputFormat" : { - "description" : "Label for the 'Input format' subtext", - "message" : "FormÃĄt zadÃĄní" - } -} diff --git a/packages/components/locales/cy.json b/packages/components/locales/cy.json deleted file mode 100644 index 37730d4..0000000 --- a/packages/components/locales/cy.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "smartling" : { - "string_format" : "icu", - "translate_paths" : [ - { - "instruction" : "*/description", - "key" : "{*}/message", - "path" : "*/message" - }], - "variants_enabled" : true - }, - "filterDateRangePicker.dateFrom" : { - "description" : "Label for the 'Date from' date range input field", - "message" : "Dyddiad o" - }, - "filterDateRangePicker.dateTo" : { - "description" : "Label for the 'Date to' date range input field", - "message" : "Dyddiad i" - }, - "filterDateRangePicker.inputFormat" : { - "description" : "Label for the 'Input format' subtext", - "message" : "Fformat y mewnbwn" - } -} diff --git a/packages/components/locales/da.json b/packages/components/locales/da.json deleted file mode 100644 index fd70d5d..0000000 --- a/packages/components/locales/da.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "smartling" : { - "string_format" : "icu", - "translate_paths" : [ - { - "instruction" : "*/description", - "key" : "{*}/message", - "path" : "*/message" - }], - "variants_enabled" : true - }, - "filterDateRangePicker.dateFrom" : { - "description" : "Label for the 'Date from' date range input field", - "message" : "Fra dato" - }, - "filterDateRangePicker.dateTo" : { - "description" : "Label for the 'Date to' date range input field", - "message" : "Til dato" - }, - "filterDateRangePicker.inputFormat" : { - "description" : "Label for the 'Input format' subtext", - "message" : "Input-format" - } -} diff --git a/packages/components/locales/de.json b/packages/components/locales/de.json deleted file mode 100644 index 24e8adc..0000000 --- a/packages/components/locales/de.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "smartling" : { - "string_format" : "icu", - "translate_paths" : [ - { - "instruction" : "*/description", - "key" : "{*}/message", - "path" : "*/message" - }], - "variants_enabled" : true - }, - "filterDateRangePicker.dateFrom" : { - "description" : "Label for the 'Date from' date range input field", - "message" : "Datum von" - }, - "filterDateRangePicker.dateTo" : { - "description" : "Label for the 'Date to' date range input field", - "message" : "Datum bis" - }, - "filterDateRangePicker.inputFormat" : { - "description" : "Label for the 'Input format' subtext", - "message" : "Eingabeformat" - } -} diff --git a/packages/components/locales/el.json b/packages/components/locales/el.json deleted file mode 100644 index 6882554..0000000 --- a/packages/components/locales/el.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "smartling" : { - "string_format" : "icu", - "translate_paths" : [ - { - "instruction" : "*/description", - "key" : "{*}/message", - "path" : "*/message" - }], - "variants_enabled" : true - }, - "filterDateRangePicker.dateFrom" : { - "description" : "Label for the 'Date from' date range input field", - "message" : "ΗÎŧÎĩĪÎŋÎŧΡÎŊÎ¯Îą ÎąĪ€ĪŒ" - }, - "filterDateRangePicker.dateTo" : { - "description" : "Label for the 'Date to' date range input field", - "message" : "ΗÎŧÎĩĪÎŋÎŧΡÎŊÎ¯Îą έĪ‰Ī‚" - }, - "filterDateRangePicker.inputFormat" : { - "description" : "Label for the 'Input format' subtext", - "message" : "ΜÎŋĪĪ†ÎŽ ÎĩΚĪƒÎąÎŗĪ‰ÎŗÎŽĪ‚" - } -} diff --git a/packages/components/locales/en-GB.json b/packages/components/locales/en-GB.json deleted file mode 100644 index 32c03cc..0000000 --- a/packages/components/locales/en-GB.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "smartling" : { - "string_format" : "icu", - "translate_paths" : [ - { - "instruction" : "*/description", - "key" : "{*}/message", - "path" : "*/message" - }], - "variants_enabled" : true - }, - "filterDateRangePicker.dateFrom" : { - "description" : "Label for the 'Date from' date range input field", - "message" : "Date from" - }, - "filterDateRangePicker.dateTo" : { - "description" : "Label for the 'Date to' date range input field", - "message" : "Date to" - }, - "filterDateRangePicker.inputFormat" : { - "description" : "Label for the 'Input format' subtext", - "message" : "Input format" - } -} diff --git a/packages/components/locales/en.json b/packages/components/locales/en.json deleted file mode 100644 index f0a9f5f..0000000 --- a/packages/components/locales/en.json +++ /dev/null @@ -1,25 +0,0 @@ -{ - "smartling": { - "string_format": "icu", - "translate_paths": [ - { - "instruction": "*/description", - "key": "{*}/message", - "path": "*/message" - } - ], - "variants_enabled": true - }, - "filterDateRangePicker.dateFrom": { - "description": "Label for the 'Date from' date range input field", - "message": "Date from" - }, - "filterDateRangePicker.dateTo": { - "description": "Label for the 'Date to' date range input field", - "message": "Date to" - }, - "filterDateRangePicker.inputFormat": { - "description": "Label for the 'Input format' subtext", - "message": "Input format" - } -} diff --git a/packages/components/locales/es-419.json b/packages/components/locales/es-419.json deleted file mode 100644 index 9d286d9..0000000 --- a/packages/components/locales/es-419.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "smartling" : { - "string_format" : "icu", - "translate_paths" : [ - { - "instruction" : "*/description", - "key" : "{*}/message", - "path" : "*/message" - }], - "variants_enabled" : true - }, - "filterDateRangePicker.dateFrom" : { - "description" : "Label for the 'Date from' date range input field", - "message" : "Fecha desde" - }, - "filterDateRangePicker.dateTo" : { - "description" : "Label for the 'Date to' date range input field", - "message" : "Fecha hasta" - }, - "filterDateRangePicker.inputFormat" : { - "description" : "Label for the 'Input format' subtext", - "message" : "Formato de entrada" - } -} diff --git a/packages/components/locales/es.json b/packages/components/locales/es.json deleted file mode 100644 index 85fd65c..0000000 --- a/packages/components/locales/es.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "smartling" : { - "string_format" : "icu", - "translate_paths" : [ - { - "instruction" : "*/description", - "key" : "{*}/message", - "path" : "*/message" - }], - "variants_enabled" : true - }, - "filterDateRangePicker.dateFrom" : { - "description" : "Label for the 'Date from' date range input field", - "message" : "Fecha inicial" - }, - "filterDateRangePicker.dateTo" : { - "description" : "Label for the 'Date to' date range input field", - "message" : "Fecha final" - }, - "filterDateRangePicker.inputFormat" : { - "description" : "Label for the 'Input format' subtext", - "message" : "Formato de entrada" - } -} diff --git a/packages/components/locales/et.json b/packages/components/locales/et.json deleted file mode 100644 index 8dd3743..0000000 --- a/packages/components/locales/et.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "smartling" : { - "string_format" : "icu", - "translate_paths" : [ - { - "instruction" : "*/description", - "key" : "{*}/message", - "path" : "*/message" - }], - "variants_enabled" : true - }, - "filterDateRangePicker.dateFrom" : { - "description" : "Label for the 'Date from' date range input field", - "message" : "Kuupäev alates" - }, - "filterDateRangePicker.dateTo" : { - "description" : "Label for the 'Date to' date range input field", - "message" : "Kuupäev kuni" - }, - "filterDateRangePicker.inputFormat" : { - "description" : "Label for the 'Input format' subtext", - "message" : "Sisendvorming" - } -} diff --git a/packages/components/locales/fi.json b/packages/components/locales/fi.json deleted file mode 100644 index c254cbe..0000000 --- a/packages/components/locales/fi.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "smartling" : { - "string_format" : "icu", - "translate_paths" : [ - { - "instruction" : "*/description", - "key" : "{*}/message", - "path" : "*/message" - }], - "variants_enabled" : true - }, - "filterDateRangePicker.dateFrom" : { - "description" : "Label for the 'Date from' date range input field", - "message" : "Alkamispäivä" - }, - "filterDateRangePicker.dateTo" : { - "description" : "Label for the 'Date to' date range input field", - "message" : "Päättymispäivä" - }, - "filterDateRangePicker.inputFormat" : { - "description" : "Label for the 'Input format' subtext", - "message" : "SyÃļttÃļmuoto" - } -} diff --git a/packages/components/locales/fr-CA.json b/packages/components/locales/fr-CA.json deleted file mode 100644 index 100e1f4..0000000 --- a/packages/components/locales/fr-CA.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "smartling" : { - "string_format" : "icu", - "translate_paths" : [ - { - "instruction" : "*/description", - "key" : "{*}/message", - "path" : "*/message" - }], - "variants_enabled" : true - }, - "filterDateRangePicker.dateFrom" : { - "description" : "Label for the 'Date from' date range input field", - "message" : "Date de dÊbut" - }, - "filterDateRangePicker.dateTo" : { - "description" : "Label for the 'Date to' date range input field", - "message" : "Date de fin" - }, - "filterDateRangePicker.inputFormat" : { - "description" : "Label for the 'Input format' subtext", - "message" : "Format de saisie" - } -} diff --git a/packages/components/locales/fr.json b/packages/components/locales/fr.json deleted file mode 100644 index 100e1f4..0000000 --- a/packages/components/locales/fr.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "smartling" : { - "string_format" : "icu", - "translate_paths" : [ - { - "instruction" : "*/description", - "key" : "{*}/message", - "path" : "*/message" - }], - "variants_enabled" : true - }, - "filterDateRangePicker.dateFrom" : { - "description" : "Label for the 'Date from' date range input field", - "message" : "Date de dÊbut" - }, - "filterDateRangePicker.dateTo" : { - "description" : "Label for the 'Date to' date range input field", - "message" : "Date de fin" - }, - "filterDateRangePicker.inputFormat" : { - "description" : "Label for the 'Input format' subtext", - "message" : "Format de saisie" - } -} diff --git a/packages/components/locales/he.json b/packages/components/locales/he.json deleted file mode 100644 index bd06fc9..0000000 --- a/packages/components/locales/he.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "smartling" : { - "string_format" : "icu", - "translate_paths" : [ - { - "instruction" : "*/description", - "key" : "{*}/message", - "path" : "*/message" - }], - "variants_enabled" : true - }, - "filterDateRangePicker.dateFrom" : { - "description" : "Label for the 'Date from' date range input field", - "message" : "החל מ-" - }, - "filterDateRangePicker.dateTo" : { - "description" : "Label for the 'Date to' date range input field", - "message" : "×ĸד" - }, - "filterDateRangePicker.inputFormat" : { - "description" : "Label for the 'Input format' subtext", - "message" : "×Ēבני×Ē לקלט" - } -} diff --git a/packages/components/locales/hi.json b/packages/components/locales/hi.json deleted file mode 100644 index a66a88f..0000000 --- a/packages/components/locales/hi.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "smartling" : { - "string_format" : "icu", - "translate_paths" : [ - { - "instruction" : "*/description", - "key" : "{*}/message", - "path" : "*/message" - }], - "variants_enabled" : true - }, - "filterDateRangePicker.dateFrom" : { - "description" : "Label for the 'Date from' date range input field", - "message" : "ā¤¤ā¤žā¤°āĨ€ā¤– ā¤¸āĨ‡" - }, - "filterDateRangePicker.dateTo" : { - "description" : "Label for the 'Date to' date range input field", - "message" : "ā¤¤ā¤žā¤°āĨ€ā¤– ā¤¤ā¤•" - }, - "filterDateRangePicker.inputFormat" : { - "description" : "Label for the 'Input format' subtext", - "message" : "ā¤‡ā¤¨ā¤ĒāĨā¤Ÿ ā¤ĒāĨā¤°ā¤žā¤°āĨ‚ā¤Ē" - } -} diff --git a/packages/components/locales/ht.json b/packages/components/locales/ht.json deleted file mode 100644 index b8320c2..0000000 --- a/packages/components/locales/ht.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "smartling" : { - "string_format" : "icu", - "translate_paths" : [ - { - "instruction" : "*/description", - "key" : "{*}/message", - "path" : "*/message" - }], - "variants_enabled" : true - }, - "filterDateRangePicker.dateFrom" : { - "description" : "Label for the 'Date from' date range input field", - "message" : "Soti nan dat" - }, - "filterDateRangePicker.dateTo" : { - "description" : "Label for the 'Date to' date range input field", - "message" : "Rive nan dat" - }, - "filterDateRangePicker.inputFormat" : { - "description" : "Label for the 'Input format' subtext", - "message" : "FÃ˛ma done" - } -} diff --git a/packages/components/locales/hu.json b/packages/components/locales/hu.json deleted file mode 100644 index ee1677b..0000000 --- a/packages/components/locales/hu.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "smartling" : { - "string_format" : "icu", - "translate_paths" : [ - { - "instruction" : "*/description", - "key" : "{*}/message", - "path" : "*/message" - }], - "variants_enabled" : true - }, - "filterDateRangePicker.dateFrom" : { - "description" : "Label for the 'Date from' date range input field", - "message" : "DÃĄtum ettől:" - }, - "filterDateRangePicker.dateTo" : { - "description" : "Label for the 'Date to' date range input field", - "message" : "DÃĄtum eddig:" - }, - "filterDateRangePicker.inputFormat" : { - "description" : "Label for the 'Input format' subtext", - "message" : "Beviteli formÃĄtum" - } -} diff --git a/packages/components/locales/id.json b/packages/components/locales/id.json deleted file mode 100644 index 5a46f3f..0000000 --- a/packages/components/locales/id.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "smartling" : { - "string_format" : "icu", - "translate_paths" : [ - { - "instruction" : "*/description", - "key" : "{*}/message", - "path" : "*/message" - }], - "variants_enabled" : true - }, - "filterDateRangePicker.dateFrom" : { - "description" : "Label for the 'Date from' date range input field", - "message" : "Tanggal dari" - }, - "filterDateRangePicker.dateTo" : { - "description" : "Label for the 'Date to' date range input field", - "message" : "Tanggal sampai" - }, - "filterDateRangePicker.inputFormat" : { - "description" : "Label for the 'Input format' subtext", - "message" : "Format masukan" - } -} diff --git a/packages/components/locales/it.json b/packages/components/locales/it.json deleted file mode 100644 index cf5a9ea..0000000 --- a/packages/components/locales/it.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "smartling" : { - "string_format" : "icu", - "translate_paths" : [ - { - "instruction" : "*/description", - "key" : "{*}/message", - "path" : "*/message" - }], - "variants_enabled" : true - }, - "filterDateRangePicker.dateFrom" : { - "description" : "Label for the 'Date from' date range input field", - "message" : "Data di inizio" - }, - "filterDateRangePicker.dateTo" : { - "description" : "Label for the 'Date to' date range input field", - "message" : "Data di fine" - }, - "filterDateRangePicker.inputFormat" : { - "description" : "Label for the 'Input format' subtext", - "message" : "Formato di input" - } -} diff --git a/packages/components/locales/ja.json b/packages/components/locales/ja.json deleted file mode 100644 index 855c2c9..0000000 --- a/packages/components/locales/ja.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "smartling" : { - "string_format" : "icu", - "translate_paths" : [ - { - "instruction" : "*/description", - "key" : "{*}/message", - "path" : "*/message" - }], - "variants_enabled" : true - }, - "filterDateRangePicker.dateFrom" : { - "description" : "Label for the 'Date from' date range input field", - "message" : "開始æ—Ĩ" - }, - "filterDateRangePicker.dateTo" : { - "description" : "Label for the 'Date to' date range input field", - "message" : "įĩ‚äē†æ—Ĩ" - }, - "filterDateRangePicker.inputFormat" : { - "description" : "Label for the 'Input format' subtext", - "message" : "å…Ĩ力åŊĸåŧ" - } -} diff --git a/packages/components/locales/km-KH.json b/packages/components/locales/km-KH.json deleted file mode 100644 index 8384ab5..0000000 --- a/packages/components/locales/km-KH.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "smartling" : { - "string_format" : "icu", - "translate_paths" : [ - { - "instruction" : "*/description", - "key" : "{*}/message", - "path" : "*/message" - }], - "variants_enabled" : true - }, - "filterDateRangePicker.dateFrom" : { - "description" : "Label for the 'Date from' date range input field", - "message" : "កážļលបរិច្ឆេទពី" - }, - "filterDateRangePicker.dateTo" : { - "description" : "Label for the 'Date to' date range input field", - "message" : "កážļលបរិច្ឆេទទៅ" - }, - "filterDateRangePicker.inputFormat" : { - "description" : "Label for the 'Input format' subtext", - "message" : "ទ្រង់ទ្រážļយបញ្ចážŧល" - } -} diff --git a/packages/components/locales/ko.json b/packages/components/locales/ko.json deleted file mode 100644 index 70e94ad..0000000 --- a/packages/components/locales/ko.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "smartling" : { - "string_format" : "icu", - "translate_paths" : [ - { - "instruction" : "*/description", - "key" : "{*}/message", - "path" : "*/message" - }], - "variants_enabled" : true - }, - "filterDateRangePicker.dateFrom" : { - "description" : "Label for the 'Date from' date range input field", - "message" : "ė‹œėž‘ 날ė§œ" - }, - "filterDateRangePicker.dateTo" : { - "description" : "Label for the 'Date to' date range input field", - "message" : "ėĸ…ëŖŒ 날ė§œ" - }, - "filterDateRangePicker.inputFormat" : { - "description" : "Label for the 'Input format' subtext", - "message" : "ėž…ë Ĩ 형ė‹" - } -} diff --git a/packages/components/locales/lt.json b/packages/components/locales/lt.json deleted file mode 100644 index 3d73d37..0000000 --- a/packages/components/locales/lt.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "smartling" : { - "string_format" : "icu", - "translate_paths" : [ - { - "instruction" : "*/description", - "key" : "{*}/message", - "path" : "*/message" - }], - "variants_enabled" : true - }, - "filterDateRangePicker.dateFrom" : { - "description" : "Label for the 'Date from' date range input field", - "message" : "Data nuo" - }, - "filterDateRangePicker.dateTo" : { - "description" : "Label for the 'Date to' date range input field", - "message" : "Data iki" - }, - "filterDateRangePicker.inputFormat" : { - "description" : "Label for the 'Input format' subtext", - "message" : "ÄŽvesties formatas" - } -} diff --git a/packages/components/locales/lv.json b/packages/components/locales/lv.json deleted file mode 100644 index d7f5329..0000000 --- a/packages/components/locales/lv.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "smartling" : { - "string_format" : "icu", - "translate_paths" : [ - { - "instruction" : "*/description", - "key" : "{*}/message", - "path" : "*/message" - }], - "variants_enabled" : true - }, - "filterDateRangePicker.dateFrom" : { - "description" : "Label for the 'Date from' date range input field", - "message" : "Datums no" - }, - "filterDateRangePicker.dateTo" : { - "description" : "Label for the 'Date to' date range input field", - "message" : "Datums lÄĢdz" - }, - "filterDateRangePicker.inputFormat" : { - "description" : "Label for the 'Input format' subtext", - "message" : "Ievades formāts" - } -} diff --git a/packages/components/locales/mi.json b/packages/components/locales/mi.json deleted file mode 100644 index 32c03cc..0000000 --- a/packages/components/locales/mi.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "smartling" : { - "string_format" : "icu", - "translate_paths" : [ - { - "instruction" : "*/description", - "key" : "{*}/message", - "path" : "*/message" - }], - "variants_enabled" : true - }, - "filterDateRangePicker.dateFrom" : { - "description" : "Label for the 'Date from' date range input field", - "message" : "Date from" - }, - "filterDateRangePicker.dateTo" : { - "description" : "Label for the 'Date to' date range input field", - "message" : "Date to" - }, - "filterDateRangePicker.inputFormat" : { - "description" : "Label for the 'Input format' subtext", - "message" : "Input format" - } -} diff --git a/packages/components/locales/ms.json b/packages/components/locales/ms.json deleted file mode 100644 index caa0829..0000000 --- a/packages/components/locales/ms.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "smartling" : { - "string_format" : "icu", - "translate_paths" : [ - { - "instruction" : "*/description", - "key" : "{*}/message", - "path" : "*/message" - }], - "variants_enabled" : true - }, - "filterDateRangePicker.dateFrom" : { - "description" : "Label for the 'Date from' date range input field", - "message" : "Tarikh dari" - }, - "filterDateRangePicker.dateTo" : { - "description" : "Label for the 'Date to' date range input field", - "message" : "Tarikh hingga" - }, - "filterDateRangePicker.inputFormat" : { - "description" : "Label for the 'Input format' subtext", - "message" : "Format input" - } -} diff --git a/packages/components/locales/nb.json b/packages/components/locales/nb.json deleted file mode 100644 index b0bd858..0000000 --- a/packages/components/locales/nb.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "smartling" : { - "string_format" : "icu", - "translate_paths" : [ - { - "instruction" : "*/description", - "key" : "{*}/message", - "path" : "*/message" - }], - "variants_enabled" : true - }, - "filterDateRangePicker.dateFrom" : { - "description" : "Label for the 'Date from' date range input field", - "message" : "Dato fra" - }, - "filterDateRangePicker.dateTo" : { - "description" : "Label for the 'Date to' date range input field", - "message" : "Dato til" - }, - "filterDateRangePicker.inputFormat" : { - "description" : "Label for the 'Input format' subtext", - "message" : "Inndataformat" - } -} diff --git a/packages/components/locales/nl.json b/packages/components/locales/nl.json deleted file mode 100644 index 2554679..0000000 --- a/packages/components/locales/nl.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "smartling" : { - "string_format" : "icu", - "translate_paths" : [ - { - "instruction" : "*/description", - "key" : "{*}/message", - "path" : "*/message" - }], - "variants_enabled" : true - }, - "filterDateRangePicker.dateFrom" : { - "description" : "Label for the 'Date from' date range input field", - "message" : "Datum vanaf" - }, - "filterDateRangePicker.dateTo" : { - "description" : "Label for the 'Date to' date range input field", - "message" : "Datum tot" - }, - "filterDateRangePicker.inputFormat" : { - "description" : "Label for the 'Input format' subtext", - "message" : "Invoerformaat" - } -} diff --git a/packages/components/locales/pl.json b/packages/components/locales/pl.json deleted file mode 100644 index abceb1f..0000000 --- a/packages/components/locales/pl.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "smartling" : { - "string_format" : "icu", - "translate_paths" : [ - { - "instruction" : "*/description", - "key" : "{*}/message", - "path" : "*/message" - }], - "variants_enabled" : true - }, - "filterDateRangePicker.dateFrom" : { - "description" : "Label for the 'Date from' date range input field", - "message" : "Data rozpoczęcia" - }, - "filterDateRangePicker.dateTo" : { - "description" : "Label for the 'Date to' date range input field", - "message" : "Data zakończenia" - }, - "filterDateRangePicker.inputFormat" : { - "description" : "Label for the 'Input format' subtext", - "message" : "Format wejściowy" - } -} diff --git a/packages/components/locales/pt-BR.json b/packages/components/locales/pt-BR.json deleted file mode 100644 index 0202094..0000000 --- a/packages/components/locales/pt-BR.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "smartling" : { - "string_format" : "icu", - "translate_paths" : [ - { - "instruction" : "*/description", - "key" : "{*}/message", - "path" : "*/message" - }], - "variants_enabled" : true - }, - "filterDateRangePicker.dateFrom" : { - "description" : "Label for the 'Date from' date range input field", - "message" : "Data inicial" - }, - "filterDateRangePicker.dateTo" : { - "description" : "Label for the 'Date to' date range input field", - "message" : "Data final" - }, - "filterDateRangePicker.inputFormat" : { - "description" : "Label for the 'Input format' subtext", - "message" : "Formato de entrada" - } -} diff --git a/packages/components/locales/pt.json b/packages/components/locales/pt.json deleted file mode 100644 index 0202094..0000000 --- a/packages/components/locales/pt.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "smartling" : { - "string_format" : "icu", - "translate_paths" : [ - { - "instruction" : "*/description", - "key" : "{*}/message", - "path" : "*/message" - }], - "variants_enabled" : true - }, - "filterDateRangePicker.dateFrom" : { - "description" : "Label for the 'Date from' date range input field", - "message" : "Data inicial" - }, - "filterDateRangePicker.dateTo" : { - "description" : "Label for the 'Date to' date range input field", - "message" : "Data final" - }, - "filterDateRangePicker.inputFormat" : { - "description" : "Label for the 'Input format' subtext", - "message" : "Formato de entrada" - } -} diff --git a/packages/components/locales/ro.json b/packages/components/locales/ro.json deleted file mode 100644 index 22e0833..0000000 --- a/packages/components/locales/ro.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "smartling" : { - "string_format" : "icu", - "translate_paths" : [ - { - "instruction" : "*/description", - "key" : "{*}/message", - "path" : "*/message" - }], - "variants_enabled" : true - }, - "filterDateRangePicker.dateFrom" : { - "description" : "Label for the 'Date from' date range input field", - "message" : "Data de la" - }, - "filterDateRangePicker.dateTo" : { - "description" : "Label for the 'Date to' date range input field", - "message" : "Data pÃĸnă la" - }, - "filterDateRangePicker.inputFormat" : { - "description" : "Label for the 'Input format' subtext", - "message" : "Formatul de intrare" - } -} diff --git a/packages/components/locales/ru.json b/packages/components/locales/ru.json deleted file mode 100644 index be43deb..0000000 --- a/packages/components/locales/ru.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "smartling" : { - "string_format" : "icu", - "translate_paths" : [ - { - "instruction" : "*/description", - "key" : "{*}/message", - "path" : "*/message" - }], - "variants_enabled" : true - }, - "filterDateRangePicker.dateFrom" : { - "description" : "Label for the 'Date from' date range input field", - "message" : "ДаŅ‚Đ° Ņ" - }, - "filterDateRangePicker.dateTo" : { - "description" : "Label for the 'Date to' date range input field", - "message" : "ДаŅ‚Đ° ĐŋĐž" - }, - "filterDateRangePicker.inputFormat" : { - "description" : "Label for the 'Input format' subtext", - "message" : "ФОŅ€ĐŧĐ°Ņ‚ ввОда" - } -} diff --git a/packages/components/locales/si-LK.json b/packages/components/locales/si-LK.json deleted file mode 100644 index 6c1a643..0000000 --- a/packages/components/locales/si-LK.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "smartling" : { - "string_format" : "icu", - "translate_paths" : [ - { - "instruction" : "*/description", - "key" : "{*}/message", - "path" : "*/message" - }], - "variants_enabled" : true - }, - "filterDateRangePicker.dateFrom" : { - "description" : "Label for the 'Date from' date range input field", - "message" : "āļ¯āˇ’āļą āˇƒāˇ’āļ§" - }, - "filterDateRangePicker.dateTo" : { - "description" : "Label for the 'Date to' date range input field", - "message" : "āļ¯āˇ’āļąāļē āļ¯āļšāˇŠāˇ€āˇ" - }, - "filterDateRangePicker.inputFormat" : { - "description" : "Label for the 'Input format' subtext", - "message" : "āļ†āļ¯āˇāļą āļ†āļšāˇ˜āļ­āˇ’āļē" - } -} diff --git a/packages/components/locales/sk.json b/packages/components/locales/sk.json deleted file mode 100644 index 7e22da2..0000000 --- a/packages/components/locales/sk.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "smartling" : { - "string_format" : "icu", - "translate_paths" : [ - { - "instruction" : "*/description", - "key" : "{*}/message", - "path" : "*/message" - }], - "variants_enabled" : true - }, - "filterDateRangePicker.dateFrom" : { - "description" : "Label for the 'Date from' date range input field", - "message" : "DÃĄtum od" - }, - "filterDateRangePicker.dateTo" : { - "description" : "Label for the 'Date to' date range input field", - "message" : "DÃĄtum do" - }, - "filterDateRangePicker.inputFormat" : { - "description" : "Label for the 'Input format' subtext", - "message" : "VstupnÃŊ formÃĄt" - } -} diff --git a/packages/components/locales/sr.json b/packages/components/locales/sr.json deleted file mode 100644 index 742a8f9..0000000 --- a/packages/components/locales/sr.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "smartling" : { - "string_format" : "icu", - "translate_paths" : [ - { - "instruction" : "*/description", - "key" : "{*}/message", - "path" : "*/message" - }], - "variants_enabled" : true - }, - "filterDateRangePicker.dateFrom" : { - "description" : "Label for the 'Date from' date range input field", - "message" : "Datum „Od“" - }, - "filterDateRangePicker.dateTo" : { - "description" : "Label for the 'Date to' date range input field", - "message" : "Datum „Do“" - }, - "filterDateRangePicker.inputFormat" : { - "description" : "Label for the 'Input format' subtext", - "message" : "Format unosa" - } -} diff --git a/packages/components/locales/sv.json b/packages/components/locales/sv.json deleted file mode 100644 index 3eab2a6..0000000 --- a/packages/components/locales/sv.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "smartling" : { - "string_format" : "icu", - "translate_paths" : [ - { - "instruction" : "*/description", - "key" : "{*}/message", - "path" : "*/message" - }], - "variants_enabled" : true - }, - "filterDateRangePicker.dateFrom" : { - "description" : "Label for the 'Date from' date range input field", - "message" : "Startdatum" - }, - "filterDateRangePicker.dateTo" : { - "description" : "Label for the 'Date to' date range input field", - "message" : "Slutdatum" - }, - "filterDateRangePicker.inputFormat" : { - "description" : "Label for the 'Input format' subtext", - "message" : "Inmatningsformat" - } -} diff --git a/packages/components/locales/th.json b/packages/components/locales/th.json deleted file mode 100644 index 3c8227e..0000000 --- a/packages/components/locales/th.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "smartling" : { - "string_format" : "icu", - "translate_paths" : [ - { - "instruction" : "*/description", - "key" : "{*}/message", - "path" : "*/message" - }], - "variants_enabled" : true - }, - "filterDateRangePicker.dateFrom" : { - "description" : "Label for the 'Date from' date range input field", - "message" : "ā¸•ā¸ąāš‰ā¸‡āšā¸•āšˆā¸§ā¸ąā¸™ā¸—ā¸ĩāšˆ" - }, - "filterDateRangePicker.dateTo" : { - "description" : "Label for the 'Date to' date range input field", - "message" : "ā¸ˆā¸™ā¸–ā¸ļā¸‡ā¸§ā¸ąā¸™ā¸—ā¸ĩāšˆ" - }, - "filterDateRangePicker.inputFormat" : { - "description" : "Label for the 'Input format' subtext", - "message" : "ā¸Ŗā¸šā¸›āšā¸šā¸šā¸­ā¸´ā¸™ā¸žā¸¸ā¸•" - } -} diff --git a/packages/components/locales/tl.json b/packages/components/locales/tl.json deleted file mode 100644 index 06f550b..0000000 --- a/packages/components/locales/tl.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "smartling" : { - "string_format" : "icu", - "translate_paths" : [ - { - "instruction" : "*/description", - "key" : "{*}/message", - "path" : "*/message" - }], - "variants_enabled" : true - }, - "filterDateRangePicker.dateFrom" : { - "description" : "Label for the 'Date from' date range input field", - "message" : "Petsa mula" - }, - "filterDateRangePicker.dateTo" : { - "description" : "Label for the 'Date to' date range input field", - "message" : "Petsa hanggang" - }, - "filterDateRangePicker.inputFormat" : { - "description" : "Label for the 'Input format' subtext", - "message" : "Format ng input" - } -} diff --git a/packages/components/locales/tr.json b/packages/components/locales/tr.json deleted file mode 100644 index 1f2d471..0000000 --- a/packages/components/locales/tr.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "smartling" : { - "string_format" : "icu", - "translate_paths" : [ - { - "instruction" : "*/description", - "key" : "{*}/message", - "path" : "*/message" - }], - "variants_enabled" : true - }, - "filterDateRangePicker.dateFrom" : { - "description" : "Label for the 'Date from' date range input field", - "message" : "Şu tarihten" - }, - "filterDateRangePicker.dateTo" : { - "description" : "Label for the 'Date to' date range input field", - "message" : "Şu tarihe kadar" - }, - "filterDateRangePicker.inputFormat" : { - "description" : "Label for the 'Input format' subtext", - "message" : "Giriş biçimi" - } -} diff --git a/packages/components/locales/uk.json b/packages/components/locales/uk.json deleted file mode 100644 index 7173fdb..0000000 --- a/packages/components/locales/uk.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "smartling" : { - "string_format" : "icu", - "translate_paths" : [ - { - "instruction" : "*/description", - "key" : "{*}/message", - "path" : "*/message" - }], - "variants_enabled" : true - }, - "filterDateRangePicker.dateFrom" : { - "description" : "Label for the 'Date from' date range input field", - "message" : "ДаŅ‚Đ° С" - }, - "filterDateRangePicker.dateTo" : { - "description" : "Label for the 'Date to' date range input field", - "message" : "ДаŅ‚Đ° ĐŋĐž" - }, - "filterDateRangePicker.inputFormat" : { - "description" : "Label for the 'Input format' subtext", - "message" : "ФОŅ€ĐŧĐ°Ņ‚ вŅ…Ņ–Đ´ĐŊиŅ… Đ´Đ°ĐŊиŅ…" - } -} diff --git a/packages/components/locales/vi.json b/packages/components/locales/vi.json deleted file mode 100644 index 65a7f41..0000000 --- a/packages/components/locales/vi.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "smartling" : { - "string_format" : "icu", - "translate_paths" : [ - { - "instruction" : "*/description", - "key" : "{*}/message", - "path" : "*/message" - }], - "variants_enabled" : true - }, - "filterDateRangePicker.dateFrom" : { - "description" : "Label for the 'Date from' date range input field", - "message" : "Ngày táģĢ" - }, - "filterDateRangePicker.dateTo" : { - "description" : "Label for the 'Date to' date range input field", - "message" : "Ngày đáēŋn" - }, - "filterDateRangePicker.inputFormat" : { - "description" : "Label for the 'Input format' subtext", - "message" : "Đáģ‹nh dáēĄng đáē§u vào" - } -} diff --git a/packages/components/locales/zh-TW.json b/packages/components/locales/zh-TW.json deleted file mode 100644 index 6c58372..0000000 --- a/packages/components/locales/zh-TW.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "smartling" : { - "string_format" : "icu", - "translate_paths" : [ - { - "instruction" : "*/description", - "key" : "{*}/message", - "path" : "*/message" - }], - "variants_enabled" : true - }, - "filterDateRangePicker.dateFrom" : { - "description" : "Label for the 'Date from' date range input field", - "message" : "開始æ—Ĩ期īŧš" - }, - "filterDateRangePicker.dateTo" : { - "description" : "Label for the 'Date to' date range input field", - "message" : "įĩæŸæ—Ĩ期īŧš" - }, - "filterDateRangePicker.inputFormat" : { - "description" : "Label for the 'Input format' subtext", - "message" : "čŧ¸å…Ĩæ ŧåŧ" - } -} diff --git a/packages/components/locales/zh.json b/packages/components/locales/zh.json deleted file mode 100644 index fb231f4..0000000 --- a/packages/components/locales/zh.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "smartling" : { - "string_format" : "icu", - "translate_paths" : [ - { - "instruction" : "*/description", - "key" : "{*}/message", - "path" : "*/message" - }], - "variants_enabled" : true - }, - "filterDateRangePicker.dateFrom" : { - "description" : "Label for the 'Date from' date range input field", - "message" : "čĩˇå§‹æ—Ĩ期" - }, - "filterDateRangePicker.dateTo" : { - "description" : "Label for the 'Date to' date range input field", - "message" : "įģ“束æ—Ĩ期" - }, - "filterDateRangePicker.inputFormat" : { - "description" : "Label for the 'Input format' subtext", - "message" : "输å…Ĩæ ŧåŧ" - } -} diff --git a/packages/components/package.json b/packages/components/package.json deleted file mode 100644 index ba9df62..0000000 --- a/packages/components/package.json +++ /dev/null @@ -1,104 +0,0 @@ -{ - "name": "@kaizen/components", - "version": "1.19.2", - "description": "Kaizen component library", - "author": "Geoffrey Chong ", - "homepage": "https://cultureamp.design", - "license": "MIT", - "bugs": { - "url": "https://github.com/cultureamp/kaizen-discourse/issues" - }, - "repository": { - "type": "git", - "url": "git+https://github.com/cultureamp/kaizen-design-system.git" - }, - "files": [ - "future", - "dist", - "icons", - "locales" - ], - "main": "dist/cjs/index.js", - "module": "dist/esm/index.js", - "types": "dist/index.d.ts", - "scripts": { - "prepublish": "yarn build:components && yarn postBuild && yarn dist:clean", - "build": "yarn prepublish", - "test": "jest", - "clean": "rimraf dist", - "build:components": "rollup -c", - "compile": "tsc", - "dist:clean": "rm ./dist/tailwind.css ./dist/raw-styles.css", - "dist:combine-styles": "concat-cli -f ./dist/esm/*.css ./dist/*.css -o ./dist/raw-styles.css", - "dist:copy-tailwind": "cp styles/tailwind.css dist/tailwind.css", - "dist:postcss": "postcss dist/raw-styles.css --output dist/styles.css", - "postBuild": "yarn dist:copy-tailwind && yarn dist:combine-styles && yarn dist:postcss", - "test:ci": "yarn test --ci", - "ci:test:react-16": "USE_REACT_16=true yarn test:ci", - "ci:test:react-17": "USE_REACT_17=true yarn test:ci" - }, - "dependencies": { - "@cultureamp/i18n-react-intl": "^1.4.3", - "@kaizen/a11y": "^1.7.11", - "@kaizen/brand": "^1.5.8", - "@kaizen/button": "^3.0.3", - "@kaizen/date-picker": "^6.2.2", - "@kaizen/draft-badge": "^1.13.11", - "@kaizen/draft-divider": "^2.2.10", - "@kaizen/draft-form": "^10.4.7", - "@kaizen/draft-menu": "^5.0.2", - "@kaizen/draft-tag": "^3.4.16", - "@kaizen/draft-tooltip": "^5.4.46", - "@kaizen/hosted-assets": "^2.0.2", - "@kaizen/loading-skeleton": "^2.0.7", - "@kaizen/loading-spinner": "^2.3.11", - "@kaizen/typography": "^2.3.10", - "@popperjs/core": "^2.11.8", - "@react-aria/button": "^3.8.0", - "@react-aria/focus": "^3.13.0", - "@react-aria/listbox": "^3.10.0", - "@react-aria/menu": "^3.10.0", - "@react-aria/overlays": "^3.15.0", - "@react-aria/select": "^3.10.1", - "@react-aria/utils": "^3.18.0", - "@react-stately/collections": "^3.9.0", - "@react-stately/list": "^3.9.0", - "@react-stately/menu": "^3.5.3", - "@react-stately/select": "^3.5.2", - "@react-types/shared": "^3.18.1", - "classnames": "^2.3.2", - "date-fns": "^2.30.0", - "react-focus-on": "^3.9.1", - "react-intl": "^6.4.4", - "react-popper": "^2.3.0", - "uuid": "^9.0.0" - }, - "devDependencies": { - "@kaizen/tailwind": "^1.0.4", - "@rollup/plugin-alias": "^5.0.0", - "@rollup/plugin-commonjs": "^25.0.3", - "@rollup/plugin-image": "^3.0.2", - "@rollup/plugin-json": "^6.0.0", - "@rollup/plugin-node-resolve": "^15.1.0", - "@rollup/plugin-typescript": "^11.1.2", - "autoprefixer": "^10.4.14", - "concat-cli": "^4.0.0", - "esbuild": "^0.18.13", - "query-string": "^8.1.0", - "rollup": "^3.26.2", - "rollup-plugin-dts": "^5.3.0", - "rollup-plugin-esbuild": "^5.0.0", - "rollup-plugin-ignore": "^1.0.10", - "rollup-plugin-node-externals": "^6.1.1", - "rollup-plugin-postcss": "^4.0.2", - "sass": "^1.63.6", - "serialize-query-params": "^2.0.2", - "ts-jest": "^29.1.1", - "ttypescript": "^1.5.15", - "typescript-transform-paths": "^3.4.6" - }, - "peerDependencies": { - "@kaizen/design-tokens": "^2.10.3 || ^3.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0", - "react": "^16.14.0 || ^17.0.0 || ^18.0.0" - } -} diff --git a/packages/components/postcss.config.js b/packages/components/postcss.config.js deleted file mode 100644 index bb4c3ff..0000000 --- a/packages/components/postcss.config.js +++ /dev/null @@ -1,9 +0,0 @@ -module.exports = { - plugins: { - "postcss-import": {}, - "tailwindcss/nesting": "postcss-nesting", - tailwindcss: {}, - autoprefixer: {}, - cssnano: {}, - }, -} diff --git a/packages/components/rollup.config.mjs b/packages/components/rollup.config.mjs deleted file mode 100644 index 8317767..0000000 --- a/packages/components/rollup.config.mjs +++ /dev/null @@ -1,87 +0,0 @@ -import alias from "@rollup/plugin-alias" -import commonjs from "@rollup/plugin-commonjs" -import image from "@rollup/plugin-image" -import jsonPlugin from "@rollup/plugin-json" -import resolve from "@rollup/plugin-node-resolve" -import typescript from "@rollup/plugin-typescript" -import dts from "rollup-plugin-dts" -import esbuild from "rollup-plugin-esbuild" -import ignore from "rollup-plugin-ignore" -import nodeExternals from "rollup-plugin-node-externals" -import postcss from "rollup-plugin-postcss" -import ttypescript from "ttypescript" - -const TYPES_TEMP_DIR = "dts" -const OUTPUT_DIR = "dist" - -const getCompiledConfigByModuleType = format => ({ - input: { index: "./src/index.ts", future: "./src/__future__/index.ts" }, - plugins: [ - nodeExternals({ - devDeps: true - }), - // Has to be the same as packages/components/tsconfig.json -> compilerOptions -> paths - alias({ - entries: [ - { find: "~types", replacement: "src/types" }, - { find: "~utils", replacement: "src/utils" }, - { find: "~icons", replacement: "src/SVG/icons" }, - { find: "~components", replacement: "src" }, - // i18n-react-intl package attempts to import locales from this path. - // When rollup attempts to import from the 'find' path, it will be - // redirected to import from the replacement path (same as storybook webpack config). - { - find: "__@cultureamp/i18n-react-intl/locales", - replacement: "locales", - }, - ], - }), - resolve({ - preferBuiltins: true, - extensions: [".js", ".jsx", ".ts", ".tsx"], - }), - postcss({ - extract: true, - extensions: [".scss", ".css"], - }), - typescript({ - declaration: true, - declarationDir: `${OUTPUT_DIR}/${format}/${TYPES_TEMP_DIR}`, - exclude: [ - "node_modules", - "**/*.spec.ts", - "**/*.spec.tsx", - "**/*.stories.tsx", - ], - // We use ttypescript instead of typescript to allow transformer to convert alias into actual paths/dependencies - typescript: ttypescript, - }), - commonjs(), - esbuild(), - image(), - jsonPlugin(), - // These libraries aren't used in KAIO, and require polyfills to be set up - // in consuming repos. Ignoring them here removes the need for extra setup in - // consuming repos. - ignore(["stream", "http", "https", "zlib"]), - ], - output: [ - { - dir: `${OUTPUT_DIR}/${format}`, - format, - sourcemap: true, - }, - ], -}) - -export default [ - getCompiledConfigByModuleType("cjs"), - getCompiledConfigByModuleType("esm"), - // This step doesn't matter if it's cjs or esm, the output will be the same (esm is faster) - { - input: `./${OUTPUT_DIR}/esm/dts/index.d.ts`, - output: [{ file: `${OUTPUT_DIR}/index.d.ts`, format: "esm" }], - external: [/\.scss$/], - plugins: [dts()], - }, -] diff --git a/packages/components/setupTests.ts b/packages/components/setupTests.ts deleted file mode 100644 index f313c54..0000000 --- a/packages/components/setupTests.ts +++ /dev/null @@ -1 +0,0 @@ -require("../../setupTests.ts") diff --git a/packages/components/src/Button/Button.module.scss b/packages/components/src/Button/Button.module.scss deleted file mode 100644 index 2fab672..0000000 --- a/packages/components/src/Button/Button.module.scss +++ /dev/null @@ -1,199 +0,0 @@ -@import "~@kaizen/design-tokens/sass/spacing"; -@import "~@kaizen/design-tokens/sass/color"; -@import "~@kaizen/design-tokens/sass/border"; -@import "~@kaizen/design-tokens/sass/typography"; -@import "../../styles/button-reset"; -@import "mixins"; -@import "variables"; - -%button { - @include button-reset; - - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - font-family: $typography-button-primary-font-family; - font-weight: $typography-button-primary-font-weight; - font-size: $typography-button-primary-font-size; - line-height: $typography-button-primary-line-height; - letter-spacing: $typography-button-primary-letter-spacing; - display: inline-flex; - // ^inline-flex is used over (block) flex here to fix an edge case where the parent element is display:grid - // and this element is an , causing the element to be full width. - align-items: center; - box-sizing: border-box; - min-height: $button-height; - border: $border-solid-border-width $border-solid-border-style; - border-radius: $border-solid-border-radius; - position: relative; - text-align: left; - cursor: pointer; - overflow: visible; // Required for the focus ring on IE11 - - &[href] { - text-decoration: none; - } - - &:not(:disabled) { - &:active, - &#{$story-className--button-active} { - transform: translateY(1px); - } - - &:focus { - outline: none; - } - - #{$selectors--button-focus} { - &::after { - $focus-ring-offset: calc( - (#{$border-focus-ring-border-width} * 2) + 1px - ); - - content: ""; - position: absolute; - background: transparent; - border-color: $color-blue-500; - border-radius: $border-focus-ring-border-radius; - border-width: $border-focus-ring-border-width; - border-style: $border-focus-ring-border-style; - inset: calc(-1 * #{$focus-ring-offset}); - } - } - } - - &.reversed { - &:not(:disabled) { - #{$selectors--button-focus} { - &::after { - border-color: $color-blue-300; - } - } - } - } - - &:disabled, - &.working { - pointer-events: none; - opacity: 30%; - } - - #{$className--content} { - height: 100%; - display: flex; - align-items: center; - padding: $button-vertical-padding - calc(#{$spacing-md} - #{$border-solid-border-width}); - } -} - -%variant-default { - background-color: $color-white; - border-color: $color-gray-500; - color: $color-purple-800; - - @include enabled-pseudo-states-variant($color-gray-200, $color-gray-600); - - &.reversed { - background-color: transparent; - border-color: rgba($color-white-rgb, 0.65); - color: $color-white; - - @include enabled-pseudo-states-variant( - rgba($color-white-rgb, 0.1), - $color-white - ); - } -} - -%variant-primary { - background-color: $color-blue-500; - border-color: $border-borderless-border-color; - color: $color-white; - - @include enabled-pseudo-states-variant( - $color-blue-600, - $border-borderless-border-color - ); - - &.reversed { - background-color: $color-green-300; - border-color: $border-borderless-border-color; - color: $color-purple-800; - - @include enabled-pseudo-states-variant( - $color-green-400, - $border-borderless-border-color - ); - } -} - -%variant-destructive { - background-color: $color-red-500; - border-color: $border-borderless-border-color; - color: $color-white; - - @include enabled-pseudo-states-variant( - $color-red-600, - $border-borderless-border-color - ); - - &.reversed { - background-color: $color-red-300; - border-color: $border-borderless-border-color; - color: $color-purple-800; - - @include enabled-pseudo-states-variant( - $color-red-400, - $border-borderless-border-color - ); - } -} - -%variant-secondary { - font-family: $typography-button-secondary-font-family; - font-weight: $typography-button-secondary-font-weight; - font-size: $typography-button-secondary-font-size; - line-height: $typography-button-secondary-line-height; - letter-spacing: $typography-button-secondary-letter-spacing; - background-color: transparent; - border-color: $border-borderless-border-color; - color: $color-blue-500; - - @include enabled-pseudo-states-variant( - $color-blue-100, - $border-borderless-border-color - ); - - #{$className--content} { - padding-left: calc(#{$spacing-sm} - #{$border-solid-border-width}); - padding-right: calc(#{$spacing-sm} - #{$border-solid-border-width}); - } - - &.reversed { - border-color: $border-borderless-border-color; - color: $color-white; - - @include enabled-pseudo-states-variant( - rgba($color-white-rgb, 0.2), - $border-borderless-border-color - ); - } -} - -%variant-secondary-destructive { - color: $color-red-600; - - @include enabled-pseudo-states-variant( - $color-red-100, - $border-borderless-border-color - ); -} - -%variant-small { - min-height: $button-small-height; - - #{$className--content} { - padding-top: $button-vertical-padding--small; - padding-bottom: $button-vertical-padding--small; - } -} diff --git a/packages/components/src/Button/Button.tsx b/packages/components/src/Button/Button.tsx deleted file mode 100755 index b14ce08..0000000 --- a/packages/components/src/Button/Button.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import React, { forwardRef, Ref } from "react" -import GenericButton, { - GenericProps, - ButtonFormAttributes, - BadgeProps, - ButtonRef, - WorkingProps, - WorkingUndefinedProps, -} from "./components/GenericButton" - -export type ButtonProps = GenericProps & - ButtonFormAttributes & - (WorkingProps | WorkingUndefinedProps) & { - label: string - primary?: boolean - destructive?: boolean - secondary?: boolean - /** @default "regular" */ - size?: "small" | "regular" - badge?: BadgeProps - type?: "submit" | "reset" | "button" - fullWidth?: boolean - iconPosition?: "start" | "end" - icon?: JSX.Element - disabled?: boolean - } - -/** - * {@link https://cultureamp.design/components/button/ Guidance} | - * {@link https://cultureamp.design/storybook/?path=/docs/components-button--default-kaizen-site-demo Storybook} - */ -export const Button = forwardRef( - (props: ButtonProps, ref: Ref) => ( - - ) -) - -Button.defaultProps = { - fullWidth: false, - primary: false, - secondary: false, - destructive: false, - disabled: false, - reversed: false, - iconPosition: "start", - newTabAndIUnderstandTheAccessibilityImplications: false, -} - -Button.displayName = "Button" diff --git a/packages/components/src/Button/_docs/Button.stickersheet.stories.tsx b/packages/components/src/Button/_docs/Button.stickersheet.stories.tsx deleted file mode 100644 index 6b5e56c..0000000 --- a/packages/components/src/Button/_docs/Button.stickersheet.stories.tsx +++ /dev/null @@ -1,241 +0,0 @@ -import React from "react" -import { Meta, StoryFn } from "@storybook/react" -import { CheckIcon } from "~components/SVG/icons/CheckIcon" -import { StickerSheet } from "../../../../../storybook/components/StickerSheet" -import { Button, ButtonProps } from "../index" - -export default { - title: "KAIO/Button", - parameters: { - chromatic: { disable: false }, - controls: { disable: true }, - }, -} satisfies Meta - -const StickerSheetTemplate: StoryFn<{ isReversed: boolean }> = ({ - isReversed, -}) => { - const REVERSED__VARIANT_PROPS: Array<{ - title: string - props: ButtonProps - }> = [ - { - title: "Default", - props: { - label: "Label", - }, - }, - { - title: "Primary", - props: { - label: "Label", - primary: true, - }, - }, - { - title: "Destructive", - props: { - label: "Label", - destructive: true, - }, - }, - { - title: "Secondary", - props: { - label: "Label", - secondary: true, - }, - }, - ] - - const VARIANTS_PROPS: Array<{ - title: string - props: ButtonProps - }> = isReversed - ? REVERSED__VARIANT_PROPS - : [ - ...REVERSED__VARIANT_PROPS, - { - title: "Secondary Destructive", - props: { - label: "Label", - secondary: true, - destructive: true, - }, - }, - ] - - const WORKING_PROPS: ButtonProps = { - label: "Label", - working: true, - workingLabel: "Submitting", - workingLabelHidden: true, - } - - const ICON_LEFT_PROPS: ButtonProps = { - label: "Label", - icon: , - } - - const ICON_RIGHT_PROPS: ButtonProps = { - label: "Label", - icon: , - iconPosition: "end", - } - - const BADGE_PROPS: ButtonProps = { - label: "Label", - badge: { text: "4" }, - } - const BADGE_LEFT_PROPS: ButtonProps = { - ...BADGE_PROPS, - icon: , - } - - const BADGE_RIGHT_PROPS: ButtonProps = { - ...BADGE_PROPS, - icon: , - iconPosition: "end", - } - - return ( - <> - - - - {VARIANTS_PROPS.map(({ title, props }) => ( - - - ) -} - -const renderLink = (props: Props, ref: Ref): JSX.Element => { - const { - id, - href, - onClick, - newTabAndIUnderstandTheAccessibilityImplications, - onFocus, - onBlur, - ...rest - } = props - const customProps = getCustomProps(rest) - - const target = newTabAndIUnderstandTheAccessibilityImplications - ? "_blank" - : "_self" - - return ( - - {renderContent(props)} - - ) -} - -const buttonClass = (props: Props): string => { - const isDefault = !props.primary && !props.destructive && !props.secondary - return classnames( - styles.button, - isDefault && styles.default, - props.primary && styles.primary, - props.destructive && styles.destructive, - props.secondary && styles.secondary, - props.size && styles[props.size], - props.reversed && styles.reversed, - props.iconButton && styles.iconButton, - props.working && styles.working, - (props.directionalLink || props.paginationLink) && styles.circleButton, - props.directionalLink && styles.directionalLink, - props.paginationLink && styles.paginationLink, - props.isActive && styles.isPaginationLinkActive, - props.classNameOverride - ) -} - -const renderLoadingSpinner = (): JSX.Element => ( -
- -
-) - -const renderWorkingContent = ( - props: Extract -): JSX.Element => { - if (props.workingLabelHidden) { - return ( - <> - {/* This is to ensure the button stays at the correct width */} - - - {renderLoadingSpinner()} - - - ) - } - - return ( - <> - {props.iconPosition !== "end" && renderLoadingSpinner()} - {props.workingLabel} - {props.additionalContent && ( - - {props.additionalContent} - - )} - {props.iconPosition === "end" && renderLoadingSpinner()} - - ) -} - -const renderDefaultContent = (props: Props): JSX.Element => ( - <> - {props.icon && props.iconPosition !== "end" && renderIcon(props.icon)} - {(!props.icon || !props.iconButton) && ( - {props.label} - )} - {props.additionalContent && ( - - {props.additionalContent} - - )} - {renderBadge(props)} - {props.icon && props.iconPosition === "end" && renderIcon(props.icon)} - -) - -const renderBadge = (props: Props): JSX.Element | null => { - if (!props.badge) return null - - const { text, animateChange, reversed, variant } = props.badge - - if (animateChange) { - return ( - - {text} - - ) - } - return ( - - {text} - - ) -} - -const renderContent = (props: Props): JSX.Element => ( - - {props.working ? renderWorkingContent(props) : renderDefaultContent(props)} - -) - -const renderIcon = (icon: JSX.Element): JSX.Element => ( - {icon} -) - -// We only want an aria-label in the case that the button has just an icon and no text -// This can happen when the button is working and workingLabelHidden is true, -// or when this is an IconButton -const generateAriaLabel = (props: Props): string | undefined => { - if (props.working && props.workingLabelHidden) { - return props.workingLabel - } - - if (props.iconButton) { - return props.label - } - - return undefined -} - -export default GenericButton diff --git a/packages/components/src/Button/index.ts b/packages/components/src/Button/index.ts deleted file mode 100644 index 6783701..0000000 --- a/packages/components/src/Button/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./Button" diff --git a/packages/components/src/ButtonGroup/ButtonGroup.module.scss b/packages/components/src/ButtonGroup/ButtonGroup.module.scss deleted file mode 100644 index 775ec6f..0000000 --- a/packages/components/src/ButtonGroup/ButtonGroup.module.scss +++ /dev/null @@ -1,72 +0,0 @@ -@import "~@kaizen/design-tokens/sass/border"; -@import "~@kaizen/design-tokens/sass/color"; - -$focus-ring-offset: 1px; -$focus-ring-offset-inner: calc(-1 * #{$focus-ring-offset}); - -// Classnames to simulate pseudo states in storybook -$story-className--button-group--focus: ":global(.story__button-group--focus)"; - -// Combined pseudo state classes -$selectors--button-group--focus: "&:focus-visible, &#{$story-className--button-group--focus}"; - -%firstChildBorders { - border-start-start-radius: $border-focus-ring-border-radius; - border-end-start-radius: $border-focus-ring-border-radius; -} - -%lastChildBorders { - border-start-end-radius: $border-focus-ring-border-radius; - border-end-end-radius: $border-focus-ring-border-radius; -} - -.buttonGroup { - display: inline-flex; - - .child { - border-radius: 0; - - #{$selectors--button-group--focus} { - &::after { - border-radius: 0; - } - } - - &.firstChild { - @extend %firstChildBorders; - - #{$selectors--button-group--focus} { - &::after { - @extend %firstChildBorders; - - inset-inline-end: $focus-ring-offset-inner; - } - } - } - - &:not(.firstChild) { - border-inline-start: 1px solid $color-blue-300; - } - - &:not(.firstChild, .lastChild) { - #{$selectors--button-group--focus} { - &::after { - inset-inline-start: $focus-ring-offset-inner; - inset-inline-end: $focus-ring-offset-inner; - } - } - } - - &.lastChild { - @extend %lastChildBorders; - - #{$selectors--button-group--focus} { - &::after { - @extend %lastChildBorders; - - inset-inline-start: $focus-ring-offset-inner; - } - } - } - } -} diff --git a/packages/components/src/ButtonGroup/ButtonGroup.tsx b/packages/components/src/ButtonGroup/ButtonGroup.tsx deleted file mode 100644 index a014ab7..0000000 --- a/packages/components/src/ButtonGroup/ButtonGroup.tsx +++ /dev/null @@ -1,70 +0,0 @@ -import React, { HTMLAttributes } from "react" -import classnames from "classnames" -import { Tooltip, TooltipProps } from "@kaizen/draft-tooltip" -import { OverrideClassName } from "~types/OverrideClassName" -import { - FilterButtonBase, - FilterButtonBaseProps, -} from "../FilterButton/_subcomponents/FilterButtonBase" -import styles from "./ButtonGroup.module.scss" - -const isFilterButton = ( - node: React.ReactNode -): node is React.ReactElement => - React.isValidElement(node) && node.type === FilterButtonBase - -export interface ButtonGroupProps - extends OverrideClassName> { - children: - | React.ReactElement - | Array> -} - -export const ButtonGroup = ({ - children, - classNameOverride, - ...restProps -}: ButtonGroupProps): JSX.Element => { - const childCount = React.Children.count(children) - - const containerProps = { - role: "group", - className: classnames(styles.buttonGroup, classNameOverride), - ...restProps, - } - - if (childCount === 1) return
{children}
- - return ( -
- {React.Children.map(children, (child, index) => { - const buttonClassNames = classnames( - styles.child, - index === 0 && styles.firstChild, - index === childCount - 1 && styles.lastChild, - child.props.classNameOverride - ) - - if (child.type === Tooltip) { - const button = child.props.children - - if (isFilterButton(button)) { - return React.cloneElement(child, { - children: React.cloneElement(button, { - classNameOverride: buttonClassNames, - }), - }) - } - - return child - } - - return React.cloneElement(child, { - classNameOverride: buttonClassNames, - }) - })} -
- ) -} - -ButtonGroup.displayName = "ButtonGroup" diff --git a/packages/components/src/ButtonGroup/_docs/ButtonGroup.stories.tsx b/packages/components/src/ButtonGroup/_docs/ButtonGroup.stories.tsx deleted file mode 100644 index 735ca55..0000000 --- a/packages/components/src/ButtonGroup/_docs/ButtonGroup.stories.tsx +++ /dev/null @@ -1,227 +0,0 @@ -import React from "react" -import { Meta, StoryFn } from "@storybook/react" -import { Tooltip } from "@kaizen/draft-tooltip" -import { FilterButtonBase } from "~components/FilterButton/_subcomponents/FilterButtonBase" -import { ComponentDocsTemplate } from "../../../../../storybook/components/DocsContainer" -import { StickerSheet } from "../../../../../storybook/components/StickerSheet" -import { ButtonGroup } from ".." - -export default { - tags: ["autodocs"], - title: "Components/Button/Button Group", - component: ButtonGroup, - parameters: { - docs: { - container: ComponentDocsTemplate, - }, - isInKaio: true, - installation: [ - "yarn add @kaizen/components", - "import { ButtonGroup } from `@kaizen/components`", - ], - resourceLinks: { - sourceCode: - "https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/ButtonGroup", - figma: - "https://www.figma.com/file/ZRfnoNUXbGZv4eVWLbF4Az/%F0%9F%96%BC%EF%B8%8F-Component-Gallery?type=design&node-id=6-28579&t=bowQ0LWOQKOd0UYS-0", - designGuidelines: - "https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082093959/Filters", - }, - }, -} satisfies Meta - -/** - * Used to group buttons. Compatible with buttons wrapped by Tooltip. Currently only compatible with Filter Buttons. - */ -export const Playground: StoryFn = args => ( - - First - Last - -) - -const StickerSheetTemplate: StoryFn = () => ( - <> - - - - - - First - Last - - - First - Middle - Last - - - - Tooltips here - - - Styles should still work - - - - - - - - - - - - - First - - Last - - - - First - - Last - - - - First - - Last - - - - - - First - - Last - - - - First - - Last - - - - First - - Last - - - - - - - First - - Middle - - Last - - - First - - Middle - - Last - - - First - - Middle - - Last - - - - - - - - - - - - First - - Last - - - - First - - Last - - - - First - - Last - - - - - - First - - Last - - - - First - - Last - - - - First - - Last - - - - - - - First - - Middle - - Last - - - First - - Middle - - Last - - - First - - Middle - - Last - - - - - -) - -export const StickerSheetDefault = StickerSheetTemplate.bind({}) -StickerSheetDefault.storyName = "Sticker Sheet (Default)" -StickerSheetDefault.parameters = { - chromatic: { disable: false }, - controls: { disable: true }, -} diff --git a/packages/components/src/ButtonGroup/index.ts b/packages/components/src/ButtonGroup/index.ts deleted file mode 100644 index 7be0bfe..0000000 --- a/packages/components/src/ButtonGroup/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./ButtonGroup" diff --git a/packages/components/src/ClearButton/ClearButton.module.scss b/packages/components/src/ClearButton/ClearButton.module.scss deleted file mode 100644 index 8a37eeb..0000000 --- a/packages/components/src/ClearButton/ClearButton.module.scss +++ /dev/null @@ -1,73 +0,0 @@ -@import "~@kaizen/design-tokens/sass/border"; -@import "~@kaizen/design-tokens/sass/color"; -@import "../../styles/button-reset"; - -// Classnames to simulate pseudo states in storybook -$story-className--clear-button-hover: ":global(.story__clear-button-hover)"; -$story-className--clear-button-focus: ":global(.story__clear-button-focus)"; - -// Combined pseudo state classes -$selectors--clear-button-hover: "&:hover, &#{$story-className--clear-button-hover}"; -$selectors--clear-button-focus: "&:focus-visible, &#{$story-className--clear-button-focus}"; - -.clearButton { - @include button-reset; - - position: relative; - display: inline-flex; - - #{$selectors--clear-button-hover} { - cursor: pointer; - } - - &:focus { - outline: none; - } - - #{$selectors--clear-button-focus} { - &::after { - $focus-ring-offset: -1px; - - content: ""; - position: absolute; - background: transparent; - border-width: $border-focus-ring-border-width; - border-style: $border-focus-ring-border-style; - border-radius: 50%; - inset: $focus-ring-offset; - } - } -} - -/////////////////////////////////////////////////// -// THEMES -/////////////////////////////////////////////////// -.default { - color: $color-gray-500; - - #{$selectors--clear-button-hover}, - #{$selectors--clear-button-focus} { - color: $color-purple-800; - } - - #{$selectors--clear-button-focus} { - &::after { - border-color: $color-blue-500; - } - } -} - -.reversed { - color: rgba($color-white-rgb, 0.8); - - #{$selectors--clear-button-hover}, - #{$selectors--clear-button-focus} { - color: $color-white; - } - - #{$selectors--clear-button-focus} { - &::after { - border-color: $color-blue-300; - } - } -} diff --git a/packages/components/src/ClearButton/ClearButton.tsx b/packages/components/src/ClearButton/ClearButton.tsx deleted file mode 100644 index a00dae2..0000000 --- a/packages/components/src/ClearButton/ClearButton.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import React, { ButtonHTMLAttributes } from "react" -import classnames from "classnames" -import { ClearIcon } from "~components/SVG/icons/ClearIcon" -import { OverrideClassName } from "~types/OverrideClassName" -import styles from "./ClearButton.module.scss" - -export interface ClearButtonProps - extends Omit< - OverrideClassName>, - "children" - > { - isReversed?: boolean -} - -export const ClearButton = ({ - classNameOverride, - isReversed = false, - ...restProps -}: ClearButtonProps): JSX.Element => ( - -) - -ClearButton.displayName = "ClearButton" diff --git a/packages/components/src/ClearButton/index.ts b/packages/components/src/ClearButton/index.ts deleted file mode 100644 index d1bdd19..0000000 --- a/packages/components/src/ClearButton/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./ClearButton" diff --git a/packages/components/src/Filter/Filter.spec.tsx b/packages/components/src/Filter/Filter.spec.tsx deleted file mode 100644 index 7cc5cb8..0000000 --- a/packages/components/src/Filter/Filter.spec.tsx +++ /dev/null @@ -1,61 +0,0 @@ -import React from "react" -import { render, screen, waitFor } from "@testing-library/react" -import userEvent from "@testing-library/user-event" -import { FilterButton } from "../FilterButton" -import { Filter, FilterProps } from "./Filter" - -const user = userEvent.setup() - -const FilterWrapper = (customProps?: Partial): JSX.Element => { - const [isOpen, setIsOpen] = React.useState(false) - return ( - ( - - )} - {...customProps} - > -
Filter Contents
- - ) -} - -describe("", () => { - it("does not show content initially", () => { - render() - expect(screen.queryByRole("dialog")).not.toBeInTheDocument() - }) - - it("shows content when isOpen is true", async () => { - render() - await waitFor(() => { - expect(screen.getByRole("dialog")).toBeVisible() - expect(screen.getByText("Filter Contents")).toBeVisible() - }) - }) - - it("shows content when trigger button is clicked", async () => { - render() - const filterButton = screen.getByRole("button", { name: "Label" }) - await user.click(filterButton) - await waitFor(() => { - expect(screen.getByRole("dialog")).toBeVisible() - expect(screen.getByText("Filter Contents")).toBeVisible() - }) - }) - - it("shows content when trigger button on keydown enter", async () => { - render() - const filterButton = screen.getByRole("button", { name: "Label" }) - await user.tab() - expect(filterButton).toHaveFocus() - await user.keyboard("{Enter}") - - await waitFor(() => { - expect(screen.getByRole("dialog")).toBeVisible() - expect(screen.getByText("Filter Contents")).toBeVisible() - }) - }) -}) diff --git a/packages/components/src/Filter/Filter.tsx b/packages/components/src/Filter/Filter.tsx deleted file mode 100644 index cdc5576..0000000 --- a/packages/components/src/Filter/Filter.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import React, { HTMLAttributes, useEffect, useRef, useState } from "react" -import { FocusOn } from "react-focus-on" -import { OverrideClassName } from "~types/OverrideClassName" -import { FilterPopover } from "./components/FilterPopover" -import { FilterTriggerRef } from "./types" - -export interface FilterProps - extends OverrideClassName> { - children: React.ReactNode - isOpen: boolean - setIsOpen: (isOpen: boolean) => void - renderTrigger: (triggerProps: { - onClick: () => void - isOpen: boolean - }) => JSX.Element & { ref?: React.RefObject } - onMount?: (triggerRef: React.RefObject) => void -} - -export const Filter = ({ - children, - isOpen, - setIsOpen, - renderTrigger, - classNameOverride, - onMount, - ...restProps -}: FilterProps): JSX.Element => { - const [isRefLoaded, setIsRefLoaded] = useState(false) - - const trigger = renderTrigger({ - onClick: (): void => setIsOpen(!isOpen), - isOpen, - }) - - const inbuiltButtonRef = useRef(null) - const inbuiltRef = useRef({ - triggerRef: inbuiltButtonRef, - }) - const filterButtonRef = trigger.ref ?? inbuiltRef - - useEffect(() => { - if (filterButtonRef.current?.triggerRef?.current) { - setIsRefLoaded(true) - onMount?.(filterButtonRef.current.triggerRef) - } - }, [filterButtonRef.current?.triggerRef?.current, onMount]) - - return ( -
- {React.cloneElement(trigger, { - ref: filterButtonRef, - })} - {isRefLoaded && isOpen && ( - setIsOpen(false)} - onEscapeKey={(): void => setIsOpen(false)} - > - - {children} - - - )} -
- ) -} - -Filter.displayName = "Filter" diff --git a/packages/components/src/Filter/_docs/Filter.mdx b/packages/components/src/Filter/_docs/Filter.mdx deleted file mode 100644 index 50c51dc..0000000 --- a/packages/components/src/Filter/_docs/Filter.mdx +++ /dev/null @@ -1,93 +0,0 @@ -import { ArgTypes, Meta } from "@storybook/blocks" -import { ResourceLinks, KaioNotification, Installation, NoClipCanvas } from "../../../../../storybook/components" -import { LinkTo } from "../../../../../storybook/components/LinkTo" -import * as FilterStories from "./Filter.stories" - - - -# Filter - - - - - - - -## Overview - -These components are mainly used for constructing Filter components (eg. FilterSelect): -- FilterButton for the renderTrigger -- `FilterContents` to wrap the contents within a Filter - - - -## API - - - -### `children` - -The contents within the popover. -Wrap the contents in `` - this provides base padding styles. - -### `isOpen` - -The open state of the popover. This is passed through to the trigger button props. - -### `setIsOpen` - -A callback (`(isOpen: boolean) => value`) to toggle the open state of the popover. -This is called by the `onClick` prop passed through to the trigger button props. - -### `renderTrigger` - -A callback that provides trigger button props to the provided FilterButton. - -```tsx -onClick: () => void // Calls `setIsOpen(!isOpen)` -isOpen: boolean // The value from the `isOpen` prop -``` - -If a `ref` is provided to the FilterButton it will be used, otherwise a fallback `ref` -will be created (this is required to tie the trigger to the popover). - -```tsx -ref: { triggerRef?: React.RefObject } -``` - -#### Simple Filter - -```tsx -renderTrigger={(triggerProps): JSX.Element => ( - -)} -``` - - - -#### Removable Filter - -```tsx -renderTrigger={(triggerProps): JSX.Element => ( - -)} -``` - - - -### `onMount` - -A callback which returns the trigger button `ref` (provided or fallback) when mounted. - -This is an escape hatch for when you require it for a third party library (eg. `react-aria select`). diff --git a/packages/components/src/Filter/_docs/Filter.stickersheet.stories.tsx b/packages/components/src/Filter/_docs/Filter.stickersheet.stories.tsx deleted file mode 100644 index 2ed38fd..0000000 --- a/packages/components/src/Filter/_docs/Filter.stickersheet.stories.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import React from "react" -import { Meta, StoryFn } from "@storybook/react" -import isChromatic from "chromatic" -import { FilterButton } from "~components/FilterButton" -import { StickerSheet } from "../../../../../storybook/components/StickerSheet" -import { Filter, FilterContents } from ".." - -const IS_CHROMATIC = isChromatic() - -export default { - title: "Components/Filter Base", - parameters: { - chromatic: { disable: false }, - controls: { disable: true }, - }, -} satisfies Meta - -const StickerSheetTemplate: StoryFn = () => { - const [isOpen, setIsOpen] = React.useState(true) - - return ( - - - - - ( - - )} - > - Filter Contents - - - - - ) -} - -export const StickerSheetDefault = StickerSheetTemplate.bind({}) -StickerSheetDefault.storyName = "Sticker Sheet (Default)" -StickerSheetDefault.parameters = { - chromatic: { disable: false }, - controls: { disable: true }, -} diff --git a/packages/components/src/Filter/_docs/Filter.stories.tsx b/packages/components/src/Filter/_docs/Filter.stories.tsx deleted file mode 100644 index e57b9f5..0000000 --- a/packages/components/src/Filter/_docs/Filter.stories.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import React, { useState } from "react" -import { action } from "@storybook/addon-actions" -import { Meta, StoryFn } from "@storybook/react" -import { FilterButton, FilterButtonRemovable } from "~components/FilterButton" -import { Filter, FilterContents } from ".." - -export default { - title: "Components/Filter Base", - component: Filter, - argTypes: { - classNameOverride: { - type: "string", - description: "Add extra classnames to the component.", - }, - }, -} satisfies Meta - -export const SimpleFilter: StoryFn = () => { - const [isOpen, setIsOpen] = useState(false) - return ( - ( - - )} - > - Filter Contents - - ) -} - -export const RemovableFilter: StoryFn = () => { - const [isOpen, setIsOpen] = useState(false) - return ( - ( - - )} - > - Filter Contents - - ) -} diff --git a/packages/components/src/Filter/_docs/controls/renderTriggerControls.tsx b/packages/components/src/Filter/_docs/controls/renderTriggerControls.tsx deleted file mode 100644 index 9d37d6f..0000000 --- a/packages/components/src/Filter/_docs/controls/renderTriggerControls.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import React from "react" -import { action } from "@storybook/addon-actions" -import { - FilterButton, - FilterButtonProps, - FilterButtonRemovable, -} from "~components/FilterButton" - -/* - * This helper is for consumers of Filter, not for Filter itself - * (the type is slightly different)! - */ -export const renderTriggerControls = { - description: "Element is a variation of a FilterButton", - options: ["Filter Button", "Filter Button Removable"], - control: { type: "radio" }, - mapping: { - "Filter Button": (triggerButtonProps: FilterButtonProps): JSX.Element => ( - - ), - "Filter Button Removable": ( - triggerButtonProps: FilterButtonProps - ): JSX.Element => ( - - ), - }, -} diff --git a/packages/components/src/Filter/components/FilterContents/FilterContents.module.scss b/packages/components/src/Filter/components/FilterContents/FilterContents.module.scss deleted file mode 100644 index a96111c..0000000 --- a/packages/components/src/Filter/components/FilterContents/FilterContents.module.scss +++ /dev/null @@ -1,5 +0,0 @@ -@import "~@kaizen/design-tokens/sass/spacing"; - -.filterContents { - padding: $spacing-md; -} diff --git a/packages/components/src/Filter/components/FilterContents/FilterContents.tsx b/packages/components/src/Filter/components/FilterContents/FilterContents.tsx deleted file mode 100644 index c83facb..0000000 --- a/packages/components/src/Filter/components/FilterContents/FilterContents.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import React, { HTMLAttributes } from "react" -import classnames from "classnames" -import { OverrideClassName } from "~types/OverrideClassName" -import styles from "./FilterContents.module.scss" - -export interface FilterContentsProps - extends OverrideClassName> { - children: React.ReactNode -} - -export const FilterContents = ({ - children, - classNameOverride, - ...restProps -}: FilterContentsProps): JSX.Element => ( -
- {children} -
-) - -FilterContents.displayName = "FilterContents" diff --git a/packages/components/src/Filter/components/FilterContents/index.ts b/packages/components/src/Filter/components/FilterContents/index.ts deleted file mode 100644 index 2468f6b..0000000 --- a/packages/components/src/Filter/components/FilterContents/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./FilterContents" diff --git a/packages/components/src/Filter/components/FilterPopover/FilterPopover.module.scss b/packages/components/src/Filter/components/FilterPopover/FilterPopover.module.scss deleted file mode 100644 index 97565b3..0000000 --- a/packages/components/src/Filter/components/FilterPopover/FilterPopover.module.scss +++ /dev/null @@ -1,11 +0,0 @@ -@import "~@kaizen/design-tokens/sass/border"; -@import "~@kaizen/design-tokens/sass/color"; -@import "~@kaizen/design-tokens/sass/shadow"; - -.filterPopover { - background-color: $color-white; - z-index: 1010; - box-shadow: $shadow-large-box-shadow; - border-radius: $border-borderless-border-radius; - display: inline-flex; -} diff --git a/packages/components/src/Filter/components/FilterPopover/FilterPopover.tsx b/packages/components/src/Filter/components/FilterPopover/FilterPopover.tsx deleted file mode 100644 index 4a0958b..0000000 --- a/packages/components/src/Filter/components/FilterPopover/FilterPopover.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import React, { HTMLAttributes, useState } from "react" -import { Options } from "@popperjs/core" -import classnames from "classnames" -import { usePopper } from "react-popper" -import { OverrideClassName } from "~types/OverrideClassName" -import styles from "./FilterPopover.module.scss" - -export interface FilterPopoverProps - extends OverrideClassName> { - children: React.ReactNode - referenceElement: HTMLElement | null - popperOptions?: Partial -} - -export const FilterPopover = ({ - children, - referenceElement, - popperOptions, - classNameOverride, - ...restProps -}: FilterPopoverProps): JSX.Element => { - const [popperElement, setPopperElement] = useState( - null - ) - - const { styles: popperStyles, attributes: popperAttributes } = usePopper( - referenceElement, - popperElement, - { - modifiers: [ - { - name: "offset", - options: { - offset: [0, 15], - }, - }, - ], - placement: "bottom-start", - ...popperOptions, - } - ) - - return ( -
- {children} -
- ) -} - -FilterPopover.displayName = "FilterPopover" diff --git a/packages/components/src/Filter/components/FilterPopover/index.ts b/packages/components/src/Filter/components/FilterPopover/index.ts deleted file mode 100644 index 20946be..0000000 --- a/packages/components/src/Filter/components/FilterPopover/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./FilterPopover" diff --git a/packages/components/src/Filter/index.ts b/packages/components/src/Filter/index.ts deleted file mode 100644 index 2ea3ca8..0000000 --- a/packages/components/src/Filter/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export * from "./Filter" -export * from "./components/FilterContents" -export * from "./types" diff --git a/packages/components/src/Filter/types.ts b/packages/components/src/Filter/types.ts deleted file mode 100644 index af0c72e..0000000 --- a/packages/components/src/Filter/types.ts +++ /dev/null @@ -1,3 +0,0 @@ -export type FilterTriggerRef = { - triggerRef?: React.RefObject -} diff --git a/packages/components/src/FilterBar/FilterBar.module.scss b/packages/components/src/FilterBar/FilterBar.module.scss deleted file mode 100644 index 80ebc8e..0000000 --- a/packages/components/src/FilterBar/FilterBar.module.scss +++ /dev/null @@ -1,19 +0,0 @@ -@import "~@kaizen/design-tokens/sass/border"; -@import "~@kaizen/design-tokens/sass/color"; -@import "~@kaizen/design-tokens/sass/shadow"; -@import "~@kaizen/design-tokens/sass/spacing"; - -.filterBar { - display: flex; - padding: $spacing-8; - box-shadow: $shadow-small-box-shadow; - border-radius: $border-solid-border-radius; - background-color: $color-white; -} - -.filtersContainer { - display: flex; - flex-grow: 1; - flex-wrap: wrap; - gap: $spacing-8; -} diff --git a/packages/components/src/FilterBar/FilterBar.spec.tsx b/packages/components/src/FilterBar/FilterBar.spec.tsx deleted file mode 100644 index 17645ca..0000000 --- a/packages/components/src/FilterBar/FilterBar.spec.tsx +++ /dev/null @@ -1,890 +0,0 @@ -import React, { useEffect, useState } from "react" -import { render, waitFor, within } from "@testing-library/react" -import userEvent from "@testing-library/user-event" -import { FilterMultiSelect } from ".." -import { FilterBar, FilterBarProps } from "./FilterBar" -import { useFilterBarContext } from "./context/FilterBarContext" -import { Filters, FiltersValues } from "./types" - -const user = userEvent.setup() - -const TEST_ID__FILTER = "testid__filter" - -type ValuesSimple = { - flavour: string - sugarLevel: number - iceLevel: number -} - -const simpleFilters = [ - { - id: "flavour", - name: "Flavour", - Component: ( - - ), - }, - { - id: "sugarLevel", - name: "Sugar Level", - Component: ( - - ), - }, - { - id: "iceLevel", - name: "Ice Level", - Component: ( - - ), - }, -] satisfies Filters - -type ValuesRemovable = { - flavour: string - topping: string -} - -const filtersRemovable = [ - { - id: "flavour", - name: "Flavour", - Component: ( - - ), - isRemovable: true, - }, - { - id: "topping", - name: "Topping", - Component: ( - - ), - isRemovable: true, - }, -] satisfies Filters - -type ValuesDependent = { - flavour: string - topping: string -} - -const filtersDependent = [ - { - id: "flavour", - name: "Flavour", - Component: ( - - ), - }, - { - id: "topping", - name: "Topping", - Component: ( - - ), - isUsableWhen: state => state.flavour.value !== undefined, - }, -] satisfies Filters - -const FilterBarWrapper = ({ - filters, - defaultValues, - ...customProps -}: Partial> & { - filters: FilterBarProps["filters"] - defaultValues?: FilterBarProps["values"] -}): JSX.Element => { - const [activeValues, setActiveValues] = useState>( - defaultValues ?? {} - ) - - return ( - - filters={filters} - values={activeValues} - onValuesChange={setActiveValues} - {...customProps} - /> - ) -} - -describe("", () => { - it("renders filters in the provided order", () => { - const { getAllByTestId } = render( - filters={simpleFilters} /> - ) - const filters = getAllByTestId(TEST_ID__FILTER) - expect(filters.length).toBe(3) - expect(filters[0]).toHaveTextContent("Flavour") - expect(filters[1]).toHaveTextContent("Sugar Level") - expect(filters[2]).toHaveTextContent("Ice Level") - }) - - describe("Removable filters", () => { - it("shows inactive filters in the Add Filters menu only", async () => { - const { getByRole, queryByText } = render( - filters={filtersRemovable} /> - ) - expect(queryByText("Topping")).not.toBeInTheDocument() - - const addFiltersButton = getByRole("button", { name: "Add Filters" }) - await user.click(addFiltersButton) - - const list = getByRole("list") - const menuOption = within(list).getByRole("button", { name: "Topping" }) - - await waitFor(() => { - expect(menuOption).toBeVisible() - }) - }) - - it("shows removable filter as active if there is a default value", () => { - const { getByRole } = render( - - filters={filtersRemovable} - defaultValues={{ topping: "pearls" }} - /> - ) - expect(getByRole("button", { name: "Topping : Pearls" })).toBeVisible() - expect( - getByRole("button", { name: "Remove filter - Topping" }) - ).toBeVisible() - }) - - it("does not show active removable filters in the Add Filters menu", async () => { - const { getByRole } = render( - - filters={filtersRemovable} - defaultValues={{ topping: "pearls" }} - /> - ) - - const addFiltersButton = getByRole("button", { name: "Add Filters" }) - await user.click(addFiltersButton) - - const list = getByRole("list") - const menuOption = within(list).queryByRole("button", { name: "Topping" }) - await waitFor(() => { - expect(menuOption).not.toBeInTheDocument() - }) - }) - - it("clears the value of a filter if it is removed", async () => { - const { getByRole } = render( - - filters={filtersRemovable} - defaultValues={{ topping: "pearls" }} - /> - ) - - const filterButton = getByRole("button", { name: "Topping : Pearls" }) - expect(filterButton).toBeVisible() - - await user.click(getByRole("button", { name: "Remove filter - Topping" })) - await waitFor(() => { - expect(filterButton).not.toBeInTheDocument() - }) - - const addFiltersButton = getByRole("button", { name: "Add Filters" }) - await user.click(addFiltersButton) - - const list = getByRole("list") - const menuOption = within(list).getByRole("button", { name: "Topping" }) - await waitFor(() => { - expect(menuOption).toBeVisible() - }) - - await user.click(menuOption) - await waitFor(() => { - expect(list).not.toBeInTheDocument() - }) - expect(getByRole("button", { name: "Topping" })).toBeVisible() - }) - - it("adds new filters in the provided order", async () => { - const { getByRole, getAllByTestId } = render( - - filters={simpleFilters.map(filter => ({ - ...filter, - isRemovable: true, - }))} - /> - ) - - const addFiltersButton = getByRole("button", { name: "Add Filters" }) - await user.click(addFiltersButton) - - const menuOptionIceLevel = getByRole("button", { name: "Ice Level" }) - await user.click(menuOptionIceLevel) - await user.click(addFiltersButton) - - const menuOptionFlavour = getByRole("button", { name: "Flavour" }) - await user.click(menuOptionFlavour) - await user.click(addFiltersButton) - - const menuOptionSugarLevel = getByRole("button", { name: "Sugar Level" }) - await user.click(menuOptionSugarLevel) - - const filters = getAllByTestId(TEST_ID__FILTER) - expect(filters.length).toBe(3) - expect(filters[0]).toHaveTextContent("Ice Level") - expect(filters[1]).toHaveTextContent("Flavour") - expect(filters[2]).toHaveTextContent("Sugar Level") - }) - }) - - describe("Dependent filters", () => { - describe("Condition not met", () => { - it("does not show a dependent filter", () => { - const { queryByRole, getByRole } = render( - - ) - expect( - queryByRole("button", { name: "Topping" }) - ).not.toBeInTheDocument() - expect(getByRole("button", { name: "Add Filters" })).toBeDisabled() - }) - }) - - describe("Condition met", () => { - it("shows a non-removable dependent filter in active filters", async () => { - const { queryByRole, getByRole, findByRole } = render( - - ) - - const flavourButton = getByRole("button", { name: "Flavour" }) - expect( - queryByRole("button", { name: "Topping" }) - ).not.toBeInTheDocument() - - await user.click(flavourButton) - const flavourOption = await findByRole("option", { - name: "Jasmine Milk Tea", - }) - await user.click(flavourOption) - - await waitFor(() => { - expect(getByRole("button", { name: "Topping" })).toBeVisible() - }) - }) - - it("shows a removable dependent filter in Add Filters menu", async () => { - const { getByRole, findByRole } = render( - - ), - }, - { - id: "topping", - name: "Topping", - Component: ( - - ), - isUsableWhen: state => state.flavour.value !== undefined, - isRemovable: true, - }, - ]} - /> - ) - - const addFiltersButton = getByRole("button", { name: "Add Filters" }) - expect(addFiltersButton).toBeDisabled() - - const flavourButton = getByRole("button", { name: "Flavour" }) - await user.click(flavourButton) - const flavourOption = await findByRole("option", { - name: "Jasmine Milk Tea", - }) - await user.click(flavourOption) - - await waitFor(() => { - expect(addFiltersButton).not.toBeDisabled() - }) - - await user.click(addFiltersButton) - - const list = getByRole("list") - const menuOption = within(list).getByRole("button", { name: "Topping" }) - - await waitFor(() => { - expect(menuOption).toBeVisible() - }) - }) - }) - - describe("Condition result change", () => { - it("clears the value for an unusable filter", async () => { - const checkValues = jest.fn]>() - - const Wrapper = (): JSX.Element => { - const [values, setValues] = useState>({ - topping: "pearls", - }) - - return ( -
- - filters={filtersDependent} - values={values} - onValuesChange={setValues} - /> - -
- ) - } - - const { queryByRole, getByRole } = render() - expect( - queryByRole("button", { name: "Topping : Pearls" }) - ).not.toBeInTheDocument() - - await user.click(getByRole("button", { name: "Check values" })) - await waitFor(() => { - expect(checkValues).toHaveBeenCalledWith({}) - }) - }) - - it("clears the value and removes a filter which loses usability", async () => { - const checkValues = jest.fn]>() - - const Wrapper = (): JSX.Element => { - const [values, setValues] = useState>({ - flavour: "jasmine-milk-tea", - topping: "pearls", - }) - - return ( -
- - filters={filtersDependent} - values={values} - onValuesChange={setValues} - /> - - -
- ) - } - - const { getByRole } = render() - expect( - getByRole("button", { name: "Flavour : Jasmine Milk Tea" }) - ).toBeVisible() - const toppingsButton = getByRole("button", { name: "Topping : Pearls" }) - expect(toppingsButton).toBeVisible() - - await user.click(getByRole("button", { name: "Clear Flavour" })) - await user.click(getByRole("button", { name: "Check values" })) - - await waitFor(() => { - expect(checkValues).toHaveBeenCalledWith({}) - expect(toppingsButton).not.toBeInTheDocument() - }) - }) - }) - - describe("Multiple dependencies", () => { - it("handles complex dependencies", async () => { - type ValuesComplexDeps = { - coffee: string - milk: string - syrup: string - sugar: string - ice: string - } - - const filters = [ - { - id: "coffee", - name: "Coffee", - Component: ( - - ), - }, - { - id: "milk", - name: "Milk", - Component: ( - - ), - isUsableWhen: state => state.coffee.value === "latte", - }, - { - id: "syrup", - name: "Syrup", - Component: ( - - ), - isRemovable: true, - isUsableWhen: state => - state.milk.value !== undefined && !state.sugar.isActive, - }, - { - id: "sugar", - name: "Sugar", - Component: ( - - ), - isRemovable: true, - isUsableWhen: state => - state.milk.value !== undefined && !state.syrup.isActive, - }, - { - id: "ice", - name: "Ice", - Component: ( - - ), - isUsableWhen: state => state.coffee.value !== undefined, - }, - ] satisfies Filters - - const { queryByRole, getByRole } = render( - - ) - - const coffeeButton = getByRole("button", { name: "Coffee" }) - expect(coffeeButton).toBeVisible() - expect(queryByRole("button", { name: "Milk" })).not.toBeInTheDocument() - expect(queryByRole("button", { name: "Syrup" })).not.toBeInTheDocument() - expect(queryByRole("button", { name: "Sugar" })).not.toBeInTheDocument() - expect(queryByRole("button", { name: "Ice" })).not.toBeInTheDocument() - - const addFiltersButton = getByRole("button", { name: "Add Filters" }) - expect(addFiltersButton).toBeDisabled() - - await user.click(coffeeButton) - await user.click(getByRole("option", { name: "Long Black" })) - - await waitFor(() => { - expect(coffeeButton.textContent).toBe("Coffee:Long Black") - }) - const iceButton = getByRole("button", { name: "Ice" }) - expect(iceButton).toBeVisible() - expect(addFiltersButton).toBeDisabled() - - await user.click(coffeeButton) - await user.click(getByRole("option", { name: "Latte" })) - - await waitFor(() => { - expect(coffeeButton.textContent).toBe("Coffee:Latte") - }) - const milkButton = getByRole("button", { name: "Milk" }) - expect(milkButton).toBeVisible() - expect(addFiltersButton).toBeDisabled() - - await user.click(milkButton) - await user.click(getByRole("option", { name: "Oat" })) - - await waitFor(() => { - expect(milkButton.textContent).toBe("Milk:Oat") - }) - expect(addFiltersButton).not.toBeDisabled() - - await user.click(addFiltersButton) - - const list = getByRole("list") - const menuOptionSugar = within(list).getByRole("button", { - name: "Sugar", - }) - const menuOptionSyrup = within(list).getByRole("button", { - name: "Syrup", - }) - expect(menuOptionSugar).toBeVisible() - expect(menuOptionSyrup).toBeVisible() - - await user.click(menuOptionSugar) - - await waitFor(() => { - expect(list).not.toBeInTheDocument() - }) - const sugarButton = getByRole("button", { name: "Sugar" }) - expect(sugarButton).toBeVisible() - expect(addFiltersButton).toBeDisabled() - - await user.click(getByRole("button", { name: "Remove filter - Sugar" })) - - await waitFor(() => { - expect(sugarButton).not.toBeInTheDocument() - }) - expect(addFiltersButton).not.toBeDisabled() - }) - }) - }) - - describe("Clear all", () => { - it("clears all the values of all the filters", async () => { - const { getByRole } = render( - - filters={simpleFilters} - defaultValues={{ - flavour: "jasmine-milk-tea", - sugarLevel: 50, - iceLevel: 100, - }} - /> - ) - - const flavourButton = getByRole("button", { - name: "Flavour : Jasmine Milk Tea", - }) - const sugarLevelButton = getByRole("button", { - name: "Sugar Level : 50%", - }) - const iceLevelButton = getByRole("button", { name: "Ice Level : 100%" }) - - expect(flavourButton.textContent).toBe("Flavour:Jasmine Milk Tea") - expect(sugarLevelButton.textContent).toBe("Sugar Level:50%") - expect(iceLevelButton.textContent).toBe("Ice Level:100%") - - await user.click(getByRole("button", { name: "Clear all filters" })) - - await waitFor(() => { - expect(flavourButton.textContent).toBe("Flavour") - expect(sugarLevelButton.textContent).toBe("Sugar Level") - expect(iceLevelButton.textContent).toBe("Ice Level") - }) - }) - - it("removes all removable filters", async () => { - const { getByRole } = render( - - filters={filtersRemovable} - defaultValues={{ - flavour: "jasmine-milk-tea", - topping: "pearls", - }} - /> - ) - - const flavourButton = getByRole("button", { - name: "Flavour : Jasmine Milk Tea", - }) - const toppingButton = getByRole("button", { name: "Topping : Pearls" }) - - expect(flavourButton).toBeVisible() - expect(toppingButton).toBeVisible() - - await user.click(getByRole("button", { name: "Clear all filters" })) - - await waitFor(() => { - expect(flavourButton).not.toBeInTheDocument() - expect(toppingButton).not.toBeInTheDocument() - }) - }) - }) - - describe("External events", () => { - it("allows updating the values via an external event", async () => { - const Wrapper = (): JSX.Element => { - type ExternalEventValues = { - flavour: string - } - - const [values, setValues] = useState>({}) - - const filters = [ - { - id: "flavour", - name: "Flavour", - Component: ( - - ), - }, - ] satisfies Filters - - return ( -
- - -
- ) - } - - const { getByRole } = render() - - const flavourButton = getByRole("button", { name: "Flavour" }) - expect(flavourButton.textContent).toEqual("Flavour") - - await user.click( - getByRole("button", { name: "Update Flavour to honey-milk-tea" }) - ) - - await waitFor(() => { - expect(flavourButton.textContent).toEqual("Flavour:Honey Milk Tea") - }) - }) - - it("shows a removable filter when a value is set", async () => { - const Wrapper = (): JSX.Element => { - type ExternalEventValues = { - flavour: string - } - - const [values, setValues] = useState>({}) - - const filters = [ - { - id: "flavour", - name: "Flavour", - Component: ( - - ), - isRemovable: true, - }, - ] satisfies Filters - - return ( -
- - -
- ) - } - - const { getByRole, queryByRole } = render() - - expect(queryByRole("button", { name: "Flavour" })).not.toBeInTheDocument() - - await user.click( - getByRole("button", { name: "Update Flavour to honey-milk-tea" }) - ) - - await waitFor(() => { - expect( - getByRole("button", { name: "Flavour : Honey Milk Tea" }) - ).toBeVisible() - }) - }) - }) - - describe("Context use cases", () => { - type Items = Array<{ value: string; label: string }> - - type AsyncValues = { - city: string[] - hero: string[] - } - - const MockFilterAsyncComponent = ({ - id, - fetcher, - }: { - id: string - fetcher: (args: Partial) => Promise - }): JSX.Element => { - const [items, setItems] = useState([]) - const { getActiveFilterValues } = useFilterBarContext() - const activeFilterVals = getActiveFilterValues() - - useEffect(() => { - fetcher(activeFilterVals).then(fetchedItems => { - if (JSON.stringify(fetchedItems) !== JSON.stringify(items)) { - setItems(fetchedItems) - } - }) - }, [JSON.stringify(activeFilterVals)]) - - return ( - - {() => ( - - {({ allItems }) => ( - - {item => ( - - )} - - )} - - )} - - ) - } - - const fetchCityOptions = jest.fn((filterValues: Partial) => { - const isSupermanInFilterValue = filterValues.hero?.includes("superman") - const isBatmanInFilterValue = filterValues.hero?.includes("batman") - - if (isBatmanInFilterValue && !isSupermanInFilterValue) { - return Promise.resolve([{ value: "gotham", label: "Gotham" }]) - } - - return Promise.resolve([ - { value: "gotham", label: "Gotham" }, - { value: "metro", label: "Metropolis" }, - ]) - }) - - const fetchHeroOptions = jest.fn((filterValues: Partial) => { - const isGothamInFilterValue = filterValues.city?.includes("gotham") - const isMetroInFilterValue = filterValues.city?.includes("metro") - - if (isGothamInFilterValue && !isMetroInFilterValue) { - return Promise.resolve([{ value: "batman", label: "Batman" }]) - } - - return Promise.resolve([ - { value: "superman", label: "Superman" }, - { value: "batman", label: "Batman" }, - ]) - }) - - const config = [ - { - id: "city", - name: "City", - Component: ( - - ), - }, - { - id: "hero", - name: "Hero", - Component: ( - - ), - }, - ] satisfies Filters - - it("can re-fetch options with all active filter values pulled off of the FilterBarContext", async () => { - const { getByRole, queryByRole } = render( - filters={config} defaultValues={{}} /> - ) - - await user.click(getByRole("button", { name: "City" })) - - await waitFor(() => { - expect(getByRole("option", { name: "Gotham" })).toBeVisible() - expect(getByRole("option", { name: "Metropolis" })).toBeVisible() - }) - - await user.click(getByRole("option", { name: "Gotham" })) - - // close city filter - await user.click(document.body) - - await user.click(getByRole("button", { name: "Hero" })) - - await waitFor(() => { - expect(getByRole("option", { name: "Batman" })).toBeVisible() - expect( - queryByRole("option", { name: "Superman" }) - ).not.toBeInTheDocument() - }) - - await user.click(getByRole("option", { name: "Batman" })) - - await user.click(document.body) - - await user.click(getByRole("button", { name: "City : Gotham" })) - - await waitFor(() => { - expect(getByRole("option", { name: "Gotham" })).toBeVisible() - expect( - queryByRole("option", { name: "Metropolis" }) - ).not.toBeInTheDocument() - }) - }) - }) -}) diff --git a/packages/components/src/FilterBar/FilterBar.tsx b/packages/components/src/FilterBar/FilterBar.tsx deleted file mode 100644 index 591c2ff..0000000 --- a/packages/components/src/FilterBar/FilterBar.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import React from "react" -import classnames from "classnames" -import { OverrideClassName } from "~types/OverrideClassName" -import { - FilterBarProvider, - FilterBarProviderProps, -} from "./context/FilterBarContext" -import { - FilterBarDatePicker, - FilterBarDateRangePicker, - FilterBarMultiSelect, - FilterBarSelect, -} from "./subcomponents" -import { AddFiltersMenu } from "./subcomponents/AddFiltersMenu" -import { ClearAllButton } from "./subcomponents/ClearAllButton" -import { FiltersValues } from "./types" -import styles from "./FilterBar.module.scss" - -export type FilterBarProps = OverrideClassName< - Omit, "children"> -> - -export const FilterBar = ({ - filters, - classNameOverride, - ...providerProps -}: FilterBarProps): JSX.Element => ( - filters={filters} {...providerProps}> - {(activeFilters): JSX.Element => ( -
-
- {Object.values(activeFilters).map(({ id, Component }) => ( - // `id` will always be `string`, but keyof ValuesMap transformed it - - {React.cloneElement(Component, { id })} - - ))} - -
- -
- -
-
- )} - -) - -FilterBar.displayName = "FilterBar" - -FilterBar.DatePicker = FilterBarDatePicker -FilterBar.DateRangePicker = FilterBarDateRangePicker -FilterBar.MultiSelect = FilterBarMultiSelect -FilterBar.Select = FilterBarSelect diff --git a/packages/components/src/FilterBar/_docs/FilterBar.mdx b/packages/components/src/FilterBar/_docs/FilterBar.mdx deleted file mode 100644 index 3c6f6ea..0000000 --- a/packages/components/src/FilterBar/_docs/FilterBar.mdx +++ /dev/null @@ -1,343 +0,0 @@ -import { ArgTypes, Meta } from "@storybook/blocks" -import { ResourceLinks, KaioNotification, Installation, NoClipCanvas } from "../../../../../storybook/components" -import { LinkTo } from "../../../../../storybook/components/LinkTo" -import * as FilterBarStories from "./FilterBar.stories" - - - -# Filter Bar - - - - - - - -## Overview - -The Filter Bar is a collection of Filter components, used to filter data. - -The `Clear all` button clears all active values, and moves any removable filters into the `Add Filters` menu. - -This example showcases a minimal implementation of the FilterBar. - - - -## API - - - -### `FilterBar` (generic) - -FilterBar accepts a TypeScript generic where you can outline the shape of the expected value types for each filter. - -We also provide a `Filters` type which can accept the same generic to provide improved type safety. - -`ValuesMap` should be in the shape of `{ [filterId]: filterValueType }`. - -```tsx -import { FilterBar, Filters } from "@kaizen/components" - -type ValuesMap = { - filterId1: string - filterId2: number -} - -const [values, setValues] = useState>({ - filterId1: "default-value" -}) - -const filters = [ - { id: "filterId1", ...rest }, - { id: "filterId2", ...rest }, -] satisfies Filters - -return ( - - filters={filters} - values={values} - onValuesChange={setValues} - /> -) -``` - -### `filters` - -The `filters` prop is an array of attributes used to create the list of filters. - -#### Usage - -We provide a `Filters` type you can use for improved type safety. - -```tsx -import { FilterBar, Filters, DateRange, FilterMultiSelect } from "@kaizen/components" - -type ValuesMap = { - filterId1: string - filterId2: string[] - filterId3: DateRange -} - -const filters = [ - { - id: "filterId1", - name: "Filter 1", - Component: , - }, - { - id: "filterId2", - name: "Filter 2", - Component: ( - - {/* Compose your structure using subcomponents of FilterMultiSelect */} - {() => } - - ), - }, - { - id: "filterId3", - name: "Filter 3", - Component: , - isRemovable: true, - isUsableWhen: (state) => state.filterId1.value !== undefined - }, -] satisfies Filters -``` - -#### Filter attributes - -Each filter has the following attributes: - -- [`id: string`](#id-string) -- [`name: string`](#name-string) -- [`Component: JSX.Element`](#component-jsxelement) -- [`isRemovable?: boolean`](#isremovable-boolean) -- [`isUsableWhen?: (state: FiltersState) => boolean`](#isusablewhen-state-filtersstatevaluesmap--boolean) - -##### `id: string` - -A unique id for the filter. - -##### `name: string` - -The name used to label the filter, shown in the trigger button. - -##### `Component: JSX.Element` - -This attribute must be a Filter component or a custom component consuming the FilterBarContext. - -Provided Filter components are built on top of their base component, and have the -`id`, `label`, `renderTrigger`, `isOpen`, `setIsOpen`, and `value` (or similar) props omitted as they are filled in for you. - -If the component comes with an `onChange` (or similar) prop, it will be made optional and it can be used for additional actions (eg. adding analytics). - -Available Filter components: -- `` - extends FilterDatePicker - - `selectedDate` is omitted - - `onDateChange` is now optional - - `locale` is now optional (defaults to `"en-AU"`) -- `` - extends FilterDateRangePicker - - `selectedRange` is omitted - - `onRangeChange` is now optional - - `locale` is now optional (defaults to `"en-AU"`) -- `` - extends FilterMultiSelect - - `selectedKeys` is omitted - - `onSelectionChange` remains available as optional - - **Note:** To use the subcomponents, import `FilterMultiSelect` from `@kaizen/components` (not `@kaizen/select`) -- `` - extends FilterSelect - - `selectedKey` is omitted - - `onSelectionChange` remains available as optional - - **Note:** To use the subcomponents, import `FilterSelect` from `@kaizen/components` (not `@kaizen/select`) - -##### `isRemovable?: boolean` - -When this attribute is applied, the Filter will become removable (a remove button will be attached to the trigger button), -and its value will be cleared upon removal. - -Filters with this attribute will be automatically put into the `Add Filter` menu on first render, -unless there is a default value provided, of which it will be in the active filters after the non-removable filters. - -When removed from the active filters, the filter will be added to the `Add Filter` menu options. - -##### `isUsableWhen?: (state: FiltersState) => boolean` - -Note: _Usable_ refers to a filter showing in either the Active Filters or as an option in the Add Filters menu. - -Use this attribute to apply a condition to a filter based on the state of another filter. - -For example, if you want `Milk` to only be _Usable_ when `Coffee` is `"latte"`: - -```tsx -type ValuesMap = { - coffee: string - milk: string -} - -const filters = [ - { - id: "coffee", - name: "Coffee", - Component: , - }, - { - id: "milk", - name: "Milk", - Component: , - isUsableWhen: (state) => state.coffee.value === "latte", - }, -] satisfies Filters -``` - -The `state` arg will provide you with the following attributes for all the filters (mapped to the keys of the `ValuesMap`): -```ts -id: keyof ValuesMap -name: string -value?: ValueMap[keyof ValuesMap] -isActive: boolean -``` - -When a dependent filter has not met its condition (not _Usable_): -- it will be removed from the FilterBar -- if it has a value, the value will be cleared - -If this attribute is not defined, the filter will default to be _Usable_. - -### `values` - -A key-value pair of currently active values. - -The `values` prop should be in the shape of `{ [filterId]: filterValueType }` (matching `ValuesMap`). - -This is instantiated by the consumer to allow for updates from external events (eg. using url params). - -```tsx -type ValuesMap = { - filterId1: string - filterId2: number -} - -// @note: Unless you are providing a default value for all the filters, -// you will want to wrap it in Partial. -const [values, setValues] = useState>({ - filterId1: "default-value" -}) - -return ( - values={values} {...rest} /> -) -``` - -### `onValuesChange` - -A callback (`(values: Partial) => void`) for when the active `values` change. - - - -## Examples - -### Dependent filters - -Dependent filters are filters which are not able to be used by the end user until a certain condition has been met. -Filters that do not meet their condition will not be shown amongst the Active Filters, nor in the Add Filters menu. - -See [filter attribute `isUsableWhen`](#isusablewhen-state-filtersstatevaluesmap--boolean) for api. - -This example shows the following dependencies: -- **Milk** is only usable when **Coffee** _is Latte_ - - `isUsableWhen: state => state.coffee.value === "latte"` - - An initial value of _Full Cream_ is passed in, but immediately cleared - as (on load) **Coffee** does not have an initial value -- **Syrup** is only usable when **Milk** _has a value_ AND **Sugar** _is not active_ - - `isUsableWhen: state => state.milk.value !== undefined && !state.sugar.isActive` - - This filter is removable, so it will start in the `Add Filters` menu -- **Sugar** is only usable when **Milk** _has a value_ AND **Syrup** _is not active_ - - `isUsableWhen: state => state.milk.value !== undefined && !state.syrup.isActive` - - This filter is removable, so it will start in the `Add Filters` menu -- **Ice** is only available when **Coffee** _has a value_ - - `isUsableWhen: state => state.coffee.value !== undefined` - - - -### Dependent (Multi)Select options - -A Select or MultiSelect's options may change depending on another filter's value. - -To do this, the dependent filter must be made into a custom component -which calls `getFilterState` or `getActiveFilterValues` from `useFilterBarContext`. -It must also either have an optional `id` prop (`id?: string`) (filled in by ``), -or a matching `id` from the filter config must be provided to the rendered component. - -```tsx -type Values = { - source: string - dependent: string -} - -/** - * Explicit id - * No props required as you put the string directly into the Filter component - * Using `getFilterState` as dependency source is known - */ -const ExampleDependentFilter = () => { - const { getFilterState } = useFilterBarContext() - const sourceFilter = getFilterState("source") - const items = retrieveItems(sourceFilter.value) - return ( id="dependent" items={items} />) -} - -/** - * Optional id prop - * A simple example if you want to make a more reusable filter - * Using `getActiveFilterValues` as dependency source is unknown - */ -const ExampleDependentFilter = (props: { - id?: keyof Values - retrieveItemsCallback: (filterValue) => SelectOption[] -}) => { - const { getActiveFilterValues } = useFilterBarContext() - const activeValues = getActiveFilterValues() - const items = props.retrieveItemsCallback(activeValues) - return ( id={props.id} items={items} />) -} - -const CustomFilterBar = () => { - const filters = [ - { id: "source", ...rest }, - { id: "dependent", Component: , ...rest }, - ] satisfies Filters - - return filters={filters} {...rest} /> -} -``` - -Values of dependent filters will be cleared if the option no longer exists. - -The following example shows `Person` (multi-select with a 3 second loading time) and -`Room` (single select) re-populating with different options based on the values selected in `Role`. - - - -### Update values via external event - -The api allows you to update the values of the FilterBar via an external event (eg. updating url params). - -Simply update the value passed into the `values` prop. - -Out of the box, we do not make assumptions about your state management tool, so you will need to encode/decode -the types to match the expected format of your chosen query param library. - -The following example uses the -serialize-query-params -and query-string -packages. - - diff --git a/packages/components/src/FilterBar/_docs/FilterBar.stickersheet.stories.tsx b/packages/components/src/FilterBar/_docs/FilterBar.stickersheet.stories.tsx deleted file mode 100644 index deda19d..0000000 --- a/packages/components/src/FilterBar/_docs/FilterBar.stickersheet.stories.tsx +++ /dev/null @@ -1,181 +0,0 @@ -import React, { useState } from "react" -import { Meta, StoryFn } from "@storybook/react" -import { StickerSheet } from "../../../../../storybook/components/StickerSheet" -import { FilterBar, Filters } from "../index" - -export default { - title: "Components/Filter Bar", - parameters: { - chromatic: { disable: false }, - controls: { disable: true }, - }, -} satisfies Meta - -type Values = { - flavour: string - topping: string - sugarLevel: number - drank: Date -} - -const filters = [ - { - id: "flavour", - name: "Flavour", - Component: ( - - ), - }, - { - id: "topping", - name: "Topping", - Component: ( - - ), - }, - { - id: "sugarLevel", - name: "Sugar Level", - Component: ( - - ), - }, - { - id: "drank", - name: "Drank", - Component: , - }, -] satisfies Filters - -type ValuesRemovable = { - flavour: string - topping: string -} - -const removableFilters = [ - { - id: "flavour", - name: "Flavour", - Component: ( - - ), - }, - { - id: "topping", - name: "Topping", - Component: ( - - ), - isRemovable: true, - }, -] satisfies Filters - -const StickerSheetTemplate: StoryFn = () => { - const [activeValues, setActiveValues] = useState>({ - flavour: "jasmine-milk-tea", - }) - const [activeValuesOverflow, setActiveValuesOverflow] = useState< - Partial - >({ - flavour: "jasmine-milk-tea", - sugarLevel: 50, - }) - const [valuesRemovableAllActive, setValuesRemovableAllActive] = useState< - Partial - >({ topping: "pearls" }) - const [valuesRemovablePartialActive, setValuesRemovablePartialActive] = - useState>({}) - - return ( - <> - - - - - filters={filters} - values={activeValues} - onValuesChange={setActiveValues} - /> - - - - - - - -
- - filters={filters} - values={activeValuesOverflow} - onValuesChange={setActiveValuesOverflow} - /> -
- - - - - - - - - filters={removableFilters} - values={valuesRemovableAllActive} - onValuesChange={setValuesRemovableAllActive} - /> - - - - - - - - - filters={removableFilters} - values={valuesRemovablePartialActive} - onValuesChange={setValuesRemovablePartialActive} - /> - - - - - ) -} - -export const StickerSheetDefault = StickerSheetTemplate.bind({}) -StickerSheetDefault.storyName = "Sticker Sheet (Default)" diff --git a/packages/components/src/FilterBar/_docs/FilterBar.stories.tsx b/packages/components/src/FilterBar/_docs/FilterBar.stories.tsx deleted file mode 100644 index d7ae8dc..0000000 --- a/packages/components/src/FilterBar/_docs/FilterBar.stories.tsx +++ /dev/null @@ -1,672 +0,0 @@ -import React, { useEffect, useState } from "react" -import { Meta, StoryFn } from "@storybook/react" -import queryString from "query-string" -import Highlight from "react-highlight" -import { - encodeQueryParams, - StringParam, - ArrayParam, - DateParam, - encodeDate, - encodeObject, - decodeDate, - decodeObject, - QueryParamConfig, - decodeQueryParams, -} from "serialize-query-params" -import { DateRange, ItemType, SelectOption } from "~components/index" -import { FilterMultiSelect } from "../../index" -import { FilterBar, Filters, useFilterBarContext } from "../index" -import { FilterBarMultiSelectProps } from "../subcomponents" - -const meta = { - title: "Components/Filter Bar", - component: FilterBar, - argTypes: { - classNameOverride: { - type: "string", - description: "Add extra classnames to the component.", - }, - }, -} satisfies Meta - -export default meta - -const sampleCode = ` -type Values = { - flavour: string - deliveryDates: DateRange - topping: string[] - drank: Date -} - -const [activeValues, onActiveValuesChange] = useState>({ - flavour: "jasmine-milk-tea", - toppings: ["pearls", "fruit-jelly"] -}) - -const filters = [ - { - id: "flavour", - name: "Flavour", - Component: ( - - ), - }, - { - id: "deliveryDates", - name: "Delivery Dates", - Component: , - }, - { - id: "topping", - name: "Topping", - Component: ( - - {(): JSX.Element => ( - <> - - {({ allItems }): JSX.Element | JSX.Element[] => { - return allItems.map(item => ( - - )) - }} - - - - - - - )} - - ), - isRemovable: true, - }, - { - id: "drank", - name: "Drank", - Component: , - isRemovable: true, - }, -] satisfies Filters - -return ( - - filters={filters} - values={activeValues} - onValuesChange={onActiveValuesChange} - /> -)` - -type Values = { - flavour: string - deliveryDates: DateRange - toppings: string[] - drank: Date -} - -const filters = [ - { - id: "flavour", - name: "Flavour", - Component: ( - - ), - }, - { - id: "deliveryDates", - name: "Delivery Dates", - Component: , - }, - { - id: "toppings", - name: "Toppings", - Component: ( - - {(): JSX.Element => ( - <> - - - {({ allItems }): JSX.Element | JSX.Element[] => - allItems.map(item => ( - - )) - } - - - - - - - )} - - ), - isRemovable: true, - }, - { - id: "drank", - name: "Drank", - Component: , - isRemovable: true, - }, -] satisfies Filters - -export const BasicImplementation: StoryFn = () => { - const [activeValues, onActiveValuesChange] = useState>({ - flavour: "jasmine-milk-tea", - toppings: ["pearls", "fruit-jelly"], - }) - - return ( - - filters={filters} - values={activeValues} - onValuesChange={onActiveValuesChange} - /> - ) -} -BasicImplementation.parameters = { - docs: { - source: { - code: sampleCode, - }, - }, -} - -export const OnValuesChange: StoryFn = () => { - const [activeValues, onActiveValuesChange] = useState>({ - flavour: "jasmine-milk-tea", - toppings: ["pearls", "fruit-jelly"], - }) - - return ( - <> - - filters={filters} - values={activeValues} - onValuesChange={onActiveValuesChange} - /> - - {JSON.stringify(activeValues, null, 4)} - - - ) -} - -export const DependentFilter: StoryFn = () => { - type ValuesDependent = { - coffee: string - milk: string - syrup: string - sugar: string - ice: string - } - - const filtersDependent = [ - { - id: "coffee", - name: "Coffee", - Component: ( - - ), - }, - { - id: "milk", - name: "Milk", - Component: ( - - ), - isUsableWhen: state => state.coffee.value === "latte", - }, - { - id: "syrup", - name: "Syrup", - Component: ( - - ), - isRemovable: true, - isUsableWhen: state => - state.milk.value !== undefined && !state.sugar.isActive, - }, - { - id: "sugar", - name: "Sugar", - Component: , - isRemovable: true, - isUsableWhen: state => - state.milk.value !== undefined && !state.syrup.isActive, - }, - { - id: "ice", - name: "Ice", - Component: ( - - ), - isUsableWhen: state => state.coffee.value !== undefined, - }, - ] satisfies Filters - - const [values, setValues] = useState>({ - milk: "full-cream", - }) - - return ( - <> - - filters={filtersDependent} - values={values} - onValuesChange={setValues} - /> -
- -
- {JSON.stringify(values, null, 4)} - - ) -} - -const ExampleFilterMultiSelect = ( - props: Omit -): JSX.Element => ( - - {(): JSX.Element => ( - - {({ allItems }): JSX.Element | JSX.Element[] => { - if (allItems.length === 0) { - return ( - - No results. Select a role first. - - ) - } - return allItems.map(item => ( - - )) - }} - - )} - -) - -type ValuesSiblingDependent = { - role: string[] - person: string[] - room: string -} - -const sleep = (ms: number): Promise => - new Promise(resolve => setTimeout(resolve, ms)) - -const FilterPerson = (props: { id?: string }): JSX.Element => { - const data = [ - { - value: "delete-it-g", - label: "Delete-it G (Engineer)", - role: ["engineer"], - }, - { - value: "moustache-mackenzie", - label: "Moustache MacKenzie (Engineer)", - role: ["engineer"], - }, - { value: "jacon", label: "Jacon (Designer)", role: ["designer"] }, - { - value: "uppercase-winter", - label: "Uppercase Winter (Engineer)", - role: ["engineer"], - }, - { - value: "unicorn", - label: "Unicorn (Designer/Engineer)", - role: ["designer", "engineer"], - }, - ] - - const [items, setItems] = useState([]) - const [isLoading, setIsLoading] = useState(true) - - const { getFilterState } = useFilterBarContext< - ValuesSiblingDependent["person"], - ValuesSiblingDependent - >() - - const roleFilter = getFilterState("role") - - const loadItems = async (roles: string[] | undefined): Promise => { - await sleep(3000).then(() => { - setIsLoading(false) - setItems(data.filter(({ role }) => role.find(r => roles?.includes(r)))) - }) - } - - useEffect(() => { - setIsLoading(true) - loadItems(roleFilter.value) - }, [roleFilter.value]) - - return ( - } - items={items} - /> - ) -} - -const FilterRoom = (props: { - id?: keyof ValuesSiblingDependent -}): JSX.Element => { - type Item = SelectOption & { - role: string - } - - const data = [ - { value: "eng-1", label: "Engineering Space 1", role: "engineer" }, - { value: "eng-2", label: "Engineering Space 2", role: "engineer" }, - { value: "des-1", label: "Design Space 1", role: "designer" }, - ] - - const [items, setItems] = useState([]) - - type Id = typeof props.id extends keyof ValuesSiblingDependent - ? typeof props.id - : never - - const { getFilterState } = useFilterBarContext< - ValuesSiblingDependent[Id], - ValuesSiblingDependent - >() - - const roleFilter = getFilterState("role") - - useEffect(() => { - const roles = roleFilter.value - setItems(data.filter(({ role }) => roles?.includes(role))) - }, [roleFilter.value]) - - return id={props.id} items={items} /> -} - -export const SiblingValueDependentFilter: StoryFn = () => { - const filtersDependent = [ - { - id: "role", - name: "Role", - Component: ( - - ), - }, - { - id: "person", - name: "Person", - Component: , - }, - { - id: "room", - name: "Room", - Component: , - isRemovable: true, - isUsableWhen: state => state.role.value !== undefined, - }, - ] satisfies Filters - - const [values, setValues] = useState>({}) - - return ( - <> - - filters={filtersDependent} - values={values} - onValuesChange={setValues} - /> - {JSON.stringify(values, null, 4)} - - ) -} -const sourceCodeSiblingValueDependentFilter = ` -type Values = { - role: string[] - person: string[] - room: string -} - -const sleep = (ms: number): Promise => new Promise(resolve => setTimeout(resolve, ms)) - -const FilterPerson = (props: { id?: string }): JSX.Element => { - const data = [ - { value: "delete-it-g", label: "Delete-it G (Engineer)", role: ["engineer"] }, - { value: "moustache-mackenzie", label: "Moustache MacKenzie (Engineer)", role: ["engineer"] }, - { value: "jacon", label: "Jacon (Designer)", role: ["designer"] }, - { value: "uppercase-winter", label: "Uppercase Winter (Engineer)", role: ["engineer"] }, - { value: "unicorn", label: "Unicorn (Designer/Engineer)", role: ["designer", "engineer"] }, - ] - - const [items, setItems] = useState([]) - const [isLoading, setIsLoading] = useState(true) - - const { getFilterState } = useFilterBarContext() - - const roleFilter = getFilterState("role") - - const loadItems = async (roles: string[] | undefined): Promise => { - await sleep(3000).then(() => { - setIsLoading(false) - setItems(data.filter(({ role }) => role.find(r => roles?.includes(r)))) - }) - } - - useEffect(() => { - setIsLoading(true) - loadItems(roleFilter.value) - }, [roleFilter.value]) - - return ( - } - items={items} - >{...renderChildren} - ) -} - -const FilterRoom = (props: { id?: string }): JSX.Element => { - type Item = SelectOption & { role: string } - - const data = [ - { value: "eng-1", label: "Engineering Space 1", role: "engineer" }, - { value: "eng-2", label: "Engineering Space 2", role: "engineer" }, - { value: "des-1", label: "Design Space 1", role: "designer" }, - ] - - const [items, setItems] = useState([]) - - const { getFilterState } = useFilterBarContext() - - const roleFilter = getFilterState("role") - - useEffect(() => { - setItems(data.filter(({ role }) => roleFilter.value?.includes(role))) - }, [roleFilter.value]) - - return id={props.id} items={items} /> -} - -const CustomFilterBar = () => { - const filters = [ - { - id: "role", - name: "Role", - Component: ({...renderChildren}), - }, - { - id: "person", - name: "Person", - Component: , - }, - { - id: "room", - name: "Room", - Component: , - isRemovable: true, - isUsableWhen: state => state.role.value !== undefined, - }, - ] satisfies Filters - - const [values, setValues] = useState>({}) - - return filters={filters} values={values} onValuesChange={setValues} /> -} -` -SiblingValueDependentFilter.parameters = { - docs: { - source: { - code: sourceCodeSiblingValueDependentFilter, - }, - }, -} - -export const ExternalEventValuesUpdate: StoryFn = () => { - const [values, setValues] = useState>({ - flavour: "jasmine-milk-tea", - toppings: ["pearls", "fruit-jelly"], - }) - - const DateRangeParam = { - encode: dateRange => { - if (!dateRange) return undefined - return ( - encodeObject({ - from: encodeDate(dateRange?.from), - to: encodeDate(dateRange?.to), - }) ?? undefined - ) - }, - - decode: (dateRangeStr): DateRange | undefined => { - const obj = decodeObject(dateRangeStr) - return obj - ? { - from: decodeDate(obj.from) ?? undefined, - to: decodeDate(obj.to) ?? undefined, - } - : undefined - }, - } satisfies QueryParamConfig - - const paramConfigMap = { - flavour: StringParam, - toppings: ArrayParam, - deliveryDates: DateRangeParam, - drank: DateParam, - } - - const encodedQueryParams = encodeQueryParams(paramConfigMap, values) - const decodedQueryParams = decodeQueryParams( - paramConfigMap, - encodedQueryParams - ) - - return ( - <> - - filters={filters} - values={values} - onValuesChange={setValues} - /> - -
- - - -
- - Values: - {JSON.stringify(values, null, 4)} - - - queryString.stringify(encodeQueryParams(paramConfigMap, values)) - - - {queryString.stringify(encodedQueryParams)} - - - decodeQueryParams(paramConfigMap, encodedQueryParams) - - {JSON.stringify(decodedQueryParams, null, 4)} - - - ) -} diff --git a/packages/components/src/FilterBar/context/FilterBarContext.tsx b/packages/components/src/FilterBar/context/FilterBarContext.tsx deleted file mode 100644 index 0430b38..0000000 --- a/packages/components/src/FilterBar/context/FilterBarContext.tsx +++ /dev/null @@ -1,134 +0,0 @@ -import React, { useContext, useEffect, useMemo, useReducer } from "react" -import { FilterAttributes, FilterState, Filters, FiltersValues } from "../types" -import { filterBarStateReducer } from "./reducer/filterBarStateReducer" -import { setupFilterBarState } from "./reducer/setupFilterBarState" -import { ActiveFiltersArray } from "./types" -import { checkShouldUpdateValues } from "./utils/checkShouldUpdateValues" -import { getInactiveFilters } from "./utils/getInactiveFilters" -import { getMappedFilters } from "./utils/getMappedFilters" -import { getValidValue } from "./utils/getValidValue" - -export type FilterBarContextValue< - Value, - ValuesMap extends FiltersValues = Record, -> = { - getFilterState: ( - id: Id - ) => FilterState - getActiveFilterValues: () => Partial - toggleOpenFilter: ( - id: Id, - isOpen: boolean - ) => void - updateValue: ( - id: Id, - value: ValuesMap[Id] - ) => void - showFilter: (id: Id) => void - hideFilter: (id: Id) => void - getInactiveFilters: () => Array> - clearAllFilters: () => void -} - -const FilterBarContext = React.createContext | null>( - null -) - -export const useFilterBarContext = < - Value, - Values extends FiltersValues = Record, ->(): FilterBarContextValue => { - const context = useContext(FilterBarContext) - - if (!context) { - throw new Error( - "useFilterBarContext must be used within the FilterBarContext.Provider" - ) - } - - return context as FilterBarContextValue -} - -export type FilterBarProviderProps = { - children: (activeFilters: ActiveFiltersArray) => JSX.Element - filters: Filters - values: Partial - onValuesChange: (values: Partial) => void -} - -export const FilterBarProvider = ({ - children, - filters, - values, - onValuesChange, -}: FilterBarProviderProps): JSX.Element => { - const mappedFilters = useMemo(() => getMappedFilters(filters), [filters]) - - const [state, dispatch] = useReducer( - filterBarStateReducer, - setupFilterBarState(filters) - ) - - const value = { - getFilterState: (id: Id) => ({ - ...state.filters[id], - isActive: state.activeFilterIds.has(id), - value: values[id], - }), - getActiveFilterValues: () => values, - toggleOpenFilter: ( - id: Id, - isOpen: boolean - ): void => { - dispatch({ type: "update_single_filter", id, data: { isOpen } }) - }, - updateValue: ( - id: Id, - newValue: ValuesMap[Id] - ): void => { - dispatch({ - type: "update_values", - values: { ...values, [id]: getValidValue(newValue) }, - }) - }, - showFilter: (id: Id): void => - dispatch({ type: "activate_filter", id }), - hideFilter: (id: Id): void => { - dispatch({ type: "deactivate_filter", id }) - }, - getInactiveFilters: () => getInactiveFilters(state), - clearAllFilters: () => { - state.activeFilterIds.forEach(id => { - if (mappedFilters[id].isRemovable) - dispatch({ type: "deactivate_filter", id }) - }) - dispatch({ type: "update_values", values: {} }) - }, - } satisfies FilterBarContextValue - - useEffect(() => { - const shouldUpdate = - state.values === null || checkShouldUpdateValues(state, values) - if (shouldUpdate) dispatch({ type: "update_values", values: { ...values } }) - }, [values]) - - useEffect(() => { - const shouldUpdate = - state.values !== null && checkShouldUpdateValues(state, values) - if (shouldUpdate) onValuesChange({ ...state.values! }) - }, [state]) - - const activeFilters = Array.from( - state.activeFilterIds, - id => mappedFilters[id] - ) - - return ( - >} - > - {children(activeFilters)} - - ) -} diff --git a/packages/components/src/FilterBar/context/reducer/filterBarStateReducer.spec.ts b/packages/components/src/FilterBar/context/reducer/filterBarStateReducer.spec.ts deleted file mode 100644 index 784013d..0000000 --- a/packages/components/src/FilterBar/context/reducer/filterBarStateReducer.spec.ts +++ /dev/null @@ -1,65 +0,0 @@ -import { FilterBarState } from "../types" -import { filterBarStateReducer } from "./filterBarStateReducer" - -type Values = { - flavour: string - sugarLevel: number -} - -const stateFilters = { - flavour: { - id: "flavour", - name: "Flavour", - isRemovable: false, - isOpen: false, - isUsable: true, - }, - sugarLevel: { - id: "sugarLevel", - name: "Sugar Level", - isRemovable: false, - isOpen: false, - isUsable: true, - }, -} satisfies FilterBarState["filters"] - -describe("filterBarStateReducer", () => { - describe("filterBarStateReducer: activate_filter", () => { - it("sets a filter to active", () => { - const state = { - filters: stateFilters, - activeFilterIds: new Set(["flavour"]), - values: {}, - dependentFilterIds: new Set(), - } satisfies FilterBarState - - const newState = filterBarStateReducer(state, { - type: "activate_filter", - id: "sugarLevel", - }) - - expect(newState.activeFilterIds).toEqual( - new Set(["flavour", "sugarLevel"]) - ) - }) - }) - - describe("filterBarStateReducer: deactivate_filter", () => { - it("sets a filter to inactive and clears value", () => { - const state = { - filters: stateFilters, - activeFilterIds: new Set(["flavour"]), - values: { flavour: "jasmine" }, - dependentFilterIds: new Set(), - } satisfies FilterBarState - - const newState = filterBarStateReducer(state, { - type: "deactivate_filter", - id: "flavour", - }) - - expect(newState.activeFilterIds).toEqual(new Set()) - expect(newState.values!.flavour).toBeUndefined() - }) - }) -}) diff --git a/packages/components/src/FilterBar/context/reducer/filterBarStateReducer.ts b/packages/components/src/FilterBar/context/reducer/filterBarStateReducer.ts deleted file mode 100644 index 1a0a79e..0000000 --- a/packages/components/src/FilterBar/context/reducer/filterBarStateReducer.ts +++ /dev/null @@ -1,40 +0,0 @@ -import { FiltersValues } from "../../types" -import { FilterBarState, FilterStateEditableAttributes } from "../types" -import { updateDependentFilters } from "../utils/updateDependentFilters" -import { updateSingleFilter } from "./updateSingleFilter" -import { updateValues } from "./updateValues" - -type Actions = - | { type: "update_values"; values: Partial } - | { - type: "update_single_filter" - id: keyof ValuesMap - data: Partial - } - | { type: "activate_filter"; id: keyof ValuesMap } - | { type: "deactivate_filter"; id: keyof ValuesMap } - -export const filterBarStateReducer = ( - state: FilterBarState, - action: Actions -): FilterBarState => { - switch (action.type) { - case "update_values": - return { ...updateValues(state, action.values) } - - case "update_single_filter": - return { - ...state, - filters: updateSingleFilter(state, action.id, action.data), - } - - case "activate_filter": - state.activeFilterIds.add(action.id) - return { ...updateDependentFilters(state) } - - case "deactivate_filter": - state.activeFilterIds.delete(action.id) - state.values![action.id] = undefined - return { ...updateDependentFilters(state) } - } -} diff --git a/packages/components/src/FilterBar/context/reducer/setupFilterBarState.spec.tsx b/packages/components/src/FilterBar/context/reducer/setupFilterBarState.spec.tsx deleted file mode 100644 index 767bfb0..0000000 --- a/packages/components/src/FilterBar/context/reducer/setupFilterBarState.spec.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import React from "react" -import { Filters } from "../../types" -import { setupFilterBarState } from "./setupFilterBarState" - -type Values = { - flavour: string - sugarLevel: number -} - -const filters = [ - { id: "flavour", name: "Flavour", Component:
}, - { - id: "sugarLevel", - name: "Sugar Level", - Component:
, - isRemovable: true, - }, -] satisfies Filters - -describe("setupFilterBarState()", () => { - it("sets up the base state correctly", () => { - expect(setupFilterBarState(filters)).toEqual({ - filters: { - flavour: { - id: "flavour", - name: "Flavour", - isRemovable: false, - isOpen: false, - isUsable: true, - }, - sugarLevel: { - id: "sugarLevel", - name: "Sugar Level", - isRemovable: true, - isOpen: false, - isUsable: true, - }, - }, - activeFilterIds: new Set(), - values: null, - dependentFilterIds: new Set(), - }) - }) - - describe("Dependent filters", () => { - const filtersDependent = [ - { id: "flavour", name: "Flavour", Component:
}, - { - id: "sugarLevel", - name: "Sugar Level", - Component:
, - isUsableWhen: state => state.flavour.value !== undefined, - }, - ] satisfies Filters - - it("correctly sets up base for dependent filters", () => { - const state = setupFilterBarState(filtersDependent) - expect(state.filters.sugarLevel.isUsable).toBe(null) - expect(state.dependentFilterIds).toEqual(new Set(["sugarLevel"])) - }) - }) -}) diff --git a/packages/components/src/FilterBar/context/reducer/setupFilterBarState.ts b/packages/components/src/FilterBar/context/reducer/setupFilterBarState.ts deleted file mode 100644 index 899e327..0000000 --- a/packages/components/src/FilterBar/context/reducer/setupFilterBarState.ts +++ /dev/null @@ -1,41 +0,0 @@ -import { Filters, FiltersValues } from "../../types" -import { FilterBarState } from "../types" - -export const setupFilterBarState = ( - filters: Filters -): FilterBarState => { - const state = filters.reduce>( - (baseState, { id, name, isRemovable, isUsableWhen }) => { - const hasDependency = isUsableWhen !== undefined - - baseState.filters[id] = { - id, - name, - isRemovable: isRemovable ?? false, - isUsableWhen, - isOpen: false, - // A dependent filter is set to `null` here as it - // will be re-evaluated in the `update_values` dispatch action. - isUsable: hasDependency ? null : true, - } - - if (hasDependency) { - baseState.dependentFilterIds.add(id) - } - - return baseState - }, - { - filters: {}, - // These will be set by the `update_values` dispatch action. - activeFilterIds: new Set(), - // To prevent an infinite loop calculating dependent filters, - // `values` is set to `null` and default values will be - // set by the `update_values` dispatch action. - values: null, - dependentFilterIds: new Set(), - } as FilterBarState - ) - - return state -} diff --git a/packages/components/src/FilterBar/context/reducer/updateSingleFilter.spec.ts b/packages/components/src/FilterBar/context/reducer/updateSingleFilter.spec.ts deleted file mode 100644 index d1c3b66..0000000 --- a/packages/components/src/FilterBar/context/reducer/updateSingleFilter.spec.ts +++ /dev/null @@ -1,62 +0,0 @@ -import { FilterBarState } from "../types" -import { filterBarStateReducer } from "./filterBarStateReducer" - -type Values = { - flavour: string - sugarLevel: number -} - -const stateFilters = { - flavour: { - id: "flavour", - name: "Flavour", - isRemovable: false, - isOpen: false, - isUsable: true, - }, - sugarLevel: { - id: "sugarLevel", - name: "Sugar Level", - isRemovable: false, - isOpen: false, - isUsable: true, - }, -} satisfies FilterBarState["filters"] - -describe("filterBarStateReducer: update_single_filter", () => { - it("returns all filters when updating a single filter", () => { - const state = { - filters: stateFilters, - activeFilterIds: new Set(["flavour"]), - values: {}, - dependentFilterIds: new Set(), - } satisfies FilterBarState - - const newState = filterBarStateReducer(state, { - type: "update_single_filter", - id: "flavour", - data: {}, - }) - - expect(newState.filters).toEqual(stateFilters) - }) - - it("updates state of a single filter", () => { - const state = { - filters: stateFilters, - activeFilterIds: new Set(["flavour"]), - values: {}, - dependentFilterIds: new Set(), - } satisfies FilterBarState - - expect(state.filters.flavour.isOpen).toBe(false) - - const newState = filterBarStateReducer(state, { - type: "update_single_filter", - id: "flavour", - data: { isOpen: true }, - }) - - expect(newState.filters.flavour.isOpen).toBe(true) - }) -}) diff --git a/packages/components/src/FilterBar/context/reducer/updateSingleFilter.ts b/packages/components/src/FilterBar/context/reducer/updateSingleFilter.ts deleted file mode 100644 index 430da44..0000000 --- a/packages/components/src/FilterBar/context/reducer/updateSingleFilter.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { FiltersValues } from "../../types" -import { - FilterBarState, - FilterBarStateFilters, - FilterStateEditableAttributes, -} from "../types" - -export const updateSingleFilter = ( - state: FilterBarState, - id: keyof ValuesMap, - data: Partial -): FilterBarStateFilters => ({ - ...state.filters, - [id]: { ...state.filters[id], ...data }, -}) diff --git a/packages/components/src/FilterBar/context/reducer/updateValues.spec.ts b/packages/components/src/FilterBar/context/reducer/updateValues.spec.ts deleted file mode 100644 index 7df3f65..0000000 --- a/packages/components/src/FilterBar/context/reducer/updateValues.spec.ts +++ /dev/null @@ -1,158 +0,0 @@ -import { FilterBarState } from "../types" -import { filterBarStateReducer } from "./filterBarStateReducer" - -type Values = { - flavour: string - sugarLevel: number -} - -const stateFilters = { - flavour: { - id: "flavour", - name: "Flavour", - isRemovable: false, - isOpen: false, - isUsable: true, - }, - sugarLevel: { - id: "sugarLevel", - name: "Sugar Level", - isRemovable: false, - isOpen: false, - isUsable: true, - }, -} satisfies FilterBarState["filters"] - -describe("filterBarStateReducer: update_values", () => { - describe("Removable filters", () => { - it("adds a removable filter with a value to active filters", () => { - const state = { - filters: { - flavour: stateFilters.flavour, - sugarLevel: { ...stateFilters.sugarLevel, isRemovable: true }, - }, - activeFilterIds: new Set(["flavour"]), - values: {}, - dependentFilterIds: new Set(), - } satisfies FilterBarState - - const newState = filterBarStateReducer(state, { - type: "update_values", - values: { sugarLevel: 50 }, - }) - - expect(newState.activeFilterIds).toEqual( - new Set(["flavour", "sugarLevel"]) - ) - expect(newState.values).toEqual({ sugarLevel: 50 }) - }) - }) - - describe("Dependent filters", () => { - describe("Not usable", () => { - it("clears an unusable filter with a value", () => { - const state = { - filters: { - flavour: stateFilters.flavour, - sugarLevel: { - ...stateFilters.sugarLevel, - isUsableWhen: ({ flavour }) => flavour.value !== undefined, - }, - }, - activeFilterIds: new Set(["flavour"]), - values: { sugarLevel: 50 }, - dependentFilterIds: new Set(["sugarLevel"]), - } satisfies FilterBarState - - const newState = filterBarStateReducer(state, { - type: "update_values", - values: { sugarLevel: 50 }, - }) - - expect(newState.filters.sugarLevel.isUsable).toBe(false) - expect(newState.activeFilterIds).toEqual(new Set(["flavour"])) - expect(newState.values).toEqual({}) - }) - }) - - describe("Usable", () => { - it("activates a non-removable usable filter", () => { - const state = { - filters: { - flavour: stateFilters.flavour, - sugarLevel: { - ...stateFilters.sugarLevel, - isUsableWhen: ({ flavour }) => flavour.value !== undefined, - }, - }, - activeFilterIds: new Set(["flavour"]), - values: {}, - dependentFilterIds: new Set(["sugarLevel"]), - } satisfies FilterBarState - - const newState = filterBarStateReducer(state, { - type: "update_values", - values: { flavour: "jasmine", sugarLevel: 50 }, - }) - - expect(newState.filters.sugarLevel.isUsable).toBe(true) - expect(newState.activeFilterIds).toEqual( - new Set(["flavour", "sugarLevel"]) - ) - expect(newState.values).toEqual({ flavour: "jasmine", sugarLevel: 50 }) - }) - - it("does not activate a removable filter without a value", () => { - const state = { - filters: { - flavour: stateFilters.flavour, - sugarLevel: { - ...stateFilters.sugarLevel, - isRemovable: true, - isUsableWhen: ({ flavour }) => flavour.value !== undefined, - }, - }, - activeFilterIds: new Set(["flavour"]), - values: {}, - dependentFilterIds: new Set(["sugarLevel"]), - } satisfies FilterBarState - - const newState = filterBarStateReducer(state, { - type: "update_values", - values: { flavour: "jasmine" }, - }) - - expect(newState.filters.sugarLevel.isUsable).toBe(true) - expect(newState.activeFilterIds).toEqual(new Set(["flavour"])) - expect(newState.values).toEqual({ flavour: "jasmine" }) - }) - - it("activates a removable filter with a value", () => { - const state = { - filters: { - flavour: stateFilters.flavour, - sugarLevel: { - ...stateFilters.sugarLevel, - isRemovable: true, - isUsableWhen: ({ flavour }) => flavour.value !== undefined, - }, - }, - activeFilterIds: new Set(["flavour"]), - values: {}, - dependentFilterIds: new Set(["sugarLevel"]), - } satisfies FilterBarState - - const newState = filterBarStateReducer(state, { - type: "update_values", - values: { flavour: "jasmine", sugarLevel: 50 }, - }) - - expect(newState.filters.sugarLevel.isUsable).toBe(true) - expect(newState.activeFilterIds).toEqual( - new Set(["flavour", "sugarLevel"]) - ) - expect(newState.values).toEqual({ flavour: "jasmine", sugarLevel: 50 }) - }) - }) - }) -}) diff --git a/packages/components/src/FilterBar/context/reducer/updateValues.ts b/packages/components/src/FilterBar/context/reducer/updateValues.ts deleted file mode 100644 index 10d6b9c..0000000 --- a/packages/components/src/FilterBar/context/reducer/updateValues.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { FiltersValues } from "../../types" -import { FilterBarState } from "../types" -import { updateDependentFilters } from "../utils/updateDependentFilters" - -export const updateValues = ( - state: FilterBarState, - values: Partial -): FilterBarState => { - Object.values(state.filters).forEach(({ id, isRemovable, isUsable }) => { - if (isUsable && (!isRemovable || values[id] !== undefined)) { - state.activeFilterIds.add(id) - } - }) - - return updateDependentFilters({ ...state, values }) -} diff --git a/packages/components/src/FilterBar/context/types.ts b/packages/components/src/FilterBar/context/types.ts deleted file mode 100644 index 50ca3fc..0000000 --- a/packages/components/src/FilterBar/context/types.ts +++ /dev/null @@ -1,38 +0,0 @@ -import { FilterAttributes, FilterIsUsableWhen, FiltersValues } from "../types" - -export type MappedFilters = { - [K in keyof ValuesMap]: FilterAttributes -} - -export type FilterStateEditableAttributes = { - isOpen: boolean -} - -export type InternalFilterState< - ValuesMap extends FiltersValues, - Id extends keyof ValuesMap, -> = { - id: Id - name: string - isRemovable: boolean - isUsableWhen?: FilterIsUsableWhen - isUsable: boolean | null - isOpen: boolean - value?: never - isActive?: never -} - -export type FilterBarStateFilters = { - [K in keyof ValuesMap]: InternalFilterState -} - -export type FilterBarState = { - filters: FilterBarStateFilters - activeFilterIds: Set - values: Partial | null - dependentFilterIds: Set -} - -export type ActiveFiltersArray = Array< - FilterAttributes -> diff --git a/packages/components/src/FilterBar/context/utils/checkShouldUpdateValues.spec.ts b/packages/components/src/FilterBar/context/utils/checkShouldUpdateValues.spec.ts deleted file mode 100644 index de92759..0000000 --- a/packages/components/src/FilterBar/context/utils/checkShouldUpdateValues.spec.ts +++ /dev/null @@ -1,69 +0,0 @@ -import { FilterBarState } from "../types" -import { checkShouldUpdateValues } from "./checkShouldUpdateValues" - -type Values = { - flavour: string - toppings: string[] -} - -const state = { - filters: { - flavour: { - id: "flavour", - name: "Flavour", - isRemovable: false, - isOpen: false, - isUsable: true, - }, - toppings: { - id: "toppings", - name: "Toppings", - isOpen: false, - isRemovable: true, - isUsable: true, - }, - }, - activeFilterIds: new Set(["flavour"]), - values: {}, - dependentFilterIds: new Set(), -} satisfies FilterBarState - -describe("checkShouldUpdateValues()", () => { - it("is true when the values do not match", () => { - const result = checkShouldUpdateValues( - { ...state, values: { flavour: "jasmine" } }, - { flavour: "jasmine", toppings: ["pearls"] } - ) - - expect(result).toBe(true) - }) - - it("is false when the values match", () => { - const result = checkShouldUpdateValues( - { ...state, values: { flavour: "jasmine" } }, - { flavour: "jasmine" } - ) - - expect(result).toBe(false) - }) - - describe("Arrays", () => { - it("is true when the array values do not match", () => { - const result = checkShouldUpdateValues( - { ...state, values: { toppings: ["pearls"] } }, - { toppings: ["jelly"] } - ) - - expect(result).toBe(true) - }) - - it("is false when the array values match", () => { - const result = checkShouldUpdateValues( - { ...state, values: { toppings: ["pearls"] } }, - { toppings: ["pearls"] } - ) - - expect(result).toBe(false) - }) - }) -}) diff --git a/packages/components/src/FilterBar/context/utils/checkShouldUpdateValues.ts b/packages/components/src/FilterBar/context/utils/checkShouldUpdateValues.ts deleted file mode 100644 index d4249bf..0000000 --- a/packages/components/src/FilterBar/context/utils/checkShouldUpdateValues.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { FiltersValues } from "~components/FilterBar/types" -import { FilterBarState } from "../types" - -const checkArraysMatch = (a1: any[], a2: any[]): boolean => { - if (a1.length !== a2.length) return false - return a1.every((v, i) => v === a2[i]) -} - -export const checkShouldUpdateValues = ( - state: FilterBarState, - values: Partial -): boolean => - Object.values(state.filters).some(({ id }) => { - const stateValue = state.values![id] - const value = values[id] - - if (Array.isArray(stateValue) && Array.isArray(value)) { - return !checkArraysMatch(stateValue, value) - } - - return stateValue !== value - }) diff --git a/packages/components/src/FilterBar/context/utils/getInactiveFilters.spec.ts b/packages/components/src/FilterBar/context/utils/getInactiveFilters.spec.ts deleted file mode 100644 index c37d42b..0000000 --- a/packages/components/src/FilterBar/context/utils/getInactiveFilters.spec.ts +++ /dev/null @@ -1,66 +0,0 @@ -import { FilterBarState } from "../types" -import { getInactiveFilters } from "./getInactiveFilters" - -type Values = { - flavour: string - sugarLevel: number -} - -const stateFilters = { - flavour: { - id: "flavour", - name: "Flavour", - isRemovable: false, - isOpen: false, - isUsable: true, - }, - sugarLevel: { - id: "sugarLevel", - name: "Sugar Level", - isOpen: false, - isRemovable: true, - isUsable: true, - }, -} satisfies FilterBarState["filters"] - -describe("getInactiveFilters()", () => { - it("only fetches inactive filters", () => { - const state = { - filters: stateFilters, - activeFilterIds: new Set(["flavour"]), - values: {}, - dependentFilterIds: new Set(), - } satisfies FilterBarState - - expect(getInactiveFilters(state)).toEqual([ - { - id: "sugarLevel", - name: "Sugar Level", - isOpen: false, - isRemovable: true, - isUsable: true, - }, - ]) - }) - - it("fetches only usable inactive filters", () => { - const state = { - filters: { - flavour: stateFilters["flavour"], - sugarLevel: { - id: "sugarLevel", - name: "Sugar Level", - isRemovable: false, - isOpen: false, - isUsable: false, - isUsableWhen: () => false, - }, - }, - activeFilterIds: new Set(), - values: {}, - dependentFilterIds: new Set(["sugarLevel"]), - } satisfies FilterBarState - - expect(getInactiveFilters(state)).toEqual([stateFilters.flavour]) - }) -}) diff --git a/packages/components/src/FilterBar/context/utils/getInactiveFilters.ts b/packages/components/src/FilterBar/context/utils/getInactiveFilters.ts deleted file mode 100644 index a32df7d..0000000 --- a/packages/components/src/FilterBar/context/utils/getInactiveFilters.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { FilterAttributes, FiltersValues } from "../../types" -import { FilterBarState } from "../types" - -export const getInactiveFilters = ({ - filters, - activeFilterIds, -}: FilterBarState): Array> => - Object.values(filters).filter( - ({ id, isUsable }) => isUsable && !activeFilterIds.has(id) - ) diff --git a/packages/components/src/FilterBar/context/utils/getIsUsableWhenArgs.spec.ts b/packages/components/src/FilterBar/context/utils/getIsUsableWhenArgs.spec.ts deleted file mode 100644 index 1b3bc82..0000000 --- a/packages/components/src/FilterBar/context/utils/getIsUsableWhenArgs.spec.ts +++ /dev/null @@ -1,50 +0,0 @@ -import { FilterBarState } from "../types" -import { getIsUsableWhenArgs } from "./getIsUsableWhenArgs" - -type Values = { - flavour: string - sugarLevel: number -} - -const stateFilters = { - flavour: { - id: "flavour", - name: "Flavour", - isRemovable: false, - isOpen: false, - isUsable: true, - }, - sugarLevel: { - id: "sugarLevel", - name: "Sugar Level", - isOpen: false, - isRemovable: true, - isUsable: true, - }, -} satisfies FilterBarState["filters"] - -describe("getIsUsableWhenArgs()", () => { - it("returns args compatible with dependent filter conditions", () => { - const state = { - filters: stateFilters, - activeFilterIds: new Set(["flavour"]), - values: { flavour: "jasmine" }, - dependentFilterIds: new Set(), - } satisfies FilterBarState - - const usableArgs = getIsUsableWhenArgs(state) - - expect(usableArgs.flavour).toEqual({ - id: "flavour", - name: "Flavour", - isActive: true, - value: "jasmine", - }) - expect(usableArgs.sugarLevel).toEqual({ - id: "sugarLevel", - name: "Sugar Level", - isActive: false, - value: undefined, - }) - }) -}) diff --git a/packages/components/src/FilterBar/context/utils/getIsUsableWhenArgs.ts b/packages/components/src/FilterBar/context/utils/getIsUsableWhenArgs.ts deleted file mode 100644 index b4a4423..0000000 --- a/packages/components/src/FilterBar/context/utils/getIsUsableWhenArgs.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { SourceFiltersState, FiltersValues } from "../../types" -import { FilterBarState, InternalFilterState } from "../types" - -export const getIsUsableWhenArgs = ({ - filters, - activeFilterIds, - values, -}: FilterBarState): SourceFiltersState => - Object.values(filters).reduce>( - (acc, { id, name }: InternalFilterState) => { - acc[id] = { - id, - name, - isActive: activeFilterIds.has(id), - value: values![id], - } - return acc - }, - {} as SourceFiltersState - ) diff --git a/packages/components/src/FilterBar/context/utils/getMappedFilters.spec.tsx b/packages/components/src/FilterBar/context/utils/getMappedFilters.spec.tsx deleted file mode 100644 index d17c7ee..0000000 --- a/packages/components/src/FilterBar/context/utils/getMappedFilters.spec.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import React from "react" -import { Filters } from "../../types" -import { getMappedFilters } from "./getMappedFilters" - -type Values = { - flavour: string - sugarLevel: number -} - -const filters = [ - { id: "flavour", name: "Flavour", Component:
}, - { - id: "sugarLevel", - name: "Sugar Level", - Component:
, - isRemovable: true, - }, -] satisfies Filters - -describe("getMappedFilters()", () => { - it("sets up the base state correctly", () => { - expect(getMappedFilters(filters)).toEqual({ - flavour: { id: "flavour", name: "Flavour", Component:
}, - sugarLevel: { - id: "sugarLevel", - name: "Sugar Level", - Component:
, - isRemovable: true, - }, - }) - }) -}) diff --git a/packages/components/src/FilterBar/context/utils/getMappedFilters.ts b/packages/components/src/FilterBar/context/utils/getMappedFilters.ts deleted file mode 100644 index c4fe8f4..0000000 --- a/packages/components/src/FilterBar/context/utils/getMappedFilters.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { Filters, FiltersValues } from "../../types" -import { MappedFilters } from "../types" - -export const getMappedFilters = ( - filters: Filters -): MappedFilters => - filters.reduce>( - (acc, filter) => ({ ...acc, [filter.id]: filter }), - {} as MappedFilters - ) diff --git a/packages/components/src/FilterBar/context/utils/getValidValue.spec.ts b/packages/components/src/FilterBar/context/utils/getValidValue.spec.ts deleted file mode 100644 index c5462ad..0000000 --- a/packages/components/src/FilterBar/context/utils/getValidValue.spec.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { getValidValue } from "./getValidValue" - -describe("getValidValue()", () => { - describe("Object", () => { - it("returns value when not empty", () => { - const value = { coffee: "latte" } - expect(getValidValue(value)).toEqual(value) - }) - - it("returns undefined when object is empty", () => { - expect(getValidValue({})).toBeUndefined() - }) - }) - - describe("Array", () => { - it("returns value when not empty", () => { - const value = ["coffee"] - expect(getValidValue(value)).toEqual(value) - }) - - it("returns undefined when array is empty", () => { - expect(getValidValue([])).toBeUndefined() - }) - }) - - it("returns value when not an object or array", () => { - expect(getValidValue(undefined)).toBe(undefined) - expect(getValidValue(null)).toBe(null) - expect(getValidValue("")).toBe("") - expect(getValidValue(0)).toBe(0) - }) -}) diff --git a/packages/components/src/FilterBar/context/utils/getValidValue.ts b/packages/components/src/FilterBar/context/utils/getValidValue.ts deleted file mode 100644 index c92e299..0000000 --- a/packages/components/src/FilterBar/context/utils/getValidValue.ts +++ /dev/null @@ -1,8 +0,0 @@ -export const getValidValue = (value: Value): Value | undefined => { - if (typeof value === "object" && JSON.stringify(value) === "{}") - return undefined - - if (Array.isArray(value) && value.length === 0) return undefined - - return value -} diff --git a/packages/components/src/FilterBar/context/utils/updateDependentFilters.spec.ts b/packages/components/src/FilterBar/context/utils/updateDependentFilters.spec.ts deleted file mode 100644 index afcdf5d..0000000 --- a/packages/components/src/FilterBar/context/utils/updateDependentFilters.spec.ts +++ /dev/null @@ -1,180 +0,0 @@ -import { FilterBarState } from "../types" -import { updateDependentFilters } from "./updateDependentFilters" - -const sugarLevelIsUsableWhen = jest.fn( - state => state.flavour.value !== undefined -) - -type Values = { - flavour: string - sugarLevel: number -} - -const stateFilters = { - flavour: { - id: "flavour", - name: "Flavour", - isRemovable: false, - isOpen: false, - isUsable: true, - }, - sugarLevel: { - id: "sugarLevel", - name: "Sugar Level", - isRemovable: false, - isOpen: false, - isUsable: true, - isUsableWhen: sugarLevelIsUsableWhen, - }, -} satisfies FilterBarState["filters"] - -describe("updateDependentFilters()", () => { - afterEach(() => { - sugarLevelIsUsableWhen.mockClear() - }) - - it("returns unchanged state if there are no dependent filters", () => { - const state = { - filters: stateFilters, - activeFilterIds: new Set(["flavour"]), - values: { flavour: "jasmine" }, - dependentFilterIds: new Set(), - } satisfies FilterBarState - - const newState = updateDependentFilters(state) - - expect(sugarLevelIsUsableWhen).not.toHaveBeenCalled() - expect(newState).toEqual(state) - }) - - it("does not update a dependent filter if the usable state has not changed", () => { - const state = { - filters: stateFilters, - activeFilterIds: new Set(["flavour"]), - values: { flavour: "jasmine" }, - dependentFilterIds: new Set(["sugarLevel"]), - } satisfies FilterBarState - - const newState = updateDependentFilters(state) - - expect(sugarLevelIsUsableWhen).toBeCalledTimes(1) - expect(sugarLevelIsUsableWhen).toHaveReturnedWith( - stateFilters.sugarLevel.isUsable - ) - expect(newState).toEqual(state) - }) - - it("checks dependent filters again if a change has occurred (for multi-level dependencies)", () => { - const state = { - filters: { - flavour: stateFilters.flavour, - sugarLevel: { - ...stateFilters.sugarLevel, - isUsable: false, - }, - }, - activeFilterIds: new Set(["flavour"]), - values: { flavour: "jasmine" }, - dependentFilterIds: new Set(["sugarLevel"]), - } satisfies FilterBarState - - updateDependentFilters(state) - expect(sugarLevelIsUsableWhen).toBeCalledTimes(2) - expect(sugarLevelIsUsableWhen).toHaveReturnedWith(true) - }) - - describe("Update to usable", () => { - it("updates the filter usable state", () => { - const state = { - filters: { - flavour: stateFilters.flavour, - sugarLevel: { - ...stateFilters.sugarLevel, - isUsable: false, - }, - }, - activeFilterIds: new Set(["flavour"]), - values: { flavour: "jasmine" }, - dependentFilterIds: new Set(["sugarLevel"]), - } satisfies FilterBarState - - const newState = updateDependentFilters(state) - expect(newState.filters.sugarLevel.isUsable).toBe(true) - }) - - it("activates the filter if it is not removable", () => { - const state = { - filters: { - flavour: stateFilters.flavour, - sugarLevel: { - ...stateFilters.sugarLevel, - isUsable: false, - }, - }, - activeFilterIds: new Set(["flavour"]), - values: { flavour: "jasmine" }, - dependentFilterIds: new Set(["sugarLevel"]), - } satisfies FilterBarState - - const newState = updateDependentFilters(state) - expect(newState.activeFilterIds).toEqual( - new Set(["flavour", "sugarLevel"]) - ) - }) - - it("activates the filter if it is removable but has a value", () => { - const state = { - filters: { - flavour: stateFilters.flavour, - sugarLevel: { - ...stateFilters.sugarLevel, - isUsable: false, - isRemovable: true, - }, - }, - activeFilterIds: new Set(["flavour"]), - values: { flavour: "jasmine", sugarLevel: 50 }, - dependentFilterIds: new Set(["sugarLevel"]), - } satisfies FilterBarState - - const newState = updateDependentFilters(state) - expect(newState.activeFilterIds).toEqual( - new Set(["flavour", "sugarLevel"]) - ) - }) - - it("does not activate the filter if it is removable without a value", () => { - const state = { - filters: { - flavour: stateFilters.flavour, - sugarLevel: { - ...stateFilters.sugarLevel, - isUsable: false, - isRemovable: true, - }, - }, - activeFilterIds: new Set(["flavour"]), - values: { flavour: "jasmine" }, - dependentFilterIds: new Set(["sugarLevel"]), - } satisfies FilterBarState - - const newState = updateDependentFilters(state) - expect(newState.activeFilterIds).toEqual(new Set(["flavour"])) - }) - }) - - describe("Update to unusable", () => { - it("updates the filter usable state and clears the value", () => { - const state = { - filters: stateFilters, - activeFilterIds: new Set(["flavour"]), - values: { sugarLevel: 50 }, - dependentFilterIds: new Set(["sugarLevel"]), - } satisfies FilterBarState - - const newState = updateDependentFilters(state) - expect(newState.filters.sugarLevel.isUsable).toBe(false) - expect(newState.values).toEqual({}) - }) - }) -}) diff --git a/packages/components/src/FilterBar/context/utils/updateDependentFilters.ts b/packages/components/src/FilterBar/context/utils/updateDependentFilters.ts deleted file mode 100644 index 14a5641..0000000 --- a/packages/components/src/FilterBar/context/utils/updateDependentFilters.ts +++ /dev/null @@ -1,37 +0,0 @@ -import { FiltersValues } from "../../types" -import { FilterBarState } from "../types" -import { getIsUsableWhenArgs } from "./getIsUsableWhenArgs" - -export const updateDependentFilters = ( - state: FilterBarState -): FilterBarState => { - if (state.dependentFilterIds.size === 0) return state - - let hasChange = false - - const args = getIsUsableWhenArgs(state) - - Array.from(state.dependentFilterIds).forEach(id => { - const isUsable = state.filters[id].isUsableWhen!(args) - - const shouldUpdate = state.filters[id].isUsable !== isUsable - if (!shouldUpdate) return - - hasChange = true - state.filters[id].isUsable = isUsable - - if (!isUsable) { - state.activeFilterIds.delete(id) - state.values![id] = undefined - return - } - - if (!state.filters[id].isRemovable || state.values![id] !== undefined) { - state.activeFilterIds.add(id) - } - }) - - if (hasChange) updateDependentFilters(state) - - return state -} diff --git a/packages/components/src/FilterBar/index.ts b/packages/components/src/FilterBar/index.ts deleted file mode 100644 index 1a6941d..0000000 --- a/packages/components/src/FilterBar/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -export * from "./FilterBar" -export * from "./context/FilterBarContext" -export * from "./context/types" -export * from "./types" diff --git a/packages/components/src/FilterBar/subcomponents/AddFiltersMenu/AddFiltersMenu.spec.tsx b/packages/components/src/FilterBar/subcomponents/AddFiltersMenu/AddFiltersMenu.spec.tsx deleted file mode 100644 index e6cc1db..0000000 --- a/packages/components/src/FilterBar/subcomponents/AddFiltersMenu/AddFiltersMenu.spec.tsx +++ /dev/null @@ -1,84 +0,0 @@ -import React from "react" -import { render, waitFor } from "@testing-library/react" -import userEvent from "@testing-library/user-event" -import { - FilterBarProvider, - FilterBarProviderProps, -} from "../../context/FilterBarContext" -import { Filters } from "../../types" -import { AddFiltersMenu } from "./AddFiltersMenu" - -const user = userEvent.setup() - -type Values = { - coffee: string - tea: string - milk: string -} - -const AddFiltersMenuWrapper = ({ - filters, -}: { - filters: FilterBarProviderProps["filters"] -}): JSX.Element => ( - - filters={filters} - values={{}} - onValuesChange={() => undefined} - > - {() => } - -) - -describe("", () => { - it("shows inactive filters", async () => { - const filters = [ - { - id: "coffee", - name: "Coffee", - Component:
, - isRemovable: true, - }, - { - id: "tea", - name: "Tea", - Component:
, - }, - { - id: "milk", - name: "Milk", - Component:
, - isRemovable: true, - }, - ] satisfies Filters - - const { getByRole, queryByRole } = render( - - ) - - const addFiltersButton = getByRole("button", { name: "Add Filters" }) - await user.click(addFiltersButton) - - await waitFor(() => { - expect(getByRole("list")).toBeVisible() - }) - expect(getByRole("button", { name: "Coffee" })).toBeVisible() - expect(queryByRole("button", { name: "Tea" })).not.toBeInTheDocument() - expect(getByRole("button", { name: "Milk" })).toBeVisible() - }) - - it("disables the Add Filters button when there are no inactive filters", () => { - const filters = [ - { - id: "coffee", - name: "Coffee", - Component:
, - }, - ] satisfies Filters - - const { getByRole } = render() - - const addFiltersButton = getByRole("button", { name: "Add Filters" }) - expect(addFiltersButton).toBeDisabled() - }) -}) diff --git a/packages/components/src/FilterBar/subcomponents/AddFiltersMenu/AddFiltersMenu.tsx b/packages/components/src/FilterBar/subcomponents/AddFiltersMenu/AddFiltersMenu.tsx deleted file mode 100644 index c34080e..0000000 --- a/packages/components/src/FilterBar/subcomponents/AddFiltersMenu/AddFiltersMenu.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import React from "react" -import { Menu, MenuList, MenuItem } from "@kaizen/draft-menu" -import { Button } from "~components/Button" -import { AddIcon } from "~components/SVG/icons/AddIcon" -import { useFilterBarContext } from "../../context/FilterBarContext" - -export const AddFiltersMenu = (): JSX.Element => { - const { getInactiveFilters, showFilter } = useFilterBarContext() - const inactiveFilters = getInactiveFilters() - - return ( - } - /> - } - > - - {inactiveFilters.map(({ id, name }) => ( - showFilter(id)} - /> - ))} - - - ) -} - -AddFiltersMenu.displayName = "FilterBar.AddFiltersMenu" diff --git a/packages/components/src/FilterBar/subcomponents/AddFiltersMenu/index.ts b/packages/components/src/FilterBar/subcomponents/AddFiltersMenu/index.ts deleted file mode 100644 index 9e17294..0000000 --- a/packages/components/src/FilterBar/subcomponents/AddFiltersMenu/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./AddFiltersMenu" diff --git a/packages/components/src/FilterBar/subcomponents/ClearAllButton/ClearAllButton.module.scss b/packages/components/src/FilterBar/subcomponents/ClearAllButton/ClearAllButton.module.scss deleted file mode 100644 index a795bd9..0000000 --- a/packages/components/src/FilterBar/subcomponents/ClearAllButton/ClearAllButton.module.scss +++ /dev/null @@ -1,3 +0,0 @@ -.clearAllButton { - white-space: nowrap; -} diff --git a/packages/components/src/FilterBar/subcomponents/ClearAllButton/ClearAllButton.tsx b/packages/components/src/FilterBar/subcomponents/ClearAllButton/ClearAllButton.tsx deleted file mode 100644 index 5d436fd..0000000 --- a/packages/components/src/FilterBar/subcomponents/ClearAllButton/ClearAllButton.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import React from "react" -import { Button } from "~components/Button" -import { useFilterBarContext } from "../../context/FilterBarContext" -import styles from "./ClearAllButton.module.scss" - -export const ClearAllButton = (): JSX.Element => { - const { clearAllFilters } = useFilterBarContext() - - return ( - - - ) - } - - render() - - await user.click(screen.getByText("Click me")) - expect(onClick).toBeCalledWith( - "test__trigger-button", - "test__remove-button" - ) - }) - }) -}) diff --git a/packages/components/src/FilterButton/FilterButtonRemovable/FilterButtonRemovable.tsx b/packages/components/src/FilterButton/FilterButtonRemovable/FilterButtonRemovable.tsx deleted file mode 100644 index 30e2ef0..0000000 --- a/packages/components/src/FilterButton/FilterButtonRemovable/FilterButtonRemovable.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import React, { forwardRef } from "react" -import { Tooltip } from "@kaizen/draft-tooltip" -import { ClearIcon } from "~icons/ClearIcon" -import { DataAttributes } from "~types/DataAttributes" -import { isRefObject } from "~utils/isRefObject" -import { ButtonGroup, ButtonGroupProps } from "../../ButtonGroup" -import { FilterTriggerRef } from "../../Filter" -import { FilterButton, FilterButtonProps } from "../FilterButton" - -import { - FilterButtonBase, - FilterButtonBaseProps, -} from "../_subcomponents/FilterButtonBase" - -export interface FilterButtonRemovableProps - extends Omit { - triggerButtonProps: FilterButtonProps & DataAttributes - removeButtonProps: Partial> & - DataAttributes & { tooltipText?: string } -} - -export type FilterButtonRemovableRefs = FilterTriggerRef & { - removeButtonRef?: React.RefObject -} - -export const FilterButtonRemovable = forwardRef< - FilterButtonRemovableRefs, - FilterButtonRemovableProps ->(({ triggerButtonProps, removeButtonProps, ...restProps }, ref) => { - const customRefObject = isRefObject(ref) ? ref.current : null - const removeButtonRef = customRefObject?.removeButtonRef - - const removeButtonLabel = - removeButtonProps?.tooltipText ?? - `Remove filter - ${triggerButtonProps?.label}` - - return ( - - - - - - - - - ) -}) - -FilterButtonRemovable.displayName = "FilterButtonRemovable" diff --git a/packages/components/src/FilterButton/FilterButtonRemovable/index.ts b/packages/components/src/FilterButton/FilterButtonRemovable/index.ts deleted file mode 100644 index 3af2dc5..0000000 --- a/packages/components/src/FilterButton/FilterButtonRemovable/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./FilterButtonRemovable" diff --git a/packages/components/src/FilterButton/_docs/FilterButton.stories.tsx b/packages/components/src/FilterButton/_docs/FilterButton.stories.tsx deleted file mode 100644 index 4e0d67d..0000000 --- a/packages/components/src/FilterButton/_docs/FilterButton.stories.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import React from "react" -import { Meta, StoryObj } from "@storybook/react" -import { FilterButton } from "../FilterButton" - -const meta = { - title: "Components/Filter Base/Filter Buttons/Filter Button", - component: FilterButton, - args: { - label: "Label", - }, -} satisfies Meta - -export default meta - -export const Playground: StoryObj = { - parameters: { - docs: { - canvas: { - sourceState: "shown", - }, - }, - }, -} - -/** - * A string or JSX.Element (most common for values with dom formatting). - */ -export const SelectedValue: StoryObj = { - render: args => ( -
- - - 3 Apr 2023 - 1 May 2023 - - } - /> -
- ), -} - -/** - * Controls the open state (chevron changes direction). - */ -export const IsOpen: StoryObj = { - render: args => ( -
- - -
- ), -} diff --git a/packages/components/src/FilterButton/_docs/FilterButtonRemovable.stories.tsx b/packages/components/src/FilterButton/_docs/FilterButtonRemovable.stories.tsx deleted file mode 100644 index eb1a16b..0000000 --- a/packages/components/src/FilterButton/_docs/FilterButtonRemovable.stories.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import { Meta, StoryObj } from "@storybook/react" -import { FilterButtonRemovable } from "../FilterButtonRemovable" - -const meta = { - title: "Components/Filter Base/Filter Buttons/Filter Button Removable", - component: FilterButtonRemovable, - args: { - triggerButtonProps: { - label: "Label", - }, - removeButtonProps: { - onClick: (): void => alert("Remove clicked!"), - }, - }, -} satisfies Meta - -export default meta - -export const Playground: StoryObj = { - parameters: { - docs: { - canvas: { - sourceState: "shown", - }, - }, - }, -} - -export const TriggerButtonProps: StoryObj = { - args: { - triggerButtonProps: { - label: "Ice cream flavour", - selectedValue: "Vanilla", - "data-testid": "testid__ice-cream-sandwich", - }, - }, -} - -export const RemoveButtonProps: StoryObj = { - args: { - removeButtonProps: { - tooltipText: "Custom tooltip :)", - "data-testid": "testid__carrot-cake", - }, - }, -} diff --git a/packages/components/src/FilterButton/_docs/filter-buttons.mdx b/packages/components/src/FilterButton/_docs/filter-buttons.mdx deleted file mode 100644 index 8c67074..0000000 --- a/packages/components/src/FilterButton/_docs/filter-buttons.mdx +++ /dev/null @@ -1,46 +0,0 @@ -import { Canvas, Controls, DocsStory, Meta } from "@storybook/blocks" -import { Installation, KaioNotification, ResourceLinks } from "../../../../../storybook/components" -import * as FilterButtonExamples from "./FilterButton.stories" -import * as FilterButtonRemovableExamples from "./FilterButtonRemovable.stories" - - - -# Filter Buttons - - - - - -Trigger buttons for use by components using the `` abstraction. - - - -## Filter Button - - - - - - - - - -## Filter Button Removable - - - - - -### Trigger Button Props - -Props for the trigger button. See [Filter Button](#filter-button). - - - - diff --git a/packages/components/src/FilterButton/_docs/filter-buttons.stickersheet.stories.tsx b/packages/components/src/FilterButton/_docs/filter-buttons.stickersheet.stories.tsx deleted file mode 100644 index b488168..0000000 --- a/packages/components/src/FilterButton/_docs/filter-buttons.stickersheet.stories.tsx +++ /dev/null @@ -1,84 +0,0 @@ -import React from "react" -import { Meta, StoryFn } from "@storybook/react" -import { StickerSheet } from "../../../../../storybook/components/StickerSheet" -import { FilterButton } from "../FilterButton" -import { FilterButtonRemovable } from "../FilterButtonRemovable" -import { FilterButtonBase } from "../_subcomponents/FilterButtonBase" - -export default { - title: "Components/Filter Base/Filter Buttons", - parameters: { - chromatic: { disable: false }, - controls: { disable: true }, - }, -} as Meta - -const StickerSheetTemplate: StoryFn = () => ( - <> - - - - - Label - - Label - - - Label - - - Label - - - - - - - - - - - - - - - - - - - - - - - - - undefined, - }} - /> - - - undefined, - }} - /> - - - - -) - -export const StickerSheetDefault = StickerSheetTemplate.bind({}) -StickerSheetDefault.storyName = "Sticker Sheet (Default)" diff --git a/packages/components/src/FilterButton/_subcomponents/FilterButtonBase/FilterButtonBase.module.scss b/packages/components/src/FilterButton/_subcomponents/FilterButtonBase/FilterButtonBase.module.scss deleted file mode 100644 index 5c61e55..0000000 --- a/packages/components/src/FilterButton/_subcomponents/FilterButtonBase/FilterButtonBase.module.scss +++ /dev/null @@ -1,57 +0,0 @@ -@import "~@kaizen/design-tokens/sass/border"; -@import "~@kaizen/design-tokens/sass/color"; -@import "~@kaizen/design-tokens/sass/typography"; -@import "~@kaizen/design-tokens/sass/spacing"; -@import "../../../../styles/button-reset"; -@import "./variables"; - -.filterButtonBase { - @include button-reset; - - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - position: relative; - display: inline-flex; - align-items: center; - height: 3rem; // 48px - padding: $spacing-sm; - border-width: 0; - border-radius: $border-solid-border-radius; - background-color: $color-blue-100; - font-family: $typography-button-secondary-font-family; - font-weight: $typography-button-secondary-font-weight; - font-size: $typography-button-secondary-font-size; - line-height: $typography-button-secondary-line-height; - letter-spacing: $typography-button-secondary-letter-spacing; - color: $color-blue-500; - white-space: nowrap; - - #{$selectors--filter-button-base--hover}, - #{$selectors--filter-button-base--active} { - z-index: 2; - } - - #{$selectors--filter-button-base--hover}, - #{$selectors--filter-button-base--active}, - #{$selectors--filter-button-base--focus} { - background-color: $color-blue-200; - } - - &:focus { - outline: none; - } - - #{$selectors--filter-button-base--focus} { - outline: none; - - &::after { - content: ""; - z-index: 3; - position: absolute; - inset: $focus-ring-offset-outer; - border-radius: $border-focus-ring-border-radius; - border: $border-focus-ring-border-width $border-focus-ring-border-style - $color-blue-500; - } - } -} diff --git a/packages/components/src/FilterButton/_subcomponents/FilterButtonBase/FilterButtonBase.tsx b/packages/components/src/FilterButton/_subcomponents/FilterButtonBase/FilterButtonBase.tsx deleted file mode 100644 index 0421be4..0000000 --- a/packages/components/src/FilterButton/_subcomponents/FilterButtonBase/FilterButtonBase.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import React, { ButtonHTMLAttributes, forwardRef } from "react" -import classnames from "classnames" -import { OverrideClassName } from "~types/OverrideClassName" -import styles from "./FilterButtonBase.module.scss" - -export interface FilterButtonBaseProps - extends OverrideClassName> { - children: React.ReactNode -} - -export const FilterButtonBase = forwardRef< - HTMLButtonElement, - FilterButtonBaseProps ->(({ children, classNameOverride, ...restProps }, ref) => ( - -)) - -FilterButtonBase.displayName = "FilterButtonBase" diff --git a/packages/components/src/FilterButton/_subcomponents/FilterButtonBase/_variables.scss b/packages/components/src/FilterButton/_subcomponents/FilterButtonBase/_variables.scss deleted file mode 100644 index 2637907..0000000 --- a/packages/components/src/FilterButton/_subcomponents/FilterButtonBase/_variables.scss +++ /dev/null @@ -1,17 +0,0 @@ -@import "~@kaizen/design-tokens/sass/border"; - -$focus-ring-offset: 1px; -$focus-ring-offset-inner: calc(-1 * #{$focus-ring-offset}); -$focus-ring-offset-outer: calc( - -1 * calc(#{$border-focus-ring-border-width} + #{$focus-ring-offset}) -); - -// Classnames to simulate pseudo states in storybook -$story-className--filter-button-base--hover: ":global(.story__filter-button-base--hover)"; -$story-className--filter-button-base--active: ":global(.story__filter-button-base--active)"; -$story-className--filter-button-base--focus: ":global(.story__filter-button-base--focus)"; - -// Combined pseudo state classes -$selectors--filter-button-base--hover: "&:hover, &#{$story-className--filter-button-base--hover}"; -$selectors--filter-button-base--active: "&:active, &#{$story-className--filter-button-base--active}"; -$selectors--filter-button-base--focus: "&:focus-visible, &#{$story-className--filter-button-base--focus}"; diff --git a/packages/components/src/FilterButton/_subcomponents/FilterButtonBase/index.ts b/packages/components/src/FilterButton/_subcomponents/FilterButtonBase/index.ts deleted file mode 100644 index f8bb103..0000000 --- a/packages/components/src/FilterButton/_subcomponents/FilterButtonBase/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./FilterButtonBase" diff --git a/packages/components/src/FilterButton/index.ts b/packages/components/src/FilterButton/index.ts deleted file mode 100644 index bfc79d0..0000000 --- a/packages/components/src/FilterButton/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from "./FilterButton" -export * from "./FilterButtonRemovable" diff --git a/packages/components/src/FilterDatePicker/FilterDatePicker.playwright.spec.tsx b/packages/components/src/FilterDatePicker/FilterDatePicker.playwright.spec.tsx deleted file mode 100644 index 50fec34..0000000 --- a/packages/components/src/FilterDatePicker/FilterDatePicker.playwright.spec.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import { expect, test } from "@playwright/test" - -const iframePath = "iframe.html?args=&id=" -const storyId = "components-filter-date-picker--playground" -test.beforeEach(async ({ page }) => { - // Go to the starting url before each test. - await page.goto(`./${iframePath}${storyId}`) -}) - -test.describe("", () => { - test("popover does not re-open after submitting using the Enter key", async ({ - page, - }) => { - const triggerButton = page.getByRole("button", { name: "Date" }) - await triggerButton.click() - - await expect(page.getByRole("dialog")).toBeVisible() - - const inputDate = page.getByLabel("Date") - await inputDate.click() - await inputDate.type("03/05/2022") - await page.keyboard.press("Enter") - - // Ensure the popover didn't re-open. - await expect(page.getByRole("dialog")).not.toBeVisible() - }) -}) diff --git a/packages/components/src/FilterDatePicker/FilterDatePicker.spec.tsx b/packages/components/src/FilterDatePicker/FilterDatePicker.spec.tsx deleted file mode 100644 index 73a04e2..0000000 --- a/packages/components/src/FilterDatePicker/FilterDatePicker.spec.tsx +++ /dev/null @@ -1,251 +0,0 @@ -import React, { useState } from "react" -import { render, screen, waitFor } from "@testing-library/react" -import userEvent from "@testing-library/user-event" -import { FilterButton } from "~components/FilterButton" -import { FilterDatePicker, FilterDatePickerProps } from "." - -const user = userEvent.setup() - -const FilterDatePickerWrapper = ({ - selectedDate, - ...restProps -}: Partial): JSX.Element => { - const [isOpen, setIsOpen] = useState(false) - const [selectedValue, setSelectedValue] = useState( - selectedDate - ) - - return ( - ( - - )} - label="Drank" - selectedDate={selectedValue} - onDateChange={setSelectedValue} - defaultMonth={new Date("2022-05-01")} - locale="en-AU" - {...restProps} - /> - ) -} - -describe("", () => { - it("should not show the calendar initially", () => { - render() - expect(screen.queryByRole("dialog")).not.toBeInTheDocument() - }) - - describe("Filter button", () => { - it("should show the selected date in the button", () => { - render() - const filterButton = screen.getByRole("button", { - name: "Drank : 1 May 2022", - }) - expect(filterButton).toBeVisible() - }) - - it("should show the calendar when the filter button is clicked", async () => { - render() - expect(screen.queryByRole("dialog")).not.toBeInTheDocument() - - const filterButton = screen.getByRole("button", { - name: "Drank", - }) - await user.click(filterButton) - await waitFor(() => { - expect(screen.getByText("May 2022")).toBeVisible() - }) - }) - }) - - it("closes the popover when a valid date has been submitted via the calendar picker", async () => { - const { getByRole } = render() - const triggerButton = getByRole("button", { - name: "Drank", - }) - - await user.click(triggerButton) - - const dialog = getByRole("dialog") - await waitFor(() => { - expect(dialog).toBeInTheDocument() - }) - - const targetDay = screen.getByRole("button", { - name: "2nd May (Monday)", - }) - - await user.click(targetDay) - - await waitFor(() => { - expect(dialog).not.toBeInTheDocument() - }) - }) - - describe("Text input", () => { - it("validates the date on blur", async () => { - const { getByRole, getByLabelText, getByText } = render( - - ) - const triggerButton = getByRole("button", { - name: "Drank", - }) - - await user.click(triggerButton) - const dialog = getByRole("dialog") - - await waitFor(() => { - expect(dialog).toBeInTheDocument() - }) - - const inputDate = getByLabelText("Date") - await user.clear(inputDate) - await user.type(inputDate, "32/13/2022") - await user.tab() - - await waitFor(() => { - expect(getByText("32/13/2022 is an invalid date")).toBeInTheDocument() - }) - }) - - describe("Pressing Enter in the text input", () => { - it("closes the popover when a valid date has been submitted via the text input field", async () => { - const { getByRole, getByLabelText } = render( - - ) - const triggerButton = getByRole("button", { - name: "Drank", - }) - - await user.click(triggerButton) - - const dialog = getByRole("dialog") - await waitFor(() => { - expect(dialog).toBeInTheDocument() - }) - - const inputDate = getByLabelText("Date") - await user.clear(inputDate) - await user.type(inputDate, "07/06/2022") - await user.keyboard("{Enter}") - - await waitFor(() => { - expect(dialog).not.toBeInTheDocument() - }) - }) - - it("does not close the popover when an invalid date has been submitted via the text input field", async () => { - const { getByRole, getByLabelText, getByText } = render( - - ) - const triggerButton = getByRole("button", { - name: "Drank", - }) - - await user.click(triggerButton) - const dialog = getByRole("dialog") - - await waitFor(() => { - expect(dialog).toBeInTheDocument() - }) - - const inputDate = getByLabelText("Date") - await user.clear(inputDate) - await user.type(inputDate, "32/13/2022") - await user.keyboard("{Enter}") - - await waitFor(() => { - expect(getByText("32/13/2022 is an invalid date")).toBeInTheDocument() - }) - }) - }) - }) - - it("does not close the popover when the text input field has been cleared", async () => { - const { getByRole, getByLabelText, getByText, queryByText } = render( - - ) - const triggerButton = getByRole("button", { - name: "Drank : Invalid Date", - }) - - await user.click(triggerButton) - const dialog = getByRole("dialog") - - await waitFor(() => { - expect(dialog).toBeInTheDocument() - expect(getByText("Invalid Date is an invalid date")).toBeInTheDocument() - }) - - const inputDate = getByLabelText("Date") - await user.clear(inputDate) - await user.tab() - - await waitFor(() => { - expect( - queryByText("Invalid Date is an invalid date") - ).not.toBeInTheDocument() - // We are double checking that the popover has not closed - expect(dialog).toBeInTheDocument() - }) - }) - - it("does not close the popover when there is a selected date and the user navigates months", async () => { - const { getByRole } = render( - - ) - const triggerButton = getByRole("button", { - name: "Drank : 1 Jan 2022", - }) - - await user.click(triggerButton) - const dialog = getByRole("dialog") - - await waitFor(() => { - expect(dialog).toBeInTheDocument() - }) - - const navigateMonthsButton = getByRole("button", { - name: "Go to next month", - }) - - await user.click(navigateMonthsButton) - - await waitFor(() => { - expect(dialog).toBeInTheDocument() - }) - }) - - it("updates the selected value in the trigger button when typing a date", async () => { - const { getByRole, getByLabelText } = render( - - ) - const triggerButton = getByRole("button", { - name: "Drank : 6 Jun 2022", - }) - - await user.click(triggerButton) - - await waitFor(() => { - const dialog = getByRole("dialog") - expect(dialog).toBeInTheDocument() - }) - - const inputDate = getByLabelText("Date") - await user.clear(inputDate) - await user.type(inputDate, "07/06/2022") - // TODO: note that this should work without having to trigger a tab. update this test when fixed. - await user.tab() - await user.click(document.body) - - await waitFor(() => { - expect( - getByRole("button", { name: "Drank : 7 Jun 2022" }) - ).toBeInTheDocument() - }) - }) -}) diff --git a/packages/components/src/FilterDatePicker/FilterDatePicker.tsx b/packages/components/src/FilterDatePicker/FilterDatePicker.tsx deleted file mode 100644 index 4760296..0000000 --- a/packages/components/src/FilterDatePicker/FilterDatePicker.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import React from "react" -import { formatDateAsText, getLocale } from "@kaizen/date-picker" -import { Filter, FilterContents, FilterProps } from "../Filter" -import { FilterButtonProps } from "../FilterButton" -import { - FilterDatePickerField, - FilterDatePickerFieldProps, -} from "./subcomponents/FilterDatePickerField" - -export interface FilterDatePickerProps extends FilterDatePickerFieldProps { - label: string - isOpen: FilterProps["isOpen"] - setIsOpen: FilterProps["setIsOpen"] - renderTrigger: (triggerProps: FilterButtonProps) => JSX.Element -} - -export const FilterDatePicker = ({ - isOpen, - setIsOpen, - renderTrigger, - selectedDate, - label, - locale, - onDateSubmit, - ...restProps -}: FilterDatePickerProps): JSX.Element => ( - - renderTrigger({ - selectedValue: selectedDate - ? formatDateAsText(selectedDate, undefined, getLocale(locale)) - : undefined, - label, - ...triggerProps, - }) - } - > - - { - setIsOpen(false) - onDateSubmit?.(date) - }} - {...restProps} - /> - - -) - -FilterDatePicker.displayName = "FilterDatePicker" diff --git a/packages/components/src/FilterDatePicker/_docs/FilterDatePicker.mdx b/packages/components/src/FilterDatePicker/_docs/FilterDatePicker.mdx deleted file mode 100644 index aeb0cae..0000000 --- a/packages/components/src/FilterDatePicker/_docs/FilterDatePicker.mdx +++ /dev/null @@ -1,46 +0,0 @@ -import { ArgTypes, Controls, Description, Meta } from "@storybook/blocks" -import { ResourceLinks, KaioNotification, Installation, NoClipCanvas } from "../../../../../storybook/components" -import { LinkTo } from "../../../../../storybook/components/LinkTo" -import * as FilterDPStories from "./FilterDatePicker.stories" - - - -# Filter Date Picker - - - - - -Date Picker to use for Filtering by a single date. - - - -## Playground - - - -## API - -### Render Trigger - - - -### Description - - - -### Extend Input Props - - - -### Validation - - diff --git a/packages/components/src/FilterDatePicker/_docs/FilterDatePicker.stickersheet.stories.tsx b/packages/components/src/FilterDatePicker/_docs/FilterDatePicker.stickersheet.stories.tsx deleted file mode 100644 index e4b8a60..0000000 --- a/packages/components/src/FilterDatePicker/_docs/FilterDatePicker.stickersheet.stories.tsx +++ /dev/null @@ -1,127 +0,0 @@ -import React, { useState } from "react" -import { StaticIntlProvider } from "@cultureamp/i18n-react-intl" -import { action } from "@storybook/addon-actions" -import { Meta, StoryFn } from "@storybook/react" -import isChromatic from "chromatic" -import { StickerSheet } from "../../../../../storybook/components/StickerSheet" -import { FilterButton } from "../../FilterButton" -import { FilterDatePicker } from "../index" -import { FilterDatePickerField } from "../subcomponents/FilterDatePickerField" - -const IS_CHROMATIC = isChromatic() - -export default { - title: "Components/Filter Date Picker", - parameters: { - chromatic: { disable: false }, - controls: { disable: true }, - }, -} satisfies Meta - -const StickerSheetTemplate: StoryFn<{ textDirection: "ltr" | "rtl" }> = ({ - textDirection, -}) => { - const [isOpenNoValue, setIsOpenNoValue] = useState(IS_CHROMATIC) - const [isOpenValue, setIsOpenValue] = useState(false) - - const [noDateValue, setNoDateValue] = useState() - const [dateValueValidation, setDateValueValidation] = useState< - Date | undefined - >(new Date("potato")) - - const [dateValue, setDateValue] = useState( - new Date("2022-05-15") - ) - - return ( - - - - - - ( - - )} - label="Start day" - locale="en-AU" - defaultMonth={new Date("2022-05-01")} - selectedDate={noDateValue} - onDateChange={setNoDateValue} - /> - ( - - )} - label="Start day" - locale="en-AU" - selectedDate={dateValue} - onDateChange={setDateValue} - /> - - - - - - - - - - - - - - - - - - - ) -} - -export const StickerSheetDefault = StickerSheetTemplate.bind({}) -StickerSheetDefault.storyName = "Sticker Sheet (Default)" -StickerSheetDefault.args = { - textDirection: "ltr", -} - -export const StickerSheetRTL = StickerSheetTemplate.bind({}) -StickerSheetRTL.storyName = "Sticker Sheet (RTL)" -StickerSheetRTL.args = { - textDirection: "rtl", -} diff --git a/packages/components/src/FilterDatePicker/_docs/FilterDatePicker.stories.tsx b/packages/components/src/FilterDatePicker/_docs/FilterDatePicker.stories.tsx deleted file mode 100644 index 4100a90..0000000 --- a/packages/components/src/FilterDatePicker/_docs/FilterDatePicker.stories.tsx +++ /dev/null @@ -1,337 +0,0 @@ -import React, { useEffect, useState } from "react" -import { Meta, StoryFn } from "@storybook/react" -import Highlight from "react-highlight" -import { Paragraph } from "@kaizen/typography" -import { renderTriggerControls } from "~components/Filter/_docs/controls/renderTriggerControls" -import { - FilterButton, - FilterButtonProps, - FilterButtonRemovable, -} from "~components/FilterButton" -import { - DateValidationResponse, - FilterDatePicker, - ValidationMessage, -} from "../index" -import { FilterDatePickerField } from "../subcomponents/FilterDatePickerField" -import { defaultMonthControls } from "./controls/defaultMonthControls" -import { disabledDaysControls } from "./controls/disabledDaysControls" -import { validationControls } from "./controls/validationControls" - -export default { - title: "Components/Filter Date Picker", - component: FilterDatePicker, - args: { - label: "Date", - locale: "en-AU", - }, - argTypes: { - ...defaultMonthControls, - ...validationControls, - disabledDays: disabledDaysControls, - renderTrigger: renderTriggerControls, - locale: { - options: ["en-US", "en-AU"], - control: { type: "radio" }, - }, - isOpen: { control: "disabled" }, - selectedDate: { - options: ["None", "Date"], - control: { - type: "select", - labels: { - None: "undefined", - }, - }, - mapping: { - None: undefined, - Date: new Date(), - }, - }, - description: { - control: "text", - }, - }, -} satisfies Meta - -const sampleCode = ` -// This code is not connected to the controls of the attached component. -// @note: If you want a removable button, use the commented out code instead. - -import { - FilterButton, - FilterButtonProps, -// FilterButtonRemovable, - FilterDatePicker, -} from "@kaizen/components" - -const [isOpen, setIsOpen] = useState(false) -const [date, setDate] = useState() - -return ( - ( - - )} - // renderTrigger={(triggerButtonProps: FilterButtonProps): JSX.Element => ( - // undefined, - // }} - // /> - // )} - isOpen={isOpen} - setIsOpen={setIsOpen} - selectedDate={date} - onDateChange={setDate} - /> -) -` - -export const Playground: StoryFn = args => { - const [isOpen, setIsOpen] = useState(false) - const [date, setDate] = useState() - - useEffect(() => { - setDate(args.selectedDate) - }, [args.selectedDate]) - - return ( - - ) -} -Playground.parameters = { - docs: { - canvas: { - sourceState: "shown", - }, - source: { - code: sampleCode, - }, - }, -} -Playground.args = { - id: "filter-dp--default", - /* @ts-expect-error: Storybook controls key; see argTypes in default export */ - renderTrigger: "Filter Button", -} - -/** - * Render function for the trigger button. - * - * Provides `selectedValue`, `label`, `isOpen`, `onClick` (calls `setIsOpen`). - */ -export const RenderTrigger: StoryFn = () => { - const [isOpenButton, setIsOpenButton] = useState(false) - const [dateButton, setDateButton] = useState() - const [isOpenRemovable, setIsOpenRemovable] = useState(false) - const [rangeRemovable, setRangeRemovable] = useState() - - return ( -
- ( - - )} - isOpen={isOpenButton} - setIsOpen={setIsOpenButton} - selectedDate={dateButton} - onDateChange={setDateButton} - /> - ( - undefined, - }} - /> - )} - isOpen={isOpenRemovable} - setIsOpen={setIsOpenRemovable} - selectedDate={rangeRemovable} - onDateChange={setRangeRemovable} - /> -
- ) -} - -/** - * Custom description to provide extra context (input format help text remains). - */ -export const Description: StoryFn = () => { - const [isOpen, setIsOpen] = useState(false) - - return ( - ( - - )} - isOpen={isOpen} - setIsOpen={setIsOpen} - selectedDate={undefined} - onDateChange={(): void => undefined} - description="This is a custom description" - /> - ) -} - -/** - * Add extra props (eg. data-attributes) - */ -export const ExtendInputProps: StoryFn = () => { - const [isOpen, setIsOpen] = useState(false) - - return ( - ( - - )} - isOpen={isOpen} - setIsOpen={setIsOpen} - selectedDate={undefined} - onDateChange={(): void => undefined} - data-testid="filterdp--input-testid" - /> - ) -} - -const ValidationHelpText = ({ - validationResponse, -}: { - validationResponse: DateValidationResponse | undefined -}): JSX.Element => ( -
- - NOTE: This story includes additional custom validation to provide some - guidance when dealing with validation other than date isInvalid or - isDisabled. - -
    -
  • - There will be a caution when the selectedDay is valid{" "} - but is not within this year. -
    • -
  • - There will be an error when the{" "} - submit button is clicked and there is a{" "} - current error. -
    • -
- - The onValidate callback returns a{" "} - validationResponse object which provides data such as a - default validation message, and can be utilised for custom validation. - - - - {JSON.stringify(validationResponse, null, "\t")} - - -
    -
  • - isInvalid: A date that cannot be parsed. e.g - "potato". -
    • -
  • - isDisabled: A date that have been set as disabled through - the disabledDates prop. -
    • -
  • - isEmpty: Input is empty. -
    • -
  • - isValidDate: Date input that is not invalid{" "} - nor disabled nor empty. -
    • -
-
-) - -/** - * Contents extracted from within the Filter to showcase the validation. - */ -export const Validation: StoryFn = () => { - const [value, setValue] = useState() - const [response, setResponse] = useState() - const [validationMessage, setValidationMessage] = useState< - ValidationMessage | undefined - >() - - const handleValidate = (validationResponse: DateValidationResponse): void => { - setResponse(validationResponse) - // An example of additional validation - if ( - validationResponse.isValidDate && - validationResponse.date?.getFullYear() !== new Date().getFullYear() - ) { - setValidationMessage({ - status: "caution", - message: "Date is not this year", - }) - return - } - - setValidationMessage(validationResponse.validationMessage) - } - - const submitRequest: React.FormEventHandler = e => { - e.preventDefault() - - const status = validationMessage?.status - if (status === "error" || status === "caution") { - setValidationMessage({ status: "error", message: "There is an error" }) - return alert("Error") - } - - alert("Success") - } - - return ( - <> -
- -
- -
- - - - - ) -} -Validation.parameters = { - docs: { source: { type: "code" } }, - controls: { disable: true }, -} diff --git a/packages/components/src/FilterDatePicker/_docs/controls/defaultMonthControls.ts b/packages/components/src/FilterDatePicker/_docs/controls/defaultMonthControls.ts deleted file mode 100644 index 9f3b555..0000000 --- a/packages/components/src/FilterDatePicker/_docs/controls/defaultMonthControls.ts +++ /dev/null @@ -1,16 +0,0 @@ -export const defaultMonthControls = { - defaultMonth: { - options: ["Default", "May2022"], - control: { - type: "select", - labels: { - Default: "Default (undefined)", - May2022: "May 2022", - }, - }, - mapping: { - Default: undefined, - May2022: new Date("2022-05-01"), - }, - }, -} diff --git a/packages/components/src/FilterDatePicker/_docs/controls/disabledDaysControls.ts b/packages/components/src/FilterDatePicker/_docs/controls/disabledDaysControls.ts deleted file mode 100644 index 544abf2..0000000 --- a/packages/components/src/FilterDatePicker/_docs/controls/disabledDaysControls.ts +++ /dev/null @@ -1,42 +0,0 @@ -export const disabledDaysControls = { - options: [ - "None", - "bool", - "Date", - "DateMultiple", - "Range", - "DateBefore", - "DateAfter", - "DateInterval", - "DayOfWeek", - ], - control: { - type: "select", - labels: { - None: "undefined", - bool: "true", - Date: "new Date()", - DateMultiple: '[new Date("2022-05-01"), new Date("2022-05-22")]', - Range: '{ from: new Date("2022-05-01"), to: new Date("2022-05-12") }', - DateBefore: '{ before: new Date("2022-05-16") }', - DateAfter: '{ after: new Date("2022-05-21") }', - DateInterval: - '{ before: new Date("2022-05-30"), after: new Date("2022-05-15") }', - DayOfWeek: "{ dayOfWeek: [6, 0] } (Saturday and Sunday)", - }, - }, - mapping: { - None: undefined, - bool: true, - Date: new Date(), - DateMultiple: [new Date("2022-05-01"), new Date("2022-05-22")], - Range: { from: new Date("2022-05-01"), to: new Date("2022-05-12") }, - DateBefore: { before: new Date("2022-05-16") }, - DateAfter: { after: new Date("2022-05-21") }, - DateInterval: { - before: new Date("2022-05-30"), - after: new Date("2022-05-15"), - }, - DayOfWeek: { dayOfWeek: [6, 0] }, - }, -} diff --git a/packages/components/src/FilterDatePicker/_docs/controls/validationControls.ts b/packages/components/src/FilterDatePicker/_docs/controls/validationControls.ts deleted file mode 100644 index 5cb659d..0000000 --- a/packages/components/src/FilterDatePicker/_docs/controls/validationControls.ts +++ /dev/null @@ -1,82 +0,0 @@ -import { action } from "@storybook/addon-actions" - -export const validationControls = { - onValidate: { - options: ["dateStart", "dateEnd", "dateRange"], - control: { - type: "select", - labels: { - dateStart: '{ dateStart: action("validate start date") }', - dateEnd: '{ dateEnd: action("validate end date") }', - dateRange: - '{ dateStart: action("validate start date"), dateEnd: action("validate end date") }', - }, - }, - mapping: { - dateStart: { dateStart: action("validate start date") }, - dateEnd: { dateEnd: action("validate end date") }, - dateRange: { - dateStart: action("validate start date"), - dateEnd: action("validate end date"), - }, - }, - }, - validationMessage: { - options: [ - "dateStartError", - "dateEndError", - "dateRangeError", - "dateRangeCautionError", - ], - control: { - type: "select", - labels: { - dateStartError: - '{ dateStart: { status: "error", message: \'"Date from" cannot be after the "Date to" selection.\' } }', - dateEndError: - '{ dateEnd: { status: "error", message: \'"Date to" cannot be earlier than the "Date from" selection.\' } }', - dateRangeError: - '{ dateStart: { status: "error", message: \'"Date from" cannot be after the "Date to" selection.\' }, dateEnd: { status: "error", message: \'"Date to" cannot be earlier than the "Date from" selection.\' } }', - dateRangeCautionError: - '{ dateStart: { status: "caution", message: \'"Date from" is close to the submission date.\' }, dateEnd: { status: "error", message: \'"Date to" cannot be earlier than the "Date from" selection.\' } }', - }, - }, - mapping: { - dateStartError: { - dateStart: { - status: "error", - message: '"Date from" cannot be after the "Date to" selection.', - }, - }, - dateEndError: { - dateEnd: { - status: "error", - message: - '"Date to" cannot be earlier than the "Date from" selection.', - }, - }, - dateRangeError: { - dateStart: { - status: "error", - message: '"Date from" cannot be after the "Date to" selection.', - }, - dateEnd: { - status: "error", - message: - '"Date to" cannot be earlier than the "Date from" selection.', - }, - }, - dateRangeCautionError: { - dateStart: { - status: "caution", - message: '"Date from" is close to the submission date.', - }, - dateEnd: { - status: "error", - message: - '"Date to" cannot be earlier than the "Date from" selection.', - }, - }, - }, - }, -} diff --git a/packages/components/src/FilterDatePicker/hooks/useDateInputHandlers.spec.ts b/packages/components/src/FilterDatePicker/hooks/useDateInputHandlers.spec.ts deleted file mode 100644 index 927fd0c..0000000 --- a/packages/components/src/FilterDatePicker/hooks/useDateInputHandlers.spec.ts +++ /dev/null @@ -1,355 +0,0 @@ -import { ChangeEvent, FocusEvent, KeyboardEvent, SetStateAction } from "react" -import { renderHook, act } from "@testing-library/react-hooks" -import { enAU } from "date-fns/locale" -import * as isSelectingDayInCalendar from "@kaizen/date-picker/src/utils/isSelectingDayInCalendar" -import { useDateInputHandlers } from "./useDateInputHandlers" - -const locale = enAU -const setInputValue = jest.fn]>() -const onDateChange = jest.fn() - -describe("useDateInputHandlers", () => { - beforeEach(() => { - jest.clearAllMocks() - }) - - describe("onChange", () => { - it("updates input value", () => { - const { result } = renderHook(() => - useDateInputHandlers({ - locale, - setInputValue, - onDateChange, - }) - ) - const { onChange } = result.current - - act(() => { - onChange?.({ - currentTarget: { value: "a" }, - } as ChangeEvent) - }) - - expect(setInputValue).toHaveBeenCalledWith("a") - }) - - it("calls custom onChange when provided", () => { - const onChangeMock = jest.fn() - - const { result } = renderHook(() => - useDateInputHandlers({ - locale, - setInputValue, - onDateChange, - onChange: onChangeMock, - }) - ) - const { onChange } = result.current - const changeEvent = { - currentTarget: { value: "a" }, - } as ChangeEvent - - act(() => { - onChange?.(changeEvent) - }) - - expect(onChangeMock).toHaveBeenCalledWith(changeEvent) - }) - }) - - describe("onFocus", () => { - it("transforms input value when it is a valid date", () => { - const { result } = renderHook(() => - useDateInputHandlers({ - locale, - setInputValue, - onDateChange, - }) - ) - const { onFocus } = result.current - - act(() => { - onFocus?.({ - currentTarget: { value: "1 May 2022" }, - } as FocusEvent) - }) - - expect(setInputValue).toHaveBeenCalledWith("01/05/2022") - }) - - it("does not transform input value when it is an invalid date", () => { - const { result } = renderHook(() => - useDateInputHandlers({ - locale, - setInputValue, - onDateChange, - }) - ) - const { onFocus } = result.current - - act(() => { - onFocus?.({ - currentTarget: { value: "potato" }, - } as FocusEvent) - }) - - expect(setInputValue).not.toHaveBeenCalled() - }) - - it("calls custom onFocus when provided", () => { - const onFocusMock = jest.fn]>() - - const { result } = renderHook(() => - useDateInputHandlers({ - locale, - setInputValue, - onDateChange, - onFocus: onFocusMock, - }) - ) - const { onFocus } = result.current - const focusEvent = { - currentTarget: { value: "potato" }, - } as FocusEvent - - act(() => { - onFocus?.(focusEvent) - }) - - expect(onFocusMock).toHaveBeenCalledWith(focusEvent) - }) - }) - - describe("onBlur", () => { - it("does not do anything when selecting a day in the calendar", () => { - const onBlurMock = jest.fn]>() - const { result } = renderHook(() => - useDateInputHandlers({ - locale, - setInputValue, - onDateChange, - onBlur: onBlurMock, - }) - ) - const { onBlur } = result.current - const blurEvent = { - currentTarget: { value: "" }, - } as FocusEvent - - const spy = jest.spyOn( - isSelectingDayInCalendar, - "isSelectingDayInCalendar" - ) - spy.mockReturnValue(true) - - act(() => { - onBlur?.(blurEvent) - }) - - expect(onBlurMock).not.toHaveBeenCalled() - - spy.mockReset() - }) - - it("changes date to undefined when input is empty", () => { - const { result } = renderHook(() => - useDateInputHandlers({ - locale, - setInputValue, - onDateChange, - }) - ) - const { onBlur } = result.current - const blurEvent = { - currentTarget: { value: "" }, - } as FocusEvent - - act(() => { - onBlur?.(blurEvent) - }) - - expect(setInputValue).not.toHaveBeenCalled() - expect(onDateChange).toHaveBeenCalledWith(undefined) - }) - - it("transforms input value when it is a valid date", () => { - const { result } = renderHook(() => - useDateInputHandlers({ - locale, - setInputValue, - onDateChange, - }) - ) - const { onBlur } = result.current - const blurEvent = { - currentTarget: { value: "01/05/2022" }, - } as FocusEvent - - act(() => { - onBlur?.(blurEvent) - }) - - expect(setInputValue).toHaveBeenCalledWith("1 May 2022") - expect(onDateChange).toHaveBeenCalledWith(new Date("2022-05-1")) - }) - - it("does not transform input value when it is an invalid date", () => { - const { result } = renderHook(() => - useDateInputHandlers({ - locale, - setInputValue, - onDateChange, - }) - ) - const { onBlur } = result.current - const blurEvent = { - currentTarget: { value: "potato" }, - } as FocusEvent - - act(() => { - onBlur?.(blurEvent) - }) - - expect(setInputValue).not.toHaveBeenCalled() - // Called with the invalid Date object - expect(onDateChange).toHaveBeenCalledTimes(1) - }) - - it("does not transform input value when it is a disabled date", () => { - const { result } = renderHook(() => - useDateInputHandlers({ - locale, - disabledDays: new Date("2022-05-01"), - setInputValue, - onDateChange, - }) - ) - const { onBlur } = result.current - const blurEvent = { - currentTarget: { value: "01/05/2022" }, - } as FocusEvent - - act(() => { - onBlur?.(blurEvent) - }) - - expect(setInputValue).not.toHaveBeenCalled() - expect(onDateChange).toHaveBeenCalledWith(new Date("2022-05-01")) - }) - - it("calls custom onBlur when provided on input with value", () => { - const onBlurMock = jest.fn]>() - const { result } = renderHook(() => - useDateInputHandlers({ - locale, - setInputValue, - onDateChange, - onBlur: onBlurMock, - }) - ) - const { onBlur } = result.current - const blurEvent = { - currentTarget: { value: "1 May 2022" }, - } as FocusEvent - - act(() => { - onBlur?.(blurEvent) - }) - - expect(onBlurMock).toHaveBeenCalledWith(blurEvent) - }) - - it("calls custom onBlur when provided on empty", () => { - const onBlurMock = jest.fn]>() - const { result } = renderHook(() => - useDateInputHandlers({ - locale, - setInputValue, - onDateChange, - onBlur: onBlurMock, - }) - ) - const { onBlur } = result.current - const blurEvent = { - currentTarget: { value: "" }, - } as FocusEvent - - act(() => { - onBlur?.(blurEvent) - }) - - expect(onBlurMock).toHaveBeenCalledWith(blurEvent) - }) - }) - - describe("onKeyDown - Enter", () => { - it("calls onDateChange with date", () => { - const { result } = renderHook(() => - useDateInputHandlers({ - locale, - setInputValue, - onDateChange, - }) - ) - const { onKeyDown } = result.current - - act(() => { - onKeyDown?.({ - preventDefault: (): void => undefined, - currentTarget: { value: "01/05/2022" }, - key: "Enter", - } as KeyboardEvent) - }) - - expect(onDateChange).toBeCalledWith(new Date("2022-05-01")) - }) - - it("calls onDateSubmit when provided", () => { - const onDateSubmit = jest.fn() - - const { result } = renderHook(() => - useDateInputHandlers({ - locale, - setInputValue, - onDateChange, - onDateSubmit, - }) - ) - const { onKeyDown } = result.current - const keyboardEvent = { - preventDefault: (): void => undefined, - currentTarget: { value: "01/05/2022" }, - key: "Enter", - } as KeyboardEvent - - act(() => { - onKeyDown?.(keyboardEvent) - }) - - expect(onDateSubmit).toBeCalledWith(new Date("2022-05-01")) - }) - - it("calls custom onKeyDown when provided", () => { - const onKeyDownMock = jest.fn() - - const { result } = renderHook(() => - useDateInputHandlers({ - locale, - setInputValue, - onDateChange, - onKeyDown: onKeyDownMock, - }) - ) - const { onKeyDown } = result.current - const keyboardEvent = { - currentTarget: { value: "potato" }, - } as KeyboardEvent - - act(() => { - onKeyDown?.(keyboardEvent) - }) - - expect(onKeyDownMock).toBeCalledWith(keyboardEvent) - }) - }) -}) diff --git a/packages/components/src/FilterDatePicker/hooks/useDateInputHandlers.ts b/packages/components/src/FilterDatePicker/hooks/useDateInputHandlers.ts deleted file mode 100644 index 642096e..0000000 --- a/packages/components/src/FilterDatePicker/hooks/useDateInputHandlers.ts +++ /dev/null @@ -1,99 +0,0 @@ -import { - DateInputProps, - formatDateAsText, - isInvalidDate, -} from "@kaizen/date-picker" -import { formatDateAsNumeral } from "@kaizen/date-picker/src/utils/formatDateAsNumeral" -import { isDisabledDate } from "@kaizen/date-picker/src/utils/isDisabledDate" -import { isSelectingDayInCalendar } from "@kaizen/date-picker/src/utils/isSelectingDayInCalendar" -import { parseDateFromNumeralFormatValue } from "@kaizen/date-picker/src/utils/parseDateFromNumeralFormatValue" -import { parseDateFromTextFormatValue } from "@kaizen/date-picker/src/utils/parseDateFromTextFormatValue" -import { DisabledDays } from "~types/DatePicker" - -type UseDateInputHandlersArgs = { - locale: Locale - disabledDays?: DisabledDays - setInputValue: (value: string) => void - onDateChange: (date: Date | undefined) => void - onDateSubmit?: (date: Date) => void - onChange?: DateInputProps["onChange"] - onFocus?: DateInputProps["onFocus"] - onBlur?: DateInputProps["onBlur"] - onKeyDown?: DateInputProps["onKeyDown"] -} - -type UseDateInputHandlersValue = { - onChange: DateInputProps["onChange"] - onFocus: DateInputProps["onFocus"] - onBlur: DateInputProps["onBlur"] - onKeyDown: DateInputProps["onKeyDown"] -} - -export const useDateInputHandlers = ({ - locale, - disabledDays, - setInputValue, - onDateChange, - onDateSubmit, - onChange, - onFocus, - onBlur, - onKeyDown, -}: UseDateInputHandlersArgs): UseDateInputHandlersValue => { - const isValidDate = (date: Date): boolean => - !isInvalidDate(date) && !isDisabledDate(date, disabledDays) - - const handleChange: DateInputProps["onChange"] = e => { - setInputValue(e.currentTarget.value) - onChange?.(e) - } - - const handleFocus: DateInputProps["onFocus"] = e => { - const date = parseDateFromTextFormatValue(e.currentTarget.value, locale) - if (!isInvalidDate(date)) { - const newInputValue = formatDateAsNumeral(date, locale) - setInputValue(newInputValue) - } - onFocus?.(e) - } - - const handleBlur: DateInputProps["onBlur"] = e => { - if (isSelectingDayInCalendar(e.relatedTarget)) return - - if (e.currentTarget.value === "") { - onDateChange(undefined) - onBlur?.(e) - return - } - - const date = parseDateFromNumeralFormatValue(e.currentTarget.value, locale) - - if (isValidDate(date)) { - const newInputValue = formatDateAsText(date, disabledDays, locale) - setInputValue(newInputValue) - } - - onDateChange(date) - onBlur?.(e) - } - - const handleKeyDown: DateInputProps["onKeyDown"] = e => { - if (e.key === "Enter") { - e.preventDefault() - const date = parseDateFromNumeralFormatValue( - e.currentTarget.value, - locale - ) - onDateChange(date) - onDateSubmit?.(date) - } - onKeyDown?.(e) - } - - return { - onChange: handleChange, - onFocus: handleFocus, - onBlur: handleBlur, - onKeyDown: handleKeyDown, - } -} diff --git a/packages/components/src/FilterDatePicker/hooks/useDateValidation.spec.tsx b/packages/components/src/FilterDatePicker/hooks/useDateValidation.spec.tsx deleted file mode 100644 index 2253058..0000000 --- a/packages/components/src/FilterDatePicker/hooks/useDateValidation.spec.tsx +++ /dev/null @@ -1,81 +0,0 @@ -import React from "react" -import { renderHook, act } from "@testing-library/react-hooks" -import { LabelledMessage } from "~components/LabelledMessage" -import { useDateValidation } from "./useDateValidation" - -describe("useDateValidation()", () => { - describe("with a valid date", () => { - it("returns no validation message and the same date", () => { - const { result } = renderHook(() => - useDateValidation({ - inputLabel: "Start date", - }) - ) - const { validateDate } = result.current - const { newDate } = validateDate({ - date: new Date("2022-05-01"), - inputValue: "1 May 2022", - }) - - expect(result.current.validationMessage).toBeUndefined() - expect(newDate).toEqual(new Date("2022-05-01")) - }) - }) - - describe("with an invalid date", () => { - it("returns a validation message and no date", () => { - const { result } = renderHook(() => - useDateValidation({ - inputLabel: "Date", - }) - ) - const { validateDate, updateValidation } = result.current - const { validationResponse, newDate } = validateDate({ - date: new Date("potato"), - inputValue: "potato", - }) - - act(() => { - updateValidation(validationResponse) - }) - - expect(result.current.validationMessage).toStrictEqual({ - status: "error", - message: ( - - ), - }) - expect(newDate).toBeUndefined() - }) - }) - - describe("consumer controlled validation", () => { - it("returns the consumer's error status and validation message", () => { - const { result } = renderHook(() => - useDateValidation({ - inputLabel: "Start date", - validationMessage: { - status: "caution", - message: "Jelly-filled doughnuts", - }, - onValidate: (): void => undefined, - }) - ) - const { validateDate, updateValidation } = result.current - const { validationResponse, newDate } = validateDate({ - date: new Date("potato"), - inputValue: "potato", - }) - - act(() => { - updateValidation(validationResponse) - }) - - expect(result.current.validationMessage).toStrictEqual({ - status: "caution", - message: "Jelly-filled doughnuts", - }) - expect(newDate).toBeUndefined() - }) - }) -}) diff --git a/packages/components/src/FilterDatePicker/hooks/useDateValidation.ts b/packages/components/src/FilterDatePicker/hooks/useDateValidation.ts deleted file mode 100644 index 037b7e5..0000000 --- a/packages/components/src/FilterDatePicker/hooks/useDateValidation.ts +++ /dev/null @@ -1,58 +0,0 @@ -import { useState } from "react" -import { DisabledDays } from "~types/DatePicker" -import { ValidationMessage, DateValidationResponse } from "../types" -import { getDateValidationHandler } from "../utils/getDateValidationHandler" -import { validateDate } from "../utils/validateDate" - -export type UseDateValidationArgs = { - inputLabel?: React.ReactNode - disabledDays?: DisabledDays - validationMessage?: ValidationMessage - onValidate?: (validationResponse: DateValidationResponse) => void -} - -export type UseDateValidationValue = { - validationMessage: ValidationMessage | undefined - validateDate: (args: { - date: Date | undefined - inputValue: string - }) => ReturnType - updateValidation: (validationResponse: DateValidationResponse) => void -} - -export const useDateValidation = ({ - inputLabel, - disabledDays, - validationMessage, - onValidate, -}: UseDateValidationArgs): UseDateValidationValue => { - const [inbuiltValidationMessage, setInbuiltValidationMessage] = useState< - ValidationMessage | undefined - >() - - const shouldUseInbuiltDateValidation = onValidate === undefined - - const updateValidation = getDateValidationHandler({ - onValidate, - setInbuiltValidationMessage, - inputLabel, - }) - - const validateSingleDate: UseDateValidationValue["validateDate"] = ({ - date, - inputValue, - }) => - validateDate({ - date, - inputValue, - disabledDays, - }) - - return { - validationMessage: shouldUseInbuiltDateValidation - ? inbuiltValidationMessage - : validationMessage, - validateDate: validateSingleDate, - updateValidation, - } -} diff --git a/packages/components/src/FilterDatePicker/index.ts b/packages/components/src/FilterDatePicker/index.ts deleted file mode 100644 index c65d1ce..0000000 --- a/packages/components/src/FilterDatePicker/index.ts +++ /dev/null @@ -1,6 +0,0 @@ -export * from "./FilterDatePicker" -export * from "./subcomponents/FilterDatePickerField" -export * from "./types" -export * from "./hooks/useDateValidation" -export * from "./utils/getDateValidationHandler" -export * from "./utils/validateDate" diff --git a/packages/components/src/FilterDatePicker/subcomponents/DateInputField/DateInputField.module.scss b/packages/components/src/FilterDatePicker/subcomponents/DateInputField/DateInputField.module.scss deleted file mode 100644 index 5cbef0e..0000000 --- a/packages/components/src/FilterDatePicker/subcomponents/DateInputField/DateInputField.module.scss +++ /dev/null @@ -1,3 +0,0 @@ -.disabled { - opacity: 0.3; -} diff --git a/packages/components/src/FilterDatePicker/subcomponents/DateInputField/DateInputField.tsx b/packages/components/src/FilterDatePicker/subcomponents/DateInputField/DateInputField.tsx deleted file mode 100644 index 127083d..0000000 --- a/packages/components/src/FilterDatePicker/subcomponents/DateInputField/DateInputField.tsx +++ /dev/null @@ -1,93 +0,0 @@ -import React from "react" -import { DateInput, DateInputProps } from "@kaizen/date-picker" -import { FieldMessage } from "@kaizen/draft-form" -import { - DateInputDescription, - DateInputDescriptionProps, -} from "~components/FilterDateRangePicker/subcomponents/DateInputDescription" - -import { ValidationMessage } from "../../types" -import styles from "./DateInputField.module.scss" - -export interface DateInputFieldProps - extends Omit { - id: string - locale: Locale - /** - * A description that provides context for the text field - */ - description?: DateInputDescriptionProps["description"] - isReversed?: boolean - validationMessage?: ValidationMessage - disabled?: boolean - labelText?: DateInputProps["labelText"] -} - -export const DateInputField = React.forwardRef< - HTMLInputElement, - DateInputFieldProps ->( - ( - { - id, - labelText, - description, - disabled, - isReversed = false, - validationMessage, - locale, - classNameOverride, - ...restProps - }, - ref - ) => { - const descriptionId = `${id}--field-message` - - const errorMessageId = validationMessage - ? `${id}--date-error-message` - : undefined - - const inputDescribedBy = errorMessageId - ? `${errorMessageId} ${descriptionId}` - : descriptionId - - const dateIsInvalid = errorMessageId !== undefined - - return ( -
- - - {validationMessage && ( - - )} - - - } - reversed={isReversed} - classNameOverride={disabled ? styles.disabled : undefined} - /> -
- ) - } -) -DateInputField.displayName = "DateInputField" diff --git a/packages/components/src/FilterDatePicker/subcomponents/DateInputField/index.ts b/packages/components/src/FilterDatePicker/subcomponents/DateInputField/index.ts deleted file mode 100644 index f73b69a..0000000 --- a/packages/components/src/FilterDatePicker/subcomponents/DateInputField/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./DateInputField" diff --git a/packages/components/src/FilterDatePicker/subcomponents/FilterDatePickerField/FilterDatePickerField.module.scss b/packages/components/src/FilterDatePicker/subcomponents/FilterDatePickerField/FilterDatePickerField.module.scss deleted file mode 100644 index db8ac8f..0000000 --- a/packages/components/src/FilterDatePicker/subcomponents/FilterDatePickerField/FilterDatePickerField.module.scss +++ /dev/null @@ -1,7 +0,0 @@ -@import "~@kaizen/design-tokens/sass/spacing"; - -.filterDatePickerField { - width: 288px; - display: grid; - gap: $spacing-16; -} diff --git a/packages/components/src/FilterDatePicker/subcomponents/FilterDatePickerField/FilterDatePickerField.spec.tsx b/packages/components/src/FilterDatePicker/subcomponents/FilterDatePickerField/FilterDatePickerField.spec.tsx deleted file mode 100644 index cc23ad2..0000000 --- a/packages/components/src/FilterDatePicker/subcomponents/FilterDatePickerField/FilterDatePickerField.spec.tsx +++ /dev/null @@ -1,337 +0,0 @@ -import React, { useState, FocusEvent } from "react" -import { render, screen, waitFor } from "@testing-library/react" -import userEvent from "@testing-library/user-event" -import { FilterDatePickerField, FilterDatePickerFieldProps } from "." - -const user = userEvent.setup() - -const inputDateOnSubmit = jest.fn() - -const FilterDatePickerFieldWrapper = ({ - selectedDate, - ...restProps -}: Partial): JSX.Element => { - const [selectedValue, setSelectedValue] = useState( - selectedDate - ) - - return ( - - ) -} - -describe("", () => { - beforeEach(() => { - jest.clearAllMocks() - }) - - describe("Inputs", () => { - it("has empty inputs when a date is not provided", () => { - render() - - const inputDate = screen.getByLabelText("Date") - expect(inputDate).toHaveValue("") - }) - - it("pre-fills the inputs when date is provided", () => { - render( - - ) - - const inputDate = screen.getByLabelText("Date") - expect(inputDate).toHaveValue("1 May 2022") - }) - - it("allows customising the input labels", () => { - render( - - ) - - const date = screen.getByLabelText("Due date") - expect(date).toHaveValue("1 May 2022") - }) - - describe("onBlur", () => { - it("updates date input and calendar values correctly on blur", async () => { - const inputDateOnBlur = jest.fn() - - render( - - ) - - const inputDate = screen.getByLabelText("Date") - expect(inputDate).toHaveValue("2 May 2022") - - const targetDay = screen.getByRole("button", { - name: "1st May (Sunday)", - }) - expect(targetDay).not.toHaveAttribute("aria-pressed") - - await user.click(inputDate) - await user.clear(inputDate) - await user.type(inputDate, "01/05/2022") - - await user.click(document.body) - - await waitFor(() => { - expect(inputDate).toHaveValue("1 May 2022") - expect(inputDateOnBlur).toHaveBeenCalled() - expect(targetDay).toHaveAttribute("aria-pressed", "true") - }) - }) - }) - - describe("Press Enter key", () => { - it("updates calendar values and calls submit when the date is valid", async () => { - render( - - ) - - const inputDate = screen.getByLabelText("Date") - expect(inputDate).toHaveValue("2 May 2022") - - const targetDay = screen.getByRole("button", { - name: "1st May (Sunday)", - }) - expect(targetDay).not.toHaveAttribute("aria-pressed") - - await user.click(inputDate) - await user.clear(inputDate) - await user.type(inputDate, "01/05/2022") - await user.keyboard("{Enter}") - - await waitFor(() => { - expect(targetDay).toHaveAttribute("aria-pressed", "true") - expect(inputDateOnSubmit).toHaveBeenCalledWith(new Date("2022-05-01")) - }) - }) - - it("does not call submit when the date is invalid", async () => { - render( - - ) - - const inputDate = screen.getByLabelText("Date") - await user.click(inputDate) - await user.clear(inputDate) - await user.type(inputDate, "32/05/2022") - await user.keyboard("{Enter}") - - await waitFor(() => { - expect(inputDateOnSubmit).not.toHaveBeenCalled() - }) - }) - }) - - it("updates the calendar month to match the new start date input", async () => { - render( - - ) - - const inputDate = screen.getByLabelText("Date") - expect(inputDate).toHaveValue("2 May 2022") - - expect(screen.getByText("May 2022")).toBeVisible() - - await user.clear(inputDate) - await user.type(inputDate, "19/02/2020") - - await user.tab({ shift: true }) - - await waitFor(() => { - expect(screen.queryByText("May 2022")).not.toBeInTheDocument() - }) - }) - }) - - describe("Calendar", () => { - it("shows the default month as the start month when there isn't a selected value", () => { - render( - - ) - - expect(screen.getByText("May 2022")).toBeVisible() - }) - - it("shows the selected start date month as the start month when provided", () => { - render( - - ) - - expect(screen.getByText("May 2022")).toBeVisible() - }) - - it("shows the current month as the start month when selected date is invalid", () => { - render() - const currentMonth = new Date().toLocaleDateString("en-AU", { - month: "long", - year: "numeric", - }) - expect(screen.getByText(currentMonth)).toBeVisible() - }) - - it("calls the onDateSubmit when selecting a date", async () => { - render( - - ) - const targetDay = screen.getByRole("button", { - name: "15th May (Sunday)", - }) - - await user.click(targetDay) - - await waitFor(() => { - expect(inputDateOnSubmit).toHaveBeenCalled() - }) - }) - - it("updates the input when changing the date", async () => { - render( - - ) - - const inputDate = screen.getByLabelText("Date") - expect(inputDate).toHaveValue("15 May 2022") - - const targetDay = screen.getByRole("button", { - name: "12th May (Thursday)", - }) - expect(targetDay).not.toHaveAttribute("aria-pressed") - await user.click(targetDay) - - await waitFor(() => { - expect(targetDay).toHaveAttribute("aria-pressed", "true") - expect(inputDate).toHaveValue("12 May 2022") - }) - }) - - it("clears the inputs when clearing the calendar value", async () => { - render( - - ) - - const inputDate = screen.getByLabelText("Date") - expect(inputDate).toHaveValue("15 May 2022") - - const firstSelectedDay = screen.getByRole("button", { - name: "15th May (Sunday)", - }) - await user.click(firstSelectedDay) - - await waitFor(() => { - expect(inputDate).toHaveValue("") - expect(inputDateOnSubmit).toHaveBeenCalledWith(undefined) - }) - }) - }) - - describe("Validation", () => { - const dateErrorId = "#test__filter-date-picker--input--date-error-message" - - describe("Custom validation", () => { - it("shows validation messages passed in from the consumer", () => { - render( - undefined} - validationMessage={{ - status: "error", - message: "Date error message", - }} - /> - ) - - expect(screen.getByText("Date error message")).toBeVisible() - }) - }) - - describe("Inbuilt validation", () => { - it("shows inbuilt validation messages", async () => { - const { container } = render() - - const inputDate = screen.getByLabelText("Date") - - await user.clear(inputDate) - await user.type(inputDate, "potato") - - await user.click(document.body) - - await waitFor(() => { - const dateErrorContainer = container.querySelector(dateErrorId) - expect(dateErrorContainer).toHaveTextContent( - "potato is an invalid date" - ) - }) - }) - - it("shows inbuilt validation messages for pre-existing values", () => { - const { container } = render( - - ) - - const dateErrorContainer = container.querySelector(dateErrorId) - - expect(dateErrorContainer).toHaveTextContent( - "15/05/2022 is not available, try another date" - ) - }) - }) - - it("does not call onDateSubmit when the input value is invalid", async () => { - const { getByLabelText } = render() - - const inputDate = getByLabelText("Date") - await user.clear(inputDate) - await user.type(inputDate, "potato") - await user.tab() - - await waitFor(() => { - expect(inputDateOnSubmit).not.toHaveBeenCalled() - }) - }) - - it("re-validates values when selecting a value using the calendar", async () => { - const { container } = render( - - ) - - const dateErrorContainer = container.querySelector(dateErrorId) - - await waitFor(() => { - expect(dateErrorContainer).toHaveTextContent( - "Invalid Date is an invalid date" - ) - }) - - const targetDay = screen.getByRole("button", { - name: "12th May (Thursday)", - }) - - await user.click(targetDay) - - await waitFor(() => { - expect(dateErrorContainer).not.toBeInTheDocument() - }) - }) - }) -}) diff --git a/packages/components/src/FilterDatePicker/subcomponents/FilterDatePickerField/FilterDatePickerField.tsx b/packages/components/src/FilterDatePicker/subcomponents/FilterDatePickerField/FilterDatePickerField.tsx deleted file mode 100644 index 4c8f851..0000000 --- a/packages/components/src/FilterDatePicker/subcomponents/FilterDatePickerField/FilterDatePickerField.tsx +++ /dev/null @@ -1,201 +0,0 @@ -import React, { HTMLAttributes, useEffect, useReducer } from "react" -import classnames from "classnames" -import { - CalendarSingle, - CalendarSingleProps, - isInvalidDate, - getLocale, -} from "@kaizen/date-picker" -import { FilterProps } from "~components/Filter" -import { useDateValidation } from "~components/FilterDatePicker" -import { transformDateToInputValue } from "~components/FilterDatePicker/utils/transformDateToInputValue" -import { DateInputDescriptionProps } from "~components/FilterDateRangePicker/subcomponents/DateInputDescription" -import { DataAttributes } from "~types/DataAttributes" -import { DisabledDays, FilterDateSupportedLocales } from "~types/DatePicker" -import { OverrideClassName } from "~types/OverrideClassName" -import { useDateInputHandlers } from "../../hooks/useDateInputHandlers" -import { DateValidationResponse, ValidationMessage } from "../../types" -import { DateInputField, DateInputFieldProps } from "../DateInputField" -import { filterDatePickerFieldReducer } from "./filterDatePickerFieldReducer" -import styles from "./FilterDatePickerField.module.scss" - -type FilterInputProps = Omit, "value"> & - DataAttributes - -export interface FilterDatePickerFieldProps - extends OverrideClassName> { - id: string - locale: FilterDateSupportedLocales - /** - * Sets first displayed month to month of provided date if there isn't a date set. - */ - defaultMonth?: CalendarSingleProps["defaultMonth"] - /** - * The date range passed in from the consumer that renders in the inputs and calendar. - */ - selectedDate: Date | undefined - /** - * Callback when date is updated either by the calendar picker or by typing and blurring. - * Date will return as `undefined` if empty, invalid or disabled. - */ - onDateChange: (date: Date | undefined) => void - /** - * Callback when date is saved/committed/submitted valid date by either by the calendar picker or by typing and blurring. - * Date will return as `undefined` if empty, invalid or disabled. - * - * Distinctly different from `change` where that is triggered on any kind of event, we expect the final valid date in this function. - */ - onDateSubmit?: (date: Date | undefined) => void - /** - * See https://react-day-picker.js.org/api/types/Matcher - */ - disabledDays?: DisabledDays - inputProps?: FilterInputProps - /** - * Custom description to provide extra context (input format help text remains). - */ - description?: DateInputDescriptionProps["description"] - validationMessage?: ValidationMessage - /** - * Callback when a date is selected. Utilises internal validation if not set. - */ - onValidate?: (validationResponse: DateValidationResponse) => void - setIsFilterOpen?: FilterProps["setIsOpen"] -} - -export const FilterDatePickerField = ({ - id, - inputProps, - locale: propsLocale, - defaultMonth, - selectedDate, - onDateChange, - onDateSubmit, - disabledDays, - description, - validationMessage, - onValidate, - classNameOverride, - ...restProps -}: FilterDatePickerFieldProps): JSX.Element => { - const locale = getLocale(propsLocale) - - const dateValidation = useDateValidation({ - disabledDays, - validationMessage, - onValidate, - }) - - const validateDate = ( - date: Date | undefined, - inputValue: string - ): Date | undefined => { - const { validationResponse, newDate } = dateValidation.validateDate({ - date, - inputValue, - }) - dateValidation.updateValidation(validationResponse) - - return newDate - } - - const [state, dispatch] = useReducer(filterDatePickerFieldReducer, { - selectedDate, - inputValue: - transformDateToInputValue(selectedDate, disabledDays, locale) || "", - startMonth: - selectedDate && !isInvalidDate(selectedDate) - ? selectedDate - : defaultMonth || new Date(), - }) - - const handleDateChange = (date: Date | undefined): void => { - onDateChange(date) - } - - const inputDateHandlers = useDateInputHandlers({ - locale, - disabledDays, - setInputValue: value => { - dispatch({ - type: "update_input_field", - inputValue: value, - }) - }, - onDateChange: date => { - // Because the input value is being tracked in the state as the user types - // we can reliably utilise state.inputValue as part of the validation message, - // which is triggered by `onBlur` function - const newDate = validateDate(date, state.inputValue) - - dispatch({ - type: "update_selected_date", - date: newDate, - }) - - handleDateChange(newDate) - }, - onDateSubmit: date => { - // Only provide consumers with a valid date to the `onDateSubmit` function - if (!isInvalidDate(date)) { - onDateSubmit?.(date) - } - }, - ...inputProps, - }) - - const handleCalendarSelect: CalendarSingleProps["onSelect"] = date => { - // Transforming the date to an InputValue and validating the date with the result - // can operate in this order because we are guaranteed a valid date from the calendar. - // - // In all other scenarios, this won't work as the return string from an invalid date - // would be "Invalid Date" and not the actual value entered by the user since we want - // the final error message to use the typed word from the user. - const inputValue = transformDateToInputValue(date, disabledDays, locale) - const newDate = validateDate(date, inputValue) - - dispatch({ - type: "update_selected_date", - date: newDate, - }) - - dispatch({ - type: "update_input_field", - inputValue, - }) - - handleDateChange(newDate) - onDateSubmit?.(newDate) - } - - useEffect(() => { - validateDate(selectedDate, state.inputValue) - }, []) - - return ( -
- - - dispatch({ type: "navigate_months", date: value }) - } - /> -
- ) -} diff --git a/packages/components/src/FilterDatePicker/subcomponents/FilterDatePickerField/filterDatePickerFieldReducer.tsx b/packages/components/src/FilterDatePicker/subcomponents/FilterDatePickerField/filterDatePickerFieldReducer.tsx deleted file mode 100644 index f345beb..0000000 --- a/packages/components/src/FilterDatePicker/subcomponents/FilterDatePickerField/filterDatePickerFieldReducer.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import { isInvalidDate } from "@kaizen/date-picker" - -type DateFieldActions = - | { - type: "update_selected_date" - date: Date | undefined - inputValue?: string - } - | { - type: "navigate_months" - date: Date | undefined - } - | { - type: "update_input_field" - inputValue: string - } - -type FilterDatePickerState = { - selectedDate: Date | undefined - inputValue: string - startMonth: Date -} - -export const filterDatePickerFieldReducer = ( - state: FilterDatePickerState, - action: DateFieldActions -): FilterDatePickerState => { - switch (action.type) { - case "update_selected_date": - return { - ...state, - selectedDate: action.date, - inputValue: - action.inputValue === undefined - ? state.inputValue - : action.inputValue, - startMonth: - action.date && !isInvalidDate(action.date) ? action.date : new Date(), - } - - case "navigate_months": - return { - ...state, - startMonth: - action.date && !isInvalidDate(action.date) ? action.date : new Date(), - } - - case "update_input_field": - return { - ...state, - inputValue: action.inputValue, - } - } -} diff --git a/packages/components/src/FilterDatePicker/subcomponents/FilterDatePickerField/index.ts b/packages/components/src/FilterDatePicker/subcomponents/FilterDatePickerField/index.ts deleted file mode 100644 index 5b17a2c..0000000 --- a/packages/components/src/FilterDatePicker/subcomponents/FilterDatePickerField/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./FilterDatePickerField" diff --git a/packages/components/src/FilterDatePicker/types.ts b/packages/components/src/FilterDatePicker/types.ts deleted file mode 100644 index 536f300..0000000 --- a/packages/components/src/FilterDatePicker/types.ts +++ /dev/null @@ -1,17 +0,0 @@ -import React from "react" -import { FieldMessageStatus } from "@kaizen/draft-form" - -export type DateValidationResponse = { - date: Date | undefined - inputValue: string | undefined // Input value upon validation - validationMessage: ValidationMessage | undefined - isDisabled: boolean - isInvalid: boolean - isEmpty: boolean - isValidDate: boolean // A date is !isDisabled && !isInvalid && !isEmpty -} - -export type ValidationMessage = { - status: FieldMessageStatus - message: string | React.ReactElement -} diff --git a/packages/components/src/FilterDatePicker/utils/getDateValidationHandler.spec.tsx b/packages/components/src/FilterDatePicker/utils/getDateValidationHandler.spec.tsx deleted file mode 100644 index 70e5a1a..0000000 --- a/packages/components/src/FilterDatePicker/utils/getDateValidationHandler.spec.tsx +++ /dev/null @@ -1,90 +0,0 @@ -import React from "react" -import { LabelledMessage } from "~components/LabelledMessage" -import { DateValidationResponse, ValidationMessage } from "../types" -import { getDateValidationHandler } from "./getDateValidationHandler" - -const onValidate = jest.fn() -const setInbuiltValidationMessage = jest.fn< - void, - [ValidationMessage | undefined] ->() - -describe("getDateValidationHandler()", () => { - afterEach(() => { - onValidate.mockClear() - setInbuiltValidationMessage.mockClear() - }) - - it("uses onValidate if defined", () => { - const handleValidate = getDateValidationHandler({ - onValidate, - setInbuiltValidationMessage, - inputLabel: "Field label", - }) - - const validationResponse = { - date: new Date("2022-05-01"), - inputValue: "01/05/2022", - validationMessage: undefined, - isInvalid: false, - isDisabled: false, - isEmpty: false, - isValidDate: true, - } - - handleValidate(validationResponse) - expect(onValidate).toBeCalledWith(validationResponse) - expect(setInbuiltValidationMessage).not.toBeCalled() - }) - - describe("when onValidate is not defined", () => { - const handleValidate = getDateValidationHandler({ - onValidate: undefined, - setInbuiltValidationMessage, - inputLabel: "Field label", - }) - - describe("without a passed in validation message", () => { - it("calls the inbuilt validation without a message or status", () => { - handleValidate({ - date: new Date("2022-05-01"), - inputValue: "01/05/2022", - validationMessage: undefined, - isInvalid: false, - isDisabled: false, - isEmpty: false, - isValidDate: true, - }) - expect(onValidate).not.toBeCalled() - expect(setInbuiltValidationMessage).toBeCalledWith(undefined) - }) - }) - - describe("with passed in validation message", () => { - it("calls the inbuilt validation with the message and status", () => { - handleValidate({ - date: new Date("2022-05-01"), - inputValue: "01/05/2022", - validationMessage: { - status: "error", - message: "Custom error message", - }, - isInvalid: false, - isDisabled: false, - isEmpty: false, - isValidDate: true, - }) - expect(onValidate).not.toBeCalled() - expect(setInbuiltValidationMessage).toBeCalledWith({ - status: "error", - message: ( - - ), - }) - }) - }) - }) -}) diff --git a/packages/components/src/FilterDatePicker/utils/getDateValidationHandler.tsx b/packages/components/src/FilterDatePicker/utils/getDateValidationHandler.tsx deleted file mode 100644 index 9dc9258..0000000 --- a/packages/components/src/FilterDatePicker/utils/getDateValidationHandler.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import React from "react" -import { LabelledMessage } from "~components/LabelledMessage" -import { getNodeText } from "~utils/getNodeText" -import { DateValidationResponse, ValidationMessage } from "../types" - -export type GetDateValidationHandlerArgs = { - onValidate: ((validationResponse: DateValidationResponse) => void) | undefined - setInbuiltValidationMessage: ( - validationMessage: ValidationMessage | undefined - ) => void - inputLabel?: React.ReactNode -} - -export const getDateValidationHandler = - ({ - onValidate, - setInbuiltValidationMessage, - inputLabel, - }: GetDateValidationHandlerArgs) => - (validationResponse: DateValidationResponse): void => { - if (onValidate) return onValidate(validationResponse) - - const { validationMessage } = validationResponse - - if (!validationMessage) { - setInbuiltValidationMessage(undefined) - return - } - - setInbuiltValidationMessage({ - status: validationMessage.status, - message: inputLabel ? ( - - ) : ( - validationMessage.message - ), - }) - } diff --git a/packages/components/src/FilterDatePicker/utils/transformDateToInputValue.ts b/packages/components/src/FilterDatePicker/utils/transformDateToInputValue.ts deleted file mode 100644 index 97c1c58..0000000 --- a/packages/components/src/FilterDatePicker/utils/transformDateToInputValue.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { DisabledDays, formatDateAsText } from "@kaizen/date-picker" - -export const transformDateToInputValue = ( - date: Date | undefined, - disabledDays: DisabledDays, - locale: Locale -): string => (date ? formatDateAsText(date, disabledDays, locale) : "") diff --git a/packages/components/src/FilterDatePicker/utils/validateDate.spec.ts b/packages/components/src/FilterDatePicker/utils/validateDate.spec.ts deleted file mode 100644 index 9714cf1..0000000 --- a/packages/components/src/FilterDatePicker/utils/validateDate.spec.ts +++ /dev/null @@ -1,128 +0,0 @@ -import { validateDate } from "./validateDate" - -describe("validateDate()", () => { - it("returns expected response when selected day is undefined", () => { - const date = undefined - const inputValue = undefined - const { validationResponse, newDate } = validateDate({ date, inputValue }) - - expect(validationResponse).toStrictEqual({ - date, - inputValue, - validationMessage: undefined, - isInvalid: false, - isDisabled: false, - isEmpty: true, - isValidDate: false, - }) - - expect(newDate).toBeUndefined() - }) - - it("returns expected response when selected day is invalid and input value is undefined", () => { - const date = new Date("potato") - const inputValue = undefined - const { validationResponse, newDate } = validateDate({ date, inputValue }) - - expect(validationResponse).toStrictEqual({ - date, - inputValue, - validationMessage: { - status: "error", - message: "Date is invalid", - }, - isInvalid: true, - isDisabled: false, - isEmpty: false, - isValidDate: false, - }) - - expect(newDate).toBeUndefined() - }) - - it("returns expected response when selected day is invalid and input value is empty string", () => { - const date = new Date("potato") - const inputValue = "" - const { validationResponse, newDate } = validateDate({ date, inputValue }) - - expect(validationResponse).toStrictEqual({ - date, - inputValue, - validationMessage: { - status: "error", - message: "Date is invalid", - }, - isInvalid: true, - isDisabled: false, - isEmpty: false, - isValidDate: false, - }) - - expect(newDate).toBeUndefined() - }) - - it("returns expected response when selected day is invalid and input value is valid string", () => { - const date = new Date("potato") - const inputValue = "potato" - const { validationResponse, newDate } = validateDate({ date, inputValue }) - - expect(validationResponse).toStrictEqual({ - date, - inputValue, - validationMessage: { - status: "error", - message: "potato is an invalid date", - }, - isInvalid: true, - isDisabled: false, - isEmpty: false, - isValidDate: false, - }) - - expect(newDate).toBeUndefined() - }) - - it("returns expected response when selected day is disabled", () => { - const date = new Date("2022-03-01") - const inputValue = "03/01/2022" - const disabledDays = [new Date("2022-03-01")] - const { validationResponse, newDate } = validateDate({ - date, - inputValue, - disabledDays, - }) - - expect(validationResponse).toStrictEqual({ - date, - inputValue, - validationMessage: { - status: "error", - message: "03/01/2022 is not available, try another date", - }, - isInvalid: false, - isDisabled: true, - isEmpty: false, - isValidDate: false, - }) - - expect(newDate).toBeUndefined() - }) - - it("returns expected response when selected day is valid", () => { - const date = new Date("2022-03-01") - const inputValue = "03/01/2022" - const { validationResponse, newDate } = validateDate({ date, inputValue }) - - expect(validationResponse).toStrictEqual({ - date, - inputValue, - validationMessage: undefined, - isInvalid: false, - isDisabled: false, - isEmpty: false, - isValidDate: true, - }) - - expect(newDate).toBe(date) - }) -}) diff --git a/packages/components/src/FilterDatePicker/utils/validateDate.ts b/packages/components/src/FilterDatePicker/utils/validateDate.ts deleted file mode 100644 index 3e82c96..0000000 --- a/packages/components/src/FilterDatePicker/utils/validateDate.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { - validateDate as dpValidateDate, - ValidateDateArgs, -} from "@kaizen/date-picker/src/utils/validateDate" -import { DateValidationResponse } from "../types" - -export type ValidateDateResponse = { - validationResponse: DateValidationResponse - newDate: Date | undefined -} - -export const validateDate = (args: ValidateDateArgs): ValidateDateResponse => { - const response = dpValidateDate(args) - - const { status, validationMessage, ...rest } = response.validationResponse - - return { - ...response, - validationResponse: { - ...rest, - validationMessage: - status && validationMessage - ? { status, message: validationMessage } - : undefined, - }, - } -} diff --git a/packages/components/src/FilterDateRangePicker/FilterDateRangePicker.spec.tsx b/packages/components/src/FilterDateRangePicker/FilterDateRangePicker.spec.tsx deleted file mode 100644 index 0d31f83..0000000 --- a/packages/components/src/FilterDateRangePicker/FilterDateRangePicker.spec.tsx +++ /dev/null @@ -1,122 +0,0 @@ -import React, { useState } from "react" -import { render, waitFor } from "@testing-library/react" -import userEvent from "@testing-library/user-event" -import { FilterButton } from "~components/FilterButton" -import { DateRange } from "~types/DatePicker" -import { FilterDateRangePicker, FilterDateRangePickerProps } from "./index" - -const user = userEvent.setup() - -const FilterDateRangePickerWrapper = ({ - selectedRange, - ...restProps -}: Partial): JSX.Element => { - const [isOpen, setIsOpen] = useState(false) - const [selectedDateRange, setSelectedDateRange] = useState< - DateRange | undefined - >(selectedRange) - - return ( - ( - - )} - label="Dates" - selectedRange={selectedDateRange} - onRangeChange={setSelectedDateRange} - locale="en-AU" - {...restProps} - /> - ) -} - -describe("", () => { - it("should not show the calendar initially", () => { - const { queryByRole } = render() - expect(queryByRole("dialog")).not.toBeInTheDocument() - }) - - describe("Filter button", () => { - it("should show the selected range in the button", () => { - const { getByRole } = render( - - ) - const filterButton = getByRole("button", { - name: "Dates : 1 May 2022 - 25 Nov 2022", - }) - expect(filterButton).toBeVisible() - }) - - it("should not show the selected range in the button if the range is not valid", () => { - const { getByRole } = render( - - ) - const filterButton = getByRole("button", { name: "Dates" }) - expect(filterButton).toBeVisible() - }) - - it("should not show a selected value in the button if there is only a partial date range", () => { - const { getByRole } = render( - - ) - const filterButton = getByRole("button", { name: "Dates" }) - expect(filterButton).toBeVisible() - }) - - it("should show the calendar when the filter button is clicked", async () => { - const { queryByRole, getByRole, getByText } = render( - - ) - expect(queryByRole("dialog")).not.toBeInTheDocument() - - const filterButton = getByRole("button", { name: "Dates" }) - await user.click(filterButton) - - await waitFor(() => { - expect(getByText("May 2022")).toBeVisible() - }) - }) - - it("should not show a date range in the button if the selected range is not valid", async () => { - const { getByRole, getByLabelText } = render( - - ) - - const filterButton = getByRole("button", { name: "Dates" }) - - await user.click(filterButton) - await waitFor(() => { - expect(getByRole("dialog")).toBeVisible() - }) - - const inputEndDate = getByLabelText("Date to") - await user.clear(inputEndDate) - await user.type(inputEndDate, "01/04/2022") - await user.tab() - - await waitFor(() => { - expect(inputEndDate).not.toHaveFocus() - expect(filterButton.textContent).toEqual("Dates") - }) - }, 10000) - }) -}) diff --git a/packages/components/src/FilterDateRangePicker/FilterDateRangePicker.tsx b/packages/components/src/FilterDateRangePicker/FilterDateRangePicker.tsx deleted file mode 100644 index 1663676..0000000 --- a/packages/components/src/FilterDateRangePicker/FilterDateRangePicker.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import React from "react" -import { getLocale } from "@kaizen/date-picker/src/utils/getLocale" -import { Filter, FilterContents, FilterProps } from "../Filter" -import { FilterButtonProps } from "../FilterButton" -import { DateRangeDisplayLabel } from "./subcomponents/DateRangeDisplayLabel" -import { - FilterDateRangePickerField, - FilterDateRangePickerFieldProps, -} from "./subcomponents/FilterDateRangePickerField" -import { isValidRange } from "./subcomponents/FilterDateRangePickerField/utils/isValidRange" -import { isCompleteDateRange } from "./utils/isCompleteDateRange" - -export interface FilterDateRangePickerProps - extends FilterDateRangePickerFieldProps { - isOpen: FilterProps["isOpen"] - setIsOpen: FilterProps["setIsOpen"] - renderTrigger: (triggerProps: FilterButtonProps) => JSX.Element -} - -export const FilterDateRangePicker = ({ - isOpen, - setIsOpen, - renderTrigger, - selectedRange, - label, - locale, - ...restProps -}: FilterDateRangePickerProps): JSX.Element => ( - - renderTrigger({ - selectedValue: - isCompleteDateRange(selectedRange) && - isValidRange(selectedRange.from, selectedRange.to) ? ( - - ) : undefined, - label, - ...triggerProps, - }) - } - > - - - - -) - -FilterDateRangePicker.displayName = "FilterDateRangePicker" diff --git a/packages/components/src/FilterDateRangePicker/_docs/FilterDateRangePicker.mdx b/packages/components/src/FilterDateRangePicker/_docs/FilterDateRangePicker.mdx deleted file mode 100644 index ce845b4..0000000 --- a/packages/components/src/FilterDateRangePicker/_docs/FilterDateRangePicker.mdx +++ /dev/null @@ -1,50 +0,0 @@ -import { ArgTypes, Controls, Description, Meta } from "@storybook/blocks" -import { ResourceLinks, KaioNotification, Installation, NoClipCanvas } from "../../../../../storybook/components" -import { LinkTo } from "../../../../../storybook/components/LinkTo" -import * as FilterDRPStories from "./FilterDateRangePicker.stories" - - - -# Filter - - - - - -Date Range Picker to use for Filtering. - - - -## Playground - - - -## API - -### Render Trigger - - - -### Selected Range - - - -### Description - - - -### Extend Input Props - - - -### Validation - - diff --git a/packages/components/src/FilterDateRangePicker/_docs/FilterDateRangePicker.stickersheet.stories.tsx b/packages/components/src/FilterDateRangePicker/_docs/FilterDateRangePicker.stickersheet.stories.tsx deleted file mode 100644 index b121610..0000000 --- a/packages/components/src/FilterDateRangePicker/_docs/FilterDateRangePicker.stickersheet.stories.tsx +++ /dev/null @@ -1,197 +0,0 @@ -import React, { useState } from "react" -import { StaticIntlProvider } from "@cultureamp/i18n-react-intl" -import { action } from "@storybook/addon-actions" -import { Meta, StoryFn } from "@storybook/react" -import { within, userEvent } from "@storybook/testing-library" -import isChromatic from "chromatic" -import { DateRange } from "~types/DatePicker" -import { StickerSheet } from "../../../../../storybook/components/StickerSheet" -import { FilterButton } from "../../FilterButton" -import { FilterDateRangePicker } from "../index" -import { FilterDateRangePickerField } from "../subcomponents/FilterDateRangePickerField" - -const IS_CHROMATIC = isChromatic() - -export default { - title: "Components/Filter Date Range Picker", - parameters: { - chromatic: { disable: false }, - controls: { disable: true }, - }, -} satisfies Meta - -const StickerSheetTemplate: StoryFn<{ textDirection: "ltr" | "rtl" }> = ({ - textDirection, -}) => { - const [isOpenPartial, setIsOpenPartial] = useState(false) - const [rangePartial, setRangePartial] = useState({ - from: new Date("2022-05-15"), - }) - const [isOpenComplete, setIsOpenComplete] = useState(false) - const [rangeComplete, setRangeComplete] = useState({ - from: new Date("2022-05-15"), - to: new Date("2022-06-22"), - }) - - const [rangeFieldDefault, setRangeFieldDefault] = useState< - DateRange | undefined - >() - const [rangeFieldExisting, setRangeFieldExisting] = useState< - DateRange | undefined - >({ - from: new Date("2022-05-15"), - to: new Date("2022-06-22"), - }) - const [rangeFieldValidation, setRangeFieldValidation] = useState< - DateRange | undefined - >({ - from: new Date("2022-05-15"), - }) - - return ( - - - - - - ( - - )} - label="Dates" - locale="en-US" - selectedRange={rangePartial} - onRangeChange={setRangePartial} - /> - ( - - )} - label="Dates" - locale="en-US" - selectedRange={rangeComplete} - onRangeChange={setRangeComplete} - /> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ) -} - -const applyStickerSheetStyles = async ( - canvasElement: HTMLElement, - textDirection: "ltr" | "rtl" -): Promise => { - const canvas = within(canvasElement) - - const validationInputEndDate = canvas.getByTestId( - `${textDirection}-test__filter-drp-field--validation--end` - ) - await userEvent.click(validationInputEndDate) - await userEvent.type(validationInputEndDate, "potato") - await userEvent.click(document.body) - - const partialRangeButton = canvas.getByTestId( - `${textDirection}-stickersheet--filter-drp--partial-range-button` - ) - await userEvent.click(partialRangeButton) -} - -export const StickerSheetDefault = StickerSheetTemplate.bind({}) -StickerSheetDefault.storyName = "Sticker Sheet (Default)" -StickerSheetDefault.args = { - textDirection: "ltr", -} -StickerSheetDefault.play = ({ canvasElement }) => { - applyStickerSheetStyles(canvasElement, "ltr") -} - -export const StickerSheetRTL = StickerSheetTemplate.bind({}) -StickerSheetRTL.storyName = "Sticker Sheet (RTL)" -StickerSheetRTL.args = { - textDirection: "rtl", -} -StickerSheetRTL.play = ({ canvasElement }) => { - applyStickerSheetStyles(canvasElement, "rtl") -} diff --git a/packages/components/src/FilterDateRangePicker/_docs/FilterDateRangePicker.stories.tsx b/packages/components/src/FilterDateRangePicker/_docs/FilterDateRangePicker.stories.tsx deleted file mode 100644 index 6df46c8..0000000 --- a/packages/components/src/FilterDateRangePicker/_docs/FilterDateRangePicker.stories.tsx +++ /dev/null @@ -1,449 +0,0 @@ -import React, { useEffect, useState } from "react" -import { Meta, StoryFn } from "@storybook/react" -import Highlight from "react-highlight" -import { Paragraph } from "@kaizen/typography" -import { renderTriggerControls } from "~components/Filter/_docs/controls/renderTriggerControls" -import { - FilterButton, - FilterButtonProps, - FilterButtonRemovable, -} from "~components/FilterButton" -import { DateValidationResponse } from "~components/FilterDatePicker" -import { DateRange } from "~types/DatePicker" -import { - DateRangeFieldValidationMessage, - FilterDateRangePicker, -} from "../index" -import { FilterDateRangePickerField } from "../subcomponents/FilterDateRangePickerField" -import { defaultMonthControls } from "./controls/defaultMonthControls" -import { disabledDaysControls } from "./controls/disabledDaysControls" -import { validationControls } from "./controls/validationControls" - -export default { - title: "Components/Filter Date Range Picker", - component: FilterDateRangePicker, - args: { - label: "Dates", - locale: "en-AU", - }, - argTypes: { - ...defaultMonthControls, - ...validationControls, - disabledDays: disabledDaysControls, - renderTrigger: renderTriggerControls, - locale: { - options: ["en-US", "en-AU"], - control: { type: "radio" }, - }, - inputStartDateProps: { - table: { type: { summary: 'Omit' } }, - }, - inputEndDateProps: { - table: { type: { summary: 'Omit' } }, - }, - isOpen: { control: "disabled" }, - selectedRange: { - options: ["None", "Partial Range", "Complete Range"], - control: { - type: "select", - labels: { - None: "undefined", - "Partial Range": "{ from: new Date() }", - "Complete Range": - '{ from: new Date("2022-05-01"), to: new Date("2022-05-12") }', - }, - }, - mapping: { - None: undefined, - "Partial Range": { from: new Date() }, - "Complete Range": { - from: new Date("2022-05-01"), - to: new Date("2022-05-12"), - }, - }, - }, - description: { - control: "text", - }, - }, -} satisfies Meta - -const sampleCode = ` -// This code is not connected to the controls of the attached component. -// @note: If you want a removable button, use the commented out code instead. - -import { - FilterButton, - FilterButtonProps, -// FilterButtonRemovable, - FilterDateRangePicker, -} from "@kaizen/components" - -const [isOpen, setIsOpen] = useState(false) -const [range, setRange] = useState() - -return ( - ( - - )} - // renderTrigger={(triggerButtonProps: FilterButtonProps): JSX.Element => ( - // undefined, - // }} - // /> - // )} - isOpen={isOpen} - setIsOpen={setIsOpen} - selectedRange={range} - onRangeChange={setRange} - /> -) -` - -export const Playground: StoryFn = args => { - const [isOpen, setIsOpen] = useState(false) - const [range, setRange] = useState() - - useEffect(() => { - setRange(args.selectedRange) - }, [args.selectedRange]) - - return ( - - ) -} -Playground.parameters = { - docs: { - canvas: { - sourceState: "shown", - }, - source: { - code: sampleCode, - }, - }, -} -Playground.args = { - id: "filter-drp--default", - /* @ts-expect-error: Storybook controls key; see argTypes in default export */ - renderTrigger: "Filter Button", -} - -/** - * Render function for the trigger button. - * - * Provides `selectedValue`, `label`, `isOpen`, `onClick` (calls `setIsOpen`). - */ -export const RenderTrigger: StoryFn = () => { - const [isOpenButton, setIsOpenButton] = useState(false) - const [rangeButton, setRangeButton] = useState() - const [isOpenRemovable, setIsOpenRemovable] = useState(false) - const [rangeRemovable, setRangeRemovable] = useState() - - return ( -
- ( - - )} - isOpen={isOpenButton} - setIsOpen={setIsOpenButton} - selectedRange={rangeButton} - onRangeChange={setRangeButton} - /> - ( - undefined, - }} - /> - )} - isOpen={isOpenRemovable} - setIsOpen={setIsOpenRemovable} - selectedRange={rangeRemovable} - onRangeChange={setRangeRemovable} - /> -
- ) -} - -/** - * Selected value will only be passed into the Filter Button when date range has both a Start and End date. - */ -export const SelectedRange: StoryFn = () => { - const commonProps = { - locale: "en-AU", - renderTrigger: (triggerButtonProps: FilterButtonProps): JSX.Element => ( - - ), - } - - const [isOpenNotSelected, setIsOpenNotSelected] = useState(false) - const [isOpenPartial, setIsOpenPartial] = useState(false) - const [isOpenComplete, setIsOpenComplete] = useState(false) - const [rangeNotSelected, setRangeNotSelected] = useState< - DateRange | undefined - >() - const [rangePartial, setRangePartial] = useState({ - from: new Date(), - }) - const [rangeComplete, setRangeComplete] = useState({ - from: new Date("2022-05-01"), - to: new Date("2022-05-12"), - }) - - return ( -
- - - -
- ) -} - -/** - * Custom description to provide extra context (input format help text remains). - */ -export const Description: StoryFn = () => { - const [isOpen, setIsOpen] = useState(false) - - return ( - ( - - )} - isOpen={isOpen} - setIsOpen={setIsOpen} - selectedRange={undefined} - onRangeChange={(): void => undefined} - description="This is a custom description" - /> - ) -} - -/** - * Add extra props (eg. data-attributes) to the Start or End date inputs - * using `inputStartDateProps` and/or `inputEndDateProps`. - */ -export const ExtendInputProps: StoryFn = () => { - const [isOpen, setIsOpen] = useState(false) - - return ( - ( - - )} - isOpen={isOpen} - setIsOpen={setIsOpen} - selectedRange={undefined} - onRangeChange={(): void => undefined} - inputStartDateProps={{ - "data-testid": "filterdrp--input-start-testid", - }} - inputEndDateProps={{ - "data-testid": "filterdrp--input-end-testid", - }} - /> - ) -} - -const ValidationHelpText = ({ - validationResponse, -}: { - validationResponse: DateValidationResponse | undefined -}): JSX.Element => ( -
- - NOTE: This story includes additional custom validation to provide some - guidance when dealing with validation other than date isInvalid or - isDisabled. - -
    -
  • - There will be a caution when the selectedDay is valid{" "} - but is not within this year. -
    • -
  • - There will be an error when the{" "} - submit button is clicked and there is a{" "} - current error. -
    • -
- - The onValidate callback returns a{" "} - validationResponse object which provides data such as a - default validation message, and can be utilised for custom validation. - - - - {JSON.stringify(validationResponse, null, "\t")} - - -
    -
  • - isInvalid: A date that cannot be parsed. e.g - "potato". -
    • -
  • - isDisabled: A date that have been set as disabled through - the disabledDates prop. -
    • -
  • - isEmpty: Input is empty. -
    • -
  • - isValidDate: Date input that is not invalid{" "} - nor disabled nor empty. -
    • -
-
-) - -/** - * Contents extracted from within the Filter to showcase the validation. - */ -export const Validation: StoryFn = () => { - const [range, setRange] = useState() - const [response, setResponse] = useState() - const [validationMessage, setValidationMessage] = useState< - DateRangeFieldValidationMessage | undefined - >() - - const handleValidate = ( - validationResponse: DateValidationResponse, - input: "dateStart" | "dateEnd" - ): void => { - setResponse(validationResponse) - // An example of additional validation - if ( - validationResponse.isValidDate && - validationResponse.date?.getFullYear() !== new Date().getFullYear() - ) { - setValidationMessage(currentValue => ({ - ...currentValue, - [input]: { - status: "caution", - message: `(${input}) Date is not this year`, - }, - })) - return - } - - setValidationMessage(currentValue => ({ - ...currentValue, - [input]: validationResponse.validationMessage, - })) - } - - const handleDateStartValidate = ( - validationResponse: DateValidationResponse - ): void => handleValidate(validationResponse, "dateStart") - - const handleDateEndValidate = ( - validationResponse: DateValidationResponse - ): void => handleValidate(validationResponse, "dateEnd") - - const submitRequest: React.FormEventHandler = e => { - e.preventDefault() - - let errors: DateRangeFieldValidationMessage | undefined - - if (validationMessage?.dateStart) { - errors = { - dateStart: { status: "error", message: "Error for start date" }, - } - } - - if (validationMessage?.dateEnd) { - errors = { - ...errors, - dateEnd: { status: "error", message: "Error for end date" }, - } - } - - if (errors) { - setValidationMessage(errors) - return alert("Error") - } - - alert("Success") - } - - return ( - <> -
- -
- -
- - - - - ) -} -Validation.parameters = { - docs: { source: { type: "code" } }, - controls: { disable: true }, -} diff --git a/packages/components/src/FilterDateRangePicker/_docs/controls/defaultMonthControls.ts b/packages/components/src/FilterDateRangePicker/_docs/controls/defaultMonthControls.ts deleted file mode 100644 index 9f3b555..0000000 --- a/packages/components/src/FilterDateRangePicker/_docs/controls/defaultMonthControls.ts +++ /dev/null @@ -1,16 +0,0 @@ -export const defaultMonthControls = { - defaultMonth: { - options: ["Default", "May2022"], - control: { - type: "select", - labels: { - Default: "Default (undefined)", - May2022: "May 2022", - }, - }, - mapping: { - Default: undefined, - May2022: new Date("2022-05-01"), - }, - }, -} diff --git a/packages/components/src/FilterDateRangePicker/_docs/controls/disabledDaysControls.ts b/packages/components/src/FilterDateRangePicker/_docs/controls/disabledDaysControls.ts deleted file mode 100644 index 544abf2..0000000 --- a/packages/components/src/FilterDateRangePicker/_docs/controls/disabledDaysControls.ts +++ /dev/null @@ -1,42 +0,0 @@ -export const disabledDaysControls = { - options: [ - "None", - "bool", - "Date", - "DateMultiple", - "Range", - "DateBefore", - "DateAfter", - "DateInterval", - "DayOfWeek", - ], - control: { - type: "select", - labels: { - None: "undefined", - bool: "true", - Date: "new Date()", - DateMultiple: '[new Date("2022-05-01"), new Date("2022-05-22")]', - Range: '{ from: new Date("2022-05-01"), to: new Date("2022-05-12") }', - DateBefore: '{ before: new Date("2022-05-16") }', - DateAfter: '{ after: new Date("2022-05-21") }', - DateInterval: - '{ before: new Date("2022-05-30"), after: new Date("2022-05-15") }', - DayOfWeek: "{ dayOfWeek: [6, 0] } (Saturday and Sunday)", - }, - }, - mapping: { - None: undefined, - bool: true, - Date: new Date(), - DateMultiple: [new Date("2022-05-01"), new Date("2022-05-22")], - Range: { from: new Date("2022-05-01"), to: new Date("2022-05-12") }, - DateBefore: { before: new Date("2022-05-16") }, - DateAfter: { after: new Date("2022-05-21") }, - DateInterval: { - before: new Date("2022-05-30"), - after: new Date("2022-05-15"), - }, - DayOfWeek: { dayOfWeek: [6, 0] }, - }, -} diff --git a/packages/components/src/FilterDateRangePicker/_docs/controls/validationControls.ts b/packages/components/src/FilterDateRangePicker/_docs/controls/validationControls.ts deleted file mode 100644 index 5cb659d..0000000 --- a/packages/components/src/FilterDateRangePicker/_docs/controls/validationControls.ts +++ /dev/null @@ -1,82 +0,0 @@ -import { action } from "@storybook/addon-actions" - -export const validationControls = { - onValidate: { - options: ["dateStart", "dateEnd", "dateRange"], - control: { - type: "select", - labels: { - dateStart: '{ dateStart: action("validate start date") }', - dateEnd: '{ dateEnd: action("validate end date") }', - dateRange: - '{ dateStart: action("validate start date"), dateEnd: action("validate end date") }', - }, - }, - mapping: { - dateStart: { dateStart: action("validate start date") }, - dateEnd: { dateEnd: action("validate end date") }, - dateRange: { - dateStart: action("validate start date"), - dateEnd: action("validate end date"), - }, - }, - }, - validationMessage: { - options: [ - "dateStartError", - "dateEndError", - "dateRangeError", - "dateRangeCautionError", - ], - control: { - type: "select", - labels: { - dateStartError: - '{ dateStart: { status: "error", message: \'"Date from" cannot be after the "Date to" selection.\' } }', - dateEndError: - '{ dateEnd: { status: "error", message: \'"Date to" cannot be earlier than the "Date from" selection.\' } }', - dateRangeError: - '{ dateStart: { status: "error", message: \'"Date from" cannot be after the "Date to" selection.\' }, dateEnd: { status: "error", message: \'"Date to" cannot be earlier than the "Date from" selection.\' } }', - dateRangeCautionError: - '{ dateStart: { status: "caution", message: \'"Date from" is close to the submission date.\' }, dateEnd: { status: "error", message: \'"Date to" cannot be earlier than the "Date from" selection.\' } }', - }, - }, - mapping: { - dateStartError: { - dateStart: { - status: "error", - message: '"Date from" cannot be after the "Date to" selection.', - }, - }, - dateEndError: { - dateEnd: { - status: "error", - message: - '"Date to" cannot be earlier than the "Date from" selection.', - }, - }, - dateRangeError: { - dateStart: { - status: "error", - message: '"Date from" cannot be after the "Date to" selection.', - }, - dateEnd: { - status: "error", - message: - '"Date to" cannot be earlier than the "Date from" selection.', - }, - }, - dateRangeCautionError: { - dateStart: { - status: "caution", - message: '"Date from" is close to the submission date.', - }, - dateEnd: { - status: "error", - message: - '"Date to" cannot be earlier than the "Date from" selection.', - }, - }, - }, - }, -} diff --git a/packages/components/src/FilterDateRangePicker/index.ts b/packages/components/src/FilterDateRangePicker/index.ts deleted file mode 100644 index 9b10585..0000000 --- a/packages/components/src/FilterDateRangePicker/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from "./FilterDateRangePicker" -export * from "./subcomponents/FilterDateRangePickerField/types" diff --git a/packages/components/src/FilterDateRangePicker/subcomponents/DateInputDescription/DateInputDescription.module.scss b/packages/components/src/FilterDateRangePicker/subcomponents/DateInputDescription/DateInputDescription.module.scss deleted file mode 100644 index 18adf82..0000000 --- a/packages/components/src/FilterDateRangePicker/subcomponents/DateInputDescription/DateInputDescription.module.scss +++ /dev/null @@ -1,10 +0,0 @@ -@import "~@kaizen/design-tokens/sass/spacing"; - -.dateInputDescription { - display: inline; -} - -.dateInputFormatContainer { - margin-inline-start: $spacing-6; - white-space: nowrap; -} diff --git a/packages/components/src/FilterDateRangePicker/subcomponents/DateInputDescription/DateInputDescription.spec.tsx b/packages/components/src/FilterDateRangePicker/subcomponents/DateInputDescription/DateInputDescription.spec.tsx deleted file mode 100644 index 4c1575d..0000000 --- a/packages/components/src/FilterDateRangePicker/subcomponents/DateInputDescription/DateInputDescription.spec.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import React from "react" -import { render } from "@testing-library/react" -import { enUS } from "date-fns/locale" -import { DateInputDescription } from "./DateInputDescription" - -describe("DateInputDescription", () => { - it("returns template string when description is undefined", () => { - const { container } = render() - expect(container).toHaveTextContent("Input format:mm/dd/yyyy") - }) - - it("returns template string when description is empty string", () => { - const { container } = render( - - ) - expect(container).toHaveTextContent("Input format:mm/dd/yyyy") - }) - - it("returns template string when description is a string", () => { - const { container } = render( - - ) - expect(container).toHaveTextContent( - "Custom description here(Input format:mm/dd/yyyy)" - ) - }) - - it("returns template string when description is an element", () => { - const { container } = render( - Custom description span} - locale={enUS} - /> - ) - - expect(container).toHaveTextContent( - "Custom description span(Input format:mm/dd/yyyy)" - ) - }) -}) diff --git a/packages/components/src/FilterDateRangePicker/subcomponents/DateInputDescription/DateInputDescription.tsx b/packages/components/src/FilterDateRangePicker/subcomponents/DateInputDescription/DateInputDescription.tsx deleted file mode 100644 index 148eab5..0000000 --- a/packages/components/src/FilterDateRangePicker/subcomponents/DateInputDescription/DateInputDescription.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import React from "react" -import { useIntl } from "@cultureamp/i18n-react-intl" -import { LabelledMessage } from "~components/LabelledMessage" -import { formatDescriptionInputFormat } from "./utils/formatDescriptionInputFormat" -import styles from "./DateInputDescription.module.scss" - -export interface DateInputDescriptionProps { - description?: string | JSX.Element - locale: Locale -} - -export const DateInputDescription = ({ - description, - locale, -}: DateInputDescriptionProps): JSX.Element => { - const { formatMessage } = useIntl() - const hasCustomDescription = - (typeof description === "string" && description !== "") || - React.isValidElement(description) - - const translatedInputFormatMessage = formatMessage({ - id: "filterDateRangePicker.inputFormat", - defaultMessage: "Input format", - description: "Label for the 'Input format' field", - }) - - if (hasCustomDescription) { - return ( - - {description} - - ( - - ) - - - ) - } - - return ( - - ) -} - -DateInputDescription.displayName = "DateInputDescription" diff --git a/packages/components/src/FilterDateRangePicker/subcomponents/DateInputDescription/index.ts b/packages/components/src/FilterDateRangePicker/subcomponents/DateInputDescription/index.ts deleted file mode 100644 index f96473b..0000000 --- a/packages/components/src/FilterDateRangePicker/subcomponents/DateInputDescription/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./DateInputDescription" diff --git a/packages/components/src/FilterDateRangePicker/subcomponents/DateInputDescription/utils/formatDescriptionInputFormat.spec.ts b/packages/components/src/FilterDateRangePicker/subcomponents/DateInputDescription/utils/formatDescriptionInputFormat.spec.ts deleted file mode 100644 index 758d384..0000000 --- a/packages/components/src/FilterDateRangePicker/subcomponents/DateInputDescription/utils/formatDescriptionInputFormat.spec.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { enUS, enAU } from "date-fns/locale" -import { formatDescriptionInputFormat } from "./formatDescriptionInputFormat" - -describe("formatDescriptionInputFormat", () => { - it("returns the en-AU date format", () => { - expect(formatDescriptionInputFormat(enAU)).toEqual("dd/mm/yyyy") - }) - - it("returns the en-US date format", () => { - expect(formatDescriptionInputFormat(enUS)).toEqual("mm/dd/yyyy") - }) -}) diff --git a/packages/components/src/FilterDateRangePicker/subcomponents/DateInputDescription/utils/formatDescriptionInputFormat.ts b/packages/components/src/FilterDateRangePicker/subcomponents/DateInputDescription/utils/formatDescriptionInputFormat.ts deleted file mode 100644 index 2f4204d..0000000 --- a/packages/components/src/FilterDateRangePicker/subcomponents/DateInputDescription/utils/formatDescriptionInputFormat.ts +++ /dev/null @@ -1,2 +0,0 @@ -export const formatDescriptionInputFormat = (locale: Locale): string => - locale.formatLong?.date({ width: "short" }).toLowerCase() diff --git a/packages/components/src/FilterDateRangePicker/subcomponents/DateRangeDisplayLabel/DateRangeDisplayLabel.module.scss b/packages/components/src/FilterDateRangePicker/subcomponents/DateRangeDisplayLabel/DateRangeDisplayLabel.module.scss deleted file mode 100644 index 4e747bf..0000000 --- a/packages/components/src/FilterDateRangePicker/subcomponents/DateRangeDisplayLabel/DateRangeDisplayLabel.module.scss +++ /dev/null @@ -1,6 +0,0 @@ -@import "~@kaizen/design-tokens/sass/spacing"; - -.dateRangeDisplayLabel { - display: inline-flex; - gap: $spacing-6; -} diff --git a/packages/components/src/FilterDateRangePicker/subcomponents/DateRangeDisplayLabel/DateRangeDisplayLabel.tsx b/packages/components/src/FilterDateRangePicker/subcomponents/DateRangeDisplayLabel/DateRangeDisplayLabel.tsx deleted file mode 100644 index 0d9cbea..0000000 --- a/packages/components/src/FilterDateRangePicker/subcomponents/DateRangeDisplayLabel/DateRangeDisplayLabel.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import React from "react" -import { formatDateAsText } from "@kaizen/date-picker/src/utils/formatDateAsText" -import styles from "./DateRangeDisplayLabel.module.scss" - -export interface DateRangeDisplayLabelProps { - dateRange: { from: Date; to: Date } - locale: Locale -} - -export const DateRangeDisplayLabel = ({ - dateRange, - locale, -}: DateRangeDisplayLabelProps): JSX.Element | null => { - const formattedDateFrom = formatDateAsText(dateRange.from, undefined, locale) - const formattedDateTo = formatDateAsText(dateRange.to, undefined, locale) - - return ( - - {formattedDateFrom} - - - {formattedDateTo} - - ) -} - -DateRangeDisplayLabel.displayName = "DateRangeDisplayLabel" diff --git a/packages/components/src/FilterDateRangePicker/subcomponents/DateRangeDisplayLabel/index.ts b/packages/components/src/FilterDateRangePicker/subcomponents/DateRangeDisplayLabel/index.ts deleted file mode 100644 index 6182659..0000000 --- a/packages/components/src/FilterDateRangePicker/subcomponents/DateRangeDisplayLabel/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./DateRangeDisplayLabel" diff --git a/packages/components/src/FilterDateRangePicker/subcomponents/DateRangeInputField/DateRangeInputField.module.scss b/packages/components/src/FilterDateRangePicker/subcomponents/DateRangeInputField/DateRangeInputField.module.scss deleted file mode 100644 index 191dbe6..0000000 --- a/packages/components/src/FilterDateRangePicker/subcomponents/DateRangeInputField/DateRangeInputField.module.scss +++ /dev/null @@ -1,48 +0,0 @@ -@import "~@kaizen/design-tokens/sass/border"; - -$input-disabled-opacity: 0.3; - -.dateRangeInputContainer { - display: flex; - margin: 0; - padding: 0; - border: none; -} - -.inputStartDate { - border-start-end-radius: 0; - border-end-end-radius: 0; - - // `postcss-preset-env` v8 has this style as a lower priority - // than what it wants to override so we must make everything important - + [class*="focusRing"] { - /* stylelint-disable declaration-no-important */ - border-start-end-radius: 0 !important; - border-end-end-radius: 0 !important; - /* stylelint-enable declaration-no-important */ - } -} - -.inputEndDate { - position: relative; - inset-inline-start: calc(-1 * #{$border-solid-border-width}); - border-start-start-radius: 0; - border-end-start-radius: 0; - - // `postcss-preset-env` v8 has this style as a lower priority - // than what it wants to override so we must make everything important - + [class*="focusRing"] { - /* stylelint-disable declaration-no-important */ - border-start-start-radius: 0 !important; - border-end-start-radius: 0 !important; - inset-inline-start: calc( - -1 * calc(2 * #{$border-solid-border-width} + 1px) - ) !important; - inset-inline-end: -1px !important; - /* stylelint-enable declaration-no-important */ - } -} - -.disabled { - opacity: $input-disabled-opacity; -} diff --git a/packages/components/src/FilterDateRangePicker/subcomponents/DateRangeInputField/DateRangeInputField.spec.tsx b/packages/components/src/FilterDateRangePicker/subcomponents/DateRangeInputField/DateRangeInputField.spec.tsx deleted file mode 100644 index a869443..0000000 --- a/packages/components/src/FilterDateRangePicker/subcomponents/DateRangeInputField/DateRangeInputField.spec.tsx +++ /dev/null @@ -1,116 +0,0 @@ -import React, { useRef } from "react" -import { render, screen } from "@testing-library/react" -import userEvent from "@testing-library/user-event" -import { enAU } from "date-fns/locale" -import { - DateRangeInputField, - DateRangeInputFieldProps, -} from "./DateRangeInputField" - -const user = userEvent.setup() - -const DateRangeInputFieldWrapper = ( - props: Partial -): JSX.Element => ( - -) - -describe("", () => { - it("has unique ids for both inputs", () => { - const { container } = render() - const inputStart = container.querySelector("#range--from") - const inputEnd = container.querySelector("#range--to") - expect(inputStart).toBeVisible() - expect(inputEnd).toBeVisible() - }) - - it("has an accessible name for the fieldset", () => { - render() - expect(screen.getByRole("group", { name: "Dates" })).toBeVisible() - }) - - it("adds description to both inputs", () => { - render() - const inputStart = screen.getByRole("textbox", { name: "Date from" }) - const inputEnd = screen.getByRole("textbox", { name: "Date to" }) - expect(inputStart).toHaveAccessibleDescription("Input format : dd/mm/yyyy") - expect(inputEnd).toHaveAccessibleDescription("Input format : dd/mm/yyyy") - }) - - it("adds validation message to description if it exists", () => { - render( - - ) - const inputStart = screen.getByRole("textbox", { name: "Date from" }) - expect(inputStart).toHaveAccessibleDescription( - "Date Start has an error Input format : dd/mm/yyyy" - ) - expect(screen.getByText("Date Start has an error")).toBeVisible() - }) - - describe("Disabled", () => { - it("disables both inputs", () => { - render() - const inputStart = screen.getByRole("textbox", { name: "Date from" }) - const inputEnd = screen.getByRole("textbox", { name: "Date to" }) - expect(inputStart).toBeDisabled() - expect(inputEnd).toBeDisabled() - }) - }) - - describe("Refs", () => { - it("correctly passes through both input refs", async () => { - const onButtonClick = jest.fn< - void, - [string | undefined, string | undefined] - >() - - const Wrapper = (): JSX.Element => { - const inputStartDateRef = useRef(null) - const inputEndDateRef = useRef(null) - const ref = useRef({ inputStartDateRef, inputEndDateRef }) - - const handleClick = (): void => - onButtonClick( - inputStartDateRef.current?.id, - inputEndDateRef.current?.id - ) - - return ( - <> - - - - ) - } - - render() - - await user.click(screen.getByText("Click me")) - expect(onButtonClick).toBeCalledWith("test__id--from", "test__id--to") - }) - }) -}) diff --git a/packages/components/src/FilterDateRangePicker/subcomponents/DateRangeInputField/DateRangeInputField.tsx b/packages/components/src/FilterDateRangePicker/subcomponents/DateRangeInputField/DateRangeInputField.tsx deleted file mode 100644 index ccea934..0000000 --- a/packages/components/src/FilterDateRangePicker/subcomponents/DateRangeInputField/DateRangeInputField.tsx +++ /dev/null @@ -1,151 +0,0 @@ -import React, { HTMLAttributes } from "react" -import classnames from "classnames" -import { VisuallyHidden } from "@kaizen/a11y" -import { - DateInput, - DateInputProps, -} from "@kaizen/date-picker/src/_subcomponents/DateInput" -import { FieldMessage } from "@kaizen/draft-form" -import { OverrideClassName } from "~types/OverrideClassName" -import { isRefObject } from "~utils/isRefObject" -import { - DateInputDescription, - DateInputDescriptionProps, -} from "../DateInputDescription" -import { - DateRangeValidationMessage, - DateRangeValidationMessageProps, -} from "../DateRangeValidationMessage" -import styles from "./DateRangeInputField.module.scss" - -export interface DateRangeInputFieldProps - extends OverrideClassName> { - id: string - legend: string - - inputStartDateProps: Omit - inputEndDateProps: Omit - - locale: Locale - /** - * A description that provides context for the text field - */ - description?: DateInputDescriptionProps["description"] - isReversed?: boolean - validationMessage?: DateRangeValidationMessageProps["validationMessage"] - disabled?: boolean -} - -export type DateRangeInputFieldRefs = { - inputStartDateRef?: React.RefObject - inputEndDateRef?: React.RefObject -} - -export const DateRangeInputField = React.forwardRef< - DateRangeInputFieldRefs, - DateRangeInputFieldProps ->( - ( - { - id, - legend, - inputStartDateProps, - inputEndDateProps, - description, - disabled, - isReversed = false, - validationMessage, - locale, - classNameOverride, - ...restProps - }, - ref - ) => { - const customRefObject = isRefObject(ref) ? ref.current : null - const inputStartDateRef = customRefObject?.inputStartDateRef - const inputEndDateRef = customRefObject?.inputEndDateRef - - const descriptionId = `${id}--field-message` - - // Date Start aria labels - const dateStartErrorMessageId = validationMessage?.dateStart - ? `${id}--date-start-error-message` - : undefined - - const dateStartInputDescribedBy = dateStartErrorMessageId - ? `${dateStartErrorMessageId} ${descriptionId}` - : descriptionId - - const dateStartIsInvalid = dateStartErrorMessageId !== undefined - - // Date End aria labels - const dateEndErrorMessageId = validationMessage?.dateEnd - ? `${id}--date-end-error-message` - : undefined - - const dateEndInputDescribedBy = dateEndErrorMessageId - ? `${dateEndErrorMessageId} ${descriptionId}` - : descriptionId - - const dateEndIsInvalid = dateEndErrorMessageId !== undefined - - return ( -
-
- - {legend} - - - -
- - {validationMessage && ( - - )} - - - } - reversed={isReversed} - classNameOverride={disabled ? styles.disabled : undefined} - /> -
- ) - } -) -DateRangeInputField.displayName = "DateRangeInputField" diff --git a/packages/components/src/FilterDateRangePicker/subcomponents/DateRangeInputField/index.ts b/packages/components/src/FilterDateRangePicker/subcomponents/DateRangeInputField/index.ts deleted file mode 100644 index e94d07e..0000000 --- a/packages/components/src/FilterDateRangePicker/subcomponents/DateRangeInputField/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./DateRangeInputField" diff --git a/packages/components/src/FilterDateRangePicker/subcomponents/DateRangeValidationMessage/DateRangeValidationMessage.module.scss b/packages/components/src/FilterDateRangePicker/subcomponents/DateRangeValidationMessage/DateRangeValidationMessage.module.scss deleted file mode 100644 index 92d44e2..0000000 --- a/packages/components/src/FilterDateRangePicker/subcomponents/DateRangeValidationMessage/DateRangeValidationMessage.module.scss +++ /dev/null @@ -1,6 +0,0 @@ -@import "~@kaizen/design-tokens/sass/spacing"; - -.fieldMessageList { - margin: $spacing-0; - padding-inline-start: $spacing-24; -} diff --git a/packages/components/src/FilterDateRangePicker/subcomponents/DateRangeValidationMessage/DateRangeValidationMessage.spec.tsx b/packages/components/src/FilterDateRangePicker/subcomponents/DateRangeValidationMessage/DateRangeValidationMessage.spec.tsx deleted file mode 100644 index 7fc3b4d..0000000 --- a/packages/components/src/FilterDateRangePicker/subcomponents/DateRangeValidationMessage/DateRangeValidationMessage.spec.tsx +++ /dev/null @@ -1,91 +0,0 @@ -import React from "react" -import { render, screen, within } from "@testing-library/react" -import { DateRangeValidationMessage } from "./DateRangeValidationMessage" - -describe("", () => { - describe("when the consumer has given it a node", () => { - it("will render a single validation field message", () => { - render( - Validation message

, - }, - }} - /> - ) - expect(screen.getByText("Validation message")).toBeVisible() - }) - - it("combines multiple validation messages with the same status", () => { - const { container } = render( - - ) - const validationList = screen.getByRole("list") - const { getAllByRole } = within(validationList) - const items = getAllByRole("listitem") - - expect(items.length).toBe(2) - expect(container.getElementsByClassName("error").length).toBe(1) - }) - }) - - describe("when consumer passes validationMessage object and has different status", () => { - it("will render two validation field messages", () => { - const { container } = render( - - ) - expect(container.getElementsByClassName("error").length).toBe(1) - expect(container.getElementsByClassName("caution").length).toBe(1) - }) - }) - - it("renders an id when passed in", () => { - const { container } = render( - - ) - expect( - container.querySelector("#date-start-error-message-id") - ).toBeVisible() - expect(container.querySelector("#date-end-error-message-id")).toBeVisible() - }) -}) diff --git a/packages/components/src/FilterDateRangePicker/subcomponents/DateRangeValidationMessage/DateRangeValidationMessage.tsx b/packages/components/src/FilterDateRangePicker/subcomponents/DateRangeValidationMessage/DateRangeValidationMessage.tsx deleted file mode 100644 index 6e0b5cd..0000000 --- a/packages/components/src/FilterDateRangePicker/subcomponents/DateRangeValidationMessage/DateRangeValidationMessage.tsx +++ /dev/null @@ -1,83 +0,0 @@ -import React from "react" -import { FieldMessage } from "@kaizen/draft-form" -import { DateRangeFieldValidationMessage } from "../FilterDateRangePickerField/types" -import styles from "./DateRangeValidationMessage.module.scss" - -export interface DateRangeValidationMessageProps { - validationMessage?: DateRangeFieldValidationMessage - dateStartId?: string - dateEndId?: string - isReversed?: boolean -} - -export const DateRangeValidationMessage = ({ - validationMessage, - dateStartId, - dateEndId, - isReversed, -}: DateRangeValidationMessageProps): JSX.Element | null => { - if (!validationMessage) return null - - const dateStart = validationMessage.dateStart - const dateEnd = validationMessage.dateEnd - - if (dateStart && dateEnd) { - if (dateStart.status === dateEnd.status) { - return ( - -
  • {dateStart.message}
    • -
  • {dateEnd.message}
    • - - } - status={dateStart.status || dateEnd.status} - reversed={isReversed} - /> - ) - } - - return ( - <> - - - - ) - } - - if (dateStart) { - return ( - - ) - } - - if (dateEnd) { - return ( - - ) - } - - return null -} - -DateRangeValidationMessage.displayName = "DateRangeValidationMessage" diff --git a/packages/components/src/FilterDateRangePicker/subcomponents/DateRangeValidationMessage/index.ts b/packages/components/src/FilterDateRangePicker/subcomponents/DateRangeValidationMessage/index.ts deleted file mode 100644 index 76e89c9..0000000 --- a/packages/components/src/FilterDateRangePicker/subcomponents/DateRangeValidationMessage/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./DateRangeValidationMessage" diff --git a/packages/components/src/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/FilterDateRangePickerField.module.scss b/packages/components/src/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/FilterDateRangePickerField.module.scss deleted file mode 100644 index 266db70..0000000 --- a/packages/components/src/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/FilterDateRangePickerField.module.scss +++ /dev/null @@ -1,9 +0,0 @@ -@import "~@kaizen/design-tokens/sass/spacing"; - -.filterDateRangePickerField { - display: contents; -} - -.dateRangeInputField { - margin-bottom: $spacing-24; -} diff --git a/packages/components/src/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/FilterDateRangePickerField.spec.tsx b/packages/components/src/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/FilterDateRangePickerField.spec.tsx deleted file mode 100644 index ec5623b..0000000 --- a/packages/components/src/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/FilterDateRangePickerField.spec.tsx +++ /dev/null @@ -1,701 +0,0 @@ -import React, { useState, FocusEvent } from "react" -import { render, screen, waitFor } from "@testing-library/react" -import userEvent from "@testing-library/user-event" -import { DateRange } from "~types/DatePicker" -import { FilterDateRangePickerField, FilterDateRangePickerFieldProps } from "." - -const user = userEvent.setup() - -const FilterDateRangePickerFieldWrapper = ({ - selectedRange, - ...restProps -}: Partial): JSX.Element => { - const [selectedDateRange, setSelectedDateRange] = useState< - DateRange | undefined - >(selectedRange) - - return ( - - ) -} - -describe("", () => { - describe("Inputs", () => { - it("has empty inputs when a date range is not provided", () => { - render() - - const inputStartDate = screen.getByLabelText("Date from") - const inputEndDate = screen.getByLabelText("Date to") - expect(inputStartDate).toHaveValue("") - expect(inputEndDate).toHaveValue("") - }) - - it("pre-fills the inputs when date range is provided", () => { - render( - - ) - - const inputStartDate = screen.getByLabelText("Date from") - const inputEndDate = screen.getByLabelText("Date to") - expect(inputStartDate).toHaveValue("1 May 2022") - expect(inputEndDate).toHaveValue("22 May 2022") - }) - - it("allows customising the input labels", () => { - render( - - ) - - const inputStartDate = screen.getByLabelText("Start date") - const inputEndDate = screen.getByLabelText("End date") - expect(inputStartDate).toHaveValue("1 May 2022") - expect(inputEndDate).toHaveValue("22 May 2022") - }) - - describe("onBlur", () => { - it("updates start date input and calendar values correctly on blur", async () => { - const startDateOnBlur = jest.fn() - const endDateOnBlur = jest.fn() - - render( - - ) - - const inputStartDate = screen.getByLabelText("Date from") - const inputEndDate = screen.getByLabelText("Date to") - expect(inputStartDate).toHaveValue("2 May 2022") - expect(inputEndDate).toHaveValue("22 May 2022") - - const targetDay = screen.getByRole("button", { - name: "1st May (Sunday)", - }) - expect(targetDay).not.toHaveAttribute("aria-pressed") - - await user.click(inputStartDate) - await user.clear(inputStartDate) - await user.type(inputStartDate, "01/05/2022") - - await user.click(document.body) - - await waitFor(() => { - expect(inputStartDate).toHaveValue("1 May 2022") - expect(startDateOnBlur).toHaveBeenCalled() - expect(inputEndDate).toHaveValue("22 May 2022") - expect(endDateOnBlur).not.toHaveBeenCalled() - expect(targetDay).toHaveAttribute("aria-pressed", "true") - }) - }) - - it("updates end date input and calendar values correctly on blur", async () => { - const startDateOnBlur = jest.fn() - const endDateOnBlur = jest.fn() - - render( - - ) - - const inputStartDate = screen.getByLabelText("Date from") - const inputEndDate = screen.getByLabelText("Date to") - expect(inputStartDate).toHaveValue("1 May 2022") - expect(inputEndDate).toHaveValue("22 May 2022") - - const targetDay = screen.getByRole("button", { - name: "31st May (Tuesday)", - }) - expect(targetDay).not.toHaveAttribute("aria-pressed") - - await user.click(inputEndDate) - await user.clear(inputEndDate) - await user.type(inputEndDate, "31/05/2022") - - await user.click(document.body) - - await waitFor(() => { - expect(inputStartDate).toHaveValue("1 May 2022") - expect(startDateOnBlur).not.toHaveBeenCalled() - expect(inputEndDate).toHaveValue("31 May 2022") - expect(endDateOnBlur).toHaveBeenCalled() - expect(targetDay).toHaveAttribute("aria-pressed", "true") - }) - }) - }) - - it("updates the calendar month to match the new start date input", async () => { - render( - - ) - - const inputStartDate = screen.getByLabelText("Date from") - expect(inputStartDate).toHaveValue("2 May 2022") - - expect(screen.getByText("May 2022")).toBeVisible() - expect(screen.getByText("June 2022")).toBeVisible() - - await user.clear(inputStartDate) - await user.type(inputStartDate, "19/02/2020") - - await user.tab({ shift: true }) - - await waitFor(() => { - expect(screen.queryByText("May 2022")).not.toBeInTheDocument() - expect(screen.getByText("February 2020")).toBeVisible() - expect(screen.getByText("March 2020")).toBeVisible() - }) - }) - }) - - describe("Calendar", () => { - it("shows the default month as the start month when there isn't a selected value", () => { - render( - - ) - - expect(screen.getByText("May 2022")).toBeVisible() - expect(screen.getByText("June 2022")).toBeVisible() - }) - - it("shows the selected start date month as the start month when provided", () => { - render( - - ) - - expect(screen.getByText("May 2022")).toBeVisible() - expect(screen.getByText("June 2022")).toBeVisible() - }) - - it("shows the current month as the start month when selected start date is invalid", () => { - render( - - ) - const currentMonth = new Date().toLocaleDateString("en-AU", { - month: "long", - year: "numeric", - }) - expect(screen.getByText(currentMonth)).toBeVisible() - }) - - it("updates the range start input when changing the start date", async () => { - render( - - ) - - const inputStartDate = screen.getByLabelText("Date from") - expect(inputStartDate).toHaveValue("15 May 2022") - - const targetDay = screen.getByRole("button", { - name: "12th May (Thursday)", - }) - expect(targetDay).not.toHaveAttribute("aria-pressed") - await user.click(targetDay) - - await waitFor(() => { - expect(targetDay).toHaveAttribute("aria-pressed", "true") - expect(inputStartDate).toHaveValue("12 May 2022") - }) - }) - - it("updates the range end input when changing the end date", async () => { - render( - - ) - - const inputEndDate = screen.getByLabelText("Date to") - expect(inputEndDate).toHaveValue("15 Jun 2022") - - const targetDay = screen.getByRole("button", { - name: "23rd June (Thursday)", - }) - expect(targetDay).not.toHaveAttribute("aria-pressed") - await user.click(targetDay) - - await waitFor(() => { - expect(targetDay).toHaveAttribute("aria-pressed", "true") - expect(inputEndDate).toHaveValue("23 Jun 2022") - }) - }) - - it("clears the inputs when clearing the calendar value", async () => { - render( - - ) - - const inputStartDate = screen.getByLabelText("Date from") - const inputEndDate = screen.getByLabelText("Date to") - expect(inputStartDate).toHaveValue("15 May 2022") - expect(inputEndDate).toHaveValue("22 May 2022") - - const firstSelectedDay = screen.getByRole("button", { - name: "15th May (Sunday)", - }) - await user.click(firstSelectedDay) - - await waitFor(() => { - expect(inputStartDate).toHaveValue("") - expect(inputEndDate).toHaveValue("") - }) - }) - }) - - describe("Validation", () => { - const dateStartErrorId = - "#test__filter-date-range-picker--input--date-start-error-message" - const dateEndErrorId = - "#test__filter-date-range-picker--input--date-end-error-message" - - describe("Custom validation", () => { - it("shows validation messages passed in from the consumer", () => { - render( - undefined, - dateEnd: (): void => undefined, - }} - validationMessage={{ - dateStart: { - status: "error", - message: "Start date error message", - }, - dateEnd: { - status: "caution", - message: "End date caution message", - }, - }} - /> - ) - - expect(screen.getByText("Start date error message")).toBeVisible() - expect(screen.getByText("End date caution message")).toBeVisible() - }) - }) - - describe("Inbuilt validation", () => { - it("shows inbuilt validation messages for start date", async () => { - const { container } = render( - - ) - - const inputStartDate = screen.getByLabelText("Start date") - - await user.clear(inputStartDate) - await user.type(inputStartDate, "potato") - - await user.click(document.body) - - await waitFor(() => { - const dateStartErrorContainer = - container.querySelector(dateStartErrorId) - expect(dateStartErrorContainer).toHaveTextContent( - "Start date:potato is an invalid date" - ) - }) - }) - - it("shows inbuilt validation messages for end date", async () => { - const { container } = render( - - ) - - const inputEndDate = screen.getByLabelText("End date") - - await user.clear(inputEndDate) - await user.type(inputEndDate, "potato") - - await user.click(document.body) - - await waitFor(() => { - const dateEndErrorContainer = container.querySelector(dateEndErrorId) - expect(dateEndErrorContainer).toHaveTextContent( - "End date:potato is an invalid date" - ) - }) - }) - - it("shows inbuilt validation messages for pre-existing values", () => { - const { container } = render( - - ) - - const dateStartErrorContainer = - container.querySelector(dateStartErrorId) - expect(dateStartErrorContainer).toHaveTextContent( - "Date from:15/05/2022 is not available, try another date" - ) - - const dateEndErrorContainer = container.querySelector(dateEndErrorId) - expect(dateEndErrorContainer).toHaveTextContent( - "Date to:23/05/2022 is not available, try another date" - ) - }) - - describe("Validates end date is not before start date", () => { - const invalidDateOrderErrorMessage = - 'Date to:Cannot be earlier than the selection in "Date from"' - - it("shows error on updating end date input to be before start date", async () => { - const { container } = render( - - ) - - const inputEndDate = screen.getByLabelText("Date to") - - await user.clear(inputEndDate) - await user.type(inputEndDate, "12/05/2022") - - await user.click(document.body) - - await waitFor(() => { - const dateEndErrorContainer = - container.querySelector(dateEndErrorId) - expect(dateEndErrorContainer).toHaveTextContent( - invalidDateOrderErrorMessage - ) - }) - }) - - it("removes error on updating start date input to be before end date", async () => { - const { container } = render( - - ) - - const inputEndDate = screen.getByLabelText("Date to") - - await user.clear(inputEndDate) - await user.type(inputEndDate, "12/05/2022") - - await user.click(document.body) - - const dateEndErrorContainer = container.querySelector(dateEndErrorId) - - await waitFor(() => { - expect(dateEndErrorContainer).toHaveTextContent( - invalidDateOrderErrorMessage - ) - // End date in Calendar is deselected - expect( - screen.getAllByRole("button", { pressed: true }).length - ).toEqual(1) - }) - - const inputStartDate = screen.getByLabelText("Date from") - - await user.clear(inputStartDate) - await user.type(inputStartDate, "10/05/2022") - - await user.click(document.body) - - await waitFor(() => { - expect(dateEndErrorContainer).not.toBeInTheDocument() - // End date in Calendar is re-selected - expect( - screen.getAllByRole("button", { pressed: true }).length - ).toEqual(3) - }) - }) - it("displays only one date when the start date input is set to be before the end date", async () => { - const { container } = render( - - ) - - const inputStartDate = screen.getByLabelText("Date from") - - await user.clear(inputStartDate) - await user.type(inputStartDate, "22/06/2022") - - await user.click(document.body) - - const dateEndErrorContainer = container.querySelector(dateEndErrorId) - - await waitFor(() => { - expect(dateEndErrorContainer).toHaveTextContent( - invalidDateOrderErrorMessage - ) - // End date in Calendar is deselected - expect( - screen.getAllByRole("button", { pressed: true }).length - ).toEqual(1) - }) - }) - - it("shows error on updating start date input to be after end date", async () => { - const { container } = render( - - ) - - const inputStartDate = screen.getByLabelText("Date from") - - await user.clear(inputStartDate) - await user.type(inputStartDate, "31/05/2022") - - await user.click(document.body) - - await waitFor(() => { - const dateEndErrorContainer = - container.querySelector(dateEndErrorId) - expect(dateEndErrorContainer).toHaveTextContent( - invalidDateOrderErrorMessage - ) - }) - }) - - it("shows error if the pre-existing end date is before start date", async () => { - const { container } = render( - - ) - - await waitFor(() => { - const dateEndErrorContainer = - container.querySelector(dateEndErrorId) - expect(dateEndErrorContainer).toHaveTextContent( - invalidDateOrderErrorMessage - ) - }) - }) - }) - }) - - describe("Combined validation", () => { - it("shows custom start date validation with inbuilt end date validation", async () => { - const { container } = render( - undefined, - }} - validationMessage={{ - dateStart: { - status: "error", - message: "Start date error message", - }, - }} - /> - ) - - const inputEndDate = screen.getByLabelText("Date to") - - await user.clear(inputEndDate) - await user.type(inputEndDate, "potato") - - await user.click(document.body) - - await waitFor(() => { - expect(screen.getByText("Start date error message")).toBeVisible() - - const dateEndErrorContainer = container.querySelector(dateEndErrorId) - expect(dateEndErrorContainer).toHaveTextContent( - "Date to:potato is an invalid date" - ) - }) - }) - - it("shows custom end date validation with inbuilt start date validation", async () => { - const { container } = render( - undefined, - }} - validationMessage={{ - dateEnd: { - status: "error", - message: "End date error message", - }, - }} - /> - ) - - const inputStartDate = screen.getByLabelText("Date from") - - await user.clear(inputStartDate) - await user.type(inputStartDate, "potato") - - await user.click(document.body) - - await waitFor(() => { - expect(screen.getByText("End date error message")).toBeVisible() - - const dateStartErrorContainer = - container.querySelector(dateStartErrorId) - expect(dateStartErrorContainer).toHaveTextContent( - "Date from:potato is an invalid date" - ) - }) - }) - }) - - it("re-validates values when selecting a value using the calendar", async () => { - const { container } = render( - - ) - - const dateEndErrorContainer = container.querySelector(dateEndErrorId) - - await waitFor(() => { - expect(dateEndErrorContainer).toHaveTextContent( - "Date to:Invalid Date is an invalid date" - ) - }) - - const targetDay = screen.getByRole("button", { - name: "12th May (Thursday)", - }) - await user.click(targetDay) - - await waitFor(() => { - expect(dateEndErrorContainer).not.toBeInTheDocument() - }) - }) - }) - - it("only returns a valid date to the onRangeChange function", async () => { - const onRangeChange = jest.fn() - - const { getByLabelText } = render( - - ) - - onRangeChange.mockClear() - - const inputStartDate = getByLabelText("Date from") - - await user.clear(inputStartDate) - await user.type(inputStartDate, "10/07/2022") - await user.tab() - - await waitFor(() => { - expect(onRangeChange.mock.calls).toEqual([ - [ - { - from: new Date("2022-07-10"), - to: undefined, - }, - ], - ]) - }) - - onRangeChange.mockClear() - - const inputEndDate = getByLabelText("Date to") - - await user.clear(inputEndDate) - await user.type(inputEndDate, "10/08/2022") - await user.tab() - - await waitFor(() => { - expect(onRangeChange.mock.calls).toEqual([ - [ - { - from: new Date("2022-07-10"), - to: new Date("2022-08-10"), - }, - ], - ]) - }) - }) -}) diff --git a/packages/components/src/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/FilterDateRangePickerField.tsx b/packages/components/src/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/FilterDateRangePickerField.tsx deleted file mode 100644 index 7f8e990..0000000 --- a/packages/components/src/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/FilterDateRangePickerField.tsx +++ /dev/null @@ -1,324 +0,0 @@ -import React, { useEffect, HTMLAttributes, useReducer } from "react" -import { useIntl } from "@cultureamp/i18n-react-intl" -import classnames from "classnames" -import { - CalendarRange, - CalendarRangeProps, -} from "@kaizen/date-picker/src/_subcomponents/Calendar" -import { formatDateAsText } from "@kaizen/date-picker/src/utils/formatDateAsText" -import { getLocale } from "@kaizen/date-picker/src/utils/getLocale" -import { isInvalidDate } from "@kaizen/date-picker/src/utils/isInvalidDate" -import { parseDateFromTextFormatValue } from "@kaizen/date-picker/src/utils/parseDateFromTextFormatValue" -import { DateValidationResponse } from "~components/FilterDatePicker" -import { useDateInputHandlers } from "~components/FilterDatePicker/hooks/useDateInputHandlers" -import { DataAttributes } from "~types/DataAttributes" -import { - DateRange, - DisabledDays, - FilterDateSupportedLocales, -} from "~types/DatePicker" -import { OverrideClassName } from "~types/OverrideClassName" -import { - DateRangeInputField, - DateRangeInputFieldProps, -} from "../DateRangeInputField" -import { filterDatePickerFieldReducer } from "./filterDateRangePickerFieldReducer" -import { useEndDateValidation } from "./hooks/useEndDateValidation" -import { useStartDateValidation } from "./hooks/useStartDateValidation" -import { DateRangeFieldValidationMessage } from "./types" -import { isValidRange } from "./utils/isValidRange" -import styles from "./FilterDateRangePickerField.module.scss" - -type InputStartDateProps = DateRangeInputFieldProps["inputStartDateProps"] -type InputEndDateProps = DateRangeInputFieldProps["inputEndDateProps"] - -type FilterInputProps = Omit, "value"> & - DataAttributes - -export interface FilterDateRangePickerFieldProps - extends OverrideClassName> { - id: string - label: string - locale: FilterDateSupportedLocales - /** - * Sets first displayed month to month of provided date if there isn't a date set. - */ - defaultMonth?: CalendarRangeProps["defaultMonth"] - /** - * The date range passed in from the consumer that renders in the inputs and calendar. - */ - selectedRange: DateRange | undefined - /** - * Callback when date is updated either by the calendar picker or by typing and blurring. - * Date will return as `undefined` if empty, invalid or disabled. - */ - onRangeChange: (range: DateRange | undefined) => void - /** - * See https://react-day-picker.js.org/api/types/Matcher - */ - disabledDays?: DisabledDays - inputStartDateProps?: FilterInputProps - inputEndDateProps?: FilterInputProps - /** - * Custom description to provide extra context (input format help text remains). - */ - description?: DateRangeInputFieldProps["description"] - validationMessage?: DateRangeFieldValidationMessage - /** - * Callback when a date is selected. Utilises internal validation if not set. - */ - onValidate?: { - dateStart?: (validationResponse: DateValidationResponse) => void - dateEnd?: (validationResponse: DateValidationResponse) => void - } -} - -export const FilterDateRangePickerField = ({ - id, - label, - locale: propsLocale, - defaultMonth, - selectedRange, - onRangeChange, - disabledDays, - inputStartDateProps, - inputEndDateProps, - description, - validationMessage, - onValidate, - classNameOverride, - ...restProps -}: FilterDateRangePickerFieldProps): JSX.Element => { - const { formatMessage } = useIntl() - const locale = getLocale(propsLocale) - - const translatedDateFrom = formatMessage({ - id: "filterDateRangePicker.dateFrom", - defaultMessage: "Date from", - description: "Label for the 'Date from' field", - }) - const translatedDateTo = formatMessage({ - id: "filterDateRangePicker.dateTo", - defaultMessage: "Date to", - description: "Label for the 'date to' field", - }) - const inputStartDateLabel = - inputStartDateProps?.labelText || translatedDateFrom - const inputEndDateLabel = inputEndDateProps?.labelText || translatedDateTo - - const transformDateToInputValue = (date: Date | undefined): string => - date ? formatDateAsText(date, disabledDays, locale) : "" - - const handleDateRangeChange = (dateRange: DateRange | undefined): void => { - onRangeChange(dateRange) - } - - const dateStartValidation = useStartDateValidation({ - inputLabel: inputStartDateLabel, - disabledDays, - validationMessage: validationMessage?.dateStart, - onValidate: onValidate?.dateStart, - }) - - const dateEndValidation = useEndDateValidation({ - inputLabel: inputEndDateLabel, - disabledDays, - validationMessage: validationMessage?.dateEnd, - onValidate: onValidate?.dateEnd, - }) - - const validateStartDate = ( - date: Date | undefined, - inputValue: string - ): Date | undefined => - dateStartValidation.validateDate({ - date, - inputValue, - }) - - const validateEndDate = ( - date: Date | undefined, - inputValue: string - ): Date | undefined => - dateEndValidation.validateDate({ - endDate: date, - endDateInputValue: inputValue, - startDate: selectedRange?.from, - startDateFieldLabel: inputStartDateLabel, - }) - - const [state, dispatch] = useReducer(filterDatePickerFieldReducer, { - selectedStartDate: selectedRange?.from, - selectedEndDate: selectedRange?.to, - inputStartValue: transformDateToInputValue(selectedRange?.from), - inputEndValue: transformDateToInputValue(selectedRange?.to), - startMonth: - selectedRange?.from && !isInvalidDate(selectedRange.from) - ? selectedRange.from - : defaultMonth || new Date(), - }) - - const inputStartDateHandlers = useDateInputHandlers({ - locale, - disabledDays, - setInputValue: value => { - dispatch({ - type: "update_input_start_field", - inputValue: value, - }) - }, - onDateChange: date => { - const newDate = validateStartDate(date, state.inputStartValue) - - // We need to parse the date from the input field due to the - // state.selectedEndDate being set to undefined whenever range is invalid - const endDate = parseDateFromTextFormatValue(state.inputEndValue, locale) - const isRangeValid = isValidRange(newDate, endDate) - - dispatch({ - type: "update_selected_start_date", - date: newDate, - }) - - // If the range ends up being invalid due to the change in start date - // we need to remove the end date as its now deemed invalid. - dispatch({ - type: "update_selected_end_date", - date: isRangeValid ? endDate : undefined, - }) - - handleDateRangeChange({ - from: newDate, - to: isRangeValid ? endDate : undefined, - }) - - if (newDate && endDate && !isInvalidDate(endDate)) { - // Update validation messages - dateEndValidation.validateEndDateBeforeStartDate({ - startDate: newDate, - startDateFieldLabel: inputStartDateLabel, - endDate, - endDateInputValue: state.inputEndValue, - }) - } - }, - ...inputStartDateProps, - }) - - const inputEndDateHandlers = useDateInputHandlers({ - locale, - disabledDays, - setInputValue: value => { - dispatch({ - type: "update_input_end_field", - inputValue: value, - }) - }, - onDateChange: date => { - const startDate = state.selectedStartDate - const newEndDate = validateEndDate(date, state.inputEndValue) - const isRangeValid = isValidRange(startDate, newEndDate) - - dispatch({ - type: "update_selected_end_date", - date: isRangeValid ? newEndDate : undefined, - }) - - handleDateRangeChange({ - from: startDate, - to: isRangeValid ? newEndDate : undefined, - }) - }, - ...inputEndDateProps, - }) - - const handleCalendarSelectRange: CalendarRangeProps["onSelect"] = range => { - const inputStartValue = transformDateToInputValue(range?.from) - const inputEndValue = transformDateToInputValue(range?.to) - - const newStartDate = validateStartDate(range?.from, inputStartValue) - const newEndDate = validateEndDate(range?.to, inputEndValue) - - dispatch({ - type: "update_selected_start_date", - date: newStartDate, - inputValue: inputStartValue, - }) - - dispatch({ - type: "update_selected_end_date", - date: newEndDate, - inputValue: inputEndValue, - }) - - handleDateRangeChange({ from: newStartDate, to: newEndDate }) - } - - useEffect(() => { - const newStartDate = validateStartDate( - selectedRange?.from, - state.inputStartValue - ) - const newEndDate = validateEndDate(selectedRange?.to, state.inputEndValue) - - if (newStartDate && !isValidRange(newStartDate, newEndDate)) { - dispatch({ - type: "update_selected_end_date", - date: undefined, - }) - } - - handleDateRangeChange({ from: newStartDate, to: newEndDate }) - }, []) - - return ( -
    - - - dispatch({ type: "navigate_months", date: value }) - } - /> -
    - ) -} - -FilterDateRangePickerField.displayName = "FilterDateRangePickerField" diff --git a/packages/components/src/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/filterDateRangePickerFieldReducer.tsx b/packages/components/src/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/filterDateRangePickerFieldReducer.tsx deleted file mode 100644 index addbebf..0000000 --- a/packages/components/src/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/filterDateRangePickerFieldReducer.tsx +++ /dev/null @@ -1,77 +0,0 @@ -import { isInvalidDate } from "@kaizen/date-picker" - -type DateRangeFieldActions = - | { - type: "update_selected_start_date" - date: Date | undefined - inputValue?: string - } - | { - type: "update_selected_end_date" - date: Date | undefined - inputValue?: string - } - | { - type: "navigate_months" - date: Date | undefined - } - | { - type: "update_input_start_field" - inputValue: string - } - | { - type: "update_input_end_field" - inputValue: string - } - -type FilterDateRangePickerState = { - selectedStartDate: Date | undefined - selectedEndDate: Date | undefined - inputStartValue: string - inputEndValue: string - startMonth: Date -} - -export const filterDatePickerFieldReducer = ( - state: FilterDateRangePickerState, - action: DateRangeFieldActions -): FilterDateRangePickerState => { - switch (action.type) { - case "update_selected_start_date": - return { - ...state, - selectedStartDate: action.date, - inputStartValue: - action.inputValue === undefined - ? state.inputStartValue - : action.inputValue, - startMonth: - action.date && !isInvalidDate(action.date) ? action.date : new Date(), - } - case "update_selected_end_date": - return { - ...state, - selectedEndDate: action.date, - inputEndValue: - action.inputValue === undefined - ? state.inputEndValue - : action.inputValue, - } - case "navigate_months": - return { - ...state, - startMonth: - action.date && !isInvalidDate(action.date) ? action.date : new Date(), - } - case "update_input_start_field": - return { - ...state, - inputStartValue: action.inputValue, - } - case "update_input_end_field": - return { - ...state, - inputEndValue: action.inputValue, - } - } -} diff --git a/packages/components/src/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/hooks/useEndDateValidation.spec.tsx b/packages/components/src/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/hooks/useEndDateValidation.spec.tsx deleted file mode 100644 index 6a5f8ee..0000000 --- a/packages/components/src/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/hooks/useEndDateValidation.spec.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import React from "react" -import { renderHook, act } from "@testing-library/react-hooks" -import { LabelledMessage } from "~components/LabelledMessage" -import { useEndDateValidation } from "./useEndDateValidation" - -describe("useEndDateValidation()", () => { - describe("validateDate()", () => { - it("returns a validation message and no date", () => { - const { result } = renderHook(() => - useEndDateValidation({ - inputLabel: "End date", - }) - ) - const { validateDate } = result.current - - act(() => { - const newDate = validateDate({ - endDate: new Date("potato"), - endDateInputValue: "potato", - startDate: undefined, - startDateFieldLabel: "Start date", - }) - expect(newDate).toEqual(undefined) - }) - - expect(result.current.validationMessage).toStrictEqual({ - status: "error", - message: ( - - ), - }) - }) - }) - - describe("validateEndDateBeforeStartDate()", () => { - it("returns a validation message and date", () => { - const { result } = renderHook(() => - useEndDateValidation({ - inputLabel: "End date", - }) - ) - const { validateEndDateBeforeStartDate } = result.current - - act(() => { - const newDate = validateEndDateBeforeStartDate({ - endDate: new Date("2023-04-03"), - endDateInputValue: "3 Apr 2023", - startDate: new Date("2023-05-01"), - startDateFieldLabel: "Start date", - }) - expect(newDate).toEqual(new Date("2023-04-03")) - }) - - expect(result.current.validationMessage).toStrictEqual({ - status: "error", - message: ( - - ), - }) - }) - }) -}) diff --git a/packages/components/src/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/hooks/useEndDateValidation.ts b/packages/components/src/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/hooks/useEndDateValidation.ts deleted file mode 100644 index 8adc493..0000000 --- a/packages/components/src/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/hooks/useEndDateValidation.ts +++ /dev/null @@ -1,71 +0,0 @@ -import { - useDateValidation, - UseDateValidationArgs, - ValidationMessage, -} from "~components/FilterDatePicker" -import { - validateEndDateBeforeStartDate, - ValidateEndDateBeforeStartDateArgs, -} from "../utils/validateEndDateBeforeStartDate" - -export type UseEndDateValidationArgs = UseDateValidationArgs - -export type UseEndDateValidationValue = { - validationMessage: ValidationMessage | undefined - validateDate: (args: { - endDate: Date | undefined - endDateInputValue: string - startDate: Date | undefined - startDateFieldLabel: React.ReactNode - }) => Date | undefined - validateEndDateBeforeStartDate: ( - args: ValidateEndDateBeforeStartDateArgs - ) => Date | undefined -} - -export const useEndDateValidation = ( - args: UseEndDateValidationArgs -): UseEndDateValidationValue => { - const { validationMessage, validateDate, updateValidation } = - useDateValidation(args) - - const handleValidateEndDateBeforeStartDate: UseEndDateValidationValue["validateEndDateBeforeStartDate"] = - handlerArgs => { - const { validationResponse, newDate } = - validateEndDateBeforeStartDate(handlerArgs) - updateValidation(validationResponse) - return newDate - } - - const validateEndDate: UseEndDateValidationValue["validateDate"] = ({ - endDate, - endDateInputValue, - startDate, - startDateFieldLabel, - }) => { - const { validationResponse, newDate } = validateDate({ - date: endDate, - inputValue: endDateInputValue, - }) - - if (validationResponse.isValidDate) { - if (newDate && startDate) { - return handleValidateEndDateBeforeStartDate({ - startDate, - startDateFieldLabel, - endDate: newDate, - endDateInputValue, - }) - } - } - - updateValidation(validationResponse) - return newDate - } - - return { - validationMessage, - validateDate: validateEndDate, - validateEndDateBeforeStartDate: handleValidateEndDateBeforeStartDate, - } -} diff --git a/packages/components/src/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/hooks/useStartDateValidation.spec.tsx b/packages/components/src/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/hooks/useStartDateValidation.spec.tsx deleted file mode 100644 index 6bd8c56..0000000 --- a/packages/components/src/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/hooks/useStartDateValidation.spec.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import React from "react" -import { renderHook, act } from "@testing-library/react-hooks" -import { LabelledMessage } from "~components/LabelledMessage" -import { useStartDateValidation } from "./useStartDateValidation" - -describe("useStartDateValidation()", () => { - describe("validateDate()", () => { - it("returns a validation message and no date", () => { - const { result } = renderHook(() => - useStartDateValidation({ - inputLabel: "Start date", - }) - ) - const { validateDate } = result.current - - act(() => { - const newDate = validateDate({ - date: new Date("potato"), - inputValue: "potato", - }) - expect(newDate).toBeUndefined() - }) - - expect(result.current.validationMessage).toStrictEqual({ - status: "error", - message: ( - - ), - }) - }) - }) -}) diff --git a/packages/components/src/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/hooks/useStartDateValidation.ts b/packages/components/src/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/hooks/useStartDateValidation.ts deleted file mode 100644 index f09a3b6..0000000 --- a/packages/components/src/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/hooks/useStartDateValidation.ts +++ /dev/null @@ -1,36 +0,0 @@ -import { - useDateValidation, - UseDateValidationArgs, - ValidationMessage, -} from "~components/FilterDatePicker" - -export type UseStartDateValidationArgs = UseDateValidationArgs - -export type UseStartDateValidationValue = { - validationMessage: ValidationMessage | undefined - validateDate: (args: { - date: Date | undefined - inputValue: string - }) => Date | undefined -} - -export const useStartDateValidation = ( - args: UseStartDateValidationArgs -): UseStartDateValidationValue => { - const { validationMessage, validateDate, updateValidation } = - useDateValidation(args) - - const validateStartDate: UseStartDateValidationValue["validateDate"] = ({ - date, - inputValue, - }) => { - const { validationResponse, newDate } = validateDate({ date, inputValue }) - updateValidation(validationResponse) - return newDate - } - - return { - validationMessage, - validateDate: validateStartDate, - } -} diff --git a/packages/components/src/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/index.ts b/packages/components/src/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/index.ts deleted file mode 100644 index 632fd3f..0000000 --- a/packages/components/src/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./FilterDateRangePickerField" diff --git a/packages/components/src/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/types.ts b/packages/components/src/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/types.ts deleted file mode 100644 index 59b8d8a..0000000 --- a/packages/components/src/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/types.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { ValidationMessage } from "~components/FilterDatePicker" - -export type DateRangeFieldValidationMessage = { - dateStart?: ValidationMessage - dateEnd?: ValidationMessage -} diff --git a/packages/components/src/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/utils/isValidRange.spec.ts b/packages/components/src/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/utils/isValidRange.spec.ts deleted file mode 100644 index 67c1dc7..0000000 --- a/packages/components/src/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/utils/isValidRange.spec.ts +++ /dev/null @@ -1,51 +0,0 @@ -import { isValidRange } from "./isValidRange" - -describe("isValidRange()", () => { - it("returns true when the start date is before the end date", () => { - const startDate = new Date("2022-05-15") - const endDate = new Date("2022-05-20") - const result = isValidRange(startDate, endDate) - - expect(result).toEqual(true) - }) - - it("returns false when the start date is after the end date", () => { - const startDate = new Date("2022-05-25") - const endDate = new Date("2022-05-20") - const result = isValidRange(startDate, endDate) - - expect(result).toEqual(false) - }) - - it("returns false when the start date is undefined", () => { - const startDate = undefined - const endDate = new Date("2022-05-20") - const result = isValidRange(startDate, endDate) - - expect(result).toEqual(false) - }) - - it("returns false when the end date is undefined", () => { - const startDate = new Date("2022-05-20") - const endDate = undefined - const result = isValidRange(startDate, endDate) - - expect(result).toEqual(false) - }) - - it("returns false when both the end and start dates are undefined", () => { - const startDate = undefined - const endDate = undefined - const result = isValidRange(startDate, endDate) - - expect(result).toEqual(false) - }) - - it("returns true when both the end and start dates are equal", () => { - const startDate = new Date("2022-05-20") - const endDate = new Date("2022-05-20") - const result = isValidRange(startDate, endDate) - - expect(result).toEqual(true) - }) -}) diff --git a/packages/components/src/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/utils/isValidRange.ts b/packages/components/src/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/utils/isValidRange.ts deleted file mode 100644 index b706a7a..0000000 --- a/packages/components/src/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/utils/isValidRange.ts +++ /dev/null @@ -1,7 +0,0 @@ -export const isValidRange = ( - startDate: Date | undefined, - endDate: Date | undefined -): boolean => { - if (startDate && endDate) return startDate <= endDate - return false -} diff --git a/packages/components/src/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/utils/validateEndDateBeforeStartDate.spec.ts b/packages/components/src/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/utils/validateEndDateBeforeStartDate.spec.ts deleted file mode 100644 index 8a48de8..0000000 --- a/packages/components/src/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/utils/validateEndDateBeforeStartDate.spec.ts +++ /dev/null @@ -1,105 +0,0 @@ -import { validateEndDateBeforeStartDate } from "./validateEndDateBeforeStartDate" - -describe("validateEndDateBeforeStartDate()", () => { - describe("when the end date is after the start date", () => { - const startDate = new Date("2022-04-03") - const startDateFieldLabel = "Start date" - const endDate = new Date("2022-05-01") - const endDateInputValue = "01/05/2022" - let result: ReturnType - - beforeEach(() => { - result = validateEndDateBeforeStartDate({ - startDate, - startDateFieldLabel, - endDate, - endDateInputValue, - }) - }) - - it("returns a response with no errors", () => { - expect(result.validationResponse).toStrictEqual({ - date: endDate, - inputValue: endDateInputValue, - validationMessage: undefined, - isInvalid: false, - isDisabled: false, - isEmpty: false, - isValidDate: true, - }) - }) - - it("returns a new date that is the same as the given end date", () => { - expect(result.newDate).toBe(endDate) - }) - }) - - describe("when the end date equals the start date", () => { - const startDate = new Date("2022-05-01") - const startDateFieldLabel = "Start date" - const endDate = new Date("2022-05-01") - const endDateInputValue = "01/05/2022" - let result: ReturnType - - beforeEach(() => { - result = validateEndDateBeforeStartDate({ - startDate, - startDateFieldLabel, - endDate, - endDateInputValue, - }) - }) - - it("returns a response with no errors", () => { - expect(result.validationResponse).toStrictEqual({ - date: endDate, - inputValue: endDateInputValue, - validationMessage: undefined, - isInvalid: false, - isDisabled: false, - isEmpty: false, - isValidDate: true, - }) - }) - - it("returns a new date that is the same as the given end date", () => { - expect(result.newDate).toBe(endDate) - }) - }) - - describe("when the end date is before the start date", () => { - const startDate = new Date("2022-05-01") - const startDateFieldLabel = "Start date" - const endDate = new Date("2022-04-03") - const endDateInputValue = "03/04/2022" - let result: ReturnType - - beforeEach(() => { - result = validateEndDateBeforeStartDate({ - startDate, - startDateFieldLabel, - endDate, - endDateInputValue, - }) - }) - - it("returns a response with an error status and validation message", () => { - expect(result.validationResponse).toStrictEqual({ - date: endDate, - inputValue: endDateInputValue, - validationMessage: { - status: "error", - message: 'Cannot be earlier than the selection in "Start date"', - }, - isInvalid: false, - isDisabled: false, - isEmpty: false, - isValidDate: true, - }) - }) - - it("returns the new end date", () => { - expect(result.newDate).toEqual(endDate) - }) - }) -}) diff --git a/packages/components/src/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/utils/validateEndDateBeforeStartDate.ts b/packages/components/src/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/utils/validateEndDateBeforeStartDate.ts deleted file mode 100644 index fe3f31b..0000000 --- a/packages/components/src/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/utils/validateEndDateBeforeStartDate.ts +++ /dev/null @@ -1,53 +0,0 @@ -import React from "react" -import { DateValidationResponse } from "~components/FilterDatePicker" -import { getNodeText } from "../../../../utils/getNodeText" -import { isValidRange } from "./isValidRange" - -export type ValidateEndDateBeforeStartDateArgs = { - startDate: Date - startDateFieldLabel: React.ReactNode - endDate: Date - endDateInputValue: string -} - -export type ValidateEndDateBeforeStartDateResponse = { - validationResponse: DateValidationResponse - newDate: Date | undefined -} - -export const validateEndDateBeforeStartDate = ({ - startDate, - startDateFieldLabel, - endDate, - endDateInputValue, -}: ValidateEndDateBeforeStartDateArgs): ValidateEndDateBeforeStartDateResponse => { - const baseResponse = { - date: endDate, - inputValue: endDateInputValue, - validationMessage: undefined, - isInvalid: false, - isDisabled: false, - isEmpty: false, - isValidDate: true, - } - - if (!isValidRange(startDate, endDate)) { - return { - validationResponse: { - ...baseResponse, - validationMessage: { - status: "error", - message: `Cannot be earlier than the selection in "${getNodeText( - startDateFieldLabel - )}"`, - }, - }, - newDate: endDate, - } - } - - return { - validationResponse: baseResponse, - newDate: endDate, - } -} diff --git a/packages/components/src/FilterDateRangePicker/utils/isCompleteDateRange.spec.ts b/packages/components/src/FilterDateRangePicker/utils/isCompleteDateRange.spec.ts deleted file mode 100644 index 8e8a80a..0000000 --- a/packages/components/src/FilterDateRangePicker/utils/isCompleteDateRange.spec.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { isCompleteDateRange } from "./isCompleteDateRange" - -describe("isCompleteDateRange", () => { - it("is not a complete date range if it is not defined", () => { - expect(isCompleteDateRange(undefined)).toBe(false) - }) - - it("is not a complete date range if it is partially defined", () => { - expect(isCompleteDateRange({ from: new Date("2022-05-01") })).toBe(false) - expect( - isCompleteDateRange({ from: undefined, to: new Date("2022-05-01") }) - ).toBe(false) - }) - - it("is a complete date range if both from/to dates are defined", () => { - expect( - isCompleteDateRange({ - from: new Date("2022-05-01"), - to: new Date("2022-12-17"), - }) - ).toBe(true) - }) -}) diff --git a/packages/components/src/FilterDateRangePicker/utils/isCompleteDateRange.ts b/packages/components/src/FilterDateRangePicker/utils/isCompleteDateRange.ts deleted file mode 100644 index 259ca2c..0000000 --- a/packages/components/src/FilterDateRangePicker/utils/isCompleteDateRange.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { DateRange } from "~types/DatePicker" - -export const isCompleteDateRange = ( - dateRange: DateRange | undefined -): dateRange is { from: Date; to: Date } => - dateRange?.from !== undefined && dateRange?.to !== undefined diff --git a/packages/components/src/FilterMultiSelect/FilterMultiSelect.playwright.spec.tsx b/packages/components/src/FilterMultiSelect/FilterMultiSelect.playwright.spec.tsx deleted file mode 100644 index 99bb130..0000000 --- a/packages/components/src/FilterMultiSelect/FilterMultiSelect.playwright.spec.tsx +++ /dev/null @@ -1,143 +0,0 @@ -import { expect, test } from "@playwright/test" - -const iframePath = "iframe.html?args=&id=" -const storyId = "components-filter-multi-select--default" -test.beforeEach(async ({ page }) => { - // Go to the starting url before each test. - await page.goto(`./${iframePath}${storyId}`) -}) - -test.describe("Selecting an unselected option", async () => { - test("Selects the option", async ({ page }) => { - // Click trigger button - await page.locator("role=button").click() - - const devOpsOption = page.locator('[aria-label="Dev-ops"]') - await devOpsOption.click() - // Expect "Dev-ops" to be selected - expect(await devOpsOption.locator('svg[role="presentation"]').count()).toBe( - 1 - ) - }) -}) - -test.describe("Deselecting a selected option", async () => { - test("Selects the option", async ({ page }) => { - // Click trigger button - await page.locator("role=button").click() - - const frontEndOption = await page.locator("text=Front-End1245 available") - await frontEndOption.click() - // Expect "Front-End" option to not be selected - expect( - await frontEndOption.locator('svg[role="presentation"]').count() - ).toBe(0) - }) -}) - -test.describe("Filtering by text", async () => { - test("Keeps text matches, and filters out non-matches", async ({ page }) => { - // Click trigger button - await page.locator("role=button").click() - // Enter text "dev" in search field - await page.locator('[placeholder="Searchâ€Ļ"]').fill("dev") - - expect(await page.locator('[aria-label="Dev-ops"]').count()).toBe(1) - expect(await page.locator('[aria-label="Others"]').count()).toBe(0) - }) -}) - -test.describe("Clicking 'Clear'", async () => { - test.describe("Without filtering", async () => { - test("Deselects all non-disabled options", async ({ page }) => { - // Click trigger button - await page.locator("role=button").click() - // Click Clear button - await page.locator('role=button[name="Clear selections"]').click() - - const dropdown = page.locator("ul[aria-multiselectable]") - const selectedAndNonDisabledOptions = dropdown.locator( - 'li:not([aria-disabled="true"]) >> svg' - ) - expect(await selectedAndNonDisabledOptions.count()).toBe(0) - }) - }) - test.describe("With filtering", async () => { - test("Deselects all filtered, non-disabled options without deselecting non-filtered options", async ({ - page, - }) => { - // Click trigger button - await page.locator("role=button").click() - // Select all items - await page.locator('role=button[name="Select all"]').click() - // Filter "Others" option - await page.locator('[placeholder="Searchâ€Ļ"]').fill("Others") - // Click "Clear" button - await page.locator('role=button[name="Clear selections"]').click() - // Empty search field - await page.locator('[aria-label="clear search"]').click() - - const dropdown = page.locator("ul[aria-multiselectable]") - const numberOfNonDisabledItems = await dropdown - .locator('li:not([aria-disabled="true"])') - .count() - const numberOfselectedAndNonDisabledOptions = await dropdown - .locator('li:not([aria-disabled="true"]) >> svg') - .count() - // Expect all to be selected, except one - expect(numberOfselectedAndNonDisabledOptions).toBe( - numberOfNonDisabledItems - 1 - ) - // Expect "Others" not to be selected - expect( - await dropdown.locator("li[aria-la1el='Others'] >> svg").count() - ).toBe(0) - }) - }) -}) - -test.describe("Clicking 'Select all'", async () => { - test.describe("Without filtering", async () => { - test("Selects all non-disabled options", async ({ page }) => { - // Click trigger button - await page.locator("role=button").click() - // Click Select all button - await page.locator('role=button[name="Select all"]').click() - - const dropdown = page.locator("ul[aria-multiselectable]") - const numberOfNonDisabledItems = await dropdown - .locator('li:not([aria-disabled="true"])') - .count() - const numberOfSelectedAndNonDisabledOptions = await dropdown - .locator('li:not([aria-disabled="true"]) >> svg') - .count() - expect(numberOfSelectedAndNonDisabledOptions).toBe( - numberOfNonDisabledItems - ) - }) - }) - test.describe("With filtering", async () => { - test("Selects all filtered, non-disabled options without selecting non-filtered options", async ({ - page, - }) => { - // Click trigger button - await page.locator("role=button").click() - // Click clear button - await page.locator('role=button[name="Clear selections"]').click() - await page.locator('[placeholder="Searchâ€Ļ"]').fill("Others") - await page.locator('role=button[name="Select all"]').click() - // Empty search field - await page.locator('[aria-label="clear search"]').click() - - const dropdown = page.locator("ul[aria-multiselectable]") - const numberOfSelectedAndNonDisabledOptions = await dropdown - .locator('li[role="option"]:not([aria-disabled="true"]) >> svg') - .count() - expect(numberOfSelectedAndNonDisabledOptions).toBe(1) - // Expect the "Others" option to be selected - expect( - await dropdown.locator("li[aria-label='Others'] >> svg").count() - ).toBe(1) - }) - }) -}) diff --git a/packages/components/src/FilterMultiSelect/FilterMultiSelect.tsx b/packages/components/src/FilterMultiSelect/FilterMultiSelect.tsx deleted file mode 100644 index 61c2d82..0000000 --- a/packages/components/src/FilterMultiSelect/FilterMultiSelect.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { ListBox } from "./subcomponents/ListBox" -import { ListBoxSection } from "./subcomponents/ListBoxSection" -import { LoadMoreButton } from "./subcomponents/LoadMoreButton" -import { MenuFooter, MenuLoadingSkeleton } from "./subcomponents/MenuLayout" -import { MultiSelectOption } from "./subcomponents/MultiSelectOption" -import { NoResults } from "./subcomponents/NoResults" -import { Root, RootProps } from "./subcomponents/Root" -import { SearchInput } from "./subcomponents/SearchInput/SearchInput" -import { SectionDivider } from "./subcomponents/SectionDivider" -import { - ClearButton, - SelectAllButton, -} from "./subcomponents/SelectionControlButton" -import { - FilterTriggerButton, - RemovableFilterTrigger, -} from "./subcomponents/Trigger" - -export type FilterMultiSelectProps = RootProps - -export const FilterMultiSelect = Object.assign(Root, { - TriggerButton: FilterTriggerButton, - RemovableTrigger: RemovableFilterTrigger, - SearchInput, - ListBox, - ListBoxSection, - SectionDivider, - Option: MultiSelectOption, - SelectAllButton, - ClearButton, - MenuFooter, // For layout - MenuLoadingSkeleton, // Menu Loading Skeleton example - LoadMoreButton, - NoResults, -}) diff --git a/packages/components/src/FilterMultiSelect/index.ts b/packages/components/src/FilterMultiSelect/index.ts deleted file mode 100644 index aa1cd4a..0000000 --- a/packages/components/src/FilterMultiSelect/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -export * from "./FilterMultiSelect" -export * from "./subcomponents" -export * from "./provider" -export * from "./types" -export * from "./utils" diff --git a/packages/components/src/FilterMultiSelect/provider/MenuTriggerProvider/MenuTriggerProvider.spec.tsx b/packages/components/src/FilterMultiSelect/provider/MenuTriggerProvider/MenuTriggerProvider.spec.tsx deleted file mode 100644 index 82ca4d6..0000000 --- a/packages/components/src/FilterMultiSelect/provider/MenuTriggerProvider/MenuTriggerProvider.spec.tsx +++ /dev/null @@ -1,189 +0,0 @@ -import React from "react" -import { render, screen, waitFor } from "@testing-library/react" -import userEvent from "@testing-library/user-event" -import { FilterTriggerButton } from "~components/FilterMultiSelect/subcomponents/Trigger" -import { MenuPopup } from "../../subcomponents/MenuPopup" -import { - MenuTriggerProvider, - MenuTriggerProviderProps, -} from "./MenuTriggerProvider" - -const user = userEvent.setup() - -const MenuTriggerProviderWrapper = ( - props: Partial -): JSX.Element => ( - - - - menu-content-mock - - - -) - -describe(" - Visual content", () => { - it("shows the trigger initially", () => { - render() - const trigger = screen.getByRole("button", { - name: "trigger-display-label-mock", - }) - expect(trigger).toBeVisible() - }) - - describe("when uncontrolled", () => { - it("does not show the menu initially", () => { - render() - const menu = screen.queryByText("menu-content-mock") - expect(menu).not.toBeInTheDocument() - }) - - it("shows the menu when defaultOpen is set to true", () => { - render() - const menu = screen.queryByText("menu-content-mock") - expect(menu).toBeVisible() - }) - }) - describe("when controlled", () => { - it("shows the menu based on the isOpen prop", () => { - const { rerender } = render() - - const menu = screen.queryByText("menu-content-mock") - expect(menu).toBeVisible() - - rerender() - expect(screen.queryByText("menu-content-mock")).not.toBeInTheDocument() - }) - - it("fires the onOpenChange callback when the trigger is interacted", async () => { - const onOpenChange = jest.fn() - render() - - const trigger = screen.getByRole("button", { - name: "trigger-display-label-mock", - }) - await user.click(trigger) - - await waitFor(() => { - expect(onOpenChange).toBeCalledTimes(1) - expect(onOpenChange).toBeCalledWith(false) - }) - }) - }) -}) - -describe(" - Mouse interaction", () => { - describe("Given the menu is closed", () => { - it("is opened when user clicks on the trigger", async () => { - render() - const trigger = screen.getByRole("button", { - name: "trigger-display-label-mock", - }) - await user.click(trigger) - await waitFor(() => { - expect(screen.queryByText("menu-content-mock")).toBeVisible() - }) - }) - }) - - describe("Given the menu is opened", () => { - it("is closed when user clicks on the trigger", async () => { - render() - const trigger = screen.getByRole("button", { - name: "trigger-display-label-mock", - }) - await user.click(trigger) - await waitFor(() => { - expect(screen.queryByText("menu-content-mock")).not.toBeInTheDocument() - }) - }) - - it("is closed when user clicks outside of the menu", async () => { - render() - await user.click(document.body) - await waitFor(() => { - expect(screen.queryByText("menu-content-mock")).not.toBeInTheDocument() - }) - }) - - it("remains open when user clicks inside of the menu", async () => { - render() - const buttonInsideMenu = screen.getByRole("button", { - name: "menu-content-button-mock", - }) - await user.click(buttonInsideMenu) - await waitFor(() => { - expect(screen.queryByText("menu-content-mock")).toBeVisible() - }) - }) - }) -}) - -describe(" - Keyboard interaction", () => { - describe("Given the menu is closed", () => { - it("allows the user to tab to the trigger", async () => { - render() - const trigger = screen.getByRole("button", { - name: "trigger-display-label-mock", - }) - await user.tab() - await waitFor(() => { - expect(trigger).toHaveFocus() - }) - }) - - it("opens the menu when hits enter key", async () => { - render() - const trigger = screen.getByRole("button", { - name: "trigger-display-label-mock", - }) - trigger.focus() - - await user.keyboard("{Enter}") - await waitFor(() => { - expect(screen.queryByText("menu-content-mock")).toBeVisible() - }) - }) - }) - - describe("Given the menu is opened", () => { - // TBD - it("moves the focus to the first focusable element inside the menu initially", () => { - render() - expect(screen.queryByText("menu-content-mock")).toBeVisible() - - expect( - screen.queryByRole("button", { name: "menu-content-button-mock" }) - ).toHaveFocus() - }) - - it("is closed when hits the escape key", async () => { - render() - - expect( - screen.queryByRole("button", { name: "menu-content-button-mock" }) - ).toHaveFocus() - - await user.keyboard("{Escape}") - await waitFor(() => { - expect(screen.queryByText("menu-content-mock")).not.toBeInTheDocument() - }) - }) - - it("is closed when the focus is moved outside of the menu", async () => { - render() - - expect( - screen.queryByRole("button", { name: "menu-content-button-mock" }) - ).toHaveFocus() - - await user.click(document.body) - await waitFor(() => { - expect(screen.queryByText("menu-content-mock")).not.toBeInTheDocument() - }) - }) - }) -}) diff --git a/packages/components/src/FilterMultiSelect/provider/MenuTriggerProvider/MenuTriggerProvider.tsx b/packages/components/src/FilterMultiSelect/provider/MenuTriggerProvider/MenuTriggerProvider.tsx deleted file mode 100644 index 8c779e6..0000000 --- a/packages/components/src/FilterMultiSelect/provider/MenuTriggerProvider/MenuTriggerProvider.tsx +++ /dev/null @@ -1,66 +0,0 @@ -import React, { ButtonHTMLAttributes, HTMLAttributes, useContext } from "react" -import { useButton } from "@react-aria/button" -import { AriaMenuOptions, useMenuTrigger } from "@react-aria/menu" -import { MenuTriggerState, useMenuTriggerState } from "@react-stately/menu" -import { ItemType } from "../../types" - -export interface MenuTriggerProviderProps { - isOpen?: boolean - defaultOpen?: boolean - onOpenChange?: (isOpen: boolean) => void - children: React.ReactNode -} - -export interface MenuTriggerProviderContextType { - menuTriggerProps: HTMLAttributes - buttonProps: ButtonHTMLAttributes - menuProps: AriaMenuOptions - menuTriggerState: MenuTriggerState - - buttonRef: React.RefObject -} - -const MenuTriggerContext = React.createContext( - {} as MenuTriggerProviderContextType -) -export function MenuTriggerProvider({ - isOpen, - defaultOpen, - onOpenChange, - children, -}: MenuTriggerProviderProps): JSX.Element { - // Create state based on the incoming props to manage the open/close - const state = useMenuTriggerState({ isOpen, defaultOpen, onOpenChange }) - - // Get A11y attributes and events for the menu trigger and menu elements - const ref = React.createRef() - const { menuTriggerProps, menuProps } = useMenuTrigger( - {}, - state, - ref - ) - - // Get A11y attributes and events for the button based on the trigger props from useMenuTrigger - const { buttonProps } = useButton(menuTriggerProps, ref) - - return ( - - {children} - - ) -} - -export const useMenuTriggerContext = (): MenuTriggerProviderContextType => - useContext(MenuTriggerContext) - -export const MenuTriggerConsumer = MenuTriggerContext.Consumer - -MenuTriggerContext.displayName = "MenuTriggerContext" diff --git a/packages/components/src/FilterMultiSelect/provider/MenuTriggerProvider/index.ts b/packages/components/src/FilterMultiSelect/provider/MenuTriggerProvider/index.ts deleted file mode 100644 index 7e63dc7..0000000 --- a/packages/components/src/FilterMultiSelect/provider/MenuTriggerProvider/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./MenuTriggerProvider" diff --git a/packages/components/src/FilterMultiSelect/provider/SelectionProvider/SelectionProvider.spec.tsx b/packages/components/src/FilterMultiSelect/provider/SelectionProvider/SelectionProvider.spec.tsx deleted file mode 100644 index 8e473f6..0000000 --- a/packages/components/src/FilterMultiSelect/provider/SelectionProvider/SelectionProvider.spec.tsx +++ /dev/null @@ -1,589 +0,0 @@ -import React, { useState } from "react" -import { Selection } from "@react-types/shared" -import { render, screen, waitFor } from "@testing-library/react" -import userEvent from "@testing-library/user-event" -import { FilterMultiSelect } from "../../FilterMultiSelect" -import { ListBox } from "../../subcomponents/ListBox" -import { SearchInput } from "../../subcomponents/SearchInput" -import { - ClearButton, - SelectAllButton, -} from "../../subcomponents/SelectionControlButton" -import { ItemType } from "../../types" -import { SelectionProvider, SelectionProviderProps } from "./SelectionProvider" - -const user = userEvent.setup() - -const itemsMock: ItemType[] = [ - { - label: "option-1-label-mock", - value: "option-1-value-mock", - }, - { - label: "option-2-label-mock", - value: "option-2-value-mock", - }, - { - label: "option-3-label-mock", - value: "option-3-value-mock", - }, -] - -const SelectionProviderWrapper = ({ - items = itemsMock, - selectedKeys, - onSelectionChange, - ...props -}: Partial): JSX.Element => { - const [selected, setSelected] = useState(selectedKeys ?? new Set()) - - return ( - { - setSelected(selection) - onSelectionChange && onSelectionChange(selection) - }} - {...props} - > - - {({ selectedItems, unselectedItems, disabledItems }): JSX.Element => ( - <> - - {(selectedItem): JSX.Element => ( - - )} - - - - {(unselectedItem): JSX.Element => ( - - )} - - - - {(disabledItem): JSX.Element => ( - - )} - - - )} - - - - - - - ) -} - -describe(" - Visual content", () => { - describe("Given no selectedKeys", () => { - it("shows all the options unselected", () => { - render() - expect( - screen.getByRole("option", { - name: "option-1-label-mock", - selected: false, - }) - ).toBeVisible() - expect( - screen.getByRole("option", { - name: "option-2-label-mock", - selected: false, - }) - ).toBeVisible() - expect( - screen.getByRole("option", { - name: "option-3-label-mock", - selected: false, - }) - ).toBeVisible() - }) - - it("labels the listbox with the provided label", () => { - render() - const listBox = screen.getByLabelText("selection-label-mock", { - selector: "ul", - }) - expect(listBox).toBeInTheDocument() - }) - }) - - describe("Given selectedKeys is [option-2-value-mock]", () => { - it("shows only option 2 is selected", () => { - render( - - ) - expect( - screen.getByRole("option", { - name: "option-1-label-mock", - selected: false, - }) - ).toBeVisible() - expect( - screen.getByRole("option", { - name: "option-2-label-mock", - selected: true, - }) - ).toBeVisible() - expect( - screen.getByRole("option", { - name: "option-3-label-mock", - selected: false, - }) - ).toBeVisible() - }) - }) - - describe("Given selectedKeys is 'all'", () => { - it("shows all options are selected", () => { - render() - expect( - screen.getByRole("option", { - name: "option-1-label-mock", - selected: true, - }) - ).toBeVisible() - expect( - screen.getByRole("option", { - name: "option-2-label-mock", - selected: true, - }) - ).toBeVisible() - expect( - screen.getByRole("option", { - name: "option-3-label-mock", - selected: true, - }) - ).toBeVisible() - }) - }) -}) - -describe(" - Mouse interaction", () => { - it("selects the option when clicks on a non-selected option", async () => { - render() - const option1 = screen.getByRole("option", { - name: "option-1-label-mock", - }) - - await user.click(option1) - - await waitFor(() => { - expect( - screen.getByRole("option", { - name: "option-1-label-mock", - selected: true, - }) - ).toBeVisible() - }) - }) - - it("fires onSelectionChange when clicks on a option", async () => { - const spy = jest.fn() - render() - const option1 = screen.getByRole("option", { - name: "option-1-label-mock", - }) - - await user.click(option1) - - await waitFor(() => { - expect(spy).toHaveBeenCalledTimes(1) - }) - }) - - it("selects all options when clicks on Select all button", async () => { - render() - const selectAll = screen.getByRole("button", { - name: "Select all", - }) - - await user.click(selectAll) - - await waitFor(() => { - expect( - screen.getByRole("option", { - name: "option-1-label-mock", - selected: true, - }) - ).toBeVisible() - - expect( - screen.getByRole("option", { - name: "option-2-label-mock", - selected: true, - }) - ).toBeVisible() - - expect( - screen.getByRole("option", { - name: "option-3-label-mock", - selected: true, - }) - ).toBeVisible() - }) - }) - - it("fires onSelectionChange when clicks on Select all button", async () => { - const spy = jest.fn() - render() - const selectAll = screen.getByRole("button", { - name: "Select all", - }) - - await user.click(selectAll) - - await waitFor(() => { - expect(spy).toHaveBeenCalledTimes(1) - }) - }) - - it("clears all the selection when clicks on Clear button", async () => { - render( - - ) - const clear = screen.getByRole("button", { - name: "Clear selections", - }) - - await user.click(clear) - - await waitFor(() => { - expect( - screen.getByRole("option", { - name: "option-1-label-mock", - selected: false, - }) - ).toBeVisible() - expect( - screen.getByRole("option", { - name: "option-2-label-mock", - selected: false, - }) - ).toBeVisible() - expect( - screen.getByRole("option", { - name: "option-3-label-mock", - selected: false, - }) - ).toBeVisible() - }) - }) - - it("fires onSelectionChange when clicks on Clear all button", async () => { - const spy = jest.fn() - render( - - ) - const clear = screen.getByRole("button", { - name: "Clear selections", - }) - - await user.click(clear) - - await waitFor(() => { - expect(spy).toHaveBeenCalledTimes(1) - }) - }) - - it("de-selects the option when clicks on a selected option", async () => { - render( - - ) - const option2 = screen.getByRole("option", { - name: "option-2-label-mock", - selected: true, - }) - - await user.click(option2) - - await waitFor(() => { - expect( - screen.getByRole("option", { - name: "option-2-label-mock", - selected: false, - }) - ).toBeVisible() - }) - }) -}) - -describe(" - Keyboard interaction", () => { - describe("Given no selectedKeys", () => { - it("focuses on the frist option when tabs onto the list", async () => { - render() - await user.tab() - - await waitFor(() => { - expect( - screen.getByRole("option", { name: "option-1-label-mock" }) - ).toHaveFocus() - }) - }) - }) - - describe("Given selectedKeys is [option-2-value-mock, option-3-value-mock]", () => { - it("focuses the frist selected option when tabs onto the list", async () => { - render( - - ) - await user.tab() - - await waitFor(() => { - expect( - screen.getByRole("option", { name: "option-2-label-mock" }) - ).toHaveFocus() - }) - }) - }) - - it("moves the focus down when hits arrow down key", async () => { - render() - await user.tab() - await user.keyboard("{ArrowDown}") - - await waitFor(() => { - expect( - screen.getByRole("option", { name: "option-2-label-mock" }) - ).toHaveFocus() - }) - }) - - it("keeps the focus at the last element when hits arrow down key on it", async () => { - render( - - ) - await user.tab() - await user.keyboard("{ArrowDown}") - - await waitFor(() => { - expect( - screen.getByRole("option", { name: "option-3-label-mock" }) - ).toHaveFocus() - }) - }) - - it("moves the focus up when hits arrow up key", async () => { - render( - - ) - await user.tab() - await user.keyboard("{ArrowUp}") - - await waitFor(() => { - expect( - screen.getByRole("option", { name: "option-2-label-mock" }) - ).toHaveFocus() - }) - }) - - it("keeps the focus ring at the first element when hits arrow up key on it", async () => { - render() - await user.tab() - await user.keyboard("{ArrowUp}") - - await waitFor(() => { - expect( - screen.getByRole("option", { name: "option-1-label-mock" }) - ).toHaveFocus() - }) - }) - - it("selects the option when hits enter on a non-selected option", async () => { - render() - - await user.tab() - await user.keyboard("{Enter}") - - await waitFor(() => { - expect( - screen.getByRole("option", { - name: "option-1-label-mock", - selected: true, - }) - ).toBeVisible() - }) - }) - - it("de-selects the option when hits enter on a selected option", async () => { - render( - - ) - - await user.tab() - await user.keyboard("{Enter}") - - await waitFor(() => { - expect( - screen.getByRole("option", { - name: "option-2-label-mock", - selected: false, - }) - ).toBeVisible() - }) - }) - - it("fires onSelectionChange when hits enter on a option", async () => { - const spy = jest.fn() - render() - - await user.tab() - await user.keyboard("{Enter}") - - await waitFor(() => { - expect(spy).toHaveBeenCalledTimes(1) - }) - }) -}) - -describe(" - Search Filtering", () => { - describe("With no onSearchInputChange callback", () => { - it("shows only the matched options", async () => { - render() - const searchInput = screen.getByRole("searchbox") - await user.type(searchInput, "1") - - await waitFor(() => { - expect( - screen.getByRole("option", { - name: "option-1-label-mock", - }) - ).toBeVisible() - expect( - screen.queryByRole("option", { - name: "option-2-label-mock", - }) - ).not.toBeInTheDocument() - expect( - screen.queryByRole("option", { - name: "option-3-label-mock", - }) - ).not.toBeInTheDocument() - }) - }) - }) - describe("With a onSearchInputChange callback", () => { - it("Does not filter the matched options", async () => { - const onSearchInputChange = jest.fn() - - render( - - ) - const searchInput = screen.getByRole("searchbox") - const searchString = "1" - await user.type(searchInput, searchString) - - await waitFor(() => { - expect( - screen.getByRole("option", { - name: "option-1-label-mock", - }) - ).toBeVisible() - expect( - screen.getByRole("option", { - name: "option-2-label-mock", - }) - ).toBeVisible() - expect( - screen.getByRole("option", { - name: "option-3-label-mock", - }) - ).toBeVisible() - }) - }) - - it("Calls back to the consumer with the search text", async () => { - const onSearchInputChange = jest.fn() - - render( - - ) - const searchInput = screen.getByRole("searchbox") - const searchString = "1" - await user.type(searchInput, searchString) - - await waitFor(() => { - expect(onSearchInputChange).toBeCalledTimes(2) - expect(onSearchInputChange).toBeCalledWith(searchString) - }) - }) - }) -}) - -describe(" - controlling items from the consumer", () => { - it("renders only items passed", () => { - const { rerender } = render() - expect( - screen.getByRole("option", { - name: "option-1-label-mock", - }) - ).toBeVisible() - expect( - screen.getByRole("option", { - name: "option-2-label-mock", - }) - ).toBeVisible() - expect( - screen.getByRole("option", { - name: "option-3-label-mock", - }) - ).toBeVisible() - - rerender() - expect( - screen.queryByRole("option", { - name: "option-1-label-mock", - }) - ).not.toBeInTheDocument() - expect( - screen.queryByRole("option", { - name: "option-2-label-mock", - }) - ).not.toBeInTheDocument() - expect( - screen.getByRole("option", { - name: "option-3-label-mock", - }) - ).toBeVisible() - }) -}) diff --git a/packages/components/src/FilterMultiSelect/provider/SelectionProvider/SelectionProvider.tsx b/packages/components/src/FilterMultiSelect/provider/SelectionProvider/SelectionProvider.tsx deleted file mode 100644 index 01d98e6..0000000 --- a/packages/components/src/FilterMultiSelect/provider/SelectionProvider/SelectionProvider.tsx +++ /dev/null @@ -1,106 +0,0 @@ -import React, { HTMLAttributes, useCallback, useContext, useState } from "react" -import { useListBox } from "@react-aria/listbox" -import { Item } from "@react-stately/collections" -import { ListState, useListState } from "@react-stately/list" -import { SelectionMode, Selection } from "@react-types/shared" -import { VisuallyHidden } from "@kaizen/a11y" -import { ItemType, MultiSelectItem } from "../../types" -import { useMenuTriggerContext } from "../MenuTriggerProvider" - -export interface SelectionProviderProps { - selectionMode: SelectionMode - children: React.ReactNode // control how menu should look like - items?: ItemType[] - onSelectionChange?: (keys: Selection) => void - /** The currently selected keys in the collection (controlled). */ - selectedKeys?: Selection - /** The initial selected keys in the collection (uncontrolled). */ - defaultSelectedKeys?: Selection - label: string - disabledKeys?: Selection - onSearchInputChange?: (searchInput: string) => void -} - -export interface SelectionProviderContextType { - listBoxProps: HTMLAttributes - labelProps: HTMLAttributes - selectionState: ListState - listRef: React.RefObject - searchQuery?: string - setSearchQuery: React.Dispatch> -} - -const SelectionContext = React.createContext( - {} as SelectionProviderContextType -) - -export const SelectionProvider = ( - props: SelectionProviderProps -): JSX.Element => { - const { onSearchInputChange, ...otherProps } = props - const [searchQuery, setSearchQuery] = useState("") - const { menuProps } = useMenuTriggerContext() - /** - * While the onSearchInputChange is a side-effect, this useEffect should be fine. - * If the search input state becomes controlled, this useEffect could cause synchronisation - * issues and should be replaced. - */ - - React.useEffect(() => { - if (onSearchInputChange) { - onSearchInputChange(searchQuery) - } - }, [searchQuery, onSearchInputChange]) - - const searchFilter = useCallback( - (nodes: Iterable): Iterable => - searchQuery - ? Array.from(nodes).filter(f => - f.textValue.toLowerCase().includes(searchQuery.toLowerCase()) - ) - : nodes, - [searchQuery] - ) - - // Create state based on the incoming props to manage the selection - const state = useListState({ - ...otherProps, - children: item => {item.label}, // For initialising selection and determined item.renderer, can be only Item or Section - filter: onSearchInputChange ? undefined : searchFilter, // If the user has passed an `onSearchInputChange` we opt them out of the default filtering - }) - - // Get A11y attributes and events for the listbox - const ref = React.createRef() - const { listBoxProps, labelProps } = useListBox( - { - ...menuProps, - ...otherProps, - disallowEmptySelection: true, // stop escape key from clearing selection - }, - state, - ref - ) - - return ( - - {otherProps.label} - {otherProps.children} - - ) -} - -export const useSelectionContext = (): SelectionProviderContextType => - useContext(SelectionContext) - -export const SelectionConsumer = SelectionContext.Consumer - -SelectionProvider.displayName = "SelectionProvider" diff --git a/packages/components/src/FilterMultiSelect/provider/SelectionProvider/index.ts b/packages/components/src/FilterMultiSelect/provider/SelectionProvider/index.ts deleted file mode 100644 index 0334bee..0000000 --- a/packages/components/src/FilterMultiSelect/provider/SelectionProvider/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./SelectionProvider" diff --git a/packages/components/src/FilterMultiSelect/provider/index.ts b/packages/components/src/FilterMultiSelect/provider/index.ts deleted file mode 100644 index 2b7c250..0000000 --- a/packages/components/src/FilterMultiSelect/provider/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from "./MenuTriggerProvider" -export * from "./SelectionProvider" diff --git a/packages/components/src/FilterMultiSelect/subcomponents/ListBox/ListBox.module.scss b/packages/components/src/FilterMultiSelect/subcomponents/ListBox/ListBox.module.scss deleted file mode 100644 index e7277b3..0000000 --- a/packages/components/src/FilterMultiSelect/subcomponents/ListBox/ListBox.module.scss +++ /dev/null @@ -1,18 +0,0 @@ -@import "~@kaizen/design-tokens/sass/spacing"; - -.listBox { - list-style: none; - padding: $spacing-sm; - margin: 0 $spacing-sm 0 0; - display: grid; - max-height: 22rem; - overflow-y: auto; -} - -.overflown { - padding-right: $spacing-sm; -} - -.hidden { - display: none; -} diff --git a/packages/components/src/FilterMultiSelect/subcomponents/ListBox/ListBox.tsx b/packages/components/src/FilterMultiSelect/subcomponents/ListBox/ListBox.tsx deleted file mode 100644 index b9e120b..0000000 --- a/packages/components/src/FilterMultiSelect/subcomponents/ListBox/ListBox.tsx +++ /dev/null @@ -1,97 +0,0 @@ -import React, { useState, useEffect } from "react" -import { Collection } from "@react-types/shared" -import classnames from "classnames" -import { useSelectionContext } from "../../provider/SelectionProvider" -import { MultiSelectItem } from "../../types" -import styles from "./ListBox.module.scss" - -export type ListBoxItems = { - selectedItems: MultiSelectItem[] - unselectedItems: MultiSelectItem[] - disabledItems: MultiSelectItem[] - allItems: MultiSelectItem[] - hasNoItems: boolean -} - -export interface ListBoxProps { - children: (items: ListBoxItems) => React.ReactNode -} - -const getItemsFromKeys = ( - items: Collection, - keys: Set -): MultiSelectItem[] => { - const itemKeys = Array.from(keys) - return itemKeys.reduce((acc, itemKey) => { - const item = items.getItem(itemKey) - return item ? [...acc, item] : acc - }, []) -} - -export const ListBox = ({ children }: ListBoxProps): JSX.Element => { - const { listBoxProps, listRef, selectionState } = useSelectionContext() - const [isOverflown, setIsOverflown] = useState(false) - useEffect(() => { - const listElement = listRef.current - if (!listElement) { - return - } - setIsOverflown(listElement.scrollHeight > listElement.clientHeight) - }, [listRef]) - const { - collection: items, - disabledKeys, - selectionManager: { selectedKeys }, - } = selectionState - - const disabledItems = getItemsFromKeys(items, disabledKeys) - const selectedItems = getItemsFromKeys(items, selectedKeys) - - const unselectedItems = Array.from(items).filter( - item => !disabledKeys.has(item.key) && !selectedKeys.has(item.key) - ) - const allItems = Array.from(items) - const hasNoItems = allItems.length === 0 - - const [itemsState, setItemsState] = useState({ - selectedItems, - unselectedItems, - disabledItems, - allItems, - hasNoItems, - }) - - // Only update rendering of items when filtering. - // Avoids re-ordering of items when making a selection - useEffect(() => { - setItemsState({ - selectedItems, - disabledItems, - unselectedItems, - allItems, - hasNoItems, - }) - }, [selectionState.collection.size]) - - if (hasNoItems) { - return ( - <> -
    {children(itemsState)}
    - {/* This ul with the ref needs to exist otherwise it fatals */} -
      - - ) - } - - return ( -
        - {children(itemsState)} -
      - ) -} - -ListBox.displayName = "FilterMultiSelect.ListBox" diff --git a/packages/components/src/FilterMultiSelect/subcomponents/ListBox/index.ts b/packages/components/src/FilterMultiSelect/subcomponents/ListBox/index.ts deleted file mode 100644 index 31effa4..0000000 --- a/packages/components/src/FilterMultiSelect/subcomponents/ListBox/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./ListBox" diff --git a/packages/components/src/FilterMultiSelect/subcomponents/ListBoxSection/ListBoxSection.module.scss b/packages/components/src/FilterMultiSelect/subcomponents/ListBoxSection/ListBoxSection.module.scss deleted file mode 100644 index 0828487..0000000 --- a/packages/components/src/FilterMultiSelect/subcomponents/ListBoxSection/ListBoxSection.module.scss +++ /dev/null @@ -1,3 +0,0 @@ -.listBoxSection { - display: grid; -} diff --git a/packages/components/src/FilterMultiSelect/subcomponents/ListBoxSection/ListBoxSection.tsx b/packages/components/src/FilterMultiSelect/subcomponents/ListBoxSection/ListBoxSection.tsx deleted file mode 100644 index 621050e..0000000 --- a/packages/components/src/FilterMultiSelect/subcomponents/ListBoxSection/ListBoxSection.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import React from "react" -import { MultiSelectItem } from "../../types" -import styles from "./ListBoxSection.module.scss" - -export interface ListBoxSectionProps { - items: MultiSelectItem[] - /** - * Becomes an aria-label on the section, informing - * unsighted users - */ - sectionName: string - children: (item: MultiSelectItem) => React.ReactNode -} - -export const ListBoxSection = ({ - items, - sectionName, - children, -}: ListBoxSectionProps): JSX.Element => ( -
      - {Array.from(items).map(node => node != undefined && children(node))} -
      -) - -ListBoxSection.displayName = "FilterMultiSelect.ListBoxSection" diff --git a/packages/components/src/FilterMultiSelect/subcomponents/ListBoxSection/index.ts b/packages/components/src/FilterMultiSelect/subcomponents/ListBoxSection/index.ts deleted file mode 100644 index 09fbbe3..0000000 --- a/packages/components/src/FilterMultiSelect/subcomponents/ListBoxSection/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./ListBoxSection" diff --git a/packages/components/src/FilterMultiSelect/subcomponents/LoadMoreButton/LoadMoreButton.module.scss b/packages/components/src/FilterMultiSelect/subcomponents/LoadMoreButton/LoadMoreButton.module.scss deleted file mode 100644 index 2bc9ec2..0000000 --- a/packages/components/src/FilterMultiSelect/subcomponents/LoadMoreButton/LoadMoreButton.module.scss +++ /dev/null @@ -1,5 +0,0 @@ -@import "~@kaizen/design-tokens/sass/spacing"; - -.container { - padding: $spacing-sm $spacing-sm 0; -} diff --git a/packages/components/src/FilterMultiSelect/subcomponents/LoadMoreButton/LoadMoreButton.tsx b/packages/components/src/FilterMultiSelect/subcomponents/LoadMoreButton/LoadMoreButton.tsx deleted file mode 100644 index c4d0948..0000000 --- a/packages/components/src/FilterMultiSelect/subcomponents/LoadMoreButton/LoadMoreButton.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import React from "react" -import { Button, ButtonProps } from "@kaizen/button" -import styles from "./LoadMoreButton.module.scss" - -export type LoadMoreButtonProps = ButtonProps - -export const LoadMoreButton = (props: LoadMoreButtonProps): JSX.Element => ( -
      -
      -) - -LoadMoreButton.displayName = "FilterMultiSelect.LoadMoreButton" diff --git a/packages/components/src/FilterMultiSelect/subcomponents/LoadMoreButton/index.ts b/packages/components/src/FilterMultiSelect/subcomponents/LoadMoreButton/index.ts deleted file mode 100644 index 5a83d6c..0000000 --- a/packages/components/src/FilterMultiSelect/subcomponents/LoadMoreButton/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./LoadMoreButton" diff --git a/packages/components/src/FilterMultiSelect/subcomponents/MenuLayout/MenuFooter/MenuFooter.module.scss b/packages/components/src/FilterMultiSelect/subcomponents/MenuLayout/MenuFooter/MenuFooter.module.scss deleted file mode 100644 index bbaabf0..0000000 --- a/packages/components/src/FilterMultiSelect/subcomponents/MenuLayout/MenuFooter/MenuFooter.module.scss +++ /dev/null @@ -1,9 +0,0 @@ -@import "~@kaizen/design-tokens/sass/color"; -@import "~@kaizen/design-tokens/sass/spacing"; - -.footer { - border-top: 1px solid rgba($color-gray-600-rgb, 0.1); - gap: $spacing-xs; - display: flex; - padding: $spacing-sm $spacing-sm 0; -} diff --git a/packages/components/src/FilterMultiSelect/subcomponents/MenuLayout/MenuFooter/MenuFooter.tsx b/packages/components/src/FilterMultiSelect/subcomponents/MenuLayout/MenuFooter/MenuFooter.tsx deleted file mode 100644 index 71af041..0000000 --- a/packages/components/src/FilterMultiSelect/subcomponents/MenuLayout/MenuFooter/MenuFooter.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import React from "react" -import styles from "./MenuFooter.module.scss" - -export interface MenuFooterProps { - children: React.ReactNode -} - -export const MenuFooter = ({ children }: MenuFooterProps): JSX.Element => ( -
      {children}
      -) - -MenuFooter.displayName = "FilterMultiSelect.MenuFooter" diff --git a/packages/components/src/FilterMultiSelect/subcomponents/MenuLayout/MenuFooter/index.ts b/packages/components/src/FilterMultiSelect/subcomponents/MenuLayout/MenuFooter/index.ts deleted file mode 100644 index 8706892..0000000 --- a/packages/components/src/FilterMultiSelect/subcomponents/MenuLayout/MenuFooter/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./MenuFooter" diff --git a/packages/components/src/FilterMultiSelect/subcomponents/MenuLayout/MenuLoadingSkeleton/MenuLoadingSkeleton.module.scss b/packages/components/src/FilterMultiSelect/subcomponents/MenuLayout/MenuLoadingSkeleton/MenuLoadingSkeleton.module.scss deleted file mode 100644 index 2ae6b41..0000000 --- a/packages/components/src/FilterMultiSelect/subcomponents/MenuLayout/MenuLoadingSkeleton/MenuLoadingSkeleton.module.scss +++ /dev/null @@ -1,10 +0,0 @@ -@import "~@kaizen/design-tokens/sass/spacing"; - -.loadingInput { - margin-bottom: $spacing-sm; -} - -.loadingContainer { - margin-left: $spacing-sm; - margin-right: $spacing-sm; -} diff --git a/packages/components/src/FilterMultiSelect/subcomponents/MenuLayout/MenuLoadingSkeleton/MenuLoadingSkeleton.tsx b/packages/components/src/FilterMultiSelect/subcomponents/MenuLayout/MenuLoadingSkeleton/MenuLoadingSkeleton.tsx deleted file mode 100644 index 055525d..0000000 --- a/packages/components/src/FilterMultiSelect/subcomponents/MenuLayout/MenuLoadingSkeleton/MenuLoadingSkeleton.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import React from "react" -import { LoadingInput, LoadingParagraph } from "@kaizen/loading-skeleton" -import { MenuFooter } from "../MenuFooter" -import styles from "./MenuLoadingSkeleton.module.scss" - -export interface MenuLoadingSkeletonProps { - isAnimated?: boolean -} - -export const MenuLoadingSkeleton = ({ - isAnimated = false, -}: MenuLoadingSkeletonProps): JSX.Element => ( - <> -
      - - - - - - -
      - - - - - -) - -MenuLoadingSkeleton.displayName = "FilterMultiSelect.MenuLoadingSkeleton" diff --git a/packages/components/src/FilterMultiSelect/subcomponents/MenuLayout/MenuLoadingSkeleton/index.ts b/packages/components/src/FilterMultiSelect/subcomponents/MenuLayout/MenuLoadingSkeleton/index.ts deleted file mode 100644 index e55c839..0000000 --- a/packages/components/src/FilterMultiSelect/subcomponents/MenuLayout/MenuLoadingSkeleton/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./MenuLoadingSkeleton" diff --git a/packages/components/src/FilterMultiSelect/subcomponents/MenuLayout/index.ts b/packages/components/src/FilterMultiSelect/subcomponents/MenuLayout/index.ts deleted file mode 100644 index 29b08ba..0000000 --- a/packages/components/src/FilterMultiSelect/subcomponents/MenuLayout/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from "./MenuFooter" -export * from "./MenuLoadingSkeleton" diff --git a/packages/components/src/FilterMultiSelect/subcomponents/MenuPopup/MenuPopup.module.scss b/packages/components/src/FilterMultiSelect/subcomponents/MenuPopup/MenuPopup.module.scss deleted file mode 100644 index ecdfacd..0000000 --- a/packages/components/src/FilterMultiSelect/subcomponents/MenuPopup/MenuPopup.module.scss +++ /dev/null @@ -1,26 +0,0 @@ -@import "~@kaizen/design-tokens/sass/spacing"; -@import "~@kaizen/design-tokens/sass/shadow"; -@import "~@kaizen/design-tokens/sass/border"; -@import "~@kaizen/design-tokens/sass/color"; - -// figma hard coded: https://www.figma.com/file/eZKEE5kXbEMY3lx84oz8iN/%E2%9D%A4%EF%B8%8F-UI-Kit%3A-Heart?node-id=22814%3A96966 -$menu-container-width: 294px; -$menu-container-max-height: 312px; - -.menuPopup { - position: absolute; - z-index: 1000; // from $ca-z-index-dropdown - box-sizing: border-box; - background: $color-white; - color: $color-purple-800; - border-radius: $border-solid-border-radius; - box-shadow: $shadow-large-box-shadow; - padding: $spacing-sm 0; - margin-top: $spacing-xs; - text-align: left; - width: $menu-container-width; - - [dir="rtl"] & { - text-align: right; - } -} diff --git a/packages/components/src/FilterMultiSelect/subcomponents/MenuPopup/MenuPopup.tsx b/packages/components/src/FilterMultiSelect/subcomponents/MenuPopup/MenuPopup.tsx deleted file mode 100644 index ccc05e5..0000000 --- a/packages/components/src/FilterMultiSelect/subcomponents/MenuPopup/MenuPopup.tsx +++ /dev/null @@ -1,61 +0,0 @@ -import React from "react" -import { FocusScope } from "@react-aria/focus" -import { useOverlay, DismissButton } from "@react-aria/overlays" -import { useMenuTriggerContext } from "../../provider" -import styles from "./MenuPopup.module.scss" - -export interface MenuPopupProps { - isLoading?: boolean - loadingSkeleton?: React.ReactNode - children: React.ReactNode -} - -export const MenuPopup = ({ - isLoading, - loadingSkeleton, - children, -}: MenuPopupProps): JSX.Element => { - const { menuTriggerState } = useMenuTriggerContext() - - const onClose = (): void => menuTriggerState.close() - - // Handle events that should cause the menu to close, - // e.g. blur, clicking outside, or pressing the escape key. - const overlayRef = React.createRef() - const { overlayProps } = useOverlay( - { - onClose, - isOpen: menuTriggerState.isOpen, - isDismissable: true, - }, - overlayRef - ) - - // Wrap in so that focus is restored back to the trigger when the menu is closed - // and auto focus on the first focusable item after loading. (disable eslint no-autofocus error for it) - // In addition, add hidden components at the start and end of the list - // to allow screen reader users to dismiss the popup easily. - return menuTriggerState.isOpen ? ( -
      - {isLoading && loadingSkeleton ? ( - <> - - {loadingSkeleton} - - - ) : ( - // eslint-disable-next-line jsx-a11y/no-autofocus - - - - {children} - - - )} -
      - ) : ( - <> - ) -} - -MenuPopup.displayName = "FilterMultiSelect.MenuPopup" diff --git a/packages/components/src/FilterMultiSelect/subcomponents/MenuPopup/index.ts b/packages/components/src/FilterMultiSelect/subcomponents/MenuPopup/index.ts deleted file mode 100644 index e8ecdf3..0000000 --- a/packages/components/src/FilterMultiSelect/subcomponents/MenuPopup/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./MenuPopup" diff --git a/packages/components/src/FilterMultiSelect/subcomponents/MultiSelectOption/MultiSelectOption.module.scss b/packages/components/src/FilterMultiSelect/subcomponents/MultiSelectOption/MultiSelectOption.module.scss deleted file mode 100644 index 8d78c7e..0000000 --- a/packages/components/src/FilterMultiSelect/subcomponents/MultiSelectOption/MultiSelectOption.module.scss +++ /dev/null @@ -1,113 +0,0 @@ -@import "~@kaizen/design-tokens/sass/border"; -@import "~@kaizen/design-tokens/sass/color"; -@import "~@kaizen/design-tokens/sass/typography"; -@import "~@kaizen/design-tokens/sass/spacing"; - -$iconAndBadgeHeight: $spacing-md; - -.icon { - line-height: 1; - height: calc(#{$iconAndBadgeHeight} - #{$border-solid-border-width} * 2); - width: calc(#{$iconAndBadgeHeight} - #{$border-solid-border-width} * 2); - border: $border-solid-border-width $border-solid-border-style; - border-color: $color-gray-500; - border-radius: $border-solid-border-radius; - display: inline-flex; - justify-content: center; - align-items: center; -} - -.option { - height: fit-content; - align-items: flex-start; - display: inline-grid; - grid-template-columns: $spacing-md 1fr auto; - gap: $spacing-xs; - padding: $spacing-xs; - position: relative; - font-family: $typography-paragraph-body-font-family; - font-size: $typography-paragraph-body-font-size; - letter-spacing: $typography-paragraph-body-letter-spacing; - font-weight: $typography-paragraph-body-font-weight; - line-height: $typography-paragraph-body-line-height; - border: $border-solid-border-width $border-solid-border-style; - border-color: $border-borderless-border-color; - border-radius: $border-solid-border-radius; - cursor: default; - - &:hover, - &:active, - &:focus { - background-color: $color-blue-100; - - .badge { - background-color: $color-white; - } - - .icon { - border-color: $color-gray-600; - background-color: $color-gray-200; - } - } - - &.isFocused, - &:focus-visible { - background-color: $color-blue-100; - - &::after { - $focus-ring-offset: calc((#{$border-focus-ring-border-width} * 2) + 1px); - - content: ""; - position: absolute; - background: transparent; - border: $border-focus-ring-border-width $border-focus-ring-border-style - $color-blue-500; - border-radius: $border-focus-ring-border-radius; - inset: calc(-1 * #{$focus-ring-offset}); - z-index: 1; // show border when sibling option is hovered - } - } - - &:focus { - outline: none; // cancel browser style - } -} - -.isDisabled { - opacity: 30%; - background: none; - - &:hover { - .icon { - border-color: $color-gray-500; - } - - .badge { - background-color: $color-gray-300; - } - } -} - -.badgeContainer { - // Must be the same height as .icon, so they align vertically - height: $iconAndBadgeHeight; - display: flex; - align-items: center; -} - -.isSelected { - font-weight: $typography-paragraph-bold-font-weight; - - &.icon { - background-color: $color-gray-500; - color: $color-white; - } - - &:hover, - &:active, - &:focus { - .icon { - background-color: $color-gray-600; - } - } -} diff --git a/packages/components/src/FilterMultiSelect/subcomponents/MultiSelectOption/MultiSelectOption.spec.tsx b/packages/components/src/FilterMultiSelect/subcomponents/MultiSelectOption/MultiSelectOption.spec.tsx deleted file mode 100644 index 13baf7b..0000000 --- a/packages/components/src/FilterMultiSelect/subcomponents/MultiSelectOption/MultiSelectOption.spec.tsx +++ /dev/null @@ -1,104 +0,0 @@ -// A11y and interaction are tested in SelectionProvider.spec, hence not covered here - -import React from "react" -import { useOption } from "@react-aria/listbox" -import { render, screen } from "@testing-library/react" -import { ItemType } from "../../types" -import { MultiSelectOption, MultiSelectOptionProps } from "./MultiSelectOption" - -jest.mock("@kaizen/draft-badge", () => ({ - Badge: "badge-mock", -})) - -jest.mock("@react-aria/listbox", () => ({ - useOption: jest.fn(), -})) - -jest.mock("../../provider", () => ({ - useSelectionContext: (): { selectionState: Record } => ({ - selectionState: {}, - }), -})) - -const itemMock: MultiSelectOptionProps["item"] & { value: ItemType } = { - type: "type-mock", - key: "key-mock", - value: { label: "label-mock", value: "value-mock" }, - level: 0, - hasChildNodes: false, - childNodes: [], - rendered: <>rendered-mock, - textValue: "", -} - -const MultiSelectOptionWrapper = ({ - item = itemMock, -}: Partial): JSX.Element => ( - -) - -describe(" - Visual content", () => { - describe("Given item is unselected", () => { - beforeEach(() => { - ;(useOption as jest.Mock).mockReturnValue({ - optionProps: {}, - isSelected: false, - isDisabled: false, - }) - render() - }) - it("shows the provided rendered node", () => { - const option = screen.getByText("rendered-mock") - expect(option).toBeVisible() - }) - - it("has aria-label as the item.label", () => { - const option = screen.getByLabelText("label-mock") - expect(option).toBeVisible() - }) - }) - - describe("Given item is disabled", () => { - beforeEach(() => { - ;(useOption as jest.Mock).mockReturnValue({ - optionProps: {}, - isSelected: false, - isDisabled: true, - }) - render() - }) - - it("has a disabled class", () => { - const label = screen.getByLabelText("label-mock") - expect(label).toHaveClass("isDisabled") - }) - }) - - describe("Given count is provided", () => { - beforeEach(() => { - ;(useOption as jest.Mock).mockReturnValue({ - optionProps: {}, - isSelected: false, - isDisabled: false, - }) - render( - - ) - }) - - it("shows the count in the badge", () => { - const badge = screen.getByText("count-mock") - expect(badge.tagName).toEqual("BADGE-MOCK") - }) - - it("has aria-description to describe the count are available for this option", () => { - const option = screen.getByLabelText("label-mock") - expect(option).toHaveAccessibleDescription("count-mock available") - }) - }) -}) diff --git a/packages/components/src/FilterMultiSelect/subcomponents/MultiSelectOption/MultiSelectOption.tsx b/packages/components/src/FilterMultiSelect/subcomponents/MultiSelectOption/MultiSelectOption.tsx deleted file mode 100644 index e164ad5..0000000 --- a/packages/components/src/FilterMultiSelect/subcomponents/MultiSelectOption/MultiSelectOption.tsx +++ /dev/null @@ -1,65 +0,0 @@ -import React, { useMemo } from "react" -import { useFocusRing } from "@react-aria/focus" -import { useOption } from "@react-aria/listbox" -import { mergeProps } from "@react-aria/utils" -import classnames from "classnames" -import { v4 } from "uuid" -import { VisuallyHidden } from "@kaizen/a11y" -import { Badge } from "@kaizen/draft-badge" -import { CheckIcon } from "~components/SVG/icons/CheckIcon" -import { useSelectionContext } from "../../provider" -import { MultiSelectItem } from "../../types" -import styles from "./MultiSelectOption.module.scss" - -export interface MultiSelectOptionProps { - item: MultiSelectItem -} - -export const MultiSelectOption = ({ - item, -}: MultiSelectOptionProps): JSX.Element => { - const { selectionState: state } = useSelectionContext() - // Get props for the option element - const ref = React.createRef() - const { optionProps, isSelected, isDisabled } = useOption( - { key: item.key }, - state, - ref - ) - - // Determine whether we should show a keyboard - // focus ring for accessibility - const { isFocusVisible, focusProps } = useFocusRing() - const countElementId = useMemo(() => v4(), []) - - return ( -
    • - - {isSelected && } - - {/* can also be item.value since 'rendered' is defined as item.value in SelectionProvider*/} - {item.rendered} - {item.value?.count && ( - - {item.value.count} - available - - )} -
      • - ) -} - -MultiSelectOption.displayName = "FilterMultiSelect.Option" diff --git a/packages/components/src/FilterMultiSelect/subcomponents/MultiSelectOption/index.ts b/packages/components/src/FilterMultiSelect/subcomponents/MultiSelectOption/index.ts deleted file mode 100644 index c08d0ce..0000000 --- a/packages/components/src/FilterMultiSelect/subcomponents/MultiSelectOption/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./MultiSelectOption" diff --git a/packages/components/src/FilterMultiSelect/subcomponents/NoResults/NoResults.module.scss b/packages/components/src/FilterMultiSelect/subcomponents/NoResults/NoResults.module.scss deleted file mode 100644 index 423e7ce..0000000 --- a/packages/components/src/FilterMultiSelect/subcomponents/NoResults/NoResults.module.scss +++ /dev/null @@ -1,3 +0,0 @@ -.container { - padding: 1.125rem; // There's no spacing token for 18px -_- -} diff --git a/packages/components/src/FilterMultiSelect/subcomponents/NoResults/NoResults.tsx b/packages/components/src/FilterMultiSelect/subcomponents/NoResults/NoResults.tsx deleted file mode 100644 index d049f9f..0000000 --- a/packages/components/src/FilterMultiSelect/subcomponents/NoResults/NoResults.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import React, { HTMLAttributes } from "react" -import { Paragraph } from "@kaizen/typography" -import styles from "./NoResults.module.scss" - -export interface NoResultsProps extends HTMLAttributes { - children: React.ReactNode -} - -export const NoResults = ({ - children, - ...restProps -}: NoResultsProps): JSX.Element => ( -
      - - {children} - -
      -) - -NoResults.displayName = "FilterMultiSelect.NoResults" diff --git a/packages/components/src/FilterMultiSelect/subcomponents/NoResults/index.ts b/packages/components/src/FilterMultiSelect/subcomponents/NoResults/index.ts deleted file mode 100644 index 530be40..0000000 --- a/packages/components/src/FilterMultiSelect/subcomponents/NoResults/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./NoResults" diff --git a/packages/components/src/FilterMultiSelect/subcomponents/Root/Root.tsx b/packages/components/src/FilterMultiSelect/subcomponents/Root/Root.tsx deleted file mode 100644 index abf819c..0000000 --- a/packages/components/src/FilterMultiSelect/subcomponents/Root/Root.tsx +++ /dev/null @@ -1,83 +0,0 @@ -import React from "react" -import { SelectionMode, Selection } from "@react-types/shared" -import { - MenuTriggerConsumer, - MenuTriggerProvider, - MenuTriggerProviderContextType, - MenuTriggerProviderProps, -} from "../../provider/MenuTriggerProvider" -import { - SelectionConsumer, - SelectionProvider, - SelectionProviderContextType, -} from "../../provider/SelectionProvider" -import { ItemType } from "../../types" -import { MenuPopup, MenuPopupProps } from "../MenuPopup" - -interface SelectionProps { - label: string // provide A11y context for listbox - items: ItemType[] - selectedKeys?: Selection - defaultSelectedKeys?: Selection - onSelectionChange?: (keys: Selection) => void - selectionMode?: SelectionMode - onSearchInputChange?: (searchInput: string) => void -} - -export interface RootProps - extends Omit, - Omit, - SelectionProps { - trigger: (value?: MenuTriggerProviderContextType) => React.ReactNode - children: (value?: SelectionProviderContextType) => React.ReactNode // the content of the menu -} - -export const Root = ({ - trigger, - children, - isOpen, - defaultOpen, - onOpenChange, - isLoading, - loadingSkeleton, - label, - items, - selectedKeys, - defaultSelectedKeys, - onSelectionChange, - selectionMode = "multiple", - onSearchInputChange, -}: RootProps): JSX.Element => { - const menuTriggerProps = { isOpen, defaultOpen, onOpenChange } - const menuPopupProps = { isLoading, loadingSkeleton } - const disabledKeys: Selection = new Set( - items - ?.filter(item => item.isDisabled === true) - .map(disabledItem => disabledItem.value) - ) - const selectionProps = { - label, - items, - selectedKeys, - defaultSelectedKeys, - onSelectionChange, - selectionMode, - disabledKeys, - onSearchInputChange, - } - - return ( - -
      - {trigger} - - - {children} - - -
      -       - ) -} - -Root.displayName = "FilterMultiSelect" diff --git a/packages/components/src/FilterMultiSelect/subcomponents/Root/index.ts b/packages/components/src/FilterMultiSelect/subcomponents/Root/index.ts deleted file mode 100644 index aee034e..0000000 --- a/packages/components/src/FilterMultiSelect/subcomponents/Root/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./Root" diff --git a/packages/components/src/FilterMultiSelect/subcomponents/SearchInput/SearchInput.module.scss b/packages/components/src/FilterMultiSelect/subcomponents/SearchInput/SearchInput.module.scss deleted file mode 100644 index d4e1409..0000000 --- a/packages/components/src/FilterMultiSelect/subcomponents/SearchInput/SearchInput.module.scss +++ /dev/null @@ -1,6 +0,0 @@ -@import "~@kaizen/design-tokens/sass/spacing"; - -.inputSearchContainer { - position: relative; - margin: 0 $spacing-sm; -} diff --git a/packages/components/src/FilterMultiSelect/subcomponents/SearchInput/SearchInput.spec.tsx b/packages/components/src/FilterMultiSelect/subcomponents/SearchInput/SearchInput.spec.tsx deleted file mode 100644 index a381e78..0000000 --- a/packages/components/src/FilterMultiSelect/subcomponents/SearchInput/SearchInput.spec.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import React from "react" -import { render, screen } from "@testing-library/react" -import userEvent from "@testing-library/user-event" -import { useSelectionContext } from "../../provider" -import { SearchInput } from "." - -const user = userEvent.setup() - -jest.mock("../../provider", () => ({ - useSelectionContext: jest.fn(), -})) - -const SearchInputWrapper = (): JSX.Element => - -describe(" - interaction", () => { - describe("Given searchQuery is provided", () => { - it("shows searchQuery as value", () => { - ;(useSelectionContext as jest.Mock).mockReturnValue({ - searchQuery: "search-query-mock", - }) - render() - expect(screen.getByRole("searchbox")).toHaveValue("search-query-mock") - }) - }) - - it("triggers setSearchQuery with input value when user types the input", async () => { - const spy = jest.fn() - ;(useSelectionContext as jest.Mock).mockReturnValue({ - setSearchQuery: spy, - }) - - render() - const search = screen.getByRole("searchbox") - await user.type(search, "want to search this text") - - expect(spy).toHaveBeenLastCalledWith("want to search this text") - }) - - it("triggers setSearchQuery with input value when clear the input", async () => { - const spy = jest.fn() - ;(useSelectionContext as jest.Mock).mockReturnValue({ - searchQuery: "search-query-mock", - setSearchQuery: spy, - }) - - render() - const clearButton = screen.getByRole("button") - await user.click(clearButton) - - expect(spy).toHaveBeenLastCalledWith("") - }) -}) diff --git a/packages/components/src/FilterMultiSelect/subcomponents/SearchInput/SearchInput.tsx b/packages/components/src/FilterMultiSelect/subcomponents/SearchInput/SearchInput.tsx deleted file mode 100644 index c4e861b..0000000 --- a/packages/components/src/FilterMultiSelect/subcomponents/SearchInput/SearchInput.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import React, { useMemo } from "react" -import { v4 } from "uuid" -import { InputSearch } from "~components/InputSearch" -import { useSelectionContext } from "../../provider" -import styles from "./SearchInput.module.scss" - -export interface SearchInputProps { - label?: string - id?: string - isLoading?: boolean -} - -export const SearchInput = ({ - label, - id, - isLoading, -}: SearchInputProps): JSX.Element => { - const { setSearchQuery, searchQuery } = useSelectionContext() - - const handleChange: React.ChangeEventHandler = e => { - setSearchQuery(e.target.value) - } - - const handleClear = (): void => setSearchQuery("") - - const inputId = useMemo(() => id ?? v4(), [id]) - - return ( -
      - -
      - ) -} - -SearchInput.displayName = "FilterMultiSelect.SearchInput" diff --git a/packages/components/src/FilterMultiSelect/subcomponents/SearchInput/index.ts b/packages/components/src/FilterMultiSelect/subcomponents/SearchInput/index.ts deleted file mode 100644 index 7d9340d..0000000 --- a/packages/components/src/FilterMultiSelect/subcomponents/SearchInput/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./SearchInput" diff --git a/packages/components/src/FilterMultiSelect/subcomponents/SectionDivider/SectionDivider.module.scss b/packages/components/src/FilterMultiSelect/subcomponents/SectionDivider/SectionDivider.module.scss deleted file mode 100644 index a62dbae..0000000 --- a/packages/components/src/FilterMultiSelect/subcomponents/SectionDivider/SectionDivider.module.scss +++ /dev/null @@ -1,3 +0,0 @@ -.divider { - margin: 0.5rem 0; -} diff --git a/packages/components/src/FilterMultiSelect/subcomponents/SectionDivider/SectionDivider.tsx b/packages/components/src/FilterMultiSelect/subcomponents/SectionDivider/SectionDivider.tsx deleted file mode 100644 index 103babe..0000000 --- a/packages/components/src/FilterMultiSelect/subcomponents/SectionDivider/SectionDivider.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from "react" -import { Divider } from "@kaizen/draft-divider" -import styles from "./SectionDivider.module.scss" - -export const SectionDivider = (): JSX.Element => ( - -) - -SectionDivider.displayName = "FilterMultiSelect.SectionDivider" diff --git a/packages/components/src/FilterMultiSelect/subcomponents/SectionDivider/index.ts b/packages/components/src/FilterMultiSelect/subcomponents/SectionDivider/index.ts deleted file mode 100644 index 7e82c88..0000000 --- a/packages/components/src/FilterMultiSelect/subcomponents/SectionDivider/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./SectionDivider" diff --git a/packages/components/src/FilterMultiSelect/subcomponents/SelectionControlButton/ClearButton/ClearButton.spec.tsx b/packages/components/src/FilterMultiSelect/subcomponents/SelectionControlButton/ClearButton/ClearButton.spec.tsx deleted file mode 100644 index 36c77a1..0000000 --- a/packages/components/src/FilterMultiSelect/subcomponents/SelectionControlButton/ClearButton/ClearButton.spec.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import React from "react" -import { render, screen, waitFor } from "@testing-library/react" -import userEvent from "@testing-library/user-event" -import { useSelectionContext } from "../../../provider" -import { ClearButton } from "." - -const user = userEvent.setup() - -jest.mock("../../../provider", () => ({ - useSelectionContext: jest.fn(), -})) - -describe(" - interaction", () => { - describe("Given selection is not empty", () => { - it("triggers selectionManager.selSelectedKeys() with focused keys filtered out when button is clicked", async () => { - const spy = jest.fn() - const selectedAndFocused = "selectedAndFocused" - const selectedButNotFocused = "selectedButNotFocused" - const selectedKeys: string[] = [selectedAndFocused, selectedButNotFocused] - const filteredKeys: string[] = [selectedAndFocused] - ;(useSelectionContext as jest.Mock).mockReturnValue({ - selectionState: { - collection: { - getKeys: () => filteredKeys, - }, - selectionManager: { - isEmpty: false, - setSelectedKeys: spy, - selectedKeys, - isSelected: (id: string) => selectedKeys.includes(id), - }, - }, - }) - render() - await user.click(screen.getByRole("button")) - - await waitFor(() => { - expect(spy).toHaveBeenCalledTimes(1) - expect(spy).toHaveBeenCalledWith([selectedButNotFocused]) - }) - }) - }) - - describe("Given selection is empty", () => { - it("does not trigger selectionManager.setSelectedKeys() when clicks on the button", async () => { - const spy = jest.fn() - const filteredKeys: string[] = [] - const selectedKeys: string[] = [] - ;(useSelectionContext as jest.Mock).mockReturnValue({ - selectionState: { - collection: { - getKeys: () => filteredKeys, - }, - selectionManager: { - isEmpty: true, - selectedKeys, - setSelectedKeys: spy, - }, - }, - }) - render() - await user.click(screen.getByRole("button")) - - await waitFor(() => { - expect(spy).toHaveBeenCalledTimes(0) - }) - }) - }) -}) diff --git a/packages/components/src/FilterMultiSelect/subcomponents/SelectionControlButton/ClearButton/ClearButton.tsx b/packages/components/src/FilterMultiSelect/subcomponents/SelectionControlButton/ClearButton/ClearButton.tsx deleted file mode 100644 index a449a0e..0000000 --- a/packages/components/src/FilterMultiSelect/subcomponents/SelectionControlButton/ClearButton/ClearButton.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import React from "react" -import classnames from "classnames" -import { VisuallyHidden } from "@kaizen/a11y" -import { useSelectionContext } from "../../../provider" -import styles from "../SelectionControlButton.module.scss" - -export const ClearButton = (): JSX.Element => { - const { selectionState } = useSelectionContext() - const filteredOptions = Array.from(selectionState.collection.getKeys()) - const selectedOptions = Array.from( - selectionState.selectionManager.selectedKeys - ) - const isDisabled = - filteredOptions.length === 0 || - !Boolean( - filteredOptions.find(key => - selectionState.selectionManager.isSelected(key) - ) - ) - - return ( - - ) -} - -ClearButton.displayName = "FilterMultiSelect.ClearButton" diff --git a/packages/components/src/FilterMultiSelect/subcomponents/SelectionControlButton/ClearButton/index.ts b/packages/components/src/FilterMultiSelect/subcomponents/SelectionControlButton/ClearButton/index.ts deleted file mode 100644 index d1bdd19..0000000 --- a/packages/components/src/FilterMultiSelect/subcomponents/SelectionControlButton/ClearButton/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./ClearButton" diff --git a/packages/components/src/FilterMultiSelect/subcomponents/SelectionControlButton/SelectAllButton/SelectAllButton.spec.tsx b/packages/components/src/FilterMultiSelect/subcomponents/SelectionControlButton/SelectAllButton/SelectAllButton.spec.tsx deleted file mode 100644 index 4a7e046..0000000 --- a/packages/components/src/FilterMultiSelect/subcomponents/SelectionControlButton/SelectAllButton/SelectAllButton.spec.tsx +++ /dev/null @@ -1,113 +0,0 @@ -import React from "react" -import { render, screen, waitFor } from "@testing-library/react" -import userEvent from "@testing-library/user-event" -import { useSelectionContext } from "../../../provider" -import { SelectAllButton } from "." - -const user = userEvent.setup() - -jest.mock("../../../provider", () => ({ - useSelectionContext: jest.fn(), -})) - -describe(" - interaction", () => { - describe("Given not all options are selected", () => { - it("triggers selectionManager.setSelectedKeys() with currently selected and filtered options when button is clicked", async () => { - const spy = jest.fn() - const selectedAndFiltered = "selectedAndFiltered" - const filteredButNotSelected = "focusedButNotSelected" - const selectedButNotFiltered = "selectedButNotFiltered" - const selectedKeys = [selectedAndFiltered, selectedButNotFiltered] - const filteredKeys = [selectedAndFiltered, filteredButNotSelected] - - ;(useSelectionContext as jest.Mock).mockReturnValue({ - selectionState: { - collection: { - getKeys: () => filteredKeys, - }, - selectionManager: { - isSelectAll: false, - selectedKeys, - setSelectedKeys: spy, - isSelected: (id: string) => selectedKeys.includes(id), - }, - }, - }) - render() - await user.click(screen.getByRole("button")) - - await waitFor(() => { - expect(spy).toHaveBeenCalledTimes(1) - expect(spy).toHaveBeenCalledWith([...selectedKeys, ...filteredKeys]) - }) - }) - }) - - describe("Given all filtered options are selected", () => { - it("does not trigger selectionManager.setSelectedKeys() when clicks on the button", async () => { - const spy = jest.fn() - const selectedAndFiltered1 = "selectedAndFiltered1" - const selectedAndFiltered2 = "selectedAndFocused2" - const selectedKeys = [selectedAndFiltered1, selectedAndFiltered2] - const filteredKeys = [selectedAndFiltered1, selectedAndFiltered2] - ;(useSelectionContext as jest.Mock).mockReturnValue({ - selectionState: { - collection: { - getKeys: () => filteredKeys, - }, - selectionManager: { - isSelectAll: true, - selectedKeys, - setSelectedKeys: spy, - isSelected: (id: string) => selectedKeys.includes(id), - }, - }, - }) - render() - await user.click(screen.getByRole("button")) - - await waitFor(() => { - expect(spy).toHaveBeenCalledTimes(0) - }) - }) - }) - - describe("Given some options are disabled", () => { - it("triggers selectionManager.setSelectedKeys() on non-disabled options", async () => { - const spy = jest.fn() - const filtered = "filtered" - const filteredAndSelected = "filteredAndSelected" - const filteredAndDisabled = "filteredAndDisabled" - const selectedKeys = [filteredAndSelected] - const filteredKeys = [filtered, filteredAndSelected, filteredAndDisabled] - const disabledKeys = [filteredAndDisabled] - - ;(useSelectionContext as jest.Mock).mockReturnValue({ - selectionState: { - disabledKeys, - collection: { - getKeys: () => filteredKeys, - }, - selectionManager: { - isSelectAll: false, - selectedKeys, - setSelectedKeys: spy, - isSelected: (id: string) => selectedKeys.includes(id), - }, - }, - }) - render() - await user.click(screen.getByRole("button")) - - await waitFor(() => { - expect(spy).toHaveBeenCalledTimes(1) - expect(spy).toHaveBeenCalledWith( - expect.arrayContaining([filtered, filteredAndSelected]) - ) - expect(spy).not.toHaveBeenCalledWith( - expect.arrayContaining(disabledKeys) - ) - }) - }) - }) -}) diff --git a/packages/components/src/FilterMultiSelect/subcomponents/SelectionControlButton/SelectAllButton/SelectAllButton.tsx b/packages/components/src/FilterMultiSelect/subcomponents/SelectionControlButton/SelectAllButton/SelectAllButton.tsx deleted file mode 100644 index 940bc15..0000000 --- a/packages/components/src/FilterMultiSelect/subcomponents/SelectionControlButton/SelectAllButton/SelectAllButton.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import React from "react" -import classnames from "classnames" -import { useSelectionContext } from "../../../provider" -import styles from "../SelectionControlButton.module.scss" - -export const SelectAllButton = (): JSX.Element => { - const { selectionState } = useSelectionContext() - const selectedOptions = Array.from( - selectionState.selectionManager.selectedKeys - ) - const disabledOptions = selectionState.disabledKeys - ? Array.from(selectionState.disabledKeys) - : [] - const filteredOptions = Array.from( - selectionState.collection.getKeys() - ).filter(key => !disabledOptions.includes(key)) - - return ( - - ) -} - -SelectAllButton.displayName = "FilterMultiSelect.SelectAllButton" diff --git a/packages/components/src/FilterMultiSelect/subcomponents/SelectionControlButton/SelectAllButton/index.ts b/packages/components/src/FilterMultiSelect/subcomponents/SelectionControlButton/SelectAllButton/index.ts deleted file mode 100644 index 7e1ebe4..0000000 --- a/packages/components/src/FilterMultiSelect/subcomponents/SelectionControlButton/SelectAllButton/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./SelectAllButton" diff --git a/packages/components/src/FilterMultiSelect/subcomponents/SelectionControlButton/SelectionControlButton.module.scss b/packages/components/src/FilterMultiSelect/subcomponents/SelectionControlButton/SelectionControlButton.module.scss deleted file mode 100644 index 2e3c787..0000000 --- a/packages/components/src/FilterMultiSelect/subcomponents/SelectionControlButton/SelectionControlButton.module.scss +++ /dev/null @@ -1,71 +0,0 @@ -@import "~@kaizen/design-tokens/sass/border"; -@import "~@kaizen/design-tokens/sass/color"; -@import "~@kaizen/design-tokens/sass/typography"; -@import "~@kaizen/design-tokens/sass/spacing"; -@import "../../../../styles/button-reset"; - -$focus-ring-offset: 1px; - -.button { - @include button-reset; - - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - font-family: $typography-button-secondary-font-family; - font-weight: $typography-button-secondary-font-weight; - font-size: $typography-button-secondary-font-size; - line-height: $typography-button-secondary-line-height; - letter-spacing: $typography-button-secondary-letter-spacing; - position: relative; - color: $color-blue-500; - border: $border-solid-border-width $border-solid-border-style; - border-color: $border-borderless-border-color; - border-radius: $border-solid-border-radius; - padding: $spacing-4 $spacing-8; - - &:focus { - outline: none; - } - - &:hover, - &:active, - &:focus { - &:not(.isDisabled) { - background-color: $color-blue-100; - } - } - - &:focus-visible::after { - $focus-ring-offset: calc((#{$border-focus-ring-border-width} * 2) + 1px); - - content: ""; - position: absolute; - background: transparent; - border-radius: $border-focus-ring-border-radius; - border-width: $border-focus-ring-border-width; - border-style: $border-focus-ring-border-style; - border-color: $color-blue-500; - inset: calc(-1 * #{$focus-ring-offset}); - } - - display: inline-flex; - gap: $spacing-xs; - align-items: center; - - // TODO: copied from Calendar button since the design is not settled - &.isDisabled { - pointer-events: none; - color: rgba($color-purple-800-rgb, 0.3); - opacity: 100%; - - &:focus { - outline: none; - border: 2px solid transparent; - } - - &:focus-visible::after { - border-style: $border-dashed-border-style; - border-color: $color-gray-400; - } - } -} diff --git a/packages/components/src/FilterMultiSelect/subcomponents/SelectionControlButton/index.ts b/packages/components/src/FilterMultiSelect/subcomponents/SelectionControlButton/index.ts deleted file mode 100644 index 63a9842..0000000 --- a/packages/components/src/FilterMultiSelect/subcomponents/SelectionControlButton/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from "./ClearButton" -export * from "./SelectAllButton" diff --git a/packages/components/src/FilterMultiSelect/subcomponents/Trigger/FilterTriggerButton/FilterTriggerButton.tsx b/packages/components/src/FilterMultiSelect/subcomponents/Trigger/FilterTriggerButton/FilterTriggerButton.tsx deleted file mode 100644 index df6e97a..0000000 --- a/packages/components/src/FilterMultiSelect/subcomponents/Trigger/FilterTriggerButton/FilterTriggerButton.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import React, { useRef } from "react" -import { FilterTriggerRef } from "~components/Filter" -import { FilterButton } from "~components/FilterButton" -import { useMenuTriggerContext } from "../../../provider" -import { getTruncatedLabels } from "../../../utils" - -export type FilterTriggerButtonProps = { - label: string - selectedOptionLabels: string[] - /** - * Character limit of the button label. - * It will always show the first selected label regardless if it exceeds the given character limit. - */ - labelCharacterLimitBeforeTruncate?: number - classNameOverride?: string // TODO: migrate it to use OverrideClassName and omit the props controlled by React-Aria -} - -export const FilterTriggerButton = ({ - selectedOptionLabels, - label, - classNameOverride, - labelCharacterLimitBeforeTruncate = 50, -}: FilterTriggerButtonProps): JSX.Element => { - const { buttonProps, buttonRef, menuTriggerState } = useMenuTriggerContext() - const ref = useRef({ triggerRef: buttonRef }) - - return ( - - ) -} - -FilterTriggerButton.displayName = "FilterMultiSelect.TriggerButton" diff --git a/packages/components/src/FilterMultiSelect/subcomponents/Trigger/FilterTriggerButton/index.ts b/packages/components/src/FilterMultiSelect/subcomponents/Trigger/FilterTriggerButton/index.ts deleted file mode 100644 index e45de61..0000000 --- a/packages/components/src/FilterMultiSelect/subcomponents/Trigger/FilterTriggerButton/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./FilterTriggerButton" diff --git a/packages/components/src/FilterMultiSelect/subcomponents/Trigger/RemovableFilterTrigger/RemovableFilterTrigger.tsx b/packages/components/src/FilterMultiSelect/subcomponents/Trigger/RemovableFilterTrigger/RemovableFilterTrigger.tsx deleted file mode 100644 index 576ba85..0000000 --- a/packages/components/src/FilterMultiSelect/subcomponents/Trigger/RemovableFilterTrigger/RemovableFilterTrigger.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import React, { useRef } from "react" -import { FilterTriggerRef } from "~components/Filter" -import { FilterButtonRemovable } from "~components/FilterButton" -import { useMenuTriggerContext } from "../../../provider" -import { getTruncatedLabels } from "../../../utils" -import { FilterTriggerButtonProps } from "../FilterTriggerButton" - -export type RemovableFilterTriggerProps = FilterTriggerButtonProps & { - onRemove: () => void -} - -export const RemovableFilterTrigger = ({ - label, - selectedOptionLabels, - labelCharacterLimitBeforeTruncate = 50, - classNameOverride, - onRemove, -}: RemovableFilterTriggerProps): JSX.Element => { - const { buttonProps, buttonRef, menuTriggerState } = useMenuTriggerContext() - const ref = useRef({ triggerRef: buttonRef }) - - return ( - - ) -} - -RemovableFilterTrigger.displayName = "FilterMultiSelect.RemovableTrigger" diff --git a/packages/components/src/FilterMultiSelect/subcomponents/Trigger/RemovableFilterTrigger/index.ts b/packages/components/src/FilterMultiSelect/subcomponents/Trigger/RemovableFilterTrigger/index.ts deleted file mode 100644 index b7a7ed8..0000000 --- a/packages/components/src/FilterMultiSelect/subcomponents/Trigger/RemovableFilterTrigger/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./RemovableFilterTrigger" diff --git a/packages/components/src/FilterMultiSelect/subcomponents/Trigger/index.ts b/packages/components/src/FilterMultiSelect/subcomponents/Trigger/index.ts deleted file mode 100644 index cee8713..0000000 --- a/packages/components/src/FilterMultiSelect/subcomponents/Trigger/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from "./FilterTriggerButton" -export * from "./RemovableFilterTrigger" diff --git a/packages/components/src/FilterMultiSelect/subcomponents/index.ts b/packages/components/src/FilterMultiSelect/subcomponents/index.ts deleted file mode 100644 index d82a085..0000000 --- a/packages/components/src/FilterMultiSelect/subcomponents/index.ts +++ /dev/null @@ -1,12 +0,0 @@ -// Only export the types as we want the consumer to use dot notation -export type { ListBoxItems, ListBoxProps } from "./ListBox" -export type { ListBoxSectionProps } from "./ListBoxSection" -export type { LoadMoreButtonProps } from "./LoadMoreButton" -export type { MenuFooterProps, MenuLoadingSkeletonProps } from "./MenuLayout" -export type { MultiSelectOptionProps } from "./MultiSelectOption" -export type { NoResultsProps } from "./NoResults" -export type { SearchInputProps } from "./SearchInput" -export type { - FilterTriggerButtonProps, - RemovableFilterTriggerProps, -} from "./Trigger" diff --git a/packages/components/src/FilterMultiSelect/types.ts b/packages/components/src/FilterMultiSelect/types.ts deleted file mode 100644 index 9905198..0000000 --- a/packages/components/src/FilterMultiSelect/types.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { Node } from "@react-types/shared" - -export type ValueType = React.Key - -export interface ItemType { - label: string - value: ValueType - count?: string - isDisabled?: boolean -} - -export type MultiSelectItem = Node diff --git a/packages/components/src/FilterMultiSelect/utils/getSelectedOptionKeys.spec.ts b/packages/components/src/FilterMultiSelect/utils/getSelectedOptionKeys.spec.ts deleted file mode 100644 index 8c79ad1..0000000 --- a/packages/components/src/FilterMultiSelect/utils/getSelectedOptionKeys.spec.ts +++ /dev/null @@ -1,51 +0,0 @@ -import { ItemType } from "../types" -import { getSelectedOptionKeys } from "./getSelectedOptionKeys" - -const itemsMock: ItemType[] = [ - { - label: "option-1-label-mock", - value: "option-1-value-mock", - }, - { - label: "option-2-label-mock", - value: "option-2-value-mock", - }, - { - label: "option-3-label-mock", - value: "option-3-value-mock", - }, -] -describe("getTruncatedLabels", () => { - describe("Given keys undefiend", () => { - it("returns empty array", () => { - expect(getSelectedOptionKeys(undefined, itemsMock)).toMatchObject([]) - }) - }) - - describe("Given items undefiend", () => { - it("returns empty array", () => { - expect(getSelectedOptionKeys("all")).toMatchObject([]) - }) - }) - - describe("Given two keys and items", () => { - it("returns the matching labels", () => { - expect( - getSelectedOptionKeys( - new Set(["option-1-value-mock", "option-3-value-mock"]), - itemsMock - ) - ).toMatchObject(["option-1-value-mock", "option-3-value-mock"]) - }) - }) - - describe("Given 'all' keys and items", () => { - it("returns the all labels", () => { - expect(getSelectedOptionKeys("all", itemsMock)).toMatchObject([ - "option-1-value-mock", - "option-2-value-mock", - "option-3-value-mock", - ]) - }) - }) -}) diff --git a/packages/components/src/FilterMultiSelect/utils/getSelectedOptionKeys.ts b/packages/components/src/FilterMultiSelect/utils/getSelectedOptionKeys.ts deleted file mode 100644 index 59d7c73..0000000 --- a/packages/components/src/FilterMultiSelect/utils/getSelectedOptionKeys.ts +++ /dev/null @@ -1,18 +0,0 @@ -import React from "react" -import { Selection } from "@react-types/shared" -import { ItemType } from "../types" - -export const getSelectedOptionKeys = ( - keys?: Selection, - items?: ItemType[] -): React.Key[] => { - if (!keys || !items) { - return [] - } - - if (keys === "all") { - return items.map(item => item.value) - } - - return Array.from(keys) -} diff --git a/packages/components/src/FilterMultiSelect/utils/getSelectedOptionLabels.spec.ts b/packages/components/src/FilterMultiSelect/utils/getSelectedOptionLabels.spec.ts deleted file mode 100644 index b6dcf9a..0000000 --- a/packages/components/src/FilterMultiSelect/utils/getSelectedOptionLabels.spec.ts +++ /dev/null @@ -1,51 +0,0 @@ -import { ItemType } from "../types" -import { getSelectedOptionLabels } from "./getSelectedOptionLabels" - -const itemsMock: ItemType[] = [ - { - label: "option-1-label-mock", - value: "option-1-value-mock", - }, - { - label: "option-2-label-mock", - value: "option-2-value-mock", - }, - { - label: "option-3-label-mock", - value: "option-3-value-mock", - }, -] -describe("getTruncatedLabels", () => { - describe("Given keys undefiend", () => { - it("returns empty array", () => { - expect(getSelectedOptionLabels(undefined, itemsMock)).toMatchObject([]) - }) - }) - - describe("Given items undefiend", () => { - it("returns empty array", () => { - expect(getSelectedOptionLabels("all")).toMatchObject([]) - }) - }) - - describe("Given two keys and items", () => { - it("returns the matching labels", () => { - expect( - getSelectedOptionLabels( - new Set(["option-1-value-mock", "option-3-value-mock"]), - itemsMock - ) - ).toMatchObject(["option-1-label-mock", "option-3-label-mock"]) - }) - }) - - describe("Given 'all' keys and items", () => { - it("returns the all labels", () => { - expect(getSelectedOptionLabels("all", itemsMock)).toMatchObject([ - "option-1-label-mock", - "option-2-label-mock", - "option-3-label-mock", - ]) - }) - }) -}) diff --git a/packages/components/src/FilterMultiSelect/utils/getSelectedOptionLabels.ts b/packages/components/src/FilterMultiSelect/utils/getSelectedOptionLabels.ts deleted file mode 100644 index 2f29df1..0000000 --- a/packages/components/src/FilterMultiSelect/utils/getSelectedOptionLabels.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { Selection } from "@react-types/shared" -import { ItemType } from "../types" - -export const getSelectedOptionLabels = ( - keys?: Selection, - items?: ItemType[] -): string[] => { - if (!keys || !items) { - return [] - } - - if (keys === "all") { - return items.map(item => item.label) - } - - return Array.from(keys) - .map(key => items.find(item => item.value === key)?.label ?? "") - .filter(item => item !== "") -} diff --git a/packages/components/src/FilterMultiSelect/utils/getTruncatedLabel.ts b/packages/components/src/FilterMultiSelect/utils/getTruncatedLabel.ts deleted file mode 100644 index 599ab14..0000000 --- a/packages/components/src/FilterMultiSelect/utils/getTruncatedLabel.ts +++ /dev/null @@ -1,19 +0,0 @@ -const CONNECTOR = ", " - -const truncateByCharacterLimit = ( - labels: string[], - limit: number, - labelsTruncatedCount = 0 -): string => { - if (labels.length === 1 || labels.join("").replace(/,/g, "").length < limit) { - const moreIndicator = - labelsTruncatedCount > 0 ? ` + ${labelsTruncatedCount} more` : "" - return `${labels.join(CONNECTOR)}${moreIndicator}` - } - - const newLabels = labels.slice(0, labels.length - 1) - return truncateByCharacterLimit(newLabels, limit, labelsTruncatedCount + 1) -} - -export const getTruncatedLabels = (labels: string[], limit: number): string => - truncateByCharacterLimit(labels, limit) diff --git a/packages/components/src/FilterMultiSelect/utils/getTruncatedLabels.spec.ts b/packages/components/src/FilterMultiSelect/utils/getTruncatedLabels.spec.ts deleted file mode 100644 index 7d1efc9..0000000 --- a/packages/components/src/FilterMultiSelect/utils/getTruncatedLabels.spec.ts +++ /dev/null @@ -1,52 +0,0 @@ -import { getTruncatedLabels } from "./getTruncatedLabel" - -const firstLabel = "optionhas11" -const secondLabel = "optionwith12" -const thirdLabel = "optioncontains16" - -const labels = [firstLabel, secondLabel, thirdLabel] - -describe("getTruncatedLabels", () => { - describe("With only one label", () => { - it("Always shows on its own, regardless of character limit", () => { - const limit = 5 - const longLabel = "My super long label with a lot of characters" - const withOnlyOneLabel = [longLabel] - expect(getTruncatedLabels(withOnlyOneLabel, limit)).toEqual(longLabel) - }) - }) - describe("When the first label exceeds the character limit", () => { - it("Always shows", () => { - const limit = 5 - const longLabel = "My super long label with a lot of characters" - const withLongFirstLabel = [longLabel, secondLabel] - expect(getTruncatedLabels(withLongFirstLabel, limit)).toEqual( - `${longLabel} + 1 more` - ) - }) - }) - describe("With all labels combined less than character limit", () => { - it("Shows all labels, connected with commas", () => { - const limit = 100 - expect(getTruncatedLabels(labels, limit)).toEqual( - `${firstLabel}, ${secondLabel}, ${thirdLabel}` - ) - }) - }) - describe("With last label exceeding character limit", () => { - it("Replaces last item with '+1 more'", () => { - const limit = 25 - expect(getTruncatedLabels(labels, limit)).toEqual( - `${firstLabel}, ${secondLabel} + 1 more` - ) - }) - }) - describe("With last two labels exceeding character limit", () => { - it("Replaces last two items with '+2 more'", () => { - const limit = 20 - expect(getTruncatedLabels(labels, limit)).toEqual( - `${firstLabel} + 2 more` - ) - }) - }) -}) diff --git a/packages/components/src/FilterMultiSelect/utils/index.ts b/packages/components/src/FilterMultiSelect/utils/index.ts deleted file mode 100644 index 608f278..0000000 --- a/packages/components/src/FilterMultiSelect/utils/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export * from "./getTruncatedLabel" -export * from "./getSelectedOptionLabels" -export * from "./getSelectedOptionKeys" diff --git a/packages/components/src/FilterSelect/FilterSelect.module.scss b/packages/components/src/FilterSelect/FilterSelect.module.scss deleted file mode 100644 index da75477..0000000 --- a/packages/components/src/FilterSelect/FilterSelect.module.scss +++ /dev/null @@ -1,7 +0,0 @@ -@import "~@kaizen/design-tokens/sass/spacing"; - -.filterContents { - width: 224px; // @todo: check this value - overflow: auto; - padding: $spacing-12; -} diff --git a/packages/components/src/FilterSelect/FilterSelect.spec.tsx b/packages/components/src/FilterSelect/FilterSelect.spec.tsx deleted file mode 100644 index d0bc705..0000000 --- a/packages/components/src/FilterSelect/FilterSelect.spec.tsx +++ /dev/null @@ -1,216 +0,0 @@ -import React, { useState } from "react" -import { render, screen, waitFor } from "@testing-library/react" -import userEvent from "@testing-library/user-event" -import { FilterButton } from "~components/FilterButton" -import { FilterSelect, FilterSelectProps } from "./FilterSelect" -import { mixedMockItemsUnordered, singleMockItems } from "./_docs/mockData" -import { SelectOption } from "./types" - -const user = userEvent.setup() - -const FilterSelectWrapper = ({ - isOpen: propsIsOpen = false, - items = mixedMockItemsUnordered, - selectedKey, - onSelectionChange, - ...restProps -}: Partial): JSX.Element => { - const [isOpen, setIsOpen] = useState(propsIsOpen) - const [selected, setSelected] = React.useState< - FilterSelectProps["selectedKey"] - >(selectedKey ?? null) - - return ( - ( - - )} - items={items} - selectedKey={selected} - onSelectionChange={(key): void => { - setSelected(key) - onSelectionChange?.(key) - }} - {...restProps} - /> - ) -} - -describe("", () => { - it("does not show the options initially", () => { - render() - expect(screen.queryByRole("listbox")).not.toBeInTheDocument() - }) - - it("shows the options initially when isOpen is true", async () => { - render() - await waitFor(() => { - expect(screen.queryByRole("listbox")).toBeVisible() - }) - }) - - describe("Trigger", () => { - it("shows the selected option in the button", () => { - render() - const trigger = screen.getByRole("button", { - name: "Coffee : Magic", - }) - expect(trigger).toBeVisible() - }) - - describe("Trigger - Mouse interaction", () => { - it("shows the options when the filter button is clicked", async () => { - render() - const trigger = screen.getByRole("button", { name: "Coffee" }) - await user.click(trigger) - await waitFor(() => { - expect(screen.queryByRole("listbox")).toBeVisible() - }) - }) - - it("closes when user clicks outside of the menu", async () => { - render() - await user.click(document.body) - await waitFor(() => { - expect(screen.queryByRole("listbox")).not.toBeInTheDocument() - }) - }) - - it("closes when user clicks on an option", async () => { - render() - const option = screen.getByRole("option", { name: "Magic" }) - await user.click(option) - await waitFor(() => { - expect(screen.queryByRole("listbox")).not.toBeInTheDocument() - }) - }) - }) - - describe("Trigger - Keyboard interaction", () => { - it("opens the menu when user hits enter key", async () => { - render() - const trigger = screen.getByRole("button", { name: "Coffee" }) - await user.tab() - await waitFor(() => { - expect(trigger).toHaveFocus() - }) - await user.keyboard("{Enter}") - await waitFor(() => { - expect(screen.queryByRole("listbox")).toBeVisible() - }) - }) - - it("moves the focus to the first focusable element inside the menu initially", async () => { - render() - expect(screen.queryByRole("listbox")).toBeVisible() - await waitFor(() => { - expect( - screen.queryByRole("option", { name: "Regular" }) - ).toHaveFocus() - }) - }) - - it("closes when user hits the escape key", async () => { - render() - expect(screen.queryByRole("listbox")).toBeVisible() - await user.keyboard("{Escape}") - await waitFor(() => { - expect(screen.queryByRole("listbox")).not.toBeInTheDocument() - }) - }) - }) - }) - - describe("Selection", () => { - it("changes the value within the button when an option is selected", async () => { - render( - ( - - )} - /> - ) - // Use testid because when the filter is open, the button is inaccessible - expect(screen.getByTestId("test__trigger").textContent).toBe("Coffee") - - await user.tab() - await waitFor(() => { - expect(screen.queryByRole("listbox")).toBeVisible() - }) - - const option = screen.getByRole("option", { name: "Magic" }) - await user.click(option) - - await waitFor(() => { - expect( - screen.getByRole("button", { name: "Coffee : Magic" }) - ).toBeVisible() - }) - }) - }) - - describe("Number values", () => { - it("finds selected option when value is a number", () => { - const { getByRole } = render( - - ) - expect(getByRole("button", { name: "Coffee : 50" })).toBeInTheDocument() - }) - }) -}) - -const defaultProps: FilterSelectProps = { - label: "Coffee", - isOpen: false, - setIsOpen: () => undefined, - renderTrigger: (triggerButtonProps): JSX.Element => ( - - ), - items: singleMockItems, -} - -/* eslint-disable jest/expect-expect */ -describe("FilterSelect generic", () => { - it("should prevent adding `options` attribute to option", () => { - /* @ts-expect-error */ - ; {...defaultProps} /> - }) - - describe("Extended option", () => { - it("should error when new required attribute is missing from items", () => { - /* @ts-expect-error */ - ; - {...defaultProps} - /> - }) - - it("should allow consumer to access custom attributes in children", () => { - ; - {...defaultProps} - items={[{ label: "Bubblegum", value: "bubblegum", isRubberDuck: true }]} - > - {({ items }): JSX.Element[] => - items.map(item => - item.type === "item" ? ( -
    • {item.value?.isRubberDuck}
      • - ) : ( -
    • Section
      • - ) - ) - } -       - }) - }) -}) -/* eslint-enable jest/expect-expect */ diff --git a/packages/components/src/FilterSelect/FilterSelect.tsx b/packages/components/src/FilterSelect/FilterSelect.tsx deleted file mode 100644 index ace5311..0000000 --- a/packages/components/src/FilterSelect/FilterSelect.tsx +++ /dev/null @@ -1,141 +0,0 @@ -import React, { useState } from "react" -import { useButton } from "@react-aria/button" -import { HiddenSelect, useSelect } from "@react-aria/select" -import { - useSelectState, - SelectProps as AriaSelectProps, -} from "@react-stately/select" -import { Filter, FilterContents } from "~components/Filter" -import { FilterButtonProps } from "~components/FilterButton" -import { OverrideClassName } from "~types/OverrideClassName" -import { SelectProvider } from "./context" -import { ListBox } from "./subcomponents/ListBox" -import { ListBoxSection } from "./subcomponents/ListBoxSection" -import { ListItem } from "./subcomponents/ListItem" -import { ListItems } from "./subcomponents/ListItems" -import { Option } from "./subcomponents/Option" -import { Overlay } from "./subcomponents/Overlay" -import { SectionDivider } from "./subcomponents/SectionDivider" -import { SelectItem, SelectItemNode, SelectOption } from "./types" -import { isSelectOptionGroup } from "./utils/isSelectOptionGroup" -import { transformSelectItemToCollectionElement } from "./utils/transformSelectItemToCollectionElement" -import styles from "./FilterSelect.module.scss" - -type OmittedAriaSelectProps = - | "label" - | "children" - | "isOpen" - | "onOpenChange" - | "defaultOpen" - | "items" - -export interface FilterSelectProps       -
    - -
    - ( - - )} - items={mixedMockItemsUngroupedFirst} - > - {({ items }): JSX.Element[] => - items.map(item => { - if (item.type === "item" && item.key === "batch-brew") { - return ( - ++ {item.rendered}
    , - }} - /> - ) - } - - if (item.type === "section" && item.key === "Syrup") { - return ( - ({ - ...child, - rendered:
    -- {child.rendered}
    , - }) - ), - }} - /> - ) - } - - return ( - - ) - }) - } - -
    - -
    - ( - - )} - items={mixedMockItemsUnordered} - > - {({ items }): JSX.Element[] => - items.map(item => ( - - {item.type === "section" && ( - - )} - - {item.type === "section" && ( - - )} - - )) - } - -
    - -
    - ( - - )} - items={[ - { label: "Customise...", value: "custom" }, - ...singleMockItems, - ]} - > - {({ items }): JSX.Element[] => - items.map(item => { - if (item.type === "item" && item.key === "custom") { - return ( - - - - - ) - } - - return ( - - ) - }) - } - -
    - - - - - ) -} - -export const StickerSheetDefault = StickerSheetTemplate.bind({}) -StickerSheetDefault.storyName = "Sticker Sheet (Default)" -StickerSheetDefault.parameters = { - chromatic: { disable: false }, - controls: { disable: true }, -} diff --git a/packages/components/src/FilterSelect/_docs/FilterSelect.stories.tsx b/packages/components/src/FilterSelect/_docs/FilterSelect.stories.tsx deleted file mode 100644 index 9e27dc3..0000000 --- a/packages/components/src/FilterSelect/_docs/FilterSelect.stories.tsx +++ /dev/null @@ -1,88 +0,0 @@ -import React, { useState } from "react" -import { Meta, StoryFn } from "@storybook/react" -import { renderTriggerControls } from "~components/Filter/_docs/controls/renderTriggerControls" -import { FilterButton } from "../../FilterButton" -import { FilterSelect } from "../FilterSelect" -import { SelectOption } from "../types" -import { groupedMockItems, singleMockItems } from "./mockData" - -export default { - title: "Components/Filter Select", - component: FilterSelect, - argTypes: { - isOpen: { control: "disabled" }, - setIsOpen: { control: "disabled" }, - renderTrigger: renderTriggerControls, - items: { - options: ["Single", "Grouped"], - control: { type: "radio" }, - mapping: { - Single: singleMockItems, - Grouped: groupedMockItems, - }, - }, - }, - parameters: { - actions: { - argTypesRegex: "^on.*", - }, - }, -} satisfies Meta - -export const Playground: StoryFn = args => { - const [isOpen, setIsOpen] = useState(false) - - return -} -Playground.storyName = "Filter Select" -Playground.args = { - label: "Coffee", - /* @ts-expect-error: Storybook controls key; see argTypes in default export */ - items: "Single", - /* @ts-expect-error: Storybook controls key; see argTypes in default export */ - renderTrigger: "Filter Button", -} - -/** - * Extend the option type to have additional properties to use for rendering. - */ -export const AdditionalProperties: StoryFn = () => { - const [isOpen, setIsOpen] = useState(false) - - return ( - - label="Custom" - isOpen={isOpen} - setIsOpen={setIsOpen} - renderTrigger={(triggerProps): JSX.Element => ( - - )} - items={[ - { label: "Bubblegum", value: "bubblegum", isFruit: false }, - { label: "Strawberry", value: "strawberry", isFruit: true }, - { label: "Chocolate", value: "chocolate", isFruit: false }, - { label: "Apple", value: "apple", isFruit: true }, - { label: "Lemon", value: "lemon", isFruit: true }, - ]} - > - {({ items }): JSX.Element[] => - items.map(item => - item.type === "item" ? ( - - ) : ( - - ) - ) - } - - ) -} -AdditionalProperties.storyName = "Additional option properties" diff --git a/packages/components/src/FilterSelect/_docs/mockData.ts b/packages/components/src/FilterSelect/_docs/mockData.ts deleted file mode 100644 index e8269ea..0000000 --- a/packages/components/src/FilterSelect/_docs/mockData.ts +++ /dev/null @@ -1,94 +0,0 @@ -import { SelectItem } from "../types" - -export const singleMockItems: SelectItem[] = [ - { label: "Short black", value: "short-black" }, - { label: "Long black", value: "long-black" }, - { label: "Batch brew", value: "batch-brew" }, - { label: "Latte", value: "latte" }, - { label: "Flat white", value: "flat-white" }, - { label: "Mocha", value: "mocha" }, - { label: "Cappuccino", value: "cappuccino" }, - { label: "Magic", value: "magic" }, -] - -export const groupedMockItems: SelectItem[] = [ - { - label: "Colours", - options: [ - { label: "Blue", value: "blue" }, - { label: "Red", value: "red" }, - { label: "Green", value: "green" }, - ], - }, - { - label: "Flavours", - options: [ - { label: "Vanilla", value: "vanilla" }, - { label: "Chocolate", value: "chocolate" }, - { label: "Strawberry", value: "strawberry" }, - ], - }, -] - -export const mixedMockItemsDisabled: SelectItem[] = [ - { label: "Short black", value: "short-black", disabled: true }, - { label: "Long black", value: "long-black" }, - { label: "Batch brew", value: "batch-brew", disabled: true }, - { - label: "Size", - options: [ - { label: "Regular", value: "regular" }, - { label: "Large", value: "large", disabled: true }, - ], - }, - { - label: "Syrup", - options: [ - { label: "Vanilla", value: "vanilla", disabled: true }, - { label: "Caramel", value: "caramel" }, - { label: "Hazelnut", value: "hazelnut" }, - ], - }, -] - -export const mixedMockItemsUngroupedFirst: SelectItem[] = [ - { label: "Batch brew", value: "batch-brew" }, - { label: "Latte", value: "latte" }, - { label: "Magic", value: "magic" }, - { - label: "Size", - options: [ - { label: "Regular", value: "regular" }, - { label: "Large", value: "large" }, - ], - }, - { - label: "Syrup", - options: [ - { label: "Vanilla", value: "vanilla" }, - { label: "Caramel", value: "caramel" }, - { label: "Hazelnut", value: "hazelnut" }, - ], - }, -] - -export const mixedMockItemsUnordered: SelectItem[] = [ - { - label: "Size", - options: [ - { label: "Regular", value: "regular" }, - { label: "Large", value: "large" }, - ], - }, - { label: "Batch brew", value: "batch-brew" }, - { label: "Latte", value: "latte" }, - { label: "Magic", value: "magic" }, - { - label: "Syrup", - options: [ - { label: "Vanilla", value: "vanilla" }, - { label: "Caramel", value: "caramel" }, - { label: "Hazelnut", value: "hazelnut" }, - ], - }, -] diff --git a/packages/components/src/FilterSelect/context/SelectContext.tsx b/packages/components/src/FilterSelect/context/SelectContext.tsx deleted file mode 100644 index e087474..0000000 --- a/packages/components/src/FilterSelect/context/SelectContext.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import React, { useContext } from "react" -import { SelectState } from "@react-stately/select" -import { SelectItem, SelectOption } from "../types" - -// We set the generic default value to `any` as SelectContext -// is instantiated as a constant which does not accept generics. -type SelectContextValue