feat(list): support for icons

Lundalogik · Sep 10, 2019 · 5ab7750 · 5ab7750
1 parent 30d13c0
commit 5ab7750
Show file tree

Hide file tree

Showing 11 changed files with 166 additions and 2 deletions.
diff --git a/src/components/list/list-item.ts b/src/components/list/list-item.ts
@@ -1,7 +1,29 @@
 export interface ListItem {
+    /**
+     * Text to display in the list item
+     */
     text: string;
+
+    /**
+     * Additional supporting text to display in the list item
+     */
     secondaryText?: string;
+
+    /**
+     * True if the list item should be disabled
+     */
     disabled?: boolean;
+
+    /**
+     * Name of the icon to use. Not valid for `filter`
+     */
+    icon?: string;
+
+    /**
+     * Background color of the icon. Overrides `--icon-background-color`
+     */
+    iconColor?: string;
+
     [data: string]: any;
 }
 

diff --git a/src/components/list/list-renderer-config.ts b/src/components/list/list-renderer-config.ts
@@ -2,4 +2,5 @@ export interface ListRendererConfig {
     isMenu?: boolean;
     isOpen?: boolean;
     selectable?: boolean;
+    badgeIcons?: boolean;
 }
diff --git a/src/components/list/list-renderer.tsx b/src/components/list/list-renderer.tsx
@@ -6,6 +6,7 @@ export class ListRenderer {
         isMenu: false,
         isOpen: true,
         selectable: false,
+        badgeIcons: false,
     };
 
     public render(
@@ -19,6 +20,12 @@ export class ListRenderer {
             return 'secondaryText' in item && !!item.secondaryText;
         });
 
