trepur_components 2.3.6 → 2.3.8

package/archive/Select/style.module.css

@@ -1,52 +0,0 @@
-.classList {
-  @apply w-full rounded-xl bg-white;
-  @apply shadow drop-shadow;
-  @apply flex cursor-pointer flex-row justify-between px-4;
-}
-
-.fullWidth {
-  @apply w-full;
-}
-
-.notFullWidth {
-  @apply sm:w-72;
-}
-
-.labelContainer {
-  @apply flex flex-col;
-}
-
-.labelWrapper {
-  @apply absolute mt-2 flex bg-white text-xs font-thin;
-}
-
-.required {
-  @apply font-semiBold text-error;
-}
-
-.value {
-  @apply rounded-xl border-ink bg-white pb-1 pt-6 text-ink;
-  @apply flex justify-between;
-}
-
-.icon {
-  @apply my-auto;
-}
-
-.dropdownWrapper {
-  @apply relative z-20;
-}
-
-.optionList {
-  @apply absolute w-full bg-white;
-  @apply mt-2 rounded-2xl py-4;
-  @apply shadow-xl;
-  @apply border border-lightest-grey;
-  @apply h-64 overflow-scroll;
-}
-
-.option {
-  @apply bg-white text-ink hover:bg-lightest-grey;
-  @apply hover:cursor-pointer;
-  @apply px-4 py-2;
-}

package/archive/Showcase/index.tsx

@@ -1,75 +0,0 @@
-import React from 'react';
-
-import Avatar from '@components/Avatar';
-import ComponentWrapper from '@components/ComponentWrapper';
-import Container from '@components/Container';
-import Icon, { type Props as iconProps } from '@components/Icon';
-import { type Colours } from '@utils/controls';
-import classNames from 'classnames';
-
-
-
-export interface Props {
-  id: string;
-  className?: string;
-  title: string;
-  subTitle: string;
-  description: string;
-  bgColour?: Colours;
-  image: string;
-
-  size?: 'small' | 'medium' | 'large';
-  iconProps?: iconProps;
-}
-
-const Showcase: React.FC<Props> = ({
-  id,
-  className,
-  title,
-  subTitle,
-  description,
-  bgColour,
-  size = 'large',
-
-  iconProps,
-}: Props): JSX.Element => {
-  const classList = classNames(className, 'theme-local');
-
-  const containerSize = classNames(
-    {
-      [style.smallContainer]: size === 'small',
-      [style.mediumContainer]: size === 'medium',
-      [style.largeContainer]: size === 'large',
-    },
-    style.container,
-  );
-
-  return (
-    <ComponentWrapper id={id} className={classList} bgColour={bgColour}>
-      <Container className={containerSize}>
-        <div className={style.textWrapper}>
-          <h2 className={style.title}>{title}</h2>
-          <h2 className={style.subTitle}>{subTitle}</h2>
-          <p className={style.description}>{description}</p>
-        </div>
-        <div className={style.avatarWrapper}>
-          <Avatar />
-        </div>
-      </Container>
-      {iconProps?.type !== undefined && (
-        <div className={style.iconWrapper}>
-          <Icon
-            className={style.icon}
-            size={2}
-            rounded
-            {...iconProps}
-            type={iconProps.type}
-            onClick={iconProps.onClick}
-          />
-        </div>
-      )}
-    </ComponentWrapper>
-  );
-};
-
-export default Showcase;

package/archive/Showcase/style.module.css

@@ -1,47 +0,0 @@
-.container {
-  @apply flex flex-wrap text-center md:flex-nowrap md:text-left;
-}
-
-.smallContainer {
-  @apply h-56;
-}
-
-.mediumContainer {
-  @apply h-96;
-}
-
-.largeContainer {
-  @apply min-h-[calc(100vh-176px)];
-}
-
-.textWrapper {
-  @apply m-auto w-full md:w-2/3 md:pl-16 md:pr-4 lg:pl-32 lg:pr-8 xl:pl-64;
-}
-
-.title {
-  @apply text-lg font-bold leading-tight text-primary md:text-xxl;
-}
-
-.subTitle {
-  @apply text-lg font-bold leading-tight text-black md:text-xxl;
-}
-
-.description {
-  @apply pt-4 text-sm text-black md:text-md;
-}
-
-.avatarWrapper {
-  @apply m-auto flex w-full justify-center md:w-1/3 md:pb-20;
-}
-
-.avatar {
-  @apply max-h-96 md:m-auto md:w-full;
-}
-
-.iconWrapper {
-  @apply w-full;
-}
-
-.icon {
-  @apply mx-auto hover:scale-125 hover:cursor-pointer;
-}

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/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/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/style.module.css

