hds-web 1.33.2 → 1.33.4

package/src/HDS/components/Footers/v3Footer.js

@@ -0,0 +1,322 @@
+import React, { useState, useEffect } from 'react';
+import { Typography } from '../../foundation/Typography';
+
+const LinkedIn = () => (
+  <svg width="26" height="32" viewBox="0 0 26 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M7.31687 9.12914C7.31687 10.1979 6.47716 11.0376 5.40844 11.0376C4.33971 11.0376 3.5 10.1979 3.5 9.12914C3.5 8.06042 4.33971 7.2207 5.40844 7.2207C6.47716 7.2207 7.31687 8.06042 7.31687 9.12914ZM7.31687 12.5643H3.5V24.7783H7.31687V12.5643ZM13.4239 12.5643H9.607V24.7783H13.4239V18.366C13.4239 14.7781 18.0041 14.4728 18.0041 18.366V24.7783H21.821V17.0682C21.821 11.0376 15.027 11.2666 13.4239 14.2438V12.5643Z" />
+  </svg>
+)
+
+const Youtude = () => (
+  <svg width="26" height="32" viewBox="0 0 26 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M21.087 8.93655L21.087 8.93659L21.1002 8.93761C21.9378 9.00203 22.3817 9.16101 22.6263 9.30672C22.827 9.42628 23.0039 9.59975 23.1728 9.98218C23.3636 10.4144 23.5265 11.0801 23.6296 12.1242C23.7315 13.1571 23.7646 14.4356 23.7646 16.0392C23.7646 17.6426 23.7315 18.9284 23.6294 19.9704C23.5261 21.0243 23.3626 21.7015 23.17 22.1417C22.9987 22.5332 22.8229 22.7001 22.6368 22.8096C22.4079 22.9441 21.9795 23.0951 21.1534 23.1375L21.1534 23.1374L21.1445 23.1379C17.4729 23.3419 9.22945 23.3423 5.5387 23.1392C4.71481 23.0738 4.27627 22.9162 4.03377 22.7718C3.8331 22.6522 3.65613 22.4787 3.4873 22.0963C3.29651 21.6641 3.13358 20.9984 3.03051 19.9542C2.92855 18.9213 2.8955 17.6429 2.8955 16.0392C2.8955 14.4356 2.92855 13.1571 3.03051 12.1242C3.13358 11.0801 3.29651 10.4144 3.4873 9.98219C3.65613 9.59975 3.8331 9.42628 4.03377 9.30672C4.27834 9.16101 4.7223 9.00203 5.55985 8.93761L5.55985 8.93765L5.5731 8.93655C9.21419 8.63312 17.4459 8.63312 21.087 8.93655ZM0.808594 16.0392C0.808594 22.5087 1.33032 24.9086 5.39979 25.2216C9.15622 25.4303 17.5039 25.4303 21.2603 25.2216C25.3298 25.0129 25.8515 22.5087 25.8515 16.0392C25.8515 9.56983 25.3298 7.16988 21.2603 6.85685C17.5039 6.54381 9.15622 6.54381 5.39979 6.85685C1.33032 7.16988 0.808594 9.56983 0.808594 16.0392ZM11.71 19.4583C11.0162 19.8052 10.1999 19.3006 10.1999 18.525V13.554C10.1999 12.7783 11.0162 12.2738 11.71 12.6207L16.6809 15.1062C17.45 15.4907 17.45 16.5882 16.6809 16.9728L11.71 19.4583Z" />
+  </svg>
+)
+
+const Facebook = () => (
+  <svg width="26" height="32" viewBox="0 0 26 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M10.755 13.0059H8.50977V15.9995H10.755V24.9805H14.4971V15.9995H17.1914L17.4907 13.0059H14.4971V11.7336C14.4971 11.06 14.6468 10.7606 15.3203 10.7606H17.4907V7.01855H14.6468C11.9525 7.01855 10.755 8.21602 10.755 10.4613V13.0059Z" />
+  </svg>
+)
+
+const Twitter = () => (
+  <svg className="w-[21px] h-5" width="1200" height="1227" viewBox="0 0 1200 1227" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z" fill="white"/>
+  </svg>
+)
+
+const Instagram = () => (
+  <svg width="26" height="32" viewBox="0 0 26 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M13.3394 7.2359C16.2009 7.2359 16.5586 7.2359 17.7212 7.32532C20.6722 7.41475 22.0135 8.84554 22.103 11.7071C22.1924 12.8696 22.1924 13.1379 22.1924 15.9995C22.1924 18.8611 22.1924 19.2188 22.103 20.2919C22.0135 23.1535 20.5828 24.5843 17.7212 24.6737C16.5586 24.7631 16.2904 24.7631 13.3394 24.7631C10.4778 24.7631 10.1201 24.7631 9.04697 24.6737C6.09596 24.5843 4.75459 23.1535 4.66517 20.2919C4.57574 19.1294 4.57574 18.8611 4.57574 15.9995C4.57574 13.1379 4.57574 12.7802 4.66517 11.7071C4.75459 8.84554 6.18538 7.41475 9.04697 7.32532C10.1201 7.2359 10.4778 7.2359 13.3394 7.2359ZM13.3394 5.26855C10.3883 5.26855 10.0306 5.26855 8.95755 5.35798C5.02286 5.53683 2.87667 7.68302 2.69782 11.6177C2.6084 12.6908 2.6084 13.0485 2.6084 15.9995C2.6084 18.9505 2.6084 19.3082 2.69782 20.3813C2.87667 24.316 5.02286 26.4622 8.95755 26.641C10.0306 26.7305 10.3883 26.7305 13.3394 26.7305C16.2904 26.7305 16.6481 26.7305 17.7212 26.641C21.6558 26.4622 23.802 24.316 23.9809 20.3813C24.0703 19.3082 24.0703 18.9505 24.0703 15.9995C24.0703 13.0485 24.0703 12.6908 23.9809 11.6177C23.802 7.68302 21.6558 5.53683 17.7212 5.35798C16.6481 5.26855 16.2904 5.26855 13.3394 5.26855ZM13.3394 10.4552C10.2989 10.4552 7.79503 12.9591 7.79503 15.9995C7.79503 19.0399 10.2989 21.5438 13.3394 21.5438C16.3798 21.5438 18.8837 19.0399 18.8837 15.9995C18.8837 12.9591 16.3798 10.4552 13.3394 10.4552ZM13.3394 19.5765C11.372 19.5765 9.76237 17.9669 9.76237 15.9995C9.76237 14.0322 11.372 12.4225 13.3394 12.4225C15.3067 12.4225 16.9163 14.0322 16.9163 15.9995C16.9163 17.9669 15.3067 19.5765 13.3394 19.5765ZM19.0625 9.02439C18.3471 9.02439 17.8106 9.56094 17.8106 10.2763C17.8106 10.9917 18.3471 11.5283 19.0625 11.5283C19.7779 11.5283 20.3145 10.9917 20.3145 10.2763C20.3145 9.56094 19.7779 9.02439 19.0625 9.02439Z" />
+  </svg>
+)
+
+const socialShare = [
+  {
+    icon: <LinkedIn />,
+    linkUrl: 'https://www.linkedin.com/company/hasura/',
+  },
+  {
+    icon: <Youtude />,
+    linkUrl: 'https://www.youtube.com/channel/UCZo1ciR8pZvdD3Wxp9aSNhQ',
+  },
+  {
+    icon: <Facebook />,
+    linkUrl: 'https://www.facebook.com/HasuraHQ',
+  },
+  {
+    icon: <Twitter />,
+    linkUrl: 'https://twitter.com/hasurahq',
+    className:'py-1'
+  },
+  {
+    icon: <Instagram />,
+    linkUrl: 'https://www.instagram.com/hasurahq/?hl=en',
+  },
+]
+
+export default function V3Footer(props) {
+  const [isError, setIsError] = useState(false);
+  const [isItems, setIsItems] = useState(null);
+  useEffect(() => {
+    fetch("https://status.hasura.io/api/v2/status.json")
+      .then(res => res.json())
+      .then(
+        result => {
+          setIsItems(result);
+          setIsError(false);
+        },
+        error => {
+          setIsError(true);
+        }
+      );
+  }, []);
+  return (
+    <div>
+      <div className='db-s:flex justify-between gap-10 db-s:gap-20 db:gap-40'>
+        <div className='pb-10 db-s:pb-0 px-4 tb:px-0'>
+          <a href={props.brandLink} className=''>
+            <img className="max-w-[125px]" src={props.brandUrl} alt={props.brandAlt} />
+          </a>
+        </div>
+        <div className='flex justify-between px-4 tb:px-0 tb:justify-start tb-l:justify-between flex-1 flex-wrap gap-y-10 tb:gap-y-16'>
+          {
+            props.footerLinks.map((footerLink, index) => (
+              <div key={index} className='min-w-[130px] db-s:min-w-fit'>
+                <Typography textStyle='body3c-semi-bold' className='text-neutral-600'>{footerLink.title}</Typography>
+                {
+                  footerLink.links.map((link, subIndex) => (
+                    <a href={link.linkUrl}>
+                      <Typography textStyle='body3' className='text-neutral-600 mt-2 tb:mt-4 hover:text-neutral-1000'>{link.linkText}</Typography>
+                    </a>
+                  ))
+                }
+              </div>
+            ))
+          }
+        </div>
+      </div>
+      <div className='flex flex-col tb-m:flex-row items-center justify-between tb:pt-24'>
+        <div className='flex items-center justify-center pt-10 tb-m:pt-0 pb-4 tb-m:pb-0 tb-m:justify-start'>
+          {
+            socialShare.map((icon, index) => (
+              <a href={icon.linkUrl} className={'mx-2 tb-l:mx-4 first:ml-0 last:mr-0 [&>svg>path]:fill-neutral-400 [&>svg>path]:hover:fill-neutral-600 ' + ((icon.className) ? icon.className : '')}>
+                {icon.icon}
+              </a>
+            ))
+          }
+        </div>
+        {isItems && !isError && (
+          <>
+            <a href='https://status.hasura.io/' className=''>
+              <div className=' bg-neutral-0 rounded-full shadow hover:shadow-lg transition-all duration-300 px-4 py-2 inline-flex justify-center items-center'>
+                <div className='w-4 h-4 bg-green-400 rounded-full mr-2'></div>
+                <Typography textStyle='body3' className='text-neutral-1000'>{isItems?.status.description}</Typography>
+              </div>
+            </a>
+          </>
+        )}
+        <div>
+          <Typography textStyle='body3c' className='text-neutral-600 pt-4 tb-m:pt-0'>© {new Date().getFullYear()} Hasura Inc. All rights reserved</Typography>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+
+V3Footer.defaultProps = {
+  brandUrl: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1686659126/website%20v3/hasura-primary_y9cdnn.svg',
+  brandAlt: 'Hasura',
+  brandLink: 'https://hasura.io/',
+  footerLinks: [
+    {
+      title: 'Platform',
+      links: [
+        {
+          linkText: 'Hasura CE Edition',
+          linkUrl: 'https://hasura.io/opensource/',
+        },
+        {
+          linkText: 'Hasura EE',
+          linkUrl: 'https://hasura.io/enterprise/',
+        },
+        {
+          linkText: 'Hasura Cloud',
+          linkUrl: 'https://hasura.io/cloud/',
+        },
+        {
+          linkText: 'Pricing',
+          linkUrl: 'https://hasura.io/pricing/',
+        },
+      ]
+    },
+    {
+      title: 'Capabilities',
+      links: [
+        {
+          linkText: 'Instant API',
+          linkUrl: 'https://hasura.io/product/instant-api/',
+        },
+        {
+          linkText: 'Authorization',
+          linkUrl: 'https://hasura.io/product/authorization/',
+        },
+        {
+          linkText: 'Performance',
+          linkUrl: 'https://hasura.io/product/performance/',
+        },
+        {
+          linkText: 'Federation',
+          linkUrl: 'https://hasura.io/products/federation',
+        },
+        {
+          linkText: 'API Security',
+          linkUrl: 'https://hasura.io/product/api-security/',
+        },
+        {
+          linkText: 'Observability',
+          linkUrl: 'https://hasura.io/product/observability/',
+        },
+      ]
+    },
+    {
+      title: 'Build',
+      links: [
+        {
+          linkText: 'Docs',
+          linkUrl: 'https://hasura.io/docs/latest/index/',
+        },
+        {
+          linkText: 'Hasura Hub',
+          linkUrl: 'https://hasura.io/hub/',
+        },
+        // {
+        //   linkText: 'GraphQL Hub',
+        //   linkUrl: '#',
+        // },
+        // {
+        //   linkText: 'Guides',
+        //   linkUrl: '#',
+        // },
+        {
+          linkText: 'Changelog',
+          linkUrl: 'https://github.com/hasura/graphql-engine/releases/',
+        },
+        {
+          linkText: 'GraphiQL',
+          linkUrl: 'https://cloud.hasura.io/public/graphiql',
+        },
+      ]
+    },
+    {
+      title: 'Learn',
+      links: [
+        {
+          linkText: 'Blog',
+          linkUrl: 'https://hasura.io/blog/',
+        },
+        // {
+        //   linkText: 'Tech Talks',
+        //   linkUrl: '#',
+        // },
+        {
+          linkText: 'Tutorials',
+          linkUrl: 'https://hasura.io/learn/',
+        },
+        {
+          linkText: 'Events',
+          linkUrl: 'https://hasura.io/events/',
+        },
+      ]
+    },
+    {
+      title: 'Company',
+      links: [
+        {
+          linkText: 'Our Story',
+          linkUrl: 'https://hasura.io/about/',
+        },
+        // {
+        //   linkText: 'Newsroom',
+        //   linkUrl: '#',
+        // },
+        {
+          linkText: 'Careers',
+          linkUrl: 'https://hasura.io/careers/',
+        },
+        // {
+        //   linkText: 'Partners',
+        //   linkUrl: '#',
+        // },
+         {
+          linkText: 'Partners',
+          linkUrl: 'https://hasura.io/partners/',
+        },
+        {
+          linkText: 'Legal',
+          linkUrl: 'https://hasura.io/legal/',
+        },
+         {
+          linkText: 'Privacy Policy',
+          linkUrl: 'https://hasura.io/legal/hasura-privacy-policy/',
+        },
+        // {
+        //   linkText: 'Brand',
+        //   linkUrl: 'https://hasura.io/brand/',
+        // },
+
+      ]
+    },
+    {
+      title: 'Connect',
+      links: [
+        {
+          linkText: 'Community',
+          linkUrl: 'https://hasura.io/community/',
+        },
+        {
+          linkText: 'Discord',
+          linkUrl: 'https://discord.com/invite/hasura',
+        },
+        // {
+        //   linkText: 'Forum',
+        //   linkUrl: '#',
+        // },
+        // {
+        //   linkText: 'Meetup',
+        //   linkUrl: '#',
+        // },
+        // {
+        //   linkText: 'Support',
+        //   linkUrl: '#',
+        // },
+      ]
+    },
+    {
+      title: 'Community',
+      links: [
+        {
+          linkText: 'Docs',
+          linkUrl: 'https://hasura.io/docs/latest/index/',
+        },
+        {
+          linkText: 'Help',
+          linkUrl: 'https://hasura.io/help/',
+        },
+        {
+          linkText: 'Github',
+          linkUrl: 'https://github.com/hasura',
+        },
+        {
+          linkText: "Swag Store",
+          linkUrl: "https://store.hasura.io/",
+        },
+        {
+          linkText: 'Contact Sales',
+          linkUrl: 'https://hasura.io/contact-us/',
+        },
+      ]
+    },
+  ],
+}

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

@@ -0,0 +1,101 @@
+import React from 'react';
+import { useState } from 'react';
+import { Dialog } from '@headlessui/react';
+import { Icon } from '../common-components/Icon';
+import { Typography } from '../../foundation/Typography';
+import {HDSButton} from '../Buttons'
+
+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={'hasuraPrimary'} strokeColor={''} />
+        </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={'menu05'} 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>
+      <div className='transition-all '>
+        <Dialog as="div" className="lg:hidden" open={mobileMenuOpen} onClose={setMobileMenuOpen}>
+          <div className="fixed inset-0 z-10" />
+          <Dialog.Panel className="fixed border rounded-l-3xl inset-y-0 bg-neutral-0 max-w-min min-w-fit right-0 z-10 w-full overflow-y-auto bg-white px-6 py-6 sm:ring-1 sm:ring-gray-900/10">
+            <div className="flex items-center justify-end">
+              {/* <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={'xclose'} strokeColor={'#3970FD'} />
+              </button>
+            </div>
+            <div className="mt-6 flow-root">
+              <Typography textStyle='h6' className='text-neutral-400'>MENU</Typography>
+              <div className=" flex-col divide-y divide-blue-600/10">
+                <div className="space-y-2 py-6 pr-48">
+                  {childArray.map((item) => (
+                    <a
+                      key={item.name}
+                      href={item.href}
+                      className="-mx-3 rounded-lg flex gap-5 py-2 px-3 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
+                    >
+                      <Icon height={'h-6'} variant={'home03'} strokeColor={'#6C737F'} />
+                      {item.name}
+                    </a>
+                  ))}
+                </div>
+                <div className="py-6">
+                  <HDSButton
+                    leftIconVariant = 'none'
+                    rightIconVariant = 'none'
+                    label = 'Log In'
+                    state = 'default'
+                    size = 'sm'
+                    rightAnimatedArrow = 'true'
+                    rightAnimatedArrowColor = '#ffffff'
+                    animatedHoverStroke = 'group-hover:stroke-neutral-0'
+                   />  
+                </div>
+              </div>
+            </div>
+          </Dialog.Panel>
+        </Dialog>
+      </div>
+
+    </header>
+  )
+}

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

@@ -0,0 +1,12 @@
+import GitHubButton from "react-github-btn";
+
+export const GithubWidget = () => (
+    <GitHubButton
+        href="https://github.com/hasura/graphql-engine"
+        data-size="large"
+        data-show-count="true"
+        aria-label="Star @hasura on GitHub"
+    >
+        Star
+    </GitHubButton>
+);

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

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