trepur_components 0.1.1 → 0.1.5

package/dist/Components/SignedInLinks/SignedInLinks.stories.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports._SignedInLinks = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _README = _interopRequireDefault(require("./README.md"));
+
+var _index = _interopRequireDefault(require("./index"));
+
+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/SignedInLinks',
+  argTypes: {},
+  decorators: [story => /*#__PURE__*/_react.default.createElement("div", {
+    className: "p-4"
+  }, story())],
+  parameters: {
+    readme: {
+      sidebar: _README.default
+    }
+  }
+};
+exports.default = _default;
+
+const _SignedInLinks = args => {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
+    links: links
+  });
+};
+
+exports._SignedInLinks = _SignedInLinks;

package/dist/Components/SignedOutLinks/SignedOutLinks.stories.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports._SignedOutLinks = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _README = _interopRequireDefault(require("./README.md"));
+
+var _index = _interopRequireDefault(require("./index"));
+
+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/SignedOutLinks',
+  argTypes: {},
+  decorators: [story => /*#__PURE__*/_react.default.createElement("div", {
+    className: "p-4"
+  }, story())],
+  parameters: {
+    readme: {
+      sidebar: _README.default
+    }
+  }
+};
+exports.default = _default;
+
+const _SignedOutLinks = args => {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
+    links: links
+  });
+};
+
+exports._SignedOutLinks = _SignedOutLinks;

package/dist/Components/{SignedOutLinks.js → SignedOutLinks/index.js}

@@ -10,12 +10,17 @@ const SignedInLinks = _ref => {
     links
   } = _ref;
   return /*#__PURE__*/React.createElement("div", {
-    className: "container mx-auto px-4 flex"
+    className: "container flex"
+  }, /*#__PURE__*/React.createElement("ul", {
+    className: "list-none mx-auto flex flex-1"
   }, links && links.map(link => {
     return /*#__PURE__*/React.createElement("li", {
-      className: "flex-1"
-    }, link);
-  }));
+      className: "flex px-4"
+    }, /*#__PURE__*/React.createElement("a", {
+      className: "flex-1",
+      href: link.url
+    }, link.name));
+  })));
 };
 
 var _default = SignedInLinks;

package/dist/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/package.json

@@ -2,7 +2,7 @@
   "name": "trepur_components",
   "description": "component lib",
   "author": "trepur_ttenneb",
