diff --git a/package-lock.json b/package-lock.json index 2aacdbc64..b86bc4267 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,7 +11,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", @@ -5291,13 +5291,13 @@ } }, "node_modules/@springernature/frontend-package-manager": { - "version": "8.0.0", - "resolved": "https://registry.npmjs.org/@springernature/frontend-package-manager/-/frontend-package-manager-8.0.0.tgz", - "integrity": "sha512-waMjKvk3eK65F4/mE4wEkAkr2WAQL6QyPe3GEZmnlrE93ewLMTnMKYpxcXrFKQbOt8Fm9zwWK9Kfdrhf4owG+w==", + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/@springernature/frontend-package-manager/-/frontend-package-manager-8.1.0.tgz", + "integrity": "sha512-SdOHVnGGG8areZeap8WVbM57XJwNSdqaYkHPrYbJW6+SNwDVInhIJ2v9AQkY2P21ZWQLSiJ6lPl1KR6qBTV9FA==", "dev": true, "dependencies": { "@springernature/util-cli-reporter": "^2.0.0", - "@springernature/util-package-renderer": "^3.0.0", + "@springernature/util-package-renderer": "^3.1.0", "conf": "^10.1.1", "deepmerge": "^4.2.2", "gitignore-globs": "^0.1.1", @@ -5377,9 +5377,9 @@ } }, "node_modules/@springernature/util-package-renderer": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/@springernature/util-package-renderer/-/util-package-renderer-3.0.0.tgz", - "integrity": "sha512-3wXQ83XqRCXunqgbl8gPV8sGzVwoJLoMWWA3z50Qj134B9ZuCczVQCA1jCRdziVpgGagxVHWYy5EG1c+sc6kvA==", + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/@springernature/util-package-renderer/-/util-package-renderer-3.1.0.tgz", + "integrity": "sha512-oVItEL6rAaVKy9i5ARQNr/lQ5bwiIwFjvRTRQr4Ao9Snazhb10mmubCYIijaSZq+uwy0Qa4TyJDGpMdNmElKYg==", "dev": true, "dependencies": { "@babel/core": "^7.15.5", @@ -19060,9 +19060,9 @@ } }, "node_modules/rollup": { - "version": "2.64.0", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.64.0.tgz", - "integrity": "sha512-+c+lbw1lexBKSMb1yxGDVfJ+vchJH3qLbmavR+awDinTDA2C5Ug9u7lkOzj62SCu0PKUExsW36tpgW7Fmpn3yQ==", + "version": "2.66.1", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.66.1.tgz", + "integrity": "sha512-crSgLhSkLMnKr4s9iZ/1qJCplgAgrRY+igWv8KhG/AjKOJ0YX/WpmANyn8oxrw+zenF3BXWDLa7Xl/QZISH+7w==", "dev": true, "bin": { "rollup": "dist/bin/rollup" @@ -19475,9 +19475,9 @@ } }, "node_modules/sass": { - "version": "1.48.0", - "resolved": "https://registry.npmjs.org/sass/-/sass-1.48.0.tgz", - "integrity": "sha512-hQi5g4DcfjcipotoHZ80l7GNJHGqQS5LwMBjVYB/TaT0vcSSpbgM8Ad7cgfsB2M0MinbkEQQPO9+sjjSiwxqmw==", + "version": "1.49.0", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.49.0.tgz", + "integrity": "sha512-TVwVdNDj6p6b4QymJtNtRS2YtLJ/CqZriGg0eIAbAKMlN8Xy6kbv33FsEZSF7FufFFM705SQviHjjThfaQ4VNw==", "dev": true, "dependencies": { "chokidar": ">=3.0.0 <4.0.0", @@ -20661,9 +20661,9 @@ } }, "node_modules/source-map-js": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.1.tgz", - "integrity": "sha512-4+TN2b3tqOCd/kaGRJ/sTYA0tR0mdXx26ipdolxcwtJVqEnqNYvlCAt1q3ypy4QMlYus+Zh34RNtYLoq2oQ4IA==", + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", + "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", "dev": true, "engines": { "node": ">=0.10.0" @@ -26948,13 +26948,13 @@ "requires": {} }, "@springernature/frontend-package-manager": { - "version": "8.0.0", - "resolved": "https://registry.npmjs.org/@springernature/frontend-package-manager/-/frontend-package-manager-8.0.0.tgz", - "integrity": "sha512-waMjKvk3eK65F4/mE4wEkAkr2WAQL6QyPe3GEZmnlrE93ewLMTnMKYpxcXrFKQbOt8Fm9zwWK9Kfdrhf4owG+w==", + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/@springernature/frontend-package-manager/-/frontend-package-manager-8.1.0.tgz", + "integrity": "sha512-SdOHVnGGG8areZeap8WVbM57XJwNSdqaYkHPrYbJW6+SNwDVInhIJ2v9AQkY2P21ZWQLSiJ6lPl1KR6qBTV9FA==", "dev": true, "requires": { "@springernature/util-cli-reporter": "^2.0.0", - "@springernature/util-package-renderer": "^3.0.0", + "@springernature/util-package-renderer": "^3.1.0", "conf": "^10.1.1", "deepmerge": "^4.2.2", "gitignore-globs": "^0.1.1", @@ -27022,9 +27022,9 @@ } }, "@springernature/util-package-renderer": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/@springernature/util-package-renderer/-/util-package-renderer-3.0.0.tgz", - "integrity": "sha512-3wXQ83XqRCXunqgbl8gPV8sGzVwoJLoMWWA3z50Qj134B9ZuCczVQCA1jCRdziVpgGagxVHWYy5EG1c+sc6kvA==", + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/@springernature/util-package-renderer/-/util-package-renderer-3.1.0.tgz", + "integrity": "sha512-oVItEL6rAaVKy9i5ARQNr/lQ5bwiIwFjvRTRQr4Ao9Snazhb10mmubCYIijaSZq+uwy0Qa4TyJDGpMdNmElKYg==", "dev": true, "requires": { "@babel/core": "^7.15.5", @@ -37933,9 +37933,9 @@ } }, "rollup": { - "version": "2.64.0", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.64.0.tgz", - "integrity": "sha512-+c+lbw1lexBKSMb1yxGDVfJ+vchJH3qLbmavR+awDinTDA2C5Ug9u7lkOzj62SCu0PKUExsW36tpgW7Fmpn3yQ==", + "version": "2.66.1", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.66.1.tgz", + "integrity": "sha512-crSgLhSkLMnKr4s9iZ/1qJCplgAgrRY+igWv8KhG/AjKOJ0YX/WpmANyn8oxrw+zenF3BXWDLa7Xl/QZISH+7w==", "dev": true, "requires": { "fsevents": "~2.3.2" @@ -38258,9 +38258,9 @@ } }, "sass": { - "version": "1.48.0", - "resolved": "https://registry.npmjs.org/sass/-/sass-1.48.0.tgz", - "integrity": "sha512-hQi5g4DcfjcipotoHZ80l7GNJHGqQS5LwMBjVYB/TaT0vcSSpbgM8Ad7cgfsB2M0MinbkEQQPO9+sjjSiwxqmw==", + "version": "1.49.0", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.49.0.tgz", + "integrity": "sha512-TVwVdNDj6p6b4QymJtNtRS2YtLJ/CqZriGg0eIAbAKMlN8Xy6kbv33FsEZSF7FufFFM705SQviHjjThfaQ4VNw==", "dev": true, "requires": { "chokidar": ">=3.0.0 <4.0.0", @@ -39217,9 +39217,9 @@ "dev": true }, "source-map-js": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.1.tgz", - "integrity": "sha512-4+TN2b3tqOCd/kaGRJ/sTYA0tR0mdXx26ipdolxcwtJVqEnqNYvlCAt1q3ypy4QMlYus+Zh34RNtYLoq2oQ4IA==", + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", + "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", "dev": true }, "source-map-resolve": { diff --git a/package.json b/package.json index 1432873e1..d87b4f55b 100644 --- a/package.json +++ b/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", diff --git a/toolkits/nature/packages/nature-footer/README.md b/toolkits/nature/packages/nature-footer/README.md index 1059dd2b3..20faf7394 100644 --- a/toolkits/nature/packages/nature-footer/README.md +++ b/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 ``` -
-
-
-

