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

package/src/transformers/namePathToDotNotation.test.ts

@@ -1,74 +0,0 @@
-import {getMockToken} from '../test-utilities'
-import {namePathToDotNotation} from './namePathToDotNotation'
-
-describe('Transformer: namePathToDotNotation', () => {
-  it('converts path elements to dot.notation and ignores name proprty', () => {
-    const input = [
-      getMockToken({
-        name: 'tokenName',
-        path: ['path', 'to', 'token'],
-      }),
-      getMockToken({
-        name: 'tokenName',
-        path: ['PATH', 'tO', 'Token'],
-      }),
-      getMockToken({
-        name: 'tokenName',
-        path: ['path', 'toToken'],
-      }),
-      getMockToken({
-        name: 'tokenName',
-        path: ['pathtoToken'],
-      }),
-    ]
-    const expectedOutput = ['path.to.token', 'PATH.tO.Token', 'path.toToken', 'pathtoToken']
-
-    expect(input.map(item => namePathToDotNotation.transformer(item, {}))).toStrictEqual(expectedOutput)
-  })
-
-  it('replaces spaces, `-`, `_` and `+` within path elements and joins with camelCase, but does not change the rest of the word', () => {
-    const input = [
-      getMockToken({
-        name: 'tokenName',
-        path: ['start', 'path to token'],
-      }),
-      getMockToken({
-        name: 'tokenName',
-        path: ['start', 'PATH_tO-Token'],
-      }),
-      getMockToken({
-        name: 'tokenName',
-        path: ['start', 'path+toToken'],
-      }),
-    ]
-    const expectedOutput = ['start.pathToToken', 'start.PATHTOToken', 'start.pathToToken']
-    expect(input.map(item => namePathToDotNotation.transformer(item, {}))).toStrictEqual(expectedOutput)
-  })
-
-  it('removes `@`, so we can use it for the default hack', () => {
-    const input = [
-      getMockToken({
-        name: 'tokenName',
-        path: ['fgColor', 'accent', '@'],
-      }),
-      getMockToken({
-        name: 'tokenName',
-        path: ['fgColor', '@', 'muted'],
-      }),
-    ]
-    const expectedOutput = ['fgColor.accent', 'fgColor.muted']
-    expect(input.map(item => namePathToDotNotation.transformer(item, {}))).toStrictEqual(expectedOutput)
-  })
-
-  it('adds prefix to token name', () => {
-    const platform = {
-      prefix: 'PRIMER',
-    }
-    const input = getMockToken({
-      name: 'tokenName',
-      path: ['start', 'pathTo', 'token'],
-    })
-    const expectedOutput = 'PRIMER.start.pathTo.token'
-    expect(namePathToDotNotation.transformer(input, platform)).toStrictEqual(expectedOutput)
-  })
-})

package/src/transformers/namePathToFigma.test.ts

