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

@redvars/peacock 3.1.0 → 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 (187) 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/demo/index.html CHANGED Viewed

@@ -13,13 +13,13 @@
 <body>
-<pc-icon></pc-icon>
-<pc-icon provider='carbon' name='logo--github'></pc-icon>
+<p-icon></p-icon>
+<p-icon provider='carbon' name='logo--github'></p-icon>
 <script type='module'>
-  import { Icon } from '/dist/src/index.js';
+  import { Icon } from '/dist/index.js';
-  window.customElements.define('pc-icon', Icon);
+  window.customElements.define('p-icon', Icon);
 </script>
 </body>
 </html>

package/src/icon/icon.ts CHANGED Viewed

@@ -6,19 +6,33 @@ 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];
-  @property({ type: String, reflect: true }) name?: string = 'home';
+  /**
+   * 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

@@ -2,4 +2,4 @@ import { customElement } from 'lit/decorators.js';
 import { Icon } from './icon.js';
 @customElement('p-icon')
-export class IconComponent extends Icon {}
+export class PIcon extends Icon {}

package/src/index.ts CHANGED Viewed

@@ -1,2 +1,5 @@
-export { Icon } from './icon/icon.js';
-export { Avatar } from './avatar/avatar.js';
+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/link/link.css.ts ADDED Viewed

@@ -0,0 +1,36 @@
+import { css, unsafeCSS, CSSResult } from 'lit';
+import { focusRing } from '../styleMixins.css.js';
+export const createLinkStyles = (prefix: string): CSSResult => css`
+  .${unsafeCSS(prefix)}-link {
+    border-radius: inherit;
+    corner-shape: inherit;
+    color: var(--color-primary);
+    --icon-color: var(--color-primary);
+  }
+  .${unsafeCSS(prefix)}-link:hover {
+    color: var(--color-on-primary-container);
+    --icon-color: var(--color-on-primary-container);
+  }
+  .${unsafeCSS(prefix)}-link:focus {
+    text-decoration: none;
+    ${focusRing()}
+  }
+  .${unsafeCSS(prefix)}-link.no-style {
+    color: var(--color-on-surface);
+    --icon-color: var(--color-on-surface);
+    text-decoration: none !important;
+  }
+  .${unsafeCSS(prefix)}-link.no-decoration {
+    text-decoration: none !important;
+  }
+  .${unsafeCSS(prefix)}-link.inline {
+    text-decoration: var(--link-decoration, underline);
+  }
+`;

package/src/peacock-loader.ts CHANGED Viewed

@@ -1,15 +1,62 @@
 // 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 { createLinkStyles } from './link/link.css.js';
+import { createTextStyles } from './text/text.css.js';
+const libraryPrefix = 'p';
+function buildSheet(styleSheet: any) {
+  const sheet = new CSSStyleSheet();
+  // Add rules
+  sheet.replaceSync(styleSheet.toString());
+  return sheet;
+}
+const styleSheets = [buildSheet(cssComponentsStyleSheet)];
+const linkStylesheet = createLinkStyles(libraryPrefix).styleSheet;
+if (linkStylesheet) styleSheets.push(linkStylesheet);
+const textStylesheet = createTextStyles(libraryPrefix).styleSheet;
+if (textStylesheet) styleSheets.push(textStylesheet);
+function stringifyStyleSheet(stylesheet: any) {
+  // Use Array.from() to convert the CSSRuleList to an array
+  return (
+    Array.from(stylesheet.cssRules)
+      // Map each rule to its cssText property
+      .map((rule: any) => rule.cssText || '')
+      // Join all the rules with a newline character
+      .join('\\n')
+  );
+}
+document.adoptedStyleSheets = styleSheets;
 const loaderConfig: LoaderConfig = {
-  prefix: 'p',
+  prefix: libraryPrefix,
   components: {
     icon: {
       CustomElementClass: Icon,
+      // importPath: './component/icon.js', - for lazy load give path instead of CustomElementClass
     },
     avatar: {
-      importPath: './component/avatar.js',
+      CustomElementClass: Avatar,
+    },
+    badge: {
+      CustomElementClass: Badge,
+    },
+    divider: {
+      CustomElementClass: Divider,
+    },
+    clock: {
+      importPath: '.' + '/clock.js',
     },
   },
 };

package/src/styleMixins.css.ts ADDED Viewed

@@ -0,0 +1,55 @@
+import { css, unsafeCSS, CSSResult } from 'lit';
+export const focusRing = (
+  color = 'var(--border-interactive)',
+): CSSResult => css`
+  outline: 2px solid ${unsafeCSS(color)};
+`;
+export const getTypography = (name: string): CSSResult => css`
+  font-family: var(--typography-${unsafeCSS(name)}-font-family) !important;
+  font-size: var(--typography-${unsafeCSS(name)}-font-size) !important;
+  font-weight: var(--typography-${unsafeCSS(name)}-font-weight) !important;
+  line-height: var(--typography-${unsafeCSS(name)}-line-height) !important;
+  letter-spacing: var(
+    --typography-${unsafeCSS(name)}-letter-spacing
+  ) !important;
+`;
+export const getTypographyNotImportant = (name: string): CSSResult => css`
+  font-family: var(--typography-${unsafeCSS(name)}-font-family);
+  font-size: var(--typography-${unsafeCSS(name)}-font-size);
+  font-weight: var(--typography-${unsafeCSS(name)}-font-weight);
+  line-height: var(--typography-${unsafeCSS(name)}-line-height);
+  letter-spacing: var(--typography-${unsafeCSS(name)}-letter-spacing);
+`;
+export const forPhoneOnly = (content: CSSResult): CSSResult => css`
+  @media (max-width: 671px) {
+    ${content}
+  }
+`;
+export const forTabletPortraitUp = (content: CSSResult): CSSResult => css`
+  @media (min-width: 672px) {
+    ${content}
+  }
+`;
+export const forTabletLandscapeUp = (content: CSSResult): CSSResult => css`
+  @media (min-width: 1056px) {
+    ${content}
+  }
+`;
+export const forDesktopUp = (content: CSSResult): CSSResult => css`
+  @media (min-width: 1312px) {
+    ${content}
+  }
+`;
+export const forBigDesktopUp = (content: CSSResult): CSSResult => css`
+  @media (min-width: 1584px) {
+    ${content}
+  }
+`;

package/src/styles.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+declare module '*.css' {
+  const content: Record<string, string>;
+  export default content;
+}
+declare module '*.scss' {
+  import { CSSResultGroup } from 'lit';
+  const styles: CSSResultGroup;
+  export default styles;
+}

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

@@ -0,0 +1,76 @@
+import { css, unsafeCSS, CSSResult } from 'lit';
+import { getTypography } from '../styleMixins.css.js';
+/**
+ * Sass equivalents:
+ * $types: "display", "headline", "body", "code", "label", "title";
+ * $sizes: "large", "medium", "small";
+ */
+const TYPES = [
+  'display',
+  'headline',
+  'body',
+  'code',
+  'label',
+  'title',
+] as const;
+const SIZES = ['large', 'medium', 'small'] as const;
+const createTagClass = (prefix: string, tag: string) => css`
+  .${unsafeCSS(prefix)}-text-${unsafeCSS(tag)} {
+    ${getTypography(tag)}
+  }
+  .${unsafeCSS(prefix)}-text-${unsafeCSS(tag)}-emphasized {
+    ${getTypography(`${tag}-emphasized`)}
+  }
+`;
+const createTypeClass = (prefix: string, type: string) => css`
+  .${unsafeCSS(prefix)}-text-${unsafeCSS(type)} {
+    ${getTypography(`${type}-medium`)}
+  }
+  .${unsafeCSS(prefix)}-text-${unsafeCSS(type)}-emphasized {
+    ${getTypography(`${type}-medium-emphasized`)}
+  }
+  ${unsafeCSS(
+    SIZES.map(size => createTagClass(prefix, `${type}-${size}`)).join(''),
+  )}
+`;
+export const createTextStyles = (prefix: string): CSSResult => css`
+  /* === Margin rules (manual groups from Sass) === */
+  .${unsafeCSS(prefix)}-text-body,
+    .${unsafeCSS(prefix)}-text-body-medium,
+    .${unsafeCSS(prefix)}-text-body-large,
+    .${unsafeCSS(prefix)}-text-body-small {
+    margin-block-end: var(--spacing-200);
+  }
+  .${unsafeCSS(prefix)}-text-headline,
+    .${unsafeCSS(prefix)}-text-headline-medium,
+    .${unsafeCSS(prefix)}-text-headline-large,
+    .${unsafeCSS(prefix)}-text-headline-small {
+    margin-block-end: var(--spacing-400);
+  }
+  .${unsafeCSS(prefix)}-text-display,
+    .${unsafeCSS(prefix)}-text-display-medium,
+    .${unsafeCSS(prefix)}-text-display-large,
+    .${unsafeCSS(prefix)}-text-display-small {
+    margin-block-end: var(--spacing-400);
+  }
+  .${unsafeCSS(prefix)}-text-title,
+    .${unsafeCSS(prefix)}-text-title-medium,
+    .${unsafeCSS(prefix)}-text-title-large,
+    .${unsafeCSS(prefix)}-text-title-small {
+    margin-block-end: var(--spacing-400);
+  }
+  ${unsafeCSS(TYPES.map(type => createTypeClass(prefix, type)).join(''))}
+`;

