hds-web 1.33.0 → 1.33.2

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

@@ -1,35 +0,0 @@
-import React from "react";
-import { Typography } from '../../../foundation/Typography'
-import { HDSColor } from "../../../foundation/ColorPalette";
-import PropTypes from 'prop-types';
-
-export default function FlyoutC(props) {
-    const {
-        title,
-        title_colorClass,
-        img_url,
-        cta_link
-    } = props;
-    return (
-        <a href={cta_link ?? ''}>
-        <div className="p-6 hover:shadow-lg cursor-pointer transition-all duration-300 ease-in-out group/flyoutc">
-            <div className=" flex flex-row items-center gap-6 tb:min-w-[396px]">
-                <div className="">
-                    {
-                        img_url && (
-                                <img src={props.img_url} className='rounded-xl max-w-[128px] group-hover/flyoutc:shadow-lg transition-all duration-300 ease-in-out' alt={props.title} />
-                        )
-                    }
-                </div >
-                <Typography textStyle='body3c-medium' className={HDSColor(title_colorClass) + ' '} >{title}</Typography>
-
-            </div>
-        </div>
-        </a>
-
-    );
-}
-
-FlyoutC.defaultProps = {
-    img_url: 'text-neutral-900'
-}

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

@@ -1,43 +0,0 @@
-import React from "react";
-import { Typography } from "../../../foundation/Typography";
-import { Icon } from "../../common-components";
-export default function FlyoutD(props) {
-    return (
-        <a href={props.link} className="flex flex-col gap-4 tb-l:gap-0 tb-l:flex-col w-full h-full justify-between group/icon">
-            {props.IconVariant && 
-            <div className="w-full h-full tb-l:pb-6">
-
-            <div
-                className=" p-2.5 rounded-2xl w-14 h-14 tb-l:w-full tb-xl:w-[175px] tb-l:h-[124px] bg-neutral-150 items-center justify-center transition-all duration-300 flex group-hover/icon:bg-blue-200"
-                >
-                <Icon
-                    height=' tb-l:h-12 tb-l:w-12 h-6 w-6'
-                    variant={props.IconVariant}
-                    className=' stroke-neutral-800 group-hover/icon:stroke-blue-600 cursor-pointer transition-all duration-300'
-                    />
-                    </div>
-            </div>
-            }
-            <div className="flex flex-col gap-1 w-full h-full">
-                {props.btnLabel && 
-                <div className="flex items-center">
-                    <Typography textStyle='body3c-medium' className='text-neutral-900 whitespace-nowrap group-hover/icon:text-blue-600 transition-all duration-300 '>
-                        {props.btnLabel}
-                    </Typography>
-
-                        <div className="flex group-hover/icon:translate-x-1 transform transition-all duration-200 ease-in-out invisible group-hover/icon:visible ">
-                        <Icon
-                            height={'h-4 w-4 stroke-2 transition-all ease-in-out   '}
-                            variant={'chevronright'}
-                            strokeClass={'stroke-blue-500'}
-                        />
-                    </div>
-                </div>
-                }
-                {props.description && <Typography textStyle='body3c' className='text-neutral-600 line-clamp-5'>
-                    {props.description}
-                </Typography>}
-            </div>
-        </a>
-    )
-}

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

@@ -1,161 +0,0 @@
-import React from "react";
-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

@@ -1,4 +0,0 @@
-export {default as FlyoutA} from './flyoutA';
-export {default as FlyoutB} from './flyoutB';
-export {default as FlyoutC} from './flyoutC';
-export {default as FlyoutD} from './flyoutD';

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

