@pautena/react-design-system 0.1.2 → 0.2.0

package/dist/esm/types/generators/model-router/screens/add-screen.d.ts

@@ -13,4 +13,4 @@ export interface AddScreenProps<T extends BasicModelInstance> extends BaseScreen
      */
     newItemRequest: RequestState;
 }
-export declare const AddScreen: <T extends BasicModelInstance>({ model, modelName, onSubmitNewItem, newItemRequest, }: AddScreenProps<T>) => JSX.Element;
+export declare const AddScreen: <T extends BasicModelInstance>({ model, modelName, basePath, onSubmitNewItem, newItemRequest, }: AddScreenProps<T>) => JSX.Element;

package/dist/esm/types/generators/model-router/screens/list-screen.d.ts

@@ -27,4 +27,4 @@ export interface ListScreenProps<T extends BasicModelInstance> extends BaseScree
      */
     deleteRequest: RequestState;
 }
-export declare const ListScreen: <T extends BasicModelInstance>({ model, modelName, listData, onRequestList, onClickDeleteItem, listRequest, deleteRequest, }: ListScreenProps<T>) => JSX.Element;
+export declare const ListScreen: <T extends BasicModelInstance>({ model, modelName, listData, listRequest, deleteRequest, basePath, deleteFeature, updateFeature, addFeature, detailsFeature, onRequestList, onClickDeleteItem, }: ListScreenProps<T>) => JSX.Element;

package/dist/esm/types/generators/model-router/screens/screens.types.d.ts

@@ -8,4 +8,24 @@ export interface BaseScreenProps {
      * Structure that represents the fields of the model
      */
     model: Model;
+    /**
+     * Path to attach before each internal ModelRouter path
+     */
+    basePath?: string;
+    /**
+     * If true delete features are enabled
+     */
+    deleteFeature?: boolean;
+    /**
+     * If true update features are enabled
+     */
+    updateFeature?: boolean;
+    /**
+     * If true add features are enabled
+     */
+    addFeature?: boolean;
+    /**
+     * If true details features are enabled
+     */
+    detailsFeature?: boolean;
 }

package/dist/esm/types/generators/model-router/screens/update-screen.d.ts

@@ -26,4 +26,4 @@ export interface UpdateScreenProps<T extends BasicModelInstance> extends BaseScr
      */
     updateItem?: T;
 }
-export declare const UpdateScreen: <T extends BasicModelInstance>({ model, modelName, submitUpdateItemRequest, updateItemRequest, updateItem, onSubmitUpdateItem, onRequestUpdateItem, }: UpdateScreenProps<T>) => JSX.Element;
+export declare const UpdateScreen: <T extends BasicModelInstance>({ model, modelName, basePath, submitUpdateItemRequest, updateItemRequest, updateItem, onSubmitUpdateItem, onRequestUpdateItem, }: UpdateScreenProps<T>) => JSX.Element;

package/dist/esm/types/index.d.ts

@@ -2,3 +2,4 @@ export * from "./components";
 export * from "./utils";
 export * from "./layouts";
 export * from "./generators";
+export * from "./providers";

package/dist/index.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import * as _mui_material from '@mui/material';
-import { PropTypes, LinkProps as LinkProps$1, AppBarProps as AppBarProps$1, DrawerProps as DrawerProps$1, SxProps, Theme, GridProps, Color } from '@mui/material';
+import { PropTypes, LinkProps as LinkProps$1, AppBarProps as AppBarProps$1, DrawerProps as DrawerProps$1, SxProps, Theme, GridProps, Color, AlertColor } from '@mui/material';
 import * as React from 'react';
-import React__default, { FunctionComponent, ReactElement, PropsWithChildren, ReactNode } from 'react';
+import React__default, { FunctionComponent, ReactElement, PropsWithChildren, ReactNode, Dispatch, SetStateAction } from 'react';
 import * as _mui_material_OverridableComponent from '@mui/material/OverridableComponent';
 import { LinkProps } from 'react-router-dom';
 import * as _emotion_styled from '@emotion/styled';
