optimized-react-component-library-xyz123 2.2.2 → 2.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "optimized-react-component-library-xyz123",
-  "version": "2.2.2",
+  "version": "2.2.4",
   "description": "A modern React component library using TypeScript with React 19 support.",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",
@@ -13,16 +13,14 @@
     "./css/darkMode.css": "./src/css/darkMode.css",
     "./css/mobileView.css": "./src/css/mobileView.css",
     "./css/styles.css": "./src/css/styles.css",
-    "./css/questions.css": "./src/css/questions.css",
-    "./css/e-tjanst-root.css": "./src/css/e-tjanst-root.css"
+    "./css/questions.css": "./src/css/questions.css"
   },
   "files": [
     "dist",
     "src/css/darkMode.css",
     "src/css/mobileView.css",
     "src/css/styles.css",
-    "src/css/questions.css",
-    "src/css/e-tjanst-root.css"
+    "src/css/questions.css"
   ],
   "scripts": {
     "build": "tsup",
@@ -85,6 +83,7 @@
     "date-fns": "^4.1.0",
     "dompurify": "^3.2.6",
     "react-bootstrap": "^2.10.10",
-    "react-dropzone": "^14.3.8"
+    "react-dropzone": "^14.3.8",
+    "react-router-dom": "^7.13.0"
   }
 }

package/src/css/darkMode.css

@@ -67,6 +67,95 @@
     color: var(--dark-text);
   }
 
+
+  /*--Navigation header / menu ----*/
+
+  .pts-navigation-header-container {
+    background: var(--dark-background-second);
+  }
+
+  .pts-navigation-header-logo-container,
+  .pts-navigation-header-headline-container  {
+    border-color: var(--dark-background-third)!important;
+  }
+ .pts-navigation-header-nav-container button svg path,
+ .pts-navigation-header-nav-container button svg line{
+    color: var(--dark-text);
+    fill: var(--dark-text);
+    stroke: var(--dark-text);
+  }
+
+.pts-navigation-header-container svg path {
+  fill: var(--dark-text);
+}
+
+  
+.pts-navigation-header-nav-container,
+.pts-navigation-header-button-label {
+  background: var(--dark-background-second);
+  color: var(--dark-text);
+}
+
+.pts-expand-icon svg rect{
+  fill: var(--dark-action);
+}
+
+
+.pts-contract-icon svg rect{
+  fill: var(--dark-orientation-active);
+}
+
+
+.pts-navigation-close-text{
+  color: var(--dark-text);
+}
+
+.pts-navigation-close-button{
+  background: var(--dark-main);
+  color: var(--dark-text);
+}
+
+.pts-navigation-close-button svg path{
+  stroke: var(--dark-text);
+}
+
+.pts-navigation-link-expand-button{
+background-color: var(--dark-main);
+}
+
+.pts-navigation-link-expand-button svg path{
+  stroke: var(--dark-main)!important;
+}
+
+.pts-navigation-with-close-button,
+.pts-navigation-menu-container,
+.pts-navigation-button,
+.pts-navigation-close-container,
+.pts-sub-navigation-item,
+.pts-sub-navigation-item a,
+.pts-navigation-button > a {
+  background: var(--dark-main);
+  color: var(--dark-text);
+  border-color: var(--dark-background-third);
+}
+
+.pts-navigation-button  a {
+
+  color: var(--dark-text);
+
+}
+
+.pts-sub-navigation-container {
+    background-color: #d5b9dd;
+    border-left: var(--dark-action) 5px solid;
+}
+
+/*--------BREADCRUMBS------*/
+.pts-breadcrumbs {
+ background-color: var(--dark-background-third);
+}
+
+
   /*-------MAIN CONTENT-------*/
   section,
   .pts-form-step-header {
@@ -87,6 +176,7 @@
   .MoreInfoIcon svg {
     background-color: var(--dark-action);
   }
+ 
 
   .pts-serviceHeadlineAndBody-container a svg path,
   .MoreInfoIcon svg path {
@@ -161,8 +251,6 @@
     color: var(--dark-error);
   }
 
-  .pts-root-question-input-error-border,
-  .pts-root-question-input-error-border,
   .pts-root-question-input-error-border {
     border: 0.15rem solid var(--dark-error) !important;
   }
@@ -405,4 +493,34 @@
   input:-moz-autofill {
     box-shadow: 0 0 0 1000px transparent inset !important;
   }
+
+  /***NYTT FLYTTA??  ***/
+ .pts-standard-link-icon svg {
+    background-color: var(--dark-action);
+  }
+   .pts-standard-link svg path{
+    fill: var(--dark-main);
+    color: #000000;
+  }
+  .pts-icon-circle {
+    border: 2px solid var(--dark-action);
+    background-color: var(--dark-action);
+  }
+
+   .pts-collapse-content{
+    color:var(--dark-text);
+  }
+
+  .pts-collapse-button {
+    background-color: var(--dark-action);
+    color:var(--dark-main);
+  }
+  .pts-open-close-icon svg path{
+    fill: var(--dark-main);
+  }
+
+ .pts-collapse-body.open{
+  border-color: var(--dark-action);
+  background: var(--dark-main);
+ }
 }

