Zebra Design System React Desktop Components

Install

  npm i -s @zebra-fed/zds-react-desktop

Dependencies

-@zebra-fed/icons

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-desktop/StripesTheme';

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

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

Navigate to http://localhost:6060 to view your styleguidist. They should automatically update as you develop.

Styleguidist will pick up any Readme from the README.md file in a component folder.

Building a SVG Library for your Application

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.