Skip to content

Latest commit

 

History

History
86 lines (66 loc) · 4.61 KB

README.md

File metadata and controls

86 lines (66 loc) · 4.61 KB
Raw

@visa/keyboard-instructions

An image depicting an example of the default keyboard-instructions component 

<keyboard-instructions
  uniqueID={this.chartID}
  isCompact
  tableColumns={this.tableColumns}
  data={this.tableData}
  padding={this.padding}
  margin={this.margin}
  hidekeyboardInstructions={this.accessibility.hidekeyboardInstructionsButton}
/>

Jump To:
  1. Installation Steps
  2. Props Documentation

# Installation Steps

  • Using npm

    $ npm i @visa/keyboard-instructions

  • Using yarn

    $ yarn add @visa/keyboard-instructions

# Props Documentation


# Keyboard Instructions Props <>

The data-component expects to be utilized within a Visa Chart Component, we do some data preparation in each chart to try and map chart data into a structure that is meaningful for an accompanying keyboard instructions component. Properties for this component are documented below, but you should also refer to a Visa Chart Component to see detail on how this sub-component is leveraged.

Name Type Default Value(s) Description
margin object (custom type) IBoxModelType Expects the margin property to be passed from a visa chart components chart. This prop is used to determine button placement, when visible.
padding object (custom type) IBoxModelType Expects the padding property to be passed from a visa chart components chart. This prop is used to determine button placement, when visible.
isCompact boolean false Set to true by each visa chart component, renders a more compact version of the keyboard instructions component.
hidekeyboardInstructions boolean false If true, hides the keyboard instructions component button (but it is still available to screen reader users).
uniqueID string undefined ID used to identify chart (must be unique per keyboard instructions component), helpful for validation messages. A string must be passed.
tableColumns string[] undefined Populates the column headers of the table, in order.
data object[] undefined Populates the content/rows of the table, data needs to be aligned to tableColumns provided.
unitTest boolean false When set to true, adds testing attributes to the rendered keyboard-instructions components for ease of selection during unit testing.

IBoxModelType Definition

Name Type Default Value(s) Description
top number height * 0.01 Sets the top margin/padding for the chart container.
bottom number height * 0.01 Sets the bottom margin/padding for the chart container.
left number width * 0.01 Sets the top margin/padding for the chart container.
right number width * 0.01 Sets the top margin/padding for the chart container.