trepur_components 0.1.0

package/src/Components/BreadcrumbsBordered/Breadcrumbs.stories.js

@@ -0,0 +1,159 @@
+import React from 'react'
+import { action } from '@storybook/addon-actions'
+import Readme from './README.md'
+import Breadcrumbs from './Breadcrumbs'
+import '../../index.css';
+
+const links = [
+    {
+        link: '/', 
+        name: 'link 1'
+    },
+    {
+        link: '/', 
+        name: 'link 2'
+    },
+    {
+        link: '/', 
+        name: 'Link 3'
+    },
+]
+
+export default {
+    title: 'Components/BreadcrumbsBordered',
+    argTypes: {
+        label: {
+            name: 'Text',
+            control: { type: 'text' },
+            defaultValue: 'Shop Now',
+        },
+        type: {
+            name: 'Type',
+            defaultValue: 'primary',
+            options: ['primary', 'secondary', 'ghost'],
+            control: { type: 'select' },
+        },
+        iconPlacement: {
+            name: 'Icon',
+            defaultValue: 'none',
+            options: ['left', 'right', 'both', 'none'],
+            control: { type: 'select' },
+        },
+        padded: {
+            name: 'Padded',
+            control: { type: 'boolean' },
+            defaultValue: false,
+        },
+        social: {
+            name: 'Social',
+            defaultValue: 'None',
+            options: ['Facebook', 'Twitter', 'Whatsapp', 'None'],
+            control: { type: 'select' },
+        },
+    },
+    decorators: [(story) => <div className={`p-4`}>{story()}</div>],
+
+    parameters: {
+        readme: {
+            sidebar: Readme,
+        },
+    },
+}
+
+export const _Breadcrumbs = (args) => {
+    return (
+        <Breadcrumbs links={links}>
+        </Breadcrumbs>
+    )
+}
+
+// export const SecondaryButton = () => {
+//     return (
+//         <Button ctaText='I am a button'>
+//         </Button>
+//     )
+// }
+
+// export const WithIconRight = () => {
+//     return (
+//         <Button rightIcon='thumbs-up' ctaText='I am a button'>
+//         </Button>
+//     )
+// }
+
+// WithIconRight.story = {
+//     name: 'With Icon (right)',
+// }
+
+// export const WithIconLeft = () => {
+//     return (
+//         <Button leftIcon='sign-in' ctaText='I am a button'>
+//         </Button>
+//     )
+// }
+
+// WithIconLeft.story = {
+//     name: 'With Icon (left)',
+// }
+
+// export const WithBothIcons = () => {
+//     return (
+//         <Button leftIcon='star' rightIcon='star' ctaText='I am a button'>
+//         </Button>
+//     )
+// }
+
+// export const ButtonAsExternalLink = () => {
+//     return (
+//         <Button as='a-external'  ctaText='I am a button'>
+//         </Button>
+//     )
+// }
+
+// ButtonAsExternalLink.story = {
+//     name: 'Button as external link',
+// }
+
+// export const ButtonAsSemanticHtmlButton = () => {
+//     return (
+//         <Button as='button' htmlType='button' ctaText='I am a button' url='/'>
+//         </Button>
+//     )
+// }
+
+// ButtonAsSemanticHtmlButton.story = {
+//     name: 'Button as semantic html button',
+// }
+
+// export const ButtonAsSemanticHtmlSubmitButton = () => {
+//     return (
+//         <Button as='button' htmlType='submit' ctaText='I am a button'>
+//         </Button>
+//     )
+// }
+
+// ButtonAsSemanticHtmlSubmitButton.story = {
+//     name: 'Button as semantic html submit button',
+// }
+
+// export const ButtonAsInternalLink = () => {
+//     return (
+//         <Button as='Link' ctaText='I am a button' url='/'>
+//         </Button>
+//     )
+// }
+
+// ButtonAsInternalLink.story = {
+//     name: 'Button as internal link',
+// }
+
+// export const WithOnClickMethod = () => {
+//     return (
+//         <Button ctaText='I am a button' onClick={action('button-click')}>
+//         </Button>
+//     )
+// }
+
+// WithOnClickMethod.story = {
+//     name: 'With onClick method',
+// }

package/src/Components/BreadcrumbsBordered/README.md

