Commits

Benjamin Wong committed 1a280f4 Merge

Merged in zephor/aui-archive/expander (pull request #262)

New Component: AUI Expander

Comments (0)

Files changed (8)

auiplugin-tests/src/main/resources/atlassian-plugin.xml

         <resource type="download" name="experimental-progress-tracker.soy.js" location="test-pages/experimental/progress-tracker/index.soy" />
         <resource type="download" name="experimental-avatar.soy.js" location="test-pages/experimental/avatar/index.soy" />
         <resource type="download" name="experimental-spinner.soy.js" location="test-pages/experimental/spinner/index.soy" />
-
+        <resource type="download" name="expander.soy.js" location="test-pages/experimental/expander/index.soy" />
         <resource type="download" name="mobile-index.soy.js" location="test-pages/mobile/index.soy" />
     </web-resource>
 
         <dependency>com.atlassian.auiplugin:aui-experimental-spinner</dependency>
         <dependency>com.atlassian.auiplugin:aui-experimental-toolbar2</dependency>
         <dependency>com.atlassian.auiplugin:aui-experimental-tooltips</dependency>
+        <dependency>com.atlassian.auiplugin:aui-experimental-expander</dependency>
         <!-- Test page extras -->
         <resource type="download" name="common.css" location="test-pages/common.css" />
         <resource type="download" name="common.js" location="test-pages/common.js" />

auiplugin-tests/src/main/resources/test-pages/experimental/expander/expander-test.html

+<!DOCTYPE html>
+<html lang="en-au">
+<head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=EDGE" />
+    <title>AUI - Expander(experimental)</title>
+    <meta name="decorator" content="atl.blank" />
+    <style>
+        .aui-page-panel-content {
+            width: 100%;
+        }
+        .aui-expander-trigger:hover {
+/*            background: #ccc;*/
+            cursor: pointer;
+        }
+
+        #test-trigger-no-short:hover {
+            background: #ccc;
+        }
+
+        #test-trigger-no-short-height-div {
+            height: 20px;
+        }
+        #show-more-trigger8 {
+            top: 0;
+            right: 0;
+            position: absolute;
+        }
+
+        #show-more-content3 {
+            position: relative;
+            width: 300px;
+        }
+
+        #read-more-content {
+            width: 500px;
+        }
+
+        .read-more-trigger-container {
+            position: absolute;
+            display: inline-block;
+            bottom: 0;
+            background: #fff;
+            right: 0;
+            padding-left: 5px;
+        }
+
+        #read-more-content{
+            position:relative;
+        }
+
+        .read-more-trigger-container.show-less {
+            position: static;
+            display: inline-block;
+            float: right;
+        }
+
+        .read-more-trigger-container.show-less .ellipsis {
+            display: none;
+        }
+
+        .aui-avatar{
+            float: left;
+            margin: 0 10px;
+        }
+
+        .actions-bar,
+        .actions-bar a,
+        .aui-theme-default .actions-bar a {
+            color: #999;
+            font-size: 12px;  
+        }
+
+        #activity-stream-trigger {
+            display: block;
+            border: 1px solid #f5f5f5;
+            text-align: center;
+        }
+
+        #activity-stream-trigger:hover {
+            border: 1px solid #333333;
+        }
+
+        .activity-stream {
+            border-bottom: 1px solid #ccc;
+            padding: 15px 0;
+        }
+    </style>
+</head>
+<body class="aui-layout aui-theme-default">
+<div id="page">
+    <header id="header" role="banner">
+        <nav class="aui-header aui-dropdown2-trigger-group" role="navigation" id="test1">
+            <div class="aui-header-primary">
+                <h1 id="logo" class="aui-header-logo aui-header-logo-aui">
+                    <a href="/ajs/plugins/servlet/ajstest/test-pages/">
+                        <span class="aui-header-logo-device">AUI</span>
+                    </a>
+                </h1>
+                <ul class="aui-nav">
+                    <li>
+                        <a href="infrastructure/infrastructure-test.html" aria-owns="core-components-menu" aria-haspopup="true" class="aui-dropdown2-trigger">Core</a>
+                        <div id="core-components-menu" class="aui-dropdown2 aui-style-default">
+                            <div class="aui-dropdown2-section">
+                                <strong>Components</strong>
+                                <ul>
+                                    <li><a href="dialog/dialog-test.html">Dialog</a></li>
+                                    <li><a href="dropdown/dropdown-test.html">Dropdown</a></li>
+                                    <li><a href="dropdown2/dropdown2-test.html">Dropdown 2</a></li>
+                                    <li><a href="forms/default.html">Forms</a></li>
+                                    <li><a href="icons/icons-test.html">Icons</a></li>
+                                    <li><a href="inline-dialog/inline-dialog-test.html">Inline-Dialog</a></li>
+                                    <li><a href="messages/messages-test.html">Messages</a></li>
+                                    <li><a href="tables/tables-test.html">Tables</a></li>
+                                    <li><a href="tabs/tabs-test.html">Tabs</a></li>
+                                    <li><a href="toolbar/toolbar-test.html">Toolbar</a></li>
+                                </ul>
+                            </div>
+                            <div class="aui-dropdown2-section">
+                                <strong>Tests</strong>
+                                <ul>
+                                    <li><a href="infrastructure/infrastructure-test.html">Infrastructure</a></li>
+                                    <li><a href="integration/integration-test.html">Integration</a></li>
+                                </ul>
+                            </div>
+                            <div class="aui-dropdown2-section">
+                                <strong>Other</strong>
+                                <ul>
+                                    <li><a href="keyboardshortcuts/keyboardshortcuts-test.html">Keyboard Shortcuts</a></li>
+                                    <li><a href="miscellaneous/miscellaneous-test.html">Miscellaneous (including helper functions)</a></li>
+                                </ul>
+                            </div>
+                        </div>
+                    </li>
+                    <li>
+                        <a href="experimental/buttons/aui-buttons-test.html" aria-owns="experimental-components-menu" aria-haspopup="true" class="aui-dropdown2-trigger">Experimental</a>
+                        <div id="experimental-components-menu" class="aui-dropdown2 aui-style-default">
+                            <div class="aui-dropdown2-section">
+                                <strong>Structural</strong>
+                                <ul>
+                                    <li><a href="experimental/page-layout/aui-layout-simple.html">AUI Page - simple</a></li>
+                                    <li><a href="experimental/page-layout/aui-layout-tabs.html">AUI Page - with tabs</a></li>
+                                    <li><a href="experimental/page-layout/aui-layout-test-content.html">AUI Page - with test content</a></li>
+                                    <li><a href="experimental/page-layout/aui-layout-groups.html">Group + Item layout</a></li>
+                                    <li><a href="experimental/page-layout/aui-header.html">AUI Header (the blue one at the top)</a></li>
+                                    <li><a href="experimental/page-layout/aui-pageheader.html">AUI Page Header (the one in the page)</a></li>
+                                    <li><a href="experimental/page-layout/aui-navigation.html">AUI Navigation - vertical and horizontal</a></li>
+                                    <!--<li><a href="experimental/page-layout/aui-module.html">AUI Module</a></li>-->
+                                </ul>
+                            </div>
+                            <div class="aui-dropdown2-section">
+                                <strong>Components</strong>
+                                <ul>
+                                    <li><a href="experimental/date-picker/date-picker-test.html">Date Picker</a></li>
+                                    <li><a href="experimental/buttons/aui-buttons-test.html">AUI Buttons</a></li>
+                                </ul>
+                            </div>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+        </nav>
+    </header><!-- #header -->
+    <section id="content" role="main">
+        <header class="aui-page-header">
+            <div class="aui-page-header-inner">
+                <div class="aui-page-header-main">
+                    <h1>AUI Expander</h1>
+                </div>
+            </div>
+        </header>
+        <div class="aui-page-panel">
+            <div class="aui-page-panel-inner">
+                <div class="aui-page-panel-content">
+
+                    <div id="expander-parent-trigger-test">
+                        <h2>Toggle Expander (trigger as parent)</h2>
+                        <div class="aui-expander-trigger" aria-controls="example-expand-content-toggle">
+                            <div class="aui-expander-short-content">Hello, I'm, awe...</div>
+                            <div class="aui-expander-content" id="example-expand-content-toggle">
+                                Hello, I'm awesome content.
+
+                                <p> There's lots of content in this div
+                            </div>
+                        </div>
+                    </div><!-- .aui-test -->
+
+
+                    <div id="expander-parent-trigger-test">
+                        <h2>Toggle Expander without short-content</h2>
+                        <div class="aui-expander-trigger" aria-controls="example-expand-content-no-short" id="test-trigger-no-short">
+                            <div id="test-trigger-no-short-height-div"></div>
+                            <div class="aui-expander-content" id="example-expand-content-no-short">
+                                Hello, I'm awesome content.
+
+                                <p> There's lots of content in this div
+                            </div>
+                        </div>
+                    </div><!-- .aui-test -->
+
+                     <div id="expander-normal-trigger-test">
+                        <h2>Normal Expander</h2>
+                        <div class="aui-expander aui-expander-trigger" aria-controls="example-normal-expand-content" id="example-normal-trigger">
+                                <span class="aui-icon aui-icon-small aui-iconfont-success" id="example2-icon">Success</span> Show More
+                        </div>
+                        <div class="aui-expander-content" id="example-normal-expand-content">
+                                Hello, I'm awesome content.
+                                <p> There's lots of content in this div
+                        </div>
+                    </div><!-- .aui-test -->
+
+                    <div id="expander-normal-with-pixel-height">
+                        <h2>Normal Expander with trigger at the bottom and data-aui-expander-height</h2>
+                        <div class="aui-expander-content" id="example-pixel-height-content" data-aui-expander-height="10px">
+                                Hello, I'm awesome content.
+                                <p> There's lots of content in this div
+                        </div>
+                        <button class="aui-expander-trigger aui-button aui-button-link" aria-controls="example-pixel-height-content" id="example-pixel-height-trigger">
+                                Show more
+                        </button>
+                    </div><!-- .aui-test -->
+
+                    <div id="expander-normal-with-one-line-height">
+                        <h2>Normal Expander with height oneline option</h2>
+                         <a class="aui-expander-trigger aui-button aui-button-link" aria-controls="example-one-line-height-content" id="example-one-line-height-trigger">
+                                Show more
+                        </a>
+                        <div class="aui-expander-content" id="example-one-line-height-content" data-aui-expander-height=1>
+                            <p/>
+                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dignissim dictum rhoncus. Maecenas eget mi ut justo tempor mattis. Mauris varius, mauris non venenatis iaculis, nibh lorem ullamcorper metus, ut vulputate massa tortor quis neque. Aliquam eget purus libero. Donec quis mauris quis mauris laoreet ullamcorper. Fusce purus sem, tempus lobortis faucibus in, adipiscing at purus. Praesent in pellentesque ligula. Nullam tristique elementum massa id bibendum. Maecenas facilisis ultricies eleifend. Morbi sem dui, placerat nec volutpat et, blandit non purus. Sed ullamcorper purus non arcu vestibulum eget ultricies enim faucibus.
+
+                            <p/>
+                                Cras id commodo odio. Fusce et sollicitudin lacus. Morbi ornare dapibus neque, vel blandit dui molestie eget. Fusce placerat nunc a ipsum rutrum ac feugiat mauris cursus. Etiam metus magna, pellentesque ac porttitor aliquet, iaculis id diam. Suspendisse sem dui, eleifend nec lacinia eu, adipiscing non est. Nunc ac sem a nulla iaculis rutrum. Praesent dictum nunc id magna imperdiet sed varius augue hendrerit. Nam eu tortor sit amet orci luctus tristique quis id turpis.
+                        </div>
+
+                    </div><!-- .aui-test -->
+
+                    <div id="expander-normal-with-multi-line-height">
+                        <h2>Normal Expander with height oneline option</h2>
+                         <a class="aui-expander-trigger aui-button aui-button-link" aria-controls="example-multi-line-height-content" id="example-one-multi-height-trigger">
+                                Show more
+                        </a>
+                        <div class="aui-expander-content" id="example-multi-line-height-content" data-aui-expander-height=3>
+                            <p/>
+                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dignissim dictum rhoncus. Maecenas eget mi ut justo tempor mattis. Mauris varius, mauris non venenatis iaculis, nibh lorem ullamcorper metus, ut vulputate massa tortor quis neque. Aliquam eget purus libero. Donec quis mauris quis mauris laoreet ullamcorper. Fusce purus sem, tempus lobortis faucibus in, adipiscing at purus. Praesent in pellentesque ligula. Nullam tristique elementum massa id bibendum. Maecenas facilisis ultricies eleifend. Morbi sem dui, placerat nec volutpat et, blandit non purus. Sed ullamcorper purus non arcu vestibulum eget ultricies enim faucibus.
+
+                            <p/>
+                                Cras id commodo odio. Fusce et sollicitudin lacus. Morbi ornare dapibus neque, vel blandit dui molestie eget. Fusce placerat nunc a ipsum rutrum ac feugiat mauris cursus. Etiam metus magna, pellentesque ac porttitor aliquet, iaculis id diam. Suspendisse sem dui, eleifend nec lacinia eu, adipiscing non est. Nunc ac sem a nulla iaculis rutrum. Praesent dictum nunc id magna imperdiet sed varius augue hendrerit. Nam eu tortor sit amet orci luctus tristique quis id turpis.
+                        </div>
+
+                    </div><!-- .aui-test -->
+
+                    <div id="expander-normal-with-multi-line-height">
+                        <h2>Normal Expander with Reveal Text</h2>
+                        <div class="aui-expander-content" id="example-reveal-text-content" data-aui-expander-height=3>
+                         
+                            <p>
+                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dignissim dictum rhoncus. Maecenas eget mi ut justo tempor mattis. Mauris varius, mauris non venenatis iaculis, nibh lorem ullamcorper metus, ut vulputate massa tortor quis neque. Aliquam eget purus libero. Donec quis mauris quis mauris laoreet ullamcorper. Fusce purus sem, tempus lobortis faucibus in, adipiscing at purus. Praesent in pellentesque ligula. Nullam tristique elementum massa id bibendum. Maecenas facilisis ultricies eleifend. Morbi sem dui, placerat nec volutpat et, blandit non purus. Sed ullamcorper purus non arcu vestibulum eget ultricies enim faucibus.
+                            </p>
+
+                            <p>
+                                Cras id commodo odio. Fusce et sollicitudin lacus. Morbi ornare dapibus neque, vel blandit dui molestie eget. Fusce placerat nunc a ipsum rutrum ac feugiat mauris cursus. Etiam metus magna, pellentesque ac porttitor aliquet, iaculis id diam. Suspendisse sem dui, eleifend nec lacinia eu, adipiscing non est. Nunc ac sem a nulla iaculis rutrum. Praesent dictum nunc id magna imperdiet sed varius augue hendrerit. Nam eu tortor sit amet orci luctus tristique quis id turpis.
+                            </p>
+                            <a class="aui-expander-trigger aui-button aui-button-link aui-expander-reveal-text" aria-controls="example-reveal-text-content" id="example-reveal-text-trigger">
+                                Show more
+                            </a>
+                        </div>
+
+                    </div><!-- .aui-test -->
+
+                     <div id="expander-reveal-text">
+                        <h2>ADG Reveal Text Pattern</h2>
+                        <div class="aui-expander-content" id="read-more-content" data-aui-expander-height=3>
+                            <p>
+                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dignissim dictum rhoncus. Maecenas eget mi ut justo tempor mattis. Mauris varius, mauris non venenatis iaculis, nibh lorem ullamcorper metus, ut vulputate massa tortor quis neque. Aliquam eget purus libero. Donec quis mauris quis mauris laoreet ullamcorper. Fusce purus sem, tempus lobortis faucibus in, adipiscing at purus. Praesent in pellentesque ligula. Nullam tristique elementum massa id bibendum. Maecenas facilisis ultricies eleifend. Morbi sem dui, placerat nec volutpat et, blandit non purus. Sed ullamcorper purus non arcu vestibulum eget ultricies enim faucibus.
+                            </p>
+                            <p>
+                                Cras id commodo odio. Fusce et sollicitudin lacus. Morbi ornare dapibus neque, vel blandit dui molestie eget. Fusce placerat nunc a ipsum rutrum ac feugiat mauris cursus. Etiam metus magna, pellentesque ac porttitor aliquet, iaculis id diam. Suspendisse sem dui, eleifend nec lacinia eu, adipiscing non est. Nunc ac sem a nulla iaculis rutrum. Praesent dictum nunc id magna imperdiet sed varius augue hendrerit. Nam eu tortor sit amet orci luctus tristique quis id turpis.
+                            </p>
+                            <a class="aui-expander-trigger aui-button aui-button-link aui-expander-reveal-text" aria-controls="read-more-content" id="read-more-trigger">Show more</a>
+                        </div>
+                    </div><!-- .aui-test -->
+
+                     <div id="expander-reveal-text-by-line">
+                        <h2>ADG Reveal Text Pattern with by-line</h2>
+                        <span> July Product Announcement </span>                         
+                        <a class="aui-expander-trigger aui-button aui-button-link" aria-controls="read-more-byline-content" id="read-more-byline-trigger">Show more</a>
+                        <div class="aui-expander-content" id="read-more-byline-content" data-aui-expander-height=0>
+                            <p/>
+                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dignissim dictum rhoncus. Maecenas eget mi ut justo tempor mattis. Mauris varius, mauris non venenatis iaculis, nibh lorem ullamcorper metus, ut vulputate massa tortor quis neque. Aliquam eget purus libero. Donec quis mauris quis mauris laoreet ullamcorper. Fusce purus sem, tempus lobortis faucibus in, adipiscing at purus. Praesent in pellentesque ligula. Nullam tristique elementum massa id bibendum. Maecenas facilisis ultricies eleifend. Morbi sem dui, placerat nec volutpat et, blandit non purus. Sed ullamcorper purus non arcu vestibulum eget ultricies enim faucibus.
+
+                            <p/>
+                                Cras id commodo odio. Fusce et sollicitudin lacus. Morbi ornare dapibus neque, vel blandit dui molestie eget. Fusce placerat nunc a ipsum rutrum ac feugiat mauris cursus. Etiam metus magna, pellentesque ac porttitor aliquet, iaculis id diam. Suspendisse sem dui, eleifend nec lacinia eu, adipiscing non est. Nunc ac sem a nulla iaculis rutrum. Praesent dictum nunc id magna imperdiet sed varius augue hendrerit. Nam eu tortor sit amet orci luctus tristique quis id turpis.
+                        </div>
+                    </div><!-- .aui-test -->
+
+                    <div id="expander-activity-streams">
+                        <h2>ADG Activity Streams</h2>
+                        <div class="aui-expander-content" id="activity-stream-content" >
+                            <div class="activity-stream">
+                                <div class="aui-avatar aui-avatar-small">
+                                    <div class="aui-avatar-inner">
+                                         <img src=""></img>
+                                    </div>
+                                </div>
+                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a id="clickable-label" class="aui-label" href="https://ecosystem.atlassian.net/browse/AUI-1337"</span> AUI-1337 - Every frontender at Atlassian is elite!</a> magna imperdiet sed varius augue hendrerit. Nam eu tortor sit amet orci luctus tristique quis id turpis
+                                <div class="actions-bar">
+                                    <a href="#">Reply </a> <a href="#"> Like <a> 10 hours ago
+                                </div>
+                            </div> 
+                        </div>
+                        <div class="aui-expander-trigger" aria-controls="activity-stream-content" id="activity-stream-trigger" data-collapsible="false">Show more</div>
+
+                    </div><!-- .aui-test -->
+                </div>
+            </div>
+        </div>
+    </section><!-- #content -->
+</div><!-- #page -->
+<script type="text/javascript" src="/ajs/plugins/servlet/ajstest/test-pages/common.js"></script>
+<script type="text/javascript">
+    AJS.$(function(){
+        AJS.$("#activity-stream-trigger").on("aui-expander-expanded", function(event){
+            var $trigger = AJS.$(event.currentTarget),
+                $content = AJS.$(document).find("#" + $trigger.attr("aria-controls"));
+            AJS.$("#activity-stream-content").children().first().clone().appendTo($content);
+        });
+
+        AJS.$("#read-more-byline-trigger").on("aui-expander-expanded", function(event){
+            var $trigger = AJS.$(event.currentTarget);
+            $trigger.text("Show less");
+        });
+
+        AJS.$("#read-more-byline-trigger").on("aui-expander-collapsed", function(event){
+            var $trigger = AJS.$(event.currentTarget);
+            $trigger.text("Show more");
+        });
+
+        AJS.$("#read-more-trigger").on("aui-expander-expanded", function(event){
+            var $trigger = AJS.$(event.currentTarget),
+                $container = $trigger.parent();
+            $trigger.text("Show less");
+            $container.addClass("show-less");
+        });
+
+        AJS.$("#read-more-trigger").on("aui-expander-collapsed", function(event){
+            var $trigger = AJS.$(event.currentTarget),
+                $container = $trigger.parent();
+            $trigger.text("Show more");
+            $container.removeClass("show-less");
+        });
+
+        AJS.$("#example2-trigger").on("aui-expander-expanded", function(event){
+            $trigger = AJS.$(event.currentTarget);
+            $icon = AJS.$("#example2-icon");
+            $icon.removeClass("aui-iconfont-success");
+            $icon.addClass("aui-iconfont-close-dialog");
+        });
+
+        AJS.$("#example2-trigger").on("aui-expander-collapsed", function(event){
+            $trigger = AJS.$(event.currentTarget);
+            $icon = AJS.$("#example2-icon");
+            $icon.addClass("aui-iconfont-success");
+            $icon.removeClass("aui-iconfont-close-dialog");
+        });
+
+
+        AJS.$("#show-more-trigger").on("aui-expander-expanded", function(event){
+            $trigger = AJS.$(event.currentTarget);
+            $trigger.text("Show less");    
+        });
+
+        AJS.$("#show-more-trigger").on("aui-expander-collapsed", function(event){
+            $trigger = AJS.$(event.currentTarget);
+            $trigger.text("Show more");    
+        });
+    });
+</script>
+</body>
+</html>

