mongodb-js · Anemy · Mar 1, 2022 · Feb 23, 2022 · Feb 23, 2022 · Feb 23, 2022
@@ -0,0 +1 @@
+export const defaultFontSize = '14px';
@@ -26,4 +26,15 @@ describe('Accordion Component', function () {
     fireEvent.click(button);
     expect(screen.getByText('Hello World')).to.be.visible;
   });
+
+  it('should close the accordion after clicking to open then close', function () {
+    renderAccordion();
+
+    expect(screen.getByTestId('my-test-id')).to.exist;
+    const button = screen.getByText('Accordion Test');
+    fireEvent.click(button);
+    expect(screen.getByText('Hello World')).to.be.visible;
+    fireEvent.click(button);
+    expect(screen.queryByText('Hello World')).to.not.exist;
+  });
 });
@@ -5,13 +5,11 @@ import Icon from '@leafygreen-ui/icon';
 import { uiColors } from '@leafygreen-ui/palette';
 import { useId } from '@react-aria/utils';
 
-const labelStyles = css({
-  padding: 0,
-  margin: 0,
-  fontWeight: 'bold',
-});
+import { defaultFontSize } from '../compass-font-sizes';
 
 const buttonStyles = css({
+  fontWeight: 'bold',
+  fontSize: defaultFontSize,
   display: 'flex',
   alignItems: 'center',
   border: 'none',
@@ -46,34 +44,33 @@ function Accordion(
   const regionId = useId('region-');
   const labelId = useId('label-');
   return (
-    <div>
+    <>
       <div className={containerStyles}>
-        <p className={labelStyles} id={labelId}>
-          <button
-            data-testid={props['data-testid']}
-            className={buttonStyles}
-            type="button"
-            aria-expanded={open ? 'true' : 'false'}
-            aria-controls={regionId}
-            onClick={() => {
-              setOpen((currentOpen) => !currentOpen);
-            }}
-          >
-            <Icon
-              className={buttonIconStyles}
-              glyph={open ? 'ChevronDown' : 'ChevronRight'}
-            />
-            {props.text}
-          </button>
-        </p>
+        <button
+          data-testid={props['data-testid']}
+          className={buttonStyles}
+          id={labelId}
+          type="button"
+          aria-expanded={open ? 'true' : 'false'}
+          aria-controls={regionId}
+          onClick={() => {
+            setOpen((currentOpen) => !currentOpen);
+          }}
+        >
+          <Icon
+            className={buttonIconStyles}
+            glyph={open ? 'ChevronDown' : 'ChevronRight'}
+          />
+          {props.text}
+        </button>
       </div>
 
       {open && (
         <div role="region" aria-labelledby={labelId} id={regionId}>
           {props.children}
         </div>
       )}
-    </div>
+    </>
   );
 }
 

@@ -46,6 +46,7 @@ export {
 } from '@leafygreen-ui/logo';
 export { Menu, MenuSeparator, MenuItem } from '@leafygreen-ui/menu';
 export { uiColors } from '@leafygreen-ui/palette';
+export * as compassFontSizes from './compass-font-sizes';
 export * as compassUIColors from './compass-ui-colors';
 export { default as Portal } from '@leafygreen-ui/portal';
 export { RadioBox, Size as RadioBoxSize } from '@leafygreen-ui/radio-box-group';

@@ -23,27 +23,17 @@ const newConnectionButtonContainerStyles = css({
 
 const newConnectionButtonStyles = css({
   border: 'none',
-  height: 'inherit',
+  fontWeight: 'bold',
   borderRadius: 0,
+  svg: {
+    color: uiColors.white,
+  },
   ':hover': {
     border: 'none',
     boxShadow: 'none',
   },
 });
 
-const newConnectionButtonIcon = css({
-  fill: uiColors.white,
-  marginLeft: spacing[3],
-});
-
-const newConnectionButtonContent = css({
-  fontWeight: 'bold',
-  height: spacing[6],
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-});
-
 const sectionHeaderStyles = css({
   marginTop: spacing[4],
   marginBottom: spacing[3],
@@ -165,11 +155,9 @@ function ConnectionList({
           onClick={createNewConnection}
           size="large"
           data-testid="new-connection-button"
+          rightGlyph={<Icon glyph="Plus" />}
         >
-          <div className={newConnectionButtonContent}>
-            <span>New Connection</span>
-            <Icon glyph="Plus" className={newConnectionButtonIcon} />
-          </div>
+          New Connection
         </Button>
       </div>
       <div className={connectionListSectionStyles}>

@@ -2,6 +2,7 @@ import React from 'react';
 import {
   H3,
   Description,
+  compassFontSizes,
   spacing,
   uiColors,
   css,
@@ -76,8 +77,7 @@ const connectionButtonStyles = css({
 
 const connectionTitleStyles = css({
   color: uiColors.white,
-  fontWeight: 'bold',
-  fontSize: '14px',
+  fontSize: compassFontSizes.defaultFontSize,
   lineHeight: '20px',
   margin: 0,
   flexGrow: 1,

@@ -48,6 +48,7 @@ const formContainerStyles = css({
   flexGrow: 1,
   display: 'flex',
   padding: spacing[4],
+  margin: 0,
   paddingBottom: spacing[3],
   flexDirection: 'row',
   flexWrap: 'wrap',

@@ -4,8 +4,9 @@ import {
   ButtonSize,
   ButtonVariant,
   Subtitle,
-  Description,
+  Body,
   Link,
+  compassFontSizes,
   spacing,
   uiColors,
   css,
@@ -35,13 +36,11 @@ const sectionContainerStyles = css({
 });
 
 const titleStyles = css({
-  fontWeight: 'bold',
-  fontSize: 14,
+  fontSize: compassFontSizes.defaultFontSize,
 });
 
 const descriptionStyles = css({
   marginTop: spacing[2],
-  fontSize: 14,
 });
 
 const createClusterContainerStyles = css({
@@ -66,13 +65,13 @@ function FormHelp(): React.ReactElement {
         <Subtitle className={titleStyles}>
           New to Compass and don&apos;t have a cluster?
         </Subtitle>
-        <Description className={descriptionStyles}>
+        <Body className={descriptionStyles}>
           If you don&apos;t already have a cluster, you can create one for free
           using{' '}
           <Link href="https://www.mongodb.com/cloud/atlas" target="_blank">
             MongoDB Atlas
           </Link>
-        </Description>
+        </Body>
         <div className={createClusterContainerStyles}>
           <Button
             data-testid="atlas-cta-link"
@@ -91,11 +90,11 @@ function FormHelp(): React.ReactElement {
         <Subtitle className={titleStyles}>
           How do I find my connection string in Atlas?
         </Subtitle>
-        <Description className={descriptionStyles}>
+        <Body className={descriptionStyles}>
           If you have an Atlas cluster, go to the Cluster view. Click the
           &apos;Connect&apos; button for the cluster to which you wish to
           connect.
-        </Description>
+        </Body>
         <Link
           href="https://docs.atlas.mongodb.com/compass-connection/"
           target="_blank"

@@ -79,7 +79,8 @@ function InfoModal({
           Keyboard Shortcuts
         </Subtitle>
         <div className={shortcutsTableContainerStyles}>
-          <KeyboardShortcutsTable /></div>
+          <KeyboardShortcutsTable />
+        </div>
       </div>
       <Footer>
         <Button

@@ -76,7 +76,7 @@ function KeyboardShortcutsTable() {
       data={hotkeys}
       columns={[
         <TableHeader key={'name'} label="Key" />,
-        <TableHeader key={'value'} label="Value" />,
+        <TableHeader key={'value'} label="Description" />,
       ]}
     >
       {({ datum }) => (

@@ -38,8 +38,6 @@ body {
   height: 100vh;
   overflow: hidden;
   font-family: 'Akzidenz', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  font-weight: normal;
-  font-style: normal;
   font: 100% 'Akzidenz', 'Helvetica Neue', Helvetica, Arial, sans-serif;
   color: @gray1;
   background-color: @gray8;

@@ -21,7 +21,7 @@ import { errorsByFieldTab } from '../../utils/validation';
 import { defaultConnectionString } from '../../constants/default-connection';
 
 const tabsStyles = css({
-  marginTop: spacing[1],
+  marginTop: spacing[2],
 });
 
 const tabWithErrorIndicatorStyles = css({

@@ -163,7 +163,9 @@ function AuthenticationGSSAPI({
             setShowPassword(checked);
           }}
         />
-        {showPassword && (
+      </FormFieldContainer>
+      {showPassword && (
+        <FormFieldContainer>
           <TextInput
             onChange={({
               target: { value },
@@ -179,8 +181,8 @@ function AuthenticationGSSAPI({
             type="password"
             optional
           />
-        )}
-      </FormFieldContainer>
+        </FormFieldContainer>
+      )}
     </>
   );
 }

@@ -2,6 +2,7 @@ import React, { useCallback } from 'react';
 import {
   Checkbox,
   Description,
+  Label,
   css,
   spacing,
 } from '@mongodb-js/compass-components';
@@ -44,18 +45,22 @@ function DirectConnectionInput({
   );
 
   return (
-    <>
-      <Checkbox
-        onChange={updateDirectConnection}
-        label="Direct Connection"
-        checked={isDirectConnection}
-        bold={false}
-      />
-      <Description className={descriptionStyles}>
-        Specifies whether to force dispatch all operations to the specified
-        host.
-      </Description>
-    </>
+    <Checkbox
+      onChange={updateDirectConnection}
+      id="direct-connection-checkbox"
+      label={
+        <>
+          <Label htmlFor="direct-connection-checkbox">Direct Connection</Label>
+
+          <Description className={descriptionStyles}>
+            Specifies whether to force dispatch all operations to the specified
+            host.
+          </Description>
+        </>
+      }
+      checked={isDirectConnection}
+      bold={false}
+    />
   );
 }
 

@@ -201,18 +201,25 @@ function TLSTab({
               );
             }}
             data-testid={`${tlsOptionField.name}-input`}
-            label={tlsOptionField.name}
+            id={`${tlsOptionField.name}-input`}
+            label={
+              <>
+                <Label htmlFor={`${tlsOptionField.name}-input`}>
+                  {tlsOptionField.name}
+                </Label>
+                <Description
+                  className={cx(checkboxDescriptionStyles, {
+                    [disabledCheckboxDescriptionStyles]: tlsOptionsDisabled,
+                  })}
+                >
+                  {tlsOptionField.description}
+                </Description>
+              </>
+            }
             disabled={tlsOptionsDisabled}
             checked={tlsOptionField.checked}
             bold={false}
           />
-          <Description
-            className={cx(checkboxDescriptionStyles, {
-              [disabledCheckboxDescriptionStyles]: tlsOptionsDisabled,
-            })}
-          >
-            {tlsOptionField.description}
-          </Description>
         </FormFieldContainer>
       ))}
     </div>

@@ -19,9 +19,8 @@ import ConfirmEditConnectionString from './confirm-edit-connection-string';
 import type { UpdateConnectionFormField } from '../hooks/use-connect-form';
 
 const textAreaContainerStyle = css({
-  position: 'relative',
   marginTop: spacing[1],
-  marginBottom: spacing[2],
+  marginBottom: spacing[3],
 });
 
 const uriLabelContainerStyles = css({

@@ -119,6 +119,7 @@
     "webpack-node-externals": "^3.0.0"
   },
   "dependencies": {
+    "@react-aria/utils": "^3.11.0",
     "lodash": "^4.17.15"
   },
   "homepage": "https://github.com/mongodb-js/compass",