feat(icon): add optimized & renamed icons

Signed-off-by: Stagnol <[email protected]>

packages/ods/react/tests/_app/src/components/ods-icon.tsx

@@ -4,7 +4,7 @@ import { OdsIcon } from 'ods-components-react';
 
 const Icon = () => {
   return (
-    <OdsIcon name={ ODS_ICON_NAME.add } />
+    <OdsIcon name={ ODS_ICON_NAME.plus } />
   );
 };
 

packages/ods/src/components/badge/src/components/ods-badge/ods-badge.scss

@@ -35,20 +35,24 @@
       @include badge.ods-badge-size('sm');
 
       & #{$badge}__icon {
-        font-size: 0.875rem;
+        font-size: 0.625rem;
       }
     }
 
     &--md {
       @include badge.ods-badge-size('md');
 
       & #{$badge}__icon {
-        font-size: 1rem;
+        font-size: 0.833rem;
       }
     }
 
     &--lg {
       @include badge.ods-badge-size('lg');
+
+      & #{$badge}__icon {
+        font-size: 1.05rem;
+      }
     }
 
     &__label {

packages/ods/src/components/clipboard/src/components/ods-clipboard/ods-clipboard.scss

@@ -25,6 +25,7 @@
       padding: input.$ods-input-actions-padding-right;
       width: input.$ods-input-actions-button-width;
       height: input.$ods-input-actions-button-width;
+      font-size: 0.833rem;
     }
   }
 

packages/ods/src/components/clipboard/src/components/ods-clipboard/ods-clipboard.tsx

