[Design system V2] Statistics and big numbers component

[nloureiro]

Intro

This issue is a part of the Design System V2 Epic and can be assigned to anyone who wants to collaborate.
You can use the comments to sign that you want to work on this, and this issue can be assigned to you.
If you have any questions about it, please don't hesitate to reach out on the comments or on our discord

Description

Some pages display big numbers or other statistics using numbers in a separate and standout form, which helps to draw attention and emphasize the importance of the data.

We’ve explored this on the hero, but now it needs to be set on content pages, including markdown pages.

This approach can be used to effectively showcase the key statistics on the page, making them clear and easy to understand. Additionally, it can help to highlight the most important details and draw the reader’s eye to the critical information. Using numbers in this way can make a page more visually appealing and aid in understanding the data.

• Type: unification design
• Difficulty: 5 out of 10

Link to the Figma file to be worked on

workflow

These are the main steps for each task.

1. Use a separate Figma file.

   • made by the team and liked here should be

2. Identify on which pages the component is used.

   • This can be made collaboratively and consists of screenshots/links to the pages where these components are already in use. Note that we can propose the unification of similar components in one if we find that the UX/UI justifies that’s the core unification goal of the Design system V2.

3. Identify the chakra component to be used as a base (if any)

   • We use chakra UI as a base framework, and if we can match the new design with an existing UI component in chakra, it’s a good call. If not, we can build one, but this should be something to identify now that will ease the implementation.

4. Work on the design.

   • This is where we build the new proposal that will be a new component in the design system, never forgetting the different screen sizes, behavior states, and themes.

5. Test and validate the new component on Figma.

   • Before closing the design, we need to test some real use cases. I suggested having some production screenshot as the base and building it on a Figma page with real content to test the live application of the new design.

6. Validation and feedback.

   • At this point, we are ready to validate and collect feedback. We should act upon this and have the best proposal possible.

7. Spec to handover to code.

   • This will be the final step, where we review the file from the perspective of a handover to the design system master file and to the code or storybook for code development.

8. Merge with the master Figma file of the Design system.

   • This step will be made by someone from the core team because there are some things that could be improved in how we can onboard external contributors to the Figma team. It’s a Figma thing that we can’t change for now.

9. Close the issue and publish the Design system update on the Figma community**.

   • For the last action, we need to close the issue and update the Design system on the Figam community file. At this point, another issue might need to be created to update the storybook and the code to reflect this new design.

[corwintines]

Is this just for a single statistic, or also a stats box?

[github-actions]

This issue is stale because it has been open 45 days with no activity.

[nloureiro]

this issue is no longer relevant