-
Notifications
You must be signed in to change notification settings - Fork 11
Components
AlertBox is a black information snackbar for purpose of giving important information to user. For example issues with service etc.
Accepted props are
| Parameter | Default | Type | Description |
|---|---|---|---|
| title | null | required - node | Title text for alert box |
| text | null | required - node | Text content for alert box |
BackButton is a simple button based on MUIIconButton that takes user back to previous page or to home view.
BackButton should always be a link since it takes user to previous page and moving user to completely new point in site.
| Parameter | Default | Type | Description |
|---|---|---|---|
| ariaLabel | null | string | Text for screen readers passed to button as aria-label |
| className | '' | string | Class texts passed to button |
| onClick | null | function | OnClick function for button element |
| variant | null | 'container', 'icon', null | Variant for BackButton. container makes the button have wrapping text container. icon makes the button an icon without accompanying text. Leaving this out gives a basic rectangle shaped button |
| srHidden | false | bool | Tells if button should be hidden from screen readers |
| focusVisibleClassName | null | string | Only for Icon variant Class name passed to IconButton when button is focused |
Basic content wrapper with margin and padding extended from theme
| Parameter | Default | Type | Description |
|---|---|---|---|
| margin | false | boolean | Set true for margin (Setting paper option to true will also add margin) |
| noMargin | false | boolean | Option to set margin to 0 overrides margin and paper options |
| paper | false | boolean | Set true if wrapper component should use MUIPaper component |
| text | false | boolean | Set true for text content stylings (text-align: left) |
| title | null | string | Title text for content if required |
| titleComponent | h3 | string | Prop for title MUITypography component should use one of the following (h1,h2,h3,h4,h5,h6) |
Titled text component for rendering titled text data.
When using DescriptionText component make sure to set correct heading level with titleComponent prop. Title should be in correct semantic relation. If this content is part of a parent heading of h3 use h4 to keep semantic cohesion.
If description text contains HTML make sure elements work well with screen readers.
| Parameter | Default | Type | Description |
|---|---|---|---|
| description | null | required - string | Text to be rendered as text content can be HTML if html prop is set true |
| html | false | boolean | Option to set description content as HTML using dangerouslySetInnerHTML attribute of MUITypography. |
| title | null | required - node | Renderable react element for title |
| titleComponent | null | required - h1, h2, h3, h4, h5, h6
|
Prop for title MUITypography component should use one of the following (h1,h2,h3,h4,h5,h6) |
Drawer menu for mobile.
Component for showing search suggestion list. Used in search view to give new search suggestions for users.
Updated: 22.12.2020 PaginatedList is a list utilizing ResultList component with sliced data based on pagination.
| Parameter | Type | Default | Description |
|---|---|---|---|
| beforePagination | node | null | Element to be place before pagination element |
| customComponent | function | null | Function that is directly passed to ResultList. Read ResultList documentation |
| data | required - array | null | Array of data to be listed |
| id | required - string | null | String paginatedList-${id} to be passed to ResultList listId. Read ResultList documentation |
| itemsPerPage | required - number | 10 | Defined number of items rendered per page |
| srTitle | string | null | Will be used to generate screen reader text element which is passed as beforeList prop to ResultList. For example "Service Locations" would then give screen readers a text "Service Locations page 1 out of 5" which is read before list or on page change. |
| title | string | null | String to be passed to ResultItem title prop |
| titleComponent | required - h1, h2, h3, h4, h5, h6
|
null | TitleComponent to be passed to ResultList. Read ResultList documentation |
Result list is a list container that uses MUIList and renders data in a list format. Result list has a title text and result count as header. By default this component can read data with object_types: unit, service, and address. Using customComponent prop you can set your own list item to be rendered
Title text and result count should be read as single line with screen reader.
| Parameter | Type | Default | Description |
|---|---|---|---|
| beforeList | node | null | Component to be rendered just before list of elements. |
| customComponent | function | null | Custom component is a function that receives data item as parameter and returns JSX component to be rendered. |
| data | required - array | null | Array of data objects for rendering |
| listId | required - string | null | String id for list element to |
| resultCount | number | null | Result count number used to render info about total data count |
| title | string | null | Title text that is shown with result count |
| titleComponent | required - h1, h2, h3, h4, h5, h6
|
null | Prop for title MUITypography component |
TitledList is a list that wraps any MUIListItems to a MUIList component. This list has a title and subtitle text side by side. You can add button to the end of the list.
| Parameter | Type | Default | Description |
|---|---|---|---|
| buttonID | string | null | ID for button element if |
| buttonMessageID | string | null | Button message id used by intl to figure which translated text to use. Required with onButtonClick to show button |
| subtitle | node | null | Subtitle element for rendering |
| title | required - node | null | Title element for rendering |
| divider | boolean | false | Should divider element be placed between title and list |
| loading | boolean | false | Used to show loading text |
| onButtonClick | function | null | Function to be run on button click. Required with buttonMessageID to show button |
Updated: 05.05.2020
List element that utilizes SimpleListItem.
| Parameter | Type | Default | Description |
|---|---|---|---|
| address | required - object | null | Address object from API for rendering component |
| selected | boolean | false | Prop passed to SimpleListItem |
| className | string | null | Class text for element |
Updated: 05.05.2020
List element that utilizes ResultItem and renders list element based on event data given.
Element should be considered link by screen readers since it takes user to another view.
| Parameter | Type | Default | Description |
|---|---|---|---|
| event | required - object | null | Event object from API for rendering component |
Updated: 04.05.2020
ResultItem is a base component used by many other list item components.
For screen readers this item is read as a link(<a>-element). ResultItem combines all the texts and presents them to screen reader using single srOnly element for screen reader. Visually, all text elements are separate and hidden from screen reader. Screen reader is meant to ignore divider elements from list count.
| Parameter | Type | Default | Description |
|---|---|---|---|
| bottomHighlight | boolean | false | Defines how bottomText will be highlighted with boxed element |
| bottomText | string | null | Bottom text |
| extendedClasses | |||
| icon | node | null | Icon for element |
| onClick | function | null | Click and keydown (run on enter or space) event for list item element. |
| subtitle | string | null | Subtitle text for element |
| title | required - string | null | Title text for element |
| distance | object | null | Distance object with text and srText used to render distance text for element. |
| divider | boolean | true | Define if this element should use divider below itself |
| role | string | link | Role prop passed to MUIListItem element |
| srLabel | string | null | Extra screen reader only text passed to srOnly element |
| selected | boolean | false | Determine if element is selected. Prop passed to MUIListItem element |
| padded | boolean | Determine if element should have padding |
Updated: 05.05.2020
ServiceItem is a component that represents a service. ServiceItem utilizes SimpleListItem component for rendering element.
Currently we have 2 ways we show services in lists. Firstly is search result in which case elements are considered links and should have required aria attributes to show screen readers it's a link. Second way is showing unit's services in which case this element is used to just represent data. In this case element should not be considered a link and should represent ordinary list item.
| Parameter | Type | Default | Description |
|---|---|---|---|
| service | object | null | Service data object to be rendered |
| link | boolean | true | Defines if element should be considered a link that takes user to service view |
Updated: 05.05.2020
Basic list item used to create simple single line text or link element.
If list item element is interactive make sure it has related role and aria-attributes. For example links should contain role link
| Parameter | Type | Default | Description |
|---|---|---|---|
| className | string | null | Class for element |
| button | boolean | false | |
| text | required - string | null | Text content for element |
| srText | string | null | Additional screen reader only text read with text content |
| link | boolean | false | Defines if element should act like a link by adding role and stylings |
| icon | node | null | Icon element for list item |
| handleItemClick | function | null | Function for clicking the item |
| role | string | null | Optional role for element |
| divider | boolean | false | Should element render divider after it |
| selected | boolean | false | Prop passed to MUIListItem to indicate selected element |
Updated: 05.05.2020
SuggestionItem is a component used for representing search suggestions to user. Utilizes MUIListItem component for rendering.
Element should have role link.
| Parameter | Type | Default | Description |
|---|---|---|---|
| text | required - node | null | Text content for element |
| icon | node | null | Icon for element |
| handleArrowClick | function | null | Function run on arrow click |
| handleItemClick | function | null | Function run when element is clicked |
| divider | boolean | false | Defines if divider should be rendered after list element |
| selected | boolean | false | Prop passed to MUIListItem to indicate selected element |
| subtitle | string | null | Text presented as subtitle |
| query | string | null | Text to indicate which part of text prop is to be bolded |
Updated: 05.05.2020
UnitItem is a component that represents a unit to user. It is a list item that takes the user to unit page and displays relative unit data such as name, distance and accessibility information of the unit. UnitItem uses ResultItem to create the base component for itself.
| Parameter | Type | Default | Description |
|---|---|---|---|
| unit | object | null | Unit data object to be rendered |
| onClick | function | null | Function for onClick event that replaces the base functionality of moving user to unit view |
| padded | boolean | false | Defines if element should have padding |
Loader component shows loading bar with appropriate text.
| Parameter | Type | Default | Description |
|---|---|---|---|
| text | string | null | Text shown to user on top of loading bar |
| progress | required - number | 0 | Percentage number (1-100) for loading bar |
Pagination component for handling paginated list pages navigation.
Page number elements are considered links since we have decided to move user to start of the list when page is changed. Number elements should also include more descriptive text for screen readers since numbers alone are not informative enough.
Selected page number element should be disabled and tabindex set to -1 to prevent tab functionality.
| Parameter | Type | Default | Description |
|---|---|---|---|
| current | required - number | null | Page number of currently selected page |
| handlePageChange | required - function | null | Function to handle page changing logic |
| maxShownPages | number | 7 | Maximum shown pages in pagination component. Pages after this number will be hidden until user selectes deeper page. |
| pageCount | required - number | null | Total page count |
PaperButton is a button component meant for highlighting button with elevation.
| Parameter | Type | Default | Description |
|---|---|---|---|
| disabled | boolean | false | Sets button to disabled |
| icon | node | null | Icon element for button |
| link | boolean | false | Sets button to be considered link for screen readers |
| onClick | function | null | Function to be run with onClick event |
| messageID | required - string | null | Intl message id string for getting translated text |
| subtitleID | string | null | Intl message id string for getting translated text |
ResultOrderer component handles order in which getOrderedData selector sorts data.
Make sure select options are clear descriptive texts.
| Parameter | Type | Default | Description |
|---|---|---|---|
| initialValue | 'match-desc', 'alphabetical-desc', 'alphabetical-asc', 'accessibility-desc', 'distance-asc' | ||
| null | Using initialValue you can set initial value for ordering | ||
| disabled | boolean | false | Defines if select element should be disabled |
SearchBar is the main element for searching information.
Search suggestion implementation requires input to be a combobox. This indicates user that element has extra content related to input. Element should also change aria-haspopup value based on if dropdown elements are shown.
Input should not have placeholder because the text doesn't have good enough contrast. And with good enough contrast it can confuse user to mistakenly think placeholder text is actual input text. We decided to move informative "placeholder" texts out of input element itself.
| Parameter | Type | Default | Description |
|---|---|---|---|
| background |
default, none
|
default |
Background stylings variation. By default background is using theme's primary color. Setting none makes background transparent |
| className | string | null | Class string to be passed to root element |
| header | boolean | false | Define if header text should be shown to user |
| hideBackButton | boolean | false | Define if back button should be hidden |
| initialValue | string | null | Initial text for SearchBar. Used if not previous search exists when component is called |
| isSticky | number | null | Define if element should be a sticky element and sets top value for element with this number. |
| margin | boolean | false | Define if element should have extra margin |
UnitIcon is an icon components that handles retrieval of right icon based on given unit and current accessibility settings. Icons come in 3 colors: default, shortcomings, and noInfo.
- unit - object - Unit data object for figuring out color based on accessibility shortcomings
ServiceMapButton is a basic button component that utilizes MUIButtonBase component as it's template.
Button text should be informative and have a instructive verb to describe it's action. Text can be improved and expanded for screen readers with aria-label attribute. Visible text can't be too long, longer text must be in aria-label and it should include visible text as part of the string if possible.
By default ServiceMapButton has a role button. Use role link if button takes user to another point in site or changes the current content.
Accepted props are
| Parameter | Default | Type | Description |
|---|---|---|---|
| aria-label | null | string | Aria label text for screen readers |
| className | null | string | Class string passed to root component |
| small | false | boolean | If small is set to true component inserts stylings for small button |
| color | default | primary, secondary, default | Allows change of button theme color based on theme |
| icon | null | node | Icon element for button |
| messageID | null | string | React intl message id for getting translated text |
| onClick | null | function | Click event |
| margin | false | boolean | Adds margins for button element if set true |
| style | null | object | JSS style object for ButtonBase component |
| role | required - null | link, button | Role for button element |
Injected props are the following
classes,
intl,
Rest of the arguments are passed to MUIButtonBase component directly. And child conetn is passed to MUIButtonBase content.
Settings dialog component that allows user to change settings.
Settings element is considered a dialog and should imitate a dialog. This means focus should never leave this element and should loop back to start. When closed focus should also move back to element which opened Settings dialog.
Snackbar should not have close button since it confused users to think snackbar close would leave settings dialog.
Settings should have aria-live dynamic text element for giving user information about the state current operation.
| Parameter | Type | Default | Description |
|---|---|---|---|
| isMobile | boolean | false | Define if rendering should consider element to be in mobile mode |
SettingsInfo is a component that shows user currently selected settings. SettingsInfo renders information in rows of 4. Each element includes logo and text. Component also has a link to settings if user has to change anything
Updated: 22.12.2020
| Parameter | Type | Default | Description |
|---|---|---|---|
| data | required - array | null | Array of tab objects for rendering tabs and related content |
| focusClass | string | null | Class name for focus element. Requires both focusClass and focusElement to do anything |
| focusText | string | null | Focus element text. Requires both focusClass and focusElement to do anything |
| headerComponents | node | null | Extra elements to be rendered in header |
| Parameter | Type | Default | Description |
|---|---|---|---|
| ariaLabel | string | null | Aria label string for Tab element |
| beforePagination | node | null | Element to be rendered before pagination element |
| component | node | null | Component for content |
| title | string | null | Title text for shown in tab |
| data | array | null | Array of objects to be rendered into list |
| noOrderer | boolean | null | Define if ResultOrderer should be hidden |
Updated: 11.05.2020
TitleBar is a main title component for each view.
TitleBar title component should be required prop so developers have to specifically set it correctly based on view context.
| Parameter | Type | Default | Description |
|---|---|---|---|
| ariaHidden | boolean | false | Defines if title should have aria-hidden attribute |
| backButton | boolean | false | Defines if back button should be shown |
| backButtonOnClick | function | null | Allow overridden custom functionality to be set for back button |
| backButtonSrText | string | null | Allow custom screen reader text to be set for back button |
| className | string | null | Class name to be passed to root element |
| distance | string | null | Distance text to be shown next to title |
| title | required - node | null | Title text element |
| titleComponent | required - h1, h2, h3, h4, h5, h6
|
null | Prop for title MUITypography component |
| sticky | boolean | false | Define if TitleBar should be considered a sticky element |
Updated: 11.05.2020
TopBar is component used in layouts to render top bar with language and settings options.
Desktop settings buttons should open a settings dialog while moving focus to start of dialog. Focus should also return back to related button on dialog close.
Contrast change should change map type and element colors.
Top bar should have anchor link for screen readers to skip to content right after title text.
| Parameter | Type | Default | Description |
|---|---|---|---|
| i18n | object | null | Custom i18n class object for language validation |
| settingsOpen |
citySettings, mapSettings, accessibilitySettings
|
null | String for figuring out opened settings value |
| smallScreen | required - boolean | null | Define if top bar should small screen mode and related components |
BoldedText component renders string and bolds part of the text based on given arguments.
| Parameter | Default | Type | Description |
|---|---|---|---|
| text | null | required - string | Text scope for inspection |
| shouldBeBold | null | string | Text that should be bolded within scope text |
DesktopComponent component is a wrapper component that renders only on non small screen widths. This uses media query to calculate minimum width based on configured mobileUiBreakpoint value.
MobileComponent component is a wrapper component that renders only on specified small screen widths. This uses media query to figure out maximum width based on configured mobileUiBreakpoint value.
Navigator is a helper component made to solve problem with react-router history not having proper middleware to handle redirection on history events. Navigator sets reference to itself into redux as navigator. You can access it by connecting your component to redux and accessing navigator in store.
- generatePath - (target, data) - Accepts target (string) parameter that is equivalent to a key in paths config and data parameter related to view and specified in paths config.
- goBack - () - Goes back in browser history if breadcrumb has entries otherwise redirect to home. Breadcrumb is emptied on page load
- push - (target, data) - Push current location in history. Target can either be location object used by react router's history or a string representing a key in path config. Data parameter is related to view and specified in paths config
- replace - (target, data) - Replace current location in history. Target can either be location object used by react router's history or a string representing a key in path config. Data parameter is related to view and specified in paths config