ISTWCMS-5724: adding facebook

src/patterns/04-components/_index.scss

@@ -15,6 +15,7 @@
 @forward 'copy-text/copy-text';
 @forward 'date/date';
 @forward 'exp_col_block/exp_col_block';
+@forward 'facebook/facebook';
 @forward 'facts-and-figures/facts-and-figures';
 @forward 'filters/filters';
 @forward 'icon/icon';

src/patterns/04-components/facebook/_facebook.scss

+.uw-facebook {
+  display: grid;
+  padding: var(--size-2) 0;
+  width: 100%;
+
+  &__wrapper {
+    border: var(--size-xs) solid var(--uw-black);
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 500px;
+    text-align: center;
+    width: 100%;
+  }
+
+  &__view-on-source {
+    padding: var(--size-2) 0;
+    text-align: center;
+  }
+
+  .fb-post,
+  .fb-page {
+    background: url('../../images/facebook_logo.png') no-repeat;
+    background-position: 50% 25%;
+    min-height: 340px;
+    text-align: center;
+    width: 100%;
+  }
+}

src/patterns/04-components/facebook/facebook.twig

+<div class="uw-facebook">
+  <div class="uw-facebook__wrapper">
+    {% if feed_type == 'timeline' %}
+      <div class="fb-page"
+           data-href="https://www.facebook.com/{{ username }}"
+           data-tabs="timeline"
+           data-width="500"
+           data-hide-cover="false"
+           data-show-facepile="false"
+           adapt_container_width="true">
+      </div>
+    {% else %}
+      <div class="fb-post"
+         data-href="{{ url }}"
+         data-width="500">
+      </div>
+    {% endif %}
+    <script src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"></script>
+  </div>
+  <div class="uw-facebook__view-on-source">
+    {% if feed_type == 'timeline' %}
+      <a href="https://facebook.com/{{ username }}">View on Facebook</a>
+    {% else %}
+      <a href="{{ url }}">View on Facebook</a>
+    {% endif %}
+  </div>
+</div>

src/patterns/04-components/facebook/facebook.yml

+feed_type: 'singlepost'
+url: 'https://www.facebook.com/university.waterloo/photos/a.413434815757/10158092685535758/?type=3&__xts__%5B0%5D=68.ARBMF_TWIqmabPEvgm2lDS_9tdueCSGzKC0hHLKDklHAINNO6G3UjO8uhvXt-UW3biG9j5pQwbI0CW7LbTCj2gixcH7f_uKe3-AlkAarFGkYYFfMfHNHUFs4UX_oCgir9oyKSBvyA7E8M3r1sf-wW8XyMVZ0ch9EYbfuChTQgXP0GfvcAs-jYZgmZu-2ohe5CpzrHCwHLxGun-_sa4uBm0SZ7aoPqmAqI8PmhEReeeDWD6Qm46wOFj0Bah0UFIxwQeKjhQ_rk_i4ijgfV3FiarIHb-Ns8jdkYdJ0eTUuF1Qr36iBUPkd6PIOVX03d_YCbNbkycOKY41Qkho&__tn__=-R'
+include_text_video: 'true'
+username: 'university.waterloo'
+display_name: 'UW'