trepur_components 2.3.7 → 2.3.9

package/archive/NavItem/NavItem.stories.tsx

@@ -1,90 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import { Meta, StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import NavItem from '.';
-
-const meta = {
-  title: 'Components/Nav Item',
-  component: NavItem,
-  parameters: {},
-  argTypes: {
-    ...idAndClassName,
-    title: {
-      type: { name: 'string', required: false },
-      description: 'A title for the component',
-      table: {
-        type: { summary: 'string' },
-      },
-    },
-    href: {
-      type: { name: 'string', required: false },
-      description: 'A href for the component',
-      table: {
-        type: { summary: 'string' },
-      },
-    },
-    onClick: {
-      type: { name: 'function', required: false },
-      description:
-        'An on click handle to execute when clicking on the component',
-      table: {
-        type: { summary: 'function' },
-      },
-    },
-    bordered: {
-      type: { name: 'boolean', required: false },
-      description: 'Enables borders around the component',
-      table: {
-        type: { summary: 'boolean' },
-      },
-      defaultValue: false,
-    },
-    rounded: {
-      type: { name: 'boolean', required: false },
-      description: 'Roundes the corners of the component',
-      table: {
-        type: { summary: 'boolean' },
-      },
-      defaultValue: true,
-    },
-    underlineOnHover: {
-      type: { name: 'boolean', required: false },
-      description: 'Underlines the title when hovering over the component',
-      table: {
-        type: { summary: 'boolean' },
-      },
-      defaultValue: true,
-    },
-    isActive: {
-      type: { name: 'boolean', required: false },
-      description: 'Set the active state to the component',
-      table: {
-        type: { summary: 'array' },
-      },
-      defaultValue: false,
-    },
-    variant: {
-      type: { name: 'string', required: false },
-      options: ['primary', 'secondary', 'tertiary'],
-      description: 'The varient of the component to render',
-      table: {
-        type: { summary: 'string' },
-      },
-      defaultValue: 'primary',
-      control: 'radio',
-    },
-  },
-  args: {
-    title: 'Home',
-    href: '/',
-    underlineOnHover: true,
-    onClick: action('button-click'),
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};

package/archive/NavItem/index.tsx

@@ -1,65 +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;
-}
-
-const NavItem = ({
-  id,
-  className,
-  title,
-  href = '/',
-  onClick,
-  bordered = false,
-  rounded = true,
-  underlineOnHover = true,
-  isActive = false,
-  variant = 'primary',
-
-  tabindex,
-}: Props): JSX.Element => {
-  const classList = classNames(className, style.navItem, 'theme-local');
-
-  const anchorClassList = classNames(
-    {
-      [style.underline]: underlineOnHover,
-      [style.active]: isActive,
-      [style.inactive]: !isActive,
-      [style.bordered]: bordered,
-      [style.rounded]: rounded,
-      [style.primary]: variant === 'primary',
-      [style.secondary]: variant === 'secondary',
-      [style.tertiary]: variant === 'tertiary',
-    },
-    [style.anchorClassList],
-  );
-
-  return (
-    <div id={id} className={classList}>
-      <a
-        href={href}
-        onClick={onClick}
-        className={anchorClassList}
-        {...(tabindex !== undefined && { tabIndex: tabindex })}
-      >
-        <span className={style.spanClassList}>{title}</span>
-      </a>
-    </div>
-  );
-};
-
-export default NavItem;

package/archive/NavItem/style.module.css

@@ -1,71 +0,0 @@
-.bordered {
-  @apply border-2 px-2 py-2;
-}
-
-.rounded {
-  @apply rounded-md;
-}
-
-.navItem {
-  @apply w-auto list-none;
-}
-
-.underline > span {
-  @apply relative ease-linear;
-}
-
-.underline > span:before {
-  @apply absolute -bottom-1 left-0 h-1 transition-all;
-}
-
-.underline:hover > span:before {
-  @apply w-full;
-}
-
-.active > span {
-  @apply before:w-full;
-}
-
-.inactive > span {
-  @apply before:w-0;
-}
-
-.anchorClassList {
-  @apply rounded-xl border-2 border-transparent p-2;
-}
-
-.anchorClassList:focus > span:before {
-  @apply w-full;
-}
-
-.anchorClassList:focus {
-  @apply rounded-xl border-2 border-secondary p-2;
-}
-
-.spanClassList {
-  @apply whitespace-nowrap text-center;
-}
-
-.secondary {
-  @apply bg-secondary text-primary;
-}
-
-.secondary > span:before {
-  @apply bg-primary text-primary;
-}
-
-.primary {
-  @apply bg-primary text-secondary;
-}
-
-.primary > span:before {
-  @apply bg-secondary text-secondary;
-}
-
-.tertiary {
-  @apply bg-tertiary text-secondary;
-}
-
-.tertiary > span:before {
-  @apply bg-secondary text-secondary;
-}

package/archive/NavOld/NavOld.stories.tsx

@@ -1,193 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import { Meta, 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, status) => {
-      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 meta>;
-
-export const Default: Story = {};

package/archive/NavOld/StickyNav.tsx

@@ -1,191 +0,0 @@
-import React, { 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;
-}
-
-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): JSX.Element => {
-  const [showSideNav, setShowSideNav] = useState(false);
-  const [showDropdownNav, setShowDropdownNav] = useState(false);
-
-  const colours = [style[variant]];
-
-  const classList = classNames(
-    {
-      [style.showStickyNav]: visible,
-      [style.stickyNavDropShadow]: withShadow,
-    },
-    className,
-    colours,
-    style.stickyNav,
-    'theme-local',
-  );
-
-  const sideNavClasses = classNames(
-    {
-      [style.sideBarCollapsed]: !showSideNav,
-      [style.sideBarExpanded]: showSideNav,
-    },
-    style.sideNavClassList,
-    colours,
-  );
-
-  const dropdownNavClasses = classNames(
-    {
-      [style.dropDownCollapsed]: !showDropdownNav,
-      [`h-${dropdownNavHeight}`]: showDropdownNav,
-    },
-    style.dropDownNavClassList,
-  );
-
-  const mobileContainer = classNames(style.mobileContainer, mobileClasses);
-
-  const toggleMenu = (): void => {
-    getNavStatus?.(withMobileSideBar, !showSideNav);
-    if (withMobileSideBar) {
-      setShowSideNav(!showSideNav);
-    } else {
-      setShowDropdownNav(!showDropdownNav);
-    }
-  };
-
-  const themeString: string = 'theme-local';
-  return (
-    <div id={`sticky_${id ?? 'nav'}`} className={classList}>
-      {/* Mobile Nav */}
-      <Container withPadding className={mobileContainer}>
-        <div className={style.collapseBtnWrapper}>
-          <HamburgerIcon onClick={toggleMenu} variant={variant} />
-        </div>
-        <a className={style.mobileLogo} href={logoLink} tabIndex={tabindex}>
-          <Image
-            src={mobileLogo}
-            // title={`${theme.split('-')[1]}-sticky-mobile-logo`}
-            // altText={`${theme.split('-')[1]}-sticky-mobile-logo`}
-            height={5}
-            width={5}
-          />
-        </a>
-      </Container>
-
-      {/* Desktop Nav */}
-      <Container withPadding className={style.desktopNav}>
-        <div className={style.logoClassList}>
-          <a className={style.desktopLogo} href={logoLink} tabIndex={tabindex}>
-            <Image
-              src={logo}
-              title={`${themeString?.split('-')[1] ?? 'a'}-sticky-desktop-logo`}
-              altText={`${
-                themeString?.split('-')[1] ?? 'a'
-              }-sticky-desktop-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}
-                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={classNames(colours, style.mobileSideBarMenuNavItems)}
-                bordered={false}
-                rounded={false}
-                underlineOnHover
-                variant={variant}
-                tabindex={tabindex}
-              />
-            );
-          })}
-        </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}
-                  tabindex={tabindex}
-                />
-              );
-            })}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default StickyNav;