@atlaskit/ds-explorations 2.2.15 → 2.3.0

package/dist/types-ts4.5/components/stack.partial.d.ts

@@ -1,92 +0,0 @@
-/** @jsx jsx */
-import { ReactNode } from 'react';
-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;
-declare const flexAlignItemsMap: {
-    center: import("@emotion/react").SerializedStyles;
-    baseline: import("@emotion/react").SerializedStyles;
-    flexStart: import("@emotion/react").SerializedStyles;
-    flexEnd: import("@emotion/react").SerializedStyles;
-    start: import("@emotion/react").SerializedStyles;
-    end: import("@emotion/react").SerializedStyles;
-};
-type FlexJustifyContent = keyof typeof flexJustifyContentMap;
-declare const flexJustifyContentMap: {
-    center: import("@emotion/react").SerializedStyles;
-    flexStart: import("@emotion/react").SerializedStyles;
-    flexEnd: import("@emotion/react").SerializedStyles;
-    start: import("@emotion/react").SerializedStyles;
-    end: import("@emotion/react").SerializedStyles;
-};
-type FlexWrap = keyof typeof flexWrapMap;
-declare const flexWrapMap: {
-    wrap: import("@emotion/react").SerializedStyles;
-};
-/**
- * __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.
- *
- */
-declare const Stack: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<StackProps & import("react").RefAttributes<HTMLDivElement>>>;
-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>>
- */
-declare const rowGapMap: {
-    'space.0': import("@emotion/react").SerializedStyles;
-    'space.025': import("@emotion/react").SerializedStyles;
-    'space.050': import("@emotion/react").SerializedStyles;
-    'space.075': import("@emotion/react").SerializedStyles;
-    'space.100': import("@emotion/react").SerializedStyles;
-    'space.1000': import("@emotion/react").SerializedStyles;
-    'space.150': import("@emotion/react").SerializedStyles;
-    'space.200': import("@emotion/react").SerializedStyles;
-    'space.250': import("@emotion/react").SerializedStyles;
-    'space.300': import("@emotion/react").SerializedStyles;
-    'space.400': import("@emotion/react").SerializedStyles;
-    'space.500': import("@emotion/react").SerializedStyles;
-    'space.600': import("@emotion/react").SerializedStyles;
-    'space.800': import("@emotion/react").SerializedStyles;
-};
-export type RowGap = keyof typeof rowGapMap;
-/**
- * @codegenEnd
- */

package/examples/00-basic.tsx

@@ -1,22 +0,0 @@
-import React from 'react';
-
-import Box from '../src/components/box.partial';
-import Text from '../src/components/text.partial';
-
-export default () => {
-  return (
-    <Box>
-      <Box
-        paddingBlock="space.400"
-        paddingInline="space.400"
-        alignItems="center"
-        backgroundColor="brand.bold"
-        UNSAFE_style={{ aspectRatio: '1/1' }}
-      >
-        <Text fontWeight="medium" color="inverse">
-          A basic box
-        </Text>
-      </Box>
-    </Box>
-  );
-};

package/examples/01-box.tsx

