trepur_components 2.3.7 → 2.3.9

package/archive/NavOld/index.tsx

@@ -1,273 +0,0 @@
-import React, { useEffect, useState } from 'react';
-
-import Container from '@components/Container';
-import HamburgerIcon from '@components/HamburgerIcon';
-import HorizontalLine from '@components/HorizontalLine';
-import Image from '@components/Image';
-import MenuButton, {
-  type Props as MenuButtonProps,
-} from '@components/MenuButton';
-import NavItem, { type Props as navItemProps } from '@components/NavItem';
-import classNames from 'classnames';
-
-import StickyNav from './StickyNav';
-
-
-export interface Props {
-  id?: string;
-  className?: string;
-  navLinks: navItemProps[];
-  withMobileSideBar?: boolean;
-  withMobileDropdown?: boolean;
-  dropdownNavHeight: string;
-  logo: string;
-  logoDarkTheme: string;
-  mobileLogo: string;
-  mobileLogoDarkTheme: string;
-  logoLink: string;
-  mobileClasses?: string;
-  getNavStatus?: (withMobileSideBar: boolean, open: boolean) => void;
-  variant: 'primary' | 'secondary' | 'tertiary';
-  text?: string;
-  textLink?: string;
-  stickyNavVariant: 'primary' | 'secondary' | 'tertiary';
-  withStickyNavShadow?: boolean;
-  withDesktopShadow?: boolean;
-  profileMenu?: MenuButtonProps;
-}
-
-const NavOld = ({
-  id,
-  className,
-  navLinks,
-  withMobileSideBar = false,
-  withMobileDropdown = false,
-  dropdownNavHeight,
-  logo,
-  logoDarkTheme,
-  mobileLogo,
-  mobileLogoDarkTheme,
-  logoLink,
-  mobileClasses,
-  getNavStatus,
-  variant = 'primary',
-  stickyNavVariant = 'primary',
-  text,
-  textLink = '/',
-  withStickyNavShadow = false,
-  withDesktopShadow = false,
-  profileMenu,
-}: Props): JSX.Element => {
-  const [showSideNav, setShowSideNav] = useState(false);
-  const [showDropdownNav, setShowDropdownNav] = useState(false);
-  const [showStickyNav, setShowStickyNav] = useState(false);
-  const [navOpen, setNavOpen] = useState(false);
-  const colours = [style[variant]];
-  const classList = classNames(
-    {
-      // [style.desktopNavDropShadow]: withDesktopShadow && !showStickyNav && !showSideNav
-    },
-    className,
-    style.nav,
-    'theme-local',
-    colours,
-  );
-
-  const stickyClassList = classNames(
-    {
-      [style.showStickyNav]: showStickyNav,
-    },
-    style.stickyNav,
-  );
-
-  const isSticky = (): void => {
-    window.scrollY >= 80 ? setShowStickyNav(true) : setShowStickyNav(false);
-  };
-
-  useEffect(() => {
-    window.addEventListener('scroll', isSticky);
-    return () => {
-      window.removeEventListener('scroll', isSticky);
-    };
-  });
-
-  const sideNavClasses = classNames(
-    {
-      [style.sideBarCollapsed]: !showSideNav,
-      [style.sideBarExpanded]: showSideNav,
-    },
-    style.sideNavClassList,
-    colours,
-  );
-
-  const dropdownNavClasses = classNames(
-    {
-      [style.dropDownCollapsed]: !showDropdownNav,
-      [style.dropDownExpanded]: showDropdownNav,
-      [`h-${dropdownNavHeight}`]: showDropdownNav,
-    },
-    style.dropDownNavClassList,
-  );
-
-  const mobileContainer = classNames(
-    style.mobileContainer,
-    style.mobileNav,
-    mobileClasses,
-  );
-
-  const toggleMenu = (): void => {
-    setNavOpen(!navOpen);
-    if (withMobileSideBar) {
-      getNavStatus?.(withMobileSideBar, !showSideNav);
-      setShowSideNav(!showSideNav);
-    }
-    if (withMobileDropdown) {
-      getNavStatus?.(withMobileDropdown, !showDropdownNav);
-      setShowDropdownNav(!showDropdownNav);
-    }
-  };
-
-  return (
-    <div className={style.wrapperClasses}>
-      <div
-        className={classNames(
-          style.defaultNavClasses,
-          [navOpen] && style.navOpen,
-          [!navOpen] && style.navClosed,
-        )}
-      />
-      <header id={id} className={classList}>
-        {/* Mobile Nav */}
-        <Container withPadding className={mobileContainer}>
-          {(withMobileSideBar || withMobileDropdown) && (
-            <div className={style.collapseBtnWrapper}>
-              <HamburgerIcon onClick={toggleMenu} variant={variant} />
-            </div>
-          )}
-          <a
-            className={style.mobileLogo}
-            href={logoLink}
-            aria-label="mobile-logo"
-          >
-            <Image src={mobileLogo} height={5} width={5} />
-          </a>
-        </Container>
-
-        {/* Desktop Nav */}
-        <Container withPadding className={style.desktopNav}>
-          <div className={style.logoClassList}>
-            <a
-              className={style.desktopLogo}
-              href={logoLink}
-              aria-label="desktop-logo"
-            >
-              <Image src={logo} height={5} width={5} />
-            </a>
-          </div>
-          <nav className={style.navItems}>
-            {navLinks?.map((navLink, i) => {
-              return (
-                <NavItem
-                  key={`desktop_nav_item_${i}`}
-                  {...navLink}
-                  className={style.navItemPadding}
-                  bordered={false}
-                  rounded={false}
-                  underlineOnHover
-                  variant={variant}
-                />
-              );
-            })}
-          </nav>
-          {!profileMenu?.menuItems !== undefined && (
-            <div className={style.textClassList}>
-              {text !== undefined && (
-                <NavItem
-                  title={text}
-                  href={textLink}
-                  className={style.navItemPadding}
-                  underlineOnHover
-                  variant={variant}
-                />
-              )}
-            </div>
-          )}
-          {profileMenu?.menuItems && (
-            <div className={style.profileClassList}>
-              <MenuButton {...profileMenu} menuItems={profileMenu?.menuItems} />
-            </div>
-          )}
-        </Container>
-
-        {/* Mobile Links */}
-        {/* Side Bar */}
-        {withMobileSideBar && (
-          <div className={sideNavClasses}>
-            {navLinks?.map((navLink, i) => {
-              return (
-                <div className="flex-col" key={`sidebar_nav_item_${i}`}>
-                  <NavItem
-                    {...navLink}
-                    className={classNames(
-                      colours,
-                      style.mobileSideBarMenuNavItems,
-                      'justify-center pb-4 pt-2',
-                    )}
-                    bordered={false}
-                    rounded={false}
-                    underlineOnHover
-                    variant={variant}
-                  />
-
-                  <HorizontalLine
-                    colour={variant === 'secondary' ? 'primary' : 'secondary'}
-                    className="mx-2"
-                  />
-                </div>
-              );
-            })}
-          </div>
-        )}
-        {withMobileDropdown && (
-          <div className={dropdownNavClasses}>
-            <div className={style.mobileDropDownMenu}>
-              {navLinks?.map((navLink, i) => {
-                return (
-                  <NavItem
-                    key={`dropdown_nav_item_${i}`}
-                    {...navLink}
-                    className={style.mobileDropDownMenuNavItems}
-                    bordered={false}
-                    rounded={false}
-                    underlineOnHover
-                    variant={variant}
-                  />
-                );
-              })}
-            </div>
-          </div>
-        )}
-        <StickyNav
-          id={id}
-          className={stickyClassList}
-          navLinks={navLinks}
-          withMobileSideBar={withMobileSideBar}
-          withMobileDropdown={withMobileDropdown}
-          dropdownNavHeight={dropdownNavHeight}
-          logo={logo}
-          logoDarkTheme={logoDarkTheme}
-          mobileLogo={mobileLogo}
-          mobileLogoDarkTheme={mobileLogoDarkTheme}
-          logoLink={logoLink}
-          mobileClasses={mobileClasses}
-          {...(getNavStatus && { getNavStatus })}
-          variant={stickyNavVariant}
-          tabindex={showStickyNav ? 0 : -1}
-          withShadow={withStickyNavShadow}
-        />
-      </header>
-    </div>
-  );
-};
-
-export default NavOld;

