docks_theme_api 1.0.2

data/source/components/tablist/tablist_tab.erb

@@ -0,0 +1,20 @@
+<%
+  tab.configure do |config|
+    config.defaults text: "Tab",
+                    active?: false,
+                    id: "tab",
+                    panel_id: "tab_panel",
+                    icon: nil
+
+    config.classes(base: "tablist__tab")
+    config.conditional_classes(if: :active?, base: "tablist__tab--is-active")
+  end
+%>
+
+<a class="<%= tab.classes_for(:base) %>" role="tab" tabindex="<%= tab.active? ? 0 : -1 %>" aria-controls="<%= tab.panel_id %>" href="#<%= tab.panel_id %>" id="<%= tab.id %>">
+  <% if tab.icon %>
+    <%= docks_icon(tab.icon, style: :stroke) %>
+  <% end %>
+
+  <span class="tablist__tab__text"><%= tab.text %></span>
+</a>

data/source/components/toggle/package.json

@@ -0,0 +1,3 @@
+{
+  "main": "toggle.js"
+}

data/source/components/toggle/toggle.erb

@@ -0,0 +1,11 @@
+<% variation = toggle.variation %>
+
+<div class="toggle" id="toggle--<%= variation.name %>" role="button" tabindex="0" data-variation-name="<%= variation.name %>">
+  <div class="toggle__main">
+    <span class="toggle__type"><%= variation.symbol_type %></span>
+    <% base_toggle = Docks.config.naming_convention.toggle(variation.name) %>
+    <span class="toggle__name"><%= variation.name.gsub(base_toggle, "<span class='helper--visually-hidden'>#{base_toggle}</span>") %></span>
+  </div>
+
+  <span class="toggle__info">?</span>
+</div>

data/source/components/toggle/toggle.js

