@primer/primitives 7.17.0-rc.61b28bca → 7.17.0-rc.8ff6ed39

package/src/filters/isColorWithAlpha.test.ts

@@ -1,34 +0,0 @@
-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

@@ -1,108 +0,0 @@
-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

@@ -1,56 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,34 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,87 +0,0 @@
-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)
-  })
-})

package/src/formats/cssWrapMediaQuery.test.ts

@@ -1,170 +0,0 @@
-import {cssWrapMediaQuery} from './cssWrapMediaQuery'
-import {getMockDictionary, getMockFormatterArguments, getMockToken} from '../test-utilities'
-import {format} from 'prettier'
-
-describe('Format: tokens nested in media query', () => {
-  it('Wraps in screen if no media query defined', () => {
-    const input = getMockFormatterArguments()
-    const expectedOutput = format(
-      ` @media screen {
-        :root {
-          --red: transformedValue;
-        }
-      }`,
-      {parser: 'css', printWidth: 500},
-    )
-    expect(cssWrapMediaQuery(input)).toStrictEqual(expectedOutput)
-  })
-
-  it('Wraps in screen if no matching media query is found', () => {
-    const input = getMockFormatterArguments({
-      options: {
-        mediaQuery: {
-          'size-fine.css': '(pointer: fine)',
-        },
-      },
-      file: {
-        destination: 'size-coarse.css',
-        options: {
-          showFileHeader: false,
-        },
-      },
-    })
-    const expectedOutput = format(
-      ` @media screen {
-        :root {
-          --red: transformedValue;
-        }
-      }`,
-      {parser: 'css', printWidth: 500},
-    )
-    expect(cssWrapMediaQuery(input)).toStrictEqual(expectedOutput)
-  })
-
-  it('Wraps in defined media query if files match', () => {
-    const input = getMockFormatterArguments({
-      options: {
-        mediaQuery: {
-          'size-fine.css': '(pointer: fine)',
-        },
-      },
-      file: {
-        destination: 'size-fine.css',
-        options: {
-          showFileHeader: false,
-        },
-      },
-    })
-    const expectedOutput = format(
-      ` @media (pointer: fine) {
-        :root {
-          --red: transformedValue;
-        }
-      }`,
-      {parser: 'css', printWidth: 500},
-    )
-    expect(cssWrapMediaQuery(input)).toStrictEqual(expectedOutput)
-  })
-
-  it('Show comment if option.description is true', () => {
-    const input = getMockFormatterArguments({
-      dictionary: getMockDictionary({
-        tokens: {
-          subgroup: {
-            red: getMockToken({
-              name: 'red',
-              value: 'transformedValue',
-              comment: 'This is a description',
-            }),
-          },
-        },
-      }),
-      options: {
-        mediaQuery: {
-          'size-fine.css': '(pointer: fine)',
-        },
-        descriptions: true,
-      },
-      file: {
-        destination: 'size-fine.css',
-        options: {
-          showFileHeader: false,
-        },
-      },
-    })
-
-    const expectedOutput = format(
-      ` @media (pointer: fine) {
-        :root {
-          --red: transformedValue; /* This is a description */
-        }
-      }`,
-      {parser: 'css', printWidth: 500},
-    )
-    expect(cssWrapMediaQuery(input)).toStrictEqual(expectedOutput)
-  })
-
-  it('Hides comment if option.description is false or not set', () => {
-    const input = getMockFormatterArguments({
-      dictionary: getMockDictionary({
-        tokens: {
-          subgroup: {
-            red: getMockToken({
-              name: 'red',
-              value: 'transformedValue',
-              comment: 'This is a description',
-            }),
-          },
-        },
-      }),
-      options: {
-        mediaQuery: {
-          'size-fine.css': '(pointer: fine)',
-        },
-        descriptions: false,
-      },
-      file: {
-        destination: 'size-fine.css',
-        options: {
-          showFileHeader: false,
-        },
-      },
-    })
-
-    const inputUnset = getMockFormatterArguments({
-      dictionary: getMockDictionary({
-        tokens: {
-          subgroup: {
-            red: getMockToken({
-              name: 'red',
-              value: 'transformedValue',
-              comment: 'This is a description',
-            }),
-          },
-        },
-      }),
-      options: {
-        mediaQuery: {
-          'size-fine.css': '(pointer: fine)',
-        },
-      },
-      file: {
-        destination: 'size-fine.css',
-        options: {
-          showFileHeader: false,
-        },
-      },
-    })
-
-    const expectedOutput = format(
-      ` @media (pointer: fine) {
-        :root {
-          --red: transformedValue;
-        }
-      }`,
-      {parser: 'css', printWidth: 500},
-    )
-    expect(cssWrapMediaQuery(input)).toStrictEqual(expectedOutput)
-    expect(cssWrapMediaQuery(inputUnset)).toStrictEqual(expectedOutput)
-  })
-})