feat(Actions): Add Actions component

lib/atoms/makeAtoms.ts

@@ -19,6 +19,7 @@ import makePadding from './makePadding';
 import makeMargins from './makeMargins';
 import makeTransforms, { TransformParams } from './makeTransforms';
 import makeSizes from './makeSizes';
+import makeFlexDirections from './makeFlexDirections';
 import makeFontSizes from './font/makeFontSizes';
 import makeFills, { FillParams } from './color/makeFills';
 
@@ -48,6 +49,7 @@ const makeAtoms = (
     makeDisplayRules(tokens),
     makeTransforms(tokens, transforms),
     makeTransitions(),
+    makeFlexDirections(tokens),
   );
 
   const [queryRules, regularRules] = partition(Object.keys(rules), ruleName =>

lib/atoms/makeFlexDirections.ts

@@ -0,0 +1,25 @@
+import mapKeys from 'lodash/mapKeys';
+import { Tokens } from '../themes/theme';
+import createDesktopRules from './utils/makeDesktopRules';
+
+const defaultFlexDirectionPrefix = '.flexDirection_';
+const desktopFlexDirectionPrefix = '.flexDirectionDesktop_';
+
+const flexDirectionRules = {
+  row: { flexDirection: 'row' },
+  column: { flexDirection: 'column' },
+};
+
+const defaultFlexDirectionRules = mapKeys(
+  flexDirectionRules,
+  (value, key) => `${defaultFlexDirectionPrefix}${key}`,
+);
+const desktopFlexDirectionRules = mapKeys(
+  flexDirectionRules,
+  (value, key) => `${desktopFlexDirectionPrefix}${key}`,
+);
+
+export default (tokens: Tokens) => ({
+  ...defaultFlexDirectionRules,
+  ...createDesktopRules({ tokens, css: desktopFlexDirectionRules }),
+});

lib/atoms/makeTransitions.ts

@@ -1,5 +1,7 @@
 export default () => ({
-  '.transition_fast': { transition: 'all .125s ease' },
+  '.transition_fast': {
+    transition: 'transform .125s ease, opacity .125s ease',
+  },
   '.transition_touchable': {
     transition: 'transform 0.2s cubic-bezier(0.02, 1.505, 0.745, 1.235)',
   },

lib/atoms/normalizeAtoms.ts

@@ -277,4 +277,12 @@ export default (
     standardTextInline: atoms.width_standardTextInline,
     full: atoms.width_full,
   },
+  flexDirection: {
+    row: atoms.flexDirection_row,
+    column: atoms.flexDirection_column,
+  },
+  flexDirectionDesktop: {
+    row: atoms.flexDirectionDesktop_row,
+    column: atoms.flexDirectionDesktop_column,
+  },
 });

lib/atoms/utils/columnSpacingForCssRule.ts

@@ -19,7 +19,7 @@ export default (
 
   return {
     [`.${ruleName}_none`]: {
-      [propertyName]: 'none',
+      [propertyName]: 0,
     },
     ...columnRules,
   };

lib/atoms/utils/rowSpacingForCssRule.ts

@@ -20,7 +20,7 @@ export default (
 
   return {
     [`.${ruleName}_none`]: {
-      [propertyName]: 'none',
+      [propertyName]: 0,
     },
     ...rowRules,
   };

lib/components/Actions/Actions.docs.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import Actions from './Actions';
+import Button from '../Button/Button';
+import TextLink from '../TextLink/TextLink';
+import { ComponentDocs } from '../../../docs/src/types';
+
+const docs: ComponentDocs = {
+  examples: [
+    {
+      label: 'Actions with Strong Button and TextLink',
+      render: () => (
+        <Actions>
+          <Button weight="strong">Strong</Button>
+          <TextLink href="#">TextLink</TextLink>
+        </Actions>
+      ),
+    },
+    {
+      label: 'Actions with Regular Button and Weak Button',
+      render: () => (
+        <Actions>
+          <Button weight="regular">Regular</Button>
+          <Button weight="weak">Weak</Button>
+        </Actions>
+      ),
+    },
+    {
+      label: 'Actions with Weak Buttons and Regular Button',
+      render: () => (
+        <Actions>
+          <Button weight="weak">Weak</Button>
+          <Button weight="weak">Weak</Button>
+          <Button weight="regular">Regular</Button>
+        </Actions>
+      ),
+    },
+  ],
+};
+
+export default docs;

lib/components/Actions/Actions.tsx

@@ -0,0 +1,34 @@
+import React, { Component, Children, ReactNode } from 'react';
+import { ActionsProvider } from './ActionsContext';
+import Box from '../Box/Box';
+
+export interface ActionsProps {
+  children: ReactNode;
+}
+
+export default class Actions extends Component<ActionsProps> {
+  static displayName = 'Actions';
+
+  render() {
+    const { children } = this.props;
+
+    return (
+      <ActionsProvider value={true}>
+        <Box display="flex" flexDirection={['column', 'row']}>
+          {Children.map(children, (child, index) =>
+            index === 0 ? (
+              <div>{child}</div>
+            ) : (
+              <Box
+                paddingLeft={['none', 'xsmall']}
+                paddingTop={['xsmall', 'none']}
+              >
+                {child}
+              </Box>
+            ),
+          )}
+        </Box>
+      </ActionsProvider>
+    );
+  }
+}

lib/components/Actions/ActionsContext.ts

@@ -0,0 +1,6 @@
+import { createContext } from 'react';
+
+const { Provider, Consumer } = createContext(false);
+
+export const ActionsProvider = Provider;
+export const ActionsConsumer = Consumer;

lib/components/Box/Box.tsx

@@ -2,14 +2,14 @@ import React, { Component } from 'react';
 import classnames from 'classnames';
 import ThemeConsumer from '../ThemeConsumer/ThemeConsumer';
 import Reset, { ResetProps } from '../Reset/Reset';
-import styles from './Box.css.js';
 import {
   HorizontalSpacing,
   VerticalPadding,
   Spacing,
   BorderRadius,
   BackgroundColor,
   Display,
+  FlexDirection,
   BoxShadow,
   Transition,
   Transform,
@@ -42,6 +42,7 @@ export interface BoxProps extends ResetProps {
   marginLeft?: ResponsiveProp<HorizontalSpacing>;
   marginRight?: ResponsiveProp<HorizontalSpacing>;
   display?: ResponsiveProp<Display>;
+  flexDirection?: ResponsiveProp<FlexDirection>;
   borderRadius?: BorderRadius;
   backgroundColor?: BackgroundColor;
   boxShadow?: BoxShadow;
@@ -64,6 +65,7 @@ export default class Box extends Component<BoxProps> {
       marginLeft,
       marginRight,
       display,
+      flexDirection,
       borderRadius,
       backgroundColor,
       boxShadow,
@@ -81,7 +83,6 @@ export default class Box extends Component<BoxProps> {
             <Reset
               className={classnames(
                 className,
-                styles.root,
                 atoms.backgroundColor[backgroundColor!],
                 atoms.boxShadow[boxShadow!],
                 atoms.borderRadius[borderRadius!],
@@ -143,6 +144,12 @@ export default class Box extends Component<BoxProps> {
                     atoms.displayDesktop,
                     display,
                   ),
+                flexDirection &&
+                  getResponsiveClasses(
+                    atoms.flexDirection,
+                    atoms.flexDirectionDesktop,
+                    flexDirection,
+                  ),
               )}
               {...restProps}
             />

lib/components/Button/Button.css.js

@@ -3,7 +3,6 @@ export default {
     cursor: 'pointer',
     position: 'relative',
     outline: 'none',
-    width: '100%',
 
     '&.weak': {
       backgroundColor: 'transparent',

lib/components/Button/Button.tsx

@@ -2,8 +2,9 @@ import React, { Component, ReactNode, AllHTMLAttributes } from 'react';
 import classnames from 'classnames';
 import { BackgroundColor, Color } from 'lib/themes/theme';
 import styles from './Button.css.js';
-import Box, { BoxProps } from '../Box/Box';
+import Box from '../Box/Box';
 import Text from '../Text/Text';
+import FieldOverlay from '../private/FieldOverlay/FieldOverlay';
 
 type ButtonWeight = 'weak' | 'regular' | 'strong';
 type ButtonState = 'base' | 'hover' | 'active';
@@ -42,18 +43,6 @@ const foregroundColor: Record<ButtonWeight, Color> = {
   strong: 'brandAccentForeground',
 };
 
-const Overlay = ({ className, ...props }: BoxProps) => (
-  <Box
-    paddingLeft="gutter"
-    paddingRight="gutter"
-    paddingBottom="standardTouchableText"
-    paddingTop="standardTouchableText"
-    borderRadius="standard"
-    className={classnames(styles.overlay, className)}
-    {...props}
-  />
-);
-
 export default class Button extends Component<ButtonProps> {
   static displayName = 'Button';
 
@@ -66,6 +55,7 @@ export default class Button extends Component<ButtonProps> {
       <Box
         component="button"
         type={type}
+        width="full"
         display="block"
         borderRadius="standard"
         boxShadow={isWeak ? 'borderFormAccentLarge' : undefined}
@@ -76,24 +66,30 @@ export default class Button extends Component<ButtonProps> {
           [styles.weak]: isWeak,
         })}
       >
-        <Overlay boxShadow="outlineFocus" className={styles.focusOverlay} />
-        <Overlay
+        <FieldOverlay variant="focus" className={styles.focusOverlay} />
+        <FieldOverlay
           backgroundColor={backgroundColor.hover[weight]}
           className={styles.hoverOverlay}
         />
-        <Overlay
+        <FieldOverlay
           backgroundColor={backgroundColor.active[weight]}
           className={styles.activeOverlay}
         />
-        <Overlay className={styles.content}>
+        <Box
+          paddingLeft="gutter"
+          paddingRight="gutter"
+          paddingBottom="standardTouchableText"
+          paddingTop="standardTouchableText"
+          className={styles.content}
+        >
           <Text
             baseline={false}
             weight="medium"
             color={foregroundColor[weight]}
           >
             {children}
           </Text>
-        </Overlay>
+        </Box>
       </Box>
     );
   }

lib/components/TextLinkRenderer/TextLinkRenderer.css.js

@@ -6,4 +6,18 @@ export default {
       textDecoration: 'underline',
     },
   },
+  '.root_isButton': {
+    outline: 'none',
+    textAlign: 'center',
+  },
+  '.overlayContainer': {
+    display: 'block',
+    position: 'relative',
+  },
+  '.focusOverlay': {
+    opacity: 0,
+    '.root:focus ~ &': {
+      opacity: 1,
+    },
+  },
 };

lib/components/TextLinkRenderer/TextLinkRenderer.css.js.d.ts

@@ -1,3 +1,6 @@
 // This file is automatically generated.
 // Please do not change this file!
+export const focusOverlay: string;
+export const overlayContainer: string;
 export const root: string;
+export const root_isButton: string;