War-51: New Prose component

packages/comet/src/components/index.ts

@@ -23,6 +23,7 @@ export { default as Label } from './label';
 export { default as Modal } from './modal';
 export { default as Pagination } from './pagination';
 export { default as ProcessList } from './process-list';
+export { default as Prose } from './prose';
 export { default as RadioButton } from './radio-button';
 export { default as RangeSlider } from './range-slider';
 export { default as Search } from './search';

packages/comet/src/components/prose/index.ts

@@ -0,0 +1 @@
+export { default } from './prose';

packages/comet/src/components/prose/prose.stories.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { StoryFn, Meta } from '@storybook/react';
+import { Prose } from '../../index';
+import { ProseProps } from './prose';
+
+const meta: Meta<typeof Prose> = {
+  title: 'USWDS/Prose',
+  component: Prose,
+  argTypes: {
+    id: { required: true }
+  }
+};
+export default meta;
+
+const Template: StoryFn<typeof Prose> = (args: ProseProps) => <Prose {...args}>
+  <p>
+    <strong>75 characters (68ex) max-width:</strong> Yosemite National Park is
+    set within California’s Sierra Nevada mountains. It’s famed for its giant,
+    ancient sequoias, and for Tunnel View, the iconic vista of towering
+    Bridalveil Fall and the granite cliffs of El Capitan and Half Dome.
+  </p>
+</Prose>;
+
+export const Default = Template.bind({});
+Default.args = {
+  id: 'prose-1',
+  className: ''
+};

packages/comet/src/components/prose/prose.test.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render } from '@testing-library/react';
+import Prose from './prose';
+
+describe('Prose', () => {
+  test('should render', () => {
+    const { container } = render(<Prose id="prose"><p>Prose text</p></Prose>);
+    const proseComponent = container.querySelector('#prose');
+    expect(proseComponent).toHaveClass('usa-prose');
+    expect(proseComponent).toHaveTextContent('Prose text');
+  });
+
+  test('should render with custom className', () => {
+    const { container } = render(<Prose id="prose" className="custom"><p>Prose text</p></Prose>);
+    expect(container.querySelector('#prose')).toHaveClass('custom');
+  });
+});

packages/comet/src/components/prose/prose.tsx

@@ -0,0 +1,40 @@
+import React, { ReactNode } from 'react';
+import classnames from 'classnames';
+
+export interface ProseProps {
+  /**
+   * The unique identifier for this component
+   */
+  id: string;
+  /**
+   * A custom class to apply to the component
+   */
+  className?: string;
+  /**
+   * The contents of the prose
+   */
+  children?: ReactNode;
+}
+
+/**
+ * Format a block of running text.
+ */
+export const Prose = ({
+  id,
+  className,
+  children,
+  ...props
+}: ProseProps & JSX.IntrinsicElements['section']): React.ReactElement => {
+  const classes = classnames(
+    'usa-prose',
+    className
+  );
+
+  return (
+    <section id={id} className={classes} {...props}>
+      {children}
+    </section>
+  );
+};
+
+export default Prose;