@atlaskit/primitives 1.6.0 → 1.6.2

package/dist/types/xcss/style-maps.partial.d.ts

@@ -62,11 +62,11 @@ export type NegativeSpace = keyof typeof negativeSpaceMap;
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::3db44f53b728773bb3ba1473d4567724>>
+ * @codegen <<SignedSource::2d67e9258c01e48d564a26a1e4400b94>>
  * @codegenId colors
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["border", "background", "shadow", "text", "fill", "surface"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::815ddd719715ae06521cad06e1921e40>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::f6a616f7ea03ec40c148fc83050d073b>>
  */
 export declare const borderColorMap: {
     readonly 'color.border': "var(--ds-border)";
@@ -336,6 +336,7 @@ export declare const textColorMap: {
     readonly 'color.text.subtle': "var(--ds-text-subtle)";
     readonly 'color.link': "var(--ds-link)";
     readonly 'color.link.pressed': "var(--ds-link-pressed)";
+    readonly 'color.link.visited': "var(--ds-link-visited)";
 };
 export type TextColor = keyof typeof textColorMap;
 export declare const fillMap: {

package/dist/types-ts4.5/xcss/style-maps.partial.d.ts

@@ -62,11 +62,11 @@ export type NegativeSpace = keyof typeof negativeSpaceMap;
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::3db44f53b728773bb3ba1473d4567724>>
+ * @codegen <<SignedSource::2d67e9258c01e48d564a26a1e4400b94>>
  * @codegenId colors
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["border", "background", "shadow", "text", "fill", "surface"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::815ddd719715ae06521cad06e1921e40>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::f6a616f7ea03ec40c148fc83050d073b>>
  */
 export declare const borderColorMap: {
     readonly 'color.border': "var(--ds-border)";
@@ -336,6 +336,7 @@ export declare const textColorMap: {
     readonly 'color.text.subtle': "var(--ds-text-subtle)";
     readonly 'color.link': "var(--ds-link)";
     readonly 'color.link.pressed': "var(--ds-link-pressed)";
+    readonly 'color.link.visited': "var(--ds-link-visited)";
 };
 export type TextColor = keyof typeof textColorMap;
 export declare const fillMap: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/primitives",
-  "version": "1.6.0",
+  "version": "1.6.2",
   "description": "Primitives are token-backed low-level building blocks.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -108,15 +108,6 @@
           "status": {
             "type": "beta"
           }
-        },
-        {
-          "title": "Heading",
-          "folder": "heading",
-          "slug": "primitives/heading",
-          "id": "@atlaskit/primitives/heading",
-          "status": {
-            "type": "alpha"
-          }
         }
       ]
     }
@@ -125,7 +116,7 @@
     "codegen-styles": "ts-node -r tsconfig-paths/register ./scripts/codegen-styles.tsx"
   },
   "dependencies": {
-    "@atlaskit/tokens": "^1.22.0",
+    "@atlaskit/tokens": "^1.25.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "@emotion/serialize": "^1.1.0",
@@ -191,9 +182,7 @@
     "./stack": "./src/components/stack.tsx",
     "./inline": "./src/components/inline.tsx",
     "./pressable": "./src/components/pressable.tsx",
-    "./heading": "./src/components/heading.tsx",
-    "./heading-context": "./src/components/heading-context.tsx",
     "./responsive": "./src/responsive/index.tsx"
   },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.0"
-}
+}

package/report.api.md

@@ -1081,6 +1081,7 @@ const textColorMap: {
   readonly 'color.text.subtle': 'var(--ds-text-subtle)';
   readonly 'color.link': 'var(--ds-link)';
   readonly 'color.link.pressed': 'var(--ds-link-pressed)';
+  readonly 'color.link.visited': 'var(--ds-link-visited)';
 };
 
 // @public (undocumented)

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

@@ -868,6 +868,7 @@ exports[`@atlaskit/primitives text styles are generated correctly 1`] = `
   'color.text.subtle': token('color.text.subtle', '#42526E'),
   'color.link': token('color.link', '#0052CC'),
   'color.link.pressed': token('color.link.pressed', '#0747A6'),
+  'color.link.visited': token('color.link.visited', '#403294'),
 } as const;
 
 export type TextColor = keyof typeof textColorMap;

package/scripts/typography-codegen-template.tsx

@@ -83,7 +83,7 @@ export const createTypographyStylesFromTemplate = (
 export const ${objectName}Map = {
   ${activeTokens
     .filter(filterFn)
-    .map(t => ({ ...t, name: t.name.replaceAll('.[default]', '') }))
+    .map(t => ({ ...t, name: t.name.replace(/\.\[default\]/g, '') }))
     .sort((a, b) => (a.name < b.name ? -1 : 1))
     .map(token => {
       return `

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

