@secondstaxorg/sscomp 2.0.78 → 2.0.81
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/bundle.css +2 -0
- package/dist/index.css +39 -0
- package/dist/index.es.css +39 -0
- package/dist/index.es.js +89 -90
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +228 -179
- package/dist/index.js.map +1 -1
- package/dist/index.min.css +39 -0
- package/dist/index.min.js +154 -155
- package/dist/index.min.js.map +1 -1
- package/package.json +1 -1
- package/types/components/NewsFilterBar/style.d.ts +3 -1
- package/types/components/NewsFilterBar/type.d.ts +4 -0
- package/types/components/NewsTitleBar/style.d.ts +3 -1
- package/types/components/SmallNewsCard/SmallNewsCard.d.ts +1 -0
- package/types/components/VideoCard/VideoCard.d.ts +5 -0
- package/types/components/VideoCard/type.d.ts +12 -0
package/dist/index.js
CHANGED
|
@@ -1874,37 +1874,47 @@ const BankSelector = (props) => {
|
|
|
1874
1874
|
};
|
|
1875
1875
|
|
|
1876
1876
|
const BreadcrumbContainer = styled.div`
|
|
1877
|
-
|
|
1878
|
-
|
|
1879
|
-
|
|
1880
|
-
|
|
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
|
-
|
|
1897
|
-
|
|
1898
|
-
|
|
1899
|
-
|
|
1900
|
-
|
|
1901
|
-
|
|
1902
|
-
|
|
1903
|
-
|
|
1904
|
-
|
|
1905
|
-
|
|
1906
|
-
|
|
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
|
-
|
|
1922
|
-
|
|
1923
|
-
|
|
1924
|
-
|
|
1925
|
-
|
|
1926
|
-
|
|
1927
|
-
|
|
1928
|
-
|
|
1929
|
-
|
|
1930
|
-
|
|
1931
|
-
|
|
1932
|
-
|
|
1933
|
-
|
|
1934
|
-
|
|
1935
|
-
|
|
1936
|
-
|
|
1937
|
-
|
|
1938
|
-
|
|
1939
|
-
|
|
1940
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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:
|
|
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 {
|
|
22483
|
-
|
|
22484
|
-
|
|
22485
|
-
|
|
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, {
|
|
22507
|
-
, React$1.createElement('div', { className: "tabs", __self: undefined, __source: {fileName: _jsxFileName$R, lineNumber:
|
|
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', {
|
|
22512
|
-
|
|
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:
|
|
22544
|
+
}, __self: undefined, __source: {fileName: _jsxFileName$R, lineNumber: 58}}
|
|
22517
22545
|
, tab.label
|
|
22518
22546
|
)
|
|
22519
22547
|
))
|
|
22520
22548
|
)
|
|
22521
|
-
:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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
|
-
|
|
22604
|
-
|
|
22605
|
-
|
|
22606
|
-
|
|
22607
|
-
|
|
22608
|
-
|
|
22609
|
-
|
|
22610
|
-
|
|
22611
|
-
|
|
22612
|
-
|
|
22613
|
-
|
|
22614
|
-
|
|
22615
|
-
|
|
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, {
|
|
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
|
)
|
|
@@ -24263,9 +24288,6 @@ const SmallNewsCardContainer = styled.div`
|
|
|
24263
24288
|
align-items: start;
|
|
24264
24289
|
position:relative;
|
|
24265
24290
|
gap: 16px;
|
|
24266
|
-
a{
|
|
24267
|
-
text-decoration: none;
|
|
24268
|
-
}
|
|
24269
24291
|
`;
|
|
24270
24292
|
|
|
24271
24293
|
const FeaturedImage = styled.img`
|
|
@@ -24277,13 +24299,15 @@ const FeaturedImage = styled.img`
|
|
|
24277
24299
|
`;
|
|
24278
24300
|
|
|
24279
24301
|
const NewsTitle = styled.h6`
|
|
24280
|
-
color: ${theme.colors["neutral-900"]};
|
|
24281
24302
|
margin: 0;
|
|
24282
|
-
|
|
24283
|
-
|
|
24284
|
-
|
|
24285
|
-
|
|
24286
|
-
|
|
24303
|
+
a{
|
|
24304
|
+
display: -webkit-box;
|
|
24305
|
+
-webkit-line-clamp: 2;
|
|
24306
|
+
-webkit-box-orient: vertical;
|
|
24307
|
+
overflow:hidden;
|
|
24308
|
+
color: ${theme.colors["neutral-900"]};
|
|
24309
|
+
text-decoration: none;
|
|
24310
|
+
}
|
|
24287
24311
|
`;
|
|
24288
24312
|
|
|
24289
24313
|
const TitleSource = styled.div`
|
|
@@ -24336,49 +24360,67 @@ const SmallNewsCard = (props) => {
|
|
|
24336
24360
|
const {title, date, source, sourceCountryFlagUrl, featuredImgUrl, storyUrl, navigationOverride} = props;
|
|
24337
24361
|
|
|
24338
24362
|
return (
|
|
24339
|
-
React$1.createElement(
|
|
24340
|
-
, React$1.createElement(
|
|
24341
|
-
|
|
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}}
|
|
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}}
|
|
24351
24366
|
, React$1.createElement('a', { href: storyUrl, onClick: (e) => {
|
|
24352
24367
|
if (navigationOverride) {
|
|
24353
24368
|
e.preventDefault();
|
|
24354
24369
|
navigationOverride({title, date, source, sourceCountryFlagUrl, featuredImgUrl, storyUrl});
|
|
24355
24370
|
}
|
|
24356
|
-
}, __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber:
|
|
24357
|
-
|
|
24358
|
-
|
|
24359
|
-
|
|
24360
|
-
|
|
24361
|
-
|
|
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>*/
|
|
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
|
+
)
|
|
24369
24377
|
|
|
24370
|
-
|
|
24371
|
-
, React$1.createElement(
|
|
24372
|
-
, React$1.createElement('
|
|
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}}
|
|
24373
24382
|
, React$1.createElement('img', { src: sourceCountryFlagUrl, alt: "Source flag" , onError: (e) => {
|
|
24374
24383
|
e.currentTarget.src = img$5;
|
|
24375
|
-
}, __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber:
|
|
24384
|
+
}, __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 36}})
|
|
24376
24385
|
)
|
|
24377
|
-
|
|
24386
|
+
, React$1.createElement('span', { className: "source-text captionBook" , __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 40}}
|
|
24378
24387
|
, source
|
|
24379
24388
|
)
|
|
24389
|
+
)
|
|
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
|
+
)
|
|
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)
|
|
24409
|
+
)
|
|
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}}
|
|
24414
|
+
, React$1.createElement('img', { src: sourceCountryFlagUrl, alt: "Source flag" , onError: (e) => {
|
|
24415
|
+
e.currentTarget.src = img$5;
|
|
24416
|
+
}, __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 68}})
|
|
24417
|
+
)
|
|
24418
|
+
, React$1.createElement('span', { className: "source-text captionBook" , __self: undefined, __source: {fileName: _jsxFileName$C, lineNumber: 72}}
|
|
24419
|
+
, source
|
|
24420
|
+
)
|
|
24421
|
+
)
|
|
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))
|
|
24380
24423
|
)
|
|
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
24424
|
)
|
|
24383
24425
|
)
|
|
24384
24426
|
)
|
|
@@ -38792,17 +38834,18 @@ const Card = styled.div`
|
|
|
38792
38834
|
gap: 8px;
|
|
38793
38835
|
display: flex;
|
|
38794
38836
|
cursor: pointer;
|
|
38837
|
+
container-type: inline-size;
|
|
38795
38838
|
|
|
38796
38839
|
.card-body {
|
|
38797
38840
|
width: 100%;
|
|
38798
38841
|
display: flex;
|
|
38799
|
-
flex-direction: row;
|
|
38842
|
+
//flex-direction: row;
|
|
38800
38843
|
gap: 24px;
|
|
38801
38844
|
justify-content: start;
|
|
38802
38845
|
|
|
38803
|
-
|
|
38846
|
+
/*@media (max-width: 425px) {
|
|
38804
38847
|
flex-direction: column;
|
|
38805
|
-
}
|
|
38848
|
+
}*/
|
|
38806
38849
|
}
|
|
38807
38850
|
|
|
38808
38851
|
.video-thumbnail {
|
|
@@ -38816,9 +38859,9 @@ const Card = styled.div`
|
|
|
38816
38859
|
background-size: cover;
|
|
38817
38860
|
background-repeat: no-repeat;
|
|
38818
38861
|
|
|
38819
|
-
|
|
38862
|
+
/*@media (max-width: 425px) {
|
|
38820
38863
|
width: 100%;
|
|
38821
|
-
}
|
|
38864
|
+
}*/
|
|
38822
38865
|
|
|
38823
38866
|
div.label {
|
|
38824
38867
|
color: ${theme.colors.white};
|
|
@@ -38855,26 +38898,32 @@ const Card = styled.div`
|
|
|
38855
38898
|
`;
|
|
38856
38899
|
|
|
38857
38900
|
const _jsxFileName = "D:\\SSX\\Project\\Component Library\\sscomp\\src\\components\\VideoCard\\VideoCard.tsx";
|
|
38901
|
+
/**
|
|
38902
|
+
* Card to display thumbnail image and title of a video with a link to the page that hosts the actual video.<br>
|
|
38903
|
+
* This is not a video player, hence will not play the video
|
|
38904
|
+
*/
|
|
38858
38905
|
const VideoCard = ({date,onClick,thumbnailUrl,videoTitle}) => {
|
|
38859
38906
|
return (
|
|
38860
|
-
React$1.createElement(
|
|
38861
|
-
, React$1.createElement(
|
|
38862
|
-
, React$1.createElement('div', { className: "
|
|
38863
|
-
, React$1.createElement('div', { className: "
|
|
38864
|
-
, React$1.createElement('
|
|
38865
|
-
, React$1.createElement('
|
|
38866
|
-
|
|
38867
|
-
|
|
38907
|
+
React$1.createElement(React$1.Fragment, null
|
|
38908
|
+
, React$1.createElement(Card, { onClick: onClick, role: "button", className: "vc-container", 'aria-label': videoTitle, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 14}}
|
|
38909
|
+
, React$1.createElement('div', { className: "card-body", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 15}}
|
|
38910
|
+
, React$1.createElement('div', { className: "video-thumbnail", style: {backgroundImage:`url(${thumbnailUrl})`}, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 16}}
|
|
38911
|
+
, React$1.createElement('div', { className: "label", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 17}}
|
|
38912
|
+
, 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}}
|
|
38913
|
+
, React$1.createElement('path', {
|
|
38914
|
+
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" ,
|
|
38915
|
+
fill: "currentColor", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 19}})
|
|
38916
|
+
)
|
|
38917
|
+
, React$1.createElement('span', { className: "paragraph1Regular", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 23}}, "Video")
|
|
38868
38918
|
)
|
|
38869
|
-
, React$1.createElement('span', { className: "paragraph1Regular", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 17}}, "Video")
|
|
38870
|
-
)
|
|
38871
|
-
)
|
|
38872
|
-
, React$1.createElement('div', { className: "video-details", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 20}}
|
|
38873
|
-
, React$1.createElement('div', { className: "date", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 21}}
|
|
38874
|
-
, React$1.createElement('span', { className: "paragraph1Regular", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 22}}, dayjs(date).format('MMM D, YYYY'))
|
|
38875
38919
|
)
|
|
38876
|
-
, React$1.createElement('div', { className: "video-
|
|
38877
|
-
, React$1.createElement('
|
|
38920
|
+
, React$1.createElement('div', { className: "video-details", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 26}}
|
|
38921
|
+
, React$1.createElement('div', { className: "date", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 27}}
|
|
38922
|
+
, React$1.createElement('span', { className: "paragraph1Regular", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 28}}, dayjs(date).format('MMM D, YYYY'))
|
|
38923
|
+
)
|
|
38924
|
+
, React$1.createElement('div', { className: "video-title", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 30}}
|
|
38925
|
+
, React$1.createElement('p', { className: "subheadingRegular", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 31}}, videoTitle)
|
|
38926
|
+
)
|
|
38878
38927
|
)
|
|
38879
38928
|
)
|
|
38880
38929
|
)
|