From c9405ca22277f9039f93c26ddaf68ad9415a71b8 Mon Sep 17 00:00:00 2001
From: Xavier Carron <33637571+xav-car@users.noreply.github.com>
Date: Tue, 24 Sep 2024 15:39:51 +0200
Subject: [PATCH 01/15] tech(pix-icon): enhance naming / fix path
---
addon/components/pix-icon.hbs | 2 ++
addon/components/pix-icon.js | 2 +-
addon/helpers/icons.js | 8 ++++----
addon/styles/_pix-icon.scss | 4 ++++
addon/styles/addon.scss | 2 ++
5 files changed, 13 insertions(+), 5 deletions(-)
create mode 100644 addon/styles/_pix-icon.scss
diff --git a/addon/components/pix-icon.hbs b/addon/components/pix-icon.hbs
index 07864af9f..50ac065cc 100644
--- a/addon/components/pix-icon.hbs
+++ b/addon/components/pix-icon.hbs
@@ -2,6 +2,8 @@
xmlns="http://www.w3.org/2000/svg"
alt={{this.alternativeText}}
aria-hidden={{this.ariaHidden}}
+ role="img"
+ class="pix-icon"
...attributes
>
diff --git a/addon/components/pix-icon.js b/addon/components/pix-icon.js
index 3917ab584..ebaedc221 100644
--- a/addon/components/pix-icon.js
+++ b/addon/components/pix-icon.js
@@ -20,7 +20,7 @@ export default class PixIcon extends Component {
get iconName() {
warn(
- `PixIcon: @name must be one of these : ${Object.keys(ICONS).join(' | ')}`,
+ `PixIcon: @name "${this.args.name}" is not one of these : ${Object.keys(ICONS).join(' | ')}`,
Object.keys(ICONS).includes(this.args.name),
{
id: 'pix-ui.icon.not-valid',
diff --git a/addon/helpers/icons.js b/addon/helpers/icons.js
index aa50ebd61..e1e28d32d 100644
--- a/addon/helpers/icons.js
+++ b/addon/helpers/icons.js
@@ -15,23 +15,24 @@ export const ICONS = {
cancel: { default: 'cancel', plainIcon: 'cancel_plainIcon' },
check: { default: 'check' },
checkCircle: { default: 'check_circle', plainIcon: 'check_circle_plainIcon' },
- chevronBottom: { default: 'arrow_drop_down' },
+ chevronBottom: { default: 'keyboard_arrow_down' },
chevronLeft: { default: 'chevron_left' },
chevronRight: { default: 'chevron_right' },
- chevronTop: { default: 'arrow_drop_up' },
+ chevronTop: { default: 'keyboard_arrow_up' },
clock: { default: 'schedule', plainIcon: 'schedule_plainIcon' },
close: { default: 'close' },
cloudUpload: { default: 'cloud_upload', plainIcon: 'cloud_upload_plainIcon' },
conversionPath: { default: 'conversion_path' },
copy: { default: 'content_copy', plainIcon: 'content_copy_plainIcon' },
delete: { default: 'delete', plainIcon: 'delete_plainIcon' },
- down: { default: 'keyboard_arrow_down' },
download: { default: 'download' },
edit: { default: 'edit_square', plainIcon: 'edit_square_plainIcon' },
error: { default: 'error', plainIcon: 'error_plainIcon' },
extension: { default: 'extension', plainIcon: 'extension_plainIcon' },
eye: { default: 'visibility', plainIcon: 'visibility_plainIcon' },
eyeOff: { default: 'visibility_off', plainIcon: 'visibility_off_plainIcon' },
+ fatTriangleDown: { default: 'arrow_drop_down' },
+ fatTriangleUp: { default: 'arrow_drop_up' },
favorite: { default: 'favorite', plainIcon: 'favorite_plainIcon' },
flag: { default: 'flag', plainIcon: 'flag_plainIcon' },
globe: { default: 'globe' },
@@ -71,7 +72,6 @@ export const ICONS = {
tablet: { default: 'tablet_android', plainIcon: 'tablet_android_plainIcon' },
thumbUp: { default: 'thumb_up', plainIcon: 'thumb_up_plainIcon' },
tools: { default: 'construction' },
- up: { default: 'keyboard_arrow_up' },
upload: { default: 'upload' },
uploadFile: { default: 'upload_file', plainIcon: 'upload_file_plainIcon' },
userCircle: { default: 'account_circle', plainIcon: 'account_circle_plainIcon' },
diff --git a/addon/styles/_pix-icon.scss b/addon/styles/_pix-icon.scss
new file mode 100644
index 000000000..ee1df5588
--- /dev/null
+++ b/addon/styles/_pix-icon.scss
@@ -0,0 +1,4 @@
+.pix-icon {
+ width: 1.5rem;
+ height: 1.5rem;
+}
diff --git a/addon/styles/addon.scss b/addon/styles/addon.scss
index 36b371f04..5557fcb17 100644
--- a/addon/styles/addon.scss
+++ b/addon/styles/addon.scss
@@ -1,6 +1,7 @@
@import 'pix-design-tokens';
@import 'normalize-reset';
@import 'a11y';
+@import 'pix-icon';
@import 'pix-background-header';
@import 'pix-banner';
@import 'pix-block';
@@ -35,6 +36,7 @@
@import 'trap-focus';
@import 'pix-search-input';
+
// at the end so it can override it's children scss
@import 'pix-filterable-and-searchable-select';
@import 'component-state';
From 4aec321e178a78c5624f6b23a6026d1702417cf4 Mon Sep 17 00:00:00 2001
From: Xavier Carron <33637571+xav-car@users.noreply.github.com>
Date: Tue, 24 Sep 2024 14:27:33 +0200
Subject: [PATCH 02/15] tech(pix-banner): update icon
---
addon/components/pix-banner.hbs | 6 ++---
addon/components/pix-banner.js | 12 +++++-----
addon/styles/_pix-banner.scss | 23 ++++++++++++-------
app/stories/pix-banner.stories.js | 8 +++++++
.../integration/components/pix-banner-test.js | 9 ++++----
5 files changed, 36 insertions(+), 22 deletions(-)
diff --git a/addon/components/pix-banner.hbs b/addon/components/pix-banner.hbs
index 6041906ed..4955f8af4 100644
--- a/addon/components/pix-banner.hbs
+++ b/addon/components/pix-banner.hbs
@@ -1,6 +1,6 @@
{{#if this.displayBanner}}
-
+
{{yield}}
{{#if this.displayAction}}
@@ -12,7 +12,7 @@
rel="noopener noreferrer"
>
{{@actionLabel}}
-
+
{{else}}
{{@actionLabel}}
@@ -23,7 +23,7 @@
diff --git a/addon/components/pix-banner.js b/addon/components/pix-banner.js
index 0627d9a85..fab8e786d 100644
--- a/addon/components/pix-banner.js
+++ b/addon/components/pix-banner.js
@@ -18,12 +18,12 @@ const types = [
];
const icons = {
- [TYPE_INFO]: 'circle-info',
- [TYPE_ERROR]: 'triangle-exclamation',
- [TYPE_WARNING]: 'circle-exclamation',
- [TYPE_COMMUNICATION]: 'bullhorn',
- [TYPE_COMMUNICATION_ORGA]: 'bullhorn',
- [TYPE_COMMUNICATION_CERTIF]: 'bullhorn',
+ [TYPE_INFO]: 'info',
+ [TYPE_ERROR]: 'error',
+ [TYPE_WARNING]: 'warning',
+ [TYPE_COMMUNICATION]: 'campaign',
+ [TYPE_COMMUNICATION_ORGA]: 'campaign',
+ [TYPE_COMMUNICATION_CERTIF]: 'campaign',
};
export default class PixBanner extends Component {
diff --git a/addon/styles/_pix-banner.scss b/addon/styles/_pix-banner.scss
index ee77c536b..3da0a713e 100644
--- a/addon/styles/_pix-banner.scss
+++ b/addon/styles/_pix-banner.scss
@@ -7,13 +7,20 @@
border: 1px solid currentcolor;
border-radius: var(--pix-spacing-2x);
+ &__icon {
+ flex-shrink: 0;
+ }
+
&__action {
+ display: inline-flex;
+ align-items: center;
color: inherit;
text-decoration: underline;
.external-link {
+ width: 1rem;
+ height: 1rem;
margin-left: var(--pix-spacing-1x);
- font-size: 0.875rem;
}
}
@@ -22,17 +29,14 @@
margin-left: auto;
}
- &__icon {
- font-size: 1.125rem;
- }
-
&--information {
color: var(--pix-info-700);
background-color: var(--pix-info-50);
+ fill: var(--pix-info-700);
.pix-icon-button {
- color: var(--pix-neutral-800);
background-color: var(--pix-info-50);
+ fill: var(--pix-neutral-800);
&:hover:enabled,
&:focus:enabled,
@@ -49,9 +53,9 @@
&--warning {
color: var(--pix-warning-700);
background-color: var(--pix-warning-50);
+ fill: var(--pix-warning-700);
.pix-icon-button {
- color: var(--pix-neutral-800);
background-color: var(--pix-warning-50);
&:hover:enabled,
@@ -69,9 +73,9 @@
&--error {
color: var(--pix-error-700);
background-color: var(--pix-error-50);
+ fill: var(--pix-error-700);
.pix-icon-button {
- color: var(--pix-neutral-800);
background-color: var(--pix-error-50);
&:hover:enabled,
@@ -89,15 +93,18 @@
&--communication {
color: var(--pix-neutral-0);
background-color: var(--pix-primary-500);
+ fill: var(--pix-neutral-0);
&-orga {
color: var(--pix-neutral-0);
background-color: var(--pix-orga-500);
+ fill: var(--pix-neutral-0);
}
&-certif {
color: var(--pix-neutral-0);
background-color: var(--pix-certif-500);
+ fill: var(--pix-neutral-0);
}
}
}
diff --git a/app/stories/pix-banner.stories.js b/app/stories/pix-banner.stories.js
index cd61b76a0..38db46c24 100644
--- a/app/stories/pix-banner.stories.js
+++ b/app/stories/pix-banner.stories.js
@@ -8,6 +8,12 @@ export default {
description: 'Nom de l‘action',
type: { name: 'string', required: false },
},
+ closeButtonLabel: {
+ name: 'closeButtonLabel',
+ description: 'Nom du bouton de fermeture de la banner',
+ type: { name: 'string', required: false },
+ table: { defaultValue: { summary: 'Fermer' } },
+ },
actionUrl: {
name: 'actionUrl',
description: 'Lien de l‘action',
@@ -54,6 +60,7 @@ const Template = (args) => {
template: hbs`
@@ -109,4 +116,5 @@ export const withCloseIcon = Template.bind({});
withCloseIcon.args = {
type: 'information',
canCloseBanner: true,
+ closeButtonLabel: 'Fermer',
};
diff --git a/tests/integration/components/pix-banner-test.js b/tests/integration/components/pix-banner-test.js
index e3af635df..f1ac7e4c3 100644
--- a/tests/integration/components/pix-banner-test.js
+++ b/tests/integration/components/pix-banner-test.js
@@ -124,14 +124,13 @@ module('Integration | Component | Pix Banner', function (hooks) {
this.set('canCloseBanner', true);
//when
- await render(hbs`
+ const screen =
+ await render(hbs`
Mon texte
`);
// then
- assert.dom('.pix-banner__close').exists();
- assert.dom('[aria-label="Fermer"]').exists();
- await click('[aria-label="Fermer"]');
- assert.dom('.pix-banner').doesNotExist();
+ await click(screen.getByRole('button', { name: /Fermer/ }));
+ assert.notOk(screen.queryByText('Mon texte'));
});
});
From f35de1bcae731a150b1bce02e9a1bb737a87e1c4 Mon Sep 17 00:00:00 2001
From: Xavier Carron <33637571+xav-car@users.noreply.github.com>
Date: Tue, 24 Sep 2024 14:28:28 +0200
Subject: [PATCH 03/15] tech(pix-tooltip): update icon
---
addon/components/pix-tooltip.hbs | 2 +-
addon/styles/_pix-tooltip.scss | 12 ++++++++++++
app/stories/pix-tooltip.mdx | 2 +-
app/stories/pix-tooltip.stories.js | 7 ++-----
4 files changed, 16 insertions(+), 7 deletions(-)
diff --git a/addon/components/pix-tooltip.hbs b/addon/components/pix-tooltip.hbs
index e28c4bf06..b644ea307 100644
--- a/addon/components/pix-tooltip.hbs
+++ b/addon/components/pix-tooltip.hbs
@@ -8,7 +8,7 @@
...attributes
>
{{#if (has-block "triggerElement")}}
-
+
{{yield to="triggerElement"}}
{{/if}}
diff --git a/addon/styles/_pix-tooltip.scss b/addon/styles/_pix-tooltip.scss
index 60c5326f4..fe8fd52b3 100644
--- a/addon/styles/_pix-tooltip.scss
+++ b/addon/styles/_pix-tooltip.scss
@@ -7,6 +7,12 @@
&__trigger-element {
display: block;
width: 100%;
+
+ > svg {
+ width: 1rem;
+ height: 1rem;
+ fill:var(--pix-neutral-500);
+ }
}
&__trigger-element:hover + .pix-tooltip__content {
@@ -39,6 +45,7 @@
z-index: 100;
padding: var(--pix-spacing-2x) var(--pix-spacing-4x);
color: var(--pix-neutral-0);
+ fill: var(--pix-neutral-0);
font-size: 0.875rem;
line-height: 1.4rem;
background-color: var(--pix-neutral-900);
@@ -48,6 +55,11 @@
transition: opacity 0.3s;
pointer-events: none;
+ > .pix-icon {
+ width: 1rem;
+ height: 1rem;
+ }
+
&--inline {
white-space: nowrap;
}
diff --git a/app/stories/pix-tooltip.mdx b/app/stories/pix-tooltip.mdx
index ea9e27868..b46ef5565 100644
--- a/app/stories/pix-tooltip.mdx
+++ b/app/stories/pix-tooltip.mdx
@@ -112,7 +112,7 @@ Cache la tooltip (par exemple si le contenu est vide).
Tooltip par défaut
<:tooltip>
- Avec des éléments HTML/Ember
+ Avec des éléments HTML/Ember
diff --git a/app/stories/pix-tooltip.stories.js b/app/stories/pix-tooltip.stories.js
index 7f3139b42..6721ecb2d 100644
--- a/app/stories/pix-tooltip.stories.js
+++ b/app/stories/pix-tooltip.stories.js
@@ -91,7 +91,7 @@ const TemplateWithHTMLElement = (args) => {
<:tooltip>
-
+
HTML/Ember
`,
@@ -104,10 +104,7 @@ const TemplateWithIconElement = (args) => {
template: hbs`
<:triggerElement>
{{! template-lint-disable no-inline-styles }}
-
-
-
-
+
<:tooltip>
From 4b4e5ca2a9de2453d502f0f7f1651274a17915b3 Mon Sep 17 00:00:00 2001
From: Xavier Carron <33637571+xav-car@users.noreply.github.com>
Date: Fri, 4 Oct 2024 21:27:48 +0200
Subject: [PATCH 04/15] tech(pix-*-button): update icon
---
addon/components/pix-button.hbs | 12 ++---
addon/components/pix-icon-button.hbs | 10 ++--
addon/components/pix-icon-button.js | 17 ++++---
addon/styles/_pix-banner.scss | 1 -
addon/styles/_pix-button-base.scss | 9 ++++
addon/styles/_pix-button.scss | 3 +-
addon/styles/_pix-icon-button.scss | 27 +++++-----
app/stories/pix-button.stories.js | 49 +++++++------------
app/stories/pix-icon-button.mdx | 8 +--
app/stories/pix-icon-button.stories.js | 43 +++++++---------
.../integration/components/pix-button-test.js | 31 ------------
.../components/pix-icon-button-test.js | 38 +-------------
12 files changed, 92 insertions(+), 156 deletions(-)
diff --git a/addon/components/pix-button.hbs b/addon/components/pix-button.hbs
index e186d15a2..d08eddf31 100644
--- a/addon/components/pix-button.hbs
+++ b/addon/components/pix-button.hbs
@@ -15,18 +15,18 @@
{{yield}}
{{else}}
{{#if @iconBefore}}
-
{{/if}}
{{yield}}
{{#if @iconAfter}}
-
{{/if}}
{{/if}}
diff --git a/addon/components/pix-icon-button.hbs b/addon/components/pix-icon-button.hbs
index 1b35e3bd3..063812306 100644
--- a/addon/components/pix-icon-button.hbs
+++ b/addon/components/pix-icon-button.hbs
@@ -1,11 +1,15 @@
-
+ {{this.ariaLabel}}
+
\ No newline at end of file
diff --git a/addon/components/pix-icon-button.js b/addon/components/pix-icon-button.js
index 03948f8c5..d838391d3 100644
--- a/addon/components/pix-icon-button.js
+++ b/addon/components/pix-icon-button.js
@@ -1,14 +1,10 @@
import Component from '@glimmer/component';
import { action } from '@ember/object';
+import { warn } from '@ember/debug';
export default class PixIconButton extends Component {
text = 'pix-icon-button';
- get icon() {
- const defaultIcon = 'plus';
- return this.args.icon ? this.args.icon : defaultIcon;
- }
-
get size() {
return this.args.size || 'big';
}
@@ -18,9 +14,14 @@ export default class PixIconButton extends Component {
}
get ariaLabel() {
- if (!this.args.ariaLabel || !this.args.ariaLabel.trim()) {
- throw new Error('ERROR in PixIconButton component, @ariaLabel param is not provided.');
- }
+ warn(
+ 'PixIconButton: @label attribute should be a string.',
+ !['', null, undefined].includes(this.args.ariaLabel),
+ {
+ id: 'pix-ui.icon-button.close-button-label.not-string',
+ },
+ );
+
return this.args.ariaLabel;
}
diff --git a/addon/styles/_pix-banner.scss b/addon/styles/_pix-banner.scss
index 3da0a713e..b4235a2e8 100644
--- a/addon/styles/_pix-banner.scss
+++ b/addon/styles/_pix-banner.scss
@@ -36,7 +36,6 @@
.pix-icon-button {
background-color: var(--pix-info-50);
- fill: var(--pix-neutral-800);
&:hover:enabled,
&:focus:enabled,
diff --git a/addon/styles/_pix-button-base.scss b/addon/styles/_pix-button-base.scss
index 919026461..7f18f61dd 100644
--- a/addon/styles/_pix-button-base.scss
+++ b/addon/styles/_pix-button-base.scss
@@ -30,6 +30,7 @@
&--primary {
color: var(--pix-neutral-0);
background-color: var(--pix-primary-500);
+ fill: var(--pix-neutral-0);
&:not([aria-disabled="true"]) {
&:hover {
@@ -53,11 +54,13 @@
&--primary-bis {
color: var(--pix-neutral-900);
background-color: var(--pix-secondary-500);
+ fill: var(--pix-neutral-900);
&:not([aria-disabled="true"]) {
&:hover {
color: var(--pix-neutral-0);
background-color: var(--pix-secondary-700);
+ fill: var(--pix-neutral-0);
}
&:focus,
@@ -66,12 +69,14 @@
background-color: var(--pix-secondary-700);
outline: 1px solid var(--pix-neutral-0);
outline-offset: -4px;
+ fill: var(--pix-neutral-0);
}
&:active {
color: var(--pix-neutral-0);
background-color: var(--pix-secondary-900);
outline: none;
+ fill: var(--pix-neutral-0);
}
}
}
@@ -80,6 +85,7 @@
color: var(--pix-primary-700);
background-color: transparent;
border: 2px solid var(--pix-primary-700);
+ fill: var(--pix-primary-700);
&:not([aria-disabled="true"]) {
&:hover {
@@ -109,6 +115,7 @@
color: var(--pix-neutral-800);
text-decoration: underline;
background-color: transparent;
+ fill: var(--pix-neutral-800);
&:not([aria-disabled="true"]) {
&:hover,
@@ -126,6 +133,7 @@
&--success {
color: var(--pix-neutral-0);
background-color: var(--pix-success-500);
+ fill: var(--pix-neutral-0);
&:not([aria-disabled="true"]) {
&:hover {
@@ -149,6 +157,7 @@
&--error {
color: var(--pix-neutral-0);
background-color: var(--pix-error-500);
+ fill: var(--pix-neutral-0);
&:not([aria-disabled="true"]) {
&:hover {
diff --git a/addon/styles/_pix-button.scss b/addon/styles/_pix-button.scss
index bced90eb4..09fcb31eb 100644
--- a/addon/styles/_pix-button.scss
+++ b/addon/styles/_pix-button.scss
@@ -1,5 +1,6 @@
.pix-button__icon {
- height: 1rem;
+ width: 1.25rem;
+ height: 1.25rem;
&--before {
margin-right: var(--pix-spacing-2x);
diff --git a/addon/styles/_pix-icon-button.scss b/addon/styles/_pix-icon-button.scss
index 063b898cf..e965fbdea 100644
--- a/addon/styles/_pix-icon-button.scss
+++ b/addon/styles/_pix-icon-button.scss
@@ -2,13 +2,26 @@
display: inline-flex;
align-items: center;
justify-content: center;
+ width: 2.375rem;
+ min-width: 2.375rem;
+ height: 2.375rem;
padding: 0;
- color: var(--pix-neutral-800);
background-color: transparent;
border: none;
border-radius: 50%;
outline: none;
cursor: pointer;
+ fill: var(--pix-neutral-800);
+
+ &__icon {
+ width: 1.35rem;
+ height: 1.35rem;
+
+ &--small {
+ width: 1.18rem;
+ height: 1.18rem;
+ }
+ }
&:disabled {
cursor: not-allowed;
@@ -21,16 +34,16 @@
}
&:focus:enabled {
- color: var(--pix-neutral-0);
background-color: var(--pix-neutral-800);
outline: 1px solid var(--pix-neutral-0);
outline-offset: -3px;
+ fill: var(--pix-neutral-0);
}
&:active:enabled {
- color: var(--pix-neutral-800);
background-color: var(--pix-neutral-100);
outline: 0;
+ fill: var(--pix-neutral-800);
}
&--background {
@@ -41,13 +54,5 @@
width: 2rem;
min-width: 2rem;
height: 2rem;
- font-size: 1rem;
- }
-
- &--big {
- width: 2.375rem;
- min-width: 2.375rem;
- height: 2.375rem;
- font-size: 1.25rem;
}
}
diff --git a/app/stories/pix-button.stories.js b/app/stories/pix-button.stories.js
index f2f4f3349..587bb196f 100644
--- a/app/stories/pix-button.stories.js
+++ b/app/stories/pix-button.stories.js
@@ -1,4 +1,5 @@
import { hbs } from 'ember-cli-htmlbars';
+import { ICONS } from '../../addon/helpers/icons';
export default {
title: 'Basics/Button',
@@ -52,46 +53,34 @@ export default {
},
iconBefore: {
name: 'iconBefore',
- description: `Nom de l'icône font-awesome à afficher **avant** le label`,
+ description: `Nom de l'icône à afficher **avant** le label`,
type: { name: 'string', required: false },
control: { type: 'select' },
- options: ['magnifying-glass', 'plus', 'xmark'],
- table: {
- type: { summary: 'string' },
- defaultValue: { summary: null },
- },
+ options: Object.keys(ICONS),
},
iconAfter: {
name: 'iconAfter',
- description: `Nom de l'icône font-awesome à afficher **après** le label`,
+ description: `Nom de l'icône à afficher **après** le label`,
type: { name: 'string', required: false },
control: { type: 'select' },
- options: ['magnifying-glass', 'plus', 'xmark'],
- table: {
- type: { summary: 'string' },
- defaultValue: { summary: null },
- },
+ options: Object.keys(ICONS),
},
- prefixIconBefore: {
- name: 'prefixIconBefore',
- description: `Permet d'ajouter un préfix à l'icone devant le label pour appliquer un style particulier`,
- type: { name: 'string', required: false },
- control: { type: 'select' },
- options: ['fas', 'far'],
+ plainIconBefore: {
+ name: 'plainIconBefore',
+ description: `Change le type de l'icône **avant** le label en fill/plain`,
+ type: { name: 'boolean', required: false },
table: {
- type: { summary: 'string' },
- defaultValue: { summary: null },
+ type: { summary: 'boolean' },
+ defaultValue: { summary: 'false' },
},
},
- prefixIconAfter: {
- name: 'prefixIconAfter',
- description: `Permet d'ajouter un préfix à l'icone derrière le label pour appliquer un style particulier`,
- type: { name: 'string', required: false },
- control: { type: 'select' },
- options: ['fas', 'far'],
+ plainIconAfter: {
+ name: 'plainIconAfter',
+ description: `Change le type de l'icône **après** le label fill/plain`,
+ type: { name: 'boolean', required: false },
table: {
- type: { summary: 'string' },
- defaultValue: { summary: null },
+ type: { summary: 'boolean' },
+ defaultValue: { summary: 'false' },
},
},
isDisabled: {
@@ -230,8 +219,8 @@ variants.args = {
export const icons = Template.bind({});
icons.args = {
...Default.args,
- iconBefore: 'magnifying-glass',
- iconAfter: 'plus',
+ iconBefore: 'add',
+ iconAfter: 'minus',
};
export const disabled = Template.bind({});
diff --git a/app/stories/pix-icon-button.mdx b/app/stories/pix-icon-button.mdx
index 358a44979..2d22fad3e 100644
--- a/app/stories/pix-icon-button.mdx
+++ b/app/stories/pix-icon-button.mdx
@@ -44,7 +44,7 @@ L'attribut `aria-label` étant indispensable pour l'accessibilité de ce composa
Par défaut
```html
-
+
```
Bouton de fermeture
@@ -52,7 +52,7 @@ Bouton de fermeture
```html
@@ -63,7 +63,7 @@ Bouton d'action
```html
diff --git a/app/stories/pix-icon-button.stories.js b/app/stories/pix-icon-button.stories.js
index 10e3ba792..d08ec545d 100644
--- a/app/stories/pix-icon-button.stories.js
+++ b/app/stories/pix-icon-button.stories.js
@@ -1,5 +1,6 @@
import { hbs } from 'ember-cli-htmlbars';
import { action } from '@storybook/addon-actions';
+import { ICONS } from '../../addon/helpers/icons';
export default {
title: 'Basics/Icon button',
@@ -9,18 +10,21 @@ export default {
description: "l'action du bouton, pour l'accessibilité",
type: { name: 'string', required: true },
},
- icon: {
- name: 'icon',
- description: 'Icône font-awesome',
+ iconName: {
+ name: 'iconName',
+ description: 'Icône a utiliser sur le bouton',
type: { name: 'string', required: true },
- table: { defaultValue: { summary: 'plus' } },
- },
- iconPrefix: {
- name: 'iconPrefix',
- description: "Prefix de l'icône font-awesome",
- type: { name: 'string', required: false },
control: { type: 'select' },
- options: ['far', 'fas'],
+ options: Object.keys(ICONS),
+ },
+ plainIcon: {
+ name: 'plainIcon',
+ description: "Change le type de l'icône fill/plain",
+ type: { name: 'boolean', required: false },
+ table: {
+ type: { summary: 'boolean' },
+ defaultValue: { summary: 'false' },
+ },
},
triggerAction: {
name: 'triggerAction',
@@ -38,26 +42,15 @@ export default {
},
size: {
name: 'size',
- description: 'Size: `small`, `big`',
+ description: 'Size: `small`',
type: { name: 'string', required: false },
control: { type: 'select' },
- options: ['big', 'small'],
+ options: ['small'],
table: {
type: { summary: 'string' },
defaultValue: { summary: 'big' },
},
},
- color: {
- name: 'color',
- description: ' ⚠️ **Propriété dépréciée** ⚠️ Color: `light-grey`, `dark-grey`',
- type: { name: 'string', required: false },
- control: { type: 'select' },
- options: ['light-grey', 'dark-grey'],
- table: {
- type: { summary: 'string' },
- defaultValue: { summary: 'light-grey' },
- },
- },
},
};
@@ -65,7 +58,7 @@ const Template = (args) => {
return {
template: hbs`
- Mon bouton
-`);
-
- // then
- const iconBefore = this.element.querySelector('.pix-button__icon--before');
- assert.ok(iconBefore);
-
- const iconAfter = this.element.querySelector('.pix-button__icon--after');
- assert.ok(iconAfter);
- });
-
- test('it renders the PixButton component with prefixIconBefore and prefixIconAfter attributes', async function (assert) {
- //when
- await render(hbs`
- Mon bouton
- `);
-
- const prefixes = this.element.querySelectorAll('[data-prefix="fas"]');
- // then
- assert.strictEqual(prefixes.length, 2);
- });
-
test('it should call the action', async function (assert) {
// given
this.set('count', 1);
diff --git a/tests/integration/components/pix-icon-button-test.js b/tests/integration/components/pix-icon-button-test.js
index 5817f85fa..2d908c23e 100644
--- a/tests/integration/components/pix-icon-button-test.js
+++ b/tests/integration/components/pix-icon-button-test.js
@@ -2,33 +2,12 @@ import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { render } from '@1024pix/ember-testing-library';
import { hbs } from 'ember-cli-htmlbars';
-import createGlimmerComponent from '../../helpers/create-glimmer-component';
import clickByLabel from '../../helpers/click-by-label';
module('Integration | Component | icon-button', function (hooks) {
setupRenderingTest(hooks);
const COMPONENT_SELECTOR = '.pix-icon-button';
- const iconClass = `${COMPONENT_SELECTOR} > svg`;
-
- test('it renders PixIconButton with a default fa-icon', async function (assert) {
- // when
- await render(hbs` `);
- const iconElement = this.element.querySelector(iconClass);
-
- // then
- assert.ok(iconElement.classList.contains('fa-plus'));
- });
-
- test('it renders PixIconButton with the specified FaIcon', async function (assert) {
- // when
- await render(hbs` `);
- const iconElement = this.element.querySelector(iconClass);
-
- // then
- assert.ok(iconElement.classList.contains('fa-xmark'));
- assert.notOk(iconElement.classList.contains('fa-plus'));
- });
test('it should trigger action if given one', async function (assert) {
// when
@@ -37,7 +16,7 @@ module('Integration | Component | icon-button', function (hooks) {
this.count = this.count + 1;
});
await render(
- hbs` `,
+ hbs` `,
);
await clickByLabel('action du bouton');
@@ -52,6 +31,7 @@ module('Integration | Component | icon-button', function (hooks) {
//when
await render(hbs` `);
@@ -60,18 +40,4 @@ module('Integration | Component | icon-button', function (hooks) {
const componentElement = this.element.querySelector(COMPONENT_SELECTOR);
assert.true(componentElement.disabled);
});
-
- test('it should not show PixIconButton if ariaLabel is not provided', async function (assert) {
- // given
- const componentParams = { ariaLabel: ' ' };
- const component = createGlimmerComponent('pix-icon-button', componentParams);
-
- // when & then
- const expectedError = new Error(
- 'ERROR in PixIconButton component, @ariaLabel param is not provided.',
- );
- assert.throws(function () {
- component.ariaLabel;
- }, expectedError);
- });
});
From e091f21d574b15bbd248938380de400135eddc93 Mon Sep 17 00:00:00 2001
From: Xavier Carron <33637571+xav-car@users.noreply.github.com>
Date: Fri, 4 Oct 2024 21:28:38 +0200
Subject: [PATCH 05/15] feat(pix-modal) update icon delcaration
---
addon/components/pix-modal.hbs | 2 +-
tests/integration/components/pix-modal-test.js | 4 ++--
2 files changed, 3 insertions(+), 3 deletions(-)
diff --git a/addon/components/pix-modal.hbs b/addon/components/pix-modal.hbs
index 33df98075..476f90ec6 100644
--- a/addon/components/pix-modal.hbs
+++ b/addon/components/pix-modal.hbs
@@ -15,7 +15,7 @@