trepur_components 0.4.8 → 1.0.1

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import Button from '../Button';
+import classNames from 'classnames';
+const FyreCard = ({ id, className, image, imageClass, altText, bordered, buttonProps }) => {
+    const classList = classNames({
+        'border border-grey border-opacity-100': bordered
+    }, className, 'flex flex-col');
+    const imageClassList = classNames(imageClass, 'w-full');
+    return (React.createElement("div", { key: id, id: id, className: classList },
+        React.createElement("div", { className: 'card-content flex flex-1 flex-col' },
+            React.createElement("div", null,
+                React.createElement("img", { className: imageClassList, src: image, alt: altText })),
+            React.createElement("div", { className: 'flex justify-end' },
+                React.createElement(Button, Object.assign({}, buttonProps), buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.children)))));
+};
+export default FyreCard;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/lib/components/FyreCard/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,MAAgC,MAAM,oBAAoB,CAAA;AACjE,OAAO,UAAU,MAAM,YAAY,CAAA;AAWnC,MAAM,QAAQ,GAAG,CAAC,EAChB,EAAE,EACF,SAAS,EACT,KAAK,EACL,UAAU,EACV,OAAO,EACP,QAAQ,EACR,WAAW,EACL,EAAe,EAAE;IACvB,MAAM,SAAS,GAAG,UAAU,CAAC;QAC3B,uCAAuC,EAAE,QAAQ;KAClD,EAAE,SAAS,EAAE,eAAe,CAAC,CAAA;IAC9B,MAAM,cAAc,GAAG,UAAU,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAA;IAEvD,OAAO,CACL,6BACE,GAAG,EAAE,EAAE,EACP,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,SAAS;QAEpB,6BAAK,SAAS,EAAC,mCAAmC;YAChD;gBACE,6BAAK,SAAS,EAAE,cAAc,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,OAAO,GAAI,CACxD;YACN,6BAAK,SAAS,EAAC,kBAAkB;gBAC/B,oBAAC,MAAM,oBAAK,WAAW,GAAG,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,QAAQ,CAAU,CACrD,CACF,CACF,CACP,CAAA;AACH,CAAC,CAAA;AAED,eAAe,QAAQ,CAAA"}

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

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

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import Greeting from './index';
+import { idAndClassName } from '../../utils/controls';
+const componentMeta = {
+    title: 'Trepur Components/Rupert Bennett/Atoms/Greeting',
+    component: Greeting,
+    argTypes: Object.assign(Object.assign({}, idAndClassName), { morningMessage: {
+            type: { name: 'string', required: false },
+            description: 'Defines the morning message for the greeting component',
+            table: {
+                type: { summary: 'string' }
+            }
+        }, afternoonMessage: {
+            type: { name: 'string', required: false },
+            description: 'Defines the afternoon message for the greeting component',
+            table: {
+                type: { summary: 'string' }
+            }
+        }, eveningMessage: {
+            type: { name: 'string', required: false },
+            description: 'Defines the evening message for the greeting component',
+            table: {
+                type: { summary: 'string' }
+            }
+        } }),
+    args: {
+        morningMessage: 'What a beautiful morning it is today'
+    }
+};
+const Template = (args) => React.createElement(Greeting, Object.assign({}, args));
+export const _Greeting = Template.bind({});
+export default componentMeta;
+//# sourceMappingURL=Greeting.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Greeting.stories.js","sourceRoot":"","sources":["../../../../../src/lib/components/Greeting/Greeting.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,QAAQ,MAAM,SAAS,CAAA;AAE9B,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAEhD,MAAM,aAAa,GAAmC;IACpD,KAAK,EAAE,iDAAiD;IACxD,SAAS,EAAE,QAAQ;IACnB,QAAQ,kCACH,cAAc,KACjB,cAAc,EAAE;YACd,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE;YACzC,WAAW,EAAE,wDAAwD;YACrE,KAAK,EAAE;gBACL,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;aAC5B;SACF,EACD,gBAAgB,EAAE;YAChB,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE;YACzC,WAAW,EAAE,0DAA0D;YACvE,KAAK,EAAE;gBACL,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;aAC5B;SACF,EACD,cAAc,EAAE;YACd,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE;YACzC,WAAW,EAAE,wDAAwD;YACrE,KAAK,EAAE;gBACL,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;aAC5B;SACF,GACF;IACD,IAAI,EAAE;QACJ,cAAc,EAAE,sCAAsC;KACvD;CACF,CAAA;AAED,MAAM,QAAQ,GAAoC,CAAC,IAAI,EAAE,EAAE,CAAC,oBAAC,QAAQ,oBAAK,IAAI,EAAI,CAAA;AAElF,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAE1C,eAAe,aAAa,CAAA"}

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export interface Props {
+    id?: string;
+    className?: string;
+    morningMessage?: string;
+    afternoonMessage?: string;
+    eveningMessage?: string;
+}
+declare const Greeting: ({ id, className, morningMessage, afternoonMessage, eveningMessage }: Props) => JSX.Element;
+export default Greeting;

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import classNames from 'classnames';
+const Greeting = ({ id, className, morningMessage = 'Good morning', afternoonMessage = 'Good afternoon', eveningMessage = 'Good evening' }) => {
+    const today = new Date();
+    const hours = `0${today.getHours().toString()}`.slice(-2);
+    const minutes = `0${today.getMinutes().toString()}`.slice(-2);
+    const seconds = `0${today.getSeconds().toString()}`.slice(-2);
+    const time = parseInt(`${hours}${minutes}${seconds}`);
+    let message;
+    if (time < 120000) {
+        message = morningMessage;
+    }
+    else if (time > 115959 && time < 170000) {
+        message = afternoonMessage;
+    }
+    else if (time > 165959) {
+        message = eveningMessage;
+    }
+    const classList = classNames(className);
+    return (React.createElement("p", { id: id, className: classList }, message));
+};
+export default Greeting;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/lib/components/Greeting/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,UAAU,MAAM,YAAY,CAAA;AAUnC,MAAM,QAAQ,GAAG,CAAC,EAChB,EAAE,EACF,SAAS,EACT,cAAc,GAAG,cAAc,EAC/B,gBAAgB,GAAG,gBAAgB,EACnC,cAAc,GAAG,cAAc,EACzB,EAAe,EAAE;IACvB,MAAM,KAAK,GAAG,IAAI,IAAI,EAAE,CAAA;IACxB,MAAM,KAAK,GAAG,IAAI,KAAK,CAAC,QAAQ,EAAE,CAAC,QAAQ,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAA;IACzD,MAAM,OAAO,GAAG,IAAI,KAAK,CAAC,UAAU,EAAE,CAAC,QAAQ,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAA;IAC7D,MAAM,OAAO,GAAG,IAAI,KAAK,CAAC,UAAU,EAAE,CAAC,QAAQ,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAA;IAC7D,MAAM,IAAI,GAAG,QAAQ,CAAC,GAAG,KAAK,GAAG,OAAO,GAAG,OAAO,EAAE,CAAC,CAAA;IAErD,IAAI,OAAO,CAAA;IACX,IAAI,IAAI,GAAG,MAAM,EAAE;QACjB,OAAO,GAAG,cAAc,CAAA;KACzB;SAAM,IAAI,IAAI,GAAG,MAAM,IAAI,IAAI,GAAG,MAAM,EAAE;QACzC,OAAO,GAAG,gBAAgB,CAAA;KAC3B;SAAM,IAAI,IAAI,GAAG,MAAM,EAAE;QACxB,OAAO,GAAG,cAAc,CAAA;KACzB;IAED,MAAM,SAAS,GAAG,UAAU,CAAC,SAAS,CAAC,CAAA;IAEvC,OAAO,CACL,2BACE,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,SAAS,IAEnB,OAAO,CACN,CACL,CAAA;AACH,CAAC,CAAA;AAED,eAAe,QAAQ,CAAA"}

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

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

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

