From d4bf8adaf83385b62b995677b9ae2304db3f764e Mon Sep 17 00:00:00 2001
From: Garrett Bear <gwhisten@gmail.com>
Date: Tue, 15 Nov 2022 12:48:24 -0800
Subject: [PATCH] button secondary housekeeping (#16495)

* button secondary housekeeping

* add snapshot

* add export constants
---
 .../component-library/button-primary/index.js    |  1 +
 .../button-secondary/README.mdx                  |  2 +-
 .../__snapshots__/button-secondary.test.js.snap  | 16 ++++++++++++++++
 .../button-secondary/button-secondary.js         |  2 +-
 .../button-secondary/button-secondary.stories.js | 12 ++++++++----
 .../button-secondary/button-secondary.test.js    |  1 +
 .../component-library/button-secondary/index.js  |  1 +
 7 files changed, 29 insertions(+), 6 deletions(-)
 create mode 100644 ui/components/component-library/button-secondary/__snapshots__/button-secondary.test.js.snap

diff --git a/ui/components/component-library/button-primary/index.js b/ui/components/component-library/button-primary/index.js
index e6b99af4c..744f8bb3a 100644
--- a/ui/components/component-library/button-primary/index.js
+++ b/ui/components/component-library/button-primary/index.js
@@ -1 +1,2 @@
 export { ButtonPrimary } from './button-primary';
+export { BUTTON_PRIMARY_SIZES } from './button-primary.constants';
diff --git a/ui/components/component-library/button-secondary/README.mdx b/ui/components/component-library/button-secondary/README.mdx
index fba6ebb61..fe363f4a3 100644
--- a/ui/components/component-library/button-secondary/README.mdx
+++ b/ui/components/component-library/button-secondary/README.mdx
@@ -43,7 +43,7 @@ import { ButtonSecondary } from '../ui/component-library/button/button-secondary
 
 ### Danger
 
-Use the `danger` boolean prop to change the `ButtonPrimary` to danger color.
+Use the `danger` boolean prop to change the `ButtonSecondary` to danger color.
 
 <Canvas>
   <Story id="ui-components-component-library-button-secondary-button-secondary-stories-js--danger" />
diff --git a/ui/components/component-library/button-secondary/__snapshots__/button-secondary.test.js.snap b/ui/components/component-library/button-secondary/__snapshots__/button-secondary.test.js.snap
new file mode 100644
index 000000000..05673f3ca
--- /dev/null
+++ b/ui/components/component-library/button-secondary/__snapshots__/button-secondary.test.js.snap
@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ButtonSecondary should render button element correctly 1`] = `
+<div>
+  <button
+    class="box mm-button mm-button--size-md mm-button-secondary box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center"
+    data-testid="button-secondary"
+  >
+    <span
+      class="box text mm-button__content text--body-md text--color-inherit box--gap-2 box--flex-direction-row box--justify-content-center box--align-items-center box--display-flex"
+    >
+      Button Secondary
+    </span>
+  </button>
+</div>
+`;
diff --git a/ui/components/component-library/button-secondary/button-secondary.js b/ui/components/component-library/button-secondary/button-secondary.js
index 86a9ca8e7..eff2e3349 100644
--- a/ui/components/component-library/button-secondary/button-secondary.js
+++ b/ui/components/component-library/button-secondary/button-secondary.js
@@ -32,7 +32,7 @@ ButtonSecondary.propTypes = {
    */
   danger: PropTypes.bool,
   /**
-   * The possible size values for ButtonSecondary: 'SIZES.SM', 'SIZES.MD', 'SIZES.LG',
+   * Possible size values: 'SIZES.SM'(32px), 'SIZES.MD'(40px), 'SIZES.LG'(48px).
    * Default value is 'SIZES.MD'.
    */
   size: PropTypes.oneOf(Object.values(BUTTON_SECONDARY_SIZES)),
diff --git a/ui/components/component-library/button-secondary/button-secondary.stories.js b/ui/components/component-library/button-secondary/button-secondary.stories.js
index 6ae2ed76d..194b55cca 100644
--- a/ui/components/component-library/button-secondary/button-secondary.stories.js
+++ b/ui/components/component-library/button-secondary/button-secondary.stories.js
@@ -1,5 +1,9 @@
 import React from 'react';
-import { ALIGN_ITEMS, DISPLAY } from '../../../helpers/constants/design-system';
+import {
+  ALIGN_ITEMS,
+  DISPLAY,
+  SIZES,
+} from '../../../helpers/constants/design-system';
 import Box from '../../ui/box/box';
 import { ICON_NAMES } from '../icon';
 import { ButtonSecondary } from './button-secondary';
@@ -110,13 +114,13 @@ DefaultStory.storyName = 'Default';
 
 export const Size = (args) => (
   <Box display={DISPLAY.FLEX} alignItems={ALIGN_ITEMS.BASELINE} gap={1}>
-    <ButtonSecondary {...args} size={BUTTON_SECONDARY_SIZES.SM}>
+    <ButtonSecondary {...args} size={SIZES.SM}>
       Small Button
     </ButtonSecondary>
-    <ButtonSecondary {...args} size={BUTTON_SECONDARY_SIZES.MD}>
+    <ButtonSecondary {...args} size={SIZES.MD}>
       Medium (Default) Button
     </ButtonSecondary>
-    <ButtonSecondary {...args} size={BUTTON_SECONDARY_SIZES.LG}>
+    <ButtonSecondary {...args} size={SIZES.LG}>
       Large Button
     </ButtonSecondary>
   </Box>
diff --git a/ui/components/component-library/button-secondary/button-secondary.test.js b/ui/components/component-library/button-secondary/button-secondary.test.js
index 5d7eb1a4d..8b2b14896 100644
--- a/ui/components/component-library/button-secondary/button-secondary.test.js
+++ b/ui/components/component-library/button-secondary/button-secondary.test.js
@@ -14,6 +14,7 @@ describe('ButtonSecondary', () => {
     expect(getByText('Button Secondary')).toBeDefined();
     expect(container.querySelector('button')).toBeDefined();
     expect(getByTestId('button-secondary')).toHaveClass('mm-button');
+    expect(container).toMatchSnapshot();
   });
 
   it('should render anchor element correctly', () => {
diff --git a/ui/components/component-library/button-secondary/index.js b/ui/components/component-library/button-secondary/index.js
index 6b1d2869f..bccde44c2 100644
--- a/ui/components/component-library/button-secondary/index.js
+++ b/ui/components/component-library/button-secondary/index.js
@@ -1 +1,2 @@
 export { ButtonSecondary } from './button-secondary';
+export { BUTTON_SECONDARY_SIZES } from './button-secondary.constants';