🧱 ZUI: Circular and linear progress

[ziggabyte]

Description

We need two components that can show the user when something is loading or they are waiting for something, one ZUICircularProgress and one ZUILinearProgress

Screenshots

Linear

Circular

Figma link

https://www.figma.com/design/yIQMDEFSgkUOrSaJpg3k7N/ZUI?node-id=11045-146857&t=XkI0bcCSexrIhOnf-4

You need to be logged into a Figma account to properly view the Figma content.

Requirements

• ZUICircularProgress
  • Can be size small or size medium
  • Has correct color as in Figma
• ZUILinearProgress
  • Can be of type determinate, buffer or indeterminate
  • Has correct color and style as in Figma

Open questions

Suggestion for implementation

Use MUI CircularProgress and LinearProgress components for this.

Workflow

Git

The main git branch for the work on the new design system is undocumented/new-design-system. Unless otherwise instructed, do your work on a new branch branched off from this branch.

Name your branch issue-number/zui-name, ex: issue-928/zui-button for a branch where work is done that is documented in the issue with number 928, where a button component is being made.

Storybook

Use Storybook to develop the new design system components. If you are not familiar with working with Storybook, please ask and Ziggi or someone else will be happy to introduce you!
When you have checked out the branch undocumented/new-design-system (and, as always when checking out a branch just to be sure, run yarn install), run yarn storybook in the terminal. This starts Storybook locally, and should open your browser to localhost:6006 where you see all the components. Note that you want to only look at the ones under the "Components" headline.

Files

Create a folder in src/zui/components and give it a name for your component, like ZUIButton. Inside that folder, create one file index.tsx (this is where you write your component) and one index.stories.tsx (this is where you write your Storybook stories). Look at the components in src/zui/components for inspiration/reference! Note that there are lots of components with names that start with "ZUI" outside the src/zui/components folder, but only the ones in src/zui/components are relevant as reference/inspiration for the work you will be doing.