From 6a18c2d1b6eb17926ba52b7127f77fae75bd738f Mon Sep 17 00:00:00 2001 From: Dusan Tuzinsky Date: Fri, 3 May 2019 17:06:41 +0200 Subject: [PATCH 1/2] add previewGrid property to Preview --- .../src/components/Preview/Preview.docs.mdx | 6 ++++ .../src/components/Preview/Preview.js | 36 +++++++++++++++++-- .../src/components/Preview/index.js | 1 - .../src/components/Preview/style.js | 23 ------------ 4 files changed, 39 insertions(+), 27 deletions(-) delete mode 100644 packages/styleguide/src/components/Preview/style.js diff --git a/packages/styleguide/src/components/Preview/Preview.docs.mdx b/packages/styleguide/src/components/Preview/Preview.docs.mdx index 9b58a85a750..039f9bd9eb0 100644 --- a/packages/styleguide/src/components/Preview/Preview.docs.mdx +++ b/packages/styleguide/src/components/Preview/Preview.docs.mdx @@ -108,6 +108,12 @@ is used to generate JSX in code example. To overide options of this library, use This is HTML string +### Preview Grid + +}> + To preview a Grid component inside preview use `previewGrid` property + + ### Preview interactiveProps `interactiveProps` are used as a pipe for sending special props to Interactive elements renderer. diff --git a/packages/styleguide/src/components/Preview/Preview.js b/packages/styleguide/src/components/Preview/Preview.js index 2e619f6c1a2..3e9e8f0d7f3 100644 --- a/packages/styleguide/src/components/Preview/Preview.js +++ b/packages/styleguide/src/components/Preview/Preview.js @@ -64,6 +64,8 @@ class Preview extends Component { isInteractive: bool, /** Props for interactive component */ interactiveProps: object, + /** Visual grid preview */ + previewGrid: bool, }; static defaultProps = { @@ -147,12 +149,19 @@ class Preview extends Component { isInteractive, interactiveProps, html, + previewGrid, ...other } = this.props; const { previewBackground } = this.state; - const classes = cx(CLASS_ROOT, className); + const classes = cx( + CLASS_ROOT, + { + 'preview-grid': previewGrid, + }, + className + ); const colourStyles = { option: (styles, { data, isActive }) => { @@ -247,7 +256,7 @@ class Preview extends Component { return [ , - )} - , + , ]; } } export default Preview; +const StyledCard = styled(Card)` + &.preview-grid { + .grid { + position: relative; + z-index: 0; + padding: 0.5em 0; + background-color: rgba(0, 0, 0, 0.08); + border: 1px solid rgba(0, 0, 0, 0.15); + } + .bar__item, + .grid__col, + *[class*='grid__col\-\-'] { + position: relative; + min-height: 1em; + line-height: 1.5; + background-color: rgba(0, 0, 0, 0.1); + background-clip: content-box; + } + } +`; + const StyledPreviewLive = styled.div` transition: all 200ms ease-in-out; `; diff --git a/packages/styleguide/src/components/Preview/index.js b/packages/styleguide/src/components/Preview/index.js index 5830f551b27..cc201cf45ec 100644 --- a/packages/styleguide/src/components/Preview/index.js +++ b/packages/styleguide/src/components/Preview/index.js @@ -1,5 +1,4 @@ import React from 'react'; -import './style'; import { ThemeConsumer } from 'styled-components'; diff --git a/packages/styleguide/src/components/Preview/style.js b/packages/styleguide/src/components/Preview/style.js deleted file mode 100644 index 40d72e7ad6d..00000000000 --- a/packages/styleguide/src/components/Preview/style.js +++ /dev/null @@ -1,23 +0,0 @@ -import { createGlobalStyle } from 'styled-components'; - -/* eslint-disable */ -createGlobalStyle` - .preview-grid { - .grid { - position: relative; - z-index: 0; - padding: .5em 0; - background-color: rgba(0,0,0,0.08); - border: 1px solid rgba(0,0,0,0.15); - } - .grid__col, - *[class*='grid__col\-\-'] { - position: relative; - min-height: 1em; - line-height: 1.5; - background-color: rgba(0,0,0,0.1); - background-clip: content-box; - } - } -`; -/* eslint-enable */ From 105c2c3d012a697f3bdc4406b14121c8af247ebb Mon Sep 17 00:00:00 2001 From: Juraj Kiss Date: Thu, 20 Jun 2019 14:17:36 +0200 Subject: [PATCH 2/2] rename previewGrid to hasLayoutPreview, add styles for bar --- .../src/components/Preview/Preview.docs.mdx | 12 ++++++++---- .../styleguide/src/components/Preview/Preview.js | 11 ++++++----- 2 files changed, 14 insertions(+), 9 deletions(-) diff --git a/packages/styleguide/src/components/Preview/Preview.docs.mdx b/packages/styleguide/src/components/Preview/Preview.docs.mdx index 039f9bd9eb0..52befb8d130 100644 --- a/packages/styleguide/src/components/Preview/Preview.docs.mdx +++ b/packages/styleguide/src/components/Preview/Preview.docs.mdx @@ -1,5 +1,5 @@ import { md } from './../../utils/'; -import { Preview, ComponentDocs, CodeJSX } from './../'; +import { Preview, ComponentDocs, CodeJSX, Code } from './../'; import PreviewForDocs from './Preview'; import InteractForDOcs from './Interact'; import { Bar, BarItem } from './../Bar'; @@ -108,10 +108,14 @@ is used to generate JSX in code example. To overide options of this library, use This is HTML string -### Preview Grid +### Preview Layout -}> - To preview a Grid component inside preview use `previewGrid` property +}> +

Preview a layout component behaviour by apllying special styles.

+

Lighter Styleguide supports .grid and .bar, other layout components should by styled manually in your app.

+
+
+
### Preview interactiveProps diff --git a/packages/styleguide/src/components/Preview/Preview.js b/packages/styleguide/src/components/Preview/Preview.js index 3e9e8f0d7f3..34b31157868 100644 --- a/packages/styleguide/src/components/Preview/Preview.js +++ b/packages/styleguide/src/components/Preview/Preview.js @@ -65,7 +65,7 @@ class Preview extends Component { /** Props for interactive component */ interactiveProps: object, /** Visual grid preview */ - previewGrid: bool, + hasLayoutPreview: bool, }; static defaultProps = { @@ -149,7 +149,7 @@ class Preview extends Component { isInteractive, interactiveProps, html, - previewGrid, + hasLayoutPreview, ...other } = this.props; @@ -158,7 +158,7 @@ class Preview extends Component { const classes = cx( CLASS_ROOT, { - 'preview-grid': previewGrid, + 'layout-preview': hasLayoutPreview, }, className ); @@ -287,8 +287,9 @@ class Preview extends Component { export default Preview; const StyledCard = styled(Card)` - &.preview-grid { - .grid { + &.layout-preview { + .grid, + .bar { position: relative; z-index: 0; padding: 0.5em 0;