From 1847032325fafde5b423a552ebf85d10fa78e60a Mon Sep 17 00:00:00 2001 From: kevin Date: Fri, 6 Sep 2024 10:17:42 -0600 Subject: [PATCH] refactor(templates): refactored theme structure, removed pike, renamed and reorganized components --- .../components/.storybook/preview.tsx | 3 +- .../components/Atoms/Icon/Icon.stories.tsx | 4 +- .../Molecules/Carousel/Carousel.stories.tsx | 9 +- .../src/components/Organisms/Facet/Facet.tsx | 2 +- .../FacetsHorizontal.stories.tsx} | 14 +- .../FacetsHorizontal.test.tsx} | 76 ++-- .../FacetsHorizontal.tsx} | 46 +-- .../Organisms/FacetsHorizontal/index.ts | 1 + .../readme.md | 16 +- .../Organisms/HorizontalFacets/index.ts | 1 - .../Templates/HorizontalSearch/index.ts | 1 - .../RecommendationBundle/BundleCTA.tsx | 0 .../RecommendationBundle/BundleSelector.tsx | 0 .../RecommendationBundle.stories.tsx | 2 +- .../RecommendationBundle.test.tsx | 0 .../RecommendationBundle.tsx | 0 .../RecommendationBundle/index.ts | 0 .../RecommendationBundle/readme.md | 0 .../RecommendationGrid.stories.tsx | 2 +- .../RecommendationGrid.test.tsx | 0 .../RecommendationGrid/RecommendationGrid.tsx | 0 .../RecommendationGrid/index.ts | 0 .../RecommendationGrid/readme.md | 0 .../SearchHorizontal.stories.tsx} | 14 +- .../SearchHorizontal.test.tsx} | 84 ++--- .../SearchHorizontal.tsx} | 34 +- .../Templates/SearchHorizontal/index.ts | 1 + .../readme.md | 20 +- packages/snap-preact/components/src/index.ts | 10 +- .../src/providers/langComponents.ts | 14 +- .../components/src/providers/theme.ts | 6 +- .../src/providers/themeComponents.ts | 88 ++++- .../src/themes/bocachica/bocachica.ts | 31 ++ .../bocachica/components/atoms/badgeImage.ts | 15 + .../atoms/badgePill.ts} | 2 +- .../atoms/badgeRectangle.ts} | 2 +- .../atoms/badgeText.ts} | 2 +- .../{styles => }/components/atoms/banner.ts | 2 +- .../components/atoms/breadcrumbs.ts | 2 +- .../{styles => }/components/atoms/button.ts | 2 +- .../{styles => }/components/atoms/dropdown.ts | 2 +- .../atoms/formattedNumber.ts} | 2 +- .../{styles => }/components/atoms/icon.ts | 2 +- .../{styles => }/components/atoms/image.ts | 2 +- .../bocachica/components/atoms/index.ts | 21 ++ .../atoms/inlineBanner.ts} | 2 +- .../atoms/loadingBar.ts} | 2 +- .../atoms/noResults.ts} | 2 +- .../{styles => }/components/atoms/overlay.ts | 2 +- .../{styles => }/components/atoms/price.ts | 2 +- .../atoms/searchHeader.ts} | 2 +- .../{styles => }/components/atoms/skeleton.ts | 2 +- .../{styles => }/components/atoms/terms.ts | 2 +- .../{styles => }/components/atoms/toggle.ts | 2 +- .../src/themes/bocachica/components/index.ts | 13 + .../components/molecules/calloutBadge.ts | 4 + .../components/molecules/carousel.ts | 2 +- .../components/molecules/checkbox.ts | 2 +- .../molecules/errorHandler.ts} | 4 +- .../molecules/facetGridOptions.ts} | 2 +- .../molecules/facetHierarchyOptions.ts} | 2 +- .../molecules/facetListOptions.ts} | 2 +- .../molecules/facetPaletteOptions.ts} | 2 +- .../molecules/facetSlider.ts} | 2 +- .../molecules/facetToggle.ts} | 2 +- .../components/molecules/filter.ts | 2 +- .../bocachica/components/molecules/grid.ts | 4 + .../bocachica/components/molecules/index.ts | 29 ++ .../molecules/layoutSelector.ts} | 2 +- .../{styles => }/components/molecules/list.ts | 2 +- .../molecules/loadMore.ts} | 2 +- .../components/molecules/overlayBadge.ts | 4 + .../components/molecules/pagination.ts | 2 +- .../molecules/perPage.ts} | 2 +- .../components/molecules/radio.ts | 2 +- .../molecules/radioList.ts} | 2 +- .../components/molecules/rating.ts | 2 +- .../components/molecules/result.ts | 2 +- .../molecules/searchInput.ts} | 2 +- .../components/molecules/select.ts | 2 +- .../components/molecules/slideout.ts | 2 +- .../molecules/sortBy.ts} | 2 +- .../components/molecules/swatches.ts | 4 + .../components/molecules/variantSelection.ts | 4 + .../organisms/branchOverride.ts} | 2 +- .../components/organisms/facet.ts | 2 +- .../components/organisms/facets.ts | 2 +- .../organisms/facetsHorizontal.ts} | 16 +- .../organisms/filterSummary.ts} | 2 +- .../bocachica/components/organisms/index.ts | 10 + .../organisms/mobileSidebar.ts} | 2 +- .../components/organisms/results.ts | 2 +- .../components/organisms/sidebar.ts | 2 +- .../components/organisms/toolbar.ts | 2 +- .../components/templates/autocomplete.ts | 2 +- .../bocachica/components/templates/index.ts | 7 + .../components/templates/recommendation.ts | 2 +- .../templates/recommendationBundle.ts | 14 + .../templates/recommendationGrid.ts | 14 + .../components/templates/search.ts | 2 +- .../components/templates/searchHorizontal.ts | 15 + .../components/src/themes/bocachica/index.ts | 350 ------------------ .../src/themes/bocachica/layoutOptions.ts | 31 ++ .../src/themes/bocachica/responsive.ts | 130 +++++++ .../styles/components/atoms/atoms.ts | 21 -- .../styles/components/atoms/badgeimage.ts | 18 - .../styles/components/molecules/molecules.ts | 24 -- .../styles/components/organisms/organisms.ts | 10 - .../components/templates/horizontalsearch.ts | 15 - .../styles/components/templates/templates.ts | 5 - .../src/themes/bocachica/styles/styles.ts | 11 - .../components/src/themes/index.ts | 3 +- .../components/src/themes/pike/index.ts | 32 -- .../pike/styles/components/atoms/atoms.ts | 2 - .../pike/styles/components/atoms/button.ts | 34 -- .../src/themes/pike/styles/styles.ts | 2 - .../components/src/utilities/mergeProps.ts | 4 +- .../src/Templates/SnapTemplate.tsx | 4 +- .../src/Templates/Stores/LibraryStore.ts | 17 +- .../library/components/HorizontalSearch.ts | 1 - .../components/RecommendationBundle.ts | 2 +- .../library/components/RecommendationGrid.ts | 1 + .../library/components/SearchHorizontal.ts | 1 + .../Stores/library/themes/bocachica.ts | 2 +- .../Templates/Stores/library/themes/pike.ts | 1 - .../translations/en_translation.ts | 2 +- 126 files changed, 689 insertions(+), 795 deletions(-) rename packages/snap-preact/components/src/components/Organisms/{HorizontalFacets/HorizontalFacets.stories.tsx => FacetsHorizontal/FacetsHorizontal.stories.tsx} (87%) rename packages/snap-preact/components/src/components/Organisms/{HorizontalFacets/HorizontalFacets.test.tsx => FacetsHorizontal/FacetsHorizontal.test.tsx} (68%) rename packages/snap-preact/components/src/components/Organisms/{HorizontalFacets/HorizontalFacets.tsx => FacetsHorizontal/FacetsHorizontal.tsx} (86%) create mode 100644 packages/snap-preact/components/src/components/Organisms/FacetsHorizontal/index.ts rename packages/snap-preact/components/src/components/Organisms/{HorizontalFacets => FacetsHorizontal}/readme.md (72%) delete mode 100644 packages/snap-preact/components/src/components/Organisms/HorizontalFacets/index.ts delete mode 100644 packages/snap-preact/components/src/components/Templates/HorizontalSearch/index.ts rename packages/snap-preact/components/src/components/{Organisms => Templates}/RecommendationBundle/BundleCTA.tsx (100%) rename packages/snap-preact/components/src/components/{Organisms => Templates}/RecommendationBundle/BundleSelector.tsx (100%) rename packages/snap-preact/components/src/components/{Organisms => Templates}/RecommendationBundle/RecommendationBundle.stories.tsx (99%) rename packages/snap-preact/components/src/components/{Organisms => Templates}/RecommendationBundle/RecommendationBundle.test.tsx (100%) rename packages/snap-preact/components/src/components/{Organisms => Templates}/RecommendationBundle/RecommendationBundle.tsx (100%) rename packages/snap-preact/components/src/components/{Organisms => Templates}/RecommendationBundle/index.ts (100%) rename packages/snap-preact/components/src/components/{Organisms => Templates}/RecommendationBundle/readme.md (100%) rename packages/snap-preact/components/src/components/{Organisms => Templates}/RecommendationGrid/RecommendationGrid.stories.tsx (98%) rename packages/snap-preact/components/src/components/{Organisms => Templates}/RecommendationGrid/RecommendationGrid.test.tsx (100%) rename packages/snap-preact/components/src/components/{Organisms => Templates}/RecommendationGrid/RecommendationGrid.tsx (100%) rename packages/snap-preact/components/src/components/{Organisms => Templates}/RecommendationGrid/index.ts (100%) rename packages/snap-preact/components/src/components/{Organisms => Templates}/RecommendationGrid/readme.md (100%) rename packages/snap-preact/components/src/components/Templates/{HorizontalSearch/HorizontalSearch.stories.tsx => SearchHorizontal/SearchHorizontal.stories.tsx} (88%) rename packages/snap-preact/components/src/components/Templates/{HorizontalSearch/HorizontalSearch.test.tsx => SearchHorizontal/SearchHorizontal.test.tsx} (65%) rename packages/snap-preact/components/src/components/Templates/{HorizontalSearch/HorizontalSearch.tsx => SearchHorizontal/SearchHorizontal.tsx} (81%) create mode 100644 packages/snap-preact/components/src/components/Templates/SearchHorizontal/index.ts rename packages/snap-preact/components/src/components/Templates/{HorizontalSearch => SearchHorizontal}/readme.md (80%) create mode 100644 packages/snap-preact/components/src/themes/bocachica/bocachica.ts create mode 100644 packages/snap-preact/components/src/themes/bocachica/components/atoms/badgeImage.ts rename packages/snap-preact/components/src/themes/bocachica/{styles/components/atoms/badgepill.ts => components/atoms/badgePill.ts} (88%) rename packages/snap-preact/components/src/themes/bocachica/{styles/components/atoms/badgerectangle.ts => components/atoms/badgeRectangle.ts} (87%) rename packages/snap-preact/components/src/themes/bocachica/{styles/components/atoms/badgetext.ts => components/atoms/badgeText.ts} (88%) rename packages/snap-preact/components/src/themes/bocachica/{styles => }/components/atoms/banner.ts (83%) rename packages/snap-preact/components/src/themes/bocachica/{styles => }/components/atoms/breadcrumbs.ts (87%) rename packages/snap-preact/components/src/themes/bocachica/{styles => }/components/atoms/button.ts (93%) rename packages/snap-preact/components/src/themes/bocachica/{styles => }/components/atoms/dropdown.ts (92%) rename packages/snap-preact/components/src/themes/bocachica/{styles/components/atoms/formattednumber.ts => components/atoms/formattedNumber.ts} (82%) rename packages/snap-preact/components/src/themes/bocachica/{styles => }/components/atoms/icon.ts (87%) rename packages/snap-preact/components/src/themes/bocachica/{styles => }/components/atoms/image.ts (90%) create mode 100644 packages/snap-preact/components/src/themes/bocachica/components/atoms/index.ts rename packages/snap-preact/components/src/themes/bocachica/{styles/components/atoms/inlinebanner.ts => components/atoms/inlineBanner.ts} (88%) rename packages/snap-preact/components/src/themes/bocachica/{styles/components/atoms/loadingbar.ts => components/atoms/loadingBar.ts} (92%) rename packages/snap-preact/components/src/themes/bocachica/{styles/components/atoms/noresults.ts => components/atoms/noResults.ts} (84%) rename packages/snap-preact/components/src/themes/bocachica/{styles => }/components/atoms/overlay.ts (90%) rename packages/snap-preact/components/src/themes/bocachica/{styles => }/components/atoms/price.ts (87%) rename packages/snap-preact/components/src/themes/bocachica/{styles/components/atoms/searchheader.ts => components/atoms/searchHeader.ts} (84%) rename packages/snap-preact/components/src/themes/bocachica/{styles => }/components/atoms/skeleton.ts (94%) rename packages/snap-preact/components/src/themes/bocachica/{styles => }/components/atoms/terms.ts (83%) rename packages/snap-preact/components/src/themes/bocachica/{styles => }/components/atoms/toggle.ts (96%) create mode 100644 packages/snap-preact/components/src/themes/bocachica/components/index.ts create mode 100644 packages/snap-preact/components/src/themes/bocachica/components/molecules/calloutBadge.ts rename packages/snap-preact/components/src/themes/bocachica/{styles => }/components/molecules/carousel.ts (97%) rename packages/snap-preact/components/src/themes/bocachica/{styles => }/components/molecules/checkbox.ts (90%) rename packages/snap-preact/components/src/themes/bocachica/{styles/components/molecules/errorhandler.ts => components/molecules/errorHandler.ts} (91%) rename packages/snap-preact/components/src/themes/bocachica/{styles/components/molecules/facetgridoptions.ts => components/molecules/facetGridOptions.ts} (95%) rename packages/snap-preact/components/src/themes/bocachica/{styles/components/molecules/facethierarchyoptions.ts => components/molecules/facetHierarchyOptions.ts} (95%) rename packages/snap-preact/components/src/themes/bocachica/{styles/components/molecules/facetlistoptions.ts => components/molecules/facetListOptions.ts} (92%) rename packages/snap-preact/components/src/themes/bocachica/{styles/components/molecules/facetpaletteoptions.ts => components/molecules/facetPaletteOptions.ts} (95%) rename packages/snap-preact/components/src/themes/bocachica/{styles/components/molecules/facetslider.ts => components/molecules/facetSlider.ts} (97%) rename packages/snap-preact/components/src/themes/bocachica/{styles/components/molecules/facettoggle.ts => components/molecules/facetToggle.ts} (82%) rename packages/snap-preact/components/src/themes/bocachica/{styles => }/components/molecules/filter.ts (88%) create mode 100644 packages/snap-preact/components/src/themes/bocachica/components/molecules/grid.ts create mode 100644 packages/snap-preact/components/src/themes/bocachica/components/molecules/index.ts rename packages/snap-preact/components/src/themes/bocachica/{styles/components/molecules/layoutselector.ts => components/molecules/layoutSelector.ts} (82%) rename packages/snap-preact/components/src/themes/bocachica/{styles => }/components/molecules/list.ts (94%) rename packages/snap-preact/components/src/themes/bocachica/{styles/components/molecules/loadmore.ts => components/molecules/loadMore.ts} (98%) create mode 100644 packages/snap-preact/components/src/themes/bocachica/components/molecules/overlayBadge.ts rename packages/snap-preact/components/src/themes/bocachica/{styles => }/components/molecules/pagination.ts (87%) rename packages/snap-preact/components/src/themes/bocachica/{styles/components/molecules/perpage.ts => components/molecules/perPage.ts} (82%) rename packages/snap-preact/components/src/themes/bocachica/{styles => }/components/molecules/radio.ts (91%) rename packages/snap-preact/components/src/themes/bocachica/{styles/components/molecules/radiolist.ts => components/molecules/radioList.ts} (92%) rename packages/snap-preact/components/src/themes/bocachica/{styles => }/components/molecules/rating.ts (93%) rename packages/snap-preact/components/src/themes/bocachica/{styles => }/components/molecules/result.ts (94%) rename packages/snap-preact/components/src/themes/bocachica/{styles/components/molecules/searchinput.ts => components/molecules/searchInput.ts} (87%) rename packages/snap-preact/components/src/themes/bocachica/{styles => }/components/molecules/select.ts (95%) rename packages/snap-preact/components/src/themes/bocachica/{styles => }/components/molecules/slideout.ts (93%) rename packages/snap-preact/components/src/themes/bocachica/{styles/components/molecules/sortby.ts => components/molecules/sortBy.ts} (82%) create mode 100644 packages/snap-preact/components/src/themes/bocachica/components/molecules/swatches.ts create mode 100644 packages/snap-preact/components/src/themes/bocachica/components/molecules/variantSelection.ts rename packages/snap-preact/components/src/themes/bocachica/{styles/components/organisms/branchoverride.ts => components/organisms/branchOverride.ts} (98%) rename packages/snap-preact/components/src/themes/bocachica/{styles => }/components/organisms/facet.ts (95%) rename packages/snap-preact/components/src/themes/bocachica/{styles => }/components/organisms/facets.ts (82%) rename packages/snap-preact/components/src/themes/bocachica/{styles/components/organisms/horizontalfacets.ts => components/organisms/facetsHorizontal.ts} (77%) rename packages/snap-preact/components/src/themes/bocachica/{styles/components/organisms/filtersummary.ts => components/organisms/filterSummary.ts} (90%) create mode 100644 packages/snap-preact/components/src/themes/bocachica/components/organisms/index.ts rename packages/snap-preact/components/src/themes/bocachica/{styles/components/organisms/mobilesidebar.ts => components/organisms/mobileSidebar.ts} (89%) rename packages/snap-preact/components/src/themes/bocachica/{styles => }/components/organisms/results.ts (93%) rename packages/snap-preact/components/src/themes/bocachica/{styles => }/components/organisms/sidebar.ts (85%) rename packages/snap-preact/components/src/themes/bocachica/{styles => }/components/organisms/toolbar.ts (87%) rename packages/snap-preact/components/src/themes/bocachica/{styles => }/components/templates/autocomplete.ts (98%) create mode 100644 packages/snap-preact/components/src/themes/bocachica/components/templates/index.ts rename packages/snap-preact/components/src/themes/bocachica/{styles => }/components/templates/recommendation.ts (87%) create mode 100644 packages/snap-preact/components/src/themes/bocachica/components/templates/recommendationBundle.ts create mode 100644 packages/snap-preact/components/src/themes/bocachica/components/templates/recommendationGrid.ts rename packages/snap-preact/components/src/themes/bocachica/{styles => }/components/templates/search.ts (93%) create mode 100644 packages/snap-preact/components/src/themes/bocachica/components/templates/searchHorizontal.ts delete mode 100644 packages/snap-preact/components/src/themes/bocachica/index.ts create mode 100644 packages/snap-preact/components/src/themes/bocachica/layoutOptions.ts create mode 100644 packages/snap-preact/components/src/themes/bocachica/responsive.ts delete mode 100644 packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/atoms.ts delete mode 100644 packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/badgeimage.ts delete mode 100644 packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/molecules.ts delete mode 100644 packages/snap-preact/components/src/themes/bocachica/styles/components/organisms/organisms.ts delete mode 100644 packages/snap-preact/components/src/themes/bocachica/styles/components/templates/horizontalsearch.ts delete mode 100644 packages/snap-preact/components/src/themes/bocachica/styles/components/templates/templates.ts delete mode 100644 packages/snap-preact/components/src/themes/bocachica/styles/styles.ts delete mode 100644 packages/snap-preact/components/src/themes/pike/index.ts delete mode 100644 packages/snap-preact/components/src/themes/pike/styles/components/atoms/atoms.ts delete mode 100644 packages/snap-preact/components/src/themes/pike/styles/components/atoms/button.ts delete mode 100644 packages/snap-preact/components/src/themes/pike/styles/styles.ts delete mode 100644 packages/snap-preact/src/Templates/Stores/library/components/HorizontalSearch.ts create mode 100644 packages/snap-preact/src/Templates/Stores/library/components/RecommendationGrid.ts create mode 100644 packages/snap-preact/src/Templates/Stores/library/components/SearchHorizontal.ts delete mode 100644 packages/snap-preact/src/Templates/Stores/library/themes/pike.ts diff --git a/packages/snap-preact/components/.storybook/preview.tsx b/packages/snap-preact/components/.storybook/preview.tsx index 591313117..5b998c134 100644 --- a/packages/snap-preact/components/.storybook/preview.tsx +++ b/packages/snap-preact/components/.storybook/preview.tsx @@ -2,7 +2,7 @@ import { h } from 'preact'; import { withThemeFromJSXProvider } from '@storybook/addon-themes'; import { ThemeProvider } from '../src/providers/theme'; -import { bocachica, pike } from '../src/themes'; +import { bocachica } from '../src/themes'; // custom styles for storybook import './styles.scss'; @@ -11,7 +11,6 @@ export const decorators = [ withThemeFromJSXProvider({ themes: { bocachica: bocachica, - pike: pike, none: {}, }, defaultTheme: 'bocachica', diff --git a/packages/snap-preact/components/src/components/Atoms/Icon/Icon.stories.tsx b/packages/snap-preact/components/src/components/Atoms/Icon/Icon.stories.tsx index 42b1153cb..bcac7a8ab 100644 --- a/packages/snap-preact/components/src/components/Atoms/Icon/Icon.stories.tsx +++ b/packages/snap-preact/components/src/components/Atoms/Icon/Icon.stories.tsx @@ -3,7 +3,7 @@ import { h } from 'preact'; import { ArgsTable, PRIMARY_STORY, Markdown } from '@storybook/blocks'; import { Icon, IconProps } from './Icon'; -import { iconPaths } from './paths'; +import { iconPaths, IconType } from './paths'; import { componentArgs, highlightedCode } from '../../../utilities'; import Readme from '../Icon/readme.md'; @@ -150,7 +150,7 @@ export const Gallery = (): JSX.Element => { {Object.keys(iconPaths).map((icon) => { return (
- +
{icon}
); diff --git a/packages/snap-preact/components/src/components/Molecules/Carousel/Carousel.stories.tsx b/packages/snap-preact/components/src/components/Molecules/Carousel/Carousel.stories.tsx index 9c4c70851..d3674431d 100644 --- a/packages/snap-preact/components/src/components/Molecules/Carousel/Carousel.stories.tsx +++ b/packages/snap-preact/components/src/components/Molecules/Carousel/Carousel.stories.tsx @@ -3,7 +3,7 @@ import { h } from 'preact'; import { ArgsTable, PRIMARY_STORY, Markdown } from '@storybook/blocks'; import { Carousel, CarouselProps } from './Carousel'; -import { Icon, iconPaths } from '../../Atoms/Icon'; +import { Icon, iconPaths, IconType } from '../../Atoms/Icon'; import { componentArgs, shiftColor, highlightedCode } from '../../../utilities'; import Readme from './readme.md'; @@ -204,12 +204,7 @@ export const Icons = (props: CarouselProps) => { {Object.keys(iconPaths).map((icon, index) => { return (
- +
{icon}
); diff --git a/packages/snap-preact/components/src/components/Organisms/Facet/Facet.tsx b/packages/snap-preact/components/src/components/Organisms/Facet/Facet.tsx index ea8c12f75..22c0d08ea 100644 --- a/packages/snap-preact/components/src/components/Organisms/Facet/Facet.tsx +++ b/packages/snap-preact/components/src/components/Organisms/Facet/Facet.tsx @@ -499,5 +499,5 @@ export interface FacetLang { } type FieldProps = { - [variable: string]: FacetProps; + [variable: string]: Omit; }; diff --git a/packages/snap-preact/components/src/components/Organisms/HorizontalFacets/HorizontalFacets.stories.tsx b/packages/snap-preact/components/src/components/Organisms/FacetsHorizontal/FacetsHorizontal.stories.tsx similarity index 87% rename from packages/snap-preact/components/src/components/Organisms/HorizontalFacets/HorizontalFacets.stories.tsx rename to packages/snap-preact/components/src/components/Organisms/FacetsHorizontal/FacetsHorizontal.stories.tsx index 4229c19e9..79af070b5 100644 --- a/packages/snap-preact/components/src/components/Organisms/HorizontalFacets/HorizontalFacets.stories.tsx +++ b/packages/snap-preact/components/src/components/Organisms/FacetsHorizontal/FacetsHorizontal.stories.tsx @@ -2,16 +2,16 @@ import { h } from 'preact'; import { ArgsTable, PRIMARY_STORY, Markdown } from '@storybook/blocks'; -import { HorizontalFacets, HorizontalFacetsProps } from './HorizontalFacets'; +import { FacetsHorizontal, FacetsHorizontalProps } from './FacetsHorizontal'; import { componentArgs, highlightedCode } from '../../../utilities'; import { Snapify } from '../../../utilities/snapify'; import { iconPaths } from '../../Atoms/Icon'; -import Readme from '../HorizontalFacets/readme.md'; +import Readme from '../FacetsHorizontal/readme.md'; import type { SearchController } from '@searchspring/snap-controller'; export default { - title: 'Organisms/HorizontalFacets', - component: HorizontalFacets, + title: 'Organisms/FacetsHorizontal', + component: FacetsHorizontal, tags: ['autodocs'], parameters: { docs: { @@ -118,10 +118,10 @@ export default { }, }; -const snapInstance = Snapify.search({ id: 'HorizontalFacets', globals: { siteId: '8uyt2m' } }); +const snapInstance = Snapify.search({ id: 'FacetsHorizontal', globals: { siteId: '8uyt2m' } }); -export const Default = (args: HorizontalFacetsProps, { loaded: { controller } }: { loaded: { controller: SearchController } }) => { - return ; +export const Default = (args: FacetsHorizontalProps, { loaded: { controller } }: { loaded: { controller: SearchController } }) => { + return ; }; Default.loaders = [ diff --git a/packages/snap-preact/components/src/components/Organisms/HorizontalFacets/HorizontalFacets.test.tsx b/packages/snap-preact/components/src/components/Organisms/FacetsHorizontal/FacetsHorizontal.test.tsx similarity index 68% rename from packages/snap-preact/components/src/components/Organisms/HorizontalFacets/HorizontalFacets.test.tsx rename to packages/snap-preact/components/src/components/Organisms/FacetsHorizontal/FacetsHorizontal.test.tsx index 59c1e50c3..6c98accca 100644 --- a/packages/snap-preact/components/src/components/Organisms/HorizontalFacets/HorizontalFacets.test.tsx +++ b/packages/snap-preact/components/src/components/Organisms/FacetsHorizontal/FacetsHorizontal.test.tsx @@ -1,6 +1,6 @@ import { h } from 'preact'; import { render } from '@testing-library/preact'; -import { HorizontalFacets } from './HorizontalFacets'; +import { FacetsHorizontal } from './FacetsHorizontal'; import { IndividualFacetType } from '../Facets/Facets'; import { ThemeProvider } from '../../../providers'; import userEvent from '@testing-library/user-event'; @@ -11,14 +11,14 @@ import { SearchResponseModel } from '@searchspring/snapi-types'; const mockData = new MockData(); const searchResponse: SearchResponseModel = mockData.search(); -describe('HorizontalFacets Component', () => { +describe('FacetsHorizontal Component', () => { it('renders', () => { const args = { facets: searchResponse.facets as IndividualFacetType[], }; - const rendered = render(); - const horizontalFacetsElement = rendered.container.querySelector('.ss__horizontal-facets'); - expect(horizontalFacetsElement).toBeInTheDocument(); + const rendered = render(); + const facetsHorizontalElement = rendered.container.querySelector('.ss__facets-horizontal'); + expect(facetsHorizontalElement).toBeInTheDocument(); }); it('limits number of facets and displays sidebar overflow', () => { @@ -26,11 +26,11 @@ describe('HorizontalFacets Component', () => { facets: searchResponse.facets as IndividualFacetType[], limit: 2, }; - const rendered = render(); - const facetsDropdown = rendered.container.querySelectorAll('.ss__horizontal-facets__header__dropdown'); + const rendered = render(); + const facetsDropdown = rendered.container.querySelectorAll('.ss__facets-horizontal__header__dropdown'); expect(facetsDropdown).toHaveLength(args.limit); - const mobileSidebar = rendered.container.querySelector('.ss__horizontal-facets__header__mobile-sidebar'); + const mobileSidebar = rendered.container.querySelector('.ss__facets-horizontal__header__mobile-sidebar'); expect(mobileSidebar).toBeInTheDocument(); }); @@ -39,9 +39,9 @@ describe('HorizontalFacets Component', () => { facets: searchResponse.facets as IndividualFacetType[], alwaysShowFiltersButton: true, }; - const rendered = render(); + const rendered = render(); - const mobileSidebar = rendered.container.querySelector('.ss__horizontal-facets__header__mobile-sidebar'); + const mobileSidebar = rendered.container.querySelector('.ss__facets-horizontal__header__mobile-sidebar'); expect(mobileSidebar).toBeInTheDocument(); }); @@ -50,10 +50,10 @@ describe('HorizontalFacets Component', () => { facets: searchResponse.facets as IndividualFacetType[], overlay: true, }; - const rendered = render(); + const rendered = render(); const facetElement = rendered.container.querySelector( - `.ss__horizontal-facets--overlay .ss__horizontal-facets__header .ss__horizontal-facets__header__dropdown--${args.facets[0].field} .ss__facet__options` + `.ss__facets-horizontal--overlay .ss__facets-horizontal__header .ss__facets-horizontal__header__dropdown--${args.facets[0].field} .ss__facet__options` ); expect(facetElement).toBeInTheDocument(); }); @@ -64,10 +64,10 @@ describe('HorizontalFacets Component', () => { className: 'classy', }; - const rendered = render(); + const rendered = render(); - const horizontalFacetsElement = rendered.container.querySelector('.ss__horizontal-facets'); - expect(horizontalFacetsElement).toHaveClass(args.className); + const facetsHorizontalElement = rendered.container.querySelector('.ss__facets-horizontal'); + expect(facetsHorizontalElement).toHaveClass(args.className); }); it('disableStyles', () => { @@ -76,18 +76,18 @@ describe('HorizontalFacets Component', () => { disableStyles: true, }; - const rendered = render(); + const rendered = render(); - const horizontalFacetsElement = rendered.container.querySelector('.ss__horizontal-facets'); - expect(horizontalFacetsElement?.classList).toHaveLength(1); + const facetsHorizontalElement = rendered.container.querySelector('.ss__facets-horizontal'); + expect(facetsHorizontalElement?.classList).toHaveLength(1); }); - describe('HorizontalFacets lang works', () => { + describe('FacetsHorizontal lang works', () => { const args = { facets: searchResponse.facets as IndividualFacetType[], }; - const selector = '.ss__horizontal-facets'; + const selector = '.ss__facets-horizontal'; it('immediately available lang options', async () => { const langOptions = ['dropdownButton']; @@ -148,7 +148,7 @@ describe('HorizontalFacets Component', () => { let titleSatisfied = false; // @ts-ignore - const rendered = render(); + const rendered = render(); const element = rendered.container.querySelector(selector); expect(element).toBeInTheDocument(); @@ -206,19 +206,19 @@ describe('HorizontalFacets Component', () => { }; const globalTheme = { components: { - horizontalFacets: { + facetsHorizontal: { className: 'classy', }, }, }; const rendered = render( - + ); - const horizontalFacetsElement = rendered.container.querySelector('.ss__horizontal-facets'); - expect(horizontalFacetsElement).toBeInTheDocument(); - expect(horizontalFacetsElement).toHaveClass(globalTheme.components.horizontalFacets.className); + const facetsHorizontalElement = rendered.container.querySelector('.ss__facets-horizontal'); + expect(facetsHorizontalElement).toBeInTheDocument(); + expect(facetsHorizontalElement).toHaveClass(globalTheme.components.facetsHorizontal.className); }); it('is themeable with theme prop', () => { @@ -227,15 +227,15 @@ describe('HorizontalFacets Component', () => { }; const propTheme = { components: { - horizontalFacets: { + facetsHorizontal: { className: 'classy', }, }, }; - const rendered = render(); - const horizontalFacetsElement = rendered.container.querySelector('.ss__horizontal-facets'); - expect(horizontalFacetsElement).toBeInTheDocument(); - expect(horizontalFacetsElement).toHaveClass(propTheme.components.horizontalFacets.className); + const rendered = render(); + const facetsHorizontalElement = rendered.container.querySelector('.ss__facets-horizontal'); + expect(facetsHorizontalElement).toBeInTheDocument(); + expect(facetsHorizontalElement).toHaveClass(propTheme.components.facetsHorizontal.className); }); it('is theme prop overrides ThemeProvider', () => { @@ -244,27 +244,27 @@ describe('HorizontalFacets Component', () => { }; const globalTheme = { components: { - horizontalFacets: { + facetsHorizontal: { className: 'notClassy', }, }, }; const propTheme = { components: { - horizontalFacets: { + facetsHorizontal: { className: 'classy', }, }, }; const rendered = render( - + ); - const horizontalFacetsElement = rendered.container.querySelector('.ss__horizontal-facets'); - expect(horizontalFacetsElement).toBeInTheDocument(); - expect(horizontalFacetsElement).toHaveClass(propTheme.components.horizontalFacets.className); - expect(horizontalFacetsElement).not.toHaveClass(globalTheme.components.horizontalFacets.className); + const facetsHorizontalElement = rendered.container.querySelector('.ss__facets-horizontal'); + expect(facetsHorizontalElement).toBeInTheDocument(); + expect(facetsHorizontalElement).toHaveClass(propTheme.components.facetsHorizontal.className); + expect(facetsHorizontalElement).not.toHaveClass(globalTheme.components.facetsHorizontal.className); }); }); diff --git a/packages/snap-preact/components/src/components/Organisms/HorizontalFacets/HorizontalFacets.tsx b/packages/snap-preact/components/src/components/Organisms/FacetsHorizontal/FacetsHorizontal.tsx similarity index 86% rename from packages/snap-preact/components/src/components/Organisms/HorizontalFacets/HorizontalFacets.tsx rename to packages/snap-preact/components/src/components/Organisms/FacetsHorizontal/FacetsHorizontal.tsx index 1ac223e6f..2d451761a 100644 --- a/packages/snap-preact/components/src/components/Organisms/HorizontalFacets/HorizontalFacets.tsx +++ b/packages/snap-preact/components/src/components/Organisms/FacetsHorizontal/FacetsHorizontal.tsx @@ -18,9 +18,9 @@ import { Dropdown, DropdownProps } from '../../Atoms/Dropdown'; import { Icon, IconProps, IconType } from '../../Atoms/Icon'; const CSS = { - facets: ({ theme }: Partial) => + facets: ({ theme }: Partial) => css({ - '& .ss__horizontal-facets__header': { + '& .ss__facets-horizontal__header': { display: 'flex', flexWrap: 'wrap', @@ -28,7 +28,7 @@ const CSS = { margin: '0 10px', }, - '& .ss__horizontal-facets__header__dropdown': { + '& .ss__facets-horizontal__header__dropdown': { flex: '0 0 0%', margin: '0 0 10px 0', boxSizing: 'border-box', @@ -58,8 +58,8 @@ const CSS = { }, }, }, - '&.ss__horizontal-facets--overlay': { - '& .ss__horizontal-facets__header__dropdown': { + '&.ss__facets-horizontal--overlay': { + '& .ss__facets-horizontal__header__dropdown': { '&.ss__dropdown--open': { '& .ss__dropdown__content': { border: `1px solid ${theme?.variables?.colors?.active?.background || '#ccc'}`, @@ -78,17 +78,17 @@ const CSS = { }), }; -export const HorizontalFacets = observer((properties: HorizontalFacetsProps): JSX.Element => { +export const FacetsHorizontal = observer((properties: FacetsHorizontalProps): JSX.Element => { const globalTheme: Theme = useTheme(); - const defaultProps: Partial = { + const defaultProps: Partial = { limit: 6, iconCollapse: 'angle-up', iconExpand: 'angle-down', facets: properties.controller?.store?.facets, }; - let props = mergeProps('horizontalFacets', globalTheme, defaultProps, properties); + let props = mergeProps('facetsHorizontal', globalTheme, defaultProps, properties); const { facets, @@ -143,10 +143,10 @@ export const HorizontalFacets = observer((properties: HorizontalFacetsProps): JS facetsToShow = facets.slice(0, +limit); } - const subProps: HorizontalFacetsSubProps = { + const subProps: FacetsHorizontalSubProps = { dropdown: { // default props - className: 'ss__horizontal-facets__header__dropdown', + className: 'ss__facets-horizontal__header__dropdown', disableClickOutside: true, disableOverlay: true, disableA11y: true, @@ -175,7 +175,7 @@ export const HorizontalFacets = observer((properties: HorizontalFacetsProps): JS }, facet: { // default props - className: `ss__horizontal-facets__content__facet`, + className: `ss__facets-horizontal__content__facet`, justContent: true, horizontal: true, // global theme @@ -191,7 +191,7 @@ export const HorizontalFacets = observer((properties: HorizontalFacetsProps): JS }, MobileSidebar: { // default props - className: 'ss__horizontal-facets__header__mobile-sidebar', + className: 'ss__facets-horizontal__header__mobile-sidebar', hidePerPage: true, hideSortBy: true, // global theme @@ -226,11 +226,11 @@ export const HorizontalFacets = observer((properties: HorizontalFacetsProps): JS return facetsToShow && facetsToShow?.length > 0 ? (
} {...styling} > -
+
{facetsToShow.map((facet: IndividualFacetType) => { //initialize lang const defaultLang = { @@ -255,8 +255,8 @@ export const HorizontalFacets = observer((properties: HorizontalFacetsProps): JS {...subProps.dropdown} className={classnames( subProps.dropdown.className, - `ss__horizontal-facets__header__dropdown--${facet.display}`, - `ss__horizontal-facets__header__dropdown--${facet.field}` + `ss__facets-horizontal__header__dropdown--${facet.display}`, + `ss__facets-horizontal__header__dropdown--${facet.field}` )} open={selectedFacet?.field === facet.field} onClick={() => { @@ -293,9 +293,9 @@ export const HorizontalFacets = observer((properties: HorizontalFacetsProps): JS {!overlay && selectedFacet && (
facet.field === selectedFacet.field)!} /> @@ -308,14 +308,14 @@ export const HorizontalFacets = observer((properties: HorizontalFacetsProps): JS ); }); -interface HorizontalFacetsSubProps { +interface FacetsHorizontalSubProps { dropdown: Partial; icon: Partial; facet: Partial; MobileSidebar: Partial; } -export interface HorizontalFacetsProps extends ComponentProps { +export interface FacetsHorizontalProps extends ComponentProps { facets?: IndividualFacetType[]; limit?: number; overlay?: boolean; @@ -324,10 +324,10 @@ export interface HorizontalFacetsProps extends ComponentProps { iconExpand?: IconType | Partial; controller?: SearchController | AutocompleteController; onFacetOptionClick?: (e: React.MouseEvent) => void; - lang?: Partial; + lang?: Partial; } -export interface HorizontalFacetsLang { +export interface FacetsHorizontalLang { dropdownButton: Lang<{ selectedFacet: IndividualFacetType; facet: IndividualFacetType; diff --git a/packages/snap-preact/components/src/components/Organisms/FacetsHorizontal/index.ts b/packages/snap-preact/components/src/components/Organisms/FacetsHorizontal/index.ts new file mode 100644 index 000000000..2a3051ba3 --- /dev/null +++ b/packages/snap-preact/components/src/components/Organisms/FacetsHorizontal/index.ts @@ -0,0 +1 @@ +export * from './FacetsHorizontal'; diff --git a/packages/snap-preact/components/src/components/Organisms/HorizontalFacets/readme.md b/packages/snap-preact/components/src/components/Organisms/FacetsHorizontal/readme.md similarity index 72% rename from packages/snap-preact/components/src/components/Organisms/HorizontalFacets/readme.md rename to packages/snap-preact/components/src/components/Organisms/FacetsHorizontal/readme.md index cd4a744cd..9eb80ae34 100644 --- a/packages/snap-preact/components/src/components/Organisms/HorizontalFacets/readme.md +++ b/packages/snap-preact/components/src/components/Organisms/FacetsHorizontal/readme.md @@ -1,4 +1,4 @@ -# HorizontalFacets +# FacetsHorizontal Renders all facets in a horizontal display. Also incluses MobileSidebar. @@ -13,47 +13,47 @@ Renders all facets in a horizontal display. Also incluses MobileSidebar. The `controller` prop specifies a reference to the search controller. ```jsx - + ``` ### facets The optional`facets` prop specifies a reference to the facets store array. If no facets prop is passed in, the component will default to using the facets in controller.store. ```jsx - + ``` ### iconExpand The `iconExpand` prop is the name of the icon to render when the facet is in its collapsed state. ```jsx - + ``` ### iconCollapse The `iconCollapse` prop is the name of the icon to render when the facet is in its open state. ```jsx - + ``` ### limit The `limit` prop will limit the maximum number of facets to display before displaying the overflow button and MobidleSidebar. ```jsx - + ``` ### alwaysShowFiltersButton The `alwaysShowFiltersButton` prop will always render the button and MobileSidebar. ```jsx - + ``` ### overlay The `overlay` prop will render the facet options in a dropdown overlay. ```jsx - + ``` \ No newline at end of file diff --git a/packages/snap-preact/components/src/components/Organisms/HorizontalFacets/index.ts b/packages/snap-preact/components/src/components/Organisms/HorizontalFacets/index.ts deleted file mode 100644 index cbba3a3af..000000000 --- a/packages/snap-preact/components/src/components/Organisms/HorizontalFacets/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './HorizontalFacets'; diff --git a/packages/snap-preact/components/src/components/Templates/HorizontalSearch/index.ts b/packages/snap-preact/components/src/components/Templates/HorizontalSearch/index.ts deleted file mode 100644 index a683f94e8..000000000 --- a/packages/snap-preact/components/src/components/Templates/HorizontalSearch/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './HorizontalSearch'; diff --git a/packages/snap-preact/components/src/components/Organisms/RecommendationBundle/BundleCTA.tsx b/packages/snap-preact/components/src/components/Templates/RecommendationBundle/BundleCTA.tsx similarity index 100% rename from packages/snap-preact/components/src/components/Organisms/RecommendationBundle/BundleCTA.tsx rename to packages/snap-preact/components/src/components/Templates/RecommendationBundle/BundleCTA.tsx diff --git a/packages/snap-preact/components/src/components/Organisms/RecommendationBundle/BundleSelector.tsx b/packages/snap-preact/components/src/components/Templates/RecommendationBundle/BundleSelector.tsx similarity index 100% rename from packages/snap-preact/components/src/components/Organisms/RecommendationBundle/BundleSelector.tsx rename to packages/snap-preact/components/src/components/Templates/RecommendationBundle/BundleSelector.tsx diff --git a/packages/snap-preact/components/src/components/Organisms/RecommendationBundle/RecommendationBundle.stories.tsx b/packages/snap-preact/components/src/components/Templates/RecommendationBundle/RecommendationBundle.stories.tsx similarity index 99% rename from packages/snap-preact/components/src/components/Organisms/RecommendationBundle/RecommendationBundle.stories.tsx rename to packages/snap-preact/components/src/components/Templates/RecommendationBundle/RecommendationBundle.stories.tsx index f5973a491..d1ca09d6a 100644 --- a/packages/snap-preact/components/src/components/Organisms/RecommendationBundle/RecommendationBundle.stories.tsx +++ b/packages/snap-preact/components/src/components/Templates/RecommendationBundle/RecommendationBundle.stories.tsx @@ -14,7 +14,7 @@ import { iconPaths } from '../../Atoms/Icon'; import type { RecommendationControllerConfig } from '@searchspring/snap-controller'; export default { - title: 'Organisms/RecommendationBundle', + title: 'Templates/RecommendationBundle', component: RecommendationBundle, parameters: { docs: { diff --git a/packages/snap-preact/components/src/components/Organisms/RecommendationBundle/RecommendationBundle.test.tsx b/packages/snap-preact/components/src/components/Templates/RecommendationBundle/RecommendationBundle.test.tsx similarity index 100% rename from packages/snap-preact/components/src/components/Organisms/RecommendationBundle/RecommendationBundle.test.tsx rename to packages/snap-preact/components/src/components/Templates/RecommendationBundle/RecommendationBundle.test.tsx diff --git a/packages/snap-preact/components/src/components/Organisms/RecommendationBundle/RecommendationBundle.tsx b/packages/snap-preact/components/src/components/Templates/RecommendationBundle/RecommendationBundle.tsx similarity index 100% rename from packages/snap-preact/components/src/components/Organisms/RecommendationBundle/RecommendationBundle.tsx rename to packages/snap-preact/components/src/components/Templates/RecommendationBundle/RecommendationBundle.tsx diff --git a/packages/snap-preact/components/src/components/Organisms/RecommendationBundle/index.ts b/packages/snap-preact/components/src/components/Templates/RecommendationBundle/index.ts similarity index 100% rename from packages/snap-preact/components/src/components/Organisms/RecommendationBundle/index.ts rename to packages/snap-preact/components/src/components/Templates/RecommendationBundle/index.ts diff --git a/packages/snap-preact/components/src/components/Organisms/RecommendationBundle/readme.md b/packages/snap-preact/components/src/components/Templates/RecommendationBundle/readme.md similarity index 100% rename from packages/snap-preact/components/src/components/Organisms/RecommendationBundle/readme.md rename to packages/snap-preact/components/src/components/Templates/RecommendationBundle/readme.md diff --git a/packages/snap-preact/components/src/components/Organisms/RecommendationGrid/RecommendationGrid.stories.tsx b/packages/snap-preact/components/src/components/Templates/RecommendationGrid/RecommendationGrid.stories.tsx similarity index 98% rename from packages/snap-preact/components/src/components/Organisms/RecommendationGrid/RecommendationGrid.stories.tsx rename to packages/snap-preact/components/src/components/Templates/RecommendationGrid/RecommendationGrid.stories.tsx index b41c63a8e..7a02e245e 100644 --- a/packages/snap-preact/components/src/components/Organisms/RecommendationGrid/RecommendationGrid.stories.tsx +++ b/packages/snap-preact/components/src/components/Templates/RecommendationGrid/RecommendationGrid.stories.tsx @@ -10,7 +10,7 @@ import Readme from './readme.md'; import type { RecommendationController } from '@searchspring/snap-controller'; export default { - title: 'Organisms/RecommendationGrid', + title: 'Templates/RecommendationGrid', component: RecommendationGrid, tags: ['autodocs'], parameters: { diff --git a/packages/snap-preact/components/src/components/Organisms/RecommendationGrid/RecommendationGrid.test.tsx b/packages/snap-preact/components/src/components/Templates/RecommendationGrid/RecommendationGrid.test.tsx similarity index 100% rename from packages/snap-preact/components/src/components/Organisms/RecommendationGrid/RecommendationGrid.test.tsx rename to packages/snap-preact/components/src/components/Templates/RecommendationGrid/RecommendationGrid.test.tsx diff --git a/packages/snap-preact/components/src/components/Organisms/RecommendationGrid/RecommendationGrid.tsx b/packages/snap-preact/components/src/components/Templates/RecommendationGrid/RecommendationGrid.tsx similarity index 100% rename from packages/snap-preact/components/src/components/Organisms/RecommendationGrid/RecommendationGrid.tsx rename to packages/snap-preact/components/src/components/Templates/RecommendationGrid/RecommendationGrid.tsx diff --git a/packages/snap-preact/components/src/components/Organisms/RecommendationGrid/index.ts b/packages/snap-preact/components/src/components/Templates/RecommendationGrid/index.ts similarity index 100% rename from packages/snap-preact/components/src/components/Organisms/RecommendationGrid/index.ts rename to packages/snap-preact/components/src/components/Templates/RecommendationGrid/index.ts diff --git a/packages/snap-preact/components/src/components/Organisms/RecommendationGrid/readme.md b/packages/snap-preact/components/src/components/Templates/RecommendationGrid/readme.md similarity index 100% rename from packages/snap-preact/components/src/components/Organisms/RecommendationGrid/readme.md rename to packages/snap-preact/components/src/components/Templates/RecommendationGrid/readme.md diff --git a/packages/snap-preact/components/src/components/Templates/HorizontalSearch/HorizontalSearch.stories.tsx b/packages/snap-preact/components/src/components/Templates/SearchHorizontal/SearchHorizontal.stories.tsx similarity index 88% rename from packages/snap-preact/components/src/components/Templates/HorizontalSearch/HorizontalSearch.stories.tsx rename to packages/snap-preact/components/src/components/Templates/SearchHorizontal/SearchHorizontal.stories.tsx index 77763ced0..ac5dff316 100644 --- a/packages/snap-preact/components/src/components/Templates/HorizontalSearch/HorizontalSearch.stories.tsx +++ b/packages/snap-preact/components/src/components/Templates/SearchHorizontal/SearchHorizontal.stories.tsx @@ -6,11 +6,11 @@ import { componentArgs, highlightedCode } from '../../../utilities'; import { Snapify } from '../../../utilities/snapify'; import Readme from './readme.md'; import type { SearchController } from '@searchspring/snap-controller'; -import { HorizontalSearch, HorizontalSearchProps } from './HorizontalSearch'; +import { SearchHorizontal, SearchHorizontalProps } from './SearchHorizontal'; export default { - title: 'Templates/HorizontalSearch', - component: HorizontalSearch, + title: 'Templates/SearchHorizontal', + component: SearchHorizontal, tags: ['autodocs'], parameters: { docs: { @@ -128,8 +128,8 @@ const noresultsInstance = Snapify.search({ }, }); -export const Default = (args: HorizontalSearchProps, { loaded: { controller } }: { loaded: { controller: SearchController } }) => { - return ; +export const Default = (args: SearchHorizontalProps, { loaded: { controller } }: { loaded: { controller: SearchController } }) => { + return ; }; Default.loaders = [ @@ -141,8 +141,8 @@ Default.loaders = [ }, ]; -export const NoResults = (args: HorizontalSearchProps, { loaded: { controller } }: { loaded: { controller: SearchController } }) => { - return ; +export const NoResults = (args: SearchHorizontalProps, { loaded: { controller } }: { loaded: { controller: SearchController } }) => { + return ; }; NoResults.loaders = [ diff --git a/packages/snap-preact/components/src/components/Templates/HorizontalSearch/HorizontalSearch.test.tsx b/packages/snap-preact/components/src/components/Templates/SearchHorizontal/SearchHorizontal.test.tsx similarity index 65% rename from packages/snap-preact/components/src/components/Templates/HorizontalSearch/HorizontalSearch.test.tsx rename to packages/snap-preact/components/src/components/Templates/SearchHorizontal/SearchHorizontal.test.tsx index 1a09e5f45..d3753394d 100644 --- a/packages/snap-preact/components/src/components/Templates/HorizontalSearch/HorizontalSearch.test.tsx +++ b/packages/snap-preact/components/src/components/Templates/SearchHorizontal/SearchHorizontal.test.tsx @@ -10,7 +10,7 @@ import { Logger } from '@searchspring/snap-logger'; import { Tracker } from '@searchspring/snap-tracker'; import { MockClient } from '@searchspring/snap-shared'; import { QueryStringTranslator, UrlManager, reactLinker } from '@searchspring/snap-url-manager'; -import { HorizontalSearch } from './HorizontalSearch'; +import { SearchHorizontal } from './SearchHorizontal'; import userEvent from '@testing-library/user-event'; const globals = { siteId: '8uyt2m' }; @@ -30,7 +30,7 @@ let controller: SearchController; const mockClient = new MockClient(globals, {}); -describe('HorizontalSearch Template Component', () => { +describe('SearchHorizontal Template Component', () => { beforeEach(async () => { searchConfig = { ...searchConfigDefault }; searchConfig.id = uuidv4().split('-').join(''); @@ -49,31 +49,31 @@ describe('HorizontalSearch Template Component', () => { }); it('renders', () => { - const rendered = render(); - const element = rendered.container.querySelector('.ss__horizontal-search'); + const rendered = render(); + const element = rendered.container.querySelector('.ss__search-horizontal'); expect(element).toBeInTheDocument(); }); it('renders expected sub components', () => { - const rendered = render(); - const element = rendered.container.querySelector('.ss__horizontal-search')!; + const rendered = render(); + const element = rendered.container.querySelector('.ss__search-horizontal')!; const searchHeader = rendered.container.querySelector('.ss__search-header'); - const horizontalFacets = rendered.container.querySelector('.ss__horizontal-facets'); + const facetsHorizontal = rendered.container.querySelector('.ss__facets-horizontal'); const results = rendered.container.querySelector('.ss__results'); const noResults = rendered.container.querySelector('.ss__no-results'); - const topToolBar = rendered.container.querySelector('.ss__horizontal-search__content__toolbar--top-toolbar'); - const bottomToolBar = rendered.container.querySelector('.ss__horizontal-search__content__toolbar--bottom-toolbar'); + const topToolBar = rendered.container.querySelector('.ss__search-horizontal__content__toolbar--top-toolbar'); + const bottomToolBar = rendered.container.querySelector('.ss__search-horizontal__content__toolbar--bottom-toolbar'); - const toggleFiltersButton = rendered.container.querySelector('.ss__horizontal-search__sidebar-wrapper-toggle'); + const toggleFiltersButton = rendered.container.querySelector('.ss__search-horizontal__sidebar-wrapper-toggle'); const mobileSidebar = rendered.container.querySelector('.ss__mobile-sidebar__slideout'); - const dropdown = rendered.container.querySelector('.ss__horizontal-search__sidebar-wrapper-toggle'); + const dropdown = rendered.container.querySelector('.ss__search-horizontal__sidebar-wrapper-toggle'); expect(element).toBeInTheDocument(); expect(searchHeader).toBeInTheDocument(); - expect(horizontalFacets).toBeInTheDocument(); + expect(facetsHorizontal).toBeInTheDocument(); expect(results).toBeInTheDocument(); expect(noResults).not.toBeInTheDocument(); expect(topToolBar).toBeInTheDocument(); @@ -87,9 +87,9 @@ describe('HorizontalSearch Template Component', () => { mockClient.mockData.updateConfig({ search: 'merchandising' }); await controller.search(); - const rendered = render(); + const rendered = render(); - const element = rendered.container.querySelector('.ss__horizontal-search'); + const element = rendered.container.querySelector('.ss__search-horizontal'); const banners = rendered.container.querySelectorAll('.ss__banner'); const headerBanner = rendered.container.querySelector('.ss__banner--header'); const leftBanner = rendered.container.querySelector('.ss__banner--left'); @@ -110,8 +110,8 @@ describe('HorizontalSearch Template Component', () => { mockClient.mockData.updateConfig({ search: 'merchandising' }); await controller.search(); - const rendered = render(); - const element = rendered.container.querySelector('.ss__horizontal-search')!; + const rendered = render(); + const element = rendered.container.querySelector('.ss__search-horizontal')!; const header = rendered.container.querySelector('.ss__search-header'); expect(element).toBeInTheDocument(); @@ -122,9 +122,9 @@ describe('HorizontalSearch Template Component', () => { mockClient.mockData.updateConfig({ search: 'merchandising' }); await controller.search(); - const rendered = render(); - const element = rendered.container.querySelector('.ss__horizontal-search')!; - const topToolBar = rendered.container.querySelector('.ss__horizontal-search__content__toolbar--topToolBar'); + const rendered = render(); + const element = rendered.container.querySelector('.ss__search-horizontal')!; + const topToolBar = rendered.container.querySelector('.ss__search-horizontal__content__toolbar--topToolBar'); expect(element).toBeInTheDocument(); expect(topToolBar).not.toBeInTheDocument(); @@ -134,9 +134,9 @@ describe('HorizontalSearch Template Component', () => { mockClient.mockData.updateConfig({ search: 'merchandising' }); await controller.search(); - const rendered = render(); - const element = rendered.container.querySelector('.ss__horizontal-search')!; - const bottomToolBar = rendered.container.querySelector('.ss__horizontal-search__content__toolbar--bottomToolBar'); + const rendered = render(); + const element = rendered.container.querySelector('.ss__search-horizontal')!; + const bottomToolBar = rendered.container.querySelector('.ss__search-horizontal__content__toolbar--bottomToolBar'); expect(element).toBeInTheDocument(); expect(bottomToolBar).not.toBeInTheDocument(); @@ -146,9 +146,9 @@ describe('HorizontalSearch Template Component', () => { mockClient.mockData.updateConfig({ search: 'merchandising' }); await controller.search(); - const rendered = render(); + const rendered = render(); - const element = rendered.container.querySelector('.ss__horizontal-search'); + const element = rendered.container.querySelector('.ss__search-horizontal'); const banners = rendered.container.querySelectorAll('.ss__banner'); expect(element).toBeInTheDocument(); @@ -157,17 +157,17 @@ describe('HorizontalSearch Template Component', () => { it('renders with classname', () => { const className = 'classy'; - const rendered = render(); + const rendered = render(); - const element = rendered.container.querySelector('.ss__horizontal-search'); + const element = rendered.container.querySelector('.ss__search-horizontal'); expect(element).toBeInTheDocument(); expect(element).toHaveClass(className); }); it('can disable styles', () => { - const rendered = render(); + const rendered = render(); - const element = rendered.container.querySelector('.ss__horizontal-search'); + const element = rendered.container.querySelector('.ss__search-horizontal'); expect(element?.classList).toHaveLength(1); }); @@ -175,37 +175,37 @@ describe('HorizontalSearch Template Component', () => { it('is themeable with ThemeProvider', () => { const theme = { components: { - horizontalSearch: { + searchHorizontal: { className: 'classy', }, }, }; const rendered = render( - + ); - const element = rendered.container.querySelector('.ss__horizontal-search')!; - expect(element).toHaveClass(theme.components.horizontalSearch.className); + const element = rendered.container.querySelector('.ss__search-horizontal')!; + expect(element).toHaveClass(theme.components.searchHorizontal.className); }); it('is themeable with theme prop', () => { const theme = { components: { - horizontalSearch: { + searchHorizontal: { className: 'classy', }, }, }; - const rendered = render(); - const element = rendered.container.querySelector('.ss__horizontal-search')!; - expect(element).toHaveClass(theme.components.horizontalSearch.className); + const rendered = render(); + const element = rendered.container.querySelector('.ss__search-horizontal')!; + expect(element).toHaveClass(theme.components.searchHorizontal.className); }); it('is themeable with theme prop overrides ThemeProvider', () => { const theme = { components: { - horizontalSearch: { + searchHorizontal: { className: 'notClassy', }, }, @@ -213,7 +213,7 @@ describe('HorizontalSearch Template Component', () => { const componentTheme = { components: { - horizontalSearch: { + searchHorizontal: { className: 'classy', }, }, @@ -221,12 +221,12 @@ describe('HorizontalSearch Template Component', () => { const rendered = render( - + ); - const element = rendered.container.querySelector('.ss__horizontal-search')!; - expect(element).toHaveClass(componentTheme.components.horizontalSearch.className); - expect(element).not.toHaveClass(theme.components.horizontalSearch.className); + const element = rendered.container.querySelector('.ss__search-horizontal')!; + expect(element).toHaveClass(componentTheme.components.searchHorizontal.className); + expect(element).not.toHaveClass(theme.components.searchHorizontal.className); }); }); diff --git a/packages/snap-preact/components/src/components/Templates/HorizontalSearch/HorizontalSearch.tsx b/packages/snap-preact/components/src/components/Templates/SearchHorizontal/SearchHorizontal.tsx similarity index 81% rename from packages/snap-preact/components/src/components/Templates/HorizontalSearch/HorizontalSearch.tsx rename to packages/snap-preact/components/src/components/Templates/SearchHorizontal/SearchHorizontal.tsx index 0f4f9ae28..927cf6e54 100644 --- a/packages/snap-preact/components/src/components/Templates/HorizontalSearch/HorizontalSearch.tsx +++ b/packages/snap-preact/components/src/components/Templates/SearchHorizontal/SearchHorizontal.tsx @@ -12,18 +12,18 @@ import { SearchHeader, SearchHeaderProps } from '../../Atoms/SearchHeader'; import { NoResults, NoResultsProps } from '../../Atoms/NoResults'; import { Banner, BannerProps } from '../../Atoms/Merchandising'; import { ContentType } from '@searchspring/snap-store-mobx'; -import { HorizontalFacets, HorizontalFacetsProps } from '../../Organisms/HorizontalFacets'; +import { FacetsHorizontal, FacetsHorizontalProps } from '../../Organisms/FacetsHorizontal'; const CSS = { - HorizontalSearch: ({}: Partial) => css({}), + SearchHorizontal: ({}: Partial) => css({}), }; -export const HorizontalSearch = observer((properties: HorizontalSearchProps): JSX.Element => { +export const SearchHorizontal = observer((properties: SearchHorizontalProps): JSX.Element => { const globalTheme: Theme = useTheme(); - const defaultProps: Partial = {}; + const defaultProps: Partial = {}; - const props = mergeProps('horizontalSearch', globalTheme, defaultProps, properties); + const props = mergeProps('searchHorizontal', globalTheme, defaultProps, properties); const { disableStyles, @@ -41,8 +41,8 @@ export const HorizontalSearch = observer((properties: HorizontalSearchProps): JS } = props; const store = controller.store; - const subProps: HorizontalSearchSubProps = { - HorizontalFacets: { + const subProps: SearchHorizontalSubProps = { + FacetsHorizontal: { // default props // inherited props ...defined({ @@ -139,7 +139,7 @@ export const HorizontalSearch = observer((properties: HorizontalSearchProps): JS if (styleScript && !disableStyles) { styling.css = [styleScript(stylingProps), style]; } else if (!disableStyles) { - styling.css = [CSS.HorizontalSearch(stylingProps), style]; + styling.css = [CSS.SearchHorizontal(stylingProps), style]; } else if (style) { styling.css = [style]; } @@ -173,20 +173,20 @@ export const HorizontalSearch = observer((properties: HorizontalSearchProps): JS return ( -
+
{!hideSearchHeader && } {!hideTopToolbar && store.pagination.totalResults > 0 && ( - + )} - + -
+
{!hideHeaderBanner && } {!hideBannerBanner && } {!hideMiddleToolbar && store.pagination.totalResults > 0 && ( - + )}
@@ -202,7 +202,7 @@ export const HorizontalSearch = observer((properties: HorizontalSearchProps): JS
{!hideBottomToolBar && store.pagination.totalResults > 0 && ( - + )}
@@ -211,7 +211,7 @@ export const HorizontalSearch = observer((properties: HorizontalSearchProps): JS }); //todo improve the controller spreading here.. -export interface HorizontalSearchProps extends ComponentProps { +export interface SearchHorizontalProps extends ComponentProps { controller: SearchController; resultComponent?: ResultComponent; hideSearchHeader?: boolean; @@ -221,8 +221,8 @@ export interface HorizontalSearchProps extends ComponentProps { hideMerchandisingBanners?: boolean | string[]; } -interface HorizontalSearchSubProps { - HorizontalFacets: Partial; +interface SearchHorizontalSubProps { + FacetsHorizontal: Partial; Banner: Partial; TopToolbar: Partial; MiddleToolbar: Partial; diff --git a/packages/snap-preact/components/src/components/Templates/SearchHorizontal/index.ts b/packages/snap-preact/components/src/components/Templates/SearchHorizontal/index.ts new file mode 100644 index 000000000..0b5d3bbf1 --- /dev/null +++ b/packages/snap-preact/components/src/components/Templates/SearchHorizontal/index.ts @@ -0,0 +1 @@ +export * from './SearchHorizontal'; diff --git a/packages/snap-preact/components/src/components/Templates/HorizontalSearch/readme.md b/packages/snap-preact/components/src/components/Templates/SearchHorizontal/readme.md similarity index 80% rename from packages/snap-preact/components/src/components/Templates/HorizontalSearch/readme.md rename to packages/snap-preact/components/src/components/Templates/SearchHorizontal/readme.md index e51aaa896..fa986107a 100644 --- a/packages/snap-preact/components/src/components/Templates/HorizontalSearch/readme.md +++ b/packages/snap-preact/components/src/components/Templates/SearchHorizontal/readme.md @@ -1,10 +1,10 @@ -# HorizontalSearch Template +# SearchHorizontal Template Renders a Search Results Page. ## Sub-components -- HorizontalFacets +- FacetsHorizontal - LayoutSelector - Results - NoResults @@ -18,28 +18,28 @@ Renders a Search Results Page. The required `controller` prop specifies a reference to the search controller. ```jsx - + ``` ### hideSearchHeader The `hideSearchHeader` prop specifies if the SearchHeader component should be rendered. ```jsx - + ``` ### hidetopToolBar The `hidetopToolBar` prop specifies if the top ToolBar component should be rendered. ```jsx - + ``` ### hideBottomToolBar The `hideBottomToolBar` prop specifies if the bottom ToolBar component should be rendered. ```jsx - + ``` @@ -47,19 +47,19 @@ The `hideBottomToolBar` prop specifies if the bottom ToolBar component should be The `hideMerchandisingBanners` prop specifies if merchandising banners should render. This can take a boolean to hide all banners, or an array of specific banner types you wish to hide. ```jsx - + ``` or ```jsx - + ``` ### hideLayoutSelector The `hideLayoutSelector` prop specifies if the layoutSelector component should be rendered. ```jsx - + ``` ### layoutConfig @@ -119,5 +119,5 @@ const layoutConfig = { ] } - + ``` \ No newline at end of file diff --git a/packages/snap-preact/components/src/index.ts b/packages/snap-preact/components/src/index.ts index e9a17bd5e..23661a482 100644 --- a/packages/snap-preact/components/src/index.ts +++ b/packages/snap-preact/components/src/index.ts @@ -56,20 +56,20 @@ export * from './components/Molecules/VariantSelection'; export * from './components/Organisms/BranchOverride'; export * from './components/Organisms/Facet'; export * from './components/Organisms/Facets'; -export * from './components/Organisms/HorizontalFacets'; +export * from './components/Organisms/FacetsHorizontal'; export * from './components/Organisms/FilterSummary'; export * from './components/Organisms/MobileSidebar'; -export * from './components/Organisms/RecommendationBundle'; -export * from './components/Organisms/RecommendationGrid'; export * from './components/Organisms/Results'; export * from './components/Organisms/Sidebar'; export * from './components/Organisms/Toolbar'; -// TEMAPLTES +// TEMPLATES export * from './components/Templates/Autocomplete'; export * from './components/Templates/Recommendation'; +export * from './components/Templates/RecommendationBundle'; +export * from './components/Templates/RecommendationGrid'; export * from './components/Templates/Search'; -export * from './components/Templates/HorizontalSearch'; +export * from './components/Templates/SearchHorizontal'; // TRACKERS export * from './components/Trackers/Recommendation/ProfileTracker'; diff --git a/packages/snap-preact/components/src/providers/langComponents.ts b/packages/snap-preact/components/src/providers/langComponents.ts index 131166171..bc4feb6f3 100644 --- a/packages/snap-preact/components/src/providers/langComponents.ts +++ b/packages/snap-preact/components/src/providers/langComponents.ts @@ -44,10 +44,10 @@ import type { SortByLang } from '../components/Molecules/SortBy'; // import type { SwatchesLang } from '../components/Molecules/Swatches'; // import type { VariantSelectionLang } from '../components/Molecules/VariantSelection'; import type { FacetLang } from '../components/Organisms/Facet'; -import type { HorizontalFacetsLang } from '../components/Organisms/HorizontalFacets'; +import type { FacetsHorizontalLang } from '../components/Organisms/FacetsHorizontal'; // import type { FacetsLang } from '../components/Organisms/Facets'; import type { FilterSummaryLang } from '../components/Organisms/FilterSummary'; -import type { RecommendationBundleLang } from '../components/Organisms/RecommendationBundle'; +import type { RecommendationBundleLang } from '../components/Templates/RecommendationBundle'; // import type { ResultsLang } from '../components/Organisms/Results'; import type { SearchHeaderLang } from '../components/Atoms/SearchHeader'; import type { SidebarLang } from '../components/Organisms/Sidebar'; @@ -55,7 +55,7 @@ import type { SidebarLang } from '../components/Organisms/Sidebar'; import type { AutocompleteLang } from '../components/Templates/Autocomplete'; import type { RecommendationLang } from '../components/Templates/Recommendation'; import type { SearchLang } from '../components/Templates/Search'; -// import type { HorizontalSearchLang } from '../components/Templates/HorizontalSearch'; +// import type { SearchHorizontalLang } from '../components/Templates/SearchHorizontal'; import type { NoResultsLang } from '../components/Atoms/NoResults'; import type { MobileSidebarLang } from '../components/Organisms/MobileSidebar'; @@ -115,7 +115,7 @@ export type LangComponentOverrides = { /* ORGANISMS */ facet?: Partial; // facets?: Partial - horizontalFacets?: Partial; + facetsHorizontal?: Partial; filterSummary?: Partial; noResults?: Partial; recommendationBundle?: Partial; @@ -128,7 +128,7 @@ export type LangComponentOverrides = { autocomplete?: Partial; recommendation?: Partial; search?: Partial; - // horizontalSearch?: Partial + // searchHorizontal?: Partial }; export type LangComponents = { @@ -185,7 +185,7 @@ export type LangComponents = { /* ORGANISMS */ facet: FacetLang; // facets: FacetsLang - horizontalFacets: HorizontalFacetsLang; + facetsHorizontal: FacetsHorizontalLang; filterSummary: FilterSummaryLang; noResults: NoResultsLang; recommendationBundle: RecommendationBundleLang; @@ -198,5 +198,5 @@ export type LangComponents = { autocomplete: AutocompleteLang; recommendation: RecommendationLang; search: SearchLang; - // horizontalSearch: HorizontalSearchLang + // searchHorizontal: SearchHorizontalLang }; diff --git a/packages/snap-preact/components/src/providers/theme.ts b/packages/snap-preact/components/src/providers/theme.ts index 486f67ee7..a6ac81bdf 100644 --- a/packages/snap-preact/components/src/providers/theme.ts +++ b/packages/snap-preact/components/src/providers/theme.ts @@ -1,4 +1,4 @@ -import { ThemeComponents } from './themeComponents'; +import { ThemeComponentOverrides } from './themeComponents'; import { ListOption } from '../types'; import type { DeepPartial } from '../../../src/types'; @@ -56,11 +56,11 @@ export type Theme = { name?: string; // Used as a flag in components to provide backwards compatability variables?: ThemeVariables; responsive?: [ThemeResponsive, ThemeResponsive, ThemeResponsive, ThemeResponsive]; - components?: ThemeComponents; + components?: ThemeComponentOverrides; layoutOptions?: ListOption[]; }; -type ThemeResponsive = Pick; +export type ThemeResponsive = Pick; export type ThemePartial = Omit & { variables?: ThemeVariablesPartial }; export type ThemeOverrides = Pick; export type ThemeMinimal = Pick; diff --git a/packages/snap-preact/components/src/providers/themeComponents.ts b/packages/snap-preact/components/src/providers/themeComponents.ts index be48fa6d6..1cf51ebd7 100644 --- a/packages/snap-preact/components/src/providers/themeComponents.ts +++ b/packages/snap-preact/components/src/providers/themeComponents.ts @@ -45,19 +45,19 @@ import type { SwatchesProps } from '../components/Molecules/Swatches'; import type { VariantSelectionProps } from '../components/Molecules/VariantSelection'; import type { BranchOverrideProps } from '../components/Organisms/BranchOverride'; import type { FacetProps } from '../components/Organisms/Facet'; -import type { HorizontalFacetsProps } from '../components/Organisms/HorizontalFacets'; +import type { FacetsHorizontalProps } from '../components/Organisms/FacetsHorizontal'; import type { FacetsProps } from '../components/Organisms/Facets'; import type { FilterSummaryProps } from '../components/Organisms/FilterSummary'; -import type { RecommendationBundleProps } from '../components/Organisms/RecommendationBundle'; -import type { RecommendationGridProps } from '../components/Organisms/RecommendationGrid'; import type { ResultsProps } from '../components/Organisms/Results'; import type { SearchHeaderProps } from '../components/Atoms/SearchHeader'; import type { SidebarProps } from '../components/Organisms/Sidebar'; import type { ToolbarProps, ToolbarNames } from '../components/Organisms/Toolbar'; import type { AutocompleteProps } from '../components/Templates/Autocomplete'; import type { RecommendationProps } from '../components/Templates/Recommendation'; +import type { RecommendationBundleProps } from '../components/Templates/RecommendationBundle'; +import type { RecommendationGridProps } from '../components/Templates/RecommendationGrid'; import type { SearchProps } from '../components/Templates/Search'; -import type { HorizontalSearchProps } from '../components/Templates/HorizontalSearch'; +import type { SearchHorizontalProps } from '../components/Templates/SearchHorizontal'; import type { NoResultsProps } from '../components/Atoms/NoResults'; import type { MobileSidebarProps } from '../components/Organisms/MobileSidebar'; @@ -72,6 +72,76 @@ type UnNamedThemeComponentSelectors = ComponentTyp type GenericComponentProps = Partial>; export type ThemeComponents = { + /* ATOMS */ + badgeImage: GenericComponentProps; + badgePill: GenericComponentProps; + badgeRectangle: GenericComponentProps; + badgeText: GenericComponentProps; + breadcrumbs: GenericComponentProps; + button: GenericComponentProps; + dropdown: GenericComponentProps; + formattedNumber: GenericComponentProps; + icon: GenericComponentProps; + image: GenericComponentProps; + loadingBar: GenericComponentProps; + banner: GenericComponentProps; + inlineBanner: GenericComponentProps; + overlay: GenericComponentProps; + price: GenericComponentProps; + skeleton: GenericComponentProps; + terms: GenericComponentProps; + toggle: GenericComponentProps; + /* MOLECULES */ + calloutBadge: GenericComponentProps; + carousel: GenericComponentProps; + checkbox: GenericComponentProps; + grid: GenericComponentProps; + layoutSelector: GenericComponentProps; + list: GenericComponentProps; + radio: GenericComponentProps; + errorHandler: GenericComponentProps; + facetGridOptions: GenericComponentProps; + facetHierarchyOptions: GenericComponentProps; + facetListOptions: GenericComponentProps; + facetPaletteOptions: GenericComponentProps; + facetSlider: GenericComponentProps; + facetToggle: GenericComponentProps; + filter: GenericComponentProps; + loadMore: GenericComponentProps; + overlayBadge: GenericComponentProps; + pagination: GenericComponentProps; + perPage: GenericComponentProps; + radioList: GenericComponentProps; + rating: GenericComponentProps; + result: GenericComponentProps; + searchInput: GenericComponentProps; + select: GenericComponentProps; + slideout: GenericComponentProps; + sortBy: GenericComponentProps; + swatches: GenericComponentProps; + variantSelection: GenericComponentProps; + /* ORGANISMS */ + branchOverride: GenericComponentProps; + facet: GenericComponentProps; + facets: GenericComponentProps; + facetsHorizontal: GenericComponentProps; + filterSummary: GenericComponentProps; + noResults: GenericComponentProps; + results: GenericComponentProps; + searchHeader: GenericComponentProps; + sidebar: GenericComponentProps; + mobileSidebar: GenericComponentProps; + toolbar: GenericComponentProps; + /* TEMPLATES */ + autocomplete: GenericComponentProps; + recommendation: GenericComponentProps; + recommendationBundle: GenericComponentProps; + recommendationGrid: GenericComponentProps; + search: GenericComponentProps; + searchHorizontal: GenericComponentProps; +}; + +export type ThemeComponentOverrides = { /* ATOMS */ [K in UnNamedThemeComponentSelectors<'badgeImage'>]?: GenericComponentProps; } & { [K in UnNamedThemeComponentSelectors<'badgePill'>]?: GenericComponentProps } & { @@ -123,19 +193,19 @@ export type ThemeComponents = { } /* ORGANISMS */ & { [K in UnNamedThemeComponentSelectors<'branchOverride'>]?: GenericComponentProps } & { [K in UnNamedThemeComponentSelectors<'facet'>]?: GenericComponentProps; } & { [K in UnNamedThemeComponentSelectors<'facets'>]?: GenericComponentProps } & { - [K in UnNamedThemeComponentSelectors<'horizontalFacets'>]?: GenericComponentProps; + [K in UnNamedThemeComponentSelectors<'facetsHorizontal'>]?: GenericComponentProps; } & { [K in UnNamedThemeComponentSelectors<'filterSummary'>]?: GenericComponentProps } & { [K in UnNamedThemeComponentSelectors<'noResults'>]?: GenericComponentProps; -} & { [K in UnNamedThemeComponentSelectors<'recommendationBundle'>]?: GenericComponentProps } & { +} & { [K in UnNamedThemeComponentSelectors<'results'>]?: GenericComponentProps; } & { [K in UnNamedThemeComponentSelectors<'searchHeader'>]?: GenericComponentProps } & { [K in UnNamedThemeComponentSelectors<'sidebar'>]?: GenericComponentProps; } & { [K in UnNamedThemeComponentSelectors<'mobileSidebar'>]?: GenericComponentProps } & { [K in NamedThemeComponentSelectors<'toolbar', ToolbarNames>]?: GenericComponentProps; -} & { - [K in UnNamedThemeComponentSelectors<'recommendationGrid'>]?: GenericComponentProps; } /* TEMPLATES */ & { [K in UnNamedThemeComponentSelectors<'autocomplete'>]?: GenericComponentProps } & { [K in UnNamedThemeComponentSelectors<'recommendation'>]?: GenericComponentProps; +} & { [K in UnNamedThemeComponentSelectors<'recommendationBundle'>]?: GenericComponentProps } & { + [K in UnNamedThemeComponentSelectors<'recommendationGrid'>]?: GenericComponentProps; } & { [K in UnNamedThemeComponentSelectors<'search'>]?: GenericComponentProps } & { - [K in UnNamedThemeComponentSelectors<'horizontalSearch'>]?: GenericComponentProps; + [K in UnNamedThemeComponentSelectors<'searchHorizontal'>]?: GenericComponentProps; }; diff --git a/packages/snap-preact/components/src/themes/bocachica/bocachica.ts b/packages/snap-preact/components/src/themes/bocachica/bocachica.ts new file mode 100644 index 000000000..2106f6157 --- /dev/null +++ b/packages/snap-preact/components/src/themes/bocachica/bocachica.ts @@ -0,0 +1,31 @@ +import { Theme, ThemeVariables } from '../../providers'; +import { components } from './components'; +import { layoutOptions } from './layoutOptions'; +import { responsive } from './responsive'; + +const bocachicaVariables: ThemeVariables = { + breakpoints: [0, 767, 999, 1299], + colors: { + primary: '#202223', + secondary: '#6d7175', + accent: '#6d7175', + active: { + foreground: '#ffffff', + background: '#6d7175', + accent: '#ffffff', + }, + hover: { + foreground: '#ffffff', + background: '#000000', + accent: '#ffffff', + }, + }, +}; + +export const bocachica: Theme = { + name: 'bocachica', + variables: bocachicaVariables, + components, + layoutOptions, + responsive, +}; diff --git a/packages/snap-preact/components/src/themes/bocachica/components/atoms/badgeImage.ts b/packages/snap-preact/components/src/themes/bocachica/components/atoms/badgeImage.ts new file mode 100644 index 000000000..3b63bccc1 --- /dev/null +++ b/packages/snap-preact/components/src/themes/bocachica/components/atoms/badgeImage.ts @@ -0,0 +1,15 @@ +import { css } from '@emotion/react'; +import type { BadgeImageProps } from '../../../../components/Atoms/BadgeImage'; + +// CSS in JS style script for the BadgeImage component +const badgeImageStyleScript = () => { + return css({ + maxHeight: '90%', + maxWidth: '90%', + }); +}; + +// BadgeImage component props +export const badgeImage: Partial = { + styleScript: badgeImageStyleScript, +}; diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/badgepill.ts b/packages/snap-preact/components/src/themes/bocachica/components/atoms/badgePill.ts similarity index 88% rename from packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/badgepill.ts rename to packages/snap-preact/components/src/themes/bocachica/components/atoms/badgePill.ts index 9508f2a13..8eeb46a54 100644 --- a/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/badgepill.ts +++ b/packages/snap-preact/components/src/themes/bocachica/components/atoms/badgePill.ts @@ -1,5 +1,5 @@ import { css } from '@emotion/react'; -import type { BadgePillProps } from '../../../../../components/Atoms/BadgePill'; +import type { BadgePillProps } from '../../../../components/Atoms/BadgePill'; // CSS in JS style script for the BadgePill component const badgePillStyleScript = ({ color, colorText, theme }: BadgePillProps) => { diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/badgerectangle.ts b/packages/snap-preact/components/src/themes/bocachica/components/atoms/badgeRectangle.ts similarity index 87% rename from packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/badgerectangle.ts rename to packages/snap-preact/components/src/themes/bocachica/components/atoms/badgeRectangle.ts index 9c805ca79..712488220 100644 --- a/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/badgerectangle.ts +++ b/packages/snap-preact/components/src/themes/bocachica/components/atoms/badgeRectangle.ts @@ -1,5 +1,5 @@ import { css } from '@emotion/react'; -import type { BadgeRectangleProps } from '../../../../../components/Atoms/BadgeRectangle'; +import type { BadgeRectangleProps } from '../../../../components/Atoms/BadgeRectangle'; // CSS in JS style script for the BadgeRectangle component const badgeRectangleStyleScript = ({ color, colorText, theme }: BadgeRectangleProps) => { diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/badgetext.ts b/packages/snap-preact/components/src/themes/bocachica/components/atoms/badgeText.ts similarity index 88% rename from packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/badgetext.ts rename to packages/snap-preact/components/src/themes/bocachica/components/atoms/badgeText.ts index eba5d7a98..d7ea0ea51 100644 --- a/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/badgetext.ts +++ b/packages/snap-preact/components/src/themes/bocachica/components/atoms/badgeText.ts @@ -1,5 +1,5 @@ import { css } from '@emotion/react'; -import type { BadgeTextProps } from '../../../../../components/Atoms/BadgeText'; +import type { BadgeTextProps } from '../../../../components/Atoms/BadgeText'; // CSS in JS style script for the BadgeText component const badgeTextStyleScript = ({ colorText, theme }: BadgeTextProps) => { diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/banner.ts b/packages/snap-preact/components/src/themes/bocachica/components/atoms/banner.ts similarity index 83% rename from packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/banner.ts rename to packages/snap-preact/components/src/themes/bocachica/components/atoms/banner.ts index 02c96acec..677dc75f5 100644 --- a/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/banner.ts +++ b/packages/snap-preact/components/src/themes/bocachica/components/atoms/banner.ts @@ -1,5 +1,5 @@ import { css } from '@emotion/react'; -import type { BannerProps } from '../../../../../components/Atoms/Merchandising/Banner'; +import type { BannerProps } from '../../../../components/Atoms/Merchandising/Banner'; // CSS in JS style script for the Banner component const bannerStyleScript = ({ theme }: BannerProps) => { diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/breadcrumbs.ts b/packages/snap-preact/components/src/themes/bocachica/components/atoms/breadcrumbs.ts similarity index 87% rename from packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/breadcrumbs.ts rename to packages/snap-preact/components/src/themes/bocachica/components/atoms/breadcrumbs.ts index 3eec7fe43..b387554ac 100644 --- a/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/breadcrumbs.ts +++ b/packages/snap-preact/components/src/themes/bocachica/components/atoms/breadcrumbs.ts @@ -1,5 +1,5 @@ import { css } from '@emotion/react'; -import type { BreadcrumbsProps } from '../../../../../components/Atoms/Breadcrumbs'; +import type { BreadcrumbsProps } from '../../../../components/Atoms/Breadcrumbs'; // CSS in JS style script for the Breadcrumbs component const breadcrumbsStyleScript = ({ theme }: BreadcrumbsProps) => { diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/button.ts b/packages/snap-preact/components/src/themes/bocachica/components/atoms/button.ts similarity index 93% rename from packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/button.ts rename to packages/snap-preact/components/src/themes/bocachica/components/atoms/button.ts index 3c4091e50..a9a30a747 100644 --- a/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/button.ts +++ b/packages/snap-preact/components/src/themes/bocachica/components/atoms/button.ts @@ -1,5 +1,5 @@ import { css } from '@emotion/react'; -import type { ButtonProps } from '../../../../../components/Atoms/Button'; +import type { ButtonProps } from '../../../../components/Atoms/Button'; // CSS in JS style script for the Button component const buttonStyleScript = ({ color, backgroundColor, borderColor, theme }: ButtonProps) => { diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/dropdown.ts b/packages/snap-preact/components/src/themes/bocachica/components/atoms/dropdown.ts similarity index 92% rename from packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/dropdown.ts rename to packages/snap-preact/components/src/themes/bocachica/components/atoms/dropdown.ts index 1c3b37ebf..70ca705c9 100644 --- a/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/dropdown.ts +++ b/packages/snap-preact/components/src/themes/bocachica/components/atoms/dropdown.ts @@ -1,5 +1,5 @@ import { css } from '@emotion/react'; -import type { DropdownProps } from '../../../../../components/Atoms/Dropdown'; +import type { DropdownProps } from '../../../../components/Atoms/Dropdown'; // CSS in JS style script for the Dropdown component const dropdownStyleScript = ({ disableOverlay, theme }: DropdownProps) => { diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/formattednumber.ts b/packages/snap-preact/components/src/themes/bocachica/components/atoms/formattedNumber.ts similarity index 82% rename from packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/formattednumber.ts rename to packages/snap-preact/components/src/themes/bocachica/components/atoms/formattedNumber.ts index 66570c777..214172d27 100644 --- a/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/formattednumber.ts +++ b/packages/snap-preact/components/src/themes/bocachica/components/atoms/formattedNumber.ts @@ -1,5 +1,5 @@ import { css } from '@emotion/react'; -import type { FormattedNumberProps } from '../../../../../components/Atoms/FormattedNumber'; +import type { FormattedNumberProps } from '../../../../components/Atoms/FormattedNumber'; // CSS in JS style script for the FormattedNumber component const formattedNumberStyleScript = ({ theme }: FormattedNumberProps) => { diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/icon.ts b/packages/snap-preact/components/src/themes/bocachica/components/atoms/icon.ts similarity index 87% rename from packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/icon.ts rename to packages/snap-preact/components/src/themes/bocachica/components/atoms/icon.ts index 1b371f712..7bab7d129 100644 --- a/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/icon.ts +++ b/packages/snap-preact/components/src/themes/bocachica/components/atoms/icon.ts @@ -1,5 +1,5 @@ import { css } from '@emotion/react'; -import type { IconProps } from '../../../../../components/Atoms/Icon'; +import type { IconProps } from '../../../../components/Atoms/Icon'; // CSS in JS style script for the Icon component const iconStyleScript = ({ color, height, width, size, theme }: IconProps) => { diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/image.ts b/packages/snap-preact/components/src/themes/bocachica/components/atoms/image.ts similarity index 90% rename from packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/image.ts rename to packages/snap-preact/components/src/themes/bocachica/components/atoms/image.ts index 28f039d54..dfbf4633f 100644 --- a/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/image.ts +++ b/packages/snap-preact/components/src/themes/bocachica/components/atoms/image.ts @@ -1,5 +1,5 @@ import { css } from '@emotion/react'; -import type { ImageProps } from '../../../../../components/Atoms/Image'; +import type { ImageProps } from '../../../../components/Atoms/Image'; // CSS in JS style script for the Image component const imageStyleScript = ({ visibility, theme }: ImageProps & { visibility: React.CSSProperties['visibility'] }) => { diff --git a/packages/snap-preact/components/src/themes/bocachica/components/atoms/index.ts b/packages/snap-preact/components/src/themes/bocachica/components/atoms/index.ts new file mode 100644 index 000000000..80c598b3c --- /dev/null +++ b/packages/snap-preact/components/src/themes/bocachica/components/atoms/index.ts @@ -0,0 +1,21 @@ +// ATOMS +export { badgeImage } from './badgeImage'; +export { badgePill } from './badgePill'; +export { badgeRectangle } from './badgeRectangle'; +export { badgeText } from './badgeText'; +export { banner } from './banner'; +export { breadcrumbs } from './breadcrumbs'; +export { button } from './button'; +export { dropdown } from './dropdown'; +export { formattedNumber } from './formattedNumber'; +export { icon } from './icon'; +export { image } from './image'; +export { inlineBanner } from './inlineBanner'; +export { loadingBar } from './loadingBar'; +export { noResults } from './noResults'; +export { overlay } from './overlay'; +export { price } from './price'; +export { searchHeader } from './searchHeader'; +export { skeleton } from './skeleton'; +export { terms } from './terms'; +export { toggle } from './toggle'; diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/inlinebanner.ts b/packages/snap-preact/components/src/themes/bocachica/components/atoms/inlineBanner.ts similarity index 88% rename from packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/inlinebanner.ts rename to packages/snap-preact/components/src/themes/bocachica/components/atoms/inlineBanner.ts index da950bee5..28e29249c 100644 --- a/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/inlinebanner.ts +++ b/packages/snap-preact/components/src/themes/bocachica/components/atoms/inlineBanner.ts @@ -1,5 +1,5 @@ import { css } from '@emotion/react'; -import type { InlineBannerProps } from '../../../../../components/Atoms/Merchandising/InlineBanner'; +import type { InlineBannerProps } from '../../../../components/Atoms/Merchandising/InlineBanner'; // CSS in JS style script for the InlineBanner component const inlineBannerStyleScript = ({ width, theme }: InlineBannerProps) => { diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/loadingbar.ts b/packages/snap-preact/components/src/themes/bocachica/components/atoms/loadingBar.ts similarity index 92% rename from packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/loadingbar.ts rename to packages/snap-preact/components/src/themes/bocachica/components/atoms/loadingBar.ts index 11a508d74..3f1c68c91 100644 --- a/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/loadingbar.ts +++ b/packages/snap-preact/components/src/themes/bocachica/components/atoms/loadingBar.ts @@ -1,5 +1,5 @@ import { css, keyframes } from '@emotion/react'; -import type { LoadingBarProps } from '../../../../../components/Atoms/Loading'; +import type { LoadingBarProps } from '../../../../components/Atoms/Loading'; // CSS in JS style script for the LoadingBar component const loadingBarStyleScript = ({ color, height, backgroundColor, theme }: LoadingBarProps) => { diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/noresults.ts b/packages/snap-preact/components/src/themes/bocachica/components/atoms/noResults.ts similarity index 84% rename from packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/noresults.ts rename to packages/snap-preact/components/src/themes/bocachica/components/atoms/noResults.ts index d16641304..f4064ac7e 100644 --- a/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/noresults.ts +++ b/packages/snap-preact/components/src/themes/bocachica/components/atoms/noResults.ts @@ -1,5 +1,5 @@ import { css } from '@emotion/react'; -import type { NoResultsProps } from '../../../../../components/Atoms/NoResults'; +import type { NoResultsProps } from '../../../../components/Atoms/NoResults'; // CSS in JS style script for the NoResults component const noResultsStyleScript = ({ theme }: NoResultsProps) => { diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/overlay.ts b/packages/snap-preact/components/src/themes/bocachica/components/atoms/overlay.ts similarity index 90% rename from packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/overlay.ts rename to packages/snap-preact/components/src/themes/bocachica/components/atoms/overlay.ts index 67e65ee40..948d520f2 100644 --- a/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/overlay.ts +++ b/packages/snap-preact/components/src/themes/bocachica/components/atoms/overlay.ts @@ -1,5 +1,5 @@ import { css } from '@emotion/react'; -import type { OverlayProps } from '../../../../../components/Atoms/Overlay'; +import type { OverlayProps } from '../../../../components/Atoms/Overlay'; // CSS in JS style script for the Overlay component const overlayStyleScript = ({ color, transitionSpeed, theme }: OverlayProps) => { diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/price.ts b/packages/snap-preact/components/src/themes/bocachica/components/atoms/price.ts similarity index 87% rename from packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/price.ts rename to packages/snap-preact/components/src/themes/bocachica/components/atoms/price.ts index db30bce07..2489ad976 100644 --- a/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/price.ts +++ b/packages/snap-preact/components/src/themes/bocachica/components/atoms/price.ts @@ -1,5 +1,5 @@ import { css } from '@emotion/react'; -import type { PriceProps } from '../../../../../components/Atoms/Price'; +import type { PriceProps } from '../../../../components/Atoms/Price'; // CSS in JS style script for the Price component const priceStyleScript = ({ theme }: PriceProps) => { diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/searchheader.ts b/packages/snap-preact/components/src/themes/bocachica/components/atoms/searchHeader.ts similarity index 84% rename from packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/searchheader.ts rename to packages/snap-preact/components/src/themes/bocachica/components/atoms/searchHeader.ts index a388b91b9..2ae8cc307 100644 --- a/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/searchheader.ts +++ b/packages/snap-preact/components/src/themes/bocachica/components/atoms/searchHeader.ts @@ -1,5 +1,5 @@ import { css } from '@emotion/react'; -import type { SearchHeaderProps } from '../../../../../components/Atoms/SearchHeader'; +import type { SearchHeaderProps } from '../../../../components/Atoms/SearchHeader'; // CSS in JS style script for the SearchHeader component const searchHeaderStyleScript = ({ theme }: SearchHeaderProps) => { diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/skeleton.ts b/packages/snap-preact/components/src/themes/bocachica/components/atoms/skeleton.ts similarity index 94% rename from packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/skeleton.ts rename to packages/snap-preact/components/src/themes/bocachica/components/atoms/skeleton.ts index 36a0072f0..2e4c99d70 100644 --- a/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/skeleton.ts +++ b/packages/snap-preact/components/src/themes/bocachica/components/atoms/skeleton.ts @@ -1,5 +1,5 @@ import { css, keyframes } from '@emotion/react'; -import type { SkeletonProps } from '../../../../../components/Atoms/Skeleton'; +import type { SkeletonProps } from '../../../../components/Atoms/Skeleton'; // CSS in JS style script for the Skeleton component const skeletonStyleScript = ({ width, height, round, backgroundColor, animatedColor, theme }: SkeletonProps) => { diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/terms.ts b/packages/snap-preact/components/src/themes/bocachica/components/atoms/terms.ts similarity index 83% rename from packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/terms.ts rename to packages/snap-preact/components/src/themes/bocachica/components/atoms/terms.ts index c201121c8..a57b6b47e 100644 --- a/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/terms.ts +++ b/packages/snap-preact/components/src/themes/bocachica/components/atoms/terms.ts @@ -1,5 +1,5 @@ import { css } from '@emotion/react'; -import type { TermsProps } from '../../../../../components/Atoms/Terms'; +import type { TermsProps } from '../../../../components/Atoms/Terms'; // CSS in JS style script for the Terms component const termsStyleScript = ({ theme }: TermsProps) => { diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/toggle.ts b/packages/snap-preact/components/src/themes/bocachica/components/atoms/toggle.ts similarity index 96% rename from packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/toggle.ts rename to packages/snap-preact/components/src/themes/bocachica/components/atoms/toggle.ts index 2af7fc71c..63eb748da 100644 --- a/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/toggle.ts +++ b/packages/snap-preact/components/src/themes/bocachica/components/atoms/toggle.ts @@ -1,5 +1,5 @@ import { css } from '@emotion/react'; -import type { ToggleProps } from '../../../../../components/Atoms/Toggle'; +import type { ToggleProps } from '../../../../components/Atoms/Toggle'; // CSS in JS style script for the Toggle component const toggleStyleScript = ({ activeColor, inactiveColor: deActiveColor, buttonColor, size, theme }: ToggleProps) => { diff --git a/packages/snap-preact/components/src/themes/bocachica/components/index.ts b/packages/snap-preact/components/src/themes/bocachica/components/index.ts new file mode 100644 index 000000000..3a73bac8a --- /dev/null +++ b/packages/snap-preact/components/src/themes/bocachica/components/index.ts @@ -0,0 +1,13 @@ +import * as atoms from './atoms'; +import * as molecules from './molecules'; +import * as organisms from './organisms'; +import * as templates from './templates'; + +import type { ThemeComponents } from '../../../providers'; + +export const components: ThemeComponents = { + ...atoms, + ...molecules, + ...organisms, + ...templates, +}; diff --git a/packages/snap-preact/components/src/themes/bocachica/components/molecules/calloutBadge.ts b/packages/snap-preact/components/src/themes/bocachica/components/molecules/calloutBadge.ts new file mode 100644 index 000000000..a7f807e15 --- /dev/null +++ b/packages/snap-preact/components/src/themes/bocachica/components/molecules/calloutBadge.ts @@ -0,0 +1,4 @@ +import type { CalloutBadgeProps } from '../../../../components/Molecules/CalloutBadge'; + +// CalloutBadge component props +export const calloutBadge: Partial = {}; diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/carousel.ts b/packages/snap-preact/components/src/themes/bocachica/components/molecules/carousel.ts similarity index 97% rename from packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/carousel.ts rename to packages/snap-preact/components/src/themes/bocachica/components/molecules/carousel.ts index f768088d4..e448c20f1 100644 --- a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/carousel.ts +++ b/packages/snap-preact/components/src/themes/bocachica/components/molecules/carousel.ts @@ -1,5 +1,5 @@ import { css } from '@emotion/react'; -import type { CarouselProps } from '../../../../../components/Molecules/Carousel'; +import type { CarouselProps } from '../../../../components/Molecules/Carousel'; // CSS in JS style script for the Carousel component const carouselStyleScript = ({ vertical, theme }: CarouselProps) => { diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/checkbox.ts b/packages/snap-preact/components/src/themes/bocachica/components/molecules/checkbox.ts similarity index 90% rename from packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/checkbox.ts rename to packages/snap-preact/components/src/themes/bocachica/components/molecules/checkbox.ts index eb0fd9ee6..218cf5e6a 100644 --- a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/checkbox.ts +++ b/packages/snap-preact/components/src/themes/bocachica/components/molecules/checkbox.ts @@ -1,5 +1,5 @@ import { css } from '@emotion/react'; -import type { CheckboxProps } from '../../../../../components/Molecules/Checkbox'; +import type { CheckboxProps } from '../../../../components/Molecules/Checkbox'; // CSS in JS style script for the Checkbox component const checkboxStyleScript = ({ size, color, theme }: CheckboxProps) => { diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/errorhandler.ts b/packages/snap-preact/components/src/themes/bocachica/components/molecules/errorHandler.ts similarity index 91% rename from packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/errorhandler.ts rename to packages/snap-preact/components/src/themes/bocachica/components/molecules/errorHandler.ts index 0ea650d51..3383ecb3b 100644 --- a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/errorhandler.ts +++ b/packages/snap-preact/components/src/themes/bocachica/components/molecules/errorHandler.ts @@ -1,6 +1,6 @@ import { css } from '@emotion/react'; -import type { ErrorHandlerProps } from '../../../../../components/Molecules/ErrorHandler'; -import { lightenDarkenColor } from '../../../../../utilities'; +import type { ErrorHandlerProps } from '../../../../components/Molecules/ErrorHandler'; +import { lightenDarkenColor } from '../../../../utilities'; // CSS in JS style script for the ErrorHandler component const errorHandlerStyleScript = ({ theme }: ErrorHandlerProps) => { diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/facetgridoptions.ts b/packages/snap-preact/components/src/themes/bocachica/components/molecules/facetGridOptions.ts similarity index 95% rename from packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/facetgridoptions.ts rename to packages/snap-preact/components/src/themes/bocachica/components/molecules/facetGridOptions.ts index 1ee50e495..fad3ebc3d 100644 --- a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/facetgridoptions.ts +++ b/packages/snap-preact/components/src/themes/bocachica/components/molecules/facetGridOptions.ts @@ -1,5 +1,5 @@ import { css } from '@emotion/react'; -import type { FacetGridOptionsProps } from '../../../../../components/Molecules/FacetGridOptions'; +import type { FacetGridOptionsProps } from '../../../../components/Molecules/FacetGridOptions'; // CSS in JS style script for the FacetGridOptions component const facetGridOptionsStyleScript = ({ columns, gapSize, gridSize, theme }: FacetGridOptionsProps) => { diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/facethierarchyoptions.ts b/packages/snap-preact/components/src/themes/bocachica/components/molecules/facetHierarchyOptions.ts similarity index 95% rename from packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/facethierarchyoptions.ts rename to packages/snap-preact/components/src/themes/bocachica/components/molecules/facetHierarchyOptions.ts index 31074be1c..6b85b801f 100644 --- a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/facethierarchyoptions.ts +++ b/packages/snap-preact/components/src/themes/bocachica/components/molecules/facetHierarchyOptions.ts @@ -1,5 +1,5 @@ import { css } from '@emotion/react'; -import type { FacetHierarchyOptionsProps } from '../../../../../components/Molecules/FacetHierarchyOptions'; +import type { FacetHierarchyOptionsProps } from '../../../../components/Molecules/FacetHierarchyOptions'; // CSS in JS style script for the FacetHierarchyOptions component const facetHierarchyOptionsStyleScript = ({ horizontal, theme }: FacetHierarchyOptionsProps) => { diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/facetlistoptions.ts b/packages/snap-preact/components/src/themes/bocachica/components/molecules/facetListOptions.ts similarity index 92% rename from packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/facetlistoptions.ts rename to packages/snap-preact/components/src/themes/bocachica/components/molecules/facetListOptions.ts index b37db560a..6ea03f557 100644 --- a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/facetlistoptions.ts +++ b/packages/snap-preact/components/src/themes/bocachica/components/molecules/facetListOptions.ts @@ -1,5 +1,5 @@ import { css } from '@emotion/react'; -import type { FacetListOptionsProps } from '../../../../../components/Molecules/FacetListOptions'; +import type { FacetListOptionsProps } from '../../../../components/Molecules/FacetListOptions'; // CSS in JS style script for the FacetListOptions component const facetListOptionsStyleScript = ({ hideCheckbox, horizontal, theme }: FacetListOptionsProps) => { diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/facetpaletteoptions.ts b/packages/snap-preact/components/src/themes/bocachica/components/molecules/facetPaletteOptions.ts similarity index 95% rename from packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/facetpaletteoptions.ts rename to packages/snap-preact/components/src/themes/bocachica/components/molecules/facetPaletteOptions.ts index 27717cdf7..05a57278d 100644 --- a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/facetpaletteoptions.ts +++ b/packages/snap-preact/components/src/themes/bocachica/components/molecules/facetPaletteOptions.ts @@ -1,5 +1,5 @@ import { css } from '@emotion/react'; -import type { FacetPaletteOptionsProps } from '../../../../../components/Molecules/FacetPaletteOptions'; +import type { FacetPaletteOptionsProps } from '../../../../components/Molecules/FacetPaletteOptions'; // CSS in JS style script for the FacetPaletteOptions component const facetPaletteStyleScript = ({ columns, gapSize, theme }: FacetPaletteOptionsProps) => { diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/facetslider.ts b/packages/snap-preact/components/src/themes/bocachica/components/molecules/facetSlider.ts similarity index 97% rename from packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/facetslider.ts rename to packages/snap-preact/components/src/themes/bocachica/components/molecules/facetSlider.ts index 95097488f..b9fdc75ff 100644 --- a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/facetslider.ts +++ b/packages/snap-preact/components/src/themes/bocachica/components/molecules/facetSlider.ts @@ -1,5 +1,5 @@ import { css } from '@emotion/react'; -import type { FacetSliderProps } from '../../../../../components/Molecules/FacetSlider'; +import type { FacetSliderProps } from '../../../../components/Molecules/FacetSlider'; // CSS in JS style script for the FacetSlider component const facetSliderStyleScript = ({ diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/facettoggle.ts b/packages/snap-preact/components/src/themes/bocachica/components/molecules/facetToggle.ts similarity index 82% rename from packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/facettoggle.ts rename to packages/snap-preact/components/src/themes/bocachica/components/molecules/facetToggle.ts index 9d966b2f7..28ecc3ac5 100644 --- a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/facettoggle.ts +++ b/packages/snap-preact/components/src/themes/bocachica/components/molecules/facetToggle.ts @@ -1,5 +1,5 @@ import { css } from '@emotion/react'; -import type { FacetToggleProps } from '../../../../../components/Molecules/FacetToggle'; +import type { FacetToggleProps } from '../../../../components/Molecules/FacetToggle'; // CSS in JS style script for the FacetToggle component const facetToggleStyleScript = ({ theme }: FacetToggleProps) => { diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/filter.ts b/packages/snap-preact/components/src/themes/bocachica/components/molecules/filter.ts similarity index 88% rename from packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/filter.ts rename to packages/snap-preact/components/src/themes/bocachica/components/molecules/filter.ts index d87862348..66c96fdca 100644 --- a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/filter.ts +++ b/packages/snap-preact/components/src/themes/bocachica/components/molecules/filter.ts @@ -1,5 +1,5 @@ import { css } from '@emotion/react'; -import type { FilterProps } from '../../../../../components/Molecules/Filter'; +import type { FilterProps } from '../../../../components/Molecules/Filter'; // CSS in JS style script for the Filter component const filterStyleScript = ({ theme }: FilterProps) => { diff --git a/packages/snap-preact/components/src/themes/bocachica/components/molecules/grid.ts b/packages/snap-preact/components/src/themes/bocachica/components/molecules/grid.ts new file mode 100644 index 000000000..9b0845625 --- /dev/null +++ b/packages/snap-preact/components/src/themes/bocachica/components/molecules/grid.ts @@ -0,0 +1,4 @@ +import type { GridProps } from '../../../../components/Molecules/Grid'; + +// Grid component props +export const grid: Partial = {}; diff --git a/packages/snap-preact/components/src/themes/bocachica/components/molecules/index.ts b/packages/snap-preact/components/src/themes/bocachica/components/molecules/index.ts new file mode 100644 index 000000000..d5854e0a1 --- /dev/null +++ b/packages/snap-preact/components/src/themes/bocachica/components/molecules/index.ts @@ -0,0 +1,29 @@ +// MOLECULES +export { calloutBadge } from './calloutBadge'; +export { carousel } from './carousel'; +export { checkbox } from './checkbox'; +export { errorHandler } from './errorHandler'; +export { facetGridOptions } from './facetGridOptions'; +export { facetHierarchyOptions } from './facetHierarchyOptions'; +export { facetListOptions } from './facetListOptions'; +export { facetPaletteOptions } from './facetPaletteOptions'; +export { facetSlider } from './facetSlider'; +export { facetToggle } from './facetToggle'; +export { filter } from './filter'; +export { grid } from './grid'; +export { layoutSelector } from './layoutSelector'; +export { list } from './list'; +export { loadMore } from './loadMore'; +export { overlayBadge } from './overlayBadge'; +export { pagination } from './pagination'; +export { radio } from './radio'; +export { radioList } from './radioList'; +export { result } from './result'; +export { searchInput } from './searchInput'; +export { select } from './select'; +export { slideout } from './slideout'; +export { perPage } from './perPage'; +export { rating } from './rating'; +export { sortBy } from './sortBy'; +export { swatches } from './swatches'; +export { variantSelection } from './variantSelection'; diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/layoutselector.ts b/packages/snap-preact/components/src/themes/bocachica/components/molecules/layoutSelector.ts similarity index 82% rename from packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/layoutselector.ts rename to packages/snap-preact/components/src/themes/bocachica/components/molecules/layoutSelector.ts index 76f2793bc..55f7380e8 100644 --- a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/layoutselector.ts +++ b/packages/snap-preact/components/src/themes/bocachica/components/molecules/layoutSelector.ts @@ -1,5 +1,5 @@ import { css } from '@emotion/react'; -import type { LayoutSelectorProps } from '../../../../../components/Molecules/LayoutSelector'; +import type { LayoutSelectorProps } from '../../../../components/Molecules/LayoutSelector'; // CSS in JS style script for the LayoutSelector component const layoutSelectorStyleScript = ({ theme }: LayoutSelectorProps) => { diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/list.ts b/packages/snap-preact/components/src/themes/bocachica/components/molecules/list.ts similarity index 94% rename from packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/list.ts rename to packages/snap-preact/components/src/themes/bocachica/components/molecules/list.ts index 239cf3d41..3443e469c 100644 --- a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/list.ts +++ b/packages/snap-preact/components/src/themes/bocachica/components/molecules/list.ts @@ -1,5 +1,5 @@ import { css } from '@emotion/react'; -import type { ListProps } from '../../../../../components/Molecules/List'; +import type { ListProps } from '../../../../components/Molecules/List'; // CSS in JS style script for the List component const listStyleScript = ({ horizontal, theme }: ListProps) => { diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/loadmore.ts b/packages/snap-preact/components/src/themes/bocachica/components/molecules/loadMore.ts similarity index 98% rename from packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/loadmore.ts rename to packages/snap-preact/components/src/themes/bocachica/components/molecules/loadMore.ts index e77ac2550..fcf47a2ac 100644 --- a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/loadmore.ts +++ b/packages/snap-preact/components/src/themes/bocachica/components/molecules/loadMore.ts @@ -1,5 +1,5 @@ import { css, keyframes } from '@emotion/react'; -import type { LoadMoreProps } from '../../../../../components/Molecules/LoadMore'; +import type { LoadMoreProps } from '../../../../components/Molecules/LoadMore'; // CSS in JS style script for the LoadMore component const loadMoreStyleScript = ({ diff --git a/packages/snap-preact/components/src/themes/bocachica/components/molecules/overlayBadge.ts b/packages/snap-preact/components/src/themes/bocachica/components/molecules/overlayBadge.ts new file mode 100644 index 000000000..9ed97d3e9 --- /dev/null +++ b/packages/snap-preact/components/src/themes/bocachica/components/molecules/overlayBadge.ts @@ -0,0 +1,4 @@ +import type { OverlayBadgeProps } from '../../../../components/Molecules/OverlayBadge'; + +// OverlayBadge component props +export const overlayBadge: Partial = {}; diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/pagination.ts b/packages/snap-preact/components/src/themes/bocachica/components/molecules/pagination.ts similarity index 87% rename from packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/pagination.ts rename to packages/snap-preact/components/src/themes/bocachica/components/molecules/pagination.ts index 50833ba7b..8885389c5 100644 --- a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/pagination.ts +++ b/packages/snap-preact/components/src/themes/bocachica/components/molecules/pagination.ts @@ -1,5 +1,5 @@ import { css } from '@emotion/react'; -import type { PaginationProps } from '../../../../../components/Molecules/Pagination'; +import type { PaginationProps } from '../../../../components/Molecules/Pagination'; // CSS in JS style script for the Pagination component const paginationStyleScript = ({ theme }: PaginationProps) => { diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/perpage.ts b/packages/snap-preact/components/src/themes/bocachica/components/molecules/perPage.ts similarity index 82% rename from packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/perpage.ts rename to packages/snap-preact/components/src/themes/bocachica/components/molecules/perPage.ts index cc43eaa64..47f90e1c4 100644 --- a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/perpage.ts +++ b/packages/snap-preact/components/src/themes/bocachica/components/molecules/perPage.ts @@ -1,5 +1,5 @@ import { css } from '@emotion/react'; -import type { PerPageProps } from '../../../../../components/Molecules/PerPage'; +import type { PerPageProps } from '../../../../components/Molecules/PerPage'; // CSS in JS style script for the PerPage component const perPageStyleScript = ({ theme }: PerPageProps) => { diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/radio.ts b/packages/snap-preact/components/src/themes/bocachica/components/molecules/radio.ts similarity index 91% rename from packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/radio.ts rename to packages/snap-preact/components/src/themes/bocachica/components/molecules/radio.ts index dbf016679..08e6937d9 100644 --- a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/radio.ts +++ b/packages/snap-preact/components/src/themes/bocachica/components/molecules/radio.ts @@ -1,5 +1,5 @@ import { css } from '@emotion/react'; -import type { RadioProps } from '../../../../../components/Molecules/Radio'; +import type { RadioProps } from '../../../../components/Molecules/Radio'; // CSS in JS style script for the Radio component const radioStyleScript = ({ size, native, theme }: RadioProps) => { diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/radiolist.ts b/packages/snap-preact/components/src/themes/bocachica/components/molecules/radioList.ts similarity index 92% rename from packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/radiolist.ts rename to packages/snap-preact/components/src/themes/bocachica/components/molecules/radioList.ts index 6bf0cb50e..379e01e35 100644 --- a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/radiolist.ts +++ b/packages/snap-preact/components/src/themes/bocachica/components/molecules/radioList.ts @@ -1,5 +1,5 @@ import { css } from '@emotion/react'; -import type { RadioListProps } from '../../../../../components/Molecules/RadioList'; +import type { RadioListProps } from '../../../../components/Molecules/RadioList'; // CSS in JS style script for the RadioList component const radioListStyleScript = ({ theme }: RadioListProps) => { diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/rating.ts b/packages/snap-preact/components/src/themes/bocachica/components/molecules/rating.ts similarity index 93% rename from packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/rating.ts rename to packages/snap-preact/components/src/themes/bocachica/components/molecules/rating.ts index f7a0c0d0c..c89046ab5 100644 --- a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/rating.ts +++ b/packages/snap-preact/components/src/themes/bocachica/components/molecules/rating.ts @@ -1,5 +1,5 @@ import { css } from '@emotion/react'; -import type { RatingProps } from '../../../../../components/Molecules/Rating'; +import type { RatingProps } from '../../../../components/Molecules/Rating'; // CSS in JS style script for the Rating component const ratingStyleScript = ({ emptyRatingSrc, fullRatingSrc, theme }: RatingProps & { emptyRatingSrc?: string; fullRatingSrc?: string }) => { diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/result.ts b/packages/snap-preact/components/src/themes/bocachica/components/molecules/result.ts similarity index 94% rename from packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/result.ts rename to packages/snap-preact/components/src/themes/bocachica/components/molecules/result.ts index 04a26d27f..f89960036 100644 --- a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/result.ts +++ b/packages/snap-preact/components/src/themes/bocachica/components/molecules/result.ts @@ -1,5 +1,5 @@ import { css } from '@emotion/react'; -import type { ResultProps } from '../../../../../components/Molecules/Result'; +import type { ResultProps } from '../../../../components/Molecules/Result'; // CSS in JS style script for the Result component const resultStyleScript = ({ theme }: ResultProps) => { diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/searchinput.ts b/packages/snap-preact/components/src/themes/bocachica/components/molecules/searchInput.ts similarity index 87% rename from packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/searchinput.ts rename to packages/snap-preact/components/src/themes/bocachica/components/molecules/searchInput.ts index 2b37dde57..2dc512686 100644 --- a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/searchinput.ts +++ b/packages/snap-preact/components/src/themes/bocachica/components/molecules/searchInput.ts @@ -1,5 +1,5 @@ import { css } from '@emotion/react'; -import type { SearchInputProps } from '../../../../../components/Molecules/SearchInput'; +import type { SearchInputProps } from '../../../../components/Molecules/SearchInput'; // CSS in JS style script for the SearchInput component const searchInputStyleScript = ({ theme }: SearchInputProps) => { diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/select.ts b/packages/snap-preact/components/src/themes/bocachica/components/molecules/select.ts similarity index 95% rename from packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/select.ts rename to packages/snap-preact/components/src/themes/bocachica/components/molecules/select.ts index cabff505d..6faa2d800 100644 --- a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/select.ts +++ b/packages/snap-preact/components/src/themes/bocachica/components/molecules/select.ts @@ -1,5 +1,5 @@ import { css } from '@emotion/react'; -import type { SelectProps } from '../../../../../components/Molecules/Select'; +import type { SelectProps } from '../../../../components/Molecules/Select'; // CSS in JS style script for the Select component const selectStyleScript = ({ color, backgroundColor, borderColor, theme }: SelectProps) => { diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/slideout.ts b/packages/snap-preact/components/src/themes/bocachica/components/molecules/slideout.ts similarity index 93% rename from packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/slideout.ts rename to packages/snap-preact/components/src/themes/bocachica/components/molecules/slideout.ts index 655d40bf5..8fac24237 100644 --- a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/slideout.ts +++ b/packages/snap-preact/components/src/themes/bocachica/components/molecules/slideout.ts @@ -1,5 +1,5 @@ import { css } from '@emotion/react'; -import type { SlideoutProps } from '../../../../../components/Molecules/Slideout'; +import type { SlideoutProps } from '../../../../components/Molecules/Slideout'; // CSS in JS style script for the Slideout component const slideoutStyleScript = ({ isActive, width, transitionSpeed, slideDirection, theme }: SlideoutProps & { isActive: boolean }) => { diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/sortby.ts b/packages/snap-preact/components/src/themes/bocachica/components/molecules/sortBy.ts similarity index 82% rename from packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/sortby.ts rename to packages/snap-preact/components/src/themes/bocachica/components/molecules/sortBy.ts index f4668220a..9465876b7 100644 --- a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/sortby.ts +++ b/packages/snap-preact/components/src/themes/bocachica/components/molecules/sortBy.ts @@ -1,5 +1,5 @@ import { css } from '@emotion/react'; -import type { SortByProps } from '../../../../../components/Molecules/SortBy'; +import type { SortByProps } from '../../../../components/Molecules/SortBy'; // CSS in JS style script for the SortBy component const sortByStyleScript = ({ theme }: SortByProps) => { diff --git a/packages/snap-preact/components/src/themes/bocachica/components/molecules/swatches.ts b/packages/snap-preact/components/src/themes/bocachica/components/molecules/swatches.ts new file mode 100644 index 000000000..699ac4b7b --- /dev/null +++ b/packages/snap-preact/components/src/themes/bocachica/components/molecules/swatches.ts @@ -0,0 +1,4 @@ +import type { SwatchesProps } from '../../../../components/Molecules/Swatches'; + +// Swatches component props +export const swatches: Partial = {}; diff --git a/packages/snap-preact/components/src/themes/bocachica/components/molecules/variantSelection.ts b/packages/snap-preact/components/src/themes/bocachica/components/molecules/variantSelection.ts new file mode 100644 index 000000000..b09f143b3 --- /dev/null +++ b/packages/snap-preact/components/src/themes/bocachica/components/molecules/variantSelection.ts @@ -0,0 +1,4 @@ +import type { VariantSelectionProps } from '../../../../components/Molecules/VariantSelection'; + +// VariantSelection component props +export const variantSelection: Partial = {}; diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/organisms/branchoverride.ts b/packages/snap-preact/components/src/themes/bocachica/components/organisms/branchOverride.ts similarity index 98% rename from packages/snap-preact/components/src/themes/bocachica/styles/components/organisms/branchoverride.ts rename to packages/snap-preact/components/src/themes/bocachica/components/organisms/branchOverride.ts index 248f69fec..75ca5598a 100644 --- a/packages/snap-preact/components/src/themes/bocachica/styles/components/organisms/branchoverride.ts +++ b/packages/snap-preact/components/src/themes/bocachica/components/organisms/branchOverride.ts @@ -1,5 +1,5 @@ import { css } from '@emotion/react'; -import type { BranchOverrideProps, BranchOverrideTheme } from '../../../../../components/Organisms/BranchOverride'; +import type { BranchOverrideProps, BranchOverrideTheme } from '../../../../components/Organisms/BranchOverride'; const darkTheme: BranchOverrideTheme = { class: 'ss__branch-override--dark', diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/organisms/facet.ts b/packages/snap-preact/components/src/themes/bocachica/components/organisms/facet.ts similarity index 95% rename from packages/snap-preact/components/src/themes/bocachica/styles/components/organisms/facet.ts rename to packages/snap-preact/components/src/themes/bocachica/components/organisms/facet.ts index d34407ecc..18fcd1bdc 100644 --- a/packages/snap-preact/components/src/themes/bocachica/styles/components/organisms/facet.ts +++ b/packages/snap-preact/components/src/themes/bocachica/components/organisms/facet.ts @@ -1,5 +1,5 @@ import { css } from '@emotion/react'; -import type { FacetProps } from '../../../../../components/Organisms/Facet'; +import type { FacetProps } from '../../../../components/Organisms/Facet'; // CSS in JS style script for the Facet component const facetStyleScript = ({ color, theme }: FacetProps) => { diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/organisms/facets.ts b/packages/snap-preact/components/src/themes/bocachica/components/organisms/facets.ts similarity index 82% rename from packages/snap-preact/components/src/themes/bocachica/styles/components/organisms/facets.ts rename to packages/snap-preact/components/src/themes/bocachica/components/organisms/facets.ts index 70988eaad..e68e0bf1f 100644 --- a/packages/snap-preact/components/src/themes/bocachica/styles/components/organisms/facets.ts +++ b/packages/snap-preact/components/src/themes/bocachica/components/organisms/facets.ts @@ -1,5 +1,5 @@ import { css } from '@emotion/react'; -import type { FacetsProps } from '../../../../../components/Organisms/Facets'; +import type { FacetsProps } from '../../../../components/Organisms/Facets'; // CSS in JS style script for the Facets component const facetsStyleScript = ({ theme }: FacetsProps) => { diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/organisms/horizontalfacets.ts b/packages/snap-preact/components/src/themes/bocachica/components/organisms/facetsHorizontal.ts similarity index 77% rename from packages/snap-preact/components/src/themes/bocachica/styles/components/organisms/horizontalfacets.ts rename to packages/snap-preact/components/src/themes/bocachica/components/organisms/facetsHorizontal.ts index 7bcedf872..16ac740d8 100644 --- a/packages/snap-preact/components/src/themes/bocachica/styles/components/organisms/horizontalfacets.ts +++ b/packages/snap-preact/components/src/themes/bocachica/components/organisms/facetsHorizontal.ts @@ -1,13 +1,13 @@ import { css } from '@emotion/react'; -import type { HorizontalFacetsProps } from '../../../../../components/Organisms/HorizontalFacets'; +import type { FacetsHorizontalProps } from '../../../../components/Organisms/FacetsHorizontal'; // CSS in JS style script for the Facets component -const horizontalFacetsStyleScript = ({ theme }: HorizontalFacetsProps) => { +const facetsHorizontalStyleScript = ({ theme }: FacetsHorizontalProps) => { // eslint-disable-next-line @typescript-eslint/no-unused-vars const variables = theme?.variables; return css({ - '& .ss__horizontal-facets__header': { + '& .ss__facets-horizontal__header': { display: 'flex', flexWrap: 'wrap', @@ -15,7 +15,7 @@ const horizontalFacetsStyleScript = ({ theme }: HorizontalFacetsProps) => { margin: '0 10px', }, - '& .ss__horizontal-facets__header__dropdown': { + '& .ss__facets-horizontal__header__dropdown': { flex: '0 0 0%', margin: '0 0 10px 0', boxSizing: 'border-box', @@ -53,8 +53,8 @@ const horizontalFacetsStyleScript = ({ theme }: HorizontalFacetsProps) => { }, }, }, - '&.ss__horizontal-facets--overlay': { - '& .ss__horizontal-facets__header__dropdown': { + '&.ss__facets-horizontal--overlay': { + '& .ss__facets-horizontal__header__dropdown': { '&.ss__dropdown--open': { '& .ss__dropdown__content': { border: `1px solid ${variables?.colors?.active?.background || '#ccc'}`, @@ -74,7 +74,7 @@ const horizontalFacetsStyleScript = ({ theme }: HorizontalFacetsProps) => { }; // Facets component props -export const horizontalFacets: Partial = { - styleScript: horizontalFacetsStyleScript, +export const facetsHorizontal: Partial = { + styleScript: facetsHorizontalStyleScript, iconCollapse: 'angle-down', }; diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/organisms/filtersummary.ts b/packages/snap-preact/components/src/themes/bocachica/components/organisms/filterSummary.ts similarity index 90% rename from packages/snap-preact/components/src/themes/bocachica/styles/components/organisms/filtersummary.ts rename to packages/snap-preact/components/src/themes/bocachica/components/organisms/filterSummary.ts index 867235fac..9162ce0db 100644 --- a/packages/snap-preact/components/src/themes/bocachica/styles/components/organisms/filtersummary.ts +++ b/packages/snap-preact/components/src/themes/bocachica/components/organisms/filterSummary.ts @@ -1,5 +1,5 @@ import { css } from '@emotion/react'; -import type { FilterSummaryProps } from '../../../../../components/Organisms/FilterSummary'; +import type { FilterSummaryProps } from '../../../../components/Organisms/FilterSummary'; // CSS in JS style script for the FilterSummary component const filterSummaryStyleScript = ({ theme }: FilterSummaryProps) => { diff --git a/packages/snap-preact/components/src/themes/bocachica/components/organisms/index.ts b/packages/snap-preact/components/src/themes/bocachica/components/organisms/index.ts new file mode 100644 index 000000000..3f0c66cd7 --- /dev/null +++ b/packages/snap-preact/components/src/themes/bocachica/components/organisms/index.ts @@ -0,0 +1,10 @@ +// ORGANISMS +export { branchOverride } from './branchOverride'; +export { facet } from './facet'; +export { facets } from './facets'; +export { facetsHorizontal } from './facetsHorizontal'; +export { filterSummary } from './filterSummary'; +export { mobileSidebar } from './mobileSidebar'; +export { results } from './results'; +export { sidebar } from './sidebar'; +export { toolbar } from './toolbar'; diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/organisms/mobilesidebar.ts b/packages/snap-preact/components/src/themes/bocachica/components/organisms/mobileSidebar.ts similarity index 89% rename from packages/snap-preact/components/src/themes/bocachica/styles/components/organisms/mobilesidebar.ts rename to packages/snap-preact/components/src/themes/bocachica/components/organisms/mobileSidebar.ts index d3256b59c..192fd755a 100644 --- a/packages/snap-preact/components/src/themes/bocachica/styles/components/organisms/mobilesidebar.ts +++ b/packages/snap-preact/components/src/themes/bocachica/components/organisms/mobileSidebar.ts @@ -1,5 +1,5 @@ import { css } from '@emotion/react'; -import type { MobileSidebarProps } from '../../../../../components/Organisms/MobileSidebar'; +import type { MobileSidebarProps } from '../../../../components/Organisms/MobileSidebar'; // CSS in JS style script for the MobileSidebar component const mobileSidebarStyleScript = ({ theme }: MobileSidebarProps) => { diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/organisms/results.ts b/packages/snap-preact/components/src/themes/bocachica/components/organisms/results.ts similarity index 93% rename from packages/snap-preact/components/src/themes/bocachica/styles/components/organisms/results.ts rename to packages/snap-preact/components/src/themes/bocachica/components/organisms/results.ts index 1116cff6d..68a571bb0 100644 --- a/packages/snap-preact/components/src/themes/bocachica/styles/components/organisms/results.ts +++ b/packages/snap-preact/components/src/themes/bocachica/components/organisms/results.ts @@ -1,5 +1,5 @@ import { css } from '@emotion/react'; -import type { ResultsProps } from '../../../../../components/Organisms/Results'; +import type { ResultsProps } from '../../../../components/Organisms/Results'; // CSS in JS style script for the Results component const resultsStyleScript = ({ columns, gapSize, theme }: ResultsProps) => { diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/organisms/sidebar.ts b/packages/snap-preact/components/src/themes/bocachica/components/organisms/sidebar.ts similarity index 85% rename from packages/snap-preact/components/src/themes/bocachica/styles/components/organisms/sidebar.ts rename to packages/snap-preact/components/src/themes/bocachica/components/organisms/sidebar.ts index 9b32645ae..6b88fdb49 100644 --- a/packages/snap-preact/components/src/themes/bocachica/styles/components/organisms/sidebar.ts +++ b/packages/snap-preact/components/src/themes/bocachica/components/organisms/sidebar.ts @@ -1,5 +1,5 @@ import { css } from '@emotion/react'; -import type { SidebarProps } from '../../../../../components/Organisms/Sidebar'; +import type { SidebarProps } from '../../../../components/Organisms/Sidebar'; // CSS in JS style script for the Sidebar component const sidebarStyleScript = ({ theme }: SidebarProps) => { diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/organisms/toolbar.ts b/packages/snap-preact/components/src/themes/bocachica/components/organisms/toolbar.ts similarity index 87% rename from packages/snap-preact/components/src/themes/bocachica/styles/components/organisms/toolbar.ts rename to packages/snap-preact/components/src/themes/bocachica/components/organisms/toolbar.ts index 6b722f45b..e20f94d65 100644 --- a/packages/snap-preact/components/src/themes/bocachica/styles/components/organisms/toolbar.ts +++ b/packages/snap-preact/components/src/themes/bocachica/components/organisms/toolbar.ts @@ -1,5 +1,5 @@ import { css } from '@emotion/react'; -import type { ToolbarProps } from '../../../../../components/Organisms/Toolbar'; +import type { ToolbarProps } from '../../../../components/Organisms/Toolbar'; // CSS in JS style script for the Toolbar component const toolbarStyleScript = ({ theme }: ToolbarProps) => { diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/templates/autocomplete.ts b/packages/snap-preact/components/src/themes/bocachica/components/templates/autocomplete.ts similarity index 98% rename from packages/snap-preact/components/src/themes/bocachica/styles/components/templates/autocomplete.ts rename to packages/snap-preact/components/src/themes/bocachica/components/templates/autocomplete.ts index da24e03af..c36332840 100644 --- a/packages/snap-preact/components/src/themes/bocachica/styles/components/templates/autocomplete.ts +++ b/packages/snap-preact/components/src/themes/bocachica/components/templates/autocomplete.ts @@ -1,5 +1,5 @@ import { css } from '@emotion/react'; -import type { AutocompleteProps } from '../../../../../components/Templates/Autocomplete'; +import type { AutocompleteProps } from '../../../../components/Templates/Autocomplete'; // CSS in JS style script for the Autocomplete component const autocompleteStyleScript = ({ diff --git a/packages/snap-preact/components/src/themes/bocachica/components/templates/index.ts b/packages/snap-preact/components/src/themes/bocachica/components/templates/index.ts new file mode 100644 index 000000000..9c232f073 --- /dev/null +++ b/packages/snap-preact/components/src/themes/bocachica/components/templates/index.ts @@ -0,0 +1,7 @@ +// TEMPLATES +export { autocomplete } from './autocomplete'; +export { recommendation } from './recommendation'; +export { recommendationBundle } from './recommendationBundle'; +export { recommendationGrid } from './recommendationGrid'; +export { search } from './search'; +export { searchHorizontal } from './searchHorizontal'; diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/templates/recommendation.ts b/packages/snap-preact/components/src/themes/bocachica/components/templates/recommendation.ts similarity index 87% rename from packages/snap-preact/components/src/themes/bocachica/styles/components/templates/recommendation.ts rename to packages/snap-preact/components/src/themes/bocachica/components/templates/recommendation.ts index 198084468..13eef82ea 100644 --- a/packages/snap-preact/components/src/themes/bocachica/styles/components/templates/recommendation.ts +++ b/packages/snap-preact/components/src/themes/bocachica/components/templates/recommendation.ts @@ -1,5 +1,5 @@ import { css } from '@emotion/react'; -import type { RecommendationProps } from '../../../../../components/Templates/Recommendation'; +import type { RecommendationProps } from '../../../../components/Templates/Recommendation'; // CSS in JS style script for the Recommendation component const recommendationStyleScript = ({ vertical, theme }: RecommendationProps) => { diff --git a/packages/snap-preact/components/src/themes/bocachica/components/templates/recommendationBundle.ts b/packages/snap-preact/components/src/themes/bocachica/components/templates/recommendationBundle.ts new file mode 100644 index 000000000..27b244531 --- /dev/null +++ b/packages/snap-preact/components/src/themes/bocachica/components/templates/recommendationBundle.ts @@ -0,0 +1,14 @@ +import { css } from '@emotion/react'; +import type { RecommendationBundleProps } from '../../../../components/Templates/RecommendationBundle'; + +// CSS in JS style script for the RecommendationBundle component +const recommendationBundleStyleScript = () => { + // eslint-disable-next-line @typescript-eslint/no-unused-vars + + return css(); +}; + +// RecommendationBundle component props +export const recommendationBundle: Partial = { + styleScript: recommendationBundleStyleScript, +}; diff --git a/packages/snap-preact/components/src/themes/bocachica/components/templates/recommendationGrid.ts b/packages/snap-preact/components/src/themes/bocachica/components/templates/recommendationGrid.ts new file mode 100644 index 000000000..39d7f5371 --- /dev/null +++ b/packages/snap-preact/components/src/themes/bocachica/components/templates/recommendationGrid.ts @@ -0,0 +1,14 @@ +import { css } from '@emotion/react'; +import type { RecommendationGridProps } from '../../../../components/Templates/RecommendationGrid'; + +// CSS in JS style script for the RecommendationGrid component +const recommendationGridStyleScript = () => { + // eslint-disable-next-line @typescript-eslint/no-unused-vars + + return css(); +}; + +// RecommendationGrid component props +export const recommendationGrid: Partial = { + styleScript: recommendationGridStyleScript, +}; diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/templates/search.ts b/packages/snap-preact/components/src/themes/bocachica/components/templates/search.ts similarity index 93% rename from packages/snap-preact/components/src/themes/bocachica/styles/components/templates/search.ts rename to packages/snap-preact/components/src/themes/bocachica/components/templates/search.ts index c84873547..fcda74291 100644 --- a/packages/snap-preact/components/src/themes/bocachica/styles/components/templates/search.ts +++ b/packages/snap-preact/components/src/themes/bocachica/components/templates/search.ts @@ -1,5 +1,5 @@ import { css } from '@emotion/react'; -import type { SearchProps } from '../../../../../components/Templates/Search'; +import type { SearchProps } from '../../../../components/Templates/Search'; // CSS in JS style script for the Search component const searchStyleScript = ({ mobileSidebarDisplayAt, theme }: SearchProps) => { diff --git a/packages/snap-preact/components/src/themes/bocachica/components/templates/searchHorizontal.ts b/packages/snap-preact/components/src/themes/bocachica/components/templates/searchHorizontal.ts new file mode 100644 index 000000000..946f2dacf --- /dev/null +++ b/packages/snap-preact/components/src/themes/bocachica/components/templates/searchHorizontal.ts @@ -0,0 +1,15 @@ +import { css } from '@emotion/react'; +import type { SearchHorizontalProps } from '../../../../components/Templates/SearchHorizontal'; + +// CSS in JS style script for the SearchHorizontal component +const searchHorizontalStyleScript = ({ theme }: SearchHorizontalProps) => { + // eslint-disable-next-line @typescript-eslint/no-unused-vars + const variables = theme?.variables; + + return css({}); +}; + +// SearchHorizontal component props +export const searchHorizontal: Partial = { + styleScript: searchHorizontalStyleScript, +}; diff --git a/packages/snap-preact/components/src/themes/bocachica/index.ts b/packages/snap-preact/components/src/themes/bocachica/index.ts deleted file mode 100644 index c7617ea51..000000000 --- a/packages/snap-preact/components/src/themes/bocachica/index.ts +++ /dev/null @@ -1,350 +0,0 @@ -import { Theme, ThemeVariables } from '../../providers'; -import * as style from './styles/styles'; - -const bocachicaVariables: ThemeVariables = { - breakpoints: [0, 767, 999, 1299], - colors: { - primary: '#202223', - secondary: '#6d7175', - accent: '#6d7175', - active: { - foreground: '#ffffff', - background: '#6d7175', - accent: '#ffffff', - }, - hover: { - foreground: '#ffffff', - background: '#000000', - accent: '#ffffff', - }, - }, -}; - -export const bocachica: Theme = { - name: 'bocachica', - variables: bocachicaVariables, - layoutOptions: [ - { - value: 1, - icon: 'square', - // overrides: { - // components: { - // results: { - // named: { - // searchResults: { columns: 1 }, - // }, - // }, - // }, - // }, - }, - { - value: 2, - default: true, - icon: 'layout-large', - // overrides: { - // components: { - // results: { - // named: { - // searchResults: { columns: 2 }, - // }, - // }, - // }, - // }, - }, - ], - components: { - // component theme prop overrides - // ATOMS - badgeImage: { - ...style.components.badgeImage, - }, - badgePill: { - ...style.components.badgePill, - }, - badgeRectangle: { - ...style.components.badgeRectangle, - }, - badgeText: { - ...style.components.badgeText, - }, - banner: { - ...style.components.banner, - }, - breadcrumbs: { - ...style.components.breadcrumbs, - }, - button: { - ...style.components.button, - }, - dropdown: { - ...style.components.dropdown, - }, - formattedNumber: { - ...style.components.formattedNumber, - }, - icon: { - ...style.components.icon, - }, - image: { - ...style.components.image, - }, - inlineBanner: { - ...style.components.inlineBanner, - }, - loadingBar: { - ...style.components.loadingBar, - }, - noResults: { - ...style.components.noResults, - }, - overlay: { - ...style.components.overlay, - }, - price: { - ...style.components.price, - }, - searchHeader: { - ...style.components.searchHeader, - }, - skeleton: { - ...style.components.skeleton, - }, - terms: { - ...style.components.terms, - }, - toggle: { - ...style.components.toggle, - }, - // MOLECULES - carousel: { - ...style.components.carousel, - }, - checkbox: { - ...style.components.checkbox, - }, - errorHandler: { - ...style.components.errorHandler, - }, - facetGridOptions: { - ...style.components.facetGridOptions, - }, - facetHierarchyOptions: { - ...style.components.facetHierarchyOptions, - }, - facetListOptions: { - ...style.components.facetListOptions, - }, - facetPaletteOptions: { - ...style.components.facetPaletteOptions, - }, - facetSlider: { - ...style.components.facetSlider, - }, - facetToggle: { - ...style.components.facetToggle, - }, - filter: { - ...style.components.filter, - }, - layoutSelector: { - ...style.components.layoutSelector, - }, - list: { - ...style.components.list, - }, - loadMore: { - ...style.components.loadMore, - }, - pagination: { - ...style.components.pagination, - }, - perPage: { - ...style.components.perPage, - }, - radio: { - ...style.components.radio, - }, - radioList: { - ...style.components.radioList, - }, - rating: { - ...style.components.rating, - }, - result: { - ...style.components.result, - }, - searchInput: { - ...style.components.searchInput, - }, - select: { - ...style.components.select, - }, - slideout: { - ...style.components.slideout, - }, - sortBy: { - ...style.components.sortBy, - }, - // ORGANISMS - branchOverride: { - ...style.components.branchOverride, - }, - facet: { - ...style.components.facet, - }, - facets: { - ...style.components.facets, - }, - horizontalFacets: { - ...style.components.horizontalFacets, - }, - filterSummary: { - ...style.components.filterSummary, - }, - mobileSidebar: { - ...style.components.mobileSidebar, - }, - results: { - ...style.components.results, - }, - sidebar: { - ...style.components.sidebar, - }, - toolbar: { - ...style.components.toolbar, - }, - // TEMPLATES - autocomplete: { - ...style.components.autocomplete, - }, - recommendation: { - ...style.components.recommendation, - }, - search: { - ...style.components.search, - }, - horizontalSearch: { - ...style.components.horizontalSearch, - }, - }, - responsive: [ - { - components: { - results: { - columns: 2, - }, - // toolbar: { - // named: { - // topToolBar: { - // hidePagination: true, - // hideSortBy: true, - // hidePerPage: true, - // }, - // }, - // }, - autocomplete: { - hideFacets: true, - vertical: true, - horizontalTerms: true, - theme: { - components: { - results: { - rows: 1, - columns: 2, - }, - }, - }, - }, - }, - }, - { - components: { - results: { - columns: 2, - }, - // toolbar: { - // named: { - // topToolBar: { - // hidePagination: true, - // }, - // }, - // }, - autocomplete: { - hideFacets: true, - vertical: true, - horizontalTerms: true, - theme: { - components: { - results: { - rows: 1, - columns: 3, - }, - }, - }, - }, - }, - }, - { - layoutOptions: [], - components: { - results: { - columns: 3, - }, - // toolbar: { - // named: { - // topToolBar: { - // hidePagination: true, - // }, - // }, - // }, - autocomplete: { - vertical: true, - horizontalTerms: true, - theme: { - components: { - results: { - rows: 1, - columns: 4, - }, - facets: { - style: { - // horizontal facets - width: '100%', - display: 'flex', - }, - }, - facet: { - limit: 4, - }, - }, - }, - }, - }, - }, - { - layoutOptions: [], - components: { - results: { - columns: 4, - }, - // toolbar: { - // named: { - // topToolBar: { - // hidePagination: true, - // }, - // }, - // }, - autocomplete: { - theme: { - components: { - results: { - rows: 2, - columns: 2, - }, - }, - }, - }, - }, - }, - ], -}; diff --git a/packages/snap-preact/components/src/themes/bocachica/layoutOptions.ts b/packages/snap-preact/components/src/themes/bocachica/layoutOptions.ts new file mode 100644 index 000000000..4f9e3ca74 --- /dev/null +++ b/packages/snap-preact/components/src/themes/bocachica/layoutOptions.ts @@ -0,0 +1,31 @@ +import { ListOption } from '../../types'; + +export const layoutOptions: ListOption[] = [ + { + value: 1, + icon: 'square', + // overrides: { + // components: { + // results: { + // named: { + // searchResults: { columns: 1 }, + // }, + // }, + // }, + // }, + }, + { + value: 2, + default: true, + icon: 'layout-large', + // overrides: { + // components: { + // results: { + // named: { + // searchResults: { columns: 2 }, + // }, + // }, + // }, + // }, + }, +]; diff --git a/packages/snap-preact/components/src/themes/bocachica/responsive.ts b/packages/snap-preact/components/src/themes/bocachica/responsive.ts new file mode 100644 index 000000000..a62963712 --- /dev/null +++ b/packages/snap-preact/components/src/themes/bocachica/responsive.ts @@ -0,0 +1,130 @@ +import { ThemeResponsive } from '../../providers/theme'; + +const mobileOverrides: ThemeResponsive = { + components: { + results: { + columns: 2, + }, + // toolbar: { + // named: { + // topToolBar: { + // hidePagination: true, + // hideSortBy: true, + // hidePerPage: true, + // }, + // }, + // }, + autocomplete: { + hideFacets: true, + vertical: true, + horizontalTerms: true, + theme: { + components: { + results: { + rows: 1, + columns: 2, + }, + }, + }, + }, + }, +}; + +const tabletOverrides: ThemeResponsive = { + components: { + results: { + columns: 2, + }, + // toolbar: { + // named: { + // topToolBar: { + // hidePagination: true, + // }, + // }, + // }, + autocomplete: { + hideFacets: true, + vertical: true, + horizontalTerms: true, + theme: { + components: { + results: { + rows: 1, + columns: 3, + }, + }, + }, + }, + }, +}; + +const desktopOverrides: ThemeResponsive = { + layoutOptions: [], + components: { + results: { + columns: 3, + }, + // toolbar: { + // named: { + // topToolBar: { + // hidePagination: true, + // }, + // }, + // }, + autocomplete: { + vertical: true, + horizontalTerms: true, + theme: { + components: { + results: { + rows: 1, + columns: 4, + }, + facets: { + style: { + // horizontal facets + width: '100%', + display: 'flex', + }, + }, + facet: { + limit: 4, + }, + }, + }, + }, + }, +}; + +const widescreenOverrides: ThemeResponsive = { + layoutOptions: [], + components: { + results: { + columns: 4, + }, + // toolbar: { + // named: { + // topToolBar: { + // hidePagination: true, + // }, + // }, + // }, + autocomplete: { + theme: { + components: { + results: { + rows: 2, + columns: 2, + }, + }, + }, + }, + }, +}; + +export const responsive: [ThemeResponsive, ThemeResponsive, ThemeResponsive, ThemeResponsive] = [ + mobileOverrides, + tabletOverrides, + desktopOverrides, + widescreenOverrides, +]; diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/atoms.ts b/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/atoms.ts deleted file mode 100644 index 23ae368fc..000000000 --- a/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/atoms.ts +++ /dev/null @@ -1,21 +0,0 @@ -// ATOMS -export { badgeImage } from './badgeimage'; -export { badgePill } from './badgepill'; -export { badgeRectangle } from './badgerectangle'; -export { badgeText } from './badgetext'; -export { banner } from './banner'; -export { breadcrumbs } from './breadcrumbs'; -export { button } from './button'; -export { dropdown } from './dropdown'; -export { formattedNumber } from './formattednumber'; -export { icon } from './icon'; -export { image } from './image'; -export { inlineBanner } from './inlinebanner'; -export { loadingBar } from './loadingbar'; -export { noResults } from './noresults'; -export { overlay } from './overlay'; -export { price } from './price'; -export { searchHeader } from './searchheader'; -export { skeleton } from './skeleton'; -export { terms } from './terms'; -export { toggle } from './toggle'; diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/badgeimage.ts b/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/badgeimage.ts deleted file mode 100644 index b8c27bad4..000000000 --- a/packages/snap-preact/components/src/themes/bocachica/styles/components/atoms/badgeimage.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { css } from '@emotion/react'; -import type { BadgeImageProps } from '../../../../../components/Atoms/BadgeImage'; - -// CSS in JS style script for the BadgeImage component -const badgeImageStyleScript = ({ theme }: BadgeImageProps) => { - // eslint-disable-next-line @typescript-eslint/no-unused-vars - const variables = theme?.variables; - - return css({ - maxHeight: '100%', - maxWidth: '100%', - }); -}; - -// BadgeImage component props -export const badgeImage: Partial = { - styleScript: badgeImageStyleScript, -}; diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/molecules.ts b/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/molecules.ts deleted file mode 100644 index dac77b512..000000000 --- a/packages/snap-preact/components/src/themes/bocachica/styles/components/molecules/molecules.ts +++ /dev/null @@ -1,24 +0,0 @@ -// MOLECULES -export { carousel } from './carousel'; -export { checkbox } from './checkbox'; -export { errorHandler } from './errorhandler'; -export { facetGridOptions } from './facetgridoptions'; -export { facetHierarchyOptions } from './facethierarchyoptions'; -export { facetListOptions } from './facetlistoptions'; -export { facetPaletteOptions } from './facetpaletteoptions'; -export { facetSlider } from './facetslider'; -export { facetToggle } from './facettoggle'; -export { filter } from './filter'; -export { layoutSelector } from './layoutselector'; -export { list } from './list'; -export { loadMore } from './loadmore'; -export { pagination } from './pagination'; -export { radio } from './radio'; -export { radioList } from './radiolist'; -export { result } from './result'; -export { searchInput } from './searchinput'; -export { select } from './select'; -export { slideout } from './slideout'; -export { perPage } from './perpage'; -export { rating } from './rating'; -export { sortBy } from './sortby'; diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/organisms/organisms.ts b/packages/snap-preact/components/src/themes/bocachica/styles/components/organisms/organisms.ts deleted file mode 100644 index 815790ea8..000000000 --- a/packages/snap-preact/components/src/themes/bocachica/styles/components/organisms/organisms.ts +++ /dev/null @@ -1,10 +0,0 @@ -// ORGANISMS -export { branchOverride } from './branchoverride'; -export { facet } from './facet'; -export { facets } from './facets'; -export { horizontalFacets } from './horizontalfacets'; -export { filterSummary } from './filtersummary'; -export { mobileSidebar } from './mobilesidebar'; -export { results } from './results'; -export { sidebar } from './sidebar'; -export { toolbar } from './toolbar'; diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/templates/horizontalsearch.ts b/packages/snap-preact/components/src/themes/bocachica/styles/components/templates/horizontalsearch.ts deleted file mode 100644 index 3d0d0b7cc..000000000 --- a/packages/snap-preact/components/src/themes/bocachica/styles/components/templates/horizontalsearch.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { css } from '@emotion/react'; -import type { HorizontalSearchProps } from '../../../../../components/Templates/HorizontalSearch'; - -// CSS in JS style script for the HorizontalSearch component -const horizontalSearchStyleScript = ({ theme }: HorizontalSearchProps) => { - // eslint-disable-next-line @typescript-eslint/no-unused-vars - const variables = theme?.variables; - - return css({}); -}; - -// HorizontalSearch component props -export const horizontalSearch: Partial = { - styleScript: horizontalSearchStyleScript, -}; diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/components/templates/templates.ts b/packages/snap-preact/components/src/themes/bocachica/styles/components/templates/templates.ts deleted file mode 100644 index 591be4a87..000000000 --- a/packages/snap-preact/components/src/themes/bocachica/styles/components/templates/templates.ts +++ /dev/null @@ -1,5 +0,0 @@ -// TEMPLATES -export { autocomplete } from './autocomplete'; -export { recommendation } from './recommendation'; -export { search } from './search'; -export { horizontalSearch } from './horizontalsearch'; diff --git a/packages/snap-preact/components/src/themes/bocachica/styles/styles.ts b/packages/snap-preact/components/src/themes/bocachica/styles/styles.ts deleted file mode 100644 index 4e2a7dd19..000000000 --- a/packages/snap-preact/components/src/themes/bocachica/styles/styles.ts +++ /dev/null @@ -1,11 +0,0 @@ -import * as atoms from './components/atoms/atoms'; -import * as molecules from './components/molecules/molecules'; -import * as organisms from './components/organisms/organisms'; -import * as templates from './components/templates/templates'; - -export const components = { - ...atoms, - ...molecules, - ...organisms, - ...templates, -}; diff --git a/packages/snap-preact/components/src/themes/index.ts b/packages/snap-preact/components/src/themes/index.ts index cbdbee176..ba7e9bf20 100644 --- a/packages/snap-preact/components/src/themes/index.ts +++ b/packages/snap-preact/components/src/themes/index.ts @@ -1,2 +1 @@ -export * from './pike'; -export * from './bocachica'; +export * from './bocachica/bocachica'; diff --git a/packages/snap-preact/components/src/themes/pike/index.ts b/packages/snap-preact/components/src/themes/pike/index.ts deleted file mode 100644 index e8cc31d4c..000000000 --- a/packages/snap-preact/components/src/themes/pike/index.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { Theme, ThemeVariables } from '../../providers'; -import * as style from './styles/styles'; - -const pikeVariables: ThemeVariables = { - breakpoints: [0, 540, 767, 1200], - colors: { - primary: 'blue', - secondary: 'blue', - accent: 'blue', - active: { - foreground: '', - background: '', - accent: '', - }, - hover: { - foreground: '', - background: '', - accent: '', - }, - }, -}; - -export const pike: Theme = { - variables: pikeVariables, - components: { - button: { - ...style.components.button, - // component theme prop overrides - }, - }, - responsive: [{}, {}, {}, {}], -}; diff --git a/packages/snap-preact/components/src/themes/pike/styles/components/atoms/atoms.ts b/packages/snap-preact/components/src/themes/pike/styles/components/atoms/atoms.ts deleted file mode 100644 index 1733efc0d..000000000 --- a/packages/snap-preact/components/src/themes/pike/styles/components/atoms/atoms.ts +++ /dev/null @@ -1,2 +0,0 @@ -// COMPONENTS -export { button } from './button'; diff --git a/packages/snap-preact/components/src/themes/pike/styles/components/atoms/button.ts b/packages/snap-preact/components/src/themes/pike/styles/components/atoms/button.ts deleted file mode 100644 index 63b8fcc0b..000000000 --- a/packages/snap-preact/components/src/themes/pike/styles/components/atoms/button.ts +++ /dev/null @@ -1,34 +0,0 @@ -import { css } from '@emotion/react'; -import type { ButtonProps } from '../../../../../components/Atoms/Button'; - -// CSS in JS style script for the Button component -const buttonStyleScript = ({ color, backgroundColor, borderColor, theme }: ButtonProps) => { - return css({ - display: 'inline-flex', - padding: '5px 10px', - position: 'relative', - color: color || theme?.variables?.colors?.primary, - outline: 0, - backgroundColor: backgroundColor || '#fff', - border: `1px solid ${borderColor || color || theme?.variables?.colors?.primary || '#333'}`, - borderRadius: '3px', - '&:hover': { - cursor: 'pointer', - backgroundColor: theme?.variables?.colors?.hover?.background || '#f8f8f8', - }, - '&.ss__button--disabled': { - opacity: 0.7, - borderColor: 'rgba(51,51,51,0.7)', - backgroundColor: 'initial', - '&:hover': { - cursor: 'default', - }, - }, - }); -}; - -// Button component props -// https://searchspring.github.io/snap/packages/snap-preact-components/docs/?path=/docs/atoms-button--default -export const button: ButtonProps = { - styleScript: buttonStyleScript, -}; diff --git a/packages/snap-preact/components/src/themes/pike/styles/styles.ts b/packages/snap-preact/components/src/themes/pike/styles/styles.ts deleted file mode 100644 index 934255f3e..000000000 --- a/packages/snap-preact/components/src/themes/pike/styles/styles.ts +++ /dev/null @@ -1,2 +0,0 @@ -// ATOMS -export * as components from './components/atoms/atoms'; diff --git a/packages/snap-preact/components/src/utilities/mergeProps.ts b/packages/snap-preact/components/src/utilities/mergeProps.ts index 4a3a92c42..6e0f0f112 100644 --- a/packages/snap-preact/components/src/utilities/mergeProps.ts +++ b/packages/snap-preact/components/src/utilities/mergeProps.ts @@ -1,5 +1,5 @@ import type { ComponentProps } from '../types'; -import type { Theme, ThemeComponents } from '../providers'; +import type { Theme, ThemeComponentOverrides } from '../providers'; export function mergeProps( componentType: string, @@ -128,7 +128,7 @@ export function sortSelectors(a: string, b: string): number { return aWeight - bWeight; } -export function filterSelectors(themeComponents: ThemeComponents, treePath: string): string[] { +export function filterSelectors(themeComponents: ThemeComponentOverrides, treePath: string): string[] { const selectors = Object.keys(themeComponents); const paths = treePath.split(' '); diff --git a/packages/snap-preact/src/Templates/SnapTemplate.tsx b/packages/snap-preact/src/Templates/SnapTemplate.tsx index 3d67ce5f7..e447ff7e3 100644 --- a/packages/snap-preact/src/Templates/SnapTemplate.tsx +++ b/packages/snap-preact/src/Templates/SnapTemplate.tsx @@ -21,7 +21,7 @@ export const THEME_EDIT_COOKIE = 'ssThemeEdit'; export type SearchTargetConfig = { selector: string; theme?: string; - component: 'Search' | 'HorizontalSearch'; // various component (template) types allowed + component: 'Search' | 'SearchHorizontal'; // various component (template) types allowed resultComponent?: string; }; @@ -34,7 +34,7 @@ export type AutocompleteTargetConfig = { export type RecommendationDefaultTargetConfig = { theme?: string; - component: 'Recommendation'; // various components (templates) available + component: 'Recommendation' | 'RecommendationGrid'; // various components (templates) available resultComponent?: string; }; export type RecommendationEmailTargetConfig = { diff --git a/packages/snap-preact/src/Templates/Stores/LibraryStore.ts b/packages/snap-preact/src/Templates/Stores/LibraryStore.ts index ce8bac4ea..fab6900ee 100644 --- a/packages/snap-preact/src/Templates/Stores/LibraryStore.ts +++ b/packages/snap-preact/src/Templates/Stores/LibraryStore.ts @@ -79,9 +79,6 @@ export class LibraryStore { import: LibraryImports = { theme: { - pike: async () => { - return this.themes.pike || (this.themes.pike = (await import('./library/themes/pike')).pike); - }, bocachica: async () => { return this.themes.bocachica || (this.themes.bocachica = (await import('./library/themes/bocachica')).bocachica); }, @@ -99,10 +96,10 @@ export class LibraryStore { Search: async () => { return this.components.search.Search || (this.components.search.Search = (await import('./library/components/Search')).Search); }, - HorizontalSearch: async () => { + SearchHorizontal: async () => { return ( - this.components.search.HorizontalSearch || - (this.components.search.HorizontalSearch = (await import('./library/components/HorizontalSearch')).HorizontalSearch) + this.components.search.SearchHorizontal || + (this.components.search.SearchHorizontal = (await import('./library/components/SearchHorizontal')).SearchHorizontal) ); }, }, @@ -124,6 +121,14 @@ export class LibraryStore { (this.components.recommendation.default.Recommendation = (await import('./library/components/Recommendation')).Recommendation) ); }, + RecommendationGrid: async () => { + return ( + this.components.recommendation.default.RecommendationGrid || + (this.components.recommendation.default.RecommendationGrid = ( + await import('./library/components/RecommendationGrid') + ).RecommendationGrid) + ); + }, }, email: {}, }, diff --git a/packages/snap-preact/src/Templates/Stores/library/components/HorizontalSearch.ts b/packages/snap-preact/src/Templates/Stores/library/components/HorizontalSearch.ts deleted file mode 100644 index 4763ad881..000000000 --- a/packages/snap-preact/src/Templates/Stores/library/components/HorizontalSearch.ts +++ /dev/null @@ -1 +0,0 @@ -export { HorizontalSearch } from '../../../../../components/src/components/Templates/HorizontalSearch'; diff --git a/packages/snap-preact/src/Templates/Stores/library/components/RecommendationBundle.ts b/packages/snap-preact/src/Templates/Stores/library/components/RecommendationBundle.ts index ad3bc8d28..46d7be507 100644 --- a/packages/snap-preact/src/Templates/Stores/library/components/RecommendationBundle.ts +++ b/packages/snap-preact/src/Templates/Stores/library/components/RecommendationBundle.ts @@ -1 +1 @@ -export { RecommendationBundle } from '../../../../../components/src/components/Organisms/RecommendationBundle'; +export { RecommendationBundle } from '../../../../../components/src/components/Templates/RecommendationBundle'; diff --git a/packages/snap-preact/src/Templates/Stores/library/components/RecommendationGrid.ts b/packages/snap-preact/src/Templates/Stores/library/components/RecommendationGrid.ts new file mode 100644 index 000000000..883a4d85a --- /dev/null +++ b/packages/snap-preact/src/Templates/Stores/library/components/RecommendationGrid.ts @@ -0,0 +1 @@ +export { RecommendationGrid } from '../../../../../components/src/components/Templates/RecommendationGrid'; diff --git a/packages/snap-preact/src/Templates/Stores/library/components/SearchHorizontal.ts b/packages/snap-preact/src/Templates/Stores/library/components/SearchHorizontal.ts new file mode 100644 index 000000000..74d0daf90 --- /dev/null +++ b/packages/snap-preact/src/Templates/Stores/library/components/SearchHorizontal.ts @@ -0,0 +1 @@ +export { SearchHorizontal } from '../../../../../components/src/components/Templates/SearchHorizontal'; diff --git a/packages/snap-preact/src/Templates/Stores/library/themes/bocachica.ts b/packages/snap-preact/src/Templates/Stores/library/themes/bocachica.ts index 7660720b8..1c7a17471 100644 --- a/packages/snap-preact/src/Templates/Stores/library/themes/bocachica.ts +++ b/packages/snap-preact/src/Templates/Stores/library/themes/bocachica.ts @@ -1 +1 @@ -export { bocachica } from '../../../../../components/src/themes/bocachica'; +export { bocachica } from '../../../../../components/src/themes/bocachica/bocachica'; diff --git a/packages/snap-preact/src/Templates/Stores/library/themes/pike.ts b/packages/snap-preact/src/Templates/Stores/library/themes/pike.ts deleted file mode 100644 index 3702894cc..000000000 --- a/packages/snap-preact/src/Templates/Stores/library/themes/pike.ts +++ /dev/null @@ -1 +0,0 @@ -export { pike } from '../../../../../components/src/themes/pike'; diff --git a/packages/snap-preact/translations/en_translation.ts b/packages/snap-preact/translations/en_translation.ts index 977f7546f..f4f5e7e89 100644 --- a/packages/snap-preact/translations/en_translation.ts +++ b/packages/snap-preact/translations/en_translation.ts @@ -97,7 +97,7 @@ export const en_translation: LangComponents = { value: (data) => `${data}`, }, }, - horizontalFacets: { + facetsHorizontal: { dropdownButton: { attributes: { 'aria-label': (data) =>