Capitalization Guidelines for Nimble in storybook

packages/storybook/src/docs/capitalization.mdx

@@ -0,0 +1,97 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+import bannerImage from './capitalization-assets/banner.png';
+import breadcrumbImage from './capitalization-assets/breadcrumb.png';
+import chipImage from './capitalization-assets/chip.png';
+import containerImage from './capitalization-assets/container.png';
+import dialogImage from './capitalization-assets/dialog.png';
+import drawerImage from './capitalization-assets/drawer.png';
+import menuImage from './capitalization-assets/menu.png';
+import stepperImage from './capitalization-assets/stepper.png';
+import tileImage from './capitalization-assets/tile.png';
+import tabsImage from './capitalization-assets/tabs.png';
+import treeViewImage from './capitalization-assets/tree-view.png';
+
+<Meta title="Style/Capitalization" />
+
+# Capitalization
+
+## Overview
+
+In general, use the following capitalization conventions to ensure consistency
+across the interface:
+
+- ALL CAPS for table headers.
+- Title Case for dialog titles.
+- Sentence case for all other UI text.
+
+## Element Cases
+
+### Banner
+
+The title of a banner should use sentence case along with the rest of the
+elements.
+
+<img src={bannerImage} alt="Banner capitalization example" />
+
+### Breadcrumb
+
+Breadcrumbs should use title case.
+
+<img src={breadcrumbImage} alt="Breadcrumb capitalization example" />
+
+### Chip
+
+Chips should use Title Case.
+
+<img src={chipImage} alt="Chip capitalization example" />
+
+### Container
+
+Containers should use sentence case for all elements.
+
+<img src={containerImage} alt="Container capitalization example" />
+
+### Dialog
+
+Dialog titles should use title case. Content inside the dialog should use
+sentence case.
+
+<img src={dialogImage} alt="Dialog capitalization example" />
+
+### Drawer
+
+Drawer titles should be title case. Other elements should be sentence case.
+
+<img src={drawerImage} alt="Drawer capitalization example" />
+
+### Menu
+
+Menus group headers should be all caps. The rest of the elements should be
+sentence case.
+
+<img src={menuImage} alt="Menu capitalization example" />
+
+### Stepper
+
+Stepper titles should be title case, subtitles should be sentence case.
+
+<img src={stepperImage} alt="Stepper capitalization example" />
+
+### Tabs
+
+Tabs in applications should be title case. Tabs in dialogs and drawers should
+be sentence case.
+
+<img src={tabsImage} alt="Tabs capitalization example" />
+
+### Tile
+
+Tiles should use all caps.
+
+<img src={tileImage} alt="Tile capitalization example" />
+
+### Tree View
+
+Tree view should use sentence case for all elements and sub elements.
+
+<img src={treeViewImage} alt="Tree view capitalization example" />