@atlaskit/primitives 0.1.0 → 0.2.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 (38) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/dist/cjs/components/box.js +80 -6
  3. package/dist/cjs/components/inline.partial.js +22 -46
  4. package/dist/cjs/components/internal/base-box.partial.js +822 -0
  5. package/dist/cjs/components/stack.partial.js +22 -46
  6. package/dist/cjs/index.js +2 -2
  7. package/dist/cjs/version.json +1 -1
  8. package/dist/es2019/components/box.js +75 -1
  9. package/dist/es2019/components/inline.partial.js +20 -20
  10. package/dist/es2019/components/internal/base-box.partial.js +839 -0
  11. package/dist/es2019/components/stack.partial.js +20 -20
  12. package/dist/es2019/index.js +2 -2
  13. package/dist/es2019/version.json +1 -1
  14. package/dist/esm/components/box.js +77 -1
  15. package/dist/esm/components/inline.partial.js +21 -46
  16. package/dist/esm/components/internal/base-box.partial.js +817 -0
  17. package/dist/esm/components/stack.partial.js +21 -46
  18. package/dist/esm/index.js +2 -2
  19. package/dist/esm/version.json +1 -1
  20. package/dist/types/components/box.d.ts +10 -1
  21. package/dist/types/components/inline.partial.d.ts +18 -16
  22. package/dist/types/components/internal/base-box.partial.d.ts +483 -0
  23. package/dist/types/components/stack.partial.d.ts +18 -16
  24. package/dist/types/components/types.d.ts +8 -1
  25. package/dist/types/index.d.ts +3 -3
  26. package/package.json +2 -3
  27. package/report.api.md +505 -46
  28. package/scripts/__tests__/__snapshots__/codegen.test.tsx.snap +204 -0
  29. package/scripts/codegen-styles.tsx +31 -16
  30. package/scripts/color-codegen-template.tsx +10 -7
  31. package/scripts/dimension-codegen-template.tsx +14 -2
  32. package/scripts/misc-codegen-template.tsx +1 -1
  33. package/scripts/spacing-codegen-template.tsx +37 -33
  34. package/tmp/api-report-tmp.d.ts +466 -46
  35. package/dist/cjs/components/internal/box.partial.js +0 -605
  36. package/dist/es2019/components/internal/box.partial.js +0 -597
  37. package/dist/esm/components/internal/box.partial.js +0 -600
  38. package/dist/types/components/internal/box.partial.d.ts +0 -348
@@ -37,56 +37,56 @@ const flexGrowMap = {
37
37
 
38
38
  /**
39
39
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
40
- * @codegen <<SignedSource::e0d436d3312290a98dbfd91d90dd6b9e>>
40
+ * @codegen <<SignedSource::0e30ffcc6aef7932f9d8ff2543327236>>
41
41
  * @codegenId spacing
42
42
  * @codegenCommand yarn codegen-styles
43
43
  * @codegenParams ["space"]
44
44
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
45
45
  */
46
- const spaceMap = {
46
+ const spaceMap = Object.fromEntries(['gap'].map(property => [property, {
47
47
  '0': css({
48
- gap: "var(--ds-space-0, 0px)"
48
+ [property]: "var(--ds-space-0, 0px)"
49
49
  }),
50
50
  '025': css({
51
- gap: "var(--ds-space-025, 2px)"
51
+ [property]: "var(--ds-space-025, 2px)"
52
52
  }),
53
53
  '050': css({
54
- gap: "var(--ds-space-050, 4px)"
54
+ [property]: "var(--ds-space-050, 4px)"
55
55
  }),
56
56
  '075': css({
57
- gap: "var(--ds-space-075, 6px)"
57
+ [property]: "var(--ds-space-075, 6px)"
58
58
  }),
59
59
  '100': css({
60
- gap: "var(--ds-space-100, 8px)"
61
- }),
62
- '1000': css({
63
- gap: "var(--ds-space-1000, 80px)"
60
+ [property]: "var(--ds-space-100, 8px)"
64
61
  }),
65
62
  '150': css({
66
- gap: "var(--ds-space-150, 12px)"
63
+ [property]: "var(--ds-space-150, 12px)"
67
64
  }),
68
65
  '200': css({
69
- gap: "var(--ds-space-200, 16px)"
66
+ [property]: "var(--ds-space-200, 16px)"
70
67
  }),
71
68
  '250': css({
72
- gap: "var(--ds-space-250, 20px)"
69
+ [property]: "var(--ds-space-250, 20px)"
73
70
  }),
74
71
  '300': css({
75
- gap: "var(--ds-space-300, 24px)"
72
+ [property]: "var(--ds-space-300, 24px)"
76
73
  }),
77
74
  '400': css({
78
- gap: "var(--ds-space-400, 32px)"
75
+ [property]: "var(--ds-space-400, 32px)"
79
76
  }),
80
77
  '500': css({
81
- gap: "var(--ds-space-500, 40px)"
78
+ [property]: "var(--ds-space-500, 40px)"
82
79
  }),
83
80
  '600': css({
84
- gap: "var(--ds-space-600, 48px)"
81
+ [property]: "var(--ds-space-600, 48px)"
85
82
  }),
86
83
  '800': css({
87
- gap: "var(--ds-space-800, 64px)"
84
+ [property]: "var(--ds-space-800, 64px)"
85
+ }),
86
+ '1000': css({
87
+ [property]: "var(--ds-space-1000, 80px)"
88
88
  })
89
- };
89
+ }]));
90
90
  /**
91
91
  * @codegenEnd
92
92
  */
@@ -122,7 +122,7 @@ const Stack = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
122
122
  }, ref) => {
123
123
  const justifyContent = spread || alignBlock;
124
124
  return jsx("div", {
125
- css: [baseStyles, space && spaceMap[space], alignItems && alignItemsMap[alignItems], grow && flexGrowMap[grow], justifyContent && justifyContentMap[justifyContent]],
125
+ css: [baseStyles, space && spaceMap.gap[space], alignItems && alignItemsMap[alignItems], grow && flexGrowMap[grow], justifyContent && justifyContentMap[justifyContent]],
126
126
  "data-testid": testId,
127
127
  ref: ref
128
128
  }, children);
@@ -1,3 +1,3 @@
1
- export { default as Stack } from './components/stack.partial';
2
1
  export { Box } from './components/box';
3
- export { default as Inline } from './components/inline.partial';
2
+ export { default as Inline } from './components/inline.partial';
3
+ export { default as Stack } from './components/stack.partial';
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/primitives",
3
- "version": "0.1.0",
3
+ "version": "0.2.0",
4
4
  "sideEffects": false
5
5
  }
