fix: CardTitle to h3, element loader css issue

GovAlta · Aug 6, 2021 · a13cea3 · a13cea3
1 parent 21e8f61
commit a13cea3
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 30 deletions.
diff --git a/libs/core-css/src/lib/styles/card/card.scss b/libs/core-css/src/lib/styles/card/card.scss
@@ -19,15 +19,15 @@
 
     .goa-text {
       color: $goa-text-color;
-      font-size: 18px;
+      font-size: var(--fs-base);
       line-height: 28px;
     }
 
     .goa-footer {
-      font-size: 16px;
+      font-size: var(--fs-base);
     }
     .goa-title {
-      font-size: 24px;
+      font-size: var(--fs-xl);
       font-weight: 400;
       line-height: 32px;
     }

diff --git a/libs/react-components/src/experimental/element-loader/element-loader.tsx b/libs/react-components/src/experimental/element-loader/element-loader.tsx
@@ -91,9 +91,9 @@ export const GoAElementLoader = ({
         />
         <path
           d={getArc(75, 100, radius - 7 / 2, radius, false)}
-          stroke-width="7"
+          strokeWidth="7"
           stroke={`${spinnerColour}`}
-          stroke-linecap="round"
+          strokeLinecap="round"
         />
       </svg>
     )

diff --git a/libs/react-components/src/lib/card/card.component.tsx b/libs/react-components/src/lib/card/card.component.tsx
@@ -1,4 +1,4 @@
-import React, { CSSProperties, FC, ReactNode, useEffect, useRef, useState } from 'react';
+import React, { FC, ReactNode, useState } from 'react';
 import '../../theme.scss';
 import './card.scss';
 
@@ -48,7 +48,7 @@ export const GoACard: FC<Props> = ({
         <div className="goa-title" data-testid='card-title'>
           {titleUrl
             ? <a href={titleUrl} data-testid='card-title-link'>{title}</a>
-            : <h1>{title}</h1>
+            : <h3>{title}</h3>
           }
         </div>
         <p className="goa-text" data-testid='card-content'>{content ?? description}</p>

diff --git a/libs/react-components/src/lib/card/card.stories.mdx b/libs/react-components/src/lib/card/card.stories.mdx
@@ -248,6 +248,23 @@ export const skeletonTemplate = (args) => {
   </Story>
 </Canvas>
 
+### Plain Text Title
+
+<Canvas>
+  <Story
+    name="PlainTextTitle"
+    height="400px"
+    args={{
+      title: 'Energy Diversification Act',
+      description:
+        'We are encouraging companies to turn out oil and gas resources into more valuable.',
+      cardWidth: 'auto',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
 ## Examples
 
 ### Basic

diff --git a/package-lock.json b/package-lock.json