ucc-design-system v0.0.43

UCC Vodafone Design System Kit

The Vodafone Design System is a project aimed at allowing developers to accelerate their development and design processes. This is achieved by providing a set of atomic components that guide developers in building complex systems.

Elements

The project is built using the Atomic Design Methodology. It offers the following features:

• The design kit is built using Figma. It contains a set of foundational design primitives and components.
• The component library mirrors the Figma components and is built using React, Styled System and Styled Components.
• The Storybook acts as both the documentation platform and sandbox (alongsite the app inside the repository).

Useful links

• Storybook Docs
• Figma template

🚀 Building the project

For more info on how to get started see Get Started — Developing Components 1. Verify you have npm installed

for more information on installing npm check https://www.npmjs.com/get-npm

npm -v

2. Install package dependencies

npm install

3. Build and Run Storybook

npm run dist
npm run storybook

You will find the build result in the dist folder.

The storybook is now running at http://localhost:9099/.

4. Run the Sample React App / Sandbox

npm run start

The sample app is now running at http://localhost:8080.