trepur_components 0.2.1 → 0.2.2

package/dist/components/Atoms/AlertBar/AlertBar.stories.js

@@ -0,0 +1,69 @@
+import React from 'react'
+import AlertBar from './index';
+
+export default {
+    title: 'Trepur Components/Atoms/AlertBar',
+    component: AlertBar,
+    parameters: {},
+    argTypes: {
+        text: {
+            description: 'The text the appears as an overlay on the Jumbotron',
+            control: 'text',
+            table: {
+                category: ''
+            }
+        },
+        textColor: {
+            description: '',
+            control: 'color',
+            table: {
+                category: 'Colors'
+            }
+        },
+        type: {
+            description: 'Select',
+            options: ['success', 'warning', 'error'],
+            control: { type: 'select' },
+            table: {
+                category: '',
+            },
+        },
+        leftIcon: {
+            description: '',
+            control: 'text',
+            table: {
+                category: ''
+            }
+        },
+        leftIconColor: {
+            description: '',
+            control: 'color',
+            table: {
+                category: 'Colors'
+            }
+        },
+        rightIcon: {
+            description: '',
+            control: 'text',
+            table: {
+                category: ''
+            }
+        },
+        rightIconColor: {
+            description: '',
+            control: 'color',
+            table: {
+                category: 'Colors'
+            }
+        },
+    },
+    args: {
+        text: 'this is a message',
+        type: 'success'
+    }
+}
+
+const Template = (args) => <AlertBar {...args} />
+
+export const _AlertBar = Template.bind({});
+_AlertBar.args = {};

package/dist/components/Atoms/Breadcrumbs/Breadcrumbs.stories.js

@@ -0,0 +1,41 @@
+import React from 'react'
+import Breadcrumbs from './index'
+
+export default {
+    title: 'Trepur Components/Atoms/Breadcrumbs',
+    components: Breadcrumbs,
+    argTypes: {
+        links: {
+            description: '',
+            control: 'array',
+            table: {
+                category: ''
+            }
+        },
+    },
+    args: {
+        links: [
+            {
+                link: '/', 
+                name: 'link 1'
+            },
+            {
+                link: '/', 
+                name: 'link 2'
+            },
+            {
+                link: '/', 
+                name: 'link 3'
+            },
+            {
+                link: '/', 
+                name: 'link 4'
+            }
+        ]
+    }
+}
+
+const Template = (args) => <Breadcrumbs {...args} />;
+
+export const _Breadcrumbs = Template.bind({});
+_Breadcrumbs.args = {};

package/dist/components/Atoms/BreadcrumbsItem/BreadcrumbsItem.stories.js

@@ -0,0 +1,86 @@
+import React from 'react'
+import Column from '../Column';
+import BreadcrumbsItem from './index'
+import './index.css';
+
+export default {
+    title: 'Trepur Components/Atoms/Breadcrumbs Item',
+    components: BreadcrumbsItem,
+    parameters: {},
+    argTypes: {
+        link: {
+            description: '',
+            control: 'text',
+            table: {
+                category: ''
+            }
+        },
+        name: {
+            description: '',
+            control: 'text',
+            table: {
+                category: ''
+            }
+        },
+        textColor: {
+            description: '',
+            control: 'color',
+            table: {
+                category: 'Colors'
+            }
+        },
+        bgColor: {
+            description: '',
+            control: 'color',
+            table: {
+                category: 'Colors'
+            }
+        },
+        borderColor: {
+            description: '',
+            control: 'color',
+            table: {
+                category: 'Colors'
+            }
+        },
+        hoverBgColor: {
+            description: '',
+            control: 'color',
+            table: {
+                category: 'Colors',
+                subcategory: 'Hover'
+            }
+        },
+        hoverTextColor: {
+            description: '',
+            control: 'color',
+            table: {
+                category: 'Colors',
+                subcategory: 'Hover'
+            }
+        },
+        hoverBorderColor: {
+            description: '',
+            control: 'color',
+            table: {
+                category: 'Colors',
+                subcategory: 'Hover'
+            }
+        },
+        type: {
+            description: '',
+            control: 'text',
+            table: {
+                category: '',
+            }
+        },
+    },
+    args: {
+        name: 'Link 1',
+    },
+}
+
+const Template = (args) => <Column sm={1}><BreadcrumbsItem {...args} /></Column>
+
+export const _BreadcrumbsItem = Template.bind({});
+_BreadcrumbsItem.args = {};

package/dist/components/Atoms/Button/button.stories.js

