Skip to content

Commit 65ef797

Browse files
ritzoramaritzorama
authored
Merge pull request #1117 from FaheemOnHub/migrate/OwnLearningCard
Migration of own-learning card from sistent to cloud-ui
2 parents b4577ed + 5c832c4 commit 65ef797

File tree

2 files changed

+49
-180
lines changed

2 files changed

+49
-180
lines changed

‎src/custom/LearningCard/LearningCard.tsx‎

Lines changed: 48 additions & 148 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,5 @@
1-
import React, { useState } from 'react';
2-
import { Grid2, Typography } from '../../base';
3-
import { ExternalLinkIcon } from '../../icons';
4-
import { Modal, ModalBody, ModalButtonPrimary, ModalButtonSecondary, ModalFooter } from '../Modal';
5-
import { CopyToClipboard } from '../ResourceDetailFormatters/Component';
1+
import React from 'react';
2+
import { Typography } from '../../base';
63
import {
74
Card2,
85
CardActive,
@@ -12,8 +9,7 @@ import {
129
CardLink,
1310
CardParent,
1411
CardSubdata,
15-
CardWrapper,
16-
OwnLearningCard
12+
CardWrapper
1713
} from './style';
1814

1915
interface Tutorial {
@@ -35,43 +31,17 @@ interface Props {
3531
path?: string;
3632
courseCount: number;
3733
courseType: string;
38-
orgId?: string;
39-
modalContent?: string;
4034
}
4135

42-
const OptionalLink: React.FC<React.PropsWithChildren<{ path?: string; isExternal?: boolean }>> = ({
43-
path,
44-
children,
45-
isExternal
46-
}) => {
36+
const OptionalLink: React.FC<React.PropsWithChildren<{ path?: string }>> = ({ path, children }) => {
4737
if (!path) {
4838
return <>{children}</>;
4939
}
5040

51-
return (
52-
<CardLink
53-
href={path}
54-
target={isExternal ? '_blank' : undefined}
55-
rel={isExternal ? 'noopener noreferrer' : undefined}
56-
>
57-
{children}
58-
</CardLink>
59-
);
41+
return <CardLink href={path}>{children}</CardLink>;
6042
};
6143

62-
const LearningCard: React.FC<Props> = ({
63-
tutorial,
64-
path,
65-
courseCount,
66-
courseType,
67-
orgId,
68-
modalContent
69-
}) => {
70-
const isCreateLearningPath = courseType === 'learning-card';
71-
const [modalOpen, setModalOpen] = useState(false);
72-
73-
const handleModalOpen = () => setModalOpen(true);
74-
const handleModalClose = () => setModalOpen(false);
44+
const LearningCard: React.FC<Props> = ({ tutorial, path, courseCount, courseType }) => {
7545
return (
7646
<CardWrapper>
7747
{tutorial.frontmatter.disabled === 'yes' ? (
@@ -98,120 +68,50 @@ const LearningCard: React.FC<Props> = ({
9868
</CardParent>
9969
</Card2>
10070
) : (
101-
<>
102-
{isCreateLearningPath ? (
103-
<OwnLearningCard onClick={handleModalOpen} style={{ cursor: 'pointer' }}>
104-
<CardParent style={{ borderTop: `5px solid ${tutorial.frontmatter.themeColor}` }}>
105-
<div>
106-
<CardHead>
107-
<h3>
108-
{tutorial.frontmatter.title
109-
? tutorial.frontmatter.title
110-
: tutorial.frontmatter.courseTitle}
111-
</h3>
112-
{isCreateLearningPath && path && (
113-
<ExternalLinkIcon width="24px" height="24px" />
114-
)}
115-
{tutorial.frontmatter.status ? (
116-
<p>
117-
<span>New</span>
118-
</p>
119-
) : null}
120-
</CardHead>
121-
<CardDesc>
122-
<p className="summary">{tutorial.frontmatter.description}</p>
123-
</CardDesc>
124-
<CardImage>
125-
<img src={tutorial.frontmatter.cardImage} />
126-
</CardImage>
127-
</div>
128-
</CardParent>
129-
</OwnLearningCard>
130-
) : (
131-
<OptionalLink path={path} isExternal={isCreateLearningPath}>
132-
<CardActive>
133-
<CardParent style={{ borderTop: `5px solid ${tutorial.frontmatter.themeColor}` }}>
134-
<div>
135-
<CardHead style={{ flexDirection: 'column' }}>
136-
<Typography variant="body1" color="textSecondary">
137-
{tutorial.frontmatter.type}
138-
</Typography>
139-
<h3 style={{ margin: '0.2rem 0.1rem' }}>
140-
{tutorial.frontmatter.title
141-
? tutorial.frontmatter.title
142-
: tutorial.frontmatter.courseTitle}
143-
</h3>
71+
<OptionalLink path={path}>
72+
<CardActive>
73+
<CardParent style={{ borderTop: `5px solid ${tutorial.frontmatter.themeColor}` }}>
74+
<div>
75+
<CardHead style={{ flexDirection: 'column' }}>
76+
<Typography variant="body1" color="textSecondary">
77+
{tutorial.frontmatter.type}
78+
</Typography>
79+
<h3 style={{ margin: '0.2rem 0.1rem' }}>
80+
{tutorial.frontmatter.title
81+
? tutorial.frontmatter.title
82+
: tutorial.frontmatter.courseTitle}
83+
</h3>
14484

145-
{tutorial.frontmatter.status ? (
146-
<p>
147-
<span>New</span>
148-
</p>
149-
) : null}
150-
</CardHead>
151-
<CardDesc>
152-
<p className="summary">{tutorial.frontmatter.description}</p>
153-
</CardDesc>
154-
{!isCreateLearningPath && (
155-
<CardSubdata className="card-subdata">
156-
<p>
157-
{courseCount} {courseType}
158-
{courseCount > 1 ? 's' : ''}
159-
</p>
160-
<p>
161-
Level:{' '}
162-
{tutorial?.frontmatter?.level
163-
? tutorial.frontmatter.level.charAt(0).toUpperCase() +
164-
tutorial.frontmatter.level.slice(1)
165-
: ''}
166-
</p>
167-
</CardSubdata>
168-
)}
169-
<CardImage>
170-
<img src={tutorial.frontmatter.cardImage} />
171-
</CardImage>
172-
</div>
173-
</CardParent>
174-
</CardActive>
175-
</OptionalLink>
176-
)}
177-
</>
85+
{tutorial.frontmatter.status ? (
86+
<p>
87+
<span>New</span>
88+
</p>
89+
) : null}
90+
</CardHead>
91+
<CardDesc>
92+
<p className="summary">{tutorial.frontmatter.description}</p>
93+
</CardDesc>
94+
<CardSubdata className="card-subdata">
95+
<p>
96+
{courseCount} {courseType}
97+
{courseCount > 1 ? 's' : ''}
98+
</p>
99+
<p>
100+
Level:{' '}
101+
{tutorial?.frontmatter?.level
102+
? tutorial.frontmatter.level.charAt(0).toUpperCase() +
103+
tutorial.frontmatter.level.slice(1)
104+
: ''}
105+
</p>
106+
</CardSubdata>
107+
<CardImage>
108+
<img src={tutorial.frontmatter.cardImage} />
109+
</CardImage>
110+
</div>
111+
</CardParent>
112+
</CardActive>
113+
</OptionalLink>
178114
)}
179-
180-
<Modal
181-
open={modalOpen}
182-
closeModal={handleModalClose}
183-
title={tutorial.frontmatter.title || tutorial.frontmatter.courseTitle}
184-
maxWidth="sm"
185-
>
186-
<ModalBody>
187-
<Typography variant="body1">{modalContent}</Typography>
188-
{orgId && (
189-
<Grid2 container direction="row" alignItems="center" spacing={1}>
190-
<Grid2>
191-
<Typography variant="body1" color="textSecondary">
192-
Your Organization ID: {orgId}
193-
</Typography>
194-
</Grid2>
195-
<Grid2>
196-
<CopyToClipboard data={orgId} />
197-
</Grid2>
198-
</Grid2>
199-
)}
200-
</ModalBody>
201-
<ModalFooter variant="filled">
202-
<ModalButtonSecondary onClick={handleModalClose}>Close</ModalButtonSecondary>
203-
{path && (
204-
<ModalButtonPrimary
205-
onClick={() => {
206-
window.open(path, '_blank');
207-
handleModalClose();
208-
}}
209-
>
210-
Visit Docs
211-
</ModalButtonPrimary>
212-
)}
213-
</ModalFooter>
214-
</Modal>
215115
</CardWrapper>
216116
);
217117
};

‎src/custom/LearningCard/style.tsx‎

Lines changed: 1 addition & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -19,36 +19,6 @@ const CardActive = styled('div')(({ theme }) => ({
1919
backgroundColor: theme.palette.mode === 'light' ? WHITE : BLACK
2020
}));
2121

22-
const OwnLearningCard = styled('div')(({ theme }) => ({
23-
cursor: 'pointer',
24-
transition: 'all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s',
25-
position: 'relative',
26-
overflow: 'hidden',
27-
'&:hover': {
28-
boxShadow: `${theme.palette.background.brand?.default} 0px 0px 19px 6px`
29-
},
30-
background: `linear-gradient(135deg,
31-
rgba(255, 255, 255, 0.85) 0%,
32-
rgba(248, 250, 252, 0.9) 50%,
33-
rgba(241, 245, 249, 0.85) 100%)`,
34-
'&::before': {
35-
content: '""',
36-
position: 'absolute',
37-
top: 0,
38-
left: 0,
39-
right: 0,
40-
bottom: 0,
41-
background: `repeating-linear-gradient(
42-
45deg,
43-
transparent,
44-
transparent 15px,
45-
rgba(148, 163, 184, 0.1) 15px,
46-
rgba(148, 163, 184, 0.1) 30px
47-
)`,
48-
pointerEvents: 'none'
49-
}
50-
}));
51-
5222
const CardLink = styled('a')({
5323
color: 'black',
5424
textDecoration: 'none'
@@ -135,6 +105,5 @@ export {
135105
CardLink,
136106
CardParent,
137107
CardSubdata,
138-
CardWrapper,
139-
OwnLearningCard
108+
CardWrapper
140109
};

0 commit comments

Comments
 (0)