@@ -0,0 +1,46 @@
+import React from 'react';
+import HamburgerIcon from './index';
+const componentMeta = {
+    title: 'Trepur Components/Rupert Bennett/Atoms/Hamburger Icon',
+    component: HamburgerIcon,
+    parameters: {
+        docs: {
+            description: {
+                component: 'An icon component'
+            }
+        },
+        layout: 'padded'
+    },
+    argTypes: {
+        id: {
+            type: { name: 'string', required: false },
+            description: 'HTML id attribute',
+            table: { type: { summary: 'string' } }
+        },
+        className: {
+            type: { name: 'string', required: false },
+            description: 'Used to pass any additional classes to the component',
+            table: { type: { summary: 'string' } }
+        },
+        opened: {
+            type: { name: 'boolean', required: false },
+            description: 'If this component is disabled and can not be interacted',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'boolean' }
+            }
+        },
+        onClick: {
+            type: { name: 'function', required: false },
+            description: 'Function to be called when the button is clicked',
+            table: { type: { summary: 'function' } }
+        }
+    },
+    args: {
+        opened: false
+    }
+};
+const Template = (args) => React.createElement(HamburgerIcon, Object.assign({}, args));
+export const _HamburgerIcon = Template.bind({});
+export default componentMeta;
+//# sourceMappingURL=HamburgerIcon.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HamburgerIcon.stories.js","sourceRoot":"","sources":["../../../../../src/lib/components/HamburgerIcon/HamburgerIcon.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,aAAa,MAAM,SAAS,CAAA;AAEnC,MAAM,aAAa,GAAwC;IACzD,KAAK,EAAE,uDAAuD;IAC9D,SAAS,EAAE,aAAa;IACxB,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,WAAW,EAAE;gBACX,SAAS,EAAE,mBAAmB;aAC/B;SACF;QACD,MAAM,EAAE,QAAQ;KACjB;IACD,QAAQ,EAAE;QACR,EAAE,EAAE;YACF,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE;YACzC,WAAW,EAAE,mBAAmB;YAChC,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE;SACvC;QACD,SAAS,EAAE;YACT,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE;YACzC,WAAW,EAAE,sDAAsD;YACnE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE;SACvC;QACD,MAAM,EAAE;YACN,IAAI,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE;YAC1C,WAAW,EAAE,yDAAyD;YACtE,KAAK,EAAE;gBACL,IAAI,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;gBAC5B,YAAY,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;aACrC;SACF;QACD,OAAO,EAAE;YACP,IAAI,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,KAAK,EAAE;YAC3C,WAAW,EAAE,kDAAkD;YAC/D,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE,EAAE;SACzC;KACF;IACD,IAAI,EAAE;QACJ,MAAM,EAAE,KAAK;KACd;CACF,CAAA;AAED,MAAM,QAAQ,GAAyC,CAAC,IAAI,EAAE,EAAE,CAAC,oBAAC,aAAa,oBAAK,IAAI,EAAI,CAAA;AAE5F,MAAM,CAAC,MAAM,cAAc,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAE/C,eAAe,aAAa,CAAA"}

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

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface Props extends Partial<Pick<HTMLElement, 'className' | 'id'>> {
+    opened?: boolean;
+    onClick?: React.MouseEventHandler;
+}
+declare const HamburgerIcon: ({ id, className, onClick }: Props) => JSX.Element;
+export default HamburgerIcon;

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

