@atlaskit/ds-explorations 0.0.3 → 0.1.2

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

@@ -0,0 +1,124 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _react2 = require("@emotion/react");
+
+var _constants = require("../constants");
+
+var _text = _interopRequireDefault(require("./text.partial"));
+
+/** @jsx jsx */
+var flexAlignItemsMap = {
+  center: (0, _react2.css)({
+    alignItems: 'center'
+  }),
+  baseline: (0, _react2.css)({
+    alignItems: 'baseline'
+  }),
+  flexStart: (0, _react2.css)({
+    alignItems: 'flex-start'
+  }),
+  flexEnd: (0, _react2.css)({
+    alignItems: 'flex-end'
+  })
+};
+var flexJustifyContentMap = {
+  center: (0, _react2.css)({
+    justifyContent: 'center'
+  }),
+  flexStart: (0, _react2.css)({
+    justifyContent: 'flex-start'
+  }),
+  flexEnd: (0, _react2.css)({
+    justifyContent: 'flex-end'
+  })
+};
+var baseStyles = (0, _react2.css)({
+  display: 'flex',
+  boxSizing: 'border-box',
+  flexDirection: 'row'
+});
+/**
+ * __Inline__
+ *
+ * Inline is a primitive component based on flexbox that manages the horizontal layout of direct children.
+ * Renders a `div` by default.
+ *
+ */
+
+var Inline = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var gap = _ref.gap,
+      alignItems = _ref.alignItems,
+      justifyContent = _ref.justifyContent,
+      divider = _ref.divider,
+      children = _ref.children,
+      testId = _ref.testId;
+  var dividerComponent = typeof divider === 'string' ? (0, _react2.jsx)(_text.default, null, divider) : divider;
+  return (0, _react2.jsx)("div", {
+    css: [baseStyles, gap && gapMap[gap], alignItems && flexAlignItemsMap[alignItems], justifyContent && flexJustifyContentMap[justifyContent]],
+    "data-testid": testId,
+    ref: ref
+  }, _react.Children.map(children, function (child, index) {
+    return (0, _react2.jsx)(_react.Fragment, null, divider && index > 0 ? dividerComponent : null, child);
+  }));
+});
+Inline.displayName = 'Inline';
+var _default = Inline;
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::36d00b5586593733c7f84e9a10ddb7fd>>
+ * @codegenId spacing
+ * @codegenCommand yarn codegen-styles
+ * @codegenParams ["gap"]
+ */
+
+exports.default = _default;
+var gapMap = {
+  'sp-0': (0, _react2.css)({
+    gap: _constants.SPACING_SCALE['sp-0']
+  }),
+  'sp-25': (0, _react2.css)({
+    gap: _constants.SPACING_SCALE['sp-25']
+  }),
+  'sp-50': (0, _react2.css)({
+    gap: _constants.SPACING_SCALE['sp-50']
+  }),
+  'sp-75': (0, _react2.css)({
+    gap: _constants.SPACING_SCALE['sp-75']
+  }),
+  'sp-100': (0, _react2.css)({
+    gap: _constants.SPACING_SCALE['sp-100']
+  }),
+  'sp-150': (0, _react2.css)({
+    gap: _constants.SPACING_SCALE['sp-150']
+  }),
+  'sp-200': (0, _react2.css)({
+    gap: _constants.SPACING_SCALE['sp-200']
+  }),
+  'sp-300': (0, _react2.css)({
+    gap: _constants.SPACING_SCALE['sp-300']
+  }),
+  'sp-400': (0, _react2.css)({
+    gap: _constants.SPACING_SCALE['sp-400']
+  }),
+  'sp-500': (0, _react2.css)({
+    gap: _constants.SPACING_SCALE['sp-500']
+  }),
+  'sp-600': (0, _react2.css)({
+    gap: _constants.SPACING_SCALE['sp-600']
+  }),
+  'sp-800': (0, _react2.css)({
+    gap: _constants.SPACING_SCALE['sp-800']
+  })
+};
+/**
+ * @codegenEnd
+ */

package/dist/cjs/components/interaction-surface.partial.js

