@atlaskit/primitives 2.1.0 → 3.1.0

package/extract-react-types/anchor-props.tsx

@@ -0,0 +1,103 @@
+// TODO: Switch from ERT to ts-morph when this is completed and has reasonable adoption: https://product-fabric.atlassian.net/browse/DSP-10364
+import React, { ReactNode } from 'react';
+
+import { BasePrimitiveProps, StyleProp } from '../src/components/types';
+
+// eslint-disable-next-line @typescript-eslint/no-namespace
+namespace Token {
+  // BoxProps['backgroundColor'] uses keyof, which ERT does not understand
+  export type BackgroundColor = 'BackgroundColor';
+}
+
+type Space =
+  | 'space.0'
+  | 'space.025'
+  | 'space.050'
+  | 'space.075'
+  | 'space.100'
+  | 'space.150'
+  | 'space.200'
+  | 'space.250'
+  | 'space.300'
+  | 'space.400'
+  | 'space.500'
+  | 'space.600'
+  | 'space.800'
+  | 'space.1000';
+
+export default function Anchor<
+  RouterLinkConfig extends Record<string, any> = never,
+>(
+  _: {
+    /**
+     * A link can be provided as a string. If a router link configuration is set
+     * it can be mapped to the underlying router link component,
+     * or optionally a custom object defined in the generic type for advanced use.
+     */
+    href: string | RouterLinkConfig;
+
+    /**
+     * The `target` attribute of the anchor HTML element. Defaults to `_blank` for external links.
+     */
+    target?: React.AnchorHTMLAttributes<HTMLAnchorElement>['target'];
+
+    /**
+     * The `rel` attribute of the anchor HTML element. Defaults to `noopener noreferrer` for external links.
+     */
+    rel?: React.AnchorHTMLAttributes<HTMLAnchorElement>['rel'];
+
+    /**
+     * Tokens representing CSS shorthand for `paddingBlock` and `paddingInline` together.
+     */
+    padding?: Space;
+
+    /**
+     * Tokens representing CSS shorthand `paddingBlock`.
+     */
+    paddingBlock?: Space;
+
+    /**
+     * Tokens representing CSS `paddingBlockStart`.
+     */
+    paddingBlockStart?: Space;
+
+    /**
+     * Tokens representing CSS `paddingBlockEnd`.
+     */
+    paddingBlockEnd?: Space;
+
+    /**
+     * Tokens representing CSS shorthand `paddingInline`.
+     */
+    paddingInline?: Space;
+
+    /**
+     * Tokens representing CSS `paddingInlineStart`.
+     */
+    paddingInlineStart?: Space;
+
+    /**
+     * Tokens representing CSS `paddingInlineEnd`.
+     */
+    paddingInlineEnd?: Space;
+
+    /**
+     * A token alias for background color. See:<br>
+     * [https://atlassian.design/components/tokens/all-tokens#color-background](https://atlassian.design/components/tokens/all-tokens#color-background)<br>
+     * When the background color is set to a [surface token](/components/tokens/all-tokens#elevation-surface),
+     * the [current surface](/components/tokens/code#current-surface-color) CSS variable will also be set to this value in the Box styles.
+     */
+    backgroundColor?: Token.BackgroundColor;
+
+    /**
+     * Elements to be rendered inside the primitive.
+     */
+    children: ReactNode;
+
+    /**
+     * Forwarded ref element.
+     */
+    ref?: React.ComponentPropsWithRef<'a'>['ref'];
+  } & BasePrimitiveProps &
+    StyleProp,
+) {}

package/extract-react-types/pressable-props.tsx