@@ -0,0 +1,26 @@
+import React, { useState } from 'react';
+import classNames from 'classnames';
+import Button from '../Button';
+const HamburgerIcon = ({ id, className, onClick }) => {
+    const [opened, setOpened] = useState(false);
+    const lineOneClassList = classNames({
+        'origin-top-left rotate-45 translate-x-1 -translate-y-0.5': opened
+    }, 'origin-top-left transition-transform duration-200 ease-linear');
+    const lineTwoClassList = classNames({
+        'opacity-0': opened
+    }, 'opacity-100 transition-opacity duration-200 ease-linear');
+    const lineThreeClassList = classNames({
+        'origin-bottom-left -rotate-45 translate-x-1 translate-y-px': opened
+    }, 'origin-bottom-left transition-transform duration-200 ease-linear');
+    const toggleOpened = (e) => {
+        setOpened(!opened);
+        onClick === null || onClick === void 0 ? void 0 : onClick(e);
+    };
+    return (React.createElement(Button, { id: id, className: className, onClick: (e) => toggleOpened(e), variant: 'primary', type: 'icon' },
+        React.createElement("svg", { className: 'mx-auto overflow-visible fill-white group-hover:fill-primary transition-backgroundColor duration-500 transform', width: '24', height: '24', viewBox: '0 0 24 15', xmlns: 'http://www.w3.org/2000/svg' },
+            React.createElement("path", { className: lineOneClassList, d: 'M0 1.5C0 0.947715 0.447715 0.5 1 0.5H21C21.5523 0.5 22 0.947715 22 1.5C22 2.05228 21.5523 2.5 21 2.5H1C0.447716 2.5 0 2.05228 0 1.5Z' }),
+            React.createElement("path", { className: lineTwoClassList, d: 'M0 7.5C0 6.94772 0.447715 6.5 1 6.5H21C21.5523 6.5 22 6.94772 22 7.5C22 8.05228 21.5523 8.5 21 8.5H1C0.447716 8.5 0 8.05228 0 7.5Z' }),
+            React.createElement("path", { className: lineThreeClassList, d: 'M0 13.5C0 12.9477 0.447715 12.5 1 12.5H21C21.5523 12.5 22 12.9477 22 13.5C22 14.0523 21.5523 14.5 21 14.5H1C0.447716 14.5 0 14.0523 0 13.5Z' }))));
+};
+export default HamburgerIcon;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/lib/components/HamburgerIcon/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACvC,OAAO,UAAU,MAAM,YAAY,CAAA;AACnC,OAAO,MAAM,MAAM,oBAAoB,CAAA;AAOvC,MAAM,aAAa,GAAG,CAAC,EACrB,EAAE,EACF,SAAS,EACT,OAAO,EACD,EAAe,EAAE;IACvB,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAC3C,MAAM,gBAAgB,GAAG,UAAU,CAAC;QAClC,0DAA0D,EAAE,MAAM;KACnE,EAAE,+DAA+D,CAAC,CAAA;IAEnE,MAAM,gBAAgB,GAAG,UAAU,CAAC;QAClC,WAAW,EAAE,MAAM;KACpB,EAAE,yDAAyD,CAAC,CAAA;IAE7D,MAAM,kBAAkB,GAAG,UAAU,CAAC;QACpC,4DAA4D,EAAE,MAAM;KACrE,EAAE,kEAAkE,CAAC,CAAA;IAEtE,MAAM,YAAY,GAAG,CAAC,CAAM,EAAQ,EAAE;QACpC,SAAS,CAAC,CAAC,MAAM,CAAC,CAAA;QAClB,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,CAAC,CAAC,CAAA;IACd,CAAC,CAAA;IAED,OAAO,CACL,oBAAC,MAAM,IACL,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC,EAC/B,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,MAAM;QAEX,6BACE,SAAS,EAAC,gHAAgH,EAC1H,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,4BAA4B;YAElC,8BACE,SAAS,EAAE,gBAAgB,EAC3B,CAAC,EAAC,sIAAsI,GACxI;YACF,8BACE,SAAS,EAAE,gBAAgB,EAC3B,CAAC,EAAC,oIAAoI,GACtI;YACF,8BACE,SAAS,EAAE,kBAAkB,EAC7B,CAAC,EAAC,6IAA6I,GAC/I,CACE,CACC,CACV,CAAA;AACH,CAAC,CAAA;AAED,eAAe,aAAa,CAAA"}

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import Icon from './index';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const componentMeta: ComponentMeta<typeof Icon>;
+export declare const _Icon: ComponentStory<({ id, className, type, size, animation, reverseSpin, hollow, colour, bgColour, hoverColour, hoverBgColour, rounded, brand }: import("./index").Props) => JSX.Element>;
+export default componentMeta;

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

