docks_theme_api 1.0.2

data/source/components/card/card.scss

@@ -0,0 +1,32 @@
+//        ___          ___          ___        _____
+//       /  /\        /  /\        /  /\      /  /::\
+//      /  /:/       /  /::\      /  /::\    /  /:/\:\
+//     /  /:/       /  /:/\:\    /  /:/\:\  /  /:/  \:\
+//    /  /:/  ___  /  /:/~/::\  /  /:/~/:/ /__/:/ \__\:|
+//   /__/:/  /  /\/__/:/ /:/\:\/__/:/ /:/__\  \:\ /  /:/
+//   \  \:\ /  /:/\  \:\/:/__\/\  \:\/:::::/\  \:\  /:/
+//    \  \:\  /:/  \  \::/      \  \::/~~~~  \  \:\/:/
+//     \  \:\/:/    \  \:\       \  \:\       \  \::/
+//      \  \::/      \  \:\       \  \:\       \__\/
+//       \__\/        \__\/        \__\/
+//
+//*
+// @pattern Card
+//
+// A simple, clean container for content that is to appear on an area with a
+// colored background but that requires a completely neutral background to
+// appear properly.
+//
+// @since 1.0.0
+
+//*
+// @markup
+// <div class="card">
+//   <div style="height: 1rem; width: 1rem; margin: 2rem auto;"></div>
+// </div>
+
+.card {
+  background-color: color(white);
+  border-radius: default(border-radius);
+  overflow: hidden;
+}

data/source/components/code_block/code-block.scss

