[WNMGDS-3191] Note Content Component

packages/design-system/src/components/NoteBox/NoteBox.stories.tsx

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import NoteBox from './NoteBox';
+
+const meta: Meta = {
+  component: NoteBox,
+  argTypes: {
+    children: { control: 'text' },
+    bordered: { control: 'boolean', defaultValue: true },
+    heading: { control: 'text' },
+    headingLevel: { control: 'text' },
+  },
+  parameters: {
+    docs: {
+      underlyingHtmlElements: ['aside'],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof NoteBox>;
+
+const NoteBoxTemplate: Story = {
+  render: ({ ...args }) => {
+    return <NoteBox {...args}>{args.children}</NoteBox>;
+  },
+};
+
+export const Default = {
+  ...NoteBoxTemplate,
+  args: {
+    heading: 'The Inflation Reduction Act',
+    children:
+      "The Inflation Reduction Act keeps these savings and lower costs through 2025. If you qualify for savings, you'll find out the lower costs when you shop for plans.",
+    bordered: true,
+  },
+};

packages/design-system/src/components/NoteBox/NoteBox.test.tsx

@@ -0,0 +1,95 @@
+import { QuotationMarkIcon } from '../Icons';
+import NoteBox from './NoteBox';
+import { NoteBoxQuotation } from './NoteBoxQuotation';
+import { render, screen } from '@testing-library/react';
+
+const defaultProps = {
+  children: 'This is foo text. Bar!',
+  heading: 'Test Heading',
+};
+
+function renderNoteBox(props = {}) {
+  return render(<NoteBox {...defaultProps} {...props} />);
+}
+
+describe('NoteBox', () => {
+  it('renders as complementary content', () => {
+    renderNoteBox();
+    expect(screen.getByRole('complementary')).toMatchSnapshot();
+  });
+
+  it('renders heading properly', () => {
+    renderNoteBox();
+    const headingElement = screen.getByText(/Test Heading/);
+    expect(headingElement).toBeInTheDocument();
+  });
+
+  it('renders just child content', () => {
+    renderNoteBox({ heading: null });
+    const headingElement = screen.queryByText(/Test Heading/);
+    const childElement = screen.getByText(/This is foo text. Bar!/);
+    expect(childElement).toBeInTheDocument();
+    expect(headingElement).not.toBeInTheDocument();
+  });
+
+  it('renders border properly', () => {
+    const { container } = renderNoteBox({ bordered: true });
+    expect(container.firstChild).toHaveClass('ds-c-note-box ds-c-note-box--bordered');
+  });
+
+  it('renders quote option properly', () => {
+    renderNoteBox({
+      heading: <QuotationMarkIcon />,
+      children: (
+        <NoteBoxQuotation author="Test Author" citation="Test Citation">
+          This is foo text. Bar!
+        </NoteBoxQuotation>
+      ),
+    });
+    const quoteElement = screen.getByText(/This is foo text. Bar!/);
+    expect(quoteElement).toBeInTheDocument();
+    // Per Design request citation wins out over author if both are provided
+    const authorElement = screen.queryByText(/Test Author/);
+    expect(authorElement).not.toBeInTheDocument();
+    const citationElement = screen.getByText(/Test Citation/);
+    expect(citationElement).toBeInTheDocument();
+    expect(screen.getByRole('complementary')).toMatchSnapshot();
+  });
+
+  it('renders a quote with only author', () => {
+    renderNoteBox({
+      heading: <QuotationMarkIcon />,
+      children: <NoteBoxQuotation author="Test Author">This is foo text. Bar!</NoteBoxQuotation>,
+    });
+    const authorElement = screen.getByText(/Test Author/);
+    expect(authorElement).toBeInTheDocument();
+  });
+
+  it('renders a quote with only citation', () => {
+    renderNoteBox({
+      heading: <QuotationMarkIcon />,
+      children: (
+        <NoteBoxQuotation citation="Test Citation">This is foo text. Bar!</NoteBoxQuotation>
+      ),
+    });
+    const citationElement = screen.getByText(/Test Citation/);
+    expect(citationElement).toBeInTheDocument();
+  });
+
+  it('renders children properly', () => {
+    renderNoteBox();
+    const childrenElement = screen.getByText(/This is foo text. Bar!/);
+    expect(childrenElement).toBeInTheDocument();
+  });
+
+  it('applies className properly', () => {
+    const { container } = renderNoteBox({ className: 'test-class' });
+    expect(container.firstChild).toHaveClass('test-class');
+  });
+
+  it('applies heading level properly', () => {
+    renderNoteBox({ heading: 'Test Heading', headingLevel: '3' });
+    const headingElement = screen.getByRole('heading', { level: 3 });
+    expect(headingElement).toBeInTheDocument();
+  });
+});

packages/design-system/src/components/NoteBox/NoteBox.tsx

@@ -0,0 +1,52 @@
+import type * as React from 'react';
+import { FunctionComponent } from 'react';
+import classNames from 'classnames';
+
+export type NoteBoxHeadingLevel = '2' | '3' | '4' | '5' | '6';
+
+interface NoteBoxProps {
+  /**
+   * Applies a border to the box content.
+   */
+  bordered?: boolean;
+  /**
+   * Content to be displayed within the Box
+   */
+  children: React.ReactNode;
+  /**
+   * Additional classes to be added to the component
+   */
+  className?: string;
+  /**
+   * Text for the box content heading
+   */
+  heading?: React.ReactNode;
+  /**
+   * Heading type to override default `<h2>`.
+   */
+  headingLevel?: NoteBoxHeadingLevel;
+}
+
+const NoteBox: FunctionComponent<NoteBoxProps> = (props: NoteBoxProps) => {
+  const { bordered, children, className, heading, headingLevel = '2' } = props;
+
+  const classes = classNames('ds-c-note-box', bordered && 'ds-c-note-box--bordered', className);
+  let headingElement;
+  if (typeof heading === 'string') {
+    const Heading = `h${headingLevel}` as const;
+    headingElement = <Heading className="ds-c-note-box__heading">{heading}</Heading>;
+  } else {
+    headingElement = heading;
+  }
+
+  return (
+    <aside className={classes}>
+      <div className="ds-c-note-box__body">
+        {headingElement}
+        <div className={heading ? 'ds-c-note-box__text' : ''}>{children}</div>
+      </div>
+    </aside>
+  );
+};
+
+export default NoteBox;

packages/design-system/src/components/NoteBox/NoteBoxQuotation.stories.tsx

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import NoteBox from './NoteBox';
+import { NoteBoxQuotation } from './NoteBoxQuotation';
+import { QuotationMarkIcon } from '../Icons';
+
+const boxContentMeta: Meta = {
+  title: 'Components/NoteBoxQuotation',
+  component: NoteBoxQuotation,
+  argTypes: {
+    author: { control: 'text' },
+    citation: { control: 'text' },
+    children: { control: 'text' },
+  },
+  parameters: {
+    docs: {
+      underlyingHtmlElements: ['blockquote', 'figure', 'figcaption', 'cite'],
+    },
+  },
+};
+export default boxContentMeta;
+type Story = StoryObj<typeof NoteBoxQuotation>;
+
+const NoteBoxQuotationStory: Story = {
+  render: ({ ...args }) => {
+    return (
+      <NoteBox heading={<QuotationMarkIcon />}>
+        <NoteBoxQuotation {...args}>{args.children}</NoteBoxQuotation>
+      </NoteBox>
+    );
+  },
+};
+
+export const Default = {
+  ...NoteBoxQuotationStory,
+  args: {
+    citation: <a href="https://home.treasury.gov/">U.S. Department of the Treasury</a>,
+    children:
+      "The U.S. Department of the Treasury's mission is to maintain a strong economy and create economic and job opportunities by promoting the conditions that enable economic growth and stability at home and abroad, strengthen national security by combating threats and protecting the integrity of the financial system, and manage the U.S. Government’s finances and resources effectively.",
+  },
+};
+
+export const WithAuthor = {
+  ...NoteBoxQuotationStory,
+  args: {
+    author: 'John Adams',
+    children: 'Let us dare to read, think, speak and write.',
+  },
+};

packages/design-system/src/components/NoteBox/NoteBoxQuotation.tsx

@@ -0,0 +1,72 @@
+import type * as React from 'react';
+import { FunctionComponent } from 'react';
+import { RequireAtLeastOne } from '../utilities/requireAtLeastOne';
+import classNames from 'classnames';
+
+interface MinimumNoteBoxQuotationProps {
+  /**
+   * Provide an author for the quote. It is required if a citation is not provided.
+   */
+  author?: string;
+  /**
+   * Content to be displayed within the Box Quotation
+   */
+  children: React.ReactNode;
+  /**
+   * Provide a citation for the quote. A citation is the title of a cited creative work. This can be a website, book chapter, but not an author. This component can accept more complex HTML in addition to strings, so passing in a link directly to the citation source is possible.
+   */
+  citation?: React.ReactNode;
+  /**
+   * Additional classes to be added to the component
+   */
+  className?: string;
+}
+
+export type NoteBoxQuotationProps = RequireAtLeastOne<
+  MinimumNoteBoxQuotationProps,
+  'citation' | 'author'
+>;
+
+export const NoteBoxQuotation: FunctionComponent<NoteBoxQuotationProps> = (
+  props: NoteBoxQuotationProps
+) => {
+  const { author, children, citation, className } = props;
+
+  const classes = classNames('ds-c-note-box-quotation', className);
+
+  const CaptionContent: FunctionComponent = () => {
+    // We want to prioritize citations over authors, so if both are present only render the citation.
+    if (citation) {
+      return (
+        <cite className="ds-c-note-box-quotation--citation">
+          {`\u2014`} {citation}
+        </cite>
+      );
+    }
+    // If citation is not present, but author is, render the author.
+    if (author) {
+      return (
+        <>
+          {`\u2014`} {author}
+        </>
+      );
+    }
+    if (process.env.NODE_ENV !== 'production') {
+      if (!citation && !author) {
+        console.warn(
+          `[Warning]: You must include either an author prop or a citation prop on your NoteBoxQuotation component.`
+        );
+      }
+    }
+    return null;
+  };
+
+  return (
+    <figure className={classes}>
+      <blockquote className="ds-c-note-box-quotation--blockquote">{children}</blockquote>
+      <figcaption className="ds-c-note-box-quotation--caption">
+        <CaptionContent />
+      </figcaption>
+    </figure>
+  );
+};

packages/design-system/src/components/NoteBox/__snapshots__/NoteBox.test.tsx.snap

@@ -0,0 +1,67 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NoteBox renders as complementary content 1`] = `
+<aside
+  class="ds-c-note-box"
+>
+  <div
+    class="ds-c-note-box__body"
+  >
+    <h2
+      class="ds-c-note-box__heading"
+    >
+      Test Heading
+    </h2>
+    <div
+      class="ds-c-note-box__text"
+    >
+      This is foo text. Bar!
+    </div>
+  </div>
+</aside>
+`;
+
+exports[`NoteBox renders quote option properly 1`] = `
+<aside
+  class="ds-c-note-box"
+>
+  <div
+    class="ds-c-note-box__body"
+  >
+    <svg
+      aria-hidden="true"
+      class="ds-c-icon ds-c-icon--left-quote "
+      viewBox="2 0 40 32"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M3 12.5C3 6.69875 7.67478 2 13.4464 2H14.1429C15.6837 2 16.9286 3.25125 16.9286 4.8C16.9286 6.34875 15.6837 7.6 14.1429 7.6H13.4464C10.7565 7.6 8.57143 9.79625 8.57143 12.5V13.2H14.1429C17.2158 13.2 19.7143 15.7113 19.7143 18.8V24.4C19.7143 27.4887 17.2158 30 14.1429 30H8.57143C5.49844 30 3 27.4887 3 24.4V12.5ZM25.2857 12.5C25.2857 6.69875 29.9605 2 35.7321 2H36.4286C37.9694 2 39.2143 3.25125 39.2143 4.8C39.2143 6.34875 37.9694 7.6 36.4286 7.6H35.7321C33.0422 7.6 30.8571 9.79625 30.8571 12.5V13.2H36.4286C39.5016 13.2 42 15.7113 42 18.8V24.4C42 27.4887 39.5016 30 36.4286 30H30.8571C27.7842 30 25.2857 27.4887 25.2857 24.4V12.5Z"
+      />
+    </svg>
+    <div
+      class="ds-c-note-box__text"
+    >
+      <figure
+        class="ds-c-note-box-quotation"
+      >
+        <blockquote
+          class="ds-c-note-box-quotation--blockquote"
+        >
+          This is foo text. Bar!
+        </blockquote>
+        <figcaption
+          class="ds-c-note-box-quotation--caption"
+        >
+          <cite
+            class="ds-c-note-box-quotation--citation"
+          >
+            —
+
+            Test Citation
+          </cite>
+        </figcaption>
+      </figure>
+    </div>
+  </div>
+</aside>
+`;

packages/design-system/src/components/NoteBox/index.ts

@@ -0,0 +1 @@
+export * from './NoteBox';

packages/design-system/src/components/index.ts

@@ -2,6 +2,7 @@ export * from './Accordion';
 export * from './Alert';
 export * from './Autocomplete';
 export * from './Badge';
+export * from './NoteBox';
 export * from './Button';
 export * from './ChoiceList';
 export * from './DateField';

packages/design-system/src/components/utilities/requireAtLeastOne.ts

@@ -0,0 +1,4 @@
+export type RequireAtLeastOne<T, Keys extends keyof T = keyof T> = Pick<T, Exclude<keyof T, Keys>> &
+  {
+    [K in Keys]-?: Required<Pick<T, K>> & Partial<Pick<T, Exclude<Keys, K>>>;
+  }[Keys];