@@ -736,6 +736,7 @@ const textColorMap: {
     readonly 'color.text.subtle': "var(--ds-text-subtle)";
     readonly 'color.link': "var(--ds-link)";
     readonly 'color.link.pressed': "var(--ds-link-pressed)";
+    readonly 'color.link.visited': "var(--ds-link-visited)";
 };
 
 // @public (undocumented)

package/constellation/heading/code.mdx

@@ -1,19 +0,0 @@
----
-title: Heading
-description: A heading is a typography component used to display text in different sizes and formats.
-order: 1
----
-
-import { CodeDocsHeader } from '@af/design-system-docs-ui';
-
-<CodeDocsHeader
-  name="@atlaskit/primitives"
-  repository="https://bitbucket.org/atlassian/atlassian-frontend-mirror"
-  directoryName="primitives"
-/>
-
-import ERTHeading from '!!extract-react-types-loader!../../extract-react-types/heading-props'
-
-## Props
-
-<PropsTable heading="" props={ERTHeading} />

package/constellation/heading/examples.mdx

@@ -1,28 +0,0 @@
----
-title: Heading
-description: A heading is a typography component used to display text in different sizes and formats.
-order: 0
----
-
-import HeadingDefault from '../../examples/constellation/heading/heading-default';
-import HeadingInverse from '../../examples/constellation/heading/heading-inverse';
-
-## Basic
-
-Implements the [Atlassian typography set](/foundations/typography/) as a component.
-
-A selected `level` will affect the final HTML element rendered in the DOM.
-It's important to note that the final DOM may be impacted by the parent heading level context
-because of inferred accessibility level correction. Therefore, it is recommended to check the final
-DOM to confirm the actual rendered HTML element.
-
-The typography `level` can be configured to one of the following types.
-
-<Example Component={HeadingDefault} packageName="@atlaskit/heading" />
-
-## Inverse
-
-Set `color` to change the text color of the heading. Use `color="inverse"` for headings placed on a dark
-surface for better color contrast.
-
-<Example Component={HeadingInverse} packageName="@atlaskit/heading" />

package/constellation/heading/usage.mdx

@@ -1,21 +0,0 @@
----
-title: Heading
-description: A heading is a typography component used to display text in different sizes and formats.
-order: 2
----
-
-## Usage
-
-Use headings to create section and subsection titles on a page.
-
-## Accessibility
-
-Nest headings by their rank (or level).
-
-The most important heading has the rank 1 (`<h1>`), the least important heading rank 6 (`<h6>`).
-Headings with an equal or higher rank start a new section, headings with a lower rank start new subsections that are part of the higher ranked section.
-There should **only be one rank 1 (`<h1>`) heading per page** consisting of the name or main purpose of the overall site/platform.
-
-Skipping heading ranks can be confusing and should be avoided where possible: make sure that a `<h2>` is **not** followed directly by an `<h4>`, for example.
-It is ok to skip ranks when closing subsections, for instance, a `<h2>` beginning a new section, can follow an `<h4>` as it closes the previous section.
-

package/dist/cjs/components/heading-context.js

@@ -1,44 +0,0 @@
-"use strict";
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useHeadingElement = exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-// Allows support for heading levels 1-9 via aria-level
-
-var HeadingContext = /*#__PURE__*/(0, _react.createContext)(0);
-var useHeadingElement = function useHeadingElement() {
-  return (0, _react.useContext)(HeadingContext);
-};
-exports.useHeadingElement = useHeadingElement;
-/**
- * __Heading context__
- *
- * The HeadingContext
- *
- * @example
- * ```tsx
- * // Will correctly infer the heading level
- * <HeadingContext value={1}>
- *  <Heading>H1</Heading>
- *  <HeadingContext>
- *    <Heading>H2</Heading>
- *  </HeadingContext>
- * </HeadingContext>
- * ```
- */
-var HeadingContextProvider = function HeadingContextProvider(_ref) {
-  var children = _ref.children,
-    value = _ref.value;
-  var parentHeadingLevel = useHeadingElement();
-  var headingLevel = parentHeadingLevel + 1;
-  return /*#__PURE__*/_react.default.createElement(HeadingContext.Provider, {
-    value: value || headingLevel
-  }, children);
-};
-var _default = HeadingContextProvider;
-exports.default = _default;

