Persona: mergeStyles part 3, split sub-components

[jordandrako]

Pull request checklist

• Include a change request file using $ npm run change

Description of changes

• Split PersonaCoin.tsx into PersonCoin.tsx and PersonaCoin.base.tsx
• Split PersonaPresence.tsx into PersonPresence.tsx and PersonaPresence.base.tsx
• Move PersonaCoin and PersonaPresence into subfolders.

[jordandrako]

@dzearing @oengusmacinog Should sub-components like PersonaCoin and PersonPresence live in their own folders like the Button folder structure to cut down on clutter?

Persona >
|  examples >
|  PersonaCoin >
|  |  index.ts
|  |  PersonaCoin.base.tsx
|  |  PersonaCoin.styles.ts
|  |  PersonaCoin.tsx
|  PersonaPresence >
|  |  index.ts
|  |  PersonaPresence.base.tsx
|  |  PersonaPresence.styles.ts
|  |  PersonaPresence.tsx
|  index.ts
|  Persona.base.tsx
|  Persona.styles.ts
|  Persona.tsx
|  PersonaPage.tsx

[oengusmacinog-zz]

probably want to add PersonaPresence.base too

[jordandrako]

Left out for now as Persona.types export PersonaPresence enum so the names conflict. What are your thoughts on this:

export { PersonaPresence as PersonaPresenceIcon } from './PersonaPresence';
export { PersonaPresenceBase as PersonaPresenceIconBase } from './PersonaPresence.base';

[oengusmacinog-zz]

Just the one comment, I would go ahead and add presence base to index but otherwise looks good mate!

[oengusmacinog-zz]

For File structure, I think what you have is good. Might start getting confusing as we scale, but essentially nested components would be intended to be subcomponents of the folder they are nested in, even though each sub-component can be used individually if desired. Still seems cleaner to structure this way, just should document some standards of when to nest and export a component