Zebra Design System - React Components

Contact

Repo admin is Marc Adlington, contact directly at [email protected]. Feel free to reach out if you have any questions.

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 [email protected] 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

Publising to npm and version control is now automatic

It is required to follow conventional commits when creating commit messages. For more info, please visit: https://www.conventionalcommits.org/ An example acceptable commit message would be "feat: Updated the button component to include dark mode theming options."

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:

    "storybook": "SET NODE_OPTIONS=--openssl-legacy-provider && start-storybook -p 6006",

To develop and see the react lifecycle changes such as state, add the following code to your index.ts (you can rename this to .js locally if required)

import React from 'react';
import ReactDOM from 'react-dom';
import { App } from './sandbox';
import { StripesTheme } from './StripesTheme';

window.React = React;
const app = document.getElementById('app');

ReactDOM.render(<App />, app);

Zebra Confidential and Proprietary Statement:

This source code repository contains Zebra Technologies Corporation’s confidential information that is protected by Zebra’s intellectual property rights, including trade secret law and copyrights. Zebra derives significant commercial value from the confidentiality of the code in this repository, and any public exposure of the code is a breach of your employment obligations or your contract with Zebra as a vendor. By accessing this repository you agree to protect the code in accordance with Zebra’s trade secret protection policy or your obligations of confidentiality as a contractor. You will not store the code in a non-approved Zebra Version Control System (VCS) or non-approved Zebra source code location, or other public or private source code repository, by performing a clone, check-out, fork, push, check-in or any other similar action. All access is monitored and logged.

Unauthorized access, copying or sharing of any code stored on this site is prohibited and will be prosecuted.