package/dist/cjs/components/heading.js

@@ -1,95 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("@emotion/react");
-var _headingContext = require("./heading-context");
-/** @jsx jsx */
-
-// https://atlassian.design/foundations/typography
-var levelMap = {
-  xxl: 'h1',
-  xl: 'h2',
-  lg: 'h3',
-  md: 'h4',
-  sm: 'h5',
-  xs: 'h6',
-  xxs: 'div'
-};
-var headingResetStyles = (0, _react.css)({
-  color: "var(--ds-text, #172B4D)",
-  letterSpacing: 'normal',
-  marginBlock: 0,
-  textTransform: 'none'
-});
-var headingStylesMap = {
-  xxl: (0, _react.css)({
-    font: "var(--ds-font-heading-xxl, inherit)"
-  }),
-  xl: (0, _react.css)({
-    font: "var(--ds-font-heading-xl, inherit)"
-  }),
-  lg: (0, _react.css)({
-    font: "var(--ds-font-heading-lg, inherit)"
-  }),
-  md: (0, _react.css)({
-    font: "var(--ds-font-heading-md, inherit)"
-  }),
-  sm: (0, _react.css)({
-    font: "var(--ds-font-heading-sm, inherit)"
-  }),
-  xs: (0, _react.css)({
-    font: "var(--ds-font-heading-xs, inherit)"
-  }),
-  xxs: (0, _react.css)({
-    font: "var(--ds-font-heading-xxs, inherit)"
-  })
-};
-var inverseStyles = (0, _react.css)({
-  color: "var(--ds-text-inverse, #FFF)"
-});
-/**
- * __Heading__
- *
- * A heading is a typography component used to display text in different sizes and formats.
- *
- * @example
- *
- * ```jsx
- * import Heading from '@atlaskit/heading';
- *
- * const HeadingXXL = () => (
- *   <Heading level="xxl">XXL</Heading>
- * );
- * ```
- */
-var Heading = function Heading(_ref) {
-  var children = _ref.children,
-    level = _ref.level,
-    id = _ref.id,
-    testId = _ref.testId,
-    as = _ref.as,
-    _ref$color = _ref.color,
-    color = _ref$color === void 0 ? 'default' : _ref$color;
-  if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && as && typeof as !== 'string') {
-    throw new Error('`as` prop should be a string.');
-  }
-  var hLevel = (0, _headingContext.useHeadingElement)();
-  /**
-   * Order here is important, we for now apply
-   * 1. user choice
-   * 2. inferred a11y level
-   * 3. default final fallback
-   */
-  var Markup = as || hLevel && (hLevel > 6 ? 'div' : "h".concat(hLevel)) || levelMap[level];
-  return (0, _react.jsx)(Markup, {
-    id: id,
-    "data-testid": testId,
-    role: Markup === 'div' ? 'heading' : undefined,
-    css: [headingResetStyles, level && headingStylesMap[level], color === 'inverse' && inverseStyles]
-  }, children);
-};
-var _default = Heading;
-exports.default = _default;

package/dist/es2019/components/heading-context.js

@@ -1,35 +0,0 @@
-import React, { createContext, useContext } from 'react';
-
-// Allows support for heading levels 1-9 via aria-level
-
-const HeadingContext = /*#__PURE__*/createContext(0);
-export const useHeadingElement = () => {
-  return useContext(HeadingContext);
-};
-/**
- * __Heading context__
- *
- * The HeadingContext
- *
- * @example
- * ```tsx
- * // Will correctly infer the heading level
- * <HeadingContext value={1}>
- *  <Heading>H1</Heading>
- *  <HeadingContext>
- *    <Heading>H2</Heading>
- *  </HeadingContext>
- * </HeadingContext>
- * ```
- */
-const HeadingContextProvider = ({
-  children,
-  value
-}) => {
-  const parentHeadingLevel = useHeadingElement();
-  const headingLevel = parentHeadingLevel + 1;
-  return /*#__PURE__*/React.createElement(HeadingContext.Provider, {
-    value: value || headingLevel
-  }, children);
-};
-export default HeadingContextProvider;

package/dist/es2019/components/heading.js

