mapbox / dr-ui

Design system for docs.mapbox.com
https://mapbox.github.io/dr-ui/
BSD 2-Clause "Simplified" License
30 stars 11 forks source link

Update index card #652

Closed AndrewSepic closed 9 months ago

AndrewSepic commented 9 months ago

This PR introduces the colSize prop for <IndexCard> which gives the opportunity to set custom col layouts with the index card component. colSize is a fraction based on Assembly grid classes. The component consumes the fraction (for example 1/3) and will set the width of the indexCard on medium to xl screens to 1/3. Medium screen sizes (colsMed) get a fraction with the denominator - 1. If no colSize is set, layout of IndexCards defaults to 1/4.

How to test

Create a component in a consuming site that looks like this..

          <IndexCard
              key={3}
              colSize={'1/3'}
              title={'Ticket Portal'}
              text={'Support Plan subscribers can submit and view their technical support tickets here.'}
              links={[
                { title: 'See your open tickets', link: 'https://support.mapbox.com/hc/en-us' }
              ]}
              sectionColor={'blue'}
            />

The <div> for that indexCard should have a class of col w-full w-1/2-mm w-1/2-ml w-1/3-mxl mb18

Before merge