trepur_components 2.3.2 → 2.3.4

package/archive/Icon/style.module.css

@@ -0,0 +1,253 @@
+.classList {
+  @apply mx-auto my-auto;
+}
+
+.sizeOne {
+  @apply h-6 w-6;
+}
+
+.sizeTwo {
+  @apply h-8 w-8;
+}
+
+.sizeThree {
+  @apply h-16 w-16;
+}
+
+.sizeFour {
+  @apply h-20 w-20;
+}
+
+.sizeFive {
+  @apply h-24 w-24;
+}
+
+.sizeSix {
+  @apply h-28 w-28;
+}
+
+.sizeSeven {
+  @apply h-32 w-32;
+}
+
+.sizeEight {
+  @apply h-36 w-36;
+}
+
+.sizeNine {
+  @apply h-40 w-40;
+}
+
+.sizeTen {
+  @apply h-44 w-44;
+}
+
+/* .sizeTen {
+    @apply w-48 h-48;
+} */
+
+.rounded {
+  @apply rounded-full;
+}
+
+.wrapperClassList {
+  @apply flex transform duration-500;
+}
+
+.textTransparent {
+  @apply text-transparent;
+}
+.textPrimary {
+  @apply text-primary;
+}
+.textSecondary {
+  @apply text-secondary;
+}
+.textWhite {
+  @apply text-white;
+}
+.textBlack {
+  @apply text-black;
+}
+.textGold {
+  @apply text-gold;
+}
+.textGrey {
+  @apply text-light-grey;
+}
+.textFacebook {
+  @apply text-facebook;
+}
+.textInteractive-facebook {
+  @apply text-interactive-facebook;
+}
+.textSuccess {
+  @apply text-success;
+}
+.textError {
+  @apply text-error;
+}
+
+.bgTransparent {
+  @apply bg-transparent;
+}
+.bgPrimary {
+  @apply bg-primary;
+}
+.bgSecondary {
+  @apply bg-secondary;
+}
+.bgWhite {
+  @apply bg-white;
+}
+.bglack {
+  @apply bg-black;
+}
+.bgGold {
+  @apply bg-gold;
+}
+.bgGrey {
+  @apply bg-light-grey;
+}
+.bgFacebook {
+  @apply bg-facebook;
+}
+.bgInteractive-facebook {
+  @apply bg-interactive-facebook;
+}
+.bgSuccess {
+  @apply bg-success;
+}
+.bgError {
+  @apply bg-error;
+}
+
+.hoverTextTransparent {
+  @apply hover:text-transparent;
+}
+.hoverTextPrimary {
+  @apply hover:text-primary;
+}
+.hoverTextSecondary {
+  @apply hover:text-secondary;
+}
+.hoverTextWhite {
+  @apply hover:text-white;
+}
+.hoverTextlack {
+  @apply hover:text-black;
+}
+.hoverTextGold {
+  @apply hover:text-gold;
+}
+.hoverTextGrey {
+  @apply hover:text-light-grey;
+}
+.hoverTextFacebook {
+  @apply hover:text-facebook;
+}
+.hoverTextInteractive-facebook {
+  @apply hover:text-interactive-facebook;
+}
+.hoverTextSuccess {
+  @apply hover:text-success;
+}
+.hoverTextError {
+  @apply hover:text-error;
+}
+
+.hoverBgTransparent {
+  @apply hover:bg-transparent;
+}
+.hoverBgPrimary {
+  @apply hover:bg-primary;
+}
+.hoverBgSecondary {
+  @apply hover:bg-secondary;
+}
+.hoverBgWhite {
+  @apply hover:bg-white;
+}
+.hoverBglack {
+  @apply hover:bg-black;
+}
+.hoverBgGold {
+  @apply hover:bg-gold;
+}
+.hoverBgGrey {
+  @apply hover:bg-light-grey;
+}
+.hoverBgFacebook {
+  @apply hover:bg-facebook;
+}
+.hoverBgInteractive-facebook {
+  @apply hover:bg-interactive-facebook;
+}
+.hoverBgSuccess {
+  @apply hover:bg-success;
+}
+.hoverBgError {
+  @apply hover:bg-error;
+}
+
+.focusTextPrimary {
+  @apply focus:text-primary;
+}
+.focusTextSecondary {
+  @apply focus:text-secondary;
+}
+.focusTextWhite {
+  @apply focus:text-white;
+}
+.focusTextlack {
+  @apply focus:text-black;
+}
+.focusTextGold {
+  @apply focus:text-gold;
+}
+.focusTextGrey {
+  @apply focus:text-light-grey;
+}
+.focusTextFacebook {
+  @apply focus:text-facebook;
+}
+.focusTextInteractive-facebook {
+  @apply focus:text-interactive-facebook;
+}
+.focusTextSuccess {
+  @apply focus:text-success;
+}
+.focusTextError {
+  @apply focus:text-error;
+}
+
+.focusBgPrimary {
+  @apply focus:bg-primary;
+}
+.focusBgSecondary {
+  @apply focus:bg-secondary;
+}
+.focusBgWhite {
+  @apply focus:bg-white;
+}
+.focusBglack {
+  @apply focus:bg-black;
+}
+.focusBgGold {
+  @apply focus:bg-gold;
+}
+.focusBgGrey {
+  @apply focus:bg-light-grey;
+}
+.focusBgFacebook {
+  @apply focus:bg-facebook;
+}
+.focusBgInteractive-facebook {
+  @apply focus:bg-interactive-facebook;
+}
+.focusBgSuccess {
+  @apply focus:bg-success;
+}
+.focusBgError {
+  @apply focus:bg-error;
+}

