@cnamts/synapse 1.0.5 → 1.0.7

package/src/components/Amelipro/AmeliproResultList/__tests__/__snapshots__/AmeliproResultList.spec.ts.snap

@@ -0,0 +1,434 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AmeliproResultList > render correctly 1`] = `
+<div
+  class="amelipro-result-list"
+  id="amelipro-result-unique-id-container"
+>
+  <div
+    class="
+      align-end
+      amelipro-result-list__infos
+      d-flex
+      justify-space-between
+      mb-6
+    "
+    id="amelipro-result-unique-id-header"
+  >
+    <p
+      class="
+        align-center
+        d-inline-block
+        font-weight-semibold
+        mb-0
+        total-counter
+      "
+      id="amelipro-result-unique-id-result-counter"
+    >
+      <span class="d-sr-only">
+        Nombre de lignes dans la liste ci-après :
+      </span>
+      12 résultat(s)
+    </p>
+    <div class="
+      align-center
+      amelipro-result-list__select__wrapper
+      d-inline-flex
+    ">
+      <!-- v-if -->
+      <div
+        class="
+          amelipro-result-list__pagination-select
+          mb-0
+          ml-2
+          pt-0
+        "
+        id="amelipro-result-unique-id-pagination-select-container"
+        style="
+          margin-bottom: 12px;
+          max-width: 170px;
+        "
+      >
+        <div class="
+          amelipro-select__wrapper
+          d-flex
+          flex-column
+          w-100
+        ">
+          <div class="
+            align-start
+            d-inline-flex
+          ">
+            <label
+              class="
+                amelipro-select__label
+                mr-2
+              "
+              for="amelipro-result-unique-id-pagination-select"
+              id="amelipro-result-unique-id-pagination-select-label"
+            >
+              Nb lignes/page :
+              <!-- v-if -->
+            </label>
+          </div>
+          <div class="
+            amelipro-result-list__pagination-select
+            amelipro-select
+            mb-0
+            ml-2
+            pt-0
+            pt-0
+            v-input
+            v-input--center-affix
+            v-input--density-compact
+            v-input--dirty
+            v-input--horizontal
+            v-locale--is-ltr
+            v-select
+            v-select--selected
+            v-select--single
+            v-text-field
+            v-theme--light
+          ">
+            <!---->
+            <div class="v-input__control">
+              <div
+                class="
+                  bg-ap-white
+                  v-field
+                  v-field--active
+                  v-field--appended
+                  v-field--center-affix
+                  v-field--dirty
+                  v-field--has-background
+                  v-field--no-label
+                  v-field--variant-outlined
+                  v-locale--is-ltr
+                  v-theme--light
+                "
+                role="combobox"
+              >
+                <div class="v-field__overlay"></div>
+                <div class="v-field__loader">
+                  <div
+                    aria-hidden="true"
+                    aria-valuemax="100"
+                    aria-valuemin="0"
+                    class="
+                      v-locale--is-ltr
+                      v-progress-linear
+                      v-theme--light
+                    "
+                    role="progressbar"
+                    style="
+                      top: 0px;
+                      height: 0px;
+                      --v-progress-linear-height: 2px;
+                    "
+                  >
+                    <!---->
+                    <div
+                      class="v-progress-linear__background"
+                      style="opacity: NaN;"
+                    ></div>
+                    <div
+                      class="v-progress-linear__buffer"
+                      style="
+                        opacity: NaN;
+                        width: 0%;
+                      "
+                    ></div>
+                    <transition-stub
+                      appear="false"
+                      css="true"
+                      name="fade-transition"
+                      persisted="false"
+                    >
+                      <div class="v-progress-linear__indeterminate">
+                        <div class="
+                          long
+                          v-progress-linear__indeterminate
+                        "></div>
+                        <div class="
+                          short
+                          v-progress-linear__indeterminate
+                        "></div>
+                      </div>
+                    </transition-stub>
+                    <!---->
+                  </div>
+                </div>
+                <!---->
+                <div
+                  class="v-field__field"
+                  data-no-activator=""
+                >
+                  <!---->
+                  <!---->
+                  <!---->
+                  <div
+                    class="v-field__input"
+                    data-no-activator=""
+                  >
+                    <!---->
+                    <!---->
+                    <div class="v-select__selection">
+                      <span class="v-select__selection-text">
+                        10
+                        <!---->
+                      </span>
+                    </div>
+                    <input
+                      aria-label="Open"
+                      aria-required="false"
+                      id="amelipro-result-unique-id-pagination-select"
+                      inputmode="none"
+                      size="1"
+                      title="Open"
+                      type="text"
+                      value="10"
+                    />
+                  </div>
+                  <!---->
+                </div>
+                <!---->
+                <div class="v-field__append-inner">
+                  <!---->
+                  <i
+                    aria-hidden="true"
+                    class="
+                      mdi
+                      mdi-menu-down
+                      notranslate
+                      v-icon
+                      v-icon--size-default
+                      v-select__menu-icon
+                      v-theme--light
+                    "
+                  ></i>
+                  <!---->
+                </div>
+                <div class="v-field__outline">
+                  <div class="v-field__outline__start"></div>
+                  <!---->
+                  <div class="v-field__outline__end"></div>
+                  <!---->
+                </div>
+              </div>
+            </div>
+            <!---->
+            <!---->
+          </div>
+        </div>
+        <!-- v-if -->
+      </div>
+    </div>
+  </div>
+  <div>
+    <ul
+      aria-label="Exemple de liste de résultats"
+      class="
+        amelipro-result-list__list
+        list-style-none
+      "
+      id="amelipro-result-unique-id-list"
+    >
+      <li
+        class="amelipro-result-list__item"
+        id="amelipro-result-unique-id-item-0"
+      >
+        <p>
+          Exemple de résultat
+        </p>
+      </li>
+      <li
+        class="amelipro-result-list__item"
+        id="amelipro-result-unique-id-item-1"
+      >
+        <p>
+          Exemple de résultat
+        </p>
+      </li>
+      <li
+        class="amelipro-result-list__item"
+        id="amelipro-result-unique-id-item-2"
+      >
+        <p>
+          Exemple de résultat
+        </p>
+      </li>
+      <li
+        class="amelipro-result-list__item"
+        id="amelipro-result-unique-id-item-3"
+      >
+        <p>
+          Exemple de résultat
+        </p>
+      </li>
+      <li
+        class="amelipro-result-list__item"
+        id="amelipro-result-unique-id-item-4"
+      >
+        <p>
+          Exemple de résultat
+        </p>
+      </li>
+      <li
+        class="amelipro-result-list__item"
+        id="amelipro-result-unique-id-item-5"
+      >
+        <p>
+          Exemple de résultat
+        </p>
+      </li>
+      <li
+        class="amelipro-result-list__item"
+        id="amelipro-result-unique-id-item-6"
+      >
+        <p>
+          Exemple de résultat
+        </p>
+      </li>
+      <li
+        class="amelipro-result-list__item"
+        id="amelipro-result-unique-id-item-7"
+      >
+        <p>
+          Exemple de résultat
+        </p>
+      </li>
+      <li
+        class="amelipro-result-list__item"
+        id="amelipro-result-unique-id-item-8"
+      >
+        <p>
+          Exemple de résultat
+        </p>
+      </li>
+      <li
+        class="amelipro-result-list__item"
+        id="amelipro-result-unique-id-item-9"
+      >
+        <p>
+          Exemple de résultat
+        </p>
+      </li>
+    </ul>
+  </div>
+  <nav
+    aria-label="pagination"
+    class="
+      align-center
+      amelipro-pagination
+      d-flex
+      justify-center
+      mt-2
+    "
+    id="amelipro-result-unique-id-pagination-container"
+  >
+    <ol
+      class="
+        amelipro-pagination__list
+        d-flex
+        list-style-none
+      "
+      id="amelipro-result-unique-id-pagination-list"
+    >
+      <li class="amelipro-pagination__item">
+        <button
+          aria-current="page"
+          class="
+            amelipro-btn
+            amelipro-btn--style
+            amelipro-pagination__btn
+            bg-ap-blue-darken-1
+            elevation-0
+            v-btn
+            v-btn--density-default
+            v-btn--flat
+            v-btn--size-default
+            v-btn--variant-flat
+            v-theme--light
+          "
+          id="amelipro-result-unique-id-pagination-first"
+          style="
+            height: auto;
+            min-height: 2.5rem;
+            color: #FFFFFF !important;
+          "
+          title="page active"
+          type="button"
+        >
+          <span class="v-btn__overlay"></span>
+          <span class="v-btn__underlay"></span>
+          <!---->
+          <span
+            class="v-btn__content"
+            data-no-activator=""
+          >
+            <span class="
+              align-center
+              amelipro-custom-btn
+              d-flex
+              flex-row
+            ">
+              1
+              <!-- v-if -->
+              <!-- v-if -->
+            </span>
+          </span>
+          <!---->
+          <!---->
+        </button>
+      </li>
+      <!-- v-if -->
+      <!-- v-if -->
+      <li class="amelipro-pagination__item">
+        <button
+          class="
+            amelipro-btn
+            amelipro-btn--style
+            amelipro-pagination__btn
+            bg-ap-white
+            elevation-0
+            v-btn
+            v-btn--density-default
+            v-btn--flat
+            v-btn--size-default
+            v-btn--variant-flat
+            v-theme--light
+          "
+          id="amelipro-result-unique-id-pagination-last"
+          style="
+            height: auto;
+            min-height: 2.5rem;
+            color: #00749C !important;
+          "
+          type="button"
+        >
+          <span class="v-btn__overlay"></span>
+          <span class="v-btn__underlay"></span>
+          <!---->
+          <span
+            class="v-btn__content"
+            data-no-activator=""
+          >
+            <span class="
+              align-center
+              amelipro-custom-btn
+              d-flex
+              flex-row
+            ">
+              2
+              <!-- v-if -->
+              <!-- v-if -->
+            </span>
+          </span>
+          <!---->
+          <!---->
+        </button>
+      </li>
+    </ol>
+  </nav>
+</div>
+`;

package/src/components/Amelipro/AmeliproTable/AmeliproTable.mdx

@@ -0,0 +1,22 @@
+import { Controls, Canvas, Meta, Source } from '@storybook/blocks';
+
+import * as AmeliproTableStories from './AmeliproTable.stories';
+
+<Meta of={AmeliproTableStories} />
+
+# AmeliproTable
+
+L’élément `AmeliproTable` est utilisé pour afficher des tableaux de données dans l’application Amelipro
+
+<Canvas of={AmeliproTableStories.Default}  />
+
+## API
+
+<Controls of={AmeliproTableStories.Default} />
+
+## Usages
+
+Ce composant est a utiliser pour afficher des tableaux de données simples dans les services amelipro, lorsqu'il est affiché en mobile le composant se divise en plusieurs petits tableaux affichant chacune les données d'une ligne.
+
+
+