@atlaskit/ds-explorations 4.0.0 → 4.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (35) hide show
  1. package/CHANGELOG.md +374 -361
  2. package/README.md +4 -3
  3. package/afm-jira/tsconfig.json +24 -0
  4. package/dist/cjs/components/interaction-surface.partial.js +128 -128
  5. package/dist/cjs/internal/color-map.js +1 -1
  6. package/dist/es2019/components/interaction-surface.partial.js +128 -128
  7. package/dist/es2019/internal/color-map.js +1 -1
  8. package/dist/esm/components/interaction-surface.partial.js +128 -128
  9. package/dist/esm/internal/color-map.js +1 -1
  10. package/dist/types/components/interaction-surface.partial.d.ts +1 -1
  11. package/dist/types/internal/color-map.d.ts +1 -1
  12. package/dist/types-ts4.5/components/interaction-surface.partial.d.ts +1 -1
  13. package/dist/types-ts4.5/internal/color-map.d.ts +1 -1
  14. package/docs/01-basic.tsx +11 -13
  15. package/examples/99-interactions.tsx +173 -172
  16. package/package.json +72 -80
  17. package/report.api.md +127 -126
  18. package/scripts/__tests__/__snapshots__/codegen.test.tsx.snap +540 -540
  19. package/scripts/__tests__/codegen.test.tsx +15 -17
  20. package/scripts/codegen-styles.tsx +22 -27
  21. package/scripts/color-codegen-template.tsx +69 -82
  22. package/scripts/color-map-template.tsx +24 -29
  23. package/scripts/dimension-codegen-template.tsx +32 -35
  24. package/scripts/interaction-codegen.tsx +61 -74
  25. package/scripts/misc-codegen-template.tsx +23 -25
  26. package/scripts/utils.tsx +30 -34
  27. package/src/components/__tests__/unit/interaction-suface.test.tsx +60 -60
  28. package/src/components/interaction-surface.partial.tsx +412 -416
  29. package/src/components/surface-provider.tsx +1 -1
  30. package/src/components/types.tsx +10 -10
  31. package/src/constants.tsx +9 -9
  32. package/src/internal/color-map.tsx +28 -28
  33. package/src/internal/role-to-element.tsx +21 -21
  34. package/tsconfig.app.json +44 -44
  35. package/tsconfig.dev.json +71 -71
package/src/components/surface-provider.tsx CHANGED
@@ -15,7 +15,7 @@ export const SurfaceContext = createContext<any>('elevation.surface');
15
15
  * @see SurfaceContext
16
16
  */
17
17
  export const useSurface = () => {
18
- return useContext(SurfaceContext);
18
+ return useContext(SurfaceContext);
19
19
  };
20
20
 
21
21
  SurfaceContext.displayName = 'SurfaceProvider';
package/src/components/types.tsx CHANGED
@@ -1,15 +1,15 @@
1
1
  import type { CSSProperties } from 'react';
2
2
 
3
3
  export interface BasePrimitiveProps {
4
- /**
5
- * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
6
- */
7
- testId?: string;
4
+ /**
5
+ * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
6
+ */
7
+ testId?: string;
8
8
 
9
- /**
10
- * Inline styles to be applied to the primitive.
11
- * Marked as "unsafe" because any CSS properties can be provided here without any extra control or validation, including those that would be better managed by the primitive itself via props.
12
- * Effectively equivalent to the standard `style` prop but marked with a special name so we can rationalise its usage IN THE FUTURE.
13
- */
14
- UNSAFE_style?: CSSProperties;
9
+ /**
10
+ * Inline styles to be applied to the primitive.
11
+ * Marked as "unsafe" because any CSS properties can be provided here without any extra control or validation, including those that would be better managed by the primitive itself via props.
12
+ * Effectively equivalent to the standard `style` prop but marked with a special name so we can rationalise its usage IN THE FUTURE.
13
+ */
14
+ UNSAFE_style?: CSSProperties;
15
15
  }
package/src/constants.tsx CHANGED
@@ -1,13 +1,13 @@
1
1
  export const LAYERS = {
2
- card: 100,
3
- navigation: 200,
4
- dialog: 300,
5
- layer: 400,
6
- blanket: 500,
7
- modal: 510,
8
- flag: 600,
9
- spotlight: 700,
10
- tooltip: 800,
2
+ card: 100,
3
+ navigation: 200,
4
+ dialog: 300,
5
+ layer: 400,
6
+ blanket: 500,
7
+ modal: 510,
8
+ flag: 600,
9
+ spotlight: 700,
10
+ tooltip: 800,
11
11
  } as const;
