@redvars/peacock 3.1.2 → 3.1.3

package/src/button/button.ts

@@ -0,0 +1,304 @@
+import { html, LitElement } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import styles from './button.scss';
+import { observerSlotChangesWithCallback, throttle } from '../utils.js';
+
+/**
+ * @label Button
+ * @tag p-button
+ * @rawTag button
+ *
+ * @summary Buttons help people initiate actions, from sending an email, to sharing a document, to liking a post.
+ * @overview
+ * <p>Buttons are clickable elements that are used to trigger actions. They communicate calls to action to the user and allow users to interact with pages in a variety of ways. Button labels express what action will occur when the user interacts with it.</p>
+ *
+ * @cssprop --divider-color - Controls the color of the divider.
+ * @cssprop --divider-padding - Controls the padding of the divider.
+ *
+ * @example
+ * ```html
+ * <pc-button>Button</pc-button>
+ * ```
+ * @tags display
+ */
+export class Button extends LitElement {
+  static override styles = [styles];
+
+  #id = crypto.randomUUID();
+
+  #tabindex?: number = 0;
+
+  @query('.button') private readonly buttonElement!: HTMLElement | null;
+
+  @property({ type: String }) htmlType: 'button' | 'submit' | 'reset' =
+    'button';
+
+  /**
+   * The visual style of the button.
+   *
+   *  Possible variant values:
+   * `"filled"` is a filled button.
+   * `"outlined"` is an outlined button.
+   * `"text"` is a transparent button.
+   * `"tonal"` is a light color button.
+   *
+   */
+  @property() variant:
+    | 'elevated'
+    | 'filled'
+    | 'tonal'
+    | 'outlined'
+    | 'text'
+    | 'neo' = 'filled';
+
+  /**
+   * Button size.
+   * Possible values are `"sm"`, `"md"`, `"lg"`. Defaults to `"md"`.
+   */
+  @property() size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'sm';
+
+  /**
+   * If true, the user cannot interact with the button. Defaults to `false`.
+   */
+  @property({ reflect: true }) disabled: boolean = false;
+
+  /**
+   * If true, the user cannot interact with the button and the button is visually styled as disabled. But the button is still focusable. Defaults to `false`.
+   */
+  @property({ reflect: true }) softDisabled: boolean = false;
+
+  /**
+   * If button is disabled, the reason why it is disabled.
+   */
+  @property() disabledReason: string = '';
+
+  /**
+   * Defines the primary color of the button. This can be set to predefined color names to apply specific color themes.
+   */
+  @property({ reflect: true }) color:
+    | 'primary'
+    | 'secondary'
+    | 'success'
+    | 'danger'
+    | 'warning'
+    | 'white'
+    | 'black' = 'primary';
+
+  /**
+   * Icon alignment.
+   * Possible values are `"start"`, `"end"`. Defaults to `"end"`.
+   */
+  @property() iconAlign: 'start' | 'end' = 'end';
+
+  /**
+   * Hyperlink to navigate to on click.
+   */
+  @property({ reflect: true }) href?: string;
+
+  @property({ reflect: true }) configAria?: { [key: string]: any };
+
+  /**
+   * Sets or retrieves the window or frame at which to target content.
+   */
+  @property() target: string = '_self';
+
+  @property() selected: boolean = false;
+
+  /**
+   * Sets the delay for throttle in milliseconds. Defaults to 200 milliseconds.
+   */
+  @property() throttleDelay = 200;
+
+  /**
+   * States
+   */
+  @state()
+  private isPressed = false;
+
+  @state()
+  private slotHasContent = false;
+
+  override focus() {
+    this.buttonElement?.focus();
+  }
+
+  override blur() {
+    this.buttonElement?.blur();
+  }
+
+  override connectedCallback() {
+    super.connectedCallback();
+    window.addEventListener('mouseup', this.__handlePress);
+  }
+
+  override disconnectedCallback() {
+    window.removeEventListener('mouseup', this.__handlePress);
+    super.disconnectedCallback();
+  }
+
+  override firstUpdated() {
+    this.__dispatchClickWithThrottle = throttle(
+      this.__dispatchClick,
+      this.throttleDelay,
+    );
+    observerSlotChangesWithCallback(
+      this.renderRoot.querySelector('slot'),
+      hasContent => {
+        this.slotHasContent = hasContent;
+        this.requestUpdate();
+      },
+    );
+  }
+
+  private __dispatchClickWithThrottle: (
+    event: MouseEvent | KeyboardEvent,
+  ) => void = event => {
+    this.__dispatchClick(event);
+  };
+
+  __dispatchClick = (event: MouseEvent | KeyboardEvent) => {
+    // If the button is soft-disabled or a disabled link, we need to explicitly
+    // prevent the click from propagating to other event listeners as well as
+    // prevent the default action.
+    if (this.softDisabled || (this.disabled && this.href)) {
+      event.stopImmediatePropagation();
+      event.preventDefault();
+      return;
+    }
+
+    this.focus();
+    this.dispatchEvent(
+      new CustomEvent('button:click', {
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  };
+
+  __renderDisabledReason() {
+    if (this.disabled && this.disabledReason)
+      return html`<div
+        id="disabled-reason-${this.#id}"
+        role="tooltip"
+        aria-label=${this.disabledReason}
+        class="sr-only"
+      >
+        {this.disabledReason}
+      </div>`;
+    return null;
+  }
+
+  __handlePress = (event: KeyboardEvent | MouseEvent) => {
+    if (
+      event instanceof KeyboardEvent &&
+      event.type === 'keydown' &&
+      (event.key === 'Enter' || event.key === ' ')
+    ) {
+      this.isPressed = true;
+    } else if (event.type === 'mousedown') {
+      this.isPressed = true;
+    } else {
+      this.isPressed = false;
+    }
+  };
+
+  /* @ts-ignore */
+  private __isLink() {
+    return !!this.href;
+  }
+
+  override render() {
+    const isLink = this.__isLink();
+    const { variant, subVariant } = this.getVariant();
+
+    const cssClasses = {
+      button: true,
+      'button-element': true,
+      [`size-${this.size}`]: true,
+      [`variant-${variant}`]: true,
+      [`variant-${subVariant}`]: !!subVariant,
+      [`color-${this.color}`]: true,
+      disabled: this.disabled || this.softDisabled,
+      pressed: this.isPressed,
+      'has-content': this.slotHasContent,
+    };
+
+    if (!isLink) {
+      return html`<button
+        class=${classMap(cssClasses)}
+        tabindex=${this.#tabindex}
+        type=${this.htmlType}
+        @click=${this.__dispatchClickWithThrottle}
+        @mousedown=${this.__handlePress}
+        @keydown=${this.__handlePress}
+        @keyup=${this.__handlePress}
+        ?aria-describedby=${(this.disabled || this.softDisabled) &&
+        this.disabledReason
+          ? `disabled-reason-${this.#id}`
+          : null}
+        aria-disabled=${`${this.disabled || this.softDisabled}`}
+        ?disabled=${this.disabled}
+      >
+        ${this.renderButtonContent()}
+      </button>`;
+    }
+    return html`<a
+      class=${classMap(cssClasses)}
+      tabindex=${this.#tabindex}
+      href=${this.href}
+      target=${this.target}
+      @click=${this.__dispatchClickWithThrottle}
+      @mousedown=${this.__handlePress}
+      @keydown=${this.__handlePress}
+      @keyup=${this.__handlePress}
+      role="button"
+      aria-describedby=${this.disabled && this.disabledReason
+        ? `disabled-reason-${this.#id}`
+        : null}
+      aria-disabled=${`${this.disabled}`}
+    >
+      <div class="icon">
+        <slot name="icon"></slot>
+      </div>
+
+      <div class="slot-container">
+        <slot></slot>
+      </div>
+    </a>`;
+  }
+
+  getVariant() {
+    const variants = this.variant?.split('.');
+    if (!['filled', 'outlined', 'text', 'tonal', 'neo'].includes(variants[0])) {
+      variants.unshift('filled');
+    }
+    const [variant, subVariant] = variants as [string, string?];
+    return { variant, subVariant };
+  }
+
+  renderButtonContent() {
+    return html`
+      <p-focus-ring class="focus-ring" .control=${this}></p-focus-ring>
+      <p-elevation class="elevation"></p-elevation>
+      <div class="neo-background"></div>
+      <div class="background"></div>
+      <div class="outline"></div>
+      <p-ripple class="ripple"></p-ripple>
+
+      <div class="button-content">
+        ${this.iconAlign === 'start'
+          ? html`<slot name="icon"></slot></div>`
+          : null}
+
+        <div class="slot-container">
+          <slot></slot>
+        </div>
+
+        ${this.iconAlign === 'end' ? html`<slot name="icon"></slot>` : null}
+      </div>
+
+      ${this.__renderDisabledReason()}
+    `;
+  }
+}

package/src/button/demo/index.html

@@ -0,0 +1,42 @@
+<!doctype html>
+<html lang='en-GB'>
+<head>
+  <meta charset='utf-8'>
+  <link rel='stylesheet' href='/dist/assets/styles/tokens.css' />
+  <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>
+
+<a href='#'>Back</a>
+
+<p-button>Click</p-button>
+
+<p-button variant='elevated' iconAlign='start'><p-icon slot='icon' name='home'></p-icon> Click</p-button>
+
+<p-button variant='tonal'>Click</p-button>
+
+<p-button variant='outlined'>Click</p-button>
+
+<p-button variant='text'>Click</p-button>
+
+<p-button variant='neo'>Click</p-button>
+
+
+<script type='module'>
+  import { Button, Elevation, FocusRing, Ripple, Icon } from '/dist/index.js';
+  window.customElements.define('p-button', Button);
+  window.customElements.define('p-elevation', Elevation);
+  window.customElements.define('p-focus-ring', FocusRing);
+  window.customElements.define('p-ripple', Ripple);
+  window.customElements.define('p-icon', Icon);
+</script>
+</body>
+</html>

package/src/button/index.ts

@@ -0,0 +1 @@
+export { Button } from './button.js';

package/src/clock/ClockController.ts

@@ -0,0 +1,32 @@
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+
+export class ClockController implements ReactiveController {
+  host: ReactiveControllerHost;
+
+  value = new Date();
+
+  timeout: number;
+
+  private _timerID?: any;
+
+  constructor(host: ReactiveControllerHost, timeout = 1000) {
+    this.host = host;
+    this.host.addController(this);
+    this.timeout = timeout;
+  }
+
+  hostConnected() {
+    // Start a timer when the host is connected
+    this._timerID = setInterval(() => {
+      this.value = new Date();
+      // Update the host with new value
+      this.host.requestUpdate();
+    }, this.timeout);
+  }
+
+  hostDisconnected() {
+    // Clear the timer when the host is disconnected
+    clearInterval(this._timerID);
+    this._timerID = undefined;
+  }
+}

package/src/clock/clock.scss

@@ -0,0 +1,9 @@
+@use '../../scss/mixin';
+
+:host {
+  display: inline-block;
+}
+
+.current-time {
+  @include mixin.get-typography('body-medium')
+}

package/src/clock/clock.ts

@@ -1,57 +1,39 @@
-import { html, LitElement } from 'lit';
-import { property, state } from 'lit/decorators.js';
-import { styles } from './clock.css.js';
-
-/**
- * @label Clock
- * @tag p-clock
- * @rawTag clock
- *
- * @summary Displays the current time in a given timezone.
- * @overview
- *  - Clocks are used to display the current time in a specified timezone.
- *  - They can be displayed in various formats, including 12-hour and 24-hour time.
- *
- * @example
- * ```html
- * <p-clock></p-clock>
- * ```
- * @tags display
- */
-export class Clock extends LitElement {
-  static styles = [styles];
-
-  @property() timezone?: string;
-
-  // `currentTime` is decorated with `@State()`,
-  // as we need to trigger a rerender when its
-  // value changes to show the latest time
-  @state() currentTime: string = '';
-
-  private _timerId: any;
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.__updateCurrentTime();
-    this._timerId = setInterval(() => {
-      this.__updateCurrentTime();
-    }, 1000);
-  }
-
-  disconnectedCallback() {
-    if (this._timerId) {
-      clearInterval(this._timerId);
-    }
-    super.disconnectedCallback();
-  }
-
-  __updateCurrentTime() {
-    this.currentTime = new Date().toLocaleTimeString('en-US', {
-      timeZone: this.timezone,
-    });
-  }
-
-  render() {
-    return html`<div class="current-time">${this.currentTime}</div>`;
-  }
-}
+import { html, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import styles from './clock.scss';
+import { ClockController } from './ClockController.js';
+
+/**
+ * @label Clock
+ * @tag p-clock
+ * @rawTag clock
+ *
+ * @summary Displays the current time in a given timezone.
+ * @overview
+ *  - Clocks are used to display the current time in a specified timezone.
+ *  - They can be displayed in various formats, including 12-hour and 24-hour time.
+ *
+ * @example
+ * ```html
+ * <p-clock></p-clock>
+ * ```
+ * @tags display
+ */
+export class Clock extends LitElement {
+  static styles = [styles];
+
+  clockController = new ClockController(this, 100);
+
+  @property() timezone?: string;
+
+  __formatDate(date: Date) {
+    return date.toLocaleTimeString('en-US', {
+      timeZone: this.timezone,
+    });
+  }
+
+  render() {
+    const currentDate = this.__formatDate(this.clockController.value);
+    return html`<div class="current-time">${currentDate}</div>`;
+  }
+}

package/src/code-highlighter/code-highlighter.ts

@@ -0,0 +1,58 @@
+import { html, LitElement } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import styles from './code-highlighter.scss';
+import { observerSlotChangesWithCallback } from '../utils.js';
+
+/**
+ * @label Code Highlighter
+ * @tag p-code-highlighter
+ * @rawTag code-highlighter
+ *
+ * @summary The code highlighter component is used to display code snippets with syntax highlighting.
+ * @overview
+ * <p>The <strong>Code Highlighter</strong> component allows you to display code snippets with syntax highlighting for various programming languages. It supports features like line numbers, code formatting, and a copy-to-clipboard button.</p>
+ *
+ * @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 CodeHighlighter 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>`;
+  }
+}

package/src/code-highlighter/demo/index.html

@@ -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/code-highlighter/index.ts

@@ -0,0 +1 @@
+export { CodeHighlighter } from './code-highlighter.js';

package/src/code-highlighter/local.ts

@@ -0,0 +1,11 @@
+export const locale: {
+  loading: string;
+  copyToClipboard: string;
+  copied: string;
+  copiedCode: string;
+} = {
+  loading: 'Loading code...',
+  copyToClipboard: 'Copy to clipboard',
+  copied: 'Copied',
+  copiedCode: 'Copied code',
+};

package/src/divider/divider.scss

@@ -0,0 +1,56 @@
+@use '../../scss/mixin';
+
+:host {
+  display: block;
+
+  --divider-color: var(--color-outline-variant);
+  --divider-padding: var(--spacing-200);
+}
+
+.divider {
+  display: flex;
+  margin: 0;
+  @include mixin.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;
+}