feat(core): add icon component (#57)

packages/core/src/components.d.ts

@@ -4,9 +4,10 @@
  * This is an autogenerated file created by the Stencil compiler.
  * It contains typing information for all components that exist in this project.
  */
-import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
 import { Mode, TextFieldTypes } from "@ionic/core";
-export { Mode, TextFieldTypes } from "@ionic/core";
+import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
+export { Color, Mode, TextFieldTypes } from "@ionic/core";
+export { LocalJSX as JSX };
 export namespace Components {
     interface AtomButton {
         "color": 'primary' | 'secondary';
@@ -238,7 +239,6 @@ declare namespace LocalJSX {
         "atom-select": AtomSelect;
     }
 }
-export { LocalJSX as JSX };
 declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {

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

@@ -0,0 +1,26 @@
+import { newSpecPage } from '@stencil/core/testing'
+
+import { AtomIcon, CDN_URL } from './icon'
+
+describe('atom-icon', () => {
+  it('should render ion-icon element', async () => {
+    const page = await newSpecPage({
+      components: [AtomIcon],
+      html: `<atom-icon icon="heart" color="primary" size="large"></atom-icon>`,
+    })
+
+    if (!page?.root?.shadowRoot) {
+      throw new Error('page.root is undefined')
+    }
+
+    await page.waitForChanges()
+
+    expect(page.root).toEqualHtml(`
+      <atom-icon color="primary" icon="heart" size="large">
+        <mock:shadow-root>
+          <ion-icon color="primary" icon="${CDN_URL}/heart.svg" size="large"></ion-icon>
+        </mock:shadow-root>
+      </atom-icon>
+    `)
+  })
+})

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

@@ -0,0 +1,55 @@
+import { withActions } from '@storybook/addon-actions/decorator'
+import { Meta, StoryObj } from '@storybook/html'
+
+import { AtomIcon } from './icon'
+
+type argsIcon = AtomIcon
+
+export default {
+  title: 'Ionic Components/Icon',
+  decorators: [withActions],
+  argTypes: {
+    icon: {
+      control: 'text',
+    },
+    color: {
+      control: 'select',
+      options: [
+        'primary',
+        'secondary',
+        'tertiary',
+        'success',
+        'warning',
+        'danger',
+        'light',
+        'medium',
+        'dark',
+      ],
+    },
+    size: {
+      control: 'select',
+      options: ['small', 'large'],
+    },
+  },
+} as Meta<argsIcon>
+
+type Story = StoryObj<argsIcon>
+
+const createIcon = (args: argsIcon) => {
+  return `
+    <atom-icon
+      icon=${args.icon}
+      color=${args.color}
+      size=${args.size}
+    />
+  `
+}
+
+export const Default: Story = {
+  render: (args) => createIcon(args),
+  args: {
+    icon: 'heart',
+    color: 'secondary',
+    size: 'large',
+  },
+}

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

@@ -0,0 +1,24 @@
+import { Color } from '@ionic/core'
+import { Component, Prop, h } from '@stencil/core'
+
+export const CDN_URL = 'https://unpkg.com/ionicons@7.1.0/dist/ionicons/svg'
+
+@Component({
+  tag: 'atom-icon',
+  shadow: true,
+})
+export class AtomIcon {
+  @Prop() icon?: string
+  @Prop() color?: Color
+  @Prop() size?: 'small' | 'large'
+
+  render() {
+    return (
+      <ion-icon
+        icon={`${CDN_URL}/${this.icon}.svg`}
+        color={this.color}
+        size={this.size}
+      />
+    )
+  }
+}

packages/core/src/index.ts

@@ -1,4 +1,5 @@
 export { AtomButton } from './components/button/button'
 export { AtomCol, AtomGrid, AtomRow } from './components/grid'
+export { AtomIcon } from './components/icon/icon'
 export { AtomInput } from './components/input/input'
 export { AtomSelect } from './components/select/select'