feat: responsive capacities based on breakpoints

[matthprost]

Introducing Responsive

Our current components allow us to structure and format correctly data on screen but never had the possibility to react depending on screen size. This is now part of history.

All the responsive is based on our breakpoints defined in the theme:

breakpoints: {
    large: '1440px',
    medium: '1280px',
    small: '1080px',
    xlarge: '1800px',
    xsmall: '720px',
    xxsmall: '320px',
}

Stack

Stack component will now allow you to use an object on gap and direction to define the values you want to each screen size.

The previous system remains functional and has now become the standard method for globally determining what to display, regardless of screen size.

// apply gap and direction for all screen size
<Stack
   direction="column"
   gap={1}
>
   <div>First child</div>
   <div data-width-full>Second child</div>
   <div>Third child</div>
</Stack>

// apply gap and direction depending on screen size
<Stack
   direction={{ xxsmall: 'column', xsmall: 'row', small: 'row' }}
   gap={{ xxsmall: 1, xsmall: 2, small: 3 }}
>
   <div>First child</div>
   <div data-width-full>Second child</div>
   <div>Third child</div>
</Stack>

Row

Row component will also allow you to use an object on gap and templateColumns. As for the Stack the previous system still remains functional.

// apply gap and templateColumns for all screen size
<Row
    templateColumns="4fr 3fr 4fr"
    gap={1}
>
   <div>row</div>
   <div>row</div>
   <div>row</div>
</Row>

// apply gap and templateColumns depending on screen size
<Row
   templateColumns={{
     xxsmall: '1fr',
     xsmall: '2fr 2fr 2fr',
     small: '4fr 3fr 4fr',
   }}
   gap={{
     xxsmall: 1,
     xsmall: 1,
     small: 2,
   }}
>
   <div>row</div>
   <div>row</div>
   <div>row</div>
</Row>

[changeset-bot]

🦋 Changeset detected

Latest commit: 378806d

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 6 packages

Name	Type
@ultraviolet/themes	Major
@ultraviolet/ui	Minor
@ultraviolet/form	Major
@ultraviolet/icons	Patch
@ultraviolet/illustrations	Patch
@ultraviolet/plus	Major

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR