feat(core): add white color to button component (#297)

juntossomosmais · Oct 23, 2023 · cfa8d40 · cfa8d40
1 parent efb273b
commit cfa8d40
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 34 deletions.
diff --git a/packages/core/src/components/button/button.scss b/packages/core/src/components/button/button.scss
@@ -14,6 +14,11 @@
 .atom-button {
   text-transform: inherit;
 
+  &[color='white'] {
+    --ion-color-base: var(--color-neutral-white);
+    --ion-color-contrast: var(--color-neutral-black);
+  }
+
   &[size='default'] {
     --button-size: var(--spacing-xxxxlarge);
     font: var(--button-medium);

diff --git a/packages/core/src/components/button/button.tsx b/packages/core/src/components/button/button.tsx
@@ -15,7 +15,7 @@ import {
   shadow: true,
 })
 export class AtomButton {
-  @Prop() color: 'primary' | 'secondary' = 'primary'
+  @Prop() color: 'primary' | 'secondary' | 'white' = 'primary'
   @Prop() disabled?: boolean
   @Prop() download?: string
   @Prop() expand?: 'block'
@@ -43,10 +43,12 @@ export class AtomButton {
     event.stopPropagation()
 
     if (this.loading || this.disabled) return
+
     if (this.type === 'button') {
       return this.click.emit(event)
     } else {
       const form = this.element.closest('form')
+
       if (form) {
         return form[this.formFunctions[this.type]]()
       }

diff --git a/packages/core/src/components/button/stories/button.args.ts b/packages/core/src/components/button/stories/button.args.ts
@@ -1,6 +1,5 @@
-import { withActions } from '@storybook/addon-actions/decorator'
-
 import { Category } from '@atomium/storybook-utils/enums/table'
+import { withActions } from '@storybook/addon-actions/decorator'
 
 export const ButtonStoryArgs = {
   parameters: {
@@ -22,7 +21,7 @@ export const ButtonStoryArgs = {
     },
     color: {
       control: 'select',
-      options: ['primary', 'secondary'],
+      options: ['primary', 'secondary', 'white'],
       defaultValue: { summary: 'primary' },
       description: "The color to use from your application's color palette.",
       table: {

diff --git a/packages/core/src/components/button/stories/button.core.stories.tsx b/packages/core/src/components/button/stories/button.core.stories.tsx
@@ -1,5 +1,4 @@
 import { Meta, StoryObj } from '@storybook/web-components'
-
 import { html } from 'lit'
 
 import { ButtonComponentArgs, ButtonStoryArgs } from './button.args'
@@ -9,21 +8,23 @@ export default {
   ...ButtonStoryArgs,
 } as Meta
 
-const createButton = (args) => {
+const createButton = (args, themeColor = 'light') => {
   return html`
-    <atom-button
-      color="${args.color}"
-      fill="${args.fill}"
-      expand="${args.expand}"
-      size="${args.size}"
-      disabled="${args.disabled}"
-      loading="${args.loading}"
-      type="${args.type}"
-      mode="${args.mode}"
-      shape="${args.shape}"
-    >
-      ${args.label}
-    </atom-button>
+    <div class="theme-${themeColor}">
+      <atom-button
+        color="${args.color}"
+        fill="${args.fill}"
+        expand="${args.expand}"
+        size="${args.size}"
+        disabled="${args.disabled}"
+        loading="${args.loading}"
+        type="${args.type}"
+        mode="${args.mode}"
+        shape="${args.shape}"
+      >
+        ${args.label}
+      </atom-button>
+    </div>
   `
 }
 
@@ -43,6 +44,15 @@ export const Secondary: StoryObj = {
   },
 }
 
+export const White: StoryObj = {
+  render: (args) => createButton(args, 'dark'),
+  args: {
+    ...Primary.args,
+    color: 'white',
+    fill: 'outline',
+  },
+}
+
 export const Text: StoryObj = {
   render: (args) => createButton(args),
   args: {

diff --git a/packages/core/src/components/button/stories/button.react.stories.tsx b/packages/core/src/components/button/stories/button.react.stories.tsx
@@ -1,8 +1,7 @@
+import { AtomButton, AtomIcon } from '@juntossomosmais/atomium/react'
 import { Meta, StoryObj } from '@storybook/react'
 import React from 'react'
 
-import { AtomButton, AtomIcon } from '@juntossomosmais/atomium/react'
-
 import { ButtonComponentArgs, ButtonStoryArgs } from './button.args'
 
 export default {
@@ -11,19 +10,21 @@ export default {
   ...ButtonStoryArgs,
 } as Meta
 
-const createButton = (args) => (
-  <AtomButton
-    color={args.color}
-    fill={args.fill}
-    size={args.size}
-    disabled={args.disabled}
-    loading={args.loading}
-    type={args.type}
-    mode={args.mode}
-    expand={args.expand}
-  >
-    {args.label}
-  </AtomButton>
+const createButton = (args, themeColor = 'light') => (
+  <div className={`theme-${themeColor}`}>
+    <AtomButton
+      color={args.color}
+      fill={args.fill}
+      size={args.size}
+      disabled={args.disabled}
+      loading={args.loading}
+      type={args.type}
+      mode={args.mode}
+      expand={args.expand}
+    >
+      {args.label}
+    </AtomButton>
+  </div>
 )
 
 export const Primary: StoryObj = {
@@ -42,6 +43,15 @@ export const Secondary: StoryObj = {
   },
 }
 
+export const White: StoryObj = {
+  render: (args) => createButton(args, 'dark'),
+  args: {
+    ...Primary.args,
+    color: 'white',
+    fill: 'outline',
+  },
+}
+
 export const Text: StoryObj = {
   render: (args) => createButton(args),
   args: {

diff --git a/utils/storybook/preview.css b/utils/storybook/preview.css
@@ -9,3 +9,7 @@
 .sbdocs-a {
   color: var(--color-brand-secondary-regular) !important;
 }
+
+.theme-dark {
+  background-color: var(--color-neutral-black);
+}