@atlaskit/ds-explorations 0.1.5 → 1.1.0

package/scripts/color-codegen-template.tsx

@@ -1,6 +1,8 @@
 import prettier from 'prettier';
 import parserTypeScript from 'prettier/parser-typescript';
 
+// eslint-disable-next-line @atlassian/tangerine/import/entry-points
+import legacyTokens from '@atlaskit/tokens/src/artifacts/tokens-raw/atlassian-legacy-light';
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
 import tokens from '@atlaskit/tokens/src/artifacts/tokens-raw/atlassian-light';
 
@@ -25,13 +27,11 @@ const colors = {
   text: {
     prefix: 'color.text.',
     cssProperty: 'color',
-    legacyFallbackCSSProperty: '--ds-co-fb',
     filterFn: <T extends Token>(t: T) => t.token.startsWith(colors.text.prefix),
   },
   background: {
     prefix: 'color.background.',
     cssProperty: 'backgroundColor',
-    legacyFallbackCSSProperty: '--ds-bg-fb',
     filterFn: <T extends Token>(t: T) =>
       t.token.startsWith(colors.background.prefix) ||
       t.token.startsWith('elevation.surface') ||
@@ -40,21 +40,22 @@ const colors = {
   border: {
     prefix: 'color.border.',
     cssProperty: 'borderColor',
-    legacyFallbackCSSProperty: '--ds-bo-fb',
     filterFn: <T extends Token>(t: T) =>
       t.token.startsWith(colors.border.prefix),
   },
 } as const;
 
-const activeTokens = tokens
+const bothTokens = tokens.map((t, i) => [t, legacyTokens[i]]);
+
+const activeTokens = bothTokens
   .filter(
-    (t) =>
+    ([t]) =>
       t.attributes.state !== 'deleted' && t.attributes.state !== 'deprecated',
   )
   .map(
-    (t): Token => ({
+    ([t, legacy]): Token => ({
       token: t.name,
-      fallback: t.value as string,
+      fallback: legacy.value as string,
     }),
   )
   .filter(compose(pick('token'), not(isAccent)))
@@ -68,9 +69,7 @@ export const createColorStylesFromTemplate = (
     throw new Error(`[codegen] Unknown option found "${colorProperty}"`);
   }
 
-  const { prefix, cssProperty, filterFn, legacyFallbackCSSProperty } = colors[
-    colorProperty
-  ];
+  const { prefix, cssProperty, filterFn } = colors[colorProperty];
 
   return (
     prettier.format(
@@ -83,11 +82,7 @@ const ${colorProperty}ColorMap = {
     .map((t) => {
       // handle the default case eg color.border or color.text
       const propName = t.token.replace(prefix, '');
-      return `'${propName}': ${tokenToStyle(
-        cssProperty,
-        t.token,
-        `"var(${legacyFallbackCSSProperty})"`,
-      )}`;
+      return `'${propName}': ${tokenToStyle(cssProperty, t.token, t.fallback)}`;
     })
     .join(',\n\t')}
 };`,

package/scripts/color-map-template.tsx

@@ -31,7 +31,7 @@ const activeTokens = tokens
 export const createColorMapTemplate = () => {
   return prettier.format(
     `
-export const colorMap = {
+export default {
   ${activeTokens
     .map((t) => {
       // handle the default case eg color.border or color.text

package/scripts/spacing-codegen-template.tsx

@@ -1,7 +1,10 @@
 import prettier from 'prettier';
 import parserTypeScript from 'prettier/parser-typescript';
 
-import { SPACING_SCALE } from '../src/constants';
+// eslint-disable-next-line @atlassian/tangerine/import/entry-points
+import tokens from '@atlaskit/tokens/src/artifacts/tokens-raw/atlassian-spacing';
+
+import { capitalize, tokenToStyle } from './utils';
 
 const spacingProperties = {
   width: {
@@ -30,6 +33,22 @@ const spacingProperties = {
   },
 } as const;
 
+type Token = {
+  name: string;
+  fallback: string;
+};
+
+const onlyScaleTokens = tokens.filter((token) =>
+  token.name.startsWith('spacing.scale.'),
+);
+
+const activeTokens = onlyScaleTokens.map(
+  (t): Token => ({
+    name: t.name,
+    fallback: t.value,
+  }),
+);
+
 export const createSpacingStylesFromTemplate = (
   spacingProperty: keyof typeof spacingProperties,
 ) => {
@@ -39,20 +58,31 @@ export const createSpacingStylesFromTemplate = (
 
   const { cssProperty } = spacingProperties[spacingProperty];
 
-  return prettier.format(
-    `
+  return (
+    prettier.format(
+      `
 const ${spacingProperty}Map = {
-  ${Object.keys(SPACING_SCALE)
-    .map((key) => {
-      return `'${key}': css({ ${cssProperty}: SPACING_SCALE['${key}'] })`;
+  ${activeTokens
+    .sort((a, b) => (a.name < b.name ? -1 : 1))
+    .map((token) => {
+      const propName = token.name.replace('spacing.', '');
+      return `'${propName}': ${tokenToStyle(
+        cssProperty,
+        token.name,
+        token.fallback,
+      )}`;
     })
     .join(',\n\t')}
 };`,
-    {
-      singleQuote: true,
-      trailingComma: 'all',
-      parser: 'typescript',
-      plugins: [parserTypeScript],
-    },
+      {
+        singleQuote: true,
+        trailingComma: 'all',
+        parser: 'typescript',
+        plugins: [parserTypeScript],
+      },
+    ) +
+    `\nexport type ${capitalize(
+      spacingProperty,
+    )} = keyof typeof ${spacingProperty}Map;\n`
   );
 };

package/scripts/spacing-scale-template.tsx

@@ -0,0 +1,40 @@
+import prettier from 'prettier';
+import parserTypeScript from 'prettier/parser-typescript';
+
+// eslint-disable-next-line @atlassian/tangerine/import/entry-points
+import tokens from '@atlaskit/tokens/src/artifacts/tokens-raw/atlassian-spacing';
+
+const onlyScaleTokens = tokens.filter((token) =>
+  token.name.startsWith('spacing.scale.'),
+);
+
+type Token = {
+  name: string;
+};
+
+const activeTokens = onlyScaleTokens.map(
+  (t): Token => ({
+    name: t.name,
+  }),
+);
+
+export const createSpacingScaleTemplate = () => {
+  return prettier.format(
+    `
+export const spacingScale = [
+  ${activeTokens
+    .sort((a, b) => (a.name < b.name ? -1 : 1))
+    .map((token) => {
+      const propName = token.name.replace('spacing.', '');
+      return `'${propName}'`;
+    })
+    .join(',\n\t')}
+] as const;`,
+    {
+      singleQuote: true,
+      parser: 'typescript',
+      trailingComma: 'all',
+      plugins: [parserTypeScript],
+    },
+  );
+};

package/scripts/utils.tsx

@@ -5,9 +5,7 @@ export const tokenToStyle = (
   token: string,
   fallback: string,
 ) => {
-  return `css({\n\t${prop}: token('${token}', ${
-    fallback.startsWith('#') ? `'${fallback}'` : fallback
-  })\n})`;
+  return `css({\n\t${prop}: token('${token}', '${fallback}')\n})`;
 };
 
 type BooleanCallback<T> = (args: T) => boolean;

package/src/components/__tests__/unit/box.test.tsx

@@ -19,29 +19,26 @@ describe('Box component', () => {
   });
 
   describe('with SurfaceContext', () => {
-    it('should invert text color when box sets background', () => {
+    it('should respect text color when text sets its own color and bg is non-bold', () => {
       const { getByText } = render(
-        <Box backgroundColor={['brand.bold', '']}>
-          <Text>Text</Text>
+        <Box backgroundColor="information">
+          <Text color="color.text">Text</Text>
         </Box>,
       );
       const element = getByText('Text');
-      expect(element).toHaveStyleDeclaration(
-        'color',
-        token('color.text.inverse', 'var(--ds-co-fb)'),
-      );
+      expect(element).toHaveStyleDeclaration('color', token('color.text'));
     });
 
-    it('should respect text color when text sets its own color', () => {
+    it("should override text color when background won't meet contrast", () => {
       const { getByText } = render(
-        <Box backgroundColor={['brand.bold', '']}>
-          <Text color={['disabled', '']}>Text</Text>
+        <Box backgroundColor="brand.bold">
+          <Text color="disabled">Text</Text>
         </Box>,
       );
       const element = getByText('Text');
       expect(element).toHaveStyleDeclaration(
         'color',
-        token('color.text.disabled', 'var(--ds-co-fb)'),
+        token('color.text.inverse', '#FFFFFF'),
       );
     });
   });

package/src/components/__tests__/unit/inline.test.tsx

@@ -9,7 +9,7 @@ describe('Inline component', () => {
 
   it('should render inline', () => {
     const { getByText } = render(
-      <Inline gap="sp-50">
+      <Inline gap="scale.050">
         <Text>1</Text>
         <Text>2</Text>
       </Inline>,
@@ -20,7 +20,7 @@ describe('Inline component', () => {
 
   it('should render inline with dividers', () => {
     const { getByText } = render(
-      <Inline gap="sp-50" divider="/">
+      <Inline gap="scale.050" divider="/">
         <Text>1</Text>
         <Text>2</Text>
       </Inline>,
@@ -32,7 +32,7 @@ describe('Inline component', () => {
 
   it('should render with a given test id', () => {
     const { getByTestId } = render(
-      <Inline gap="sp-50" testId={testId}>
+      <Inline gap="scale.050" testId={testId}>
         <Text>1</Text>
         <Text>2</Text>
       </Inline>,

package/src/components/__tests__/unit/interaction-suface.test.tsx

@@ -57,7 +57,7 @@ describe('InteractionSurface component', () => {
 
   it('should render an inherited hover state if a Box context is present', () => {
     const { getByTestId } = render(
-      <Box backgroundColor={['brand.bold', '']}>
+      <Box backgroundColor="brand.bold">
         <InteractionSurface testId="surface">
           <Text>hello</Text>
         </InteractionSurface>

package/src/components/__tests__/unit/stack.test.tsx

@@ -9,7 +9,7 @@ describe('Stack component', () => {
 
   it('should render stack', () => {
     const { getByText } = render(
-      <Stack gap="sp-50">
+      <Stack gap="scale.050">
         <Text>1</Text>
         <Text>2</Text>
       </Stack>,
@@ -20,7 +20,7 @@ describe('Stack component', () => {
 
   it('should render with a given test id', () => {
     const { getByTestId } = render(
-      <Stack gap="sp-50" testId={testId}>
+      <Stack gap="scale.050" testId={testId}>
         <Text>1</Text>
         <Text>2</Text>
       </Stack>,

package/src/components/__tests__/unit/text.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { render } from '@testing-library/react';
+import { queryByAttribute, render } from '@testing-library/react';
 
 import { UNSAFE_Text as Text } from '../../../index';
 
@@ -10,11 +10,42 @@ describe('Text component', () => {
     expect(getByText('Text')).toBeInTheDocument();
   });
 
+  it('should not render redundant DOM nodes', () => {
+    const { getByTestId } = render(
+      <Text testId="test">
+        <Text>Text</Text>
+      </Text>,
+    );
+    expect(getByTestId('test')).toMatchInlineSnapshot(`
+      .emotion-0 {
+        box-sizing: border-box;
+        margin: 0px;
+        padding: 0px;
+        font-family: -apple-system,BlinkMacSystemFont,'Segoe UI','Roboto','Oxygen','Ubuntu','Fira Sans','Droid Sans','Helvetica Neue',sans-serif;
+      }
+
+      <span
+        class="emotion-0"
+        data-testid="test"
+      >
+        Text
+      </span>
+    `);
+  });
+
   it('should render with given test id', () => {
     const { getByTestId } = render(<Text testId="test">Text</Text>);
     expect(getByTestId('test')).toBeInTheDocument();
   });
 
+  it('should render with id attribute', () => {
+    const id = 'some-id';
+    const { container } = render(<Text id={id}>Text</Text>);
+    const queryById = queryByAttribute.bind(null, 'id');
+    const component = queryById(container, id);
+    expect(component).toBeDefined();
+  });
+
   describe('"as" prop behaviour', () => {
     it('renders without errors when a valid "as" value is given', () => {
       const { getByText } = render(<Text as="div">Text</Text>);

package/src/components/__tests__/visual-regression/__image_snapshots__/box-snapshot-test-tsx-box-example-with-background-and-padding-block-should-match-snapshot-1-snap.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:128e94d1e1102408446d7da401262174ba358d7845685816eacbc5bfa81470b8
-size 9214
+oid sha256:e3938c3eead13468b7dc2cacb8d06e3ebbf75b0f23b3b18f58d0aa97551d68c6
+size 9791

package/src/components/__tests__/visual-regression/__image_snapshots__/box-snapshot-test-tsx-box-example-with-background-and-padding-inline-should-match-snapshot-1-snap.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:e9b0acd38c6a7294dc348444056c418163109c55301142e211efa5aed1946396
-size 10172
+oid sha256:033f4d148e97f471a60577958670488c656b924542aecd6bc0ae05d64b31505e
+size 10406

package/src/components/__tests__/visual-regression/__image_snapshots__/box-snapshot-test-tsx-box-example-with-background-and-padding-should-match-snapshot-1-snap.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:d6542ccf064ba3d1c211921ea0445982b9dea19e8b700c3b8e580461c760b3d6
-size 9271
+oid sha256:188a241edc2128e4c9e4cd60257a291527f299594bf3abfe630444733358c1cb
+size 9554

package/src/components/__tests__/visual-regression/__image_snapshots__/box-snapshot-test-tsx-box-example-with-background-color-should-match-snapshot-1-snap.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:39025ea617812518eeffc2c42e1b9420a84f759fd9cbca270db083a9767651c0
-size 10914
+oid sha256:2d41b835d2bc00a4cd0c42639fce87eb989c1c35b421bde3b69f730a8549fd50
+size 13652

package/src/components/__tests__/visual-regression/__image_snapshots__/box-snapshot-test-tsx-box-example-with-border-color-should-match-snapshot-1-snap.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:38967c8e61f927fbb4f1590e03777ac9d7818196ba05340f78f324633fc25bf3
-size 8299
+oid sha256:fb05088335cb9120b7b2146accef095b67237e1c4f0705f3851faf9c21cf4375
+size 8871

package/src/components/__tests__/visual-regression/__image_snapshots__/inline-snapshot-test-tsx-inline-alignment-example-should-match-snapshot-1-snap.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:7cb6c27a507db62fd86112957d61a1e179013d3ca020a61e91064a33447a7271
-size 23986
+oid sha256:98a9a1b3f8173c6ed0520cc3da4493d6963527bb8699be3b26729392e25e0539
+size 24062

package/src/components/__tests__/visual-regression/__image_snapshots__/inline-snapshot-test-tsx-inline-spacing-example-should-match-snapshot-1-snap.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:b917c7cbd8e7318669a2607ecd124ca41aa94bdefda21a74761965f4ef895ec1
-size 23413
+oid sha256:6fe1a7a68e8903aca9f0ea6aad8ac74da225d76784fb4cb041f80fde57a553cc
+size 30391

package/src/components/__tests__/visual-regression/__image_snapshots__/stack-snapshot-test-tsx-stack-alignment-example-should-match-snapshot-1-snap.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:3a37629aa269d2b05af02d0203219d88df7319357a88dab893c4ed9286dd6e9f
-size 26608
+oid sha256:3d5a9d4369d39aea2c98b9b329881f1769e29e2931321b85a000d81c88c1f0ab
+size 26736

package/src/components/__tests__/visual-regression/__image_snapshots__/stack-snapshot-test-tsx-stack-spacing-example-should-match-snapshot-1-snap.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:2d8ca380f60df6cfb09884b42f92306011c857d9a9af51220b26c881fce73ae4
-size 12394
+oid sha256:75afc824514d0d9bc9514d73c019fcc37d8188250ccf2e6e81735b397e70ee2f
+size 12243

package/src/components/__tests__/visual-regression/__image_snapshots__/text-snapshot-test-tsx-text-example-with-line-heights-should-match-snapshot-1-snap.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:c21a4c9458932bbc35ccc0ca3c56ed2cabf5b1b5f4051421af85b685f9e570e6
-size 6402
+oid sha256:82d6c565306b9c2ca2a101d805d01c90c431d910527ab8777b4bc5b9a8210d26
+size 6473

package/src/components/__tests__/visual-regression/__image_snapshots__/text-snapshot-test-tsx-text-example-with-testing-should-match-snapshot-1-snap.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:4598b121017d92ae045300814d425ee546fd2bf792ee01d7632268abc5592a5d
-size 9219
+oid sha256:4dce10f0a13ba616748b8d8b91b73c6f47e55b794388800a27977e89cf2b0eff
+size 11931