@atlaskit/primitives 1.0.2 → 1.0.3

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

@@ -0,0 +1,80 @@
+import { ElementType, ReactNode } from 'react';
+
+import { BasePrimitiveProps } from '../src/components/types';
+
+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';
+
+type FlexProps<T extends ElementType = 'div'> = {
+  /**
+   * The DOM element to render as the Flex. Defaults to `div`.
+   */
+  as?: 'div' | 'span' | 'ul' | 'ol' | 'li';
+
+  /**
+   * Used to align children along the main axis.
+   */
+  justifyContent?:
+    | 'start'
+    | 'center'
+    | 'end'
+    | 'space-between'
+    | 'space-around'
+    | 'space-evenly'
+    | 'stretch';
+
+  /**
+   * Used to align children along the cross axis.
+   */
+  alignItems?: 'start' | 'center' | 'end' | 'baseline' | 'stretch';
+
+  /**
+   * Represents the space between each child.
+   */
+  columnGap?: Space;
+
+  /**
+   * Represents the space between each child.
+   */
+  gap?: Space;
+
+  /**
+   * Represents the space between each child.
+   */
+  rowGap?: Space;
+
+  /**
+   * Represents the flex direction property of CSS flexbox.
+   */
+  direction?: 'row' | 'column';
+
+  /**
+   * Represents the flex wrap property of CSS flexbox.
+   */
+  wrap?: 'wrap' | 'nowrap';
+
+  /**
+   * Elements to be rendered inside the Flex.
+   */
+  children: ReactNode;
+
+  /**
+   * Forwarded ref element
+   */
+  ref?: React.ComponentPropsWithRef<T>['ref'];
+} & BasePrimitiveProps;
+
+export default function Flex(_: FlexProps) {}

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

@@ -0,0 +1,102 @@
+import { ElementType, ReactNode } from 'react';
+
+import { BasePrimitiveProps } from '../src/components/types';
+
+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';
+
+type GridProps<T extends ElementType = 'div'> = {
+  /**
+   * The DOM element to render as the Flex. Defaults to `div`.
+   */
+  as?: 'div' | 'span' | 'ul' | 'ol' | 'li';
+
+  /**
+   * Used to align children along the main axis.
+   */
+  justifyContent?:
+    | 'start'
+    | 'center'
+    | 'end'
+    | 'space-between'
+    | 'space-around'
+    | 'space-evenly'
+    | 'stretch';
+
+  /**
+   * Used to align children along the cross axis.
+   */
+  alignItems?: 'start' | 'center' | 'end' | 'baseline' | 'stretch';
+
+  /**
+   * Represents the space between each child.
+   */
+  columnGap?: Space;
+
+  /**
+   * Represents the space between each child.
+   */
+  gap?: Space;
+
+  /**
+   * Represents the space between each child.
+   */
+  rowGap?: Space;
+
+  /**
+   * Specifies how auto-placed items get flowed into the grid. CSS `grid-auto-flow`.
+   */
+  autoFlow?: string;
+
+  /**
+   * CSS `grid-template-rows`.
+   */
+  templateRows?: string;
+
+  /**
+   * CSS `grid-template-columns`.
+   */
+  templateColumns?: string;
+
+  /**
+   * CSS `grid-template-areas`.
+   *
+   * Each item in the passed array is a grid row.
+   */
+  templateAreas?: string[];
+
+  /**
+   * Represents the flex direction property of CSS flexbox.
+   */
+  direction?: 'row' | 'column';
+
+  /**
+   * Represents the flex wrap property of CSS flexbox.
+   */
+  wrap?: 'wrap' | 'nowrap';
+
+  /**
+   * Elements to be rendered inside the Flex.
+   */
+  children: ReactNode;
+
+  /**
+   * Forwarded ref element
+   */
+  ref?: React.ComponentPropsWithRef<T>['ref'];
+} & BasePrimitiveProps;
+
+export default function Grid(_: GridProps) {}

package/package.json