@@ -1,74 +0,0 @@
-import {getMockToken} from '../test-utilities'
-import {namePathToFigma} from './namePathToFigma'
-
-describe('Transformer: namePathToFigma', () => {
-  it('converts path elements to dot.notation and ignores name proprty', () => {
-    const input = [
-      getMockToken({
-        name: 'tokenName',
-        path: ['path', 'to', 'token'],
-      }),
-      getMockToken({
-        name: 'tokenName',
-        path: ['PATH', 'tO', 'Token'],
-      }),
-      getMockToken({
-        name: 'tokenName',
-        path: ['path', 'toToken'],
-      }),
-      getMockToken({
-        name: 'tokenName',
-        path: ['pathtoToken'],
-      }),
-    ]
-    const expectedOutput = ['path/to/token', 'PATH/tO/Token', 'path/toToken', 'pathtoToken']
-
-    expect(input.map(item => namePathToFigma.transformer(item, {}))).toStrictEqual(expectedOutput)
-  })
-
-  it('replaces spaces, `-`, `_` and `+` within path elements and joins with camelCase, but does not change the rest of the word', () => {
-    const input = [
-      getMockToken({
-        name: 'tokenName',
-        path: ['start', 'path to token'],
-      }),
-      getMockToken({
-        name: 'tokenName',
-        path: ['start', 'PATH_tO-Token'],
-      }),
-      getMockToken({
-        name: 'tokenName',
-        path: ['start', 'path+toToken'],
-      }),
-    ]
-    const expectedOutput = ['start/path to token', 'start/PATH_tO-Token', 'start/path+toToken']
-    expect(input.map(item => namePathToFigma.transformer(item, {}))).toStrictEqual(expectedOutput)
-  })
-
-  it('removes `@`, so we can use it for the default hack', () => {
-    const input = [
-      getMockToken({
-        name: 'tokenName',
-        path: ['fgColor', 'accent', '@'],
-      }),
-      getMockToken({
-        name: 'tokenName',
-        path: ['fgColor', '@', 'muted'],
-      }),
-    ]
-    const expectedOutput = ['fgColor/accent', 'fgColor/muted']
-    expect(input.map(item => namePathToFigma.transformer(item, {}))).toStrictEqual(expectedOutput)
-  })
-
-  it('adds prefix to token name', () => {
-    const platform = {
-      prefix: 'PRIMER',
-    }
-    const input = getMockToken({
-      name: 'tokenName',
-      path: ['start', 'pathTo', 'token'],
-    })
-    const expectedOutput = 'PRIMER/start/pathTo/token'
-    expect(namePathToFigma.transformer(input, platform)).toStrictEqual(expectedOutput)
-  })
-})

package/src/transformers/namePathToKebabCase.test.ts

@@ -1,74 +0,0 @@
-import {getMockToken} from '../test-utilities'
-import {namePathToKebabCase} from './namePathToKebabCase'
-
-describe('Transformer: namePathToKebabCase', () => {
-  it('converts path elements to dot.notation and ignores name proprty', () => {
-    const input = [
-      getMockToken({
-        name: 'tokenName',
-        path: ['path', 'to', 'token'],
-      }),
-      getMockToken({
-        name: 'tokenName',
-        path: ['PATH', 'tO', 'Token'],
-      }),
-      getMockToken({
-        name: 'tokenName',
-        path: ['path', 'toToken'],
-      }),
-      getMockToken({
-        name: 'tokenName',
-        path: ['pathtoToken'],
-      }),
-    ]
-    const expectedOutput = ['path-to-token', 'PATH-tO-Token', 'path-toToken', 'pathtoToken']
-
-    expect(input.map(item => namePathToKebabCase.transformer(item, {}))).toStrictEqual(expectedOutput)
-  })
-
-  it('replaces spaces, `-`, `_` and `+` within path elements and joins with camelCase, but does not change the rest of the word', () => {
-    const input = [
-      getMockToken({
-        name: 'tokenName',
-        path: ['start', 'path to token'],
-      }),
-      getMockToken({
-        name: 'tokenName',
-        path: ['start', 'PATH_tO-Token'],
-      }),
-      getMockToken({
-        name: 'tokenName',
-        path: ['start', 'path+toToken'],
-      }),
-    ]
-    const expectedOutput = ['start-path to token', 'start-PATH_tO-Token', 'start-path+toToken']
-    expect(input.map(item => namePathToKebabCase.transformer(item, {}))).toStrictEqual(expectedOutput)
-  })
-
-  it('removes `@`, so we can use it for the default hack', () => {
-    const input = [
-      getMockToken({
-        name: 'tokenName',
-        path: ['fgColor', 'accent', '@'],
-      }),
-      getMockToken({
-        name: 'tokenName',
-        path: ['fgColor', '@', 'muted'],
-      }),
-    ]
-    const expectedOutput = ['fgColor-accent', 'fgColor-muted']
-    expect(input.map(item => namePathToKebabCase.transformer(item, {}))).toStrictEqual(expectedOutput)
-  })
-
-  it('adds prefix to token name', () => {
-    const platform = {
-      prefix: 'PRIMER',
-    }
-    const input = getMockToken({
-      name: 'tokenName',
-      path: ['start', 'pathTo', 'token'],
-    })
-    const expectedOutput = 'PRIMER-start-pathTo-token'
-    expect(namePathToKebabCase.transformer(input, platform)).toStrictEqual(expectedOutput)
-  })
-})

