Coder Social home page Coder Social logo

stripes-components's Introduction

stripes-components

Copyright (C) 2016-2018 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.

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
<AppIcon> doc design
<Avatar> doc data-display
<Badge> doc data-display, design
<Button> doc control
<Callout> doc user-feedback
<Checkbox> control
<Datepicker> doc control
<Dropdown> doc control
<DropdownMenu> control
<EmptyMessage> doc structure
<EntrySelector> control
<ErrorBoundary> user-feedback
<FilterGroups> doc control
<FilterPane> doc structure
<FilterPaneSearch> doc obsolete
<FocusLink> doc accessibility
<Headline> doc structure
<HotKeys> doc utility
<Icon> doc design
<IconButton> doc control
<IfInterface> doc utility
<IfPermission> doc utility
<KeyValue> doc data-display
<Layer> doc structure
<Layout> structure
<LayoutBox> structure
<LayoutGrid> doc structure
<LayoutHeader> doc structure
<List> doc data-display
<MenuItem> doc control
<MetaSection> doc data-display
<Modal> doc container
<MultiColumnList> doc data-display
<NavList> doc control
<NavListSection> control
<Pane> doc structure
<PaneHeader> structure
<PaneMenu> control
<Paneset> doc structure
<PaneSubheader> doc structure
<Pluggable> utility
<Popover> doc control
<RadioButton> control
<RadioButtonGroup> doc control
<ReduxFormField> doc control
<SegmentedControl> doc control
<Select> doc control
<Selection> doc control
<Settings> doc prefab
<SRStatus> doc accessibility, user-feedback
<AddressFieldGroup> doc control, prefab
<ConfirmationModal> doc control, prefab
<EditableList> doc control, prefab
<InfoPopover> doc control, prefab
<RepeatableField> doc control, prefab
<SearchField> doc control, prefab
<TabButton> control
<TextArea> control
<TextField> control
<Timepicker> doc control

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

Testing

Component tests are automated browser tests powered by karma and written using mocha syntax. See TESTING.md for more information.

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

stripes-components's People

Contributors

johnc-80 avatar rasmuswoelk avatar miketaylor avatar zburke avatar mkuklis avatar dcrossleyau avatar doytch avatar tg-ebsco avatar cherewaty avatar rjruizes avatar baroquem avatar adi-mat avatar wwelling avatar skomorokh avatar funkymalc avatar jeremythuff avatar szkata avatar samkeathley avatar cowboyd avatar mbstacy avatar sduvvuri-ebsco avatar filipjakobsen avatar id-jenkins avatar rladdusaw avatar elrickvm avatar ibendermonguz avatar nielserik avatar taras avatar robdel12 avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.