auiplugin-tests/src/main/resources/test-pages/experimental/expander/index.soy

+{namespace testPages.experimental.expander}
+
+/**
+ * Index page
+**/
+{template .index}
+    {call testPages.layout}
+        {param windowTitle: 'Expander Test Page' /}
+        {param content}
+            <header class="aui-page-header">
+                <div class="aui-page-header-main">
+                    <h1>AUI Labels</h1>
+                </div>
+            </header>
+            <div class="aui-page-panel"><div class="aui-page-panel-inner"><div class="aui-page-panel-content">
+
+            <h2>AUI Expander</h2>
+            <p>AUI provides an expander component</p>
+            <p role="application" id="expander">
+
+                <h3> Normal Expander </h3>
+                {call aui.expander.trigger}
+                    {param id: 'normal-expander-trigger'/}
+                    {param contentId: 'normal-expander-content'/}
+                    {param tag: 'a'/}
+                    {param content: 'Read More'/}
+                {/call}
+
+                {call aui.expander.content}
+                    {param id: 'normal-expander-content'/}
+                    {param content: 'This should be in content'/}
+                {/call}
+
+
+                <h3> Normal Expander with replace text </h3>
+                {call aui.expander.trigger}
+                    {param id: 'replace-text-trigger'/}
+                    {param contentId: 'expander-with-replace-text-content'/}
+                    {param tag: 'a'/}
+                    {param content: 'Read More'/}
+                    {param replaceText: 'Read Less'/}
+                {/call}
+
+                {call aui.expander.content}
+                    {param id: 'expander-with-replace-text-content'/}
+                    {param content: 'This should be in content'/}
+                {/call}
+
+                <h3> Initially Expanded Expander </h3>
+                {call aui.expander.trigger}
+                    {param id: 'initially-expanded-expander-trigger'/}
+                    {param contentId: 'initially-expanded-expander-content'/}
+                    {param tag: 'a'/}
+                    {param content: 'Read More'/}
+                {/call}
+
+                {call aui.expander.content}
+                    {param id: 'initially-expanded-expander-content'/}
+                    {param content: 'This should be in content you see initially'/}
+                    {param initiallyExpanded: 'true'/}
+                {/call}
+
+                <h3> Toggle Expander </h3>
+                {call aui.expander.trigger}  
+                    {param id: 'toggle-expander-trigger'/}
+                    {param contentId: 'toggle-expander-content'/}
+                    {param tag: 'div'/}
+                    {param content}
+                        <span> Read More </span>
+                        {call aui.expander.content}
+                            {param id: 'toggle-expander-content'/}
+                            {param content: 'This should be in content inside the trigger'/}
+                        {/call}
+                    {/param}
+                {/call}
+                {literal}
+                <style type="text/css">
+                    #toggle-expander-trigger:hover{
+                        background: #ccc;
+                    }
+                </style>
+                {/literal}
+
+                <h3> Expander that isn't collapsible </h3>
+                {call aui.expander.trigger}
+                    {param id: 'continuous-expander-trigger'/}
+                    {param contentId: 'continuous-expander-content'/}
+                    {param tag: 'div'/}
+                    {param content: 'Read More'/}
+                    {param collapsible: 'false'/}
+                {/call}
+
+                {call aui.expander.content}
+                    {param id: 'continuous-expander-content'/}
+                    {param content: 'This should be in content'/}
+                {/call}
+
+                <h3> Expander with min-height on content </h3>
+                {call aui.expander.trigger}
+                    {param id: 'min-height-expander-trigger'/}
+                    {param contentId: 'min-height-expander-content'/}
+                    {param tag: 'button'/}
+                    {param content: 'Read all the things'/}
+                    {param extraClasses: 'aui-button aui-button-subtle'/}
+                    {param replaceText: 'Hide most of the things'/}
+                {/call}
+
+                {call aui.expander.content}
+                    {param id: 'min-height-expander-content'/}
+                    {param content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur lobortis felis eget pharetra. Vestibulum placerat, mi vitae ultricies dignissim, mi est blandit ligula, at cursus turpis neque non risus. Ut mollis placerat diam, in semper felis varius non. Sed molestie vulputate dictum. Vestibulum sagittis sollicitudin odio, auctor iaculis dui ornare et. Donec porttitor odio vulputate nunc faucibus ut porta nisi hendrerit. Morbi bibendum gravida libero vel commodo. Sed sit amet velit diam, quis condimentum mi. In mollis tortor a neque blandit egestas. Sed eget velit dolor, vel molestie lorem. Aliquam convallis convallis tempus. Maecenas mattis molestie rutrum.'/}
+                {/call}
+                {literal}
+                <style type="text/css">
+                    #min-height-expander-content{
+                        min-height: 30px;
+                    }
+                </style>
+                {/literal}
+                <h3> ADG Reveal Text Pattern </h3>
+
+                {call aui.expander.revealText}
+                    {param triggerId: 'reveal-text-trigger'/}
+                    {param contentId: 'reveal-text-content'/}
+                    {param contentContent} '
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur lobortis felis eget pharetra. Vestibulum placerat, mi vitae ultricies dignissim, mi est blandit ligula, at cursus turpis neque non risus. Ut mollis placerat diam, in semper felis varius non. Sed molestie vulputate dictum. Vestibulum sagittis sollicitudin odio, auctor iaculis dui ornare et. Donec porttitor odio vulputate nunc faucibus ut porta nisi hendrerit. Morbi bibendum gravida libero vel commodo. Sed sit amet velit diam, quis condimentum mi. In mollis tortor a neque blandit egestas. Sed eget velit dolor, vel molestie lorem. Aliquam convallis convallis tempus. Maecenas mattis molestie rutrum.'
+                    {/param}     
+                {/call}
+                {literal}
+                <style type="text/css">
+                    #reveal-text-content{
+                        min-height: 2.85em;
+                    }
+                </style>
+                {/literal}
+            </p>
+        {/param}
+    {/call}
+{/template}

