@atlaskit/ds-explorations 2.3.1 → 2.4.0

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

@@ -0,0 +1,177 @@
+/** @jsx jsx */
+import { Children, forwardRef, Fragment, memo } from 'react';
+import { css, jsx } from '@emotion/react';
+
+/**
+ * @private
+ * @deprecated DSP-8009: This type is scheduled for deletion.
+ * Please use `Inline` from `@atlaskit/primitives` instead.
+ */
+
+var flexAlignItemsMap = {
+  center: css({
+    alignItems: 'center'
+  }),
+  baseline: css({
+    alignItems: 'baseline'
+  }),
+  flexStart: css({
+    alignItems: 'flex-start'
+  }),
+  flexEnd: css({
+    alignItems: 'flex-end'
+  }),
+  start: css({
+    alignItems: 'start'
+  }),
+  end: css({
+    alignItems: 'end'
+  })
+};
+var flexJustifyContentMap = {
+  center: css({
+    justifyContent: 'center'
+  }),
+  flexStart: css({
+    justifyContent: 'flex-start'
+  }),
+  'space-between': css({
+    justifyContent: 'space-between'
+  }),
+  flexEnd: css({
+    justifyContent: 'flex-end'
+  }),
+  start: css({
+    justifyContent: 'start'
+  }),
+  end: css({
+    justifyContent: 'end'
+  }),
+  spaceBetween: css({
+    justifyContent: 'space-between'
+  })
+};
+var flexWrapMap = {
+  wrap: css({
+    flexWrap: 'wrap'
+  })
+};
+var baseStyles = css({
+  display: 'flex',
+  boxSizing: 'border-box',
+  flexDirection: 'row'
+});
+var dividerStyles = 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 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__*/memo( /*#__PURE__*/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' ? jsx(Divider, null, divider) : divider;
+  var children = divider ? Children.toArray(rawChildren).filter(Boolean).map(function (child, index) {
+    return jsx(Fragment, {
+      key: index
+    }, divider && index > 0 ? dividerComponent : null, child);
+  }) : rawChildren;
+  return 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';
+export 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': css({
+    columnGap: "var(--ds-space-0, 0px)"
+  }),
+  'space.025': css({
+    columnGap: "var(--ds-space-025, 2px)"
+  }),
+  'space.050': css({
+    columnGap: "var(--ds-space-050, 4px)"
+  }),
+  'space.075': css({
+    columnGap: "var(--ds-space-075, 6px)"
+  }),
+  'space.100': css({
+    columnGap: "var(--ds-space-100, 8px)"
+  }),
+  'space.1000': css({
+    columnGap: "var(--ds-space-1000, 80px)"
+  }),
+  'space.150': css({
+    columnGap: "var(--ds-space-150, 12px)"
+  }),
+  'space.200': css({
+    columnGap: "var(--ds-space-200, 16px)"
+  }),
+  'space.250': css({
+    columnGap: "var(--ds-space-250, 20px)"
+  }),
+  'space.300': css({
+    columnGap: "var(--ds-space-300, 24px)"
+  }),
+  'space.400': css({
+    columnGap: "var(--ds-space-400, 32px)"
+  }),
+  'space.500': css({
+    columnGap: "var(--ds-space-500, 40px)"
+  }),
+  'space.600': css({
+    columnGap: "var(--ds-space-600, 48px)"
+  }),
+  'space.800': css({
+    columnGap: "var(--ds-space-800, 64px)"
+  })
+};
+
+/**
+ * @codegenEnd
+ */

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