brand sitemap

-
- - - -
- -
-
-

Discover content

- -
- -
-
-
-
-``` \ No newline at end of file + +## 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 requires the use of the utility classes shown above + +## Template + +Find a configurable template in the [`view` folder](./view/footer.hbs). You can see an example 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 \ No newline at end of file diff --git a/toolkits/nature/packages/nature-footer/demo/context.json b/toolkits/nature/packages/nature-footer/demo/context.json new file mode 100644 index 000000000..652c198e4 --- /dev/null +++ b/toolkits/nature/packages/nature-footer/demo/context.json @@ -0,0 +1,131 @@ +{ + "logo": { + "slug": "../img/nature-portfolio.svg", + "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" + } +} \ No newline at end of file diff --git a/toolkits/nature/packages/nature-footer/demo/dist/index.html b/toolkits/nature/packages/nature-footer/demo/dist/index.html new file mode 100644 index 000000000..74a52dc38 --- /dev/null +++ b/toolkits/nature/packages/nature-footer/demo/dist/index.html @@ -0,0 +1,1980 @@ + + + + @springernature/nature-footer + + + +
+
+
+

brand sitemap

+
+ + + + + +
+ +
+
+

Discover content

+ +
+
+

Publishing policies

+ +
+
+

Author & researcher services

+ +
+
+
+
+
+ + \ No newline at end of file diff --git a/toolkits/nature/packages/nature-footer/demo/index.hbs b/toolkits/nature/packages/nature-footer/demo/index.hbs new file mode 100644 index 000000000..c43cae5a5 --- /dev/null +++ b/toolkits/nature/packages/nature-footer/demo/index.hbs @@ -0,0 +1 @@ +{{> nature-footer }} \ No newline at end of file diff --git a/toolkits/nature/packages/nature-footer/demo/main.scss b/toolkits/nature/packages/nature-footer/demo/main.scss new file mode 100644 index 000000000..68da8614d --- /dev/null +++ b/toolkits/nature/packages/nature-footer/demo/main.scss @@ -0,0 +1,16 @@ +@charset "UTF-8"; + +// we must not add `node_modules/` to the Sass includePaths config, +// so use relative paths here. Paths should be relative to this file. +@import '../node_modules/@springernature/brand-context/nature/scss/core.scss'; +@import '../node_modules/@springernature/brand-context/nature/scss/enhanced.scss'; + +// component SCSS +@import '../scss/10-settings/footer'; +@import '../scss/50-components/footer'; + +// Utilities +@import '../node_modules/@springernature/brand-context/default/scss/60-utilities/container.scss'; +@import '../node_modules/@springernature/brand-context/default/scss/60-utilities/hiding.scss'; +@import '../node_modules/@springernature/brand-context/default/scss/60-utilities/icons.scss'; +@import '../node_modules/@springernature/brand-context/default/scss/60-utilities/spacing.scss'; \ No newline at end of file diff --git a/toolkits/nature/packages/nature-footer/img/nature-portfolio.svg b/toolkits/nature/packages/nature-footer/img/nature-portfolio.svg new file mode 100644 index 000000000..51e52136c --- /dev/null +++ b/toolkits/nature/packages/nature-footer/img/nature-portfolio.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/toolkits/nature/packages/nature-footer/view/footer.hbs b/toolkits/nature/packages/nature-footer/view/footer.hbs new file mode 100644 index 000000000..04756fe78 --- /dev/null +++ b/toolkits/nature/packages/nature-footer/view/footer.hbs @@ -0,0 +1,67 @@ +
+
+
+

{{title}}

+
+ + + {{#if footerLinks}} + + {{/if}} + + {{#if socialLinks}} +
    + {{#if socialFacebook}} +
  • + + + +
    • + {{/if}} + {{#if socialTwitter}} +
  • + + + +
    • + {{/if}} + {{#if socialYoutube}} +
  • + + + +
    • + {{/if}} +
+ {{/if}} +
+ + {{#if footerGroups}} +
+ {{#each footerGroups as |siteNavItem|}} +
+

{{siteNavItem.title}}

+ +
+ {{/each}} +
+ {{/if}} +
+
+
\ No newline at end of file diff --git a/toolkits/nature/packages/nature-header/README.md b/toolkits/nature/packages/nature-header/README.md index 26212e3f7..7ed3c5d9f 100644 --- a/toolkits/nature/packages/nature-header/README.md +++ b/toolkits/nature/packages/nature-header/README.md @@ -1,5 +1,7 @@ # Nature Header +[![NPM version][badge-npm]][info-npm] + The Nature Header component includes: - the journal’s logo - which appears in the top left @@ -33,21 +35,32 @@ In some cases, you may want to use a keyline to visually separate navigation men To use the Header component, enter the following command in your Terminal: ``` -npm install @springernature/nature-section-heading +npm install @springernature/nature-header ``` + +## Usage + Import the installed component code in your `scss` file: ```scss @import '@springernature/nature-header/scss/50-components/header'; @import '@springernature/nature-header/scss/50-components/header-expander'; + +@import '@springernature/brand-context/default/scss/60-utilities/buttons.scss'; +@import '@springernature/brand-context/default/scss/60-utilities/display.scss'; +@import '@springernature/brand-context/default/scss/60-utilities/hiding.scss'; +@import '@springernature/brand-context/default/scss/60-utilities/lists.scss'; +@import '@springernature/brand-context/default/scss/60-utilities/spacing.scss'; ``` +> **NOTE** The component require the use of the utility classes shown above + Then import the JavaScript as follows: ``` -import {enhancedHeader} from '@springernature/nature-header/js/enhanced-header'; +import {header} from '@springernature/nature-header/js/header'; -enhancedHeader(); +header(); ``` Once you’ve installed the `scss` and JavaScript, build your Header using the Handlebars template below as a guide. @@ -59,192 +72,12 @@ In the oscar-sites-nature application, the color of the border on each journal For ease of maintenance, the `scss` for this component is separated into 2 classnames and contained in 2 separate files: - `c-header-expander` - for all interactive Header parts that users can open and close, like dropdown menus and pop-out modals -- `c-header` - for all other parts of the Header +- `c-header` - for all other parts of the Header -The following code example is a Handlebars template. Use this code in your application, adapting to whatever template rendering engine you're using. +You can find the HTML in the [included handlebars template](./view/header.hbs). The loops and conditional statements show which parts of the component contain dynamic content. -```html - -``` - ### Header expander The Header’s JavaScript file uses: @@ -272,7 +105,7 @@ For example, you may want to keep social media links grouped together, visually In these instances, you can apply `c-header-expander__item–keyline-first-item-only` to a group of list items, so the first item in that group always has a keyline above it. -You can see an example of this in the code example above. +You can see an example of this in the `view` template. ## Research on this component @@ -286,4 +119,7 @@ A/B testing showed that exposing top-level navigation links in the menu increase ## Help improve this page -If you’ve got a question, idea or suggestion about how to improve this component or guidance, post in the [#design-systems Slack channel](https://springernature.slack.com/archives/C75DHBTBP). +If you’ve got a question, idea or suggestion about how to improve this component or guidance, post in the [#design-systems Slack channel](https://springernature.slack.com/archives/C75DHBTBP). + +[info-npm]: https://www.npmjs.com/package/@springernature/nature-header +[badge-npm]: https://img.shields.io/npm/v/@springernature/nature-header.svg diff --git a/toolkits/nature/packages/nature-header/demo/context.json b/toolkits/nature/packages/nature-header/demo/context.json new file mode 100644 index 000000000..3bf9ad5c1 --- /dev/null +++ b/toolkits/nature/packages/nature-header/demo/context.json @@ -0,0 +1,43 @@ +{ + "exploreContent": [ + { + "slug": "/some-url/", + "text": "link one" + }, + { + "slug": "/some-url/", + "text": "link two" + } + ], + "aboutJournalContent": [ + { + "slug": "/some-url/", + "text": "link one" + }, + { + "slug": "/some-url/", + "text": "link two" + } + ], + "publishWithUsContent": [ + { + "slug": "/some-url/", + "text": "link one" + }, + { + "slug": "/some-url/", + "text": "link two" + } + ], + "publishWithUs": true, + "submissionLink": "/some-url/", + "facebookUri": "/some-url/", + "twitterUri": "/some-url/", + "showSubscribeButton": true, + "pcode": "999", + "alertsLink": "/some-url/", + "rssLink": "/some-url/", + "dynamicPartials": { + "nature-header": "./toolkits/nature/packages/nature-header/view/header.hbs" + } +} \ No newline at end of file diff --git a/toolkits/nature/packages/nature-header/demo/dist/index.html b/toolkits/nature/packages/nature-header/demo/dist/index.html new file mode 100644 index 000000000..f28635f90 --- /dev/null +++ b/toolkits/nature/packages/nature-header/demo/dist/index.html @@ -0,0 +1,2974 @@ + + + + @springernature/nature-header + + + + + + \ No newline at end of file diff --git a/toolkits/nature/packages/nature-header/demo/index.hbs b/toolkits/nature/packages/nature-header/demo/index.hbs new file mode 100644 index 000000000..a64a17439 --- /dev/null +++ b/toolkits/nature/packages/nature-header/demo/index.hbs @@ -0,0 +1 @@ +{{> nature-header }} \ No newline at end of file diff --git a/toolkits/nature/packages/nature-header/demo/main.js b/toolkits/nature/packages/nature-header/demo/main.js new file mode 100644 index 000000000..bd101876e --- /dev/null +++ b/toolkits/nature/packages/nature-header/demo/main.js @@ -0,0 +1,3 @@ +import {header} from '../js/header'; + +header(); diff --git a/toolkits/nature/packages/nature-header/demo/main.scss b/toolkits/nature/packages/nature-header/demo/main.scss new file mode 100644 index 000000000..33cad09ca --- /dev/null +++ b/toolkits/nature/packages/nature-header/demo/main.scss @@ -0,0 +1,17 @@ +@charset "UTF-8"; + +// we must not add `node_modules/` to the Sass includePaths config, +// so use relative paths here. Paths should be relative to this file. +@import '../node_modules/@springernature/brand-context/nature/scss/core.scss'; +@import '../node_modules/@springernature/brand-context/nature/scss/enhanced.scss'; + +// component SCSS +@import '../scss/50-components/header'; +@import '../scss/50-components/header-expander'; + +// Utilities +@import '../node_modules/@springernature/brand-context/default/scss/60-utilities/buttons.scss'; +@import '../node_modules/@springernature/brand-context/default/scss/60-utilities/display.scss'; +@import '../node_modules/@springernature/brand-context/default/scss/60-utilities/hiding.scss'; +@import '../node_modules/@springernature/brand-context/default/scss/60-utilities/lists.scss'; +@import '../node_modules/@springernature/brand-context/default/scss/60-utilities/spacing.scss'; \ No newline at end of file diff --git a/toolkits/nature/packages/nature-header/view/header.hbs b/toolkits/nature/packages/nature-header/view/header.hbs new file mode 100644 index 000000000..3f3e8712c --- /dev/null +++ b/toolkits/nature/packages/nature-header/view/header.hbs @@ -0,0 +1,198 @@ + \ No newline at end of file diff --git a/toolkits/nature/packages/nature-hero/README.md b/toolkits/nature/packages/nature-hero/README.md index 60479cef3..d75ff831f 100644 --- a/toolkits/nature/packages/nature-hero/README.md +++ b/toolkits/nature/packages/nature-hero/README.md @@ -1,34 +1,35 @@ # Nature Hero +[![NPM version][badge-npm]][info-npm] + Hero for Nature products. -## CSS +## Installation + +To use the Hero component, enter the following command in your Terminal: + +``` +npm install @springernature/nature-hero +``` + +## Usage -Include the SCSS in your application +Import the installed component code in your `scss` file: ```scss -// Include this with your settings @import '@springernature/nature-hero/scss/10-settings/hero'; - -// Include this with your other components @import '@springernature/nature-hero/scss/50-components/hero'; + +@import '@springernature/brand-context/default/scss/60-utilities/links.scss'; +@import '@springernature/brand-context/default/scss/60-utilities/positioning.scss'; +@import '@springernature/brand-context/default/scss/60-utilities/spacing.scss'; ``` -## Usage +> **NOTE** The component requires the use of the utility classes shown above -```html -
-
- -
-
-

