@quintype/native-components 2.20.0-fix-rtl-issues.0 → 2.20.1-temp-fast-image-constraint.0

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 (34) hide show
  1. package/CHANGELOG.md +46 -0
  2. package/package.json +2 -2
  3. package/src/Icons/ClockIcon/index.js +9 -5
  4. package/src/components/ActionText/ActionText.js +7 -9
  5. package/src/components/ActionText/ActionText.test.js +5 -12
  6. package/src/components/AlsoRead/index.js +1 -1
  7. package/src/components/AlsoRead/styles.js +2 -0
  8. package/src/components/AuthorRow/AuthorRow.test.js +4 -9
  9. package/src/components/AuthorRow/index.js +23 -21
  10. package/src/components/BackNavigator/styles.js +2 -0
  11. package/src/components/Button/index.js +13 -9
  12. package/src/components/CustomSwitch/index.js +16 -10
  13. package/src/components/Header/index.js +13 -9
  14. package/src/components/PrimaryStoryCard/index.js +46 -21
  15. package/src/components/PrimaryStoryCard/styles.js +29 -5
  16. package/src/components/PrimaryStoryCardNew/index.js +64 -26
  17. package/src/components/PrimaryStoryCardNew/styles.js +29 -5
  18. package/src/components/RadioButton/index.js +24 -9
  19. package/src/components/SecondaryStoryCard/index.js +48 -19
  20. package/src/components/SecondaryStoryCard/styles.js +29 -4
  21. package/src/components/SecondaryStoryCardNew/index.js +68 -26
  22. package/src/components/SecondaryStoryCardNew/styles.js +28 -4
  23. package/src/components/ShareButton/index.js +18 -14
  24. package/src/components/StoryHeader/index.js +9 -11
  25. package/src/components/StoryHeader/styles.js +1 -1
  26. package/src/components/StoryImage/index.js +1 -1
  27. package/src/components/StoryText/index.js +3 -1
  28. package/src/components/Table/index.js +1 -1
  29. package/src/components/Table/styles.js +5 -2
  30. package/src/components/TextQandA/styles.js +3 -3
  31. package/src/constants/component-constants/content-constants/constants.js +7 -5
  32. package/src/constants/component-constants/general-constants/constants.js +22 -14
  33. package/src/constants/renderHTML.js +10 -0
  34. package/src/utils/timeUtils.js +2 -2
package/src/components/StoryHeader/index.js CHANGED
@@ -2,7 +2,7 @@ import get from 'lodash/get';
2
2
  import PropTypes from 'prop-types';
3
3
  import React, { useContext } from 'react';
4
4
  import {
5
- TouchableOpacity, View, Linking, I18nManager,
5
+ TouchableOpacity, View, Linking,
6
6
  } from 'react-native';
7
7
  import HTML from 'react-native-render-html';