package/src/transformers/namePathToSlashNotation.test.ts

@@ -1,74 +0,0 @@
-import {getMockToken} from '../test-utilities'
-import {namePathToSlashNotation} from './namePathToSlashNotation'
-
-describe('Transformer: namePathToSlashNotation', () => {
-  it('converts path elements to dot.notation and ignores name proprty', () => {
-    const input = [
-      getMockToken({
-        name: 'tokenName',
-        path: ['path', 'to', 'token'],
-      }),
-      getMockToken({
-        name: 'tokenName',
-        path: ['PATH', 'tO', 'Token'],
-      }),
-      getMockToken({
-        name: 'tokenName',
-        path: ['path', 'toToken'],
-      }),
-      getMockToken({
-        name: 'tokenName',
-        path: ['pathtoToken'],
-      }),
-    ]
-    const expectedOutput = ['path/to/token', 'PATH/tO/Token', 'path/toToken', 'pathtoToken']
-
-    expect(input.map(item => namePathToSlashNotation.transformer(item, {}))).toStrictEqual(expectedOutput)
-  })
-
-  it('replaces spaces, `-`, `_` and `+` within path elements and joins with camelCase, but does not change the rest of the word', () => {
-    const input = [
-      getMockToken({
-        name: 'tokenName',
-        path: ['start', 'path to token'],
-      }),
-      getMockToken({
-        name: 'tokenName',
-        path: ['start', 'PATH_tO-Token'],
-      }),
-      getMockToken({
-        name: 'tokenName',
-        path: ['start', 'path+toToken'],
-      }),
-    ]
-    const expectedOutput = ['start/path to token', 'start/PATH_tO-Token', 'start/path+toToken']
-    expect(input.map(item => namePathToSlashNotation.transformer(item, {}))).toStrictEqual(expectedOutput)
-  })
-
-  it('removes `@`, so we can use it for the default hack', () => {
-    const input = [
-      getMockToken({
-        name: 'tokenName',
-        path: ['fgColor', 'accent', '@'],
-      }),
-      getMockToken({
-        name: 'tokenName',
-        path: ['fgColor', '@', 'muted'],
-      }),
-    ]
-    const expectedOutput = ['fgColor/accent', 'fgColor/muted']
-    expect(input.map(item => namePathToSlashNotation.transformer(item, {}))).toStrictEqual(expectedOutput)
-  })
-
-  it('adds prefix to token name', () => {
-    const platform = {
-      prefix: 'PRIMER',
-    }
-    const input = getMockToken({
-      name: 'tokenName',
-      path: ['start', 'pathTo', 'token'],
-    })
-    const expectedOutput = 'PRIMER/start/pathTo/token'
-    expect(namePathToSlashNotation.transformer(input, platform)).toStrictEqual(expectedOutput)
-  })
-})

package/src/transformers/shadowToCss.test.ts

