@redvars/peacock 3.8.6 → 3.9.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@redvars/peacock",
   "description": "The foundation for beautiful user interfaces",
   "license": "Apache-2.0",
-  "version": "3.8.6",
+  "version": "3.9.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/readme.md

@@ -44,9 +44,9 @@ Visit [https://peacock.redvars.com](https://peacock.redvars.com) to view the doc
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
 
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@redvars/peacock@3.8.6/dist/assets/styles.css"></link>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@redvars/peacock@3.9.0/dist/assets/styles.css"></link>
   <script type='module'
-          src='https://cdn.jsdelivr.net/npm/@redvars/peacock@3.8.6/dist/loader.js'></script>
+          src='https://cdn.jsdelivr.net/npm/@redvars/peacock@3.9.0/dist/loader.js'></script>
 </head>
 
 <wc-button>Button</wc-button>

package/src/index.ts

@@ -42,6 +42,7 @@ export { Popover, PopoverContent } from './popover/index.js';
 export { Breadcrumb, BreadcrumbItem } from './breadcrumb/index.js';
 export { Menu, MenuItem, SubMenu } from './menu/index.js';
 export { List, ListItem } from './list/index.js';
+export { Timeline, TimelineItem } from './timeline/index.js';
 export { Item } from './item/index.js';
 
 export { CodeHighlighter } from './code-highlighter/index.js';

package/src/loader.ts

@@ -34,6 +34,8 @@ import { SubMenu } from '@/menu/sub-menu/sub-menu.js';
 import { Item } from '@/item/item.js';
 import { List } from '@/list/list.js';
 import { ListItem } from '@/list/list-item.js';
+import { Timeline } from '@/timeline/timeline.js';
+import { TimelineItem } from '@/timeline/timeline-item.js';
 
 import { Accordion } from '@/accordion/accordion.js';
 import { Link } from '@/link/link.js';
@@ -305,6 +307,12 @@ const loaderConfig: LoaderConfig = {
     'wc-list-item': {
       CustomElementClass: ListItem,
     },
+    'wc-timeline': {
+      CustomElementClass: Timeline,
+    },
+    'wc-timeline-item': {
+      CustomElementClass: TimelineItem,
+    },
     'wc-item': {
       CustomElementClass: Item,
     },

package/src/timeline/index.ts

@@ -0,0 +1,2 @@
+export { Timeline } from './timeline.js';
+export { TimelineItem } from './timeline-item.js';

package/src/timeline/timeline-item.scss

@@ -0,0 +1,108 @@
+:host {
+  display: block;
+}
+
+.timeline-item {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 0.75rem;
+  align-items: stretch;
+}
+
+:host-context([orientation='horizontal']) .timeline-item {
+  display: grid;
+  grid-template-rows: auto 1fr;
+  grid-template-columns: 1fr;
+  gap: 0.75rem;
+  align-items: stretch;
+  min-height: auto;
+}
+
+.marker-column {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: var(--timeline-dot-size, 2rem);
+}
+
+:host-context([orientation='horizontal']) .marker-column {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: auto;
+  height: var(--timeline-dot-size, 2rem);
+}
+
+.marker {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--timeline-dot-size, 2rem);
+  height: var(--timeline-dot-size, 2rem);
+  flex-shrink: 0;
+}
+
+.marker-dot {
+  width: var(--timeline-dot-size, 2rem);
+  height: var(--timeline-dot-size, 2rem);
+  min-width: var(--timeline-dot-size, 2rem);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--timeline-dot-bg, var(--color-primary));
+  --icon-color: var(--timeline-dot-color, var(--color-on-primary));
+  position: relative;
+  z-index: 2;
+}
+
+.marker-dot ::slotted(wc-icon) {
+  --icon-size: calc(var(--timeline-dot-size, 2rem) * 0.6);
+}
+
+.dot-spinner {
+  --progress-height: calc(var(--timeline-dot-size, 2rem) * 0.6);
+}
+
+/* Flexible connector line that stretches to fill remaining height */
+.connector {
+  flex: 1;
+  min-height: 2rem;
+  width: 2px;
+  background: var(--timeline-line-color, var(--color-outline));
+  margin: auto;
+  margin-block: .25rem;
+}
+
+:host(:last-child) .connector {
+  display: none;
+}
+
+/* Horizontal orientation connector */
+:host-context([orientation='horizontal']) .connector {
+  flex: 1;
+  min-width: 2rem;
+  width: auto;
+  height: 2px;
+  background: var(--timeline-line-color, var(--color-outline));
+  margin: auto;
+  margin-inline: .25rem;
+}
+
+:host-context([orientation='horizontal']):last-child .connector {
+  display: none;
+}
+
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+
+.description {
+  color: var(--timeline-description-color, var(--color-on-surface-variant));
+  line-height: 1.4;
+}

