@atlaskit/smart-card 17.0.0 → 17.0.1

package/dist/esm/view/FlexibleCard/components/elements/icon/image-icon/types.js

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

package/dist/esm/view/FlexibleCard/components/elements/icon/index.js

@@ -0,0 +1,124 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+/** @jsx jsx */
+import React, { useMemo } from 'react';
+import LinkIcon from '@atlaskit/icon/glyph/link';
+import { css, jsx } from '@emotion/core';
+import { SmartLinkSize } from '../../../../../constants';
+import AtlaskitIcon from './atlaskit-icon';
+import ImageIcon from './image-icon';
+
+var getDimensionStyles = function getDimensionStyles(value) {
+  return {
+    maxHeight: value,
+    maxWidth: value,
+    minHeight: value,
+    minWidth: value,
+    height: value,
+    width: value
+  };
+};
+
+var getSizeStyles = function getSizeStyles(size) {
+  switch (size) {
+    case SmartLinkSize.XLarge:
+      return getDimensionStyles('1.75rem');
+
+    case SmartLinkSize.Large:
+      return getDimensionStyles('1.5rem');
+
+    case SmartLinkSize.Medium:
+      return getDimensionStyles('1rem');
+
+    case SmartLinkSize.Small:
+    default:
+      return getDimensionStyles('.75rem');
+  }
+};
+
+var getMargin = function getMargin(size) {
+  switch (size) {
+    case SmartLinkSize.XLarge:
+      return '0.12em 0 0 0';
+
+    case SmartLinkSize.Large:
+      return '0';
+
+    case SmartLinkSize.Medium:
+      return '0';
+
+    case SmartLinkSize.Small:
+    default:
+      return '-.05em 0 0 0';
+  }
+};
+
+var getIconStyles = function getIconStyles(size) {
+  var styles = getSizeStyles(size);
+  return css(_objectSpread(_objectSpread({
+    flex: '0 0 auto',
+    alignSelf: 'flex-start',
+    margin: getMargin(size)
+  }, styles), {}, {
+    '[class$="-Icon"],[class$="-Wrapper"]': _objectSpread(_objectSpread({}, styles), {}, {
+      '> svg': _objectSpread(_objectSpread({}, styles), {}, {
+        padding: 0
+      })
+    }),
+    '& > img': styles
+  }));
+};
+
+var renderAtlaskitIcon = function renderAtlaskitIcon(icon, label, testId) {
+  if (icon) {
+    return jsx(AtlaskitIcon, {
+      icon: icon,
+      label: label,
+      testId: "".concat(testId, "-icon")
+    });
+  }
+};
+
+var renderDefaultIcon = function renderDefaultIcon(label, testId) {
+  return jsx(LinkIcon, {
+    label: label,
+    testId: "".concat(testId, "-default")
+  });
+};
+
+var renderImageIcon = function renderImageIcon(defaultIcon, icon, url, testId) {
+  if (url) {
+    return jsx(ImageIcon, {
+      defaultIcon: defaultIcon,
+      testId: testId,
+      url: url
+    });
+  }
+};
+
+var Icon = function Icon(_ref) {
+  var icon = _ref.icon,
+      _ref$label = _ref.label,
+      label = _ref$label === void 0 ? 'Link' : _ref$label,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? SmartLinkSize.Medium : _ref$size,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'smart-element-icon' : _ref$testId,
+      url = _ref.url;
+  var element = useMemo(function () {
+    var defaultIcon = renderDefaultIcon(label, testId);
+    return renderImageIcon(defaultIcon, icon, url, testId) || renderAtlaskitIcon(icon, label, testId) || defaultIcon;
+  }, [icon, label, testId, url]);
+  var styles = getIconStyles(size);
+  return jsx("div", {
+    css: styles,
+    "data-smart-element-icon": true,
+    "data-testid": testId
+  }, element);
+};
+
+export default Icon;

package/dist/esm/view/FlexibleCard/components/elements/icon/types.js

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

package/dist/esm/view/FlexibleCard/components/elements/link/index.js

