@atlaskit/heading 0.1.3

package/CHANGELOG.md

@@ -0,0 +1,35 @@
+# @atlaskit/heading
+
+## 0.1.3
+
+### Patch Changes
+
+- Updated dependencies
+
+## 0.1.2
+
+### Patch Changes
+
+- Updated dependencies
+
+## 0.1.1
+
+### Patch Changes
+
+- [`d7a9a4ff7ec`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d7a9a4ff7ec) - Instrumented heading with the new theming package, `@atlaskit/tokens`.
+  New tokens will be visible only in applications configured to use the new Tokens API (currently in alpha).
+  These changes are intended to be interoperable with the legacy theme implementation.
+  Legacy dark mode users should expect no visual or breaking changes.
+- Updated dependencies
+
+## 0.1.0
+
+### Minor Changes
+
+- [`ee15e59ba60`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ee15e59ba60) - This is the initial release of the Heading package. Typography styles have been duplicated from the `@atlaskit/theme` package as standalone components.
+
+### Patch Changes
+
+- [`46816ee8526`](https://bitbucket.org/atlassian/atlassian-frontend/commits/46816ee8526) - Changes heading element mappings to match '@atlaskit/css-reset'.
+- [`f9cd2065648`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f9cd2065648) - Removed redundant styles for text-transform, moved font-size to `rem` insteda of `em`.
+- Updated dependencies

package/LICENSE.md

@@ -0,0 +1,13 @@
+Copyright 2020 Atlassian Pty Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

package/README.md

@@ -0,0 +1,6 @@
+# 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

@@ -0,0 +1,144 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _core = require("@emotion/core");
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _tokens = require("@atlaskit/tokens");
+
+var _utils = require("./utils");
+
+/** @jsx jsx */
+// https://atlassian.design/foundations/typography
+var levelMap = {
+  h900: 'h1',
+  h800: 'h1',
+  h700: 'h2',
+  h600: 'h3',
+  h500: 'h4',
+  h400: 'h5',
+  h300: 'h6',
+  // NB: These two levels are not covered at all by the existing @atlaskit/css-reset
+  h200: 'div',
+  h100: 'div'
+};
+var headingResetStyles = (0, _core.css)({
+  margin: 0
+});
+var h900Styles = (0, _core.css)({
+  color: (0, _tokens.token)('color.text.highEmphasis', _colors.N800),
+  fontSize: "".concat(35 / 14, "rem"),
+  fontWeight: 500,
+  letterSpacing: '-0.01em',
+  lineHeight: (0, _utils.lh)(35, 40)
+});
+var h800Styles = (0, _core.css)({
+  color: (0, _tokens.token)('color.text.highEmphasis', _colors.N800),
+  fontSize: "".concat(29 / 14, "rem"),
+  fontWeight: 600,
+  letterSpacing: '-0.01em',
+  lineHeight: (0, _utils.lh)(29, 32)
+});
+var h700Styles = (0, _core.css)({
+  color: (0, _tokens.token)('color.text.highEmphasis', _colors.N800),
+  fontSize: "".concat(24 / 14, "rem"),
+  fontWeight: 500,
+  letterSpacing: '-0.01em',
+  lineHeight: (0, _utils.lh)(24, 28)
+});
+var h600Styles = (0, _core.css)({
+  color: (0, _tokens.token)('color.text.highEmphasis', _colors.N800),
+  fontSize: "".concat(20 / 14, "rem"),
+  fontWeight: 500,
+  letterSpacing: '-0.008em',
+  lineHeight: (0, _utils.lh)(20, 24)
+});
+var h500Styles = (0, _core.css)({
+  color: (0, _tokens.token)('color.text.highEmphasis', _colors.N800),
+  fontSize: "".concat(16 / 14, "rem"),
+  fontWeight: 600,
+  letterSpacing: '-0.006em',
+  lineHeight: (0, _utils.lh)(16, 20)
+});
+var h400Styles = (0, _core.css)({
+  color: (0, _tokens.token)('color.text.highEmphasis', _colors.N800),
+  fontSize: '1rem',
+  fontWeight: 600,
+  letterSpacing: '-0.003em',
+  lineHeight: (0, _utils.lh)(14, 16)
+});
+var h300Styles = (0, _core.css)({
+  color: (0, _tokens.token)('color.text.highEmphasis', _colors.N800),
+  fontSize: "".concat(12 / 14, "rem"),
+  fontWeight: 600,
+  letterSpacing: 0,
+  lineHeight: (0, _utils.lh)(12, 16),
+  textTransform: 'uppercase'
+});
+var h200Styles = (0, _core.css)({
+  color: (0, _tokens.token)('color.text.lowEmphasis', _colors.N200),
+  fontSize: "".concat(12 / 14, "rem"),
+  fontWeight: 600,
+  letterSpacing: 0,
+  lineHeight: (0, _utils.lh)(12, 16)
+});
+var h100Styles = (0, _core.css)({
+  color: (0, _tokens.token)('color.text.lowEmphasis', _colors.N200),
+  fontSize: "".concat(11 / 14, "rem"),
+  fontWeight: 700,
+  letterSpacing: 0,
+  lineHeight: (0, _utils.lh)(11, 16)
+});
+var styleMap = {
+  h900: h900Styles,
+  h800: h800Styles,
+  h700: h700Styles,
+  h600: h600Styles,
+  h500: h500Styles,
+  h400: h400Styles,
+  h300: h300Styles,
+  h200: h200Styles,
+  h100: h100Styles
+};
+/**
+ * __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>
+ * );
+ * ```
+ */
+
+var Heading = function Heading(_ref) {
+  var children = _ref.children,
+      level = _ref.level,
+      id = _ref.id,
+      testId = _ref.testId,
+      as = _ref.as;
+
+  if (process.env.NODE_ENV !== 'production' && as && typeof as !== 'string') {
+    throw new Error('`as` prop should be a string.');
+  }
+
+  var Markup = as || levelMap[level];
+  return (0, _core.jsx)(Markup, {
+    id: id,
+    "data-testid": testId,
+    css: [headingResetStyles, styleMap[level]]
+  }, children);
+};
+
+var _default = Heading;
+exports.default = _default;

package/dist/cjs/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _heading.default;
+  }
+});
+
+var _heading = _interopRequireDefault(require("./heading"));

