@atlaskit/ds-explorations 3.0.5 → 3.1.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/ds-explorations
 
+## 3.1.0
+
+### Minor Changes
+
+- [#59752](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/59752) [`df0bbb7c4cc1`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/df0bbb7c4cc1) - Removed minor-second typography theme: `typography`. ADG3 and Minor third themes remain as the two typography themes.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 3.0.6
+
+### Patch Changes
+
+- [#56371](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/56371) [`8714b4418a12`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8714b4418a12) - Testing new publish workflow
+
 ## 3.0.5
 
 ### Patch Changes

package/README.md

@@ -5,5 +5,4 @@ An experimental private package for exploration and validation of the foundation
 **WARNING!**
 
 This is an internal package with common functionality used in the Atlassian Design System Team.
-This package comes with no support and semver guarantees,
-your app will break if you use this directly!
+This package comes with no support and semver guarantees, your app will break if you use this directly!

package/afm-cc/tsconfig.json

@@ -0,0 +1,24 @@
+{
+    "extends": "../../../../tsconfig.entry-points.confluence.json",
+    "compilerOptions": {
+        "target": "es5",
+        "composite": true,
+        "outDir": "../dist",
+        "rootDir": "../",
+        "baseUrl": "../"
+    },
+    "include": [
+        "../src/**/*.tsx"
+    ],
+    "exclude": [
+        "../src/**/__tests__/*",
+        "../src/**/*.test.*",
+        "../src/**/test.*",
+        "../src/**/examples.*"
+    ],
+    "references": [
+        {
+            "path": "../../tokens/afm-cc/tsconfig.json"
+        }
+    ]
+}

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

@@ -129,11 +129,11 @@ var Text = function Text(_ref) {
 var _default = exports.default = Text;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::9433121c32ccc048039fa1dce6b3a3fc>>
+ * @codegen <<SignedSource::a349b205967d6b291b0d50d64d39b588>>
  * @codegenId typography
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-typography.tsx <<SignedSource::e6864487c53c4cc578daae3094d18dd9>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-typography-adg3.tsx <<SignedSource::3b28b4736fbbce65b95576fe33627b8c>>
  */
 var fontSizeMap = {
   'size.050': (0, _react2.css)({

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

@@ -120,11 +120,11 @@ export default Text;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::9433121c32ccc048039fa1dce6b3a3fc>>
+ * @codegen <<SignedSource::a349b205967d6b291b0d50d64d39b588>>
  * @codegenId typography
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-typography.tsx <<SignedSource::e6864487c53c4cc578daae3094d18dd9>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-typography-adg3.tsx <<SignedSource::3b28b4736fbbce65b95576fe33627b8c>>
  */
 const fontSizeMap = {
   'size.050': css({

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

@@ -123,11 +123,11 @@ export default Text;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::9433121c32ccc048039fa1dce6b3a3fc>>
+ * @codegen <<SignedSource::a349b205967d6b291b0d50d64d39b588>>
  * @codegenId typography
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-typography.tsx <<SignedSource::e6864487c53c4cc578daae3094d18dd9>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-typography-adg3.tsx <<SignedSource::3b28b4736fbbce65b95576fe33627b8c>>
  */
 var fontSizeMap = {
   'size.050': css({

package/dist/types/components/text.partial.d.ts

@@ -81,11 +81,11 @@ declare const Text: FC<TextProps>;
 export default Text;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::9433121c32ccc048039fa1dce6b3a3fc>>
+ * @codegen <<SignedSource::a349b205967d6b291b0d50d64d39b588>>
  * @codegenId typography
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-typography.tsx <<SignedSource::e6864487c53c4cc578daae3094d18dd9>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-typography-adg3.tsx <<SignedSource::3b28b4736fbbce65b95576fe33627b8c>>
  */
 declare const fontSizeMap: {
     'size.050': import("@emotion/react").SerializedStyles;

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

@@ -86,11 +86,11 @@ declare const Text: FC<TextProps>;
 export default Text;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::9433121c32ccc048039fa1dce6b3a3fc>>
+ * @codegen <<SignedSource::a349b205967d6b291b0d50d64d39b588>>
  * @codegenId typography
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-typography.tsx <<SignedSource::e6864487c53c4cc578daae3094d18dd9>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-typography-adg3.tsx <<SignedSource::3b28b4736fbbce65b95576fe33627b8c>>
  */
 declare const fontSizeMap: {
     'size.050': import("@emotion/react").SerializedStyles;

package/examples/02-text.tsx

@@ -14,12 +14,14 @@ const lineHeightContainerStyles = xcss({
 export default () => {
   return (
     <Stack space="space.300">
-      <Heading level="h400" as="h3">
+      <Heading level="h400" as="h2">
         Text examples
       </Heading>
       <Stack space="space.200">
         <Box>
-          <Heading level="h300">Font size</Heading>
+          <Heading level="h300" as="h3">
+            Font size
+          </Heading>
           <Inline space="space.200" testId="font-sizes">
             {(
               [
@@ -40,7 +42,7 @@ export default () => {
           </Inline>
         </Box>
         <Box>
-          <Heading level="h300" as="h4">
+          <Heading level="h300" as="h3">
             Font weight
           </Heading>
           <Inline space="space.200" testId="font-weights">
@@ -54,7 +56,7 @@ export default () => {
           </Inline>
         </Box>
         <Box>
-          <Heading level="h300" as="h4">
+          <Heading level="h300" as="h3">
             Line height
           </Heading>
           <Inline space="space.200" testId="line-heights" alignBlock="center">
@@ -79,7 +81,7 @@ export default () => {
           </Inline>
         </Box>
         <Box>
-          <Heading level="h300" as="h4">
+          <Heading level="h300" as="h3">
             Testing
           </Heading>
           <Stack space="space.050" testId="testing">

package/examples/99-interactions.tsx

@@ -17,10 +17,6 @@ import {
   UNSAFE_Text as Text,
 } from '../src';
 
-const containerStyles = xcss({
-  width: 'size.500',
-});
-
 const fieldsetStyles = xcss({
   flex: '1 1 100%',
   borderStyle: 'solid',
@@ -49,7 +45,7 @@ const focusRingBoxStyles = xcss({
 
 export default () => {
   return (
-    <Box xcss={containerStyles} padding="space.100" testId="all">
+    <Box padding="space.100" testId="all">
       <Stack space="space.200">
         <Heading level="h400">Current ADS Buttons</Heading>
         <Inline space="space.200">
@@ -161,6 +157,7 @@ export default () => {
                 onClick={() => console.log('hello')}
                 xcss={focusRingBoxStyles}
                 padding="space.050"
+                aria-label="progress indicator"
               >
                 <InteractionSurface>
                   <Fragment />
@@ -170,8 +167,10 @@ export default () => {
           ))}
         </Inline>
         <Heading level="h400">Textfield / input spikes</Heading>
-        <Inline space="space.200">
-          <Textfield />
+        <Stack space="space.200">
+          <label htmlFor="textfield">Textfield</label>
+          <Textfield id="textfield" />
+          <label htmlFor="input">Input</label>
           <Box
             as="fieldset"
             padding="space.100"
@@ -180,7 +179,7 @@ export default () => {
             xcss={fieldsetStyles}
           >
             <input
-              id="textfield"
+              id="input"
               pattern="\d+"
               style={{
                 padding: 0,
@@ -192,7 +191,7 @@ export default () => {
               }}
             />
           </Box>
-        </Inline>
+        </Stack>
       </Stack>
     </Box>
   );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/ds-explorations",
-  "version": "3.0.5",
+  "version": "3.1.0",
   "description": "An experimental package for exploration and validation of spacing / typography foundations.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -25,7 +25,7 @@
     "prepare": "yarn ak-postbuild"
   },
   "dependencies": {
-    "@atlaskit/tokens": "^1.28.0",
+    "@atlaskit/tokens": "^1.30.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "tiny-invariant": "^1.2.0"
@@ -35,7 +35,7 @@
   },
   "devDependencies": {
     "@atlaskit/ds-lib": "*",
-    "@atlaskit/primitives": "^1.6.0",
+    "@atlaskit/primitives": "^1.15.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",

package/scripts/codegen-styles.tsx

@@ -19,7 +19,7 @@ const colorTokensDependencyPath = require.resolve(
 );
 
 const typographyTokensDependencyPath = require.resolve(
-  '../../tokens/src/artifacts/tokens-raw/atlassian-typography',
+  '../../tokens/src/artifacts/tokens-raw/atlassian-typography-adg3',
 );
 
 writeFile(

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

@@ -1,22 +1,22 @@
 import React from 'react';
 
-import { queryByAttribute, render } from '@testing-library/react';
+import { queryByAttribute, render, screen } from '@testing-library/react';
 
 import { UNSAFE_Text as Text } from '../../../index';
 
 describe('Text component', () => {
   it('should render given text', () => {
-    const { getByText } = render(<Text>Text</Text>);
-    expect(getByText('Text')).toBeInTheDocument();
+    render(<Text>Text</Text>);
+    expect(screen.getByText('Text')).toBeInTheDocument();
   });
 
   it('should not render redundant DOM nodes', () => {
-    const { getByTestId } = render(
+    render(
       <Text testId="test">
         <Text>Text</Text>
       </Text>,
     );
-    expect(getByTestId('test')).toMatchInlineSnapshot(`
+    expect(screen.getByTestId('test')).toMatchInlineSnapshot(`
       .emotion-0 {
         box-sizing: border-box;
         margin: var(--ds-space-0, 0px);
@@ -34,8 +34,8 @@ describe('Text component', () => {
   });
 
   it('should render with given test id', () => {
-    const { getByTestId } = render(<Text testId="test">Text</Text>);
-    expect(getByTestId('test')).toBeInTheDocument();
+    render(<Text testId="test">Text</Text>);
+    expect(screen.getByTestId('test')).toBeInTheDocument();
   });
 
   it('should render with id attribute', () => {
@@ -48,15 +48,15 @@ describe('Text component', () => {
 
   describe('"as" prop behaviour', () => {
     it('renders without errors when a valid "as" value is given', () => {
-      const { getByText } = render(<Text as="div">Text</Text>);
-      expect(getByText('Text')).toBeInTheDocument();
+      render(<Text as="div">Text</Text>);
+      expect(screen.getByText('Text')).toBeInTheDocument();
     });
 
     it('throws when an invalid "as" value is given', () => {
       // @ts-ignore purposefully providing an invalid value to test invariant behaviour
-      expect(() => render(<Text as="label">Text</Text>)).toThrow(
+      expect(() => render(<Text as="address">Text</Text>)).toThrow(
         new Error(
-          'Invariant failed: @atlaskit/ds-explorations: Text received an invalid "as" value of "label"',
+          'Invariant failed: @atlaskit/ds-explorations: Text received an invalid "as" value of "address"',
         ),
       );
     });

package/src/components/text.partial.tsx

@@ -189,11 +189,11 @@ export default Text;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::9433121c32ccc048039fa1dce6b3a3fc>>
+ * @codegen <<SignedSource::a349b205967d6b291b0d50d64d39b588>>
  * @codegenId typography
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-typography.tsx <<SignedSource::e6864487c53c4cc578daae3094d18dd9>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-typography-adg3.tsx <<SignedSource::3b28b4736fbbce65b95576fe33627b8c>>
  */
 const fontSizeMap = {
   'size.050': css({

package/tsconfig.app.json

@@ -38,5 +38,6 @@
     {
       "path": "../codegen/tsconfig.app.json"
     }
-  ]
+  ],
+  "files": []
 }

package/tmp/api-report-tmp.d.ts

@@ -1,216 +0,0 @@
-## API Report File for "@atlaskit/ds-explorations"
-
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
-
-```ts
-
-import type { CSSProperties } from 'react';
-import { FC } from 'react';
-import { jsx } from '@emotion/react';
-import { ReactNode } from 'react';
-import { SerializedStyles } from '@emotion/react';
-
-// @public (undocumented)
-const asAllowlist: readonly ["span", "div", "p", "strong"];
-
-// @public (undocumented)
-type AsElement = (typeof asAllowlist)[number];
-
-// @public (undocumented)
-const backgroundHoverColorMap: {
-    'accent.lime.subtlest': SerializedStyles;
-    'accent.lime.subtler': SerializedStyles;
-    'accent.lime.subtle': SerializedStyles;
-    'accent.lime.bolder': SerializedStyles;
-    'accent.red.subtlest': SerializedStyles;
-    'accent.red.subtler': SerializedStyles;
-    'accent.red.subtle': SerializedStyles;
-    'accent.red.bolder': SerializedStyles;
-    'accent.orange.subtlest': SerializedStyles;
-    'accent.orange.subtler': SerializedStyles;
-    'accent.orange.subtle': SerializedStyles;
-    'accent.orange.bolder': SerializedStyles;
-    'accent.yellow.subtlest': SerializedStyles;
-    'accent.yellow.subtler': SerializedStyles;
-    'accent.yellow.subtle': SerializedStyles;
-    'accent.yellow.bolder': SerializedStyles;
-    'accent.green.subtlest': SerializedStyles;
-    'accent.green.subtler': SerializedStyles;
-    'accent.green.subtle': SerializedStyles;
-    'accent.green.bolder': SerializedStyles;
-    'accent.teal.subtlest': SerializedStyles;
-    'accent.teal.subtler': SerializedStyles;
-    'accent.teal.subtle': SerializedStyles;
-    'accent.teal.bolder': SerializedStyles;
-    'accent.blue.subtlest': SerializedStyles;
-    'accent.blue.subtler': SerializedStyles;
-    'accent.blue.subtle': SerializedStyles;
-    'accent.blue.bolder': SerializedStyles;
-    'accent.purple.subtlest': SerializedStyles;
-    'accent.purple.subtler': SerializedStyles;
-    'accent.purple.subtle': SerializedStyles;
-    'accent.purple.bolder': SerializedStyles;
-    'accent.magenta.subtlest': SerializedStyles;
-    'accent.magenta.subtler': SerializedStyles;
-    'accent.magenta.subtle': SerializedStyles;
-    'accent.magenta.bolder': SerializedStyles;
-    'accent.gray.subtlest': SerializedStyles;
-    'accent.gray.subtler': SerializedStyles;
-    'accent.gray.subtle': SerializedStyles;
-    'accent.gray.bolder': SerializedStyles;
-    input: SerializedStyles;
-    'inverse.subtle': SerializedStyles;
-    neutral: SerializedStyles;
-    'neutral.subtle': SerializedStyles;
-    'neutral.bold': SerializedStyles;
-    selected: SerializedStyles;
-    'selected.bold': SerializedStyles;
-    'brand.subtlest': SerializedStyles;
-    'brand.bold': SerializedStyles;
-    'brand.boldest': SerializedStyles;
-    danger: SerializedStyles;
-    'danger.bold': SerializedStyles;
-    warning: SerializedStyles;
-    'warning.bold': SerializedStyles;
-    success: SerializedStyles;
-    'success.bold': SerializedStyles;
-    discovery: SerializedStyles;
-    'discovery.bold': SerializedStyles;
-    information: SerializedStyles;
-    'information.bold': SerializedStyles;
-    'elevation.surface': SerializedStyles;
-    'elevation.surface.overlay': SerializedStyles;
-    'elevation.surface.raised': SerializedStyles;
-};
-
-// @public (undocumented)
-interface BasePrimitiveProps {
-    testId?: string;
-    UNSAFE_style?: CSSProperties;
-}
-
-// @public (undocumented)
-type FontSize = keyof typeof fontSizeMap;
-
-// @public
-const fontSizeMap: {
-    'size.050': SerializedStyles;
-    'size.075': SerializedStyles;
-    'size.100': SerializedStyles;
-    'size.200': SerializedStyles;
-    'size.300': SerializedStyles;
-    'size.400': SerializedStyles;
-    'size.500': SerializedStyles;
-    'size.600': SerializedStyles;
-};
-
-// @public (undocumented)
-type FontWeight = keyof typeof fontWeightMap;
-
-// @public (undocumented)
-const fontWeightMap: {
-    bold: SerializedStyles;
-    medium: SerializedStyles;
-    regular: SerializedStyles;
-    semibold: SerializedStyles;
-};
-
-// @public (undocumented)
-type InteractionBackgroundColor = keyof typeof backgroundHoverColorMap;
-
-// @public (undocumented)
-interface InteractionSurfaceProps extends BasePrimitiveProps {
-    // (undocumented)
-    appearance?: InteractionBackgroundColor;
-    // (undocumented)
-    children: ReactNode;
-}
-
-// @public (undocumented)
-type LineHeight = keyof typeof lineHeightMap;
-
-// @public (undocumented)
-const lineHeightMap: {
-    'lineHeight.1': SerializedStyles;
-    'lineHeight.100': SerializedStyles;
-    'lineHeight.200': SerializedStyles;
-    'lineHeight.300': SerializedStyles;
-    'lineHeight.400': SerializedStyles;
-    'lineHeight.500': SerializedStyles;
-    'lineHeight.600': SerializedStyles;
-};
-
-// @public (undocumented)
-type TextAlign = keyof typeof textAlignMap;
-
-// @public (undocumented)
-const textAlignMap: {
-    center: SerializedStyles;
-    end: SerializedStyles;
-    start: SerializedStyles;
-};
-
-// @public (undocumented)
-type TextColor = keyof typeof textColorMap;
-
-// @public
-const textColorMap: {
-    readonly 'color.text': SerializedStyles;
-    readonly disabled: SerializedStyles;
-    readonly inverse: SerializedStyles;
-    readonly selected: SerializedStyles;
-    readonly brand: SerializedStyles;
-    readonly danger: SerializedStyles;
-    readonly warning: SerializedStyles;
-    readonly 'warning.inverse': SerializedStyles;
-    readonly success: SerializedStyles;
-    readonly discovery: SerializedStyles;
-    readonly information: SerializedStyles;
-    readonly subtlest: SerializedStyles;
-    readonly subtle: SerializedStyles;
-};
-
-// @public (undocumented)
-type TextTransform = keyof typeof textTransformMap;
-
-// @public (undocumented)
-const textTransformMap: {
-    none: SerializedStyles;
-    lowercase: SerializedStyles;
-    uppercase: SerializedStyles;
-};
-
-// @public (undocumented)
-export const UNSAFE_InteractionSurface: ({ appearance, children, testId, }: InteractionSurfaceProps) => jsx.JSX.Element;
-
-// @internal
-export const UNSAFE_Text: FC<UNSAFE_TextProps>;
-
-// @public (undocumented)
-export interface UNSAFE_TextProps extends BasePrimitiveProps {
-    as?: AsElement;
-    children: ReactNode;
-    color?: TextColor;
-    fontSize?: FontSize;
-    fontWeight?: FontWeight;
-    id?: string;
-    lineHeight?: LineHeight;
-    shouldTruncate?: boolean;
-    textAlign?: TextAlign;
-    textTransform?: TextTransform;
-    verticalAlign?: VerticalAlign;
-}
-
-// @public (undocumented)
-type VerticalAlign = keyof typeof verticalAlignMap;
-
-// @public (undocumented)
-const verticalAlignMap: {
-    top: SerializedStyles;
-    middle: SerializedStyles;
-    bottom: SerializedStyles;
-};
-
-// (No @packageDocumentation comment for this package)
-
-```