@selfcommunity/react-theme-default 0.1.0-alpha.302 → 0.1.0-alpha.304

package/lib/esm/components/SCFeedObject.js

@@ -37,8 +37,8 @@ const Component = {
                 overflowY: 'hidden',
                 overflowX: 'auto',
                 justifyContent: 'center',
-                'MsOverflowStyle': 'none',
-                scrollbarWidth: 'none',
+                MsOverflowStyle: 'none' /* IE and Edge */,
+                scrollbarWidth: 'none' /* Firefox */,
                 '&::-webkit-scrollbar': {
                     display: 'none'
                 },
@@ -265,11 +265,6 @@ const Component = {
                             margin: '0 32px'
                         }
                     },
-                    '& .SCFeedObject-medias-section': {
-                        '& .SCFeedObjectMediaPreview-root': {
-                            margin: theme.spacing(0, 1)
-                        }
-                    },
                     '& .SCFeedObject-show-more': {
                         padding: theme.spacing(0.5),
                         marginTop: theme.spacing(-0.5)
@@ -279,12 +274,12 @@ const Component = {
                     '&:last-of-type': {
                         marginBottom: 0
                     },
-                    '& .SCFeedObjectActions-root': {
+                    '& .SCFeedObject-actions-root': {
                         margin: 0,
                         padding: theme.spacing(0.2, 2, 0, 2),
-                        '& .SCFeedObjectActions-action': {
+                        '& .SCFeedObject-actions-action': {
                             marginTop: 0,
-                            '& .SCVoteAction-view-audience-button, & .SCCommentAction-view-audience-button, & .SCShareAction-view-audience-button, & .SCReactionAction-view-audience-button': {
+                            '& .SCFeedObject-action-vote-view-audience-button, & .SCFeedObject-action-comment-view-audience-button, & .SCFeedObject-action-share-view-audience-button, & .SCReactionAction-view-audience-button': {
                                 fontSize: '0.857rem',
                                 fontWeight: theme.typography.fontWeightRegular,
                                 marginTop: theme.spacing(0),
@@ -297,7 +292,7 @@ const Component = {
                             '& .MuiDivider-root': {
                                 borderColor: theme.palette.grey[300]
                             },
-                            '& .SCVoteAction-button, & .SCCommentAction-button, & .SCShareAction-button, & .SCReactionAction-button': {
+                            '& .SCFeedObject-action-vote-button, & .SCFeedObject-action-comment-button, & .SCFeedObject-action-share-button, & .SCReactionAction-button': {
                                 color: theme.palette.primary.main,
                                 marginTop: theme.spacing(-0.5),
                                 marginBottom: theme.spacing(0.5),
@@ -346,7 +341,7 @@ const Component = {
                     '& .SCFeedObject-activities-content': {
                         paddingTop: 0,
                         paddingBottom: 0,
-                        '& .SCActivitiesMenu-selector': {
+                        '& .SCFeedObject-activities-menu-selector': {
                             '& .MuiButton-root': {
                                 marginTop: theme.spacing(0.2),
                                 fontSize: '0.857rem',
@@ -361,7 +356,7 @@ const Component = {
                             paddingBottom: 0
                         }
                     },
-                    '& .SCCommentObjectSkeleton-root': {
+                    '& .SCCommentObject-skeleton-root': {
                         background: 'transparent',
                         marginTop: 5,
                         marginBottom: '7px !important',
@@ -417,7 +412,284 @@ const Component = {
                 boxShadow: 'none',
                 border: '1px solid rgba(0, 0, 0, 0.12)'
             }
-        })
+        }),
+        skeletonRoot: ({ theme }) => ({
+            '&.SCFeedObject-preview, &.SCFeedObject-detail, &.SCFeedObject-search': {
+                border: `0 none`,
+                boxShadow: '0px 0px 10px rgba(0, 0, 0, 0.1)',
+                borderRadius: 0,
+                [theme.breakpoints.up('sm')]: {
+                    borderRadius: theme.shape.borderRadius
+                }
+            },
+            '& .SCFeedObject-media': {
+                height: 250,
+                marginBottom: 20
+            },
+            '& .SCFeedObject-snippet > *': {
+                paddingLeft: 0,
+                paddingRight: 0
+            }
+        }),
+        mediaPreviewRoot: ({ theme }) => ({
+            margin: theme.spacing(0, 1)
+        }),
+        actionsRoot: ({ theme }) => ({
+            margin: '0px 0px',
+            color: '#3A3A3A',
+            '& .SCFeedObject-actions-action': {
+                textAlign: 'center'
+            }
+        }),
+        actionCommentRoot: ({ theme }) => ({
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            flexDirection: 'column',
+            '&.SCFeedObject-action-share-inline': {
+                flexDirection: 'row-reverse'
+            },
+            '& .SCFeedObject-action-vote-divider': {
+                width: '100%',
+                borderBottom: 0
+            }
+        }),
+        actionFollowRoot: ({ theme }) => ({
+            '& .SCFeedObject-action-follow-button': {
+                color: theme.palette.primary.main,
+                '&.SCFeedObject-action-follow-iconized': {
+                    borderRadius: '50%',
+                    padding: theme.spacing(1),
+                    minWidth: 'auto',
+                    fontSize: '1.429rem'
+                },
+                '&.SCFeedObject-action-follow-followed': {
+                    color: theme.palette.secondary.main
+                }
+            }
+        }),
+        actionShareRoot: ({ theme }) => ({
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            flexDirection: 'column',
+            '&.SCFeedObject-action-share-inline': {
+                flexDirection: 'row-reverse'
+            },
+            '& .SCFeedObject-action-vote-divider': {
+                width: '100%',
+                borderBottom: 0
+            }
+        }),
+        actionVoteRoot: ({ theme }) => ({
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            flexDirection: 'column',
+            '&.SCFeedObject-action-vote-inline': {
+                flexDirection: 'row-reverse'
+            },
+            '& .SCFeedObject-action-vote-divider': {
+                width: '100%',
+                borderBottom: 0
+            }
+        }),
+        activitiesRoot: ({ theme }) => ({
+            width: '100%'
+        }),
+        activitiesMenuRoot: ({ theme }) => ({
+            '& .SCFeedObject-activities-menu-selector': {
+                display: 'flex',
+                alignItems: 'center',
+                textAlign: 'center',
+                justifyContent: 'flex-end'
+            },
+            '& .SCFeedObject-activities-menu-selector .MuiButton-root': {
+                textTransform: 'capitalize',
+                fontWeight: theme.typography.fontWeightBold
+            }
+        }),
+        contributorsRoot: ({ theme }) => ({
+            '& .SCFeedObject-contributors-btn-participants': {
+                padding: theme.spacing(0.5),
+                marginLeft: theme.spacing(-0.5),
+                color: 'inherit',
+                fontWeight: theme.typography.fontWeightLight,
+                fontSize: '0.875rem'
+            },
+            minHeight: 28,
+            marginTop: 0,
+            marginBottom: 0,
+            ['& .MuiAvatarGroup-root']: {
+                justifyContent: 'flex-end'
+            },
+            ['& .MuiAvatar-root']: {
+                backgroundColor: '#d5d5d5',
+                border: '2px solid #FFF !important',
+                color: '#FFF',
+                fontSize: '0.55rem',
+                width: theme.selfcommunity.user.avatar.sizeSmall,
+                height: theme.selfcommunity.user.avatar.sizeSmall,
+                marginLeft: theme.spacing(-1),
+                lineHeight: '24px'
+            }
+        }),
+        contributorsSkeletonRoot: ({ theme }) => ({
+        // [`& .${classes.btnParticipants}`]: {
+        //   marginLeft: -10
+        // }
+        }),
+        pollObjectRoot: ({ theme }) => ({
+            marginTop: theme.spacing(1),
+            marginBottom: theme.spacing(1),
+            borderTop: `1px solid ${alpha(theme.palette.primary.main, theme.palette.action.activatedOpacity)}`,
+            borderBottom: `1px solid ${alpha(theme.palette.primary.main, theme.palette.action.activatedOpacity)}`,
+            boxShadow: 'none',
+            borderRadius: 0,
+            '& .MuiButton-root': {
+                '&:focus:not(:focus-visible)': {
+                    borderColor: alpha(theme.palette.primary.main, theme.palette.action.activatedOpacity)
+                }
+            },
+            '& .MuiCardHeader-root': {
+                textAlign: 'center',
+                padding: theme.spacing(2),
+                '& .SCFeedObject-poll-object-toggle-button': {
+                    fontSize: '0.875rem',
+                    textTransform: 'uppercase',
+                    '& .MuiButton-endIcon': {
+                        display: 'none'
+                    },
+                    '& .SCFeedObject-poll-object-expand-icon': {
+                        marginBottom: 2,
+                        marginLeft: -2,
+                        transition: theme.transitions.create('transform', {
+                            duration: theme.transitions.duration.shortest
+                        })
+                    },
+                    '& .SCFeedObject-poll-object-collapsed-icon': {
+                        transform: 'rotate(180deg)'
+                    }
+                }
+            },
+            '& .SCFeedObject-poll-object-title': {
+                textAlign: 'center',
+                color: theme.palette.text.primary,
+                marginBottom: theme.spacing(1),
+                fontWeight: theme.typography.fontWeightBold,
+                wordWrap: 'break-word'
+            },
+            '& .SCFeedObject-poll-object-voters, & .SCFeedObject-poll-object-votes': {
+                display: 'flex',
+                margin: theme.spacing(1),
+                alignItems: 'center',
+                justifyContent: 'center',
+                '& .MuiIcon-root': {
+                    width: '1em',
+                    marginRight: theme.spacing(1)
+                }
+            },
+            '& .SCFeedObject-poll-object-expiration, & .SCFeedObject-poll-object-close, & .SCFeedObject-poll-object-voters': {
+                textAlign: 'center',
+                color: theme.palette.text.secondary,
+                marginBottom: theme.spacing(2.5),
+                fontWeight: theme.typography.fontWeightLight,
+                fontSize: '0.765rem'
+            },
+            '& .SCFeedObject-poll-object-voters .MuiTypography-root': {
+                fontWeight: theme.typography.fontWeightLight,
+                fontSize: '1rem'
+            },
+            '& ul': {
+                padding: theme.spacing(2.5),
+                marginBottom: theme.spacing(2.5),
+                backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.activatedOpacity),
+                borderRadius: theme.shape.borderRadius,
+                '& li': {
+                    padding: 0
+                }
+            }
+        }),
+        pollObjectChoicesRoot: ({ theme }) => ({
+            backgroundColor: 'transparent',
+            marginBottom: theme.spacing(3),
+            padding: 0,
+            width: '100%',
+            borderRadius: 0,
+            '& .SCFeedObject-poll-object-choices-label, & .SCFeedObject-poll-object-choices-vote': {
+                marginBottom: 0,
+                fontWeight: theme.typography.fontWeightBold
+            },
+            '& .SCFeedObject-poll-object-choices-progress': {
+                display: 'flex',
+                flexDirection: 'row',
+                alignItems: 'center',
+                marginBottom: 0,
+                '& .MuiLinearProgress-root': {
+                    height: 10,
+                    borderRadius: theme.shape.borderRadius,
+                    flexGrow: 2,
+                    marginRight: theme.spacing(2),
+                    backgroundColor: theme.palette.common.white
+                },
+                '& > .MuiTypography-root': {
+                    fontSize: '0.987rem',
+                    fontWeight: theme.typography.fontWeightLight
+                }
+            }
+        }),
+        relevantActivitiesRoot: ({ theme }) => ({
+            '& .MuiList-root, & .SCFeedObject-relevant-activities-activity': {
+                padding: 0
+                // '& .SCBaseItem-content': {
+                //   alignItems: 'flex-start'
+                // }
+            },
+            '& .SCFeedObject-relevant-activities-activity': {
+                '& > .SCBaseItem-root': {
+                    borderRadius: 0,
+                    marginBottom: theme.spacing(2),
+                    '& .SCBaseItem-text': {
+                        margin: 0,
+                        '& .SCBaseItem-primary': {
+                            display: 'inline-block',
+                            marginBottom: theme.spacing(0.5),
+                            '& > a': {
+                                fontWeight: theme.typography.fontWeightBold,
+                                textDecoration: 'none'
+                            }
+                        },
+                        '& .SCBaseItem-secondary': {
+                            fontSize: '0.857rem'
+                        }
+                    }
+                },
+                '& .SCFeedObject-activity-comment-username, & .SCFeedObject-activity-follow-username, & .SCFeedObject-activity-poll-vote-username, & .SCFeedObject-activity-vote-up-username': {
+                    color: 'inherit'
+                },
+                '& .SCFeedObject-activity-comment-avatar, & .SCFeedObject-activity-follow-avatar, & .SCFeedObject-activity-poll-vote-avatar, & .SCFeedObject-activity-vote-up-avatar': {
+                    width: theme.selfcommunity.user.avatar.sizeMedium,
+                    height: theme.selfcommunity.user.avatar.sizeMedium
+                }
+            }
+        }),
+        activityCommentRoot: ({ theme }) => ({
+            '& .SCBaseItem-primary': {
+                display: 'flex !important',
+                flexDirection: 'row !important',
+                alignItems: 'center !important',
+                marginBottom: '0 !important',
+                '& .MuiTypography-root': {
+                    marginBottom: 0
+                }
+            },
+            '& .SCFeedObject-activity-comment-username': {
+                marginRight: theme.spacing(0.5)
+            }
+        }),
+        activityFollowRoot: ({ theme }) => ({}),
+        activityPollVoteRoot: ({ theme }) => ({}),
+        activityVoteUpRoot: ({ theme }) => ({})
     }
 };
 export default Component;

package/lib/esm/components/SCFeedObjectDetailTemplate.d.ts

@@ -8,6 +8,23 @@ declare const Component: {
                 };
             };
         };
+        skeletonRoot: ({ theme }: any) => {
+            marginTop: any;
+            '& .SCCommentsObject-skeleton-root': {
+                '& .SCWidget-root': {
+                    marginBottom: string;
+                };
+            };
+            '& .SCCommentObject-skeleton-root': {
+                background: string;
+                boxShadow: string;
+                border: number;
+                paddingLeft: string;
+                '& .SCCommentObject-skeleton-root': {
+                    marginBottom: string;
+                };
+            };
+        };
     };
 };
 export default Component;

package/lib/esm/components/SCFeedObjectDetailTemplate.js

@@ -7,6 +7,23 @@ const Component = {
                     paddingLeft: theme.spacing(2)
                 }
             }
+        }),
+        skeletonRoot: ({ theme }) => ({
+            marginTop: theme.spacing(2),
+            '& .SCCommentsObject-skeleton-root': {
+                '& .SCWidget-root': {
+                    marginBottom: '0px !important'
+                }
+            },
+            '& .SCCommentObject-skeleton-root': {
+                background: 'transparent',
+                boxShadow: 'none',
+                border: 0,
+                paddingLeft: '0px !important',
+                '& .SCCommentObject-skeleton-root': {
+                    marginBottom: '0px !important'
+                }
+            }
         })
     }
 };

package/lib/esm/components/SCFeedUpdatesWidget.d.ts

@@ -16,6 +16,7 @@ declare const Component: {
                 textTransform: string;
             };
         };
