diff --git a/src/ListTile/index.scss b/src/ListTile/index.scss new file mode 100644 index 0000000..37c75f1 --- /dev/null +++ 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 new file mode 100644 index 0000000..0d2c076 --- /dev/null +++ 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 new file mode 100644 index 0000000..b7a9145 --- /dev/null +++ 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` +
+

${this.caption}

+ ${this.description} +
`; + } +} + + diff --git a/src/ListTile/list-tile.ts b/src/ListTile/list-tile.ts new file mode 100644 index 0000000..881b1de --- /dev/null +++ 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` +
+
+ +
+

${this.caption}

+

${this.description}

+
+
+
+ + + ${this.href ? html` + + ` : ''} +
+
`; + } +} + + diff --git a/src/index.ts b/src/index.ts index 5191f93..259465c 100644 --- 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 index e629240..162a560 100644 --- 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,8 +20,29 @@ const meta: Meta = { export default meta; type Story = StoryObj; +export const ListTile: Story = { + render: () => html` + + + Front-end Developer sdkf dskjf dskjf dsjkf dskjfdskjf dskjf dsf dsfdsf dsfdsds + + + Front-end Developer sdkf dskjf dskjf dsjkf dskjfdskjf dskjf dsf dsfdsf dsfdsds + + + Front-end Developer sdkf dskjf dskjf dsjkf dskjfdskjf dskjf dsf dsfdsf dsfdsds + + + Due - June 24th 2023 + + Online + `, +}; + export const Default: Story = { - render: ({ caption, description }) => html` + render: ({caption, description}) => html` `, args: { caption: 'Mark Crayon', @@ -25,9 +50,8 @@ export const Default: Story = { }, }; - export const PrimaryAndStatus: Story = { - render: ({ caption, description }) => html` + render: ({caption, description}) => html`
@@ -42,18 +66,18 @@ export const PrimaryAndStatus: Story = { }; export const Status: Story = { - render: ({ caption, description }) => html` - + render: () => html` + + paid `, - args: { - caption: 'May 17th 2023 — $12.99', - description: 'Manager', - }, }; export const Primary: Story = { - render: ({ caption, description }) => html` + render: ({caption, description}) => html` `, @@ -62,18 +86,3 @@ export const Primary: Story = { description: 'Manager', }, }; - -export const ActionAndIndicator: Story = { - render: ({ caption, description }) => html` - - - Accept -
- -
- `, - args: { - caption: 'Mark Crayon', - description: 'Manager', - }, -};