@atlaskit/ds-explorations 2.3.2 → 2.4.0

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

@@ -0,0 +1,182 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _react2 = require("@emotion/react");
+/** @jsx jsx */
+
+/**
+ * @private
+ * @deprecated DSP-8009: This type is scheduled for deletion.
+ * Please use `Inline` from `@atlaskit/primitives` instead.
+ */
+
+var flexAlignItemsMap = {
+  center: (0, _react2.css)({
+    alignItems: 'center'
+  }),
+  baseline: (0, _react2.css)({
+    alignItems: 'baseline'
+  }),
+  flexStart: (0, _react2.css)({
+    alignItems: 'flex-start'
+  }),
+  flexEnd: (0, _react2.css)({
+    alignItems: 'flex-end'
+  }),
+  start: (0, _react2.css)({
+    alignItems: 'start'
+  }),
+  end: (0, _react2.css)({
+    alignItems: 'end'
+  })
+};
+var flexJustifyContentMap = {
+  center: (0, _react2.css)({
+    justifyContent: 'center'
+  }),
+  flexStart: (0, _react2.css)({
+    justifyContent: 'flex-start'
+  }),
+  'space-between': (0, _react2.css)({
+    justifyContent: 'space-between'
+  }),
+  flexEnd: (0, _react2.css)({
+    justifyContent: 'flex-end'
+  }),
+  start: (0, _react2.css)({
+    justifyContent: 'start'
+  }),
+  end: (0, _react2.css)({
+    justifyContent: 'end'
+  }),
+  spaceBetween: (0, _react2.css)({
+    justifyContent: 'space-between'
+  })
+};
+var flexWrapMap = {
+  wrap: (0, _react2.css)({
+    flexWrap: 'wrap'
+  })
+};
+var baseStyles = (0, _react2.css)({
+  display: 'flex',
+  boxSizing: 'border-box',
+  flexDirection: 'row'
+});
+var dividerStyles = (0, _react2.css)({
+  margin: "0 ".concat("var(--ds-space-negative-025, -2px)"),
+  color: "var(--ds-text-subtle, #42526E)",
+  pointerEvents: 'none',
+  userSelect: 'none'
+});
+var Divider = function Divider(_ref) {
+  var children = _ref.children;
+  return (0, _react2.jsx)("span", {
+    css: dividerStyles
+  }, children);
+};
+
+/**
+ * __Inline__
+ *
+ * Inline is a primitive component based on flexbox that manages the horizontal layout of direct children.
+ * Renders a `div` by default.
+ *
+ * @private
+ * @deprecated DSP-8009: This primitive is scheduled for deletion.
+ * Please use `Inline` from `@atlaskit/primitives` instead.
+ *
+ * @example
+ * ```tsx
+ * const App = () => (
+ *   <Inline gap="space.100">
+ *     <Button />
+ *     <Button />
+ *   </Inline>
+ * )
+ * ```
+ */
+var Inline = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
+  var gap = _ref2.gap,
+    alignItems = _ref2.alignItems,
+    justifyContent = _ref2.justifyContent,
+    flexWrap = _ref2.flexWrap,
+    divider = _ref2.divider,
+    UNSAFE_style = _ref2.UNSAFE_style,
+    rawChildren = _ref2.children,
+    testId = _ref2.testId;
+  var dividerComponent = typeof divider === 'string' ? (0, _react2.jsx)(Divider, null, divider) : divider;
+  var children = divider ? _react.Children.toArray(rawChildren).filter(Boolean).map(function (child, index) {
+    return (0, _react2.jsx)(_react.Fragment, {
+      key: index
+    }, divider && index > 0 ? dividerComponent : null, child);
+  }) : rawChildren;
+  return (0, _react2.jsx)("div", {
+    style: UNSAFE_style,
+    css: [baseStyles, gap && columnGapMap[gap], alignItems && flexAlignItemsMap[alignItems], justifyContent && flexJustifyContentMap[justifyContent], flexWrap && flexWrapMap[flexWrap]],
+    "data-testid": testId,
+    ref: ref
+  }, children);
+}));
+Inline.displayName = 'Inline';
+var _default = exports.default = Inline;
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::63747c8b92ba373ad2259fa1fff3f434>>
+ * @codegenId spacing
+ * @codegenCommand yarn codegen-styles
+ * @codegenParams ["columnGap"]
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::298080e8024fb3eb37589721413e0156>>
+ */
+var columnGapMap = {
+  'space.0': (0, _react2.css)({
+    columnGap: "var(--ds-space-0, 0px)"
+  }),
+  'space.025': (0, _react2.css)({
+    columnGap: "var(--ds-space-025, 2px)"
+  }),
+  'space.050': (0, _react2.css)({
+    columnGap: "var(--ds-space-050, 4px)"
+  }),
+  'space.075': (0, _react2.css)({
+    columnGap: "var(--ds-space-075, 6px)"
+  }),
+  'space.100': (0, _react2.css)({
+    columnGap: "var(--ds-space-100, 8px)"
+  }),
+  'space.1000': (0, _react2.css)({
+    columnGap: "var(--ds-space-1000, 80px)"
+  }),
+  'space.150': (0, _react2.css)({
+    columnGap: "var(--ds-space-150, 12px)"
+  }),
+  'space.200': (0, _react2.css)({
+    columnGap: "var(--ds-space-200, 16px)"
+  }),
+  'space.250': (0, _react2.css)({
+    columnGap: "var(--ds-space-250, 20px)"
+  }),
+  'space.300': (0, _react2.css)({
+    columnGap: "var(--ds-space-300, 24px)"
+  }),
+  'space.400': (0, _react2.css)({
+    columnGap: "var(--ds-space-400, 32px)"
+  }),
+  'space.500': (0, _react2.css)({
+    columnGap: "var(--ds-space-500, 40px)"
+  }),
+  'space.600': (0, _react2.css)({
+    columnGap: "var(--ds-space-600, 48px)"
+  }),
+  'space.800': (0, _react2.css)({
+    columnGap: "var(--ds-space-800, 64px)"
+  })
+};
+
+/**
+ * @codegenEnd
+ */

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

