Skip to content

folio-org/stripes-components

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

stripes-components

Copyright (C) 2016-2019 The Open Library Foundation

This software is distributed under the terms of the Apache License, Version 2.0. See the file "LICENSE" for more information.

Introduction

This is a library of React components and utility functions for use with the Stripes UI toolkit, part of the FOLIO project.

Storybook

A listing of our components with demonstrations and example usage can be found here: https://folio-org.github.io/stripes-components

Component categories

These are general descriptive categories that indicate the type of use cases that components serve. A component can have multiple categories associated with it.

Category Description
structure These are components that aid in the general structure/layout of your app's UI. They include generic containers and components that render structurally important HTML tags (<Headline>, for instance.)
control Components with the control category are form elements and other interactive widgets including <TextField>, <Button> and <Dropdown> - additionally, this category includes components that aid the functionality of other control components, such as the way <DropdownMenu> is used with <Dropdown>
data-display Data display components are used for display of dynamic content. These include <List> and <MultiColumnList>
design These components render <Icon>s and other prominent visual landmarks.
user-feedback These components are geared for making the user aware of happenings in the system. They include <Callout> and <SRStatus>.
accessibility Components with this category play an important role in developing accessible modules.
utility These components aid in interaction with the FOLIO system.
prefab These components are re-useable pre-constructed components that make re-use of other shared components. Useful constructions such as <AddressFieldGroup> and <EditableList> fall into this category.
obsolete Component has been replaced by better solution and is intended for removal in future releases.

Links to documentation of specific components and utilities

The following components are available in the lib directory.

Component doc categories
<Accordion> doc structure
<AdvancedSearch> doc control
<AutoSuggest> doc control
<Avatar> doc data-display
<Badge> doc data-display, design
<Button> doc control
<ButtonGroup> doc control
<Callout> doc user-feedback
<Card> doc structure
<Checkbox> doc control
<Col> doc structure
<Commander> doc utility
<ConfirmationModal> doc control, prefab
<ConflictDetectionBanner> doc user-feedback
<CountrySelection> control
<CurrencySelect> control
<Datepicker> doc control
<DateRangeWrapper> doc control
<Dropdown> doc control
<DropdownButton> doc control
<DropdownMenu> control
<EditableList> doc control, prefab
<Editor> doc control
<EmptyMessage> doc structure
<ErrorBoundary> doc user-feedback
<ErrorModal> doc user-feedback
<ExportCsv> doc control
<FilterControlGroup> control
<FilterGroups> doc control
<FilterPaneSearch> doc obsolete
<FocusLink> doc accessibility
<FormattedDate> data-display
<FormattedTime> data-display
<FormattedUTCDate> doc data-display
<FormField> doc control
<FormFieldArray> control
<Headline> doc structure
<Highlighter> doc utility
<HotKeys> doc utility
<Icon> doc design
<IconButton> doc control
<InfoPopover> doc control, prefab
<KeyboardShortcutsModal> doc utility
<KeyValue> doc data-display
<Label> doc control
<Layer> doc structure
<Layout> doc structure
<LayoutBox> structure
<LayoutGrid> doc structure
<LayoutHeader> doc structure
<List> doc data-display
<Loading> doc design
<LoadingPane> doc design
<LoadingView> doc design
<MenuItem> doc control
<MenuSection> doc control
<MessageBanner> doc user-feedback
<MetaSection> doc data-display
<Modal> doc container
<ModalFooter> doc container
<MultiColumnList> doc data-display
<MultiSelection> doc control
<NavList> doc control
<NavListItem> control
<NavListSection> control
<NoValue> doc accessibility
<Pane> doc structure
<PaneBackLink> doc control
<PaneCloseLink> doc control
<PaneFooter> doc structure
<PaneHeader> doc structure
<PaneHeaderIconButton> doc control
<PaneMenu> doc control
<Paneset> doc structure
<PaneSubheader> doc structure
<PasswordStrength> doc data-display
<Pluggable> utility
<Popover> doc control
<Popper> doc control
<RadioButton> doc control
<RadioButtonGroup> doc control
<RepeatableField> doc control, prefab
<Row> doc structure
<SearchField> doc control, prefab
<Select> doc control
<Selection> doc control
<Settings> doc prefab
<Spinner> design
<SRStatus> doc accessibility, user-feedback
<TextArea> control
<TextField> doc control
<TextLink> doc control
<Timepicker> doc control
<Tooltip> doc data-display

There are also various utility functions (as opposed to React components), which are documented separately.

Accessibility

  • Accessibility overview - general overview of some utilities that stripes-components provides.
  • Accessibility for developers - dev-specific primer for accessibility. More direct code/component reference - a great intro for those who are unfamiliar to accessibility.

Patterns

Useful recipes for UI patterns appearing in FOLIO modules.

Working with dates/times in UI-Modules

We provide a handful of components and utilities for date/time functionality.

  • Datepicker, Timepicker, DateRangeWrapper components - UI-widgets for accepting date/time input.
  • FormattedDate, FormattedUTCDate, FormattedTime - Cross-browser convenience components for displaying localized representations of system ISO8601 timestamps.
  • dateTimeUtils - A handful of utility functions for working with date/time code in application logic.
  • Hooks
    • useFormatDate - presentational date-formatting.
    • useFormatTime - presentational time-formatting.
    • useDynamicLocale - loading DayJS locale information within functional components (also available in component form, via DynamicLocaleRenderer).

Testing

Stripes Components' tests are automated browser tests powered by Karma and written using Mocha, Chai, and BigTest.

Component tests can be run by navigating to your stripes-components folder and running

yarn test

This will spin up Karma via stripes-cli and run all tests locally in the Chrome browser.

See our testing documentation for more information on writing tests.

FAQ

Check our Frequently asked questions for Module developers page

To be documented

XXX Say something about sharedStyles, global.css and variables.css.

Additional information

Some related documents:

See project STCOM (STripes COMponents) at the FOLIO issue tracker.

Other FOLIO Developer documentation is at dev.folio.org