Design Pattern Library
The Design Pattern Library audits all the different types of components that exist in the Open Library codebase. We are currently in the process of migrating this to a Storybook instance (see #4179).
Inspiration
Inspired by Wikimedia's style guide.
How to Contribute
- Help us get the storybook added in #4179 publishing to github pages.
- Link the storybook from this page
- If a component is documented here, add it to the storybook and remove it from this wiki page.
- When this page is fully migrated to storybook, please make this page redirect to the new storybook instance
Adding a Component
The documentation for a UI component includes:
- a
name— in this case it’s calledDecorated-Carousel(required) - a
location(required) which is an example URL or page where the component may be found on the website - a
short description(optional) of what the component is - a
screenshotof the UI component (required)
Example
This is an example of a UI component on openlibrary.org (one of our other projects). 
Frequently Asked Questions
How do I choose a name?
If you look through the website’s css/html, you may see a class name which describes the component. This is probably the right name to include in the docs for the component, even if it’s not the best name — if you have a suggestion for a better name, please include both! It’s important to include the CSS name(s) (even if it’s not the best name) because this is what will help us find the component in our code.
How do I know what’s a component?
Generally, a component will be a visual element which occurs repeatedly on the website (like a special button, a dropdown menu, a box containing download options, etc)
How do I add a screenshot!?
This is actually kind of a hack, sorry! You can't drag screenshots directly into this document. Here's what I do:
- Open a new window to http://github.com/internetarchive/iaux/issues/new
- The Issues UI does allow you to drag a image into the comment section of the issue!
- When you drag and drop your screenshot into the issue, it should appear as something like
 - Copy this snippet and paste it into this Design Pattern Library in the appropriate section for the component you are documenting.
Components
These are components on Open Library to be made modular and documented:
Admin table
Seen on
Book
Is used in the Carousel component to display books. Note, the button inside this component is bespoke (a book-cta) - see #1158.
ContentHead
Can appear once at the top of any page.
Consists of the page title, an inline "count" and a set of tools.
Other elements can be rendered under the tools but are not part of the component.
CtaBtn
See Storybook instance.
<div class="cta-btn">CTABtn</div>
cta-btn--unavailable
cta-btn--available
<div class="cta-btn cta-btn--available">CTABtn</div>
cta-btn--shell cta-btn--preview
<div class="cta-btn cta-btn--shell cta-btn--preview">Preview</div>
with badge
<div class="cta-btn">
Join waiting list
<div class="cta-btn__badge">4</div>
</div>
Cover
Extremely similar to the Book component. Seen on https://openlibrary.org/subjects/science
Makes use of buttonCta
ButtonBtn
As seen in component PageBanner
modifiers
If this button is not large enough for add the large modifier ('btn--large')
e.g. the read ebook button on a book page
notes
See #1158
ButtonGeneric
As seen in the sign up button! See #1158
ButtonGhost
Appears in the iaBar
ButtonBrowserDefault (was ButtonSearch) -
It is used to submit the search query. Uses slightly modified default browser styles.
Seen - https://openlibrary.org/search?q=harry+potter , https://openlibrary.org/search
ButtonCta
Styled with .cta-btn, this button is a little Dr Jekyll and Hyde in how it is defined, but it always looks similar, only varying by color.
ButtonLink
Currently used in the EditToolbar component.
BorrowBookForm
(please help document me!)
BorrowTable
A table listing 
the table appears differently if loans are activated: 
Used on the following pages:
Carousel
Arrows are fonts rendered via the slick library. This carousel contains several CategoryItems
Decorated-Carousel
A decorated carousel has background:
This is used on [the works page]:
(https://openlibrary.org/works/OL69395W/Historie_of_the_raigne_of_King_Henry_the_Seventh).
Carousel-section
A carousel section wraps a carousel and a heading.
CategoryItem
(appears on home page)
Chart
As on subject page
ChartStats
As seen on stats
ColorBoxOverlay
An overlay that expands images. Visible when clicking the image of the author on their page. Author page
Also used when clicking the image of a book cover on a book page.
Also used when adding an item to a reading list via a Dropper component:
(Uses rules #colorbox, #cboxOverlay, #cboxWrapper)
dataTables
(please help document me!)
Diff
Renders a diff
Edit-Toolbar
Any wiki page that can be edited will have an edit toolbar
EditionsTable
.lists variant
When inside a .lists element this renders differently. (please help document me!)
HeadedLinkList
A list of links with a heading as seen on https://openlibrary.org/subjects
We currently make use of .contentQuarter elements to arrange these side by side but it would be useful to have them modeled as their own component and deal with layout separately.
See also: LinkBox
Manage-Covers
Shows when logged in and with JS enabled when you hover over a cover.
Page-History
shows at the bottom of any wiki page, showing the revision history of that page.
(https://openlibrary.org/works/OL69395W/Historie_of_the_raigne_of_King_Henry_the_Seventh).
RevisionHistoryTable
Confusingly, a similar table renders on the revision history page
iaBar
Internet Archive Bar: A bar that appears at the top of all pages. Makes use of a ButtonGhost.
Merge Form
Url: http://localhost:8080/authors/merge?key=OL6848355A&key=OL18319A&key=OL24522A Requires admin access
MyBooks
Combines MyBooksList and MyBooksMenu In use on https://openlibrary.org/account/books/want-to-read
MyBooksList
uses SearchResultItem
MyBooksMenu
In use on https://openlibrary.org/account/books/want-to-read
OLform
Used to render forms in OpenLibrary (please help document me!) Some examples:
Search at top of subjects page
the edit a work page
ReadingLog-stats
Undocumented component.
Used in openlibrary/templates/stats/readinglog.html
ReaderStats
Example url: https://openlibrary.org/books/OL16180205M/Harry_Potter_and_the_Sorcerer's_Stone
LinkBox
Similar to HeadedLinkList but used to show related links, which are listed inline with a smaller heading. This element does not use a ul element, but does function in a very similar way.
Seen on https://openlibrary.org/subjects/science and on book pages
See also HeadedLinkList
All Pages
HeaderBar
The header bar appears at the top of every page.
FlashMessage
Can be displayed on any page via JS to report feedback to a user after some form has been posted.
FlashMessageBookAdded
FlashMessageError
Footer
The footer appears at the top of every page.
RatingsForm
SearchResultContainer
Contains: #SearchResultItem, #widgetbox and #LinkBox
SearchResultItem
SearchResultItemCTA
e.g. https://openlibrary.org/account/books/want-to-read
SearchResultsInstantResult
Shows up when you search from the header
UI-Tabs / TabsPanel
A tab component. See author page for an example.
StatsChart
Can be found on the home page. Graph rendered via an HTML canvas.
PageBanner
Edition (book)
A mega component which puts together various other components. Appears on book page
ListEntry
Seen on lists page.
ListsPageCta
Seen on lists page.
ListsLists
On works page and books pages:
[pictured: dropit tool]
ShareLinks
Appears on book page. I don't believe it appears anywhere else (??)
Dropper
The dropper is an enhanced substitution select element. At time of writing it does not work without JavaScript (see #1147).
Dropper-list
A variant of the dropper exists for things that are not books. Can be seen on subjects and authors pages.
Dropper with dropdown
(See also ReadStatuses component, shown in image)
with activated-check
When referring to "Drop click" we are referring to this part of the element:
Mode-options
Radio buttons to toggle between different 3 different options
Seen - https://openlibrary.org/search , https://openlibrary.org/search?q=harry+potter
Books Page
Read Panel
Appears on books page.
Definition List
Definition markup can be used to generate a definition list See https://www.w3.org/MarkUp/html3/deflists.html
ReadStatuses
Shown when you click the Droppercomponent.
WidgetBox
Widget boxes are used for layout. They consist of a header, a hint and a component (which might be a list or another component on this page)
The screenshot shows a WidgetBox with an unordered list and a WidgetBox containing a ListsLists. 
NavEdition
Appears at the top of book pages. Will probably be merged in future with another component once identified.
PageAlert
Visit http://openlibrary.org/books/add incognito. Styled using #noLogin Similar styles exist (with different iconography) for #preMerge, #postMerge, #errorMerge
See also FlashMessage
WmdButtonBar
Seen on http://localhost:8080/people/openlibrary7774?m=edit
WmdPromptDialog
When editing a profile page, and clicking the link button in the wmd button bar this overlay shows. JavaScript is required.
PageHeadingSearchBox
A form within the page that allows searching the site.
Seen on http://openlibrary.org/subjects/romance
Must appear at the top of the page.
searchInsideForm
A PageHeadingSearchBox must contain a searchInsideForm
Other examples:
UI-Dialog
Deprecated, but in use when removing lists on books pages. See also colorbox
Throbber
Used when loading the carousel for changing covers for a book. Possibly reusable for other things?
SubNav
A list of navigation links (tabs) that appear under the title e.g. Recent changes. When one is selected it should be bolded.
(Note the title "Recent Changes" should not be considered part of the component. 