trepur_components 0.4.8 → 1.0.1

package/dist/src/lib/components/BreadcrumbsItem/index.js

@@ -0,0 +1,57 @@
+import React, { useState } from 'react';
+import classNames from 'classnames';
+const BreadcrumbsItem = ({ id, className, name, link, href, type, firstItem }) => {
+    const [isHovering, setIsHovering] = useState(false);
+    const topArrowClasses = 'top-0';
+    const bottomArrowClasses = 'bottom-0';
+    const textClassList = 'text-center pt-1';
+    const liClassList = 'list-none';
+    const classList = classNames(className, 'item');
+    const itemClassList = classNames({
+        'hover:underline': type === 'link',
+        'mb-0': isHovering
+    }, 'bc-item relative px-4 h-8');
+    const backArrowsClasses = 'absolute w-0 h-0 bg-transparent border-l-transparent';
+    const frontArrowClasses = 'absolute top-0 w-0 h-0 border-t';
+    const frontArrow = (React.createElement("span", { style: {
+            borderTop: '17px solid transparent',
+            borderBottom: '15px solid transparent',
+            borderLeft: '16px solid',
+            right: '-16px'
+        }, className: frontArrowClasses }));
+    const backArrows = (React.createElement(React.Fragment, null,
+        React.createElement("span", { style: {
+                borderTop: '17px solid',
+                borderBottom: '18px solid transparent',
+                borderLeft: '17px solid transparent',
+                left: '-17px',
+                // '-webkit-transform': 'scaleY(-1)',
+                transform: 'scaleY(-1)'
+            }, className: `${backArrowsClasses} ${bottomArrowClasses}` }),
+        React.createElement("span", { style: {
+                borderTop: '18px solid',
+                borderBottom: '17px solid transparent',
+                borderLeft: '17px solid transparent',
+                left: '-17px'
+            }, className: `${backArrowsClasses} ${topArrowClasses}` })));
+    const renderWithFrontArrow = (React.createElement("div", { className: itemClassList },
+        React.createElement("p", { className: textClassList },
+            name,
+            frontArrow)));
+    const renderWithBackArrows = (React.createElement("div", { className: itemClassList },
+        React.createElement("p", { className: textClassList },
+            backArrows,
+            name,
+            frontArrow)));
+    return (React.createElement("div", { id: id, className: classList }, type === 'link'
+        ? (firstItem === true
+            ? (React.createElement("a", { onMouseOver: () => setIsHovering(true), onMouseOut: () => setIsHovering(false), href: href },
+                React.createElement("li", { className: liClassList }, renderWithFrontArrow)))
+            : (React.createElement("a", { onMouseOver: () => setIsHovering(true), onMouseOut: () => setIsHovering(false), href: href },
+                React.createElement("li", { className: liClassList }, renderWithBackArrows))))
+        : (firstItem === true
+            ? (React.createElement("li", { className: liClassList, onMouseOver: () => setIsHovering(true), onMouseOut: () => setIsHovering(false) }, renderWithFrontArrow))
+            : (React.createElement("li", { className: liClassList, onMouseOver: () => setIsHovering(true), onMouseOut: () => setIsHovering(false) }, renderWithBackArrows)))));
+};
+export default BreadcrumbsItem;
+//# sourceMappingURL=index.js.map

package/dist/src/lib/components/BreadcrumbsItem/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/lib/components/BreadcrumbsItem/index.tsx"],"names":[],"mappings":"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"}

package/dist/src/lib/components/Button/button.stories.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import Button from './index';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const componentMeta: ComponentMeta<typeof Button>;
+export declare const _Button: ComponentStory<({ id, className, onClick, hoverText, variant, type, href, rounded, disabled, isLoading, openInNewTab, children }: import("./index").Props) => JSX.Element>;
+export default componentMeta;

package/dist/src/lib/components/Button/button.stories.js

