Merge pull request #128 from Ultimaker/STAR-335-move-components-to-library

STAR-335 move tile styles

Author: ImreBognarUltimaker

src/components/__tests__/__snapshots__/about_dialog.test.tsx.snap

@@ -58,7 +58,7 @@ exports[`The AboutDialog component should render 1`] = `
       </tbody>
     </table>
     <FormActions
-      align="left"
+      align="right"
     >
       <Button
         appearance="primary"

src/components/__tests__/__snapshots__/form.test.tsx.snap

@@ -7,7 +7,7 @@ exports[`The Form component should render 1`] = `
   onSubmit={[Function]}
 >
   <FormActions
-    align="left"
+    align="right"
   >
     <Button
       appearance="primary"
@@ -104,10 +104,10 @@ exports[`The Form component should render with a form item 1`] = `
       </InputField>
     </div>
     <FormActions
-      align="left"
+      align="right"
     >
       <div
-        className="form-actions form-actions--left"
+        className="form-actions form-actions--right"
       >
         <div
           className="form-actions__btn-container"

src/components/__tests__/__snapshots__/form_actions.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`The form actions component should render its children 1`] = `
 <div
-  className="form-actions form-actions--left"
+  className="form-actions form-actions--right"
 >
   <div
     className="form-actions__btn-container"

src/components/__tests__/__snapshots__/response_error.test.tsx.snap

@@ -7,6 +7,7 @@ exports[`The ResponseError component should render 1`] = `
   <Tile
     alert={true}
     align="center"
+    appearance="shadow"
     padding="md"
   >
     <div

src/components/__tests__/__snapshots__/tile.test.tsx.snap

@@ -2,9 +2,10 @@
 
 exports[`The Tile component should render 1`] = `
 <div
-  className="tile padding-md"
+  className="tile padding-md tile--shadow"
   style={
     Object {
+      "borderRadius": undefined,
       "textAlign": "left",
     }
   }

src/components/__tests__/tile.test.tsx

@@ -15,4 +15,54 @@ describe('The Tile component', () => {
     it('should render', () => {
         expect(wrapper).toMatchSnapshot();
     });
+
+    it('should render disabled', () => {
+        wrapper.setProps({ disabled: true });
+        expect(wrapper.find('.tile--disabled')).toHaveLength(1);
+    });
+
+    it('should render selected', () => {
+        wrapper.setProps({ selected: true });
+        expect(wrapper.find('.tile--selected')).toHaveLength(1);
+    });
+
+    it('should render alert', () => {
+        wrapper.setProps({ alert: true });
+        expect(wrapper.find('.tile--alert')).toHaveLength(1);
+    });
+
+    it('should render success', () => {
+        wrapper.setProps({ success: true });
+        expect(wrapper.find('.tile--success')).toHaveLength(1);
+    });
+
+    it('should render shadow', () => {
+        wrapper.setProps({ appearance: 'shadow' });
+        expect(wrapper.find('.tile--shadow')).toHaveLength(1);
+    });
+
+    it('should render dashed', () => {
+        wrapper.setProps({ appearance: 'dashed' });
+        expect(wrapper.find('.tile--dashed')).toHaveLength(1);
+    });
+
+    it('should render flat', () => {
+        wrapper.setProps({ appearance: 'flat' });
+        expect(wrapper.find('.tile--flat')).toHaveLength(1);
+    });
+
+    it('should render padding', () => {
+        wrapper.setProps({ padding: 'lg' });
+        expect(wrapper.find('.padding-lg')).toHaveLength(1);
+    });
+
+    it('should render radius', () => {
+        wrapper.setProps({ radius: '0.5rem' });
+        expect(wrapper.find('.tile').prop('style')).toHaveProperty('borderRadius', '0.5rem');
+    });
+
+    it('should render align', () => {
+        wrapper.setProps({ align: 'center' });
+        expect(wrapper.find('.tile').prop('style')).toHaveProperty('textAlign', 'center');
+    });
 });

src/components/form_actions.tsx

