Merge pull request #48 from phess101/feature/restructure-sass

wintondeshong · web-flow · commit 85bf0799588c · 2021-01-27T12:20:51.000-05:00
Move scss files beside components
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -95,7 +95,8 @@
         "collectCoverageFrom": [
             "src/**/*.ts*",
             "!src/**/*.stories.ts*",
-            "!src/tests/**/*"
+            "!src/tests/**/*",
+            "!src/**/*.scss"
         ],
         "moduleNameMapper": {
             "react-spring": "<rootDir>/node_modules/react-spring/web.cjs",
diff --git a/src/assets/scss/4-elements/__elements.scss b/src/assets/scss/4-elements/__elements.scss
@@ -5,18 +5,11 @@
 /**
  * CONTENT
  *
- * ANCHORS
- * General anchor link styles
  *
  */
 
-@import "anchors";
 @import "buttons";
-@import "checkboxes";
 @import "fieldsets";
-@import "forms";
 @import "headings";
 @import "inputs";
 @import "lists";
-@import "paragraphs";
-@import "text-area";
diff --git a/src/assets/scss/4-elements/_forms.scss b/src/assets/scss/4-elements/_forms.scss
diff --git a/src/assets/scss/4-elements/_paragraphs.scss b/src/assets/scss/4-elements/_paragraphs.scss
diff --git a/src/assets/scss/6-components/__components.scss b/src/assets/scss/6-components/__components.scss
diff --git a/src/assets/scss/6-components/_component-base.scss b/src/assets/scss/6-components/_component-base.scss
@@ -0,0 +1,11 @@
+/*------------------------------------*\
+  Component base SCSS import file
+  -------------------------------
+  Imported directly into individual
+  component SCSS files. Anything added
+  is imported into every component.
+\*------------------------------------*/
+
+@import "../0-vendor/__vendor";
+@import "../1-settings/__settings";
+@import "../2-tools/__tools";
diff --git a/src/assets/scss/6-components/atoms/__atoms.scss b/src/assets/scss/6-components/atoms/__atoms.scss
diff --git a/src/assets/scss/6-components/atoms/_labels.scss b/src/assets/scss/6-components/atoms/_labels.scss
diff --git a/src/assets/scss/6-components/molecules/__molecules.scss b/src/assets/scss/6-components/molecules/__molecules.scss
diff --git a/src/assets/scss/andculturecode-javascript-react-components.scss b/src/assets/scss/andculturecode-javascript-react-components.scss
@@ -29,5 +29,4 @@
 @import "3-generic/__generic";
 @import "4-elements/__elements";
 @import "5-objects/__objects";
-@import "6-components/__components";
 @import "7-utilities/__utilities";
diff --git a/src/atoms/anchors/anchor-with-icon.tsx b/src/atoms/anchors/anchor-with-icon.tsx
@@ -4,6 +4,7 @@ import { ButtonStyles } from "../constants/button-styles";
 import { Icons } from "../constants/icons";
 import { Anchor } from "../anchors/anchor";
 import { Icon } from "../icons/icon";
+import "./anchor.scss";
 
 export interface AnchorWithIconProps {
     accessibleText?: string;
diff --git a/src/atoms/anchors/anchor.scss b/src/atoms/anchors/anchor.scss
@@ -1,3 +1,5 @@
+@import "../../assets/scss/6-components/_component-base";
+
 /*------------------------------------*\
   ANCHORS
 \*------------------------------------*/
diff --git a/src/atoms/anchors/anchor.tsx b/src/atoms/anchors/anchor.tsx
@@ -1,5 +1,6 @@
 import { Link } from "react-router-dom";
 import React, { forwardRef } from "react";
+import "./anchor.scss";
 
 /*
 -----------------------------------------------------------------------------------------
diff --git a/src/atoms/buttons/button.scss b/src/atoms/buttons/button.scss
@@ -1,3 +1,5 @@
+@import "../../assets/scss/6-components/_component-base";
+
 .c-button {
     @include font-style($font-primary, "small", #ffffff, 800, 16px);
     @include padding(11px, 24px);
diff --git a/src/atoms/buttons/button.tsx b/src/atoms/buttons/button.tsx
@@ -1,9 +1,10 @@
 import { ButtonSizes } from "../constants/button-sizes";
 import { ButtonStyles } from "../constants/button-styles";
 import { ButtonTypes } from "../constants/button-types";
+import { AccessibilityLabels } from "../../enums/accessibility-labels";
 import React, { forwardRef } from "react";
 import { StringUtils } from "andculturecode-javascript-core";
-import { AccessibilityLabels } from "../../enums/accessibility-labels";
+import "./button.scss";
 
 // -----------------------------------------------------------------------------------------
 // #region Interfaces
diff --git a/src/atoms/forms/checkbox-button.scss b/src/atoms/forms/checkbox-button.scss
@@ -1,3 +1,5 @@
+@import "../../assets/scss/6-components/_component-base";
+
 .c-checkbox-button {
     @include margin-bottom(24px);
     @include padding(8px, 16px);
diff --git a/src/atoms/forms/checkbox-button.tsx b/src/atoms/forms/checkbox-button.tsx
@@ -2,6 +2,8 @@ import { InputTypes } from "../constants/input-types";
 import React from "react";
 import { Icon } from "../icons/icon";
 import { Icons } from "../constants/icons";
+import "./checkbox.scss";
+import "./checkbox-button.scss";
 
 // -----------------------------------------------------------------------------------------
 // #region Constants
diff --git a/src/atoms/forms/checkbox-input.tsx b/src/atoms/forms/checkbox-input.tsx
@@ -1,5 +1,6 @@
 import { InputTypes } from "../constants/input-types";
 import React from "react";
+import "./checkbox.scss";
 
 // -----------------------------------------------------------------------------------------
 // #region Constants
diff --git a/src/atoms/forms/checkbox.scss b/src/atoms/forms/checkbox.scss
@@ -1,3 +1,5 @@
+@import "../../assets/scss/6-components/_component-base";
+
 .e-checkbox {
     @include font-style(
         $font-primary,
diff --git a/src/atoms/forms/radio-button-input.scss b/src/atoms/forms/radio-button-input.scss
@@ -1,3 +1,6 @@
+@import "../../assets/scss/6-components/_component-base";
+@import "../buttons/button.scss";
+
 .c-radio {
     @include padding(16px);
 
diff --git a/src/atoms/forms/radio-button-input.tsx b/src/atoms/forms/radio-button-input.tsx
@@ -1,5 +1,6 @@
 import * as React from "react";
 import { forwardRef } from "react";
+import "./radio-button-input.scss";
 
 const COMPONENT_CLASS = "c-radio";
 export const RadioButtonSelectedClassName = "-selected";
diff --git a/src/atoms/forms/select.scss b/src/atoms/forms/select.scss
@@ -1,3 +1,5 @@
+@import "../../assets/scss/6-components/_component-base";
+
 .c-select {
     @include icon-fill(get-color-neutral("30"));
     position: relative;
diff --git a/src/atoms/forms/select.tsx b/src/atoms/forms/select.tsx
@@ -2,6 +2,7 @@ import React, { ChangeEvent } from "react";
 import { StringUtils } from "andculturecode-javascript-core";
 import { Icons } from "../constants/icons";
 import { Icon } from "../icons/icon";
+import "./select.scss";
 
 // -----------------------------------------------------------------------------------------
 // #region Interfaces
diff --git a/src/atoms/forms/text-area.scss b/src/atoms/forms/text-area.scss
@@ -1,3 +1,5 @@
+@import "../../assets/scss/6-components/_component-base";
+
 textarea {
     @include placeholder() {
         color: get-color-neutral("70");
diff --git a/src/atoms/forms/text-area.tsx b/src/atoms/forms/text-area.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import "./text-area.scss";
 
 // -----------------------------------------------------------------------------------------
 // #region Interfaces
diff --git a/src/atoms/forms/text-input-icon.scss b/src/atoms/forms/text-input-icon.scss
@@ -1,3 +1,5 @@
+@import "../../assets/scss/6-components/_component-base";
+
 .c-text-input-icon {
     position: relative;
 
diff --git a/src/atoms/forms/text-input-icon.tsx b/src/atoms/forms/text-input-icon.tsx
@@ -3,6 +3,7 @@ import React from "react";
 import { Icons } from "../constants/icons";
 import { IconSizes } from "../constants/icon-sizes";
 import { Icon } from "../icons/icon";
+import "./text-input-icon.scss";
 
 // -------------------------------------------------------------------------------------------------
 // #region Interfaces
diff --git a/src/atoms/progress-bar/progress-bar.scss b/src/atoms/progress-bar/progress-bar.scss
@@ -1,3 +1,5 @@
+@import "../../assets/scss/6-components/_component-base";
+
 .c-progress-bar {
     width: 100%;
     height: rem(6px);
diff --git a/src/atoms/progress-bar/progress-bar.tsx b/src/atoms/progress-bar/progress-bar.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import { StringUtils } from "andculturecode-javascript-core";
+import "./progress-bar.scss";
 
 // -------------------------------------------------------------------------------------------------
 // #region Constants
diff --git a/src/atoms/toasts/toast-templates.tsx b/src/atoms/toasts/toast-templates.tsx
@@ -3,6 +3,7 @@ import { Icon } from "../icons/icon";
 import { Icons } from "../constants/icons";
 import React from "react";
 import { ToastContent } from "react-toastify";
+import "./toast.scss";
 
 const COMPONENT_CLASS = "c-toast-content";
 const ICON_CLASS = `${COMPONENT_CLASS}__icon`;
diff --git a/src/atoms/toasts/toast.scss b/src/atoms/toasts/toast.scss
@@ -1,3 +1,5 @@
+@import "../../assets/scss/6-components/_component-base";
+
 .c-toast {
     padding-top: 0;
     padding-bottom: 0;
diff --git a/src/molecules/cards/card.scss b/src/molecules/cards/card.scss
@@ -1,3 +1,5 @@
+@import "../../assets/scss/6-components/_component-base";
+
 .c-card {
     position: relative;
     box-shadow: 0px 3px 10px rgba(0, 26, 57, 0.2);
diff --git a/src/molecules/cards/card.tsx b/src/molecules/cards/card.tsx
@@ -1,5 +1,6 @@
 import React, { PropsWithChildren } from "react";
 import { Paragraph } from "../../atoms/typography/paragraph";
+import "./card.scss";
 
 // -------------------------------------------------------------------------------------------------
 // #region Constants
diff --git a/src/molecules/dropdown-button/dropdown-button.scss b/src/molecules/dropdown-button/dropdown-button.scss
@@ -1,3 +1,5 @@
+@import "../../assets/scss/6-components/_component-base";
+
 .c-dropdown-button {
     svg {
         vertical-align: middle;
diff --git a/src/molecules/dropdown-button/dropdown-button.tsx b/src/molecules/dropdown-button/dropdown-button.tsx
@@ -3,6 +3,7 @@ import { Menu, MenuButton, MenuItem, MenuList } from "@reach/menu-button";
 import uuid from "uuid";
 import { ButtonSizes } from "../../atoms/constants/button-sizes";
 import { ButtonStyles } from "../../atoms/constants/button-styles";
+import "./dropdown-button.scss";
 
 // -------------------------------------------------------------------------------------------------
 // #region Constants
diff --git a/src/molecules/errors/error-banner.scss b/src/molecules/errors/error-banner.scss
@@ -1,3 +1,5 @@
+@import "../../assets/scss/6-components/_component-base";
+
 .c-error-banner {
     @include padding(8px, 24px, 8px, 32px);
     @include font-style(
diff --git a/src/molecules/errors/error-banner.tsx b/src/molecules/errors/error-banner.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { Icon } from "../../atoms/icons/icon";
 import { Icons } from "../../atoms/constants/icons";
+import "./error-banner.scss";
 
 // -----------------------------------------------------------------------------------------
 // #region Constants
diff --git a/src/molecules/form-fields/checkbox-form-field.tsx b/src/molecules/form-fields/checkbox-form-field.tsx
@@ -4,6 +4,7 @@ import {
 } from "../../atoms/forms/checkbox-input";
 import React from "react";
 import { StringUtils } from "andculturecode-javascript-core";
+import "./form-field.scss";
 
 // -----------------------------------------------------------------------------------------
 // #region Constants
diff --git a/src/molecules/form-fields/form-field.scss b/src/molecules/form-fields/form-field.scss
@@ -1,3 +1,5 @@
+@import "../../assets/scss/6-components/_component-base";
+
 .c-form-field {
     @include margin-bottom(20px);
 
diff --git a/src/molecules/form-fields/input-form-field.tsx b/src/molecules/form-fields/input-form-field.tsx
@@ -5,6 +5,7 @@ import { CollectionUtils, StringUtils } from "andculturecode-javascript-core";
 import { InputCharacterCount } from "../../atoms/forms/input-character-count";
 import { InputTypes } from "../../atoms/constants/input-types";
 import { InputProperties } from "../../atoms/interfaces/input-properties";
+import "./form-field.scss";
 
 // -----------------------------------------------------------------------------------------
 // #region Constants
diff --git a/src/molecules/form-fields/password-form-field.tsx b/src/molecules/form-fields/password-form-field.tsx
@@ -3,6 +3,7 @@ import uuid from "uuid";
 import { InputProperties } from "../../atoms/interfaces/input-properties";
 import { PasswordInput } from "../../atoms/forms/password-input";
 import { StringUtils } from "andculturecode-javascript-core";
+import "./form-field.scss";
 
 // -----------------------------------------------------------------------------------------
 // #region Constants
diff --git a/src/molecules/form-fields/select-form-field.tsx b/src/molecules/form-fields/select-form-field.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import uuid from "uuid";
 import { Select, SelectOption } from "../../atoms/forms/select";
 import { StringUtils, CollectionUtils } from "andculturecode-javascript-core";
+import "./form-field.scss";
 
 // -----------------------------------------------------------------------------------------
 // #region Constants
diff --git a/src/molecules/form-fields/text-area-form-field.tsx b/src/molecules/form-fields/text-area-form-field.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import uuid from "uuid";
 import { TextArea } from "../../atoms/forms/text-area";
 import { StringUtils, CollectionUtils } from "andculturecode-javascript-core";
+import "./form-field.scss";
 
 // -----------------------------------------------------------------------------------------
 // #region Constants
diff --git a/src/molecules/forms/form.scss b/src/molecules/forms/form.scss
@@ -1,3 +1,5 @@
+@import "../../assets/scss/6-components/_component-base";
+
 .c-form {
     > .c-form-field {
         @include margin-bottom(25px);
diff --git a/src/molecules/forms/form.tsx b/src/molecules/forms/form.tsx
@@ -1,5 +1,6 @@
 import * as React from "react";
 import { PropsWithChildren } from "react";
+import "./form.scss";
 
 const COMPONENT_CLASS = "c-form";
 
diff --git a/src/molecules/lists/drag-and-drop-list-box.scss b/src/molecules/lists/drag-and-drop-list-box.scss
@@ -1,3 +1,5 @@
+@import "../../assets/scss/6-components/_component-base";
+
 .c-drag-and-drop-list-box {
     .c-list-box__item {
         &.-dragging {
diff --git a/src/molecules/lists/drag-and-drop-list-box.tsx b/src/molecules/lists/drag-and-drop-list-box.tsx
@@ -25,6 +25,7 @@ import { Button } from "../../atoms/buttons/button";
 import { ButtonSizes } from "../../atoms/constants/button-sizes";
 import { ButtonTypes } from "../../atoms/constants/button-types";
 import { ButtonStyles } from "../../atoms/constants/button-styles";
+import "./drag-and-drop-list-box.scss";
 
 // -------------------------------------------------------------------------------------------------
 // #region Constants
diff --git a/src/molecules/lists/list-box.scss b/src/molecules/lists/list-box.scss
@@ -1,3 +1,5 @@
+@import "../../assets/scss/6-components/_component-base";
+
 .c-list-box {
     background-color: get-color-neutral("05");
     border-radius: $border-radius-small;
diff --git a/src/molecules/lists/list-box.tsx b/src/molecules/lists/list-box.tsx
@@ -5,6 +5,7 @@ import { ButtonTypes } from "../../atoms/constants/button-types";
 import { ButtonSizes } from "../../atoms/constants/button-sizes";
 import { ButtonStyles } from "../../atoms/constants/button-styles";
 import { Paragraph } from "../../atoms/typography/paragraph";
+import "./list-box.scss";
 
 // -------------------------------------------------------------------------------------------------
 // #region Constants
diff --git a/src/molecules/lists/radio-list.scss b/src/molecules/lists/radio-list.scss
@@ -1,3 +1,5 @@
+@import "../../assets/scss/6-components/_component-base";
+
 .c-radio-list {
     > ul {
         > li {
diff --git a/src/molecules/lists/radio-list.tsx b/src/molecules/lists/radio-list.tsx
@@ -1,5 +1,6 @@
 import * as React from "react";
 import { UnorderedList } from "./unordered-list";
+import "./radio-list.scss";
 
 // -----------------------------------------------------------------------------------------
 // #region Constants
diff --git a/src/molecules/tooltips/tooltip.scss b/src/molecules/tooltips/tooltip.scss
diff --git a/src/molecules/tooltips/tooltip.tsx b/src/molecules/tooltips/tooltip.tsx
