studio/cunningham
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨(react) add Radio component

Browse Source 
Implement Radio input based on designed sketches.
This commit is contained in:
Nathan Vasse
2023-04-20 14:58:06 +02:00
committed by NathanVss
parent 43096e2bab
commit f5cb2e791e
14 changed files with 727 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/tall-lions-speak.md Normal file
View File

@@ -0,0 +1,5 @@
---
"@openfun/cunningham-react": minor
---
add Radio component

39
packages/react/src/components/Forms/Radio/index.scss Normal file
View File

@@ -0,0 +1,39 @@
.c__radio {
input {
appearance: none;
margin: 0;
width: var(--c--components--forms-checkbox--size);
height: var(--c--components--forms-checkbox--size);
border: 1.5px solid var(--c--components--forms-radio--border-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
&:focus {
outline: none;
}
&::before {
content: "";
width: 1rem;
height: 1rem;
border-radius: 50%;
transform: scale(0);
transition: all var(--c--theme--transitions--duration) var(--c--theme--transitions--ease-out);
box-shadow: inset 1em 1em var(--c--components--forms-radio--accent-color);
}
&:checked::before {
transform: scale(1);
}
}
&.c__checkbox--disabled {
input {
&::before {
box-shadow: inset 1em 1em var(--c--theme--colors--greyscale-400);
}
}
}
}

114
packages/react/src/components/Forms/Radio/index.spec.tsx Normal file
View File

@@ -0,0 +1,114 @@
import userEvent from "@testing-library/user-event";
import React from "react";
import { render, screen } from "@testing-library/react";
import { Radio, RadioGroup } from "components/Forms/Radio/index";
describe("<Radio/>", () => {
it("should render", async () => {
render(<Radio label="Yes" />);
expect(screen.getByLabelText("Yes")).toBeInTheDocument();
});
it("should render checked", async () => {
render(<Radio label="Yes" defaultChecked={true} />);
const input: HTMLInputElement = screen.getByRole("radio", {
name: "Yes",
});
expect(input.checked).toEqual(true);
});
it("should render disabled", async () => {
render(<Radio label="Yes" disabled={true} />);
expect(screen.getByRole("radio", { name: "Yes" })).toBeDisabled();
// Click and expect the radio does not get checked
const user = userEvent.setup();
const input: HTMLInputElement = screen.getByRole("radio", {
name: "Yes",
});
expect(input.checked).toEqual(false);
await user.click(input);
expect(input.checked).toEqual(false);
});
it("should render with text", async () => {
render(<Radio label="Yes" text="Text" />);
expect(screen.getByText("Text")).toBeInTheDocument();
});
it("should render with state=success", async () => {
render(<Radio label="Yes" state="success" text="Success text" />);
expect(screen.getByText("Success text")).toBeInTheDocument();
expect(
document.querySelector(".c__field.c__field--success")
).toBeInTheDocument();
});
it("should render with state=error", async () => {
render(<Radio label="Yes" state="error" text="Error text" />);
expect(screen.getByText("Error text")).toBeInTheDocument();
expect(
document.querySelector(".c__field.c__field--error")
).toBeInTheDocument();
});
it("should render with group", async () => {
render(
<RadioGroup>
<Radio label="Yes" />
<Radio label="No" />
</RadioGroup>
);
screen.getByRole("radio", {
name: "Yes",
});
screen.getByRole("radio", {
name: "No",
});
});
it("should render with group and checking one radio should unchecked all others", async () => {
render(
<RadioGroup>
<Radio name="agree" label="Yes" />
<Radio name="agree" label="No" />
</RadioGroup>
);
const user = userEvent.setup();
const yesInput: HTMLInputElement = screen.getByLabelText("Yes");
const noInput: HTMLInputElement = screen.getByLabelText("No");
expect(yesInput.checked).toEqual(false);
expect(noInput.checked).toEqual(false);
await user.click(yesInput);
expect(yesInput.checked).toEqual(true);
expect(noInput.checked).toEqual(false);
await user.click(noInput);
expect(yesInput.checked).toEqual(false);
expect(noInput.checked).toEqual(true);
});
it("should render with group text", async () => {
render(
<RadioGroup text="Text">
<Radio label="Yes" />
<Radio label="No" />
</RadioGroup>
);
expect(screen.getByText("Text")).toBeInTheDocument();
});
it("should render with group state=success", async () => {
render(
<RadioGroup state="success" text="Success text">
<Radio label="Yes" />
<Radio label="No" />
</RadioGroup>
);
expect(screen.getByText("Success text")).toBeInTheDocument();
expect(
document.querySelector(".c__radio__group.c__field.c__field--success")
).toBeInTheDocument();
});
it("should render with group state=error", async () => {
render(
<RadioGroup state="error" text="Error text">
<Radio label="Yes" />
<Radio label="No" />
</RadioGroup>
);
expect(screen.getByText("Error text")).toBeInTheDocument();
expect(
document.querySelector(".c__radio__group.c__field.c__field--error")
).toBeInTheDocument();
});
});

109
packages/react/src/components/Forms/Radio/index.stories.mdx Normal file
View File

@@ -0,0 +1,109 @@
import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs';
import { Radio } from "./index";
<Meta title="Components/Forms/Radio/Doc" component={Radio}/>
# Radio
Cunningham provides a versatile Radio component that can be used in a variety of ways. The radio component is a form element that allows the user to select one option from a set of options.
<Canvas>
<Story id="components-forms-radio--group"/>
</Canvas>
## Label
The `label` props is optional, but you can use it to provide a description of the radio.
**Without label**
<Canvas withSource="open">
<Story id="components-forms-radio--default"/>
</Canvas>
**With label**
<Canvas withSource="open">
<Story id="components-forms-radio--with-label"/>
</Canvas>
## Value
You can set the value of the radio with the `checked` attribute.
<Canvas withSource="open">
<Story id="components-forms-radio--default"/>
<Story id="components-forms-radio--checked"/>
</Canvas>
## Texts
As the component uses [Field](?path=/story/components-forms-field-doc--page), you can use the `text` props to provide a description of the radio.
<Canvas withSource="open">
<Story id="components-forms-radio--with-text"/>
</Canvas>
## Disabled
As a regular radio, you can disable it by using the `disabled` props.
<Canvas withSource="open">
<Story id="components-forms-radio--disabled"/>
</Canvas>
## States
You can use the following props to change the state of the Input component by using the `state` props.
<Canvas withSource="open">
<Story id="components-forms-radio--with-text"/>
</Canvas>
<Canvas withSource="open">
<Story id="components-forms-radio--success"/>
</Canvas>
<Canvas withSource="open">
<Story id="components-forms-radio--error"/>
</Canvas>
## Group
Here is how you can leverage the `RadioGroup` component to create a group of radio buttons.
<Canvas withSource="open">
<Story id="components-forms-radio--group"/>
</Canvas>
You can also define `state`, `text` props on the group component
<Canvas withSource="open">
<Story id="components-forms-radio--group-error"/>
<Story id="components-forms-radio--group-success"/>
</Canvas>
## Design tokens
Here are available custom design tokens.
| Token | Description |
|--------------- |----------------------------- |
| border-color | Border color of the radio |
| accent-color | Color of the checkmark |
The design tokens `font-size`, `font-weight`, `color`, `width`, `height` are shared with [Checkbox](?path=/story/components-forms-checkbox-doc--page)
See also [Field](?path=/story/components-forms-field-doc--page)
##
<img src="components/Forms/Radio/resources/dd_1.svg"/>
##
<img src="components/Forms/Radio/resources/dd_2.svg"/>
##
<img src="components/Forms/Radio/resources/dd_3.svg"/>

154
packages/react/src/components/Forms/Radio/index.stories.tsx Normal file
View File

@@ -0,0 +1,154 @@
import { ComponentMeta, ComponentStory } from "@storybook/react";
import React from "react";
import { Radio, RadioGroup } from "components/Forms/Radio/index";
export default {
title: "Components/Forms/Radio",
component: Radio,
} as ComponentMeta<typeof Radio>;
const Template: ComponentStory<typeof Radio> = (args) => (
<Radio {...args} aria-label="Radio" />
);
export const Default = Template.bind({});
Default.args = {};
export const Checked = Template.bind({});
Checked.args = {
checked: true,
};
export const WithLabel = Template.bind({});
WithLabel.args = {
label: "Label",
};
export const WithLabelChecked = Template.bind({});
WithLabelChecked.args = {
label: "Label",
checked: true,
};
export const WithText = Template.bind({});
WithText.args = {
label: "Label",
text: "Some optional text",
};
export const Disabled = Template.bind({});
Disabled.args = {
label: "Label",
disabled: true,
};
export const DisabledChecked = Template.bind({});
DisabledChecked.args = {
label: "Label",
disabled: true,
checked: true,
text: "Some optional text",
};
export const Error = Template.bind({});
Error.args = {
checked: true,
label: "Label",
text: "This is an optional text",
state: "error",
};
export const Success = Template.bind({});
Success.args = {
checked: true,
label: "Label",
text: "This is an optional text",
state: "success",
};
export const Group = () => {
return (
<div>
<div className="fs-l fw-bold mb-t">Your office</div>
<RadioGroup>
<Radio
label="New York"
name="city"
value="new_york"
text="5th Avenue Offices"
/>
<Radio
label="Singapour"
name="city"
value="singapour"
text="Opened in 2015"
/>
<Radio
label="Dublin"
name="city"
value="dublin"
text="Closed since 2019"
disabled={true}
/>
</RadioGroup>
</div>
);
};
export const GroupError = () => {
return (
<div>
<div className="fs-l fw-bold mb-t">Your office</div>
<RadioGroup state="error" text="An important error message">
<Radio
label="New York"
name="city"
value="new_york"
text="5th Avenue Offices"
/>
<Radio
label="Singapour"
name="city"
value="singapour"
text="Opened in 2015"
/>
<Radio
label="Dublin"
name="city"
value="dublin"
text="Closed since 2019"
disabled={true}
/>
</RadioGroup>
</div>
);
};
export const GroupSuccess = () => {
return (
<div>
<div className="fs-l fw-bold mb-t">Your office</div>
<RadioGroup state="success" text="Success message !">
<Radio
label="New York"
name="city"
value="new_york"
text="5th Avenue Offices"
/>
<Radio
label="Singapour"
name="city"
value="singapour"
text="Opened in 2015"
/>
<Radio
label="Dublin"
name="city"
value="dublin"
text="Closed since 2019"
disabled={true}
/>
</RadioGroup>
</div>
);
};

44
packages/react/src/components/Forms/Radio/index.tsx Normal file
View File

@@ -0,0 +1,44 @@
import React, { InputHTMLAttributes, PropsWithChildren } from "react";
import classNames from "classnames";
import { Field, FieldProps } from "components/Forms/Field";
type Props = InputHTMLAttributes<HTMLInputElement> &
FieldProps & {
label?: string;
};
export const Radio = ({ label, text, state, ...props }: Props) => {
return (
<label
className={classNames("c__checkbox", "c__radio", {
"c__checkbox--disabled": props.disabled,
})}
>
<Field text={text} compact={true} state={state}>
<div className="c__checkbox__container">
<input type="radio" {...props} />
{label && <div className="c__checkbox__label">{label}</div>}
</div>
</Field>
</label>
);
};
export const RadioGroup = ({
children,
state,
text,
rightText,
}: PropsWithChildren & FieldProps) => {
return (
<Field
className="c__radio__group c__checkbox__group"
state={state}
text={text}
rightText={rightText}
compact={true}
>
<div className="c__checkbox__group__list">{children}</div>
</Field>
);
};

49
packages/react/src/components/Forms/Radio/resources/dd_1.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 159 KiB

117
packages/react/src/components/Forms/Radio/resources/dd_2.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 301 KiB

85
packages/react/src/components/Forms/Radio/resources/dd_3.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 245 KiB

6
packages/react/src/components/Forms/Radio/tokens.ts Normal file
View File

@@ -0,0 +1,6 @@
import { DefaultTokens } from "@openfun/cunningham-tokens";
export const tokens = (defaults: DefaultTokens) => ({
"border-color": defaults.theme.colors["greyscale-300"],
"accent-color": defaults.theme.colors["success-700"],
});

5
packages/react/src/cunningham-tokens.css
View File

@@ -97,7 +97,7 @@
--c--theme--transitions--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--c--theme--transitions--duration: 250ms;
--c--components--forms-radio--border-color: #E7E8EA;
--c--components--forms-radio--check-color: #419A14;
--c--components--forms-radio--accent-color: #419A14;
--c--components--forms-input--font-weight: 400;
--c--components--forms-input--font-size: 1rem;
--c--components--forms-input--border-radius: 8px;
@@ -117,8 +117,7 @@
--c--components--forms-checkbox--color: #0C1A2B;
--c--components--forms-checkbox--border-color: #E7E8EA;
--c--components--forms-checkbox--border-radius: 2px;
--c--components--forms-checkbox--accent-color: #419A14;
--c--components--forms-checkbox--size: 1.5rem;
--c--components--forms-checkbox--marks-color: #419A14;
--c--components--button--border-radius: 8px;
--c--components--button--border-radius--active: 2px;
--c--components--button--medium-height: 48px;

2
packages/react/src/cunningham-tokens.js
View File

@@ -1 +1 @@
export const tokens = {"theme":{"colors":{"primary-text":"#FFFFFF","primary-100":"#EBF2FC","primary-200":"#8CB5EA","primary-300":"#5894E1","primary-400":"#377FDB","primary-500":"#055FD2","primary-600":"#0556BF","primary-700":"#044395","primary-800":"#033474","primary-900":"#022858","secondary-text":"#555F6B","secondary-100":"#F2F7FC","secondary-200":"#EBF3FA","secondary-300":"#E2EEF8","secondary-400":"#DDEAF7","secondary-500":"#D4E5F5","secondary-600":"#C1D0DF","secondary-700":"#97A3AE","secondary-800":"#757E87","secondary-900":"#596067","greyscale-000":"#FFFFFF","greyscale-100":"#FAFAFB","greyscale-200":"#F3F4F4","greyscale-300":"#E7E8EA","greyscale-400":"#C2C6CA","greyscale-500":"#9EA3AA","greyscale-600":"#79818A","greyscale-700":"#555F6B","greyscale-800":"#303C4B","greyscale-900":"#0C1A2B","success-text":"#FFFFFF","success-100":"#EFFCD3","success-200":"#DBFAA9","success-300":"#BEF27C","success-400":"#A0E659","success-500":"#76D628","success-600":"#5AB81D","success-700":"#419A14","success-800":"#2C7C0C","success-900":"#1D6607","info-text":"#FFFFFF","info-100":"#EBF2FC","info-200":"#8CB5EA","info-300":"#5894E1","info-400":"#377FDB","info-500":"#055FD2","info-600":"#0556BF","info-700":"#044395","info-800":"#033474","info-900":"#022858","warning-text":"#FFFFFF","warning-100":"#FFF8CD","warning-200":"#FFEF9B","warning-300":"#FFE469","warning-400":"#FFDA43","warning-500":"#FFC805","warning-600":"#DBA603","warning-700":"#B78702","warning-800":"#936901","warning-900":"#7A5400","danger-text":"#FFFFFF","danger-100":"#F4B0B0","danger-200":"#EE8A8A","danger-300":"#E65454","danger-400":"#E13333","danger-500":"#DA0000","danger-600":"#C60000","danger-700":"#9B0000","danger-800":"#780000","danger-900":"#5C0000"},"font":{"sizes":{"h1":"1.75rem","h2":"1.375rem","h3":"1.125rem","h4":"0.8125rem","h5":"0.625rem","h6":"0.5rem","l":"1rem","m":"0.8125rem","s":"0.6875rem"},"weights":{"thin":100,"regular":300,"medium":400,"bold":500,"extrabold":700,"black":900},"families":{"base":"Roboto","accent":"Roboto"}},"spacings":{"xl":"4rem","l":"3rem","b":"1.625rem","s":"1rem","t":"0.5rem","st":"0.25rem"},"transitions":{"ease-in":"cubic-bezier(0.32, 0, 0.67, 0)","ease-out":"cubic-bezier(0.33, 1, 0.68, 1)","ease-in-out":"cubic-bezier(0.65, 0, 0.35, 1)","duration":"250ms"}},"components":{"forms-radio":{"border-color":"#E7E8EA","accent-color":"#419A14"},"forms-input":{"font-weight":400,"font-size":"1rem","border-radius":"8px","border-radius--hover":"2px","border-radius--focus":"2px","border-width":"2px","border-color":"#E7E8EA","border-color--hover":"#9EA3AA","border-color--focus":"#0556BF","border-style":"solid","color":"#303C4B"},"forms-field":{"width":"292px","font-size":"0.6875rem","color":"#79818A"},"forms-checkbox":{"font-size":"0.8125rem","font-weight":400,"color":"#0C1A2B","border-color":"#E7E8EA","border-radius":"2px","accent-color":"#419A14","size":"1.5rem"},"button":{"border-radius":"8px","border-radius--active":"2px","medium-height":"48px","small-height":"32px","medium-font-size":"1rem","small-font-size":"0.8125rem","font-weight":400}}};
export const tokens = {"theme":{"colors":{"primary-text":"#FFFFFF","primary-100":"#EBF2FC","primary-200":"#8CB5EA","primary-300":"#5894E1","primary-400":"#377FDB","primary-500":"#055FD2","primary-600":"#0556BF","primary-700":"#044395","primary-800":"#033474","primary-900":"#022858","secondary-text":"#555F6B","secondary-100":"#F2F7FC","secondary-200":"#EBF3FA","secondary-300":"#E2EEF8","secondary-400":"#DDEAF7","secondary-500":"#D4E5F5","secondary-600":"#C1D0DF","secondary-700":"#97A3AE","secondary-800":"#757E87","secondary-900":"#596067","greyscale-000":"#FFFFFF","greyscale-100":"#FAFAFB","greyscale-200":"#F3F4F4","greyscale-300":"#E7E8EA","greyscale-400":"#C2C6CA","greyscale-500":"#9EA3AA","greyscale-600":"#79818A","greyscale-700":"#555F6B","greyscale-800":"#303C4B","greyscale-900":"#0C1A2B","success-text":"#FFFFFF","success-100":"#EFFCD3","success-200":"#DBFAA9","success-300":"#BEF27C","success-400":"#A0E659","success-500":"#76D628","success-600":"#5AB81D","success-700":"#419A14","success-800":"#2C7C0C","success-900":"#1D6607","info-text":"#FFFFFF","info-100":"#EBF2FC","info-200":"#8CB5EA","info-300":"#5894E1","info-400":"#377FDB","info-500":"#055FD2","info-600":"#0556BF","info-700":"#044395","info-800":"#033474","info-900":"#022858","warning-text":"#FFFFFF","warning-100":"#FFF8CD","warning-200":"#FFEF9B","warning-300":"#FFE469","warning-400":"#FFDA43","warning-500":"#FFC805","warning-600":"#DBA603","warning-700":"#B78702","warning-800":"#936901","warning-900":"#7A5400","danger-text":"#FFFFFF","danger-100":"#F4B0B0","danger-200":"#EE8A8A","danger-300":"#E65454","danger-400":"#E13333","danger-500":"#DA0000","danger-600":"#C60000","danger-700":"#9B0000","danger-800":"#780000","danger-900":"#5C0000"},"font":{"sizes":{"h1":"1.75rem","h2":"1.375rem","h3":"1.125rem","h4":"0.8125rem","h5":"0.625rem","h6":"0.5rem","l":"1rem","m":"0.8125rem","s":"0.6875rem"},"weights":{"thin":100,"regular":300,"medium":400,"bold":500,"extrabold":700,"black":900},"families":{"base":"Roboto","accent":"Roboto"}},"spacings":{"xl":"4rem","l":"3rem","b":"1.625rem","s":"1rem","t":"0.5rem","st":"0.25rem"},"transitions":{"ease-in":"cubic-bezier(0.32, 0, 0.67, 0)","ease-out":"cubic-bezier(0.33, 1, 0.68, 1)","ease-in-out":"cubic-bezier(0.65, 0, 0.35, 1)","duration":"250ms"}},"components":{"forms-radio":{"border-color":"#E7E8EA","accent-color":"#419A14"},"forms-input":{"font-weight":400,"font-size":"1rem","border-radius":"8px","border-radius--hover":"2px","border-radius--focus":"2px","border-width":"2px","border-color":"#E7E8EA","border-color--hover":"#9EA3AA","border-color--focus":"#0556BF","border-style":"solid","color":"#303C4B"},"forms-field":{"width":"292px","font-size":"0.6875rem","color":"#79818A"},"forms-checkbox":{"font-size":"0.8125rem","font-weight":400,"color":"#0C1A2B","border-color":"#E7E8EA","border-radius":"2px","accent-color":"#419A14"},"button":{"border-radius":"8px","border-radius--active":"2px","medium-height":"48px","small-height":"32px","medium-font-size":"1rem","small-font-size":"0.8125rem","font-weight":400}}};

2
packages/react/src/cunningham-tokens.ts
View File

@@ -1 +1 @@
export const tokens = {"theme":{"colors":{"primary-text":"#FFFFFF","primary-100":"#EBF2FC","primary-200":"#8CB5EA","primary-300":"#5894E1","primary-400":"#377FDB","primary-500":"#055FD2","primary-600":"#0556BF","primary-700":"#044395","primary-800":"#033474","primary-900":"#022858","secondary-text":"#555F6B","secondary-100":"#F2F7FC","secondary-200":"#EBF3FA","secondary-300":"#E2EEF8","secondary-400":"#DDEAF7","secondary-500":"#D4E5F5","secondary-600":"#C1D0DF","secondary-700":"#97A3AE","secondary-800":"#757E87","secondary-900":"#596067","greyscale-000":"#FFFFFF","greyscale-100":"#FAFAFB","greyscale-200":"#F3F4F4","greyscale-300":"#E7E8EA","greyscale-400":"#C2C6CA","greyscale-500":"#9EA3AA","greyscale-600":"#79818A","greyscale-700":"#555F6B","greyscale-800":"#303C4B","greyscale-900":"#0C1A2B","success-text":"#FFFFFF","success-100":"#EFFCD3","success-200":"#DBFAA9","success-300":"#BEF27C","success-400":"#A0E659","success-500":"#76D628","success-600":"#5AB81D","success-700":"#419A14","success-800":"#2C7C0C","success-900":"#1D6607","info-text":"#FFFFFF","info-100":"#EBF2FC","info-200":"#8CB5EA","info-300":"#5894E1","info-400":"#377FDB","info-500":"#055FD2","info-600":"#0556BF","info-700":"#044395","info-800":"#033474","info-900":"#022858","warning-text":"#FFFFFF","warning-100":"#FFF8CD","warning-200":"#FFEF9B","warning-300":"#FFE469","warning-400":"#FFDA43","warning-500":"#FFC805","warning-600":"#DBA603","warning-700":"#B78702","warning-800":"#936901","warning-900":"#7A5400","danger-text":"#FFFFFF","danger-100":"#F4B0B0","danger-200":"#EE8A8A","danger-300":"#E65454","danger-400":"#E13333","danger-500":"#DA0000","danger-600":"#C60000","danger-700":"#9B0000","danger-800":"#780000","danger-900":"#5C0000"},"font":{"sizes":{"h1":"1.75rem","h2":"1.375rem","h3":"1.125rem","h4":"0.8125rem","h5":"0.625rem","h6":"0.5rem","l":"1rem","m":"0.8125rem","s":"0.6875rem"},"weights":{"thin":100,"regular":300,"medium":400,"bold":500,"extrabold":700,"black":900},"families":{"base":"Roboto","accent":"Roboto"}},"spacings":{"xl":"4rem","l":"3rem","b":"1.625rem","s":"1rem","t":"0.5rem","st":"0.25rem"},"transitions":{"ease-in":"cubic-bezier(0.32, 0, 0.67, 0)","ease-out":"cubic-bezier(0.33, 1, 0.68, 1)","ease-in-out":"cubic-bezier(0.65, 0, 0.35, 1)","duration":"250ms"}},"components":{"forms-radio":{"border-color":"#E7E8EA","accent-color":"#419A14"},"forms-input":{"font-weight":400,"font-size":"1rem","border-radius":"8px","border-radius--hover":"2px","border-radius--focus":"2px","border-width":"2px","border-color":"#E7E8EA","border-color--hover":"#9EA3AA","border-color--focus":"#0556BF","border-style":"solid","color":"#303C4B"},"forms-field":{"width":"292px","font-size":"0.6875rem","color":"#79818A"},"forms-checkbox":{"font-size":"0.8125rem","font-weight":400,"color":"#0C1A2B","border-color":"#E7E8EA","border-radius":"2px","accent-color":"#419A14","size":"1.5rem"},"button":{"border-radius":"8px","border-radius--active":"2px","medium-height":"48px","small-height":"32px","medium-font-size":"1rem","small-font-size":"0.8125rem","font-weight":400}}};
export const tokens = {"theme":{"colors":{"primary-text":"#FFFFFF","primary-100":"#EBF2FC","primary-200":"#8CB5EA","primary-300":"#5894E1","primary-400":"#377FDB","primary-500":"#055FD2","primary-600":"#0556BF","primary-700":"#044395","primary-800":"#033474","primary-900":"#022858","secondary-text":"#555F6B","secondary-100":"#F2F7FC","secondary-200":"#EBF3FA","secondary-300":"#E2EEF8","secondary-400":"#DDEAF7","secondary-500":"#D4E5F5","secondary-600":"#C1D0DF","secondary-700":"#97A3AE","secondary-800":"#757E87","secondary-900":"#596067","greyscale-000":"#FFFFFF","greyscale-100":"#FAFAFB","greyscale-200":"#F3F4F4","greyscale-300":"#E7E8EA","greyscale-400":"#C2C6CA","greyscale-500":"#9EA3AA","greyscale-600":"#79818A","greyscale-700":"#555F6B","greyscale-800":"#303C4B","greyscale-900":"#0C1A2B","success-text":"#FFFFFF","success-100":"#EFFCD3","success-200":"#DBFAA9","success-300":"#BEF27C","success-400":"#A0E659","success-500":"#76D628","success-600":"#5AB81D","success-700":"#419A14","success-800":"#2C7C0C","success-900":"#1D6607","info-text":"#FFFFFF","info-100":"#EBF2FC","info-200":"#8CB5EA","info-300":"#5894E1","info-400":"#377FDB","info-500":"#055FD2","info-600":"#0556BF","info-700":"#044395","info-800":"#033474","info-900":"#022858","warning-text":"#FFFFFF","warning-100":"#FFF8CD","warning-200":"#FFEF9B","warning-300":"#FFE469","warning-400":"#FFDA43","warning-500":"#FFC805","warning-600":"#DBA603","warning-700":"#B78702","warning-800":"#936901","warning-900":"#7A5400","danger-text":"#FFFFFF","danger-100":"#F4B0B0","danger-200":"#EE8A8A","danger-300":"#E65454","danger-400":"#E13333","danger-500":"#DA0000","danger-600":"#C60000","danger-700":"#9B0000","danger-800":"#780000","danger-900":"#5C0000"},"font":{"sizes":{"h1":"1.75rem","h2":"1.375rem","h3":"1.125rem","h4":"0.8125rem","h5":"0.625rem","h6":"0.5rem","l":"1rem","m":"0.8125rem","s":"0.6875rem"},"weights":{"thin":100,"regular":300,"medium":400,"bold":500,"extrabold":700,"black":900},"families":{"base":"Roboto","accent":"Roboto"}},"spacings":{"xl":"4rem","l":"3rem","b":"1.625rem","s":"1rem","t":"0.5rem","st":"0.25rem"},"transitions":{"ease-in":"cubic-bezier(0.32, 0, 0.67, 0)","ease-out":"cubic-bezier(0.33, 1, 0.68, 1)","ease-in-out":"cubic-bezier(0.65, 0, 0.35, 1)","duration":"250ms"}},"components":{"forms-radio":{"border-color":"#E7E8EA","accent-color":"#419A14"},"forms-input":{"font-weight":400,"font-size":"1rem","border-radius":"8px","border-radius--hover":"2px","border-radius--focus":"2px","border-width":"2px","border-color":"#E7E8EA","border-color--hover":"#9EA3AA","border-color--focus":"#0556BF","border-style":"solid","color":"#303C4B"},"forms-field":{"width":"292px","font-size":"0.6875rem","color":"#79818A"},"forms-checkbox":{"font-size":"0.8125rem","font-weight":400,"color":"#0C1A2B","border-color":"#E7E8EA","border-radius":"2px","accent-color":"#419A14"},"button":{"border-radius":"8px","border-radius--active":"2px","medium-height":"48px","small-height":"32px","medium-font-size":"1rem","small-font-size":"0.8125rem","font-weight":400}}};

1
packages/react/src/index.scss
View File

@@ -5,6 +5,7 @@
@import './components/DataGrid';
@import './components/Forms/Checkbox';
@import './components/Forms/Field';
@import './components/Forms/Radio';
@import './components/Forms/Input';
@import './components/Loader';
@import './components/Pagination';