Skip to content

Latest commit

 

History

History
123 lines (84 loc) · 6.84 KB

README.md

File metadata and controls

123 lines (84 loc) · 6.84 KB
Raw

stenajs-webui CI stenajs-webui Netlify Status OpenSSF Scorecard

A design system and React component framework developed at Stena Line.

CHANGELOG

Storybook

All components are available to see in Storybook.

https://stenait.github.io/stenajs-webui

Packages

Package NPM version
calendar @stenajs-webui/calendar
core @stenajs-webui/core
elements @stenajs-webui/elements
forms @stenajs-webui/forms
grid @stenajs-webui/grid
grid-export @stenajs-webui/grid-export
input-mask @stenajs-webui/input-mask
modal @stenajs-webui/modal
panels @stenajs-webui/panels
redux @stenajs-webui/redux
select @stenajs-webui/select
theme @stenajs-webui/theme
tooltip @stenajs-webui/tooltip

Status

This project is very much in development, so there may be bugs. If you have any issues, create an issue in Github, or submit a PR with a fix.

See CONTRIBUTING.md for more information on code conventions, etc.

Prerequisites

create-react-app is the recommended way of setting up a project.

All documentation uses yarn.

stenajs-webui is built with emotion and styled-system.

stenajs-webui use Font Awesome for icons. @stenajs-webui/core does not use any icons, but most other packages require Font Awesome.

Styling

New and converted stenajs-webui components use CSS variables. They can be styled by changing the CSS variables defined in their corresponding .module.css file.

Typescript

stenajs-webui is built with Typescript, and all types are included in the npm package.

There is no need for DefinitelyTyped.

Installation

$ yarn add @stenajs-webui/core

Install any other @stenajs-webui packages in the same way. core is required by all other packages, and most also require elements.

Add dependencies

Most stenajs-webui packages have peer dependencies that have to be met in order to use them. They are specified in their respective package.json.

For example, to use @stenajs-webui/core you must add the following dependencies:

$ yarn add @emotion/react \
           @emotion/styled \
           csstype \
           prop-types \
           react \
           react-dom \
           styled-system

If you are using Typescript, you must also add the following dependencies:

$ yarn add typescript
           @types/react \
           @types/react-dom \
           @types/styled-system

typescript is required by create-react-app when using Typescript, stenajs-webui does not require it.

If you are also using @stenajs-webui/elements, you must also add the following dependencies:

$ yarn add @fortawesome/fontawesome-svg-core \
           @fortawesome/free-solid-svg-icons \
           @fortawesome/react-fontawesome

See the package.json file for each package to see what dependencies are required.

Testing changes locally using Yalc

If you need to make changes to the library code and test it in your application, you can use Yalc.

See our Yalc guide

Add fonts

Copy this <link> tag into the <head> tag in your public/index.html to define the font in your app:

<link
  href="https://d2zob0vy63qnjk.cloudfront.net/StenaSans.css"
  rel="stylesheet"
  type="text/css"
/>