@atlaskit/ds-explorations 2.3.2 → 2.4.0

package/dist/es2019/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.
+ */
+
+const 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'
+  })
+};
+const 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'
+  })
+};
+const flexWrapMap = {
+  wrap: css({
+    flexWrap: 'wrap'
+  })
+};
+const baseStyles = css({
+  display: 'flex',
+  boxSizing: 'border-box',
+  flexDirection: 'row'
+});
+const dividerStyles = css({
+  margin: `0 ${"var(--ds-space-negative-025, -2px)"}`,
+  color: "var(--ds-text-subtle, #42526E)",
+  pointerEvents: 'none',
+  userSelect: 'none'
+});
+const Divider = ({
+  children
+}) => 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>
+ * )
+ * ```
+ */
+const Inline = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  gap,
+  alignItems,
+  justifyContent,
+  flexWrap,
+  divider,
+  UNSAFE_style,
+  children: rawChildren,
+  testId
+}, ref) => {
+  const dividerComponent = typeof divider === 'string' ? jsx(Divider, null, divider) : divider;
+  const children = divider ? Children.toArray(rawChildren).filter(Boolean).map((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>>
+ */
+const 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/es2019/components/stack.partial.js

@@ -0,0 +1,144 @@
+/** @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.
+ */
+
+const 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'
+  })
+};
+const flexJustifyContentMap = {
+  center: css({
+    justifyContent: 'center'
+  }),
+  flexStart: css({
+    justifyContent: 'flex-start'
+  }),
+  flexEnd: css({
+    justifyContent: 'flex-end'
+  }),
+  start: css({
+    justifyContent: 'start'
+  }),
+  end: css({
+    justifyContent: 'end'
+  })
+};
+const flexWrapMap = {
+  wrap: css({
+    flexWrap: 'wrap'
+  })
+};
+const 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.
+ *
+ */
+const Stack = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  gap,
+  alignItems,
+  justifyContent,
+  flexWrap,
+  children,
+  UNSAFE_style,
+  testId
+}, ref) => {
+  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>>
+ */
+const 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/es2019/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';