@@ -0,0 +1,253 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _react2 = require("@emotion/react");
+
+var _surfaceProvider = require("./surface-provider");
+
+/** @jsx jsx */
+var baseStyles = (0, _react2.css)({
+  position: 'absolute',
+  borderRadius: 'inherit',
+  cursor: 'pointer',
+  inset: 0,
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  '~ *': {
+    position: 'relative',
+    pointerEvents: 'none'
+  }
+});
+
+/**
+ *
+ * @example
+ * ```js
+ * // a minimal icon button
+ * <Box as="button">
+ *   <InteractionSurface />
+ *   <WarningIcon label="icon button" />
+ * </Box>
+ * ```
+ */
+var InteractionSurface = function InteractionSurface(_ref) {
+  var appearance = _ref.appearance,
+      children = _ref.children,
+      testId = _ref.testId;
+  var defaultSurface = (0, _react.useContext)(_surfaceProvider.SurfaceContext);
+  var surface = appearance || defaultSurface; // This case will occur if the Box has not set a bg color and the ancestor surface
+  // is an elevation. An alternative would be to throw an error here as it may be better
+  // to ensure correct predictable behaviour based on user specification.
+
+  if (!(surface in backgroundActiveColorMap)) {
+    surface = 'neutral';
+  }
+
+  return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)("span", {
+    "data-testid": testId,
+    css: [baseStyles, surface && backgroundHoverColorMap[surface], surface && backgroundActiveColorMap[surface]]
+  }), children);
+};
+
+var _default = InteractionSurface;
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::45000716488a9f41306a232c1f4c9f8d>>
+ * @codegenId interactions
+ * @codegenCommand yarn codegen-styles
+ * @codegenParams ["background"]
+ */
+
+exports.default = _default;
+var backgroundActiveColorMap = {
+  'inverse.subtle': (0, _react2.css)({
+    ':active': {
+      backgroundColor: "var(--ds-background-inverse-subtle-pressed, #00000052)"
+    }
+  }),
+  input: (0, _react2.css)({
+    ':active': {
+      backgroundColor: "var(--ds-background-input-pressed, #FFFFFF)"
+    }
+  }),
+  neutral: (0, _react2.css)({
+    ':active': {
+      backgroundColor: "var(--ds-background-neutral-pressed, #091E424F)"
+    }
+  }),
+  'neutral.subtle': (0, _react2.css)({
+    ':active': {
+      backgroundColor: "var(--ds-background-neutral-subtle-pressed, #091E4224)"
+    }
+  }),
+  'neutral.bold': (0, _react2.css)({
+    ':active': {
+      backgroundColor: "var(--ds-background-neutral-bold-pressed, #172B4D)"
+    }
+  }),
+  'brand.bold': (0, _react2.css)({
+    ':active': {
+      backgroundColor: "var(--ds-background-brand-bold-pressed, #09326C)"
+    }
+  }),
+  selected: (0, _react2.css)({
+    ':active': {
+      backgroundColor: "var(--ds-background-selected-pressed, #85B8FF)"
+    }
+  }),
+  'selected.bold': (0, _react2.css)({
+    ':active': {
+      backgroundColor: "var(--ds-background-selected-bold-pressed, #09326C)"
+    }
+  }),
+  danger: (0, _react2.css)({
+    ':active': {
+      backgroundColor: "var(--ds-background-danger-pressed, #FF9C8F)"
+    }
+  }),
+  'danger.bold': (0, _react2.css)({
+    ':active': {
+      backgroundColor: "var(--ds-background-danger-bold-pressed, #601E16)"
+    }
+  }),
+  warning: (0, _react2.css)({
+    ':active': {
+      backgroundColor: "var(--ds-background-warning-pressed, #F5CD47)"
+    }
+  }),
+  'warning.bold': (0, _react2.css)({
+    ':active': {
+      backgroundColor: "var(--ds-background-warning-bold-pressed, #B38600)"
+    }
+  }),
+  success: (0, _react2.css)({
+    ':active': {
+      backgroundColor: "var(--ds-background-success-pressed, #7EE2B8)"
+    }
+  }),
+  'success.bold': (0, _react2.css)({
+    ':active': {
+      backgroundColor: "var(--ds-background-success-bold-pressed, #164B35)"
+    }
+  }),
+  discovery: (0, _react2.css)({
+    ':active': {
+      backgroundColor: "var(--ds-background-discovery-pressed, #B8ACF6)"
+    }
+  }),
+  'discovery.bold': (0, _react2.css)({
+    ':active': {
+      backgroundColor: "var(--ds-background-discovery-bold-pressed, #352C63)"
+    }
+  }),
+  information: (0, _react2.css)({
+    ':active': {
+      backgroundColor: "var(--ds-background-information-pressed, #85B8FF)"
+    }
+  }),
+  'information.bold': (0, _react2.css)({
+    ':active': {
+      backgroundColor: "var(--ds-background-information-bold-pressed, #09326C)"
+    }
+  })
+};
+var backgroundHoverColorMap = {
+  'inverse.subtle': (0, _react2.css)({
+    ':hover': {
+      backgroundColor: "var(--ds-background-inverse-subtle-hovered, #0000003D)"
+    }
+  }),
+  input: (0, _react2.css)({
+    ':hover': {
+      backgroundColor: "var(--ds-background-input-hovered, #F7F8F9)"
+    }
+  }),
+  neutral: (0, _react2.css)({
+    ':hover': {
+      backgroundColor: "var(--ds-background-neutral-hovered, #091E4224)"
+    }
+  }),
+  'neutral.subtle': (0, _react2.css)({
+    ':hover': {
+      backgroundColor: "var(--ds-background-neutral-subtle-hovered, #091E420F)"
+    }
+  }),
+  'neutral.bold': (0, _react2.css)({
+    ':hover': {
+      backgroundColor: "var(--ds-background-neutral-bold-hovered, #2C3E5D)"
+    }
+  }),
+  'brand.bold': (0, _react2.css)({
+    ':hover': {
+      backgroundColor: "var(--ds-background-brand-bold-hovered, #0055CC)"
+    }
+  }),
+  selected: (0, _react2.css)({
+    ':hover': {
+      backgroundColor: "var(--ds-background-selected-hovered, #CCE0FF)"
+    }
+  }),
+  'selected.bold': (0, _react2.css)({
+    ':hover': {
+      backgroundColor: "var(--ds-background-selected-bold-hovered, #0055CC)"
+    }
+  }),
+  danger: (0, _react2.css)({
+    ':hover': {
+      backgroundColor: "var(--ds-background-danger-hovered, #FFD2CC)"
+    }
+  }),
+  'danger.bold': (0, _react2.css)({
+    ':hover': {
+      backgroundColor: "var(--ds-background-danger-bold-hovered, #AE2A19)"
+    }
+  }),
+  warning: (0, _react2.css)({
+    ':hover': {
+      backgroundColor: "var(--ds-background-warning-hovered, #F8E6A0)"
+    }
+  }),
+  'warning.bold': (0, _react2.css)({
+    ':hover': {
+      backgroundColor: "var(--ds-background-warning-bold-hovered, #CF9F02)"
+    }
+  }),
+  success: (0, _react2.css)({
+    ':hover': {
+      backgroundColor: "var(--ds-background-success-hovered, #BAF3DB)"
+    }
+  }),
+  'success.bold': (0, _react2.css)({
+    ':hover': {
+      backgroundColor: "var(--ds-background-success-bold-hovered, #216E4E)"
+    }
+  }),
+  discovery: (0, _react2.css)({
+    ':hover': {
+      backgroundColor: "var(--ds-background-discovery-hovered, #DFD8FD)"
+    }
+  }),
+  'discovery.bold': (0, _react2.css)({
+    ':hover': {
+      backgroundColor: "var(--ds-background-discovery-bold-hovered, #5E4DB2)"
+    }
+  }),
+  information: (0, _react2.css)({
+    ':hover': {
+      backgroundColor: "var(--ds-background-information-hovered, #CCE0FF)"
+    }
+  }),
+  'information.bold': (0, _react2.css)({
+    ':hover': {
+      backgroundColor: "var(--ds-background-information-bold-hovered, #0055CC)"
+    }
+  })
+};
+/**
+ * @codegenEnd
+ */

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

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

package/dist/cjs/components/surface-provider.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSurface = exports.SurfaceContext = void 0;
+
+var _react = require("react");
+
+/**
+ * __Surface context__
+ *
+ * A surface context provides context information on the current background (if set).
+ */
+var SurfaceContext = /*#__PURE__*/(0, _react.createContext)('elevation.surface');
+/**
+ * __useSurface__
+ *
+ * Return the current surface. If no parent sets a surface color it falls back to the default surface.
+ *
+ * @see SurfaceContext
+ */
+
+exports.SurfaceContext = SurfaceContext;
+
+var useSurface = function useSurface() {
+  return (0, _react.useContext)(SurfaceContext);
+};
+
+exports.useSurface = useSurface;
+SurfaceContext.displayName = 'SurfaceProvider';