@surfnet/sds NPM

surf-design-system

Design System for https://design.surf.nl/

Using this package in your React project

Install this package with npm into your own project:

npm install @surfnet/sds

or using yarn

yarn add @surfnet/sds

Import the global sds.css, the overrides for this library and the react-tooltip css in your index.js:

import '@surfnet/sds/styles/sds.css';
//Do not change the order of @surfnet.sds style imports
import '@surfnet/sds/cjs/index.css';
import 'react-tooltip/dist/react-tooltip.css';

For Import the component's you want to use:

import {LanguageSwitcher, Tooltip, Alert} from "@surfnet/sds";

You can then render the LanguageSwitcher component like any other React component in JSX.

Don't forget to choose and set the color palette on the body:

<body id="app" class="sds--color-palette--orange">

Contributing

Create an issue and subsequently clone this repo and create a PR including storybook stories in this repo with preferably squished commits.

Storybook

To generate the static Storybook files for static purposes (like hosting on github)

yarn build-storybook --debug-webpack

To run the Storybook locally

yarn storybook

Publishing

Increment the version in package.json and run the following commands:

yarn install
yarn build
npm login
npm publish --access public ./dist

The package is published on https://www.npmjs.com/package/@surfnet/sds and is deployed to https://surfnet.github.io/sds

@everything-registry/sub-chunk-883

1 month ago

2 months ago

2 months ago

2 months ago

3 months ago

2 months ago

2 months ago

2 months ago

2 months ago

4 months ago

4 months ago

8 months ago

8 months ago

8 months ago

7 months ago

8 months ago

6 months ago

6 months ago

6 months ago

7 months ago

6 months ago

6 months ago

6 months ago

6 months ago

9 months ago

1 year ago

1 year ago

10 months ago

11 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago