Design Pattern Library - internetarchive/openlibrary GitHub Wiki

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 called Decorated-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 screenshot of 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:

1. Open a new window to http://github.com/internetarchive/iaux/issues/new
2. The Issues UI does allow you to drag a image into the comment section of the issue!
3. When you drag and drop your screenshot into the issue, it should appear as something like ![Screen Shot 2019-03-25 at 10 50 00AMPDT](https://user-images.githubusercontent.com/978325/54942862-3aaad280-4eed-11e9-8f53-04e734db45ce.png)
4. 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>

Example Example 2

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:

• https://openlibrary.org/account/loans

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.

example

Contains: #SearchResultItem, #widgetbox and #LinkBox

example

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:

• http://openlibrary.org/lists

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.