@atlaskit/ds-explorations 0.0.1 → 0.0.2

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/ds-explorations
 
+## 0.0.2
+
+### Patch Changes
+
+- [`232b2b765b9`](https://bitbucket.org/atlassian/atlassian-frontend/commits/232b2b765b9) - Internal changes to the way styles are created for the `Box` and `Text` components. Both components now use a wrapper over the `af/codegen`'s expected API to generate styles and types from the tokens package.
+- [`29b8b26ee79`](https://bitbucket.org/atlassian/atlassian-frontend/commits/29b8b26ee79) - Updates Box, Text to include partial implementations to spike and experiment with different usages.
+
 ## 0.0.1
 
 ### Patch Changes

package/LICENSE

@@ -0,0 +1,13 @@
+Copyright 2019 Atlassian Pty Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

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

@@ -0,0 +1,360 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _core = require("@emotion/core");
+
+var _constants = require("../constants");
+
+var _excluded = ["children", "as", "backgroundColor", "borderColor", "borderRadius", "alignItems", "flexDirection", "paddingBlock", "paddingInline", "gap", "height", "width", "display", "style", "testId", "className"];
+var borderRadiusMap = {
+  normal: (0, _core.css)({
+    borderRadius: '3px'
+  }),
+  rounded: (0, _core.css)({
+    borderRadius: '50%'
+  }),
+  badge: (0, _core.css)({
+    borderRadius: '8px'
+  })
+};
+var flexDirectionMap = {
+  column: (0, _core.css)({
+    flexDirection: 'column'
+  }),
+  row: (0, _core.css)({
+    flexDirection: 'row'
+  })
+};
+var flexAlignMap = {
+  center: (0, _core.css)({
+    alignItems: 'center'
+  }),
+  baseline: (0, _core.css)({
+    alignItems: 'baseline'
+  })
+};
+var displayMap = {
+  flex: (0, _core.css)({
+    display: 'flex'
+  }),
+  inline: (0, _core.css)({
+    display: 'inline'
+  }),
+  inlineFlex: (0, _core.css)({
+    display: 'inline-flex'
+  })
+};
+/**
+ * __Box__
+ *
+ * A Box {description}.
+ *
+ * @internal
+ */
+
+function Box(_ref) {
+  var children = _ref.children,
+      _ref$as = _ref.as,
+      Component = _ref$as === void 0 ? 'div' : _ref$as,
+      backgroundColor = _ref.backgroundColor,
+      borderColor = _ref.borderColor,
+      borderRadius = _ref.borderRadius,
+      alignItems = _ref.alignItems,
+      flexDirection = _ref.flexDirection,
+      paddingBlock = _ref.paddingBlock,
+      paddingInline = _ref.paddingInline,
+      gap = _ref.gap,
+      height = _ref.height,
+      width = _ref.width,
+      _ref$display = _ref.display,
+      display = _ref$display === void 0 ? 'flex' : _ref$display,
+      style = _ref.style,
+      testId = _ref.testId,
+      dontUseThisProperty = _ref.className,
+      htmlAttributes = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return (0, _core.jsx)(Component, (0, _extends2.default)({
+    style: style // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+
+  }, htmlAttributes, {
+    css: [display && displayMap[display], paddingBlock && paddingBlockMap[paddingBlock], paddingInline && paddingInlineMap[paddingInline], alignItems && flexAlignMap[alignItems], backgroundColor && backgroundColorMap[backgroundColor], borderColor && borderColorMap[borderColor], borderRadius && borderRadiusMap[borderRadius], flexDirection && flexDirectionMap[flexDirection], gap && gapMap[gap], width && widthMap[width], height && heightMap[height]],
+    "data-testid": testId
+  }), children);
+}
+
+var _default = Box;
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::7bc92b308b72d1fe4aa9d758c2d1b073>>
+ * @codegenId spacing
+ * @codegenCommand yarn codegen-styles
+ * @codegenParams ["paddingBlock", "paddingInline", "width", "height", "gap"]
+ */
+
+exports.default = _default;
+var paddingBlockMap = {
+  'sp-25': (0, _core.css)({
+    paddingBlock: _constants.SPACING_SCALE['sp-25']
+  }),
+  'sp-50': (0, _core.css)({
+    paddingBlock: _constants.SPACING_SCALE['sp-50']
+  }),
+  'sp-75': (0, _core.css)({
+    paddingBlock: _constants.SPACING_SCALE['sp-75']
+  }),
+  'sp-100': (0, _core.css)({
+    paddingBlock: _constants.SPACING_SCALE['sp-100']
+  }),
+  'sp-200': (0, _core.css)({
+    paddingBlock: _constants.SPACING_SCALE['sp-200']
+  }),
+  'sp-300': (0, _core.css)({
+    paddingBlock: _constants.SPACING_SCALE['sp-300']
+  }),
+  'sp-400': (0, _core.css)({
+    paddingBlock: _constants.SPACING_SCALE['sp-400']
+  }),
+  'sp-600': (0, _core.css)({
+    paddingBlock: _constants.SPACING_SCALE['sp-600']
+  }),
+  'sp-800': (0, _core.css)({
+    paddingBlock: _constants.SPACING_SCALE['sp-800']
+  })
+};
+var paddingInlineMap = {
+  'sp-25': (0, _core.css)({
+    paddingInline: _constants.SPACING_SCALE['sp-25']
+  }),
+  'sp-50': (0, _core.css)({
+    paddingInline: _constants.SPACING_SCALE['sp-50']
+  }),
+  'sp-75': (0, _core.css)({
+    paddingInline: _constants.SPACING_SCALE['sp-75']
+  }),
+  'sp-100': (0, _core.css)({
+    paddingInline: _constants.SPACING_SCALE['sp-100']
+  }),
+  'sp-200': (0, _core.css)({
+    paddingInline: _constants.SPACING_SCALE['sp-200']
+  }),
+  'sp-300': (0, _core.css)({
+    paddingInline: _constants.SPACING_SCALE['sp-300']
+  }),
+  'sp-400': (0, _core.css)({
+    paddingInline: _constants.SPACING_SCALE['sp-400']
+  }),
+  'sp-600': (0, _core.css)({
+    paddingInline: _constants.SPACING_SCALE['sp-600']
+  }),
+  'sp-800': (0, _core.css)({
+    paddingInline: _constants.SPACING_SCALE['sp-800']
+  })
+};
+var widthMap = {
+  'sp-25': (0, _core.css)({
+    width: _constants.SPACING_SCALE['sp-25']
+  }),
+  'sp-50': (0, _core.css)({
+    width: _constants.SPACING_SCALE['sp-50']
+  }),
+  'sp-75': (0, _core.css)({
+    width: _constants.SPACING_SCALE['sp-75']
+  }),
+  'sp-100': (0, _core.css)({
+    width: _constants.SPACING_SCALE['sp-100']
+  }),
+  'sp-200': (0, _core.css)({
+    width: _constants.SPACING_SCALE['sp-200']
+  }),
+  'sp-300': (0, _core.css)({
+    width: _constants.SPACING_SCALE['sp-300']
+  }),
+  'sp-400': (0, _core.css)({
+    width: _constants.SPACING_SCALE['sp-400']
+  }),
+  'sp-600': (0, _core.css)({
+    width: _constants.SPACING_SCALE['sp-600']
+  }),
+  'sp-800': (0, _core.css)({
+    width: _constants.SPACING_SCALE['sp-800']
+  })
+};
+var heightMap = {
+  'sp-25': (0, _core.css)({
+    height: _constants.SPACING_SCALE['sp-25']
+  }),
+  'sp-50': (0, _core.css)({
+    height: _constants.SPACING_SCALE['sp-50']
+  }),
+  'sp-75': (0, _core.css)({
+    height: _constants.SPACING_SCALE['sp-75']
+  }),
+  'sp-100': (0, _core.css)({
+    height: _constants.SPACING_SCALE['sp-100']
+  }),
+  'sp-200': (0, _core.css)({
+    height: _constants.SPACING_SCALE['sp-200']
+  }),
+  'sp-300': (0, _core.css)({
+    height: _constants.SPACING_SCALE['sp-300']
+  }),
+  'sp-400': (0, _core.css)({
+    height: _constants.SPACING_SCALE['sp-400']
+  }),
+  'sp-600': (0, _core.css)({
+    height: _constants.SPACING_SCALE['sp-600']
+  }),
+  'sp-800': (0, _core.css)({
+    height: _constants.SPACING_SCALE['sp-800']
+  })
+};
+var gapMap = {
+  '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-600': (0, _core.css)({
+    gap: _constants.SPACING_SCALE['sp-600']
+  }),
+  'sp-800': (0, _core.css)({
+    gap: _constants.SPACING_SCALE['sp-800']
+  })
+};
+/**
+ * @codegenEnd
+ */
+
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::cd05b856816392f4ac8e227854831f76>>
+ * @codegenId colors
+ * @codegenCommand yarn codegen-styles
+ * @codegenParams ["border", "background"]
+ */
+
+var borderColorMap = {
+  default: (0, _core.css)({
+    borderColor: "var(--ds-border, #091E4224)"
+  }),
+  inverse: (0, _core.css)({
+    borderColor: "var(--ds-border-inverse, #FFFFFF)"
+  }),
+  focused: (0, _core.css)({
+    borderColor: "var(--ds-border-focused, #388BFF)"
+  }),
+  input: (0, _core.css)({
+    borderColor: "var(--ds-border-input, #091E4224)"
+  }),
+  disabled: (0, _core.css)({
+    borderColor: "var(--ds-border-disabled, #091E420F)"
+  }),
+  brand: (0, _core.css)({
+    borderColor: "var(--ds-border-brand, #0C66E4)"
+  }),
+  selected: (0, _core.css)({
+    borderColor: "var(--ds-border-selected, #0C66E4)"
+  }),
+  danger: (0, _core.css)({
+    borderColor: "var(--ds-border-danger, #E34935)"
+  }),
+  warning: (0, _core.css)({
+    borderColor: "var(--ds-border-warning, #D97008)"
+  }),
+  success: (0, _core.css)({
+    borderColor: "var(--ds-border-success, #22A06B)"
+  }),
+  discovery: (0, _core.css)({
+    borderColor: "var(--ds-border-discovery, #8270DB)"
+  }),
+  information: (0, _core.css)({
+    borderColor: "var(--ds-border-information, #1D7AFC)"
+  })
+};
+var backgroundColorMap = {
+  disabled: (0, _core.css)({
+    backgroundColor: "var(--ds-background-disabled, #091E420F)"
+  }),
+  'inverse.subtle': (0, _core.css)({
+    backgroundColor: "var(--ds-background-inverse-subtle, #00000029)"
+  }),
+  input: (0, _core.css)({
+    backgroundColor: "var(--ds-background-input, #FFFFFF)"
+  }),
+  neutral: (0, _core.css)({
+    backgroundColor: "var(--ds-background-neutral, #091E420F)"
+  }),
+  'neutral.subtle': (0, _core.css)({
+    backgroundColor: "var(--ds-background-neutral-subtle, #00000000)"
+  }),
+  'neutral.bold': (0, _core.css)({
+    backgroundColor: "var(--ds-background-neutral-bold, #44546F)"
+  }),
+  'brand.bold': (0, _core.css)({
+    backgroundColor: "var(--ds-background-brand-bold, #0C66E4)"
+  }),
+  selected: (0, _core.css)({
+    backgroundColor: "var(--ds-background-selected, #E9F2FF)"
+  }),
+  'selected.bold': (0, _core.css)({
+    backgroundColor: "var(--ds-background-selected-bold, #0C66E4)"
+  }),
+  danger: (0, _core.css)({
+    backgroundColor: "var(--ds-background-danger, #FFEDEB)"
+  }),
+  'danger.bold': (0, _core.css)({
+    backgroundColor: "var(--ds-background-danger-bold, #CA3521)"
+  }),
+  warning: (0, _core.css)({
+    backgroundColor: "var(--ds-background-warning, #FFF7D6)"
+  }),
+  'warning.bold': (0, _core.css)({
+    backgroundColor: "var(--ds-background-warning-bold, #E2B203)"
+  }),
+  success: (0, _core.css)({
+    backgroundColor: "var(--ds-background-success, #DFFCF0)"
+  }),
+  'success.bold': (0, _core.css)({
+    backgroundColor: "var(--ds-background-success-bold, #1F845A)"
+  }),
+  discovery: (0, _core.css)({
+    backgroundColor: "var(--ds-background-discovery, #F3F0FF)"
+  }),
+  'discovery.bold': (0, _core.css)({
+    backgroundColor: "var(--ds-background-discovery-bold, #6E5DC6)"
+  }),
+  information: (0, _core.css)({
+    backgroundColor: "var(--ds-background-information, #E9F2FF)"
+  }),
+  'information.bold': (0, _core.css)({
+    backgroundColor: "var(--ds-background-information-bold, #0C66E4)"
+  })
+};
+/**
+ * @codegenEnd
+ */

package/dist/cjs/components/inline.js

@@ -7,9 +7,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _react = require("react");
+
 var _core = require("@emotion/core");
 
-var _box = _interopRequireDefault(require("./box"));
+var _box = _interopRequireDefault(require("./box.partial"));
 
 /** @jsx jsx */
 
@@ -21,8 +23,22 @@ var _box = _interopRequireDefault(require("./box"));
  * @internal
  */
 function Inline(_ref) {
-  var children = _ref.children;
-  return (0, _core.jsx)(_box.default, null, children);
+  var as = _ref.as,
+      gap = _ref.gap,
+      separator = _ref.separator,
+      children = _ref.children,
+      alignItems = _ref.alignItems;
+
+  var childCount = _react.Children.count(children);
+
+  return (0, _core.jsx)(_box.default, {
+    as: as,
+    flexDirection: "row",
+    alignItems: alignItems,
+    gap: gap
+  }, _react.Children.map(children, function (child, index) {
+    return (0, _core.jsx)(_react.Fragment, null, child, separator && index !== childCount - 1 && (0, _core.jsx)(_react.Fragment, null, separator));
+  }));
 }
 
 var _default = Inline;

package/dist/cjs/components/stack.js

@@ -9,7 +9,7 @@ exports.default = void 0;
 
 var _core = require("@emotion/core");
 
-var _box = _interopRequireDefault(require("./box"));
+var _box = _interopRequireDefault(require("./box.partial"));
 
 /** @jsx jsx */
 
@@ -21,8 +21,12 @@ var _box = _interopRequireDefault(require("./box"));
  * @internal
  */
 function Stack(_ref) {
-  var children = _ref.children;
-  return (0, _core.jsx)(_box.default, null, children);
+  var gap = _ref.gap,
+      children = _ref.children;
+  return (0, _core.jsx)(_box.default, {
+    flexDirection: "column",
+    gap: gap
+  }, children);
 }
 
 var _default = Stack;

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

@@ -0,0 +1,111 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _core = require("@emotion/core");
+
+/** @jsx jsx */
+// These values are pulled from @atlaskit/theme
+var fontSize = 14;
+var fontSizeExtraSmall = 11;
+var fontSizeSmall = 12;
+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
+  }),
+  small: (0, _core.css)({
+    fontSize: fontSizeSmall
+  }),
+  normal: (0, _core.css)({
+    fontSize: fontSize
+  })
+};
+var fontWeightMap = {
+  400: (0, _core.css)({
+    fontWeight: 400
+  }),
+  500: (0, _core.css)({
+    fontWeight: 500
+  })
+};
+var baseStyles = (0, _core.css)({
+  fontFamily: fontFamily
+});
+/**
+ * __Text__
+ *
+ * A text {description}.
+ *
+ * @internal
+ */
+
+function Text(_ref) {
+  var _ref$as = _ref.as,
+      Component = _ref$as === void 0 ? 'span' : _ref$as,
+      children = _ref.children,
+      color = _ref.color,
+      fontSize = _ref.fontSize,
+      fontWeight = _ref.fontWeight;
+  return (0, _core.jsx)(Component, {
+    css: [baseStyles, color && textColorMap[color], fontSize && fontSizeMap[fontSize], fontWeight && fontWeightMap[fontWeight]]
+  }, children);
+}
+
+var _default = Text;
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::588616346f4a4bd0abb93bf324335944>>
+ * @codegenId colors
+ * @codegenCommand yarn codegen-styles
+ * @codegenParams ["text"]
+ */
+
+exports.default = _default;
+var textColorMap = {
+  default: (0, _core.css)({
+    color: "var(--ds-text, #172B4D)"
+  }),
+  subtle: (0, _core.css)({
+    color: "var(--ds-text-subtle, #44546F)"
+  }),
+  subtlest: (0, _core.css)({
+    color: "var(--ds-text-subtlest, #626F86)"
+  }),
+  disabled: (0, _core.css)({
+    color: "var(--ds-text-disabled, #8993A5)"
+  }),
+  inverse: (0, _core.css)({
+    color: "var(--ds-text-inverse, #FFFFFF)"
+  }),
+  brand: (0, _core.css)({
+    color: "var(--ds-text-brand, #0C66E4)"
+  }),
+  selected: (0, _core.css)({
+    color: "var(--ds-text-selected, #0C66E4)"
+  }),
+  danger: (0, _core.css)({
+    color: "var(--ds-text-danger, #AE2A19)"
+  }),
+  warning: (0, _core.css)({
+    color: "var(--ds-text-warning, #974F0C)"
+  }),
+  'warning.inverse': (0, _core.css)({
+    color: "var(--ds-text-warning-inverse, #172B4D)"
+  }),
+  success: (0, _core.css)({
+    color: "var(--ds-text-success, #216E4E)"
+  }),
+  discovery: (0, _core.css)({
+    color: "var(--ds-text-discovery, #5E4DB2)"
+  }),
+  information: (0, _core.css)({
+    color: "var(--ds-text-information, #0055CC)"
+  })
+};
+/**
+ * @codegenEnd
+ */

package/dist/cjs/constants.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SPACING_SCALE = void 0;
+var SPACING_SCALE = {
+  'sp-25': 2,
+  'sp-50': 4,
+  'sp-75': 6,
+  'sp-100': 8,
+  'sp-200': 16,
+  'sp-300': 24,
+  'sp-400': 32,
+  'sp-600': 48,
+  'sp-800': 64
+};
+exports.SPACING_SCALE = SPACING_SCALE;

package/dist/cjs/version.json

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