@atlaskit/ds-explorations 2.2.6 → 2.2.7

package/package.json

@@ -1,45 +1,31 @@
 {
   "name": "@atlaskit/ds-explorations",
-  "version": "2.2.6",
+  "version": "2.2.7",
   "description": "An experimental package for exploration and validation of spacing / typography foundations.",
-  "license": "Apache-2.0",
-  "atlassian": {
-    "team": "Design System Team",
-    "inPublicMirror": false,
-    "releaseModel": "continuous"
-  },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
   "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
-  "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"
-  },
+  "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",
-  "typesVersions": {
-    ">=4.5 <4.9": {
-      "*": [
-        "dist/types-ts4.5/*",
-        "dist/types-ts4.5/index.d.ts"
-      ]
-    }
-  },
   "sideEffects": false,
   "atlaskit:src": "src/index.tsx",
-  "af:exports": {
-    ".": "./src/index.tsx",
-    "./box": "./src/components/box.partial.tsx",
-    "./text": "./src/components/text.partial.tsx",
-    "./stack": "./src/components/stack.partial.tsx",
-    "./inline": "./src/components/inline.partial.tsx"
+  "atlassian": {
+    "team": "Design System Team",
+    "inPublicMirror": false,
+    "releaseModel": "continuous"
+  },
+  "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.11.0",
+    "@atlaskit/tokens": "^1.13.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "tiny-invariant": "^1.2.0"
@@ -48,6 +34,7 @@
     "react": "^16.8.0"
   },
   "devDependencies": {
+    "@af/visual-regression": "*",
     "@atlaskit/ds-lib": "*",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
@@ -77,6 +64,21 @@
       "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",
+    "./box": "./src/components/box.partial.tsx",
+    "./text": "./src/components/text.partial.tsx",
+    "./stack": "./src/components/stack.partial.tsx",
+    "./inline": "./src/components/inline.partial.tsx"
+  },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1",
   "homepage": "https://atlaskit.atlassian.com"
 }

package/report.api.md

@@ -47,7 +47,9 @@ const backgroundColorMap: {
   readonly 'neutral.bold': SerializedStyles;
   readonly selected: SerializedStyles;
   readonly 'selected.bold': SerializedStyles;
+  readonly 'brand.subtlest': SerializedStyles;
   readonly 'brand.bold': SerializedStyles;
+  readonly 'brand.boldest': SerializedStyles;
   readonly danger: SerializedStyles;
   readonly 'danger.bold': SerializedStyles;
   readonly warning: SerializedStyles;
@@ -76,7 +78,9 @@ const backgroundHoverColorMap: {
   'neutral.bold': SerializedStyles;
   selected: SerializedStyles;
   'selected.bold': SerializedStyles;
+  'brand.subtlest': SerializedStyles;
   'brand.bold': SerializedStyles;
+  'brand.boldest': SerializedStyles;
   danger: SerializedStyles;
   'danger.bold': SerializedStyles;
   warning: SerializedStyles;

package/scripts/__tests__/__snapshots__/codegen.test.tsx.snap

@@ -26,9 +26,15 @@ exports[`@atlaskit/design-system-explorations bg styles are generated correctly
   'selected.bold': css({
     backgroundColor: token('color.background.selected.bold', '#0052CC'),
   }),
+  'brand.subtlest': css({
+    backgroundColor: token('color.background.brand.subtlest', '#B3D4FF'),
+  }),
   'brand.bold': css({
     backgroundColor: token('color.background.brand.bold', '#0052CC'),
   }),
+  'brand.boldest': css({
+    backgroundColor: token('color.background.brand.boldest', '#0747A6'),
+  }),
   danger: css({
     backgroundColor: token('color.background.danger', '#FFEBE6'),
   }),
@@ -164,11 +170,21 @@ exports[`@atlaskit/design-system-explorations border styles are generated correc
       backgroundColor: token('color.background.selected.bold.pressed'),
     },
   }),
+  'brand.subtlest': css({
+    ':active': {
+      backgroundColor: token('color.background.brand.subtlest.pressed'),
+    },
+  }),
   'brand.bold': css({
     ':active': {
       backgroundColor: token('color.background.brand.bold.pressed'),
     },
   }),
+  'brand.boldest': css({
+    ':active': {
+      backgroundColor: token('color.background.brand.boldest.pressed'),
+    },
+  }),
   danger: css({
     ':active': { backgroundColor: token('color.background.danger.pressed') },
   }),
@@ -252,9 +268,19 @@ const backgroundHoverColorMap = {
       backgroundColor: token('color.background.selected.bold.hovered'),
     },
   }),
+  'brand.subtlest': css({
+    ':hover': {
+      backgroundColor: token('color.background.brand.subtlest.hovered'),
+    },
+  }),
   'brand.bold': css({
     ':hover': { backgroundColor: token('color.background.brand.bold.hovered') },
   }),
