Rename and reorganize components

[stephiescastle]

Our current naming convention is based on the ecosystems the components were originally built in, and also assume a narrow view of use-case.

• One example is "ArticleCarousel." This refers to WWW using ArticleCarousel solely for news stories. This isn't a holistic name and leads to a disorganized and confusing naming convention in Explorer 1.
• Another example is all of the different card types, and how they aren't all visible in one place.
• And yet another example is our usage of the word "Blocks" to refer directly to blocks that are available for use in a wagtail body streamfield.

@Scotchester has started a figjam board categorizing the current state of our components.

Task Summary

See comment thread for details.

• [x] Rethink / Reorganize some base components
• [x] Rename ArticleCarousel and TopicsCarousel to LinkCarousel
• [x] Rename hero blocks
• [x] Rename BlockFactCards to BlockCardGroup
• [ ] Create a table in our projects that use Explorer 1 that maps data models to design component

[stephiescastle]

Notes after a discussion with @kaelynrichards and @Scotchester:

Component renaming notes

• combine article and topics carousel into “LinkCarousel”
  • instead of variant, use “item format” or “item type?” and choose “card” or “tile”
• Rethinking base
  • Problem statement: noticed a disconnect between things like BaseCarouselCards and BaseVideoBg compared to things like buttons and links. Example: users probably wouldn’t copy the HTML of BaseCarouselCards into a project template. Users should use things like “LinkCarousel” for that.
  • BaseCarouselCards and other similar utility components should be rethought of as “mixins” or similar and categorized as such on Storybook.
  • we could either take base things out of base, or leave that as is, and move things like “button” or “link” into a more elemental category, like atoms

Next steps

• Stephanie will think on different ways of categorizing "base" and "mixins" and post them here for feedback
• Kaelyn will look at our current base-level components and note any others that do not seem like the others.

[stephiescastle]

Notes after more discussion with @kaelynrichards and @Scotchester

Renaming Hero blocks

In Storybook, present Heroes as a single block with different sizes, rather than separate hero components:

• rename HeroFocalPoint to "Large" in Storybook and WCP
• rename HeroFeature to "Medium" in Storybook and WCP
• the new small hero should be called "Small" in Storybook and WCP
• rename "HeroMedia" to "Media Only" in Storybook and WCP

Renaming BlockFactCards

BlockFactCards are being used more broadly than for "factoids." A more generalized name is appropriate.

• BlockFactCards --> BlockCardGroup
• BlockFactCardItem --> BlockCard

Scope

Where will we change the names:

• Storybook
• Explorer 1 files and CSS class names (scss and js)
• Block labels in WCP (vanity names)

Where we won't change the names:

• We will not change data models (at least not yet), but we should consider maintaining a table of how the data models correspond with the design system blocks

[Scotchester]

Reviewed your spreadsheet and replied to a few of your comments, @stephiescastle!