date stacked component initial commit (#373)

* date stacked component initial commit

* CC FIXUP

* CC FIXUP

* clean up

* updated default styles for component based on new design

* no bg variant

* styleguide responsiveness

* max width and BEM FIXUP

* incorporate time tag

* Update date-stacked.twig

* fixup! color maps

* fixup! build.

* Update date-stacked.twig

core/src/scss/components/date-stacked/_date-stacked--no-background.scss

@@ -0,0 +1,11 @@
+@charset "UTF-8";
+
+//
+// Date Stacked No Background
+//
+
+.su-date-stacked--no-background {
+  @include padding(0);
+  background: none;
+  color: color(text--high-contrast);
+}

core/src/scss/components/date-stacked/_date-stacked.scss

@@ -0,0 +1,39 @@
+@charset "UTF-8";
+
+//
+// Date Stacked
+//
+// Abbreviated month stacked on top of numerical day of the month.
+//
+// .su-date-stacked--no-background - Black type on transparent background
+//
+// Markup: ../templates/components/date-stacked/date-stacked.twig
+//
+// Style guide: Components.Date Stacked
+//
+.su-date-stacked {
+  @include modular-spacing('padding', 0);
+  background: color(bg--reverse);
+  color: color(text--reverse);
+  max-width: 87px;
+  text-align: center;
+
+  @include grid-media-only('md') {
+    max-width: 101px;
+  }
+
+  @include grid-media-only('2xl') {
+    max-width: 105px;
+  }
+
+  .su-date-stacked__month {
+    @include big-paragraph;
+    display: block;
+  }
+
+  .su-date-stacked__day {
+    @include types;
+    @include type-b;
+    display: block;
+  }
+}

core/src/scss/components/date-stacked/index.scss

@@ -0,0 +1,9 @@
+@charset "UTF-8";
+
+///
+/// ROLL UP
+///
+
+@import
+'date-stacked',
+'date-stacked--no-background';

core/src/scss/components/index.scss

@@ -12,6 +12,7 @@
 'button/index',
 'card/index',
 'cta/index',
+'date-stacked/index',
 'global-footer/index',
 'hero/index',
 'link/index',

core/src/templates/components/date-stacked/date-stacked.json

@@ -0,0 +1,4 @@
+{
+  "month_of_year": "Oct",
+  "day_of_month": "31"
+}

core/src/templates/components/date-stacked/date-stacked.twig

@@ -0,0 +1,25 @@
+{#
+/**
+ * @file
+ * Date Stacked Component.
+ *
+ * Abbreviated month stacked on top of numerical day of the month.
+ *
+ * Available variables:
+ * - attributes: For additional HTML attributes not already provided.
+ * - modifier_class: Additional css classes to change look and behaviour.
+ * - month_of_year: The abbreviated month of the year.
+ * - day_of_month: The day of the month in digit form.
+ */
+#}
+
+<div{{ attributes }} class="su-date-stacked {{ modifier_class }}">
+  {% if month_of_year is not empty %}
+    <span class="su-date-stacked__month">{{ month_of_year }}</span>
+  {% endif %}
+
+  {% if day_of_month is not empty %}
+    <span class="su-date-stacked__day">{{ day_of_month }}</span>
+  {% endif %}
+
+</div>