trepur_components 0.4.8 → 1.0.1

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

@@ -0,0 +1,104 @@
+import React, { useState } from 'react';
+import Input from '../Input';
+import Button from '../Button';
+import classNames from 'classnames';
+import TextArea from '../TextArea';
+const TextAndTitle = ({ id, className, titleClasses, editTitleClasses, editTextClasses, editInputClasses, textClasses, textLineOne, textLineTwo, textLineThree, title, titleBold, textCenter, titleCenter, withLiveUpdates = false, onSave, saveButtonProps, cancelButtonProps, isHorizontal = true, children }) => {
+    const getLineHeight = (id) => {
+        const element = document.getElementById(id);
+        const divHeight = (element === null || element === void 0 ? void 0 : element.offsetHeight) !== undefined ? element.offsetHeight : 0;
+        const lineHeight = (element != null) ? parseFloat(getComputedStyle(element).fontSize) : 1;
+        const pt = (element != null) ? parseFloat(getComputedStyle(element).paddingTop) : 0;
+        const pb = (element != null) ? parseFloat(getComputedStyle(element).paddingBottom) : 0;
+        const mt = (element != null) ? parseFloat(getComputedStyle(element).marginTop) : 0;
+        const mb = (element != null) ? parseFloat(getComputedStyle(element).marginBottom) : 0;
+        const bw = (element != null) ? parseFloat(getComputedStyle(element).borderWidth) : 0;
+        const height = divHeight - mt - mb - pt - pb - (bw * 2);
+        if (isHorizontal) {
+            return Math.floor(height / lineHeight) - 1;
+        }
+        return Math.floor(height / lineHeight);
+    };
+    const defaultComponentData = {
+        title,
+        textLineOne,
+        textLineTwo,
+        textLineThree
+    };
+    const [isInEditingMode, setIsInEditingMode] = useState(false);
+    const [componentData, setComponentData] = useState(defaultComponentData);
+    const borderClasses = 'border border-transparent';
+    const classList = classNames(className, 'bg-primary text-white');
+    const titleClassList = classNames({
+        'font-bold': titleBold,
+        'text-center': titleCenter,
+        [borderClasses]: withLiveUpdates && !isInEditingMode
+    }, titleClasses, 'text-md break-words');
+    const textClassList = classNames({
+        'text-center': textCenter,
+        [borderClasses]: withLiveUpdates && !isInEditingMode
+    }, textClasses, 'pt-2 mt-2');
+    const toggleEditState = () => {
+        withLiveUpdates &&
+            setIsInEditingMode(!isInEditingMode);
+    };
+    const handleButtonSave = () => {
+        const arr = [];
+        arr.push({ key: 'title', value: componentData.title });
+        arr.push({ key: 'textLineOne', value: componentData.textLineOne });
+        arr.push({ key: 'textLineTwo', value: componentData.textLineTwo });
+        arr.push({ key: 'textLineThree', value: componentData.textLineThree });
+        toggleEditState();
+        onSave === null || onSave === void 0 ? void 0 : onSave(arr, id);
+    };
+    const handleButtonCancel = () => {
+        return toggleEditState();
+    };
+    const handleChange = (e) => {
+        let id = e.target.id;
+        id = id.split('-')[id.split('-').length - 1];
+        setComponentData(Object.assign(Object.assign({}, componentData), { [id]: e.target.value }));
+    };
+    const wrapperClassList = classNames({
+        'flex flex-wrap justify-center md:items-center': isHorizontal,
+        'hover:border-black hover:border-dashed': withLiveUpdates && !isInEditingMode
+    }, 'border-2 border-transparent');
+    const titleWrapperClassList = classNames({
+        'md:w-1/2 md:text-center md:px-8': isHorizontal
+    });
+    const textWrapperClassList = classNames({
+        'md:w-1/2 md:text-center md:py-8 md:px-8': isHorizontal
+    });
+    const inputClassList = classNames(editInputClasses, textClassList);
+    const node = document.getElementById('textLineOne');
+    return (React.createElement("div", { id: id, className: classList }, withLiveUpdates && isInEditingMode
+        ? (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: wrapperClassList },
+                React.createElement("div", { className: titleWrapperClassList }, (componentData === null || componentData === void 0 ? void 0 : componentData.title) !== undefined
+                    ? (React.createElement(Input, { className: editTitleClasses, inputClasses: inputClassList, autoFocus: true, value: componentData === null || componentData === void 0 ? void 0 : componentData.title, onChange: (e) => handleChange(e), type: 'text', theme: 'dark' }))
+                    : (React.createElement("div", null, children))),
+                React.createElement("div", { className: textWrapperClassList },
+                    React.createElement(TextArea, { className: editTextClasses, textAreaClasses: classNames({
+                            'text-center': isHorizontal
+                        }, editInputClasses), rows: getLineHeight('textLineOne') + 1, onChange: (e) => handleChange(e), theme: 'dark' }, node === null || node === void 0 ? void 0 : node.innerHTML),
+                    React.createElement(TextArea, { className: editTextClasses, textAreaClasses: classNames({
+                            'text-center': isHorizontal
+                        }, editInputClasses), rows: getLineHeight('textLineTwo'), onChange: (e) => handleChange(e), theme: 'dark' }, componentData.textLineTwo),
+                    React.createElement(TextArea, { className: editTextClasses, textAreaClasses: classNames({
+                            'text-center': isHorizontal
+                        }, editInputClasses), rows: getLineHeight('textLineThree'), onChange: (e) => handleChange(e), theme: 'dark' }, componentData.textLineThree))),
+            React.createElement(Button, { className: saveButtonProps === null || saveButtonProps === void 0 ? void 0 : saveButtonProps.className, onClick: handleButtonSave }, saveButtonProps === null || saveButtonProps === void 0 ? void 0 : saveButtonProps.children),
+            React.createElement(Button, { className: cancelButtonProps === null || cancelButtonProps === void 0 ? void 0 : cancelButtonProps.className, onClick: handleButtonCancel }, cancelButtonProps === null || cancelButtonProps === void 0 ? void 0 : cancelButtonProps.children)))
+        : (React.createElement("div", { className: wrapperClassList, onClick: toggleEditState },
+            React.createElement("div", { className: titleWrapperClassList }, (componentData === null || componentData === void 0 ? void 0 : componentData.title) !== undefined
+                ? (React.createElement("h1", { className: titleClassList }, componentData.title))
+                : (children)),
+            React.createElement("div", { className: textWrapperClassList },
+                (componentData === null || componentData === void 0 ? void 0 : componentData.title) !== undefined
+                    ? (React.createElement("h1", { id: 'title', className: titleClassList }, componentData.title))
+                    : (React.createElement("div", { id: 'textLineOne', className: textClassList }, componentData.textLineOne)),
+                React.createElement("div", { id: 'textLineTwo', className: textClassList }, componentData.textLineTwo),
+                React.createElement("div", { id: 'textLineThree', className: textClassList }, componentData.textLineThree))))));
+};
+export default TextAndTitle;
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import TextArea from './index';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const componentMeta: ComponentMeta<typeof TextArea>;
+export declare const _TextArea: ComponentStory<({ id, className, labelClasses, textAreaClasses, label, placeholder, bold, name, disabled, rows, cols, autoFocus, formId, maxLength, readOnly, required, onBlur, onFocus, onChange, withPadding, children, theme }: import("./index").Props) => JSX.Element>;
+export default componentMeta;

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