@@ -519,6 +519,26 @@ interface BaseScreenProps {
      * Structure that represents the fields of the model
      */
     model: Model;
+    /**
+     * Path to attach before each internal ModelRouter path
+     */
+    basePath?: string;
+    /**
+     * If true delete features are enabled
+     */
+    deleteFeature?: boolean;
+    /**
+     * If true update features are enabled
+     */
+    updateFeature?: boolean;
+    /**
+     * If true add features are enabled
+     */
+    addFeature?: boolean;
+    /**
+     * If true details features are enabled
+     */
+    detailsFeature?: boolean;
 }
 
 interface UpdateScreenProps<T extends BasicModelInstance$1> extends BaseScreenProps {
@@ -615,4 +635,33 @@ interface ModelFormProps<T extends BasicModelInstance> {
 }
 declare const ModelForm: <T extends BasicModelInstance>({ model, saveButtonText, onSubmit, initialValues, }: ModelFormProps<T>) => JSX.Element;
 
-export { AppBarComponent, AppBarElement, AppBarProfile, AppBarProps, AppBarWithDrawerLayout, AppBarWithDrawerLayoutProps, BasicModelInstance, Bullet, BulletProps, BulletVariant, CenterContainer, CenterContainerProps, Content, ContentComponent, ContentElement, ContentProps, Drawer, DrawerComponent, DrawerContent, DrawerContentComponent, DrawerContentElement, DrawerContentProps, DrawerContext, DrawerContextProps, DrawerElement, DrawerItem, DrawerItemProps, DrawerProps, DrawerProvider, DrawerSection, DrawerSectionProps, EnhancedRemoteTable, EnhancedTable, EnhancedTableHead, GroupField, GroupValueCard, GroupValueCardProps, GroupValueItem, GroupValueItemComponent, GroupValueItemElement, GroupValueItemProps, HeadCell, Header, HeaderAction, HeaderActionVariant, HeaderBreadcrumb, HeaderComponent, HeaderElement, HeaderLayout, HeaderPreset, HeaderProps, HeaderTab, Label, LabelProps, LabelVariant, Link, LinkBehaviour, MiniAppBar, MiniDrawer, Model, ModelField, ModelForm, ModelFormProps, ModelRouter, ModelRouterProps, Nav, NavItem, NavItemAvatar, NavItemBullet, NavItemLabel, NavSection, ObjectDetails, ObjectDetailsProps, Order, Placeholder, PlaceholderAction, PlaceholderIconArgs, PlaceholderProps, QueryContainer, QueryContainerError, QueryContainerProps, QueryContainerSuccess, SignIn, TabCard, TabPanel, TableList, TableListProps, TableRowOption, UndefinedProvider, ValueBoolean, ValueBooleanProps, ValueCard, ValueCardProps, ValueText, ValueTextProps, bulletClasses, getRandomItem, groupValueItemClasses, labelClasses, newArrayWithSize, useDrawer, useGetDefaultThemeColor };
+declare type NotificationCenterProviderProps = PropsWithChildren<{
+    autoHideDuration?: number;
+}>;
+declare const NotificationCenterProvider: ({ children, autoHideDuration, }: NotificationCenterProviderProps) => JSX.Element;
+
+declare const NotificationCenterProviderUndefinedError: Error;
+declare type SnackbarContentType = React__default.ReactElement<any, any> | ((key: string) => React__default.ReactElement<any, any>);
+declare type SnackbarActionType = React__default.ReactNode | ((key: string) => React__default.ReactNode);
+interface Notification {
+    severity: AlertColor;
+    title?: string;
+    message: string;
+}
+interface NotificationCenterProps {
+    show(notification: Notification): void;
+    hide(): void;
+}
+declare const NotificationCenterContext: React__default.Context<NotificationCenterProps | undefined>;
+declare const useNotificationCenter: () => NotificationCenterProps;
+
+declare const TabContext: React.Context<[number, Dispatch<SetStateAction<number>>]>;
+declare const TabContextProvider: React.Provider<[number, Dispatch<SetStateAction<number>>]>;
+declare const useTab: () => [number, Dispatch<SetStateAction<number>>];
+
+declare type TabProviderProps = PropsWithChildren<{
+    initialValue?: number;
+}>;
+declare const TabProvider: ({ children, initialValue }: TabProviderProps) => JSX.Element;
+
+export { AppBarComponent, AppBarElement, AppBarProfile, AppBarProps, AppBarWithDrawerLayout, AppBarWithDrawerLayoutProps, BasicModelInstance, Bullet, BulletProps, BulletVariant, CenterContainer, CenterContainerProps, Content, ContentComponent, ContentElement, ContentProps, Drawer, DrawerComponent, DrawerContent, DrawerContentComponent, DrawerContentElement, DrawerContentProps, DrawerContext, DrawerContextProps, DrawerElement, DrawerItem, DrawerItemProps, DrawerProps, DrawerProvider, DrawerSection, DrawerSectionProps, EnhancedRemoteTable, EnhancedTable, EnhancedTableHead, GroupField, GroupValueCard, GroupValueCardProps, GroupValueItem, GroupValueItemComponent, GroupValueItemElement, GroupValueItemProps, HeadCell, Header, HeaderAction, HeaderActionVariant, HeaderBreadcrumb, HeaderComponent, HeaderElement, HeaderLayout, HeaderPreset, HeaderProps, HeaderTab, Label, LabelProps, LabelVariant, Link, LinkBehaviour, MiniAppBar, MiniDrawer, Model, ModelField, ModelForm, ModelFormProps, ModelRouter, ModelRouterProps, Nav, NavItem, NavItemAvatar, NavItemBullet, NavItemLabel, NavSection, Notification, NotificationCenterContext, NotificationCenterProps, NotificationCenterProvider, NotificationCenterProviderProps, NotificationCenterProviderUndefinedError, ObjectDetails, ObjectDetailsProps, Order, Placeholder, PlaceholderAction, PlaceholderIconArgs, PlaceholderProps, QueryContainer, QueryContainerError, QueryContainerProps, QueryContainerSuccess, SignIn, SnackbarActionType, SnackbarContentType, TabCard, TabContext, TabContextProvider, TabPanel, TabProvider, TableList, TableListProps, TableRowOption, UndefinedProvider, ValueBoolean, ValueBooleanProps, ValueCard, ValueCardProps, ValueText, ValueTextProps, bulletClasses, getRandomItem, groupValueItemClasses, labelClasses, newArrayWithSize, useDrawer, useGetDefaultThemeColor, useNotificationCenter, useTab };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pautena/react-design-system",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "My custom design system on top of MUI",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -86,10 +86,21 @@
     "rollup-plugin-dts": "^4.2.2",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-terser": "^7.0.2",
-    "storybook-addon-react-router-v6": "^0.1.10",
     "tslib": "^2.4.0",
     "typescript": "^4.7.4"
   },