@@ -0,0 +1,94 @@
+// TODO: Switch from ERT to ts-morph when this is completed and has reasonable adoption: https://product-fabric.atlassian.net/browse/DSP-10364
+import React, { ReactNode } from 'react';
+
+import { BasePrimitiveProps, StyleProp } from '../src/components/types';
+
+// eslint-disable-next-line @typescript-eslint/no-namespace
+namespace Token {
+  // BoxProps['backgroundColor'] uses keyof, which ERT does not understand
+  export type BackgroundColor = 'BackgroundColor';
+}
+
+type Space =
+  | 'space.0'
+  | 'space.025'
+  | 'space.050'
+  | 'space.075'
+  | 'space.100'
+  | 'space.150'
+  | 'space.200'
+  | 'space.250'
+  | 'space.300'
+  | 'space.400'
+  | 'space.500'
+  | 'space.600'
+  | 'space.800'
+  | 'space.1000';
+
+export default function Pressable(
+  _: {
+    /**
+     * Controls whether the button is disabled.
+     */
+    isDisabled?: boolean;
+
+    /**
+     * The `type` attribute of the Button HTML element. Defaults to `button`.
+     */
+    type?: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];
+
+    /**
+     * Tokens representing CSS shorthand for `paddingBlock` and `paddingInline` together.
+     */
+    padding?: Space;
+
+    /**
+     * Tokens representing CSS shorthand `paddingBlock`.
+     */
+    paddingBlock?: Space;
+
+    /**
+     * Tokens representing CSS `paddingBlockStart`.
+     */
+    paddingBlockStart?: Space;
+
+    /**
+     * Tokens representing CSS `paddingBlockEnd`.
+     */
+    paddingBlockEnd?: Space;
+
+    /**
+     * Tokens representing CSS shorthand `paddingInline`.
+     */
+    paddingInline?: Space;
+
+    /**
+     * Tokens representing CSS `paddingInlineStart`.
+     */
+    paddingInlineStart?: Space;
+
+    /**
+     * Tokens representing CSS `paddingInlineEnd`.
+     */
+    paddingInlineEnd?: Space;
+
+    /**
+     * A token alias for background color. See:<br>
+     * [https://atlassian.design/components/tokens/all-tokens#color-background](https://atlassian.design/components/tokens/all-tokens#color-background)<br>
+     * When the background color is set to a [surface token](/components/tokens/all-tokens#elevation-surface),
+     * the [current surface](/components/tokens/code#current-surface-color) CSS variable will also be set to this value in the Box styles.
+     */
+    backgroundColor?: Token.BackgroundColor;
+
+    /**
+     * Elements to be rendered inside the primitive.
+     */
+    children: ReactNode;
+
+    /**
+     * Forwarded ref element.
+     */
+    ref?: React.ComponentPropsWithRef<'button'>['ref'];
+  } & BasePrimitiveProps &
+    StyleProp,
+) {}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/primitives",
-  "version": "2.1.0",
+  "version": "3.1.0",
   "description": "Primitives are token-backed low-level building blocks.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -96,6 +96,24 @@
           "status": {
             "type": "closed-beta"
           }
+        },
+        {
+          "title": "Pressable",
+          "folder": "pressable",
+          "slug": "primitives/pressable",
+          "id": "@atlaskit/primitives/pressable",
+          "status": {
+            "type": "alpha"
+          }
+        },
+        {
+          "title": "Anchor",
+          "folder": "anchor",
+          "slug": "primitives/anchor",
+          "id": "@atlaskit/primitives/anchor",
+          "status": {
+            "type": "alpha"
+          }
         }
       ]
     }
@@ -174,7 +192,7 @@
     "./inline": "./src/components/inline.tsx",
     "./text": "./src/components/text.tsx",
     "./pressable": "./src/components/pressable.tsx",
-    "./link": "./src/components/link.tsx",
+    "./anchor": "./src/components/anchor.tsx",
     "./responsive": "./src/responsive/index.tsx"
   },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.0"

package/link/package.json

@@ -1,15 +0,0 @@
-{
-  "name": "@atlaskit/primitives/link",
-  "main": "../dist/cjs/components/link.js",
-  "module": "../dist/esm/components/link.js",
-  "module:es2019": "../dist/es2019/components/link.js",
-  "sideEffects": false,
-  "types": "../dist/types/components/link.d.ts",
-  "typesVersions": {
-    ">=4.5 <4.9": {
-      "*": [
-        "../dist/types-ts4.5/components/link.d.ts"
-      ]
-    }
-  }
-}