bring components back 👼

Author: hharnisc

.gitignore

@@ -5,3 +5,4 @@ node_modules
 .npm
 /coverage
 .DS_Store
+yarn-error.log

ArrowPopover/index.jsx

@@ -0,0 +1,150 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { calculateStyles, parseColor } from '../lib/utils';
+import { darkPopover } from '../style/color';
+import { borderRadius } from '../style/border';
+import { tooltip as tooltipZIndex } from '../style/zIndex';
+
+import Text from '../Text';
+
+const arrowHeight = 14;
+const arrowWidth = 8;
+
+const ArrowPopover = ({
+  children,
+  visible,
+  offset,
+  oneLine,
+  position,
+  padded,
+  color,
+  backgroundColor,
+  shadow,
+  width,
+  isTooltip,
+  id,
+}) => {
+  const offsetTop = position === 'above' ? -offset.top : offset.top;
+  const style = calculateStyles({
+    default: {
+      transform: `translate(${arrowWidth + offset.left}px, ${offsetTop}px)`,
+      background: parseColor(backgroundColor),
+      color: parseColor(color),
+      display: 'inline-block',
+      borderRadius,
+      boxShadow: shadow ? '0 1px 2px 0 rgba(0,0,0,0.50)' : 'none',
+      textAlign: 'left',
+      position: 'absolute',
+      left: '100%',
+      zIndex: tooltipZIndex,
+    },
+    hidden: {
+      display: 'none',
+    },
+    oneLine: {
+      whiteSpace: 'nowrap',
+    },
+    positionAbove: {
+      bottom: 0,
+    },
+    positionBelow: {
+      top: 0,
+    },
+    padded: {
+      padding: '.25rem .75rem',
+    },
+    fixedWidth: {
+      width,
+    },
+  }, {
+    hidden: !visible,
+    positionAbove: position === 'above',
+    positionBelow: position === 'below',
+    oneLine: oneLine && width === 'none',
+    padded,
+    fixedWidth: width !== 'none',
+  });
+
+  const arrowStyle = calculateStyles({
+    default: {
+      position: 'absolute',
+      left: -arrowWidth,
+      width: 0,
+      height: 0,
+      backgroundColor: 'transparent',
+      borderStyle: 'solid',
+      borderTopWidth: arrowHeight / 2.0,
+      borderRightWidth: arrowWidth,
+      borderBottomWidth: arrowHeight / 2.0,
+      borderLeftWidth: 0,
+      borderTopColor: 'transparent',
+      borderRightColor: backgroundColor,
+      borderBottomColor: 'transparent',
+      borderLeftColor: 'transparent',
+    },
+    positionNormal: {
+      top: '50%',
+      transform: 'translate(0, -50%)',
+    },
+    positionAbove: {
+      top: 'none',
+      bottom: '6px',
+      transform: 'none',
+    },
+    positionBelow: {
+      top: '6px',
+      transform: 'none',
+    },
+  }, {
+    positionNormal: true,
+    positionAbove: position === 'above',
+    positionBelow: position === 'below',
+  });
+
+  const aria = isTooltip ? {
+    role: 'tooltip',
+    'aria-hidden': !visible,
+  } : {};
+
+  return (
+    <div style={style} id={id} {...aria}>
+      <span style={arrowStyle} />
+      <Text color={color} size="small">{children}</Text>
+    </div>
+  );
+};
+
+ArrowPopover.propTypes = {
+  children: PropTypes.node.isRequired,
+  visible: PropTypes.bool,
+  oneLine: PropTypes.bool,
+  offset: PropTypes.shape({
+    top: PropTypes.number,
+    left: PropTypes.number,
+  }),
+  position: PropTypes.oneOf(['above', 'below', 'none']),
+  padded: PropTypes.bool,
+  color: PropTypes.string,
+  backgroundColor: PropTypes.string,
+  shadow: PropTypes.bool,
+  width: PropTypes.string,
+  isTooltip: PropTypes.bool,
+  id: PropTypes.string,
+};
+
+ArrowPopover.defaultProps = {
+  visible: false,
+  oneLine: true,
+  offset: { left: 0, top: 0 },
+  position: 'none',
+  padded: true,
+  color: 'white',
+  backgroundColor: darkPopover,
+  shadow: false,
+  width: 'none',
+  isTooltip: false,
+  id: '',
+};
+
+export default ArrowPopover;

