@gov.au/callout

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

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@gov.au/callout
738913.0.33 years ago7 years agoMinified + gzip package size for @gov.au/callout in KB

Popular Searches

Readme

@gov.au/callout ============
Use callout to notify and alert users of important snippets of information.

Contents

----------------------------------------------------------------------------------------------------------------------------------------------------------------

Install

```shell yarn add @gov.au/callout ``` ```shell npm install @gov.au/callout ``` ā¬† back to top ----------------------------------------------------------------------------------------------------------------------------------------------------------------

Usage

ā¬† back to top ----------------------------------------------------------------------------------------------------------------------------------------------------------------

React

Usage: ```jsx import { AUcallout, AUcalloutCalendar } from './callout.js'; AUcallout content ``` All props: ```jsx The title is a must for screen readers /} 
level={ 2 }                                 {/* The tag level (<h1/> <h2/> etc), default: '1' */}
srOnlyTitle={ false }                       {/* Title is visible to screen readers only */}
attributeOptions                            {/* Any other attribute options */}
Callout content
title="description for this callout" {/* The title is a must for screen readers */} 
level={ 2 }                                 {/* The tag level (<h1/> <h2/> etc), default: '1' */}
srOnlyTitle={ true }                        {/* Title is visible to screen readers only */}
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 /} dark={ false } {/ A dark variation of the component /} /> ``` (šŸ’” additional props are spread onto the component) For more details have a look at the usage example. ā¬† back to top ----------------------------------------------------------------------------------------------------------------------------------------------------------------

Dependency graph

```shell callout ā””ā”€ core ``` ā¬† back to top ----------------------------------------------------------------------------------------------------------------------------------------------------------------

Tests

The visual test: https://auds.service.gov.au/packages/callout/tests/site/ ā¬† back to top ----------------------------------------------------------------------------------------------------------------------------------------------------------------

Release History

  • v3.0.3 - Update core package dependency to use the latest version
  • v3.0.2 - Remove --save-dev flag from readme instructions
  • v3.0.1 - Removed uikit references
  • v3.0.0 - Replace aria-label with a title
  • v2.1.0 - Remove margin-bottom, increase margin-top for paragraphs following callout
  • v2.0.8 - Update dependencies
  • v2.0.7 - Removing web pack dev server, updating dependencies
  • v2.0.6 - Fixed build scripts for Windows
  • v2.0.5 - Replace node-sass with sass
  • v2.0.4 - Change npm run watch browser-sync location
  • v2.0.3 - Update dependencies
  • v2.0.2 - Change homepage link
  • v2.0.1 - Fix dependencies
  • v2.0.0 - Change to focus colour and border/muted color mix
  • v1.0.0 - Moved to AU namespace, added new color themes and spacing
  • 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
};