- +
- + Close
+ + + Cancel + + + Delete + + +
@@ -65,12 +76,23 @@ const SpacedGroups = () => ( Cancel - + Continue
diff --git a/package.json b/package.json index 91421de2e..508932091 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "roe", - "version": "0.6.1", + "version": "0.7.0", "description": "A Collection of React Components for Project Development", "main": "dist/js/index.js", "types": "dist/js/index.d.ts", diff --git a/src/less/spaced-group.less b/src/less/spaced-group.less index 070c924e1..1426f8090 100644 --- a/src/less/spaced-group.less +++ b/src/less/spaced-group.less @@ -1,8 +1,30 @@ -.spaced-group > * { // lesshint universalSelector: false - display: inline-block; - margin-right: @margin-base; +.spaced-group { + & > * { // lesshint universalSelector: false + display: inline-block; + margin-right: @margin-base; - &:last-child { - margin-right: 0; + &:last-child { + margin-right: 0; + } + } + + &.block { + display: block; + } + + &.small > * { // lesshint universalSelector: false + margin-right: @margin-small; + + &:last-child { + margin-right: 0; + } + } + + &.large > * { // lesshint universalSelector: false + margin-right: @margin-large; + + &:last-child { + margin-right: 0; + } } } diff --git a/src/ts/button.tsx b/src/ts/button.tsx index 0b5aea056..6438038b2 100644 --- a/src/ts/button.tsx +++ b/src/ts/button.tsx @@ -5,7 +5,6 @@ export interface IProps { block?: boolean; large?: boolean; small?: boolean; - type?: string; } export const Button: React.SFC> = (props) => { @@ -15,7 +14,6 @@ export const Button: React.SFC> = (p block, large, small, - type, ...remainingProps } = props; @@ -24,7 +22,6 @@ export const Button: React.SFC> = (p block ? 'block' : null, small ? 'small' : null, large ? 'large' : null, - type, className ]; diff --git a/src/ts/dab-ipsum.tsx b/src/ts/dab-ipsum.tsx index f335d01a5..262d56d29 100644 --- a/src/ts/dab-ipsum.tsx +++ b/src/ts/dab-ipsum.tsx @@ -2,11 +2,11 @@ import * as randomSeed from 'random-seed'; import * as React from 'react'; export interface IIpsumProps { - type: 'li' | 'p' | 'text'; + component: 'li' | 'p' | 'text'; } export interface IDabIpsumProps { - type?: 'ul' | 'ol' | 'p' | 'text'; + component?: 'ul' | 'ol' | 'p' | 'text'; count?: number; } @@ -87,10 +87,10 @@ export const generateIpsum = () => { } export const Ipsum: React.SFC = (props) => { - const { type } = props; + const { component } = props; const ipsum = generateIpsum(); - switch (type) { + switch (component) { case 'li': return ( @@ -115,23 +115,21 @@ export const Ipsum: React.SFC = (props) => { export class DabIpsum extends React.Component { public shouldComponentUpdate (prevProps: IDabIpsumProps) { - return prevProps.type !== this.props.type || + return prevProps.component !== this.props.component || prevProps.count !== this.props.count; } public render () { const { - type = 'p', + component = 'p', count = 5 } = this.props; - const component = type === 'p' ? type : 'li'; - const items = Array.apply(null, new Array(count)).map((v: void, index: number) => ( - + )); - switch (type) { + switch (component) { case 'ul': return ( @@ -146,7 +144,7 @@ export class DabIpsum extends React.Component { ); case 'text': return ( - + ); // case 'p': NOTE: this is the default, so a case for it is not needed default: diff --git a/src/ts/spaced-group.tsx b/src/ts/spaced-group.tsx index 2873cc53a..d7299ac9e 100644 --- a/src/ts/spaced-group.tsx +++ b/src/ts/spaced-group.tsx @@ -1,11 +1,32 @@ import * as classNames from 'classnames'; import * as React from 'react'; -export const SpacedGroup: React.SFC> = (props) => { - const { children, className, ...remainingProps } = props; +export interface IProps { + block?: boolean; + small?: boolean; + large?: boolean; +} + +export const SpacedGroup: React.SFC> = (props) => { + const { + children, + className, + block, + small, + large, + ...remainingProps + } = props; + + const myClassNames = [ + 'spaced-group', + block ? 'block' : null, + small ? 'small' : null, + large ? 'large' : null, + className + ] return ( - + {children} ); diff --git a/tests/__snapshots__/button.tsx.snap b/tests/__snapshots__/button.tsx.snap index 1efe6d79b..d4f0fce0f 100644 --- a/tests/__snapshots__/button.tsx.snap +++ b/tests/__snapshots__/button.tsx.snap @@ -18,20 +18,21 @@ exports[`Button should take an optional small prop 1`] = ` /> `; -exports[`Button should take regular element attributes 1`] = ` +exports[`Button should take multiple class names 1`] = ` `; -exports[`Button should use a block prop (boolean) as a class name 1`] = ` +exports[`Button should take regular element attributes 1`] = ` `; -exports[`Button should use a type prop as a class name 1`] = ` +exports[`Button should use a block prop (boolean) as a class name 1`] = ` `; diff --git a/tests/__snapshots__/spaced-group.tsx.snap b/tests/__snapshots__/spaced-group.tsx.snap index 00e00877a..feda67e11 100644 --- a/tests/__snapshots__/spaced-group.tsx.snap +++ b/tests/__snapshots__/spaced-group.tsx.snap @@ -6,8 +6,26 @@ exports[`SpacedGroup should match snapshot 1`] = ` /> `; +exports[`SpacedGroup should take an optional large prop 1`] = ` + +`; + +exports[`SpacedGroup should take an optional small prop 1`] = ` + +`; + exports[`SpacedGroup should take regular element attributes 1`] = ` `; + +exports[`SpacedGroup should use a block prop (boolean) as a class name 1`] = ` + +`; diff --git a/tests/button.tsx b/tests/button.tsx index 1e18ead63..76ea5b95b 100644 --- a/tests/button.tsx +++ b/tests/button.tsx @@ -29,25 +29,25 @@ describe('Button', () => { expect(tree).toMatchSnapshot(); }); - it('should take regular element attributes', () => { + it('should use a block prop (boolean) as a class name', () => { const tree = renderer.create( - + ); expect(tree).toMatchSnapshot(); }); - it('should use a type prop as a class name', () => { + it('should take regular element attributes', () => { const tree = renderer.create( - + ); expect(tree).toMatchSnapshot(); }); - it('should use a block prop (boolean) as a class name', () => { + it('should take multiple class names', () => { const tree = renderer.create( - + ); expect(tree).toMatchSnapshot(); diff --git a/tests/dab-ipsum.tsx b/tests/dab-ipsum.tsx index e05032234..ac57a6445 100644 --- a/tests/dab-ipsum.tsx +++ b/tests/dab-ipsum.tsx @@ -28,7 +28,7 @@ describe('DabIpsum', () => { it('should allow rendering an unordered list', () => { const tree = renderer.create( - + ); expect(tree).toMatchSnapshot(); @@ -36,7 +36,7 @@ describe('DabIpsum', () => { it('should allow rendering an ordered list', () => { const tree = renderer.create( - + ); expect(tree).toMatchSnapshot(); @@ -44,7 +44,7 @@ describe('DabIpsum', () => { it('should allow rendering plain text (in a span)', () => { const tree = renderer.create( - + ); expect(tree).toMatchSnapshot(); @@ -57,11 +57,11 @@ describe('DabIpsum', () => { }); it('should only update if type or count changed', () => { - const instance = new DabIpsum({type: 'text', count: 1}); + const instance = new DabIpsum({component: 'text', count: 1}); - expect(instance.shouldComponentUpdate({type: 'text', count: 1})).toBe(false); - expect(instance.shouldComponentUpdate({type: 'p', count: 1})).toBe(true); - expect(instance.shouldComponentUpdate({type: 'text', count: 2})).toBe(true); + expect(instance.shouldComponentUpdate({component: 'text', count: 1})).toBe(false); + expect(instance.shouldComponentUpdate({component: 'p', count: 1})).toBe(true); + expect(instance.shouldComponentUpdate({component: 'text', count: 2})).toBe(true); }); }); diff --git a/tests/spaced-group.tsx b/tests/spaced-group.tsx index bd8503e44..7aecb1c4a 100644 --- a/tests/spaced-group.tsx +++ b/tests/spaced-group.tsx @@ -13,6 +13,30 @@ describe('SpacedGroup', () => { expect(tree).toMatchSnapshot(); }); + it('should take an optional large prop', () => { + const tree = renderer.create( + + ); + + expect(tree).toMatchSnapshot(); + }); + + it('should take an optional small prop', () => { + const tree = renderer.create( + + ); + + expect(tree).toMatchSnapshot(); + }); + + it('should use a block prop (boolean) as a class name', () => { + const tree = renderer.create( + + ); + + expect(tree).toMatchSnapshot(); + }); + it('should take regular element attributes', () => { const tree = renderer.create(