@bolttech/atoms-button 0.2.7 → 0.2.8

package/index.cjs

@@ -1116,7 +1116,7 @@ const Container = /*#__PURE__*/styled__default["default"].div.withConfig({
 const Button$1 = /*#__PURE__*/styled__default["default"].button.withConfig({
   displayName: "atoms-buttonstyles__Button",
   componentId: "i4bzba-1"
-})(["background-color:", ";border-radius:", ";border:1px solid ", ";box-shadow:", ";color:", ";fill:", ";padding:", ";:active:enabled{background-color:", ";border:1px solid ", ";color:", ";fill:", ";}:disabled{background-color:", ";border:1px solid ", ";color:", ";fill:", ";}:hover:enabled{background-color:", ";border:1px solid ", ";color:", ";fill:", ";}"], ({
+})(["background-color:", ";border-radius:", ";border:1px solid ", ";box-shadow:", ";color:", ";fill:", ";padding:", ";:active:enabled{background-color:", ";border:1px solid ", ";color:", ";fill:", ";}:disabled{background-color:", ";border:1px solid ", ";color:", ";fill:", ";}:hover:enabled{background-color:", ";border:1px solid ", ";color:", ";fill:", ";}", ""], ({
   theme,
   variant
 }) => theme.components.button[variant].container.color.default, ({
@@ -1178,7 +1178,9 @@ const Button$1 = /*#__PURE__*/styled__default["default"].button.withConfig({
 }) => theme.components.button[variant].text.color.hover, ({
   theme,
   variant
-}) => theme.components.button[variant].icon.color.hover);
+}) => theme.components.button[variant].icon.color.hover, ({
+  fullWidth
+}) => fullWidth && styled.css(["width:100%;", "{justify-content:center;}"], Container));
 const ButtonTitle = /*#__PURE__*/styled__default["default"].label.withConfig({
   displayName: "atoms-buttonstyles__ButtonTitle",
   componentId: "i4bzba-2"
@@ -1220,6 +1222,8 @@ function Button({
   size,
   iconRight,
   iconLeft,
+  fullWidth = false,
+  type = 'button',
   onClick
 }) {
   return jsxRuntime.jsx(Button$1, Object.assign({
@@ -1229,7 +1233,9 @@ function Button({
     sizeVariant: SizeVariant[variant],
     inverseColors: variant === 'alternative',
     disabled: disabled,
-    onClick: () => !disabled && onClick()
+    type: type,
+    fullWidth: fullWidth,
+    onClick: () => !disabled && onClick && onClick()
   }, {
     children: jsxRuntime.jsxs(Container, Object.assign({
       size: size

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bolttech/atoms-button",
-  "version": "0.2.7",
+  "version": "0.2.8",
   "peerDependencies": {
     "@bolttech/atoms-icon": "^0.1.6",
     "styled-components": "5.3.6"

package/src/lib/atoms-button.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { ButtonProps } from './atoms-button.type';
-export declare function Button({ dataTestId, disabled, title, variant, size, iconRight, iconLeft, onClick, }: ButtonProps): JSX.Element;
+export declare function Button({ dataTestId, disabled, title, variant, size, iconRight, iconLeft, fullWidth, type, onClick, }: ButtonProps): JSX.Element;

package/src/lib/atoms-button.type.d.ts

@@ -1,14 +1,17 @@
 export type ButtonVariants = 'transaction' | 'brand' | 'alternative' | 'outline' | 'ghost';
 export type ButtonSizes = 'sm' | 'md' | 'lg';
+export type ButtonTypes = 'button' | 'submit';
 export type ButtonProps = {
     dataTestId?: string;
-    disabled: boolean;
+    disabled?: boolean;
     title?: string;
     variant: ButtonVariants;
     size: ButtonSizes;
     iconRight?: string;
     iconLeft?: string;
-    onClick: () => void;
+    type?: ButtonTypes;
+    fullWidth?: boolean;
+    onClick?: () => void;
 };
 export type ContainerProps = {
     size: string;
@@ -17,6 +20,7 @@ export type StyledButtonProps = {
     variant: string;
     size: ButtonSizes;
     sizeVariant: 'generic' | 'ghost';
+    fullWidth: boolean;
     inverseColors: boolean;
 };
 export type ButtonTitleProps = {