@episerver/ui-framework

UI Framework

This repository contains a react implementation of the components described in the Episerver design system.

Getting Started

Add @episerver/ui-framework as a dependency

yarn add @episerver/ui-framework

JavaScript

Import the components you need

import { XYZ } from "@episerver/ui-framework";

Where XYZ is one of the following components:

• Breadcrumb (Preview)
• Card
• Checkbox
• Chip
• ContentArea
• DataTable
• Dialog (Preview)
• EditableDropdownMenu
• ExposedDropdownMenu
• Grid
• Icon (multiple, named as SearchIcon)
• IconButton
• List
• Logo
• Menu
• RadioButton
• Search
• TabBar
• TextButton
• TextField

The components are under rapid development so their interfaces can change at any time. See the node_modules/@episerver/ui-framework/dist/bundle.d.ts you installed for the currently available exports.

CSS

In your entry point file, import the UI Framework CSS

import "@episerver/ui-framework/dist/main.css";

If you need specific scss files to extend, they are also available. This is the preferred method as it allows the use of the SASS variables within your own styles to maintain consistency. See SASS Setup below for a quickstart guide to using SASS with webpack.

import "@episerver/ui-framework/dist/scss/_variables.scss";
import "@episerver/ui-framework/dist/scss/button/button.scss";

SASS Setup

Setting up SASS with a project using webpack is very quick.

• Install sass-loader and node-sass. yarn add --dev sass-loader node-sass
• Add a new rule to webpack.config.js for .scss files

{
    test: /\.scss$/,
    loaders: [
        "style-loader",
        "css-loader",
        {
            loader: "sass-loader",
            options: {
                includePaths: ["node_modules"]
            }
        }
    ],
    include: path.resolve(__dirname, "../")
}

Fonts

The components in the UI Framework use a custom font which you need to load in the appropriate manner for your application.

Google Fonts

Loading the font via Google Fonts is the preferred approach as it will provide the best performance, and it only requires that you add a link in the head of the HTML document.

<link href="https://fonts.googleapis.com/css?family=Barlow:400,500,700" rel="stylesheet" />

Depending on the site setup, this may require changes to the content security policy for the site. The following rules would be needed in that case:

style-src 'self' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com

Local Fonts

If the application can be used in scenarios where loading external resources is potentially forbidden, then you can bundle the fonts with your application by adding the following to your entry point file.

import "@episerver/ui-framework/dist/fonts.css";

You will then need to configure your build system to process *.woff and *.woff2 files.

Releases

Releases will be created at the team's discretion. This should be done regularly when there are bug fixes or new features available. Releases follow semantic versioning. This means that, until there is a major version, minor versions may contain breaking changes.

See the CHANGELOG.md document for information about what is included in each release.

Internal

See the GUIDELINES.md document for more information about contributing and the release process.