trepur_components 0.1.0

package/src/Components/Jumbotron/Jumbotron.js

@@ -0,0 +1,31 @@
+import Button from "../Button/Button"
+
+const Jumbotron = ({
+    image,
+    altText,
+    text,
+    ctaText,
+    ctaText2,
+    ctaLink,
+    ctaLink2,
+}) => {
+    return (
+        <div className='w-screen text-center'>
+            <img src={image} alt={altText}/>
+            <div className='absolute top-10 lg:top-20 w-full'>
+                <h1 className='text-white text-4xl'>{text}</h1>
+                <div className='pt-2 lg:pt-8 text-white'>
+                    {ctaText &&
+                        <Button className='mx-2' ctaText={ctaText}></Button>
+                    }
+                    {ctaText2 &&
+                        <Button className='mx-2' ctaText={ctaText2}></Button>
+                    }
+                </div>
+            </div>
+        </div>
+    )
+
+}
+
+export default Jumbotron

package/src/Components/Jumbotron/Jumbotron.stories.js

@@ -0,0 +1,66 @@
+import React from 'react'
+import Readme from './README.md'
+import Jumbotron from './Jumbotron'
+import '../../index.css';
+
+export default {
+    title: 'Components/Jumbotron',
+    decorators: [(story) => <div className={`p-4`}>{story()}</div>],
+    parameters: {
+        readme: {
+            sidebar: Readme,
+        },
+    },
+}
+
+export const _Jumbotron = (args) => {
+    return (
+        <Jumbotron 
+            altText='image'
+            image='https://picsum.photos/1500/400'
+        ></Jumbotron>
+    )
+}
+
+export const JumbotronWithOneBtn = (args) => {
+    return (
+        <Jumbotron 
+            altText='image'
+            image='https://picsum.photos/1500/400'
+            ctaText='This is a button'
+        ></Jumbotron>
+    )
+}
+
+export const JumbotronWithTwoBtns = (args) => {
+    return (
+        <Jumbotron 
+            altText='image'
+            image='https://picsum.photos/1500/400'
+            ctaText='This is a button'
+            ctaText2='This is another button'
+        ></Jumbotron>
+    )
+}
+
+export const JumbotronWithCenterText = (args) => {
+    return (
+        <Jumbotron 
+            altText='image'
+            image='https://picsum.photos/1500/400'
+            text='Some text here'
+        ></Jumbotron>
+    )
+}
+
+export const JumbotronWithTextAndBtns = (args) => {
+    return (
+        <Jumbotron 
+            altText='image'
+            image='https://picsum.photos/1500/400'
+            text='Some text here'
+            ctaText='This is a button'
+            ctaText2='This is another button'
+        ></Jumbotron>
+    )
+}

package/src/Components/Nav.js