@@ -1,87 +0,0 @@
-/** @jsx jsx */
-import { css, jsx } from '@emotion/react';
-import { useHeadingElement } from './heading-context';
-// https://atlassian.design/foundations/typography
-const levelMap = {
-  xxl: 'h1',
-  xl: 'h2',
-  lg: 'h3',
-  md: 'h4',
-  sm: 'h5',
-  xs: 'h6',
-  xxs: 'div'
-};
-const headingResetStyles = css({
-  color: "var(--ds-text, #172B4D)",
-  letterSpacing: 'normal',
-  marginBlock: 0,
-  textTransform: 'none'
-});
-const headingStylesMap = {
-  xxl: css({
-    font: "var(--ds-font-heading-xxl, inherit)"
-  }),
-  xl: css({
-    font: "var(--ds-font-heading-xl, inherit)"
-  }),
-  lg: css({
-    font: "var(--ds-font-heading-lg, inherit)"
-  }),
-  md: css({
-    font: "var(--ds-font-heading-md, inherit)"
-  }),
-  sm: css({
-    font: "var(--ds-font-heading-sm, inherit)"
-  }),
-  xs: css({
-    font: "var(--ds-font-heading-xs, inherit)"
-  }),
-  xxs: css({
-    font: "var(--ds-font-heading-xxs, inherit)"
-  })
-};
-const inverseStyles = css({
-  color: "var(--ds-text-inverse, #FFF)"
-});
-/**
- * __Heading__
- *
- * A heading is a typography component used to display text in different sizes and formats.
- *
- * @example
- *
- * ```jsx
- * import Heading from '@atlaskit/heading';
- *
- * const HeadingXXL = () => (
- *   <Heading level="xxl">XXL</Heading>
- * );
- * ```
- */
-const Heading = ({
-  children,
-  level,
-  id,
-  testId,
-  as,
-  color = 'default'
-}) => {
-  if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && as && typeof as !== 'string') {
-    throw new Error('`as` prop should be a string.');
-  }
-  const hLevel = useHeadingElement();
-  /**
-   * Order here is important, we for now apply
-   * 1. user choice
-   * 2. inferred a11y level
-   * 3. default final fallback
-   */
-  const Markup = as || hLevel && (hLevel > 6 ? 'div' : `h${hLevel}`) || levelMap[level];
-  return jsx(Markup, {
-    id: id,
-    "data-testid": testId,
-    role: Markup === 'div' ? 'heading' : undefined,
-    css: [headingResetStyles, level && headingStylesMap[level], color === 'inverse' && inverseStyles]
-  }, children);
-};
-export default Heading;

package/dist/esm/components/heading-context.js

@@ -1,34 +0,0 @@
-import React, { createContext, useContext } from 'react';
-
-// Allows support for heading levels 1-9 via aria-level
-
-var HeadingContext = /*#__PURE__*/createContext(0);
-export var useHeadingElement = function useHeadingElement() {
-  return useContext(HeadingContext);
-};
-/**
- * __Heading context__
- *
- * The HeadingContext
- *
- * @example
- * ```tsx
- * // Will correctly infer the heading level
- * <HeadingContext value={1}>
- *  <Heading>H1</Heading>
- *  <HeadingContext>
- *    <Heading>H2</Heading>
- *  </HeadingContext>
- * </HeadingContext>
- * ```
- */
-var HeadingContextProvider = function HeadingContextProvider(_ref) {
-  var children = _ref.children,
-    value = _ref.value;
-  var parentHeadingLevel = useHeadingElement();
-  var headingLevel = parentHeadingLevel + 1;
-  return /*#__PURE__*/React.createElement(HeadingContext.Provider, {
-    value: value || headingLevel
-  }, children);
-};
-export default HeadingContextProvider;

package/dist/esm/components/heading.js

