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

🚨(react) fix lint issues

Browse Source 
Fix the lint for the recent commits.
This commit is contained in:
Nathan Vasse
2025-09-23 15:30:39 +02:00
committed by NathanVss
parent 587e782e61
commit 87dbf922df
35 changed files with 125 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/react/src/components/Alert/AlertAdditionalExpandable.tsx
View File

@@ -11,7 +11,7 @@ export const AlertAdditionalExpandable = (props: AlertProps) => {
const [expanded, onExpand] = useControllableState(
false,
props.expanded,
props.onExpand
props.onExpand,
);
const iconButton = (

2
packages/react/src/components/Alert/Utils.tsx
View File

@@ -14,7 +14,7 @@ export const AlertWrapper = (props: AlertProps) => {
props.className,
{
"c__alert--hide": props.hide,
}
},
)}
>
{props.children}

26
packages/react/src/components/Alert/index.spec.tsx
View File

@@ -17,7 +17,7 @@ describe("<Alert/>", () => {
render(
<CunninghamProvider>
<Alert type={type}>Alert component</Alert>
</CunninghamProvider>
</CunninghamProvider>,
);
const $icon = document.querySelector(".c__alert__icon");
if (icon) {
@@ -32,7 +32,7 @@ describe("<Alert/>", () => {
<Alert type={VariantType.INFO} additional="Additional information">
Alert component
</Alert>
</CunninghamProvider>
</CunninghamProvider>,
);
expect(screen.getByText("Additional information")).toBeInTheDocument();
});
@@ -42,7 +42,7 @@ describe("<Alert/>", () => {
<Alert type={VariantType.INFO} primaryLabel="Primary">
Alert component
</Alert>
</CunninghamProvider>
</CunninghamProvider>,
);
screen.getByRole("button", { name: "Primary" });
});
@@ -52,7 +52,7 @@ describe("<Alert/>", () => {
<Alert type={VariantType.INFO} tertiaryLabel="Tertiary">
Alert component
</Alert>
</CunninghamProvider>
</CunninghamProvider>,
);
screen.getByRole("button", { name: "Tertiary" });
});
@@ -66,7 +66,7 @@ describe("<Alert/>", () => {
>
Alert component
</Alert>
</CunninghamProvider>
</CunninghamProvider>,
);
screen.getByRole("button", { name: "Primary" });
screen.getByRole("button", { name: "Tertiary" });
@@ -85,7 +85,7 @@ describe("<Alert/>", () => {
>
Alert component
</Alert>
</CunninghamProvider>
</CunninghamProvider>,
);
screen.getByRole("button", { name: "Primary Custom" });
screen.getByRole("button", { name: "Secondary Custom" });
@@ -96,7 +96,7 @@ describe("<Alert/>", () => {
<Alert type={VariantType.INFO} canClose={true}>
Alert component
</Alert>
</CunninghamProvider>
</CunninghamProvider>,
);
screen.getByText("Alert component");
@@ -165,14 +165,14 @@ describe("<Alert/>", () => {
>
Alert component
</Alert>
</CunninghamProvider>
</CunninghamProvider>,
);
const user = userEvent.setup();
screen.getByText("Alert component");
expect(
screen.queryByText("Additional information")
screen.queryByText("Additional information"),
).not.toBeInTheDocument();
const $expandButton = screen.getByRole("button", { name: "Expand alert" });
@@ -184,7 +184,7 @@ describe("<Alert/>", () => {
await user.click($shrinkButton);
expect(
screen.queryByText("Additional information")
screen.queryByText("Additional information"),
).not.toBeInTheDocument();
});
it("can expand the alert controlled", async () => {
@@ -226,7 +226,7 @@ describe("<Alert/>", () => {
screen.getByText("Expanded: false");
expect(
screen.queryByText("Additional information")
screen.queryByText("Additional information"),
).not.toBeInTheDocument();
// Expand from alert.
@@ -246,14 +246,14 @@ describe("<Alert/>", () => {
screen.getByText("Expanded: false");
expect(
screen.queryByText("Additional information")
screen.queryByText("Additional information"),
).not.toBeInTheDocument();
});
it("renders with className", async () => {
render(<Alert className="my-custom-class" />);
expect(
document.querySelector(".c__alert.my-custom-class")
document.querySelector(".c__alert.my-custom-class"),
).toBeInTheDocument();
});
});

3
packages/react/src/components/Alert/tokens.ts
View File

@@ -2,7 +2,8 @@ import { DefaultTokens } from "@openfun/cunningham-tokens";
export const tokens = (defaults: DefaultTokens) => {
return {
"background-color": defaults.contextuals.background.semantic.neutral.tertiary,
"background-color":
defaults.contextuals.background.semantic.neutral.tertiary,
"border-radius": "4px",
"border-color": defaults.contextuals.border.semantic.neutral.primary,
"border-left-color": defaults.contextuals.border.semantic.neutral.primary,

2
packages/react/src/components/Button/index.tsx
View File

@@ -79,6 +79,6 @@ export const Button = ({
{!!icon && iconPosition === "left" && iconElement}
{children}
{!!icon && iconPosition === "right" && iconElement}
</>
</>,
);
};

30
packages/react/src/components/DataGrid/index.spec.tsx
View File

@@ -97,7 +97,7 @@ describe("<DataGrid/>", () => {
fetchMock.mockIf(
"https://example.com/?page=1&sort=lastName&sortOrder=desc",
() => deferred.promise
() => deferred.promise,
);
render(<Component />);
@@ -115,8 +115,8 @@ describe("<DataGrid/>", () => {
JSON.stringify({
rows: database.slice(0, 10),
count: database.length,
})
)
}),
),
);
// Make sure the loader disappears.
@@ -124,8 +124,8 @@ describe("<DataGrid/>", () => {
expect(
screen.queryByRole("status", {
name: "Loading data",
})
).toBeNull()
}),
).toBeNull(),
);
// Make sure the rows are rendered.
@@ -154,7 +154,7 @@ describe("<DataGrid/>", () => {
deferred = new Deferred();
fetchMock.mockIf(
"https://example.com/?page=2&sort=lastName&sortOrder=desc",
() => deferred.promise
() => deferred.promise,
);
// Go to page 2.
@@ -187,8 +187,8 @@ describe("<DataGrid/>", () => {
JSON.stringify({
rows: database.slice(10, 20),
count: database.length,
})
)
}),
),
);
// Make sure the loader disappears.
@@ -196,8 +196,8 @@ describe("<DataGrid/>", () => {
expect(
screen.queryByRole("status", {
name: "Loading data",
})
).toBeNull()
}),
).toBeNull(),
);
// Make sure the rows are rendered.
@@ -330,15 +330,15 @@ describe("<DataGrid/>", () => {
expect(tds.length).toBe(3);
expect(tds[0].textContent).toEqual(row.firstName);
expect(Array.from(tds[0].classList)).toContain(
"c__datagrid__row__cell--highlight"
"c__datagrid__row__cell--highlight",
);
expect(tds[1].textContent).toEqual(row.lastName);
expect(Array.from(tds[1].classList)).not.toContain(
"c__datagrid__row__cell--highlight"
"c__datagrid__row__cell--highlight",
);
expect(tds[2].textContent).toEqual(row.email);
expect(Array.from(tds[2].classList)).toContain(
"c__datagrid__row__cell--highlight"
"c__datagrid__row__cell--highlight",
);
});
});
@@ -395,10 +395,10 @@ describe("<DataGrid/>", () => {
rows={[]}
className="my-custom-class"
/>
</CunninghamProvider>
</CunninghamProvider>,
);
expect(
document.querySelector(".c__datagrid.my-custom-class")
document.querySelector(".c__datagrid.my-custom-class"),
).toBeInTheDocument();
});

