Upgrade bootstrap alpha to edx-bootstrap (beta) (#31)

.storybook/webpack.config.js

@@ -23,7 +23,8 @@ module.exports = {
             options: {
               data: '@import "paragon-reset";',
               includePaths: [
-                path.join(__dirname, '../src/utils'),
+                  path.join(__dirname, '../src/utils'),
+                  path.join(__dirname, '../node_modules'),
               ],
               sourceMap: true,
             },

package.json

@@ -17,8 +17,8 @@
     "test": "jest --coverage"
   },
   "dependencies": {
-    "bootstrap": "4.0.0-alpha.6",
     "classnames": "^2.2.5",
+    "edx-bootstrap": "^0.2.1",
     "prop-types": "^15.5.8",
     "react": "^15.5.4",
     "react-dom": "^15.5.4"

src/utils/paragon-reset.scss

+@import '~edx-bootstrap/sass/open-edx/theme';
 @import "~bootstrap/scss/variables";
 @import "~bootstrap/scss/mixins";
 
@@ -23,39 +24,30 @@ $spacer: $spacer / $base-rem-size;
 $font-size-base: $font-size-base / $base-rem-size;
 $font-size-lg: $font-size-lg / $base-rem-size;
 $font-size-sm: $font-size-sm / $base-rem-size;
-$font-size-xs: $font-size-xs / $base-rem-size;
-$font-size-h1: $font-size-h1 / $base-rem-size;
-$font-size-h2: $font-size-h2 / $base-rem-size;
-$font-size-h3: $font-size-h3 / $base-rem-size;
-$font-size-h4: $font-size-h4 / $base-rem-size;
-$font-size-h5: $font-size-h5 / $base-rem-size;
-$font-size-h6: $font-size-h6 / $base-rem-size;
+$h1-font-size: $h1-font-size / $base-rem-size;
+$h2-font-size: $h2-font-size / $base-rem-size;
+$h3-font-size: $h3-font-size / $base-rem-size;
+$h4-font-size: $h4-font-size / $base-rem-size;
+$h5-font-size: $h5-font-size / $base-rem-size;
+$h6-font-size: $h6-font-size / $base-rem-size;
 $display1-size: $display1-size / $base-rem-size;
 $display2-size: $display2-size / $base-rem-size;
 $display3-size: $display3-size / $base-rem-size;
 $display4-size: $display4-size / $base-rem-size;
 $lead-font-size: $lead-font-size / $base-rem-size;
-$blockquote-border-width: $blockquote-border-width / $base-rem-size;
 $kbd-box-shadow: $kbd-box-shadow / $base-rem-size;
 $border-radius: $border-radius / $base-rem-size;
 $border-radius-lg: $border-radius-lg / $base-rem-size;
 $border-radius-sm: $border-radius-sm / $base-rem-size;
 $table-cell-padding: $table-cell-padding / $base-rem-size;
-$table-sm-cell-padding: $table-sm-cell-padding / $base-rem-size;
-$btn-padding-x: $btn-padding-x / $base-rem-size;
-$btn-padding-y: $btn-padding-y / $base-rem-size;
-$btn-padding-x-sm: $btn-padding-x-sm / $base-rem-size;
-$btn-padding-y-sm: $btn-padding-y-sm / $base-rem-size;
-$btn-padding-x-lg: $btn-padding-x-lg / $base-rem-size;
-$btn-padding-y-lg: $btn-padding-y-lg / $base-rem-size;
+$table-cell-padding-sm: $table-cell-padding-sm / $base-rem-size;
 $btn-block-spacing-y: $btn-block-spacing-y / $base-rem-size;
-$btn-toolbar-margin: $btn-toolbar-margin / $base-rem-size;
-$input-padding-x: $input-padding-x / $base-rem-size;
-$input-padding-y: $input-padding-y / $base-rem-size;
-$input-padding-x-sm: $input-padding-x-sm / $base-rem-size;
-$input-padding-y-sm: $input-padding-y-sm / $base-rem-size;
-$input-padding-x-lg: $input-padding-x-lg / $base-rem-size;
-$input-padding-y-lg: $input-padding-y-lg / $base-rem-size;
+$input-btn-padding-x: $input-btn-padding-x / $base-rem-size;
+$input-btn-padding-y: $input-btn-padding-y / $base-rem-size;
+$input-btn-padding-x-sm: $input-btn-padding-x-sm / $base-rem-size;
+$input-btn-padding-y-sm: $input-btn-padding-y-sm / $base-rem-size;
+$input-btn-padding-x-lg: $input-btn-padding-x-lg / $base-rem-size;
+$input-btn-padding-y-lg: $input-btn-padding-y-lg / $base-rem-size;
 $form-text-margin-top: $form-text-margin-top / $base-rem-size;
 $form-check-margin-bottom: $form-check-margin-bottom / $base-rem-size;
 $form-check-input-gutter: $form-check-input-gutter / $base-rem-size;
@@ -66,12 +58,10 @@ $custom-control-gutter: $custom-control-gutter / $base-rem-size;
 $custom-control-spacer-x: $custom-control-spacer-x / $base-rem-size;
 $custom-control-spacer-y: $custom-control-spacer-y / $base-rem-size;
 $custom-control-indicator-size: $custom-control-indicator-size / $base-rem-size;
-$custom-control-indicator-margin-y: $custom-control-indicator-margin-y / $base-rem-size;
 $custom-control-indicator-box-shadow: $custom-control-indicator-box-shadow / $base-rem-size;
 $custom-select-padding-x: $custom-select-padding-x / $base-rem-size;
 $custom-select-padding-y: $custom-select-padding-y / $base-rem-size;
 $custom-select-indicator-padding: $custom-select-indicator-padding / $base-rem-size;
-$custom-select-sm-padding-y: $custom-select-sm-padding-y / $base-rem-size;
 $custom-file-height: $custom-file-height / $base-rem-size;
 $custom-file-width: $custom-file-width / $base-rem-size;
 $custom-file-focus-box-shadow: $custom-file-focus-box-shadow / $base-rem-size;
@@ -80,14 +70,13 @@ $custom-file-padding-y: $custom-file-padding-y / $base-rem-size;
 $custom-file-box-shadow: $custom-file-box-shadow / $base-rem-size;
 $dropdown-min-width: $dropdown-min-width / $base-rem-size;
 $dropdown-padding-y: $dropdown-padding-y / $base-rem-size;
-$dropdown-margin-top: $dropdown-margin-top / $base-rem-size;
+$dropdown-spacer: $dropdown-spacer / $base-rem-size;
 $dropdown-box-shadow: $dropdown-box-shadow / $base-rem-size;
 $dropdown-item-padding-x: $dropdown-item-padding-x / $base-rem-size;
+$dropdown-item-padding-y: $dropdown-item-padding-y / $base-rem-size;
 $navbar-brand-padding-y: $navbar-brand-padding-y / $base-rem-size;
 $navbar-toggler-padding-x: $navbar-toggler-padding-x / $base-rem-size;
 $navbar-toggler-padding-y: $navbar-toggler-padding-y / $base-rem-size;
-$nav-item-margin: $nav-item-margin / $base-rem-size;
-$nav-item-inline-spacer: $nav-item-inline-spacer / $base-rem-size;
 $pagination-padding-x: $pagination-padding-x / $base-rem-size;
 $pagination-padding-y: $pagination-padding-y / $base-rem-size;
 $pagination-padding-x-sm: $pagination-padding-x-sm / $base-rem-size;

webpack.config.js

@@ -53,6 +53,7 @@ const base = {
               data: '@import "paragon-reset";',
               includePaths: [
                 path.join(__dirname, './src/utils'),
+                path.join(__dirname, './node_modules'),
               ],
             },
           },