node package manager
Loosely couple your services. Use Orgs to version and reuse your code. Create a free org »

@gov.au/keyword-list

@gov.au/keyword-list

A list style for emphasising parts of a list item, useful for repeating phrases across that list’s items.

Contents


Install

yarn add @gov.au/keyword-list
npm install @gov.au/keyword-list --save-dev

⬆ back to top


Usage

⬆ back to top


React

Usage:

import KeywordList from './keyword-list.js';
 
<KeywordList
    repeatedName='Department of'
    items={[
        {
            link: 'http://www.agriculture.gov.au/',
            name: 'Agriculture and Water Resources',
        },
        {
            link: 'https://www.communications.gov.au/',
            name: 'Communications and the Arts',
        },
        {
            link: 'https://www.finance.gov.au/',
            name: 'Finance',
        },
    ]}
/>

All props:

<KeywordList
    repeatedName="Department of"                  {/* The text That is repeated in each item */}
    items={[                                      {/* All items in a neat array */}
        {
            link: 'http://www.agriculture.gov.au/',   {/* The URL of this item, optional */}
            name: 'Agriculture and Water Resources',  {/* The name of the item */}
            onClick={ () => {} }                      {/* A function to execute when the link is clicked, optional */}
        },
    ]}
/>

For more details have a look at the usage example.

⬆ back to top


Dependency graph

keyword-list
├─ core
└─ link-list
   ├─ core
   └─ body
      └─ core

⬆ back to top


Build

⬆ back to top


Tests

The visual test: http://uikit.apps.staging.digital.gov.au/packages/keyword-list/tests/site/

⬆ back to top


Release History

  • v0.3.0 - Added pancake-react plugin, ES5 main file
  • v0.2.0 - Added react component
  • v0.1.0 - 💥 Initial version

⬆ back to top


License

Copyright (c) Commonwealth of Australia. Licensed under MIT.

⬆ back to top

};