@atlaskit/primitives 1.0.1 → 1.0.3

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/primitives
 
+## 1.0.3
+
+### Patch Changes
+
+- [`298df94426c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/298df94426c) - Regenerates codegen'd artifacts as a result of introducting new brand background design tokens.
+- Updated dependencies
+
+## 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/box/code.mdx

@@ -4,6 +4,14 @@ description: Box is a primitive component that leverages the foundations of the
 order: 1
 ---
 
+import { CodeDocsHeader } from '@af/design-system-docs-ui';
+
+<CodeDocsHeader
+  name="@atlaskit/primitives"
+  repository="https://bitbucket.org/atlassian/atlassian-frontend-mirror"
+  directoryName="primitives"
+/>
+
 import BoxProps from '!!extract-react-types-loader!../../extract-react-types/box-props'
 
 ## Props

package/constellation/box/examples.mdx

@@ -8,6 +8,13 @@ import BoxBasic from '../../examples/constellation/box/basic';
 import BoxPadding from '../../examples/constellation/box/padding';
 import BoxBackgroundColor from '../../examples/constellation/box/background-color';
 import BoxXcss from '../../examples/constellation/box/xcss';
+import { CodeDocsHeader } from '@af/design-system-docs-ui';
+
+<CodeDocsHeader
+  name="@atlaskit/primitives"
+  repository="https://bitbucket.org/atlassian/atlassian-frontend-mirror"
+  directoryName="primitives"
+/>
 
 ## Basic
 
@@ -31,7 +38,7 @@ Padding props can be used to access spacing design token and control internal la
 
 ## xCSS
 
-Box also exposes an `xcss` prop. This prop can take `xcss` function calls that contain a subset of permitted styles. When used with `Box`, xCSS takes most CSS properties, and when a token exists, the rule accepts that token as a value. 
+Box also exposes an `xcss` prop. This prop can take `xcss` function calls that contain a subset of permitted styles. When used with `Box`, xCSS takes most CSS properties, and when a token exists, the rule accepts that token as a value.
 
 <Example Component={BoxXcss} packageName="@atlaskit/primitives/box" />
 

package/constellation/flex/code.mdx

@@ -1,7 +1,19 @@
 ---
 title: Flex
-description: Flex is a primitive component that leverages the foundations of the Atlassian Design System.
+description: Flex is a primitive layout component that implements the CSS Flexbox API.
 order: 1
 ---
 
-TBD
+import { CodeDocsHeader } from '@af/design-system-docs-ui';
+
+<CodeDocsHeader
+  name="@atlaskit/primitives"
+  repository="https://bitbucket.org/atlassian/atlassian-frontend-mirror"
+  directoryName="primitives"
+/>
+
+import FlexProps from '!!extract-react-types-loader!../../extract-react-types/flex-props'
+
+## Props
+
+<PropsTable heading="" props={FlexProps} />

package/constellation/flex/examples.mdx

@@ -9,6 +9,15 @@ import FlexAlignItems from '../../examples/constellation/flex/align-items';
 import FlexJustifyContent from '../../examples/constellation/flex/justify-content';
 import FlexWrap from '../../examples/constellation/flex/wrap';
 
+import { CodeDocsHeader } from '@af/design-system-docs-ui';
+
+<CodeDocsHeader
+  name="@atlaskit/primitives"
+  repository="https://bitbucket.org/atlassian/atlassian-frontend-mirror"
+  directoryName="primitives"
+/>
+
+
 ## Basic
 
 The `Flex` component is designed as a very basic mapping to the CSS Flexbox API.

package/constellation/grid/code.mdx

@@ -0,0 +1,19 @@
+---
+title: Grid
+description: Grid is a primitive layout component that implements the CSS Grid API.
+order: 1
+---
+
+import { CodeDocsHeader } from '@af/design-system-docs-ui';
+
+<CodeDocsHeader
+  name="@atlaskit/primitives"
+  repository="https://bitbucket.org/atlassian/atlassian-frontend-mirror"
+  directoryName="primitives"
+/>
+
+import BoxProps from '!!extract-react-types-loader!../../extract-react-types/grid-props'
+
+## Props
+
+<PropsTable heading="" props={BoxProps} />

package/constellation/grid/examples.mdx

@@ -0,0 +1,46 @@
+---
+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';
+
+import { CodeDocsHeader } from '@af/design-system-docs-ui';
+
+<CodeDocsHeader
+  name="@atlaskit/primitives"
+  repository="https://bitbucket.org/atlassian/atlassian-frontend-mirror"
+  directoryName="primitives"
+/>
+
+## 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/constellation/inline/code.mdx

@@ -4,6 +4,14 @@ description: Inline is a primitive component based on flexbox that manages the h
 order: 1
 ---
 
+import { CodeDocsHeader } from '@af/design-system-docs-ui';
+
+<CodeDocsHeader
+  name="@atlaskit/primitives"
+  repository="https://bitbucket.org/atlassian/atlassian-frontend-mirror"
+  directoryName="primitives"
+/>
+
 import InlineProps from '!!extract-react-types-loader!../../extract-react-types/inline-props'
 
 ## Props

package/constellation/inline/examples.mdx

@@ -15,9 +15,17 @@ import InlineSeparator from '../../examples/constellation/inline/separator';
 import InlineGrow from '../../examples/constellation/inline/grow';
 import InlineAs from '../../examples/constellation/inline/as';
 
+import { CodeDocsHeader } from '@af/design-system-docs-ui';
+
+<CodeDocsHeader
+  name="@atlaskit/primitives"
+  repository="https://bitbucket.org/atlassian/atlassian-frontend-mirror"
+  directoryName="primitives"
+/>
+
 ## Basic
 
-Inline is an abstraction to efficiently lay-out a group of elements horizontally.  
+Inline is an abstraction to efficiently lay-out a group of elements horizontally.
 Use the given props to configure display behaviour using scalable recommendations from the Atlassian Design System.
 
 <Example Component={InlineBasic} packageName="@atlaskit/primitives/inline" />

package/constellation/overview/index.mdx

@@ -11,6 +11,14 @@ import boxUsageExample from './images/box-usage-example.png';
 import inlineUsageExample from './images/inline-usage-example.png';
 import stackUsageExample from './images/stack-usage-example.png';
 
+import { CodeDocsHeader } from '@af/design-system-docs-ui';
+
+<CodeDocsHeader
+  name="@atlaskit/primitives"
+  repository="https://bitbucket.org/atlassian/atlassian-frontend-mirror"
+  directoryName="primitives"
+/>
+
 Primitive components are a new type of component for layouts and placement of elements.
 They act as building blocks to compose different parts of the user experience,
 from the smallest design decisions (for example, the spacing around an icon) to larger layout decisions (for example, how a page is structured).

package/constellation/responsive/01-show/examples.mdx

@@ -0,0 +1,31 @@
+---
+title: Show
+description: Show is a responsive primitive that displays children at specified breakpoints
+order: 1
+---
+
+import ShowExample from '../../../examples/constellation/responsive/show';
+import ShowHideExample from '../../../examples/constellation/responsive/show-hide';
+
+import { CodeDocsHeader } from '@af/design-system-docs-ui';
+
+<CodeDocsHeader
+  name="@atlaskit/primitives"
+  repository="https://bitbucket.org/atlassian/atlassian-frontend-mirror"
+  directoryName="primitives"
+/>
+
+
+### Show
+
+This allows you to Show the children using CSS `display: …` either above or below a breakpoint.  By default, unless the breakpoint is met, contents are hidden.
+
+Note that this does not skip rendering of your children; the contents are rendered into the DOM at all times, so there is typically little performance savings—primarily that this is not painted.
+
+<Example Component={ShowExample} packageName="@atlaskit/primitives/responsive" />
+
+### Mixing Show and Hide
+
+Prefer using consistent `above` or `below` for readability and consistency.
+
+<Example Component={ShowHideExample} packageName="@atlaskit/primitives/responsive" />

package/constellation/responsive/02-hide/examples.mdx

@@ -0,0 +1,30 @@
+---
+title: Hide
+description: Hide is a responsive primitive that hides children at specified breakpoints
+order: 1
+---
+
+import HideExample from '../../../examples/constellation/responsive/hide';
+import ShowHideExample from '../../../examples/constellation/responsive/show-hide';
+
+import { CodeDocsHeader } from '@af/design-system-docs-ui';
+
+<CodeDocsHeader
+  name="@atlaskit/primitives"
+  repository="https://bitbucket.org/atlassian/atlassian-frontend-mirror"
+  directoryName="primitives"
+/>
+
+### Hide
+
+This allows you to Hide the children using CSS `display: none` either above or below a breakpoint.  By default, unless the breakpoint is met, contents are hidden.
+
+When hidden, this does not skip rendering of your children; the contents are rendered into the DOM at all times so there is typically little performance savings—primarily that this is not painted.
+
+<Example Component={HideExample} packageName="@atlaskit/primitives/responsive" />
+
+### Mixing Show and Hide
+
+Prefer using consistent `above` or `below` for readability and consistency.
+
+<Example Component={ShowHideExample} packageName="@atlaskit/primitives/responsive" />

package/constellation/responsive/03-breakpoints/examples.mdx

@@ -0,0 +1,51 @@
+---
+title: Breakpoints
+description: Breakpoints can be accessed through the media object for use in styles
+order: 1
+---
+
+import { MediaQueriesTable } from '@af/design-system-docs-ui';
+
+import { CodeDocsHeader } from '@af/design-system-docs-ui';
+
+<CodeDocsHeader
+  name="@atlaskit/primitives"
+  repository="https://bitbucket.org/atlassian/atlassian-frontend-mirror"
+  directoryName="primitives"
+/>
+
+### Media Queries
+Media queries can be applied through the `media` object.
+
+
+<MediaQueriesTable />
+
+When used with `xcss`, be aware that a media query can't contain another media query to prevent arbitrary nesting. Additionally, pseudo-selectors can't contain media queries. To use media queries and pseudos, the media query must contain the pseudo.
+
+```
+import { xcss } from '@atlaskit/primitives';
+import { media } from '@atlaskit/primitives/responsive';
+
+const someStyles = xcss({
+  // This is okay, since media queries can contain pseudos
+  [media.above.md]: {
+    ':hover': {
+      backgroundColor: 'color.background.primary.hovered'
+    }
+  },
+
+  // This is not okay, since pseudos can't contain media queries
+  ':hover': {
+    [media.above.md]: {
+      backgroundColor: 'color.background.primary.hovered'
+    }
+  },
+
+  // This is not okay, since media queries can't contain media queries
+  [media.above.md]: {
+    [media.above.xs]: {
+      backgroundColor: 'color.background.primary.hovered'
+    }
+  },
+});
+```

package/constellation/responsive/examples.mdx

@@ -10,6 +10,15 @@ import ShowExample from '../../examples/constellation/responsive/show';
 import HideExample from '../../examples/constellation/responsive/hide';
 import ShowHideExample from '../../examples/constellation/responsive/show-hide';
 
+
+import { CodeDocsHeader } from '@af/design-system-docs-ui';
+
+<CodeDocsHeader
+  name="@atlaskit/primitives"
+  repository="https://bitbucket.org/atlassian/atlassian-frontend-mirror"
+  directoryName="primitives"
+/>
+
 ## Responsive `css` or `xcss`
 
 Utilize our media queries exposed in `css`, `styled`, or `xcss` as computed keys to build responsive UIs. Learn more about these media query exports in [usage](/components/primitives/responsive/usage).
@@ -26,26 +35,6 @@ Please use `xcss` whenever possible to ensure consistency and safety with style
 
 ## Responsive primitives
 
-Consider these shortcuts to writing your own custom media queries.  Composing with our primitives will be far quicker and consistent to implement, but may result in excess DOM nodes.
-
-### Show
-
-This allows you to Show the children using CSS `display: …` either above or below a breakpoint.  By default, unless the breakpoint is met, contents are hidden.
-
-Note that this does not skip rendering of your children; the contents are rendered into the DOM at all times, so there is typically little performance savings—primarily that this is not painted.
-
-<Example Component={ShowExample} packageName="@atlaskit/primitives/responsive" />
-
-### Hide
-
-This allows you to Hide the children using CSS `display: none` either above or below a breakpoint.  By default, unless the breakpoint is met, contents are hidden.
-
-When hidden, this does not skip rendering of your children; the contents are rendered into the DOM at all times so there is typically little performance savings—primarily that this is not painted.
-
-<Example Component={HideExample} packageName="@atlaskit/primitives/responsive" />
-
-### Mixing Show and Hide
-
-Prefer using consistent `above` or `below` for readability and consistency.
-
-<Example Component={ShowHideExample} packageName="@atlaskit/primitives/responsive" />
+Consider these shortcuts to writing your own custom media queries. Composing with our primitives will be far quicker and consistent to implement, but may result in excess DOM nodes.
+* [Show](/components/primitives/responsive/show)
+* [Hide](/components/primitives/responsive/hide)

package/constellation/stack/code.mdx

@@ -4,6 +4,14 @@ description: Stack is a primitive component based on flexbox that manages the ve
 order: 1
 ---
 
+import { CodeDocsHeader } from '@af/design-system-docs-ui';
+
+<CodeDocsHeader
+  name="@atlaskit/primitives"
+  repository="https://bitbucket.org/atlassian/atlassian-frontend-mirror"
+  directoryName="primitives"
+/>
+
 import StackProps from '!!extract-react-types-loader!../../extract-react-types/stack-props'
 
 ## Props

package/constellation/stack/examples.mdx

@@ -12,6 +12,14 @@ import StackSpread from '../../examples/constellation/stack/spread';
 import StackGrow from '../../examples/constellation/stack/grow';
 import StackAs from '../../examples/constellation/stack/as';
 
+import { CodeDocsHeader } from '@af/design-system-docs-ui';
+
+<CodeDocsHeader
+  name="@atlaskit/primitives"
+  repository="https://bitbucket.org/atlassian/atlassian-frontend-mirror"
+  directoryName="primitives"
+/>
+
 ## Basic
 
 Stack is an abstraction to lay-out a group of elements vertically.
@@ -46,7 +54,7 @@ Elements can be set to stay together next to each other (default behaviour) or s
 
 ## Width control
 
-By default a `Stack` will have its width influenced by the context where it appears.  
+By default a `Stack` will have its width influenced by the context where it appears.
 
 To control that the `grow` prop can be used with the values:
 

package/constellation/xcss/examples.mdx

@@ -8,6 +8,14 @@ import xcssBasic from '../../examples/constellation/xcss/basic';
 import xcssInteractive from '../../examples/constellation/xcss/interactivity';
 import xcssResponsive from '../../examples/constellation/xcss/responsiveness';
 
+import { CodeDocsHeader } from '@af/design-system-docs-ui';
+
+<CodeDocsHeader
+  name="@atlaskit/primitives"
+  repository="https://bitbucket.org/atlassian/atlassian-frontend-mirror"
+  directoryName="primitives"
+/>
+
 ## Basic
 
 `xcss` can pull together different types of interactions and UI in a safer more composable way.

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;