@secondstaxorg/sscomp 2.0.81 → 2.0.82

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.
package/dist/index.js CHANGED
@@ -24280,13 +24280,47 @@ const SideModal = (props) => {
24280
24280
  )
24281
24281
  };
24282
24282
 
24283
+ const customCSS$1 =
24284
+ //language=css
24285
+ `
24286
+ div.sm-news-card-container {
24287
+ container-type: inline-size;
24288
+ min-width: 270px;
24289
+
24290
+ .thumb-date {
24291
+ display: none;
24292
+ }
24293
+
24294
+ .source-date {
24295
+ display: flex;
24296
+ }
24297
+ }
24298
+
24299
+ @container (max-width: 335px) {
24300
+ div.news-thumbnail {
24301
+ width: 113px;
24302
+ }
24303
+
24304
+ .thumb-date {
24305
+ display: flex !important;
24306
+ margin-top: 4px;
24307
+ }
24308
+
24309
+ .source-date {
24310
+ display: none !important;
24311
+ }
24312
+ }
24313
+
24314
+
24315
+ `;
24316
+
24283
24317
  const SmallNewsCardContainer = styled.div`
24284
24318
  padding: 16px;
24285
24319
  border-radius: 8px;
24286
24320
  background: ${theme.colors.white};
24287
24321
  display: flex;
24288
24322
  align-items: start;
24289
- position:relative;
24323
+ position: relative;
24290
24324
  gap: 16px;
24291
24325
  `;
24292
24326
 
@@ -24300,11 +24334,12 @@ const FeaturedImage = styled.img`
24300
24334
 
24301
24335
  const NewsTitle = styled.h6`
24302
24336
  margin: 0;
