@1024pix/pix-ui 45.3.3 → 45.3.5

package/app/stories/pix-checkbox.mdx

@@ -7,18 +7,16 @@ import * as ComponentStories from './pix-checkbox.stories';
 
 La PixCheckbox permet de créer des checkbox basiques ou des checkbox mixées (checkbox servant d'indicateur lors d'une sélection multiple).
 
+<Story of={ComponentStories.Default} height={60} />
 
- <Story of={ComponentStories.Default} height={60} />
-
+<Story of={ComponentStories.DefaultChecked} height={60} />
 
 ### Liste de checkboxes
 
 Il n'est pas rare d'avoir plusieurs champs checkbox qui se suivent.<br/>
 En ce sens, nous avons déjà prévu un espace vertical pour séparer 2 composants qui se suivent.
 
-
-  <Story of={ComponentStories.multiple} height={140} />
-
+<Story of={ComponentStories.multiple} height={140} />
 
 ## États de la Checkbox
 
@@ -26,16 +24,13 @@ En ce sens, nous avons déjà prévu un espace vertical pour séparer 2 composan
 
 ### Checkbox interminée
 
-
-  <Story of={ComponentStories.indeterminateCheckbox} height={60} />
-
+<Story of={ComponentStories.isIndeterminate} height={60} />
 
 ### Checkbox désactivée
 
-  <Story of={ComponentStories.checkboxDisabled} height={60} />
-  <Story of={ComponentStories.checkboxCheckedDisabled} height={60} />
-  <Story of={ComponentStories.checkboxInterminateDisabled} height={60} />
-
+<Story of={ComponentStories.isDisabled} height={60} />
+<Story of={ComponentStories.checkedIsDisabled} height={60} />
+<Story of={ComponentStories.isIndeterminateIsDisabled} height={60} />
 
 ## Autres tailles de police du label
 
@@ -43,9 +38,7 @@ En ce sens, nous avons déjà prévu un espace vertical pour séparer 2 composan
 
 ### Small
 
-
-  <Story of={ComponentStories.checkboxWithSmallLabel} height={60} />
-
+<Story of={ComponentStories.withSmallLabel} height={60} />
 
 ## Usage
 

package/app/stories/pix-checkbox.stories.js

@@ -87,7 +87,7 @@ export default {
   },
 };
 
