trepur_components 0.4.7 → 1.0.0

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

@@ -0,0 +1,50 @@
+import React from 'react';
+import BreadcrumbsItem from './index';
+const componentMeta = {
+    title: 'Trepur Components/Other/Atoms/Breadcrumbs Item',
+    component: BreadcrumbsItem,
+    parameters: {},
+    argTypes: {
+        id: {
+            description: 'Defines the id of the component',
+            table: {
+                category: '',
+                type: { summary: 'string' },
+                defaultValue: { summary: 'undefined' }
+            }
+        },
+        className: {
+            description: 'Defines any additional classes for the components',
+            table: {
+                category: '',
+                type: { summary: 'string' },
+                defaultValue: { summary: 'undefined' }
+            }
+        },
+        name: {
+            description: 'Specifies the name for the key attribute',
+            table: {
+                category: '',
+                type: { summary: 'string' },
+                defaultValue: { summary: 'undefined' }
+            }
+        },
+        type: {
+            description: 'Specifies the type of breadcrumbs to display ie link',
+            table: {
+                category: '',
+                type: { summary: 'string' },
+                defaultValue: { summary: 'undefined' }
+            }
+        },
+    },
+    args: {
+        name: 'Link 1',
+        href: '/',
+        firstItem: false
+    },
+};
+const Template = (args) => React.createElement(BreadcrumbsItem, Object.assign({}, args));
+export const _BreadcrumbsItem = Template.bind({});
+export default componentMeta;
+//# sourceMappingURL=BreadcrumbsItem.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BreadcrumbsItem.stories.js","sourceRoot":"","sources":["../../../../../src/lib/components/BreadcrumbsItem/BreadcrumbsItem.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,eAAe,MAAM,SAAS,CAAA;AAGrC,MAAM,aAAa,GAA0C;IACzD,KAAK,EAAE,gDAAgD;IACvD,SAAS,EAAE,eAAe;IAC1B,UAAU,EAAE,EAAE;IACd,QAAQ,EAAE;QACN,EAAE,EAAE;YACA,WAAW,EAAE,iCAAiC;YAC9C,KAAK,EAAE;gBACH,QAAQ,EAAE,EAAE;gBACZ,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;gBAC3B,YAAY,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE;aACzC;SACJ;QACD,SAAS,EAAE;YACP,WAAW,EAAE,mDAAmD;YAChE,KAAK,EAAE;gBACH,QAAQ,EAAE,EAAE;gBACZ,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;gBAC3B,YAAY,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE;aACzC;SACJ;QACD,IAAI,EAAE;YACF,WAAW,EAAE,0CAA0C;YACvD,KAAK,EAAE;gBACH,QAAQ,EAAE,EAAE;gBACZ,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;gBAC3B,YAAY,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE;aACzC;SACJ;QACD,IAAI,EAAE;YACF,WAAW,EAAE,sDAAsD;YACnE,KAAK,EAAE;gBACH,QAAQ,EAAE,EAAE;gBACZ,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;gBAC3B,YAAY,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE;aACzC;SACJ;KACJ;IACD,IAAI,EAAE;QACF,IAAI,EAAE,QAAQ;QACd,IAAI,EAAE,GAAG;QACT,SAAS,EAAE,KAAK;KACnB;CACJ,CAAA;AAED,MAAM,QAAQ,GAA2C,CAAC,IAAI,EAAE,EAAE,CAAC,oBAAC,eAAe,oBAAK,IAAI,EAAI,CAAA;AAEhG,MAAM,CAAC,MAAM,gBAAgB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAEjD,eAAe,aAAa,CAAA"}

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export interface Props {
+    id?: string;
+    className?: string;
+    name: string;
+    link: string;
+    type?: string;
+    firstItem?: boolean;
+    href?: string;
+}
+declare const BreadcrumbsItem: ({ id, className, name, link, href, type, firstItem }: Props) => JSX.Element;
+export default BreadcrumbsItem;

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

