@atlaskit/primitives 0.1.1 → 0.2.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/primitives
 
+## 0.2.1
+
+### Patch Changes
+
+- [`5b886634089`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5b886634089) - [ux] Change Box to be the default export from `@atlaskit/primitives/box`. Fix the negative value of `margin-inline` in Inline `separator` not being applied properly.
+
+## 0.2.0
+
+### Minor Changes
+
+- [`228cce759e8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/228cce759e8) - Create Box component.
+
 ## 0.1.1
 
 ### Patch Changes

package/dist/cjs/components/box.js

@@ -1,13 +1,99 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "Box", {
-  enumerable: true,
-  get: function get() {
-    return _box.default;
-  }
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _baseBox = require("./internal/base-box.partial");
+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"],
+  _excluded2 = ["style", "className"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+// TODO: Fill in the component {description} and ensure links point to the correct {packageName} location.
+// Remove links that the component does not have (such as usage). If there are no links remove them all.
+/**
+ * __Box__
+ *
+ * A box {description}.
+ *
+ * - [Examples](https://atlassian.design/components/{packageName}/examples)
+ * - [Code](https://atlassian.design/components/{packageName}/code)
+ * - [Usage](https://atlassian.design/components/{packageName}/usage)
+ */
+var Box = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var as = _ref.as,
+    children = _ref.children,
+    color = _ref.color,
+    backgroundColor = _ref.backgroundColor,
+    shadow = _ref.shadow,
+    borderStyle = _ref.borderStyle,
+    borderWidth = _ref.borderWidth,
+    borderRadius = _ref.borderRadius,
+    borderColor = _ref.borderColor,
+    layer = _ref.layer,
+    flex = _ref.flex,
+    flexGrow = _ref.flexGrow,
+    flexShrink = _ref.flexShrink,
+    alignSelf = _ref.alignSelf,
+    overflow = _ref.overflow,
+    overflowInline = _ref.overflowInline,
+    overflowBlock = _ref.overflowBlock,
+    padding = _ref.padding,
+    paddingBlock = _ref.paddingBlock,
+    paddingBlockStart = _ref.paddingBlockStart,
+    paddingBlockEnd = _ref.paddingBlockEnd,
+    paddingInline = _ref.paddingInline,
+    paddingInlineStart = _ref.paddingInlineStart,
+    paddingInlineEnd = _ref.paddingInlineEnd,
+    height = _ref.height,
+    width = _ref.width,
+    _ref$display = _ref.display,
+    display = _ref$display === void 0 ? 'block' : _ref$display,
+    _ref$position = _ref.position,
+    position = _ref$position === void 0 ? 'static' : _ref$position,
+    customStyles = _ref.customStyles,
+    testId = _ref.testId,
+    htmlAttributes = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var style = htmlAttributes.style,
+    className = htmlAttributes.className,
+    safeHtmlAttributes = (0, _objectWithoutProperties2.default)(htmlAttributes, _excluded2);
+  return /*#__PURE__*/_react.default.createElement(_baseBox.BaseBox, (0, _extends2.default)({
+    as: as,
+    color: color,
+    backgroundColor: backgroundColor,
+    shadow: shadow,
+    borderStyle: borderStyle,
+    borderWidth: borderWidth,
+    borderRadius: borderRadius,
+    borderColor: borderColor,
+    layer: layer,
+    flex: flex,
+    flexGrow: flexGrow,
+    flexShrink: flexShrink,
+    alignSelf: alignSelf,
+    overflow: overflow,
+    overflowInline: overflowInline,
+    overflowBlock: overflowBlock,
+    padding: padding,
+    paddingBlock: paddingBlock,
+    paddingBlockStart: paddingBlockStart,
+    paddingBlockEnd: paddingBlockEnd,
+    paddingInline: paddingInline,
+    paddingInlineStart: paddingInlineStart,
+    paddingInlineEnd: paddingInlineEnd,
+    height: height,
+    width: width,
+    display: display,
+    position: position,
+    UNSAFE_style: customStyles,
+    testId: testId,
+    ref: ref
+  }, safeHtmlAttributes), children);
 });
-var _box = _interopRequireDefault(require("@atlaskit/ds-explorations/box"));
+var _default = Box;
+exports.default = _default;

package/dist/cjs/components/inline.partial.js

@@ -1,9 +1,11 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
 /** @jsx jsx */
@@ -50,56 +52,30 @@ var flexWrapStyles = (0, _react2.css)({
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::e0d436d3312290a98dbfd91d90dd6b9e>>
+ * @codegen <<SignedSource::0e30ffcc6aef7932f9d8ff2543327236>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["space"]
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
  */
-var spaceMap = {
-  '0': (0, _react2.css)({
-    gap: "var(--ds-space-0, 0px)"
-  }),
-  '025': (0, _react2.css)({
-    gap: "var(--ds-space-025, 2px)"
-  }),
-  '050': (0, _react2.css)({
-    gap: "var(--ds-space-050, 4px)"
-  }),
-  '075': (0, _react2.css)({
-    gap: "var(--ds-space-075, 6px)"
-  }),
-  '100': (0, _react2.css)({
-    gap: "var(--ds-space-100, 8px)"
-  }),
-  '1000': (0, _react2.css)({
-    gap: "var(--ds-space-1000, 80px)"
-  }),
-  '150': (0, _react2.css)({
-    gap: "var(--ds-space-150, 12px)"
-  }),
-  '200': (0, _react2.css)({
-    gap: "var(--ds-space-200, 16px)"
-  }),
-  '250': (0, _react2.css)({
-    gap: "var(--ds-space-250, 20px)"
-  }),
-  '300': (0, _react2.css)({
-    gap: "var(--ds-space-300, 24px)"
-  }),
-  '400': (0, _react2.css)({
-    gap: "var(--ds-space-400, 32px)"
-  }),
-  '500': (0, _react2.css)({
-    gap: "var(--ds-space-500, 40px)"
-  }),
-  '600': (0, _react2.css)({
-    gap: "var(--ds-space-600, 48px)"
-  }),
-  '800': (0, _react2.css)({
-    gap: "var(--ds-space-800, 64px)"
-  })
-};
+var spaceMap = Object.fromEntries(['gap'].map(function (property) {
+  return [property, {
+    '0': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-0, 0px)")),
+    '025': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-025, 2px)")),
+    '050': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-050, 4px)")),
+    '075': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-075, 6px)")),
+    '100': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-100, 8px)")),
+    '150': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-150, 12px)")),
+    '200': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-200, 16px)")),
+    '250': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-250, 20px)")),
+    '300': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-300, 24px)")),
+    '400': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-400, 32px)")),
+    '500': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-500, 40px)")),
+    '600': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-600, 48px)")),
+    '800': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-800, 64px)")),
+    '1000': (0, _react2.css)((0, _defineProperty2.default)({}, property, "var(--ds-space-1000, 80px)"))
+  }];
+}));
 /**
  * @codegenEnd
  */
@@ -112,7 +88,7 @@ var baseStyles = (0, _react2.css)({
 var separatorStyles = (0, _react2.css)({
   color: "var(--ds-text-subtle, #42526E)",
   marginBlock: "var(--ds-space-0, 0px)",
-  marginInline: "-".concat("var(--ds-space-025, 2px)"),
+  marginInline: "calc(-1 * ".concat("var(--ds-space-025, 2px)", ")"),
   pointerEvents: 'none',
   userSelect: 'none'
 });
@@ -157,7 +133,7 @@ var Inline = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(
   }) : rawChildren;
   var justifyContent = spread || alignInline;
   return (0, _react2.jsx)("div", {
-    css: [baseStyles, space && spaceMap[space], justifyContent && justifyContentMap[justifyContent], grow && flexGrowMap[grow], alignItems && alignItemsMap[alignItems], shouldWrap && flexWrapStyles],
+    css: [baseStyles, space && spaceMap.gap[space], justifyContent && justifyContentMap[justifyContent], grow && flexGrowMap[grow], alignItems && alignItemsMap[alignItems], shouldWrap && flexWrapStyles],
     "data-testid": testId,
     ref: ref
   }, children);