6
packages/react/src/components/DataGrid/index.stories.tsx
View File

@@ -198,14 +198,14 @@ export const FullServerSide = () => {
setTimeout(() => {
// Set the pagination length.
pagination.setPagesCount(
Math.ceil(sortedDatabase.length / pagination.pageSize)
Math.ceil(sortedDatabase.length / pagination.pageSize),
);
// Select the rows to display on the current page.
setRows(
sortedDatabase.slice(
(pagination.page - 1) * pagination.pageSize,
pagination.page * pagination.pageSize
)
pagination.page * pagination.pageSize,
),
);
setIsLoading(false);
}, 1000);

16
packages/react/src/components/DataGrid/index.tsx
View File

@@ -102,7 +102,7 @@ export const DataGrid = <T extends Row>({
headlessColumns.forEach((column) => {
if (column.enableSorting && !onSortModelChange) {
console.warn(
"You are using a column with sorting enabled, but you are not providing an `onSortModelChange` handler. The sorting will not work as expected."
"You are using a column with sorting enabled, but you are not providing an `onSortModelChange` handler. The sorting will not work as expected.",
);
}
});
@@ -112,11 +112,11 @@ export const DataGrid = <T extends Row>({
*/
const paginationState = useMemo(
() => paginationToPaginationState(pagination),
[pagination]
[pagination],
);
const headlessSorting = useMemo(
() => sortModelToSortingState(sortModel),
[sortModel]
[sortModel],
);
/**
@@ -139,7 +139,7 @@ export const DataGrid = <T extends Row>({
// a TS error.
if (typeof newHeadlessSorting === "function") {
onSortModelChange?.(
sortingStateToSortModel(newHeadlessSorting(headlessSorting))
sortingStateToSortModel(newHeadlessSorting(headlessSorting)),
);
}
},
@@ -221,7 +221,7 @@ export const DataGrid = <T extends Row>({
{
"c__datagrid__header--sortable":
header.column.getCanSort(),
}
},
)}
{...(header.column.getCanSort()
? {
@@ -240,13 +240,13 @@ export const DataGrid = <T extends Row>({
indeterminate={table.getIsSomeRowsSelected()}
onChange={table.getToggleAllRowsSelectedHandler()}
aria-label={t(
"components.datagrid.rows_selection_aria"
"components.datagrid.rows_selection_aria",
)}
/>
) : (
flexRender(
header.column.columnDef.header,
header.getContext()
header.getContext(),
)
)}
{header.column.getIsSorted() === "asc" && (
@@ -303,7 +303,7 @@ export const DataGrid = <T extends Row>({
>
{flexRender(
cell.column.columnDef.cell,
cell.getContext()
cell.getContext(),
)}
</td>
);

9
packages/react/src/components/Forms/Checkbox/tokens.ts
View File

@@ -12,9 +12,12 @@ export const tokens = (defaults: DefaultTokens) => ({
"accent-color": defaults.contextuals.content.semantic.contextual.primary,
size: "1.5rem",
"background-color--checked": defaults.contextuals.content.semantic.brand.tertiary,
"background-color--checked":
defaults.contextuals.content.semantic.brand.tertiary,
"background-color--indeterminate":
defaults.contextuals.content.semantic.brand.tertiary,
"background-color--disabled": defaults.contextuals.content.semantic.disabled.primary,
"border-color--disabled": defaults.contextuals.content.semantic.disabled.primary,
"background-color--disabled":
defaults.contextuals.content.semantic.disabled.primary,
"border-color--disabled":
defaults.contextuals.content.semantic.disabled.primary,
});

29
packages/react/src/components/Forms/DatePicker/Calendar.tsx
View File

@@ -117,7 +117,7 @@ const CalendarAux = ({
const monthItems: Array<Option> = useMemo(() => {
// Note that in some calendar systems, such as the Hebrew, the number of months may differ between years.
const numberOfMonths = state.focusedDate.calendar.getMonthsInYear(
state.focusedDate
state.focusedDate,
);
return range(1, numberOfMonths).map((monthNumber) => {
const date = state.focusedDate.set({ month: monthNumber });
@@ -133,15 +133,16 @@ const CalendarAux = ({
const yearItems: Array<Option> = useMemo(() => {
const calendarCurrentUser = createCalendar(
new Intl.DateTimeFormat().resolvedOptions().calendar as CalendarIdentifier
new Intl.DateTimeFormat().resolvedOptions()
.calendar as CalendarIdentifier,
);
const minDate = toCalendar(
new CalendarDate(new GregorianCalendar(), minYear, 1, 1),
calendarCurrentUser
calendarCurrentUser,
);
const maxDate = toCalendar(
new CalendarDate(new GregorianCalendar(), maxYear, 12, 31),
calendarCurrentUser
calendarCurrentUser,
);
return range(minDate.year, maxDate.year).map((yearNumber) => {
const date = state.focusedDate.set({ year: yearNumber });
@@ -157,7 +158,7 @@ const CalendarAux = ({
const useDownshiftSelect = (
key: string,
items: Array<Option>
items: Array<Option>,
): UseSelectReturnValue<Option> => {
return useSelect({
items,
@@ -214,12 +215,12 @@ const CalendarAux = ({
const getToggleButtonProps = (
key: string,
items: Array<Option>,
downshift: UseSelectReturnValue<Option>
downshift: UseSelectReturnValue<Option>,
) => ({
...downshift.getToggleButtonProps(),
onClick: () => {
const selectedItem = items.find(
(item) => item.value === state.focusedDate[key as keyof CalendarDate]
(item) => item.value === state.focusedDate[key as keyof CalendarDate],
);
if (selectedItem) {
downshift.selectItem(selectedItem);
@@ -227,7 +228,7 @@ const CalendarAux = ({
downshift.toggleMenu();
},
"aria-label": t(
`components.forms.date_picker.${key}_select_button_aria_label`
`components.forms.date_picker.${key}_select_button_aria_label`,
),
});
@@ -263,7 +264,7 @@ const CalendarAux = ({
{...{
...prevButtonOtherProps,
"aria-label": t(
"components.forms.date_picker.previous_month_button_aria_label"
"components.forms.date_picker.previous_month_button_aria_label",
),
}}
disabled={isPrevButtonDisabled}
@@ -281,7 +282,7 @@ const CalendarAux = ({
{...getToggleButtonProps("month", monthItems, downshiftMonth)}
>
{selectedMonthItemFormatter.format(
state.focusedDate.toDate(state.timeZone)
state.focusedDate.toDate(state.timeZone),
)}
</Button>
<Button
@@ -293,7 +294,7 @@ const CalendarAux = ({
{...{
...nextButtonOtherProps,
"aria-label": t(
"components.forms.date_picker.next_month_button_aria_label"
"components.forms.date_picker.next_month_button_aria_label",
),
}}
disabled={isNextButtonDisabled}
@@ -312,7 +313,7 @@ const CalendarAux = ({
state.minValue.year > state.focusedDate.add({ years: -1 }).year
}
aria-label={t(
"components.forms.date_picker.previous_year_button_aria_label"
"components.forms.date_picker.previous_year_button_aria_label",
)}
type="button"
/>
@@ -327,7 +328,7 @@ const CalendarAux = ({
{...getToggleButtonProps("year", yearItems, downshiftYear)}
>
{yearItemsFormatter.format(
state.focusedDate.toDate(state.timeZone)
state.focusedDate.toDate(state.timeZone),
)}
</Button>
<Button
@@ -341,7 +342,7 @@ const CalendarAux = ({
state.maxValue.year < state.focusedDate.add({ years: 1 }).year
}
aria-label={t(
"components.forms.date_picker.next_year_button_aria_label"
"components.forms.date_picker.next_year_button_aria_label",
)}
type="button"
/>

4
packages/react/src/components/Forms/DatePicker/CalendarCell.tsx
View File

@@ -75,9 +75,9 @@ export const CalendarCell = ({ state, date }: CalendarCellProps) => {
isSelected,
"c__calendar__wrapper__grid__week-row__button--today": isToday(
date,
getLocalTimeZone()
getLocalTimeZone(),
),
}
},
)}
type="button"
disabled={isDisabled}

12
packages/react/src/components/Forms/DatePicker/DatePickerAux.tsx
View File

@@ -76,7 +76,7 @@ const DatePickerAux = ({
const isDateInvalid = useMemo(
() => pickerState.validationState === "invalid" || props.state === "error",
[pickerState.validationState, props.state]
[pickerState.validationState, props.state],
);
return (
@@ -114,7 +114,7 @@ const DatePickerAux = ({
name={name && `${name}_start`}
value={convertDateValueToString(
pickerState.value?.start ?? null,
props.timezone
props.timezone,
)}
/>
<input
@@ -122,7 +122,7 @@ const DatePickerAux = ({
name={name && `${name}_end`}
value={convertDateValueToString(
pickerState.value?.end ?? null,
props.timezone
props.timezone,
)}
/>
</>
@@ -132,7 +132,7 @@ const DatePickerAux = ({
name={name}
value={convertDateValueToString(
pickerState.value,
props.timezone
props.timezone,
)}
/>
)}
@@ -148,7 +148,7 @@ const DatePickerAux = ({
aria-label={t(
pickerState.isOpen
? "components.forms.date_picker.toggle_button_aria_label_close"
: "components.forms.date_picker.toggle_button_aria_label_open"
: "components.forms.date_picker.toggle_button_aria_label_open",
)}
color="neutral"
variant="tertiary"
@@ -178,7 +178,7 @@ const DatePickerAux = ({
}
}}
aria-label={t(
"components.forms.date_picker.clear_button_aria_label"
"components.forms.date_picker.clear_button_aria_label",
)}
disabled={disabled}
type="button"

2
packages/react/src/components/Forms/DatePicker/index.stories.tsx
View File

@@ -140,7 +140,7 @@ export const ReactHookForm = () => {
resolver: yupResolver(
Yup.object().shape({
date: Yup.string().required(),
})
}),
),
});

12
packages/react/src/components/Forms/DatePicker/tokens.ts
View File

@@ -2,7 +2,8 @@ import { DefaultTokens } from "@openfun/cunningham-tokens";
export const tokens = (defaults: DefaultTokens) => ({
"border-color": defaults.contextuals.border.semantic.neutral.tertiary,
"border-color--disabled": defaults.contextuals.border.semantic.disabled.primary,
"border-color--disabled":
defaults.contextuals.border.semantic.disabled.primary,
"border-color--focus": defaults.contextuals.border.semantic.brand.primary,
"border-color--hover": defaults.contextuals.border.semantic.neutral.secondary,
"border-radius": "8px",
@@ -11,7 +12,8 @@ export const tokens = (defaults: DefaultTokens) => ({
"border-style": "solid",
"border-width": "1px",
"value-color": defaults.contextuals.content.semantic.neutral.tertiary,
"value-color--disabled": defaults.contextuals.content.semantic.disabled.primary,
"value-color--disabled":
defaults.contextuals.content.semantic.disabled.primary,
"font-size": defaults.globals.font.sizes.lg,
height: "3.5rem",
"item-background-color--hover":
@@ -26,7 +28,9 @@ export const tokens = (defaults: DefaultTokens) => ({
defaults.contextuals.background.semantic.brand.tertiary,
"range-selection-background-color--disabled":
defaults.contextuals.background.semantic.neutral.tertiary,
"grid-cell--border-color--today": defaults.contextuals.border.semantic.brand.primary,
"grid-cell--color--today": defaults.contextuals.content.semantic.brand.primary,
"grid-cell--border-color--today":
defaults.contextuals.border.semantic.brand.primary,
"grid-cell--color--today":
defaults.contextuals.content.semantic.brand.primary,
"label-color--focus": defaults.contextuals.border.semantic.brand.secondary,
});

2
packages/react/src/components/Forms/FileUploader/FileUploaderMono.tsx
View File

@@ -13,7 +13,7 @@ export const FileUploaderMono = ({
const [file, setFile] = useState<File | undefined>(
fakeDefaultFiles && fakeDefaultFiles.length > 0
? fakeDefaultFiles[0]
: undefined
: undefined,
);
// This is made to prevent useEffects inside DropZone that depends on `files` to trigger on each render,
// doing this preserves the reference of the array.

2
packages/react/src/components/Forms/FileUploader/FileUploaderMulti.tsx
View File

@@ -45,7 +45,7 @@ export const FileUploaderMulti = ({
"components.forms.file_uploader.delete_file_name",
{
name: file.name,
}
},
)}
onClick={() => {
setFiles(files.filter((f) => f !== file));

2
packages/react/src/components/Forms/Input/InputPassword.tsx
View File

@@ -26,7 +26,7 @@ export const InputPassword = (props: Omit<InputProps, "rightIcon">) => {
color="neutral"
size="small"
aria-label={t(
`components.forms.input.password.${showPassword ? "hide" : "show"}_password`
`components.forms.input.password.${showPassword ? "hide" : "show"}_password`,
)}
/>
}

2
packages/react/src/components/Forms/Input/index.stories.tsx
View File

@@ -259,7 +259,7 @@ export const ReactHookForm = () => {
mode: "onChange",
reValidateMode: "onChange",
resolver: yupResolver(inputExampleSchema),
}
},
);
return (

3
packages/react/src/components/Forms/Input/tokens.ts
View File

@@ -18,5 +18,6 @@ export const tokens = (defaults: DefaultTokens) => ({
"label-color--focus": defaults.contextuals.content.semantic.brand.primary,
"background-color": defaults.contextuals.background.surface.secondary,
"value-color": defaults.contextuals.content.semantic.neutral.primary,
"value-color--disabled": defaults.contextuals.content.semantic.disabled.primary,
"value-color--disabled":
defaults.contextuals.content.semantic.disabled.primary,
});

3
packages/react/src/components/Forms/LabelledBox/tokens.ts
View File

@@ -5,5 +5,6 @@ export const tokens = (defaults: DefaultTokens) => ({
"label-color--big": defaults.contextuals.content.semantic.neutral.primary,
"label-color--small--disabled":
defaults.contextuals.content.semantic.neutral.secondary,
"label-color--big--disabled": defaults.contextuals.content.semantic.neutral.secondary,
"label-color--big--disabled":
defaults.contextuals.content.semantic.neutral.secondary,
});

3
packages/react/src/components/Forms/Radio/tokens.ts
View File

@@ -2,7 +2,8 @@ import { DefaultTokens } from "@openfun/cunningham-tokens";
export const tokens = (defaults: DefaultTokens) => ({
"border-color": defaults.contextuals.border.semantic.neutral.tertiary,
"border-color--disabled": defaults.contextuals.border.semantic.neutral.tertiary,
"border-color--disabled":
defaults.contextuals.border.semantic.neutral.tertiary,
"accent-color": defaults.contextuals.content.semantic.brand.tertiary,
"background-color": defaults.contextuals.background.surface.primary,
});

4
packages/react/src/components/Forms/Select/mono-common.tsx
View File

@@ -101,7 +101,7 @@ export const SelectMonoAux = ({
"c__select--" + state,
{
"c__select--disabled": disabled,
}
},
)}
onBlur={() =>
onBlur?.({ target: { value: downshiftReturn.selectedItem?.value } })
@@ -142,7 +142,7 @@ export const SelectMonoAux = ({
color="neutral"
size="nano"
aria-label={t(
"components.forms.select.clear_button_aria_label"
"components.forms.select.clear_button_aria_label",
)}
className="c__select__inner__actions__clear"
onClick={(e) => {

8
packages/react/src/components/Forms/Select/multi-common.tsx
View File

@@ -24,14 +24,14 @@ import { SelectMultiMenu } from ":/components/Forms/Select/multi-menu";
*/
export function getMultiOptionsFilter(
selectedOptions: Option[],
inputValue?: string
inputValue?: string,
) {
const optionsFilter = getOptionsFilter(inputValue);
return (option: Option) => {
return (
!selectedOptions.find(
(selectedOption) =>
optionToValue(selectedOption) === optionToValue(option)
optionToValue(selectedOption) === optionToValue(option),
) && optionsFilter(option)
);
};
@@ -83,7 +83,7 @@ export const SelectMultiAux = ({ children, ...props }: SelectMultiAuxProps) => {
"c__select--populated": props.selectedItems.length > 0,
"c__select--monoline": props.monoline,
"c__select--multiline": !props.monoline,
}
},
)}
>
<div
@@ -121,7 +121,7 @@ export const SelectMultiAux = ({ children, ...props }: SelectMultiAuxProps) => {
color="neutral"
size="nano"
aria-label={t(
"components.forms.select.clear_all_button_aria_label"
"components.forms.select.clear_all_button_aria_label",
)}
className="c__select__inner__actions__clear"
onClick={(e) => {

2
packages/react/src/components/Forms/Select/multi-selected-items.tsx
View File

@@ -49,7 +49,7 @@ const SelectedItemsChips = ({
onClick={(e) => {
e.stopPropagation();
useMultipleSelectionReturn.removeSelectedItem(
selectedItemForRender
selectedItemForRender,
);
}}
icon={<span className="material-icons">close</span>}

2
packages/react/src/components/Forms/Select/multi.stories.tsx
View File

@@ -509,7 +509,7 @@ export const ReactHookForm = () => {
.test({
test: (cityList) =>
cityList.every((city) =>
[CitiesOptionEnum.PARIS, CitiesOptionEnum.TOKYO].includes(city)
[CitiesOptionEnum.PARIS, CitiesOptionEnum.TOKYO].includes(city),
),
message: "Wrong answer!",
}),

6
packages/react/src/components/Forms/Select/tokens.ts
View File

@@ -10,7 +10,8 @@ export const tokens = (defaults: DefaultTokens) => ({
"border-style": "solid",
"border-width": "1px",
"value-color": defaults.contextuals.content.semantic.neutral.primary,
"value-color--disabled": defaults.contextuals.content.semantic.disabled.primary,
"value-color--disabled":
defaults.contextuals.content.semantic.disabled.primary,
"font-size": defaults.globals.font.sizes.md,
height: "3.5rem",
"item-background-color--hover":
@@ -18,7 +19,8 @@ export const tokens = (defaults: DefaultTokens) => ({
"item-background-color--selected":
defaults.contextuals.background.semantic.brand.secondary,
"item-color": defaults.contextuals.content.semantic.neutral.primary,
"item-color--disabled": defaults.contextuals.content.semantic.disabled.secondary,
"item-color--disabled":
defaults.contextuals.content.semantic.disabled.secondary,
"item-font-size": defaults.globals.font.sizes.md,
"background-color": defaults.contextuals.background.surface.primary,
"menu-background-color": defaults.contextuals.background.surface.primary,

2
packages/react/src/components/Forms/Switch/index.tsx
View File

@@ -41,7 +41,7 @@ export const Switch = ({
{
"c__checkbox--disabled": props.disabled,
"c__switch--full-width": props.fullWidth,
}
},
)}
>
<Field compact={true} {...fieldProps}>

6
packages/react/src/components/Forms/Switch/tokens.ts
View File

@@ -2,11 +2,13 @@ import { DefaultTokens } from "@openfun/cunningham-tokens";
export const tokens = (defaults: DefaultTokens) => ({
"accent-color": defaults.contextuals.content.semantic.brand.tertiary,
"rail-background-color": defaults.contextuals.content.semantic.neutral.tertiary,
"rail-background-color":
defaults.contextuals.content.semantic.neutral.tertiary,
"rail-background-color--disabled":
defaults.contextuals.content.semantic.disabled.primary,
"rail-border-radius": "50vw",
"handle-background-color": defaults.contextuals.content.semantic.contextual.primary,
"handle-background-color":
defaults.contextuals.content.semantic.contextual.primary,
"handle-background-color--disabled":
defaults.contextuals.content.semantic.disabled.secondary,
"handle-border-radius": "50%",

6
packages/react/src/components/Forms/TextArea/tokens.ts
View File

@@ -10,10 +10,12 @@ export const tokens = (defaults: DefaultTokens) => ({
"border-color": defaults.contextuals.border.semantic.neutral.tertiary,
"border-color--hover": defaults.contextuals.border.semantic.neutral.secondary,
"border-color--focus": defaults.contextuals.border.semantic.brand.primary,
"border-color--disabled": defaults.contextuals.border.semantic.disabled.primary,
"border-color--disabled":
defaults.contextuals.border.semantic.disabled.primary,
"border-style": "solid",
"label-color--focus": defaults.contextuals.border.semantic.brand.primary,
"background-color": defaults.contextuals.background.surface.primary,
"value-color": defaults.contextuals.content.semantic.neutral.primary,
"value-color--disabled": defaults.contextuals.content.semantic.neutral.secondary,
"value-color--disabled":
defaults.contextuals.content.semantic.neutral.secondary,
});

2
packages/react/src/components/Modal/MessageModal.tsx
View File

@@ -26,7 +26,7 @@ export const MessageModal = ({
<span
className={classNames(
"material-icons",
`modal-message-${messageType}-icon`
`modal-message-${messageType}-icon`,
)}
>
{iconFromType(messageType)}

2
packages/react/src/components/Toast/index.tsx
View File

@@ -45,7 +45,7 @@ export const Toast = (props: ToastProps) => {
const removeAfterAnimation = async () => {
await Promise.allSettled(
container.current!.getAnimations().map((animation) => animation.finished)
container.current!.getAnimations().map((animation) => animation.finished),
);
props.onDelete?.();
};

3
packages/react/src/components/Toast/tokens.ts
View File

@@ -4,7 +4,8 @@ export const tokens = (defaults: DefaultTokens) => {
return {
"slide-in-duration": "1000ms",
"slide-out-duration": "300ms",
"background-color": defaults.contextuals.background.semantic.neutral.tertiary,
"background-color":
defaults.contextuals.background.semantic.neutral.tertiary,
color: defaults.contextuals.content.semantic.neutral.primary,
"font-weight": defaults.globals.font.weights.regular,
"icon-size": "19px",

10
packages/react/src/components/Tooltip/index.spec.tsx
View File

@@ -17,7 +17,7 @@ describe("<Tooltip />", () => {
<Button size="nano" variant="tertiary">
⬅️
</Button>
</Tooltip>
</Tooltip>,
);
const button = screen.getByRole("button");
@@ -36,7 +36,7 @@ describe("<Tooltip />", () => {
<Button size="nano" variant="tertiary">
⬅️
</Button>
</Tooltip>
</Tooltip>,
);
expect(screen.queryByText("Hi there")).not.toBeInTheDocument();
@@ -54,7 +54,7 @@ describe("<Tooltip />", () => {
<Button size="nano" variant="tertiary">
⬅️
</Button>
</Tooltip>
</Tooltip>,
);
expect(screen.queryByText("Hi there")).not.toBeInTheDocument();
@@ -105,7 +105,7 @@ describe("<Tooltip />", () => {
<Button size="nano" variant="tertiary">
⬅️
</Button>
</Tooltip>
</Tooltip>,
);
const button = screen.getByRole("button");
@@ -131,7 +131,7 @@ describe("<Tooltip />", () => {
<Button size="nano" variant="tertiary">
⬅️
</Button>
</Tooltip>
</Tooltip>,
);
const button = screen.getByRole("button");

4
packages/react/src/docs/colors.stories.tsx
View File

@@ -99,7 +99,7 @@ export const ContextualBackgrounds: Story = {
}));
}
return [];
}
},
);
// Group by category
@@ -111,7 +111,7 @@ export const ContextualBackgrounds: Story = {
acc[entry.category].push(entry);
return acc;
},
{} as Record<string, typeof backgroundEntries>
{} as Record<string, typeof backgroundEntries>,
);
return (

2
packages/react/src/docs/spacings.stories.tsx
View File

@@ -14,7 +14,7 @@ export const Default: Story = {
// Trier les espacements par valeur croissante avant de les afficher
// Sort spacings by value before rendering
const sortedSpacings = Object.entries(
tokens.themes.default.globals.spacings
tokens.themes.default.globals.spacings,
).sort((a, b) => {
// On retire les éventuelles unités pour comparer numériquement
const parse = (v: any) =>