@@ -1,254 +0,0 @@
-import React from "react";
-import PropTypes from 'prop-types';
-import { Icon } from "../../common-components/Icon";
-import { HDSColor } from '../../../foundation/ColorPalette'
-import { Typography } from '../../../foundation/Typography'
-import { HDSButton } from "../../Buttons";
-import ReactMarkdown from "react-markdown";
-const cardVariant = {
-    "withButton": {
-        'cardStyle': 'p-10 ',
-        'iconWidthStyle': 'h-20 w-20',
-        'iconStyle': 'h-10 w-10',
-        'titleTextStyle': 'h4',
-        'titleClasses': 'mb-1 text-blue-800 text-hds-m-h4 tb:text-hds-t-h4 db:text-hds-d-h4',
-        'descTextStyle': 'body1c',
-        'descClasses': 'text-neutral-1000 text-hds-m-body1c tb:text-hds-t-body1c db:text-hds-d-body1c'
-    },
-    "withoutButton": {
-        'cardStyle': 'p-6',
-        'iconWidthStyle': 'h-12 w-12',
-        'iconStyle': 'h-6 w-6',
-        'titleTextStyle': 'h5',
-        'titleClasses': 'mb-1 text-blue-600 text-hds-m-h5 tb:text-hds-t-h5 db:text-hds-d-h5',
-        'descTextStyle': 'body1',
-        'descClasses': 'text-neutral-1000 text-hds-m-body1 tb:text-hds-t-body1 db:text-hds-d-body1'
-    },
-    "sm": {
-        'cardStyle': 'p-6',
-        'iconWidthStyle': 'h-12 w-12',
-        'iconStyle': 'h-6 w-6',
-        'titleTextStyle': 'body1c-semi-bold',
-        'titleClasses': 'mb-1 text-neutral-800 text-hds-m-body1c-semi-bold tb:text-hds-t-body1c-semi-bold db:text-hds-d-body1c-semi-bold',
-        'descTextStyle': 'body3',
-        'descClasses': 'text-neutral-800 text-hds-m-body3 tb:text-hds-t-body3 db:text-hds-d-body3'
-    }
-}
-
-export default function IconCard(props) {
-    const iconBG = HDSColor(props.iconBg);
-    return (
-        <>
-            {
-                ((props.readMoreBtn && props.button) || (!props.readMoreBtn && !props.button) || (props.button && props.button.length > 1) || !props.linkHover) ? (
-                    <div
-                        className={`bg-neutral-0 grid h-full transition-all ease-in-out rounded-3xl ${cardVariant[props.cardType]['cardStyle']} ` + ((props.cardBorder) ? props.cardBorder : 'tb:shadow')}
-                    >
-                        <div className=" self-start">
-                            <div
-                                className={`${iconBG} ${cardVariant[props.cardType]['iconWidthStyle']} w-12 h-12 flex items-center justify-center rounded-full mb-6`}
-                            >
-                                <Icon
-                                    height={`stroke-[1.5px] ${cardVariant[props.cardType]['iconStyle']}`}
-                                    variant={props.iconVariant}
-                                    strokeColor={props.iconStroke}
-                                    strokeClass={HDSColor(props.iconStrokeClass)} />
-                            </div>
-                            <div
-                                className="flex-1">
-
-                                {props.cardType &&
-                                    (
-                                        <>
-                                            <Typography
-                                                textStyle={cardVariant[props.cardType]['titleTextStyle']}
-                                                className={cardVariant[props.cardType]['titleClasses']}
-                                            >
-                                                {props.title}
-                                            </Typography>
-
-                                            <Typography
-                                                textStyle={cardVariant[props.cardType]['descTextStyle']}
-                                                className={`${cardVariant[props.cardType]['descClasses']} [&>p]:pb-2 last:[&>p]:pb-0 [&>ul]:ps-4 [&>ul>li]:list-disc [&>ul>li]:pb-2 last:[&>ul>li]:pb-0 [&>p>a]:text-blue-600`}
-                                            >
-                                                <ReactMarkdown>
-                                                    {props.description}
-                                                </ReactMarkdown>
-                                            </Typography>
-                                        </>
-                                    )
-                                }
-                            </div>
-                        </div>
-                        {props.readMoreBtn && (
-                          <>
-                            {
-                              props.linkHover ? (
-                                <a href={props.readMoreBtn.cta_link} className='flex self-end'>
-                                    <div className="flex">
-                                        <HDSButton
-                                            label={props.readMoreBtn.cta_text}
-                                            type='secondaryLink'
-                                            leftIconVariant='none'
-                                            rightIconVariant='none'
-                                            state='default'
-                                            size='sm'
-                                            rightAnimatedArrow={true}
-                                            rightAnimatedArrowColor='#3970FD'
-                                            animatedHoverStroke='#3970FD'
-                                            btnTextColorClass='text-blue-500'
-                                            btnTextHoverClass=''
-                                            className=' mt-4'
-                                        />
-                                    </div>
-                                </a>
-                              ) : (
-                                <div className="flex self-end">
-                                    <HDSButton
-                                        label={props.readMoreBtn.cta_text}
-                                        type='secondaryLink'
-                                        leftIconVariant='none'
-                                        rightIconVariant='none'
-                                        state='default'
-                                        size='sm'
-                                        rightAnimatedArrow={false}
-                                        rightAnimatedArrowColor='#3970FD'
-                                        animatedHoverStroke='#3970FD'
-                                        btnTextColorClass='text-neutral-800'
-                                        btnTextHoverClass=''
-                                        className=' mt-4 hover:cursor-default'
-                                    />
-                                </div>
-                              )
-                            }
-                          </>
-                        )
-                        }
-                        {props.button &&
-                            <div className="flex gap-2 ">
-                                {props.button.map((btn, index) => (
-                                    <a href={btn.cta_link} key={index} className="flex self-end mt-7">
-                                        <div className="flex">
-
-
-                                            <HDSButton
-                                                label={btn.cta_text}
-                                                type={btn.cta_type || 'secondary'}
-                                                leftIconVariant='none'
-                                                rightIconVariant='none'
-                                                state='default'
-                                                size='sm'
-                                                rightAnimatedArrow={true}
-                                                rightAnimatedArrowColor={btn.rightAnimatedArrowColor || '#3970FD'}
-                                                btnBgColorClass={btn.btnBg}
-                                                btnTextHoverClass={btn.btnTextColorClass}
-                                                animatedHoverStroke={btn.animatedHoverStroke}
-                                                btnTextColorClass={btn.btnTextColorClass}
-                                            />
-                                        </div>
-                                    </a>))
-                                }
-                            </div>
-                        }
-                    </div>
-                ) :
-
-                    (
-                        <a href={((props.readMoreBtn && !props.button) ? props.readMoreBtn['cta_link'] : props.button[0]['cta_link'])}
-                            className={`bg-neutral-0 group grid h-full duration-300 transition-all ease-in-out rounded-3xl ${cardVariant[props.cardType]['cardStyle']} ` + ((props.cardBorder) ? props.cardBorder : 'tb:shadow') + ((props.readMoreBtn || props.button || props.linkHover) ? ' hover:shadow-lg hover:translate-y-0.5 ' : '')}
-                        >
-                            <div className=" self-start">
-                                <div
-                                    className={`${iconBG} ${cardVariant[props.cardType]['iconWidthStyle']} w-12 h-12 flex items-center justify-center rounded-full mb-6`}
-                                >
-                                    <Icon
-                                        height={`stroke-[1.5px] ${cardVariant[props.cardType]['iconStyle']}`}
-                                        variant={props.iconVariant}
-                                        strokeColor={props.iconStroke}
-                                        strokeClass={HDSColor(props.iconStrokeClass)} />
-                                </div>
-                                <div
-                                    className="flex-1">
-
-                                    {props.cardType &&
-                                        (
-                                            <>
-                                                <Typography
-                                                    textStyle={cardVariant[props.cardType]['titleTextStyle']}
-                                                    className={cardVariant[props.cardType]['titleClasses']}
-                                                >
-                                                    {props.title}
-                                                </Typography>
-
-                                                <Typography
-                                                    textStyle={cardVariant[props.cardType]['descTextStyle']}
-                                                    className={`${cardVariant[props.cardType]['descClasses']} [&>p]:pb-2 last:[&>p]:pb-0 [&>ul]:ps-4 [&>ul>li]:list-disc [&>ul>li]:pb-2 last:[&>ul>li]:pb-0 [&>p>a]:text-blue-600`}
-                                                >
-                                                    <ReactMarkdown>
-                                                        {props.description}
-                                                    </ReactMarkdown>
-                                                </Typography>
-
-                                            </>
-                                        )
-                                    }
-                                </div>
-                            </div>
-                            {props.readMoreBtn && (
-                                <div className="flex self-end">
-                                    <HDSButton
-                                        label={props.readMoreBtn.cta_text}
-                                        type='secondaryLink'
-                                        leftIconVariant='none'
-                                        rightIconVariant='none'
-                                        state='default'
-                                        size='sm'
-                                        rightAnimatedArrow={true}
-                                        rightAnimatedArrowColor='#3970FD'
-                                        animatedHoverStroke='#3970FD'
-                                        btnTextColorClass='text-blue-500'
-                                        btnTextHoverClass=''
-                                        className=' mt-4'
-                                    />
-                                </div>
-                            )
-                            }
-                            {props.button &&
-                                <div className="flex pt-4 gap-2 self-end">
-                                    {props.button.map((btn, index) => (
-                                        <div className="flex">
-                                            <HDSButton
-                                                label={btn.cta_text}
-                                                type={btn.cta_type || 'secondary'}
-                                                leftIconVariant='none'
-                                                rightIconVariant='none'
-                                                state='default'
-                                                size='sm'
-                                                rightAnimatedArrow={true}
-                                                rightAnimatedArrowColor={btn.rightAnimatedArrowColor || '#3970FD'}
-                                                btnBgColorClass={btn.btnBg}
-                                                btnTextHoverClass={btn.btnTextColorClass}
-                                                animatedHoverStroke={btn.animatedHoverStroke}
-                                                btnTextColorClass={btn.btnTextColorClass}
-                                            />
-                                        </div>
-                                    ))
-                                    }
-                                </div>
-                            }
-                        </a>
-                    )
-
-            }
-        </>
-    )
-}
-
-IconCard.defaultProps = {
-    cardType: 'withoutButton',
-    iconStrokeClass: 'stroke-neutral-1000',
-    linkHover:'true'
-}
-Icon.propTypes = {
-    cardType: PropTypes.oneOf(['withoutButton', 'withButton', 'sm']),
-}

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