package/src/css/mobileView.css

@@ -3,6 +3,101 @@
 /********************************************/
 
 @media (max-width: 1085px) {
+
+  .pts-navigation-header-container {
+    padding:unset;
+    border-bottom: 2px solid #ddd;
+  }
+   .pts-navigation-header-content {
+    display: block;
+  }
+
+  .pts-navigation-header-logo-container {
+    padding: 1.6rem 0px;
+    width: 100%;
+    text-align: center;
+    border-bottom: 2px solid #ddd;
+  }
+
+  .pts-navigation-header-headline-container{
+    border-bottom: 2px solid #ddd;
+    height: 48px; 
+    align-items: center;
+  }
+
+  .pts-site-headline,
+   .pts-navigation-header-headline-container p{
+    font-size: 1.6rem;
+    top:auto;
+  }
+
+  .pts-navigation-header-nav-container {
+    align-items: center;
+    justify-content: center;
+    height: 48px;
+  }
+
+  .pts-navigation-header-nav-container button {
+    width: 100%;
+  }
+
+  
+  .pts-navigation-close-button {
+    align-items: center;
+    justify-content: center;
+    margin-top: 1rem; 
+    margin-bottom: 1rem; 
+  }
+
+ /**Navigation menu**/
+
+  .pts-navigation-menu-container {
+  position: relative;
+  top: -50px;
+
+  width: 100%;
+  max-width: unset;
+  height: 100%;
+
+  opacity: 0;
+  transform: translateY(-100%);
+
+  transition:
+    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
+    opacity 0.25s ease;
+
+  will-change: transform, opacity;
+}
+
+.pts-navigation-menu-container.open {
+  transform: translateY(0);
+  opacity: 1;
+}
+
+  .pts-navigation-close-container {
+    position: relative;
+    padding: 1px 1px;
+    height: 48px;
+    justify-content: center;
+  }
+  
+
+  .nav-parent-button {
+    padding-right: 5px !important;
+    border: 0px !important;
+  }
+
+    /**Breadcrumbs**/
+  .pts-breadcrumbs a,
+  .pts-crumb-label {
+    font-size: 14px;
+  }
+
+  .pts-breadcrumbs {
+    padding-left: 20px;
+    height: 30px !important;
+  }
+
   .pts-footer-content {
     display: flex;
     height: auto;
@@ -120,6 +215,7 @@
     margin: 0.4rem 0;
   }
 
+  section,
   .pts-form-step-header {
     margin-left: 0;
     margin-right: 0;

package/src/css/questions.css

@@ -1,3 +1,8 @@
+fieldset {
+  border: none;
+  padding: 0;
+  margin: 0;
+}
 
 .pts-root-question {
   display: flex;