Scrollable

import { P } from '@pluralsight/ps-design-system-text'
import Scrollable from '@pluralsight/ps-design-system-scrollable'
import React from 'react'

const Example: React.FC = props => {
  return (
    <Scrollable style={{ height: 164, outline: '1px dashed pink' }}>
      <P>
        There's not a thing in the world wrong with washing your brush. With
        practice comes confidence. Don't be afraid to make these big decisions.
        Once you start, they sort of just make themselves.
      </P>

      <P>
        You can't have light without dark. You can't know happiness unless
        you've known sorrow. See. We take the corner of the brush and let it
        play back-and-forth. Every day I learn. If we're gonna walk though the
        woods, we need a little path. We don't need any guidelines or formats.
        All we need to do is just let it flow right out of us.
      </P>

      <P>
        Let's make a nice big leafy tree. Let's go up in here, and start having
        some fun God gave you this gift of imagination. Use it. Life is too
        short to be alone, too precious. Share it with a friend.
      </P>

      <P>
        I get carried away with this brush cleaning. What the devil. It just
        happens - whether or not you worried about it or tried to plan it.
        Imagination is the key to painting.
      </P>

      <P>
        Use absolutely no pressure. Just like an angel's wing. We'll put some
        happy little leaves here and there. You don't have to spend all your
        time thinking about what you're doing, you just let it happen. Just let
        your mind wander and enjoy. This should make you happy.
      </P>

      <P>
        Very easy to work these to death. Just a happy little shadow that lives
        in there. There are no mistakes. You can fix anything that happens. But
        they're very easily killed. Clouds are delicate.
      </P>

      <P>
        We'll throw some happy little limbs on this tree. You better get your
        coat out, this is going to be a cold painting. The only thing worse than
        yellow snow is green snow.
      </P>
    </Scrollable>
  )
}

export default Example

Click to expand

import { P } from '@pluralsight/ps-design-system-text'
import Scrollable from '@pluralsight/ps-design-system-scrollable'
import React from 'react'

const Example: React.FC = props => {
  return (
    <Scrollable
      renderContent={(contentProps, contentRef) => <aside {...contentProps} ref={contentRef} />}
      style={{ height: 164, outline: '1px dashed pink' }}
    >
      <P>
        There's not a thing in the world wrong with washing your brush. With
        practice comes confidence. Don't be afraid to make these big decisions.
        Once you start, they sort of just make themselves.
      </P>

      <P>
        You can't have light without dark. You can't know happiness unless
        you've known sorrow. See. We take the corner of the brush and let it
        play back-and-forth. Every day I learn. If we're gonna walk though the
        woods, we need a little path. We don't need any guidelines or formats.
        All we need to do is just let it flow right out of us.
      </P>

      <P>
        Let's make a nice big leafy tree. Let's go up in here, and start having
        some fun God gave you this gift of imagination. Use it. Life is too
        short to be alone, too precious. Share it with a friend.
      </P>

      <P>
        I get carried away with this brush cleaning. What the devil. It just
        happens - whether or not you worried about it or tried to plan it.
        Imagination is the key to painting.
      </P>

      <P>
        Use absolutely no pressure. Just like an angel's wing. We'll put some
        happy little leaves here and there. You don't have to spend all your
        time thinking about what you're doing, you just let it happen. Just let
        your mind wander and enjoy. This should make you happy.
      </P>

      <P>
        Very easy to work these to death. Just a happy little shadow that lives
        in there. There are no mistakes. You can fix anything that happens. But
        they're very easily killed. Clouds are delicate.
      </P>

      <P>
        We'll throw some happy little limbs on this tree. You better get your
        coat out, this is going to be a cold painting. The only thing worse than
        yellow snow is green snow.
      </P>
    </Scrollable>
  )
}

export default Example

Click to expand