@atlaskit/smart-card 19.0.2 → 19.0.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/smart-card
 
+## 19.0.3
+
+### Patch Changes
+
+- [`cae40e59c49`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cae40e59c49) - Show relative date for dates less then 7 days away (flexible ui)
+
 ## 19.0.2
 
 ### Patch Changes

package/dist/cjs/messages.js

@@ -33,10 +33,15 @@ var messages = (0, _reactIntlNext.defineMessages)({
     defaultMessage: 'Created by {context}',
     description: 'Indicates the person or entity that created the resource.'
   },
-  created_on: {
-    id: 'fabric.linking.create_on',
+  created_on_relative: {
+    id: 'fabric.linking.create_on_relative',
     defaultMessage: 'Created {context}',
-    description: 'Indicated when entity was created'
+    description: 'Indicated when entity was created (relative form)'
+  },
+  created_on_absolute: {
+    id: 'fabric.linking.create_on_absolute',
+    defaultMessage: 'Created on {context}',
+    description: 'Indicated when entity was created (absolute form)'
   },
   delete: {
     id: 'fabric.linking.delete',
@@ -53,10 +58,15 @@ var messages = (0, _reactIntlNext.defineMessages)({
     defaultMessage: 'Modified by {context}',
     description: 'Indicates the person or entity that modified the resource.'
   },
-  modified_on: {
-    id: 'fabric.linking.modified_on',
+  modified_on_relative: {
+    id: 'fabric.linking.modified_on_relative',
     defaultMessage: 'Updated {context}',
-    description: 'Indicated when entity was modified'
+    description: 'Indicated when entity was modified (relative form)'
+  },
+  modified_on_absolute: {
+    id: 'fabric.linking.modified_on_absolute',
+    defaultMessage: 'Updated on {context}',
+    description: 'Indicated when entity was modified (absolute form)'
   },
   priority_blocker: {
     id: 'fabric.linking.priority_blocker',

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "19.0.2",
+	"version": "19.0.3",
 	"sideEffects": false
 }

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

@@ -29,8 +29,14 @@ var _templateObject;
 
 var styles = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-size: 0.75rem;\n  line-height: 1rem;\n  ", "\n"])), _token.tokens.text, (0, _utils.getTruncateStyles)(1));
 var typeToDescriptorMap = {
-  created: _messages.messages.created_on,
-  modified: _messages.messages.modified_on
+  created: {
+    relative: _messages.messages.created_on_relative,
+    absolute: _messages.messages.created_on_absolute
+  },
+  modified: {
+    relative: _messages.messages.modified_on_relative,
+    absolute: _messages.messages.modified_on_absolute
+  }
 };
 /**
  * A base element that displays an ISO Timestamp in text.
@@ -48,25 +54,41 @@ var DateTime = function DateTime(_ref) {
       testId = _ref$testId === void 0 ? 'smart-element-date-time' : _ref$testId;
 
   var _useIntl = (0, _reactIntlNext.useIntl)(),
-      formatRelativeTime = _useIntl.formatRelativeTime;
+      formatRelativeTime = _useIntl.formatRelativeTime,
+      formatDate = _useIntl.formatDate;
 
   if (!type || !date) {
     return null;
   }
 
-  var _selectUnit = (0, _intlUtils.selectUnit)(date, Date.now()),
-      value = _selectUnit.value,
-      unit = _selectUnit.unit;
+  var isLongerThenWeek = Math.abs(date.getTime() - Date.now()) > 1000 * 60 * 60 * 24 * 7;
+  var context;
+  var typeVariant;
+
+  if (isLongerThenWeek) {
+    typeVariant = 'absolute';
+    context = formatDate(date, {
+      month: 'long',
+      day: 'numeric',
+      year: 'numeric'
+    });
+  } else {
+    var _selectUnit = (0, _intlUtils.selectUnit)(date, Date.now()),
+        value = _selectUnit.value,
+        unit = _selectUnit.unit;
+
+    typeVariant = 'relative';
+    context = formatRelativeTime(value, unit, {
+      numeric: 'auto'
+    });
+  }
 
-  var context = formatRelativeTime(value, unit, {
-    numeric: 'auto'
-  });
   return (0, _core.jsx)("span", {
     css: [styles, overrideCss],
     "data-separator": true,
     "data-smart-element-date-time": true,
     "data-testid": testId
-  }, (0, _core.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, typeToDescriptorMap[type], {
+  }, (0, _core.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, typeToDescriptorMap[type][typeVariant], {
     values: {
       context: context
     }

package/dist/es2019/messages.js

@@ -25,10 +25,15 @@ export const messages = defineMessages({
     defaultMessage: 'Created by {context}',
     description: 'Indicates the person or entity that created the resource.'
   },
-  created_on: {
-    id: 'fabric.linking.create_on',
+  created_on_relative: {
+    id: 'fabric.linking.create_on_relative',
     defaultMessage: 'Created {context}',
-    description: 'Indicated when entity was created'
+    description: 'Indicated when entity was created (relative form)'
+  },
+  created_on_absolute: {
+    id: 'fabric.linking.create_on_absolute',
+    defaultMessage: 'Created on {context}',
+    description: 'Indicated when entity was created (absolute form)'
   },
   delete: {
     id: 'fabric.linking.delete',
@@ -45,10 +50,15 @@ export const messages = defineMessages({
     defaultMessage: 'Modified by {context}',
     description: 'Indicates the person or entity that modified the resource.'
   },
-  modified_on: {
-    id: 'fabric.linking.modified_on',
+  modified_on_relative: {
+    id: 'fabric.linking.modified_on_relative',
     defaultMessage: 'Updated {context}',
-    description: 'Indicated when entity was modified'
+    description: 'Indicated when entity was modified (relative form)'
+  },
+  modified_on_absolute: {
+    id: 'fabric.linking.modified_on_absolute',
+    defaultMessage: 'Updated on {context}',
+    description: 'Indicated when entity was modified (absolute form)'
   },
   priority_blocker: {
     id: 'fabric.linking.priority_blocker',

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "19.0.2",
+	"version": "19.0.3",
 	"sideEffects": false
 }

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

@@ -15,8 +15,14 @@ const styles = css`
   ${getTruncateStyles(1)}
 `;
 const typeToDescriptorMap = {
-  created: messages.created_on,
-  modified: messages.modified_on
+  created: {
+    relative: messages.created_on_relative,
+    absolute: messages.created_on_absolute
+  },
+  modified: {
+    relative: messages.modified_on_relative,
+    absolute: messages.modified_on_absolute
+  }
 };
 /**
  * A base element that displays an ISO Timestamp in text.
@@ -33,26 +39,42 @@ const DateTime = ({
   testId = 'smart-element-date-time'
 }) => {
   const {
-    formatRelativeTime
+    formatRelativeTime,
+    formatDate
   } = useIntl();
 
   if (!type || !date) {
     return null;
   }
 
-  const {
-    value,
-    unit
-  } = selectUnit(date, Date.now());
-  const context = formatRelativeTime(value, unit, {
-    numeric: 'auto'
-  });
+  const isLongerThenWeek = Math.abs(date.getTime() - Date.now()) > 1000 * 60 * 60 * 24 * 7;
+  let context;
+  let typeVariant;
+
+  if (isLongerThenWeek) {
+    typeVariant = 'absolute';
+    context = formatDate(date, {
+      month: 'long',
+      day: 'numeric',
+      year: 'numeric'
+    });
+  } else {
+    const {
+      value,
+      unit
+    } = selectUnit(date, Date.now());
+    typeVariant = 'relative';
+    context = formatRelativeTime(value, unit, {
+      numeric: 'auto'
+    });
+  }
+
   return jsx("span", {
     css: [styles, overrideCss],
     "data-separator": true,
     "data-smart-element-date-time": true,
     "data-testid": testId
-  }, jsx(FormattedMessage, _extends({}, typeToDescriptorMap[type], {
+  }, jsx(FormattedMessage, _extends({}, typeToDescriptorMap[type][typeVariant], {
     values: {
       context
     }

package/dist/esm/messages.js

@@ -25,10 +25,15 @@ export var messages = defineMessages({
     defaultMessage: 'Created by {context}',
     description: 'Indicates the person or entity that created the resource.'
   },
-  created_on: {
-    id: 'fabric.linking.create_on',
+  created_on_relative: {
+    id: 'fabric.linking.create_on_relative',
     defaultMessage: 'Created {context}',
-    description: 'Indicated when entity was created'
+    description: 'Indicated when entity was created (relative form)'
+  },
+  created_on_absolute: {
+    id: 'fabric.linking.create_on_absolute',
+    defaultMessage: 'Created on {context}',
+    description: 'Indicated when entity was created (absolute form)'
   },
   delete: {
     id: 'fabric.linking.delete',
@@ -45,10 +50,15 @@ export var messages = defineMessages({
     defaultMessage: 'Modified by {context}',
     description: 'Indicates the person or entity that modified the resource.'
   },
-  modified_on: {
-    id: 'fabric.linking.modified_on',
+  modified_on_relative: {
+    id: 'fabric.linking.modified_on_relative',
     defaultMessage: 'Updated {context}',
-    description: 'Indicated when entity was modified'
+    description: 'Indicated when entity was modified (relative form)'
+  },
+  modified_on_absolute: {
+    id: 'fabric.linking.modified_on_absolute',
+    defaultMessage: 'Updated on {context}',
+    description: 'Indicated when entity was modified (absolute form)'
   },
   priority_blocker: {
     id: 'fabric.linking.priority_blocker',

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "19.0.2",
+	"version": "19.0.3",
 	"sideEffects": false
 }

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

@@ -13,8 +13,14 @@ import { selectUnit } from '@formatjs/intl-utils';
 import { messages } from '../../../../../messages';
 var styles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 0.75rem;\n  line-height: 1rem;\n  ", "\n"])), tokens.text, getTruncateStyles(1));
 var typeToDescriptorMap = {
-  created: messages.created_on,
-  modified: messages.modified_on
+  created: {
+    relative: messages.created_on_relative,
+    absolute: messages.created_on_absolute
+  },
+  modified: {
+    relative: messages.modified_on_relative,
+    absolute: messages.modified_on_absolute
+  }
 };
 /**
  * A base element that displays an ISO Timestamp in text.
@@ -32,25 +38,41 @@ var DateTime = function DateTime(_ref) {
       testId = _ref$testId === void 0 ? 'smart-element-date-time' : _ref$testId;
 
   var _useIntl = useIntl(),
-      formatRelativeTime = _useIntl.formatRelativeTime;
+      formatRelativeTime = _useIntl.formatRelativeTime,
+      formatDate = _useIntl.formatDate;
 
   if (!type || !date) {
     return null;
   }
 
-  var _selectUnit = selectUnit(date, Date.now()),
-      value = _selectUnit.value,
-      unit = _selectUnit.unit;
+  var isLongerThenWeek = Math.abs(date.getTime() - Date.now()) > 1000 * 60 * 60 * 24 * 7;
+  var context;
+  var typeVariant;
+
+  if (isLongerThenWeek) {
+    typeVariant = 'absolute';
+    context = formatDate(date, {
+      month: 'long',
+      day: 'numeric',
+      year: 'numeric'
+    });
+  } else {
+    var _selectUnit = selectUnit(date, Date.now()),
+        value = _selectUnit.value,
+        unit = _selectUnit.unit;
+
+    typeVariant = 'relative';
+    context = formatRelativeTime(value, unit, {
+      numeric: 'auto'
+    });
+  }
 
-  var context = formatRelativeTime(value, unit, {
-    numeric: 'auto'
-  });
   return jsx("span", {
     css: [styles, overrideCss],
     "data-separator": true,
     "data-smart-element-date-time": true,
     "data-testid": testId
-  }, jsx(FormattedMessage, _extends({}, typeToDescriptorMap[type], {
+  }, jsx(FormattedMessage, _extends({}, typeToDescriptorMap[type][typeVariant], {
     values: {
       context: context
     }

package/dist/types/messages.d.ts

@@ -1,5 +1,5 @@
 import { MessageDescriptor } from 'react-intl-next';
-export declare type MessageKey = 'cannot_find_link' | 'click_to_join' | 'connect_link_account' | 'created_by' | 'created_on' | 'delete' | 'edit' | 'modified_by' | 'modified_on' | 'priority_blocker' | 'priority_critical' | 'priority_high' | 'priority_highest' | 'priority_low' | 'priority_lowest' | 'priority_major' | 'priority_medium' | 'priority_minor' | 'priority_trivial' | 'priority_undefined' | 'forbidden_access' | 'pending_request' | 'restricted_link' | 'request_access' | 'request_denied';
+export declare type MessageKey = 'cannot_find_link' | 'click_to_join' | 'connect_link_account' | 'created_by' | 'created_on_relative' | 'created_on_absolute' | 'delete' | 'edit' | 'modified_by' | 'modified_on_relative' | 'modified_on_absolute' | 'priority_blocker' | 'priority_critical' | 'priority_high' | 'priority_highest' | 'priority_low' | 'priority_lowest' | 'priority_major' | 'priority_medium' | 'priority_minor' | 'priority_trivial' | 'priority_undefined' | 'forbidden_access' | 'pending_request' | 'restricted_link' | 'request_access' | 'request_denied';
 declare type Messages = {
     [K in MessageKey]: MessageDescriptor;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "19.0.2",
+  "version": "19.0.3",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"