🐛(ats-presentation) fix disabled btn states rendering (#688)

Author: ShallowRed

src/web/presentation/frontend/src/components/base/CspButton/CspButton.stories.ts

@@ -287,15 +287,15 @@ export const States: Story = {
         >
           <p class="w-24">{{ v }}</p>
           <CspButton
-            :variant="v"
             v-bind="args"
-            label="Default"
+            :variant="v"
+            label="Activé"
           />
           <CspButton
-            :variant="v"
             v-bind="args"
+            :variant="v"
             :disabled="true"
-            label="Disabled"
+            label="Désactivé"
           />
         </div>
       </div>

src/web/presentation/frontend/src/components/base/CspButton/CspButton.vue

@@ -77,9 +77,7 @@ const isIconOnly = computed(() => Boolean(props.icon) && !props.label)
   }
 
   &:disabled {
-    pointer-events: none;
-    background-color: var(--background-disabled-grey);
-    color: var(--text-disabled-grey);
+    cursor: not-allowed;
     box-shadow: none;
   }
 }
@@ -95,6 +93,11 @@ const isIconOnly = computed(() => Boolean(props.icon) && !props.label)
   &:active {
     background-color: var(--background-action-high-blue-france-active);
   }
+
+  &:disabled {
+    background-color: var(--background-disabled-grey);
+    color: var(--text-disabled-grey);
+  }
 }
 
 .csp-btn--secondary {
@@ -109,6 +112,12 @@ const isIconOnly = computed(() => Boolean(props.icon) && !props.label)
   &:active {
     background-color: var(--background-default-grey-active);
   }
+
+  &:disabled {
+    background-color: transparent;
+    color: var(--text-disabled-grey);
+    box-shadow: inset 0 0 0 1px var(--border-disabled-grey);
+  }
 }
 
 .csp-btn--tertiary {
@@ -123,6 +132,12 @@ const isIconOnly = computed(() => Boolean(props.icon) && !props.label)
   &:active {
     background-color: var(--background-default-grey-active);
   }
+
+  &:disabled {
+    background-color: transparent;
+    color: var(--text-disabled-grey);
+    box-shadow: inset 0 0 0 1px var(--border-disabled-grey);
+  }
 }
 
 .csp-btn--tertiary-no-outline {
@@ -136,6 +151,11 @@ const isIconOnly = computed(() => Boolean(props.icon) && !props.label)
   &:active {
     background-color: var(--background-default-grey-active);
   }
+
+  &:disabled {
+    background-color: transparent;
+    color: var(--text-disabled-grey);
+  }
 }
 
 .csp-btn__icon {