@atlaskit/heading 1.1.2 → 1.1.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/heading
 
+## 1.1.3
+
+### Patch Changes
+
+- [`b6c5779d358`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b6c5779d358) - Internal changes only to restrict usage of `Box` from the primitives package.
+
 ## 1.1.2
 
 ### Patch Changes

package/README.md

@@ -2,6 +2,12 @@
 
 A heading is a typography component used to display text in different sizes and formats.
 
+## Installation
+
+```sh
+yarn add @atlaskit/heading
+```
+
 ## Usage
 
-`import Heading from '@atlaskit/heading';`
+Detailed docs and example usage can be found [here](https://atlassian.design/components/heading/).

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/heading",
-	"version": "1.1.2",
+	"version": "1.1.3",
 	"sideEffects": false
 }

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/heading",
-	"version": "1.1.2",
+	"version": "1.1.3",
 	"sideEffects": false
 }

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/heading",
-	"version": "1.1.2",
+	"version": "1.1.3",
 	"sideEffects": false
 }

package/dist/types/types.d.ts

@@ -3,24 +3,47 @@ export declare type HeadingProps = {
     /**
      * A `testId` prop is provided for specified elements, which is a unique
      * string that appears as a data attribute `data-testid` in the rendered code,
-     * serving as a hook for automated tests
+     * serving as a hook for automated tests.
      */
     testId?: string;
     /**
-     * The text of the heading
+     * The text of the heading.
      */
     children: ReactNode;
     /**
-     * The headling level as defined by by the ADG
+     The headling level as defined by the Atlasian Design [typography foundations](/foundations/typography/).
+     
+     The `level` prop affects the actual HTML element rendered in the DOM:
+     
+     ```
+     const levelMap = {
+        h900: 'h1',
+        h800: 'h1',
+        h700: 'h2',
+        h600: 'h3',
+        h500: 'h4',
+        h400: 'h5',
+        h300: 'h6',
+        h200: 'div',
+        h100: 'div',
+     }
+     ```
+     
+     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.
      */
     level: 'h900' | 'h800' | 'h700' | 'h600' | 'h500' | 'h400' | 'h300' | 'h200' | 'h100';
+    /**
+     * Unique identifier for the heading DOM element.
+     */
     id?: string;
     /**
-     * Allows the component to be rendered as the specified DOM Element
+     * Allows the component to be rendered as the specified DOM element, overriding a default element set by `level` prop.
      */
     as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div' | 'span';
     /**
-     * Text color of the heading.
+     * Text color of the heading. Use `"inverse"` option for a light text color over a dark background.
+     * Defaults to `"default"`.
      */
     color?: 'inverse' | 'default';
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/heading",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "A heading is a typography component used to display text in different sizes and formats.",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -8,14 +8,13 @@
     "registry": "https://registry.npmjs.org/"
   },
   "atlassian": {
-    "disableProductCI": true,
     "team": "Design System Team",
     "releaseModel": "continuous",
     "website": {
       "name": "Heading",
       "category": "Components",
       "status": {
-        "type": "alpha"
+        "type": "beta"
       }
     }
   },
@@ -30,7 +29,7 @@
     ".": "./src/index.tsx"
   },
   "dependencies": {
-    "@atlaskit/tokens": "^1.0.0",
+    "@atlaskit/tokens": "^1.2.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },
@@ -42,7 +41,10 @@
     "@atlaskit/docs": "*",
     "@atlaskit/ds-explorations": "*",
     "@atlaskit/ds-lib": "^2.0.1",
+    "@atlaskit/form": "^8.8.0",
+    "@atlaskit/primitives": "*",
     "@atlaskit/ssr": "*",
+    "@atlaskit/toggle": "^12.5.0",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",
@@ -64,8 +66,10 @@
       ],
       "ui-components": "lite-mode",
       "analytics": "analytics-next",
-      "design-tokens": "spacing",
-      "theming": "tokens",
+      "design-tokens": [
+        "color",
+        "spacing"
+      ],
       "deprecation": "no-deprecated-imports"
     }
   },

package/constellation/index/examples.mdx

@@ -1,13 +0,0 @@
----
-order: 0
----
-
-import HeadingDefault from '../../examples/constellation/heading-default';
-
-## Basic
-
-Implements the Atlassian typography set as a component. The typography `level` can be configured to be one of the below types.
-
-<Example Component={HeadingDefault} packageName="@atlaskit/heading" />
-
-