@supersoniks/concorde 4.8.0 → 4.9.0

package/docs/src/core/components/ui/modal/modal.md

@@ -0,0 +1,119 @@
+## Modal
+
+<sonic-code>
+  <template>
+    <sonic-button onclick="document.getElementById('modalExample').show()">
+      Simple modal
+    </sonic-button>
+    <sonic-modal id="modalExample">
+      <sonic-modal-title
+        >Lorem ipsum dolor sit amet <sonic-badge type="danger" size="sm">+33</sonic-badge></sonic-modal-title
+      >
+      <sonic-modal-subtitle>Donec sed vestibulum augue.</sonic-modal-subtitle>
+      <sonic-modal-content>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget quam eu mi luctus faucibus.
+      </sonic-modal-content>
+      <sonic-modal-actions formDataProvider="ModalMiniForm">
+        <sonic-button FormCheckable  minWidth="8rem" value="true" name="click">
+          Click don't close
+        </sonic-button>
+        <sonic-button minWidth="8rem" type="success" hideModal>Confirm</sonic-button>
+      </sonic-modal-actions>
+    </sonic-modal>
+  </template>
+</sonic-code>
+
+
+## Long text
+
+<sonic-code>
+  <template>
+    <sonic-button onclick="document.getElementById('modalText').show()"> Long text </sonic-button>
+    <sonic-modal align="left" id="modalText">
+      <sonic-modal-title>Infos et tarifs </sonic-modal-title>
+      <sonic-modal-content>
+        <div class="prose">
+          <p>
+            <strong>Horaires d’ouverture </strong><br />
+            Du mercredi au samedi de 13h30 à 19h et le dimanche de 13h30 à 18h<br />
+            + horaires spécifiques pour événements ou festivals&nbsp;
+          </p>
+          <p>
+            <strong> Billetterie&nbsp;<br /></strong>
+            La participation à certains événements et activités est soumise à un système de billetterie avec achats ou
+            réservations disponibles en ligne ou au guichet.&nbsp;&nbsp;<strong><br /></strong>
+          </p>
+          <p>
+            Les tarifs (Tarif plein / Tarif Réduit / Tarif Spécifique) sont indiqués pour chaque événement et peuvent
+            varier selon la nature de l’événement. Les tarifs sont identiques en ligne et au guichet. Il est néanmoins
+            conseillé de réserver les billets en avance pour s’assurer une place.
+          </p>
+          <p>
+            L’accès au Skatepark, Fablab et Halle C sont soumis à adhésions. Les adhésions sont gratuites et
+            nominatives. Elle donnent accès aux espaces dans la limite des places disponibles.
+          </p>
+          <p>
+            <strong>+ d’infos <br /></strong>billetterie@laconditionpublique.com <br />+33 (0)328334833&nbsp;
+          </p>
+          <br />
+          <p>
+            <strong>Accès <br /></strong>14, place Faidherbe <br />59100 Roubaix <br />Métro / Tram : Arrêt
+            Eurotéléport, Ligne 2 <br />Bus / V’Lille : Arrêt Condition Publique&nbsp;
+          </p>
+          <p>
+            Accès handicapés : nous contacter avant votre venue au 03 28 33 48 33 ou par mail
+            billetterie@laconditionpublique.com
+          </p>
+        </div>
+      </sonic-modal-content>
+    </sonic-modal>
+  </template>
+</sonic-code>
+
+## Force action
+
+<sonic-code>
+  <template>
+    <sonic-button onclick="document.getElementById('force').show()"> Force action to close</sonic-button>
+    <sonic-modal forceAction id="force">
+      <sonic-modal-title>Do you want some cookies ? </sonic-modal-title>
+      <sonic-modal-content>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget quam eu mi luctus faucibus.
+      </sonic-modal-content>
+      <sonic-modal-actions >
+        <sonic-button hideModal minWidth="8rem"> Nope </sonic-button>
+        <sonic-button hideModal minWidth="8rem" type="success">Hell yes !</sonic-button>
+      </sonic-modal-actions>
+    </sonic-modal>
+    </sonic-modal>
+  </template>
+</sonic-code>
+
+## Custom dimensions
+
+<sonic-code>
+  <template>
+    <sonic-button onclick="document.getElementById('CustomWidth').show()"> Custom width </sonic-button>
+    <sonic-modal maxHeight="50vh" maxWidth="90vw" width="100%" height="100%" id="CustomWidth">
+      <sonic-image
+        cover
+        objectPosition="center 20%"
+        src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
+      ></sonic-image>
+    </sonic-modal>
+  </template>
+</sonic-code>
+
+## Fullscreen
+
+<sonic-code>
+  <template>
+    <sonic-button onclick="document.getElementById('Fullscreen').show()"> Fullscreen </sonic-button>
+    <sonic-modal fullscreen id="Fullscreen">
+      <sonic-image
+        cover
+        src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
+      ></sonic-image>
+    </sonic-modal>
+  </template>
+</sonic-code>

package/docs/src/core/components/ui/pop/pop.md

