<div>
  <p className="p2">{'From the devTools "Network" tab, set the network to "offline"'}</p>
  <OfflineIndicator
    className="p6"
    label="You're offline"
  />
</div>

<div>
  <Heading tagName='h2' size='md' className='mb2'>
    Basic usage
  </Heading>

  <Ripple>
    { ({ ripple, eventHandlers }) => (
      <div
        className='p6 relative bg-houseGreen color-white overflow-hidden'
        { ...eventHandlers }
      >
        Click me!
        { ripple }
      </div>
    ) }
  </Ripple>

  <Ripple dark>
    { ({ ripple, eventHandlers }) => (
      <div
        className='p6 relative overflow-hidden'
        { ...eventHandlers }
      >
        Click me!
        { ripple }
      </div>
    ) }
  </Ripple>
</div>

<div>
  <Heading tagName='h2' size='md' className='mb2'>
    Advanced usage with mergeEventHandlers
  </Heading>

  <Ripple>
    { ({ ripple, mergeEventHandlers }) => (
      <div
        className='p6 relative bg-houseGreen color-white overflow-hidden'
        { ...mergeEventHandlers({
          // In normal usage, you can pass the components `props` to
          // `mergeEventHandlers`. For the purposes of this demo, we fake
          // it and pass in an `onMouseDown` handler directly.
          onMouseDown: () => console.log('Clicked!')
        }) }
      >
        Click me!
        { ripple }
      </div>
    ) }
  </Ripple>
</div>

<div>
  <p>A Rule can be used in areas when borders are inadequate, and an independent element is needed.</p>
  <p className='pt3'>Padding/margin is applied by using spacing classes.</p>
  <Rule className='pt3' />
</div>

<div className='p3' style={{ backgroundColor: '#2d2926'}}>
  <p className='color-textWhiteSoft'>A negative style is intended for use on dark backgrounds.</p>
  <Rule visualStyle='negative' className='py3' />

  <ThemeContext.Provider value={ themes.dark }>
    <p className='color-textWhiteSoft'>A negative style is automatically triggered when the Rule is a descendant of the Theme component's 'dark' theme.</p>
    <Rule className='py3' />
  </ThemeContext.Provider>
</div>

<div>
  A thin Rule can be used if you specify it's weight.
  <Rule weight='thin' className='pt3' />
</div>

<div className="pt9">
  <SkipLink target="content">Skip to main content</SkipLink>

  <ul className="mb3">
    <li>
      <a href="#">Item One</a>
    </li>
    <li>
      <a href="#">Item Two</a>
    </li>
  </ul>

  <div>
    <p className="mb3">
      This is the main content. To test the skip link, click into this example,
      then use your browser's tab key to navigate through the content.
    </p>

    <p className="mb3">
      When the skip link appears, press 'enter' to access it. You should notice
      that Item Three is focused, and the links above are skipped.
    </p>

    <p className="mb3">
      If you press 'tab' when the SkipLink appears (instead of 'enter'), focus
      moves to Item One.
    </p>

    <ul>
      <li>
        <a href="#" id="content">
          Item Three
        </a>
      </li>
      <li>
        <a href="#">Item Four</a>
      </li>
    </ul>
  </div>
</div>;

<ExternalLink
    href="https://starbucks.com"
    className="color-textBlack"
    ariaDescription="Opens in a new window">
    Click to open Starbucks homepage
</ExternalLink>

<React.Fragment>
  <p className="pb3">Scroll this page until the target is partially out of view. It will turn red.</p>
  <div>
    <ViewportChecker percentVisible={100}>
      {({isIntersecting, elementRef}) => (
        <div
          ref={elementRef}
          className={`${isIntersecting ? 'bg-greenAccent color-white' : 'bg-red color-black'} px9 pt4`}
          style={{paddingBottom: 100}}
        >
          <p>
          Am I 100% visible? <b>{isIntersecting ? 'Yep!' : 'Nope!'}</b>
          </p>
        </div>
      )}
    </ViewportChecker>
  </div>
</React.Fragment>

<React.Fragment>
  <p className="pb3">If you only need to know when your target has reached its `percentVisible`, pass `unobserveOnIntersection` so the underlying IntersectionObserver will stop tracking this element.</p>
  <div className='overflow-auto' style={{height: 200}}>
    <div style={{margin: '150px 10px'}}>
      <ViewportChecker percentVisible={100} unobserveOnIntersection>
        {({isIntersecting, elementRef}) => (
            <div
              ref={elementRef}
              className={`${isIntersecting ? 'bg-greenAccent color-white' : 'bg-red color-black'} px9 pt4`}
              style={{paddingBottom: 100}}
            >
              <p>
              Has been completely in the viewport? <b>{isIntersecting ? 'Yep!' : 'Nope!'}</b>
              </p>
            </div>
        )}
      </ViewportChecker>
    </div>
  </div>
</React.Fragment>