@@ -0,0 +1,143 @@
+/** @jsx jsx */
+import { forwardRef, memo } from 'react';
+import { css, jsx } from '@emotion/react';
+
+/**
+ * @private
+ * @deprecated DSP-8009: This type is scheduled for deletion.
+ * Please use `Stack` from `@atlaskit/primitives` instead.
+ */
+
+var flexAlignItemsMap = {
+  center: css({
+    alignItems: 'center'
+  }),
+  baseline: css({
+    alignItems: 'baseline'
+  }),
+  flexStart: css({
+    alignItems: 'flex-start'
+  }),
+  flexEnd: css({
+    alignItems: 'flex-end'
+  }),
+  start: css({
+    alignItems: 'start'
+  }),
+  end: css({
+    alignItems: 'end'
+  })
+};
+var flexJustifyContentMap = {
+  center: css({
+    justifyContent: 'center'
+  }),
+  flexStart: css({
+    justifyContent: 'flex-start'
+  }),
+  flexEnd: css({
+    justifyContent: 'flex-end'
+  }),
+  start: css({
+    justifyContent: 'start'
+  }),
+  end: css({
+    justifyContent: 'end'
+  })
+};
+var flexWrapMap = {
+  wrap: css({
+    flexWrap: 'wrap'
+  })
+};
+var baseStyles = 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__*/memo( /*#__PURE__*/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 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';
+export 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': css({
+    rowGap: "var(--ds-space-0, 0px)"
+  }),
+  'space.025': css({
+    rowGap: "var(--ds-space-025, 2px)"
+  }),
+  'space.050': css({
+    rowGap: "var(--ds-space-050, 4px)"
+  }),
+  'space.075': css({
+    rowGap: "var(--ds-space-075, 6px)"
+  }),
+  'space.100': css({
+    rowGap: "var(--ds-space-100, 8px)"
+  }),
+  'space.1000': css({
+    rowGap: "var(--ds-space-1000, 80px)"
+  }),
+  'space.150': css({
+    rowGap: "var(--ds-space-150, 12px)"
+  }),
+  'space.200': css({
+    rowGap: "var(--ds-space-200, 16px)"
+  }),
+  'space.250': css({
+    rowGap: "var(--ds-space-250, 20px)"
+  }),
+  'space.300': css({
+    rowGap: "var(--ds-space-300, 24px)"
+  }),
+  'space.400': css({
+    rowGap: "var(--ds-space-400, 32px)"
+  }),
+  'space.500': css({
+    rowGap: "var(--ds-space-500, 40px)"
+  }),
+  'space.600': css({
+    rowGap: "var(--ds-space-600, 48px)"
+  }),
+  'space.800': css({
+    rowGap: "var(--ds-space-800, 64px)"
+  })
+};
+
+/**
+ * @codegenEnd
+ */

package/dist/esm/components/text.partial.js

@@ -129,11 +129,11 @@ export default Text;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::de3943f17f27e9d5895c249c30c12802>>
+ * @codegen <<SignedSource::14dcf59f69533f453ffa8a5c5d165d19>>
  * @codegenId typography
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-typography.tsx <<SignedSource::85d34d11efbf90832fccaf960c2ea033>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-typography.tsx <<SignedSource::b01e60e475c0cb12960865631f2b4e2c>>
  */
 var fontSizeMap = {
   'size.050': css({
@@ -177,7 +177,7 @@ var fontWeightMap = {
 };
 var fontFamilyMap = {
   body: css({
-    fontFamily: "var(--ds-font-family-body, ui-sans-serif, \"Segoe UI\", system-ui, Ubuntu, \"Helvetica Neue\", sans-serif)"
+    fontFamily: "var(--ds-font-family-body, ui-sans-serif, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
   }),
   brand: css({
     fontFamily: "var(--ds-font-family-brand, Charlie Sans)"
@@ -186,7 +186,7 @@ var fontFamilyMap = {
     fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)"
   }),
   heading: css({
-    fontFamily: "var(--ds-font-family-heading, ui-sans-serif, \"Segoe UI\", system-ui, Ubuntu, \"Helvetica Neue\", sans-serif)"
+    fontFamily: "var(--ds-font-family-heading, ui-sans-serif, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
   }),
   monospace: css({
     fontFamily: "var(--ds-font-family-monospace, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)"

package/dist/esm/index.js

@@ -1,2 +1,5 @@
+export { default as UNSAFE_Box } from './components/box.partial';
 export { default as UNSAFE_Text } from './components/text.partial';
+export { default as UNSAFE_Inline } from './components/inline.partial';
+export { default as UNSAFE_Stack } from './components/stack.partial';
 export { default as UNSAFE_InteractionSurface } from './components/interaction-surface.partial';