@secondstaxorg/sscomp 2.0.79 → 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
@@ -1874,37 +1874,47 @@ const BankSelector = (props) => {
1874
1874
  };
1875
1875
 
1876
1876
  const BreadcrumbContainer = styled.div`
1877
- background: ${theme.colors.white};
1878
- padding: 8px;
1879
- height: 49px;
1880
- border-radius: 8px;
1881
- display: flex;
1882
- align-items: center;
1883
- gap: 8px;
1884
- box-sizing: border-box;
1885
- p{
1886
- margin:0;
1887
- }
1888
- a{
1889
- text-decoration: none;
1890
- color: ${theme.colors["neutral-400"]};
1891
- }
1892
- div{
1877
+ background: ${theme.colors.white};
1878
+ padding: 8px;
1879
+ height: 49px;
1880
+ border-radius: 8px;
1893
1881
  display: flex;
1894
1882
  align-items: center;
1895
1883
  gap: 8px;
1896
- height: 100%;
1897
- }
1898
- div span{
1899
- display: block;
1900
- }
1901
- div span:last-of-type{
1902
- display: -webkit-box;
1903
- -webkit-line-clamp: 1;
1904
- -webkit-box-orient: vertical;
1905
- overflow:hidden;
1906
- color:${theme.colors["neutral-900"]};
1907
- }
1884
+ box-sizing: border-box;
1885
+
1886
+ p {
1887
+ margin: 0;
1888
+ }
1889
+
1890
+ a {
1891
+ text-decoration: none;
1892
+ color: ${theme.colors["neutral-900"]};
1893
+ transition: 0.3s;
1894
+ &:hover{
1895
+ color: ${theme.colors["primary-500"]};
1896
+ text-decoration: underline;
1897
+ }
1898
+ }
1899
+
1900
+ div {
1901
+ display: flex;
1902
+ align-items: center;
1903
+ gap: 8px;
1904
+ height: 100%;
1905
+ }
1906
+
1907
+ div span {
1908
+ display: block;
1909
+ }
1910
+
1911
+ div span:last-of-type {
1912
+ display: -webkit-box;
1913
+ -webkit-line-clamp: 1;
1914
+ -webkit-box-orient: vertical;
1915
+ overflow: hidden;
1916
+ color: ${theme.colors["neutral-400"]};
1917
+ }
1908
1918
  `;
1909
1919
 
1910
1920
  const _jsxFileName$1d = "D:\\SSX\\Project\\Component Library\\sscomp\\src\\components\\BreadcrumbBar\\BreadcrumbBar.tsx";