@@ -0,0 +1 @@
+hello this is an icon

package/src/Components/Button/Button.js

@@ -0,0 +1,26 @@
+import Icon from '../Icon/Icon'
+
+const Button = ({
+    ctaText,
+    ctaLink,
+    className,
+    onClick,
+    leftIcon,
+    rightIcon,
+}) => {
+    let classes = className + ' py-2 px-8 rounded-lg text-black border-2 border-black border-gray-300 bg-white hover:bg-red hover:text-black transition-background-color duration-500 transform'
+    let iconLeft = <Icon type={leftIcon}></Icon>
+    let iconRight = <Icon type={rightIcon}></Icon>
+    return (
+        <button 
+            className={classes} 
+            onClick={onClick}
+        >
+            {leftIcon && iconLeft}
+            {ctaText}
+            {rightIcon && iconRight}
+        </button>
+    )
+}
+
+export default Button

package/src/Components/Button/Button.stories.js

@@ -0,0 +1,144 @@
+import React from 'react'
+import { action } from '@storybook/addon-actions'
+import Readme from './README.md'
+import Button from './Button'
+import '../../index.css';
+
+export default {
+    title: 'Components/Button',
+    argTypes: {
+        label: {
+            name: 'Text',
+            control: { type: 'text' },
+            defaultValue: 'Shop Now',
+        },
+        type: {
+            name: 'Type',
+            defaultValue: 'primary',
+            options: ['primary', 'secondary', 'ghost'],
+            control: { type: 'select' },
+        },
+        iconPlacement: {
+            name: 'Icon',
+            defaultValue: 'none',
+            options: ['left', 'right', 'both', 'none'],
+            control: { type: 'select' },
+        },
+        padded: {
+            name: 'Padded',
+            control: { type: 'boolean' },
+            defaultValue: false,
+        },
+        social: {
+            name: 'Social',
+            defaultValue: 'None',
+            options: ['Facebook', 'Twitter', 'Whatsapp', 'None'],
+            control: { type: 'select' },
+        },
+    },
+    decorators: [(story) => <div className={`p-4`}>{story()}</div>],
+
+    parameters: {
+        readme: {
+            sidebar: Readme,
+        },
+    },
+}
+
+export const _Button = (args) => {
+    return (
+        <Button ctaText='I am a button'>
+        </Button>
+    )
+}
+
+export const SecondaryButton = () => {
+    return (
+        <Button ctaText='I am a button'>
+        </Button>
+    )
+}
+
+export const WithIconRight = () => {
+    return (
+        <Button rightIcon='thumbs-up' ctaText='I am a button'>
+        </Button>
+    )
+}
+
+WithIconRight.story = {
+    name: 'With Icon (right)',
+}
+
+export const WithIconLeft = () => {
+    return (
+        <Button leftIcon='sign-in' ctaText='I am a button'>
+        </Button>
+    )
+}
+
+WithIconLeft.story = {
+    name: 'With Icon (left)',
+}
+
+export const WithBothIcons = () => {
+    return (
+        <Button leftIcon='star' rightIcon='star' ctaText='I am a button'>
+        </Button>
+    )
+}
+
+export const ButtonAsExternalLink = () => {
+    return (
+        <Button as='a-external'  ctaText='I am a button'>
+        </Button>
+    )
+}
+
+ButtonAsExternalLink.story = {
+    name: 'Button as external link',
+}
+
+export const ButtonAsSemanticHtmlButton = () => {
+    return (
+        <Button as='button' htmlType='button' ctaText='I am a button' url='/'>
+        </Button>
+    )
+}
+
+ButtonAsSemanticHtmlButton.story = {
+    name: 'Button as semantic html button',
+}
+
+export const ButtonAsSemanticHtmlSubmitButton = () => {
+    return (
+        <Button as='button' htmlType='submit' ctaText='I am a button'>
+        </Button>
+    )
+}
+
+ButtonAsSemanticHtmlSubmitButton.story = {
+    name: 'Button as semantic html submit button',
+}
+
+export const ButtonAsInternalLink = () => {
+    return (
+        <Button as='Link' ctaText='I am a button' url='/'>
+        </Button>
+    )
+}
+
+ButtonAsInternalLink.story = {
+    name: 'Button as internal link',
+}
+
+export const WithOnClickMethod = () => {
+    return (
+        <Button ctaText='I am a button' onClick={action('button-click')}>
+        </Button>
+    )
+}
+
+WithOnClickMethod.story = {
+    name: 'With onClick method',
+}

