trepur_components 2.3.8 → 2.3.9

package/src/components/Video/index.tsx

@@ -1,45 +1,92 @@
-export interface Props {
-  id?: string;
-  className?: string;
+import { forwardRef, HTMLAttributes } from 'react';
+
+export interface VideoProps {
   autoPlay?: boolean;
   muted?: boolean;
   poster?: string;
   mp4File?: string;
   webmFile?: string;
-  ogvFile?: string;
-  height?: string;
-  width?: string;
   withControls?: boolean;
   withPoster?: boolean;
 }
 
-export const Video = ({
-  id,
-  className,
-  autoPlay,
-  muted,
-  poster,
-  mp4File,
-  webmFile,
-  ogvFile,
-  height,
-  width,
-  withControls,
-}: Props) => {
-  return (
-    <video
-      id={id}
-      className={className}
-      poster={poster}
-      width={width}
-      height={height}
-      controls={withControls}
-      autoPlay={autoPlay}
-      muted={muted}
-    >
-      <source src={mp4File} type="video/mp4" />
-      {webmFile !== null && <source src={webmFile} type="video/webm" />}
-      {ogvFile !== undefined && <source src={ogvFile} type="video/ogg" />}
-    </video>
-  );
-}
+const VideoComponent = forwardRef<
+  HTMLVideoElement,
+  HTMLAttributes<HTMLVideoElement> & VideoProps
+>(
+  (
+    {
+      children,
+      poster,
+      withControls = false,
+      autoPlay = false,
+      muted = false,
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <video
+        className="h-full w-full max-w-[800px]"
+        ref={ref}
+        poster={poster}
+        controls={withControls}
+        autoPlay={autoPlay}
+        muted={muted}
+        {...props}
+      >
+        {children}
+      </video>
+    );
+  },
+);
+
+const VideoFile = forwardRef<
+  HTMLSourceElement,
+  HTMLAttributes<HTMLSourceElement> & {
+    src: string;
+    type: 'video/mp4' | 'video/webm' | 'video/ogv';
+  }
+>(({ src, type, ...props }, ref) => {
+  return <source ref={ref} src={src} type={type} {...props} />;
+});
+
+VideoComponent.displayName = 'Video';
+VideoFile.displayName = 'Video.File';
+
+const Video = Object.assign(VideoComponent, {
+  File: VideoFile,
+});
+
+export { Video };
+
+// export const Video = ({
+//   id,
+//   className,
+//   autoPlay,
+//   muted,
+//   poster,
+//   mp4File,
+//   webmFile,
+//   ogvFile,
+//   height,
+//   width,
+//   withControls,
+// }: Props) => {
+//   return (
+//     <video
+//       id={id}
+//       className={className}
+//       poster={poster}
+//       width={width}
+//       height={height}
+//       controls={withControls}
+//       autoPlay={autoPlay}
+//       muted={muted}
+//     >
+//       <source src={mp4File} type="video/mp4" />
+//       {webmFile !== null && <source src={webmFile} type="video/webm" />}
+//       {ogvFile !== undefined && <source src={ogvFile} type="video/ogg" />}
+//     </video>
+//   );
+// }

package/src/components/index.ts

@@ -1,119 +1,73 @@
 import { Accordion } from './Accordion';
 import { AlertBar } from './AlertBar';
 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 { Dropdown } from './Dropdown';
 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 { ImageCard } from './ImageCard';
 import { Input } from './Input';
-import { Jumbotron } from './Jumbotron';
 import { MenuButton } from './MenuButton';
 import { Modal } from './Modal';
+import { Nav } from './Nav';
 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 { Stars } from './Stars';
 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,
   CalendarComponent,
   Card,
-  CardWithTopImage,
   Checkbox,
   Carousel,
   CarouselThumbnail,
   Collapsible,
-  Column,
   Counter,
-  Container,
   DetailUpdater,
-  DynamicTextSection,
   Dialog,
-  DropdownMenu,
-  FilterItem,
+  Dropdown,
   Form,
   Footer,
   FooterNav,
-  FooterNavItem,
-  FyreCard,
   Greeting,
-  HorizontalLine,
   Icon,
-  IconCard,
   Image,
-  ImageLink,
-  ImageLinkList,
-  InformationIcon,
+  ImageCard,
   Input,
-  Jumbotron,
   MenuButton,
   Modal,
-  NavOld,
   Nav,
   NavItem,
-  NewsCard,
   Pill,
-  ProductCard,
-  ProductCardV2,
-  Profile,
-  Row,
   Search,
   Select,
-  SocialBlock,
-  StarRating,
+  Stars,
   Testimonial,
-  TextAndTitle,
   TextArea,
   Timeline,
   Tubestops,
-  UserIcon,
   Video,
 };