package/archive/NavOld/style.module.css

@@ -1,156 +0,0 @@
-.wrapperCalsses {
-  @apply flex min-h-screen flex-col;
-}
-
-.defaultNavClasses {
-  @apply fixed bottom-0 left-0 right-0 top-0 z-50 h-full w-full bg-primary transition-opacity duration-700;
-}
-
-.navOpen {
-  @apply visible opacity-100;
-}
-
-.navClosed {
-  @apply invisible opacity-0;
-}
-
-.desktopNav {
-  @apply relative z-50;
-  @apply flex items-center justify-between;
-}
-
-.desktopNavDropShadow {
-  @apply drop-shadow-lg;
-}
-
-.mobileNav {
-  @apply relative z-50;
-}
-
-.stickyNav {
-  @apply fixed top-0 z-40 w-full overflow-hidden opacity-0 transition-all duration-500;
-}
-
-.stickyNavDropShadow {
-  @apply drop-shadow-lg;
-}
-
-.showStickyNav {
-  @apply opacity-100 transition-all duration-1000;
-}
-
-.invisible {
-  @apply hidden;
-}
-
-.primary {
-  @apply bg-primary text-secondary;
-}
-
-.secondary {
-  @apply bg-secondary text-primary;
-}
-
-.tertiary {
-  @apply bg-tertiary text-secondary;
-}
-
-.white {
-  @apply bg-white text-black;
-}
-
-.black {
-  @apply bg-black text-white;
-}
-
-.collapseBtnWrapper {
-  @apply absolute inset-y-0 left-8 top-4;
-}
-
-.collapseBtnWrapper:hover > button {
-  @apply text-primary;
-}
-
-.navItems {
-  @apply hidden w-96 justify-center py-6 md:flex md:pr-16 lg:pr-0;
-}
-
-.navItemPadding {
-  @apply mx-auto w-24 text-center;
-}
-
-.logoClassList {
-  @apply my-2 hidden w-96 md:flex;
-}
-
-.textClassList {
-  @apply hidden w-96 flex-row-reverse lg:flex;
-}
-
-.profileClassList {
-  @apply hidden w-96 flex-row-reverse md:flex;
-}
-
-.desktopLogo:focus {
-  @apply border-2 border-white;
-}
-
-.mobileLogo {
-  @apply mx-auto my-2;
-}
-
-.mobileLogo:focus {
-  @apply border-2 border-white;
-}
-
-.mobileContainer {
-  @apply flex items-center md:hidden;
-}
-
-.mobileDropDownMenu {
-  @apply space-y-1 pb-3 pt-2;
-}
-
-.dropDownNavClassList {
-  @apply z-50 overflow-hidden md:hidden;
-}
-
-.mobileDropDownMenuNavItems {
-  @apply pl-8 pt-2;
-}
-
-.dropDownCollapsed {
-  @apply h-0;
-}
-
-.sideNavClassList {
-  @apply fixed z-50 h-full overflow-hidden duration-700 md:hidden;
-}
-
-.mobileSideBarMenu {
-  @apply space-y-1 pb-3 pt-2;
-}
-
-.mobileSideBarMenuNavItems {
-  @apply pl-2 pt-4;
-}
-
-.mobileSideBarMenuNavItems:focus {
-  @apply border-2 border-white;
-}
-
-.sideBarCollapsed {
-  @apply w-0;
-}
-
-.sideBarExpanded {
-  @apply h-screen w-full sm:w-1/3;
-}
-
-.dark {
-  @apply bg-primary text-white;
-}
-
-.light {
-  @apply bg-white text-primary;
-}

