feat(icon): add white color (#547)

juntossomosmais · Aug 28, 2024 · 651bb20 · 651bb20
1 parent e1c7984
commit 651bb20
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 7 deletions.
diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
@@ -6,10 +6,10 @@
  */
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
 import { IconProps } from "./icons";
-import { Color, Mode, TextFieldTypes } from "@ionic/core";
+import { Mode, TextFieldTypes } from "@ionic/core";
 import { IonTypes } from "@ionic/core/dist/types/components";
 export { IconProps } from "./icons";
-export { Color, Mode, TextFieldTypes } from "@ionic/core";
+export { Mode, TextFieldTypes } from "@ionic/core";
 export { IonTypes } from "@ionic/core/dist/types/components";
 export namespace Components {
     interface AtomAlert {
@@ -87,7 +87,7 @@ export namespace Components {
         "fixed"?: boolean;
     }
     interface AtomIcon {
-        "color"?: Color;
+        "color"?: ColorProps;
         "icon"?: IconProps;
         "size"?: Size;
     }
@@ -618,7 +618,7 @@ declare namespace LocalJSX {
         "fixed"?: boolean;
     }
     interface AtomIcon {
-        "color"?: Color;
+        "color"?: ColorProps;
         "icon"?: IconProps;
         "size"?: Size;
     }

diff --git a/packages/core/src/components/icon/icon.scss b/packages/core/src/components/icon/icon.scss
@@ -1,3 +1,7 @@
 :host {
   display: inline-flex;
 }
+
+.ion-color-white {
+  --ion-color-base: var(--color-neutral-white);
+}
diff --git a/packages/core/src/components/icon/icon.tsx b/packages/core/src/components/icon/icon.tsx
@@ -1,19 +1,29 @@
-import { Color } from '@ionic/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
+type ColorProps =
+  | 'primary'
+  | 'secondary'
+  | 'tertiary'
+  | 'success'
+  | 'warning'
+  | 'danger'
+  | 'light'
+  | 'medium'
+  | 'dark'
+  | 'white'
 
 @Component({
   tag: 'atom-icon',
   styleUrl: 'icon.scss',
   shadow: true,
 })
 export class AtomIcon {
-  @Prop() color?: Color
+  @Prop() color?: ColorProps
   @Prop() icon?: IconProps
   @Prop() size?: Size
 
@@ -44,8 +54,8 @@ export class AtomIcon {
     return (
       <Host aria-hidden='true'>
         <ion-icon
-          icon={`${CDN_URL}/${this.icon}.svg`}
           color={this.color}
+          icon={`${CDN_URL}/${this.icon}.svg`}
           size={this.validateSize}
           style={{ fontSize: this.fontSize }}
         />

diff --git a/packages/core/src/components/icon/stories/icon.args.ts b/packages/core/src/components/icon/stories/icon.args.ts
@@ -30,6 +30,7 @@ export const IconStoryArgs = {
         'light',
         'medium',
         'dark',
+        'white',
       ],
       table: {
         category: Category.PROPERTIES,