Preview components in specific pseudo-state like :hover, :focused, :active.
npm install @component-driven/with-selectorAllows previewing a wrapped component in a specific pseudo-state like hover, focused, active.
Please note, that it required the pseudo-styles to be present on your component. Doesn't work with default HTML elements without pseudo-styles overrides.
``jsx
import styled from 'styled-components'
const Button = styled('button')
padding: 10px;
margin-right: 5px;
border: 2px solid blue;
border-radius: 4px;
background: #efefef;
&:hover:enabled {
background: #ccc;
border-color: red;
}
&:focus {
outline: none;
border-color: orange;
}
&:active {
border-color: #333;
background: #888;
color: #fff;
&:not([aria-disabled='true']) {
background: cadetblue;
border-color: darkblue;
color: #f5f5f5;
}
}
&.custom-class {
background: green;
}
;<>
}>
>
`
`jsx
import styled from 'styled-components'
const InputWrapper = styled('div')({
padding: 4,
border: '1px solid #ccc',
borderRadius: 3,
background: '#efefef',
'& > input': {
border: '1px solid green'
},
'> button': {
position: 'relative',
appearance: 'none',
'::after': {
position: 'absolute',
right: 0,
top: 0,
background: 'pink',
content: "''"
}
},
':focus-within': {
background: '#ccc',
input: {
outline: 'none',
borderColor: 'red'
},
button: {
marginLeft: 10,
borderColor: 'yellow',
'::after': {
content: "'focus'"
}
}
}
})
const Input = React.forwardRef((props, ref) => (
))
;<>
>
``