Implemented Breadcrumbs component (#263)

Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>

src/components/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -0,0 +1,90 @@
+// This file is part of MinIO Design System
+// Copyright (c) 2023 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Fragment } from "react";
+import { Meta, Story } from "@storybook/react";
+
+import Breadcrumbs from "./Breadcrumbs";
+import { BreadcrumbsProps } from "./Breadcrumbs.types";
+
+import StoryThemeProvider from "../../utils/StoryThemeProvider";
+import { GlobalStyles } from "../index";
+import Button from "../Button/Button";
+import CopyIcon from "../Icons/CopyIcon";
+
+export default {
+  title: "MDS/Layout/Breadcrumbs",
+  component: Breadcrumbs,
+  argTypes: {},
+} as Meta<typeof Breadcrumbs>;
+
+const Template: Story<BreadcrumbsProps> = (args) => (
+  <StoryThemeProvider>
+    <GlobalStyles />
+    <Breadcrumbs
+      additionalOptions={
+        <Fragment>
+          <Button
+            id={"copy-path"}
+            icon={
+              <CopyIcon
+                style={{
+                  width: "12px",
+                  height: "12px",
+                  fill: "#969FA8",
+                  marginTop: -1,
+                }}
+              />
+            }
+            variant={"regular"}
+            onClick={() => {
+              alert("Copy test");
+            }}
+            style={{
+              width: "28px",
+              height: "28px",
+              color: "#969FA8",
+              border: "#969FA8 1px solid",
+              marginRight: 5,
+            }}
+          />
+        </Fragment>
+      }
+      goBackFunction={() => {
+        alert("Go back!");
+      }}
+    >
+      <a href="#">First Link</a>
+      <span className={"slashSpacingStyle"}>/</span>
+      <a href="#">Second Link</a>
+      <span className={"slashSpacingStyle"}>/</span>
+      <a href="#">Third Link</a>
+      <span className={"slashSpacingStyle"}>/</span>
+      <a href="#">Fourth Link</a>
+      <span className={"slashSpacingStyle"}>/</span>
+      <a href="#">Fifth Link</a>
+      <span className={"slashSpacingStyle"}>/</span>
+      <a href="#">Sixth Link</a>
+      <span className={"slashSpacingStyle"}>/</span>
+      <a href="#">Seventh Link</a>
+      <span className={"slashSpacingStyle"}>/</span>
+      <a href="#">Eighth Link</a>
+    </Breadcrumbs>
+  </StoryThemeProvider>
+);
+
+export const Default = Template.bind({});
+Default.args = {};

src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -0,0 +1,110 @@
+// This file is part of MinIO Design System
+// Copyright (c) 2023 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { FC } from "react";
+import get from "lodash/get";
+import {
+  BreadcrumbsContainerProps,
+  BreadcrumbsProps,
+} from "./Breadcrumbs.types";
+import IconButton from "../IconButton/IconButton";
+import styled from "styled-components";
+import BackCaretIcon from "../Icons/BackCaretIcon";
+import Box from "../Box/Box";
+
+const BoxParent = styled.div<BreadcrumbsContainerProps>(({ theme, sx }) => {
+  return {
+    boxSizing: "border-box",
+    flexBasis: "100%",
+    width: "100%",
+    fontSize: 12,
+    color: get(theme, "breadcrumbs.textColor", "#969FA8"),
+    fontWeight: "bold",
+    border: `${get(theme, "breadcrumbs.border", "#eaeaea")} 1px solid`,
+    height: 38,
+    display: "flex",
+    alignItems: "center",
+    backgroundColor: get(theme, "breadcrumbs.backgroundColor", "#FCFCFD"),
+    marginRight: 10,
+    "& a": {
+      textDecoration: "none",
+      color: get(theme, "breadcrumbs.linksColor", "#969FA8"),
+      "&:hover": {
+        textDecoration: "underline",
+      },
+    },
+    "& .min-icon": {
+      width: 16,
+      minWidth: 16,
+    },
+    "& .backButton": {
+      border: `${get(
+        theme,
+        "breadcrumbs.backButton.border",
+        "#EAEDEE"
+      )} 1px solid`,
+      backgroundColor: get(
+        theme,
+        "breadcrumbs.backButton.backgroundColor",
+        "#FFF"
+      ),
+      borderLeft: 0,
+      borderRadius: 0,
+      width: 38,
+      height: 38,
+      marginRight: "10px",
+      "& > svg": {
+        fill: get(theme, "breadcrumbs.textColor", "#969FA8"),
+      },
+    },
+    "& .breadcrumbsList": {
+      textOverflow: "ellipsis" as const,
+      overflow: "hidden" as const,
+      whiteSpace: "nowrap" as const,
+      display: "inline-block" as const,
+      flexGrow: 1,
+      textAlign: "left" as const,
+      marginLeft: 15,
+      marginRight: 10,
+      width: 0, // WA to avoid overflow if child elements in flexbox list.**
+    },
+    "& .slashSpacingStyle": {
+      margin: "0 5px",
+    },
+    ...sx,
+  };
+});
+
+const Breadcrumbs: FC<BreadcrumbsProps> = ({
+  sx,
+  children,
+  additionalOptions,
+  goBackFunction,
+}) => {
+  return (
+    <BoxParent sx={sx}>
+      <IconButton onClick={goBackFunction} className={"backButton"}>
+        <BackCaretIcon />
+      </IconButton>
+      <Box className={"breadcrumbsList"} dir="rtl">
+        {children}
+      </Box>
+      {additionalOptions}
+    </BoxParent>
+  );
+};
+
+export default Breadcrumbs;

src/components/Breadcrumbs/Breadcrumbs.types.ts

@@ -0,0 +1,29 @@
+// This file is part of MinIO Design System
+// Copyright (c) 2023 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React from "react";
+import { CSSObject } from "styled-components";
+
+export interface BreadcrumbsProps {
+  sx?: CSSObject;
+  children: React.ReactNode;
+  additionalOptions: React.ReactNode;
+  goBackFunction: () => void;
+}
+
+export interface BreadcrumbsContainerProps {
+  sx?: CSSObject;
+}

src/global/global.types.ts

@@ -88,6 +88,19 @@ export interface InputBoxThemeProps {
   error: string;
 }
 
+export interface BreadcrumbsBackStyle {
+  border: string;
+  backgroundColor: string;
+}
+
+export interface BreadcrumbsThemeProps {
+  border: string;
+  backgroundColor: string;
+  linksColor: string;
+  backButton: BreadcrumbsBackStyle;
+  textColor: string;
+}
+
 export interface ThemeDefinitionProps {
   bgColor: string;
   fontColor: string;
@@ -112,4 +125,5 @@ export interface ThemeDefinitionProps {
   dataTable: DataTableThemeProps;
   backLink: BackLinkThemeProps;
   inputBox: InputBoxThemeProps;
+  breadcrumbs: BreadcrumbsThemeProps;
 }

src/global/themes.ts

@@ -59,6 +59,10 @@ export const lightColors = {
   backLinkColor: "#073052",
   backLinkArrow: "#081C42",
   backLinkHover: "#eaedee",
+  commonLinkColor: "#969FA8",
+  breadcrumbsBackground: "#FCFCFD",
+  breadcrumbsBackBorder: "#EAEDEE",
+  breadcrumbsText: "#969FA8",
 };
 
 export const darkColors = {
@@ -272,6 +276,16 @@ export const lightTheme: ThemeDefinitionProps = {
     backgroundColor: lightColors.white,
     error: lightColors.mainRed,
   },
+  breadcrumbs: {
+    border: lightColors.borderColor,
+    linksColor: lightColors.commonLinkColor,
+    textColor: lightColors.breadcrumbsText,
+    backgroundColor: lightColors.breadcrumbsBackground,
+    backButton: {
+      border: lightColors.breadcrumbsBackBorder,
+      backgroundColor: lightColors.white,
+    },
+  },
 };
 
 export const darkTheme: ThemeDefinitionProps = {
@@ -440,4 +454,14 @@ export const darkTheme: ThemeDefinitionProps = {
     backgroundColor: darkColors.dark,
     error: darkColors.mainRed,
   },
+  breadcrumbs: {
+    border: darkColors.borderColor,
+    linksColor: darkColors.mainGrey,
+    textColor: darkColors.mainGrey,
+    backgroundColor: darkColors.sectionOneBG,
+    backButton: {
+      border: darkColors.borderColor,
+      backgroundColor: darkColors.sectionOneBG,
+    },
+  },
 };