optimized-react-component-library-xyz123 2.3.2 → 2.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "optimized-react-component-library-xyz123",
-  "version": "2.3.2",
+  "version": "2.5.1",
   "description": "A modern React component library using TypeScript with React 19 support.",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",
@@ -85,6 +85,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,90 @@
     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 {
+    border-left: var(--dark-action) 5px solid;
+}
+
+
+
   /*-------MAIN CONTENT-------*/
   section,
   .pts-form-step-header {
@@ -87,6 +171,7 @@
   .MoreInfoIcon svg {
     background-color: var(--dark-action);
   }
+ 
 
   .pts-serviceHeadlineAndBody-container a svg path,
   .MoreInfoIcon svg path {
@@ -161,8 +246,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;
   }
@@ -340,6 +423,38 @@
     stroke: #000000;
   }
 
+    /*---------- LINK STANDARD ------------*/
+ .pts-standard-link-icon svg {
+    background-color: var(--dark-action);
+  }
+   .pts-standard-link svg path{
+    fill: var(--dark-main);
+    color: #000000;
+  }
+  .pts-link-icon-circle {
+    border: 2px solid var(--dark-action);
+    background-color: var(--dark-action);
+  }
+
+  /*----------------- COLLAPSE -----------------*/
+   .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-info);
+    background: var(--dark-main);
+  }
+
   /* ---------- EDIT PREVIEW LINK ---------- */
 
   .pts-editPreviewLink-container button {
@@ -405,4 +520,6 @@
   input:-moz-autofill {
     box-shadow: 0 0 0 1000px transparent inset !important;
   }
+
+
 }

package/src/css/e-tjanst-root.css

@@ -105,13 +105,11 @@ fieldset {
   margin: 0;
 }
 
-
 @media (max-width: 750px) {
-    section {
-        margin-left: 0;
-        margin-right: 0;
-        border-radius: 0;
-        padding: 1.6rem;
-    }
+  section {
+    margin-left: 0;
+    margin-right: 0;
+    border-radius: 0;
+    padding: 1.6rem;
+  }
 }
-

package/src/css/mobileView.css

