Add Foldable info tabs

content/websites/patterns/foldable-info-tabs/foldable-info-tabs.html

+<ul class="accordion foldable-info-tabs" data-accordion data-allow-all-closed="true" data-multi-expand="true" data-slide-speed="0">
+  <li data-accordion-item>
+    <a href="#" class="tag">I don’t think our service is processing personal data?</a>
+    <div class="accordion-content callout clear" data-tab-content>
+      Are you sure? Some examples of personal data processing that you might be doing without thinking about them: Web analytics capturing users locations? Logging of IP addresses in application logs? Email lists? Surveys of users? Helpdesk or email support?
+    </div>
+  </li>
+  <li data-accordion-item>
+    <a href="#" class="tag">What is “personal data”?</a>
+    <div class="accordion-content callout clear" data-tab-content>
+      <p>“Personal data” is a name, an identification number, location data, an online identifier or to one or more factors specific to the physical, physiological, genetic, mental, economic, cultural or social identity of that natural person.</p>
+      <p>Example of personal data: IP address, ORCID, email address...etc.  </p>
+    </div>
+  </li>
+  <li data-accordion-item>
+    <a href="#" class="tag">What is “processing of personal data”?</a>
+    <div class="accordion-content callout clear" data-tab-content>
+      “Processing of personal data” means any operation, automated or not, performed with the data. Examples of data processing are collection, storage, deletion, structuring, adaptation, consultation, use or dissemination.
+    </div>
+  </li>
+</ul>

content/websites/patterns/foldable-info-tabs/foldable-info-tabs.scss

+.foldable-info-tabs > li {
+  margin-bottom: .5rem;
+  > a:hover {
+    background: #DDD;
+    color: #222;
+  }
+  > a:before {
+    font-family: 'EBI-Common';
+    content: "\003f";
+    margin-right: .5rem;
+
+  }
+  &.is-active > a:before {
+    content: "\0f11a";
+
+  }
+  > .accordion-content {
+  }
+}

content/websites/patterns/foldable-info-tabs/foldable-info-tabs.yml

+name: 'Foldable info tabs'
+tags:
+  - interactive
+  - accordian
+  - help
+category: containers
+description: Add some contextual help.
+versions:
+  - 1.2.0
+  - 1.3.0
+author:
+  name: Ken Hawkins
+  github: khawkins98
+  twitter: khawkins98

content/websites/patterns/foldable-info-tabs/layout.html

+{{#markdown}}
+
+Leveraging the [Foundation Accordian feature](https://foundation.zurb.com/sites/docs/accordion.html), use this pattern to display contextual tips in an unobtrusive way.
+
+<div class="row"><div class="column">
+{{> foldable-info-tabs}}
+</div></div>
+
+{{/markdown}}

content/websites/patterns/modal/layout.html

@@ -6,6 +6,8 @@ Here's how to implement the [Foundation Reveal](https://foundation.zurb.com/site
 
 This is a stub pattern that references the Foudnation documentation, <a href="https://foundation.zurb.com/sites/docs/reveal.html" class="readmore">have a read of it for configurartion options</a>
 
+Tip: if you just need to add some contextual help, [consider the Foldable Info Tabs pattern]({{root}}websites/patterns/foldable-info-tabs.html).
+
 {{/markdown}}
 
 {{> modal}}

content/websites/patterns/modal/modal.yml

 name: 'Dialouge modal'
 tags:
-- prompt
-- messaging
-- modal
-- reveal
-category: typography
-description: For your obtrusive messaging needs. 
+  - prompt
+  - messaging
+  - modal
+  - reveal
+  - interactive
+category: containers
+description: For your obtrusive messaging needs.
 versions:
   - 1.1.0
   - 1.2.0