@@ -1,116 +0,0 @@
-import React from "react";
-import PropTypes from 'prop-types';
-import { Icon } from "../../common-components/Icon";
-import { HDSColor } from '../../../foundation/ColorPalette'
-import { Typography } from '../../../foundation/Typography'
-import { HDSButton } from "../../Buttons";
-import ReactMarkdown from "react-markdown";
-
-const cardVariant = {
-    "withButton": {
-        'cardStyle': 'p-10 ',
-        'iconWidthStyle': 'h-20 w-20',
-        'iconStyle': 'h-10 w-10',
-        'titleTextStyle': 'h4',
-        'titleClasses': 'mb-1 text-hds-m-h4 tb:text-hds-t-h4 db:text-hds-d-h4',
-        'descTextStyle': 'body1c',
-        'descClasses': 'text-hds-m-body1c tb:text-hds-t-body1c db:text-hds-d-body1c'
-    },
-    "withoutButton": {
-        'cardStyle': 'p-6',
-        'iconWidthStyle': 'h-12 w-12',
-        'iconStyle': 'h-6 w-6',
-        'titleTextStyle': 'h5',
-        'titleClasses': 'mb-1 text-blue-600 text-hds-m-h5 tb:text-hds-t-h5 db:text-hds-d-h5',
-        'descTextStyle': 'body1',
-        'descClasses': 'text-neutral-1000 text-hds-m-body1 tb:text-hds-t-body1 db:text-hds-d-body1'
-    },
-    "sm": {
-        'cardStyle': 'p-6',
-        'iconWidthStyle': 'h-12 w-12',
-        'iconStyle': 'h-6 w-6',
-        'titleTextStyle': 'body3c',
-        'titleClasses': 'mb-1 text-neutral-800 text-hds-m-body3c-bold tb:text-hds-t-body3c-bold db:text-hds-d-body3c-bold',
-        'descTextStyle': 'body3',
-        'descClasses': 'text-neutral-800 text-hds-m-body3 tb:text-hds-t-body3 db:text-hds-d-body3'
-    }
-}
-
-export default function IconCardButton(props) {
-  const iconBG = props.iconBg ? HDSColor(props.iconBg) : '';
-  const titleClass = props.titleColorClass ? HDSColor(props.titleColorClass) : 'text-neutral-1000';
-  const descClass = props.descColorClass ? HDSColor(props.descColorClass) : 'text-neutral-800';
-    return (
-        <>
-          <div>
-            {
-              props.imgUrl ? (
-                <div className={`${cardVariant[props.cardType]['iconWidthStyle']} w-12 h-12 inline-flex items-center justify-center rounded-full mb-6`}>
-                  <img className="w-full" src={props.imgUrl} alt={props.title} />
-                </div>
-              ) : (
-                <div
-                    className={`${iconBG} ${cardVariant[props.cardType]['iconWidthStyle']} w-12 h-12 flex items-center justify-center rounded-full mb-6`}
-                >
-                    <Icon
-                        height={`stroke-[1.5px] ${cardVariant[props.cardType]['iconStyle']}`}
-                        variant={props.iconVariant}
-                        strokeColor={props.iconStroke}
-                        strokeClass={HDSColor(props.iconStrokeClass)} />
-                </div>
-              )
-            }
-            {props.cardType &&
-                (
-                    <>
-                        <Typography
-                            textStyle={cardVariant[props.cardType]['titleTextStyle']}
-                            className={`${cardVariant[props.cardType]['titleClasses']} ${titleClass}`}
-                        >
-                            {props.title}
-                        </Typography>
-
-                        <Typography
-                            textStyle={cardVariant[props.cardType]['descTextStyle']}
-                            className={`${cardVariant[props.cardType]['descClasses']} ${descClass} [&>p]:${descClass} [&>p]:pb-2 last:[&>p]:pb-0 [&>ul]:ps-4 [&>ul>li]:list-disc [&>ul>li]:pb-2 last:[&>ul>li]:pb-0 [&>p>a]:text-blue-600`}
-                        >
-                            <ReactMarkdown>
-                                {props.description}
-                            </ReactMarkdown>
-                        </Typography>
-                    </>
-                )
-            }
-          </div>
-          {
-            props.button && (
-              <div className="inline-flex pt-6">
-                  <HDSButton
-                      label={props.button.cta_text}
-                      type={props.button.cta_type || 'secondary'}
-                      leftIconVariant='none'
-                      rightIconVariant='none'
-                      state='default'
-                      size='sm'
-                      rightAnimatedArrow={true}
-                      rightAnimatedArrowColor={props.button.rightAnimatedArrowColor || '#3970FD'}
-                      btnBgColorClass={props.button.btnBg}
-                      btnTextHoverClass={props.button.btnTextColorClass}
-                      animatedHoverStroke={props.button.animatedHoverStroke}
-                      btnTextColorClass={props.button.btnTextColorClass}
-                  />
-              </div>
-            )
-          }
-        </>
-    )
-}
-
-IconCardButton.defaultProps = {
-    cardType: 'withoutButton',
-    iconStrokeClass: 'stroke-neutral-1000',
-    iconVariant: 'cube01'
-}
-IconCardButton.propTypes = {
-    cardType: PropTypes.oneOf(['withoutButton', 'withButton', 'sm']),
-}

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