@@ -0,0 +1,87 @@
+import React from 'react';
+import Icon from './index';
+import { idAndClassName } from '../../utils/controls';
+const componentMeta = {
+    title: 'Trepur Components/Rupert Bennett/Atoms/Icon',
+    component: Icon,
+    argTypes: Object.assign(Object.assign({}, idAndClassName), { type: {
+            options: ['heart', 'arrow-up', 'arrow-down', 'multiply', 'burger', 'bars'],
+            type: { name: 'string', required: false },
+            description: 'The name of the icon to display in the component',
+            table: {
+                type: { summary: 'string' }
+            },
+            control: 'select'
+        }, size: {
+            type: { name: 'number', required: false },
+            description: 'The size of the icon to show in the component',
+            table: {
+                type: { summary: 'number' }
+            }
+        }, animation: {
+            type: { name: 'string', required: false },
+            options: ['none', 'pulse', 'spin', 'beat'],
+            description: 'Type of annimation to apply to the component',
+            table: {
+                type: { summary: 'string' }
+            },
+            control: 'select'
+        }, reverseSpin: {
+            type: { name: 'boolean', required: false },
+            description: 'To reverse the animation on the component',
+            table: {
+                type: { summary: 'boolean' }
+            },
+            defaultValue: 'false'
+        }, hollow: {
+            type: { name: 'boolean', required: false },
+            description: 'To render a hollow version of the icon in component',
+            table: {
+                type: { summary: 'boolean' }
+            },
+            defaultValue: 'false'
+        }, colour: {
+            type: { name: 'string', required: false },
+            options: ['primary', 'secondary', 'white', 'black', 'gold'],
+            description: 'The font colour of the component',
+            table: {
+                type: { summary: 'string' }
+            },
+            defaultValue: 'primary',
+            control: 'select'
+        }, bgColour: {
+            type: { name: 'string', required: false },
+            options: ['primary', 'secondary', 'white', 'black', 'gold'],
+            description: 'The background colour of the component',
+            table: {
+                type: { summary: 'string' }
+            },
+            defaultValue: 'secondary',
+            control: 'select'
+        }, rounded: {
+            type: { name: 'boolean', required: false },
+            description: 'Sets the component to a circle shape',
+            table: {
+                type: { summary: 'boolean' }
+            },
+            defaultValue: 'false'
+        }, brand: {
+            type: { name: 'boolean', required: false },
+            description: 'Set to true if the icon type to render is a brand image',
+            table: {
+                type: { summary: 'boolean' }
+            },
+            defaultValue: 'false'
+        } }),
+    args: {
+        type: 'heart',
+        size: 3,
+        animation: 'none',
+        hoverBgColour: 'primary',
+        hoverColour: 'secondary'
+    }
+};
+const Template = (args) => React.createElement(Icon, Object.assign({}, args));
+export const _Icon = Template.bind({});
+export default componentMeta;
+//# sourceMappingURL=Icon.stories.js.map

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

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

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

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { Colours } from '../../utils/controls';
+export interface Props {
+    id?: string;
+    className?: string;
+    type: string;
+    size?: number;
+    animation?: 'pulse' | 'none';
+    reverseSpin?: boolean;
+    hollow?: boolean;
+    colour?: Colours;
+    bgColour?: Colours;
+    hoverColour?: Colours;
+    hoverBgColour?: Colours;
+    rounded?: boolean;
+    brand?: boolean;
+}
+declare const Icon: ({ id, className, type, size, animation, reverseSpin, hollow, colour, bgColour, hoverColour, hoverBgColour, rounded, brand }: Props) => JSX.Element;
+export default Icon;

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

