component library posts - idmontie's Portfolio

<p>The following is a checklist I like to use to ensure I&#x27;m covering all the bases when building a component library. It&#x27;s a work in progress, but I hope it can be useful to others.</p>
<h2>Visual Language</h2>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" disabled=""/>  Color
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" disabled=""/>  Palettes, by category</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Dark mode</li>
</ul>
</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Typography
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" disabled=""/>  Headings</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Text</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Paragraph</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Lead paragraphs</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Readable text</li>
</ul>
</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Iconography
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" disabled=""/>  Icons</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Meaning</li>
</ul>
</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Space
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" disabled=""/>  Units / measurements</li>
</ul>
</li>
</ul>
<h2>Text</h2>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" disabled=""/>  Block quote</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Unordered list</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Ordered list</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Internal link</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  External link</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Code</li>
</ul>
<h2>Buttons</h2>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" disabled=""/>  Buttons
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" disabled=""/>  Primary</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Secondary</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Button groups</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Menu buttons</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Split buttons</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Floating action button</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Brand buttons (Google, FB, Discord)</li>
</ul>
</li>
</ul>
<h2>Forms</h2>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" disabled=""/>  Form controls
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" disabled=""/>  Text input</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Email/number/other variant inputs</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Multi-line text area</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Radio and radio group</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Checkbox and checkbox group</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Select</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  File upload</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Label</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Required label</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Switch</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Slider</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Calendar picker</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Rich text editor</li>
</ul>
</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Form structure</li>
</ul>
<h2>Layout</h2>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" disabled=""/>  Divider</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Box</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Marketing grid</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  App grid</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Page transitions</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Resopnsive breakpoints</li>
</ul>
<h2>Content</h2>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" disabled=""/>  Image</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Avatar</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Code block</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Footnotes</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Thumbnails</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Video</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Map widget</li>
</ul>
<h2>UI Components</h2>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" disabled=""/>  Alerts</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Accordion</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Back to top</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Badges/tags/chips/pills</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Breadcrumbs</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Caption</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Cards
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" disabled=""/>  Panel</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Callout</li>
</ul>
</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Chat</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Comments</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Tables
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" disabled=""/>  Data table</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Property table</li>
</ul>
</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Drawer</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Filters</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Footer</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Header</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Error (standard error handler)</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Loading / spinner / shimmer</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Toast</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Notification / badge (dot)</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Modal</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Pagination</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Popover</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Progress bar</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Search</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Sidebar</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Sort by</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Tabs</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Tooltips</li>
</ul>
<h2>Navigation</h2>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" disabled=""/>  Action bar / toolbar</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Main menu / Megamenu</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Inline menu</li>
</ul>
<h2>Marketing</h2>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" disabled=""/>  Contact us</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Cookie notification</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Hero billboard</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Hero carousel</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Legend</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Pull quote</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Ratings</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Reviews</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Social networking</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Status (alpha, beta)</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Tips / tutorial</li>
</ul>
<h2>UI Patterns</h2>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" disabled=""/>  Authentication</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Create account</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Permissions</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Purchase/checkout</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Settings</li>
<li class="task-list-item"><input type="checkbox" disabled=""/>  Site / app structure</li>
</ul>


The following is a checklist I like to use to ensure I'm covering all the bases when building a component library. It's a work in progress, but I hope it can be useful to others.

## Visual Language

- [ ]  Color
  - [ ]  Palettes, by category
  - [ ]  Dark mode
- [ ]  Typography
  - [ ]  Headings
  - [ ]  Text
  - [ ]  Paragraph
  - [ ]  Lead paragraphs
  - [ ]  Readable text
- [ ]  Iconography
  - [ ]  Icons
  - [ ]  Meaning
- [ ]  Space
  - [ ]  Units / measurements

## Text

- [ ]  Block quote
- [ ]  Unordered list
- [ ]  Ordered list
- [ ]  Internal link
- [ ]  External link
- [ ]  Code

## Buttons

- [ ]  Buttons
  - [ ]  Primary
  - [ ]  Secondary
  - [ ]  Button groups
  - [ ]  Menu buttons
  - [ ]  Split buttons
  - [ ]  Floating action button
  - [ ]  Brand buttons (Google, FB, Discord)

## Forms

- [ ]  Form controls
  - [ ]  Text input
  - [ ]  Email/number/other variant inputs
  - [ ]  Multi-line text area
  - [ ]  Radio and radio group
  - [ ]  Checkbox and checkbox group
  - [ ]  Select
  - [ ]  File upload
  - [ ]  Label
  - [ ]  Required label
  - [ ]  Switch
  - [ ]  Slider
  - [ ]  Calendar picker
  - [ ]  Rich text editor
- [ ]  Form structure

## Layout

- [ ]  Divider
- [ ]  Box
- [ ]  Marketing grid
- [ ]  App grid
- [ ]  Page transitions
- [ ]  Resopnsive breakpoints

## Content

- [ ]  Image
- [ ]  Avatar
- [ ]  Code block
- [ ]  Footnotes
- [ ]  Thumbnails
- [ ]  Video
- [ ]  Map widget

## UI Components

- [ ]  Alerts
- [ ]  Accordion
- [ ]  Back to top
- [ ]  Badges/tags/chips/pills
- [ ]  Breadcrumbs
- [ ]  Caption
- [ ]  Cards
  - [ ]  Panel
  - [ ]  Callout
- [ ]  Chat
- [ ]  Comments
- [ ]  Tables
  - [ ]  Data table
  - [ ]  Property table
- [ ]  Drawer
- [ ]  Filters
- [ ]  Footer
- [ ]  Header
- [ ]  Error (standard error handler)
- [ ]  Loading / spinner / shimmer
- [ ]  Toast
- [ ]  Notification / badge (dot)
- [ ]  Modal
- [ ]  Pagination
- [ ]  Popover
- [ ]  Progress bar
- [ ]  Search
- [ ]  Sidebar
- [ ]  Sort by
- [ ]  Tabs
- [ ]  Tooltips

## Navigation

- [ ]  Action bar / toolbar
- [ ]  Main menu / Megamenu
- [ ]  Inline menu

## Marketing

- [ ]  Contact us
- [ ]  Cookie notification
- [ ]  Hero billboard
- [ ]  Hero carousel
- [ ]  Legend
- [ ]  Pull quote
- [ ]  Ratings
- [ ]  Reviews
- [ ]  Social networking
- [ ]  Status (alpha, beta)
- [ ]  Tips / tutorial

## UI Patterns

- [ ]  Authentication
- [ ]  Create account
- [ ]  Permissions
- [ ]  Purchase/checkout
- [ ]  Settings
- [ ]  Site / app structure


Component Library Checklist