@zohodesk/components 1.1.0 → 1.1.1

package/assets/Appearance/light/themes/yellow/yellow_ComponentTheme_LightTheme.module.css

@@ -1,45 +1,45 @@
 [data-mode='light'][data-theme='yellow'] {
 	/* stencil */
-	--stencil_dark_bg: rgba(255, 255, 255, 0.07);
-	--stencil_dark_gradient_bg: linear-gradient(to left, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.03) 33.33%, rgba(255, 255, 255, 0.03) 66.66%, rgba(255, 255, 255, 0.07) 100%);
+	--zdt_stencil_dark_bg: rgba(255, 255, 255, 0.07);
+	--zdt_stencil_dark_gradient_bg: linear-gradient(to left, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.03) 33.33%, rgba(255, 255, 255, 0.03) 66.66%, rgba(255, 255, 255, 0.07) 100%);
 	
 	/* dropbox */
-	--dropbox_dark_bg: rgb(49,51,35);
+	--zdt_dropbox_dark_bg: rgb(49,51,35);
 	
 	/* listitem */
-	--listitem_dark_bg: rgb(49,51,35);
-	--listitem_dark_text: rgb(208,208,212);
-	--listitem_dark_effect_bg: rgba(255, 255, 255, 0.12);
-	--listitem_dark_active_bg: rgb(73,76,52);
-	--listitem_dark_tickicon: rgb(232,185,35);
+	--zdt_listitem_dark_bg: rgb(49,51,35);
+	--zdt_listitem_dark_text: rgb(208,208,212);
+	--zdt_listitem_dark_effect_bg: rgba(255, 255, 255, 0.12);
+	--zdt_listitem_dark_active_bg: rgb(73,76,52);
+	--zdt_listitem_dark_tickicon: rgb(232,185,35);
 	
 	/* tag */
-	--tag_dark_text: rgb(208,208,212);
-	--tag_dark_bg: rgba(255, 255, 255, 0.07);
-	--tag_dark_hover_text: rgb(208,208,212);
-	--tag_dark_hover_bg: rgb(80,51,72);
-	--tag_dark_close_bg: rgb(134,70,84);
-	--tag_dark_close_text: rgb(222,53,53);
+	--zdt_tag_dark_text: rgb(208,208,212);
+	--zdt_tag_dark_bg: rgba(255, 255, 255, 0.07);
+	--zdt_tag_dark_hover_text: rgb(208,208,212);
+	--zdt_tag_dark_hover_bg: rgb(80,51,72);
+	--zdt_tag_dark_close_bg: rgb(134,70,84);
+	--zdt_tag_dark_close_text: rgb(222,53,53);
 	
 	/* multiselect */
-	--multiselect_dark_border: rgba(255, 255, 255, 0.2);
-	--multiselect_darkmsg_bg: rgba(255, 255, 255, 0.02);
-	--multiselect_darkmsg_text: rgb(208,208,212);
-	--multiselect_darkdelete_hover_text: rgb(255,255,255);
+	--zdt_multiselect_dark_border: rgba(255, 255, 255, 0.2);
+	--zdt_multiselect_darkmsg_bg: rgba(255, 255, 255, 0.02);
+	--zdt_multiselect_darkmsg_text: rgb(208,208,212);
+	--zdt_multiselect_darkdelete_hover_text: rgb(255,255,255);
 	
 	/* avatar */
-	--avatar_white_border: rgba(255, 255, 255, 0.2);
-	--avatar_white_text: rgb(255,255,255);
+	--zdt_avatar_white_border: rgba(255, 255, 255, 0.2);
+	--zdt_avatar_white_text: rgb(255,255,255);
 	
 	/* label */
-	--label_dark_text: rgb(208,208,212);
+	--zdt_label_dark_text: rgb(208,208,212);
 	
 	/* textbox */
-	--textbox_light_text: rgb(255,255,255);
+	--zdt_textbox_light_text: rgb(255,255,255);
 	
 	/* dropdown */