12
12
 
13
13
  export type Layer = keyof typeof LAYERS;
package/src/internal/color-map.tsx CHANGED
@@ -3,36 +3,36 @@
3
3
  *
4
4
  * The color map is used to map a background color token to a matching text color that will meet contrast.
5
5
  *
6
- * @codegen <<SignedSource::4069cec92f6504471d42a7c6cc0f7930>>
6
+ * @codegen <<SignedSource::7d0040ba6b7bc80f7ebca42192d566ab>>
7
7
  * @codegenCommand yarn codegen-styles
8
8
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::f27d1519d51cc4a85383a00907847774>>
9
9
  */
10
10
  export default {
11
- 'neutral.bold': 'inverse',
12
- 'neutral.bold.hovered': 'inverse',
13
- 'neutral.bold.pressed': 'inverse',
14
- 'selected.bold': 'inverse',
15
- 'selected.bold.hovered': 'inverse',
16
- 'selected.bold.pressed': 'inverse',
17
- 'brand.bold': 'inverse',
18
- 'brand.bold.hovered': 'inverse',
19
- 'brand.bold.pressed': 'inverse',
20
- 'brand.boldest': 'inverse',
21
- 'brand.boldest.hovered': 'inverse',
22
- 'brand.boldest.pressed': 'inverse',
23
- 'danger.bold': 'inverse',
24
- 'danger.bold.hovered': 'inverse',
25
- 'danger.bold.pressed': 'inverse',
26
- 'warning.bold': 'warning.inverse',
27
- 'warning.bold.hovered': 'warning.inverse',
28
- 'warning.bold.pressed': 'warning.inverse',
29
- 'success.bold': 'inverse',
30
- 'success.bold.hovered': 'inverse',
31
- 'success.bold.pressed': 'inverse',
32
- 'discovery.bold': 'inverse',
33
- 'discovery.bold.hovered': 'inverse',
34
- 'discovery.bold.pressed': 'inverse',
35
- 'information.bold': 'inverse',
36
- 'information.bold.hovered': 'inverse',
37
- 'information.bold.pressed': 'inverse',
11
+ 'neutral.bold': 'inverse',
12
+ 'neutral.bold.hovered': 'inverse',
13
+ 'neutral.bold.pressed': 'inverse',
14
+ 'selected.bold': 'inverse',
15
+ 'selected.bold.hovered': 'inverse',
16
+ 'selected.bold.pressed': 'inverse',
17
+ 'brand.bold': 'inverse',
18
+ 'brand.bold.hovered': 'inverse',
19
+ 'brand.bold.pressed': 'inverse',
20
+ 'brand.boldest': 'inverse',
21
+ 'brand.boldest.hovered': 'inverse',
22
+ 'brand.boldest.pressed': 'inverse',
23
+ 'danger.bold': 'inverse',
24
+ 'danger.bold.hovered': 'inverse',
25
+ 'danger.bold.pressed': 'inverse',
26
+ 'warning.bold': 'warning.inverse',
27
+ 'warning.bold.hovered': 'warning.inverse',
28
+ 'warning.bold.pressed': 'warning.inverse',
29
+ 'success.bold': 'inverse',
30
+ 'success.bold.hovered': 'inverse',
31
+ 'success.bold.pressed': 'inverse',
32
+ 'discovery.bold': 'inverse',
33
+ 'discovery.bold.hovered': 'inverse',
34
+ 'discovery.bold.pressed': 'inverse',
35
+ 'information.bold': 'inverse',
36
+ 'information.bold.hovered': 'inverse',
37
+ 'information.bold.pressed': 'inverse',
38
38
  } as const;
package/src/internal/role-to-element.tsx CHANGED
@@ -3,27 +3,27 @@
3
3
  * @see https://www.unpkg.com/browse/react-gui@0.2.1/src/modules/getAccessibilityElementWithSideEffect.js
4
4
  */