@@ -3,6 +3,90 @@
 /********************************************/
 
 @media (max-width: 1085px) {
+  /*-------HEADER WITH NAVIGATION--------*/
+  .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 {
+    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 {
+    position: relative;
+    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;
+  }
+
+  /*------FOOTER------**/
+
   .pts-footer-content {
     display: flex;
     height: auto;

package/src/css/questions.css

@@ -1,4 +1,3 @@
-
 .pts-root-question {
   display: flex;
   flex-direction: column;

package/src/css/styles.css

@@ -14,6 +14,7 @@
   --orientation-active: #dc7d0a;
   --background-second: #200827;
   --background-third: #414141;
+  --light-action: #d5b9dd;
 }
 
 #main-content {
@@ -247,6 +248,225 @@ input:focus-visible:-webkit-autofill {
   text-decoration: underline 0.2rem;
 }
 
+/**Header with navigation**/
+
+.pts-navigation-header-container {
+  display: flex;
+  min-height: 80px;
+  padding: 0px 70px;
+  align-items: center;
+  justify-content: space-between;
+  background-color: var(--main);
+}
+
+.pts-navigation-header-content {
+  width: 100%;
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+}
+
+.pts-navigation-header-logo svg {
+  height: 4.7rem;
+  width: auto;
+}
+
+.pts-navigation-header-headline-container {
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+}
+
+.pts-navigation-header-headline-container p {
+  position: relative;
+  font-family: 'Aeonik';
+  font-size: 24px;
+  font-weight: 700;
+  top: 8px;
+}
+
+.pts-navigation-header-icons {
+  position: relative;
+  top: 2px;
+}
+
+.pts-navigation-header-nav-container .pts-close-icon {
+  position: relative;
+  bottom: -1px;
+}
+
+.pts-navigation-header-nav-container .pts-open-icon {
+  position: relative;
+  top: 4px;
+}
+
+.pts-navigation-overlay {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 998;
+}
+
+.pts-navigation-header-nav-container {
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+  align-items: flex-end;
+  height: 5rem;
+}
+
+.pts-navigation-header-nav-container button {
+  background: none;
+  line-height: 2.4rem;
+  text-decoration-skip-ink: none;
+  border: none;
+  color: var(--action);
+  font-size: 1.6rem;
+  padding: 0;
+  cursor: pointer;
+  width: 13rem;
+  z-index: 900;
+}
+
+.pts-navigation-header-button-label {
+  position: relative;
+  padding-left: 0.8rem;
+}
+
+/******NAVIGATION MENU********/
+.pts-navigation-menu-container {
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: 100%;
+  max-width: 570px;
+  z-index: 999;
+  opacity: 0;
+  transform: translateX(100%);
+  transition:
+    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
+    opacity 1s;
+}
+
+.pts-navigation-menu-container.open {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.pts-navigation-close-text {
+  padding-left: 0.8rem;
+  font-size: 16px;
+}
+
+.pts-navigation-link-list,
+.pts-navigation-link,
+.pts-sub-navigation-list {
+  all: unset;
+  list-style: none;
+  background-color: var(--main);
+}
+
+.pts-navigation-link-list {
+  width: 100%;
+  padding-inline-start: 0px;
+}
+
+.pts-navigation-button a,
+.pts-sub-navigation-item a {
+  text-decoration: none;
+  color: var(--text);
+}
+
+.pts-navigation-link-expand-button {
+  border: none;
+  padding: 0;
+  cursor: pointer;
+}
+
+.pts-sub-navigation-container {
+  background-color: var(--light-action);
+  border-left: var(--action) 5px solid;
+  padding-left: 3.6rem;
+  display: flex;
+  align-items: flex-end;
+  gap: 18px;
+}
+
+.pts-sub-navigation-list {
+  display: block;
+  width: 100%;
+}
+
+.pts-sub-navigation-item {
+  height: 5.1rem;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  border-bottom: 2px solid var(--background);
+  padding-left: 3rem;
+}
+
+.pts-navigation-button,
+.pts-navigation-close-container {
+  padding: 2.1rem 3.6rem;
+  border-width: 0px;
+  border-bottom: 2px solid var(--background);
+  background-color: var(--main);
+  text-align: left;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.pts-navigation-close-button {
+  border: none;
+  color: var(--action);
+  background-color: var(--main);
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  margin-top: 1.5rem;
+  margin-bottom: 1.5rem;
+  cursor: pointer;
+}
+
+/******SEARCH BAR*******/
+.pts-searchBar-container {
+  height: 7rem;
+  background-color: var(--background);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.pts-searchBar-button {
+  height: 3.9rem;
+  background-color: var(--action);
+  border-radius: 8px;
+  border: var(--action) solid 1px;
+  color: var(--main);
+}
+
+.pts-searchBar-Button svg {
+  margin-right: 0.5rem;
+}
+
+.pts-searchBar-container input {
+  border-radius: 8px;
+  width: 65vw;
+  border: var(--action) solid 1px;
+  margin-right: -10px;
+  padding: 1rem;
+  border-top-right-radius: 0px;
+  border-bottom-right-radius: 0px;
+}
+
 /* ---------- TextBODY ---------- */
 .pts-textBody-container {
   margin: 0;
@@ -256,10 +476,23 @@ input:focus-visible:-webkit-autofill {
   margin-top: 0;
 }
 
-.MoreInfoIcon {
+.pts-standard-link a {
+  align-items: start;
+}
+
+.MoreInfoIcon,
+.pts-standard-link-text {
   margin-top: 2px;
 }
 
+.pts-standard-link-icon {
+  margin-top: 2px;
+}
+.pts-icon-circle svg {
+  width: 1.6rem;
+  height: 1.6rem;
+}
+
 .MoreInfoIcon svg {
   width: 1.6rem;
   height: 1.6rem;
@@ -270,7 +503,8 @@ input:focus-visible:-webkit-autofill {
   margin-right: 1.6rem;
 }
 
-.MoreInfoIcon svg path {
+.MoreInfoIcon svg path,
+.MoreInfoIcon {
   fill: var(--main);
 }
 
@@ -403,6 +637,100 @@ input:focus-visible:-webkit-autofill {
   color: var(--error);
 }
 
+/*-----COLLAPSE-----*/
+.pts-collapse {
+  position: relative;
+}
+
+.pts-collapse-button {
+  background-color: var(--action);
+  color: var(--main);
+  cursor: pointer;
+  padding: 1.2rem 1.6rem;
+  width: 100%;
+  border: none;
+  border-radius: 8px;
+  outline: none;
+  display: grid;
+  text-align: left;
+  grid-template-columns: 95% 5%;
+  align-items: center;
+  font-size: 1.6rem;
+}
+
+.pts-collapse-button.open {
+  border-radius: 8px 8px 0 0;
+}
+
+.pts-collapse-button .pts-open-close-icon svg {
+  width: 2.4rem;
+  height: 2.4rem;
+}
+
+.pts-collapse-body {
+  position: relative;
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 0.3s ease;
+  overflow: hidden;
+}
+
+.pts-collapse-body.open {
+  grid-template-rows: 1fr;
+  border: 2px solid var(--background);
+  border-top: none;
+  border-radius: 0 0 8px 8px;
+}
+
+.pts-collapse-content {
+  overflow: hidden;
+}
+
+.pts-collapse-inner {
+  overflow: hidden;
+  padding: 1.6rem;
+  padding-top: 3.6rem;
+}
+
+/*-----LINK STANDARD ------**/
+
+.pts-link-icon-circle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 2rem;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 50%;
+  border: 2px solid var(--action);
+  background-color: var(--action);
+  margin-right: 1.6rem;
+}
+
+.pts-link-icon-circle.pts-fileIcon svg {
+  margin-left: 2px;
+}
+
+.pts-link-icon-circle.pts-reportIcon svg {
+  height: 1.4rem;
+  width: 1.4rem;
+}
+
+.pts-linkList-container {
+  margin: 0;
+  padding: 0;
+}
+
+.pts-linkList-container ul {
+  all: unset;
+  margin: 0;
+  padding: 0;
+}
+.pts-linkList-container li {
+  padding: 6px;
+  list-style: none;
+}
+
 /* ---------- GRANSKA-Sidan ---------- */
 .pts-editPreviewLink-container {
   display: flex;
@@ -757,3 +1085,21 @@ input:focus-visible:-webkit-autofill {
   white-space: nowrap;
   border: 0;
 }
+
+.hide-asterix .pts-root-mandatoryAsterisk {
+  display: none;
+}
+
+[hidden] {
+  display: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pts-collapse-body {
+    transition: none !important;
+  }
+
+  .pts-navigation-menu-container {
+    transition: none !important;
+  }
+}