-  "version": "0.1.1",
+  "version": "0.1.5",
   "private": false,
   "dependencies": {
     "@babel/polyfill": "^7.12.1",
@@ -19,7 +19,6 @@
     "web-vitals": "^1.1.2"
   },
   "scripts": {
-    "start": "craco start",
     "build": "rm -rf dist && NODE_ENV=production babel src --out-dir dist --copy-files",
     "test": "craco test",
     "eject": "react-scripts eject",
@@ -58,6 +57,7 @@
     "@babel/cli": "^7.16.8",
     "@babel/core": "^7.16.7",
     "@babel/preset-env": "^7.16.8",
+    "@babel/preset-react": "^7.16.7",
     "@storybook/addon-actions": "^6.3.12",
     "@storybook/addon-essentials": "^6.3.12",
     "@storybook/addon-links": "^6.3.12",

package/src/Components/Breadcrumbs/README.md

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

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

@@ -1,7 +1,7 @@
 import React from 'react'
 import Readme from './README.md'
 import Breadcrumbs from './index'
-import '../../index.css';
+import './index.css';
 
 const links = [
     {
@@ -65,94 +65,3 @@ export const _Breadcrumbs = (args) => {
         </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

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

package/src/Components/BreadcrumbsBordered/index.css

@@ -0,0 +1,67 @@
+@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;
+}

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

@@ -1,7 +1,7 @@
 import React from 'react'
 import { action } from '@storybook/addon-actions'
 import Readme from './README.md'
-import Button from './Button'
+import Button from './index'
 import '../../index.css';
 
 export default {

package/src/Components/Button/README.md

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

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

@@ -1,4 +1,4 @@
-import Icon from '../Icon/Icon'
+import Icon from '../Icon/index'
 
 const Button = ({
     ctaText,

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

@@ -1,7 +1,7 @@
 import React from 'react'
 import { action } from '@storybook/addon-actions'
 import Readme from './README.md'
-import ButtonSlide from './ButtonSlide'
+import ButtonSlide from './index'
 import '../../index.css';
 
 export default {

package/src/Components/ButtonSlide/README.md

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

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

@@ -1,4 +1,4 @@
-import Icon from '../Icon/Icon'
+import Icon from '../Icon/index'
 import './Styles.css';
 const ButtonSlide = ({
     ctaText,

package/src/Components/Card/Card.stories.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import Readme from './README.md'
-import Card from './Card'
+import Card from './index'
 import '../../index.css';
 
 export default {

package/src/Components/Card/README.md

@@ -1 +0,0 @@
-hello this is a card

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

@@ -1,5 +1,5 @@
-import Button from "../Button/Button"
-import ButtonSlide from "../ButtonSlide/ButtonSlide"
+import Button from "../Button/index"
+import ButtonSlide from "../ButtonSlide/index"
 
 const Card = ({
     id,

package/src/Components/CardImageLink/CardImageLink.stories.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import Readme from './README.md'
-import CardImageLink from './CardImageLink'
+import CardImageLink from './index'
 import '../../index.css';
 
 export default {

package/src/Components/CardImageLinkList/CardImageLinkList.stories.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import Readme from './README.md'
-import CardImageLinkList from './CardImageLinkList'
+import CardImageLinkList from './index'
 import '../../index.css';
 
 const list = [

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

@@ -1,4 +1,4 @@
-import CardImageLink from "../CardImageLink/CardImageLink"
+import CardImageLink from "../CardImageLink/index"
 
 const CardImageLinkList = ({
     list

package/src/Components/CardList/CardList.stories.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import Readme from './README.md'
-import CardList from './CardList'
-import Card from '../Card/Card'
+import CardList from './index'
+import Card from '../Card/index'
 import '../../index.css';
 
 const list = [
@@ -36,166 +36,4 @@ export const _Cardlist = () => {
     return (
         <CardList list={list}></CardList>
     )
-}
-
-// export const CardTitleLeft = () => {
-//     return (
-//         <Card 
-//             id='card' 
-//             title='This is a title'
-//             titleClass='font-bold'
-//             subTitle='This is a subtitle' 
-//             description='This is a description, it can be really long if you want it to be. The text will wrap onto a new line if it exceeds the width of the card'
-//         ></Card>
-//     )
-// }
-
-// export const CardTitleRight = () => {
-//     return (
-//         <Card 
-//             id='card' 
-//             title='This is a title'
-//             titleClass='font-bold text-right'
-//             subTitle='This is a subtitle' 
-//             description='This is a description, it can be really long if you want it to be. The text will wrap onto a new line if it exceeds the width of the card'
-//         ></Card>
-//     )
-// }
-
-// export const CardWithImage = () => {
-//     return (
-//         <Card 
-//             id='card' 
-//             title='This is a title'
-//             titleClass='text-center font-bold'
-//             subTitle='This is a subtitle' 
-//             description='This is a description, it can be really long if you want it to be. The text will wrap onto a new line if it exceeds the width of the card'
-//             image='https://picsum.photos/500/300'>
-//         </Card>
-//     )
-// }
-
-// export const CardWithExtraText = () => {
-//     return (
-//         <Card 
-//             id='card' 
-//             title='This is a title'
-//             titleClass='text-center font-bold'
-//             subTitle='This is a subtitle' 
-//             extraText='This is some extra text'
-//             description='This is a description, it can be really long if you want it to be. The text will wrap onto a new line if it exceeds the width of the card'
-//             image='https://picsum.photos/500/300'>
-//         </Card>
-//     )
-// }
-
-// export const CardWithButton = () => {
-//     return (
-//         <Card 
-//             id='card' 
-//             title='This is a title'
-//             titleClass='text-center font-bold'
-//             subTitle='This is a subtitle' 
-//             extraText='This is some extra text'
-//             description='This is a description, it can be really long if you want it to be. The text will wrap onto a new line if it exceeds the width of the card'
-//             image='https://picsum.photos/500/300'
-//             hasCta
-//             ctaText='This is a button'
-//             >
-//         </Card>
-//     )
-// }
-
-// export const CardWithSlideButton = () => {
-//     return (
-//         <Card 
-//             id='card' 
-//             title='This is a title'
-//             titleClass='text-center font-bold'
-//             subTitle='This is a subtitle' 
-//             extraText='This is some extra text'
-//             description='This is a description, it can be really long if you want it to be. The text will wrap onto a new line if it exceeds the width of the card'
-//             image='https://picsum.photos/500/300'
-//             hasCta
-//             btnType='slide'
-//             ctaText='This is a button'>
-//         </Card>
-//     )
-// }
-
-// export const CardWithImageBelowTitle = () => {
-//     return (
-//         <Card 
-//             id='card' 
-//             title='This is a title'
-//             titleClass='text-center font-bold'
-//             subTitle='This is a subtitle' 
-//             extraText='This is some extra text'
-//             description='This is a description, it can be really long if you want it to be. The text will wrap onto a new line if it exceeds the width of the card'
-//             image='https://picsum.photos/500/300'
-//             hasCta
-//             ctaText='This is a button'
-//             imageBelowTitle>
-//         </Card>
-//     )
-// }
-
-// export const CardRounded = () => {
-//     return (
-//         <Card 
-//             id='card' 
-//             title='This is a title'
-//             titleClass='text-center font-bold'
-//             subTitle='This is a subtitle' 
-//             extraText='This is some extra text'
-//             description='This is a description, it can be really long if you want it to be. The text will wrap onto a new line if it exceeds the width of the card'
-//             image='https://picsum.photos/500/300'
-//             hasCta
-//             ctaText='This is a button'
-//             rounded>
-//         </Card>
-//     )
-// }
-
-// export const CardRoundedWithImageBelowTitle = () => {
-//     return (
-//         <Card 
-//             id='card' 
-//             title='This is a title'
-//             titleClass='text-center font-bold'
-//             subTitle='This is a subtitle' 
-//             extraText='This is some extra text'
-//             description='This is a description, it can be really long if you want it to be. The text will wrap onto a new line if it exceeds the width of the card'
-//             image='https://picsum.photos/500/300'
-//             hasCta
-//             ctaText='This is a button'
-//             imageBelowTitle
-//             rounded>
-//         </Card>
-//     )
-// }
-
-// export const lotsOfCards = () => {
-//     let cards = []
-//     for (let i = 0; i < 8 ; i++) {
-//         cards.push(<Card 
-//             id='card' 
-//             title='This is a title'
-//             titleClass='text-center font-bold'
-//             subTitle='This is a subtitle' 
-//             extraText='This is some extra text'
-//             description='This is a description, it can be really long if you want it to be. The text will wrap onto a new line if it exceeds the width of the card'
-//             image='https://picsum.photos/500/300'
-//             hasCta
-//             ctaText='This is a button'
-//             imageBelowTitle
-//             rounded>
-//         </Card>)
-//     }
-//     return (
-//         <div className="grid grid-cols-4 grid-flow-row">
-//             {cards}
-//         </div>
-//     )
-// }
-
+}

package/src/Components/CardList/README.md

@@ -1 +0,0 @@
-hello this is a card

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

@@ -1,4 +1,4 @@
-import Card from "../Card/Card"
+import Card from "../Card/index"
 
 const CardList = ({
     list