package/dist/cjs/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/utils.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.lh = void 0;
+
+var lh = function lh(sizePx, lineHeightPx) {
+  return lineHeightPx / sizePx;
+};
+
+exports.lh = lh;

package/dist/cjs/version.json

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

package/dist/es2019/heading.js

@@ -0,0 +1,132 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { N200, N800 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
+import { lh } from './utils'; // https://atlassian.design/foundations/typography
+
+const levelMap = {
+  h900: 'h1',
+  h800: 'h1',
+  h700: 'h2',
+  h600: 'h3',
+  h500: 'h4',
+  h400: 'h5',
+  h300: 'h6',
+  // NB: These two levels are not covered at all by the existing @atlaskit/css-reset
+  h200: 'div',
+  h100: 'div'
+};
+const headingResetStyles = css({
+  margin: 0
+});
+const h900Styles = css({
+  color: token('color.text.highEmphasis', N800),
+  fontSize: `${35 / 14}rem`,
+  fontWeight: 500,
+  letterSpacing: '-0.01em',
+  lineHeight: lh(35, 40)
+});
+const h800Styles = css({
+  color: token('color.text.highEmphasis', N800),
+  fontSize: `${29 / 14}rem`,
+  fontWeight: 600,
+  letterSpacing: '-0.01em',
+  lineHeight: lh(29, 32)
+});
+const h700Styles = css({
+  color: token('color.text.highEmphasis', N800),
+  fontSize: `${24 / 14}rem`,
+  fontWeight: 500,
+  letterSpacing: '-0.01em',
+  lineHeight: lh(24, 28)
+});
+const h600Styles = css({
+  color: token('color.text.highEmphasis', N800),
+  fontSize: `${20 / 14}rem`,
+  fontWeight: 500,
+  letterSpacing: '-0.008em',
+  lineHeight: lh(20, 24)
+});
+const h500Styles = css({
+  color: token('color.text.highEmphasis', N800),
+  fontSize: `${16 / 14}rem`,
+  fontWeight: 600,
+  letterSpacing: '-0.006em',
+  lineHeight: lh(16, 20)
+});
+const h400Styles = css({
+  color: token('color.text.highEmphasis', N800),
+  fontSize: '1rem',
+  fontWeight: 600,
+  letterSpacing: '-0.003em',
+  lineHeight: lh(14, 16)
+});
+const h300Styles = css({
+  color: token('color.text.highEmphasis', N800),
+  fontSize: `${12 / 14}rem`,
+  fontWeight: 600,
+  letterSpacing: 0,
+  lineHeight: lh(12, 16),
+  textTransform: 'uppercase'
+});
+const h200Styles = css({
+  color: token('color.text.lowEmphasis', N200),
+  fontSize: `${12 / 14}rem`,
+  fontWeight: 600,
+  letterSpacing: 0,
+  lineHeight: lh(12, 16)
+});
+const h100Styles = css({
+  color: token('color.text.lowEmphasis', N200),
+  fontSize: `${11 / 14}rem`,
+  fontWeight: 700,
+  letterSpacing: 0,
+  lineHeight: lh(11, 16)
+});
+const styleMap = {
+  h900: h900Styles,
+  h800: h800Styles,
+  h700: h700Styles,
+  h600: h600Styles,
+  h500: h500Styles,
+  h400: h400Styles,
+  h300: h300Styles,
+  h200: h200Styles,
+  h100: h100Styles
+};
+/**
+ * __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>
+ * );
+ * ```
+ */
+
+const Heading = ({
+  children,
+  level,
+  id,
+  testId,
+  as
+}) => {
+  if (process.env.NODE_ENV !== 'production' && as && typeof as !== 'string') {
+    throw new Error('`as` prop should be a string.');
+  }
+
+  const Markup = as || levelMap[level];
+  return jsx(Markup, {
+    id: id,
+    "data-testid": testId,
+    css: [headingResetStyles, styleMap[level]]
+  }, children);
+};
+
+export default Heading;

package/dist/es2019/index.js

@@ -0,0 +1 @@
+export { default } from './heading';

package/dist/es2019/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/utils.js

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

package/dist/es2019/version.json

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

package/dist/esm/heading.js

@@ -0,0 +1,132 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { N200, N800 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
+import { lh } from './utils'; // https://atlassian.design/foundations/typography
+
+var levelMap = {
+  h900: 'h1',
+  h800: 'h1',
+  h700: 'h2',
+  h600: 'h3',
+  h500: 'h4',
+  h400: 'h5',
+  h300: 'h6',
+  // NB: These two levels are not covered at all by the existing @atlaskit/css-reset
+  h200: 'div',
+  h100: 'div'
+};
+var headingResetStyles = css({
+  margin: 0
+});
+var h900Styles = css({
+  color: token('color.text.highEmphasis', N800),
+  fontSize: "".concat(35 / 14, "rem"),
+  fontWeight: 500,
+  letterSpacing: '-0.01em',
+  lineHeight: lh(35, 40)
+});
+var h800Styles = css({
+  color: token('color.text.highEmphasis', N800),
+  fontSize: "".concat(29 / 14, "rem"),
+  fontWeight: 600,
+  letterSpacing: '-0.01em',
+  lineHeight: lh(29, 32)
+});
+var h700Styles = css({
+  color: token('color.text.highEmphasis', N800),
+  fontSize: "".concat(24 / 14, "rem"),
+  fontWeight: 500,
+  letterSpacing: '-0.01em',
+  lineHeight: lh(24, 28)
+});
+var h600Styles = css({
+  color: token('color.text.highEmphasis', N800),
+  fontSize: "".concat(20 / 14, "rem"),
+  fontWeight: 500,
+  letterSpacing: '-0.008em',
+  lineHeight: lh(20, 24)
+});
+var h500Styles = css({
+  color: token('color.text.highEmphasis', N800),
+  fontSize: "".concat(16 / 14, "rem"),
+  fontWeight: 600,
+  letterSpacing: '-0.006em',
+  lineHeight: lh(16, 20)
+});
+var h400Styles = css({
+  color: token('color.text.highEmphasis', N800),
+  fontSize: '1rem',
+  fontWeight: 600,
+  letterSpacing: '-0.003em',
+  lineHeight: lh(14, 16)
+});
+var h300Styles = css({
+  color: token('color.text.highEmphasis', N800),
+  fontSize: "".concat(12 / 14, "rem"),
+  fontWeight: 600,
+  letterSpacing: 0,
+  lineHeight: lh(12, 16),
+  textTransform: 'uppercase'
+});
+var h200Styles = css({
+  color: token('color.text.lowEmphasis', N200),
+  fontSize: "".concat(12 / 14, "rem"),
+  fontWeight: 600,
+  letterSpacing: 0,
+  lineHeight: lh(12, 16)
+});
+var h100Styles = css({
+  color: token('color.text.lowEmphasis', N200),
+  fontSize: "".concat(11 / 14, "rem"),
+  fontWeight: 700,
+  letterSpacing: 0,
+  lineHeight: lh(11, 16)
+});
+var styleMap = {
+  h900: h900Styles,
+  h800: h800Styles,
+  h700: h700Styles,
+  h600: h600Styles,
+  h500: h500Styles,
+  h400: h400Styles,
+  h300: h300Styles,
+  h200: h200Styles,
+  h100: h100Styles
+};
+/**
+ * __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>
+ * );
+ * ```
+ */
+
+var Heading = function Heading(_ref) {
+  var children = _ref.children,
+      level = _ref.level,
+      id = _ref.id,
+      testId = _ref.testId,
+      as = _ref.as;
+
+  if (process.env.NODE_ENV !== 'production' && as && typeof as !== 'string') {
+    throw new Error('`as` prop should be a string.');
+  }
+
+  var Markup = as || levelMap[level];
+  return jsx(Markup, {
+    id: id,
+    "data-testid": testId,
+    css: [headingResetStyles, styleMap[level]]
+  }, children);
+};
+
+export default Heading;

package/dist/esm/index.js

@@ -0,0 +1 @@
+export { default } from './heading';

package/dist/esm/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/utils.js

@@ -0,0 +1,3 @@
+export var lh = function lh(sizePx, lineHeightPx) {
+  return lineHeightPx / sizePx;
+};

package/dist/esm/version.json

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

package/dist/types/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/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './heading';
+export type { HeadingProps } from './types';

package/dist/types/types.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+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';
+};

package/dist/types/utils.d.ts

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

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@atlaskit/heading",
+  "version": "0.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",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "atlassian": {
+    "team": "Design System Team",
+    "inPublicMirror": false,
+    "releaseModel": "continuous",
+    "website": {
+      "name": "Heading"
+    }
+  },
+  "repository": "https://bitbucket.org/atlassian/atlassian-frontend",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "module:es2019": "dist/es2019/index.js",
+  "types": "dist/types/index.d.ts",
+  "sideEffects": false,
+  "atlaskit:src": "src/index.ts",
+  "af:exports": {
+    ".": "./src/index.ts"
+  },
+  "dependencies": {
+    "@atlaskit/theme": "^12.0.0",
+    "@atlaskit/tokens": "^0.2.0",
+    "@babel/runtime": "^7.0.0",
+    "@emotion/core": "^10.0.9"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0"
+  },
+  "devDependencies": {
+    "@atlaskit/build-utils": "*",
+    "@atlaskit/button": "^16.0.0",
+    "@atlaskit/docs": "*",
+    "@atlaskit/ssr": "*",
+    "@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": "^8.0.1",
+    "react-dom": "^16.8.0",
+    "typescript": "3.9.6",
+    "wait-for-expect": "^1.2.0"
+  },
+  "techstack": {
+    "@atlassian/frontend": {
+      "import-structure": "atlassian-conventions",
+      "circular-dependencies": "file-and-folder-level"
+    },
+    "@repo/internal": {
+      "design-system": "v1",
+      "styling": "emotion",
+      "ui-components": "lite-mode",
+      "analytics": "analytics-next",
+      "theming": "tokens",
+      "deprecation": "no-deprecated-imports"
+    }
+  },
+  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.0"
+}