+        skeletonRoot: ({ theme }: any) => {};
     };
 };
 export default Component;

package/lib/esm/components/SCFeedUpdatesWidget.js

@@ -15,7 +15,8 @@ const Component = {
             '& .SCFeedUpdatesWidget-button-load-more': {
                 textTransform: 'capitalize'
             }
-        })
+        }),
+        skeletonRoot: ({ theme }) => ({})
     }
 };
 export default Component;

package/lib/esm/components/SCFooter.d.ts

@@ -15,6 +15,7 @@ declare const Component: {
                 };
             };
         };
+        skeletonRoot: ({ theme }: any) => {};
     };
 };
 export default Component;

package/lib/esm/components/SCFooter.js

@@ -14,7 +14,8 @@ const Component = {
                     color: theme.palette.text.primary
                 }
             }
-        })
+        }),
+        skeletonRoot: ({ theme }) => ({})
     }
 };
 export default Component;

package/lib/esm/components/SCIncubator.d.ts

@@ -27,6 +27,20 @@ declare const Component: {
                 marginLeft: any;
             };
         };
+        skeletonRoot: ({ theme }: any) => {
+            width: string;
+            '& .MuiCardContent-root': {
+                '& .SCIncubator-secondary': {
+                    marginTop: any;
+                };
+                '& .SCIncubator-progress-bar': {
+                    marginTop: any;
+                };
+            };
+            '& .MuiCardActions-root': {
+                marginLeft: any;
+            };
+        };
     };
 };
 export default Component;

