diff --git a/CHANGELOG.md b/CHANGELOG.md index 4f0c73c0f..235d31b52 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/package-lock.json b/package-lock.json index 467d9b49d..e2fc36f52 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "snooty", - "version": "0.18.5", + "version": "0.18.6", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "snooty", - "version": "0.18.5", + "version": "0.18.6", "dependencies": { "@emotion/css": "^11.0.0", "@emotion/eslint-plugin": "^11.7.0", diff --git a/package.json b/package.json index 705244ebb..71adceeb8 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "snooty", - "version": "0.18.5", + "version": "0.18.6", "repository": "github:mongodb/snooty", "engines": { "node": "^18", diff --git a/src/components/Banner/Banner.js b/src/components/Banner/Banner.js index 74db406a5..fccaa23d1 100644 --- a/src/components/Banner/Banner.js +++ b/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) => )` +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 ( - + {children.map((child, i) => ( ))} - + ); }; diff --git a/src/components/Collapsible/index.js b/src/components/Collapsible/index.js index ea9b7cf71..06656fbbb 100644 --- a/src/components/Collapsible/index.js +++ b/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 }], diff --git a/tests/unit/Collapsible.test.js b/tests/unit/Collapsible.test.js index 9e6517a02..e5cb86fde 100644 --- a/tests/unit/Collapsible.test.js +++ b/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(), + button = renderResult.getByRole('button'), + icon = button.querySelector('[role=img]'); + expect(icon.getAttribute('aria-label')).toContain('Chevron'); + expect(icon.getAttribute('aria-label')).toContain('Down'); + }); }); diff --git a/tests/unit/__snapshots__/Banner.test.js.snap b/tests/unit/__snapshots__/Banner.test.js.snap index 89fc1c0b7..aa51f6e69 100644 --- a/tests/unit/__snapshots__/Banner.test.js.snap +++ b/tests/unit/__snapshots__/Banner.test.js.snap @@ -3,6 +3,21 @@ exports[`renders a Banner correctly 1`] = ` .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; @@ -10,6 +25,39 @@ exports[`renders a Banner correctly 1`] = ` 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; }