feat(chip): enable displaying pictures instead of icons

Lundalogik · May 16, 2024 · cfc0c1d · cfc0c1d
1 parent 106d4a8
commit cfc0c1d
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 6 deletions.
diff --git a/etc/lime-elements.api.md b/etc/lime-elements.api.md
@@ -73,6 +73,7 @@ export interface Chip<T = any> {
     // @deprecated
     iconTitle?: string;
     id: number | string;
+    image?: Image_2;
     removable?: boolean;
     selected?: boolean;
     text: string;
@@ -203,6 +204,7 @@ export namespace Components {
         "disabled": boolean;
         "icon"?: string | Icon;
         "identifier"?: number | string;
+        "image"?: Image_2;
         "invalid": boolean;
         "language": Languages;
         "link"?: Omit<Link, 'text'>;
@@ -1095,6 +1097,7 @@ namespace JSX_2 {
         "disabled"?: boolean;
         "icon"?: string | Icon;
         "identifier"?: number | string;
+        "image"?: Image_2;
         "invalid"?: boolean;
         "language"?: Languages;
         "link"?: Omit<Link, 'text'>;

diff --git a/src/components/chip-set/chip.types.ts b/src/components/chip-set/chip.types.ts
@@ -1,3 +1,4 @@
+import { Image } from '../../global/shared-types/image.types';
 import { Icon } from '../../global/shared-types/icon.types';
 
 /**
@@ -19,6 +20,11 @@ export interface Chip<T = any> {
      */
     icon?: string | Icon;
 
+    /**
+     * A picture to be displayed instead of the icon on the chip.
+     */
+    image?: Image;
+
     /**
      * Color of the icon. Overrides `--icon-color`.
      *

diff --git a/src/components/chip/chip.scss b/src/components/chip/chip.scss
@@ -35,9 +35,10 @@
     font-size: 0.875rem;
     padding: 0 0.125rem;
 
-    &:has(limel-icon) {
+    &:has(limel-icon),
+    &:has(img) {
         .text {
-            padding-left: 0.25rem;
+            padding-left: 0;
         }
     }
 
@@ -146,10 +147,18 @@
     }
 }
 
+img,
 limel-icon {
     flex-shrink: 0;
     width: calc(var(--limel-chip-height) - 0.25rem);
     height: calc(var(--limel-chip-height) - 0.25rem);
+}
+
+img {
+    border-radius: 50%;
+}
+
+limel-icon {
     padding: 0.0625rem;
 }
 

diff --git a/src/components/chip/chip.tsx b/src/components/chip/chip.tsx
@@ -23,6 +23,8 @@ import {
     DELETE_KEY_CODE,
 } from '../../util/keycodes';
 import { ChipType, Chip as OldChipInterface } from '../chip-set/chip.types';
+import { Image } from '../../global/shared-types/image.types';
+import { isEmpty } from 'lodash-es';
 
 interface ChipInterface extends Omit<OldChipInterface, 'id' | 'badge'> {
     /**
@@ -72,6 +74,7 @@ interface ChipInterface extends Omit<OldChipInterface, 'id' | 'badge'> {
  * @exampleComponent limel-example-chip-button
  * @exampleComponent limel-example-chip-link
  * @exampleComponent limel-example-chip-icon-colors
+ * @exampleComponent limel-example-chip-image
  * @exampleComponent limel-example-chip-badge
  * @exampleComponent limel-example-chip-filter
  * @exampleComponent limel-example-chip-removable
@@ -104,6 +107,12 @@ export class Chip implements ChipInterface {
     @Prop()
     public icon?: string | Icon;
 
+    /**
+     * A picture to be displayed instead of the icon on the chip.
+     */
+    @Prop()
+    public image?: Image;
+
     /**
      * If supplied, the chip will become a clickable link.
      */
@@ -216,7 +225,7 @@ export class Chip implements ChipInterface {
                 onKeyDown={this.handleDeleteKeyDown}
             >
                 {this.renderSpinner()}
-                {this.renderIcon()}
+                {this.renderPicture()}
                 {this.renderLabel()}
                 {this.renderBadge()}
                 {this.renderProgressBar()}
@@ -238,7 +247,7 @@ export class Chip implements ChipInterface {
                 onKeyDown={this.handleDeleteKeyDown}
             >
                 {this.renderSpinner()}
-                {this.renderIcon()}
+                {this.renderPicture()}
                 {this.renderLabel()}
                 {this.renderBadge()}
                 {this.renderProgressBar()}
@@ -251,13 +260,19 @@ export class Chip implements ChipInterface {
         return <span class="text">{this.text}</span>;
     };
 
-    private renderIcon() {
+    private renderPicture() {
         const icon = getIconName(this.icon);
 
-        if (!icon) {
+        if (!icon && !this.image) {
             return;
         }
 
+        if (!isEmpty(this.image)) {
+            return (
+                <img src={this.image.src} alt={this.image.alt} loading="lazy" />
+            );
+        }
+
         return (
             <limel-icon
                 badge={true}

diff --git a/src/components/chip/examples/chip-image.tsx b/src/components/chip/examples/chip-image.tsx
@@ -0,0 +1,29 @@
+import { Component, h } from '@stencil/core';
+
+/**
+ * Picture instead of icon
+ * Using the `Img` interface, you can specify an image to be displayed on the chip.
+ *
+ * :::note
+ * The specified image will be displayed instead of the icon, if both are provided.
+ * :::
+ */
+@Component({
+    tag: 'limel-example-chip-image',
+    shadow: true,
+})
+export class ChipImageExample {
+    public render() {
+        const icon = {
+            name: 'filled_star',
+            color: 'rgb(var(--color-yellow-default))',
+        };
+
+        const image = {
+            src: 'https://lundalogik.github.io/lime-elements/780af2a6-d3d1-4593-8642-f03210d09271.png',
+            alt: 'A picture of Lucy Chyzhova, UX designer at Lime Technologies',
+        };
+
+        return <limel-chip text="Lucy Chyzhova" icon={icon} image={image} />;
+    }
+}