@atlaskit/heading 0.1.10 → 0.1.13

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/heading
 
+## 0.1.13
+
+### Patch Changes
+
+- [`354050b68da`](https://bitbucket.org/atlassian/atlassian-frontend/commits/354050b68da) - Revert font size calculations to raw pixels.
+
+## 0.1.12
+
+### Patch Changes
+
+- Updated dependencies
+
+## 0.1.11
+
+### Patch Changes
+
+- [`cb2392f6d33`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cb2392f6d33) - Upgrade to TypeScript 4.2.4
+
 ## 0.1.10
 
 ### Patch Changes

package/README.md

@@ -1,6 +1,7 @@
 # Heading
 
 A heading is a typography component used to display text in different sizes and formats.
+
 ## Usage
 
 `import Heading from '@atlaskit/heading';`

package/dist/cjs/heading.js

@@ -30,49 +30,49 @@ var headingResetStyles = (0, _core.css)({
 });
 var h900Styles = (0, _core.css)({
   color: "var(--ds-text, ".concat(_colors.N800, ")"),
-  fontSize: "".concat(35 / 14, "rem"),
+  fontSize: 35,
   fontWeight: 500,
   letterSpacing: '-0.01em',
   lineHeight: (0, _utils.lh)(35, 40)
 });
 var h800Styles = (0, _core.css)({
   color: "var(--ds-text, ".concat(_colors.N800, ")"),
-  fontSize: "".concat(29 / 14, "rem"),
+  fontSize: 29,
   fontWeight: 600,
   letterSpacing: '-0.01em',
   lineHeight: (0, _utils.lh)(29, 32)
 });
 var h700Styles = (0, _core.css)({
   color: "var(--ds-text, ".concat(_colors.N800, ")"),
-  fontSize: "".concat(24 / 14, "rem"),
+  fontSize: 24,
   fontWeight: 500,
   letterSpacing: '-0.01em',
   lineHeight: (0, _utils.lh)(24, 28)
 });
 var h600Styles = (0, _core.css)({
   color: "var(--ds-text, ".concat(_colors.N800, ")"),
-  fontSize: "".concat(20 / 14, "rem"),
+  fontSize: 20,
   fontWeight: 500,
   letterSpacing: '-0.008em',
   lineHeight: (0, _utils.lh)(20, 24)
 });
 var h500Styles = (0, _core.css)({
   color: "var(--ds-text, ".concat(_colors.N800, ")"),
-  fontSize: "".concat(16 / 14, "rem"),
+  fontSize: 16,
   fontWeight: 600,
   letterSpacing: '-0.006em',
   lineHeight: (0, _utils.lh)(16, 20)
 });
 var h400Styles = (0, _core.css)({
   color: "var(--ds-text, ".concat(_colors.N800, ")"),
-  fontSize: '1rem',
+  fontSize: 14,
   fontWeight: 600,
   letterSpacing: '-0.003em',
   lineHeight: (0, _utils.lh)(14, 16)
 });
 var h300Styles = (0, _core.css)({
   color: "var(--ds-text, ".concat(_colors.N800, ")"),
-  fontSize: "".concat(12 / 14, "rem"),
+  fontSize: 12,
   fontWeight: 600,
   letterSpacing: 0,
   lineHeight: (0, _utils.lh)(12, 16),
@@ -80,14 +80,14 @@ var h300Styles = (0, _core.css)({
 });
 var h200Styles = (0, _core.css)({
   color: "var(--ds-text-subtlest, ".concat(_colors.N200, ")"),
-  fontSize: "".concat(12 / 14, "rem"),
+  fontSize: 12,
   fontWeight: 600,
   letterSpacing: 0,
   lineHeight: (0, _utils.lh)(12, 16)
 });
 var h100Styles = (0, _core.css)({
   color: "var(--ds-text-subtlest, ".concat(_colors.N200, ")"),
-  fontSize: "".concat(11 / 14, "rem"),
+  fontSize: 11,
   fontWeight: 700,
   letterSpacing: 0,
   lineHeight: (0, _utils.lh)(11, 16)

package/dist/cjs/version.json

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

package/dist/es2019/heading.js

@@ -20,49 +20,49 @@ const headingResetStyles = css({
 });
 const h900Styles = css({
   color: `var(--ds-text, ${N800})`,
-  fontSize: `${35 / 14}rem`,
+  fontSize: 35,
   fontWeight: 500,
   letterSpacing: '-0.01em',
   lineHeight: lh(35, 40)
 });
 const h800Styles = css({
   color: `var(--ds-text, ${N800})`,
-  fontSize: `${29 / 14}rem`,
+  fontSize: 29,
   fontWeight: 600,
   letterSpacing: '-0.01em',
   lineHeight: lh(29, 32)
 });
 const h700Styles = css({
   color: `var(--ds-text, ${N800})`,
-  fontSize: `${24 / 14}rem`,
+  fontSize: 24,
   fontWeight: 500,
   letterSpacing: '-0.01em',
   lineHeight: lh(24, 28)
 });
 const h600Styles = css({
   color: `var(--ds-text, ${N800})`,
-  fontSize: `${20 / 14}rem`,
+  fontSize: 20,
   fontWeight: 500,
   letterSpacing: '-0.008em',
   lineHeight: lh(20, 24)
 });
 const h500Styles = css({
   color: `var(--ds-text, ${N800})`,
-  fontSize: `${16 / 14}rem`,
+  fontSize: 16,
   fontWeight: 600,
   letterSpacing: '-0.006em',
   lineHeight: lh(16, 20)
 });
 const h400Styles = css({
   color: `var(--ds-text, ${N800})`,
-  fontSize: '1rem',
+  fontSize: 14,
   fontWeight: 600,
   letterSpacing: '-0.003em',
   lineHeight: lh(14, 16)
 });
 const h300Styles = css({
   color: `var(--ds-text, ${N800})`,
-  fontSize: `${12 / 14}rem`,
+  fontSize: 12,
   fontWeight: 600,
   letterSpacing: 0,
   lineHeight: lh(12, 16),
@@ -70,14 +70,14 @@ const h300Styles = css({
 });
 const h200Styles = css({
   color: `var(--ds-text-subtlest, ${N200})`,
-  fontSize: `${12 / 14}rem`,
+  fontSize: 12,
   fontWeight: 600,
   letterSpacing: 0,
   lineHeight: lh(12, 16)
 });
 const h100Styles = css({
   color: `var(--ds-text-subtlest, ${N200})`,
-  fontSize: `${11 / 14}rem`,
+  fontSize: 11,
   fontWeight: 700,
   letterSpacing: 0,
   lineHeight: lh(11, 16)

package/dist/es2019/version.json

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

package/dist/esm/heading.js

@@ -20,49 +20,49 @@ var headingResetStyles = css({
 });
 var h900Styles = css({
   color: "var(--ds-text, ".concat(N800, ")"),
-  fontSize: "".concat(35 / 14, "rem"),
+  fontSize: 35,
   fontWeight: 500,
   letterSpacing: '-0.01em',
   lineHeight: lh(35, 40)
 });
 var h800Styles = css({
   color: "var(--ds-text, ".concat(N800, ")"),
-  fontSize: "".concat(29 / 14, "rem"),
+  fontSize: 29,
   fontWeight: 600,
   letterSpacing: '-0.01em',
   lineHeight: lh(29, 32)
 });
 var h700Styles = css({
   color: "var(--ds-text, ".concat(N800, ")"),
-  fontSize: "".concat(24 / 14, "rem"),
+  fontSize: 24,
   fontWeight: 500,
   letterSpacing: '-0.01em',
   lineHeight: lh(24, 28)
 });
 var h600Styles = css({
   color: "var(--ds-text, ".concat(N800, ")"),
-  fontSize: "".concat(20 / 14, "rem"),
+  fontSize: 20,
   fontWeight: 500,
   letterSpacing: '-0.008em',
   lineHeight: lh(20, 24)
 });
 var h500Styles = css({
   color: "var(--ds-text, ".concat(N800, ")"),
-  fontSize: "".concat(16 / 14, "rem"),
+  fontSize: 16,
   fontWeight: 600,
   letterSpacing: '-0.006em',
   lineHeight: lh(16, 20)
 });
 var h400Styles = css({
   color: "var(--ds-text, ".concat(N800, ")"),
-  fontSize: '1rem',
+  fontSize: 14,
   fontWeight: 600,
   letterSpacing: '-0.003em',
   lineHeight: lh(14, 16)
 });
 var h300Styles = css({
   color: "var(--ds-text, ".concat(N800, ")"),
-  fontSize: "".concat(12 / 14, "rem"),
+  fontSize: 12,
   fontWeight: 600,
   letterSpacing: 0,
   lineHeight: lh(12, 16),
@@ -70,14 +70,14 @@ var h300Styles = css({
 });
 var h200Styles = css({
   color: "var(--ds-text-subtlest, ".concat(N200, ")"),
-  fontSize: "".concat(12 / 14, "rem"),
+  fontSize: 12,
   fontWeight: 600,
   letterSpacing: 0,
   lineHeight: lh(12, 16)
 });
 var h100Styles = css({
   color: "var(--ds-text-subtlest, ".concat(N200, ")"),
-  fontSize: "".concat(11 / 14, "rem"),
+  fontSize: 11,
   fontWeight: 700,
   letterSpacing: 0,
   lineHeight: lh(11, 16)

package/dist/esm/version.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/heading",
-  "version": "0.1.10",
+  "version": "0.1.13",
   "description": "A heading is a typography component used to display text in different sizes and formats.",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -11,10 +11,11 @@
     "team": "Design System Team",
     "releaseModel": "continuous",
     "website": {
-      "name": "Heading"
+      "name": "Heading",
+      "category": "Components"
     }
   },
-  "repository": "https://bitbucket.org/atlassian/atlassian-frontend",
+  "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "module:es2019": "dist/es2019/index.js",
@@ -26,7 +27,7 @@
   },
   "dependencies": {
     "@atlaskit/theme": "^12.1.0",
-    "@atlaskit/tokens": "^0.9.0",
+    "@atlaskit/tokens": "^0.10.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9"
   },
@@ -34,7 +35,7 @@
     "react": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/button": "^16.2.0",
+    "@atlaskit/button": "^16.3.0",
     "@atlaskit/docs": "*",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
@@ -42,7 +43,7 @@
     "@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",
     "@testing-library/react": "^8.0.1",
     "react-dom": "^16.8.0",
-    "typescript": "3.9.10",
+    "typescript": "4.2.4",
     "wait-for-expect": "^1.2.0"
   },
   "techstack": {
@@ -51,6 +52,7 @@
       "circular-dependencies": "file-and-folder-level"
     },
     "@repo/internal": {
+      "dom-events": "use-bind-event-listener",
       "design-system": "v1",
       "styling": [
         "static",
@@ -62,5 +64,6 @@
       "deprecation": "no-deprecated-imports"
     }
   },
+  "homepage": "https://atlaskit.atlassian.com/packages/design-system/heading",
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.0"
 }

package/report.api.md

@@ -0,0 +1,59 @@
+## API Report File for "@atlaskit/heading"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+````ts
+import { FC } from 'react';
+import { ReactNode } from 'react';
+
+/**
+ * __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;
+
+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
+   */
+  testId?: string;
+  /**
+   * The text of the heading
+   */
+  children: ReactNode;
+  /**
+   * The headling level as defined by by the ADG
+   */
+  level:
+    | 'h900'
+    | 'h800'
+    | 'h700'
+    | 'h600'
+    | 'h500'
+    | 'h400'
+    | 'h300'
+    | 'h200'
+    | 'h100';
+  id?: string;
+  /**
+   * Allows the component to be rendered as the specified DOM Element
+   */
+  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div' | 'span';
+};
+
+export {};
+````