+        const icons =
+            config.badgeIcons &&
+            items.some(item => {
+                return 'icon' in item && !!item.icon;
+            });
+
         const role = config.isMenu ? 'menu' : 'listbox';
 
         return (
@@ -28,6 +35,7 @@ export class ListRenderer {
                     ${twoLines ? 'mdc-list--two-line' : ''}
                     ${config.isMenu ? 'mdc-menu__items' : ''}
                     ${config.selectable ? 'selectable' : ''}
+                    ${icons ? 'mdc-list--avatar-list' : ''}
                 `}
                 aria-hidden={(!config.isOpen).toString()}
                 role={role}
@@ -64,6 +72,7 @@ export class ListRenderer {
                 aria-disabled={item.disabled ? 'true' : 'false'}
                 data-index={index}
             >
+                {item.icon ? this.renderIcon(item) : null}
                 {this.renderText(item.text, item.secondaryText)}
             </li>
         );
@@ -91,4 +100,27 @@ export class ListRenderer {
             </span>
         );
     }
+
+    /**
+     * Render an icon for a list item
+     *
+     * @param {ListItem} item the list item
+     *
+     * @returns {HTMLElement} the icon element
+     */
+    private renderIcon(item: ListItem) {
+        const style = {};
+        if (item.iconColor) {
+            style['--icon-background-color'] = item.iconColor;
+        }
+
+        return (
+            <limel-icon
+                class="mdc-list-item__graphic"
+                name={item.icon}
+                style={style}
+                size="medium"
+            />
+        );
+    }
 }
diff --git a/src/components/list/list.mdx b/src/components/list/list.mdx
@@ -14,7 +14,13 @@ menu: Components
 <limel-example name="limel-example-list" /> 
 
 ### List with secondary text
-<limel-example name="limel-example-list-secondary" /> 
+<limel-example name="limel-example-list-secondary" path="list" /> 
 
 ### List with selectable items
-<limel-example name="limel-example-list-selectable" /> 
+<limel-example name="limel-example-list-selectable" path="list" /> 
+
+### List with icons
+<limel-example name="limel-example-list-icons" path="list" /> 
+
+### List with badge icons
+<limel-example name="limel-example-list-badge-icons" path="list" /> 
diff --git a/src/components/list/list.scss b/src/components/list/list.scss
@@ -10,4 +10,11 @@
 
 .mdc-list {
     cursor: pointer;
+
+    &.mdc-list--avatar-list {
+        limel-icon {
+            background-color: var(--icon-background-color, #adadad);
+            color: white;
+        }
+    }
 }
diff --git a/src/components/list/list.tsx b/src/components/list/list.tsx
@@ -22,6 +22,12 @@ export class List {
     @Prop()
     public selectable: boolean;
 
+    /**
+     * True if the list should display larger icons with a background
+     */
+    @Prop()
+    public badgeIcons: boolean;
+
     @Element()
     private element: HTMLElement;
 
@@ -69,6 +75,7 @@ export class List {
     public render() {
         const config: ListRendererConfig = {
             selectable: this.selectable,
+            badgeIcons: this.badgeIcons,
         };
         return this.listRenderer.render(this.items, config);
     }

diff --git a/src/examples/list/list-badge-icons.scss b/src/examples/list/list-badge-icons.scss
@@ -0,0 +1,5 @@
+limel-list {
+    // Default icon color for the list if not
+    // set by list items
+    --icon-background-color: #ff3195;
+}
diff --git a/src/examples/list/list-badge-icons.tsx b/src/examples/list/list-badge-icons.tsx
@@ -0,0 +1,57 @@
+import { Component } from '@stencil/core';
+import { ListItem } from '../../interface';
+
+@Component({
+    tag: 'limel-example-list-badge-icons',
+    shadow: true,
+    styleUrl: 'list-badge-icons.scss',
+})
+export class BadgeIconsListExample {
+    private items: ListItem[] = [
+        {
+            text: 'King of Tokyo',
+            secondaryText: '2-6 players',
+            id: 1,
+            icon: 'animals/gorilla',
+        },
+        {
+            text: 'Smash Up!',
+            secondaryText: '2-4 players',
+            id: 2,
+            icon: 'cinema/alien',
+            iconColor: '#66bb6a',
+        },
+        {
+            text: 'Pandemic',
+            secondaryText: '2-4 players',
+            id: 3,
+            icon: 'Healthcare/virus',
+            iconColor: '#ff7043',
+        },
+        {
+            text: 'Catan',
+            secondaryText: '3-4 players',
+            id: 4,
+            icon: 'plants/wheat',
+            iconColor: '#ffb03b',
+        },
+        {
+            text: 'Ticket to Ride',
+            secondaryText: '2-5 players',
+            id: 5,
+            icon: 'transport/steam_engine',
+            iconColor: '#57879f',
+        },
+    ];
+
+    public render() {
+        return [
+            <limel-list items={this.items} badgeIcons={true} />,
+            <hr />,
+            <p>
+                When importing ListItem, see{' '}
+                <a href="/usage#import-statements">Usage</a>
+            </p>,
+        ];
+    }
+}
diff --git a/src/examples/list/list-icons.tsx b/src/examples/list/list-icons.tsx
@@ -0,0 +1,27 @@
+import { Component } from '@stencil/core';
+import { ListItem } from '../../interface';
+
+@Component({
+    tag: 'limel-example-list-icons',
+    shadow: true,
+})
+export class IconsListExample {
+    private items: ListItem[] = [
+        { text: 'King of Tokyo', id: 1, icon: 'animals/gorilla' },
+        { text: 'Smash Up!', id: 2, icon: 'cinema/alien' },
+        { text: 'Pandemic', id: 3, icon: 'Healthcare/virus' },
+        { text: 'Catan', id: 4, icon: 'plants/wheat' },
+        { text: 'Ticket to Ride', id: 5, icon: 'transport/steam_engine' },
+    ];
+
+    public render() {
+        return [
+            <limel-list items={this.items} />,
+            <hr />,
+            <p>
+                When importing ListItem, see{' '}
+                <a href="/usage#import-statements">Usage</a>
+            </p>,
+        ];
+    }
+}
diff --git a/...xamples/list-secondary/list-secondary.tsx → src/examples/list/list-secondary.tsx b/...xamples/list-secondary/list-secondary.tsx → src/examples/list/list-secondary.tsx
diff --git a/...mples/list-selectable/list-selectable.tsx → src/examples/list/list-selectable.tsx b/...mples/list-selectable/list-selectable.tsx → src/examples/list/list-selectable.tsx