@@ -0,0 +1,109 @@
+import { useState } from 'react'
+import Profile from './Profile'
+import Search from './Search'
+
+const Header = ({
+    links,
+    navPosition,
+    alignNavAndLogo,
+    navClass,
+    navLinkClass,
+    logoClass,
+    showSearch,
+    showProfile,
+}) => {
+    const [mobileMenuState, setmobileMenuState] = useState(false)
+    const profileLinks = [
+        { name: 'PROFILE ITEM 1', reference: '/' }, 
+        { name: 'PROFILE ITEM 2', reference: '/' }, 
+        { name: 'PROFILE ITEM 3', reference: '/' }, 
+        { name: 'PROFILE ITEM 4', reference: '/' }, 
+    ]
+
+    let combinedLogoClass = logoClass + ' hidden sm:inline-flex flex-1 flex items-center justify-center sm:items-stretch '
+    let combinedMobileLogoClass = logoClass + ' sm:hidden block flex-1 flex items-center justify-center sm:items-stretch '
+    let linkContainerClass = 'flex-1 flex items-center justify-center sm:items-stretch '
+
+    if (alignNavAndLogo) {
+        combinedLogoClass = ' hidden sm:inline-flex pl-4 pt-8 absolute inset-y-0 h-8 left-0 flex items-center'
+    } else {
+        combinedLogoClass += ' flex-1'
+    }
+    if (navPosition === '0') {linkContainerClass += 'sm:justify-start'}
+    if (navPosition === '1') {linkContainerClass += 'sm:justify-center'}
+    if (navPosition === '2') {linkContainerClass += 'sm:justify-end'}
+
+    return (
+        <nav id='nav' className={navClass}>
+            <div className="px-4">
+                <div id='sm-nav' className="relative flex items-center justify-between h-16 sm:hidden">
+                    {/* Nav collapse icon */}
+                    <div id='nav-collapse-btn-wrapper' className="absolute inset-y-0 left-0 flex items-center">
+                        <button onClick={() => setmobileMenuState(!mobileMenuState)} type="button" className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-black hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
+                            <svg className="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+                                <path d="M4 6h16M4 12h16M4 18h16" />
+                            </svg>
+                            <svg className="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+                                <path  d="M6 18L18 6M6 6l12 12" />
+                            </svg>
+                        </button>
+                    </div>
+                    {/* Logo */}
+                    <div id='logo' className={combinedMobileLogoClass}>
+                        <img className="h-8 w-auto" src="logo.png" alt=" Logo "/>
+                    </div>
+                </div>
+                <div clas Name='hidden sm:block pt-2 items-center justify-between sm:items-stretch text-center'>
+                    {/* Logo */}
+                    <div id='logo' className={combinedLogoClass}>
+                        <img className="h-8 w-auto" src="logo.png" alt=" Logo "/>
+                    </div>
+                    {/* Nav items desktop */}
+                    <div id='nav-container' className={linkContainerClass}>
+                        <div id='nav-block' className="hidden sm:inline-flex sm:ml-6">
+                            <ul id='nav-list' className='list-none mx-auto flex flex-1'>
+                                {links && links.map((link) => {
+                                    return  <li key={link.name} className='flex px-4' onClick={link.onClick}>
+                                        <a className={navLinkClass} href={link.reference}>{link.name}</a>
+                                    </li>
+                                }) }
+                            </ul>
+                        </div>
+                    </div>
+                    {/* Search */}
+                    {showSearch && 
+                        <Search className='hidden sm:inline-flex pl-4 pt-8 absolute inset-y-0 h-8 right-16 flex items-center'></Search>
+                    }
+                    {/* Profile Button */}
+                    {showProfile && 
+                        <Profile
+                            profileLinks={profileLinks}
+                        ></Profile>
+                    }
+                </div>
+            </div>
+            {/* Mobile Links */}
+            {mobileMenuState &&
+                <div className="sm:hidden" id="mobile-menu">
+                    {showProfile && <img className="ml-3 h-8 w-8 rounded-full" src="user.jpeg" alt=""/>}
+                        
+                    {/* Search */}
+                    {showSearch && 
+                        <Search className='flex flex-1 ml-4'></Search>
+                    }
+                    <div className="px-2 pt-2 pb-3 space-y-1">
+                        {links && links.map((link) => {
+                            return <a key={link.name} href={link.reference} className="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium" aria-current="page">{link.name}</a>
+                        })}
+                        {showProfile && 
+                            profileLinks && profileLinks.map((link) => {
+                            return <a key={link.name} href={link.reference} className="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium" role="menuitem" tabindex="-1" id="user-menu-item-0">{link.name}</a>
+                        })}
+                    </div>
+                </div>
+            }
+        </nav>
+    )
+}
+
+export default Header

package/src/Components/Profile.js

@@ -0,0 +1,25 @@
+import {useState} from 'react'
+
+const Profile = ({
+    profileLinks,
+}) => {
+    const [profileState, setProfileState] = useState(false)
+    return (
+        <>
+            <div className="hidden sm:inline-flex pt-8 absolute inset-y-0 h-8 right-4 flex items-center">
+                <button onClick={() => setProfileState(!profileState)} type="button" className="bg-gray-800 flex rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" >
+                    <img className="h-10 w-10 rounded-full" src="user.jpeg" alt=""/>
+                </button>
+            </div>
+            {profileState &&
+                <div className="w-48 right-4 absolute rounded-md shadow-lg bg-white" >
+                    {profileLinks && profileLinks.map((link,i) => {
+                        return <a href={link.reference} className="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id={"user-menu-item-" + i}>{link.name}</a>
+                    })}
+                </div>
+            }
+        </>
+    )
+}
+
+export default Profile