@@ -1,171 +0,0 @@
-import React from 'react';
-
-import Heading from '@atlaskit/heading';
-import Inline from '@atlaskit/primitives/inline';
-import Stack from '@atlaskit/primitives/stack';
-
-import { UNSAFE_Box as Box, UNSAFE_Text as Text } from '../src';
-import { spacingScale } from '../src/internal/spacing-scale';
-
-/**
- * Box permutations
- */
-export default () => {
-  return (
-    <Stack space="space.400" alignInline="start">
-      <Stack space="space.200" testId="box-with-background-and-paddingBlock">
-        <Heading level="h600">paddingBlock</Heading>
-        <Inline space="space.200" alignBlock="center">
-          {spacingScale.map((space) => (
-            <Box
-              key={space}
-              backgroundColor="discovery.bold"
-              paddingBlock={space}
-            >
-              <Box backgroundColor="elevation.surface" justifyContent="center">
-                <Text>{space}</Text>
-              </Box>
-            </Box>
-          ))}
-        </Inline>
-      </Stack>
-
-      <Stack space="space.200" testId="box-with-background-and-paddingInline">
-        <Heading level="h600">paddingInline</Heading>
-        <Stack space="space.200" alignInline="center">
-          {spacingScale.map((space) => (
-            <Box
-              key={space}
-              backgroundColor="discovery.bold"
-              paddingInline={space}
-            >
-              <Box backgroundColor="elevation.surface" justifyContent="center">
-                <Text>{space}</Text>
-              </Box>
-            </Box>
-          ))}
-        </Stack>
-      </Stack>
-
-      <Stack space="space.200" testId="box-with-background-and-padding">
-        <Heading level="h600">padding</Heading>
-        <Inline space="space.200" alignBlock="center">
-          {spacingScale.map((space) => (
-            <Box key={space} backgroundColor="discovery.bold" padding={space}>
-              <Box backgroundColor="elevation.surface" justifyContent="center">
-                <Text>{space}</Text>
-              </Box>
-            </Box>
-          ))}
-        </Inline>
-      </Stack>
-
-      <Stack space="space.200" testId="box-with-backgroundColor">
-        <Heading level="h600">backgroundColor</Heading>
-        <Inline space="space.200" alignBlock="center">
-          {(
-            [
-              'discovery.bold',
-              'success.bold',
-              'warning.bold',
-              'danger.bold',
-              'information.bold',
-              'brand.bold',
-            ] as const
-          ).map((bgColor) => (
-            <Box key={bgColor} backgroundColor={bgColor} padding="space.400">
-              <Box justifyContent="center">
-                <Text>{bgColor}</Text>
-              </Box>
-            </Box>
-          ))}
-        </Inline>
-      </Stack>
-
-      <Stack space="space.200" testId="box-with-borderColor">
-        <Heading level="h600">borderColor</Heading>
-        <Inline space="space.200" alignBlock="center">
-          {(
-            [
-              'discovery',
-              'success',
-              'warning',
-              'danger',
-              'information',
-              'brand',
-            ] as const
-          ).map((borderColor) => (
-            <Box
-              key={borderColor}
-              backgroundColor="neutral"
-              borderColor={borderColor}
-              borderStyle="solid"
-              borderWidth="2px"
-              padding="space.400"
-            >
-              <Box justifyContent="center">
-                <Text color="color.text">{borderColor}</Text>
-              </Box>
-            </Box>
-          ))}
-        </Inline>
-      </Stack>
-
-      <Stack space="space.200" testId="box-with-shadow">
-        <Heading level="h600">shadow</Heading>
-        <Inline space="space.200" alignBlock="center">
-          {(['raised', 'overflow', 'overlay'] as const).map((shadow) => (
-            <Box
-              key={shadow}
-              backgroundColor="elevation.surface"
-              shadow={shadow}
-              padding="space.400"
-            >
-              <Box justifyContent="center">
-                <Text color="color.text">{shadow}</Text>
-              </Box>
-            </Box>
-          ))}
-        </Inline>
-      </Stack>
-
-      <Stack space="space.200" testId="box-with-layer">
-        <Heading level="h600">layer</Heading>
-        <Box alignItems="center" UNSAFE_style={{ width: 800, height: 650 }}>
-          {(
-            [
-              'card',
-              'navigation',
-              'dialog',
-              'layer',
-              'blanket',
-              'modal',
-              'flag',
-              'spotlight',
-              'tooltip',
-            ] as const
-          ).map((layer, index) => (
-            <Box
-              key={layer}
-              backgroundColor="elevation.surface"
-              layer={layer}
-              shadow="overlay"
-              padding="space.400"
-              position="absolute"
-              UNSAFE_style={{
-                // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-                top: index * 64,
-                // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-                left: index * 64,
-              }}
-            >
-              <Box justifyContent="center">
-                <Text color="color.text">{layer}</Text>
-              </Box>
-            </Box>
-          ))}
-        </Box>
-      </Stack>
-    </Stack>
-  );
-};

package/examples/03-stack.tsx

