Merge branch 'DOP-4883' of github.com:mongodb/snooty into DOP-4883

mongodb · Oct 1, 2024 · d76df15 · d76df15
2 parents 928ae3f + 6834a09
commit d76df15
Show file tree

Hide file tree

Showing 9 changed files with 934 additions and 85 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -103,7 +103,7 @@
     "@leafygreen-ui/typography": "^18.3.0",
     "@loadable/component": "^5.14.1",
     "@mdb/consistent-nav": "^2.2.0",
-    "@mdb/flora": "^1.5.6",
+    "@mdb/flora": "1.14.2",
     "@mdx-js/react": "^2.2.1",
     "abort-controller": "^3.0.0",
     "adm-zip": "^0.5.9",

diff --git a/src/components/ActionBar/SearchInput.js b/src/components/ActionBar/SearchInput.js
@@ -15,7 +15,7 @@ import debounce from '../../utils/debounce';
 import { isBrowser } from '../../utils/is-browser';
 import { SuspenseHelper } from '../SuspenseHelper';
 import { getCurrLocale } from '../../utils/locale';
-import { searchIconStyling, searchInputStyling, StyledInputContainer } from './styles';
+import { searchIconStyling, searchInputStyling, StyledInputContainer, StyledSearchBoxRef } from './styles';
 import { ShortcutIcon, SparkleIcon } from './SparkIcon';
 const Chatbot = lazy(() => import('mongodb-chatbot-ui'));
 const SearchMenu = lazy(() => import('./SearchMenu'));
