Inconsistent component directory structure

[anselmbradford]

Current behavior

• Expandables put all the less code in https://github.com/cfpb/capital-framework/blob/canary/src/cf-expandables/src/cf-expandables.less, on the other hand, pagination imports the less code via /molecules/ directory https://github.com/cfpb/capital-framework/blob/canary/src/cf-pagination/src/cf-pagination.less#L35

Expected behavior

• The less should be separated into a /atoms/, /molecules/, /organisms/, directories OR included in the main cf- less file for the component.

[anselmbradford]

Proposed structure:

Remove the subdirectories and prefix the less files with the atomic component they contain.

Consider the current structures:

cf-forms

atoms/
cf-forms.less
molecules/
organisms/

cf-expandables:

cf-expandables.less

For the first example, the problem is it is not immediately apparent what and how many atomic components are in the package, without snooping into the sub-directories. Also, the atomic component files do not have the same name as the class name they contain, such as atoms/label.less, which contains a-label.

For the second example, the problem is the same, but for different reasons. To check what and how many components are in the package, the cf-expandables.less needs to be opened the browsed for a-, m-, and o- prefixes.

Instead, these directories could look like:

a-label.less
a-legend.less
a-multiselect.less
a-select.less
a-text-input.less
cf-forms.less
m-btn-inside-input.less
m-form-field.less
o-form.less

And

cf-expandables.less
o-expandable.less

[cfarm]

I like it. I like having all the files in the same folder for ease of maintenance and to better understand what elements are associated with each component.

[jimmynotjim]

Sounds good to me. The prefixes also keep them organized and we lucked out that our system of prefixes happen to be in alpha order. I say lets do this whenever someone has a chance.