@@ -0,0 +1,120 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+/** @jsx jsx */
+import React from 'react';
+import { B400, N800, N900, B500 } from '@atlaskit/theme/colors';
+import { h200, h400, h600, h800 } from '@atlaskit/theme/typography';
+import { token } from '@atlaskit/tokens';
+import { css, jsx } from '@emotion/core';
+import { SmartLinkSize, SmartLinkTheme } from '../../../../../constants';
+var DEFAULT_MAX_LINES = 2;
+var MAXIMUM_MAX_LINES = 2;
+var MINIMUM_MAX_LINES = 1;
+
+var getSizeStyles = function getSizeStyles(size) {
+  var overrides = {
+    marginTop: 'unset'
+  };
+
+  switch (size) {
+    case SmartLinkSize.XLarge:
+      return _objectSpread(_objectSpread({}, h800()), overrides);
+
+    case SmartLinkSize.Large:
+      return _objectSpread(_objectSpread({}, h600()), overrides);
+
+    case SmartLinkSize.Medium:
+      return _objectSpread(_objectSpread({}, h400()), overrides);
+
+    case SmartLinkSize.Small:
+    default:
+      return _objectSpread(_objectSpread({}, h200()), overrides);
+  }
+};
+
+var getThemeStyles = function getThemeStyles(theme) {
+  switch (theme) {
+    case SmartLinkTheme.Black:
+      return {
+        color: token('color.text.subtle', N800),
+        fontWeight: 500,
+        ':active': {
+          color: token('color.text', N900)
+        },
+        ':hover': {
+          color: token('color.text.subtle', N800),
+          textDecoration: 'underline'
+        }
+      };
+
+    case SmartLinkTheme.Link:
+    default:
+      return {
+        color: token('color.link', B400),
+        ':active': {
+          color: token('color.link.pressed', B500)
+        },
+        ':hover': {
+          color: token('color.link', B400),
+          textDecoration: 'underline'
+        }
+      };
+  }
+};
+
+var getTruncateStyles = function getTruncateStyles(maxLines) {
+  var lineHeight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 16;
+  return {
+    display: '-webkit-box',
+    flex: '1 1 auto',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    wordBreak: 'break-word',
+    WebkitLineClamp: maxLines,
+    WebkitBoxOrient: 'vertical',
+    // Fallback options.
+    maxHeight: "".concat((maxLines * lineHeight).toFixed(3), "em")
+  };
+};
+
+var getStyles = function getStyles(size, theme, maxLines) {
+  var sizeStyles = getSizeStyles(size);
+  return css(_objectSpread(_objectSpread(_objectSpread({}, sizeStyles), getTruncateStyles(maxLines, sizeStyles === null || sizeStyles === void 0 ? void 0 : sizeStyles.lineHeight)), getThemeStyles(theme)));
+};
+
+var getMaxLines = function getMaxLines(maxLines) {
+  if (maxLines > MAXIMUM_MAX_LINES) {
+    return DEFAULT_MAX_LINES;
+  }
+
+  if (maxLines < MINIMUM_MAX_LINES) {
+    return MINIMUM_MAX_LINES;
+  }
+
+  return maxLines;
+};
+
+var Link = function Link(_ref) {
+  var _ref$maxLines = _ref.maxLines,
+      maxLines = _ref$maxLines === void 0 ? DEFAULT_MAX_LINES : _ref$maxLines,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? SmartLinkSize.Medium : _ref$size,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'smart-element-link' : _ref$testId,
+      text = _ref.text,
+      _ref$theme = _ref.theme,
+      theme = _ref$theme === void 0 ? SmartLinkTheme.Link : _ref$theme,
+      url = _ref.url;
+  return jsx("a", {
+    css: getStyles(size, theme, getMaxLines(maxLines)),
+    href: url,
+    "data-smart-element-link": true,
+    "data-testid": testId
+  }, text);
+};
+
+export default Link;

package/dist/esm/view/FlexibleCard/components/elements/link/types.js

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

package/dist/esm/view/FlexibleCard/components/elements/types.js

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

package/dist/types/constants.d.ts

