@atlaskit/ds-explorations 4.0.0 → 4.1.0

package/dist/esm/internal/color-map.js

@@ -3,7 +3,7 @@
  *
  * The color map is used to map a background color token to a matching text color that will meet contrast.
  *
- * @codegen <<SignedSource::4069cec92f6504471d42a7c6cc0f7930>>
+ * @codegen <<SignedSource::7d0040ba6b7bc80f7ebca42192d566ab>>
  * @codegenCommand yarn codegen-styles
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::f27d1519d51cc4a85383a00907847774>>
  */

package/dist/types/components/interaction-surface.partial.d.ts

@@ -18,7 +18,7 @@ interface InteractionSurfaceProps extends BasePrimitiveProps {
  * </Box>
  * ```
  */
-declare const InteractionSurface: ({ appearance, children, testId, }: InteractionSurfaceProps) => jsx.JSX.Element;
+declare const InteractionSurface: ({ appearance, children, testId }: InteractionSurfaceProps) => jsx.JSX.Element;
 export default InteractionSurface;
 declare const backgroundHoverColorMap: {
     'accent.lime.subtlest': import("@emotion/react").SerializedStyles;

package/dist/types/internal/color-map.d.ts

@@ -3,7 +3,7 @@
  *
  * The color map is used to map a background color token to a matching text color that will meet contrast.
  *
- * @codegen <<SignedSource::4069cec92f6504471d42a7c6cc0f7930>>
+ * @codegen <<SignedSource::7d0040ba6b7bc80f7ebca42192d566ab>>
  * @codegenCommand yarn codegen-styles
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::f27d1519d51cc4a85383a00907847774>>
  */

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

@@ -18,7 +18,7 @@ interface InteractionSurfaceProps extends BasePrimitiveProps {
  * </Box>
  * ```
  */
-declare const InteractionSurface: ({ appearance, children, testId, }: InteractionSurfaceProps) => jsx.JSX.Element;
+declare const InteractionSurface: ({ appearance, children, testId }: InteractionSurfaceProps) => jsx.JSX.Element;
 export default InteractionSurface;
 declare const backgroundHoverColorMap: {
     'accent.lime.subtlest': import("@emotion/react").SerializedStyles;

package/dist/types-ts4.5/internal/color-map.d.ts

@@ -3,7 +3,7 @@
  *
  * The color map is used to map a background color token to a matching text color that will meet contrast.
  *
- * @codegen <<SignedSource::4069cec92f6504471d42a7c6cc0f7930>>
+ * @codegen <<SignedSource::7d0040ba6b7bc80f7ebca42192d566ab>>
  * @codegenCommand yarn codegen-styles
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::f27d1519d51cc4a85383a00907847774>>
  */

package/docs/01-basic.tsx

@@ -1,20 +1,18 @@
 import React from 'react';
 
-import {
-  AtlassianInternalWarning,
-  DevPreviewWarning,
-  md,
-} from '@atlaskit/docs';
+import { AtlassianInternalWarning, DevPreviewWarning, md } from '@atlaskit/docs';
 import { token } from '@atlaskit/tokens';
 
 export default md`
 ${(
-  <>
-    <div style={{ marginBottom: token('space.100', '8px') }}>
-      <AtlassianInternalWarning />
-    </div>
-    <div style={{ marginTop: token('space.100', '8px') }}>
-      <DevPreviewWarning />
-    </div>
-  </>
+	<>
+		{/* eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766 */}
+		<div style={{ marginBottom: token('space.100', '8px') }}>
+			<AtlassianInternalWarning />
+		</div>
+		{/* eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766 */}
+		<div style={{ marginTop: token('space.100', '8px') }}>
+			<DevPreviewWarning />
+		</div>
+	</>
 )}`;

package/examples/99-interactions.tsx

@@ -12,184 +12,185 @@ import { Box, Inline, Stack, Text, xcss } from '@atlaskit/primitives';
 import Textfield from '@atlaskit/textfield';
 import { token } from '@atlaskit/tokens';
 
-import {
-  UNSAFE_InteractionSurface as InteractionSurface,
-} from '../src';
+import { UNSAFE_InteractionSurface as InteractionSurface } from '../src';
 
 const fieldsetStyles = xcss({
-  flex: '1 1 100%',
-  borderStyle: 'solid',
-  borderWidth: 'border.width',
-  borderColor: 'color.border',
-  ':hover': {
-    backgroundColor: 'color.background.input.hovered',
-  },
-  ':invalid': {
-    borderColor: 'color.border.danger',
-  },
-  ':focus': {
-    backgroundColor: 'color.background.input',
-    borderColor: 'color.border.focused',
-  },
-  ':focus-within': {
-    backgroundColor: 'color.background.input',
-    borderColor: 'color.border.focused',
-  },
+	flex: '1 1 100%',
+	borderStyle: 'solid',
+	borderWidth: 'border.width',
+	borderColor: 'color.border',
+	':hover': {
+		backgroundColor: 'color.background.input.hovered',
+	},
+	':invalid': {
+		borderColor: 'color.border.danger',
+	},
+	':focus': {
+		backgroundColor: 'color.background.input',
+		borderColor: 'color.border.focused',
+	},
+	':focus-within': {
+		backgroundColor: 'color.background.input',
+		borderColor: 'color.border.focused',
+	},
 });
 
 const focusRingBoxStyles = xcss({
-  borderRadius: 'border.radius',
-  position: 'relative',
+	borderRadius: 'border.radius',
+	position: 'relative',
 });
 
 export default () => {
-  return (
-    <Box padding="space.100" testId="all">
-      <Stack space="space.200">
-        <Heading level="h400">Current ADS Buttons</Heading>
-        <Inline space="space.200">
-          <Button appearance="primary">brand.bold</Button>
-          <Button appearance="default">neutral</Button>
-          <Button appearance="warning">warning.bold</Button>
-        </Inline>
-        <Heading level="h400">
-          Buttons with <Code>InteractionSurface</Code>
-        </Heading>
-        <Inline space="space.200" testId="buttons">
-          {(
-            [
-              'color.background.brand.bold',
-              'color.background.neutral',
-              'color.background.warning.bold',
-            ] as const
-          ).map((app) => (
-            <FocusRing key={app}>
-              <Box
-                as="button"
-                onClick={() => console.log('hello')}
-                xcss={focusRingBoxStyles}
-                paddingInline="space.150"
-                backgroundColor={app}
-              >
-                <InteractionSurface>
-                  <Text
-                    align="center"
-                    weight="medium"
-                  >
-                    {app}
-                  </Text>
-                </InteractionSurface>
-              </Box>
-            </FocusRing>
-          ))}
-        </Inline>
-        <Heading level="h400">
-          Icon Buttons with <Code>InteractionSurface</Code>
-        </Heading>
-        <Inline space="space.200" testId="icon-buttons">
-          <FocusRing>
-            <Box
-              as="button"
-              backgroundColor="color.background.brand.bold"
-              onClick={() => console.log('hello')}
-              padding="space.050"
-              xcss={focusRingBoxStyles}
-            >
-              <InteractionSurface>
-                <WarningIcon
-                  label="icon button"
-                  primaryColor={token('color.icon.inverse')}
-                  secondaryColor={token('color.background.brand.bold')}
-                />
-              </InteractionSurface>
-            </Box>
-          </FocusRing>
-          <FocusRing>
-            <Box
-              as="button"
-              backgroundColor="color.background.neutral"
-              onClick={() => console.log('hello')}
-              xcss={focusRingBoxStyles}
-              padding="space.050"
-            >
-              <InteractionSurface>
-                <WarningIcon label="icon button" />
-              </InteractionSurface>
-            </Box>
-          </FocusRing>
-          <FocusRing>
-            <Box
-              as="button"
-              backgroundColor="color.background.warning.bold"
-              onClick={() => console.log('hello')}
-              xcss={focusRingBoxStyles}
-              padding="space.050"
-            >
-              <InteractionSurface>
-                <WarningIcon
-                  label="icon button"
-                  primaryColor={token('color.icon.warning.inverse')}
-                  secondaryColor={token('color.background.warning.bold')}
-                />
-              </InteractionSurface>
-            </Box>
-          </FocusRing>
-        </Inline>
-        <Heading level="h400">
-          Progress Indicator with <Code>InteractionSurface</Code>
-        </Heading>
-        <Inline space="space.200" testId="progress-indicators">
-          {(
-            [
-              'color.background.brand.bold',
-              'color.background.neutral',
-              'color.background.warning.bold',
-            ] as const
-          ).map((app) => (
-            <FocusRing>
-              <Box
-                key={app}
-                as="button"
-                backgroundColor={app}
-                onClick={() => console.log('hello')}
-                xcss={focusRingBoxStyles}
-                padding="space.050"
-                aria-label="progress indicator"
-              >
-                <InteractionSurface>
-                  <Fragment />
-                </InteractionSurface>
-              </Box>
-            </FocusRing>
-          ))}
-        </Inline>
-        <Heading level="h400">Textfield / input spikes</Heading>
-        <Stack space="space.200">
-          <label htmlFor="textfield">Textfield</label>
-          <Textfield id="textfield" />
-          <label htmlFor="input">Input</label>
-          <Box
-            as="fieldset"
-            padding="space.100"
-            tabIndex={-1}
-            backgroundColor="color.background.input"
-            xcss={fieldsetStyles}
-          >
-            <input
-              id="input"
-              pattern="\d+"
-              style={{
-                padding: 0,
-                border: 'none',
-                fontSize: 14,
-                background: 'transparent',
-                appearance: 'none',
-                outline: 'none',
-              }}
-            />
-          </Box>
-        </Stack>
-      </Stack>
-    </Box>
-  );
+	return (
+		<Box padding="space.100" testId="all">
+			<Stack space="space.200">
+				<Heading level="h400">Current ADS Buttons</Heading>
+				<Inline space="space.200">
+					<Button appearance="primary">brand.bold</Button>
+					<Button appearance="default">neutral</Button>
+					<Button appearance="warning">warning.bold</Button>
+				</Inline>
+				<Heading level="h400">
+					Buttons with <Code>InteractionSurface</Code>
+				</Heading>
+				<Inline space="space.200" testId="buttons">
+					{(
+						[
+							'color.background.brand.bold',
+							'color.background.neutral',
+							'color.background.warning.bold',
+						] as const
+					).map((app) => (
+						<FocusRing key={app}>
+							<Box
+								as="button"
+								onClick={() => console.log('hello')}
+								xcss={focusRingBoxStyles}
+								paddingInline="space.150"
+								backgroundColor={app}
+							>
+								<InteractionSurface>
+									<Text align="center" weight="medium">
+										{app}
+									</Text>
+								</InteractionSurface>
+							</Box>
+						</FocusRing>
+					))}
+				</Inline>
+				<Heading level="h400">
+					Icon Buttons with <Code>InteractionSurface</Code>
+				</Heading>
+				<Inline space="space.200" testId="icon-buttons">
+					<FocusRing>
+						<Box
+							as="button"
+							backgroundColor="color.background.brand.bold"
+							onClick={() => console.log('hello')}
+							padding="space.050"
+							xcss={focusRingBoxStyles}
+						>
+							<InteractionSurface>
+								<WarningIcon
+									label="icon button"
+									primaryColor={token('color.icon.inverse')}
+									secondaryColor={token('color.background.brand.bold')}
+								/>
+							</InteractionSurface>
+						</Box>
+					</FocusRing>
+					<FocusRing>
+						<Box
+							as="button"
+							backgroundColor="color.background.neutral"
+							onClick={() => console.log('hello')}
+							xcss={focusRingBoxStyles}
+							padding="space.050"
+						>
+							<InteractionSurface>
+								<WarningIcon label="icon button" />
+							</InteractionSurface>
+						</Box>
+					</FocusRing>
+					<FocusRing>
+						<Box
+							as="button"
+							backgroundColor="color.background.warning.bold"
+							onClick={() => console.log('hello')}
+							xcss={focusRingBoxStyles}
+							padding="space.050"
+						>
+							<InteractionSurface>
+								<WarningIcon
+									label="icon button"
+									primaryColor={token('color.icon.warning.inverse')}
+									secondaryColor={token('color.background.warning.bold')}
+								/>
+							</InteractionSurface>
+						</Box>
+					</FocusRing>
+				</Inline>
+				<Heading level="h400">
+					Progress Indicator with <Code>InteractionSurface</Code>
+				</Heading>
+				<Inline space="space.200" testId="progress-indicators">
+					{(
+						[
+							'color.background.brand.bold',
+							'color.background.neutral',
+							'color.background.warning.bold',
+						] as const
+					).map((app) => (
+						<FocusRing>
+							<Box
+								key={app}
+								as="button"
+								backgroundColor={app}
+								onClick={() => console.log('hello')}
+								xcss={focusRingBoxStyles}
+								padding="space.050"
+								aria-label="progress indicator"
+							>
+								<InteractionSurface>
+									<Fragment />
+								</InteractionSurface>
+							</Box>
+						</FocusRing>
+					))}
+				</Inline>
+				<Heading level="h400">Textfield / input spikes</Heading>
+				<Stack space="space.200">
+					<label htmlFor="textfield">Textfield</label>
+					<Textfield id="textfield" />
+					<label htmlFor="input">Input</label>
+					<Box
+						as="fieldset"
+						padding="space.100"
+						tabIndex={-1}
+						backgroundColor="color.background.input"
+						xcss={fieldsetStyles}
+					>
+						<input
+							id="input"
+							pattern="\d+"
+							style={{
+								// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+								padding: 0,
+								// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+								border: 'none',
+								// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+								fontSize: 14,
+								// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+								background: 'transparent',
+								// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+								appearance: 'none',
+								// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+								outline: 'none',
+							}}
+						/>
+					</Box>
+				</Stack>
+			</Stack>
+		</Box>
+	);
 };

package/package.json

@@ -1,81 +1,73 @@
 {
-  "name": "@atlaskit/ds-explorations",
-  "version": "4.0.0",
-  "description": "DEPRECATED. Use @atlaskit/primitives. An experimental package for exploration and validation of spacing / typography foundations.",
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org/"
-  },
-  "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
-  "author": "Atlassian Pty Ltd",
-  "license": "Apache-2.0",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "module:es2019": "dist/es2019/index.js",
-  "types": "dist/types/index.d.ts",
-  "sideEffects": false,
-  "atlaskit:src": "src/index.tsx",
-  "atlassian": {
-    "team": "Design System Team",
-    "inPublicMirror": false,
-    "releaseModel": "continuous",
-    "runReact18": true
-  },
-  "scripts": {
-    "ak-postbuild": "cd ../../../ && yarn build @atlassian/codegen -d cjs,esm,es2019 && yarn build @atlaskit/tokens && cd packages/design-system/ds-explorations && yarn codegen-styles",
-    "codegen-styles": "ts-node --project ../../../tsconfig.node.json ./scripts/codegen-styles",
-    "prepare": "yarn ak-postbuild"
-  },
-  "dependencies": {
-    "@atlaskit/tokens": "^1.49.0",
-    "@babel/runtime": "^7.0.0",
-    "@emotion/react": "^11.7.1"
-  },
-  "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0 || ~18.2.0"
-  },
-  "devDependencies": {
-    "@af/formatting": "*",
-    "@atlaskit/ds-lib": "*",
-    "@atlaskit/primitives": "^6.3.0",
-    "@atlaskit/textfield": "^6.3.0",
-    "@atlaskit/visual-regression": "*",
-    "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
-    "@atlassian/codegen": "^0.1.0",
-    "@testing-library/react": "^12.1.5",
-    "fs-extra": "^4.0.2",
-    "react-dom": "^16.8.0",
-    "ts-node": "^10.9.1",
-    "typescript": "~5.4.2",
-    "wait-for-expect": "^1.2.0"
-  },
-  "techstack": {
-    "@atlassian/frontend": {
-      "import-structure": "atlassian-conventions",
-      "circular-dependencies": "file-and-folder-level"
-    },
-    "@repo/internal": {
-      "dom-events": "use-bind-event-listener",
-      "design-system": "v1",
-      "styling": [
-        "static",
-        "emotion"
-      ],
-      "ui-components": "lite-mode",
-      "analytics": "analytics-next",
-      "deprecation": "no-deprecated-imports"
-    }
-  },
-  "typesVersions": {
-    ">=4.5 <4.9": {
-      "*": [
-        "dist/types-ts4.5/*",
-        "dist/types-ts4.5/index.d.ts"
-      ]
-    }
-  },
-  "af:exports": {
-    ".": "./src/index.tsx"
-  },
-  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1",
-  "homepage": "https://atlaskit.atlassian.com"
-}
+	"name": "@atlaskit/ds-explorations",
+	"version": "4.1.0",
+	"description": "DEPRECATED. Use @atlaskit/primitives. An experimental package for exploration and validation of spacing / typography foundations.",
+	"publishConfig": {
+		"registry": "https://registry.npmjs.org/"
+	},
+	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
+	"author": "Atlassian Pty Ltd",
+	"license": "Apache-2.0",
+	"main": "dist/cjs/index.js",
+	"module": "dist/esm/index.js",
+	"module:es2019": "dist/es2019/index.js",
+	"types": "dist/types/index.d.ts",
+	"sideEffects": false,
+	"atlaskit:src": "src/index.tsx",
+	"atlassian": {
+		"team": "Design System Team",
+		"inPublicMirror": false,
+		"releaseModel": "continuous",
+		"runReact18": true
+	},
+	"scripts": {
+		"ak-postbuild": "cd ../../../ && yarn build @atlassian/codegen -d cjs,esm,es2019 && yarn build @atlaskit/tokens && cd packages/design-system/ds-explorations && yarn codegen-styles",
+		"codegen-styles": "ts-node --project ../../../tsconfig.node.json ./scripts/codegen-styles",
+		"prepare": "yarn ak-postbuild"
+	},
+	"dependencies": {
+		"@atlaskit/tokens": "^1.50.0",
+		"@babel/runtime": "^7.0.0",
+		"@emotion/react": "^11.7.1"
+	},
+	"peerDependencies": {
+		"react": "^16.8.0 || ^17.0.0 || ~18.2.0"
+	},
+	"devDependencies": {
+		"@af/formatting": "*",
+		"@atlaskit/ds-lib": "*",
+		"@atlaskit/primitives": "^7.2.0",
+		"@atlaskit/textfield": "^6.3.0",
+		"@atlaskit/visual-regression": "*",
+		"@atlassian/codegen": "^0.1.0",
+		"@testing-library/react": "^12.1.5",
+		"fs-extra": "^4.0.2",
+		"react-dom": "^16.8.0",
+		"ts-node": "^10.9.1",
+		"typescript": "~5.4.2",
+		"wait-for-expect": "^1.2.0"
+	},
+	"techstack": {
+		"@atlassian/frontend": {
+			"import-structure": "atlassian-conventions",
+			"circular-dependencies": "file-and-folder-level"
+		},
+		"@repo/internal": {
+			"dom-events": "use-bind-event-listener",
+			"design-system": "v1",
+			"styling": ["static", "emotion"],
+			"ui-components": "lite-mode",
+			"analytics": "analytics-next",
+			"deprecation": "no-deprecated-imports"
+		}
+	},
+	"typesVersions": {
+		">=4.5 <4.9": {
+			"*": ["dist/types-ts4.5/*", "dist/types-ts4.5/index.d.ts"]
+		}
+	},
+	"af:exports": {
+		".": "./src/index.tsx"
+	},
+	"homepage": "https://atlaskit.atlassian.com"
+}