docs: add new prop to button

juntossomosmais · Nov 19, 2024 · 5f1bb24 · 5f1bb24
1 parent 33ca903
commit 5f1bb24
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 2 deletions.
diff --git a/packages/core/src/components/button/stories/button.args.ts b/packages/core/src/components/button/stories/button.args.ts
@@ -21,7 +21,7 @@ export const ButtonStoryArgs = {
     },
     color: {
       control: 'select',
-      options: ['primary', 'secondary', 'white'],
+      options: ['primary', 'secondary', 'white', 'custom'],
       defaultValue: { summary: 'primary' },
       description: "The color to use from your application's color palette.",
       table: {
@@ -122,6 +122,20 @@ export const ButtonStoryArgs = {
         category: Category.PROPERTIES,
       },
     },
+    '--atom-button-color': {
+      description:
+        'Custom color of the button. It just works with `color="custom"`.',
+      table: {
+        category: Category.CSS_CUSTOM_PROPERTIES,
+      },
+    },
+    '--atom-button-color-contrast': {
+      description:
+        'Custom color contrast of the button. It just works with `color="custom"`.',
+      table: {
+        category: Category.CSS_CUSTOM_PROPERTIES,
+      },
+    },
   },
 }
 

diff --git a/packages/core/src/components/button/stories/button.core.stories.tsx b/packages/core/src/components/button/stories/button.core.stories.tsx
@@ -3,6 +3,8 @@ import { html } from 'lit'
 
 import { ButtonComponentArgs, ButtonStoryArgs } from './button.args'
 
+import './button.css'
+
 export default {
   title: 'Components/Button',
   ...ButtonStoryArgs,
@@ -12,6 +14,7 @@ const createButton = (args, themeColor = 'light') => {
   return html`
     <div class="theme-${themeColor}">
       <atom-button
+        class="button"
         color="${args.color}"
         fill="${args.fill}"
         expand="${args.expand}"

diff --git a/packages/core/src/components/button/stories/button.css b/packages/core/src/components/button/stories/button.css
@@ -0,0 +1,4 @@
+.button {
+  --atom-button-color: #25d366;
+  --atom-button-color-contrast: #fff;
+}
diff --git a/packages/core/src/components/button/stories/button.react.stories.tsx b/packages/core/src/components/button/stories/button.react.stories.tsx
@@ -4,6 +4,8 @@ import React from 'react'
 
 import { ButtonComponentArgs, ButtonStoryArgs } from './button.args'
 
+import './button.css'
+
 export default {
   title: 'Components/Button',
   component: AtomButton,
@@ -13,6 +15,7 @@ export default {
 const createButton = (args, themeColor = 'light') => (
   <div className={`theme-${themeColor}`}>
     <AtomButton
+      className='button'
       color={args.color}
       fill={args.fill}
       size={args.size}

diff --git a/packages/core/src/components/button/stories/button.vue.stories.tsx b/packages/core/src/components/button/stories/button.vue.stories.tsx
@@ -1,9 +1,10 @@
 import { AtomButton, AtomIcon } from '@juntossomosmais/atomium/vue'
 import { Meta, StoryObj } from '@storybook/vue3'
 
-
 import { ButtonComponentArgs, ButtonStoryArgs } from './button.args'
 
+import './button.css'
+
 export default {
   title: 'Components/Button',
   ...ButtonStoryArgs,
@@ -17,6 +18,7 @@ const createButton = (args, themeColor = 'light') => ({
   template: `
     <div :class="'theme-' + themeColor">
       <AtomButton
+        class="button"
         color="${args.color}"
         fill="${args.fill}"
         size="${args.size}"