trepur_components 2.3.8 → 2.3.10

package/src/components/NavItem/index.tsx

@@ -1,43 +0,0 @@
-import React from 'react';
-
-import classNames from 'classnames';
-
-export interface Props {
-  id?: string;
-  className?: string;
-  title: string;
-  href?: string;
-  onClick?: React.MouseEventHandler;
-  bordered?: boolean;
-  rounded?: boolean;
-  underlineOnHover?: boolean;
-  isActive?: boolean;
-  variant?: 'primary' | 'secondary' | 'tertiary';
-  tabindex?: number;
-}
-
-export const NavItem = ({
-  id,
-  className,
-  title,
-  href = '/',
-  onClick,
-  tabindex,
-}: Props) => {
-  const classList = classNames(className, 'w-auto list-none');
-
-  const anchorClassList = 'rounded-xl border-2 border-transparent p-2';
-
-  return (
-    <div id={id} className={classList}>
-      <a
-        href={href}
-        onClick={onClick}
-        className={anchorClassList}
-        {...(tabindex !== undefined && { tabIndex: tabindex })}
-      >
-        <span className="whitespace-nowrap text-center">{title}</span>
-      </a>
-    </div>
-  );
-}

package/src/components/NavOld/NavOld.stories.tsx

@@ -1,193 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import { NavOld } from '.';
-
-const navLinks = [
-  { title: 'Home', href: '/', isActive: true },
-  { title: 'Resume', href: '/', isActive: false },
-  { title: 'Contact Me', href: '/', isActive: false },
-]
-
-const meta = {
-  title: 'Components/Nav',
-  component: NavOld,
-  parameters: {
-    backgrounds: {
-      default: 'grey',
-      values: [
-        {
-          name: 'grey',
-          value: '#f3f3f3',
-        }
-      ]
-    },
-  },
-  argTypes: {
-    ...idAndClassName,
-    navLinks: {
-      description: 'An array of nav links to display in the component',
-      table: {
-        type: { summary: 'array' },
-      }
-    },
-    withMobileSideBar: {
-      type: { name: 'boolean', required: false },
-      description:
-        'Sets the expanding mechanism to work as a side bar on mobile',
-      table: {
-        type: { summary: 'boolean' },
-      },
-      defaultValue: false,
-    },
-    withMobileDropdown: {
-      type: { name: 'boolean', required: false },
-      description:
-        'Sets the expanding mechanism to work as a drop down on mobile',
-      table: {
-        type: { summary: 'boolean' },
-      },
-      defaultValue: false,
-    },
-    dropdownNavHeight: {
-      type: { name: 'string', required: false },
-      description: 'The distance in which the dropdown should come on mobile',
-      table: {
-        type: { summary: 'string' },
-      },
-      defaultValue: undefined,
-    },
-    logo: {
-      type: { name: 'string', required: false },
-      description: 'The logo to display on the component',
-      table: {
-        type: { summary: 'string' },
-      }
-    },
-    logoDarkTheme: {
-      type: { name: 'string', required: false },
-      description: 'An optional dark them logo for dark mode',
-      table: {
-        type: { summary: 'string' },
-      }
-    },
-    mobileLogo: {
-      type: { name: 'string', required: false },
-      description: 'An optional mobile logo for mobile devices',
-      table: {
-        type: { summary: 'string' },
-      }
-    },
-    mobileLogoDarkTheme: {
-      type: { name: 'string', required: false },
-      description: 'An optional dark them mobile logo for mobile dark mode',
-      table: {
-        type: { summary: 'string' },
-      }
-    },
-    logoLink: {
-      type: { name: 'string', required: false },
-      description: 'The link to navigate to when clicking on the logo',
-      table: {
-        type: { summary: 'string' },
-      }
-    },
-    mobileClasses: {
-      type: { name: 'string', required: false },
-      description: '',
-      table: {
-        type: { summary: 'string' },
-      }
-    },
-    fixedTop: {
-      type: { name: 'boolean', required: false },
-      description: 'Sets the header to fix at the top when true',
-      table: {
-        type: { summary: 'boolean' },
-      }
-    },
-    profileMenuItems: {
-      type: { name: 'array', required: false },
-      description: 'toggles the profile option',
-      table: {
-        type: { summary: 'array' },
-      }
-    },
-    getNavStatus: {
-      type: { name: 'boolean', required: false },
-      description:
-        'Returns the status of the header, opened or closed in mobile',
-      table: {
-        type: { summary: 'function' },
-      }
-    },
-    variant: {
-      type: { name: 'string', required: false },
-      options: ['primary', 'secondary', 'tertiary'],
-      description: 'The them to render the component in',
-      table: {
-        type: { summary: 'primary' },
-        defaultValue: { summary: 'primary' },
-      },
-      defaultValue: 'primary',
-      control: { type: 'radio' },
-    },
-
-    text: {
-      type: { name: 'string', required: false },
-      description: 'Text to display on the component',
-      table: {
-        type: { summary: 'string' },
-      },
-      defaultValue: 'undefined',
-    },
-    textLink: {
-      type: { name: 'string', required: false },
-      description:
-        'A link to navigate to when clicking on the text in the component',
-      table: {
-        type: { summary: 'string' },
-      },
-      defaultValue: undefined,
-    },
-    bgColour: {
-      type: { name: 'select', required: false },
-      options: ['primary', 'secondary', 'white', 'black', 'gold'],
-      description: 'The background colour of the component',
-      table: {
-        type: { summary: 'select' },
-      },
-      defaultValue: 'primary',
-    }
-  },
-  args: {
-    logoLink: '/',
-    navLinks,
-    logo: 'https://picsum.photos/200/200',
-    logoDarkTheme: 'https://picsum.photos/201/201',
-    mobileLogo: 'https://picsum.photos/201/200',
-    mobileLogoDarkTheme: 'https://picsum.photos/200/201',
-    getNavStatus: (asSideBar: any, status: any) => {
-      action('nav status: [side bar, open]')(asSideBar, status);
-    },
-    withStickyNavShadow: true,
-    withDesktopShadow: true,
-    withMobileSideBar: true,
-    profileMenu: {
-      menuItems: [
-        { name: 'Profile', href: '/profile' },
-        { name: 'Events', href: '/events' },
-        { name: 'Whats on', href: '/whatson' },
-        { name: 'Help', href: '/help' },
-        { name: 'Log Out', href: '/logout' },
-      ]
-    }
-  },
-}
-
-export default meta;
-
-type Story = StoryObj<typeof NavOld>;
-
-export const Default: Story = {};

