EM-1784: Jobs Buy Box Value Plans

package.json

@@ -1,6 +1,6 @@
 {
   "name": "employer-style-base",
-  "version": "2.2.26",
+  "version": "2.2.26-alpha.0",
   "author": "[email protected]",
   "license": "Apache-2.0",
   "description": "A stack-agnostic Sass library providing basic components and typography intended for the Employer experience",

sass/_base.scss

@@ -23,6 +23,7 @@
 @import "directives/02_base_components/groups";
 @import "directives/02_base_components/headings/headings";
 @import "directives/02_base_components/pagination";
+@import "directives/02_base_components/price_per_time/price_per_time";
 @import "directives/02_base_components/modals";
 @import "directives/02_base_components/tabs";
 @import "directives/02_base_components/toggles";
@@ -66,6 +67,7 @@
 @import "selectors/media";
 @import "selectors/modals";
 @import "selectors/navigation";
+@import "selectors/price_per_time";
 @import "selectors/read_more";
 @import "selectors/speech_bubble";
 @import "selectors/tables";

sass/directives/02_base_components/boxes/_boxes.scss

@@ -15,11 +15,18 @@
   }
 
   p {
-    color: $text-color-grey;
+    // color: $text-color-grey;
     font-size: $font-size-small;
   }
 }
 
+// Call to action box with gradient background and text
+@mixin cta-box($gradient: $cb) {
+  border-radius: $minor-border-radius;
+  padding: $base-spacing-medium;
+  @include gradient(map-get($gradient, dark), map-get($gradient, medium), map-get($gradient, light));
+}
+
 // Ecom Table Boxes
 @mixin ecom_table-item {
   border-bottom: $base-border;

sass/directives/02_base_components/boxes/boxes.hbs

@@ -1,6 +1,9 @@
 <h2>Component Box</h2>
 <div class="component-box" style="width: 300px; height: 500px">A component box</div>
 
+<h2>CTA Box</h2>
+<div class="cta-box" style="width: 300px; height: 500px">A cta box</div>
+
 <h2>Item Bar List</h2>
 <ul class="item-bar__list">
   <li class="item-bar__list-item">List Item 1</li>

sass/directives/02_base_components/price_per_time/README.md

@@ -0,0 +1 @@
+Styles a price per time, e.g. "$100/month"

sass/directives/02_base_components/price_per_time/_price_per_time.scss

@@ -0,0 +1,17 @@
+@mixin price-per-time {
+  &--currency {
+    font-size: 0.9375rem;
+    vertical-align: super;
+  }
+
+  &--amount {
+    font-weight: $font-weight-regular;
+    font-size: 1.875rem;
+  }
+
+  &--time {
+    font-weight: $font-weight-regular;
+    font-size: $font-size-small;
+    text-transform: lowercase;
+  }
+}

sass/directives/02_base_components/price_per_time/price_per_time.hbs

@@ -0,0 +1,6 @@
+<div class="price-per-time">
+  <span class="price-per-time--amount">
+    <span class="price-per-time--currency">$</span>299
+  </span>
+  <span class="price-per-time--time">/ month</span>
+</div>

sass/selectors/_boxes.scss

@@ -6,6 +6,10 @@
   @include sticky-box;
 }
 
+.cta-box {
+  @include cta-box;
+}
+
 .item-bar__list {
   @include item-bar__list;
 }

sass/selectors/_price_per_time.scss

@@ -0,0 +1,3 @@
+.price-per-time {
+  @include price-per-time;
+}