@atlaskit/smart-card 23.14.0 → 23.14.2

package/dist/es2019/view/FlexibleCard/components/elements/date-time/index.js

@@ -1,5 +1,4 @@
 import _extends from "@babel/runtime/helpers/extends";
-
 /** @jsx jsx */
 import React from 'react';
 import { useIntl, FormattedMessage } from 'react-intl-next';
@@ -24,6 +23,7 @@ const typeToDescriptorMap = {
     absolute: messages.modified_on_absolute
   }
 };
+
 /**
  * A base element that displays an ISO Timestamp in text.
  * @internal
@@ -31,7 +31,6 @@ const typeToDescriptorMap = {
  * @see CreatedOn
  * @see ModifiedOn
  */
-
 const DateTime = ({
   date,
   name,
@@ -44,15 +43,12 @@ const DateTime = ({
     formatRelativeTime,
     formatDate
   } = useIntl();
-
   if (!type || !date) {
     return null;
   }
-
   const isLongerThenWeek = Math.abs(date.getTime() - Date.now()) > 1000 * 60 * 60 * 24 * 7;
   let context;
   let typeVariant;
-
   if (isLongerThenWeek) {
     typeVariant = 'absolute';
     context = formatDate(date, {
@@ -70,7 +66,6 @@ const DateTime = ({
       numeric: 'auto'
     });
   }
-
   return jsx("span", {
     css: [styles, overrideCss],
     "data-separator": true,
@@ -83,5 +78,4 @@ const DateTime = ({
     }
   })));
 };
-
 export default DateTime;

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

@@ -6,14 +6,12 @@ import { SmartLinkPosition, SmartLinkSize } from '../../../../../constants';
 import AtlaskitIcon from '../../common/atlaskit-icon';
 import ImageIcon from '../../common/image-icon';
 import { getIconSizeStyles, getIconWidth, getTruncateStyles } from '../../utils';
-
 const getPositionStyles = (size, position) => {
   switch (position) {
     case SmartLinkPosition.Center:
       return css`
         align-self: center;
       `;
-
     case SmartLinkPosition.Top:
     default:
       return css`
@@ -22,12 +20,10 @@ const getPositionStyles = (size, position) => {
       `;
   }
 };
-
 const getIconStyles = (size, position, width) => css`
   ${getPositionStyles(size, position)}
   ${getIconSizeStyles(width)}
 `;
-
 const getCustomRenderStyles = value => css`
   ${getTruncateStyles(1, value)}
   line-height: ${value};
@@ -41,7 +37,6 @@ const getCustomRenderStyles = value => css`
     vertical-align: baseline;
   }
 `;
-
 const renderAtlaskitIcon = (icon, label, testId) => {
   if (icon) {
     return jsx(AtlaskitIcon, {
@@ -51,12 +46,10 @@ const renderAtlaskitIcon = (icon, label, testId) => {
     });
   }
 };
-
 const renderDefaultIcon = (label, testId) => jsx(LinkIcon, {
   label: label,
   testId: `${testId}-default`
 });
-
 const renderImageIcon = (defaultIcon, icon, url, testId) => {
   if (url) {
     return jsx(ImageIcon, {
@@ -66,14 +59,13 @@ const renderImageIcon = (defaultIcon, icon, url, testId) => {
     });
   }
 };
+
 /**
  * A base element that displays an Icon or favicon.
  * @internal
  * @param {IconProps} IconProps - The props necessary for the Icon element.
  * @see LinkIcon
  */
-
-
 const Icon = ({
   icon,
   label = 'Link',
@@ -100,5 +92,4 @@ const Icon = ({
     "data-testid": testId
   }, element);
 };
-
 export default Icon;

package/dist/es2019/view/FlexibleCard/components/elements/index.js

@@ -3,7 +3,6 @@ import { ElementName } from '../../../../constants';
 // Attention: Keep the export name and element name the same.
 // This will help reducing the code for mapping elements inside
 // createElement and renderElementItems
-
 /**
  * Creates a AttachmentCount Badge element using the data from AttachmentCount in the Flexible UI Context.
  * @see Badge
@@ -13,143 +12,119 @@ export const AttachmentCount = createElement(ElementName.AttachmentCount);
  * An AvatarGroup element using the data from AuthorGroup in the Flexible UI Context.
  * @see AvatarGroup
  */
-
 export const AuthorGroup = createElement(ElementName.AuthorGroup);
 /**
  * Creates a Checklist Badge element using the data from ChecklistProgress in the Flexible UI Context.
  * @see Badge
  */
-
 export const ChecklistProgress = createElement(ElementName.ChecklistProgress);
 /**
  * An AvatarGroup element using the data from CollaboratorGroup in the Flexible UI Context.
  * @see AvatarGroup
  */
-
 export const CollaboratorGroup = createElement(ElementName.CollaboratorGroup);
 /**
  * Creates a CommentCount Badge element using the data from CommentCount in the Flexible UI Context.
  * @see Badge
  */
-
 export const CommentCount = createElement(ElementName.CommentCount);
 /**
  * Creates a CreatedOn DateTime element using the data from CreatedOn in the Flexible UI Context.
  * @see DateTime
  */
-
 export const CreatedOn = createElement(ElementName.CreatedOn);
 /**
  * Creates a CreatedBy text element using the data from CreatedBy in the Flexible UI Context.
  * @see Text
  */
-
 export const CreatedBy = createElement(ElementName.CreatedBy);
 /**
  * Creates a DueOn Lozenge element using the data from dueOn in the Flexible UI Context.
  * @see Lozenge
  */
-
 export const DueOn = createElement(ElementName.DueOn);
 /**
  * Creates an element that contains Last Commit hash
  */
-
 export const LatestCommit = createElement(ElementName.LatestCommit);
 /**
  * Creates a LinkIcon Icon element using the data from LinkIcon in the Flexible UI Context.
  * @see Icon
  */
-
 export const LinkIcon = createElement(ElementName.LinkIcon);
 /**
  * Creates a ModifiedBy Text element using the data from ModifiedBy in the Flexible UI Context.
  * @see Text
  */
-
 export const ModifiedBy = createElement(ElementName.ModifiedBy);
 /**
  * Creates a ModifiedOn DateTime element using the data from ModifiedOn in the Flexible UI Context.
  * @see DateTime
  */
-
 export const ModifiedOn = createElement(ElementName.ModifiedOn);
 /**
  * Creates a Preview element using the data from Preview in the Flexible UI Context.
  * @see Preview
  */
-
 export const Preview = createElement(ElementName.Preview);
 /**
  * Creates a Priority Badge element using the data from Priority in the Flexible UI Context.
  * @see Badge
  */
-
 export const Priority = createElement(ElementName.Priority);
 /**
  * Creates a ProgrammingLanguage Badge element using the data from ProgrammingLanguage in the Flexible UI Context.
  * @see Badge
  */
-
 export const ProgrammingLanguage = createElement(ElementName.ProgrammingLanguage);
 /**
  * Creates a Provider Badge element using the data from Provider in the Flexible UI Context.
  * @see Badge
  */
-
 export const Provider = createElement(ElementName.Provider);
 /**
  * Creates a ReactCount Badge element using the data from ReactCount in the Flexible UI Context.
  * @see Badge
  */
-
 export const ReactCount = createElement(ElementName.ReactCount);
 /**
  * Creates a Snippet element using the data from Snippet in the Flexible UI Context.
  * @see Text
  */
-
 export const Snippet = createElement(ElementName.Snippet);
 /**
  * Creates a SourceBranch Text element using the data from sourceBranch in the Flexible UI Context.
  * @see Text
  */
-
 export const SourceBranch = createElement(ElementName.SourceBranch);
 /**
  * Creates a State Lozenge element using the data from State in the Flexible UI Context.
  * @see Lozenge
  */
-
 export const State = createElement(ElementName.State);
 /**
  * Creates a SubscriberCount Badge element using the data from SubscriberCount in the Flexible UI Context.
  * @see Badge
  */
-
 export const SubscriberCount = createElement(ElementName.SubscriberCount);
 /**
  * Creates a TargetBranch Text element using the data from targetBranch in the Flexible UI Context.
  * @see Text
  */
-
 export const TargetBranch = createElement(ElementName.TargetBranch);
 /**
  * Creates a Title Link element using the data from Title in the Flexible UI Context.
  * This represents the main link text within the Smart Link.
  * @see Link
  */
-
 export const Title = createElement(ElementName.Title);
 /**
  * Creates a ViewCount Badge element using the data from ViewCount in the Flexible UI Context.
  * @see Badge
  */
-
 export const ViewCount = createElement(ElementName.ViewCount);
 /**
  * Creates a VoteCount Badge element using the data from VoteCount in the Flexible UI Context.
  * @see Badge
  */
-
 export const VoteCount = createElement(ElementName.VoteCount);

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

@@ -11,7 +11,6 @@ const MINIMUM_MAX_LINES = 1;
 const containerStyles = css`
   flex: 1 1 auto;
 `;
-
 const getThemeStyles = theme => {
   switch (theme) {
     // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
@@ -26,7 +25,6 @@ const getThemeStyles = theme => {
           text-decoration: underline;
         }
       `;
-
     case SmartLinkTheme.Link:
     default:
       return css`
@@ -41,7 +39,6 @@ const getThemeStyles = theme => {
       `;
   }
 };