@@ -1,33 +0,0 @@
-import React from "react"
-import { HDSColor } from "../../../foundation/ColorPalette"
-import { Typography } from "../../../foundation/Typography"
-import { Badges } from "../../BadgesCaption"
-export default function ImageBadgeCard(card) {
-
-    return (
-        <>
-            <div>
-                <a href={card.sliderLink}>
-                    <div className={`${HDSColor(card.cardBg)}bg-neutral-0 shadow hover:transition-all hover:ease-in-out hover:duration-300 hover:border-opacity-0 min-h-[443px]  min-w-[312px] tb:max-w-[763px] tb:min-h-[245px] rounded-3xl tb:p-8 p-4`}>
-
-                        <div className='flex flex-col-reverse tb:flex-row  justify-between gap-4 items-center'>
-                            <div className='tb:max-w-[393px] mt-8 tb:mt-0'>
-                                <Badges
-                                    color={card.badge.color}
-                                    children={card.badge.label}
-                                    text_color='text-neutral-0'
-                                />
-                                <Typography textStyle='h4' className='mt-2 text-neutral-1000 max-w-[326px]'>{card.title}</Typography>
-                                <Typography textStyle='sub2' className='mt-2 text-neutral-600'>{card.subTitle}</Typography>
-                            </div>
-                            <div className="flex justify-center h-full items-center">
-                                <img src={card.imageUrl} alt={card.title} className='tb:max-w-[290px] rounded-lg flex items-center justify-center tb:max-h-[181px]' />
-
-                            </div>
-                        </div>
-                    </div>
-                </a>
-            </div>
-        </>
-    )
-}