@navinc/base-react-components/src/three-col-layout.story.js

Nav's Pattern Library

import React from 'react'
import ThreeColumnLayout, {
  One,
  OneFewer,
  OneTwoOne,
  Two,
  All,
  twoColumnBreakpoint,
  threeColumnBreakpoint,
} from './three-col-layout.js'
import readme from './three-col-layout.readme.md'
import Header from './header.js'

export default {
  title: 'Layout/ThreeColumnLayout',
  component: ThreeColumnLayout,
  parameters: {
    readme: { content: readme },
  },
  subcomponents: { One, OneFewer, OneTwoOne, Two, All, twoColumnBreakpoint, threeColumnBreakpoint },
}

export const Basic = (args) => {
  return (
    <ThreeColumnLayout>
      <One>
        <Header>One</Header>
        {args.oneContent}
        {/* {text(
        'One content',
        'Spicy jalapeno quis ut proident pariatur pastrami. Culpa prosciutto incididunt, est sausage aliqua tail sed ribeye drumstick venison ut boudin ham hock consectetur. Pork loin short loin sint velit. Andouille anim ad boudin.'
      )} */}
      </One>

      <OneFewer>
        <Header>OneFewer</Header>
        {args.oneFewer}
      </OneFewer>

      <OneTwoOne>
        <Header>OneTwoOne</Header>
        {args.oneTwoOne}
      </OneTwoOne>

      <Two>
        <Header>Two</Header>
        {args.twoContent}
      </Two>

      <All>
        <Header>All</Header>
        {args.all}
      </All>
    </ThreeColumnLayout>
  )
}

Basic.args = {
  oneContent:
    'Spicy jalapeno quis ut proident pariatur pastrami. Culpa prosciutto incididunt, est sausage aliqua tail sed ribeye drumstick venison ut boudin ham hock consectetur. Pork loin short loin sint velit. Andouille anim ad boudin.',
  oneFewer:
    'Adipisicing ea quis strip steak ex. Enim commodo dolore tongue. Tenderloin tempor shankle porchetta. Fugiat landjaeger turducken dolore nulla reprehenderit fatback t-bone anim. Shank ut chicken picanha nostrud.',
  oneTwoOne:
    'Adipisicing ea quis strip steak ex. Enim commodo dolore tongue. Tenderloin tempor shankle porchetta. Fugiat landjaeger turducken dolore nulla reprehenderit fatback t-bone anim. Shank ut chicken picanha nostrud.',
  twoContent:
    'Adipisicing ea quis strip steak ex. Enim commodo dolore tongue. Tenderloin tempor shankle porchetta. Fugiat landjaeger turducken dolore nulla reprehenderit fatback t-bone anim. Shank ut chicken picanha nostrud.',
  all: 'Adipisicing ea quis strip steak ex. Enim commodo dolore tongue. Tenderloin tempor shankle porchetta. Fugiat landjaeger turducken dolore nulla reprehenderit fatback t-bone anim. Shank ut chicken picanha nostrud.',
}