Add List layout for downloads pages

Author: webstackdev

_TODO.md

@@ -264,8 +264,7 @@ This article has different approaches to [print pagination](https://www.customjs
 
 - Social shares - module CSS doesn't appear correct with nested button hover classes, not sure how network name is generated or styled but it needs improvement. Should be rendered inside article content column, not across both content and TOC columns.
 
-
- ### Component Stylings
+### Component Stylings
 
 The bottom margin issues on CTAs need to handle paragraphs differently than headers. Headers are properly spaced now; paragraphs are flush with the CTA with no top margin.
 
@@ -276,5 +275,3 @@ The bottom margin issues on CTAs need to handle paragraphs differently than head
 - Callouts should get round corners like the Download and Newsletter CTAs
 
 - Tags need styled at the top of articles item view pages
-
-<Newsletter />

src/components/List/index.astro

@@ -5,6 +5,7 @@ import CardGridList from '@components/List/layouts/CardGridList.astro'
 import CheckIconsList from '@components/List/layouts/CheckIconsList.astro'
 import ChevronList from '@components/List/layouts/ChevronList.astro'
 import ColoredMarkerList from '@components/List/layouts/ColoredMarkerList.astro'
+import DownloadPageList from '@components/List/layouts/DownloadPageList.astro'
 import NumberedWithBackgroundList from '@components/List/layouts/NumberedWithBackgroundList.astro'
 import PlainIconList from '@components/List/layouts/PlainIconList.astro'
 import SideBySideList from '@components/List/layouts/SideBySideList.astro'
@@ -65,6 +66,7 @@ const itemsWithIconAndColor = items as Array<{
 {variant === 'check-icons-list' && <CheckIconsList items={items} {...classesProps} />}
 {variant === 'chevron-list' && <ChevronList items={items} {...classesProps} />}
 {variant === 'colored-marker-list' && <ColoredMarkerList items={itemsWithColor} {...classesProps} {...sizeProps} />}
+{variant === 'download-page-list' && <DownloadPageList items={itemsWithIconAndColor} {...classesProps} {...sizeProps} />}
 {variant === 'numbered-with-background-list' && <NumberedWithBackgroundList items={items} {...classesProps} />}
 {variant === 'plain-icon-list' && <PlainIconList items={itemsWithIconAndColor} {...classesProps} {...sizeProps} />}
 {variant === 'side-by-side-list' && <SideBySideList items={items} {...classesProps} />}

src/components/List/layouts/DownloadPageList.astro

@@ -0,0 +1,22 @@
+---
+export type Props = {
+  items: {
+    text: string
+  }[]
+}
+
+const { items } = Astro.props
+
+const ulClass = ["list-disc pl-0 space-y-3 mb-0 mt-2"]
+const liClass = ["flex items-start gap-3"]
+---
+
+<ul class:list={ulClass}>
+  {
+    items.map(({ text }) => (
+      <li class:list={liClass}>
+        <span>{text}</span>
+      </li>
+    ))
+  }
+</ul>

src/components/List/layouts/PlainIconList.astro

@@ -32,4 +32,4 @@ const markerClasses = props.classes?.svg
       </li>
     ))
   }
-</ul>
+</ul>