Never Play Matchmaker

    @visa/keyboard-instructions
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.3 • Public • Published

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


    Keywords

    none

    Install

    npm i @visa/keyboard-instructions

    DownloadsWeekly Downloads

    11

    Version

    1.2.3

    License

    SEE LICENCE IN LICENSE

    Unpacked Size

    7.46 MB

    Total Files

    61

    Last publish

    Collaborators

    • stephmod
    • chris-demartini
    • mnojima