Merge pull request #61 from edx/lbirch/search-styles

fix: add styles to SearchHeader

.eslintrc.js

@@ -14,6 +14,15 @@ config.rules = {
         "example/*",
       ],
     },
+  ],
+  "template-curly-spacing": "off",
+  "indent": [
+    "warn",
+    2,
+    {
+      "ignoredNodes": ["TemplateLiteral"],
+      "SwitchCase": 1
+    }
   ]
 };
 

Makefile

@@ -6,3 +6,4 @@ build:
 	cp ./package.json ./dist/package.json
 	cp ./LICENSE ./dist/LICENSE
 	cp ./README.rst ./dist/README.rst
+	node build-scss.js

build-scss.js

@@ -0,0 +1,26 @@
+/* eslint-disable func-names, no-var, import/no-extraneous-dependencies */
+
+var path = require('path');
+var fs = require('fs');
+
+var sass = require('sass');
+var Fiber = require('fibers');
+
+// Resolve tildas the way webpack does
+var tildaImporter = function (url) {
+  if (url[0] === '~') {
+    // eslint-disable-next-line no-param-reassign
+    url = path.resolve('node_modules', url.substr(1)).trim();
+  }
+
+  return { file: url };
+};
+
+var coreResult = sass.renderSync({
+  file: './src/index.scss',
+  outputStyle: 'compressed',
+  importer: tildaImporter,
+  fiber: Fiber,
+});
+
+fs.writeFileSync('./dist/frontend-enterprise.css', coreResult.css);

package.json

@@ -37,15 +37,17 @@
     "@commitlint/config-angular": "6.1.3",
     "@commitlint/prompt": "6.1.3",
     "@commitlint/prompt-cli": "6.1.3",
-    "@edx/frontend-build": "5.3.2",
+    "@edx/brand": "npm:@edx/brand-openedx@^1.1.0",
+    "@edx/paragon": "^13.12.0",
+    "@edx/frontend-build": "^5.3.2",
     "@edx/frontend-platform": "1.7.0",
-    "@edx/paragon": "12.0.5",
     "@testing-library/jest-dom": "5.11.6",
     "@testing-library/react": "11.1.2",
     "@testing-library/react-hooks": "3.4.2",
     "axios-mock-adapter": "1.19.0",
     "coveralls": "3.1.0",
     "eslint-plugin-import": "2.22.1",
+    "fibers": "^5.0.0",
     "history": "4.10.1",
     "husky": "0.14.3",
     "jest": "23.6.0",
@@ -57,6 +59,7 @@
     "react-router-dom": "5.2.0",
     "react-test-renderer": "17.0.1",
     "redux": "4.0.5",
+    "sass": "^1.32.7",
     "semantic-release": "17.2.3",
     "source-map-loader": "0.2.4",
     "uglifyjs-webpack-plugin": "1.3.0",
@@ -73,7 +76,7 @@
   },
   "peerDependencies": {
     "@edx/frontend-platform": "^1.5.2",
-    "@edx/paragon": "^12.0.5",
+    "@edx/paragon": "^13.11.1",
     "prop-types": "^15.7.2",
     "react": "^16.13.1",
     "react-dom": "^17.0.1",

src/course-search/styles/_FacetList.scss

@@ -0,0 +1,43 @@
+.facet-list {
+  .dropdown {
+    @extend .mb-3;
+
+    .dropdown-toggle {
+      text-align: left;
+      padding-left: 10px;
+      padding-right: 10px;
+
+      &:before {
+        border-radius: 0;
+      }
+
+      &:after {
+        margin-left: 10px;
+      }
+    }
+
+    .facet-item-label {
+      font-weight: normal;
+
+      &.is-refined {
+        font-weight: 700;
+      }
+    }
+
+    input:focus + .facet-item-label {
+      text-decoration: underline;
+    }
+
+    .dropdown-menu {
+      max-height: 250px;
+      overflow: scroll;
+      max-width: 420px;
+      width: max-content;
+
+      .dropdown-item {
+        padding-left: 30px;
+        white-space: break-spaces;
+      }
+    }
+  }
+}

src/course-search/styles/_MobileSearchFilters.scss

@@ -0,0 +1,66 @@
+.mobile-filter-menu {
+  .modal-dialog {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    max-width: unset;
+  }
+
+  .modal-header .btn-close {
+    right: 10px;
+    color: $gray-700;
+  }
+
+  .modal-content {
+    height: auto;
+    min-height: 100%;
+    border: 0 none;
+    border-radius: 0;
+    box-shadow: none;
+  }
+
+  .modal-footer {
+    background-color: $gray-200;
+
+    .btn {
+      @extend .flex-grow-1;
+    }
+  }
+
+  .facet-list .dropdown {
+    @extend .mb-0;
+
+    .dropdown-toggle {
+      @extend .border-bottom;
+      @extend .py-3;
+      width: 100%;
+
+      &:after {
+        position: table;
+        float: right;
+        height: 100%;
+        vertical-align: middle;
+      }
+    }
+
+    &:first-child {
+      border: none;
+    }
+
+    .dropdown-menu {
+      position: relative;
+      width: 100%;
+      box-shadow: none;
+      overflow-y: unset;
+      max-height: unset;
+      max-width: unset;
+      border: none;
+      @extend .border-bottom;
+    }
+
+    .dropdown-item {
+      padding-left: 30px;
+    }
+  }
+}

src/course-search/styles/_index.scss

@@ -0,0 +1,2 @@
+@import "./FacetList";
+@import "./MobileSearchFilters";

src/index.scss

@@ -0,0 +1,6 @@
+@import "~@edx/brand/paragon/fonts";
+@import "~@edx/brand/paragon/variables";
+@import "~@edx/paragon/scss/core/core";
+@import "~@edx/brand/paragon/overrides";
+
+@import "./src/course-search/styles/index";