chore: update icons and remove mappings to removed design icons (#1827)

* chore: update icons and remove mappings to removed design icons * chore: add validation of icon script --------- Co-authored-by: James Nestor <[email protected]>
momentum-design · Nov 18, 2024 · 0496505 · 0496505
1 parent 66dca5a
commit 0496505
Show file tree

Hide file tree

Showing 12 changed files with 190 additions and 87 deletions.
diff --git a/web-components/package.json b/web-components/package.json
@@ -35,7 +35,8 @@
     "eslint": "eslint --ext .ts,.js ./src --ignore-path .eslintignore",
     "eslint:fix": "eslint --ext .ts,.js ./src --ignore-path .eslintignore --fix",
     "create-package": "node -e 'require(\"./publish-conf\").createPackageJson()'",
-    "notify": "node -e 'require(\"./publish-conf\").notify()'"
+    "notify": "node -e 'require(\"./publish-conf\").notify()'",
+    "validateIconMapping": "node ./src/utils/validateIconMapping.js"
   },
   "resolutions": {
     "jest": "^26.4.2",
@@ -59,7 +60,7 @@
     "@interactjs/modifiers": "1.10.3",
     "@interactjs/utils": "1.10.3",
     "@momentum-design/brand-visuals": "0.1.2",
-    "@momentum-design/icons": "0.2.1",
+    "@momentum-design/icons": "0.7.0",
     "@momentum-design/tokens": "0.2.6",
     "@popperjs/core": "^2.11.8",
     "country-codes-list": "1.6.8",

diff --git a/web-components/src/[sandbox]/examples/alert.ts b/web-components/src/[sandbox]/examples/alert.ts
@@ -15,7 +15,7 @@ export const alertTemplate = html`
   <md-alert title="Error" message="Who's awesome? You are!" type="error" closable show></md-alert>
   <md-alert message="Who's awesome? You are!" show closable>
     <md-badge slot="alert-icon" color="darkmint" circle>
-      <md-icon name="social-sms" size="16" iconSet="momentumDesign" color="var(--md-white-text-color)"></md-icon>
+      <md-icon name="sms-filled" size="16" iconSet="momentumDesign" color="var(--md-white-text-color)"></md-icon>
     </md-badge>
   </md-alert>
   <md-alert message="Who's awesome? You are!" show>

diff --git a/web-components/src/[sandbox]/examples/badge.ts b/web-components/src/[sandbox]/examples/badge.ts
@@ -35,7 +35,7 @@ export const badgeTemplate = html`
     <md-icon name="chat-active_16"></md-icon>
   </md-badge>
   <md-badge color="mint" circle>
-    <md-icon name="social-sms" size="16" iconSet="momentumDesign"></md-icon>
+    <md-icon name="sms-filled" size="16" iconSet="momentumDesign"></md-icon>
   </md-badge>
 
   <h4 class="sandbox-header">Large Badges</h4>

diff --git a/web-components/src/[sandbox]/examples/icon.ts b/web-components/src/[sandbox]/examples/icon.ts
@@ -63,4 +63,10 @@ export const iconTemplate = html`
     size="32"
   ></md-icon>
   <md-icon name="social-x" iconSet="momentumBrandVisuals" title="X" size="32"></md-icon>
+
+  <h3>Icons moved to brand visuals preferMomentumDesign uses momentumUI</h3>
+  <md-icon name="twitter_16" iconSet="preferMomentumDesign" title="twitter_16"></md-icon>
+  <md-icon name="facebook_16" iconSet="preferMomentumDesign" title="facebook_16"></md-icon>
+  <md-icon name="whatsApp_16" iconSet="preferMomentumDesign" title="whatsApp_16"></md-icon>
+  <br />
 `;
diff --git a/web-components/src/[sandbox]/examples/task-item.ts b/web-components/src/[sandbox]/examples/task-item.ts
@@ -16,6 +16,7 @@ export const taskItemTemplate = html`
     >
       <div>01:08:00</div>
     </md-task-item>
+
     <md-task-item
       mediaType="outbound telephony"
       status="hold"
@@ -27,6 +28,7 @@ export const taskItemTemplate = html`
     >
       <div>01:08:00</div>
     </md-task-item>
+
     <md-task-item
       mediaType="inbound telephony"
       status="transfered"
@@ -38,6 +40,7 @@ export const taskItemTemplate = html`
     >
       <div>01:08:00</div>
     </md-task-item>
+
     <md-task-item
       mediaType="midcall telephony"
       title="MediaType: midcall telephony"
@@ -49,6 +52,7 @@ export const taskItemTemplate = html`
     >
       <div>01:08:00</div>
     </md-task-item>
+
     <md-task-item
       mediaType="callback"
       status="campaign"
@@ -60,6 +64,7 @@ export const taskItemTemplate = html`
     >
       <div>01:08:00</div>
     </md-task-item>
+
     <md-task-item
       mediaType="progressive_campaign"
       title="Media Type progressive_campaign"
@@ -69,29 +74,63 @@ export const taskItemTemplate = html`
     >
       <div>01:08:00</div>
     </md-task-item>
-    <md-task-item mediaType="email" status="play" title="[email protected]" item-title="[email protected]" queue="IRV_quelle_12" selected>
+
+    <md-task-item
+      mediaType="email"
+      status="play"
+      title="[email protected]"
+      item-title="[email protected]"
+      queue="IRV_quelle_12"
+      selected
+    >
       <div>00:08</div>
     </md-task-item>
-    <md-task-item mediaType="telephony" status="consulting" title="Mihael Varificantare" item-title="Mihael Varificantare" queue="IRV_quelle_11">
+
+    <md-task-item
+      mediaType="telephony"
+      status="consulting"
+      title="Mihael Varificantare"
+      item-title="Mihael Varificantare"
+      queue="IRV_quelle_11"
+    >
       <div>Ringing</div>
     </md-task-item>
-    <md-task-item mediaType="messenger" title="Mihael Varificantare" item-title="Mihael Varificantare" queue="IRV_quelle_11">
+
+    <md-task-item
+      mediaType="messenger"
+      title="Mihael Varificantare"
+      item-title="Mihael Varificantare"
+      queue="IRV_quelle_11"
+    >
       <div>Ringing</div>
     </md-task-item>
-    <md-task-item mediaType="whatsApp" title="Mihael Varificantare" item-title="Mihael Varificantare" queue="IRV_quelle_11">
+
+    <md-task-item
+      mediaType="whatsApp"
+      title="Mihael Varificantare"
+      item-title="Mihael Varificantare"
+      queue="IRV_quelle_11"
+    >
       <div>01:10:25</div>
     </md-task-item>
-    <md-task-item mediaType="facebook" title="MediaType: facebook" item-title="Mihael Varificantare" queue="IRV_quelle_11">
+
+    <md-task-item
+      mediaType="facebook"
+      title="MediaType: facebook"
+      item-title="Mihael Varificantare"
+      queue="IRV_quelle_11"
+    >
       <div>01:10:25</div>
     </md-task-item>
+
     <md-task-item mediaType="chat" title="Mihael Varificantare" item-title="Mihael Varificantare" queue="IRV_quelle_11">
       <div>01:10:25</div>
     </md-task-item>
+
     <md-task-item
       mediaType="sms"
       status="courtesy_callback"
-      title="Mihael Varificantare for test text overflow"
-      itemTitle="Mihael Varificantare for test text overflow"
+      item-title="Mihael Varificantare for test text overflow"
       queue="IRV_quelle_1167676776767676asdadadas"
     >
       <md-badge slot="task-type" color="darkmint" circle>

diff --git a/web-components/src/components/alert/Alert.mdx b/web-components/src/components/alert/Alert.mdx
@@ -46,7 +46,7 @@ Any icon can be displayed in the alert by passing the `<md-icon name="_name" col
 ```html
 <md-alert  @alert-close=${(action('dispatchEvent'))} title="Alert Title" message="Alert Message" ?show=${true} ?closable=${true}>
   <md-badge slot="alert-icon" color="darkmint" circle>
-    <md-icon name="social-sms" size="16" iconSet="momentumDesign" color="var(--md-white-text-color)"></md-icon>
+    <md-icon name="sms-filled" size="16" iconSet="momentumDesign" color="var(--md-white-text-color)"></md-icon>
   </md-badge>
 </md-alert>
 ```

diff --git a/web-components/src/components/avatar/scss/avatar.scss b/web-components/src/components/avatar/scss/avatar.scss
@@ -81,7 +81,7 @@
   }
 
   .md-avatar__letter {
-    @include avatar-contents-base;       
+    @include avatar-contents-base;
     background-color: $avatar-letter__background;
     color: $avatar-letter__color;
 

diff --git a/web-components/src/components/icon/Icon.stories.ts b/web-components/src/components/icon/Icon.stories.ts
@@ -6,8 +6,8 @@
  *
  */
 
+import momentumDesignManifest from "@/../node_modules/@momentum-design/icons/dist/manifest.json";
 import "@/components/icon/Icon";
-import momentumDesignManifest from "@momentum-design/icons/dist/manifest.json";
 import iconNames from "@momentum-ui/icons/data/momentumUiIconsNames.json";
 import { action } from "@storybook/addon-actions";
 import { Args } from "@storybook/web-components";

diff --git a/web-components/src/components/icon/momentum-ui-to-design-icons.json b/web-components/src/components/icon/momentum-ui-to-design-icons.json
@@ -310,11 +310,11 @@
   "audio-call_14": "audio-call-bold",
   "audio-call_16": "audio-call-bold",
   "audio-input_16": "input-bold",
-  "audio-options_20": "audio-options-bold",
-  "audio-options_24": "audio-options-bold",
-  "audio-options_28": "audio-options-bold",
-  "audio-options_32": "audio-options-bold",
-  "audio-options_40": "audio-options-bold",
+  "audio-options_20": "incoming-call-legacy-bold",
+  "audio-options_24": "incoming-call-legacy-bold",
+  "audio-options_28": "incoming-call-legacy-bold",
+  "audio-options_32": "incoming-call-legacy-bold",
+  "audio-options_40": "incoming-call-legacy-bold",
   "audio-video_12": "Unknown",
   "audio-video_16": "Unknown",
   "audio-video_20": "Unknown",
@@ -1008,11 +1008,11 @@
   "external-user_12": "external-user-bold",
   "external-user_16": "external-user-bold",
   "external-user_20": "external-user-bold",
-  "facebook_16": "social-facebook",
-  "facebook-blue_12": "social-facebook-colored",
-  "facebook-circle_24": "social-facebook",
-  "facebook-circle_32": "social-facebook",
-  "facebook-circle_40": "social-facebook",
+  "facebook_16": "",
+  "facebook-blue_12": "",
+  "facebook-circle_24": "",
+  "facebook-circle_32": "",
+  "facebook-circle_40": "",
   "facebook-logo_12": "Unknown",
   "favorite_10": "favorite-bold",
   "favorite_12": "favorite-bold",
@@ -1542,8 +1542,8 @@
   "input_28": "input-bold",
   "input_36": "input-bold",
   "input_8": "input-bold",
-  "instagram-circle_24": "social-instagram",
-  "instagram-circle_32": "social-instagram",
+  "instagram-circle_24": "",
+  "instagram-circle_32": "",
   "integrations_16": "integrations-bold",
   "integrations_24": "integrations-bold",
   "invited-user_16": "invited-user-bold",
@@ -1697,8 +1697,8 @@
   "mention_20": "mention-bold",
   "mention_24": "mention-bold",
   "mention_8": "mention-bold",
-  "messenger_12": "social-fbmessenger",
-  "messenger_16": "social-fbmessenger",
+  "messenger_12": "",
+  "messenger_16": "",
   "microphone_10": "microphone-bold",
   "microphone_12": "microphone-bold",
   "microphone_14": "microphone-bold",
@@ -2025,12 +2025,12 @@
   "pause-circle_24": "record-paused-bold",
   "pause-circle-active_16": "record-paused-filled",
   "pause-circle-active_24": "record-paused-filled",
-  "pen_12": "pen-bold",
-  "pen_14": "pen-bold",
-  "pen_16": "pen-bold",
-  "pen_18": "pen-bold",
-  "pen_24": "pen-bold",
-  "pen_8": "pen-bold",
+  "pen_12": "edit-bold",
+  "pen_14": "edit-bold",
+  "pen_16": "edit-bold",
+  "pen_18": "edit-bold",
+  "pen_24": "edit-bold",
+  "pen_8": "edit-bold",
   "people_10": "people-bold",
   "people_12": "people-bold",
   "people_120": "people-bold",
@@ -2329,26 +2329,26 @@
   "record-active_16": "record-filled",
   "record-active_20": "record-active-bold",
   "record-active_24": "record-active-bold",
-  "record-active-bg_12": "record-active-colored-b-bold",
-  "record-active-bg_14": "record-active-colored-b-bold",
-  "record-active-bg_16": "record-active-colored-b-bold",
-  "record-active-bg_20": "record-active-colored-b-bold",
-  "record-active-bg_24": "record-active-colored-b-bold",
-  "record-active-circle_12": "record-active-colored-a-bold",
-  "record-active-circle_14": "record-active-colored-a-bold",
-  "record-active-circle_16": "record-active-colored-a-bold",
-  "record-active-circle_20": "record-active-colored-a-bold",
-  "record-active-circle_24": "record-active-colored-a-bold",
+  "record-active-bg_12": "",
+  "record-active-bg_14": "",
+  "record-active-bg_16": "",
+  "record-active-bg_20": "",
+  "record-active-bg_24": "",
+  "record-active-circle_12": "",
+  "record-active-circle_14": "",
+  "record-active-circle_16": "",
+  "record-active-circle_20": "",
+  "record-active-circle_24": "",
   "recurring_12": "recurring-bold",
   "recurring_14": "recurring-bold",
   "recurring_16": "recurring-bold",
   "recurring_20": "recurring-bold",
   "recurring_24": "recurring-bold",
   "recurring-off_12": "recurring-off-bold",
   "recurring-off_16": "recurring-off-bold",
-  "redial_16": "redial-bold",
-  "redial_20": "redial-bold",
-  "redial_24": "redial-bold",
+  "redial_16": "refresh-bold",
+  "redial_20": "refresh-bold",
+  "redial_24": "refresh-bold",
   "redo_12": "redo-bold",
   "redo_14": "redo-bold",
   "redo_16": "redo-bold",
@@ -2600,8 +2600,8 @@
   "skip-bw_24": "skip-bw-bold",
   "skip-fw_16": "skip-fw-bold",
   "skip-fw_24": "skip-fw-bold",
-  "sms_12": "social-sms",
-  "sms_16": "social-sms",
+  "sms_12": "sms-filled",
+  "sms_16": "sms-filled",
   "sort-down_12": "unsorted-bold",
   "sort-down_16": "sort-descending-bold",
   "sort-down_20": "sort-descending-bold",
@@ -2674,7 +2674,7 @@
   "spreadsheet_16": "file-spreadsheet-bold",
   "stacked-area-100-chart_16": "stacked-area-chart-full-bold",
   "stacked-area-chart_16": "stacked-area-chart-bold",
-  "stacked-bar-100-chart_16": "stacked-bar-chart-full-bold:",
+  "stacked-bar-100-chart_16": "stacked-bar-chart-full-bold",
   "stacked-bar-chart_16": "stacked-bar-chart-bold",
   "start-chat_20": "start-chat-bold",
   "start-chat_24": "start-chat-bold",
@@ -2737,13 +2737,13 @@
   "tasks_32": "check-bold",
   "tasks_36": "check-bold",
   "tasks_8": "check-bold",
-  "team_12": "webex-teams-filled",
-  "team_14": "webex-teams-filled",
-  "team_16": "webex-teams-filled",
-  "team_18": "webex-teams-filled",
-  "team_20": "webex-teams-filled",
-  "team_24": "webex-teams-filled",
-  "team_32": "webex-teams-filled",
+  "team_12": "meetings-team-bold",
+  "team_14": "meetings-team-bold",
+  "team_16": "meetings-team-bold",
+  "team_18": "meetings-team-bold",
+  "team_20": "meetings-team-bold",
+  "team_24": "meetings-team-bold",
+  "team_32": "meetings-team-bold",
   "team-active_12": "meetings-team-filled",
   "team-active_14": "meetings-team-filled",
   "team-active_16": "meetings-team-filled",
@@ -2837,11 +2837,11 @@
   "transcript_16": "transcript-bold",
   "transcript_20": "transcript-bold",
   "trending_10": "trending-bold",
-  "twitter_12": "social-x",
-  "twitter_16": "social-x",
-  "twitter-circle_24": "social-x",
-  "twitter-circle_32": "social-x",
-  "twitter-circle_40": "social-x",
+  "twitter_12": "",
+  "twitter_16": "",
+  "twitter-circle_24": "",
+  "twitter-circle_32": "",
+  "twitter-circle_40": "",
   "ucm-cloud_10": "ucm-cloud-bold",
   "ucm-cloud_16": "ucm-cloud-bold",
   "ucm-cloud_24": "ucm-cloud-bold",
@@ -3045,10 +3045,10 @@
   "webpop_16": "info-circle-bold",
   "webpop_20": "info-circle-bold",
   "webpop_24": "info-circle-bold",
-  "whatsApp_12": "social-whatsapp",
-  "whatsApp_16": "social-whatsapp",
-  "whatsapp-outline_12": "social-whatsapp",
-  "whatsapp-outline_16": "social-whatsapp",
+  "whatsApp_12": "",
+  "whatsApp_16": "",
+  "whatsapp-outline_12": "",
+  "whatsapp-outline_16": "",
   "whiteboard_10": "whiteboard-bold",
   "whiteboard_12": "whiteboard-bold",
   "whiteboard_14": "whiteboard-bold",
@@ -3069,7 +3069,7 @@
   "wifi_24": "wifi-bold",
   "wifi-error_12": "wifi-error-bold",
   "wifi-error_16": "wifi-error-bold",
-  "wifi-selected_24": "wifi-filled",
+  "wifi-selected_24": "Unknown",
   "wikipedia_16": "Unknown",
   "window-corner-scrub_16": "window-corner-scrub-bold",
   "window-vertical-scrub_16": "window-vertical-scrub-bold",