ArrowPopover/story.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { checkA11y } from 'storybook-addon-a11y';
+import ArrowPopover from './index';
+import Text from '../Text';
+
+storiesOf('ArrowPopover')
+.addDecorator(checkA11y)
+.add('default tooltip', () => (
+  <div style={{ display: 'inline-block', margin: '5rem', position: 'relative', overflow: 'visible' }}>
+    <Text>I have a Popover tooltip!</Text>
+    <ArrowPopover visible shadow>
+      This is a simple tooltip style Popover!
+    </ArrowPopover>
+  </div>
+))
+.add('larger popover: below', () => (
+  <div style={{ display: 'inline-block', margin: '5rem', position: 'relative', overflow: 'visible' }}>
+    <Text>I have a Popover!</Text>
+    <ArrowPopover visible oneLine={false} width="300px" position="below">
+      <div style={{ padding: '.5rem .25rem' }}>
+        Your posting schedule tells Buffer when to send out posts in your Queue (under the Content tab).<br /><br />
+        For example, the next 10 posts you add to your Queue will go out in the next 10 upcoming time/date slots you decide below. <br /><br />
+        You can change this schedule at any time!
+      </div>
+    </ArrowPopover>
+  </div>
+))
+.add('larger popover: above', () => (
+  <div style={{ display: 'inline-block', margin: '5rem', position: 'relative', overflow: 'visible' }}>
+    <Text>I have a Popover!</Text>
+    <ArrowPopover visible position="above" shadow>
+      <div style={{ padding: ' .5rem .25rem' }}>
+        Look at me!<br />
+        I'm so far above the rest! ✈️<br />
+        Later! ✌️
+      </div>
+    </ArrowPopover>
+  </div>
+));

Button/index.jsx

@@ -2,12 +2,14 @@ import React from 'react';
 import ButtonStateless from '../ButtonStateless';
 import PseudoClassComponent from '../PseudoClassComponent';
 
