Merge pull request #480 from aziontech/feat/buttons

feat: button action save/delete/copy

Author: robsongajunior

apps/storybook/src/stories/components/buttons/ButtonCancel.stories.js

@@ -0,0 +1,73 @@
+import ButtonCancel from '@aziontech/webkit/button-cancel';
+
+export default {
+  title: 'Components/Buttons/ButtonCancel',
+  component: ButtonCancel,
+  tags: ['autodocs'],
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'Text displayed on the button'
+    },
+    icon: {
+      control: 'text',
+      description: 'Icon class (PrimeIcons format)'
+    },
+    severity: {
+      control: 'select',
+      options: ['', 'secondary', 'success', 'info', 'warning', 'danger', 'contrast'],
+      description: 'Button severity/style variant'
+    },
+    size: {
+      control: 'select',
+      options: ['', 'small', 'large'],
+      description: 'Button size'
+    },
+    outlined: {
+      control: 'boolean',
+      description: 'Whether the button is outlined'
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Whether the button is disabled'
+    }
+  }
+};
+
+export const Default = {
+  args: {
+    label: 'Cancel',
+    size: ''
+  }
+};
+
+export const WithIcon = {
+  args: {
+    label: 'Cancel',
+    icon: 'pi pi-times',
+    size: 'large'
+  }
+};
+
+export const Small = {
+  args: {
+    label: 'Cancel',
+    size: 'small'
+  }
+};
+
+export const Filled = {
+  args: {
+    label: 'Cancel',
+    outlined: false,
+    size: 'large'
+  }
+};
+
+export const Disabled = {
+  args: {
+    label: 'Cancel',
+    disabled: true,
+    size: 'large'
+  }
+};

apps/storybook/src/stories/components/buttons/ButtonClone.stories.js

@@ -0,0 +1,80 @@
+import ButtonClone from '@aziontech/webkit/button-clone';
+
+export default {
+  title: 'Components/Buttons/ButtonClone',
+  component: ButtonClone,
+  tags: ['autodocs'],
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'Text displayed on the button'
+    },
+    icon: {
+      control: 'text',
+      description: 'Icon class (PrimeIcons format)'
+    },
+    severity: {
+      control: 'select',
+      options: ['', 'secondary', 'primary', 'success', 'info', 'warning', 'danger', 'contrast'],
+      description: 'Button severity/style variant'
+    },
+    size: {
+      control: 'select',
+      options: ['', 'small', 'large'],
+      description: 'Button size'
+    },
+    outlined: {
+      control: 'boolean',
+      description: 'Whether the button is outlined'
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Whether the button is disabled'
+    }
+  }
+};
+
+export const Default = {
+  args: {
+    label: 'Clone',
+    size: ''
+  }
+};
+
+export const WithCustomLabel = {
+  args: {
+    label: 'Duplicate',
+    size: 'large'
+  }
+};
+
+export const Small = {
+  args: {
+    label: 'Clone',
+    size: 'small'
+  }
+};
+
+export const Filled = {
+  args: {
+    label: 'Clone',
+    outlined: false,
+    size: 'large'
+  }
+};
+
+export const Disabled = {
+  args: {
+    label: 'Clone',
+    disabled: true,
+    size: 'large'
+  }
+};
+
+export const WithCustomIcon = {
+  args: {
+    label: 'Clone',
+    icon: 'pi pi-clone',
+    size: 'large'
+  }
+};

apps/storybook/src/stories/components/buttons/ButtonCopy.stories.js

@@ -0,0 +1,101 @@
+import ButtonCopy from '@aziontech/webkit/button-copy';
+
+export default {
+  title: 'Components/Buttons/ButtonCopy',
+  component: ButtonCopy,
+  tags: ['autodocs'],
+  argTypes: {
+    value: {
+      control: 'text',
+      description: 'Text value to copy to clipboard (required)'
+    },
+    label: {
+      control: 'text',
+      description: 'Text displayed on the button'
+    },
+    size: {
+      control: 'select',
+      options: ['', 'small', 'large'],
+      description: 'Button size'
+    },
+    copiedLabel: {
+      control: 'text',
+      description: 'Text displayed after copying'
+    },
+    outlined: {
+      control: 'boolean',
+      description: 'Whether the button is outlined'
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Whether the button is disabled'
+    },
+    isCopyVisible: {
+      control: 'boolean',
+      description: 'Whether the copy button is visible'
+    }
+  }
+};
+
+export const Default = {
+  args: {
+    value: 'Text to copy',
+    size: '',
+    outlined: true
+  }
+};
+
+export const WithLabel = {
+  args: {
+    value: 'https://example.com/api/endpoint',
+    label: 'Copy URL',
+    size: '',
+    outlined: true
+  }
+};
+
+export const TextOnly = {
+  args: {
+    value: 'Copy this text',
+    label: 'Copy',
+    size: '',
+    outlined: false
+  }
+};
+
+export const Disabled = {
+  args: {
+    value: 'Cannot copy this',
+    label: 'Copy',
+    disabled: true
+  }
+};
+
+export const CustomCopiedLabel = {
+  args: {
+    value: 'Success message',
+    label: 'Copy',
+    size: '',
+    copiedLabel: 'Copied!',
+    outlined: true
+  }
+};
+
+export const HiddenByDefault = {
+  args: {
+    value: 'Hover to reveal',
+    label: 'Copy',
+    isCopyVisible: false,
+    outlined: true
+  }
+};
+
+export const CopyAPIKey = {
+  args: {
+    value: 'sk-api-key-12345-abcde-67890-fghij',
+    label: 'Copy API Key',
+    size: '',
+    copiedLabel: 'Key Copied!',
+    outlined: true
+  }
+};

apps/storybook/src/stories/components/buttons/ButtonCreate.stories.js

@@ -0,0 +1,81 @@
+import ButtonCreate from '@aziontech/webkit/button-create';
+
+export default {
+  title: 'Components/Buttons/ButtonCreate',
+  component: ButtonCreate,
+  tags: ['autodocs'],
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'Text displayed on the button (required)'
+    },
+    icon: {
+      control: 'text',
+      description: 'Icon class (PrimeIcons format)'
+    },
+    severity: {
+      control: 'select',
+      options: ['', 'primary', 'secondary', 'success', 'info', 'warning', 'danger', 'contrast'],
+      description: 'Button severity/style variant'
+    },
+    size: {
+      control: 'select',
+      options: ['', 'small', 'large'],
+      description: 'Button size'
+    },
+    outlined: {
+      control: 'boolean',
+      description: 'Whether the button is outlined'
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Whether the button is disabled'
+    }
+  }
+};
+
+export const Default = {
+  args: {
+    label: 'Create New',
+    size: ''
+  }
+};
+
+export const WithCustomIcon = {
+  args: {
+    label: 'Add Item',
+    icon: 'pi pi-plus-circle',
+    size: 'large'
+  }
+};
+
+export const Small = {
+  args: {
+    label: 'Create',
+    size: 'small'
+  }
+};
+
+export const Outlined = {
+  args: {
+    label: 'Create New',
+    outlined: true,
+    size: 'large'
+  }
+};
+
+export const Disabled = {
+  args: {
+    label: 'Create New',
+    disabled: true,
+    size: 'large'
+  }
+};
+
+export const Secondary = {
+  args: {
+    label: 'Create New',
+    severity: 'secondary',
+    size: 'large'
+  }
+};