build(bundler): add global CSS to the rollup build

telus · Jul 18, 2017 · 6c5daa7 · 6c5daa7
1 parent fc73985
commit 6c5daa7
Show file tree

Hide file tree

Showing 19 changed files with 2,169 additions and 67 deletions.
diff --git a/enriched/package.json b/enriched/package.json
@@ -17,7 +17,7 @@
     "test": "jest",
     "test:watch": "npm run test -- --watch",
     "test:u": "npm run test -- -u",
-    "rollup": "rollup -c && cp ./src/blocks/Headline/wave_header_default.png ./dist/"
+    "build-new": "rollup -c && cp ./src/blocks/Headline/wave_header_default.png ./dist/"
   },
   "dependencies": {
     "@telusdigital/redux-contentful": "^2.2.1",
@@ -30,7 +30,7 @@
     "telus-thorium-core": "^0.18.1"
   },
   "devDependencies": {
-    "autoprefixer": "^6.5.1",
+    "autoprefixer": "^7.1.2",
     "autoprefixer-loader": "^3.1.0",
     "babel-cli": "^6.16.0",
     "babel-core": "^6.17.0",
@@ -62,8 +62,8 @@
     "jest-enzyme": "^3.4.0",
     "karma": "^1.3.0",
     "mkdirp": "^0.5.1",
-    "node-sass": "^3.4.2",
-    "npm-sass": "^1.3.0",
+    "node-sass": "^4.5.3",
+    "postcss": "^6.0.7",
     "postcss-cli": "^2.6.0",
     "postcss-loader": "^1.0.0",
     "react": "^15.3.2",

diff --git a/enriched/rollup.config.js b/enriched/rollup.config.js
@@ -2,8 +2,12 @@ import path from 'path';
 
 import resolve from 'rollup-plugin-node-resolve';
 import commonjs from 'rollup-plugin-commonjs';
+
 import babel from 'rollup-plugin-babel';
+
 import sass from 'rollup-plugin-sass';
+import postcss from 'postcss';
+import autoprefixer from 'autoprefixer';
 
 export default {
   entry: path.resolve('./src/rollup-main.js'),
@@ -23,7 +27,12 @@ export default {
       include: 'node_modules/**'
     }),
     sass({
-      output: path.resolve('./dist/tds.css')
+      output: path.resolve('./dist/tds.css'),
+      processor(css) {
+        return postcss([autoprefixer])
+          .process(css)
+          .then(result => result.css)
+      }
     }),
     babel({
       babelrc: false,

diff --git a/enriched/scss/elements/_buttons.scss b/enriched/scss/elements/_buttons.scss
@@ -0,0 +1,182 @@
+// Button styles
+
+.button,
+a.button {
+  border: 0;
+  border-radius: 4px;
+  cursor: pointer;
+  display: block;
+  font-size: rem(16px);
+  font-weight: 700;
+  letter-spacing: .2px;
+  line-height: 1.166666;
+  margin: 9px 0;
+  padding: 16px 32px;
+  text-align: center;
+  text-decoration: none;
+  transition: background .2s;
+  width: 100%;
+  min-height: 52px;
+  min-width: 180px;
+
+  @include from-breakpoint(medium) {
+    display: inline-block;
+    width: auto;
+    vertical-align: top;
+
+    + .button {
+      // Using < 20px to compensate for the extra margin which appears between inline-block
+      // elements due to whitespace in the actual markup.
+      margin-left: 16px;
+    }
+
+    + .button--link {
+      margin-left: 34px;
+    }
+
+    &--link {
+      + .button--link {
+        margin-left: 40px;
+      }
+
+      + .button:not(.button--link) {
+        margin-left: 40px;
+      }
+    }
+  }
+
+  &--primary {
+    background-color: $color-primary;
+    color: $color-white;
+
+    &:hover {
+      background-color: transparent;
+      color: $color-primary;
+      box-shadow: 0 0 0 1px;
+    }
+
+    &.button--outlined {
+      background-color: transparent;
+      box-shadow: 0 0 0 1px;
+      color: $color-primary;
+
+      &:hover {
+        background-color: $color-primary;
+        color: $color-white;
+      }
+    }
+
+    &.button--inverted {
+      background-color: $color-white;
+      color: $color-primary;
+
+      &:hover {
+        box-shadow: 0 0 0 1px;
+        color: $color-white;
+        background-color: transparent;
+      }
+
+      &.button--outlined {
+        background-color: transparent;
+        color: $color-white;
+
+        &:hover {
+          background-color: $color-white;
+          color: $color-primary;
+          box-shadow: 0 0 0 1px;
+        }
+      }
+    }
+
+    &.button--link {
+      &::after {
+        padding-left: 4px;
+      }
+
+      @include chevron-links($color-primary);
+    }
+  }
+
+  &--secondary {
+    background-color: $color-secondary;
+    color: $color-white;
+
+    &:hover {
+      background-color: transparent;
+      color: $color-secondary;
+      box-shadow: 0 0 0 1px;
+    }
+
+    &.button--outlined {
+      background-color: transparent;
+      color: $color-secondary;
+      box-shadow: 0 0 0 1px;
+
+      &:hover {
+        background-color: $color-secondary;
+        color: $color-white;
+      }
+    }
+
+    &.button--inverted {
+      background-color: $color-white;
+      color: $color-secondary;
+
+      &:hover {
+        box-shadow: 0 0 0 1px;
+        color: $color-white;
+        background-color: transparent;
+      }
+
+      &.button--outlined {
+        background-color: transparent;
+        color: $color-white;
+
+        &:hover {
+          background-color: $color-white;
+          color: $color-secondary;
+          box-shadow: 0 0 0 1px;
+        }
+      }
+    }
+
+    &.button--link {
+      &::after {
+        padding-left: 4px;
+      }
+
+      @include chevron-links($color-secondary);
+    }
+  }
+
+  &--link {
+    -webkit-appearance: none;
+    appearance: none;
+    background-color: inherit;
+    font-family: inherit;
+    line-height: 1;
+    font-size: rem(16px);
+    border: 0;
+    text-decoration: underline;
+    padding-left: 0;
+    padding-right: 0;
+    font-weight: 500;
+    min-width: auto;
+  }
+
+  &--plain {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background-image: none;
+    background-color: transparent;
+    box-shadow: none;
+    text-align: center;
+  }
+}
+
+// Github Issue 394 fix
+a.button--primary.button--outlined:hover {
+  display: inline-block;
+  background-color: $color-primary;
+}