package/src/Components/Search.js

@@ -0,0 +1,26 @@
+import Icon from './Icon/Icon'
+const Search = ({
+    className,
+    onChange,
+    placeholder,
+    text,
+    leftIcon,
+}) => {
+    let classes = className + ' flex'
+    let iconLeft = <Icon type={leftIcon}></Icon>
+    return (
+        <div id='search' className={classes}>
+            {text && (<h2>{text}</h2>)}
+            {/* <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>
+                <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>
+    )
+}
+
+export default Search

package/src/Components/SignedInLinks.js

@@ -0,0 +1,14 @@
+const LinksList = ({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 LinksList

package/src/Components/SignedOutLinks.js

@@ -0,0 +1,11 @@
+const SignedInLinks = ({links}) => {
+    return (
+        <div className='container mx-auto px-4 flex'>
+        {links && links.map((link) => {
+            return <li className='flex-1'>{link}</li>
+        })}
+        </div>
+    )
+}
+
+export default SignedInLinks

package/src/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/index.js

@@ -0,0 +1,4 @@
+import './index.css';
+import * as components from './Components'
+
+module.exports = { ...components }

package/tailwind.config.js

@@ -0,0 +1,69 @@
+module.exports = {
+  purge: [],
+  darkMode: false, // or 'media' or 'class'
+  theme: {
+    fontFamily: {
+      'base': ['GothamRounded-Book', 'Helvetica', 'Arial', 'sans-serif'],
+      'base-medium': [
+          'GothamRounded-Medium',
+          'Helvetica',
+          'Arial',
+          'sans-serif',
+      ],
+      'base-bold': [
+          'GothamRounded-Bold',
+          'Helvetica',
+          'Arial',
+          'sans-serif',
+      ],
+    },
+    fontSize: {
+        'xs': '.579rem',
+        'sm': '.694rem',
+        'tiny': '.833rem',
+        'base': '1rem',
+        'lg': '1.2rem',
+        'xl': '1.44rem',
+        '2xl': '1.728rem',
+        '3xl': '2.074rem',
+        '4xl': '2.488rem',
+    },
+    colors: {
+      'transparent': 'transparent',
+      'white': '#ffffff',
+      'black': '#000000',
+      'red': '#bb0a1e',
+      'brand-primary': '#e6006f',
+      'brand-secondary': '#008576',
+      'brand-highlight': '#000046',
+      'brand-symbolic': '#00BEBE',
+      'brand-neutral': '#495c63',
+      'brand-primary-strict': '#ff007d',
+      'brand-border': '#d0d0d0',
+      'brand-border-lightest': '#eeeeee',
+      'brand-border-light': '#D8D8D8',
+      'brand-border-dark': '#616161',
+      'brand-error': '#B11013',
+      'brand-error-light': '#ffd9d9',
+      'brand-warning': '#FFD35C',
+      'brand-info-light': '#d8eaf5',
+      'brand-success-light': '#e7f5e7',
+      'brand-light-grey': '#f3f3f3',
+      'brand-success': '#69C364',
+      'brand-confirmed': '#378433',
+      'brand-link': '#006EBE',
+      'brand-prompt': '#ebf7f7',
+      'brand-gradient':
+          'linear-gradient(150deg, #1b3165 0%,#1a3768 55%,#00a9a9 100%)',
+      'social-facebook': '#3b5999',
+      'social-whatsapp': '#25d366',
+      'social-twitter': '#55acee',
+      'transparent-black': 'rgba(0,0,0,0.6)',
+    },
+    extend: {},
+  },
+  variants: {
+    extend: {},
+  },
+  plugins: [],
+}