@supersoniks/concorde 2.0.7 → 3.0.0

package/src/core/components/ui/card/card-footer.ts

@@ -0,0 +1,19 @@
+import {html, LitElement} from "lit";
+import {customElement} from "lit/decorators.js";
+const tagName = "sonic-card-footer";
+
+@customElement(tagName)
+export class CardFooter extends LitElement {
+  // static styles = [
+  //   css`
+  //     :host {
+
+  //     }
+
+  //   `
+  // ];
+
+  render() {
+    return html` <slot></slot> `;
+  }
+}

package/src/core/components/ui/card/card-header-descripton.ts

@@ -0,0 +1,24 @@
+import {html, LitElement, css} from "lit";
+import {customElement} from "lit/decorators.js";
+const tagName = "sonic-card-header-description";
+@customElement(tagName)
+export class CardHeaderDescription extends LitElement {
+  static styles = [
+    css`
+      div {
+        margin-top: 0.1em;
+        font-family: var(--sc-font-family-base);
+        font-size: 0.7em;
+        font-weight: var(--sc-font-style-base);
+      }
+    `,
+  ];
+
+  render() {
+    return html`
+      <div>
+        <slot></slot>
+      </div>
+    `;
+  }
+}

package/{core/components/ui/card/card-header.js → src/core/components/ui/card/card-header.ts}

@@ -1,32 +1,13 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { html, LitElement, css } from "lit";
-import { customElement, property } from "lit/decorators.js";
+import {html, LitElement, css} from "lit";
+import {customElement, property} from "lit/decorators.js";
 import "@supersoniks/concorde/core/components/ui/card/card-header-descripton";
-import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import {unsafeHTML} from "lit/directives/unsafe-html.js";
 const tagName = "sonic-card-header";