auiplugin-tests/src/main/resources/test-pages/index.soy

                                         <li><a href="experimental/toolbar2/toolbar2-test.html">Toolbar2</a></li>
                                         <li><a href="experimental/tooltips/tooltips-test.html">Tooltips</a></li>
                                         <li><a href="experimental/spinner/">Spinner</a></li>
-
+                                        <li><a href="experimental/expander/">Expander</a></li>
                                     </ol>
                                     <h4>Page Suite</h4>
                                     <ol>

auiplugin/src/main/resources/atlassian-plugin.xml

         <resource type="download" name="toolbar.soy.js"   location="soy/atlassian/toolbar.soy"/>
         <resource type="download" name="toolbar2.soy.js"  location="soy/atlassian/toolbar2.soy"/>
         <resource type="download" name="progress-tracker.soy.js" location="soy/atlassian/progress-tracker.soy"/>
+        <resource type="download" name="expander.soy.js" location="soy/atlassian/expander.soy"/>
         <resource type="download" name="avatar.soy.js"    location="soy/atlassian/avatar.soy"/>
 
         <resource type="download" name="atlassian-legacy1.soy.js" location="soy-legacy1/atlassian.soy"/>
         <resource type="download" name="tabs.soy.js"      location="soy/atlassian/tabs.soy"/>
         <resource type="download" name="toolbar.soy.js"   location="soy/atlassian/toolbar.soy"/>
         <resource type="download" name="toolbar2.soy.js"  location="soy/atlassian/toolbar2.soy"/>
