@atlaskit/ds-explorations 2.4.0 → 3.0.0

package/src/components/inline.partial.tsx

@@ -1,218 +0,0 @@
-/** @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

@@ -1,174 +0,0 @@
-/** @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/stack/package.json

@@ -1,15 +0,0 @@
-{
-  "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"
-      ]
-    }
-  }
-}