-	--dropdown_darkheading_text: rgb(255,255,255);
+	--zdt_dropdown_darkheading_text: rgb(255,255,255);
 	
 	/* focusscope */
-	--a11y_focusScope_focus_border: rgb(232,185,35);
+	--zdt_a11y_focusScope_focus_border: rgb(232,185,35);
 }

package/assets/Appearance/pureDark/themes/blue/blue_ComponentTheme_PureDarkTheme.module.css

@@ -1,45 +1,45 @@
 [data-mode='pureDark'][data-theme='blue'] {
 	/* stencil */
-	--stencil_dark_bg: rgb(33,33,33);
-	--stencil_dark_gradient_bg: linear-gradient(to left, #212121 0%, #262626 33.33%, #262626 66.66%, #212121 100%);
+	--zdt_stencil_dark_bg: rgb(33,33,33);
+	--zdt_stencil_dark_gradient_bg: linear-gradient(to left, #212121 0%, #262626 33.33%, #262626 66.66%, #212121 100%);
 	
 	/* dropbox */
-	--dropbox_dark_bg: rgb(33,33,33);
+	--zdt_dropbox_dark_bg: rgb(33,33,33);
 	
 	/* listitem */
-	--listitem_dark_bg: rgb(33,33,33);
-	--listitem_dark_text: rgb(226,228,230);
-	--listitem_dark_effect_bg: rgb(43,43,43);
-	--listitem_dark_active_bg: rgb(59,77,109);
-	--listitem_dark_tickicon: rgb(71,157,255);
+	--zdt_listitem_dark_bg: rgb(33,33,33);
+	--zdt_listitem_dark_text: rgb(226,228,230);
+	--zdt_listitem_dark_effect_bg: rgb(43,43,43);
+	--zdt_listitem_dark_active_bg: rgb(59,77,109);
+	--zdt_listitem_dark_tickicon: rgb(71,157,255);
 	
 	/* tag */
-	--tag_dark_text: rgb(208,208,212);
-	--tag_dark_bg: rgb(38,38,38);
-	--tag_dark_hover_text: rgb(208,208,212);
-	--tag_dark_hover_bg: rgb(80,51,72);
-	--tag_dark_close_bg: rgb(134,70,84);
-	--tag_dark_close_text: rgb(222,53,53);
+	--zdt_tag_dark_text: rgb(208,208,212);
+	--zdt_tag_dark_bg: rgb(38,38,38);
+	--zdt_tag_dark_hover_text: rgb(208,208,212);
+	--zdt_tag_dark_hover_bg: rgb(80,51,72);
+	--zdt_tag_dark_close_bg: rgb(134,70,84);
+	--zdt_tag_dark_close_text: rgb(222,53,53);
 	
 	/* multiselect */
-	--multiselect_dark_border: rgb(88,88,88);
-	--multiselect_darkmsg_bg: rgb(33,33,33);
-	--multiselect_darkmsg_text: rgb(208,208,212);
-	--multiselect_darkdelete_hover_text: rgb(226,228,230);
+	--zdt_multiselect_dark_border: rgb(88,88,88);
+	--zdt_multiselect_darkmsg_bg: rgb(33,33,33);
+	--zdt_multiselect_darkmsg_text: rgb(208,208,212);
+	--zdt_multiselect_darkdelete_hover_text: rgb(226,228,230);
 	
 	/* avatar */
-	--avatar_white_border: rgb(153,153,153);
-	--avatar_white_text: rgb(255,255,255);
+	--zdt_avatar_white_border: rgb(153,153,153);
+	--zdt_avatar_white_text: rgb(255,255,255);
 	
 	/* label */
-	--label_dark_text: rgb(208,208,212);
+	--zdt_label_dark_text: rgb(208,208,212);
 	
 	/* textbox */
-	--textbox_light_text: rgb(255,255,255);
+	--zdt_textbox_light_text: rgb(255,255,255);
 	
 	/* dropdown */
-	--dropdown_darkheading_text: rgb(153,153,153);
+	--zdt_dropdown_darkheading_text: rgb(153,153,153);
 	
 	/* focusscope */
-	--a11y_focusScope_focus_border: rgb(71,157,255);
+	--zdt_a11y_focusScope_focus_border: rgb(71,157,255);
 }

package/assets/Appearance/pureDark/themes/green/green_ComponentTheme_PureDarkTheme.module.css

@@ -1,45 +1,45 @@
 [data-mode='pureDark'][data-theme='green'] {
 	/* stencil */
-	--stencil_dark_bg: rgb(33,33,33);
-	--stencil_dark_gradient_bg: linear-gradient(to left, #212121 0%, #262626 33.33%, #262626 66.66%, #212121 100%);
+	--zdt_stencil_dark_bg: rgb(33,33,33);
+	--zdt_stencil_dark_gradient_bg: linear-gradient(to left, #212121 0%, #262626 33.33%, #262626 66.66%, #212121 100%);
 	
 	/* dropbox */
-	--dropbox_dark_bg: rgb(33,33,33);
+	--zdt_dropbox_dark_bg: rgb(33,33,33);
 	
 	/* listitem */
-	--listitem_dark_bg: rgb(33,33,33);
-	--listitem_dark_text: rgb(226,228,230);
-	--listitem_dark_effect_bg: rgb(43,43,43);
-	--listitem_dark_active_bg: rgb(59,77,109);
-	--listitem_dark_tickicon: rgb(69,161,89);
+	--zdt_listitem_dark_bg: rgb(33,33,33);
+	--zdt_listitem_dark_text: rgb(226,228,230);
+	--zdt_listitem_dark_effect_bg: rgb(43,43,43);
+	--zdt_listitem_dark_active_bg: rgb(59,77,109);
+	--zdt_listitem_dark_tickicon: rgb(69,161,89);
 	
 	/* tag */
-	--tag_dark_text: rgb(208,208,212);
-	--tag_dark_bg: rgb(38,38,38);
-	--tag_dark_hover_text: rgb(208,208,212);
-	--tag_dark_hover_bg: rgb(80,51,72);
-	--tag_dark_close_bg: rgb(134,70,84);
-	--tag_dark_close_text: rgb(222,53,53);
+	--zdt_tag_dark_text: rgb(208,208,212);
+	--zdt_tag_dark_bg: rgb(38,38,38);
+	--zdt_tag_dark_hover_text: rgb(208,208,212);
+	--zdt_tag_dark_hover_bg: rgb(80,51,72);
+	--zdt_tag_dark_close_bg: rgb(134,70,84);
+	--zdt_tag_dark_close_text: rgb(222,53,53);
 	
 	/* multiselect */
-	--multiselect_dark_border: rgb(88,88,88);
-	--multiselect_darkmsg_bg: rgb(33,33,33);
-	--multiselect_darkmsg_text: rgb(208,208,212);
-	--multiselect_darkdelete_hover_text: rgb(226,228,230);
+	--zdt_multiselect_dark_border: rgb(88,88,88);
+	--zdt_multiselect_darkmsg_bg: rgb(33,33,33);
+	--zdt_multiselect_darkmsg_text: rgb(208,208,212);
+	--zdt_multiselect_darkdelete_hover_text: rgb(226,228,230);
 	
 	/* avatar */
-	--avatar_white_border: rgb(153,153,153);
-	--avatar_white_text: rgb(255,255,255);
+	--zdt_avatar_white_border: rgb(153,153,153);
+	--zdt_avatar_white_text: rgb(255,255,255);
 	
 	/* label */
-	--label_dark_text: rgb(208,208,212);
+	--zdt_label_dark_text: rgb(208,208,212);
 	
 	/* textbox */
-	--textbox_light_text: rgb(255,255,255);
+	--zdt_textbox_light_text: rgb(255,255,255);
 	
 	/* dropdown */
-	--dropdown_darkheading_text: rgb(153,153,153);
+	--zdt_dropdown_darkheading_text: rgb(153,153,153);
 	
 	/* focusscope */
-	--a11y_focusScope_focus_border: rgb(69,161,89);
+	--zdt_a11y_focusScope_focus_border: rgb(69,161,89);
 }

package/assets/Appearance/pureDark/themes/orange/orange_ComponentTheme_PureDarkTheme.module.css

@@ -1,45 +1,45 @@
 [data-mode='pureDark'][data-theme='orange'] {
 	/* stencil */
-	--stencil_dark_bg: rgb(33,33,33);
-	--stencil_dark_gradient_bg: linear-gradient(to left, #212121 0%, #262626 33.33%, #262626 66.66%, #212121 100%);
+	--zdt_stencil_dark_bg: rgb(33,33,33);
+	--zdt_stencil_dark_gradient_bg: linear-gradient(to left, #212121 0%, #262626 33.33%, #262626 66.66%, #212121 100%);
 	
 	/* dropbox */
-	--dropbox_dark_bg: rgb(33,33,33);
+	--zdt_dropbox_dark_bg: rgb(33,33,33);
 	
 	/* listitem */
-	--listitem_dark_bg: rgb(33,33,33);
-	--listitem_dark_text: rgb(226,228,230);
-	--listitem_dark_effect_bg: rgb(43,43,43);
-	--listitem_dark_active_bg: rgb(59,77,109);
-	--listitem_dark_tickicon: rgb(233,79,79);
+	--zdt_listitem_dark_bg: rgb(33,33,33);
+	--zdt_listitem_dark_text: rgb(226,228,230);
+	--zdt_listitem_dark_effect_bg: rgb(43,43,43);
+	--zdt_listitem_dark_active_bg: rgb(59,77,109);
+	--zdt_listitem_dark_tickicon: rgb(233,79,79);
 	
 	/* tag */
-	--tag_dark_text: rgb(208,208,212);
-	--tag_dark_bg: rgb(38,38,38);
-	--tag_dark_hover_text: rgb(208,208,212);
-	--tag_dark_hover_bg: rgb(80,51,72);
-	--tag_dark_close_bg: rgb(134,70,84);
-	--tag_dark_close_text: rgb(222,53,53);
+	--zdt_tag_dark_text: rgb(208,208,212);
+	--zdt_tag_dark_bg: rgb(38,38,38);
+	--zdt_tag_dark_hover_text: rgb(208,208,212);
+	--zdt_tag_dark_hover_bg: rgb(80,51,72);
+	--zdt_tag_dark_close_bg: rgb(134,70,84);
+	--zdt_tag_dark_close_text: rgb(222,53,53);
 	
 	/* multiselect */
-	--multiselect_dark_border: rgb(88,88,88);
-	--multiselect_darkmsg_bg: rgb(33,33,33);
-	--multiselect_darkmsg_text: rgb(208,208,212);
-	--multiselect_darkdelete_hover_text: rgb(226,228,230);
+	--zdt_multiselect_dark_border: rgb(88,88,88);
+	--zdt_multiselect_darkmsg_bg: rgb(33,33,33);
+	--zdt_multiselect_darkmsg_text: rgb(208,208,212);
+	--zdt_multiselect_darkdelete_hover_text: rgb(226,228,230);
 	
 	/* avatar */
-	--avatar_white_border: rgb(153,153,153);
-	--avatar_white_text: rgb(255,255,255);
+	--zdt_avatar_white_border: rgb(153,153,153);
+	--zdt_avatar_white_text: rgb(255,255,255);
 	
 	/* label */
-	--label_dark_text: rgb(208,208,212);
+	--zdt_label_dark_text: rgb(208,208,212);
 	
 	/* textbox */
-	--textbox_light_text: rgb(255,255,255);
+	--zdt_textbox_light_text: rgb(255,255,255);
 	
 	/* dropdown */
-	--dropdown_darkheading_text: rgb(153,153,153);
+	--zdt_dropdown_darkheading_text: rgb(153,153,153);
 	
 	/* focusscope */
-	--a11y_focusScope_focus_border: rgb(255,128,31);
+	--zdt_a11y_focusScope_focus_border: rgb(255,128,31);
 }

package/assets/Appearance/pureDark/themes/red/red_ComponentTheme_PureDarkTheme.module.css

@@ -1,45 +1,45 @@
 [data-mode='pureDark'][data-theme='red'] {
 	/* stencil */
-	--stencil_dark_bg: rgb(33,33,33);
-	--stencil_dark_gradient_bg: linear-gradient(to left, #212121 0%, #262626 33.33%, #262626 66.66%, #212121 100%);
+	--zdt_stencil_dark_bg: rgb(33,33,33);
+	--zdt_stencil_dark_gradient_bg: linear-gradient(to left, #212121 0%, #262626 33.33%, #262626 66.66%, #212121 100%);
 	
 	/* dropbox */
-	--dropbox_dark_bg: rgb(33,33,33);
+	--zdt_dropbox_dark_bg: rgb(33,33,33);
 	
 	/* listitem */
-	--listitem_dark_bg: rgb(33,33,33);
-	--listitem_dark_text: rgb(226,228,230);
-	--listitem_dark_effect_bg: rgb(43,43,43);
-	--listitem_dark_active_bg: rgb(59,77,109);
-	--listitem_dark_tickicon: rgb(255,128,31);
+	--zdt_listitem_dark_bg: rgb(33,33,33);
+	--zdt_listitem_dark_text: rgb(226,228,230);
+	--zdt_listitem_dark_effect_bg: rgb(43,43,43);
+	--zdt_listitem_dark_active_bg: rgb(59,77,109);
+	--zdt_listitem_dark_tickicon: rgb(255,128,31);
 	
 	/* tag */
-	--tag_dark_text: rgb(208,208,212);
-	--tag_dark_bg: rgb(38,38,38);
-	--tag_dark_hover_text: rgb(208,208,212);
-	--tag_dark_hover_bg: rgb(80,51,72);
-	--tag_dark_close_bg: rgb(134,70,84);
-	--tag_dark_close_text: rgb(222,53,53);
+	--zdt_tag_dark_text: rgb(208,208,212);
+	--zdt_tag_dark_bg: rgb(38,38,38);
+	--zdt_tag_dark_hover_text: rgb(208,208,212);
+	--zdt_tag_dark_hover_bg: rgb(80,51,72);
+	--zdt_tag_dark_close_bg: rgb(134,70,84);
+	--zdt_tag_dark_close_text: rgb(222,53,53);
 	
 	/* multiselect */
-	--multiselect_dark_border: rgb(88,88,88);
-	--multiselect_darkmsg_bg: rgb(33,33,33);
-	--multiselect_darkmsg_text: rgb(208,208,212);
-	--multiselect_darkdelete_hover_text: rgb(226,228,230);
+	--zdt_multiselect_dark_border: rgb(88,88,88);
+	--zdt_multiselect_darkmsg_bg: rgb(33,33,33);
+	--zdt_multiselect_darkmsg_text: rgb(208,208,212);
+	--zdt_multiselect_darkdelete_hover_text: rgb(226,228,230);
 	
 	/* avatar */
-	--avatar_white_border: rgb(153,153,153);
-	--avatar_white_text: rgb(255,255,255);
+	--zdt_avatar_white_border: rgb(153,153,153);
+	--zdt_avatar_white_text: rgb(255,255,255);
 	
 	/* label */
-	--label_dark_text: rgb(208,208,212);
+	--zdt_label_dark_text: rgb(208,208,212);
 	
 	/* textbox */
-	--textbox_light_text: rgb(255,255,255);
+	--zdt_textbox_light_text: rgb(255,255,255);
 	
 	/* dropdown */
-	--dropdown_darkheading_text: rgb(153,153,153);
+	--zdt_dropdown_darkheading_text: rgb(153,153,153);
 	
 	/* focusscope */
-	--a11y_focusScope_focus_border: rgb(233,79,79);
+	--zdt_a11y_focusScope_focus_border: rgb(233,79,79);
 }

package/assets/Appearance/pureDark/themes/yellow/yellow_ComponentTheme_PureDarkTheme.module.css

@@ -1,45 +1,45 @@
 [data-mode='pureDark'][data-theme='yellow'] {
 	/* stencil */
-	--stencil_dark_bg: rgb(33,33,33);
-	--stencil_dark_gradient_bg: linear-gradient(to left, #212121 0%, #262626 33.33%, #262626 66.66%, #212121 100%);
+	--zdt_stencil_dark_bg: rgb(33,33,33);
+	--zdt_stencil_dark_gradient_bg: linear-gradient(to left, #212121 0%, #262626 33.33%, #262626 66.66%, #212121 100%);
 	
 	/* dropbox */
-	--dropbox_dark_bg: rgb(33,33,33);
+	--zdt_dropbox_dark_bg: rgb(33,33,33);
 	
 	/* listitem */
-	--listitem_dark_bg: rgb(33,33,33);
-	--listitem_dark_text: rgb(226,228,230);
-	--listitem_dark_effect_bg: rgb(43,43,43);
-	--listitem_dark_active_bg: rgb(59,77,109);
-	--listitem_dark_tickicon: rgb(215,152,53);
+	--zdt_listitem_dark_bg: rgb(33,33,33);
+	--zdt_listitem_dark_text: rgb(226,228,230);
+	--zdt_listitem_dark_effect_bg: rgb(43,43,43);
+	--zdt_listitem_dark_active_bg: rgb(59,77,109);
+	--zdt_listitem_dark_tickicon: rgb(215,152,53);
 	
 	/* tag */
-	--tag_dark_text: rgb(208,208,212);
-	--tag_dark_bg: rgb(38,38,38);
-	--tag_dark_hover_text: rgb(208,208,212);
-	--tag_dark_hover_bg: rgb(80,51,72);
-	--tag_dark_close_bg: rgb(134,70,84);
-	--tag_dark_close_text: rgb(222,53,53);
+	--zdt_tag_dark_text: rgb(208,208,212);
+	--zdt_tag_dark_bg: rgb(38,38,38);
+	--zdt_tag_dark_hover_text: rgb(208,208,212);
+	--zdt_tag_dark_hover_bg: rgb(80,51,72);
+	--zdt_tag_dark_close_bg: rgb(134,70,84);
+	--zdt_tag_dark_close_text: rgb(222,53,53);
 	
 	/* multiselect */
-	--multiselect_dark_border: rgb(88,88,88);
-	--multiselect_darkmsg_bg: rgb(33,33,33);
-	--multiselect_darkmsg_text: rgb(208,208,212);
-	--multiselect_darkdelete_hover_text: rgb(226,228,230);
+	--zdt_multiselect_dark_border: rgb(88,88,88);
+	--zdt_multiselect_darkmsg_bg: rgb(33,33,33);
+	--zdt_multiselect_darkmsg_text: rgb(208,208,212);
+	--zdt_multiselect_darkdelete_hover_text: rgb(226,228,230);
 	
 	/* avatar */
-	--avatar_white_border: rgb(153,153,153);
-	--avatar_white_text: rgb(255,255,255);
+	--zdt_avatar_white_border: rgb(153,153,153);
+	--zdt_avatar_white_text: rgb(255,255,255);
 	
 	/* label */
-	--label_dark_text: rgb(208,208,212);
+	--zdt_label_dark_text: rgb(208,208,212);
 	
 	/* textbox */
-	--textbox_light_text: rgb(255,255,255);
+	--zdt_textbox_light_text: rgb(255,255,255);
 	
 	/* dropdown */
-	--dropdown_darkheading_text: rgb(153,153,153);
+	--zdt_dropdown_darkheading_text: rgb(153,153,153);
 	
 	/* focusscope */
-	--a11y_focusScope_focus_border: rgb(215,152,53);
+	--zdt_a11y_focusScope_focus_border: rgb(215,152,53);
 }

package/es/Button/__tests__/Button.spec.js

@@ -0,0 +1,61 @@
+// import React from 'react';
+// import Button from '../Button';
+// import {render} from "@testing-library/react"
+// describe('Button component', () => {
+//     test('Should be render with the basic set of default props', () => {
+//         const { asFragment } = render(<Button />);
+//         expect(asFragment()).toMatchSnapshot();
+//     });
+//     const palette = ['plainPrimary', 'plainSecondary', 'primary', 'primaryFilled', 'dangerFilled', 'secondary', 'secondaryFilled', 'successFilled', 'info', 'tertiaryFilled'];
+//     test.each(palette)('Should render palette of buttons - %s', (palette) => {
+//       const { asFragment } = render(<Button palette={palette} />);
+//       expect(asFragment()).toMatchSnapshot();
+//     });
+//     const size = ['small', 'medium', 'large', 'xlarge'];
+//     test.each(size)('Should render Sizes of buttons - %s', (size) => {
+//       const { asFragment } = render(<Button size={size} />);
+//       expect(asFragment()).toMatchSnapshot();
+//     });
+//     const status = ['loading', 'success', 'none'];
+//     test.each(status)('Should render Status of buttons - %s', (status) => {
+//       const { asFragment } = render(<Button status={status} />);
+//       expect(asFragment()).toMatchSnapshot();
+//     });
+//     const customStatus = ['loading', 'success'];
+//     test.each(customStatus)('Should render CustomStatusclassname of buttons - %s', (customStatus) => {
+//         const { asFragment } = render(<Button status={customStatus} customClass={{customStatus:"customStautusClassName"}} />);
+//       expect(asFragment()).toMatchSnapshot();
+//     });
+//     test('Should be render with the basic set of default props with disabled is true', () => {
+//         const { asFragment } = render(<Button disabled />);
+//         expect(asFragment()).toMatchSnapshot();
+//     });
+//     test('Should be render with the basic set of default props with isBold is false', () => {
+//         const { asFragment } = render(<Button isBold={false} />);
+//         expect(asFragment()).toMatchSnapshot();
+//     });
+//     test('Should be render with the basic set of default props with rounded is true', () => {
+//         const { asFragment } = render(<Button rounded />);
+//         expect(asFragment()).toMatchSnapshot();
+//     });
+//     test('Should be render with the basic set of default props with needAppearance is false', () => {
+//         const { asFragment } = render(<Button needAppearance={false} />);
+//         expect(asFragment()).toMatchSnapshot();
+//     });
+//     test('Should be render with the basic set customButtonclass with buttonClass ', () => {
+//         const { asFragment } = render(<Button customClass={{customButton:"customButtonClass"}} />);
+//         expect(asFragment()).toMatchSnapshot();
+//     });
+//     test('Should be render with the basic set customstatusSize props with buttonClass ', () => {
+//         const { asFragment } = render(<Button customClass={{customStatusSize:"customButtonClass"}} />);
+//         expect(asFragment()).toMatchSnapshot();
+//     });
+//     test('Should be render with the basic set customstyle ', () => {
+//         const { asFragment } = render(<Button customStyle={{bold: "buttonBold"}} />);
+//         expect(asFragment()).toMatchSnapshot();
+//     });
+//     test('Should be render with the customstyle with medium ', () => {
+//         const { asFragment } = render(<Button customStyle={{$medium: "buttonMedium"}} />);
+//         expect(asFragment()).toMatchSnapshot();
+//     });
+// });