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 [email protected]: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.