update dropdown menu styles

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openstax/ui-components",
-  "version": "1.22.2",
+  "version": "1.22.3",
   "license": "MIT",
   "sideEffects": [
     "**/*.css"

src/components/DropdownMenu.stories.tsx

@@ -34,6 +34,36 @@ const Menus = (variant: 'light' | 'primary' | 'secondary') => {
         Export grades to .csv
       </DropdownMenuItem>
     </DropdownMenu>
+
+    <br/>
+
+    <DropdownMenu id='links-menu' text='Resources' variant={variant}>
+      <DropdownMenuItem href='https://openstax.org' target='_blank'>
+        Browse subjects
+      </DropdownMenuItem>
+      <DropdownMenuItem href='https://openstax.org/subjects' target='_blank'>
+        View all textbooks
+      </DropdownMenuItem>
+      <DropdownMenuItem href='https://openstax.org/about' target='_blank'>
+        About OpenStax
+      </DropdownMenuItem>
+    </DropdownMenu>
+
+    <br/>
+
+    <div style={{ width: '50rem', maxWidth: '100%' }}>
+      <DropdownMenu id='links-menu' text='Wide Menu' width="100%" variant={variant}>
+        <DropdownMenuItem href='https://openstax.org' target='_blank'>
+          Browse subjects
+        </DropdownMenuItem>
+        <DropdownMenuItem href='https://openstax.org/subjects' target='_blank'>
+          View all textbooks
+        </DropdownMenuItem>
+        <DropdownMenuItem href='https://openstax.org/about' target='_blank'>
+          About OpenStax
+        </DropdownMenuItem>
+      </DropdownMenu>
+    </div>
   </>;
 };
 

src/components/DropdownMenu.tsx

@@ -14,15 +14,15 @@ const StyledButton = styled(Button)<{ variant: ButtonVariant; width?: string }>`
   flex-direction: row;
   font-size: 1.6rem;
   position: relative;
-  justify-content: center;
+  justify-content: space-between;
   line-height: 2rem;
   min-height: 2.5rem;
-  padding: 0 1.5rem 0 0.5rem;
+  padding: 1rem 2.5rem 1rem 1rem;
   text-align: left;
   text-decoration: none;
   transition: all 0.2s ease-in-out;
   user-select: none;
-  ${(props) => props.width ? `width: ${props.width}` : null}
+  ${(props) => props.width ? `width: ${props.width};` : null}
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
 
@@ -40,34 +40,37 @@ const StyledButton = styled(Button)<{ variant: ButtonVariant; width?: string }>`
     content: ' ';
     display: block;
     position: absolute;
-    height: 0.5rem;
+    height: 0.6rem;
     margin-top: -0.25rem;
-    right: 0.5rem;
+    right: 1rem;
     transform: rotate(135deg);
-    width: 0.5rem;
+    width: 0.6rem;
   }
 `;
 
 const StyledMenu = styled(Menu)`
   margin-top: -0.6rem;
   background-color: ${palette.white};
   border: 0.1rem solid ${palette.pale};
-  padding: 0.3rem 0;
+  padding: 0;
   cursor: pointer;
   color: ${palette.black};
 
   [role="menuitem"] {
+    display: block;
+    color: inherit;
+    text-decoration: none;
     font-size: 1.6rem;
     min-height: 2.5rem;
     line-height: 2rem;
-    padding: 0 0.5rem;
+    padding: 1rem 0.5rem;
     cursor: pointer;
     transition: all 0.2s ease-in-out;
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;
 
     &:hover {
-      background-color: ${palette.pale};
+      background-color: ${palette.neutralLighter};
     }
   }
 `;

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

@@ -5,7 +5,7 @@ exports[`DropdownMenu matches snapshots 1`] = `
   <button
     aria-expanded="false"
     aria-haspopup="true"
-    class="sc-bczRLJ hTVCmA"
+    class="sc-bczRLJ fKigdf"
     data-rac=""
     data-react-aria-pressable="true"
     id="react-aria-1"
@@ -22,7 +22,7 @@ exports[`DropdownMenu matches snapshots 2`] = `
   <button
     aria-expanded="false"
     aria-haspopup="true"
-    class="sc-bczRLJ ga-doNl"
+    class="sc-bczRLJ lgmwux"
     data-rac=""
     data-react-aria-pressable="true"
     id="react-aria-4"