feat(button): add whatsapp color for buttons according to new design (#…

…80)
hey-car · Sep 21, 2022 · 4c8917f · 4c8917f · github-actions · Sep 21, 2022
1 parent 862d413
commit 4c8917f
Show file tree

Hide file tree

Showing 15 changed files with 215 additions and 33 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/button/src/Button.types.ts b/packages/button/src/Button.types.ts
@@ -12,7 +12,7 @@ export interface ComponentProps {
   /**
    * Set the color of the button
    */
-  color?: 'primary' | 'tertiary';
+  color?: 'primary' | 'tertiary' | 'whatsapp';
   /**
    * View of the button
    */

diff --git a/packages/button/src/__tests__/Button.screenshots.test.tsx b/packages/button/src/__tests__/Button.screenshots.test.tsx
@@ -73,6 +73,26 @@ describe(
   }),
 );
 
+describe(
+  'Whatsapp button colors size=middle',
+  screenshotTesting({
+    cases: [
+      [
+        'sprite',
+        createStorybookUrl({
+          packageName,
+          knobs: {
+            color: 'whatsapp',
+            size: 'middle',
+            children: 'WhatsApp',
+          },
+        }),
+      ],
+    ],
+    screenshotOpts: { clip },
+  }),
+);
+
 describe('Button events tests', () => {
   test('Button hover event', async () => {
     const pageUrl = createStorybookUrl({

diff --git a/packages/button/src/__tests__/Button.snapshot.test.tsx b/packages/button/src/__tests__/Button.snapshot.test.tsx
@@ -24,6 +24,12 @@ describe('Button Snapshots tests', () => {
     expect(render(<Button color="tertiary" />)).toMatchSnapshot();
   });
 
+  it('should render whatsapp color', () => {
+    expect(
+      render(<Button color="whatsapp" children="WhatsApp" />),
+    ).toMatchSnapshot();
+  });
+
   it('should render button by default', () => {
     expect(render(<Button />)).toMatchSnapshot();
   });

diff --git a/...on/src/__tests__/__image_snapshots__/Button colors size=large sprite-3-snap.png b/...on/src/__tests__/__image_snapshots__/Button colors size=large sprite-3-snap.png
diff --git a/...__tests__/__image_snapshots__/Whatsapp button colors size=large sprite-snap.png b/...__tests__/__image_snapshots__/Whatsapp button colors size=large sprite-snap.png
diff --git a/..._tests__/__image_snapshots__/Whatsapp button colors size=middle sprite-snap.png b/..._tests__/__image_snapshots__/Whatsapp button colors size=middle sprite-snap.png
diff --git a/packages/button/src/__tests__/__snapshots__/Button.snapshot.test.tsx.snap b/packages/button/src/__tests__/__snapshots__/Button.snapshot.test.tsx.snap
@@ -744,3 +744,84 @@ Object {
   "unmount": [Function],
 }
 `;
+
+exports[`Button Snapshots tests should render whatsapp color 1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <button
+        class="button whatsapp contained large"
+      >
+        <span
+          class="text"
+        >
+          WhatsApp
+        </span>
+      </button>
+    </div>
+  </body>,
+  "container": <div>
+    <button
+      class="button whatsapp contained large"
+    >
+      <span
+        class="text"
+      >
+        WhatsApp
+      </span>
+    </button>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
diff --git a/packages/button/src/docs/Description.mdx b/packages/button/src/docs/Description.mdx
@@ -1,4 +1,5 @@
 import { Container, Row, Col } from 'storybook/blocks';
+import { Whatsapp } from '../../../icons/src';
 import Button from '../Button';
 
 ## Variants
@@ -68,6 +69,7 @@ render(
 
 Use the `color` prop to change the color of the Button.
 You can set the value to solid, `primary` (default) and `tertiary`.
+For whatsapp button, you can set the color value `whatsapp`
 
 ```tsx live
 const buttonColors = ['primary', 'tertiary'];
@@ -82,15 +84,18 @@ render(
           </Button>
         </Col>
       ))}
+      <Col key="whatsapp">
+        <Button size="large" color="whatsapp">
+          WhatsApp
+        </Button>
+      </Col>
     </Row>
     <Row align="middle">
-      {buttonColors.map(color => (
-        <Col key={color}>
-          <Button size="large" variant="outlined" color={color}>
-            Button CTA
-          </Button>
-        </Col>
-      ))}
+      <Col key="primary">
+        <Button size="large" variant="outlined" color="primary">
+          Button CTA
+        </Button>
+      </Col>
     </Row>
   </Container>,
 );
@@ -113,6 +118,15 @@ render(
           </Button>
         </Col>
       ))}
+      <Col key="large">
+        <Button
+          leftIcon={<Whatsapp fontSize="20" />}
+          color="whatsapp"
+          size="large"
+        >
+          WhatsApp
+        </Button>
+      </Col>
     </Row>
     <Row>
       <Col>
St.^❔	Category	Percentage	Covered / Total
🟢	Statements	99.36%	777/782
🟢	Branches	90.98%	111/122
🟢	Functions	97.37%	37/38
🟢	Lines	99.73%	728/730