package/src/custom.d.ts

@@ -0,0 +1,14 @@
+declare module '*.webm' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.mp4' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.svg' {
+  const src: string;
+  export default src;
+}

package/src/documentation/Colours.mdx

@@ -1,132 +1,132 @@
 import { Meta, Unstyled } from '@storybook/blocks';
 
-<Meta title="colour/Palette" />
+<Meta title="colour/ThemeColours" />
 
 <Unstyled>
     <div className='px-4 grid grid-cols-1 gap-12'>
       <div>
-        <h2 className='py-4'>Defaults</h2>
+        <h2 className='py-4 font-bold underline'>Defaults</h2>
         <div className='grid grid-cols-4 gap-6'>
           <div className='grid grid-cols-1 gap-1'>
-            <div className='h-6 rounded-md bg-primary' />
             <p>Primary</p>
+            <div className='h-6 rounded-md bg-primary' />
           </div>
 
           <div className='grid grid-cols-1 gap-1'>
-            <div className='h-6 rounded-md bg-secondary' />
             <p>Secondary</p>
+            <div className='h-6 rounded-md bg-secondary' />
           </div>
 
           <div className='grid grid-cols-1 gap-1'>
-            <div className='h-6 rounded-md bg-third' />
-            <p>Third</p>
+            <p>Tertiary</p>
+            <div className='h-6 rounded-md bg-tertiary' />
           </div>
 
           <div className='grid grid-cols-1 gap-1'>
-            <div className='h-6 rounded-md bg-white' />
             <p>White</p>
+            <div className='h-6 rounded-md bg-white' />
           </div>
 
           <div className='grid grid-cols-1 gap-1'>
-            <div className='h-6 rounded-md bg-black' />
             <p>Black</p>
+            <div className='h-6 rounded-md bg-black' />
           </div>
 
           <div className='grid grid-cols-1 gap-1'>
-            <div className='h-6 rounded-md bg-grey' />
             <p>Grey</p>
+            <div className='h-6 rounded-md bg-grey' />
           </div>
 
           <div className='grid grid-cols-1 gap-1'>
-            <div className='h-6 rounded-md bg-light-grey' />
             <p>Light Grey</p>
+            <div className='h-6 rounded-md bg-light-grey' />
           </div>
 
           <div className='grid grid-cols-1 gap-1'>
-            <div className='h-6 rounded-md bg-lightest-grey' />
             <p>Lightest Grey</p>
+            <div className='h-6 rounded-md bg-lightest-grey' />
           </div>
 
           <div className='grid grid-cols-1 gap-1'>
-            <div className='h-6 rounded-md bg-border' />
             <p>Border</p>
+            <div className='h-6 rounded-md bg-border' />
           </div>
 
           <div className='grid grid-cols-1 gap-1'>
-            <div className='h-6 rounded-md bg-border-light' />
             <p>Border Light</p>
+            <div className='h-6 rounded-md bg-border-light' />
           </div>
 
           <div className='grid grid-cols-1 gap-1'>
-            <div className='h-6 rounded-md bg-border-lightest' />
             <p>Border Lightest</p>
+            <div className='h-6 rounded-md bg-border-lightest' />
           </div>
 
           <div className='grid grid-cols-1 gap-1'>
-            <div className='h-6 rounded-md bg-border-dark' />
             <p>Border Dark</p>
+            <div className='h-6 rounded-md bg-border-dark' />
           </div>
 
           <div className='grid grid-cols-1 gap-1'>
-            <div className='h-6 rounded-md bg-primary-strict' />
             <p>Primary Strict</p>