@@ -0,0 +1,56 @@
+import React from 'react';
+import classNames from 'classnames';
+const Icon = ({ id, className, type, size = 1, animation = 'none', reverseSpin = false, hollow = false, colour = 'primary', bgColour = 'secondary', hoverColour = 'primary', hoverBgColour = 'secondary', rounded = false, brand = false }) => {
+    const fontColour = {
+        primary: 'text-primary',
+        secondary: 'text-secondary',
+        white: 'text-white',
+        black: 'text-black',
+        gold: 'text-gold'
+    };
+    const backgroundColour = {
+        primary: 'bg-primary',
+        secondary: 'bg-secondary',
+        white: 'bg-white',
+        black: 'bg-black',
+        gold: 'bg-gold'
+    };
+    const hoverFontColour = {
+        primary: 'group-hover:text-primary',
+        secondary: 'group-hover:text-secondary',
+        white: 'group-hover:text-white',
+        black: 'group-hover:text-black',
+        gold: 'group-hover:text-gold'
+    };
+    const hoverBackgroundColour = {
+        primary: 'group-hover:bg-primary',
+        secondary: 'group-hover:bg-secondary',
+        white: 'group-hover:bg-white',
+        black: 'group-hover:bg-black',
+        gold: 'group-hover:bg-gold'
+    };
+    const wrapperClassList = classNames({
+        'w-6 h-6': size === 1,
+        'w-10 h-10': size === 2,
+        'w-14 h-14': size === 3,
+        'w-20 h-20': size === 4,
+        'w-24 h-24': size === 5,
+        'w-28 h-28': size === 6,
+        'w-32 h-32': size === 7,
+        'w-36 h-36': size === 8,
+        'w-40 h-40': size === 9,
+        'w-44 h-44': size === 10,
+        'rounded-full': rounded
+    }, className, backgroundColour[bgColour], fontColour[colour], hoverBackgroundColour[hoverBgColour], hoverFontColour[hoverColour], 'flex transition-backgroundColor duration-500 transform');
+    const classList = classNames({
+        'fa-brands': brand,
+        [`fa-${size}x`]: size,
+        [`fa-${animation}`]: animation,
+        'fa-spin-reverse': reverseSpin,
+        'fa-regular': hollow
+    }, `fa fa-${type} mx-auto my-auto`);
+    return (React.createElement("div", { id: id, className: wrapperClassList },
+        React.createElement("span", { className: classList, role: 'img', "aria-hidden": 'true', "aria-label": type })));
+};
+export default Icon;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/lib/components/Icon/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,UAAU,MAAM,YAAY,CAAA;AAmBnC,MAAM,IAAI,GAAG,CAAC,EACZ,EAAE,EACF,SAAS,EACT,IAAI,EACJ,IAAI,GAAG,CAAC,EACR,SAAS,GAAG,MAAM,EAClB,WAAW,GAAG,KAAK,EACnB,MAAM,GAAG,KAAK,EACd,MAAM,GAAG,SAAS,EAClB,QAAQ,GAAG,WAAW,EACtB,WAAW,GAAG,SAAS,EACvB,aAAa,GAAG,WAAW,EAC3B,OAAO,GAAG,KAAK,EACf,KAAK,GAAG,KAAK,EACP,EAAe,EAAE;IACvB,MAAM,UAAU,GAAiC;QAC/C,OAAO,EAAE,cAAc;QACvB,SAAS,EAAE,gBAAgB;QAC3B,KAAK,EAAE,YAAY;QACnB,KAAK,EAAE,YAAY;QACnB,IAAI,EAAE,WAAW;KAClB,CAAA;IAED,MAAM,gBAAgB,GAAiC;QACrD,OAAO,EAAE,YAAY;QACrB,SAAS,EAAE,cAAc;QACzB,KAAK,EAAE,UAAU;QACjB,KAAK,EAAE,UAAU;QACjB,IAAI,EAAE,SAAS;KAChB,CAAA;IAED,MAAM,eAAe,GAAiC;QACpD,OAAO,EAAE,0BAA0B;QACnC,SAAS,EAAE,4BAA4B;QACvC,KAAK,EAAE,wBAAwB;QAC/B,KAAK,EAAE,wBAAwB;QAC/B,IAAI,EAAE,uBAAuB;KAC9B,CAAA;IAED,MAAM,qBAAqB,GAAiC;QAC1D,OAAO,EAAE,wBAAwB;QACjC,SAAS,EAAE,0BAA0B;QACrC,KAAK,EAAE,sBAAsB;QAC7B,KAAK,EAAE,sBAAsB;QAC7B,IAAI,EAAE,qBAAqB;KAC5B,CAAA;IAED,MAAM,gBAAgB,GAAG,UAAU,CAAC;QAClC,SAAS,EAAE,IAAI,KAAK,CAAC;QACrB,WAAW,EAAE,IAAI,KAAK,CAAC;QACvB,WAAW,EAAE,IAAI,KAAK,CAAC;QACvB,WAAW,EAAE,IAAI,KAAK,CAAC;QACvB,WAAW,EAAE,IAAI,KAAK,CAAC;QACvB,WAAW,EAAE,IAAI,KAAK,CAAC;QACvB,WAAW,EAAE,IAAI,KAAK,CAAC;QACvB,WAAW,EAAE,IAAI,KAAK,CAAC;QACvB,WAAW,EAAE,IAAI,KAAK,CAAC;QACvB,WAAW,EAAE,IAAI,KAAK,EAAE;QACxB,cAAc,EAAE,OAAO;KACxB,EACD,SAAS,EACT,gBAAgB,CAAC,QAAQ,CAAC,EAC1B,UAAU,CAAC,MAAM,CAAC,EAClB,qBAAqB,CAAC,aAAa,CAAC,EACpC,eAAe,CAAC,WAAW,CAAC,EAC5B,wDAAwD,CACvD,CAAA;IAED,MAAM,SAAS,GAAG,UAAU,CAAC;QAC3B,WAAW,EAAE,KAAK;QAClB,CAAC,MAAM,IAAI,GAAG,CAAC,EAAE,IAAI;QACrB,CAAC,MAAM,SAAS,EAAE,CAAC,EAAE,SAAS;QAC9B,iBAAiB,EAAE,WAAW;QAC9B,YAAY,EAAE,MAAM;KACrB,EAAE,SAAS,IAAI,kBAAkB,CAAC,CAAA;IAEnC,OAAO,CACL,6BACE,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,gBAAgB;QAE3B,8BACE,SAAS,EAAE,SAAS,EACpB,IAAI,EAAC,KAAK,iBACE,MAAM,gBACN,IAAI,GAChB,CACE,CACP,CAAA;AACH,CAAC,CAAA;AAED,eAAe,IAAI,CAAA"}

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import Image from '.';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const componentMeta: ComponentMeta<typeof Image>;
+export declare const _Image: ComponentStory<({ id, className, image, altText, title, rounded, roundedFull, height, width, overlayText, centerAligned }: import(".").Props) => JSX.Element>;
+export default componentMeta;

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

