description item

Author: MrEssex

docs/pages/components/description-item.md

@@ -0,0 +1,40 @@
+---
+meta:
+  title: Description Item
+  description:
+layout: component
+---
+
+```html:preview
+<zn-sp divide no-gap>
+  <zn-description-item label="Full name">
+    Margot Foster
+  </zn-description-item>
+  <zn-description-item label="Full name">
+    Margot Foster
+  </zn-description-item>
+  <zn-description-item label="Full name">
+    Margot Foster
+  </zn-description-item>
+  <zn-description-item label="Full name">
+    Margot Foster
+  </zn-description-item>
+</zn-sp>
+```
+
+## Examples
+
+### Lots of Content
+
+```html:preview
+<zn-description-item label="Full name">
+  lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna 
+  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+</zn-description-item>
+```
+
+### Second Example
+
+TODO
+
+[component-metadata:zn-description-item]

src/components/description-item/description-item.component.ts

@@ -0,0 +1,49 @@
+import {property} from 'lit/decorators.js';
+import {type CSSResultGroup, html, unsafeCSS} from 'lit';
+import {LocalizeController} from '../../utilities/localize';
+import ZincElement from '../../internal/zinc-element';
+
+import styles from './description-item.scss';
+import {classMap} from "lit/directives/class-map.js";
+
+/**
+ * @summary Short summary of the component's intended use.
+ * @documentation https://zinc.style/components/description-item
+ * @status experimental
+ * @since 1.0
+ *
+ * @dependency zn-example
+ *
+ * @event zn-event-name - Emitted as an example.
+ *
+ * @slot - The default slot.
+ * @slot example - An example slot.
+ *
+ * @csspart base - The component's base wrapper.
+ *
+ * @cssproperty --example - An example CSS custom property.
+ */
+export default class ZnDescriptionItem extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+  // @ts-expect-error unused property
+  private readonly localize = new LocalizeController(this);
+
+  @property() label: string;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute('role', 'listitem');
+  }
+
+  render() {
+    return html`
+      <div class=${classMap({
+        'description-item': true,
+      })}>
+        <div class="description-item__label">${this.label}</div>
+        <slot></slot>
+      </div>
+    `;
+  }
+}

src/components/description-item/description-item.scss

@@ -0,0 +1,24 @@
+@use "../../wc";
+
+:host {
+  display: block;
+
+  --zn-description-item-label-max-width: 300px;
+}
+
+.description-item {
+  display: flex;
+  flex-direction: row;
+  padding: var(--zn-spacing-medium);
+
+  @include wc.container-query(null, md) {
+    flex-direction: column;
+  }
+
+  &__label {
+    font-weight: 500;
+    color: rgb(var(--zn-text-heading));
+    max-width: var(--zn-description-item-label-max-width);
+    width: 100%;
+  }
+}

src/components/description-item/description-item.test.ts

@@ -0,0 +1,10 @@
+import '../../../dist/zn.min.js';
+import { expect, fixture, html } from '@open-wc/testing';
+
+describe('<zn-description-item>', () => {
+  it('should render a component', async () => {
+    const el = await fixture(html` <zn-description-item></zn-description-item> `);
+
+    expect(el).to.exist;
+  });
+});

src/components/description-item/index.ts

@@ -0,0 +1,12 @@
+import ZnDescriptionItem from './description-item.component';
+
+export * from './description-item.component';
+export default ZnDescriptionItem;
+
+ZnDescriptionItem.define('zn-description-item');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'zn-description-item': ZnDescriptionItem;
+  }
+}

src/components/empty-state/empty-state.scss

@@ -35,7 +35,7 @@
     align-items: center;
     justify-content: center;
     gap: var(--zn-spacing-x-small);
-    padding: var(--zn-spacing-small);
+    padding: var(--zn-spacing-3x-large) var(--zn-spacing-small);
     flex-grow: 1;
   }
 }

src/zinc.ts

@@ -71,6 +71,7 @@ export {default as DragUpload} from './components/drag-upload';
 export {default as CheckboxGroup} from './components/checkbox-group';
 export {default as ConfirmContent} from './components/confirm-content';
 export {default as EmptyDialog} from './components/empty-dialog';
+export { default as DescriptionItem } from './components/description-item';
 /* plop:component */
 
 // Utilities