+            <div className='h-6 rounded-md bg-primary-strict' />
           </div>
 
           <div className='grid grid-cols-1 gap-1'>
-            <div className='h-6 rounded-md bg-red' />
             <p>Red</p>
+            <div className='h-6 rounded-md bg-red' />
           </div>
 
           <div className='grid grid-cols-1 gap-1'>
-            <div className='h-6 rounded-md bg-gold' />
             <p>Gold</p>
+            <div className='h-6 rounded-md bg-gold' />
           </div>
 
           <div className='grid grid-cols-1 gap-1'>
-            <div className='h-6 rounded-md bg-ink' />
             <p>Ink</p>
+            <div className='h-6 rounded-md bg-ink' />
           </div>
         </div>
       </div>
       <div>
-        <h2 className='py-4'>Feedback</h2>
+        <h2 className='py-4 font-bold underline'>Status Colours</h2>
         <div className='grid grid-cols-4 gap-6'>
           <div className='grid grid-cols-1 gap-1'>
-            <div className='h-6 rounded-md bg-success' />
-            <p>Success</p>
+            <p>Success Default</p>
+            <div className='h-6 rounded-md bg-success-default' />
           </div>
           <div className='grid grid-cols-1 gap-1'>
-            <div className='h-6 rounded-md bg-error' />
-            <p>Error</p>
+            <p>Error Default</p>
+            <div className='h-6 rounded-md bg-error-default' />
           </div>
           <div className='grid grid-cols-1 gap-1'>
-            <div className='h-6 rounded-md bg-warning' />
-            <p>Warning</p>
+            <p>Warning Default</p>
+            <div className='h-6 rounded-md bg-warning-default' />
           </div>
           <div className='grid grid-cols-1 gap-1'>
-            <div className='h-6 rounded-md bg-info' />
-            <p>Info</p>
+            <p>Info Default</p>
+            <div className='h-6 rounded-md bg-info-default' />
           </div>
           <div className='grid grid-cols-1 gap-1'>
-            <div className='h-6 rounded-md bg-success-light' />
             <p>Success Light</p>
+            <div className='h-6 rounded-md bg-success-light' />
           </div>
           <div className='grid grid-cols-1 gap-1'>
-            <div className='h-6 rounded-md bg-error-light' />
             <p>Error Light</p>
+            <div className='h-6 rounded-md bg-error-light' />
           </div>
           <div className='grid grid-cols-1 gap-1'>
-            <div className='h-6 rounded-md bg-warning-light' />
             <p>Warning Light</p>
+            <div className='h-6 rounded-md bg-warning-light' />
           </div>
           <div className='grid grid-cols-1 gap-1'>
-            <div className='h-6 rounded-md bg-info-light' />
             <p>Info Light</p>
+            <div className='h-6 rounded-md bg-info-light' />
           </div>
         </div>
       </div>
       <div>
-        <h2 className='py-4'>Socials</h2>
+        <h2 className='py-4 font-bold underline'>Socials</h2>
         <div className='grid grid-cols-4 gap-6'>
           <div className='grid grid-cols-1 gap-1'>
             <div className='h-6 rounded-md bg-facebook' />

package/src/documentation/Introduction.mdx

@@ -1,9 +1,13 @@
 import { Meta, Unstyled } from '@storybook/blocks';
 
-<Meta title="guides/Introduction" />
-
-<img src="trepur-components-logo.png" width="200" />
+import { TrepurComponentsLogo } from './assets';
 
-# Trepur Components
+<Meta title="guides/Introduction" />
 
-Welcome to Trepur Components, the design system for Trepur Tech
+<Unstyled>
+  <div>
+    <img className="mx-auto" src={TrepurComponentsLogo} width="200" />
+    <h1 className="font-semiBold py-4 text-center">Trepur Components</h1>
+    <p>Welcome to Trepur Components, the design system for Trepur Tech</p>
+  </div>
+</Unstyled>

package/src/documentation/assets/index.ts

@@ -0,0 +1,3 @@
+import TrepurComponentsLogo from './trepurComponentsLogo.svg';
+
+export { TrepurComponentsLogo };