trepur_components 2.3.7 → 2.3.8

package/{archive → src/components}/Tubestops/Tubestops.stories.tsx

@@ -1,7 +1,7 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, type StoryObj } from '@storybook/react';
 import { idAndClassName } from '@utils/controls';
 
-import Tubestops from '.';
+import { Tubestops } from '.';
 
 const meta = {
   title: 'Components/Tubestops',
@@ -14,7 +14,7 @@ const meta = {
     },
     activeStop: {
       description: 'The stop number which is currently active',
-    },
+    }
   },
   args: {
     items: [
@@ -32,11 +32,11 @@ const meta = {
       'Step 12',
     ],
     activeStop: 1,
-  },
-};
+  }
+}
 
 export default meta;
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof Tubestops>;
 
 export const Default: Story = {};

package/src/components/Tubestops/index.tsx

@@ -0,0 +1,54 @@
+import { type Colours } from '@utils/controls';
+import classNames from 'classnames';
+
+export interface TubestopsProps
+  extends Partial<Pick<HTMLElement, 'className' | 'id'>> {
+  items?: string[];
+
+  bgColour?: Colours;
+  activeStop?: number;
+}
+
+export const Tubestops = ({ id, items, activeStop = 1 }: TubestopsProps) => {
+  return (
+    <div id={id} className="flex py-4">
+      {items?.map((item, i: number) => {
+        return (
+          <div className="w-full min-w-[120px]" key={`tubestop-stop-${i}`}>
+            <div
+              className={classNames({
+                'ml-1/2 mt-4 h-1 w-full bg-border-light':
+                  i >= activeStop - 1 && i < items.length - 1,
+                'ml-1/2 mt-4 h-1 w-full bg-success':
+                  i < activeStop - 1 && i < items.length - 1,
+              })}
+            />
+            <p
+              className={classNames(
+                {
+                  '-mt-4 bg-success': i + 1 < activeStop,
+                  '-mt-4 bg-gold': activeStop === i + 1,
+                  '-mt-4 bg-border-light': i + 1 > activeStop,
+                  'mt-1': i === items.length - 1,
+                },
+                'z-10 mx-auto h-6 w-6 rounded-full',
+              )}
+            />
+            <p
+              className={classNames(
+                {
+                  'font-medium text-success': i + 1 < activeStop,
+                  'font-bold text-gold': activeStop === i + 1,
+                  'font-medium text-border-light': i + 1 > activeStop,
+                },
+                'mt-2 text-center',
+              )}
+            >
+              {item}
+            </p>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/{archive → src/components}/UserIcon/UserIcon.stories.tsx

@@ -1,7 +1,7 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, type StoryObj } from '@storybook/react';
 import { idAndClassName } from '@utils/controls';
 
-import UserIcon from '.';
+import { UserIcon } from '.';
 
 const meta = {
   title: 'Components/User Icon',
@@ -14,14 +14,14 @@ const meta = {
       control: 'text',
       table: {
         category: '',
-      },
+      }
     },
     description: {
       description: '',
       control: 'text',
       table: {
         category: '',
-      },
+      }
     },
     imageProps: {
       type: { name: 'other', value: 'object' },
@@ -31,8 +31,8 @@ const meta = {
           summary: 'object',
         },
         defaultValue: { summary: 'undefined' },
-      },
-    },
+      }
+    }
   },
   args: {
     imageProps: {
@@ -42,8 +42,8 @@ const meta = {
     },
     name: 'Someones name',
     description: 'someone info',
-  },
-};
+  }
+}
 
 export default meta;
 

package/{archive → src/components}/UserIcon/index.tsx

@@ -1,10 +1,6 @@
-import React from 'react';
-
-import Image, { type Props as imageProps } from '@components/Image';
+import { Image, type Props as imageProps } from '@components/Image';
 import classNames from 'classnames';
 
