How to use @pluralsight/ps-design-system-text - 10 common examples

const HeadingComponent = props => (
  <div>
    {props.children}
    <style>{`
      /* TODO: style with jsx without global tag */
      .heading :global(h1),
      .heading :global(h2),
      .heading :global(h3),
      .heading :global(h4) {
        color: ${core.colors.gray06};
      }
      .heading.${Heading.sizes.large} :global(h1),
      .heading.${Heading.sizes.large} :global(h2),
      .heading.${Heading.sizes.large} :global(h3),
      .heading.${Heading.sizes.large} :global(h4) {
        margin: 56px 0 0 0;
      }
      .heading.${Heading.sizes.xLarge} :global(h1),
      .heading.${Heading.sizes.xLarge} :global(h2),
      .heading.${Heading.sizes.xLarge} :global(h3),
      .heading.${Heading.sizes.xLarge} :global(h4) {
        margin: 56px 0;
      }
    `}</style>
  </div>
)

const HeadingComponent = props => (
  <div>
    {props.children}
    <style>{`
      /* TODO: style with jsx without global tag */
      .heading :global(h1),
      .heading :global(h2),
      .heading :global(h3),
      .heading :global(h4) {
        color: ${core.colors.gray06};
      }
      .heading.${Heading.sizes.large} :global(h1),
      .heading.${Heading.sizes.large} :global(h2),
      .heading.${Heading.sizes.large} :global(h3),
      .heading.${Heading.sizes.large} :global(h4) {
        margin: 56px 0 0 0;
      }
      .heading.${Heading.sizes.xLarge} :global(h1),
      .heading.${Heading.sizes.xLarge} :global(h2),
      .heading.${Heading.sizes.xLarge} :global(h3),
      .heading.${Heading.sizes.xLarge} :global(h4) {
        margin: 56px 0;
      }
    `}</style>
  </div>
)

const styleSize = ({ size }) =>
  ({
    [Heading.sizes.large]: {
      margin: '56px 0 0 0'
    },
    [Heading.sizes.xLarge]: {
      margin: '56px 0'
    }
  }[size])

.heading.${Heading.sizes.xLarge} :global(h1),
      .heading.${Heading.sizes.xLarge} :global(h2),
      .heading.${Heading.sizes.xLarge} :global(h3),
      .heading.${Heading.sizes.xLarge} :global(h4) {
        margin: 56px 0;
      }
    `}
  
)

HeadingComponent.propTypes = {
  children: PropTypes.node,
  size: PropTypes.string
}
HeadingComponent.defaultProps = {
  size: Heading.sizes.large
}
HeadingComponent.sizes = Heading.sizes
export default HeadingComponent

const DataWell = React.forwardRef((props, ref) => {
  const themeName = useTheme()

  return (
    <div>
      
        <div>{props.label}</div>
      

      <div>{props.children}</div>
      <div>{props.subLabel}</div>
    </div>
  )
})

const styleSize = ({ size }) =>
  ({
    [Heading.sizes.large]: {
      margin: '56px 0 0 0'
    },
    [Heading.sizes.xLarge]: {
      margin: '56px 0'
    }
  }[size])

includes={{ Text }}
        codes={Object.keys(Text.Heading.sizes).map(
          s =>
            `

  <h2>${s}</h2>

`
        )}
      /&gt;
      large,
            <span>
              size and style of heading (from <code>Text.Heading.sizes</code>)
            </span>
          ])
        ]}
      /&gt;

      Body text
      <p>Try to use common paragraph style when possible.</p>

<p>Include a React component in your project:</p>
      <code>
        import * as Text from '@pluralsight/ps-design-system-text'
      </code>

      Heading
      <p>
        Heading styles compose complimentary typography attributes for
        simplified implementation. Try to use common heading styles when
        possible.
      </p>
      
            `

  <h2>${s}</h2>

`
        )}
      /&gt;
      large,

const VerticalGridVisual = _ => (
  <div>
    
      <div>
        <button style="{{" size="{Button.sizes.large}">
          Primary button
        </button>
        <button size="{Button.sizes.medium}">Primary button</button>
      </div>
      <div>
        
          <h3>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
            eiusmod tempor
          </h3>
        
      </div>
      <div>
        
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
        
      </div>
    
    <style>{`</style></div>

.add('with DS Text components', _ => (
    
          <h3>Bob Ross</h3>
        
      }
      message={
        
          
            Be so very light. Be a gentle whisper. If these lines aren't
            straight, your water's going to run right out of your painting and
            get your floor wet. It is a lot of fun.
          

          
            So often we avoid running water, and running water is a lot of fun.
            Just beat the devil out of it. Work that paint. A beautiful little
            sunset. This painting comes right out of your heart.