@zebra-fed/zds-react NPM

Zebra Design System - React Components

Install

  npm i @zebra-fed/zds-react

Peer Dependencies

-React

Usage

This library is build with theme in mind. To use the library, the entire react application must be wrapped in <StripesTheme>

import { StripesTheme } from '@zebra-fed/zds-react';

<StripesTheme>
  <App />
</StripesTheme>;

Importing components:

import { Button, Avatar, Pagination, Table } from '@zebra-fed/zds-react';

Importing and using Interfaces with Components

import { Button, ButtonType, SizeType } from '@zebra-fed/zds-react';

return (
  <Button type={ButtonType.Basic} size={SizeType.Large}>
    Button
  </Button>
);

Documentation

Due to the way this library has been developed, the documentation is currently minimal and needs improving. The Zebra Front-end Development team have started work on creating a new repository ("Zeta") of Web Components that will only contain fully Zebra Design System compliant, fully documented, fully automatically tested front-end components written in TypeScript. This new repository will be able to work alongside zds-react, and we will be moving, upgrading, & making compliant components from zds-react into the new repository one by one. zds-react will continue to be backwards compatible, the components with Zeta counterparts will not be removed from zds-react, but will be marked as deprecated. We feel concentrating our efforts on creating this new curated & high-quality repository will lead to a better development experience much more quickly than by upgrading the documentation in zds-react. But for now, the minimal documentation is available on this Storybook instance: https://develop--61dee07b2d6ab6003cbb3d8d.chromatic.com/

Building a SVG Library for your Application

NOTE: By default the icons property below is being set to our default icon library. However, if you wish to override said library with your own icon library then please follow the following steps. However, it would be highly recommended to reach out to marc.adlington1@zebra.com before moving on to the next step.

The <SVGIcon /> component requires the configuration of a iconLibrary passed through to the Stripes theme for it to pick up the symbols. This is configured like such:

import { icons } from '../resources/iconLibrary';
const themeObj = {
  icons: icons,
};

<StripesTheme mode={'dark'} theme={themeObj}>
  // body of your app
</StripesTheme>;

The Stripes project exposes a script that will take a folder of SVG icons, iconography that is specific to your application, and compiles it into a single iconLibrary string that will be ingested into the Stripes theming engine.

The filename of the svg files will be used as the iconid property when referencing the icon in the <SVGIcon /> tag within your app.

The script can be access via:

npm run buildIcons --folder ./resources/default

the argument that follows the --folder string will be the source folder for your svg files. It will recursively search through the folder and compile all svg objects into a single string.

Dev instructions

To publish to NPM: package.json Increment version number

yarn build
cd build
npm publish

Publish update to NPM

Development

You can easily develop and interact with your components by using Storybook. To run the local server, simply run:

$ yarn start

If an organisation mandated man-in-the-middle malware is installed onto your system and you are getting a certificate error when starting storybook you can prepend an Environment Variable to change to a different ssl provider. Change the storybook script line in package.json to: