@gympass/yoga 7.88.2 → 7.89.0

package/esm/NavigationMenu/web/Item/styles.js

@@ -0,0 +1,151 @@
+import styled, { css } from "styled-components";
+import { media } from "@gympass/yoga-helpers";
+import Box from "../../../Box";
+import Tag from "../../../Tag";
+import Text from "../../../Text";
+const StyledTextContainer = styled(Box)`
+  ${({
+  isSubItem,
+  theme: {
+    yoga: {
+      components: {
+        navigationmenu: { border, gap, padding }
+      }
+    }
+  }
+}) => css`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    gap: ${gap.xxsmall}px;
+    padding: 10px ${padding.xxsmall}px 10px ${isSubItem ? 44 : padding.small}px;
+    border-radius: ${border.radius.default}px;
+  `}
+`;
+const StyledTag = styled(Tag)`
+  ${({
+  theme: {
+    yoga: {
+      components: {
+        navigationmenu: { backgroundColor, border, tag }
+      }
+    }
+  }
+}) => css`
+    text-transform: uppercase;
+    background-color: ${backgroundColor.stamina};
+    color: ${tag.color.default};
+    border-radius: ${border.radius.circle}px;
+  `}
+`;
+const StyledText = styled(Text)`
+  ${({
+  theme: {
+    yoga: {
+      components: {
+        navigationmenu: { font }
+      }
+    }
+  }
+}) => css`
+    color: ${font.color.default};
+    flex: 1;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  `}
+`;
+const Active = css`
+  ${({
+  isResponsive,
+  theme: {
+    yoga: {
+      components: {
+        navigationmenu: { backgroundColor, icon, font }
+      }
+    }
+  }
+}) => css`
+    cursor: auto;
+
+    > ${StyledTextContainer} {
+      background-color: ${backgroundColor.default};
+
+      ${isResponsive ? media.lg`background-color: ${backgroundColor.yoga}` : css`
+            background-color: ${backgroundColor.yoga};
+          `}
+
+      ${StyledText} {
+        color: ${font.color.active};
+
+        ${isResponsive ? media.lg`font-weight: ${font.weight.medium}` : css`
+              font-weight: ${font.weight.medium};
+            `}
+      }
+
+      svg {
+        fill: ${icon.fill.active};
+      }
+
+      > ${StyledTag} {
+        background-color: ${backgroundColor.stamina};
+      }
+    }
+  `}
+`;
+const StyledItem = styled.li`
+  ${({
+  isActive,
+  theme: {
+    yoga: {
+      components: {
+        navigationmenu: { backgroundColor, border, icon, font }
+      }
+    }
+  }
+}) => css`
+    transition: background-color 300ms ease-in-out;
+
+    background-color: transparent;
+    border-radius: ${border.radius.default}px;
+    list-style-type: none;
+    cursor: pointer;
+
+    svg {
+      height: ${icon.height}px;
+      width: ${icon.width}px;
+    }
+
+    &:hover,
+    &:focus {
+      ${!isActive && css`
+        background-color: ${backgroundColor.hover};
+
+        ${StyledText} {
+          color: ${font.color.hover};
+        }
+
+        svg {
+          fill: ${icon.fill.hover};
+        }
+      `};
+    }
+
+    a {
+      text-decoration: none;
+
+      &.active {
+        ${Active}
+      }
+
+      ${isActive && Active};
+    }
+  `}
+`;
+export {
+  StyledItem,
+  StyledTag,
+  StyledText,
+  StyledTextContainer
+};

package/esm/NavigationMenu/web/Menu/Menu.js

