@atlaskit/ds-explorations 0.0.3 → 0.1.2

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

@@ -0,0 +1,243 @@
+/** @jsx jsx */
+import { Fragment, useContext } from 'react';
+import { css, jsx } from '@emotion/react';
+import { SurfaceContext } from './surface-provider';
+const baseStyles = 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>
+ * ```
+ */
+const InteractionSurface = ({
+  appearance,
+  children,
+  testId
+}) => {
+  const defaultSurface = useContext(SurfaceContext);
+  let 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 jsx(Fragment, null, jsx("span", {
+    "data-testid": testId,
+    css: [baseStyles, surface && backgroundHoverColorMap[surface], surface && backgroundActiveColorMap[surface]]
+  }), children);
+};
+
+export 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"]
+ */
+
+const backgroundActiveColorMap = {
+  'inverse.subtle': css({
+    ':active': {
+      backgroundColor: "var(--ds-background-inverse-subtle-pressed, #00000052)"
+    }
+  }),
+  input: css({
+    ':active': {
+      backgroundColor: "var(--ds-background-input-pressed, #FFFFFF)"
+    }
+  }),
+  neutral: css({
+    ':active': {
+      backgroundColor: "var(--ds-background-neutral-pressed, #091E424F)"
+    }
+  }),
+  'neutral.subtle': css({
+    ':active': {
+      backgroundColor: "var(--ds-background-neutral-subtle-pressed, #091E4224)"
+    }
+  }),
+  'neutral.bold': css({
+    ':active': {
+      backgroundColor: "var(--ds-background-neutral-bold-pressed, #172B4D)"
+    }
+  }),
+  'brand.bold': css({
+    ':active': {
+      backgroundColor: "var(--ds-background-brand-bold-pressed, #09326C)"
+    }
+  }),
+  selected: css({
+    ':active': {
+      backgroundColor: "var(--ds-background-selected-pressed, #85B8FF)"
+    }
+  }),
+  'selected.bold': css({
+    ':active': {
+      backgroundColor: "var(--ds-background-selected-bold-pressed, #09326C)"
+    }
+  }),
+  danger: css({
+    ':active': {
+      backgroundColor: "var(--ds-background-danger-pressed, #FF9C8F)"
+    }
+  }),
+  'danger.bold': css({
+    ':active': {
+      backgroundColor: "var(--ds-background-danger-bold-pressed, #601E16)"
+    }
+  }),
+  warning: css({
+    ':active': {
+      backgroundColor: "var(--ds-background-warning-pressed, #F5CD47)"
+    }
+  }),
+  'warning.bold': css({
+    ':active': {
+      backgroundColor: "var(--ds-background-warning-bold-pressed, #B38600)"
+    }
+  }),
+  success: css({
+    ':active': {
+      backgroundColor: "var(--ds-background-success-pressed, #7EE2B8)"
+    }
+  }),
+  'success.bold': css({
+    ':active': {
+      backgroundColor: "var(--ds-background-success-bold-pressed, #164B35)"
+    }
+  }),
+  discovery: css({
+    ':active': {
+      backgroundColor: "var(--ds-background-discovery-pressed, #B8ACF6)"
+    }
+  }),
+  'discovery.bold': css({
+    ':active': {
+      backgroundColor: "var(--ds-background-discovery-bold-pressed, #352C63)"
+    }
+  }),
+  information: css({
+    ':active': {
+      backgroundColor: "var(--ds-background-information-pressed, #85B8FF)"
+    }
+  }),
+  'information.bold': css({
+    ':active': {
+      backgroundColor: "var(--ds-background-information-bold-pressed, #09326C)"
+    }
+  })
+};
+const backgroundHoverColorMap = {
+  'inverse.subtle': css({
+    ':hover': {
+      backgroundColor: "var(--ds-background-inverse-subtle-hovered, #0000003D)"
+    }
+  }),
+  input: css({
+    ':hover': {
+      backgroundColor: "var(--ds-background-input-hovered, #F7F8F9)"
+    }
+  }),
+  neutral: css({
+    ':hover': {
+      backgroundColor: "var(--ds-background-neutral-hovered, #091E4224)"
+    }
+  }),
+  'neutral.subtle': css({
+    ':hover': {
+      backgroundColor: "var(--ds-background-neutral-subtle-hovered, #091E420F)"
+    }
+  }),
+  'neutral.bold': css({
+    ':hover': {
+      backgroundColor: "var(--ds-background-neutral-bold-hovered, #2C3E5D)"
+    }
+  }),
+  'brand.bold': css({
+    ':hover': {
+      backgroundColor: "var(--ds-background-brand-bold-hovered, #0055CC)"
+    }
+  }),
+  selected: css({
+    ':hover': {
+      backgroundColor: "var(--ds-background-selected-hovered, #CCE0FF)"
+    }
+  }),
+  'selected.bold': css({
+    ':hover': {
+      backgroundColor: "var(--ds-background-selected-bold-hovered, #0055CC)"
+    }
+  }),
+  danger: css({
+    ':hover': {
+      backgroundColor: "var(--ds-background-danger-hovered, #FFD2CC)"
+    }
+  }),
+  'danger.bold': css({
+    ':hover': {
+      backgroundColor: "var(--ds-background-danger-bold-hovered, #AE2A19)"
+    }
+  }),
+  warning: css({
+    ':hover': {
+      backgroundColor: "var(--ds-background-warning-hovered, #F8E6A0)"
+    }
+  }),
+  'warning.bold': css({
+    ':hover': {
+      backgroundColor: "var(--ds-background-warning-bold-hovered, #CF9F02)"
+    }
+  }),
+  success: css({
+    ':hover': {
+      backgroundColor: "var(--ds-background-success-hovered, #BAF3DB)"
+    }
+  }),
+  'success.bold': css({
+    ':hover': {
+      backgroundColor: "var(--ds-background-success-bold-hovered, #216E4E)"
+    }
+  }),
+  discovery: css({
+    ':hover': {
+      backgroundColor: "var(--ds-background-discovery-hovered, #DFD8FD)"
+    }
+  }),
+  'discovery.bold': css({
+    ':hover': {
+      backgroundColor: "var(--ds-background-discovery-bold-hovered, #5E4DB2)"
+    }
+  }),
+  information: css({
+    ':hover': {
+      backgroundColor: "var(--ds-background-information-hovered, #CCE0FF)"
+    }
+  }),
+  'information.bold': css({
+    ':hover': {
+      backgroundColor: "var(--ds-background-information-bold-hovered, #0055CC)"
+    }
+  })
+};
+/**
+ * @codegenEnd
+ */

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

@@ -0,0 +1,106 @@
+/** @jsx jsx */
+import { forwardRef } from 'react';
+import { css, jsx } from '@emotion/react';
+import { SPACING_SCALE } from '../constants';
+const flexAlignItemsMap = {
+  center: css({
+    alignItems: 'center'
+  }),
+  baseline: css({
+    alignItems: 'baseline'
+  }),
+  flexStart: css({
+    alignItems: 'flex-start'
+  }),
+  flexEnd: css({
+    alignItems: 'flex-end'
+  })
+};
+const flexJustifyContentMap = {
+  center: css({
+    justifyContent: 'center'
+  }),
+  flexStart: css({
+    justifyContent: 'flex-start'
+  }),
+  flexEnd: css({
+    justifyContent: 'flex-end'
+  })
+};
+const baseStyles = 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.
+ *
+ */
+
+const Stack = /*#__PURE__*/forwardRef(({
+  gap,
+  alignItems,
+  justifyContent,
+  children,
+  testId
+}, ref) => {
+  return jsx("div", {
+    css: [baseStyles, gap && gapMap[gap], alignItems && flexAlignItemsMap[alignItems], justifyContent && flexJustifyContentMap[justifyContent]],
+    "data-testid": testId,
+    ref: ref
+  }, children);
+});
+Stack.displayName = 'Stack';
+export 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"]
+ */
+
+const gapMap = {
+  'sp-0': css({
+    gap: SPACING_SCALE['sp-0']
+  }),
+  'sp-25': css({
+    gap: SPACING_SCALE['sp-25']
+  }),
+  'sp-50': css({
+    gap: SPACING_SCALE['sp-50']
+  }),
+  'sp-75': css({
+    gap: SPACING_SCALE['sp-75']
+  }),
+  'sp-100': css({
+    gap: SPACING_SCALE['sp-100']
+  }),
+  'sp-150': css({
+    gap: SPACING_SCALE['sp-150']
+  }),
+  'sp-200': css({
+    gap: SPACING_SCALE['sp-200']
+  }),
+  'sp-300': css({
+    gap: SPACING_SCALE['sp-300']
+  }),
+  'sp-400': css({
+    gap: SPACING_SCALE['sp-400']
+  }),
+  'sp-500': css({
+    gap: SPACING_SCALE['sp-500']
+  }),
+  'sp-600': css({
+    gap: SPACING_SCALE['sp-600']
+  }),
+  'sp-800': css({
+    gap: SPACING_SCALE['sp-800']
+  })
+};
+/**
+ * @codegenEnd
+ */

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

@@ -0,0 +1,20 @@
+import { createContext, useContext } from 'react';
+
+/**
+ * __Surface context__
+ *
+ * A surface context provides context information on the current background (if set).
+ */
+export const SurfaceContext = /*#__PURE__*/createContext('elevation.surface');
+/**
+ * __useSurface__
+ *
+ * Return the current surface. If no parent sets a surface color it falls back to the default surface.
+ *
+ * @see SurfaceContext
+ */
+
+export const useSurface = () => {
+  return useContext(SurfaceContext);
+};
+SurfaceContext.displayName = 'SurfaceProvider';

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

@@ -1,100 +1,187 @@
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
-// These values are pulled from @atlaskit/theme
-const fontSize = 14;
-const fontSizeExtraSmall = 11;
-const fontSizeSmall = 12;
+import { css, jsx } from '@emotion/react';
+import invariant from 'tiny-invariant';
+import { colorMap } from '../internal/color-map';
+import { useSurface } from './surface-provider';
+const asAllowlist = ['span', 'div', 'p'];
 const fontFamily = `-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif`;
 const fontSizeMap = {
-  extraSmall: css({
-    fontSize: fontSizeExtraSmall
+  '11px': css({
+    fontSize: '11px'
   }),
-  small: css({
-    fontSize: fontSizeSmall
+  '12px': css({
+    fontSize: '12px'
   }),
-  normal: css({
-    fontSize
+  '14px': css({
+    fontSize: '14px'
   })
 };
+// NOTE: can't use numbers as keys or Constellation won't build. Weird one.
 const fontWeightMap = {
-  400: css({
+  '400': css({
     fontWeight: 400
   }),
-  500: css({
+  '500': css({
     fontWeight: 500
+  }),
+  '700': css({
+    fontWeight: 700
+  })
+};
+const lineHeightMap = {
+  '12px': css({
+    lineHeight: '12px'
+  }),
+  '16px': css({
+    lineHeight: '16px'
+  }),
+  '20px': css({
+    lineHeight: '20px'
+  }),
+  '24px': css({
+    lineHeight: '24px'
+  }),
+  '28px': css({
+    lineHeight: '28px'
+  }),
+  '32px': css({
+    lineHeight: '32px'
+  }),
+  '40px': css({
+    lineHeight: '40px'
+  })
+};
+const textAlignMap = {
+  center: css({
+    textAlign: 'center'
+  }),
+  end: css({
+    textAlign: 'end'
+  }),
+  start: css({
+    textAlign: 'start'
+  })
+};
+const textTransformMap = {
+  none: css({
+    textTransform: 'none'
+  }),
+  lowercase: css({
+    textTransform: 'lowercase'
+  }),
+  uppercase: css({
+    textTransform: 'uppercase'
+  })
+};
+const verticalAlignMap = {
+  top: css({
+    verticalAlign: 'top'
+  }),
+  middle: css({
+    verticalAlign: 'middle'
+  }),
+  bottom: css({
+    verticalAlign: 'bottom'
   })
 };
 const baseStyles = css({
+  boxSizing: 'border-box',
   fontFamily
 });
+const truncateStyles = 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({
+const Text = ({
   as: Component = 'span',
   children,
-  color,
+  color: colorTuple,
   fontSize,
-  fontWeight
-}) {
+  fontWeight,
+  lineHeight,
+  shouldTruncate = false,
+  textAlign,
+  textTransform,
+  verticalAlign,
+  testId,
+  UNSAFE_style
+}) => {
+  var _colorMap$surface;
+
+  const surface = useSurface(); // @ts-ignore
+
+  const [color = (_colorMap$surface = colorMap[surface]) !== null && _colorMap$surface !== void 0 ? _colorMap$surface : 'color.text', fallback] = colorTuple || [];
+  invariant(asAllowlist.includes(Component), `@atlaskit/ds-explorations: Text received an invalid "as" value of "${Component}"`);
   return jsx(Component, {
-    css: [baseStyles, color && textColorMap[color], fontSize && fontSizeMap[fontSize], fontWeight && fontWeightMap[fontWeight]]
+    style: { ...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);
-}
+};
 
 export 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"]
  */
 
 const textColorMap = {
-  default: css({
-    color: "var(--ds-text, #172B4D)"
+  'color.text': css({
+    color: "var(--ds-text, var(--ds-co-fb))"
   }),
   subtle: css({
-    color: "var(--ds-text-subtle, #44546F)"
+    color: "var(--ds-text-subtle, var(--ds-co-fb))"
   }),
   subtlest: css({
-    color: "var(--ds-text-subtlest, #626F86)"
+    color: "var(--ds-text-subtlest, var(--ds-co-fb))"
   }),
   disabled: css({
-    color: "var(--ds-text-disabled, #091E424F)"
+    color: "var(--ds-text-disabled, var(--ds-co-fb))"
   }),
   inverse: css({
-    color: "var(--ds-text-inverse, #FFFFFF)"
+    color: "var(--ds-text-inverse, var(--ds-co-fb))"
   }),
   brand: css({
-    color: "var(--ds-text-brand, #0C66E4)"
+    color: "var(--ds-text-brand, var(--ds-co-fb))"
   }),
   selected: css({
-    color: "var(--ds-text-selected, #0C66E4)"
+    color: "var(--ds-text-selected, var(--ds-co-fb))"
   }),
   danger: css({
-    color: "var(--ds-text-danger, #AE2A19)"
+    color: "var(--ds-text-danger, var(--ds-co-fb))"
   }),
   warning: css({
-    color: "var(--ds-text-warning, #974F0C)"
+    color: "var(--ds-text-warning, var(--ds-co-fb))"
   }),
   'warning.inverse': css({
-    color: "var(--ds-text-warning-inverse, #172B4D)"
+    color: "var(--ds-text-warning-inverse, var(--ds-co-fb))"
   }),
   success: css({
-    color: "var(--ds-text-success, #216E4E)"
+    color: "var(--ds-text-success, var(--ds-co-fb))"
   }),
   discovery: css({
-    color: "var(--ds-text-discovery, #5E4DB2)"
+    color: "var(--ds-text-discovery, var(--ds-co-fb))"
   }),
   information: css({
-    color: "var(--ds-text-information, #0055CC)"
+    color: "var(--ds-text-information, var(--ds-co-fb))"
   })
 };
 /**

package/dist/es2019/components/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/constants.js

@@ -1,11 +1,14 @@
 export const 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/es2019/index.js

@@ -1 +1,6 @@
-export default {};
+export { default as UNSAFE_Box } from './components/box.partial';
+export { default as UNSAFE_Text } from './components/text.partial';
+export { default as UNSAFE_Inline } from './components/inline.partial';
+export { default as UNSAFE_Stack } from './components/stack.partial';
+export { default as UNSAFE_InteractionSurface } from './components/interaction-surface.partial';
+export { SPACING_SCALE as UNSAFE_SPACING_SCALE } from './constants';

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

@@ -0,0 +1,34 @@
+/**
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ *
+ * Some artifact
+ *
+ * @codegen <<SignedSource::8f568e4f0837f7af4a10429e060ad059>>
+ * @codegenCommand yarn codegen-styles
+ */
+export const 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'
+};

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

@@ -0,0 +1,28 @@
+/**
+ * Adapted straight from react-mui, with a small change.
+ * @see https://www.unpkg.com/browse/react-gui@0.2.1/src/modules/getAccessibilityElementWithSideEffect.js
+ */
+const 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'
+};
+export default roleToElementType;

package/dist/es2019/version.json

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