diff --git a/src/index.tsx b/src/index.tsx index de02dc51..89d277bf 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -136,6 +136,7 @@ export * from "./stories/navigation/nav/nav-item"; // --- Notifications --- export * from "./stories/notifications"; +export * from "./stories/notifications/global-alert"; // --- Pagination --- export * from "./stories/pagination"; diff --git a/src/stories/notifications/global-alert/index.stories.tsx b/src/stories/notifications/global-alert/index.stories.tsx new file mode 100644 index 00000000..de2097ff --- /dev/null +++ b/src/stories/notifications/global-alert/index.stories.tsx @@ -0,0 +1,34 @@ +import { Meta as ComponentMeta, StoryFn as Story } from "@storybook/react"; +import { + GlobalAlert as UgGlobalAlert, + GlobalAlertProps +} from "."; +import { Anchor } from "../../buttons/anchor"; + +const GlobalAlertTemplate: Story = ({ ...props }) => ( + + + New update available + Your account will automatically update in 5 days.{' '} + + Find out more + + + Update now + + +); + +export const GlobalAlert = GlobalAlertTemplate.bind({}); +GlobalAlert.args = { + type: "info" +}; + +export default { + title: "Molecules/Notification", + component: UgGlobalAlert, + parameters: { + // Sets a delay for the component's stories + chromatic: { delay: 300 }, + }, +} as ComponentMeta; diff --git a/src/stories/notifications/global-alert/index.tsx b/src/stories/notifications/global-alert/index.tsx new file mode 100644 index 00000000..1092e15c --- /dev/null +++ b/src/stories/notifications/global-alert/index.tsx @@ -0,0 +1,24 @@ +import { + GlobalAlert as ZendeskGlobalAlert, + IGlobalAlertProps +} from "@zendeskgarden/react-notifications"; +import { forwardRef } from "react"; + +export interface GlobalAlertProps extends IGlobalAlertProps {} + +const GlobalAlertComponent = forwardRef((props, ref) => ( + +)); + +export const GlobalAlert = GlobalAlertComponent as typeof GlobalAlertComponent & { + Title: typeof ZendeskGlobalAlert.Title; + Button: typeof ZendeskGlobalAlert.Button; + Close: typeof ZendeskGlobalAlert.Close; + Content: typeof ZendeskGlobalAlert.Content; +}; + +GlobalAlert.Title = ZendeskGlobalAlert.Title; +GlobalAlert.Button = ZendeskGlobalAlert.Button; +GlobalAlert.Close = ZendeskGlobalAlert.Close; +GlobalAlert.Content = ZendeskGlobalAlert.Content; +