@@ -1,14 +1,19 @@
 {
   "name": "@atlaskit/primitives",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Primitives are token-backed low-level building blocks.",
-  "author": "Atlassian Pty Ltd",
-  "license": "Apache-2.0",
-  "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
-  "homepage": "https://atlassian.design/components/primitives",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
+  "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
+  "author": "Atlassian Pty Ltd",
+  "license": "Apache-2.0",
+  "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.tsx",
   "atlassian": {
     "team": "Design System Team",
     "inPublicMirror": false,
@@ -98,30 +103,9 @@
   "scripts": {
     "codegen-styles": "ts-node -r tsconfig-paths/register ./scripts/codegen-styles.tsx"
   },
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "module:es2019": "dist/es2019/index.js",
-  "types": "dist/types/index.d.ts",
-  "typesVersions": {
-    ">=4.5 <4.9": {
-      "*": [
-        "dist/types-ts4.5/*",
-        "dist/types-ts4.5/index.d.ts"
-      ]
-    }
-  },
-  "sideEffects": false,
-  "atlaskit:src": "src/index.tsx",
-  "af:exports": {
-    ".": "./src/index.tsx",
-    "./box": "./src/components/box.tsx",
-    "./stack": "./src/components/stack.tsx",
-    "./inline": "./src/components/inline.tsx",
-    "./responsive": "./src/responsive/index.tsx"
-  },
   "dependencies": {
     "@atlaskit/focus-ring": "^1.3.0",
-    "@atlaskit/tokens": "^1.11.0",
+    "@atlaskit/tokens": "^1.13.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "@emotion/serialize": "^1.1.0",
@@ -171,5 +155,21 @@
       ]
     }
   },
+  "homepage": "https://atlassian.design/components/primitives",
+  "typesVersions": {
+    ">=4.5 <4.9": {
+      "*": [
+        "dist/types-ts4.5/*",
+        "dist/types-ts4.5/index.d.ts"
+      ]
+    }
+  },
+  "af:exports": {
+    ".": "./src/index.tsx",
+    "./box": "./src/components/box.tsx",
+    "./stack": "./src/components/stack.tsx",
+    "./inline": "./src/components/inline.tsx",
+    "./responsive": "./src/responsive/index.tsx"
+  },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.0"
 }

package/report.api.md

@@ -160,9 +160,15 @@ const backgroundColorMap: {
   readonly 'color.background.selected.bold': 'var(--ds-background-selected-bold)';
   readonly 'color.background.selected.bold.hovered': 'var(--ds-background-selected-bold-hovered)';
   readonly 'color.background.selected.bold.pressed': 'var(--ds-background-selected-bold-pressed)';
+  readonly 'color.background.brand.subtlest': 'var(--ds-background-brand-subtlest)';
+  readonly 'color.background.brand.subtlest.hovered': 'var(--ds-background-brand-subtlest-hovered)';
+  readonly 'color.background.brand.subtlest.pressed': 'var(--ds-background-brand-subtlest-pressed)';
   readonly 'color.background.brand.bold': 'var(--ds-background-brand-bold)';
   readonly 'color.background.brand.bold.hovered': 'var(--ds-background-brand-bold-hovered)';
   readonly 'color.background.brand.bold.pressed': 'var(--ds-background-brand-bold-pressed)';
+  readonly 'color.background.brand.boldest': 'var(--ds-background-brand-boldest)';
+  readonly 'color.background.brand.boldest.hovered': 'var(--ds-background-brand-boldest-hovered)';
+  readonly 'color.background.brand.boldest.pressed': 'var(--ds-background-brand-boldest-pressed)';
   readonly 'color.background.danger': 'var(--ds-background-danger)';
   readonly 'color.background.danger.hovered': 'var(--ds-background-danger-hovered)';
   readonly 'color.background.danger.pressed': 'var(--ds-background-danger-pressed)';

package/scripts/__tests__/__snapshots__/codegen.test.tsx.snap

@@ -238,6 +238,18 @@ exports[`@atlaskit/primitives bg styles are generated correctly 1`] = `
     'color.background.selected.bold.pressed',
     '#0052CC',
   ),
+  'color.background.brand.subtlest': token(
+    'color.background.brand.subtlest',
+    '#B3D4FF',
+  ),
+  'color.background.brand.subtlest.hovered': token(
+    'color.background.brand.subtlest.hovered',
+    '#DEEBFF',
+  ),
+  'color.background.brand.subtlest.pressed': token(
+    'color.background.brand.subtlest.pressed',
+    '#4C9AFF',
+  ),
   'color.background.brand.bold': token(
     'color.background.brand.bold',
     '#0052CC',
@@ -250,6 +262,18 @@ exports[`@atlaskit/primitives bg styles are generated correctly 1`] = `
     'color.background.brand.bold.pressed',
     '#0747A6',
   ),
+  'color.background.brand.boldest': token(
+    'color.background.brand.boldest',
+    '#0747A6',
+  ),
+  'color.background.brand.boldest.hovered': token(
+    'color.background.brand.boldest.hovered',
+    '#0052CC',
+  ),
+  'color.background.brand.boldest.pressed': token(
+    'color.background.brand.boldest.pressed',
+    '#0747A6',
+  ),
   'color.background.danger': token('color.background.danger', '#FFEBE6'),
   'color.background.danger.hovered': token(
     'color.background.danger.hovered',