Rework Group and Inputs

jest.config.js

@@ -1,6 +1,6 @@
 module.exports = {
   setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
-  testPathIgnorePatterns: ['<rootDir>/template/', 'dist'],
+  testPathIgnorePatterns: ['<rootDir>/template/', '/dist/'],
   moduleNameMapper: {
     '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
       '<rootDir>/tests/file-mock.js',

packages/flame/CHANGELOG.md

@@ -7,6 +7,21 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 Refer to the [CONTRIBUTING guide](https://github.com/lightspeed/flame/blob/master/.github/CONTRIBUTING.md) for more info.
 
+## [Unreleased]
+
+### Added
+
+- Add InputGroup and FormField (Label + FormHelper) components ([#2](https://github.com/lightspeed/flame/pull/2))
+- Expose Input, Radio and Checkbox base components ([#2](https://github.com/lightspeed/flame/pull/2))
+
+### Changed
+
+- Input no longer uses objects to represent status and status message ([#2](https://github.com/lightspeed/flame/pull/2))
+
+### Deprecated
+
+- Group component will be removed from the next major version of Flame ([#2](https://github.com/lightspeed/flame/pull/2))
+
 ## 1.0.0 - 2019-10-08
 
 - Flame is now considered stable :tada:

packages/flame/src/Button/BaseButton.tsx

@@ -1,8 +1,9 @@
 import { css } from '@emotion/core';
 import styled from '@emotion/styled';
-import { space, SpaceProps } from 'styled-system';
+import { space, SpaceProps, layout, LayoutProps, compose } from 'styled-system';
 import { themeGet } from '@styled-system/theme-get';
 import { Merge } from 'type-fest';
+import { border, BorderProps } from '../Core';
 
 export type ButtonHTML = React.HTMLProps<HTMLButtonElement> & React.HTMLProps<HTMLAnchorElement>;
 export type ButtonSizes = 'small' | 'large' | 'xlarge' | 'medium';
@@ -13,7 +14,9 @@ export type BaseButtonProps = {
   disabled?: boolean;
   /** Sets display: block on Button */
   block?: boolean;
-} & SpaceProps;
+} & SpaceProps &
+  LayoutProps &
+  BorderProps;
 
 const generateSize = (height: number, px: number, font: string, radius: string) => (
   props: BaseButtonProps,
@@ -89,7 +92,12 @@ export const BaseButton = styled('button')<Merge<ButtonHTML, BaseButtonProps>>`
   }
 
   ${setDisabled};
-  ${space};
+
+  ${compose(
+    space,
+    border,
+    layout,
+  )};
 `;
 
 BaseButton.defaultProps = {

packages/flame/src/Button/story.tsx

@@ -7,9 +7,11 @@ import { Button } from './Button';
 import Readme from './README.md';
 import { Flex, Box } from '../Core';
 import { Divider } from '../Divider';
-import { Group } from '../Group';
+import { InputGroup } from '../InputGroup';
 import { Icon } from '../Icon';
 
+import { SpacedGroup } from '../../../../stories/components/SpacedGroup';
+
 const stories = storiesOf('Button', module).addDecorator(withReadme(Readme));
 
 type ButtonPresenterState = {
@@ -56,15 +58,15 @@ class ButtonPresenter extends PureComponent<{}, ButtonPresenterState> {
 stories.add('Styles', () => (
   <div>
     <h3>Outline</h3>
-    <Group>
+    <SpacedGroup>
       <Button>Default</Button>
       <Button variant="primary">Primary</Button>
       <Button variant="secondary">Secondary</Button>
       <Button variant="danger">Danger</Button>
-    </Group>
+    </SpacedGroup>
 
     <h3>Forced State - Active</h3>
-    <Group>
+    <SpacedGroup>
       <Button forcedState="active">Default</Button>
       <Button variant="primary" forcedState="active">
         Primary
@@ -75,10 +77,10 @@ stories.add('Styles', () => (
       <Button variant="danger" forcedState="active">
         Danger
       </Button>
-    </Group>
+    </SpacedGroup>
 
     <h3>Forced State - Hover</h3>
-    <Group>
+    <SpacedGroup>
       <Button forcedState="hover">Default</Button>
       <Button variant="primary" forcedState="hover">
         Primary
@@ -89,10 +91,10 @@ stories.add('Styles', () => (
       <Button variant="danger" forcedState="hover">
         Danger
       </Button>
-    </Group>
+    </SpacedGroup>
     <hr />
     <h3>Fill</h3>
-    <Group>
+    <SpacedGroup>
       <Button variant="primary" fill>
         Primary
       </Button>
@@ -102,10 +104,10 @@ stories.add('Styles', () => (
       <Button variant="danger" fill>
         Danger
       </Button>
-    </Group>
+    </SpacedGroup>
 
     <h3>Forced State - Active</h3>
-    <Group>
+    <SpacedGroup>
       <Button variant="primary" fill forcedState="active">
         Primary
       </Button>
@@ -115,10 +117,10 @@ stories.add('Styles', () => (
       <Button variant="danger" fill forcedState="active">
         Danger
       </Button>
-    </Group>
+    </SpacedGroup>
 
     <h3>Forced State - Hover</h3>
-    <Group>
+    <SpacedGroup>
       <Button variant="primary" fill forcedState="hover">
         Primary
       </Button>
@@ -128,14 +130,14 @@ stories.add('Styles', () => (
       <Button variant="danger" fill forcedState="hover">
         Danger
       </Button>
-    </Group>
+    </SpacedGroup>
   </div>
 ));
 
 stories.add('Sizes', () => (
   <div>
     <Box mb={3}>
-      <Group>
+      <SpacedGroup>
         <Button size="small">Small</Button>
         <Button variant="primary">Medium</Button>
         <Button variant="secondary" size="large">
@@ -144,10 +146,10 @@ stories.add('Sizes', () => (
         <Button variant="danger" size="xlarge">
           Extra Large
         </Button>
-      </Group>
+      </SpacedGroup>
     </Box>
     <Box mb={3}>
-      <Group type="vertical">
+      <SpacedGroup flexDirection="column">
         <Button size="small" block>
           Small Block
         </Button>
@@ -160,7 +162,7 @@ stories.add('Sizes', () => (
         <Button variant="danger" size="xlarge" block>
           Extra Large Block
         </Button>
-      </Group>
+      </SpacedGroup>
     </Box>
     <Divider mt={3} />
     <h3>Multiline</h3>
@@ -208,7 +210,7 @@ stories.add('Button as Links', () => (
 stories.add('Events', () => (
   <div>
     <Box mb={3}>
-      <Group type="vertical">
+      <SpacedGroup flexDirection="column">
         <Button onClick={action('Clicked')}>Button with onClick event (see Action Logger)</Button>
         <Button onFocus={action('Focused')}>Button with onFocus event (see Action Logger)</Button>
         <Button onBlur={action('Blured')}>Button with onBlur event (see Action Logger)</Button>
@@ -227,56 +229,56 @@ stories.add('Events', () => (
         <Button href="http://google.com" target="_blank" disabled>
           Disabled link removes href and target
         </Button>
-      </Group>
+      </SpacedGroup>
     </Box>
   </div>
 ));
 
 stories.add('With Children', () => (
   <div>
     <Box mb={3}>
-      <Group>
+      <SpacedGroup>
         <Button size="small">
           <Icon name="orders" />
         </Button>
         <Button>
           <Icon name="orders" />
         </Button>
-        <Group noSpacing>
+        <InputGroup>
           <Button>
             <Icon name="small-chevron-left" />
           </Button>
           <Button>
             <Icon name="small-chevron-right" />
           </Button>
-        </Group>
+        </InputGroup>
         <Button size="large">
           <Icon name="orders" />
         </Button>
         <Button size="xlarge">
           <Icon name="orders" />
         </Button>
-      </Group>
+      </SpacedGroup>
     </Box>
     <Box mb={3}>
-      <Group>
+      <SpacedGroup>
         <Button variant="primary">
           <Icon name="chevron-left" /> Back
         </Button>
         <Button variant="primary" fill>
           <Icon name="dashboard" /> Dashboard
         </Button>
-      </Group>
+      </SpacedGroup>
     </Box>
     <Box mb={3}>
-      <Group>
+      <SpacedGroup>
         <Button variant="secondary">
           View Product <Icon name="arrow-right" />
         </Button>
         <Button variant="secondary" fill>
           Customers <Icon name="customers" />
         </Button>
-      </Group>
+      </SpacedGroup>
     </Box>
     <Box mb={3}>
       <Button variant="danger">
@@ -287,7 +289,7 @@ stories.add('With Children', () => (
       </Button>
     </Box>
     <Box mb={3}>
-      <Group type="vertical">
+      <SpacedGroup flexDirection="column">
         <Button size="small" block>
           <Icon name="users" /> Small Block
         </Button>
@@ -301,15 +303,15 @@ stories.add('With Children', () => (
           <Icon name="support-tickets" /> Large Block
         </Button>
         <Button size="xlarge" block>
-          Extra Large Block with Lightspeed logo
+          Extra Large Block
         </Button>
         <Button size="xlarge" block>
           <Icon name="image" size="xsmall" /> Custom icon size in Extra Large Block
         </Button>
-      </Group>
+      </SpacedGroup>
     </Box>
     <Box mb={3}>
-      <Group type="vertical">
+      <SpacedGroup flexDirection="column">
         <Button size="small" block>
           <Icon name="users" /> Small Block
         </Button>
@@ -323,16 +325,16 @@ stories.add('With Children', () => (
           <Icon name="support-tickets" /> Large Block
         </Button>
         <Button size="xlarge" block>
-          Extra Large Block with Lightspeed logo
+          Extra Large Block
         </Button>
         <Button size="xlarge" block>
           <Icon name="image" size="xsmall" /> Custom icon size in Extra Large Block
         </Button>
-      </Group>
+      </SpacedGroup>
     </Box>
     <Box mb={3}>
       <h3>Icons with details should be colored properly</h3>
-      <Group>
+      <SpacedGroup>
         <Button variant="primary" fill>
           <Icon name="dashboard" /> Dashboard
         </Button>
@@ -345,15 +347,15 @@ stories.add('With Children', () => (
         <Button fill>
           <Icon name="dashboard" /> Dashboard
         </Button>
-      </Group>
+      </SpacedGroup>
     </Box>
   </div>
 ));
 
 stories.add('Loading', () => (
   <div>
     <Box mb={3}>
-      <Group>
+      <SpacedGroup>
         <Button loading>Default</Button>
         <Button variant="primary" loading>
           Primary
@@ -364,10 +366,10 @@ stories.add('Loading', () => (
         <Button variant="danger" loading>
           Danger
         </Button>
-      </Group>
+      </SpacedGroup>
     </Box>
     <Box mb={3}>
-      <Group>
+      <SpacedGroup>
         <Button size="small" variant="primary" fill loading>
           Primary
         </Button>
@@ -377,7 +379,7 @@ stories.add('Loading', () => (
         <Button size="xlarge" variant="danger" fill loading>
           Danger
         </Button>
-      </Group>
+      </SpacedGroup>
     </Box>
     <Box mb={3}>
       <ButtonPresenter />

packages/flame/src/Checkbox/Checkbox.test.tsx

@@ -12,8 +12,8 @@ type RenderTest = {
     indeterminate?: boolean;
     id?: string;
     value?: string;
-    label?: string | Function;
-    description?: string | Function;
+    label?: any;
+    description?: any;
   };
 };
 
@@ -34,8 +34,8 @@ describe('<Checkbox />', () => {
         props: {
           id: 'id',
           value: 'value',
-          label: () => <div>Label</div>,
-          description: () => <div>Description</div>,
+          label: <div>Label</div>,
+          description: <div>Description</div>,
         },
       },
     ];
@@ -82,10 +82,7 @@ describe('<Checkbox />', () => {
 
     it('renders custom components in Label and Description', () => {
       const { getByText } = customRender(
-        <Checkbox
-          label={() => <div>my label</div>}
-          description={() => <div>my description</div>}
-        />,
+        <Checkbox label={<div>my label</div>} description={<div>my description</div>} />,
       );
 
       getByText('my label');