From 82e35bc8496a91b7e3518581b15ab3c1aac622d7 Mon Sep 17 00:00:00 2001 From: Matt Maribojoc Date: Thu, 31 Aug 2023 12:17:35 -0400 Subject: [PATCH 01/25] docs: new docs initial commit --- .../components/.env.example | 0 apps/{docs => docs-old}/components/.gitignore | 0 .../.vuepress/components/ColorPalette.vue | 0 .../components/ColorPaletteBlock.vue | 0 .../.vuepress/components/ComponentList.vue | 0 .../.vuepress/components/FigmaLink.vue | 0 .../.vuepress/components/Generate.vue | 0 .../.vuepress/components/LandingGrid.vue | 0 .../.vuepress/components/Showcase.vue | 0 .../.vuepress/components/SourceCode.vue | 0 .../.vuepress/components/TypographyList.vue | 0 .../components/.vuepress/config.js | 0 .../components/.vuepress/public/favicon.ico | Bin .../components/.vuepress/public/sfui-logo.svg | 0 .../public/thumbnails/blocks/Alert.png | Bin .../public/thumbnails/blocks/Banners.png | Bin .../public/thumbnails/blocks/Breadcrumbs.png | Bin .../public/thumbnails/blocks/Card.png | Bin .../public/thumbnails/blocks/Checkout.png | Bin .../public/thumbnails/blocks/Combobox.png | Bin .../public/thumbnails/blocks/Filters.png | Bin .../public/thumbnails/blocks/Footer.png | Bin .../public/thumbnails/blocks/FormFields.png | Bin .../public/thumbnails/blocks/Gallery.png | Bin .../public/thumbnails/blocks/MegaMenu.png | Bin .../public/thumbnails/blocks/NavbarBottom.png | Bin .../public/thumbnails/blocks/NavbarTop.png | Bin .../thumbnails/blocks/NewsletterBox.png | Bin .../public/thumbnails/blocks/OrderSummary.png | Bin .../public/thumbnails/blocks/Pagination.png | Bin .../public/thumbnails/blocks/ProductCard.png | Bin .../thumbnails/blocks/ProductSlider.png | Bin .../thumbnails/blocks/QuantitySelector.png | Bin .../public/thumbnails/blocks/RatingForms.png | Bin .../public/thumbnails/blocks/Review.png | Bin .../public/thumbnails/blocks/Search.png | Bin .../thumbnails/blocks/SelectDropdown.png | Bin .../public/thumbnails/blocks/Tabs.png | Bin .../thumbnails/components/AccordionItem.png | Bin .../public/thumbnails/components/Badge.png | Bin .../public/thumbnails/components/Button.png | Bin .../public/thumbnails/components/Checkbox.png | Bin .../public/thumbnails/components/Chip.png | Bin .../public/thumbnails/components/Counter.png | Bin .../public/thumbnails/components/Drawer.png | Bin .../public/thumbnails/components/Dropdown.png | Bin .../public/thumbnails/components/IconBase.png | Bin .../public/thumbnails/components/Input.png | Bin .../public/thumbnails/components/Link.png | Bin .../public/thumbnails/components/ListItem.png | Bin .../thumbnails/components/LoaderCircular.png | Bin .../thumbnails/components/LoaderLinear.png | Bin .../public/thumbnails/components/Modal.png | Bin .../components/ProgressCircular.png | Bin .../thumbnails/components/ProgressLinear.png | Bin .../public/thumbnails/components/Radio.png | Bin .../public/thumbnails/components/Rating.png | Bin .../thumbnails/components/RatingButton.png | Bin .../thumbnails/components/Scrollable.png | Bin .../public/thumbnails/components/Select.png | Bin .../public/thumbnails/components/Switch.png | Bin .../public/thumbnails/components/Textarea.png | Bin .../thumbnails/components/Thumbnail.png | Bin .../public/thumbnails/components/Tooltip.png | Bin .../theme/global-components/AlphaBanner.vue | 0 .../components/.vuepress/theme/index.js | 0 .../.vuepress/theme/layouts/AtomLayout.vue | 0 .../.vuepress/theme/layouts/DefaultLayout.vue | 0 .../.vuepress/theme/layouts/HomeLayout.vue | 0 .../.vuepress/theme/styles/index.styl | 0 .../components/.vuepress/utils/path.util.js | 0 .../assets/Brand_iconstorefront1.svg | 0 .../assets/Brand_iconstorefront2.svg | 0 .../assets/Brand_iconstorefront3.svg | 0 .../components/assets/Storefront-Ui-Hero.webp | Bin .../components/assets/logo.svg | 0 .../components/assets/sfui-hero.png | Bin .../components/blocks/Alert.md | 0 .../components/blocks/Banners.md | 0 .../components/blocks/Breadcrumbs.md | 0 .../components/blocks/Card.md | 0 .../components/blocks/Checkout.md | 0 .../components/blocks/Combobox.md | 0 .../components/blocks/Filters.md | 0 .../components/blocks/Footer.md | 0 .../components/blocks/FormFields.md | 0 .../components/blocks/Gallery.md | 0 .../components/blocks/MegaMenu.md | 0 .../components/blocks/NavbarBottom.md | 0 .../components/blocks/NavbarTop.md | 0 .../components/blocks/NewsletterBox.md | 0 .../components/blocks/OrderSummary.md | 0 .../components/blocks/Pagination.md | 0 .../components/blocks/ProductCard.md | 0 .../components/blocks/ProductSlider.md | 0 .../components/blocks/QuantitySelector.md | 0 .../components/blocks/RatingForms.md | 0 .../components/blocks/Review.md | 0 .../components/blocks/Search.md | 0 .../components/blocks/SelectDropdown.md | 0 .../components/blocks/Tabs.md | 0 .../components/components/accordionitem.md | 0 .../components/components/badge.md | 0 .../components/components/button.md | 0 .../components/components/checkbox.md | 0 .../components/components/chip.md | 0 .../components/components/counter.md | 0 .../components/components/drawer.md | 0 .../components/components/dropdown.md | 0 .../components/components/iconbase.md | 0 .../components/components/input.md | 0 .../components/components/link.md | 0 .../components/components/listitem.md | 0 .../components/components/loadercircular.md | 0 .../components/components/loaderlinear.md | 0 .../components/components/modal.md | 0 .../components/components/progresscircular.md | 0 .../components/components/progresslinear.md | 0 .../components/components/radio.md | 0 .../components/components/rating.md | 0 .../components/components/ratingbutton.md | 0 .../components/components/scrollable.md | 0 .../components/components/select.md | 0 .../components/components/switch.md | 0 .../components/components/textarea.md | 0 .../components/components/thumbnail.md | 0 .../components/components/tooltip.md | 0 .../components/custom-scripts/createIcons.md | 0 .../components/hooks/useDisclosure.md | 0 .../components/hooks/useDropdown.md | 0 .../components/hooks/useFocusVisible.md | 0 .../components/hooks/usePagination.md | 0 .../components/hooks/usePopover.md | 0 .../components/hooks/useScrollable.md | 0 .../components/hooks/useTooltip.md | 0 .../components/hooks/useTrapFocus.md | 0 apps/{docs => docs-old}/components/index.md | 0 .../components/package.json | 0 .../components/react/blocks.md | 0 .../docs-old/components/react/blocks/Alert.md | 57 + .../components/react/blocks/Banners.md | 45 + .../components/react/blocks/Breadcrumbs.md | 33 + apps/docs-old/components/react/blocks/Card.md | 41 + .../components/react/blocks/Checkout.md | 51 + .../components/react/blocks/Combobox.md | 28 + .../components/react/blocks/Filters.md | 87 + .../components/react/blocks/Footer.md | 20 + .../components/react/blocks/Gallery.md | 62 + .../components/react/blocks/MegaMenu.md | 37 + .../components/react/blocks/NavbarBottom.md | 39 + .../components/react/blocks/NavbarTop.md | 28 + .../components/react/blocks/NewsletterBox.md | 19 + .../components/react/blocks/OrderSummary.md | 27 + .../components/react/blocks/Pagination.md | 21 + .../components/react/blocks/ProductCard.md | 41 + .../react/blocks/QuantitySelector.md | 35 + .../components/react/blocks/Review.md | 31 + .../components/react/blocks/Search.md | 48 + .../components/react/blocks/SelectDropdown.md | 65 + .../components/react}/browser-support.md | 0 .../components/react/components.md | 0 .../react/components/accordionitem.md | 73 + .../components/react/components/badge.md | 71 + .../components/react/components/button.md | 108 + .../components/react/components/checkbox.md | 69 + .../components/react/components/chip.md | 95 + .../components/react/components/counter.md | 73 + .../components/react/components/drawer.md | 61 + .../components/react/components/dropdown.md | 57 + .../components/react/components/iconbase.md | 82 + .../components/react/components/input.md | 116 + .../components/react/components/link.md | 70 + .../components/react/components/listitem.md | 72 + .../react/components/loadercircular.md | 64 + .../react/components/loaderlinear.md | 61 + .../components/react/components/modal.md | 81 + .../react/components/progresscircular.md | 79 + .../react/components/progresslinear.md | 72 + .../components/react/components/radio.md | 100 + .../components/react/components/rating.md | 83 + .../components/react/components/scrollable.md | 89 + .../components/react/components/select.md | 83 + .../components/react/components/switch.md | 72 + .../components/react/components/thumbnail.md | 81 + .../components/react/components/tooltip.md | 58 + .../components/react}/customization/index.md | 1 + .../overriding-default-styles.md | 71 + .../react}/customization/theming.md | 1 + .../react}/customization/typography.md | 1 + .../components/react/getting-started.md | 0 .../components/react/hooks.md | 0 .../components/react/hooks/useDisclosure.md | 89 + .../components/react/hooks/useDropdown.md | 84 + .../components/react/hooks/useFocusVisible.md | 51 + .../components/react/hooks/usePagination.md | 207 + .../components/react/hooks/usePopover.md | 88 + .../components/react/hooks/useScrollable.md | 130 + .../components/react/hooks/useTooltip.md | 104 + .../components/react/hooks/useTrapFocus.md | 93 + .../components/react}/migration.md | 0 .../components/tailwind.config.js | 0 apps/docs-old/components/utils/blocks.json | 46 + .../docs-old/components/utils/components.json | 54 + .../components/utils/createComponentList.js | 0 .../utils/createCustomizationDocs.js | 0 .../components/utils/createFrameworksDocs.js | 0 .../components/utils/createHooksDocs.js | 0 .../components/utils/createHooksList.js | 0 .../components/utils/createShowcaseDocs.js | 0 .../components/utils/createShowcaseList.js | 0 .../components/utils/future-blocks.json | 0 apps/docs-old/components/utils/hooks.json | 22 + .../components/utils/utils.js | 0 .../components/vue/blocks.md | 0 apps/docs-old/components/vue/blocks/Alert.md | 57 + .../docs-old/components/vue/blocks/Banners.md | 45 + .../components/vue/blocks/Breadcrumbs.md | 33 + apps/docs-old/components/vue/blocks/Card.md | 41 + .../components/vue/blocks/Checkout.md | 51 + .../components/vue/blocks/Combobox.md | 28 + .../docs-old/components/vue/blocks/Filters.md | 87 + apps/docs-old/components/vue/blocks/Footer.md | 20 + .../docs-old/components/vue/blocks/Gallery.md | 62 + .../components/vue/blocks/MegaMenu.md | 37 + .../components/vue/blocks/NavbarBottom.md | 39 + .../components/vue/blocks/NavbarTop.md | 28 + .../components/vue/blocks/NewsletterBox.md | 19 + .../components/vue/blocks/OrderSummary.md | 27 + .../components/vue/blocks/Pagination.md | 21 + .../components/vue/blocks/ProductCard.md | 41 + .../components/vue/blocks/QuantitySelector.md | 35 + apps/docs-old/components/vue/blocks/Review.md | 31 + apps/docs-old/components/vue/blocks/Search.md | 48 + .../components/vue/blocks/SelectDropdown.md | 65 + .../components/vue}/browser-support.md | 0 .../components/vue/components.md | 0 .../vue/components/accordionitem.md | 83 + .../components/vue/components/badge.md | 71 + .../components/vue/components/button.md | 111 + .../components/vue/components/checkbox.md | 75 + .../components/vue/components/chip.md | 108 + .../components/vue/components/counter.md | 76 + .../components/vue/components/drawer.md | 71 + .../components/vue/components/dropdown.md | 67 + .../components/vue/components/iconbase.md | 88 + .../components/vue/components/input.md | 125 + .../components/vue/components/link.md | 72 + .../components/vue/components/listitem.md | 76 + .../vue/components/loadercircular.md | 63 + .../components/vue/components/loaderlinear.md | 60 + .../components/vue/components/modal.md | 91 + .../vue/components/progresscircular.md | 82 + .../vue/components/progresslinear.md | 71 + .../components/vue/components/radio.md | 97 + .../components/vue/components/rating.md | 83 + .../components/vue/components/scrollable.md | 97 + .../components/vue/components/select.md | 93 + .../components/vue/components/switch.md | 77 + .../components/vue/components/thumbnail.md | 84 + .../components/vue/components/tooltip.md | 62 + .../components/vue/customization/index.md | 7 + .../overriding-default-styles.md | 72 + .../components/vue/customization/theming.md | 193 + .../vue/customization/typography.md | 170 + .../components/vue/getting-started.md | 0 .../components/vue/hooks.md | 0 .../components/vue/hooks/useDisclosure.md | 89 + .../components/vue/hooks/useDropdown.md | 89 + .../components/vue/hooks/useFocusVisible.md | 51 + .../components/vue/hooks/usePagination.md | 192 + .../components/vue/hooks/usePopover.md | 97 + .../components/vue/hooks/useScrollable.md | 124 + .../components/vue/hooks/useTooltip.md | 99 + .../components/vue/hooks/useTrapFocus.md | 91 + .../components/vue}/migration.md | 0 apps/{docs => docs-old}/development/IDEs.md | 0 .../development/component_generator.md | 0 .../development/docs-deployment.md | 0 apps/{docs => docs-old}/development/hello.md | 0 .../development/react/rules.md | 0 .../{docs => docs-old}/development/release.md | 0 .../development/repository.md | 0 apps/{docs => docs-old}/development/rules.md | 0 .../{docs => docs-old}/development/testing.md | 0 .../development/vue/rules.md | 0 .../tests/cypress.config.ts | 0 .../tests/e2e/changeFramework.cy.ts | 0 .../tests/e2e/codePreview.cy.ts | 0 .../tests/e2e/homePage.cy.ts | 0 .../tests/e2e/iconsVisible.cy.ts | 0 .../tests/e2e/overviewCheck.cy.ts | 0 .../{docs => docs-old}/tests/e2e/sample.cy.ts | 0 .../tests/e2e/tableOfContentCheck.cy.ts | 0 .../tests/fixtures/baseComponents.json | 0 .../tests/fixtures/blocksAndComponents.json | 0 .../tests/fixtures/buttonTablesOfContent.json | 0 .../tests/fixtures/elements.json | 0 .../fixtures/genericTablesOfContent.json | 0 .../tests/fixtures/iconTestId.json | 0 .../fixtures/installationExamplesReact.json | 0 .../fixtures/installationExamplesVue.json | 0 .../tests/fixtures/overviewblocks.json | 0 .../tests/fixtures/overviewcomponents.json | 0 apps/{docs => docs-old}/tests/package.json | 0 .../tests/support/commands.ts | 0 .../{docs => docs-old}/tests/support/index.ts | 0 .../pageObject/ChangeFramework.PageObject.ts | 0 .../pageObject/CodePreview.PageObject.ts | 0 .../DetailsPageObject.PageObject.ts | 0 .../pageObject/HomePageObject.PageObject.ts | 0 .../pageObject/IconVisible.PageObject.ts | 0 .../pageObject/OverviewVisible.PageObject.ts | 0 .../pageObject/TableOfContent.PageObject.ts | 0 apps/{docs => docs-old}/tests/tsconfig.json | 0 apps/{docs => docs-old}/tests/types/types.ts | 0 apps/docs/README.md | 22 + apps/docs/content/1.index.md | 61 + .../overriding-default-styles.md | 5 - .../3.customization}/prose.md | 5 - apps/docs/content/3.customization/theming.md | 187 + .../content/3.customization/typography.md | 164 + .../content/4.components/accordionitem.md | 123 + apps/docs/content/4.components/badge.md | 101 + apps/docs/content/4.components/button.md | 157 + apps/docs/content/4.components/checkbox.md | 107 + apps/docs/content/4.components/chip.md | 144 + apps/docs/content/4.components/counter.md | 122 + apps/docs/content/4.components/drawer.md | 116 + apps/docs/content/4.components/dropdown.md | 110 + apps/docs/content/4.components/iconbase.md | 119 + apps/docs/content/4.components/input.md | 175 + apps/docs/content/4.components/link.md | 124 + apps/docs/content/4.components/listitem.md | 130 + .../content/4.components/loadercircular.md | 80 + .../docs/content/4.components/loaderlinear.md | 77 + apps/docs/content/4.components/modal.md | 117 + .../content/4.components/progresscircular.md | 107 + .../content/4.components/progresslinear.md | 93 + apps/docs/content/4.components/radio.md | 150 + apps/docs/content/4.components/rating.md | 106 + .../docs/content/4.components/ratingbutton.md | 163 + apps/docs/content/4.components/scrollable.md | 151 + apps/docs/content/4.components/select.md | 132 + apps/docs/content/4.components/switch.md | 104 + apps/docs/content/4.components/textarea.md | 127 + apps/docs/content/4.components/thumbnail.md | 119 + apps/docs/content/4.components/tooltip.md | 81 + apps/docs/content/_dir.yml | 3 + apps/docs/content/image.webp | Bin 0 -> 60880 bytes apps/docs/nuxt.config.ts | 19 + apps/docs/package.json | 27 + apps/docs/server/plugins/code-snippets.ts | 47 + apps/docs/tailwind.config.ts | 19 + apps/docs/tsconfig.json | 4 + yarn.lock | 12865 +++++----------- 355 files changed, 15407 insertions(+), 8955 deletions(-) rename apps/{docs => docs-old}/components/.env.example (100%) rename apps/{docs => docs-old}/components/.gitignore (100%) rename apps/{docs => docs-old}/components/.vuepress/components/ColorPalette.vue (100%) rename apps/{docs => docs-old}/components/.vuepress/components/ColorPaletteBlock.vue (100%) rename apps/{docs => docs-old}/components/.vuepress/components/ComponentList.vue (100%) rename apps/{docs => docs-old}/components/.vuepress/components/FigmaLink.vue (100%) rename apps/{docs => docs-old}/components/.vuepress/components/Generate.vue (100%) rename apps/{docs => docs-old}/components/.vuepress/components/LandingGrid.vue (100%) rename apps/{docs => docs-old}/components/.vuepress/components/Showcase.vue (100%) rename apps/{docs => docs-old}/components/.vuepress/components/SourceCode.vue (100%) rename apps/{docs => docs-old}/components/.vuepress/components/TypographyList.vue (100%) rename apps/{docs => docs-old}/components/.vuepress/config.js (100%) rename apps/{docs => docs-old}/components/.vuepress/public/favicon.ico (100%) rename apps/{docs => docs-old}/components/.vuepress/public/sfui-logo.svg (100%) rename apps/{docs => docs-old}/components/.vuepress/public/thumbnails/blocks/Alert.png (100%) rename apps/{docs => docs-old}/components/.vuepress/public/thumbnails/blocks/Banners.png (100%) rename apps/{docs => docs-old}/components/.vuepress/public/thumbnails/blocks/Breadcrumbs.png (100%) rename apps/{docs => docs-old}/components/.vuepress/public/thumbnails/blocks/Card.png (100%) rename apps/{docs => docs-old}/components/.vuepress/public/thumbnails/blocks/Checkout.png (100%) rename apps/{docs => docs-old}/components/.vuepress/public/thumbnails/blocks/Combobox.png (100%) rename apps/{docs => docs-old}/components/.vuepress/public/thumbnails/blocks/Filters.png (100%) rename apps/{docs => docs-old}/components/.vuepress/public/thumbnails/blocks/Footer.png (100%) rename apps/{docs => docs-old}/components/.vuepress/public/thumbnails/blocks/FormFields.png (100%) rename apps/{docs => docs-old}/components/.vuepress/public/thumbnails/blocks/Gallery.png (100%) rename apps/{docs => docs-old}/components/.vuepress/public/thumbnails/blocks/MegaMenu.png (100%) rename apps/{docs => docs-old}/components/.vuepress/public/thumbnails/blocks/NavbarBottom.png (100%) rename apps/{docs => docs-old}/components/.vuepress/public/thumbnails/blocks/NavbarTop.png (100%) rename apps/{docs => docs-old}/components/.vuepress/public/thumbnails/blocks/NewsletterBox.png (100%) rename apps/{docs => docs-old}/components/.vuepress/public/thumbnails/blocks/OrderSummary.png (100%) rename apps/{docs => docs-old}/components/.vuepress/public/thumbnails/blocks/Pagination.png (100%) rename apps/{docs => docs-old}/components/.vuepress/public/thumbnails/blocks/ProductCard.png (100%) rename apps/{docs => docs-old}/components/.vuepress/public/thumbnails/blocks/ProductSlider.png (100%) rename apps/{docs => docs-old}/components/.vuepress/public/thumbnails/blocks/QuantitySelector.png (100%) rename apps/{docs => docs-old}/components/.vuepress/public/thumbnails/blocks/RatingForms.png (100%) rename apps/{docs => docs-old}/components/.vuepress/public/thumbnails/blocks/Review.png (100%) rename apps/{docs => docs-old}/components/.vuepress/public/thumbnails/blocks/Search.png (100%) rename apps/{docs => docs-old}/components/.vuepress/public/thumbnails/blocks/SelectDropdown.png (100%) rename apps/{docs => docs-old}/components/.vuepress/public/thumbnails/blocks/Tabs.png (100%) rename apps/{docs => docs-old}/components/.vuepress/public/thumbnails/components/AccordionItem.png (100%) rename apps/{docs => docs-old}/components/.vuepress/public/thumbnails/components/Badge.png (100%) rename apps/{docs => docs-old}/components/.vuepress/public/thumbnails/components/Button.png (100%) rename apps/{docs => docs-old}/components/.vuepress/public/thumbnails/components/Checkbox.png (100%) rename apps/{docs => docs-old}/components/.vuepress/public/thumbnails/components/Chip.png (100%) rename apps/{docs => docs-old}/components/.vuepress/public/thumbnails/components/Counter.png (100%) rename apps/{docs => docs-old}/components/.vuepress/public/thumbnails/components/Drawer.png (100%) rename apps/{docs => docs-old}/components/.vuepress/public/thumbnails/components/Dropdown.png (100%) rename apps/{docs => docs-old}/components/.vuepress/public/thumbnails/components/IconBase.png (100%) rename apps/{docs => docs-old}/components/.vuepress/public/thumbnails/components/Input.png (100%) rename apps/{docs => docs-old}/components/.vuepress/public/thumbnails/components/Link.png (100%) rename apps/{docs => docs-old}/components/.vuepress/public/thumbnails/components/ListItem.png (100%) rename apps/{docs => docs-old}/components/.vuepress/public/thumbnails/components/LoaderCircular.png (100%) rename apps/{docs => docs-old}/components/.vuepress/public/thumbnails/components/LoaderLinear.png (100%) rename apps/{docs => docs-old}/components/.vuepress/public/thumbnails/components/Modal.png (100%) rename apps/{docs => docs-old}/components/.vuepress/public/thumbnails/components/ProgressCircular.png (100%) rename apps/{docs => docs-old}/components/.vuepress/public/thumbnails/components/ProgressLinear.png (100%) rename apps/{docs => docs-old}/components/.vuepress/public/thumbnails/components/Radio.png (100%) rename apps/{docs => docs-old}/components/.vuepress/public/thumbnails/components/Rating.png (100%) rename apps/{docs => docs-old}/components/.vuepress/public/thumbnails/components/RatingButton.png (100%) rename apps/{docs => docs-old}/components/.vuepress/public/thumbnails/components/Scrollable.png (100%) rename apps/{docs => docs-old}/components/.vuepress/public/thumbnails/components/Select.png (100%) rename apps/{docs => docs-old}/components/.vuepress/public/thumbnails/components/Switch.png (100%) rename apps/{docs => docs-old}/components/.vuepress/public/thumbnails/components/Textarea.png (100%) rename apps/{docs => docs-old}/components/.vuepress/public/thumbnails/components/Thumbnail.png (100%) rename apps/{docs => docs-old}/components/.vuepress/public/thumbnails/components/Tooltip.png (100%) rename apps/{docs => docs-old}/components/.vuepress/theme/global-components/AlphaBanner.vue (100%) rename apps/{docs => docs-old}/components/.vuepress/theme/index.js (100%) rename apps/{docs => docs-old}/components/.vuepress/theme/layouts/AtomLayout.vue (100%) rename apps/{docs => docs-old}/components/.vuepress/theme/layouts/DefaultLayout.vue (100%) rename apps/{docs => docs-old}/components/.vuepress/theme/layouts/HomeLayout.vue (100%) rename apps/{docs => docs-old}/components/.vuepress/theme/styles/index.styl (100%) rename apps/{docs => docs-old}/components/.vuepress/utils/path.util.js (100%) rename apps/{docs => docs-old}/components/assets/Brand_iconstorefront1.svg (100%) rename apps/{docs => docs-old}/components/assets/Brand_iconstorefront2.svg (100%) rename apps/{docs => docs-old}/components/assets/Brand_iconstorefront3.svg (100%) rename apps/{docs => docs-old}/components/assets/Storefront-Ui-Hero.webp (100%) rename apps/{docs => docs-old}/components/assets/logo.svg (100%) rename apps/{docs => docs-old}/components/assets/sfui-hero.png (100%) rename apps/{docs => docs-old}/components/blocks/Alert.md (100%) rename apps/{docs => docs-old}/components/blocks/Banners.md (100%) rename apps/{docs => docs-old}/components/blocks/Breadcrumbs.md (100%) rename apps/{docs => docs-old}/components/blocks/Card.md (100%) rename apps/{docs => docs-old}/components/blocks/Checkout.md (100%) rename apps/{docs => docs-old}/components/blocks/Combobox.md (100%) rename apps/{docs => docs-old}/components/blocks/Filters.md (100%) rename apps/{docs => docs-old}/components/blocks/Footer.md (100%) rename apps/{docs => docs-old}/components/blocks/FormFields.md (100%) rename apps/{docs => docs-old}/components/blocks/Gallery.md (100%) rename apps/{docs => docs-old}/components/blocks/MegaMenu.md (100%) rename apps/{docs => docs-old}/components/blocks/NavbarBottom.md (100%) rename apps/{docs => docs-old}/components/blocks/NavbarTop.md (100%) rename apps/{docs => docs-old}/components/blocks/NewsletterBox.md (100%) rename apps/{docs => docs-old}/components/blocks/OrderSummary.md (100%) rename apps/{docs => docs-old}/components/blocks/Pagination.md (100%) rename apps/{docs => docs-old}/components/blocks/ProductCard.md (100%) rename apps/{docs => docs-old}/components/blocks/ProductSlider.md (100%) rename apps/{docs => docs-old}/components/blocks/QuantitySelector.md (100%) rename apps/{docs => docs-old}/components/blocks/RatingForms.md (100%) rename apps/{docs => docs-old}/components/blocks/Review.md (100%) rename apps/{docs => docs-old}/components/blocks/Search.md (100%) rename apps/{docs => docs-old}/components/blocks/SelectDropdown.md (100%) rename apps/{docs => docs-old}/components/blocks/Tabs.md (100%) rename apps/{docs => docs-old}/components/components/accordionitem.md (100%) rename apps/{docs => docs-old}/components/components/badge.md (100%) rename apps/{docs => docs-old}/components/components/button.md (100%) rename apps/{docs => docs-old}/components/components/checkbox.md (100%) rename apps/{docs => docs-old}/components/components/chip.md (100%) rename apps/{docs => docs-old}/components/components/counter.md (100%) rename apps/{docs => docs-old}/components/components/drawer.md (100%) rename apps/{docs => docs-old}/components/components/dropdown.md (100%) rename apps/{docs => docs-old}/components/components/iconbase.md (100%) rename apps/{docs => docs-old}/components/components/input.md (100%) rename apps/{docs => docs-old}/components/components/link.md (100%) rename apps/{docs => docs-old}/components/components/listitem.md (100%) rename apps/{docs => docs-old}/components/components/loadercircular.md (100%) rename apps/{docs => docs-old}/components/components/loaderlinear.md (100%) rename apps/{docs => docs-old}/components/components/modal.md (100%) rename apps/{docs => docs-old}/components/components/progresscircular.md (100%) rename apps/{docs => docs-old}/components/components/progresslinear.md (100%) rename apps/{docs => docs-old}/components/components/radio.md (100%) rename apps/{docs => docs-old}/components/components/rating.md (100%) rename apps/{docs => docs-old}/components/components/ratingbutton.md (100%) rename apps/{docs => docs-old}/components/components/scrollable.md (100%) rename apps/{docs => docs-old}/components/components/select.md (100%) rename apps/{docs => docs-old}/components/components/switch.md (100%) rename apps/{docs => docs-old}/components/components/textarea.md (100%) rename apps/{docs => docs-old}/components/components/thumbnail.md (100%) rename apps/{docs => docs-old}/components/components/tooltip.md (100%) rename apps/{docs => docs-old}/components/custom-scripts/createIcons.md (100%) rename apps/{docs => docs-old}/components/hooks/useDisclosure.md (100%) rename apps/{docs => docs-old}/components/hooks/useDropdown.md (100%) rename apps/{docs => docs-old}/components/hooks/useFocusVisible.md (100%) rename apps/{docs => docs-old}/components/hooks/usePagination.md (100%) rename apps/{docs => docs-old}/components/hooks/usePopover.md (100%) rename apps/{docs => docs-old}/components/hooks/useScrollable.md (100%) rename apps/{docs => docs-old}/components/hooks/useTooltip.md (100%) rename apps/{docs => docs-old}/components/hooks/useTrapFocus.md (100%) rename apps/{docs => docs-old}/components/index.md (100%) rename apps/{docs => docs-old}/components/package.json (100%) rename apps/{docs => docs-old}/components/react/blocks.md (100%) create mode 100644 apps/docs-old/components/react/blocks/Alert.md create mode 100644 apps/docs-old/components/react/blocks/Banners.md create mode 100644 apps/docs-old/components/react/blocks/Breadcrumbs.md create mode 100644 apps/docs-old/components/react/blocks/Card.md create mode 100644 apps/docs-old/components/react/blocks/Checkout.md create mode 100644 apps/docs-old/components/react/blocks/Combobox.md create mode 100644 apps/docs-old/components/react/blocks/Filters.md create mode 100644 apps/docs-old/components/react/blocks/Footer.md create mode 100644 apps/docs-old/components/react/blocks/Gallery.md create mode 100644 apps/docs-old/components/react/blocks/MegaMenu.md create mode 100644 apps/docs-old/components/react/blocks/NavbarBottom.md create mode 100644 apps/docs-old/components/react/blocks/NavbarTop.md create mode 100644 apps/docs-old/components/react/blocks/NewsletterBox.md create mode 100644 apps/docs-old/components/react/blocks/OrderSummary.md create mode 100644 apps/docs-old/components/react/blocks/Pagination.md create mode 100644 apps/docs-old/components/react/blocks/ProductCard.md create mode 100644 apps/docs-old/components/react/blocks/QuantitySelector.md create mode 100644 apps/docs-old/components/react/blocks/Review.md create mode 100644 apps/docs-old/components/react/blocks/Search.md create mode 100644 apps/docs-old/components/react/blocks/SelectDropdown.md rename apps/{docs/components/vue => docs-old/components/react}/browser-support.md (100%) rename apps/{docs => docs-old}/components/react/components.md (100%) create mode 100644 apps/docs-old/components/react/components/accordionitem.md create mode 100644 apps/docs-old/components/react/components/badge.md create mode 100644 apps/docs-old/components/react/components/button.md create mode 100644 apps/docs-old/components/react/components/checkbox.md create mode 100644 apps/docs-old/components/react/components/chip.md create mode 100644 apps/docs-old/components/react/components/counter.md create mode 100644 apps/docs-old/components/react/components/drawer.md create mode 100644 apps/docs-old/components/react/components/dropdown.md create mode 100644 apps/docs-old/components/react/components/iconbase.md create mode 100644 apps/docs-old/components/react/components/input.md create mode 100644 apps/docs-old/components/react/components/link.md create mode 100644 apps/docs-old/components/react/components/listitem.md create mode 100644 apps/docs-old/components/react/components/loadercircular.md create mode 100644 apps/docs-old/components/react/components/loaderlinear.md create mode 100644 apps/docs-old/components/react/components/modal.md create mode 100644 apps/docs-old/components/react/components/progresscircular.md create mode 100644 apps/docs-old/components/react/components/progresslinear.md create mode 100644 apps/docs-old/components/react/components/radio.md create mode 100644 apps/docs-old/components/react/components/rating.md create mode 100644 apps/docs-old/components/react/components/scrollable.md create mode 100644 apps/docs-old/components/react/components/select.md create mode 100644 apps/docs-old/components/react/components/switch.md create mode 100644 apps/docs-old/components/react/components/thumbnail.md create mode 100644 apps/docs-old/components/react/components/tooltip.md rename apps/{docs/components => docs-old/components/react}/customization/index.md (66%) create mode 100644 apps/docs-old/components/react/customization/overriding-default-styles.md rename apps/{docs/components => docs-old/components/react}/customization/theming.md (99%) rename apps/{docs/components => docs-old/components/react}/customization/typography.md (99%) rename apps/{docs => docs-old}/components/react/getting-started.md (100%) rename apps/{docs => docs-old}/components/react/hooks.md (100%) create mode 100644 apps/docs-old/components/react/hooks/useDisclosure.md create mode 100644 apps/docs-old/components/react/hooks/useDropdown.md create mode 100644 apps/docs-old/components/react/hooks/useFocusVisible.md create mode 100644 apps/docs-old/components/react/hooks/usePagination.md create mode 100644 apps/docs-old/components/react/hooks/usePopover.md create mode 100644 apps/docs-old/components/react/hooks/useScrollable.md create mode 100644 apps/docs-old/components/react/hooks/useTooltip.md create mode 100644 apps/docs-old/components/react/hooks/useTrapFocus.md rename apps/{docs/components/vue => docs-old/components/react}/migration.md (100%) rename apps/{docs => docs-old}/components/tailwind.config.js (100%) create mode 100644 apps/docs-old/components/utils/blocks.json create mode 100644 apps/docs-old/components/utils/components.json rename apps/{docs => docs-old}/components/utils/createComponentList.js (100%) rename apps/{docs => docs-old}/components/utils/createCustomizationDocs.js (100%) rename apps/{docs => docs-old}/components/utils/createFrameworksDocs.js (100%) rename apps/{docs => docs-old}/components/utils/createHooksDocs.js (100%) rename apps/{docs => docs-old}/components/utils/createHooksList.js (100%) rename apps/{docs => docs-old}/components/utils/createShowcaseDocs.js (100%) rename apps/{docs => docs-old}/components/utils/createShowcaseList.js (100%) rename apps/{docs => docs-old}/components/utils/future-blocks.json (100%) create mode 100644 apps/docs-old/components/utils/hooks.json rename apps/{docs => docs-old}/components/utils/utils.js (100%) rename apps/{docs => docs-old}/components/vue/blocks.md (100%) create mode 100644 apps/docs-old/components/vue/blocks/Alert.md create mode 100644 apps/docs-old/components/vue/blocks/Banners.md create mode 100644 apps/docs-old/components/vue/blocks/Breadcrumbs.md create mode 100644 apps/docs-old/components/vue/blocks/Card.md create mode 100644 apps/docs-old/components/vue/blocks/Checkout.md create mode 100644 apps/docs-old/components/vue/blocks/Combobox.md create mode 100644 apps/docs-old/components/vue/blocks/Filters.md create mode 100644 apps/docs-old/components/vue/blocks/Footer.md create mode 100644 apps/docs-old/components/vue/blocks/Gallery.md create mode 100644 apps/docs-old/components/vue/blocks/MegaMenu.md create mode 100644 apps/docs-old/components/vue/blocks/NavbarBottom.md create mode 100644 apps/docs-old/components/vue/blocks/NavbarTop.md create mode 100644 apps/docs-old/components/vue/blocks/NewsletterBox.md create mode 100644 apps/docs-old/components/vue/blocks/OrderSummary.md create mode 100644 apps/docs-old/components/vue/blocks/Pagination.md create mode 100644 apps/docs-old/components/vue/blocks/ProductCard.md create mode 100644 apps/docs-old/components/vue/blocks/QuantitySelector.md create mode 100644 apps/docs-old/components/vue/blocks/Review.md create mode 100644 apps/docs-old/components/vue/blocks/Search.md create mode 100644 apps/docs-old/components/vue/blocks/SelectDropdown.md rename apps/{docs/components/react => docs-old/components/vue}/browser-support.md (100%) rename apps/{docs => docs-old}/components/vue/components.md (100%) create mode 100644 apps/docs-old/components/vue/components/accordionitem.md create mode 100644 apps/docs-old/components/vue/components/badge.md create mode 100644 apps/docs-old/components/vue/components/button.md create mode 100644 apps/docs-old/components/vue/components/checkbox.md create mode 100644 apps/docs-old/components/vue/components/chip.md create mode 100644 apps/docs-old/components/vue/components/counter.md create mode 100644 apps/docs-old/components/vue/components/drawer.md create mode 100644 apps/docs-old/components/vue/components/dropdown.md create mode 100644 apps/docs-old/components/vue/components/iconbase.md create mode 100644 apps/docs-old/components/vue/components/input.md create mode 100644 apps/docs-old/components/vue/components/link.md create mode 100644 apps/docs-old/components/vue/components/listitem.md create mode 100644 apps/docs-old/components/vue/components/loadercircular.md create mode 100644 apps/docs-old/components/vue/components/loaderlinear.md create mode 100644 apps/docs-old/components/vue/components/modal.md create mode 100644 apps/docs-old/components/vue/components/progresscircular.md create mode 100644 apps/docs-old/components/vue/components/progresslinear.md create mode 100644 apps/docs-old/components/vue/components/radio.md create mode 100644 apps/docs-old/components/vue/components/rating.md create mode 100644 apps/docs-old/components/vue/components/scrollable.md create mode 100644 apps/docs-old/components/vue/components/select.md create mode 100644 apps/docs-old/components/vue/components/switch.md create mode 100644 apps/docs-old/components/vue/components/thumbnail.md create mode 100644 apps/docs-old/components/vue/components/tooltip.md create mode 100644 apps/docs-old/components/vue/customization/index.md create mode 100644 apps/docs-old/components/vue/customization/overriding-default-styles.md create mode 100644 apps/docs-old/components/vue/customization/theming.md create mode 100644 apps/docs-old/components/vue/customization/typography.md rename apps/{docs => docs-old}/components/vue/getting-started.md (100%) rename apps/{docs => docs-old}/components/vue/hooks.md (100%) create mode 100644 apps/docs-old/components/vue/hooks/useDisclosure.md create mode 100644 apps/docs-old/components/vue/hooks/useDropdown.md create mode 100644 apps/docs-old/components/vue/hooks/useFocusVisible.md create mode 100644 apps/docs-old/components/vue/hooks/usePagination.md create mode 100644 apps/docs-old/components/vue/hooks/usePopover.md create mode 100644 apps/docs-old/components/vue/hooks/useScrollable.md create mode 100644 apps/docs-old/components/vue/hooks/useTooltip.md create mode 100644 apps/docs-old/components/vue/hooks/useTrapFocus.md rename apps/{docs/components/react => docs-old/components/vue}/migration.md (100%) rename apps/{docs => docs-old}/development/IDEs.md (100%) rename apps/{docs => docs-old}/development/component_generator.md (100%) rename apps/{docs => docs-old}/development/docs-deployment.md (100%) rename apps/{docs => docs-old}/development/hello.md (100%) rename apps/{docs => docs-old}/development/react/rules.md (100%) rename apps/{docs => docs-old}/development/release.md (100%) rename apps/{docs => docs-old}/development/repository.md (100%) rename apps/{docs => docs-old}/development/rules.md (100%) rename apps/{docs => docs-old}/development/testing.md (100%) rename apps/{docs => docs-old}/development/vue/rules.md (100%) rename apps/{docs => docs-old}/tests/cypress.config.ts (100%) rename apps/{docs => docs-old}/tests/e2e/changeFramework.cy.ts (100%) rename apps/{docs => docs-old}/tests/e2e/codePreview.cy.ts (100%) rename apps/{docs => docs-old}/tests/e2e/homePage.cy.ts (100%) rename apps/{docs => docs-old}/tests/e2e/iconsVisible.cy.ts (100%) rename apps/{docs => docs-old}/tests/e2e/overviewCheck.cy.ts (100%) rename apps/{docs => docs-old}/tests/e2e/sample.cy.ts (100%) rename apps/{docs => docs-old}/tests/e2e/tableOfContentCheck.cy.ts (100%) rename apps/{docs => docs-old}/tests/fixtures/baseComponents.json (100%) rename apps/{docs => docs-old}/tests/fixtures/blocksAndComponents.json (100%) rename apps/{docs => docs-old}/tests/fixtures/buttonTablesOfContent.json (100%) rename apps/{docs => docs-old}/tests/fixtures/elements.json (100%) rename apps/{docs => docs-old}/tests/fixtures/genericTablesOfContent.json (100%) rename apps/{docs => docs-old}/tests/fixtures/iconTestId.json (100%) rename apps/{docs => docs-old}/tests/fixtures/installationExamplesReact.json (100%) rename apps/{docs => docs-old}/tests/fixtures/installationExamplesVue.json (100%) rename apps/{docs => docs-old}/tests/fixtures/overviewblocks.json (100%) rename apps/{docs => docs-old}/tests/fixtures/overviewcomponents.json (100%) rename apps/{docs => docs-old}/tests/package.json (100%) rename apps/{docs => docs-old}/tests/support/commands.ts (100%) rename apps/{docs => docs-old}/tests/support/index.ts (100%) rename apps/{docs => docs-old}/tests/support/pageObject/ChangeFramework.PageObject.ts (100%) rename apps/{docs => docs-old}/tests/support/pageObject/CodePreview.PageObject.ts (100%) rename apps/{docs => docs-old}/tests/support/pageObject/DetailsPageObject.PageObject.ts (100%) rename apps/{docs => docs-old}/tests/support/pageObject/HomePageObject.PageObject.ts (100%) rename apps/{docs => docs-old}/tests/support/pageObject/IconVisible.PageObject.ts (100%) rename apps/{docs => docs-old}/tests/support/pageObject/OverviewVisible.PageObject.ts (100%) rename apps/{docs => docs-old}/tests/support/pageObject/TableOfContent.PageObject.ts (100%) rename apps/{docs => docs-old}/tests/tsconfig.json (100%) rename apps/{docs => docs-old}/tests/types/types.ts (100%) create mode 100644 apps/docs/README.md create mode 100644 apps/docs/content/1.index.md rename apps/docs/{components/customization => content/3.customization}/overriding-default-styles.md (98%) rename apps/docs/{components/customization => content/3.customization}/prose.md (98%) create mode 100644 apps/docs/content/3.customization/theming.md create mode 100644 apps/docs/content/3.customization/typography.md create mode 100644 apps/docs/content/4.components/accordionitem.md create mode 100644 apps/docs/content/4.components/badge.md create mode 100644 apps/docs/content/4.components/button.md create mode 100644 apps/docs/content/4.components/checkbox.md create mode 100644 apps/docs/content/4.components/chip.md create mode 100644 apps/docs/content/4.components/counter.md create mode 100644 apps/docs/content/4.components/drawer.md create mode 100644 apps/docs/content/4.components/dropdown.md create mode 100644 apps/docs/content/4.components/iconbase.md create mode 100644 apps/docs/content/4.components/input.md create mode 100644 apps/docs/content/4.components/link.md create mode 100644 apps/docs/content/4.components/listitem.md create mode 100644 apps/docs/content/4.components/loadercircular.md create mode 100644 apps/docs/content/4.components/loaderlinear.md create mode 100644 apps/docs/content/4.components/modal.md create mode 100644 apps/docs/content/4.components/progresscircular.md create mode 100644 apps/docs/content/4.components/progresslinear.md create mode 100644 apps/docs/content/4.components/radio.md create mode 100644 apps/docs/content/4.components/rating.md create mode 100644 apps/docs/content/4.components/ratingbutton.md create mode 100644 apps/docs/content/4.components/scrollable.md create mode 100644 apps/docs/content/4.components/select.md create mode 100644 apps/docs/content/4.components/switch.md create mode 100644 apps/docs/content/4.components/textarea.md create mode 100644 apps/docs/content/4.components/thumbnail.md create mode 100644 apps/docs/content/4.components/tooltip.md create mode 100644 apps/docs/content/_dir.yml create mode 100644 apps/docs/content/image.webp create mode 100644 apps/docs/nuxt.config.ts create mode 100644 apps/docs/package.json create mode 100644 apps/docs/server/plugins/code-snippets.ts create mode 100644 apps/docs/tailwind.config.ts create mode 100644 apps/docs/tsconfig.json diff --git a/apps/docs/components/.env.example b/apps/docs-old/components/.env.example similarity index 100% rename from apps/docs/components/.env.example rename to apps/docs-old/components/.env.example diff --git a/apps/docs/components/.gitignore b/apps/docs-old/components/.gitignore similarity index 100% rename from apps/docs/components/.gitignore rename to apps/docs-old/components/.gitignore diff --git a/apps/docs/components/.vuepress/components/ColorPalette.vue b/apps/docs-old/components/.vuepress/components/ColorPalette.vue similarity index 100% rename from apps/docs/components/.vuepress/components/ColorPalette.vue rename to apps/docs-old/components/.vuepress/components/ColorPalette.vue diff --git a/apps/docs/components/.vuepress/components/ColorPaletteBlock.vue b/apps/docs-old/components/.vuepress/components/ColorPaletteBlock.vue similarity index 100% rename from apps/docs/components/.vuepress/components/ColorPaletteBlock.vue rename to apps/docs-old/components/.vuepress/components/ColorPaletteBlock.vue diff --git a/apps/docs/components/.vuepress/components/ComponentList.vue b/apps/docs-old/components/.vuepress/components/ComponentList.vue similarity index 100% rename from apps/docs/components/.vuepress/components/ComponentList.vue rename to apps/docs-old/components/.vuepress/components/ComponentList.vue diff --git a/apps/docs/components/.vuepress/components/FigmaLink.vue b/apps/docs-old/components/.vuepress/components/FigmaLink.vue similarity index 100% rename from apps/docs/components/.vuepress/components/FigmaLink.vue rename to apps/docs-old/components/.vuepress/components/FigmaLink.vue diff --git a/apps/docs/components/.vuepress/components/Generate.vue b/apps/docs-old/components/.vuepress/components/Generate.vue similarity index 100% rename from apps/docs/components/.vuepress/components/Generate.vue rename to apps/docs-old/components/.vuepress/components/Generate.vue diff --git a/apps/docs/components/.vuepress/components/LandingGrid.vue b/apps/docs-old/components/.vuepress/components/LandingGrid.vue similarity index 100% rename from apps/docs/components/.vuepress/components/LandingGrid.vue rename to apps/docs-old/components/.vuepress/components/LandingGrid.vue diff --git a/apps/docs/components/.vuepress/components/Showcase.vue b/apps/docs-old/components/.vuepress/components/Showcase.vue similarity index 100% rename from apps/docs/components/.vuepress/components/Showcase.vue rename to apps/docs-old/components/.vuepress/components/Showcase.vue diff --git a/apps/docs/components/.vuepress/components/SourceCode.vue b/apps/docs-old/components/.vuepress/components/SourceCode.vue similarity index 100% rename from apps/docs/components/.vuepress/components/SourceCode.vue rename to apps/docs-old/components/.vuepress/components/SourceCode.vue diff --git a/apps/docs/components/.vuepress/components/TypographyList.vue b/apps/docs-old/components/.vuepress/components/TypographyList.vue similarity index 100% rename from apps/docs/components/.vuepress/components/TypographyList.vue rename to apps/docs-old/components/.vuepress/components/TypographyList.vue diff --git a/apps/docs/components/.vuepress/config.js b/apps/docs-old/components/.vuepress/config.js similarity index 100% rename from apps/docs/components/.vuepress/config.js rename to apps/docs-old/components/.vuepress/config.js diff --git a/apps/docs/components/.vuepress/public/favicon.ico b/apps/docs-old/components/.vuepress/public/favicon.ico similarity index 100% rename from apps/docs/components/.vuepress/public/favicon.ico rename to apps/docs-old/components/.vuepress/public/favicon.ico diff --git a/apps/docs/components/.vuepress/public/sfui-logo.svg b/apps/docs-old/components/.vuepress/public/sfui-logo.svg similarity index 100% rename from apps/docs/components/.vuepress/public/sfui-logo.svg rename to apps/docs-old/components/.vuepress/public/sfui-logo.svg diff --git a/apps/docs/components/.vuepress/public/thumbnails/blocks/Alert.png b/apps/docs-old/components/.vuepress/public/thumbnails/blocks/Alert.png similarity index 100% rename from apps/docs/components/.vuepress/public/thumbnails/blocks/Alert.png rename to apps/docs-old/components/.vuepress/public/thumbnails/blocks/Alert.png diff --git a/apps/docs/components/.vuepress/public/thumbnails/blocks/Banners.png b/apps/docs-old/components/.vuepress/public/thumbnails/blocks/Banners.png similarity index 100% rename from apps/docs/components/.vuepress/public/thumbnails/blocks/Banners.png rename to apps/docs-old/components/.vuepress/public/thumbnails/blocks/Banners.png diff --git a/apps/docs/components/.vuepress/public/thumbnails/blocks/Breadcrumbs.png b/apps/docs-old/components/.vuepress/public/thumbnails/blocks/Breadcrumbs.png similarity index 100% rename from apps/docs/components/.vuepress/public/thumbnails/blocks/Breadcrumbs.png rename to apps/docs-old/components/.vuepress/public/thumbnails/blocks/Breadcrumbs.png diff --git a/apps/docs/components/.vuepress/public/thumbnails/blocks/Card.png b/apps/docs-old/components/.vuepress/public/thumbnails/blocks/Card.png similarity index 100% rename from apps/docs/components/.vuepress/public/thumbnails/blocks/Card.png rename to apps/docs-old/components/.vuepress/public/thumbnails/blocks/Card.png diff --git a/apps/docs/components/.vuepress/public/thumbnails/blocks/Checkout.png b/apps/docs-old/components/.vuepress/public/thumbnails/blocks/Checkout.png similarity index 100% rename from apps/docs/components/.vuepress/public/thumbnails/blocks/Checkout.png rename to apps/docs-old/components/.vuepress/public/thumbnails/blocks/Checkout.png diff --git a/apps/docs/components/.vuepress/public/thumbnails/blocks/Combobox.png b/apps/docs-old/components/.vuepress/public/thumbnails/blocks/Combobox.png similarity index 100% rename from apps/docs/components/.vuepress/public/thumbnails/blocks/Combobox.png rename to apps/docs-old/components/.vuepress/public/thumbnails/blocks/Combobox.png diff --git a/apps/docs/components/.vuepress/public/thumbnails/blocks/Filters.png b/apps/docs-old/components/.vuepress/public/thumbnails/blocks/Filters.png similarity index 100% rename from apps/docs/components/.vuepress/public/thumbnails/blocks/Filters.png rename to apps/docs-old/components/.vuepress/public/thumbnails/blocks/Filters.png diff --git a/apps/docs/components/.vuepress/public/thumbnails/blocks/Footer.png b/apps/docs-old/components/.vuepress/public/thumbnails/blocks/Footer.png similarity index 100% rename from apps/docs/components/.vuepress/public/thumbnails/blocks/Footer.png rename to apps/docs-old/components/.vuepress/public/thumbnails/blocks/Footer.png diff --git a/apps/docs/components/.vuepress/public/thumbnails/blocks/FormFields.png b/apps/docs-old/components/.vuepress/public/thumbnails/blocks/FormFields.png similarity index 100% rename from apps/docs/components/.vuepress/public/thumbnails/blocks/FormFields.png rename to apps/docs-old/components/.vuepress/public/thumbnails/blocks/FormFields.png diff --git a/apps/docs/components/.vuepress/public/thumbnails/blocks/Gallery.png b/apps/docs-old/components/.vuepress/public/thumbnails/blocks/Gallery.png similarity index 100% rename from apps/docs/components/.vuepress/public/thumbnails/blocks/Gallery.png rename to apps/docs-old/components/.vuepress/public/thumbnails/blocks/Gallery.png diff --git a/apps/docs/components/.vuepress/public/thumbnails/blocks/MegaMenu.png b/apps/docs-old/components/.vuepress/public/thumbnails/blocks/MegaMenu.png similarity index 100% rename from apps/docs/components/.vuepress/public/thumbnails/blocks/MegaMenu.png rename to apps/docs-old/components/.vuepress/public/thumbnails/blocks/MegaMenu.png diff --git a/apps/docs/components/.vuepress/public/thumbnails/blocks/NavbarBottom.png b/apps/docs-old/components/.vuepress/public/thumbnails/blocks/NavbarBottom.png similarity index 100% rename from apps/docs/components/.vuepress/public/thumbnails/blocks/NavbarBottom.png rename to apps/docs-old/components/.vuepress/public/thumbnails/blocks/NavbarBottom.png diff --git a/apps/docs/components/.vuepress/public/thumbnails/blocks/NavbarTop.png b/apps/docs-old/components/.vuepress/public/thumbnails/blocks/NavbarTop.png similarity index 100% rename from apps/docs/components/.vuepress/public/thumbnails/blocks/NavbarTop.png rename to apps/docs-old/components/.vuepress/public/thumbnails/blocks/NavbarTop.png diff --git a/apps/docs/components/.vuepress/public/thumbnails/blocks/NewsletterBox.png b/apps/docs-old/components/.vuepress/public/thumbnails/blocks/NewsletterBox.png similarity index 100% rename from apps/docs/components/.vuepress/public/thumbnails/blocks/NewsletterBox.png rename to apps/docs-old/components/.vuepress/public/thumbnails/blocks/NewsletterBox.png diff --git a/apps/docs/components/.vuepress/public/thumbnails/blocks/OrderSummary.png b/apps/docs-old/components/.vuepress/public/thumbnails/blocks/OrderSummary.png similarity index 100% rename from apps/docs/components/.vuepress/public/thumbnails/blocks/OrderSummary.png rename to apps/docs-old/components/.vuepress/public/thumbnails/blocks/OrderSummary.png diff --git a/apps/docs/components/.vuepress/public/thumbnails/blocks/Pagination.png b/apps/docs-old/components/.vuepress/public/thumbnails/blocks/Pagination.png similarity index 100% rename from apps/docs/components/.vuepress/public/thumbnails/blocks/Pagination.png rename to apps/docs-old/components/.vuepress/public/thumbnails/blocks/Pagination.png diff --git a/apps/docs/components/.vuepress/public/thumbnails/blocks/ProductCard.png b/apps/docs-old/components/.vuepress/public/thumbnails/blocks/ProductCard.png similarity index 100% rename from apps/docs/components/.vuepress/public/thumbnails/blocks/ProductCard.png rename to apps/docs-old/components/.vuepress/public/thumbnails/blocks/ProductCard.png diff --git a/apps/docs/components/.vuepress/public/thumbnails/blocks/ProductSlider.png b/apps/docs-old/components/.vuepress/public/thumbnails/blocks/ProductSlider.png similarity index 100% rename from apps/docs/components/.vuepress/public/thumbnails/blocks/ProductSlider.png rename to apps/docs-old/components/.vuepress/public/thumbnails/blocks/ProductSlider.png diff --git a/apps/docs/components/.vuepress/public/thumbnails/blocks/QuantitySelector.png b/apps/docs-old/components/.vuepress/public/thumbnails/blocks/QuantitySelector.png similarity index 100% rename from apps/docs/components/.vuepress/public/thumbnails/blocks/QuantitySelector.png rename to apps/docs-old/components/.vuepress/public/thumbnails/blocks/QuantitySelector.png diff --git a/apps/docs/components/.vuepress/public/thumbnails/blocks/RatingForms.png b/apps/docs-old/components/.vuepress/public/thumbnails/blocks/RatingForms.png similarity index 100% rename from apps/docs/components/.vuepress/public/thumbnails/blocks/RatingForms.png rename to apps/docs-old/components/.vuepress/public/thumbnails/blocks/RatingForms.png diff --git a/apps/docs/components/.vuepress/public/thumbnails/blocks/Review.png b/apps/docs-old/components/.vuepress/public/thumbnails/blocks/Review.png similarity index 100% rename from apps/docs/components/.vuepress/public/thumbnails/blocks/Review.png rename to apps/docs-old/components/.vuepress/public/thumbnails/blocks/Review.png diff --git a/apps/docs/components/.vuepress/public/thumbnails/blocks/Search.png b/apps/docs-old/components/.vuepress/public/thumbnails/blocks/Search.png similarity index 100% rename from apps/docs/components/.vuepress/public/thumbnails/blocks/Search.png rename to apps/docs-old/components/.vuepress/public/thumbnails/blocks/Search.png diff --git a/apps/docs/components/.vuepress/public/thumbnails/blocks/SelectDropdown.png b/apps/docs-old/components/.vuepress/public/thumbnails/blocks/SelectDropdown.png similarity index 100% rename from apps/docs/components/.vuepress/public/thumbnails/blocks/SelectDropdown.png rename to apps/docs-old/components/.vuepress/public/thumbnails/blocks/SelectDropdown.png diff --git a/apps/docs/components/.vuepress/public/thumbnails/blocks/Tabs.png b/apps/docs-old/components/.vuepress/public/thumbnails/blocks/Tabs.png similarity index 100% rename from apps/docs/components/.vuepress/public/thumbnails/blocks/Tabs.png rename to apps/docs-old/components/.vuepress/public/thumbnails/blocks/Tabs.png diff --git a/apps/docs/components/.vuepress/public/thumbnails/components/AccordionItem.png b/apps/docs-old/components/.vuepress/public/thumbnails/components/AccordionItem.png similarity index 100% rename from apps/docs/components/.vuepress/public/thumbnails/components/AccordionItem.png rename to apps/docs-old/components/.vuepress/public/thumbnails/components/AccordionItem.png diff --git a/apps/docs/components/.vuepress/public/thumbnails/components/Badge.png b/apps/docs-old/components/.vuepress/public/thumbnails/components/Badge.png similarity index 100% rename from apps/docs/components/.vuepress/public/thumbnails/components/Badge.png rename to apps/docs-old/components/.vuepress/public/thumbnails/components/Badge.png diff --git a/apps/docs/components/.vuepress/public/thumbnails/components/Button.png b/apps/docs-old/components/.vuepress/public/thumbnails/components/Button.png similarity index 100% rename from apps/docs/components/.vuepress/public/thumbnails/components/Button.png rename to apps/docs-old/components/.vuepress/public/thumbnails/components/Button.png diff --git a/apps/docs/components/.vuepress/public/thumbnails/components/Checkbox.png b/apps/docs-old/components/.vuepress/public/thumbnails/components/Checkbox.png similarity index 100% rename from apps/docs/components/.vuepress/public/thumbnails/components/Checkbox.png rename to apps/docs-old/components/.vuepress/public/thumbnails/components/Checkbox.png diff --git a/apps/docs/components/.vuepress/public/thumbnails/components/Chip.png b/apps/docs-old/components/.vuepress/public/thumbnails/components/Chip.png similarity index 100% rename from apps/docs/components/.vuepress/public/thumbnails/components/Chip.png rename to apps/docs-old/components/.vuepress/public/thumbnails/components/Chip.png diff --git a/apps/docs/components/.vuepress/public/thumbnails/components/Counter.png b/apps/docs-old/components/.vuepress/public/thumbnails/components/Counter.png similarity index 100% rename from apps/docs/components/.vuepress/public/thumbnails/components/Counter.png rename to apps/docs-old/components/.vuepress/public/thumbnails/components/Counter.png diff --git a/apps/docs/components/.vuepress/public/thumbnails/components/Drawer.png b/apps/docs-old/components/.vuepress/public/thumbnails/components/Drawer.png similarity index 100% rename from apps/docs/components/.vuepress/public/thumbnails/components/Drawer.png rename to apps/docs-old/components/.vuepress/public/thumbnails/components/Drawer.png diff --git a/apps/docs/components/.vuepress/public/thumbnails/components/Dropdown.png b/apps/docs-old/components/.vuepress/public/thumbnails/components/Dropdown.png similarity index 100% rename from apps/docs/components/.vuepress/public/thumbnails/components/Dropdown.png rename to apps/docs-old/components/.vuepress/public/thumbnails/components/Dropdown.png diff --git a/apps/docs/components/.vuepress/public/thumbnails/components/IconBase.png b/apps/docs-old/components/.vuepress/public/thumbnails/components/IconBase.png similarity index 100% rename from apps/docs/components/.vuepress/public/thumbnails/components/IconBase.png rename to apps/docs-old/components/.vuepress/public/thumbnails/components/IconBase.png diff --git a/apps/docs/components/.vuepress/public/thumbnails/components/Input.png b/apps/docs-old/components/.vuepress/public/thumbnails/components/Input.png similarity index 100% rename from apps/docs/components/.vuepress/public/thumbnails/components/Input.png rename to apps/docs-old/components/.vuepress/public/thumbnails/components/Input.png diff --git a/apps/docs/components/.vuepress/public/thumbnails/components/Link.png b/apps/docs-old/components/.vuepress/public/thumbnails/components/Link.png similarity index 100% rename from apps/docs/components/.vuepress/public/thumbnails/components/Link.png rename to apps/docs-old/components/.vuepress/public/thumbnails/components/Link.png diff --git a/apps/docs/components/.vuepress/public/thumbnails/components/ListItem.png b/apps/docs-old/components/.vuepress/public/thumbnails/components/ListItem.png similarity index 100% rename from apps/docs/components/.vuepress/public/thumbnails/components/ListItem.png rename to apps/docs-old/components/.vuepress/public/thumbnails/components/ListItem.png diff --git a/apps/docs/components/.vuepress/public/thumbnails/components/LoaderCircular.png b/apps/docs-old/components/.vuepress/public/thumbnails/components/LoaderCircular.png similarity index 100% rename from apps/docs/components/.vuepress/public/thumbnails/components/LoaderCircular.png rename to apps/docs-old/components/.vuepress/public/thumbnails/components/LoaderCircular.png diff --git a/apps/docs/components/.vuepress/public/thumbnails/components/LoaderLinear.png b/apps/docs-old/components/.vuepress/public/thumbnails/components/LoaderLinear.png similarity index 100% rename from apps/docs/components/.vuepress/public/thumbnails/components/LoaderLinear.png rename to apps/docs-old/components/.vuepress/public/thumbnails/components/LoaderLinear.png diff --git a/apps/docs/components/.vuepress/public/thumbnails/components/Modal.png b/apps/docs-old/components/.vuepress/public/thumbnails/components/Modal.png similarity index 100% rename from apps/docs/components/.vuepress/public/thumbnails/components/Modal.png rename to apps/docs-old/components/.vuepress/public/thumbnails/components/Modal.png diff --git a/apps/docs/components/.vuepress/public/thumbnails/components/ProgressCircular.png b/apps/docs-old/components/.vuepress/public/thumbnails/components/ProgressCircular.png similarity index 100% rename from apps/docs/components/.vuepress/public/thumbnails/components/ProgressCircular.png rename to apps/docs-old/components/.vuepress/public/thumbnails/components/ProgressCircular.png diff --git a/apps/docs/components/.vuepress/public/thumbnails/components/ProgressLinear.png b/apps/docs-old/components/.vuepress/public/thumbnails/components/ProgressLinear.png similarity index 100% rename from apps/docs/components/.vuepress/public/thumbnails/components/ProgressLinear.png rename to apps/docs-old/components/.vuepress/public/thumbnails/components/ProgressLinear.png diff --git a/apps/docs/components/.vuepress/public/thumbnails/components/Radio.png b/apps/docs-old/components/.vuepress/public/thumbnails/components/Radio.png similarity index 100% rename from apps/docs/components/.vuepress/public/thumbnails/components/Radio.png rename to apps/docs-old/components/.vuepress/public/thumbnails/components/Radio.png diff --git a/apps/docs/components/.vuepress/public/thumbnails/components/Rating.png b/apps/docs-old/components/.vuepress/public/thumbnails/components/Rating.png similarity index 100% rename from apps/docs/components/.vuepress/public/thumbnails/components/Rating.png rename to apps/docs-old/components/.vuepress/public/thumbnails/components/Rating.png diff --git a/apps/docs/components/.vuepress/public/thumbnails/components/RatingButton.png b/apps/docs-old/components/.vuepress/public/thumbnails/components/RatingButton.png similarity index 100% rename from apps/docs/components/.vuepress/public/thumbnails/components/RatingButton.png rename to apps/docs-old/components/.vuepress/public/thumbnails/components/RatingButton.png diff --git a/apps/docs/components/.vuepress/public/thumbnails/components/Scrollable.png b/apps/docs-old/components/.vuepress/public/thumbnails/components/Scrollable.png similarity index 100% rename from apps/docs/components/.vuepress/public/thumbnails/components/Scrollable.png rename to apps/docs-old/components/.vuepress/public/thumbnails/components/Scrollable.png diff --git a/apps/docs/components/.vuepress/public/thumbnails/components/Select.png b/apps/docs-old/components/.vuepress/public/thumbnails/components/Select.png similarity index 100% rename from apps/docs/components/.vuepress/public/thumbnails/components/Select.png rename to apps/docs-old/components/.vuepress/public/thumbnails/components/Select.png diff --git a/apps/docs/components/.vuepress/public/thumbnails/components/Switch.png b/apps/docs-old/components/.vuepress/public/thumbnails/components/Switch.png similarity index 100% rename from apps/docs/components/.vuepress/public/thumbnails/components/Switch.png rename to apps/docs-old/components/.vuepress/public/thumbnails/components/Switch.png diff --git a/apps/docs/components/.vuepress/public/thumbnails/components/Textarea.png b/apps/docs-old/components/.vuepress/public/thumbnails/components/Textarea.png similarity index 100% rename from apps/docs/components/.vuepress/public/thumbnails/components/Textarea.png rename to apps/docs-old/components/.vuepress/public/thumbnails/components/Textarea.png diff --git a/apps/docs/components/.vuepress/public/thumbnails/components/Thumbnail.png b/apps/docs-old/components/.vuepress/public/thumbnails/components/Thumbnail.png similarity index 100% rename from apps/docs/components/.vuepress/public/thumbnails/components/Thumbnail.png rename to apps/docs-old/components/.vuepress/public/thumbnails/components/Thumbnail.png diff --git a/apps/docs/components/.vuepress/public/thumbnails/components/Tooltip.png b/apps/docs-old/components/.vuepress/public/thumbnails/components/Tooltip.png similarity index 100% rename from apps/docs/components/.vuepress/public/thumbnails/components/Tooltip.png rename to apps/docs-old/components/.vuepress/public/thumbnails/components/Tooltip.png diff --git a/apps/docs/components/.vuepress/theme/global-components/AlphaBanner.vue b/apps/docs-old/components/.vuepress/theme/global-components/AlphaBanner.vue similarity index 100% rename from apps/docs/components/.vuepress/theme/global-components/AlphaBanner.vue rename to apps/docs-old/components/.vuepress/theme/global-components/AlphaBanner.vue diff --git a/apps/docs/components/.vuepress/theme/index.js b/apps/docs-old/components/.vuepress/theme/index.js similarity index 100% rename from apps/docs/components/.vuepress/theme/index.js rename to apps/docs-old/components/.vuepress/theme/index.js diff --git a/apps/docs/components/.vuepress/theme/layouts/AtomLayout.vue b/apps/docs-old/components/.vuepress/theme/layouts/AtomLayout.vue similarity index 100% rename from apps/docs/components/.vuepress/theme/layouts/AtomLayout.vue rename to apps/docs-old/components/.vuepress/theme/layouts/AtomLayout.vue diff --git a/apps/docs/components/.vuepress/theme/layouts/DefaultLayout.vue b/apps/docs-old/components/.vuepress/theme/layouts/DefaultLayout.vue similarity index 100% rename from apps/docs/components/.vuepress/theme/layouts/DefaultLayout.vue rename to apps/docs-old/components/.vuepress/theme/layouts/DefaultLayout.vue diff --git a/apps/docs/components/.vuepress/theme/layouts/HomeLayout.vue b/apps/docs-old/components/.vuepress/theme/layouts/HomeLayout.vue similarity index 100% rename from apps/docs/components/.vuepress/theme/layouts/HomeLayout.vue rename to apps/docs-old/components/.vuepress/theme/layouts/HomeLayout.vue diff --git a/apps/docs/components/.vuepress/theme/styles/index.styl b/apps/docs-old/components/.vuepress/theme/styles/index.styl similarity index 100% rename from apps/docs/components/.vuepress/theme/styles/index.styl rename to apps/docs-old/components/.vuepress/theme/styles/index.styl diff --git a/apps/docs/components/.vuepress/utils/path.util.js b/apps/docs-old/components/.vuepress/utils/path.util.js similarity index 100% rename from apps/docs/components/.vuepress/utils/path.util.js rename to apps/docs-old/components/.vuepress/utils/path.util.js diff --git a/apps/docs/components/assets/Brand_iconstorefront1.svg b/apps/docs-old/components/assets/Brand_iconstorefront1.svg similarity index 100% rename from apps/docs/components/assets/Brand_iconstorefront1.svg rename to apps/docs-old/components/assets/Brand_iconstorefront1.svg diff --git a/apps/docs/components/assets/Brand_iconstorefront2.svg b/apps/docs-old/components/assets/Brand_iconstorefront2.svg similarity index 100% rename from apps/docs/components/assets/Brand_iconstorefront2.svg rename to apps/docs-old/components/assets/Brand_iconstorefront2.svg diff --git a/apps/docs/components/assets/Brand_iconstorefront3.svg b/apps/docs-old/components/assets/Brand_iconstorefront3.svg similarity index 100% rename from apps/docs/components/assets/Brand_iconstorefront3.svg rename to apps/docs-old/components/assets/Brand_iconstorefront3.svg diff --git a/apps/docs/components/assets/Storefront-Ui-Hero.webp b/apps/docs-old/components/assets/Storefront-Ui-Hero.webp similarity index 100% rename from apps/docs/components/assets/Storefront-Ui-Hero.webp rename to apps/docs-old/components/assets/Storefront-Ui-Hero.webp diff --git a/apps/docs/components/assets/logo.svg b/apps/docs-old/components/assets/logo.svg similarity index 100% rename from apps/docs/components/assets/logo.svg rename to apps/docs-old/components/assets/logo.svg diff --git a/apps/docs/components/assets/sfui-hero.png b/apps/docs-old/components/assets/sfui-hero.png similarity index 100% rename from apps/docs/components/assets/sfui-hero.png rename to apps/docs-old/components/assets/sfui-hero.png diff --git a/apps/docs/components/blocks/Alert.md b/apps/docs-old/components/blocks/Alert.md similarity index 100% rename from apps/docs/components/blocks/Alert.md rename to apps/docs-old/components/blocks/Alert.md diff --git a/apps/docs/components/blocks/Banners.md b/apps/docs-old/components/blocks/Banners.md similarity index 100% rename from apps/docs/components/blocks/Banners.md rename to apps/docs-old/components/blocks/Banners.md diff --git a/apps/docs/components/blocks/Breadcrumbs.md b/apps/docs-old/components/blocks/Breadcrumbs.md similarity index 100% rename from apps/docs/components/blocks/Breadcrumbs.md rename to apps/docs-old/components/blocks/Breadcrumbs.md diff --git a/apps/docs/components/blocks/Card.md b/apps/docs-old/components/blocks/Card.md similarity index 100% rename from apps/docs/components/blocks/Card.md rename to apps/docs-old/components/blocks/Card.md diff --git a/apps/docs/components/blocks/Checkout.md b/apps/docs-old/components/blocks/Checkout.md similarity index 100% rename from apps/docs/components/blocks/Checkout.md rename to apps/docs-old/components/blocks/Checkout.md diff --git a/apps/docs/components/blocks/Combobox.md b/apps/docs-old/components/blocks/Combobox.md similarity index 100% rename from apps/docs/components/blocks/Combobox.md rename to apps/docs-old/components/blocks/Combobox.md diff --git a/apps/docs/components/blocks/Filters.md b/apps/docs-old/components/blocks/Filters.md similarity index 100% rename from apps/docs/components/blocks/Filters.md rename to apps/docs-old/components/blocks/Filters.md diff --git a/apps/docs/components/blocks/Footer.md b/apps/docs-old/components/blocks/Footer.md similarity index 100% rename from apps/docs/components/blocks/Footer.md rename to apps/docs-old/components/blocks/Footer.md diff --git a/apps/docs/components/blocks/FormFields.md b/apps/docs-old/components/blocks/FormFields.md similarity index 100% rename from apps/docs/components/blocks/FormFields.md rename to apps/docs-old/components/blocks/FormFields.md diff --git a/apps/docs/components/blocks/Gallery.md b/apps/docs-old/components/blocks/Gallery.md similarity index 100% rename from apps/docs/components/blocks/Gallery.md rename to apps/docs-old/components/blocks/Gallery.md diff --git a/apps/docs/components/blocks/MegaMenu.md b/apps/docs-old/components/blocks/MegaMenu.md similarity index 100% rename from apps/docs/components/blocks/MegaMenu.md rename to apps/docs-old/components/blocks/MegaMenu.md diff --git a/apps/docs/components/blocks/NavbarBottom.md b/apps/docs-old/components/blocks/NavbarBottom.md similarity index 100% rename from apps/docs/components/blocks/NavbarBottom.md rename to apps/docs-old/components/blocks/NavbarBottom.md diff --git a/apps/docs/components/blocks/NavbarTop.md b/apps/docs-old/components/blocks/NavbarTop.md similarity index 100% rename from apps/docs/components/blocks/NavbarTop.md rename to apps/docs-old/components/blocks/NavbarTop.md diff --git a/apps/docs/components/blocks/NewsletterBox.md b/apps/docs-old/components/blocks/NewsletterBox.md similarity index 100% rename from apps/docs/components/blocks/NewsletterBox.md rename to apps/docs-old/components/blocks/NewsletterBox.md diff --git a/apps/docs/components/blocks/OrderSummary.md b/apps/docs-old/components/blocks/OrderSummary.md similarity index 100% rename from apps/docs/components/blocks/OrderSummary.md rename to apps/docs-old/components/blocks/OrderSummary.md diff --git a/apps/docs/components/blocks/Pagination.md b/apps/docs-old/components/blocks/Pagination.md similarity index 100% rename from apps/docs/components/blocks/Pagination.md rename to apps/docs-old/components/blocks/Pagination.md diff --git a/apps/docs/components/blocks/ProductCard.md b/apps/docs-old/components/blocks/ProductCard.md similarity index 100% rename from apps/docs/components/blocks/ProductCard.md rename to apps/docs-old/components/blocks/ProductCard.md diff --git a/apps/docs/components/blocks/ProductSlider.md b/apps/docs-old/components/blocks/ProductSlider.md similarity index 100% rename from apps/docs/components/blocks/ProductSlider.md rename to apps/docs-old/components/blocks/ProductSlider.md diff --git a/apps/docs/components/blocks/QuantitySelector.md b/apps/docs-old/components/blocks/QuantitySelector.md similarity index 100% rename from apps/docs/components/blocks/QuantitySelector.md rename to apps/docs-old/components/blocks/QuantitySelector.md diff --git a/apps/docs/components/blocks/RatingForms.md b/apps/docs-old/components/blocks/RatingForms.md similarity index 100% rename from apps/docs/components/blocks/RatingForms.md rename to apps/docs-old/components/blocks/RatingForms.md diff --git a/apps/docs/components/blocks/Review.md b/apps/docs-old/components/blocks/Review.md similarity index 100% rename from apps/docs/components/blocks/Review.md rename to apps/docs-old/components/blocks/Review.md diff --git a/apps/docs/components/blocks/Search.md b/apps/docs-old/components/blocks/Search.md similarity index 100% rename from apps/docs/components/blocks/Search.md rename to apps/docs-old/components/blocks/Search.md diff --git a/apps/docs/components/blocks/SelectDropdown.md b/apps/docs-old/components/blocks/SelectDropdown.md similarity index 100% rename from apps/docs/components/blocks/SelectDropdown.md rename to apps/docs-old/components/blocks/SelectDropdown.md diff --git a/apps/docs/components/blocks/Tabs.md b/apps/docs-old/components/blocks/Tabs.md similarity index 100% rename from apps/docs/components/blocks/Tabs.md rename to apps/docs-old/components/blocks/Tabs.md diff --git a/apps/docs/components/components/accordionitem.md b/apps/docs-old/components/components/accordionitem.md similarity index 100% rename from apps/docs/components/components/accordionitem.md rename to apps/docs-old/components/components/accordionitem.md diff --git a/apps/docs/components/components/badge.md b/apps/docs-old/components/components/badge.md similarity index 100% rename from apps/docs/components/components/badge.md rename to apps/docs-old/components/components/badge.md diff --git a/apps/docs/components/components/button.md b/apps/docs-old/components/components/button.md similarity index 100% rename from apps/docs/components/components/button.md rename to apps/docs-old/components/components/button.md diff --git a/apps/docs/components/components/checkbox.md b/apps/docs-old/components/components/checkbox.md similarity index 100% rename from apps/docs/components/components/checkbox.md rename to apps/docs-old/components/components/checkbox.md diff --git a/apps/docs/components/components/chip.md b/apps/docs-old/components/components/chip.md similarity index 100% rename from apps/docs/components/components/chip.md rename to apps/docs-old/components/components/chip.md diff --git a/apps/docs/components/components/counter.md b/apps/docs-old/components/components/counter.md similarity index 100% rename from apps/docs/components/components/counter.md rename to apps/docs-old/components/components/counter.md diff --git a/apps/docs/components/components/drawer.md b/apps/docs-old/components/components/drawer.md similarity index 100% rename from apps/docs/components/components/drawer.md rename to apps/docs-old/components/components/drawer.md diff --git a/apps/docs/components/components/dropdown.md b/apps/docs-old/components/components/dropdown.md similarity index 100% rename from apps/docs/components/components/dropdown.md rename to apps/docs-old/components/components/dropdown.md diff --git a/apps/docs/components/components/iconbase.md b/apps/docs-old/components/components/iconbase.md similarity index 100% rename from apps/docs/components/components/iconbase.md rename to apps/docs-old/components/components/iconbase.md diff --git a/apps/docs/components/components/input.md b/apps/docs-old/components/components/input.md similarity index 100% rename from apps/docs/components/components/input.md rename to apps/docs-old/components/components/input.md diff --git a/apps/docs/components/components/link.md b/apps/docs-old/components/components/link.md similarity index 100% rename from apps/docs/components/components/link.md rename to apps/docs-old/components/components/link.md diff --git a/apps/docs/components/components/listitem.md b/apps/docs-old/components/components/listitem.md similarity index 100% rename from apps/docs/components/components/listitem.md rename to apps/docs-old/components/components/listitem.md diff --git a/apps/docs/components/components/loadercircular.md b/apps/docs-old/components/components/loadercircular.md similarity index 100% rename from apps/docs/components/components/loadercircular.md rename to apps/docs-old/components/components/loadercircular.md diff --git a/apps/docs/components/components/loaderlinear.md b/apps/docs-old/components/components/loaderlinear.md similarity index 100% rename from apps/docs/components/components/loaderlinear.md rename to apps/docs-old/components/components/loaderlinear.md diff --git a/apps/docs/components/components/modal.md b/apps/docs-old/components/components/modal.md similarity index 100% rename from apps/docs/components/components/modal.md rename to apps/docs-old/components/components/modal.md diff --git a/apps/docs/components/components/progresscircular.md b/apps/docs-old/components/components/progresscircular.md similarity index 100% rename from apps/docs/components/components/progresscircular.md rename to apps/docs-old/components/components/progresscircular.md diff --git a/apps/docs/components/components/progresslinear.md b/apps/docs-old/components/components/progresslinear.md similarity index 100% rename from apps/docs/components/components/progresslinear.md rename to apps/docs-old/components/components/progresslinear.md diff --git a/apps/docs/components/components/radio.md b/apps/docs-old/components/components/radio.md similarity index 100% rename from apps/docs/components/components/radio.md rename to apps/docs-old/components/components/radio.md diff --git a/apps/docs/components/components/rating.md b/apps/docs-old/components/components/rating.md similarity index 100% rename from apps/docs/components/components/rating.md rename to apps/docs-old/components/components/rating.md diff --git a/apps/docs/components/components/ratingbutton.md b/apps/docs-old/components/components/ratingbutton.md similarity index 100% rename from apps/docs/components/components/ratingbutton.md rename to apps/docs-old/components/components/ratingbutton.md diff --git a/apps/docs/components/components/scrollable.md b/apps/docs-old/components/components/scrollable.md similarity index 100% rename from apps/docs/components/components/scrollable.md rename to apps/docs-old/components/components/scrollable.md diff --git a/apps/docs/components/components/select.md b/apps/docs-old/components/components/select.md similarity index 100% rename from apps/docs/components/components/select.md rename to apps/docs-old/components/components/select.md diff --git a/apps/docs/components/components/switch.md b/apps/docs-old/components/components/switch.md similarity index 100% rename from apps/docs/components/components/switch.md rename to apps/docs-old/components/components/switch.md diff --git a/apps/docs/components/components/textarea.md b/apps/docs-old/components/components/textarea.md similarity index 100% rename from apps/docs/components/components/textarea.md rename to apps/docs-old/components/components/textarea.md diff --git a/apps/docs/components/components/thumbnail.md b/apps/docs-old/components/components/thumbnail.md similarity index 100% rename from apps/docs/components/components/thumbnail.md rename to apps/docs-old/components/components/thumbnail.md diff --git a/apps/docs/components/components/tooltip.md b/apps/docs-old/components/components/tooltip.md similarity index 100% rename from apps/docs/components/components/tooltip.md rename to apps/docs-old/components/components/tooltip.md diff --git a/apps/docs/components/custom-scripts/createIcons.md b/apps/docs-old/components/custom-scripts/createIcons.md similarity index 100% rename from apps/docs/components/custom-scripts/createIcons.md rename to apps/docs-old/components/custom-scripts/createIcons.md diff --git a/apps/docs/components/hooks/useDisclosure.md b/apps/docs-old/components/hooks/useDisclosure.md similarity index 100% rename from apps/docs/components/hooks/useDisclosure.md rename to apps/docs-old/components/hooks/useDisclosure.md diff --git a/apps/docs/components/hooks/useDropdown.md b/apps/docs-old/components/hooks/useDropdown.md similarity index 100% rename from apps/docs/components/hooks/useDropdown.md rename to apps/docs-old/components/hooks/useDropdown.md diff --git a/apps/docs/components/hooks/useFocusVisible.md b/apps/docs-old/components/hooks/useFocusVisible.md similarity index 100% rename from apps/docs/components/hooks/useFocusVisible.md rename to apps/docs-old/components/hooks/useFocusVisible.md diff --git a/apps/docs/components/hooks/usePagination.md b/apps/docs-old/components/hooks/usePagination.md similarity index 100% rename from apps/docs/components/hooks/usePagination.md rename to apps/docs-old/components/hooks/usePagination.md diff --git a/apps/docs/components/hooks/usePopover.md b/apps/docs-old/components/hooks/usePopover.md similarity index 100% rename from apps/docs/components/hooks/usePopover.md rename to apps/docs-old/components/hooks/usePopover.md diff --git a/apps/docs/components/hooks/useScrollable.md b/apps/docs-old/components/hooks/useScrollable.md similarity index 100% rename from apps/docs/components/hooks/useScrollable.md rename to apps/docs-old/components/hooks/useScrollable.md diff --git a/apps/docs/components/hooks/useTooltip.md b/apps/docs-old/components/hooks/useTooltip.md similarity index 100% rename from apps/docs/components/hooks/useTooltip.md rename to apps/docs-old/components/hooks/useTooltip.md diff --git a/apps/docs/components/hooks/useTrapFocus.md b/apps/docs-old/components/hooks/useTrapFocus.md similarity index 100% rename from apps/docs/components/hooks/useTrapFocus.md rename to apps/docs-old/components/hooks/useTrapFocus.md diff --git a/apps/docs/components/index.md b/apps/docs-old/components/index.md similarity index 100% rename from apps/docs/components/index.md rename to apps/docs-old/components/index.md diff --git a/apps/docs/components/package.json b/apps/docs-old/components/package.json similarity index 100% rename from apps/docs/components/package.json rename to apps/docs-old/components/package.json diff --git a/apps/docs/components/react/blocks.md b/apps/docs-old/components/react/blocks.md similarity index 100% rename from apps/docs/components/react/blocks.md rename to apps/docs-old/components/react/blocks.md diff --git a/apps/docs-old/components/react/blocks/Alert.md b/apps/docs-old/components/react/blocks/Alert.md new file mode 100644 index 0000000000..807113ce00 --- /dev/null +++ b/apps/docs-old/components/react/blocks/Alert.md @@ -0,0 +1,57 @@ +--- +blockCount: 5 +repoPath: /blocks/Alert.md +layout: DefaultLayout +hideBreadcrumbs: true +description: Alert is a notification that keeps people informed of the status of the system and which may or not require the user respond. +hideToc: true +--- +# Alert + +{{ $frontmatter.description }} + +## Alert neutral + +Simple version of alert that has neutral grey color. + + + +<<<../../preview/next/pages/showcases/Alert/AlertNeutral.tsx#source + + + +## Alert positive + +Green color indicates that an action went successful. + + +<<<../../preview/next/pages/showcases/Alert/AlertPositive.tsx#source + + +## Alert secondary + +This type is informative just like neutral except that its palette is more noticeable. + + +<<<../../preview/next/pages/showcases/Alert/AlertSecondary.tsx#source + + +## Alert warning + +Alert can be more descriptive and its content can be splitted into title and description. + + + +<<<../../preview/next/pages/showcases/Alert/AlertWarning.tsx#source + + + +## Alert error + +This type is usually used for information displayed when an important problem occurs. + + + +<<<../../preview/next/pages/showcases/Alert/AlertError.tsx#source + + diff --git a/apps/docs-old/components/react/blocks/Banners.md b/apps/docs-old/components/react/blocks/Banners.md new file mode 100644 index 0000000000..0f8a31c64b --- /dev/null +++ b/apps/docs-old/components/react/blocks/Banners.md @@ -0,0 +1,45 @@ +--- +blockCount: 4 +repoPath: /blocks/Banners.md +layout: DefaultLayout +hideBreadcrumbs: true +description: Banners are components that deliver main image and content in various configurations. +hideToc: true +--- +# Banners + +{{ $frontmatter.description }} + +## Horizontal Display + + + +<<<../../preview/next/pages/showcases/Banners/DisplayHorizontal.tsx#source + + + +## Vertical Display + +Vertical display block with image and content below or above it. + + +<<<../../preview/next/pages/showcases/Banners/DisplayVertical.tsx#source + + +## Multiple vertical Displays + +Four vertical displays in row on desktop. + + +<<<../../preview/next/pages/showcases/Banners/DisplayVerticalMultiple.tsx#source + + +## Hero + +Hero acts like a layout for your hero section. You can provide main image and any content, as well as background images for mobile and desktop devices. + + + +<<<../../preview/next/pages/showcases/Banners/Hero.tsx#source + + diff --git a/apps/docs-old/components/react/blocks/Breadcrumbs.md b/apps/docs-old/components/react/blocks/Breadcrumbs.md new file mode 100644 index 0000000000..57fef56dc3 --- /dev/null +++ b/apps/docs-old/components/react/blocks/Breadcrumbs.md @@ -0,0 +1,33 @@ +--- +blockCount: 3 +repoPath: /blocks/Breadcrumbs.md +layout: DefaultLayout +hideBreadcrumbs: true +description: A breadcrumb trail consists of a list of links to the parent pages of the current page in hierarchical order. It helps users find their place. +hideToc: true +--- +# Breadcrumbs + +{{ $frontmatter.description }} + + + +<<<../../preview/next/pages/showcases/Breadcrumbs/Breadcrumbs.tsx#source + + + +## Breadcrumbs with icon separator + +Breadcrumbs block with icons as a item separator. + + +<<<../../preview/next/pages/showcases/Breadcrumbs/BreadcrumbsSeparator.tsx#source + + +## Breadcrumbs with home icon + +Breadcrumbs block with home icon as the first item. + + +<<<../../preview/next/pages/showcases/Breadcrumbs/BreadcrumbsWithIcon.tsx#source + diff --git a/apps/docs-old/components/react/blocks/Card.md b/apps/docs-old/components/react/blocks/Card.md new file mode 100644 index 0000000000..a39e3d6f09 --- /dev/null +++ b/apps/docs-old/components/react/blocks/Card.md @@ -0,0 +1,41 @@ +--- +blockCount: 3 +repoPath: /blocks/Card.md +layout: DefaultLayout +hideBreadcrumbs: true +description: The Card component contains content and actions that inform about a single subject. +hideToc: true +--- +# Card + +{{ $frontmatter.description }} + +## Default Card + +The default card view with a rectangle shaped image, a title, a description and a button for some additional actions. + + + +<<<../../preview/next/pages/showcases/Card/CardDefault.tsx#source + + + +## Category Card + +The category card view with a circle shaped image, and category title, clickable as the one element. + + + +<<<../../preview/next/pages/showcases/Card/CategoryCard.tsx#source + + + +## Card Feature + +This type of card has only button to interact. + + + +<<<../../preview/next/pages/showcases/Card/CardFeature.tsx#source + + diff --git a/apps/docs-old/components/react/blocks/Checkout.md b/apps/docs-old/components/react/blocks/Checkout.md new file mode 100644 index 0000000000..759649e14d --- /dev/null +++ b/apps/docs-old/components/react/blocks/Checkout.md @@ -0,0 +1,51 @@ +--- +blockCount: 4 +repoPath: /blocks/Checkout.md +layout: DefaultLayout +hideBreadcrumbs: true +description: Checkout page in one of the most important pages in e-commerce. Usually it contains information about delivery destination, shipping options and payment methods. +hideToc: true +--- +# Checkout + +{{ $frontmatter.description }} + +## Address form + +Ease the checkout process for users by providing them with well-structured address form. Form field `Street` provides you an example of how error state could be handled. + + + +<<<../../preview/next/pages/showcases/Checkout/CheckoutAddressForm.tsx#source + + + +## Delivery options + +Present possible delivery options in a way where your customers can easily see differences and choose the best one for their needs. + + + +<<<../../preview/next/pages/showcases/Checkout/CheckoutDeliveryOptions.tsx#source + + + +## Payment method + +Let your users pick a payment method of their choice in a nice and clear way. + + + +<<<../../preview/next/pages/showcases/Checkout/CheckoutPaymentMethod.tsx#source + + + +## Contact form + +The contact form for customers provides the way to send email (field with simple validation) and phone number with separate country code. + + + +<<<../../preview/next/pages/showcases/Checkout/CheckoutContactForm.tsx#source + + diff --git a/apps/docs-old/components/react/blocks/Combobox.md b/apps/docs-old/components/react/blocks/Combobox.md new file mode 100644 index 0000000000..8c1cf07fe4 --- /dev/null +++ b/apps/docs-old/components/react/blocks/Combobox.md @@ -0,0 +1,28 @@ +--- +blockCount: 1 +repoPath: /blocks/Combobox.md +layout: DefaultLayout +hideBreadcrumbs: true +description: The Combobox is a specialized input field designed for selecting options from long lists. +hideToc: true +--- + +# Combobox + +The Combobox is a specialized input field designed for selecting from the options list by typing inside. + +It allows users to speed up selecting by searching from limited number of options provided. + +## Accessibility notes + +The Combobox supports the use of the keyboard. The focus move from input field into the dropdown list and inside it is provided by arrow up/down keys. On escape key press you can go back to the input field, but when pressed inside input field it resets its content. + +## Combobox search + +The Basic Combobox block shows how to select one of the country's names from the list by clicking on the dropdown or selecting from the keyboard. + + + +<<<../../preview/next/pages/showcases/Combobox/ComboboxBasic.tsx#source + + diff --git a/apps/docs-old/components/react/blocks/Filters.md b/apps/docs-old/components/react/blocks/Filters.md new file mode 100644 index 0000000000..1ea51c64b8 --- /dev/null +++ b/apps/docs-old/components/react/blocks/Filters.md @@ -0,0 +1,87 @@ +--- +blockCount: 8 +repoPath: /blocks/Filters.md +layout: DefaultLayout +hideToc: true +hideBreadcrumbs: true +description: Product filters are a valuable tool for online shoppers to quickly and easily find the products they are looking for on e-commerce websites. +--- +# Filters + +{{ $frontmatter.description }} + +## Color + +Color filters are a type of product filter that allow online shoppers to narrow down their search results based on the color or colors of the products they are interested in. + + + +<<<../../preview/next/pages/showcases/Filters/Color.tsx#source + + +## Size + +Sizes in category pages are a feature that allows online shoppers to filter their search results based on specific sizes of products they are interested in. + + + +<<<../../preview/next/pages/showcases/Filters/Size.tsx#source + + +## Brand + +Brand in category pages are a feature that allows online shoppers to filter their search results based on specific brands of products they are interested in. + + + +<<<../../preview/next/pages/showcases/Filters/Brand.tsx#source + + +## Price + +Price in category pages are a feature that allows online shoppers to filter their search results based on price range of products they are interested in. + + + +<<<../../preview/next/pages/showcases/Filters/Price.tsx#source + + +## Sorting + +Sorting in category pages is a feature that allows online shoppers to arrange and view products on an e-commerce website based on a specific order or criteria. + + + +<<<../../preview/next/pages/showcases/Filters/Sorting.tsx#source + + + +## Category + +Category list allows users to browse and select categories of content or products. Clicking on category will navigate the user to the another page with different available subcategories. Currently selected category is marked with green highlight and check icon. The following example is build only for presentation - actual functionality must be implemented by the user. + + + +<<<../../preview/next/pages/showcases/Filters/Category.tsx#source + + + +## Rating + +Ratings allows users to filter out specific ratings of products in category. Only one at the time can be selected. + + + +<<<../../preview/next/pages/showcases/Filters/Rating.tsx#source + + + +## Filters Sidepanel + +Filters panel can be customized to suit the specific needs of different applications or user groups. It may offer simple or advanced filtering options. + + + +<<<../../preview/next/pages/showcases/Filters/FiltersSidepanel.tsx#source + + diff --git a/apps/docs-old/components/react/blocks/Footer.md b/apps/docs-old/components/react/blocks/Footer.md new file mode 100644 index 0000000000..a5f6b2a16a --- /dev/null +++ b/apps/docs-old/components/react/blocks/Footer.md @@ -0,0 +1,20 @@ +--- +blockCount: 1 +repoPath: /blocks/Footer.md +layout: DefaultLayout +hideBreadcrumbs: true +description: The Footer block is used as navigation. Usually it's at the bottom of a page and has elements like links to main information pages, contacts, social media links and links to the privacy policy documents. +hideToc: true +--- + +# Footer + +{{ $frontmatter.description }} + +## Footer basic block + + + +<<<../../preview/next/pages/showcases/Footer/FooterBasic.tsx#source + + diff --git a/apps/docs-old/components/react/blocks/Gallery.md b/apps/docs-old/components/react/blocks/Gallery.md new file mode 100644 index 0000000000..184cd73c67 --- /dev/null +++ b/apps/docs-old/components/react/blocks/Gallery.md @@ -0,0 +1,62 @@ +--- +blockCount: 4 +repoPath: /blocks/Gallery.md +layout: DefaultLayout +hideBreadcrumbs: true +description: The Gallery presents a visually appealing and user-friendly collection of images that can be conveniently viewed and navigated. +hideToc: true + +--- +# Gallery + +::: warning This is an experimental block +This block has been built on top of experimental base component. The API and structure of it might change based on user feedback. +::: + +The Gallery presents a visually appealing and user-friendly collection of images that can be conveniently viewed and navigated. Within the example block, navigation options include "previous/next" arrows and photo thumbnails, providing users with multiple ways to interact with the gallery. These navigation features can be activated through both clicks and hover actions. + +The Gallery is primarily intended for use on product pages, where it serves as an effective tool for showcasing product images. The choice between the vertical and horizontal variants should depend on the layout of the product page, ensuring optimal visual presentation. Additionally, the variant with bullets should be considered, particularly for mobile devices, as it offers a compact and easily accessible navigation format. + +## Product Gallery with vertical thumbnails + +Changing an image is provided by hover on the thumbnail or dragging the main image. There are buttons to scroll thumbnails up and down. + + + +<<<../../preview/next/pages/showcases/Gallery/GalleryVertical.tsx#source + + + +## Product Gallery with horizontal thumbnails + +Changing an image is provided by click on the thumbnail or dragging the main image. You can scroll thumbnails by click on the button. + + + +<<<../../preview/next/pages/showcases/Gallery/GalleryHorizontal.tsx#source + + + +## Product Gallery with bullets + +Changing an image is provided by click on the buttons which are visible after hovering on the main image. Currently displayed image is highlighted by the bullets below the main image. + + + +<<<../../preview/next/pages/showcases/Gallery/GalleryWithBullets.tsx#source + + + +## Product Gallery with arrow key navigation + +In this block there is added arrow key navigation. When focus is on one of the thumbnails it's possible to change currently displayed image by pressing arrow keys - arrow up and arrow right will show a next image and arrow down and arrow left will show a previous image. + + + +<<<../../preview/next/pages/showcases/Gallery/GalleryHorizontalArrowKeyNavigation.tsx#source + + + +## Accessibility notes + +The Gallery supports the use of the keyboard (Tab/alt+Tab) to navigate through images. diff --git a/apps/docs-old/components/react/blocks/MegaMenu.md b/apps/docs-old/components/react/blocks/MegaMenu.md new file mode 100644 index 0000000000..c643a6eec5 --- /dev/null +++ b/apps/docs-old/components/react/blocks/MegaMenu.md @@ -0,0 +1,37 @@ +--- +blockCount: 2 +repoPath: /blocks/MegaMenu.md +layout: DefaultLayout +hideBreadcrumbs: true +description: The MegaMenu provide a convenient way of high-level navigation to users. +hideToc: true +--- +# MegaMenu + +The MegaMenu provide a convenient way of high-level navigation to users. By default, it remains hidden to avoid interrupting the user's browsing experience. It can be activated either through a click or hover action, revealing a large drop-down menu on desktop or a side sheet on mobile devices. This expanded menu not only includes a site-map for easy navigation but also incorporates additional elements such as banners. + +The MegaMenu is particularly useful for websites that feature multiple levels of navigation and numerous subcategories. It enables users to efficiently explore and access various sections of the website, enhancing their overall browsing experience. + +## Accessibility notes + +MegaMenu complies with the WCAG guidelines for accessibility for menus and menu bars (keyboard support). Learn more on the [W3C: Menu and Menubar Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/) page. + +## Base Mega Menu + + When the user clicks on the trigger element (such as one of the menu items), the mega menu opens. On mobile screens, clicking on hamburger button will trigger a drawer opening from the left side with menu content. + + + +<<<../../preview/next/pages/showcases/MegaMenu/BaseMegaMenu.tsx#source + + + +## Mega Menu with extended navigation + +Additional navigation bar under the main header helps to find general categories. User can easily open Mega Menu for each category. When using on mobile devices side drawer provides a nice way of navigating through nested categories. + + + +<<<../../preview/next/pages/showcases/MegaMenu/MegaMenuNavigation.tsx#source + + diff --git a/apps/docs-old/components/react/blocks/NavbarBottom.md b/apps/docs-old/components/react/blocks/NavbarBottom.md new file mode 100644 index 0000000000..71345f635e --- /dev/null +++ b/apps/docs-old/components/react/blocks/NavbarBottom.md @@ -0,0 +1,39 @@ +--- +blockCount: 2 +repoPath: /blocks/blocks/NavbarBottom.md +layout: DefaultLayout +hideBreadcrumbs: true +description: NavbarBottom block is the navigation element used in mobile view. +hideToc: true +--- +# NavbarBottom + +{{ $frontmatter.description }} + +::: tip You can make the navbar items links +Each item in the navbar is an [`SfButton`](../components/button) component. This means that you can make each item a link by using the `as` prop to make it an `a`, `NextLink`, or any other element/component. [Learn more about this usage in the component documentation.](../components/button#link-as-a-button) + +```html + + Will render as an anchor tag + +``` + +::: + + +## NavbarBottom with white background + + + +<<<../../preview/next/pages/showcases/NavbarBottom/NavbarBottom.tsx#source + + + +## NavbarBottom with filled background + + + +<<<../../preview/next/pages/showcases/NavbarBottom/NavbarBottomFilled.tsx#source + + diff --git a/apps/docs-old/components/react/blocks/NavbarTop.md b/apps/docs-old/components/react/blocks/NavbarTop.md new file mode 100644 index 0000000000..d063565eea --- /dev/null +++ b/apps/docs-old/components/react/blocks/NavbarTop.md @@ -0,0 +1,28 @@ +--- +blockCount: 2 +repoPath: /blocks/NavbarTop.md +layout: DefaultLayout +hideBreadcrumbs: true +description: The NavbarTop block is used as navigation. Usually it's at the top of a page and has elements like company logo, links to main categories or a menu button, search input and action buttons that can open a cart, wishlist or login modal. +hideToc: true +--- + +# NavbarTop + +{{ $frontmatter.description }} + +## NavbarTop with white background + + + +<<<../../preview/next/pages/showcases/NavbarTop/NavbarTop.tsx#source + + + +## NavbarTop with filled background + + + +<<<../../preview/next/pages/showcases/NavbarTop/NavbarTopFilled.tsx#source + + diff --git a/apps/docs-old/components/react/blocks/NewsletterBox.md b/apps/docs-old/components/react/blocks/NewsletterBox.md new file mode 100644 index 0000000000..a0b7087c1d --- /dev/null +++ b/apps/docs-old/components/react/blocks/NewsletterBox.md @@ -0,0 +1,19 @@ +--- +blockCount: 1 +repoPath: /blocks/NewsletterBox.md +layout: DefaultLayout +hideBreadcrumbs: true +description: A NewsletterBox supports a typical e-commerce newsletter subscription process. +hideToc: true +--- +# NewsletterBox + +{{ $frontmatter.description }} + +In this example there are two types of alerts: `positive` and `negative`. The first one is shown when a valid email address is passed to the input and submitted. The second one shows up when there already was submitted exactly the same email address. + + + +<<<../../preview/next/pages/showcases/NewsletterBox/NewsletterBox.tsx#source + + diff --git a/apps/docs-old/components/react/blocks/OrderSummary.md b/apps/docs-old/components/react/blocks/OrderSummary.md new file mode 100644 index 0000000000..38394cd9d5 --- /dev/null +++ b/apps/docs-old/components/react/blocks/OrderSummary.md @@ -0,0 +1,27 @@ +--- +blockCount: 1 +repoPath: /blocks/OrderSummary.md +layout: DefaultLayout +hideBreadcrumbs: true +description: An order summary shows all order details into a consolidated view. Your customers can easily add a promo code to their order and the change will be visible immediately after applying a valid code. +hideToc: true +--- +# Order Summary + +{{ $frontmatter.description }} + +In this example there are two types of alerts: `positive` and `error`. +The first one is shown in two cases: +- when a valid promo code - `VSF2020` is passed to the input and applied by clicking on the `Apply` button, +- when added promo code has been removed. +The second alert shows up when passed promo code is not valid. + +:::tip +In order to apply valid promo code use: `VSF2020`. +::: + + + +<<<../../preview/next/pages/showcases/OrderSummary/OrderSummary.tsx#source + + diff --git a/apps/docs-old/components/react/blocks/Pagination.md b/apps/docs-old/components/react/blocks/Pagination.md new file mode 100644 index 0000000000..184390dbc1 --- /dev/null +++ b/apps/docs-old/components/react/blocks/Pagination.md @@ -0,0 +1,21 @@ +--- +blockCount: 1 +repoPath: /blocks/Pagination.md +layout: DefaultLayout +hideBreadcrumbs: true +description: Pagination component is a common element to navigate through pages containing many items like products in lists. +hideToc: true +--- +# Pagination + +{{ $frontmatter.description }} + +## Pagination + +It is a good idea to use pagination when there are lots of elements to show on the page. + + + +<<<../../preview/next/pages/showcases/Pagination/Pagination.tsx#source + + diff --git a/apps/docs-old/components/react/blocks/ProductCard.md b/apps/docs-old/components/react/blocks/ProductCard.md new file mode 100644 index 0000000000..ca5428d0de --- /dev/null +++ b/apps/docs-old/components/react/blocks/ProductCard.md @@ -0,0 +1,41 @@ +--- +blockCount: 3 +repoPath: /blocks/ProductCard.md +layout: DefaultLayout +hideBreadcrumbs: true +description: Product Card usage blocks. +hideToc: true +--- +# ProductCard + +{{ $frontmatter.description }} + +## ProductCard Vertical + +The most popular option for presenting detailed product information in a group. + + + +<<<../../preview/next/pages/showcases/ProductCard/ProductCardVertical.tsx#source + + + +## ProductCard Horizontal + +Present products in checkout summary in a way that customers can have an easy access to increase, decrease and remove particular product. + + + +<<<../../preview/next/pages/showcases/ProductCard/ProductCardHorizontal.tsx#source + + + +## Details + +ProductCard details can be used in product details page or to build component used for listing products of many categories. + + + +<<<../../preview/next/pages/showcases/ProductCard/Details.tsx#source + + diff --git a/apps/docs-old/components/react/blocks/QuantitySelector.md b/apps/docs-old/components/react/blocks/QuantitySelector.md new file mode 100644 index 0000000000..574f754a1d --- /dev/null +++ b/apps/docs-old/components/react/blocks/QuantitySelector.md @@ -0,0 +1,35 @@ +--- +blockCount: 3 +repoPath: /blocks/QuantitySelector.md +layout: DefaultLayout +hideBreadcrumbs: true +description: QuantitySelector allows the selection of a numeric value and the display of any additional information needed. +hideToc: true +--- +# QuantitySelector + +{{ $frontmatter.description }} + +## Basic usage + + + +<<<../../preview/next/pages/showcases/QuantitySelector/QuantitySelector.tsx#source + + + +## With rounded buttons + + + +<<<../../preview/next/pages/showcases/QuantitySelector/Rounded.tsx#source + + + +## Out of stock + + + +<<<../../preview/next/pages/showcases/QuantitySelector/OutOfStock.tsx#source + + diff --git a/apps/docs-old/components/react/blocks/Review.md b/apps/docs-old/components/react/blocks/Review.md new file mode 100644 index 0000000000..1e817ad73d --- /dev/null +++ b/apps/docs-old/components/react/blocks/Review.md @@ -0,0 +1,31 @@ +--- +blockCount: 2 +repoPath: /blocks/Review.md +layout: DefaultLayout +hideBreadcrumbs: true +description: Block for displaying user opinion. +hideToc: true +--- +# Review + +{{ $frontmatter.description }} + +## With Avatar + +Basic Review usage with avatar and [Rating](/vue/components/rating.html) base component. + + + +<<<../../preview/next/pages/showcases/Review/WithAvatar.tsx#source + + + +## Truncate/show more + +When description is too long we can truncate it for certain count characters. + + + +<<<../../preview/next/pages/showcases/Review/ShowMore.tsx#source + + diff --git a/apps/docs-old/components/react/blocks/Search.md b/apps/docs-old/components/react/blocks/Search.md new file mode 100644 index 0000000000..05f2b362fa --- /dev/null +++ b/apps/docs-old/components/react/blocks/Search.md @@ -0,0 +1,48 @@ +--- +blockCount: 3 +repoPath: /blocks/Search.md +layout: DefaultLayout +hideBreadcrumbs: true +description: The Search is a specialized input field designed for text-based searching on a website. +hideToc: true +--- + +# Search + +The Search is a specialized input field designed for text-based searching on a website. In the provided example, the block includes an additional feature that displays live hints suggestions (autocomplete) as the user types. + +The Search input is primarily utilized in the global navigation (see NavBarTop block). However, variants without autocomplete functionality are commonly employed on results pages. + +## Accessibility notes + +The Search fully supports the use of the keyboard. The transition from the search input to the hints list is handled by Tab key. + +## Basic search + +Simple search with an autocomplete functionality. Give your users hints of what they may look for. In this example we use mock autocomplete example, make sure you provide real data. + + + +<<<../../preview/next/pages/showcases/Search/SearchBasic.tsx#source + + + +## Search with custom icon + +This block enhances search functionality with a custom icon and categorized result suggestions. + + + +<<<../../preview/next/pages/showcases/Search/SearchWithIcon.tsx#source + + + +## Search with custom button + +This block enhances search functionality with a custom button, categorized result suggestions and thumbnails. + + + +<<<../../preview/next/pages/showcases/Search/SearchWithButton.tsx#source + + diff --git a/apps/docs-old/components/react/blocks/SelectDropdown.md b/apps/docs-old/components/react/blocks/SelectDropdown.md new file mode 100644 index 0000000000..6c2baa9d36 --- /dev/null +++ b/apps/docs-old/components/react/blocks/SelectDropdown.md @@ -0,0 +1,65 @@ +--- +blockCount: 5 +repoPath: /blocks/SelectDropdown.md +layout: DefaultLayout +hideBreadcrumbs: true +description: The SelectDropdown is a visually customized version of the Select component, eliminating the reliance on the native "select" HTML tag. +hideToc: true +--- +# Select Dropdown + +The SelectDropdown is a visually customized version of the Select component, eliminating the reliance on the native "select" HTML tag. Despite the stylistic changes, the functionality of the component remains unchanged, allowing users to make a single selection from a dropdown list. The input can be marked as required and may include hints or additional information. + +Please note that the example block provided can also serve as a base component, offering flexibility for implementation within the project based on specific requirements and design considerations. + +## Accessibility notes + +The SelectDropdown fully supports the use of the keyboard. + +## Basic usage + +Select Dropdown with preselected option. + + + +<<<../../preview/next/pages/showcases/SelectDropdown/SelectDropdownPreselected.tsx#source + + + +## With placeholder + +Adding placeholder might be helpful and informative for end users. + + +<<<../../preview/next/pages/showcases/SelectDropdown/SelectDropdownWithPlaceholder.tsx#source + + +## With required text + +By adding a sublabel, the user can easily see if this field is required. Remember to add `aria-required` to help users that use assistive technologies. + + + +<<<../../preview/next/pages/showcases/SelectDropdown/SelectDropdownRequired.tsx#source + + + +## Invalid state + +Provide visual cues for end users to indicate occuring error. + + + +<<<../../preview/next/pages/showcases/SelectDropdown/SelectDropdownError.tsx#source + + + +## Disabled state + +Differentiate disabled state to smooth UX experience. In such case, keyboard navigation becomes disabled as well and an `aria-disabled="true"` is specified for better accessibility. + + + +<<<../../preview/next/pages/showcases/SelectDropdown/SelectDropdownDisabled.tsx#source + + diff --git a/apps/docs/components/vue/browser-support.md b/apps/docs-old/components/react/browser-support.md similarity index 100% rename from apps/docs/components/vue/browser-support.md rename to apps/docs-old/components/react/browser-support.md diff --git a/apps/docs/components/react/components.md b/apps/docs-old/components/react/components.md similarity index 100% rename from apps/docs/components/react/components.md rename to apps/docs-old/components/react/components.md diff --git a/apps/docs-old/components/react/components/accordionitem.md b/apps/docs-old/components/react/components/accordionitem.md new file mode 100644 index 0000000000..f164ea6b41 --- /dev/null +++ b/apps/docs-old/components/react/components/accordionitem.md @@ -0,0 +1,73 @@ +--- +repoPath: /components/accordionitem.md +layout: AtomLayout +hideBreadcrumbs: true +--- + +# AccordionItem + +:::::: slot usage + +The `SfAccordionItem` component is a wrapper around the native `
` and `` HTML elements. It allows you to create an accordion component that expands and collapses content. + +The root element of this component is `
`, and any attributes that you apply onto the `SfAccordionItem` component will be passed to the `
` element. The one exception is the `onToggle` attribute. The component prevents the native browser behavior and implements its own `onToggle` handler. + +::: read-more +See all of the attributes that you can pass to `
` in the [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details). +::: + +## Examples + +### Basic Accordion + +To control the state of the accordion, you can use the `open` prop. This prop is a boolean that indicates whether the accordion is open or closed. + + + +<<<../../preview/next/pages/showcases/AccordionItem/BasicAccordion.tsx#source + + + +### Accordion Group + +This example only allows one item to be open at a time. + + + +<<<../../preview/next/pages/showcases/AccordionItem/CollapsableAccordion.tsx#source + + + +## Accessibility Notes + +Since `SfAccordion` uses `
` and `` HTML elements, it inherits all of their accessibility features. + +For example, `` elements are focusable and can be activated by pressing the `Enter` or `Space` keys. + +## Playground + + + +:::::: + +::: slot api + +## Props + +| Prop name | Type | Default value | Possible values | +| ----------------- | ------------------------- | ------------- | --------------- | +| `open` | `boolean` | false | | +| `summaryClassName` | `string` | | | +| `onToggle` | `(open: boolean) => void` | | | +| `children` | `ReactNode` | | | + + +::: + +::: slot source + +## Source code + +<<<../../../packages/sfui/frameworks/react/components/SfAccordionItem/SfAccordionItem.tsx + +::: diff --git a/apps/docs-old/components/react/components/badge.md b/apps/docs-old/components/react/components/badge.md new file mode 100644 index 0000000000..c0518500a1 --- /dev/null +++ b/apps/docs-old/components/react/components/badge.md @@ -0,0 +1,71 @@ +--- +repoPath: /components/badge.md +layout: AtomLayout +hideBreadcrumbs: true +--- + +# Badge + +::: slot usage + +## Examples + +### Basic usage + +The badge component must be wrapped with a container that has `class="relative"`. You must provide such a container by yourself, but it gives you the flexibility to put the badge wherever you want. Bagde comes with a "dot" variant, which hides the content. When given content is of type number (or string that could be parsed to number), you can set a maximum limit of that number using `max` prop. + + +<<<../../preview/next/pages/showcases/Badge/BadgeBasic.tsx#source + + +### Placement + +You can align the Badge in every corner of the container. + + +<<<../../preview/next/pages/showcases/Badge/BadgePlacement.tsx#source + + +### Custom outline + +A nifty effect that makes the Badge a bit more attractive is to add an outline that separates the Badge from an element. + + +<<<../../preview/next/pages/showcases/Badge/BadgeOutline.tsx#source + + +### Avatars + +A common use case for the Badge is to place it on a user's avatar. + + +<<<../../preview/next/pages/showcases/Badge/BadgeAvatar.tsx#source + + +## Playground + + + +::: + +::: slot api + +## Props + +| Prop name | Type | Default value | Possible values | +| ----------- | ------------------ | ------------- | ------------------------------------------------------ | +| `content` | `string | number` | | +| `max` | `number` | `99` | | +| `placement` | `SfBadgePlacement` | `top-right` | `top-right`, `top-left`, `bottom-right`, `bottom-left` | +| `variant` | `SfBadgeVariant` | `standard` | `standard`, `dot` | + +::: + +::: slot source + + + +<<<../../../packages/sfui/frameworks/react/components/SfBadge/SfBadge.tsx + + +::: diff --git a/apps/docs-old/components/react/components/button.md b/apps/docs-old/components/react/components/button.md new file mode 100644 index 0000000000..27b709d68b --- /dev/null +++ b/apps/docs-old/components/react/components/button.md @@ -0,0 +1,108 @@ +--- +repoPath: /components/button.md +layout: AtomLayout +hideBreadcrumbs: true +--- + +# Button + +:::::: slot usage + +`SfButton` is an input that allows for user-triggered actions when clicked or pressed. This can be used for submitting forms, opening/closing dialogs, and much more. + +## Examples + +### Button sizes + +`SfButton` supports 3 sizes that can be set with the `size` prop: `'sm'`, `'base'`, `'lg'`. + + + +<<<../../preview/next/pages/showcases/Button/ButtonSizes.tsx#source + + +### Button variants + +`SfButton` supports 3 style variants that can be set via `variant` prop: `'primary'`, `'secondary'`, `'tertiary'`. + + + +<<<../../preview/next/pages/showcases/Button/ButtonVariants.tsx#source + + +### Button as a link + +This component can be used as a link (or any other tag) that can be set via `as` prop. + + + +<<<../../preview/next/pages/showcases/Button/ButtonAsLink.tsx#source + + +### Button block + +You can create a full-width button with Tailwind's `w-full` class. + + + +<<<../../preview/next/pages/showcases/Button/ButtonBlock.tsx#source + + +### Button truncation + +You can truncate button content with Tailwind using `max-w-` and `truncate` classes. + + + +<<<../../preview/next/pages/showcases/Button/ButtonTruncation.tsx#source + + +### Button content + +`SfButton` provides `slotPrefix` and `slotSuffix` props that you can use to add custom content before/after your default content. This can be useful for adding icons or badges to your buttons. + + + +<<<../../preview/next/pages/showcases/Button/ButtonContent.tsx#source + + +## Accessibility notes + +Button component can be rendered as ` + + + )} + {startPage > 2 && ( +
  • +
    + +
    +
    • + )} + {pages.map((page: number) => ( + <> + {maxVisiblePages === 1 && selectedPage === totalPages && ( +
  • +
    + +
    +
    • + )} +
  • +
    + +
    +
    • + {maxVisiblePages === 1 && selectedPage === 1 && ( +
  • +
    + +
    +
    • + )} + + ))} + {endPage < totalPages - 1 && ( +
  • +
    + +
    +
    • + )} + {!pages.find((page: number) => page === totalPages) && ( +
  • +
    + +
    +
    • + )} + + = totalPages} + variant="tertiary" + slotSuffix={} + onClick={() => next()} + /> + + ); +} +``` + + +:::::: + +::: slot api + +## Parameters + +Listed parameters should be passed as object. + +| Name | Type | Default value | Description | +| --------- | --------------------- | ------------- | ------------------------------------------- | +| totalItems\* | `number` | | total number of items to be be displayed | +| currentPage | `number` | `1` | current active page | +| pageSize | `number` | `10` | number of items per page | +| maxPages | `number` | `1` | maximum number of pages to display** | + +**there is an additional page displayed when the default number (`1`) is passed. When the current number is `1` then page `2` and the last pages are visible. When the penultimate page is the current one then pages `1` and the last one are visible. + + +## Return value + +| Name | Type | Default value | Description | +| --------- | -------------- | ------------- | ------------------------------------------- | +| totalPages | `number` | | total number of pages | +| maxVisiblePages | `number` | | total number of pages | +| itemsPerPage | `number` | | total number of pages | +| pages | `number[]` | | array of displayed pages | +| selectedPage | `number` | | current page | +| endPage | `number` | | number of the last page from displayed pages | +| startPage | `number` | | number of the first page from displayed pages | +| next | `function` | | triggers jump to next page | +| prev | `function` | | triggers jump to previous page | +| setPage | `function` | | triggers jump to page number passed as parameter | + +::: + +::: slot source + + +<<<../../../packages/sfui/frameworks/react/hooks/usePagination/usePagination.ts + + +::: diff --git a/apps/docs-old/components/react/hooks/usePopover.md b/apps/docs-old/components/react/hooks/usePopover.md new file mode 100644 index 0000000000..7407646fff --- /dev/null +++ b/apps/docs-old/components/react/hooks/usePopover.md @@ -0,0 +1,88 @@ +--- +repoPath: /hooks/usePopover.md +layout: AtomLayout +hideBreadcrumbs: true +description: Position and control any type of floating element. +--- + +# usePopover + +:::::: slot usage + +`usePopover` is a wrapper around the [Floating UI library](https://floating-ui.com/docs/react). It provides an API for positioning floating elements next to reference elements. This can be useful for creating tooltips, dropdowns, popovers, and other floating elements. + +## Usage + +Simple Tooltip component example built on top of the `usePopover` hook. + + + +For a minimal example, we can implement a floating element using two properties returned by the `usePopover` hook. + +1. `refs` - An object that contains a `setReference` and `setFloating` function. These functions should be bound to the element that the floating element will be positioned relative to and the floating element itself, respectively. +2. `style` - An object containing the position styles for your floating element. + +By binding these properties to the appropriate elements, we can create any floating element - in this case, we have a Tooltip that displays when the reference element is hovered. + + + +```tsx +import * as React from 'react'; +import { usePopover } from '@storefront-ui/react'; + +interface TooltipProps { + children?: React.ReactNode; + text?: string; +} + +function Tooltip({ children, text }: TooltipProps) { + const [isOpen, setOpen] = React.useState(false); + const { refs, style } = usePopover({ isOpen }); + + return ( + setOpen(true)} onMouseLeave={() => setOpen(false)}> + {children} + {isOpen && ( +
    + {text} +
    + )} +     + ); +} +``` +     + +:::tip There are more options! +For a full list of the possible parameters and return values, see the API section. +::: + +:::::: + +::: slot api + +## Parameters + +| Name | Type | Default value | Description | +| --------- | ------------------------ | ------------- | ----------------------------------------- | +| isOpen | `boolean` | `false` | Recalculates position when isOpen is true | +| placement | `SfPopoverPlacement` | 'bottom' | Placement of floating element | +| middleware | `UseFloatingProps['middleware']` | | Array of `@floating-ui` middlewares | +| strategy | `SfPopoverStrategy` | 'absolute' | Positioning strategy (absolute or fixed) | + +## Return value + +| Name | Type | Default value | Description | +| ----- | -------------- | ------------- | ----------- | +| style | `Object` | | Styles object for positioning the floating element | +| middlewareData | `MiddlewareData` | | MiddlewareData coming from @floating-ui | +| refs | `Object` | | Element refs setters & getters | +::: + +::: slot source + + +<<<../../../packages/sfui/frameworks/react/hooks/usePopover/usePopover.ts + + +::: diff --git a/apps/docs-old/components/react/hooks/useScrollable.md b/apps/docs-old/components/react/hooks/useScrollable.md new file mode 100644 index 0000000000..755d2967ab --- /dev/null +++ b/apps/docs-old/components/react/hooks/useScrollable.md @@ -0,0 +1,130 @@ +--- +repoPath: /hooks/useScrollable.md +layout: AtomLayout +hideBreadcrumbs: true +description: An easy to use function for creating scrollable slider. +--- + +# useScrollable + +::: warning This is an experimental component +This component is shipped in our NPM package, but its API might change based on user feedback. +::: + +:::::: slot usage + +`useScrollable` gives possibility to create slider scrollable with e.g thumbnails. + +With this hook user don't need to worry about handling `previous` or `next` methods which scroll through scrollable. + +## Usage + +### Base Usage + +To use `useScrollable` attach `containerRef` to the main container to identify the element that will watch for specific events. Additionally, create two buttons for showing next nad previous elements and apply `getPrevButtonProps` and `getNextButtonProps` to each button accordingly. + + + +```tsx +import * as React from 'react'; +import { useScrollable } from '@storefront-ui/react'; + +function BasicScrollable(props: Props) { + const { containerRef, state, getNextButtonProps, getPrevButtonProps } = useScrollable(); + + return ( +
    + +
    + {Array.from({ length: itemsLength }, (_, i) => ( +
    + thumbnail {i + 1} +
    + ))} +
    + +
    + ); +} +``` +     + + +### Controlled showing next and previous elements + +`useScrollable exposes imperative methods for showing elements - `showNext` and `showPrev`. To make them work, user needs to bind these functions as `onClick` handler. + + + +```tsx +import * as React from 'react'; +import { useScrollable } from '@storefront-ui/react'; + +function BasicScrollable(props: Props) { + const { containerRef, state, showNext, showPrev } = useScrollable(); + + return ( +
    + +
    + {Array.from({ length: itemsLength }, (_, i) => ( +
    + thumbnail {i + 1} +
    + ))} +
    + +
    + ); +} +``` +     + +:::::: + +::: slot api + +## Parameters + +| Name | Type | Default value | Description | +| --------- | --------------------- | ------------- | ----------- | +| options | `ScrollableOptions` | `{}` | Object with multiple options | + +## UseScrollable Options | + +| Name | Type | Default value | Description | +| --------------- | -------------- | ------------- | ----------- | +| activeIndex | `number` | | When specified scroll to given item index | +| reduceMotion | `boolean` | | Option for [`scrollTo`](https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo) behavior, when `true` is `auto`, when `false` is `smooth` | +| drag | `{ sensitivity: number; } | boolean` | | Gives possibility to specifiy intensity of dragging experience or disabling it | +| direction | `SfScrollableDirection` | `horizontal` | Set orientation of scrollable `vertical` or `horizontal` | +| onDragStart | `(data: SfScrollableOnDragStartData) => void` | | Callback when drag starts | +| onDragEnd | `(data: SfScrollableOnDragStartData) => void` | | Callback when drag ends | +| onScroll | `(data: SfScrollableOnScrollData) => void` | | Callback when any scroll happens | +| onPrev | `(data: SfScrollableOnPrevData) => void` | | Callback when previous button is clicked | +| onNext | `(data: SfScrollableOnNextData) => void` | | Callback when next button is clicked | + +## Return value + +| Name | Type | Default value | Description | +| --------- | --------------------- | ------------- | ----------- | +| state | `{hasPrev: boolean; hasNext: boolean;isDragged: boolean;}` | `{ hasPrev: false, hasNext: false, isDragged: false }` | Current state of scrollable | +| containerRef | `Ref<>` | | `Ref` to be attached on container | +| showNext | `() => void` | | Method used to show next items in the container | +| showPrev | `() => void` | | Method used to show previous items in the container | +| getPrevButtonProps | `Function` | | Function to be attached onto previous button | +| getNextButtonProps | `Function` | | Function to be attached onto next button | + +::: + +::: slot source + + +<<<../../../packages/sfui/frameworks/react/hooks/useScrollable/useScrollable.ts + + +::: diff --git a/apps/docs-old/components/react/hooks/useTooltip.md b/apps/docs-old/components/react/hooks/useTooltip.md new file mode 100644 index 0000000000..001f0c846c --- /dev/null +++ b/apps/docs-old/components/react/hooks/useTooltip.md @@ -0,0 +1,104 @@ +--- +repoPath: /hooks/useTooltip.md +layout: AtomLayout +hideBreadcrumbs: true +description: A wrapper for usePopover with additional features for creating tooltips. +--- + +# useTooltip + +::: slot usage + +`useTooltip` is a wrapper around `usePopover` that adds specific behavior for displaying tooltips. For example, the tooltip will automatically hide/show depending on the hover state of a given element. + +## Usage + + + +To implement a tooltip, we can use the `useTooltip` hook to create a custom tooltip component. This hook returns a set of properties that can be used to build a custom tooltip component. For a minimal example, we can implement a tooltip using the following properties: + +1. `refs` - An object that contains a `floating` property that should be placed on your tooltip content +2. `isOpen` - A boolean that indicates whether or not the tooltip should be open +3. `getTriggerProps` - A function that returns the props that should be placed on the trigger element (the element that the tooltip will be positioned relative to) +4. `getTooltipProps` - A function that returns the props that should be placed on the tooltip element +5. `getArrowProps` - A function that returns the props that should be placed on the tooltip arrow element + +So if we wanted to build a custom tooltip with `Transition`, we could do something like this: +```tsx +import * as React from 'react'; +import { useTooltip } from '@storefront-ui/react'; +import { Transition } from 'react-transition-group'; + +const transitionStyles = { + entering: { opacity: 1 }, + entered: { opacity: 1 }, + exiting: { opacity: 0 }, + exited: { opacity: 0 }, +}; + +interface Props { + children?: React.ReactNode; + label?: string; +} + +function CustomTooltip(props: Props) { + const { children, label } = props; + const { refs, isOpen, getTriggerProps, getTooltipProps, getArrowProps } = useTooltip(); + + return ( + + {children}< + + {(state) => ( +
    + {label} + +
    + )} +     +     + ); +} +``` + +::: + +::: slot api + +## Parameters + +| Name | Type | Default value | Description | +| --------- | --------------------- | ------------- | ----------- | +| arrowSize | `CSSLength` | '6px' | Size of arrow in any of CSS length units (px, rem, vw, etc) | +| placement | `SfPopoverPlacement` | 'bottom' | Placement of floating element | +| middleware | `UseFloatingProps['middleware']` | | Array of `@floating-ui` middlewares | +| strategy | `SfPopoverStrategy` | 'absolute' | Positioning strategy (absolute or fixed) | + +## Return value + +| Name | Type | Default value | Description | +| --------------- | -------------- | ------------- | ----------- | +| style | `StylesObject` | | Style objects for floating and arrow elements | +| isOpen | `boolean` | | | +| refs | `Object` | | Element refs setters & getters | +| getTriggerProps | `PropsGetters` | | | +| getTooltipProps | `PropsGetters` | | | +| getArrowProps | `PropsGetters` | | | +| open | `() => void` | | | +| close | `() => void` | | | +| toggle | `() => void` | | | + +::: + +::: slot source + + +<<<../../../packages/sfui/frameworks/react/hooks/useTooltip/useTooltip.ts + + +::: diff --git a/apps/docs-old/components/react/hooks/useTrapFocus.md b/apps/docs-old/components/react/hooks/useTrapFocus.md new file mode 100644 index 0000000000..da0f06b303 --- /dev/null +++ b/apps/docs-old/components/react/hooks/useTrapFocus.md @@ -0,0 +1,93 @@ +--- +repoPath: /hooks/useTrapFocus.md +layout: AtomLayout +hideBreadcrumbs: true +description: An easy to use function for creating trapping focus within an element. +--- + +# useTrapFocus + +:::::: slot usage + +`useTrapFocus` allows you to trap focus inside a specific DOM element. Focus traps are especially useful for modals, dropdown menus, and other elements that should keep focus within the element when it is open. + +This is a great way to improve the accessibility of your application because with focus traps, you can ensure that users navigating your site using only a keyboard won't accidentally interact with elements outside the focus trap. + +::: read-more +Under the hood, this hook uses `focus-trap/tabbable`. To learn more about their specific implementation and see the rules used to gather focusable elements visit the [tabbable docs](https://github.com/focus-trap/tabbable). +::: + +## Usage + +### Base Usage + +To use `useTrapFocus`, we can use `React.ref` to identify the element that we want to trap focus inside of. Then, we can pass that ref to `useTrapFocus` and whenever that element is being rendered, the focus trap will be active. + + + +```tsx +import * as React from 'react'; +import { useTrapFocus } from '@storefront-ui/react'; + +function CustomTooltip(props: Props) { + const focusTrapElementRef = React.useRef(null); + + useTrapFocus(focusTrapElementRef); + + return ( +
    + This container has Focusable anchor and another or Focusable span +
    + ); +} +``` + + + +:::::: + +:::::: slot api + +::: warning DEPRECATION +Parameter `arrowKeysOn` will be deprecated since version 2.3 and removed in next major version. +::: + +## Parameters + +| Name | Type | Default value | Description | +| --------- | --------------------- | ------------- | ----------- | +| refElement\* | `ref` | | Ref of element that focus trap will be attached | +| options | `UseTrapFocusOptions` | `{}` | Object with multiple options | + +## UseTrapFocus Options + +| Name | Type | Default value | Description | +| --------- | --------------------- | ------------- | ----------- | +| trapTabs | `boolean` | `true` | Enable/Disable trap focus on `tab`/`shift + tab` | +| arrowFocusGroupSelector | `string` | | Selector of specific group when using arrows `left`/`right`, IMPORTANT: all group elements needs to be siblings, options dedicated for slider with many items that has focusable elements inside | +| activeState | `boolean` | `true` | Mount `useTrapFocus` when active is `true` | +| initialFocus | `number | 'autofocus' | 'container'` | `0` | index number of desired focus element on init, `autofocus` for first marked element with attribute `autofocus`, `container` so `refElement` would be initially focused, `false` for disabling this option | +| arrowKeysOn | `boolean` | `false` | (deprecated) Enable/Disable possibility of using keyboard arrows `left`/`right` for jumping through focusable elements | +| arrowKeysLeftRight | `boolean` | `false` | Enable/Disable possibility of using keyboard arrows `left | up`/`right | down` for jumping through focusable elements | +| arrowKeysUpDown | `boolean` | `false` | Enable/Disable possibility of using keyboard arrows `up`/`down` for jumping through focusable elements | +| initialFocusContainerFallback | `boolean` | `false` | Fallback for initial focus | + +## Return value + +| Name | Type | Default value | Description | +| --------------- | -------------- | ------------- | ----------- | +| current | `Element` | | Currently focused element | +| focusables | `Element[]` | | All available focusable elements within container | +| focusPrev | `() => void` | | When trigger jumps to previous focusable element | +| focusNext | `() => void` | | When trigger jumps to next focusable element | +| updateFocusableElements | `() => void` | | Use when you need to update focusable elements manually | + +:::::: + +::: slot source + + +<<<../../../packages/sfui/frameworks/react/hooks/useTrapFocus/useTrapFocus.ts + + +::: diff --git a/apps/docs/components/vue/migration.md b/apps/docs-old/components/react/migration.md similarity index 100% rename from apps/docs/components/vue/migration.md rename to apps/docs-old/components/react/migration.md diff --git a/apps/docs/components/tailwind.config.js b/apps/docs-old/components/tailwind.config.js similarity index 100% rename from apps/docs/components/tailwind.config.js rename to apps/docs-old/components/tailwind.config.js diff --git a/apps/docs-old/components/utils/blocks.json b/apps/docs-old/components/utils/blocks.json new file mode 100644 index 0000000000..6e67b10a49 --- /dev/null +++ b/apps/docs-old/components/utils/blocks.json @@ -0,0 +1,46 @@ +{ + "vue": [ + "Alert", + "Banners", + "Breadcrumbs", + "Card", + "Checkout", + "Combobox", + "Filters", + "Footer", + "Gallery", + "MegaMenu", + "NavbarBottom", + "NavbarTop", + "NewsletterBox", + "OrderSummary", + "Pagination", + "ProductCard", + "QuantitySelector", + "Review", + "Search", + "SelectDropdown" + ], + "react": [ + "Alert", + "Banners", + "Breadcrumbs", + "Card", + "Checkout", + "Combobox", + "Filters", + "Footer", + "Gallery", + "MegaMenu", + "NavbarBottom", + "NavbarTop", + "NewsletterBox", + "OrderSummary", + "Pagination", + "ProductCard", + "QuantitySelector", + "Review", + "Search", + "SelectDropdown" + ] +} \ No newline at end of file diff --git a/apps/docs-old/components/utils/components.json b/apps/docs-old/components/utils/components.json new file mode 100644 index 0000000000..2517539f3c --- /dev/null +++ b/apps/docs-old/components/utils/components.json @@ -0,0 +1,54 @@ +{ + "vue": [ + "SfAccordionItem", + "SfBadge", + "SfButton", + "SfCheckbox", + "SfChip", + "SfCounter", + "SfDrawer", + "SfDropdown", + "SfIconBase", + "SfInput", + "SfLink", + "SfListItem", + "SfLoaderCircular", + "SfLoaderLinear", + "SfModal", + "SfProgressCircular", + "SfProgressLinear", + "SfRadio", + "SfRating", + "SfScrollable", + "SfSelect", + "SfSwitch", + "SfThumbnail", + "SfTooltip" + ], + "react": [ + "SfAccordionItem", + "SfBadge", + "SfButton", + "SfCheckbox", + "SfChip", + "SfCounter", + "SfDrawer", + "SfDropdown", + "SfIconBase", + "SfInput", + "SfLink", + "SfListItem", + "SfLoaderCircular", + "SfLoaderLinear", + "SfModal", + "SfProgressCircular", + "SfProgressLinear", + "SfRadio", + "SfRating", + "SfScrollable", + "SfSelect", + "SfSwitch", + "SfThumbnail", + "SfTooltip" + ] +} \ No newline at end of file diff --git a/apps/docs/components/utils/createComponentList.js b/apps/docs-old/components/utils/createComponentList.js similarity index 100% rename from apps/docs/components/utils/createComponentList.js rename to apps/docs-old/components/utils/createComponentList.js diff --git a/apps/docs/components/utils/createCustomizationDocs.js b/apps/docs-old/components/utils/createCustomizationDocs.js similarity index 100% rename from apps/docs/components/utils/createCustomizationDocs.js rename to apps/docs-old/components/utils/createCustomizationDocs.js diff --git a/apps/docs/components/utils/createFrameworksDocs.js b/apps/docs-old/components/utils/createFrameworksDocs.js similarity index 100% rename from apps/docs/components/utils/createFrameworksDocs.js rename to apps/docs-old/components/utils/createFrameworksDocs.js diff --git a/apps/docs/components/utils/createHooksDocs.js b/apps/docs-old/components/utils/createHooksDocs.js similarity index 100% rename from apps/docs/components/utils/createHooksDocs.js rename to apps/docs-old/components/utils/createHooksDocs.js diff --git a/apps/docs/components/utils/createHooksList.js b/apps/docs-old/components/utils/createHooksList.js similarity index 100% rename from apps/docs/components/utils/createHooksList.js rename to apps/docs-old/components/utils/createHooksList.js diff --git a/apps/docs/components/utils/createShowcaseDocs.js b/apps/docs-old/components/utils/createShowcaseDocs.js similarity index 100% rename from apps/docs/components/utils/createShowcaseDocs.js rename to apps/docs-old/components/utils/createShowcaseDocs.js diff --git a/apps/docs/components/utils/createShowcaseList.js b/apps/docs-old/components/utils/createShowcaseList.js similarity index 100% rename from apps/docs/components/utils/createShowcaseList.js rename to apps/docs-old/components/utils/createShowcaseList.js diff --git a/apps/docs/components/utils/future-blocks.json b/apps/docs-old/components/utils/future-blocks.json similarity index 100% rename from apps/docs/components/utils/future-blocks.json rename to apps/docs-old/components/utils/future-blocks.json diff --git a/apps/docs-old/components/utils/hooks.json b/apps/docs-old/components/utils/hooks.json new file mode 100644 index 0000000000..0143b9a5d7 --- /dev/null +++ b/apps/docs-old/components/utils/hooks.json @@ -0,0 +1,22 @@ +{ + "vue": [ + "useDisclosure", + "useDropdown", + "useFocusVisible", + "usePagination", + "usePopover", + "useScrollable", + "useTooltip", + "useTrapFocus" + ], + "react": [ + "useDisclosure", + "useDropdown", + "useFocusVisible", + "usePagination", + "usePopover", + "useScrollable", + "useTooltip", + "useTrapFocus" + ] +} \ No newline at end of file diff --git a/apps/docs/components/utils/utils.js b/apps/docs-old/components/utils/utils.js similarity index 100% rename from apps/docs/components/utils/utils.js rename to apps/docs-old/components/utils/utils.js diff --git a/apps/docs/components/vue/blocks.md b/apps/docs-old/components/vue/blocks.md similarity index 100% rename from apps/docs/components/vue/blocks.md rename to apps/docs-old/components/vue/blocks.md diff --git a/apps/docs-old/components/vue/blocks/Alert.md b/apps/docs-old/components/vue/blocks/Alert.md new file mode 100644 index 0000000000..45b55b37f6 --- /dev/null +++ b/apps/docs-old/components/vue/blocks/Alert.md @@ -0,0 +1,57 @@ +--- +blockCount: 5 +repoPath: /blocks/Alert.md +layout: DefaultLayout +hideBreadcrumbs: true +description: Alert is a notification that keeps people informed of the status of the system and which may or not require the user respond. +hideToc: true +--- +# Alert + +{{ $frontmatter.description }} + +## Alert neutral + +Simple version of alert that has neutral grey color. + + + +<<<../../preview/nuxt/pages/showcases/Alert/AlertNeutral.vue + + + +## Alert positive + +Green color indicates that an action went successful. + + +<<<../../preview/nuxt/pages/showcases/Alert/AlertPositive.vue + + +## Alert secondary + +This type is informative just like neutral except that its palette is more noticeable. + + +<<<../../preview/nuxt/pages/showcases/Alert/AlertSecondary.vue + + +## Alert warning + +Alert can be more descriptive and its content can be splitted into title and description. + + + +<<<../../preview/nuxt/pages/showcases/Alert/AlertWarning.vue + + + +## Alert error + +This type is usually used for information displayed when an important problem occurs. + + + +<<<../../preview/nuxt/pages/showcases/Alert/AlertError.vue + + diff --git a/apps/docs-old/components/vue/blocks/Banners.md b/apps/docs-old/components/vue/blocks/Banners.md new file mode 100644 index 0000000000..d434402534 --- /dev/null +++ b/apps/docs-old/components/vue/blocks/Banners.md @@ -0,0 +1,45 @@ +--- +blockCount: 4 +repoPath: /blocks/Banners.md +layout: DefaultLayout +hideBreadcrumbs: true +description: Banners are components that deliver main image and content in various configurations. +hideToc: true +--- +# Banners + +{{ $frontmatter.description }} + +## Horizontal Display + + + +<<<../../preview/nuxt/pages/showcases/Banners/DisplayHorizontal.vue + + + +## Vertical Display + +Vertical display block with image and content below or above it. + + +<<<../../preview/nuxt/pages/showcases/Banners/DisplayVertical.vue + + +## Multiple vertical Displays + +Four vertical displays in row on desktop. + + +<<<../../preview/nuxt/pages/showcases/Banners/DisplayVerticalMultiple.vue + + +## Hero + +Hero acts like a layout for your hero section. You can provide main image and any content, as well as background images for mobile and desktop devices. + + + +<<<../../preview/nuxt/pages/showcases/Banners/Hero.vue + + diff --git a/apps/docs-old/components/vue/blocks/Breadcrumbs.md b/apps/docs-old/components/vue/blocks/Breadcrumbs.md new file mode 100644 index 0000000000..b98ab050bc --- /dev/null +++ b/apps/docs-old/components/vue/blocks/Breadcrumbs.md @@ -0,0 +1,33 @@ +--- +blockCount: 3 +repoPath: /blocks/Breadcrumbs.md +layout: DefaultLayout +hideBreadcrumbs: true +description: A breadcrumb trail consists of a list of links to the parent pages of the current page in hierarchical order. It helps users find their place. +hideToc: true +--- +# Breadcrumbs + +{{ $frontmatter.description }} + + + +<<<../../preview/nuxt/pages/showcases/Breadcrumbs/Breadcrumbs.vue + + + +## Breadcrumbs with icon separator + +Breadcrumbs block with icons as a item separator. + + +<<<../../preview/nuxt/pages/showcases/Breadcrumbs/BreadcrumbsSeparator.vue + + +## Breadcrumbs with home icon + +Breadcrumbs block with home icon as the first item. + + +<<<../../preview/nuxt/pages/showcases/Breadcrumbs/BreadcrumbsWithIcon.vue + diff --git a/apps/docs-old/components/vue/blocks/Card.md b/apps/docs-old/components/vue/blocks/Card.md new file mode 100644 index 0000000000..cdf991b4ba --- /dev/null +++ b/apps/docs-old/components/vue/blocks/Card.md @@ -0,0 +1,41 @@ +--- +blockCount: 3 +repoPath: /blocks/Card.md +layout: DefaultLayout +hideBreadcrumbs: true +description: The Card component contains content and actions that inform about a single subject. +hideToc: true +--- +# Card + +{{ $frontmatter.description }} + +## Default Card + +The default card view with a rectangle shaped image, a title, a description and a button for some additional actions. + + + +<<<../../preview/nuxt/pages/showcases/Card/CardDefault.vue + + + +## Category Card + +The category card view with a circle shaped image, and category title, clickable as the one element. + + + +<<<../../preview/nuxt/pages/showcases/Card/CategoryCard.vue + + + +## Card Feature + +This type of card has only button to interact. + + + +<<<../../preview/nuxt/pages/showcases/Card/CardFeature.vue + + diff --git a/apps/docs-old/components/vue/blocks/Checkout.md b/apps/docs-old/components/vue/blocks/Checkout.md new file mode 100644 index 0000000000..f58796af4c --- /dev/null +++ b/apps/docs-old/components/vue/blocks/Checkout.md @@ -0,0 +1,51 @@ +--- +blockCount: 4 +repoPath: /blocks/Checkout.md +layout: DefaultLayout +hideBreadcrumbs: true +description: Checkout page in one of the most important pages in e-commerce. Usually it contains information about delivery destination, shipping options and payment methods. +hideToc: true +--- +# Checkout + +{{ $frontmatter.description }} + +## Address form + +Ease the checkout process for users by providing them with well-structured address form. Form field `Street` provides you an example of how error state could be handled. + + + +<<<../../preview/nuxt/pages/showcases/Checkout/CheckoutAddressForm.vue + + + +## Delivery options + +Present possible delivery options in a way where your customers can easily see differences and choose the best one for their needs. + + + +<<<../../preview/nuxt/pages/showcases/Checkout/CheckoutDeliveryOptions.vue + + + +## Payment method + +Let your users pick a payment method of their choice in a nice and clear way. + + + +<<<../../preview/nuxt/pages/showcases/Checkout/CheckoutPaymentMethod.vue + + + +## Contact form + +The contact form for customers provides the way to send email (field with simple validation) and phone number with separate country code. + + + +<<<../../preview/nuxt/pages/showcases/Checkout/CheckoutContactForm.vue + + diff --git a/apps/docs-old/components/vue/blocks/Combobox.md b/apps/docs-old/components/vue/blocks/Combobox.md new file mode 100644 index 0000000000..aff7b3965d --- /dev/null +++ b/apps/docs-old/components/vue/blocks/Combobox.md @@ -0,0 +1,28 @@ +--- +blockCount: 1 +repoPath: /blocks/Combobox.md +layout: DefaultLayout +hideBreadcrumbs: true +description: The Combobox is a specialized input field designed for selecting options from long lists. +hideToc: true +--- + +# Combobox + +The Combobox is a specialized input field designed for selecting from the options list by typing inside. + +It allows users to speed up selecting by searching from limited number of options provided. + +## Accessibility notes + +The Combobox supports the use of the keyboard. The focus move from input field into the dropdown list and inside it is provided by arrow up/down keys. On escape key press you can go back to the input field, but when pressed inside input field it resets its content. + +## Combobox search + +The Basic Combobox block shows how to select one of the country's names from the list by clicking on the dropdown or selecting from the keyboard. + + + +<<<../../preview/nuxt/pages/showcases/Combobox/ComboboxBasic.vue + + diff --git a/apps/docs-old/components/vue/blocks/Filters.md b/apps/docs-old/components/vue/blocks/Filters.md new file mode 100644 index 0000000000..f9ec899ed7 --- /dev/null +++ b/apps/docs-old/components/vue/blocks/Filters.md @@ -0,0 +1,87 @@ +--- +blockCount: 8 +repoPath: /blocks/Filters.md +layout: DefaultLayout +hideToc: true +hideBreadcrumbs: true +description: Product filters are a valuable tool for online shoppers to quickly and easily find the products they are looking for on e-commerce websites. +--- +# Filters + +{{ $frontmatter.description }} + +## Color + +Color filters are a type of product filter that allow online shoppers to narrow down their search results based on the color or colors of the products they are interested in. + + + +<<<../../preview/nuxt/pages/showcases/Filters/Color.vue + + +## Size + +Sizes in category pages are a feature that allows online shoppers to filter their search results based on specific sizes of products they are interested in. + + + +<<<../../preview/nuxt/pages/showcases/Filters/Size.vue + + +## Brand + +Brand in category pages are a feature that allows online shoppers to filter their search results based on specific brands of products they are interested in. + + + +<<<../../preview/nuxt/pages/showcases/Filters/Brand.vue + + +## Price + +Price in category pages are a feature that allows online shoppers to filter their search results based on price range of products they are interested in. + + + +<<<../../preview/nuxt/pages/showcases/Filters/Price.vue + + +## Sorting + +Sorting in category pages is a feature that allows online shoppers to arrange and view products on an e-commerce website based on a specific order or criteria. + + + +<<<../../preview/nuxt/pages/showcases/Filters/Sorting.vue + + + +## Category + +Category list allows users to browse and select categories of content or products. Clicking on category will navigate the user to the another page with different available subcategories. Currently selected category is marked with green highlight and check icon. The following example is build only for presentation - actual functionality must be implemented by the user. + + + +<<<../../preview/nuxt/pages/showcases/Filters/Category.vue + + + +## Rating + +Ratings allows users to filter out specific ratings of products in category. Only one at the time can be selected. + + + +<<<../../preview/nuxt/pages/showcases/Filters/Rating.vue + + + +## Filters Sidepanel + +Filters panel can be customized to suit the specific needs of different applications or user groups. It may offer simple or advanced filtering options. + + + +<<<../../preview/nuxt/pages/showcases/Filters/FiltersSidepanel.vue + + diff --git a/apps/docs-old/components/vue/blocks/Footer.md b/apps/docs-old/components/vue/blocks/Footer.md new file mode 100644 index 0000000000..5dff7d0b50 --- /dev/null +++ b/apps/docs-old/components/vue/blocks/Footer.md @@ -0,0 +1,20 @@ +--- +blockCount: 1 +repoPath: /blocks/Footer.md +layout: DefaultLayout +hideBreadcrumbs: true +description: The Footer block is used as navigation. Usually it's at the bottom of a page and has elements like links to main information pages, contacts, social media links and links to the privacy policy documents. +hideToc: true +--- + +# Footer + +{{ $frontmatter.description }} + +## Footer basic block + + + +<<<../../preview/nuxt/pages/showcases/Footer/FooterBasic.vue + + diff --git a/apps/docs-old/components/vue/blocks/Gallery.md b/apps/docs-old/components/vue/blocks/Gallery.md new file mode 100644 index 0000000000..aa1af1ffa6 --- /dev/null +++ b/apps/docs-old/components/vue/blocks/Gallery.md @@ -0,0 +1,62 @@ +--- +blockCount: 4 +repoPath: /blocks/Gallery.md +layout: DefaultLayout +hideBreadcrumbs: true +description: The Gallery presents a visually appealing and user-friendly collection of images that can be conveniently viewed and navigated. +hideToc: true + +--- +# Gallery + +::: warning This is an experimental block +This block has been built on top of experimental base component. The API and structure of it might change based on user feedback. +::: + +The Gallery presents a visually appealing and user-friendly collection of images that can be conveniently viewed and navigated. Within the example block, navigation options include "previous/next" arrows and photo thumbnails, providing users with multiple ways to interact with the gallery. These navigation features can be activated through both clicks and hover actions. + +The Gallery is primarily intended for use on product pages, where it serves as an effective tool for showcasing product images. The choice between the vertical and horizontal variants should depend on the layout of the product page, ensuring optimal visual presentation. Additionally, the variant with bullets should be considered, particularly for mobile devices, as it offers a compact and easily accessible navigation format. + +## Product Gallery with vertical thumbnails + +Changing an image is provided by hover on the thumbnail or dragging the main image. There are buttons to scroll thumbnails up and down. + + + +<<<../../preview/nuxt/pages/showcases/Gallery/GalleryVertical.vue + + + +## Product Gallery with horizontal thumbnails + +Changing an image is provided by click on the thumbnail or dragging the main image. You can scroll thumbnails by click on the button. + + + +<<<../../preview/nuxt/pages/showcases/Gallery/GalleryHorizontal.vue + + + +## Product Gallery with bullets + +Changing an image is provided by click on the buttons which are visible after hovering on the main image. Currently displayed image is highlighted by the bullets below the main image. + + + +<<<../../preview/nuxt/pages/showcases/Gallery/GalleryWithBullets.vue + + + +## Product Gallery with arrow key navigation + +In this block there is added arrow key navigation. When focus is on one of the thumbnails it's possible to change currently displayed image by pressing arrow keys - arrow up and arrow right will show a next image and arrow down and arrow left will show a previous image. + + + +<<<../../preview/nuxt/pages/showcases/Gallery/GalleryHorizontalArrowKeyNavigation.vue + + + +## Accessibility notes + +The Gallery supports the use of the keyboard (Tab/alt+Tab) to navigate through images. diff --git a/apps/docs-old/components/vue/blocks/MegaMenu.md b/apps/docs-old/components/vue/blocks/MegaMenu.md new file mode 100644 index 0000000000..e233a75efa --- /dev/null +++ b/apps/docs-old/components/vue/blocks/MegaMenu.md @@ -0,0 +1,37 @@ +--- +blockCount: 2 +repoPath: /blocks/MegaMenu.md +layout: DefaultLayout +hideBreadcrumbs: true +description: The MegaMenu provide a convenient way of high-level navigation to users. +hideToc: true +--- +# MegaMenu + +The MegaMenu provide a convenient way of high-level navigation to users. By default, it remains hidden to avoid interrupting the user's browsing experience. It can be activated either through a click or hover action, revealing a large drop-down menu on desktop or a side sheet on mobile devices. This expanded menu not only includes a site-map for easy navigation but also incorporates additional elements such as banners. + +The MegaMenu is particularly useful for websites that feature multiple levels of navigation and numerous subcategories. It enables users to efficiently explore and access various sections of the website, enhancing their overall browsing experience. + +## Accessibility notes + +MegaMenu complies with the WCAG guidelines for accessibility for menus and menu bars (keyboard support). Learn more on the [W3C: Menu and Menubar Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/) page. + +## Base Mega Menu + + When the user clicks on the trigger element (such as one of the menu items), the mega menu opens. On mobile screens, clicking on hamburger button will trigger a drawer opening from the left side with menu content. + + + +<<<../../preview/nuxt/pages/showcases/MegaMenu/BaseMegaMenu.vue + + + +## Mega Menu with extended navigation + +Additional navigation bar under the main header helps to find general categories. User can easily open Mega Menu for each category. When using on mobile devices side drawer provides a nice way of navigating through nested categories. + + + +<<<../../preview/nuxt/pages/showcases/MegaMenu/MegaMenuNavigation.vue + + diff --git a/apps/docs-old/components/vue/blocks/NavbarBottom.md b/apps/docs-old/components/vue/blocks/NavbarBottom.md new file mode 100644 index 0000000000..9fcedbc6ee --- /dev/null +++ b/apps/docs-old/components/vue/blocks/NavbarBottom.md @@ -0,0 +1,39 @@ +--- +blockCount: 2 +repoPath: /blocks/blocks/NavbarBottom.md +layout: DefaultLayout +hideBreadcrumbs: true +description: NavbarBottom block is the navigation element used in mobile view. +hideToc: true +--- +# NavbarBottom + +{{ $frontmatter.description }} + +::: tip You can make the navbar items links +Each item in the navbar is an [`SfButton`](../components/button) component. This means that you can make each item a link by using the `tag` prop to make it an `a`, `NuxtLink`, or any other element/component. [Learn more about this usage in the component documentation.](../components/button#link-as-a-button) + +```html + + Will render as an anchor tag + +``` + +::: + + +## NavbarBottom with white background + + + +<<<../../preview/nuxt/pages/showcases/NavbarBottom/NavbarBottom.vue + + + +## NavbarBottom with filled background + + + +<<<../../preview/nuxt/pages/showcases/NavbarBottom/NavbarBottomFilled.vue + + diff --git a/apps/docs-old/components/vue/blocks/NavbarTop.md b/apps/docs-old/components/vue/blocks/NavbarTop.md new file mode 100644 index 0000000000..c31dc798c7 --- /dev/null +++ b/apps/docs-old/components/vue/blocks/NavbarTop.md @@ -0,0 +1,28 @@ +--- +blockCount: 2 +repoPath: /blocks/NavbarTop.md +layout: DefaultLayout +hideBreadcrumbs: true +description: The NavbarTop block is used as navigation. Usually it's at the top of a page and has elements like company logo, links to main categories or a menu button, search input and action buttons that can open a cart, wishlist or login modal. +hideToc: true +--- + +# NavbarTop + +{{ $frontmatter.description }} + +## NavbarTop with white background + + + +<<<../../preview/nuxt/pages/showcases/NavbarTop/NavbarTop.vue + + + +## NavbarTop with filled background + + + +<<<../../preview/nuxt/pages/showcases/NavbarTop/NavbarTopFilled.vue + + diff --git a/apps/docs-old/components/vue/blocks/NewsletterBox.md b/apps/docs-old/components/vue/blocks/NewsletterBox.md new file mode 100644 index 0000000000..e4a3e77023 --- /dev/null +++ b/apps/docs-old/components/vue/blocks/NewsletterBox.md @@ -0,0 +1,19 @@ +--- +blockCount: 1 +repoPath: /blocks/NewsletterBox.md +layout: DefaultLayout +hideBreadcrumbs: true +description: A NewsletterBox supports a typical e-commerce newsletter subscription process. +hideToc: true +--- +# NewsletterBox + +{{ $frontmatter.description }} + +In this example there are two types of alerts: `positive` and `negative`. The first one is shown when a valid email address is passed to the input and submitted. The second one shows up when there already was submitted exactly the same email address. + + + +<<<../../preview/nuxt/pages/showcases/NewsletterBox/NewsletterBox.vue + + diff --git a/apps/docs-old/components/vue/blocks/OrderSummary.md b/apps/docs-old/components/vue/blocks/OrderSummary.md new file mode 100644 index 0000000000..36cac101fd --- /dev/null +++ b/apps/docs-old/components/vue/blocks/OrderSummary.md @@ -0,0 +1,27 @@ +--- +blockCount: 1 +repoPath: /blocks/OrderSummary.md +layout: DefaultLayout +hideBreadcrumbs: true +description: An order summary shows all order details into a consolidated view. Your customers can easily add a promo code to their order and the change will be visible immediately after applying a valid code. +hideToc: true +--- +# Order Summary + +{{ $frontmatter.description }} + +In this example there are two types of alerts: `positive` and `error`. +The first one is shown in two cases: +- when a valid promo code - `VSF2020` is passed to the input and applied by clicking on the `Apply` button, +- when added promo code has been removed. +The second alert shows up when passed promo code is not valid. + +:::tip +In order to apply valid promo code use: `VSF2020`. +::: + + + +<<<../../preview/nuxt/pages/showcases/OrderSummary/OrderSummary.vue + + diff --git a/apps/docs-old/components/vue/blocks/Pagination.md b/apps/docs-old/components/vue/blocks/Pagination.md new file mode 100644 index 0000000000..22c7abf91a --- /dev/null +++ b/apps/docs-old/components/vue/blocks/Pagination.md @@ -0,0 +1,21 @@ +--- +blockCount: 1 +repoPath: /blocks/Pagination.md +layout: DefaultLayout +hideBreadcrumbs: true +description: Pagination component is a common element to navigate through pages containing many items like products in lists. +hideToc: true +--- +# Pagination + +{{ $frontmatter.description }} + +## Pagination + +It is a good idea to use pagination when there are lots of elements to show on the page. + + + +<<<../../preview/nuxt/pages/showcases/Pagination/Pagination.vue + + diff --git a/apps/docs-old/components/vue/blocks/ProductCard.md b/apps/docs-old/components/vue/blocks/ProductCard.md new file mode 100644 index 0000000000..0f810c7ad9 --- /dev/null +++ b/apps/docs-old/components/vue/blocks/ProductCard.md @@ -0,0 +1,41 @@ +--- +blockCount: 3 +repoPath: /blocks/ProductCard.md +layout: DefaultLayout +hideBreadcrumbs: true +description: Product Card usage blocks. +hideToc: true +--- +# ProductCard + +{{ $frontmatter.description }} + +## ProductCard Vertical + +The most popular option for presenting detailed product information in a group. + + + +<<<../../preview/nuxt/pages/showcases/ProductCard/ProductCardVertical.vue + + + +## ProductCard Horizontal + +Present products in checkout summary in a way that customers can have an easy access to increase, decrease and remove particular product. + + + +<<<../../preview/nuxt/pages/showcases/ProductCard/ProductCardHorizontal.vue + + + +## Details + +ProductCard details can be used in product details page or to build component used for listing products of many categories. + + + +<<<../../preview/nuxt/pages/showcases/ProductCard/Details.vue + + diff --git a/apps/docs-old/components/vue/blocks/QuantitySelector.md b/apps/docs-old/components/vue/blocks/QuantitySelector.md new file mode 100644 index 0000000000..c6727dfc69 --- /dev/null +++ b/apps/docs-old/components/vue/blocks/QuantitySelector.md @@ -0,0 +1,35 @@ +--- +blockCount: 3 +repoPath: /blocks/QuantitySelector.md +layout: DefaultLayout +hideBreadcrumbs: true +description: QuantitySelector allows the selection of a numeric value and the display of any additional information needed. +hideToc: true +--- +# QuantitySelector + +{{ $frontmatter.description }} + +## Basic usage + + + +<<<../../preview/nuxt/pages/showcases/QuantitySelector/QuantitySelector.vue + + + +## With rounded buttons + + + +<<<../../preview/nuxt/pages/showcases/QuantitySelector/Rounded.vue + + + +## Out of stock + + + +<<<../../preview/nuxt/pages/showcases/QuantitySelector/OutOfStock.vue + + diff --git a/apps/docs-old/components/vue/blocks/Review.md b/apps/docs-old/components/vue/blocks/Review.md new file mode 100644 index 0000000000..9be07a9cf2 --- /dev/null +++ b/apps/docs-old/components/vue/blocks/Review.md @@ -0,0 +1,31 @@ +--- +blockCount: 2 +repoPath: /blocks/Review.md +layout: DefaultLayout +hideBreadcrumbs: true +description: Block for displaying user opinion. +hideToc: true +--- +# Review + +{{ $frontmatter.description }} + +## With Avatar + +Basic Review usage with avatar and [Rating](/vue/components/rating.html) base component. + + + +<<<../../preview/nuxt/pages/showcases/Review/WithAvatar.vue + + + +## Truncate/show more + +When description is too long we can truncate it for certain count characters. + + + +<<<../../preview/nuxt/pages/showcases/Review/ShowMore.vue + + diff --git a/apps/docs-old/components/vue/blocks/Search.md b/apps/docs-old/components/vue/blocks/Search.md new file mode 100644 index 0000000000..a188ce6d14 --- /dev/null +++ b/apps/docs-old/components/vue/blocks/Search.md @@ -0,0 +1,48 @@ +--- +blockCount: 3 +repoPath: /blocks/Search.md +layout: DefaultLayout +hideBreadcrumbs: true +description: The Search is a specialized input field designed for text-based searching on a website. +hideToc: true +--- + +# Search + +The Search is a specialized input field designed for text-based searching on a website. In the provided example, the block includes an additional feature that displays live hints suggestions (autocomplete) as the user types. + +The Search input is primarily utilized in the global navigation (see NavBarTop block). However, variants without autocomplete functionality are commonly employed on results pages. + +## Accessibility notes + +The Search fully supports the use of the keyboard. The transition from the search input to the hints list is handled by Tab key. + +## Basic search + +Simple search with an autocomplete functionality. Give your users hints of what they may look for. In this example we use mock autocomplete example, make sure you provide real data. + + + +<<<../../preview/nuxt/pages/showcases/Search/SearchBasic.vue + + + +## Search with custom icon + +This block enhances search functionality with a custom icon and categorized result suggestions. + + + +<<<../../preview/nuxt/pages/showcases/Search/SearchWithIcon.vue + + + +## Search with custom button + +This block enhances search functionality with a custom button, categorized result suggestions and thumbnails. + + + +<<<../../preview/nuxt/pages/showcases/Search/SearchWithButton.vue + + diff --git a/apps/docs-old/components/vue/blocks/SelectDropdown.md b/apps/docs-old/components/vue/blocks/SelectDropdown.md new file mode 100644 index 0000000000..172978ee9c --- /dev/null +++ b/apps/docs-old/components/vue/blocks/SelectDropdown.md @@ -0,0 +1,65 @@ +--- +blockCount: 5 +repoPath: /blocks/SelectDropdown.md +layout: DefaultLayout +hideBreadcrumbs: true +description: The SelectDropdown is a visually customized version of the Select component, eliminating the reliance on the native "select" HTML tag. +hideToc: true +--- +# Select Dropdown + +The SelectDropdown is a visually customized version of the Select component, eliminating the reliance on the native "select" HTML tag. Despite the stylistic changes, the functionality of the component remains unchanged, allowing users to make a single selection from a dropdown list. The input can be marked as required and may include hints or additional information. + +Please note that the example block provided can also serve as a base component, offering flexibility for implementation within the project based on specific requirements and design considerations. + +## Accessibility notes + +The SelectDropdown fully supports the use of the keyboard. + +## Basic usage + +Select Dropdown with preselected option. + + + +<<<../../preview/nuxt/pages/showcases/SelectDropdown/SelectDropdownPreselected.vue + + + +## With placeholder + +Adding placeholder might be helpful and informative for end users. + + +<<<../../preview/nuxt/pages/showcases/SelectDropdown/SelectDropdownWithPlaceholder.vue + + +## With required text + +By adding a sublabel, the user can easily see if this field is required. Remember to add `aria-required` to help users that use assistive technologies. + + + +<<<../../preview/nuxt/pages/showcases/SelectDropdown/SelectDropdownRequired.vue + + + +## Invalid state + +Provide visual cues for end users to indicate occuring error. + + + +<<<../../preview/nuxt/pages/showcases/SelectDropdown/SelectDropdownError.vue + + + +## Disabled state + +Differentiate disabled state to smooth UX experience. In such case, keyboard navigation becomes disabled as well and an `aria-disabled="true"` is specified for better accessibility. + + + +<<<../../preview/nuxt/pages/showcases/SelectDropdown/SelectDropdownDisabled.vue + + diff --git a/apps/docs/components/react/browser-support.md b/apps/docs-old/components/vue/browser-support.md similarity index 100% rename from apps/docs/components/react/browser-support.md rename to apps/docs-old/components/vue/browser-support.md diff --git a/apps/docs/components/vue/components.md b/apps/docs-old/components/vue/components.md similarity index 100% rename from apps/docs/components/vue/components.md rename to apps/docs-old/components/vue/components.md diff --git a/apps/docs-old/components/vue/components/accordionitem.md b/apps/docs-old/components/vue/components/accordionitem.md new file mode 100644 index 0000000000..3adec1e9be --- /dev/null +++ b/apps/docs-old/components/vue/components/accordionitem.md @@ -0,0 +1,83 @@ +--- +repoPath: /components/accordionitem.md +layout: AtomLayout +hideBreadcrumbs: true +--- + +# AccordionItem + +:::::: slot usage + +The `SfAccordionItem` component is a wrapper around the native `
    ` and `` HTML elements. It allows you to create an accordion component that expands and collapses content. + +The root element of this component is `
    `, and any attributes that you apply onto the `SfAccordionItem` component will be passed to the `
    ` element. The one exception is the `onToggle` attribute. The component prevents the native browser behavior and implements its own `onToggle` handler. + +::: read-more +See all of the attributes that you can pass to `
    ` in the [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details). +::: + +## Examples + +### Basic Accordion + +To control the state of the accordion, you can use the `modelValue` prop. This prop is a boolean that indicates whether the accordion is open or closed. + + + +<<<../../preview/nuxt/pages/showcases/AccordionItem/BasicAccordion.vue + + + +### Accordion Group + +This example only allows one item to be open at a time. + + + +<<<../../preview/nuxt/pages/showcases/AccordionItem/CollapsableAccordion.vue + + + +## Accessibility Notes + +Since `SfAccordion` uses `
    ` and `` HTML elements, it inherits all of their accessibility features. + +For example, `` elements are focusable and can be activated by pressing the `Enter` or `Space` keys. + +## Playground + + + +:::::: + +::: slot api + +## Props + +| Prop name | Type | Default value | Possible values | +| ----------------- | ------------------------- | ------------- | --------------- | +| `modelValue` | `boolean` | false | | +| `summaryClass` | `string` | | | + +## Slots + +| Slot name | Description | +| --------- | --------------------- | +| `default` | content to expand | +| `summary` | header with a summary | + +## Events + +| Event name | Trigger | +| --------------------- | ---------------------------------- | +| `update:modelValue` | Triggers when click on the summary | + +::: + +::: slot source + +## Source code + +<<<../../../packages/sfui/frameworks/vue/components/SfAccordionItem/SfAccordionItem.vue + +::: diff --git a/apps/docs-old/components/vue/components/badge.md b/apps/docs-old/components/vue/components/badge.md new file mode 100644 index 0000000000..e11d72aba3 --- /dev/null +++ b/apps/docs-old/components/vue/components/badge.md @@ -0,0 +1,71 @@ +--- +repoPath: /components/badge.md +layout: AtomLayout +hideBreadcrumbs: true +--- + +# Badge + +::: slot usage + +## Examples + +### Basic usage + +The badge component must be wrapped with a container that has `class="relative"`. You must provide such a container by yourself, but it gives you the flexibility to put the badge wherever you want. Bagde comes with a "dot" variant, which hides the content. When given content is of type number (or string that could be parsed to number), you can set a maximum limit of that number using `max` prop. + + +<<<../../preview/nuxt/pages/showcases/Badge/BadgeBasic.vue + + +### Placement + +You can align the Badge in every corner of the container. + + +<<<../../preview/nuxt/pages/showcases/Badge/BadgePlacement.vue + + +### Custom outline + +A nifty effect that makes the Badge a bit more attractive is to add an outline that separates the Badge from an element. + + +<<<../../preview/nuxt/pages/showcases/Badge/BadgeOutline.vue + + +### Avatars + +A common use case for the Badge is to place it on a user's avatar. + + +<<<../../preview/nuxt/pages/showcases/Badge/BadgeAvatar.vue + + +## Playground + + + +::: + +::: slot api + +## Props + +| Prop name | Type | Default value | Possible values | +| ----------- | ------------------ | ------------- | ------------------------------------------------------ | +| `content` | `string | number` | | +| `max` | `number` | `99` | | +| `placement` | `SfBadgePlacement` | `top-right` | `top-right`, `top-left`, `bottom-right`, `bottom-left` | +| `variant` | `SfBadgeVariant` | `standard` | `standard`, `dot` | + +::: + +::: slot source + + + +<<<../../../packages/sfui/frameworks/vue/components/SfBadge/SfBadge.vue + + +::: diff --git a/apps/docs-old/components/vue/components/button.md b/apps/docs-old/components/vue/components/button.md new file mode 100644 index 0000000000..c37ece729b --- /dev/null +++ b/apps/docs-old/components/vue/components/button.md @@ -0,0 +1,111 @@ +--- +repoPath: /components/button.md +layout: AtomLayout +hideBreadcrumbs: true +--- + +# Button + +:::::: slot usage + +`SfButton` is an input that allows for user-triggered actions when clicked or pressed. This can be used for submitting forms, opening/closing dialogs, and much more. + +## Examples + +### Button sizes + +`SfButton` supports 3 sizes that can be set with the `size` prop: `'sm'`, `'base'`, `'lg'`. + + + +<<<../../preview/nuxt/pages/showcases/Button/ButtonSizes.vue + + +### Button variants + +`SfButton` supports 3 style variants that can be set via `variant` prop: `'primary'`, `'secondary'`, `'tertiary'`. + + + +<<<../../preview/nuxt/pages/showcases/Button/ButtonVariants.vue + + +### Button as a link + +This component can be used as a link (or any other tag) that can be set via `tag` prop. + + + +<<<../../preview/nuxt/pages/showcases/Button/ButtonAsLink.vue + + +### Button block + +You can create a full-width button with Tailwind's `w-full` class. + + + +<<<../../preview/nuxt/pages/showcases/Button/ButtonBlock.vue + + +### Button truncation + +You can truncate button content with Tailwind using `max-w-` and `truncate` classes. + + + +<<<../../preview/nuxt/pages/showcases/Button/ButtonTruncation.vue + + +### Button content + +`SfButton` provides `prefix` and `suffix` slots that you can use to add custom content before/after your default content. This can be useful for adding icons or badges to your buttons. + + + +<<<../../preview/nuxt/pages/showcases/Button/ButtonContent.vue + + +## Accessibility notes + +Button component can be rendered as `