studio/cunningham
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
fed31ddbb937d29f27142d5beccffab99e931232
cunningham/packages/react/src/index.scss

23 lines
709 B
SCSS
Raw Normal View History

✨(react) add tokens.ts files handling These files will be used to define the custom design tokens per components. They are automatically aggregated by the packages/react/cunningham.ts file, this is why handling typescript config file was important.
2023-01-04 15:52:24 +01:00
@import "cunningham-tokens";
✨(components) add react repo This repo only contains a Button which is here only for demonstration purpose. Its purpose is to contain all the future react-based components of the design system.
2022-12-01 12:05:08 +01:00
@import '@openfun/cunningham-tokens/default-tokens';
💄(react) improve DX when converting px to rem values It can be tricky, while integrating the figma design file, to map some small px values to their rem equivalent. Thus, this PR proposes a new util function converting pixel to rem. It would ensure that all size values can scale base on the font-size base, while keeping a good developer experience.
2023-05-25 15:31:55 +02:00
@import './utils';
✨(react) add DataGrid, SimpleDataGrid components The DataGrid component can be considered as the core one, which provides a full controlled component, but more complicated than SimpleDataGrid which is based on DataGrid. SimpleDataGrid is intended to give a simple ready-to-use data grid for client side data for example.
2023-03-07 17:06:50 +01:00
@import './components/Accessibility';
✨(react) implement Button with official tokens Now that we have all the official design tokens we can use them to build the button component in various colors matching the design system's ones.
2023-01-12 17:41:14 +01:00
@import './components/Button';
✨(react) add DataGrid, SimpleDataGrid components The DataGrid component can be considered as the core one, which provides a full controlled component, but more complicated than SimpleDataGrid which is based on DataGrid. SimpleDataGrid is intended to give a simple ready-to-use data grid for client side data for example.
2023-03-07 17:06:50 +01:00
@import './components/DataGrid';
✨(react) add Checkbox component Implement Checkbox input based on designed sketches.
2023-04-20 14:57:22 +02:00
@import './components/Forms/Checkbox';
✨(react) add generic Field component This component will wrap most of form components in order to provide them a generic state attribute along with texts below them.
2023-04-14 16:38:08 +02:00
@import './components/Forms/Field';
✨(react) add file uploader Add mono and multi file uploader according to sketches.
2023-06-22 17:16:26 +02:00
@import './components/Forms/FileUploader';
✨(react) add Radio component Implement Radio input based on designed sketches.
2023-04-20 14:58:06 +02:00
@import './components/Forms/Radio';
✨(react) add a temporary TextInput Even if we haven't started to work on a complete set of inputs we need a generic Input to implement the "goto" feature on the Pagination component. This component is not intended to be used in by the librarie's dependent, so we mark it as "WIP" for the moment.
2023-02-16 14:42:42 +01:00
@import './components/Forms/Input';
♻️(react) create a generic LabelledBox This component is responsible to display the label as placeholder for forms input. It was tied inside Input but now we will need to have the same ui for Select field, by extracting it in a dedicated component we make it reusable quickly.
2023-05-05 16:03:31 +02:00
@import './components/Forms/LabelledBox';
✨(react) add Select component Finally our powerful Select component is available to make great forms!
2023-05-05 16:04:50 +02:00
@import './components/Forms/Select';
✨(react) add Switch component Implement a shiny new component that can be used as an alternative to the regular checkbox.
2023-05-17 15:21:46 +02:00
@import './components/Forms/Switch';
✨(react) add DatePicker component Based on the Figma DS design by Alex, a mono date-picker component has been added. It uses react-aria headless ui component capabilities, with downshift headless ui component. React-aria was not supporting by default dropdown menus to select months and years. We could not reuse Popover component from react-aria because we are not using their headless ui component for the button one. Clicking on the toggle calendar button triggers both the button and the popover click outside events. React-aria button uses a custom onPress props that is disabled by their popover. Instead, I have implemented a simple custom hook. This is the first acceptable version of the component. Some minor user interaction are missing. This first component doesn't support time selection.
2023-05-22 17:00:25 +02:00
@import './components/Forms/DatePicker';
✨(react) add Loader component The first use of this loader will be inside the DataGrid for its loading state. Its colors are based on the existing primary colors tokens.
2023-03-06 15:56:01 +01:00
@import './components/Loader';
✨(react) add Pagination component In order to create a DataGrid we first need a fully working pagination component. It comes with multiples working examples in the documentation.
2023-02-20 16:27:37 +01:00
@import './components/Pagination';
✨(react) add a popover component A design system needs a popover mecanism. In the select component, this logic is handled by downshift. We introduce a new component, responsible to open an element in a popin and close it when the user click outside of it.
2023-06-02 12:04:36 +02:00
@import './components/Popover';
✨(react) implement Button with official tokens Now that we have all the official design tokens we can use them to build the button component in various colors matching the design system's ones.
2023-01-12 17:41:14 +01:00
* {
✨(tokens) generate css utility classes These were the missing parts in order to use every design tokens of Cunningham. Including: spacing, font weight, size, family, and colors. In order to be really versatile and to allow users to define new design tokens I had to re-organize the way those tokens are sub divided in sub objects in cunningham.ts file. That's why sub division are created for theme.typ.sizes for instance.
2023-01-19 15:30:23 +01:00
font-family: var(--c--theme--font--families--base);
🎨(react) make eof stylesheets consistent Some older tools misbehave if the last line of data in a text file is not terminated with a newline. It makes sure the last line was properly terminated.
2023-06-12 16:51:00 +02:00
}
Reference in New Issue Copy Permalink