@@ -0,0 +1,148 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _react2 = require("@emotion/react");
+/** @jsx jsx */
+
+/**
+ * @private
+ * @deprecated DSP-8009: This type is scheduled for deletion.
+ * Please use `Stack` from `@atlaskit/primitives` instead.
+ */
+
+var flexAlignItemsMap = {
+  center: (0, _react2.css)({
+    alignItems: 'center'
+  }),
+  baseline: (0, _react2.css)({
+    alignItems: 'baseline'
+  }),
+  flexStart: (0, _react2.css)({
+    alignItems: 'flex-start'
+  }),
+  flexEnd: (0, _react2.css)({
+    alignItems: 'flex-end'
+  }),
+  start: (0, _react2.css)({
+    alignItems: 'start'
+  }),
+  end: (0, _react2.css)({
+    alignItems: 'end'
+  })
+};
+var flexJustifyContentMap = {
+  center: (0, _react2.css)({
+    justifyContent: 'center'
+  }),
+  flexStart: (0, _react2.css)({
+    justifyContent: 'flex-start'
+  }),
+  flexEnd: (0, _react2.css)({
+    justifyContent: 'flex-end'
+  }),
+  start: (0, _react2.css)({
+    justifyContent: 'start'
+  }),
+  end: (0, _react2.css)({
+    justifyContent: 'end'
+  })
+};
+var flexWrapMap = {
+  wrap: (0, _react2.css)({
+    flexWrap: 'wrap'
+  })
+};
+var baseStyles = (0, _react2.css)({
+  display: 'flex',
+  boxSizing: 'border-box',
+  flexDirection: 'column'
+});
+
+/**
+ * __Stack__
+ *
+ * Stack is a primitive component based on flexbox that manages the vertical layout of direct children.
+ * Renders a `div` by default.
+ *
+ * @private
+ * @deprecated DSP-8009: This primitive is scheduled for deletion.
+ * Please use `Stack` from `@atlaskit/primitives` instead.
+ *
+ */
+var Stack = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var gap = _ref.gap,
+    alignItems = _ref.alignItems,
+    justifyContent = _ref.justifyContent,
+    flexWrap = _ref.flexWrap,
+    children = _ref.children,
+    UNSAFE_style = _ref.UNSAFE_style,
+    testId = _ref.testId;
+  return (0, _react2.jsx)("div", {
+    style: UNSAFE_style,
+    css: [baseStyles, gap && rowGapMap[gap], alignItems && flexAlignItemsMap[alignItems], justifyContent && flexJustifyContentMap[justifyContent], flexWrap && flexWrapMap[flexWrap]],
+    "data-testid": testId,
+    ref: ref
+  }, children);
+}));
+Stack.displayName = 'Stack';
+var _default = exports.default = Stack;
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::02ffa7c4ee52871441d288f44a054685>>
+ * @codegenId spacing
+ * @codegenCommand yarn codegen-styles
+ * @codegenParams ["rowGap"]
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::298080e8024fb3eb37589721413e0156>>
+ */
+var rowGapMap = {
+  'space.0': (0, _react2.css)({
+    rowGap: "var(--ds-space-0, 0px)"
+  }),
+  'space.025': (0, _react2.css)({
+    rowGap: "var(--ds-space-025, 2px)"
+  }),
+  'space.050': (0, _react2.css)({
+    rowGap: "var(--ds-space-050, 4px)"
+  }),
+  'space.075': (0, _react2.css)({
+    rowGap: "var(--ds-space-075, 6px)"
+  }),
+  'space.100': (0, _react2.css)({
+    rowGap: "var(--ds-space-100, 8px)"
+  }),
+  'space.1000': (0, _react2.css)({
+    rowGap: "var(--ds-space-1000, 80px)"
+  }),
+  'space.150': (0, _react2.css)({
+    rowGap: "var(--ds-space-150, 12px)"
+  }),
+  'space.200': (0, _react2.css)({
+    rowGap: "var(--ds-space-200, 16px)"
+  }),
+  'space.250': (0, _react2.css)({
+    rowGap: "var(--ds-space-250, 20px)"
+  }),
+  'space.300': (0, _react2.css)({
+    rowGap: "var(--ds-space-300, 24px)"
+  }),
+  'space.400': (0, _react2.css)({
+    rowGap: "var(--ds-space-400, 32px)"
+  }),
+  'space.500': (0, _react2.css)({
+    rowGap: "var(--ds-space-500, 40px)"
+  }),
+  'space.600': (0, _react2.css)({
+    rowGap: "var(--ds-space-600, 48px)"
+  }),
+  'space.800': (0, _react2.css)({
+    rowGap: "var(--ds-space-800, 64px)"
+  })
+};
+
+/**
+ * @codegenEnd
+ */

package/dist/cjs/index.js

@@ -4,17 +4,38 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "UNSAFE_Box", {
+  enumerable: true,
+  get: function get() {
+    return _box.default;
+  }
+});
+Object.defineProperty(exports, "UNSAFE_Inline", {
+  enumerable: true,
+  get: function get() {
+    return _inline.default;
+  }
+});
 Object.defineProperty(exports, "UNSAFE_InteractionSurface", {
   enumerable: true,
   get: function get() {
     return _interactionSurface.default;
   }
 });
+Object.defineProperty(exports, "UNSAFE_Stack", {
+  enumerable: true,
+  get: function get() {
+    return _stack.default;
+  }
+});
 Object.defineProperty(exports, "UNSAFE_Text", {
   enumerable: true,
   get: function get() {
     return _text.default;
   }
 });
+var _box = _interopRequireDefault(require("./components/box.partial"));
 var _text = _interopRequireDefault(require("./components/text.partial"));
+var _inline = _interopRequireDefault(require("./components/inline.partial"));
+var _stack = _interopRequireDefault(require("./components/stack.partial"));
 var _interactionSurface = _interopRequireDefault(require("./components/interaction-surface.partial"));