@pairbo/ui-kit 0.0.1

package/src/components/button/button.component.ts

@@ -0,0 +1,93 @@
+import { customElement, property } from "lit/decorators.js";
+import { LitElement } from "lit";
+import type { CSSResultGroup, PropertyValues } from "lit";
+import componentStyles from "../../styles/component.styles.js";
+import styles from "./button.styles.js";
+import { html, literal } from "lit/static-html.js";
+import { classMap } from "lit/directives/class-map.js";
+import { HasSlotController } from "../../internal/slots.js";
+/**
+ * @summary Short summary of the component's intended use.
+ * @documentation https://shoelace.style/components/button
+ * @status experimental
+ *
+ * @dependency sl-example
+ *
+ * @event sl-event-name - Emitted as an example.
+ *
+ * @slot - The default slot.
+ * @slot example - An example slot.
+ *
+ * @csspart base - The component's base wrapper.
+ *
+ * @cssproperty --example - An example CSS custom property.
+ */
+
+@customElement("pbo-button")
+export default class PboButton extends LitElement {
+  static styles: CSSResultGroup = [componentStyles, styles];
+
+  private readonly hasSlotController = new HasSlotController(this, "[prefix]", "prefix", "suffix");
+
+  @property() href = "";
+  @property() name = "";
+  @property() value = "";
+  /* ------------------------- Button's theme variant ------------------------- */
+  @property({ reflect: true }) variant: "default" | "primary" | "success" | "neutral" | "warning" | "danger" | "text" =
+    "default";
+
+  /* ----------------------------- Button outline ----------------------------- */
+  @property({ type: Boolean, reflect: true }) outline = false;
+
+  /* ------------------------------- Button size ------------------------------ */
+  @property({ reflect: true }) size: "small" | "medium" | "large" = "medium";
+
+  /* ----------------------------- Circular Button ---------------------------- */
+  @property({ type: Boolean, reflect: true }) circle = false;
+
+  private isButton() {
+    return this.href ? false : true;
+  }
+
+  private isLink() {
+    return this.href ? true : false;
+  }
+  protected firstUpdated(_changedProperties: PropertyValues): void {
+    console.log({ componentStyles, styles });
+    console.log("Has default slot:", this.hasSlotController.test("[default]"));
+    console.log("Button classes:", this.shadowRoot?.querySelector(".button")?.classList);
+  }
+  render() {
+    const isLink = this.isLink();
+    const tag = isLink ? literal`a` : literal`button`;
+    return html`
+    <${tag} 
+      part="base" 
+      class= ${classMap({
+        button: true,
+        "button--default": this.variant === "default",
+        "button--primary": this.variant === "primary",
+        "button--success": this.variant === "success",
+        "button--neutral": this.variant === "neutral",
+        "button--warning": this.variant === "warning",
+        "button--danger": this.variant === "danger",
+        "button--text": this.variant === "text",
+        "button--small": this.size === "small",
+        "button--medium": this.size === "medium",
+        "button--large": this.size === "large",
+        "button--standard": !this.outline,
+        "button--outline": this.outline,
+        "button--has-label": this.hasSlotController.test("[default]"),
+        "button--has-prefix": this.hasSlotController.test("prefix"),
+        "button--has-suffix": this.hasSlotController.test("suffix"),
+        "button--circle": this.circle,
+        "button--disabled": false,
+      })}
+      href="${this.href}"
+    >
+      <slot name="prefix" part="prefix" class="button__prefix"></slot>
+      <slot part="label" class="button__label"></slot>
+      <slot name="suffix" part="suffix" class="button__suffix"></slot>
+    </${tag}>`;
+  }
+}

package/src/components/button/button.styles.ts