@@ -0,0 +1,211 @@
+import Modal from "~components/modal";
+import { Communicator } from "~components/iframe";
+import Keycodes from "~utilities/keycodes";
+import Pattern from "~utilities/pattern";
+import Builder from "~utilities/builder";
+import Events from "~utilities/events";
+import { naming_convention } from "~utilities/naming_convention";
+
+const classes = {
+  root: "toggle",
+  info: "toggle__info",
+  container: "toggle__container"
+};
+
+const states = {
+  root: {
+    locked: "toggle--is-locked",
+    active: "toggle--is-active",
+    partially_active: "toggle--is-partially-active"
+  }
+};
+
+const attrs = {
+  name: "data-variation-name"
+};
+
+var Toggle, Toggles,
+    handle_keypress, info_click, toggle_click, update_toggle_state;
+
+//*
+// Listens and responds to keypress events while focused on a toggle. If either
+// space or enter are pressed, the toggle will be toggled as if it had been
+// clicked on. This allows for keyboard-only navigation and manipulation of
+// toggles.
+//
+// @param {Object} event - The `keypress` event.
+// @private
+
+handle_keypress = (event) => {
+  if(![Keycodes.ENTER, Keycodes.SPACE].include(event.which)) { return; }
+  event.preventDefault();
+  update_toggle_state(event.target);
+};
+
+//*
+// Listens for clicks on the information icon in the toggle and activates the
+// modal to present details on that variation.
+//
+// @param {Object} event - The `click` event.
+// @private
+
+info_click = (event) => {
+  var variation_name;
+
+  // Prevent the click event from propagating to the toggle.
+  event.stopImmediatePropagation();
+  event.preventDefault();
+
+  variation_name = $(event.target).closest(`.${classes.root}`)[0].getAttribute(attrs.name);
+  Modal.present(Pattern.find(variation_name, { search_all: true }));
+};
+
+//*
+// Listens for click events on a toggle and updates the state of the toggle
+// appropriately.
+//
+// @param {Object} event - The `click` event.
+// @private
+
+toggle_click = (event) => {
+  event.preventDefault();
+  update_toggle_state(event.target);
+};
+
+//*
+// Updates the status of the passed changer. If the `add` attribute of the
+// `option` argument is defined, a truthy value will activate the changer
+// and a falsey one will deactivate it. Otherwise, the changer will simply
+// have its state toggled.
+//
+// @private
+//
+// @param {HTMLElement, Toggle, String} toggle - The whose state should be
+// updated. Anything that can be resolved to a `Toggle` via `Toggle.for`
+// can be used here, including a `Toggle`, the `HTMLElement` that is the root
+// of the toggle, or a `String` that is the name of a toggle.
+//
+// @param {Object} [options = {}] - The options to use for this update. Currently,
+// only the `add` option is read to determine whether the toggle should be
+// activated or deactivated. If no `options` argument is passed, the `toggle`
+// will simply be toggled.
+
+update_toggle_state = (toggle, options = {}) => {
+  var toggle_node, all_toggles, variation, add, currently_active,
+      activate_with, activate_with_toggle, preclude;
+
+  toggle = Toggle.for(toggle);
+  if(toggle.locked) { return; }
+  toggle_node = toggle.root;
+  toggle.lock();
+
+  all_toggles = Toggles.for(toggle_node);
+  variation = Pattern.for(toggle_node.getAttribute(attrs.name), { search_all: true });
+  add = (options.add ? !!options.add : !toggle.active);
+
+  // Update the state of all variations that should be activated with the
+  // current toggle.
+  for(activate_with of ((variation && variation.activate_with) || [])) {
+    if(naming_convention.is_component(variation)) { continue; }
+
+    activate_with_toggle = Toggle.for(activate_with);
+
+    if(activate_with_toggle) {
+      currently_active = activate_with_toggle.active;
+      if((currently_active && !add) || (!currently_active && add)) {
+        update_toggle_state(activate_with_toggle, { add: add });
+      }
+    } else {
+      all_toggles.trigger({
+        add,
+        details: {
+          for: naming_convention.component_name(activate_with),
+          name: activate_with
+        }
+      });
+    }
+  }
+
+  // TODO: something about filters.
+  if(add) {
+    toggle.activate();
+
+    // Deactivates any currently active variations that are precluded from being
+    // active with the current variation.
+    for(preclude of ((variation && variation.precludes) || [])) {
+      preclude = Toggle.for(preclude);
+      if(preclude && preclude.active) { update_toggle_state(preclude, { add: false }); }
+    }
+  } else {
+    toggle.deactivate();
+  }
+
+  toggle.unlock();
+  all_toggles.trigger({ add, details: variation });
+};
+
+//*
+// A constructor around a single `Toggle`. The returned object gives the ability
+// to update the toggle's state, locking or unlocking the toggle from further
+// changes, and getting the current state of the toggle.
+//
+// @param {HTMLElement} root - The root node of a toggle.
+// @return {Toggle}
+
+Toggle = (root) => {
+  if(!root) { return null; }
+  if(root instanceof Toggle) { return root; }
+
+  return {
+    root,
+    lock() { root.classList.add(states.root.locked); },
+    unlock() { root.classList.remove(states.root.locked); },
+    activate() { root.classList.add(states.root.active); },
+    deactivate() { root.classList.remove(states.root.active); },
+    get is_locked() { return root.classList.contains(states.root.locked); },
+    get is_active() {
+      return root.classList.contains(states.root.active) ||
+        root.classList.contains(states.root.partially_active);
+    },
+    constructor: Toggle
+  };
+};
+
+//*
+// Gets the toggle for the passed variation.
+//
+// @param {Toggle, String, HTMLElement} variation - The source of the desired
+// `Toggle` — either as the HTMLElement that roots the toggle, a `Toggle` (which
+// is returned as-is) or a `String` that is the name of a toggle.
+//
+// @return {Toggle}
+
+Toggle.for = (variation) => {
+  if(variation instanceof Toggle) {
+    return variation;
+  } else if(typeof variation === "string") {
+    return Toggle(document.querySelector(`[${attrs.name}='${variation.name}']`));
+  } else {
+    return Toggle($(variation).closest(`.${classes.root}`)[0]);
+  }
+};
+
+Toggles = (root) => {
+  var communicator = Communicator();
+  communicator.register.from_node(root);
+
+  return {
+    trigger(...args) { communicator.trigger(Events.types.class_change, ...args); }
+  };
+};
+
+Toggles.init = () => {
+  $(document)
+    .on("keypress", `.${classes.root}`, handle_keypress)
+    .on("click", `.${classes.info}`, info_click)
+    .on("click", `.${classes.root}`, toggle_click);
+
+  Builder.build(Toggles, { name: classes.container, cache: true });
+};
+
+export default Toggles;