package/src/Components/Button/README.md

@@ -0,0 +1 @@
+hello this is an icon

package/src/Components/ButtonSlide/ButtonSlide.js

@@ -0,0 +1,26 @@
+import Icon from '../Icon/Icon'
+import './Styles.css';
+const ButtonSlide = ({
+    ctaText,
+    ctaLink,
+    className,
+    onClick,
+    leftIcon,
+    rightIcon,
+}) => {
+    let classes = className + ' btn py-2 px-8 text-white border-2 bg-black hover:bg-white hover:text-black'
+    let iconLeft = <Icon type={leftIcon}></Icon>
+    let iconRight = <Icon type={rightIcon}></Icon>
+    return (
+        <button 
+            className={classes} 
+            onClick={onClick}
+        >
+            {leftIcon && iconLeft}
+            {ctaText}
+            {rightIcon && iconRight}
+        </button>
+    )
+}
+
+export default ButtonSlide

package/src/Components/ButtonSlide/ButtonSlide.stories.js

@@ -0,0 +1,144 @@
+import React from 'react'
+import { action } from '@storybook/addon-actions'
+import Readme from './README.md'
+import ButtonSlide from './ButtonSlide'
+import '../../index.css';
+
+export default {
+    title: 'Components/ButtonSlide',
+    argTypes: {
+        label: {
+            name: 'Text',
+            control: { type: 'text' },
+            defaultValue: 'Shop Now',
+        },
+        type: {
+            name: 'Type',
+            defaultValue: 'primary',
+            options: ['primary', 'secondary', 'ghost'],
+            control: { type: 'select' },
+        },
+        iconPlacement: {
+            name: 'Icon',
+            defaultValue: 'none',
+            options: ['left', 'right', 'both', 'none'],
+            control: { type: 'select' },
+        },
+        padded: {
+            name: 'Padded',
+            control: { type: 'boolean' },
+            defaultValue: false,
+        },
+        social: {
+            name: 'Social',
+            defaultValue: 'None',
+            options: ['Facebook', 'Twitter', 'Whatsapp', 'None'],
+            control: { type: 'select' },
+        },
+    },
+    decorators: [(story) => <div className={`p-4`}>{story()}</div>],
+
+    parameters: {
+        readme: {
+            sidebar: Readme,
+        },
+    },
+}
+
+export const _Button = (args) => {
+    return (
+        <ButtonSlide ctaText='READ MORE'>
+        </ButtonSlide>
+    )
+}
+
+export const SecondaryButton = () => {
+    return (
+        <ButtonSlide ctaText='I am a button'>
+        </ButtonSlide>
+    )
+}
+
+export const WithIconRight = () => {
+    return (
+        <ButtonSlide rightIcon='thumbs-up' ctaText='I am a button'>
+        </ButtonSlide>
+    )
+}
+
+WithIconRight.story = {
+    name: 'With Icon (right)',
+}
+
+export const WithIconLeft = () => {
+    return (
+        <ButtonSlide leftIcon='sign-in' ctaText='I am a button'>
+        </ButtonSlide>
+    )
+}
+
+WithIconLeft.story = {
+    name: 'With Icon (left)',
+}
+
+export const WithBothIcons = () => {
+    return (
+        <ButtonSlide leftIcon='star' rightIcon='star' ctaText='I am a button'>
+        </ButtonSlide>
+    )
+}
+
+export const ButtonAsExternalLink = () => {
+    return (
+        <ButtonSlide as='a-external'  ctaText='I am a button'>
+        </ButtonSlide>
+    )
+}
+
+ButtonAsExternalLink.story = {
+    name: 'Button as external link',
+}
+
+export const ButtonAsSemanticHtmlButton = () => {
+    return (
+        <ButtonSlide as='button' htmlType='button' ctaText='I am a button' url='/'>
+        </ButtonSlide>
+    )
+}
+
+ButtonAsSemanticHtmlButton.story = {
+    name: 'Button as semantic html button',
+}
+
+export const ButtonAsSemanticHtmlSubmitButton = () => {
+    return (
+        <ButtonSlide as='button' htmlType='submit' ctaText='I am a button'>
+        </ButtonSlide>
+    )
+}
+
+ButtonAsSemanticHtmlSubmitButton.story = {
+    name: 'Button as semantic html submit button',
+}
+
+export const ButtonAsInternalLink = () => {
+    return (
+        <ButtonSlide as='Link' ctaText='I am a button' url='/'>
+        </ButtonSlide>
+    )
+}
+
+ButtonAsInternalLink.story = {
+    name: 'Button as internal link',
+}
+
+export const WithOnClickMethod = () => {
+    return (
+        <ButtonSlide ctaText='I am a button' onClick={action('button-click')}>
+        </ButtonSlide>
+    )
+}
+
+WithOnClickMethod.story = {
+    name: 'With onClick method',
+}

