<div class="drawer js-show-hide " data-track-action="drawer" data-track-label="id:work-using-image, section:Using this image">
    <hr class="divider divider--black divider--keyline margin-top-s1 margin-bottom-s1" />
    <button class="
          js-show-hide-trigger
          drawer__header
          plain-button
          padding-left-s0 padding-right-s0
          padding-top-s2 padding-bottom-s2
          font-LR2-s"><span class="flex flex--v-center flex--h-space-between"><div class="drawer__heading">Using this image</div><div class="drawer__icon"><div class="icon icon--match-text"><canvas class="icon__canvas" height="26" width="26"></canvas><svg class="icon__svg" aria-hidden="true"><svg viewBox="0 0 26 26"><path class="icon__shape" d="M21.49 12H14V4.52a1 1 0 1 0-2 0V12H4.51a1 1 0 0 0 0 2H12v7.49a1 1 0 0 0 2 0V14h7.49a1 1 0 0 0 0-2z"></path></svg></svg></div></div></span>
    </button>
    <div class="
        js-show-hide-drawer
        drawer__body
        padding-top-s2 padding-bottom-s2
        font-HNL5-s font-HNL4-m" aria-expanded="false">
        <div>
            <h2 class="font-HNM5-s font-HNM4-m margin-top-s0 margin-bottom-s1"></h2>
            <ul class="plain-list margin-bottom-s2 margin-top-s0 margin-left-s0 margin-right-s0 padding-top-s0 padding-left-s0 padding-right-s0"></ul>
        </div>
        <div>
            <h2 class="font-HNM5-s font-HNM4-m margin-top-s0 margin-bottom-s1"></h2>
            <ul class="plain-list margin-bottom-s2 margin-top-s0 margin-left-s0 margin-right-s0 padding-top-s0 padding-left-s0 padding-right-s0"></ul>
        </div>
    </div>
    <hr class="divider divider--black divider--keyline" />
</div>
// @flow
import {withToggler} from '../../hocs/withToggler';
import {spacing, font} from '../../../utils/classnames';
import Divider from '../Divider/Divider';
import MetaUnit from '../MetaUnit/MetaUnit';
import Icon from '../Icon/Icon';
import type {MetaUnitProps} from '../../../model/meta-unit';
import ReactGA from 'react-ga';

type Props = {|
  data: Array<MetaUnitProps>,
  isActive: boolean,
  toggle: () => void
|};

const WorkDrawer = withToggler(({data, isActive, toggle}: Props) => {
  function toggleWithAnalytics(event) {
    event.preventDefault();

    ReactGA.event({
      category: 'component',
      action: 'WorkDrawer:click',
      label: `id:work-using-image,section:Using this image,click-action:${isActive ? 'did close' : 'did open'}`
    });

    toggle();
  }

  const drawerContent = data.map((item, i) => <MetaUnit key={i} headingText={item.headingText} text={item.text} />);
  return ( // TODO: remove js- and data-attributes once fully Reactified
    <div className={`drawer js-show-hide ${isActive ? 'is-active' : ''}`}
      data-track-action='drawer'
      data-track-label='id:work-using-image, section:Using this image'>
      <Divider extraClasses={`divider--black divider--keyline ${spacing({s: 1}, {margin: ['top', 'bottom']})}`} />
      <button className={`
          js-show-hide-trigger
          drawer__header
          plain-button
          ${spacing({s: 0}, {padding: ['left', 'right']})}
          ${spacing({s: 2}, {padding: ['top', 'bottom']})}
          ${font({s: 'LR2'})}`}
      onClick={toggleWithAnalytics}>
        <span className='flex flex--v-center flex--h-space-between'>
          <div className='drawer__heading'>Using this image</div>
          <div className='drawer__icon'>
            <Icon name='plus' extraClasses='icon--match-text' />
          </div>
        </span>
      </button>
      <div className={`
        js-show-hide-drawer
        drawer__body
        ${spacing({s: 2}, {padding: ['top', 'bottom']})}
        ${font({s: 'HNL5', m: 'HNL4'})}`} aria-expanded={isActive ? 'true' : 'false'}>
        {drawerContent}
      </div>
      <Divider extraClasses='divider--black divider--keyline' />
    </div>
  );
});

export default WorkDrawer;
{
  "id": "using-this-image",
  "heading": "Using this image",
  "data": [
    {
      "title": "Licence information",
      "content": [
        "You can use this work for any purpose without restriction under copyright law.",
        "Public Domain Mark (PDM) terms and conditions <a href=\"https://creativecommons.org/publicdomain/mark/1.0\">https://creativecommons.org/publicdomain/mark/1.0</a>"
      ]
    },
    {
      "title": "Credit",
      "content": [
        "James Gillray, \"Metallic Tractors\", showing Elisha Perkins'  by Gillray, James. Credit: <a href=\"/works/gy4cxzfq\">Wellcome Collection</a>. <a href=\"https://creativecommons.org/licenses/by/4.0/\">CC BY</a>"
      ]
    }
  ]
}

There are no notes for this item.