@atlaskit/ds-explorations 0.0.2 → 0.1.1

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

@@ -0,0 +1,112 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _core = require("@emotion/core");
+
+var _constants = require("../constants");
+
+/** @jsx jsx */
+var flexAlignItemsMap = {
+  center: (0, _core.css)({
+    alignItems: 'center'
+  }),
+  baseline: (0, _core.css)({
+    alignItems: 'baseline'
+  }),
+  flexStart: (0, _core.css)({
+    alignItems: 'flex-start'
+  }),
+  flexEnd: (0, _core.css)({
+    alignItems: 'flex-end'
+  })
+};
+var flexJustifyContentMap = {
+  center: (0, _core.css)({
+    justifyContent: 'center'
+  }),
+  flexStart: (0, _core.css)({
+    justifyContent: 'flex-start'
+  }),
+  flexEnd: (0, _core.css)({
+    justifyContent: 'flex-end'
+  })
+};
+var baseStyles = (0, _core.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.
+ * Renders a `div` by default.
+ *
+ */
+
+var Stack = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var gap = _ref.gap,
+      alignItems = _ref.alignItems,
+      justifyContent = _ref.justifyContent,
+      children = _ref.children,
+      testId = _ref.testId;
+  return (0, _core.jsx)("div", {
+    css: [baseStyles, gap && gapMap[gap], alignItems && flexAlignItemsMap[alignItems], justifyContent && flexJustifyContentMap[justifyContent]],
+    "data-testid": testId,
+    ref: ref
+  }, children);
+});
+var _default = Stack;
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::ac3192fbc453a94ab5e720d0273556ef>>
+ * @codegenId spacing
+ * @codegenCommand yarn codegen-styles
+ * @codegenParams ["gap"]
+ */
+
+exports.default = _default;
+var gapMap = {
+  'sp-0': (0, _core.css)({
+    gap: _constants.SPACING_SCALE['sp-0']
+  }),
+  'sp-25': (0, _core.css)({
+    gap: _constants.SPACING_SCALE['sp-25']
+  }),
+  'sp-50': (0, _core.css)({
+    gap: _constants.SPACING_SCALE['sp-50']
+  }),
+  'sp-75': (0, _core.css)({
+    gap: _constants.SPACING_SCALE['sp-75']
+  }),
+  'sp-100': (0, _core.css)({
+    gap: _constants.SPACING_SCALE['sp-100']
+  }),
+  'sp-200': (0, _core.css)({
+    gap: _constants.SPACING_SCALE['sp-200']
+  }),
+  'sp-300': (0, _core.css)({
+    gap: _constants.SPACING_SCALE['sp-300']
+  }),
+  'sp-400': (0, _core.css)({
+    gap: _constants.SPACING_SCALE['sp-400']
+  }),
+  'sp-500': (0, _core.css)({
+    gap: _constants.SPACING_SCALE['sp-500']
+  }),
+  'sp-600': (0, _core.css)({
+    gap: _constants.SPACING_SCALE['sp-600']
+  }),
+  'sp-800': (0, _core.css)({
+    gap: _constants.SPACING_SCALE['sp-800']
+  })
+};
+/**
+ * @codegenEnd
+ */

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

@@ -1,64 +1,122 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _core = require("@emotion/core");
 
-/** @jsx jsx */
-// These values are pulled from @atlaskit/theme
-var fontSize = 14;
-var fontSizeExtraSmall = 11;
-var fontSizeSmall = 12;
+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 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
+  '11': (0, _core.css)({
+    fontSize: '11px'
   }),