8
8
  import {
@@ -19,11 +19,9 @@ import { YouTubePlayer } from '../YouTubePlayer';
19
19
  import { storyHeaderStyles } from './styles';
20
20
  import { COMP_CONTENT_CONSTANTS } from '../../constants/component-constants/content-constants/constants';
21
21
 
22
- /* import {DailyMotionPlayer} from "../DailyMotionPlayer"; */
22
+ import { DailyMotionPlayer } from '../DailyMotionPlayer';
23
23
 
24
- const DATE_FORMAT = I18nManager.isRTL
25
- ? "d MMMM yyyy h:mm a"
26
- : "d MMMM yyyy, h:mm a";
24
+ const DATE_FORMAT = 'd MMMM yyyy h:mm a';
27
25
 
28
26
  const getHeroImage = (cdn, story) => {
29
27
  const imageSlug = story['hero-image-s3-key'];
@@ -46,9 +44,9 @@ const getHeroComponent = (props) => {
46
44
  case STORY_TYPES.VIDEO_STORY: {
47
45
  if (!firstVideoElement) return null;
48
46
  switch (firstVideoElement.type) {
49
- /* case "jsembed":{
50
- return <DailyMotionPlayer element={firstVideoElement} />;
51
- } */
47
+ case 'jsembed': {
48
+ return <DailyMotionPlayer element={firstVideoElement} />;
49
+ }
52
50
  case 'youtube-video': {
53
51
  return (
54
52
  <YouTubePlayer
@@ -71,7 +69,7 @@ export const StoryHeader = (props) => {
71
69
  const { story } = props;
72
70
  const sectionData = get(story, ['sections', 0], {});
73
71
  const { theme } = useContext(AppTheme);
74
- const { COLORS, CAN_COPY_TEXT } = theme;
72
+ const { COLORS, CAN_COPY_TEXT, locale } = theme;
75
73
  const styles = storyHeaderStyles(COLORS);
76
74
  const imgCaption = story['hero-image-caption'];
77
75
  const attri = story['hero-image-attribution'];
@@ -93,7 +91,7 @@ export const StoryHeader = (props) => {
93
91
  }}
94
92
  />
95
93
  <HTML
96
- html={imgAttribution}
94
+ html={attri}
97
95
  textSelectable={CAN_COPY_TEXT}
98
96
  key={Math.random()}
99
97
  baseFontStyle={styles.attributionStyle}
@@ -136,7 +134,7 @@ export const StoryHeader = (props) => {
136
134
  style={styles.dateText}
137
135
  testID={COMP_CONTENT_CONSTANTS.publishedDate}
138
136
  >
139
- {getTimeInFormat(story['published-at'], DATE_FORMAT)}
137
+ {getTimeInFormat(story['published-at'], DATE_FORMAT, locale)}
140
138
  </Text>
141
139
  </View>
142
140
  <StoryTitle title={story.headline} subTitle={story.subheadline} />
package/src/components/StoryHeader/styles.js CHANGED
@@ -37,7 +37,7 @@ export const storyHeaderStyles = (COLORS) => StyleSheet.create({
37
37
  },
38
38
  captionContainerStyle: {
39
39
  paddingHorizontal: 5,
40
- flexDirection: 'row',
40
+ flexDirection: 'column',
41
41
  flexWrap: 'wrap',
42
42
  marginTop: 10,
43
43
  },
package/src/components/StoryImage/index.js CHANGED
@@ -28,7 +28,7 @@ export const StoryImage = ({
28
28
  if (!card['image-attribution']) return null;
29
29
  return (
30
30
  <Text style={styles.attributionText}>
31
- {` | ${card['image-attribution']}`}
31
+ {` | ${stripHTML(card['image-attribution'])}`}
32
32
  </Text>
33
33
  );
34
34
  };
package/src/components/StoryText/index.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import PropTypes from 'prop-types';
2
2
  import React, { useContext } from 'react';
3
3
  import {
4
- View, StyleSheet, Linking, Text,
4
+ View, StyleSheet, Linking, Text, I18nManager,
5
5
  } from 'react-native';
6
6
  import HTML from 'react-native-render-html';
7
7
  import { AppTheme } from '../../utils/context';
@@ -21,8 +21,10 @@ export const StoryText = (props) => {
21
21
  {
22
22
  fontFamily: FONT_FAMILY.secondary,
23
23
  fontWeight: props.question ? '600' : 'normal',
24
+ writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr',
24
25
  },
25
26
  ]);
27
+
26
28
  const customTagsStyles = customHTMLStyles();
27
29
 
28
30
  return (
package/src/components/Table/index.js CHANGED
@@ -27,7 +27,7 @@ export const Table = ({ card }) => {
27
27
  <View style={styles.tableRow}>
28
28
  {headerFields.map((headerField) => (
29
29
  <View style={styles.tableHeaderTitle}>
30
- <Text>{data[headerField]}</Text>
30
+ <Text style={styles.tableContect}>{data[headerField]}</Text>
31
31
  </View>
32
32
  ))}
33
33
  </View>
package/src/components/Table/styles.js CHANGED
@@ -1,5 +1,4 @@
1
1
  import { StyleSheet } from 'react-native';
2
-
3
2
  export const tableStyles = ({ COLORS }) => StyleSheet.create({
4
3
  container: {
5
4
  flexDirection: 'row',
@@ -15,6 +14,7 @@ export const tableStyles = ({ COLORS }) => StyleSheet.create({
15
14
  justifyContent: 'center',
16
15
  borderWidth: 0.5,
17
16
  borderColor: COLORS.BRAND_4,
17
+ color: COLORS.BRAND_4,
18
18
  },
19
19
  tableBody: {
20
20
  flexDirection: 'column',
@@ -22,4 +22,7 @@ export const tableStyles = ({ COLORS }) => StyleSheet.create({
22
22
  tableRow: {
23
23
  flexDirection: 'row',
24
24
  },
25
- });
25
+ tableContect: {
26
+ color: COLORS.BRAND_BLACK,
27
+ },
28
+ });
package/src/components/TextQandA/styles.js CHANGED
@@ -8,13 +8,13 @@ export const textQandAStyles = (COLORS, FONT_SIZE) => StyleSheet.create({
8
8
  fontSize: FONT_SIZE.h2,
9
9
  fontWeight: '600',
10
10
  lineHeight: FONT_SIZE.h2 * 1.3,
11
- color: COLORS.BRAND_8,
12
- opacity: 0.8
11
+ color: COLORS.BRAND_BLACK,
12
+ opacity: 0.8,
13
13
  },
14
14
  answerText: {
15
15
  fontSize: FONT_SIZE.h2,
16
16
  lineHeight: FONT_SIZE.h2 * 1.3,
17
17
  color: COLORS.BRAND_BLACK,
18
- opacity: 0.8
18
+ opacity: 0.8,
19
19
  },
20
20
  });
package/src/constants/component-constants/content-constants/constants.js CHANGED
@@ -1,7 +1,9 @@
1
1
  export const COMP_CONTENT_CONSTANTS = {
2
- storyTitle: 'COMP_STORY_TITLE',
3
- storySubTitle: 'COMP_STORY_SUBTITLE',
4
- sectionName: 'COMP_STORY_SECTION_NAME',
5
- publishedDate: 'COMP_STORY_PUBLISHED_DATE',
6
- relatedStoriesLabel: 'COMP_STORY_RELATEDSTORIES_LABEL',
2
+ storyTitle: "COMP_STORY_TITLE",
3
+ storySubTitle: "COMP_STORY_SUBTITLE",
4
+ sectionName: "COMP_STORY_SECTION_NAME",
5
+ publishedDate: "COMP_STORY_PUBLISHED_DATE",
6
+ relatedStoriesLabel: "COMP_STORY_RELATEDSTORIES_LABEL",
7
+ authorName: "COMP_STORY_AUTHOR_NAME",
8
+ authorImage: "COMP_STORY_AUTHOR_IMAGE",
7
9
  };
package/src/constants/component-constants/general-constants/constants.js CHANGED
@@ -1,16 +1,24 @@
1
1
  export const COMP_GENERAL_CONSTANTS = {
2
- secondaryStoryCard: 'COMP_GENERAL_SECONDARY_STORY',
3
- primaryStoryCard: 'COMP_GENERAL_PRIMARY_STORY',
4
- secondaryStoryAuthor: 'COMP_GENERAL_SECONDARY_STORY_AUTHOR',
5
- secondaryStoryPubishedAt: 'COMP_GENERAL_SECONDARY_STORY_PUBLISHEDATE',
6
- primaryStoryAuthor: 'COMP_GENERAL_PRIMARY_STORY_AUTHOR',
7
- primaryStoryPubishedAt: 'COMP_GENERAL_PRIMARY_STORY_PUBLISHEDATE',
8
- secondaryStoryHeadline: 'COMP_GENERAL_SECONDARY_STORY_HEADLINE',
9
- primaryStoryHeadline: 'COMP_GENERAL_PRIMARY_STORY_HEADLINE',
10
- iconTextTouch: 'COMP_GENERAL_ICON_TEXT_TOUCH',
11
- iconTextLabel: 'COMP_GENERAL_ICON_TEXT_LABEL',
12
- collectionTitleTouch: 'COMP_GENERAL_COLLECTION_TITLE',
13
- collectionTitleText: 'COMP_GENERAL_COLLECTION_TITLE_TEXT',
14
- backNavigatorText: 'COMP_GENERAL_BACK_NAVIGATOR_TEXT',
15
- backNavigatorTouch: 'COMP_GENERAL_BACK_NAVIGATOR_TOUCH',
2
+ secondaryStoryCard: "COMP_GENERAL_SECONDARY_STORY",
3
+ primaryStoryCard: "COMP_GENERAL_PRIMARY_STORY",
4
+ secondaryStoryAuthor: "COMP_GENERAL_SECONDARY_STORY_AUTHOR",
5
+ secondaryStoryPubishedAt: "COMP_GENERAL_SECONDARY_STORY_PUBLISHEDATE",
6
+ primaryStoryAuthor: "COMP_GENERAL_PRIMARY_STORY_AUTHOR",
7
+ primaryStoryPubishedAt: "COMP_GENERAL_PRIMARY_STORY_PUBLISHEDATE",
8
+ secondaryStoryHeadline: "COMP_GENERAL_SECONDARY_STORY_HEADLINE",
9
+ primaryStoryHeadline: "COMP_GENERAL_PRIMARY_STORY_HEADLINE",
10
+ iconTextTouch: "COMP_GENERAL_ICON_TEXT_TOUCH",
11
+ iconTextLabel: "COMP_GENERAL_ICON_TEXT_LABEL",
12
+ collectionTitleTouch: "COMP_GENERAL_COLLECTION_TITLE",
13
+ collectionTitleText: "COMP_GENERAL_COLLECTION_TITLE_TEXT",
14
+ backNavigatorText: "COMP_GENERAL_BACK_NAVIGATOR_TEXT",
15
+ backNavigatorTouch: "COMP_GENERAL_BACK_NAVIGATOR_TOUCH",
16
+ customSwitch: "COMP_GENERAL_CUSTOM_SWITCH",
17
+ primaryStoryReadTime: "COMP_GENERAL_PRIMARY_STORY_READTIME",
18
+ secondaryStoryReadTime: "COMP_GENERAL_SECONDARY_STORY_READTIME",
19
+ actionTextTouch: "COMP_GENERAL_ACTION_TEXT_TOUCH",
20
+ buttonTouch: "COMP_GENERAL_BUTTON_TOUCH",
21
+ headerLogoTouch: "COMP_GENERAL_HEADER_LOGO_TOUCH",
22
+ radioButtonTouch: "COMP_GENERAL_RADIO",
23
+ shareButtonTouch: "COMP_GENERAL_SHARE",
16
24
  };
package/src/constants/renderHTML.js CHANGED
@@ -59,5 +59,15 @@ export const customHTMLStyles = () => {
59
59
  color: COLORS.BRAND_BLACK,
60
60
  opacity: 0.85,
61
61
  },
62
+ sup: {
63
+ marginBottom: 16,
64
+ lineHeight: FONT_SIZE.p1 * 0.3,
65
+ fontSize: FONT_SIZE.p1 * 0.5,
66
+ },
67
+ sub: {
68
+ marginBottom: 16,
69
+ lineHeight: FONT_SIZE.p1 * 0.3,
70
+ fontSize: FONT_SIZE.p1 * 0.5,
71
+ },
62
72
  };
63
73
  };
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
  }