- Hero title -

-

Hero text

-
-
-``` +## Template + +Find a configurable template in the [`view` folder](./view/hero.hbs). You can see an example in the `demo` folder. [info-npm]: https://www.npmjs.com/package/@springernature/nature-hero [badge-npm]: https://img.shields.io/npm/v/@springernature/nature-hero.svg diff --git a/toolkits/nature/packages/nature-hero/demo/context.json b/toolkits/nature/packages/nature-hero/demo/context.json new file mode 100644 index 000000000..57510daf9 --- /dev/null +++ b/toolkits/nature/packages/nature-hero/demo/context.json @@ -0,0 +1,22 @@ +{ + "flushMdMax": true, + "picture": { + "type": "image/webp", + "srcset": "http://placehold.it/735x400?as=webp 450w, http://placehold.it/735x400?as=webp 735w", + "sizes": "(max-width: 1024px) 450px, (max-width: 100vw) 735px 735px", + "src": "http://placehold.it/735x400", + "alt": "placeholder image" + }, + "title": { + "uri": "/", + "text": "Webb telescope reaches its final destination far from Earth", + "dataTrackAction": "view announcement" + }, + "summary": "The ambitious observatory has arrived at its home — near a gravitationally stable spot called L2 — for a premier view of the Universe.", + "dynamicPartials": { + "nature-hero": "./toolkits/nature/packages/nature-hero/view/hero.hbs" + } +} + + + diff --git a/toolkits/nature/packages/nature-hero/demo/dist/index.html b/toolkits/nature/packages/nature-hero/demo/dist/index.html new file mode 100644 index 000000000..a8753e309 --- /dev/null +++ b/toolkits/nature/packages/nature-hero/demo/dist/index.html @@ -0,0 +1,1797 @@ + + + + @springernature/nature-hero + + + +
+
+ + + placeholder image + +
+
+

+ Webb telescope reaches its final destination far from Earth +

+

The ambitious observatory has arrived at its home — near a gravitationally stable spot called L2 — for a premier view of the Universe.

+
+
+ + \ No newline at end of file diff --git a/toolkits/nature/packages/nature-hero/demo/index.hbs b/toolkits/nature/packages/nature-hero/demo/index.hbs new file mode 100644 index 000000000..d88d17faf --- /dev/null +++ b/toolkits/nature/packages/nature-hero/demo/index.hbs @@ -0,0 +1 @@ +{{> nature-hero }} \ No newline at end of file diff --git a/toolkits/nature/packages/nature-hero/demo/main.scss b/toolkits/nature/packages/nature-hero/demo/main.scss new file mode 100644 index 000000000..db04db16c --- /dev/null +++ b/toolkits/nature/packages/nature-hero/demo/main.scss @@ -0,0 +1,15 @@ +@charset "UTF-8"; + +// we must not add `node_modules/` to the Sass includePaths config, +// so use relative paths here. Paths should be relative to this file. +@import '../node_modules/@springernature/brand-context/nature/scss/core.scss'; +@import '../node_modules/@springernature/brand-context/nature/scss/enhanced.scss'; + +// component SCSS +@import '../scss/10-settings/hero'; +@import '../scss/50-components/hero'; + +// Utilities +@import '../node_modules/@springernature/brand-context/default/scss/60-utilities/links.scss'; +@import '../node_modules/@springernature/brand-context/default/scss/60-utilities/positioning.scss'; +@import '../node_modules/@springernature/brand-context/default/scss/60-utilities/spacing.scss'; \ No newline at end of file diff --git a/toolkits/nature/packages/nature-hero/view/hero.hbs b/toolkits/nature/packages/nature-hero/view/hero.hbs new file mode 100644 index 000000000..a3612c0c4 --- /dev/null +++ b/toolkits/nature/packages/nature-hero/view/hero.hbs @@ -0,0 +1,14 @@ +
+
+ + + {{picture.alt}} + +
+
+

+ {{title.text}} +

+

{{summary}}

+
+
\ No newline at end of file diff --git a/toolkits/nature/packages/nature-section-heading/README.md b/toolkits/nature/packages/nature-section-heading/README.md index 921e97d54..0e668d275 100644 --- a/toolkits/nature/packages/nature-section-heading/README.md +++ b/toolkits/nature/packages/nature-section-heading/README.md @@ -1,5 +1,7 @@ # Nature Section Heading +[![NPM version][badge-npm]][info-npm] + The Nature Section heading is a type of heading used for titles of some subsections of pages on Nature.com. It uses borders above and below the heading text to make it stand out from other headings on the page. @@ -37,6 +39,8 @@ To use the Section heading component, enter the following command in your Termin npm install @springernature/nature-section-heading ``` +## Usage + Then import the installed component code in your `scss` file: ```scss @@ -48,25 +52,13 @@ Then import the installed component code in your `scss` file: Once you’ve installed the `scss`, build your Section heading using the following HTML as a guide. -### Section heading - -```html -

