From 17f48d65eda35ee2700991a685a646908c3935d4 Mon Sep 17 00:00:00 2001 From: Jake 'Sid' Smith Date: Mon, 5 Jun 2017 18:03:33 +0100 Subject: [PATCH 01/12] Create spaced group component --- src/ts/index.ts | 1 + src/ts/spaced-group.tsx | 12 ++++++++++++ 2 files changed, 13 insertions(+) create mode 100644 src/ts/spaced-group.tsx diff --git a/src/ts/index.ts b/src/ts/index.ts index 4c42d7b89..3eda7b05d 100644 --- a/src/ts/index.ts +++ b/src/ts/index.ts @@ -11,6 +11,7 @@ export { InputGroupAddon } from './input-group-addon'; export * from './modals'; export { Row } from './row'; export { Section } from './section'; +export { SpacedGroup } from './spaced-group'; export * from './tabs'; export * from './tables'; export { Well } from './well'; diff --git a/src/ts/spaced-group.tsx b/src/ts/spaced-group.tsx new file mode 100644 index 000000000..c34325c1d --- /dev/null +++ b/src/ts/spaced-group.tsx @@ -0,0 +1,12 @@ +import * as classNames from 'classnames'; +import * as React from 'react'; + +export const SpacedGroup: React.SFC> = (props) => { + const { children, className, ...remainingProps } = props; + + return ( +
+ {children} +
+ ); +}; From 1f32a16368ab2a5002ccc4227686f4e826c9a851 Mon Sep 17 00:00:00 2001 From: Jake 'Sid' Smith Date: Mon, 5 Jun 2017 18:03:42 +0100 Subject: [PATCH 02/12] Spaced group styles --- src/less/spaced-group.less | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 src/less/spaced-group.less diff --git a/src/less/spaced-group.less b/src/less/spaced-group.less new file mode 100644 index 000000000..62069de5c --- /dev/null +++ b/src/less/spaced-group.less @@ -0,0 +1,8 @@ +.spaced-group > * { + display: inline-block; + margin-right: @margin-base; + + &:last-child { + margin-right: 0; + } +} From 3fb846adb718e6f25cfb7d17fafdf224b8363a06 Mon Sep 17 00:00:00 2001 From: Jake 'Sid' Smith Date: Mon, 5 Jun 2017 18:03:56 +0100 Subject: [PATCH 03/12] Import styles --- src/less/index.less | 1 + 1 file changed, 1 insertion(+) diff --git a/src/less/index.less b/src/less/index.less index 9c54228b1..0e3e226d2 100644 --- a/src/less/index.less +++ b/src/less/index.less @@ -13,6 +13,7 @@ @import 'content-box.less'; @import 'modals.less'; @import 'tabs.less'; +@import 'spaced-group'; // NOTE: float, hide & spacing should remaing after other imports @import 'float.less'; @import 'hide.less'; From 21d3edc5b28617502bee4f36493aca061dfb450b Mon Sep 17 00:00:00 2001 From: Jake 'Sid' Smith Date: Mon, 5 Jun 2017 18:04:03 +0100 Subject: [PATCH 04/12] Remove spaced button styles --- src/less/buttons.less | 8 -------- 1 file changed, 8 deletions(-) diff --git a/src/less/buttons.less b/src/less/buttons.less index db76a1026..e49b4fe61 100644 --- a/src/less/buttons.less +++ b/src/less/buttons.less @@ -60,14 +60,6 @@ } } - &:not(.block) { - margin-right: @margin-base; - - &:last-child { - margin-right: 0; - } - } - &.block + .button.block { margin-top: @margin-base; } From b0bb31b6eafdfb2f834e24610751e0d0a5d371eb Mon Sep 17 00:00:00 2001 From: Jake 'Sid' Smith Date: Mon, 5 Jun 2017 18:04:09 +0100 Subject: [PATCH 05/12] Update buttons demo --- docs/src/ts/buttons.tsx | 27 ++++++++++++++------------- 1 file changed, 14 insertions(+), 13 deletions(-) diff --git a/docs/src/ts/buttons.tsx b/docs/src/ts/buttons.tsx index fe050871d..8287c317c 100644 --- a/docs/src/ts/buttons.tsx +++ b/docs/src/ts/buttons.tsx @@ -5,7 +5,8 @@ import { CodeBlock, Column, Row, - Section + Section, + SpacedGroup } from '../../../src/ts'; const Buttons = () => ( @@ -22,7 +23,7 @@ const Buttons = () => (

Demo

-