@@ -1,175 +0,0 @@
-import {getMockToken} from '../test-utilities'
-import {shadowToCss} from './shadowToCss'
-
-describe('Transformer: shadowToCss', () => {
-  it('transforms `shadow` token to css shadow string', () => {
-    const input = [
-      getMockToken({
-        value: {
-          color: '#000000',
-          offsetX: '0px',
-          offsetY: '2px',
-          blur: '1px',
-          spread: '0',
-        },
-      }),
-    ]
-    const expectedOutput = ['0px 2px 1px 0 #000000']
-    expect(input.map(item => shadowToCss.transformer(item, {}))).toStrictEqual(expectedOutput)
-  })
-
-  it('transforms inset `shadow` token to css shadow string', () => {
-    const input = [
-      getMockToken({
-        value: {
-          color: '#000000',
-          offsetX: '0px',
-          offsetY: '2px',
-          blur: '1px',
-          spread: '0px',
-          inset: true,
-        },
-      }),
-      getMockToken({
-        value: {
-          color: '#000000',
-          offsetX: '0px',
-          offsetY: '2px',
-          blur: '1px',
-          spread: '0px',
-          inset: false,
-        },
-      }),
-    ]
-    const expectedOutput = ['inset 0px 2px 1px 0px #000000', '0px 2px 1px 0px #000000']
-    expect(input.map(item => shadowToCss.transformer(item, {}))).toStrictEqual(expectedOutput)
-  })
-
-  it('throws an error when required values are missing', () => {
-    // missing blur
-    expect(() =>
-      shadowToCss.transformer(
-        getMockToken({
-          value: {
-            color: '#000000',
-            offsetX: '2px',
-            offsetY: '2px',
-            blur: '1px',
-          },
-        }),
-        {},
-      ),
-    ).toThrowError()
-
-    // missing spread
-    expect(() =>
-      shadowToCss.transformer(
-        getMockToken({
-          value: {
-            color: '#000000',
-            offsetX: '2px',
-            offsetY: '2px',
-            blur: '1px',
-          },
-        }),
-        {},
-      ),
-    ).toThrowError()
-
-    // missing offsets
-    expect(() =>
-      shadowToCss.transformer(
-        getMockToken({
-          value: {
-            color: '#000000',
-            offsetX: '2px',
-            spread: '0px',
-            blur: '1px',
-          },
-        }),
-        {},
-      ),
-    ).toThrowError()
-
-    expect(() =>
-      shadowToCss.transformer(
-        getMockToken({
-          value: {
-            color: '#000000',
-            offsetY: '2px',
-            spread: '0px',
-            blur: '1px',
-          },
-        }),
-        {},
-      ),
-    ).toThrowError()
-    // missing color
-    expect(() =>
-      shadowToCss.transformer(
-        getMockToken({
-          value: {
-            offsetX: '0px',
-            offsetY: '2px',
-            spread: '0px',
-            blur: '1px',
-          },
-        }),
-        {},
-      ),
-    ).toThrowError()
-  })
-
-  it('transforms `shadow` token alpha value to css shadow string', () => {
-    const input = [
-      getMockToken({
-        value: {
-          color: '#000000',
-          offsetX: '0px',
-          offsetY: '2px',
-          blur: '1px',
-          spread: '0',
-          alpha: 0.5,
-        },
-      }),
-      getMockToken({
-        value: {
-          color: '#22222266',
-          offsetX: '0px',
-          offsetY: '2px',
-          blur: '1px',
-          spread: '0',
-          alpha: 0.5,
-        },
-      }),
-    ]
-    const expectedOutput = ['0px 2px 1px 0 #00000080', '0px 2px 1px 0 #22222280']
-    expect(input.map(item => shadowToCss.transformer(item, {}))).toStrictEqual(expectedOutput)
-  })
-
-  it('transforms multi-layer `shadow` token to css shadow string', () => {
-    const item = getMockToken({
-      value: [
-        {
-          color: '#000000',
-          offsetX: '0px',
-          offsetY: '2px',
-          blur: '1px',
-          spread: '0',
-          alpha: 0.5,
-        },
-        {
-          color: '#22222266',
-          offsetX: '0px',
-          offsetY: '8px',
-          blur: '16px',
-          spread: '0',
-          alpha: 0.2,
-        },
-      ],
-    })
-
-    const expectedOutput = '0px 2px 1px 0 #00000080, 0px 8px 16px 0 #22222233'
-    expect(shadowToCss.transformer(item, {})).toStrictEqual(expectedOutput)
-  })
-})

