d64400d66b
* Added proper dark mode support for buttons, and converted buttons to use CVA for better maintainable variant styling. * Added animations to buttons. * Added cva types to buttonbase type since thats imported in different places * Fixed issue with styled buttons when false was pas for disabled instead of undefined. Added a small util function that now accepts arrays of variants, and creates all the possible combinations. This way we have less duplicate compoundvariants defined. This fixes the styles in the eventsinglelayout component. * Undo disabling of api jest tests. * Fixed remaining buttons using combined prop, which is replace by button group. Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
53 lines
2.0 KiB
TypeScript
53 lines
2.0 KiB
TypeScript
import { applyStyleToMultipleVariants } from "./cva";
|
|
|
|
describe("CVA Utils", () => {
|
|
it("Should return an array of all possible variants", () => {
|
|
const variants = {
|
|
color: ["blue", "red"],
|
|
size: ["small", "medium", "large"],
|
|
className: "text-blue w-10",
|
|
};
|
|
|
|
const result = applyStyleToMultipleVariants(variants);
|
|
expect(result).toEqual([
|
|
{ color: "blue", size: "small", className: "text-blue w-10" },
|
|
{ color: "blue", size: "medium", className: "text-blue w-10" },
|
|
{ color: "blue", size: "large", className: "text-blue w-10" },
|
|
{ color: "red", size: "small", className: "text-blue w-10" },
|
|
{ color: "red", size: "medium", className: "text-blue w-10" },
|
|
{ color: "red", size: "large", className: "text-blue w-10" },
|
|
]);
|
|
});
|
|
|
|
it("Should no erorr when no arrays are passed in", () => {
|
|
const variants = {
|
|
color: "blue",
|
|
size: "large",
|
|
className: "text-blue w-10",
|
|
};
|
|
|
|
const result = applyStyleToMultipleVariants(variants);
|
|
expect(result).toEqual([{ color: "blue", size: "large", className: "text-blue w-10" }]);
|
|
});
|
|
|
|
it("Should accept numbers, null values, booleans and undefined in arrays as well", () => {
|
|
const variants = {
|
|
color: ["blue", null],
|
|
size: ["small", 30, false, undefined],
|
|
className: "text-blue w-10",
|
|
};
|
|
|
|
const result = applyStyleToMultipleVariants(variants);
|
|
expect(result).toEqual([
|
|
{ color: "blue", size: "small", className: "text-blue w-10" },
|
|
{ color: "blue", size: 30, className: "text-blue w-10" },
|
|
{ color: "blue", size: false, className: "text-blue w-10" },
|
|
{ color: "blue", size: undefined, className: "text-blue w-10" },
|
|
{ color: null, size: "small", className: "text-blue w-10" },
|
|
{ color: null, size: 30, className: "text-blue w-10" },
|
|
{ color: null, size: false, className: "text-blue w-10" },
|
|
{ color: null, size: undefined, className: "text-blue w-10" },
|
|
]);
|
|
});
|
|
});
|