Component - 2 Column Comparison

[twblack88]

A way to compare two columns of texts. We use do's and don'ts pretty often so this has a high utility for content creators. Includes both mobile and desktop view: Figma link

[MaximumCrash]

@befitsandpiper

This component is the case where we must go against the rules of it's design to ensure it can be scripted flexibly in MDX. What I mean is, while this is for "2 Columns" It should support an infinite amount of containers.

1 Container

• Stretch the whole width of it's parent (width 100%, or flex grow: 1, or grid columns, ect.)

2 Containers

• As we see in the spec. 2 Columns side by side.

3 Containers

• Elements are centered.
• Each row contains only 2 containers so the 3 spills over into another row.

4 Containers

• Similar to spec. Except now we have 2 rows 2 columns.

5 - Infinity

• Rinse and Repeat

Scripting this will be a little more tricky because the containers have a title and content. But based on our WYSIWYG philosophy we'll be following the child rule from the List and Process components.

Acceptance criteria will be:

1. I should be able to script this component in MDX with as little friction to remember as possible. In the case of this component I would expect to be able to script it like so:

NOTE: Mind the gaps. MDX is picky about line breaks (similarly to MD) on how it recognizes individual children. Notice the line break at the start and end of the component and in-between children.

<Comparison>

    Column Element 1 with NO title and only content. 

    - Column Element 2 with a Title and no children

    - Column Element 3 with a Title AND children
         - Children elements go down here. 

</Comparison>

By leveraging the consistency of the MD language we can code with faith that if an element is specifically a UL/OL it will have a title, and if it has a sub UL/OL then the sub is the content below the title. (I do this mostly in the List component for recognizing Links vs regular List elements)

A more realistic MDX scripting example based on the spec should be

<Comparison>

-  ## What we fund
    - <Box>

          - Tools that directly benefit Dai users
          - Tools that increase Dai adoption
          - Tools that increase Access to personal liquidity.          

       </Box>

- ## What we don't fund
    - <Box>

             - Pure R&D 
             - Information gathering
             - Additional runway
             - Ethereum ecosystem improvements

             We also do not allocate grants that contain large marketing budgets 
             and/or Dai giveaways and airdrops.             

       </Box>

</Comparison>

2. No margin top for this component's container when it comes to spacing around other components. But there will be margin bottom between the individual containers.

3. With the child rule anything should be able to render inside of a comparison component.

4. Height differences due to content. All Columns should be the same height as the tallest column. minHeight should be 332px (based on specs)

[MaximumCrash]

Closed by completion of #59