hds-web 1.29.2 → 1.29.4

package/package.json

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

package/src/HDS/components/Cards/Dropdown/v3Dropdown.js

@@ -1,8 +1,6 @@
 import React from "react"
-import PropTypes from 'prop-types';
 import { HDSColor } from "../../../foundation/ColorPalette"
-import { FlyoutB, FlyoutA, FlyoutC } from '../Menu';
-import { Icon } from "../../common-components";
+import { FlyoutB, FlyoutA, FlyoutC, FlyoutD } from '../Menu';
 
 export default function DropdownA(props) {
   return (
@@ -52,6 +50,19 @@ export default function DropdownA(props) {
           </div>
         </div>
         } */}
+        {props.flyoutD &&
+        <>
+          <div className=' bg-neutral-0 shadow rounded-2xl w-full tb-l:w-[170px]  tb-xl:w-[223px] px-6 py-6 mt-2  tb-l:mt-0'>
+            <div>
+
+            <FlyoutD
+              {...props.flyoutD}
+              />
+              </div>
+          </div>
+        </>
+
+        }
 
 
       </div>

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

@@ -0,0 +1,43 @@
+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 stroke-2'
+                    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/index.js

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

package/src/HDS/components/Headers/v3Header.js

@@ -54,7 +54,7 @@ export default function V3Header(props) {
         });
     };
 
