Commit Graph

241 Commits

Author SHA1 Message Date
Nathan Vasse
132b676ff7 (react) add Toast component
This component allows to create dynamic Toast appearing at the bottom
of the screen for few seconds.
2024-01-05 16:38:09 +01:00
Nathan Vasse
dd1a677a76 🧵(react) add Queue util
This util processes function given to it sequentially, using a FIFO
strategy.
2024-01-05 16:38:09 +01:00
Nathan Vasse
68608b5390 📱(react) add media mixin
We want to be able to use responsive media queries for the Toast
component.
2024-01-05 16:38:09 +01:00
Nathan Vasse
9e0f7c5ef4 🤡(react) add Animate API
The jest-dom by default does not mock the Animate API, as the Toast
use it we need to mock it.
2024-01-05 16:38:09 +01:00
Nathan Vasse
83a533d245 ♻️(react) extract typeToColor from AlertIcon
We will need to use the logic of this function in the Toast component.
2024-01-05 16:38:09 +01:00
Nathan Vasse
6e4dd55f49 🔧(react) regenerate tokens files
These new tokens file adds button and alert tokens.
2024-01-02 15:26:13 +01:00
Nathan Vasse
491f66f86e 📝(react) add Alert doc
Add the Alert doc with various examples and use cases.
2024-01-02 15:26:13 +01:00
Nathan Vasse
33d0c9fdca (react) add Alert
Here is the Alert component based on recent delivered sketches.
There is a main component that based on props renders sub alert components.
2024-01-02 15:26:13 +01:00
Nathan Vasse
3800cd8142 📝(react) create a stories for all buttons
Previously we were using a deprecated Storybook feature by using
canvas for multiple Stories and it was also rendering buttons not
aligned, so this new story is a better choice.
2024-01-02 15:26:13 +01:00
Nathan Vasse
e90a5dd6e6 (react) add text variants to Button
These variant are smaller buttons without background that can be used
in cases where we want the Button to have a minimal design.
2024-01-02 15:26:13 +01:00
Nathan Vasse
6d91c1d19f (react) add useControllableState hook
This hook is used to create a state that can be controlled by the parent.
If not the state is handled internally. We start to have this redundant
use case across Cunningham, so creating a dedicated hook reduces the
components verbosity and complexity.
2024-01-02 15:26:13 +01:00
Nathan Vasse
311c20e3e7 🏷️(react) fix stories warning
Having private props was causing the following error: Default export
of the module has or is using private name 'Props'. So exporting those
fixes the issue. It also has a double benefit as we provide exported
Props to library consummers.
2023-12-12 11:13:30 +01:00
Nathan Vasse
72f7048514 💄(react) make Pagination responsive
We want to adapt the layout of Pagination to take less space when
its container is too small.
2023-12-12 11:04:25 +01:00
Nathan Vasse
da3761b699 💄(react) make DataGrid responsive
Previously the DataGrid was buggy in small width containers. Now it enables
an horizontal scroll, in the future we will use cards instead.
2023-12-12 11:04:25 +01:00
Nathan Vasse
6dcafa91f4 (react) add responsive helper
This helper provides handy functions to make components responsive.
2023-12-12 11:04:25 +01:00
Nathan Vasse
7b0686dede (react) add sass generator to react
We need to use sass variable in order to use breakpoints in media
queries. Using native CSS vars in media queries is not possible.
2023-12-12 11:04:25 +01:00
Nathan Vasse
7ddcfeb4bc 🐛(react) fix closing of menu via toggle button
Previously it was not possible to close the menu when clicking on
the toggle button on search select. It was caused by a conflicting
state update.
1. Downshift triggers closing the menu from getToggleButtonProps
2. wrapperProps was calling downshiftReturn.openMenu()
2023-11-30 10:40:13 +01:00
Nathan Vasse
e3882eb308 🏷️(react) support ReactNode as input label
There are use cases that required to put links inside Checkboxes or
Radio inputs.
2023-11-27 10:02:28 +01:00
Nathan Vasse
94b32be5d3 (react) add monoline props to multi select
We want to enable a mode that prevent the pills the wrap on multiple
lines in order to control any height overflowing. In monoline mode the
selected items are displayed as text to allow text ellipsis, and the
menu renders the list items with checkboxes.
2023-11-24 11:01:41 +01:00
Nathan Vasse
7c13badeb2 ♻️(react) delete duplicated SelectMultiProps
During dev I realized that we had a duplicated SelectMultiProps which
was really misleanding.
2023-11-24 11:01:41 +01:00
Lebaud Antoine
d5fcf500b7 ♻️(react) merge duplicated scss classes related to accessibility
'offscreen' and 'c__offscreen' were duplicated, merge these two classes
in a dedicated utils file.
2023-10-24 20:32:42 +02:00
Lebaud Antoine
b714c3d543 📝(doc) update instructions to use modern SASS
Replaced deprecated '@import' with '@use' to align with best practices.
2023-10-24 20:32:42 +02:00
Lebaud Antoine
430f893645 🩹(react) update stylesheet to use modern SASS
Replaced deprecated '@import' with '@use' to align with best practices.
Refactored stylesheet to behave as a partial, enhancing SASS compilation
efficiency.
2023-10-24 20:32:42 +02:00
Nathan Vasse
41a0b6f636 🐛(react) fix Input value font family
The font family of the design system was not applied to input value.
2023-10-24 11:56:47 +02:00
Nathan Vasse
067f80c562 📝(react) fix Input doc
This typo was probably due to a bad copy pasta.
2023-10-24 11:56:47 +02:00
Nathan Vasse
65850dc72f 📝(react) add TextArea to form examples
This is made to showcase the TextArea in real world use cases.
2023-10-24 11:56:47 +02:00
Nathan Vasse
bbf3df852f (react) add TextArea component
How could we ship a design system library without a textarea?
2023-10-24 11:56:47 +02:00
Nathan Vasse
01528b9377 (react) render Button as link
For a variety of reasons, such as accessibility or integration with
external react-router deps style we needed to be able to provide the
ability to render the Button component as link in order to be able
to provide link-specific attribute for rendering such as href.
2023-10-23 15:27:47 +02:00
Nathan Vasse
b86ba5cc8e (react) add select multi options custom render
We want to be able to render the options in a customized manner.
2023-10-19 11:35:19 +02:00
Nathan Vasse
48e4e56a44 (react) add select mono option custom render
We want to be able to render the options in a customized manner.
2023-10-19 11:35:19 +02:00
Nathan Vasse
d39d33d02c 🐛(react) fix inputs overflowing placeholder
The oveflowing labels were spreading on two lines. I had to wrap a
span inside a label in order to be able to deal with the text-oveflow
plus the absolute positionning.
2023-10-16 12:01:35 +02:00
Nathan Vasse
ff2a56af6d 📝(react) update theming doc gif
The gif was broken when deployed on github pages.
2023-10-06 15:42:05 +02:00
Anthony Le Courric
cf3a589d7f 🩹(react) export Button props
In some cases we need the props of a component to be exported,
to be able to use them in other components. This commit exports
the props of the Button component.
2023-10-05 09:19:26 +02:00
Nathan Vasse
b5c91d429d 🏷️(react) move SelectProps to index.tsx
It makes more sense for this type to be next to the Select component.
2023-10-04 16:02:06 +02:00
Nathan Vasse
1c7a114b6e (react) add ref to Select
We encountered a use-case where we needed to blur the select programatically
but the component wasn't offering any way to do that.
2023-10-04 16:02:06 +02:00
Nathan Vasse
d647a77c58 🐛(react) fix multi select focus
The multi select non searchable was not displaying its blue accent
color when opening the menu by not clicking on the toggle button.
2023-10-04 16:02:06 +02:00
Nathan Vasse
2e644b3c3a 📝(doc) add migration guide
As this new version introduced some breaking changes, this doc was needed.
2023-10-04 15:18:00 +02:00
Nathan Vasse
20e58d0d2b 📝(react) add first step doc
We missed this must-have for some time now.
2023-10-04 15:18:00 +02:00
Nathan Vasse
1b34e11a09 📝(react) add Theming doc
The goal is to showcase how to deal with themes when using Cunningham.
2023-10-04 15:18:00 +02:00
Nathan Vasse
422834e6d2 📝(react) make docs theme compatible
Some docs were using design tokens and classes that were not theme
compliant, rendering ugly colors when switching to dark, it needed to
be aligned. Also update some code example to match the new format.
2023-10-04 15:18:00 +02:00
Nathan Vasse
b0d68becfe ♻️(react) update stories for themes
The stories do not need CunninghamProvider anymore since it is
handled by the configuration for the themes support. Some stories
were also using wrong colors that didn't handle multiple themes.
2023-10-04 15:18:00 +02:00
Nathan Vasse
bac9e3b802 📦️(react) update tokens
It reflects the new tokens file with the new format.
2023-10-04 15:18:00 +02:00
Nathan Vasse
e2c0d3259b ♻️(react) update token.ts to handles themes
Some components were using wrong design tokens and this was noticed
only when changing themes, like using hard-coded "white" instead of
"greyscale-000".
2023-10-04 15:18:00 +02:00
Nathan Vasse
cce8eccf5b (theme) add themes management
This is made in order to be able to handle natively multiple themes
for the future light/dark themes and also allow consumers to create
their own.
2023-10-04 15:18:00 +02:00
Lebaud Antoine
0c757957a7 🩹(react) export Popover component and its props
Include missing Popover component exports to the React package.
Re-order package exports to be alphabetically sorted.
2023-10-03 13:28:35 +02:00
Lebaud Antoine
539f03eee1 🩹(react) handle possible null date range
Exercise caution when dealing with date range values that may be null.
2023-10-03 11:52:23 +02:00
Nathan Vasse
a46d28f00a 💄(react) make multi select height homogeneous
Some discussion appeared about the fact the multi select was changing
height when pill were selected, making this input having a bigger
height than others making it looks weird in a form comparing to the
others. Modifying the padding and font size make the input keep the
same height.

See #114
2023-10-03 11:18:56 +02:00
Nathan Vasse
a1e8f46368 🐛(react) fix checkbox double onChange
When clicking on the checkmark it was trigerring two onChange on parent
elements, thus causing double toggling ( which means revert to the initial
value ) in some controlled way approaches ( see the added test ).

Fixes #175
2023-10-02 11:53:04 +02:00
Nathan Vasse
e15586da9b 🐛(react) fix missing mono-simple useEffect dep
A recent rebased cause one the dep to be removed.
2023-09-28 15:43:24 +02:00
Romain Le Cellier
859a75cebe 🩹(frontend) fix react userEffect
in Select/mono-simple

The whole downshiftProps object change every time a update is made on it.
By observing only initialSelectedItem prop, we reduce the amount of call
of this useEffect.
2023-09-27 15:38:48 +02:00