@@ -1,75 +0,0 @@
-.primary {
-  @apply bg-primary text-white;
-}
-
-.primary:hover {
-  @apply border-white;
-}
-
-.secondary {
-  @apply bg-secondary text-white;
-}
-
-.secondary:hover {
-  @apply border-white;
-}
-
-.white {
-  @apply bg-white;
-}
-
-.white:hover {
-  @apply border-black;
-}
-
-.black {
-  @apply bg-black text-white;
-}
-
-.black:hover {
-  @apply border-white;
-}
-
-.bordered {
-  @apply border-4 border-transparent;
-}
-
-.fontBold {
-  @apply font-bold;
-}
-
-.textCenter {
-  @apply text-center;
-}
-
-.titleClassList {
-  @apply break-words text-lg font-light;
-}
-
-.textClassList {
-  @apply mt-2 pt-2 text-md font-light;
-}
-
-.wrapperClassList {
-  @apply border-4 border-transparent;
-}
-
-.horizontalWrapperClassList {
-  @apply flex flex-wrap justify-center md:items-center;
-}
-
-.liveUpdatesWrapperClassList:hover {
-  @apply border-4 border-dashed;
-}
-
-.horizontalTextWrapperClassList {
-  @apply md:w-1/2 md:text-center;
-}
-
-.horizontalTitleWrapperClassList {
-  @apply md:w-1/2 md:text-center;
-}
-
-.buttonWrapper {
-  @apply pb-8 text-center;
-}

package/archive/TextArea/style.module.css

@@ -1,60 +0,0 @@
-.classList {
-  @apply mt-4 w-full bg-white;
-  @apply cursor-pointer;
-}
-
-/* .classList:active p {
-    @apply hidden;
-} 
-
-.classList:active .value {
-    @apply pt-3 pb-4;
-}  */
-
-.fullWidth {
-  @apply w-full;
-}
-
-.notFullWidth {
-  @apply sm:w-72;
-}
-
-.labelWrapper {
-  @apply absolute -mt-3 ml-3 px-1;
-  @apply rounded-2xl bg-white text-sm font-regular;
-}
-
-.required {
-  @apply font-semiBold text-error;
-}
-
-.value {
-  @apply w-full rounded-md bg-white py-2 pl-4 text-ink;
-  @apply cursor-pointer;
-  @apply border border-black;
-  @apply text-md;
-}
-
-/* .value:focus {
-    @apply pt-3 pb-4;
-}
-
-.value:focus ~ label {
-    @apply text-xl;
-} */
-
-.errors {
-  @apply text-sm font-regular text-error;
-}
-
-.errorState {
-  @apply border-2 border-error;
-}
-
-.labelError {
-  @apply text-error;
-}
-
-.errorText {
-  @apply mt-1 border-l-4 border-error pl-3;
-}

package/archive/Timeline/style.module.css

