node package manager
Orgs are free. Discover, share, and reuse code in your team. Create a free org »

@gov.au/callout

@gov.au/callout

Use callout to notify and alert users of important snippets of information.

Contents


Install

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

⬆ back to top


Usage

⬆ back to top


React

Usage:

import { Callout, CalloutCalendar } from './callout.js';
 
<Callout description="Description for this callout">
    Callout content
</Callout>
 
<CalloutCalendar
    description="description for this callout"
    datetime="2017-01-01T00:00:00+00:00"
    time="Sunday 32 Jun"
    subline="Your next appointment is"
    name="Talk to boss"
/>

All props:

<Callout
    description="Description for this callout"  {/* The label is a must for screen readers */}
>
    Callout content
</Callout>
 
<CalloutCalendar
    description="description for this callout"  {/* The label is a must for screen readers */}
    datetime="2017-01-01T00:00:00+00:00"        {/* The date time string */}
    time="Sunday 32 Jun"                        {/* The same date but human readable */}
    subline="Your next appointment is"          {/* Your subline, optional */}
    name="Talk to boss"                         {/* The name of the event, optional */}
/>

For more details have a look at the usage example.

⬆ back to top


Dependency graph

callout
└─ core

⬆ back to top


Build

⬆ back to top


Tests

The visual test: http://uikit.apps.staging.digital.gov.au/packages/callout/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.1 - Fixed a11y contrast issue
  • v0.1.0 - 💥 Initial version

⬆ back to top


License

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

⬆ back to top

};