Merge pull request #286 from centrica-engineering/feature/content-tables

Feature/content tables

src/components/specification.astro

@@ -29,7 +29,7 @@ const events = compDetails?.events;
             return (
               <tr>
                 <td><code>{attribute.name}</code></td>
-                <td>{attribute.type}</td>
+                <td>{attribute.type?.replaceAll('"', ' ')}</td>
                 <td>{attribute.default?.replaceAll('"', '')}</td>
                 <td>{attribute.description ?? ''}</td>
               </tr>
@@ -62,7 +62,7 @@ const events = compDetails?.events;
             return (
               <tr>
                 <td><code>{property.name}</code></td>
-                <td>{property.type}</td>
+                <td>{property.type?.replaceAll('"', ' ')}</td>
                 <td>{property.default?.replaceAll('"', '')}</td>
                 <td>{property.description}</td>
               </tr>

src/content/docs/components/ns-accordion.mdx

@@ -44,7 +44,9 @@ We use accordions to break down content into meaningful sections, helping to red
 
 ### Standard
 
-![Labelled diagram of the Accordion component](../../../assets/components/ns-accordion/content-guidance.webp)
+![Labelled diagram of the Accordion component](../../../assets/components/ns-accordion/guidance.webp)
+
+#### Key
 
 | Key | Field type | Guidelines |
 | :--- | :--- | :--- |

src/content/docs/components/ns-alert.mdx

@@ -35,31 +35,41 @@ More information in the [Accessibility](#accessibility) section.
 
 #### Highlighter
 
-##### `error`
+`type="highlighter"`
+
+##### Error
+
+`state="error"`
 
 For communicating failure with urgence. A task cannot be completed without the user remedying something.
 
 <ExampleViewer>
   <ExampleHighlighterError slot="template" />
 </ExampleViewer>
 
-##### `info`
+##### Info
+
+`state="info"`
 
 For communicating a useful piece of information that the user might find helpful to carry out their action.
 
 <ExampleViewer>
   <ExampleHighlighterInfo slot="template" />
 </ExampleViewer>
 
-##### `success`
+##### Success
+
+`state="success"`
 
 For communicating that an action has been successful.
 
 <ExampleViewer>
   <ExampleHighlighterSuccess slot="template" />
 </ExampleViewer>
 
-##### `warning`
+##### Warning
+
+`state="warning"`
 
 Use for communicating a piece of information with less severity. These include foreseeable problematic events, failures, outages and how to avoid errors.
 
@@ -81,7 +91,9 @@ Use for communicating a piece of information with less severity. These include f
 
 ### Highlighter
 
-![](../../../assets/components/ns-alert/highlighter/content-guidance.webp)
+![](../../../assets/components/ns-alert/guidance-highlighter.webp)
+
+#### Key
 
 | Key | Field type | Guidelines |
 | :--- | :--- | :--- |

src/content/docs/components/ns-card.mdx

@@ -75,7 +75,9 @@ Cards are used to apply a container around a related grouping of information; th
 
 ### Section
 
-![](../../../assets/components/ns-card/content-guidance-section.webp)
+![](../../../assets/components/ns-card/guidance-section.webp)
+
+#### Key
 
 | Key | Field type | Guidelines |
 | :--- | :--- | :--- |
@@ -86,7 +88,9 @@ Cards are used to apply a container around a related grouping of information; th
 
 ### Support
 
-![](../../../assets/components/ns-card/content-guidance-suppport.webp)
+![](../../../assets/components/ns-card/guidance-suppport.webp)
+
+#### Key
 
 | Key | Field type | Guidelines |
 | :--- | :--- | :--- |
@@ -97,7 +101,9 @@ Cards are used to apply a container around a related grouping of information; th
 
 ### Flat
 
-![](../../../assets/components/ns-card/content-guidance-flat.webp)
+![](../../../assets/components/ns-card/guidance-flat.webp)
+
+#### Key
 
 | Key | Field type | Guidelines |
 | :--- | :--- | :--- |

src/content/docs/components/ns-inputter.mdx

@@ -39,7 +39,7 @@ If you would like to use a password input then please see the [ns-password](/com
   <ExampleStandard slot="template" />
 </ExampleViewer>
 
-### Example
+### Most common input types
 
 #### Text
 

src/content/docs/components/ns-landmark.mdx

@@ -79,7 +79,9 @@ Landmarks are used to set the scene for what the page is for, what offers might
 
 ### Summit
 
-![](../../../assets/components/ns-landmark/content-guidance-summit.webp)
+![](../../../assets/components/ns-landmark/guidance-summit.webp)
+
+#### Key
 
 | Key | Field type | Guidelines |
 | :--- | :--- | :--- |
@@ -91,15 +93,14 @@ Landmarks are used to set the scene for what the page is for, what offers might
 | 💚 Do | 💔 Don't |
 | :--- | :--- |
 | Capture the moment. | Allow the card to cover important content. |
-| ![do-father-child](../../../assets/components/ns-landmark/best-practice-do1-summit.webp) | ![dont-covered-family](../../../assets/components/ns-landmark/best-practice-dont1-summit.webp) |
 | Set focus of the photo correctly. | Obstruct people's faces with the card. |
-| ![do-couple-on-sofa](../../../assets/components/ns-landmark/best-practice-do2-summit.webp) | ![dont-obstructed-face](../../../assets/components/ns-landmark/best-practice-dont2-summit.webp) |
 | Convey activity related to topic. | Use images with a white background. |
-| ![do-boiler-service](../../../assets/components/ns-landmark/best-practice-do3-summit.webp) | ![dont-boiler-on-white-background](../../../assets/components/ns-landmark/best-practice-dont3-summit.webp) |
 
 ### Hillside
 
-![](../../../assets/components/ns-landmark/content-guidance-hillside.webp)
+![](../../../assets/components/ns-landmark/guidance-hillside.webp)
+
+#### Key
 
 | Key | Field type | Guidelines |
 | :--- | :--- | :--- |
@@ -111,18 +112,18 @@ Landmarks are used to set the scene for what the page is for, what offers might
 | 💚 Do | 💔 Don't |
 | :--- | :--- |
 | Use the same colour for a set of pages on the same topic, e.g. Guide pages related to boilers. | Use the red decoration for something that is not a promotional promotional or an error-themed page. |
-| ![do-use-same-colour-for-themed-pages](../../../assets/components/ns-landmark/best-practice-do1-hillside.webp) | Add too much content in the landmark. |
 | Keep the content concise. |  |
-| ![do-keep-content-concise](../../../assets/components/ns-landmark/best-practice-do2-hillside.webp) |  |
 
 ### Valley
 
-![](../../../assets/components/ns-landmark/content-guidance-valley.webp)
+![](../../../assets/components/ns-landmark/guidance-valley.webp)
 
 :::note
 The purpose of the valley landmark is to present an overview of a product or service as a user moves down the funnel of their purchase journey. A CTA may be used, but is not recommended in scenarios where the objective is to encourage further on-page browsing.
 :::
 
+#### Key
+
 | Key | Field type | Guidelines |
 | :--- | :--- | :--- |
 | A | Main Heading | The recommended length is between 4 and 12 words, not exceeding 50 characters in total. |
@@ -134,15 +135,14 @@ The purpose of the valley landmark is to present an overview of a product or ser
 | 💚 Do | 💔 Don't |
 | :--- | :--- |
 | Use checked list to highlight your key product benefits | Add a CTA if the purpose of the page is for users to consume the content. |
-| ![use-a-checked-list](../../../assets/components/ns-landmark/best-practice-do1-valley.webp) | ![dont-add-a-cta](../../../assets/components/ns-landmark/best-practice-dont1-valley.webp) |
 | Use a complementary image to add context to your product or service | Use long, verbose content. Keep the user interested with a snappy overview and draw them down the page |
-| ![complementary-image](../../../assets/components/ns-landmark/best-practice-do2-valley.webp) | ![use-short-content](../../../assets/components/ns-landmark/best-practice-dont2-valley.webp) |
 | Use colour, pill and ratio options for alternative aesthetics | Forget to use an image |
-| ![use-colour-and-ratio-options](../../../assets/components/ns-landmark/best-practice-do3-valley.webp) | ![use-an-image](../../../assets/components/ns-landmark/best-practice-dont3-valley.webp) |
 
 ### Lakeside
 
-![](../../../assets/components/ns-landmark/content-guidance-lakeside.webp)
+![](../../../assets/components/ns-landmark/guidance-lakeside.webp)
+
+#### Key
 
 | Key | Field type | Guidelines |
 | :--- | :--- | :--- |
@@ -153,11 +153,8 @@ The purpose of the valley landmark is to present an overview of a product or ser
 | 💚 Do | 💔 Don't |
 | :--- | :--- |
 | Use more than one paragraph. | Use more than three paragraphs. |
-| ![do-use-more-than-one-paragraph](../../../assets/components/ns-landmark/best-practice-do1-lakeside.webp) | ![dont-use-more-than-three-paragraphs](../../../assets/components/ns-landmark/best-practice-dont1-lakeside.webp) |
 | Display 400 and 500 error pages. | Use to build a page. |
-| ![display-400-and-500-error-pages](../../../assets/components/ns-landmark/best-practice-do2-lakeside.webp) | ![dont-even-this-about-building-a-page-with-it](../../../assets/components/ns-landmark/best-practice-dont2-lakeside.webp) |
 | Get to the point, in this scenario the Sub heading and CTA have been omitted. |  |
-| ![do-get-to-the-point](../../../assets/components/ns-landmark/best-practice-do3-lakeside.webp) |  |
 
 ### Considerations
 

src/styles/custom.css

@@ -66,6 +66,39 @@ main {
   }
 }
 
+/* NOTE: @drew - 2024-01-05 - 
+  [1] - this is a hack to remove the table heading for the Guidance table that follows the heading of "Key"
+  [2] - this is to override the starlight css that set's `<table>` as `display:block;`
+  [3] - force the table to fill the full width of the content
+  [4] - this is to stop any `<code>` in a table from wrapping. This happens when the content in the table is forcing other columns to be narrow
+  [5] - this is to remove the alternating background color on the table rows
+  [6] - this is to left align the content in the table cells
+*/
+.sl-markdown-content {
+  [id^="key"] + table thead {
+    display: none; /* [1] */
+  }
+
+  table {
+    display: table; /* [2] */
+    width: 100%; /* [3] */
+
+    code {
+      white-space: nowrap; /* [4] */
+    }
+
+    tr:nth-child(2n) {
+      background-color: initial; /* [5] */
+    }
+
+    th,
+    td {
+      text-align: left; /* [6] */
+    }
+  }
+}
+
+/* NOTE: @drew - 2024-01-05 - removing the margin on the h1, which is in the masthead */
 h1 {
   margin-top: 0;
 }