re-organized sass architecture: created abstracts folder, set up them…

…es folder in case we want to support multiple themes for stretch goal, split components into different files for improved modularity

feedback-module/src/components/Module.js

@@ -157,15 +157,15 @@ function Module({ pagetitle, endpoint, dir }) {
         {screen.titleInverse && (
           <Grid className={"bg-primary feedback-screen-container"}>
             <p
-              className="font-sans-md2 feedback-h1 feedback-h1--light"
+              className="font-sans-md2 feedback-h1 feedback-h1--inverse"
               dangerouslySetInnerHTML={{ __html: t(screen.titleInverse) }}
             ></p>
           </Grid>
         )}
         {
           <LightContainer formID={screen.formID}>
             {screen.title && (
-              <p className="font-sans-md2 feedback-h1 feedback-h1--dark">
+              <p className="font-sans-md2 feedback-h1 feedback-h1--default">
                 {`${t(screen.title, { page: pagetitle })}${
                   screen.checkboxes && screen.checkboxes.required ? "*" : ""
                 }`}

feedback-module/src/styles/_components.scss → feedback-module/src/styles/_base.scss

@@ -1,13 +1,3 @@
-@use "sass:list";
-
-// Sets styling for mobile-lg viewport size
-@mixin mobile-lg($properties...) {
-  @each $property in $properties {
-    @extend .mobile-lg\:#{$property} !optional; // Sets styling locally
-    @extend .mobile-lg-#{$property} !optional; // Sets styling in build
-  }
-}
-
 // Common Styles
 .usa-checkbox,
 .usa-label,
@@ -21,20 +11,17 @@
   @extend .text-primary;
 }
 
-.usa-label,
-.usa-checkbox,
-.usa-checkbox__label,
-.feedback-h1 {
-  @extend .text-bold;
-}
-
 .feedback-module-container,
 .usa-button:hover,
 .usa-textarea,
 .usa-input {
   @extend .bg-primary-light;
 }
 
+.feedback-header {
+  @extend .bg-primary;
+}
+
 .feedback-plaintext,
 .usa-checkbox,
 .usa-input,
@@ -62,59 +49,23 @@
   @extend .display-flex;
 }
 
-// Buttons
-.usa-button {
-  @extend .flex-align-self-start,
-    .width-auto,
-    .text-left,
-    .border-transparent,
-    .padding-105,
-    .border-2px,
-    .shadow-btn,
-    .margin-y-1;
-  @include mobile-lg(
-    "padding-x-205",
-    "padding-y-105",
-    "font-sans-md2",
-    "margin-y-105"
-  );
-  &:hover {
-    @extend .border-primary, .border-bottom-2px;
-  }
-}
-
-// Checkbox
-.usa-checkbox {
-  @extend .bg-transparent, .margin-y-1, .text-no-uppercase;
-  @include mobile-lg("margin-y-105");
+.grid-container[dir="rtl"] {
+  @extend .text-right;
 }
 
-.usa-label {
-  @extend .font-sans-md2,
-    .line-height-sans-2,
-    .maxw-none,
-    .margin-y-205,
-    .text-no-uppercase;
-}
-
-.usa-textarea,
-.usa-input {
-  @extend .border-05, .border-primary;
-  &:focus {
-    @extend .border-width-6px, .bg-primary-lighter;
-  }
-}
-
-.usa-input {
-  @extend .height-auto, .flex-1;
+.usa-label,
+.usa-checkbox,
+.usa-checkbox__label,
+.feedback-h1 {
+  @extend .text-bold;
 }
 
 .usa-form {
   @extend .maxw-none, .width-full, .flex-column, .flex-align-stretch;
 }
 
 .feedback-header {
-  @extend .radius-top-lg, .bg-primary, .padding-1;
+  @extend .radius-top-lg, .padding-1;
   @include mobile-lg("padding-x-2", "padding-y-105");
 }
 
@@ -134,11 +85,10 @@
     .margin-bottom-3,
     .text-no-uppercase,
     .line-height-sans-2;
-
-  &--light {
+  &--inverse {
     @extend .text-white;
   }
-  &--dark {
+  &--default {
     @extend .text-primary;
   }
 }
@@ -151,3 +101,9 @@
     @extend .margin-0;
   }
 }
+
+.grid-container[dir="rtl"] {
+  .feedback-h1 {
+    @extend .text-right;
+  }
+}

feedback-module/src/styles/abstracts/_mixins.scss

@@ -0,0 +1,9 @@
+@use "sass:list";
+
+// Sets styling for mobile-lg viewport size
+@mixin mobile-lg($properties...) {
+  @each $property in $properties {
+    @extend .mobile-lg\:#{$property} !optional; // Sets styling locally
+    @extend .mobile-lg-#{$property} !optional; // Sets styling in build
+  }
+}

feedback-module/src/styles/_theme.scss → feedback-module/src/styles/abstracts/_settings.scss

@@ -44,26 +44,3 @@ $height-settings: map-merge(
     responsive: true,
   )
 );
-
-// Colors
-$theme-color-primary: $feedback__dark;
-$theme-color-primary-light: $feedback__light;
-$theme-color-base: $feedback__dark;
-$theme-color-primary-lighter: $feedback__lightest;
-
-// Typography
-$theme-font-type-sans: "public-sans";
-$theme-process-list-heading-color: "primary";
-
-// Buttons
-$theme-button-border-radius: "md";
-
-//Checkbox
-$theme-checkbox-border-radius: 0;
-
-// Alert:
-$theme-alert-bar-width: 1;
-$theme-alert-padding-x: 2;
-$theme-color-error-lighter: $error-alert-bg-color;
-$theme-color-error: $error-alert-bar-color;
-$theme-color-base-ink: $alert-text-color; //alert text color

feedback-module/src/styles/abstracts/_variables.scss

@@ -0,0 +1,12 @@
+// Colors
+$feedback__dark: #162e51;
+$feedback__light: #e1f3f8;
+$feedback__white: #ffffff;
+$feedback__lightest: #f3fcff;
+$base__dark: #042d36;
+$error__lighter: #ffe8e6;
+$error: #d24425;
+
+$error-alert-bg-color: $error__lighter;
+$error-alert-bar-color: $error;
+$alert-text-color: $base__dark;

feedback-module/src/styles/components/_button.scss

@@ -0,0 +1,25 @@
+.usa-button {
+  @extend .flex-align-self-start,
+    .width-auto,
+    .text-left,
+    .border-transparent,
+    .padding-105,
+    .border-2px,
+    .shadow-btn,
+    .margin-y-1;
+  @include mobile-lg(
+    "padding-x-205",
+    "padding-y-105",
+    "font-sans-md2",
+    "margin-y-105"
+  );
+  &:hover {
+    @extend .border-primary, .border-bottom-2px;
+  }
+}
+
+.grid-container[dir="rtl"] {
+  .usa-button {
+    @extend .text-right;
+  }
+}

feedback-module/src/styles/components/_checkbox.scss

@@ -0,0 +1,31 @@
+// Checkbox
+.usa-checkbox {
+  @extend .bg-transparent, .margin-y-1, .text-no-uppercase;
+  @include mobile-lg("margin-y-105");
+  @media screen and (max-width: 479px) {
+    &__label {
+      padding-left: 0rem;
+      text-indent: 0rem;
+      display: grid;
+      grid-auto-flow: column;
+      &::before {
+        height: 2rem;
+        width: 2rem;
+        margin-right: 1.375rem;
+      }
+    }
+  }
+}
+
+.grid-container[dir="rtl"] {
+  .usa-checkbox__label {
+    @extend .text-indent-0;
+    &::before {
+      @extend .margin-left-105, .margin-right-0, .right-2px, .left-0;
+
+      @media screen and (max-width: 479px) {
+        margin-left: 1.375rem;
+      }
+    }
+  }
+}

feedback-module/src/styles/components/_required.scss

@@ -0,0 +1,3 @@
+@import "button";
+@import "checkbox";
+@import "textbox";

feedback-module/src/styles/components/_textbox.scss

@@ -0,0 +1,19 @@
+.usa-label {
+  @extend .font-sans-md2,
+    .line-height-sans-2,
+    .maxw-none,
+    .margin-y-205,
+    .text-no-uppercase;
+}
+
+.usa-textarea,
+.usa-input {
+  @extend .border-05, .border-primary;
+  &:focus {
+    @extend .border-width-6px, .bg-primary-lighter;
+  }
+}
+
+.usa-input {
+  @extend .height-auto, .flex-1;
+}

feedback-module/src/styles/index.scss

@@ -5,11 +5,13 @@
 @import "~uswds/src/stylesheets/theme/_uswds-theme-utilities.scss";
 @import "~uswds/src/stylesheets/packages/_required.scss";
 
-@import "variables";
-@import "theme";
+@import "abstracts/variables";
+@import "abstracts/settings";
+@import "abstracts/mixins";
+@import "themes/default";
 
 #feedback-widget {
   @import "uswds";
-  @import "reset";
-  @import "components";
+  @import "base";
+  @import "components/required";
 }

feedback-module/src/styles/themes/_default.scss

@@ -0,0 +1,22 @@
+// Colors
+$theme-color-primary: $feedback__dark;
+$theme-color-primary-light: $feedback__light;
+$theme-color-base: $feedback__dark;
+$theme-color-primary-lighter: $feedback__lightest;
+
+// Typography
+$theme-font-type-sans: "public-sans";
+$theme-process-list-heading-color: "primary";
+
+// Buttons
+$theme-button-border-radius: "md";
+
+//Checkbox
+$theme-checkbox-border-radius: 0;
+
+// Alert:
+$theme-alert-bar-width: 1;
+$theme-alert-padding-x: 2;
+$theme-color-error-lighter: $error-alert-bg-color;
+$theme-color-error: $error-alert-bar-color;
+$theme-color-base-ink: $alert-text-color; //alert text color