Andal.LND/frontend-app-learner-dashboard
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: course card banner radius

Browse Source
This commit is contained in:
Leangseu Kim
2022-08-22 10:42:19 -04:00
committed by leangseu-edx
parent 2c43678c9a
commit 5ce3fbb8d7
3 changed files with 115 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/containers/CourseCard/CourseCard.scss Normal file
View File

@@ -0,0 +1,16 @@
.course-card {
.card {
overflow: hidden;
.pgn__card-image-cap {
border-bottom-left-radius: 0 !important;
}
}
.course-card-banners {
> .alert {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
}
}

120
src/containers/CourseCard/__snapshots__/index.test.jsx.snap
View File

@@ -8,65 +8,73 @@ exports[`CourseCard component snapshot 1`] = `
<Card
orientation="horizontal"
>
<Card.ImageCap
src="hooks.bannerUrl"
srcAlt={
Object {
"formatted": Object {
"defaultMessage": "Course thumbnail",
"description": "Course card banner alt-text",
"id": "learner-dash.courseCard.bannerAlt",
},
}
}
/>
<Card.Body>
<Card.Header
actions={
<CourseCardMenu
cardId="test-card-id"
/>
}
title={
<span
data-testid="CourseCardTitle"
>
hooks.title
</span>
}
/>
<Card.Section>
<CourseCardDetails
cardId="test-card-id"
/>
</Card.Section>
<Card.Footer
orientation="vertical"
textElement={
<RelatedProgramsBadge
cardId="test-card-id"
/>
}
<div
className="d-flex flex-column w-100"
>
<div
className="d-flex"
>
<CourseCardActions
<Card.ImageCap
src="hooks.bannerUrl"
srcAlt={
Object {
"formatted": Object {
"defaultMessage": "Course thumbnail",
"description": "Course card banner alt-text",
"id": "learner-dash.courseCard.bannerAlt",
},
}
}
/>
<Card.Body>
<Card.Header
actions={
<CourseCardMenu
cardId="test-card-id"
/>
}
title={
<span
data-testid="CourseCardTitle"
>
hooks.title
</span>
}
/>
<Card.Section>
<CourseCardDetails
cardId="test-card-id"
/>
</Card.Section>
<Card.Footer
orientation="vertical"
textElement={
<RelatedProgramsBadge
cardId="test-card-id"
/>
}
>
<CourseCardActions
cardId="test-card-id"
/>
</Card.Footer>
</Card.Body>
</div>
<div
className="course-card-banners"
data-testid="CourseCardBanners"
>
<CourseBanner
cardId="test-card-id"
/>
</Card.Footer>
</Card.Body>
<EntitlementBanner
cardId="test-card-id"
/>
<CertificateBanner
cardId="test-card-id"
/>
</div>
</div>
</Card>
<div
className="course-card-banners"
data-testid="CourseCardBanners"
>
<CourseBanner
cardId="test-card-id"
/>
<EntitlementBanner
cardId="test-card-id"
/>
<CertificateBanner
cardId="test-card-id"
/>
</div>
</div>
`;

64
src/containers/CourseCard/index.jsx
View File

@@ -17,41 +17,47 @@ import CourseCardActions from './components/CourseCardActions';
import messages from './messages';
import CourseCardDetails from './components/CourseCardDetails';
import './CourseCard.scss';
export const CourseCard = ({ cardId }) => {
const {
isEnrolled,
title,
bannerUrl,
formatMessage,
} = useCardData({ cardId });
isEnrolled, title, bannerUrl, formatMessage,
} = useCardData({
cardId,
});
return (
<div className="mb-4.5 course-card" data-testid="CourseCard">
<Card orientation="horizontal">
<Card.ImageCap
src={bannerUrl}
srcAlt={formatMessage(messages.bannerAlt)}
/>
<Card.Body>
<Card.Header
title={<span data-testid="CourseCardTitle">{title}</span>}
actions={<CourseCardMenu cardId={cardId} />}
/>
<Card.Section>
<CourseCardDetails cardId={cardId} />
</Card.Section>
<Card.Footer
orientation="vertical"
textElement={<RelatedProgramsBadge cardId={cardId} />}
>
<CourseCardActions cardId={cardId} />
</Card.Footer>
</Card.Body>
<div className="d-flex flex-column w-100">
<div className="d-flex">
<Card.ImageCap
src={bannerUrl}
srcAlt={formatMessage(messages.bannerAlt)}
/>
<Card.Body>
<Card.Header
title={<span data-testid="CourseCardTitle">{title}</span>}
actions={<CourseCardMenu cardId={cardId} />}
/>
<Card.Section>
<CourseCardDetails cardId={cardId} />
</Card.Section>
<Card.Footer
orientation="vertical"
textElement={<RelatedProgramsBadge cardId={cardId} />}
>
<CourseCardActions cardId={cardId} />
</Card.Footer>
</Card.Body>
</div>
<div className="course-card-banners" data-testid="CourseCardBanners">
<CourseBanner cardId={cardId} />
<EntitlementBanner cardId={cardId} />
{isEnrolled && <CertificateBanner cardId={cardId} />}
</div>
</div>
</Card>
<div className="course-card-banners" data-testid="CourseCardBanners">
<CourseBanner cardId={cardId} />
<EntitlementBanner cardId={cardId} />
{isEnrolled && <CertificateBanner cardId={cardId} />}
</div>
</div>
);
};