From e11203c2cdc485ce2c158dee43bc6ecc522a79b5 Mon Sep 17 00:00:00 2001
From: Garrett Bear <gwhisten@gmail.com>
Date: Fri, 18 Nov 2022 12:36:33 -0800
Subject: [PATCH] Feat/16507/button link housekeeping (#16518)

---
 .../component-library/button-link/README.mdx     |  2 +-
 .../__snapshots__/button-link.test.js.snap       | 16 ++++++++++++++++
 .../component-library/button-link/button-link.js |  6 +++---
 .../button-link/button-link.scss                 |  1 -
 .../button-link/button-link.stories.js           |  2 +-
 .../button-link/button-link.test.js              |  1 +
 .../component-library/button-link/index.js       |  1 +
 .../button-primary/button-primary.js             |  2 --
 .../button-secondary/button-secondary.js         |  2 --
 .../button/__snapshots__/button.test.js.snap     |  2 +-
 ui/components/component-library/text/text.js     |  2 --
 11 files changed, 24 insertions(+), 13 deletions(-)
 create mode 100644 ui/components/component-library/button-link/__snapshots__/button-link.test.js.snap

diff --git a/ui/components/component-library/button-link/README.mdx b/ui/components/component-library/button-link/README.mdx
index 0d51dc036..ec2d74198 100644
--- a/ui/components/component-library/button-link/README.mdx
+++ b/ui/components/component-library/button-link/README.mdx
@@ -45,7 +45,7 @@ import { ButtonLink } from '../../ui/components/component-library';
 
 ### Danger
 
-Use the `danger` boolean prop to change the `ButtonPrimary` to danger color.
+Use the `danger` boolean prop to change the `ButtonLink` to danger color.
 
 <Canvas>
   <Story id="ui-components-component-library-button-link-button-link-stories-js--danger" />
diff --git a/ui/components/component-library/button-link/__snapshots__/button-link.test.js.snap b/ui/components/component-library/button-link/__snapshots__/button-link.test.js.snap
new file mode 100644
index 000000000..a992c1b40
--- /dev/null
+++ b/ui/components/component-library/button-link/__snapshots__/button-link.test.js.snap
@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ButtonLink should render button element correctly 1`] = `
+<div>
+  <button
+    class="box mm-button mm-button--size-md mm-button-link box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--background-color-transparent"
+    data-testid="button-link"
+  >
+    <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 Link
+    </span>
+  </button>
+</div>
+`;
diff --git a/ui/components/component-library/button-link/button-link.js b/ui/components/component-library/button-link/button-link.js
index f1bfc2c1f..4497d8df5 100644
--- a/ui/components/component-library/button-link/button-link.js
+++ b/ui/components/component-library/button-link/button-link.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
 import { ButtonBase } from '../button-base';
+import { COLORS } from '../../../helpers/constants/design-system';
 import { BUTTON_LINK_SIZES } from './button-link.constants';
 
 export const ButtonLink = ({
@@ -17,6 +18,7 @@ export const ButtonLink = ({
         'mm-button-link--type-danger': danger,
       })}
       size={size}
+      backgroundColor={COLORS.TRANSPARENT}
       {...props}
     />
   );
@@ -32,7 +34,7 @@ ButtonLink.propTypes = {
    */
   danger: PropTypes.bool,
   /**
-   * The possible size values for ButtonLink: 'SIZES.AUTO', 'SIZES.SM', 'SIZES.MD', 'SIZES.LG',
+   * Possible size values: 'SIZES.AUTO', 'SIZES.SM'(32px), 'SIZES.MD'(40px), 'SIZES.LG'(48px).
    * Default value is 'SIZES.MD'.
    */
   size: PropTypes.oneOf(Object.values(BUTTON_LINK_SIZES)),
@@ -41,5 +43,3 @@ ButtonLink.propTypes = {
    */
   ...ButtonBase.propTypes,
 };
-
-export default ButtonLink;
diff --git a/ui/components/component-library/button-link/button-link.scss b/ui/components/component-library/button-link/button-link.scss
index c17815c6c..e38d0b0a1 100644
--- a/ui/components/component-library/button-link/button-link.scss
+++ b/ui/components/component-library/button-link/button-link.scss
@@ -1,6 +1,5 @@
 .mm-button-link {
   color: var(--color-primary-default);
-  background-color: transparent;
 
   &:hover {
     color: var(--color-primary-default);
diff --git a/ui/components/component-library/button-link/button-link.stories.js b/ui/components/component-library/button-link/button-link.stories.js
index d068ff0ff..795dc96a2 100644
--- a/ui/components/component-library/button-link/button-link.stories.js
+++ b/ui/components/component-library/button-link/button-link.stories.js
@@ -130,7 +130,7 @@ export const Size = (args) => (
         Large Button
       </ButtonLink>
     </Box>
-    <Text variant={TEXT.BODY_SM}>
+    <Text variant={TEXT.BODY_MD}>
       <ButtonLink {...args} size={SIZES.AUTO}>
         Button Auto
       </ButtonLink>{' '}
diff --git a/ui/components/component-library/button-link/button-link.test.js b/ui/components/component-library/button-link/button-link.test.js
index 2c246f969..be6deb2b4 100644
--- a/ui/components/component-library/button-link/button-link.test.js
+++ b/ui/components/component-library/button-link/button-link.test.js
@@ -12,6 +12,7 @@ describe('ButtonLink', () => {
     expect(getByText('Button Link')).toBeDefined();
     expect(container.querySelector('button')).toBeDefined();
     expect(getByTestId('button-link')).toHaveClass('mm-button');
+    expect(container).toMatchSnapshot();
   });
 
   it('should render anchor element correctly', () => {
diff --git a/ui/components/component-library/button-link/index.js b/ui/components/component-library/button-link/index.js
index 64bf08bb6..6826e61cb 100644
--- a/ui/components/component-library/button-link/index.js
+++ b/ui/components/component-library/button-link/index.js
@@ -1 +1,2 @@
 export { ButtonLink } from './button-link';
+export { BUTTON_LINK_SIZES } from './button-link.constants';
diff --git a/ui/components/component-library/button-primary/button-primary.js b/ui/components/component-library/button-primary/button-primary.js
index 6b7fce938..a0a62b4f9 100644
--- a/ui/components/component-library/button-primary/button-primary.js
+++ b/ui/components/component-library/button-primary/button-primary.js
@@ -41,5 +41,3 @@ ButtonPrimary.propTypes = {
    */
   ...ButtonBase.propTypes,
 };
-
-export default ButtonPrimary;
diff --git a/ui/components/component-library/button-secondary/button-secondary.js b/ui/components/component-library/button-secondary/button-secondary.js
index eff2e3349..4ca334140 100644
--- a/ui/components/component-library/button-secondary/button-secondary.js
+++ b/ui/components/component-library/button-secondary/button-secondary.js
@@ -41,5 +41,3 @@ ButtonSecondary.propTypes = {
    */
   ...ButtonBase.propTypes,
 };
-
-export default ButtonSecondary;
diff --git a/ui/components/component-library/button/__snapshots__/button.test.js.snap b/ui/components/component-library/button/__snapshots__/button.test.js.snap
index a2da87852..7edf642fb 100644
--- a/ui/components/component-library/button/__snapshots__/button.test.js.snap
+++ b/ui/components/component-library/button/__snapshots__/button.test.js.snap
@@ -38,7 +38,7 @@ exports[`Button should render with different button types 1`] = `
     </span>
   </button>
   <button
-    class="box mm-button mm-button--size-md mm-button-link box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center"
+    class="box mm-button mm-button--size-md mm-button-link box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--background-color-transparent"
     data-testid="link"
   >
     <span
diff --git a/ui/components/component-library/text/text.js b/ui/components/component-library/text/text.js
index d252f59ef..9b201f5ad 100644
--- a/ui/components/component-library/text/text.js
+++ b/ui/components/component-library/text/text.js
@@ -154,5 +154,3 @@ Text.propTypes = {
 };
 
 Text.displayName = 'Text'; // Used for React DevTools profiler
-
-export default Text;