@@ -0,0 +1,79 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import styled, { css } from "styled-components";
+import { ArrowRight } from "@gympass/yoga-icons";
+import { Text, Skeleton } from "@gympass/yoga";
+import Box from "../../../Box";
+import Icon from "../../../Icon";
+const StyledMenu = styled(Box)`
+  ${({
+  hasAction,
+  theme: {
+    yoga: {
+      components: {
+        navigationmenu: { avatar, backgroundColor, border, gap, padding }
+      }
+    }
+  }
+}) => css`
+      transition: background-color 300ms ease-in-out;
+
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+      gap: ${gap.xxsmall}px;
+      padding: ${padding.xsmall}px;
+      background-color: ${backgroundColor.white};
+      border-radius: ${border.radius.circle}px;
+      border: 1px solid ${border.color.white};
+
+      > div:first-child {
+        height: ${avatar.height}px;
+        width: ${avatar.width}px;
+      }
+
+      ${hasAction && css`
+        :hover,
+        &:focus {
+          cursor: pointer;
+          border: 1px solid ${border.color.default};
+        }
+      `}
+    `}
+`;
+const StyledTextContainer = styled(Box)`
+  flex: 1;
+  overflow: hidden;
+`;
+const StyledText = styled(Text.Small)`
+  ${({
+  theme: {
+    yoga: {
+      components: {
+        navigationmenu: { font }
+      }
+    }
+  }
+}) => css`
+      font-weight: ${font.weight.medium};
+      flex: 1;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    `}
+`;
+const Menu = ({ avatar: Avatar, subtitle, title, onClick }) => {
+  const hasAction = Boolean(onClick);
+  return /* @__PURE__ */ jsxs(StyledMenu, { hasAction, onClick, children: [
+    Avatar,
+    /* @__PURE__ */ jsxs(StyledTextContainer, { children: [
+      /* @__PURE__ */ jsx(StyledText, { children: title || /* @__PURE__ */ jsx(Skeleton, { type: "text", variant: "body2", width: "100%" }) }),
+      /* @__PURE__ */ jsx(Text.Small, { color: "deep", children: subtitle })
+    ] }),
+    hasAction && /* @__PURE__ */ jsx(Icon, { as: ArrowRight, size: "large", fill: "vibin" })
+  ] });
+};
+var Menu_default = Menu;
+export {
+  Menu_default as default
+};

package/esm/NavigationMenu/web/Menu/index.js

@@ -0,0 +1,5 @@
+import Menu from "./Menu";
+var Menu_default = Menu;
+export {
+  Menu_default as default
+};

package/esm/NavigationMenu/web/NavigationMenu.js

@@ -0,0 +1,125 @@
+import { jsx } from "react/jsx-runtime";
+import styled, { css } from "styled-components";
+import { media } from "@gympass/yoga-helpers";
+import Menu from "./Menu";
+import Switcher from "./Switcher";
+import { Item, Subitem } from "./Item";
+import { BottomItems, BottomItem } from "./BottomItems";
+import Box from "../../Box";
+const StyledNavigationMenu = styled(Box)`
+  ${({
+  isOpenOnMobile,
+  isResponsive,
+  theme: {
+    yoga: {
+      components: {
+        navigationmenu: { backgroundColor, gap, padding }
+      }
+    }
+  }
+}) => css`
+    display: flex;
+    flex-direction: column;
+    gap: ${gap.medium}px;
+    padding: ${padding.small}px ${padding.xsmall}px;
+    background-color: ${backgroundColor.default};
+
+    width: 280px;
+    height: 100%;
+    right: 0;
+
+    transition: width 300ms ease-in-out;
+
+    ${isResponsive && media.max("lg")`
+          position: absolute;
+          width: 100%;
+          height: calc(100% - 74px);
+          z-index: 10;
+          Top: 0;
+          right: ${isOpenOnMobile ? "0" : "-100%"};
+
+          transition: right 300ms ease-in-out;
+        `}
+  `}
+`;
+const StyledHeader = styled(Box)`
+  ${({
+  theme: {
+    yoga: {
+      components: {
+        navigationmenu: { gap }
+      }
+    }
+  }
+}) => css`
+      display: flex;
+      flex-direction: column;
+      gap: ${gap.xxxsmall}px;
+    `}
+`;
+const StyledItems = styled.nav`
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  overflow-y: auto;
+`;
+const StyledItemsGroup = styled.ul`
+  ${({
+  theme: {
+    yoga: {
+      components: {
+        navigationmenu: { gap, padding }
+      }
+    }
+  }
+}) => css`
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+    padding: 0 0 ${padding.small}px 0;
+    gap: ${gap.xxxsmall}px;
+  `}
+`;
+const StyledFooter = styled(Box)`
+  ${({
+  theme: {
+    yoga: {
+      components: {
+        navigationmenu: { gap }
+      }
+    }
+  }
+}) => css`
+    display: flex;
+    flex-direction: column;
+    gap: ${gap.xxxsmall}px;
+  `}
+`;
+const NavigationMenu = ({
+  children,
+  openOnMobile = false,
+  responsive = true
+}) => {
+  return /* @__PURE__ */ jsx(
+    StyledNavigationMenu,
+    {
+      isOpenOnMobile: openOnMobile,
+      isResponsive: responsive,
+      children
+    }
+  );
+};
+NavigationMenu.Header = StyledHeader;
+NavigationMenu.Menu = Menu;
+NavigationMenu.Switcher = Switcher;
+NavigationMenu.Items = StyledItems;
+NavigationMenu.ItemsGroup = StyledItemsGroup;
+NavigationMenu.Item = Item;
+NavigationMenu.Subitem = Subitem;
+NavigationMenu.BottomItems = BottomItems;
+NavigationMenu.BottomItem = BottomItem;
+NavigationMenu.Footer = StyledFooter;
+var NavigationMenu_default = NavigationMenu;
+export {
+  NavigationMenu_default as default
+};