5
5
  const roleToElementType = {
6
- article: 'article',
7
- banner: 'header',
8
- blockquote: 'blockquote',
9
- button: 'button',
10
- code: 'code',
11
- complementary: 'aside',
12
- contentinfo: 'footer',
13
- deletion: 'del',
14
- emphasis: 'em',
15
- figure: 'figure',
16
- insertion: 'ins',
17
- form: 'form',
18
- link: 'a',
19
- list: 'ul',
20
- listitem: 'li',
21
- main: 'main',
22
- navigation: 'nav',
23
- region: 'section',
24
- strong: 'strong',
25
- presentation: 'div',
26
- group: 'fieldset',
6
+ article: 'article',
7
+ banner: 'header',
8
+ blockquote: 'blockquote',
9
+ button: 'button',
10
+ code: 'code',
11
+ complementary: 'aside',
12
+ contentinfo: 'footer',
13
+ deletion: 'del',
14
+ emphasis: 'em',
15
+ figure: 'figure',
16
+ insertion: 'ins',
17
+ form: 'form',
18
+ link: 'a',
19
+ list: 'ul',
20
+ listitem: 'li',
21
+ main: 'main',
22
+ navigation: 'nav',
23
+ region: 'section',
24
+ strong: 'strong',
25
+ presentation: 'div',
26
+ group: 'fieldset',
27
27
  } as const;
28
28
 
29
29
  type RoleMap = typeof roleToElementType;
package/tsconfig.app.json CHANGED
@@ -1,46 +1,46 @@
1
1
  {
2
- "extends": "../../../tsconfig.base.json",
3
- "include": ["./src/**/*.ts", "./src/**/*.tsx"],
4
- "exclude": [
5
- "**/docs/**/*",
6
- "**/__tests__/**/*",
7
- "**/vr-tests/**/*",
8
- "**/__perf__/**/*",
9
- "**/*.test.*",
10
- "**/test.*",
11
- "**/test-*",
12
- "**/examples.ts",
13
- "**/examples.tsx",
14
- "**/examples/*.ts",
15
- "**/examples/*.tsx",
16
- "**/examples/**/*.ts",
17
- "**/examples/**/*.tsx",
18
- "**/storybook/**/*",
19
- "**/constellation/**/*",
20
- ".storybook/*",
21
- "./__fixtures__/**/*",
22
- "./__generated__/**/*",
23
- "./mocks/**/*",
24
- "./__mocks__/**/*",
25
- "**/mock.*",
26
- "**/codemods/**/*.ts",
27
- "**/codemods/**/*.tsx"
28
- ],
29
- "compilerOptions": {
30
- "baseUrl": "",
31
- "composite": true,
32
- "outDir": "../../../tsDist/@atlaskit__ds-explorations/app"
33
- },
34
- "references": [
35
- {
36
- "path": "../../../build/formatting/tsconfig.app.json"
37
- },
38
- {
39
- "path": "../tokens/tsconfig.app.json"
40
- },
41
- {
42
- "path": "../codegen/tsconfig.app.json"
43
- }
44
- ],
45
- "files": []
2
+ "extends": "../../../tsconfig.base.json",
3
+ "include": ["./src/**/*.ts", "./src/**/*.tsx"],
4
+ "exclude": [
5
+ "**/docs/**/*",
6
+ "**/__tests__/**/*",
7
+ "**/vr-tests/**/*",
8
+ "**/__perf__/**/*",
9
+ "**/*.test.*",
10
+ "**/test.*",
11
+ "**/test-*",
12
+ "**/examples.ts",
13
+ "**/examples.tsx",
14
+ "**/examples/*.ts",
15
+ "**/examples/*.tsx",
16
+ "**/examples/**/*.ts",
17
+ "**/examples/**/*.tsx",
18
+ "**/storybook/**/*",
19
+ "**/constellation/**/*",
20
+ ".storybook/*",
21
+ "./__fixtures__/**/*",
22
+ "./__generated__/**/*",
23
+ "./mocks/**/*",
24
+ "./__mocks__/**/*",
25
+ "**/mock.*",
26
+ "**/codemods/**/*.ts",
27
+ "**/codemods/**/*.tsx"
28
+ ],
29
+ "compilerOptions": {
30
+ "baseUrl": "",
31
+ "composite": true,
32
+ "outDir": "../../../tsDist/@atlaskit__ds-explorations/app"
33
+ },
34
+ "references": [
35
+ {
36
+ "path": "../../../build/formatting/tsconfig.app.json"
37
+ },
38
+ {
39
+ "path": "../tokens/tsconfig.app.json"
40
+ },
41
+ {
42
+ "path": "../codegen/tsconfig.app.json"
43
+ }
44
+ ],
45
+ "files": []
46
46
  }