+        <resource type="download" name="expander.soy.js" location="soy/atlassian/expander.soy"/>
         <resource type="download" name="progress-tracker.soy.js" location="soy/atlassian/progress-tracker.soy"/>
         <resource type="download" name="avatar.soy.js"    location="soy/atlassian/avatar.soy"/>
 
         <resource type="download" name="experimental-example.js" location="experimental/js/atlassian/experimental-example.js" />
     </web-resource>
 
+    <web-resource key="aui-experimental-expander" name="AUI Experimental Expander">
+        <dependency>com.atlassian.auiplugin:aui-core</dependency>
+        <resource type="download" name="experimental-expander.css" location="experimental/css/atlassian/aui-expander.css" />
+        <resource type="download" name="experimental-expander.js" location="experimental/js/atlassian/aui-expander.js" />
+    </web-resource>
+
     <web-resource key="aui-experimental-restfultable" name="AUI Experimental Restful Table ">
 
          <transformation extension="js">

auiplugin/src/main/resources/experimental/css/atlassian/aui-expander.css

+.aui-expander-short-content[aria-hidden="true"],
+.aui-expander-content[aria-hidden="true"],
+.aui-expander-content[aria-expanded="true"] .aui-expander-ellipsis /* reveal-text pattern */ {
+    display: none;
+}
+
+.aui-expander-content {
+    height: 0;  /* Collapsed by default */
+    overflow: hidden;
+    position: relative;
+}
+
+.aui-expander-content[aria-expanded="true"] {
+    height: auto;   /* Expanded by default */
+}
+
+.aui-expander-trigger {
+    cursor: pointer;
+}
+
+/*ADG REVEAL TEXT PATTERN*/
+a.aui-expander-trigger.aui-expander-reveal-text {
+    background: #fff;
+    bottom: 0;
+/*    box-shadow: -10px 0 5px #fff;*/
+    position: absolute;
+    right: 0;
+    text-decoration: none;
+    padding-left: 10px;
+}
+
+.aui-expander-trigger.aui-expander-reveal-text:hover > span {
+    text-decoration: underline;
+}
+
+.aui-expander-trigger.aui-expander-reveal-text:before {
+    color: #333;
+    content: "\2026\00a0";
+}
+
+.aui-expander-content[aria-expanded="true"] .aui-expander-trigger.aui-expander-reveal-text:before {
+    display: none;  /* Hide the ellipsis when expanded */
+}
+
+.aui-expander-content[aria-expanded="true"] .aui-expander-trigger.aui-expander-reveal-text {
+    position: relative;    
+}