-let CardHeader = class CardHeader extends LitElement {
-    render() {
-        return html `
-      <div class="header">
-        <div class="header-content">
-          ${unsafeHTML(this.label)}
-          ${this.description
-            ? html `<sonic-card-header-description>${unsafeHTML(this.description)}</sonic-card-header-description>`
-            : ""}
-          <slot></slot>
-        </div>
-        <slot name="suffix"></slot>
-      </div>
-    `;
-    }
-};
-CardHeader.styles = [
-    css `
+
+@customElement(tagName)
+export class CardHeader extends LitElement {
+  static styles = [
+    css`
       :host {
         --sc-card-header-mb: 1.35rem;
         --sc-card-header-font-size: 1.875rem;
@@ -60,14 +41,23 @@ CardHeader.styles = [
         flex-shrink: 0;
       }
     `,
-];
-__decorate([
-    property()
-], CardHeader.prototype, "label", void 0);
-__decorate([
-    property()
-], CardHeader.prototype, "description", void 0);
-CardHeader = __decorate([
-    customElement(tagName)
-], CardHeader);
-export { CardHeader };
+  ];
+
+  @property() label!: string;
+  @property() description!: string;
+
+  render() {
+    return html`
+      <div class="header">
+        <div class="header-content">
+          ${unsafeHTML(this.label)}
+          ${this.description
+            ? html`<sonic-card-header-description>${unsafeHTML(this.description)}</sonic-card-header-description>`
+            : ""}
+          <slot></slot>
+        </div>
+        <slot name="suffix"></slot>
+      </div>
+    `;
+  }
+}

package/src/core/components/ui/card/card-main.ts

@@ -0,0 +1,24 @@
+import {html, LitElement} from "lit";
+import {customElement} from "lit/decorators.js";
+
+const tagName = "sonic-card-main";
+
+@customElement(tagName)
+export class CardMain extends LitElement {
+  // static styles = [
+  //   css`
+  //     :host {
+
+  //     }
+
+  //   `
+  // ];
+
+  render() {
+    return html`
+      <div>
+        <slot></slot>
+      </div>
+    `;
+  }
+}

package/src/core/components/ui/card/card.md

@@ -0,0 +1,96 @@
+# Card
+
+## Type
+<sonic-code>
+  <template>
+  <div class="grid grid-cols-3 gap-3">
+    <sonic-card type="default">Default</sonic-card>
+    <sonic-card type="primary">Primary</sonic-card>
+    <sonic-card type="warning">Warning</sonic-card>
+    <sonic-card type="danger">Danger</sonic-card>
+    <sonic-card type="success">Success</sonic-card>
+    <sonic-card type="info">Info</sonic-card>
+    <sonic-card type="neutral">Neutral</sonic-card>
+    <sonic-card type="invert">Invert</sonic-card>
+  </div>
+  </template>
+</sonic-code>
+
+## Header
+<sonic-code>
+  <template>
+  <div class="grid grid-cols-1 gap-3">
+    <sonic-card >
+      <sonic-card-header label="Header simple, titre géré via l'attribut : label" description="Description via l'attribut : description">
+      </sonic-card-header>
+    </sonic-card>
+    <sonic-card type="neutral">
+      <sonic-card-header label="Header composé">
+        <sonic-card-header-description>Description rendu via le composant : "sonic-card-header-description"</sonic-card-header-description>
+        <div  slot="suffix" class="flex">
+          Suffix
+        </div>
+      </sonic-card-header>
+    </sonic-card>
+    <sonic-card type="invert">
+      <sonic-card-header>
+        <div>Header custom</div>
+        <div class="text-lg text-danger">Tout le contenu excepté l'icône ✈ passe par le slot du header</div>
+        <span slot="suffix" >✈</span>
+      </sonic-card-header>
+    </sonic-card>
+  </div>
+  </template>
+</sonic-code>
+
+## Main
+<sonic-code>
+  <template>
+  <sonic-card >
+    <sonic-card-main >
+      <h3>Main area</h3>
+      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iure id dolor debitis deleniti eligendi natus dolorem a commodi sunt dicta? Ipsa asperiores magni consequuntur dolor voluptatibus. Maxime, nemo? Facere, odio.</p>
+      <iframe width="560" height="315" src="https://www.youtube.com/embed/IZTOtyksyPs" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+    </sonic-card-main>
+  </sonic-card>
+  </template>
+</sonic-code>
+
+## Footer
+<sonic-code>
+  <template>
+  <sonic-card >
+    <sonic-card-footer >
+      <div >
+        <h4 class="mb-0">Footer area</h4>
+        <small>Debitis deleniti eligendi natus dolorem aufdh.</small>
+        <div>
+          🛫 ✈ ✈ ✈ ✈ ✈ 🛬
+        </div>
+      </div>
+    </sonic-card-footer>
+  </sonic-card>
+  </template>
+</sonic-code>
+
+
+## Example of use
+<sonic-code>
+  <template>
+  <sonic-card >
+    <sonic-card-header label="Header" description="Header description">
+      <sonic-icon library="iconoir" name="nav-arrow-right" slot="suffix" ></sonic-icon>
+    </sonic-card-header>
+    <sonic-card-main >
+      <sonic-image rounded ratio="11/4" src="https://thegoodlife.thegoodhub.com/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg">
+      </sonic-image>
+      <p><b>Main</b> - Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iure id dolor debitis deleniti eligendi natus dolorem a commodi sunt dicta? Ipsa asperiores magni consequuntur dolor voluptatibus. Maxime, nemo? Facere, odio.</p>
+    </sonic-card-main>
+    <sonic-card-footer>
+      <div>
+        <i>Footer</i> - Amet consectetur adipisicing
+      </div>
+    </sonic-card-footer>
+  </sonic-card>
+  </template>
+</sonic-code>

package/{core/components/ui/card/card.js → src/core/components/ui/card/card.ts}

@@ -1,33 +1,14 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { html, LitElement, css } from "lit";
-import { customElement, property } from "lit/decorators.js";
+import {html, LitElement, css} from "lit";
+import {customElement, property} from "lit/decorators.js";
 import "@supersoniks/concorde/core/components/ui/card/card-header";
 import "@supersoniks/concorde/core/components/ui/card/card-main";
 import "@supersoniks/concorde/core/components/ui/card/card-footer";
+
 const tagName = "sonic-card";
-let Card = class Card extends LitElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * Le type change surtout la couleur composant
-         */
-        this.type = "default";
-    }
-    render() {
-        return html `
-      <div part="card" class="card">
-        <slot></slot>
-      </div>
-    `;
-    }
-};
-Card.styles = [
-    css `
+@customElement(tagName)
+export class Card extends LitElement {
+  static styles = [
+    css`
       * {
         box-sizing: border-box;
       }
@@ -104,11 +85,19 @@ Card.styles = [
         --sc-card-bg: var(--sc-base-900);
       }
     `,
-];
-__decorate([
-    property({ type: String, reflect: true })
-], Card.prototype, "type", void 0);
-Card = __decorate([
-    customElement(tagName)
-], Card);
-export { Card };
+  ];
+
+  /**
+   * Le type change surtout la couleur composant
+   */
+  @property({type: String, reflect: true})
+  type: "default" | "light" | "primary" | "warning" | "danger" | "success" | "info" | "neutral" | "invert" = "default";
+
+  render() {
+    return html`
+      <div part="card" class="card">
+        <slot></slot>
+      </div>
+    `;
+  }
+}

package/src/core/components/ui/divider/divider.md

@@ -0,0 +1,35 @@
+# Divider
+
+## Default
+<sonic-code>
+  <template>
+  <sonic-divider></sonic-divider>
+  </template>
+</sonic-code>
+
+## Align
+<sonic-code>
+  <template>
+  <sonic-divider label="Default centered label"></sonic-divider>
+  <sonic-divider label="Right" align="right"></sonic-divider>
+  <sonic-divider label="Center" align="center"></sonic-divider>
+  <sonic-divider label="Left" align="left"></sonic-divider>
+  </template>
+</sonic-code>
+
+## Size
+<sonic-code>
+  <template>
+  <sonic-divider size="xs" label="xs"></sonic-divider>
+  <sonic-divider size="sm" label="sm"></sonic-divider>
+  <sonic-divider size="md" label="md"></sonic-divider>
+  <sonic-divider size="lg" label="lg"></sonic-divider>
+  </template>
+</sonic-code>
+
+## Custom
+<sonic-code>
+  <template>
+  <sonic-divider><span class="mr-2">Lorem ipsum dolor sit amet</span><sonic-badge type="danger">+25</sonic-badge></sonic-divider>
+  </template>
+</sonic-code>

package/{core/components/ui/divider/divider.js → src/core/components/ui/divider/divider.ts}

@@ -1,37 +1,11 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { html, LitElement, css } from "lit";
-import { customElement, property, queryAssignedNodes, query } from "lit/decorators.js";
-import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import {html, LitElement, css} from "lit";
+import {customElement, property, queryAssignedNodes, query} from "lit/decorators.js";
+import {unsafeHTML} from "lit/directives/unsafe-html.js";
 const tagName = "sonic-divider";
-let Divider = class Divider extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.label = "";
-        this.align = "center";
-        this.vertical = false;
-        this.noMargin = false;
-        this.dashed = false;
-        this.dotted = false;
-    }
-    firstUpdated(changedProperties) {
-        super.firstUpdated(changedProperties);
-        if (this.label || this.slotNodes?.length) {
-            this.divider?.classList.add("has-text");
-        }
-    }
-    render() {
-        return html `<div part="divider">
-      <span class="text">${unsafeHTML(this.label ? this.label : "")}<slot></slot></span>
-    </div>`;
-    }
-};
-Divider.styles = [
-    css `
+@customElement(tagName)
+export class Divider extends LitElement {
+  static styles = [
+    css`
       :host {
         --sc-divider-my: 0.5rem;
         --sc-divider-mx: 0;
@@ -158,35 +132,31 @@ Divider.styles = [
         --sc-divider-border-style: dashed;
       }
     `,
-];
-__decorate([
-    queryAssignedNodes({ flatten: true })
-], Divider.prototype, "slotNodes", void 0);
-__decorate([
-    query("div")
-], Divider.prototype, "divider", void 0);
-__decorate([
-    property({ type: String })
-], Divider.prototype, "label", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], Divider.prototype, "size", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], Divider.prototype, "align", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], Divider.prototype, "vertical", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], Divider.prototype, "noMargin", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], Divider.prototype, "dashed", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], Divider.prototype, "dotted", void 0);
-Divider = __decorate([
-    customElement(tagName)
-], Divider);
-export { Divider };
+  ];
+  @queryAssignedNodes({flatten: true})
+  slotNodes!: Array<Node>;
+
+  @query("div")
+  divider!: HTMLDivElement;
+
+  @property({type: String}) label = "";
+  @property({type: String, reflect: true}) size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+  @property({type: String, reflect: true}) align: "left" | "right" | "center" = "center";
+  @property({type: Boolean, reflect: true}) vertical = false;
+  @property({type: Boolean, reflect: true}) noMargin = false;
+  @property({type: Boolean, reflect: true}) dashed = false;
+  @property({type: Boolean, reflect: true}) dotted = false;
+
+  firstUpdated(changedProperties: Map<string | number | symbol, unknown>) {
+    super.firstUpdated(changedProperties);
+    if (this.label || this.slotNodes?.length) {
+      this.divider?.classList.add("has-text");
+    }
+  }
+
+  render() {
+    return html`<div part="divider">
+      <span class="text">${unsafeHTML(this.label ? this.label : "")}<slot></slot></span>
+    </div>`;
+  }
+}

