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:

  node -v
  npm -v

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

  npm login

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

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:

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:

<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:

<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:

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:

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:

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:

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.