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

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</h3></div></div>

const numToLayoutCount = num => {
  switch (num) {
    case 2:
      return EqualColumnLayout.counts.two
    case 3:
      return EqualColumnLayout.counts.three
    case 4:
      return EqualColumnLayout.counts.four
    case 6:
      return EqualColumnLayout.counts.six
    default:
      return null
  }
}

const EqualColumnLayoutOutput = _ => (
  <div>
    
      A
      B
    
    
      C
      D
      E
      F
    
    
      <ul style="{{">
        <li>
          G
        </li>
        <li>
          H
        </li>
        <li>
          I
        </li></ul></div>

render() {
    const { props } = this
    return (
      <div>
        
          {React.Children.map(props.children, child =&gt; (
            <div>
              <button> this.handleOpen(child.props.src)}
              &gt;
                {child}
              </button>
            </div>
          ))}
        
        {this.state.modalSrc &amp;&amp; (
          <dialog aria-label="Enlarge graphic">
            <img src="{this.state.modalSrc}">
          </dialog></div>

const numToLayoutCount = num => {
  switch (num) {
    case 2:
      return EqualColumnLayout.counts.two
    case 3:
      return EqualColumnLayout.counts.three
    case 4:
      return EqualColumnLayout.counts.four
    case 6:
      return EqualColumnLayout.counts.six
    default:
      return null
  }
}

src="/static/img/patterns/iconography/canvas-size.svg"
          alt="Canvas size visual"
        />
        <img alt="Padding visual" src="/static/img/patterns/iconography/canvas-padding.svg">
        <img alt="Live area visual" src="/static/img/patterns/iconography/canvas-live-area.svg">
      

      Keyline shapes
      <p>Sizes for basic shapes.</p>
      
        <img alt="Keyline shape horizontal rectangle visual" src="/static/img/patterns/iconography/keyline-shapes-horizontal-rectangle.svg">
        <img alt="Keyline shape vertical rectangle visual" src="/static/img/patterns/iconography/keyline-shapes-vertical-rectangle.svg">
        <img alt="Keyline shape square visual" src="/static/img/patterns/iconography/keyline-shapes-square.svg">
        <img alt="Keyline shape circle visual" src="/static/img/patterns/iconography/keyline-shapes-circle.svg">

const EqualColumnLayoutOutput = _ => (
  <div>
    
      A
      B
    
    
      C
      D
      E
      F
    
    
      <ul style="{{">
        <li>
          G
        </li>
        <li>
          H</li></ul></div>

<div>F</div>



  <ul style="{{">
    <li>G</li>
    <li>H</li>
    <li>I</li>
  </ul>
`}
      four,
            <span>Number of columns in a row at full width</span>
          ]),
          PropTypes.row([
            'children',
            'single parent element | children array',
            false,
            <code>div</code>,
            <span>
              Where children must accept <code>data-css-*</code> props
            </span>
          ])
        ]}
      /&gt;

aside={}
  asidePosition={AsideLayout.asidePositions.last}
  main={}  />`}
      AsideLayout.Aside,
            true,
            null,
            <span>Content for aside</span>
          ]),
          PropTypes.row([
            'asidePosition',
            PropTypes.union(AsideLayout.asidePositions),
            false,
            <code>first</code>,
            <span>
              Aside position (from <code>AsideLayout.asidePositions</code>)
            </span>
          ]),
          PropTypes.row([
            'main',
            <code>AsideLayout.Main</code>,
            true,
            null,
            <span>Main content</span>
          ])
        ]}
      /&gt;

}
        main={
          
            B
          
        }
      />
    
    <div>
      
            C
          
        }
        asidePosition={AsideLayout.asidePositions.last}
        main={
          
            D
          
        }
      /&gt;
    </div>
    <style>{`
      .examples {
        padding-bottom: ${core.layout.spacingSmall};
      }
      .example {
        margin-bottom: ${core.layout.spacingMedium};
      }
    `}</style>