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	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