@atlaskit/heading 1.3.1 → 1.3.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/heading
 
+## 1.3.3
+
+### Patch Changes
+
+- [`61cb5313358`](https://bitbucket.org/atlassian/atlassian-frontend/commits/61cb5313358) - Removing unused dependencies and dev dependencies
+
+## 1.3.2
+
+### Patch Changes
+
+- [`9d00501a414`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9d00501a414) - Ensure legacy types are published for TS 4.5-4.8
+
 ## 1.3.1
 
 ### Patch Changes

package/dist/cjs/version.json

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

package/dist/es2019/version.json

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

package/dist/esm/version.json

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

package/dist/types-ts4.5/heading-context.d.ts

@@ -0,0 +1,28 @@
+import { FC, ReactNode } from 'react';
+type HeadingElement = 1 | 2 | 3 | 4 | 5 | 6;
+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;
+    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-ts4.5/heading.d.ts

@@ -0,0 +1,20 @@
+/** @jsx jsx */
+import { FC } from 'react';
+import type { HeadingProps } from './types';
+/**
+ * __Heading__
+ *
+ * A heading is a typography component used to display text in different sizes and formats.
+ *
+ * @example
+ *
+ * ```jsx
+ * import Heading from '@atlaskit/heading';
+ *
+ * const H100 = () => (
+ *   <Heading level="h100">h100</Heading>
+ * );
+ * ```
+ */
+declare const Heading: FC<HeadingProps>;
+export default Heading;

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

@@ -0,0 +1,3 @@
+export { default } from './heading';
+export { default as HeadingContextProvider } from './heading-context';
+export type { HeadingProps } from './types';

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

@@ -0,0 +1,49 @@
+import { ReactNode } from 'react';
+export 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.
+     */
+    testId?: string;
+    /**
+     * The text of the heading.
+     */
+    children: ReactNode;
+    /**
+     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, overriding a default element set by `level` prop.
+     */
+    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div' | 'span';
+    /**
+     * Text color of the heading. Use `"inverse"` option for a light text color over a dark background.
+     * Defaults to `"default"`.
+     */
+    color?: 'inverse' | 'default';
+};

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

@@ -0,0 +1 @@
+export declare const lh: (sizePx: number, lineHeightPx: number) => number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/heading",
-  "version": "1.3.1",
+  "version": "1.3.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",
@@ -37,7 +37,7 @@
     ".": "./src/index.tsx"
   },
   "dependencies": {
-    "@atlaskit/tokens": "^1.4.0",
+    "@atlaskit/tokens": "^1.5.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },
@@ -45,8 +45,6 @@
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "devDependencies": {
-    "@atlaskit/button": "^16.7.0",
-    "@atlaskit/docs": "*",
     "@atlaskit/ds-explorations": "*",
     "@atlaskit/ds-lib": "^2.2.0",
     "@atlaskit/form": "^8.11.0",
@@ -54,7 +52,6 @@
     "@atlaskit/ssr": "*",
     "@atlaskit/toggle": "^12.6.0",
     "@atlaskit/visual-regression": "*",
-    "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",
     "@testing-library/react": "^12.1.5",
     "react-dom": "^16.8.0",