package/archive/NavTwo/Dropdown.tsx

@@ -1,35 +0,0 @@
-import React from 'react';
-
-import classNames from 'classnames';
-
-
-
-export interface Props {
-  id?: string;
-  className?: string;
-  children: any;
-  visible?: boolean;
-}
-
-export const Dropdown = ({
-  id,
-  className,
-  children,
-  visible = false,
-}: Props): JSX.Element => {
-  const dropdownNavClasses = classNames(
-    {
-      [style.dropDownCollapsed]: !visible,
-      [style.dropDownExpanded]: visible,
-      [`h-auto`]: visible,
-    },
-    style.dropDownNavClassList,
-    className,
-  );
-
-  return (
-    <div id={id} className={dropdownNavClasses}>
-      <div className={style.mobileDropDownMenu}>{children}</div>
-    </div>
-  );
-};

package/archive/NavTwo/Nav.stories.tsx

@@ -1,38 +0,0 @@
-import React, { useEffect, useState } from 'react';
-
-import { Meta, StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import Nav from '.';
-import Container from '../Container';
-import HamburgerIcon from '../HamburgerIcon';
-import Image from '../Image';
-import NavItem from '../NavItem';
-
-const meta = {
-  title: 'Components/NavTwo',
-  component: Nav,
-  parameters: {
-    backgrounds: {
-      default: 'grey',
-      values: [
-        {
-          name: 'grey',
-          value: '#f3f3f3',
-        },
-      ],
-    },
-  },
-  argTypes: {
-    ...idAndClassName,
-    children: {},
-  },
-  args: {
-    className: 'bg-primary text-white py-4',
-  },
-};
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};