@@ -1,87 +0,0 @@
-/** @jsx jsx */
-import { css, jsx } from '@emotion/react';
-import { useHeadingElement } from './heading-context';
-// https://atlassian.design/foundations/typography
-var levelMap = {
-  xxl: 'h1',
-  xl: 'h2',
-  lg: 'h3',
-  md: 'h4',
-  sm: 'h5',
-  xs: 'h6',
-  xxs: 'div'
-};
-var headingResetStyles = css({
-  color: "var(--ds-text, #172B4D)",
-  letterSpacing: 'normal',
-  marginBlock: 0,
-  textTransform: 'none'
-});
-var headingStylesMap = {
-  xxl: css({
-    font: "var(--ds-font-heading-xxl, inherit)"
-  }),
-  xl: css({
-    font: "var(--ds-font-heading-xl, inherit)"
-  }),
-  lg: css({
-    font: "var(--ds-font-heading-lg, inherit)"
-  }),
-  md: css({
-    font: "var(--ds-font-heading-md, inherit)"
-  }),
-  sm: css({
-    font: "var(--ds-font-heading-sm, inherit)"
-  }),
-  xs: css({
-    font: "var(--ds-font-heading-xs, inherit)"
-  }),
-  xxs: css({
-    font: "var(--ds-font-heading-xxs, inherit)"
-  })
-};
-var inverseStyles = css({
-  color: "var(--ds-text-inverse, #FFF)"
-});
-/**
- * __Heading__
- *
- * A heading is a typography component used to display text in different sizes and formats.
- *
- * @example
- *
- * ```jsx
- * import Heading from '@atlaskit/heading';
- *
- * const HeadingXXL = () => (
- *   <Heading level="xxl">XXL</Heading>
- * );
- * ```
- */
-var Heading = function Heading(_ref) {
-  var children = _ref.children,
-    level = _ref.level,
-    id = _ref.id,
-    testId = _ref.testId,
-    as = _ref.as,
-    _ref$color = _ref.color,
-    color = _ref$color === void 0 ? 'default' : _ref$color;
-  if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && as && typeof as !== 'string') {
-    throw new Error('`as` prop should be a string.');
-  }
-  var hLevel = useHeadingElement();
-  /**
-   * Order here is important, we for now apply
-   * 1. user choice
-   * 2. inferred a11y level
-   * 3. default final fallback
-   */
-  var Markup = as || hLevel && (hLevel > 6 ? 'div' : "h".concat(hLevel)) || levelMap[level];
-  return jsx(Markup, {
-    id: id,
-    "data-testid": testId,
-    role: Markup === 'div' ? 'heading' : undefined,
-    css: [headingResetStyles, level && headingStylesMap[level], color === 'inverse' && inverseStyles]
-  }, children);
-};
-export default Heading;

package/dist/types/components/heading-context.d.ts

@@ -1,31 +0,0 @@
-import { FC, ReactNode } from 'react';
-type HeadingElement = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
-export declare const useHeadingElement: () => HeadingElement;
-export interface HeadingContextProps {
-    /**
-     * Optional - only apply this value if the intent is to reset the heading context outside the normal content flow, for example inside a `section`.
-     */
-    value?: HeadingElement;
-    /**
-     * Semantic heirarchy of content below the heading context.
-     */
-    children: ReactNode;
-}
-/**
- * __Heading context__
- *
- * The HeadingContext
- *
- * @example
- * ```tsx
- * // Will correctly infer the heading level
- * <HeadingContext value={1}>
- *  <Heading>H1</Heading>
- *  <HeadingContext>
- *    <Heading>H2</Heading>
- *  </HeadingContext>
- * </HeadingContext>
- * ```
- */
-declare const HeadingContextProvider: FC<HeadingContextProps>;
-export default HeadingContextProvider;

package/dist/types/components/heading.d.ts

@@ -1,45 +0,0 @@
-/// <reference types="react" />
-/** @jsx jsx */
-import { jsx } from '@emotion/react';
-import { BasePrimitiveProps } from './types';
-export type TypographyLevel = 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs' | 'xxs';
-type HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div';
-export type HeadingProps = {
-    /**
-     * The heading text for the element.
-     */
-    children: React.ReactNode;
-    /**
-     * The HTML element to render.
-     */
-    as?: HeadingElement;
-    /**
-     * The HTML id attribute.
-     */
-    id?: string;
-    /**
-     * The level of the heading element.
-     */
-    level: TypographyLevel;
-    /**
-     * The color of the heading text.
-     */
-    color?: 'default' | 'inverse';
-} & Pick<BasePrimitiveProps, 'testId'>;
-/**
- * __Heading__
- *
- * A heading is a typography component used to display text in different sizes and formats.
- *
- * @example
- *
- * ```jsx
- * import Heading from '@atlaskit/heading';
- *
- * const HeadingXXL = () => (
- *   <Heading level="xxl">XXL</Heading>
- * );
- * ```
- */
-declare const Heading: ({ children, level, id, testId, as, color, }: HeadingProps) => jsx.JSX.Element;
-export default Heading;