@@ -1917,31 +1927,36 @@ const BreadcrumbBar = (props) => {
1917
1927
 
1918
1928
  return (
1919
1929
  React$1.createElement(BreadcrumbContainer, { ...props, __self: undefined, __source: {fileName: _jsxFileName$1d, lineNumber: 12}}
1920
- , pages && pages.length > 0 && pages.map((page,index) => (
1921
- React$1.createElement('div', { key: index, __self: undefined, __source: {fileName: _jsxFileName$1d, lineNumber: 14}}
1922
- , index < pages.length - 1 &&
1923
- React$1.createElement(React$1.Fragment, null
1924
- , index > 0 &&
1925
- React$1.createElement('svg', { width: "6", height: "9", viewBox: "0 0 6 9" , fill: "none", xmlns: "http://www.w3.org/2000/svg", __self: undefined, __source: {fileName: _jsxFileName$1d, lineNumber: 18}}
1926
- , React$1.createElement('path', { d: "M5.36003 4.02667L1.5867 0.260004C1.52472 0.197518 1.45099 0.147922 1.36975 0.114077C1.28851 0.0802308 1.20137 0.0628052 1.11336 0.0628052C1.02535 0.0628052 0.938217 0.0802308 0.856977 0.114077C0.775738 0.147922 0.702004 0.197518 0.640029 0.260004C0.515861 0.384912 0.446167 0.55388 0.446167 0.730004C0.446167 0.906128 0.515861 1.0751 0.640029 1.2L3.94003 4.53334L0.640029 7.83334C0.515861 7.95825 0.446167 8.12721 0.446167 8.30334C0.446167 8.47946 0.515861 8.64843 0.640029 8.77334C0.701772 8.83633 0.775402 8.88644 0.856652 8.92077C0.937902 8.9551 1.02516 8.97297 1.11336 8.97334C1.20157 8.97297 1.28882 8.9551 1.37007 8.92077C1.45132 8.88644 1.52495 8.83633 1.5867 8.77334L5.36003 5.00667C5.4277 4.94424 5.4817 4.86847 5.51864 4.78414C5.55558 4.69981 5.57465 4.60874 5.57465 4.51667C5.57465 4.4246 5.55558 4.33353 5.51864 4.2492C5.4817 4.16487 5.4277 4.0891 5.36003 4.02667V4.02667Z" , fill: "#A4BBDD", __self: undefined, __source: {fileName: _jsxFileName$1d, lineNumber: 19}})
1927
- )
1928
-
1929
- , React$1.createElement('span', { className: "paragraph1Regular", __self: undefined, __source: {fileName: _jsxFileName$1d, lineNumber: 22}}, React$1.createElement('a', { href: page.url, __self: undefined, __source: {fileName: _jsxFileName$1d, lineNumber: 22}}, page.label))
1930
- )
1931
-
1932
- , index == pages.length - 1 &&
1933
- React$1.createElement(React$1.Fragment, null
1934
- , index > 0 &&
1935
- React$1.createElement('svg', { width: "6", height: "9", viewBox: "0 0 6 9" , fill: "none", xmlns: "http://www.w3.org/2000/svg", __self: undefined, __source: {fileName: _jsxFileName$1d, lineNumber: 28}}
1936
- , React$1.createElement('path', { d: "M5.36003 4.02667L1.5867 0.260004C1.52472 0.197518 1.45099 0.147922 1.36975 0.114077C1.28851 0.0802308 1.20137 0.0628052 1.11336 0.0628052C1.02535 0.0628052 0.938217 0.0802308 0.856977 0.114077C0.775738 0.147922 0.702004 0.197518 0.640029 0.260004C0.515861 0.384912 0.446167 0.55388 0.446167 0.730004C0.446167 0.906128 0.515861 1.0751 0.640029 1.2L3.94003 4.53334L0.640029 7.83334C0.515861 7.95825 0.446167 8.12721 0.446167 8.30334C0.446167 8.47946 0.515861 8.64843 0.640029 8.77334C0.701772 8.83633 0.775402 8.88644 0.856652 8.92077C0.937902 8.9551 1.02516 8.97297 1.11336 8.97334C1.20157 8.97297 1.28882 8.9551 1.37007 8.92077C1.45132 8.88644 1.52495 8.83633 1.5867 8.77334L5.36003 5.00667C5.4277 4.94424 5.4817 4.86847 5.51864 4.78414C5.55558 4.69981 5.57465 4.60874 5.57465 4.51667C5.57465 4.4246 5.55558 4.33353 5.51864 4.2492C5.4817 4.16487 5.4277 4.0891 5.36003 4.02667Z" ,
1937
- fill: "#070B12", __self: undefined, __source: {fileName: _jsxFileName$1d, lineNumber: 29}})
1938
- )
1939
-
1940
- , React$1.createElement('span', { className: "paragraph1Regular", __self: undefined, __source: {fileName: _jsxFileName$1d, lineNumber: 33}}, page.label)
1941
- )
1942
-
1943
- )
1944
- ))
1930
+ , pages && pages.length > 0 && pages.map((page, index) => (
1931
+ React$1.createElement('div', { key: index, __self: undefined, __source: {fileName: _jsxFileName$1d, lineNumber: 14}}
1932
+ , index < pages.length - 1 &&
1933
+ React$1.createElement(React$1.Fragment, null
1934
+ , index > 0 &&
1935
+ React$1.createElement('svg', { width: "6", height: "9", viewBox: "0 0 6 9" , fill: "none",
1936
+ xmlns: "http://www.w3.org/2000/svg", __self: undefined, __source: {fileName: _jsxFileName$1d, lineNumber: 18}}
1937
+ , React$1.createElement('path', {
1938
+ d: "M5.36003 4.02667L1.5867 0.260004C1.52472 0.197518 1.45099 0.147922 1.36975 0.114077C1.28851 0.0802308 1.20137 0.0628052 1.11336 0.0628052C1.02535 0.0628052 0.938217 0.0802308 0.856977 0.114077C0.775738 0.147922 0.702004 0.197518 0.640029 0.260004C0.515861 0.384912 0.446167 0.55388 0.446167 0.730004C0.446167 0.906128 0.515861 1.0751 0.640029 1.2L3.94003 4.53334L0.640029 7.83334C0.515861 7.95825 0.446167 8.12721 0.446167 8.30334C0.446167 8.47946 0.515861 8.64843 0.640029 8.77334C0.701772 8.83633 0.775402 8.88644 0.856652 8.92077C0.937902 8.9551 1.02516 8.97297 1.11336 8.97334C1.20157 8.97297 1.28882 8.9551 1.37007 8.92077C1.45132 8.88644 1.52495 8.83633 1.5867 8.77334L5.36003 5.00667C5.4277 4.94424 5.4817 4.86847 5.51864 4.78414C5.55558 4.69981 5.57465 4.60874 5.57465 4.51667C5.57465 4.4246 5.55558 4.33353 5.51864 4.2492C5.4817 4.16487 5.4277 4.0891 5.36003 4.02667V4.02667Z" ,
1939
+ fill: "#A4BBDD", __self: undefined, __source: {fileName: _jsxFileName$1d, lineNumber: 20}})
1940
+ )
1941
+
1942
+ , React$1.createElement('span', { className: "paragraph1Regular", __self: undefined, __source: {fileName: _jsxFileName$1d, lineNumber: 25}}, React$1.createElement('a', { href: page.url, __self: undefined, __source: {fileName: _jsxFileName$1d, lineNumber: 25}}, page.label))
1943
+ )
1944
+
1945
+ , index == pages.length - 1 &&
1946
+ React$1.createElement(React$1.Fragment, null
1947
+ , index > 0 &&
1948
+ React$1.createElement('svg', { width: "6", height: "9", viewBox: "0 0 6 9" , fill: "none",
1949
+ xmlns: "http://www.w3.org/2000/svg", __self: undefined, __source: {fileName: _jsxFileName$1d, lineNumber: 31}}
1950
+ , React$1.createElement('path', {
1951
+ d: "M5.36003 4.02667L1.5867 0.260004C1.52472 0.197518 1.45099 0.147922 1.36975 0.114077C1.28851 0.0802308 1.20137 0.0628052 1.11336 0.0628052C1.02535 0.0628052 0.938217 0.0802308 0.856977 0.114077C0.775738 0.147922 0.702004 0.197518 0.640029 0.260004C0.515861 0.384912 0.446167 0.55388 0.446167 0.730004C0.446167 0.906128 0.515861 1.0751 0.640029 1.2L3.94003 4.53334L0.640029 7.83334C0.515861 7.95825 0.446167 8.12721 0.446167 8.30334C0.446167 8.47946 0.515861 8.64843 0.640029 8.77334C0.701772 8.83633 0.775402 8.88644 0.856652 8.92077C0.937902 8.9551 1.02516 8.97297 1.11336 8.97334C1.20157 8.97297 1.28882 8.9551 1.37007 8.92077C1.45132 8.88644 1.52495 8.83633 1.5867 8.77334L5.36003 5.00667C5.4277 4.94424 5.4817 4.86847 5.51864 4.78414C5.55558 4.69981 5.57465 4.60874 5.57465 4.51667C5.57465 4.4246 5.55558 4.33353 5.51864 4.2492C5.4817 4.16487 5.4277 4.0891 5.36003 4.02667Z" ,
1952
+ fill: "#070B12", __self: undefined, __source: {fileName: _jsxFileName$1d, lineNumber: 33}})
1953
+ )
1954
+
1955
+ , React$1.createElement('span', { className: "paragraph1Regular", __self: undefined, __source: {fileName: _jsxFileName$1d, lineNumber: 38}}, page.label)
1956
+ )
1957
+
1958
+ )
1959
+ ))
1945
1960
 
1946
1961
 
1947
1962
  )
@@ -22397,40 +22412,40 @@ const NewsCard = (props) => {
22397
22412
  };
22398
22413
 
22399
22414
  const TitleBarContainer$2 = styled.div`
22400
- background: ${theme.colors["neutral-900"]};
22415
+ background: ${props => (props.theme === 'light') ? theme.colors["neutral-100"] : theme.colors["neutral-900"]};
22401
22416
  padding: 11px 16px;
22402
22417
  border-radius: 8px;
22403
22418
  box-sizing: border-box;
22404
22419
  display: flex;
22405
22420
  align-items: center;
22406
22421
  justify-content: space-between;
22407
- height: 72px;
22422
+ min-height: 72px;
22408
22423
  gap: 16px;
22409
- color: ${theme.colors["neutral-50"]};
22410
-
22411
- &.light {
22412
- background: ${theme.colors["neutral-100"]};
22413
- color: ${theme.colors["neutral-900"]};
22414
- }
22415
-
22416
- &.dark {
22417
- background: ${theme.colors["neutral-900"]};
22418
- color: ${theme.colors["neutral-50"]};
22419
- }
22424
+ color: ${props => (props.theme === 'light') ? theme.colors["neutral-900"] : theme.colors["neutral-50"]};
22425
+ transition: 0.3s;
22426
+ flex-wrap: wrap;
22420
22427
 
22421
- @media (max-width: 720px) {
22428
+ /*@media (max-width: 720px) {
22422
22429
  flex-direction: column;
22423
22430
  height: fit-content;
22424
22431
  align-items: start;
22425
22432
  width: 100%;
22426
- }
22433
+ }*/
22427
22434
 
22428
22435
  div.tabs {
22429
22436
  display: flex;
22430
22437
  flex-direction: row;
22431
22438
  gap: 8px;
22432
- width: 100%;
22433
-
22439
+ width: fit-content;
22440
+
22441
+ @media (max-width: 425px) {
22442
+ width: 100% !important;
22443
+
22444
+ button{
22445
+ width: 100% !important;
22446
+ }
22447
+ }
22448
+
22434
22449
  button {
22435
22450
  background: transparent;
22436
22451
  border: 1px solid ${theme.colors["neutral-200"]};
@@ -22440,20 +22455,13 @@ const TitleBarContainer$2 = styled.div`
22440
22455
  flex-direction: row;
22441
22456
  place-content: center;
22442
22457
  cursor: pointer;
22443
- color: ${theme.colors.white};
22444
22458
  width: fit-content;
22445
-
22459
+ color: ${props => props.barTheme === 'light' ? theme.colors["neutral-900"] : theme.colors.white};
22460
+
22446
22461
  &.active{
22447
22462
  background:${theme.colors["neutral-200"]};
22448
22463
  color: ${theme.colors["neutral-900"]};
22449
22464
  }
22450
- &.light{
22451
- color: ${theme.colors["neutral-900"]};
22452
- }
22453
-
22454
- @media (max-width: 425px) {
22455
- width: 100%;
22456
- }
22457
22465
  }
22458
22466
  }