package/src/core/components/ui/form/checkbox/checkbox.md

@@ -0,0 +1,96 @@
+# Checkbox
+
+## Size
+<sonic-code>
+  <template>
+  <div class="grid gap-2">
+    <sonic-checkbox size="2xs">2xs checkbox</sonic-checkbox>
+    <sonic-checkbox size="xs">xs checkbox</sonic-checkbox>
+    <sonic-checkbox size="sm">sm checkbox</sonic-checkbox>
+    <sonic-checkbox>default checkbox</sonic-checkbox>
+    <sonic-checkbox size="lg">lg checkbox</sonic-checkbox>
+    <sonic-checkbox size="xl">xl checkbox</sonic-checkbox>
+    <sonic-checkbox size="2xl">2xl checkbox</sonic-checkbox>
+  </div>
+  </template>
+</sonic-code>
+
+## Checked
+<sonic-code>
+  <template>
+  <sonic-checkbox checked
+    >Already checked checkbox
+  </sonic-checkbox>
+  </template>
+</sonic-code>
+
+## Disabled
+<sonic-code>
+  <template>
+  <sonic-checkbox disabled
+    >Disabled checkbox
+  </sonic-checkbox>
+  </template>
+</sonic-code>
+
+## Disabled and checked
+<sonic-code>
+  <template>
+  <sonic-checkbox disabled checked
+    >Disabled but already checked checkbox
+  </sonic-checkbox>
+  </template>
+</sonic-code>
+
+## Checkbox with link
+<sonic-code>
+  <template>
+  <sonic-checkbox>Checkbox with <sonic-link href="#" class="underline text-info">link</sonic-link>
+  </template>
+</sonic-code>
+
+## Check all checkbox
+<sonic-code>
+  <template>
+      <div formDataProvider="checkbox-check-all-demo">
+      <sonic-checkbox  checked name='someSharedName' value="all" checksAll>All</sonic-checkbox>
+      <sonic-checkbox checked name="someSharedName" value="foo">Foo</sonic-checkbox>
+      <sonic-checkbox checked name="someSharedName" value="bar">Bar</sonic-checkbox>
+    </div>
+  </template>
+</sonic-code>
+
+## Example of use
+<sonic-code>
+  <template>
+    <sonic-theme color background theme=${theme} class="p-8">
+      <sonic-subscriber dataProvider="jokeFilter" class="text-xl my-4 block font-bold">
+        Remove following jokes :
+        <sonic-value key="blacklistFlags" class="block text-sm"></sonic-value>
+      </sonic-subscriber>
+      <div formDataProvider="jokeFilter" class="grid grid-cols-2 lg:grid-cols-3 gap-x-6 gap-y-2 mt-2 mb-3">
+        <sonic-checkbox name="blacklistFlags"  value="nsfw">nsfw</sonic-checkbox>
+        <sonic-checkbox name="blacklistFlags"  value="religious">religious</sonic-checkbox>
+        <sonic-checkbox name="blacklistFlags"  value="political">political</sonic-checkbox>
+        <sonic-checkbox name="blacklistFlags"  value="racist" checked disabled>racist</sonic-checkbox>
+        <sonic-checkbox name="blacklistFlags"  value="sexist" checked disabled>sexist</sonic-checkbox>
+        <sonic-checkbox name="blacklistFlags"   value="explicit">explicit</sonic-checkbox>
+      </div>
+      <sonic-queue
+        lazyload
+        dataProviderExpression="joke/Any?amount=10&lang=en"
+        dataFilterProvider="jokeFilter"
+        serviceURL="https://v2.jokeapi.dev"
+        key="jokes"
+      >
+        <template>
+          <div class="border-0 border-b-[1px] border-b-neutral-300  py-3 leading-tight">
+            <sonic-value key="joke"></sonic-value>
+            <sonic-value key="setup" class="font-bold"></sonic-value><br>
+            <sonic-value key="delivery"></sonic-value>
+          </div>
+        </template>
+      </sonic-queue>
+    </sonic-theme>
+  </template>
+</sonic-code>