@justeat/f-alert

f-alert

Fozzie Alert Component

Usage

Installation

This package can be installed using npm or yarn:

yarn add @justeat/f-alert

npm install @justeat/f-alert

The package also has dependencies that need to be installed by consuming components/applications:

Dependency	Command to install	Styles to include
f-button	yarn add @justeat/f-button	import '@justeat/f-button/dist/f-button.css';

Vue Applications

You can import it in your Vue SFC like this (please note that styles have to be imported separately):

import FAlert from '@justeat/f-alert';
import '@justeat/f-alert/dist/f-alert.css';

export default {
    components: {
        FAlert
    }
}

If you are using Webpack, you can import the component dynamically to separate the f-alert bundle from the main bundle.client.js:

import '@justeat/f-alert/dist/f-alert.css';

export default {
    components: {
        ...
        FAlert: () => import(/* webpackChunkName: "f-alert" */ '@justeat/f-alert')
    }
}

Configuration

Props

f-alert has a number of props that allow you to customise its functionality.

The props that can be defined are as follows:

Prop	Type	Required	Default	Description
locale	String	No	``	Sets locale for I18n.
type	String	Yes	success	Sets the modifier theme for styling. Options: success, warning, info, danger.
heading	String	Yes	``	The title text of the alert
isDismissible	Boolean	No	false	Controls whether or not to display the alert close button.

CSS Classes

f-alert has its own styles which are scoped to the component using CSS modules to prevent conflicts with existing styles on the page.

Development

Start by cloning the repository and installing the required dependencies:

$ git clone [e-mail]:justeat/fozzie-components.git
$ cd fozzie-components
$ yarn

Change directory to the f-alert package:

$ cd packages/components/molecules/f-alert

Running storybook

Storybook can be used to develop new and existing components.

To start storybook:

Please ensure you are in the f-alert directory as outlined in the above instructions.

# cd to the storybook package
$ cd ../../../storybook

# Run storybook
$ yarn storybook:serve

This will build and serve storybook at http://localhost:8080.