diff --git a/src/patterns/04-components/_index.scss b/src/patterns/04-components/_index.scss index a8ba1a6f13dff3f3da2b8e412d3a237bd4201965..a4b1fbd8c4e7c789976fdc450aa6c61732e5a4c2 100644 --- a/src/patterns/04-components/_index.scss +++ b/src/patterns/04-components/_index.scss @@ -18,6 +18,7 @@ @forward 'facebook/facebook'; @forward 'facts-and-figures/facts-and-figures'; @forward 'filters/filters'; +@forward 'google_maps/google_maps'; @forward 'icon/icon'; @forward 'icon/icon--button/icon--button'; @forward 'image/image'; diff --git a/src/patterns/04-components/google_maps/_google_maps.scss b/src/patterns/04-components/google_maps/_google_maps.scss new file mode 100644 index 0000000000000000000000000000000000000000..e92a750514c2485476454121c4005fefba8ba217 --- /dev/null +++ b/src/patterns/04-components/google_maps/_google_maps.scss @@ -0,0 +1,9 @@ +.uw-google-maps > iframe { + width: 100%; +} + +.js .uw-google-maps { + &__message { + display: none; + } +} diff --git a/src/patterns/04-components/google_maps/google_maps.twig b/src/patterns/04-components/google_maps/google_maps.twig new file mode 100644 index 0000000000000000000000000000000000000000..a7d1369d602867afe282df28bef36dd8728f4454 --- /dev/null +++ b/src/patterns/04-components/google_maps/google_maps.twig @@ -0,0 +1,4 @@ +<div class="uw-google-maps"> + <div class="uw-google-maps__message">Enable JavaScript to view map.</div> + <iframe src="{{ url }}" height="{{ height }}" allowfullscreen loading="lazy"></iframe> +</div> diff --git a/src/patterns/04-components/google_maps/google_maps.yml b/src/patterns/04-components/google_maps/google_maps.yml new file mode 100644 index 0000000000000000000000000000000000000000..12b85e2d16887cbf40f724f1dcec42b253db0c65 --- /dev/null +++ b/src/patterns/04-components/google_maps/google_maps.yml @@ -0,0 +1,3 @@ +type: 'Google Maps' +url: 'https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d2895.384940217044!2d-80.5453043!3d43.4734364!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x882bf6ad02edccff%3A0xdd9df23996268e17!2sUniversity%20of%20Waterloo!5e0!3m2!1sen!2sca!4v1616442681100!5m2!1sen!2sca' +height: 400