refactor(docs): rename file name to be the same as class name, etc

[dpkwhan]

Proposed changes:

1. Rename file name to be consistent with class name
2. Use stateless component whenever possible
3. Rename class. For example, rename ButtonButtonExample to ButtonExampleButton and ButtonBasicExample to ButtonExampleBasic
4. Use index.js whenever it is possible

---

Elements

• style(Button): update docs to the latest standards, add missing prop … #756 Button
• docs(Container): refactor, functional components, trailing period, misspelling #713 Container
• docs(Divider): refactor, use functional components, add trailing period #715 Divider
• style(Flag): refactor docs to latest standards #722 Flag
• style(Header): update docs to the latest standards #725 Header
• docs(Icon): refactor naming and descriptions, use function components #685 Icon
• style(Image): update docs to the latest standards #726 Image
• docs(Input): refactor, add trailing . in description, fix imports #679 Input
• feat(Label): add LabelGroup and missing docs #576 Label
• fix(List): Update to v1 API #551 List
• BREAKING CHANGE: Loader component refactor #654 Loader
• refactor(Rail): update component #658 Rail
• style(Segment): update docs to latest standards #751 Segment
• docs(Step): refactor and fix an issue #668 Step

Collections

• docs(Breadcrumb): refactor and use index.js #671 Breadcrumb
• docs(Form): update to latest standards and make minor fixes  #767 Form
• refactor(Grid): update Component #656 Grid
• style(Menu): update docs to the latest standards #835 Menu
• style(Message): update docs to the latest standards #789 Message
• docs(Table): update docs to the latest standards #771 Table

Views

• docs(Card): refactor, add trailing . in description and fix typo #667 Card
• fix(Feed): update propTypes, shorthand and docs #575 Feed
• style(Item): update docs to the latest standards  #881 Item
• style(Statistic): update docs to the latest standards #866 Statistic

Modules

• style(Accordion): update docs to the latest standards #838 Accordion
• style(Checkbox): update docs to the latest standards #839 Checkbox
• feat(Dropdown): Add missing examples and begin feature support #682 Dropdown
• docs(Modal): fix icon prop in Button, fix labeled prop, add index.js and trailing . in description #800 Modal
• docs(progress): refactor, add trailing . to description and use stateless functional expression #664 Progress
• refactor(Rating): add rating icon component #640 Rating
• style(Search): update docs to the latest standards #840 Search

Addons

• docs(Confirm): refactor and use index.js #630 Confirm
• docs(Radio): refactor, use stateless functional expression and fix a typo #662 Radio

[levithomason]

Yes! Thank you very much. This has been on my bucket list. Note the List PR, #311 #551 handles number 4 for the List examples. So we should wait for that PR to be merged before updating the List examples.

Lastly, the other goal is to allow the code snippets to be live edited and have the example update. This may affect how we name things as well. I'll start a trial of that right now and see what I find. Either way, having consistent class/filenames will make any refactors far more sane. So we can move forward on this immediately.

[dpkwhan]

@levithomason I will start to work on this in the next few days.

[levithomason]

Update, I'm able to handle the live example code editing with any export name. So no issues or limitations there.

[layershifter]

I'm renamed doc files to this naming pattern in #551, LGTM 👍

I think we need create dedicated section for shorthand examples in docs:

• Types
• Content
• Shorhands

[levithomason]

I think we need create dedicated section for shorthand examples in docs:

I agree this should be standardized. I'm not sure what order/pattern is most optimal.

Mix Shorthand In

Some examples show shorthand immediately after the regular version:

Separate Shorthand

Some example have a section for Shorthand:

---

I think I lean toward mixing them together, showing shorthand use immediately after showing the regular use. Shorthand props are the power and most likely use of all components IMO. I'm worried that if we separate them in their own section, it will have more chance of getting looked over or seeming like an after thought. I want the examples to be pervasive. Open to other ideas as well.

[layershifter]

I think we need make global documention cleanup that will standardize filenames and shorthand usage. Also, it must cover missing examples from SUI docs.

In latest PRs I started on it.

[levithomason]

Great, I've started the Feed updates #575 and updated the task list.

---

Here's the final spec on what I think we should do:

1. Do not destructure sub components const { Label } = Feed. Let's just show the sub component usage. Keeping Feed.Label prevents name conflicts and helps drive home the idea of sub components.

2. Show shorthand use immediately after each sub component example.

   • Add Props Shorthand to shorthand filenames:
     FeedExampleEvent.js FeedExampleEventShorthand.js

   • Add a description to all shorthand ComponentExample's

     // FeedExampleImageLabel.js
     description='An event can contain an image label'
     // FeedExampleImageLabelShorthand.js
     description='You can also configure an image label via props'

3. Split example to keep the files as short as possible. It is hard to view code for long examples. Let's try to keep them ~30 LOC or less.

4. When possible, return an expression instead of adding a function body/return statement

   const FeedExampleEvent = () => (
     // ...
   )

   Instead of:

   const FeedExampleEvent = () => {
     return (
       // ...
     )
   }

[dpkwhan]

First PR #587