@@ -0,0 +1,56 @@
+export declare enum SmartLinkDirection {
+    Horizontal = "Horizontal",
+    Vertical = "Vertical"
+}
+export declare enum SmartLinkSize {
+    XLarge = "xlarge",
+    Large = "large",
+    Medium = "medium",
+    Small = "small"
+}
+export declare enum SmartLinkTheme {
+    Black = "Black",
+    Link = "Link"
+}
+export declare enum IconType {
+    Archive = "FileType:Archive",
+    Audio = "FileType:Audio",
+    Blog = "FileType:Blog",
+    Code = "FileType:Code",
+    Document = "FileType:Document",
+    Executable = "FileType:Executable",
+    File = "FileType:File",
+    Folder = "FileType:Folder",
+    Generic = "FileType:Generic",
+    GIF = "FileType:GIF",
+    GoogleDocs = "FileType:GoogleDocs",
+    GoogleForms = "FileType:GoogleForms",
+    GoogleSheets = "FileType:GoogleSheets",
+    GoogleSlides = "FileType:GoogleSlides",
+    Image = "FileType.Image",
+    MSExcel = "FileType:Excel",
+    MSPowerpoint = "FileType:Powerpoint",
+    MSWord = "FileType:WordDocument",
+    PDF = "FileType:PDF",
+    Presentation = "FileType:Presentation",
+    Sketch = "FileType:Sketch",
+    Spreadsheet = "FileType:Spreadsheet",
+    Template = "FileType:Template",
+    Video = "FileType:Video",
+    Branch = "BitBucket:Branch",
+    Commit = "BitBucket:Commit",
+    Project = "BitBucket:Project",
+    PullRequest = "BitBucket:PullRequest",
+    Repo = "BitBucket:Repo",
+    Bug = "Jira:Bug",
+    Change = "Jira:Change",
+    Epic = "Jira:Epic",
+    Incident = "Jira:Incident",
+    Problem = "Jira:Problem",
+    ServiceRequest = "Jira:ServiceRequest",
+    Story = "Jira:Story",
+    SubTask = "Jira:SubTask",
+    Task = "Jira:Task",
+    Confluence = "Provider:Confluence",
+    Jira = "Provider:Jira"
+}

package/dist/types/extractors/flexible/index.d.ts

@@ -0,0 +1,4 @@
+import { JsonLd } from 'json-ld-types';
+import { FlexibleUiDataContext } from '../../state/flexible-ui-context/types';
+declare const extractFlexibleUiContext: (response?: JsonLd.Response<JsonLd.Data.BaseData> | undefined) => FlexibleUiDataContext | undefined;
+export default extractFlexibleUiContext;

package/dist/types/state/flexible-ui-context/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { FlexibleUiDataContext } from './types';
+export declare const FlexibleUiContext: import("react").Context<FlexibleUiDataContext | undefined>;
+export declare const useFlexibleUiContext: () => FlexibleUiDataContext | undefined;

package/dist/types/state/flexible-ui-context/types.d.ts

@@ -0,0 +1,3 @@
+export declare type FlexibleUiDataContext = {
+    title?: string;
+};

package/dist/types/view/FlexibleCard/components/blocks/block/index.d.ts

@@ -0,0 +1,7 @@
+/** @jsx jsx */
+import React from 'react';
+import { BlockProps } from '../types';
+import { SmartLinkDirection, SmartLinkSize } from '../../../../../constants';
+export declare const getBlockStyles: (direction: SmartLinkDirection, size: SmartLinkSize) => import("@emotion/core").SerializedStyles;
+declare const Block: React.FC<BlockProps>;
+export default Block;

package/dist/types/view/FlexibleCard/components/blocks/types.d.ts

@@ -0,0 +1,6 @@
+import { SmartLinkDirection, SmartLinkSize } from '../../../../constants';
+export declare type BlockProps = {
+    direction?: SmartLinkDirection;
+    size?: SmartLinkSize;
+    testId?: string;
+};

package/dist/types/view/FlexibleCard/components/container/index.d.ts

@@ -0,0 +1,7 @@
+/** @jsx jsx */
+import React from 'react';
+import { SmartLinkSize } from '../../../../constants';
+import { ContainerProps } from './types';
+export declare const getContainerStyles: (size: SmartLinkSize, hideBackground: boolean, hideElevation: boolean, hidePadding: boolean) => import("@emotion/core").SerializedStyles;
+declare const Container: React.FC<ContainerProps>;
+export default Container;

package/dist/types/view/FlexibleCard/components/container/types.d.ts

@@ -0,0 +1,8 @@
+import { SmartLinkSize } from '../../../../constants';
+export declare type ContainerProps = {
+    hideBackground?: boolean;
+    hideElevation?: boolean;
+    hidePadding?: boolean;
+    size?: SmartLinkSize;
+    testId?: string;
+};

package/dist/types/view/FlexibleCard/components/elements/icon/atlaskit-icon/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { AtlaskitIconProps } from './types';
+declare const AtlaskitIcon: React.FC<AtlaskitIconProps>;
+export default AtlaskitIcon;

package/dist/types/view/FlexibleCard/components/elements/icon/atlaskit-icon/types.d.ts

@@ -0,0 +1,6 @@
+import { IconType } from '../../../../../../constants';
+export declare type AtlaskitIconProps = {
+    icon: IconType;
+    label?: string;
+    testId?: string;
+};