-
 const getAnchorStyles = (size, theme, maxLines, hasSpace) => {
   const sizeStyles = getLinkSizeStyles(size);
   return css`
@@ -52,32 +49,27 @@ const getAnchorStyles = (size, theme, maxLines, hasSpace) => {
     ${getThemeStyles(theme)}
   `;
 };
-
 const getMaxLines = maxLines => {
   if (maxLines > MAXIMUM_MAX_LINES) {
     return DEFAULT_MAX_LINES;
   }
-
   if (maxLines < MINIMUM_MAX_LINES) {
     return MINIMUM_MAX_LINES;
   }
-
   return maxLines;
 };
-
 const withTooltip = (trigger, content, testId) => jsx(Tooltip, {
   content: content,
   testId: `${testId}-tooltip`,
   tag: "span"
 }, trigger);
+
 /**
  * A base element that represent an anchor.
  * @internal
  * @param {LinkProps} LinkProps - The props necessary for the Link element.
  * @see LinkIcon
  */
-
-
 const Link = ({
   hideTooltip,
   maxLines = DEFAULT_MAX_LINES,
@@ -105,5 +97,4 @@ const Link = ({
     css: containerStyles
   }, hideTooltip || text === undefined ? anchor : withTooltip(anchor, text, testId));
 };
-
 export default Link;

package/dist/es2019/view/FlexibleCard/components/elements/lozenge/index.js

@@ -24,13 +24,13 @@ const actionStyles = css`
     cursor: pointer;
   }
 `;
+
 /**
  * A base element that displays a Lozenge.
  * @internal
  * @param {LozengeProps} LozengeProps - The props necessary for the Lozenge element.
  * @see State
  */
-
 const Lozenge = ({
   appearance = 'default',
   name,
@@ -47,11 +47,9 @@ const Lozenge = ({
   }, [onClick]);
   const onMouseEnter = useCallback(() => onHover(true), [onHover]);
   const onMouseLeave = useCallback(() => onHover(false), [onHover]);
-
   if (!text) {
     return null;
   }
-
   return jsx("span", {
     css: [styles, onClick ? actionStyles : undefined, overrideCss],
     "data-fit-to-content": true,
@@ -71,5 +69,4 @@ const Lozenge = ({
     testId: `${testId}-action`
   })));
 };
-
 export default Lozenge;

package/dist/es2019/view/FlexibleCard/components/elements/media/index.js

@@ -2,7 +2,6 @@
 import React from 'react';
 import { css, jsx } from '@emotion/react';
 import ImageIcon from '../../common/image-icon';
-
 /**
  * Media: Image
  * [aspect-ratio: 16 / 9] The context box is fixed to aspect ratio of 16:9.
@@ -47,13 +46,13 @@ const styles = css`
     }
   }
 `;
+
 /**
  * A base element that displays a Media.
  * @internal
  * @param {MediaProps} MediaProps - The props necessary for the Media element.
  * @see Preview
  */
-
 const Media = ({
   name,
   overrideCss,
@@ -66,7 +65,6 @@ const Media = ({
   if (!type || !url) {
     return null;
   }
-
   return jsx("div", {
     css: [styles, overrideCss],
     "data-smart-element": name,
@@ -80,5 +78,4 @@ const Media = ({
     defaultIcon: null
   }));
 };
-
 export default Media;

package/dist/es2019/view/FlexibleCard/components/elements/text/index.js

@@ -3,21 +3,19 @@ import React from 'react';
 import { css, jsx } from '@emotion/react';
 import { getFormattedMessage, getTruncateStyles } from '../../utils';
 import { tokens } from '../../../../../utils/token';
-
 const getStyles = maxLines => css`
   color: ${tokens.text};
   font-size: 0.75rem;
   line-height: 1rem;
   ${getTruncateStyles(maxLines)}
 `;
+
 /**
  * A base element that displays some Text.
  * @internal
  * @param {TextProps} TextProps - The props necessary for the Text element.
  * @see Title
  */
-
-
 const Text = ({
   content,
   maxLines = 1,
@@ -29,7 +27,6 @@ const Text = ({
   if (!message && !content) {
     return null;
   }
-
   return jsx("span", {
     css: [getStyles(maxLines), overrideCss],
     "data-separator": true,
@@ -38,5 +35,4 @@ const Text = ({
     "data-testid": testId
   }, getFormattedMessage(message) || content);
 };
-
 export default Text;

package/dist/es2019/view/FlexibleCard/components/elements/utils.js

@@ -125,25 +125,20 @@ const elementMappings = {
     component: Link
   }
 };
-
 const getContextKey = name => {
   // Attempt to predict context prop name in advance to reduce the amount of
   // code run during runtime
   return name.length > 0 ? name.charAt(0).toLowerCase() + name.slice(1) : undefined;
 };
-
 const getData = (elementName, contextKey, context) => {
   if (!context) {
     return undefined;
   }
-
   const data = context[contextKey];
-
   switch (elementName) {
     case ElementName.AuthorGroup:
     case ElementName.CollaboratorGroup:
       return toAvatarGroupProps(data);
-
     case ElementName.AttachmentCount:
     case ElementName.ChecklistProgress:
     case ElementName.CommentCount:
@@ -154,47 +149,36 @@ const getData = (elementName, contextKey, context) => {
     case ElementName.SubscriberCount:
     case ElementName.LatestCommit:
       return toBadgeProps(data);
-
     case ElementName.CreatedBy:
       return toFormattedTextProps(messages.created_by, context.createdBy);
-
     case ElementName.CreatedOn:
       return toDateTimeProps('created', context.createdOn);
-
     case ElementName.DueOn:
       return toDateLozengeProps(context.dueOn);
-
     case ElementName.ModifiedBy:
       return toFormattedTextProps(messages.modified_by, context.modifiedBy);
-
     case ElementName.ModifiedOn:
       return toDateTimeProps('modified', context.modifiedOn);
-
     case ElementName.Snippet:
     case ElementName.SourceBranch:
     case ElementName.TargetBranch:
       return toTextProps(data);
-
     case ElementName.Title:
       return toLinkProps(context.title, context.url);
-
     default:
       return data;
   }
 };
-
 const toAvatarGroupProps = items => {
   return items ? {
     items
   } : undefined;
 };
-
 const toBadgeProps = label => {
   return label ? {
     label
   } : undefined;
 };
-
 const toDateLozengeProps = dateString => {
   if (dateString) {
     const text = Date.parse(dateString) ? /*#__PURE__*/React.createElement(FormattedDate, {
@@ -209,14 +193,12 @@ const toDateLozengeProps = dateString => {
     };
   }
 };
-
 const toDateTimeProps = (type, dateString) => {
   return dateString ? {
     date: new Date(dateString),
     type
   } : undefined;
 };
-
 const toFormattedTextProps = (descriptor, context) => {
   return context ? {
     message: {
@@ -227,31 +209,26 @@ const toFormattedTextProps = (descriptor, context) => {
     }
   } : undefined;
 };
-
 const toLinkProps = (text, url) => {
   return text ? {
     text,
     url
   } : undefined;
 };
-
 const toTextProps = content => {
   return content ? {
     content
   } : undefined;
 };
-
 export const createElement = name => {
   const {
     component: BaseElement,
     props
   } = elementMappings[name] || {};
   const contextKey = getContextKey(name);
-
   if (!BaseElement) {
     throw Error(`Element ${name} does not exist.`);
   }
-
   return overrides => {
     const context = useContext(FlexibleUiContext);
     const data = getData(name, contextKey, context);

package/dist/es2019/view/FlexibleCard/components/utils.js

@@ -20,7 +20,6 @@ export const getFormattedMessage = message => {
     }));
   }
 };
-
 const getIconDimensionStyles = value => css`
   height: ${value};
   min-height: ${value};
@@ -29,7 +28,6 @@ const getIconDimensionStyles = value => css`
   min-width: ${value};
   max-width: ${value};
 `;
-
 export const getIconSizeStyles = width => {
   const sizeStyles = getIconDimensionStyles(width);
   return css`
@@ -49,13 +47,10 @@ export const getIconWidth = size => {
   switch (size) {
     case SmartLinkSize.XLarge:
       return '2rem';
-
     case SmartLinkSize.Large:
       return '1.5rem';
-
     case SmartLinkSize.Medium:
       return '1rem';
-
     case SmartLinkSize.Small:
     default:
       return '.75rem';
@@ -65,7 +60,6 @@ export const getLinkLineHeight = size => {
   switch (size) {
     case SmartLinkSize.XLarge:
       return '1.5rem';
-
     case SmartLinkSize.Large:
     case SmartLinkSize.Medium:
     case SmartLinkSize.Small:
@@ -82,7 +76,6 @@ export const getLinkSizeStyles = size => {
         letter-spacing: -0.008em;
         line-height: ${getLinkLineHeight(size)};
       `;
-
     case SmartLinkSize.Large:
     case SmartLinkSize.Medium:
       return css`
@@ -91,7 +84,6 @@ export const getLinkSizeStyles = size => {
         letter-spacing: -0.003em;
         line-height: ${getLinkLineHeight(size)};
       `;
-
     case SmartLinkSize.Small:
     default:
       return css`
@@ -109,7 +101,6 @@ export const getMaxLineHeight = size => {
     case SmartLinkSize.XLarge:
     case SmartLinkSize.Large:
       return 1.75;
-
     case SmartLinkSize.Medium:
     case SmartLinkSize.Small:
     default:
@@ -120,11 +111,9 @@ export const getMaxLines = (value, defaultValue, max, min) => {
   if (value > max) {
     return defaultValue;
   }
-
   if (value < min) {
     return min;
   }
-
   return value;
 };
 export const getTruncateStyles = (maxLines, lineHeight = '1rem', wordBreak = 'break-word') => css`

package/dist/es2019/view/FlexibleCard/index.js

@@ -4,13 +4,13 @@ import { SmartLinkStatus } from '../../constants';
 import Container from './components/container';
 import { FlexibleUiAnalyticsContext, FlexibleUiContext } from '../../state/flexible-ui-context';
 import { getContextByStatus, getRetryOptions } from './utils';
+
 /**
  * This represents a Flexible Card: a link represented by a card with metadata.
  * This is the container in which all Flexible UI Blocks and Elements exist.
  * Note: TitleBlock is mandatory for a Flexible Card to render.
  * @see Container
  */
-
 const FlexibleCard = ({
   cardState,
   children,
@@ -44,9 +44,7 @@ const FlexibleCard = ({
             url
           });
         }
-
         break;
-
       case SmartLinkStatus.Errored:
       case SmartLinkStatus.Fallback:
       case SmartLinkStatus.Forbidden:
@@ -58,7 +56,6 @@ const FlexibleCard = ({
             url
           });
         }
-
         break;
     }
   }, [onError, onResolve, status, title, url]);
@@ -75,5 +72,4 @@ const FlexibleCard = ({
     status: status
   }), children)));
 };
-
 export default FlexibleCard;