data/source/components/toggle/toggle_container.erb

@@ -0,0 +1,30 @@
+<%
+  toggle_container.configure do |config|
+    config.defaults variations: {},
+                    base_class: "class",
+                    group_by: :base_class
+  end
+%>
+
+<% unless toggle_container.variations.empty? %>
+  <div class="toggle__container" data-iframe-id="<%= toggle_container.base_class %>">
+    <% toggle_container.variations.each do |base_class, variations| %>
+      <% if toggle_container.group_by == :base_class %>
+        <div class="toggle__toggle_container-group">
+          <h3 class="toggle__heading"><%= base_class %></h3>
+
+          <section class="toggle__scroller">
+            <% variations.each do |variation| %>
+              <%= docks_toggle(variation: variation) %>
+            <% end %>
+          </section>
+        </div>
+
+      <% else %>
+        <% variations.each do |variation| %>
+          <%= docks_toggle(variation: variation) %>
+        <% end %>
+      <% end %>
+    <% end %>
+  </div>
+<% end %>

data/source/components/vertical_spacer/vertical-spacer.scss

@@ -0,0 +1,3 @@
+.vertical-spacer {
+    margin: half(default(spacing)) 0;
+}

data/source/components/vertical_stack/vertical-stack.scss

@@ -0,0 +1,19 @@
+.vertical-stack {
+  display: flex;
+  flex-direction: column;
+  align-self: stretch;
+  width: 100%;
+}
+
+.vertical-stack__item {
+  flex: 1 1 0px;
+  max-width: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.vertical-stack__item--fixed {
+  flex: 0 0 auto;
+  overflow: visible;
+}

data/source/components/xray/package.json

@@ -0,0 +1,3 @@
+{
+  "main": "xray.js"
+}

data/source/components/xray/xray.erb

@@ -0,0 +1,50 @@
+<div class="x-ray">
+  <header class="page-header">
+    <div class="grid grid--vertically-centered">
+      <div class="grid__item">
+        <h1 class="type type--heading type--heading-1"></h1>
+      </div>
+
+      <div class="grid__item grid__item--no-flex">
+        <button class="x-ray__closer" data-xray-dismiss="true">
+          <span class="helper--visually-hidden">Close X-ray</span>
+          <div class="icon icon--action icon--close"></div>
+        </button>
+      </div>
+    </div>
+  </header>
+
+  <div class="x-ray__content">
+    <div class="x-ray__diagram">
+      <%= docks_exploded %>
+    </div>
+
+    <aside class="x-ray__list"></aside>
+    <div class="x-ray__details"></div>
+  </div>
+
+  <script type="text/template" data-xray-template="list">
+    <ul class="link-list"></ul>
+  </script>
+
+  <script type="text/template" data-xray-template="details">
+    <div class="content">
+      <div class="type type--heading type--heading-3">
+        <span class="x-ray__details__tagname type--code"></span>
+        <span class="x-ray__details__class type--code"></span>
+      </div>
+
+      <div class="type-container">
+        <div class="x-ray__details__description"></div>
+      </div>
+
+      <div class="x-ray__details__variations">
+        <h4 class="type type--heading type--heading-4">Variations</h4>
+        <div class="type-container type-container--small">
+          <ul class="unstyled-list"></ul>
+        </div>
+      </div>
+    </div>
+  </script>
+</div>
+

data/source/components/xray/xray.js

@@ -0,0 +1,123 @@
+import Template from "~utilities/template";
+import Pattern from "~utilities/pattern";
+import Events from "~utilities/events";
+import Exploded, { events as exploded_events } from "~components/exploded";
+import { Communicator } from "~components/iframe";
+
+const classes = {
+  root: "x-ray",
+  details: "x-ray__details",
+  list: "x-ray__list"
+};
+
+const states = {
+  root: { active: "x-ray--is-active" }
+};
+
+const helpers = {
+  active: "x-ray__helpers--x-ray-is-active"
+};
+
+const attrs = {
+  dismiss: "data-xray-dismiss",
+  present: "data-xray-present",
+  template: "data-xray-template"
+};
+
+const template_names = {
+  details: "details",
+  list: "list"
+};
+
+var Xray,
+    structure, exploded, templates, component,
+    hook_up_iframe_communication, communicator,
+    toggle, present, dismiss, set_component, set_details;
+
+hook_up_iframe_communication = () => {
+  var registered;
+
+  communicator = Communicator();
+  registered = communicator.register.from_node(structure.root);
+
+  if(!registered) { return; }
+
+  communicator.on(Events.types.markup_request, (event) => {
+    exploded.set_markup(event.markup);
+  });
+};
+
+set_component = (component_name) => {
+  component = Pattern.find(component_name, { search_all: true });
+  structure.heading.innerHTML = component.title ? component.title : `<code class='type--code'>${component_name}</code>`;
+  structure.list.innerHTML = Template.render(templates.list, {
+    components: [component_name].concat(component.subcomponent || [])
+  });
+  set_details(component);
+};
+
+set_details = (symbol, other_content = {}) => {
+  var options = Object.assign(other_content, symbol);
+  structure.details.innerHTML = Template.render(templates.details, options);
+};
+
+present = () => {
+  communicator.trigger(Events.types.markup_request);
+  structure.root.classList.add(states.root.active);
+  document.body.classList.add(helpers.active);
+};
+
+dismiss = () => {
+  exploded.set_markup();
+  structure.root.classList.remove(states.root.active);
+  document.body.classList.remove(helpers.active);
+};
+
+toggle = () => {
+  return (structure.root.classList.contains(states.root.active) ? dismiss() : present());
+};
+
+Xray = {
+  toggle,
+  present,
+  dismiss,
+
+  init() {
+    var root = document.querySelector(`.${classes.root}`);
+    if(!root) { return; }
+
+    exploded = Exploded.within(root)[0];
+
+    structure = {
+      root,
+      heading: root.querySelector(".type-heading"),
+      details: root.querySelector(`.${classes.details}`),
+      list: root.querySelector(`.${classes.list}`)
+    };
+
+    templates = {
+      details: root.querySelector(`[${attrs.template}='${template_names.details}']`),
+      list: root.querySelector(`[${attrs.template}='${template_names.list}']`)
+    };
+
+    hook_up_iframe_communication();
+
+    exploded.on(exploded_events.pane_selected, (event) => {
+      component = Pattern.find(event.component, { search_all: true });
+      if(component) { set_details(component, { tagname: event.node.tagName }); }
+    });
+
+    $(root)
+      .on("click", `[${attrs.dismiss}]`, dismiss)
+      .on("click", "[href^='#']", (event) => {
+        event.preventDefault();
+        exploded.select_component(event.target.textContent);
+      });
+
+    $(document).on("click", `[${attrs.present}]`, (event) => {
+      set_component(event.getAttribute(attrs.present));
+    });
+  }
+};
+
+export default Xray;

data/source/components/xray/xray.scss

@@ -0,0 +1,79 @@
+body {
+  position: relative;
+
+  &.x-ray__helpers--x-ray-is-active {
+    overflow: hidden;
+  }
+}
+
+.x-ray {
+  background: ui-color(white);
+  position: absolute;
+  top: 0; bottom: 0;
+  left: 0; right: 0;
+  z-index: -1;
+  overflow-x: hidden;
+  overflow-y: auto;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  min-height: 100%;
+
+  .page-header {
+    flex: 0 0 auto;
+  }
+}
+
+.x-ray--is-active {
+  opacity: 1;
+  z-index: 1200;
+}
+
+
+
+.x-ray__content {
+  padding-bottom: 3rem;
+}
+
+
+.x-ray__list {
+  padding: default(spacing);
+  background-color: ui-color(gray, light);
+}
+
+.x-ray__closer {
+  background: transparent;
+  border: none;
+  padding: 0;
+  appearance: none;
+}
+
+
+
+.x-ray__diagram {
+  padding: default(spacing) 0 0;
+  background: ui-color(gray);
+}
+
+
+.x-ray__details {
+  display: none;
+}
+
+.x-ray__details--is-visible {
+  display: block;
+}
+
+.x-ray__details__tagname {
+  display: inline-block;
+  font-size: 0.75em;
+  background-color: ui-color(gray, light);
+  padding: 0.3em 0.4em 0.2em;
+  @include default(border-radius);
+  line-height: 1;
+  color: ui-color(gray, darker);
+  margin-right: 0.25rem;
+}
+
+.x-ray__details__description {
+  margin-bottom: (2 * default(spacing));
+}

data/source/foundation/app/app.js

@@ -0,0 +1,15 @@
+var App, component, components = [];
+
+App = {
+  register(a_component) {
+    components.push(a_component);
+  },
+
+  init() {
+    for(component of components) {
+      if(component.init) { component.init(); }
+    }
+  }
+};
+
+export default App;

data/source/foundation/app/package.json

@@ -0,0 +1,3 @@
+{
+  "main": "app.js"
+}

data/source/pattern-library-demo.scss

@@ -0,0 +1,13 @@
+@import "utilities/functions/*";
+@import "utilities/mixins/*";
+@import "utilities/variables/*";
+@import "utilities/colors/*";
+@import "utilities/font_sizes/*";
+@import "utilities/z_indexes/*";
+@import "utilities/media/*";
+@import "utilities/defaults/*";
+
+@import "utilities/foundation/*";
+
+@import "components/**/*";
+@import "structures/**/*";

data/source/pattern-library.scss

@@ -0,0 +1,13 @@
+@import "utilities/functions/*";
+@import "utilities/mixins/*";
+@import "utilities/variables/*";
+@import "utilities/colors/*";
+@import "utilities/font_sizes/*";
+@import "utilities/z_indexes/*";
+@import "utilities/media/*";
+@import "utilities/defaults/*";
+
+@import "utilities/foundation/*";
+
+@import "components/**/*";
+@import "structures/**/*";

data/source/pattern_library.js

@@ -0,0 +1,8 @@
+import App from "~foundation/app";
+
+import "~vendor";
+import "~components";
+import "~structures";
+import "~behaviors";
+
+App.init();

data/source/pattern_library_demo.js

@@ -0,0 +1,8 @@
+import App from "~foundation/app";
+
+import Demo from "./demo";
+import Iframe from "./iframe";
+
+[Demo, Iframe].forEach(App.register);
+
+App.init();

data/source/structures/index.js

@@ -0,0 +1,11 @@
+import Sidebar from "./sidebar";
+
+import App from "~foundation/app";
+
+/* eslint-disable indent */
+
+[
+  Sidebar
+].forEach(App.register);
+
+/* eslint-enable indent */

data/source/structures/sidebar/package.json

@@ -0,0 +1,3 @@
+{
+  "main": "sidebar.js"
+}