24303
- a{
24337
+
24338
+ a {
24304
24339
  display: -webkit-box;
24305
24340
  -webkit-line-clamp: 2;
24306
24341
  -webkit-box-orient: vertical;
24307
- overflow:hidden;
24342
+ overflow: hidden;
24308
24343
  color: ${theme.colors["neutral-900"]};
24309
24344
  text-decoration: none;
24310
24345
  }
@@ -24314,10 +24349,12 @@ const TitleSource = styled.div`
24314
24349
  display: flex;
24315
24350
  flex-direction: column;
24316
24351
  gap: 16px;
24317
- .title{
24352
+
24353
+ .title {
24318
24354
  height: 69px;
24319
24355
  }
24320
- h6{
24356
+
24357
+ h6 {
24321
24358
  `;
24322
24359
 
24323
24360
  const SourceDate = styled.div`
@@ -24325,7 +24362,8 @@ const SourceDate = styled.div`
24325
24362
  border-radius: 8px;
24326
24363
  display: inline-flex;
24327
24364
  width: fit-content;
24328
- .tag{
24365
+
24366
+ .tag {
24329
24367
  color: ${theme.colors["neutral-900"]};
24330
24368
  padding: 8px;
24331
24369
  display: inline-flex;
@@ -24334,12 +24372,14 @@ const SourceDate = styled.div`
24334
24372
  white-space: nowrap;
24335
24373
  overflow-x: hidden;
24336
24374
  }
24337
- .tag:first-of-type{
24375
+
24376
+ .tag:first-of-type {
24338
24377
  border-right: 2px solid ${theme.colors["neutral-100"]};
24339
24378
  width: fit-content;
24340
24379
  white-space: nowrap;
24341
24380
  overflow-x: hidden;
24342
24381
  }
24382
+
24343
24383
  .tag .source-text {
24344
24384
  text-overflow: ellipsis;
24345
24385
  overflow: hidden;
@@ -24360,66 +24400,76 @@ const SmallNewsCard = (props) => {
24360
24400
  const {title, date, source, sourceCountryFlagUrl, featuredImgUrl, storyUrl, navigationOverride} = props;
24361
24401
 
24362
24402
  return (
24363
- React$1.createElement('div', { className: "sm-news-card-container", __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 17}}
24364
- , React$1.createElement(SmallNewsCardContainer, {__self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 18}}
24365
- , React$1.createElement('div', { className: "news-thumbnail", __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 19}}
24366
- , React$1.createElement('a', { href: storyUrl, onClick: (e) => {
24367
- if (navigationOverride) {
24368
- e.preventDefault();
24369
- navigationOverride({title, date, source, sourceCountryFlagUrl, featuredImgUrl, storyUrl});
24370
- }
24371
- }, __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 20}}
24372
- , React$1.createElement(FeaturedImage, { src: featuredImgUrl, alt: title, onError: (e) => {
24373
- e.currentTarget.src = img$6;
24374
- e.currentTarget.srcset = img$6;
24375
- }, loading: "lazy", __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 26}})
24376
- )
24403
+ React$1.createElement(React$1.Fragment, null
24404
+ , React$1.createElement('style', {__self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 17}}, customCSS$1)
24405
+ , React$1.createElement('div', { className: "sm-news-card-container", __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 18}}
24406
+ , React$1.createElement(SmallNewsCardContainer, {__self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 19}}
24407
+ , React$1.createElement('div', { className: "news-thumbnail", __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 20}}
24408
+ , React$1.createElement('a', { href: storyUrl, onClick: (e) => {
24409
+ if (navigationOverride) {
24410
+ e.preventDefault();
24411
+ navigationOverride({
24412
+ title,
24413
+ date,
24414
+ source,
24415
+ sourceCountryFlagUrl,
24416
+ featuredImgUrl,
24417
+ storyUrl
24418
+ });
24419
+ }
24420
+ }, __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 21}}
24421
+ , React$1.createElement(FeaturedImage, { src: featuredImgUrl, alt: title, onError: (e) => {
24422
+ e.currentTarget.src = img$6;
24423
+ e.currentTarget.srcset = img$6;
24424
+ }, loading: "lazy", __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 34}})
24425
+ )
24377
24426
 
24378
- /*display this one if sm-news-card-container is smaller than 335px*/
24379
- , React$1.createElement(SourceDate, { className: "thumb-date", __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 33}}
24380
- , React$1.createElement('div', { className: "tag paragraph1Regular" , __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 34}}
24381
- , React$1.createElement('span', { style: {marginRight: 8, width: 21}, __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 35}}
24427
+ /*display this one if sm-news-card-container is smaller than 335px*/
24428
+ , React$1.createElement(SourceDate, { className: "thumb-date", __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 41}}
24429
+ , React$1.createElement('div', { className: "tag paragraph1Regular" , __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 42}}
24430
+ , React$1.createElement('span', { style: {marginRight: 8, width: 21}, __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 43}}
24382
24431
  , React$1.createElement('img', { src: sourceCountryFlagUrl, alt: "Source flag" , onError: (e) => {
24383
24432
  e.currentTarget.src = img$5;
24384
- }, __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 36}})
24433
+ }, __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 44}})
24385
24434
  )
24386
- , React$1.createElement('span', { className: "source-text captionBook" , __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 40}}
24435
+ , React$1.createElement('span', { className: "source-text captionBook" , __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 48}}
24387
24436
  , source
24388
24437
  )
24438
+ )
24439
+ , 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))
24389
24440
  )
24390
- , 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))
24391
24441
  )
24392
- )
24393
- , React$1.createElement(TitleSource, {__self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 47}}
24394
- , React$1.createElement('div', { className: "title", __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 48}}
24395
- , React$1.createElement(NewsTitle, { className: "heading6Medium", __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 49}}
24396
- , React$1.createElement('a', { href: storyUrl, onClick: (e) => {
24397
- if (navigationOverride) {
24398
- e.preventDefault();
24399
- navigationOverride({
24400
- title,
24401
- date,
24402
- source,
24403
- sourceCountryFlagUrl,
24404
- featuredImgUrl,
24405
- storyUrl
24406
- });
24407
- }
24408
- }, __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 50}}, title)
24442
+ , React$1.createElement(TitleSource, {__self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 55}}
24443
+ , React$1.createElement('div', { className: "title", __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 56}}
24444
+ , React$1.createElement(NewsTitle, { className: "heading6Medium", __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 57}}
24445
+ , React$1.createElement('a', { href: storyUrl, onClick: (e) => {
24446
+ if (navigationOverride) {
24447
+ e.preventDefault();
24448
+ navigationOverride({
24449
+ title,
24450
+ date,
24451
+ source,
24452
+ sourceCountryFlagUrl,
24453
+ featuredImgUrl,
24454
+ storyUrl
24455
+ });
24456
+ }
24457
+ }, __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 58}}, title)
24458
+ )
24409
24459
  )
24410
- )
24411
- , React$1.createElement(SourceDate, { className: "source-date", __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 65}}
24412
- , React$1.createElement('div', { className: "tag paragraph1Regular" , __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 66}}
24413
- , React$1.createElement('span', { style: {marginRight: 8, width: 21}, __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 67}}
24460
+ , React$1.createElement(SourceDate, { className: "source-date", __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 73}}
24461
+ , React$1.createElement('div', { className: "tag paragraph1Regular" , __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 74}}
24462
+ , React$1.createElement('span', { style: {marginRight: 8, width: 21}, __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 75}}
24414
24463
  , React$1.createElement('img', { src: sourceCountryFlagUrl, alt: "Source flag" , onError: (e) => {
24415
24464
  e.currentTarget.src = img$5;
24416
- }, __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 68}})
24465
+ }, __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 76}})
24417
24466
  )
24418
- , React$1.createElement('span', { className: "source-text captionBook" , __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 72}}
24467
+ , React$1.createElement('span', { className: "source-text captionBook" , __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 80}}
24419
24468
  , source
24420
24469
  )
24470
+ )
24471
+ , 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))
24421
24472
  )
24422
- , 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))
24423
24473
  )
24424
24474
  )
24425
24475
  )
@@ -38827,6 +38877,24 @@ const IconButton = (props) => {
38827
38877
  )
38828
38878
  };
38829
38879
 
38880
+ const customCSS =
38881
+ //language=css
38882
+ `
38883
+ .vc-container {
38884
+ container-type: inline-size;
38885
+ }
38886
+
38887
+ @container (max-width:425px) {
38888
+ .card-body {
38889
+ flex-direction: column;
38890
+ }
38891
+
38892
+ .video-thumbnail {
38893
+ width: 100% !important;
38894
+ }
38895
+ }
38896
+ `;
38897
+
38830
38898
  const Card = styled.div`
38831
38899
  background: ${theme.colors.white};
38832
38900
  border-radius: 8px;
@@ -38835,14 +38903,14 @@ const Card = styled.div`
38835
38903
  display: flex;
38836
38904
  cursor: pointer;
38837
38905
  container-type: inline-size;
38838
-
38906
+
38839
38907
  .card-body {
38840
38908
  width: 100%;
38841
38909
  display: flex;
38842
38910
  //flex-direction: row;
38843
38911
  gap: 24px;
38844
38912
  justify-content: start;
38845
-
38913
+
38846
38914
  /*@media (max-width: 425px) {
38847
38915
  flex-direction: column;
38848
38916
  }*/
@@ -38858,7 +38926,7 @@ const Card = styled.div`
38858
38926
  background-position: center;
38859
38927
  background-size: cover;
38860
38928
  background-repeat: no-repeat;
38861
-
38929
+
38862
38930
  /*@media (max-width: 425px) {
38863
38931
  width: 100%;
38864
38932
  }*/
@@ -38875,20 +38943,21 @@ const Card = styled.div`
38875
38943
  border-bottom-right-radius: 8px;
38876
38944
  }
38877
38945
  }
38878
-
38879
- .video-details{
38946
+
38947
+ .video-details {
38880
38948
  display: flex;
38881
38949
  flex-direction: column;
38882
38950
  justify-content: space-between;
38883
38951
  gap: 16px;
38884
-
38885
- .date{
38952
+
38953
+ .date {
38886
38954
  width: fit-content;
38887
38955
  background: ${theme.colors["neutral-50"]};
38888
38956
  border-radius: 8px;
38889
38957
  padding: 8px;
38890
38958
  }
38891
- .video-title p{
38959
+
38960
+ .video-title p {
38892
38961
  overflow: hidden;
38893
38962
  display: -webkit-box;
38894
38963
  -webkit-line-clamp: 3;
@@ -38905,6 +38974,7 @@ const _jsxFileName = "D:\\SSX\\Project\\Component Library\\sscomp\\src\\componen
38905
38974
  const VideoCard = ({date,onClick,thumbnailUrl,videoTitle}) => {
38906
38975
  return (
38907
38976
  React$1.createElement(React$1.Fragment, null
38977
+ , React$1.createElement('style', {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 13}}, customCSS)
38908
38978
  , React$1.createElement(Card, { onClick: onClick, role: "button", className: "vc-container", 'aria-label': videoTitle, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 14}}
38909
38979
  , React$1.createElement('div', { className: "card-body", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 15}}
38910
38980
  , React$1.createElement('div', { className: "video-thumbnail", style: {backgroundImage:`url(${thumbnailUrl})`}, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 16}}