chore: remove toolbar as being developed in upstream primer

package.json

@@ -32,13 +32,13 @@
     "styled-components": "^5.3.10"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "^7.0.9",
-    "@storybook/addon-interactions": "^7.0.9",
-    "@storybook/addon-links": "^7.0.9",
-    "@storybook/blocks": "^7.0.9",
-    "@storybook/react": "^7.0.9",
-    "@storybook/react-vite": "^7.0.9",
-    "@storybook/testing-library": "^0.0.14-next.2",
+    "@storybook/addon-essentials": "^8.0.10",
+    "@storybook/addon-interactions": "^8.0.10",
+    "@storybook/addon-links": "^8.0.10",
+    "@storybook/blocks": "^8.0.10",
+    "@storybook/react": "^8.0.10",
+    "@storybook/react-vite": "^8.0.10",
+    "@storybook/testing-library": "^0.2.2",
     "@types/react": "^18.2.12",
     "@types/react-dom": "^18.2.5",
     "@typescript-eslint/eslint-plugin": "^5.57.1",
@@ -49,7 +49,7 @@
     "eslint-plugin-react-refresh": "^0.3.4",
     "eslint-plugin-storybook": "^0.6.12",
     "prop-types": "^15.8.1",
-    "storybook": "^7.0.9",
+    "storybook": "^8.0.10",
     "typescript": "^5.0.2",
     "vite": "^5.2.7"
   }

src/components/card/Card.tsx

@@ -10,7 +10,7 @@ export type CardProps = Omit<BoxProps, 'border'> & {
 export type CardHeaderProps = {
   title?: string;
   description?: string;
-  leadingIcon?: React.ElementType;
+  leadingVisual?: React.ElementType;
   action?: React.ReactNode;
 }
 
@@ -78,10 +78,10 @@ export const Card: React.FC<CardProps> & {
 };
 
 Card.Header = (props) => {
-  const { title, description, leadingIcon, action } = props;
+  const { title, description, leadingVisual, action } = props;
   return <Box display="flex" alignItems="center" sx={{p: 3}}>
-    {leadingIcon && <Box sx={{mr: 3}}>
-      <Octicon size="medium" icon={leadingIcon} />
+    {leadingVisual && <Box sx={{mr: 3}}>
+      <Octicon size="medium" icon={leadingVisual} />
     </Box>}
     <Box sx={{flexGrow: 1}}>
       <Text display="block">{title}</Text>

src/components/card/stories/Card.stories.tsx

@@ -50,7 +50,7 @@ export const CardDay: Story = {
   },
   render: (args) => <ThemedCard {...args} colorMode="day">
     <Card.Header
-      leadingIcon={ProjectIcon}
+      leadingVisual={ProjectIcon}
       title="Shrimp and Chorizo Paella"
       description="September 14, 2016"
       action={<IconButton aria-label="Menu" onClick={() => alert("Menu")} icon={ThreeBarsIcon} />}
@@ -87,7 +87,7 @@ export const CardDaySvg: Story = {
   },
   render: (args) => <ThemedCard {...args} colorMode="day">
     <Card.Header
-      leadingIcon={ProjectIcon}
+      leadingVisual={ProjectIcon}
       title="Shrimp and Chorizo Paella"
       description="September 14, 2016"
       action={<IconButton aria-label="Menu" onClick={() => alert("Menu")} icon={ThreeBarsIcon} />}
@@ -117,7 +117,7 @@ export const CardNight: Story = {
   },
   render: (args) => <ThemedCard {...args} colorMode="night">
   <Card.Header
-    leadingIcon={ProjectIcon}
+    leadingVisual={ProjectIcon}
     title="Shrimp and Chorizo Paella"
     description="September 14, 2016"
     action={<IconButton aria-label="Menu" onClick={() => alert("Menu")} icon={ThreeBarsIcon} />}

src/components/closeable-flash/CloseableFlash.tsx

@@ -3,12 +3,12 @@ import { Box, Flash, FlashProps, Octicon, Text } from "@primer/react";
 import { XIcon } from "@primer/octicons-react";
 
 export type CloseableFlashProps = FlashProps & {
-  leadingIcon?: React.ElementType;
+  leadingVisual?: React.ElementType;
   onClose?: () => void;
 }
 
 export const CloseableFlash: FC<CloseableFlashProps> = (props) => {
-  const {leadingIcon, variant, onClose, ...otherProps} = props;
+  const {leadingVisual, variant, onClose, ...otherProps} = props;
   const [isVisible, setIsVisible] = useState(true);
   const handleClose = () => {
     if (onClose) {
@@ -23,7 +23,7 @@ export const CloseableFlash: FC<CloseableFlashProps> = (props) => {
     <Flash variant={variant} {...otherProps}>
       <Box display="flex" justifyContent="space-between" alignItems="center">
         <Box sx={{ flexGrow: 1 }}>
-          {leadingIcon && <Octicon icon={leadingIcon} />}
+          {leadingVisual && <Octicon icon={leadingVisual} />}
           <Text color={`${variant === "default" ? "accent" : (variant === "warning" ? "attention" : variant)}.fg`}>{props.children}</Text>
         </Box>
         <Box onClick={handleClose} sx={{cursor: "pointer"}}>

src/components/closeable-flash/stories/CloseableFlash.stories.tsx

@@ -40,7 +40,7 @@ const ThemedCloseableFlash = (props: {colorMode?: ThemeProviderProps["colorMode"
 export const CloseableFlashDay: Story = {
   args: {
     variant: "success",
-    leadingIcon: CheckIcon,
+    leadingVisual: CheckIcon,
     onClose: () => window.alert("closed")
   },
   render: (args) => <ThemedCloseableFlash {...args} colorMode="day">Success Flash</ThemedCloseableFlash>
@@ -49,7 +49,7 @@ export const CloseableFlashDay: Story = {
 export const CloseableFlashNight: Story = {
   args: {
     variant: "success",
-    leadingIcon: CheckIcon,
+    leadingVisual: CheckIcon,
     onClose: () => window.alert("closed")
   },
   render: (args) => <ThemedCloseableFlash {...args} colorMode="night">Success Flash</ThemedCloseableFlash>

src/index.ts

@@ -4,4 +4,3 @@ export * from "./components/closeable-flash/CloseableFlash";
 export * from "./components/icons/CircleIcon";
 export * from "./components/overlay/Overlay";
 export * from "./components/slider/Slider";
-export * from "./components/toolbar/Toolbar";