-    const renderDropdown = (primaryCard, secondaryCardArr, tertiaryCard) => (
+    const renderDropdown = (primaryCard, secondaryCardArr, tertiaryCard, flyoutD) => (
         <div>
             <div>
                 <hr className="w-full h-6 border-0" />
@@ -64,13 +64,14 @@ export default function V3Header(props) {
                     primaryCard={primaryCard}
                     secondaryCardArr={secondaryCardArr}
                     tertiaryCard={tertiaryCard}
+                    flyoutD={flyoutD}
                 />
             </div>
         </div>
     );
 
     const renderDropdownContainer = (headerList, id) => {
-        const { title, primaryCard, secondaryCardArr, tertiaryCard } = headerList[id];
+        const { title, primaryCard, secondaryCardArr, tertiaryCard, flyoutD } = headerList[id];
 
         return (
             <div id={`dropdown_${id}`}>
@@ -114,7 +115,8 @@ export default function V3Header(props) {
                                         {renderDropdown(
                                             primaryCard,
                                             secondaryCardArr,
-                                            tertiaryCard
+                                            tertiaryCard,
+                                            flyoutD
                                         )}
                                     </motion.div>
                                 </div>
@@ -170,6 +172,7 @@ export default function V3Header(props) {
                             primaryCard={HEADER_LIST[0]['primaryCard']}
                             secondaryCardArr={HEADER_LIST[0]['secondaryCardArr']}
                             tertiaryCard={HEADER_LIST[0]['tertiaryCard']}
+                            flyoutD={HEADER_LIST[0]['flyoutD']}
                         />
 
                     </motion.div>)}
@@ -577,7 +580,13 @@ V3Header.defaultProps = {
                         ],
                         label: 'Data sources'
                     }
-                ]
+                ],
+            flyoutD:{
+                link:'https://hasura.io/ai',
+                IconVariant:'aibot',
+                btnLabel:'AI with Hasura',
+                description:'Use Hasura Notebook to get Gen AI querying over your structured private data sources via GraphQL and REST APIs'
+            }
         },
         {
 

package/src/styles/tailwind.css

@@ -1526,6 +1526,20 @@ select{
   -webkit-line-clamp: 3;
 }
 
+.line-clamp-4{
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+}
+
+.line-clamp-5{
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 5;
+}
+
 .block{
   display: block;
 }
@@ -1742,6 +1756,20 @@ select{
   height: 100vh;
 }
 
+.h-fit{
+  height: -webkit-fit-content;
+  height: -moz-fit-content;
+  height: fit-content;
+}
+
+.h-\[124px\]{
+  height: 124px;
+}
+
+.h-\[200px\]{
+  height: 200px;
+}
+
 .max-h-\[144px\]{
   max-height: 144px;
 }
@@ -1790,6 +1818,14 @@ select{
   max-height: 100vh;
 }
 
+.max-h-\[124px\]{
+  max-height: 124px;
+}
+
+.max-h-\[175px\]{
+  max-height: 175px;
+}
+
 .min-h-\[12px\]{
   min-height: 12px;
 }
@@ -2016,6 +2052,22 @@ select{
   width: 100vw;
 }
 
+.w-\[175px\]{
+  width: 175px;
+}
+
+.w-\[223px\]{
+  width: 223px;
+}
+
+.w-\[50px\]{
+  width: 50px;
+}
+
+.w-\[100px\]{
+  width: 100px;
+}
+
 .min-w-\[11\.5rem\]{
   min-width: 11.5rem;
 }
@@ -2224,6 +2276,14 @@ select{
   max-width: min-content;
 }
 
+.max-w-\[175px\]{
+  max-width: 175px;
+}
+
+.max-w-\[56px\]{
+  max-width: 56px;
+}
+
 .flex-1{
   flex: 1 1 0%;
 }
@@ -2756,6 +2816,12 @@ select{
   overflow-y: scroll;
 }
 
+.truncate{
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .whitespace-nowrap{
   white-space: nowrap;
 }
@@ -10076,6 +10142,10 @@ select{
   background-color: rgb(133 77 24 / var(--tw-bg-opacity));
 }
 
+.hover\:stroke-blue-600:hover{
+  stroke: #1E56E3;
+}
+
 .hover\:pl-\[9px\]:hover{
   padding-left: 9px;
 }
@@ -10585,6 +10655,11 @@ select{
   background-color: rgb(219 198 255 / var(--tw-bg-opacity));
 }
 
+.group\/icon:hover .group-hover\/icon\:bg-blue-200{
+  --tw-bg-opacity: 1;
+  background-color: rgb(223 232 255 / var(--tw-bg-opacity));
+}
+
 .group:hover .group-hover\:bg-gradient-to-t{
   background-image: linear-gradient(to top, var(--tw-gradient-stops));
 }
@@ -10637,6 +10712,10 @@ select{
   stroke: #111927;
 }
 
+.group\/icon:hover .group-hover\/icon\:stroke-blue-600{
+  stroke: #1E56E3;
+}
+
 .group\/btn:hover .group-hover\/btn\:text-blue-600{
   --tw-text-opacity: 1;
   color: rgb(30 86 227 / var(--tw-text-opacity));
@@ -11946,6 +12025,14 @@ select{
     height: 100%;
   }
 
+  .tb-l\:h-\[124px\]{
+    height: 124px;
+  }
+
+  .tb-l\:h-12{
+    height: 3rem;
+  }
+
   .tb-l\:min-h-\[518px\]{
     min-height: 518px;
   }
@@ -11980,6 +12067,26 @@ select{
     width: 100%;
   }
 
+  .tb-l\:w-\[175px\]{
+    width: 175px;
+  }
+
+  .tb-l\:w-\[223px\]{
+    width: 223px;
+  }
+
+  .tb-l\:w-\[150px\]{
+    width: 150px;
+  }
+
+  .tb-l\:w-\[170px\]{
+    width: 170px;
+  }
+
+  .tb-l\:w-12{
+    width: 3rem;
+  }
+
   .tb-l\:min-w-\[400px\]{
     min-width: 400px;
   }
@@ -12202,6 +12309,28 @@ select{
   }
 }
 
+@media (min-width: 970px){
+  .tb-xl\:h-\[124px\]{
+    height: 124px;
+  }
+
+  .tb-xl\:h-12{
+    height: 3rem;
+  }
+
+  .tb-xl\:w-\[175px\]{
+    width: 175px;
+  }
+
+  .tb-xl\:w-\[223px\]{
+    width: 223px;
+  }
+
+  .tb-xl\:w-12{
+    width: 3rem;
+  }
+}
+
 @media (min-width: 1024px){
   .lg\:flex{
     display: flex;
@@ -12258,6 +12387,10 @@ select{
     width: 100%;
   }
 
+  .db-s\:w-\[223px\]{
+    width: 223px;
+  }
+
   .db-s\:min-w-fit{
     min-width: -webkit-fit-content;
     min-width: -moz-fit-content;
@@ -12404,6 +12537,10 @@ select{
     width: 100%;
   }
 
+  .db\:w-\[175px\]{
+    width: 175px;
+  }
+
   .db\:min-w-\[550px\]{
     min-width: 550px;
   }