Style updates for Contentful components

- Adds `tc-typography` SCSS mixin for textual blocks
- Updates button styles to play well with that mixin (they used to have
style priority conflicts).

Author: birdofpreyru

package-lock.json

@@ -32,7 +32,7 @@
     "lint:scss": "./node_modules/.bin/stylelint **/*.scss --syntax scss",
     "test": "npm run lint && npm run jest"
   },
-  "version": "0.5.1",
+  "version": "0.5.2",
   "dependencies": {
     "react": "^16.4.1",
     "react-css-super-themr": "^2.2.0",

package.json

@@ -4,19 +4,23 @@
 
 @import "default";
 
-.button {
+@mixin button {
   background: $tc-red-70;
   border-color: transparent;
   color: $tc-white;
 }
 
-.disabled {
+.button.disabled {
+  @include button;
+
   background-color: $tc-gray-20;
   opacity: 1;
 }
 
-.link,
-.regular {
+.button.link,
+.button.regular {
+  @include button;
+
   &:visited {
     color: $tc-white;
   }

src/shared/components/buttons/themes/danger.scss

@@ -7,33 +7,42 @@
 
 @import "~styles/mixins";
 
-/* General button style - medium size. */
-.button {
+/* Generic button of medium size. */
+@mixin button {
   @include tc-label-lg;
 
   align-items: center;
   background: $tc-white;
   border: solid 1px $tc-gray-30;
   border-radius: 4px;
+  box-sizing: border-box;
   color: $tc-gray-80;
   display: inline-flex;
   justify-content: center;
   min-height: 40px;
   margin: 5px;
   padding: 5px 23px;
+  text-align: center;
   vertical-align: middle;
 }
 
+/* NOTE: All CSS rules below use two classes, to have higher specifity, thus
+ * avoiding overriding of these rules by parent rules in some scenarious. */
+
 /* Additional styling for a disabled button. */
-.disabled {
+.button.disabled {
+  @include button;
+
   cursor: not-allowed;
   opacity: 0.3;
 }
 
 /* .link and .regular classes are applied only to active button-like links,
 * and real buttons (rendered as <button> elements). */
-.link,
-.regular {
+.button.link,
+.button.regular {
+  @include button;
+
   /* To prevent different styling of the button-like link once it has been
    * visited. */
   &:visited {
@@ -63,7 +72,7 @@
 
 /* And a few extra classes to support XS, SM and LG sizes. */
 
-.xs {
+.button.xs {
   @include tc-label-sm;
 
   border-radius: 2px;
@@ -72,15 +81,15 @@
   padding: 1px 13px;
 }
 
-.sm {
+.button.sm {
   @include tc-label-md;
 
   color: $tc-gray-80;
   min-height: 30px;
   padding: 4px 18px;
 }
 
-.lg {
+.button.lg {
   @include tc-label-xl;
 
   color: $tc-gray-80;

src/shared/components/buttons/themes/default.scss

@@ -4,18 +4,22 @@
 
 @import "default";
 
-.button {
+@mixin button {
   background: transparent;
   border-color: transparent;
   color: $tc-dark-blue-110;
 }
 
-.disabled {
+.button.disabled {
+  @include button;
+
   color: $tc-gray-80;
 }
 
-.link,
-.regular {
+.button.link,
+.button.regular {
+  @include button;
+
   &:visited {
     color: $tc-dark-blue-110;
   }

src/shared/components/buttons/themes/ghost.scss

@@ -4,19 +4,23 @@
 
 @import "default";
 
-.button {
+@mixin button {
   background: $tc-dark-blue;
   border-color: transparent;
   color: $tc-white;
 }
 
-.disabled {
+.button.disabled {
+  @include button;
+
   background-color: $tc-gray-20;
   opacity: 1;
 }
 
-.link,
-.regular {
+.button.link,
+.button.regular {
+  @include button;
+
   &:visited {
     color: $tc-white;
   }

src/shared/components/buttons/themes/primary.scss

@@ -4,19 +4,23 @@
 
 @import "default";
 
-.button {
+@mixin button {
   background: $tc-gray-40;
   border-color: transparent;
   color: $tc-white;
 }
 
-.disabled {
+.button.disabled {
+  @include button;
+
   background-color: $tc-gray-20;
   opacity: 1;
 }
 
-.link,
-.regular {
+.button.link,
+.button.regular {
+  @include button;
+
   &:visited {
     color: $tc-white;
   }

src/shared/components/buttons/themes/secondary.scss

@@ -172,3 +172,95 @@
   font-size: 42px;
   line-height: 50px;
 }
+
+/**
+ * Mixing of inline styles for a generic text block.
+ *
+ * TODO: In my understanding, it violates UI styleguides in various aspects,
+ * thus it is placed here for now, and not into UI Kit library. This code comes
+ * from challenges related to Contentful integration, ContentBlocks,
+ * in particular, that was done without a close watch on the design. It is
+ * separated into mixing, as other Contentful components also need inline
+ * styles, thus we at least should keep them consistent between different
+ * Contentful components, and later clean them all to match UI Kit.
+ */
+
+@mixin tc-typography {
+  a { color: $tc-dark-blue; }
+
+  a:active,
+  a:focus,
+  a:visited,
+  a:hover {
+    color: $tc-dark-blue;
+  }
+
+  em {
+    font-style: italic;
+  }
+
+  h1 {
+    @include tc-heading-lg;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin: 20px 0 10px;
+  }
+
+  p {
+    @include tc-body-md;
+
+    padding: 10px 0;
+  }
+
+  td,
+  th {
+    @include tc-body-md;
+  }
+
+  ul,
+  ol {
+    @include tc-body-md;
+
+    padding-left: 20px;
+  }
+
+  ul {
+    list-style-type: disc;
+  }
+
+  ol {
+    list-style-type: decimal;
+  }
+
+  img {
+    max-width: 100%;
+  }
+
+  code {
+    @include roboto-mono-regular;
+
+    line-height: 1.5;
+    white-space: pre;
+  }
+
+  sub,
+  sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+
+  sup { top: -0.5em; }
+  sub { bottom: -0.25em; }
+
+  strong {
+    font-weight: bold;
+  }
+}