Standardize how custom and modifier classes are added to components #105
Description
I really like the pattern of using an array of strings to compile a list of all the class names that need to be added to a component. However, I have noticed a few different ways this is being handled and I think it could benefit from some standardization.
For a lot of Atoms, these arrays are defined like const classNames: string[] = ["c-component-name"]; but I have also seen some with the variable name as cssClassNames instead of classNames. I'm fine either way, though I would always opt for the shorter name as long as no context is lost.
In Molecules, the typical pattern is something like the following:
const CSS_CLASS_NAME = "c-component-name";
const classNames = [CSS_CLASS_NAME];
This is done so that the base class name can be leveraged for children components like:
className={${CSS_CLASS_NAME}__child-name}
For both layers, there are plenty of exceptions that don't follow these patterns, and I'd like to update them so they all work the same way, respective of their layer. We don't need to define the class name separately for Atoms since they have no children.
Additionally, many components don't have the ability to pass in a custom class name, which I'd be happy to add. Every component should have this ability in order to do contextual selection and styling if necessary. This also reinforces the need for a standard way to handle class compilation.