Merge branch 'main' into DOP-3424

CHANGELOG.md

@@ -7,7 +7,23 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
-## [v0.18.5](https://github.com/mongodb/snooty/compare/v0.18.4...v0.18.5)
+## [v0.18.6](https://github.com/mongodb/snooty/compare/v0.18.5...v0.18.6)
+
+### Merged
+
+- DOP-5059: Default expanded Collapsibles [`#1276`](https://github.com/mongodb/snooty/pull/1276)
+- DOP-5038: add segment tracking to dark mode controls [`#1275`](https://github.com/mongodb/snooty/pull/1275)
+- Rough draft: quick, easy solution for noindexing entire branches from… [`#1273`](https://github.com/mongodb/snooty/pull/1273)
+- DOP-4615: (Feature) New Structured Data [`#1274`](https://github.com/mongodb/snooty/pull/1274)
+- DOP-5048: Ensure inline definition popover is visible [`#1269`](https://github.com/mongodb/snooty/pull/1269)
+- DOP-5016: Links in footnote can have inconsistent font size [`#1268`](https://github.com/mongodb/snooty/pull/1268)
+- DOP-5028: Mobile Search filters page not scrollable and adjusts for banner [`#1260`](https://github.com/mongodb/snooty/pull/1260)
+- DOP-5044: deprecated sites dark mode dropdown direction fixed [`#1264`](https://github.com/mongodb/snooty/pull/1264)
+- DOP-5017: Remove Gatsby Cloud references and logic [`#1265`](https://github.com/mongodb/snooty/pull/1265)
+- DOP-5013: Upgrade chatbot UI to version `0.9.0` [`#1266`](https://github.com/mongodb/snooty/pull/1266)
+- DOP-4811: Preserve spacing when "Next" page link is present with no "Back" [`#1261`](https://github.com/mongodb/snooty/pull/1261)
+
+## [v0.18.5](https://github.com/mongodb/snooty/compare/v0.18.4...v0.18.5) - 2024-10-02
 
 ### Merged
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "snooty",
-  "version": "0.18.5",
+  "version": "0.18.6",
   "repository": "github:mongodb/snooty",
   "engines": {
     "node": "^18",

src/components/Banner/Banner.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { palette } from '@leafygreen-ui/palette';
-import styled from '@emotion/styled';
 import LeafyBanner, { Variant as LeafyVariant } from '@leafygreen-ui/banner';
+import { css, cx } from '@leafygreen-ui/emotion';
 import ComponentFactory from '../ComponentFactory';
 import { baseBannerStyle } from './styles/bannerItemStyle';
 
@@ -78,53 +78,53 @@ const styleMapDark = {
   },
 };
 
-const StyledBanner = styled((props) => <LeafyBanner {...props} />)`
+const bannerStyle = ({ variant }) => css`
   ${baseBannerStyle}
-  background-color: ${(props) => styleMapLight[props.variant].backgroundColor};
-  color: ${(props) => styleMapLight[props.variant].color};
-  border-color: ${(props) => styleMapLight[props.variant].borderColor};
+  background-color: ${styleMapLight[variant].backgroundColor};
+  color: ${styleMapLight[variant].color};
+  border-color: ${styleMapLight[variant].borderColor};
   // copied from LG
   ::before {
-    background: linear-gradient(to left, transparent 6px, ${(props) => styleMapLight[props.variant].beforeColor}} 6px);
+    background: linear-gradient(to left, transparent 6px, ${styleMapLight[variant].beforeColor}} 6px);
   }
   a {
-    color: ${(props) => styleMapLight[props.variant].linkColor};
+    color: ${styleMapLight[variant].linkColor};
     :hover {
-      color: ${(props) => styleMapLight[props.variant].color};
-      text-decoration-color: ${(props) => styleMapLight[props.variant].color};
+      color: ${styleMapLight[variant].color};
+      text-decoration-color: ${styleMapLight[variant].color};
     }
   }
   > svg {
-    color: ${(props) => styleMapLight[props.variant].iconColor};
+    color: ${styleMapLight[variant].iconColor};
   }
 
   .dark-theme & {
-    background-color: ${(props) => styleMapDark[props.variant].backgroundColor};
-    color: ${(props) => styleMapDark[props.variant].color};
-    border-color: ${(props) => styleMapDark[props.variant].borderColor};
+    background-color: ${styleMapDark[variant].backgroundColor};
+    color: ${styleMapDark[variant].color};
+    border-color: ${styleMapDark[variant].borderColor};
     ::before {
-      background: linear-gradient(to left, transparent 6px, ${(props) => styleMapDark[props.variant].beforeColor} 6px);
+      background: linear-gradient(to left, transparent 6px, ${styleMapDark[variant].beforeColor} 6px);
     }
     a {
-      color: ${(props) => styleMapDark[props.variant].linkColor};
+      color: ${styleMapDark[variant].linkColor};
       :hover {
-        color: ${(props) => styleMapDark[props.variant].color};
-        text-decoration-color: ${(props) => styleMapDark[props.variant].color};
+        color: ${styleMapDark[variant].color};
+        text-decoration-color: ${styleMapDark[variant].color};
       }
     }
     > svg {
-      color: ${(props) => styleMapDark[props.variant].iconColor};
+      color: ${styleMapDark[variant].iconColor};
     }
   }
 `;
 
 const Banner = ({ nodeData: { children, options }, ...rest }) => {
   return (
-    <StyledBanner variant={alertMap[options?.variant] || LeafyVariant.Info}>
+    <LeafyBanner className={cx(bannerStyle({ variant: alertMap[options?.variant] || LeafyVariant.Info }))}>
       {children.map((child, i) => (
         <ComponentFactory {...rest} key={i} nodeData={child} />
       ))}
-    </StyledBanner>
+    </LeafyBanner>
   );
 };
 

src/components/Collapsible/index.js

@@ -16,7 +16,7 @@ import { collapsibleStyle, headerContainerStyle, headerStyle, iconStyle, innerCo
 import './styles.css';
 
 const Collapsible = ({ nodeData: { children, options }, sectionDepth, ...rest }) => {
-  const { id, heading, sub_heading: subHeading } = options;
+  const { id, heading, expanded, sub_heading: subHeading } = options;
   const { hash } = useLocation();
 
   // get a list of all ids in collapsible content
@@ -25,7 +25,7 @@ const Collapsible = ({ nodeData: { children, options }, sectionDepth, ...rest })
     return findAllNestedAttribute(children, 'id');
   }, [children]);
 
-  const [open, setOpen] = useState(false);
+  const [open, setOpen] = useState(!!expanded);
   const headingNodeData = {
     id,
     children: [{ type: 'text', value: heading }],

tests/unit/Collapsible.test.js

@@ -4,6 +4,7 @@ import { render, act } from '@testing-library/react';
 import { mockLocation } from '../utils/mock-location';
 import Collapsible from '../../src/components/Collapsible';
 import mockData from './data/Collapsible.test.json';
+import expandedMockData from './data/CollapsibleExpanded.test.json';
 
 describe('collapsible component', () => {
   it('renders all the content in the options and children', () => {
@@ -42,4 +43,12 @@ describe('collapsible component', () => {
     expect(icon.getAttribute('aria-label')).toContain('Chevron');
     expect(icon.getAttribute('aria-label')).toContain('Down');
   });
+
+  it('is default expanded if expanded option is truthy', async () => {
+    const renderResult = render(<Collapsible nodeData={expandedMockData} />),
+      button = renderResult.getByRole('button'),
+      icon = button.querySelector('[role=img]');
+    expect(icon.getAttribute('aria-label')).toContain('Chevron');
+    expect(icon.getAttribute('aria-label')).toContain('Down');
+  });
 });

tests/unit/__snapshots__/Banner.test.js.snap

@@ -3,13 +3,61 @@
 exports[`renders a Banner correctly 1`] = `
 <DocumentFragment>
   .emotion-0 {
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  padding: 10px 12px 10px 20px;
+  border-width: 1px 1px 1px 0px;
+  border-style: solid;
+  border-radius: 12px;
+  font-family: 'Euclid Circular A','Helvetica Neue',Helvetica,Arial,sans-serif;
+  font-size: 13px;
+  line-height: 20px;
+  color: #083C90;
+  border-color: #C3E7FE;
+  background-color: #E1F7FF;
   margin: 16px 0;
   font-size: 13px;
   background-color: #E1F7FF;
   color: #083C90;
   border-color: #C3E7FE;
 }
 
+.emotion-0:before {
+  content: '';
+  position: absolute;
+  width: 13px;
+  top: -1px;
+  bottom: -1px;
+  left: 0px;
+  border-radius: 12px 0px 0px 12px;
+}
+
+.emotion-0 .lg-ui-0001,
+.emotion-0 a {
+  color: #0C2657;
+}
+
+.emotion-0 .lg-ui-0001:hover,
+.emotion-0 a:hover {
+  color: #083C90;
+}
+
+.emotion-0 .lg-ui-0001:focus-visible,
+.emotion-0 a:focus-visible {
+  box-shadow: 0 0 0 3px #E1F7FF,0 0 0 5px #FFFFFF,0 0 0 7px #0498EC;
+}
+
+.emotion-0:before {
+  background: linear-gradient(
+        to left,
+        transparent 6px,
+        #016BF8 6px
+      );
+}
+
 .emotion-0>div>div>* {
   margin: 0 0 12px;
 }
@@ -71,58 +119,7 @@ exports[`renders a Banner correctly 1`] = `
   color: #0498EC;
 }
 
-.emotion-2 {
-  position: relative;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 12px 10px 20px;
-  border-width: 1px 1px 1px 0px;
-  border-style: solid;
-  border-radius: 12px;
-  font-family: 'Euclid Circular A','Helvetica Neue',Helvetica,Arial,sans-serif;
-  font-size: 13px;
-  line-height: 20px;
-  color: #083C90;
-  border-color: #C3E7FE;
-  background-color: #E1F7FF;
-}
-
-.emotion-2:before {
-  content: '';
-  position: absolute;
-  width: 13px;
-  top: -1px;
-  bottom: -1px;
-  left: 0px;
-  border-radius: 12px 0px 0px 12px;
-}
-
-.emotion-2 .lg-ui-0001,
-.emotion-2 a {
-  color: #0C2657;
-}
-
-.emotion-2 .lg-ui-0001:hover,
-.emotion-2 a:hover {
-  color: #083C90;
-}
-
-.emotion-2 .lg-ui-0001:focus-visible,
-.emotion-2 a:focus-visible {
-  box-shadow: 0 0 0 3px #E1F7FF,0 0 0 5px #FFFFFF,0 0 0 7px #0498EC;
-}
-
-.emotion-2:before {
-  background: linear-gradient(
-        to left,
-        transparent 6px,
-        #016BF8 6px
-      );
-}
-
-.emotion-3 {
+.emotion-1 {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -134,7 +131,7 @@ exports[`renders a Banner correctly 1`] = `
   top: 2px;
 }
 
-.emotion-4 {
+.emotion-2 {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
@@ -146,8 +143,8 @@ exports[`renders a Banner correctly 1`] = `
   margin-right: 10px;
 }
 
-.emotion-4 .lg-ui-0001,
-.emotion-4 a {
+.emotion-2 .lg-ui-0001,
+.emotion-2 a {
   font-size: inherit;
   line-height: inherit;
   font-weight: 700;
@@ -159,36 +156,36 @@ exports[`renders a Banner correctly 1`] = `
   display: inline;
 }
 
-.emotion-4 .lg-ui-0001:hover,
-.emotion-4 a:hover,
-.emotion-4 .lg-ui-0001:focus,
-.emotion-4 a:focus,
-.emotion-4 .lg-ui-0001:focus-visible,
-.emotion-4 a:focus-visible {
+.emotion-2 .lg-ui-0001:hover,
+.emotion-2 a:hover,
+.emotion-2 .lg-ui-0001:focus,
+.emotion-2 a:focus,
+.emotion-2 .lg-ui-0001:focus-visible,
+.emotion-2 a:focus-visible {
   outline: none;
 }
 
-.emotion-4 .lg-ui-0001:hover span::after,
-.emotion-4 a:hover span::after,
-.emotion-4 .lg-ui-0001:focus span::after,
-.emotion-4 a:focus span::after,
-.emotion-4 .lg-ui-0001:focus-visible span::after,
-.emotion-4 a:focus-visible span::after {
+.emotion-2 .lg-ui-0001:hover span::after,
+.emotion-2 a:hover span::after,
+.emotion-2 .lg-ui-0001:focus span::after,
+.emotion-2 a:focus span::after,
+.emotion-2 .lg-ui-0001:focus-visible span::after,
+.emotion-2 a:focus-visible span::after {
   display: none;
 }
 
-.emotion-4 .lg-ui-0001:focus-visible,
-.emotion-4 a:focus-visible {
+.emotion-2 .lg-ui-0001:focus-visible,
+.emotion-2 a:focus-visible {
   position: relative;
 }
 
 <div
-    class="emotion-0 emotion-1 emotion-2"
+    class="emotion-0"
     role="alert"
   >
     <svg
       aria-label="Info With Circle Icon"
-      class="emotion-3"
+      class="emotion-1"
       height="16"
       role="img"
       viewBox="0 0 16 16"
@@ -202,7 +199,7 @@ exports[`renders a Banner correctly 1`] = `
       />
     </svg>
     <div
-      class="emotion-4"
+      class="emotion-2"
     >
       These instructions are for installing MongoDB directly from
     </div>