-  small: (0, _core.css)({
-    fontSize: fontSizeSmall
+  '12': (0, _core.css)({
+    fontSize: '12px'
   }),
-  normal: (0, _core.css)({
-    fontSize: fontSize
+  '14': (0, _core.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, _core.css)({
     fontWeight: 400
   }),
-  500: (0, _core.css)({
+  '500': (0, _core.css)({
     fontWeight: 500
   })
 };
+var lineHeightMap = {
+  '12px': (0, _core.css)({
+    lineHeight: '12px'
+  }),
+  '16px': (0, _core.css)({
+    lineHeight: '16px'
+  }),
+  '20px': (0, _core.css)({
+    lineHeight: '20px'
+  }),
+  '24px': (0, _core.css)({
+    lineHeight: '24px'
+  }),
+  '28px': (0, _core.css)({
+    lineHeight: '28px'
+  }),
+  '32px': (0, _core.css)({
+    lineHeight: '32px'
+  }),
+  '40px': (0, _core.css)({
+    lineHeight: '40px'
+  })
+};
+var textAlignMap = {
+  center: (0, _core.css)({
+    textAlign: 'center'
+  }),
+  end: (0, _core.css)({
+    textAlign: 'end'
+  }),
+  start: (0, _core.css)({
+    textAlign: 'start'
+  })
+};
 var baseStyles = (0, _core.css)({
   fontFamily: fontFamily
 });
 /**
  * __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 _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;
+      fontWeight = _ref.fontWeight,
+      lineHeight = _ref.lineHeight,
+      textAlign = _ref.textAlign,
+      href = _ref.href,
+      testId = _ref.testId,
+      UNSAFE_style = _ref.UNSAFE_style;
+
+  var _ref2 = colorTuple || [],
+      _ref3 = (0, _slicedToArray2.default)(_ref2, 2),
+      color = _ref3[0],
+      fallback = _ref3[1];
+
   return (0, _core.jsx)(Component, {
-    css: [baseStyles, color && textColorMap[color], fontSize && fontSizeMap[fontSize], fontWeight && fontWeightMap[fontWeight]]
+    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,
+    "data-testid": testId
   }, children);
-}
+};
 
 var _default = Text;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::588616346f4a4bd0abb93bf324335944>>
+ * @codegen <<SignedSource::85a0a0bc073c7af8fd63101d6c88d59e>>
  * @codegenId colors
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["text"]
@@ -66,44 +124,44 @@ var _default = Text;
 
 exports.default = _default;
 var textColorMap = {
-  default: (0, _core.css)({
-    color: "var(--ds-text, #172B4D)"
+  'color.text': (0, _core.css)({
+    color: "var(--ds-text, var(--ds-co-fb))"
   }),
   subtle: (0, _core.css)({
-    color: "var(--ds-text-subtle, #44546F)"
+    color: "var(--ds-text-subtle, var(--ds-co-fb))"
   }),
   subtlest: (0, _core.css)({
-    color: "var(--ds-text-subtlest, #626F86)"
+    color: "var(--ds-text-subtlest, var(--ds-co-fb))"
   }),
   disabled: (0, _core.css)({
-    color: "var(--ds-text-disabled, #8993A5)"
+    color: "var(--ds-text-disabled, var(--ds-co-fb))"
   }),
   inverse: (0, _core.css)({
-    color: "var(--ds-text-inverse, #FFFFFF)"
+    color: "var(--ds-text-inverse, var(--ds-co-fb))"
   }),
   brand: (0, _core.css)({
-    color: "var(--ds-text-brand, #0C66E4)"
+    color: "var(--ds-text-brand, var(--ds-co-fb))"
   }),
   selected: (0, _core.css)({
-    color: "var(--ds-text-selected, #0C66E4)"
+    color: "var(--ds-text-selected, var(--ds-co-fb))"
   }),
   danger: (0, _core.css)({
-    color: "var(--ds-text-danger, #AE2A19)"
+    color: "var(--ds-text-danger, var(--ds-co-fb))"
   }),
   warning: (0, _core.css)({
-    color: "var(--ds-text-warning, #974F0C)"
+    color: "var(--ds-text-warning, var(--ds-co-fb))"
   }),
   'warning.inverse': (0, _core.css)({
-    color: "var(--ds-text-warning-inverse, #172B4D)"
+    color: "var(--ds-text-warning-inverse, var(--ds-co-fb))"
   }),
   success: (0, _core.css)({
-    color: "var(--ds-text-success, #216E4E)"
+    color: "var(--ds-text-success, var(--ds-co-fb))"
   }),
   discovery: (0, _core.css)({
-    color: "var(--ds-text-discovery, #5E4DB2)"
+    color: "var(--ds-text-discovery, var(--ds-co-fb))"
   }),
   information: (0, _core.css)({
-    color: "var(--ds-text-information, #0055CC)"
+    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,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SPACING_SCALE = void 0;
 var SPACING_SCALE = {
+  'sp-0': 0,
   'sp-25': 2,
   'sp-50': 4,
   'sp-75': 6,
@@ -12,6 +13,7 @@ var SPACING_SCALE = {
   '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,39 @@
 "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_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"));

package/dist/cjs/version.json

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