From 7f38df569cf19a8b5754942b45962a10319ccac8 Mon Sep 17 00:00:00 2001
From: Eric Bremner <ebremner@uwaterloo.ca>
Date: Thu, 4 Aug 2022 10:35:52 -0400
Subject: [PATCH] ISTWCMS-5724: adding instagram
---
src/patterns/04-components/_index.scss | 1 +
.../04-components/instagram/_instagram.scss | 22 +++++++++++++++++++
.../04-components/instagram/instagram.md | 0
.../04-components/instagram/instagram.twig | 9 ++++++++
.../04-components/instagram/instagram.yml | 2 ++
5 files changed, 34 insertions(+)
create mode 100644 src/patterns/04-components/instagram/_instagram.scss
create mode 100644 src/patterns/04-components/instagram/instagram.md
create mode 100644 src/patterns/04-components/instagram/instagram.twig
create mode 100644 src/patterns/04-components/instagram/instagram.yml
diff --git a/src/patterns/04-components/_index.scss b/src/patterns/04-components/_index.scss
index a4b1fbd8..707aa0a4 100644
--- a/src/patterns/04-components/_index.scss
+++ b/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';
diff --git a/src/patterns/04-components/instagram/_instagram.scss b/src/patterns/04-components/instagram/_instagram.scss
new file mode 100644
index 00000000..8545f139
--- /dev/null
+++ b/src/patterns/04-components/instagram/_instagram.scss
@@ -0,0 +1,22 @@
+@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;
+ }
+}
diff --git a/src/patterns/04-components/instagram/instagram.md b/src/patterns/04-components/instagram/instagram.md
new file mode 100644
index 00000000..e69de29b
diff --git a/src/patterns/04-components/instagram/instagram.twig b/src/patterns/04-components/instagram/instagram.twig
new file mode 100644
index 00000000..52dbb6d3
--- /dev/null
+++ b/src/patterns/04-components/instagram/instagram.twig
@@ -0,0 +1,9 @@
+<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>
diff --git a/src/patterns/04-components/instagram/instagram.yml b/src/patterns/04-components/instagram/instagram.yml
new file mode 100644
index 00000000..dcfbc8ee
--- /dev/null
+++ b/src/patterns/04-components/instagram/instagram.yml
@@ -0,0 +1,2 @@
+instagram:
+ url: 'https://www.instagram.com/p/B-pEhkon9tX'
--
GitLab