From 1b9fb93bdac0010ddb9aa2860d6529957fcca076 Mon Sep 17 00:00:00 2001 From: Romain Le Cellier Date: Thu, 27 Apr 2023 14:34:54 +0200 Subject: [PATCH] =?UTF-8?q?=E2=9C=85(tokens)=20add=20a=20test=20token=20wi?= =?UTF-8?q?th=20a=20hyphen?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit tokens that includes hyphen are allowed but the feature wasn't been tested --- packages/tokens/src/bin/Generators/JsGenerator.spec.ts | 2 +- packages/tokens/src/bin/Generators/SassGenerator.spec.ts | 5 ++++- packages/tokens/src/bin/Generators/TsGenerator.spec.ts | 2 +- packages/tokens/src/bin/__mocks__/cunningham.ts | 1 + .../bin/tests/assets/expected-default-cunningham-tokens.css | 1 + .../src/bin/tests/assets/expected-js-cunningham-tokens.css | 1 + .../expected-with-utility-classes-cunningham-tokens.css | 3 +++ 7 files changed, 12 insertions(+), 3 deletions(-) diff --git a/packages/tokens/src/bin/Generators/JsGenerator.spec.ts b/packages/tokens/src/bin/Generators/JsGenerator.spec.ts index e27fef9..3068d80 100644 --- a/packages/tokens/src/bin/Generators/JsGenerator.spec.ts +++ b/packages/tokens/src/bin/Generators/JsGenerator.spec.ts @@ -24,7 +24,7 @@ describe("JsGenerator", () => { await run(["", "", "-g", "js"]); expect(fs.existsSync(tokensFile)).toEqual(true); expect(fs.readFileSync(tokensFile).toString()).toMatchInlineSnapshot(` - "export const tokens = {"theme":{"colors":{"primary":"#055FD2","secondary":"#DA0000"},"font":{"sizes":{"m":"1rem"},"weights":{"medium":400},"families":{"base":"Roboto"}},"spacings":{"s":"1rem"},"transitions":{"ease":"linear"}}}; + "export const tokens = {"theme":{"colors":{"primary":"#055FD2","secondary":"#DA0000","ternary-900":"#022858"},"font":{"sizes":{"m":"1rem"},"weights":{"medium":400},"families":{"base":"Roboto"}},"spacings":{"s":"1rem"},"transitions":{"ease":"linear"}}}; " `); }); diff --git a/packages/tokens/src/bin/Generators/SassGenerator.spec.ts b/packages/tokens/src/bin/Generators/SassGenerator.spec.ts index a4a82d4..90a6eaf 100644 --- a/packages/tokens/src/bin/Generators/SassGenerator.spec.ts +++ b/packages/tokens/src/bin/Generators/SassGenerator.spec.ts @@ -27,7 +27,10 @@ describe("SassGenerator", () => { expect(fs.readFileSync(sassFile).toString()).toMatchInlineSnapshot(` "$colors: ( primary: #055FD2, - secondary: #DA0000 + secondary: #DA0000, + ternary: ( + 900: #022858 + ) ); $fontFamilies: ( base: Roboto diff --git a/packages/tokens/src/bin/Generators/TsGenerator.spec.ts b/packages/tokens/src/bin/Generators/TsGenerator.spec.ts index 79247a2..4f97cf9 100644 --- a/packages/tokens/src/bin/Generators/TsGenerator.spec.ts +++ b/packages/tokens/src/bin/Generators/TsGenerator.spec.ts @@ -24,7 +24,7 @@ describe("TsGenerator", () => { await run(["", "", "-g", "ts"]); expect(fs.existsSync(tokensFile)).toEqual(true); expect(fs.readFileSync(tokensFile).toString()).toMatchInlineSnapshot(` - "export const tokens = {"theme":{"colors":{"primary":"#055FD2","secondary":"#DA0000"},"font":{"sizes":{"m":"1rem"},"weights":{"medium":400},"families":{"base":"Roboto"}},"spacings":{"s":"1rem"},"transitions":{"ease":"linear"}}}; + "export const tokens = {"theme":{"colors":{"primary":"#055FD2","secondary":"#DA0000","ternary-900":"#022858"},"font":{"sizes":{"m":"1rem"},"weights":{"medium":400},"families":{"base":"Roboto"}},"spacings":{"s":"1rem"},"transitions":{"ease":"linear"}}}; " `); }); diff --git a/packages/tokens/src/bin/__mocks__/cunningham.ts b/packages/tokens/src/bin/__mocks__/cunningham.ts index cc7d0e6..031fe23 100644 --- a/packages/tokens/src/bin/__mocks__/cunningham.ts +++ b/packages/tokens/src/bin/__mocks__/cunningham.ts @@ -3,6 +3,7 @@ module.exports = { colors: { primary: "#055FD2", secondary: "#DA0000", + "ternary-900": "#022858", }, font: { sizes: { diff --git a/packages/tokens/src/bin/tests/assets/expected-default-cunningham-tokens.css b/packages/tokens/src/bin/tests/assets/expected-default-cunningham-tokens.css index 0238bb9..650e0c0 100644 --- a/packages/tokens/src/bin/tests/assets/expected-default-cunningham-tokens.css +++ b/packages/tokens/src/bin/tests/assets/expected-default-cunningham-tokens.css @@ -1,6 +1,7 @@ :root { --c--theme--colors--primary: #055FD2; --c--theme--colors--secondary: #DA0000; + --c--theme--colors--ternary-900: #022858; --c--theme--font--sizes--m: 1rem; --c--theme--font--weights--medium: 400; --c--theme--font--families--base: Roboto; diff --git a/packages/tokens/src/bin/tests/assets/expected-js-cunningham-tokens.css b/packages/tokens/src/bin/tests/assets/expected-js-cunningham-tokens.css index b758474..0c774e6 100644 --- a/packages/tokens/src/bin/tests/assets/expected-js-cunningham-tokens.css +++ b/packages/tokens/src/bin/tests/assets/expected-js-cunningham-tokens.css @@ -1,6 +1,7 @@ :root { --c--theme--colors--primary: AntiqueWhite; --c--theme--colors--secondary: #DA0000; + --c--theme--colors--ternary-900: #022858; --c--theme--font--sizes--m: 1rem; --c--theme--font--weights--medium: 400; --c--theme--font--families--base: Roboto; diff --git a/packages/tokens/src/bin/tests/assets/expected-with-utility-classes-cunningham-tokens.css b/packages/tokens/src/bin/tests/assets/expected-with-utility-classes-cunningham-tokens.css index 9fad28e..b58613d 100644 --- a/packages/tokens/src/bin/tests/assets/expected-with-utility-classes-cunningham-tokens.css +++ b/packages/tokens/src/bin/tests/assets/expected-with-utility-classes-cunningham-tokens.css @@ -1,6 +1,7 @@ :root { --c--theme--colors--primary: #055FD2; --c--theme--colors--secondary: #DA0000; + --c--theme--colors--ternary-900: #022858; --c--theme--font--sizes--m: 1rem; --c--theme--font--weights--medium: 400; --c--theme--font--families--base: Roboto; @@ -8,8 +9,10 @@ --c--theme--transitions--ease: linear; } .clr-primary { color: var(--c--theme--colors--primary); } .clr-secondary { color: var(--c--theme--colors--secondary); } +.clr-ternary-900 { color: var(--c--theme--colors--ternary-900); } .bg-primary { background-color: var(--c--theme--colors--primary); } .bg-secondary { background-color: var(--c--theme--colors--secondary); } +.bg-ternary-900 { background-color: var(--c--theme--colors--ternary-900); } .fw-medium { font-weight: var(--c--theme--font--weights--medium); } .fs-m { font-size: var(--c--theme--font--sizes--m); } .f-base { font-family: var(--c--theme--font--families--base); }