Control

Error rendering component

Unknown plugin "module-resolver" specified in "base" at 0, attempted to resolve relative to "/home/circleci/wellcomecollection.org/common/views/components/Buttons/Control"

<!-- light (button) -->


<!-- dark (button) -->


<!-- light (link) -->


<!-- dark (link) -->


// @flow
import NextLink from 'next/link';
import Icon from '../../Icon/Icon';

type Props = {|
  url?: string,
  id?: string,
  type: 'light' | 'dark',
  extraClasses?: string,
  icon: string,
  text: string,
  eventTracking?: string,
  disabled?: boolean,
  clickHandler?: (event: Event) => void
|}

type InnerControlProps = { text: string, icon: string };
const InnerControl = ({ text, icon }: InnerControlProps) => (
  <span className='control__inner flex-inline flex--v-center flex--h-center'>
    <Icon name={icon} />
    <span className='visually-hidden'>{text}</span>
  </span>
);

const Control = ({
  url,
  id,
  type,
  extraClasses,
  icon,
  text,
  eventTracking,
  disabled,
  clickHandler
}: Props) => {
  const attrs = {
    id: id,
    className: `control control--${type} ${extraClasses || ''}`,
    'data-track-event': eventTracking,
    disabled: disabled,
    onClick: clickHandler
  };

  return url
    ? <NextLink href={url}><a {...attrs}><InnerControl text={text} icon={icon} /></a></NextLink>
    : <button {...attrs}><InnerControl text={text} icon={icon} /></button>;
};

export default Control;
/* light (button) */
{
  "icon": "download",
  "type": "light",
  "text": "download"
}

/* dark (button) */
{
  "icon": "download",
  "type": "dark",
  "text": "download"
}

/* light (link) */
{
  "url": "#",
  "icon": "download",
  "type": "light",
  "text": "download"
}

/* dark (link) */
{
  "url": "#",
  "icon": "download",
  "type": "dark",
  "text": "download"
}

Controls

e.g. 'Next' 'Previous' on Image carousel, 'Zoom' on Works page

Used to control the display of a component.

Light and Dark variants are to be chosen on a case-by-case basis according to their surroundings, rather than implying more or less significance. Use Dark button to make it prominent when displayed over image.

These can be called either as a button or an a element, based on whether or not a url prop is passed in.