@@ -0,0 +1,68 @@
+import React from 'react'
+import Button from './index'
+import { action } from '@storybook/addon-actions'
+import './Styles.css'
+import { buttonOptions } from '../../../utils/controls'
+
+export default {
+    title: 'Trepur Components/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: {
+        ...buttonOptions
+    },
+    args: {
+    },
+};
+
+const Template = (args) => <Button {...args} />;
+
+export const HoverButton = Template.bind({});
+HoverButton.args = {
+    ctaText: 'This is a button',
+};
+
+export const SocialButtonFacebook = Template.bind({});
+SocialButtonFacebook.args = {
+    onClick: action('button-click'),
+    buttonCenterIcon: 'facebook-f',
+    hoverButtonBgColor: 'white',
+    buttonBgColor: '#3b5999',
+    buttonTextColor: 'white',
+    hoverButtonTextColor: '#3b5999',
+    hoverButtonBorderColor: '#3b5999',
+    buttonType: 'social',
+    url: '/'
+};
+
+export const SocialButtonWhatsapp = Template.bind({});
+SocialButtonWhatsapp.args = {
+    onClick: action('button-click'),
+    buttonCenterIcon: 'whatsapp',
+    hoverButtonBgColor: 'white',
+    buttonBgColor: '#25d366',
+    buttonTextColor: 'white',
+    hoverButtonTextColor: '#25d366',
+    hoverButtonBorderColor: '#25d366',
+    buttonType: 'social',
+    url: '/'
+};
+
+export const SocialButtonTwitter = Template.bind({});
+SocialButtonTwitter.args = {
+    onClick: action('button-click'),
+    buttonCenterIcon: 'twitter',
+    hoverButtonBgColor: 'white',
+    buttonBgColor: '#55acee',
+    buttonTextColor: 'white',
+    hoverButtonTextColor: '#55acee',
+    hoverButtonBorderColor: '#55acee',
+    buttonType: 'social',
+    url: '/'
+};

package/dist/components/Atoms/Collapsible/Collapsible.stories.js

@@ -0,0 +1,144 @@
+import React from 'react'
+import Collapsible from './index';
+
+export default {
+    title: 'Trepur Components/Atoms/Collapsible',
+    components: Collapsible,
+    parameters: {},
+    argTypes: {
+        title: {
+            description: '',
+            control: 'text',
+            table: {
+                category: ''
+            }
+        },
+        subtitle: {
+            description: '',
+            control: 'text',
+            table: {
+                category: ''
+            }
+        },
+        isDropdown: {
+            description: '',
+            control: 'boolean',
+            table: {
+                category: ''
+            }
+        },
+        icon: {
+            description: '',
+            control: 'text',
+            table: {
+                category: ''
+            }
+        },
+        content: {
+            description: '',
+            control: 'text',
+            table: {
+                category: ''
+            }
+        },
+        boldTitle: {
+            description: '',
+            control: 'boolean',
+            table: {
+                category: ''
+            }
+        },
+        borderTop: {
+            description: '',
+            control: 'boolean',
+            table: {
+                category: ''
+            }
+        },
+        borderBottom: {
+            description: '',
+            control: 'boolean',
+            table: {
+                category: ''
+            }
+        },
+        showBottomLine: {
+            description: '',
+            control: 'boolean',
+            table: {
+                category: ''
+            }
+        },
+        children: {
+            description: '',
+            control: 'array',
+            table: {
+                category: ''
+            }
+        },
+        contentBgColor: {
+            description: '',
+            control: 'color',
+            table: {
+                category: 'Colors'
+            }
+        },
+        contentTextColor: {
+            description: '',
+            control: 'color',
+            table: {
+                category: 'Colors'
+            }
+        },
+        bgColor: {
+            description: '',
+            control: 'color',
+            table: {
+                category: 'Colors'
+            }
+        },
+        textColor: {
+            description: '',
+            control: 'color',
+            table: {
+                category: 'Colors'
+            }
+        },
+        hoverBgColor: {
+            description: '',
+            control: 'color',
+            table: {
+                category: 'Colors',
+                subcategory: 'Hover'
+            }
+        },
+        hoverTextColor: {
+            description: '',
+            control: 'color',
+            table: {
+                category: 'Colors',
+                subcategory: 'Hover'
+            }
+        },
+        iconSize: {
+            description: 'Between 1 and 5',
+            control: 'number',
+            table: {
+                category: '',
+            }
+        },
+    },
+    args: {
+        title: 'This is a title',
+        subtitle: 'This is a subtitle',
+        isDropdown: true,
+        icon: 'th',
+        boldTitle: true,
+        children: [<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Error, unde perferendis quibusdam eos repellendus vero rerum sunt reiciendis velit autem odio, fuga molestiae perspiciatis dolor voluptatum mollitia quos ipsa! Doloribus? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reiciendis ducimus, dolorum tempore unde earum aspernatur placeat magnam, alias neque, blanditiis esse tenetur dignissimos in optio nihil libero cum cupiditate debitis?</p>]
+    },
+}
+
+const Template = (args) => <Collapsible {...args} />;
+
+export const _Collapsible = Template.bind({});
+_Collapsible.args = {};

