update a lot of change since a while

2026-01-22 10:29:36 +01:00
parent a4dcb95d83
commit e1c1475f10
78 changed files with 4200 additions and 534 deletions
--- a/design-system/primitives/DsButtonArrow.vue
+++ b/design-system/primitives/DsButtonArrow.vue
@@ -0,0 +1,161 @@
+<template>
+  <component
+    :is="componentTag"
+    v-bind="$attrs"
+    :to="isNuxtLink ? to : undefined"
+    :href="isAnchor ? href : undefined"
+    :type="isButton ? type : undefined"
+    :disabled="isButton ? disabled || loading : undefined"
+    :aria-disabled="(!isButton && (disabled || loading)) ? 'true' : undefined"
+    :class="[
+      'ds-button-arrow',
+      `ds-button-arrow--${size}`,
+      `ds-button-arrow--${variant}`,
+      { 'ds-button--disabled': disabled, 'ds-button--loading': loading }
+    ]"
+    @click="onClick"
+  >
+    <span class="ds-button-arrow__content">
+      
+      <img
+        class="ds-button-arrow__icon"
+        src="/img/icones/arrow_right.svg"
+        alt=""
+        aria-hidden="true"
+      />
+      <span class="ds-button-arrow__label">
+        <slot />
+      </span>
+    </span>
+  </component>
+</template>
+
+<script setup>
+    defineOptions({ inheritAttrs: false })
+    import { computed, resolveComponent } from 'vue'
+
+
+    const props = defineProps({
+        variant: { type: String, default: 'primary' }, // primary / secondary / ghost / link
+        size: { type: String, default: 'md' },         // sm/md/lg
+
+        to: { type: [String, Object], default: '' },   // NuxtLink
+        href: { type: String, default: '' },           // <a>
+        type: { type: String, default: 'button' },     // button/submit/reset
+
+        disabled: { type: Boolean, default: false },
+        loading: { type: Boolean, default: false },
+
+    })
+
+
+
+    const isNuxtLink = computed(() => !!props.to)
+    const isAnchor = computed(() => !props.to && !!props.href)
+    const isButton = computed(() => !props.to && !props.href)
+
+    const componentTag = computed(() => {
+        if (isNuxtLink.value) return resolveComponent('NuxtLink')
+        if (isAnchor.value) return 'a'
+        return 'button'
+    })
+
+    const emit = defineEmits(['click'])
+    function onClick(e) {
+        if (props.disabled || props.loading) {
+            e.preventDefault()
+            e.stopPropagation()
+            return
+        }
+        emit('click', e)
+    }
+</script>
+
+<style lang="scss">
+    .ds-button-arrow {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        font-family: var(--font-roboto);
+        font-weight: var(--fw-semibold);
+        line-height: 1;
+        text-decoration: none;
+        cursor: pointer;
+        user-select: none;
+        white-space: nowrap;
+        &:hover {
+            transform: translateY(-3px);
+        }
+
+        transition: transform 120ms ease, background-color 120ms ease, border-color 120ms ease;
+
+        &:focus-visible {
+            outline: none;
+            box-shadow: 0 0 0 3px var(--c-focus);
+        }
+
+        &--disabled {
+            opacity: 0.55;
+            cursor: not-allowed;
+        }
+
+        &__content {
+            display: inline-flex;
+            align-items: center;
+            gap: var(--sp-2);
+        }
+        &__label {
+            font-size: var(--fs-17);
+        }
+
+
+        &__icon {
+            height: var(--fs-24);
+            padding-right: var(--sp-4);
+        }
+
+        /* Sizes */
+        &--sm { font-size: var(--text-sm); padding: var(--sp-2) var(--sp-3); min-height: 2.25rem; }
+        &--md { font-size: var(--text-md); padding: var(--sp-3) var(--sp-4); min-height: 2.75rem; }
+        &--lg { font-size: var(--text-lg); padding: var(--sp-4) var(--sp-5); min-height: 3.25rem; }
+
+        /* Variants */
+        &--primary {
+            background: var(--c-brand_rouge);
+            color: var(--c-brand-contrast);
+        }
+        &--primary:hover { transform: translateY(-1px); }
+
+        &--secondary {
+            background: var(--c-surface);
+            color: var(--c-text);
+            border-color: var(--c-border-strong);
+        }
+        &--secondary:hover { background: var(--c-hover); }
+
+        &--invert {
+            color: var(--c-text-invert);
+            border-color: var(--c-border-strong);
+            img {
+                filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
+            }
+        }
+        &--secondary:hover { background: var(--c-hover); }
+
+        &--ghost {
+            background: transparent;
+            color: var(--c-text);
+        }
+        &--ghost:hover { background: var(--c-hover); }
+
+        &--link {
+            background: transparent;
+            color: var(--c-brand);
+            padding: 0;
+            min-height: auto;
+        }
+        &--link:hover { text-decoration: underline; }
+    }
+    
+
+</style>