@@ -0,0 +1,63 @@
+import React from 'react';
+import TextArea from './index';
+const componentMeta = {
+    title: 'Trepur Components/Rupert Bennett/Atoms/Text Area',
+    component: TextArea,
+    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' }
+            }
+        },
+        label: {
+            description: '',
+            control: 'text',
+            table: {
+                category: ''
+            }
+        },
+        placeholder: {
+            description: '',
+            control: 'text',
+            table: {
+                category: ''
+            }
+        },
+        bold: {
+            description: '',
+            control: 'boolean',
+            table: {
+                category: ''
+            }
+        },
+        theme: {
+            type: { name: 'string', required: false },
+            options: ['dark', 'light'],
+            description: 'The variant of button to render',
+            table: { type: { summary: 'dark' }, defaultValue: { summary: 'dark' } },
+            defaultValue: 'dark',
+            control: { type: 'radio' }
+        }
+    },
+    args: {
+        label: 'This is a label',
+        placeholder: 'This is a text area placeholder',
+        withPadding: true
+    }
+};
+const Template = (args) => React.createElement(TextArea, Object.assign({}, args));
+export const _TextArea = Template.bind({});
+export default componentMeta;
+//# sourceMappingURL=TextArea.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.stories.js","sourceRoot":"","sources":["../../../../../src/lib/components/TextArea/TextArea.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,QAAQ,MAAM,SAAS,CAAA;AAG9B,MAAM,aAAa,GAAmC;IACpD,KAAK,EAAE,kDAAkD;IACzD,SAAS,EAAE,QAAQ;IACnB,UAAU,EAAE,EAAE;IACd,QAAQ,EAAE;QACR,EAAE,EAAE;YACF,WAAW,EAAE,iCAAiC;YAC9C,KAAK,EAAE;gBACL,QAAQ,EAAE,EAAE;gBACZ,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;gBAC3B,YAAY,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE;aACvC;SACF;QACD,SAAS,EAAE;YACT,WAAW,EAAE,mDAAmD;YAChE,KAAK,EAAE;gBACL,QAAQ,EAAE,EAAE;gBACZ,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;gBAC3B,YAAY,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE;aACvC;SACF;QACD,KAAK,EAAE;YACL,WAAW,EAAE,EAAE;YACf,OAAO,EAAE,MAAM;YACf,KAAK,EAAE;gBACL,QAAQ,EAAE,EAAE;aACb;SACF;QACD,WAAW,EAAE;YACX,WAAW,EAAE,EAAE;YACf,OAAO,EAAE,MAAM;YACf,KAAK,EAAE;gBACL,QAAQ,EAAE,EAAE;aACb;SACF;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,EAAE;YACf,OAAO,EAAE,SAAS;YAClB,KAAK,EAAE;gBACL,QAAQ,EAAE,EAAE;aACb;SACF;QACD,KAAK,EAAE;YACL,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE;YACzC,OAAO,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC;YAC1B,WAAW,EAAE,iCAAiC;YAC9C,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,YAAY,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE;YACvE,YAAY,EAAE,MAAM;YACpB,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SAC3B;KACF;IACD,IAAI,EAAE;QACJ,KAAK,EAAE,iBAAiB;QACxB,WAAW,EAAE,iCAAiC;QAC9C,WAAW,EAAE,IAAI;KAClB;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/TextArea/index.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+export interface Props {
+    id?: string;
+    className?: string;
+    labelClasses?: string;
+    textAreaClasses?: string;
+    label?: string;
+    placeholder?: string;
+    bold?: boolean;
+    name?: string;
+    disabled?: boolean;
+    rows?: number;
+    cols?: number;
+    autoFocus?: boolean;
+    formId?: string;
+    maxLength?: number;
+    readOnly?: boolean;
+    required?: boolean;
+    onBlur?: () => void;
+    onFocus?: () => void;
+    onChange?: (e: any) => void;
+    withPadding?: boolean;
+    children?: any;
+    theme?: 'dark' | 'light';
+}
+declare const TextArea: ({ id, className, labelClasses, textAreaClasses, label, placeholder, bold, name, disabled, rows, cols, autoFocus, formId, maxLength, readOnly, required, onBlur, onFocus, onChange, withPadding, children, theme }: Props) => JSX.Element;
+export default TextArea;

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import classNames from 'classnames';
+const TextArea = ({ id, className, labelClasses, textAreaClasses, label, placeholder, bold, name, disabled, rows, cols, autoFocus, formId, maxLength, readOnly, required, onBlur, onFocus, onChange, withPadding, children, theme = 'light' }) => {
+    const colours = theme === 'dark' ? 'placeholder-white bg-primary text-white' : 'placeholder-primary bg-white text-primary';
+    const classList = classNames(className, colours, 'flex flex-col');
+    const newId = id !== undefined ? `-${id}` : '-';
+    const labelClassList = classNames({
+        'font-bold': bold
+    }, labelClasses, 'w-auto pb-2');
+    const textAreaClassList = classNames({
+        'p-2': withPadding
+    }, textAreaClasses, colours, 'border rounded-md mb-2');
+    return (React.createElement("div", { id: id, className: classList },
+        label !== undefined &&
+            React.createElement("label", { className: labelClassList, htmlFor: `text-area${newId}` }, label),
+        React.createElement("textarea", { className: textAreaClassList, autoFocus: autoFocus, form: formId, maxLength: maxLength, readOnly: readOnly, required: required, disabled: disabled, rows: rows, cols: cols, name: name, placeholder: placeholder, onChange: onChange, onFocus: onFocus, onBlur: onBlur, defaultValue: children })));
+};
+export default TextArea;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/lib/components/TextArea/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,UAAU,MAAM,YAAY,CAAA;AA2BnC,MAAM,QAAQ,GAAG,CAAC,EAChB,EAAE,EACF,SAAS,EACT,YAAY,EACZ,eAAe,EACf,KAAK,EACL,WAAW,EACX,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,SAAS,EACT,MAAM,EACN,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,OAAO,EACP,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,KAAK,GAAG,OAAO,EACT,EAAe,EAAE;IACvB,MAAM,OAAO,GAAG,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,yCAAyC,CAAC,CAAC,CAAC,2CAA2C,CAAA;IAC1H,MAAM,SAAS,GAAG,UAAU,CAAC,SAAS,EAAE,OAAO,EAAE,eAAe,CAAC,CAAA;IACjE,MAAM,KAAK,GAAG,EAAE,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG,CAAA;IAC/C,MAAM,cAAc,GAAG,UAAU,CAAC;QAChC,WAAW,EAAE,IAAI;KAClB,EAAE,YAAY,EAAE,aAAa,CAAC,CAAA;IAE/B,MAAM,iBAAiB,GAAG,UAAU,CAAC;QACnC,KAAK,EAAE,WAAW;KACnB,EAAE,eAAe,EAAE,OAAO,EAAE,wBAAwB,CAAC,CAAA;IAEtD,OAAO,CACL,6BACE,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,SAAS;QAEnB,KAAK,KAAK,SAAS;YAClB,+BACE,SAAS,EAAE,cAAc,EACzB,OAAO,EAAE,YAAY,KAAK,EAAE,IAE3B,KAAK,CACA;QACV,kCACE,SAAS,EAAE,iBAAiB,EAC5B,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,MAAM,EACZ,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,QAAQ,GACtB,CACE,CACP,CAAA;AACH,CAAC,CAAA;AAED,eAAe,QAAQ,CAAA"}

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import Timeline from './index';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const componentMeta: ComponentMeta<typeof Timeline>;
+export declare const _Timeline: ComponentStory<({ id, className, isHorizontal, items, reverse, textCenter, useImages, horizontalComponentClasses, isSm }: import("./index").Props) => JSX.Element>;
+export default componentMeta;

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