package/src/utils.ts CHANGED Viewed

@@ -109,10 +109,45 @@ export function sanitizeSvg(rawSvg: string) {
   }
 }
-export const getTypography = (name: string) => `
-  font-family: var(--typography-${name}-font-family) !important;
-  font-size: var(--typography-${name}-font-size) !important;
-  font-weight: var(--typography-${name}-font-weight) !important;
-  line-height: var(--typography-${name}-line-height) !important;
-  letter-spacing: var(--typography-${name}-letter-spacing) !important;
-`;
+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));
+}

package/tsconfig.json CHANGED Viewed

@@ -6,7 +6,7 @@
     "noEmitOnError": true,
     "lib": ["es2021", "dom", "DOM.Iterable"],
     "strict": true,
-    "esModuleInterop": false,
+    "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "experimentalDecorators": true,
     "importHelpers": false,

package/README.md DELETED Viewed

@@ -1,46 +0,0 @@
-# `src/Icon.ts`:
-## class: `Icon`
-### Superclass
-| Name         | Module | Package |
-| ------------ | ------ | ------- |
-| `LitElement` |        | lit     |
-### Fields
-| Name       | Privacy | Type                                          | Default              | Description | Inherited From |
-| ---------- | ------- | --------------------------------------------- | -------------------- | ----------- | -------------- |
-| `name`     |         | `string \| undefined`                         | `'home'`             |             |                |
-| `src`      |         | `string \| undefined`                         |                      |             |                |
-| `provider` |         | `'material-symbols' \| 'carbon' \| undefined` | `'material-symbols'` |             |                |
-### Events
-| Name         | Type          | Description | Inherited From |
-| ------------ | ------------- | ----------- | -------------- |
-| `icon-error` | `CustomEvent` |             |                |
-### Attributes
-| Name       | Field    | Inherited From |
-| ---------- | -------- | -------------- |
-| `name`     | name     |                |
-| `src`      | src      |                |
-| `provider` | provider |                |
-### CSS Properties
-| Name           | Default | Description                     |
-| -------------- | ------- | ------------------------------- |
-| `--icon-color` |         | Controls the color of the icon. |
-| `--icon-size`  |         | Controls the size of the icon.  |
-<hr/>
-## Exports
-| Kind | Name   | Declaration | Module      | Package |
-| ---- | ------ | ----------- | ----------- | ------- |
-| `js` | `Icon` | Icon        | src/Icon.ts |         |