@@ -0,0 +1,59 @@
+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'
+    }, 'bc-item relative px-4 h-8');
+    const backArrowsClasses = classNames({}, 'absolute w-0 h-0 bg-transparent border-l-transparent');
+    const frontArrowClasses = classNames({}, '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", Object.assign({}, (id && { id: id }), { className: classList }), type === 'link' ?
+        firstItem ?
+            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 ?
+                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,87 @@
+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' }
+            }
+        }, 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' }
+            }
+        }, 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 },
+            description: 'Toggles the loading state of the compnent',
+            table: {
+                type: { summary: 'false' }
+            }
+        }, 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 === false && variant === 'primary',
+        'bg-white text-primary border-primary': variant === 'secondary',
+        'hover:bg-primary hover:text-white hover:border-primary': disabled === false && variant === 'secondary',
+        'opacity-50': disabled === true,
+        'rounded-lg': rounded,
+        'rounded-none': !rounded
+    }, className, padding, '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({}, (openInNewTab && { target: '_blank' }), { href: href }),
+        React.createElement("button", Object.assign({}, (id && { id: id }), { className: classList, "aria-busy": isLoading }, (onClick &&
+            { onClick: onClick }), (disabled &&
+            { disabled: disabled })),
+            React.createElement("div", { className: isLoading ? 'invisible' : '' }, 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,SAAS,CAAA;AAC1B,OAAO,UAAU,MAAM,YAAY,CAAA;AAiBnC,MAAM,MAAM,GAAG,CAAC,EACZ,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,EACJ,EAAE,EAAE;IACR,MAAM,OAAO,GAAG,UAAU,CAAC;QACvB,WAAW,EAAE,IAAI,KAAK,QAAQ;QAC9B,MAAM,EAAE,IAAI,KAAK,MAAM;QACvB,MAAM,EAAE,IAAI,KAAK,QAAQ,IAAI,IAAI,KAAK,MAAM;KAC/C,EAAE,MAAM,CAAC,CAAA;IAEV,MAAM,cAAc,GAAG,UAAU,CAAC;QAC9B,WAAW,EAAE,CAAC,SAAS;KAC1B,EAAE,iCAAiC,CAAC,CAAA;IAErC,MAAM,SAAS,GAAG,UAAU,CAAC;QACzB,oCAAoC,EAAE,OAAO,KAAK,SAAS;QAC3D,wDAAwD,EAAE,QAAQ,KAAK,KAAK,IAAI,OAAO,KAAK,SAAS;QACrG,sCAAsC,EAAE,OAAO,KAAK,WAAW;QAC/D,wDAAwD,EAAE,QAAQ,KAAK,KAAK,IAAI,OAAO,KAAK,WAAW;QACvG,YAAY,EAAE,QAAQ,KAAK,IAAI;QAC/B,YAAY,EAAE,OAAO;QACrB,cAAc,EAAE,CAAC,OAAO;KAC3B,EAAE,SAAS,EAAE,OAAO,EAAE,4DAA4D,CAAC,CAAA;IAEpF,MAAM,WAAW,GACb,oBAAC,IAAI,IACD,IAAI,EAAE,CAAC,EACP,IAAI,EAAC,SAAS,EACd,SAAS,EAAC,OAAO,EACjB,MAAM,EAAC,OAAO,EACd,QAAQ,EAAC,SAAS,GACpB,CAAA;IAEN,OAAO,CACH,2CACQ,CAAC,YAAY,IAAI,EAAC,MAAM,EAAE,QAAQ,EAAC,CAAC,IACxC,IAAI,EAAE,IAAI;QAEV,gDACQ,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,IACtB,SAAS,EAAE,SAAS,eACT,SAAS,IAChB,CAAC,OAAO;YACR,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,EACrB,CAAC,QAAQ;YACT,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC;YAE3B,6BAAK,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,IACvC,QAAQ,CACP;YACL,SAAS;gBACN,6BAAK,SAAS,EAAE,cAAc,IACzB,WAAW,CACV,CAEL,CACT,CACP,CAAA;AACL,CAAC,CAAA;AAED,eAAe,MAAM,CAAA"}

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ComponentStory } from '@storybook/react';
+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>>;

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,
+    parameters: {},
+    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' }),
+                "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
+};
+//# 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?: string;
+    titleRight?: string;
+    titleBold?: string;
+    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,63 @@
+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, titleRight, titleBold, imageClass, subTitleClass, extraTextClass, descriptionClass, altText, rounded, bordered, videoProps, onHover, iconButtonProps, cardButtonProps, button2Props }) => {
+    const [showHoverButtons, setShowHoverButtons] = useState(false);
+    let orderClass = imageBelowTitle ? ' order-first ' : '';
+    let btnClass = 'w-full p-3 ';
+    let border = bordered ? 'border border-grey border-opacity-100 ' : '';
+    let cardTitleFont = titleBold ? 'font-bold' : '';
+    let cardTitlePosition = titleLeft ? 'text-left ' : titleRight ? 'text-right ' : 'text-center ';
+    let roundedImage = rounded ? 'rounded-t-2xl ' : '';
+    let roundedCard = rounded ? 'rounded-2xl ' : '';
+    let 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,
+    }, `${extraTextClass} w-full object-cover h-full font-extraLight text-xs text-light-grey`);
+    const imageWrapperClassList = classNames({
+        'order-2': imageBelowTitle,
+        [`${roundedImage} order-1`]: !imageBelowTitle
+    }, 'h-64 overflow-hidden object-cover');
+    const toggleHover = (isHovering) => {
+        onHover && setShowHoverButtons(isHovering ? true : false);
+    };
+    return (React.createElement("div", Object.assign({}, (id && { 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) || (videoProps === null || videoProps === void 0 ? void 0 : videoProps.webmFile) || (videoProps === null || videoProps === void 0 ? void 0 : videoProps.ogvFile) ?
+                React.createElement("div", { className: imageWrapperClassList },
+                    React.createElement(Video, Object.assign({}, videoProps)))
+                :
+                    image &&
+                        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 ? 'order-1' : 'order-3' }, title &&
+                        React.createElement("div", { className: titleWrapperClass },
+                            React.createElement("h3", { className: cardTitleClasses }, title))),
+                    React.createElement("div", { className: contentWrapperClass },
+                        subTitle &&
+                            React.createElement("h4", { className: cardSubTitleClassList }, subTitle),
+                        description &&
+                            React.createElement("p", { className: cardDescriptionClassList }, description),
+                        extraText &&
+                            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 &&
+            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", null, "This is a child"), React.createElement("p", null, "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,sCAAsC,CAAA;AAEvD,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAEhD,MAAM,aAAa,GAA2C;IAC1D,KAAK,EAAE,gEAAgE;IACvE,SAAS,EAAE,gBAAgB;IAC3B,QAAQ,kCACD,cAAc,KACjB,QAAQ,EAAE;YACN,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;SACJ,EACD,UAAU,EAAE;YACR,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;SACJ,GACJ;IACD,IAAI,EAAE;QACF,UAAU,EAAE;YACR,KAAK,EAAE,IAAI;YACX,WAAW,EAAE,IAAI;YACjB,KAAK,EAAE,CAAC;YACR,MAAM,EAAE,CAAC;SACZ;QACD,QAAQ,EAAE,CAAC,iDAAsB,EAAC,uDAA4B,CAAC;KAClE;CACJ,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,CAAC;AAEnD,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,UAAU,CAAA;AACrD,OAAO,UAAU,MAAM,YAAY,CAAA;AASnC,MAAM,gBAAgB,GAAG,CAAC,EACtB,EAAE,EACF,SAAS,EACT,QAAQ,EACR,UAAU,EACN,EAAE,EAAE;IACR,MAAM,gBAAgB,GAAG,UAAU,CAAC,6CAA6C,CAAC,CAAA;IAElF,MAAM,gBAAgB,GAAG,yCAAyC,CAAA;IAElE,OAAO,CACH,6BACI,KAAK,EAAE;YACH,QAAQ,EAAE,2CAA2C;SACxD,EACD,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,SAAS;QAEpB,6BAAK,SAAS,EAAE,gBAAgB;YAC5B,oBAAC,KAAK,oBAAK,UAAU,EAAI,CACvB;QACN,6BAAK,SAAS,EAAE,gBAAgB,IAC3B,QAAQ,CACP,CACJ,CACT,CAAA;AACL,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;