ac-patterns/dist/drawer.js

/** @jsx h */
import getComponent from './utils/get-styled-component';
import { h } from 'preact';
import { Icon } from './icon';
import cn from 'classnames';

const cardStyles = {
  backfaceVisibility: 'hidden',
  webkitBackfaceVisibility: 'hidden',
  top: '0',
  left: '0'
};

export const FlipContainer = ({
  front,
  back,
  flipped,
  height,
  width,
  className,
  style,
  direction = 'vertical',
  perspective = '100px'
}) => {
  const axis = direction === 'vertical' ? 'X' : 'Y';
  const rotateZero = `rotate${axis}(0deg)`;
  const rotateFlipped = `rotate${axis}(180deg)`;
  return h(
    'div',
    {
      className: className,
      style: Object.assign({
        position: 'relative',
        perspective,
        width,
        height
      }, style)
    },
    h(
      'div',
      {
        style: {
          transition: '0.6s',
          transformStyle: 'preserve-3d',
          webkitTransformStyle: 'preserve-3d',
          position: 'relative',
          transformOrigin: 'center',
          webkitTransformOrigin: 'center',
          width: '100%',
          height: '100%',
          transform: !flipped ? rotateFlipped : '',
          webkitTransform: !flipped ? rotateFlipped : ''
        }
      },
      h(
        'div',
        {
          style: Object.assign({}, cardStyles, {
            transform: rotateFlipped,
            webkitTransform: rotateFlipped,
            width: '100%',
            height: '100%',
            position: 'relative'
          })
        },
        front
      ),
      h(
        'div',
        {
          style: Object.assign({}, cardStyles, {
            zIndex: 2,
            transform: rotateZero,
            webkitTransform: rotateZero,
            width: '100%',
            height: '100%',
            position: 'absolute'
          })
        },
        back
      )
    )
  );
};

export const FlipIcon = getComponent({
  options: {
    complete: ['complete'],
    icon: ['icon']
  },
  renderChildren: ({ icon, complete }) => {
    return [h(FlipContainer, {
      width: '20px',
      height: '20px',
      flipped: complete,
      front: h(Icon, { size: '20', icon: icon }),
      back: h(Icon, { className: 'light-blue', size: '20', icon: 'check_circle' })
    })];
  }
});

export const DrawerLink = getComponent({
  tagName: 'a',
  baseClasses: 'link pv1 mt1 f5 fw3 flex items-center',
  options: {
    active: ['active'],
    disabled: ['disabled'],
    completeness: ['complete']
  },
  fn: ({ active, disabled }) => cn({
    'light-blue': active,
    'mid-gray not-allowed': disabled,
    'white hover-moon-gray': !active && !disabled
  }),
  renderChildren: ({ icon, title, complete }) => [h(FlipIcon, { icon: icon, complete: complete }), h(
    'span',
    { 'data-e2e': `${title}Nav`, className: icon ? 'pl2' : null },
    title
  )]
});

export const DrawerLinkContainer = getComponent({
  baseClasses: 'link db pt2 pl3 f4',
  options: {
    completeness: ['complete'],
    title: ['title']
  },
  renderChildren: ({ complete, title, children }) => [h(
    'div',
    { className: 'flex items-center' },
    h(Icon, {
      className: cn('light-blue pr2', {
        hidden: !complete
      }),
      size: '20',
      icon: 'check_circle'
    }),
    h(
      'h3',
      { className: 'fw3 f6 ma0 ttu mid-gray bb b--mid-gray pb2 pt1 relative flex-grow-1' },
      title
    )
  ), h(
    'div',
    null,
    children
  )]
});

export const Drawer = getComponent({
  baseClasses: 'bg-dark-blue white fixed top-0 vh-100 overflow-x-hidden'
});