Note

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

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.

  1. Mark Twain

    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.

    June 18, 201910:30am
  2. Mark Twain

    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.

    June 18, 201910:30am
  3. Mark Twain

    Clothes make the man. Naked people have little or no influence on society.

    June 18, 201910:30am
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.

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.

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.

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.

Great American authorSatirist14 minutes ago
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.

Mark Twain

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.

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.

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.

Metadata 1Metadata 214 minutes ago
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

Usage & types

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

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
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