hds-web 0.1.0

package/src/HDS/components/Cards/Menu/flyoutFull.js

@@ -0,0 +1,160 @@
+import { Fragment } from 'react'
+import { Popover, Transition } from '@headlessui/react'
+import { ChevronDownIcon } from '@heroicons/react/20/solid'
+import {
+  BookOpenIcon,
+  BriefcaseIcon,
+  GlobeAltIcon,
+  InformationCircleIcon,
+  NewspaperIcon,
+  ShieldCheckIcon,
+  UserGroupIcon,
+  UsersIcon,
+  VideoCameraIcon,
+} from '@heroicons/react/24/outline'
+
+const engagement = [
+  { name: 'About', href: '#', icon: InformationCircleIcon },
+  { name: 'Customers', href: '#', icon: UsersIcon },
+  { name: 'Press', href: '#', icon: NewspaperIcon },
+  { name: 'Careers', href: '#', icon: BriefcaseIcon },
+  { name: 'Privacy', href: '#', icon: ShieldCheckIcon },
+]
+const resources = [
+  { name: 'Community', href: '#', icon: UserGroupIcon },
+  { name: 'Partners', href: '#', icon: GlobeAltIcon },
+  { name: 'Guides', href: '#', icon: BookOpenIcon },
+  { name: 'Webinars', href: '#', icon: VideoCameraIcon },
+]
+const recentPosts = [
+  {
+    id: 1,
+    title: 'Boost your conversion rate',
+    href: '#',
+    date: 'Mar 16, 2023',
+    datetime: '2023-03-16',
+    category: { title: 'Marketing', href: '#' },
+    imageUrl:
+      'https://images.unsplash.com/photo-1496128858413-b36217c2ce36?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3603&q=80',
+    description:
+      'Et et dolore officia quis nostrud esse aute cillum irure do esse. Eiusmod ad deserunt cupidatat est magna Lorem.',
+  },
+  {
+    id: 2,
+    title: 'How to use search engine optimization to drive sales',
+    href: '#',
+    date: 'Mar 10, 2023',
+    datetime: '2023-03-10',
+    category: { title: 'Sales', href: '#' },
+    imageUrl:
+      'https://images.unsplash.com/photo-1547586696-ea22b4d4235d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3270&q=80',
+    description: 'Optio cum necessitatibus dolor voluptatum provident commodi et.',
+  },
+]
+
+export default function FlyoutFull(props) {
+    const{
+        
+    }= props;
+  return (
+    <Popover className="relative isolate z-50 shadow">
+      <div className="bg-white py-5">
+        <div className="mx-auto max-w-7xl px-6 lg:px-8">
+          <Popover.Button className="inline-flex items-center gap-x-1 text-sm font-semibold leading-6 text-gray-900">
+            Solutions
+            <ChevronDownIcon className="h-5 w-5" aria-hidden="true" />
+          </Popover.Button>
+        </div>
+      </div>
+
+      <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 inset-x-0 top-0 -z-10 bg-white pt-16 shadow-lg ring-1 ring-gray-900/5">
+          <div className="mx-auto grid max-w-7xl grid-cols-1 gap-y-10 gap-x-8 py-10 px-6 lg:grid-cols-2 lg:px-8">
+            <div className="grid grid-cols-2 gap-x-6 sm:gap-x-8">
+              <div>
+                <h3 className="text-sm font-medium leading-6 text-gray-500">Engagement</h3>
+                <div className="mt-6 flow-root">
+                  <div className="-my-2">
+                    {engagement.map((item) => (
+                      <a
+                        key={item.name}
+                        href={item.href}
+                        className="flex gap-x-4 py-2 text-sm font-semibold leading-6 text-gray-900"
+                      >
+                        <item.icon className="h-6 w-6 flex-none text-gray-400" aria-hidden="true" />
+                        {item.name}
+                      </a>
+                    ))}
+                  </div>
+                </div>
+              </div>
+              <div>
+                <h3 className="text-sm font-medium leading-6 text-gray-500">Resources</h3>
+                <div className="mt-6 flow-root">
+                  <div className="-my-2">
+                    {resources.map((item) => (
+                      <a
+                        key={item.name}
+                        href={item.href}
+                        className="flex gap-x-4 py-2 text-sm font-semibold leading-6 text-gray-900"
+                      >
+                        <item.icon className="h-6 w-6 flex-none text-gray-400" aria-hidden="true" />
+                        {item.name}
+                      </a>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div className="grid grid-cols-1 gap-10 sm:gap-8 lg:grid-cols-2">
+              <h3 className="sr-only">Recent posts</h3>
+              {recentPosts.map((post) => (
+                <article
+                  key={post.id}
+                  className="relative isolate flex max-w-2xl flex-col gap-x-8 gap-y-6 sm:flex-row sm:items-start lg:flex-col lg:items-stretch"
+                >
+                  <div className="relative flex-none">
+                    <img
+                      className="aspect-[2/1] w-full rounded-lg bg-gray-100 object-cover sm:aspect-[16/9] sm:h-32 lg:h-auto"
+                      src={post.imageUrl}
+                      alt=""
+                    />
+                    <div className="absolute inset-0 rounded-lg ring-1 ring-inset ring-gray-900/10" />
+                  </div>
+                  <div>
+                    <div className="flex items-center gap-x-4">
+                      <time dateTime={post.datetime} className="text-sm leading-6 text-gray-600">
+                        {post.date}
+                      </time>
+                      <a
+                        href={post.category.href}
+                        className="relative z-10 rounded-full bg-gray-50 py-1.5 px-3 text-xs font-medium text-gray-600 hover:bg-gray-100"
+                      >
+                        {post.category.title}
+                      </a>
+                    </div>
+                    <h4 className="mt-2 text-sm font-semibold leading-6 text-gray-900">
+                      <a href={post.href}>
+                        <span className="absolute inset-0" />
+                        {post.title}
+                      </a>
+                    </h4>
+                    <p className="mt-2 text-sm leading-6 text-gray-600">{post.description}</p>
+                  </div>
+                </article>
+              ))}
+            </div>
+          </div>
+        </Popover.Panel>
+      </Transition>
+    </Popover>
+  )
+}

package/src/HDS/components/Cards/Menu/index.js

@@ -0,0 +1 @@
+export {default as Flyout} from './flyout';

package/src/HDS/components/Cards/Misc/index.js

@@ -0,0 +1 @@
+export {default as TalkCard} from './talkCard';

package/src/HDS/components/Cards/Misc/talkCard.js

@@ -0,0 +1,41 @@
+import React from "react";
+import { Badges } from '../../BadgesCaption';
+import { Typography } from '../../../foundation/Typography'
+import { ProfileAvatar } from '../../Avatars'
+
+export default function TalkCard(props) {
+    return (
+
+        <div className=" flex-col p-6 border border-neutral-200 rounded-3xl shadow bg-neutral-0">
+            <Badges
+                size={props.badges.size}
+                color={props.badges.color}
+                leftIconVariant={props.badges.leftIconVariant}
+                leftIconColor={props.badges.leftIconColor}
+                children={props.badges.label}
+            />
+            <Typography className='my-2 text-neutral-800' textStyle='h5'>{props.title}</Typography>
+            <Typography className='my-2 text-neutral-600' textStyle='body1'>{props.para}</Typography>
+
+            
+            <div className="grid grid-cols-2 my-6 gap-4">
+            {props.speakerSet.map((value,i) => (
+   
+                  <ProfileAvatar
+                name={value.name}
+                size='md'
+                designation={value.designation}
+                imageUrl={value.imageUrl}
+                 />
+              
+            ))}
+            </div>
+
+
+
+          
+        </div>
+
+    )
+
+}

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

@@ -0,0 +1,2 @@
+export * from './Menu';
+export * from './Misc';

package/src/HDS/components/Carousels/carousel.js

@@ -0,0 +1,165 @@
+import React from "react";
+import { Icon } from "../common-components/Icon";
+
+// props.images must be an array of urls , if using Next JS this could something like
+// const props.images = ['/img/img1.png', '/img/img2.png', '/img/img3.png']
+
+export default function Carouseltest(props) {
+  // We will start by storing the index of the current image in the state.
+  const [currentImage, setCurrentImage] = React.useState(0);
+  const [touchStart, setTouchStart] = React.useState(0);
+  const [touchEnd, setTouchEnd] = React.useState(0);
+
+  const handleTouchStart = e => {
+    setTouchStart(e.targetTouches[0].clientX);
+  };
+  
+  const handleTouchMove = e => {
+    setTouchEnd(e.targetTouches[0].clientX);
+  };
+  
+  const handleTouchEnd = () => {
+    if (touchStart - touchEnd > 150) {
+      nextImage();
+    }
+  
+    if (touchStart - touchEnd < -150) {
+      previousImage();
+    }
+  };
+
+  // We are using react ref to 'tag' each of the props.images. Below will create an array of
+  // objects with numbered keys. We will use those numbers (i) later to access a ref of a
+  // specific image in this array.
+  const refs = props.images.reduce((acc, val, i) => {
+    acc[i] = React.createRef();
+    return acc;
+  }, {});
+
+  const scrollToImage = i => {
+    setCurrentImage(i);
+    // 'tagged' each one of the props.images with a ref,
+    // use built-in scrollIntoView API to do eaxactly what it says on the box - scroll it into
+    // your current view! To do so we pass an index of the image, which is then use to identify our current
+    // image's ref in 'refs' array above.
+    refs[i].current.scrollIntoView({
+      //     Defines the transition animation.
+      behavior: 'smooth',
+      //      Defines vertical alignment.
+      block: 'nearest',
+      //      Defines horizontal alignment.
+      inline: 'start',
+    });
+  };
+
+  const totalImages = props.images.length;
+
+
+  // Below functions will assure that after last image we'll scroll back to the start,
+  const nextImage = () => {
+    if (currentImage >= totalImages - 1) {
+      scrollToImage(0);
+    } else {
+      console.log(currentImage);
+      scrollToImage(currentImage + 1);
+    }
+  };
+
+  const previousImage = () => {
+    if (currentImage === 0) {
+      scrollToImage(totalImages - 1);
+    } else {
+      scrollToImage(currentImage - 1);
+    }
+  };
+
+  const arrowStyle = 'absolute text-2xl z-10 bg-black h-10 w-10 rounded-full bg-neutral-0 flex items-center justify-center';
+
+  // Let's create dynamic buttons.
+  const sliderControl = isLeft => (
+    <button
+      type="button"
+      onClick={isLeft ? previousImage : nextImage}
+      className={`${arrowStyle} ${isLeft ? 'left-2 desk:-left-5' : 'right-2 desk:-right-5'}`}
+      style={{ top: '40%' }}
+    >
+      <span role="img" aria-label={`Arrow ${isLeft ? 'left' : 'right'}`}>
+        {isLeft ?
+
+          <Icon className={`${currentImage == 0 ? "invisible" : ""}`} height={'h-6'} variant={'chevronleft'} strokeColor='#1F2A37' />
+
+          :
+
+          <Icon height={'h-6'} variant={'chevronright'} strokeColor='#1F2A37' />
+          
+        }
+      </span>
+    </button>
+  );
+
+  const preview = () => {
+    return (
+      <div className="flex flex-row gap-4 mt-10 ml-4">
+        {props.images.map((img, i) => (
+          <div className="" key={i} >
+            <img src={img} className={`max-w-[6rem] ${currentImage == i ? "border-blue-400 border-4" : ""} rounded-lg object-contain`} />
+          </div>
+        ))}
+      </div>
+    )
+  };
+
+  return (
+    // Images are placed using inline flex. We then wrap an image in a div
+    // with flex-shrink-0 to stop it from 'shrinking' to fit the outer div.
+    // Finally the image itself will be 100% of a parent div. Outer div is
+    // set with position relative, so we can place our cotrol buttons using
+    // absolute positioning on each side of the image.
+    <div>
+      <div className="flex justify-center select-none  items-center gap-10 ">
+        <div className="relative w-full">
+          <div className="snap-x inline-flex select-none overflow-x-scroll scrollbar-hide"
+          onTouchStart={handleTouchStart}
+          onTouchMove={handleTouchMove}
+          onTouchEnd={handleTouchEnd}
+          onMouseDown={e => setTouchStart(e.clientX)}
+          onMouseUp={e => {
+            if (touchStart - e.clientX > 50) {
+              nextImage();
+            }
+        
+            if (touchStart - e.clientX < -50) {
+              previousImage();
+            }
+          }}
+          >
+            {sliderControl(true)}
+            {props.images.map((img, i) => (
+              <div className="w-3/4 snap-center shrink-0  mx-4" key={i} ref={refs[i]}>
+                <img src={img} className={`w-full select-none rounded-3xl object-contain ${currentImage == i ? "" : " opacity-60 transition-opacity delay-300 ease-in"}`} draggable="false"  />
+              </div>
+            ))}
+            {sliderControl()}
+            {/* <div className=' bg-purple-500'>
+
+            <div
+              className="absolute bottom-0 left-0 right-0 z-[2] mx-[15%] mb-4 flex list-none justify-center p-0">
+              <ol className='flex gap-4 bg-neutral-0 p-3 rounded-full'>
+                {props.images.map((page) => (
+                  <li key={page} className=' w-2.5 h-2.5 rounded-full bg-neutral-200' />
+                ))}
+              </ol>
+            </div>
+
+          </div> */}
+
+          </div>
+        </div>
+      </div>
+      <div>
+        {preview()}
+      </div>
+    </div>
+  );
+};
+

package/src/HDS/components/Carousels/carouselCard.js

@@ -0,0 +1,107 @@
+import React from "react";
+import { Icon } from "../common-components/Icon";
+import { HasConAvatar } from "../Avatars";
+export default function Carouseltest(props) {
+    const [currentCard, setCurrentCard] = React.useState(0);
+    const [touchStart, setTouchStart] = React.useState(0);
+    const [touchEnd, setTouchEnd] = React.useState(0);
+
+    const handleTouchStart = e => {
+        setTouchStart(e.targetTouches[0].clientX);
+    };
+
+    const handleTouchMove = e => {
+        setTouchEnd(e.targetTouches[0].clientX);
+    };
+
+    const handleTouchEnd = () => {
+        if (touchStart - touchEnd > 150) {
+            nextCard();
+        }
+
+        if (touchStart - touchEnd < -150) {
+            previousCard();
+        }
+    };
+
+
+    const refs = props.cards.reduce((acc, val, i) => {
+        acc[i] = React.createRef();
+        return acc;
+    }, {});
+
+    const scrollToCard = i => {
+        setCurrentCard(i);
+
+        refs[i].current.scrollIntoView({
+            behavior: 'smooth',
+            block: 'nearest',
+            inline: 'start',
+        });
+    };
+
+    const totalCards = props.cards.length;
+    const nextCard = () => {
+        if (currentCard >= totalCards - 1) {
+            scrollToCard(0);
+        } else {
+            scrollToCard(currentCard + 1);
+        }
+    };
+
+    const previousCard = () => {
+        if (currentCard === 0) {
+            scrollToCard(totalCards - 1);
+        } else {
+            scrollToCard(currentCard - 1);
+        }
+    };
+
+    const arrowStyle = ' text-2xl z-10 bg-black h-10 w-10 rounded-full bg-neutral-0 flex items-center justify-center';
+
+    const sliderControl = isLeft => (
+        <button
+            type="button"
+            onClick={isLeft ? previousCard : nextCard}
+            className={`flex  ${arrowStyle} ${isLeft ? '' : ''}`}
+
+        >
+            <span role="img" aria-label={`Arrow ${isLeft ? 'left' : 'right'}`}>
+                {isLeft ?
+
+                    <Icon height={'h-6'} variant={'chevronleft'} strokeColor='#1F2A37' />
+
+                    :
+
+                    <Icon height={'h-6'} variant={'chevronright'} strokeColor='#1F2A37' />
+
+                }
+            </span>
+        </button>
+    );
+    return (
+        <div>
+               <div className="flex">
+                    {sliderControl(true)}
+                    {sliderControl()}
+                </div>
+            <div className=" justify-center select-none  items-center">
+             
+                <div className="">
+                    <div className="snap-x w-1/2 inline-flex select-none overflow-x-hidden scrollbar-hide">
+
+                        {props.cards.map((item, i) => (
+                            <div className="snap-center mx-5 shrink-0" key={i} ref={refs[i]}>
+                                <div className="w-full select-none rounded-3xl object-contain">
+                                    {React.createElement(props.component, item)}
+                                </div>
+
+                            </div>
+                        ))}
+                        
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};

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

@@ -0,0 +1,2 @@
+export {default as Carousel} from './carousel';
+export {default as CarouselCard} from './carouselCard';

package/src/HDS/components/Checkbox/checkbox.js

@@ -0,0 +1,73 @@
+import React from 'react';
+import { Icon } from "../common-components/Icon"
+export default function Checkbox(props) {
+  const {
+    disabled,
+    CHECKBOX_ARR
+  } = props;
+  return (
+    <fieldset>
+      <legend className="sr-only">Notifications</legend>
+      <div className="space-y-5">
+        {CHECKBOX_ARR.map((value) => (
+          <div className="relative flex items-start">
+            <div className="flex h-6 items-center">
+              <input
+                id="comments"
+                aria-describedby="comments-description"
+                name="comments"
+                type="checkbox"
+                disabled={disabled}
+                className="h-4 w-4 rounded-full border-neutral-200 
+                  focus:ring-blue-100
+                  focus:ring-offset-0
+                  focus:ring-0
+                  focus:border
+                  focus:bg-neutral-0
+                  focus:border-neutral-300
+                  focus:shadow-[0px_0px_0px_4px_#F0F4FF]
+                  focus:outline-none
+                  hover:bg-blue-200
+                  hover:border
+                  hover:border-blue-600
+                  bg-checkbox
+                  checked:hover:bg-blue-200
+                  checked:border-blue-600
+                  checked:bg-blue-100
+                  checked:focus:border
+                  checked:focus:border-blue-600
+                  checked:focus:bg-blue-100
+                  checked:hover:border
+                  checked:hover:border-blue-600
+                  checked:focus:shadow-[0px_0px_0px_4px_#F0F4FF]
+                  disabled:bg-neutral-100
+                  disabled:border
+                  disabled:border-neutral-300
+                
+                  "
+               
+                  
+              />
+            </div>
+            <div className="ml-3 text-sm leading-6">
+              <label htmlFor="comments" className="text-neutral-800">
+                {value.label}
+              </label>
+              <p id="comments-description" className="text-neutral-600">
+                {value.description}
+              </p>
+            </div>
+          </div>
+        ))}
+      </div>
+      <style>
+      {`
+        .bg-checkbox:checked {
+          background-image: url("data:image/svg+xml,%3csvg viewBox=%270 0 16 16%27 fill=%27blue%27 xmlns=%27http://www.w3.org/2000/svg%27%3e%3cpath d=%27M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z%27/%3e%3c/svg%3e")
+          
+        }
+        `}
+      </style>
+    </fieldset>
+  );
+}

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

@@ -0,0 +1 @@
+export {default as Checkbox} from './checkbox'

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

@@ -0,0 +1,92 @@
+import React from 'react';
+import { useState } from 'react';
+import { Dialog } from '@headlessui/react';
+import { Icon } from '../common-components/Icon';
+import { Typography } from '../../foundation/Typography'
+
+export default function CustomHeader(props) {
+  const {
+    label,
+    childArray,
+  } = props
+
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+  return (
+    <header className="bg-white">
+      <nav className="mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8" aria-label="Global">
+        <a href="#" className="-m-1.5 p-1.5 flex">
+          <Icon variant={'HasuraBlueLogo'} strokeColor={'#1EA7FD'} />
+          <Typography className='ml-1.5' textStyle='h4'>{label}</Typography>
+        </a>
+        <div className="flex lg:hidden">
+          <button
+            type="button"
+            className="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700"
+            onClick={() => setMobileMenuOpen(true)}
+          >
+            <span className="sr-only">Open main menu</span>
+
+            <Icon height={'h-6'} variant={'searchsm'} strokeColor={'#3970FD'} />
+          </button>
+        </div>
+        <div className="hidden lg:flex lg:gap-x-12">
+          {childArray.map((item) => (
+            <a key={item.name} href={item.href} >
+              <Typography className='ml-1.5' textStyle='body3'>{item.name}</Typography>
+            </a>
+          ))}
+          <a href="#" className="text-sm font-semibold leading-6 text-gray-900">
+            Log in <span aria-hidden="true">&rarr;</span>
+          </a>
+        </div>
+      </nav>
+      <Dialog as="div" className="lg:hidden" open={mobileMenuOpen} onClose={setMobileMenuOpen}>
+        <div className="fixed inset-0 z-10" />
+        <Dialog.Panel className="fixed inset-y-0 right-0 z-10 w-full overflow-y-auto bg-white px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
+          <div className="flex items-center justify-between">
+            {/* <a href="#" className="-m-1.5 p-1.5">
+              <span className="sr-only">Your Company</span>
+              <img
+                className="h-8 w-auto"
+                src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600"
+                alt=""
+              />
+            </a> */}
+            <button
+              type="button"
+              className="-m-2.5 rounded-md p-2.5 text-gray-700"
+              onClick={() => setMobileMenuOpen(false)}
+            >
+              <span className="sr-only">Close menu</span>
+
+              <Icon height={'h-6'} variant={'home03'} strokeColor={'#3970FD'} />
+            </button>
+          </div>
+          <div className="mt-6 flow-root">
+            <div className="-my-6 divide-y divide-gray-500/10">
+              <div className="space-y-2 py-6">
+                {childArray.map((item) => (
+                  <a
+                    key={item.name}
+                    href={item.href}
+                    className="-mx-3 block rounded-lg py-2 px-3 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
+                  >
+                    {item.name}
+                  </a>
+                ))}
+              </div>
+              <div className="py-6">
+                <a
+                  href="#"
+                  className="-mx-3 block rounded-lg py-2.5 px-3 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
+                >
+                  Log in
+                </a>
+              </div>
+            </div>
+          </div>
+        </Dialog.Panel>
+      </Dialog>
+    </header>
+  )
+}

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

@@ -0,0 +1,2 @@
+export {default as V3Header} from './v3Header';
+export {default as CustomHeader} from './customHeader';