HelpText house keeping updates (#16681)

ui/components/component-library/help-text/README.mdx

@@ -1,5 +1,7 @@
 import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
 
+import { Text } from '..';
+
 import { HelpText } from './help-text';
 
 # HelpText
@@ -12,13 +14,17 @@ The `HelpText` is intended to be used as the help or error text under a form ele
 
 ## Props
 
-The `HelpText` accepts all props below as well as all [Text](/docs/ui-components-component-library-text-text-stories-js--default-story#props) and [Box](/docs/ui-components-ui-box-box-stories-js--default-story#props) component props.
+The `HelpText` accepts all props below as well as all [Box](/docs/ui-components-ui-box-box-stories-js--default-story#props) component props
 
 <ArgsTable of={HelpText} />
 
+`HelpText` accepts all [Text](/docs/ui-components-component-library-text-text-stories-js--default-story#props) component props
+
+<ArgsTable of={Text} />
+
 ### Children
 
-The `children` of the `HelpText` can be plain text or react nodes.
+The `children` of the `HelpText` can be plain text or react nodes
 
 <Canvas>
   <Story id="ui-components-component-library-help-text-help-text-stories-js--children" />
@@ -26,8 +32,7 @@ The `children` of the `HelpText` can be plain text or react nodes.
 
 ```jsx
 import { SIZES, COLORS } from '../../../helpers/constants/design-system';
-import { Icon, ICON_NAMES } from '../../ui/components/component-library';
+import { HelpText, Icon, ICON_NAMES } from '../../component-library';
-import { HelpText } from '../../ui/components/component-library';
 
 <HelpText>Plain text</HelpText>
 <HelpText>
@@ -43,14 +48,14 @@ import { HelpText } from '../../ui/components/component-library';
 
 ### Error
 
-Use the `error` prop to show the `HelpText` in error state.
+Use the `error` prop to show the `HelpText` in error state
 
 <Canvas>
   <Story id="ui-components-component-library-help-text-help-text-stories-js--error-story" />
 </Canvas>
 
 ```jsx
-import { HelpText } from '../../ui/components/component-library';
+import { HelpText } from '../../component-library';
 
 <HelpText error>This HelpText in error state</HelpText>;
 ```
@@ -65,7 +70,7 @@ It may be useful to change the color of the `HelpText`. Use the `color` prop and
 
 ```jsx
 import { COLORS } from '../../../helpers/constants/design-system';
-import { HelpText } from '../../ui/components/component-library';
+import { HelpText } from '../../component-library';
 
 <Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.COLUMN} gap={2}>
   <HelpText color={COLORS.TEXT_DEFAULT}>

ui/components/component-library/help-text/__snapshots__/help-text.test.js.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`HelpText should render with text inside the HelpText 1`] = `
+<div>
+  <span
+    class="box text mm-help-text text--body-xs text--color-text-default box--flex-direction-row"
+  >
+    help text
+  </span>
+</div>
+`;

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

@@ -18,8 +18,8 @@ export const HelpText = ({
   ...props
 }) => (
   <Text
-    as="span"
     className={classnames('mm-help-text', className)}
+    as="span"
     variant={TEXT.BODY_XS}
     color={error ? COLORS.ERROR_DEFAULT : color}
     {...props}

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

@@ -8,7 +8,8 @@ import {
 } from '../../../helpers/constants/design-system';
 
 import Box from '../../ui/box';
-import { Icon, ICON_NAMES } from '../icon';
+
+import { Icon, ICON_NAMES } from '..';
 
 import { HelpText } from './help-text';
 

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

@@ -8,8 +8,16 @@ import { HelpText } from './help-text';
 
 describe('HelpText', () => {
   it('should render with text inside the HelpText', () => {
-    const { getByText } = render(<HelpText>help text</HelpText>);
+    const { getByText, container } = render(<HelpText>help text</HelpText>);
     expect(getByText('help text')).toBeDefined();
+    expect(getByText('help text')).toHaveClass('mm-help-text');
+    expect(container).toMatchSnapshot();
+  });
+  it('should render with and additional className', () => {
+    const { getByText } = render(
+      <HelpText className="test-class">help text</HelpText>,
+    );
+    expect(getByText('help text')).toHaveClass('mm-help-text test-class');
   });
   it('should render with react nodes inside the HelpText', () => {
     const { getByText, getByTestId } = render(
@@ -20,19 +28,8 @@ describe('HelpText', () => {
     expect(getByText('help text')).toBeDefined();
     expect(getByTestId('icon')).toBeDefined();
   });
-  it('should render with and additional className', () => {
-    const { getByText } = render(
-      <HelpText className="test-class">help text</HelpText>,
-    );
-    expect(getByText('help text')).toBeDefined();
-    expect(getByText('help text')).toHaveClass('test-class');
-  });
   it('should render with error state', () => {
-    const { getByText } = render(
+    const { getByText } = render(<HelpText error>error</HelpText>);
-      <>
-        <HelpText error>error</HelpText>
-      </>,
-    );
     expect(getByText('error')).toHaveClass('text--color-error-default');
   });
   it('should render with different colors', () => {