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

18 lines
573 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) 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 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 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) 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) 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
}
Reference in New Issue Copy Permalink