trepur_components 2.3.7 → 2.3.8

package/tsconfig.json

@@ -31,8 +31,14 @@
     ".storybook/storybookDecorators.tsx",
     ".storybook/docs",
     "tailwind.config.ts",
-    "tailwind"
-, "archive/Video", "archive/BreadcrumbsItem", "archive/BreadcrumbsBordered", "archive/Breadcrumbs", "archive/typography", "archive/theme.ts"  ],
+    "tailwind",
+    "src/components/Video",
+    "archive/BreadcrumbsItem",
+    "archive/BreadcrumbsBordered",
+    "archive/Breadcrumbs",
+    "archive/typography",
+    "archive/theme.ts"
+  ],
   "files": ["svg.d.ts"],
   "exclude": ["node_modules", "lib"],
   "references": [

package/archive/Button/style.module.css

@@ -1,76 +0,0 @@
-.classList {
-  @apply transform border-2 text-sm duration-500;
-  @apply inline-block text-center;
-}
-
-.classList:focus {
-  @apply outline;
-}
-
-.loading {
-  @apply absolute left-2/4 top-1/4 -ml-2;
-}
-
-.social {
-  @apply px-1 py-1;
-}
-
-.icon {
-  @apply px-3;
-}
-
-.default {
-  @apply px-8;
-}
-
-.padding {
-  @apply py-3;
-}
-
-.primary {
-  @apply border-secondary bg-primary text-secondary outline-primary;
-}
-
-.primaryNotDisabled:hover {
-  @apply border-primary bg-secondary text-primary;
-}
-
-.primaryNotDisabled:focus:hover {
-  @apply border-primary bg-secondary text-primary;
-}
-
-.secondary {
-  @apply border-primary bg-secondary text-primary outline-secondary;
-}
-
-.secondaryNotDisabled:hover {
-  @apply border-secondary bg-primary text-secondary;
-}
-
-.secondaryNotDisabled:focus:hover {
-  @apply border-primary bg-primary text-secondary;
-}
-
-.tertiary {
-  @apply border-secondary bg-secondary text-secondary outline-tertiary;
-}
-
-.tertiaryNotDisabled:hover {
-  @apply border-tertiary bg-secondary text-tertiary;
-}
-
-.tertiaryNotDisabled:focus:hover {
-  @apply border-secondary bg-secondary text-tertiary;
-}
-
-.disabled {
-  @apply opacity-50;
-}
-
-.rounded {
-  @apply rounded-lg;
-}
-
-.notRounded {
-  @apply rounded-none;
-}

package/archive/Card/style.module.css

@@ -1,75 +0,0 @@
-.classList {
-  @apply flex flex-col;
-  @apply rounded-lg;
-  @apply shadow-xl;
-}
-
-a .classList:hover {
-  @apply cursor-pointer;
-}
-
-.classList:hover .movingContent {
-  @apply -mt-8;
-  @apply transition-all duration-300;
-}
-
-.classList:hover .staticContent {
-  @apply mt-8;
-  @apply transition-all duration-300;
-}
-
-.classList:focus {
-  @apply border-2 border-primary;
-  border-radius: 10px;
-}
-
-.classList:focus .movingContent {
-  @apply -mt-8;
-  @apply transition-all duration-300;
-}
-
-.classList:focus .staticContent {
-  @apply mt-8;
-  @apply transition-all duration-300;
-}
-
-.imageClassList {
-  @apply h-full w-full object-cover;
-  @apply h-64 overflow-hidden object-cover;
-  @apply rounded-t-lg;
-  height: 256px;
-}
-
-.contentWrapper {
-  @apply flex flex-col items-stretch justify-between;
-  height: calc(100% - 256px);
-}
-
-.movingContent {
-  @apply bg-white;
-  @apply mt-0 px-6 pt-6;
-  @apply rounded-b-lg;
-  @apply transition-all duration-300;
-}
-
-.staticContent {
-  @apply h-full p-6;
-  @apply transition-all duration-300;
-  @apply flex flex-col items-stretch justify-between;
-}
-
-.title {
-  @apply text-md font-regular;
-}
-
-.subtitle {
-  @apply text-sm font-regular text-ink;
-}
-
-.description {
-  @apply flex-1 pb-6 text-sm font-light;
-}
-
-.buttonClassList {
-  @apply w-full;
-}

package/archive/CardWithTopImage/style.module.css

@@ -1,11 +0,0 @@
-.cardClasses {
-  max-width: 500px;
-}
-
-.wrapperClassList {
-  @apply mx-auto max-w-max rounded-full bg-white p-4;
-}
-
-.contentClassList {
-  @apply -mt-12 h-auto bg-white px-4 pb-16 pt-12 text-black;
-}

package/archive/Carousel/style.module.css

@@ -1,99 +0,0 @@
-.classList {
-  @apply w-full;
-}
-
-.visibleArrows {
-  @apply flex justify-between;
-}
-
-.slideWrapper {
-  @apply w-full pb-12 pt-4;
-}
-
-.dotWrapper {
-  @apply my-2 flex justify-center;
-}
-
-.dotButtonClassList {
-  @apply border-transparent py-2;
-}
-
-.dotButtonClassList:focus {
-  @apply border border-2;
-}
-
-.dotIconClassList {
-  @apply mx-1;
-}
-
-.dotIconClassList:hover {
-  @apply cursor-pointer;
-}
-
-.arrowWrapper {
-  @apply my-auto;
-}
-
-.arrowIconClassList {
-  @apply mx-auto;
-}
-
-.arrowIconClassList:hover {
-  @apply cursor-pointer;
-}
-
-.primary {
-  @apply border-white;
-}
-
-.white {
-  @apply border-primary;
-}
-
-.grey {
-  @apply border-primary;
-}
-
-.gold {
-  @apply border-primary;
-}
-
-.facebook {
-  @apply border-white;
-}
-
-.linkedin {
-  @apply border-white;
-}
-
-.email {
-  @apply border-white;
-}
-
-.instagram {
-  @apply border-primary;
-}
-
-.github {
-  @apply border-white;
-}
-
-.interactive-facebook {
-  @apply border-primary;
-}
-
-.interactive-email {
-  @apply border-primary;
-}
-
-.interactive-linkedin {
-  @apply border-primary;
-}
-
-.interactive-instagram {
-  @apply border-primary;
-}
-
-.interactive-github {
-  @apply border-primary;
-}

package/archive/CarouselThumbnail/style.module.css

@@ -1,67 +0,0 @@
-.classList {
-  @apply w-full;
-}
-
-.slideWrapper {
-  @apply h-96 w-full rounded-t-2xl pb-4;
-}
-
-.thumbnail {
-  @apply h-24 w-16 rounded-b-2xl;
-}
-
-.primary {
-  @apply border-white;
-}
-
-.white {
-  @apply border-primary;
-}
-
-.grey {
-  @apply border-primary;
-}
-
-.gold {
-  @apply border-primary;
-}
-
-.facebook {
-  @apply border-white;
-}
-
-.linkedin {
-  @apply border-white;
-}
-
-.email {
-  @apply border-white;
-}
-
-.instagram {
-  @apply border-primary;
-}
-
-.github {
-  @apply border-white;
-}
-
-.interactive-facebook {
-  @apply border-primary;
-}
-
-.interactive-email {
-  @apply border-primary;
-}
-
-.interactive-linkedin {
-  @apply border-primary;
-}
-
-.interactive-instagram {
-  @apply border-primary;
-}
-
-.interactive-github {
-  @apply border-primary;
-}

package/archive/Checkbox/style.module.css

@@ -1,15 +0,0 @@
-.label {
-  @apply flex  hover:cursor-pointer;
-}
-
-.span {
-  @apply my-auto px-2;
-}
-
-.checkbox {
-  @apply h-6 w-6 appearance-none rounded border-2 hover:cursor-pointer;
-}
-
-.checked {
-  @apply bg-facebook;
-}

package/archive/Collapsible/style.module.css

@@ -1,47 +0,0 @@
-.classList {
-  @apply w-full border-b border-lightest-grey duration-300 hover:cursor-pointer;
-}
-
-.heading {
-  @apply flex h-24 px-4 sm:pr-8;
-}
-
-.image {
-  @apply my-auto flex-none rounded-2xl;
-}
-
-.textWrapper {
-  @apply mx-4 my-auto grid w-full;
-}
-
-.preText {
-  @apply truncate text-xxs text-light-grey md:text-xs;
-}
-
-.title {
-  @apply truncate text-sm md:text-md;
-}
-
-.subtitle {
-  @apply truncate text-xs md:text-sm;
-}
-
-.contentWrapperClassList {
-  @apply w-auto overflow-hidden px-4;
-}
-
-.expanded {
-  @apply mb-4 mt-2 max-h-max;
-}
-
-.collapsed {
-  @apply max-h-0;
-}
-
-.children {
-  @apply pb-2 pt-4;
-}
-
-.iconWrapper {
-  @apply my-auto flex-none;
-}

package/archive/Column/index.tsx

@@ -1,119 +0,0 @@
-import React from 'react';
-
-import classNames from 'classnames';
-
-
-
-export interface Props {
-  id?: string;
-  className?: string;
-  sm?: number;
-  md?: number;
-  lg?: number;
-  xl?: number;
-  children?: any;
-}
-const Column: React.FC<Props> = ({
-  id,
-  className,
-  sm = 1,
-  md = 1,
-  lg = 1,
-  xl = 1,
-  children,
-}: Props): JSX.Element => {
-  const widthOptions = [
-    { 1: [style.size1] },
-    { 2: [style.size2] },
-    { 3: [style.size3] },
-    { 4: [style.size4] },
-    { 5: [style.size5] },
-    { 6: [style.size6] },
-    { 7: [style.size7] },
-    { 8: [style.size8] },
-    { 9: [style.size9] },
-    { 10: [style.size10] },
-    { 11: [style.size11] },
-    { 12: [style.size12] },
-  ];
-
-  const mdWidthOptions = [
-    { 1: [style.mdSize1] },
-    { 2: [style.mdSize2] },
-    { 3: [style.mdSize3] },
-    { 4: [style.mdSize4] },
-    { 5: [style.mdSize5] },
-    { 6: [style.mdSize6] },
-    { 7: [style.mdSize7] },
-    { 8: [style.mdSize8] },
-    { 9: [style.mdSize9] },
-    { 10: [style.mdSize10] },
-    { 11: [style.mdSize11] },
-    { 12: [style.mdSize12] },
-  ];
-
-  const lgWidthOptions = [
-    { 1: [style.lgSize1] },
-    { 2: [style.lgSize2] },
-    { 3: [style.lgSize3] },
-    { 4: [style.lgSize4] },
-    { 5: [style.lgSize5] },
-    { 6: [style.lgSize6] },
-    { 7: [style.lgSize7] },
-    { 8: [style.lgSize8] },
-    { 9: [style.lgSize9] },
-    { 10: [style.lgSize10] },
-    { 11: [style.lgSize11] },
-    { 12: [style.lgSize12] },
-  ];
-
-  const xlWidthOptions = [
-    { 1: [style.xlSize1] },
-    { 2: [style.xlSize2] },
-    { 3: [style.xlSize3] },
-    { 4: [style.xlSize4] },
-    { 5: [style.xlSize5] },
-    { 6: [style.xlSize6] },
-    { 7: [style.xlSize7] },
-    { 8: [style.xlSize8] },
-    { 9: [style.xlSize9] },
-    { 10: [style.xlSize10] },
-    { 11: [style.xlSize11] },
-    { 12: [style.xlSize12] },
-  ];
-
-  const calculateWidth = (screen: any, size: number): string => {
-    switch (screen) {
-      case 'sm':
-        return Object.values(widthOptions[size - 1]).toString();
-      case 'md':
-        return Object.values(mdWidthOptions[size - 1]).toString();
-      case 'lg':
-        return Object.values(lgWidthOptions[size - 1]).toString();
-      case 'xl':
-        return Object.values(xlWidthOptions[size - 1]).toString();
-      default:
-        return Object.values(widthOptions[size - 1]).toString();
-    }
-  };
-
-  const classList = classNames(
-    {
-      [calculateWidth('sm', sm)]: sm,
-      [calculateWidth('md', md)]: md,
-      [calculateWidth('lg', lg)]: lg,
-      [calculateWidth('xl', xl)]: xl,
-    },
-    className,
-    style.classList,
-    'theme-local',
-  );
-
-  return (
-    <div id={id} className={classList}>
-      {children}
-    </div>
-  );
-};
-
-export default Column;

package/archive/Column/style.module.css

@@ -1,151 +0,0 @@
-.classList {
-  @apply h-full;
-}
-
-.size1 {
-  @apply w-1/12;
-}
-.size2 {
-  @apply w-2/12;
-}
-.size3 {
-  @apply w-3/12;
-}
-.size4 {
-  @apply w-4/12;
-}
-.size5 {
-  @apply w-5/12;
-}
-.size6 {
-  @apply w-6/12;
-}
-.size7 {
-  @apply w-7/12;
-}
-.size8 {
-  @apply w-8/12;
-}
-.size9 {
-  @apply w-9/12;
-}
-.size10 {
-  @apply w-10/12;
-}
-.size11 {
-  @apply w-11/12;
-}
-.size12 {
-  @apply w-full;
-}
-
-.mdSize1 {
-  @apply md:w-1/12;
-}
-.mdSize2 {
-  @apply md:w-2/12;
-}
-.mdSize3 {
-  @apply md:w-3/12;
-}
-.mdSize4 {
-  @apply md:w-4/12;
-}
-.mdSize5 {
-  @apply md:w-5/12;
-}
-.mdSize6 {
-  @apply md:w-6/12;
-}
-.mdSize7 {
-  @apply md:w-7/12;
-}
-.mdSize8 {
-  @apply md:w-8/12;
-}
-.mdSize9 {
-  @apply md:w-9/12;
-}
-.mdSize10 {
-  @apply md:w-10/12;
-}
-.mdSize11 {
-  @apply md:w-11/12;
-}
-.mdSize12 {
-  @apply md:w-full;
-}
-
-.lgSize1 {
-  @apply lg:w-1/12;
-}
-.lgSize2 {
-  @apply lg:w-2/12;
-}
-.lgSize3 {
-  @apply lg:w-3/12;
-}
-.lgSize4 {
-  @apply lg:w-4/12;
-}
-.lgSize5 {
-  @apply lg:w-5/12;
-}
-.lgSize6 {
-  @apply lg:w-6/12;
-}
-.lgSize7 {
-  @apply lg:w-7/12;
-}
-.lgSize8 {
-  @apply lg:w-8/12;
-}
-.lgSize9 {
-  @apply lg:w-9/12;
-}
-.lgSize10 {
-  @apply lg:w-10/12;
-}
-.lgSize11 {
-  @apply lg:w-11/12;
-}
-.lgSize12 {
-  @apply lg:w-full;
-}
-
-.xlSize1 {
-  @apply xl:w-1/12;
-}
-.xlSize2 {
-  @apply xl:w-2/12;
-}
-.xlSize3 {
-  @apply xl:w-3/12;
-}
-.xlSize4 {
-  @apply xl:w-4/12;
-}
-.xlSize5 {
-  @apply xl:w-5/12;
-}
-.xlSize6 {
-  @apply xl:w-6/12;
-}
-.xlSize7 {
-  @apply xl:w-7/12;
-}
-.xlSize8 {
-  @apply xl:w-8/12;
-}
-.xlSize9 {
-  @apply xl:w-9/12;
-}
-.xlSize10 {
-  @apply xl:w-10/12;
-}
-.xlSize11 {
-  @apply xl:w-11/12;
-}
-.xlSize12 {
-  @apply xl:w-full;
-}

package/archive/ComponentWrapper/style.module.css

@@ -1,40 +0,0 @@
-.classList {
-  @apply mx-auto w-full;
-  scroll-margin-top: 80px;
-}
-
-.containerPadding {
-  @apply py-8;
-}
-
-.heading {
-  @apply pt-0;
-}
-
-.title {
-  @apply pb-2 text-lg font-regular;
-}
-
-.description {
-  @apply pb-8 text-md font-light;
-}
-
-.primary {
-  @apply bg-primary text-white;
-}
-
-.secondary {
-  @apply bg-secondary text-white;
-}
-
-.white {
-  @apply bg-white text-black;
-}
-
-.grey {
-  @apply bg-lightest-grey text-black;
-}
-
-.black {
-  @apply bg-black text-white;
-}

package/archive/Container/style.module.css

@@ -1,4 +0,0 @@
-.classList {
-  @apply px-6 md:px-10 lg:px-20;
-  max-width: 2520px;
-}