Create demos for nature components

package.json

@@ -46,7 +46,7 @@
     "@babel/preset-env": "^7.6.3",
     "@babel/runtime": "^7.6.3",
     "@springernature/eslint-config": "^4.0.1",
-    "@springernature/frontend-package-manager": "^8.0.0",
+    "@springernature/frontend-package-manager": "^8.1.0",
     "@springernature/sasslint-config": "^1.2.1",
     "@springernature/util-eslint-runner": "^0.0.3",
     "@springernature/util-sass-compiler": "^0.1.0",

toolkits/nature/packages/nature-footer/README.md

@@ -1,44 +1,36 @@
 # Nature Footer
 
+[![NPM version][badge-npm]][info-npm]
+
 Nature branded site footer
 
+## Installation
+
+To use the footer component, enter the following command in your Terminal:
+
+```
+npm install @springernature/nature-footer
 ```
-<div class="c-footer">
-    <div class="u-container">
-        <div class="u-hide-print" data-track-component="footer">
-            <h2 aria-level="2" class="u-visually-hidden">brand sitemap</h2>
-            <div class="c-footer__header">
-                <div class="c-footer__logo">
-                    <img alt="Nature Research" src="path/to/logo.svg" loading="lazy" width="200" height="26">
-                </div>
-                <ul class="c-menu c-menu--inherit u-mr-32">
-                    <li class="c-menu__item"><a class="c-menu__link" href="https://www.nature.com/npg_/company_info/index.html" data-track="click" data-track-action="about us" data-track-label="link">About us</a></li>
-                    <!-- this attribute can be repeated -->
-                </ul>
-                <ul class="c-menu c-menu--inherit">
-                    <li class="c-menu__item">
-                        <a class="c-menu__link" href="https://www.facebook.com/nature/" aria-label="Nature on Facebook" data-track="click" data-track-action="facebook" data-track-label="link">
-                            <svg class="u-icon u-mt-2 u-mb-2" role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 20 20"><path d="M2.5 20C1.1 20 0 18.9 0 17.5v-15C0 1.1 1.1 0 2.5 0h15C18.9 0 20 1.1 20 2.5v15c0 1.4-1.1 2.5-2.5 2.5h-3.7v-7.7h2.6l.4-3h-3v-2c0-.9.2-1.5 1.5-1.5h1.6V3.1c-.3 0-1.2-.1-2.3-.1-2.3 0-3.9 1.4-3.9 4v2.2H8.1v3h2.6V20H2.5z"></path></svg>
-                        </a>
-                    </li>
-                    <!-- this attribute can be repeated -->
-                </ul>
-            </div>
-
-            <div class="c-footer__grid">
-                <div class="c-footer__group">
-                    <h3 class="c-footer__heading">Discover content</h3>
-                    <ul class="c-footer__list">
-                        <li class="c-footer__item"><a href="https://www.nature.com/siteindex" data-track="click" data-track-action="journals a-z" data-track-label="link">Journals A-Z</a></li>
-                        <li class="c-footer__item"><a href="https://www.nature.com/subjects/" data-track="click" data-track-action="article by subject" data-track-label="link">Articles by subject</a></li>
-                        <li class="c-footer__item"><a href="https://nano.nature.com/" data-track="click" data-track-action="nano" data-track-label="link">Nano</a></li>
-                        <li class="c-footer__item"><a href="https://www.nature.com/protocolexchange/" data-track="click" data-track-action="protocol exchange" data-track-label="link">Protocol Exchange</a></li>
-                        <li class="c-footer__item"><a href="https://www.natureindex.com/" data-track="click" data-track-action="nature index" data-track-label="link">Nature Index</a></li>
-                    </ul>
-                </div>
-                <!-- this attribute can be repeated -->
-            </div>
-        </div>
-    </div>
-</div>
-```
+
+## Usage
+
+Import the installed component code in your `scss` file:
+
+```scss
+@import '@springernature/nature-footer/scss/10-settings/footer';
+@import '@springernature/nature-footer/scss/50-components/footer';
+
+@import '@springernature/brand-context/default/scss/60-utilities/container.scss';
+@import '@springernature/brand-context/default/scss/60-utilities/hiding.scss';
+@import '@springernature/brand-context/default/scss/60-utilities/icons.scss';
+@import '@springernature/brand-context/default/scss/60-utilities/spacing.scss';
+```
+
+> **NOTE** The component require the use of the utility classes shown above
+
+## Template
+
+A configurable template can found in the [`view` folder](./view/footer.hbs). Example usage can be found in the `demo` folder.
+
+[info-npm]: https://www.npmjs.com/package/@springernature/nature-footer
+[badge-npm]: https://img.shields.io/npm/v/@springernature/nature-footer.svg

toolkits/nature/packages/nature-footer/demo/context.json

@@ -0,0 +1,131 @@
+{
+  "logo": {
+    "name": "nature-portfolio",
+    "width": "200",
+    "height": "31"
+  },
+  "title": "brand sitemap",
+  "footerLinks": [
+    {
+      "uri": "https://www.nature.com/npg_/company_info/index.html",
+      "text": "About us",
+      "dataTrackAction": "about us"
+    },
+    {
+      "uri": "https://www.nature.com/npg_/press_room/press_releases.html",
+      "text": "Press releases",
+      "dataTrackAction": "press releases"
+    },
+    {
+      "uri": "https://press.nature.com/",
+      "text": "Press office",
+      "dataTrackAction": "press office"
+    },
+    {
+      "uri": "https://support.nature.com/support/home",
+      "text": "Contact us",
+      "dataTrackAction": "contact us"
+    }
+  ],
+  "footerGroups": [
+    {
+      "title": "Discover content",
+      "items": [
+        {
+          "uri": "https://www.nature.com/siteindex",
+          "text": "Journals A-Z",
+          "dataTrackAction": "journals a-z"
+        },
+        {
+          "uri": "https://www.nature.com/subjects/",
+          "text": "Articles by subject",
+          "dataTrackAction": "article by subject"
+        },
+        {
+          "uri": "https://nano.nature.com/",
+          "text": "Nano",
+          "dataTrackAction": "nano"
+        },
+        {
+          "uri": "https://www.nature.com/protocolexchange/",
+          "text": "Protocol Exchange",
+          "dataTrackAction": "protocol exchange"
+        },
+        {
+          "uri": "https://www.natureindex.com/",
+          "text": "Nature Index",
+          "dataTrackAction": "nature index"
+        }
+      ]
+    },
+    {
+      "title": "Publishing policies",
+      "items": [
+        {
+          "uri": "https://www.nature.com/authors/editorial_policies/",
+          "text": "Nature portfolio policies",
+          "dataTrackAction": "nature portfolio policies"
+        },
+        {
+          "uri": "https://www.nature.com/nature-research/open-access",
+          "text": "Open access",
+          "dataTrackAction": "open access"
+        }
+      ]
+    },
+    {
+      "title": "Author & Researcher services",
+      "items": [
+        {
+          "uri": "https://www.nature.com/reprints/",
+          "text": "Reprints & permissions",
+          "dataTrackAction": "reprints and permissions"
+        },
+        {
+          "uri": "https://www.springernature.com/gp/authors/research-data",
+          "text": "Research data",
+          "dataTrackAction": "research data"
+        },
+        {
+          "uri": "https://authorservices.springernature.com/go/nr",
+          "text": "Language editing",
+          "dataTrackAction": "language editing"
+        },
+        {
+          "uri": "https://authorservices.springernature.com/scientific-editing/",
+          "text": "Scientific editing",
+          "dataTrackAction": "scientific editing"
+        },
+        {
+          "uri": "https://masterclasses.nature.com/",
+          "text": "Nature Masterclasses",
+          "dataTrackAction": "nature Masterclasses"
+        },
+        {
+          "uri": "https://partnerships.nature.com/product/researcher-training/",
+          "text": "Nature Research Academies",
+          "dataTrackAction": "nature Research Academies"
+        }
+      ]
+    }
+  ],
+  "socialLinks": true,
+  "socialFacebook": {
+    "uri": "https://www.facebook.com/nature/",
+    "dataTrackAction": "facebook",
+    "ariaLabel": "Nature on Facebook"
+  },
+  "socialTwitter": {
+    "uri": "https://twitter.com/NaturePortfolio?lang=en",
+    "dataTrackAction": "twitter",
+    "ariaLabel": "Twitter"
+  },
+  "socialYoutube": {
+    "uri": "https://www.youtube.com/channel/UCvCLdSgYdSTpWcOgEJgi-ng",
+    "dataTrackAction": "youtube",
+    "ariaLabel": "YouTube"
+  },
+  "dynamicPartials": {
+    "nature-footer": "./toolkits/nature/packages/nature-footer/view/footer.hbs"
+  }
+}