hds-web 1.2.9 → 1.3.1

package/src/HDS/components/Hero/h3.js

@@ -0,0 +1,152 @@
+import React, { useState, useEffect } from 'react';
+import { MediaBox } from '../../helpers/Media';
+import { Typography } from '../../foundation/Typography';
+import { HDSButton } from '../../components/Buttons';
+import { HDSColor } from '../../foundation/ColorPalette';
+import { Tab } from '../../components/Tabs';
+import PropTypes from 'prop-types';
+import { LinkCard } from '../Cards/Link';
+
+const tabCard = (tabContent) => (
+    <>
+        <div className='tb:px-3'>
+            {tabContent.title &&
+                <Typography
+                    textStyle='h2'
+                    className={HDSColor(tabContent.title_color)}>
+                    {tabContent.title}
+                </Typography>}
+
+            {tabContent.sub_title &&
+                <Typography
+                    textStyle='sub2'
+                    className={`mt-2 ${HDSColor(tabContent.sub_title_color)}`}>
+                    {tabContent.sub_title}
+                </Typography>}
+        </div>
+        {tabContent.btnLabel &&
+            <div className='flex pl-3 pt-6'>
+                <HDSButton
+                    label={tabContent.btnLabel}
+                    type='secondary'
+                    leftIconVariant='none'
+                    rightIconVariant='none'
+                    state='default'
+                    size='sm'
+                    rightAnimatedArrow={true}
+                    rightAnimatedArrowColor='#1E56E3'
+                    animatedHoverStroke='group-hover:stroke-blue-600'
+                    className='flex'
+                    btnTextColorClass='text-blue-600'
+                />
+            </div>
+        }
+
+    </>
+)
+
+export default function HeroCapability(props) {
+
+    const LinkCardsFn = (heroData) => {
+        return (
+          heroData.linkCards && (
+            <div className="flex mt-16 gap-6 justify-center">
+              {heroData.linkCards.map((card, index) => (
+                <div key={index} className="w-full">
+                  <LinkCard
+                  titleTextColor= {card.titleTextColor}
+                    descTextColor={card.descTextColor}
+                    linkUrl={card.linkUrl}
+                    cardBgColor={card.cardBgColor}
+                    cardHoverBg={card.cardHoverBg}
+                    iconVariant={card.iconVariant}
+                    iconStrokeColor={card.iconStrokeColor}
+                    iconArrowVariant={card.iconArrowVariant}
+                    iconArrowStrokeColor={card.iconArrowStrokeColor}
+                    title={card.title}
+                    description={card.description}
+                  />
+                </div>
+              ))}
+            </div>
+          )
+        );
+      };
+
+
+    const [activeTab, setActiveTab] = useState('');
+
+    useEffect(() => {
+        if (props.heroData.tabContent) {
+            const tabNames = Object.keys(props.heroData.tabContent);
+            setActiveTab(tabNames[0]);
+        }
+    }, [props.heroData.tabContent]);
+
+    const handleTabClick = (tab) => {
+        if (tab.name) {
+            setActiveTab(tab.name);
+        }
+        else return;
+        // Perform any other actions based on the clicked tab
+    }
+    let bgClass = '';
+    let bgTabClass = '';
+    let video_url = '';
+    let video_poster = '';
+    let img_url = '';
+    if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[activeTab] && props.heroData.tabContent[activeTab]['bg_color']){
+        bgClass = HDSColor(props.heroData.tabContent[activeTab]['bg_color'])
+    }
+    if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[activeTab] && props.heroData.tabContent[activeTab]['bg_color_tab']){
+        bgTabClass = HDSColor(props.heroData.tabContent[activeTab]['bg_color_tab'])
+    }
+    if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[activeTab] && props.heroData.tabContent[activeTab]['video_url']){
+        video_url = props.heroData.tabContent[activeTab]['video_url']
+    }
+    if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[activeTab] && props.heroData.tabContent[activeTab]['video_poster']){
+        video_poster = props.heroData.tabContent[activeTab]['video_poster']
+    }
+    if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[activeTab] && props.heroData.tabContent[activeTab]['img_url']){
+        img_url = props.heroData.tabContent[activeTab]['img_url']
+    }
+
+    return (
+        <div className={`${bgClass} max-w-7xl rounded-3xl`} >
+            {props.heroData.navTabs &&
+
+                <div className='pt-5 px-8 db:p-20 tb:p-10 flex flex-col shadow rounded-2xl'>
+
+                    <div className='flex overflow-visible scrollbar-hide tb-l:justify-center justify-start'>
+                        <div className={`${bgTabClass} rounded-[32px]`}>
+                            <Tab
+                                onTabClick={handleTabClick}
+                                tabs={props.heroData.navTabs}
+                            />
+                        </div>
+                    </div>
+                    <div className='flex flex-col-reverse pt-6 tb:flex tb:flex-row tb:items-center tb:pt-10 tb:justify-between'>
+                        <div className=' mt-3 db:max-w-[488px] tb:w-1/2'>
+                            {props.heroData.tabContent &&
+                                props.heroData.tabContent[activeTab] &&
+                                tabCard(props.heroData.tabContent[activeTab])}
+                        </div>
+                        <div className=' db:max-w-[540px] tb:w-1/2 '>
+                            <MediaBox
+                                video_url = {video_url}
+                                video_poster = {video_poster}
+                                img_url = {img_url}
+                            />
+                        </div>
+                    </div>
+
+                    <div>
+                        {LinkCardsFn(props.heroData)}
+                     </div>   
+                </div>
+
+            }
+
+        </div>
+    )
+}

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

