ISTWCMS-5724: adding twitter

src/patterns/04-components/_index.scss

@@ -48,6 +48,7 @@
 @forward 'tag/tag';
 @forward 'tag-list/tag-list';
 @forward 'territorial-statement/territorial-statement';
+@forward 'twitter/twitter';
 @forward 'view/view';
 @forward 'view/view-content/view-content';
 @forward 'view/view-filter/view-filter';

src/patterns/04-components/twitter/_twitter.scss

+@use '../../01-core' as *;
+
+.uw-twitter {
+  &__wrapper {
+    margin-left: auto;
+    margin-right: auto;
+    text-align: center;
+  }
+
+  &__view-on-source {
+    padding: var(--size-2) 0;
+    text-align: center;
+  }
+}

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

+{% if feed_type == 'faves' %}
+  {% set twitter_href = 'https://twitter.com/' ~ username ~ '/favorites' %}
+  {% set twitter_link = 'Favourite tweets by @' ~ username %}
+{% elseif feed_type == 'profile' %}
+  {% set twitter_href = 'https://twitter.com/' ~ username %}
+  {% set twitter_link = 'Tweets by @' ~ username %}
+{% elseif feed_type == 'list' %}
+  {% set twitter_href = 'https://twitter.com/' ~ username ~ '/lists/' ~ list_name %}
+  {% set twitter_link = 'Tweets by @' ~ username ~ '/' ~ list_name %}
+{% elseif feed_type == 'timeline' %}
+  {% set twitter_href = 'https://twitter.com/' ~ url_fragment %}
+  {% set twitter_link = 'Tweets by @' ~ username ~ '/' ~ timeline_name %}
+{% elseif feed_type == 'moment' %}
+  {% set twitter_href = 'https://twitter.com/' ~ url_fragment %}
+  {% set twitter_link = 'Moment by @' ~ username %}
+{% endif %}
+
+<div class="uw-twitter">
+  <div class="uw-twitter__wrapper">
+
+    {% if feed_type == 'embed-tweet' %}
+      <blockquote class="twitter-tweet" data-dnt="true"><a href="https://twitter.com/{{ tweet_code }}">Read individual Tweet on Twitter</a></blockquote>
+      <div class="uw-twitter__view-on-source">
+        <a href="https://twitter.com/{{ tweet_code }}">View on Twitter</a>
+      </div>
+    {% else %}
+      <div
+        class="twitter"
+        data-listname="{{ list_name }}"
+        data-timeline=""
+        data-tweet=""
+        data-type="{{ feed_type }}"
+        data-url="{{ url_fragment }}"
+        data-username="{{ username }}">
+          <a class="twitter-{{ (feed_type == 'moment') ? 'moment' : 'timeline' }}" href="{{ twitter_href }}" data-theme="light" data-link-color="#light" data-height="650" data-dnt="true">{{ twitter_link }}</a>
+      </div>
+      <div class="uw-twitter__view-on-source">
+        <a href="{{ twitter_href }}">View on Twitter</a>
+      </div>
+    {% endif %}
+
+    <script src="https://platform.twitter.com/widgets.js"></script>
+
+  </div>
+</div>

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

+feed_type: profile
+username: UWaterloo
+list_name: test