package/lib/esm/components/SCIncubator.js

@@ -26,6 +26,20 @@ const Component = {
             '& .MuiCardActions-root': {
                 marginLeft: theme.spacing(1)
             }
+        }),
+        skeletonRoot: ({ theme }) => ({
+            width: '100%',
+            '& .MuiCardContent-root': {
+                '& .SCIncubator-secondary': {
+                    marginTop: theme.spacing(1)
+                },
+                '& .SCIncubator-progress-bar': {
+                    marginTop: theme.spacing(1)
+                }
+            },
+            '& .MuiCardActions-root': {
+                marginLeft: theme.spacing(2)
+            }
         })
     }
 };

package/lib/esm/components/SCIncubatorListWidget.d.ts

@@ -13,6 +13,31 @@ declare const Component: {
                 justifyContent: string;
             };
         };
+        dialogRoot: ({ theme }: any) => {};
+        skeletonRoot: ({ theme }: any) => {};
+        createDialogRoot: ({ theme }: any) => {
+            [x: number]: {
+                minWidth: number;
+            };
+            margin: number;
+            '& .SCIncubatorListWidget-intro': {
+                whiteSpace: string;
+            };
+            '& .SCIncubatorListWidget-form': {
+                marginTop: any;
+                marginBottom: any;
+            };
+            '& .SCIncubatorListWidget-name': {
+                '& .MuiInputBase-root': {
+                    height: string;
+                };
+            };
+            '& .SCIncubatorListWidget-submitted-message': {
+                padding: any;
+                borderRadius: string;
+                backgroundColor: string;
+            };
+        };
     };
 };
 export default Component;