@@ -1,99 +0,0 @@
-import React from 'react';
-
-import Heading from '@atlaskit/heading';
-
-import {
-  UNSAFE_Box as Box,
-  UNSAFE_Inline as Inline,
-  UNSAFE_Stack as Stack,
-} from '../src';
-import { spacingScale } from '../src/internal/spacing-scale';
-
-const flexAlignItems = ['center', 'baseline', 'flexStart', 'flexEnd'];
-const flexJustifyContent = ['center', 'flexStart', 'flexEnd'];
-const flexWrap = ['wrap'];
-
-/**
- * Stack permutations
- */
-export default () => {
-  return (
-    <Stack gap="space.300">
-      <Stack gap="space.300" testId="stack-spacing">
-        <Heading level="h700">Spacing</Heading>
-        <Inline gap="space.400">
-          {spacingScale.map((space) => (
-            <Stack key={space} gap="space.300">
-              <Heading level="h500">{space}</Heading>
-
-              <Box backgroundColor="neutral">
-                <Stack gap={space} alignItems="center">
-                  <Box padding="space.100" backgroundColor="success.bold" />
-                  <Box padding="space.100" backgroundColor="success.bold" />
-                  <Box padding="space.100" backgroundColor="success.bold" />
-                </Stack>
-              </Box>
-            </Stack>
-          ))}
-        </Inline>
-      </Stack>
-      <Stack gap="space.300" testId="stack-alignment">
-        <Heading level="h700">Alignment</Heading>
-        <Heading level="h600">alignItems</Heading>
-        <Inline gap="space.400">
-          {flexAlignItems.map((alignItemsValue) => (
-            <Stack key={alignItemsValue} gap="space.300">
-              <Heading level="h500">{alignItemsValue}</Heading>
-
-              <Box backgroundColor="neutral" display="block">
-                <Stack gap="space.200" alignItems={alignItemsValue as any}>
-                  <Box padding="space.100" backgroundColor="success.bold" />
-                  <Box padding="space.100" backgroundColor="success.bold" />
-                  <Box padding="space.100" backgroundColor="success.bold" />
-                </Stack>
-              </Box>
-            </Stack>
-          ))}
-        </Inline>
-
-        <Heading level="h600">justifyContent</Heading>
-        <Inline gap="space.400">
-          {flexJustifyContent.map((justifyContentValue) => (
-            <Stack key={justifyContentValue} gap="space.300">
-              <Heading level="h500">{justifyContentValue}</Heading>
-
-              <Box backgroundColor="neutral" UNSAFE_style={{ height: '200px' }}>
-                <Stack
-                  gap="space.200"
-                  justifyContent={justifyContentValue as any}
-                >
-                  <Box padding="space.100" backgroundColor="success.bold" />
-                  <Box padding="space.100" backgroundColor="success.bold" />
-                  <Box padding="space.100" backgroundColor="success.bold" />
-                </Stack>
-              </Box>
-            </Stack>
-          ))}
-        </Inline>
-
-        <Heading level="h700">Overflow</Heading>
-        <Heading level="h600">flexWrap</Heading>
-        <Inline gap="space.400">
-          {flexWrap.map((flexWrapValue) => (
-            <Stack key={flexWrapValue} gap="space.300">
-              <Heading level="h500">{flexWrapValue}</Heading>
-
-              <Box backgroundColor="neutral" UNSAFE_style={{ height: '50px' }}>
-                <Stack gap="space.200" flexWrap={flexWrapValue as any}>
-                  <Box padding="space.100" backgroundColor="success.bold" />
-                  <Box padding="space.100" backgroundColor="success.bold" />
-                  <Box padding="space.100" backgroundColor="success.bold" />
-                </Stack>
-              </Box>
-            </Stack>
-          ))}
-        </Inline>
-      </Stack>
-    </Stack>
-  );
-};

package/examples/04-inline.tsx

