mirror of
https://github.com/roleypoly/roleypoly-v1.git
synced 2025-04-25 04:09:12 +00:00
[design]: fix storyshots, update snapshots
This commit is contained in:
parent
dd6f02f4e2
commit
5b466670f3
2 changed files with 262 additions and 19 deletions
|
|
@ -1,51 +1,291 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Button Default 1`] = `
|
||||
<button
|
||||
className="sc-bdVaJa hPnBtV"
|
||||
<styled.button
|
||||
disabled={false}
|
||||
loadingPct={0}
|
||||
onClick={[Function]}
|
||||
primary={false}
|
||||
secondary={false}
|
||||
theme={
|
||||
Object {
|
||||
"actions": Object {
|
||||
"primary": "#46b646",
|
||||
"primaryText": "#efefef",
|
||||
"secondary": "#e95353",
|
||||
"secondaryText": "#efefef",
|
||||
},
|
||||
}
|
||||
}
|
||||
>
|
||||
Example
|
||||
</button>
|
||||
</styled.button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Button Disabled 1`] = `
|
||||
<button
|
||||
className="sc-bdVaJa hPnBtV"
|
||||
<styled.button
|
||||
disabled={true}
|
||||
loadingPct={0}
|
||||
onClick={[Function]}
|
||||
primary={false}
|
||||
secondary={false}
|
||||
theme={
|
||||
Object {
|
||||
"actions": Object {
|
||||
"primary": "#46b646",
|
||||
"primaryText": "#efefef",
|
||||
"secondary": "#e95353",
|
||||
"secondaryText": "#efefef",
|
||||
},
|
||||
}
|
||||
}
|
||||
>
|
||||
Example
|
||||
</button>
|
||||
</styled.button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Button Loading 1`] = `
|
||||
<button
|
||||
className="sc-bdVaJa hPnBtV"
|
||||
<styled.button
|
||||
disabled={false}
|
||||
loadingPct={0}
|
||||
onClick={[Function]}
|
||||
primary={false}
|
||||
secondary={false}
|
||||
theme={
|
||||
Object {
|
||||
"actions": Object {
|
||||
"primary": "#46b646",
|
||||
"primaryText": "#efefef",
|
||||
"secondary": "#e95353",
|
||||
"secondaryText": "#efefef",
|
||||
},
|
||||
}
|
||||
}
|
||||
>
|
||||
Example
|
||||
</button>
|
||||
</styled.button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Button Primary 1`] = `
|
||||
<button
|
||||
className="sc-bdVaJa hPnBtV"
|
||||
<Button
|
||||
disabled={false}
|
||||
onClick={[Function]}
|
||||
loading={false}
|
||||
loadingPct={0}
|
||||
onButtonPress={[Function]}
|
||||
overrides={
|
||||
Object {
|
||||
"BaseButton": Object {
|
||||
"component": Object {
|
||||
"$$typeof": Symbol(react.forward_ref),
|
||||
"attrs": Array [],
|
||||
"componentStyle": ComponentStyle {
|
||||
"componentId": "sc-bwzfXH",
|
||||
"isStatic": false,
|
||||
"rules": Array [
|
||||
"
|
||||
/* reset some styles */
|
||||
box-shadow: none;
|
||||
appearance: none;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
background-color: rgba(0,0,0,0.1);
|
||||
|
||||
/* real styles */
|
||||
position: relative;
|
||||
transition: all 0.05s ease-in-out;
|
||||
padding: 1em 1.4em;
|
||||
font-weight: bold;
|
||||
border: 1px solid rgba(0,0,0,0.1);
|
||||
|
||||
&::after {
|
||||
content: \\"\\";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
|
||||
/* transparent by default */
|
||||
background-color: transparent;
|
||||
|
||||
transition: background-color 0.05s ease-in-out;
|
||||
|
||||
/* put the overlay behind the text */
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
/* on hover, raise, brighten and shadow */
|
||||
&:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
|
||||
|
||||
&::after {
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
/* on click, lower and darken */
|
||||
&:active {
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
border-color: rgba(0,0,0,0.2);
|
||||
|
||||
transform: translateY(0);
|
||||
|
||||
&::after {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
",
|
||||
"
|
||||
background-color: ",
|
||||
[Function],
|
||||
";
|
||||
color: ",
|
||||
[Function],
|
||||
";
|
||||
",
|
||||
],
|
||||
},
|
||||
"defaultProps": Object {
|
||||
"theme": Object {
|
||||
"actions": Object {
|
||||
"primary": "#46b646",
|
||||
"primaryText": "#efefef",
|
||||
"secondary": "#e95353",
|
||||
"secondaryText": "#efefef",
|
||||
},
|
||||
},
|
||||
},
|
||||
"displayName": "Styled(styled.button)",
|
||||
"foldedComponentIds": Array [
|
||||
"sc-bdVaJa",
|
||||
],
|
||||
"render": [Function],
|
||||
"styledComponentId": "sc-bwzfXH",
|
||||
"target": "button",
|
||||
"toString": [Function],
|
||||
"warnTooManyClasses": [Function],
|
||||
"withComponent": [Function],
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
primary={false}
|
||||
secondary={false}
|
||||
>
|
||||
Example
|
||||
</button>
|
||||
</Button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Button Secondary 1`] = `
|
||||
<button
|
||||
className="sc-bdVaJa hPnBtV"
|
||||
<Button
|
||||
disabled={false}
|
||||
onClick={[Function]}
|
||||
loading={false}
|
||||
loadingPct={0}
|
||||
onButtonPress={[Function]}
|
||||
overrides={
|
||||
Object {
|
||||
"BaseButton": Object {
|
||||
"component": Object {
|
||||
"$$typeof": Symbol(react.forward_ref),
|
||||
"attrs": Array [],
|
||||
"componentStyle": ComponentStyle {
|
||||
"componentId": "sc-htpNat",
|
||||
"isStatic": false,
|
||||
"rules": Array [
|
||||
"
|
||||
/* reset some styles */
|
||||
box-shadow: none;
|
||||
appearance: none;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
background-color: rgba(0,0,0,0.1);
|
||||
|
||||
/* real styles */
|
||||
position: relative;
|
||||
transition: all 0.05s ease-in-out;
|
||||
padding: 1em 1.4em;
|
||||
font-weight: bold;
|
||||
border: 1px solid rgba(0,0,0,0.1);
|
||||
|
||||
&::after {
|
||||
content: \\"\\";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
|
||||
/* transparent by default */
|
||||
background-color: transparent;
|
||||
|
||||
transition: background-color 0.05s ease-in-out;
|
||||
|
||||
/* put the overlay behind the text */
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
/* on hover, raise, brighten and shadow */
|
||||
&:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
|
||||
|
||||
&::after {
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
/* on click, lower and darken */
|
||||
&:active {
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
border-color: rgba(0,0,0,0.2);
|
||||
|
||||
transform: translateY(0);
|
||||
|
||||
&::after {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
",
|
||||
"
|
||||
background-color: ",
|
||||
[Function],
|
||||
";
|
||||
color: ",
|
||||
[Function],
|
||||
";
|
||||
",
|
||||
],
|
||||
},
|
||||
"defaultProps": Object {
|
||||
"theme": Object {
|
||||
"actions": Object {
|
||||
"primary": "#46b646",
|
||||
"primaryText": "#efefef",
|
||||
"secondary": "#e95353",
|
||||
"secondaryText": "#efefef",
|
||||
},
|
||||
},
|
||||
},
|
||||
"displayName": "Styled(styled.button)",
|
||||
"foldedComponentIds": Array [
|
||||
"sc-bdVaJa",
|
||||
],
|
||||
"render": [Function],
|
||||
"styledComponentId": "sc-htpNat",
|
||||
"target": "button",
|
||||
"toString": [Function],
|
||||
"warnTooManyClasses": [Function],
|
||||
"withComponent": [Function],
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
primary={false}
|
||||
secondary={false}
|
||||
>
|
||||
Example
|
||||
</button>
|
||||
</Button>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -1,9 +1,12 @@
|
|||
/* jest-env jsdom */
|
||||
import * as path from 'path'
|
||||
import initStoryshots from '@storybook/addon-storyshots'
|
||||
import { shallow } from 'enzyme'
|
||||
// import Adapter from 'enzyme-adapter-react-16'
|
||||
|
||||
// enzyme.configure({ adapter: new Adapter() })
|
||||
// configure({ adapter: new Adapter() })
|
||||
|
||||
initStoryshots({
|
||||
renderer: shallow,
|
||||
configPath: path.resolve(__dirname, '../../.storybook')
|
||||
})
|
||||
})
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue