@atlaskit/ds-explorations 0.0.3 → 0.1.2

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

@@ -1,64 +1,167 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 
-var _core = require("@emotion/core");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("@emotion/react");
+
+var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
+
+var _colorMap = require("../internal/color-map");
 
-/** @jsx jsx */
-// These values are pulled from @atlaskit/theme
-var fontSize = 14;
-var fontSizeExtraSmall = 11;
-var fontSizeSmall = 12;
+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 = {
-  extraSmall: (0, _core.css)({
-    fontSize: fontSizeExtraSmall
+  '11px': (0, _react.css)({
+    fontSize: '11px'
   }),
-  small: (0, _core.css)({
-    fontSize: fontSizeSmall
+  '12px': (0, _react.css)({
+    fontSize: '12px'
   }),
-  normal: (0, _core.css)({
-    fontSize: fontSize
+  '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, _react.css)({
+    lineHeight: '12px'
+  }),
+  '16px': (0, _react.css)({
+    lineHeight: '16px'
+  }),
+  '20px': (0, _react.css)({
+    lineHeight: '20px'
+  }),
+  '24px': (0, _react.css)({
+    lineHeight: '24px'
+  }),
+  '28px': (0, _react.css)({
+    lineHeight: '28px'
+  }),
+  '32px': (0, _react.css)({
+    lineHeight: '32px'
+  }),
+  '40px': (0, _react.css)({
+    lineHeight: '40px'
   })
 };
-var baseStyles = (0, _core.css)({
+var textAlignMap = {
+  center: (0, _react.css)({
+    textAlign: 'center'
+  }),
+  end: (0, _react.css)({
+    textAlign: 'end'
+  }),
+  start: (0, _react.css)({
+    textAlign: 'start'
+  })
+};
+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__
  *
- * A text {description}.
+ * Text is a primitive component that has the Atlassian Design System's design guidelines baked in.
+ * This includes considerations for text attributes such as color, font size, font weight, and line height.
+ * It renders a `span` by default.
  *
  * @internal
  */
 
-function Text(_ref) {
+var Text = function Text(_ref) {
+  var _colorMap$surface;
+
   var _ref$as = _ref.as,
       Component = _ref$as === void 0 ? 'span' : _ref$as,
       children = _ref.children,
-      color = _ref.color,
+      colorTuple = _ref.color,
       fontSize = _ref.fontSize,
-      fontWeight = _ref.fontWeight;
-  return (0, _core.jsx)(Component, {
-    css: [baseStyles, color && textColorMap[color], fontSize && fontSizeMap[fontSize], fontWeight && fontWeightMap[fontWeight]]
+      fontWeight = _ref.fontWeight,
+      lineHeight = _ref.lineHeight,
+      _ref$shouldTruncate = _ref.shouldTruncate,
+      shouldTruncate = _ref$shouldTruncate === void 0 ? false : _ref$shouldTruncate,
+      textAlign = _ref.textAlign,
+      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),
+      _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];
+
+  (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], shouldTruncate && truncateStyles, textAlign && textAlignMap[textAlign], textTransform && textTransformMap[textTransform], verticalAlign && verticalAlignMap[verticalAlign]],
+    "data-testid": testId
   }, children);
-}
+};
 
 var _default = Text;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::85816aeddf2947ff7678c0c551db336c>>
+ * @codegen <<SignedSource::140ffff6e1310c1c37e2067e2c232b92>>
  * @codegenId colors
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["text"]
@@ -66,44 +169,44 @@ var _default = Text;
 
 exports.default = _default;
 var textColorMap = {
-  default: (0, _core.css)({
-    color: "var(--ds-text, #172B4D)"
+  'color.text': (0, _react.css)({
+    color: "var(--ds-text, var(--ds-co-fb))"
   }),
-  subtle: (0, _core.css)({
-    color: "var(--ds-text-subtle, #44546F)"
+  subtle: (0, _react.css)({
+    color: "var(--ds-text-subtle, var(--ds-co-fb))"
   }),
-  subtlest: (0, _core.css)({
-    color: "var(--ds-text-subtlest, #626F86)"
+  subtlest: (0, _react.css)({
+    color: "var(--ds-text-subtlest, var(--ds-co-fb))"
   }),
-  disabled: (0, _core.css)({
-    color: "var(--ds-text-disabled, #091E424F)"
+  disabled: (0, _react.css)({
+    color: "var(--ds-text-disabled, var(--ds-co-fb))"
   }),
-  inverse: (0, _core.css)({
-    color: "var(--ds-text-inverse, #FFFFFF)"
+  inverse: (0, _react.css)({
+    color: "var(--ds-text-inverse, var(--ds-co-fb))"
   }),
-  brand: (0, _core.css)({
-    color: "var(--ds-text-brand, #0C66E4)"
+  brand: (0, _react.css)({
+    color: "var(--ds-text-brand, var(--ds-co-fb))"
   }),
-  selected: (0, _core.css)({
-    color: "var(--ds-text-selected, #0C66E4)"
+  selected: (0, _react.css)({
+    color: "var(--ds-text-selected, var(--ds-co-fb))"
   }),
-  danger: (0, _core.css)({
-    color: "var(--ds-text-danger, #AE2A19)"
+  danger: (0, _react.css)({
+    color: "var(--ds-text-danger, var(--ds-co-fb))"
   }),
-  warning: (0, _core.css)({
-    color: "var(--ds-text-warning, #974F0C)"
+  warning: (0, _react.css)({
+    color: "var(--ds-text-warning, var(--ds-co-fb))"
   }),
-  'warning.inverse': (0, _core.css)({
-    color: "var(--ds-text-warning-inverse, #172B4D)"
+  'warning.inverse': (0, _react.css)({
+    color: "var(--ds-text-warning-inverse, var(--ds-co-fb))"
   }),
-  success: (0, _core.css)({
-    color: "var(--ds-text-success, #216E4E)"
+  success: (0, _react.css)({
+    color: "var(--ds-text-success, var(--ds-co-fb))"
   }),
-  discovery: (0, _core.css)({
-    color: "var(--ds-text-discovery, #5E4DB2)"
+  discovery: (0, _react.css)({
+    color: "var(--ds-text-discovery, var(--ds-co-fb))"
   }),
-  information: (0, _core.css)({
-    color: "var(--ds-text-information, #0055CC)"
+  information: (0, _react.css)({
+    color: "var(--ds-text-information, var(--ds-co-fb))"
   })
 };
 /**

package/dist/cjs/components/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/constants.js

@@ -5,13 +5,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SPACING_SCALE = void 0;
 var SPACING_SCALE = {
+  'sp-0': 0,
   'sp-25': 2,
   'sp-50': 4,
   'sp-75': 6,
   'sp-100': 8,
+  'sp-150': 12,
   'sp-200': 16,
   'sp-300': 24,
   'sp-400': 32,
+  'sp-500': 40,
   'sp-600': 48,
   'sp-800': 64
 };

package/dist/cjs/index.js

@@ -1,8 +1,55 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-var _default = {};
-exports.default = _default;
+Object.defineProperty(exports, "UNSAFE_Box", {
+  enumerable: true,
+  get: function get() {
+    return _box.default;
+  }
+});
+Object.defineProperty(exports, "UNSAFE_Inline", {
+  enumerable: true,
+  get: function get() {
+    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() {
+    return _stack.default;
+  }
+});
+Object.defineProperty(exports, "UNSAFE_Text", {
+  enumerable: true,
+  get: function get() {
+    return _text.default;
+  }
+});
+
+var _box = _interopRequireDefault(require("./components/box.partial"));
+
+var _text = _interopRequireDefault(require("./components/text.partial"));
+
+var _inline = _interopRequireDefault(require("./components/inline.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.0.3",
+	"version": "0.1.2",
 	"sideEffects": false
 }