-
-
 export interface Props {
   id?: string;
   className?: string;
@@ -12,35 +8,36 @@ export interface Props {
   description?: string;
   imageProps?: imageProps;
 }
-const UserIcon = ({
+
+export const UserIcon = ({
   id,
   className,
   name,
   description,
   imageProps,
-}: Props): JSX.Element => {
+}: Props) => {
   const classList = classNames(
     {
       className: className !== undefined,
     },
-    style.classList,
-    'theme-local',
-  );
+    'flex items-center',
+  )
 
   imageProps = {
     ...imageProps,
     src: imageProps?.src !== undefined ? imageProps.src : '',
-    className: classNames(imageProps?.className, style.imageClassList),
-  };
+    className: classNames(
+      imageProps?.className,
+      'mr-4 h-12 w-12 shrink-0 rounded-full',
+    )
+  }
   return (
     <div id={id} className={classList}>
       <Image {...imageProps} />
-      <div className={style.contentWrapper}>
-        <p className={style.name}>{name}</p>
-        <p className={style.description}>{description}</p>
+      <div className="ltr:ml-3 rtl:mr-3">
+        <p className="text-md font-regular">{name}</p>
+        <p className="text-sm font-light">{description}</p>
       </div>
     </div>
   );
-};
-
-export default UserIcon;
+}

package/{archive → src/components}/Video/Video.stories.tsx

@@ -1,7 +1,7 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, type StoryObj } from '@storybook/react';
 import { idAndClassName } from '@utils/controls';
 
-import Video from '.';
+import { Video } from '.';
 
 const meta = {
   title: 'Components/Video',
@@ -13,11 +13,11 @@ const meta = {
     withControls: true,
     autoPlay: true,
     muted: true,
-  },
-};
+  }
+}
 
 export default meta;
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof Video>;
 
 export const Default: Story = {};

package/{archive → src/components}/Video/index.tsx

@@ -13,7 +13,7 @@ export interface Props {
   withPoster?: boolean;
 }
 
