@surfnet/sds
v0.0.159
Published
SURF Design System for React
Keywords
Readme
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/sdsor using yarn
yarn add @surfnet/sdsImport 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-webpackTo run the Storybook locally
yarn storybookPublishing
Increment the version in package.json and run the following commands:
yarn install
yarn build
npm publish --access public ./distThe package is published on https://www.npmjs.com/package/@surfnet/sds and is deployed to https://surfnet.github.io/sds