feat(icon): add PixIcon Component

addon/components/pix-icon.hbs

@@ -0,0 +1,6 @@
+<img
+  src="../@1024pix/pix-ui/svg/pix-sprite.svg#{{this.iconName}}"
+  alt={{this.alternativeText}}
+  aria-hidden={{this.ariaHidden}}
+  ...attributes
+/>

addon/components/pix-icon.js

@@ -0,0 +1,45 @@
+import Component from '@glimmer/component';
+import { warn } from '@ember/debug';
+import { ICONS } from '@1024pix/pix-ui/helpers/icons';
+
+export default class PixIcon extends Component {
+  get alternativeText() {
+    return this.args.alternativeText || '';
+  }
+
+  get ariaHidden() {
+    warn(
+      'PixIcon: @ariaHidden must be a true or nothing',
+      [true, false, null, undefined].includes(this.args.ariaHidden),
+      {
+        id: 'pix-ui.icon.aria-hidden.not-boolean',
+      },
+    );
+    console.log(this.args.ariaHidden);
+    return this.args.ariaHidden ? 'true' : undefined;
+  }
+
+  get iconName() {
+    warn(
+      `PixIcon: @name must be one of these : ${Object.keys(ICONS).join(' | ')}`,
+      Object.keys(ICONS).includes(this.args.name),
+      {
+        id: 'pix-ui.icon.not-valid',
+      },
+    );
+
+    warn(
+      'PixIcon: @plainIcon must be a boolean, default undefined',
+      [true, false, undefined, null].includes(this.args.plainIcon),
+      {
+        id: 'pix-ui.icon.plan-icon.not-boolean',
+      },
+    );
+
+    const icon = ICONS[this.args.name];
+
+    if (!icon) return null;
+
+    return this.args.plainIcon && Boolean(icon.plainIcon) ? icon.plainIcon : icon.default;
+  }
+}

addon/helpers/icons.js

@@ -0,0 +1,77 @@
+export const ICONS = {
+  add: { default: 'add' },
+  arrowDown: { default: 'arrow_downward' },
+  arrowLeft: { default: 'arrow_back' },
+  arrowRight: { default: 'arrow_forward' },
+  arrowUp: { default: 'arrow_upward' },
+  assignment: { default: 'assignment', plainIcon: 'assignment_plainIcon' },
+  awards: { default: 'social_leaderboard', plainIcon: 'social_leaderboard_plainIcon' },
+  book: { default: 'menu_book', plainIcon: 'menu_book_plainIcon' },
+  bookmark: { default: 'bookmark', plainIcon: 'bookmark_plainIcon' },
+  buildings: { default: 'location_city' },
+  campaign: { default: 'campaign', plainIcon: 'campaign_plainIcon' },
+  cancel: { default: 'cancel', plainIcon: 'cancel_plainIcon' },
+  check: { default: 'check' },
+  checkCircle: { default: 'check_circle', plainIcon: 'check_circle_plainIcon' },
+  chevronDown: { default: 'arrow_drop_down' },
+  chevronLeft: { default: 'chevron_left' },
+  chevronRight: { default: 'chevron_right' },
+  chevronUp: { default: 'arrow_drop_up' },
+  close: { default: 'close' },
+  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' },
+  favorite: { default: 'favorite', plainIcon: 'favorite_plainIcon' },
+  flag: { default: 'flag', plainIcon: 'flag_plainIcon' },
+  globe: { default: 'globe' },
+  help: { default: 'help', plainIcon: 'help_plainIcon' },
+  home: { default: 'home', plainIcon: 'home_plainIcon' },
+  image: { default: 'image', plainIcon: 'image_plainIcon' },
+  info: { default: 'info', plainIcon: 'info_plainIcon' },
+  infoUser: { default: 'contact_page', plainIcon: 'contact_page_plainIcon' },
+  inventory: { default: 'inventory_2', plainIcon: 'inventory_2_plainIcon' },
+  language: { default: 'language' },
+  left: { default: 'arrow_back_ios' },
+  link: { default: 'link' },
+  lock: { default: 'lock', plainIcon: 'lock_plainIcon' },
+  mapPin: { default: 'location_on', plainIcon: 'location_on_plainIcon' },
+  minus: { default: 'check_indeterminate_small' },
+  moreHoriz: { default: 'more_horiz' },
+  moreVert: { default: 'more_vert' },
+  newRealease: { default: 'new_releases', plainIcon: 'new_releases_plainIcon' },
+  openNew: { default: 'open_in_new' },
+  pauseCircle: { default: 'pause_circle', plainIcon: 'pause_circle_plainIcon' },
+  playCircle: { default: 'play_circle', plainIcon: 'play_circle_plainIcon' },
+  power: { default: 'power_settings_new' },
+  readMore: { default: 'read_more' },
+  refresh: { default: 'refresh' },
+  right: { default: 'arrow_forward_ios' },
+  search: { default: 'search' },
+  seat: { default: 'airline_seat_recline_normal' },
+  session: { default: 'event_note', plainIcon: 'event_note_plainIcon' },
+  settings: { default: 'settings', plainIcon: 'settings_plainIcon' },
+  share: { default: 'share', plainIcon: 'share_plainIcon' },
+  shieldPerson: { default: 'shield_person', plainIcon: 'shield_person_plainIcon' },
+  signpost: { default: 'signpost', plainIcon: 'signpost_plainIcon' },
+  smartphone: { default: 'smartphone', plainIcon: 'smartphone_plainIcon' },
+  sort: { default: 'swap_vert' },
+  star: { default: 'star', plainIcon: 'star_plainIcon' },
+  stopCircle: { default: 'stop_circle', plainIcon: 'stop_circle_plainIcon' },
+  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' },
+  userCircle: { default: 'account_circle', plainIcon: 'account_circle_plainIcon' },
+  users: { default: 'group', plainIcon: 'group_plainIcon' },
+  volumeOff: { default: 'volume_off', plainIcon: 'volume_off_plainIcon' },
+  volumeOn: { default: 'volume_up', plainIcon: 'volume_up_plainIcon' },
+  warning: { default: 'warning', plainIcon: 'warning_plainIcon' },
+};