@@ -1,134 +0,0 @@
-.classList {
-  @apply w-full list-none pb-4;
-}
-
-.circle {
-  @apply mx-auto my-16 h-4 w-4 rounded-full border bg-black text-center;
-}
-
-.liClassList {
-  @apply relative flex flex-auto flex-row leading-tight;
-}
-
-.liVerticalReverse {
-  @apply flex-row-reverse;
-}
-
-.liHorizontalReverse {
-  @apply flex-col-reverse items-center;
-}
-
-.li {
-  @apply flex-row;
-}
-
-.liHorizontal {
-  @apply flex-col items-center justify-between;
-}
-
-.textCenter {
-  @apply text-center;
-}
-
-.ulClassList {
-  @apply relative flex list-none pl-0;
-}
-
-.ulVerticalReverse {
-  @apply flex-col;
-}
-
-.ulHorizontalReverse {
-  @apply flex-row justify-between;
-}
-
-.ul {
-  @apply flex-col;
-}
-
-.ulHorizontal {
-  @apply flex-row justify-between;
-}
-
-/* Vertical */
-.circleVerticalBefore {
-  @apply absolute top-0 block h-1/2 border-2 border-solid border-primary;
-  content: '';
-  left: 49.9%;
-}
-
-.circleVerticalAfter {
-  @apply absolute bottom-0 block h-1/2 border-2 border-solid border-primary;
-  content: '';
-  left: 49.9%;
-}
-
-.firstCircleVerticalAfter {
-  @apply absolute bottom-0 block h-1/2 border-2 border-solid border-primary;
-  content: '';
-  left: 49.9%;
-}
-
-.lastCircleVerticalBefore {
-  @apply absolute top-0 block h-1/2 border-2 border-solid border-primary;
-  content: '';
-  left: 49.9%;
-}
-
-/* V - collapse*/
-.circleVerticalCollapseBefore {
-  @apply absolute top-0 block h-1/2 border-2 border-solid border-primary;
-  content: '';
-  left: 8.2%;
-}
-
-.circleVerticalCollapseAfter {
-  @apply absolute bottom-0 block h-1/2 border-2 border-solid border-primary;
-  content: '';
-  left: 8.2%;
-}
-
-.firstCircleVerticalCollapseAfter {
-  @apply absolute bottom-0 block h-1/2 border-2 border-solid border-primary;
-  content: '';
-  left: 8.2%;
-}
-
-.lastCircleVerticalCollapseBefore {
-  @apply absolute top-0 block h-1/2 border-2 border-solid border-primary;
-  content: '';
-  left: 8.2%;
-}
-
-/* Horizontal */
-.circleHorizontalBefore {
-  @apply absolute top-1/2 block border-2 border-solid border-primary;
-  content: '';
-  width: 70%;
-  left: -8%;
-}
-
-.circleHorizontalAfter {
-  @apply absolute top-1/2 block border-2 border-solid border-primary;
-  content: '';
-  width: 70%;
-  right: -12%;
-}
-
-.firstCircleHorizontalAfter {
-  @apply absolute top-1/2 block border-2 border-solid border-primary;
-  content: '';
-  width: 60%;
-  right: -12%;
-}
-
-.lastCircleHorizontalBefore {
-  @apply absolute top-1/2 block border-2 border-solid border-primary;
-  content: '';
-  width: 55%;
-  left: -8%;
-}
-
-.imageProps {
-  @apply relative z-10;
-}

package/archive/TimelineV2/style.module.css

@@ -1,28 +0,0 @@
-.classList {
-  @apply w-full list-none pb-4;
-}
-
-.item {
-  @apply flex;
-}
-
-.lineWrapper {
-  @apply hidden sm:block;
-}
-
-.circle {
-  @apply z-10 m-auto mt-12 h-4 w-4 rounded-full bg-light-grey;
-}
-
-.line {
-  @apply m-auto h-full w-1 bg-light-grey;
-}
-
-.blank {
-  @apply border-r-2 border-transparent;
-  content: '';
-}
-
-.collapsible {
-  @apply my-2 w-full rounded-2xl bg-white sm:ml-8;
-}

package/archive/Tubestops/index.tsx

@@ -1,58 +0,0 @@
-import React from 'react';
-
-import { type Colours } from '@utils/controls';
-import classNames from 'classnames';
-
-
-
-export interface Props extends Partial<Pick<HTMLElement, 'className' | 'id'>> {
-  items?: string[];
-
-  bgColour?: Colours;
-  activeStop?: number;
-}
-
-const Tubestops: React.FC<Props> = ({ id, items, activeStop = 1 }) => {
-  return (
-    <div id={id} className={classNames(style.wrapper, 'theme-local')}>
-      {items?.map((item, i: number) => {
-        return (
-          <div className={classNames(style.item)} key={`tubestop-stop-${i}`}>
-            <div
-              className={classNames({
-                [style.line]: i >= activeStop - 1 && i < items.length - 1,
-                [style.completedLine]:
-                  i < activeStop - 1 && i < items.length - 1,
-              })}
-            />
-            <p
-              className={classNames(
-                {
-                  [style.completedCircle]: i + 1 < activeStop,
-                  [style.activeCircle]: activeStop === i + 1,
-                  [style.inactiveCircle]: i + 1 > activeStop,
-                  [style.circleLast]: i === items.length - 1,
-                },
-                style.circle,
-              )}
-            />
-            <p
-              className={classNames(
-                {
-                  [style.completedStop]: i + 1 < activeStop,
-                  [style.activeStop]: activeStop === i + 1,
-                  [style.inactiveStop]: i + 1 > activeStop,
-                },
-                style.text,
-              )}
-            >
-              {item}
-            </p>
-          </div>
-        );
-      })}
-    </div>
-  );
-};
-
-export default Tubestops;