hds-web 1.12.0 → 1.12.2

package/package.json

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

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

@@ -1,2 +1,3 @@
 export {default as Badges} from './badges';
-export {default as Count} from './count';
+export {default as Count} from './count';
+export {default as LiveStatus} from './livestatus';

package/src/HDS/components/BadgesCaption/livestatus.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Icon } from '../common-components/Icon';
+import {Typography} from '../../foundation/Typography'
+import { HDSColor } from '../../foundation/ColorPalette';
+
+export default function LiveStatus(props) {
+  const bgColorClass = HDSColor(props.bgClass);
+  const textColorClass = HDSColor(props.statusTextClass);
+  const circleBgClass = HDSColor(props.statusCircleBgClass);
+  return (
+    <div className={`${bgColorClass} px-3 py-2 rounded-full inline-flex items-center`}>
+      <div className={`${circleBgClass} blinking mr-2 w-3 h-3 min-w-[12px] min-h-[12px] rounded-full`}></div>
+      <Typography textStyle="h6" as="h6" className={`${textColorClass} uppercase`}>{props.statusText}</Typography>
+    </div>
+  );
+}
+
+LiveStatus.defaultProps = {
+  statusText: "Live Now",
+  statusTextClass: "text-neutral-0",
+  bgClass: "bg-neutral-700",
+  statusCircleBgClass: "bg-green-400"
+
+};

package/src/HDS/components/Cards/Feedback/feedback.js

@@ -22,7 +22,7 @@ export default function FeedbackCard(props) {
           avatarType="secondary"
         />
         <div className={((props.dividerClass) ? "py-8" : "py-6")}>
-          <Typography textStyle='sub2' className='text-neutral-1000'>{props.description}</Typography>
+          <Typography textStyle='sub2' className='text-neutral-600'>{props.description}</Typography>
         </div>
       </div>
       <div className=" self-end">
@@ -39,7 +39,7 @@ export default function FeedbackCard(props) {
             <Typography textStyle={((props.dividerClass) ? "body2" : "body1")} className='text-neutral-600 pb-1'>{props.blurb}</Typography>
             <a href={props.caseStudyUrl} className="flex">
               <HDSButton
-                label='Read casestudy'
+                label='Read case study'
                 type='secondaryLink'
                 leftIconVariant='none'
                 rightIconVariant='none'
@@ -58,4 +58,4 @@ export default function FeedbackCard(props) {
       </div>
     </div>
   )
-}
+}

package/src/HDS/components/Footers/v3Footer.js

@@ -106,10 +106,14 @@ export default function V3Footer(props) {
           }
         </div>
         {isItems && !isError && (
-          <div className=' bg-neutral-0 rounded-full shadow px-4 py-2 inline-flex justify-center items-center'>
+          <>
+            <a href='https://status.hasura.io/' className=''>
+              <div className=' bg-neutral-0 rounded-full shadow hover:shadow-lg transition-all duration-300 px-4 py-2 inline-flex justify-center items-center'>
             <div className='w-4 h-4 bg-green-400 rounded-full mr-2'></div>
             <Typography textStyle='body3' className='text-neutral-1000'>{isItems?.status.description}</Typography>
           </div>
+          </a>
+          </>
         )}
         <div>
           <Typography textStyle='body3c' className='text-neutral-600 pt-4 tb-m:pt-0'>© {new Date().getFullYear()} Hasura Inc. All rights reserved</Typography>

package/src/index.css

@@ -36,7 +36,7 @@
   width: 100%;
   height: 100%;
   left: 0;
-  top: 0;  
+  top: 0;
 }
 
 /*test*/
@@ -89,23 +89,44 @@
   }
 }
 
+@keyframes up-right {
+  0% {
+    transform: scale(1);
+    opacity: 0.25;
+  }
+  50% {
+    transform: scale (1, 5);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0.25;
+  }
+}
+
+.blinking {
+  -webkit-animation: up-right 1s infinite;
+  -moz-animation: up-right 1s infinite;
+  -o-animation: up-right 1s infinite;
+  animation: up-right 1s infinite;
+}
 
 .card-animation-wrapper {
     position: relative;
   }
-  
+
   .card-animation-wrapper .feature-card {
     transition: all;
   }
-  
+
   .card-animation-wrapper .feature-card:first-child {
     animation: card1 15s infinite;
   }
-  
+
   .card-animation-wrapper .feature-card:nth-child(2) {
     animation: card2 15s infinite;
   }
-  
+
   .card-animation-wrapper .feature-card:nth-child(3) {
     animation: card3 15s infinite;
   }
@@ -560,19 +581,19 @@
 
   35% {
     left: 41%;
-    
+
     opacity: 1;
   }
 
   65% {
     left: 59%;
-   
+
     opacity: 1;
   }
 
   100% {
     left: 100%;
-   
+
     opacity: 0;
   }
 }
@@ -627,7 +648,7 @@
 
   100% {
     left: 100%;
-  
+
     opacity: 0;
   }
 }
@@ -654,7 +675,7 @@
 
   100% {
     left: 100%;
-    
+
     opacity: 0;
   }
-}
+}

package/src/styles/tailwind.css

@@ -1591,6 +1591,10 @@ select{
   max-height: 100%;
 }
 
+.min-h-\[12px\]{
+  min-height: 12px;
+}
+
 .min-h-\[20px\]{
   min-height: 20px;
 }
@@ -1777,6 +1781,10 @@ select{
   min-width: 112px;
 }
 
+.min-w-\[12px\]{
+  min-width: 12px;
+}
+
 .min-w-\[130px\]{
   min-width: 130px;
 }
@@ -7481,6 +7489,51 @@ select{
   }
 }
 
+@-webkit-keyframes up-right {
+  0% {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+    opacity: 0.25;
+  }
+
+  50% {
+    -webkit-transform: scale (1, 5);
+            transform: scale (1, 5);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+    opacity: 0.25;
+  }
+}
+
+@keyframes up-right {
+  0% {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+    opacity: 0.25;
+  }
+
+  50% {
+    -webkit-transform: scale (1, 5);
+            transform: scale (1, 5);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+    opacity: 0.25;
+  }
+}
+
+.blinking {
+  -webkit-animation: up-right 1s infinite;
+  animation: up-right 1s infinite;
+}
+
 .card-animation-wrapper {
   position: relative;
 }
@@ -11456,4 +11509,4 @@ select{
 .\[\&\>ul\]\:ps-4>ul{
   -webkit-padding-start: 1rem;
           padding-inline-start: 1rem;
-}
+}