@@ -0,0 +1,132 @@
+import React from 'react';
+import Button from './index';
+import { action } from '@storybook/addon-actions';
+import { idAndClassName } from '../../utils/controls';
+const componentMeta = {
+    title: 'Trepur Components/Rupert Bennett/Atoms/Button',
+    component: Button,
+    parameters: {
+        docs: {
+            description: {
+                component: 'A Button which can either be internal, external or social as well as a standard design or a slide design.'
+            }
+        }
+    },
+    argTypes: Object.assign(Object.assign({}, idAndClassName), { onClick: {
+            type: { name: 'function', required: false },
+            description: 'The action to perform when clicking on the component',
+            action: 'onClick',
+            table: {
+                type: {
+                    summary: 'function'
+                },
+                defaultValue: { summary: 'undefined' }
+            }
+        }, hoverText: {
+            type: {
+                name: 'string',
+                required: false
+            },
+            description: 'The text to display when hovering on the component',
+            table: {
+                type: {
+                    summary: 'string'
+                },
+                defaultValue: {
+                    summary: 'undefined'
+                }
+            }
+        }, variant: {
+            type: {
+                name: 'string', required: false
+            },
+            options: ['primary', 'secondary'],
+            description: 'The variant of button to render',
+            table: {
+                type: {
+                    summary: 'primary'
+                },
+                defaultValue: {
+                    summary: 'primary'
+                }
+            },
+            defaultValue: 'primary',
+            control: {
+                type: 'radio'
+            }
+        }, type: {
+            type: {
+                name: 'string',
+                required: false
+            },
+            options: ['default', 'social', 'icon'],
+            description: 'The type of button to render',
+            table: {
+                type: {
+                    summary: 'default'
+                },
+                defaultValue: {
+                    summary: 'default'
+                }
+            },
+            defaultValue: 'default',
+            control: { type: 'radio' }
+        }, href: {
+            type: { name: 'string', required: false },
+            description: 'The link attached to the component',
+            table: {
+                type: {
+                    summary: 'default'
+                },
+                defaultValue: {
+                    summary: 'undefined'
+                }
+            }
+        }, rounded: {
+            type: {
+                name: 'boolean',
+                required: false
+            },
+            description: 'rounds the borders when true',
+            defaultValue: 'true'
+        }, disabled: {
+            type: {
+                name: 'boolean',
+                required: false
+            },
+            description: 'Can the carousel be dragged or not'
+        }, isLoading: {
+            type: {
+                name: 'boolean',
+                required: false
+            },
+            table: {
+                defaultValue: {
+                    summary: 'false'
+                }
+            },
+            description: 'Toggles the loading state of the compnent'
+        }, openInNewTab: {
+            type: { name: 'boolean', required: false },
+            description: 'Opens the link in a new tab when set to true',
+            defaultValue: 'false'
+        }, children: {
+            type: { name: 'other', value: 'string | React.ReactNode' },
+            description: 'The child elements to show in the component',
+            table: {
+                type: {
+                    summary: 'Array'
+                },
+                defaultValue: { summary: 'undefined' }
+            }
+        } }),
+    args: {
+        children: 'This is a button',
+        rounded: true,
+        onClick: action('button clicked')
+    }
+};
+const Template = (args) => React.createElement(Button, Object.assign({}, args));
+export const _Button = Template.bind({});
+export default componentMeta;
+//# sourceMappingURL=button.stories.js.map

package/dist/src/lib/components/Button/button.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.stories.js","sourceRoot":"","sources":["../../../../../src/lib/components/Button/button.stories.tsx"],"names":[],"mappings":"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"}

package/dist/src/lib/components/Button/index.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export interface Props {
+    id?: string;
+    className?: string;
+    onClick?: React.MouseEventHandler;
+    hoverText?: string;
+    variant?: 'primary' | 'secondary';
+    type?: 'social' | 'icon' | 'default';
+    href?: string;
+    rounded?: boolean;
+    disabled?: boolean;
+    isLoading?: boolean;
+    openInNewTab?: boolean;
+    children?: any;
+}
+declare const Button: ({ id, className, onClick, hoverText, variant, type, href, rounded, disabled, isLoading, openInNewTab, children }: Props) => JSX.Element;
+export default Button;