package/tsconfig.dev.json CHANGED
@@ -1,73 +1,73 @@
1
1
  {
2
- "extends": "../../../tsconfig.base.json",
3
- "include": [
4
- "**/docs/**/*",
5
- "**/__tests__/**/*",
6
- "**/vr-tests/**/*",
7
- "**/__perf__/**/*",
8
- "**/*.test.*",
9
- "**/test.*",
10
- "**/test-*",
11
- "**/examples.ts",
12
- "**/examples.tsx",
13
- "**/examples/*.ts",
14
- "**/examples/*.tsx",
15
- "**/examples/**/*.ts",
16
- "**/examples/**/*.tsx",
17
- "**/storybook/**/*",
18
- "**/constellation/**/*",
19
- ".storybook/*",
20
- "./__fixtures__/**/*",
21
- "./__generated__/**/*",
22
- "./mocks/**/*",
23
- "./__mocks__/**/*",
24
- "**/mock.*",
25
- "**/codemods/**/*.ts",
26
- "**/codemods/**/*.tsx",
27
- "./scripts/**/*"
28
- ],
29
- "exclude": ["./dist/**/*", "./build/**/*", "./node_modules/**/*"],
30
- "compilerOptions": {
31
- "baseUrl": "",
32
- "composite": true,
33
- "outDir": "../../../tsDist/@atlaskit__ds-explorations/dev"
34
- },
35
- "references": [
36
- {
37
- "path": "tsconfig.app.json"
38
- },
39
- {
40
- "path": "../../../build/formatting/tsconfig.app.json"
41
- },
42
- {
43
- "path": "../button/tsconfig.app.json"
44
- },
45
- {
46
- "path": "../code/tsconfig.app.json"
47
- },
48
- {
49
- "path": "../../../build/website/docs/tsconfig.app.json"
50
- },
51
- {
52
- "path": "../focus-ring/tsconfig.app.json"
53
- },
54
- {
55
- "path": "../heading/tsconfig.app.json"
56
- },
57
- {
58
- "path": "../icon/tsconfig.app.json"
59
- },
60
- {
61
- "path": "../primitives/tsconfig.app.json"
62
- },
63
- {
64
- "path": "../textfield/tsconfig.app.json"
65
- },
66
- {
67
- "path": "../tokens/tsconfig.app.json"
68
- },
69
- {
70
- "path": "../codegen/tsconfig.app.json"
71
- }
72
- ]
2
+ "extends": "../../../tsconfig.base.json",
3
+ "include": [
4
+ "**/docs/**/*",
5
+ "**/__tests__/**/*",
6
+ "**/vr-tests/**/*",
7
+ "**/__perf__/**/*",
8
+ "**/*.test.*",
9
+ "**/test.*",
10
+ "**/test-*",
11
+ "**/examples.ts",
12
+ "**/examples.tsx",
13
+ "**/examples/*.ts",
14
+ "**/examples/*.tsx",
15
+ "**/examples/**/*.ts",
16
+ "**/examples/**/*.tsx",
17
+ "**/storybook/**/*",
18
+ "**/constellation/**/*",
19
+ ".storybook/*",
20
+ "./__fixtures__/**/*",
21
+ "./__generated__/**/*",
22
+ "./mocks/**/*",
23
+ "./__mocks__/**/*",
24
+ "**/mock.*",
25
+ "**/codemods/**/*.ts",
26
+ "**/codemods/**/*.tsx",
27
+ "./scripts/**/*"
28
+ ],
29
+ "exclude": ["./dist/**/*", "./build/**/*", "./node_modules/**/*"],
30
+ "compilerOptions": {
31
+ "baseUrl": "",
32
+ "composite": true,
33
+ "outDir": "../../../tsDist/@atlaskit__ds-explorations/dev"
34
+ },
35
+ "references": [
36
+ {
37
+ "path": "tsconfig.app.json"
38
+ },
39
+ {
40
+ "path": "../../../build/formatting/tsconfig.app.json"
41
+ },
42
+ {
43
+ "path": "../button/tsconfig.app.json"
44
+ },
45
+ {
46
+ "path": "../code/tsconfig.app.json"
47
+ },
48
+ {
49
+ "path": "../../../build/website/docs/tsconfig.app.json"
50
+ },
51
+ {
52
+ "path": "../focus-ring/tsconfig.app.json"
53
+ },
54
+ {
55
+ "path": "../heading/tsconfig.app.json"
56
+ },
57
+ {
58
+ "path": "../icon/tsconfig.app.json"
59
+ },
60
+ {
61
+ "path": "../primitives/tsconfig.app.json"
62
+ },
63
+ {
64
+ "path": "../textfield/tsconfig.app.json"
65
+ },
66
+ {
67
+ "path": "../tokens/tsconfig.app.json"
68
+ },
69
+ {
70
+ "path": "../codegen/tsconfig.app.json"
71
+ }
72
+ ]
73
73
  }