From e2b7795ff52d6d787318c641e022e4dfe51bfabf Mon Sep 17 00:00:00 2001 From: Alisha Ober <33696009+AlishaOber@users.noreply.github.com> Date: Fri, 20 Apr 2018 10:26:19 -0700 Subject: [PATCH] Quote element (#100) * Created quote element within elements directory based on design Kerri made for the Engineering project * Adjustments to quote element after review * use bourbon margin mixin and update icongrid index file to match others * spacing FIXUP * template cleanup --- css/decanter.css | 21 + js/decanter.min.js | 2 +- scss/elements/_quote.scss | 14 + scss/elements/index.scss | 1 + .../mixins/icon-grid/_icon-grid.scss | 2 +- scss/utilities/mixins/icon-grid/index.scss | 10 +- scss/utilities/mixins/index.scss | 1 + scss/utilities/mixins/quote/_quote.scss | 41 + scss/utilities/mixins/quote/index.scss | 12 + styleguide/item-atoms-buttons.html | 227 ++++ styleguide/item-atoms-mediablockbody.html | 196 ++++ styleguide/item-atoms-mediablockimg.html | 190 ++++ styleguide/item-atoms-skipnav.html | 193 ++++ styleguide/item-atoms.html | 174 +++ .../item-components-molecules-quote.html | 210 ++++ styleguide/item-components-molecules.html | 52 +- styleguide/item-components.html | 64 +- styleguide/item-elements-quote.html | 205 ++++ styleguide/item-elements-tables.html | 2 +- styleguide/item-elements-typography.html | 2 +- styleguide/item-elements.html | 10 +- .../item-mixins-icongrid-icon-grid.html | 142 +++ styleguide/item-mixins-icongrid.html | 142 +++ styleguide/item-mixins-quote-quote.html | 142 +++ styleguide/item-mixins-quote.html | 142 +++ .../item-mixins-tables-table-borderless.html | 2 +- styleguide/item-mixins-tables-tables.html | 2 +- styleguide/item-mixins-tables.html | 2 +- .../item-mixins-typography-caption.html | 2 +- .../item-mixins-typography-credits.html | 2 +- .../item-mixins-typography-font-lead.html | 2 +- ...item-mixins-typography-font-smoothing.html | 2 +- .../item-mixins-typography-font-splash.html | 2 +- styleguide/item-mixins-typography-h1.html | 2 +- styleguide/item-mixins-typography-h2.html | 2 +- styleguide/item-mixins-typography-h3.html | 2 +- styleguide/item-mixins-typography-h4.html | 2 +- styleguide/item-mixins-typography-h5.html | 2 +- styleguide/item-mixins-typography-h6.html | 2 +- .../item-mixins-typography-headings.html | 2 +- styleguide/item-mixins-typography-sans.html | 2 +- styleguide/item-mixins-typography-serif.html | 2 +- ...m-mixins-typography-short-line-length.html | 2 +- styleguide/item-mixins-typography-slab.html | 2 +- styleguide/item-mixins-typography.html | 2 +- styleguide/item-mixins.html | 60 +- styleguide/item-molecules-alerts.html | 270 +++++ styleguide/item-molecules-icongrid.html | 275 +++++ styleguide/item-molecules-mainmenu.html | 281 +++++ styleguide/item-molecules-mega-menu.html | 191 ++++ styleguide/item-molecules-sidenav.html | 267 +++++ styleguide/item-molecules.html | 180 ++++ styleguide/item-organisims-accordion.html | 345 ++++++ styleguide/item-organisims.html | 165 +++ styleguide/item-variables-vendor.html | 142 +++ styleguide/section-atoms.html | 600 +++++++++++ styleguide/section-components.html | 251 +++-- styleguide/section-elements.html | 124 ++- styleguide/section-mixins.html | 189 +++- styleguide/section-molecules.html | 989 ++++++++++++++++++ styleguide/section-organisims.html | 415 ++++++++ templates/elements/quote/quote.html.json | 6 + templates/elements/quote/quote.html.twig | 8 + 63 files changed, 6698 insertions(+), 297 deletions(-) create mode 100644 scss/elements/_quote.scss create mode 100644 scss/utilities/mixins/quote/_quote.scss create mode 100644 scss/utilities/mixins/quote/index.scss create mode 100644 styleguide/item-atoms-buttons.html create mode 100644 styleguide/item-atoms-mediablockbody.html create mode 100644 styleguide/item-atoms-mediablockimg.html create mode 100644 styleguide/item-atoms-skipnav.html create mode 100644 styleguide/item-atoms.html create mode 100644 styleguide/item-components-molecules-quote.html create mode 100644 styleguide/item-elements-quote.html create mode 100644 styleguide/item-mixins-icongrid-icon-grid.html create mode 100644 styleguide/item-mixins-icongrid.html create mode 100644 styleguide/item-mixins-quote-quote.html create mode 100644 styleguide/item-mixins-quote.html create mode 100644 styleguide/item-molecules-alerts.html create mode 100644 styleguide/item-molecules-icongrid.html create mode 100644 styleguide/item-molecules-mainmenu.html create mode 100644 styleguide/item-molecules-mega-menu.html create mode 100644 styleguide/item-molecules-sidenav.html create mode 100644 styleguide/item-molecules.html create mode 100644 styleguide/item-organisims-accordion.html create mode 100644 styleguide/item-organisims.html create mode 100644 styleguide/item-variables-vendor.html create mode 100644 styleguide/section-atoms.html create mode 100644 styleguide/section-molecules.html create mode 100644 styleguide/section-organisims.html create mode 100644 templates/elements/quote/quote.html.json create mode 100644 templates/elements/quote/quote.html.twig diff --git a/css/decanter.css b/css/decanter.css index 119c4961a..d13cf3105 100644 --- a/css/decanter.css +++ b/css/decanter.css @@ -3340,6 +3340,27 @@ p + ol { .decanter-list-unstyled > li { margin-bottom: 0; } +.decanter-quote { + padding: 1em; + overflow: hidden; } + .decanter-quote .decanter-quote__img { + float: left; + margin-right: 1rem; + border-radius: 150px; + border: 7px solid; + height: 300px; + width: 300px; + margin-right: 2em; } + .decanter-quote .decanter-quote__body .decanter-quote__heading { + font-size: 2em; + font-weight: 600; + margin-bottom: .5em; } + .decanter-quote .decanter-quote__body .decanter-quote__detail { + margin: 0; } + .decanter-quote .decanter-quote__body .decanter-quote__quote { + font-size: 1.5em; + font-weight: 600; } + table { border-spacing: 0; min-width: 100%; diff --git a/js/decanter.min.js b/js/decanter.min.js index 23f253e93..ef1609cda 100644 --- a/js/decanter.min.js +++ b/js/decanter.min.js @@ -1 +1 @@ -!function t(e,n,r){function o(c,s){if(!n[c]){if(!e[c]){var u="function"==typeof require&&require;if(!s&&u)return u(c,!0);if(i)return i(c,!0);var a=new Error("Cannot find module '"+c+"'");throw a.code="MODULE_NOT_FOUND",a}var f=n[c]={exports:{}};e[c][0].call(f.exports,function(t){var n=e[c][1][t];return o(n||t)},f,f.exports,t,e,n,r)}return n[c].exports}for(var i="function"==typeof require&&require,c=0;c=e||n<0||d&&t-f>=c}function x(){var t,n,r=y();if(m(r))return j(r);u=setTimeout(x,(n=e-((t=r)-a),d?h(n,c-(t-f)):n))}function j(t){return u=void 0,p&&o?v(t):(o=i=void 0,s)}function E(){var t,n=y(),r=m(n);if(o=arguments,i=this,a=n,r){if(void 0===u)return f=t=a,u=setTimeout(x,e),l?v(t):s;if(d)return u=setTimeout(x,e),v(a)}return void 0===u&&(u=setTimeout(x,e)),s}return e=w(e)||0,g(n)&&(l=!!n.leading,c=(d="maxWait"in n)?b(w(n.maxWait)||0,e):c,p="trailing"in n?!!n.trailing:p),E.cancel=function(){void 0!==u&&clearTimeout(u),f=0,o=a=i=u=void 0},E.flush=function(){return void 0===u?s:j(y())},E}}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}],8:[function(t,e,n){"use strict";var r=Object.getOwnPropertySymbols,o=Object.prototype.hasOwnProperty,i=Object.prototype.propertyIsEnumerable;e.exports=function(){try{if(!Object.assign)return!1;var t=new String("abc");if(t[5]="de","5"===Object.getOwnPropertyNames(t)[0])return!1;for(var e={},n=0;n<10;n++)e["_"+String.fromCharCode(n)]=n;if("0123456789"!==Object.getOwnPropertyNames(e).map(function(t){return e[t]}).join(""))return!1;var r={};return"abcdefghijklmnopqrst".split("").forEach(function(t){r[t]=t}),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},r)).join("")}catch(t){return!1}}()?Object.assign:function(t,e){for(var n,c,s=function(t){if(null===t||void 0===t)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(t)}(t),u=1;u-1?t.split(" ").map(function(t){return o({type:t},l)}):(l.type=t,[l])}(n,t[n]);return e.concat(a)},[]);return o({add:function(t){n.forEach(function(e){t.addEventListener(e.type,e.delegate,e.options)})},remove:function(t){n.forEach(function(e){t.removeEventListener(e.type,e.delegate,e.options)})}},e)}},{"../delegate":11,"../delegateAll":12,"object-assign":8}],10:[function(t,e,n){"use strict";e.exports=function(t){return function(e){return t.some(function(t){return!1===t.call(this,e)},this)}}},{}],11:[function(t,e,n){"use strict";t("element-closest"),e.exports=function(t,e){return function(n){var r=n.target.closest(t);if(r)return e.call(r,n)}}},{"element-closest":6}],12:[function(t,e,n){"use strict";var r=t("../delegate"),o=t("../compose");e.exports=function(t){var e=Object.keys(t);if(1===e.length&&"*"===e[0])return t["*"];var n=e.reduce(function(e,n){return e.push(r(n,t[n])),e},[]);return o(n)}},{"../compose":10,"../delegate":11}],13:[function(t,e,n){"use strict";e.exports=function(t,e){return function(n){if(t!==n.target&&!t.contains(n.target))return e.call(this,n)}}},{}],14:[function(t,e,n){"use strict";e.exports=function(t,e){var n=function(r){return r.currentTarget.removeEventListener(r.type,n,e),t.call(this,r)};return n}},{}],15:[function(t,e,n){"use strict";var r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},o=/(^\s+)|(\s+$)/g,i=/\s+/,c=String.prototype.trim?function(t){return t.trim()}:function(t){return t.replace(o,"")};e.exports=function(t,e){if("string"!=typeof t)throw new Error("Expected a string but got "+(void 0===t?"undefined":r(t)));e||(e=window.document);var n=e.getElementById?e.getElementById.bind(e):function(t){return this.querySelector('[id="'+t.replace(/"/g,'\\"')+'"]')}.bind(e);return 1===(t=c(t).split(i)).length&&""===t[0]?[]:t.map(function(t){var e=n(t);if(!e)throw new Error('no element with id: "'+t+'"');return e})}},{}],16:[function(t,e,n){"use strict";function r(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}var o=t("../utils/behavior"),i=t("array-filter"),c=t("array-foreach"),s=t("../utils/toggle"),u=t("../utils/is-in-viewport"),a=t("../events").CLICK,f=t("../config").prefix,l="."+f+"-accordion, ."+f+"-accordion--bordered",d="."+f+"-accordion__button[aria-controls]",p="aria-expanded",v=function(t,e){var n=t.closest(l);if(!n)throw new Error(d+" is missing outer "+l);e=s(t,e);var r="true"===n.getAttribute("aria-multiselectable");e&&!r&&c(y(n),function(e){e!==t&&s(e,!1)})},b=function(t){return v(t,!0)},h=function(t){return v(t,!1)},y=function(t){return i(t.querySelectorAll(d),function(e){return e.closest(l)===t})},g=o(r({},a,r({},d,function(t){t.preventDefault(),v(this),"true"===this.getAttribute(p)&&(u(this)||this.scrollIntoView())})),{init:function(t){c(t.querySelectorAll(d),function(t){var e="true"===t.getAttribute(p);v(t,e)})},ACCORDION:l,BUTTON:d,show:b,hide:h,toggle:v,getButtons:y}),m=function(t){this.root=t,g.on(this.root)};t("object-assign")(m,g),m.prototype.show=b,m.prototype.hide=h,m.prototype.remove=function(){g.off(this.root)},e.exports=m},{"../config":25,"../events":26,"../utils/behavior":30,"../utils/is-in-viewport":31,"../utils/toggle":35,"array-filter":1,"array-foreach":2,"object-assign":8}],17:[function(t,e,n){"use strict";function r(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}var o=t("../utils/behavior"),i=(t("../utils/toggle"),t("../events").CLICK),c=t("../config").prefix,s="."+c+"-banner-header",u=c+"-banner-header-expanded";e.exports=o(r({},i,r({},s+" [aria-controls]",function(t){return t.preventDefault(),this.closest(s).classList.toggle(u),!1})))},{"../config":25,"../events":26,"../utils/behavior":30,"../utils/toggle":35}],18:[function(t,e,n){"use strict";function r(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}t("./accordion");var o=t("../utils/behavior"),i=t("lodash.debounce"),c=t("array-foreach"),s=t("../utils/select"),u=t("../events").CLICK,a=t("../config").prefix,f="hidden",l="."+a+"-footer-big"+" nav",d=l+" ."+a+"-footer-primary-link",p=l+" ul",v=i(function(){var t=window.innerWidth<600;c(s(p),function(e){e.classList.toggle(f,t)})},180);e.exports=o(r({},u,r({},d,function(){var t=this.closest(p);t.classList.remove(f);var e=t.closest(l).querySelectorAll("ul");c(e,function(e){e!==t&&e.classList.add(f)})})),{HIDE_MAX_WIDTH:600,DEBOUNCE_RATE:180,init:function(t){v(),window.addEventListener("resize",v)},teardown:function(t){window.removeEventListener("resize",v)}})},{"../config":25,"../events":26,"../utils/behavior":30,"../utils/select":32,"./accordion":16,"array-foreach":2,"lodash.debounce":7}],19:[function(t,e,n){"use strict";e.exports={accordion:t("./accordion"),banner:t("./banner"),footer:t("./footer"),navigation:t("./navigation"),password:t("./password"),search:t("./search"),skipnav:t("./skipnav"),validator:t("./validator")}},{"./accordion":16,"./banner":17,"./footer":18,"./navigation":20,"./password":21,"./search":22,"./skipnav":23,"./validator":24}],20:[function(t,e,n){"use strict";var r;function o(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}var i=t("../utils/behavior"),c=t("array-foreach"),s=t("../utils/select"),u=t("./accordion"),a=t("../events").CLICK,f=t("../config").prefix,l="."+f+"-nav",d=l+" a",p="."+f+"-main-menu__btn",v="."+f+"-nav__close",b=v+", ."+f+"-nav__overlay",h=[l,"."+f+"-nav__overlay"].join(", "),y="decanter-mobile-nav--active",g=function(t){var e=document.body;"boolean"!=typeof t&&(t=!e.classList.contains(y)),e.classList.toggle(y,t);var n=this.closest("header");if(c(s(h),function(t){t.classList.toggle("is-visible")}),t&&n){var r=n.querySelector(v);r&&r.focus()}return t},m=i(o({},a,(o(r={},p,g),o(r,b,g),o(r,d,function(){var t=this.closest(u.ACCORDION);t&&u.getButtons(t).forEach(function(t){return u.hide(t)}),document.body.classList.contains(y)&&g.call(this)}),r))),w=t("object-assign");e.exports=w(function(t){return m.on(t)},m)},{"../config":25,"../events":26,"../utils/behavior":30,"../utils/select":32,"./accordion":16,"array-foreach":2,"object-assign":8}],21:[function(t,e,n){"use strict";function r(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}var o=t("../utils/behavior"),i=t("../utils/toggle-form-input"),c=t("../events").CLICK,s=t("../config").prefix,u="."+s+"-show_password, ."+s+"-show_multipassword";e.exports=o(r({},c,r({},u,function(t){t.preventDefault(),i(this)})))},{"../config":25,"../events":26,"../utils/behavior":30,"../utils/toggle-form-input":34}],22:[function(t,e,n){"use strict";function r(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}var o=t("../utils/behavior"),i=t("array-foreach"),c=t("receptor/ignore"),s=t("../utils/select"),u=t("../events").CLICK,a=".js-search-button",f=".js-search-form",l=t("../config").prefix+"-sr-only",d=void 0,p=function(t,e){var n,r=(n=t.closest("header"))?n.querySelector(f):document.querySelector(f);if(!r)throw new Error("No "+f+" found for search toggle in header!");if(t.hidden=e,r.classList.toggle(l,!e),e){var o=r.querySelector("[type=search]");o&&o.focus();var i=c(r,function(t){d&&function(t){p(this,!1),d=void 0}.call(d),document.body.removeEventListener(u,i)});setTimeout(function(){document.body.addEventListener(u,i)},0)}},v=o(r({},u,r({},a,function(t){p(this,!0),d=this})),{init:function(t){i(s(a,t),function(t){p(t,!1)})},teardown:function(t){d=void 0}}),b=t("object-assign");e.exports=b(function(t){return v.on(t)},v)},{"../config":25,"../events":26,"../utils/behavior":30,"../utils/select":32,"array-foreach":2,"object-assign":8,"receptor/ignore":13}],23:[function(t,e,n){"use strict";function r(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}var o=t("../utils/behavior"),i=t("receptor/once"),c=t("../events").CLICK,s="."+t("../config").prefix+'-skipnav[href^="#"]';e.exports=o(r({},c,r({},s,function(t){var e=this.getAttribute("href").slice(1),n=document.getElementById(e);n&&(n.setAttribute("tabindex",0),n.addEventListener("blur",i(function(t){n.setAttribute("tabindex",-1)})))})))},{"../config":25,"../events":26,"../utils/behavior":30,"receptor/once":14}],24:[function(t,e,n){"use strict";var r=t("../utils/behavior"),o=t("../utils/validate-input"),i=(t("lodash.debounce"),r({"keyup change":{"input[data-validation-element]":function(t){return o(this)}}})),c=t("object-assign");e.exports=c(function(t){return i.on(t)},i)},{"../utils/behavior":30,"../utils/validate-input":36,"lodash.debounce":7,"object-assign":8}],25:[function(t,e,n){"use strict";e.exports={prefix:"decanter"}},{}],26:[function(t,e,n){"use strict";e.exports={CLICK:"click"}},{}],27:[function(t,e,n){"use strict";var r=window.HTMLElement.prototype,o="hidden";o in r||Object.defineProperty(r,o,{get:function(){return this.hasAttribute(o)},set:function(t){t?this.setAttribute(o,""):this.removeAttribute(o)}})},{}],28:[function(t,e,n){"use strict";t("classlist-polyfill"),t("./element-hidden")},{"./element-hidden":27,"classlist-polyfill":3}],29:[function(t,e,n){"use strict";var r=t("domready");t("./polyfills");var o=t("./config"),i=t("./components");o.components=i,r(function(){var t=document.body;for(var e in i){i[e].on(t)}}),e.exports=o},{"./components":19,"./config":25,"./polyfills":28,domready:4}],30:[function(t,e,n){"use strict";var r=t("object-assign"),o=t("array-foreach"),i=t("receptor/behavior"),c=function(){var t=[].slice.call(arguments);return function(e){var n=this;e||(e=document.body),o(t,function(t){"function"==typeof n[t]&&n[t].call(n,e)})}};e.exports=function(t,e){return i(t,r({on:c("init","add"),off:c("teardown","remove")},e))}},{"array-foreach":2,"object-assign":8,"receptor/behavior":9}],31:[function(t,e,n){"use strict";e.exports=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:window,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:document.documentElement,r=t.getBoundingClientRect();return r.top>=0&&r.left>=0&&r.bottom<=(e.innerHeight||n.clientHeight)&&r.right<=(e.innerWidth||n.clientWidth)}},{}],32:[function(t,e,n){"use strict";var r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t};e.exports=function(t,e){if("string"!=typeof t)return[];var n;e&&((n=e)&&"object"===(void 0===n?"undefined":r(n))&&1===n.nodeType)||(e=window.document);var o=e.querySelectorAll(t);return Array.prototype.slice.call(o)}},{}],33:[function(t,e,n){"use strict";e.exports=function(t,e){t.setAttribute("autocapitalize","off"),t.setAttribute("autocorrect","off"),t.setAttribute("type",e?"password":"text")}},{}],34:[function(t,e,n){"use strict";var r=t("array-foreach"),o=t("resolve-id-refs"),i=(t("./select"),t("./toggle-field-mask")),c="aria-pressed",s="data-show-text";e.exports=function(t){var e=t.hasAttribute(c)&&"true"!==t.getAttribute(c),n=o(t.getAttribute("aria-controls"));r(n,function(t){return i(t,e)}),t.hasAttribute(s)||t.setAttribute(s,t.textContent);var u=t.getAttribute(s),a=t.getAttribute("data-hide-text")||u.replace(/\bShow\b/i,function(t){return("S"===t[0]?"H":"h")+"ide"});return t.textContent=e?u:a,t.setAttribute(c,e),e}},{"./select":32,"./toggle-field-mask":33,"array-foreach":2,"resolve-id-refs":15}],35:[function(t,e,n){"use strict";var r="aria-expanded";e.exports=function(t,e){"boolean"!=typeof e&&(e="false"===t.getAttribute(r)),t.setAttribute(r,e);var n=t.getAttribute("aria-controls"),o=document.getElementById(n);if(!o)throw new Error('No toggle target found with id: "'+n+'"');return o.setAttribute("aria-hidden",!e),e}},{}],36:[function(t,e,n){"use strict";var r=t("elem-dataset"),o=t("../config").prefix+"-checklist-checked";e.exports=function(t){var e=r(t),n=e.validationElement,i="#"===n.charAt(0)?document.querySelector(n):document.getElementById(n);if(!i)throw new Error('No validation element found with id: "'+n+'"');for(var c in e)if(c.startsWith("validate")){var s=c.substr("validate".length).toLowerCase(),u=new RegExp(e[c]),a='[data-validator="'+s+'"]',f=i.querySelector(a);if(!f)throw new Error('No validator checkbox found for: "'+s+'"');var l=u.test(t.value);f.classList.toggle(o,l),f.setAttribute("aria-checked",l)}}},{"../config":25,"elem-dataset":5}]},{},[29]); \ No newline at end of file +!function t(e,n,r){function o(c,s){if(!n[c]){if(!e[c]){var u="function"==typeof require&&require;if(!s&&u)return u(c,!0);if(i)return i(c,!0);var a=new Error("Cannot find module '"+c+"'");throw a.code="MODULE_NOT_FOUND",a}var f=n[c]={exports:{}};e[c][0].call(f.exports,function(t){var n=e[c][1][t];return o(n||t)},f,f.exports,t,e,n,r)}return n[c].exports}for(var i="function"==typeof require&&require,c=0;c=e||n<0||d&&t-f>=c}function x(){var t,n,r=y();if(m(r))return j(r);u=setTimeout(x,(n=e-((t=r)-a),d?b(n,c-(t-f)):n))}function j(t){return u=void 0,p&&o?v(t):(o=i=void 0,s)}function E(){var t,n=y(),r=m(n);if(o=arguments,i=this,a=n,r){if(void 0===u)return f=t=a,u=setTimeout(x,e),l?v(t):s;if(d)return u=setTimeout(x,e),v(a)}return void 0===u&&(u=setTimeout(x,e)),s}return e=w(e)||0,g(n)&&(l=!!n.leading,c=(d="maxWait"in n)?h(w(n.maxWait)||0,e):c,p="trailing"in n?!!n.trailing:p),E.cancel=function(){void 0!==u&&clearTimeout(u),f=0,o=a=i=u=void 0},E.flush=function(){return void 0===u?s:j(y())},E}}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}],8:[function(t,e,n){"use strict";var r=Object.getOwnPropertySymbols,o=Object.prototype.hasOwnProperty,i=Object.prototype.propertyIsEnumerable;e.exports=function(){try{if(!Object.assign)return!1;var t=new String("abc");if(t[5]="de","5"===Object.getOwnPropertyNames(t)[0])return!1;for(var e={},n=0;n<10;n++)e["_"+String.fromCharCode(n)]=n;if("0123456789"!==Object.getOwnPropertyNames(e).map(function(t){return e[t]}).join(""))return!1;var r={};return"abcdefghijklmnopqrst".split("").forEach(function(t){r[t]=t}),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},r)).join("")}catch(t){return!1}}()?Object.assign:function(t,e){for(var n,c,s=function(t){if(null===t||void 0===t)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(t)}(t),u=1;u-1?t.split(" ").map(function(t){return o({type:t},l)}):(l.type=t,[l])}(n,t[n]);return e.concat(a)},[]);return o({add:function(t){n.forEach(function(e){t.addEventListener(e.type,e.delegate,e.options)})},remove:function(t){n.forEach(function(e){t.removeEventListener(e.type,e.delegate,e.options)})}},e)}},{"../delegate":11,"../delegateAll":12,"object-assign":8}],10:[function(t,e,n){"use strict";e.exports=function(t){return function(e){return t.some(function(t){return!1===t.call(this,e)},this)}}},{}],11:[function(t,e,n){"use strict";t("element-closest"),e.exports=function(t,e){return function(n){var r=n.target.closest(t);if(r)return e.call(r,n)}}},{"element-closest":6}],12:[function(t,e,n){"use strict";var r=t("../delegate"),o=t("../compose");e.exports=function(t){var e=Object.keys(t);if(1===e.length&&"*"===e[0])return t["*"];var n=e.reduce(function(e,n){return e.push(r(n,t[n])),e},[]);return o(n)}},{"../compose":10,"../delegate":11}],13:[function(t,e,n){"use strict";e.exports=function(t,e){return function(n){if(t!==n.target&&!t.contains(n.target))return e.call(this,n)}}},{}],14:[function(t,e,n){"use strict";e.exports=function(t,e){var n=function(r){return r.currentTarget.removeEventListener(r.type,n,e),t.call(this,r)};return n}},{}],15:[function(t,e,n){"use strict";var r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},o=/(^\s+)|(\s+$)/g,i=/\s+/,c=String.prototype.trim?function(t){return t.trim()}:function(t){return t.replace(o,"")};e.exports=function(t,e){if("string"!=typeof t)throw new Error("Expected a string but got "+(void 0===t?"undefined":r(t)));e||(e=window.document);var n=e.getElementById?e.getElementById.bind(e):function(t){return this.querySelector('[id="'+t.replace(/"/g,'\\"')+'"]')}.bind(e);return 1===(t=c(t).split(i)).length&&""===t[0]?[]:t.map(function(t){var e=n(t);if(!e)throw new Error('no element with id: "'+t+'"');return e})}},{}],16:[function(t,e,n){"use strict";function r(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}var o=t("../utils/behavior"),i=t("array-filter"),c=t("array-foreach"),s=t("../utils/toggle"),u=t("../utils/is-in-viewport"),a=t("../events").CLICK,f=t("../config").prefix,l="."+f+"-accordion",d="."+f+"-accordion__button[aria-controls]",p="aria-expanded",v=function(t,e){var n=t.closest(l);if(!n)throw new Error(d+" is missing outer "+l);e=s(t,e);var r="true"===n.getAttribute("aria-multiselectable");e&&!r&&c(y(n),function(e){e!==t&&s(e,!1)})},h=function(t){return v(t,!0)},b=function(t){return v(t,!1)},y=function(t){return i(t.querySelectorAll(d),function(e){return e.closest(l)===t})},g=o(r({},a,r({},d,function(t){t.preventDefault(),v(this),"true"===this.getAttribute(p)&&(u(this)||this.scrollIntoView())})),{init:function(t){c(t.querySelectorAll(d),function(t){var e="true"===t.getAttribute(p);v(t,e)})},ACCORDION:l,BUTTON:d,show:h,hide:b,toggle:v,getButtons:y}),m=function(t){this.root=t,g.on(this.root)};t("object-assign")(m,g),m.prototype.show=h,m.prototype.hide=b,m.prototype.remove=function(){g.off(this.root)},e.exports=m},{"../config":25,"../events":26,"../utils/behavior":30,"../utils/is-in-viewport":31,"../utils/toggle":35,"array-filter":1,"array-foreach":2,"object-assign":8}],17:[function(t,e,n){"use strict";function r(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}var o=t("../utils/behavior"),i=(t("../utils/toggle"),t("../events").CLICK),c=t("../config").prefix,s="."+c+"-banner-header",u=c+"-banner-header-expanded";e.exports=o(r({},i,r({},s+" [aria-controls]",function(t){return t.preventDefault(),this.closest(s).classList.toggle(u),!1})))},{"../config":25,"../events":26,"../utils/behavior":30,"../utils/toggle":35}],18:[function(t,e,n){"use strict";function r(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}t("./accordion");var o=t("../utils/behavior"),i=t("lodash.debounce"),c=t("array-foreach"),s=t("../utils/select"),u=t("../events").CLICK,a=t("../config").prefix,f="hidden",l="."+a+"-footer-big"+" nav",d=l+" ."+a+"-footer-primary-link",p=l+" ul",v=i(function(){var t=window.innerWidth<600;c(s(p),function(e){e.classList.toggle(f,t)})},180);e.exports=o(r({},u,r({},d,function(){var t=this.closest(p);t.classList.remove(f);var e=t.closest(l).querySelectorAll("ul");c(e,function(e){e!==t&&e.classList.add(f)})})),{HIDE_MAX_WIDTH:600,DEBOUNCE_RATE:180,init:function(t){v(),window.addEventListener("resize",v)},teardown:function(t){window.removeEventListener("resize",v)}})},{"../config":25,"../events":26,"../utils/behavior":30,"../utils/select":32,"./accordion":16,"array-foreach":2,"lodash.debounce":7}],19:[function(t,e,n){"use strict";e.exports={accordion:t("./accordion"),banner:t("./banner"),footer:t("./footer"),navigation:t("./navigation"),password:t("./password"),search:t("./search"),skipnav:t("./skipnav"),validator:t("./validator")}},{"./accordion":16,"./banner":17,"./footer":18,"./navigation":20,"./password":21,"./search":22,"./skipnav":23,"./validator":24}],20:[function(t,e,n){"use strict";var r;function o(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}var i=t("../utils/behavior"),c=t("array-foreach"),s=t("../utils/select"),u=t("./accordion"),a=t("../events").CLICK,f=t("../config").prefix,l="."+f+"-nav",d=l+" a",p="."+f+"-main-menu__btn",v="."+f+"-nav__close",h=v+", ."+f+"-nav__overlay",b=[l,"."+f+"-nav__overlay"].join(", "),y="decanter-mobile-nav--active",g=function(t){var e=document.body;"boolean"!=typeof t&&(t=!e.classList.contains(y)),e.classList.toggle(y,t);var n=this.closest("header");if(c(s(b),function(t){t.classList.toggle("is-visible")}),t&&n){var r=n.querySelector(v);r&&r.focus()}return t},m=i(o({},a,(o(r={},p,g),o(r,h,g),o(r,d,function(){var t=this.closest(u.ACCORDION);t&&u.getButtons(t).forEach(function(t){return u.hide(t)}),document.body.classList.contains(y)&&g.call(this)}),r))),w=t("object-assign");e.exports=w(function(t){return m.on(t)},m)},{"../config":25,"../events":26,"../utils/behavior":30,"../utils/select":32,"./accordion":16,"array-foreach":2,"object-assign":8}],21:[function(t,e,n){"use strict";function r(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}var o=t("../utils/behavior"),i=t("../utils/toggle-form-input"),c=t("../events").CLICK,s=t("../config").prefix,u="."+s+"-show_password, ."+s+"-show_multipassword";e.exports=o(r({},c,r({},u,function(t){t.preventDefault(),i(this)})))},{"../config":25,"../events":26,"../utils/behavior":30,"../utils/toggle-form-input":34}],22:[function(t,e,n){"use strict";function r(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}var o=t("../utils/behavior"),i=t("array-foreach"),c=t("receptor/ignore"),s=t("../utils/select"),u=t("../events").CLICK,a=".js-search-button",f=".js-search-form",l=t("../config").prefix+"-sr-only",d=void 0,p=function(t,e){var n,r=(n=t.closest("header"))?n.querySelector(f):document.querySelector(f);if(!r)throw new Error("No "+f+" found for search toggle in header!");if(t.hidden=e,r.classList.toggle(l,!e),e){var o=r.querySelector("[type=search]");o&&o.focus();var i=c(r,function(t){d&&function(t){p(this,!1),d=void 0}.call(d),document.body.removeEventListener(u,i)});setTimeout(function(){document.body.addEventListener(u,i)},0)}},v=o(r({},u,r({},a,function(t){p(this,!0),d=this})),{init:function(t){i(s(a,t),function(t){p(t,!1)})},teardown:function(t){d=void 0}}),h=t("object-assign");e.exports=h(function(t){return v.on(t)},v)},{"../config":25,"../events":26,"../utils/behavior":30,"../utils/select":32,"array-foreach":2,"object-assign":8,"receptor/ignore":13}],23:[function(t,e,n){"use strict";function r(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}var o=t("../utils/behavior"),i=t("receptor/once"),c=t("../events").CLICK,s="."+t("../config").prefix+'-skipnav[href^="#"]';e.exports=o(r({},c,r({},s,function(t){var e=this.getAttribute("href").slice(1),n=document.getElementById(e);n&&(n.setAttribute("tabindex",0),n.addEventListener("blur",i(function(t){n.setAttribute("tabindex",-1)})))})))},{"../config":25,"../events":26,"../utils/behavior":30,"receptor/once":14}],24:[function(t,e,n){"use strict";var r=t("../utils/behavior"),o=t("../utils/validate-input"),i=(t("lodash.debounce"),r({"keyup change":{"input[data-validation-element]":function(t){return o(this)}}})),c=t("object-assign");e.exports=c(function(t){return i.on(t)},i)},{"../utils/behavior":30,"../utils/validate-input":36,"lodash.debounce":7,"object-assign":8}],25:[function(t,e,n){"use strict";e.exports={prefix:"decanter"}},{}],26:[function(t,e,n){"use strict";e.exports={CLICK:"click"}},{}],27:[function(t,e,n){"use strict";var r=window.HTMLElement.prototype,o="hidden";o in r||Object.defineProperty(r,o,{get:function(){return this.hasAttribute(o)},set:function(t){t?this.setAttribute(o,""):this.removeAttribute(o)}})},{}],28:[function(t,e,n){"use strict";t("classlist-polyfill"),t("./element-hidden")},{"./element-hidden":27,"classlist-polyfill":3}],29:[function(t,e,n){"use strict";var r=t("domready");t("./polyfills");var o=t("./config"),i=t("./components");o.components=i,r(function(){var t=document.body;for(var e in i){i[e].on(t)}}),e.exports=o},{"./components":19,"./config":25,"./polyfills":28,domready:4}],30:[function(t,e,n){"use strict";var r=t("object-assign"),o=t("array-foreach"),i=t("receptor/behavior"),c=function(){var t=[].slice.call(arguments);return function(e){var n=this;e||(e=document.body),o(t,function(t){"function"==typeof n[t]&&n[t].call(n,e)})}};e.exports=function(t,e){return i(t,r({on:c("init","add"),off:c("teardown","remove")},e))}},{"array-foreach":2,"object-assign":8,"receptor/behavior":9}],31:[function(t,e,n){"use strict";e.exports=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:window,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:document.documentElement,r=t.getBoundingClientRect();return r.top>=0&&r.left>=0&&r.bottom<=(e.innerHeight||n.clientHeight)&&r.right<=(e.innerWidth||n.clientWidth)}},{}],32:[function(t,e,n){"use strict";var r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t};e.exports=function(t,e){if("string"!=typeof t)return[];var n;e&&((n=e)&&"object"===(void 0===n?"undefined":r(n))&&1===n.nodeType)||(e=window.document);var o=e.querySelectorAll(t);return Array.prototype.slice.call(o)}},{}],33:[function(t,e,n){"use strict";e.exports=function(t,e){t.setAttribute("autocapitalize","off"),t.setAttribute("autocorrect","off"),t.setAttribute("type",e?"password":"text")}},{}],34:[function(t,e,n){"use strict";var r=t("array-foreach"),o=t("resolve-id-refs"),i=(t("./select"),t("./toggle-field-mask")),c="aria-pressed",s="data-show-text";e.exports=function(t){var e=t.hasAttribute(c)&&"true"!==t.getAttribute(c),n=o(t.getAttribute("aria-controls"));r(n,function(t){return i(t,e)}),t.hasAttribute(s)||t.setAttribute(s,t.textContent);var u=t.getAttribute(s),a=t.getAttribute("data-hide-text")||u.replace(/\bShow\b/i,function(t){return("S"===t[0]?"H":"h")+"ide"});return t.textContent=e?u:a,t.setAttribute(c,e),e}},{"./select":32,"./toggle-field-mask":33,"array-foreach":2,"resolve-id-refs":15}],35:[function(t,e,n){"use strict";var r="aria-expanded";e.exports=function(t,e){"boolean"!=typeof e&&(e="false"===t.getAttribute(r)),t.setAttribute(r,e);var n=t.getAttribute("aria-controls"),o=document.getElementById(n);if(!o)throw new Error('No toggle target found with id: "'+n+'"');return o.setAttribute("aria-hidden",!e),e}},{}],36:[function(t,e,n){"use strict";var r=t("elem-dataset"),o=t("../config").prefix+"-checklist-checked";e.exports=function(t){var e=r(t),n=e.validationElement,i="#"===n.charAt(0)?document.querySelector(n):document.getElementById(n);if(!i)throw new Error('No validation element found with id: "'+n+'"');for(var c in e)if(c.startsWith("validate")){var s=c.substr("validate".length).toLowerCase(),u=new RegExp(e[c]),a='[data-validator="'+s+'"]',f=i.querySelector(a);if(!f)throw new Error('No validator checkbox found for: "'+s+'"');var l=u.test(t.value);f.classList.toggle(o,l),f.setAttribute("aria-checked",l)}}},{"../config":25,"elem-dataset":5}]},{},[29]); \ No newline at end of file diff --git a/scss/elements/_quote.scss b/scss/elements/_quote.scss new file mode 100644 index 000000000..b8df8d133 --- /dev/null +++ b/scss/elements/_quote.scss @@ -0,0 +1,14 @@ +@charset "UTF-8"; + +// +// Quote +// +// Default styling for a quote element. +// +// Markup: ../../templates/elements/quote/quote.html.twig +// +// Style guide: Elements.Quote +// +.decanter-quote { + @include decanter-quote; +} diff --git a/scss/elements/index.scss b/scss/elements/index.scss index 11e37c4bc..1c246f6fc 100644 --- a/scss/elements/index.scss +++ b/scss/elements/index.scss @@ -13,5 +13,6 @@ 'inputs', 'links', 'list', + 'quote', 'table', 'typography'; diff --git a/scss/utilities/mixins/icon-grid/_icon-grid.scss b/scss/utilities/mixins/icon-grid/_icon-grid.scss index 31d88cc6d..fb293249a 100644 --- a/scss/utilities/mixins/icon-grid/_icon-grid.scss +++ b/scss/utilities/mixins/icon-grid/_icon-grid.scss @@ -5,7 +5,7 @@ // // Grid of icons (or images) with text. // -// Style guide: Mixins.icon-grid +// Style guide: Mixins.IconGrid.icon-grid // @mixin icon-grid { .decanter-icon-grid__row { diff --git a/scss/utilities/mixins/icon-grid/index.scss b/scss/utilities/mixins/icon-grid/index.scss index 5d96a1eb2..e6fa6f80c 100644 --- a/scss/utilities/mixins/icon-grid/index.scss +++ b/scss/utilities/mixins/icon-grid/index.scss @@ -1,8 +1,12 @@ @charset "UTF-8"; -/// -/// ROLL UP -/// +// +// Icon Grid +// +// Mixins for Icon Grid +// +// Style guide: Mixins.IconGrid +// @import 'icon-grid'; diff --git a/scss/utilities/mixins/index.scss b/scss/utilities/mixins/index.scss index 39b45e4a0..9b126fb9a 100644 --- a/scss/utilities/mixins/index.scss +++ b/scss/utilities/mixins/index.scss @@ -16,5 +16,6 @@ 'lists/index', 'menus/index', 'navigation/index', + 'quote/index', 'tables/index', 'typography/index'; diff --git a/scss/utilities/mixins/quote/_quote.scss b/scss/utilities/mixins/quote/_quote.scss new file mode 100644 index 000000000..c50984286 --- /dev/null +++ b/scss/utilities/mixins/quote/_quote.scss @@ -0,0 +1,41 @@ +@charset "UTF-8"; + +// +// @quote +// +// Default styling for a quote element. +// +// Style guide: Mixins.Quote.quote +// +@mixin decanter-quote { + @include padding(1em); + @include overflow; + + .decanter-quote__img { + @include media-block-img; + + border-radius: 150px; + border: 7px solid; + height: 300px; + width: 300px; + + @include margin(null 2em null null); + } + + .decanter-quote__body { + .decanter-quote__heading { + font-size: 2em; + font-weight: 600; + margin-bottom: .5em; + } + + .decanter-quote__detail { + margin: 0; + } + + .decanter-quote__quote { + font-size: 1.5em; + font-weight: 600; + } + } +} diff --git a/scss/utilities/mixins/quote/index.scss b/scss/utilities/mixins/quote/index.scss new file mode 100644 index 000000000..075f0acdd --- /dev/null +++ b/scss/utilities/mixins/quote/index.scss @@ -0,0 +1,12 @@ +@charset "UTF-8"; + +// +// Quote +// +// Mixins for Quote +// +// Style guide: Mixins.Quote +// + +@import +'quote'; diff --git a/styleguide/item-atoms-buttons.html b/styleguide/item-atoms-buttons.html new file mode 100644 index 000000000..ebaadb0db --- /dev/null +++ b/styleguide/item-atoms-buttons.html @@ -0,0 +1,227 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
+
+

Decanter Style Guide and Pattern Library

+
+ +
+
+ + +
+
+

+ + + 1.1 + + Atoms.Buttons + + + Buttons + +

+ +

+ + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

+ +
+

Simple button element to aid in creating interactive design.

+ +
+ +
+ +
+
+ Examples
+ +
+ Default styling +
+ +
+ Button Title + +
+
+ +
+ .decanter-button--secondary +
+
+ Secondary button +
+
+ Button Title + +
+
+
+ .decanter-button--big +
+
+ Big button +
+
+ Button Title + +
+
+
+ .decanter-button--unstyled +
+
+ Unstyled button +
+
+ Button Title + +
+
+
+
+ + Markup: ../templates/components/atoms/buttons/buttons.html.twig + + 
<a href="#" class="decanter-button [modifier class]">Button Title</a>
+
+
+ +
+ Source: components/atoms/_buttons.scss, line 3 +
+
+
+ + + + + + + + + + + + + + + + + diff --git a/styleguide/item-atoms-mediablockbody.html b/styleguide/item-atoms-mediablockbody.html new file mode 100644 index 000000000..8fe387a24 --- /dev/null +++ b/styleguide/item-atoms-mediablockbody.html @@ -0,0 +1,196 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
+
+

Decanter Style Guide and Pattern Library

+
+ +
+
+ + +
+
+

+ + + 1.2 + + Atoms.MediaBlockBody + + + Media Block Body + +

+ +

+ + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

+ +
+

Allows for text that is next to a floated media block image to flow within +the grid without dropping to a new line prematurely.

+ +
+ +
+ +
+
+ Example
+ + +
+
+

Lorem ipsum dolor sit

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

+
+
+
+ +
+
+ + Markup + + 
<div class="decanter-media-block__body">
+ <h2>Lorem ipsum dolor sit</h2>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+</div>
+
+ +
+ Source: components/atoms/_media-block.scss, line 18 +
+
+
+ + + + + + + + + + + + + + + + + diff --git a/styleguide/item-atoms-mediablockimg.html b/styleguide/item-atoms-mediablockimg.html new file mode 100644 index 000000000..c78373ea3 --- /dev/null +++ b/styleguide/item-atoms-mediablockimg.html @@ -0,0 +1,190 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
+
+

Decanter Style Guide and Pattern Library

+
+ +
+
+ + +
+
+

+ + + 1.3 + + Atoms.MediaBlockImg + + + Media Block Image + +

+ +

+ + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

+ +
+

Floats an image to the left and provides a specified margin right. To be used +when floating images alongside other content.

+ +
+ +
+ +
+
+ Example
+ + +
+ Alt text +
+
+ +
+
+ + Markup + + 
<img class="decanter-media-block__img" src="../../../img/circle.png" alt="Alt text">
+
+ +
+ Source: components/atoms/_media-block.scss, line 3 +
+
+
+ + + + + + + + + + + + + + + + + diff --git a/styleguide/item-atoms-skipnav.html b/styleguide/item-atoms-skipnav.html new file mode 100644 index 000000000..28447b851 --- /dev/null +++ b/styleguide/item-atoms-skipnav.html @@ -0,0 +1,193 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
+
+

Decanter Style Guide and Pattern Library

+
+ +
+
+ + +
+
+

+ + + 1.4 + + Atoms.Skipnav + + + Skipnav + +

+ +

+ + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

+ +
+

For providing a link at the top of the page which jumps +the user down to an anchor or target at the beginning +of the main content. Learn more at https://webaim.org/techniques/skipnav.

+ +
+ +
+ +
+
+ Example
+ + +
+ Skip to main navigation + +
+
+ +
+
+ + Markup: ../templates/components/atoms/skipnav/skipnav.html.twig + + 
<a href="#main-menu" class="decanter-skipnav">Skip to main navigation</a>
+
+
+ +
+ Source: components/atoms/_skipnav.scss, line 3 +
+
+
+ + + + + + + + + + + + + + + + + diff --git a/styleguide/item-atoms.html b/styleguide/item-atoms.html new file mode 100644 index 000000000..fe05619b3 --- /dev/null +++ b/styleguide/item-atoms.html @@ -0,0 +1,174 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
+
+

Decanter Style Guide and Pattern Library

+
+ +
+
+ + +
+
+

+ + + 1 + + Atoms + + + Atoms + +

+ + +
+

Atoms are the basic building blocks of matter. Applied to web interfaces, +atoms are our HTML tags, such as a form label, an input or a button. +Atoms can also include more abstract elements like color palettes, +fonts and even more invisible aspects of an interface like animations. +Like atoms in nature they’re fairly abstract and often not terribly useful on +their own. However, they’re good as a reference in the context of a pattern +library as you can see all your global styles laid out at a glance.

+ +
+ +
+ + +
+ Source: components/index.scss, line 3 +
+
+
+ + + + + + + + + + + + + + + + + diff --git a/styleguide/item-components-molecules-quote.html b/styleguide/item-components-molecules-quote.html new file mode 100644 index 000000000..57f3722f0 --- /dev/null +++ b/styleguide/item-components-molecules-quote.html @@ -0,0 +1,210 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
+
+

Decanter Style Guide and Pattern Library

+
+ +
+
+ + +
+
+

+ + + 5.1.1 + + Components.Molecules.Quote + + + Quote + +

+ +

+ + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

+ +
+

For use when quoting someone within an article or blog posting.

+ +
+ +
+ +
+
+ Example
+ + +
+
+ Please provide alt text +
+

John Doe

+

Detail 1
Detail 2

+

"This is the quote. Lorem ipsur adipisicing elit, sed do eiusmod tempor incididunt ut labore et..."

+
+
+ +
+
+ +
+
+ + Markup: ../templates/components/molecules/quote/quote.html.twig + + 
<div class="decanter-quote decanter-width-one-half ">
+  <img class="decanter-media-block__img " src="../../../img/circle.png" alt="Please provide alt text">
+  <div class="decanter-media-block__body ">
+    <h2>John Doe</h2>
+    <p>Detail 1<br>Detail 2</p>
+    <h3>"This is the quote. Lorem ipsur adipisicing elit, sed do eiusmod tempor incididunt ut labore et..."</h3>
+  </div>
+</div>
+
+
+ +
+ Source: components/molecules/quote.scss, line 3 +
+
+
+ + + + + + + + + + + + + + + + + diff --git a/styleguide/item-components-molecules.html b/styleguide/item-components-molecules.html index 5e6db0dc4..9411f12d6 100644 --- a/styleguide/item-components-molecules.html +++ b/styleguide/item-components-molecules.html @@ -32,43 +32,48 @@

Decanter Style Guide and Pattern Library

  • - - 2Components + + 2Molecules
  • - - 3Core + + 3Organisims
  • - - 4Elements + + 4Templates
  • - - 5Functions + + 5Components
  • - - 6Mixins + + 6Core
  • - - 7Molecules + + 7Elements
  • - - 8Organisims + + 8Functions + +
    • +
  • + + 9Mixins
  • - 9Variables + 10Variables
    • @@ -82,33 +87,20 @@

    Decanter Style Guide and Pattern Library

    - 2.2 + 5.1 Components.Molecules - Molecules + Components.Molecules

    -
    -

    Things start getting more interesting and tangible when we start combining -atoms together. Molecules are groups of atoms bonded together and are the -smallest fundamental units of a compound. These molecules take on their own -properties and serve as the backbone of our design systems. -For example, a form label, input or button aren’t too useful by themselves, -but combine them together as a form and now they can actually do something -together.

    - -
    -
    - Source: components/index.scss, line 20 -
    diff --git a/styleguide/item-components.html b/styleguide/item-components.html index e8804f09a..8a74df422 100644 --- a/styleguide/item-components.html +++ b/styleguide/item-components.html @@ -32,69 +32,62 @@

    Decanter Style Guide and Pattern Library

  • + + 2Molecules + +
    • +
  • + + 3Organisims + +
    • +
  • + + 4Templates + +
    • +
  • - 2Components + 5Components
  • - 3Core + 6Core
  • - 4Elements + 7Elements
  • - 5Functions + 8Functions
  • - 6Mixins - -
    • -
  • - - 7Molecules - -
    • -
  • - - 8Organisims + 9Mixins
  • - 9Variables + 10Variables
    • @@ -108,7 +101,7 @@

    Decanter Style Guide and Pattern Library

    - 2 + 5 Components @@ -122,9 +115,6 @@

    -
    - Source: components/index.scss, line 3 -
    diff --git a/styleguide/item-elements-quote.html b/styleguide/item-elements-quote.html new file mode 100644 index 000000000..2f2b0e411 --- /dev/null +++ b/styleguide/item-elements-quote.html @@ -0,0 +1,205 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    +     +
    +
    + + +
    +
    +

    + + + 6.5 + + Elements.Quote + + + Quote + +

    + +

    + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    + +
    +

    Default styling for a quote element.

    + +
    + +
    + +
    +
    + Example
    + + +
    +
    + Please provide alt text +
    +

    John Doe

    +

    Detail 1
    Detail 2

    +

    "This is the quote. Lorem ipsur adipisicing elit, sed do eiusmod tempor incididunt ut labore et..."

    +
    +
    + +
    +
    + +
    +
    + + Markup: ../templates/elements/quote/quote.html.twig + + 
    <div class="decanter-quote">
+  <img class="decanter-quote__img " src="../../../img/circle.png" alt="Please provide alt text">
+  <div class="decanter-quote__body ">
+    <p class="decanter-quote__heading">John Doe</p>
+    <p class="decanter-quote__detail">Detail 1<br>Detail 2</p>
+    <p class="decanter-quote__quote">"This is the quote. Lorem ipsur adipisicing elit, sed do eiusmod tempor incididunt ut labore et..."</p>
+  </div>
+</div>
+
    +
    + +
    + Source: elements/_quote.scss, line 3 +
    +
    +
    + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-elements-tables.html b/styleguide/item-elements-tables.html index 1c1e54fdf..321bc04f5 100644 --- a/styleguide/item-elements-tables.html +++ b/styleguide/item-elements-tables.html @@ -82,7 +82,7 @@

    Decanter Style Guide and Pattern Library

    - 6.5 + 6.6 Elements.Tables diff --git a/styleguide/item-elements-typography.html b/styleguide/item-elements-typography.html index 47c24fd83..82d88220c 100644 --- a/styleguide/item-elements-typography.html +++ b/styleguide/item-elements-typography.html @@ -82,7 +82,7 @@

    Decanter Style Guide and Pattern Library

    - 6.6 + 6.7 Elements.Typography diff --git a/styleguide/item-elements.html b/styleguide/item-elements.html index b26a458de..ef4128bd0 100644 --- a/styleguide/item-elements.html +++ b/styleguide/item-elements.html @@ -87,14 +87,20 @@

    Decanter Style Guide and Pattern Library
  • - + 6.5Quote + +
    • +
  • + + 6.6Tables
  • - 6.66.7Typography
    • diff --git a/styleguide/item-mixins-icongrid-icon-grid.html b/styleguide/item-mixins-icongrid-icon-grid.html new file mode 100644 index 000000000..040faf9ae --- /dev/null +++ b/styleguide/item-mixins-icongrid-icon-grid.html @@ -0,0 +1,142 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-mixins-icongrid.html b/styleguide/item-mixins-icongrid.html new file mode 100644 index 000000000..80004a321 --- /dev/null +++ b/styleguide/item-mixins-icongrid.html @@ -0,0 +1,142 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-mixins-quote-quote.html b/styleguide/item-mixins-quote-quote.html new file mode 100644 index 000000000..606afe3bb --- /dev/null +++ b/styleguide/item-mixins-quote-quote.html @@ -0,0 +1,142 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-mixins-quote.html b/styleguide/item-mixins-quote.html new file mode 100644 index 000000000..fc1995b65 --- /dev/null +++ b/styleguide/item-mixins-quote.html @@ -0,0 +1,142 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-mixins-tables-table-borderless.html b/styleguide/item-mixins-tables-table-borderless.html index b20fe4383..1173a1111 100644 --- a/styleguide/item-mixins-tables-table-borderless.html +++ b/styleguide/item-mixins-tables-table-borderless.html @@ -82,7 +82,7 @@

    Decanter Style Guide and Pattern Library

    - 8.12.1 + 8.13.1 Mixins.Tables.table-borderless diff --git a/styleguide/item-mixins-tables-tables.html b/styleguide/item-mixins-tables-tables.html index e375c887c..cc947703c 100644 --- a/styleguide/item-mixins-tables-tables.html +++ b/styleguide/item-mixins-tables-tables.html @@ -82,7 +82,7 @@

    Decanter Style Guide and Pattern Library

    - 8.12.2 + 8.13.2 Mixins.Tables.tables diff --git a/styleguide/item-mixins-tables.html b/styleguide/item-mixins-tables.html index 43248d7cb..a2c7246a3 100644 --- a/styleguide/item-mixins-tables.html +++ b/styleguide/item-mixins-tables.html @@ -82,7 +82,7 @@

    Decanter Style Guide and Pattern Library

    - 8.12 + 8.13 Mixins.Tables diff --git a/styleguide/item-mixins-typography-caption.html b/styleguide/item-mixins-typography-caption.html index 50758cf02..ffc7d2810 100644 --- a/styleguide/item-mixins-typography-caption.html +++ b/styleguide/item-mixins-typography-caption.html @@ -82,7 +82,7 @@

    Decanter Style Guide and Pattern Library

    - 8.13.1 + 8.14.1 Mixins.Typography.caption diff --git a/styleguide/item-mixins-typography-credits.html b/styleguide/item-mixins-typography-credits.html index 71663fcd9..dcb04c038 100644 --- a/styleguide/item-mixins-typography-credits.html +++ b/styleguide/item-mixins-typography-credits.html @@ -82,7 +82,7 @@

    Decanter Style Guide and Pattern Library

    - 8.13.2 + 8.14.2 Mixins.Typography.credits diff --git a/styleguide/item-mixins-typography-font-lead.html b/styleguide/item-mixins-typography-font-lead.html index 0d21ec76e..dc116fcfa 100644 --- a/styleguide/item-mixins-typography-font-lead.html +++ b/styleguide/item-mixins-typography-font-lead.html @@ -82,7 +82,7 @@

    Decanter Style Guide and Pattern Library

    - 8.13.3 + 8.14.3 Mixins.Typography.font-lead diff --git a/styleguide/item-mixins-typography-font-smoothing.html b/styleguide/item-mixins-typography-font-smoothing.html index 7fb744567..e1d4819a2 100644 --- a/styleguide/item-mixins-typography-font-smoothing.html +++ b/styleguide/item-mixins-typography-font-smoothing.html @@ -82,7 +82,7 @@

    Decanter Style Guide and Pattern Library

    - 8.13.4 + 8.14.4 Mixins.Typography.font-smoothing diff --git a/styleguide/item-mixins-typography-font-splash.html b/styleguide/item-mixins-typography-font-splash.html index f8c75fa0a..61bc6e28a 100644 --- a/styleguide/item-mixins-typography-font-splash.html +++ b/styleguide/item-mixins-typography-font-splash.html @@ -82,7 +82,7 @@

    Decanter Style Guide and Pattern Library

    - 8.13.5 + 8.14.5 Mixins.Typography.font-splash diff --git a/styleguide/item-mixins-typography-h1.html b/styleguide/item-mixins-typography-h1.html index 466e3a531..2c505dc90 100644 --- a/styleguide/item-mixins-typography-h1.html +++ b/styleguide/item-mixins-typography-h1.html @@ -82,7 +82,7 @@

    Decanter Style Guide and Pattern Library

    - 8.13.6 + 8.14.6 Mixins.Typography.h1 diff --git a/styleguide/item-mixins-typography-h2.html b/styleguide/item-mixins-typography-h2.html index 61de0da90..cf36eeae3 100644 --- a/styleguide/item-mixins-typography-h2.html +++ b/styleguide/item-mixins-typography-h2.html @@ -82,7 +82,7 @@

    Decanter Style Guide and Pattern Library

    - 8.13.7 + 8.14.7 Mixins.Typography.h2 diff --git a/styleguide/item-mixins-typography-h3.html b/styleguide/item-mixins-typography-h3.html index 2ee6880c9..31a0bdef2 100644 --- a/styleguide/item-mixins-typography-h3.html +++ b/styleguide/item-mixins-typography-h3.html @@ -82,7 +82,7 @@

    Decanter Style Guide and Pattern Library

    - 8.13.8 + 8.14.8 Mixins.Typography.h3 diff --git a/styleguide/item-mixins-typography-h4.html b/styleguide/item-mixins-typography-h4.html index 3ec07786b..f7bc2352c 100644 --- a/styleguide/item-mixins-typography-h4.html +++ b/styleguide/item-mixins-typography-h4.html @@ -82,7 +82,7 @@

    Decanter Style Guide and Pattern Library

    - 8.13.9 + 8.14.9 Mixins.Typography.h4 diff --git a/styleguide/item-mixins-typography-h5.html b/styleguide/item-mixins-typography-h5.html index 8b3fedf30..e5f158b3e 100644 --- a/styleguide/item-mixins-typography-h5.html +++ b/styleguide/item-mixins-typography-h5.html @@ -82,7 +82,7 @@

    Decanter Style Guide and Pattern Library

    - 8.13.10 + 8.14.10 Mixins.Typography.h5 diff --git a/styleguide/item-mixins-typography-h6.html b/styleguide/item-mixins-typography-h6.html index e51d4e02e..fcb97a0bc 100644 --- a/styleguide/item-mixins-typography-h6.html +++ b/styleguide/item-mixins-typography-h6.html @@ -82,7 +82,7 @@

    Decanter Style Guide and Pattern Library

    - 8.13.11 + 8.14.11 Mixins.Typography.h6 diff --git a/styleguide/item-mixins-typography-headings.html b/styleguide/item-mixins-typography-headings.html index 005324ba9..807b0de00 100644 --- a/styleguide/item-mixins-typography-headings.html +++ b/styleguide/item-mixins-typography-headings.html @@ -82,7 +82,7 @@

    Decanter Style Guide and Pattern Library

    - 8.13.12 + 8.14.12 Mixins.Typography.headings diff --git a/styleguide/item-mixins-typography-sans.html b/styleguide/item-mixins-typography-sans.html index b5dfbebb4..a831ee88f 100644 --- a/styleguide/item-mixins-typography-sans.html +++ b/styleguide/item-mixins-typography-sans.html @@ -82,7 +82,7 @@

    Decanter Style Guide and Pattern Library

    - 8.13.13 + 8.14.13 Mixins.Typography.sans diff --git a/styleguide/item-mixins-typography-serif.html b/styleguide/item-mixins-typography-serif.html index 915d5952e..4cb5578b7 100644 --- a/styleguide/item-mixins-typography-serif.html +++ b/styleguide/item-mixins-typography-serif.html @@ -82,7 +82,7 @@

    Decanter Style Guide and Pattern Library

    - 8.13.14 + 8.14.14 Mixins.Typography.serif diff --git a/styleguide/item-mixins-typography-short-line-length.html b/styleguide/item-mixins-typography-short-line-length.html index 212927aa5..dbd0f8e66 100644 --- a/styleguide/item-mixins-typography-short-line-length.html +++ b/styleguide/item-mixins-typography-short-line-length.html @@ -82,7 +82,7 @@

    Decanter Style Guide and Pattern Library

    - 8.13.15 + 8.14.15 Mixins.Typography.short-line-length diff --git a/styleguide/item-mixins-typography-slab.html b/styleguide/item-mixins-typography-slab.html index 81133416c..a4a40aa3e 100644 --- a/styleguide/item-mixins-typography-slab.html +++ b/styleguide/item-mixins-typography-slab.html @@ -82,7 +82,7 @@

    Decanter Style Guide and Pattern Library

    - 8.13.16 + 8.14.16 Mixins.Typography.slab diff --git a/styleguide/item-mixins-typography.html b/styleguide/item-mixins-typography.html index e197911d5..327f5b38a 100644 --- a/styleguide/item-mixins-typography.html +++ b/styleguide/item-mixins-typography.html @@ -82,7 +82,7 @@

    Decanter Style Guide and Pattern Library

    - 8.13 + 8.14 Mixins.Typography diff --git a/styleguide/item-mixins.html b/styleguide/item-mixins.html index eb68eb162..087941cf7 100644 --- a/styleguide/item-mixins.html +++ b/styleguide/item-mixins.html @@ -229,8 +229,14 @@

    Decanter Style Guide and Pattern Library
  • - + 8.7Icon Grid + +
    • +
  • + + 8.7.1@icon-grid
    • @@ -331,122 +337,134 @@

    Decanter Style Guide and Pattern Library

  • - + 8.12Quote + +
    • +
  • + + 8.12.1@quote + +
    • +
  • + + 8.13Tables
  • - 8.12.18.13.1@table-borderless
  • - 8.12.28.13.2@tables
  • - 8.138.14Typography
  • - 8.13.18.14.1@caption
  • - 8.13.28.14.2@credits
  • - 8.13.38.14.3@font-lead
  • - 8.13.48.14.4@font-smoothing
  • - 8.13.58.14.5@font-splash
  • - 8.13.68.14.6@h1
  • - 8.13.78.14.7@h2
  • - 8.13.88.14.8@h3
  • - 8.13.98.14.9@h4
  • - 8.13.108.14.10@h5
  • - 8.13.118.14.11@h6
  • - 8.13.128.14.12@headings
  • - 8.13.138.14.13@sans
  • - 8.13.148.14.14@serif
  • - 8.13.158.14.15@short-line-length
  • - 8.13.168.14.16@slab
    • diff --git a/styleguide/item-molecules-alerts.html b/styleguide/item-molecules-alerts.html new file mode 100644 index 000000000..4faaecb45 --- /dev/null +++ b/styleguide/item-molecules-alerts.html @@ -0,0 +1,270 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    +
    + + +
    +
    +

    + + + 2.1 + + Molecules.Alerts + + + Alerts + +

    + +

    + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    + +
    +

    For displaying a notification that keeps people informed +of a status, or for displaying a validation message that +alerts someone of an important piece of information.

    + +
    + +
    + +
    +
    + Examples
    + +
    + Default styling +
    + +
    +
    +
    +

    Alert Heading

    +

    This is the details of the alert message.

    +
    +
    + +
    +
    + +
    + .decanter-alert-success +
    +
    + Successful Transaction Message +
    +
    +
    +
    +

    Alert Heading

    +

    This is the details of the alert message.

    +
    +
    + +
    +
    +
    + .decanter-alert-warning +
    +
    + Warning Message +
    +
    +
    +
    +

    Alert Heading

    +

    This is the details of the alert message.

    +
    +
    + +
    +
    +
    + .decanter-alert-error +
    +
    + Error Message +
    +
    +
    +
    +

    Alert Heading

    +

    This is the details of the alert message.

    +
    +
    + +
    +
    +
    + .decanter-alert-info +
    +
    + Informative Message +
    +
    +
    +
    +

    Alert Heading

    +

    This is the details of the alert message.

    +
    +
    + +
    +
    +
    +
    + + Markup: ../templates/components/molecules/alerts/alerts.html.twig + + 
    <div class="decanter-alert [modifier class]">
+  <div class="decanter-alert__body">
+    <h3 class="decanter-alert__heading">Alert Heading</h3>
+    <p class="decanter-alert__text">This is the details of the alert message.</p>
+  </div>
+</div>
+
    +
    + +
    + Source: components/molecules/_alerts.scss, line 3 +
    +
    +
    + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-molecules-icongrid.html b/styleguide/item-molecules-icongrid.html new file mode 100644 index 000000000..5774a2002 --- /dev/null +++ b/styleguide/item-molecules-icongrid.html @@ -0,0 +1,275 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    +
    + + +
    +
    +

    + + + 2.2 + + Molecules.IconGrid + + + Icon Grid + +

    + +

    + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    + +
    +

    Grid of icons (or images) with text.

    + +
    + +
    + +
    +
    + Example
    + + +
    +
    + +
    + + + +
    + Please provide alt text +
    +

    Item One

    +

    Lorem ipsur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.

    +
    +
    +
    + Please provide alt text +
    +

    Item Two

    +

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.

    +
    +
    + +
    +
    + + + +
    + Please provide alt text +
    +

    Item Three

    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    +
    +
    +
    + Please provide alt text +
    +

    Item Four

    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    +
    +
    + +
    +
    + +
    +
    + +
    +
    + + Markup: ../templates/components/molecules/icon-grid/icon-grid.html.twig + + 
    <div class="decanter-icon-grid ">
+  
+              <div class="decanter-icon-grid__row ">
+
+      
+  
+            <div class="decanter-media_block decanter-width-one-half">
+  <img class="decanter-media-block__img " src="../../../img/circle.png" alt="Please provide alt text">
+  <div class="decanter-media-block__body ">
+  <h2>Item One</h2>
+  <p>Lorem ipsur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
+</div>
+</div>
+          <div class="decanter-media_block decanter-width-one-half">
+  <img class="decanter-media-block__img " src="../../../img/circle.png" alt="Please provide alt text">
+  <div class="decanter-media-block__body ">
+  <h2>Item Two</h2>
+  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
+</div>
+</div>
+      
+</div>
+          <div class="decanter-icon-grid__row ">
+
+      
+  
+            <div class="decanter-media_block decanter-width-one-half">
+  <img class="decanter-media-block__img " src="../../../img/circle.png" alt="Please provide alt text">
+  <div class="decanter-media-block__body ">
+  <h2>Item Three</h2>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+</div>
+</div>
+          <div class="decanter-media_block decanter-width-one-half">
+  <img class="decanter-media-block__img " src="../../../img/circle.png" alt="Please provide alt text">
+  <div class="decanter-media-block__body ">
+  <h2>Item Four</h2>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+</div>
+</div>
+      
+</div>
+      </div>
+
    +
    + +
    + Source: components/molecules/_icon-grid.scss, line 3 +
    +
    +
    + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-molecules-mainmenu.html b/styleguide/item-molecules-mainmenu.html new file mode 100644 index 000000000..80c4391ed --- /dev/null +++ b/styleguide/item-molecules-mainmenu.html @@ -0,0 +1,281 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    +
    + + +
    +
    +

    + + + 2.3 + + Molecules.MainMenu + + + Main Menu + +

    + +

    + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    + +
    +

    A main navigation component with drop downs.

    + +
    + +
    + +
    +
    + Example
    + + +
    +
    +
    + + +
    +
    +
    + +
    +
    + +
    +
    + + Markup: ../templates/components/molecules/main-menu/main-menu.html.twig + + 
    <div class="decanter-main-menu">
+  <div class="decanter-nav__container">
+    <button class="decanter-main-menu__btn">Menu</button>
+    <nav role="navigation" class="decanter-nav">
+      <button class="decanter-nav__close">
+        <img src="../../../img/close.svg" alt="close">
+      </button>
+      <ul class="decanter-nav-primary decanter-accordion">
+        <li><button class="decanter-accordion__button decanter-nav__link" aria-expanded="false" aria-controls="basic-nav-section-one">
+      Parent link
+    </button>
+          <ul id="basic-nav-section-one" class="decanter-nav-submenu">
+            <li>
+              <a href="#">Child link</a>
+            </li>
+            <li>
+              <a href="#">Child link</a>
+            </li>
+            <li>
+              <a href="#">Child link</a>
+            </li>
+          </ul>
+        </li>
+        <li><button class="decanter-accordion__button decanter-nav__link" aria-expanded="false" aria-controls="basic-nav-section-two">
+      Parent link
+    </button>
+          <ul id="basic-nav-section-two" class="decanter-nav-submenu">
+            <li>
+              <a href="#">Child link</a>
+            </li>
+            <li>
+              <a href="#">Child link</a>
+            </li>
+            <li>
+              <a href="#">Child link</a>
+            </li>
+          </ul>
+        </li>
+        <li><a class="decanter-nav__link" href="#">
+      Parent link
+    </a></li>
+      </ul>
+    </nav>
+  </div>
+</div>
+<div class="decanter-nav__overlay"></div>
+
    +
    + +
    + Source: components/molecules/_main-menu.scss, line 3 +
    +
    +
    + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-molecules-mega-menu.html b/styleguide/item-molecules-mega-menu.html new file mode 100644 index 000000000..5111ffb87 --- /dev/null +++ b/styleguide/item-molecules-mega-menu.html @@ -0,0 +1,191 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    +
    + + +
    +
    +

    + + + 2.4 + + Molecules.Mega Menu + + + Mega Menu + +

    + +

    + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    + +
    +

    An expandable menu in which choices are displayed in a two-dimensional +dropdown layout. Excellent design choice for accommodating a large number of +options or for revealing lower-level site pages at a glance.

    + +
    + +
    + +
    +
    + Example
    + + +
    +

    Hello

    +
    +
    + +
    +
    + + Markup + + 
    <h2>Hello</h2>
    +
    + +
    + Source: components/molecules/_mega-menu.scss, line 3 +
    +
    +
    + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-molecules-sidenav.html b/styleguide/item-molecules-sidenav.html new file mode 100644 index 000000000..b222e47cd --- /dev/null +++ b/styleguide/item-molecules-sidenav.html @@ -0,0 +1,267 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    +
    + + +
    +
    +

    + + + 2.5 + + Molecules.Sidenav + + + Sidenav + +

    + +

    + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    + +
    +

    A side navigation component.

    + +
    + +
    + +
    +
    + Example
    + + +
    +

    Single Level

    + + +

    Two Levels

    + + +

    Three Levels

    + + +
    +
    + +
    +
    + + Markup: ../templates/components/molecules/sidenav/sidenav.html.twig + + 
    <h3>Single Level</h3>
+  <ul class="decanter-sidenav__list">
+      <li><a class='decanter-nav__current' href=''#'>Active parent link</a></li>
+      <li><a href='#'>Parent link</a></li>
+      <li><a href='#'>Parent link</a></li>
+  </ul>
+
+<h3>Two Levels</h3>
+  <ul class="decanter-sidenav__list">
+      <li><a href='#'>Parent link</a></li>
+      <li><a class='decanter-nav__current' href=''#'>Active parent link</a></li>
+      <ul class="decanter-sidenav__sublist">
+          <li><a href='#'>Child link</a></li>
+          <li><a href='#'>Child link</a></li>
+          <li><a href='#'>Child link</a></li>
+          <li><a href='#'>Child link</a></li>
+          <li><a class='decanter-nav__current' href=''#'>Active child link</a></li>
+      </ul>
+      <li><a href='#'>Parent link</a></li>
+  </ul>
+
+<h3>Three Levels</h3>
+  <ul class="decanter-sidenav__list">
+      <li><a href='#'>Parent link</a></li>
+      <li><a class='decanter-nav__current' href=''#'>Active parent link</a></li>
+      <ul class="decanter-sidenav__sublist">
+          <li><a href='#'>Child link</a></li>
+          <li><a class='decanter-nav__current' href=''#'>Active child link</a></li>
+          <ul class="decanter-sidenav__sublist">
+              <li><a href='#'>Grandchild link</a></li>
+              <li><a href='#'>Grandchild link</a></li>
+              <li><a class='decanter-nav__current' href=''#'>Active grandchild link</a></li>
+          </ul>
+          <li><a href='#'>Child link</a></li>
+          <li><a href='#'>Child link</a></li>
+          <li><a href='#'>Child link</a></li>
+      </ul>
+      <li><a href='#'>Parent link</a></li>
+  </ul>
+
    +
    + +
    + Source: components/molecules/_sidenav.scss, line 3 +
    +
    +
    + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-molecules.html b/styleguide/item-molecules.html new file mode 100644 index 000000000..36dd497b5 --- /dev/null +++ b/styleguide/item-molecules.html @@ -0,0 +1,180 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    +
    + + +
    +
    +

    + + + 2 + + Molecules + + + Molecules + +

    + + +
    +

    Things start getting more interesting and tangible when we start combining +atoms together. Molecules are groups of atoms bonded together and are the +smallest fundamental units of a compound. These molecules take on their own +properties and serve as the backbone of our design systems. +For example, a form label, input or button aren’t too useful by themselves, +but combine them together as a form and now they can actually do something +together.

    + +
    + +
    + + +
    + Source: components/index.scss, line 17 +
    +
    +
    + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-organisims-accordion.html b/styleguide/item-organisims-accordion.html new file mode 100644 index 000000000..0b49822aa --- /dev/null +++ b/styleguide/item-organisims-accordion.html @@ -0,0 +1,345 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    +
    + + +
    +
    +

    + + + 3.1 + + Organisims.Accordion + + + Accordion + +

    + +

    + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    + +
    +

    For use when a user only needs a few specific pieces of +content within a page, or for when information needs to +be displayed in a small space.

    + +
    + +
    + +
    +
    + Examples
    + +
    + Default styling +
    + +
    +
      +
    • + +
      + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor + in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. +
      +
      • +
    • + +
      + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor + in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. +
      +
      • +
    • + +
      + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor + in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. +
      +
      • +
    • + +
      + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor + in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. +
      +
      • +
    • + +
      + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor + in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. +
      +
      • +
    + +
    +
    + +
    + .decanter-accordion--bordered +
    +
    + Bordered Version +
    +
    +
      +
    • + +
      + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor + in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. +
      +
      • +
    • + +
      + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor + in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. +
      +
      • +
    • + +
      + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor + in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. +
      +
      • +
    • + +
      + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor + in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. +
      +
      • +
    • + +
      + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor + in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. +
      +
      • +
    + +
    +
    +
    +
    + + Markup: ../templates/components/organisms/accordions/accordions.html.twig + + 
    <ul class="decanter-accordion  [modifier class]">
+  <li>
+    <button class="decanter-accordion__button" aria-expanded="true" aria-controls="b-a1">
+      First Item
+    </button>
+    <div id="b-a1" class="decanter-accordion__content">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
+      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </div>
+  </li>
+  <li>
+    <button class="decanter-accordion__button" aria-expanded="false" aria-controls="b-a2">
+      Second Item
+    </button>
+    <div id="b-a2" class="decanter-accordion__content">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
+      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </div>
+  </li>
+  <li>
+    <button class="decanter-accordion__button" aria-expanded="false" aria-controls="b-a3">
+      Third Item
+    </button>
+    <div id="b-a3" class="decanter-accordion__content">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
+      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </div>
+  </li>
+  <li>
+    <button class="decanter-accordion__button" aria-expanded="false" aria-controls="b-a4">
+      Fourth Item
+    </button>
+    <div id="b-a4" class="decanter-accordion__content">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
+      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </div>
+  </li>
+  <li>
+    <button class="decanter-accordion__button" aria-expanded="false" aria-controls="b-a5">
+      Fifth Item
+    </button>
+    <div id="b-a5" class="decanter-accordion__content">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
+      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </div>
+  </li>
+</ul>
+
    +
    + +
    + Source: components/organisms/_accordions.scss, line 3 +
    +
    +
    + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-organisims.html b/styleguide/item-organisims.html new file mode 100644 index 000000000..2f829a3fb --- /dev/null +++ b/styleguide/item-organisims.html @@ -0,0 +1,165 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    +
    + + +
    +
    +

    + + + 3 + + Organisims + + + Organisims + +

    + + +
    +

    Molecules give us some building blocks to work with, and we can now combine +them together to form organisms. Organisms are groups of molecules joined +together to form a relatively complex, distinct section of an interface. +We’re starting to get increasingly concrete. A client might not be terribly +interested in the molecules of a design system, but with organisms we can see +the final interface beginning to take shape. Dan Mall (who I’m working with +on several projects) uses element collages, which articulate ideas for a few +key organisms to facilitate client conversations and shape the visual +direction (all without having to construct full comps). +Organisms can consist of similar and/or different molecule types. +For example, a masthead organism might consist of diverse components like a +logo, primary navigation, search form, and list of social media channels. +But a “product grid” organism might consist of the same molecule (possibly +containing a product image, product title and price) repeated over and over +again. Building up from molecules to organisms encourages creating +standalone, portable, reusable components.

    + +
    + +
    + + +
    + Source: components/index.scss, line 31 +
    +
    +
    + + + + + + + + + + + + + + + + + diff --git a/styleguide/item-variables-vendor.html b/styleguide/item-variables-vendor.html new file mode 100644 index 000000000..74153628d --- /dev/null +++ b/styleguide/item-variables-vendor.html @@ -0,0 +1,142 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    + + + + + + + + + + + + + + + + + + diff --git a/styleguide/section-atoms.html b/styleguide/section-atoms.html new file mode 100644 index 000000000..74e6cda2b --- /dev/null +++ b/styleguide/section-atoms.html @@ -0,0 +1,600 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    +
    + + +
    +
    +

    + + + 1 + + Atoms + + + Atoms + +

    + + +
    +

    Atoms are the basic building blocks of matter. Applied to web interfaces, +atoms are our HTML tags, such as a form label, an input or a button. +Atoms can also include more abstract elements like color palettes, +fonts and even more invisible aspects of an interface like animations. +Like atoms in nature they’re fairly abstract and often not terribly useful on +their own. However, they’re good as a reference in the context of a pattern +library as you can see all your global styles laid out at a glance.

    + +
    + +
    + + +
    + Source: components/index.scss, line 3 +
    +
    +
    +
    +

    + + + 1.1 + + Atoms.Buttons + + + Buttons + +

    + +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    + +
    +

    Simple button element to aid in creating interactive design.

    + +
    + +
    + +
    +
    + Examples
    + +
    + Default styling +
    + +
    + Button Title + +
    +
    + +
    + .decanter-button--secondary +
    +
    + Secondary button +
    +
    + Button Title + +
    +
    +
    + .decanter-button--big +
    +
    + Big button +
    +
    + Button Title + +
    +
    +
    + .decanter-button--unstyled +
    +
    + Unstyled button +
    +
    + Button Title + +
    +
    +
    +
    + + Markup: ../templates/components/atoms/buttons/buttons.html.twig + + 
    <a href="#" class="decanter-button [modifier class]">Button Title</a>
+
    +
    + +
    + Source: components/atoms/_buttons.scss, line 3 +
    +
    +
    +
    +

    + + + 1.2 + + Atoms.MediaBlockBody + + + Media Block Body + +

    + +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    + +
    +

    Allows for text that is next to a floated media block image to flow within +the grid without dropping to a new line prematurely.

    + +
    + +
    + +
    +
    + Example
    + + +
    +
    +

    Lorem ipsum dolor sit

    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    +
    +
    +
    + +
    +
    + + Markup + + 
    <div class="decanter-media-block__body">
+ <h2>Lorem ipsum dolor sit</h2>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+</div>
    +
    + +
    + Source: components/atoms/_media-block.scss, line 18 +
    +
    +
    +
    +

    + + + 1.3 + + Atoms.MediaBlockImg + + + Media Block Image + +

    + +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    + +
    +

    Floats an image to the left and provides a specified margin right. To be used +when floating images alongside other content.

    + +
    + +
    + +
    +
    + Example
    + + +
    + Alt text +
    +
    + +
    +
    + + Markup + + 
    <img class="decanter-media-block__img" src="../../../img/circle.png" alt="Alt text">
    +
    + +
    + Source: components/atoms/_media-block.scss, line 3 +
    +
    +
    +
    +

    + + + 1.4 + + Atoms.Skipnav + + + Skipnav + +

    + +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    + +
    +

    For providing a link at the top of the page which jumps +the user down to an anchor or target at the beginning +of the main content. Learn more at https://webaim.org/techniques/skipnav.

    + +
    + +
    + +
    +
    + Example
    + + +
    + Skip to main navigation + +
    +
    + +
    +
    + + Markup: ../templates/components/atoms/skipnav/skipnav.html.twig + + 
    <a href="#main-menu" class="decanter-skipnav">Skip to main navigation</a>
+
    +
    + +
    + Source: components/atoms/_skipnav.scss, line 3 +
    +
    +
    + + + + + + + + + + + + + + + + + diff --git a/styleguide/section-components.html b/styleguide/section-components.html index 82494fbdd..e3803dc43 100644 --- a/styleguide/section-components.html +++ b/styleguide/section-components.html @@ -32,69 +32,62 @@

    Decanter Style Guide and Pattern Library

  • + + 2Molecules + +
    • +
  • + + 3Organisims + +
    • +
  • + + 4Templates + +
    • +
  • - 2Components + 5Components
  • - 3Core + 6Core
  • - 4Elements + 7Elements
  • - 5Functions + 8Functions
  • - 6Mixins - -
    • -
  • - - 7Molecules - -
    • -
  • - - 8Organisims + 9Mixins
  • - 9Variables + 10Variables
    • @@ -108,7 +101,7 @@

    Decanter Style Guide and Pattern Library

    - 2 + 5 Components @@ -122,139 +115,135 @@

    -
    - Source: components/index.scss, line 3 -
    -
    -
    -

    - - - 2.1 - - Components.Atoms - - - Atoms - -

    - - -
    -

    Atoms are the basic building blocks of matter. Applied to web interfaces, -atoms are our HTML tags, such as a form label, an input or a button. -Atoms can also include more abstract elements like color palettes, -fonts and even more invisible aspects of an interface like animations. -Like atoms in nature they’re fairly abstract and often not terribly useful on -their own. However, they’re good as a reference in the context of a pattern -library as you can see all your global styles laid out at a glance.

    - -
    - -
    - - -
    - Source: components/index.scss, line 8 -
    -

    - 2.2 + 5.1 Components.Molecules - Molecules + Components.Molecules

    -
    -

    Things start getting more interesting and tangible when we start combining -atoms together. Molecules are groups of atoms bonded together and are the -smallest fundamental units of a compound. These molecules take on their own -properties and serve as the backbone of our design systems. -For example, a form label, input or button aren’t too useful by themselves, -but combine them together as a form and now they can actually do something -together.

    - -
    -
    - Source: components/index.scss, line 20 -
    -
    +
    -

    - +

    + - 2.3 + 5.1.1 - Components.Organisims + Components.Molecules.Quote - Organisims + Quote -

    +

    +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    -

    Molecules give us some building blocks to work with, and we can now combine -them together to form organisms. Organisms are groups of molecules joined -together to form a relatively complex, distinct section of an interface. -We’re starting to get increasingly concrete. A client might not be terribly -interested in the molecules of a design system, but with organisms we can see -the final interface beginning to take shape. Dan Mall (who I’m working with -on several projects) uses element collages, which articulate ideas for a few -key organisms to facilitate client conversations and shape the visual -direction (all without having to construct full comps). -Organisms can consist of similar and/or different molecule types. -For example, a masthead organism might consist of diverse components like a -logo, primary navigation, search form, and list of social media channels. -But a “product grid” organism might consist of the same molecule (possibly -containing a product image, product title and price) repeated over and over -again. Building up from molecules to organisms encourages creating -standalone, portable, reusable components.

    +

    For use when quoting someone within an article or blog posting.

    - -
    - Source: components/index.scss, line 32 -
    -
    -
    -
    -

    - - - 2.4 - - Components.Templates - - - Templates - -

    +
    +
    + Example
    - - -
    + +
    +
    + Please provide alt text +
    +

    John Doe

    +

    Detail 1
    Detail 2

    +

    "This is the quote. Lorem ipsur adipisicing elit, sed do eiusmod tempor incididunt ut labore et..."

    +
    +
    - +
    +
    + +
    +
    + + Markup: ../templates/components/molecules/quote/quote.html.twig + + 
    <div class="decanter-quote decanter-width-one-half ">
+  <img class="decanter-media-block__img " src="../../../img/circle.png" alt="Please provide alt text">
+  <div class="decanter-media-block__body ">
+    <h2>John Doe</h2>
+    <p>Detail 1<br>Detail 2</p>
+    <h3>"This is the quote. Lorem ipsur adipisicing elit, sed do eiusmod tempor incididunt ut labore et..."</h3>
+  </div>
+</div>
+
    +
    +
    - Source: components/index.scss, line 53 + Source: components/molecules/quote.scss, line 3
    diff --git a/styleguide/section-elements.html b/styleguide/section-elements.html index eebd429f9..0e377e7b5 100644 --- a/styleguide/section-elements.html +++ b/styleguide/section-elements.html @@ -87,14 +87,20 @@

    Decanter Style Guide and Pattern Library

  • - + 6.5Quote + +
    • +
  • + + 6.6Tables
  • - 6.66.7Typography
    • @@ -599,6 +605,116 @@

    Source: elements/_list.scss, line 3 +
    +

    +
    +
    +

    + + + 6.5 + + Elements.Quote + + + Quote + +

    + +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    + +
    +

    Default styling for a quote element.

    + +
    + +
    + +
    +
    + Example
    + + +
    +
    + Please provide alt text +
    +

    John Doe

    +

    Detail 1
    Detail 2

    +

    "This is the quote. Lorem ipsur adipisicing elit, sed do eiusmod tempor incididunt ut labore et..."

    +
    +
    + +
    +
    + +
    +
    + + Markup: ../templates/elements/quote/quote.html.twig + + 
    <div class="decanter-quote">
+  <img class="decanter-quote__img " src="../../../img/circle.png" alt="Please provide alt text">
+  <div class="decanter-quote__body ">
+    <p class="decanter-quote__heading">John Doe</p>
+    <p class="decanter-quote__detail">Detail 1<br>Detail 2</p>
+    <p class="decanter-quote__quote">"This is the quote. Lorem ipsur adipisicing elit, sed do eiusmod tempor incididunt ut labore et..."</p>
+  </div>
+</div>
+
    +
    + +
    + Source: elements/_quote.scss, line 3
    @@ -606,7 +722,7 @@

    - 6.5 + 6.6 Elements.Tables @@ -781,7 +897,7 @@

    - 6.6 + 6.7 Elements.Typography diff --git a/styleguide/section-mixins.html b/styleguide/section-mixins.html index 971c55a0d..03dfabe0d 100644 --- a/styleguide/section-mixins.html +++ b/styleguide/section-mixins.html @@ -229,8 +229,14 @@

    Decanter Style Guide and Pattern Library
  • - + 8.7Icon Grid + +
    • +
  • + + 8.7.1@icon-grid
    • @@ -331,122 +337,134 @@

    Decanter Style Guide and Pattern Library

  • - + 8.12Quote + +
    • +
  • + + 8.12.1@quote + +
    • +
  • + + 8.13Tables
  • - 8.12.18.13.1@table-borderless
  • - 8.12.28.13.2@tables
  • - 8.138.14Typography
  • - 8.13.18.14.1@caption
  • - 8.13.28.14.2@credits
  • - 8.13.38.14.3@font-lead
  • - 8.13.48.14.4@font-smoothing
  • - 8.13.58.14.5@font-splash
  • - 8.13.68.14.6@h1
  • - 8.13.78.14.7@h2
  • - 8.13.88.14.8@h3
  • - 8.13.98.14.9@h4
  • - 8.13.108.14.10@h5
  • - 8.13.118.14.11@h6
  • - 8.13.128.14.12@headings
  • - 8.13.138.14.13@sans
  • - 8.13.148.14.14@serif
  • - 8.13.158.14.15@short-line-length
  • - 8.13.168.14.16@slab
    • @@ -1294,21 +1312,48 @@

    Source: utilities/mixins/grid/_allow-layout-classes.scss, line 3

    -
    +

    - + 8.7 - Mixins.icon-grid + Mixins.IconGrid - @icon-grid + Icon Grid

    +
    +

    Mixins for Icon Grid

    + +
    + +
    + + +
    + Source: utilities/mixins/icon-grid/index.scss, line 3 +
    +
    +
    +
    +

    + + + 8.7.1 + + Mixins.IconGrid.icon-grid + + + @icon-grid + +

    + +

    Grid of icons (or images) with text.

    @@ -1753,6 +1798,60 @@

    Source: utilities/mixins/navigation/_nav-overlay.scss, line 3 +
    +

    +
    +
    +

    + + + 8.12 + + Mixins.Quote + + + Quote + +

    + + +
    +

    Mixins for Quote

    + +
    + +
    + + +
    + Source: utilities/mixins/quote/index.scss, line 3 +
    +
    +
    +
    +

    + + + 8.12.1 + + Mixins.Quote.quote + + + @quote + +

    + + +
    +

    Default styling for a quote element.

    + +
    + +
    + + +
    + Source: utilities/mixins/quote/_quote.scss, line 3
    @@ -1760,7 +1859,7 @@

    - 8.12 + 8.13 Mixins.Tables @@ -1787,7 +1886,7 @@

    - 8.12.1 + 8.13.1 Mixins.Tables.table-borderless @@ -1814,7 +1913,7 @@

    - 8.12.2 + 8.13.2 Mixins.Tables.tables @@ -1841,7 +1940,7 @@

    - 8.13 + 8.14 Mixins.Typography @@ -1868,7 +1967,7 @@

    - 8.13.1 + 8.14.1 Mixins.Typography.caption @@ -1895,7 +1994,7 @@

    - 8.13.2 + 8.14.2 Mixins.Typography.credits @@ -1922,7 +2021,7 @@

    - 8.13.3 + 8.14.3 Mixins.Typography.font-lead @@ -1950,7 +2049,7 @@

    - 8.13.4 + 8.14.4 Mixins.Typography.font-smoothing @@ -1977,7 +2076,7 @@

    - 8.13.5 + 8.14.5 Mixins.Typography.font-splash @@ -2004,7 +2103,7 @@

    - 8.13.6 + 8.14.6 Mixins.Typography.h1 @@ -2031,7 +2130,7 @@

    - 8.13.7 + 8.14.7 Mixins.Typography.h2 @@ -2058,7 +2157,7 @@

    - 8.13.8 + 8.14.8 Mixins.Typography.h3 @@ -2085,7 +2184,7 @@

    - 8.13.9 + 8.14.9 Mixins.Typography.h4 @@ -2112,7 +2211,7 @@

    - 8.13.10 + 8.14.10 Mixins.Typography.h5 @@ -2139,7 +2238,7 @@

    - 8.13.11 + 8.14.11 Mixins.Typography.h6 @@ -2166,7 +2265,7 @@

    - 8.13.12 + 8.14.12 Mixins.Typography.headings @@ -2193,7 +2292,7 @@

    - 8.13.13 + 8.14.13 Mixins.Typography.sans @@ -2220,7 +2319,7 @@

    - 8.13.14 + 8.14.14 Mixins.Typography.serif @@ -2247,7 +2346,7 @@

    - 8.13.15 + 8.14.15 Mixins.Typography.short-line-length @@ -2275,7 +2374,7 @@

    - 8.13.16 + 8.14.16 Mixins.Typography.slab diff --git a/styleguide/section-molecules.html b/styleguide/section-molecules.html new file mode 100644 index 000000000..b723dd5d3 --- /dev/null +++ b/styleguide/section-molecules.html @@ -0,0 +1,989 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    +     +
    +
    + + +
    +
    +

    + + + 2 + + Molecules + + + Molecules + +

    + + +
    +

    Things start getting more interesting and tangible when we start combining +atoms together. Molecules are groups of atoms bonded together and are the +smallest fundamental units of a compound. These molecules take on their own +properties and serve as the backbone of our design systems. +For example, a form label, input or button aren’t too useful by themselves, +but combine them together as a form and now they can actually do something +together.

    + +
    + +
    + + +
    + Source: components/index.scss, line 17 +
    +
    +
    +
    +

    + + + 2.1 + + Molecules.Alerts + + + Alerts + +

    + +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    + +
    +

    For displaying a notification that keeps people informed +of a status, or for displaying a validation message that +alerts someone of an important piece of information.

    + +
    + +
    + +
    +
    + Examples
    + +
    + Default styling +
    + +
    +
    +
    +

    Alert Heading

    +

    This is the details of the alert message.

    +
    +
    + +
    +
    + +
    + .decanter-alert-success +
    +
    + Successful Transaction Message +
    +
    +
    +
    +

    Alert Heading

    +

    This is the details of the alert message.

    +
    +
    + +
    +
    +
    + .decanter-alert-warning +
    +
    + Warning Message +
    +
    +
    +
    +

    Alert Heading

    +

    This is the details of the alert message.

    +
    +
    + +
    +
    +
    + .decanter-alert-error +
    +
    + Error Message +
    +
    +
    +
    +

    Alert Heading

    +

    This is the details of the alert message.

    +
    +
    + +
    +
    +
    + .decanter-alert-info +
    +
    + Informative Message +
    +
    +
    +
    +

    Alert Heading

    +

    This is the details of the alert message.

    +
    +
    + +
    +
    +
    +
    + + Markup: ../templates/components/molecules/alerts/alerts.html.twig + + 
    <div class="decanter-alert [modifier class]">
+  <div class="decanter-alert__body">
+    <h3 class="decanter-alert__heading">Alert Heading</h3>
+    <p class="decanter-alert__text">This is the details of the alert message.</p>
+  </div>
+</div>
+
    +
    + +
    + Source: components/molecules/_alerts.scss, line 3 +
    +
    +
    +
    +

    + + + 2.2 + + Molecules.IconGrid + + + Icon Grid + +

    + +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    + +
    +

    Grid of icons (or images) with text.

    + +
    + +
    + +
    +
    + Example
    + + +
    +
    + +
    + + + +
    + Please provide alt text +
    +

    Item One

    +

    Lorem ipsur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.

    +
    +
    +
    + Please provide alt text +
    +

    Item Two

    +

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.

    +
    +
    + +
    +
    + + + +
    + Please provide alt text +
    +

    Item Three

    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    +
    +
    +
    + Please provide alt text +
    +

    Item Four

    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    +
    +
    + +
    +
    + +
    +
    + +
    +
    + + Markup: ../templates/components/molecules/icon-grid/icon-grid.html.twig + + 
    <div class="decanter-icon-grid ">
+  
+              <div class="decanter-icon-grid__row ">
+
+      
+  
+            <div class="decanter-media_block decanter-width-one-half">
+  <img class="decanter-media-block__img " src="../../../img/circle.png" alt="Please provide alt text">
+  <div class="decanter-media-block__body ">
+  <h2>Item One</h2>
+  <p>Lorem ipsur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
+</div>
+</div>
+          <div class="decanter-media_block decanter-width-one-half">
+  <img class="decanter-media-block__img " src="../../../img/circle.png" alt="Please provide alt text">
+  <div class="decanter-media-block__body ">
+  <h2>Item Two</h2>
+  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
+</div>
+</div>
+      
+</div>
+          <div class="decanter-icon-grid__row ">
+
+      
+  
+            <div class="decanter-media_block decanter-width-one-half">
+  <img class="decanter-media-block__img " src="../../../img/circle.png" alt="Please provide alt text">
+  <div class="decanter-media-block__body ">
+  <h2>Item Three</h2>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+</div>
+</div>
+          <div class="decanter-media_block decanter-width-one-half">
+  <img class="decanter-media-block__img " src="../../../img/circle.png" alt="Please provide alt text">
+  <div class="decanter-media-block__body ">
+  <h2>Item Four</h2>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+</div>
+</div>
+      
+</div>
+      </div>
+
    +
    + +
    + Source: components/molecules/_icon-grid.scss, line 3 +
    +
    +
    +
    +

    + + + 2.3 + + Molecules.MainMenu + + + Main Menu + +

    + +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    + +
    +

    A main navigation component with drop downs.

    + +
    + +
    + +
    +
    + Example
    + + +
    +
    +
    + + +
    +
    +
    + +
    +
    + +
    +
    + + Markup: ../templates/components/molecules/main-menu/main-menu.html.twig + + 
    <div class="decanter-main-menu">
+  <div class="decanter-nav__container">
+    <button class="decanter-main-menu__btn">Menu</button>
+    <nav role="navigation" class="decanter-nav">
+      <button class="decanter-nav__close">
+        <img src="../../../img/close.svg" alt="close">
+      </button>
+      <ul class="decanter-nav-primary decanter-accordion">
+        <li><button class="decanter-accordion__button decanter-nav__link" aria-expanded="false" aria-controls="basic-nav-section-one">
+      Parent link
+    </button>
+          <ul id="basic-nav-section-one" class="decanter-nav-submenu">
+            <li>
+              <a href="#">Child link</a>
+            </li>
+            <li>
+              <a href="#">Child link</a>
+            </li>
+            <li>
+              <a href="#">Child link</a>
+            </li>
+          </ul>
+        </li>
+        <li><button class="decanter-accordion__button decanter-nav__link" aria-expanded="false" aria-controls="basic-nav-section-two">
+      Parent link
+    </button>
+          <ul id="basic-nav-section-two" class="decanter-nav-submenu">
+            <li>
+              <a href="#">Child link</a>
+            </li>
+            <li>
+              <a href="#">Child link</a>
+            </li>
+            <li>
+              <a href="#">Child link</a>
+            </li>
+          </ul>
+        </li>
+        <li><a class="decanter-nav__link" href="#">
+      Parent link
+    </a></li>
+      </ul>
+    </nav>
+  </div>
+</div>
+<div class="decanter-nav__overlay"></div>
+
    +
    + +
    + Source: components/molecules/_main-menu.scss, line 3 +
    +
    +
    +
    +

    + + + 2.4 + + Molecules.Mega Menu + + + Mega Menu + +

    + +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    + +
    +

    An expandable menu in which choices are displayed in a two-dimensional +dropdown layout. Excellent design choice for accommodating a large number of +options or for revealing lower-level site pages at a glance.

    + +
    + +
    + +
    +
    + Example
    + + +
    +

    Hello

    +
    +
    + +
    +
    + + Markup + + 
    <h2>Hello</h2>
    +
    + +
    + Source: components/molecules/_mega-menu.scss, line 3 +
    +
    +
    +
    +

    + + + 2.5 + + Molecules.Sidenav + + + Sidenav + +

    + +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    + +
    +

    A side navigation component.

    + +
    + +
    + +
    +
    + Example
    + + +
    +

    Single Level

    + + +

    Two Levels

    + + +

    Three Levels

    + + +
    +
    + +
    +
    + + Markup: ../templates/components/molecules/sidenav/sidenav.html.twig + + 
    <h3>Single Level</h3>
+  <ul class="decanter-sidenav__list">
+      <li><a class='decanter-nav__current' href=''#'>Active parent link</a></li>
+      <li><a href='#'>Parent link</a></li>
+      <li><a href='#'>Parent link</a></li>
+  </ul>
+
+<h3>Two Levels</h3>
+  <ul class="decanter-sidenav__list">
+      <li><a href='#'>Parent link</a></li>
+      <li><a class='decanter-nav__current' href=''#'>Active parent link</a></li>
+      <ul class="decanter-sidenav__sublist">
+          <li><a href='#'>Child link</a></li>
+          <li><a href='#'>Child link</a></li>
+          <li><a href='#'>Child link</a></li>
+          <li><a href='#'>Child link</a></li>
+          <li><a class='decanter-nav__current' href=''#'>Active child link</a></li>
+      </ul>
+      <li><a href='#'>Parent link</a></li>
+  </ul>
+
+<h3>Three Levels</h3>
+  <ul class="decanter-sidenav__list">
+      <li><a href='#'>Parent link</a></li>
+      <li><a class='decanter-nav__current' href=''#'>Active parent link</a></li>
+      <ul class="decanter-sidenav__sublist">
+          <li><a href='#'>Child link</a></li>
+          <li><a class='decanter-nav__current' href=''#'>Active child link</a></li>
+          <ul class="decanter-sidenav__sublist">
+              <li><a href='#'>Grandchild link</a></li>
+              <li><a href='#'>Grandchild link</a></li>
+              <li><a class='decanter-nav__current' href=''#'>Active grandchild link</a></li>
+          </ul>
+          <li><a href='#'>Child link</a></li>
+          <li><a href='#'>Child link</a></li>
+          <li><a href='#'>Child link</a></li>
+      </ul>
+      <li><a href='#'>Parent link</a></li>
+  </ul>
+
    +
    + +
    + Source: components/molecules/_sidenav.scss, line 3 +
    +
    +
    + + + + + + + + + + + + + + + + + diff --git a/styleguide/section-organisims.html b/styleguide/section-organisims.html new file mode 100644 index 000000000..181071468 --- /dev/null +++ b/styleguide/section-organisims.html @@ -0,0 +1,415 @@ + + + + + Decanter Style Guide and Pattern Library + + + + + + + + + + + +
    +
    +

    Decanter Style Guide and Pattern Library

    +
    + +
    +
    + + +
    +
    +

    + + + 3 + + Organisims + + + Organisims + +

    + + +
    +

    Molecules give us some building blocks to work with, and we can now combine +them together to form organisms. Organisms are groups of molecules joined +together to form a relatively complex, distinct section of an interface. +We’re starting to get increasingly concrete. A client might not be terribly +interested in the molecules of a design system, but with organisms we can see +the final interface beginning to take shape. Dan Mall (who I’m working with +on several projects) uses element collages, which articulate ideas for a few +key organisms to facilitate client conversations and shape the visual +direction (all without having to construct full comps). +Organisms can consist of similar and/or different molecule types. +For example, a masthead organism might consist of diverse components like a +logo, primary navigation, search form, and list of social media channels. +But a “product grid” organism might consist of the same molecule (possibly +containing a product image, product title and price) repeated over and over +again. Building up from molecules to organisms encourages creating +standalone, portable, reusable components.

    + +
    + +
    + + +
    + Source: components/index.scss, line 31 +
    +
    +
    +
    +

    + + + 3.1 + + Organisims.Accordion + + + Accordion + +

    + +

    + + Toggle full screen + + + + + + + + + Open in new window + + + + + + + + + + + Toggle example guides + + + + + + + + + + + + + + + + + + + + + Toggle HTML markup + + + + + +

    + +
    +

    For use when a user only needs a few specific pieces of +content within a page, or for when information needs to +be displayed in a small space.

    + +
    + +
    + +
    +
    + Examples
    + +
    + Default styling +
    + +
    +
      +
    • + +
      + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor + in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. +
      +
      • +
    • + +
      + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor + in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. +
      +
      • +
    • + +
      + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor + in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. +
      +
      • +
    • + +
      + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor + in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. +
      +
      • +
    • + +
      + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor + in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. +
      +
      • +
    + +
    +
    + +
    + .decanter-accordion--bordered +
    +
    + Bordered Version +
    +
    +
      +
    • + +
      + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor + in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. +
      +
      • +
    • + +
      + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor + in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. +
      +
      • +
    • + +
      + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor + in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. +
      +
      • +
    • + +
      + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor + in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. +
      +
      • +
    • + +
      + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor + in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. +
      +
      • +
    + +
    +
    +
    +
    + + Markup: ../templates/components/organisms/accordions/accordions.html.twig + + 
    <ul class="decanter-accordion  [modifier class]">
+  <li>
+    <button class="decanter-accordion__button" aria-expanded="true" aria-controls="b-a1">
+      First Item
+    </button>
+    <div id="b-a1" class="decanter-accordion__content">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
+      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </div>
+  </li>
+  <li>
+    <button class="decanter-accordion__button" aria-expanded="false" aria-controls="b-a2">
+      Second Item
+    </button>
+    <div id="b-a2" class="decanter-accordion__content">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
+      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </div>
+  </li>
+  <li>
+    <button class="decanter-accordion__button" aria-expanded="false" aria-controls="b-a3">
+      Third Item
+    </button>
+    <div id="b-a3" class="decanter-accordion__content">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
+      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </div>
+  </li>
+  <li>
+    <button class="decanter-accordion__button" aria-expanded="false" aria-controls="b-a4">
+      Fourth Item
+    </button>
+    <div id="b-a4" class="decanter-accordion__content">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
+      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </div>
+  </li>
+  <li>
+    <button class="decanter-accordion__button" aria-expanded="false" aria-controls="b-a5">
+      Fifth Item
+    </button>
+    <div id="b-a5" class="decanter-accordion__content">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
+      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </div>
+  </li>
+</ul>
+
    +
    + +
    + Source: components/organisms/_accordions.scss, line 3 +
    +
    +
    + + + + + + + + + + + + + + + + + diff --git a/templates/elements/quote/quote.html.json b/templates/elements/quote/quote.html.json new file mode 100644 index 000000000..8695f99e7 --- /dev/null +++ b/templates/elements/quote/quote.html.json @@ -0,0 +1,6 @@ +{ + "name": "John Doe", + "detail1": "Detail 1", + "detail2": "Detail 2", + "text": "This is the quote. Lorem ipsur adipisicing elit, sed do eiusmod tempor incididunt ut labore et..." +} diff --git a/templates/elements/quote/quote.html.twig b/templates/elements/quote/quote.html.twig new file mode 100644 index 000000000..b41d7df9e --- /dev/null +++ b/templates/elements/quote/quote.html.twig @@ -0,0 +1,8 @@ +
    + Please provide alt text +
    +

    {{ name }}

    +

    {{ detail1 }}
    {{ detail2 }}

    +

    "{{ text }}"

    +
    +