@secondstaxorg/sscomp 2.0.81 → 2.0.83

package/dist/index.js

@@ -24280,13 +24280,47 @@ const SideModal = (props) => {
     )
 };
 
+const customCSS$1 =
+    //language=css
+    `
+        div.sm-news-card-container {
+            container-type: inline-size;
+            min-width: 270px;
+
+            .thumb-date {
+                display: none;
+            }
+
+            .source-date {
+                display: flex;
+            }
+        }
+
+        @container (max-width: 335px) {
+            div.news-thumbnail {
+                width: 113px;
+            }
+
+            .thumb-date {
+                display: flex !important;
+                margin-top: 4px;
+            }
+
+            .source-date {
+                display: none !important;
+            }
+        }
+
+
+    `;
+
 const SmallNewsCardContainer = styled.div`
     padding: 16px;
     border-radius: 8px;
     background: ${theme.colors.white};
     display: flex;
     align-items: start;
-    position:relative;
+    position: relative;
     gap: 16px;
 `;
 
@@ -24300,11 +24334,12 @@ const FeaturedImage = styled.img`
 
 const NewsTitle = styled.h6`
     margin: 0;
-    a{
+
+    a {
         display: -webkit-box;
         -webkit-line-clamp: 2;
         -webkit-box-orient: vertical;
-        overflow:hidden;
+        overflow: hidden;
         color: ${theme.colors["neutral-900"]};
         text-decoration: none;
     }
@@ -24314,10 +24349,12 @@ const TitleSource = styled.div`
     display: flex;
     flex-direction: column;
     gap: 16px;
-    .title{
+
+    .title {
         height: 69px;
     }
-    h6{
+
+    h6 {
 `;
 
 const SourceDate = styled.div`
@@ -24325,7 +24362,8 @@ const SourceDate = styled.div`
     border-radius: 8px;
     display: inline-flex;
     width: fit-content;
-    .tag{
+
+    .tag {
         color: ${theme.colors["neutral-900"]};
         padding: 8px;
         display: inline-flex;
@@ -24334,12 +24372,14 @@ const SourceDate = styled.div`
         white-space: nowrap;
         overflow-x: hidden;
     }
-    .tag:first-of-type{
+
+    .tag:first-of-type {
         border-right: 2px solid ${theme.colors["neutral-100"]};
         width: fit-content;
         white-space: nowrap;
         overflow-x: hidden;
     }
+
     .tag .source-text {
         text-overflow: ellipsis;
         overflow: hidden;
@@ -24360,66 +24400,76 @@ const SmallNewsCard = (props) => {
     const {title, date, source, sourceCountryFlagUrl, featuredImgUrl, storyUrl, navigationOverride} = props;
 
     return (
-        React$1.createElement('div', { className: "sm-news-card-container", __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 17}}
-            , React$1.createElement(SmallNewsCardContainer, {__self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 18}}
-                , React$1.createElement('div', { className: "news-thumbnail", __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 19}}
-                    , React$1.createElement('a', { href: storyUrl, onClick: (e) => {
-                        if (navigationOverride) {
-                            e.preventDefault();
-                            navigationOverride({title, date, source, sourceCountryFlagUrl, featuredImgUrl, storyUrl});
-                        }
-                    }, __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 20}}
-                        , React$1.createElement(FeaturedImage, { src: featuredImgUrl, alt: title, onError: (e) => {
-                            e.currentTarget.src = img$6;
-                            e.currentTarget.srcset = img$6;
-                        }, loading: "lazy", __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 26}})
-                    )
+        React$1.createElement(React$1.Fragment, null
+            , React$1.createElement('style', {__self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 17}}, customCSS$1)
+            , React$1.createElement('div', { className: "sm-news-card-container", __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 18}}
+                , React$1.createElement(SmallNewsCardContainer, {__self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 19}}
+                    , React$1.createElement('div', { className: "news-thumbnail", __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 20}}
+                        , React$1.createElement('a', { href: storyUrl, onClick: (e) => {
+                            if (navigationOverride) {
+                                e.preventDefault();
+                                navigationOverride({
+                                    title,
+                                    date,
+                                    source,
+                                    sourceCountryFlagUrl,
+                                    featuredImgUrl,
+                                    storyUrl
+                                });
+                            }
+                        }, __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 21}}
+                            , React$1.createElement(FeaturedImage, { src: featuredImgUrl, alt: title, onError: (e) => {
+                                e.currentTarget.src = img$6;
+                                e.currentTarget.srcset = img$6;
+                            }, loading: "lazy", __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 34}})
+                        )
 
-                    /*display this one if sm-news-card-container is smaller than 335px*/
-                    , React$1.createElement(SourceDate, { className: "thumb-date", __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 33}}
-                        , React$1.createElement('div', { className: "tag paragraph1Regular" , __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 34}}
-                        , React$1.createElement('span', { style: {marginRight: 8, width: 21}, __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 35}}
+                        /*display this one if sm-news-card-container is smaller than 335px*/
+                        , React$1.createElement(SourceDate, { className: "thumb-date", __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 41}}
+                            , React$1.createElement('div', { className: "tag paragraph1Regular" , __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 42}}
+                        , React$1.createElement('span', { style: {marginRight: 8, width: 21}, __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 43}}
                             , React$1.createElement('img', { src: sourceCountryFlagUrl, alt: "Source flag" , onError: (e) => {
                                 e.currentTarget.src = img$5;
-                            }, __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 36}})
+                            }, __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 44}})
                         )
-                            , React$1.createElement('span', { className: "source-text captionBook" , __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 40}}
+                                , React$1.createElement('span', { className: "source-text captionBook" , __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 48}}
                             , source
                         )
+                            )
+                            , React$1.createElement('div', { className: "tag paragraph1Regular" , __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 52}}, React$1.createElement('span', { className: "captionBook", __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 52}}, date))
                         )
-                        , React$1.createElement('div', { className: "tag paragraph1Regular" , __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 44}}, React$1.createElement('span', { className: "captionBook", __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 44}}, date))
                     )
-                )
-                , React$1.createElement(TitleSource, {__self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 47}}
-                    , React$1.createElement('div', { className: "title", __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 48}}
-                        , React$1.createElement(NewsTitle, { className: "heading6Medium", __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 49}}
-                            , React$1.createElement('a', { href: storyUrl, onClick: (e) => {
-                                if (navigationOverride) {
-                                    e.preventDefault();
-                                    navigationOverride({
-                                        title,
-                                        date,
-                                        source,
-                                        sourceCountryFlagUrl,
-                                        featuredImgUrl,
-                                        storyUrl
-                                    });
-                                }
-                            }, __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 50}}, title)
+                    , React$1.createElement(TitleSource, {__self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 55}}
+                        , React$1.createElement('div', { className: "title", __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 56}}
+                            , React$1.createElement(NewsTitle, { className: "heading6Medium", __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 57}}
+                                , React$1.createElement('a', { href: storyUrl, onClick: (e) => {
+                                    if (navigationOverride) {
+                                        e.preventDefault();
+                                        navigationOverride({
+                                            title,
+                                            date,
+                                            source,
+                                            sourceCountryFlagUrl,
+                                            featuredImgUrl,
+                                            storyUrl
+                                        });
+                                    }
+                                }, __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 58}}, title)
+                            )
                         )
-                    )
-                    , React$1.createElement(SourceDate, { className: "source-date", __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 65}}
-                        , React$1.createElement('div', { className: "tag paragraph1Regular" , __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 66}}
-                        , React$1.createElement('span', { style: {marginRight: 8, width: 21}, __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 67}}
+                        , React$1.createElement(SourceDate, { className: "source-date", __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 73}}
+                            , React$1.createElement('div', { className: "tag paragraph1Regular" , __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 74}}
+                        , React$1.createElement('span', { style: {marginRight: 8, width: 21}, __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 75}}
                             , React$1.createElement('img', { src: sourceCountryFlagUrl, alt: "Source flag" , onError: (e) => {
                                 e.currentTarget.src = img$5;
-                            }, __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 68}})
+                            }, __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 76}})
                         )
-                            , React$1.createElement('span', { className: "source-text captionBook" , __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 72}}
+                                , React$1.createElement('span', { className: "source-text captionBook" , __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 80}}
                             , source
                         )
+                            )
+                            , React$1.createElement('div', { className: "tag paragraph1Regular" , __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 84}}, React$1.createElement('span', { className: "captionBook", __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 84}}, date))
                         )
-                        , React$1.createElement('div', { className: "tag paragraph1Regular" , __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 76}}, React$1.createElement('span', { className: "captionBook", __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 76}}, date))
                     )
                 )
             )
@@ -38827,6 +38877,24 @@ const IconButton = (props) => {
     )
 };
 
+const customCSS =
+    //language=css
+    `
+        .vc-container {
+            container-type: inline-size;
+        }
+
+        @container (max-width:425px) {
+            .card-body {
+                flex-direction: column;
+            }
+
+            .video-thumbnail {
+                width: 100% !important;
+            }
+        }
+    `;
+
 const Card = styled.div`
     background: ${theme.colors.white};
     border-radius: 8px;
@@ -38835,14 +38903,14 @@ const Card = styled.div`
     display: flex;
     cursor: pointer;
     container-type: inline-size;
-    
+
     .card-body {
         width: 100%;
         display: flex;
         //flex-direction: row;
         gap: 24px;
         justify-content: start;
-        
+
         /*@media (max-width: 425px) {
             flex-direction: column;
         }*/
@@ -38858,7 +38926,7 @@ const Card = styled.div`
         background-position: center;
         background-size: cover;
         background-repeat: no-repeat;
-        
+
         /*@media (max-width: 425px) {
             width: 100%;
         }*/
@@ -38875,20 +38943,36 @@ const Card = styled.div`
             border-bottom-right-radius: 8px;
         }
     }
-    
-    .video-details{
+
+    .video-details {
         display: flex;
         flex-direction: column;
         justify-content: space-between;
         gap: 16px;
-        
-        .date{
+
+        .date {
             width: fit-content;
             background: ${theme.colors["neutral-50"]};
             border-radius: 8px;
             padding: 8px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        
+        .divider{
+            background: ${theme.colors["neutral-300"]};
+            width: 1px;
+            height: 100%;
         }
-        .video-title p{
+        
+        .video-source-info{
+            display: flex;
+            gap: 4px;
+            align-items: center;
+        }
+
+        .video-title p {
             overflow: hidden;
             display: -webkit-box;
             -webkit-line-clamp: 3;
@@ -38902,27 +38986,38 @@ const _jsxFileName = "D:\\SSX\\Project\\Component Library\\sscomp\\src\\componen
  * Card to display thumbnail image and title of a video with a link to the page that hosts the actual video.<br>
  * This is not a video player, hence will not play the video
  */
-const VideoCard = ({date,onClick,thumbnailUrl,videoTitle}) => {
+const VideoCard = ({date, onClick, thumbnailUrl, videoTitle, source, sourceLogo}) => {
     return (
         React$1.createElement(React$1.Fragment, null
+            , React$1.createElement('style', {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 13}}, customCSS)
             , React$1.createElement(Card, { onClick: onClick, role: "button", className: "vc-container", 'aria-label': videoTitle, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 14}}
                 , React$1.createElement('div', { className: "card-body", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 15}}
-                    , React$1.createElement('div', { className: "video-thumbnail", style: {backgroundImage:`url(${thumbnailUrl})`}, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 16}}
+                    , React$1.createElement('div', { className: "video-thumbnail", style: {backgroundImage: `url(${thumbnailUrl})`}, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 16}}
                         , React$1.createElement('div', { className: "label", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 17}}
-                            , React$1.createElement('svg', { width: "16", height: "17", viewBox: "0 0 16 17"   , fill: "none", xmlns: "http://www.w3.org/2000/svg", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 18}}
+                            , React$1.createElement('svg', { width: "16", height: "17", viewBox: "0 0 16 17"   , fill: "none",
+                                 xmlns: "http://www.w3.org/2000/svg", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 18}}
                                 , React$1.createElement('path', {
                                     d: "M12.3601 6.50001L5.92014 2.80667C5.57167 2.60545 5.17614 2.50003 4.77374 2.50114C4.37134 2.50224 3.97639 2.60983 3.62903 2.81297C3.28166 3.0161 2.99425 3.30756 2.79597 3.65773C2.5977 4.00789 2.49563 4.4043 2.50014 4.80667V12.22C2.50014 12.8247 2.74036 13.4046 3.16794 13.8322C3.59552 14.2598 4.17545 14.5 4.78014 14.5C5.18043 14.4993 5.57353 14.3936 5.92014 14.1933L12.3601 10.5C12.7062 10.2997 12.9935 10.012 13.1932 9.66563C13.3929 9.31928 13.4981 8.92649 13.4981 8.52667C13.4981 8.12686 13.3929 7.73407 13.1932 7.38772C12.9935 7.04136 12.7062 6.75361 12.3601 6.55334V6.50001ZM11.6935 9.29334L5.25348 13.04C5.10913 13.1218 4.94605 13.1648 4.78014 13.1648C4.61423 13.1648 4.45115 13.1218 4.30681 13.04C4.16287 12.9569 4.04335 12.8374 3.96027 12.6934C3.87718 12.5495 3.83345 12.3862 3.83348 12.22V4.78001C3.83345 4.61381 3.87718 4.45052 3.96027 4.30658C4.04335 4.16264 4.16287 4.04311 4.30681 3.96001C4.45175 3.87944 4.61434 3.83593 4.78014 3.83334C4.94583 3.83674 5.10823 3.8802 5.25348 3.96001L11.6935 7.68001C11.8375 7.76307 11.957 7.88259 12.0402 8.02653C12.1233 8.17048 12.1671 8.33378 12.1671 8.50001C12.1671 8.66624 12.1233 8.82954 12.0402 8.97348C11.957 9.11743 11.8375 9.23694 11.6935 9.32001V9.29334Z"                                                                                                                         ,
-                                    fill: "currentColor", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 19}})
+                                    fill: "currentColor", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 20}})
                             )
-                            , React$1.createElement('span', { className: "paragraph1Regular", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 23}}, "Video")
+                            , React$1.createElement('span', { className: "paragraph1Regular", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 24}}, "Video")
                         )
                     )
-                    , React$1.createElement('div', { className: "video-details", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 26}}
-                        , React$1.createElement('div', { className: "date", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 27}}
-                            , React$1.createElement('span', { className: "paragraph1Regular", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 28}}, dayjs(date).format('MMM D, YYYY'))
+                    , React$1.createElement('div', { className: "video-details", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 27}}
+                        , React$1.createElement('div', { className: "date", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 28}}
+                            , React$1.createElement('span', { className: "paragraph1Regular", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 29}}, dayjs(date).format('MMM D, YYYY'))
+                            , source &&
+                                React$1.createElement(React$1.Fragment, null
+                                    , React$1.createElement('div', { className: "divider", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 32}})
+                                    , React$1.createElement('div', { className: "video-source-info", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 33}}
+                                        , sourceLogo && React$1.createElement('img', { src: sourceLogo, alt: "", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 34}})
+                                        , React$1.createElement('span', { className: "paragraph1Regular", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 35}}, source)
+                                    )
+                                )
+                            
                         )
-                        , React$1.createElement('div', { className: "video-title", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 30}}
-                            , React$1.createElement('p', { className: "subheadingRegular", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 31}}, videoTitle)
+                        , React$1.createElement('div', { className: "video-title", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 40}}
+                            , React$1.createElement('p', { className: "subheadingRegular", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 41}}, videoTitle)
                         )
                     )
                 )