Skip to content

Commit

Permalink
feat(website): add theming guide
Browse files Browse the repository at this point in the history
  • Loading branch information
@plouc
plouc committed Jun 28, 2020
1 parent 9a5b1e4 commit 975503a
Show file tree
Hide file tree
Showing 8 changed files with 430 additions and 180 deletions.
13 changes: 5 additions & 8 deletions website/src/components/components/ComponentSettings.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,30 +15,27 @@ import media from '../../theming/mediaQueries'
const Container = styled.div`
background: ${({ theme }) => theme.colors.cardBackground};
color: ${({ theme }) => theme.colors.text};
// border-top: 1px solid ${({ theme }) => theme.colors.border};
`

const Group = styled.div`
// border-top: 1px solid ${({ theme }) => theme.colors.border};
&:first-child {
border-top-width: 0;
}
`

const Title = styled.div`
// border-bottom: 1px solid ${({ theme }) => theme.colors.border};
padding: 16px 30px;
font-weight: 700;
text-transform: uppercase;
font-size: 13px;
line-height: 1em;
// color: ${({ theme }) => theme.colors.cardBackground};
color: white;
background: ${({ theme }) => theme.colors.accent};
background-image: linear-gradient(-90deg, ${({ theme }) => theme.colors.gradientColor0}, ${({
theme,
}) => theme.colors.gradientColor1});
background-image: linear-gradient(
-90deg,
${({ theme }) => theme.colors.gradientColor0},
${({ theme }) => theme.colors.gradientColor1}
);
background-size: 200% 100%;
background-repeat: no-repeat;
background-position: top left;
Expand Down
5 changes: 3 additions & 2 deletions website/src/components/controls/ColorPickerControl.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ class ColorPickerControl extends Component {
}

render() {
const { id, property, flavors, currentFlavor, value } = this.props
const { id, property, flavors, currentFlavor, value, context } = this.props

return (
<Control
Expand All @@ -28,7 +28,7 @@ class ColorPickerControl extends Component {
currentFlavor={currentFlavor}
supportedFlavors={property.flavors}
>
<PropertyHeader id={id} {...property} />
<PropertyHeader id={id} {...property} context={context} />
<div>
<input type="color" id={id} onChange={this.handleChange} value={value} />
&nbsp;&nbsp;&nbsp;
Expand All @@ -47,6 +47,7 @@ ColorPickerControl.propTypes = {
currentFlavor: PropTypes.oneOf(['svg', 'html', 'canvas', 'api']).isRequired,
value: PropTypes.string.isRequired,
onChange: PropTypes.func.isRequired,
context: PropTypes.object,
}

export default ColorPickerControl
29 changes: 27 additions & 2 deletions website/src/components/controls/ControlsGroup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export const shouldRenderProperty = (property, currentSettings) => {
}

const ControlSwitcher = memo(
({ groupName, flavors, currentFlavor, property, settings, onChange }) => {
({ groupName, flavors, currentFlavor, property, settings, onChange, context }) => {
// generate a unique identifier for the property
const id = `${snakeCase(groupName)}-${property.name}`
const value = get(settings, property.name)
Expand Down Expand Up @@ -95,6 +95,7 @@ const ControlSwitcher = memo(
currentFlavor={currentFlavor}
value={value}
options={options}
context={context}
onChange={handleChange}
/>
)
Expand All @@ -110,6 +111,8 @@ const ControlSwitcher = memo(
value={value}
props={options.props}
defaults={options.defaults}
isOpenedByDefault={options.isOpenedByDefault}
context={context}
onChange={handleChange}
/>
)
Expand All @@ -123,6 +126,7 @@ const ControlSwitcher = memo(
currentFlavor={currentFlavor}
options={options}
value={value}
context={context}
onChange={handleChange}
/>
)
Expand All @@ -136,6 +140,7 @@ const ControlSwitcher = memo(
currentFlavor={currentFlavor}
options={options}
value={value}
context={context}
onChange={handleChange}
/>
)
Expand All @@ -149,6 +154,7 @@ const ControlSwitcher = memo(
currentFlavor={currentFlavor}
options={options}
value={value}
context={context}
onChange={handleChange}
/>
)
Expand All @@ -161,6 +167,7 @@ const ControlSwitcher = memo(
flavors={flavors}
currentFlavor={currentFlavor}
value={value}
context={context}
onChange={handleChange}
/>
)
Expand All @@ -174,6 +181,7 @@ const ControlSwitcher = memo(
currentFlavor={currentFlavor}
options={options}
value={value}
context={context}
onChange={handleChange}
/>
)
Expand All @@ -187,6 +195,7 @@ const ControlSwitcher = memo(
currentFlavor={currentFlavor}
options={options}
value={value}
context={context}
onChange={handleChange}
/>
)
Expand All @@ -200,6 +209,7 @@ const ControlSwitcher = memo(
currentFlavor={currentFlavor}
options={options}
value={value}
context={context}
onChange={handleChange}
/>
)
Expand All @@ -213,6 +223,7 @@ const ControlSwitcher = memo(
currentFlavor={currentFlavor}
options={options}
value={value}
context={context}
onChange={handleChange}
/>
)
Expand All @@ -226,6 +237,7 @@ const ControlSwitcher = memo(
currentFlavor={currentFlavor}
options={options}
value={value}
context={context}
onChange={handleChange}
/>
)
Expand All @@ -239,6 +251,7 @@ const ControlSwitcher = memo(
currentFlavor={currentFlavor}
options={options}
value={value}
context={context}
onChange={handleChange}
/>
)
Expand All @@ -252,6 +265,7 @@ const ControlSwitcher = memo(
currentFlavor={currentFlavor}
options={options}
value={value}
context={context}
onChange={handleChange}
/>
)
Expand All @@ -265,6 +279,7 @@ const ControlSwitcher = memo(
currentFlavor={currentFlavor}
options={options}
value={value}
context={context}
onChange={handleChange}
/>
)
Expand All @@ -278,6 +293,7 @@ const ControlSwitcher = memo(
currentFlavor={currentFlavor}
options={options}
value={value}
context={context}
onChange={handleChange}
/>
)
Expand All @@ -291,6 +307,7 @@ const ControlSwitcher = memo(
currentFlavor={currentFlavor}
options={options}
value={value}
context={context}
onChange={handleChange}
/>
)
Expand All @@ -304,6 +321,7 @@ const ControlSwitcher = memo(
currentFlavor={currentFlavor}
options={options}
value={value}
context={context}
onChange={handleChange}
/>
)
Expand All @@ -317,6 +335,7 @@ const ControlSwitcher = memo(
currentFlavor={currentFlavor}
options={options}
value={value}
context={context}
onChange={handleChange}
/>
)
Expand All @@ -330,6 +349,7 @@ const ControlSwitcher = memo(
currentFlavor={currentFlavor}
options={options}
value={value}
context={context}
onChange={handleChange}
/>
)
Expand All @@ -343,6 +363,7 @@ const ControlSwitcher = memo(
currentFlavor={currentFlavor}
options={options}
value={value}
context={context}
onChange={handleChange}
/>
)
Expand All @@ -356,6 +377,7 @@ const ControlSwitcher = memo(
currentFlavor={currentFlavor}
options={options}
value={value}
context={context}
onChange={handleChange}
/>
)
Expand All @@ -369,6 +391,7 @@ const ControlSwitcher = memo(
currentFlavor={currentFlavor}
options={options}
value={value}
context={context}
onChange={handleChange}
/>
)
Expand All @@ -390,9 +413,10 @@ ControlSwitcher.propTypes = {
currentFlavor: PropTypes.oneOf(['svg', 'html', 'canvas', 'api']).isRequired,
settings: PropTypes.object.isRequired,
onChange: PropTypes.func.isRequired,
context: PropTypes.object,
}

const ControlsGroup = ({ name, flavors, currentFlavor, controls, settings, onChange }) => {
const ControlsGroup = ({ name, flavors, currentFlavor, controls, settings, onChange, context }) => {
return controls.map(control => (
<ControlSwitcher
key={control.name}
Expand All @@ -402,6 +426,7 @@ const ControlsGroup = ({ name, flavors, currentFlavor, controls, settings, onCha
property={control}
settings={settings}
onChange={onChange}
context={context}
/>
))
}
Expand Down
70 changes: 36 additions & 34 deletions website/src/components/controls/LineWidthControl.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,41 +35,43 @@ const Marker = styled.line`
fill: none;
`

const LineWidthControl = memo(({ id, property, flavors, currentFlavor, value, onChange }) => {
const handleChange = useCallback(
event => {
onChange(Number(event.target.value))
},
[onChange]
)
const LineWidthControl = memo(
({ id, property, flavors, currentFlavor, value, context, onChange }) => {
const handleChange = useCallback(
event => {
onChange(Number(event.target.value))
},
[onChange]
)

return (
<Control
id={id}
description={property.description}
flavors={flavors}
currentFlavor={currentFlavor}
supportedFlavors={property.flavors}
>
<PropertyHeader id={id} {...property} />
<Row>
<TextInput value={value} onChange={handleChange} unit="px" isNumber={true} />
<svg width={size} height={size}>
<Line y1={size / 2} x2={size} y2={size / 2} />
<Marker
x1={size * 0.2}
y1={size / 2}
x2={size * 0.8}
y2={size / 2}
strokeWidth={value}
/>
</svg>
<input type="range" value={value} onChange={handleChange} min={0} max={20} />
</Row>
<Help>{property.help}</Help>
</Control>
)
})
return (
<Control
id={id}
description={property.description}
flavors={flavors}
currentFlavor={currentFlavor}
supportedFlavors={property.flavors}
>
<PropertyHeader id={id} {...property} context={context} />
<Row>
<TextInput value={value} onChange={handleChange} unit="px" isNumber={true} />
<svg width={size} height={size}>
<Line y1={size / 2} x2={size} y2={size / 2} />
<Marker
x1={size * 0.2}
y1={size / 2}
x2={size * 0.8}
y2={size / 2}
strokeWidth={value}
/>
</svg>
<input type="range" value={value} onChange={handleChange} min={0} max={20} />
</Row>
<Help>{property.help}</Help>
</Control>
)
}
)

LineWidthControl.displayName = 'LineWidthControl'

Expand Down
Loading

0 comments on commit 975503a

Please sign in to comment.