z-info

A quick message box component for your web application.

Table of contents

• z-info
• Table of contents
• Install
  • Import as HTML/CSS component
  • Import as Stateless Functional Component (SFC)
• How to use
  • CSS component
  • Stateless Functional Component
• Theming
• License

Install

The package is available to download through npm:

npm install z-info --save

Import as HTML/CSS component

The simple case

The package will be located inside the node_modules folder, you can import it into the HTML document as follows:

<link rel="stylesheet" href="node_modules/z-info/dist/style.css">

When bundling an web app

For bundlers that support CSS, like Webpack, you can use it like this:

require('z-info/dist/style.css');

Import as a Stateless Functional Component (SFC)

The package does not include the renderer, you can use any renderer that supports SFCs. You could use React, Preact, Inferno, etc.

Notice: This package contains CSS styling, you may need a bundler that's capable of requiring CSS files like Webpack with css-loader.

Once you have chosen the renderer you can include the package in your project as follows:

// Assuming the React renderer is being used
const React = require('react');
const render = require('react-dom').render;

// Passing the render function when importing
const ZInfo = require('z-info')(React.createElement);

// Render it on page, using JSX here :)
render(<ZInfo title="Title" />, document.body);

How to use

CSS component

Just add the HTML structure and CSS classes to reproduce the UI component.

Class hierarchy

| Recommended HTML tags | Parent | Class | Description | Type | | ---------------------------------- | --------- | -------------------- | ---------------------------------------------- | -------- | | div, section | root | .z-info | Root container | Block | | Any containing .z-info | root | .z-info--secondary | Change the border color to the secondary color | Modifier | | Any containing .z-info | root | .z-info--success | Change the border color to green | Modifier | | Any containing .z-info | root | .z-info--warning | Change the border color to yellow | Modifier | | Any containing .z-info | root | .z-info--error | Change the border color to red | Modifier | | Any containing .z-info | root | .z-info--danger | Change the border color to a lighter red | Modifier | | h1, h2, h3, h4, h5, h6 | .z-info | .z-info__title | The title of the info box | Element | | p, span | .z-info | .z-info__message | Optional additional information | Element |

Full working example:

<div class="z-info">
  <h1 class="z-info__title">Hello!</h1>
  <p class="z-info__message">More info</p>
</div>

Stateless Functional Component

Render the HTML by using the SFC and passing props.

Supported Props

| Prop name | Expected Type | Description | | ----------- | ------------- | ------------------------------------------------------------- | | title | string | The title of the message box | | message | string | Optional additional info for the message box | | secondary | boolean | Set to true to change the border color to the secondary color | | success | boolean | Set to true to change the border color to green | | warning | boolean | Set to true to change the border color to yellow | | error | boolean | Set to true to change the border color to red | | danger | boolean | Set to true to change the border color to a lighter red |

Full example (JSX):

<ZInfo title="Title" message="More info" />

Theming

Since 1.2.0, z-info supports theming through CSS Variables.

List of variables used:

| Variable | Expected type | Description | | ----------------- | ------------- | ---------------------------------------------- | | --primary-color | color | The primary border-color for the message box | | --secondary-color | color | The secondary border-color for the message box | | --success-color | color | The border-color for successful message boxes | | --warning-color | color | The border-color for warning message boxes | | --danger-color | color | The border-color for danger message boxes | | --error-color | color | The border-color for error message boxes |

LICENSE

MIT