package/dist/src/lib/components/Button/index.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import Icon from '../Icon';
+import classNames from 'classnames';
+const Button = ({ id, className, onClick, hoverText, variant = 'primary', type = 'default', href, rounded = true, disabled = false, isLoading = false, openInNewTab = false, children }) => {
+    const padding = classNames({
+        'px-1 py-1': type === 'social',
+        'px-3': type === 'icon',
+        'px-8': type !== 'social' && type !== 'icon'
+    }, 'py-2');
+    const loadingClasses = classNames({
+        invisible: !isLoading
+    }, 'absolute left-2/4 top-1/4 -ml-2');
+    const classList = classNames({
+        'bg-primary text-white border-white': variant === 'primary',
+        'hover:bg-white hover:text-primary hover:border-primary': !disabled && variant === 'primary',
+        'bg-white text-primary border-primary': variant === 'secondary',
+        'hover:bg-primary hover:text-white hover:border-primary': !disabled && variant === 'secondary',
+        'opacity-50': disabled,
+        'rounded-lg': rounded,
+        'rounded-none': !rounded
+    }, className, padding, 'group border-2 transition-backgroundColor duration-500 transform');
+    const loadingIcon = (React.createElement(Icon, { size: 1, type: 'spinner', animation: 'pulse', colour: 'white', bgColour: 'primary' }));
+    return (React.createElement("a", Object.assign({ className: 'group' }, (openInNewTab && { target: '_blank' }), { href: href }),
+        React.createElement("button", Object.assign({ id: id, className: classList, "aria-busy": isLoading }, ((onClick != null) &&
+            { onClick }), (disabled &&
+            { disabled })),
+            React.createElement("div", { className: classNames({ invisible: isLoading }) }, children),
+            isLoading &&
+                React.createElement("div", { className: loadingClasses }, loadingIcon))));
+};
+export default Button;
+//# sourceMappingURL=index.js.map

package/dist/src/lib/components/Button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/lib/components/Button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,IAAI,MAAM,kBAAkB,CAAA;AACnC,OAAO,UAAU,MAAM,YAAY,CAAA;AAiBnC,MAAM,MAAM,GAAG,CAAC,EACd,EAAE,EACF,SAAS,EACT,OAAO,EACP,SAAS,EACT,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,SAAS,EAChB,IAAI,EACJ,OAAO,GAAG,IAAI,EACd,QAAQ,GAAG,KAAK,EAChB,SAAS,GAAG,KAAK,EACjB,YAAY,GAAG,KAAK,EACpB,QAAQ,EACF,EAAe,EAAE;IACvB,MAAM,OAAO,GAAG,UAAU,CAAC;QACzB,WAAW,EAAE,IAAI,KAAK,QAAQ;QAC9B,MAAM,EAAE,IAAI,KAAK,MAAM;QACvB,MAAM,EAAE,IAAI,KAAK,QAAQ,IAAI,IAAI,KAAK,MAAM;KAC7C,EAAE,MAAM,CAAC,CAAA;IAEV,MAAM,cAAc,GAAG,UAAU,CAAC;QAChC,SAAS,EAAE,CAAC,SAAS;KACtB,EAAE,iCAAiC,CAAC,CAAA;IAErC,MAAM,SAAS,GAAG,UAAU,CAAC;QAC3B,oCAAoC,EAAE,OAAO,KAAK,SAAS;QAC3D,wDAAwD,EAAE,CAAC,QAAQ,IAAI,OAAO,KAAK,SAAS;QAC5F,sCAAsC,EAAE,OAAO,KAAK,WAAW;QAC/D,wDAAwD,EAAE,CAAC,QAAQ,IAAI,OAAO,KAAK,WAAW;QAC9F,YAAY,EAAE,QAAQ;QACtB,YAAY,EAAE,OAAO;QACrB,cAAc,EAAE,CAAC,OAAO;KACzB,EAAE,SAAS,EAAE,OAAO,EAAE,kEAAkE,CAAC,CAAA;IAE1F,MAAM,WAAW,GAAG,CAClB,oBAAC,IAAI,IACH,IAAI,EAAE,CAAC,EACP,IAAI,EAAC,SAAS,EACd,SAAS,EAAC,OAAO,EACjB,MAAM,EAAC,OAAO,EACd,QAAQ,EAAC,SAAS,GAClB,CACH,CAAA;IAED,OAAO,CACL,yCACE,SAAS,EAAC,OAAO,IACb,CAAC,YAAY,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,IAC1C,IAAI,EAAE,IAAI;QAEV,8CACE,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,SAAS,eACT,SAAS,IAChB,CAAC,CAAC,OAAO,IAAI,IAAI,CAAC;YACV,EAAE,OAAO,EAAE,CAAC,EACpB,CAAC,QAAQ;YACD,EAAE,QAAQ,EAAE,CAAC;YAEzB,6BAAK,SAAS,EAAE,UAAU,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC,IACjD,QAAQ,CACL;YACL,SAAS;gBACR,6BAAK,SAAS,EAAE,cAAc,IAC3B,WAAW,CACR,CACD,CACP,CACL,CAAA;AACH,CAAC,CAAA;AAED,eAAe,MAAM,CAAA"}

