✨ Add secondary theme to lists

Author: Frontendland

src/components/List/List.astro

@@ -19,17 +19,20 @@ const {
     id,
     className,
     wrapperClassName,
+    secondary,
     itemGroups
 } = Astro.props
 
 const classes = [
     styles.list,
+    (secondary && !showSearchBar) && styles.secondary,
     !showSearchBar && styles.container,
     className
 ]
 
 const wrapperClasses = [
     styles.container,
+    secondary && styles.secondary,
     wrapperClassName
 ]
 ---

src/components/List/List.svelte

@@ -19,6 +19,7 @@
         id,
         className,
         wrapperClassName,
+        secondary,
         itemGroups = $bindable([]),
         onSelect
     }: SvelteListProps = $props()
@@ -28,12 +29,14 @@
 
     const classes = classNames([
         styles.list,
+        (secondary && !showSearchBar) && styles.secondary,
         !showSearchBar && styles.container,
         className
     ])
 
     const wrapperClasses = classNames([
         styles.container,
+        secondary && styles.secondary,
         wrapperClassName
     ])
 

src/components/List/List.tsx

@@ -19,6 +19,7 @@ const List = ({
     id,
     className,
     wrapperClassName,
+    secondary,
     itemGroups,
     onSelect
 }: ReactListProps) => {
@@ -28,12 +29,14 @@ const List = ({
 
     const classes = classNames([
         styles.list,
+        (secondary && !showSearchBar) && styles.secondary,
         !showSearchBar && styles.container,
         className
     ])
 
     const wrapperClasses = classNames([
         styles.container,
+        secondary && styles.secondary,
         wrapperClassName
     ])
 

src/components/List/list.module.scss

@@ -85,6 +85,11 @@
 .container {
     @include border-radius(md);
     @include border(primary-50);
+    @include background(primary-70);
+
+    &.secondary {
+        @include background(primary-60);
+    }
 
     input {
         @include border(top, 0);

src/components/List/list.ts

@@ -15,6 +15,7 @@ export type ListProps = {
     id?: string
     className?: string
     wrapperClassName?: string
+    secondary?: boolean
     itemGroups: {
         title?: string
         items: {

src/pages/components/list.astro

@@ -64,49 +64,50 @@ const sections = getSections({
             {section.subTitle && <h2 set:html={section.subTitle} />}
         </Fragment>
         <div class="grid md-2 lg-3">
-            <ComponentWrapper title="Default">
+            <ComponentWrapper title="Default" secondary={true}>
                 <section.component itemGroups={list} />
             </ComponentWrapper>
 
-            <ComponentWrapper title="Item with icons">
-                <section.component itemGroups={listWithIcons} />
+            <ComponentWrapper title="Item with icons (secondary)">
+                <section.component itemGroups={listWithIcons} secondary={true} />
             </ComponentWrapper>
 
-            <ComponentWrapper title="Item with icons & subText">
+            <ComponentWrapper title="Item with icons & subText" secondary={true}>
                 <section.component itemGroups={listWithSubText} />
             </ComponentWrapper>
 
-            <ComponentWrapper title="Grouped item">
+            <ComponentWrapper title="Grouped item" secondary={true}>
                 <section.component itemGroups={listWithGroups} />
             </ComponentWrapper>
 
-            <ComponentWrapper title="Disabled & selected items">
+            <ComponentWrapper title="Disabled & selected items" secondary={true}>
                 <section.component itemGroups={listWithStates} />
             </ComponentWrapper>
 
-            <ComponentWrapper title="List with scroll">
+            <ComponentWrapper title="List with scroll" secondary={true}>
                 <section.component
                     itemGroups={listWithGroups}
                     maxHeight="160px"
                 />
             </ComponentWrapper>
 
-            <ComponentWrapper title="List with search bar">
+            <ComponentWrapper title="List with search bar" secondary={true}>
                 <section.component
                     itemGroups={listWithGroups}
                     showSearchBar={true}
                 />
             </ComponentWrapper>
 
-            <ComponentWrapper title="Search bar with placeholder">
+            <ComponentWrapper title="Search bar with placeholder (secondary)">
                 <section.component
                     itemGroups={listWithGroups}
                     showSearchBar={true}
                     searchBarPlaceholder="Search the app..."
+                    secondary={true}
                 />
             </ComponentWrapper>
 
-            <ComponentWrapper title="Search bar with icon & placeholder">
+            <ComponentWrapper title="Search bar with icon & placeholder" secondary={true}>
                 <section.component
                     itemGroups={listWithGroups}
                     showSearchBar={true}