Merge pull request #247 from commitd/ka-toast

Adds Toast component based on Radix Toast

Author: stuarthendren

package-lock.json

@@ -220,6 +220,7 @@
     "@radix-ui/react-slider": "0.1.1",
     "@radix-ui/react-switch": "0.1.1",
     "@radix-ui/react-tabs": "0.1.1",
+    "@radix-ui/react-toast": "0.1.1",
     "@radix-ui/react-tooltip": "0.1.1",
     "@radix-ui/react-navigation-menu": "0.1.1",
     "@radix-ui/react-select": "0.1.1",

package.json

@@ -128,7 +128,7 @@ export const Variants = () => {
         </NavigationViewportPosition>
       </NavigationMenu>
 
-      <NavigationMenu>
+      <NavigationMenu css={{ paddingTop: '$2' }}>
         <NavigationMenuList>
           <NavigationMenuItem>
             <NavigationMenuTrigger caret={true} variant={'primary'}>

src/components/NavigationMenu/NavigationMenu.stories.tsx

@@ -64,9 +64,8 @@ const StyledMenu = styled(Root, {
 const StyledList = styled(List, {
   all: 'unset',
   display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'stretch',
   padding: '$0',
+  gap: '$2',
   listStyle: 'none',
   fontSize: '$0',
   borderRadius: '$default',
@@ -90,7 +89,6 @@ const menuVariants = css({
   $$contrast: '$colors$primaryContrast',
   $$default: '$colors$default',
   $$defaultHover: '$colors$defaultHighlight',
-  boxSizing: 'border-box',
   variants: {
     variant: mainVariants,
   },
@@ -99,10 +97,24 @@ const menuVariants = css({
 const StyledTrigger = styled(Trigger, menuVariants, {
   all: 'unset',
   ...itemStyles,
+  padding: '$1 $3',
+  boxSizing: 'border-box',
+  border: 'solid 2px',
+  borderColor: 'transparent',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'space-between',
+  defaultVariants: {
+    variant: 'secondary',
+  },
+})
 
+const StyledMenuLink = styled(Link, menuVariants, {
+  ...itemStyles,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  height: '100%',
   defaultVariants: {
     variant: 'secondary',
   },
@@ -142,17 +154,6 @@ export const NavigationMenuTrigger = forwardRef<
 ))
 NavigationMenuTrigger.toString = () => `.${NAV_MENU_TRIGGER_CLASS_NAME}`
 
-const StyledMenuLink = styled(Link, menuVariants, {
-  ...itemStyles,
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  height: '100%',
-  defaultVariants: {
-    variant: 'secondary',
-  },
-})
-
 export const NavigationMenuLink = StyledMenuLink
 
 const StyledContent = styled(Content, paperStyles, {