hds-web 1.18.8 → 1.18.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hds-web",
-  "version": "1.18.8",
+  "version": "1.18.9",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.es.js",

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

@@ -0,0 +1,50 @@
+import React, { useState } 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 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';
+  if (isBannerActive) {
+    return (
+      <div className={`${bgClass} flex my-6 justify-between relative rounded-2xl tb:rounded-full shadow p-4 tb:justify-center items-center`}>
+        <div className="block items-center tb:flex tb:justify-center">
+          {
+            props.brandImg && (
+              <div className="pl-3 tb:pl-14">
+                <img className="max-h-[34px]" src={props.brandImg} alt={props.brandImgAlt} />
+              </div>
+            )
+          }
+          {
+            props.tagText && (
+              <Typography textStyle="body2-medium" className={`inline-flex py-1 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="px-3 block tb:px-0 pb-1 tb:pb-0">
+            <Typography textStyle="body2-medium" className={`${linkTextClass} group flex items-center [&>div]:inline-block`}>
+              {props.linkText}
+              <Icon height={'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 mx-3 tb:mx-0 tb:absolute top-1/2 tb:-translate-y-1/2 tb:left-6 cursor-pointer w-8 min-w-[32px] h-8 rounded-full bg-neutral-100 flex items-center justify-center" onClick={()=>toggleBanner(false)}>
+          <Icon height={'block w-6 h-6 stroke-[2px] transition ease-in-out'} variant='xclose' strokeClass='stroke-neutral-800' />
+        </div>
+      </div>
+    )
+  }
+  return null;
+}

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

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