hds-web 1.11.8 → 1.12.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hds-web",
-  "version": "1.11.8",
+  "version": "1.12.1",
   "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/modules/Cards/dataSourceCard.js

@@ -18,7 +18,7 @@ export default function DataSourcesCard(props) {
                         && (<div className="flex flex-col gap-4">
                             <Typography textStyle='h3' className='text-neutral-1000 db:block hidden'>{props.title}</Typography>
                             <Typography textStyle='sub2' className='text-neutral-600 db:mt-0 mt-4 '>{props.description}</Typography>
-                        </div>)}https://pr-3736---main-site-nextjs-5kcgrtdh3a-wl.a.run.app
+                        </div>)}
                     {props.CTA &&
                         <div className="mt-4 tb:mt-6 flex">
                             <a href={props.CTA['url']}>

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;
   }
-}
+}