@atlaskit/ds-explorations 3.5.2 → 4.0.0

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

@@ -1,271 +0,0 @@
-/** @jsx jsx */
-import { createContext, Fragment, useContext } from 'react';
-import { css, jsx } from '@emotion/react';
-import invariant from 'tiny-invariant';
-import surfaceColorMap from '../internal/color-map';
-import { useSurface } from './surface-provider';
-const asAllowlist = ['span', 'div', 'p', 'strong'];
-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',
-  margin: "var(--ds-space-0, 0px)",
-  padding: "var(--ds-space-0, 0px)"
-});
-const truncateStyles = css({
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap'
-});
-
-/**
- * Custom hook designed to abstract the parsing of the color props and make it clearer in the future how color is reconciled between themes and tokens.
- */
-const useColor = colorProp => {
-  const surface = useSurface();
-  const inverseTextColor = surfaceColorMap[surface];
-
-  /**
-   * Where the color of the surface is inverted we override the user choice
-   * as there is no valid choice that is not covered by the override.
-   */
-  const color = inverseTextColor !== null && inverseTextColor !== void 0 ? inverseTextColor : colorProp;
-  return color;
-};
-const HasTextAncestorContext = /*#__PURE__*/createContext(false);
-const useHasTextAncestor = () => useContext(HasTextAncestorContext);
-
-/**
- * __Text__
- *
- * 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
- */
-const Text = ({
-  children,
-  ...props
-}) => {
-  const {
-    as: Component = 'span',
-    color: colorProp,
-    fontSize,
-    fontWeight,
-    lineHeight,
-    shouldTruncate = false,
-    textAlign,
-    textTransform,
-    verticalAlign,
-    testId,
-    UNSAFE_style,
-    id
-  } = props;
-  invariant(asAllowlist.includes(Component), `@atlaskit/ds-explorations: Text received an invalid "as" value of "${Component}"`);
-  const color = useColor(colorProp);
-  const isWrapped = useHasTextAncestor();
-
-  /**
-   * If the text is already wrapped and applies no props we can just
-   * render the children directly as a fragment.
-   */
-  if (isWrapped && Object.keys(props).length === 0) {
-    return jsx(Fragment, null, children);
-  }
-  const component = jsx(Component, {
-    style: UNSAFE_style,
-    css: [baseStyles, fontFamilyMap.sans, 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,
-    id: id
-  }, children);
-  return isWrapped ?
-  // no need to re-apply context if the text is already wrapped
-  component : jsx(HasTextAncestorContext.Provider, {
-    value: true
-  }, component);
-};
-export default Text;
-
-/**
- * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::c5a6cec604462dc4b48aaf1160b83e59>>
- * @codegenId typography
- * @codegenCommand yarn codegen-styles
- * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-typography-adg3.tsx <<SignedSource::bf3349cf2247aa44fbac47c953fc03b5>>
- */
-const fontSizeMap = {
-  'size.050': css({
-    fontSize: "var(--ds-font-size-050, 11px)"
-  }),
-  'size.075': css({
-    fontSize: "var(--ds-font-size-075, 12px)"
-  }),
-  'size.100': css({
-    fontSize: "var(--ds-font-size-100, 14px)"
-  }),
-  'size.200': css({
-    fontSize: "var(--ds-font-size-200, 16px)"
-  }),
-  'size.300': css({
-    fontSize: "var(--ds-font-size-300, 20px)"
-  }),
-  'size.400': css({
-    fontSize: "var(--ds-font-size-400, 24px)"
-  }),
-  'size.500': css({
-    fontSize: "var(--ds-font-size-500, 29px)"
-  }),
-  'size.600': css({
-    fontSize: "var(--ds-font-size-600, 35px)"
-  })
-};
-const fontWeightMap = {
-  bold: css({
-    fontWeight: "var(--ds-font-weight-bold, 700)"
-  }),
-  medium: css({
-    fontWeight: "var(--ds-font-weight-medium, 500)"
-  }),
-  regular: css({
-    fontWeight: "var(--ds-font-weight-regular, 400)"
-  }),
-  semibold: css({
-    fontWeight: "var(--ds-font-weight-semibold, 600)"
-  })
-};
-const fontFamilyMap = {
-  body: css({
-    fontFamily: "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
-  }),
-  'brand.body': css({
-    fontFamily: "var(--ds-font-family-brand-body, \"Charlie Text\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
-  }),
-  'brand.heading': css({
-    fontFamily: "var(--ds-font-family-brand-heading, \"Charlie Display\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
-  }),
-  code: css({
-    fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)"
-  }),
-  heading: css({
-    fontFamily: "var(--ds-font-family-heading, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
-  }),
-  monospace: css({
-    fontFamily: "var(--ds-font-family-monospace, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)"
-  }),
-  sans: css({
-    fontFamily: "var(--ds-font-family-sans, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif)"
-  })
-};
-const lineHeightMap = {
-  'lineHeight.1': css({
-    lineHeight: "var(--ds-font-lineHeight-1, 1)"
-  }),
-  'lineHeight.100': css({
-    lineHeight: "var(--ds-font-lineHeight-100, 16px)"
-  }),
-  'lineHeight.200': css({
-    lineHeight: "var(--ds-font-lineHeight-200, 20px)"
-  }),
-  'lineHeight.300': css({
-    lineHeight: "var(--ds-font-lineHeight-300, 24px)"
-  }),
-  'lineHeight.400': css({
-    lineHeight: "var(--ds-font-lineHeight-400, 28px)"
-  }),
-  'lineHeight.500': css({
-    lineHeight: "var(--ds-font-lineHeight-500, 32px)"
-  }),
-  'lineHeight.600': css({
-    lineHeight: "var(--ds-font-lineHeight-600, 40px)"
-  })
-};
-/**
- * @codegenEnd
- */
-
-/**
- * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::db9171c09481d187d83bb01192c16c41>>
- * @codegenId colors
- * @codegenCommand yarn codegen-styles
- * @codegenParams ["text"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::f27d1519d51cc4a85383a00907847774>>
- */
-const textColorMap = {
-  'color.text': css({
-    color: "var(--ds-text, #172B4D)"
-  }),
-  disabled: css({
-    color: "var(--ds-text-disabled, #A5ADBA)"
-  }),
-  inverse: css({
-    color: "var(--ds-text-inverse, #FFFFFF)"
-  }),
-  selected: css({
-    color: "var(--ds-text-selected, #0052CC)"
-  }),
-  brand: css({
-    color: "var(--ds-text-brand, #0065FF)"
-  }),
-  danger: css({
-    color: "var(--ds-text-danger, #DE350B)"
-  }),
-  warning: css({
-    color: "var(--ds-text-warning, #974F0C)"
-  }),
-  'warning.inverse': css({
-    color: "var(--ds-text-warning-inverse, #172B4D)"
-  }),
-  success: css({
-    color: "var(--ds-text-success, #006644)"
-  }),
-  discovery: css({
-    color: "var(--ds-text-discovery, #403294)"
-  }),
-  information: css({
-    color: "var(--ds-text-information, #0052CC)"
-  }),
-  subtlest: css({
-    color: "var(--ds-text-subtlest, #7A869A)"
-  }),
-  subtle: css({
-    color: "var(--ds-text-subtle, #42526E)"
-  })
-};
-
-/**
- * @codegenEnd
- */

