@atlaskit/primitives 1.0.1 → 1.0.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/primitives
 
+## 1.0.2
+
+### Patch Changes
+
+- [`45ff2cd234f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/45ff2cd234f) - Fixes missing type in `Flex` component, adds `Grid` component.
+
 ## 1.0.1
 
 ### Patch Changes

package/constellation/grid/code.mdx

@@ -0,0 +1,7 @@
+---
+title: Grid
+description: Grid is a primitive component that leverages the foundations of the Atlassian Design System.
+order: 1
+---
+
+TBD

package/constellation/grid/examples.mdx

@@ -0,0 +1,38 @@
+---
+title: Grid
+description: Grid is a primitive layout component that implements the CSS Grid API.
+order: 0
+---
+
+import GridBasic from '../../examples/constellation/grid/basic';
+import GridGap from '../../examples/constellation/grid/gap';
+import GridTemplate from '../../examples/constellation/grid/template';
+import GridAutoFlow from '../../examples/constellation/grid/auto-flow';
+
+## Basic
+
+The `Grid` component is designed as a very basic mapping to the CSS Grid API.
+It can be used as an alternative to [Flex](/components/primitives/flex), [Inline](/components/primitives/inline) or [Stack](/components/primitives/stack).
+
+<Example Component={GridBasic} packageName="@atlaskit/primitives/grid" />
+
+## Gap properties
+
+Gap properties - `rowGap`, `columnGap` and `gap` only allow token-backed values. This is to aid ergonomics
+and keep the whitespace of the grid harmonious with our spacing system.
+
+<Example Component={GridGap} packageName="@atlaskit/primitives/grid" />
+
+## Template syntax
+
+Grid-prefixed template properties in CSS do not have this prefix in the component API.
+For example `grid-template-*` are instead applied as `templateColumns`, `templateRows` and `templateArea` properties.
+
+<Example Component={GridTemplate} packageName="@atlaskit/primitives/grid" />
+
+## Autoflow syntax
+
+Grid-prefixed properties in CSS do not have this prefix in the component API. `grid-auto-flow` is instead applied via `autoFlow`.
+
+<Example Component={GridAutoFlow} packageName="@atlaskit/primitives/grid" />
+

package/dist/cjs/components/flex.js

@@ -62,6 +62,9 @@ var alignItemsMap = {
   }),
   end: (0, _react2.css)({
     alignItems: 'end'
+  }),
+  stretch: (0, _react2.css)({
+    alignItems: 'stretch'
   })
 };
 var baseStyles = (0, _react2.css)({
@@ -90,20 +93,21 @@ var baseStyles = (0, _react2.css)({
  * ```
  */
 var Flex = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
-  var as = _ref.as,
+  var _ref$as = _ref.as,
+    Component = _ref$as === void 0 ? 'div' : _ref$as,
     alignItems = _ref.alignItems,
     justifyContent = _ref.justifyContent,
     gap = _ref.gap,
+    columnGap = _ref.columnGap,
     rowGap = _ref.rowGap,
     children = _ref.children,
     testId = _ref.testId,
     direction = _ref.direction,
     wrap = _ref.wrap,
     xcss = _ref.xcss;
-  var Component = as || 'div';
   var xcssClassName = xcss && (0, _xcss.parseXcss)(xcss);
   return (0, _react2.jsx)(Component, {
-    css: [baseStyles, gap && _styleMaps.spaceStylesMap.gap[gap], rowGap && _styleMaps.spaceStylesMap.rowGap[rowGap], alignItems && alignItemsMap[alignItems], direction && flexDirectionMap[direction], justifyContent && justifyContentMap[justifyContent], wrap && flexWrapMap[wrap],
+    css: [baseStyles, gap && _styleMaps.spaceStylesMap.gap[gap], columnGap && _styleMaps.spaceStylesMap.columnGap[columnGap], rowGap && _styleMaps.spaceStylesMap.rowGap[rowGap], alignItems && alignItemsMap[alignItems], direction && flexDirectionMap[direction], justifyContent && justifyContentMap[justifyContent], wrap && flexWrapMap[wrap],
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
     xcssClassName && xcssClassName],
     "data-testid": testId,

package/dist/cjs/components/grid.js

@@ -0,0 +1,127 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _styleMaps = require("../xcss/style-maps.partial");
+var _xcss = require("../xcss/xcss");
+/* eslint-disable @repo/internal/styles/no-exported-styles */
+/** @jsx jsx */
+
+var justifyContentMap = {
+  start: (0, _react2.css)({
+    justifyContent: 'start'
+  }),
+  center: (0, _react2.css)({
+    justifyContent: 'center'
+  }),
+  end: (0, _react2.css)({
+    justifyContent: 'end'
+  }),
+  'space-between': (0, _react2.css)({
+    justifyContent: 'space-between'
+  }),
+  'space-around': (0, _react2.css)({
+    justifyContent: 'space-around'
+  }),
+  'space-evenly': (0, _react2.css)({
+    justifyContent: 'space-evenly'
+  }),
+  stretch: (0, _react2.css)({
+    justifyContent: 'stretch'
+  })
+};
+var alignItemsMap = {
+  start: (0, _react2.css)({
+    alignItems: 'start'
+  }),
+  center: (0, _react2.css)({
+    alignItems: 'center'
+  }),
+  baseline: (0, _react2.css)({
+    alignItems: 'baseline'
+  }),
+  end: (0, _react2.css)({
+    alignItems: 'end'
+  })
+};
+var baseStyles = (0, _react2.css)({
+  display: 'grid',
+  boxSizing: 'border-box'
+});
+var gridAutoFlowMap = {
+  row: (0, _react2.css)({
+    gridAutoFlow: 'row'
+  }),
+  column: (0, _react2.css)({
+    gridAutoFlow: 'column'
+  }),
+  dense: (0, _react2.css)({
+    gridAutoFlow: 'dense'
+  }),
+  'row dense': (0, _react2.css)({
+    gridAutoFlow: 'row dense'
+  }),
+  'column dense': (0, _react2.css)({
+    gridAutoFlow: 'column dense'
+  })
+};
+
+/**
+ * __Grid__
+ *
+ * `Grid` is a primitive component that implements the CSS Grid API.
+ *
+ * - [Examples](https://atlassian.design/components/primitives/grid/examples)
+ * - [Code](https://atlassian.design/components/primitives/grid/code)
+ *
+ * @example
+ * ```tsx
+ * import { Grid, Box } from '@atlaskit/primitives'
+ *
+ * const Component = () => (
+ *   <Grid gap="space.100" gridColumns="1fr 1fr">
+ *     <Box padding="space.100" backgroundColor="neutral"></Box>
+ *     <Box padding="space.100" backgroundColor="neutral"></Box>
+ *   </Grid>
+ * )
+ * ```
+ */
+var Grid = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var as = _ref.as,
+    alignItems = _ref.alignItems,
+    justifyContent = _ref.justifyContent,
+    gap = _ref.gap,
+    columnGap = _ref.columnGap,
+    rowGap = _ref.rowGap,
+    children = _ref.children,
+    testId = _ref.testId,
+    autoFlow = _ref.autoFlow,
+    gridTemplateAreas = _ref.templateAreas,
+    gridTemplateRows = _ref.templateRows,
+    gridTemplateColumns = _ref.templateColumns,
+    xcss = _ref.xcss;
+  var Component = as || 'div';
+  var xcssClassName = xcss && (0, _xcss.parseXcss)(xcss);
+  var style = gridTemplateAreas || gridTemplateColumns || gridTemplateRows ? Object.assign({}, {
+    gridTemplateAreas: gridTemplateAreas ? gridTemplateAreas.map(function (str) {
+      return "\"".concat(str, "\"");
+    }).join('\n') : undefined,
+    gridTemplateColumns: gridTemplateColumns,
+    gridTemplateRows: gridTemplateRows
+  }) : undefined;
+  return (0, _react2.jsx)(Component, {
+    style: style,
+    css: [baseStyles, gap && _styleMaps.spaceStylesMap.gap[gap], columnGap && _styleMaps.spaceStylesMap.columnGap[columnGap], rowGap && _styleMaps.spaceStylesMap.rowGap[rowGap], alignItems && alignItemsMap[alignItems], justifyContent && justifyContentMap[justifyContent], autoFlow && gridAutoFlowMap[autoFlow],
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    xcssClassName && xcssClassName],
+    "data-testid": testId,
+    ref: ref
+  }, children);
+}));
+Grid.displayName = 'Grid';
+var _default = Grid;
+exports.default = _default;

package/dist/cjs/components/inline.js

@@ -1,64 +1,27 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
-var _styleMaps = require("../xcss/style-maps.partial");
 var _xcss = require("../xcss/xcss");
+var _flex = _interopRequireDefault(require("./flex"));
 /* eslint-disable @repo/internal/styles/no-exported-styles */
 /** @jsx jsx */
 
-var alignItemsMap = {
-  center: (0, _react2.css)({
-    alignItems: 'center'
-  }),
-  baseline: (0, _react2.css)({
-    alignItems: 'baseline'
-  }),
-  start: (0, _react2.css)({
-    alignItems: 'flex-start'
-  }),
-  end: (0, _react2.css)({
-    alignItems: 'flex-end'
-  }),
-  stretch: (0, _react2.css)({
-    alignItems: 'stretch'
-  })
-};
-var justifyContentMap = {
-  start: (0, _react2.css)({
-    justifyContent: 'flex-start'
-  }),
-  center: (0, _react2.css)({
-    justifyContent: 'center'
-  }),
-  end: (0, _react2.css)({
-    justifyContent: 'flex-end'
-  }),
-  'space-between': (0, _react2.css)({
-    justifyContent: 'space-between'
-  })
-};
 var flexGrowMap = {
-  hug: (0, _react2.css)({
+  hug: (0, _xcss.xcss)({
     flexGrow: 0
   }),
-  fill: (0, _react2.css)({
+  fill: (0, _xcss.xcss)({
     width: '100%',
     flexGrow: 1
   })
 };
-var flexWrapStyles = (0, _react2.css)({
-  flexWrap: 'wrap'
-});
-var baseStyles = (0, _react2.css)({
-  display: 'flex',
-  boxSizing: 'border-box',
-  flexDirection: 'row'
-});
 var separatorStyles = (0, _react2.css)({
   color: "var(--ds-text-subtle, #42526E)",
   marginBlock: "var(--ds-space-0, 0px)",
@@ -103,7 +66,6 @@ var Inline = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(
     xcss = _ref2.xcss,
     testId = _ref2.testId,
     rawChildren = _ref2.children;
-  var Component = as || 'div';
   var separatorComponent = typeof separator === 'string' ? (0, _react2.jsx)(Separator, null, separator) : separator;
   var children = separatorComponent ? _react.Children.toArray(rawChildren).filter(Boolean).map(function (child, index) {
     return (0, _react2.jsx)(_react.Fragment, {
@@ -111,12 +73,18 @@ var Inline = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(
     }, separator && index > 0 ? separatorComponent : null, child);
   }) : rawChildren;
   var justifyContent = spread || alignInline;
-  var className = xcss && (0, _xcss.parseXcss)(xcss);
-  return (0, _react2.jsx)(Component, {
-    css: [
+  return (0, _react2.jsx)(_flex.default, {
+    as: as,
+    alignItems: alignItems,
+    justifyContent: justifyContent,
+    direction: "row",
+    gap: space,
+    rowGap: rowSpace,
+    wrap: shouldWrap ? 'wrap' : undefined,
+    xcss: grow ? [flexGrowMap[grow]].concat((0, _toConsumableArray2.default)(Array.isArray(xcss) ? xcss : [xcss])) :
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    className, baseStyles, space && _styleMaps.spaceStylesMap.gap[space], justifyContent && justifyContentMap[justifyContent], grow && flexGrowMap[grow], alignItems && alignItemsMap[alignItems], shouldWrap && flexWrapStyles, rowSpace && _styleMaps.spaceStylesMap.rowGap[rowSpace]],
-    "data-testid": testId,
+    xcss,
+    testId: testId,
     ref: ref
   }, children);
 }));

package/dist/cjs/components/stack.js

@@ -1,59 +1,32 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
-var _styleMaps = require("../xcss/style-maps.partial");
+var _xcss = require("../xcss/xcss");
+var _flex = _interopRequireDefault(require("./flex"));
 /* eslint-disable @repo/internal/styles/no-exported-styles */
 /** @jsx jsx */
 
-var justifyContentMap = {
-  start: (0, _react2.css)({
-    justifyContent: 'start'
-  }),
-  center: (0, _react2.css)({
-    justifyContent: 'center'
-  }),
-  end: (0, _react2.css)({
-    justifyContent: 'end'
-  }),
-  'space-between': (0, _react2.css)({
-    justifyContent: 'space-between'
-  })
-};
-var alignItemsMap = {
-  start: (0, _react2.css)({
-    alignItems: 'start'
-  }),
-  center: (0, _react2.css)({
-    alignItems: 'center'
-  }),
-  end: (0, _react2.css)({
-    alignItems: 'end'
-  })
-};
 var flexGrowMap = {
-  hug: (0, _react2.css)({
+  hug: (0, _xcss.xcss)({
     flexGrow: 0
   }),
-  fill: (0, _react2.css)({
+  fill: (0, _xcss.xcss)({
     width: '100%',
     flexGrow: 1
   })
 };
-var baseStyles = (0, _react2.css)({
-  display: 'flex',
-  boxSizing: 'border-box',
-  flexDirection: 'column'
-});
 
 /**
  * __Stack__
  *
- * Stack is a primitive component based on flexbox that manages the vertical layout of direct children.
+ * Stack is a primitive component based on flexbox that manages the block layout of direct children.
  *
  * @example
  * ```tsx
@@ -72,12 +45,19 @@ var Stack = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(f
     grow = _ref.grow,
     space = _ref.space,
     children = _ref.children,
-    testId = _ref.testId;
-  var Component = as || 'div';
+    testId = _ref.testId,
+    xcss = _ref.xcss;
   var justifyContent = spread || alignBlock;
-  return (0, _react2.jsx)(Component, {
-    css: [baseStyles, space && _styleMaps.spaceStylesMap.gap[space], alignItems && alignItemsMap[alignItems], grow && flexGrowMap[grow], justifyContent && justifyContentMap[justifyContent]],
-    "data-testid": testId,
+  return (0, _react2.jsx)(_flex.default, {
+    as: as,
+    gap: space,
+    direction: "column",
+    alignItems: alignItems,
+    justifyContent: justifyContent,
+    xcss: grow ? [flexGrowMap[grow]].concat((0, _toConsumableArray2.default)(Array.isArray(xcss) ? xcss : [xcss])) :
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    xcss,
+    testId: testId,
     ref: ref
   }, children);
 }));

package/dist/cjs/index.js

@@ -16,6 +16,12 @@ Object.defineProperty(exports, "Flex", {
     return _flex.default;
   }
 });
+Object.defineProperty(exports, "Grid", {
+  enumerable: true,
+  get: function get() {
+    return _grid.default;
+  }
+});
 Object.defineProperty(exports, "Inline", {
   enumerable: true,
   get: function get() {
@@ -46,6 +52,12 @@ Object.defineProperty(exports, "UNSAFE_media", {
     return _responsive.UNSAFE_media;
   }
 });
+Object.defineProperty(exports, "media", {
+  enumerable: true,
+  get: function get() {
+    return _responsive.media;
+  }
+});
 Object.defineProperty(exports, "xcss", {
   enumerable: true,
   get: function get() {
@@ -58,4 +70,5 @@ var _inline = _interopRequireDefault(require("./components/inline"));
 var _xcss = require("./xcss/xcss");
 var _stack = _interopRequireDefault(require("./components/stack"));
 var _flex = _interopRequireDefault(require("./components/flex"));
+var _grid = _interopRequireDefault(require("./components/grid"));
 var _responsive = require("./responsive");

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/primitives",
-	"version": "1.0.1",
+	"version": "1.0.2",
 	"sideEffects": false
 }

package/dist/cjs/xcss/xcss.js

@@ -161,7 +161,7 @@ exports.parseXcss = parseXcss;
 var boxWrapper = function boxWrapper(style) {
   return xcss(style);
 };
-var inlineWrapper = function inlineWrapper(style) {
+var spaceWrapper = function spaceWrapper(style) {
   return xcss(style);
 };
 /**

package/dist/es2019/components/flex.js

@@ -55,6 +55,9 @@ const alignItemsMap = {
   }),
   end: css({
     alignItems: 'end'
+  }),
+  stretch: css({
+    alignItems: 'stretch'
   })
 };
 const baseStyles = css({
@@ -83,10 +86,11 @@ const baseStyles = css({
  * ```
  */
 const Flex = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  as,
+  as: Component = 'div',
   alignItems,
   justifyContent,
   gap,
+  columnGap,
   rowGap,
   children,
   testId,
@@ -94,10 +98,9 @@ const Flex = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   wrap,
   xcss
 }, ref) => {
-  const Component = as || 'div';
   const xcssClassName = xcss && parseXcss(xcss);
   return jsx(Component, {
-    css: [baseStyles, gap && spaceStylesMap.gap[gap], rowGap && spaceStylesMap.rowGap[rowGap], alignItems && alignItemsMap[alignItems], direction && flexDirectionMap[direction], justifyContent && justifyContentMap[justifyContent], wrap && flexWrapMap[wrap],
+    css: [baseStyles, gap && spaceStylesMap.gap[gap], columnGap && spaceStylesMap.columnGap[columnGap], rowGap && spaceStylesMap.rowGap[rowGap], alignItems && alignItemsMap[alignItems], direction && flexDirectionMap[direction], justifyContent && justifyContentMap[justifyContent], wrap && flexWrapMap[wrap],
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
     xcssClassName && xcssClassName],
     "data-testid": testId,

package/dist/es2019/components/grid.js

@@ -0,0 +1,118 @@
+/* eslint-disable @repo/internal/styles/no-exported-styles */
+/** @jsx jsx */
+import { forwardRef, memo } from 'react';
+import { css, jsx } from '@emotion/react';
+import { spaceStylesMap } from '../xcss/style-maps.partial';
+import { parseXcss } from '../xcss/xcss';
+const justifyContentMap = {
+  start: css({
+    justifyContent: 'start'
+  }),
+  center: css({
+    justifyContent: 'center'
+  }),
+  end: css({
+    justifyContent: 'end'
+  }),
+  'space-between': css({
+    justifyContent: 'space-between'
+  }),
+  'space-around': css({
+    justifyContent: 'space-around'
+  }),
+  'space-evenly': css({
+    justifyContent: 'space-evenly'
+  }),
+  stretch: css({
+    justifyContent: 'stretch'
+  })
+};
+const alignItemsMap = {
+  start: css({
+    alignItems: 'start'
+  }),
+  center: css({
+    alignItems: 'center'
+  }),
+  baseline: css({
+    alignItems: 'baseline'
+  }),
+  end: css({
+    alignItems: 'end'
+  })
+};
+const baseStyles = css({
+  display: 'grid',
+  boxSizing: 'border-box'
+});
+const gridAutoFlowMap = {
+  row: css({
+    gridAutoFlow: 'row'
+  }),
+  column: css({
+    gridAutoFlow: 'column'
+  }),
+  dense: css({
+    gridAutoFlow: 'dense'
+  }),
+  'row dense': css({
+    gridAutoFlow: 'row dense'
+  }),
+  'column dense': css({
+    gridAutoFlow: 'column dense'
+  })
+};
+
+/**
+ * __Grid__
+ *
+ * `Grid` is a primitive component that implements the CSS Grid API.
+ *
+ * - [Examples](https://atlassian.design/components/primitives/grid/examples)
+ * - [Code](https://atlassian.design/components/primitives/grid/code)
+ *
+ * @example
+ * ```tsx
+ * import { Grid, Box } from '@atlaskit/primitives'
+ *
+ * const Component = () => (
+ *   <Grid gap="space.100" gridColumns="1fr 1fr">
+ *     <Box padding="space.100" backgroundColor="neutral"></Box>
+ *     <Box padding="space.100" backgroundColor="neutral"></Box>
+ *   </Grid>
+ * )
+ * ```
+ */
+const Grid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  as,
+  alignItems,
+  justifyContent,
+  gap,
+  columnGap,
+  rowGap,
+  children,
+  testId,
+  autoFlow,
+  templateAreas: gridTemplateAreas,
+  templateRows: gridTemplateRows,
+  templateColumns: gridTemplateColumns,
+  xcss
+}, ref) => {
+  const Component = as || 'div';
+  const xcssClassName = xcss && parseXcss(xcss);
+  const style = gridTemplateAreas || gridTemplateColumns || gridTemplateRows ? Object.assign({}, {
+    gridTemplateAreas: gridTemplateAreas ? gridTemplateAreas.map(str => `"${str}"`).join('\n') : undefined,
+    gridTemplateColumns,
+    gridTemplateRows
+  }) : undefined;
+  return jsx(Component, {
+    style: style,
+    css: [baseStyles, gap && spaceStylesMap.gap[gap], columnGap && spaceStylesMap.columnGap[columnGap], rowGap && spaceStylesMap.rowGap[rowGap], alignItems && alignItemsMap[alignItems], justifyContent && justifyContentMap[justifyContent], autoFlow && gridAutoFlowMap[autoFlow],
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    xcssClassName && xcssClassName],
+    "data-testid": testId,
+    ref: ref
+  }, children);
+}));
+Grid.displayName = 'Grid';
+export default Grid;