@redvars/peacock 3.1.1 → 3.1.3

package/src/LoaderUtils.ts

@@ -1,122 +1,122 @@
-interface ComponentConfig {
-  CustomElementClass?: any; // earger load
-  importPath?: string; // lazy load
-  dependencies?: string[];
-}
-
-interface LoaderConfig {
-  prefix?: string;
-  components?: Record<string, ComponentConfig>;
-}
-
-export { LoaderConfig };
-
-export class LoaderUtils {
-  private _loaderConfig: LoaderConfig;
-
-  private _observer: MutationObserver | undefined;
-
-  constructor(private loaderConfig: LoaderConfig) {
-    this._loaderConfig = loaderConfig;
-  }
-
-  static registerComponent(tagName: string, CustomElementClass: any) {
-    if (CustomElementClass && !customElements.get(tagName)) {
-      customElements.define(tagName, CustomElementClass);
-    }
-  }
-
-  start() {
-    this.eagerLoadComponents();
-    this.lazyLoadComponents(document);
-  }
-
-  eagerLoadComponents() {
-    if (!this._loaderConfig.components) return;
-    for (const [name, value] of Object.entries(this._loaderConfig.components)) {
-      if (value.CustomElementClass)
-        LoaderUtils.registerComponent(
-          this.getFullTagName(name),
-          value.CustomElementClass,
-        );
-    }
-  }
-
-  getFullTagName(name: string) {
-    return `${this._loaderConfig.prefix}-${name}`;
-  }
-
-  async registerAsync(tagName: string): Promise<void> {
-    if (customElements.get(tagName)) return;
-
-    const baseName = tagName.replace(`${this._loaderConfig.prefix}-`, '');
-
-    if (!this._loaderConfig.components) return;
-
-    const config = this._loaderConfig.components[baseName];
-    if (!config || !config.importPath) return;
-
-    try {
-      const module = await import(config.importPath);
-
-      // Runtime definition: grabbing the class from the module
-      const CustomElementClass =
-        module.default || module[Object.keys(module)[0]];
-
-      if (CustomElementClass && !customElements.get(tagName)) {
-        customElements.define(tagName, CustomElementClass);
-      }
-
-      // Handle dependencies recursively
-      if (config.dependencies) {
-        for (const dep of config.dependencies) {
-          // eslint-disable-next-line no-await-in-loop
-          await this.registerAsync(this.getFullTagName(dep));
-        }
-      }
-    } catch (error) {
-      console.error(
-        `Unable to load <${tagName}> from ${config.importPath}`,
-        error,
-      );
-    }
-  }
-
-  async load(root: Element | Document): Promise<void> {
-    const rootTagName =
-      root instanceof Element ? root.tagName.toLowerCase() : '';
-
-    const tags = Array.from(root.querySelectorAll(':not(:defined)')).map(el =>
-      el.tagName.toLowerCase(),
-    );
-
-    if (rootTagName.includes('-') && !customElements.get(rootTagName)) {
-      tags.push(rootTagName);
-    }
-
-    const tagsToRegister = [...new Set(tags)];
-    await Promise.allSettled(
-      tagsToRegister.map(tagName => this.registerAsync(tagName)),
-    );
-  }
-
-  lazyLoadComponents(root: any) {
-    this._observer = new MutationObserver(mutations => {
-      for (const { addedNodes } of mutations) {
-        for (const node of addedNodes) {
-          if (node.nodeType === Node.ELEMENT_NODE) {
-            this.load(node as Element);
-          }
-        }
-      }
-    });
-
-    const target = root instanceof Document ? root.documentElement : root;
-    this.load(target);
-
-    this._observer.observe(target, {
-      subtree: true,
-      childList: true,
-    });
-  }
-}
+interface ComponentConfig {
+  CustomElementClass?: any; // earger load
+  importPath?: string; // lazy load
+  dependencies?: string[];
+}
+
+interface LoaderConfig {
+  prefix?: string;
+  components?: Record<string, ComponentConfig>;
+}
+
+export { LoaderConfig };
+
+export class LoaderUtils {
+  private _loaderConfig: LoaderConfig;
+
+  private _observer: MutationObserver | undefined;
+
+  constructor(loaderConfig: LoaderConfig) {
+    this._loaderConfig = loaderConfig;
+  }
+
+  static registerComponent(tagName: string, CustomElementClass: any) {
+    if (CustomElementClass && !customElements.get(tagName)) {
+      customElements.define(tagName, CustomElementClass);
+    }
+  }
+
+  start() {
+    this.eagerLoadComponents();
+    this.lazyLoadComponents(document);
+  }
+
+  eagerLoadComponents() {
+    if (!this._loaderConfig.components) return;
+    for (const [name, value] of Object.entries(this._loaderConfig.components)) {
+      if (value.CustomElementClass)
+        LoaderUtils.registerComponent(
+          this.getFullTagName(name),
+          value.CustomElementClass,
+        );
+    }
+  }
+
+  getFullTagName(name: string) {
+    return `${this._loaderConfig.prefix}-${name}`;
+  }
+
+  async registerAsync(tagName: string): Promise<void> {
+    if (customElements.get(tagName)) return;
+
+    const baseName = tagName.replace(`${this._loaderConfig.prefix}-`, '');
+
+    if (!this._loaderConfig.components) return;
+
+    const config = this._loaderConfig.components[baseName];
+    if (!config || !config.importPath) return;
+
+    try {
+      const module = await import(config.importPath);
+
+      // Runtime definition: grabbing the class from the module
+      const CustomElementClass =
+        module.default || module[Object.keys(module)[0]];
+
+      if (CustomElementClass && !customElements.get(tagName)) {
+        customElements.define(tagName, CustomElementClass);
+      }
+
+      // Handle dependencies recursively
+      if (config.dependencies) {
+        for (const dep of config.dependencies) {
+          // eslint-disable-next-line no-await-in-loop
+          await this.registerAsync(this.getFullTagName(dep));
+        }
+      }
+    } catch (error) {
+      console.error(
+        `Unable to load <${tagName}> from ${config.importPath}`,
+        error,
+      );
+    }
+  }
+
+  async load(root: Element | Document): Promise<void> {
+    const rootTagName =
+      root instanceof Element ? root.tagName.toLowerCase() : '';
+
+    const tags = Array.from(root.querySelectorAll(':not(:defined)')).map(el =>
+      el.tagName.toLowerCase(),
+    );
+
+    if (rootTagName.includes('-') && !customElements.get(rootTagName)) {
+      tags.push(rootTagName);
+    }
+
+    const tagsToRegister = [...new Set(tags)];
+    await Promise.allSettled(
+      tagsToRegister.map(tagName => this.registerAsync(tagName)),
+    );
+  }
+
+  lazyLoadComponents(root: any) {
+    this._observer = new MutationObserver(mutations => {
+      for (const { addedNodes } of mutations) {
+        for (const node of addedNodes) {
+          if (node.nodeType === Node.ELEMENT_NODE) {
+            this.load(node as Element);
+          }
+        }
+      }
+    });
+
+    const target = root instanceof Document ? root.documentElement : root;
+    this.load(target);
+
+    this._observer.observe(target, {
+      subtree: true,
+      childList: true,
+    });
+  }
+}

