@1024pix/pix-ui 42.0.2 → 42.0.3

package/addon/components/pix-button-link.js

@@ -5,6 +5,6 @@ export default class PixButtonLink extends PixButtonBase {
   defaultParams = {};
 
   get className() {
-    return super.baseClassNames.join(' ');
+    return [...super.baseClassNames, 'pix-button-link'].join(' ');
   }
 }

package/addon/styles/_pix-button-base.scss

@@ -8,7 +8,7 @@
   white-space: nowrap;
   text-decoration: none;
   background-color: var(--pix-primary-500);
-  border: 1px solid transparent;
+  border: 2px solid transparent;
   outline: none;
   cursor: pointer;
 
@@ -240,3 +240,7 @@
     }
   }
 }
+
+.pix-button-link {
+  line-height: initial;
+}

package/addon/styles/component-state/_form.scss

@@ -86,6 +86,7 @@
 
 .pix-form__actions {
   display: flex;
+  gap: 4px;
   justify-content: center;
 
   & > .pix-button:first-child {

package/app/stories/{form.stories.mdx → form.mdx}

@@ -1,12 +1,11 @@
 import { Meta, Story, Canvas } from '@storybook/addon-docs';
-import * as stories from './form.stories.js';
+import * as stories from './form.stories';
 
-<Meta title="Form/Example" />
+<Meta of={stories} />
 
 # Formulaire avec les composants Pix UI
 
 Un formulaire complet avec les composants Pix UI :
 
-<Canvas>
-  <Story name="Form" story={stories.form} height={700} />
-</Canvas>
+<Story of={stories.form} height={700} />
+

package/app/stories/form.stories.js

@@ -2,7 +2,7 @@ import { hbs } from 'ember-cli-htmlbars';
 import { action } from '@storybook/addon-actions';
 
 export default {
-  title: 'Form',
+  title: 'Form/Exemple de formulaire',
 };
 
 export const form = (args) => {
@@ -83,16 +83,21 @@ export const form = (args) => {
 
   <br /><br />
 
-  <div class='pix-form__actions'>
-    <PixButton
-      @triggerAction={{this.cancel}}
-      @backgroundColor='transparent-light'
-      @isBorderVisible={{true}}
-    >
-      Annuler
-    </PixButton>
-    <PixButton @type='submit'>Envoyer mes réponses</PixButton>
-  </div>
+  <ul class='pix-form__actions'>
+    <li>
+      <PixButtonLink
+        @route=''
+        @model=''
+        @backgroundColor='transparent-light'
+        @isBorderVisible={{true}}
+      >
+        Annuler
+      </PixButtonLink>
+    </li>
+    <li>
+      <PixButton @type='submit'>Envoyer mes réponses</PixButton>
+    </li>
+  </ul>
 </form>`,
     context: args,
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1024pix/pix-ui",
-  "version": "42.0.2",
+  "version": "42.0.3",
   "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
   "keywords": [
     "ember-addon"