@@ -0,0 +1,96 @@
+# Pop
+
+## Placement
+<sonic-code>
+  <template>
+    <sonic-pop class="inline-block" placement="left">
+      <sonic-button>Left</sonic-button>
+      <sonic-menu slot="content">
+        <sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
+      </sonic-menu>
+    </sonic-pop>
+    <sonic-pop class="inline-block" placement="right">
+      <sonic-button>Right</sonic-button>
+      <sonic-menu slot="content">
+        <sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
+      </sonic-menu>
+    </sonic-pop>
+    <sonic-pop class="inline-block" placement="top">
+      <sonic-button>Top</sonic-button>
+      <sonic-menu slot="content">
+        <sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
+      </sonic-menu>
+    </sonic-pop>
+    <sonic-pop class="inline-block" placement="bottom">
+      <sonic-button>Bottom</sonic-button>
+      <sonic-menu slot="content">
+        <sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
+      </sonic-menu>
+    </sonic-pop>
+  </template>
+</sonic-code>
+
+## Shadow
+<sonic-code>
+  <template>
+    <sonic-pop class="inline-block" shadow="none" placement='top' >
+      <sonic-button>None</sonic-button>
+      <sonic-menu slot="content">
+        <sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
+      </sonic-menu>
+    </sonic-pop>
+    <sonic-pop class="inline-block" shadow="sm"  placement='top'>
+      <sonic-button>Small</sonic-button>
+      <sonic-menu slot="content">
+        <sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
+      </sonic-menu>
+    </sonic-pop>
+    <sonic-pop class="inline-block" shadow="md"  placement='top'>
+      <sonic-button>Medium</sonic-button>
+      <sonic-menu slot="content">
+        <sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
+      </sonic-menu>
+    </sonic-pop>
+    <sonic-pop class="inline-block" shadow="lg"  placement='top'>
+      <sonic-button>Large</sonic-button>
+      <sonic-menu slot="content">
+        <sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
+      </sonic-menu>
+    </sonic-pop>
+  </template>
+</sonic-code>
+
+## noToggle
+<sonic-code>
+  <template>
+    <sonic-pop class="inline-block"  noToggle>
+      <sonic-button>No toggle on click</sonic-button>
+      <sonic-menu slot="content">
+        <sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
+      </sonic-menu>
+    </sonic-pop>
+    <sonic-pop class="inline-block" >
+      <sonic-button>Default toggle on click</sonic-button>
+      <sonic-menu slot="content">
+        <sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
+      </sonic-menu>
+    </sonic-pop>
+  </template>
+</sonic-code>
+
+
+## manual
+<sonic-code>
+  <template>
+    <sonic-pop class="inline-block" manual id="manualPop">
+      <sonic-button onclick="alert('customAction without opening Pop content')">Manual doesn't open on click</sonic-button>
+      <sonic-menu slot="content">
+        <sonic-menu-item>Hourra !</sonic-menu-item>
+      </sonic-menu>
+    </sonic-pop>
+    <sonic-button onclick="document.getElementById('manualPop').show()" class="ml-5"  variant="outline">
+      <sonic-icon name="sparkles" library="custom"></sonic-icon>
+      Click to open pop
+    </sonic-button>
+  </template>
+</sonic-code>

package/docs/src/core/components/ui/progress/progress.md

@@ -0,0 +1,63 @@
+# Progress bar
+
+Displays an indicator showing the completion progress of a task.
+
+## Indeterminate
+
+<sonic-code>
+  <template>
+  <sonic-progress></sonic-progress>
+  </template>
+</sonic-code>
+
+
+## Remaining
+
+<sonic-code>
+  <template>
+  <sonic-progress  type="danger" value="80">
+    80% Used <span slot="remaining">20% left</span>
+  </sonic-progress>
+  </template>
+</sonic-code>
+
+## Sizes
+
+<sonic-code>
+  <template>
+<div class="grid gap-3">
+  <sonic-progress  size="2xs" value="25">25%</sonic-progress>
+  <sonic-progress  size="xs" value="25">25%</sonic-progress>
+  <sonic-progress  size="sm" value="25">25%</sonic-progress>
+  <sonic-progress  size="md" value="25">25%</sonic-progress>
+  <sonic-progress  size="lg" value="25">25%</sonic-progress>
+  <sonic-progress  size="xl" value="25">25%</sonic-progress>
+  <sonic-progress  size="2xl" value="25">25%</sonic-progress>
+</div>
+  </template>
+</sonic-code>
+
+## Type
+
+<sonic-code>
+  <template>
+<div class="grid gap-3">
+  <sonic-progress  value="50">50%</sonic-progress>
+  <sonic-progress  type="info" value="50">50%</sonic-progress>
+  <sonic-progress  type="warning" value="50">50%</sonic-progress>
+  <sonic-progress  type="success" value="50">50%</sonic-progress>
+  <sonic-progress  type="danger" value="50">50%</sonic-progress>
+</div>
+   </template>
+</sonic-code>
+
+
+## Invert
+
+<sonic-code>
+  <template>
+<div class="bg-neutral-900 p-4 rounded-md">
+  <sonic-progress  type="invert" value="50">50%</sonic-progress>
+</div>
+  </template>
+</sonic-code>