hds-web 0.1.0

package/src/HDS/components/Headers/v3Header.js

@@ -0,0 +1,324 @@
+import React from 'react';
+import { Fragment } from 'react'
+import { Popover, Transition } from '@headlessui/react'
+import { Icon } from '../common-components/Icon'
+import { Typography } from '../../foundation/Typography'
+import { HDSButton } from '../Buttons'
+
+const solutions = [
+    {
+        name: 'Analytics',
+        description: 'Get a better understanding of where your traffic is coming from.',
+        href: '#',
+        icon: '',
+    },
+    {
+        name: 'Engagement',
+        description: 'Speak directly to your customers in a more meaningful way.',
+        href: '#',
+        icon: '',
+    },
+    {
+        name: 'Security',
+        description: 'Your customers’ data will be safe and secure.',
+        href: '#',
+        icon: ''
+    },
+    {
+        name: 'Integrations',
+        description: "Connect with third-party tools that you're already using.",
+        href: '#',
+        icon: '',
+    },
+    {
+        name: 'Automations',
+        description: 'Build strategic funnels that will drive your customers to convert',
+        href: '#',
+        icon: '',
+    },
+    {
+        name: 'Reports',
+        description: 'Get detailed reports that will help you make more informed decisions ',
+        href: '#',
+        icon: '',
+    },
+]
+const resources = [
+    {
+        name: 'Help Center',
+        description: 'Get all of your questions answered in our forums or contact support.',
+        href: '#',
+    },
+    { name: 'Guides', description: 'Learn how to maximize our platform to get the most out of it.', href: '#' },
+    { name: 'Events', description: 'See what meet-ups and other events we might be planning near you.', href: '#' },
+    { name: 'Security', description: 'Understand how we take your privacy seriously.', href: '#' },
+]
+
+function classNames(...classes) {
+    return classes.filter(Boolean).join(' ')
+}
+
+export default function v3Header() {
+    return (
+        <Popover className="relative bg-white">
+            <div className="flex items-center justify-between p-6 md:justify-start md:space-x-6">
+                <div>
+                    <a href="#" className="flex items-center">
+                        <Icon variant={'HasuraBlueLogo'} strokeColor={'#1EA7FD'} />
+                        <Typography className='ml-1.5' textStyle='h4'>HASURA</Typography>
+                    </a>
+                </div>
+                <div className="-my-2 -mr-2 md:hidden">
+                    <Popover.Button className="inline-flex items-center justify-center rounded-md bg-white p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
+                        <span className="sr-only">Open menu</span>
+                        <div className=' gap-6 flex'>
+                            <Icon height={'h-6'} variant={'searchsm'} strokeColor={'#3970FD'} />
+                            <Icon height={'h-6'} variant={'menu05'} strokeColor={'#3970FD'} />
+                        </div>
+
+
+                    </Popover.Button>
+                </div>
+                <div className="hidden md:flex md:flex-1 md:items-center md:justify-between">
+                    <Popover.Group as="nav" className="flex space-x-6">
+                        <Popover className="relative">
+                            {({ open }) => (
+                                <>
+                                    <Popover.Button
+                                        className={classNames(
+                                            open ? 'text-gray-900' : 'text-gray-500',
+                                            'group inline-flex items-center rounded-md bg-white text-base font-medium hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2'
+                                        )}
+                                    >
+                                        <span>Platform</span>
+                                        {/* <Icon variant={'home03'}
+                      className={classNames(
+                        open ? 'text-gray-600' : 'text-gray-400',
+                        'ml-2 h-5 w-5 group-hover:text-gray-500'
+                      )}
+                      aria-hidden="true"
+                    /> */}
+                                        <Icon variant={'home03'} strokeColor={'#1EA7FD'} />
+                                    </Popover.Button>
+
+                                    <Transition
+                                        as={Fragment}
+                                        enter="transition ease-out duration-200"
+                                        enterFrom="opacity-0 translate-y-1"
+                                        enterTo="opacity-100 translate-y-0"
+                                        leave="transition ease-in duration-150"
+                                        leaveFrom="opacity-100 translate-y-0"
+                                        leaveTo="opacity-0 translate-y-1"
+                                    >
+                                        <Popover.Panel className="absolute z-10 -ml-4 mt-3 w-screen max-w-md transform lg:max-w-3xl">
+                                            <div className="overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5">
+                                                <div className="relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8 lg:grid-cols-2">
+                                                    {solutions.map((item) => (
+                                                        <a
+                                                            key={item.name}
+                                                            href={item.href}
+                                                            className="-m-3 flex items-start rounded-lg p-3 hover:bg-gray-50"
+                                                        >
+                                                            <div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
+                                                                {/* <item.icon className="h-6 w-6" aria-hidden="true" /> */}
+                                                            </div>
+                                                            <div className="ml-4">
+                                                                <p className="text-base font-medium text-gray-900">{item.name}</p>
+                                                                <p className="mt-1 text-sm text-gray-500">{item.description}</p>
+                                                            </div>
+                                                        </a>
+                                                    ))}
+                                                </div>
+                                                <div className="bg-gray-50 p-5 sm:p-8">
+                                                    <a href="#" className="-m-3 flow-root rounded-md p-3 hover:bg-gray-100">
+                                                        <div className="flex items-center">
+                                                            <div className="text-base font-medium text-gray-900">Enterprise</div>
+                                                            <span className="ml-3 inline-flex items-center rounded-full bg-indigo-100 px-3 py-0.5 text-xs font-medium leading-5 text-indigo-800">
+                                                                New
+                                                            </span>
+                                                        </div>
+                                                        <p className="mt-1 text-sm text-gray-500">
+                                                            Empower your entire team with even more advanced tools.
+                                                        </p>
+                                                    </a>
+                                                </div>
+                                            </div>
+                                        </Popover.Panel>
+                                    </Transition>
+                                </>
+                            )}
+                        </Popover>
+                        <a href="#" className="text-base font-medium text-gray-500 hover:text-gray-900">
+                            Developers
+                        </a>
+                        <a href="#" className="text-base font-medium text-gray-500 hover:text-gray-900">
+                            Customers
+                        </a>
+                        <a href="#" className="text-base font-medium text-gray-500 hover:text-gray-900">
+                            Company
+                        </a>
+                        <a href="#" className="text-base font-medium text-gray-500 hover:text-gray-900">
+                            Pricing
+                        </a>
+
+                        {/* <Popover className="relative">
+              {({ open }) => (
+                <>
+                  <Popover.Button
+                    className={classNames(
+                      open ? 'text-gray-900' : 'text-gray-500',
+                      'group inline-flex items-center rounded-md bg-white text-base font-medium hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2'
+                    )}
+                  >
+                    <span>More</span>
+                    <Icon variant='home3'
+                      className={classNames(
+                        open ? 'text-gray-600' : 'text-gray-400',
+                        'ml-2 h-5 w-5 group-hover:text-gray-500'
+                      )}
+                      aria-hidden="true"
+                    />
+                    <Icon variant={'home03'} strokeColor={'#1EA7FD'} />
+                  </Popover.Button>
+
+                  <Transition
+                    as={Fragment}
+                    enter="transition ease-out duration-200"
+                    enterFrom="opacity-0 translate-y-1"
+                    enterTo="opacity-100 translate-y-0"
+                    leave="transition ease-in duration-150"
+                    leaveFrom="opacity-100 translate-y-0"
+                    leaveTo="opacity-0 translate-y-1"
+                  >
+                    <Popover.Panel className="absolute left-1/2 z-10 mt-3 w-screen max-w-xs -translate-x-1/2 transform px-2 sm:px-0">
+                      <div className="overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5">
+                        <div className="relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8">
+                          {resources.map((item) => (
+                            <a key={item.name} href={item.href} className="-m-3 block rounded-md p-3 hover:bg-gray-50">
+                              <p className="text-base font-medium text-gray-900">{item.name}</p>
+                              <p className="mt-1 text-sm text-gray-500">{item.description}</p>
+                            </a>
+                          ))}
+                        </div>
+                      </div>
+                    </Popover.Panel>
+                  </Transition>
+                </>
+              )}
+            </Popover> */}
+                    </Popover.Group>
+
+
+                    <div className="flex items-center gap-6 md:ml-12">
+                        <Icon height={'h-6'} variant={'searchsm'} strokeColor={'#3970FD'} />
+                        <HDSButton
+                            rightIconVariant="chevronright"
+                            rightIconColor='#3970FD'
+                            label="Log In"
+                            state="default"
+                            leftIconVariant=""
+                            type='tonal'
+                        />
+                        <HDSButton
+                            rightIconVariant="chevronright"
+                            label="Get Started"
+                            state="default"
+                            leftIconVariant=""
+                        />
+
+                    </div>
+
+
+
+                </div>
+            </div>
+
+            <Transition
+                as={Fragment}
+                enter="duration-200 ease-out"
+                enterFrom="opacity-0 scale-95"
+                enterTo="opacity-100 scale-100"
+                leave="duration-100 ease-in"
+                leaveFrom="opacity-100 scale-100"
+                leaveTo="opacity-0 scale-95"
+            >
+                <Popover.Panel focus className="absolute inset-x-0 top-0 origin-top-right transform p-2 transition md:hidden">
+                    <div className="divide-y-2 divide-gray-50 rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5">
+                        <div className="px-5 pt-5 pb-6">
+                            <div className="flex items-center justify-between">
+                                <div>
+                                    <img
+                                        className="h-8 w-auto"
+                                        src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600"
+                                        alt="Your Company"
+                                    />
+                                </div>
+                                <div className="-mr-2">
+                                    <Popover.Button className="inline-flex items-center justify-center rounded-md bg-white p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
+                                        <span className="sr-only">Close menu</span>
+                                        {/* <Icon variant='home3' className="h-6 w-6" aria-hidden="true" /> */}
+                                        <Icon height={'h-6'} variant={'menu05'} strokeColor={'#3970FD'} />
+                                    </Popover.Button>
+                                </div>
+                            </div>
+                            <div className="mt-6">
+                                <nav className="grid gap-6">
+                                    {solutions.map((item) => (
+                                        <a
+                                            key={item.name}
+                                            href={item.href}
+                                            className="-m-3 flex items-center rounded-lg p-3 hover:bg-gray-50"
+                                        >
+                                            <div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-md bg-indigo-500 text-white">
+                                                <item.icon className="h-6 w-6" aria-hidden="true" />
+                                            </div>
+                                            <div className="ml-4 text-base font-medium text-gray-900">{item.name}</div>
+                                        </a>
+                                    ))}
+                                </nav>
+                            </div>
+                        </div>
+                        <div className="py-6 px-5">
+                            <div className="grid grid-cols-2 gap-4">
+                                <a href="#" className="text-base font-medium text-gray-900 hover:text-gray-700">
+                                    Pricing
+                                </a>
+
+                                <a href="#" className="text-base font-medium text-gray-900 hover:text-gray-700">
+                                    Docs
+                                </a>
+
+                                <a href="#" className="text-base font-medium text-gray-900 hover:text-gray-700">
+                                    Enterprise
+                                </a>
+                                {resources.map((item) => (
+                                    <a
+                                        key={item.name}
+                                        href={item.href}
+                                        className="text-base font-medium text-gray-900 hover:text-gray-700"
+                                    >
+                                        {item.name}
+                                    </a>
+                                ))}
+                            </div>
+                            <div className="mt-6">
+                                <a
+                                    href="#"
+                                    className="flex w-full items-center justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700"
+                                >
+                                    Sign up
+                                </a>
+                                <p className="mt-6 text-center text-base font-medium text-gray-500">
+                                    Existing customer?{' '}
+                                    <a href="#" className="text-indigo-600 hover:text-indigo-500">
+                                        Sign in
+                                    </a>
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </Popover.Panel>
+            </Transition>
+        </Popover>
+    )
+}