@@ -58,7 +58,7 @@ export class OdsClipboard {
 
         <ods-button
           class="ods-clipboard__copy"
-          icon={ ODS_ICON_NAME.filesCopy }
+          icon={ ODS_ICON_NAME.fileCopy }
           id={ this.copyButtonId }
           isDisabled={ this.isDisabled }
           label=""

packages/ods/src/components/code/src/components/ods-code/ods-code.scss

@@ -30,6 +30,7 @@ $ods-code-secondary-color: #000;
   &__copy::part(button) {
     height: input.$ods-input-input-height;
     color: $ods-code-primary-color;
+    font-size: 0.833rem;
 
     &:hover {
       background-color: var(--ods-color-neutral-600);

packages/ods/src/components/code/src/components/ods-code/ods-code.tsx

@@ -39,7 +39,7 @@ export class OdsCode {
           this.canCopy &&
           <ods-button
             class="ods-code__copy"
-            icon={ ODS_ICON_NAME.filesCopy }
+            icon={ ODS_ICON_NAME.fileCopy }
             label=""
             onClick={ () => this.copy() }
             variant={ ODS_BUTTON_VARIANT.ghost }>

packages/ods/src/components/icon/src/constants/icon-name.ts

@@ -1,5 +1,4 @@
 enum ODS_ICON_NAME {
-  add = 'add',
   apps = 'apps',
   arrowCrossed = 'arrow-crossed',
   arrowDownLeft = 'arrow-down-left',
@@ -18,131 +17,132 @@ enum ODS_ICON_NAME {
   book = 'book',
   calendar = 'calendar',
   chat = 'chat',
+  checkCircle = 'check-circle',
+  checkSquare = 'check-square',
   check = 'check',
-  checkboxIndeterminate = 'checkbox-indeterminate',
-  checkbox = 'checkbox',
+  chevronDoubleLeft = 'chevron-double-left',
+  chevronDoubleRight = 'chevron-double-right',
   chevronDown = 'chevron-down',
   chevronLeft = 'chevron-left',
   chevronRight = 'chevron-right',
   chevronUp = 'chevron-up',
   chrono = 'chrono',
   circle = 'circle',
+  clockTimeFour = 'clock-time-four',
+  clockTimeNine = 'clock-time-nine',
+  clockTimeSix = 'clock-time-six',
+  clockTimeThree = 'clock-time-three',
+  clockTimeTwelve = 'clock-time-twelve',
   cloudCheck = 'cloud-check',
-  cloudCross = 'cloud-cross',
-  cloudDown = 'cloud-down',
-  cloudLockFill = 'cloud-lock-fill',
-  cloudUp = 'cloud-up',
+  cloudDownload = 'cloud-download',
+  cloudLock = 'cloud-lock',
+  cloudTimes = 'cloud-times',
+  cloudUpload = 'cloud-upload',
   cloud = 'cloud',
+  cog = 'cog',
   collab = 'collab',
   component = 'component',
-  criticalFull = 'critical-full',
-  critical = 'critical',
-  cross = 'cross',
+  creditCard = 'credit-card',
+  criticalHexagonFull = 'critical-hexagon-full',
+  criticalHexagon = 'critical-hexagon',
   dPad = 'd-pad',
-  dangerFull = 'danger-full',
-  danger = 'danger',
-  delivery = 'delivery',
+  dangerDiamondFull = 'danger-diamond-full',
+  dangerDiamond = 'danger-diamond',
+  desktop = 'desktop',
   diamond = 'diamond',
-  doubleChevronLeft = 'double-chevron-left',
-  doubleChevronRight = 'double-chevron-right',
+  dotCircle = 'dot-circle',
   download = 'download',
+  ellipsisHorizontal = 'ellipsis-horizontal',
+  ellipsisVertical = 'ellipsis-vertical',
   email = 'email',
+  emoticonDizzy = 'emoticon-dizzy',
+  emoticonNeutral = 'emoticon-neutral',
+  emoticonSad = 'emoticon-sad',
+  emoticonSmile = 'emoticon-smile',
+  emoticonWink = 'emoticon-wink',
+  emoticon = 'emoticon',
   equal = 'equal',
   errorCircle = 'error-circle',
   externalLink = 'external-link',
-  eyeClose = 'eye-close',
-  eyeOpen = 'eye-open',
-  faceActivated = 'face-activated',
-  faceDissatisfied = 'face-dissatisfied',
-  faceDizzy = 'face-dizzy',
-  faceNeutral = 'face-neutral',
-  faceSatisfied = 'face-satisfied',
-  faceWink = 'face-wink',
+  eyeOff = 'eye-off',
+  eye = 'eye',
+  fileCopy = 'file-copy',
   fileMinus = 'file-minus',
   filePlus = 'file-plus',
   file = 'file',
-  filesCopy = 'files-copy',
   filter = 'filter',
   focus = 'focus',
   folderMinus = 'folder-minus',
   folderPlus = 'folder-plus',
   folder = 'folder',
-  gameControlerA = 'game-controler-a',
-  gameControlerB = 'game-controler-b',
-  gameboy = 'gameboy',
+  gameConsole = 'game-console',
+  gameControllerAlt = 'game-controller-alt',
+  gameController = 'game-controller',
   gathering = 'gathering',
-  gear = 'gear',
   globe = 'globe',
   grid = 'grid',
-  helpCircle = 'help-circle',
-  help = 'help',
+  hamburgerMenu = 'hamburger-menu',
   hexagon = 'hexagon',
   hierarchy = 'hierarchy',
   home = 'home',
   infoCircle = 'info-circle',
   key = 'key',
-  labsBetween = 'labs-between',
   labsEmpty = 'labs-empty',
   labsFull = 'labs-full',
+  labsHalf = 'labs-half',
   leaf = 'leaf',
-  lifeBuoy = 'life-buoy',
+  lifeBuoy = 'lifebuoy',
   lightbulb = 'lightbulb',
   list = 'list',
   location = 'location',
-  menuEllipsisHorizontal = 'menu-ellipsis-horizontal',
-  menuEllipsisVertical = 'menu-ellipsis-vertical',
-  menuHamburger = 'menu-hamburger',
+  lockClose = 'lock-close',
+  lockOpen = 'lock-open',
+  minusSquare = 'minus-square',
   minus = 'minus',
   money = 'money',
   network = 'network',
-  padlockClose = 'padlock-close',
-  padlockOpen = 'padlock-open',
   pen = 'pen',
   phone = 'phone',
+  plus = 'plus',
   printer = 'printer',
   product3az = 'product-3az',
   promotion = 'promotion',
-  purchase = 'purchase',
+  questionCircle = 'question-circle',
+  question = 'question',
   radio = 'radio',
   refresh = 'refresh',
   resize = 'resize',
-  screen = 'screen',
   search = 'search',
   share = 'share',
   shieldCheck = 'shield-check',
-  shieldCross = 'shield-cross',
   shieldFirewall = 'shield-firewall',
-  shieldLockFill = 'shield-lock-fill',
+  shieldLock = 'shield-lock',
   shieldMinus = 'shield-minus',
   shieldOff = 'shield-off',
   shieldPlus = 'shield-plus',
+  shieldTimes = 'shield-times',
   shieldWarning = 'shield-warning',
   shield = 'shield',
-  shoppingCartAdd = 'shopping-cart-add',
   shoppingCartClear = 'shopping-cart-clear',
   shoppingCartError = 'shopping-cart-error',
   shoppingCartMinus = 'shopping-cart-minus',
+  shoppingCartPlus = 'shopping-cart-plus',
   shoppingCart = 'shopping-cart',
   shrink = 'shrink',
   shutdown = 'shutdown',
   sortAlphaDown = 'sort-alpha-down',
   sortAlphaUp = 'sort-alpha-up',
-  sortNumDown = 'sort-num-down',
-  sortNumUp = 'sort-num-up',
+  sortNumericDown = 'sort-numeric-down',
+  sortNumericUp = 'sort-numeric-up',
   square = 'square',
-  starFilled = 'star-filled',
+  starFull = 'star-full',
   star = 'star',
-  status = 'status',
   store = 'store',
-  successCircle = 'success-circle',
-  time0am = 'time-0am',
-  time3am = 'time-3am',
-  time4am = 'time-4am',
-  time6am = 'time-6am',
-  time9am = 'time-9am',
+  times = 'times',
   trafficCone = 'traffic-cone',
   trash = 'trash',
   triangle = 'triangle',
+  truck = 'truck',
   undo = 'undo',
   upload = 'upload',
   userCircle = 'user-circle',

packages/ods/src/components/icon/tests/rendering/ods-icon.e2e.ts

@@ -29,7 +29,7 @@ describe('ods-icon rendering', () => {
     it('should render with custom style applied', async() => {
       const customHeight = 200;
 
-      await setup(`<ods-icon name="${ODS_ICON_NAME.add}"></ods-icon>`, `ods-icon { height: ${customHeight}px; }`);
+      await setup(`<ods-icon name="${ODS_ICON_NAME.plus}"></ods-icon>`, `ods-icon { height: ${customHeight}px; }`);
 
       const elStyle = await el.getComputedStyle();
       expect(parseInt(elStyle.getPropertyValue('height'), 10)).toBe(customHeight);

packages/ods/src/components/input/src/components/ods-input/ods-input.scss

@@ -44,6 +44,7 @@
 
     &__clearable {
       color: var(--ods-color-neutral-600);
+      font-size: 0.75rem;
 
       &:not(:disabled, &--readonly) {
         &:hover {
@@ -58,6 +59,7 @@
 
     &__toggle-mask {
       color: var(--ods-color-neutral-600);
+      font-size: 0.833rem;
 
       &:not(:disabled) {
         color: var(--ods-color-primary-500);

packages/ods/src/components/input/src/components/ods-input/ods-input.tsx

@@ -157,7 +157,7 @@ export class OdsInput {
               disabled={ this.isDisabled || this.isReadonly }
               onClick={ this.clear.bind(this) }
               onKeyUp={ (event: KeyboardEvent): Promise<void> => handleKeySpace(event, this.isDisabled, this.clear.bind(this)) }>
-              <ods-icon name={ ODS_ICON_NAME.cross }>
+              <ods-icon name={ ODS_ICON_NAME.times }>
               </ods-icon>
             </button>
           }
@@ -171,7 +171,7 @@ export class OdsInput {
               disabled={ this.isDisabled }
               onClick={ this.toggleMask.bind(this) }
               onKeyUp={ (event: KeyboardEvent): Promise<void> => handleKeySpace(event, this.isDisabled, this.toggleMask.bind(this)) }>
-              <ods-icon name={ this.isMasked ? ODS_ICON_NAME.eyeClose : ODS_ICON_NAME.eyeOpen }>
+              <ods-icon name={ this.isMasked ? ODS_ICON_NAME.eyeOff : ODS_ICON_NAME.eye }>
               </ods-icon>
             </button>
           }

packages/ods/src/components/message/src/components/ods-message/ods-message.scss

@@ -14,7 +14,8 @@
     @include message.ods-message();
 
     &__icon {
-      font-size: 1.5rem;
+      padding: 0.125rem;
+      font-size: 1.25rem;
     }
 
     slot:not([name]) {
@@ -34,7 +35,7 @@
       width: 1.5rem;
       min-width: 1.5rem;
       height: 1.5rem;
-      font-size: 1rem;
+      font-size: 0.75rem;
 
       &:focus-visible {
         @include focus.ods-focus();

packages/ods/src/components/message/src/components/ods-message/ods-message.tsx

@@ -45,7 +45,7 @@ export class OdsMessage {
             class={ `ods-message__message__close ods-message__message__close--${this.color}` }
             onClick={ () => this.handleClick() }
             onKeyUp={ (event: KeyboardEvent) => this.handleKeyUp(event) }>
-            <ods-icon name={ ODS_ICON_NAME.cross }>
+            <ods-icon name={ ODS_ICON_NAME.times }>
             </ods-icon>
           </button>
         </div>

packages/ods/src/components/message/src/controller/ods-message.ts

@@ -6,13 +6,13 @@ import { ODS_MESSAGE_COLOR } from '../constants/message-color';
 function getIconName(color: OdsMessageColor): OdsIconName {
   switch (color) {
     case ODS_MESSAGE_COLOR.critical:
-      return ODS_ICON_NAME.critical;
+      return ODS_ICON_NAME.criticalHexagon;
     case ODS_MESSAGE_COLOR.danger:
-      return ODS_ICON_NAME.danger;
+      return ODS_ICON_NAME.dangerDiamond;
     case ODS_MESSAGE_COLOR.information:
       return ODS_ICON_NAME.infoCircle;
     case ODS_MESSAGE_COLOR.success:
-      return ODS_ICON_NAME.successCircle;
+      return ODS_ICON_NAME.checkCircle;
     case ODS_MESSAGE_COLOR.warning:
       return ODS_ICON_NAME.warningTriangle;
     default:

packages/ods/src/components/message/tests/controller/ods-message.spec.ts

@@ -9,12 +9,12 @@ describe('ods-message controller', () => {
   describe('getIconName', () => {
     it('should return the correct icon for critical', () => {
       const iconName = getIconName('critical');
-      expect(iconName).toBe(ODS_ICON_NAME.critical);
+      expect(iconName).toBe(ODS_ICON_NAME.criticalHexagon);
     });
 
     it('should return the correct icon for danger', () => {
       const iconName = getIconName('danger');
-      expect(iconName).toBe(ODS_ICON_NAME.danger);
+      expect(iconName).toBe(ODS_ICON_NAME.dangerDiamond);
     });
 
     it('should return the correct icon for information', () => {
@@ -24,7 +24,7 @@ describe('ods-message controller', () => {
 
     it('should return the correct icon for success', () => {
       const iconName = getIconName('success');
-      expect(iconName).toBe(ODS_ICON_NAME.successCircle);
+      expect(iconName).toBe(ODS_ICON_NAME.checkCircle);
     });
 
     it('should return the correct icon for warning', () => {

packages/ods/src/components/message/tests/rendering/ods-message.e2e.ts

@@ -34,15 +34,15 @@ describe('ods-message rendering', () => {
     it('should render critical icon', async() => {
       await setup(`<ods-message color="${ODS_MESSAGE_COLOR.critical}"></ods-message>`);
 
-      const criticalIcon = await message.find('ods-icon[name="critical"]');
+      const criticalIcon = await message.find('ods-icon[name="critical-hexagon"]');
 
       expect(criticalIcon).not.toBeNull();
     });
 
     it('should render danger icon', async() => {
       await setup(`<ods-message color="${ODS_MESSAGE_COLOR.danger}"></ods-message>`);
 
-      const dangerIcon = await message.find('ods-icon[name="danger"]');
+      const dangerIcon = await message.find('ods-icon[name="danger-diamond"]');
 
       expect(dangerIcon).not.toBeNull();
     });
@@ -58,7 +58,7 @@ describe('ods-message rendering', () => {
     it('should render success icon', async() => {
       await setup(`<ods-message color="${ODS_MESSAGE_COLOR.success}"></ods-message>`);
 
-      const successIcon = await message.find('ods-icon[name="success-circle"]');
+      const successIcon = await message.find('ods-icon[name="check-circle"]');
 
       expect(successIcon).not.toBeNull();
     });