@@ -0,0 +1,273 @@
+import { css } from "lit";
+
+export default css`
+  /* --------------------------------- default -------------------------------- */
+
+  :host {
+    display: inline-block;
+    position: relative;
+    width: auto;
+    cursor: pointer;
+  }
+
+  .button {
+    display: inline-flex;
+    align-items: stretch;
+    justify-content: center;
+    width: 100%;
+    border-style: solid;
+    border-width: var(--pbo-input-border-width);
+    font-family: var(--pbo-input-font-family);
+    font-weight: var(--pbo-font-weight-semibold);
+    text-decoration: none;
+    user-select: none;
+    -webkit-user-select: none;
+    white-space: nowrap;
+    vertical-align: middle;
+    padding: 0;
+    transition:
+      var(--pbo-transition-x-fast) background-color,
+      var(--pbo-transition-x-fast) color,
+      var(--pbo-transition-x-fast) border,
+      var(--pbo-transition-x-fast) box-shadow;
+    cursor: inherit;
+  }
+
+  .button::-moz-focus-inner {
+    border: 0;
+  }
+
+  .button:focus {
+    outline: none;
+  }
+
+  .button:focus-visible {
+    outline: var(--pbo-focus-ring);
+    outline-offset: var(--pbo-focus-ring-offset);
+  }
+
+  /* -------------------------------- disabled -------------------------------- */
+  .button--disabled * {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  /* ------------------------------- pre/suf-fix ------------------------------ */
+  .button__prefix,
+  .button__suffix {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    pointer-events: none;
+  }
+
+  /* ---------------------------------- label --------------------------------- */
+  .button__label {
+    display: inline-block;
+  }
+
+  .button__label::slotted(pbo-icon) {
+    vertical-align: -2px;
+  }
+
+  /* -------------------------------------------------------------------------- */
+  /*                              Standard buttons                              */
+  /* -------------------------------------------------------------------------- */
+
+  /* --------------------------------- default -------------------------------- */
+  .button--standard.button--default {
+    background-color: var(--pbo-color-neutral-0);
+    border-color: var(--pbo-input-border-color);
+    color: var(--pbo-color-neutral-700);
+  }
+
+  .button--standard.button--default:hover:not(.button--disabled) {
+    background-color: var(--pbo-color-primary-50);
+    border-color: var(--pbo-color-primary-300);
+    color: var(--pbo-color-primary-700);
+  }
+
+  .button--standard.button--default:active:not(.button--disabled) {
+    background-color: var(--pbo-color-primary-100);
+    border-color: var(--pbo-color-primary-400);
+    color: var(--pbo-color-primary-700);
+  }
+
+  /* --------------------------------- primary -------------------------------- */
+
+  /* --------------------------------- success -------------------------------- */
+
+  /* --------------------------------- neutral -------------------------------- */
+
+  /* --------------------------------- warning -------------------------------- */
+
+  /* --------------------------------- danger --------------------------------- */
+
+  /* -------------------------------------------------------------------------- */
+  /*                               Outline buttons                              */
+  /* -------------------------------------------------------------------------- */
+
+  .button--outline {
+    background: none;
+    border: solid 1px;
+  }
+
+  /* --------------------------------- default -------------------------------- */
+  .button--outline.button--default {
+    border-color: var(--pbo-input-border-color);
+    color: var(--pbo-color-neutral-700);
+  }
+
+  .button--outline.button--default:hover:not(.button--disabled),
+  .button--outline.button--default.button--checked:not(.button--disabled) {
+    border-color: var(--pbo-color-primary-600);
+    background-color: var(--pbo-color-primary-600);
+    color: var(--pbo-color-neutral-0);
+  }
+  /*
+   * Size modifiers
+   */
+
+  .button--small {
+    height: auto;
+    min-height: var(--pbo-input-height-small);
+    font-size: var(--pbo-button-font-size-small);
+    line-height: calc(var(--pbo-input-height-small) - var(--pbo-input-border-width) * 2);
+    border-radius: var(--pbo-input-border-radius-small);
+  }
+
+  .button--medium {
+    height: auto;
+    min-height: var(--pbo-input-height-medium);
+    font-size: var(--pbo-button-font-size-medium);
+    line-height: calc(var(--pbo-input-height-medium) - var(--pbo-input-border-width) * 2);
+    border-radius: var(--pbo-input-border-radius-medium);
+  }
+
+  .button--large {
+    height: auto;
+    min-height: var(--pbo-input-height-large);
+    font-size: var(--pbo-button-font-size-large);
+    line-height: calc(var(--pbo-input-height-large) - var(--pbo-input-border-width) * 2);
+    border-radius: var(--pbo-input-border-radius-large);
+  }
+
+  /*
+   * Outline buttons
+   */
+
+  .button--outline {
+    background: none;
+    border: solid 1px;
+  }
+
+  /* Default */
+  .button--outline.button--default {
+    border-color: var(--pbo-input-border-color);
+    color: var(--pbo-color-neutral-700);
+  }
+
+  .button--outline.button--default:hover:not(.button--disabled),
+  .button--outline.button--default.button--checked:not(.button--disabled) {
+    border-color: var(--pbo-color-primary-600);
+    background-color: var(--pbo-color-primary-600);
+    color: var(--pbo-color-neutral-0);
+  }
+
+  .button--outline.button--default:active:not(.button--disabled) {
+    border-color: var(--pbo-color-primary-700);
+    background-color: var(--pbo-color-primary-700);
+    color: var(--pbo-color-neutral-0);
+  }
+
+  /*
+   * Button spacing
+   */
+
+  .button--has-label.button--small .button__label {
+    padding: 0 var(--pbo-spacing-s);
+  }
+
+  .button--has-label.button--medium .button__label {
+    padding: 0 var(--pbo-spacing-m);
+  }
+
+  .button--has-label.button--large .button__label {
+    padding: 0 var(--pbo-spacing-l);
+  }
+
+  .button--has-prefix.button--small {
+    padding-inline-start: var(--pbo-spacing-xs);
+  }
+
+  .button--has-prefix.button--small .button__label {
+    padding-inline-start: var(--pbo-spacing-xs);
+  }
+
+  .button--has-prefix.button--medium {
+    padding-inline-start: var(--pbo-spacing-s);
+  }
+
+  .button--has-prefix.button--medium .button__label {
+    padding-inline-start: var(--pbo-spacing-s);
+  }
+
+  .button--has-prefix.button--large {
+    padding-inline-start: var(--pbo-spacing-s);
+  }
+
+  .button--has-prefix.button--large .button__label {
+    padding-inline-start: var(--pbo-spacing-s);
+  }
+
+  .button--has-suffix.button--small,
+  .button--caret.button--small {
+    padding-inline-end: var(--pbo-spacing-xs);
+  }
+
+  .button--has-suffix.button--small .button__label,
+  .button--caret.button--small .button__label {
+    padding-inline-end: var(--pbo-spacing-xs);
+  }
+
+  .button--has-suffix.button--medium,
+  .button--caret.button--medium {
+    padding-inline-end: var(--pbo-spacing-s);
+  }
+
+  .button--has-suffix.button--medium .button__label,
+  .button--caret.button--medium .button__label {
+    padding-inline-end: var(--pbo-spacing-s);
+  }
+
+  .button--has-suffix.button--large,
+  .button--caret.button--large {
+    padding-inline-end: var(--pbo-spacing-s);
+  }
+
+  .button--has-suffix.button--large .button__label,
+  .button--caret.button--large .button__label {
+    padding-inline-end: var(--pbo-spacing-s);
+  }
+
+  /* ------------------------------ Circle Button ----------------------------- */
+  .button--circle {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  .button--circle.button--small {
+    width: var(--sl-input-height-small);
+    border-radius: 50%;
+  }
+
+  .button--circle.button--medium {
+    width: var(--sl-input-height-medium);
+    border-radius: 50%;
+  }
+
+  .button--circle.button--large {
+    width: var(--sl-input-height-large);
+    border-radius: 50%;
+  }
+`;