@@ -0,0 +1,87 @@
+import React from 'react';
+import Timeline from './index';
+import CardWithTopImage from '../CardWithTopImage';
+import logo from '@assets/images/primary-logo.png';
+const timelineItems = () => {
+    return new Array(8).fill(null).map(() => {
+        return ({
+            component: React.createElement(CardWithTopImage, { imageProps: {
+                    image: logo,
+                    roundedFull: true,
+                    width: 4,
+                    height: 4
+                }, className: 'px-4' },
+                React.createElement("p", null, "This is some text"),
+                React.createElement("p", null, "This is some more text"),
+                React.createElement("p", null, "This is a bit more text"),
+                React.createElement("p", null, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem odit ad sed, quam recusandae voluptatem provident eveniet beatae omnis vero minus unde facilis. Quia commodi quas odit iusto ut enim!")),
+            centerImageProps: {
+                image: logo,
+                imageClasses: 'mx-auto',
+                width: 4,
+                height: 4,
+                centerAligned: true,
+                roundedFull: true
+            }
+        });
+    });
+};
+const componentMeta = {
+    title: 'Trepur Components/Rupert Bennett/Organisms/Timeline',
+    component: Timeline,
+    parameters: {},
+    argTypes: {
+        id: {
+            description: 'Defines the id of the component',
+            control: { type: 'text', default: false },
+            table: {
+                category: 'Id',
+                type: { summary: 'string' },
+                defaultValue: { summary: 'undefined' }
+            }
+        },
+        className: {
+            description: 'Defines any additional classes for the components',
+            control: { type: 'text', default: false },
+            table: {
+                category: 'Classes',
+                type: { summary: 'string' },
+                defaultValue: { summary: 'undefined' }
+            }
+        },
+        isHorizontal: {
+            description: '',
+            control: 'boolean',
+            table: {
+                category: ''
+            }
+        },
+        useImages: {
+            description: '',
+            control: 'boolean',
+            table: {
+                category: ''
+            }
+        },
+        items: {
+            description: '',
+            control: 'array',
+            table: {
+                category: ''
+            }
+        }
+    },
+    args: {
+        isHorizontal: true,
+        reverse: false,
+        items: timelineItems(),
+        textCenter: true,
+        useImages: true,
+        horizontalComponentClasses: 'w-96 h-96',
+        isSm: true
+    }
+};
+const Template = (args) => React.createElement(Timeline, Object.assign({}, args));
+export const _Timeline = Template.bind({});
+export default componentMeta;
+//# sourceMappingURL=Timeline.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Timeline.stories.js","sourceRoot":"","sources":["../../../../../src/lib/components/Timeline/Timeline.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,QAAQ,MAAM,SAAS,CAAA;AAC9B,OAAO,gBAAgB,MAAM,8BAA8B,CAAA;AAE3D,OAAO,IAAI,MAAM,iCAAiC,CAAA;AAGlD,MAAM,aAAa,GAAG,GAAoE,EAAE;IAC1F,OAAO,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,GAAG,EAAE;QACtC,OAAO,CACL;YACE,SAAS,EACf,oBAAC,gBAAgB,IACf,UAAU,EAAE;oBACV,KAAK,EAAE,IAAI;oBACX,WAAW,EAAE,IAAI;oBACjB,KAAK,EAAE,CAAC;oBACR,MAAM,EAAE,CAAC;iBACV,EACD,SAAS,EAAC,MAAM;gBAEhB,mDAAwB;gBACxB,wDAA6B;gBAC7B,yDAA8B;gBAC9B,wOAA6M,CAC5L;YACb,gBAAgB,EAAE;gBAChB,KAAK,EAAE,IAAI;gBACX,YAAY,EAAE,SAAS;gBACvB,KAAK,EAAE,CAAC;gBACR,MAAM,EAAE,CAAC;gBACT,aAAa,EAAE,IAAI;gBACnB,WAAW,EAAE,IAAI;aAClB;SACF,CACF,CAAA;IACH,CAAC,CAAC,CAAA;AACJ,CAAC,CAAA;AAED,MAAM,aAAa,GAAmC;IACpD,KAAK,EAAE,qDAAqD;IAC5D,SAAS,EAAE,QAAQ;IACnB,UAAU,EAAE,EAAE;IACd,QAAQ,EAAE;QACR,EAAE,EAAE;YACF,WAAW,EAAE,iCAAiC;YAC9C,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE;YACzC,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI;gBACd,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;gBAC3B,YAAY,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE;aACvC;SACF;QACD,SAAS,EAAE;YACT,WAAW,EAAE,mDAAmD;YAChE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE;YACzC,KAAK,EAAE;gBACL,QAAQ,EAAE,SAAS;gBACnB,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;gBAC3B,YAAY,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE;aACvC;SACF;QACD,YAAY,EAAE;YACZ,WAAW,EAAE,EAAE;YACf,OAAO,EAAE,SAAS;YAClB,KAAK,EAAE;gBACL,QAAQ,EAAE,EAAE;aACb;SACF;QACD,SAAS,EAAE;YACT,WAAW,EAAE,EAAE;YACf,OAAO,EAAE,SAAS;YAClB,KAAK,EAAE;gBACL,QAAQ,EAAE,EAAE;aACb;SACF;QACD,KAAK,EAAE;YACL,WAAW,EAAE,EAAE;YACf,OAAO,EAAE,OAAO;YAChB,KAAK,EAAE;gBACL,QAAQ,EAAE,EAAE;aACb;SACF;KACF;IACD,IAAI,EAAE;QACJ,YAAY,EAAE,IAAI;QAClB,OAAO,EAAE,KAAK;QACd,KAAK,EAAE,aAAa,EAAE;QACtB,UAAU,EAAE,IAAI;QAChB,SAAS,EAAE,IAAI;QACf,0BAA0B,EAAE,WAAW;QACvC,IAAI,EAAE,IAAI;KACX;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/Timeline/index.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+export interface Props {
+    id?: string;
+    className?: string;
+    isHorizontal?: boolean;
+    items?: object[];
+    reverse?: boolean;
+    textCenter?: boolean;
+    useImages?: boolean;
+    horizontalComponentClasses?: string;
+    isSm?: boolean;
+}
+declare const Timeline: ({ id, className, isHorizontal, items, reverse, textCenter, useImages, horizontalComponentClasses, isSm }: Props) => JSX.Element;
+export default Timeline;

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

@@ -0,0 +1,208 @@
+import React from 'react';
+import classNames from 'classnames';
+import Image from '../Image';
+import Column from '../Column';
+import Row from '../Row';
+const Timeline = ({ id, className, isHorizontal = false, items, reverse = false, textCenter, useImages = true, horizontalComponentClasses, isSm = false }) => {
+    const classList = classNames(className, 'w-full list-none overflow-x-auto pb-4');
+    const ulClasses = classNames({
+        'flex-row none-reverse justify-between': !reverse && isHorizontal,
+        'flex-col none-reverse': !reverse && !isHorizontal,
+        'flex-row reverse justify-between': reverse && isHorizontal,
+        'flex-col reverse': reverse && !isHorizontal
+    }, className, 'timeline status-flow relative list-none pl-0 flex');
+    const liClasses = classNames({
+        'text-center': textCenter,
+        'items-center flex-col justify-between': !reverse && isHorizontal,
+        'flex-row none-reverse': !reverse && !isHorizontal,
+        'items-center flex-col-reverse': reverse && isHorizontal,
+        'flex-row-reverse': reverse && !isHorizontal
+    }, 'status-flow-item relative flex flex-auto flex-row leading-tight');
+    const circle = classNames({
+        'horizontal collapse': isHorizontal && isSm,
+        horizontal: isHorizontal && !isSm,
+        vertical: !isHorizontal
+    }, 'w-4 h-4 my-16 text-center mx-auto rounded-full border bg-black');
+    const circleVerticalBefore = {
+        position: 'absolute',
+        display: 'block',
+        borderLeft: '1px solid',
+        borderColor: 'text-primary',
+        content: '""',
+        height: '50%',
+        top: '0%',
+        left: '49.9%',
+        zIndex: '-1'
+    };
+    const circleVerticalCollapseBefore = {
+        position: 'absolute',
+        display: 'block',
+        borderLeft: '1px solid',
+        borderColor: 'text-primary',
+        content: '""',
+        height: '50%',
+        top: '0%',
+        left: '8.2%',
+        zIndex: '-1'
+    };
+    const lastCircleVerticalBefore = {
+        position: 'absolute',
+        display: 'block',
+        borderLeft: '1px solid',
+        borderColor: 'text-primary',
+        content: '""',
+        height: '50%',
+        top: '0%',
+        left: '49.9%',
+        zIndex: '-1'
+    };
+    const lastCircleVerticalCollapseBefore = {
+        position: 'absolute',
+        display: 'block',
+        borderLeft: '1px solid',
+        borderColor: 'text-primary',
+        content: '""',
+        height: '50%',
+        top: '0%',
+        left: '8.2%',
+        zIndex: '-1'
+    };
+    const circleVerticalAfter = {
+        position: 'absolute',
+        display: 'block',
+        borderLeft: '1px solid',
+        borderColor: 'text-primary',
+        content: '""',
+        height: '50%',
+        bottom: '0%',
+        left: '49.9%',
+        zIndex: '-1'
+    };
+    const firstCircleVerticalAfter = {
+        position: 'absolute',
+        display: 'block',
+        borderLeft: '1px solid',
+        borderColor: 'text-primary',
+        content: '""',
+        height: '50%',
+        bottom: '0%',
+        left: '49.9%',
+        zIndex: '-1'
+    };
+    const circleVerticalCollapseAfter = {
+        position: 'absolute',
+        display: 'block',
+        borderLeft: '1px solid',
+        borderColor: 'text-primary',
+        content: '""',
+        height: '50%',
+        bottom: '0%',
+        left: '8.2%',
+        zIndex: '-1'
+    };
+    const firstCircleVerticalCollapseAfter = {
+        position: 'absolute',
+        display: 'block',
+        borderLeft: '1px solid',
+        borderColor: 'text-primary',
+        content: '""',
+        height: '50%',
+        bottom: '0%',
+        left: '8.2%',
+        zIndex: '-1'
+    };
+    return (React.createElement(Column, { sm: 12, md: 12, lg: 12, xl: 12, id: id, className: classList },
+        React.createElement("div", { className: ulClasses }, items === null || items === void 0 ? void 0 : items.map((item, i) => {
+            let before;
+            if (i % 2 === 0) {
+                before = true;
+            }
+            else {
+                before = false;
+            }
+            let circlePos;
+            if (items.length - 1 > 0) {
+                if (i === 0)
+                    circlePos = 'first-circle';
+                else if (i === items.length - 1)
+                    circlePos = 'last-circle';
+                else
+                    circlePos = 'circle';
+            }
+            let verticalCircleStylesBefore;
+            if (circlePos === 'circle' && isSm) {
+                verticalCircleStylesBefore = circleVerticalCollapseBefore;
+            }
+            else if (circlePos === 'circle' && !isSm) {
+                verticalCircleStylesBefore = circleVerticalBefore;
+            }
+            else if (circlePos === 'last-circle' && isSm) {
+                verticalCircleStylesBefore = lastCircleVerticalCollapseBefore;
+            }
+            else if (circlePos === 'last-circle' && !isSm) {
+                verticalCircleStylesBefore = lastCircleVerticalBefore;
+            }
+            let verticalCircleStylesAfter;
+            if (circlePos === 'circle' && isSm) {
+                verticalCircleStylesAfter = circleVerticalCollapseAfter;
+            }
+            else if (circlePos === 'circle' && !isSm) {
+                verticalCircleStylesAfter = circleVerticalAfter;
+            }
+            else if (circlePos === 'first-circle' && isSm) {
+                verticalCircleStylesAfter = firstCircleVerticalCollapseAfter;
+            }
+            else if (circlePos === 'first-circle' && !isSm) {
+                verticalCircleStylesAfter = firstCircleVerticalAfter;
+            }
+            let horizontalCircleStylesBefore;
+            // if (circlePos === 'circle' && isSm){
+            //     horizontalCircleStylesBefore = circleHorizontalCollapseBefore
+            // } else if (circlePos === 'circle' && !isSm){
+            //     horizontalCircleStylesBefore = circleHorizontalBefore
+            // } else if (circlePos === 'first-circle' && isSm){
+            //     horizontalCircleStylesBefore = firstCircleHorizontalCollapseBefore
+            // } else if (circlePos === 'first-circle' && !isSm){
+            //     horizontalCircleStylesBefore = firstCircleHorizontalBefore
+            // }
+            let horizontalCircleStylesAfter;
+            // if (circlePos === 'circle' && isSm){
+            //     horizontalCircleStylesAfter = circleHorizontalCollapseAfter
+            // } else if (circlePos === 'circle' && !isSm){
+            //     horizontalCircleStylesAfter = circleHorizontalAfter
+            // } else if (circlePos === 'first-circle' && isSm){
+            //     horizontalCircleStylesAfter = firstCircleHorizontalCollapseAfter
+            // } else if (circlePos === 'first-circle' && !isSm){
+            //     horizontalCircleStylesAfter = firstCircleHorizontalAfter
+            // }
+            const horizonalComponentClassList = classNames(horizontalComponentClasses, 'pt-12');
+            if (isHorizontal) {
+                return (React.createElement(Column, { key: `horizontal_col_${i + 0}`, id: 'timeline-item', className: `${liClasses} py-4 mb-8` },
+                    React.createElement(Row, { className: horizontalComponentClasses }, before && item.component),
+                    React.createElement(Row, null, useImages
+                        ? (React.createElement("div", { id: circlePos, className: isHorizontal ? 'horizontal py-0 my-0' : 'vertical' },
+                            React.createElement("span", { style: horizontalCircleStylesBefore }),
+                            React.createElement(Image, Object.assign({}, item.centerImageProps)),
+                            React.createElement("span", { style: horizontalCircleStylesAfter })))
+                        : (React.createElement("p", { id: circlePos, className: circle }))),
+                    React.createElement(Row, { className: horizonalComponentClassList }, !before && item.component)));
+            }
+            else {
+                return (React.createElement(Row, { key: `vertical_row_${i + 0}`, id: 'timeline-item', className: `${liClasses} py-4` },
+                    !isSm &&
+                        React.createElement(Column, { sm: 5, md: 5, lg: 5, xl: 5, className: 'text-center my-auto' }, before && item.component),
+                    React.createElement(Column, { sm: 2, md: 2, lg: 2, xl: 2, id: 'circle-wrapper', className: 'my-auto' }, useImages
+                        ? (React.createElement("div", { id: circlePos, className: isSm ? 'vertical' : 'vertical' },
+                            React.createElement("span", { style: verticalCircleStylesBefore }),
+                            React.createElement(Image, Object.assign({}, item.centerImageProps)),
+                            React.createElement("span", { style: verticalCircleStylesAfter })))
+                        : (React.createElement("p", { id: circlePos, className: circle }))),
+                    isSm &&
+                        React.createElement(Column, { sm: 10, md: 10, lg: 10, xl: 10, className: 'text-center my-auto' }, item.component),
+                    !isSm &&
+                        React.createElement(Column, { sm: 5, md: 5, lg: 5, xl: 5, className: 'text-center my-auto' }, !before && item.component)));
+            }
+        }))));
+};
+export default Timeline;
+//# sourceMappingURL=index.js.map

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

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

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

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