@@ -208,26 +208,27 @@ const SearchInput = ({ className, slug }) => {
     <StyledInputContainer
       className={cx(className)}
       mobileSearchActive={mobileSearchActive}
-      ref={searchBoxRef}
       onKeyDown={handleSearchBoxKeyDown}
     >
-      <LGSearchInput
-        aria-label="Search MongoDB Docs"
-        className={searchInputStyling({ mobileSearchActive })}
-        value={searchValue}
-        placeholder={isMobile ? PLACEHOLDER_TEXT_MOBILE : PLACEHOLDER_TEXT}
-        onChange={(e) => {
-          setSearchValue(e.target.value);
-        }}
-        onClick={() => {
-          setIsOpen(!!searchValue.length);
-        }}
-        onSubmit={(e) => {
-          inputRef.current?.blur();
-          setIsOpen(false);
-        }}
-        ref={inputRef}
-      />
+      <StyledSearchBoxRef ref={searchBoxRef}>
+        <LGSearchInput
+          aria-label="Search MongoDB Docs"
+          className={searchInputStyling({ mobileSearchActive })}
+          value={searchValue}
+          placeholder={isMobile ? PLACEHOLDER_TEXT_MOBILE : PLACEHOLDER_TEXT}
+          onChange={(e) => {
+            setSearchValue(e.target.value);
+          }}
+          onClick={() => {
+            setIsOpen(!!searchValue.length);
+          }}
+          onSubmit={(e) => {
+            inputRef.current?.blur();
+            setIsOpen(false);
+          }}
+          ref={inputRef}
+        />
+      </StyledSearchBoxRef>
       {isMedium && mobileSearchActive && (
         <Link
           className={cx(

diff --git a/src/components/ActionBar/styles.js b/src/components/ActionBar/styles.js
@@ -156,7 +156,6 @@ export const StyledInputContainer = styled.div`
 
   @media ${theme.screenSize.mediumAndUp} {
     width: ${({ sidenav }) => (sidenav ? '70' : '100')}%;
-    padding-right: ${theme.size.medium};
   }
 
   ${(props) => {
@@ -169,8 +168,9 @@ export const StyledInputContainer = styled.div`
       z-index: 40;
       max-width: unset;
       left: ${theme.size.medium};
+      column-gap: ${theme.size.medium};
 
-      > form {
+      form {
         width: 100%;
         margin-right: ${theme.size.medium};
       }
@@ -179,6 +179,11 @@ export const StyledInputContainer = styled.div`
   }}
 `;
 
+// Used to ensure dropdown is same width as input
+export const StyledSearchBoxRef = styled.div`
+  width: 100%;
+`;
+
 export const searchInputStyling = ({ mobileSearchActive }) => css`
   ${displayNone.onMedium};
 
@@ -207,7 +212,7 @@ export const ActionsBox = styled('div')`
   column-gap: ${theme.size.default};
   position: relative;
   top: 0;
-  padding-right: ${theme.size.large};
+  padding: 0 ${theme.size.large} 0 ${theme.size.medium};
   justify-self: flex-end;
   grid-column: -2/-1;
 

diff --git a/src/components/Banner/Banner.js b/src/components/Banner/Banner.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { palette } from '@leafygreen-ui/palette';
-import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
 import styled from '@emotion/styled';
 import LeafyBanner, { Variant as LeafyVariant } from '@leafygreen-ui/banner';
 import ComponentFactory from '../ComponentFactory';
@@ -14,21 +13,114 @@ export const alertMap = {
   success: LeafyVariant.Success,
 };
 
+const styleMapLight = {
+  info: {
+    backgroundColor: palette.blue.light3,
+    color: palette.blue.dark2,
+    borderColor: palette.blue.light2,
+    linkColor: palette.blue.dark3,
+    beforeColor: palette.blue.base,
+    iconColor: palette.blue.base,
+  },
+  warning: {
+    backgroundColor: palette.yellow.light3,
+    color: palette.yellow.dark2,
+    borderColor: palette.yellow.light2,
+    linkColor: palette.yellow.dark3,
+    beforeColor: palette.yellow.base,
+    iconColor: palette.yellow.dark2,
+  },
+  danger: {
+    backgroundColor: palette.red.light3,
+    color: palette.red.dark2,
+    borderColor: palette.red.light2,
+    linkColor: palette.red.dark3,
+    beforeColor: palette.red.base,
+    iconColor: palette.red.base,
+  },
+  success: {
+    backgroundColor: palette.green.light3,
+    color: palette.green.dark2,
+    borderColor: palette.green.light2,
+    linkColor: palette.green.dark3,
+  },
+};
+const styleMapDark = {
+  info: {
+    backgroundColor: palette.blue.dark3,
+    color: palette.blue.light2,
+    borderColor: palette.blue.dark2,
+    linkColor: palette.blue.light3,
+    beforeColor: palette.blue.light1,
+    iconColor: palette.blue.light1,
+  },
+  warning: {
+    backgroundColor: palette.yellow.dark3,
+    color: palette.yellow.light2,
+    borderColor: palette.yellow.dark2,
+    linkColor: palette.yellow.light3,
+    beforeColor: palette.yellow.dark2,
+    iconColor: palette.yellow.base,
+  },
+  danger: {
+    backgroundColor: palette.red.dark3,
+    color: palette.red.light2,
+    borderColor: palette.red.dark2,
+    linkColor: palette.red.light3,
+    beforeColor: palette.red.base,
+    iconColor: palette.red.light1,
+  },
+  success: {
+    backgroundColor: palette.green.dark3,
+    color: palette.green.light2,
+    borderColor: palette.green.dark2,
+    linkColor: palette.green.light3,
+  },
+};
+
 const StyledBanner = styled((props) => <LeafyBanner {...props} />)`
   ${baseBannerStyle}
+  background-color: ${(props) => styleMapLight[props.variant].backgroundColor};
+  color: ${(props) => styleMapLight[props.variant].color};
+  border-color: ${(props) => styleMapLight[props.variant].borderColor};
+  // copied from LG
+  ::before {
+    background: linear-gradient(to left, transparent 6px, ${(props) => styleMapLight[props.variant].beforeColor}} 6px);
+  }
+  a {
+    color: ${(props) => styleMapLight[props.variant].linkColor};
+    :hover {
+      color: ${(props) => styleMapLight[props.variant].color};
+      text-decoration-color: ${(props) => styleMapLight[props.variant].color};
+    }
+  }
+  > svg {
+    color: ${(props) => styleMapLight[props.variant].iconColor};
+  }
 
-  a:hover {
-    text-decoration-color: var(--text-decoration-color);
+  .dark-theme & {
+    background-color: ${(props) => styleMapDark[props.variant].backgroundColor};
+    color: ${(props) => styleMapDark[props.variant].color};
+    border-color: ${(props) => styleMapDark[props.variant].borderColor};
+    ::before {
+      background: linear-gradient(to left, transparent 6px, ${(props) => styleMapDark[props.variant].beforeColor} 6px);
+    }
+    a {
+      color: ${(props) => styleMapDark[props.variant].linkColor};
+      :hover {
+        color: ${(props) => styleMapDark[props.variant].color};
+        text-decoration-color: ${(props) => styleMapDark[props.variant].color};
+      }
+    }
+    > svg {
+      color: ${(props) => styleMapDark[props.variant].iconColor};
+    }
   }
 `;
 
 const Banner = ({ nodeData: { children, options }, ...rest }) => {
-  const { darkMode } = useDarkMode();
   return (
-    <StyledBanner
-      variant={alertMap[options?.variant] || LeafyVariant.Info}
-      style={{ '--text-decoration-color': darkMode ? palette.blue.light2 : palette.blue.dark2 }}
-    >
+    <StyledBanner variant={alertMap[options?.variant] || LeafyVariant.Info}>
       {children.map((child, i) => (
         <ComponentFactory {...rest} key={i} nodeData={child} />
       ))}

diff --git a/src/components/Banner/CTABanner.js b/src/components/Banner/CTABanner.js
@@ -1,19 +1,25 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { css } from '@emotion/react';
-import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
 import { palette } from '@leafygreen-ui/palette';
 import Icon, { glyphs } from '@leafygreen-ui/icon';
 import ComponentFactory from '../ComponentFactory';
 import { baseBannerStyle } from './styles/bannerItemStyle';
 
 const videoBannerStyling = css`
   ${baseBannerStyle};
+  background-color: ${palette.blue.light3};
+  border: 1px solid ${palette.blue.light2};
+  color: ${palette.blue.dark2};
+  .dark-theme & {
+    background-color: ${palette.blue.dark3};
+    border: 1px solid ${palette.blue.dark2};
+    color: ${palette.blue.light2};
+  }
   align-items: center;
-  background-color: var(--background-color);
+
   border-radius: 6px;
-  border: 1px solid var(--border);
-  color: var(--color);
+
   display: flex;
   font-size: 14px;
   margin: 24px 0px;
@@ -41,10 +47,10 @@ const lgIconStyling = css`
 
 const linkStyling = css`
   text-decoration: none !important;
+  color: unset;
 `;
 
 const CTABanner = ({ nodeData: { children, options }, ...rest }) => {
-  const { darkMode } = useDarkMode();
   // Handles case sensitivity for specified icons
   let lgIcon = 'Play';
   if (options?.icon) {
@@ -56,14 +62,7 @@ const CTABanner = ({ nodeData: { children, options }, ...rest }) => {
 
   return (
     <a href={options?.url} css={linkStyling}>
-      <div
-        css={videoBannerStyling}
-        style={{
-          '--background-color': darkMode ? palette.blue.dark3 : palette.blue.light3,
-          '--border': darkMode ? palette.blue.dark2 : palette.blue.light2,
-          '--color': darkMode ? palette.blue.light2 : palette.blue.dark2,
-        }}
-      >
+      <div css={videoBannerStyling}>
         <div css={lgIconStyling}>
           <Icon glyph={lgIcon} fill={palette.blue.base} />
         </div>

diff --git a/tests/unit/__snapshots__/Banner.test.js.snap b/tests/unit/__snapshots__/Banner.test.js.snap
@@ -5,6 +5,9 @@ exports[`renders a Banner correctly 1`] = `
   .emotion-0 {
   margin: 16px 0;
   font-size: 13px;
+  background-color: #E1F7FF;
+  color: #083C90;
+  border-color: #C3E7FE;
 }
 
 .emotion-0>div>div>* {
@@ -28,8 +31,44 @@ exports[`renders a Banner correctly 1`] = `
   text-underline-offset: 3px;
 }
 
+.emotion-0::before {
+  background: linear-gradient(to left, transparent 6px, #016BF8} 6px);
+}
+
+.emotion-0 a {
+  color: #0C2657;
+}
+
 .emotion-0 a:hover {
-  text-decoration-color: var(--text-decoration-color);
+  color: #083C90;
+  text-decoration-color: #083C90;
+}
+
+.emotion-0>svg {
+  color: #016BF8;
+}
+
+.dark-theme .emotion-0 {
+  background-color: #0C2657;
+  color: #C3E7FE;
+  border-color: #083C90;
+}
+
+.dark-theme .emotion-0::before {
+  background: linear-gradient(to left, transparent 6px, #0498EC 6px);
+}
+
+.dark-theme .emotion-0 a {
+  color: #E1F7FF;
+}
+
+.dark-theme .emotion-0 a:hover {
+  color: #C3E7FE;
+  text-decoration-color: #C3E7FE;
+}
+
+.dark-theme .emotion-0>svg {
+  color: #0498EC;
 }
 
 .emotion-2 {
@@ -146,7 +185,6 @@ exports[`renders a Banner correctly 1`] = `
 <div
     class="emotion-0 emotion-1 emotion-2"
     role="alert"
-    style="--text-decoration-color: #083C90;"
   >
     <svg
       aria-label="Info With Circle Icon"