package/src/components/button/button.ts

@@ -0,0 +1,10 @@
+import PboButton from "./button.component.js";
+
+export * from "./button.component.js";
+export default PboButton;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "pbo-button": PboButton;
+  }
+}

package/src/components/button-group/button-group.component.ts

@@ -0,0 +1,36 @@
+import { customElement, property } from "lit/decorators.js";
+import { html, LitElement } from "lit";
+import type { CSSResultGroup } from "lit";
+import componentStyles from "../../styles/component.styles.js";
+import styles from "./button-group.styles.js";
+
+/**
+ * @summary Short summary of the component's intended use.
+ * @documentation https://shoelace.style/components/button-group
+ * @status experimental
+ *
+ * @dependency sl-example
+ *
+ * @event sl-event-name - Emitted as an example.
+ *
+ * @slot - The default slot.
+ * @slot example - An example slot.
+ *
+ * @csspart base - The component's base wrapper.
+ *
+ * @cssproperty --example - An example CSS custom property.
+ */
+
+@customElement("pbo-button-group")
+export default class PboButtonGroup extends LitElement {
+  static styles: CSSResultGroup = [componentStyles, styles];
+
+  /** An example attribute. */
+  @property() attr = "example";
+
+  render() {
+    return html`<div>
+      <slot></slot>
+    </div>`;
+  }
+}

