Skip to content

Commit 50b6844

Browse files
amitamrutiyaamitamrutiya
authored
Merge branch 'master' into visiblitymenu
2 parents ad9f4ec + fe9d911 commit 50b6844

22 files changed

Lines changed: 855 additions & 57 deletions

File tree

‎.github/workflows/preview-site.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ jobs:
1414
uses: actions/checkout@v2.3.1
1515

1616
- name: Download Site dir
17-
uses: dawidd6/action-download-artifact@v2
17+
uses: dawidd6/action-download-artifact@v6
1818
with:
1919
github_token: ${{ secrets.GH_ACCESS_TOKEN }}
2020
workflow: build-and-preview-site.yml

‎src/custom/CatalogDetail/ActionButton.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -76,15 +76,15 @@ const ActionButtons: React.FC<ActionButtonsProps> = ({
7676
backgroundColor: 'transparent',
7777
border: `1px solid ${theme.palette.border.normal}`,
7878
gap: '10px',
79-
color: charcoal[10]
79+
color: theme.palette.text.default
8080
}}
8181
onClick={() =>
8282
cleanedType === RESOURCE_TYPES.FILTERS
8383
? downloadFilter(details.id, details.name)
8484
: downloadYaml(details.pattern_file, details.name)
8585
}
8686
>
87-
<Download width={24} height={24} fill={charcoal[10]} />
87+
<Download width={24} height={24} fill={theme.palette.icon.default} />
8888
Download
8989
</ActionButton>
9090

@@ -104,7 +104,7 @@ const ActionButtons: React.FC<ActionButtonsProps> = ({
104104
<CircularProgress size={24} color={'inherit'} />
105105
) : (
106106
<>
107-
<CopyIcon width={24} height={24} fill={charcoal[10]} />
107+
<CopyIcon width={24} height={24} fill={theme.palette.icon.default} />
108108
Clone
109109
</>
110110
)}

‎src/custom/CatalogDetail/OverviewSection.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,8 @@ interface OverviewSectionProps {
2323
fontFamily?: string;
2424
// eslint-disable-next-line @typescript-eslint/no-explicit-any
2525
userProfile?: any;
26+
showShareAction: boolean;
27+
handleShare: () => void;
2628
}
2729

