v2.21.0 - Added c-cuisinesCollage. (#83)

* v2.21.0 - Added c-cuisinesCollage.

* v2.21.0 - Formatted document.

* v2.21.0 - Locking fozzie's dependency.

CHANGELOG.md

@@ -4,6 +4,16 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 
+v2.21.0
+------------------------------
+*June 19, 2019*
+
+### Added
+- `c-cuisinesCollage` component
+
+### Changed
+- `fozzie` module version update
+
 v2.20.0
 ------------------------------
 *June 14, 2019*

assets/src/scss/_dependencies.scss

@@ -39,6 +39,7 @@ $font-path: '/assets/fonts';
 @include rating();
 @include toast();
 @include cuisinesWidget();
+@include cuisinesCollage();
 @include appsBanner();
 @include cookieWarning();
 @include overflowCarousel();

docs/src/templates/includes/components/core/je-cuisinesCollage.hbs

@@ -0,0 +1,76 @@
+<div class="c-cuisinesCollage l-innerContainer--verticalSpacing u-text-centre">
+    <h2 class="u-text-centre u-spacingBottom alpha">
+        Great local takeaways
+    </h2>
+    <p class="u-text-centre u-noSpacing">
+        Order for delivery or collection from the best selection of independent restaurants
+    </p>
+    <div class="c-cuisinesCollage-items u-spacingTop--large">
+        <div class="c-cuisinesCollage-item">
+            <button class="o-btn o-btnLink">
+                <picture>
+                    <source
+                        media="(min-width: 415px)" srcset="/assets/img/examples/collage/burger-wide_1x.jpg 1x,
+                        /assets/img/examples/collage/burger-wide_2x.jpg 2x">
+                    <source srcset="/assets/img/examples/collage/burger-narrow_1x.jpg 1x,
+                        /assets/img/examples/collage/burger-narrow_2x.jpg 2x">
+                    <img                        src="/assets/img/examples/collage/burger-wide_1x.jpg" alt="Search for burger restaurants">
+                </picture>
+            </button>
+        </div>
+        <div class="c-cuisinesCollage-item">
+            <button class="o-btn o-btnLink">
+                <picture>
+                    <source media="(min-width: 415px)" srcset="/assets/img/examples/collage/curry-wide_1x.jpg 1x,
+                        /assets/img/examples/collage/curry-wide_2x.jpg 2x">
+                    <source srcset="/assets/img/examples/collage/curry-narrow_1x.jpg 1x,
+                        /assets/img/examples/collage/curry-narrow_2x.jpg 2x">
+                    <img src="/assets/img/examples/collage/curry-wide_1x.jpg" alt="Search for curry restaurants">
+                </picture>
+            </button>
+            <button class="o-btn o-btnLink">
+                <picture>
+                    <source media="(min-width: 415px)" srcset="/assets/img/examples/collage/salad-wide_1x.jpg 1x,
+                        /assets/img/examples/collage/salad-wide_2x.jpg 2x">
+                    <source srcset="/assets/img/examples/collage/salad-narrow_1x.jpg 1x,
+                        /assets/img/examples/collage/salad-narrow_2x.jpg 2x">
+                    <img src="/assets/img/examples/collage/salad-wide_1x.jpg" alt="Search for salad restaurants">
+                </picture>
+            </button>
+        </div>
+        <div class="c-cuisinesCollage-item">
+            <button class="o-btn o-btnLink">
+                <picture>
+                    <source media="(min-width: 415px)" srcset="/assets/img/examples/collage/pasta-wide_1x.jpg 1x,
+                        /assets/img/examples/collage/pasta-wide_2x.jpg 2x">
+                    <source srcset="/assets/img/examples/collage/pasta-narrow_1x.jpg 1x,
+                        /assets/img/examples/collage/pasta-narrow_2x.jpg 2x">
+                    <img src="/assets/img/examples/collage/pasta-wide_1x.jpg" alt="Search for pasta restaurants">
+                </picture>
+            </button>
+        </div>
+        <div class="c-cuisinesCollage-item">
+            <button class="o-btn o-btnLink">
+                <picture>
+                    <source media="(min-width: 415px)" srcset="/assets/img/examples/collage/pizza-wide_1x.jpg 1x,
+                        /assets/img/examples/collage/pizza-wide_2x.jpg 2x">
+                    <source srcset="/assets/img/examples/collage/pizza-narrow_1x.jpg 1x,
+                        /assets/img/examples/collage/pizza-narrow_2x.jpg 2x">
+                    <img src="/assets/img/examples/collage/pizza-wide_1x.jpg" alt="Search for pizza restaurants">
+                </picture>
+            </button>
+            <button class="o-btn o-btnLink">
+                <picture>
+                    <source media="(min-width: 415px)" srcset="/assets/img/examples/collage/sushi-wide_1x.jpg 1x,
+                        /assets/img/examples/collage/sushi-wide_2x.jpg 2x">
+                    <source srcset="/assets/img/examples/collage/sushi-narrow_1x.jpg 1x,
+                        /assets/img/examples/collage/sushi-narrow_2x.jpg 2x">
+                    <img src="/assets/img/examples/collage/sushi-wide_1x.jpg" alt="Search for sushi restaurants">
+                </picture>
+            </button>
+        </div>
+    </div>
+    <button class="o-btn o-btn--secondary c-cuisinesCollage-btn" @click="cuisineClick">
+    Find a restaurant
+    </button>
+</div>

docs/src/templates/pages/styleguide/ui-components/cuisines-collage.hbs

@@ -0,0 +1,24 @@
+---
+title: Cuisines Collage
+section-title: UI Components
+docs: true
+
+navgroup: styleguide
+navsub: ui-components
+navactive: cuisines-collage
+layout: components
+---
+
+<p><em>The <code>c-cuisinesCollage</code> component is an optional mixin within Fozzie — if you'd like to use it in your project you can include it by adding <code>@include cuisinesCollage();</code> into your SCSS dependencies file.</em></p>
+
+<h2 class="sg-sectionHeading">Cuisines Collage</h2>
+<p>Styles look a little bit broken here because of fixed width container. In future full width block will be avaliable in UI templates page.</p>
+
+{{#>demo-block demoVisualCssClass="demo-visual--spacingTopAndBottom"}}
+<div class="l-container">
+<div class="c-cuisinesGrid c-cuisinesGrid--gridOfThree">
+{{> je-cuisinesCollage }}
+</div>
+</div>
+
+{{/demo-block }}

docs/src/templates/pages/styleguide/ui-components/index.hbs

@@ -43,6 +43,7 @@ Note. Only components that are part of the global platform should be added to th
 - [Headers](headers/)
 - [Footers](footers/)
 - [Cuisines Widget](cuisines-widget)
+- [Cuisines Collage](cuisines-collage)
 - [Apps Banner](apps-banner)
 - [Order Card](order-card)
         {{/markdown}}

package.json

@@ -2,7 +2,7 @@
   "name": "je-global-component-library",
   "title": "Just Eat – Component Library",
   "description": "Component Library and Guidelines for all of Just Eat’s Front-End Platforms",
-  "version": "2.20.0",
+  "version": "2.21.0",
   "homepage": "https://github.com/justeat/global-component-library",
   "contributors": [
     "Github contributors <https://github.com/justeat/global-component-library/graphs/contributors>"
@@ -26,7 +26,7 @@
     "@justeat/f-toggle": "1.1.0",
     "@justeat/f-utilities": "0.8.2",
     "@justeat/f-validate": "1.4.0",
-    "@justeat/fozzie": "1.54.0",
+    "@justeat/fozzie": "1.56.0",
     "bezier-easing": "2.1.0",
     "kickoff-grid.css": "1.2.0",
     "lite-ready": "1.0.4",

yarn.lock

@@ -1011,10 +1011,10 @@
     kickoff-grid.css "1.2.0"
     normalize-scss "7.0.1"
 
-"@justeat/fozzie@1.54.0":
-  version "1.54.0"
-  resolved "https://registry.yarnpkg.com/@justeat/fozzie/-/fozzie-1.54.0.tgz#287f8231cdae40f42aa7c72e371556708b825e74"
-  integrity sha512-yeOJOagTf0OL30gXA5hsCo9BYuZHY78l2jVo3t7btfSxTX565ycLJ49pv9thwDbOXGxBJqo9BVTP3okETzQObw==
+"@justeat/fozzie@^1.56.0":
+  version "1.56.0"
+  resolved "https://registry.yarnpkg.com/@justeat/fozzie/-/fozzie-1.56.0.tgz#e0169ca108a4df012b30541128c6a94a588aadd4"
+  integrity sha512-TTdTRIsrJswt3mV0jTvvjNHSy+yjVuVosvgRzWshjqzc+et14VQxveVm3IkgHmUHiRpTFI+m9mjghDkB6iycQA==
   dependencies:
     "@justeat/f-dom" "1.1.0"
     "@justeat/f-logger" "0.7.1"
@@ -1975,13 +1975,13 @@ aws4@^1.8.0:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.8.0.tgz#f0e003d9ca9e7f59c7a508945d7b2ef9a04a542f"
 
-axios@0.18.1:
-  version "0.18.1"
-  resolved "https://registry.yarnpkg.com/axios/-/axios-0.18.1.tgz#ff3f0de2e7b5d180e757ad98000f1081b87bcea3"
-  integrity sha512-0BfJq4NSfQXd+SkFdrvFbG7addhYSBA2mQwISr46pD6E5iqkWg02RAs8vyTT/j0RTnoYmeXauBuSv1qKwR179g==
+axios@0.17.1:
+  version "0.17.1"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.17.1.tgz#2d8e3e5d0bdbd7327f91bc814f5c57660f81824d"
+  integrity sha1-LY4+XQvb1zJ/kbyBT1xXZg+Bgk0=
   dependencies:
-    follow-redirects "1.5.10"
-    is-buffer "^2.0.2"
+    follow-redirects "^1.2.5"
+    is-buffer "^1.1.5"
 
 babel-code-frame@^6.26.0:
   version "6.26.0"
@@ -3963,13 +3963,13 @@ debug@2, [email protected], debug@^2.1.2, debug@^2.2.0, debug@^2.3.3, debug@^2.4.1, de
   dependencies:
     ms "2.0.0"
 
-[email protected], debug@=3.1.0, debug@~3.1.0:
+[email protected], debug@~3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
   dependencies:
     ms "2.0.0"
 
-[email protected], debug@^3.1.0:
+[email protected], debug@^3.1.0, debug@^3.2.6:
   version "3.2.6"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b"
   dependencies:
@@ -5436,12 +5436,12 @@ [email protected]:
     debug "^2.2.0"
     stream-consume "^0.1.0"
 
-follow-redirects@1.5.10:
-  version "1.5.10"
-  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.5.10.tgz#7b7a9f9aea2fdff36786a94ff643ed07f4ff5e2a"
-  integrity sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==
+follow-redirects@^1.2.5:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.7.0.tgz#489ebc198dc0e7f64167bd23b03c4c19b5784c76"
+  integrity sha512-m/pZQy4Gj287eNy94nivy5wchN3Kp+Q5WgUPNy5lJSZ3sgkVKSYV/ZChMAQVIgx1SqfZ2zBZtPA2YlXIWxxJOQ==
   dependencies:
-    debug "=3.1.0"
+    debug "^3.2.6"
 
 fontfaceobserver@^2.0.13:
   version "2.1.0"
@@ -7047,11 +7047,6 @@ is-buffer@^1.0.2, is-buffer@^1.1.0, is-buffer@^1.1.4, is-buffer@^1.1.5:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
 
-is-buffer@^2.0.2:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-2.0.3.tgz#4ecf3fcf749cbd1e472689e109ac66261a25e725"
-  integrity sha512-U15Q7MXTuZlrbymiz95PJpZxu8IlipAp4dtS3wOdgPXx3mqBnslrWU14kxfHB+Py/+2PVKSr37dMAgM2A4uArw==
-
 is-builtin-module@^1.0.0:
   version "1.0.0"
   resolved "http://registry.npmjs.org/is-builtin-module/-/is-builtin-module-1.0.0.tgz#540572d34f7ac3119f8f76c30cbc1b1e037affbe"