package/dist/types/view/FlexibleCard/components/elements/icon/image-icon/index.d.ts

@@ -0,0 +1,5 @@
+/** @jsx jsx */
+import React from 'react';
+import { ImageIconProps } from './types';
+declare const ImageIcon: React.FC<ImageIconProps>;
+export default ImageIcon;

package/dist/types/view/FlexibleCard/components/elements/icon/image-icon/types.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare type ImageIconProps = {
+    defaultIcon?: React.ReactNode;
+    testId?: string;
+    url: string;
+};

package/dist/types/view/FlexibleCard/components/elements/icon/index.d.ts

@@ -0,0 +1,5 @@
+/** @jsx jsx */
+import React from 'react';
+import { IconProps } from './types';
+declare const Icon: React.FC<IconProps>;
+export default Icon;

package/dist/types/view/FlexibleCard/components/elements/icon/types.d.ts

@@ -0,0 +1,7 @@
+import { ElementProps } from '../types';
+import { IconType } from '../../../../../constants';
+export declare type IconProps = ElementProps & {
+    icon?: IconType;
+    label?: string;
+    url?: string;
+};

package/dist/types/view/FlexibleCard/components/elements/link/index.d.ts

@@ -0,0 +1,5 @@
+/** @jsx jsx */
+import React from 'react';
+import { LinkProps } from './types';
+declare const Link: React.FC<LinkProps>;
+export default Link;

package/dist/types/view/FlexibleCard/components/elements/link/types.d.ts

@@ -0,0 +1,8 @@
+import { ElementProps } from '../types';
+import { SmartLinkTheme } from '../../../../../constants';
+export declare type LinkProps = ElementProps & {
+    maxLines?: number;
+    text: string;
+    theme?: SmartLinkTheme;
+    url: string;
+};

package/dist/types/view/FlexibleCard/components/elements/types.d.ts

@@ -0,0 +1,5 @@
+import { SmartLinkSize } from '../../../../constants';
+export declare type ElementProps = {
+    size?: SmartLinkSize;
+    testId?: string;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "17.0.0",
+  "version": "17.0.1",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -24,16 +24,18 @@
   "dependencies": {
     "@atlaskit/analytics-gas-types": "^5.0.0",
     "@atlaskit/analytics-next": "^8.2.0",
-    "@atlaskit/icon": "^21.9.0",
+    "@atlaskit/icon": "^21.10.0",
     "@atlaskit/icon-file-type": "^6.3.0",
     "@atlaskit/icon-object": "^6.2.0",
     "@atlaskit/in-product-testing": "^0.1.0",
     "@atlaskit/logo": "^13.5.0",
-    "@atlaskit/media-ui": "^18.0.0",
+    "@atlaskit/media-ui": "^18.1.0",
     "@atlaskit/outbound-auth-flow-client": "^3.3.0",
-    "@atlaskit/theme": "^12.0.0",
+    "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/tokens": "^0.6.0",
     "@atlaskit/ufo": "^0.0.6",
     "@babel/runtime": "^7.0.0",
+    "@emotion/core": "^10.0.9",
     "@formatjs/intl-utils": "^3.8.4",
     "async-retry": "^1.2.3",
     "dataloader": "^2.0.0",
@@ -42,6 +44,7 @@
     "react-error-boundary": "^3.1.3",
     "react-lazily-render": "^1.2.0",
     "react-loadable": "^5.1.0",
+    "react-render-image": "^1.1.3",
     "redux": "^3.7.2",
     "setimmediate": "^1.0.5",
     "uuid": "^3.1.0"
@@ -60,14 +63,15 @@
     "@atlaskit/inline-message": "^11.2.0",
     "@atlaskit/lozenge": "^11.1.0",
     "@atlaskit/media-test-helpers": "^29.0.0",
-    "@atlaskit/page": "^12.0.0",
+    "@atlaskit/page": "^12.1.0",
     "@atlaskit/radio": "^5.3.0",
     "@atlaskit/select": "^15.2.0",
     "@atlaskit/spinner": "^15.1.0",
-    "@atlaskit/table-tree": "^9.0.0",
+    "@atlaskit/table-tree": "^9.1.0",
     "@atlaskit/textarea": "^4.2.0",
     "@atlaskit/textfield": "^5.1.0",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
+    "@testing-library/jest-dom": "^4.1.0",
     "@testing-library/react": "^8.0.1",
     "@testing-library/react-hooks": "^1.0.4",
     "@types/async-retry": "^1.4.1",