@@ -0,0 +1,73 @@
+import React from 'react';
+import Image from '.';
+import { idAndClassName } from '../../utils/controls';
+import logo from '@assets/images/primary-logo.png';
+const componentMeta = {
+    title: 'Trepur Components/Rupert Bennett/Atoms/Image',
+    component: Image,
+    argTypes: Object.assign(Object.assign({}, idAndClassName), { image: {
+            type: { name: 'string', required: false },
+            description: 'The image to display on the component',
+            table: {
+                type: { summary: 'default' }
+            }
+        }, altText: {
+            type: { name: 'string', required: false },
+            description: 'The accessibility alt text for the image on the component',
+            table: {
+                type: { summary: 'default' }
+            }
+        }, title: {
+            type: { name: 'string', required: false },
+            description: 'The accessibility title for the image on the component',
+            table: {
+                type: { summary: 'default' }
+            }
+        }, rounded: {
+            type: { name: 'boolean', required: false },
+            description: 'Sets the corners of the component to rounded',
+            table: {
+                type: { summary: 'boolean' }
+            }
+        }, roundedFull: {
+            type: { name: 'boolean', required: false },
+            description: 'Sets the component to a circle shape',
+            table: {
+                type: { summary: 'boolean' }
+            }
+        }, height: {
+            type: { name: 'number', required: false },
+            description: 'Defines the height of the component',
+            table: {
+                type: { summary: 'number' }
+            }
+        }, width: {
+            type: { name: 'number', required: false },
+            description: 'Defines the width of the component',
+            table: {
+                type: { summary: 'number' }
+            }
+        }, overlayText: {
+            type: { name: 'string', required: false },
+            description: 'The text to show when hovering over the component',
+            table: {
+                type: { summary: 'default' }
+            }
+        }, centerAligned: {
+            type: { name: 'boolean', required: false },
+            description: 'Sets the component to the center',
+            table: {
+                type: { summary: 'boolean' }
+            }
+        } }),
+    args: {
+        image: logo,
+        height: 8,
+        width: 8,
+        overlayText: 'logo'
+    }
+};
+const Template = (args) => React.createElement(Image, Object.assign({}, args));
+export const _Image = Template.bind({});
+export default componentMeta;
+//# sourceMappingURL=Image.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Image.stories.js","sourceRoot":"","sources":["../../../../../src/lib/components/Image/Image.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,KAAK,MAAM,GAAG,CAAA;AACrB,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAEhD,OAAO,IAAI,MAAM,iCAAiC,CAAA;AAElD,MAAM,aAAa,GAAgC;IACjD,KAAK,EAAE,8CAA8C;IACrD,SAAS,EAAE,KAAK;IAChB,QAAQ,kCACH,cAAc,KACjB,KAAK,EAAE;YACL,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE;YACzC,WAAW,EAAE,uCAAuC;YACpD,KAAK,EAAE;gBACL,IAAI,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;aAC7B;SACF,EACD,OAAO,EAAE;YACP,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE;YACzC,WAAW,EAAE,2DAA2D;YACxE,KAAK,EAAE;gBACL,IAAI,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;aAC7B;SACF,EACD,KAAK,EAAE;YACL,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE;YACzC,WAAW,EAAE,wDAAwD;YACrE,KAAK,EAAE;gBACL,IAAI,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;aAC7B;SACF,EACD,OAAO,EAAE;YACP,IAAI,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE;YAC1C,WAAW,EAAE,8CAA8C;YAC3D,KAAK,EAAE;gBACL,IAAI,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;aAC7B;SACF,EACD,WAAW,EAAE;YACX,IAAI,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE;YAC1C,WAAW,EAAE,sCAAsC;YACnD,KAAK,EAAE;gBACL,IAAI,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;aAC7B;SACF,EACD,MAAM,EAAE;YACN,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE;YACzC,WAAW,EAAE,qCAAqC;YAClD,KAAK,EAAE;gBACL,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;aAC5B;SACF,EACD,KAAK,EAAE;YACL,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE;YACzC,WAAW,EAAE,oCAAoC;YACjD,KAAK,EAAE;gBACL,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;aAC5B;SACF,EACD,WAAW,EAAE;YACX,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE;YACzC,WAAW,EAAE,mDAAmD;YAChE,KAAK,EAAE;gBACL,IAAI,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;aAC7B;SACF,EACD,aAAa,EAAE;YACb,IAAI,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE;YAC1C,WAAW,EAAE,kCAAkC;YAC/C,KAAK,EAAE;gBACL,IAAI,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;aAC7B;SACF,GACF;IACD,IAAI,EAAE;QACJ,KAAK,EAAE,IAAI;QACX,MAAM,EAAE,CAAC;QACT,KAAK,EAAE,CAAC;QACR,WAAW,EAAE,MAAM;KACpB;CACF,CAAA;AAED,MAAM,QAAQ,GAAiC,CAAC,IAAI,EAAE,EAAE,CAAC,oBAAC,KAAK,oBAAK,IAAI,EAAI,CAAA;AAE5E,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAEvC,eAAe,aAAa,CAAA"}

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

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+export interface Props {
+    id?: string;
+    className?: string;
+    image?: string;
+    altText?: string;
+    title?: string;
+    rounded?: boolean;
+    roundedFull?: boolean;
+    height?: number;
+    width?: number;
+    overlayText?: string;
+    centerAligned?: boolean;
+}
+declare const Image: ({ id, className, image, altText, title, rounded, roundedFull, height, width, overlayText, centerAligned }: Props) => JSX.Element;
+export default Image;

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

