@pearson-ux/alert/README.md

Alert web component

# Project Documentation

This document provides information on how to install dependencies, edit token styles, use the component, and create a new release of the project.

## Installing Dependencies

Before you begin, make sure you have the following installed:

- **Node.js and npm**: Ensure Node.js and npm are installed on your machine. You can verify this by running:

  ```bash
  node -v
  npm -v
  ```

- **npm Account**: Ensure you have an npm account and are logged in. You can log in using:

  ```bash
  npm login
  ```

Once these prerequisites are met, install the project dependencies by running:

```bash
npm install
```

This command will install all necessary packages as defined in the `package.json` file.

## Editing Token Styles

The `pearson-accordion` component uses token styles that are defined in the `@pearson-ux/master-tokens` package. However, customizations and overrides are done via the `customTokens.js` file.

To modify these styles:

1. Open the `customTokens.js` file located in the project directory.
2. The `getCustomTokens` function returns an object containing the styles used by the component. You can modify the values in this object to change the appearance of the component.

### Example of `customTokens.js`:

```javascript
export const getCustomTokens = (tokenModule = {}, isDarkMode = false) => {
    return {
        colorPrimary: isDarkMode
            ? tokenModule.TokenColorUi04
            : tokenModule.TokenColorUiBackgroundDark,
        colorSecondary: isDarkMode
            ? tokenModule.TokenColorIconLinkInverse
            : tokenModule.TokenColorIconLinkInverse,
        colorBackground: isDarkMode
            ? tokenModule.TokenColorUi04
            : tokenModule.TokenColorUi02,
        colorText: isDarkMode
            ? tokenModule.TokenColorTextPrimaryInverse
            : tokenModule.TokenColorTextPrimary,
        colorFocusBorder: tokenModule.TokenColorInteractiveFocus,
        colorSvgFill: isDarkMode
            ? tokenModule.TokenColorTextPrimaryInverse
            : tokenModule.TokenColorTextPrimary,
        // tokens below not found in master-tokens
        spacingSmall:  '8px',
        spacingMedium: '16px',
        spacingLarge:  '24px',
        fontFamilyOpenSans: `'Open Sans', sans-serif`,
        fontWeightNormal: 400,
        lineHeightSmall: '25.6px',
        lineHeightMedium: '26.4px',
        lineHeightLarge: '28px',
        accordionLabelFontSize: '22px',
        accordionLabelFontWeight: 400,
        accordionLabelLineHeight: '26.4px',
        accordionCopyFontSize: '16px',
        accordionCopyFontWeight: 400,
        accordionCopyLineHeight: '25.6px',
        accordionBoxShadow: '2px 2px 3px 0px rgba(218, 218, 218, 0.5)',
    };
};
```

By modifying the properties in the `customTokens.js` file, you can control the styling of the `pearson-accordion` component.

## Usage

The `pearson-accordion` component allows you to create an accordion-style interface with different themes. The component requires a `theme` property to be specified, with three available themes to choose from:

- **ELL**
- **p-com**
- **p-plus**

### Example Usage:

```html
<pearson-accordion theme="p-plus">
    <div label="First Item">
        Content for item 1.
    </div>
    <div label="Second Item">
        Content for item 2.
    </div>
    <div label="Third Item">
        Content for item 3.
    </div>
    <!-- Add more items as needed -->
</pearson-accordion>
```

### Changing the Label Title

Each accordion item can have a custom label by using the `label` attribute on the child `div` elements. If the `label` attribute is not provided, a default label of "Accordion label" will be used.

### Example:

```html
<pearson-accordion theme="p-plus">
    <div label="Custom Label 1">
        Content for item 1.
    </div>
    <div label="Custom Label 2">
        Content for item 2.
    </div>
    <div label="Custom Label 3">
        Content for item 3.
    </div>
</pearson-accordion>
```

In this example, the labels of the accordion items will be "Custom Label 1", "Custom Label 2", and "Custom Label 3".

## Steps to Release

### Update the Version Number

The release process starts by updating the version number in `package.json`. This is done automatically by the release script. You must specify the new version number as an argument when running the script.

Example: To release version `1.0.1`, run:

```bash
node release.js 1.0.1
```

### Run the Release Script

The release script will:

- Update the `package.json` version.
- Create a `release` directory.
- Modify and copy necessary files (`list.js`, `customTokens.js`, `README.md`, `tokenHelper.js`, `package.json`).
- Update paths in `list.js` and `tokenHelper.js`.
- Copy the `@pearson-ux` directory from `node_modules`.
- Publish the `release` directory to npm.
- Clean up the `release` directory after publishing.

Example command:

```bash
node release.js 1.0.1
```

### Publish the Release to npm

The script will automatically publish the contents of the `release` directory to npm. Ensure you are logged in to npm before running the script.

If you need to manually publish, you can run:

```bash
cd release
npm publish
```

### Clean Up

After a successful release, the `release` directory is automatically deleted by the script. If needed, you can manually delete it using:

```bash
rm -rf release
```

## Troubleshooting

- **npm publish failed**:
  - If the `npm publish` command fails, check the error message for details. Common issues include incorrect npm credentials or network problems.

- **Version Conflict**:
  - If the specified version already exists on npm, you will need to increment the version number and try again.

## Contributing

Please follow the established guidelines for contributing to the project. Before creating a pull request, ensure all tests pass and the code is formatted correctly.

## License

This project is licensed under the [MIT License](LICENSE).