@atlaskit/icon 22.1.1 → 22.3.0

package/dist/cjs/metadata-utility.js

@@ -0,0 +1,214 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+/**
+ * NOTE:
+ *
+ * This file is automatically generated by the build process.
+ * DO NOT CHANGE IT BY HAND or your changes will be lost.
+ *
+ * To change the format of this file, modify build/icon/createIconDocs.tsx.
+ * Add synonyms via the 'synonyms' parameter.
+ */
+
+var metadata = {
+  add: {
+    keywords: ['add', 'plus', 'create', 'new', 'icon', 'utility', 'create', 'plus'],
+    componentName: 'AddIcon',
+    package: '@atlaskit/icon/utility/add',
+    oldName: 'AddIcon',
+    categorization: 'Multi-purpose',
+    location: 'ADS',
+    team: 'ADS',
+    type: 'Utility',
+    usage: 'Reserved for creating and adding an object as a secondary action within a Menu Item.'
+  },
+  'check-circle': {
+    keywords: ['check-circle', 'checkcircle', 'tick', 'icon', 'utility', 'tick', 'yes', 'success', 'filled'],
+    componentName: 'CheckCircleIcon',
+    package: '@atlaskit/icon/utility/check-circle',
+    categorization: 'Multi-purpose',
+    location: 'ADS',
+    team: 'ADS',
+    type: 'Utility',
+    usage: 'Reserved for Helper Messages in Forms.'
+  },
+  'check-mark': {
+    keywords: ['check-mark', 'checkmark', 'icon', 'utility', 'Known uses: table cells', 'checkboxes.'],
+    componentName: 'CheckMarkIcon',
+    package: '@atlaskit/icon/utility/check-mark',
+    categorization: 'Multi-purpose',
+    location: 'ADS',
+    team: 'ADS',
+    type: 'Utility',
+    usage: 'TBD'
+  },
+  'chevron-down': {
+    keywords: ['chevron-down', 'chevrondown', 'expand', 'collapse', 'icon', 'utility', 'accordion', 'down'],
+    componentName: 'ChevronDownIcon',
+    package: '@atlaskit/icon/utility/chevron-down',
+    oldName: 'ChevronDownIcon',
+    categorization: 'Multi-purpose',
+    location: 'ADS',
+    team: 'ADS',
+    type: 'Utility',
+    usage: 'Reserved for dropdown menus, selects, accordions, and expands.'
+  },
+  'chevron-left': {
+    keywords: ['chevron-left', 'chevronleft', 'back', 'previous', 'icon', 'utility', 'less than', '<', 'previous'],
+    componentName: 'ChevronLeftIcon',
+    package: '@atlaskit/icon/utility/chevron-left',
+    oldName: 'ChevronLeftIcon',
+    categorization: 'Multi-purpose',
+    location: 'ADS',
+    team: 'ADS',
+    type: 'Utility',
+    usage: 'Reserved for collapse side nav and to indicate previous in dates.'
+  },
+  'chevron-right': {
+    keywords: ['chevron-right', 'chevronright', 'forward', 'next', 'icon', 'utility', 'greater than', '>', 'next'],
+    componentName: 'ChevronRightIcon',
+    package: '@atlaskit/icon/utility/chevron-right',
+    oldName: 'ChevronRightIcon',
+    categorization: 'Multi-purpose',
+    location: 'ADS',
+    team: 'ADS',
+    type: 'Utility',
+    usage: 'Reserved for menu fly-outs and to indicate next in dates.'
+  },
+  'chevron-up': {
+    keywords: ['chevron-up', 'chevronup', 'expand', 'collapse', 'icon', 'utility', 'up', 'accordion'],
+    componentName: 'ChevronUpIcon',
+    package: '@atlaskit/icon/utility/chevron-up',
+    oldName: 'ChevronUpIcon',
+    categorization: 'Multi-purpose',
+    location: 'ADS',
+    team: 'ADS',
+    type: 'Utility',
+    usage: 'Reserved for accordions.'
+  },
+  cross: {
+    keywords: ['cross', 'close', 'x', 'cancel', 'icon', 'utility', 'remove', 'clear', 'x'],
+    componentName: 'CrossIcon',
+    package: '@atlaskit/icon/utility/cross',
+    categorization: 'Multi-purpose',
+    location: 'ADS',
+    team: 'ADS',
+    type: 'Utility',
+    usage: 'Known uses: remove tag.'
+  },
+  'cross-circle': {
+    keywords: ['cross-circle', 'crosscircle', 'close', 'x', 'cancel', 'icon', 'utility', 'x', 'exit', 'clear', 'no', 'filled', 'form'],
+    componentName: 'CrossCircleIcon',
+    package: '@atlaskit/icon/utility/cross-circle',
+    categorization: 'Multi-purpose',
+    location: 'ADS',
+    team: 'ADS',
+    type: 'Utility',
+    usage: 'Reserved for Helper Messages in Forms.'
+  },
+  error: {
+    keywords: ['error', 'warning', 'alert', 'icon', 'utility', 'filled', 'status', 'form', 'helper'],
+    componentName: 'ErrorIcon',
+    package: '@atlaskit/icon/utility/error',
+    categorization: 'Multi-purpose',
+    location: 'ADS',
+    team: 'ADS',
+    type: 'Utility',
+    usage: 'Reserved for Helper Messages in Forms.'
+  },
+  information: {
+    keywords: ['information', 'icon', 'utility', 'info', 'filled', 'helper', 'tip', 'form'],
+    componentName: 'InformationIcon',
+    package: '@atlaskit/icon/utility/information',
+    categorization: 'Multi-purpose',
+    location: 'ADS',
+    team: 'ADS',
+    type: 'Utility',
+    usage: 'Reserved for Helper Messages in Forms.'
+  },
+  'link-external': {
+    keywords: ['link-external', 'linkexternal', 'icon', 'utility', 'new tab', 'new window', 'open in', 'url', 'hyperlink', 'www', 'http', 'https', 'website', 'external', 'shortcut', 'diagonal arrow', 'secondary', 'tertiary'],
+    componentName: 'LinkExternalIcon',
+    package: '@atlaskit/icon/utility/link-external',
+    categorization: 'Multi-purpose',
+    location: 'ADS',
+    team: 'ADS',
+    type: 'Utility',
+    usage: 'Reserved for links that open up a new tab as a secondary/tertiary action.'
+  },
+  'lock-locked': {
+    keywords: ['lock-locked', 'locklocked', 'icon', 'utility', 'secondary', 'tertiary', 'permissions', 'no access', 'restricted', 'security', 'secure', 'forbidden', 'authentication'],
+    componentName: 'LockLockedIcon',
+    package: '@atlaskit/icon/utility/lock-locked',
+    categorization: 'Multi-purpose',
+    location: 'ADS',
+    team: 'ADS',
+    type: 'Utility',
+    usage: 'Reserved for indicating something is locked in the side navigation Menu Item.'
+  },
+  'lock-unlocked': {
+    keywords: ['lock-unlocked', 'lockunlocked', 'icon', 'utility', 'secondary', 'tertiary', 'open permissions', 'unrestricted access', 'security', 'insecure', 'authentication'],
+    componentName: 'LockUnlockedIcon',
+    package: '@atlaskit/icon/utility/lock-unlocked',
+    categorization: 'Multi-purpose',
+    location: 'ADS',
+    team: 'ADS',
+    type: 'Utility',
+    usage: 'Reserved for indicating something is locked in the side navigation Menu Item.'
+  },
+  'show-more-horizontal': {
+    keywords: ['show-more-horizontal', 'showmorehorizontal', 'icon', 'utility', 'ellipses', 'three dots', 'meatball', 'more actions', 'secondary', 'tertiary'],
+    componentName: 'ShowMoreHorizontalIcon',
+    package: '@atlaskit/icon/utility/show-more-horizontal',
+    categorization: 'Multi-purpose',
+    location: 'ADS',
+    team: 'ADS',
+    type: 'Utility',
+    usage: 'Reserved for secondary/tertiary more action menus.'
+  },
+  'show-more-vertical': {
+    keywords: ['show-more-vertical', 'showmorevertical', 'icon', 'utility', 'three dots', 'kebab', 'more actions', 'secondary', 'tertiary'],
+    componentName: 'ShowMoreVerticalIcon',
+    package: '@atlaskit/icon/utility/show-more-vertical',
+    categorization: 'Multi-purpose',
+    location: 'ADS',
+    team: 'ADS',
+    type: 'Utility',
+    usage: 'Reserved for secondary/tertiary action menus, traditionally on mobile.'
+  },
+  'star-starred': {
+    keywords: ['star-starred', 'starstarred', 'icon', 'utility', 'favourite', 'star', 'starred', 'filled', 'menu', 'secondary', 'tertiary'],
+    componentName: 'StarStarredIcon',
+    package: '@atlaskit/icon/utility/star-starred',
+    categorization: 'Multi-purpose',
+    location: 'ADS',
+    team: 'ADS',
+    type: 'Utility',
+    usage: 'Reserved for starred or favourited objects as a secondary/tertiary action.'
+  },
+  'star-unstarred': {
+    keywords: ['star-unstarred', 'starunstarred', 'icon', 'utility', 'favourite', 'star', 'form', 'secondary', 'tertiary'],
+    componentName: 'StarUnstarredIcon',
+    package: '@atlaskit/icon/utility/star-unstarred',
+    categorization: 'Multi-purpose',
+    location: 'ADS',
+    team: 'ADS',
+    type: 'Utility',
+    usage: 'Reserved for starring or favoriting objects as a secondary/tertiary action.'
+  },
+  warning: {
+    keywords: ['warning', 'error', 'alert', 'icon', 'utility', 'alert', 'danger', 'triangle', 'filled', 'secondary', 'tertiary'],
+    componentName: 'WarningIcon',
+    package: '@atlaskit/icon/utility/warning',
+    categorization: 'Multi-purpose',
+    location: 'ADS',
+    team: 'ADS',
+    type: 'Utility',
+    usage: 'Reserved for Helper Messages in Forms.'
+  }
+};
+var _default = exports.default = metadata;