package/src/timeline/timeline-item.ts

@@ -0,0 +1,62 @@
+import { html, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import styles from './timeline-item.scss';
+import IndividualComponent from '@/IndividualComponent.js';
+
+/**
+ * @label Timeline Item
+ * @tag wc-timeline-item
+ * @rawTag timeline-item
+ *
+ * @summary An item for use inside a timeline, with a dot/marker and description.
+ *
+ * @example
+ * ```html
+ * <wc-timeline-item description="Step completed">
+ *   <span>Step title</span>
+ *   <wc-icon slot="dot" name="check"></wc-icon>
+ * </wc-timeline-item>
+ * ```
+ * @tags display
+ */
+@IndividualComponent
+export class TimelineItem extends LitElement {
+  static styles = [styles];
+
+  @property({ type: Boolean, reflect: true }) loading = false;
+
+  connectedCallback() {
+    super.connectedCallback();
+    if (!this.hasAttribute('role')) {
+      this.setAttribute('role', 'listitem');
+    }
+  }
+
+  render() {
+    return html`
+      <div class="timeline-item">
+        <div class="marker-column">
+          <div class="marker">
+            <div class="marker-dot">
+              ${this.loading
+                ? html`<wc-circular-progress
+                    class="dot-spinner"
+                    indeterminate
+                    aria-label="Loading"
+                  ></wc-circular-progress>`
+                : html`<slot name="dot"></slot>`}
+            </div>
+          </div>
+          <div class="connector"></div>
+        </div>
+
+        <div class="content">
+          <div class="headline"><slot></slot></div>
+          <div class="description">
+            <slot name="content"></slot>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}

package/src/timeline/timeline.scss

@@ -0,0 +1,21 @@
+:host {
+  display: block;
+}
+
+.timeline {
+  display: grid;
+  gap: 0;
+  position: relative;
+  padding-left: calc(var(--timeline-dot-size, 2rem) / 2);
+}
+
+:host([orientation='horizontal']) .timeline {
+  display: grid;
+  gap: 0;
+  position: relative;
+  padding-left: 0;
+  padding-top: calc(var(--timeline-dot-size, 2rem) / 2);
+  grid-auto-flow: column;
+  grid-template-rows: 1fr;
+}
+

package/src/timeline/timeline.ts

@@ -0,0 +1,43 @@
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import styles from './timeline.scss';
+import IndividualComponent from '@/IndividualComponent.js';
+import { TimelineItem } from './timeline-item.js';
+
+/**
+ * @label Timeline
+ * @tag wc-timeline
+ * @rawTag timeline
+ *
+ * @summary A vertical timeline layout for a series of timeline items.
+ *
+ * @example
+ * ```html
+ * <wc-timeline>
+ *   <wc-timeline-item description="Task completed">
+ *     <span>Task title</span>
+ *     <wc-icon slot="dot" name="check"></wc-icon>
+ *   </wc-timeline-item>
+ * </wc-timeline>
+ * ```
+ * @tags display
+ */
+@IndividualComponent
+export class Timeline extends LitElement {
+  static styles = [styles];
+
+  static Item = TimelineItem;
+
+  @property({ type: String, reflect: true }) orientation: 'vertical' | 'horizontal' = 'vertical';
+
+  connectedCallback() {
+    super.connectedCallback();
+    if (!this.hasAttribute('role')) {
+      this.setAttribute('role', 'list');
+    }
+  }
+
+  render() {
+    return html`<div class="timeline"><slot></slot></div>`;
+  }
+}