package/esm/NavigationMenu/web/NavigationMenu.test.js

@@ -0,0 +1,155 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { render } from "@testing-library/react";
+import { Help, Doc, MenuMore } from "@gympass/yoga-icons";
+import ThemeProvider from "../../Theme";
+import AvatarCircle from "../../Avatar/web/AvatarCircle";
+import Icon from "../../Icon";
+import NavigationMenu from "./NavigationMenu";
+describe("<NavigationMenu />", () => {
+  describe("Snapshots", () => {
+    it("should match NavigationMenu", () => {
+      const renderWrapper = ({ children }) => {
+        return /* @__PURE__ */ jsx("a", { href: "https://www.gympass.com", children });
+      };
+      const IconComponent = ({ icon }) => {
+        return /* @__PURE__ */ jsx(Icon, { as: icon });
+      };
+      const itemMainGroup = [
+        {
+          expanded: true,
+          icon: Doc,
+          label: "Subscription",
+          tag: "new",
+          subitems: [{ label: "Details" }]
+        },
+        {
+          active: true,
+          icon: Doc,
+          label: "Billing"
+        }
+      ];
+      const itemGroups = [
+        [...itemMainGroup],
+        [
+          {
+            icon: Help,
+            label: "Help"
+          }
+        ]
+      ];
+      const bottomItems = [
+        ...itemMainGroup.slice(0, 2).map(({ active, icon, label }) => ({
+          active,
+          icon,
+          label,
+          wrapper: renderWrapper
+        })),
+        {
+          active: false,
+          icon: MenuMore,
+          label: "More",
+          wrapper: ({ children }) => /* @__PURE__ */ jsx("div", { children })
+        }
+      ];
+      const { container } = render(
+        /* @__PURE__ */ jsxs(ThemeProvider, { children: [
+          /* @__PURE__ */ jsxs(
+            NavigationMenu,
+            {
+              children: [
+                /* @__PURE__ */ jsx(NavigationMenu.Header, { children: /* @__PURE__ */ jsx(
+                  NavigationMenu.Menu,
+                  {
+                    avatar: /* @__PURE__ */ jsx(AvatarCircle, {}),
+                    title: "Company",
+                    subtitle: "Reseller"
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(NavigationMenu.Items, { children: itemGroups.map((group, index) => /* @__PURE__ */ jsx(NavigationMenu.ItemsGroup, { children: group.map((item) => /* @__PURE__ */ jsx(
+                  NavigationMenu.Item,
+                  {
+                    active: item.active,
+                    expanded: item.expanded,
+                    icon: /* @__PURE__ */ jsx(IconComponent, { icon: item.icon }),
+                    label: item.label,
+                    wrapper: renderWrapper,
+                    tag: item.tag,
+                    children: item.subitems && item.subitems.map(({ label }) => /* @__PURE__ */ jsx(
+                      NavigationMenu.Subitem,
+                      {
+                        label,
+                        wrapper: renderWrapper
+                      },
+                      label
+                    ))
+                  },
+                  item.label
+                )) }, index)) }),
+                /* @__PURE__ */ jsx(NavigationMenu.Footer, { children: /* @__PURE__ */ jsx(
+                  NavigationMenu.Switcher,
+                  {
+                    avatar: /* @__PURE__ */ jsx(AvatarCircle, {}),
+                    title: "User",
+                    subtitle: "Admin, Supervisor"
+                  }
+                ) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(NavigationMenu.BottomItems, { children: bottomItems.map(({ active, icon, label, wrapper }) => /* @__PURE__ */ jsx(
+            NavigationMenu.BottomItem,
+            {
+              active,
+              icon,
+              label,
+              wrapper
+            },
+            label
+          )) })
+        ] })
+      );
+      expect(container).toMatchSnapshot();
+    });
+    it("should match NavigationMenu.Menu with an action", () => {
+      const { container } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(NavigationMenu, { responsive: false, children: /* @__PURE__ */ jsx(NavigationMenu.Header, { children: /* @__PURE__ */ jsx(
+          NavigationMenu.Menu,
+          {
+            avatar: /* @__PURE__ */ jsx(AvatarCircle, {}),
+            title: "Company",
+            subtitle: "Reseller",
+            onClick: () => null
+          }
+        ) }) }) })
+      );
+      expect(container).toMatchSnapshot();
+    });
+    it("should match NavigationMenu.Switcher with actions", () => {
+      const actions = [
+        {
+          id: "Action 1",
+          label: "Action 1",
+          onClick: () => null
+        },
+        {
+          id: "Action 2",
+          label: "Action 2",
+          onClick: () => null
+        }
+      ];
+      const { container } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(NavigationMenu, { responsive: false, children: /* @__PURE__ */ jsx(NavigationMenu.Footer, { children: /* @__PURE__ */ jsx(
+          NavigationMenu.Switcher,
+          {
+            actions,
+            avatar: /* @__PURE__ */ jsx(AvatarCircle, {}),
+            sideOffset: 36,
+            subtitle: "Admin, Supervisor",
+            title: "User"
+          }
+        ) }) }) })
+      );
+      expect(container).toMatchSnapshot();
+    });
+  });
+});

package/esm/NavigationMenu/web/Switcher/Actions.js

@@ -0,0 +1,42 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import styled, { css } from "styled-components";
+import { MenuMore } from "@gympass/yoga-icons";
+import { Menu as YogaMenu } from "@gympass/yoga";
+import Icon from "../../../Icon";
+import Box from "../../../Box";
+const StyledAction = styled(Box)`
+  ${({
+  theme: {
+    yoga: {
+      components: {
+        navigationmenu: { backgroundColor, border, height, width }
+      }
+    }
+  }
+}) => css`
+      transition: background-color 300ms ease-in-out;
+
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: ${width.xxlarge}px;
+      height: ${height.xxlarge}px;
+      border-radius: ${border.radius.circle}px;
+
+      :hover,
+      &:focus {
+        cursor: pointer;
+        background-color: ${backgroundColor.hover};
+      }
+    `}
+`;
+const Actions = ({ actions, sideOffset }) => {
+  return /* @__PURE__ */ jsxs(YogaMenu, { onMouseHover: false, children: [
+    /* @__PURE__ */ jsx(YogaMenu.Action, { children: /* @__PURE__ */ jsx(StyledAction, { children: /* @__PURE__ */ jsx(Icon, { as: MenuMore, size: "medium", fill: "vibin" }) }) }),
+    /* @__PURE__ */ jsx(YogaMenu.List, { side: "right", sideOffset, zIndex: "10", children: actions.map(({ id, label, onClick }) => /* @__PURE__ */ jsx(YogaMenu.Item, { onClick, children: label }, id)) })
+  ] });
+};
+var Actions_default = Actions;
+export {
+  Actions_default as default
+};

package/esm/NavigationMenu/web/Switcher/Switcher.js

@@ -0,0 +1,75 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import styled, { css } from "styled-components";
+import { Text, Skeleton } from "@gympass/yoga";
+import Actions from "./Actions";
+import Box from "../../../Box";
+const StyledSwitcher = styled(Box)`
+  ${({
+  fill,
+  theme: {
+    yoga: {
+      colors,
+      components: {
+        navigationmenu: { border, gap, height, padding, width }
+      }
+    }
+  }
+}) => css`
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+      gap: ${gap.xxsmall}px;
+      padding: ${padding.xsmall}px;
+      background-color: ${colors[fill]};
+      border-radius: ${border.radius.default}px;
+
+      > div:first-child {
+        height: ${height.xlarge}px;
+        width: ${width.xlarge}px;
+      }
+    `}
+`;
+const StyledTextContainer = styled(Box)`
+  flex: 1;
+  overflow: hidden;
+`;
+const StyledTitle = styled(Text.Small)`
+  ${({
+  theme: {
+    yoga: {
+      components: {
+        navigationmenu: { font }
+      }
+    }
+  }
+}) => css`
+      font-weight: ${font.weight.medium};
+      flex: 1;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    `}
+`;
+const Switcher = ({
+  actions,
+  avatar: Avatar,
+  fill = "transparent",
+  sideOffset = 36,
+  subtitle,
+  title
+}) => {
+  const hasActions = actions == null ? void 0 : actions.length;
+  return /* @__PURE__ */ jsxs(StyledSwitcher, { fill, children: [
+    Avatar,
+    /* @__PURE__ */ jsxs(StyledTextContainer, { children: [
+      /* @__PURE__ */ jsx(StyledTitle, { children: title || /* @__PURE__ */ jsx(Skeleton, { type: "text", variant: "body2", width: "100%" }) }),
+      /* @__PURE__ */ jsx(Text.Tiny, { color: "deep", children: subtitle })
+    ] }),
+    hasActions && /* @__PURE__ */ jsx(Actions, { actions, sideOffset })
+  ] });
+};
+var Switcher_default = Switcher;
+export {
+  Switcher_default as default
+};

package/esm/NavigationMenu/web/Switcher/index.js

@@ -0,0 +1,5 @@
+import Switcher from "./Switcher";
+var Switcher_default = Switcher;
+export {
+  Switcher_default as default
+};

package/esm/NavigationMenu/web/index.js

@@ -0,0 +1,5 @@
+import NavigationMenu from "./NavigationMenu";
+var web_default = NavigationMenu;
+export {
+  web_default as default
+};

package/esm/Theme/theme/componentThemes.js

@@ -36,6 +36,7 @@ import Stepper from "../../Stepper/Stepper.theme.js";
 import Tag from "../../Tag/Tag.theme.js";
 import Text from "../../Text/Text.theme.js";
 import TextArea from "../../TextArea/TextArea.theme.js";
+import NavigationMenu from "../../NavigationMenu/NavigationMenu.theme";
 const componentThemes = {
   Accordion,
   ActionRequirement,
@@ -74,7 +75,8 @@ const componentThemes = {
   Stepper,
   Tag,
   Text,
-  TextArea
+  TextArea,
+  NavigationMenu
 };
 var componentThemes_default = componentThemes;
 export {

package/esm/index.js

@@ -40,6 +40,7 @@ import Skeleton from "./Skeleton";
 import ActionRequirement from "./ActionRequirement";
 import Popover from "./Popover";
 import Spinner from "./Spinner";
+import NavigationMenu from "./NavigationMenu";
 export {
   Accordion,
   ActionRequirement,
@@ -69,6 +70,7 @@ export {
   Input,
   List,
   Menu,
+  NavigationMenu,
   PlanCard,
   Popover,
   Progress,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gympass/yoga",
-  "version": "7.88.2",
+  "version": "7.89.0",
   "description": "Gympass component library",
   "main": "./cjs",
   "types": "./typings/index.d.ts",
@@ -56,7 +56,7 @@
     "react-native": "0.72.3",
     "styled-components": "^4.4.0"
   },
-  "gitHead": "f78d1c2f14d0f75d218422dee54d7b4e9c1f93b6",
+  "gitHead": "0f1e1dc67d7dbe17045b0fb018460cf623735b6e",
   "module": "./esm",
   "private": false,
   "react-native": "./cjs/index.native.js"