package/dist/es2019/components/icon-new.js

@@ -0,0 +1,156 @@
+/** @jsx jsx */
+import { memo } from 'react';
+import { css, jsx } from '@emotion/react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+
+/**
+ * We are hiding this props from consumers as it's reserved
+ * for use by Icon Tile.
+ */
+
+const commonSVGStyles = css({
+  overflow: 'hidden',
+  pointerEvents: 'none',
+  /**
+   * Stop-color doesn't properly apply in chrome when the inherited/current color changes.
+   * We have to initially set stop-color to inherit (either via DOM attribute or an initial CSS
+   * rule) and then override it with currentColor for the color changes to be picked up.
+   */
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  stop: {
+    stopColor: 'currentColor'
+  }
+});
+const svgStyles = css({
+  color: 'currentColor',
+  verticalAlign: 'bottom'
+});
+const iconStyles = css({
+  display: 'inline-block',
+  boxSizing: 'border-box',
+  flexShrink: 0,
+  lineHeight: 1,
+  paddingInlineEnd: 'var(--ds--button--new-icon-padding-end, 0)',
+  paddingInlineStart: 'var(--ds--button--new-icon-padding-start, 0)'
+});
+const utilityIconStyles = css({
+  lineHeight: "var(--ds-space-150, 12px)"
+});
+const scaleStyles = css({
+  width: 'inherit',
+  height: 'inherit'
+});
+
+/**
+ * For windows high contrast mode
+ */
+const baseHcmStyles = css({
+  '@media screen and (forced-colors: active)': {
+    color: 'CanvasText',
+    filter: 'grayscale(1)'
+  }
+});
+const sizeMap = {
+  scale: css({
+    width: 'inherit',
+    height: 'inherit'
+  }),
+  utility: css({
+    width: "var(--ds-space-150, 12px)",
+    height: "var(--ds-space-150, 12px)"
+  }),
+  none: css({
+    width: "var(--ds-space-200, 16px)",
+    height: "var(--ds-space-200, 16px)"
+  }),
+  spacious: css({
+    width: "var(--ds-space-300, 24px)",
+    height: "var(--ds-space-300, 24px)"
+  })
+};
+const baseSizeMap = {
+  global: 16,
+  utility: 12
+};
+
+/**
+ * __Icon__
+ *
+ * An icon is used as a visual representation of common actions and commands to provide context.
+ *
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/icon)
+ * - [Code](https://atlaskit.atlassian.com/packages/design-system/icon/docs/custom-icons)
+ */
+export const Icon = /*#__PURE__*/memo(function Icon(props) {
+  const {
+    color = "var(--ds-icon, #44546F)",
+    spacing = 'none',
+    testId,
+    label,
+    LEGACY_secondaryColor,
+    LEGACY_size = 'medium',
+    LEGACY_fallbackIcon: FallbackIcon,
+    // Used to set icon dimensions/behaviour in codegen
+    type = 'global',
+    // Used to set icon glyphs in codegen
+    dangerouslySetGlyph,
+    // Used with iconTile to scale icon up and down
+    shouldScale
+  } = props;
+  const dangerouslySetInnerHTML = dangerouslySetGlyph ? {
+    __html: dangerouslySetGlyph
+  } : undefined;
+
+  // Fall back to old icon
+  if (FallbackIcon && !getBooleanFF('platform.design-system-team.enable-new-icons')) {
+    // parse out unnecessary props
+    return jsx(FallbackIcon, {
+      primaryColor: color,
+      secondaryColor: LEGACY_secondaryColor,
+      size: LEGACY_size,
+      label: label,
+      testId: testId
+    });
+  }
+  const baseSize = baseSizeMap[type];
+  const size = type === 'utility' ? 'utility' : shouldScale ? 'scale' : spacing;
+  const viewBoxPadding = spacing === 'spacious' ? 4 : 0;
+  const viewBoxSize = baseSize + 2 * viewBoxPadding;
+
+  // Workaround for the transparency in our disabled icon token.
+  // Because we have multiple strokes in icons, opacities overlap
+  // This filter has an impact on render performance, but this is
+  // acceptable as icons aren't commonly disabled en-masse
+  let iconColor = color;
+  if (dangerouslySetInnerHTML && color === "var(--ds-icon-disabled, #091E424F)") {
+    dangerouslySetInnerHTML.__html = `
+<filter id="ds-newIconOpacityFilter">
+  <feFlood flood-color="var(--ds-icon-disabled)" />
+  <feComposite in2="SourceGraphic" operator="in" />
+</filter>
+<g filter="url(#ds-newIconOpacityFilter)">
+  ${dangerouslySetInnerHTML.__html}
+</g>`;
+    iconColor = "var(--ds-icon, #44546F)";
+  }
+  return jsx("span", {
+    "data-testid": testId,
+    role: label ? 'img' : undefined,
+    "aria-label": label ? label : undefined,
+    "aria-hidden": label ? undefined : true,
+    style: {
+      color: iconColor
+    },
+    css: [iconStyles, baseHcmStyles, shouldScale && scaleStyles, type === 'utility' && utilityIconStyles]
+  }, jsx("svg", {
+    fill: "none"
+    // Adjusting the viewBox allows the icon padding to scale with the contents of the SVG, which
+    // we want for Icon Tile
+    ,
+    viewBox: `${0 - viewBoxPadding} ${0 - viewBoxPadding} ${viewBoxSize} ${viewBoxSize}`,
+    role: "presentation",
+    css: [commonSVGStyles, svgStyles, sizeMap[size]],
+    dangerouslySetInnerHTML: dangerouslySetInnerHTML
+  }));
+});
+export default Icon;