app/components/pix-icon.js

@@ -0,0 +1 @@
+export { default } from '@1024pix/pix-ui/components/pix-icon';

app/stories/pix-icon.mdx

@@ -0,0 +1,20 @@
+import { Meta, Story, ArgTypes } from '@storybook/blocks';
+import * as ComponentStories from './pix-icon.stories';
+
+<Meta of={ComponentStories} />
+
+# Pix Icon
+
+> Permet d'utiliser les icônes disponible du Design System.
+
+<Story of={ComponentStories.icon} height={60} />
+
+## Usage
+
+```html
+  <PixIcon @name="powerSettings", @plainIcon={{true}} />
+```
+
+## Arguments
+
+<ArgTypes of={ComponentStories} />

app/stories/pix-icon.stories.js

@@ -0,0 +1,51 @@
+import { hbs } from 'ember-cli-htmlbars';
+import { ICONS } from '../../addon/helpers/icons.js';
+
+export default {
+  title: 'Others/Icon',
+  argTypes: {
+    name: {
+      name: 'name',
+      description: "Nom de l'icône à utiliser",
+      type: { name: 'string', required: true },
+      control: { type: 'select' },
+      options: Object.keys(ICONS),
+    },
+    plainIcon: {
+      name: 'plainIcon',
+      description: "Permet d'utiliser la version pleine de l'icône",
+      control: { type: 'boolean' },
+      type: { name: 'boolean', required: false },
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    alternativeText: {
+      name: 'alternativeText',
+      description: "Permet d'ajouter un texte alternatif pour illustrer l'icône si besoin",
+      type: { name: 'string', required: false },
+    },
+    ariaHidden: {
+      name: 'ariaHidden',
+      description:
+        "Permet de ne pas vocaliser l'icône au lecteur d'écran dans le cas d'une icône purement décorative.",
+      control: { type: 'boolean' },
+      type: { name: 'boolean', required: false },
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+  },
+};
+
+export const icon = (args) => ({
+  template: hbs`<PixIcon
+  @name={{this.name}}
+  @plainIcon={{this.plainIcon}}
+  @alternativeText={{this.alternativeText}}
+  @ariaHidden={{this.ariaHidden}}
+/>`,
+  context: args,
+});

docs/update-sprites.mdx

@@ -0,0 +1,22 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Développement/Mis à jour du sprite.svg" />
+
+# Mise à jour du Sprites SVG
+
+## Récupération des nouveaux svg flat ( pas de téléchargement via Figma ou autre outils )
+
+La commande suivante permet de renommer les svgs si leur nom sont trop long :
+(actuellement Material Design export un SVG contenant toutes ses propriétés dans le nom, ce qui n'est pas util, surtout que le nom du fichier est utilisé pour générer un id dans le sprite)
+
+```shell
+./scripts/rename_svg_before_sprite.sh
+```
+
+Ensuite générer le `sprite.css.svg`
+
+```shell
+npm run svg:generate-sprite:no-cache
+```
+
+Effectuer le re-mapping des icons dans le composant `pix-icon` si besoin.