@mands/mns-fe-pattern-library

FESK Pattern Library

Welcome to the FESK Pattern Library. This npm module is designed to allow consumers to easily include M&S styles and layouts through elements, components, modules and templates in their projects. To contribute, see the guide below:

• Contribution Guide

• Installation and usage
• Style guide usage
• Major Version Upgrades
  • Upgrading the Version
  • Addressing Breaking Changes
• Documents
• Contacts
• Development

Installation and usage

To install the module:

npm install @mands/mns-fe-pattern-library

In order for the project to use the styles, include sassPath config in your build config file. For example, if you are using webpack add the following to your webpack.config.js

const patternLibrary = require('@mands/mns-fe-pattern-library');

[{
    loader: 'sass-loader',
    options: {
        outputStyle: 'expanded',
        sourceMap: true,
        sourceMapContents: true,
        includePaths: [patternLibrary.sassPath]
    }
}]

In order for the project to use the icons, install the svg-spritemap-webpack-plugin to your project as a dev dependency and add the following to your webpack.config.js plugins array:

const SvgSpritemapWebpackPlugin = require('svg-spritemap-webpack-plugin');

[   
new SvgSpritemapWebpackPlugin('node_modules/@mands/mns-fe-pattern-library/icons/**/*.svg', {
             output: {
                 filename: 'images/spritemap-[contenthash].svg'
             }
         })
]

Please consult the official docs on webpack plugins for more info on where to add plugins within the webpack configuration.

To implement specific parts of the pattern library visit FESK documentation portal for more detailed implementation information.

Style guide usage

The style guide is purely a SASS library to provide global styling for:

• accessibility
• colors
• grid
• iconography
• normalization
• typography
• utilities

These are all located in lib/mns-fe-styles and as lib is set as a sass path you can @import parts of this using mns-fe-styles as the first part of the path. e.g @import 'mns-fe-styles/colors'. You can also import everything using @import 'mns-fe-styles/all'. It is important that you only import parts of the style guide styles once in your application otherwise you will get duplication in your CSS output.

Major Version Upgrades

Whilst we endeavour to deploy frequent, atomised updates to the Pattern Library, it is sometimes necessary (when updates have a large amount of interdependence) to bundle large releases. In these cases they will have some breaking elements by nature, as such you will need to follow the steps outlined here to ensure you are both:

• aligned to the new PL release; and
• recovered from any breaking changes that affect you.

This is likely to be substantial work, but is both mandatory and necessary for us to stay up-to-date and aligned with design.

Upgrading the Version

In the package.json, specify the version you want to update to (within the dependencies section):

"@mands/mns-fe-pattern-library": "8.0.0",

Perform an install of all node modules the project is dependent on:

npm i

This will update the Pattern Library package to the version you have specified.

Addressing Breaking Changes

The Latest Version's CHANGELOG

After the above has been performed, you will need to run any visual and regression testing you have in place, fixing any discrepancies you find.

You will also need to perform manual testing of your app to ensure the same.

Documents

• fesk-documentation
• engineering-principles

Contacts

• Email: [e-mail]
• Slack: #front_end_starter_kit
• Jira: https://jira.devops.mnscorp.net/projects/FESK

Development

To work on the Pattern Library and to create, update or develop patterns we provide details of our recommended setup and in the Pattern Library README and the CONTRIBUTING guidelines.