trepur_components 2.3.7 → 2.3.9

package/archive/SideNav/style.module.css

@@ -1,43 +0,0 @@
-.primary {
-  @apply bg-primary text-white;
-}
-
-.secondary {
-  @apply bg-secondary text-white;
-}
-
-.white {
-  @apply bg-white text-black;
-}
-
-.black {
-  @apply bg-black text-white;
-}
-
-.sideNavClassList {
-  @apply absolute z-50 h-full overflow-hidden duration-700;
-}
-
-.leftExpand {
-  @apply left-0;
-}
-
-.rightExpand {
-  @apply right-0;
-}
-
-.mobileSideBarMenu {
-  @apply space-y-1 pb-3 pt-2;
-}
-
-.mobileSideBarMenuNavItems {
-  @apply pl-8 pt-4;
-}
-
-.sideBarCollapsed {
-  @apply w-0;
-}
-
-.sideBarExpanded {
-  @apply w-full sm:w-1/3;
-}

package/archive/SocialBlock/SocialBlock.stories.tsx

@@ -1,58 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import { Meta, StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import SocialBlock from '.';
-
-const socialButtons = [
-  { type: 'facebook', href: '/facebook' },
-  { type: 'instagram', href: '/insta' },
-  { type: 'github', href: '/github' },
-];
-
-const meta = {
-  title: 'Components/Social Block',
-  component: SocialBlock,
-  parameters: {},
-  argTypes: {
-    ...idAndClassName,
-
-    withLiveUpdates: {
-      description: '',
-      control: 'boolean',
-      table: { category: '' },
-    },
-    onSave: {
-      type: { name: 'function', required: false },
-      description: 'Fires a function when you click save',
-      action: 'onClick',
-      table: {
-        type: { summary: 'function' },
-        defaultValue: { summary: 'undefined' },
-      },
-    },
-    variant: {
-      type: { name: 'string', required: false },
-      options: ['dark', 'light'],
-      description: 'The variant of button to render',
-      table: { type: { summary: 'dark' }, defaultValue: { summary: 'dark' } },
-      defaultValue: 'dark',
-      control: { type: 'radio' },
-    },
-  },
-  args: {
-    title: 'Why not connect with me on LinkedIn or Facebook?',
-    description: 'Or send me a E-Mail to get in touch',
-    editTitleClasses: 'text-md sm:text-lg ',
-    editTextClasses: '',
-    editInputClasses: 'mt-4 border border-black text-black bg-white',
-    onSave: action('button-save'),
-    withLiveUpdates: true,
-    socialButtons,
-  },
-};
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};

package/archive/SocialBlock/index.tsx

@@ -1,63 +0,0 @@
-import ComponentWrapper from '@components/ComponentWrapper';
-import SocialButton from '@components/SocialButton';
-import { type Colours } from '@utils/controls';
-import classNames from 'classnames';
-
-export interface Props {
-  id?: string;
-  className?: string;
-  title?: string;
-  description?: string;
-  bgColour?: Colours;
-  socialButtons?: Array<{ type: string }>;
-  variant: 'light' | 'dark';
-}
-
-const SocialBlock = ({
-  id,
-  className,
-  title,
-  description,
-  bgColour,
-  socialButtons,
-  variant = 'light',
-}: Props): JSX.Element => {
-  const colours = variant === 'dark' ? 'bg-primary text-white placeholder-white' : 'bg-white text-black placeholder-primary';
-  const classList = classNames(
-    'w-full',
-    className,
-    colours,
-    'theme-local',
-  );
-
-  return (
-    <ComponentWrapper
-      id={id}
-      className={classList}
-      title={title}
-      description={description}
-      bgColour={bgColour}
-    >
-      <div className='flex w-full'>
-        <div className='mx-auto inline-block rounded-full px-2'>
-          <div className='flex'>
-            {socialButtons?.map((button: any, i: number) => {
-              return (
-                button.href !== undefined && (
-                  <SocialButton
-                    key={`socual_button_${i}`}
-                    className='mx-1 my-2'
-                    type={button.type}
-                    href={button.href}
-                  />
-                )
-              );
-            })}
-          </div>
-        </div>
-      </div>
-    </ComponentWrapper>
-  );
-};
-
-export default SocialBlock;

