Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

DOP-4623: Dark mode for Cards #1114

Merged
merged 12 commits into from
Jun 10, 2024
Merged

DOP-4623: Dark mode for Cards #1114

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
7d388f3
updating
mayaraman19 Jun 3, 2024
f13ce9c
Merge branch 'main' of https://github.com/mongodb/snooty into DOP-4623-b
mayaraman19 Jun 4, 2024
0639d24
dark mode icon support
mayaraman19 Jun 5, 2024
d494b01
iconsrc
mayaraman19 Jun 5, 2024
c2fc41a
merge conflicts???? :sob:
mayaraman19 Jun 6, 2024
063e1d4
packages again?
mayaraman19 Jun 6, 2024
8e652d5
snapshots
mayaraman19 Jun 6, 2024
b785739
removing DriversIndexTiles.js
mayaraman19 Jun 6, 2024
3df16da
cleaning up control flow
mayaraman19 Jun 7, 2024
0f96e5f
merge conflicts
mayaraman19 Jun 7, 2024
f624de2
fixing merge conflicts
mayaraman19 Jun 10, 2024
1b5bdb5
package lock
mayaraman19 Jun 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
158 changes: 78 additions & 80 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@
"@leafygreen-ui/box": "^3.0.6",
"@leafygreen-ui/button": "^21.0.5",
"@leafygreen-ui/callout": "^5.0.0",
"@leafygreen-ui/card": "^6.0.1",
"@leafygreen-ui/card": "^10.0.7",
"@leafygreen-ui/checkbox": "^12.0.8",
"@leafygreen-ui/code": "^11.0.0",
"@leafygreen-ui/combobox": "^6.0.0",
Expand Down
22 changes: 20 additions & 2 deletions src/components/Card/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import { withPrefix, navigate } from 'gatsby';
import styled from '@emotion/styled';
import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
import LeafyGreenCard from '@leafygreen-ui/card';
import { css, cx } from '@leafygreen-ui/emotion';
import { Body } from '@leafygreen-ui/typography';
Expand Down Expand Up @@ -132,10 +133,11 @@ const Card = ({
page,
nodeData: {
children,
options: { cta, headline, icon, 'icon-alt': iconAlt, tag, url },
options: { cta, headline, icon, 'icon-dark': iconDark, 'icon-alt': iconAlt, tag, url },
},
}) => {
const template = page?.options?.template;
const { darkMode } = useDarkMode();

const isLanding = template === 'landing';

Expand All @@ -155,11 +157,26 @@ const Card = ({
isLanding && !isLargeIconStyle ? landingStyles : '', // must come after other styles to override
];

let iconSrc;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(nit) I wonder if by reducing the nested if statements and using ternary operators, we could make the code cleaner and more readable. Maybe something like;

let iconSrc;

if (icon) {
  const isPath = icon.includes('/');
  const getIcon = `${icon}${darkMode ? '_inverse' : ''}`;
  const webImageURL = `https://webimages.mongodb.com/_com_assets/icons/${getIcon}.svg`;

  iconSrc = isPath
    ? (darkMode && iconDark ? withPrefix(iconDark) : withPrefix(icon))
    : webImageURL;
}

If you don't agree, please feel free to ignore it as this is not a blocker.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

beautiful! thank you :)

if (icon) {
if (icon.includes('/')) {
if (darkMode && iconDark) {
iconSrc = withPrefix(iconDark);
} else {
iconSrc = withPrefix(icon);
}
} else {
// image comes from web branding, not path to image in content repo
const getIcon = `${icon}${darkMode ? '_inverse' : ''}`;
iconSrc = `https://webimages.mongodb.com/_com_assets/icons/${getIcon}.svg`;
}
}

return (
<LeafyGreenCard className={cx(styling)} onClick={url ? () => onCardClick(url) : undefined}>
{icon && (
<img
src={withPrefix(icon)}
src={iconSrc}
alt={iconAlt}
width={imgSize}
height={imgSize}
Expand Down Expand Up @@ -204,6 +221,7 @@ Card.propTypes = {
cta: PropTypes.string,
headline: PropTypes.string,
icon: PropTypes.string,
'icon-dark': PropTypes.string,
'icon-alt': PropTypes.string,
tag: PropTypes.string,
url: PropTypes.string,
Expand Down
10 changes: 5 additions & 5 deletions tests/unit/__snapshots__/Card.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,16 +7,16 @@ exports[`renders correctly 1`] = `
-webkit-transition: 150ms ease-in-out;
transition: 150ms ease-in-out;
transition-property: border,box-shadow;
border: 1px solid #E8EDEB;
box-shadow: 0 4px 10px -4px rgba(0,30,43,0.3);
background-color: white;
color: #1C2D38;
border-radius: 24px;
font-family: 'Euclid Circular A',Akzidenz,'Helvetica Neue',Helvetica,Arial,sans-serif;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

omg thank god, get that dark-sided name outta here

font-family: 'Euclid Circular A','Helvetica Neue',Helvetica,Arial,sans-serif;
font-size: 13px;
line-height: 20px;
padding: 24px;
min-height: 68px;
border: 1px solid #E8EDEB;
box-shadow: 0 4px 10px -4px rgba(0,30,43,0.3);
background-color: #FFFFFF;
color: #1C2D38;
cursor: pointer;
display: -webkit-box;
display: -webkit-flex;
Expand Down
10 changes: 5 additions & 5 deletions tests/unit/__snapshots__/CardGroup.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,16 +55,16 @@ exports[`renders correctly 1`] = `
-webkit-transition: 150ms ease-in-out;
transition: 150ms ease-in-out;
transition-property: border,box-shadow;
border: 1px solid #E8EDEB;
box-shadow: 0 4px 10px -4px rgba(0,30,43,0.3);
background-color: white;
color: #1C2D38;
border-radius: 24px;
font-family: 'Euclid Circular A',Akzidenz,'Helvetica Neue',Helvetica,Arial,sans-serif;
font-family: 'Euclid Circular A','Helvetica Neue',Helvetica,Arial,sans-serif;
font-size: 13px;
line-height: 20px;
padding: 24px;
min-height: 68px;
border: 1px solid #E8EDEB;
box-shadow: 0 4px 10px -4px rgba(0,30,43,0.3);
background-color: #FFFFFF;
color: #1C2D38;
cursor: pointer;
display: -webkit-box;
display: -webkit-flex;
Expand Down
20 changes: 10 additions & 10 deletions tests/unit/__snapshots__/CardRef.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,16 +53,16 @@ exports[`card correctly with and without url 1`] = `
-webkit-transition: 150ms ease-in-out;
transition: 150ms ease-in-out;
transition-property: border,box-shadow;
border: 1px solid #E8EDEB;
box-shadow: 0 4px 10px -4px rgba(0,30,43,0.3);
background-color: white;
color: #1C2D38;
border-radius: 24px;
font-family: 'Euclid Circular A',Akzidenz,'Helvetica Neue',Helvetica,Arial,sans-serif;
font-family: 'Euclid Circular A','Helvetica Neue',Helvetica,Arial,sans-serif;
font-size: 13px;
line-height: 20px;
padding: 24px;
min-height: 68px;
border: 1px solid #E8EDEB;
box-shadow: 0 4px 10px -4px rgba(0,30,43,0.3);
background-color: #FFFFFF;
color: #1C2D38;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
Expand Down Expand Up @@ -201,16 +201,16 @@ exports[`card correctly with and without url 1`] = `
-webkit-transition: 150ms ease-in-out;
transition: 150ms ease-in-out;
transition-property: border,box-shadow;
border: 1px solid #E8EDEB;
box-shadow: 0 4px 10px -4px rgba(0,30,43,0.3);
background-color: white;
color: #1C2D38;
border-radius: 24px;
font-family: 'Euclid Circular A',Akzidenz,'Helvetica Neue',Helvetica,Arial,sans-serif;
font-family: 'Euclid Circular A','Helvetica Neue',Helvetica,Arial,sans-serif;
font-size: 13px;
line-height: 20px;
padding: 24px;
min-height: 68px;
border: 1px solid #E8EDEB;
box-shadow: 0 4px 10px -4px rgba(0,30,43,0.3);
background-color: #FFFFFF;
color: #1C2D38;
cursor: pointer;
display: -webkit-box;
display: -webkit-flex;
Expand Down
10 changes: 5 additions & 5 deletions tests/unit/__snapshots__/Chapter.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,16 +7,16 @@ exports[`renders correctly 1`] = `
-webkit-transition: 150ms ease-in-out;
transition: 150ms ease-in-out;
transition-property: border,box-shadow;
border: 1px solid #E8EDEB;
box-shadow: 0 4px 10px -4px rgba(0,30,43,0.3);
background-color: white;
color: #1C2D38;
border-radius: 24px;
font-family: 'Euclid Circular A',Akzidenz,'Helvetica Neue',Helvetica,Arial,sans-serif;
font-family: 'Euclid Circular A','Helvetica Neue',Helvetica,Arial,sans-serif;
font-size: 13px;
line-height: 20px;
padding: 24px;
min-height: 68px;
border: 1px solid #E8EDEB;
box-shadow: 0 4px 10px -4px rgba(0,30,43,0.3);
background-color: #FFFFFF;
color: #1C2D38;
background-color: #FFFFFF;
border: 1px solid #F9FBFA;
padding: 32px 24px;
Expand Down
Loading
Loading