Merge pull request #289 from WestpacGEL/280-article-page-article-lead…

…ing-text-on-top-as-a-component fixes #280 line-height container size
WestpacGEL · Nov 15, 2023 · a07b453 · a07b453 · vercel · Nov 15, 2023
2 parents 0641c10 + bf4ec5f
commit a07b453
Show file tree

Hide file tree

Showing 6 changed files with 96 additions and 14 deletions.
diff --git a/apps/site/src/app/articles/[article]/components/article-page/article-page.component.tsx b/apps/site/src/app/articles/[article]/components/article-page/article-page.component.tsx
@@ -19,7 +19,7 @@ export function ArticlePage({ article, author }: ArticlePageProps) {
           <Container className=" pt-8 xsl:pt-10 sm:pt-11">
             <Grid className="gap-y-5 xsl:gap-y-6 sm:gap-y-8">
               <div className="col-span-12">
-                <h1 className="typography-site-6 mb-2 font-black tracking-[-1px] xsl:typography-site-3 xsl:mb-2">
+                <h1 className="typography-site-6 mb-2 font-black !leading-[1.1] tracking-[-1px] xsl:typography-site-3 xsl:mb-3">
                   {article.name}
                 </h1>
                 <p className="typography-site-9 text-gel-muted">{author?.name}</p>
@@ -35,14 +35,16 @@ export function ArticlePage({ article, author }: ArticlePageProps) {
           </Container>
         </div>
         <Container>
-          <div className="mx-auto w-full pb-9 xsl:w-10/12 md:w-8/12">
-            <LeadingText text={article.description} />
-            <DocumentRenderer
-              document={article.content}
-              renderers={DOCUMENT_RENDERERS}
-              componentBlocks={ArticleComponentBlocksComponents}
-            />
-          </div>
+          <Grid>
+            <div className="col-span-12 pb-9 xsl:col-span-10 xsl:col-start-2 md:col-span-8 md:col-start-3">
+              <LeadingText text={article.description} />
+              <DocumentRenderer
+                document={article.content}
+                renderers={DOCUMENT_RENDERERS}
+                componentBlocks={ArticleComponentBlocksComponents}
+              />
+            </div>
+          </Grid>
         </Container>
       </div>
       <StickyFooter />

diff --git a/apps/site/src/app/articles/[article]/components/heading/heading.style.ts b/apps/site/src/app/articles/[article]/components/heading/heading.style.ts
@@ -10,7 +10,7 @@ export const styles = tv({
     },
     level: {
       1: 'typography-site-5 mb-5',
-      2: 'typography-site-7 mb-5 xsl:typography-site-6',
+      2: 'typography-site-7 mb-4 xsl:typography-site-6 xsl:mb-5',
       3: 'typography-site-7 mb-5',
       4: 'typography-site-9 mb-5',
       5: 'typography-site-10 mb-2',

diff --git a/...src/components/component-blocks/components/article-body-image/article-body-image.style.ts b/...src/components/component-blocks/components/article-body-image/article-body-image.style.ts
@@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv({
   slots: {
-    base: 'relative mx-0 my-4 md:-mx-18',
+    base: 'relative mx-0 my-7 xsl:my-9 md:-mx-17',
     img: 'block w-full',
     caption: 'typography-body-10 mt-2 text-muted',
   },

diff --git a/apps/site/src/components/component-blocks/components/leading-text/leading-text.style.ts b/apps/site/src/components/component-blocks/components/leading-text/leading-text.style.ts
@@ -1,5 +1,5 @@
 import { tv } from 'tailwind-variants';
 
 export const styles = tv({
-  base: 'typography-site-8 mx-0 mb-9 leading-[1.6] xsl:typography-site-7 xsl:leading-[1.6] md:-mx-16',
+  base: 'typography-site-8 mx-0 mb-9 leading-[1.6] xsl:typography-site-7 xsl:leading-[1.6] md:-mx-17',
 });
diff --git a/apps/site/src/components/document-renderer/list/list.style.ts b/apps/site/src/components/document-renderer/list/list.style.ts
@@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv({
   slots: {
-    base: 'mb-11 w-full p-0 leading-[2] last:mb-0',
+    base: 'my-4 w-full p-0 leading-[2] last:mb-0',
     li: 'relative mb-2 pl-3 leading-7',
   },
   variants: {

diff --git a/apps/site/src/content/design-system/components/compacta/design/Error states/content.mdoc b/apps/site/src/content/design-system/components/compacta/design/Error states/content.mdoc
@@ -1,3 +1,83 @@
 When a user attempts to progress through the form, errors are captured at this point. Any Compacta that has an error will automatically open and highlight the error inline.
 
-Loading...
+```tsx
+() => {
+  const [inputs, setInputs] = useState({});
+
+  const handleChange = e => {
+    setInputs(prev => ({ ...prev, [e.target.name]: e.target.value }));
+  };
+
+  return (
+    <Compacta>
+      {({ id, setPrimaryTitle, setSecondaryTitle, setTertiaryTitle }) => (
+        <Form spacing="large">
+          <Form.Group>
+            <Field
+              label="Primary"
+              hintMessage="Select your card insitution"
+              errorMessage="Error message goes here if activated"
+            >
+              <Select
+                name={`input-primary-${id}`}
+                value={inputs[`input-primary-${id}`] || ''}
+                onChange={e => {
+                  handleChange(e);
+                  setPrimaryTitle(e.target.value);
+                }}
+                width={30}
+                invalid
+              >
+                <option>Select</option>
+                <option>AMP Bank</option>
+                <option>ANZ - Australia and New Zealand Banking Group</option>
+                <option>Bank of Queensland</option>
+                <option>Bendigo Bank</option>
+                <option>CBA - Commonwealth Bank</option>
+                <option>Macquarie Bank</option>
+                <option>NAB - National Australian Bank</option>
+                <option>Westpac Bank</option>
+              </Select>
+            </Field>
+          </Form.Group>
+          <Form.Group>
+            <Field
+              label="Account number"
+              hintMessage="Refer to a statement from the card’s financial institution"
+              errorMessage="Error message goes here if activated"
+            >
+              <Input
+                name={`input-secondary-${id}`}
+                value={inputs[`input-secondary-${id}`] || ''}
+                onChange={e => {
+                  handleChange(e);
+                  setSecondaryTitle(e.target.value);
+                }}
+                width={30}
+                invalid
+              />
+            </Field>
+          </Form.Group>
+          <Form.Group>
+            <InputField
+              name={`input-tertiary-${id}`}
+              value={inputs[`input-tertiary-${id}`] || ''}
+              onChange={e => {
+                handleChange(e);
+                setTertiaryTitle(e.target.value);
+              }}
+              width={20}
+              invalid
+              errorMessage="Error message goes here if activated"
+              before="$"
+              label="Amount to transfer"
+            >
+              <Input invalid />
+            </InputField>
+          </Form.Group>
+        </Form>
+      )}
+    </Compacta>
+  );
+};
+```