@quintype/native-components 2.19.9 → 2.19.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/package.json +1 -1
  3. package/src/components/PrimaryStoryCard/index.js +14 -16
  4. package/src/components/PrimaryStoryCard/styles.js +1 -5
  5. package/src/components/PrimaryStoryCardNew/index.js +14 -15
  6. package/src/components/PrimaryStoryCardNew/styles.js +1 -5
  7. package/src/components/SecondaryStoryCard/index.js +14 -15
  8. package/src/components/SecondaryStoryCard/styles.js +1 -4
  9. package/src/components/SecondaryStoryCardNew/index.js +14 -15
  10. package/src/components/SecondaryStoryCardNew/styles.js +0 -4
  11. package/src/utils/timeUtils.js +2 -2
package/CHANGELOG.md CHANGED
@@ -2,6 +2,20 @@
2
2
 
3
3
  All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
4
4
 
5
+ ### [2.19.11](https://github.com/quintype/native-components/compare/v2.19.9...v2.19.11) (2022-01-24)
6
+
7
+
8
+ ### Bug Fixes
9
+
10
+ * **story-cards:** Adds missing translations, fixes text overflow issue by adding multiline ([#179](https://github.com/quintype/native-components/issues/179)) ([93ab137](https://github.com/quintype/native-components/commit/93ab1372fad312b653e5d6d6992d625d217c9455))
11
+
12
+ ### [2.19.10](https://github.com/quintype/native-components/compare/v2.19.9...v2.19.10) (2022-01-24)
13
+
14
+
15
+ ### Bug Fixes
16
+
17
+ * **story-cards:** Adds missing translations, fixes text overflow issue by adding multiline ([#179](https://github.com/quintype/native-components/issues/179)) ([93ab137](https://github.com/quintype/native-components/commit/93ab1372fad312b653e5d6d6992d625d217c9455))
18
+
5
19
  ### [2.19.9](https://github.com/quintype/native-components/compare/v2.19.8...v2.19.9) (2022-01-13)
6
20
 
7
21
  ### [2.19.8](https://github.com/quintype/native-components/compare/v2.19.7...v2.19.8) (2022-01-10)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@quintype/native-components",
3
- "version": "2.19.9",
3
+ "version": "2.19.11",
4
4
  "description": "",
5
5
  "main": "src/index.js",
6
6
  "scripts": {
package/src/components/PrimaryStoryCard/index.js CHANGED
@@ -10,7 +10,7 @@ import {
10
10
  AppTheme,
11
11
  getImageMetadata,
12
12
  getImageSlug,
13
- getTimeInFormat,
13
+ getTimeForStoryCards,
14
14
  } from '../../utils';
15
15
  import { getStoryHeadline } from '../../utils/story';
16
16
  import { ResponsiveImage, Text } from '../index';
@@ -96,21 +96,19 @@ export const PrimaryStoryCard = (props) => {
96
96
  </Text>
97
97
  <View style={styles.storyTypeContainer}>{showStoryType()}</View>
98
98
  </ResponsiveImage>
99
-
100
- <View style={styles.authorBlockContainer}>
101
- <Text
102
- style={autorStyle}
103
- testID={COMP_GENERAL_CONSTANTS.primaryStoryAuthor}
104
- >
105
- {authorName}
106
- </Text>
107
- <Text
108
- style={autorStyle}
109
- testID={COMP_GENERAL_CONSTANTS.primaryStoryPubishedAt}
110
- >
111
- {getTimeInFormat(story['published-at'], DATE_FORMAT, locale)}
112
- </Text>
113
- </View>
99
+ <Text
100
+ style={autorStyle}
101
+ numberOfLines={2}
102
+ // TODO: Add corrected testID here
103
+ >
104
+ {authorName +
105
+ getTimeForStoryCards(
106
+ story["published-at"],
107
+ DATE_FORMAT,
108
+ locale,
109
+ translate
110
+ )}
111
+ </Text>
114
112
  <Text
115
113
  primary
116
114
  numberOfLines={3}
package/src/components/PrimaryStoryCard/styles.js CHANGED
@@ -3,15 +3,11 @@ export const storyStyles = (COLORS = {}, FONT_SIZE = {}, DARK_MODE = {}) => ({
3
3
  backgroundColor: COLORS.BRAND_WHITE,
4
4
  marginTop: 12,
5
5
  },
6
- authorBlockContainer: {
7
- alignItems: 'center',
8
- flexDirection: 'row',
9
- paddingVertical: 8,
10
- },
11
6
  autorText: {
12
7
  color: COLORS?.BRAND_6,
13
8
  fontSize: FONT_SIZE.h5,
14
9
  lineHeight: FONT_SIZE.h5 * 1.3,
10
+ paddingVertical: 8,
15
11
  },
16
12
  divider: {
17
13
  backgroundColor: COLORS.BRAND_6,
package/src/components/PrimaryStoryCardNew/index.js CHANGED
@@ -37,7 +37,7 @@ const PrimaryStoryCardNewBase = (props) => {
37
37
 
38
38
  const DATE_FORMAT = "d MMM, yyyy";
39
39
  const readTime = story["read-time"]
40
- ? `${story["read-time"]} ${translate("min read")}`
40
+ ? `${story["read-time"]} ${translate("min read")} · `
41
41
  : "";
42
42
 
43
43
  const throttledOnpress = throttle(props.onPress, 1000);
@@ -95,20 +95,19 @@ const PrimaryStoryCardNewBase = (props) => {
95
95
  >
96
96
  {getStoryHeadline(story)}
97
97
  </Text>
98
- <View style={styles.timestampContainer}>
99
- {readTime ? (
100
- <Text
101
- style={timestampStyle}
102
- testID={COMP_GENERAL_CONSTANTS.primaryStoryReadTime}
103
- >{`${readTime} · `}</Text>
104
- ) : null}
105
- <Text
106
- style={timestampStyle}
107
- testID={COMP_GENERAL_CONSTANTS.primaryStoryPubishedAt}
108
- >
109
- {getTimeForStoryCards(story["published-at"], DATE_FORMAT, locale)}
110
- </Text>
111
- </View>
98
+ <Text
99
+ style={timestampStyle}
100
+ numberOfLines={2}
101
+ // TODO: Add corrected testID here
102
+ >
103
+ {readTime +
104
+ getTimeForStoryCards(
105
+ story["published-at"],
106
+ DATE_FORMAT,
107
+ locale,
108
+ translate
109
+ )}
110
+ </Text>
112
111
  </View>
113
112
  <View style={styles.icon}>{props.iconComponent}</View>
114
113
  </View>
package/src/components/PrimaryStoryCardNew/styles.js CHANGED
@@ -12,16 +12,12 @@ export const storyStyles = (COLORS = {}, FONT_SIZE = {}) => ({
12
12
  flexShrink: 1,
13
13
  flex: 1,
14
14
  },
15
- timestampContainer: {
16
- alignItems: 'center',
17
- flexDirection: 'row',
18
- marginTop: 4,
19
- },
20
15
  timestamp: {
21
16
  color: COLORS?.BRAND_BLACK,
22
17
  fontSize: FONT_SIZE.h5,
23
18
  lineHeight: FONT_SIZE.h5 * 1.2,
24
19
  opacity: 0.6,
20
+ marginTop: 4,
25
21
  },
26
22
  headline: {
27
23
  fontSize: FONT_SIZE.title,
package/src/components/SecondaryStoryCard/index.js CHANGED
@@ -15,7 +15,7 @@ import {
15
15
  AppTheme,
16
16
  getImageMetadata,
17
17
  getImageSlug,
18
- getTimeInFormat,
18
+ getTimeForStoryCards,
19
19
  } from '../../utils';
20
20
  import { getStoryHeadline } from '../../utils/story';
21
21
  import { ResponsiveImage, Text } from '../index';
@@ -116,20 +116,19 @@ export const SecondaryStoryCard = (props) => {
116
116
  {getStoryHeadline(story)?.trim()}
117
117
  </Text>
118
118
  <View style={styles.authorAndIconContainer}>
119
- <View style={authorTextContainerStyle}>
120
- <Text
121
- style={authorTextStyle}
122
- testID={COMP_GENERAL_CONSTANTS.secondaryStoryAuthor}
123
- >
124
- {authorName}
125
- </Text>
126
- <Text
127
- style={authorTextStyle}
128
- testID={COMP_GENERAL_CONSTANTS.secondaryStoryPubishedAt}
129
- >
130
- {getTimeInFormat(story['published-at'], DATE_FORMAT, locale)}
131
- </Text>
132
- </View>
119
+ <Text
120
+ style={authorTextStyle}
121
+ numberOfLines={2}
122
+ // TODO: Add corrected testID here
123
+ >
124
+ {authorName +
125
+ getTimeForStoryCards(
126
+ story["published-at"],
127
+ DATE_FORMAT,
128
+ locale,
129
+ translate
130
+ )}
131
+ </Text>
133
132
  <View style={iconStyles}>{props.iconComponent}</View>
134
133
  </View>
135
134
  </View>
package/src/components/SecondaryStoryCard/styles.js CHANGED
@@ -22,10 +22,7 @@ export const secStoryCardStyles = ({ COLORS, FONT_SIZE, DARK_MODE }) => StyleShe
22
22
  lineHeight: FONT_SIZE.h6 * 1.3,
23
23
  opacity: 0.5,
24
24
  fontWeight: '500',
25
- },
26
- authorTextContainer: {
27
- alignItems: 'center',
28
- flexDirection: 'row',
25
+ paddingTop: 8,
29
26
  },
30
27
  headline: {
31
28
  color: COLORS.BRAND_BLACK,
package/src/components/SecondaryStoryCardNew/index.js CHANGED
@@ -44,7 +44,7 @@ const SecondaryStoryCardNewBase = (props) => {
44
44
 
45
45
  const DATE_FORMAT = "d MMM, yyyy";
46
46
  const readTime = story["read-time"]
47
- ? `${story["read-time"]} ${translate("min read")}`
47
+ ? `${story["read-time"]} ${translate("min read")} · `
48
48
  : "";
49
49
 
50
50
  const throttledOnpress = throttle(props.onPress, 1000);
@@ -102,20 +102,19 @@ const SecondaryStoryCardNewBase = (props) => {
102
102
  >
103
103
  {getStoryHeadline(story)?.trim()}
104
104
  </Text>
105
- <View style={styles.timestampContainer}>
106
- {readTime ? (
107
- <Text
108
- style={timestampStyle}
109
- testID={COMP_GENERAL_CONSTANTS.secondaryStoryReadTime}
110
- >{`${readTime} · `}</Text>
111
- ) : null}
112
- <Text
113
- style={timestampStyle}
114
- testID={COMP_GENERAL_CONSTANTS.secondaryStoryPubishedAt}
115
- >
116
- {getTimeForStoryCards(story["published-at"], DATE_FORMAT, locale)}
117
- </Text>
118
- </View>
105
+ <Text
106
+ style={timestampStyle}
107
+ numberOfLines={2}
108
+ // TODO: Add corrected testID here
109
+ >
110
+ {readTime +
111
+ getTimeForStoryCards(
112
+ story["published-at"],
113
+ DATE_FORMAT,
114
+ locale,
115
+ translate
116
+ )}
117
+ </Text>
119
118
  </View>
120
119
  <View style={styles.icon}>{props.iconComponent}</View>
121
120
  </TouchableOpacity>
package/src/components/SecondaryStoryCardNew/styles.js CHANGED
@@ -18,10 +18,6 @@ export const storyStyles = ({ COLORS, FONT_SIZE }) => StyleSheet.create({
18
18
  fontSize: FONT_SIZE.h5,
19
19
  lineHeight: FONT_SIZE.h5 * 1.2,
20
20
  opacity: 0.6,
21
- },
22
- timestampContainer: {
23
- alignItems: 'center',
24
- flexDirection: 'row',
25
21
  marginTop: 4,
26
22
  },
27
23
  headline: {
package/src/utils/timeUtils.js CHANGED
@@ -15,14 +15,14 @@ export function getTimeInFormat(date, format, localTime) {
15
15
  return '';
16
16
  }
17
17
 
18
- export const getTimeForStoryCards = (date, format, localTime) => {
18
+ export const getTimeForStoryCards = (date, format, localTime, translate) => {
19
19
  if (date) {
20
20
  const currentDate = new Date();
21
21
  const dateToFormat = new Date(date);
22
22
  const locale = dateFNSlocale[localTime];
23
23
  const distanceInMinutes = differenceInMinutes(currentDate, dateToFormat);
24
24
  if (distanceInMinutes <= 1440) {
25
- return `published ${formatDistanceToNow(dateToFormat, { locale })} ago`;
25
+ return `${translate("published")} ${formatDistanceToNow(dateToFormat, { locale })} ${translate("ago")}`;
26
26
  }
27
27
  return dateFormat(dateToFormat, format, { locale });
28
28
  }