@bolttech/atoms-button 0.2.7 → 0.2.9

package/index.cjs

@@ -1103,20 +1103,17 @@ var SizeVariant;
 const Container = /*#__PURE__*/styled__default["default"].div.withConfig({
   displayName: "atoms-buttonstyles__Container",
   componentId: "i4bzba-0"
-})(["display:flex;align-items:center;gap:", ";.left-img-btn,.right-img-btn,svg{width:", ";height:", ";}"], ({
+})(["display:flex;align-items:center;gap:", ";.left-img-btn,.right-img-btn{display:flex;label{font-size:", ";}}"], ({
   theme,
   size
 }) => theme.components.button[size].generic.gap, ({
   theme,
   size
-}) => theme.components.button[size].icon.size, ({
-  theme,
-  size
 }) => theme.components.button[size].icon.size);
 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:", ";padding:", ";label.material-symbols-sharp{color:", ";}:active:enabled{background-color:", ";border:1px solid ", ";color:", ";label.material-symbols-sharp{color:", ";}}:disabled{background-color:", ";border:1px solid ", ";color:", ";label.material-symbols-sharp{color:", ";}}:hover:enabled{background-color:", ";border:1px solid ", ";color:", ";label.material-symbols-sharp{color:", ";}}", ""], ({
   theme,
   variant
 }) => theme.components.button[variant].container.color.default, ({
@@ -1136,15 +1133,15 @@ const Button$1 = /*#__PURE__*/styled__default["default"].button.withConfig({
   theme,
   variant
 }) => theme.components.button[variant].text.color.default, ({
-  theme,
-  variant
-}) => theme.components.button[variant].icon.color.default, ({
   theme,
   size,
   sizeVariant
 }) => `${theme.components.button[size][sizeVariant].paddingVertical} ${theme.components.button[size][sizeVariant].paddingHorizontal}`, ({
   theme,
   variant
+}) => theme.components.button[variant].icon.color.default, ({
+  theme,
+  variant
 }) => theme.components.button[variant].container.color.active, ({
   theme,
   variant
@@ -1178,7 +1175,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 +1219,8 @@ function Button({
   size,
   iconRight,
   iconLeft,
+  fullWidth = false,
+  type = 'button',
   onClick
 }) {
   return jsxRuntime.jsx(Button$1, Object.assign({
@@ -1229,7 +1230,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,12 +1,14 @@
 {
   "name": "@bolttech/atoms-button",
-  "version": "0.2.7",
-  "peerDependencies": {
-    "@bolttech/atoms-icon": "^0.1.6",
-    "styled-components": "5.3.6"
+  "version": "0.2.9",
+  "dependencies": {
+    "@bolttech/atoms-icon": "^0.1.8"
   },
   "main": "./index.cjs",
   "type": "commonjs",
   "types": "./src/index.d.ts",
-  "dependencies": {}
+  "peerDependencies": {
+    "@edirect/frontend-foundations": "0.0.36",
+    "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 = {