@@ -0,0 +1,353 @@
+//        ___          ___        _____        ___
+//       /  /\        /  /\      /  /::\      /  /\
+//      /  /:/       /  /::\    /  /:/\:\    /  /:/_
+//     /  /:/       /  /:/\:\  /  /:/  \:\  /  /:/ /\
+//    /  /:/  ___  /  /:/  \:\/__/:/ \__\:|/  /:/ /:/_
+//   /__/:/  /  /\/__/:/ \__\:\  \:\ /  /:/__/:/ /:/ /\
+//   \  \:\ /  /:/\  \:\ /  /:/\  \:\  /:/\  \:\/:/ /:/
+//    \  \:\  /:/  \  \:\  /:/  \  \:\/:/  \  \::/ /:/
+//     \  \:\/:/    \  \:\/:/    \  \::/    \  \:\/:/
+//      \  \::/      \  \::/      \__\/      \  \::/
+//       \__\/        \__\/                   \__\/
+
+//*
+// @pattern Code Block
+//
+// This component provides a full-featured container for code demos, including
+// support for multiple languages being shown in a single code block, a
+// rendered demo of the code in the code block, hiding the markup, and
+// switching between different components. The component can be scaled to
+// include as much or as little of these features as desired.
+//
+// This thing needs he following components:
+//
+// - [`button`](@link)
+//
+// - [`resizable::focus_size_button`](@link)
+//
+// - [`exploded::Exploded#set_markup`](@link)
+//
+// The JavaScript part of this component also supports communication with an
+// `iframe`ed demo, in-place updating of helper and rendered markup for
+// components, and, through [highlight.js](https://highlightjs.org/), syntax
+// highlighting of many common languages.
+//
+// @since 1.0.0
+
+
+
+//*
+// @title Code Block
+//
+// This is he overall container for the code block. It's primary purpose is to
+// provide margin above and below the code block, and to provide a hook to
+// make adjustments to many subcomponents through variations such as
+// `code-block--condensed` and `code-block--hidden`.
+//
+// Code blocks can go from the incredibly complex (see the demo above), to
+// more moderate levels of detail — such as a code block that gets rendered
+// inline based on a templating language and a stub, and that outputs an
+// attached demo:
+//
+// ```erb_demo
+// <%= docks_code_block code: "<p style='color: gray;'>Hello world!</p>",
+//                      language: "erb",
+//                      demo?: true,
+//                      hidden?: true %>
+// ```
+//
+// All the way to an incredibly simple code block:
+//
+// ```erb_demo
+// <%= docks_code_block code: "<p class='type type--paragraph'>Hello world!</p>" %>
+// ```
+//
+// @helper
+// <%= docks_code_block code: "<p style='color: gray;'>Hello world!</p>",
+//                      language: "erb",
+//                      demo?: true,
+//                      hidden?: true %>
+
+.code-block {
+  margin: default(spacing) 0;
+  overflow: hidden;
+  background: ui-color(gray, light);
+  @include default(border-radius);
+
+  .docks-button { display: none; }
+}
+
+
+//*
+// A code block with less internal padding and a smaller font size. Use this
+// variant for situations in which the code is secondary or would clash with
+// a more important code block.
+//
+// @set_by :condensed?
+
+.code-block--condensed {
+  margin-top: half(default(spacing));
+
+  .code-block__code {
+    padding-bottom: half(default(spacing));
+    @include font-size(code-block--condensed);
+  }
+
+  &:not(.code-block--with-header) {
+    .code-block__code {
+      padding-top: half(default(spacing));
+    }
+  }
+}
+
+//*
+// A code block that is full-bleed within the viewport. This will remove any
+// unnecessary border radius and side padding/ borders.
+//
+// @set_by :full_width?
+
+.code-block--full-width {
+  margin-right: 0;
+  margin-left: 0;
+  border-radius: 0;
+
+  .content & {
+    margin-left: negative(default(spacing));
+    margin-right: negative(default(spacing));
+  }
+}
+
+//*
+// A code block that has hidden the contained markup and most of its UI. Use
+// this for the initial state of a code block only when it has a demo attached
+// to it, otherwise the code block will appear as a strange strip of color
+// with no indication of its purpose. Hideable code blocks (as set by
+// `:hideable?`) can have this state toggled by clicking on the contained
+// button.
+//
+// When the code block is hidden, all of the UI in the header except for the
+// button to toggle visibility is hidden (that is, tabs to switch between
+// languages and the `select` to switch between demos, if they exist).
+//
+// @set_by :hidden?, CodeBlock#toggle
+// @javascript_action Docks.CodeBlock.for(this).toggle()
+
+.code-block--is-hidden {
+  &:not(.code-block--with-demo) {
+    .code-block__toggler {
+      background-color: ui-color(gray, light);
+    }
+  }
+
+  .code-block__content {
+    height: 0;
+  }
+}
+
+
+
+//*
+// This component sits in the `code-block__header` and wraps around both the
+// button to hide the code block and a `select` to switch between sets of
+// code that may be shown in this code block, if either or both are required.
+
+.code-block__actions {
+  display: flex;
+  align-items: center;
+}
+
+
+
+//*
+// The container for all actions related to this code block. If the code block
+// includes both helper and compiled markup, the header will contain the
+// tablist required to switch between them. If the code block is hideable,
+// the header will also include a button to hide it. Finally, if there are
+// multiple sets of code that may be shown in this code block, the header will
+// contain a `select` to switch between them.
+
+.code-block__header {
+  // box model
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: half(default(spacing)) default(spacing);
+  flex: 0 0 auto !important;
+
+  // backdrop
+  background: ui-color(gray, light);
+
+  .select,
+  .tablist {
+    transition: transform 0.2s ease
+  }
+
+  .tablist {
+    padding: 0;
+  }
+}
+
+
+
+//*
+// This component allows the code to scroll both vertically and horizontally.
+
+.code-block__code-container {
+  overflow: auto;
+  max-height: 100%;
+}
+
+
+//*
+// The thing that toggles.
+
+.code-block__toggler {
+  background-color: ui-color(gray);
+  width: 100%;
+  border: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  @include font-size(control);
+  padding: half(default(spacing)) 0;
+  color: ui-color(gray, darker);
+  transition: background-color 0.2s ease;
+
+  &:focus,
+  &:active {
+    background-color: ui-color(gray);
+    outline: none;
+  }
+
+  > .icon {
+    // @include icon--recolor(gray, darker);
+    margin-right: half(default(spacing));
+    opacity: 0.5;
+  }
+}
+
+//*
+// Container around the code and header.
+
+.code-block__content {
+  overflow: hidden;
+  transition: height 0.3s ease;
+  max-height: 15rem;
+}
+
+
+
+//*
+// The actual code for the associated demo. This is where all of the styles
+// for the syntax highlighting should go. This subcomponent wraps around the
+// code and provides the required side padding so that the code is scrollable
+// when it overflows.
+
+.code-block__code {
+  // box model
+  margin: 0;
+  display: inline-block;
+
+  // Only provide half spacing on the top (with matching half spacing on the
+  // bottom of the header).
+  padding: half(default(spacing)) default(spacing) default(spacing);
+
+  // type
+  @include font-size(code-block);
+  line-height: 1.3;
+
+  &:focus {
+    outline: none;
+  }
+
+  // Needs full padding top when there is no header.
+  .code-block:not(.code-block--with-header):not(.code-block--condensed):not(.code-block--with-demo) & {
+    padding-top: default(spacing);
+  }
+
+  .code-block--with-demo:not(.code-block--with-header) & {
+    padding-top: 0;
+  }
+
+  // Ensure very basic styles for code.
+  > code {
+    @include type--monospace-font-family;
+    padding: 0;
+    background-color: transparent;
+    font-size: inherit !important;
+    border: none;
+  }
+}
+
+
+
+// Syntax highlighting styles.
+
+.hljs-value,
+.hljs-string,
+.hljs-preprocessor {
+  color: color(blue)
+}
+
+.hljs-symbol {
+  color: color(blue-darker);
+}
+
+.hljs-at_rule,
+.hljs-attribute,
+.hljs-keyword {
+  color: color(gray-darker);
+}
+
+.hljs-comment {
+  color: rgba(color(gray-dark), 0.5);
+  font-style: italic
+}
+
+.hljs-tag,
+.hljs-variable {
+  color: color(gray-dark);
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+.code-block--with-demo {
+  .code-block__content {
+    padding-top: 0;
+
+    > .code-block__header {
+      padding-top: 0;
+    }
+  }
+}
+
+.code-block__demo {
+  padding: default(spacing);
+}
+
+.code-block__demo__content {
+  display: none;
+}
+
+.code-block__iframe {
+  height: 10em;
+  background-color: color(white);
+  border: none;
+  width: 100%;
+  margin: 0;
+  @include default(border-radius);
+}

data/source/components/code_block/code_block.erb

@@ -0,0 +1,95 @@
+<%
+  code_block.configure do |config|
+    config.defaults code: nil,
+                    language: "html",
+                    hideable?: false,
+                    full_width?: false,
+                    hidden?: false,
+                    demo?: false,
+                    demo: nil,
+                    condensed?: false,
+                    id: nil,
+                    options: []
+
+    config.classes  base: "code-block",
+                    header: "code-block__header"
+
+    config.conditional_classes if: :hidden?, base: "code-block--is-hidden"
+    config.conditional_classes if: :full_width?, base: "code-block--full-width"
+    config.conditional_classes if: :demo?, base: "code-block--with-demo"
+    config.conditional_classes if: :demo, base: "code-block--with-demo"
+    config.conditional_classes if: :condensed?, base: "code-block--condensed"
+  end
+
+  code = if code_block.code.kind_of?(Array)
+    code_block.code
+  else
+    [{ code: code_block.code, language: code_block.language }]
+  end
+
+  has_tabs = code.length > 1
+  has_demo = code_block.demo? || !code_block.demo.nil?
+  has_header = has_tabs || code_block.options.length > 1
+  hideable = code_block.hidden? || code_block.hideable? || has_tabs
+  id = code_block.id || unique_iframe_id
+%>
+
+<div class="<%= component.classes_for(:base) %><%= " code-block--with-header" if has_header %>"<% if has_demo %> data-iframe-id="<%= id %>"<% end %>>
+  <% if has_demo %>
+    <div class="code-block__demo">
+      <%= docks_resizable demo: component.demo || code.last[:code], id: id %>
+    </div>
+  <% end %>
+
+  <div class="code-block__content">
+    <% if has_header %>
+      <header class="<%= component.classes_for(:header) %>">
+
+        <div>
+          <% if has_tabs %>
+            <% docks_tablist do |tablist| %>
+              <% code.each_with_index do |code_details, index| %>
+                <%= tablist.tab(text: code_details[:label], active?: index == 0, id: "language-tab-#{index + 1}--#{id}", panel_id: "language-tab-panel-#{index + 1}--#{id}") %>
+              <% end %>
+            <% end %>
+          <% end %>
+        </div>
+
+        <div class="code-block__actions">
+          <% options = component.options %>
+          <% if options && options.length > 1 %>
+            <%= docks_select code?: true, options: options %>
+          <% end %>
+
+          <button class="docks-button docks-button--dark"><%= component.hidden? ? "Show" : "Hide" %></button>
+        </div>
+      </header>
+    <% end %>
+
+    <% if has_tabs %>
+      <div class="tablist__panel-container">
+        <% code.each_with_index do |code_details, index| %>
+          <% docks_component("tablist:panel", active?: index == 0, tab_id: "language-tab-#{index + 1}--#{id}", id: "language-tab-panel-#{index + 1}--#{id}") do %>
+            <div class="code-block__code-container">
+<pre class="code-block__code" data-code-block-language="<%= code_details[:language] %>" tabindex="-1"><code><%= CGI.escapeHTML(code_details[:code]).strip %></code></pre>
+            </div>
+          <% end %>
+        <% end %>
+      </div>
+
+    <% else %>
+      <% code_details = code.first %>
+      <div class="code-block__code-container">
+<pre class="code-block__code" data-code-block-language="<%= code_details[:language] %>" tabindex="-1"><code><%= CGI.escapeHTML(code_details[:code]).strip %></code></pre>
+      </div>
+
+    <% end %>
+  </div>
+
+  <% if hideable %>
+    <button class="code-block__toggler">
+      <%= docks_icon :code, color: :red, size: :medium %>
+      <span><%= component.hidden? ? "Show" : "Hide" %></span>
+    </button>
+  <% end %>
+</div>