@atlaskit/ds-explorations 0.0.3 → 0.1.2

package/scripts/interaction-codegen.tsx

@@ -0,0 +1,109 @@
+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-light';
+
+import {
+  capitalize,
+  compose,
+  isAccent,
+  isHovered,
+  isPressed,
+  or,
+  pick,
+} from './utils';
+
+type Token = {
+  token: string;
+  fallback: string;
+};
+
+// NB: Fallback CSS variables can be deleted when tokens are no longer behind a feature flag
+const colors = {
+  text: {
+    prefix: 'color.text.',
+    cssProperty: 'color',
+    filterFn: <T extends Token>(t: T) => t.token.startsWith(colors.text.prefix),
+  },
+  background: {
+    prefix: 'color.background.',
+    cssProperty: 'backgroundColor',
+    filterFn: <T extends Token>(t: T) =>
+      t.token.startsWith(colors.background.prefix) ||
+      t.token.startsWith('elevation.surface') ||
+      t.token.startsWith('color.blanket'),
+  },
+  border: {
+    prefix: 'color.border.',
+    cssProperty: 'borderColor',
+    filterFn: <T extends Token>(t: T) =>
+      t.token.startsWith(colors.border.prefix),
+  },
+} as const;
+
+const activeTokens = tokens
+  .filter(
+    (t) =>
+      t.attributes.state !== 'deleted' && t.attributes.state !== 'deprecated',
+  )
+  .map(
+    (t): Token => ({
+      token: t.name,
+      fallback: t.value as string,
+    }),
+  )
+  .filter(compose(pick('token'), or(isAccent, isPressed, isHovered)));
+
+const pressedTokens = activeTokens.filter(compose(pick('token'), isPressed));
+const hoveredTokens = activeTokens.filter(compose(pick('token'), isHovered));
+
+export const createInteractionStylesFromTemplate = (
+  colorProperty: keyof typeof colors,
+) => {
+  if (!colors[colorProperty]) {
+    throw new Error(`[codegen] Unknown option found "${colorProperty}"`);
+  }
+
+  const { prefix, cssProperty, filterFn } = colors[colorProperty];
+
+  return (
+    prettier.format(
+      `
+const ${colorProperty}ActiveColorMap = {
+  ${pressedTokens
+    .filter(filterFn)
+    // @ts-ignore
+    .map((t) => ({ ...t, token: t.token.replaceAll('.[default]', '') }))
+    .map((t) => {
+      // handle the default case eg color.border or color.text
+      const propName = t.token.replace(prefix, '').replace('.pressed', '');
+      return `'${propName}': css({\n\t':active': { ${cssProperty}: token('${t.token}') }\n})`;
+    })
+    .join(',\n\t')}
+};
+
+const ${colorProperty}HoverColorMap = {
+  ${hoveredTokens
+    .filter(filterFn)
+    // @ts-ignore
+    .map((t) => ({ ...t, token: t.token.replaceAll('.[default]', '') }))
+    .map((t) => {
+      // handle the default case eg color.border or color.text
+      const propName = t.token.replace(prefix, '').replace('.hovered', '');
+      return `'${propName}': css({\n\t':hover': { ${cssProperty}: token('${t.token}') }\n})`;
+    })
+    .join(',\n\t')}
+};`,
+      {
+        singleQuote: true,
+        parser: 'typescript',
+        trailingComma: 'all',
+        plugins: [parserTypeScript],
+      },
+    ) +
+    `\ntype Interaction${capitalize(
+      colorProperty,
+    )}Color = keyof typeof ${colorProperty}HoverColorMap;\n`
+  );
+};

package/scripts/spacing-codegen-template.tsx

@@ -10,6 +10,9 @@ const spacingProperties = {
   height: {
     cssProperty: 'height',
   },
+  padding: {
+    cssProperty: 'padding',
+  },
   paddingBlock: {
     cssProperty: 'paddingBlock',
   },
@@ -39,6 +42,11 @@ const ${spacingProperty}Map = {
     })
     .join(',\n\t')}
 };`,
-    { singleQuote: true, parser: 'typescript', plugins: [parserTypeScript] },
+    {
+      singleQuote: true,
+      trailingComma: 'all',
+      parser: 'typescript',
+      plugins: [parserTypeScript],
+    },
   );
 };

package/scripts/utils.tsx

@@ -10,13 +10,17 @@ export const tokenToStyle = (
   })\n})`;
 };
 
