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).
Inspired by Wikimedia's style guide.
- 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
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)
This is an example of a UI component on openlibrary.org (one of our other projects).
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.
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)
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.
These are components on Open Library to be made modular and documented:
Seen on
Is used in the Carousel component to display books. Note, the button inside this component is bespoke (a book-cta) - see #1158.
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.
See Storybook instance.
<div class="cta-btn">CTABtn</div>
<div class="cta-btn cta-btn--available">CTABtn</div>
<div class="cta-btn cta-btn--shell cta-btn--preview">Preview</div>
<div class="cta-btn">
Join waiting list
<div class="cta-btn__badge">4</div>
</div>
Extremely similar to the Book component. Seen on https://openlibrary.org/subjects/science
Makes use of buttonCta
As seen in component PageBanner
If this button is not large enough for add the large modifier ('btn--large')
e.g. the read ebook button on a book page
See #1158
As seen in the sign up button! See #1158
Appears in the iaBar
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
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.
Currently used in the EditToolbar component.
(please help document me!)
A table listing
the table appears differently if loans are activated:
Used on the following pages:
Arrows are fonts rendered via the slick library. This carousel contains several CategoryItems
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).
A carousel section wraps a carousel and a heading.
(appears on home page)
As on subject page
As seen on stats
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)
(please help document me!)
Renders a diff
Any wiki page that can be edited will have an edit toolbar
When inside a .lists element this renders differently. (please help document me!)
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
Shows when logged in and with JS enabled when you hover over a cover.
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).
Confusingly, a similar table renders on the revision history page
Internet Archive Bar: A bar that appears at the top of all pages. Makes use of a ButtonGhost.
Url: http://localhost:8080/authors/merge?key=OL6848355A&key=OL18319A&key=OL24522A Requires admin access
Combines MyBooksList and MyBooksMenu In use on https://openlibrary.org/account/books/want-to-read
uses SearchResultItem
In use on https://openlibrary.org/account/books/want-to-read
Used to render forms in OpenLibrary (please help document me!) Some examples:
-
Search at top of subjects page
-
the edit a work page
Undocumented component.
Used in openlibrary/templates/stats/readinglog.html
Example url: https://openlibrary.org/books/OL16180205M/Harry_Potter_and_the_Sorcerer's_Stone
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
The header bar appears at the top of every page.
Can be displayed on any page via JS to report feedback to a user after some form has been posted.
The footer appears at the top of every page.
Contains: #SearchResultItem, #widgetbox and #LinkBox
e.g. https://openlibrary.org/account/books/want-to-read
Shows up when you search from the header
A tab component. See author page for an example.
Can be found on the home page. Graph rendered via an HTML canvas.
A mega component which puts together various other components. Appears on book page
Seen on lists page.
Seen on lists page.
On works page and books pages:
[pictured: dropit tool]
Appears on book page. I don't believe it appears anywhere else (??)
The dropper is an enhanced substitution select element. At time of writing it does not work without JavaScript (see #1147).
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:
Radio buttons to toggle between different 3 different options
Seen - https://openlibrary.org/search , https://openlibrary.org/search?q=harry+potter
Appears on books page.
Definition markup can be used to generate a definition list See https://www.w3.org/MarkUp/html3/deflists.html
Shown when you click the Droppercomponent.
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.
Appears at the top of book pages. Will probably be merged in future with another component once identified.
Visit http://openlibrary.org/books/add incognito. Styled using #noLogin Similar styles exist (with different iconography) for #preMerge, #postMerge, #errorMerge
See also FlashMessage
Seen on http://localhost:8080/people/openlibrary7774?m=edit
When editing a profile page, and clicking the link button in the wmd button bar this overlay shows. JavaScript is required.
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.
A PageHeadingSearchBox must contain a searchInsideForm
Other examples:
Deprecated, but in use when removing lists on books pages. See also colorbox
Used when loading the carousel for changing covers for a book. Possibly reusable for other things?
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.