package/dist/src/lib/components/Card/Card.stories.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import Card from './index';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const componentMeta: ComponentMeta<typeof Card>;
+export declare const _ImageCard: ComponentStory<React.FC<import("./index").Props>>;
+export declare const _VideoCard: ComponentStory<React.FC<import("./index").Props>>;
+export declare const _ProductCard: ComponentStory<React.FC<import("./index").Props>>;
+export default componentMeta;

package/dist/src/lib/components/Card/Card.stories.js

@@ -0,0 +1,124 @@
+import React from 'react';
+import Card from './index';
+import { idAndClassName } from '../../utils/controls';
+import Icon from '../Icon';
+const componentMeta = {
+    title: 'Trepur Components/Rupert Bennett/Organisms/Card',
+    component: Card,
+    argTypes: Object.assign(Object.assign({}, idAndClassName), { title: {
+            description: '',
+            table: {
+                category: 'Card'
+            }
+        }, image: {
+            description: '',
+            table: {
+                category: 'Card'
+            }
+        }, subTitle: {
+            description: '',
+            table: {
+                category: 'Card'
+            }
+        }, description: {
+            description: '',
+            table: {
+                category: 'Card'
+            }
+        }, extraText: {
+            description: '',
+            table: {
+                category: 'Card'
+            }
+        }, imageBelowTitle: {
+            description: '',
+            table: {
+                category: 'Card'
+            }
+        }, bordered: {
+            description: '',
+            table: {
+                category: 'Card'
+            }
+        }, rounded: {
+            description: '',
+            table: {
+                category: 'Card'
+            }
+        }, hasCta: {
+            description: '',
+            table: {
+                category: 'Card'
+            }
+        }, titleLeft: {
+            description: '',
+            table: {
+                category: 'Card'
+            }
+        }, titleRight: {
+            description: '',
+            table: {
+                category: 'Card'
+            }
+        }, titleBold: {
+            description: '',
+            table: {
+                category: 'Card'
+            }
+        } }),
+    args: {
+        subTitle: 'This is a subtitle',
+        description: 'This is a description paragraph',
+        extraText: 'This is another paragraph',
+        rounded: true,
+        bordered: true,
+        hasCta: true,
+        iconButtonProps: {
+            type: 'icon',
+            href: '/',
+            className: 'mt-8',
+            children: React.createElement(Icon, { type: 'heart', hollow: false })
+        },
+        cardButtonProps: {
+            children: (React.createElement("div", { className: 'flex' },
+                React.createElement(Icon, { type: 'heart' }),
+                React.createElement("p", null, "buttonText"),
+                React.createElement(Icon, { type: 'heart' }))),
+            disabled: false,
+            hoverText: 'buttonHoverText',
+            href: 'buttonUrl',
+            rounded: true
+        },
+        button2Props: {
+            className: 'ml-2 w-full mt-8',
+            children: 'Add to basket',
+            rounded: false,
+            disabled: false
+        }
+    }
+};
+const Template = (args) => React.createElement(Card, Object.assign({}, args));
+export const _ImageCard = Template.bind({});
+_ImageCard.args = {
+    title: 'This is a title',
+    image: 'https://picsum.photos/500/300'
+};
+export const _VideoCard = Template.bind({});
+_VideoCard.args = {
+    title: 'This is a title',
+    videoProps: {
+        mp4File: '/',
+        withControls: true,
+        autoPlay: true
+    }
+};
+export const _ProductCard = Template.bind({});
+_ProductCard.args = {
+    image: 'https://picsum.photos/500/300',
+    subTitle: 'Product name',
+    description: 'Product description',
+    extraText: '£123.45',
+    onHover: true
+};
+export default componentMeta;
+//# sourceMappingURL=Card.stories.js.map

