@atlaskit/ds-explorations 2.3.2 → 2.4.0

package/src/components/inline.partial.tsx

@@ -0,0 +1,218 @@
+/** @jsx jsx */
+import { Children, FC, forwardRef, Fragment, memo, ReactNode } from 'react';
+
+import { css, jsx } from '@emotion/react';
+
+import { token } from '@atlaskit/tokens';
+
+import type { BasePrimitiveProps } from './types';
+
+/**
+ * @private
+ * @deprecated DSP-8009: This type is scheduled for deletion.
+ * Please use `Inline` from `@atlaskit/primitives` instead.
+ */
+export interface InlineProps extends BasePrimitiveProps {
+  /**
+   * Used to align children along the cross axis.
+   */
+  alignItems?: FlexAlignItems;
+  /**
+   * Used to align children along the main axis.
+   */
+  justifyContent?: FlexJustifyContent;
+  /**
+   * Sets whether children are forced onto one line or can wrap onto multiple lines
+   */
+  flexWrap?: FlexWrap;
+  /**
+   * Token representing gap between children.
+   */
+  gap: ColumnGap;
+  /**
+   * Renders a divider between children.
+   * If a string is provided it will automatically be wrapped in a `<Text>` component.
+   */
+  divider?: ReactNode;
+  /**
+   * Elements to be rendered inside the Inline.
+   */
+  children: ReactNode;
+}
+
+type FlexAlignItems = keyof typeof flexAlignItemsMap;
+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' }),
+};
+
+type FlexJustifyContent = keyof typeof flexJustifyContentMap;
+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' }),
+};
+
+type FlexWrap = keyof typeof flexWrapMap;
+const flexWrapMap = {
+  wrap: css({ flexWrap: 'wrap' }),
+};
+
+const baseStyles = css({
+  display: 'flex',
+  boxSizing: 'border-box',
+  flexDirection: 'row',
+});
+
+const dividerStyles = css({
+  margin: `0 ${token('space.negative.025', '-2px')}`,
+  color: token('color.text.subtle', '#42526E'),
+  pointerEvents: 'none',
+  userSelect: 'none',
+});
+
+const Divider: FC<{ children: string }> = ({ children }) => (
+  <span css={dividerStyles}>{children}</span>
+);
+
+/**
+ * __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 = memo(
+  forwardRef<HTMLDivElement, InlineProps>(
+    (
+      {
+        gap,
+        alignItems,
+        justifyContent,
+        flexWrap,
+        divider,
+        UNSAFE_style,
+        children: rawChildren,
+        testId,
+      },
+      ref,
+    ) => {
+      const dividerComponent =
+        typeof divider === 'string' ? <Divider>{divider}</Divider> : divider;
+
+      const children = divider
+        ? Children.toArray(rawChildren)
+            .filter(Boolean)
+            .map((child, index) => {
+              return (
+                <Fragment key={index}>
+                  {divider && index > 0 ? dividerComponent : null}
+                  {child}
+                </Fragment>
+              );
+            })
+        : rawChildren;
+
+      return (
+        <div
+          style={UNSAFE_style}
+          css={[
+            baseStyles,
+            gap && columnGapMap[gap],
+            alignItems && flexAlignItemsMap[alignItems],
+            justifyContent && flexJustifyContentMap[justifyContent],
+            flexWrap && flexWrapMap[flexWrap],
+          ]}
+          data-testid={testId}
+          ref={ref}
+        >
+          {children}
+        </div>
+      );
+    },
+  ),
+);
+
+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: token('space.0', '0px'),
+  }),
+  'space.025': css({
+    columnGap: token('space.025', '2px'),
+  }),
+  'space.050': css({
+    columnGap: token('space.050', '4px'),
+  }),
+  'space.075': css({
+    columnGap: token('space.075', '6px'),
+  }),
+  'space.100': css({
+    columnGap: token('space.100', '8px'),
+  }),
+  'space.1000': css({
+    columnGap: token('space.1000', '80px'),
+  }),
+  'space.150': css({
+    columnGap: token('space.150', '12px'),
+  }),
+  'space.200': css({
+    columnGap: token('space.200', '16px'),
+  }),
+  'space.250': css({
+    columnGap: token('space.250', '20px'),
+  }),
+  'space.300': css({
+    columnGap: token('space.300', '24px'),
+  }),
+  'space.400': css({
+    columnGap: token('space.400', '32px'),
+  }),
+  'space.500': css({
+    columnGap: token('space.500', '40px'),
+  }),
+  'space.600': css({
+    columnGap: token('space.600', '48px'),
+  }),
+  'space.800': css({
+    columnGap: token('space.800', '64px'),
+  }),
+};
+
+export type ColumnGap = keyof typeof columnGapMap;
+
+/**
+ * @codegenEnd
+ */

package/src/components/stack.partial.tsx