2830
const OverviewSection: React.FC<OverviewSectionProps> = ({
@@ -37,7 +39,9 @@ const OverviewSection: React.FC<OverviewSectionProps> = ({
3739
classes,
3840
handleCopyUrl,
3941
fontFamily,
40-
userProfile
42+
userProfile,
43+
showShareAction,
44+
handleShare
4145
}) => {
4246
return (
4347
<OverviewContainer>
@@ -58,6 +62,8 @@ const OverviewSection: React.FC<OverviewSectionProps> = ({
5862
title={title}
5963
getUrl={getUrl}
6064
handleCopyUrl={handleCopyUrl}
65+
showShareAction={showShareAction}
66+
handleShare={handleShare}
6167
/>
6268
</div>
6369
<Grid container spacing={2}>

‎src/custom/CatalogDetail/RightPanel.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,8 @@ interface RightPanelProps {
2626
technologySVGSubpath: string;
2727
orgName: string;
2828
fetchingOrgError: boolean;
29+
showShareAction: boolean;
30+
handleShare: () => void;
2931
}
3032

3133
const RightPanel: React.FC<RightPanelProps> = ({
@@ -47,7 +49,9 @@ const RightPanel: React.FC<RightPanelProps> = ({
4749
technologySVGPath,
4850
technologySVGSubpath,
4951
orgName,
50-
fetchingOrgError
52+
fetchingOrgError,
53+
showShareAction,
54+
handleShare
5155
}) => {
5256
const cleanedType = type.replace('my-', '').replace(/s$/, '');
5357
const { data: userProfile } = useGetUserProfileByIdQuery({
@@ -69,6 +73,8 @@ const RightPanel: React.FC<RightPanelProps> = ({
6973
handleCopyUrl={handleCopyUrl}
7074
fontFamily={fontFamily}
7175
userProfile={userProfile}
76+
showShareAction={showShareAction}
77+
handleShare={handleShare}
7278
/>
7379
{showCaveats && <CaveatsSection details={details} />}
7480
<RelatedDesigns

‎src/custom/CatalogDetail/SocialSharePopper.tsx‎

Lines changed: 43 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,19 @@
11
import { Box, IconButton, Menu, MenuItem } from '@mui/material';
22
import React, { useState } from 'react';
33
import { FacebookShareButton, LinkedinShareButton, TwitterShareButton } from 'react-share';
4+
import { Typography } from '../../base';
45
import { ChainIcon, FacebookIcon, LinkedinIcon, ShareIcon, TwitterIcon } from '../../icons';
56
import { useTheme } from '../../theme';
67
import { Pattern } from '../CustomCatalog/CustomCard';
78
import { CustomTooltip } from '../CustomTooltip';
89
import { ErrorBoundary } from '../ErrorBoundary';
9-
import { CopyShareIconWrapper, VisibilityChip } from './style';
10+
import {
11+
CopyShareIconWrapper,
12+
ShareButton,
13+
ShareButtonGroup,
14+
ShareSideButton,
15+
VisibilityChip
16+
} from './style';
1017

1118
interface SocialSharePopperProps {
1219
details: Pattern;
@@ -15,6 +22,8 @@ interface SocialSharePopperProps {
1522
title: string;
1623
getUrl: (type: string, id: string) => string;
1724
handleCopyUrl: (type: string, name: string, id: string) => void;
25+
showShareAction: boolean;
26+
handleShare: () => void;
1827
}
1928

2029
const SocialSharePopper: React.FC<SocialSharePopperProps> = ({
@@ -23,7 +32,9 @@ const SocialSharePopper: React.FC<SocialSharePopperProps> = ({
2332
cardId,
2433
title,
2534
getUrl,
26-
handleCopyUrl
35+
handleCopyUrl,
36+
showShareAction,
37+
handleShare
2738
}) => {
2839
const theme = useTheme();
2940
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
@@ -50,15 +61,36 @@ const SocialSharePopper: React.FC<SocialSharePopperProps> = ({
5061
{details?.visibility}
5162
</VisibilityChip>
5263

53-
{details?.visibility !== 'private' && (
54-
<CustomTooltip title="Copy Link" placement="top" arrow>
55-
<IconButton
56-
sx={{ borderRadius: '0.1rem', padding: '0.5rem' }}
57-
onClick={() => handleCopyUrl(cleanedType, details?.name, details?.id)}
58-
>
59-
<ChainIcon height={'24'} width={'24'} fill={theme.palette.icon.secondary} />
60-
</IconButton>
61-
</CustomTooltip>
64+
{showShareAction ? (
65+
<ShareButtonGroup variant="contained">
66+
<CustomTooltip title="Change access and visibility">
67+
<ShareButton variant="contained" onClick={handleShare}>
68+
<Typography>Share</Typography>
69+
</ShareButton>
70+
</CustomTooltip>
71+
<CustomTooltip title="Copy link to design">
72+
<ShareSideButton
73+
variant="contained"
74+
size="small"
75+
onClick={() => handleCopyUrl(cleanedType, details?.name, details?.id)}
76+
>
77+
<ChainIcon height={'24'} width={'24'} fill={theme.palette.icon.inverse} />
78+
</ShareSideButton>
79+
</CustomTooltip>
80+
</ShareButtonGroup>
81+
) : (
82+
<>
83+
{details?.visibility !== 'private' && (
84+
<CustomTooltip title="Copy Link" placement="top" arrow>
85+
<IconButton
86+
sx={{ borderRadius: '0.1rem', padding: '0.5rem' }}
87+
onClick={() => handleCopyUrl(cleanedType, details?.name, details?.id)}
88+
>
89+
<ChainIcon height={'24'} width={'24'} fill={theme.palette.icon.secondary} />
90+
</IconButton>
91+
</CustomTooltip>
92+
)}
93+
</>
6294
)}
6395

6496
{(details?.visibility === 'published' || details?.visibility === 'public') && (

‎src/custom/CatalogDetail/style.tsx‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Link, ListItemButton, Paper, Typography } from '../../base';
1+
import { Button, ButtonGroup, Link, ListItemButton, Paper, Typography } from '../../base';
22
import { styled } from '../../theme';
33
import { Theme } from './types';
44

@@ -265,3 +265,24 @@ export const RedirectLink = styled(Link)(({ theme }) => ({
265265
textDecoration: 'none',
266266
cursor: 'pointer'
267267
}));
268+
269+
export const ShareButtonGroup = styled(ButtonGroup)({
270+
boxShadow: 'none',
271+
border: 'none',
272+
outline: 'none',
273+
height: '76%'
274+
});
275+
276+
export const ShareButton = styled(Button)(({ theme }) => ({
277+
backgroundColor: theme.palette.background.brand?.default,
278+
color: 'white',
279+
border: 'none',
280+
borderRadius: '0.5rem 0px 0px 0.5rem'
281+
}));
282+
283+
export const ShareSideButton = styled(Button)(({ theme }) => ({
284+
backgroundColor: theme.palette.background.brand?.default,
285+
color: 'white',
286+
border: 'none',
287+
borderRadius: '0px 0.5rem 0.5rem 0px'
288+
}));

‎src/custom/CustomTooltip/customTooltip.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ function CustomTooltip({
2121
fontSize,
2222
fontWeight = 400,
2323
variant = 'standard',
24-
bgColor = '#333333',
24+
bgColor = '#141414',
2525
...props
2626
}: CustomTooltipProps): JSX.Element {
2727
return (
@@ -35,8 +35,7 @@ function CustomTooltip({
3535
fontWeight: { fontWeight },
3636
borderRadius: '0.5rem',
3737
padding: variant === 'standard' ? '0.9rem' : '0.5rem 0.75rem',
38-
boxShadow:
39-
'rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px'
38+
boxShadow: 'rgba(0, 0, 0, 0.6) 0px 4px 10px, rgba(0, 0, 0, 0.5) 0px 2px 4px'
4039
}
4140
},
4241
popper: {

‎src/custom/Modal/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@ import { CustomTooltip } from '../CustomTooltip';
1010
interface ModalProps extends DialogProps {
1111
closeModal: () => void;
1212
title: string;
13-
headerIcon: React.ReactNode;
14-
reactNode: React.ReactNode;
13+
headerIcon?: React.ReactNode;
14+
reactNode?: React.ReactNode;
1515
}
1616

1717
interface ModalFooterProps {

0 commit comments

Comments
 (0)