22459
22467
  `;
@@ -22479,67 +22487,88 @@ const _jsxFileName$R = "D:\\SSX\\Project\\Component Library\\sscomp\\src\\compon
22479
22487
  * Filter bar for news items on the news application
22480
22488
  */
22481
22489
  const NewsFilterBar = (props) => {
22482
- const {countries,outlets,selectedCountryFxn,selectedOutletFxn,initialOutlet,theme,labelOverrides,tabs,currentTab} = props;
22483
- const [windowWidth,setWindowWidth] = React$1.useState(720);
22484
- const [outletInitText,setOutletInitText] = React$1.useState('');
22485
- const [selectedTab,setSelectedTab] = React$1.useState('');
22490
+ const {
22491
+ countries,
22492
+ outlets,
22493
+ selectedCountryFxn,
22494
+ selectedOutletFxn,
22495
+ initialOutlet,
22496
+ theme,
22497
+ labelOverrides,
22498
+ tabs,
22499
+ currentTab,
22500
+ preselect
22501
+ } = props;
22502
+ const [windowWidth, setWindowWidth] = React$1.useState(720);
22503
+ const [outletInitText, setOutletInitText] = React$1.useState('');
22504
+ const [selectedTab, setSelectedTab] = React$1.useState('');
22486
22505
 
22487
22506
  React$1.useEffect(() => {
22488
22507
  setWindowWidth(window.innerWidth);
22489
- window.addEventListener('resize',function(){
22508
+ window.addEventListener('resize', function () {
22490
22509
  setWindowWidth(window.innerWidth);
22491
22510
  });
22492
22511
  }, []);
22493
22512
 
22494
- React$1.useEffect(()=>{
22495
- if (tabs && tabs.length > 0){
22513
+ React$1.useEffect(() => {
22514
+ if (tabs && tabs.length > 0) {
22496
22515
  setSelectedTab(tabs[0].label);
22497
22516
  if (currentTab) currentTab(tabs[0].label);
22498
22517
  }
22499
- },[]);
22518
+ }, []);
22500
22519
 
22501
22520
  React$1.useEffect(()=>{
22521
+ if (preselect && tabs){
22522
+ const pres = tabs.find(tab => tab.label.toLowerCase() === preselect.toLowerCase());
22523
+ if (pres) setSelectedTab(pres.label);
22524
+ }
22525
+ },[preselect]);
22526
+
22527
+ React$1.useEffect(() => {
22502
22528
  if (initialOutlet) setOutletInitText(initialOutlet);
22503
- },[initialOutlet]);
22529
+ }, [initialOutlet]);
22504
22530
 
22505
22531
  return (
22506
- React$1.createElement(TitleBarContainer$2, { className: theme, ...props, __self: undefined, __source: {fileName: _jsxFileName$R, lineNumber: 35}}
22507
- , React$1.createElement('div', { className: "tabs", __self: undefined, __source: {fileName: _jsxFileName$R, lineNumber: 36}}
22532
+ React$1.createElement(TitleBarContainer$2, { barTheme: theme, ...props, __self: undefined, __source: {fileName: _jsxFileName$R, lineNumber: 53}}
22533
+ , React$1.createElement('div', { className: "tabs", __self: undefined, __source: {fileName: _jsxFileName$R, lineNumber: 54}}
22508
22534
  , tabs ?
22509
22535
  React$1.createElement(React$1.Fragment, null
22510
22536
  , tabs.map((tab, index) => (
22511
- React$1.createElement('button', { className: `paragraph2Medium tab-button ${tab.label === selectedTab ? 'active' : ''} ${theme}`, key: index, onClick: ()=>{
22512
- if (selectedTab !== tab.label){
22537
+ React$1.createElement('button', {
22538
+ className: `paragraph2Medium tab-button ${tab.label === selectedTab ? 'active' : ''} ${theme}`,
22539
+ key: index, onClick: () => {
22540
+ if (selectedTab !== tab.label) {
22513
22541
  setSelectedTab(tab.label);
22514
22542
  if (currentTab) currentTab(tab.label);
22515
22543
  }
22516
- }, __self: undefined, __source: {fileName: _jsxFileName$R, lineNumber: 40}}
22544
+ }, __self: undefined, __source: {fileName: _jsxFileName$R, lineNumber: 58}}
22517
22545
  , tab.label
22518
22546
  )
22519
22547
  ))
22520
22548
  )
22521
- : React$1.createElement('h4', { className: windowWidth <= 720 ? "paragraph2Medium" : "heading6Medium", __self: undefined, __source: {fileName: _jsxFileName$R, lineNumber: 50}}, _optionalChain$u([labelOverrides, 'optionalAccess', _ => _.title]) || 'News')
22549
+ :
22550
+ React$1.createElement('h4', { className: windowWidth <= 720 ? "paragraph2Medium" : "heading6Medium", __self: undefined, __source: {fileName: _jsxFileName$R, lineNumber: 71}}, _optionalChain$u([labelOverrides, 'optionalAccess', _ => _.title]) || 'News')
22522
22551
 
22523
22552
  )
22524
- , React$1.createElement('div', {__self: undefined, __source: {fileName: _jsxFileName$R, lineNumber: 53}}
22525
- , (tabs && _optionalChain$u([tabs, 'access', _2 => _2.find, 'call', _3 => _3(tab => tab.label === selectedTab), 'optionalAccess', _4 => _4.actions])) || React$1.createElement(NewsFilters, {__self: undefined, __source: {fileName: _jsxFileName$R, lineNumber: 54}}
22553
+ , React$1.createElement('div', {__self: undefined, __source: {fileName: _jsxFileName$R, lineNumber: 74}}
22554
+ , (tabs && _optionalChain$u([tabs, 'access', _2 => _2.find, 'call', _3 => _3(tab => tab.label === selectedTab), 'optionalAccess', _4 => _4.actions])) || React$1.createElement(NewsFilters, {__self: undefined, __source: {fileName: _jsxFileName$R, lineNumber: 75}}
22526
22555
  , countries && countries.length > 0 &&
22527
- React$1.createElement('div', { className: "filterContainer", __self: undefined, __source: {fileName: _jsxFileName$R, lineNumber: 56}}
22556
+ React$1.createElement('div', { className: "filterContainer", __self: undefined, __source: {fileName: _jsxFileName$R, lineNumber: 77}}
22528
22557
  , React$1.createElement(DropdownList, { options: countries, returnedSelection: (selCtr) => {
22529
22558
  if (selectedCountryFxn) {
22530
22559
  selectedCountryFxn(selCtr);
22531
22560
  }
22532
22561
  }, placeholder: _optionalChain$u([labelOverrides, 'optionalAccess', _5 => _5.selectCountryPlaceholder]) || "Select Country",
22533
- searchable: true, inputName: "country", __self: undefined, __source: {fileName: _jsxFileName$R, lineNumber: 57}})
22562
+ searchable: true, inputName: "country", __self: undefined, __source: {fileName: _jsxFileName$R, lineNumber: 78}})
22534
22563
  )
22535
22564
 
22536
22565
  , outlets && outlets.length > 0 &&
22537
- React$1.createElement('div', { className: "filterContainer", __self: undefined, __source: {fileName: _jsxFileName$R, lineNumber: 66}}
22566
+ React$1.createElement('div', { className: "filterContainer", __self: undefined, __source: {fileName: _jsxFileName$R, lineNumber: 87}}
22538
22567
  , React$1.createElement(DropdownList, { options: outlets, initialText: outletInitText,
22539
22568
  returnedSelection: (selOutlet) => {
22540
22569
  if (selectedOutletFxn) selectedOutletFxn(selOutlet);
22541
22570
  }, placeholder: _optionalChain$u([labelOverrides, 'optionalAccess', _6 => _6.selectOutletPlaceholder]) || "Select Outlet",
22542
- searchable: true, inputName: "outlet", __self: undefined, __source: {fileName: _jsxFileName$R, lineNumber: 67}})
22571
+ searchable: true, inputName: "outlet", __self: undefined, __source: {fileName: _jsxFileName$R, lineNumber: 88}})
22543
22572
  )
22544
22573
 
22545
22574
  )
@@ -22600,23 +22629,19 @@ const NewsSourceTag = (props) => {
22600
22629
  };
22601
22630
 
22602
22631
  const TitleBarContainer$1 = styled.div`