@@ -0,0 +1,174 @@
+/** @jsx jsx */
+import { forwardRef, memo, ReactNode } from 'react';
+
+import { css, jsx } from '@emotion/react';
+
+import { token } from '@atlaskit/tokens';
+
+import { BasePrimitiveProps } from './types';
+
+/**
+ * @private
+ * @deprecated DSP-8009: This type is scheduled for deletion.
+ * Please use `Stack` from `@atlaskit/primitives` instead.
+ */
+export interface StackProps extends BasePrimitiveProps {
+  /**
+   * Used to align children along the cross axis.
+   */
+  alignItems?: FlexAlignItems;
+  /**
+   * Used to align children along the main axis.
+   */
+  justifyContent?: FlexJustifyContent;
+  /**
+   * Sets whether children are forced onto one line or can wrap onto multiple lines
+   */
+  flexWrap?: FlexWrap;
+  /**
+   * Token representing gap between children.
+   */
+  gap: RowGap;
+  /**
+   * Elements to be rendered inside the Stack.
+   */
+  children: ReactNode;
+}
+
+type FlexAlignItems = keyof typeof flexAlignItemsMap;
+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' }),
+};
+
+type FlexJustifyContent = keyof typeof flexJustifyContentMap;
+const flexJustifyContentMap = {
+  center: css({ justifyContent: 'center' }),
+  flexStart: css({ justifyContent: 'flex-start' }),
+  flexEnd: css({ justifyContent: 'flex-end' }),
+  start: css({ justifyContent: 'start' }),
+  end: css({ justifyContent: 'end' }),
+};
+
+type FlexWrap = keyof typeof flexWrapMap;
+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 = memo(
+  forwardRef<HTMLDivElement, StackProps>(
+    (
+      {
+        gap,
+        alignItems,
+        justifyContent,
+        flexWrap,
+        children,
+        UNSAFE_style,
+        testId,
+      },
+      ref,
+    ) => {
+      return (
+        <div
+          style={UNSAFE_style}
+          css={[
+            baseStyles,
+            gap && rowGapMap[gap],
+            alignItems && flexAlignItemsMap[alignItems],
+            justifyContent && flexJustifyContentMap[justifyContent],
+            flexWrap && flexWrapMap[flexWrap],
+          ]}
+          data-testid={testId}
+          ref={ref}
+        >
+          {children}
+        </div>
+      );
+    },
+  ),
+);
+
+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: token('space.0', '0px'),
+  }),
+  'space.025': css({
+    rowGap: token('space.025', '2px'),
+  }),
+  'space.050': css({
+    rowGap: token('space.050', '4px'),
+  }),
+  'space.075': css({
+    rowGap: token('space.075', '6px'),
+  }),
+  'space.100': css({
+    rowGap: token('space.100', '8px'),
+  }),
+  'space.1000': css({
+    rowGap: token('space.1000', '80px'),
+  }),
+  'space.150': css({
+    rowGap: token('space.150', '12px'),
+  }),
+  'space.200': css({
+    rowGap: token('space.200', '16px'),
+  }),
+  'space.250': css({
+    rowGap: token('space.250', '20px'),
+  }),
+  'space.300': css({
+    rowGap: token('space.300', '24px'),
+  }),
+  'space.400': css({
+    rowGap: token('space.400', '32px'),
+  }),
+  'space.500': css({
+    rowGap: token('space.500', '40px'),
+  }),
+  'space.600': css({
+    rowGap: token('space.600', '48px'),
+  }),
+  'space.800': css({
+    rowGap: token('space.800', '64px'),
+  }),
+};
+
+export type RowGap = keyof typeof rowGapMap;
+
+/**
+ * @codegenEnd
+ */

package/src/components/surface-provider.tsx

@@ -1,6 +1,6 @@
 import { createContext, useContext } from 'react';
 
-import type { BackgroundColor } from '@atlaskit/primitives';
+import type { BackgroundColor } from './box.partial';
 
 /**
  * __Surface context__

package/src/index.tsx

@@ -1,3 +1,9 @@
+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';
+export type { BoxProps as UNSAFE_BoxProps } from './components/box.partial';
 export type { TextProps as UNSAFE_TextProps } from './components/text.partial';
+export type { InlineProps as UNSAFE_InlineProps } from './components/inline.partial';
+export type { StackProps as UNSAFE_StackProps } from './components/stack.partial';

package/stack/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@atlaskit/ds-explorations/stack",
+  "main": "../dist/cjs/components/stack.partial.js",
+  "module": "../dist/esm/components/stack.partial.js",
+  "module:es2019": "../dist/es2019/components/stack.partial.js",
+  "sideEffects": false,
+  "types": "../dist/types/components/stack.partial.d.ts",
+  "typesVersions": {
+    ">=4.5 <4.9": {
+      "*": [
+        "../dist/types-ts4.5/components/stack.partial.d.ts"
+      ]
+    }
+  }
+}