optimized-react-component-library-xyz123 0.20.1 → 0.20.3

package/src/css/mobileView.css

@@ -44,11 +44,6 @@
     margin: 0;
     padding: 0;
 }
-
-   .pts-footer-slogan-text {
-        font-size: 16px;
-        text-align: center;
-    }
 }
 
 /********************************************/
@@ -93,10 +88,6 @@
     padding: 0;
   }
 
-  .pts-header-content{
-    display:block;
-  }
-
   .pts-header-logo-container {
     padding: 13px 0;
     border-bottom: 2px solid #ddd;
@@ -104,11 +95,6 @@
     text-align: center;
   }
 
-  .pts-header-navigation-container{
-    align-items: center;
-    justify-content: center;
-  }
-
   .pts-languageButton {
     margin: 0.4rem 0;
   }
@@ -210,32 +196,12 @@
     margin-left: 12px;
   }
 
-  /*---------PREVIEW PAGE----------------*/
-
-    .pts-preview-header {
-        display: block;
-        justify-content: unset;
-        align-items: unset;
-        width: 100%;
-    }
-
-    .pts-preview-header h2 {
-        margin-bottom: 0.8rem;
-    }
-
   .pts-editPreviewLink-container {
-    display: block;
-    justify-content: unset;
-    align-items: unset;
-    margin: 0 0 2.6rem 0;
-  }
-
-  .pts-edit-step-text{
-    padding-left: 0;
+    width: 50%;
   }
 
   .pts-editPreviewLink-container a {
-    font-size: 1.6rem;
+    font-size: 1.3rem;
     display: block;
   }
 
@@ -259,11 +225,6 @@
     padding-bottom: 4px;
   }
 
-  .pts-footer-slogan-text{
-    line-height: 2rem;
-  }
-
-
   .pts-footer-logo {
     position: static;
     padding-left: 0;
@@ -336,37 +297,14 @@
   }
 }
 
