refactor(navigationfooter): refcatored component implementation

added tests, storybook stories

packages/components/src/core/NavigationFooter/NavigationFooter.types.ts

@@ -0,0 +1,38 @@
+import { ReactNode, ElementType } from "react";
+import { TagProps } from "../Tag";
+
+export interface NavigationFooterNavItem {
+  label: string;
+  url: string;
+  component?: ElementType;
+  linkProps?: Record<string, unknown>;
+}
+
+export interface FooterImage {
+  image: ReactNode;
+  url: string;
+}
+
+export interface NavigationFooterProps {
+  hasInvertedStyle?: boolean;
+  images?: FooterImage[];
+  logo?: ReactNode;
+  logoUrl?: string;
+  navItems?: NavigationFooterNavItem[];
+  navLinks?: NavigationFooterNavItem[];
+  tag?: string;
+  tagColor?: TagProps["tagColor"];
+  title: string;
+}
+
+export interface NavItemProps {
+  item: NavigationFooterNavItem;
+  hasInvertedStyle?: boolean;
+  isNarrow?: boolean;
+}
+
+export interface FooterLinkProps {
+  link: NavigationFooterNavItem;
+  showDivider: boolean;
+  hasInvertedStyle?: boolean;
+}

packages/components/src/core/NavigationFooter/__storybook__/constants.tsx

@@ -0,0 +1,54 @@
+import { ReactNode } from "react";
+import { getSemanticColors } from "../../styles";
+import { useTheme } from "@mui/material";
+
+export function ExampleLogo({
+  children,
+  height,
+  width,
+}: {
+  children?: ReactNode;
+  height: number;
+  width: number;
+}) {
+  const theme = useTheme();
+  const colors = getSemanticColors({ theme });
+
+  return (
+    <div
+      style={{
+        alignItems: "center",
+        border: `1px dashed ${colors?.base.border}`,
+        color: colors?.base.textPrimary,
+        display: "flex",
+        fontSize: 10,
+        fontWeight: "normal",
+        height,
+        justifyContent: "center",
+        whiteSpace: "nowrap",
+        width,
+      }}
+    >
+      {children}
+    </div>
+  );
+}
+
+export const NAVIGATION_FOOTER_LOGO_OPTIONS = [
+  <ExampleLogo key="logo" width={50} height={24}>
+    Logo Slot
+  </ExampleLogo>,
+  null,
+];
+
+export const NAVIGATION_FOOTER_EXCLUDED_CONTROLS = [
+  "hasInvertedStyle",
+  "images",
+  "logo",
+  "logoUrl",
+  "navItems",
+  "navLinks",
+  "tag",
+  "tagColor",
+  "title",
+];

packages/components/src/core/NavigationFooter/__storybook__/index.stories.tsx