@@ -0,0 +1,54 @@
+import React, { useState } from 'react';
+import classNames from 'classnames';
+const Image = ({ id, className, image, altText, title, rounded = false, roundedFull = false, height = 8, width = 8, overlayText, centerAligned = false }) => {
+    const [isHovering, setIsHovering] = useState(false);
+    const opacity = classNames({
+        'opacity-80': isHovering,
+        'opacity-0': !isHovering
+    });
+    const widthClassList = classNames({
+        'w-6': width === 1,
+        'w-10': width === 2,
+        'w-14': width === 3,
+        'w-16': width === 4,
+        'w-20': width === 5,
+        'w-24': width === 6,
+        'w-28': width === 7,
+        'w-32': width === 8,
+        'w-36': width === 9,
+        'w-40': width === 10,
+        'w-44': width === 11,
+        'w-full': (width === undefined) || (![1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].includes(width))
+    });
+    const heightClassList = classNames({
+        'h-6': height === 1,
+        'h-10': height === 2,
+        'h-14': height === 3,
+        'h-16': height === 4,
+        'h-20': height === 5,
+        'h-24': height === 6,
+        'h-28': height === 7,
+        'h-32': height === 8,
+        'h-36': height === 9,
+        'h-40': height === 10,
+        'h-44': height === 11,
+        'h-full': (height === undefined) || (![1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].includes(height))
+    });
+    const imageClassList = classNames({
+        'rounded-2xl': rounded,
+        'rounded-full': roundedFull,
+        'mx-auto': centerAligned
+    }, className, widthClassList, heightClassList);
+    const overlayClassList = classNames(widthClassList, heightClassList, opacity, 'absolute z-10 transition-opacity duration-700 bg-white');
+    const overlayTextWrapperClassList = classNames(widthClassList, heightClassList, opacity, 'flex absolute z-20 transition-opacity duration-700');
+    const overlayTextClassList = 'm-auto text-center text-primary';
+    return (React.createElement(React.Fragment, null,
+        overlayText !== undefined &&
+            React.createElement(React.Fragment, null,
+                React.createElement("div", { className: overlayClassList }),
+                React.createElement("div", { className: overlayTextWrapperClassList, onMouseEnter: () => setIsHovering(true), onMouseLeave: () => setIsHovering(false) },
+                    React.createElement("p", { className: overlayTextClassList }, overlayText))),
+        React.createElement("img", Object.assign({ id: id, className: imageClassList, src: image }, (altText !== undefined && { alt: altText }), (title !== undefined && { title })))));
+};
+export default Image;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/lib/components/Image/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACvC,OAAO,UAAU,MAAM,YAAY,CAAA;AAgBnC,MAAM,KAAK,GAAG,CAAC,EACb,EAAE,EACF,SAAS,EACT,KAAK,EACL,OAAO,EACP,KAAK,EACL,OAAO,GAAG,KAAK,EACf,WAAW,GAAG,KAAK,EACnB,MAAM,GAAG,CAAC,EACV,KAAK,GAAG,CAAC,EACT,WAAW,EACX,aAAa,GAAG,KAAK,EACf,EAAe,EAAE;IACvB,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IACnD,MAAM,OAAO,GAAG,UAAU,CAAC;QACzB,YAAY,EAAE,UAAU;QACxB,WAAW,EAAE,CAAC,UAAU;KACzB,CAAC,CAAA;IAEF,MAAM,cAAc,GAAG,UAAU,CAAC;QAChC,KAAK,EAAE,KAAK,KAAK,CAAC;QAClB,MAAM,EAAE,KAAK,KAAK,CAAC;QACnB,MAAM,EAAE,KAAK,KAAK,CAAC;QACnB,MAAM,EAAE,KAAK,KAAK,CAAC;QACnB,MAAM,EAAE,KAAK,KAAK,CAAC;QACnB,MAAM,EAAE,KAAK,KAAK,CAAC;QACnB,MAAM,EAAE,KAAK,KAAK,CAAC;QACnB,MAAM,EAAE,KAAK,KAAK,CAAC;QACnB,MAAM,EAAE,KAAK,KAAK,CAAC;QACnB,MAAM,EAAE,KAAK,KAAK,EAAE;QACpB,MAAM,EAAE,KAAK,KAAK,EAAE;QACpB,QAAQ,EAAE,CAAC,KAAK,KAAK,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;KAC1F,CAAC,CAAA;IAEF,MAAM,eAAe,GAAG,UAAU,CAAC;QACjC,KAAK,EAAE,MAAM,KAAK,CAAC;QACnB,MAAM,EAAE,MAAM,KAAK,CAAC;QACpB,MAAM,EAAE,MAAM,KAAK,CAAC;QACpB,MAAM,EAAE,MAAM,KAAK,CAAC;QACpB,MAAM,EAAE,MAAM,KAAK,CAAC;QACpB,MAAM,EAAE,MAAM,KAAK,CAAC;QACpB,MAAM,EAAE,MAAM,KAAK,CAAC;QACpB,MAAM,EAAE,MAAM,KAAK,CAAC;QACpB,MAAM,EAAE,MAAM,KAAK,CAAC;QACpB,MAAM,EAAE,MAAM,KAAK,EAAE;QACrB,MAAM,EAAE,MAAM,KAAK,EAAE;QACrB,QAAQ,EAAE,CAAC,MAAM,KAAK,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;KAC5F,CAAC,CAAA;IAEF,MAAM,cAAc,GAAG,UAAU,CAAC;QAChC,aAAa,EAAE,OAAO;QACtB,cAAc,EAAE,WAAW;QAC3B,SAAS,EAAE,aAAa;KACzB,EAAE,SAAS,EAAE,cAAc,EAAE,eAAe,CAAC,CAAA;IAE9C,MAAM,gBAAgB,GAAG,UAAU,CACjC,cAAc,EACd,eAAe,EACf,OAAO,EACP,wDAAwD,CACzD,CAAA;IAED,MAAM,2BAA2B,GAAG,UAAU,CAC5C,cAAc,EACd,eAAe,EACf,OAAO,EACP,oDAAoD,CACrD,CAAA;IAED,MAAM,oBAAoB,GAAG,iCAAiC,CAAA;IAE9D,OAAO,CACL;QACG,WAAW,KAAK,SAAS;YACxB;gBACE,6BAAK,SAAS,EAAE,gBAAgB,GAAI;gBACpC,6BACE,SAAS,EAAE,2BAA2B,EACtC,YAAY,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,EACvC,YAAY,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC;oBAExC,2BAAG,SAAS,EAAE,oBAAoB,IAAG,WAAW,CAAK,CACjD,CACL;QACL,2CACE,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,cAAc,EACzB,GAAG,EAAE,KAAK,IACN,CAAC,OAAO,KAAK,SAAS,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,CAAC,EAC3C,CAAC,KAAK,KAAK,SAAS,IAAI,EAAE,KAAK,EAAE,CAAC,EACtC,CACD,CACJ,CAAA;AACH,CAAC,CAAA;AAED,eAAe,KAAK,CAAA"}

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import ImageLink from './index';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const componentMeta: ComponentMeta<typeof ImageLink>;
+export declare const _ImageLink: ComponentStory<({ id, className, image, altText, title, link, rounded, openInNewTab, buttonProps }: import("./index").Props) => JSX.Element>;
+export declare const _ImageLinkWithTitle: ComponentStory<({ id, className, image, altText, title, link, rounded, openInNewTab, buttonProps }: import("./index").Props) => JSX.Element>;
+export declare const _ImageLinkWithButton: ComponentStory<({ id, className, image, altText, title, link, rounded, openInNewTab, buttonProps }: import("./index").Props) => JSX.Element>;
+export declare const _ImageLinkRounded: ComponentStory<({ id, className, image, altText, title, link, rounded, openInNewTab, buttonProps }: import("./index").Props) => JSX.Element>;
+export default componentMeta;

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

