Fix/issue 16 allow classnames

[Firestorm980]

Description of the Change

Adds additional settings for custom classes.

Alternate Designs

Benefits

Allows end developer to use their own classes versus being locked into the plugin classes.

Possible Drawbacks

CSS will have to be supplied by the developer.

Verification Process

• Updated demo with custom classes to confirm it worked.
• Confirmed old demo with default classes still worked.
• Ran automated tests.

Checklist:

• [x] My code follows the code style of this project.
• [x] My change requires a change to the documentation.
• [x] I have updated the documentation accordingly.
• [x] All new and existing tests passed.

Applicable Issues

https://github.com/10up/component-library/issues/16

[github-actions[bot]]

ESLint Summary View Full Report

Annotations are provided inline on the Files Changed tab. You can also see all annotations that were generated on the annotations page.

Type	Occurrences	Fixable
Errors	0	0
Warnings	0	0
Ignored	0	N/A

• Result: :white_check_mark: success
• Annotations: 0 total

---

^{Report generated by eslint-plus-action}

[cypress[bot]]

---

Test summary

8 • 0 • 1 • 0

---

Run details

Project	@10up/component-library
Status	Passed
Commit	79bbfeffa0 ℹ️
Started	Mar 8, 2021 8:55 PM
Ended	Mar 8, 2021 8:55 PM
Duration	00:39 💡
OS	Linux Ubuntu - 16.04
Browser	Chrome 88

View run in Cypress Dashboard ➡️

---

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard

[jeffpaul]

@Firestorm980 any thoughts on @nicholasio's prior comment/question to you?

[Firestorm980]

@Firestorm980 any thoughts on @nicholasio's prior comment/question to you?

@nicholasio I think as far as use case, I'd have to find the link/request, but it was something that was asked for previously as a feature so it would better integrate into an existing design system. I could see a use case where the engineer has to use something like Tailwind and needs to swap out for utility classes or maybe is working in an otherwise locked down environment.

I assume the underlying concern is the component breaking because our shipped CSS doesn't work anymore? I wonder if to avoid breakage with custom classes, we move our CSS away from classes and use different selectors (data-accordion- maybe?).

I think it is worth noting we should think of a solution that can be ported to the other components as well.

cc: @joesnellpdx

[barneyjeffries]

@Firestorm980 Joe asked me to take a look at this and give my thoughts. I think the new functionality for adding the custom classes looks great and something I have wanted on previous projects.

In general is there a reason that the component library is not BEM by default? Even if the classes get changed in a project, it sets a standard of what is expected in a 10up project.

cc @joesnellpdx @devinle

[Firestorm980]

@Firestorm980 Joe asked me to take a look at this and give my thoughts. I think the new functionality for adding the custom classes looks great and something I have wanted on previous projects.

In general is there a reason that the component library is not BEM by default? Even if the classes get changed in a project, it sets a standard of what is expected in a 10up project.

cc @joesnellpdx @devinle

@barneyjeffries I think that's a solid point. Probably another issue we could create for that.

cc: @joesnellpdx @nicholasio @devinle