@searchspring/snap-preact-components 0.20.0

package/dist/esm/components/Atoms/Merchandising/Banner.stories.d.ts

@@ -0,0 +1,99 @@
+import { h } from 'preact';
+import { Banner } from './Banner';
+declare const _default: {
+    title: string;
+    component: typeof Banner;
+    parameters: {
+        docs: {
+            page: () => h.JSX.Element;
+        };
+    };
+    argTypes: {
+        className: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        disableStyles: {
+            defaultValue: boolean;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        style: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        theme: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        content: {
+            description: string;
+            type: {
+                required: boolean;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        type: {
+            description: string;
+            type: {
+                required: boolean;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+                options: string[];
+            };
+        };
+    };
+};
+export default _default;
+export declare const Header: any;
+export declare const Footer: any;
+export declare const Secondary: any;
+export declare const Left: any;
+//# sourceMappingURL=Banner.stories.d.ts.map

package/dist/esm/components/Atoms/Merchandising/Banner.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Banner.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Merchandising/Banner.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAE,MAAM,EAAe,MAAM,UAAU,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAK/C,wBAuCE;AAMF,eAAO,MAAM,MAAM,KAAoB,CAAC;AAaxC,eAAO,MAAM,MAAM,KAAoB,CAAC;AAaxC,eAAO,MAAM,SAAS,KAAoB,CAAC;AAa3C,eAAO,MAAM,IAAI,KAAoB,CAAC"}

package/dist/esm/components/Atoms/Merchandising/Banner.stories.js

@@ -0,0 +1,93 @@
+import { h } from 'preact';
+import { ArgsTable, PRIMARY_STORY } from '@storybook/addon-docs/blocks';
+import { Banner } from './Banner';
+import { componentArgs } from '../../../utilities';
+import { Snapify } from '../../../utilities/snapify';
+import Readme from '../Merchandising/readme.md';
+export default {
+    title: `Atoms/Banner`,
+    component: Banner,
+    parameters: {
+        docs: {
+            page: () => (h("div", null,
+                h(Readme, null),
+                h(ArgsTable, { story: PRIMARY_STORY }))),
+        },
+    },
+    argTypes: {
+        content: {
+            description: 'Banner content store reference',
+            type: { required: true },
+            table: {
+                type: {
+                    summary: 'banner content store object',
+                },
+            },
+            control: { type: 'none' },
+        },
+        type: {
+            description: 'Banner position type',
+            type: { required: true },
+            table: {
+                type: {
+                    summary: 'string',
+                },
+            },
+            control: {
+                type: 'select',
+                options: ['header', 'footer', 'left', 'inline', 'banner'],
+            },
+        },
+        ...componentArgs,
+    },
+};
+const snapInstance = Snapify.search({ id: 'Banner', globals: { siteId: '8uyt2m', search: { query: { string: 'glasses' } } } });
+const Template = (args, { loaded: { controller } }) => h(Banner, { ...args, content: controller?.store?.merchandising?.content });
+export const Header = Template.bind({});
+Header.loaders = [
+    async () => {
+        await snapInstance.search();
+        return {
+            controller: snapInstance,
+        };
+    },
+];
+Header.args = {
+    type: 'header',
+};
+export const Footer = Template.bind({});
+Footer.loaders = [
+    async () => {
+        await snapInstance.search();
+        return {
+            controller: snapInstance,
+        };
+    },
+];
+Footer.args = {
+    type: 'footer',
+};
+export const Secondary = Template.bind({});
+Secondary.loaders = [
+    async () => {
+        await snapInstance.search();
+        return {
+            controller: snapInstance,
+        };
+    },
+];
+Secondary.args = {
+    type: 'banner',
+};
+export const Left = Template.bind({});
+Left.loaders = [
+    async () => {
+        await snapInstance.search();
+        return {
+            controller: snapInstance,
+        };
+    },
+];
+Left.args = {
+    type: 'left',
+};

package/dist/esm/components/Atoms/Merchandising/InlineBanner.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { InlineBannerContent, ComponentProps, LayoutType } from '../../../types';
+export declare function InlineBanner(properties: InlineBannerProps): JSX.Element;
+export interface InlineBannerProps extends ComponentProps {
+    banner: InlineBannerContent;
+    width?: string;
+    layout?: LayoutType;
+}
+//# sourceMappingURL=InlineBanner.d.ts.map

package/dist/esm/components/Atoms/Merchandising/InlineBanner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InlineBanner.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Merchandising/InlineBanner.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAU,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAyBzF,wBAAgB,YAAY,CAAC,UAAU,EAAE,iBAAiB,GAAG,GAAG,CAAC,OAAO,CAoCvE;AAED,MAAM,WAAW,iBAAkB,SAAQ,cAAc;IACxD,MAAM,EAAE,mBAAmB,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,UAAU,CAAC;CACpB"}

package/dist/esm/components/Atoms/Merchandising/InlineBanner.js

@@ -0,0 +1,51 @@
+import { jsx, css } from '@emotion/react';
+import classnames from 'classnames';
+import { useTheme, CacheProvider } from '../../../providers';
+import { Layout } from '../../../types';
+const CSS = {
+    inlineBanner: ({ width }) => css({
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: width || 'auto',
+        '&.ss__inline-banner--grid': {
+            flexDirection: 'column',
+        },
+        '&.ss__inline-banner--list': {
+            flexDirection: 'row',
+            display: 'block',
+            width: '100%',
+        },
+        '& iframe': {
+            maxWidth: '100%',
+        },
+    }),
+};
+export function InlineBanner(properties) {
+    const globalTheme = useTheme();
+    const props = {
+        // default props
+        layout: Layout.GRID,
+        banner: {},
+        // global theme
+        ...globalTheme?.components?.banner,
+        // props
+        ...properties,
+        ...properties.theme?.components?.banner,
+    };
+    const { banner, disableStyles, className, width, layout, style } = props;
+    const styling = {};
+    if (!disableStyles) {
+        styling.css = [CSS.inlineBanner({ width }), style];
+    }
+    else if (style) {
+        styling.css = [style];
+    }
+    return (banner &&
+        banner.value && (jsx(CacheProvider, null,
+        jsx("div", { className: classnames('ss__inline-banner', `ss__inline-banner--${layout}`, className), ...styling, dangerouslySetInnerHTML: {
+                __html: banner.value,
+            } }))));
+}

package/dist/esm/components/Atoms/Merchandising/InlineBanner.stories.d.ts

@@ -0,0 +1,107 @@
+import { h } from 'preact';
+import { InlineBanner } from './InlineBanner';
+import { Layout } from '../../../types';
+declare const _default: {
+    title: string;
+    component: typeof InlineBanner;
+    parameters: {
+        docs: {
+            page: () => h.JSX.Element;
+        };
+    };
+    argTypes: {
+        className: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        disableStyles: {
+            defaultValue: boolean;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        style: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        theme: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        banner: {
+            description: string;
+            type: {
+                required: boolean;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        layout: {
+            description: string;
+            defaultValue: Layout;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+                options: Layout[];
+            };
+        };
+        width: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+    };
+    decorators: ((Story: any) => h.JSX.Element)[];
+};
+export default _default;
+export declare const Default: any;
+//# sourceMappingURL=InlineBanner.stories.d.ts.map

package/dist/esm/components/Atoms/Merchandising/InlineBanner.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InlineBanner.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Merchandising/InlineBanner.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAE,YAAY,EAAqB,MAAM,gBAAgB,CAAC;AAIjE,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAExC,wBA6DE;AASF,eAAO,MAAM,OAAO,KAAoB,CAAC"}

package/dist/esm/components/Atoms/Merchandising/InlineBanner.stories.js

@@ -0,0 +1,75 @@
+import { h } from 'preact';
+import { ArgsTable, PRIMARY_STORY } from '@storybook/addon-docs/blocks';
+import { InlineBanner } from './InlineBanner';
+import { componentArgs } from '../../../utilities';
+import { Snapify } from '../../../utilities/snapify';
+import Readme from '../Merchandising/readme.md';
+import { Layout } from '../../../types';
+export default {
+    title: `Atoms/InlineBanner`,
+    component: InlineBanner,
+    parameters: {
+        docs: {
+            page: () => (h("div", null,
+                h(Readme, null),
+                h(ArgsTable, { story: PRIMARY_STORY }))),
+        },
+    },
+    argTypes: {
+        banner: {
+            description: 'InlineBanner content store reference',
+            type: { required: true },
+            table: {
+                type: {
+                    summary: 'inline banner content store object',
+                },
+            },
+            control: { type: 'none' },
+        },
+        layout: {
+            description: 'Banner layout',
+            defaultValue: Layout.GRID,
+            table: {
+                type: {
+                    summary: 'string',
+                },
+            },
+            control: {
+                type: 'select',
+                options: [Layout.GRID, Layout.LIST],
+            },
+        },
+        width: {
+            description: 'InlineBanner width',
+            table: {
+                type: {
+                    summary: 'string',
+                },
+            },
+            control: { type: 'text' },
+        },
+        ...componentArgs,
+    },
+    decorators: [
+        (Story) => (h("div", { style: {
+                width: '220px',
+                height: '300px',
+                position: 'relative',
+            } },
+            h(Story, { height: "200px" }))),
+    ],
+};
+const snapInstance = Snapify.search({ id: 'InlineBanner', globals: { siteId: '8uyt2m', search: { query: { string: 'glasses' } } } });
+const Template = (args, { loaded: { controller } }) => {
+    const inlineBanners = controller?.store?.merchandising?.content?.inline;
+    return inlineBanners && h(InlineBanner, { banner: inlineBanners[0], ...args });
+};
+export const Default = Template.bind({});
+Default.loaders = [
+    async () => {
+        await snapInstance.search();
+        return {
+            controller: snapInstance,
+        };
+    },
+];

package/dist/esm/components/Atoms/Merchandising/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Banner';
+export * from './InlineBanner';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/Atoms/Merchandising/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Merchandising/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC"}

package/dist/esm/components/Atoms/Merchandising/index.js

@@ -0,0 +1,2 @@
+export * from './Banner';
+export * from './InlineBanner';

package/dist/esm/components/Atoms/Overlay/Overlay.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { ComponentProps } from '../../../types';
+export declare function Overlay(properties: OverlayProps): JSX.Element;
+export interface OverlayProps extends ComponentProps {
+    active: boolean;
+    color?: string;
+    transitionSpeed?: string;
+    onClick?: (e: React.MouseEvent<HTMLDivElement, Event>) => void;
+}
+//# sourceMappingURL=Overlay.d.ts.map

package/dist/esm/components/Atoms/Overlay/Overlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Overlay.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Overlay/Overlay.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAqBhD,wBAAgB,OAAO,CAAC,UAAU,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO,CA+B7D;AAED,MAAM,WAAW,YAAa,SAAQ,cAAc;IACnD,MAAM,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,KAAK,CAAC,KAAK,IAAI,CAAC;CAC/D"}

package/dist/esm/components/Atoms/Overlay/Overlay.js

@@ -0,0 +1,44 @@
+import { jsx, css } from '@emotion/react';
+import classnames from 'classnames';
+import { useTheme, CacheProvider } from '../../../providers';
+const CSS = {
+    overlay: ({ color, transitionSpeed }) => 
+    //@ts-ignore
+    css({
+        transition: `background ${transitionSpeed} ease 0s, left 0s ease ${transitionSpeed}`,
+        position: 'fixed',
+        zIndex: '10003',
+        height: '100%',
+        width: '100%',
+        top: '0',
+        left: '-100%',
+        '&.ss__overlay--active': {
+            transition: `background ${transitionSpeed} ease, left 0s ease`,
+            background: color,
+            left: '0',
+        },
+    }),
+};
+export function Overlay(properties) {
+    const globalTheme = useTheme();
+    const props = {
+        // default props
+        color: 'rgba(0,0,0,0.8)',
+        transitionSpeed: '0.25s',
+        // global theme
+        ...globalTheme?.components?.overlay,
+        // props
+        ...properties,
+        ...properties.theme?.components?.overlay,
+    };
+    const { active, color, transitionSpeed, onClick, disableStyles, className, style } = props;
+    const styling = {};
+    if (!disableStyles) {
+        styling.css = [CSS.overlay({ color, transitionSpeed }), style];
+    }
+    else if (style) {
+        styling.css = [style];
+    }
+    return (jsx(CacheProvider, null,
+        jsx("div", { onClick: (e) => onClick && active && onClick(e), className: classnames('ss__overlay', { 'ss__overlay--active': active }, className), ...styling })));
+}

package/dist/esm/components/Atoms/Overlay/Overlay.stories.d.ts

@@ -0,0 +1,123 @@
+import { h } from 'preact';
+import { Overlay } from './Overlay';
+declare const _default: {
+    title: string;
+    component: typeof Overlay;
+    parameters: {
+        docs: {
+            page: () => h.JSX.Element;
+        };
+    };
+    argTypes: {
+        className: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        disableStyles: {
+            defaultValue: boolean;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        style: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        theme: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        active: {
+            description: string;
+            type: {
+                required: boolean;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        color: {
+            defaultValue: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        transitionSpeed: {
+            defaultValue: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        onClick: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            action: string;
+        };
+    };
+};
+export default _default;
+export declare const Default: any;
+//# sourceMappingURL=Overlay.stories.d.ts.map

package/dist/esm/components/Atoms/Overlay/Overlay.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Overlay.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Overlay/Overlay.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIpC,wBA4DE;AAIF,eAAO,MAAM,OAAO,KAAoB,CAAC"}