npm - @redvars/peacock - Versions diffs - 3.1.1 → 3.1.2 - Mend

@redvars/peacock 3.1.1 → 3.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (132) hide show

package/src/divider/demo/index.html ADDED Viewed

@@ -0,0 +1,58 @@
+<!doctype html>
+<html lang='en-GB'>
+<head>
+  <meta charset='utf-8'>
+  <meta name='viewport' content='width=device-width, initial-scale=1.0, viewport-fit=cover' />
+  <link rel='stylesheet' href='/dist/assets/styles/tokens.css' />
+  <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">
+  <style>
+    body {
+      background: #fafafa;
+    }
+  </style>
+</head>
+<body>
+<style>
+  .container-horizontal {
+    display: inline-block;
+    margin-right: 1rem;
+    padding: 1rem;
+    width: 200px;
+    border: 1px solid var(--color-outline);
+  }
+  .container-vertical {
+    display: flex;
+    height: 150px;
+    margin-bottom: 1rem;
+    padding: 1rem;
+    width: 250px;
+    border: 1px solid var(--color-outline);
+  }
+</style>
+<div class="container-horizontal">
+  <p>Content A</p>
+  <p-divider>or</p-divider>
+  <p>Content B</p>
+</div>
+<div class="container-vertical">
+  <p>Content A</p>
+  <p-divider vertical="true">or</p-divider>
+  <p>Content B</p>
+</div>
+<script type='module'>
+  import { Divider } from '/dist/index.js';
+  window.customElements.define('p-divider', Divider);
+</script>
+</body>
+</html>

package/src/divider/divider.css.ts ADDED Viewed

@@ -0,0 +1,58 @@
+import { css } from 'lit';
+export const styles = css`
+  :host {
+    display: block;
+    --divider-color: var(--color-outline-variant);
+    --divider-padding: var(--spacing-200);
+  }
+  .divider {
+    display: flex;
+    margin: 0;
+    @include get-typography(body-small-emphasized);
+    color: var(--divider-color);
+    &:not(.vertical) {
+      width: 100%;
+      padding: var(--divider-padding) 0;
+      align-items: center;
+      justify-content: center;
+      .line {
+        width: 100%;
+        border-top: 1px solid var(--divider-color);
+      }
+      &.slot-has-content .slot-container {
+        padding: 0 var(--spacing-200);
+      }
+    }
+    &.vertical {
+      height: 100%;
+      padding: 0 var(--divider-padding);
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      .line {
+        height: 100%;
+        border-right: 1px solid var(--divider-color);
+      }
+      &.slot-has-content .slot-container {
+        padding: var(--spacing-200) 0;
+      }
+    }
+  }
+  :host(:not([vertical])) {
+    width: auto;
+  }
+  :host([vertical]) {
+    height: auto;
+  }
+`;

package/src/divider/divider.ts ADDED Viewed

@@ -0,0 +1,65 @@
+import { html, LitElement } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { styles } from './divider.css.js';
+import { observerSlotChangesWithCallback } from '../utils.js';
+/**
+ * @label Divider
+ * @tag p-divider
+ * @rawTag divider
+ *
+ * @summary The divider component is used to visually separate content.
+ * @overview
+ *  - Dividers are used to separate content into clear groups, making it easier for users to scan and understand the information presented.
+ *  - They can be oriented either vertically or horizontally, depending on the layout requirements.
+ *
+ * @cssprop --divider-color - Controls the color of the divider.
+ * @cssprop --divider-padding - Controls the padding of the divider.
+ *
+ * @example
+ * ```html
+ * <p-divider style="width: 12rem;">or</p-divider>
+ * ```
+ * @tags display
+ */
+export class Divider extends LitElement {
+  static styles = [styles];
+  @property({ type: Boolean, reflect: true }) vertical = false;
+  @state()
+  slotHasContent = false;
+  firstUpdated() {
+    observerSlotChangesWithCallback(
+      this.renderRoot.querySelector('slot'),
+      hasContent => {
+        this.slotHasContent = hasContent;
+        this.requestUpdate();
+      },
+    );
+  }
+  render() {
+    return html`<div
+      class=${classMap({
+        divider: true,
+        vertical: this.vertical,
+        'slot-has-content': this.slotHasContent,
+      })}
+    >
+      <div class="line"></div>
+      <div class="slot-container">
+        <slot></slot>
+      </div>
+      <div class="line"></div>
+    </div>`;
+  }
+  #handleSlotChange(event: { target: any }) {
+    const slot = event.target;
+    // Check assignedElements length
+    this.slotHasContent = slot.assignedNodes({ flatten: true }).length > 0;
+  }
+}

package/src/divider/index.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export { Divider } from './divider.js';

package/src/icon/icon.ts CHANGED Viewed

