@selfcommunity/react-ui 0.7.0-alpha.334 → 0.7.0-alpha.335

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.
@@ -37,7 +37,16 @@ const Root = (0, styles_1.styled)(Widget_1.default, {
37
37
  objectFit: 'fill'
38
38
  },
39
39
  [`& .${classes.title}`]: {
40
- padding: '4px 16px'
40
+ padding: `${theme.spacing(2)}`,
41
+ paddingBottom: `${theme.spacing()}`,
42
+ paddingTop: 0
43
+ },
44
+ [`& .${classes.media}`]: {
45
+ paddingBottom: `${theme.spacing(2)}`
46
+ },
47
+ [`& .${classes.content}`]: {
48
+ padding: theme.spacing(2),
49
+ paddingTop: 0
41
50
  },
42
51
  [`& .${classes.listItemSnippet}`]: {
43
52
  padding: '0px 5px',
@@ -116,10 +125,10 @@ function Message(props) {
116
125
  react_1.default.createElement(material_1.CardContent, { className: classes.title },
117
126
  react_1.default.createElement(material_1.Typography, { variant: "h6" }, banner.title)),
118
127
  banner.image && react_1.default.createElement(material_1.CardMedia, { className: classes.media, component: "img", image: banner.image, alt: banner.title }),
119
- react_1.default.createElement(material_1.CardContent, { className: classes.content },
120
- react_1.default.createElement(material_1.Typography, { variant: "body2", color: "text.secondary" }, banner.body_text),
121
- react_1.default.createElement(material_1.Typography, { variant: "body2", color: "text.secondary" },
122
- react_1.default.createElement("a", { href: banner.link, target: banner.open_in_new_tab ? '_blank' : '_self' }, banner.link_text)))));
128
+ (banner.body_text || banner.link_text) && (react_1.default.createElement(material_1.CardContent, { className: classes.content },
129
+ banner.body_text && (react_1.default.createElement(material_1.Typography, { variant: "body1", color: "text.secondary" }, banner.body_text)),
130
+ banner.link_text && (react_1.default.createElement(material_1.Typography, { variant: "body1", color: "text.secondary" },
131
+ react_1.default.createElement("a", { href: banner.link, target: banner.open_in_new_tab ? '_blank' : '_self' }, banner.link_text)))))));
123
132
  };
124
133
  // Banner
125
134
  const { banner } = message;
@@ -32,28 +32,7 @@ const Root = (0, styles_1.styled)(material_1.Box, {
32
32
  name: PREFIX,
33
33
  slot: 'Root',
34
34
  overridesResolver: (props, styles) => styles.root
35
- })(({ theme }) => ({
36
- boxShadow: 'none',
37
- position: 'relative',
38
- display: 'flex',
39
- flexWrap: 'wrap',
40
- width: '100%',
41
- [`& .${classes.loadNextCommentsButton}`]: {
42
- textTransform: 'initial'
43
- },
44
- [`& .${classes.loadPreviousCommentsButton}`]: {
45
- textTransform: 'initial'
46
- },
47
- [`& .${classes.commentsCounter}`]: {
48
- paddingRight: theme.spacing()
49
- },
50
- [`& .${classes.pagination}`]: {
51
- width: '100%'
52
- },
53
- [`& .${classes.paginationLink}`]: {
54
- display: 'none'
55
- }
56
- }));
35
+ })(({ theme }) => ({}));
57
36
  const PREFERENCES = [react_core_1.SCPreferences.ADVERTISING_CUSTOM_ADV_ENABLED, react_core_1.SCPreferences.ADVERTISING_CUSTOM_ADV_ONLY_FOR_ANONYMOUS_USERS_ENABLED];
