feat: add font size prop into icon component (#379)

Author: matheus-rosa-jsm

packages/core/src/components.d.ts

@@ -95,7 +95,7 @@ export namespace Components {
     interface AtomIcon {
         "color"?: Color;
         "icon"?: IconProps;
-        "size"?: 'small' | 'large';
+        "size"?: Size;
     }
     interface AtomInput {
         "autocomplete"?: 'on' | 'off';
@@ -543,7 +543,7 @@ declare namespace LocalJSX {
     interface AtomIcon {
         "color"?: Color;
         "icon"?: IconProps;
-        "size"?: 'small' | 'large';
+        "size"?: Size;
     }
     interface AtomInput {
         "autocomplete"?: 'on' | 'off';

packages/core/src/components/icon/icon.spec.ts

@@ -1,28 +1,32 @@
-import { newSpecPage } from '@stencil/core/testing'
+import { SpecPage, newSpecPage } from '@stencil/core/testing'
 
 import { AtomIcon } from './icon'
 
 const URL_MOCK = 'https://atomium.juntossomosmais.com.br/icons'
 
 describe('atom-icon', () => {
-  it('should render ion-icon element', async () => {
-    const page = await newSpecPage({
+  let page: SpecPage
+
+  beforeEach(async () => {
+    page = await newSpecPage({
       components: [AtomIcon],
       html: `<atom-icon icon="heart" color="primary" size="large"></atom-icon>`,
     })
+  })
+
+  it('should size attributte to be filed with size prop when its an enum type', () => {
+    expect(page?.root?.shadowRoot).toEqualHtml(`
+      <ion-icon color="primary" icon="${URL_MOCK}/heart.svg" size="large"></ion-icon>
+    `)
+  })
 
-    if (!page?.root?.shadowRoot) {
-      throw new Error('page.root is undefined')
-    }
+  it('should style font-size to be filed with size prop when its an number type', async () => {
+    page?.root?.setAttribute('size', '10')
 
     await page.waitForChanges()
 
-    expect(page.root).toEqualHtml(`
-      <atom-icon aria-hidden="true" color="primary" icon="heart" size="large">
-        <mock:shadow-root>
-          <ion-icon color="primary" icon="${URL_MOCK}/heart.svg" size="large"></ion-icon>
-        </mock:shadow-root>
-      </atom-icon>
+    expect(page?.root?.shadowRoot).toEqualHtml(`
+      <ion-icon color="primary" icon="${URL_MOCK}/heart.svg" size="" style="font-size: 10px;"></ion-icon>
     `)
   })
 })

packages/core/src/components/icon/icon.tsx

@@ -1,10 +1,12 @@
 import { Color } from '@ionic/core'
-import { Component, Host, Prop, h } from '@stencil/core'
+import { Component, Host, Prop, State, Watch, h } from '@stencil/core'
 
 import { IconProps } from '../../icons'
 
 const CDN_URL = 'https://atomium.juntossomosmais.com.br/icons'
 
+type Size = 'small' | 'large' | number
+
 @Component({
   tag: 'atom-icon',
   styleUrl: 'icon.scss',
@@ -13,15 +15,39 @@ const CDN_URL = 'https://atomium.juntossomosmais.com.br/icons'
 export class AtomIcon {
   @Prop() color?: Color
   @Prop() icon?: IconProps
-  @Prop() size?: 'small' | 'large'
+  @Prop() size?: Size
+
+  @State() validateSize?: string = ''
+  @State() fontSize?: string = ''
+
+  private updateSize(newSize: Size) {
+    this.validateSize = ''
+    this.fontSize = ''
+
+    if (newSize === 'small' || newSize === 'large') {
+      this.validateSize = newSize
+    } else if (newSize > 0) {
+      this.fontSize = `${newSize}px`
+    }
+  }
+
+  @Watch('size')
+  watchPropHandler(newSize: Size) {
+    this.updateSize(newSize)
+  }
+
+  componentWillLoad() {
+    this.updateSize(this.size)
+  }
 
   render(): JSX.Element {
     return (
       <Host aria-hidden='true'>
         <ion-icon
           icon={`${CDN_URL}/${this.icon}.svg`}
           color={this.color}
-          size={this.size}
+          size={this.validateSize}
+          style={{ fontSize: this.fontSize }}
         />
       </Host>
     )

packages/core/src/components/icon/stories/icon.args.ts

@@ -36,9 +36,9 @@ export const IconStoryArgs = {
       },
     },
     size: {
-      control: 'select',
-      description: 'The size of the icon.',
-      options: ['small', 'large'],
+      control: 'text',
+      description:
+        'The size of the icon. Use large or small to change the size of the icon or pass a number to set the font-size in pixels.',
       table: {
         category: Category.PROPERTIES,
       },
@@ -49,5 +49,5 @@ export const IconStoryArgs = {
 export const IconComponentArgs = {
   icon: 'heart',
   color: 'secondary',
-  size: 'large',
+  size: '',
 }

packages/core/src/components/icon/stories/icon.core.stories.tsx

@@ -1,5 +1,4 @@
 import { Meta, StoryObj } from '@storybook/web-components'
-
 import { html } from 'lit'
 
 import { IconComponentArgs, IconStoryArgs } from './icon.args'