package/src/HDS/components/InputFields/defaultIF.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import { useState } from 'react';
+export default function DefaultIF({ disabled, label, helper, size, placeholder, onChange }) {
+  const [value, setValue] = useState('');
+
+  const handleChange = (event) => {
+    const newValue = event.target.value;
+    setValue(newValue);
+    if (onChange) {
+      onChange(newValue);
+    }
+  }
+
+  return (
+    <div>
+      <label htmlFor="email" className="ml-4 block text-sm-medium  text-neutral-800">
+        {label}
+      </label>
+      <div className="mt-1">
+        <input
+          type="email"
+          name="email"
+          id="email"
+          disabled={disabled}
+          className="block w-full rounded-full border-neutral-200 shadow-none text-neutral-800 
+          
+          focus:outline-none focus:border-neutral-200 focus:shadow-[0_0px_0px_4px_#DFE8FF] focus:ring-0 
+
+          hover:shadow hover:border-neutral-300 
+
+          placeholder:text-neutral-500 placeholder:text-md-regular 
+
+          disabled:cursor-not-allowed disabled:bg-neutral-100 disabled:text-neutral-500 disabled:ring-gray-200"
+
+          placeholder={placeholder}
+          aria-describedby="email-description"
+          onChange={handleChange}
+        />
+      </div>
+      <p className="mt-2 ml-4 text-sm-regular text-neutral-800" id="email-description">
+        {helper}
+      </p>
+    </div>
+
+  )
+}

package/src/HDS/components/InputFields/error.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import { useState } from 'react';
+import { Icon } from "../common-components/Icon"
+export default function ErrorIF({ label, helper, size, placeholder, rightIconVariant, rightIconColor, disabled, onChange }) {
+  const [value, setValue] = useState('');
+
+  const handleChange = (event) => {
+    const newValue = event.target.value;
+    setValue(newValue);
+    if (onChange) {
+      onChange(newValue);
+    }
+  }
+
+  return (
+    <div>
+      <label htmlFor="email" className="block ml-4 text-sm-medium  text-neutral-800">
+        {label}
+      </label>
+      <div className="relative mt-1 rounded-full shadow-sm">
+        <input
+          type="email"
+          name="email"
+          id="email"
+          className="block w-full rounded-full shadow border-pink-500
+            
+            focus:border-pink-500 focus:outline-none focus:ring-pink-500 sm:text-sm
+            focus:shadow-[0_0px_0px_4px_#FFE6F0] 
+            
+            placeholder:text-neutral-500 placeholder:text-md-regular 
+            
+            
+            "
+          placeholder={placeholder}
+          defaultValue="adamwathan"
+          aria-invalid="true"
+          aria-describedby="email-error"
+          onChange={handleChange}
+        />
+        <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-4">
+          {rightIconVariant && rightIconVariant !== 'none' && (
+            <div className=' ml-1.5 h-4 w-4'>
+              <Icon variant={rightIconVariant} strokeColor={rightIconColor} />
+            </div>
+          )}
+        </div>
+      </div>
+      <p className="mt-2 ml-4 text-xs-regular text-pink-600" id="email-error">
+        {helper}
+      </p>
+    </div>
+  )
+}

package/src/HDS/components/InputFields/iconLeading.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { useState } from 'react';
+import { Icon } from "../common-components/Icon"
+export default function IconLeadingIF({ label, helper, size, placeholder, leftIconVariant, leftIconColor, disabled, onChange }) {
+  const [value, setValue] = useState('');
+
+  const handleChange = (event) => {
+    const newValue = event.target.value;
+    setValue(newValue);
+    if (onChange) {
+      onChange(newValue);
+    }
+  }
+  return (
+    <div>
+      <label htmlFor="email" className="block text-sm-medium  text-neutral-800">
+        {label}
+      </label>
+      <div className="relative mt-1 rounded-md shadow-sm">
+        <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
+          {leftIconVariant && leftIconVariant !== 'none' && (
+            <div className='-ml-0.5 mr-2 h-4 w-4'>
+              <Icon variant={leftIconVariant} strokeColor={leftIconColor} />
+            </div>
+          )}
+
+        </div>
+        <input
+          type="email"
+          name="email"
+          id="email"
+          disabled={disabled}
+          className="block w-full rounded-md border-gray-300 pl-10 
+                      focus:border-indigo-500 focus:ring-indigo-500 
+                      disabled:cursor-not-allowed disabled:bg-neutral-100 disabled:text-neutral-500 disabled:ring-gray-200
+                      sm:text-sm"
+          placeholder={placeholder}
+        />
+      </div>
+      <p className="mt-2 text-sm-regular text-neutral-800" id="email-description">
+        {helper}
+      </p>
+    </div>
+  )
+}

package/src/HDS/components/InputFields/iconTrail.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import { useState } from 'react';
+import { Icon } from "../common-components/Icon"
+export default function IconTrailIF({ label, helper, size, placeholder, rightIconVariant, rightIconColor, disabled, onChange }) {
+  const [value, setValue] = useState('');
+
+  const handleChange = (event) => {
+    const newValue = event.target.value;
+    setValue(newValue);
+    if (onChange) {
+      onChange(newValue);
+    }
+  }
+
+  return (
+    <div>
+      <label htmlFor="account-number" className="block text-sm-medium ml-4 text-neutral-800">
+        {label}
+      </label>
+      <div className="relative mt-1 rounded-full shadow-sm">
+        <input
+          type="text"
+          name="account-number"
+          id="account-number"
+          disabled={disabled}
+          className="block w-full rounded-full border-gray-300 pr-10 
+                      focus:border-indigo-500 focus:ring-indigo-500 
+                      disabled:cursor-not-allowed disabled:bg-neutral-100 disabled:text-neutral-500 disabled:ring-gray-200
+                      sm:text-sm"
+          placeholder="000-00-0000"
+          onChange={handleChange}
+        />
+        <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-4">
+          {rightIconVariant && rightIconVariant !== 'none' && (
+            <div className=' ml-1.5 h-4 w-4'>
+              <Icon variant={rightIconVariant} strokeColor={rightIconColor} />
+            </div>
+          )}
+        </div>
+      </div>
+      <p className="mt-2 ml-4 text-sm-regular text-neutral-800" id="email-description">
+        {helper}
+      </p>
+    </div>
+  )
+}

package/src/HDS/components/InputFields/index.js

@@ -0,0 +1,9 @@
+export {default as DefaultIF} from './defaultIF';
+export {default as ErrorIF} from './error';
+export {default as IconLeadingIF} from './iconLeading';
+export {default as IconTrailIF} from './iconTrail';
+export {default as LeadingDropIF} from './leadingDrop';
+export {default as LeadingTextIF} from './leadingText';
+export {default as TextAreaIF} from './textArea';
+export {default as TrailingButtonIF} from './trailingButton';
+export {default as TrailingDropdownIF} from './trailingDropdown';

package/src/HDS/components/InputFields/leadingDrop.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import { useState } from 'react';
+export default function LeadingDropIF({ disabled, label, helper, size, placeholder, dropOptions, onChange }) {
+  const [value, setValue] = useState('');
+
+  const handleChange = (event) => {
+    const newValue = event.target.value;
+    setValue(newValue);
+    if (onChange) {
+      onChange(newValue);
+    }
+  }
+  return (
+    <div>
+      <label htmlFor="phone-number" className="block text-sm-medium  text-neutral-800">
+        {label}
+      </label>
+      <div className="relative mt-1">
+        <div className="absolute inset-y-0 left-0 flex items-center">
+          <label htmlFor="country" className="sr-only">
+            Country
+          </label>
+          <select
+            id="country"
+            name="country"
+            autoComplete="country"
+            disabled={disabled}
+            className="h-full rounded-l-md border-neutral-300 border-r-0 bg-transparent py-0 pl-3 pr-7 text-gray-500 
+                      focus:border-none focus:ring-0 sm:text-sm-regular focus:outline-none focus:border-neutral-200 focus:shadow-[0_0px_0px_4px_#DFE8FF]
+                      disabled:cursor-not-allowed disabled:bg-neutral-100 disabled:text-neutral-500 disabled:ring-gray-200"
+          >
+
+            {dropOptions.map((item) => (
+              <option>{item}</option>
+            ))}
+          </select>
+        </div>
+        <input
+          type="text"
+          name="phone-number"
+          id="phone-number"
+          disabled={disabled}
+          className="
+                      block w-full rounded-lg border-neutral-200 shadow-none text-neutral-800 py-1.5 pl-16 sm:text-sm-regular
+                      focus:outline-none focus:border-neutral-200 focus:shadow-[0_0px_0px_4px_#DFE8FF] focus:ring-0 
+                      hover:shadow hover:border-neutral-300 
+                      placeholder:text-neutral-500 placeholder:text-md-regular 
+                      disabled:cursor-not-allowed disabled:bg-neutral-100 disabled:text-neutral-500 disabled:ring-gray-200
+                    "
+
+          placeholder={`   ` + placeholder}
+        >
+
+        </input>
+
+      </div>
+      <p className="mt-2 text-sm-regular text-neutral-800" id="email-description">
+        {helper}
+      </p>
+    </div>
+  )
+}

package/src/HDS/components/InputFields/leadingText.js

@@ -0,0 +1,8 @@
+export default function LeadingText () {
+
+    return(
+      <div>
+        leading text
+      </div>
+    )
+  }

package/src/HDS/components/InputFields/textArea.js

@@ -0,0 +1,26 @@
+import React from 'react';
+export default function TextArea ({label, placeholder, disabled }) {
+
+    return (
+      <div>
+        <label htmlFor="comment" className="block text-sm-medium leading-6 text-neutral-800">
+          {label}
+        </label>
+        <div className="mt-2">
+          <textarea
+            rows={4}
+            name="comment"
+            id="comment"
+            disabled={disabled}
+            className="block w-full rounded-md border-0 text-neutral-800 shadow ring-1 ring-inset ring-neutral-200 placeholder:text-gray-400 
+                      focus:ring-2 focus:ring-inset focus:ring-indigo-600 
+                      disabled:cursor-not-allowed disabled:bg-neutral-100 disabled:text-neutral-500 disabled:ring-gray-200
+                      sm:py-1.5 sm:text-md-regular sm:leading-6"
+            defaultValue={''}
+            placeholder={placeholder}
+          />
+        </div>
+      </div>
+    )
+  }
+