Add expansion component

docs/_pages/components.md

@@ -127,6 +127,17 @@ categories:
           limited cross-browser support. To ensure support across all modern
           browsers, please consider using a polyfill or creating your own.
           There is no polyfill included with MDL.
+  - name: expansion
+    title: Expansion
+    description: Collapsible content sections.
+    components:
+      - name: expansion
+        class: mdl-expansion
+        snippets:
+          - snippet_group:
+            - caption: Example Expansion
+              file: expansion.html
+              full_width: true
   - name: layout
     title: Layout
     description: Building blocks for constructing a page layout.

src/expansion/README.md

@@ -0,0 +1,42 @@
+## Introduction
+
+The Material Design Lite (MDL) **expansion** component provides a clean interface
+to show collapsable content areas to users.
+
+## Basic Usage
+
+To use the expansion panel component browsers must support the [details element](https://www.w3.org/TR/2011/WD-html5-author-20110809/the-details-element.html). Currently only [IE and Edge](http://caniuse.com/#feat=details) do not provide support for this. For support there you'll need to include a polyfill for the `<details>` element. There are a few available which each have different pitfalls to test them to find the one that best suites your needs.
+
+Once you have support for detail elements all you need to do is make them with a summary and content containers. Remember that the content element comes directly after the summary element and contains all the rest of the content for the block. If your content has a form or some kind of actions for the user to carry out, include an actions container with actions in the content container.
+
+Keep in mind, the order is automatically reversed for actions.
+Material Design requires that the primary (confirmation) action be displayed last.
+So, the first action you create will appear last on the action bar.
+This allows for more natural coding and tab ordering while following the specification.
+
+Remember to add the event handlers for your action items.
+
+## CSS Classes
+
+### Blocks
+
+| MDL Class | Effect | Remarks |
+|-----------|--------|---------|
+| `mdl-expansion` | Defines the container of the expansion component. | Required on expansion container. |
+
+### Elements
+
+
+| MDL Class | Effect | Remarks |
+|-----------|--------|---------|
+| `mdl-expansion__summary` | Defines the summary container for the expansion panel. | Required on summary container. |
+| `mdl-expansion__header` | Defines the primary header for the summary. | Required on the header container within the summary. |
+| `mdl-expansion__subheader` | Defines the subheading for the summary. | Optional on a node within the header container. |
+| `mdl-expansion__secondary-header` | Defines auxiliary content for the summary. | Optional on a node within the summary container. |
+| `mdl-expansion__content` | Defines the container node for the content that is toggled. | Required on container node after the summary. |
+| `mdl-expansion__actions` | Defines the container node for the actions for any forms within the content. | Optional on container within the content |
+| `mdl-expansion__action` | Defines an action trigger to provide the appropriate margin. | Optional on trigger within the actions. |
+
+### Modifiers
+
+There are no modifiers for the expansion panel.

src/expansion/_expansion.scss

@@ -0,0 +1,109 @@
+/**
+ * Copyright 2016 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@import "../variables";
+@import "../mixins";
+
+.mdl-expansion {
+  border-bottom: 1px solid rgba(0, 0, 0, .12);
+  box-sizing: border-box;
+
+  &__summary {
+    @include typo-preferred-font;
+    padding-left: 24px;
+    padding-right: 24px;
+    height: 48px;
+    display: flex;
+    outline: none;
+
+    &::-webkit-details-marker {
+      display: none;
+    }
+
+    &::after {
+      @include typo-icon;
+      content: '\e313';
+      display: inline-flex;
+      flex-direction: column;
+      user-select: none;
+      justify-content: center;
+      transition: transform 200ms, color 200ms;
+      margin-left: auto;
+      color: rgba(0, 0, 0, .38);
+    }
+
+    &:focus {
+      background-color: unquote("rgba(#{$palette-grey-200}, 1)");
+      &::after {
+        color: rgba(0, 0, 0, .54);
+      }
+    }
+  }
+
+  &__header {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    font-size: 0.9375rem;
+    font-weight: 500;
+    flex-basis: 30%;
+    margin-right: 16px;
+  }
+
+  &__subheader {
+    font-size: .75rem;
+    color: rgba(0, 0, 0, .54);
+  }
+
+  &__secondary-header {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    font-size: 0.9375rem;
+    font-weight: 500;
+    flex-basis: 30%;
+    color: rgba(0, 0, 0, .87);
+    margin-right: 16px;
+  }
+
+  &__content {
+    @include typo-preferred-font;
+    padding-left: 24px;
+    padding-right: 24px;
+    padding-top: 16px;
+    padding-bottom: 16px;
+    &+.mdl-expansion__actions {
+      border-top: 1px solid rgba(0, 0, 0, .12);
+    }
+  }
+
+  &__actions {
+    display: flex;
+    flex-direction: row-reverse;
+    padding-top: 16px;
+    padding-bottom: 16px;
+  }
+
+  &__action {
+    margin-right: 8px;
+  }
+
+  &[open] {
+    .mdl-expansion__summary::after {
+      transform: rotate(180deg);
+    }
+  }
+}

src/expansion/snippets/expansion.html

@@ -0,0 +1,49 @@
+<details class="mdl-expansion">
+  <summary class="mdl-expansion__summary">
+    <span class="mdl-expansion__header">Trip name</span>
+    <span class="mdl-expansion__secondary-header">Caribbean Cruise</span>
+  </summary>
+</details>
+<details class="mdl-expansion">
+  <summary class="mdl-expansion__summary">
+    <span class="mdl-expansion__header">Location</span>
+    <span class="mdl-expansion__secondary-header">Barbados</span>
+  </summary>
+
+  <div class="mdl-expansion__content">
+    <select>
+      <option>One</option>
+      <option>two</option>
+    </select>
+  </div>
+  <div class="mdl-expansion__actions">
+    <button class="mdl-expansion__action mdl-button mdl-js-button mdl-button--raised mdl-button--colored">Save</button>
+    <button class="mdl-expansion__action mdl-button mdl-js-button mdl-button--raised">Cancel</button>
+  </div>
+</details>
+<details class="mdl-expansion">
+  <summary class="mdl-expansion__summary">
+    <span class="mdl-expansion__header">Start and end dates</span>
+    <span class="mdl-expansion__secondary-header">Start date: Feb 29, 2016</span>
+    <span class="mdl-expansion__secondary-header">End date: Not set</span>
+  </summary>
+</details>
+<details class="mdl-expansion">
+  <summary class="mdl-expansion__summary">
+    <span class="mdl-expansion__header">Carrier</span>
+    <span class="mdl-expansion__secondary-header">The best cruise line</span>
+  </summary>
+</details>
+<details class="mdl-expansion">
+  <summary class="mdl-expansion__summary">
+    <span class="mdl-expansion__header">
+      Meal preferences
+      <span class="mdl-expansion__subheader">
+        Optional
+      </span>
+    </span>
+    <span class="mdl-expansion__secondary-header">
+      Vegetarian
+    </span>
+  </summary>
+</details>

src/material-design-lite.scss

@@ -35,6 +35,7 @@
 @import "chip/chip";
 @import "data-table/data-table";
 @import "dialog/dialog";
+@import "expansion/expansion";
 @import "footer/mega_footer";
 @import "footer/mini_footer";
 @import "icon-toggle/icon-toggle";