diff --git a/components/blocks/vf-section-header/vf-section-header.config.yml b/components/blocks/vf-section-header/vf-section-header.config.yml index 9dde1e4b3e00c2ebf070c76cd72989d29f9e2d4a..15b7651e3112aaef6801030a9f7dd008f80f319b 100755 --- a/components/blocks/vf-section-header/vf-section-header.config.yml +++ b/components/blocks/vf-section-header/vf-section-header.config.yml @@ -1,2 +1,4 @@ title: Section Header label: Section Header +context: + section-title: Projects diff --git a/components/blocks/vf-section-header/vf-section-header.hbs b/components/blocks/vf-section-header/vf-section-header.hbs index a3fe970f9b2141677150e39f1e73e8782280f038..8c14e8fee9cdd492dbc5d2011de19d74fc20069e 100755 --- a/components/blocks/vf-section-header/vf-section-header.hbs +++ b/components/blocks/vf-section-header/vf-section-header.hbs @@ -1,3 +1,3 @@ <div class="vf-section-header"> - <h2 class="vf-section-header__heading | vf-text vf-text--heading-r">Projects</h2> + <h2 class="vf-section-header__heading | vf-text vf-text--heading-r">{{section-title}}</h2> </div> diff --git a/components/blocks/vf-summary/vf-summary.config.yml b/components/blocks/vf-summary/vf-summary.config.yml index 97107db6f75e4680528b15e4c175b76723484078..86fa41f43da0c73b6fa0a6681e54efe97c074993 100755 --- a/components/blocks/vf-summary/vf-summary.config.yml +++ b/components/blocks/vf-summary/vf-summary.config.yml @@ -1,2 +1,5 @@ title: Summary Pattern label: Summary +context: + summary__title: What is Cancer? + summary__text: Cancer is a group of diseases involving abnormal cell growth with the potential to invade or spread to other parts of the body. diff --git a/components/blocks/vf-summary/vf-summary.hbs b/components/blocks/vf-summary/vf-summary.hbs index 7796220c0c95c66fd764c4e6f622f1cca78b1aa4..5450f7faac6262226832653ff866533578bd33f7 100755 --- a/components/blocks/vf-summary/vf-summary.hbs +++ b/components/blocks/vf-summary/vf-summary.hbs @@ -1,6 +1,6 @@ -<aside class="vf-summary"> +<article class="vf-summary"> <h3 class="vf-summary__title vf-text vf-text--heading-l"> - <a href="#" class="vf-link">What is Cancer?</a> + <a href="#" class="vf-link">{{ summary__title }}</a> </h3> - <p class="vf-summary__text vf-text vf-text--body-r">Cancer is a group of diseases involving abnormal cell growth with the potential to invade or spread to other parts of the body.</p> -</aside> + <p class="vf-summary__text vf-text vf-text--body-r">{{ summary__text }}</p> +</article> diff --git a/components/containers/vf-summary-container/CHANGELOG.md b/components/containers/vf-summary-container/CHANGELOG.md new file mode 100755 index 0000000000000000000000000000000000000000..f512cfff9607b896054e45f610dea3eb685636d4 --- /dev/null +++ b/components/containers/vf-summary-container/CHANGELOG.md @@ -0,0 +1,15 @@ +# 0.1.0 + +### Added +- added this +- added that + +### Changes + +- changed this +- changed that + +### Removed + +- deleted this +- deleted that diff --git a/components/containers/vf-summary-container/README.md b/components/containers/vf-summary-container/README.md new file mode 100755 index 0000000000000000000000000000000000000000..73961688e47026cf3eab0c3dbbd6b31ad1bfe151 --- /dev/null +++ b/components/containers/vf-summary-container/README.md @@ -0,0 +1 @@ +# vf-summary Pattern diff --git a/components/containers/vf-summary-container/index.scss b/components/containers/vf-summary-container/index.scss new file mode 100755 index 0000000000000000000000000000000000000000..ea797f7942ffda67a8f87c2203e9a14c1d81484c --- /dev/null +++ b/components/containers/vf-summary-container/index.scss @@ -0,0 +1,10 @@ +// setup files required + +// sass-lint:disable clean-import-paths +@import './assets/scss/variables/variables.scss'; +@import './assets/scss/functions/functions.scss'; +@import './assets/scss/mixins/mixins.scss'; + +// pattern specific styles + +@import 'vf-summary.scss'; diff --git a/components/containers/vf-summary-container/package.json b/components/containers/vf-summary-container/package.json new file mode 100755 index 0000000000000000000000000000000000000000..4fae9d2fcc86ac45d665fa995da081ab33ad0dd8 --- /dev/null +++ b/components/containers/vf-summary-container/package.json @@ -0,0 +1,26 @@ +{ + "version": "0.0.1", + "name": "vf-summary", + "description": "vf-summary component", + "homepage": "", + "author": "VF", + "license": "Apache 2.0", + "style": "build/vf-summary.css", + "main": "build/index.js", + "files": [ + "index.scss", + "lib", + "CHANGELOG.md" + ], + "test": "echo \"Error: no test specified\" && exit 1", + "repo": "", + "bugs": { + "url": "" + }, + "dependencies": { + }, + "keywords": [ + "fractal", + "component" + ] +} diff --git a/components/containers/vf-summary-container/vf-summary-container.config.yml b/components/containers/vf-summary-container/vf-summary-container.config.yml new file mode 100755 index 0000000000000000000000000000000000000000..3319ee9348502339bbb8e297397b5216922b7d2e --- /dev/null +++ b/components/containers/vf-summary-container/vf-summary-container.config.yml @@ -0,0 +1,13 @@ +title: Summary Container Pattern +label: Summary Container +context: + section-title: Learn about Cancer + item01: + summary__title: What is Cancer? + summary__text: Cancer is a group of diseases involving abnormal cell growth with the potential to invade or spread to other parts of the body. + item02: + summary__title: Cancer and EMBL + summary__text: EMBL researchers use both computational and traditional lab research to try and understand why cancer happens and how cancer grows and spreads. They can sample and test how tumours and drugs react and find unique molecular data to identify diseases. + item03: + summary__title: What does Cancer look like? + summary__text: Cancer is caused by uncontrolled cell division. These cells are tiny, but but can quickly add up and cancerous cells can look very different from healthy ones. diff --git a/components/containers/vf-summary-container/vf-summary-container.hbs b/components/containers/vf-summary-container/vf-summary-container.hbs new file mode 100755 index 0000000000000000000000000000000000000000..27d3cc9bc8eb3374539a65477dffd0151347433e --- /dev/null +++ b/components/containers/vf-summary-container/vf-summary-container.hbs @@ -0,0 +1,13 @@ +<section class="vf-summary-container | embl-grid embl-grid--with-label"> + + {{> '@vf-section-header'}} + + <div class="vf-section-content | vf-grid vf-grid__col-3"> + + {{> '@vf-summary' item01 }} + {{> '@vf-summary' item02 }} + {{> '@vf-summary' item03 }} + + </div> + +</section> diff --git a/components/containers/vf-summary-container/vf-summary-container.scss b/components/containers/vf-summary-container/vf-summary-container.scss new file mode 100755 index 0000000000000000000000000000000000000000..2ebb6210d13e0b7ee47a27a142c1e1bc7f3bb9cf --- /dev/null +++ b/components/containers/vf-summary-container/vf-summary-container.scss @@ -0,0 +1,5 @@ +// vf-summary + +.vf-summary { + +}