-
-/********************************************/
-/***************WIDTH: 750 ******************/
-/********************************************/
-@media (max-width: 750px) {
-    body .pts-stepper-step:not(:last-child)::after {
-        left: calc(50% + 3rem);
-        width: calc(33.33vw - 13rem);
-        right: auto;
-    }
-}
-
-/********************************************/
-/***************WIDTH: 550 ******************/
-/********************************************/
-@media (max-width: 550px) {
-    body .pts-stepper-step:not(:last-child)::after {
-        left: calc(50% + 3rem);
-        width: calc(33.33vw - 11rem);
-        right: auto;
-    }
-}
-
 /********************************************/
 /***************WIDTH: 480 ******************/
 /********************************************/
 @media (max-width: 480px) {
   .pts-stepper-step:not(:last-child)::after {
-     left: calc(50% + 3rem);
-        width: calc(33.33vw - 10rem);
-        right: auto;
+    left: calc(50% + 2rem) !important;
+    width: calc(33.33vw - 7.7rem) !important;
+    right: auto !important;
   }
 
   .files-upload {

package/src/css/questions.css

@@ -32,14 +32,6 @@ div.pts-root-question:last-child {
   cursor: pointer;
 }
 
-.pts-root-question-group-fieldset legend {
-  margin-bottom: 0px;
-}
-
-.pts-root-group-fieldset-legend-container {
-  margin-bottom: 1.6rem;
-}
-
 .pts-radio-option,
 .pts-root-question legend {
   margin-bottom: 0.8rem;
@@ -60,6 +52,7 @@ div.pts-root-question:last-child {
   margin-bottom: 0.4rem;
 }
 
+.pts-root-question select,
 .pts-root-question input[type='text']:focus,
 .pts-root-question input[type='email']:focus,
 .pts-root-question input[type='tel']:focus {
@@ -104,7 +97,7 @@ div.pts-root-question:last-child {
   padding: 3.6rem 0 0 0;
   margin: 0;
 }
-
+.pts-root-question select,
 .pts-root-question input[type='text'],
 .pts-root-question input[type='email'],
 .pts-root-question input[type='tel'] {
@@ -150,6 +143,55 @@ div.pts-root-question:last-child {
   cursor: pointer;
 }
 
+/* ---------- DROPDOWN ---------- */
+
+/* För inspiration */
+
+.pts-dropdown-container {
+  margin-bottom: 1.5rem;
+}
+
+.pts-dropdown-container label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+}
+
+.pts-dropdown-container select {
+  /* display: block;
+  width: 100%;
+  padding-right: 2.4em;
+  padding-left: 0.6em;
+
+  box-shadow: none;
+  margin: 0;
+  height: 42px;
+
+  word-wrap: normal;
+
+  text-transform: none;
+
+  cursor: pointer;
+
+  border-radius: 6px;
+
+  font-family: Arial;
+  font-size: 16px; */
+
+  background-image: url('../icons/arrow-down.svg');
+  background-repeat: no-repeat;
+  background-position: right 14px center;
+  background-size: 1em;
+
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+
+  transition:
+    border-color 0.15s ease-in-out,
+    box-shadow 0.15s ease-in-out;
+}
+
 /* ---------- SINGLE CHECKBOX ---------- */
 
 .pts-singleCheckbox-row {
@@ -172,7 +214,6 @@ div.pts-root-question:last-child {
   border-radius: 0.2rem;
 
   cursor: pointer;
-  margin-left: 0px;
 }
 
 .pts-singleCheckbox-container input[type='checkbox']:checked {
@@ -188,14 +229,13 @@ div.pts-root-question:last-child {
   margin-top: 0.2rem;
 }
 
-
 /*-------- CHECKBOX GROUP-------- */
 
-.pts-checkboxGroup-options{
+.pts-checkboxGroup-options {
   display: flex;
 }
 
-.pts-checkboxGroup-container input[type='checkbox']{
+.pts-checkboxGroup-container input[type='checkbox'] {
   appearance: none;
   width: 1.8rem;
   height: 1.8rem;
@@ -205,7 +245,6 @@ div.pts-root-question:last-child {
   border: 0.15rem solid var(--info);
   border-radius: 0.2rem;
   cursor: pointer;
-  margin-left: 0px;
 }
 
 .pts-checkboxGroup-container input[type='checkbox']:checked {
@@ -214,7 +253,7 @@ div.pts-root-question:last-child {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e") !important;
 }
 
-.pts-checkboxGroup-container label{
+.pts-checkboxGroup-container label {
   padding-top: 0.3rem;
   line-height: 20px;
   cursor: pointer;
@@ -223,7 +262,7 @@ div.pts-root-question:last-child {
 
 /* ---------- MULTIPLE CHECKBOXES ---------- */
 
-.pts-multipleCheckboxes-container input[type='checkbox']{
+.pts-multipleCheckboxes-container input[type='checkbox'] {
   appearance: none;
   width: 1.8rem;
   height: 1.8rem;
@@ -241,7 +280,7 @@ div.pts-root-question:last-child {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e") !important;
 }
 
-.pts-multipleCheckboxes-container label{
+.pts-multipleCheckboxes-container label {
   cursor: pointer;
   margin: 0;
   padding-top: 0.1rem;
@@ -260,16 +299,15 @@ div.pts-root-question:last-child {
   cursor: pointer;
 }
 
-.pts-multipleCheckboxes-container li label{
+.pts-multipleCheckboxes-container li label {
   flex: 1;
   margin-top: 0.2rem;
 }
 
-
 /* ---------- TEXTFIELD / TEXTAREA ABOUT ---------- */
 
 .pts-textField-container {
-  margin-bottom: 16px;
+  margin-top: 8px;
 }
 
 .pts-about {
@@ -322,10 +360,6 @@ div.pts-root-question:last-child {
   width: 100%;
 }
 
- .pts-root-question-group-fieldset  .pts-root-error{
-    margin-bottom: 1.6rem;
- } 
-
 /* ---------- FILE UPLOAD ---------- */
 /* ---------- FILE UPLOAD ---------- */
 /* ---------- FILE UPLOAD ---------- */
@@ -1080,24 +1114,3 @@ div.pts-root-question:last-child {
   background: var(--red-green-red, rgb(211, 165, 0));
 }
 /* ---------- END FILE UPLOAD ---------- */
-
-
-
-
-
-
-input:autofill,
-input:autofill:hover,
-input:autofill:focus,
-input:-webkit-autofill,
-input:-webkit-autofill:hover,
-input:-webkit-autofill:focus {
-    -webkit-box-shadow: 0 0 0 1000px var(--main) inset !important;
-    box-shadow: 0 0 0 1000px var(--main) inset !important;
-    -webkit-text-fill-color: inherit !important; /* behåller textfärgen */
-    background-color: var(--main) !important;
-}
-input:-moz-autofill {
-    box-shadow: 0 0 0 1000px transparent inset !important;
-}
-

package/src/css/styles.css

@@ -11,7 +11,6 @@
   --info: #545454;
   --orientation-active: #dc7d0a;
   --background-second: #200827;
-  --background-third: #414141;
 }
 
 body,
@@ -100,7 +99,6 @@ h4 {
   max-width: 860px;
   margin-left: auto;
   margin-right: auto;
-  width: 100%;
 }
 
 section {
@@ -136,12 +134,8 @@ section {
 --- ?? Make changes in html ?? */
 
 p[aria-live='assertive']:empty {
-    margin: 0;
-    padding: 0;
-}
-
-.pts-root-categoryDescription {
-   margin-top: 0px;
+  margin: 0;
+  padding: 0;
 }
 
 .pts-first-category-section {
@@ -168,8 +162,6 @@ p[aria-live='assertive']:empty {
   margin-bottom: 36px;
 }
 
-
-
 .sr-only {
   position: absolute;
   width: 1px;
@@ -181,7 +173,7 @@ p[aria-live='assertive']:empty {
   white-space: nowrap;
   border: 0;
 }
-
+select:focus-visible,
 button:focus-visible,
 a:focus-visible,
 input:focus-visible,
@@ -193,7 +185,7 @@ textarea:focus-visible,
   outline-width: 2px !important;
   box-shadow: 0 0 0 4px #000 !important;
 }
-
+.using-mouse select:focus-visible,
 .using-mouse input:focus-visible,
 .using-mouse button:focus-visible,
 .using-mouse textarea:focus-visible,
@@ -204,7 +196,6 @@ textarea:focus-visible,
   box-shadow: 0 0 0 0px #000 !important;
 }
 
-
 /* ---------- COOKIE BANNER ---------- */
 
 .pts-cookieBanner {
@@ -293,27 +284,6 @@ textarea:focus-visible,
   background-color: var(--main);
 }
 
-.pts-header-content{
-    width: 100%;
-    display: flex;
-}
-
-.pts-header-logo-container{
-    height:4rem;
-}
-
-.pts-header-logo svg{
-    height: 4rem;
-}
-
-.pts-header-navigation-container{
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-end;
-    width: 100%;
-    align-items: flex-end;
-}
-
 .pts-languageButton {
   position: relative;
   display: inline-flex;
@@ -322,45 +292,40 @@ textarea:focus-visible,
   border: transparent;
   color: var(--action);
   cursor: pointer;
-  font-size: 1.6rem;
 }
 
 .pts-languageButton::after {
-    content: "";
-    position: absolute;
-    left: 7px;
-    right: 4px;
-    bottom: 3px;
-    height: 0.15rem;
-    background-color: currentColor;
-    opacity: 0;
+  content: '';
+  position: absolute;
+  left: 0.7rem;
+  right: -0.3rem;
+  bottom: 0;
+  height: 0.2rem;
+  background-color: currentColor;
+  opacity: 0;
 }
 
 .pts-languageButton:hover::after {
-    opacity: 1;
+  opacity: 1;
 }
 
-.languageIcon{
-  position: relative;
+.languageIcon {
   margin-top: 0.3rem;
   padding-right: 0.6rem;
-  top: 0.01rem;
 }
 
 .pts-languageButton svg {
-  width: 1.6rem;
-  height: 1.6rem;
+  width: 1.5rem;
+  height: 1.5rem;
 }
 
+.languageIcon {
+  padding-left: 0.6rem;
+}
 
 /* ---------- TextBODY ---------- */
 
-.pts-textBody-container p{
-    margin-bottom: 1.6rem;
-
-}
-
-.MoreInfoIcon{
+.MoreInfoIcon {
   margin-top: 2px;
 }
 
@@ -401,7 +366,7 @@ textarea:focus-visible,
 }
 
 .pts-textHeadlineAndBody-container .first-paragraph {
-    margin-top: 0;
+  margin-top: 0;
 }
 
 /* ---------- STEPPER ---------- */
@@ -517,6 +482,12 @@ textarea:focus-visible,
   gap: 0.2rem;
 }
 
+.pts-editPreviewLink-container svg {
+  height: 1.6rem;
+  width: 1.6rem;
+  flex-shrink: 0;
+}
+
 .pts-question-preview,
 .addFilesPreviewContainer {
   display: flex;
@@ -553,7 +524,11 @@ textarea:focus-visible,
   margin-bottom: 36px;
 }
 
-.pts-edit-step-text{
+.pts-edit-step-button {
+  text-decoration: none;
+}
+
+.pts-edit-step-text {
   padding-left: 5px;
 }
 
@@ -666,41 +641,20 @@ textarea:focus-visible,
   transition: 0.2s;
 }
 
-
-
-
 /* ---------- FOOTER ---------- */
 
 .pts-footer-container {
+  display: flex;
+  min-height: 14rem;
   align-items: center;
   width: 100%;
   background-color: var(--background-second);
 }
 
-.pts-footer-slogan-text-container{
+.pts-footer-content {
   display: flex;
   align-items: center;
-  justify-content: center;
-  background-color: var(--background-third);
-      height: 50px;
-      padding: 0px;
-}
-
-.pts-footer-slogan-text{
-  color: var(--main);
-  line-height: 2.4rem;
-  font-size: 2rem;
-  text-box-trim: trim-both;
-  margin: 0;
-  
-}
-
- .pts-footer-content{
-    display: flex;
-    align-items: center;
-    width: 100%;
-    min-height: 14rem;
-    padding: 0.1rem 0;
+  width: 100%;
 }
 
 .pts-footer-logo {
@@ -715,7 +669,7 @@ textarea:focus-visible,
   flex: 1;
   justify-content: center;
   margin-left: -224px;
-} 
+}
 
 .pts-footer-linkList ul {
   padding: 0;
@@ -749,7 +703,6 @@ textarea:focus-visible,
   box-sizing: border-box;
 }
 
-
 /* ---------- MODAL ---------- */
 
 .pts-modal-overlay {
@@ -802,7 +755,6 @@ textarea:focus-visible,
     transform: rotate(360deg);
   }
 }
-/*-----------ALWAYS IN THE END OF STYLES----------------*/
 
 .cleanPadding {
   padding: 0;
@@ -812,16 +764,3 @@ textarea:focus-visible,
   margin: 0;
   padding: 0;
 }
-
-.visually-hidden {
-    position: absolute !important;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    clip-path: inset(50%);
-    white-space: nowrap;
-    border: 0;
-}

package/src/icons/arrow-down-darkmode.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group">
+<path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M12.7069 15.7071C12.5193 15.8946 12.265 15.9999 11.9999 15.9999C11.7347 15.9999 11.4804 15.8946 11.2929 15.7071L5.63585 10.0501C5.54034 9.95785 5.46416 9.84751 5.41175 9.7255C5.35934 9.6035 5.33176 9.47228 5.3306 9.3395C5.32945 9.20672 5.35475 9.07504 5.40503 8.95215C5.45531 8.82925 5.52957 8.7176 5.62346 8.6237C5.71735 8.52981 5.829 8.45556 5.9519 8.40528C6.0748 8.355 6.20648 8.32969 6.33926 8.33085C6.47204 8.332 6.60325 8.35959 6.72526 8.412C6.84726 8.46441 6.95761 8.54059 7.04985 8.6361L11.9999 13.5861L16.9499 8.6361C17.1385 8.45394 17.3911 8.35315 17.6533 8.35542C17.9155 8.3577 18.1663 8.46287 18.3517 8.64828C18.5371 8.83369 18.6423 9.0845 18.6445 9.3467C18.6468 9.60889 18.546 9.8615 18.3639 10.0501L12.7069 15.7071Z" fill="white"/>
+</g>
+</svg>

package/src/icons/arrow-down.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group">
+<path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M12.7069 15.7071C12.5193 15.8946 12.265 15.9999 11.9999 15.9999C11.7347 15.9999 11.4804 15.8946 11.2929 15.7071L5.63585 10.0501C5.54034 9.95785 5.46416 9.84751 5.41175 9.7255C5.35934 9.6035 5.33176 9.47228 5.3306 9.3395C5.32945 9.20672 5.35475 9.07504 5.40503 8.95215C5.45531 8.82925 5.52957 8.7176 5.62346 8.6237C5.71735 8.52981 5.829 8.45556 5.9519 8.40528C6.0748 8.355 6.20648 8.32969 6.33926 8.33085C6.47204 8.332 6.60325 8.35959 6.72526 8.412C6.84726 8.46441 6.95761 8.54059 7.04985 8.6361L11.9999 13.5861L16.9499 8.6361C17.1385 8.45394 17.3911 8.35315 17.6533 8.35542C17.9155 8.3577 18.1663 8.46287 18.3517 8.64828C18.5371 8.83369 18.6423 9.0845 18.6445 9.3467C18.6468 9.60889 18.546 9.8615 18.3639 10.0501L12.7069 15.7071Z" fill="black"/>
+</g>
+</svg>