Merge pull request #342 from Capgemini/feature/button-value

feat: button-value
Capgemini · Sep 20, 2022 · 94d80f6 · 94d80f6
2 parents df663fe + 5d02929
commit 94d80f6
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 1 deletion.
diff --git a/src/button/Button.tsx b/src/button/Button.tsx
@@ -64,6 +64,10 @@ type ButtonProps = React.HTMLAttributes<HTMLButtonElement> & {
    * allow the user to define the buttons name
    */
   name?: string;
+  /**
+   * allow the user to define the button value
+   */
+  value?: string | number; 
 };
 
 export const Button = ({
@@ -81,6 +85,7 @@ export const Button = ({
   customLoadingPostImage,
   formAction,
   name,
+  value,
   ...props
 }: ButtonProps) => {
   const [disable, setDisable] = React.useState<boolean>(disabled);
@@ -130,6 +135,7 @@ export const Button = ({
       aria-label={ariaLabel}
       formAction={formAction}
       name={name}
+      value={value}
       {...props}
     >
       {prefix}

diff --git a/src/button/__tests__/Button.test.tsx b/src/button/__tests__/Button.test.tsx
@@ -216,4 +216,11 @@ describe('Button', () => {
     const button: any = screen.getByRole('button');
     expect(button.getAttribute('name')).toBe('submit');
   });
+
+  it('should accept value as attribute', () => {
+    const handleClick = jest.fn();
+    render(<Button onClick={handleClick} value='buttonValue'/>);
+    const button: any = screen.getByRole('button');
+    expect(button.getAttribute('value')).toBe('buttonValue');
+  });
 });
diff --git a/stories/Button/Documentation.stories.mdx b/stories/Button/Documentation.stories.mdx
@@ -29,7 +29,8 @@ An example with all the available properties is:
   onClick={buttonHandler}
   disableClickForMs={2000}
   disable={true}
-  isLoading={true},
+  isLoading={true}
+  value={value}
   loadingLabel="loading..."
   customLoadingPreImage={<span>spinner</span>}
   customLoadingPostImage={<span>spinner</span>}

diff --git a/stories/liveEdit/ButtonLive.tsx b/stories/liveEdit/ButtonLive.tsx
@@ -33,6 +33,7 @@ function ButtonDemo() {
         customPostfixImg={<></>} 
         customPrefixImg={<></>} 
         isLoading={isLoading} 
+        value={value}
         loadingLabel="saving..." 
         customLoadingPreImage={<></>} 
         customLoadingPostImage={<></>}