Heading Text

-``` +## Template -### Section heading as link - -```html -
-

- - Heading Text - - -

-
-``` +A configurable template can found in the [`view` folder](./view/section-heading.hbs). Example usage can be found in the `demo` folder. ## Help improve this page If you’ve got a question, idea or suggestion about how to improve this component or guidance, post in the [#design-systems Slack channel](https://springernature.slack.com/archives/C75DHBTBP). + +[info-npm]: https://www.npmjs.com/package/@springernature/nature-section-heading +[badge-npm]: https://img.shields.io/npm/v/@springernature/nature-section-heading.svg \ No newline at end of file diff --git a/toolkits/nature/packages/nature-section-heading/demo/context.json b/toolkits/nature/packages/nature-section-heading/demo/context.json new file mode 100644 index 000000000..d69dac6ac --- /dev/null +++ b/toolkits/nature/packages/nature-section-heading/demo/context.json @@ -0,0 +1,6 @@ +{ + "text": "Heading Text", + "dynamicPartials": { + "nature-section-heading": "./toolkits/nature/packages/nature-section-heading/view/section-heading.hbs" + } +} \ No newline at end of file diff --git a/toolkits/nature/packages/nature-section-heading/demo/dist/index.html b/toolkits/nature/packages/nature-section-heading/demo/dist/index.html new file mode 100644 index 000000000..5413a234d --- /dev/null +++ b/toolkits/nature/packages/nature-section-heading/demo/dist/index.html @@ -0,0 +1,1320 @@ + + + + @springernature/nature-section-heading + + + +
+
+

Heading Text

+

The ambitious observatory has arrived at its home — near a gravitationally stable spot called L2 — for a premier view of the Universe.

+ +
+

+ + Heading Text With Link + + +

+

People abandoned thriving cities in Mesopotamia, the Indus Valley and farther afield at about the same time as a decades-long drought gripped parts of the planet.

+
+ + + \ No newline at end of file diff --git a/toolkits/nature/packages/nature-section-heading/demo/index.hbs b/toolkits/nature/packages/nature-section-heading/demo/index.hbs new file mode 100644 index 000000000..53c141666 --- /dev/null +++ b/toolkits/nature/packages/nature-section-heading/demo/index.hbs @@ -0,0 +1,7 @@ +
+ {{> nature-section-heading }} +

The ambitious observatory has arrived at its home — near a gravitationally stable spot called L2 — for a premier view of the Universe.

+ + {{> nature-section-heading text='Heading Text With Link' url='http://www.example.com' }} +

People abandoned thriving cities in Mesopotamia, the Indus Valley and farther afield at about the same time as a decades-long drought gripped parts of the planet.

+
\ No newline at end of file diff --git a/toolkits/nature/packages/nature-section-heading/demo/main.scss b/toolkits/nature/packages/nature-section-heading/demo/main.scss new file mode 100644 index 000000000..715382ff4 --- /dev/null +++ b/toolkits/nature/packages/nature-section-heading/demo/main.scss @@ -0,0 +1,12 @@ +@charset "UTF-8"; + +// we must not add `node_modules/` to the Sass includePaths config, +// so use relative paths here. Paths should be relative to this file. +@import '../node_modules/@springernature/brand-context/nature/scss/core.scss'; +@import '../node_modules/@springernature/brand-context/nature/scss/enhanced.scss'; + + +// component SCSS +@import '../scss/10-settings/section-heading'; +@import '../scss/50-components/section-heading'; + diff --git a/toolkits/nature/packages/nature-section-heading/view/section-heading.hbs b/toolkits/nature/packages/nature-section-heading/view/section-heading.hbs new file mode 100644 index 000000000..b8bc68525 --- /dev/null +++ b/toolkits/nature/packages/nature-section-heading/view/section-heading.hbs @@ -0,0 +1,14 @@ +
+ {{#if url}} +

+ + {{text}} + + +

+ {{else}} +

{{text}}

+ {{/if}} +
\ No newline at end of file diff --git a/toolkits/nature/packages/nature-sort-by/README.md b/toolkits/nature/packages/nature-sort-by/README.md index b364f4a32..f12a9192b 100644 --- a/toolkits/nature/packages/nature-sort-by/README.md +++ b/toolkits/nature/packages/nature-sort-by/README.md @@ -1,7 +1,17 @@ # Nature Sort By +[![NPM version][badge-npm]][info-npm] + A sort by dropdown for use on Nature product pages that contain a sortable list of content such as search results pages. +## Installation + +To use the Sort By component, enter the following command in your Terminal: + +``` +npm install @springernature/nature-sort-by +``` + ## Usage Import the js and scss as follows: @@ -13,16 +23,19 @@ sortBy(); ``` ```scss -@import '../../node_modules/@springernature/nature-sort-by/scss/10-settings/sort-by'; -@import '../../node_modules/@springernature/nature-sort-by/scss/50-components/sort-by'; +@import '@springernature/nature-sort-by/scss/10-settings/sort-by'; +@import '@springernature/nature-sort-by/scss/50-components/sort-by'; -``` +@import '@springernature/brand-context/default/scss/60-utilities/flex.scss'; +@import '@springernature/brand-context/default/scss/60-utilities/hiding.scss'; +@import '@springernature/brand-context/default/scss/60-utilities/spacing.scss'; -If you plan to use utility classnames such as `u-js-hide` as shown in the examples below, ensure you import the relevant toolkit scss. For example: -```scss -@import '../../node_modules/@springernature/brand-context/default/scss/60-utilities/hiding'; ``` +> **NOTE** The component require the use of the utility classes shown above + +## Configuration + To configure the component the following html attributes will need to be set: | Name | Description | @@ -37,57 +50,9 @@ This component uses Global Expander. This means you should be aware of the follo 2. You can add the classname `u-js-hide` to the target on page render. Global Expander will remove this when the menu is opened. 3. Global Expander will add the classname `is-open` to the trigger and `has-tethered` to the target when the menu has been opened. The component's styling utilises these. -Example handlebars template -```handlebars -
- -
- -
-
-``` +## Template -Example html -```html -
- -
- -
-
-``` +Find a configurable template in the [`view` folder](./view/sort-by.hbs). You can see an example usage in the `demo` folder. + +[info-npm]: https://www.npmjs.com/package/@springernature/nature-sort-by +[badge-npm]: https://img.shields.io/npm/v/@springernature/nature-sort-by.svg \ No newline at end of file diff --git a/toolkits/nature/packages/nature-sort-by/demo/context.json b/toolkits/nature/packages/nature-sort-by/demo/context.json new file mode 100644 index 000000000..9b987fa27 --- /dev/null +++ b/toolkits/nature/packages/nature-sort-by/demo/context.json @@ -0,0 +1,20 @@ +{ + "sortOrderFilter": [ + { + "value": "relevance", + "label": "Relevance", + "checked": true + }, + { + "value": "desc", + "label": "Most recent" + }, + { + "value": "asc", + "label": "Oldest first" + } + ], + "dynamicPartials": { + "nature-sort-by": "./toolkits/nature/packages/nature-sort-by/view/sort-by.hbs" + } +} \ No newline at end of file diff --git a/toolkits/nature/packages/nature-sort-by/demo/dist/index.html b/toolkits/nature/packages/nature-sort-by/demo/dist/index.html new file mode 100644 index 000000000..6149b74b2 --- /dev/null +++ b/toolkits/nature/packages/nature-sort-by/demo/dist/index.html @@ -0,0 +1,2370 @@ + + + + @springernature/nature-sort-by + + + +
+ +
+ +
+ +
+
+
+ + \ No newline at end of file diff --git a/toolkits/nature/packages/nature-sort-by/demo/index.hbs b/toolkits/nature/packages/nature-sort-by/demo/index.hbs new file mode 100644 index 000000000..bf02bd7af --- /dev/null +++ b/toolkits/nature/packages/nature-sort-by/demo/index.hbs @@ -0,0 +1 @@ +{{> nature-sort-by }} \ No newline at end of file diff --git a/toolkits/nature/packages/nature-sort-by/demo/main.js b/toolkits/nature/packages/nature-sort-by/demo/main.js new file mode 100644 index 000000000..d75cabd27 --- /dev/null +++ b/toolkits/nature/packages/nature-sort-by/demo/main.js @@ -0,0 +1,3 @@ +import {sortBy} from '../js/sort-by'; + +sortBy(); diff --git a/toolkits/nature/packages/nature-sort-by/demo/main.scss b/toolkits/nature/packages/nature-sort-by/demo/main.scss new file mode 100644 index 000000000..67af1feab --- /dev/null +++ b/toolkits/nature/packages/nature-sort-by/demo/main.scss @@ -0,0 +1,17 @@ +@charset "UTF-8"; + +// we must not add `node_modules/` to the Sass includePaths config, +// so use relative paths here. Paths should be relative to this file. +@import '../node_modules/@springernature/brand-context/nature/scss/core.scss'; +@import '../node_modules/@springernature/brand-context/nature/scss/enhanced.scss'; + + +// component SCSS +@import '../scss/10-settings/sort-by'; +@import '../scss/50-components/sort-by'; + +// Utilities +@import '../node_modules/@springernature/brand-context/default/scss/60-utilities/flex.scss'; +@import '../node_modules/@springernature/brand-context/default/scss/60-utilities/hiding.scss'; +@import '../node_modules/@springernature/brand-context/default/scss/60-utilities/spacing.scss'; + diff --git a/toolkits/nature/packages/nature-sort-by/view/sort-by.hbs b/toolkits/nature/packages/nature-sort-by/view/sort-by.hbs new file mode 100644 index 000000000..89c5c7e8f --- /dev/null +++ b/toolkits/nature/packages/nature-sort-by/view/sort-by.hbs @@ -0,0 +1,28 @@ +
+ +
+ +
+ +
+
+
\ No newline at end of file