package/src/components/NavOld/StickyNav.tsx

@@ -1,187 +0,0 @@
-import { useState } from 'react';
-
-import { Container } from '@components/Container';
-import { HamburgerIcon } from '@components/HamburgerIcon';
-import { Image } from '@components/Image';
-import { NavItem, type Props as navItemProps } from '@components/NavItem';
-import classNames from 'classnames';
-
-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?: (asSideBar: boolean, open: boolean) => void;
-  variant: 'primary' | 'secondary' | 'tertiary';
-  visible?: boolean;
-  tabindex?: number;
-  withShadow?: boolean;
-}
-
-export const StickyNav = ({
-  id,
-  className,
-  navLinks,
-  withMobileSideBar = false,
-  withMobileDropdown = false,
-  dropdownNavHeight,
-  logo,
-  logoDarkTheme,
-  mobileLogo,
-  mobileLogoDarkTheme,
-  logoLink,
-  mobileClasses,
-  getNavStatus,
-  variant = 'primary',
-
-  visible = false,
-  tabindex = 0,
-  withShadow = false,
-}: Props) => {
-  const [showSideNav, setShowSideNav] = useState(false);
-  const [showDropdownNav, setShowDropdownNav] = useState(false);
-
-  const classList = classNames(
-    {
-      'opacity-100 transition-all duration-1000': visible,
-      'drop-shadow-lg': withShadow,
-    },
-    className,
-    'fixed top-0 z-40 w-full overflow-hidden opacity-0 transition-all duration-500',
-  )
-
-  const sideNavClasses = classNames(
-    {
-      'w-0': !showSideNav,
-      'h-screen w-full sm:w-1/3': showSideNav,
-    },
-    'fixed z-50 h-full overflow-hidden duration-700 md:hidden',
-  )
-
-  const dropdownNavClasses = classNames(
-    {
-      'h-0': !showDropdownNav,
-      [`h-${dropdownNavHeight}`]: showDropdownNav,
-    },
-    'z-50 overflow-hidden md:hidden',
-  )
-
-  const mobileContainer = classNames(
-    'flex items-center md:hidden',
-    mobileClasses,
-  )
-
-  const toggleMenu = (): void => {
-    getNavStatus?.(withMobileSideBar, !showSideNav);
-    if (withMobileSideBar) {
-      setShowSideNav(!showSideNav);
-    } else {
-      setShowDropdownNav(!showDropdownNav);
-    }
-  };
-
-  return (
-    <div id={`sticky_${id ?? 'nav'}`} className={classList}>
-      {/* Mobile Nav */}
-      <Container withPadding className={mobileContainer}>
-        <div className="absolute inset-y-0 left-8 top-4">
-          <HamburgerIcon onClick={toggleMenu} variant={variant} />
-        </div>
-        <a
-          className="mx-auto my-2 focus:border-2 focus:border-white"
-          href={logoLink}
-          tabIndex={tabindex}
-        >
-          <Image src={mobileLogo} height={5} width={5} />
-        </a>
-      </Container>
-
-      {/* Desktop Nav */}
-      <Container
-        withPadding
-        className="relative z-50 flex items-center justify-between"
-      >
-        <div className="my-2 hidden w-96 md:flex">
-          <a
-            className="focus:border-2 focus:border-white"
-            href={logoLink}
-            tabIndex={tabindex}
-          >
-            <Image
-              src={logo}
-              title="sticky-desktop-logo"
-              altText="sticky-desktop-logo"
-              height={5}
-              width={5}
-            />
-          </a>
-        </div>
-        <nav className="hidden w-96 justify-center py-6 md:flex md:pr-16 lg:pr-0">
-          {navLinks?.map((navLink, i) => {
-            return (
-              <NavItem
-                key={`desktop_nav_item_${i}`}
-                {...navLink}
-                className="mx-auto w-24 text-center"
-                bordered={false}
-                rounded={false}
-                underlineOnHover
-                variant={variant}
-                tabindex={tabindex}
-              />
-            );
-          })}
-        </nav>
-      </Container>
-
-      {/* Mobile Links */}
-      {/* Side Bar */}
-      {withMobileSideBar && (
-        <div className={sideNavClasses}>
-          {navLinks?.map((navLink, i) => {
-            return (
-              <NavItem
-                key={`sidebar_nav_item_${i}`}
-                {...navLink}
-                className="pl-2 pt-4 focus:border-2 focus:border-white"
-                bordered={false}
-                rounded={false}
-                underlineOnHover
-                variant={variant}
-                tabindex={tabindex}
-              />
-            );
-          })}
-        </div>
-      )}
-      {withMobileDropdown && (
-        <div className={dropdownNavClasses}>
-          <div className="space-y-1 pb-3 pt-2">
-            {navLinks?.map((navLink, i) => {
-              return (
-                <NavItem
-                  key={`dropdown_nav_item_${i}`}
-                  {...navLink}
-                  className="pl-8 pt-2"
-                  bordered={false}
-                  rounded={false}
-                  underlineOnHover
-                  variant={variant}
-                  tabindex={tabindex}
-                />
-              );
-            })}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}

package/src/components/NavOld/index.tsx

@@ -1,265 +0,0 @@
-import { 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;
-}
-
-export 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) => {
-  const [showSideNav, setShowSideNav] = useState(false);
-  const [showDropdownNav, setShowDropdownNav] = useState(false);
-  const [showStickyNav, setShowStickyNav] = useState(false);
-  const [navOpen, setNavOpen] = useState(false);
-
-  const classList = classNames(
-    {
-      // [style.desktopNavDropShadow]: withDesktopShadow && !showStickyNav && !showSideNav
-    },
-    className,
-  )
-
-  const stickyClassList = classNames(
-    {
-      'opacity-100 transition-all duration-1000': showStickyNav,
-    },
-    'fixed top-0 z-40 w-full overflow-hidden opacity-0 transition-all duration-500',
-  )
-
-  const isSticky = (): void => {
-    window.scrollY >= 80 ? setShowStickyNav(true) : setShowStickyNav(false);
-  }
-
-  useEffect(() => {
-    window.addEventListener('scroll', isSticky);
-    return () => {
-      window.removeEventListener('scroll', isSticky);
-    }
-  });
-
-  const sideNavClasses = classNames(
-    {
-      ' w-0': !showSideNav,
-      'h-screen w-full sm:w-1/3': showSideNav,
-    },
-    'fixed z-50 h-full overflow-hidden duration-700 md:hidden',
-  )
-
-  const dropdownNavClasses = classNames(
-    {
-      'h-0': !showDropdownNav,
-      '': showDropdownNav,
-      [`h-${dropdownNavHeight}`]: showDropdownNav,
-    },
-    'z-50 overflow-hidden md:hidden',
-  )
-
-  const mobileContainer = classNames(
-    'flex items-center md:hidden',
-    'relative z-50',
-    mobileClasses,
-  )
-
-  const toggleMenu = (): void => {
-    setNavOpen(!navOpen);
-    if (withMobileSideBar) {
-      getNavStatus?.(withMobileSideBar, !showSideNav);
-      setShowSideNav(!showSideNav);
-    }
-    if (withMobileDropdown) {
-      getNavStatus?.(withMobileDropdown, !showDropdownNav);
-      setShowDropdownNav(!showDropdownNav);
-    }
-  };
-
-  return (
-    <div className="flex min-h-screen flex-col">
-      <div
-        className={classNames(
-          ' fixed bottom-0 left-0 right-0 top-0 z-50 h-full w-full bg-primary transition-opacity duration-700',
-          [navOpen] && 'visible opacity-100',
-          [!navOpen] && 'invisible opacity-0',
-        )}
-      />
-      <header id={id} className={classList}>
-        {/* Mobile Nav */}
-        <Container withPadding className={mobileContainer}>
-          {(withMobileSideBar || withMobileDropdown) && (
-            <div className="absolute inset-y-0 left-8 top-4">
-              <HamburgerIcon onClick={toggleMenu} variant={variant} />
-            </div>
-          )}
-          <a className="mx-auto my-2" href={logoLink} aria-label="mobile-logo">
-            <Image src={mobileLogo} height={5} width={5} />
-          </a>
-        </Container>
-
-        {/* Desktop Nav */}
-        <Container
-          withPadding
-          className="relative z-50 flex items-center justify-between"
-        >
-          <div className="my-2 hidden w-96 md:flex">
-            <a
-              className="border-2 border-white"
-              href={logoLink}
-              aria-label="desktop-logo"
-            >
-              <Image src={logo} height={5} width={5} />
-            </a>
-          </div>
-          <nav className="hidden w-96 justify-center py-6 md:flex md:pr-16 lg:pr-0">
-            {navLinks?.map((navLink, i) => {
-              return (
-                <NavItem
-                  key={`desktop_nav_item_${i}`}
-                  {...navLink}
-                  className="mx-auto w-24 text-center"
-                  bordered={false}
-                  rounded={false}
-                  underlineOnHover
-                  variant={variant}
-                />
-              );
-            })}
-          </nav>
-          {!profileMenu?.menuItems !== undefined && (
-            <div className="hidden w-96 flex-row-reverse lg:flex">
-              {text !== undefined && (
-                <NavItem
-                  title={text}
-                  href={textLink}
-                  className="mx-auto w-24 text-center"
-                  underlineOnHover
-                  variant={variant}
-                />
-              )}
-            </div>
-          )}
-          {profileMenu?.menuItems && (
-            <div className="hidden w-96 flex-row-reverse md:flex">
-              <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(
-                      'pl-2 pt-4 focus:border-2 focus:border-white',
-                      '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="space-y-1 pb-3 pt-2">
-              {navLinks?.map((navLink, i) => {
-                return (
-                  <NavItem
-                    key={`dropdown_nav_item_${i}`}
-                    {...navLink}
-                    className="pl-8 pt-2"
-                    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>
-  );
-}