package/src/avatar/avatar.scss

@@ -0,0 +1,38 @@
+@use '../../scss/mixin';
+
+:host {
+  display: inline-block;
+  pointer-events: none;
+  --avatar-size: 2rem;
+  --avatar-background-color: var(--color-primary);
+  --avatar-text-color: var(--color-on-primary);
+  --avatar-border-radius: var(--global-avatar-border-radius);
+}
+
+.avatar-container {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-050);
+  line-height: 0;
+}
+
+.avatar {
+  border-radius: var(--avatar-border-radius);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--avatar-text-color);
+  width: var(--avatar-size);
+  height: var(--avatar-size);
+  @include mixin.get-typography('body-large-emphasized');
+  background-color: var(--avatar-background-color);
+
+  font-size: calc(var(--avatar-size) * 0.4);
+
+  .image {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    border-radius: inherit;
+  }
+}

package/src/avatar/avatar.ts

@@ -1,8 +1,27 @@
 import { html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { styles } from './avatar.css.js';
+import styles from './avatar.scss';
 
+/**
+ * @label Avatar
+ * @tag p-avatar
+ * @rawTag avatar
+ * @summary The Avatar component is used to represent user, and displays the profile picture, initials or fallback icon.
+ *
+ * @cssprop --avatar-border-radius - Controls the border radius of the avatar.
+ * @cssprop --avatar-background-color - Controls the color of the avatar.
+ * @cssprop --avatar-size - Controls the size of the avatar.
+ * @cssprop --avatar-text-color - Controls the color of the text inside the avatar.
+ *
+ *
+ * @example
+ * ```html
+ * <p-avatar name="Shivaji Varma" src="https://peacock.redvars.com/assets/img/avatar.webp"></p-avatar>
+ * ```
+ *
+ * @tags display
+ */
 export class Avatar extends LitElement {
   static styles = [styles];
 

package/src/avatar/p-avatar.ts

@@ -1,12 +1,5 @@
 import { customElement } from 'lit/decorators.js';
 import { Avatar } from './avatar.js';
 
-/**
- * @summary The Avatar component is used to represent user, and displays the profile picture, initials or fallback icon.
- *
- * @cssprop --avatar-background-color - Controls the color of the avatar.
- * @cssprop --avatar-size - Controls the size of the avatar.
- * @cssprop --avatar-text-color - Controls the color of the text inside the avatar.
- */
 @customElement('p-avatar')
 export class PAvatar extends Avatar {}

package/src/badge/badge.scss

@@ -0,0 +1,31 @@
+@use '../../scss/mixin';
+
+:host {
+  display: inline-block;
+  --badge-color: var(--global-badge-color);
+}
+
+.badge {
+  pointer-events: none;
+  z-index: var(--z-index-badge);
+  color: var(--color-white);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--badge-color);
+  border-radius: var(--shape-corner-full);
+  box-sizing: border-box;
+
+  &.slot-has-content {
+    height: 1rem;
+    min-width: 1rem;
+    padding-inline: var(--spacing-050);
+    @include mixin.get-typography('label-small');
+    color: var(--color-on-error);
+  }
+
+  &:not(.slot-has-content) {
+    height: 0.375rem;
+    width: 0.375rem;
+  }
+}

package/src/badge/badge.ts

@@ -1,8 +1,23 @@
 import { html, LitElement } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { styles } from './badge.css.js';
+import styles from './badge.scss';
+import { observerSlotChangesWithCallback } from '../utils.js';
 
+/**
+ * @label Badge
+ * @tag p-badge
+ * @rawTag badge
+ * @summary The badge component is used to display a small amount of information to the user.
+ *
+ * @cssprop --badge-color - Controls the color of the badge.
+ *
+ * @example
+ * ```html
+ * <p-badge>1</p-badge>
+ * ```
+ * @tags display
+ */
 export class Badge extends LitElement {
   static styles = [styles];
 
@@ -13,17 +28,24 @@ export class Badge extends LitElement {
   @state()
   slotHasContent = false;
 
+  firstUpdated() {
+    observerSlotChangesWithCallback(
+      this.renderRoot.querySelector('slot'),
+      hasContent => {
+        this.slotHasContent = hasContent;
+        this.requestUpdate();
+      },
+    );
+  }
+
   render() {
     return html`<div
-      class=${classMap({ badge: true, 'has-content': this.slotHasContent })}
+      class=${classMap({
+        badge: true,
+        'slot-has-content': this.slotHasContent,
+      })}
     >
-      <slot @slotchange=${this.#handleSlotChange}></slot>
+      <slot></slot>
     </div>`;
   }
-
-  #handleSlotChange(event: { target: any }) {
-    const slot = event.target;
-    // Check assignedElements length
-    this.slotHasContent = slot.assignedElements().length > 0;
-  }
 }

package/src/badge/demo/index.html

@@ -43,7 +43,15 @@
 </div>
 
 
-<p-avatar name='Shivaji Varma'></p-avatar>
+<div class="badge-wrapper">
+  <p-icon name="notifications"></p-icon>
+  <p-badge class="badge-anchor">1</p-badge>
+</div>
+
+<div class="badge-wrapper">
+  <p-icon name="notifications"></p-icon>
+  <p-badge class="badge-anchor">999+</p-badge>
+</div>
 
 <script type='module'>
   import { Icon, Badge } from '/dist/index.js';

package/src/badge/p-badge.ts

@@ -1,10 +1,5 @@
 import { customElement } from 'lit/decorators.js';
 import { Badge } from './badge.js';
 
-/**
- * @summary The badge component is used to display a small amount of information to the user.
- *
- * @cssprop --badge-color - Controls the color of the badge.
- */
 @customElement('p-badge')
 export class PBadge extends Badge {}

package/src/button/_button-sizes.scss

@@ -0,0 +1,59 @@
+@use '../../scss/mixin';
+
+.button {
+  font-family: var(--font-family-sans) !important;
+}
+
+.button.size-xs,
+.button.size-extra-small {
+  --_button-height: 2rem;
+  --_button-icon-size: 1.25rem;
+  --_container-padding: 0.75rem;
+
+
+  &:not(.has-content).has-icon {
+    --internal-button-padding: 0.25rem;
+  }
+}
+
+
+.button.size-sm,
+.button.size-small {
+  --_button-height: 2.5rem;
+  --_button-icon-size: 1.25rem;
+  --_container-padding: 1rem;
+  --_button-icon-label-spacing: 0.5rem;
+
+  font-size:  0.875rem !important;
+  font-weight: var(--font-weight-medium) !important;
+  line-height: 1.25rem !important;
+  letter-spacing: 1px !important;
+}
+
+.button.size-md,
+.button.size-medium {
+  --_button-height: 3.5rem;
+  --_button-icon-size: 1.5rem;
+  --_container-padding: 1.5rem;
+
+  &:not(.has-content).has-icon {
+    --internal-button-padding: 0.75rem;
+  }
+}
+
+.button.size-lg,
+.button.size-large {
+  --_button-height: 6rem;
+  --_button-icon-size: 2rem;
+  --_container-padding: 3rem;
+}
+
+.button.size-xl {
+  --_button-height: 8.5rem;
+  --_button-icon-size: 2.5rem;
+  --_container-padding: 4rem;
+
+  .button-content {
+    padding-bottom: 1rem;
+  }
+}