Note

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

Click to expand

M

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

Click to expand

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

Click to expand

M

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

Click to expand

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

Click to expand