+  "peerDependencies": {
+    "@emotion/react": "^11.5.0",
+    "@emotion/styled": "^11.3.0",
+    "@mui/icons-material": "^5.0.0",
+    "@mui/lab": "^5.0.0",
+    "@mui/material": "^5.0.0",
+    "@mui/x-data-grid": "^5.13.0",
+    "@types/react": "^17.0.0 || ^18.0.0",
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0",
+    "react-router-dom": "^6.0.0"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/pautena/react-design-system.git"

package/src/components/app-bar/app-bar.stories.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import { ComponentMeta } from "@storybook/react";
+import { createTemplate } from "../../storybook";
+import { AppBar } from "./app-bar";
+import { DrawerProvider } from "../drawer";
+
+export default {
+  title: "AppBars/AppBar",
+  component: AppBar,
+  parameters: {
+    layout: "fullscreen",
+  },
+} as ComponentMeta<typeof AppBar>;
+
+const Template = createTemplate((args) => {
+  return (
+    <DrawerProvider>
+      <AppBar {...args} />
+    </DrawerProvider>
+  );
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  title: "Lorem ipsum",
+  menu: true,
+};
+
+export const WithSearch = Template.bind({});
+WithSearch.args = {
+  title: "Lorem ipsum",
+  search: true,
+  menu: true,
+};
+
+export const WithoutTitle = Template.bind({});
+WithoutTitle.args = {
+  menu: true,
+};
+
+export const WihtoutMenu = Template.bind({});
+WihtoutMenu.args = {
+  title: "Lorem ipsum",
+  menu: false,
+};
+
+export const WithProfile = Template.bind({});
+WithProfile.args = {
+  title: "Lorem ipsum",
+  menu: true,
+  profile: {
+    name: "Test user",
+  },
+};

package/src/components/app-bar/app-bar.test.tsx

@@ -0,0 +1,142 @@
+import React from "react";
+import { fireEvent, render, screen } from "../../tests";
+import { AppBar } from "./app-bar";
+import { DrawerProvider } from "../drawer";
+import { AppBarProfile } from "./app-bar.types";
+import userEvent from "@testing-library/user-event";
+
+const profile: AppBarProfile = {
+  name: "John Smith",
+};
+
+describe("AppBar", () => {
+  const renderComponent = ({
+    search,
+    title,
+    menu,
+    initialOpen,
+    profile,
+  }: {
+    title?: string;
+    search?: boolean;
+    menu?: boolean;
+    initialOpen?: boolean;
+    profile?: AppBarProfile;
+  } = {}) => {
+    const onClickSignOut = jest.fn();
+    const instance = render(
+      <DrawerProvider initialOpen={initialOpen}>
+        <AppBar
+          title={title}
+          menu={menu}
+          search={search}
+          profile={profile}
+          onClickSignOut={onClickSignOut}
+        />
+      </DrawerProvider>,
+    );
+    return { ...instance, onClickSignOut };
+  };
+
+  const clickOutsideProfileMenu = () => {
+    const child = screen.getByRole("presentation").firstChild;
+    expect(child).toBeDefined();
+    child && fireEvent.click(child);
+  };
+
+  describe("title", () => {
+    it("wouldn't render a title if it's not defined", () => {
+      renderComponent({ title: undefined });
+
+      expect(screen.queryByRole("heading", { level: 1 })).not.toBeInTheDocument();
+    });
+
+    it("would render a title if it's defined", () => {
+      renderComponent({ title: "Lorem ipsum" });
+
+      expect(screen.queryByRole("heading", { level: 1, name: /lorem ipsum/i })).toBeInTheDocument();
+    });
+  });
+
+  describe("menu", () => {
+    it("wouldn't render a menu button if menu is not defined", () => {
+      renderComponent();
+
+      expect(screen.queryByRole("button", { name: /open drawer/i })).not.toBeInTheDocument();
+    });
+
+    it("wouldn't render a menu button if menu is false", () => {
+      renderComponent({ menu: false });
+
+      expect(screen.queryByRole("button", { name: /open drawer/i })).not.toBeInTheDocument();
+    });
+
+    it("would render a menu button if menu is true", () => {
+      renderComponent({ menu: true });
+
+      expect(screen.getByRole("button", { name: /open drawer/i })).toBeInTheDocument();
+    });
+  });
+
+  describe("search", () => {
+    it("wouldn't render a search box by default", () => {
+      renderComponent();
+
+      expect(screen.queryByRole("search")).not.toBeInTheDocument();
+    });
+
+    it("wouldn't render a search box if search is false", () => {
+      renderComponent({ search: false });
+
+      expect(screen.queryByRole("search")).not.toBeInTheDocument();
+    });
+
+    it("would render a search box if search is true", () => {
+      renderComponent({ search: true });
+
+      expect(screen.getByRole("search")).toBeInTheDocument();
+    });
+  });
+
+  describe("profile", () => {
+    it("wouldn't render the user profile if it's not set", () => {
+      renderComponent({ profile: undefined });
+
+      expect(screen.queryByRole("button", { name: /menu button/i })).not.toBeInTheDocument();
+    });
+
+    it("would render the user profile if the profile is defined", () => {
+      renderComponent({ profile });
+
+      expect(screen.getByRole("button", { name: /menu button/i })).toBeInTheDocument();
+    });
+
+    describe("the user click the profile button", () => {
+      it("would open the menu", async () => {
+        renderComponent({ profile });
+
+        await userEvent.click(screen.getByRole("button", { name: /menu button/i }));
+
+        expect(screen.getByRole("menu")).toBeInTheDocument();
+      });
+    });
+
+    it("would call onClickSignOut if the user press the sign out button", async () => {
+      const { onClickSignOut } = renderComponent({ profile });
+
+      await userEvent.click(screen.getByRole("button", { name: /menu button/i }));
+      await userEvent.click(screen.getByRole("menuitem", { name: /sign out/i }));
+
+      expect(onClickSignOut).toHaveBeenCalledTimes(1);
+    });
+
+    it("would hide the menu if the focus changes to an external element", async () => {
+      renderComponent({ profile, title: "lorem ipsum" });
+
+      await userEvent.click(screen.getByRole("button", { name: /menu button/i }));
+      clickOutsideProfileMenu();
+
+      expect(screen.queryByRole("menu")).not.toBeInTheDocument();
+    });
+  });
+});

package/src/components/app-bar/app-bar.tsx

@@ -0,0 +1,150 @@
+import * as React from "react";
+import { styled, alpha } from "@mui/material/styles";
+import MuiAppBar from "@mui/material/AppBar";
+import Box from "@mui/material/Box";
+import Toolbar from "@mui/material/Toolbar";
+import IconButton from "@mui/material/IconButton";
+import Typography from "@mui/material/Typography";
+import InputBase from "@mui/material/InputBase";
+import MenuItem from "@mui/material/MenuItem";
+import Menu from "@mui/material/Menu";
+import MenuIcon from "@mui/icons-material/Menu";
+import SearchIcon from "@mui/icons-material/Search";
+import AccountCircle from "@mui/icons-material/AccountCircle";
+import { AppBarComponent, AppBarProps } from "./app-bar.types";
+import { useDrawer } from "../drawer/drawer.context";
+
+const Search = styled("div")(({ theme }) => ({
+  position: "relative",
+  borderRadius: theme.shape.borderRadius,
+  backgroundColor: alpha(theme.palette.common.white, 0.15),
+  "&:hover": {
+    backgroundColor: alpha(theme.palette.common.white, 0.25),
+  },
+  marginRight: theme.spacing(2),
+  marginLeft: 0,
+  width: "100%",
+  [theme.breakpoints.up("sm")]: {
+    marginLeft: theme.spacing(3),
+    width: "auto",
+  },
+}));
+
+const SearchIconWrapper = styled("div")(({ theme }) => ({
+  padding: theme.spacing(0, 2),
+  height: "100%",
+  position: "absolute",
+  pointerEvents: "none",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+}));
+
+const StyledInputBase = styled(InputBase)(({ theme }) => ({
+  color: "inherit",
+  "& .MuiInputBase-input": {
+    padding: theme.spacing(1, 1, 1, 0),
+    // vertical padding + font size from searchIcon
+    paddingLeft: `calc(1em + ${theme.spacing(4)})`,
+    transition: theme.transitions.create("width"),
+    width: "100%",
+    [theme.breakpoints.up("md")]: {
+      width: "20ch",
+    },
+  },
+}));
+
+export const AppBar: AppBarComponent = ({
+  search = false,
+  title,
+  menu = false,
+  profile,
+  onClickSignOut,
+  ...rest
+}: AppBarProps) => {
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+  const { isOpen, open } = useDrawer();
+
+  const handleMenu = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  return (
+    <MuiAppBar {...rest}>
+      <Toolbar>
+        {menu && (
+          <IconButton
+            color="inherit"
+            aria-label="open drawer"
+            onClick={open}
+            edge="start"
+            sx={{
+              marginRight: 5,
+              ...(isOpen && { display: "none" }),
+            }}
+          >
+            <MenuIcon />
+          </IconButton>
+        )}
+        {title && (
+          <Typography
+            variant="h6"
+            component="h1"
+            role="heading"
+            aria-level={1}
+            noWrap
+            sx={{ display: { xs: "none", sm: "block" } }}
+          >
+            {title}
+          </Typography>
+        )}
+        {search && (
+          <Search role="search">
+            <SearchIconWrapper>
+              <SearchIcon />
+            </SearchIconWrapper>
+            <StyledInputBase placeholder="Search…" inputProps={{ "aria-label": "search" }} />
+          </Search>
+        )}
+        <Box sx={{ flexGrow: 1 }} />
+        {profile && (
+          <Box sx={{ display: { xs: "none", md: "flex" } }}>
+            <IconButton
+              size="large"
+              aria-controls="menu-appbar"
+              aria-haspopup="true"
+              aria-label="menu button"
+              role="button"
+              aria-expanded={Boolean(anchorEl)}
+              onClick={handleMenu}
+              color="inherit"
+            >
+              <AccountCircle />
+            </IconButton>
+            <Menu
+              id="menu-appbar"
+              anchorEl={anchorEl}
+              anchorOrigin={{
+                vertical: "top",
+                horizontal: "right",
+              }}
+              keepMounted
+              transformOrigin={{
+                vertical: "top",
+                horizontal: "right",
+              }}
+              open={Boolean(anchorEl)}
+              onClose={handleClose}
+            >
+              <MenuItem onClick={onClickSignOut}>Sign out</MenuItem>
+            </Menu>
+          </Box>
+        )}
+      </Toolbar>
+    </MuiAppBar>
+  );
+};

package/src/components/app-bar/app-bar.types.ts

@@ -0,0 +1,17 @@
+import { FunctionComponent, ReactElement } from "react";
+import { AppBarProps as MuiAppBarProps } from "@mui/material";
+
+export interface AppBarProfile {
+  name: string;
+}
+
+export interface AppBarProps extends MuiAppBarProps {
+  menu?: boolean;
+  title?: string;
+  search?: boolean;
+  profile?: AppBarProfile;
+  onClickSignOut: () => void;
+}
+
+export type AppBarComponent = FunctionComponent<AppBarProps>;
+export type AppBarElement = ReactElement<AppBarProps, AppBarComponent>;

package/src/components/app-bar/index.ts

@@ -0,0 +1,3 @@
+export * from "./mini-app-bar";
+export * from "./mini-app-bar";
+export * from "./app-bar.types";

package/src/components/app-bar/mini-app-bar/index.ts

@@ -0,0 +1 @@
+export * from "./mini-app-bar";

package/src/components/app-bar/mini-app-bar/mini-app-bar.tsx

@@ -0,0 +1,31 @@
+import { styled } from "@mui/material/styles";
+import { AppBar } from "../app-bar";
+import { AppBarProps } from "@mui/material";
+import { drawerWidth } from "../../drawer/drawer.mixins";
+import { AppBarComponent } from "../app-bar.types";
+import { useDrawer } from "../../drawer/drawer.context";
+
+export const MiniAppBar: AppBarComponent = styled(AppBar)<AppBarProps>(({ theme }) => {
+  const { isOpen } = useDrawer();
+
+  return {
+    zIndex: theme.zIndex.drawer + 1,
+    transition: theme.transitions.create(["width", "margin"], {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.leavingScreen,
+    }),
+    ...(isOpen && {
+      marginLeft: drawerWidth,
+      width: `calc(100% - ${drawerWidth}px)`,
+      transition: theme.transitions.create(["width", "margin"], {
+        easing: theme.transitions.easing.sharp,
+        duration: theme.transitions.duration.enteringScreen,
+      }),
+    }),
+  };
+});
+
+MiniAppBar.defaultProps = {
+  position: "fixed",
+  menu: true,
+};

package/src/components/bullet/bullet.stories.tsx

@@ -0,0 +1,43 @@
+import { ComponentMeta } from "@storybook/react";
+import { createTemplate } from "../../storybook";
+import { Bullet } from "./bullet";
+
+export default {
+  title: "Data Display/Bullet",
+  component: Bullet,
+  parameters: {
+    layout: "centered",
+  },
+} as ComponentMeta<typeof Bullet>;
+
+const Template = createTemplate(Bullet);
+
+export const Primary = Template.bind({});
+Primary.args = {
+  variant: "primary",
+};
+
+export const Secondary = Template.bind({});
+Secondary.args = {
+  variant: "secondary",
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  variant: "default",
+};
+
+export const Info = Template.bind({});
+Info.args = {
+  variant: "info",
+};
+
+export const Warning = Template.bind({});
+Warning.args = {
+  variant: "warning",
+};
+
+export const Error = Template.bind({});
+Error.args = {
+  variant: "error",
+};

package/src/components/bullet/bullet.test.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { Bullet, BulletVariant } from "./bullet";
+import { render, screen } from "../../tests";
+
+describe("Bullet", () => {
+  const renderComponent = (variant: BulletVariant | undefined = undefined) => {
+    return render(<Bullet variant={variant} />);
+  };
+
+  it("renders as primary without a variant", () => {
+    renderComponent(undefined);
+
+    expect(screen.getByRole("bullet")).toHaveAttribute("aria-describedby", "primary");
+  });
+
+  it.each([["primary"], ["secondary"], ["default"], ["info"], ["warning"], ["error"]])(
+    "renders correctly with variant %s",
+    (variant: string) => {
+      renderComponent(variant as BulletVariant);
+
+      expect(screen.getByRole("bullet")).toHaveAttribute("aria-describedby", variant);
+    },
+  );
+});

package/src/components/bullet/bullet.tsx

@@ -0,0 +1,30 @@
+import { Badge } from "@mui/material";
+import React from "react";
+
+export type BulletVariant = "primary" | "secondary" | "default" | "info" | "warning" | "error";
+
+export const bulletClasses = {
+  root: "RdsBullet-root",
+};
+
+export interface BulletProps {
+  /**
+   * Color palette used to draw the component
+   */
+  variant?: BulletVariant;
+}
+
+/**
+ * Dot to attract the user attention
+ */
+export const Bullet = ({ variant = "primary" }: BulletProps) => {
+  return (
+    <Badge
+      color={variant}
+      variant="dot"
+      className={bulletClasses.root}
+      role="bullet"
+      aria-describedby={variant}
+    />
+  );
+};

package/src/components/bullet/index.ts

@@ -0,0 +1 @@
+export * from "./bullet";