package/src/transformers/typographyToCss.test.ts

@@ -1,164 +0,0 @@
-import {getMockToken} from '../test-utilities'
-import {typographyToCss} from './typographyToCss'
-
-describe('Transformer: typographyToCss', () => {
-  it('transforms `typography` token to css typography string', () => {
-    const input = getMockToken({
-      value: {
-        fontFamily: 'Roboto',
-        fontSize: '42px',
-        fontWeight: 700,
-        letterSpacing: '0.1px',
-        lineHeight: '1.2',
-      },
-    })
-    const expectedOutput = '700 42px/1.2 Roboto'
-    expect(typographyToCss.transformer(input, {})).toStrictEqual(expectedOutput)
-  })
-
-  it('transforms `typography` with custom `fontStyle` prop token to css typography string', () => {
-    const input = getMockToken({
-      value: {
-        fontFamily: 'Roboto',
-        fontSize: '2rem',
-        fontWeight: 700,
-        fontStyle: 'italic',
-        lineHeight: '1.2',
-      },
-    })
-
-    const expectedOutput = 'italic 700 2rem/1.2 Roboto'
-    expect(typographyToCss.transformer(input, {})).toStrictEqual(expectedOutput)
-  })
-
-  it('transforms fontWeight string to number', () => {
-    const input = [
-      getMockToken({
-        value: {
-          fontFamily: 'Roboto',
-          fontSize: '42px',
-          fontWeight: '500',
-          letterSpacing: '0.1px',
-          lineHeight: '1.2',
-        },
-      }),
-      getMockToken({
-        value: {
-          fontFamily: 'Roboto',
-          fontSize: '42px',
-          fontWeight: 'black',
-          letterSpacing: '0.1px',
-          lineHeight: '1.2',
-        },
-      }),
-    ]
-    const expectedOutput = ['500 42px/1.2 Roboto', '900 42px/1.2 Roboto']
-    expect(input.map(item => typographyToCss.transformer(item, {}))).toStrictEqual(expectedOutput)
-  })
-
-  it('transforms fontFamily string and array', () => {
-    const input = [
-      getMockToken({
-        value: {
-          fontFamily: 'Roboto, Noto Sans',
-          fontSize: '42px',
-          fontWeight: '700',
-          letterSpacing: '0.1px',
-          lineHeight: '1.2',
-        },
-      }),
-      getMockToken({
-        value: {
-          fontFamily: ['Roboto', 'Noto Sans'],
-          fontSize: '42px',
-          fontWeight: '700',
-          letterSpacing: '0.1px',
-          lineHeight: '1.2',
-        },
-      }),
-    ]
-    const expectedOutput = ['700 42px/1.2 Roboto, Noto Sans', "700 42px/1.2 Roboto, 'Noto Sans'"]
-    expect(input.map(item => typographyToCss.transformer(item, {}))).toStrictEqual(expectedOutput)
-  })
-
-  it('transforms lineHeight string to number', () => {
-    const input = [
-      getMockToken({
-        value: {
-          fontFamily: 'Roboto',
-          fontSize: '42px',
-          fontWeight: '700',
-          letterSpacing: '0.1px',
-          lineHeight: '1.2',
-        },
-      }),
-      getMockToken({
-        value: {
-          fontFamily: 'Roboto',
-          fontSize: '42px',
-          fontWeight: '700',
-          letterSpacing: '0.1px',
-          lineHeight: '1rem',
-        },
-      }),
-      getMockToken({
-        value: {
-          fontFamily: 'Roboto',
-          fontSize: '42px',
-          fontWeight: '700',
-          letterSpacing: '0.1px',
-          lineHeight: '20px',
-        },
-      }),
-    ]
-    const expectedOutput = ['700 42px/1.2 Roboto', '700 42px/1rem Roboto', '700 42px/20px Roboto']
-    expect(input.map(item => typographyToCss.transformer(item, {}))).toStrictEqual(expectedOutput)
-  })
-
-  it('throws an error when required values are missing', () => {
-    // missing fontFamily
-    expect(() =>
-      typographyToCss.transformer(
-        getMockToken({
-          value: {
-            fontSize: '42px',
-            fontWeight: '700',
-            letterSpacing: '0.1px',
-            lineHeight: '1.2',
-          },
-        }),
-        {},
-      ),
-    ).toThrowError()
-
-    // missing fontSize
-    expect(() =>
-      typographyToCss.transformer(
-        getMockToken({
-          value: {
-            fontFamily: 'Roboto',
-            fontWeight: '700',
-            letterSpacing: '0.1px',
-            lineHeight: '1.2',
-          },
-        }),
-        {},
-      ),
-    ).toThrowError()
-
-    // missing fontWeight
-    expect(() =>
-      typographyToCss.transformer(
-        getMockToken({
-          value: {
-            fontFamily: 'Roboto',
-            fontSize: '42px',
-            letterSpacing: '0.1px',
-            lineHeight: '1.2',
-          },
-        }),
-        {},
-      ),
-    ).toThrowError()
-  })
-})

