Refactor names of user menu components

Author: jonathansick

packages/squared/src/components/GafaelfawrUserMenu/GafaelfawrUserMenu.stories.tsx

@@ -19,12 +19,12 @@ export const Default: Story = {
 
   render: (args) => (
     <GafaelfawrUserMenu {...args}>
-      <GafaelfawrUserMenu.MenuItem>
+      <GafaelfawrUserMenu.Item>
         <a href="#">Account Settings</a>
-      </GafaelfawrUserMenu.MenuItem>
-      <GafaelfawrUserMenu.MenuItem>
+      </GafaelfawrUserMenu.Item>
+      <GafaelfawrUserMenu.Item>
         <a href="#">Security tokens</a>
-      </GafaelfawrUserMenu.MenuItem>
+      </GafaelfawrUserMenu.Item>
     </GafaelfawrUserMenu>
   ),
 };

packages/squared/src/components/GafaelfawrUserMenu/GafaelfawrUserMenu.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import styled from 'styled-components';
 
 import Menu from './Menu';
+import Separator from './Separator';
 
 import MenuItem from './MenuItem';
 
@@ -44,6 +45,8 @@ const SiteNavLink = styled.a`
   }
 `;
 
-GafaelfawrUserMenu.MenuItem = MenuItem;
+// Associate child components with the parent for easier imports.
+GafaelfawrUserMenu.Item = MenuItem;
+GafaelfawrUserMenu.Separator = Separator;
 
 export default GafaelfawrUserMenu;

packages/squared/src/components/GafaelfawrUserMenu/Menu.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import * as RadixDropdownMenu from '@radix-ui/react-dropdown-menu';
 import { ChevronDown } from 'react-feather';
 
 import MenuItem from './MenuItem';
+import Separator from './Separator';
 
 export interface MenuProps {
   children: React.ReactNode;
@@ -16,25 +17,25 @@ export interface MenuProps {
 
 export const Menu = ({ children, logoutHref }: MenuProps) => {
   return (
-    <DropdownMenu.Root>
-      <DropdownMenu.Trigger asChild>
+    <RadixDropdownMenu.Root>
+      <RadixDropdownMenu.Trigger asChild>
         <MenuTriggerButton>
           username <ChevronDown />
         </MenuTriggerButton>
-      </DropdownMenu.Trigger>
+      </RadixDropdownMenu.Trigger>
 
-      <DropdownMenu.Portal>
+      <RadixDropdownMenu.Portal>
         <StyledContent align="end" sideOffset={5}>
           {children}
           <Separator />
           <MenuItem>
             <a href={logoutHref}>Logout</a>
           </MenuItem>
 
-          <DropdownMenu.Arrow className="DropdownMenuArrow" />
+          <RadixDropdownMenu.Arrow className="DropdownMenuArrow" />
         </StyledContent>
-      </DropdownMenu.Portal>
-    </DropdownMenu.Root>
+      </RadixDropdownMenu.Portal>
+    </RadixDropdownMenu.Root>
   );
 };
 
@@ -72,7 +73,7 @@ const MenuTriggerButton = styled.button`
 /**
  * The menu content container, used in a `DropdownMenu.Portal`.
  */
-const StyledContent = styled(DropdownMenu.Content)`
+const StyledContent = styled(RadixDropdownMenu.Content)`
   font-size: 1rem;
   background-color: var(--rsd-component-header-nav-menulist-background-color);
   min-width: 12rem;
@@ -94,10 +95,4 @@ const StyledContent = styled(DropdownMenu.Content)`
   }
 `;
 
-const Separator = styled(DropdownMenu.Separator)`
-  margin: 1rem -1rem;
-  margin: 0 -1rem 1rem;
-  border: 1px solid var(--rsd-color-primary-700);
-`;
-
 export default Menu;

packages/squared/src/components/GafaelfawrUserMenu/Separator.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import * as RadixDropdownMenu from '@radix-ui/react-dropdown-menu';
+
+export const Separator = styled(RadixDropdownMenu.Separator)`
+  margin: 1rem -1rem;
+  margin: 0 -1rem 1rem;
+  border: 1px solid var(--rsd-color-primary-700);
+`;
+
+export default Separator;