feat: summary list component (#339)

Co-authored-by: BogdanDanilescu <153850559+BogdanDanilescu@users.noreply.github.com> Co-authored-by: “BogdanDanilescu” <bogdan.danilescu@nearform.com>
ogcio · Nov 28, 2024 · f6682be · f6682be
1 parent a65482b
commit f6682be
Show file tree

Hide file tree

Showing 17 changed files with 798 additions and 31 deletions.
diff --git a/apps/docs/content/3-components/2-library/summary-list.mdx b/apps/docs/content/3-components/2-library/summary-list.mdx
@@ -7,24 +7,142 @@ libraries:
     link: '?path=/docs/typography-summary-list--docs'
     status: 'stable'
   - platform: 'global'
-    status: 'considering'
+    link: '?path=/docs/typography-summary-list--docs'
+    status: 'beta'
   - platform: 'react'
-    status: 'considering'
+    link: '?path=/docs/typography-summary-list--docs'
+    status: 'beta'
 ---
 
 # Summary List
 
 ## Variants
 
+### Default
+
+<ComponentContainer className="gi-p-2">
+  <SummaryList>
+    <SummaryListRow label="Name">
+      <SummaryListValue>John Smith</SummaryListValue>
+      <SummaryListAction href="/change-name">Change name</SummaryListAction>
+    </SummaryListRow>
+    <SummaryListRow label="Date of Birth">
+      <SummaryListValue>8 November 1982</SummaryListValue>
+      <SummaryListAction href="/change-dob">
+        Change date of birth
+      </SummaryListAction>
+    </SummaryListRow>
+    <SummaryListRow label="Address">
+      <SummaryListValue>
+        72 Guild Street
+        <br />
+        London
+        <br />
+        SE23 6FH
+      </SummaryListValue>
+      <SummaryListAction href="/change-address">
+        Change address
+      </SummaryListAction>
+    </SummaryListRow>
+  </SummaryList>
+</ComponentContainer>
+
+<Tabs id="summary-list-default">
+  <TabList>
+    <TabItem value="html" checked>HTML</TabItem>
+    <TabItem value="macro">Macro</TabItem>
+    <TabItem value="react">React</TabItem>
+  </TabList>
+  <TabPanel value="html">
+  ```html
+  <div class="gi-summary-list" role="list" aria-label="Summary list">
+    <dl>
+      <dt>Name</dt>
+      <dd class="gi-summary-list-value">John Smith</dd>
+      <dd class="gi-summary-list-actions">
+        <a href="/change-name" aria-label="Link action: Change name">Change name</a>
+      </dd>
+    </dl>
+    <dl>
+      <dt>Date of Birth</dt>
+      <dd class="gi-summary-list-value">8 November 1982</dd>
+      <dd class="gi-summary-list-actions">
+        <a href="/change-dob" aria-label="Link action: Change date of birth">Change date of birth</a>
+      </dd>
+    </dl>
+    <dl>
+      <dt>Address</dt>
+      <dd class="gi-summary-list-value">
+        72 Guild Street
+        <br/>
+        London
+        <br/>
+        SE23 6FH
+        <br/>
+      </dd>
+      <dd class="gi-summary-list-actions">
+        <a href="/change-address" aria-label="Link action: Change address">Change address</a>
+      </dd>
+    </dl>
+  </div>
+  ```
+  </TabPanel>
+  <TabPanel value="macro"> 
+    ```html 
+        {{ govieSummaryList({ "rows":
+          [ { "label": "Name", "value": "John Smith", "action": { "href": "/change-name", "label": "Change name" } },
+            { "label": "Date of Birth", "value": "8 November 1982", "action": { "href": "/change-dob", "label": "Change date of birth" } },
+            { "label": "Address", "value": "72 Guild Street <br/> London <br/> SE23 6FH", "action": { "href": "/change-address", "label": "Change address" } } 
+          ]})
+        }} 
+    ```
+  </TabPanel>
+  <TabPanel value="react">
+    ```react
+        import { SummaryList, SummaryListRow, SummaryListValue, SummaryListAction } from '@govie-ds/react';
+
+        <SummaryList>
+          <SummaryListRow label="Name">
+            <SummaryListValue>John Smith</SummaryListValue>
+            <SummaryListAction href="/change-name">Change name</SummaryListAction>
+          </SummaryListRow>
+          <SummaryListRow label="Date of Birth">
+              <SummaryListValue>8 November 1982</SummaryListValue>
+              <SummaryListAction href="/change-dob">Change date of birth</SummaryListAction>
+          </SummaryListRow>
+          <SummaryListRow label="Address">
+            <SummaryListValue>
+              72 Guild Street 
+              <br/>
+              London
+              <br/>
+              SE23 6FH
+            </SummaryListValue>
+            <SummaryListAction href="/change-address">Change address</SummaryListAction>
+          </SummaryListRow>
+        </SummaryList>
+      ```
+  </TabPanel>
+</Tabs>
+
 ## Usage
 
 ### Best Practices
 
+- Use `<SummaryList>` to display structured summary information.
+- Include meaningful row `labels` and `values` for clarity and accessibility.
+- Add action links sparingly to ensure users can quickly interpret and act on the data.
+
 ### When to use this component
 
+- To summarise structured data, such as personal details or settings.
+- When there’s a need to display information concisely with optional actions for each item.
+
 ### When not to use this component
 
+- For presenting unstructured content or a long list of items.
+- When the primary purpose is navigation. Use a table or card component instead.
+
 ## Status
 
 <ComponentStatusBlock componentId="summary-list" />
-
diff --git a/apps/docs/src/components/document/common/mdx.tsx b/apps/docs/src/components/document/common/mdx.tsx
@@ -32,6 +32,10 @@ import {
   TextArea,
   TextInput,
   Toast,
+  SummaryList,
+  SummaryListRow,
+  SummaryListValue,
+  SummaryListAction,
 } from '@govie-ds/react';
 import { MDXComponents } from 'mdx/types';
 import { useMDXComponent } from 'next-contentlayer/hooks';
@@ -225,6 +229,10 @@ const documentComponents: MDXComponents = {
   ),
   Alert: (props) => <Alert {...props} />,
   Toast: (props) => <Toast {...props} />,
+  SummaryList: (props) => <SummaryList {...props} />,
+  SummaryListRow: (props) => <SummaryListRow {...props} />,
+  SummaryListAction: (props) => <SummaryListAction {...props} />,
+  SummaryListValue: (props) => <SummaryListValue {...props} />,
 };
 
 export function Mdx({ code }: MdxProps) {

diff --git a/examples/nextjs/src/app/page.tsx b/examples/nextjs/src/app/page.tsx
@@ -22,6 +22,10 @@ import {
   Stack,
   Alert,
   Toast,
+  SummaryListRow,
+  SummaryList,
+  SummaryListAction,
+  SummaryListValue,
 } from "@govie-ds/react";
 
 export default function Home() {
@@ -165,6 +169,31 @@ export default function Home() {
           <Alert title="Info Alert" dismissible>
             <Paragraph>This is the content</Paragraph>
           </Alert>
+
+          <SummaryList>
+            <SummaryListRow label="Name">
+              <SummaryListValue>John Smith</SummaryListValue>
+              <SummaryListAction href="/change-name">Change name</SummaryListAction>
+            </SummaryListRow>
+            <SummaryListRow label="Date of Birth">
+              <SummaryListValue>8 November 1982</SummaryListValue>
+              <SummaryListAction href="/change-dob">
+                Change date of birth
+              </SummaryListAction>
+            </SummaryListRow>
+            <SummaryListRow label="Address">
+              <SummaryListValue>
+                72 Guild Street 
+                <br/>
+                London
+                <br/>
+                SE23 6FH
+              </SummaryListValue>
+              <SummaryListAction href="/change-address">
+                Change address
+              </SummaryListAction>
+            </SummaryListRow>
+          </SummaryList>
         </div>
       </Container>
 

diff --git a/examples/wagtail/core/jinja/home_page.jinja b/examples/wagtail/core/jinja/home_page.jinja
@@ -20,6 +20,7 @@
 {% from 'combo-box/combo-box.html' import govieComboBox %}
 {% from 'alert/alert.html' import govieAlert %}
 {% from 'toast/toast.html' import govieToast %}
+{% from 'summary-list/summary-list.html' import govieSummaryList %}
 {% from 'pagination/pagination.html' import goviePagination %}
 
 {% from 'vars.jinja' import comboBoxProps, cookieBannerProps, modalProps, footerProps, HeaderProps, SelectProps, tabsProps, radioProps, listProps %}
@@ -226,6 +227,16 @@
     "children": "<div>Content</div>"
   }) }}
 