package/src/transformers/utilities/alpha.test.ts

@@ -1,28 +0,0 @@
-import {alpha} from './alpha'
-
-describe('Utilities: alpha', () => {
-  it('it transforms `hex3`', () => {
-    expect(alpha('#345', 0)).toStrictEqual('rgba(51, 68, 85, 0)')
-    expect(alpha('#345', 0.4)).toStrictEqual('rgba(51, 68, 85, 0.4)')
-  })
-
-  it('it transforms `hex6`', () => {
-    expect(alpha('#334455', 0)).toStrictEqual('rgba(51, 68, 85, 0)')
-    expect(alpha('#334455', 0.4)).toStrictEqual('rgba(51, 68, 85, 0.4)')
-  })
-
-  it('it transforms `hex8` by ignoring opacity in the color', () => {
-    expect(alpha('#33445566', 0)).toStrictEqual('rgba(51, 68, 85, 0)')
-    expect(alpha('#33445566', 0.4)).toStrictEqual('rgba(51, 68, 85, 0.4)')
-  })
-
-  it('it transforms `rgb`', () => {
-    expect(alpha('rgba(51, 68, 85)', 0)).toStrictEqual('rgba(51, 68, 85, 0)')
-    expect(alpha('rgba(51, 68, 85)', 0.4)).toStrictEqual('rgba(51, 68, 85, 0.4)')
-  })
-
-  it('it transforms `rgba` by ignoring opacity in the color', () => {
-    expect(alpha('rgba(51, 68, 85, 0.4)', 0)).toStrictEqual('rgba(51, 68, 85, 0)')
-    expect(alpha('rgba(51, 68, 85, 0.6)', 0.4)).toStrictEqual('rgba(51, 68, 85, 0.4)')
-  })
-})

package/src/transformers/utilities/checkRequiredTokenProperties.test.ts

@@ -1,28 +0,0 @@
-import {checkRequiredTokenProperties} from './checkRequiredTokenProperties'
-
-describe('Utilities: checkRequiredTokenProperties', () => {
-  it('it throws if property is missing', () => {
-    const requiredProps = ['propA', 'propB']
-    expect(() =>
-      checkRequiredTokenProperties(
-        {
-          propA: '42px',
-        },
-        requiredProps,
-      ),
-    ).toThrowError()
-  })
-
-  it('it does NOT throws if properties are present', () => {
-    const requiredProps = ['propA', 'propB']
-    expect(() =>
-      checkRequiredTokenProperties(
-        {
-          propA: '42px',
-          propB: '700',
-        },
-        requiredProps,
-      ),
-    ).not.toThrowError()
-  })
-})