trepur_components 0.1.0 → 0.1.4

package/src/Components/Jumbotron/{Jumbotron.js → index.js}

@@ -1,4 +1,4 @@
-import Button from "../Button/Button"
+import Button from "../Button/index"
 
 const Jumbotron = ({
     image,

package/src/Components/Nav/Nav.stories.js

@@ -0,0 +1,89 @@
+import React from 'react'
+import Readme from './README.md'
+import Nav from './index'
+import '../../index.css';
+
+const links = [
+    { name: 'link 1', reference: '/' },
+    { name: 'link 2', reference: '/'},
+    { name: 'link n-1', reference: '/'},
+    { name: 'link n', reference: '/'}
+  ]
+
+export default {
+    title: 'Components/Nav',
+    argTypes: {
+        
+    },
+    decorators: [(story) => <div className={`p-4`}>{story()}</div>],
+    parameters: {
+        readme: {
+            sidebar: Readme,
+        },
+    },
+}
+
+export const _Nav = (args) => {
+    return (
+        <Nav
+            links={links}
+            navPosition='1'
+            navClass="bg-brand-light-grey pb-4 pt-2"
+            navLinkClass='px-2 py-2 rounded-lg flex-1 hover:text-white hover:bg-black'
+            logoClass='py-4'
+        />
+    )
+}
+
+export const NavWithSearch = () => {
+    return (
+        <Nav
+            links={links}
+            navPosition='1'
+            navClass="bg-brand-light-grey pb-4 pt-2"
+            navLinkClass='px-2 py-2 rounded-lg flex-1 hover:text-white hover:bg-black'
+            logoClass='py-4'
+            showSearch
+        />
+    )
+}
+
+export const NavWithProfile = () => {
+    return (
+        <Nav
+            links={links}
+            navPosition='1'
+            navClass="bg-brand-light-grey pb-4 pt-2"
+            navLinkClass='px-2 py-2 rounded-lg flex-1 hover:text-white hover:bg-black'
+            logoClass='py-4'
+            showProfile
+        />
+    )
+}
+
+export const NavWithSearchAndProfile = () => {
+    return (
+        <Nav
+            links={links}
+            navPosition='1'
+            navClass="bg-brand-light-grey pb-4 pt-2"
+            navLinkClass='px-2 py-2 rounded-lg flex-1 hover:text-white hover:bg-black'
+            logoClass='py-4'
+            showProfile
+            showSearch
+        />
+    )
+}
+
+export const NavAligned = () => {
+    return (
+        <Nav
+            links={links}
+            navPosition='1'
+            navClass="bg-brand-light-grey pb-4 pt-2"
+            navLinkClass='px-2 py-2 rounded-lg flex-1 hover:text-white hover:bg-black'
+            logoClass='py-4'
+            alignNavAndLogo
+        />
+    )
+}

package/src/Components/{Nav.js → Nav/index.js}

@@ -1,6 +1,6 @@
 import { useState } from 'react'
-import Profile from './Profile'
-import Search from './Search'
+import Profile from '../Profile/index'
+import Search from '../Search/index'
 
 const Header = ({
     links,

package/src/Components/Profile/Profile.stories.js

@@ -0,0 +1,39 @@
+import React from 'react'
+import Readme from './README.md'
+import Profile from './index'
+import '../../index.css';
+
+const links = [
+    {
+        link: '/', 
+        name: 'link 1'
+    },
+    {
+        link: '/', 
+        name: 'link 2'
+    },
+    {
+        link: '/', 
+        name: 'Link 3'
+    },
+]
+
+export default {
+    title: 'Components/Breadcrumbs',
+    argTypes: {
+        
+    },
+    decorators: [(story) => <div className={`p-4`}>{story()}</div>],
+    parameters: {
+        readme: {
+            sidebar: Readme,
+        },
+    },
+}
+
+export const _Breadcrumbs = (args) => {
+    return (
+        <Profile>
+        </Profile>
+    )
+}

package/src/Components/Search/Search.stories.js

@@ -0,0 +1,58 @@
+import React from 'react'
+import Readme from './README.md'
+import Search from './index'
+import '../../index.css';
+import Icon from '../Icon/index'
+
+export default {
+    title: 'Components/Search',
+    argTypes: {
+    },
+    decorators: [(story) => <div className={`p-4`}>{story()}</div>],
+    parameters: {
+        readme: {
+            sidebar: Readme,
+        },
+    },
+}
+
+export const _Search = (args) => {
+    return (
+        <Search>
+        </Search>
+    )
+}
+
+export const SearchWithPlaceholder = (args) => {
+    return (
+        <Search
+            placeholder='Enter some search item'>
+        </Search>
+    )
+}
+
+export const SearchWithLabel = (args) => {
+    return (
+        <Search
+            text='Label'>
+        </Search>
+    )
+}
+
+export const SearchWithIcon = (args) => {
+    return (
+        <Search
+            leftIcon = 'search'>
+        </Search>
+    )
+}
+
+export const SearchWithAll = (args) => {
+    return (
+        <Search
+            text='Label'
+            leftIcon = 'search'
+            placeholder='Enter some search item'>
+        </Search>
+    )
+}

package/src/Components/{Search.js → Search/index.js}

@@ -1,4 +1,4 @@
-import Icon from './Icon/Icon'
+import Icon from '../Icon/index'
 const Search = ({
     className,
     onChange,
@@ -14,9 +14,9 @@ const Search = ({
             {/* <input className="ml-4 border-2 border-gray-300 bg-white h-10 px-5 pr-16 rounded-lg text-sm focus:outline-none" type="search" name="search" onChange={(e) => onChange(e.target.value)} placeholder={placeholder}/> */}
             <label className="relative block">
                 <span className="sr-only">Search</span>
-                <span className="absolute inset-y-0 left-5 flex items-center pl-2">
-                    {leftIcon && iconLeft}
-                </span>
+                {leftIcon && <span className="absolute inset-y-0 left-5 flex items-center pl-2">
+                    {iconLeft}
+                </span>}
                 <input className="ml-4 pr-32 border-2 border-gray-300 h-10 px-5 placeholder:italic placeholder:text-gray-400 rounded-md py-2 pl-9 focus:outline-none focus:border-sky-500 focus:ring-sky-500 focus:ring-1" onChange={(e) => onChange(e.target.value)} placeholder={placeholder} type="text" name="search"/>
             </label>
         </div>

package/src/Components/SignedInLinks/SignedInLinks.stories.js

@@ -0,0 +1,39 @@
+import React from 'react'
+import Readme from './README.md'
+import SignedInLinks from './index'
+import '../../index.css';
+
+const links = [
+    {
+        link: '/', 
+        name: 'link 1'
+    },
+    {
+        link: '/', 
+        name: 'link 2'
+    },
+    {
+        link: '/', 
+        name: 'Link 3'
+    },
+]
+
+export default {
+    title: 'Components/SignedInLinks',
+    argTypes: {
+        
+    },
+    decorators: [(story) => <div className={`p-4`}>{story()}</div>],
+    parameters: {
+        readme: {
+            sidebar: Readme,
+        },
+    },
+}
+
+export const _SignedInLinks = (args) => {
+    return (
+        <SignedInLinks links={links}>
+        </SignedInLinks>
+    )
+}

package/src/Components/SignedOutLinks/SignedOutLinks.stories.js

@@ -0,0 +1,39 @@
+import React from 'react'
+import Readme from './README.md'
+import SignedOutLinks from './index'
+import '../../index.css';
+
+const links = [
+    {
+        link: '/', 
+        name: 'link 1'
+    },
+    {
+        link: '/', 
+        name: 'link 2'
+    },
+    {
+        link: '/', 
+        name: 'Link 3'
+    },
+]
+
+export default {
+    title: 'Components/SignedOutLinks',
+    argTypes: {
+        
+    },
+    decorators: [(story) => <div className={`p-4`}>{story()}</div>],
+    parameters: {
+        readme: {
+            sidebar: Readme,
+        },
+    },
+}
+
+export const _SignedOutLinks = (args) => {
+    return (
+        <SignedOutLinks links={links}>
+        </SignedOutLinks>
+    )
+}

package/src/Components/SignedOutLinks/index.js

@@ -0,0 +1,13 @@
+const SignedInLinks = ({links}) => {
+    return (
+        <div className='container flex'>
+            <ul className='list-none mx-auto flex flex-1'>
+                {links && links.map((link) => {
+                    return <li className='flex px-4'><a className='flex-1' href={link.url}>{link.name}</a></li>
+                })}
+            </ul>
+        </div>
+    )
+}
+
+export default SignedInLinks

package/src/index.css

@@ -1,67 +1,4 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css');
-
-.right-arrow {
-    @apply w-0;
-    @apply h-0;
-    border-top: 17px solid transparent;
-    border-bottom: 17px solid transparent;
-    border-left: 15px solid theme('colors.brand-border');
-    @apply absolute;
-    right: -15px;
-    @apply top-0;
-}
-
-.let-arrow {
-    @apply w-0;
-    @apply h-0;
-    border-top: 17px solid transparent;
-    border-bottom: 17px solid transparent;
-    border-left: 17px solid theme('colors.white');
-    @apply absolute;
-    left: 0px;
-    @apply top-0;
-}
-
-.test-arrow {
-    @apply w-0;
-    @apply h-0;
-    border-top: 17px solid transparent;
-    border-bottom: 17px solid transparent;
-    border-left: 15px solid theme('colors.brand-border');
-    @apply absolute;
-    left: -8px;
-    bottom: -11px;
-    transform: rotate(48deg);
-}
-
-.test-arrow-top {
-    @apply w-0;
-    @apply h-0;
-    border-top: 15px solid theme('colors.brand-border');
-    border-bottom: 17px solid transparent;
-    border-left: 17px solid transparent;
-    @apply absolute;
-    left: -17px;
-    top: 0px;
-}
-
-.voucherCode__btn {
-    @apply relative;
-}
-
-.voucherCode__btn:hover .right-arrow {
-    border-left-color: theme('colors.brand-primary');
-}
-.voucherCode__btn:hover .test-arrow {
-    border-left-color: theme('colors.brand-primary');
-}
-.voucherCode__btn:hover .test-arrow-top {
-    border-top-color: theme('colors.brand-primary');
-}
-
-.voucherCode__code:focus {
-    @apply border-0;
-}
+@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css');

package/dist/App.css

@@ -1,42 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-react-calendar__tile--now {
-  background: #31A3DD !important;
-}

package/dist/App.js

@@ -1,24 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-require("./App.css");
-
-function App() {
-  return /*#__PURE__*/React.createElement("div", {
-    className: "App"
-  }, /*#__PURE__*/React.createElement("header", {
-    className: "App-header"
-  }, /*#__PURE__*/React.createElement("p", null, "Edit ", /*#__PURE__*/React.createElement("code", null, "src/App.js"), " and save to reload."), /*#__PURE__*/React.createElement("a", {
-    className: "App-link",
-    href: "https://reactjs.org",
-    target: "_blank",
-    rel: "noopener noreferrer"
-  }, "Learn React")));
-}
-
-var _default = App;
-exports.default = _default;

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

@@ -1,164 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports._Breadcrumbs = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _addonActions = require("@storybook/addon-actions");
-
-var _README = _interopRequireDefault(require("./README.md"));
-
-var _Breadcrumbs2 = _interopRequireDefault(require("./Breadcrumbs"));
-
-require("../../index.css");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const links = [{
-  link: '/',
-  name: 'link 1'
-}, {
-  link: '/',
-  name: 'link 2'
-}, {
-  link: '/',
-  name: 'Link 3'
-}];
-var _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 => /*#__PURE__*/_react.default.createElement("div", {
-    className: "p-4"
-  }, story())],
-  parameters: {
-    readme: {
-      sidebar: _README.default
-    }
-  }
-};
-exports.default = _default;
-
-const _Breadcrumbs = args => {
-  return /*#__PURE__*/_react.default.createElement(_Breadcrumbs2.default, {
-    links: links
-  });
-}; // 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',
-// }
-
-
-exports._Breadcrumbs = _Breadcrumbs;