package/dist/src/lib/components/Card/Card.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.stories.js","sourceRoot":"","sources":["../../../../../src/lib/components/Card/Card.stories.tsx"],"names":[],"mappings":"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"}

package/dist/src/lib/components/Card/index.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Props as buttonProps } from '../Button';
+import { Props as videoProps } from '../Video';
+export interface Props {
+    id?: string;
+    className?: string;
+    title?: string;
+    image?: string;
+    subTitle?: string;
+    description?: string;
+    extraText?: string;
+    hasCta?: boolean;
+    imageBelowTitle?: boolean;
+    titleLeft?: boolean;
+    titleRight?: boolean;
+    titleBold?: boolean;
+    imageClass?: string;
+    subTitleClass?: string;
+    extraTextClass?: string;
+    descriptionClass?: string;
+    altText?: string;
+    rounded?: boolean;
+    bordered?: boolean;
+    videoProps?: videoProps;
+    onHover?: boolean;
+    iconButtonProps?: buttonProps;
+    cardButtonProps?: buttonProps;
+    button2Props?: buttonProps;
+}
+declare const Card: React.FC<Props>;
+export default Card;

package/dist/src/lib/components/Card/index.js

@@ -0,0 +1,66 @@
+import React, { useState } from 'react';
+import classNames from 'classnames';
+import Button from '../Button';
+import Video from '../Video';
+const Card = ({ id, className, title, image, subTitle, description, extraText, hasCta, imageBelowTitle, titleLeft = false, titleRight = false, titleBold = false, imageClass, subTitleClass, extraTextClass, descriptionClass, altText, rounded, bordered, videoProps, onHover = false, iconButtonProps, cardButtonProps, button2Props }) => {
+    const [showHoverButtons, setShowHoverButtons] = useState(false);
+    const orderClass = classNames({ 'order-first': imageBelowTitle });
+    const btnClass = 'w-full p-3';
+    const border = classNames({ 'border border-grey border-opacity-100:': bordered });
+    const cardTitleFont = classNames({ 'font-bold': titleBold });
+    const cardTitlePosition = classNames({
+        'text-left': titleLeft,
+        'text-right': titleRight,
+        'text-center': !titleLeft && !titleRight
+    });
+    const roundedImage = classNames({ 'rounded-t-lg': rounded });
+    const roundedCard = classNames({ 'rounded-lg': rounded });
+    const contentWrapperClass = 'px-3 order-3';
+    const titleWrapperClass = classNames(orderClass, 'pt-3');
+    const cardTitleClasses = classNames({
+        [cardTitlePosition]: true
+    }, cardTitleFont, 'font-medium text-md text-grey');
+    const cardSubTitleClassList = classNames(subTitleClass, 'font-light text-sm text-grey');
+    const cardDescriptionClassList = classNames(descriptionClass, 'font-extraLight text-xs text-light-grey');
+    const classList = classNames(className, border, roundedCard, 'flex flex-col');
+    const imageClassList = classNames(roundedImage, imageClass, 'w-full object-cover h-full');
+    const cardExtraTextClassList = classNames({
+        'pb-4': hasCta === false
+    }, extraTextClass, 'w-full object-cover h-full font-extraLight text-xs text-light-grey');
+    const imageWrapperClassList = classNames({
+        'order-2': imageBelowTitle === true,
+        [roundedImage]: imageBelowTitle === false,
+        'order-1': imageBelowTitle === false
+    }, 'h-64 overflow-hidden object-cover');
+    const toggleHover = (isHovering) => {
+        onHover && setShowHoverButtons(!!isHovering);
+    };
+    return (React.createElement("div", { id: id, className: classList, onMouseEnter: () => toggleHover(true), onMouseLeave: () => toggleHover(false) },
+        React.createElement("div", { className: 'card-content flex flex-1 flex-col' },
+            (videoProps === null || videoProps === void 0 ? void 0 : videoProps.mp4File) !== undefined || (videoProps === null || videoProps === void 0 ? void 0 : videoProps.webmFile) !== undefined || (videoProps === null || videoProps === void 0 ? void 0 : videoProps.ogvFile) !== undefined
+                ? (React.createElement("div", { className: imageWrapperClassList },
+                    React.createElement(Video, Object.assign({}, videoProps))))
+                : (image !== undefined &&
+                    React.createElement("div", { className: imageWrapperClassList },
+                        React.createElement("img", { className: imageClassList, src: image, alt: altText }))),
+            !showHoverButtons
+                ? (React.createElement(React.Fragment, null,
+                    React.createElement("div", { className: imageBelowTitle !== undefined ? 'order-1' : 'order-3' }, title !== undefined &&
+                        React.createElement("div", { className: titleWrapperClass },
+                            React.createElement("h3", { className: cardTitleClasses }, title))),
+                    React.createElement("div", { className: contentWrapperClass },
+                        subTitle !== undefined &&
+                            React.createElement("h4", { className: cardSubTitleClassList }, subTitle),
+                        description !== undefined &&
+                            React.createElement("p", { className: cardDescriptionClassList }, description),
+                        extraText !== undefined &&
+                            React.createElement("p", { className: cardExtraTextClassList }, extraText))))
+                : (React.createElement("div", { className: 'flex p-2 order-last h-24' },
+                    React.createElement(Button, Object.assign({}, iconButtonProps), iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.children),
+                    React.createElement(Button, Object.assign({}, button2Props), button2Props === null || button2Props === void 0 ? void 0 : button2Props.children)))),
+        (cardButtonProps != null) &&
+            React.createElement("div", { className: btnClass },
+                React.createElement(Button, Object.assign({}, cardButtonProps), cardButtonProps.children))));
+};
+export default Card;
+//# sourceMappingURL=index.js.map