22603
- padding: 11px 16px;
22604
- border-radius: 8px;
22605
- display: flex;
22606
- align-items: center;
22607
- height: 72px;
22608
- box-sizing: border-box;
22609
- &.light{
22610
- background:${theme.colors["neutral-100"]};
22611
- color: ${theme.colors["neutral-900"]};
22612
- }
22613
- &.dark{
22614
- background:${theme.colors["neutral-900"]};
22615
- color: ${theme.colors["neutral-50"]};
22616
- }
22617
- @media (max-width: 720px) {
22618
- height: 48px;
22619
- }
22632
+ padding: 11px 16px;
22633
+ border-radius: 8px;
22634
+ display: flex;
22635
+ align-items: center;
22636
+ height: 72px;
22637
+ box-sizing: border-box;
22638
+ background: ${props => props.barTheme === 'light' ? theme.colors["neutral-100"] : theme.colors["neutral-900"]};
22639
+ color: ${props => props.barTheme === 'light' ? theme.colors["neutral-900"] : theme.colors["neutral-50"]};
22640
+ transition: 0.3s;
22641
+
22642
+ @media (max-width: 720px) {
22643
+ height: 48px;
22644
+ }
22620
22645
  `;
22621
22646
 
22622
22647
  const _jsxFileName$P = "D:\\SSX\\Project\\Component Library\\sscomp\\src\\components\\NewsTitleBar\\NewsTitleBar.tsx";
@@ -22635,7 +22660,7 @@ const NewsTitleBar = (props) => {
22635
22660
  }, []);
22636
22661
 
22637
22662
  return (
22638
- React$1.createElement(TitleBarContainer$1, { className: theme, ...props, __self: undefined, __source: {fileName: _jsxFileName$P, lineNumber: 21}}
22663
+ React$1.createElement(TitleBarContainer$1, { barTheme: theme, ...props, __self: undefined, __source: {fileName: _jsxFileName$P, lineNumber: 21}}
22639
22664
  , React$1.createElement('h5', { className: windowWidth <= 720 ? "paragraph2Medium" : "heading6Medium", __self: undefined, __source: {fileName: _jsxFileName$P, lineNumber: 22}}, title)
22640
22665
  )
22641
22666
  )
@@ -24255,17 +24280,48 @@ const SideModal = (props) => {
24255
24280
  )
24256
24281
  };
24257
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
+
24258
24317
  const SmallNewsCardContainer = styled.div`
