feat: add correct icons and icon sizes to wio dropdown

package.json

@@ -77,7 +77,6 @@
     "yargs": "^17.7.2"
   },
   "dependencies": {
-    "@superviz/sv-icons": "^0.8.8",
     "ably": "^1.2.45",
     "bowser": "^2.11.0",
     "bowser-jr": "^1.0.6",

src/common/styles/global.css

@@ -1,4 +1,4 @@
-@import url('https://unpkg.com/@superviz/sv-icons@0.8.7/css/style.css');
+@import url('https://unpkg.com/@superviz/sv-icons@0.8.10/css/style.css');
 @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700&family=Roboto:wght@400;500;700&display=swap');
 
 html, body { 

src/web-components/dropdown/index.style.ts

@@ -17,10 +17,6 @@ export const dropdownStyle = css`
     position: relative;
   }
 
-  .dropdown-list * {
-    box-sizing: border-box;
-  }
-
   .header {
     display: flex;
     flex-direction: column;

src/web-components/dropdown/index.ts

@@ -389,7 +389,7 @@ export class Dropdown extends WebComponentsBaseElement {
     };
 
     const icons = this.icons?.map((icon) => {
-      return html`<superviz-icon name="${icon}" size="sm"></superviz-icon>`;
+      return html`<superviz-icon allowSetSize=${true} name="${icon}" size="sm"></superviz-icon>`;
     });
 
     const options = this.options.map((option, index) => {

src/web-components/icon/index.ts

@@ -3,13 +3,16 @@ import { customElement } from 'lit/decorators.js';
 
 import { WebComponentsBase } from '../base';
 
+import { IconSizes } from './types';
+
 const WebComponentsBaseElement = WebComponentsBase(LitElement);
 const styles: CSSResultGroup[] = [WebComponentsBaseElement.styles];
 
 @customElement('superviz-icon')
 export class Icon extends WebComponentsBaseElement {
   declare name: string;
   declare size: string;
+  declare allowSetSize: boolean;
 
   constructor() {
     super();
@@ -21,8 +24,14 @@ export class Icon extends WebComponentsBaseElement {
   static properties = {
     name: { type: String },
     size: { type: String },
+    allowSetSize: { type: Boolean },
   };
 
+  private get iconSize(): string {
+    if (!this.allowSetSize) return;
+    return IconSizes[this.size];
+  }
+
   static styles = [
     styles,
     css`
@@ -39,6 +48,11 @@ export class Icon extends WebComponentsBaseElement {
   ];
 
   protected render() {
-    return html` <i class="sv-icon sv-icon-${this.name}_${this.size}"></i> `;
+    return html`
+      <i
+        class="sv-icon sv-icon-${this.name}_${this.size}"
+        style="font-size: ${this.iconSize}px"
+      ></i>
+    `;
   }
 }

src/web-components/icon/types.ts

@@ -0,0 +1,7 @@
+export enum IconSizes {
+  xs = 14,
+  sm = 20,
+  md = 24,
+  lg = 36,
+  xl = 44,
+}

src/web-components/who-is-online/css/dropdown.style.ts

@@ -64,10 +64,6 @@ export const dropdownStyle = css`
     flex-direction: column;
   }
 
-  .dropdown-list * {
-    box-sizing: border-box;
-  }
-
   .dropdown-list > div {
     padding: 4px;
     min-width: 216px;

src/web-components/who-is-online/who-is-online.ts

@@ -195,7 +195,7 @@ export class WhoIsOnline extends WebComponentsBaseElement {
   }
 
   private getIcons(isLocal: boolean, isBeingFollowed: boolean) {
-    return isLocal ? ['help', 'eye_inative'] : ['place', isBeingFollowed ? 'send-off' : 'send'];
+    return isLocal ? ['gather', 'eye_inative'] : ['place', isBeingFollowed ? 'send-off' : 'send'];
   }
 
   private putLocalParticipationFirst() {

yarn.lock

@@ -2469,11 +2469,6 @@
   dependencies:
     "@sinonjs/commons" "^3.0.0"
 
-"@superviz/sv-icons@^0.8.8":
-  version "0.8.8"
-  resolved "https://registry.yarnpkg.com/@superviz/sv-icons/-/sv-icons-0.8.8.tgz#702ff1f2dd6bd89bb9b82953ec05c60ee2037119"
-  integrity sha512-+X5yqHSriKNlCdJq6b2j0xRuOYl9gCGXSG58t7HMZ1Vm4bxYgNxkfWjz6HmWNnotsQh/mBktE5J00KZK3jP2Gg==
-
 "@szmarczak/http-timer@^4.0.5":
   version "4.0.6"
   resolved "https://registry.npmjs.org/@szmarczak/http-timer/-/http-timer-4.0.6.tgz"