package/dist/src/lib/components/Card/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/lib/components/Card/index.tsx"],"names":[],"mappings":"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"}

package/dist/src/lib/components/CardWithTopImage/CardWithTopImage.stories.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import CardWithTopImage from './index';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const componentMeta: ComponentMeta<typeof CardWithTopImage>;
+export declare const _CardWithTopImage: ComponentStory<({ id, className, children, imageProps }: import("./index").Props) => JSX.Element>;
+export default componentMeta;

package/dist/src/lib/components/CardWithTopImage/CardWithTopImage.stories.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import CardWithTopImage from './index';
+import logo from '@assets/images/primary-logo.png';
+import { idAndClassName } from '../../utils/controls';
+const componentMeta = {
+    title: 'Trepur Components/Rupert Bennett/Organisms/Card With Top Image',
+    component: CardWithTopImage,
+    argTypes: Object.assign(Object.assign({}, idAndClassName), { children: {
+            type: { name: 'other', value: 'string | React.ReactNode' },
+            description: 'The child elements to show in the component',
+            table: {
+                type: {
+                    summary: 'Array'
+                },
+                defaultValue: { summary: 'undefined' }
+            }
+        }, imageProps: {
+            type: { name: 'other', value: 'object' },
+            description: 'The props to pass to the image on the component',
+            table: {
+                type: {
+                    summary: 'object'
+                },
+                defaultValue: { summary: 'undefined' }
+            }
+        } }),
+    args: {
+        imageProps: {
+            image: logo,
+            roundedFull: true,
+            width: 4,
+            height: 4
+        },
+        children: [React.createElement("p", { key: '1' }, "This is a child"), React.createElement("p", { key: '2' }, "This is another child")]
+    }
+};
+const Template = (args) => React.createElement(CardWithTopImage, Object.assign({}, args));
+export const _CardWithTopImage = Template.bind({});
+export default componentMeta;
+//# sourceMappingURL=CardWithTopImage.stories.js.map

