@primer/primitives 7.17.0-rc.1685583f → 7.17.0-rc.61b28bca

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/primitives",
-  "version": "7.17.0-rc.1685583f",
+  "version": "7.17.0-rc.61b28bca",
   "description": "Typography, spacing, and color primitives for Primer design system",
   "files": [
     "dist",

package/src/filters/isBorder.test.ts

@@ -0,0 +1,18 @@
+import {getMockToken} from '../test-utilities'
+import {isBorder} from './isBorder'
+
+describe('Filter: isBorder', () => {
+  it('returns true if $type property is `border`', () => {
+    expect(isBorder(getMockToken({$type: 'border'}))).toStrictEqual(true)
+  })
+
+  it('returns false if $type property is not `border`', () => {
+    expect(isBorder(getMockToken({$type: 'pumpkin'}))).toStrictEqual(false)
+  })
+
+  it('returns false if $type property is falsy', () => {
+    expect(isBorder(getMockToken({$type: false}))).toStrictEqual(false)
+    expect(isBorder(getMockToken({$type: undefined}))).toStrictEqual(false)
+    expect(isBorder(getMockToken({$type: null}))).toStrictEqual(false)
+  })
+})

package/src/filters/isColor.test.ts

@@ -0,0 +1,22 @@
+import {getMockToken} from '../test-utilities'
+import {isColor} from './isColor'
+
+describe('Filter: isColor', () => {
+  it('returns true if $type property is `color`', () => {
+    expect(isColor(getMockToken({$type: 'color'}))).toStrictEqual(true)
+  })
+
+  it('returns false if $type property is not `color`', () => {
+    expect(isColor(getMockToken({$type: 'pumpkin'}))).toStrictEqual(false)
+  })
+
+  it('returns false if $type property is missing', () => {
+    expect(isColor(getMockToken({alpha: 0.4}))).toStrictEqual(false)
+  })
+
+  it('returns false if $type property is falsy', () => {
+    expect(isColor(getMockToken({$type: false}))).toStrictEqual(false)
+    expect(isColor(getMockToken({$type: undefined}))).toStrictEqual(false)
+    expect(isColor(getMockToken({$type: null}))).toStrictEqual(false)
+  })
+})

package/src/filters/isColorWithAlpha.test.ts

@@ -0,0 +1,34 @@
+import {getMockToken} from '../test-utilities'
+import {isColorWithAlpha} from './isColorWithAlpha'
+
+describe('Filter: isColorWithAlpha', () => {
+  it('returns true if $type property is `color` and `alpha` is number', () => {
+    expect(isColorWithAlpha(getMockToken({$type: 'color', alpha: 0.4}))).toStrictEqual(true)
+  })
+
+  it('returns false if $type property is not `color`', () => {
+    expect(isColorWithAlpha(getMockToken({$type: 'pumpkin', alpha: 0.4}))).toStrictEqual(false)
+  })
+
+  it('returns false if $type property is missing', () => {
+    expect(isColorWithAlpha(getMockToken({alpha: 0.4}))).toStrictEqual(false)
+  })
+
+  it('returns false if $type `color` but alpha is missing', () => {
+    expect(isColorWithAlpha(getMockToken({$type: 'color'}))).toStrictEqual(false)
+  })
+
+  it('returns false if $type `color` but alpha is not a number', () => {
+    expect(isColorWithAlpha(getMockToken({$type: 'color', alpha: true}))).toStrictEqual(false)
+    expect(isColorWithAlpha(getMockToken({$type: 'color', alpha: '0.4'}))).toStrictEqual(false)
+    expect(isColorWithAlpha(getMockToken({$type: 'color', alpha: false}))).toStrictEqual(false)
+    expect(isColorWithAlpha(getMockToken({$type: 'color', alpha: undefined}))).toStrictEqual(false)
+    expect(isColorWithAlpha(getMockToken({$type: 'color', alpha: null}))).toStrictEqual(false)
+  })
+
+  it('returns false if $type is falsy ', () => {
+    expect(isColorWithAlpha(getMockToken({$type: undefined, alpha: 0.2}))).toStrictEqual(false)
+    expect(isColorWithAlpha(getMockToken({$type: false, alpha: 0.2}))).toStrictEqual(false)
+    expect(isColorWithAlpha(getMockToken({$type: null, alpha: 0.2}))).toStrictEqual(false)
+  })
+})

package/src/filters/isColorWithMix.test.ts

@@ -0,0 +1,108 @@
+import {getMockToken} from '../test-utilities'
+import {isColorWithMix} from './isColorWithMix'
+
+describe('Filter: isColorWithMix', () => {
+  it('returns true if $type property is `color` and valid `mix` property exists', () => {
+    expect(isColorWithMix(getMockToken({$type: 'color', mix: {color: '#000', weight: 0.5}}))).toStrictEqual(true)
+  })
+
+  it('returns false if $type property is not `color`', () => {
+    expect(isColorWithMix(getMockToken({$type: 'pumpkin', mix: {color: '#000', weight: 0.5}}))).toStrictEqual(false)
+  })
+
+  it('returns false if $type property is missing', () => {
+    expect(isColorWithMix(getMockToken({value: '#000'}))).toStrictEqual(false)
+  })
+
+  it('returns false if $type property is missing', () => {
+    expect(isColorWithMix(getMockToken({value: '#000', mix: null}))).toStrictEqual(false)
+  })
+
+  it('returns false if $type `color` but mix is missing', () => {
+    expect(isColorWithMix(getMockToken({$type: 'color'}))).toStrictEqual(false)
+  })
+
+  it('throws error if $type `color` but mix is invalid', () => {
+    expect(() => isColorWithMix(getMockToken({$type: 'color', mix: true}))).toThrow()
+    expect(() => isColorWithMix(getMockToken({$type: 'color', mix: '#000'}))).toThrow()
+  })
+
+  it('throws error if $type `color` but mix has invalid properties', () => {
+    // missing weight
+    expect(() =>
+      isColorWithMix(
+        getMockToken({
+          $type: 'color',
+          mix: {
+            color: '#000',
+          },
+        }),
+      ),
+    ).toThrow()
+    // missing color
+    expect(() =>
+      isColorWithMix(
+        getMockToken({
+          $type: 'color',
+          mix: {
+            weight: 0.5,
+          },
+        }),
+      ),
+    ).toThrow()
+    // color is number
+    expect(() =>
+      isColorWithMix(
+        getMockToken({
+          $type: 'color',
+          mix: {
+            color: 1,
+            weight: 0.5,
+          },
+        }),
+      ),
+    ).toThrow()
+    // color is undefined
+    expect(() =>
+      isColorWithMix(
+        getMockToken({
+          $type: 'color',
+          mix: {
+            color: undefined,
+            weight: 0.5,
+          },
+        }),
+      ),
+    ).toThrow()
+    // weight is undefined
+    expect(() =>
+      isColorWithMix(
+        getMockToken({
+          $type: 'color',
+          mix: {
+            color: '#000',
+            weight: undefined,
+          },
+        }),
+      ),
+    ).toThrow()
+    // weight is a string
+    expect(() =>
+      isColorWithMix(
+        getMockToken({
+          $type: 'color',
+          mix: {
+            color: '#000',
+            weight: '0.7',
+          },
+        }),
+      ),
+    ).toThrow()
+  })
+
+  it('returns false if $type is falsy ', () => {
+    expect(isColorWithMix(getMockToken({$type: undefined, mix: {color: '#000', weight: 0.5}}))).toStrictEqual(false)
+    expect(isColorWithMix(getMockToken({$type: false, mix: {color: '#000', weight: 0.5}}))).toStrictEqual(false)
+    expect(isColorWithMix(getMockToken({$type: null, mix: {color: '#000', weight: 0.5}}))).toStrictEqual(false)
+  })
+})

package/src/filters/isDeprecated.test.ts

@@ -0,0 +1,56 @@
+import {getMockToken} from '../test-utilities'
+import {isDeprecated} from './isDeprecated'
+
+describe('Filter: isDeprecated', () => {
+  it('Returns true if depreacted property is true', () => {
+    expect(isDeprecated(getMockToken({deprecated: true}))).toStrictEqual(true)
+  })
+
+  it('Returns true if depreacted property is a string', () => {
+    expect(isDeprecated(getMockToken({deprecated: 'pumpkin'}))).toStrictEqual(true)
+  })
+
+  it('Returns false if deprecated is falsy', () => {
+    expect(isDeprecated(getMockToken({deprecated: false}))).toStrictEqual(false)
+    expect(isDeprecated(getMockToken({deprecated: null}))).toStrictEqual(false)
+    expect(isDeprecated(getMockToken({deprecated: undefined}))).toStrictEqual(false)
+  })
+
+  it('Returns false if no deprecated property exists', () => {
+    expect(isDeprecated(getMockToken({value: 'pumpkin'}))).toStrictEqual(false)
+  })
+
+  const inputArray = [
+    getMockToken({
+      deprecated: true,
+    }),
+    getMockToken({
+      deprecated: '{scale.yellow}',
+    }),
+    getMockToken({
+      deprecated: null,
+    }),
+    getMockToken({
+      deprecated: false,
+    }),
+    getMockToken({
+      deprecated: undefined,
+    }),
+    getMockToken({
+      value: 'pumpkin',
+    }),
+  ]
+
+  const expectedOutput = [
+    getMockToken({
+      deprecated: true,
+    }),
+    getMockToken({
+      deprecated: '{scale.yellow}',
+    }),
+  ]
+
+  it('Usage as a filter function', () => {
+    expect(inputArray.filter(isDeprecated)).toStrictEqual(expectedOutput)
+  })
+})

package/src/filters/isDimension.test.ts

@@ -0,0 +1,22 @@
+import {getMockToken} from '../test-utilities'
+import {isDimension} from './isDimension'
+
+describe('Filter: isDimension', () => {
+  it('returns true if $type property is `dimension`', () => {
+    expect(isDimension(getMockToken({$type: 'dimension'}))).toStrictEqual(true)
+  })
+
+  it('returns false if $type property is not `dimension`', () => {
+    expect(isDimension(getMockToken({$type: 'pumpkin'}))).toStrictEqual(false)
+  })
+
+  it('returns false if $type property is missing', () => {
+    expect(isDimension(getMockToken({alpha: 0.4}))).toStrictEqual(false)
+  })
+
+  it('returns false if $type property is falsy', () => {
+    expect(isDimension(getMockToken({$type: false}))).toStrictEqual(false)
+    expect(isDimension(getMockToken({$type: undefined}))).toStrictEqual(false)
+    expect(isDimension(getMockToken({$type: null}))).toStrictEqual(false)
+  })
+})

package/src/filters/isDuration.test.ts

@@ -0,0 +1,22 @@
+import {getMockToken} from '../test-utilities'
+import {isDuration} from './isDuration'
+
+describe('Filter: isDuration', () => {
+  it('returns true if $type property is `duration`', () => {
+    expect(isDuration(getMockToken({$type: 'duration'}))).toStrictEqual(true)
+  })
+
+  it('returns false if $type property is not `duration`', () => {
+    expect(isDuration(getMockToken({$type: 'pumpkin'}))).toStrictEqual(false)
+  })
+
+  it('returns false if $type property is missing', () => {
+    expect(isDuration(getMockToken({value: '1000ms'}))).toStrictEqual(false)
+  })
+
+  it('returns false if $type property is falsy', () => {
+    expect(isDuration(getMockToken({$type: false}))).toStrictEqual(false)
+    expect(isDuration(getMockToken({$type: undefined}))).toStrictEqual(false)
+    expect(isDuration(getMockToken({$type: null}))).toStrictEqual(false)
+  })
+})

package/src/filters/isFontFamily.test.ts

@@ -0,0 +1,22 @@
+import {getMockToken} from '../test-utilities'
+import {isFontFamily} from './isFontFamily'
+
+describe('Filter: isFontFamily', () => {
+  it('returns true if $type property is `fontFamily`', () => {
+    expect(isFontFamily(getMockToken({$type: 'fontFamily'}))).toStrictEqual(true)
+  })
+
+  it('returns false if $type property is not `fontFamily`', () => {
+    expect(isFontFamily(getMockToken({$type: 'pumpkin'}))).toStrictEqual(false)
+  })
+
+  it('returns false if $type property is missing', () => {
+    expect(isFontFamily(getMockToken({alpha: 0.4}))).toStrictEqual(false)
+  })
+
+  it('returns false if $type property is falsy', () => {
+    expect(isFontFamily(getMockToken({$type: false}))).toStrictEqual(false)
+    expect(isFontFamily(getMockToken({$type: undefined}))).toStrictEqual(false)
+    expect(isFontFamily(getMockToken({$type: null}))).toStrictEqual(false)
+  })
+})

package/src/filters/isFontWeight.test.ts

@@ -0,0 +1,22 @@
+import {getMockToken} from '../test-utilities'
+import {isFontWeight} from './isFontWeight'
+
+describe('Filter: isFontWeight', () => {
+  it('returns true if $type property is `fontWeight`', () => {
+    expect(isFontWeight(getMockToken({$type: 'fontWeight'}))).toStrictEqual(true)
+  })
+
+  it('returns false if $type property is not `fontWeight`', () => {
+    expect(isFontWeight(getMockToken({$type: 'pumpkin'}))).toStrictEqual(false)
+  })
+
+  it('returns false if $type property is missing', () => {
+    expect(isFontWeight(getMockToken({alpha: 0.4}))).toStrictEqual(false)
+  })
+
+  it('returns false if $type property is falsy', () => {
+    expect(isFontWeight(getMockToken({$type: false}))).toStrictEqual(false)
+    expect(isFontWeight(getMockToken({$type: undefined}))).toStrictEqual(false)
+    expect(isFontWeight(getMockToken({$type: null}))).toStrictEqual(false)
+  })
+})

package/src/filters/isFromFile.test.ts

@@ -0,0 +1,34 @@
+import {getMockToken} from '../test-utilities'
+import {isFromFile} from './isFromFile'
+
+describe('Filter: isFromFile', () => {
+  it('returns true if token.filePath is in provided array of file paths', () => {
+    expect(isFromFile(getMockToken({filePath: 'src/tokens.json'}), ['src/tokens.json'])).toStrictEqual(true)
+  })
+
+  it('returns false if token.filePath is NOT in provided array of file paths', () => {
+    expect(isFromFile(getMockToken({filePath: 'src/notTokens.json'}), ['src/tokens.json'])).toStrictEqual(false)
+  })
+
+  it('returns false if token.filePath is undefined', () => {
+    expect(isFromFile(getMockToken({filePath: undefined}), ['src/tokens.json'])).toStrictEqual(false)
+  })
+
+  it('returns false if array of file paths is empty', () => {
+    expect(isFromFile(getMockToken({filePath: 'src/tokens.json'}), [])).toStrictEqual(false)
+  })
+
+  it('returns false if token.filePath is undefined and array is empty', () => {
+    expect(isFromFile(getMockToken({filePath: undefined}), [])).toStrictEqual(false)
+  })
+
+  it('returns false if file path array is undefined', () => {
+    // @ts-expect-error: path is missing
+    expect(isFromFile(getMockToken({path: 'src/tokens.json'}))).toStrictEqual(false)
+  })
+
+  it('returns false if token.filePath & file path array is undefined', () => {
+    // @ts-expect-error: path is missing
+    expect(isFromFile(getMockToken({filePath: undefined}))).toStrictEqual(false)
+  })
+})

package/src/filters/isShadow.test.ts

@@ -0,0 +1,18 @@
+import {getMockToken} from '../test-utilities'
+import {isShadow} from './isShadow'
+
+describe('Filter: isShadow', () => {
+  it('returns true if $type property is `shadow`', () => {
+    expect(isShadow(getMockToken({$type: 'shadow'}))).toStrictEqual(true)
+  })
+
+  it('returns false if $type property is not `shadow`', () => {
+    expect(isShadow(getMockToken({$type: 'pumpkin'}))).toStrictEqual(false)
+  })
+
+  it('returns false if $type property is falsy', () => {
+    expect(isShadow(getMockToken({$type: false}))).toStrictEqual(false)
+    expect(isShadow(getMockToken({$type: undefined}))).toStrictEqual(false)
+    expect(isShadow(getMockToken({$type: null}))).toStrictEqual(false)
+  })
+})

package/src/filters/isSource.test.ts

@@ -0,0 +1,44 @@
+import type StyleDictionary from 'style-dictionary'
+import {getMockToken} from '../test-utilities'
+import {isSource} from './isSource'
+
+describe('Filter: isSource', () => {
+  it('Returns true if isSource property is true', () => {
+    expect(isSource(getMockToken({isSource: true}))).toStrictEqual(true)
+  })
+
+  it('Returns false if isSource property is falsy value', () => {
+    expect(isSource(getMockToken({isSource: false}))).toStrictEqual(false)
+    expect(isSource(getMockToken({isSource: null}))).toStrictEqual(false)
+    expect(isSource(getMockToken({isSource: undefined}))).toStrictEqual(false)
+  })
+
+  it('Returns false if isSource property is truthy non-boolean value', () => {
+    expect(isSource(getMockToken({isSource: 'pumpkin'}))).toStrictEqual(false)
+    expect(isSource(getMockToken({isSource: 1}))).toStrictEqual(false)
+  })
+
+  it('Returns false if no isSource property exists', () => {
+    expect(isSource({value: 'pumpkin'} as StyleDictionary.TransformedToken)).toStrictEqual(false)
+  })
+
+  it('Usage as a filter function', () => {
+    const inputArray = [
+      getMockToken({
+        value: 'red is source',
+        isSource: true,
+      }),
+      getMockToken({
+        value: 'blue is not source',
+        isSource: false,
+      }),
+      {
+        value: 'yellow is not source',
+      },
+    ] as StyleDictionary.TransformedToken[]
+
+    const expectedOutput = inputArray.filter(item => item.isSource === true)
+
+    expect(inputArray.filter(isSource)).toStrictEqual(expectedOutput)
+  })
+})

package/src/filters/isTypography.test.ts

@@ -0,0 +1,18 @@
+import {getMockToken} from '../test-utilities'
+import {isTypography} from './isTypography'
+
+describe('Filter: isTypography', () => {
+  it('returns true if $type property is `typography`', () => {
+    expect(isTypography(getMockToken({$type: 'typography'}))).toStrictEqual(true)
+  })
+
+  it('returns false if $type property is not `typography`', () => {
+    expect(isTypography(getMockToken({$type: 'pumpkin'}))).toStrictEqual(false)
+  })
+
+  it('returns false if $type property is falsy', () => {
+    expect(isTypography(getMockToken({$type: false}))).toStrictEqual(false)
+    expect(isTypography(getMockToken({$type: undefined}))).toStrictEqual(false)
+    expect(isTypography(getMockToken({$type: null}))).toStrictEqual(false)
+  })
+})

package/src/formats/cssCustomMedia.test.ts

@@ -0,0 +1,11 @@
+import {cssCustomMedia} from './cssCustomMedia'
+import {getMockFormatterArguments} from '../test-utilities'
+import {format} from 'prettier'
+
+describe('Format: tokens to custom-media', () => {
+  it('Formats tokens with custom media', () => {
+    const input = getMockFormatterArguments()
+    const expectedOutput = format(`@custom-media --red transformedValue;`, {parser: 'css', printWidth: 500})
+    expect(cssCustomMedia(input)).toStrictEqual(expectedOutput)
+  })
+})

package/src/formats/cssThemed.test.ts

@@ -0,0 +1,87 @@
+import {cssThemed} from './cssThemed'
+import {getMockFormatterArguments} from '../test-utilities'
+import {format} from 'prettier'
+
+describe('Format: Css Themed', () => {
+  it('Formats tokens', () => {
+    const input = getMockFormatterArguments()
+    const expectedOutput = format(
+      `:root {
+      --red: transformedValue;
+    }`,
+      {
+        parser: 'css',
+        printWidth: 500,
+      },
+    )
+    expect(cssThemed(input)).toStrictEqual(expectedOutput)
+  })
+
+  it('Formats tokens with custom selectors', () => {
+    const input = getMockFormatterArguments({
+      options: {
+        selector: `[data-color-mode="dark"][data-dark-theme="dark"]`,
+        selectorLight: `[data-color-mode="auto"][data-light-theme="dark"]`,
+        selectorDark: `[data-color-mode="auto"][data-dark-theme="dark"]`,
+      },
+    })
+    const expectedOutput = format(
+      ` [data-color-mode="dark"][data-dark-theme="dark"],
+        [data-color-mode="auto"][data-light-theme="dark"] {
+          --red: transformedValue;
+        }
+         @media (prefers-color-scheme: dark) {
+          [data-color-mode="auto"][data-dark-theme="dark"] {
+            --red: transformedValue;
+          }
+    }`,
+      {parser: 'css', printWidth: 500},
+    )
+    expect(cssThemed(input)).toStrictEqual(expectedOutput)
+  })
+
+  it('Formats tokens with only options.selector', () => {
+    const input = getMockFormatterArguments({
+      options: {
+        selector: `[data-color-mode="dark"]`,
+      },
+    })
+    const expectedOutput = format(
+      `[data-color-mode="dark"]{
+        --red: transformedValue;
+    }`,
+      {parser: 'css', printWidth: 500},
+    )
+    expect(cssThemed(input)).toStrictEqual(expectedOutput)
+  })
+
+  it('Formats tokens with only options.selectorLight', () => {
+    const input = getMockFormatterArguments({
+      options: {
+        selectorLight: `[data-color-mode="light"]`,
+      },
+    })
+    const expectedOutput = format(
+      `:root, [data-color-mode="light"]{
+        --red: transformedValue;
+    }`,
+      {parser: 'css', printWidth: 500},
+    )
+    expect(cssThemed(input)).toStrictEqual(expectedOutput)
+  })
+
+  it('Formats tokens with only options.selectorDark', () => {
+    const input = getMockFormatterArguments({
+      options: {
+        selectorLight: `[data-color-mode="dark"]`,
+      },
+    })
+    const expectedOutput = format(
+      `:root, [data-color-mode="dark"]{
+        --red: transformedValue;
+    }`,
+      {parser: 'css', printWidth: 500},
+    )
+    expect(cssThemed(input)).toStrictEqual(expectedOutput)
+  })
+})