Discovery: `Layout` component proposal

[adamstankiewicz]

Consider how a Layout component might help simplify how responsive layouts are designed and implemented to improve communication between designers and engineers.

Paragon supports layouts through Bootstrap's grid system via containers, rows, and columns. Paragon exports Container, Row, and Col components for this purpose.

There is often confusion around how containers interact with columns in terms of designing/implementing responsive layouts.

The purpose of this issue is to create a straw-man proposal for how an abstracted Layout component might work to "hide" some of the complexities of understanding how Container, Row, and Col all interact.

It might be worth looking into other design systems / component libraries for inspiration, if any other design system has abstract layout type components.

There has been some discussion around having prescribed layout variants, though I believe the component would best be kept flexible.

Example responsive layout using Container, Row, and Col:

<Container size="xl" className="py-4 border ">
    <Row>
        <Col
            xs={{ span: 12, offset: 0 }}
            sm={{ span: 8, offset: 2 }}
            md={{ span: 12, offset: 0 }}
            lg={{ span: 10, offset: 1 }}
            xl={{ span: 8, offset: 0 }}
            className="mb-3"
        >
            <h3 className="mb-3">My courses</h3>
            <Card orientation="horizontal">
            <Card.ImageCap
                src="https://source.unsplash.com/360x200/?nature,flower"
                srcAlt="Card image"
            />
            <Card.Body>
                <Card.Header
                title="Card Title"
                />
                <Card.Section>
                This is a card section. It can contain anything but usually text, a list, or list of
                links. Multiple sections have a card divider between them.
                </Card.Section>
            </Card.Body>
            <Card.Footer orientation="horizontal">
                <Button>Action 1</Button>
            </Card.Footer>
            </Card>
        </Col>
        <Col
            xs={{ span: 12, offset: 0 }}
            sm={{ span: 8, offset: 2 }}
            md={{ span: 12, offset: 0 }}
            lg={{ span: 10, offset: 1 }}
            xl={{ span: 4, offset: 0 }}
        >
            <Card>
            <Card.Header title="Looking for a new challenge?" />
            <Card.Section>
                <Button variant="link" size="inline">Action 1</Button>
            </Card.Section>
            </Card>
        </Col>
    </Row>
</Container>

Consider what the API might be like for engineers to use a Layout type component. How will that API align to how designers should be communicating to engineers about how a responsive layout is defined? The component API ideally should match how designers communicate about the layout.