24259
24318
  padding: 16px;
24260
24319
  border-radius: 8px;
24261
24320
  background: ${theme.colors.white};
24262
24321
  display: flex;
24263
24322
  align-items: start;
24264
- position:relative;
24323
+ position: relative;
24265
24324
  gap: 16px;
24266
- a{
24267
- text-decoration: none;
24268
- }
24269
24325
  `;
24270
24326
 
24271
24327
  const FeaturedImage = styled.img`
@@ -24277,23 +24333,28 @@ const FeaturedImage = styled.img`
24277
24333
  `;
24278
24334
 
24279
24335
  const NewsTitle = styled.h6`
24280
- color: ${theme.colors["neutral-900"]};
24281
24336
  margin: 0;
24282
- display: -webkit-box;
24283
- -webkit-line-clamp: 2;
24284
- -webkit-box-orient: vertical;
24285
- overflow:hidden;
24286
24337
 
24338
+ a {
24339
+ display: -webkit-box;
24340
+ -webkit-line-clamp: 2;
24341
+ -webkit-box-orient: vertical;
24342
+ overflow: hidden;
24343
+ color: ${theme.colors["neutral-900"]};
24344
+ text-decoration: none;
24345
+ }
24287
24346
  `;
24288
24347
 
24289
24348
  const TitleSource = styled.div`
24290
24349
  display: flex;
24291
24350
  flex-direction: column;
24292
24351
  gap: 16px;
24293
- .title{
24352
+
24353
+ .title {
24294
24354
  height: 69px;
24295
24355
  }
24296
- h6{
24356
+
24357
+ h6 {
24297
24358
  `;
