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}}