package/archive/SocialButton/style.module.css

@@ -1,77 +0,0 @@
-.classList {
-  @apply flex h-16 w-16 transform rounded-full duration-500;
-}
-
-.anchor {
-  @apply rounded-full;
-}
-
-.facebook {
-  @apply bg-facebook hover:bg-interactive-facebook;
-}
-
-.instagram {
-  background: radial-gradient(
-      circle farthest-corner at 35% 90%,
-      #fec564,
-      transparent 50%
-    ),
-    radial-gradient(circle farthest-corner at 0 140%, #fec564, transparent 50%),
-    radial-gradient(ellipse farthest-corner at 0 -25%, #5258cf, transparent 50%),
-    radial-gradient(
-      ellipse farthest-corner at 20% -50%,
-      #5258cf,
-      transparent 50%
-    ),
-    radial-gradient(ellipse farthest-corner at 100% 0, #893dc2, transparent 50%),
-    radial-gradient(
-      ellipse farthest-corner at 60% -20%,
-      #893dc2,
-      transparent 50%
-    ),
-    radial-gradient(ellipse farthest-corner at 100% 100%, #d9317a, transparent),
-    linear-gradient(
-      #6559ca,
-      #bc318f 30%,
-      #e33f5f 50%,
-      #f77638 70%,
-      #fec66d 100%
-    );
-}
-
-.instagram:hover {
-  background: radial-gradient(
-      circle farthest-corner at 95% 90%,
-      #fec564,
-      transparent 50%
-    ),
-    radial-gradient(circle farthest-corner at 0 140%, #fec564, transparent 50%),
-    radial-gradient(ellipse farthest-corner at 0 -25%, #5258cf, transparent 50%),
-    radial-gradient(
-      ellipse farthest-corner at 20% -50%,
-      #5258cf,
-      transparent 50%
-    ),
-    radial-gradient(ellipse farthest-corner at 100% 0, #893dc2, transparent 50%),
-    radial-gradient(
-      ellipse farthest-corner at 60% -20%,
-      #893dc2,
-      transparent 50%
-    ),
-    radial-gradient(ellipse farthest-corner at 100% 100%, #d9317a, transparent),
-    linear-gradient(
-      #6559ca,
-      #bc318f 30%,
-      #e33f5f 50%,
-      #f77638 70%,
-      #fec66d 100%
-    );
-}
-
-.github {
-  @apply bg-github hover:bg-interactive-github;
-}
-
-.linkedin {
-  @apply bg-linkedin hover:bg-interactive-linkedin;
-}

package/archive/StarRating/StarRating.stories.tsx

@@ -1,23 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import StarRating from '.';
-
-const meta = {
-  title: 'Components/Star Rating',
-  component: StarRating,
-  parameters: {},
-  argTypes: {
-    ...idAndClassName,
-  },
-  args: {
-    stars: 3,
-    size: 2,
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};

package/archive/StarRating/index.tsx

@@ -1,71 +0,0 @@
-import Icon from '@components/Icon';
-import classNames from 'classnames';
-
-export interface Props {
-  id?: string;
-  className?: string;
-  stars?: number;
-  size?: number;
-}
-
-const StarRating = ({
-  id,
-  className,
-  stars = 1,
-  size = 1,
-}: Props): JSX.Element => {
-  const classList = classNames(className, 'flex theme-local');
-
-  const getStars = (): JSX.Element[] => {
-    const starsArr = [];
-    for (let i = 0; i < stars; i++) {
-      starsArr.push(
-        <Icon
-          key={`checked_star_${i + 0}`}
-          id={`checked-${i}`}
-          className='checked'
-          type="star"
-          size={size}
-          colour="gold"
-          bgColour="white"
-          hoverColour="gold"
-          hoverBgColour="white"
-        />,
-      );
-    }
-    return starsArr;
-  };
-
-  const getStarsChecked = (): JSX.Element[] => {
-    const starsArr = [];
-    for (let i = 0; i < 5 - stars; i++) {
-      starsArr.push(
-        <Icon
-          key={`unchecked_star_${i + 0}`}
-          id={`unchecked-${i}`}
-          className='opacity-30 unchecked gold'
-          type="star"
-          size={size}
-          colour="gold"
-          bgColour="white"
-          hoverColour="gold"
-          hoverBgColour="white"
-        />,
-      );
-    }
-    return starsArr;
-  };
-
-  const getAllStars = (): JSX.Element[] => {
-    const starArray = [...getStars(), ...getStarsChecked()];
-    return starArray;
-  };
-
-  return (
-    <div id={id} className={classList}>
-      {getAllStars()}
-    </div>
-  );
-};
-
-export default StarRating;

package/archive/Testimonial/Testimonial.stories.tsx

@@ -1,110 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import Testimonial from '.';
-
-const meta = {
-  title: 'Components/Testimonial',
-  component: Testimonial,
-  parameters: {},
-  argTypes: {
-    ...idAndClassName,
-    text: {
-      description: 'The description to display on the component',
-      control: 'text',
-      table: {
-        type: { summary: 'default' },
-      },
-      defaultValue: { summary: 'undefined' },
-    },
-    companyName: {
-      description: 'The company name to display on the component',
-      control: 'text',
-      table: {
-        type: { summary: 'default' },
-      },
-      defaultValue: { summary: 'undefined' },
-    },
-    positionStartDate: {
-      description: 'The start date to display on the component',
-      control: 'text',
-      table: {
-        type: { summary: 'default' },
-      },
-      defaultValue: { summary: 'undefined' },
-    },
-    positionEndDate: {
-      description: 'The end date to display on the component',
-      control: 'text',
-      table: {
-        type: { summary: 'default' },
-      },
-      defaultValue: { summary: 'undefined' },
-    },
-    position: {
-      description: 'The position to display on the component',
-      control: 'text',
-      table: {
-        type: { summary: 'default' },
-      },
-      defaultValue: { summary: 'undefined' },
-    },
-    date: {
-      description: 'The date of the testimonial to display on the component',
-      control: 'text',
-      table: {
-        type: { summary: 'default' },
-      },
-      defaultValue: { summary: 'undefined' },
-    },
-    authorsName: {
-      description: 'The authors name to display on the component',
-      control: 'text',
-      table: {
-        type: { summary: 'default' },
-      },
-      defaultValue: { summary: 'undefined' },
-    },
-    authorsPosition: {
-      description: 'The authors position to display on the component',
-      control: 'text',
-      table: {
-        type: { summary: 'default' },
-      },
-      defaultValue: { summary: 'undefined' },
-    },
-    imageProps: {
-      type: { name: 'other', value: 'object' },
-      description: 'The props to pass to the image to display on the component',
-      table: {
-        type: {
-          summary: 'object',
-        },
-        defaultValue: { summary: 'undefined' },
-      },
-    },
-  },
-  args: {
-    imageProps: {
-      src: 'https://picsum.photos/100/100',
-      height: 8,
-      width: 8,
-      roundedFull: true,
-      centerAligned: true,
-    },
-    authorsName: 'Authors Name',
-    authorsPosition: 'Authors Position',
-    position: 'Position',
-    positionEndDate: 'End Date',
-    positionStartDate: 'Start Date',
-    date: 'Date',
-    companyName: 'Company Name',
-    text: 'This is some text',
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};

package/archive/Testimonial/index.tsx

@@ -1,61 +0,0 @@
-import React from 'react';
-
-import Container from '@components/Container';
-import Image, { type Props as imageProps } from '@components/Image';
-import classNames from 'classnames';
-
-
-
-export interface Props {
-  id?: string;
-  className?: string;
-  text?: string;
-  imageProps?: imageProps;
-  companyName?: string;
-  position?: string;
-  date?: string;
-  positionStartDate?: string;
-  positionEndDate?: string;
-  authorsName?: string;
-  authorsPosition?: string;
-}
-
-const Testimonial = ({
-  id,
-  className,
-  text,
-  imageProps,
-  companyName,
-  position,
-  date,
-  positionStartDate,
-  positionEndDate,
-  authorsName,
-  authorsPosition,
-}: Props): JSX.Element => {
-  const classList = classNames(className, style.classList, 'theme-local');
-  const src = imageProps?.src !== undefined ? imageProps?.src : '';
-
-  return (
-    <div id={id} className={classList}>
-      <Container withPadding>
-        <div className={style.imageWrapper}>
-          <Image src={src} {...imageProps} />
-        </div>
-        <div>
-          <h3 className={style.companyName}>{companyName}</h3>
-          <p className={style.position}>{position}</p>
-          <p className={style.dates}>
-            {positionStartDate} - {positionEndDate}
-          </p>
-          <p className={style.text}>{text}</p>
-          <p className={style.author}>
-            {authorsName} - {authorsPosition}: {date}
-          </p>
-        </div>
-      </Container>
-    </div>
-  );
-};
-
-export default Testimonial;

package/archive/Testimonial/style.module.css

@@ -1,27 +0,0 @@
-.classList {
-  @apply text-center;
-}
-
-.imageWrapper {
-  @apply mx-auto;
-}
-
-.companyName {
-  @apply text-lg font-medium;
-}
-
-.position {
-  @apply pt-2 text-md font-regular;
-}
-
-.dates {
-  @apply text-sm font-regular;
-}
-
-.text {
-  @apply py-4 text-md font-light;
-}
-
-.author {
-  @apply text-sm font-medium;
-}

package/archive/TextAndTitle/TextAndTitle.stories.tsx

@@ -1,70 +0,0 @@
-import Greeting from '@components/Greeting';
-import { action } from '@storybook/addon-actions';
-import { Meta, StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import TextAndTitle from '.';
-
-const meta = {
-  title: 'Components/Text And Title',
-  component: TextAndTitle,
-  argTypes: {
-    ...idAndClassName,
-
-    onSave: {
-      type: { name: 'function', required: false },
-      description: 'Fires a function when you click save',
-      action: 'onClick',
-      table: {
-        type: {
-          summary: 'function',
-        },
-        defaultValue: { summary: 'undefined' },
-      },
-    },
-    bgColour: {
-      type: { name: 'string', required: false },
-      options: ['primary', 'secondary', 'white', 'black', 'gold'],
-      description: 'The background colour of the component',
-      table: {
-        type: { summary: 'string' },
-      },
-      defaultValue: 'primary',
-      control: 'select',
-    },
-  },
-  args: {
-    title: 'This is a title',
-    description: 'what do you recon to this?',
-    children: <p>This is a child</p>,
-    editTitleClasses: 'text-md sm:text-lg ',
-    editTextClasses: 'break-words',
-    editInputClasses: 'border border-black text-black bg-white',
-    textLineOne: (
-      <div>
-        <Greeting />
-        <p>Loremipsumdolorsitamet consectetur adipisicing elit</p>
-      </div>
-    ),
-    textLineTwo:
-      'Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi impedit sed, quis aspernatur voluptate minima vel placeat ipsa amet voluptatem reprehenderit ullam rem cum tempora explicabo veritatis numquam libero asperiores!',
-    textLineThree:
-      'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tenetur nihil voluptas ipsum labore? Eligendi et ipsam, repellat culpa porro a animi laudantium molestiae provident facere non tempora odit? Perferendis, assumenda.',
-    onSave: action('button-save'),
-    withLiveUpdates: true,
-    isHorizontal: true,
-    saveButtonProps: {
-      className: 'mt-4',
-      children: 'Save',
-    },
-    cancelButtonProps: {
-      className: 'mt-4 ml-4',
-      children: 'Cancel',
-    },
-  },
-};
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};