@dkunited/elixir-design v0.0.4

Elixir Design System

Welcome to the Elixir Design System. This comprehensive guide and resource library contains everything you'll need to design with us. The use of the system reduces design debt, accelerates the design process, and builds bridges between teams working in concert to bring products to life in their best visual form.

We created this library to manage all brand and UX components to keep internal Design Apps engineers informed and easier to work processes.

Empower your process to create delightful and consistent user experiences across every product and collaborator - Everyone gets the building blocks to contribute right away on every topic. The aim of Elixir Design System is to help Design Apps developers deliver work faster and better.

How to see components and guidelines?

This project uses Storybook (https://storybook.js.org/) to display components and guidelines.

Locally

To build this project, you need to have the following package installed:

• Npm (https://www.npmjs.com)

You should execute the following commands:

npm install
npm run storybook

Then open http://localhost:6006 on your browser.
Notice: You don't have to relaunch the command at each time you create or update a component.

Using Elixir Design System component in my project

To add Akeneo Design System to your React application, run:

npm install @dkunited/elixir-design

Once the package installed, you can include and render all needed components in your application:

import React from 'react';
import { ElxrButton } from '@dkunited/elixir-design';

const App = () => {
  return (
    <>
      <ElxrButton size="sm" icon="plus">
        Add
      </ElxrButton>
    </>
  );
};

To know the props of each component, visit the dedicated page of the component here: (TODO: Show github page URL of Elixir Design). You can edit all properties and click on "Show code" in the playground section available for each components.