trepur_components 2.3.2 → 2.3.4

package/archive/SocialBlock/SocialBlock.stories.tsx

@@ -0,0 +1,58 @@
+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

@@ -0,0 +1,63 @@
+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/SocialButton.stories.tsx

@@ -0,0 +1,88 @@
+import { action } from '@storybook/addon-actions';
+import { Meta, StoryObj } from '@storybook/react';
+import { idAndClassName } from '@utils/controls';
+
+import SocialButton from '.';
+
+const meta = {
+  title: 'Components/SocialButton',
+  component: SocialButton,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A SocialButton which can either be internal, external or social as well as a standard design or a slide design.',
+      },
+    },
+  },
+  argTypes: {
+    ...idAndClassName,
+    onClick: {
+      type: { name: 'function', required: false },
+      description: 'The action to perform when clicking on the component',
+      action: 'onClick',
+      table: {
+        type: {
+          summary: 'function',
+        },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+    type: {
+      type: {
+        name: 'string',
+        required: false,
+      },
+      options: ['facebook', 'instagram', 'github', 'linkedin'],
+      description: 'The type of SocialButton to render',
+      table: {
+        type: {
+          summary: 'default',
+        },
+        defaultValue: {
+          summary: 'default',
+        },
+      },
+      defaultValue: 'default',
+      control: { type: 'radio' },
+    },
+    href: {
+      type: { name: 'string', required: false },
+      description: 'The link attached to the component',
+      table: {
+        type: {
+          summary: 'default',
+        },
+        defaultValue: {
+          summary: 'undefined',
+        },
+      },
+    },
+    openInNewTab: {
+      type: { name: 'boolean', required: false },
+      description: 'Opens the link in a new tab when set to true',
+      defaultValue: 'false',
+    },
+    children: {
+      type: { name: 'other', value: 'string | React.ReactNode' },
+      description: 'The child elements to show in the component',
+      table: {
+        type: {
+          summary: 'Array',
+        },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+  },
+  args: {
+    type: 'facebook',
+    href: '/',
+    onClick: action('SocialButton clicked'),
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/archive/SocialButton/index.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+
+import Icon from '@components/Icon';
+import { Colours, SocialTypes } from '@utils/controls';
+import classNames from 'classnames';
+
+
+
+export interface Props {
+  id?: string;
+  className?: string;
+  onClick?: React.MouseEventHandler;
+  type?: SocialTypes;
+  href?: string;
+  openInNewTab?: boolean;
+}
+
+const SocialButton = ({
+  id,
+  className,
+  onClick,
+  type = 'facebook',
+  href,
+  openInNewTab = false,
+}: Props): JSX.Element => {
+  const getColours = (type: Colours): Colours => {
+    const typeString: string = type;
+    const colour: string = `interactive-${typeString}`;
+    return colour as Colours;
+  };
+
+  const classList = classNames(
+    style.classList,
+    style[type],
+    className,
+    'theme-local',
+  );
+
+  const iconType = {
+    facebook: 'facebook-f',
+    instagram: 'instagram',
+    github: 'github',
+    linkedin: 'linkedin-in',
+  };
+
+  const typeString: string = type.toString();
+  return (
+    <a
+      className={style.anchor}
+      href={href}
+      aria-label={`view me on ${typeString}`}
+      onClick={onClick}
+      {...(openInNewTab && { target: '_blank' })}
+    >
+      <div id={id} className={classList}>
+        <Icon
+          type={iconType[type]}
+          className="mx-auto my-auto"
+          size={2}
+          brand
+          rounded
+          bgColour={type}
+          colour="white"
+          hoverBgColour={getColours(type as Colours)}
+        />
+      </div>
+    </a>
+  );
+};
+
+export default SocialButton;

package/archive/SocialButton/style.module.css

@@ -0,0 +1,77 @@
+.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

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,71 @@
+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

@@ -0,0 +1,110 @@
+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

@@ -0,0 +1,61 @@
+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

@@ -0,0 +1,27 @@
+.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;
+}