hds-web 1.6.1 → 1.6.3

package/package.json

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

package/src/HDS/components/Cards/Link/link.js

@@ -6,13 +6,11 @@ import { Typography } from '../../../foundation/Typography'
 
 
 export default function LinkCard(props) {
-    const cardBgColorClass = HDSColor(props.cardBgColor)
-    const cardHoverClasses = HDSColor(`hover:${props.cardHoverBg}`);
     return (
         <>
             <a
                 href={props.linkUrl}
-                className={`${cardHoverClasses} ${cardBgColorClass} hover:shadow-xl rounded-2xl p-6 h-full block`}
+                className={`rounded-2xl p-6 h-full block`}
             >
                 {props.brandImageUrl ?
                     (
@@ -85,7 +83,6 @@ LinkCard.defaultProps = {
     brandImageUrl: '',
     brandImageAlt:'',
     linkUrl: '#',
-    cardHoverBg: 'bg-pink-600',
     iconVariant: 'videorecorder',
     iconStrokeColor: 'blue-500',
     iconArrowVariant: 'arrownarrowupright',

package/src/HDS/components/Tabs/tab.js

@@ -56,7 +56,11 @@ export default function Tab(props) {
               key={tab.name}
               onClick={(event) => handleTabClick(event, tab)}
             >
-              <Typography className={`${tabClass(tab.name)} cursor-pointer px-3 py-1  z-[2] relative whitespace-nowrap`} textStyle='body3c-medium'>{tab.name}</Typography>
+              <Typography 
+              className={`${tabClass(tab.name)} cursor-pointer px-3 py-1  z-[2] relative whitespace-nowrap`} 
+              textStyle='body3c-medium'>
+                {tab.name}
+              </Typography>
             </div>
           ))}
           <span

package/src/HDS/foundation/ColorPalette/color.js

@@ -671,6 +671,102 @@ const HDSColors = {
     "hover:bg-red-600": "hover:bg-red-600",
     "hover:bg-red-700": "hover:bg-red-700",
     "hover:bg-red-800": "hover:bg-red-800",
+    "border-storybook-default-heading": "border-storybook-default-heading",
+"border-base-0": "border-base-0",
+"border-base-1000": "border-base-1000",
+"border-neutral-0": "border-neutral-0",
+"border-neutral-50": "border-neutral-50",
+"border-neutral-100": "border-neutral-100",
+"border-neutral-150": "border-neutral-150",
+"border-neutral-200": "border-neutral-200",
+"border-neutral-300": "border-neutral-300",
+"border-neutral-400": "border-neutral-400",
+"border-neutral-500": "border-neutral-500",
+"border-neutral-600": "border-neutral-600",
+"border-neutral-700": "border-neutral-700",
+"border-neutral-800": "border-neutral-800",
+"border-neutral-850": "border-neutral-850",
+"border-neutral-900": "border-neutral-900",
+"border-neutral-950": "border-neutral-950",
+"border-neutral-1000": "border-neutral-1000",
+"border-blue-100": "border-blue-100",
+"border-blue-200": "border-blue-200",
+"border-blue-300": "border-blue-300",
+"border-blue-400": "border-blue-400",
+"border-blue-500": "border-blue-500",
+"border-blue-600": "border-blue-600",
+"border-blue-700": "border-blue-700",
+"border-blue-800": "border-blue-800",
+"border-blue-900": "border-blue-900",
+"border-purple-100": "border-purple-100",
+"border-purple-200": "border-purple-200",
+"border-purple-300": "border-purple-300",
+"border-purple-400": "border-purple-400",
+"border-purple-500": "border-purple-500",
+"border-purple-600": "border-purple-600",
+"border-purple-700": "border-purple-700",
+"border-purple-800": "border-purple-800",
+"border-purple-900": "border-purple-900",
+"border-cyan-100": "border-cyan-100",
+"border-cyan-200": "border-cyan-200",
+"border-cyan-300": "border-cyan-300",
+"border-cyan-400": "border-cyan-400",
+"border-cyan-500": "border-cyan-500",
+"border-cyan-600": "border-cyan-600",
+"border-cyan-700": "border-cyan-700",
+"border-cyan-800": "border-cyan-800",
+"border-cyan-900": "border-cyan-900",
+"border-green-100": "border-green-100",
+"border-green-200": "border-green-200",
+"border-green-300": "border-green-300",
+"border-green-400": "border-green-400",
+"border-green-500": "border-green-500",
+"border-green-600": "border-green-600",
+"border-green-700": "border-green-700",
+"border-green-800": "border-green-800",
+"border-green-900": "border-green-900",
+"border-pink-100": "border-pink-100",
+"border-pink-200": "border-pink-200",
+"border-pink-300": "border-pink-300",
+"border-pink-400": "border-pink-400",
+"border-pink-500": "border-pink-500",
+"border-pink-600": "border-pink-600",
+"border-pink-700": "border-pink-700",
+"border-pink-800": "border-pink-800",
+"border-pink-900": "border-pink-900",
+"border-amber-100": "border-amber-100",
+"border-amber-200": "border-amber-200",
+"border-amber-300": "border-amber-300",
+"border-amber-400": "border-amber-400",
+"border-amber-500": "border-amber-500",
+"border-amber-600": "border-amber-600",
+"border-amber-700": "border-amber-700",
+"border-amber-800": "border-amber-800",
+"border-amber-900": "border-amber-900",
+"border-yellow-100": "border-yellow-100",
+"border-yellow-200": "border-yellow-200",
+"border-yellow-300": "border-yellow-300",
+"border-yellow-400": "border-yellow-400",
+"border-yellow-500": "border-yellow-500",
+"border-yellow-600": "border-yellow-600",
+"border-yellow-700": "border-yellow-700",
+"border-yellow-800": "border-yellow-800",
+"border-orange-100": "border-orange-100",
+"border-orange-200": "border-orange-200",
+"border-orange-300": "border-orange-300",
+"border-orange-400": "border-orange-400",
+"border-orange-500": "border-orange-500",
+"border-orange-600": "border-orange-600",
+"border-orange-700": "border-orange-700",
+"border-orange-800": "border-orange-800",
+"border-red-100": "border-red-100",
+"border-red-200": "border-red-200",
+"border-red-300": "border-red-300",
+"border-red-400": "border-red-400",
+"border-red-500": "border-red-500",
+"border-red-600": "border-red-600",
+"border-red-700": "border-red-700",
+"border-red-800": "border-red-800",
 };
 
 export default function HDSColor(color = '') {

package/src/HDS/modules/TextCard/textCard.js

@@ -57,7 +57,7 @@ export default function TextCard(props) {
                     const imgBgColor = HDSColor(list.tab_img_bg_class)
                     return (
                       <div className='border-b border-b-neutral-150 last:border-b-0 cursor-pointer' onClick={()=>setImgActive(list.title)}>
-                        <div className={'m-2 p-0 tb:p-6 rounded-lg hover:bg-neutral-50' + ((imgActive === list.title) ? " bg-neutral-100" : "")} key={i}>
+                        <div className={'m-2 p-0 tb:p-6 rounded-lg transition-all ease-in duration-75 hover:bg-neutral-50' + ((imgActive === list.title) ? " bg-neutral-100" : "")} key={i}>
                           <div className='flex items-center pb-4'>
                             <Icon
                               height={`w-6 h-6 mr-2 stroke-[1.5px]` }

package/src/styles/tailwind.css

@@ -2383,6 +2383,411 @@ select {
   border-color: rgb(225 58 124 / var(--tw-border-opacity));
 }
 
+.border-amber-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 243 212 / var(--tw-border-opacity));
+}
+
+.border-amber-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 228 176 / var(--tw-border-opacity));
+}
+
+.border-amber-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 206 112 / var(--tw-border-opacity));
+}
+
+.border-amber-400 {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 168 27 / var(--tw-border-opacity));
+}
+
+.border-amber-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(224 121 0 / var(--tw-border-opacity));
+}
+
+.border-amber-700 {
+  --tw-border-opacity: 1;
+  border-color: rgb(153 55 0 / var(--tw-border-opacity));
+}
+
+.border-amber-800 {
+  --tw-border-opacity: 1;
+  border-color: rgb(120 36 0 / var(--tw-border-opacity));
+}
+
+.border-amber-900 {
+  --tw-border-opacity: 1;
+  border-color: rgb(71 21 0 / var(--tw-border-opacity));
+}
+
+.border-base-0 {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 255 255 / var(--tw-border-opacity));
+}
+
+.border-base-1000 {
+  --tw-border-opacity: 1;
+  border-color: rgb(0 6 21 / var(--tw-border-opacity));
+}
+
+.border-blue-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(240 244 255 / var(--tw-border-opacity));
+}
+
+.border-blue-700 {
+  --tw-border-opacity: 1;
+  border-color: rgb(13 65 198 / var(--tw-border-opacity));
+}
+
+.border-blue-800 {
+  --tw-border-opacity: 1;
+  border-color: rgb(0 40 142 / var(--tw-border-opacity));
+}
+
+.border-blue-900 {
+  --tw-border-opacity: 1;
+  border-color: rgb(0 28 99 / var(--tw-border-opacity));
+}
+
+.border-cyan-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(227 250 255 / var(--tw-border-opacity));
+}
+
+.border-cyan-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(194 244 255 / var(--tw-border-opacity));
+}
+
+.border-cyan-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(147 236 255 / var(--tw-border-opacity));
+}
+
+.border-cyan-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(14 150 178 / var(--tw-border-opacity));
+}
+
+.border-cyan-600 {
+  --tw-border-opacity: 1;
+  border-color: rgb(4 117 141 / var(--tw-border-opacity));
+}
+
+.border-cyan-700 {
+  --tw-border-opacity: 1;
+  border-color: rgb(0 90 108 / var(--tw-border-opacity));
+}
+
+.border-cyan-800 {
+  --tw-border-opacity: 1;
+  border-color: rgb(0 57 69 / var(--tw-border-opacity));
+}
+
+.border-cyan-900 {
+  --tw-border-opacity: 1;
+  border-color: rgb(0 35 43 / var(--tw-border-opacity));
+}
+
+.border-green-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(218 255 244 / var(--tw-border-opacity));
+}
+
+.border-green-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(184 251 231 / var(--tw-border-opacity));
+}
+
+.border-green-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(145 245 215 / var(--tw-border-opacity));
+}
+
+.border-green-400 {
+  --tw-border-opacity: 1;
+  border-color: rgb(57 218 170 / var(--tw-border-opacity));
+}
+
+.border-green-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(14 165 120 / var(--tw-border-opacity));
+}
+
+.border-green-600 {
+  --tw-border-opacity: 1;
+  border-color: rgb(2 125 89 / var(--tw-border-opacity));
+}
+
+.border-green-700 {
+  --tw-border-opacity: 1;
+  border-color: rgb(0 96 67 / var(--tw-border-opacity));
+}
+
+.border-green-800 {
+  --tw-border-opacity: 1;
+  border-color: rgb(0 60 43 / var(--tw-border-opacity));
+}
+
+.border-green-900 {
+  --tw-border-opacity: 1;
+  border-color: rgb(0 40 29 / var(--tw-border-opacity));
+}
+
+.border-neutral-1000 {
+  --tw-border-opacity: 1;
+  border-color: rgb(0 6 21 / var(--tw-border-opacity));
+}
+
+.border-neutral-50 {
+  --tw-border-opacity: 1;
+  border-color: rgb(249 250 251 / var(--tw-border-opacity));
+}
+
+.border-neutral-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(108 115 127 / var(--tw-border-opacity));
+}
+
+.border-neutral-600 {
+  --tw-border-opacity: 1;
+  border-color: rgb(77 87 97 / var(--tw-border-opacity));
+}
+
+.border-neutral-700 {
+  --tw-border-opacity: 1;
+  border-color: rgb(56 66 80 / var(--tw-border-opacity));
+}
+
+.border-neutral-800 {
+  --tw-border-opacity: 1;
+  border-color: rgb(31 42 55 / var(--tw-border-opacity));
+}
+
+.border-neutral-850 {
+  --tw-border-opacity: 1;
+  border-color: rgb(24 34 47 / var(--tw-border-opacity));
+}
+
+.border-neutral-900 {
+  --tw-border-opacity: 1;
+  border-color: rgb(17 25 39 / var(--tw-border-opacity));
+}
+
+.border-neutral-950 {
+  --tw-border-opacity: 1;
+  border-color: rgb(13 20 32 / var(--tw-border-opacity));
+}
+
+.border-orange-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 237 215 / var(--tw-border-opacity));
+}
+
+.border-orange-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(254 215 173 / var(--tw-border-opacity));
+}
+
+.border-orange-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(253 185 122 / var(--tw-border-opacity));
+}
+
+.border-orange-400 {
+  --tw-border-opacity: 1;
+  border-color: rgb(251 145 71 / var(--tw-border-opacity));
+}
+
+.border-orange-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(248 114 41 / var(--tw-border-opacity));
+}
+
+.border-orange-600 {
+  --tw-border-opacity: 1;
+  border-color: rgb(233 87 31 / var(--tw-border-opacity));
+}
+
+.border-orange-700 {
+  --tw-border-opacity: 1;
+  border-color: rgb(193 64 24 / var(--tw-border-opacity));
+}
+
+.border-orange-800 {
+  --tw-border-opacity: 1;
+  border-color: rgb(153 52 24 / var(--tw-border-opacity));
+}
+
+.border-pink-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 237 244 / var(--tw-border-opacity));
+}
+
+.border-pink-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 217 231 / var(--tw-border-opacity));
+}
+
+.border-pink-400 {
+  --tw-border-opacity: 1;
+  border-color: rgb(246 119 170 / var(--tw-border-opacity));
+}
+
+.border-pink-600 {
+  --tw-border-opacity: 1;
+  border-color: rgb(194 30 95 / var(--tw-border-opacity));
+}
+
+.border-pink-700 {
+  --tw-border-opacity: 1;
+  border-color: rgb(165 10 72 / var(--tw-border-opacity));
+}
+
+.border-pink-800 {
+  --tw-border-opacity: 1;
+  border-color: rgb(113 0 44 / var(--tw-border-opacity));
+}
+
+.border-pink-900 {
+  --tw-border-opacity: 1;
+  border-color: rgb(73 0 29 / var(--tw-border-opacity));
+}
+
+.border-purple-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(247 242 255 / var(--tw-border-opacity));
+}
+
+.border-purple-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(237 225 255 / var(--tw-border-opacity));
+}
+
+.border-purple-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(219 198 255 / var(--tw-border-opacity));
+}
+
+.border-purple-400 {
+  --tw-border-opacity: 1;
+  border-color: rgb(180 135 255 / var(--tw-border-opacity));
+}
+
+.border-purple-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(140 73 250 / var(--tw-border-opacity));
+}
+
+.border-purple-600 {
+  --tw-border-opacity: 1;
+  border-color: rgb(113 43 227 / var(--tw-border-opacity));
+}
+
+.border-purple-700 {
+  --tw-border-opacity: 1;
+  border-color: rgb(94 19 215 / var(--tw-border-opacity));
+}
+
+.border-purple-800 {
+  --tw-border-opacity: 1;
+  border-color: rgb(63 1 166 / var(--tw-border-opacity));
+}
+
+.border-purple-900 {
+  --tw-border-opacity: 1;
+  border-color: rgb(41 0 107 / var(--tw-border-opacity));
+}
+
+.border-red-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(254 226 226 / var(--tw-border-opacity));
+}
+
+.border-red-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(254 202 203 / var(--tw-border-opacity));
+}
+
+.border-red-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(251 165 166 / var(--tw-border-opacity));
+}
+
+.border-red-400 {
+  --tw-border-opacity: 1;
+  border-color: rgb(247 113 115 / var(--tw-border-opacity));
+}
+
+.border-red-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(238 68 71 / var(--tw-border-opacity));
+}
+
+.border-red-600 {
+  --tw-border-opacity: 1;
+  border-color: rgb(219 37 43 / var(--tw-border-opacity));
+}
+
+.border-red-700 {
+  --tw-border-opacity: 1;
+  border-color: rgb(184 27 32 / var(--tw-border-opacity));
+}
+
+.border-red-800 {
+  --tw-border-opacity: 1;
+  border-color: rgb(152 26 30 / var(--tw-border-opacity));
+}
+
+.border-storybook-default-heading {
+  --tw-border-opacity: 1;
+  border-color: rgb(17 27 41 / var(--tw-border-opacity));
+}
+
+.border-yellow-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 249 199 / var(--tw-border-opacity));
+}
+
+.border-yellow-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 239 147 / var(--tw-border-opacity));
+}
+
+.border-yellow-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 223 90 / var(--tw-border-opacity));
+}
+
+.border-yellow-400 {
+  --tw-border-opacity: 1;
+  border-color: rgb(251 203 58 / var(--tw-border-opacity));
+}
+
+.border-yellow-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(235 178 48 / var(--tw-border-opacity));
+}
+
+.border-yellow-600 {
+  --tw-border-opacity: 1;
+  border-color: rgb(202 137 36 / var(--tw-border-opacity));
+}
+
+.border-yellow-700 {
+  --tw-border-opacity: 1;
+  border-color: rgb(161 97 26 / var(--tw-border-opacity));
+}
+
+.border-yellow-800 {
+  --tw-border-opacity: 1;
+  border-color: rgb(133 77 24 / var(--tw-border-opacity));
+}
+
 .border-b-neutral-150 {
   --tw-border-opacity: 1;
   border-bottom-color: rgb(236 237 240 / var(--tw-border-opacity));
@@ -6556,6 +6961,10 @@ select {
   transition-duration: 500ms;
 }
 
+.duration-75 {
+  transition-duration: 75ms;
+}
+
 .ease-in {
   transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }