searchspring · korgon · Sep 10, 2024 · Sep 6, 2024
diff --git 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
@@ -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 (
 					<div style={{ marginBottom: '40px' }}>
-						<Icon icon={icon as keyof typeof iconPaths} size="40px" style={{ padding: '20px' }} />
+						<Icon icon={icon as IconType} size="40px" style={{ padding: '20px' }} />
 						<div style={{ textAlign: 'center' }}>{icon}</div>
 					</div>
 				);

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
@@ -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 (
 					<div style={{ margin: '0 auto', textAlign: 'center' }}>
-						<Icon
-							icon={icon as keyof typeof iconPaths}
-							color={shiftColor('#3a23ad', (index + '111').padStart(6, '1'))}
-							size="80px"
-							style={{ padding: '20px' }}
-						/>
+						<Icon icon={icon as IconType} color={shiftColor('#3a23ad', (index + '111').padStart(6, '1'))} size="80px" style={{ padding: '20px' }} />
 						<div style={{ textAlign: 'center' }}>{icon}</div>
 					</div>
 				);

diff --git 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<FacetProps, 'facet'>;
 };
diff --git a/...zontalFacets/HorizontalFacets.stories.tsx → ...tsHorizontal/FacetsHorizontal.stories.tsx b/...zontalFacets/HorizontalFacets.stories.tsx → ...tsHorizontal/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 <HorizontalFacets {...args} controller={controller} />;
+export const Default = (args: FacetsHorizontalProps, { loaded: { controller } }: { loaded: { controller: SearchController } }) => {
+	return <FacetsHorizontal {...args} controller={controller} />;
 };
 
 Default.loaders = [

diff --git a/...orizontalFacets/HorizontalFacets.test.tsx → ...acetsHorizontal/FacetsHorizontal.test.tsx b/...orizontalFacets/HorizontalFacets.test.tsx → ...acetsHorizontal/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,26 +11,26 @@ 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(<HorizontalFacets {...args} />);
-		const horizontalFacetsElement = rendered.container.querySelector('.ss__horizontal-facets');
-		expect(horizontalFacetsElement).toBeInTheDocument();
+		const rendered = render(<FacetsHorizontal {...args} />);
+		const facetsHorizontalElement = rendered.container.querySelector('.ss__facets-horizontal');
+		expect(facetsHorizontalElement).toBeInTheDocument();
 	});
 
 	it('limits number of facets and displays sidebar overflow', () => {
 		const args = {
 			facets: searchResponse.facets as IndividualFacetType[],
 			limit: 2,
 		};
-		const rendered = render(<HorizontalFacets {...args} />);
-		const facetsDropdown = rendered.container.querySelectorAll('.ss__horizontal-facets__header__dropdown');
+		const rendered = render(<FacetsHorizontal {...args} />);
+		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(<HorizontalFacets {...args} />);
+		const rendered = render(<FacetsHorizontal {...args} />);
 
-		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(<HorizontalFacets {...args} />);
+		const rendered = render(<FacetsHorizontal {...args} />);
 
 		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(<HorizontalFacets {...args} />);
+		const rendered = render(<FacetsHorizontal {...args} />);
 
-		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(<HorizontalFacets {...args} />);
+		const rendered = render(<FacetsHorizontal {...args} />);
 
-		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(<HorizontalFacets {...args} lang={lang} />);
+					const rendered = render(<FacetsHorizontal {...args} lang={lang} />);
 					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(
 			<ThemeProvider theme={globalTheme}>
-				<HorizontalFacets {...args} />
+				<FacetsHorizontal {...args} />
 			</ThemeProvider>
 		);
-		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(<HorizontalFacets {...args} theme={propTheme} />);
-		const horizontalFacetsElement = rendered.container.querySelector('.ss__horizontal-facets');
-		expect(horizontalFacetsElement).toBeInTheDocument();
-		expect(horizontalFacetsElement).toHaveClass(propTheme.components.horizontalFacets.className);
+		const rendered = render(<FacetsHorizontal {...args} theme={propTheme} />);
+		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(
 			<ThemeProvider theme={globalTheme}>
-				<HorizontalFacets {...args} theme={propTheme} />
+				<FacetsHorizontal {...args} theme={propTheme} />
 			</ThemeProvider>
 		);
 
-		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);
 	});
 });