-export const Template = (args) => {
+const Template = (args) => {
   return {
     template: hbs`<PixCheckbox
   @id={{this.id}}
@@ -95,7 +95,7 @@ export const Template = (args) => {
   @isIndeterminate={{this.isIndeterminate}}
   @checked={{this.checked}}
   @isDisabled={{this.isDisabled}}
-  disabled={{this.isDisabled}}
+  disabled={{this.disabled}}
   @size={{this.size}}
   @inlineLabel={{this.inlineLabel}}
   @screenReaderOnly={{this.screenReaderOnly}}
@@ -112,53 +112,60 @@ Default.args = {
   label: 'Recevoir la newsletter',
 };
 
-export const indeterminateCheckbox = Template.bind({});
-indeterminateCheckbox.args = {
+export const DefaultChecked = Template.bind({});
+DefaultChecked.args = {
+  id: 'accept-newsletter',
+  label: 'Recevoir la newsletter',
+  checked: true,
+};
+
+export const isIndeterminate = Template.bind({});
+isIndeterminate.args = {
   id: 'accept-newsletter-2',
   label: 'Recevoir la newsletter',
   isIndeterminate: true,
   checked: true,
 };
 
-export const checkboxWithSmallLabel = Template.bind({});
-checkboxWithSmallLabel.args = {
+export const withSmallLabel = Template.bind({});
+withSmallLabel.args = {
   id: 'accept-newsletter-2',
   label: 'Recevoir la newsletter',
   size: 'small',
 };
 
-export const checkboxWithLargeLabel = Template.bind({});
-checkboxWithLargeLabel.args = {
+export const withLargeLabel = Template.bind({});
+withLargeLabel.args = {
   id: 'accept-newsletter-2',
   label: 'Recevoir la newsletter',
   size: 'large',
 };
 
-export const checkboxDisabled = Template.bind({});
-checkboxDisabled.args = {
+export const isDisabled = Template.bind({});
+isDisabled.args = {
   id: 'accept-newsletter-2',
   label: 'Recevoir la newsletter',
-  disabled: true,
+  isDisabled: true,
 };
 
-export const checkboxCheckedDisabled = Template.bind({});
-checkboxCheckedDisabled.args = {
+export const checkedIsDisabled = Template.bind({});
+checkedIsDisabled.args = {
   id: 'accept-newsletter-2',
   label: 'Recevoir la newsletter',
-  disabled: true,
+  isDisabled: true,
   checked: true,
 };
 
-export const checkboxInterminateDisabled = Template.bind({});
-checkboxInterminateDisabled.args = {
+export const isIndeterminateIsDisabled = Template.bind({});
+isIndeterminateIsDisabled.args = {
   id: 'accept-newsletter-2',
   label: 'Recevoir la newsletter',
-  disabled: true,
+  isDisabled: true,
   checked: true,
   isIndeterminate: true,
 };
 
-export const MultipleTemplate = (args) => {
+const MultipleTemplate = (args) => {
   return {
     template: hbs`<PixCheckbox
   @id='one'
@@ -167,7 +174,7 @@ export const MultipleTemplate = (args) => {
   @isIndeterminate={{this.isIndeterminate}}
   @size={{this.size}}
   @checked={{this.checked}}
-  disabled={{this.isDisabled}}
+  disabled={{this.disabled}}
   @isDisabled={{this.isDisabled}}
 >
   <:label>{{this.label}}</:label>
@@ -179,7 +186,7 @@ export const MultipleTemplate = (args) => {
   @isIndeterminate={{this.isIndeterminate}}
   @size={{this.size}}
   @checked={{this.checked}}
-  disabled={{this.isDisabled}}
+  disabled={{this.disabled}}
   @isDisabled={{this.isDisabled}}
 >
   <:label>{{this.label}}</:label>

package/app/stories/pix-input-code.stories.js

@@ -55,7 +55,7 @@ export default {
   },
 };
 
-export const Template = (args) => {
+const Template = (args) => {
   return {
     template: hbs`<PixInputCode
   @ariaLabel={{this.ariaLabel}}

package/app/stories/pix-radio-button.mdx

@@ -24,15 +24,13 @@ Pour les considérer comme un seul groupe d'inputs, **il est nécessaire qu'ils
 
 <Story of={ComponentStories.multiple} height={140} />
 
-
 ## Disabled
 
 État inactif du bouton radio.
 
 <Story of={ComponentStories.isDisabled} height={60} />
 
-<Story of={ComponentStories.disabledChecked} height={60} />
-
+<Story of={ComponentStories.checkedIsDisabled} height={60} />
 
 ## Usage
 

package/app/stories/pix-radio-button.stories.js

@@ -19,6 +19,15 @@ export default {
       description: "Valeur permettant d'identifier l'option sélectionnée",
       type: { name: 'string', required: false },
     },
+    checked: {
+      name: 'checked',
+      description: 'Permet de cocher la radio',
+      type: { name: 'boolean', required: false },
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
     isDisabled: {
       name: 'isDisabled',
       description: 'Pour désactiver/activer le bouton radio',
@@ -79,7 +88,8 @@ const Template = (args) => {
   @value={{this.value}}
   @id={{this.id}}
   @class={{this.class}}
-  disabled={{this.isDisabled}}
+  checked={{this.checked}}
+  disabled={{this.disabled}}
   @isDisabled={{this.isDisabled}}
   @size={{this.size}}
   @screenReaderOnly={{this.screenReaderOnly}}
@@ -96,39 +106,37 @@ Default.args = {
   label: 'Poivron',
 };
 
-export const isDisabled = Template.bind({});
-isDisabled.args = {
+export const defaultChecked = Template.bind({});
+defaultChecked.args = {
   ...Default.args,
-  disabled: true,
+  checked: true,
 };
 
-/* Checked stories */
-const checked = (args) => {
-  return {
-    template: hbs`<PixRadioButton @value={{this.value}} disabled={{this.disabled}} checked><:label
-  >{{this.label}}</:label></PixRadioButton>`,
-    context: args,
-  };
+export const isDisabled = Template.bind({});
+isDisabled.args = {
+  ...Default.args,
+  isDisabled: true,
 };
 
-export const disabledChecked = checked.bind({});
-disabledChecked.args = {
+export const checkedIsDisabled = Template.bind({});
+checkedIsDisabled.args = {
   ...Default.args,
-  disabled: true,
+  isDisabled: true,
+  checked: true,
 };
 
-export const defaultChecked = checked.bind({});
-defaultChecked.args = Default.args;
-
 /* Multiple components story */
 const multipleTemplate = (args) => {
   return {
-    template: hbs`<PixRadioButton disabled={{this.isDisabled}} @isDisabled={{this.isDisabled}} name='radio'><:label
-  >{{this.label}}</:label></PixRadioButton>
-<PixRadioButton disabled={{this.isDisabled}} @isDisabled={{this.isDisabled}} name='radio'><:label
-  >{{this.label}}</:label></PixRadioButton>
-<PixRadioButton disabled={{this.isDisabled}} @isDisabled={{this.isDisabled}} name='radio'><:label
-  >{{this.label}}</:label></PixRadioButton>`,
+    template: hbs`<PixRadioButton disabled={{this.disabled}} @isDisabled={{this.isDisabled}} name='radio'>
+  <:label>{{this.label}}</:label>
+</PixRadioButton>
+<PixRadioButton disabled={{this.disabled}} @isDisabled={{this.isDisabled}} name='radio'>
+  <:label>{{this.label}}</:label>
+</PixRadioButton>
+<PixRadioButton disabled={{this.disabled}} @isDisabled={{this.isDisabled}} name='radio'>
+  <:label>{{this.label}}</:label>
+</PixRadioButton>`,
     context: args,
   };
 };

package/app/stories/pix-search-input.stories.js

@@ -90,7 +90,7 @@ export default {
   },
 };
 
-export const Template = (args) => {
+const Template = (args) => {
   return {
     template: hbs`<PixSearchInput
   @id={{this.id}}

package/app/stories/pix-select.stories.js

@@ -196,7 +196,7 @@ export default {
   },
 };
 
-export const Template = (args) => {
+const Template = (args) => {
   return {
     template: hbs`{{#if this.id}}
   <div>
@@ -230,7 +230,7 @@ export const Template = (args) => {
   };
 };
 
-export const TemplatePopover = (args) => {
+const TemplatePopover = (args) => {
   return {
     template: hbs`{{! template-lint-disable no-inline-styles }}
 <div style='display:flex;height:330px'>

package/app/stories/pix-sidebar.stories.js

@@ -28,7 +28,7 @@ export default {
   },
 };
 
-export const Template = (args) => {
+const Template = (args) => {
   return {
     template: hbs`<PixSidebar
   @showSidebar={{this.showSidebar}}

package/app/stories/pix-toggle.stories.js

@@ -68,7 +68,7 @@ export default {
   },
 };
 
-export const Template = (args) => {
+const Template = (args) => {
   return {
     template: hbs`<PixToggle
   @onLabel={{this.onLabel}}
@@ -86,7 +86,7 @@ export const Template = (args) => {
   };
 };
 
-export const TemplateWithYields = (args) => {
+const TemplateWithYields = (args) => {
   return {
     template: hbs`<PixToggle @toggled={{this.toggled}} @onChange={{this.onChange}}>
   <:label>{{this.label}}</:label>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1024pix/pix-ui",
-  "version": "45.3.3",
+  "version": "45.3.5",
   "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
   "keywords": [
     "ember-addon"
@@ -59,7 +59,7 @@
   },
   "devDependencies": {
     "@1024pix/ember-testing-library": "^1.1.0",
-    "@1024pix/eslint-config": "^1.2.10",
+    "@1024pix/eslint-config": "^1.2.11",
     "@1024pix/stylelint-config": "^5.1.10",
     "@babel/eslint-parser": "^7.19.1",
     "@babel/plugin-proposal-decorators": "^7.20.5",
@@ -92,7 +92,7 @@
     "@testing-library/user-event": "^14.4.3",
     "chromatic": "^11.0.0",
     "core-js": "^3.26.1",
-    "ember-cli": "^4.8.0",
+    "ember-cli": "^5.0.0",
     "ember-cli-dependency-checker": "^3.3.1",
     "ember-cli-inject-live-reload": "^2.1.0",
     "ember-cli-sri": "^2.1.1",
@@ -126,8 +126,6 @@
     "sass": "^1.56.1",
     "storybook": "^8.0.0",
     "stylelint": "^16.0.2",
-    "stylelint-config-rational-order": "^0.1.2",
-    "stylelint-config-standard-scss": "^13.0.0",
     "webpack": "^5.75.0"
   },
   "bugs": {