ods-components-react-example

ODS Components React

Build Status

Installation

The component library has to be consumed via the SIP feed (Connect to Azure Artifacts).

npm install @zeiss/ods-components-react
OR
yarn add @zeiss/ods-components-react

Development scripts

Running the application in development mode using storybook

yarn workspace @zeiss/ods-components-react start:dev

Running the linters

yarn workspace @zeiss/ods-components-react lint

Running the tests

yarn workspace @zeiss/ods-components-react test

Generate artifact build

yarn workspace @zeiss/ods-components-react build

Create storybook demo build

yarn workspace @zeiss/ods-components-react build:demo

Consuming the library

import { Button } from '@zeiss/ods-components-react';

export default function Example() {
  return <Button label="ODS Button" onClick={() => {}} />;
}

The library is styled with Tailwind. If your application is build with Tailwind, a Tailwind installation and integration of the ODS Foundations is required. Please refer to the ODS Foundations readme for further guidance regarding installation.

If the host application is not using Tailwind, it is sufficient to require the pre-compiled stylesheet. In your index.css file import:

@import '@zeiss/ods-components-react/dist/main.css';

Icons

The icons for ODS are defined in Figma.

By default, we support the following pre-defined sizes: 12px, 16px, 24px, 48px and 72px.

Note that each icon is not provided in all sizes. This is due to the stroke size of 1px being used in certain cases which does not scale based on design feedback.

To sync the icons from Figma, the following steps need to be performed:

Step 1: Export the icons from Figma

Export the entire sheet as shown in the image below:

Step 2: Replace existing icons

Replace existing icons in the packages/ods-icons/icons with the new exported icons.

Step 3: Update the icon types

Update the icons types by running the following command:

yarn workspace @zeiss/ods-components-react gen:icon-types

This will automatically generate the new type definitions required in the src/components/Icons/icon-types.ts file.

Step 4: Update the icon files

We generate the corresponding React files based on the svg files from ods-icons. To update the generated code, run

yarn workspace @zeiss/ods-components-react gen:icons

This will automatically update the icons files inside the src/components/Icons/icons/** folder.

Step 5: Commit and push

Commit your changes and push. The icons story is designed to automatically scan the icons folder to render the list of all icons based on their size in the storybook demo.

Notes

• There is an issue with applications created with CRA and the tailwind integration. The usage of the library is currently only possible via the pre-compiles stylesheet.