Nav bar fixes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openstax/ui-components",
-  "version": "1.7.8",
+  "version": "1.7.9",
   "license": "MIT",
   "source": "./src/index.ts",
   "types": "./dist/index.d.ts",

src/components/NavBar.tsx

@@ -1,4 +1,4 @@
-import { navDesktopHeight, navMobileHeight } from '../../src/constants';
+import * as Constants from '../../src/constants';
 import styled, { css } from 'styled-components';
 import theme from '../../src/theme';
 import { NavBarLogo as OpenstaxLogo } from './NavBarLogo';
@@ -44,18 +44,18 @@ type NavBarProps = React.PropsWithChildren<{
   justifyContent?: string;
 }>
 
-export const NavBar = ({ logo = false, maxWidth, ...props }: NavBarProps) => {
+export const NavBar = ({ logo = false, maxWidth, navDesktopHeight, navMobileHeight, justifyContent, ...props }: NavBarProps) => {
   const logoIsObject = typeof logo === 'object';
   const renderAnchor = logoIsObject && 'href' in logo;
   const {alt = 'OpenStax Logo', ...anchorProps} = logoIsObject ? logo : {};
   const logoComponent = logo ? <OpenstaxLogo alt={alt} /> : null;
 
-  return <BarWrapper>
+  return <BarWrapper role="toolbar" {...props}>
     <StyledNavBar
       maxWidth={maxWidth}
-      navDesktopHeight={props.navDesktopHeight || navDesktopHeight}
-      navMobileHeight={props.navMobileHeight || navMobileHeight}
-      justifyContent={props.justifyContent}
+      navDesktopHeight={navDesktopHeight || Constants.navDesktopHeight}
+      navMobileHeight={navMobileHeight || Constants.navMobileHeight}
+      justifyContent={justifyContent}
     >
       {renderAnchor ? <a {...anchorProps}>{logoComponent}</a> : logoComponent}
       {props.children}

src/components/Radio.spec.tsx

@@ -1,5 +1,6 @@
 import { Radio } from './Radio';
 import renderer from 'react-test-renderer';
+import { render, fireEvent } from '@testing-library/react';
 
 describe('Radio', () => {
   it('matches snapshot', () => {
@@ -8,4 +9,17 @@ describe('Radio', () => {
     ).toJSON();
     expect(tree).toMatchSnapshot();
   });
+
+  it('matches disabled snapshot', () => {
+    const tree = renderer.create(
+      <Radio disabled>Disabled</Radio>
+    ).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('calls onFocus handler', () => {
+    const { getByRole } = render(<Radio tooltipText='hi'>Click Me</Radio>);
+    const radioButton = getByRole('radio');
+    fireEvent.focus(radioButton);
+  });
 });

src/components/Tooltip.spec.tsx

@@ -19,4 +19,11 @@ describe('Tooltip', () => {
     ).toJSON();
     expect(tree).toMatchSnapshot();
   });
+
+  it('uses icon', () => {
+    const tree = renderer.create(
+      <TooltipGroup isOpen={false} placement='right' icon={'icon'}>Tooltip content</TooltipGroup>
+    ).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
 });

src/components/__snapshots__/NavBar.spec.tsx.snap

@@ -3,6 +3,7 @@
 exports[`NavBar matches snapshot 1`] = `
 <div
   className="sc-gsnTZi dMcFZD"
+  role="toolbar"
 >
   <div
     className="sc-dkzDqf bpDzAE"
@@ -15,6 +16,7 @@ exports[`NavBar matches snapshot 1`] = `
 exports[`NavBar sets the maxWidth 1`] = `
 <div
   className="sc-gsnTZi dMcFZD"
+  role="toolbar"
 >
   <div
     className="sc-dkzDqf gQjsvL"
@@ -27,6 +29,7 @@ exports[`NavBar sets the maxWidth 1`] = `
 exports[`NavBar with a logo customizes the alt text 1`] = `
 <div
   className="sc-gsnTZi dMcFZD"
+  role="toolbar"
 >
   <div
     className="sc-dkzDqf bpDzAE"
@@ -79,6 +82,7 @@ exports[`NavBar with a logo customizes the alt text 1`] = `
 exports[`NavBar with a logo links the logo 1`] = `
 <div
   className="sc-gsnTZi dMcFZD"
+  role="toolbar"
 >
   <div
     className="sc-dkzDqf bpDzAE"
@@ -135,6 +139,7 @@ exports[`NavBar with a logo links the logo 1`] = `
 exports[`NavBar with a logo matches snapshot 1`] = `
 <div
   className="sc-gsnTZi dMcFZD"
+  role="toolbar"
 >
   <div
     className="sc-dkzDqf bpDzAE"

src/components/__snapshots__/Radio.spec.tsx.snap

@@ -1,5 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Radio matches disabled snapshot 1`] = `
+<label
+  aria-disabled={true}
+  className="sc-hKMtZM fMGZzH"
+>
+  <input
+    aria-disabled={true}
+    className="sc-eCYdqJ bstnXk"
+    type="radio"
+  />
+  Disabled
+</label>
+`;
+
 exports[`Radio matches snapshot 1`] = `
 <label
   className="sc-hKMtZM jREXRM"

src/components/__snapshots__/Tooltip.spec.tsx.snap

@@ -121,3 +121,31 @@ Array [
   </div>,
 ]
 `;
+
+exports[`Tooltip uses icon 1`] = `
+<button
+  className="sc-dkzDqf dcHEnX"
+  data-rac=""
+  onBlur={[Function]}
+  onClick={[Function]}
+  onDragStart={[Function]}
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+  onMouseDown={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+  onMouseUp={[Function]}
+  onPointerDown={[Function]}
+  onTouchCancel={[Function]}
+  onTouchEnd={[Function]}
+  onTouchMove={[Function]}
+  onTouchStart={[Function]}
+  type="button"
+>
+  <img
+    alt=""
+    aria-hidden={true}
+    src="icon"
+  />
+</button>
+`;