+const isNativeComponent = component => typeof component.type === 'string';
+
 class Button extends PseudoClassComponent {
   render() {
     const { children, ...rest } = this.props;
     let hoveredChildren = children;
     // string as children isn't clonable
-    if (React.isValidElement(children)) {
+    if (React.isValidElement(children) && !isNativeComponent(children)) {
       hoveredChildren = React.cloneElement(
         children,
         { hovered: this.state.hovered },

Button/test.jsx

@@ -1,9 +1,12 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { mount, configure } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
 import ButtonStateless from '../ButtonStateless';
 import testComponentA11y from '../lib/a11yTestHelper';
 import Button from './index';
 
+configure({ adapter: new Adapter() });
+
 describe('Button', () => {
   it('should pass accessibility audit', () => testComponentA11y(
     <Button>A Button</Button>,
@@ -16,10 +19,12 @@ describe('Button', () => {
     const button = wrapper
       .find(ButtonStateless);
     button.simulate('mouseEnter');
-    expect(button.props().hovered)
+    wrapper.update();
+    expect(wrapper.find(ButtonStateless).props().hovered)
       .toBe(true);
     button.simulate('mouseLeave');
-    expect(button.props().hovered)
+    wrapper.update();
+    expect(wrapper.find(ButtonStateless).props().hovered)
       .toBe(false);
   });
 
@@ -30,10 +35,12 @@ describe('Button', () => {
     const button = wrapper
       .find(ButtonStateless);
     button.simulate('focus');
-    expect(button.props().focused)
+    wrapper.update();
+    expect(wrapper.find(ButtonStateless).props().focused)
       .toBe(true);
     button.simulate('blur');
-    expect(button.props().focused)
+    wrapper.update();
+    expect(wrapper.find(ButtonStateless).props().focused)
       .toBe(false);
   });
 
@@ -50,10 +57,12 @@ describe('Button', () => {
     const button = wrapper
       .find(ButtonStateless);
     button.simulate('focus');
-    expect(button.props().focused)
+    wrapper.update();
+    expect(wrapper.find(ButtonStateless).props().focused)
       .toBe(true);
     button.simulate('blur');
-    expect(button.props().focused)
+    wrapper.update();
+    expect(wrapper.find(ButtonStateless).props().focused)
       .toBe(false);
   });
 });

ButtonStateless/index.jsx

@@ -44,6 +44,7 @@ const Button = ({
   quaternary,
   warning,
   noStyle,
+  label,
 }) => {
   const style = calculateStyles({
     default: {
@@ -172,6 +173,7 @@ const Button = ({
       onFocus={onFocus}
       onBlur={onBlur}
       disabled={disabled}
+      aria-label={label || null}
     >
       {children}
     </button>
@@ -197,6 +199,7 @@ Button.propTypes = {
   tertiary: PropTypes.bool,
   quaternary: PropTypes.bool,
   warning: PropTypes.bool,
+  label: PropTypes.string,
 };
 
 export default Button;

Card/index.jsx

@@ -9,6 +9,7 @@ import {
 } from '../style/font';
 import {
   outerSpace,
+  outerSpaceLight,
   white,
   mystic,
   geyser,
@@ -25,6 +26,7 @@ import {
 } from '../style/animation';
 import {
   boxShadowLevelOne,
+  boxShadowLevelTwo,
 } from '../style/dropShadow';
 
 const Card = ({
@@ -40,6 +42,8 @@ const Card = ({
   onMouseEnter,
   onMouseLeave,
   reducedPadding,
+  shadowHeight,
+  draggingPlaceholder,
 }) => {
   const style = calculateStyles({
     default: {
@@ -66,7 +70,7 @@ const Card = ({
       opacity: 0.5,
     },
     noBorder: {
-      border: 0,
+      border: `${borderWidth} solid transparent`,
     },
     noPadding: {
       padding: 0,
@@ -81,6 +85,15 @@ const Card = ({
     reducedPadding: {
       padding: '1rem',
     },
+    shadowHeightOne: {
+      boxShadow: boxShadowLevelOne,
+    },
+    shadowHeightTwo: {
+      boxShadow: boxShadowLevelTwo,
+    },
+    draggingPlaceholder: {
+      border: `${borderWidth} dashed ${outerSpaceLight}`,
+    },
   }, {
     doublePadding,
     empty,
@@ -91,6 +104,9 @@ const Card = ({
     hovered,
     color,
     reducedPadding,
+    shadowHeightOne: shadowHeight === 1,
+    shadowHeightTwo: shadowHeight === 2,
+    draggingPlaceholder,
   });
   return (
     <div
@@ -116,6 +132,13 @@ Card.propTypes = {
   onMouseEnter: PropTypes.func,
   onMouseLeave: PropTypes.func,
   reducedPadding: PropTypes.bool,
+  shadowHeight: PropTypes.oneOf([0, 1, 2]),
+  draggingPlaceholder: PropTypes.bool,
+};
+
+Card.defaultProps = {
+  shadowHeight: 0,
+  draggingPlaceholder: false,
 };
 
 export default Card;

Card/story.jsx

@@ -47,4 +47,10 @@ storiesOf('Card')
   ))
   .add('reducedPadding', () => (
     <Card reducedPadding>What is a Product Designer? An awesome story by <Link href={'#'}>@jgadapee</Link> over on Medium! <Link href={'#'}>http://buff.ly/1LTbUqv</Link></Card>
+  ))
+  .add('shadowHeight=1', () => (
+    <Card shadowHeight={1}>What is a Product Designer? An awesome story by <Link href={'#'}>@jgadapee</Link> over on Medium! <Link href={'#'}>http://buff.ly/1LTbUqv</Link></Card>
+  ))
+  .add('shadowHeight=2', () => (
+    <Card shadowHeight={2}>What is a Product Designer? An awesome story by <Link href={'#'}>@jgadapee</Link> over on Medium! <Link href={'#'}>http://buff.ly/1LTbUqv</Link></Card>
   ));