ISTWCMS-5724: adding instagram

src/patterns/04-components/_index.scss

@@ -19,6 +19,7 @@
 @forward 'facts-and-figures/facts-and-figures';
 @forward 'filters/filters';
 @forward 'google_maps/google_maps';
+@forward 'instagram/instagram';
 @forward 'icon/icon';
 @forward 'icon/icon--button/icon--button';
 @forward 'image/image';

src/patterns/04-components/instagram/_instagram.scss

+@use '../../01-core' as *;
+
+.uw-instagram {
+  display: block;
+  width: 100%;
+
+  &__wrapper {
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 500px;
+
+    iframe {
+      max-width: 500px;
+      width: 100%;
+    }
+  }
+
+  &__view-on-source {
+    padding: var(--size-2) 0;
+    text-align: center;
+  }
+}

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

+<div class="uw-instagram">
+  <div class="uw-instagram__wrapper">
+    <blockquote class="instagram-media" data-instgrm-captioned data-instgrm-permalink="{{ instagram.url }}" data-instgrm-version="12" style="max-width: 500px;"></blockquote>
+    <script async src="https://www.instagram.com/embed.js"></script>
+  </div>
+  <div class="uw-instagram__view-on-source">
+    <a href="{{ instagram.url }}">View on Instagram</a>
+  </div>
+</div>

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

+instagram:
+  url: 'https://www.instagram.com/p/B-pEhkon9tX'