package/dist/components/Atoms/Column/Column.stories.js

@@ -0,0 +1,24 @@
+import React from 'react'
+import Column from './index'
+import { columnOptions } from '../../../utils/controls'
+
+export default {
+    title: 'Trepur Components/Atoms/Column',
+    component: Column,
+    parameters: {},
+    argTypes: {
+        ...columnOptions
+    },
+    args: {
+        sm: 1,
+        md: 1,
+        lg: 1,
+        xl: 1,
+        className: 'border h-16'
+    }
+}
+
+const Template = (args) => <Column {...args} />;
+
+export const _Column = Template.bind({});
+_Column.args = {};

package/dist/components/Atoms/Icon/Icon.stories.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import Icon from './index'
+import { iconOptions } from '../../../utils/controls'
+
+export default {
+    title: 'Trepur Components/Atoms/Icon',
+    components: Icon,
+    parameters: {},
+    argTypes: {
+        ...iconOptions
+    },
+    args: {
+        type: 'th',
+        size: 3
+    }
+}
+
+const Template = (args) => <Icon {...args} />;
+
+export const _Icon = Template.bind({});
+_Icon.args = {};

package/dist/components/Atoms/Image/Image.stories.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import Image from './index'
+import logo from '../../../Assets/Images/logoWhite.png'
+import { imageOptions } from '../../../utils/controls' 
+
+export default {
+    title: 'Trepur Components/Atoms/Image',
+    components: Image,
+    parameters: {},
+    argTypes: {
+        ...imageOptions
+    },
+    args: {
+        image: logo
+    }
+}
+
+const Template = (args) => <Image {...args} />;
+
+export const _Image = Template.bind({});
+_Image.args = {};

package/dist/components/Atoms/InformationIcon/InformationIcon.stories.js

@@ -0,0 +1,95 @@
+import React from 'react'
+import InformationIcon from './index'
+
+export default {
+    title: 'Trepur Components/Atoms/Information Icon',
+    components: InformationIcon,
+    parameters: {},
+    argTypes: {
+        type: {
+            description: 'The name of the icon you wish to use',
+            control: 'text',
+            table: {
+                category: '',
+            }
+        },
+        text: {
+            description: '',
+            control: 'text',
+            table: {
+                category: '',
+            }
+        },
+        number: {
+            description: '',
+            control: 'number',
+            table: {
+                category: '',
+            }
+        },
+        size: {
+            description: 'An integer between 1 and 5 to dictate the magnification of the icon',
+            control: 'number',
+            table: {
+                category: '',
+            }
+        },
+        bordered: {
+            description: '',
+            control: 'boolean',
+            table: {
+                category: '',
+            }
+        },
+        rounded: {
+            description: '',
+            control: 'boolean',
+            table: {
+                category: '',
+            }
+        },
+        bgColor: {
+            description: '',
+            control: 'color',
+            table: {
+                category: 'Colors',
+            }
+        },
+        textColor: {
+            description: '',
+            control: 'color',
+            table: {
+                category: 'Colors',
+            }
+        },
+        hoverBgColor: {
+            description: '',
+            control: 'color',
+            table: {
+                category: 'Colors',
+                subcategory: 'Hover'
+            }
+        },
+        hoverTextColor: {
+            description: '',
+            control: 'color',
+            table: {
+                category: 'Colors',
+                subcategory: 'Hover'
+            }
+        },
+    },
+    args: {
+        type: 'th',
+        text: 'Text',
+        number: 21,
+        size: 3,
+        bordered: true,
+        rounded: true
+    }
+}
+
+const Template = (args) => <InformationIcon {...args} />;
+
+export const _InformationIcon = Template.bind({});
+_InformationIcon.args = {};

package/dist/components/Atoms/Input/Input.stories.js

@@ -0,0 +1,47 @@
+import React from 'react'
+import Input from './index'
+
+export default {
+    title: 'Trepur Components/Atoms/Input',
+    component: Input,
+    parameters: {},
+    argTypes: {
+        label: {
+            description: '',
+            control: 'text',
+            table: {
+                category: '',
+            }
+        },
+        placeholder: {
+            description: '',
+            control: 'text',
+            table: {
+                category: '',
+            }
+        },
+        inputType: {
+            description: '',
+            control: 'text',
+            table: {
+                category: '',
+            }
+        },
+        bold: {
+            description: '',
+            control: 'boolean',
+            table: {
+                category: '',
+            }
+        }
+    },
+    args: {
+        label: 'This is a label',
+        placeholder: 'This is a placeholder'
+    }
+}
+
+const Template = (args) => <Input {...args} />;
+
+export const _Input = Template.bind({});
+_Input.args = {};