@@ -1,99 +0,0 @@
-import React from 'react';
-
-import Heading from '@atlaskit/heading';
-
-import {
-  UNSAFE_Box as Box,
-  UNSAFE_Inline as Inline,
-  UNSAFE_Stack as Stack,
-} from '../src';
-import { spacingScale } from '../src/internal/spacing-scale';
-
-const flexAlignItems = ['center', 'baseline', 'flexStart', 'flexEnd'] as const;
-const flexJustifyContent = ['center', 'flexStart', 'flexEnd'] as const;
-const flexWrap = ['wrap'] as const;
-
-/**
- * Inline permutations
- */
-export default () => {
-  return (
-    <Stack gap="space.300">
-      <Stack gap="space.300" testId="inline-spacing">
-        <Heading level="h700">Spacing</Heading>
-        <Stack gap="space.400">
-          {spacingScale.map((space) => (
-            <Inline key={space} gap="space.300">
-              <Box UNSAFE_style={{ width: 140 }}>
-                <Heading level="h500">{space}</Heading>
-              </Box>
-
-              <Box backgroundColor="neutral">
-                <Inline gap={space} alignItems="center">
-                  <Box padding="space.100" backgroundColor="success.bold" />
-                  <Box padding="space.100" backgroundColor="success.bold" />
-                  <Box padding="space.100" backgroundColor="success.bold" />
-                </Inline>
-              </Box>
-            </Inline>
-          ))}
-        </Stack>
-      </Stack>
-      <Stack gap="space.300" testId="inline-alignment">
-        <Heading level="h700">Alignment</Heading>
-        <Heading level="h600">alignItems</Heading>
-        <Inline gap="space.400">
-          {flexAlignItems.map((alignItemsValue) => (
-            <Stack key={alignItemsValue} gap="space.300">
-              <Heading level="h500">{alignItemsValue}</Heading>
-              <Box backgroundColor="neutral" UNSAFE_style={{ height: '100px' }}>
-                <Inline gap="space.200" alignItems={alignItemsValue}>
-                  <Box padding="space.100" backgroundColor="success.bold" />
-                  <Box padding="space.100" backgroundColor="success.bold" />
-                  <Box padding="space.100" backgroundColor="success.bold" />
-                </Inline>
-              </Box>
-            </Stack>
-          ))}
-        </Inline>
-        <Heading level="h600">justifyContent</Heading>
-        <Inline gap="space.400">
-          {flexJustifyContent.map((justifyContentValue) => (
-            <Stack key={justifyContentValue} gap="space.300">
-              <Heading level="h500">{justifyContentValue}</Heading>
-
-              <Box
-                display="block"
-                backgroundColor="neutral"
-                UNSAFE_style={{ width: '140px' }}
-              >
-                <Inline gap="space.200" justifyContent={justifyContentValue}>
-                  <Box padding="space.100" backgroundColor="success.bold" />
-                  <Box padding="space.100" backgroundColor="success.bold" />
-                  <Box padding="space.100" backgroundColor="success.bold" />
-                </Inline>
-              </Box>
-            </Stack>
-          ))}
-        </Inline>
-
-        <Heading level="h700">Overflow</Heading>
-        <Heading level="h600">flexWrap</Heading>
-        <Inline gap="space.400">
-          {flexWrap.map((flexWrapValue) => (
-            <Stack key={flexWrapValue} gap="space.300">
-              <Heading level="h500">{flexWrapValue}</Heading>
-              <Box backgroundColor="neutral" UNSAFE_style={{ width: '50px' }}>
-                <Inline gap="space.200" flexWrap={flexWrapValue as any}>
-                  <Box padding="space.100" backgroundColor="success.bold" />
-                  <Box padding="space.100" backgroundColor="success.bold" />
-                  <Box padding="space.100" backgroundColor="success.bold" />
-                </Inline>
-              </Box>
-            </Stack>
-          ))}
-        </Inline>
-      </Stack>
-    </Stack>
-  );
-};

package/inline/package.json

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

package/src/components/__tests__/unit/box.test.tsx

@@ -1,55 +0,0 @@
-import React from 'react';
-
-import { render } from '@testing-library/react';
-
-import { token } from '@atlaskit/tokens';
-
-import { UNSAFE_Box as Box, UNSAFE_Text as Text } from '../../../index';
-
-describe('Box component', () => {
-  const testId = 'test';
-
-  it('should render box', () => {
-    const { getByText } = render(
-      <Box>
-        <Text>Box</Text>
-      </Box>,
-    );
-    expect(getByText('Box')).toBeInTheDocument();
-  });
-
-  describe('with SurfaceContext', () => {
-    it('should respect text color when text sets its own color and bg is non-bold', () => {
-      const { getByText } = render(
-        <Box backgroundColor="information">
-          <Text color="color.text">Text</Text>
-        </Box>,
-      );
-      const element = getByText('Text');
-      expect(element).toHaveStyleDeclaration('color', token('color.text'));
-    });
-
-    it("should override text color when background won't meet contrast", () => {
-      const { getByText } = render(
-        <Box backgroundColor="brand.bold">
-          <Text color="disabled">Text</Text>
-        </Box>,
-      );
-      const element = getByText('Text');
-      expect(element).toHaveStyleDeclaration(
-        'color',
-        token('color.text.inverse', '#FFFFFF'),
-      );
-    });
-  });
-
-  it('should render with a given test id', () => {
-    const { getByTestId } = render(
-      <Box testId={testId}>
-        <Text>Box with testid</Text>
-      </Box>,
-    );
-    const element = getByTestId(testId);
-    expect(element).toBeInTheDocument();
-  });
-});