+type BooleanCallback<T> = (args: T) => boolean;
+
 export const compose = (...fns: ((...any: any[]) => any)[]) => (x: any) =>
   fns.reduce((res, fn) => fn(res), x);
 export const pick = <T extends any>(key: keyof T) => (obj: T) => obj[key];
 export const isAccent = (str: string) => str.includes('accent');
 export const isPressed = (str: string) => str.includes('pressed');
 export const isHovered = (str: string) => str.includes('hovered');
-export const not = <T extends any>(cb: (args: T) => boolean) => (val: T) =>
+export const not = <T extends any>(cb: BooleanCallback<T>) => (val: T) =>
   !cb(val);
+export const or = <T extends any>(...fns: BooleanCallback<T>[]) => (val: T) =>
+  fns.some((fn) => fn(val));
 export const capitalize = (str: string) =>
   str.charAt(0).toUpperCase() + str.slice(1);

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

@@ -0,0 +1,50 @@
+import React from 'react';
+
+import { render } from '@testing-library/react';
+
+import { token } from '@atlaskit/tokens';
+
+import { UNSAFE_Box as Box, UNSAFE_Text as Text } from '../../../index';
+
+describe('Box component', () => {
+  const testId = 'test';
+
+  it('should render box', () => {
+    const { getByText } = render(<Box>Box</Box>);
+    expect(getByText('Box')).toBeInTheDocument();
+  });
+
+  describe('with SurfaceContext', () => {
+    it('should invert text color when box sets background', () => {
+      const { getByText } = render(
+        <Box backgroundColor={['brand.bold', '']}>
+          <Text>Text</Text>
+        </Box>,
+      );
+      const element = getByText('Text');
+      expect(element).toHaveStyleDeclaration(
+        'color',
+        token('color.text.inverse', 'var(--ds-co-fb)'),
+      );
+    });
+
+    it('should respect text color when text sets its own color', () => {
+      const { getByText } = render(
+        <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)'),
+      );
+    });
+  });
+
+  it('should render with a given test id', () => {
+    const { getByTestId } = render(<Box testId={testId}>Box with testid</Box>);
+    const element = getByTestId(testId);
+    expect(element).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,43 @@
+import React from 'react';
+
+import { render } from '@testing-library/react';
+
+import { UNSAFE_Box as Box, UNSAFE_Inline as Inline } from '../../../index';
+
+describe('Inline component', () => {
+  const testId = 'test';
+
+  it('should render inline', () => {
+    const { getByText } = render(
+      <Inline gap="sp-50">
+        <Box>1</Box>
+        <Box>2</Box>
+      </Inline>,
+    );
+    expect(getByText('1')).toBeInTheDocument();
+    expect(getByText('2')).toBeInTheDocument();
+  });
+
+  it('should render inline with dividers', () => {
+    const { getByText } = render(
+      <Inline gap="sp-50" divider="/">
+        <Box>1</Box>
+        <Box>2</Box>
+      </Inline>,
+    );
+    expect(getByText('1')).toBeInTheDocument();
+    expect(getByText('2')).toBeInTheDocument();
+    expect(getByText('/')).toBeInTheDocument();
+  });
+
+  it('should render with a given test id', () => {
+    const { getByTestId } = render(
+      <Inline gap="sp-50" testId={testId}>
+        <Box>1</Box>
+        <Box>2</Box>
+      </Inline>,
+    );
+    const element = getByTestId(testId);
+    expect(element).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,70 @@
+import React from 'react';
+
+import { act, fireEvent, render } from '@testing-library/react';
+
+import { token } from '@atlaskit/tokens';
+
+import {
+  UNSAFE_Box as Box,
+  UNSAFE_InteractionSurface as InteractionSurface,
+} from '../../../index';
+
+describe('InteractionSurface component', () => {
+  it('should render by itself', () => {
+    const { getByTestId } = render(<InteractionSurface testId="basic" />);
+    expect(getByTestId('basic')).toBeInTheDocument();
+  });
+  it('should render given a neutral hover interaction by default', () => {
+    const { getByTestId } = render(
+      <div style={{ position: 'relative' }}>
+        <InteractionSurface testId="surface" />
+        hello
+      </div>,
+    );
+
+    const surfaceElement = getByTestId('surface');
+    expect(getComputedStyle(surfaceElement).backgroundColor).toBe('');
+    act(() => {
+      fireEvent.mouseOver(surfaceElement);
+      expect(surfaceElement).toHaveStyle(
+        `background-color: ${token('color.background.neutral.bold.hovered')}`,
+      );
+    });
+  });
+
+  it('should render given a brand hover interaction by if set as brand', () => {
+    const { getByTestId } = render(
+      <div style={{ position: 'relative' }}>
+        <InteractionSurface appearance="brand.bold" testId="surface" />
+        hello
+      </div>,
+    );
+
+    const surfaceElement = getByTestId('surface');
+    expect(getComputedStyle(surfaceElement).backgroundColor).toBe('');
+    act(() => {
+      fireEvent.mouseOver(surfaceElement);
+      expect(surfaceElement).toHaveStyle(
+        `background-color: ${token('color.background.brand.bold.hovered')}`,
+      );
+    });
+  });
+
+  it('should render an inherited hover state if a Box context is present', () => {
+    const { getByTestId } = render(
+      <Box backgroundColor={['brand.bold', '']}>
+        <InteractionSurface testId="surface" />
+        hello
+      </Box>,
+    );
+
+    const surfaceElement = getByTestId('surface');
+    expect(getComputedStyle(surfaceElement).backgroundColor).toBe('');
+    act(() => {
+      fireEvent.mouseOver(surfaceElement);
+      expect(surfaceElement).toHaveStyle(
+        `background-color: ${token('color.background.brand.bold.hovered')}`,
+      );
+    });
+  });
+});

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

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import { render } from '@testing-library/react';
+
+import { UNSAFE_Box as Box, UNSAFE_Stack as Stack } from '../../../index';
+
+describe('Stack component', () => {
+  const testId = 'test';
+
+  it('should render stack', () => {
+    const { getByText } = render(
+      <Stack gap="sp-50">
+        <Box>1</Box>
+        <Box>2</Box>
+      </Stack>,
+    );
+    expect(getByText('1')).toBeInTheDocument();
+    expect(getByText('2')).toBeInTheDocument();
+  });
+
+  it('should render with a given test id', () => {
+    const { getByTestId } = render(
+      <Stack gap="sp-50" testId={testId}>
+        <Box>1</Box>
+        <Box>2</Box>
+      </Stack>,
+    );
+    const element = getByTestId(testId);
+    expect(element).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,33 @@
+import React from 'react';
+
+import { render } from '@testing-library/react';
+
+import { UNSAFE_Text as Text } from '../../../index';
+
+describe('Text component', () => {
+  it('should render given text', () => {
+    const { getByText } = render(<Text>Text</Text>);
+    expect(getByText('Text')).toBeInTheDocument();
+  });
+
+  it('should render with given test id', () => {
+    const { getByTestId } = render(<Text testId="test">Text</Text>);
+    expect(getByTestId('test')).toBeInTheDocument();
+  });
+
+  describe('"as" prop behaviour', () => {
+    it('renders without errors when a valid "as" value is given', () => {
+      const { getByText } = render(<Text as="div">Text</Text>);
+      expect(getByText('Text')).toBeInTheDocument();
+    });
+
+    it('throws when an invalid "as" value is given', () => {
+      // @ts-ignore purposefully providing an invalid value to test invariant behaviour
+      expect(() => render(<Text as="label">Text</Text>)).toThrow(
+        new Error(
+          'Invariant failed: @atlaskit/ds-explorations: Text received an invalid "as" value of "label"',
+        ),
+      );
+    });
+  });
+});

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

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:9dc77caab80c92fd4e4a3251b12e93d5675d26d92c25888f41ec308f1d346b92
+size 7638

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

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:c91cd68525bb247c17f8e6ece9324c83fda08b958bdef5be4e6b57993de2f6d9
+size 11589

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e09ad68fe694bac155e1fd60568b123a3906b0def131e1973dbd24da6324c7ab
+size 20620

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

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:eb39d049b365eb764d234de27fd8c49646213232ae31347dc846a23924f10776
+size 16922

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

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

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

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:3f907bdcd1449e0444850ddeb4301d6fa1fad478b4c8743d6aec32ceadf2f544
+size 19305

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

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

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

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8ec560d6acfc02bfcd334754d3d77aa5967861c50da704db4624429489bfca62
+size 4669

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

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4acd1b4517c70c46c956a077485e56ae98848f260f15a1510d47a816269dda60
+size 2899

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

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

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

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

package/src/components/__tests__/visual-regression/box-snapshot-test.tsx

@@ -0,0 +1,33 @@
+import {
+  getExampleUrl,
+  loadPage,
+  takeElementScreenShot,
+} from '@atlaskit/visual-regression/helper';
+
+describe('Box', () => {
+  [
+    'borderColor',
+    'backgroundColor',
+    'background-and-padding',
+    'background-and-paddingBlock',
+    'background-and-paddingInline',
+  ].forEach((selector) => {
+    it(`example with ${selector} should match snapshot`, async () => {
+      const url = getExampleUrl(
+        'design-system',
+        'ds-explorations',
+        'box',
+        global.__BASEURL__,
+      );
+      const { page } = global;
+
+      await loadPage(page, url);
+
+      const image = await takeElementScreenShot(
+        page,
+        `[data-testid="box-with-${selector}"]`,
+      );
+      expect(image).toMatchProdImageSnapshot();
+    });
+  });
+});

package/src/components/__tests__/visual-regression/inline-snapshot-test.tsx

@@ -0,0 +1,28 @@
+import {
+  getExampleUrl,
+  loadPage,
+  takeElementScreenShot,
+} from '@atlaskit/visual-regression/helper';
+
+describe('Inline', () => {
+  it.each(['spacing', 'alignment'])(
+    `%s example should match snapshot`,
+    async (selector) => {
+      const url = getExampleUrl(
+        'design-system',
+        'ds-explorations',
+        'inline',
+        global.__BASEURL__,
+      );
+      const { page } = global;
+
+      await loadPage(page, url);
+
+      const image = await takeElementScreenShot(
+        page,
+        `[data-testid="inline-${selector}"]`,
+      );
+      expect(image).toMatchProdImageSnapshot();
+    },
+  );
+});

package/src/components/__tests__/visual-regression/stack-snapshot-test.tsx

@@ -0,0 +1,28 @@
+import {
+  getExampleUrl,
+  loadPage,
+  takeElementScreenShot,
+} from '@atlaskit/visual-regression/helper';
+
+describe('Stack', () => {
+  it.each(['spacing', 'alignment'])(
+    `%s example should match snapshot`,
+    async (selector) => {
+      const url = getExampleUrl(
+        'design-system',
+        'ds-explorations',
+        'stack',
+        global.__BASEURL__,
+      );
+      const { page } = global;
+
+      await loadPage(page, url);
+
+      const image = await takeElementScreenShot(
+        page,
+        `[data-testid="stack-${selector}"]`,
+      );
+      expect(image).toMatchProdImageSnapshot();
+    },
+  );
+});

package/src/components/__tests__/visual-regression/text-snapshot-test.tsx

@@ -0,0 +1,31 @@
+import __noop from '@atlaskit/ds-lib/noop';
+import {
+  getExampleUrl,
+  loadPage,
+  takeElementScreenShot,
+} from '@atlaskit/visual-regression/helper';
+
+describe('Text', () => {
+  ['font-sizes', 'font-weights', 'line-heights', 'testing'].forEach(
+    (testId) => {
+      it(`example with ${testId} should match snapshot`, async () => {
+        const url = getExampleUrl(
+          'design-system',
+          'ds-explorations',
+          'text',
+          global.__BASEURL__,
+        );
+        const { page } = global;
+
+        await loadPage(page, url);
+
+        const image = await takeElementScreenShot(
+          page,
+          `[data-testid="${testId}"]`,
+        );
+
+        expect(image).toMatchProdImageSnapshot();
+      });
+    },
+  );
+});