@@ -24,7 +24,7 @@ export const FormActions: React.StatelessComponent<FormActionsProps> = ({ align,
 };
 
 FormActions.defaultProps = {
-    align: 'left',
+    align: 'right',
 };
 
 FormActions.displayName = 'FormActions';

src/components/tile.tsx

@@ -3,6 +3,7 @@ import classnames from 'classnames';
 
 export type Padding = 'none' | 'sm' | 'md' | 'lg';
 export type Align = 'left' | 'center' | 'right';
+export type TileAppearance = 'shadow' | 'dashed' | 'flat';
 
 export interface TileProps {
     /** The amount of padding to apply: 'none' | 'sm' | 'md' | 'lg' */
@@ -19,17 +20,24 @@ export interface TileProps {
     success?: boolean;
     /** An optional class name for the tile * */
     className?: string;
+    /** CSS styling: 'shadow' | 'dashed' | 'flat' */
+    appearance?: TileAppearance;
+    /** Border radius. Include unit */
+    radius?: string;
 }
 
 export const Tile: React.StatelessComponent<TileProps> = ({
-    padding, align, children, disabled, selected, alert, success, className,
+    padding, align, children, disabled, selected, alert, success, className, appearance, radius,
 }): JSX.Element => {
-    const classes = classnames('tile', className, `padding-${padding}`, {
-        selected, alert, disabled, success,
+    const classes = classnames('tile', className, `padding-${padding}`, `tile--${appearance}`, {
+        'tile--selected': selected,
+        'tile--alert': alert,
+        'tile--disabled': disabled,
+        'tile--success': success,
     });
 
     return (
-        <div className={classes} style={{ textAlign: align }}>
+        <div className={classes} style={{ textAlign: align, borderRadius: radius }}>
             <div className="cover" />
             {children}
         </div>
@@ -39,6 +47,7 @@ export const Tile: React.StatelessComponent<TileProps> = ({
 Tile.defaultProps = {
     padding: 'md',
     align: 'left',
+    appearance: 'shadow',
 };
 
 Tile.displayName = 'Tile';

src/stories/form.stories.tsx

@@ -6,6 +6,7 @@ import {
 import styles from '@sambego/storybook-styles';
 import { withInfo } from '@storybook/addon-info';
 import { withState } from '@dump247/storybook-state';
+import { action } from '@storybook/addon-actions';
 
 // components
 import { ImageFile } from '../components/image_upload';
@@ -25,6 +26,8 @@ import RangeSlider from '../components/range_slider';
 import ProfileIcon from '../components/icons/profile_icon';
 import Image from '../components/image';
 import StaticField from '../components/input_fields/static_field';
+import FormActions from '../components/form_actions';
+import Button from '../components/button';
 
 const stories = storiesOf('Forms', module);
 
@@ -371,7 +374,7 @@ stories.add('Upload file field', withState({ value: null })(withInfo('Upload fil
     </div>
 ))));
 
-stories.add('Static input field', withState({ })(withInfo('Static input field')(({ store }) => (
+stories.add('Static input field', withState({})(withInfo('Static input field')(({ store }) => (
     <div style={{ width: 350 }}>
         <StaticField
             id="id_12"
@@ -387,3 +390,33 @@ stories.add('Static input field', withState({ })(withInfo('Static input field')(
         </StaticField>
     </div>
 ))));
+
+const alignOptions = {
+    left: 'left',
+    right: 'right',
+    center: 'center',
+};
+const alignDefaultValue = 'right';
+
+stories.add('Form actions', withInfo(
+    'Action button container for forms',
+)(() => (
+    <div style={{ minWidth: '500px' }}>
+        <Tile>
+            <FormActions align={selectV2('Align', alignOptions, alignDefaultValue)}>
+                <Button
+                    onClickHandler={action('clicked')}
+                    appearance="primary"
+                >
+                    {text('Text 1', 'Submit')}
+                </Button>
+                <Button
+                    onClickHandler={action('clicked')}
+                    appearance="quiet"
+                >
+                    {text('Text 2', 'Cancel')}
+                </Button>
+            </FormActions>
+        </Tile>
+    </div>
+)));

src/stories/layout.stories.tsx

@@ -66,6 +66,13 @@ const breakpointOptions = {
 };
 const breakpointDefaultValue = 'sm';
 
+const tileAppearanceOptions = {
+    shadow: 'shadow',
+    dashed: 'dashed',
+    flat: 'flat',
+};
+const tileAppearanceDefaultValue = 'shadow';
+
 stories.add('Tile', withInfo(
     'A content tile that can be used as full width or as part of a grid',
 )(() => (
@@ -76,6 +83,8 @@ stories.add('Tile', withInfo(
         success={boolean('Success', false)}
         padding={selectV2('Padding', spacingOptions, spacingDefaultValue)}
         align={selectV2('Align', alignOptions, alignDefaultValue)}
+        appearance={selectV2('Appearance', tileAppearanceOptions, tileAppearanceDefaultValue)}
+        radius={text('Radius', '')}
     >
         <div>Tile</div>
         <div style={{ marginTop: '1.2rem' }}>Component</div>