auiplugin/src/main/resources/experimental/js/atlassian/aui-expander.js

+(function ($) {
+    var $document = $(document),
+
+        //convenience function because this needs to be run for all the events.
+        getExpanderProperties = function(event){
+            var properties = {};
+
+            properties.$trigger = $(event.currentTarget);
+            properties.$content = $document.find("#" + properties.$trigger.attr("aria-controls"));
+            properties.triggerIsParent = properties.$content.parent().filter(properties.$trigger).length != 0;
+            properties.$shortContent = properties.triggerIsParent ? properties.$trigger.find(".aui-expander-short-content") : null;
+            properties.height = properties.$content.css("min-height");
+            properties.isCollapsible = properties.$trigger.data("collapsible") != false;
+            properties.replaceText = properties.$trigger.attr("data-replace-text"); //can't use .data here because it doesn't update after the first call
+            properties.replaceSelector = properties.$trigger.data("replace-selector");
+
+            return properties;
+        },
+        replaceText = function(properties){
+             if(properties.replaceText){
+                var $replaceElement = properties.replaceSelector ? 
+                                        properties.$trigger.find(properties.replaceSelector) :
+                                        properties.$trigger;
+                
+                properties.$trigger.attr("data-replace-text", $replaceElement.text());
+                $replaceElement.text(properties.replaceText);
+            }    
+        }
+        //events that the expander listens to
+        EXPANDER_EVENTS = {
+            "aui-expander-invoke": function(event){
+                var $trigger = $(event.currentTarget);
+                var $content = $document.find("#" + $trigger.attr("aria-controls"));
+                var isCollapsible = $trigger.data("collapsible") != false;
+
+                //determine if content should be expanded or collapsed
+                if($content.attr("aria-expanded")=="true" && isCollapsible){
+                    $trigger.trigger("aui-expander-collapse");
+                } else {
+                    $trigger.trigger("aui-expander-expand");
+                }
+            },
+            "aui-expander-expand": function(event){
+                var properties = getExpanderProperties(event);
+
+                properties.$content.attr("aria-expanded", "true");
+                if(properties.height!="0px"){
+                    properties.$content.css("height", "auto");
+                } else {
+                    properties.$content.attr("aria-hidden", "false");                       
+                }   
+                
+                //handle replace text
+                replaceText(properties);
+
+                //if the trigger is the parent also hide the short-content (default)
+                if(properties.triggerIsParent){
+                    properties.$shortContent.hide();
+                }
+                properties.$trigger.trigger("aui-expander-expanded");
+
+            },
+            "aui-expander-collapse": function(event){
+
+                var properties = getExpanderProperties(event),
+                    isHeightPx,
+                    lineHeight = parseInt(properties.$content.css("line-height"), 10),
+                    heightCap = properties.$content.children().first().height();
+
+                //handle the height option
+                if(properties.height != "0px"){
+                    properties.$content.css("height", 0);
+                } else {
+                    properties.$content.attr("aria-hidden", "true");                        
+                }
+                 //handle replace text
+                replaceText(properties);
+
+                //collapse the expander
+                properties.$content.attr("aria-expanded", "false");
+                //if the trigger is the parent also hide the short-content (default)
+                if(properties.triggerIsParent){
+                    properties.$shortContent.show();
+                }
+                properties.$trigger.trigger("aui-expander-collapsed");
+            },
+
+            "click.aui-expander": function(event){
+                $target = $(event.currentTarget);
+                $target.trigger("aui-expander-invoke", event.currentTarget);    
+            }
+        }
+    //delegate events to the triggers on the page
+    $document.on(EXPANDER_EVENTS, ".aui-expander-trigger");
+
+})(jQuery);