@@ -0,0 +1,50 @@
+import React from 'react';
+import { idAndClassName } from '../../utils/controls';
+import Column from '../Column';
+import ImageLink from './index';
+const componentMeta = {
+    title: 'Trepur Components/Other/Organisms/Image Link',
+    component: ImageLink,
+    parameters: {},
+    argTypes: Object.assign(Object.assign({}, idAndClassName), { title: {
+            description: '',
+            control: 'text',
+            table: {
+                category: ''
+            }
+        }, image: {
+            description: '',
+            control: 'text',
+            table: {
+                category: ''
+            }
+        } }),
+    args: {
+        image: 'https://picsum.photos/400/400',
+        link: '/'
+    }
+};
+const Template = (args) => React.createElement(Column, { sm: 3, md: 3 },
+    React.createElement(ImageLink, Object.assign({}, args)));
+export const _ImageLink = Template.bind({});
+_ImageLink.args = {};
+export const _ImageLinkWithTitle = Template.bind({});
+_ImageLinkWithTitle.args = {
+    title: 'Title'
+};
+export const _ImageLinkWithButton = Template.bind({});
+_ImageLinkWithButton.args = {
+    buttonProps: {
+        children: 'Button 1'
+    }
+};
+export const _ImageLinkRounded = Template.bind({});
+_ImageLinkRounded.args = {
+    title: 'Title',
+    buttonProps: {
+        children: 'Button 1'
+    },
+    rounded: true
+};
+export default componentMeta;
+//# sourceMappingURL=ImageLink.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ImageLink.stories.js","sourceRoot":"","sources":["../../../../../src/lib/components/ImageLink/ImageLink.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAChD,OAAO,MAAM,MAAM,oBAAoB,CAAA;AACvC,OAAO,SAAS,MAAM,SAAS,CAAA;AAG/B,MAAM,aAAa,GAAoC;IACrD,KAAK,EAAE,8CAA8C;IACrD,SAAS,EAAE,SAAS;IACpB,UAAU,EAAE,EAAE;IACd,QAAQ,kCACH,cAAc,KACjB,KAAK,EAAE;YACL,WAAW,EAAE,EAAE;YACf,OAAO,EAAE,MAAM;YACf,KAAK,EAAE;gBACL,QAAQ,EAAE,EAAE;aACb;SACF,EACD,KAAK,EAAE;YACL,WAAW,EAAE,EAAE;YACf,OAAO,EAAE,MAAM;YACf,KAAK,EAAE;gBACL,QAAQ,EAAE,EAAE;aACb;SACF,GACF;IACD,IAAI,EAAE;QACJ,KAAK,EAAE,+BAA+B;QACtC,IAAI,EAAE,GAAG;KACV;CACF,CAAA;AAED,MAAM,QAAQ,GAAqC,CAAC,IAAI,EAAE,EAAE,CAAC,oBAAC,MAAM,IAAC,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC;IAAE,oBAAC,SAAS,oBAAK,IAAI,EAAI,CAAS,CAAA;AAEnH,MAAM,CAAC,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAC3C,UAAU,CAAC,IAAI,GAAG,EAAE,CAAA;AAEpB,MAAM,CAAC,MAAM,mBAAmB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACpD,mBAAmB,CAAC,IAAI,GAAG;IACzB,KAAK,EAAE,OAAO;CACf,CAAA;AAED,MAAM,CAAC,MAAM,oBAAoB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACrD,oBAAoB,CAAC,IAAI,GAAG;IAC1B,WAAW,EAAE;QACX,QAAQ,EAAE,UAAU;KACrB;CACF,CAAA;AAED,MAAM,CAAC,MAAM,iBAAiB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAClD,iBAAiB,CAAC,IAAI,GAAG;IACvB,KAAK,EAAE,OAAO;IACd,WAAW,EAAE;QACX,QAAQ,EAAE,UAAU;KACrB;IACD,OAAO,EAAE,IAAI;CACd,CAAA;AAED,eAAe,aAAa,CAAA"}