package/dist/es2019/internal/spacing-scale.js

@@ -1,9 +0,0 @@
-/**
- * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- *
- * Internal codegen of the spacing scale values. Only used for internal examples.
- *
- * @codegen <<SignedSource::33634cd9767c59b9aaaf64fc6f44f852>>
- * @codegenCommand yarn codegen-styles
- */
-export const spacingScale = ['space.0', 'space.025', 'space.050', 'space.075', 'space.100', 'space.150', 'space.200', 'space.250', 'space.300', 'space.400', 'space.500', 'space.600', 'space.800', 'space.1000'];

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

@@ -1,274 +0,0 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children"];
-/** @jsx jsx */
-import { createContext, Fragment, useContext } from 'react';
-import { css, jsx } from '@emotion/react';
-import invariant from 'tiny-invariant';
-import surfaceColorMap from '../internal/color-map';
-import { useSurface } from './surface-provider';
-var asAllowlist = ['span', 'div', 'p', 'strong'];
-var textAlignMap = {
-  center: css({
-    textAlign: 'center'
-  }),
-  end: css({
-    textAlign: 'end'
-  }),
-  start: css({
-    textAlign: 'start'
-  })
-};
-var textTransformMap = {
-  none: css({
-    textTransform: 'none'
-  }),
-  lowercase: css({
-    textTransform: 'lowercase'
-  }),
-  uppercase: css({
-    textTransform: 'uppercase'
-  })
-};
-var verticalAlignMap = {
-  top: css({
-    verticalAlign: 'top'
-  }),
-  middle: css({
-    verticalAlign: 'middle'
-  }),
-  bottom: css({
-    verticalAlign: 'bottom'
-  })
-};
-var baseStyles = css({
-  boxSizing: 'border-box',
-  margin: "var(--ds-space-0, 0px)",
-  padding: "var(--ds-space-0, 0px)"
-});
-var truncateStyles = css({
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap'
-});
-
-/**
- * Custom hook designed to abstract the parsing of the color props and make it clearer in the future how color is reconciled between themes and tokens.
- */
-var useColor = function useColor(colorProp) {
-  var surface = useSurface();
-  var inverseTextColor = surfaceColorMap[surface];
-
-  /**
-   * Where the color of the surface is inverted we override the user choice
-   * as there is no valid choice that is not covered by the override.
-   */
-  var color = inverseTextColor !== null && inverseTextColor !== void 0 ? inverseTextColor : colorProp;
-  return color;
-};
-var HasTextAncestorContext = /*#__PURE__*/createContext(false);
-var useHasTextAncestor = function useHasTextAncestor() {
-  return useContext(HasTextAncestorContext);
-};
-
-/**
- * __Text__
- *
- * 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
- */
-var Text = function Text(_ref) {
-  var children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var _props$as = props.as,
-    Component = _props$as === void 0 ? 'span' : _props$as,
-    colorProp = props.color,
-    fontSize = props.fontSize,
-    fontWeight = props.fontWeight,
-    lineHeight = props.lineHeight,
-    _props$shouldTruncate = props.shouldTruncate,
-    shouldTruncate = _props$shouldTruncate === void 0 ? false : _props$shouldTruncate,
-    textAlign = props.textAlign,
-    textTransform = props.textTransform,
-    verticalAlign = props.verticalAlign,
-    testId = props.testId,
-    UNSAFE_style = props.UNSAFE_style,
-    id = props.id;
-  invariant(asAllowlist.includes(Component), "@atlaskit/ds-explorations: Text received an invalid \"as\" value of \"".concat(Component, "\""));
-  var color = useColor(colorProp);
-  var isWrapped = useHasTextAncestor();
-
-  /**
-   * If the text is already wrapped and applies no props we can just
-   * render the children directly as a fragment.
-   */
-  if (isWrapped && Object.keys(props).length === 0) {
-    return jsx(Fragment, null, children);
-  }
-  var component = jsx(Component, {
-    style: UNSAFE_style,
-    css: [baseStyles, fontFamilyMap.sans, 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,
-    id: id
-  }, children);
-  return isWrapped ?
-  // no need to re-apply context if the text is already wrapped
-  component : jsx(HasTextAncestorContext.Provider, {
-    value: true
-  }, component);
-};
-export default Text;
-
-/**
- * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::c5a6cec604462dc4b48aaf1160b83e59>>
- * @codegenId typography
- * @codegenCommand yarn codegen-styles
- * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-typography-adg3.tsx <<SignedSource::bf3349cf2247aa44fbac47c953fc03b5>>
- */
-var fontSizeMap = {
-  'size.050': css({
-    fontSize: "var(--ds-font-size-050, 11px)"
-  }),
-  'size.075': css({
-    fontSize: "var(--ds-font-size-075, 12px)"
-  }),
-  'size.100': css({
-    fontSize: "var(--ds-font-size-100, 14px)"
-  }),
-  'size.200': css({
-    fontSize: "var(--ds-font-size-200, 16px)"
-  }),
-  'size.300': css({
-    fontSize: "var(--ds-font-size-300, 20px)"
-  }),
-  'size.400': css({
-    fontSize: "var(--ds-font-size-400, 24px)"
-  }),
-  'size.500': css({
-    fontSize: "var(--ds-font-size-500, 29px)"
-  }),
-  'size.600': css({
-    fontSize: "var(--ds-font-size-600, 35px)"
-  })
-};
-var fontWeightMap = {
-  bold: css({
-    fontWeight: "var(--ds-font-weight-bold, 700)"
-  }),
-  medium: css({
-    fontWeight: "var(--ds-font-weight-medium, 500)"
-  }),
-  regular: css({
-    fontWeight: "var(--ds-font-weight-regular, 400)"
-  }),
-  semibold: css({
-    fontWeight: "var(--ds-font-weight-semibold, 600)"
-  })
-};
-var fontFamilyMap = {
-  body: css({
-    fontFamily: "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
-  }),
-  'brand.body': css({
-    fontFamily: "var(--ds-font-family-brand-body, \"Charlie Text\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
-  }),
-  'brand.heading': css({
-    fontFamily: "var(--ds-font-family-brand-heading, \"Charlie Display\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
-  }),
-  code: css({
-    fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)"
-  }),
-  heading: css({
-    fontFamily: "var(--ds-font-family-heading, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
-  }),
-  monospace: css({
-    fontFamily: "var(--ds-font-family-monospace, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)"
-  }),
-  sans: css({
-    fontFamily: "var(--ds-font-family-sans, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif)"
-  })
-};
-var lineHeightMap = {
-  'lineHeight.1': css({
-    lineHeight: "var(--ds-font-lineHeight-1, 1)"
-  }),
-  'lineHeight.100': css({
-    lineHeight: "var(--ds-font-lineHeight-100, 16px)"
-  }),
-  'lineHeight.200': css({
-    lineHeight: "var(--ds-font-lineHeight-200, 20px)"
-  }),
-  'lineHeight.300': css({
-    lineHeight: "var(--ds-font-lineHeight-300, 24px)"
-  }),
-  'lineHeight.400': css({
-    lineHeight: "var(--ds-font-lineHeight-400, 28px)"
-  }),
-  'lineHeight.500': css({
-    lineHeight: "var(--ds-font-lineHeight-500, 32px)"
-  }),
-  'lineHeight.600': css({
-    lineHeight: "var(--ds-font-lineHeight-600, 40px)"
-  })
-};
-/**
- * @codegenEnd
- */
-
-/**
- * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::db9171c09481d187d83bb01192c16c41>>
- * @codegenId colors
- * @codegenCommand yarn codegen-styles
- * @codegenParams ["text"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::f27d1519d51cc4a85383a00907847774>>
- */
-var textColorMap = {
-  'color.text': css({
-    color: "var(--ds-text, #172B4D)"
-  }),
-  disabled: css({
-    color: "var(--ds-text-disabled, #A5ADBA)"
-  }),
-  inverse: css({
-    color: "var(--ds-text-inverse, #FFFFFF)"
-  }),
-  selected: css({
-    color: "var(--ds-text-selected, #0052CC)"
-  }),
-  brand: css({
-    color: "var(--ds-text-brand, #0065FF)"
-  }),
-  danger: css({
-    color: "var(--ds-text-danger, #DE350B)"
-  }),
-  warning: css({
-    color: "var(--ds-text-warning, #974F0C)"
-  }),
-  'warning.inverse': css({
-    color: "var(--ds-text-warning-inverse, #172B4D)"
-  }),
-  success: css({
-    color: "var(--ds-text-success, #006644)"
-  }),
-  discovery: css({
-    color: "var(--ds-text-discovery, #403294)"
-  }),
-  information: css({
-    color: "var(--ds-text-information, #0052CC)"
-  }),
-  subtlest: css({
-    color: "var(--ds-text-subtlest, #7A869A)"
-  }),
-  subtle: css({
-    color: "var(--ds-text-subtle, #42526E)"
-  })
-};
-
-/**
- * @codegenEnd
- */

package/dist/esm/internal/spacing-scale.js

@@ -1,9 +0,0 @@
-/**
- * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- *
- * Internal codegen of the spacing scale values. Only used for internal examples.
- *
- * @codegen <<SignedSource::33634cd9767c59b9aaaf64fc6f44f852>>
- * @codegenCommand yarn codegen-styles
- */
-export var spacingScale = ['space.0', 'space.025', 'space.050', 'space.075', 'space.100', 'space.150', 'space.200', 'space.250', 'space.300', 'space.400', 'space.500', 'space.600', 'space.800', 'space.1000'];