package/dist/es2019/components/icon-tile.js

@@ -0,0 +1,149 @@
+/** @jsx jsx */
+
+import { css, jsx } from '@emotion/react';
+const sizeMap = {
+  '16': css({
+    width: '16px',
+    height: '16px'
+  }),
+  '24': css({
+    width: '24px',
+    height: '24px'
+  }),
+  '32': css({
+    width: '32px',
+    height: '32px'
+  }),
+  '40': css({
+    width: '40px',
+    height: '40px'
+  }),
+  '48': css({
+    width: '48px',
+    height: '48px'
+  })
+};
+const appearanceMap = {
+  grayBold: css({
+    backgroundColor: "var(--ds-background-accent-gray-bolder, #626F86)",
+    color: "var(--ds-icon-inverse, #FFFFFF)"
+  }),
+  limeBold: css({
+    backgroundColor: "var(--ds-background-accent-lime-bolder, #5B7F24)",
+    color: "var(--ds-icon-inverse, #FFFFFF)"
+  }),
+  greenBold: css({
+    backgroundColor: "var(--ds-background-accent-green-bolder, #1F845A)",
+    color: "var(--ds-icon-inverse, #FFFFFF)"
+  }),
+  blueBold: css({
+    backgroundColor: "var(--ds-background-accent-blue-bolder, #0C66E4)",
+    color: "var(--ds-icon-inverse, #FFFFFF)"
+  }),
+  redBold: css({
+    backgroundColor: "var(--ds-background-accent-red-bolder, #C9372C)",
+    color: "var(--ds-icon-inverse, #FFFFFF)"
+  }),
+  purpleBold: css({
+    backgroundColor: "var(--ds-background-accent-purple-bolder, #6E5DC6)",
+    color: "var(--ds-icon-inverse, #FFFFFF)"
+  }),
+  magentaBold: css({
+    backgroundColor: "var(--ds-background-accent-magenta-bolder, #AE4787)",
+    color: "var(--ds-icon-inverse, #FFFFFF)"
+  }),
+  tealBold: css({
+    backgroundColor: "var(--ds-background-accent-teal-bolder, #227D9B)",
+    color: "var(--ds-icon-inverse, #FFFFFF)"
+  }),
+  orangeBold: css({
+    backgroundColor: "var(--ds-background-accent-orange-bolder, #C25100)",
+    color: "var(--ds-icon-inverse, #FFFFFF)"
+  }),
+  yellowBold: css({
+    backgroundColor: "var(--ds-background-accent-yellow-bolder, #946F00)",
+    color: "var(--ds-icon-inverse, #FFFFFF)"
+  }),
+  gray: css({
+    backgroundColor: "var(--ds-background-accent-gray-subtler, #DCDFE4)",
+    color: "var(--ds-icon-accent-gray, #758195)"
+  }),
+  lime: css({
+    backgroundColor: "var(--ds-background-accent-lime-subtler, #D3F1A7)",
+    color: "var(--ds-icon-accent-lime, #6A9A23)"
+  }),
+  orange: css({
+    backgroundColor: "var(--ds-background-accent-orange-subtler, #FEDEC8)",
+    color: "var(--ds-icon-accent-orange, #E56910)"
+  }),
+  magenta: css({
+    backgroundColor: "var(--ds-background-accent-magenta-subtler, #FDD0EC)",
+    color: "var(--ds-icon-accent-magenta, #CD519D)"
+  }),
+  green: css({
+    backgroundColor: "var(--ds-background-accent-green-subtler, #BAF3DB)",
+    color: "var(--ds-icon-accent-green, #22A06B)"
+  }),
+  blue: css({
+    backgroundColor: "var(--ds-background-accent-blue-subtler, #CCE0FF)",
+    color: "var(--ds-icon-accent-blue, #1D7AFC)"
+  }),
+  red: css({
+    backgroundColor: "var(--ds-background-accent-red-subtler, #FFD5D2)",
+    color: "var(--ds-icon-accent-red, #C9372C)"
+  }),
+  purple: css({
+    backgroundColor: "var(--ds-background-accent-purple-subtler, #DFD8FD)",
+    color: "var(--ds-icon-accent-purple, #8270DB)"
+  }),
+  teal: css({
+    backgroundColor: "var(--ds-background-accent-teal-subtler, #C6EDFB)",
+    color: "var(--ds-icon-accent-teal, #2898BD)"
+  }),
+  yellow: css({
+    backgroundColor: "var(--ds-background-accent-yellow-subtler, #F8E6A0)",
+    color: "var(--ds-icon-accent-yellow, #B38600)"
+  })
+};
+const shapeMap = {
+  square: css({
+    borderRadius: "var(--ds-border-radius-100, 4px)"
+  }),
+  circle: css({
+    borderRadius: "var(--ds-border-radius-circle, 32032px)"
+  })
+};
+const iconTileStyles = css({
+  display: 'inline-flex',
+  boxSizing: 'border-box',
+  alignItems: 'center',
+  justifyContent: 'center'
+});
+
+/**
+ * __IconTile__ -- ⚠️ Experimental ⚠️
+ *
+ * An icon tile is used to present an icon with a background color.
+ * Icon tiles, unlike standard icons, can scale up and down to provide greater emphasis.
+ *
+ * This component is currently in an experimental state and is subject to change in minor or patch releases.
+ *
+ */
+export default function IconTile(props) {
+  const {
+    icon: Icon,
+    label,
+    appearance,
+    size = '24',
+    shape = 'square'
+  } = props;
+  const ExpandedIcon = Icon;
+  return jsx("span", {
+    css: [iconTileStyles, appearanceMap[appearance], sizeMap[size], shapeMap[shape]]
+  }, jsx(ExpandedIcon, {
+    color: "currentColor",
+    label: label,
+    spacing: "spacious",
+    shouldScale: true
+  }));
+}