package/lib/esm/components/SCIncubatorListWidget.js

@@ -12,6 +12,31 @@ const Component = {
                 display: 'flex',
                 justifyContent: 'space-between'
             }
+        }),
+        dialogRoot: ({ theme }) => ({}),
+        skeletonRoot: ({ theme }) => ({}),
+        createDialogRoot: ({ theme }) => ({
+            margin: 2,
+            [theme.breakpoints.down(500)]: {
+                minWidth: 300
+            },
+            '& .SCIncubatorListWidget-intro': {
+                whiteSpace: 'pre-line'
+            },
+            '& .SCIncubatorListWidget-form': {
+                marginTop: theme.spacing(1),
+                marginBottom: theme.spacing(1)
+            },
+            '& .SCIncubatorListWidget-name': {
+                '& .MuiInputBase-root': {
+                    height: '40px'
+                }
+            },
+            '& .SCIncubatorListWidget-submitted-message': {
+                padding: theme.spacing(1),
+                borderRadius: '8px',
+                backgroundColor: '#bdd5bd'
+            }
         })
     }
 };

package/lib/esm/components/SCIncubatorSuggestionWidget.d.ts

@@ -5,6 +5,8 @@ declare const Component: {
                 padding: any;
             };
         };
+        dialogRoot: ({ theme }: any) => {};
+        skeletonRoot: ({ theme }: any) => {};
     };
 };
 export default Component;