@@ -1,2 +1,3 @@
 export {default as Hero1} from './h1'
-export {default as HeroSecondary} from './h2'
+export {default as HeroSecondary} from './h2'
+export {default as HeroCapability} from './h3'

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

@@ -27,7 +27,7 @@ export default function Tab(props) {
   };
 
   return (
-    <div>
+    <div className=''>
       <div className="block">
         <nav className="relative inline-flex gap-2 rounded-full" aria-label="Tabs">
           {tabs.map(tab => (
@@ -36,8 +36,8 @@ export default function Tab(props) {
               href="#"
               className={`px-3 py-1 font-medium text-sm rounded-full ${
                 activeTab === tab
-                  ? ' first:bg-blue-500  text-neutral-0 transition-all  delay-100 duration-100 '
-                  : 'text-neutral-500 transition-all delay-200  flex-nowrap '
+                  ? ' first:bg-blue-500  text-neutral-0 transition-all  delay-500 duration-100 '
+                  : 'text-neutral-500 transition-all flex-nowrap '
               }`}
               aria-current={activeTab === tab ? 'page' : undefined}
               onClick={(event) => handleTabClick(event, tab)}

package/src/HDS/foundation/Typography/Typography.js

@@ -16,6 +16,7 @@ export default function Typography(props) {
         'h4': 'text-hds-m-h4 tb:text-hds-t-h4 db:text-hds-d-h4',
         'h5': 'text-hds-m-h5 tb:text-hds-t-h5 db:text-hds-d-h5',
         'h6': 'text-hds-m-h6 tb:text-hds-t-h6 db:text-hds-d-h6',
+        'h7': 'text-hds-m-h7 tb:text-hds-t-h7 db:text-hds-d-h7',
         'sub1': 'text-hds-m-sub1 tb:text-hds-t-sub1 db:text-hds-d-sub1',
         'sub2': 'text-hds-m-sub2 tb:text-hds-t-sub2 db:text-hds-d-sub2',
         'body1': 'text-hds-m-body1 tb:text-hds-t-body1 db:text-hds-d-body1',

package/src/HDS/helpers/Grid/grid.js

@@ -0,0 +1,61 @@
+import React from 'react';
+
+const GridComponent = ({ cards, gridSize }) => {
+  const numCards = cards.length;
+  const cardsLeftInLastRow = numCards % gridSize;
+  const lastRowColSpan = `col-span-${gridSize / cardsLeftInLastRow}`;
+
+  const renderCards = () => {
+    return cards.map((card, index) => (
+      <div
+      className='gridClass'
+        key={index}
+      >
+        {/* Render card content */}
+        {card}
+      </div>
+    ));
+  };
+
+  return (
+    <div className='flex flex-wrap'>
+      {renderCards()}
+    </div>
+  );
+};
+
+export default GridComponent;
+
+
+
+
+// 2x2, 3x3, 4x4
+// odd even 
+
+//2x2 -odd grid grid-cols-2
+    //case 1: NOC = 3 
+    //                 .... .... 
+    //                 ......... colr-span-2  
+
+
+//3x3 -odd 
+    //case 1: noc:5
+    ///              ... ... ...
+            //       ..... ..... col-span-1.5 col-span-1.5
+    //case 2: noc:4
+    ///              ... ... ...
+            //       ........... col-span-3
+
+
+
+//4x4 
+
+// case1: noc 5:   
+//                  .. .. .. ..
+//                  ........... col-span-4
+// case2: noc 6:   
+//                  .. .. .. ..
+//                  ..... ..... col-span-2 col span-2
+// case1: noc 7:   
+//                  .. .. .. ..
+//                  ... ... ... col-span-4/3 col-span-4/3 col-span-4/3

package/src/HDS/helpers/Grid/index.js

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

package/src/HDS/helpers/Media/mediabox.js

@@ -20,7 +20,7 @@ export default function MediaViewer ({ img_url, video_url, video_poster, width }
         </div>
       )}
 
-      {video_url && video_poster && (
+      {video_url && !img_url && video_poster && (
         <div>
           {!isVideoPlaying ? (
             <div className='relative flex justify-center'>

package/src/index.css

@@ -3,6 +3,15 @@
 @tailwind utilities;
 /* Typography classes */
 
+.gridAutoClass {
+  flex: 1 0 30%;
+  margin-top: 40px;
+  margin-right: 32px;
+  background: blue;
+  justify-content: center;
+  display: flex;
+}
+
 @keyframes pill-move-left {
   0% {
     left: 0;