@@ -1 +1,77 @@
1
- export { default as Box } from '@atlaskit/ds-explorations/box';
1
+ import _extends from "@babel/runtime/helpers/extends";
2
+ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
3
+ var _excluded = ["as", "children", "color", "backgroundColor", "shadow", "borderStyle", "borderWidth", "borderRadius", "borderColor", "layer", "flex", "flexGrow", "flexShrink", "alignSelf", "overflow", "overflowInline", "overflowBlock", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "height", "width", "display", "position", "customStyles", "testId"],
4
+ _excluded2 = ["style", "className"];
5
+ import React, { forwardRef } from 'react';
6
+ import { BaseBox } from './internal/base-box.partial';
7
+ var Box = /*#__PURE__*/forwardRef(function (_ref, ref) {
8
+ var as = _ref.as,
9
+ children = _ref.children,
10
+ color = _ref.color,
11
+ backgroundColor = _ref.backgroundColor,
12
+ shadow = _ref.shadow,
13
+ borderStyle = _ref.borderStyle,
14
+ borderWidth = _ref.borderWidth,
15
+ borderRadius = _ref.borderRadius,
16
+ borderColor = _ref.borderColor,
17
+ layer = _ref.layer,
18
+ flex = _ref.flex,
19
+ flexGrow = _ref.flexGrow,
20
+ flexShrink = _ref.flexShrink,
21
+ alignSelf = _ref.alignSelf,
22
+ overflow = _ref.overflow,
23
+ overflowInline = _ref.overflowInline,
24
+ overflowBlock = _ref.overflowBlock,
25
+ padding = _ref.padding,
26
+ paddingBlock = _ref.paddingBlock,
27
+ paddingBlockStart = _ref.paddingBlockStart,
28
+ paddingBlockEnd = _ref.paddingBlockEnd,
29
+ paddingInline = _ref.paddingInline,
30
+ paddingInlineStart = _ref.paddingInlineStart,
31
+ paddingInlineEnd = _ref.paddingInlineEnd,
32
+ height = _ref.height,
33
+ width = _ref.width,
34
+ _ref$display = _ref.display,
35
+ display = _ref$display === void 0 ? 'block' : _ref$display,
36
+ _ref$position = _ref.position,
37
+ position = _ref$position === void 0 ? 'static' : _ref$position,
38
+ customStyles = _ref.customStyles,
39
+ testId = _ref.testId,
40
+ htmlAttributes = _objectWithoutProperties(_ref, _excluded);
41
+ var style = htmlAttributes.style,
42
+ className = htmlAttributes.className,
43
+ safeHtmlAttributes = _objectWithoutProperties(htmlAttributes, _excluded2);
44
+ return /*#__PURE__*/React.createElement(BaseBox, _extends({
45
+ as: as,
46
+ color: color,
47
+ backgroundColor: backgroundColor,
48
+ shadow: shadow,
49
+ borderStyle: borderStyle,
50
+ borderWidth: borderWidth,
51
+ borderRadius: borderRadius,
52
+ borderColor: borderColor,
53
+ layer: layer,
54
+ flex: flex,
55
+ flexGrow: flexGrow,
56
+ flexShrink: flexShrink,
57
+ alignSelf: alignSelf,
58
+ overflow: overflow,
59
+ overflowInline: overflowInline,
60
+ overflowBlock: overflowBlock,
61
+ padding: padding,
62
+ paddingBlock: paddingBlock,
63
+ paddingBlockStart: paddingBlockStart,
64
+ paddingBlockEnd: paddingBlockEnd,
65
+ paddingInline: paddingInline,
66
+ paddingInlineStart: paddingInlineStart,
67
+ paddingInlineEnd: paddingInlineEnd,
68
+ height: height,
69
+ width: width,
70
+ display: display,
71
+ position: position,
72
+ UNSAFE_style: customStyles,
73
+ testId: testId,
74
+ ref: ref
75
+ }, safeHtmlAttributes), children);
76
+ });
77
+ export { Box };
@@ -1,3 +1,4 @@
1
+ import _defineProperty from "@babel/runtime/helpers/defineProperty";
1
2
  /** @jsx jsx */