package/src/components/button-group/button-group.styles.ts

@@ -0,0 +1,7 @@
+import { css } from "lit";
+
+export default css`
+  :host {
+    display: block;
+  }
+`;

package/src/components/button-group/button-group.ts

@@ -0,0 +1,10 @@
+import PboButtonGroup from "./button-group.component.js";
+
+export * from "./button-group.component.js";
+export default PboButtonGroup;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "pbo-button-group": PboButtonGroup;
+  }
+}

package/src/components/card-selection/card-selection.component.ts

@@ -0,0 +1,43 @@
+import { customElement, property } from "lit/decorators.js";
+import { html, LitElement } from "lit";
+import type { CSSResultGroup, PropertyValues } from "lit";
+import componentStyles from "../../styles/component.styles.js";
+import PairboElement from "../../internal/pairbo-element.js";
+import styles from "./card-selection.styles.js";
+import { map } from "lit/directives/map.js";
+
+/**
+ * @summary Short summary of the component's intended use.
+ * @status experimental
+ *
+ * @dependency pbo-example
+ *
+ * @event pbo-event-name - Emitted as an example.
+ *
+ * @slot - The default slot.
+ * @slot example - An example slot.
+ *
+ * @csspart base - The component's base wrapper.
+ *
+ * @cssproperty --example - An example CSS custom property.
+ */
+
+@customElement("pbo-card-selection")
+export default class PboCardSelection extends PairboElement {
+  static styles: CSSResultGroup = [componentStyles, styles];
+
+  @property({ type: Array }) categories: Category[] = [];
+
+  protected firstUpdated(_changedProperties: PropertyValues): void {
+    console.log(this.categories);
+  }
+  render() {
+    return html`
+      ${map(this.categories, category => {
+        return html`<pbo-category .cards=${category.cards} .name=${category.name}>
+          <h3 slot="title">${category.name}</h3>
+        </pbo-category>`;
+      })}
+    `;
+  }
+}

package/src/components/card-selection/card-selection.styles.ts

@@ -0,0 +1,7 @@
+import { css } from "lit";
+
+export default css`
+  :host {
+    display: block;
+  }
+`;

package/src/components/card-selection/card-selection.ts

@@ -0,0 +1,10 @@
+import PboCardSelection from "./card-selection.component.js";
+
+export * from "./card-selection.component.js";
+export default PboCardSelection;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "pbo-card-selection": PboCardSelection;
+  }
+}

package/src/components/category/category.component.ts