package/dist/src/lib/components/CardWithTopImage/CardWithTopImage.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardWithTopImage.stories.js","sourceRoot":"","sources":["../../../../../src/lib/components/CardWithTopImage/CardWithTopImage.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,gBAAgB,MAAM,SAAS,CAAA;AACtC,OAAO,IAAI,MAAM,iCAAiC,CAAA;AAElD,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAEhD,MAAM,aAAa,GAA2C;IAC5D,KAAK,EAAE,gEAAgE;IACvE,SAAS,EAAE,gBAAgB;IAC3B,QAAQ,kCACH,cAAc,KACjB,QAAQ,EAAE;YACR,IAAI,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,0BAA0B,EAAE;YAC1D,WAAW,EAAE,6CAA6C;YAC1D,KAAK,EAAE;gBACL,IAAI,EAAE;oBACJ,OAAO,EAAE,OAAO;iBACjB;gBACD,YAAY,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE;aACvC;SACF,EACD,UAAU,EAAE;YACV,IAAI,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE;YACxC,WAAW,EAAE,iDAAiD;YAC9D,KAAK,EAAE;gBACL,IAAI,EAAE;oBACJ,OAAO,EAAE,QAAQ;iBAClB;gBACD,YAAY,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE;aACvC;SACF,GACF;IACD,IAAI,EAAE;QACJ,UAAU,EAAE;YACV,KAAK,EAAE,IAAI;YACX,WAAW,EAAE,IAAI;YACjB,KAAK,EAAE,CAAC;YACR,MAAM,EAAE,CAAC;SACV;QACD,QAAQ,EAAE,CAAC,2BAAG,GAAG,EAAC,GAAG,sBAAoB,EAAE,2BAAG,GAAG,EAAC,GAAG,4BAA0B,CAAC;KACjF;CACF,CAAA;AAED,MAAM,QAAQ,GAA4C,CAAC,IAAI,EAAE,EAAE,CAAC,oBAAC,gBAAgB,oBAAK,IAAI,EAAI,CAAA;AAElG,MAAM,CAAC,MAAM,iBAAiB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAElD,eAAe,aAAa,CAAA"}

package/dist/src/lib/components/CardWithTopImage/index.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { Props as imageProps } from '../Image';
+export interface Props {
+    id?: string;
+    className?: string;
+    children?: any;
+    imageProps?: imageProps;
+}
+declare const CardWithTopImage: ({ id, className, children, imageProps }: Props) => JSX.Element;
+export default CardWithTopImage;

package/dist/src/lib/components/CardWithTopImage/index.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import Image from '../Image';
+import classNames from 'classnames';
+const CardWithTopImage = ({ id, className, children, imageProps }) => {
+    const wrapperClassList = classNames('rounded-full mx-auto max-w-max bg-white p-4');
+    const contentClassList = 'pt-12 px-4 h-auto pb-16 -mt-12 bg-white';
+    return (React.createElement("div", { style: {
+            filter: 'drop-shadow(0 4px 8px rgb(154, 154, 154))'
+        }, id: id, className: className },
+        React.createElement("div", { className: wrapperClassList },
+            React.createElement(Image, Object.assign({}, imageProps))),
+        React.createElement("div", { className: contentClassList }, children)));
+};
+export default CardWithTopImage;
+//# sourceMappingURL=index.js.map

package/dist/src/lib/components/CardWithTopImage/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/lib/components/CardWithTopImage/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,KAA8B,MAAM,mBAAmB,CAAA;AAC9D,OAAO,UAAU,MAAM,YAAY,CAAA;AASnC,MAAM,gBAAgB,GAAG,CAAC,EACxB,EAAE,EACF,SAAS,EACT,QAAQ,EACR,UAAU,EACJ,EAAe,EAAE;IACvB,MAAM,gBAAgB,GAAG,UAAU,CAAC,6CAA6C,CAAC,CAAA;IAElF,MAAM,gBAAgB,GAAG,yCAAyC,CAAA;IAElE,OAAO,CACL,6BACE,KAAK,EAAE;YACL,MAAM,EAAE,2CAA2C;SACpD,EACD,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,SAAS;QAEpB,6BAAK,SAAS,EAAE,gBAAgB;YAC9B,oBAAC,KAAK,oBAAK,UAAU,EAAI,CACrB;QACN,6BAAK,SAAS,EAAE,gBAAgB,IAC7B,QAAQ,CACL,CACF,CACP,CAAA;AACH,CAAC,CAAA;AAED,eAAe,gBAAgB,CAAA"}

package/dist/src/lib/components/Carousel/Carousel.stories.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import Carousel from './index';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const componentMeta: ComponentMeta<typeof Carousel>;
+export declare const _Carousel: ComponentStory<React.FC<import("./index").Props>>;
+export default componentMeta;