@atlaskit/primitives 0.0.2 → 0.1.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/primitives
 
+## 0.1.1
+
+### Patch Changes
+
+- [`fe50d8cb56c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/fe50d8cb56c) - Internal change to add shape tokens to primitives.
+- Updated dependencies
+
+## 0.1.0
+
+### Minor Changes
+
+- [`eeb8baa5d74`](https://bitbucket.org/atlassian/atlassian-frontend/commits/eeb8baa5d74) - - Create `Stack` component
+  - Create `Inline` component
+
 ## 0.0.2
 
 ### Patch Changes

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

@@ -1,13 +1,167 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "Inline", {
-  enumerable: true,
-  get: function get() {
-    return _inline.default;
-  }
+exports.default = void 0;
+var _react = require("react");
+var _react2 = require("@emotion/react");
+/** @jsx jsx */
+
+var alignItemsMap = {
+  center: (0, _react2.css)({
+    alignItems: 'center'
+  }),
+  baseline: (0, _react2.css)({
+    alignItems: 'baseline'
+  }),
+  start: (0, _react2.css)({
+    alignItems: 'flex-start'
+  }),
+  end: (0, _react2.css)({
+    alignItems: 'flex-end'
+  })
+};
+var justifyContentMap = {
+  start: (0, _react2.css)({
+    justifyContent: 'flex-start'
+  }),
+  center: (0, _react2.css)({
+    justifyContent: 'center'
+  }),
+  end: (0, _react2.css)({
+    justifyContent: 'flex-end'
+  }),
+  'space-between': (0, _react2.css)({
+    justifyContent: 'space-between'
+  })
+};
+var flexGrowMap = {
+  hug: (0, _react2.css)({
+    flexGrow: 0
+  }),
+  fill: (0, _react2.css)({
+    flexGrow: 1
+  })
+};
+var flexWrapStyles = (0, _react2.css)({
+  flexWrap: 'wrap'
+});
+
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::e0d436d3312290a98dbfd91d90dd6b9e>>
+ * @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)"
+  })
+};
+/**
+ * @codegenEnd
+ */
+
+var baseStyles = (0, _react2.css)({
+  display: 'flex',
+  boxSizing: 'border-box',
+  flexDirection: 'row'
+});
+var separatorStyles = (0, _react2.css)({
+  color: "var(--ds-text-subtle, #42526E)",
+  marginBlock: "var(--ds-space-0, 0px)",
+  marginInline: "-".concat("var(--ds-space-025, 2px)"),
+  pointerEvents: 'none',
+  userSelect: 'none'
 });
-var _inline = _interopRequireDefault(require("@atlaskit/ds-explorations/inline"));
+var Separator = function Separator(_ref) {
+  var children = _ref.children;
+  return (0, _react2.jsx)("span", {
+    css: separatorStyles
+  }, children);
+};
+
+/**
+ * __Inline__
+ *
+ * Inline is a primitive component based on flexbox that manages the horizontal layout of direct children.
+ *
+ *
+ * @example
+ * ```tsx
+ *  <Inline>
+ *    <Box padding="space.100" backgroundColor="neutral"></Box>
+ *    <Box padding="space.100" backgroundColor="neutral"></Box>
+ *  </Inline>
+ * ```
+ *
+ */
+var Inline = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
+  var alignInline = _ref2.alignInline,
+    alignItems = _ref2.alignBlock,
+    _ref2$shouldWrap = _ref2.shouldWrap,
+    shouldWrap = _ref2$shouldWrap === void 0 ? false : _ref2$shouldWrap,
+    spread = _ref2.spread,
+    grow = _ref2.grow,
+    space = _ref2.space,
+    separator = _ref2.separator,
+    testId = _ref2.testId,
+    rawChildren = _ref2.children;
+  var separatorComponent = typeof separator === 'string' ? (0, _react2.jsx)(Separator, null, separator) : separator;
+  var children = separatorComponent ? _react.Children.toArray(rawChildren).filter(Boolean).map(function (child, index) {
+    return (0, _react2.jsx)(_react.Fragment, {
+      key: index
+    }, separator && index > 0 ? separatorComponent : null, child);
+  }) : 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],
+    "data-testid": testId,
+    ref: ref
+  }, children);
+}));
+Inline.displayName = 'Inline';
+var _default = Inline;
+exports.default = _default;

package/dist/cjs/components/internal/box.partial.js

@@ -77,28 +77,28 @@ var borderStyleMap = {
   })
 };
 var borderWidthMap = {
-  '0px': (0, _react2.css)({
-    borderWidth: '0px'
+  'size.050': (0, _react2.css)({
+    borderWidth: "var(--ds-width-050, 1px)"
   }),
-  '1px': (0, _react2.css)({
-    borderWidth: '1px'
-  }),
-  '2px': (0, _react2.css)({
-    borderWidth: '2px'
-  }),
-  '3px': (0, _react2.css)({
-    borderWidth: '3px'
+  'size.100': (0, _react2.css)({
+    borderWidth: "var(--ds-width-100, 2px)"
   })
 };
 var borderRadiusMap = {
-  normal: (0, _react2.css)({
-    borderRadius: '3px'
+  'radius.100': (0, _react2.css)({
+    borderRadius: "var(--ds-radius-200, 2px)"
+  }),
+  'radius.200': (0, _react2.css)({
+    borderRadius: "var(--ds-radius-200, 3px)"
+  }),
+  'radius.round': (0, _react2.css)({
+    borderRadius: "var(--ds-radius-round, 50%)"
   }),
-  rounded: (0, _react2.css)({
-    borderRadius: '50%'
+  'radius.300': (0, _react2.css)({
+    borderRadius: "var(--ds-radius-300, 8px)"
   }),
-  badge: (0, _react2.css)({
-    borderRadius: '8px'
+  'radius.400': (0, _react2.css)({
+    borderRadius: "var(--ds-radius-400, 16px)"
   })
 };
 

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

@@ -1,13 +1,138 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "Stack", {
-  enumerable: true,
-  get: function get() {
-    return _stack.default;
-  }
+exports.default = void 0;
+var _react = require("react");
+var _react2 = require("@emotion/react");
+/** @jsx jsx */
+
+var justifyContentMap = {
+  start: (0, _react2.css)({
+    justifyContent: 'start'
+  }),
+  center: (0, _react2.css)({
+    justifyContent: 'center'
+  }),
+  end: (0, _react2.css)({
+    justifyContent: 'end'
+  }),
+  'space-between': (0, _react2.css)({
+    justifyContent: 'space-between'
+  })
+};
+var alignItemsMap = {
+  start: (0, _react2.css)({
+    alignItems: 'start'
+  }),
+  center: (0, _react2.css)({
+    alignItems: 'center'
+  }),
+  end: (0, _react2.css)({
+    alignItems: 'end'
+  })
+};
+var flexGrowMap = {
+  hug: (0, _react2.css)({
+    flexGrow: 0
+  }),
+  fill: (0, _react2.css)({
+    flexGrow: 1
+  })
+};
+
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::e0d436d3312290a98dbfd91d90dd6b9e>>
+ * @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)"
+  })
+};
+/**
+ * @codegenEnd
+ */
+
+var baseStyles = (0, _react2.css)({
+  display: 'flex',
+  boxSizing: 'border-box',
+  flexDirection: 'column'
 });
-var _stack = _interopRequireDefault(require("@atlaskit/ds-explorations/stack"));
+
+/**
+ * __Stack__
+ *
+ * Stack is a primitive component based on flexbox that manages the vertical layout of direct children.
+ *
+ * @example
+ * ```tsx
+ *  <Stack>
+ *    <Box padding="space.100" backgroundColor="neutral"></Box>
+ *    <Box padding="space.100" backgroundColor="neutral"></Box>
+ *  </Stack>
+ * ```
+ *
+ */
+var Stack = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var alignItems = _ref.alignInline,
+    alignBlock = _ref.alignBlock,
+    spread = _ref.spread,
+    grow = _ref.grow,
+    space = _ref.space,
+    children = _ref.children,
+    testId = _ref.testId;
+  var justifyContent = spread || alignBlock;
+  return (0, _react2.jsx)("div", {
+    css: [baseStyles, space && spaceMap[space], alignItems && alignItemsMap[alignItems], grow && flexGrowMap[grow], justifyContent && justifyContentMap[justifyContent]],
+    "data-testid": testId,
+    ref: ref
+  }, children);
+}));
+Stack.displayName = 'Stack';
+var _default = Stack;
+exports.default = _default;

package/dist/cjs/index.js

@@ -1,5 +1,6 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -12,15 +13,15 @@ Object.defineProperty(exports, "Box", {
 Object.defineProperty(exports, "Inline", {
   enumerable: true,
   get: function get() {
-    return _inline.Inline;
+    return _inline.default;
   }
 });
 Object.defineProperty(exports, "Stack", {
   enumerable: true,
   get: function get() {
-    return _stack.Stack;
+    return _stack.default;
   }
 });
-var _stack = require("./components/stack.partial");
+var _stack = _interopRequireDefault(require("./components/stack.partial"));
 var _box = require("./components/box");
-var _inline = require("./components/inline.partial");
+var _inline = _interopRequireDefault(require("./components/inline.partial"));

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/primitives",
-	"version": "0.0.2",
+	"version": "0.1.1",
 	"sideEffects": false
 }

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

@@ -1,2 +1,158 @@
-// eslint-disable-next-line @repo/internal/codegen/signed-source-integrity
-export { default as Inline } from '@atlaskit/ds-explorations/inline';
+/** @jsx jsx */
+import { Children, forwardRef, Fragment, memo } from 'react';
+import { css, jsx } from '@emotion/react';
+const alignItemsMap = {
+  center: css({
+    alignItems: 'center'
+  }),
+  baseline: css({
+    alignItems: 'baseline'
+  }),
+  start: css({
+    alignItems: 'flex-start'
+  }),
+  end: css({
+    alignItems: 'flex-end'
+  })
+};
+const justifyContentMap = {
+  start: css({
+    justifyContent: 'flex-start'
+  }),
+  center: css({
+    justifyContent: 'center'
+  }),
+  end: css({
+    justifyContent: 'flex-end'
+  }),
+  'space-between': css({
+    justifyContent: 'space-between'
+  })
+};
+const flexGrowMap = {
+  hug: css({
+    flexGrow: 0
+  }),
+  fill: css({
+    flexGrow: 1
+  })
+};
+const flexWrapStyles = css({
+  flexWrap: 'wrap'
+});
+
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::e0d436d3312290a98dbfd91d90dd6b9e>>
+ * @codegenId spacing
+ * @codegenCommand yarn codegen-styles
+ * @codegenParams ["space"]
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
+ */
+const spaceMap = {
+  '0': css({
+    gap: "var(--ds-space-0, 0px)"
+  }),
+  '025': css({
+    gap: "var(--ds-space-025, 2px)"
+  }),
+  '050': css({
+    gap: "var(--ds-space-050, 4px)"
+  }),
+  '075': css({
+    gap: "var(--ds-space-075, 6px)"
+  }),
+  '100': css({
+    gap: "var(--ds-space-100, 8px)"
+  }),
+  '1000': css({
+    gap: "var(--ds-space-1000, 80px)"
+  }),
+  '150': css({
+    gap: "var(--ds-space-150, 12px)"
+  }),
+  '200': css({
+    gap: "var(--ds-space-200, 16px)"
+  }),
+  '250': css({
+    gap: "var(--ds-space-250, 20px)"
+  }),
+  '300': css({
+    gap: "var(--ds-space-300, 24px)"
+  }),
+  '400': css({
+    gap: "var(--ds-space-400, 32px)"
+  }),
+  '500': css({
+    gap: "var(--ds-space-500, 40px)"
+  }),
+  '600': css({
+    gap: "var(--ds-space-600, 48px)"
+  }),
+  '800': css({
+    gap: "var(--ds-space-800, 64px)"
+  })
+};
+/**
+ * @codegenEnd
+ */
+
+const baseStyles = css({
+  display: 'flex',
+  boxSizing: 'border-box',
+  flexDirection: 'row'
+});
+const separatorStyles = css({
+  color: "var(--ds-text-subtle, #42526E)",
+  marginBlock: "var(--ds-space-0, 0px)",
+  marginInline: `-${"var(--ds-space-025, 2px)"}`,
+  pointerEvents: 'none',
+  userSelect: 'none'
+});
+const Separator = ({
+  children
+}) => jsx("span", {
+  css: separatorStyles
+}, children);
+
+/**
+ * __Inline__
+ *
+ * Inline is a primitive component based on flexbox that manages the horizontal layout of direct children.
+ *
+ *
+ * @example
+ * ```tsx
+ *  <Inline>
+ *    <Box padding="space.100" backgroundColor="neutral"></Box>
+ *    <Box padding="space.100" backgroundColor="neutral"></Box>
+ *  </Inline>
+ * ```
+ *
+ */
+const Inline = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  alignInline,
+  alignBlock: alignItems,
+  shouldWrap = false,
+  spread,
+  grow,
+  space,
+  separator,
+  testId,
+  children: rawChildren
+}, ref) => {
+  const separatorComponent = typeof separator === 'string' ? jsx(Separator, null, separator) : separator;
+  const children = separatorComponent ? Children.toArray(rawChildren).filter(Boolean).map((child, index) => {
+    return jsx(Fragment, {
+      key: index
+    }, separator && index > 0 ? separatorComponent : null, child);
+  }) : rawChildren;
+  const justifyContent = spread || alignInline;
+  return jsx("div", {
+    css: [baseStyles, space && spaceMap[space], justifyContent && justifyContentMap[justifyContent], grow && flexGrowMap[grow], alignItems && alignItemsMap[alignItems], shouldWrap && flexWrapStyles],
+    "data-testid": testId,
+    ref: ref
+  }, children);
+}));
+Inline.displayName = 'Inline';
+export default Inline;

package/dist/es2019/components/internal/box.partial.js

@@ -69,28 +69,28 @@ const borderStyleMap = {
   })
 };
 const borderWidthMap = {
-  '0px': css({
-    borderWidth: '0px'
+  'size.050': css({
+    borderWidth: "var(--ds-width-050, 1px)"
   }),
-  '1px': css({
-    borderWidth: '1px'
-  }),
-  '2px': css({
-    borderWidth: '2px'
-  }),
-  '3px': css({
-    borderWidth: '3px'
+  'size.100': css({
+    borderWidth: "var(--ds-width-100, 2px)"
   })
 };
 const borderRadiusMap = {
-  normal: css({
-    borderRadius: '3px'
+  'radius.100': css({
+    borderRadius: "var(--ds-radius-200, 2px)"
+  }),
+  'radius.200': css({
+    borderRadius: "var(--ds-radius-200, 3px)"
+  }),
+  'radius.round': css({
+    borderRadius: "var(--ds-radius-round, 50%)"
   }),
-  rounded: css({
-    borderRadius: '50%'
+  'radius.300': css({
+    borderRadius: "var(--ds-radius-300, 8px)"
   }),
-  badge: css({
-    borderRadius: '8px'
+  'radius.400': css({
+    borderRadius: "var(--ds-radius-400, 16px)"
   })
 };