Skip to content

Commit

Permalink
Add background color option parameter (#23)
Browse files Browse the repository at this point in the history 
* getComponentAndPattern() return backgroundColor

* Matrix use backgroundColor props

* Add Box/witBackgroundColor example

* Add backgroundColor to pattern number
  • Loading branch information
@tomoya
tomoya authored May 6, 2020
1 parent 9f96f55 commit 1671eb2
Show file tree
Hide file tree
Showing 7 changed files with 323 additions and 34 deletions.
17 changes: 17 additions & 0 deletions example/src/Box/BoxWithbackgroundColor.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import * as React from 'react';
import { Box } from './Box';

export default {
title: 'Box/withBackgroundColor',
component: Box,
parameters: {
matrix: {
pattern: {
bg: ['white', 'yellow'],
},
backgroundColor: 'black',
},
},
};

export const Basic = () => <Box>TEXT</Box>;
244 changes: 224 additions & 20 deletions src/__snapshots__/index.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -343,13 +343,13 @@ Array [
</div>
</Styled(div)>
<Styled(div)
m={2}
mb={4}
overflow="hidden"
p={2}
pb={4}
width={0.6666666666666666}
>
<div
className="css-1cw6mwz"
className="css-1n7wfd6"
overflow="hidden"
width={0.6666666666666666}
>
Expand All @@ -365,13 +365,19 @@ Array [
</div>
</Styled(div)>
<Styled(div)
bg="rgba(255,255,255,0.6)"
borderBottomRightRadius={4}
borderTopLeftRadius={2}
bottom="0"
p={2}
pb={1}
pl={2}
position="absolute"
pr={2}
pt={1}
right="0"
>
<div
className="css-196zzv5"
className="css-1nrfhbr"
>
<Styled(span)
color="rgba(51, 51, 51, 0.6)"
Expand Down Expand Up @@ -507,13 +513,13 @@ Array [
</div>
</Styled(div)>
<Styled(div)
m={2}
mb={4}
overflow="hidden"
p={2}
pb={4}
width={0.6666666666666666}
>
<div
className="css-1cw6mwz"
className="css-1n7wfd6"
overflow="hidden"
width={0.6666666666666666}
>
Expand All @@ -533,13 +539,19 @@ Array [
</div>
</Styled(div)>
<Styled(div)
bg="rgba(255,255,255,0.6)"
borderBottomRightRadius={4}
borderTopLeftRadius={2}
bottom="0"
p={2}
pb={1}
pl={2}
position="absolute"
pr={2}
pt={1}
right="0"
>
<div
className="css-196zzv5"
className="css-1nrfhbr"
>
<Styled(span)
color="rgba(51, 51, 51, 0.6)"
Expand Down Expand Up @@ -675,13 +687,13 @@ Array [
</div>
</Styled(div)>
<Styled(div)
m={2}
mb={4}
overflow="hidden"
p={2}
pb={4}
width={0.6666666666666666}
>
<div
className="css-1cw6mwz"
className="css-1n7wfd6"
overflow="hidden"
width={0.6666666666666666}
>
Expand All @@ -697,13 +709,19 @@ Array [
</div>
</Styled(div)>
<Styled(div)
bg="rgba(255,255,255,0.6)"
borderBottomRightRadius={4}
borderTopLeftRadius={2}
bottom="0"
p={2}
pb={1}
pl={2}
position="absolute"
pr={2}
pt={1}
right="0"
>
<div
className="css-196zzv5"
className="css-1nrfhbr"
>
<Styled(span)
color="rgba(51, 51, 51, 0.6)"
Expand Down Expand Up @@ -839,13 +857,13 @@ Array [
</div>
</Styled(div)>
<Styled(div)
m={2}
mb={4}
overflow="hidden"
p={2}
pb={4}
width={0.6666666666666666}
>
<div
className="css-1cw6mwz"
className="css-1n7wfd6"
overflow="hidden"
width={0.6666666666666666}
>
Expand All @@ -865,13 +883,19 @@ Array [
</div>
</Styled(div)>
<Styled(div)
bg="rgba(255,255,255,0.6)"
borderBottomRightRadius={4}
borderTopLeftRadius={2}
bottom="0"
p={2}
pb={1}
pl={2}
position="absolute"
pr={2}
pt={1}
right="0"
>
<div
className="css-196zzv5"
className="css-1nrfhbr"
>
<Styled(span)
color="rgba(51, 51, 51, 0.6)"
Expand All @@ -898,3 +922,183 @@ Array [
</Component>,
]
`;

exports[`addon Matrix should render <Matrix /> with backgroundColor 1`] = `
Array [
<Styled(div)
mb={3}
>
<div
className="css-yoonho"
>
<TestComponent>
<BaseComponent
text="TEXT"
title="TITLE"
>
<div>
<h1>
TITLE
</h1>
<p>
TEXT
</p>
</div>
</BaseComponent>
</TestComponent>
</div>
</Styled(div)>,
<Component
backgroundColor="black"
component={[Function]}
originalProps={Object {}}
propsPattern={
Object {
"title": Array [
"title with background",
],
}
}
>
<Styled(div)
display="flex"
flexWrap="wrap"
justifyContent="space-around"
>
<div
className="css-bedbvn"
display="flex"
>
<Styled(div)
backgroundColor="black"
borderRadius={4}
boxShadow="rgba(0, 0, 0, 0.1) 0px 1px 3px 1px, rgba(0, 0, 0, 0.067) 0px 0px 0px 1px"
display="flex"
key="%7B%22title%22%3A%22title%20with%20background%22%7D"
mb={3}
position="relative"
width={0.3}
>
<div
className="css-1m3w2x9"
display="flex"
width={0.3}
>
<Styled(div)
bg="rgb(246, 249, 252)"
p={2}
width={0.3333333333333333}
>
<div
className="css-15pd0l3"
width={0.3333333333333333}
>
<Styled(div)
key="title"
>
<div
className="css-1qi6ewn"
>
<Styled(div)
mb={2}
>
<div
className="css-ow3zxq"
>
<Styled(span)
color="rgba(51, 51, 51, 0.75)"
fontFamily="\\"Nunito Sans\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif"
fontWeight="bold"
>
<span
className="css-19noksk"
color="rgba(51, 51, 51, 0.75)"
fontFamily="\\"Nunito Sans\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif"
fontWeight="bold"
>
title
</span>
</Styled(span)>
:
<Styled(span)
color="rgba(51, 51, 51, 0.75)"
fontFamily="\\"Nunito Sans\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif"
>
<span
className="css-8v37fk"
color="rgba(51, 51, 51, 0.75)"
fontFamily="\\"Nunito Sans\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif"
>
title with background
</span>
</Styled(span)>
</div>
</Styled(div)>
</div>
</Styled(div)>
</div>
</Styled(div)>
<Styled(div)
overflow="hidden"
p={2}
pb={4}
width={0.6666666666666666}
>
<div
className="css-1n7wfd6"
overflow="hidden"
width={0.6666666666666666}
>
<BaseComponent
title="title with background"
>
<div>
<h1>
title with background
</h1>
<p />
</div>
</BaseComponent>
</div>
</Styled(div)>
<Styled(div)
bg="rgba(255,255,255,0.6)"
borderBottomRightRadius={4}
borderTopLeftRadius={2}
bottom="0"
pb={1}
pl={2}
position="absolute"
pr={2}
pt={1}
right="0"
>
<div
className="css-1nrfhbr"
>
<Styled(span)
color="rgba(51, 51, 51, 0.6)"
fontFamily="\\"Nunito Sans\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif"
fontSize={1}
>
<span
className="css-g3n3x7"
color="rgba(51, 51, 51, 0.6)"
fontFamily="\\"Nunito Sans\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif"
fontSize={1}
>
1
/
1
</span>
</Styled(span)>
</div>
</Styled(div)>
</div>
</Styled(div)>
</div>
</Styled(div)>
</Component>,
]
`;
Loading

1 comment on commit 1671eb2

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Deploy preview for website ready!

Built with commit 1671eb2

https://https://storybook-addon-matrix-apxgekrzi.now.sh

Please sign in to comment.