auiplugin/src/main/resources/soy/atlassian/expander.soy

+{namespace aui.expander}
+
+/**
+ * Creates an AUI Expander Content area
+ * @param id the id of the content element to be generated
+ * @param? extraClasses extra classes that go on the content.
+ * @param? extraAttributes extra attributes that go on the content.
+ * @param? initiallyExpanded boolean, whether or not the expander is expanded by default
+ * @param? content
+ **/
+{template .content}
+        <div 
+            {if $id}{sp}id="{$id}"{/if} 
+            {sp}class="aui-expander-content
+            {call aui.renderExtraClasses data="all" /}"
+            {call aui.renderExtraAttributes data="all" /}
+            {if $initiallyExpanded} aria-expanded="{$initiallyExpanded}"{/if}
+        >
+            {if $content}{$content|noAutoescape}{/if}
+        </div>   
+{/template}
+
+/**
+ * template for creating an expander trigger
+ * @param id the id to put on the trigger
+ * @param tag the html tag of the trigger
+ * @param contentId the content that this trigger controls
+ * @param? replaceText Text that will be replace the initial trigger text when it is invoked.
+ * @param? replaceSelector Text that will be replace the initial trigger text when it is invoked.
+ * @param? extraClasses Standard option.
+ * @param? extraAttributes Standard option.
+ * @param? content the contents of the trigger
+ * @param? collapsible whether or not the trigger will collapse the expander after it is expanded.
+ **/
+{template .trigger}
+    <{$tag ? $tag : 'div'}
+        {if $id}{sp}id="{$id}"{/if}
+        {if $replaceText}{sp}data-replace-text="{$replaceText}"{/if}
+        {if $replaceSelector}{sp}data-replace-selector="{$replaceSelector}"{/if}
+        {sp}class="aui-expander-trigger
+        {call aui.renderExtraClasses data="all" /}
+        "
+        {call aui.renderExtraAttributes data="all" /}
+        {sp}aria-controls="{$contentId}"
+        {if $collapsible} data-collapsible="{$collapsible}"{/if}
+    >   
+        {if $content}{$content|noAutoescape}{/if}   
+    </{$tag ? $tag : 'div'}>
+{/template}
+
+/**
+ * template for creating teh reveal text pattern
+ * @param triggerId the id to put on the trigger
+ * @param contentId the content that this trigger controls
+ * @param contentContent the content of the contents, can be html
+ * @param contentExtraClasses Standard option.
+ * @param contentExtraAttributes Standard option.
+ * @param? triggerExtraClasses Standard option.
+ * @param? triggerExtraAttributes Standard option.
+ **/
+{template .revealText}
+     {call .content}
+        {param id: $contentId/}
+        {param content} 
+            {$contentContent}
+            {call .trigger}
+                    {param id: $triggerId/}
+                    {param contentId: $contentId/}
+                    {param tag: 'a'/}
+                    {param content}
+                        <span class='reveal-text-trigger-text'>Show more</span>
+                    {/param}
+                    {param replaceSelector: '.reveal-text-trigger-text' /}
+                    {param replaceText: 'Show less'/}
+                    {param extraAttributes: $triggerExtraAttributes/}
+                    {param extraClasses}
+                        {if $triggerExtraClasses}{$triggerExtraClasses} {sp}{/if} aui-expander-reveal-text
+                    {/param}          
+            {/call}
+        {/param}
+        {param extraAttributes: $contentExtraAttributes/}
+        {param extraClasses: $contentExtraClasses/}
+    {/call}
+{/template}