2
3
  import { Children, forwardRef, Fragment, memo } from 'react';
3
4
  import { css, jsx } from '@emotion/react';
@@ -43,56 +44,30 @@ var flexWrapStyles = css({
43
44
 
44
45
  /**
45
46
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
46
- * @codegen <<SignedSource::e0d436d3312290a98dbfd91d90dd6b9e>>
47
+ * @codegen <<SignedSource::0e30ffcc6aef7932f9d8ff2543327236>>
47
48
  * @codegenId spacing
48
49
  * @codegenCommand yarn codegen-styles
49
50
  * @codegenParams ["space"]
50
51
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
51
52
  */
52
- var spaceMap = {
53
- '0': css({
54
- gap: "var(--ds-space-0, 0px)"
55
- }),
56
- '025': css({
57
- gap: "var(--ds-space-025, 2px)"
58
- }),
59
- '050': css({
60
- gap: "var(--ds-space-050, 4px)"
61
- }),
62
- '075': css({
63
- gap: "var(--ds-space-075, 6px)"
64
- }),
65
- '100': css({
66
- gap: "var(--ds-space-100, 8px)"
67
- }),
68
- '1000': css({
69
- gap: "var(--ds-space-1000, 80px)"
70
- }),
71
- '150': css({
72
- gap: "var(--ds-space-150, 12px)"
73
- }),
74
- '200': css({
75
- gap: "var(--ds-space-200, 16px)"
76
- }),
77
- '250': css({
78
- gap: "var(--ds-space-250, 20px)"
79
- }),
80
- '300': css({
81
- gap: "var(--ds-space-300, 24px)"
82
- }),
83
- '400': css({
84
- gap: "var(--ds-space-400, 32px)"
85
- }),
86
- '500': css({
87
- gap: "var(--ds-space-500, 40px)"
88
- }),
89
- '600': css({
90
- gap: "var(--ds-space-600, 48px)"
91
- }),
92
- '800': css({
93
- gap: "var(--ds-space-800, 64px)"
94
- })
95
- };
53
+ var spaceMap = Object.fromEntries(['gap'].map(function (property) {
54
+ return [property, {
55
+ '0': css(_defineProperty({}, property, "var(--ds-space-0, 0px)")),
56
+ '025': css(_defineProperty({}, property, "var(--ds-space-025, 2px)")),
57
+ '050': css(_defineProperty({}, property, "var(--ds-space-050, 4px)")),
58
+ '075': css(_defineProperty({}, property, "var(--ds-space-075, 6px)")),
59
+ '100': css(_defineProperty({}, property, "var(--ds-space-100, 8px)")),
60
+ '150': css(_defineProperty({}, property, "var(--ds-space-150, 12px)")),
61
+ '200': css(_defineProperty({}, property, "var(--ds-space-200, 16px)")),
62
+ '250': css(_defineProperty({}, property, "var(--ds-space-250, 20px)")),
63
+ '300': css(_defineProperty({}, property, "var(--ds-space-300, 24px)")),
64
+ '400': css(_defineProperty({}, property, "var(--ds-space-400, 32px)")),
65
+ '500': css(_defineProperty({}, property, "var(--ds-space-500, 40px)")),
66
+ '600': css(_defineProperty({}, property, "var(--ds-space-600, 48px)")),
67
+ '800': css(_defineProperty({}, property, "var(--ds-space-800, 64px)")),
68
+ '1000': css(_defineProperty({}, property, "var(--ds-space-1000, 80px)"))
69
+ }];
70
+ }));
96
71
  /**
97
72
  * @codegenEnd
98
73
  */
@@ -150,7 +125,7 @@ var Inline = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref2, ref) {
150
125
  }) : rawChildren;
151
126
  var justifyContent = spread || alignInline;
152
127
  return jsx("div", {
153
- css: [baseStyles, space && spaceMap[space], justifyContent && justifyContentMap[justifyContent], grow && flexGrowMap[grow], alignItems && alignItemsMap[alignItems], shouldWrap && flexWrapStyles],
128
+ css: [baseStyles, space && spaceMap.gap[space], justifyContent && justifyContentMap[justifyContent], grow && flexGrowMap[grow], alignItems && alignItemsMap[alignItems], shouldWrap && flexWrapStyles],
154
129
  "data-testid": testId,
155
130
  ref: ref
156
131
  }, children);