@visa/keyboard-instructions NPM

@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}
/>

# 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.