Adding HelpText component (#16293)

* Adding initial HelpText component

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

@@ -0,0 +1,84 @@
+import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+
+import { HelpText } from './help-text';
+
+# HelpText
+
+The `HelpText` is intended to be used as the help or error text under a form element
+
+<Canvas>
+  <Story id="ui-components-component-library-help-text-help-text-stories-js--default-story" />
+</Canvas>
+
+## 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.
+
+<ArgsTable of={HelpText} />
+
+### Children
+
+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" />
+</Canvas>
+
+```jsx
+import { SIZES, COLORS } from '../../../helpers/constants/design-system';
+import { Icon, ICON_NAMES } from '../../ui/component-library/icon';
+import { HelpText } from '../../ui/component-library/help-text';
+
+<HelpText>Plain text</HelpText>
+<HelpText>
+  Text and icon
+  <Icon
+    marginLeft={1}
+    color={COLORS.INHERIT}
+    name={ICON_NAMES.WARNING_FILLED}
+    size={SIZES.AUTO}
+  />
+</HelpText>
+```
+
+### Error
+
+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/component-library/help-text';
+
+<HelpText error>This HelpText in error state</HelpText>;
+```
+
+### Color
+
+It may be useful to change the color of the `HelpText`. Use the `color` prop and the `COLORS` object to change the color of the `HelpText`. Defaults to `COLORS.TEXT_DEFAULT`.
+
+<Canvas>
+  <Story id="ui-components-component-library-help-text-help-text-stories-js--color" />
+</Canvas>
+
+```jsx
+import { COLORS } from '../../../helpers/constants/design-system';
+import { HelpText } from '../../ui/component-library/help-text';
+
+<Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.COLUMN} gap={2}>
+  <HelpText color={COLORS.TEXT_DEFAULT}>
+    The HelpText default color is COLORS.TEXT_DEFAULT
+  </HelpText>
+  <HelpText color={COLORS.INFO_DEFAULT}>
+    This HelpText color is COLORS.INFO_DEFAULT
+  </HelpText>
+  <HelpText color={COLORS.WARNING_DEFAULT}>
+    This HelpText color is COLORS.WARNING_DEFAULT
+  </HelpText>
+  <HelpText color={COLORS.SUCCESS_DEFAULT}>
+    This HelpText color is COLORS.SUCCESS_DEFAULT
+  </HelpText>
+</Box>;
+```

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

@@ -0,0 +1,54 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+
+import {
+  COLORS,
+  TEXT,
+  TEXT_COLORS,
+} from '../../../helpers/constants/design-system';
+
+import { Text } from '../text';
+
+export const HelpText = ({
+  error,
+  color = COLORS.TEXT_DEFAULT,
+  className,
+  children,
+  ...props
+}) => (
+  <Text
+    as="span"
+    className={classnames('mm-help-text', className)}
+    variant={TEXT.BODY_XS}
+    color={error ? COLORS.ERROR_DEFAULT : color}
+    {...props}
+  >
+    {children}
+  </Text>
+);
+
+HelpText.propTypes = {
+  /**
+   * If the HelperText should display in error state
+   * Will override the color prop if true
+   */
+  error: PropTypes.bool,
+  /**
+   * The color of the HelpText will be overridden if error is true
+   * Defaults to COLORS.TEXT_DEFAULT
+   */
+  color: PropTypes.oneOf(Object.values[TEXT_COLORS]),
+  /**
+   * The content of the help-text
+   */
+  children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  /**
+   * Additional classNames to be added to the HelpText component
+   */
+  className: PropTypes.string,
+  /**
+   * HelpText also accepts all Text and Box props
+   */
+  ...Text.propTypes,
+};

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

@@ -0,0 +1,88 @@
+import React from 'react';
+import {
+  DISPLAY,
+  FLEX_DIRECTION,
+  COLORS,
+  TEXT_COLORS,
+  SIZES,
+} from '../../../helpers/constants/design-system';
+
+import Box from '../../ui/box';
+import { Icon, ICON_NAMES } from '../icon';
+
+import { HelpText } from './help-text';
+
+import README from './README.mdx';
+
+export default {
+  title: 'Components/ComponentLibrary/HelpText',
+  id: __filename,
+  component: HelpText,
+  parameters: {
+    docs: {
+      page: README,
+    },
+  },
+  argTypes: {
+    children: {
+      control: 'text',
+    },
+    className: {
+      control: 'text',
+    },
+    error: {
+      control: 'boolean',
+    },
+    color: {
+      control: 'select',
+      options: Object.values(TEXT_COLORS),
+    },
+  },
+  args: {
+    children: 'Help text',
+  },
+};
+
+const Template = (args) => <HelpText {...args} />;
+
+export const DefaultStory = Template.bind({});
+DefaultStory.storyName = 'Default';
+
+export const Children = (args) => (
+  <Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.COLUMN} gap={2}>
+    <HelpText {...args}>Plain text</HelpText>
+    <HelpText {...args}>
+      Text and icon
+      <Icon
+        marginLeft={1}
+        color={COLORS.INHERIT}
+        name={ICON_NAMES.WARNING_FILLED}
+        size={SIZES.AUTO}
+      />
+    </HelpText>
+  </Box>
+);
+
+export const ErrorStory = (args) => (
+  <HelpText error {...args}>
+    This HelpText in error state
+  </HelpText>
+);
+ErrorStory.storyName = 'Error';
+
+export const Color = (args) => (
+  <Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.COLUMN} gap={2}>
+    <HelpText color={COLORS.TEXT_DEFAULT} {...args}>
+      This HelpText default color is COLORS.TEXT_DEFAULT
+    </HelpText>
+    <HelpText color={COLORS.INFO_DEFAULT} {...args}>
+      This HelpText color is COLORS.INFO_DEFAULT
+    </HelpText>
+    <HelpText color={COLORS.WARNING_DEFAULT} {...args}>
+      This HelpText color is COLORS.WARNING_DEFAULT
+    </HelpText>
+    <HelpText color={COLORS.SUCCESS_DEFAULT} {...args}>
+      This HelpText color is COLORS.SUCCESS_DEFAULT
+    </HelpText>
+  </Box>
+);

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

@@ -0,0 +1,52 @@
+/* eslint-disable jest/require-top-level-describe */
+import { render } from '@testing-library/react';
+import React from 'react';
+import { COLORS } from '../../../helpers/constants/design-system';
+import { Icon, ICON_NAMES } from '../icon';
+
+import { HelpText } from './help-text';
+
+describe('HelpText', () => {
+  it('should render with text inside the HelpText', () => {
+    const { getByText } = render(<HelpText>help text</HelpText>);
+    expect(getByText('help text')).toBeDefined();
+  });
+  it('should render with react nodes inside the HelpText', () => {
+    const { getByText, getByTestId } = render(
+      <HelpText>
+        help text <Icon name={ICON_NAMES.WARNING_FILLED} data-testid="icon" />
+      </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(
+      <>
+        <HelpText error>error</HelpText>
+      </>,
+    );
+    expect(getByText('error')).toHaveClass('text--color-error-default');
+  });
+  it('should render with different colors', () => {
+    const { getByText } = render(
+      <>
+        <HelpText>default</HelpText>
+        <HelpText color={COLORS.WARNING_DEFAULT}>warning</HelpText>
+        <HelpText color={COLORS.SUCCESS_DEFAULT}>success</HelpText>
+        <HelpText color={COLORS.INFO_DEFAULT}>info</HelpText>
+      </>,
+    );
+    expect(getByText('default')).toHaveClass('text--color-text-default');
+    expect(getByText('warning')).toHaveClass('text--color-warning-default');
+    expect(getByText('success')).toHaveClass('text--color-success-default');
+    expect(getByText('info')).toHaveClass('text--color-info-default');
+  });
+});

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

@@ -0,0 +1 @@
+export { HelpText } from './help-text';