package/src/components/__tests__/unit/inline.test.tsx

@@ -1,43 +0,0 @@
-import React from 'react';
-
-import { render } from '@testing-library/react';
-
-import { UNSAFE_Inline as Inline, UNSAFE_Text as Text } from '../../../index';
-
-describe('Inline component', () => {
-  const testId = 'test';
-
-  it('should render inline', () => {
-    const { getByText } = render(
-      <Inline gap="space.050">
-        <Text>1</Text>
-        <Text>2</Text>
-      </Inline>,
-    );
-    expect(getByText('1')).toBeInTheDocument();
-    expect(getByText('2')).toBeInTheDocument();
-  });
-
-  it('should render inline with dividers', () => {
-    const { getByText } = render(
-      <Inline gap="space.050" divider="/">
-        <Text>1</Text>
-        <Text>2</Text>
-      </Inline>,
-    );
-    expect(getByText('1')).toBeInTheDocument();
-    expect(getByText('2')).toBeInTheDocument();
-    expect(getByText('/')).toBeInTheDocument();
-  });
-
-  it('should render with a given test id', () => {
-    const { getByTestId } = render(
-      <Inline gap="space.050" testId={testId}>
-        <Text>1</Text>
-        <Text>2</Text>
-      </Inline>,
-    );
-    const element = getByTestId(testId);
-    expect(element).toBeInTheDocument();
-  });
-});

package/src/components/__tests__/unit/stack.test.tsx

@@ -1,31 +0,0 @@
-import React from 'react';
-
-import { render } from '@testing-library/react';
-
-import { UNSAFE_Stack as Stack, UNSAFE_Text as Text } from '../../../index';
-
-describe('Stack component', () => {
-  const testId = 'test';
-
-  it('should render stack', () => {
-    const { getByText } = render(
-      <Stack gap="space.050">
-        <Text>1</Text>
-        <Text>2</Text>
-      </Stack>,
-    );
-    expect(getByText('1')).toBeInTheDocument();
-    expect(getByText('2')).toBeInTheDocument();
-  });
-
-  it('should render with a given test id', () => {
-    const { getByTestId } = render(
-      <Stack gap="space.050" testId={testId}>
-        <Text>1</Text>
-        <Text>2</Text>
-      </Stack>,
-    );
-    const element = getByTestId(testId);
-    expect(element).toBeInTheDocument();
-  });
-});

package/src/components/__tests__/visual-regression/__image_snapshots__/inline-snapshot-test-tsx-inline-alignment-example-should-match-snapshot-1-snap.png

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:98a9a1b3f8173c6ed0520cc3da4493d6963527bb8699be3b26729392e25e0539
-size 24062

package/src/components/__tests__/visual-regression/__image_snapshots__/inline-snapshot-test-tsx-inline-spacing-example-should-match-snapshot-1-snap.png

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:3ec919ee45580a3e93dca991e3c80a0523a142c3096ad364e622ad4b1fdfad76
-size 37966

package/src/components/__tests__/visual-regression/__image_snapshots__/stack-snapshot-test-tsx-stack-alignment-example-should-match-snapshot-1-snap.png

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:3d5a9d4369d39aea2c98b9b329881f1769e29e2931321b85a000d81c88c1f0ab
-size 26736

package/src/components/__tests__/visual-regression/__image_snapshots__/stack-snapshot-test-tsx-stack-spacing-example-should-match-snapshot-1-snap.png

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:7fc46772ba9b71f230f1bfe126adb00e478061bcc01315aeecb1d0634f0c7d85
-size 13156