hds-web 1.33.2 → 1.33.3

package/src/HDS/components/Banners/banners.js

@@ -0,0 +1,185 @@
+import React from 'react';
+import {Typography} from '../../foundation/Typography';
+import { AnnouncementSM } from '../../HDS/components/Cards/Announcement';
+import { AnnouncementMd } from '../../HDS/components/Cards/Announcement';
+import { HDSButton } from "../../Buttons";
+import { useState } from "react";
+
+const Triangle = () => (
+  <svg
+    className="z-10 stroke-blue-500 fill-blue-500"
+    width="18"
+    height="22"
+    viewBox="0 0 18 22"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M0.873058 10.959L0.873057 0.286119L17.9188 10.959L0.873064 21.6318L0.873058 10.959Z"
+      fill="#3970FD"
+    />
+  </svg>
+);
+export default function Banner(props) {
+  const data= props;
+  const HASURADARK = ['https://hasura.io/', 'https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1701437491/Hasura_Primary_27f9db919f.png'];
+  const HASURALIGHT= ['https://hasura.io/', 'https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1695988402/hasura_logo_dark_j8eavh_1e11221ebe.png'];
+
+  const HASURALINK = data.isDarkMode ? HASURADARK : HASURALIGHT;
+
+  const logos = (logoURL, LogoAlt) => (
+    <div
+      className="flex divide-x divide-neutral-0 items-center gap-[12px] pr-[74px] h-full">
+      <a href={HASURALINK[0]}>
+        <div
+          className=" tb:max-h-[17px]">
+          <img
+            className=" w-full h-full object-contain"
+            src={HASURALINK[1]}
+            alt="hasuraLogo"
+          />
+        </div>
+      </a>
+      <div
+        className="tb:max-h-[18px] pl-[11px] border-l border-neutral-0">
+        <img
+          className=" w-full h-full object-contain"
+          src={logoURL}
+          alt={LogoAlt}
+        />
+      </div>
+
+    </div>
+  );
+  const [showVideo, setShowVideo] = useState(false);
+  const BUTTON_DATA = data.button;
+  const logoImgURL = data.bannerLogoImg?.data?.attributes?.url;
+  const logoImgALT = data?.bannerLogoImg?.data?.attributes?.alternativeText;
+  const bgImage = data.bannerIllustrationBgImg?.data?.attributes?.url;
+  const bgImageALT = data.bannerIllustrationBgImg?.data?.attributes?.alternativeText;
+  const bannerVideo = data.bannerVideo?.data?.attributes?.url;
+  const videoPoster = data.videoPosterImg?.data?.attributes?.url;
+  const videoPosterALT = data.videoPosterImg?.data?.attributes?.alternativeText;
+  const Banner = () => (
+    <div className={`pl-[38px] py-8 rounded-3xl`} style={{ backgroundColor: data?.bgColor }}>
+      {logoImgURL && <div>
+        {logos(logoImgURL, logoImgALT ?? 'bannerLogoAlt')}
+      </div>}
+      <div className="pt-4">
+        <img src={bgImage} alt={bgImageALT} className="" />
+      </div>
+      {titleCTA()}
+
+    </div>
+  )
+  const titleCTA = () => (
+    <div className="pr-8 overflow-clip">
+      <Typography
+        as="p"
+        textStyle="h4"
+        className={data.isDarkMode ? 'text-neutral-0' : 'text-neutral-1000'}
+      >
+        {data.bannerTitle}
+      </Typography>
+      {BUTTON_DATA && BUTTON_DATA.url &&
+        <a href={BUTTON_DATA.url} className="flex">
+          <HDSButton
+            label={BUTTON_DATA?.text}
+            type="secondaryLink"
+            leftIconVariant="none"
+            rightIconVariant="none"
+            state="default"
+            size="md"
+            rightAnimatedArrow={true}
+            btnTextHoverClass={'text-blue-600'}
+            animatedHoverStroke={data.isDarkMode ? 'group-hover:stroke-neutral-0' : 'group-hover:stroke-blue-600'}
+            rightAnimatedArrowColor={data.isDarkMode ? '#ffff' : '#3970FD'}
+            className="mt-4"
+            btnTextColorClass={data.isDarkMode ? 'text-neutral-0' : 'text-blue-600'}
+          />
+        </a>}
+    </div>
+  )
+  const videoBanner = () => (
+    <div className="bg-neutral-0 p-4 border rounded-3xl border-neutral-200">
+      <div className="relative self-end rounded-2xl">
+        {showVideo ? (
+          <video
+            id="hero_vid"
+            controls
+            autoPlay
+            muted
+            playsInline
+            poster={videoPoster}
+            width="500"
+            height="500"
+            className="tb:w-full w-full rounded-2xl"
+            src={bannerVideo}
+          ></video>
+        ) : (
+          <div className="relative">
+            {videoPoster && (
+              <img src={videoPoster} alt={videoPosterALT} />
+            )}
+            {bannerVideo && (
+              <div
+                className="w-14 h-14 cursor-pointer video-play-btn before:bg-neutral-0 after:bg-neutral-0 rounded-full flex items-center justify-center bg-neutral-0 absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 shadow-neutral-1000 shadow-2xl"
+                onClick={() => setShowVideo(true)}
+              >
+                <Triangle />
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+      <div className="p-[22px] pt-8">
+
+        {titleCTA()}
+      </div>
+
+    </div>
+  )
+
+  if (props.bannerStyle === 'card') {
+    if (bannerVideo && videoPoster && videoPosterALT) {
+      return videoBanner();
+    }
+    if (bgImage && bgImageALT) {
+      return Banner();
+    }
+    return (
+      <div className="p-4 border border-neutral-200 rounded-3xl">
+        {titleCTA()}
+      </div>
+    )
+  }
+
+  if (props.bannerStyle === 'AnnouncementSM') {
+    return (
+
+      <AnnouncementSM
+        // bgColorClass="bg-neutral-0"
+        linkText={data.bannerTitle}
+        linkTextColorClass={data.isDarkMode ? 'text-neutral-0' : 'text-neutral-1000'}
+        linkUrl="#"
+        tagColor="purple"
+        tagText="Just Released"
+      />
+    )
+  }
+  if (props.bannerStyle === 'AnnouncementMd') {
+    return (
+
+      <AnnouncementMd
+        //bgColorClass="bg-neutral-0"
+        iconBgColor="bg-blue-200"
+        iconVariant="cube02"
+        linkText={data.bannerTitle}
+        linkTextColorClass={data.isDarkMode ? 'text-neutral-0' : 'text-neutral-1000'}
+        linkUrl="#"
+      />
+    )
+  }
+
+  return <></>
+}

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

@@ -0,0 +1 @@
+export {default as Banner} from './banners'

package/src/HDS/components/Breadcrumbs/breadCrumbs.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import { Icon } from "../common-components/Icon"
+import PropTypes from 'prop-types';
+// const pages = [
+//   { name: 'Events', href: '#', current: false },
+//   { name: '', href: '#', current: false },
+//   { name: 'Hasura Con 23', href: '#', current: true },
+// ]
+
+const BUTTON_CLASSES = {
+  'A': 'text-blue-600',
+  'B': 'bg-blue-100 text-blue-600 rounded-full',
+  'C': 'bg-neutral-100 text-neutral-800 rounded-full'
+}
+
+export default function Breadcrumbs(props) {
+  const pages = Array.isArray(props.pages) ? props.pages : [];
+  const {
+    dividerIconVariant,
+    buttonVariant
+  } = props
+
+  return (
+    <nav className="flex" aria-label="Breadcrumb">
+      <ol role="list" className="flex items-center space-x-4">
+        <li>
+          <div>
+            <a href="#" className="text-pink-400 hover:text-gray-500">
+
+              <Icon height='h-5' variant={'homeline'} strokeColor={'#4D5761'} />
+              <span className="sr-only">Home</span>
+            </a>
+          </div>
+        </li>
+        {pages.map((page) => (
+          <li key={page.name}>
+            <div className="flex items-center">
+            <div className='-ml-0.5 mr-2 h-4 w-4'>
+            <Icon variant={dividerIconVariant} strokeColor={`#4D5761`} />
+          </div>
+              <a
+                href={page.href}
+                className={`${BUTTON_CLASSES[`${buttonVariant}`]} ml-4 py-1 px-2 text-sm-medium hover:text-gray-700`}
+                aria-current={page.current ? 'page' : undefined}
+              >
+                {page.name}
+              </a>
+            </div>
+          </li>
+        ))}
+      </ol>
+    </nav>
+  )
+}
+
+Breadcrumbs.propTypes = {
+  dividerIconVariant: PropTypes.string,
+
+};
+
+Breadcrumbs.defaultProps = {
+  dividerIconVariant: 'chevronright',
+};

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

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

package/src/HDS/components/Buttons/button.js

@@ -0,0 +1,239 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Icon } from '../common-components/Icon';
+import { HDSColor } from '../../foundation/ColorPalette';
+
+const ANIMATED_ARR_CLASSES = {
+  'icon1':{
+    'sm':'h-5 w-5 ',
+    'md': 'h-5 w-5',
+    'lg': 'h-6 w-6'
+  },
+  'icon2':{
+    'sm':'h-5 w-5 -mt-5',
+    'md': 'h-5 w-5 -mt-5',
+    'lg': 'h-6 w-6 -mt-6'
+  },
+
+}
+
+const Buttonclasses = {
+  'primary': {
+    'default': {
+      'base': 'db:w-fit tb:w-fit w-full justify-center justify-center bg-blue-500 text-neutral-0',
+      'hover': 'hover:bg-blue-700 hover:text-neutral-0 hover:shadow-md hover:shadow hover:transition-all hover:ease-out hover:duration-300',
+      'focus': 'focus:bg-blue-600 focus:shadow-[0_0px_0px_4px_#DFE8FF] focus:text-neutral-0 focus:outline-none active:bg-blue-600 active:text-neutral-0 active:outline-none',
+
+    },
+    'disabled': 'bg-neutral-200 text-neutral-400',
+  },
+  'tonal': {
+    'default': {
+      'base': 'db:w-fit tb:w-fit w-full justify-center bg-blue-200 text-blue-600',
+      'hover': 'hover:bg-blue-700 hover:text-neutral-0 hover:shadow-md hover:shadow hover:transition-all hover:ease-out hover:duration-300',
+      'focus': 'focus:bg-blue-100 focus:text-blue-600 focus:shadow-[0px_0px_0px_4px_#DFE8FF] focus:outline-none',
+    },
+    'disabled': 'bg-neutral-200 text-neutral-400',
+  },
+  'secondary': {
+    'default': {
+      'base': 'db:w-fit tb:w-fit w-full justify-center border-2 border-blue-500 text-blue-500',
+      'hover': 'hover:text-neutral-0 hover:bg-blue-700 hover:border-2 hover:border-blue-700 hover:shadow-md hover:shadow hover:transition-all hover:ease-out hover:duration-200 ',
+      'focus': 'focus:bg-blue-200 focus:text-blue-500 focus:border-2 border-blue-500 focus:shadow-[0px_0px_0px_4px_#DFE8FF] focus:outline-none focus:text-blue-500',
+    },
+    'disabled': 'bg-neutral-200 text-neutral-400',
+  },
+  'secondaryWhite': {
+    'default': {
+      'base': 'db:w-fit tb:w-fit w-full justify-center border-2 border-neutral-0 text-neutral-0 ',
+
+      'hover': 'hover:text-neutral-0 hover:border-opacity-0 hover:shadow-md hover:shadow hover:transition-all hover:ease-out hover:duration-300',
+      
+      'focus': 'focus:text-neutrak-0 focus:border-2 border-neutral-0 focus:outline-none focus:text-neutral-0',
+    },
+    'disabled': 'bg-neutral-200 text-neutral-400',
+  },
+  
+  'ghost': {
+    'default': {
+      'base': 'db:w-fit tb:w-fit w-full  justify-center text-neutral-0',
+      'hover': ' ',
+      'focus': 'focus:outline-none',
+    },
+    'disabled': ' bg-neutral-200 text-neutral-400',
+  },
+  'ghostBlue': {
+    'default': {
+      'base': 'db:w-fit tb:w-fit w-full  justify-center border-none hover:border-opacity-100 hover:border-2 rounded-full text-blue-500',
+      'hover': 'hover:bg-blue-700 hover:text-neutral-0 hover:shadow-md hover:shadow hover:transition-all hover:ease-out hover:duration-300',
+      'focus': 'focus:outline-none',
+    },
+    'disabled': ' bg-neutral-200 text-neutral-400',
+  },
+  'primaryLink': {
+    'default': {
+      'base': 'db:w-fit tb:w-fit w-full justify-center ',
+      'hover': '',
+      'focus': 'focus:shadow-[0px_0px_0px_4px_#DFE8FF] focus:outline-none focus:text-blue-600',
+    },
+    'disabled': 'text-neutral-300',
+  },
+  'secondaryLink': {
+    'default': {
+      'base': 'db:w-fit tb:w-fit w-full  justify-center ',
+      'hover': '',
+      'focus': 'focus:text-neutral-900 focus:outline-none focus:shadow-[0px_0px_0px_4px_#E5E7EB]',
+    },
+    'disabled': 'text-neutral-300',
+  },
+  'iconOnly': {
+    'default': {
+      'base': 'w-fit justify-center justify-center bg-blue-200 rounded-full p-1.5',
+
+      'hover': 'hover:bg-blue-600 hover:shadow-md hover:shadow hover:transition-all hover:ease-in-out hover:duration-300',
+
+      'focus': 'focus:bg-blue-600 focus:shadow-[0_0px_0px_4px_#DFE8FF] focus:text-neutral-0 focus:outline-none',
+    },
+    'disabled': 'bg-neutral-200 text-neutral-400',
+    'icon':{
+      'sm':'h-5 w-5 p-0',
+      'md': 'h-5 w-5 p-2.5',
+      'lg': 'h-6 w-6 p-3'
+    },
+  },
+  'buttonSizes' : {
+    'default': {
+      'sm': 'text-hds-d-body3c-medium py-1.5 pr-2.5 pl-4 rounded-full',
+      'md': 'text-hds-d-body3c-medium rounded-full py-2.5 pl-5 pr-3',
+      'lg': 'text-hds-d-body1c-medium rounded-full py-3 pl-6 pr-4'
+    },
+    'iconOnly': {
+      'sm': 'rounded-full',
+      'md': 'rounded-full p-2.5',
+      'lg': 'trounded-full p-3'
+    },
+    'links': {
+      'sm': 'text-hds-d-body3c-medium rounded-full',
+      'md': 'text-hds-d-body3c-medium rounded-full',
+      'lg': 'text-hds-d-body1c-medium rounded-full'
+    },
+  }
+}
+export default function Button(props) {
+  const {
+    btnTextColorClass,
+    btnTextHoverClass,
+    btnBgColorClass,
+    btnbgHoverClass,
+    rightIconVariant,
+    rightIconColor,
+    leftIconVariant,
+    leftIconColor,
+    type,
+    state,
+    size,
+    label,
+    rightAnimatedArrow,
+    rightAnimatedArrowColor,
+    animatedHoverStroke,
+    className,
+    ...rest // destructuring rest of the props
+  } = props
+
+  let defaultClasses = '';
+
+  if (state === 'default') {
+    const baseClasses = Buttonclasses[type][state]['base'];
+    const hoverClasses = Buttonclasses[type][state]['hover'];
+    const focusClasses = Buttonclasses[type][state]['focus'];
+    defaultClasses = `${baseClasses} ${hoverClasses} ${focusClasses}`;
+  } else if (state === 'disabled') {
+    defaultClasses = Buttonclasses[type][state];
+  }
+
+  let sizeType = 'default';
+  if(type==='iconOnly'){sizeType='iconOnly'}
+  if(type==='secondaryLink' || type==='primaryLink' ){sizeType='links'}
+
+
+  const buttonClasses = [
+    'inline-flex items-center whitespace-pre',
+    'rounded-full',
+    btnBgColorClass,
+    btnTextColorClass,
+    Buttonclasses['buttonSizes'][`${sizeType}`][`${size}`],
+    'group',
+    defaultClasses,
+    className,
+    HDSColor(btnTextHoverClass),
+    HDSColor(btnbgHoverClass)
+
+  ].join(' ');
+
+  return (
+    <div>
+      <button
+        type="button"
+        className={buttonClasses}
+        {...rest}
+      >
+        {leftIconVariant && leftIconVariant !== 'none' && type!='iconOnly' && (
+          <div className={`-ml-0.5 mr-2 ${ANIMATED_ARR_CLASSES['icon1'][`${size}`]} `}>
+            <Icon variant={leftIconVariant} strokeColor={leftIconColor} />
+          </div>
+        )}
+
+         {leftIconVariant && leftIconVariant !== 'none' && type=='iconOnly' && (
+          <div className={``}>
+            <Icon variant={leftIconVariant} height={`${ANIMATED_ARR_CLASSES['icon1'][`${size}`]} group-active:stroke-neutral-0 stroke-[1.5px] group-hover:transition-all group-hover:ease-in-out group-hover:duration-100 group-hover:stroke-neutral-0 group-focus:stroke-neutral-0`} strokeColor={leftIconColor} />
+          </div>
+        )}
+        {label}
+
+        {rightAnimatedArrow && rightAnimatedArrow !== 'none'  && type!=='iconOnly' && (
+          <div className={ `group-hover:transition-all ${animatedHoverStroke}`}>
+            <Icon className='z-10 stroke-2 group-hover:translate-x-[0.15rem] group-hover:transition-all group-hover:duration-300' height={`${ANIMATED_ARR_CLASSES['icon1'][`${size}`]} ${animatedHoverStroke}`} variant={'chevronright'} strokeColor={rightAnimatedArrowColor} />
+
+            <Icon className='invisible stroke-2 group-hover:transition-all group-hover:delay-100 group-hover:visible ' height={`${ANIMATED_ARR_CLASSES['icon2'][`${size}`]} ${animatedHoverStroke}`} variant='minus01' strokeColor={rightAnimatedArrowColor} />
+
+          </div>
+        )}
+
+        {rightIconVariant && rightIconVariant !== 'none'  && type!='iconOnly' && (
+           <div className='ml-1.5 h-4 w-4 '>
+           <Icon variant={rightIconVariant} strokeColor={rightIconColor} />
+         </div>
+        )}
+      </button>
+    </div>
+  );
+};
+
+Button.propTypes = {
+  size: PropTypes.oneOf(['sm', 'md', 'lg', 'xl', '2xl']),
+  label: PropTypes.string.isRequired,
+  type: PropTypes.string.isRequired,
+  state: PropTypes.oneOf(['default', 'disabled']),
+  leftIconVariant: PropTypes.string,
+  rightIconVariant: PropTypes.string,
+  animatedHoverStroke: PropTypes.string
+
+
+};
+
+Button.defaultProps = {
+  size: 'md',
+  type: 'primary',
+  leftIconVariant: 'none',
+  rightIconVariant: 'none',
+  rightIconColor: '#FFFFFF',
+  leftIconColor: '#FFFFFF',
+  state: 'default',
+  label: 'Button',
+  rightAnimatedArrow: 'true' ,
+  rightAnimatedArrowColor: '#FFFFFF',
+  animatedHoverStroke: 'group-hover:stroke-neutral-0',
+
+  btnTextHoverClass: 'hover:text-neutral-0'
+  
+};

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

@@ -0,0 +1,2 @@
+export {default as HDSButton} from './button';
+export { default as HDSButtonVariants } from './specialBtn';

package/src/HDS/components/Buttons/specialBtn.js

@@ -0,0 +1,38 @@
+import React from "react";
+import { HDSColor } from "../../foundation/ColorPalette";
+import { Typography } from "../../foundation/Typography";
+import { Icon } from "../common-components";
+
+export default function ButtonVariants(props) {
+    const {
+        variant,
+        label,
+        labelColor,
+        iconVariant,
+        iconStrokeClass,
+        onClick
+    } = props;
+    const addToCalendar = () => (
+        <div>
+            <button
+                onClick={onClick}
+                className=" border-2 border-blue-500 rounded-full hover:bg-blue-500 group">
+                <div className="flex py-2 pl-[18px] pr-3 items-center">
+                    <Typography textStyle='body3-medium' className={HDSColor(labelColor) + ' group-hover:text-neutral-0'}>
+                        {label}
+                    </Typography>
+                    <Icon variant={iconVariant} strokeClass={HDSColor(iconStrokeClass)} className='h-5 w-5 stroke-2 group-hover:stroke-neutral-0' />
+                </div>
+            </button>
+        </div>
+    )
+    return (
+        <>
+            {variant && variant === 'calendarButton' && 
+            <>
+                {addToCalendar()}
+            </>
+        }
+        </>
+    )
+}

package/src/HDS/components/Cards/Announcement/announcementMd.js

@@ -0,0 +1,88 @@
+import React, { useState, useEffect } from "react";
+import { Typography } from "../../../foundation/Typography";
+import { HDSColor } from "../../../foundation/ColorPalette";
+import { Icon } from '../../../components/common-components/Icon';
+
+const tagColorVariants = {
+  blue: 'bg-neutral-0 tb:bg-blue-500 text-blue-500 tb:text-neutral-0',
+  purple: 'bg-neutral-0 tb:bg-purple-500 text-purple-500 tb:text-neutral-0',
+  pink: 'bg-neutral-0 tb:bg-pink-500 text-pink-500 tb:text-neutral-0',
+  amber: 'bg-neutral-0 tb:bg-amber-500 text-amber-500 tb:text-neutral-0',
+  cyan: 'bg-neutral-0 tb:bg-cyan-500 text-cyan-500 tb:text-neutral-0',
+  green: 'bg-neutral-0 tb:bg-green-500 text-green-500 tb:text-neutral-0',
+}
+
+const isBrowser = typeof window !== "undefined";
+
+export default function AnnouncementMd(props) {
+  const [isBannerActive, toggleBanner] = useState(true);
+  const bgClass = props.bgColorClass ? HDSColor(props.bgColorClass) : 'bg-neutral-0';
+  const linkTextClass = props.linkTextColorClass ? HDSColor(props.linkTextColorClass) : 'text-neutral-600';
+  const tagClass = props.tagColor ? props.tagColor : 'purple';
+  const iconBgClass = props.iconBgColor ? HDSColor(props.iconBgColor) : 'bg-blue-200'
+
+  const [isConsentForm, setIsConsentForm] = useState(false);
+  const onCloseBanner = () => {
+    toggleBanner(false);
+    if (isBrowser) {
+      window.sessionStorage.setItem("announcementConsent", "true");
+    }
+  };
+
+  useEffect(() => {
+    if (isBrowser) {
+      if (
+        "sessionStorage" in window &&
+        window.sessionStorage &&
+        "getItem" in window.sessionStorage
+      ) {
+        const localSessionStorage = window.sessionStorage.getItem(
+          "announcementConsent"
+        );
+        if (localSessionStorage) {
+          setIsConsentForm(true);
+        }
+      }
+    }
+  }, []);
+
+  if (isBannerActive && !isConsentForm) {
+    return (
+      <div className="py-6">
+        <div className={`${bgClass} flex justify-between relative rounded-2xl tb:rounded-full shadow p-4 tb:justify-center tb:items-center`}>
+          <div className="tb:items-center flex tb:justify-center">
+            {
+              props.brandImg && (
+                <div className="tb:pb-0 tb:pl-14 pr-2">
+                  <img className="mt-[2px] tb:mt-0 min-h-[20px] min-w-[20px] max-w-[20px] max-h-[20px] tb:min-h-[32px] tb:min-w-[32px] tb:max-w-[32px] tb:max-h-[32px]" src={props.brandImg} alt={props.brandImgAlt} />
+                </div>
+              )
+            }
+            {
+              props.iconBgColor && (
+                <div className={`${iconBgClass} mt-[2px] tb:mt-0 ml-0 mb-1 tb:mb-0 tb:ml-14 mr-2 w-5 h-5 tb:w-8 tb:h-8 min-w-[20px] tb:min-w-[32px] rounded-full flex items-center justify-center`}>
+                  <Icon height={'block w-4 h-4 tb:w-5 tb:h-5 stroke-[2px] transition ease-in-out'} variant={props.iconVariant} strokeClass='stroke-neutral-1000' />
+                </div>
+              )
+            }
+            {
+              props.tagText && (
+                <Typography textStyle="body2-medium" className={`inline-flex py-1 px-0 tb:px-3 ml-0 tb:ml-14 tb-m:ml-6 rounded-full mr-4 min-w-fit ${tagColorVariants[tagClass]}`}>{props.tagText}</Typography>
+              )
+            }
+            <a href={props.linkUrl} className="block pb-0">
+              <Typography textStyle="body2-medium" className={`${linkTextClass} group flex items-center [&>div]:inline-block`}>
+                {props.linkText}
+                <Icon height={' hds-hidden tb:block w-6 h-6 stroke-[2px] ml-3 transition ease-in-out group-hover:translate-x-[5px]'} variant='arrownarrowright' strokeClass='stroke-blue-500' />
+              </Typography>
+            </a>
+          </div>
+          <div className="static mt-[2px] tb:mt-0 ml-3 tb:ml-0 tb:absolute top-1/2 tb:-translate-y-1/2 tb:left-6 cursor-pointer w-5 h-5 min-w-[20px] tb:w-8 tb:min-w-[32px] tb:h-8 rounded-full bg-neutral-100 flex items-center justify-center" onClick={()=>onCloseBanner()}>
+            <Icon height={'block w-4 h-4 tb:w-6 tb:h-6 stroke-[2px] transition ease-in-out'} variant='xclose' strokeClass='stroke-neutral-800' />
+          </div>
+        </div>
+      </div>
+    )
+  }
+  return null;
+}

package/src/HDS/components/Cards/Announcement/announcementSm.js

@@ -0,0 +1,41 @@
+import React from "react";
+import { Typography } from "../../../foundation/Typography";
+import { HDSColor } from "../../../foundation/ColorPalette";
+import { Icon } from '../../../components/common-components/Icon';
+
+const tagColorVariants = {
+  blue: 'bg-neutral-0 tb:bg-blue-500 text-blue-500 tb:text-neutral-0',
+  purple: 'bg-neutral-0 tb:bg-purple-500 text-purple-500 tb:text-neutral-0',
+  pink: 'bg-neutral-0 tb:bg-pink-500 text-pink-500 tb:text-neutral-0',
+  amber: 'bg-neutral-0 tb:bg-amber-500 text-amber-500 tb:text-neutral-0',
+  cyan: 'bg-neutral-0 tb:bg-cyan-500 text-cyan-500 tb:text-neutral-0',
+  green: 'bg-neutral-0 tb:bg-green-500 text-green-500 tb:text-neutral-0',
+}
+
+export default function AnnouncementSM(props) {
+  const bgClass = props.bgColorClass ? HDSColor(props.bgColorClass) : 'bg-neutral-0';
+  const linkTextClass = props.linkTextColorClass ? HDSColor(props.linkTextColorClass) : 'text-neutral-600';
+  return (
+    <div className={`${bgClass} rounded-2xl tb:rounded-full shadow p-3 tb:py-2 tb:px-2 inline-flex items-center`}>
+      <div className="block items-center tb:flex">
+        {props.tagText && <Typography
+          textStyle="body2-medium"
+          className={`inline-flex pl-0 tb:py-1 tb:px-3 rounded-full mr-4 min-w-fit ${tagColorVariants[props.tagColor]}`}>
+          {props.tagText}
+        </Typography>}
+        <a href={props.linkUrl}
+          className="pl-0 px-3 block tb:px-0 tb:pb-0">
+          <Typography
+            textStyle="body2-medium"
+            className={`${linkTextClass} group flex items-center`}>
+            {props.linkText}
+            <Icon
+              height={'block w-6 h-6 stroke-2 ml-2 mr-1 transition ease-in-out group-hover:translate-x-[5px]'}
+              variant='arrownarrowright'
+              strokeClass='stroke-blue-500' />
+          </Typography>
+        </a>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,2 @@
+export {default as AnnouncementSM} from './announcementSm';
+export {default as AnnouncementMd} from './announcementMd';