@atlaskit/ds-explorations 3.5.2 → 4.0.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/ds-explorations
 
+## 4.0.0
+
+### Major Changes
+
+-   [#101788](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/101788)
+    [`1c8f141e2bb6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/1c8f141e2bb6) -
+    Removed Text component. Use `@atlaskit/primitives` instead.
+
 ## 3.5.2
 
 ### Patch Changes

package/dist/cjs/index.js

@@ -10,11 +10,4 @@ Object.defineProperty(exports, "UNSAFE_InteractionSurface", {
     return _interactionSurface.default;
   }
 });
-Object.defineProperty(exports, "UNSAFE_Text", {
-  enumerable: true,
-  get: function get() {
-    return _text.default;
-  }
-});
-var _text = _interopRequireDefault(require("./components/text.partial"));
 var _interactionSurface = _interopRequireDefault(require("./components/interaction-surface.partial"));

package/dist/es2019/index.js

@@ -1,2 +1 @@
-export { default as UNSAFE_Text } from './components/text.partial';
 export { default as UNSAFE_InteractionSurface } from './components/interaction-surface.partial';

package/dist/esm/index.js

@@ -1,2 +1 @@
-export { default as UNSAFE_Text } from './components/text.partial';
 export { default as UNSAFE_InteractionSurface } from './components/interaction-surface.partial';

package/dist/types/index.d.ts

@@ -1,3 +1 @@
-export { default as UNSAFE_Text } from './components/text.partial';
 export { default as UNSAFE_InteractionSurface } from './components/interaction-surface.partial';
-export type { TextProps as UNSAFE_TextProps } from './components/text.partial';

package/dist/types-ts4.5/index.d.ts

@@ -1,3 +1 @@
-export { default as UNSAFE_Text } from './components/text.partial';
 export { default as UNSAFE_InteractionSurface } from './components/interaction-surface.partial';
-export type { TextProps as UNSAFE_TextProps } from './components/text.partial';

package/examples/99-interactions.tsx

@@ -8,13 +8,12 @@ import { Code } from '@atlaskit/code';
 import FocusRing from '@atlaskit/focus-ring';
 import Heading from '@atlaskit/heading';
 import WarningIcon from '@atlaskit/icon/glyph/warning';
-import { Box, Inline, Stack, xcss } from '@atlaskit/primitives';
+import { Box, Inline, Stack, Text, xcss } from '@atlaskit/primitives';
 import Textfield from '@atlaskit/textfield';
 import { token } from '@atlaskit/tokens';
 
 import {
   UNSAFE_InteractionSurface as InteractionSurface,
-  UNSAFE_Text as Text,
 } from '../src';
 
 const fieldsetStyles = xcss({
@@ -74,10 +73,8 @@ export default () => {
               >
                 <InteractionSurface>
                   <Text
-                    textAlign="center"
-                    fontSize="size.100"
-                    lineHeight="lineHeight.500"
-                    fontWeight="medium"
+                    align="center"
+                    weight="medium"
                   >
                     {app}
                   </Text>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@atlaskit/ds-explorations",
-  "version": "3.5.2",
-  "description": "An experimental package for exploration and validation of spacing / typography foundations.",
+  "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/"
   },
@@ -26,10 +26,9 @@
     "prepare": "yarn ak-postbuild"
   },
   "dependencies": {
-    "@atlaskit/tokens": "^1.47.0",
+    "@atlaskit/tokens": "^1.49.0",
     "@babel/runtime": "^7.0.0",
-    "@emotion/react": "^11.7.1",
-    "tiny-invariant": "^1.2.0"
+    "@emotion/react": "^11.7.1"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ~18.2.0"
@@ -37,7 +36,7 @@
   "devDependencies": {
     "@af/formatting": "*",
     "@atlaskit/ds-lib": "*",
-    "@atlaskit/primitives": "^6.1.0",
+    "@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",
@@ -75,8 +74,7 @@
     }
   },
   "af:exports": {
-    ".": "./src/index.tsx",
-    "./text": "./src/components/text.partial.tsx"
+    ".": "./src/index.tsx"
   },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1",
   "homepage": "https://atlaskit.atlassian.com"

package/scripts/codegen-styles.tsx

@@ -7,21 +7,14 @@ import {
   createSignedArtifact,
 } from '@atlassian/codegen';
 
-import { createColorStylesFromTemplate } from './color-codegen-template';
 import { createColorMapTemplate } from './color-map-template';
 import { createInteractionStylesFromTemplate } from './interaction-codegen';
-import { createSpacingScaleTemplate } from './spacing-scale-template';
-import { createTypographyStylesFromTemplate } from './typography-codegen-template';
 
 const colorMapOutputFolder = join(__dirname, '../', 'src', 'internal');
 const colorTokensDependencyPath = require.resolve(
   '../../tokens/src/artifacts/tokens-raw/atlassian-light',
 );
 
-const typographyTokensDependencyPath = require.resolve(
-  '../../tokens/src/artifacts/tokens-raw/atlassian-typography-adg3',
-);
-
 writeFile(
   join(colorMapOutputFolder, 'color-map.tsx'),
   createSignedArtifact(createColorMapTemplate(), 'yarn codegen-styles', {
@@ -32,67 +25,11 @@ writeFile(
   }),
 ).then(() => console.log(join(colorMapOutputFolder, 'color-map.tsx')));
 
-writeFile(
-  join(__dirname, '../', 'src', 'internal', 'spacing-scale.tsx'),
-  createSignedArtifact(
-    createSpacingScaleTemplate(),
-    'yarn codegen-styles',
-    'Internal codegen of the spacing scale values. Only used for internal examples.',
-  ),
-).then(() => console.log('spacing-scale.tsx written!'));
-
 // generate colors
 Promise.all(
-  [{ target: 'text.partial.tsx' }].map(({ target }) => {
+  [{ target: 'interaction-surface.partial.tsx' }].map(({ target }) => {
     const targetPath = join(__dirname, '../', 'src', 'components', target);
 
-    const source = createPartialSignedArtifact(
-      (options) => options.map(createColorStylesFromTemplate).join('\n'),
-      'yarn codegen-styles',
-      {
-        id: 'colors',
-        absoluteFilePath: targetPath,
-        dependencies: [colorTokensDependencyPath],
-      },
-    );
-
-    return writeFile(targetPath, source).then(() =>
-      console.log(`${targetPath} written!`),
-    );
-  }),
-)
-  .then(() => {
-    // generate typography values
-    return Promise.all(
-      [{ target: 'text.partial.tsx' }].map(({ target }) => {
-        const targetPath = join(__dirname, '../', 'src', 'components', target);
-
-        const source = createPartialSignedArtifact(
-          (options) =>
-            options.map(createTypographyStylesFromTemplate).join('\n'),
-          'yarn codegen-styles',
-          {
-            id: 'typography',
-            absoluteFilePath: targetPath,
-            dependencies: [typographyTokensDependencyPath],
-          },
-        );
-
-        return writeFile(targetPath, source).then(() =>
-          console.log(`${targetPath} written!`),
-        );
-      }),
-    );
-  })
-  .then(() => {
-    const targetPath = join(
-      __dirname,
-      '../',
-      'src',
-      'components',
-      'interaction-surface.partial.tsx',
-    );
-
     const source = createPartialSignedArtifact(
       (options) => options.map(createInteractionStylesFromTemplate).join('\n'),
       'yarn codegen-styles',
@@ -106,4 +43,5 @@ Promise.all(
     return writeFile(targetPath, source).then(() =>
       console.log(`${targetPath} written!`),
     );
-  });
+  }),
+);

package/src/components/__tests__/unit/interaction-suface.test.tsx

@@ -2,12 +2,11 @@ import React from 'react';
 
 import { act, fireEvent, render } from '@testing-library/react';
 
-import { Box } from '@atlaskit/primitives';
+import { Box, Text } from '@atlaskit/primitives';
 import { token } from '@atlaskit/tokens';
 
 import {
   UNSAFE_InteractionSurface as InteractionSurface,
-  UNSAFE_Text as Text,
 } from '../../../index';
 
 describe('InteractionSurface component', () => {

package/src/index.tsx

@@ -1,3 +1 @@
-export { default as UNSAFE_Text } from './components/text.partial';
 export { default as UNSAFE_InteractionSurface } from './components/interaction-surface.partial';
-export type { TextProps as UNSAFE_TextProps } from './components/text.partial';

package/tsconfig.dev.json

@@ -39,9 +39,6 @@
     {
       "path": "../../../build/formatting/tsconfig.app.json"
     },
-    {
-      "path": "../../../build/test-tooling/gemini-visual-regression/tsconfig.app.json"
-    },
     {
       "path": "../button/tsconfig.app.json"
     },
@@ -51,9 +48,6 @@
     {
       "path": "../../../build/website/docs/tsconfig.app.json"
     },
-    {
-      "path": "../ds-lib/tsconfig.app.json"
-    },
     {
       "path": "../focus-ring/tsconfig.app.json"
     },
@@ -63,15 +57,9 @@
     {
       "path": "../icon/tsconfig.app.json"
     },
-    {
-      "path": "../lozenge/tsconfig.app.json"
-    },
     {
       "path": "../primitives/tsconfig.app.json"
     },
-    {
-      "path": "../section-message/tsconfig.app.json"
-    },
     {
       "path": "../textfield/tsconfig.app.json"
     },

package/dist/cjs/components/text.partial.js

@@ -1,280 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = require("react");
-var _react2 = require("@emotion/react");
-var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
-var _colorMap = _interopRequireDefault(require("../internal/color-map"));
-var _surfaceProvider = require("./surface-provider");
-var _excluded = ["children"];
-/** @jsx jsx */
-var asAllowlist = ['span', 'div', 'p', 'strong'];
-var textAlignMap = {
-  center: (0, _react2.css)({
-    textAlign: 'center'
-  }),
-  end: (0, _react2.css)({
-    textAlign: 'end'
-  }),
-  start: (0, _react2.css)({
-    textAlign: 'start'
-  })
-};
-var textTransformMap = {
-  none: (0, _react2.css)({
-    textTransform: 'none'
-  }),
-  lowercase: (0, _react2.css)({
-    textTransform: 'lowercase'
-  }),
-  uppercase: (0, _react2.css)({
-    textTransform: 'uppercase'
-  })
-};
-var verticalAlignMap = {
-  top: (0, _react2.css)({
-    verticalAlign: 'top'
-  }),
-  middle: (0, _react2.css)({
-    verticalAlign: 'middle'
-  }),
-  bottom: (0, _react2.css)({
-    verticalAlign: 'bottom'
-  })
-};
-var baseStyles = (0, _react2.css)({
-  boxSizing: 'border-box',
-  margin: "var(--ds-space-0, 0px)",
-  padding: "var(--ds-space-0, 0px)"
-});
-var truncateStyles = (0, _react2.css)({
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap'
-});
-
-/**
- * Custom hook designed to abstract the parsing of the color props and make it clearer in the future how color is reconciled between themes and tokens.
- */
-var useColor = function useColor(colorProp) {
-  var surface = (0, _surfaceProvider.useSurface)();
-  var inverseTextColor = _colorMap.default[surface];
-
-  /**
-   * Where the color of the surface is inverted we override the user choice
-   * as there is no valid choice that is not covered by the override.
-   */
-  var color = inverseTextColor !== null && inverseTextColor !== void 0 ? inverseTextColor : colorProp;
-  return color;
-};
-var HasTextAncestorContext = /*#__PURE__*/(0, _react.createContext)(false);
-var useHasTextAncestor = function useHasTextAncestor() {
-  return (0, _react.useContext)(HasTextAncestorContext);
-};
-
-/**
- * __Text__
- *
- * Text is a primitive component that has the Atlassian Design System's design guidelines baked in.
- * This includes considerations for text attributes such as color, font size, font weight, and line height.
- * It renders a `span` by default.
- *
- * @internal
- */
-var Text = function Text(_ref) {
-  var children = _ref.children,
-    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var _props$as = props.as,
-    Component = _props$as === void 0 ? 'span' : _props$as,
-    colorProp = props.color,
-    fontSize = props.fontSize,
-    fontWeight = props.fontWeight,
-    lineHeight = props.lineHeight,
-    _props$shouldTruncate = props.shouldTruncate,
-    shouldTruncate = _props$shouldTruncate === void 0 ? false : _props$shouldTruncate,
-    textAlign = props.textAlign,
-    textTransform = props.textTransform,
-    verticalAlign = props.verticalAlign,
-    testId = props.testId,
-    UNSAFE_style = props.UNSAFE_style,
-    id = props.id;
-  (0, _tinyInvariant.default)(asAllowlist.includes(Component), "@atlaskit/ds-explorations: Text received an invalid \"as\" value of \"".concat(Component, "\""));
-  var color = useColor(colorProp);
-  var isWrapped = useHasTextAncestor();
-
-  /**
-   * If the text is already wrapped and applies no props we can just
-   * render the children directly as a fragment.
-   */
-  if (isWrapped && Object.keys(props).length === 0) {
-    return (0, _react2.jsx)(_react.Fragment, null, children);
-  }
-  var component = (0, _react2.jsx)(Component, {
-    style: UNSAFE_style,
-    css: [baseStyles, fontFamilyMap.sans, color && textColorMap[color], fontSize && fontSizeMap[fontSize], fontWeight && fontWeightMap[fontWeight], lineHeight && lineHeightMap[lineHeight], shouldTruncate && truncateStyles, textAlign && textAlignMap[textAlign], textTransform && textTransformMap[textTransform], verticalAlign && verticalAlignMap[verticalAlign]],
-    "data-testid": testId,
-    id: id
-  }, children);
-  return isWrapped ?
-  // no need to re-apply context if the text is already wrapped
-  component : (0, _react2.jsx)(HasTextAncestorContext.Provider, {
-    value: true
-  }, component);
-};
-var _default = exports.default = Text;
-/**
- * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::c5a6cec604462dc4b48aaf1160b83e59>>
- * @codegenId typography
- * @codegenCommand yarn codegen-styles
- * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-typography-adg3.tsx <<SignedSource::bf3349cf2247aa44fbac47c953fc03b5>>
- */
-var fontSizeMap = {
-  'size.050': (0, _react2.css)({
-    fontSize: "var(--ds-font-size-050, 11px)"
-  }),
-  'size.075': (0, _react2.css)({
-    fontSize: "var(--ds-font-size-075, 12px)"
-  }),
-  'size.100': (0, _react2.css)({
-    fontSize: "var(--ds-font-size-100, 14px)"
-  }),
-  'size.200': (0, _react2.css)({
-    fontSize: "var(--ds-font-size-200, 16px)"
-  }),
-  'size.300': (0, _react2.css)({
-    fontSize: "var(--ds-font-size-300, 20px)"
-  }),
-  'size.400': (0, _react2.css)({
-    fontSize: "var(--ds-font-size-400, 24px)"
-  }),
-  'size.500': (0, _react2.css)({
-    fontSize: "var(--ds-font-size-500, 29px)"
-  }),
-  'size.600': (0, _react2.css)({
-    fontSize: "var(--ds-font-size-600, 35px)"
-  })
-};
-var fontWeightMap = {
-  bold: (0, _react2.css)({
-    fontWeight: "var(--ds-font-weight-bold, 700)"
-  }),
-  medium: (0, _react2.css)({
-    fontWeight: "var(--ds-font-weight-medium, 500)"
-  }),
-  regular: (0, _react2.css)({
-    fontWeight: "var(--ds-font-weight-regular, 400)"
-  }),
-  semibold: (0, _react2.css)({
-    fontWeight: "var(--ds-font-weight-semibold, 600)"
-  })
-};
-var fontFamilyMap = {
-  body: (0, _react2.css)({
-    fontFamily: "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
-  }),
-  'brand.body': (0, _react2.css)({
-    fontFamily: "var(--ds-font-family-brand-body, \"Charlie Text\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
-  }),
-  'brand.heading': (0, _react2.css)({
-    fontFamily: "var(--ds-font-family-brand-heading, \"Charlie Display\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
-  }),
-  code: (0, _react2.css)({
-    fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)"
-  }),
-  heading: (0, _react2.css)({
-    fontFamily: "var(--ds-font-family-heading, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
-  }),
-  monospace: (0, _react2.css)({
-    fontFamily: "var(--ds-font-family-monospace, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)"
-  }),
-  sans: (0, _react2.css)({
-    fontFamily: "var(--ds-font-family-sans, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif)"
-  })
-};
-var lineHeightMap = {
-  'lineHeight.1': (0, _react2.css)({
-    lineHeight: "var(--ds-font-lineHeight-1, 1)"
-  }),
-  'lineHeight.100': (0, _react2.css)({
-    lineHeight: "var(--ds-font-lineHeight-100, 16px)"
-  }),
-  'lineHeight.200': (0, _react2.css)({
-    lineHeight: "var(--ds-font-lineHeight-200, 20px)"
-  }),
-  'lineHeight.300': (0, _react2.css)({
-    lineHeight: "var(--ds-font-lineHeight-300, 24px)"
-  }),
-  'lineHeight.400': (0, _react2.css)({
-    lineHeight: "var(--ds-font-lineHeight-400, 28px)"
-  }),
-  'lineHeight.500': (0, _react2.css)({
-    lineHeight: "var(--ds-font-lineHeight-500, 32px)"
-  }),
-  'lineHeight.600': (0, _react2.css)({
-    lineHeight: "var(--ds-font-lineHeight-600, 40px)"
-  })
-};
-/**
- * @codegenEnd
- */
-
-/**
- * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::db9171c09481d187d83bb01192c16c41>>
- * @codegenId colors
- * @codegenCommand yarn codegen-styles
- * @codegenParams ["text"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::f27d1519d51cc4a85383a00907847774>>
- */
-var textColorMap = {
-  'color.text': (0, _react2.css)({
-    color: "var(--ds-text, #172B4D)"
-  }),
-  disabled: (0, _react2.css)({
-    color: "var(--ds-text-disabled, #A5ADBA)"
-  }),
-  inverse: (0, _react2.css)({
-    color: "var(--ds-text-inverse, #FFFFFF)"
-  }),
-  selected: (0, _react2.css)({
-    color: "var(--ds-text-selected, #0052CC)"
-  }),
-  brand: (0, _react2.css)({
-    color: "var(--ds-text-brand, #0065FF)"
-  }),
-  danger: (0, _react2.css)({
-    color: "var(--ds-text-danger, #DE350B)"
-  }),
-  warning: (0, _react2.css)({
-    color: "var(--ds-text-warning, #974F0C)"
-  }),
-  'warning.inverse': (0, _react2.css)({
-    color: "var(--ds-text-warning-inverse, #172B4D)"
-  }),
-  success: (0, _react2.css)({
-    color: "var(--ds-text-success, #006644)"
-  }),
-  discovery: (0, _react2.css)({
-    color: "var(--ds-text-discovery, #403294)"
-  }),
-  information: (0, _react2.css)({
-    color: "var(--ds-text-information, #0052CC)"
-  }),
-  subtlest: (0, _react2.css)({
-    color: "var(--ds-text-subtlest, #7A869A)"
-  }),
-  subtle: (0, _react2.css)({
-    color: "var(--ds-text-subtle, #42526E)"
-  })
-};
-
-/**
- * @codegenEnd
- */

package/dist/cjs/internal/spacing-scale.js

@@ -1,15 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.spacingScale = void 0;
-/**
- * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- *
- * Internal codegen of the spacing scale values. Only used for internal examples.
- *
- * @codegen <<SignedSource::33634cd9767c59b9aaaf64fc6f44f852>>
- * @codegenCommand yarn codegen-styles
- */
-var spacingScale = exports.spacingScale = ['space.0', 'space.025', 'space.050', 'space.075', 'space.100', 'space.150', 'space.200', 'space.250', 'space.300', 'space.400', 'space.500', 'space.600', 'space.800', 'space.1000'];