@@ -0,0 +1,91 @@
+import { customElement, property, query, state } from "lit/decorators.js";
+import { html, unsafeCSS } from "lit";
+import type { CSSResultGroup } from "lit";
+import componentStyles from "../../styles/component.styles.js";
+import PairboElement from "../../internal/pairbo-element.js";
+import styles from "./category.styles.js";
+import splideCss from "@splidejs/splide/dist/css/themes/splide-default.min.css?inline";
+import Splide from "@splidejs/splide";
+import { map } from "lit/directives/map.js";
+
+@customElement("pbo-category")
+export default class PboCategory extends PairboElement {
+  static styles: CSSResultGroup = [componentStyles, styles, unsafeCSS(splideCss)];
+
+  @query("#category-carousel") imageCarousel!: HTMLDivElement;
+  @state() private imageSplide!: Splide;
+  @state() private slides: Card[] = [];
+  @property({
+    type: Array,
+    converter: {
+      fromAttribute(value: string) {
+        try {
+          return JSON.parse(value || "[]"); // Convert from string to array
+        } catch (e) {
+          console.error("Invalid JSON for 'cards':", value);
+          return [];
+        }
+      },
+      toAttribute(value: Card[]) {
+        return JSON.stringify(value); // Convert array back to string
+      },
+    },
+  })
+  cards: Card[] = [];
+
+  protected firstUpdated = (): void => {
+    this.imageSplide = new Splide(this.imageCarousel, {
+      fixedWidth: "24.5%",
+      heightRatio: 0.3,
+      gap: "2%",
+      rewind: false,
+      pagination: false,
+      isNavigation: false,
+      perPage: 2,
+    });
+    this.imageSplide.mount();
+  };
+
+  disconnectedCallback = (): void => {
+    super.disconnectedCallback();
+    this.imageSplide?.destroy();
+  };
+  clickHandler = (event: MouseEvent) => {
+    const target = event.target as HTMLImageElement;
+    this.emit("pbo-category-card-selected", {
+      detail: {
+        cardId: target.dataset.cardId,
+      },
+    });
+  };
+
+  render() {
+    return html`
+      <div class="category-container">
+        <slot name="title"></slot>
+        <section
+          id="category-carousel"
+          class="splide"
+          aria-label="The carousel with thumbnails. Selecting a thumbnail will change the Beautiful Gallery carousel."
+        >
+          <div class="splide__track">
+            <ul class="splide__list">
+              ${map(this.cards, (card: Card) => {
+                return html`
+                  <li class="splide__slide">
+                    <img
+                      src=${card.medias.cover.url}
+                      alt="${card.medias.cover.alt}"
+                      @click=${this.clickHandler}
+                      data-card-id="${card.id}"
+                    />
+                  </li>
+                `;
+              })}
+            </ul>
+          </div>
+        </section>
+      </div>
+    `;
+  }
+}

package/src/components/category/category.styles.ts

@@ -0,0 +1,27 @@
+import { css } from "lit";
+
+export default css`
+  :host {
+    display: block;
+  }
+  .splide {
+    margin: 0 auto;
+    width: 100%;
+  }
+  .splide__slide img {
+    width: 100%;
+    height: 100%;
+    aspect-ratio: 4/3;
+    object-fit: cover;
+    cursor: pointer;
+  }
+  .splide__slide img:hover {
+    border: 2px solid red;
+    box-sizing: border-box;
+  }
+  .splide__slide {
+    max-width: 300px;
+    width: 100%;
+    height: auto;
+  }
+`;

package/src/components/category/category.ts

@@ -0,0 +1,10 @@
+import PboCategory from "./category.component.js";
+
+export * from "./category.component.js";
+export default PboCategory;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "pbo-category": PboCategory;
+  }
+}

package/src/components/category-image/category-image.component.ts

@@ -0,0 +1,38 @@
+import { customElement, property } from "lit/decorators.js";
+import { html, LitElement, unsafeCSS } from "lit";
+import type { CSSResultGroup } from "lit";
+import componentStyles from "../../styles/component.styles.js";
+import PairboElement from "../../internal/pairbo-element.js";
+import styles from "./category-image.styles.js";
+import splideCss from "@splidejs/splide/dist/css/themes/splide-default.min.css?inline";
+
+/**
+ * @summary Short summary of the component's intended use.
+ * @status experimental
+ *
+ * @dependency pbo-example
+ *
+ * @event pbo-event-name - Emitted as an example.
+ *
+ * @slot - The default slot.
+ * @slot example - An example slot.
+ *
+ * @csspart base - The component's base wrapper.
+ *
+ * @cssproperty --example - An example CSS custom property.
+ */
+
+@customElement("pbo-category-image")
+export default class PboCategoryImage extends PairboElement {
+  static styles: CSSResultGroup = [componentStyles, styles, unsafeCSS(splideCss)];
+
+  /** An example attribute. */
+  @property() attr = "example";
+  render() {
+    return html`
+      <li class="splide__slide">
+        <slot></slot>
+      </li>
+    `;
+  }
+}

package/src/components/category-image/category-image.styles.ts

@@ -0,0 +1,11 @@
+import { css } from "lit";
+
+export default css`
+  :host {
+    display: inline-block;
+  }
+  .splide__slide img {
+    width: 100%;
+    height: auto;
+  }
+`;

package/src/components/category-image/category-image.ts

@@ -0,0 +1,10 @@
+import PboCategoryImage from "./category-image.component.js";
+
+export * from "./category-image.component.js";
+export default PboCategoryImage;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "pbo-category-image": PboCategoryImage;
+  }
+}