Feat/16507/button link housekeeping (#16518)

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" />

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>
+`;

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;

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);

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>{' '}

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', () => {

ui/components/component-library/button-link/index.js

@@ -1 +1,2 @@
 export { ButtonLink } from './button-link';
+export { BUTTON_LINK_SIZES } from './button-link.constants';

ui/components/component-library/button-primary/button-primary.js

@@ -41,5 +41,3 @@ ButtonPrimary.propTypes = {
    */
   ...ButtonBase.propTypes,
 };
-
-export default ButtonPrimary;

ui/components/component-library/button-secondary/button-secondary.js

@@ -41,5 +41,3 @@ ButtonSecondary.propTypes = {
    */
   ...ButtonBase.propTypes,
 };
-
-export default ButtonSecondary;

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

ui/components/component-library/text/text.js

@@ -154,5 +154,3 @@ Text.propTypes = {
 };
 
 Text.displayName = 'Text'; // Used for React DevTools profiler
-
-export default Text;