Decide on JS conventions for "child" components

[shawnbot]

We've currently got a couple of instances of BEM-style block and element component classes that live in separate files:

• FlexContainer and FlexItem
• UnderlineNav and UnderlineNavLink

@broccolini and I chatted about this briefly yesterday and the idea of colocating them came up, which would change this:

import {FlexContainer, FlexItem} from 'primer-react'
export default () => (
  <FlexContainer>
    <FlexItem>Hello</FlexItem>
    <FlexItem>World</FlexItem>
  </FlexContainer>
)

to:

import {Flex} from 'primer-react'
export default () => (
  <Flex>
    <Flex.Item>Hello</Flex.Item>
    <Flex.Item>World</Flex.Item>
  </Flex>
)

and this:

import {UnderlineNav, UnderlineNavLink} from 'primer-react'
export default () => (
  <UnderlineNav>
    <UnderlineNavLink href="/">Home</UnderlineNavLink>
    <UnderlineNavLink href="/about/">About</UnderlineNavLink>
  </UnderlineNav>
)

to:

import {UnderlineNav} from 'primer-react'
export default () => (
  <UnderlineNav>
    <UnderlineNav.Link href="/">Home</UnderlineNav.Link>
    <UnderlineNav.Link href="/about/">About</UnderlineNav.Link>
  </UnderlineNav>
)

Let's decide whether we want to do this and maybe include our reasoning in our design principles? /cc #50

[emplums]

I personally prefer the way we have it now! I think it helps hold the idea of breaking down items into the smallest components possible, and each component having it's own file/separate concerns, even though you probably wouldn't use an UnderlineNavLink or FlexItem without it's corresponding "parent"ish component. I also like that it simplifies the component naming API - UnderlineNav.Link doesn't feel like standard HTML.

[shawnbot]

We've talked about this a couple of times and decided to move ahead with it, as in #313. 🚀