refactor(components): Use new typography classes in ChevronLink and B…

…utton components Also added a telus-font-family mixin
telus · Sep 1, 2017 · 5a27d2f · 5a27d2f
1 parent 688c00e
commit 5a27d2f
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 10 deletions.
diff --git a/src/components/Button/Button.modules.scss b/src/components/Button/Button.modules.scss
@@ -16,7 +16,6 @@ $button-text-color: $color-white;
 }
 
 .button {
-  @include helvetica-neue-medium-65;
 
   display: block;
   width: 100%;
@@ -28,8 +27,8 @@ $button-text-color: $color-white;
 
   transition: background .2s;
 
-  font-family: $font-telus;
-  font-size: 1rem;
+  composes: medium from '../Typography/Text/Text.modules.scss';
+  composes: boldFont from '../Typography/Text/Text.modules.scss';
   text-align: center;
 
   cursor: pointer;

diff --git a/src/components/Link/ChevronLink/ChevronLink.modules.scss b/src/components/Link/ChevronLink/ChevronLink.modules.scss
@@ -1,16 +1,12 @@
 @import '../../../scss/settings/colours';
 @import '../../../scss/settings/typography';
 
-@mixin text--medium {
-  font-size: rem($body-medium-text-size);
-  line-height: $body-medium-line-height;
-  letter-spacing: -.8px;
-}
-
 .link {
-  @include text--medium;
+  @include telus-font-family;
   @include helvetica-neue-roman-55;
 
+  composes: medium from '../../Typography/Text/Text.modules.scss';
+
   &:hover {
     .rightChevron {
       transform: translateX(0.25rem);

diff --git a/src/components/Typography/Text/Text.modules.scss b/src/components/Typography/Text/Text.modules.scss
@@ -2,11 +2,16 @@
 @import '../../../scss/settings/typography';
 
 .baseScripts {
+  @include telus-font-family;
   position: relative;
   vertical-align: baseline;
   font-size: .875rem;
 }
 
+.fontFamily {
+  @include telus-font-family;
+}
+
 .sup {
   composes: baseScripts;
   top: -.5em;
@@ -33,6 +38,8 @@
 
 .smallFont {
   @include helvetica-neue-roman-55;
+
+  composes: fontFamily;
 }
 
 .medium {
@@ -43,6 +50,8 @@
 
 .mediumFont {
   @include helvetica-neue-light-45;
+
+  composes: fontFamily;
 }
 
 .large {
@@ -53,10 +62,14 @@
 
 .largeFont {
   @include helvetica-neue-light-45;
+
+  composes: fontFamily;
 }
 
 .boldFont {
   @include helvetica-neue-medium-65;
+
+  composes: fontFamily;
 }
 
 .color {

diff --git a/src/scss/settings/_typography.scss b/src/scss/settings/_typography.scss
@@ -15,6 +15,10 @@ $body-medium-line-height: 1.5; // 24px
 $body-small-text-size: 14px;
 $body-small-line-height: 1.71; // 24px
 
+@mixin telus-font-family {
+  font-family: $font-telus;
+}
+
 @mixin helvetica-neue-thin-35 {
   font-weight: 300;
 }