package/lib/esm/components/SCIncubatorSuggestionWidget.js

@@ -4,7 +4,9 @@ const Component = {
             '& .MuiCardContent-root': {
                 padding: theme.spacing(2)
             }
-        })
+        }),
+        dialogRoot: ({ theme }) => ({}),
+        skeletonRoot: ({ theme }) => ({})
     }
 };
 export default Component;

package/lib/esm/components/SCLoyaltyProgramDetailTemplate.d.ts

@@ -104,12 +104,12 @@ declare const Component: {
                     };
                 };
             };
-            '& .SCLoyaltyProgramDetailPointsList-root': {
+            '& .SCLoyaltyProgramDetailTemplate-points-list-root': {
                 marginTop: any;
                 marginBottom: any;
                 '& .MuiGrid-item': {
                     paddingTop: any;
-                    '& .SCLoyaltyProgramDetailPointsList-element': {
+                    '& .SCLoyaltyProgramDetailTemplate-element': {
                         display: string;
                         justifyContent: string;
                         marginBottom: any;
@@ -125,6 +125,57 @@ declare const Component: {
                 };
             };
         };
+        skeletonRoot: ({ theme }: any) => {
+            height: string;
+            '& .SCLoyaltyProgramDetailTemplate-title': {
+                [x: number]: {
+                    justifyContent: string;
+                };
+                display: string;
+                marginBottom: any;
+                alignItems: string;
+                '& .SCLoyaltyProgramDetailTemplate-chip': {
+                    marginLeft: any;
+                    borderRadius: any;
+                };
+            };
+            '& .SCLoyaltyProgramDetailTemplate-section-title': {
+                marginBottom: any;
+                '& .SCLoyaltyProgramDetailTemplate-sub-title': {
+                    marginBottom: any;
+                };
+            };
+            '& .SCLoyaltyProgramDetailTemplate-points-list': {
+                marginBottom: any;
+            };
+        };
+        prizeItemSkeletonRoot: ({ theme }: any) => {
+            [x: number]: {
+                width: any;
+                height: any;
+                marginTop: any;
+            };
+            '& .MuiCard-root': {
+                [x: number]: {
+                    borderRadius: number;
+                    height: string;
+                };
+            };
+            '& .MuiCardContent-root': {
+                justifyContent: string;
+                '& .SCLoyaltyProgramDetailTemplate-content': {
+                    display: string;
+                    flexDirection: string;
+                    justifyContent: string;
+                    alignItems: string;
+                    marginTop: any;
+                    paddingBottom: any;
+                };
+            };
+            '& .MuiCardActions-root': {
+                justifyContent: string;
+            };
+        };
     };
 };
 export default Component;