Documentation
Do-and-dont
Do and Dont is used in the UX docs to display how to correctly use a component, showing what you can and can't do.
It uses AnimateInView in order to bring animation to its images, as well as the Image component for its pictures.
Often it is paired with Grid, GridCol and GridRow from trinidad-ui, in order to correctly align the component.
Code examples
This is an example of the implementation on /components/button for the Do and Dont component.
// import the DoAndDont component
import DoAndDont from '@components/content/do-and-dont';
// Use the grid to alignt the components
import { Grid, GridCol, GridRow } from 'trinidad-ui';
<Grid>
<GridRow>
<GridCol sm={6}>
//isDo determines wich one is do
<DoAndDont isDo imgUrl="/images/components/button/button-d&d-one-row.png" alt='Do: text on single line'>Text
on single line</DoAndDont>
</GridCol>
<GridCol sm={6}>
<DoAndDont imgUrl="/images/components/button/button-d&d-two-rows.png" alt='Don´t: text on multiple lines'>Text
on multiple lines</DoAndDont>
</GridCol>
</GridRow>
</Grid>
Props table
| Prop name | Type | Default Value | Description |
|---|---|---|---|
| image | Image | Used to statically import and image | |
| imgUrl | string | Used with a direct url to an image. | |
| alt | string | Alt text for the image | |
| isDo | boolean | Determines if the component is the Do or the Dont. | |
| tagName | string | ||
| children | node | Children |
Feedback
We always want to improve the Design System and would be thrilled to get your feedback.
Please share your wisdom with us.