package/src/Components/ButtonSlide/README.md

@@ -0,0 +1 @@
+hello this is an icon

package/src/Components/ButtonSlide/Styles.css

@@ -0,0 +1,25 @@
+.btn {
+    border: 1px solid black;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+    -webkit-transition: all 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
+    transition: all 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
+    cursor: pointer;
+}
+.btn:after {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 0;
+    background: #FFF;
+    border: 1px white;
+    content: '';
+    z-index: -1;
+    -webkit-transition: all 1s cubic-bezier(0.785, 0.135, 0.15, 0.86);
+    transition: all 1s cubic-bezier(0.785, 0.135, 0.15, 0.86);
+    will-change: width;
+}
+.btn:hover:after {
+    width: 100%;
+}

package/src/Components/Card/Card.js

@@ -0,0 +1,67 @@
+import Button from "../Button/Button"
+import ButtonSlide from "../ButtonSlide/ButtonSlide"
+
+const Card = ({
+    id,
+    title,
+    image,
+    subTitle,
+    description,
+    extraText,
+    hasCta,
+    ctaText,
+    imageBelowTitle,
+    titleClass,
+    imageClass,
+    subTitleClass,
+    extraTextClass,
+    descriptionClass,
+    classNames,
+    altText,
+    btnType,
+    rounded,
+}) => {
+    let imageWrapperClass
+    let titleWrapperClass = 'p-3'
+    let contentWrapperClass = 'px-3'
+    let btnClass = 'w-full p-3'
+    let classList = 'flex flex-col border border-grey border-opacity-100 bg-white w-auto max-w-md '
+
+    classList += classNames ? classNames : ''
+    imageWrapperClass = imageBelowTitle ? imageWrapperClass + ' order-2' : imageWrapperClass
+    titleWrapperClass = imageBelowTitle ? titleWrapperClass + ' order-1' : titleWrapperClass
+    contentWrapperClass = imageBelowTitle ? contentWrapperClass + ' order-3' : contentWrapperClass
+    btnClass = imageBelowTitle ? btnClass + ' order-4' : btnClass
+    imageWrapperClass = rounded ? imageWrapperClass + ' rounded-t-lg' : imageWrapperClass
+    classList = rounded ? classList + ' rounded-lg' : classList
+    imageClass += imageBelowTitle ? '' : rounded ? ' rounded-t-lg' : ''
+
+    return (
+        <div id={id} className={classList}>
+            {image &&
+                <div className={imageWrapperClass && imageWrapperClass}>
+                    <img className={imageClass} src={image} alt={altText}/>
+                </div> 
+            }
+            <div className={titleWrapperClass}>
+                <h1 className={titleClass}>{title}</h1>
+            </div>
+            <div className={contentWrapperClass}>
+                <h2 className={subTitleClass && subTitleClass}>{subTitle}</h2>
+                <h2 className={extraTextClass && extraTextClass}>{extraText}</h2>
+                <h6 className={descriptionClass && descriptionClass}>{description}</h6>
+            </div>
+            {hasCta &&
+                <div className={btnClass}>
+                    {btnType !== 'slide' ? 
+                        <Button className='w-full' ctaText={ctaText} ></Button>
+                    :
+                        <ButtonSlide className='w-full' ctaText={ctaText}></ButtonSlide>
+                    }
+                </div>
+            }
+        </div>
+    )
+}
+
+export default Card