Skip to content

Commit

Permalink
Improve scalability to allow more than two screen sizes
Browse files Browse the repository at this point in the history
  • Loading branch information
@adrianbruntonsagecom
adrianbruntonsagecom committed Sep 19, 2024
1 parent f4bf4b2 commit b988be7
Show file tree
Hide file tree
Showing 12 changed files with 950 additions and 382 deletions.
295 changes: 216 additions & 79 deletions scripts/post-process-css/brand-tokens.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,65 +3,109 @@ import { BrandTokens } from "./brand-tokens";
import { ScreenSizeTokens } from "./screen-size-tokens";

describe("BrandTokens", () => {
describe("toString", () => {
const sizeTokens = new ScreenSizeTokens(
[
{
name: "--global-prop1",
value: "value1",
},
{
name: "--global-prop2",
value: "value2",
comment: "/* Some comment */",
},
],
[
{
name: "--prop1-light",
value: "value1",
comment: "/* Some comment */",
},
{
name: "--prop2-light",
value: "value2",
},
],
[
{
name: "--prop1-dark",
value: "value1",
},
{
name: "--prop2-dark",
value: "value2",
},
],
{
badge: [
{
name: "--badge-prop1",
value: "badge-value1",
},
{
name: "--badge-prop2",
value: "badge-value2",
},
],
button: [
{
name: "--button-prop1",
value: "button-value1",
},
{
name: "--button-prop2",
value: "button-value2",
comment: "/* Some comment */",
},
],
}
);
describe("constructor", () => {
it("should not throw an error when zero min-width screen size is available", () => {
expect(
() =>
new BrandTokens([
new ScreenSizeTokens(
[{ name: "--breakpoint-min-width", value: "0" }],
[],
[],
{}
),
new ScreenSizeTokens(
[{ name: "--breakpoint-min-width", value: "1024px" }],
[],
[],
{}
),
])
).to.not.throw();
});

it("should not throw an error when undefined screen size size is available", () => {
expect(
() =>
new BrandTokens([
new ScreenSizeTokens(
[{ name: "--title-color", value: "#FFFFFF" }],
[],
[],
{}
),
new ScreenSizeTokens(
[{ name: "--breakpoint-min-width", value: "1024px" }],
[],
[],
{}
),
])
).to.not.throw();
});

it("should throw an error when no screen sizes provided with zero min-width or undefined breakpoint", () => {
expect(
() =>
new BrandTokens([
new ScreenSizeTokens(
[{ name: "--breakpoint-min-width", value: "1024px" }],
[],
[],
{}
),
])
).to.throw(
"Brand tokens must have at least one set of screen size tokens with zero min-width breakpoint"
);
});

it("should throw an error when duplicate min-width screen size breakpoints are provided", () => {
expect(
() =>
new BrandTokens([
new ScreenSizeTokens(
[{ name: "--breakpoint-min-width", value: "1024px" }],
[],
[],
{}
),
new ScreenSizeTokens(
[{ name: "--breakpoint-min-width", value: "728px" }],
[],
[],
{}
),
new ScreenSizeTokens(
[{ name: "--breakpoint-min-width", value: "1024px" }],
[],
[],
{}
),
new ScreenSizeTokens(
[{ name: "--breakpoint-min-width", value: "728px" }],
[],
[],
{}
),
new ScreenSizeTokens(
[{ name: "--breakpoint-min-width", value: "" }],
[],
[],
{}
),
new ScreenSizeTokens(
[{ name: "--breakpoint-min-width", value: "980px" }],
[],
[],
{}
),
])
).to.throw("Duplicate min-width breakpoints found: 1024, 728");
});
});

describe("toString", () => {
const expectedSingleSizeTokenResult = `:root {
/* Global tokens */
--global-prop1: value1;
Expand All @@ -86,42 +130,69 @@ describe("BrandTokens", () => {
`;

it("should return expected string when provided no tokens", () => {
const tokens = new BrandTokens(
new ScreenSizeTokens([], [], [], {}),
new ScreenSizeTokens([], [], [], {})
);
const tokens = new BrandTokens([]);

const result = tokens.toString();
expect(result).to.be.empty;
});

it("should return expected string when provided no useful tokens", () => {
const tokens = new BrandTokens([
new ScreenSizeTokens(
[
{
name: "--breakpoint-min-width",
value: `0`,
},
],
[],
[],
{}
),
new ScreenSizeTokens(
[
{
name: "--breakpoint-min-width",
value: `1024px`,
},
],
[],
[],
{}
),
]);

const result = tokens.toString();
expect(result).to.be.empty;
});

it("should return expected string when only provided small tokens", () => {
const tokens = new BrandTokens(
sizeTokens,
new ScreenSizeTokens([], [], [], {})
);
const tokens = new BrandTokens([generateScreenSizeTokens()]);

const result = tokens.toString();
expect(result).to.equal(expectedSingleSizeTokenResult);
});

it("should return expected string when only provided large tokens", () => {
const tokens = new BrandTokens(
const tokens = new BrandTokens([
new ScreenSizeTokens([], [], [], {}),
sizeTokens
);
generateScreenSizeTokens(1024),
]);

const result = tokens.toString();
expect(result).to.equal(expectedSingleSizeTokenResult);
});

it("should return expected string when provided fully populated object", () => {
const tokens = new BrandTokens(sizeTokens, sizeTokens);
const tokens = new BrandTokens([
generateScreenSizeTokens(1024),
generateScreenSizeTokens(0),
]);

const result = tokens.toString();
expect(result).to.equal(
`${expectedSingleSizeTokenResult}
@media (width > 1024px) {
@media (width >= 1024px) {
:root {
/* Global tokens */
--global-prop1: value1;
Expand Down Expand Up @@ -149,7 +220,7 @@ describe("BrandTokens", () => {
});

it("should return expected string with only light tokens", () => {
const tokens = new BrandTokens(
const tokens = new BrandTokens([
new ScreenSizeTokens(
[],
[
Expand All @@ -165,8 +236,7 @@ describe("BrandTokens", () => {
[],
{}
),
new ScreenSizeTokens([], [], [], {})
);
]);

const result = tokens.toString();
expect(result).to.equal(
Expand All @@ -179,9 +249,8 @@ describe("BrandTokens", () => {
);
});

it("should return expected string with only one component", () => {
const tokens = new BrandTokens(
new ScreenSizeTokens([], [], [], {}),
it("should return expected string with only one screen size", () => {
const tokens = new BrandTokens([
new ScreenSizeTokens([], [], [], {
accordion: [],
badge: [
Expand All @@ -191,8 +260,8 @@ describe("BrandTokens", () => {
},
],
button: [],
})
);
}),
]);

const result = tokens.toString();
expect(result).to.equal(
Expand All @@ -203,5 +272,73 @@ describe("BrandTokens", () => {
`
);
});

function generateScreenSizeTokens(
minWidthBreakpoint: number = 0
): ScreenSizeTokens {
const sizeTokens = new ScreenSizeTokens(
[
{
name: "--global-prop1",
value: "value1",
},
{
name: "--global-prop2",
value: "value2",
comment: "/* Some comment */",
},
{
name: "--breakpoint-min-width",
value: `${minWidthBreakpoint}px`,
},
],
[
{
name: "--prop1-light",
value: "value1",
comment: "/* Some comment */",
},
{
name: "--prop2-light",
value: "value2",
},
],
[
{
name: "--prop1-dark",
value: "value1",
},
{
name: "--prop2-dark",
value: "value2",
},
],
{
badge: [
{
name: "--badge-prop1",
value: "badge-value1",
},
{
name: "--badge-prop2",
value: "badge-value2",
},
],
button: [
{
name: "--button-prop1",
value: "button-value1",
},
{
name: "--button-prop2",
value: "button-value2",
comment: "/* Some comment */",
},
],
}
);

return sizeTokens;
}
});
});
Loading

0 comments on commit b988be7

Please sign in to comment.