+  'brand.boldest': css({
+    ':hover': {
+      backgroundColor: token('color.background.brand.boldest.hovered'),
+    },
+  }),
   danger: css({
     ':hover': { backgroundColor: token('color.background.danger.hovered') },
   }),

package/src/components/__tests__/vr-tests/box-snapshot-test.vr.tsx

@@ -0,0 +1,5 @@
+import { snapshot } from '@af/visual-regression';
+
+import Box from '../../../../examples/01-box';
+
+snapshot(Box);

package/src/components/__tests__/vr-tests/text-snapshot-test.vr.tsx

@@ -0,0 +1,5 @@
+import { snapshot } from '@af/visual-regression';
+
+import Text from '../../../../examples/02-text';
+
+snapshot(Text);

package/src/components/box.partial.tsx

@@ -510,11 +510,11 @@ export type PaddingInline = keyof typeof paddingInlineMap;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::891786734c508bdcd4316dff89e481c4>>
+ * @codegen <<SignedSource::641490362f94761dab3c48a98b999b7a>>
  * @codegenId colors
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["border", "background", "shadow"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::efb3dfea27ab3db2fb3756ed9657c5cb>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::d09e7cd13e24113267155813747b3bd4>>
  */
 const borderColorMap = {
   'color.border': css({
@@ -585,9 +585,15 @@ const backgroundColorMap = {
   'selected.bold': css({
     backgroundColor: token('color.background.selected.bold', '#0052CC'),
   }),
+  'brand.subtlest': css({
+    backgroundColor: token('color.background.brand.subtlest', '#B3D4FF'),
+  }),
   'brand.bold': css({
     backgroundColor: token('color.background.brand.bold', '#0052CC'),
   }),
+  'brand.boldest': css({
+    backgroundColor: token('color.background.brand.boldest', '#0747A6'),
+  }),
   danger: css({
     backgroundColor: token('color.background.danger', '#FFEBE6'),
   }),

package/src/components/interaction-surface.partial.tsx

@@ -70,11 +70,11 @@ export default InteractionSurface;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::b11e88d30e0364eaa7a660c740b296b6>>
+ * @codegen <<SignedSource::6705bcce4bc1f3f6b944ca61e2f7afcf>>
  * @codegenId interactions
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["background"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::efb3dfea27ab3db2fb3756ed9657c5cb>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::d09e7cd13e24113267155813747b3bd4>>
  */
 const backgroundActiveColorMap = {
   input: css({
@@ -106,11 +106,21 @@ const backgroundActiveColorMap = {
       backgroundColor: token('color.background.selected.bold.pressed'),
     },
   }),
+  'brand.subtlest': css({
+    ':active': {
+      backgroundColor: token('color.background.brand.subtlest.pressed'),
+    },
+  }),
   'brand.bold': css({
     ':active': {
       backgroundColor: token('color.background.brand.bold.pressed'),
     },
   }),
+  'brand.boldest': css({
+    ':active': {
+      backgroundColor: token('color.background.brand.boldest.pressed'),
+    },
+  }),
   danger: css({
     ':active': { backgroundColor: token('color.background.danger.pressed') },
   }),
@@ -194,9 +204,19 @@ const backgroundHoverColorMap = {
       backgroundColor: token('color.background.selected.bold.hovered'),
     },
   }),
+  'brand.subtlest': css({
+    ':hover': {
+      backgroundColor: token('color.background.brand.subtlest.hovered'),
+    },
+  }),
   'brand.bold': css({
     ':hover': { backgroundColor: token('color.background.brand.bold.hovered') },
   }),
+  'brand.boldest': css({
+    ':hover': {
+      backgroundColor: token('color.background.brand.boldest.hovered'),
+    },
+  }),
   danger: css({
     ':hover': { backgroundColor: token('color.background.danger.hovered') },
   }),

package/src/components/text.partial.tsx

@@ -287,11 +287,11 @@ export type LineHeight = keyof typeof lineHeightMap;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::346b54332eaa1c1e3980c869a02434db>>
+ * @codegen <<SignedSource::039c7b7400ed2152388a9501fcdea070>>
  * @codegenId colors
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["text"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::efb3dfea27ab3db2fb3756ed9657c5cb>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::d09e7cd13e24113267155813747b3bd4>>
  */
 const textColorMap = {
   'color.text': css({

package/src/internal/color-map.tsx

@@ -3,9 +3,9 @@
  *
  * The color map is used to map a background color token to a matching text color that will meet contrast.
  *
- * @codegen <<SignedSource::0e6ef7d45c6904ff2af7d94ba657014b>>
+ * @codegen <<SignedSource::43134d6abeba44006053eb83fc827e9b>>
  * @codegenCommand yarn codegen-styles
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::efb3dfea27ab3db2fb3756ed9657c5cb>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::d09e7cd13e24113267155813747b3bd4>>
  */
 export default {
   'neutral.bold': 'inverse',
@@ -17,6 +17,9 @@ export default {
   'brand.bold': 'inverse',
   'brand.bold.hovered': 'inverse',
   'brand.bold.pressed': 'inverse',
+  'brand.boldest': 'inverse',
+  'brand.boldest.hovered': 'inverse',
+  'brand.boldest.pressed': 'inverse',
   'danger.bold': 'inverse',
   'danger.bold.hovered': 'inverse',
   'danger.bold.pressed': 'inverse',

package/src/components/__tests__/visual-regression/__image_snapshots__/box-snapshot-test-tsx-box-basic-example-should-match-production-example-1-snap.png

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

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

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

package/src/components/__tests__/visual-regression/__image_snapshots__/box-snapshot-test-tsx-box-example-with-background-and-padding-block-should-match-snapshot-1-snap.png

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

package/src/components/__tests__/visual-regression/__image_snapshots__/box-snapshot-test-tsx-box-example-with-background-and-padding-inline-should-match-snapshot-1-snap.png

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

package/src/components/__tests__/visual-regression/__image_snapshots__/box-snapshot-test-tsx-box-example-with-background-and-padding-should-match-snapshot-1-snap.png

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

package/src/components/__tests__/visual-regression/__image_snapshots__/box-snapshot-test-tsx-box-example-with-background-color-should-match-snapshot-1-snap.png

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

package/src/components/__tests__/visual-regression/__image_snapshots__/box-snapshot-test-tsx-box-example-with-border-color-should-match-snapshot-1-snap.png

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

package/src/components/__tests__/visual-regression/__image_snapshots__/box-snapshot-test-tsx-box-example-with-border-should-match-snapshot-1-snap.png

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

package/src/components/__tests__/visual-regression/__image_snapshots__/box-snapshot-test-tsx-box-example-with-layer-should-match-snapshot-1-snap.png

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

package/src/components/__tests__/visual-regression/__image_snapshots__/box-snapshot-test-tsx-box-example-with-shadow-should-match-snapshot-1-snap.png

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

package/src/components/__tests__/visual-regression/__image_snapshots__/text-snapshot-test-tsx-text-example-with-font-sizes-should-match-snapshot-1-snap.png

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

package/src/components/__tests__/visual-regression/__image_snapshots__/text-snapshot-test-tsx-text-example-with-font-weights-should-match-snapshot-1-snap.png

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

package/src/components/__tests__/visual-regression/__image_snapshots__/text-snapshot-test-tsx-text-example-with-line-heights-should-match-snapshot-1-snap.png

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

package/src/components/__tests__/visual-regression/__image_snapshots__/text-snapshot-test-tsx-text-example-with-testing-should-match-snapshot-1-snap.png

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

package/src/components/__tests__/visual-regression/box-snapshot-test.tsx

@@ -1,35 +0,0 @@
-import {
-  getExampleUrl,
-  loadPage,
-  takeElementScreenShot,
-} from '@atlaskit/visual-regression/helper';
-
-describe('Box', () => {
-  [
-    'borderColor',
-    'backgroundColor',
-    'background-and-padding',
-    'background-and-paddingBlock',
-    'background-and-paddingInline',
-    'shadow',
-    'layer',
-  ].forEach((selector) => {
-    it(`example with ${selector} should match snapshot`, async () => {
-      const url = getExampleUrl(
-        'design-system',
-        'ds-explorations',
-        'box',
-        global.__BASEURL__,
-      );
-      const { page } = global;
-
-      await loadPage(page, url);
-
-      const image = await takeElementScreenShot(
-        page,
-        `[data-testid="box-with-${selector}"]`,
-      );
-      expect(image).toMatchProdImageSnapshot();
-    });
-  });
-});

package/src/components/__tests__/visual-regression/text-snapshot-test.tsx

@@ -1,31 +0,0 @@
-import __noop from '@atlaskit/ds-lib/noop';
-import {
-  getExampleUrl,
-  loadPage,
-  takeElementScreenShot,
-} from '@atlaskit/visual-regression/helper';
-
-describe('Text', () => {
-  ['font-sizes', 'font-weights', 'line-heights', 'testing'].forEach(
-    (testId) => {
-      it(`example with ${testId} should match snapshot`, async () => {
-        const url = getExampleUrl(
-          'design-system',
-          'ds-explorations',
-          'text',
-          global.__BASEURL__,
-        );
-        const { page } = global;
-
-        await loadPage(page, url);
-
-        const image = await takeElementScreenShot(
-          page,
-          `[data-testid="${testId}"]`,
-        );
-
-        expect(image).toMatchProdImageSnapshot();
-      });
-    },
-  );
-});