package/archive/IconCard/IconCard.stories.tsx

@@ -0,0 +1,46 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { idAndClassName } from '@utils/controls';
+
+import IconCard from '.';
+
+const meta = {
+  title: 'Components/IconCard',
+  component: IconCard,
+  argTypes: {
+    ...idAndClassName,
+    title: {
+      description: '',
+      table: {},
+    },
+    description: {
+      description: '',
+      table: {},
+    },
+    href: {
+      description: '',
+      table: {},
+    },
+    target: {
+      description: '',
+      table: {},
+    },
+    iconProps: {
+      description: '',
+      table: {},
+    },
+  },
+  args: {
+    title: 'This is a title',
+    description:
+      'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga excepturi itaque in. Debitis et velit explicabo id quo repellendus architecto hic quis repellat corporis cumque dolorem officiis animi, dicta praesentium.',
+    iconProps: {
+      size: 2,
+      type: 'unlock-keyhole',
+    },
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/archive/IconCard/index.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+
+import Icon, { type Props as IconProps } from '@components/Icon';
+import classNames from 'classnames';
+
+
+
+interface AnchorAttributes
+  extends Partial<
+    Pick<JSX.IntrinsicElements['a'], 'href' | 'title' | 'target'>
+  > {}
+
+export interface Props {
+  id?: string;
+  className?: string;
+  title: string;
+  description: string;
+  iconProps: IconProps;
+
+  href?: string;
+  target?: string;
+  onClick?: () => void;
+}
+
+const IconCard: React.FC<Props> = ({
+  id,
+  className,
+  title,
+  description,
+  iconProps,
+
+  href,
+  target,
+  onClick,
+}: Props): JSX.Element => {
+  const classList = classNames(style.wrapper, className, 'theme-local');
+
+  let Tag: keyof Pick<JSX.IntrinsicElements, 'a' | 'div'> = 'div';
+  let attributes: AnchorAttributes = {};
+
+  if (Boolean(href) || Boolean(target)) {
+    Tag = 'a';
+    attributes = { href, title, target };
+  }
+
+  return (
+    <Tag id={id} className={classList} onClick={onClick} {...attributes}>
+      <div className={style.iconWrapper}>
+        <Icon {...iconProps} size={2} />
+      </div>
+      <p className={style.title}>{title}</p>
+      <p className={style.description}>{description}</p>
+    </Tag>
+  );
+};
+
+export default IconCard;

package/archive/IconCard/style.module.css

@@ -0,0 +1,18 @@
+.wrapper {
+  @apply flex flex-col;
+  @apply bg-white hover:bg-lightest-grey;
+  @apply cursor-pointer shadow-xl drop-shadow;
+  @apply mx-auto my-auto w-full rounded-2xl p-4;
+}
+
+.iconWrapper {
+  @apply py-2;
+}
+
+.title {
+  @apply pt-6 text-md font-semiBold text-ink;
+}
+
+.description {
+  @apply text-light-grey;
+}

package/archive/Image/Image.stories.tsx

@@ -0,0 +1,87 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { idAndClassName } from '@utils/controls';
+
+import Image from '.';
+
+const meta = {
+  title: 'Components/Image',
+  component: Image,
+  argTypes: {
+    ...idAndClassName,
+    image: {
+      type: { name: 'string', required: false },
+      description: 'The image to display on the component',
+      table: {
+        type: { summary: 'default' },
+      },
+    },
+    altText: {
+      type: { name: 'string', required: false },
+      description: 'The accessibility alt text for the image on the component',
+      table: {
+        type: { summary: 'default' },
+      },
+    },
+    title: {
+      type: { name: 'string', required: false },
+      description: 'The accessibility title for the image on the component',
+      table: {
+        type: { summary: 'default' },
+      },
+    },
+    rounded: {
+      type: { name: 'boolean', required: false },
+      description: 'Sets the corners of the component to rounded',
+      table: {
+        type: { summary: 'boolean' },
+      },
+    },
+    roundedFull: {
+      type: { name: 'boolean', required: false },
+      description: 'Sets the component to a circle shape',
+      table: {
+        type: { summary: 'boolean' },
+      },
+    },
+    height: {
+      type: { name: 'number', required: false },
+      description: 'Defines the height of the component',
+      table: {
+        type: { summary: 'number' },
+      },
+    },
+    width: {
+      type: { name: 'number', required: false },
+      description: 'Defines the width of the component',
+      table: {
+        type: { summary: 'number' },
+      },
+    },
+    overlayText: {
+      type: { name: 'string', required: false },
+      description: 'The text to show when hovering over the component',
+      table: {
+        type: { summary: 'default' },
+      },
+    },
+    centerAligned: {
+      type: { name: 'boolean', required: false },
+      description: 'Sets the component to the center',
+      table: {
+        type: { summary: 'boolean' },
+      },
+    },
+  },
+  args: {
+    src: 'https://picsum.photos/200/200',
+    height: 8,
+    width: 8,
+    overlayText: 'logo',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/archive/Image/index.tsx

@@ -0,0 +1,132 @@
+import React, { useState } from 'react';
+
+import classNames from 'classnames';
+
+
+
+export interface Props {
+  id?: string;
+  className?: string;
+  src: string;
+  altText?: string;
+  title?: string;
+  rounded?: boolean;
+  roundedFull?: boolean;
+  height?: number;
+  width?: number;
+  overlayText?: string;
+  centerAligned?: boolean;
+  bordered?: boolean;
+}
+
+const Image = ({
+  id,
+  className,
+  src,
+  altText,
+  title,
+  rounded = false,
+  roundedFull = false,
+  height = 8,
+  width = 8,
+  overlayText,
+  centerAligned = false,
+  bordered = false,
+}: Props): JSX.Element => {
+  const [isHovering, setIsHovering] = useState(false);
+  const opacity = classNames({
+    [style.visible]: isHovering,
+    [style.invisible]: !isHovering,
+  });
+
+  const widthClassList = classNames({
+    [style.width1]: width === 1,
+    [style.width2]: width === 2,
+    [style.width3]: width === 3,
+    [style.width4]: width === 4,
+    [style.width5]: width === 5,
+    [style.width6]: width === 6,
+    [style.width7]: width === 7,
+    [style.width8]: width === 8,
+    [style.width9]: width === 9,
+    [style.width10]: width === 10,
+    [style.width11]: width === 11,
+    [style.width12]:
+      width === undefined ||
+      ![1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].includes(width),
+  });
+
+  const heightClassList = classNames({
+    [style.height1]: height === 1,
+    [style.height2]: height === 2,
+    [style.height3]: height === 3,
+    [style.height4]: height === 4,
+    [style.height5]: height === 5,
+    [style.height6]: height === 6,
+    [style.height7]: height === 7,
+    [style.height8]: height === 8,
+    [style.height9]: height === 9,
+    [style.height10]: height === 10,
+    [style.height11]: height === 11,
+    [style.height12]:
+      height === undefined ||
+      ![1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].includes(height),
+  });
+
+  const imageClassList = classNames(
+    {
+      [style.rounded]: rounded,
+      [style.roundedFull]: roundedFull,
+      [style.centerAligned]: centerAligned,
+      [style.bordered]: bordered,
+    },
+    className,
+    widthClassList,
+    heightClassList,
+    'theme-local',
+  );
+
+  const overlayClassList = classNames(
+    widthClassList,
+    heightClassList,
+    opacity,
+    style.overlayClassList,
+  );
+
+  const overlayTextWrapperClassList = classNames(
+    widthClassList,
+    heightClassList,
+    opacity,
+    style.overlayTextWrapperClassList,
+  );
+
+  return (
+    <div className={imageClassList}>
+      {overlayText !== undefined && (
+        <>
+          <div className={overlayClassList} />
+          <div
+            className={overlayTextWrapperClassList}
+            onMouseEnter={() => {
+              setIsHovering(true);
+            }}
+            onMouseLeave={() => {
+              setIsHovering(false);
+            }}
+          >
+            <p className={style.overlayTextClassList}>{overlayText}</p>
+          </div>
+        </>
+      )}
+      <img
+        id={id}
+        className={imageClassList}
+        src={src}
+        alt={altText ?? overlayText}
+        title={title ?? overlayText}
+      />
+    </div>
+  );
+};
+
+export default Image;

package/archive/Image/style.module.css

@@ -0,0 +1,109 @@
+.overlayTextClassList {
+  @apply m-auto text-center text-primary;
+}
+
+.overlayTextWrapperClassList {
+  @apply absolute z-20 flex transition-opacity duration-700;
+}
+
+.overlayClassList {
+  @apply absolute z-10 bg-white transition-opacity duration-700;
+}
+
+.rounded {
+  @apply rounded-2xl;
+}
+
+.roundedFull {
+  @apply rounded-full;
+}
+
+.bordered {
+  @apply border-4 border-primary;
+}
+
+.centerAligned {
+  @apply mx-auto;
+}
+
+.visible {
+  @apply opacity-80;
+}
+
+.invisible {
+  @apply opacity-0;
+}
+
+.width1 {
+  @apply w-6;
+}
+.width2 {
+  @apply w-10;
+}
+.width3 {
+  @apply w-14;
+}
+.width4 {
+  @apply w-16;
+}
+.width5 {
+  @apply w-20;
+}
+.width6 {
+  @apply w-24;
+}
+.width7 {
+  @apply w-28;
+}
+.width8 {
+  @apply w-32;
+}
+.width9 {
+  @apply w-36;
+}
+.width10 {
+  @apply w-40;
+}
+.width11 {
+  @apply w-44;
+}
+.width12 {
+  @apply w-full;
+}
+
+.height1 {
+  @apply h-6;
+}
+.height2 {
+  @apply h-10;
+}
+.height3 {
+  @apply h-14;
+}
+.height4 {
+  @apply h-16;
+}
+.height5 {
+  @apply h-20;
+}
+.height6 {
+  @apply h-24;
+}
+.height7 {
+  @apply h-28;
+}
+.height8 {
+  @apply h-32;
+}
+.height9 {
+  @apply h-36;
+}
+.height10 {
+  @apply h-40;
+}
+.height11 {
+  @apply h-44;
+}
+.height12 {
+  @apply h-full;
+}