@@ -5,14 +5,34 @@ import { fetchIcon, fetchSVG } from './datasource.js';
 import { sanitizeSvg } from '../utils.js';
 import { styles } from './icon.css.js';
+/**
+ * @label Icon
+ * @tag p-icon
+ * @rawTag icon
+ * @summary Icons are visual symbols used to represent ideas, objects, or actions.
+ * @overview Icons are visual symbols used to represent ideas, objects, or actions. They communicate messages at a glance, afford interactivity, and draw attention to important information.
+ *
+ * @cssprop --icon-color - Controls the color of the icon.
+ * @cssprop [--icon-size=1rem] - Controls the size of the icon. Defaults to "1rem"
+ *
+ * @example
+ * ```html
+ * <p-icon name="home"></p-icon>
+ * ```
+ *
+ */
 export class Icon extends LitElement {
   static styles = [styles];
+  /**
+   * The identifier for the icon.
+   * This name corresponds to a specific SVG asset in the icon set.
+   */
   @property({ type: String, reflect: true }) name?: string;
   @property({ type: String, reflect: true }) src?: string;
-  @property({ type: String }) provider?: 'material-symbols' | 'carbon' =
+  @property({ type: String }) provider: 'material-symbols' | 'carbon' =
     'material-symbols';
   @state()

package/src/icon/p-icon.ts CHANGED Viewed

@@ -1,12 +1,5 @@
 import { customElement } from 'lit/decorators.js';
 import { Icon } from './icon.js';
-/**
- * @name Icon
- * @summary Icons are visual symbols used to represent ideas, objects, or actions.
- *
- * @cssprop --icon-color - Controls the color of the icon.
- * @cssprop [--icon-size=1rem] - Controls the size of the icon. Defaults to "1rem"
- */
 @customElement('p-icon')
 export class PIcon extends Icon {}

package/src/index.ts CHANGED Viewed

@@ -1,3 +1,5 @@
 export { Icon } from './icon/index.js';
 export { Avatar } from './avatar/index.js';
 export { Badge } from './badge/index.js';
+export { Divider } from './divider/index.js';
+export { Clock } from './clock/index.js';

package/src/peacock-loader.ts CHANGED Viewed

@@ -1,9 +1,11 @@
 // Eager loaded
+import cssComponentsStyleSheet from '@redvars/peacock-design-tokens/dist/tokens.css';
 import { Icon } from './icon/icon.js';
 import { Avatar } from './avatar/avatar.js';
+import { Badge } from './badge/badge.js';
+import { Divider } from './divider/divider.js';
 import { LoaderConfig, LoaderUtils } from './LoaderUtils.js';
-import cssComponentsStyleSheet from '../assets/tokens.css';
 import { createLinkStyles } from './link/link.css.js';
 import { createTextStyles } from './text/text.css.js';
@@ -35,8 +37,6 @@ function stringifyStyleSheet(stylesheet: any) {
   );
 }
-console.log(stringifyStyleSheet(textStylesheet));
 document.adoptedStyleSheets = styleSheets;
 const loaderConfig: LoaderConfig = {
@@ -49,6 +49,15 @@ const loaderConfig: LoaderConfig = {
     avatar: {
       CustomElementClass: Avatar,
     },
+    badge: {
+      CustomElementClass: Badge,
+    },
+    divider: {
+      CustomElementClass: Divider,
+    },
+    clock: {
+      importPath: '.' + '/clock.js',
+    },
   },
 };

package/src/utils.ts CHANGED Viewed

@@ -108,3 +108,46 @@ export function sanitizeSvg(rawSvg: string) {
     return '';
   }
 }
+function __hasMeaningfulContent(slotElement: any) {
+  const nodes = slotElement.assignedNodes({ flatten: true });
+  for (const node of nodes) {
+    // If it's an element node, it has content
+    if (node.nodeType === Node.ELEMENT_NODE) {
+      return true;
+    }
+    // If it's a text node and contains non-whitespace characters, it has content
+    if (
+      node.nodeType === Node.TEXT_NODE &&
+      node.textContent.trim().length > 0
+    ) {
+      return true;
+    }
+  }
+  // No meaningful content found
+  return false;
+}
+export function observerSlotChangesWithCallback(
+  slot: HTMLSlotElement | null,
+  callback: (hasContent: boolean) => void,
+) {
+  const observer = new MutationObserver(() => {
+    callback(__hasMeaningfulContent(slot));
+  });
+  // Observe the elements currently assigned to the slot
+  const assignedNodes = slot?.assignedNodes({ flatten: true }) || [];
+  assignedNodes.forEach(node => {
+    observer.observe(node, {
+      attributes: true,
+      childList: true,
+      characterData: true,
+      subtree: true,
+    });
+  });
+  callback(__hasMeaningfulContent(slot));
+}