docks_theme_api 1.0.2

data/source/components/list/list.scss

@@ -0,0 +1,230 @@
+//                               ___
+//                   ___        /  /\        ___
+//                  /  /\      /  /:/_      /  /\
+//    ___     ___  /  /:/     /  /:/ /\    /  /:/
+//   /__/\   /  /\/__/::\    /  /:/ /::\  /  /:/
+//   \  \:\ /  /:/\__\/\:\__/__/:/ /:/\:\/  /::\
+//    \  \:\  /:/    \  \:\/\  \:\/:/~/:/__/:/\:\
+//     \  \:\/:/      \__\::/\  \::/ /:/\__\/  \:\
+//      \  \::/       /__/:/  \__\/ /:/      \  \:\
+//       \__\/        \__\/     /__/:/        \__\/
+//                              \__\/
+
+//*
+// @pattern List
+//
+// A list allows you to present a set of selectable items vertically. These
+// lists can be be separated into any number of sublists, and two levels of
+// subheadings are available (so, you can have a sublist within a sublist).
+//
+// The sublists can optionally allow a subheading to toggle the visibility of
+// the associated sublist. It also supports the ability to filter the contents
+// of a list to only items matching a given string, hiding subheadings as
+// necessary.
+//
+// @since 1.0.0
+
+
+
+//*
+// The core container for a list. List items can go directly in this container
+// or, if you want to provide toggle-able or filter-able sublists, within a
+// sublist.
+
+.list {
+  padding: 0;
+  margin: default(spacing) 0 double(default(spacing));
+  list-style: none;
+
+  .type--heading {
+    padding-left: default(spacing);
+    padding-right: default(spacing);
+  }
+
+  .popover & {
+    margin-bottom: default(spacing);
+  }
+}
+
+//*
+// An individual item within a list. These items have hover, focus, and active
+// states so that it is clear what item is actionable/ being actioned.
+
+.list__item {
+  // box model
+  display: block;
+  padding: quarter(default(spacing)) default(spacing);
+
+  // backdrop
+  cursor: pointer;
+
+  // type
+  text-decoration: none;
+  color: ui-color(gray, darkest);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+
+  &:hover,
+  &:focus {
+    outline: none;
+    background: ui-color(gray, light);
+  }
+
+  &:active {
+    background-color: ui-color(blue);
+    color: ui-color(blue, darker);
+  }
+}
+
+//*
+// An item that is currently active For example, in the sidebar, this class is
+// used for the item representing the currently-active pattern.
+
+.list__item--is-active {
+  &,
+  &:hover,
+  &:focus {
+    background-color: ui-color(blue);
+    color: ui-color(blue, darker);
+  }
+}
+
+//*
+// A list item that is indented on the left to indicate that it is related to
+// the closest, non-indented item above it.
+
+.list__item--indented {
+  padding-left: calc(#{default(spacing)} + 2ch);
+  position: relative;
+
+  &:before {
+    content: "";
+    display: block;
+    position: absolute;
+    left: calc(#{default(spacing)} + 1ch);
+    top: 0;
+    height: 100%;
+    width: 2px;
+    background: rgba(ui-color(black), 0.07);
+  }
+
+  &:last-child:before {
+    height: 85%;
+  }
+
+  .list__item:not(.list__item--indented) + &:before {
+    top: 15%;
+    height: 85%;
+  }
+}
+
+//*
+// A subset of items that have their own hading to distinguish them. This
+// subcomponent can contain any number of items and/ or other sublists. This
+// grouping also allows the [`Filterable`](@link filterable) component to
+// accurately hide subsets of the list, including headings within a group
+// where all items are hidden.
+
+.list__group {}
+
+
+
+//*
+// A horizontal list of links separated by slashes.
+
+.link-list {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  display: flex;
+  flex-wrap: wrap;
+
+  > li {
+    position: relative;
+    flex: 0 0 auto;
+
+    &:after {
+      $link-list__item--separator-height: 80%;
+
+      content: "";
+
+      // position
+      position: absolute;
+      top: half(100% - $link-list__item--separator-height);
+      right: -1px;
+      transform: rotate(15deg);
+
+      // box model
+      display: block;
+      height: $link-list__item--separator-height;
+
+      // backdrop
+      border-right: 2px solid rgba(ui-color(gray, darkest), 0.1);
+    }
+
+    &:last-child:after {
+      display: none;
+      margin-right: 0;
+    }
+  }
+}
+
+//*
+// An individual list within a link list. This class should go on the actual
+// anchor (or `button`, if there is no reasonable `href`) element so that
+// there is as large a hit target as possible.
+//
+// Each item (except for the last one) is given a small separator so that it is
+// clear where the hit areas end. This is placed on the containing `li` since
+// the `link-list__item` can be a `button`.
+//
+// In the dark theme, the colors for each list item invert.
+
+.link-list__item {
+  // position
+  position: relative;
+
+  // box model
+  display: block;
+  cursor: pointer;
+  padding: quarter(default(spacing)) half(default(spacing));
+
+  // backdrop
+  @include remove-browser-styling;
+  background: none;
+  border: none;
+  opacity: 0.6;
+
+  // type
+  font-size: 1em;
+  line-height: 1;
+  color: ui-color(gray, darker);
+  transition: opacity 0.25s ease;
+
+  &:hover,
+  &:focus {
+    opacity: 1;
+    outline: none;
+  }
+}
+
+
+
+//*
+// A list that simply arranges the contained `li`s with some spacing between
+// them.
+
+.unstyled-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+
+  > li {
+    margin: double(default(spacing)) 0;
+
+    &:first-child {
+      margin-top: 0;
+    }
+  }
+}

data/source/components/modal/modal.coffee

@@ -0,0 +1,84 @@
+BASE_CLASS = "details-sheet"
+
+CLASSES =
+  BASE: BASE_CLASS
+  OVERLAY: "#{BASE_CLASS}__overlay"
+  CLOSER: "#{BASE_CLASS}__close"
+  NAME: "#{BASE_CLASS}__name"
+  TYPE: "#{BASE_CLASS}__type"
+  DESCRIPTION: "#{BASE_CLASS}__description"
+  PRECLUDES: "#{BASE_CLASS}__precludes"
+  ACTIVATE_WITH: "#{BASE_CLASS}__activate-with"
+  SET_BY: "#{BASE_CLASS}__set-by"
+
+STATES =
+  BASE: ACTIVE: "#{CLASSES.BASE}--is-active"
+  OVERLAY: ACTIVE: "#{CLASSES.OVERLAY}--is-active"
+
+
+create_comma_string = (items, options = {}) ->
+  connector = options.connector || "and"
+  string = ""
+
+  for item, index in items
+    new_string = "<code>#{item}</code>"
+    new_string = ", #{new_string}" if index > 0 && index < items.length - 1
+    new_string = ", #{connector} #{new_string}" if index > 0 && index == items.length - 1 && items.length > 2
+    new_string = " #{connector} #{new_string}" if index > 0 && index == items.length - 1 && items.length == 2
+    string += new_string
+
+  string
+
+sheet = undefined
+
+fill_in_details = (details) ->
+  sheet.name.innerHTML = details.name
+  node.innerHTML = details.type for node in sheet.type
+
+  sheet.description.innerHTML = details.description
+  sheet.description.parentNode.style.display = if details.description.length then "" else "none"
+
+  for complex_attr in ["precludes", "activate_with", "set_by"]
+    sheet[complex_attr].innerHTML = create_comma_string(details[complex_attr])
+    sheet[complex_attr].parentNode.style.display = if details[complex_attr].length then "" else "none"
+
+show_sheet = ->
+  sheet.base.classList.add(STATES.BASE.ACTIVE)
+  sheet.overlay.classList.add(STATES.OVERLAY.ACTIVE)
+
+hide_sheet = ->
+  sheet.base.classList.remove(STATES.BASE.ACTIVE)
+  sheet.overlay.classList.remove(STATES.OVERLAY.ACTIVE)
+
+
+$ ->
+  node = document.querySelector(".#{CLASSES.BASE}")
+  return unless node
+
+  sheet =
+    base: node
+    overlay: node.nextElementSibling
+    name: node.querySelector(".#{CLASSES.NAME}")
+    type: node.querySelectorAll(".#{CLASSES.TYPE}")
+    description: node.querySelector(".#{CLASSES.DESCRIPTION}")
+    precludes: node.querySelector(".#{CLASSES.PRECLUDES}")
+    activate_with: node.querySelector(".#{CLASSES.ACTIVATE_WITH}")
+    set_by: node.querySelector(".#{CLASSES.SET_BY}")
+
+$(document).on("click touchend", ".#{CLASSES.OVERLAY}", hide_sheet)
+
+DetailsSheet =
+  present: (details) ->
+    return unless sheet
+    fill_in_details(details)
+    show_sheet()
+
+  receive: (event) ->
+    return unless event.type == Docks.EVENTS.INFO_REQUEST
+
+    @present(event.details)
+
+Lemon.mix(Docks.Iframe.Mixins.Registerable, into: DetailsSheet)
+$ -> Docks.Iframe.register_with_all_iframes(DetailsSheet)
+
+window.Docks.DetailsSheet = DetailsSheet

data/source/components/modal/modal.erb

@@ -0,0 +1,19 @@
+<div class="details-sheet">
+  <div class="details-sheet__section">
+    <h6 class="details-sheet__subtitle">Details for</h6>
+    <h5 class="details-sheet__name"></h5>
+  </div>
+
+  <div class="details-sheet__section">
+    <div class="details-sheet__description"></div>
+  </div>
+
+  <div class="details-sheet__section">
+    <p>When using this <span class="details-sheet__type"></span>, always also use <span class="details-sheet__activate-with"></span>.</p>
+    <p>Don't use this <span class="details-sheet__type"></span> with <span class="details-sheet__precludes"></span>.</p>
+    <p>This <span class="details-sheet__type"></span> is set by <span class="details-sheet__set-by"></span>.</p>
+  </div>
+</div>
+
+
+<div class="details-sheet__overlay"></div>

data/source/components/modal/modal.scss

@@ -0,0 +1,57 @@
+.details-sheet {
+  max-width: 90%;
+  position: fixed;
+  top: 50%; left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: white;
+  border-radius: 0.4rem;
+  box-shadow: 0 0 10px rgba(color(black), 0.3);
+  z-index: 20;
+  display: none;
+}
+
+.details-sheet--is-active {
+  display: block;
+}
+
+.details-sheet__overlay {
+  background: rgba(color(black), 0.9);
+  position: absolute;
+  top: 0; bottom: 0;
+  right: 0; left: 0;
+  z-index: 19;
+  display: none;
+}
+
+.details-sheet__overlay--is-active {
+  display: block;
+}
+
+
+.details-sheet__section {
+  padding: 1rem;
+
+  + .details-sheet__section {
+    border-top: 1px solid color(sky-dark);
+  }
+}
+
+.details-sheet__name {
+  display: inline-block;
+  background-color: color(sky-light);
+  padding: 0.1rem 0.25em;
+  border-radius: 0.25em;
+  color: color(slate-light);
+  font-size: 1.2em;
+  font-family: Consolas, monospace;
+  margin: 0;
+}
+
+.details-sheet__subtitle {
+  margin: 0 0 0.5rem;
+  font-size: 0.6rem;
+  text-transform: uppercase;
+  color: color(slate-light);
+  opacity: 0.3;
+  font-weight: 600;
+}

data/source/components/modal/package.json

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

data/source/components/notice/notice.scss

@@ -0,0 +1,48 @@
+//*
+// @pattern Notice
+//
+// A simple, colored container around that emphasizes the contained text. This
+// should be used for important details about a symbol; for example, to
+// indicate that a component is deprecated or experimental.
+//
+// @since 1.0.0
+
+
+//*
+// A regular notice.
+//
+// @markup
+// <div class="notice">
+//   <div class="type-container">
+//     <p>Please don't use this component anymore! It's no good.</p>
+//   </div>
+// </div>
+
+.notice {
+  background-color: ui-color(yellow);
+  width: fit-content;
+  color: ui-color(yellow, dark);
+  padding: 1rem;
+  border-radius: default(border-radius);
+  @include font-size(paragraph-small);
+  position: relative;
+
+  .type, p, code {
+    color: inherit;
+    font-size: inherit;
+  }
+
+  .type--heading {
+    font-weight: 400;
+  }
+}
+
+//*
+// A notice that indicates something is new about the attached symbol.
+//
+// @demo_type joint
+
+.notice--new {
+  background-color: ui-color(blue);
+  color: ui-color(blue, darker);
+}

data/source/components/popover/package.json

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