+  <h2>Summary List</h2>
+  <br />
+      {{ govieSummaryList(
+          { "rows": [
+            { "label": "Name", "value": "John Smith", "action": { "href": "/change-name", "label": "Change name" } },
+            { "label": "Date of Birth", "value": "8 November 1982", "action": { "href": "/change-dob", "label": "Change date of birth" } },
+            { "label": "Address", "value": "72 Guild Street <br/> London <br/> SE23 6FH", "action": { "href": "/change-address", "label": "Change address" } 
+          }]})
+      }} 
+  <br />
   <h2>Pagination</h2>
   {{ goviePagination({'totalPages': 10, 'currentPage': 5}) }}
 

diff --git a/examples/wagtail/core/jinja/vars.jinja b/examples/wagtail/core/jinja/vars.jinja
@@ -47,6 +47,7 @@
 
 {% set HeaderProps = {
     "logo": { "href": '/home' },
+    "fullWidth": false,
     "tools": {
       "search": {
         "action": '/search_page',

diff --git a/packages/design/tailwind/css/components.css b/packages/design/tailwind/css/components.css
@@ -821,76 +821,75 @@ input[type='file' i] {
 
 /* Native notyf classes */
 .notyf {
-  @apply !gi-gap-6
- }
+  @apply !gi-gap-6;
+}
 .notyf__toast {
- @apply !gi-m-0 !gi-p-0 !gi-min-w-[340px] !gi-max-w-[460px];
- animation-delay: 0s !important;
+  @apply !gi-m-0 !gi-p-0 !gi-min-w-[340px] !gi-max-w-[460px];
+  animation-delay: 0s !important;
 }
 .notyf__message {
- @apply !gi-w-full;
- animation-delay: 0s !important;
- }
+  @apply !gi-w-full;
+  animation-delay: 0s !important;
+}
 .notyf__wrapper {
- @apply !gi-m-0 !gi-p-0; 
+  @apply !gi-m-0 !gi-p-0;
 }
 .notyf__toast:has(.gi-toast-info) {
   @apply !gi-shadow-[0px_0px_25px_-5px_rgba(7,33,85,0.15)];
- }
- .notyf__toast:has(.gi-toast-success) {
+}
+.notyf__toast:has(.gi-toast-success) {
   @apply !gi-shadow-[0px_0px_25px_-5px_rgba(0,61,33,0.15)];
- }
- .notyf__toast:has(.gi-toast-warning) {
+}
+.notyf__toast:has(.gi-toast-warning) {
   @apply !gi-shadow-[0px_0px_25px_-5px_rgba(62,41,25,0.15)];
- }
- .notyf__toast:has(.gi-toast-danger) {
+}
+.notyf__toast:has(.gi-toast-danger) {
   @apply !gi-shadow-[0px_0px_25px_-5px_rgba(76,11,0,0.15)];
-
- }
+}
 
 /* End of Native notyf classes */
 
 .gi-toast-base {
-  @apply gi-relative gi-flex-row gi-flex gi-p-3 gi-border-xs gi-rounded-sm gi-gap-2
+  @apply gi-relative gi-flex-row gi-flex gi-p-3 gi-border-xs gi-rounded-sm gi-gap-2;
 }
 
 .gi-toast-base-dismissible {
-  @apply gi-toast-base !gi-pr-10
+  @apply gi-toast-base !gi-pr-10;
 }
 
 .gi-toast-title {
-  @apply gi-text-2md gi-font-bold
+  @apply gi-text-2md gi-font-bold;
 }
 
 .gi-toast-container {
-  @apply gi-flex gi-flex-col gi-items-start gi-gap-1 gi-grow gi-pr-0
+  @apply gi-flex gi-flex-col gi-items-start gi-gap-1 gi-grow gi-pr-0;
 }
 
 .gi-toast-content {
-  @apply !gi-mb-0
+  @apply !gi-mb-0;
 }
 
 .gi-toast-dismiss {
-  @apply gi-absolute gi-top-2 gi-right-2
+  @apply gi-absolute gi-top-2 gi-right-2;
 }
 
 .gi-toast-info {
-  @apply gi-bg-blue-50 gi-border-blue-100 gi-text-blue-700
+  @apply gi-bg-blue-50 gi-border-blue-100 gi-text-blue-700;
 }
 
 .gi-toast-success {
-  @apply gi-bg-green-50 gi-border-green-100 gi-text-green-700
+  @apply gi-bg-green-50 gi-border-green-100 gi-text-green-700;
 }
 
 .gi-toast-warning {
-  @apply gi-bg-yellow-50 gi-border-yellow-300 gi-text-yellow-700
+  @apply gi-bg-yellow-50 gi-border-yellow-300 gi-text-yellow-700;
 }
 
 .gi-toast-danger {
-  @apply gi-bg-red-50 gi-border-red-100 gi-text-red-700
+  @apply gi-bg-red-50 gi-border-red-100 gi-text-red-700;
 }
 .gi-toast-action {
-  @apply gi-text-gray-950 gi-mt-2
+  @apply gi-text-gray-950 gi-mt-2;
 }
 
 /* End of Toast */

diff --git a/packages/design/tailwind/css/typography.css b/packages/design/tailwind/css/typography.css
@@ -229,3 +229,40 @@
 }
 
 /* End List */
+
+/*
+Summary List
+*/
+
+.gi-summary-list {
+  @apply gi-text-sm md:gi-w-full md:gi-table-fixed gi-antialiased md:gi-table md:gi-border-collapse;
+}
+
+.gi-summary-list > dl {
+  @apply gi-w-full gi-mb-7 gi-mb-4 md:gi-table-row md:gi-text-md md:gi-mb-1;
+}
+
+.gi-summary-list > dl[data-border='true'] {
+  @apply gi-border-b-gray-400 gi-border-b;
+}
+
+.gi-summary-list > dl > dt {
+  @apply gi-mb-1 gi-font-bold;
+}
+
+.gi-summary-list > dl > dd,
+.gi-summary-list > dl > dl {
+  @apply gi-block gi-mb-4 md:gi-pt-2 md:gi-pb-2 md:gi-m-0 md:gi-table-cell md:gi-text-md;
+}
+
+.gi-summary-list-value {
+  @apply md:gi-break-words;
+}
+
+.gi-summary-list-actions {
+  @apply md:gi-text-right;
+}
+
+/*
+End of Summary List
+*/