@atlaskit/ds-explorations 0.1.1 → 0.1.2

package/dist/cjs/components/text.partial.js

@@ -11,70 +11,108 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
+
+var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
+
+var _colorMap = require("../internal/color-map");
+
+var _surfaceProvider = require("./surface-provider");
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
+var asAllowlist = ['span', 'div', 'p'];
 var fontFamily = "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif";
 var fontSizeMap = {
-  '11': (0, _core.css)({
+  '11px': (0, _react.css)({
     fontSize: '11px'
   }),
-  '12': (0, _core.css)({
+  '12px': (0, _react.css)({
     fontSize: '12px'
   }),
-  '14': (0, _core.css)({
+  '14px': (0, _react.css)({
     fontSize: '14px'
   })
 };
 // NOTE: can't use numbers as keys or Constellation won't build. Weird one.
 var fontWeightMap = {
-  '400': (0, _core.css)({
+  '400': (0, _react.css)({
     fontWeight: 400
   }),
-  '500': (0, _core.css)({
+  '500': (0, _react.css)({
     fontWeight: 500
+  }),
+  '700': (0, _react.css)({
+    fontWeight: 700
   })
 };
 var lineHeightMap = {
-  '12px': (0, _core.css)({
+  '12px': (0, _react.css)({
     lineHeight: '12px'
   }),
-  '16px': (0, _core.css)({
+  '16px': (0, _react.css)({
     lineHeight: '16px'
   }),
-  '20px': (0, _core.css)({
+  '20px': (0, _react.css)({
     lineHeight: '20px'
   }),
-  '24px': (0, _core.css)({
+  '24px': (0, _react.css)({
     lineHeight: '24px'
   }),
-  '28px': (0, _core.css)({
+  '28px': (0, _react.css)({
     lineHeight: '28px'
   }),
-  '32px': (0, _core.css)({
+  '32px': (0, _react.css)({
     lineHeight: '32px'
   }),
-  '40px': (0, _core.css)({
+  '40px': (0, _react.css)({
     lineHeight: '40px'
   })
 };
 var textAlignMap = {
-  center: (0, _core.css)({
+  center: (0, _react.css)({
     textAlign: 'center'
   }),
-  end: (0, _core.css)({
+  end: (0, _react.css)({
     textAlign: 'end'
   }),
-  start: (0, _core.css)({
+  start: (0, _react.css)({
     textAlign: 'start'
   })
 };
-var baseStyles = (0, _core.css)({
+var textTransformMap = {
+  none: (0, _react.css)({
+    textTransform: 'none'
+  }),
+  lowercase: (0, _react.css)({
+    textTransform: 'lowercase'
+  }),
+  uppercase: (0, _react.css)({
+    textTransform: 'uppercase'
+  })
+};
+var verticalAlignMap = {
+  top: (0, _react.css)({
+    verticalAlign: 'top'
+  }),
+  middle: (0, _react.css)({
+    verticalAlign: 'middle'
+  }),
+  bottom: (0, _react.css)({
+    verticalAlign: 'bottom'
+  })
+};
+var baseStyles = (0, _react.css)({
+  boxSizing: 'border-box',
   fontFamily: fontFamily
 });
+var truncateStyles = (0, _react.css)({
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
+});
 /**
  * __Text__
  *
@@ -86,6 +124,8 @@ var baseStyles = (0, _core.css)({
  */
 
 var Text = function Text(_ref) {
+  var _colorMap$surface;
+
   var _ref$as = _ref.as,
       Component = _ref$as === void 0 ? 'span' : _ref$as,
       children = _ref.children,
@@ -93,22 +133,27 @@ var Text = function Text(_ref) {
       fontSize = _ref.fontSize,
       fontWeight = _ref.fontWeight,
       lineHeight = _ref.lineHeight,
+      _ref$shouldTruncate = _ref.shouldTruncate,
+      shouldTruncate = _ref$shouldTruncate === void 0 ? false : _ref$shouldTruncate,
       textAlign = _ref.textAlign,
-      href = _ref.href,
+      textTransform = _ref.textTransform,
+      verticalAlign = _ref.verticalAlign,
       testId = _ref.testId,
       UNSAFE_style = _ref.UNSAFE_style;
+  var surface = (0, _surfaceProvider.useSurface)(); // @ts-ignore
 
   var _ref2 = colorTuple || [],
       _ref3 = (0, _slicedToArray2.default)(_ref2, 2),
-      color = _ref3[0],
+      _ref3$ = _ref3[0],
+      color = _ref3$ === void 0 ? (_colorMap$surface = _colorMap.colorMap[surface]) !== null && _colorMap$surface !== void 0 ? _colorMap$surface : 'color.text' : _ref3$,
       fallback = _ref3[1];
 
-  return (0, _core.jsx)(Component, {
+  (0, _tinyInvariant.default)(asAllowlist.includes(Component), "@atlaskit/ds-explorations: Text received an invalid \"as\" value of \"".concat(Component, "\""));
+  return (0, _react.jsx)(Component, {
     style: _objectSpread(_objectSpread({}, UNSAFE_style), fallback && {
       '--ds-co-fb': fallback
     }),
-    css: [baseStyles, color && textColorMap[color], fontSize && fontSizeMap[fontSize], fontWeight && fontWeightMap[fontWeight], lineHeight && lineHeightMap[lineHeight], textAlign && textAlignMap[textAlign]],
-    href: href,
+    css: [baseStyles, color && textColorMap[color], fontSize && fontSizeMap[fontSize], fontWeight && fontWeightMap[fontWeight], lineHeight && lineHeightMap[lineHeight], shouldTruncate && truncateStyles, textAlign && textAlignMap[textAlign], textTransform && textTransformMap[textTransform], verticalAlign && verticalAlignMap[verticalAlign]],
     "data-testid": testId
   }, children);
 };
@@ -116,7 +161,7 @@ var Text = function Text(_ref) {
 var _default = Text;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::85a0a0bc073c7af8fd63101d6c88d59e>>
+ * @codegen <<SignedSource::140ffff6e1310c1c37e2067e2c232b92>>
  * @codegenId colors
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["text"]
@@ -124,43 +169,43 @@ var _default = Text;
 
 exports.default = _default;
 var textColorMap = {
-  'color.text': (0, _core.css)({
+  'color.text': (0, _react.css)({
     color: "var(--ds-text, var(--ds-co-fb))"
   }),
-  subtle: (0, _core.css)({
+  subtle: (0, _react.css)({
     color: "var(--ds-text-subtle, var(--ds-co-fb))"
   }),
-  subtlest: (0, _core.css)({
+  subtlest: (0, _react.css)({
     color: "var(--ds-text-subtlest, var(--ds-co-fb))"
   }),
-  disabled: (0, _core.css)({
+  disabled: (0, _react.css)({
     color: "var(--ds-text-disabled, var(--ds-co-fb))"
   }),
-  inverse: (0, _core.css)({
+  inverse: (0, _react.css)({
     color: "var(--ds-text-inverse, var(--ds-co-fb))"
   }),
-  brand: (0, _core.css)({
+  brand: (0, _react.css)({
     color: "var(--ds-text-brand, var(--ds-co-fb))"
   }),
-  selected: (0, _core.css)({
+  selected: (0, _react.css)({
     color: "var(--ds-text-selected, var(--ds-co-fb))"
   }),
-  danger: (0, _core.css)({
+  danger: (0, _react.css)({
     color: "var(--ds-text-danger, var(--ds-co-fb))"
   }),
-  warning: (0, _core.css)({
+  warning: (0, _react.css)({
     color: "var(--ds-text-warning, var(--ds-co-fb))"
   }),
-  'warning.inverse': (0, _core.css)({
+  'warning.inverse': (0, _react.css)({
     color: "var(--ds-text-warning-inverse, var(--ds-co-fb))"
   }),
-  success: (0, _core.css)({
+  success: (0, _react.css)({
     color: "var(--ds-text-success, var(--ds-co-fb))"
   }),
-  discovery: (0, _core.css)({
+  discovery: (0, _react.css)({
     color: "var(--ds-text-discovery, var(--ds-co-fb))"
   }),
-  information: (0, _core.css)({
+  information: (0, _react.css)({
     color: "var(--ds-text-information, var(--ds-co-fb))"
   })
 };

package/dist/cjs/constants.js

@@ -10,6 +10,7 @@ var SPACING_SCALE = {
   'sp-50': 4,
   'sp-75': 6,
   'sp-100': 8,
+  'sp-150': 12,
   'sp-200': 16,
   'sp-300': 24,
   'sp-400': 32,

package/dist/cjs/index.js

@@ -17,6 +17,18 @@ Object.defineProperty(exports, "UNSAFE_Inline", {
     return _inline.default;
   }
 });
+Object.defineProperty(exports, "UNSAFE_InteractionSurface", {
+  enumerable: true,
+  get: function get() {
+    return _interactionSurface.default;
+  }
+});
+Object.defineProperty(exports, "UNSAFE_SPACING_SCALE", {
+  enumerable: true,
+  get: function get() {
+    return _constants.SPACING_SCALE;
+  }
+});
 Object.defineProperty(exports, "UNSAFE_Stack", {
   enumerable: true,
   get: function get() {
@@ -36,4 +48,8 @@ var _text = _interopRequireDefault(require("./components/text.partial"));
 
 var _inline = _interopRequireDefault(require("./components/inline.partial"));
 
-var _stack = _interopRequireDefault(require("./components/stack.partial"));
+var _stack = _interopRequireDefault(require("./components/stack.partial"));
+
+var _interactionSurface = _interopRequireDefault(require("./components/interaction-surface.partial"));
+
+var _constants = require("./constants");

package/dist/cjs/internal/color-map.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.colorMap = void 0;
+
+/**
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ *
+ * Some artifact
+ *
+ * @codegen <<SignedSource::8f568e4f0837f7af4a10429e060ad059>>
+ * @codegenCommand yarn codegen-styles
+ */
+var colorMap = {
+  'neutral.bold': 'inverse',
+  'neutral.bold.hovered': 'inverse',
+  'neutral.bold.pressed': 'inverse',
+  'brand.bold': 'inverse',
+  'brand.bold.hovered': 'inverse',
+  'brand.bold.pressed': 'inverse',
+  'selected.bold': 'inverse',
+  'selected.bold.hovered': 'inverse',
+  'selected.bold.pressed': 'inverse',
+  'danger.bold': 'inverse',
+  'danger.bold.hovered': 'inverse',
+  'danger.bold.pressed': 'inverse',
+  'warning.bold': 'warning.inverse',
+  'warning.bold.hovered': 'warning.inverse',
+  'warning.bold.pressed': 'warning.inverse',
+  'success.bold': 'inverse',
+  'success.bold.hovered': 'inverse',
+  'success.bold.pressed': 'inverse',
+  'discovery.bold': 'inverse',
+  'discovery.bold.hovered': 'inverse',
+  'discovery.bold.pressed': 'inverse',
+  'information.bold': 'inverse',
+  'information.bold.hovered': 'inverse',
+  'information.bold.pressed': 'inverse'
+};
+exports.colorMap = colorMap;

package/dist/cjs/internal/role-to-element.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+/**
+ * Adapted straight from react-mui, with a small change.
+ * @see https://www.unpkg.com/browse/react-gui@0.2.1/src/modules/getAccessibilityElementWithSideEffect.js
+ */
+var roleToElementType = {
+  article: 'article',
+  banner: 'header',
+  blockquote: 'blockquote',
+  button: 'button',
+  code: 'code',
+  complementary: 'aside',
+  contentinfo: 'footer',
+  deletion: 'del',
+  emphasis: 'em',
+  figure: 'figure',
+  insertion: 'ins',
+  form: 'form',
+  link: 'a',
+  list: 'ul',
+  listitem: 'li',
+  main: 'main',
+  navigation: 'nav',
+  region: 'section',
+  strong: 'strong',
+  presentation: 'div',
+  group: 'fieldset'
+};
+var _default = roleToElementType;
+exports.default = _default;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/ds-explorations",
-	"version": "0.1.1",
+	"version": "0.1.2",
 	"sideEffects": false
 }

package/dist/es2019/components/box.partial.js

@@ -2,8 +2,67 @@ import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
 import { forwardRef } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { SPACING_SCALE } from '../constants';
+import { SurfaceContext } from './surface-provider';
+
+/**
+ * __Box__
+ *
+ * Box is a primitive component that has the design decisions of the Atlassian Design System baked in.
+ * Renders a `div` by default.
+ *
+ * @internal
+ */
+const Box = /*#__PURE__*/forwardRef(({
+  children,
+  as: Component = 'div',
+  className,
+  display = 'flex',
+  flexDirection,
+  alignItems,
+  justifyContent,
+  backgroundColor: backgroundColorTuple,
+  borderColor: borderColorTuple,
+  borderStyle,
+  borderWidth,
+  borderRadius,
+  padding,
+  paddingBlock,
+  paddingInline,
+  position = 'relative',
+  height,
+  width,
+  UNSAFE_style,
+  testId,
+  ...htmlAttributes
+}, ref) => {
+  const [backgroundColor, backgroundColorFallback] = backgroundColorTuple || [];
+  const [borderColor, borderColorFallback] = borderColorTuple || [];
+  const node = jsx(Component, _extends({
+    style: { ...UNSAFE_style,
+      ...(backgroundColorFallback && {
+        '--ds-bg-fb': backgroundColorFallback
+      }),
+      ...(borderColorFallback && {
+        '--ds-bo-fb': borderColorFallback
+      })
+    } // @ts-ignore
+    ,
+    ref: ref // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+
+  }, htmlAttributes, {
+    className: className,
+    css: [baseStyles, display && displayMap[display], padding && paddingMap[padding], position && positionMap[position], paddingBlock && paddingBlockMap[paddingBlock], paddingInline && paddingInlineMap[paddingInline], alignItems && flexAlignItemsMap[alignItems], justifyContent && flexJustifyContentMap[justifyContent], backgroundColor && backgroundColorMap[backgroundColor], borderColor && borderColorMap[borderColor], borderStyle && borderStyleMap[borderStyle], borderWidth && borderWidthMap[borderWidth], borderRadius && borderRadiusMap[borderRadius], flexDirection && flexDirectionMap[flexDirection], width && widthMap[width], height && heightMap[height]],
+    "data-testid": testId
+  }), children);
+  return backgroundColor ? jsx(SurfaceContext.Provider, {
+    value: backgroundColor
+  }, node) : node;
+});
+Box.displayName = 'Box';
+export default Box; // <<< STYLES GO HERE >>>
+
 const borderStyleMap = {
   none: css({
     borderStyle: 'none'
@@ -91,67 +150,24 @@ const displayMap = {
   })
 };
 const baseStyles = css({
-  boxSizing: 'border-box'
+  boxSizing: 'border-box',
+  appearance: 'none',
+  border: 'none'
 });
-/**
- * __Box__
- *
- * Box is a primitive component that has the design decisions of the Atlassian Design System baked in.
- * Renders a `div` by default.
- *
- * @internal
- */
-
-const Box = /*#__PURE__*/forwardRef(({
-  children,
-  as: Component = 'div',
-  display = 'flex',
-  flexDirection,
-  alignItems,
-  justifyContent,
-  backgroundColor: backgroundColorTuple,
-  borderColor: borderColorTuple,
-  borderStyle,
-  borderWidth,
-  borderRadius,
-  padding,
-  paddingBlock,
-  paddingInline,
-  height,
-  width,
-  UNSAFE_style,
-  testId,
-
-  /**
-   * Pull this out to prevent accidentaly spread
-   */
-  // @ts-ignore
-  // @eslint-disbale-next-line no-unused-vars
-  className: dontUseThisProperty,
-  ...htmlAttributes
-}, ref) => {
-  const [backgroundColor, backgroundColorFallback] = backgroundColorTuple || [];
-  const [borderColor, borderColorFallback] = borderColorTuple || [];
-  return jsx(Component, _extends({
-    style: { ...UNSAFE_style,
-      ...(backgroundColorFallback && {
-        '--ds-bg-fb': backgroundColorFallback
-      }),
-      ...(borderColorFallback && {
-        '--ds-bo-fb': borderColorFallback
-      })
-    },
-    ref: ref // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-
-  }, htmlAttributes, {
-    css: [baseStyles, display && displayMap[display], padding && paddingMap[padding], paddingBlock && paddingBlockMap[paddingBlock], paddingInline && paddingInlineMap[paddingInline], alignItems && flexAlignItemsMap[alignItems], justifyContent && flexJustifyContentMap[justifyContent], backgroundColor && backgroundColorMap[backgroundColor], borderColor && borderColorMap[borderColor], borderStyle && borderStyleMap[borderStyle], borderWidth && borderWidthMap[borderWidth], borderRadius && borderRadiusMap[borderRadius], flexDirection && flexDirectionMap[flexDirection], width && widthMap[width], height && heightMap[height]],
-    "data-testid": testId
-  }), children);
-});
-export default Box;
+const positionMap = {
+  absolute: css({
+    position: 'absolute'
+  }),
+  relative: css({
+    position: 'relative'
+  }),
+  static: css({
+    position: 'static'
+  })
+};
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::c20a27ff33adec8c016044959564409d>>
+ * @codegen <<SignedSource::57b4c7c177fdfae3f7cd4f00287fd30e>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["padding", "paddingBlock", "paddingInline", "width", "height"]
@@ -173,6 +189,9 @@ const paddingMap = {
   'sp-100': css({
     padding: SPACING_SCALE['sp-100']
   }),
+  'sp-150': css({
+    padding: SPACING_SCALE['sp-150']
+  }),
   'sp-200': css({
     padding: SPACING_SCALE['sp-200']
   }),
@@ -208,6 +227,9 @@ const paddingBlockMap = {
   'sp-100': css({
     paddingBlock: SPACING_SCALE['sp-100']
   }),
+  'sp-150': css({
+    paddingBlock: SPACING_SCALE['sp-150']
+  }),
   'sp-200': css({
     paddingBlock: SPACING_SCALE['sp-200']
   }),
@@ -243,6 +265,9 @@ const paddingInlineMap = {
   'sp-100': css({
     paddingInline: SPACING_SCALE['sp-100']
   }),
+  'sp-150': css({
+    paddingInline: SPACING_SCALE['sp-150']
+  }),
   'sp-200': css({
     paddingInline: SPACING_SCALE['sp-200']
   }),
@@ -278,6 +303,9 @@ const widthMap = {
   'sp-100': css({
     width: SPACING_SCALE['sp-100']
   }),
+  'sp-150': css({
+    width: SPACING_SCALE['sp-150']
+  }),
   'sp-200': css({
     width: SPACING_SCALE['sp-200']
   }),
@@ -313,6 +341,9 @@ const heightMap = {
   'sp-100': css({
     height: SPACING_SCALE['sp-100']
   }),
+  'sp-150': css({
+    height: SPACING_SCALE['sp-150']
+  }),
   'sp-200': css({
     height: SPACING_SCALE['sp-200']
   }),
@@ -338,7 +369,7 @@ const heightMap = {
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::e3f27406477352f51168b4108558f051>>
+ * @codegen <<SignedSource::ebb55786a54803214357d0eef0cac448>>
  * @codegenId colors
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["border", "background"]

package/dist/es2019/components/inline.partial.js

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { Children, forwardRef, Fragment } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { SPACING_SCALE } from '../constants';
 import Text from './text.partial';
 const flexAlignItemsMap = {
@@ -58,10 +58,11 @@ const Inline = /*#__PURE__*/forwardRef(({
     return jsx(Fragment, null, divider && index > 0 ? dividerComponent : null, child);
   }));
 });
+Inline.displayName = 'Inline';
 export default Inline;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::ac3192fbc453a94ab5e720d0273556ef>>
+ * @codegen <<SignedSource::36d00b5586593733c7f84e9a10ddb7fd>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["gap"]
@@ -83,6 +84,9 @@ const gapMap = {
   'sp-100': css({
     gap: SPACING_SCALE['sp-100']
   }),
+  'sp-150': css({
+    gap: SPACING_SCALE['sp-150']
+  }),
   'sp-200': css({
     gap: SPACING_SCALE['sp-200']
   }),