+ @@ -50,7 +51,7 @@ const Buttons = () => ( -

+

-

+ Link as button @@ -83,13 +84,13 @@ const Buttons = () => ( Link as error button -

+ -

+ -

+ @@ -99,7 +100,7 @@ const Buttons = () => ( {` -

+ @@ -127,7 +128,7 @@ const Buttons = () => ( -

+

-

+ Link as button @@ -160,13 +161,13 @@ const Buttons = () => ( Link as error button -

+ -

+ -

+ `} From f32108a15f89fa9f7d804837fff4a6f3d11cc1f7 Mon Sep 17 00:00:00 2001 From: Jake 'Sid' Smith Date: Mon, 5 Jun 2017 18:16:43 +0100 Subject: [PATCH 06/12] Less linting --- src/less/index.less | 2 +- src/less/spaced-group.less | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/less/index.less b/src/less/index.less index 0e3e226d2..1779826c9 100644 --- a/src/less/index.less +++ b/src/less/index.less @@ -13,7 +13,7 @@ @import 'content-box.less'; @import 'modals.less'; @import 'tabs.less'; -@import 'spaced-group'; +@import 'spaced-group.less'; // NOTE: float, hide & spacing should remaing after other imports @import 'float.less'; @import 'hide.less'; diff --git a/src/less/spaced-group.less b/src/less/spaced-group.less index 62069de5c..070c924e1 100644 --- a/src/less/spaced-group.less +++ b/src/less/spaced-group.less @@ -1,4 +1,4 @@ -.spaced-group > * { +.spaced-group > * { // lesshint universalSelector: false display: inline-block; margin-right: @margin-base; From fae44aad4246ea4a30c840a11ec2f11e28e31445 Mon Sep 17 00:00:00 2001 From: Jake 'Sid' Smith Date: Mon, 5 Jun 2017 18:16:49 +0100 Subject: [PATCH 07/12] Spaced group tests --- tests/__snapshots__/spaced-group.tsx.snap | 13 ++++++++++++ tests/spaced-group.tsx | 24 +++++++++++++++++++++++ 2 files changed, 37 insertions(+) create mode 100644 tests/__snapshots__/spaced-group.tsx.snap create mode 100644 tests/spaced-group.tsx diff --git a/tests/__snapshots__/spaced-group.tsx.snap b/tests/__snapshots__/spaced-group.tsx.snap new file mode 100644 index 000000000..e9e9600ca --- /dev/null +++ b/tests/__snapshots__/spaced-group.tsx.snap @@ -0,0 +1,13 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`SpacedGroup should match snapshot 1`] = ` +
+`; + +exports[`SpacedGroup should take regular element attributes 1`] = ` +
+`; diff --git a/tests/spaced-group.tsx b/tests/spaced-group.tsx new file mode 100644 index 000000000..bd8503e44 --- /dev/null +++ b/tests/spaced-group.tsx @@ -0,0 +1,24 @@ +import * as React from 'react'; +import * as renderer from 'react-test-renderer'; + +import { SpacedGroup } from '../src/ts/'; + +describe('SpacedGroup', () => { + + it('should match snapshot', () => { + const tree = renderer.create( + + ); + + expect(tree).toMatchSnapshot(); + }); + + it('should take regular element attributes', () => { + const tree = renderer.create( + + ); + + expect(tree).toMatchSnapshot(); + }); + +}); From 189a1ab3389a7e4843d791d4449b55885411cb61 Mon Sep 17 00:00:00 2001 From: Jake 'Sid' Smith Date: Mon, 5 Jun 2017 18:25:40 +0100 Subject: [PATCH 08/12] Document spaced groups --- docs/src/ts/index.tsx | 6 ++- docs/src/ts/spaced-groups.tsx | 88 +++++++++++++++++++++++++++++++++++ 2 files changed, 92 insertions(+), 2 deletions(-) create mode 100644 docs/src/ts/spaced-groups.tsx diff --git a/docs/src/ts/index.tsx b/docs/src/ts/index.tsx index ea5d73cff..944db6617 100644 --- a/docs/src/ts/index.tsx +++ b/docs/src/ts/index.tsx @@ -26,6 +26,7 @@ import Inputs from './inputs'; import Ipsum from './ipsum'; import Modals from './modals'; import Sections from './sections'; +import SpacedGroups from './spaced-groups'; import Tables from './tables'; import TabDemo from './tabs'; import Wells from './wells'; @@ -60,12 +61,13 @@ class App extends React.Component<{}, void> { + - - + + diff --git a/docs/src/ts/spaced-groups.tsx b/docs/src/ts/spaced-groups.tsx new file mode 100644 index 000000000..fc78e6b59 --- /dev/null +++ b/docs/src/ts/spaced-groups.tsx @@ -0,0 +1,88 @@ +import * as React from 'react'; + +import { + Button, + CodeBlock, + Column, + Row, + Section, + SpacedGroup +} from '../../../src/ts'; + +const SpacedGroups = () => ( +
+ + +

+ Spaced Groups +

+ + + + +

+ Demo +

+

+ + + + +

+

+ + + Link 1 + + + Link 2 + + + Link 3 + + +

+ + + + +

+ Code +

+ + {` +

+ + + + +

+

+ + + Link 1 + + + Link 2 + + + Link 3 + + +

+ `} + + + +
+); + +export default SpacedGroups; From a68f521bad779f8b820e6f38a6510978081f7f7b Mon Sep 17 00:00:00 2001 From: Jake 'Sid' Smith Date: Mon, 5 Jun 2017 18:27:32 +0100 Subject: [PATCH 09/12] Increment patch number --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 0338dd9c8..188843b51 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "roe", - "version": "0.4.7", + "version": "0.4.8", "description": "A Collection of React Components for Project Development", "main": "dist/js/index.js", "types": "dist/js/index.d.ts", From 95b6bb2272ff8095ab58dfa64668c98ea95b3594 Mon Sep 17 00:00:00 2001 From: Jake 'Sid' Smith Date: Mon, 5 Jun 2017 21:58:13 +0100 Subject: [PATCH 10/12] Fix invalid DOM nesting --- docs/src/ts/spaced-groups.tsx | 87 +++++++++++++++++------------------ 1 file changed, 41 insertions(+), 46 deletions(-) diff --git a/docs/src/ts/spaced-groups.tsx b/docs/src/ts/spaced-groups.tsx index fc78e6b59..bfd29f00f 100644 --- a/docs/src/ts/spaced-groups.tsx +++ b/docs/src/ts/spaced-groups.tsx @@ -23,29 +23,27 @@ const SpacedGroups = () => (

Demo

-

- - - - -

-

- - - Link 1 - - - Link 2 - - - Link 3 - - -

+ + + + + + + + + Link 1 + + + Link 2 + + + Link 3 + + @@ -55,29 +53,26 @@ const SpacedGroups = () => ( {` -

- - - - -

-

- - - Link 1 - - - Link 2 - - - Link 3 - - -

+ + + + + + + + Link 1 + + + Link 2 + + + Link 3 + + `} From 05e1acdf9d57eb24462e813ae24a6e7a3a783d3b Mon Sep 17 00:00:00 2001 From: Jake 'Sid' Smith Date: Mon, 5 Jun 2017 22:01:37 +0100 Subject: [PATCH 11/12] Change spaced group to span --- docs/src/ts/buttons.tsx | 192 ++++++++++++++++++---------------- docs/src/ts/spaced-groups.tsx | 84 ++++++++------- src/ts/spaced-group.tsx | 6 +- 3 files changed, 151 insertions(+), 131 deletions(-) diff --git a/docs/src/ts/buttons.tsx b/docs/src/ts/buttons.tsx index 8287c317c..3dec6a1a9 100644 --- a/docs/src/ts/buttons.tsx +++ b/docs/src/ts/buttons.tsx @@ -23,35 +23,37 @@ const Buttons = () => (

Demo

- - - - - - - - - - - +

+ + + + + + + + + + + +

- - - Link as button - - - Link as primary button - - - Link as error button - - +

+ + + Link as button + + + Link as primary button + + + Link as error button + + +

- - - - - +

+ + + + + +

@@ -100,35 +106,37 @@ const Buttons = () => ( {` - - - - - - - - - - - +

+ + + + + + + + + + + +

- - - Link as button - - - Link as primary button - - - Link as error button - - +

+ + + Link as button + + + Link as primary button + + + Link as error button + + +

- - - - - +

+ + + + + +

`} diff --git a/docs/src/ts/spaced-groups.tsx b/docs/src/ts/spaced-groups.tsx index bfd29f00f..6f583d282 100644 --- a/docs/src/ts/spaced-groups.tsx +++ b/docs/src/ts/spaced-groups.tsx @@ -24,26 +24,30 @@ const SpacedGroups = () => ( Demo - - - - +

+ + + + +

- - - Link 1 - - - Link 2 - - - Link 3 - - +

+ + + Link 1 + + + Link 2 + + + Link 3 + + +

@@ -53,26 +57,30 @@ const SpacedGroups = () => ( {` - - - - +

+ + + + +

- - - Link 1 - - - Link 2 - - - Link 3 - - +

+ + + Link 1 + + + Link 2 + + + Link 3 + + +

`} diff --git a/src/ts/spaced-group.tsx b/src/ts/spaced-group.tsx index c34325c1d..2873cc53a 100644 --- a/src/ts/spaced-group.tsx +++ b/src/ts/spaced-group.tsx @@ -1,12 +1,12 @@ import * as classNames from 'classnames'; import * as React from 'react'; -export const SpacedGroup: React.SFC> = (props) => { +export const SpacedGroup: React.SFC> = (props) => { const { children, className, ...remainingProps } = props; return ( -
+ {children} -
+ ); }; From 021eaf77136dd7b9e0d6772dad2d71eb8e1f8f0a Mon Sep 17 00:00:00 2001 From: Jake 'Sid' Smith Date: Mon, 5 Jun 2017 22:02:46 +0100 Subject: [PATCH 12/12] Update snapshot --- tests/__snapshots__/spaced-group.tsx.snap | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/tests/__snapshots__/spaced-group.tsx.snap b/tests/__snapshots__/spaced-group.tsx.snap index e9e9600ca..00e00877a 100644 --- a/tests/__snapshots__/spaced-group.tsx.snap +++ b/tests/__snapshots__/spaced-group.tsx.snap @@ -1,13 +1,13 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`SpacedGroup should match snapshot 1`] = ` -
`; exports[`SpacedGroup should take regular element attributes 1`] = ` -
`;