...
```
Generation of these attributes is disabled by default. To enable it, wrap the section
of code for which you want the attributes generated in the `withShowDesignKeys` HOC:
```js
const CardWithDesignKeys = withShowDesignKeys()(CardDesignable);
```
or, to turn it on for a whole page, but only when not in production mode,
```js
const PageWithDesignKeys = withDesignKeys(process.env.NODE_ENV !== 'production')(Fragment);
...
```
## Consuming the Design API
A consumer can now style our Card by employing the `withDesign()` API method to
pass a `Design` object as a prop value. This is simply a set of higher-order
components which will be applied to each element. For example:
```js
const asBasicCard = withDesign({
Wrapper: addClasses('font-sans'),
Title: addClasses('text-sm text-green'),
Body: addClasses('my-10'),
Cta: addClasses('block w-full bg-blue text-yellow py-1'),
});
const BasicCard = asBasicCard(Card);
```
In ths example, we could simply have provided our design directly as a prop:
```js
const BasicCard: FC = () =>
```
However, by using `withDesign()` instead, our component itself will expose its own
design prop, allowing other consumers to further extend it:
```javascript
const asPinkCard = withDesign({
Cta: addClasses('bg-pink').removeClasses('bg-blue'),
});
const PinkCard = asPinkCard(BasicCard);
```
In these examples, we are *extending* the default components. If we wanted
instead to *replace* one, we could write our HOC to ignore its argument
(or use the provided shortcut HOC `replaceWith()`):
```javascript
const StylableH2 = stylable
('h2');
const StandardH2 = addClasses('text-xl text-blue')(StylableH2);
const StandardCard = withDesign({
Title: replaceWith(StandardH2), // same as () => StandardH2
})(BasicCard);
```
We can also use the `startWith()` HOC, instead of replacing the whole component, it will only replace the base component but still use any hoc that might have wrapped it.
As with FClasses, HOC's created via `withDesign()` are themselves reusable, so
we can write:
``` js
const asStandardCard = withDesign({
Title: replaceWith(StandardH2), // same as () => StandardH2
});
const StandardCard = asStandardCard(Card);
const StandardPinkCard = asStandardCard(PinkCard);
const StandardRedCard = asStandardCard(RedCard);
```
And, also as with FClasses, the HOC's can be composed:
``` js
const StandardPinkAndGreenCard = flowRight(
withGreenCtaText,
asStandardCard,
asPinkCard,
)(BasicCard);
```
## Conditional styling
It is sometimes useful to apply classes conditionally, based on props passed to
a component and/or based on component state. The FClasses design API includes some helper methods which make this easier.
### Conditional styling based on passed props
Imagine we have a button which has different variants depending on whether it
is active and/or whether it is the first in a list of buttons. We can use
the `addClassesIf()`, `removeClassesIf()`, `withoutProps()` and `hasProp()` helpers to accomplish this:
``` js
type VariantProps = {
isActive?: boolean,
isFirst?: boolean,
isEnabled?: boolean,
};
const Div = stylable>('div');
const isActive = (props: any) => hasProp('isActive')(props);
const isFirst = (props: any) => hasProp('isFirst')(props);
const ContextMenuButton = flow(
withoutProps(['isActive', 'isFirst'),
addClasses('cursor-pointer pl-2 text-gray'),
addClassesIf(isActive)('text-white'),
removeClassesIf(isActive)('text-gray'),
removeClassesIf(isFirst)('pl-2'),
)(Div);
```
### Conditional styling based on component state
Imagine we have a button which consume some state from a react context.
We can use `addClassesIf` and `removeClassesIf` helpers to add classes to the button conditionally:
```js
const ToggleContext = React.createContext({
state: false,
});
const useStateContext = () => useContext(ToggleContext);
const isToggled = () => useStateContext().state;
const Div = stylable>('div');
const Button = props => {
const { state } = useStateContext();
return {`Button state consumed from store is ${state}.`}
;
};
const StyledButton = flow(
addClassesIf(isToggled)('bg-emerald-200'),
)(Button);
```
A few notes:
- We use `flow()` rather than `flowRight()` because it is better at type inference.
- Our innermost HOC is `withoutProps()`. This guarantees that the props used to
control styling won't be passed to the `div` element. We must explicitly type
the generic `withoutProps()`. This ensures that the type of the resulting
component will include these props.
## Design Variants
One of the most powerful features of the Design API is the ability to
create multiple variants of a component by composing different tokens
onto it.
---
_Source: https://npm.io/package/@bodiless/tokens · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._