Merge branch 'feature/ISTWCMS-5657-ebremner-ctas' into '1.0.x'

ISTWCMS-5657: adding ctas

See merge request !23

src/patterns/01-core/props/_colors.scss

@@ -232,7 +232,8 @@ $faculties_colours: (
   'org-stp': stp,
   'org-cgc': cgc,
   'org-stj': stj,
-  'org-ren': ren
+  'org-ren': ren,
+  'neutral': neutral
 );
 
 //Swatches

src/patterns/04-components/_index.scss

@@ -4,6 +4,7 @@
 @forward 'banners/banners';
 @forward 'blockquote/blockquote';
 @forward 'button/button';
+@forward 'call-to-action/call-to-action';
 @forward 'card/card';
 @forward 'card/card--banner/card--banner';
 @forward 'card/card--node/card--node';

src/patterns/04-components/call-to-action/_call-to-action.scss

-$faculties: 'org-default', 'neutral', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat', 'org-sci', 'org-school', 'org-stp', 'org-cgc', 'org-stj', 'org-ren';
+@use '../../01-core' as *;
+
+@each $faculty, $colour in $faculties_colours {
 
-@each $faculty in $faculties {
   .uw-cta {
     .#{$faculty} {
       .uw-cta__text--big {
 
         @if $faculty == org-default {
-          color: $uw-gold;
+          color: var(--uw-gold);
         }
 
         @else if $faculty == neutral {
-          color: $uw-grey;
+          color: var(--uw-black-3);
         }
 
         @else if $faculty == org-stp or $faculty == org-stj or $faculty == org-ren or $faculty == org-cgc {
-          color: gesso-brand($faculty, 'light');
+          color: var(--#{$colour}-light);
         }
         @else {
-          color: gesso-brand($faculty, 'lvl1');
+          color: var(--#{$colour}-1);
         }
       }
     }
@@ -27,41 +28,42 @@ $faculties: 'org-default', 'neutral', 'org-ahs', 'org-art', 'org-eng', 'org-env'
         &:hover,
         &:focus {
           @if $faculty == org-default {
-            background-color: $uw-gold;
+            background-color: var(--uw-gold);
 
             .uw-cta__text--big,
             .uw-cta__text--small,
             .uw-cta__text--medium {
-              color: $uw-black;
+              color: var(--uw-black);
             }
           }
 
           @else if $faculty == neutral {
-            background-color: $uw-grey;
+            background-color: var(--uw-black-3);
 
             .uw-cta__text--big {
-              color: $uw-white;
+              color: var(--uw-white);
             }
           }
 
           @else if $faculty == org-stp or $faculty == org-stj or $faculty == org-ren or $faculty == org-cgc {
-            background-color: gesso-brand($faculty, 'light');
+            background-color: var(--#{$colour}-light);
 
             .uw-cta__text--big,
             .uw-cta__text--small,
             .uw-cta__text--medium,
             a {
-              color: darken(gesso-brand($faculty, 'primary'), 5%);
+              color: var(--#{$colour}-primary);
+              filter: brightness(0.95);
             }
           }
 
           @else {
-            background-color: gesso-brand($faculty, 'lvl1');
+            background-color: var(--#{$colour}-1);
 
             .uw-cta__text--big,
             .uw-cta__text--small,
             .uw-cta__text--medium {
-              color: gesso-brand($faculty, 'lvl4');
+              color: var(--#{$colour}-4);
             }
           }
         }
@@ -92,8 +94,8 @@ $faculties: 'org-default', 'neutral', 'org-ahs', 'org-art', 'org-eng', 'org-env'
   }
 
   .uw-cta__aside {
-    background-color: $uw-black;
-    border: 1px solid #fff;
+    background-color: var(--uw-black);
+    border: var(--size-xs) solid var(--uw-white);
     flex: 1 0 100%;
 
     .layout--uw-2-col &,
@@ -103,15 +105,15 @@ $faculties: 'org-default', 'neutral', 'org-ahs', 'org-art', 'org-eng', 'org-env'
       flex: 1 0 100%;
     }
 
-    @include small {
+    @media(min-width: $screen-sm) {
       flex: 1 0 50%;
     }
 
-    @include large {
+    @media(min-width: $screen-lg) {
       flex: 1 0 30%;
     }
 
-    @include xxl {
+    @media(min-width: $screen-xxl) {
       flex: 1 0 25%;
     }
   }
@@ -125,7 +127,7 @@ $faculties: 'org-default', 'neutral', 'org-ahs', 'org-art', 'org-eng', 'org-env'
   border: 0;
   bottom: 0;
   display: block;
-  font-family: gesso-font-family(condensedbook);
+  font-family: var(--font-condensedbook);
   height: 100%;
   left: 0;
   min-height: 6.25rem;
@@ -142,39 +144,39 @@ $faculties: 'org-default', 'neutral', 'org-ahs', 'org-art', 'org-eng', 'org-env'
 }
 
 .uw-cta__text {
-  font-family: gesso-font-family(condensedbook);
+  font-family: var(--font-condensedbook);
   text-align: center;
 
   &--big {
-    font-size: rem(gesso-font-size(3));
+    font-size: var(--font-size-3);
     letter-spacing: 0.05rem;
     line-height: 1.2;
-    padding: 0 rem(gesso-spacing(xxs)) 0.313rem rem(gesso-spacing(xxs));
+    padding: 0 var(--size-05) 0.313rem var(--size-05);
   }
 
   &--medium {
-    color: $uw-white;
-    font-size: rem(gesso-font-size(0));
+    color: var(--uw-white);
+    font-size: var(--font-size-0);
     line-height: 1.2;
-    padding: 0 rem(gesso-spacing(xxs)) rem(gesso-spacing(xxs)) rem(gesso-spacing(xxs));
+    padding: 0 var(--size-05) var(--size-05) var(--size-05);
     text-transform: uppercase;
   }
 
   &--small {
-    color: $uw-white;
-    font-family: gesso-font-family(systemmedium);
-    font-size: rem(gesso-font-size(-2));
+    color: var(--uw-white);
+    font-family: var(--font-systemmedium);
+    font-size: var(--font-size-000);
     line-height: 1;
-    padding: 0 rem(gesso-spacing(xxs)) rem(gesso-spacing(xxs)) rem(gesso-spacing(xxs));
+    padding: 0 var(--size-05) var(--size-05) var(--size-05);
     text-transform: uppercase;
   }
 }
 
-@each $faculty in $faculties {
+@each $faculty, $colour in $faculties_colours {
 
-  .call-to-action-theme-#{$faculty}{
+  .call-to-action-theme-#{$faculty} {
     display: table-cell;
-    margin: 1px;
+    margin: var(--size-xs);
     vertical-align: middle;
   }
 }

src/patterns/04-components/call-to-action/call-to-action.yml

+ctas:
+  -
+    link: '#'
+    details:
+      -
+        text: 'Small Text Here '
+        type: 'small'
+
+      - text: 'UW WIDE MESSAGE'
+        type: 'big'
+    theme: 'org-default'
+  -
+    link: '#'
+    details:
+      - text: 'Faculty of'
+        type: 'small'
+
+      - text: 'Health'
+        type: 'big'
+    theme: 'org-ahs'
+  -
+    link: '#'
+    details:
+      - text: 'Faculty of'
+        type: 'medium'
+
+      - text: 'Engineering'
+        type: 'big'
+    theme: 'org-eng'
+  - link: '#'
+    details:
+      - text: 'Faculty of'
+        type: 'medium'
+
+      - text: 'Environment'
+        type: 'big'
+    theme: 'org-env'
+  - link: '#'
+    details:
+      - text: 'Faculty of'
+        type: 'small'
+
+      - text: 'Science'
+        type: 'big'
+    theme: 'org-sci'