24298
24359
 
24299
24360
  const SourceDate = styled.div`
@@ -24301,7 +24362,8 @@ const SourceDate = styled.div`
24301
24362
  border-radius: 8px;
24302
24363
  display: inline-flex;
24303
24364
  width: fit-content;
24304
- .tag{
24365
+
24366
+ .tag {
24305
24367
  color: ${theme.colors["neutral-900"]};
24306
24368
  padding: 8px;
24307
24369
  display: inline-flex;
@@ -24310,12 +24372,14 @@ const SourceDate = styled.div`
24310
24372
  white-space: nowrap;
24311
24373
  overflow-x: hidden;
24312
24374
  }
24313
- .tag:first-of-type{
24375
+
24376
+ .tag:first-of-type {
24314
24377
  border-right: 2px solid ${theme.colors["neutral-100"]};
24315
24378
  width: fit-content;
24316
24379
  white-space: nowrap;
24317
24380
  overflow-x: hidden;
24318
24381
  }
24382
+
24319
24383
  .tag .source-text {
24320
24384
  text-overflow: ellipsis;
24321
24385
  overflow: hidden;
@@ -24336,49 +24400,77 @@ const SmallNewsCard = (props) => {
24336
24400
  const {title, date, source, sourceCountryFlagUrl, featuredImgUrl, storyUrl, navigationOverride} = props;
24337
24401
 
24338
24402
  return (
24339
- React$1.createElement(SmallNewsCardContainer, {__self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 16}}
24340
- , React$1.createElement('a', { href: storyUrl, onClick: (e) => {
24341
- if (navigationOverride) {
24342
- e.preventDefault();
24343
- navigationOverride({title, date, source, sourceCountryFlagUrl, featuredImgUrl, storyUrl});
24344
- }
24345
- }, __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 17}}, React$1.createElement(FeaturedImage, { src: featuredImgUrl, alt: title, onError: (e) => {
24346
- e.currentTarget.src = img$6;
24347
- e.currentTarget.srcset = img$6;
24348
- }, loading: "lazy", __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 22}}))
24349
- , React$1.createElement(TitleSource, {__self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 26}}
24350
- , React$1.createElement('div', { className: "title", __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 27}}
24351
- , React$1.createElement('a', { href: storyUrl, onClick: (e) => {
24352
- if (navigationOverride) {
24353
- e.preventDefault();
24354
- navigationOverride({title, date, source, sourceCountryFlagUrl, featuredImgUrl, storyUrl});
24355
- }
24356
- }, __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 28}}, React$1.createElement(NewsTitle, { className: "heading6Medium", __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 33}}, title))
24357
- )
24358
- /*<SourceDate>
24359
- <div className="tag">
24360
- <span style={{marginRight: '8px'}}>
24361
- <img src={sourceCountryFlagUrl} alt="Source flag" onError={(e) => {
24362
- e.currentTarget.src = brokenSrc
24363
- }}/>
24364
- </span>
24365
- <span className="captionBook source-text">{source}</span>
24366
- </div>
24367
- <div className="tag"><span className="captionBook">{date}</span></div>
24368
- </SourceDate>*/
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
+ )
24369
24426
 
24370
- , React$1.createElement(SourceDate, {__self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 47}}
24371
- , React$1.createElement('div', { className: "tag paragraph1Regular" , __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 48}}
24372
- , React$1.createElement('span', { style: {marginRight: 8, width: 21}, __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 49}}
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}}
24373
24431
  , React$1.createElement('img', { src: sourceCountryFlagUrl, alt: "Source flag" , onError: (e) => {
24374
24432
  e.currentTarget.src = img$5;
24375
- }, __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 50}})
24433
+ }, __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 44}})
24376
24434
  )
24377
- , React$1.createElement('span', { className: "source-text captionBook" , __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 54}}
24435
+ , React$1.createElement('span', { className: "source-text captionBook" , __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 48}}
24378
24436
  , source
24379
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))
24440
+ )
24441
+ )
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
+ )
24459
+ )
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}}
24463
+ , React$1.createElement('img', { src: sourceCountryFlagUrl, alt: "Source flag" , onError: (e) => {
24464
+ e.currentTarget.src = img$5;
24465
+ }, __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 76}})
24466
+ )
24467
+ , React$1.createElement('span', { className: "source-text captionBook" , __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 80}}
24468
+ , source
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))
24472
+ )
24380
24473
  )
24381
- , React$1.createElement('div', { className: "tag paragraph1Regular" , __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 58}}, React$1.createElement('span', { className: "captionBook", __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 58}}, date))
24382
24474
  )
24383
24475
  )
24384
24476
  )
@@ -38785,22 +38877,23 @@ const IconButton = (props) => {
38785
38877
  )
38786
38878
  };
38787
38879
 
38788
- const containerQuery = //language=css
38789
- `
38790
- .vc-container{
38791
- container-type: inline-size;
38792
- }
38793
-
38794
- @container (max-width:425px) {
38795
- .card-body{
38796
- flex-direction: column;
38880
+ const customCSS =
38881
+ //language=css
38882
+ `
38883
+ .vc-container {
38884
+ container-type: inline-size;
38797
38885
  }
38798
-
38799
- .video-thumbnail{
38800
- width: 100% !important;
38886
+
38887
+ @container (max-width:425px) {
38888
+ .card-body {
38889
+ flex-direction: column;
38890
+ }
38891
+
38892
+ .video-thumbnail {
38893
+ width: 100% !important;
38894
+ }
38801
38895
  }
38802
- }
38803
- `;
38896
+ `;
38804
38897
 
38805
38898
  const Card = styled.div`
38806
38899
  background: ${theme.colors.white};
@@ -38810,14 +38903,14 @@ const Card = styled.div`
38810
38903
  display: flex;
38811
38904
  cursor: pointer;
38812
38905
  container-type: inline-size;
38813
-
38906
+
38814
38907
  .card-body {
38815
38908
  width: 100%;
38816
38909
  display: flex;
38817
38910
  //flex-direction: row;
38818
38911
  gap: 24px;
38819
38912
  justify-content: start;
38820
-
38913
+
38821
38914
  /*@media (max-width: 425px) {
38822
38915
  flex-direction: column;
38823
38916
  }*/
@@ -38833,7 +38926,7 @@ const Card = styled.div`
38833
38926
  background-position: center;
38834
38927
  background-size: cover;
38835
38928
  background-repeat: no-repeat;
38836
-
38929
+
38837
38930
  /*@media (max-width: 425px) {
38838
38931
  width: 100%;
38839
38932
  }*/
@@ -38850,20 +38943,21 @@ const Card = styled.div`
38850
38943
  border-bottom-right-radius: 8px;
38851
38944
  }
38852
38945
  }
38853
-
38854
- .video-details{
38946
+
38947
+ .video-details {
38855
38948
  display: flex;
38856
38949
  flex-direction: column;
38857
38950
  justify-content: space-between;
38858
38951
  gap: 16px;
38859
-
38860
- .date{
38952
+
38953
+ .date {
38861
38954
  width: fit-content;
38862
38955
  background: ${theme.colors["neutral-50"]};
38863
38956
  border-radius: 8px;
38864
38957
  padding: 8px;
38865
38958
  }
38866
- .video-title p{
38959
+
38960
+ .video-title p {
38867
38961
  overflow: hidden;
38868
38962
  display: -webkit-box;
38869
38963
  -webkit-line-clamp: 3;
@@ -38873,28 +38967,32 @@ const Card = styled.div`
38873
38967
  `;
38874
38968
 
38875
38969
  const _jsxFileName = "D:\\SSX\\Project\\Component Library\\sscomp\\src\\components\\VideoCard\\VideoCard.tsx";
38970
+ /**
38971
+ * Card to display thumbnail image and title of a video with a link to the page that hosts the actual video.<br>
38972
+ * This is not a video player, hence will not play the video
38973
+ */
38876
38974
  const VideoCard = ({date,onClick,thumbnailUrl,videoTitle}) => {
38877
38975
  return (
38878
38976
  React$1.createElement(React$1.Fragment, null
38879
- , React$1.createElement('style', {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 9}}, containerQuery)
38880
- , React$1.createElement(Card, { onClick: onClick, role: "button", className: "vc-container", 'aria-label': videoTitle, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 10}}
38881
- , React$1.createElement('div', { className: "card-body", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 11}}
38882
- , React$1.createElement('div', { className: "video-thumbnail", style: {backgroundImage:`url(${thumbnailUrl})`}, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 12}}
38883
- , React$1.createElement('div', { className: "label", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 13}}
38884
- , 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: 14}}
38977
+ , React$1.createElement('style', {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 13}}, customCSS)
38978
+ , React$1.createElement(Card, { onClick: onClick, role: "button", className: "vc-container", 'aria-label': videoTitle, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 14}}
38979
+ , React$1.createElement('div', { className: "card-body", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 15}}
38980
+ , React$1.createElement('div', { className: "video-thumbnail", style: {backgroundImage:`url(${thumbnailUrl})`}, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 16}}
38981
+ , React$1.createElement('div', { className: "label", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 17}}
38982
+ , 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}}
38885
38983
  , React$1.createElement('path', {
38886
38984
  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" ,
38887
- fill: "currentColor", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 15}})
38985
+ fill: "currentColor", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 19}})
38888
38986
  )
38889
- , React$1.createElement('span', { className: "paragraph1Regular", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 19}}, "Video")
38987
+ , React$1.createElement('span', { className: "paragraph1Regular", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 23}}, "Video")
38890
38988
  )
38891
38989
  )
38892
- , React$1.createElement('div', { className: "video-details", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 22}}
38893
- , React$1.createElement('div', { className: "date", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 23}}
38894
- , React$1.createElement('span', { className: "paragraph1Regular", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 24}}, dayjs(date).format('MMM D, YYYY'))
38990
+ , React$1.createElement('div', { className: "video-details", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 26}}
38991
+ , React$1.createElement('div', { className: "date", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 27}}
38992
+ , React$1.createElement('span', { className: "paragraph1Regular", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 28}}, dayjs(date).format('MMM D, YYYY'))
38895
38993
  )
38896
- , React$1.createElement('div', { className: "video-title", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 26}}
38897
- , React$1.createElement('p', { className: "subheadingRegular", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 27}}, videoTitle)
38994
+ , React$1.createElement('div', { className: "video-title", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 30}}
38995
+ , React$1.createElement('p', { className: "subheadingRegular", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 31}}, videoTitle)
38898
38996
  )
38899
38997
  )
38900
38998
  )