Note

Use the note component for conversational elements. A note may have an author, metadata and available actions.

Install
npm install @pluralsight/ps-design-system-note
Import
import Note from '@pluralsight/ps-design-system-note'

Examples

The Note is a flexible component that will fit the container it's given. A user generated list is a common container layout that one might encounter in the product.

Use a Note.List to display a group of related Notes.

import Avatar from '@pluralsight/ps-design-system-avatar'
import { MoreIcon } from '@pluralsight/ps-design-system-icon'
import Note from '@pluralsight/ps-design-system-note'
import { P } from '@pluralsight/ps-design-system-text'
import React from 'react'

const userName = 'Mark Twain'
const userAvatar = 'http://placebear.com/128/128'

const Example: React.FC = props => {
  return (
    <Note.List>
      <Note
        actionBar={[<Note.Action icon={<MoreIcon />} title="More" />]}
        avatar={<Avatar name={userName} src={userAvatar} />}
        heading={userName}
        message={
          <P>
            Customs do not concern themselves with right or wrong or reason. But
            they have to be obeyed; one reasons all around them until he is
            tired, but he must not transgress them, it is sternly forbidden.
          </P>
        }
        metadata={['June 18, 2019', '10:30am']}
      />

      <Note
        actionBar={[<Note.Action icon={<MoreIcon />} title="More" />]}
        avatar={<Avatar name={userName} src={userAvatar} />}
        heading={userName}
        message={
          <P>
            There are those who imagine that the unlucky accidents of
            life—life's 'experiences'—are in some way useful to us. I wish I
            could find out how. I never know one of them to happen twice. They
            always change off and swap around and catch you on your
            inexperienced side.
          </P>
        }
        metadata={['June 18, 2019', '10:30am']}
      />

      <Note
        actionBar={[<Note.Action icon={<MoreIcon />} title="More" />]}
        avatar={<Avatar name={userName} src={userAvatar} />}
        heading={userName}
        message={
          <P>
            Clothes make the man. Naked people have little or no influence on
            society.
          </P>
        }
        metadata={['June 18, 2019', '10:30am']}
      />
    </Note.List>
  )
}

export default Example

Title and avatar

Title and avatar are useful to depict the author of a note.

import Avatar from '@pluralsight/ps-design-system-avatar'
import Link from '@pluralsight/ps-design-system-link'
import Note from '@pluralsight/ps-design-system-note'
import { P } from '@pluralsight/ps-design-system-text'
import React from 'react'

const Example: React.FC = props => {
  return (
    <Note
      avatar={
        <Note.AvatarLink>
          <a href="#">
            <Avatar name="Mark Twain" src="http://placebear.com/128/128" />
          </a>
        </Note.AvatarLink>
      }
      heading={
        <P>
          <Link appearance={Link.appearances.subtle}>
            <a href="#">Mark Twain</a>
          </Link>
        </P>
      }
      message={
        <P>
          Customs do not concern themselves with right or wrong or reason. But
          they have to be obeyed; one reasons all around them until he is tired,
          but he must not transgress them, it is sternly forbidden.
        </P>
      }
    />
  )
}

export default Example

Metadata

Metadata is free-form strings or displayable elements like links. Each bit of metadata is separated by an interpunct.

import Link from '@pluralsight/ps-design-system-link'
import Note from '@pluralsight/ps-design-system-note'
import { P } from '@pluralsight/ps-design-system-text'
import React from 'react'

const Example: React.FC = props => {
  return (
    <Note
      message={
        <P>
          Customs do not concern themselves with right or wrong or reason. But
          they have to be obeyed; one reasons all around them until he is tired,
          but he must not transgress them, it is sternly forbidden.
        </P>
      }
      metadata={[
        'Great American author',
        'Satirist',
        <Link appearance={Link.appearances.subtle}>
          <a href="#">14 minutes ago</a>
        </Link>
      ]}
    />
  )
}

export default Example

Action bar

The action bar contains the on-note affordances a user can take. These are usually icon buttons. The actions can be displayed always, on hover, or without the title.

import Avatar from '@pluralsight/ps-design-system-avatar'
import { PencilIcon, MoreIcon } from '@pluralsight/ps-design-system-icon'
import Note from '@pluralsight/ps-design-system-note'
import { Heading, P } from '@pluralsight/ps-design-system-text'
import React from 'react'

const Example: React.FC = props => {
  return (
    <Note
      actionBar={[
        <Note.Action icon={<PencilIcon />} title="Edit" />,
        <Note.Action icon={<MoreIcon />} title="More" />
      ]}
      actionBarVisible
      avatar={<Avatar name="Mark Twain" src="http://placebear.com/128/128" />}
      heading={
        <Heading size={Heading.sizes.smallCaps}>
          <h2>Mark Twain</h2>
        </Heading>
      }
      message={
        <P>
          Customs do not concern themselves with right or wrong or reason. But
          they have to be obeyed; one reasons all around them until he is tired,
          but he must not transgress them, it is sternly forbidden.
        </P>
      }
    />
  )
}

export default Example

Without attribution

A note can also be used without the avatar and heading. The actions will be moved to the bottom next to the metadata.

import { BookmarkIcon, MoreIcon } from '@pluralsight/ps-design-system-icon'
import Note from '@pluralsight/ps-design-system-note'
import { P } from '@pluralsight/ps-design-system-text'
import React from 'react'

const Example: React.FC = props => {
  return (
    <Note
      actionBar={[
        <Note.Action icon={<BookmarkIcon />} title="Bookmark" />,
        <Note.Action icon={<MoreIcon />} title="More" />
      ]}
      actionBarVisible
      message={
        <P>
          Customs do not concern themselves with right or wrong or reason. But
          they have to be obeyed; one reasons all around them until he is tired,
          but he must not transgress them, it is sternly forbidden.
        </P>
      }
      metadata={['Metadata 1', 'Metadata 2', '14 minutes ago']}
    />
  )
}

export default Example

Accessibility

WCAG 2.1 AA Compliance

100% axe-core tests

Manual audit

Props

Note

Name	Type	Description	Default
`actionBar`	`Note.Action[]`	action buttons
`actionBarVisible`	`boolean`	locks actionBar visible	`false`
`avatar`	`Avatar \| Note.AvatarLink`	a user's avatar
`heading`	`React.ReactNode`	the note heading
`message` Required	`React.ReactNode`	the main message body
`metadata`	`React.ReactNode[]`	a row of metadata

Note.Action

Name	Type	Description	Default
`icon` Required	`Icon`	icon representing action
`title` Required	`string`	text representing action

Note.AvatarLink

Name	Type	Description	Default
`children` Required	`a > Avatar`	hyperlinked avatar

Note.List

Name	Type	Description	Default
`children` Required	`Note[]`	Notes to be placed in list