@nice-digital/nds-action-banner
TypeScript icon, indicating that this package has built-in type declarations

4.0.8 • Public • Published

@nice-digital/nds-action-banner

Action banner component for the NICE Design System

Installation

Install Node, and then:

npm i @nice-digital/nds-action-banner --save

Usage

React

Import the ActionBanner components from the package and use within JSX:

import React from "react";
import { ActionBanner } from "@nice-digital/nds-action-banner";

<ActionBanner title="A title">
	Some <a href="/test">body</a>
</ActionBanner>

<ActionBanner title="A title" variant="subtle">
	A subtle action banner
</ActionBanner>

import { Button } from "@nice-digital/nds-button";
<ActionBanner title="A title" cta={<Button>some text</Button>}>
	Some <a href="/test">body</a>
</ActionBanner>

<ActionBanner title="A title" onClosing={() => { console.log("Closing"); }}>
	Some <a href="/test">body</a>
</ActionBanner>

Note: The React component automatically imports the SCSS, so there's no need to import the SCSS directly yourself.

Props

children
  • Type: ReactNode

The body text of the action banner

title
  • Type: string

The title of the action banner

variant
  • Type: "default" | "subtle"
  • Default: "default"

The type of action banner.

cta
  • Type: React.ReactNode
  • Default: null

The main, call to action button.

onClosing
  • Type: function
  • Default: null

The callback function to be called when this action banner is closed. Leave blank to default to a non-closable banner.

className
  • Type: string

Any additional className will be merged on to the container.

SCSS

If you're not using React, then import the SCSS directly into your application by:

@forward '@nice-digital/nds-action-banner/scss/action-banner';

HTML

If you're not using React, then include the SCSS as above and use the HTML:

<section className="action-banner action-banner--subtle action-banner--closeable">
	<div className="action-banner__container">
		<div className="action-banner__inner">
			<div className="action-banner__text">
				<h2 className="action-banner__title">
					Title here
				</h2>
				<p className="action-banner__intro">
					Body here
				</p>
			</div>
			<div className="action-banner__actions">
				<a href="/test" class="btn">Some CTA</a>
			</div>
			<button type="button" className="action-banner__close">
					<span className="icon icon--remove" ara-hidden="true"></span>
					<span className="visually-hidden">Close and then put the title here</span>
				</button>
		</div>
	</div>
</section>

Readme

Keywords

Package Sidebar

Install

npm i @nice-digital/nds-action-banner

Weekly Downloads

86

Version

4.0.8

License

MIT

Unpacked Size

11.9 kB

Total Files

6

Last publish

Collaborators

  • wongcheming
  • johndavey72
  • barkertron
  • martingallagher1980
  • ditprogrammatic
  • ediblecode
  • josealmeida
  • mark-nice
  • nansenst
  • colin.mazurkiewicz
  • imranazad
  • eleanormollett