package/dist/es2019/components/icon.js

@@ -38,7 +38,6 @@ const baseHcmStyles = css({
     }
   }
 });
-
 const primaryEqualsSecondaryHcmStyles = css({
   '@media screen and (forced-colors: active)': {
     // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
@@ -50,7 +49,6 @@ const primaryEqualsSecondaryHcmStyles = css({
     }
   }
 });
-
 const secondaryTransparentHcmStyles = css({
   '@media screen and (forced-colors: active)': {
     // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
@@ -106,7 +104,7 @@ export const Icon = /*#__PURE__*/memo(function Icon(props) {
   }, glyphProps, {
     css: [iconStyles, baseHcmStyles, primaryColor === secondaryColor && primaryEqualsSecondaryHcmStyles, secondaryColor === 'transparent' && secondaryTransparentHcmStyles,
     // NB: This can be resolved if this component, composes base SVG / and/or skeleton
-    // We could then simplify how common styles are dealt with simply by encapsualting them
+    // We could then simplify how common styles are dealt with simply by encapsulating them
     // at their appropriate level and/or having a singular approach to css variables in the package
     dimensions &&
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage

package/dist/es2019/entry-points/base-new.js

@@ -0,0 +1 @@
+export { default, Icon } from '../components/icon-new';

package/dist/es2019/entry-points/types.js

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

package/dist/es2019/index.js

@@ -1,4 +1,6 @@
 export { default } from './components/icon';
+export { default as UNSAFE_IconNew } from './components/icon-new';
 export { default as SVG } from './components/svg';
 export { sizeMap as size, sizes } from './constants';
-export { default as Skeleton } from './components/skeleton';
+export { default as Skeleton } from './components/skeleton';
+export { default as IconTile } from './components/icon-tile';