Add new list tile (improved Tile)

kubex · Feb 12, 2025 · 0dbc8d7 · 0dbc8d7
1 parent bd58fdc
commit 0dbc8d7
Show file tree

Hide file tree

Showing 6 changed files with 199 additions and 27 deletions.
diff --git a/src/ListTile/index.scss b/src/ListTile/index.scss
@@ -0,0 +1,91 @@
+@use "../wc";
+
+.tile {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  padding-top: wc.spacing(md);
+  padding-bottom: wc.spacing(md);
+}
+
+.tile__left {
+  display: flex;
+  column-gap: wc.spacing(md);
+  padding-right: wc.spacing(md);
+  width: 50%;
+  max-width: 400px;
+
+  @include wc.container-query(null, md) {
+    max-width: 320px;
+  }
+}
+
+.tile__right {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 50%;
+  flex-grow: 1;
+  column-gap: wc.spacing(lg);
+}
+
+.tile__properties {
+  display: flex;
+  flex-direction: row;
+  column-gap: 30px;
+  overflow: auto;
+
+  @include wc.container-query(null, md) {
+    display: none;
+  }
+}
+
+.tile__content {
+  flex: auto;
+  min-width: 0;
+
+  @extend %property;
+}
+
+.tile__actions {
+  display: flex;
+  column-gap: wc.spacing(md);
+  margin-left: auto;
+}
+
+.tile__link {
+  margin-left: wc.spacing(md);
+}
+
+%property {
+  .tile__caption {
+    display: block;
+    font-weight: 500;
+    font-size: 14px;
+    color: rgb(var(--zn-text-heading));
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  .tile__description {
+    display: block;
+    font-weight: 400;
+    margin-top: wc.spacing(xs);
+    font-size: 12px;
+    color: rgb(var(--zn-text-color));
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+}
+
+// Tile property
+.tile__property {
+  display: flex;
+  flex-direction: column;
+  max-width: 150px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+
+  @extend %property;
+}
diff --git a/src/ListTile/index.ts b/src/ListTile/index.ts
@@ -0,0 +1,2 @@
+export {ListTile} from './list-tile';
+export {ListTileProperty} from './list-tile-property';
diff --git a/src/ListTile/list-tile-property.ts b/src/ListTile/list-tile-property.ts
@@ -0,0 +1,25 @@
+import {html, LitElement, unsafeCSS} from "lit";
+import {customElement, property} from 'lit/decorators.js';
+
+import styles from './index.scss?inline';
+import {classMap} from "lit/directives/class-map.js";
+
+@customElement('zn-list-tile-property')
+export class ListTileProperty extends LitElement
+{
+  static styles = unsafeCSS(styles);
+
+  @property({attribute: 'caption', type: String, reflect: true}) caption;
+  @property({attribute: 'description', type: String, reflect: true}) description;
+
+  render()
+  {
+    return html`
+      <div class="${classMap({'tile__property': true})}">
+        <p part="caption" class="tile__caption">${this.caption}</p>
+        <slot part="description" class="tile__description">${this.description}</slot>
+      </div>`;
+  }
+}
+
+
diff --git a/src/ListTile/list-tile.ts b/src/ListTile/list-tile.ts
@@ -0,0 +1,44 @@
+import {html, LitElement, unsafeCSS} from "lit";
+import {customElement, property} from 'lit/decorators.js';
+
+import styles from './index.scss?inline';
+import {HasSlotController} from "@/slot";
+import {classMap} from "lit/directives/class-map.js";
+
+@customElement('zn-list-tile')
+export class ListTile extends LitElement
+{
+  static styles = unsafeCSS(styles);
+
+  private readonly hasSlotController = new HasSlotController(this, '[default]');
+
+  @property({attribute: 'caption', type: String, reflect: true}) caption;
+  @property({attribute: 'description', type: String, reflect: true}) description;
+  @property({attribute: 'href', type: String, reflect: true}) href;
+
+  render()
+  {
+    return html`
+      <div class="${classMap({
+        tile: true,
+        'tile--has-image': this.hasSlotController.test('image')
+      })}">
+        <div class="tile__left">
+          <slot name="image" part="image" class="tile__image"></slot>
+          <div class="tile__content">
+            <p part="caption" class="tile__caption">${this.caption}</p>
+            <p part="description" class="tile__description">${this.description}</p>
+          </div>
+        </div>
+        <div class="tile__right">
+          <slot name="properties" part="properties" class="tile__properties"></slot>
+          <slot name="actions" part="actions" class="tile__actions"></slot>
+          ${this.href ? html`<a href="${this.href}" class="tile__link">
+            <zn-icon src="keyboard_arrow_right"></zn-icon>
+          </a>` : ''}
+        </div>
+      </div>`;
+  }
+}
+
+
diff --git a/src/index.ts b/src/index.ts
@@ -66,6 +66,7 @@ import '@/InteractionTile';
 import '@/DataTable';
 import '@/BulkActions';
 import '@/CopyButton';
+import '@/ListTile';
 
 // Events
 export * from '@/Events/events';
diff --git a/stories/Components/Tile.stories.ts b/stories/Components/Tile.stories.ts
@@ -1,7 +1,11 @@
-import { Meta, StoryObj } from "@storybook/web-components";
-import { html } from "lit";
+import {Meta, StoryObj} from "@storybook/web-components";
+import {html} from "lit";
 
 import '../../src/Tile';
+
+import '../../src/ListTile';
+
+
 import '../../src/Chip';
 import '../../src/Icon';
 import '../../src/Button';
@@ -16,18 +20,38 @@ const meta: Meta = {
 export default meta;
 type Story = StoryObj;
 
+export const ListTile: Story = {
+  render: () => html`
+    <zn-list-tile caption="Caption here"
+                  description="This is the amazing description sfkjdsjkds fkjds fjkds fds njsdfsdjnk kj jks f dsfdsf sfsd skjf sdjkf dsjkf dsjkf dsjkfds jkds jkfds fjkds fjkds jkfds "
+                  href="https://google.com">
+      <zn-list-tile-property slot="properties" caption="Business Relations">
+        Front-end Developer sdkf dskjf dskjf dsjkf dskjfdskjf dskjf dsf dsfdsf dsfdsds 
+      </zn-list-tile-property>
+      <zn-list-tile-property slot="properties" caption="Business Relations">
+        Front-end Developer sdkf dskjf dskjf dsjkf dskjfdskjf dskjf dsf dsfdsf dsfdsds
+      </zn-list-tile-property>
+      <zn-list-tile-property slot="properties" caption="Business Relations">
+        Front-end Developer sdkf dskjf dskjf dsjkf dskjfdskjf dskjf dsf dsfdsf dsfdsds
+      </zn-list-tile-property>
+      <zn-list-tile-property slot="properties" caption="Designer">
+        Due - June 24th 2023
+      </zn-list-tile-property>
+      <zn-chip slot="actions" success>Online</zn-chip>
+    </zn-list-tile>`,
+};
+
 export const Default: Story = {
-  render: ({ caption, description }) => html`
+  render: ({caption, description}) => html`
     <zn-tile caption="${caption}" description="${description}"></zn-tile>`,
   args: {
     caption: 'Mark Crayon',
     description: 'Manager',
   },
 };
 
-
 export const PrimaryAndStatus: Story = {
-  render: ({ caption, description }) => html`
+  render: ({caption, description}) => html`
     <zn-tile caption="${caption}" description="${description}">
       <zn-icon slot="primary" round size="60" src="https://i.pravatar.cc/60?img=20"></zn-icon>
       <div slot="status">
@@ -42,18 +66,18 @@ export const PrimaryAndStatus: Story = {
 };
 
 export const Status: Story = {
-  render: ({ caption, description }) => html`
-    <zn-tile caption="${caption}" description="${description}">
+  render: () => html`
+    <zn-tile caption="INV-51039543"
+             description="Sent - May 24th 2023"
+             sub-caption="$1,500.00"
+             sub-description="Due - May 31st 2023">
+      
       <zn-chip slot="status" success>paid</zn-chip>
     </zn-tile>`,
-  args: {
-    caption: 'May 17th 2023 — $12.99',
-    description: 'Manager',
-  },
 };
 
 export const Primary: Story = {
-  render: ({ caption, description }) => html`
+  render: ({caption, description}) => html`
     <zn-tile caption="${caption}" description="${description}">
       <zn-icon slot="primary" round size="60" src="https://i.pravatar.cc/60?img=20"></zn-icon>
     </zn-tile>`,
@@ -62,18 +86,3 @@ export const Primary: Story = {
     description: 'Manager',
   },
 };
-
-export const ActionAndIndicator: Story = {
-  render: ({ caption, description }) => html`
-    <zn-tile caption="${caption}" description="${description}" padded>
-      <zn-icon slot="primary" round size="60" src="https://i.pravatar.cc/60?img=20"></zn-icon>
-      <zn-button slot="status" type="primary">Accept</zn-button>
-      <div slot="top">
-        <zn-timer timestamp="2543432325" type="error"></zn-timer>
-      </div>
-    </zn-tile>`,
-  args: {
-    caption: 'Mark Crayon',
-    description: 'Manager',
-  },
-};
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export {ListTile} from './list-tile';
		export {ListTileProperty} from './list-tile-property';