@@ -0,0 +1,117 @@
+import { Args, Meta } from "@storybook/react";
+import { NavigationFooter } from "./stories/default";
+import {
+  ExampleLogo,
+  NAVIGATION_FOOTER_EXCLUDED_CONTROLS,
+  NAVIGATION_FOOTER_LOGO_OPTIONS,
+} from "./constants";
+import { TestDemo } from "./stories/test";
+import { BADGE } from "@geometricpanda/storybook-addon-badges";
+import { TAG_PANEL_COLORS } from "src/core/Tag/__storybook__/constants";
+import { NavigationFooterNavItem } from "../NavigationFooter.types";
+
+export default {
+  argTypes: {
+    hasInvertedStyle: {
+      control: { type: "boolean" },
+    },
+    images: {
+      control: { type: "object" },
+    },
+    logo: {
+      control: {
+        labels: ["Logo Placeholder", "None"],
+        type: "select",
+      },
+      mapping: NAVIGATION_FOOTER_LOGO_OPTIONS,
+      options: Object.keys(NAVIGATION_FOOTER_LOGO_OPTIONS),
+    },
+    logoUrl: {
+      control: { type: "text" },
+    },
+    navItems: {
+      control: { type: "object" },
+    },
+    navLinks: {
+      control: { type: "object" },
+    },
+    tag: {
+      control: { type: "text" },
+    },
+    tagColor: {
+      control: {
+        labels: [
+          "info",
+          "positive",
+          "notice",
+          "negative",
+          "beta",
+          "Custom colors for Label, Background, Icon",
+        ],
+        type: "select",
+      },
+      mapping: TAG_PANEL_COLORS,
+      options: Object.keys(TAG_PANEL_COLORS),
+    },
+    title: {
+      control: { type: "text" },
+    },
+  },
+  component: NavigationFooter,
+  parameters: {
+    badges: [BADGE.BETA],
+  },
+  title: "Components/NavigationFooter [beta]",
+} as Meta;
+
+export const Default = {
+  args: {
+    hasInvertedStyle: false,
+    images: [
+      {
+        image: (
+          <ExampleLogo width={100} height={40}>
+            Image Slot
+          </ExampleLogo>
+        ),
+        url: "https://example.com/1",
+      },
+      {
+        image: (
+          <ExampleLogo width={100} height={40}>
+            Image Slot
+          </ExampleLogo>
+        ),
+        url: "https://example.com/2",
+      },
+    ],
+    logo: NAVIGATION_FOOTER_LOGO_OPTIONS[0],
+    logoUrl: "https://example.com",
+    navItems: Array.from(Array(5)).map<NavigationFooterNavItem>((_, idx) => ({
+      label: `Nav Item ${idx + 1}`,
+      url: `https://example.com/nav/${idx + 1}`,
+    })),
+    navLinks: Array.from(Array(5)).map<NavigationFooterNavItem>((_, idx) => ({
+      label: `Link Item ${idx + 1}`,
+      url: `https://example.com/nav/${idx + 1}`,
+    })),
+    tag: "Beta",
+    tagColor: "beta",
+    title: "Logo Name",
+  },
+  parameters: { layout: "fullscreen" },
+};
+
+// Test
+export const Test = {
+  parameters: {
+    controls: {
+      exclude: NAVIGATION_FOOTER_EXCLUDED_CONTROLS,
+    },
+    layout: "fullscreen",
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (args: Args) => <TestDemo {...args} />,
+};

packages/components/src/core/NavigationFooter/__storybook__/stories/default.tsx

@@ -0,0 +1,6 @@
+import { Args } from "@storybook/react";
+import RawNavigationFooter from "../../index";
+
+export const NavigationFooter = (props: Args): JSX.Element => {
+  return <RawNavigationFooter {...props} title={props.title} />;
+};

packages/components/src/core/NavigationFooter/__storybook__/stories/test.tsx

@@ -0,0 +1,12 @@
+import { Args } from "@storybook/react";
+import RawNavigationFooter from "../../index";
+
+export const TestDemo = (props: Args): JSX.Element => {
+  return (
+    <RawNavigationFooter
+      data-testid="navigation-footer"
+      title="Test Title"
+      {...props}
+    />
+  );
+};

packages/components/src/core/NavigationFooter/__tests__/NavigationFooter.namespace-test.tsx

@@ -0,0 +1,48 @@
+import { NavigationFooterProps, NavigationFooter } from "@czi-sds/components";
+
+const LINK_URL = "https://example.com";
+
+const NavigationFooterNameSpaceTest = (props: NavigationFooterProps) => {
+  return (
+    <NavigationFooter
+      title="Title"
+      hasInvertedStyle={false}
+      logo={<div>Logo</div>}
+      logoUrl={LINK_URL}
+      navItems={[
+        {
+          label: "Nav Item 1",
+          url: LINK_URL,
+        },
+        {
+          label: "Nav Item 2",
+          url: LINK_URL,
+        },
+      ]}
+      navLinks={[
+        {
+          label: "Link 1",
+          url: LINK_URL,
+        },
+        {
+          label: "Link 2",
+          url: LINK_URL,
+        },
+      ]}
+      images={[
+        {
+          image: <img src="image1.png" alt="alt text" />,
+          url: LINK_URL,
+        },
+        {
+          image: <img src="image2.png" alt="alt text" />,
+          url: LINK_URL,
+        },
+      ]}
+      tag="Beta"
+      tagColor="beta"
+    />
+  );
+};
+
+export default NavigationFooterNameSpaceTest;