@atlaskit/heading 1.3.7 → 1.4.0

package/report.api.md

@@ -15,43 +15,68 @@
 <!--SECTION START: Main Entry Types-->
 
 ```ts
-import { FC } from 'react';
+import { jsx } from '@emotion/react';
 import { ReactNode } from 'react';
+import { SerializedStyles } from '@emotion/react';
+
+// @public (undocumented)
+const _default: ({ level, variant, ...props }: HeadingProps) => jsx.JSX.Element;
+export default _default;
 
 // @public
-const Heading: FC<HeadingProps>;
-export default Heading;
+export const HeadingContextProvider: ({
+  children,
+  value,
+}: HeadingLevelContextProps) => JSX.Element;
+
+// @public (undocumented)
+type HeadingElement = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
 
 // @public (undocumented)
-interface HeadingContextProps {
-  // (undocumented)
+interface HeadingLevelContextProps {
   children: ReactNode;
   value?: HeadingElement;
 }
 
-// @public
-export const HeadingContextProvider: FC<HeadingContextProps>;
-
-// @public (undocumented)
-type HeadingElement = 1 | 2 | 3 | 4 | 5 | 6;
-
 // @public (undocumented)
 export type HeadingProps = {
   testId?: string;
   children: ReactNode;
-  level:
-    | 'h100'
-    | 'h200'
-    | 'h300'
-    | 'h400'
-    | 'h500'
-    | 'h600'
-    | 'h700'
-    | 'h800'
-    | 'h900';
   id?: string;
   as?: 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span';
   color?: 'default' | 'inverse';
+} & (
+  | {
+      level?:
+        | 'h100'
+        | 'h200'
+        | 'h300'
+        | 'h400'
+        | 'h500'
+        | 'h600'
+        | 'h700'
+        | 'h800'
+        | 'h900';
+      variant?: never;
+    }
+  | {
+      level?: never;
+      variant?: HeadingVariant;
+    }
+);
+
+// @public (undocumented)
+type HeadingVariant = keyof typeof headingVariantStylesMap;
+
+// @public
+const headingVariantStylesMap: {
+  large: SerializedStyles;
+  medium: SerializedStyles;
+  small: SerializedStyles;
+  xlarge: SerializedStyles;
+  xsmall: SerializedStyles;
+  xxlarge: SerializedStyles;
+  xxsmall: SerializedStyles;
 };
 
 // (No @packageDocumentation comment for this package)

package/scripts/codegen.tsx

@@ -0,0 +1,66 @@
+import { writeFileSync } from 'fs';
+import { join } from 'path';
+
+import prettier from 'prettier';
+import parserTypeScript from 'prettier/parser-typescript';
+
+// eslint-disable-next-line import/order
+import { createPartialSignedArtifact } from '@atlassian/codegen';
+
+// eslint-disable-next-line import/order
+import { typography as tokens } from '@atlaskit/tokens/tokens-raw';
+
+const constructTokenFunctionCall = (tokenName: string, fallback: string) => {
+  return `token('${tokenName}', '${fallback}')`;
+};
+
+const headingTokens = tokens
+  .filter(t => t.attributes.group === 'typography')
+  .filter(t => t.cleanName.includes('heading'));
+
+const removeVerbosity = (name: string): string => {
+  return name.replace('font.heading.', '');
+};
+
+export const createTypographyStylesFromTemplate = () => {
+  return (
+    prettier.format(
+      `
+const headingVariantStylesMap = {
+  ${headingTokens
+    .sort((a, b) => (a.name < b.name ? -1 : 1))
+    .map(token => {
+      return `
+        '${removeVerbosity(
+          token.name,
+        )}': css({ font: ${constructTokenFunctionCall(
+        token.cleanName,
+        token.value,
+      )} })
+      `.trim();
+    })
+    .join(',\n\t')}
+};`,
+      {
+        singleQuote: true,
+        trailingComma: 'all',
+        parser: 'typescript',
+        plugins: [parserTypeScript],
+      },
+    ) + `\nexport type HeadingVariant = keyof typeof headingVariantStylesMap;\n`
+  );
+};
+
+const targetPath = join(__dirname, '../', 'src', 'heading.partial.tsx');
+
+writeFileSync(
+  join(__dirname, '../src/heading.partial.tsx'),
+  createPartialSignedArtifact(
+    createTypographyStylesFromTemplate(),
+    'yarn workspace @atlaskit/heading codegen',
+    {
+      id: 'typography',
+      absoluteFilePath: targetPath,
+    },
+  ),
+);

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

@@ -0,0 +1,58 @@
+## 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 { jsx } from '@emotion/react';
+import { ReactNode } from 'react';
+import { SerializedStyles } from '@emotion/react';
+
+// @public (undocumented)
+const _default: ({ level, variant, ...props }: HeadingProps) => jsx.JSX.Element;
+export default _default;
+
+// @public
+export const HeadingContextProvider: ({ children, value, }: HeadingLevelContextProps) => JSX.Element;
+
+// @public (undocumented)
+type HeadingElement = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
+
+// @public (undocumented)
+interface HeadingLevelContextProps {
+    children: ReactNode;
+    value?: HeadingElement;
+}
+
+// @public (undocumented)
+export type HeadingProps = {
+    testId?: string;
+    children: ReactNode;
+    id?: string;
+    as?: 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span';
+    color?: 'default' | 'inverse';
+} & ({
+    level?: 'h100' | 'h200' | 'h300' | 'h400' | 'h500' | 'h600' | 'h700' | 'h800' | 'h900';
+    variant?: never;
+} | {
+    level?: never;
+    variant?: HeadingVariant;
+});
+
+// @public (undocumented)
+type HeadingVariant = keyof typeof headingVariantStylesMap;
+
+// @public
+const headingVariantStylesMap: {
+    large: SerializedStyles;
+    medium: SerializedStyles;
+    small: SerializedStyles;
+    xlarge: SerializedStyles;
+    xsmall: SerializedStyles;
+    xxlarge: SerializedStyles;
+    xxsmall: SerializedStyles;
+};
+
+// (No @packageDocumentation comment for this package)
+
+```

package/dist/cjs/utils.js

@@ -1,10 +0,0 @@
-"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

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

package/dist/es2019/utils.js

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

package/dist/es2019/version.json

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

package/dist/esm/utils.js

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

package/dist/esm/version.json

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

package/dist/types/utils.d.ts

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

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

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