docs: add Snackbar documentation

apps/docs/src/pages/components/snackbar.mdx

@@ -0,0 +1,229 @@
+import { HvSnackbar, snackbarClasses } from "@hitachivantara/uikit-react-core";
+
+import Playground from "@docs/components/code/Playground";
+import { Description } from "@docs/components/page/Description";
+import { Page } from "@docs/components/page/Page";
+import { getComponentData } from "@docs/utils/component";
+
+export const getStaticProps = async ({ params }) => {
+  const meta = await getComponentData("Snackbar", "core", snackbarClasses);
+  return { props: { ssg: { meta } } };
+};
+
+<Description />
+
+<Page>
+
+<Playground
+  Component={HvSnackbar}
+  componentName="HvSnackbar"
+  controls={{
+    label: {
+      defaultValue: "This is an informational message.",
+    },
+    variant: {
+      defaultValue: "default",
+    },
+    showIcon: {
+      defaultValue: true,
+    },
+  }}
+  componentProps={{
+    open: true,
+    style: { position: "relative", top: 0 },
+  }}
+/>
+
+### Custom Icon
+
+You can pass a custom icon to the snackbar by using the `customIcon` prop.
+
+```tsx live
+<HvSnackbar
+  open
+  variant="success"
+  label="This is a snackbar with a custom icon."
+  customIcon={<Deploy color="base_dark" />}
+  style={{ position: "relative", top: 0 }}
+/>
+```
+
+### Actions
+
+Use the `action` prop to add an action to the snackbar. The `onAction` prop is a callback function that is called when the action is clicked.
+
+```tsx live
+<HvSnackbar
+  open
+  label="This is a snackbar with a custom action."
+  variant="warning"
+  customIcon={<Info color="base_dark" />}
+  action={{ id: "post", label: "Action", disabled: false }}
+  onAction={(evt, action) => {
+    alert(`Clicked ${action}`);
+  }}
+  style={{ position: "relative", top: 0 }}
+/>
+```
+
+### Long content
+
+Although not desirable, sometimes you may need to display a long message in the snackbar. You can combine the snackbar with the [`HvOverflowTooltip`](/components/overflow-tooltip) component to display the full message.
+
+```tsx live
+<div className="flex flex-col gap-2">
+  <HvSnackbar
+    open
+    label={
+      <HvOverflowTooltip data="This message uses HvOverflowTooltip to display ellipsis and a tooltip." />
+    }
+    style={{ position: "relative", top: 0 }}
+  />
+  <HvSnackbar
+    open
+    label={
+      <HvOverflowTooltip
+        paragraphOverflow
+        data="This message uses HvOverflowTooltip with paragraphOverflow to display ellipsis and a tooltip because it has a very very very very very very very very very very long text that takes more than 3 lines."
+      />
+    }
+    style={{ position: "relative", top: 0 }}
+  />
+</div>
+```
+
+### Customization
+
+You can customize the snackbar and change it's position, transition direction and autohide duration,.
+
+You can specify the position of the snackbar by using the `anchorOrigin` prop. To set the transition direction of the snackbar use the `transitionDirection` prop.
+
+The `setAutoHideDuration` prop is used to specify the duration in milliseconds after which the snackbar will automatically close. This will
+trigger the `onClose` callback of the snackbar component with the reason set to `timeout`.
+
+```tsx live
+import { useState } from "react";
+
+export default function Demo() {
+  const [open, setOpen] = useState(false);
+  const [autoHideDuration, setAutoHideDuration] = useState(3000);
+  const [anchorOrigin, setAnchorOrigin] = useState<
+    HvSnackbarProps["anchorOrigin"]
+  >({
+    vertical: "top",
+    horizontal: "right",
+  });
+  const [transitionDirection, setTransitionDirection] = useState("up");
+
+  const handleOpen = (origin: HvSnackbarProps["anchorOrigin"]) => {
+    setOpen(false);
+    setTimeout(() => {
+      setAnchorOrigin(origin);
+      setOpen(true);
+    }, 100);
+  };
+
+  const handleTransition = (val) => {
+    setOpen(false);
+    setTransitionDirection(val);
+  };
+
+  const handleClose = (_, reason) => {
+    if (reason === "timeout") {
+      setOpen(false);
+    }
+  };
+
+  const handleDurationChange = (_, val) => {
+    setAutoHideDuration(val);
+  };
+
+  return (
+    <div className="flex justify-center w-full">
+      <HvSnackbar
+        open={open}
+        label="Data saved successfully."
+        variant="success"
+        showIcon
+        anchorOrigin={anchorOrigin}
+        transitionDirection={transitionDirection}
+        autoHideDuration={autoHideDuration}
+        onClose={handleClose}
+      />
+      <div className="flex flex-col gap-4">
+        <div className="w-full flex justify-between">
+          <HvSelect
+            label="Transition direction"
+            value={transitionDirection}
+            onChange={(_, val) => handleTransition(val)}
+            style={{ width: "120px" }}
+          >
+            {["up", "down", "left", "right"].map((direction) => (
+              <HvOption key={direction} value={direction}>
+                {direction}
+              </HvOption>
+            ))}
+          </HvSelect>
+          <HvInput
+            type="number"
+            label="Autohide duration"
+            value={autoHideDuration}
+            onChange={handleDurationChange}
+          />
+        </div>
+        <div className="flex gap-4 w-full justify-between">
+          <HvButton
+            variant="primarySubtle"
+            onClick={() => handleOpen({ vertical: "top", horizontal: "left" })}
+          >
+            Top Left
+          </HvButton>
+          <HvButton
+            variant="primarySubtle"
+            onClick={() =>
+              handleOpen({ vertical: "top", horizontal: "center" })
+            }
+          >
+            Top Center
+          </HvButton>
+          <HvButton
+            variant="primarySubtle"
+            onClick={() => handleOpen({ vertical: "top", horizontal: "right" })}
+          >
+            Top Right
+          </HvButton>
+        </div>
+
+        <div className="flex gap-4 w-full">
+          <HvButton
+            variant="primarySubtle"
+            onClick={() =>
+              handleOpen({ vertical: "bottom", horizontal: "left" })
+            }
+          >
+            Bottom Left
+          </HvButton>
+          <HvButton
+            variant="primarySubtle"
+            onClick={() =>
+              handleOpen({ vertical: "bottom", horizontal: "center" })
+            }
+          >
+            Bottom Center
+          </HvButton>
+          <HvButton
+            variant="primarySubtle"
+            onClick={() =>
+              handleOpen({ vertical: "bottom", horizontal: "right" })
+            }
+          >
+            Bottom Right
+          </HvButton>
+        </div>
+      </div>
+    </div>
+  );
+}
+```
+
+</Page>