58
37
  /**
59
38
  * > API documentation for the Community-JS Comments Object component. Learn about the available props and the CSS API.
@@ -55,6 +55,7 @@ const classes = {
55
55
  tag: `${PREFIX}-tag`,
56
56
  location: `${PREFIX}-location`,
57
57
  content: `${PREFIX}-content`,
58
+ showMore: `${PREFIX}-show-more`,
58
59
  error: `${PREFIX}-error`,
59
60
  titleSection: `${PREFIX}-title-section`,
60
61
  title: `${PREFIX}-title`,
@@ -394,7 +395,7 @@ function FeedObject(inProps) {
394
395
  react_1.default.createElement(material_1.Typography, { component: "div", className: classes.text, variant: "body2", gutterBottom: true, dangerouslySetInnerHTML: {
395
396
  __html: summaryHtml
396
397
  } })),
397
- !expanded && summaryHtmlTruncated && (react_1.default.createElement(material_1.Button, { size: "small", variant: "text", color: "inherit", onClick: handleToggleSummary },
398
+ !expanded && summaryHtmlTruncated && (react_1.default.createElement(material_1.Button, { size: "small", variant: "text", color: "inherit", className: classes.showMore, onClick: handleToggleSummary },
398
399
  react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.feedObject.content.showMore", defaultMessage: "ui.feedObject.content.showMore" })))));
399
400
  }
400
401
  else if (template === feedObject_1.SCFeedObjectTemplateType.DETAIL) {
@@ -407,7 +408,7 @@ function FeedObject(inProps) {
407
408
  react_1.default.createElement(material_1.Typography, { component: "span", dangerouslySetInnerHTML: {
408
409
  __html: summaryHtml
409
410
  } }),
410
- !expanded && summaryHtmlTruncated && (react_1.default.createElement(material_1.Button, { size: "small", variant: "text", color: "inherit", onClick: handleToggleSummary },
411
+ !expanded && summaryHtmlTruncated && (react_1.default.createElement(material_1.Button, { size: "small", variant: "text", color: "inherit", className: classes.showMore, onClick: handleToggleSummary },
411
412
  react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.feedObject.content.showMore", defaultMessage: "ui.feedObject.content.showMore" })))));
412
413
  }
413
414
  }, [obj, template, expanded]);
@@ -35,7 +35,16 @@ const Root = styled(Widget, {
35
35
  objectFit: 'fill'
36
36
  },
37
37
  [`& .${classes.title}`]: {
38
- padding: '4px 16px'
38
+ padding: `${theme.spacing(2)}`,
39
+ paddingBottom: `${theme.spacing()}`,
40
+ paddingTop: 0
41
+ },
42
+ [`& .${classes.media}`]: {
43
+ paddingBottom: `${theme.spacing(2)}`
44
+ },
45
+ [`& .${classes.content}`]: {
46
+ padding: theme.spacing(2),
47
+ paddingTop: 0
39
48
  },
40
49
  [`& .${classes.listItemSnippet}`]: {
41
50
  padding: '0px 5px',
@@ -114,10 +123,10 @@ export default function Message(props) {
114
123
  React.createElement(CardContent, { className: classes.title },
115
124
  React.createElement(Typography, { variant: "h6" }, banner.title)),
116
125
  banner.image && React.createElement(CardMedia, { className: classes.media, component: "img", image: banner.image, alt: banner.title }),
117
- React.createElement(CardContent, { className: classes.content },
118
- React.createElement(Typography, { variant: "body2", color: "text.secondary" }, banner.body_text),
119
- React.createElement(Typography, { variant: "body2", color: "text.secondary" },
120
- React.createElement("a", { href: banner.link, target: banner.open_in_new_tab ? '_blank' : '_self' }, banner.link_text)))));
126
+ (banner.body_text || banner.link_text) && (React.createElement(CardContent, { className: classes.content },
127
+ banner.body_text && (React.createElement(Typography, { variant: "body1", color: "text.secondary" }, banner.body_text)),
128
+ banner.link_text && (React.createElement(Typography, { variant: "body1", color: "text.secondary" },
129
+ React.createElement("a", { href: banner.link, target: banner.open_in_new_tab ? '_blank' : '_self' }, banner.link_text)))))));
121
130
  };
122
131
  // Banner
123
132
  const { banner } = message;
@@ -30,28 +30,7 @@ const Root = styled(Box, {
30
30
  name: PREFIX,
31
31
  slot: 'Root',
32
32
  overridesResolver: (props, styles) => styles.root
33
- })(({ theme }) => ({
34
- boxShadow: 'none',
35
- position: 'relative',
36
- display: 'flex',
37
- flexWrap: 'wrap',
38
- width: '100%',
39
- [`& .${classes.loadNextCommentsButton}`]: {
40
- textTransform: 'initial'
41
- },
42
- [`& .${classes.loadPreviousCommentsButton}`]: {
43
- textTransform: 'initial'
44
- },
45
- [`& .${classes.commentsCounter}`]: {
46
- paddingRight: theme.spacing()
47
- },
48
- [`& .${classes.pagination}`]: {
49
- width: '100%'
50
- },
51
- [`& .${classes.paginationLink}`]: {
52
- display: 'none'
53
- }
54
- }));
33
+ })(({ theme }) => ({}));
55
34
  const PREFERENCES = [SCPreferences.ADVERTISING_CUSTOM_ADV_ENABLED, SCPreferences.ADVERTISING_CUSTOM_ADV_ONLY_FOR_ANONYMOUS_USERS_ENABLED];
56
35
  /**
57
36
  * > API documentation for the Community-JS Comments Object component. Learn about the available props and the CSS API.
@@ -53,6 +53,7 @@ const classes = {
53
53
  tag: `${PREFIX}-tag`,
54
54
  location: `${PREFIX}-location`,
55
55
  content: `${PREFIX}-content`,
56
+ showMore: `${PREFIX}-show-more`,
56
57
  error: `${PREFIX}-error`,
57
58
  titleSection: `${PREFIX}-title-section`,
58
59
  title: `${PREFIX}-title`,
@@ -392,7 +393,7 @@ export default function FeedObject(inProps) {
392
393
  React.createElement(Typography, { component: "div", className: classes.text, variant: "body2", gutterBottom: true, dangerouslySetInnerHTML: {
393
394
  __html: summaryHtml
394
395
  } })),
395
- !expanded && summaryHtmlTruncated && (React.createElement(Button, { size: "small", variant: "text", color: "inherit", onClick: handleToggleSummary },
396
+ !expanded && summaryHtmlTruncated && (React.createElement(Button, { size: "small", variant: "text", color: "inherit", className: classes.showMore, onClick: handleToggleSummary },
396
397
  React.createElement(FormattedMessage, { id: "ui.feedObject.content.showMore", defaultMessage: "ui.feedObject.content.showMore" })))));
397
398
  }
398
399
  else if (template === SCFeedObjectTemplateType.DETAIL) {
@@ -405,7 +406,7 @@ export default function FeedObject(inProps) {
405
406
  React.createElement(Typography, { component: "span", dangerouslySetInnerHTML: {
406
407
  __html: summaryHtml
407
408
  } }),
408
- !expanded && summaryHtmlTruncated && (React.createElement(Button, { size: "small", variant: "text", color: "inherit", onClick: handleToggleSummary },
409
+ !expanded && summaryHtmlTruncated && (React.createElement(Button, { size: "small", variant: "text", color: "inherit", className: classes.showMore, onClick: handleToggleSummary },
409
410
  React.createElement(FormattedMessage, { id: "ui.feedObject.content.showMore", defaultMessage: "ui.feedObject.content.showMore" })))));
410
411
  }
411
412
  }, [obj, template, expanded]);