-const Video = ({
+export const Video = ({
   id,
   className,
   autoPlay,
@@ -25,7 +25,7 @@ const Video = ({
   height,
   width,
   withControls,
-}: Props): JSX.Element => {
+}: Props) => {
   return (
     <video
       id={id}
@@ -42,6 +42,4 @@ const Video = ({
       {ogvFile !== undefined && <source src={ogvFile} type="video/ogg" />}
     </video>
   );
-};
-
-export default Video;
+}

package/src/components/index.ts

@@ -1,119 +1,119 @@
 import { Accordion } from './Accordion';
 import { AlertBar } from './AlertBar';
-// import Breadcrumbs from '../../archive/Breadcrumbs';
-// import BreadcrumbsBordered from '../../archive/BreadcrumbsBordered';
-// import BreadcrumbsItem from '../../archive/BreadcrumbsItem';
-// import Button from './Button';
-// import Calendar from './Calendar';
-// import Card from './Card';
-// import CardWithTopImage from './CardWithTopImage';
-// import Carousel from './Carousel';
-// import CarouselThumbnail from './CarouselThumbnail';
-// import Checkbox from './Checkbox';
-// import Collapsible from './Collapsible';
-// import Column from './Column';
-// import Container from './Container';
-// import Counter from './Counter';
-// import DetailUpdater from './DetailUpdater';
-// import Dialog from './Dialog';
-// import DropdownMenu from './DropdownMenu';
-// import DynamicTextSection from './DynamicTextSection';
-// import FilterItem from './FilterItem';
-// import FooterBar from './Footer';
-// import FooterNav from './FooterNav';
-// import FooterNavItem from './FooterNavItem';
-// import Form from './Form';
-// import FyreCard from './FyreCard';
-// import Greeting from './Greeting';
-// import HorizontalLine from './HorizontalLine';
-// import Icon from './Icon';
-// import IconCard from './IconCard';
-// import Image from './Image';
-// import ImageLink from './ImageLink';
-// import ImageLinkList from './ImageLinkList';
-// import InformationIcon from './InformationIcon';
-// import Input from './Input';
-// import Jumbotron from './Jumbotron';
-// import MenuButton from './MenuButton';
-// import Modal from './Modal';
-// import NavItem from './NavItem';
-// import NavOld from './NavOld';
-// import Nav from './NavTwo';
-// import NewsCard from './NewsCard';
-// import Pill from './Pill';
-// import ProductCard from './ProductCard';
-// import ProductCardV2 from './ProductCardV2';
-// import Profile from './Profile';
-// import Row from './Row';
-// import Search from './Search';
-// import Select from './Select';
-// import SocialBlock from './SocialBlock';
-// import StarRating from './StarRating';
-// import Testimonial from './Testimonial';
-// import TextAndTitle from './TextAndTitle';
-// import TextArea from './TextArea';
-// import Timeline from './Timeline';
-// import Tubestops from './Tubestops';
-// import UserIcon from './UserIcon';
-// import Video from '../../archive/Video';
+import { Breadcrumbs } from './Breadcrumbs';
+import { BreadcrumbsBordered } from './BreadcrumbsBordered';
+import { BreadcrumbsItem } from './BreadcrumbsItem';
+import { Button } from './Button';
+import { CalendarComponent } from './Calendar';
+import { Card } from './Card';
+import { CardWithTopImage } from './CardWithTopImage';
+import { Carousel } from './Carousel';
+import { CarouselThumbnail } from './CarouselThumbnail';
+import { Checkbox } from './Checkbox';
+import { Collapsible } from './Collapsible';
+import { Column } from './Column';
+import { Container } from './Container';
+import { Counter } from './Counter';
+import { DetailUpdater } from './DetailUpdater';
+import { Dialog } from './Dialog';
+import { DropdownMenu } from './DropdownMenu';
+import { DynamicTextSection } from './DynamicTextSection';
+import { FilterItem } from './FilterItem';
+import { Footer } from './Footer';
+import { FooterNav } from './FooterNav';
+import { FooterNavItem } from './FooterNavItem';
+import { Form } from './Form';
+import { FyreCard } from './FyreCard';
+import { Greeting } from './Greeting';
+import { HorizontalLine } from './HorizontalLine';
+import { Icon } from './Icon';
+import { IconCard } from './IconCard';
+import { Image } from './Image';
+import { ImageLink } from './ImageLink';
+import { ImageLinkList } from './ImageLinkList';
+import { InformationIcon } from './InformationIcon';
+import { Input } from './Input';
+import { Jumbotron } from './Jumbotron';
+import { MenuButton } from './MenuButton';
+import { Modal } from './Modal';
+import { NavItem } from './NavItem';
+import { NavOld } from './NavOld';
+import { Nav } from './NavTwo';
+import { NewsCard } from './NewsCard';
+import { Pill } from './Pill';
+import { ProductCard } from './ProductCard';
+import { ProductCardV2 } from './ProductCardV2';
+import { Profile } from './Profile';
+import { Row } from './Row';
+import { Search } from './Search';
+import { Select } from './Select';
+import { SocialBlock } from './SocialBlock';
+import { StarRating } from './StarRating';
+import { Testimonial } from './Testimonial';
+import { TextAndTitle } from './TextAndTitle';
+import { TextArea } from './TextArea';
+import { Timeline } from './Timeline';
+import { Tubestops } from './Tubestops';
+import { UserIcon } from './UserIcon';
+import { Video } from './Video';
 
 export {
   Accordion,
   AlertBar,
-  // Breadcrumbs,
-  // BreadcrumbsBordered,
-  // BreadcrumbsItem,
-  // Button,
-  // Calendar,
-  // Card,
-  // CardWithTopImage,
-  // Checkbox,
-  // Carousel,
-  // CarouselThumbnail,
-  // Collapsible,
-  // Column,
-  // Counter,
-  // Container,
-  // DetailUpdater,
-  // DynamicTextSection,
-  // Dialog,
-  // DropdownMenu,
-  // FilterItem,
-  // Form,
-  // FooterBar,
-  // FooterNav,
-  // FooterNavItem,
-  // FyreCard,
-  // Greeting,
-  // HorizontalLine,
-  // Icon,
-  // IconCard,
-  // Image,
-  // ImageLink,
-  // ImageLinkList,
-  // InformationIcon,
-  // Input,
-  // Jumbotron,
-  // MenuButton,
-  // Modal,
-  // NavOld,
-  // Nav,
-  // NavItem,
-  // NewsCard,
-  // Pill,
-  // ProductCard,
-  // ProductCardV2,
-  // Profile,
-  // Row,
-  // Search,
-  // Select,
-  // SocialBlock,
-  // StarRating,
-  // Testimonial,
-  // TextAndTitle,
-  // TextArea,
-  // Timeline,
-  // Tubestops,
-  // UserIcon,
-  // Video,
+  Breadcrumbs,
+  BreadcrumbsBordered,
+  BreadcrumbsItem,
+  Button,
+  CalendarComponent,
+  Card,
+  CardWithTopImage,
+  Checkbox,
+  Carousel,
+  CarouselThumbnail,
+  Collapsible,
+  Column,
+  Counter,
+  Container,
+  DetailUpdater,
+  DynamicTextSection,
+  Dialog,
+  DropdownMenu,
+  FilterItem,
+  Form,
+  Footer,
+  FooterNav,
+  FooterNavItem,
+  FyreCard,
+  Greeting,
+  HorizontalLine,
+  Icon,
+  IconCard,
+  Image,
+  ImageLink,
+  ImageLinkList,
+  InformationIcon,
+  Input,
+  Jumbotron,
+  MenuButton,
+  Modal,
+  NavOld,
+  Nav,
+  NavItem,
+  NewsCard,
+  Pill,
+  ProductCard,
+  ProductCardV2,
+  Profile,
+  Row,
+  Search,
+  Select,
+  SocialBlock,
+  StarRating,
+  Testimonial,
+  TextAndTitle,
+  TextArea,
+  Timeline,
+  Tubestops,
+  UserIcon,
+  Video,
 };

package/src/components/typography/Fonts/Fonts.stories.tsx

@@ -0,0 +1,14 @@
+import { type Meta, type StoryObj } from '@storybook/react';
+
+import { Fonts } from './Fonts';
+
+const meta = {
+  title: 'Typography/Fonts',
+  component: Fonts,
+} satisfies Meta<typeof Fonts>;
+
+export default meta;
+
+type Story = StoryObj<typeof Fonts>;
+
+export const Default: Story = {};

package/src/components/typography/Fonts/Fonts.tsx

@@ -0,0 +1,74 @@
+import { Icon } from '@components/Icon';
+import { faCheck } from '@fortawesome/fontawesome-free-solid';
+import { type IconProp } from '@fortawesome/fontawesome-svg-core';
+
+import '../../../styles/global.css';
+
+export const Fonts = () => {
+  return (
+    <div>
+      <h2>Font sizes</h2>
+      <div className="flex items-center">
+        <Icon icon={faCheck as IconProp} />
+        <p className="text-xxs font-regular">This text is xxs</p>
+      </div>
+      <div className="flex items-center">
+        <Icon icon={faCheck as IconProp} />
+        <p className="text-xs font-regular">This text is xs</p>
+      </div>
+      <div className="flex items-center">
+        <Icon icon={faCheck as IconProp} />
+        <p className="text-sm font-regular">This text is sm</p>
+      </div>
+      <div className="flex items-center">
+        <Icon icon={faCheck as IconProp} />
+        <p className="text-md font-regular">This text is md</p>
+      </div>
+      <div className="flex items-center">
+        <Icon icon={faCheck as IconProp} />
+        <p className="text-lg font-regular">This text is lg</p>
+      </div>
+      <div className="flex items-center">
+        <Icon icon={faCheck as IconProp} />
+        <p className="text-xl font-regular">This text is xl</p>
+      </div>
+      <div className="flex items-center">
+        <Icon icon={faCheck as IconProp} />
+        <p className="text-xxl font-regular">This text is xxl</p>
+      </div>
+      <h2>Font weights</h2>
+      <div className="flex items-center">
+        <Icon icon={faCheck as IconProp} />
+        <p className="text-md font-thin">This font is thin</p>
+      </div>
+      <div className="flex items-center">
+        <Icon icon={faCheck as IconProp} />
+        <p className="text-md font-extraLight">This font is extra light</p>
+      </div>
+      <div className="flex items-center">
+        <Icon icon={faCheck as IconProp} />
+        <p className="text-md font-light">This font is light</p>
+      </div>
+      <div className="flex items-center">
+        <Icon icon={faCheck as IconProp} />
+        <p className="text-md font-regular">This font is regular</p>
+      </div>
+      <div className="flex items-center">
+        <Icon icon={faCheck as IconProp} />
+        <p className="text-md font-medium">This font is medium</p>
+      </div>
+      <div className="flex items-center">
+        <Icon icon={faCheck as IconProp} />
+        <p className="text-md font-semiBold">This font is semi bold</p>
+      </div>
+      <div className="flex items-center">
+        <Icon icon={faCheck as IconProp} />
+        <p className="text-md font-bold">This font is bold</p>
+      </div>
+      <div className="flex items-center">
+        <Icon icon={faCheck as IconProp} />
+        <p className="text-md font-extraBold">This font is extra bold</p>
+      </div>
+    </div>
+  );
+}

package/src/documentation/Colours.mdx

@@ -3,7 +3,7 @@ import { Meta, Unstyled } from '@storybook/blocks';
 <Meta title="colour/Palette" />
 
 <Unstyled>
-    <div className='px-4 theme-local grid grid-cols-1 gap-12'>
+    <div className='px-4 grid grid-cols-1 gap-12'>
       <div>
         <h2 className='py-4'>Defaults</h2>
         <div className='grid grid-cols-4 gap-6'>

package/src/styles/themes/local.css

@@ -1,40 +1,40 @@
 body {
-    --color-primary: #0036a0;
-    --color-secondary: #e2e2e2;
-    --color-tertiary: #921457;
-    --color-ink: #495863;
-    --color-transparent: transparent;
-    --color-white: #ffffff;
-    --color-black: #000000;
-    --color-red: #bb0a1e;
-    --color-grey: #2c373b;
-    --color-light-grey: #495c63;
-    --color-lightest-grey: #f5f5f5;
-    --color-primary-strict: #ff007d;
-    --color-border: #d0d0d0;
-    --color-border-lightest: #eeeeee;
-    --color-border-light: #d8d8d8;
-    --color-border-dark: #616161;
-    --color-error-light: #ffd9d9;
-    --color-success-light: #e7f5e7;
-    --color-facebook: #3b5999;
-    --color-whatsapp: #25d366;
-    --color-twitter: #55acee;
-    --color-linkedin: #0a66c2;
-    --color-email: #c71610;
-    --color-github: #171515;
-    --color-instagram: #8a3ab9;
-    --color-interactive-facebook: #2d4474;
-    --color-interactive-whatsapp: #25d566;
-    --color-interactive-twitter: #55acee;
-    --color-interactive-linkedin: #0a66c2;
-    --color-interactive-instagram: #6d2e92;
-    --color-interactive-email: #9f110c;
-    --color-interactive-github: #000000;
-    --color-gold: #e2b13c;
-    --color-error: #b11013;
-    --color-warning: #ffd35c;
-    --color-success: #69c364;
-    --color-info-light: #d8eaf5;
-    --color-linkedin: #0e76a8;
-  }
+  --color-primary: #0036a0;
+  --color-secondary: #e2e2e2;
+  --color-tertiary: #921457;
+  --color-ink: #495863;
+  --color-transparent: transparent;
+  --color-white: #ffffff;
+  --color-black: #000000;
+  --color-red: #bb0a1e;
+  --color-grey: #2c373b;
+  --color-light-grey: #495c63;
+  --color-lightest-grey: #f5f5f5;
+  --color-primary-strict: #ff007d;
+  --color-border: #d0d0d0;
+  --color-border-lightest: #eeeeee;
+  --color-border-light: #d8d8d8;
+  --color-border-dark: #616161;
+  --color-error-light: #ffd9d9;
+  --color-success-light: #e7f5e7;
+  --color-facebook: #3b5999;
+  --color-whatsapp: #25d366;
+  --color-twitter: #55acee;
+  --color-linkedin: #0a66c2;
+  --color-email: #c71610;
+  --color-github: #171515;
+  --color-instagram: #8a3ab9;
+  --color-interactive-facebook: #2d4474;
+  --color-interactive-whatsapp: #25d566;
+  --color-interactive-twitter: #55acee;
+  --color-interactive-linkedin: #0a66c2;
+  --color-interactive-instagram: #6d2e92;
+  --color-interactive-email: #9f110c;
+  --color-interactive-github: #000000;
+  --color-gold: #e2b13c;
+  --color-error: #b11013;
+  --color-warning: #ffd35c;
+  --color-success: #69c364;
+  --color-info-light: #d8eaf5;
+  --color-linkedin: #0e76a8;
+}