(ECI) Cygnus - Design System and Component Library

"Cygnus" is a design system and web component library. It is a collaborative and living project designed and developed by ECI across a multitude of divisions and companies. This project integrates industry best practices, and modern trends, alongside the marketing and branding of ECI Solutions to provide a solid base for any applications UX and UI.

Contributing

Please feel free to contribute by issuing a PR or Github Issue. You may also directly contact the present lead Alex Pineda at [email protected].

Storybook

All components and design guidelines can be found on the Storybook instance hosted by Chromatic. You'll require github access to eci-global and sign in via Github.

Design System

The design system serves as a visual guide for usage of fonts, spacing, shadows, and more. Additionally, we expose design tokens in a variety of consumable formats, in particular json and as css variables for use in applications.

Component Library

Provided is a small set of well designed and accessible primitives or "atoms". Components included are items like buttons, labels, avatars and toggles. It is recommended that higher order components be implemented in your particular technology stack. Additionally there is documentation, testing, and guidance on higher level components like containers, layout components, and others.

Web Components

The component library is based around browser native Web Components technology. You may use them as-is or, optionally, use the framework wrappers if you are using a front-end framework.

React, Vue, and Angular 2.x wrappers

Provided are individual component wrappers for React, Vue, and Angular 2.x. These are optional, however, they are recommended to use as they simplify certain quirks. See usage below.

Design System Usage

JSON Tokens

CSS Variables

Web Components Usage

Without JS bundler (PHP, JQuery, etc)

Include this link in the head section of your html document

cdn link here

With JS bundler (ES5/ES6)

npm install eci-cygnus

React

npm install eci-cygnus

Angular

⚠️ Angular components are considered in alpha state.

npm install eci-cygnus

Vue

⚠️ Vue components are considered in alpha state.

npm install eci-cygnus

Figma -> Storybook Integration

Figma based designs may be inspected in Storybook via the Designs tab. This is powered by storybook-addon-designs plugin. We also support the FigSpec plugin which allows more advanced inspection features.

Storybook -> Figma Integration

Storybook components may be "linked" from Figma by installing Storybook Connect. This allows you to cross-reference the Storybook component from within the Figma component.

Prerequisites

• Figma editor role (to both link and view stories)
• Listed as a collaborator in the Chromatic project

For further instructions visit Chromatic Docs

VSCode Integration

If you are using the Web Components directly you can configure VSCode to recognize the elements by adding to your vscode workspace settings.json:

"html.customData": [
    "node_modules//vscode-data.json"
  ]

Developers Documentation

View ./stencil/README.md