package/archive/NavTwo/Sidebar.tsx

@@ -1,34 +0,0 @@
-import React from 'react';
-
-import classNames from 'classnames';
-
-
-
-export interface Props {
-  id?: string;
-  className?: string;
-  children: any;
-  visible?: boolean;
-}
-
-export const Sidebar = ({
-  id,
-  className,
-  children,
-  visible = false,
-}: Props): JSX.Element => {
-  const sideNavClasses = classNames(
-    {
-      [style.sideBarCollapsed]: !visible,
-      [style.sideBarExpanded]: visible,
-    },
-    style.sideNavClassList,
-    className,
-  );
-
-  return (
-    <div id={id} className={sideNavClasses}>
-      {children}
-    </div>
-  );
-};

package/archive/NavTwo/StickyNav.tsx

@@ -1,34 +0,0 @@
-import React from 'react';
-
-import classNames from 'classnames';
-
-
-
-export interface Props {
-  id?: string;
-  className?: string;
-  children: any;
-  visible?: boolean;
-}
-
-export const StickyNav = ({
-  id,
-  className,
-  children,
-  visible = false,
-}: Props): JSX.Element => {
-  const classList = classNames(
-    {
-      [style.showStickyNav]: visible,
-    },
-    className,
-    style.stickyNav,
-    'theme-local',
-  );
-
-  return (
-    <div id={`sticky_${id ?? 'nav'}`} className={classList}>
-      {children}
-    </div>
-  );
-};

package/archive/NavTwo/index.tsx

@@ -1,45 +0,0 @@
-import React from 'react';
-
-import classNames from 'classnames';
-
-import { Dropdown } from './Dropdown';
-import { Sidebar } from './Sidebar';
-import { StickyNav } from './StickyNav';
-
-
-export interface Props {
-  id?: string;
-  className?: string;
-  children: any;
-  mobileNavExpanded?: boolean;
-}
-
-const Nav = ({
-  id,
-  className,
-  children,
-  mobileNavExpanded,
-}: Props): JSX.Element => {
-  const classList = classNames(className, style.nav, 'theme-local');
-
-  return (
-    <div>
-      <div
-        className={classNames(
-          style.defaultNavClasses,
-          [mobileNavExpanded] && style.navOpen,
-          [!mobileNavExpanded] && style.navClosed,
-        )}
-      />
-      <header id={id} className={classList}>
-        {children}
-      </header>
-    </div>
-  );
-};
-
-export default Nav;
-
-Nav.Dropdown = Dropdown;
-Nav.Sidebar = Sidebar;
-Nav.Sticky = StickyNav;

package/archive/NavTwo/style.module.css

@@ -1,35 +0,0 @@
-.defaultNavClasses {
-  @apply fixed bottom-0 left-0 right-0 top-0 z-50 h-full w-full bg-primary transition-opacity duration-700;
-}
-
-.navOpen {
-  @apply visible opacity-100;
-}
-
-.navClosed {
-  @apply invisible opacity-0;
-}
-
-.stickyNav {
-  @apply fixed top-0 z-40 w-full overflow-hidden opacity-0 transition-all duration-500;
-}
-
-.showStickyNav {
-  @apply opacity-100 transition-all duration-1000;
-}
-
-.dropDownCollapsed {
-  @apply hidden h-0;
-}
-
-.sideNavClassList {
-  @apply fixed z-50 h-full overflow-hidden duration-700 md:hidden;
-}
-
-.sideBarCollapsed {
-  @apply w-0;
-}
-
-.sideBarExpanded {
-  @apply h-screen w-full sm:w-1/3;
-}