storybookjs · fuller · Apr 15, 2017 · Apr 15, 2017 · Apr 16, 2017 · Apr 17, 2017
diff --git a/.jestrc b/.jestrc
@@ -5,6 +5,7 @@
     "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
     "\\.(css|scss)$": "<rootDir>/__mocks__/styleMock.js"
   },
+  "testPathIgnorePatterns": ["/node_modules/", "/dist/"],
   "roots": ["packages"],
   "collectCoverage": false,
   "collectCoverageFrom": [

diff --git a/packages/storybook-ui/example/index.html b/packages/storybook-ui/example/index.html
@@ -1,6 +1,7 @@
 <!doctype html>
 <html>
   <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Storybook UI Demo</title>
     <style>
       body {

diff --git a/packages/storybook-ui/package.json b/packages/storybook-ui/package.json
@@ -23,6 +23,7 @@
     "fuzzysearch": "^1.0.3",
     "json-stringify-safe": "^5.0.1",
     "keycode": "^2.1.8",
+    "lodash.isstring": "^4.0.1",
     "lodash.pick": "^4.4.0",
     "lodash.sortby": "^4.7.0",
     "mantra-core": "^1.7.0",
@@ -32,6 +33,7 @@
     "react-fuzzy": "^0.3.3",
     "react-inspector": "^1.1.2",
     "react-komposer": "^2.0.0",
+    "react-media": "^1.5.1",
     "react-modal": "^1.7.6",
     "react-split-pane": "^0.1.63",
     "redux": "^3.6.0"

diff --git a/packages/storybook-ui/src/modules/ui/components/collapsible.js b/packages/storybook-ui/src/modules/ui/components/collapsible.js
@@ -0,0 +1,108 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { baseFonts } from './theme';
+
+const wrapperStyles = {
+  display: 'block',
+  paddingTop: '10px',
+  marginBottom: '15px',
+  listStyle: 'none',
+  fontSize: '18px',
+  fontWeight: 'bold',
+  ...baseFonts,
+};
+
+const iconStyles = {
+  float: 'right',
+  fontWeight: 'normal',
+  fontSize: '150%',
+  lineHeight: '0.65',
+};
+
+class Collapsible extends React.Component {
+  constructor(props) {
+    super(props);
+    // Collapsible will be closed by default but
+    // allows props to be passed in to override initialState
+    this.state = { isActive: props.isActive || false };
+    this.handleClick = this.handleClick.bind(this);
+    this.focusToContent = this.focusToContent.bind(this);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    // Allow controlled toggling of active state
+    if (nextProps.active !== this.props.active) {
+      this.setState({
+        isActive: nextProps.active,
+      });
+    }
+  }
+
+  focusToContent() {
+    const content = this.collapsibleBody;
+    if (content) {
+      content.focus();
+    }
+  }
+
+  handleClick(e) {
+    e.preventDefault();
+    this.setState(
+      {
+        isActive: !this.state.isActive,
+      },
+      this.focusToContent,
+    );
+    // We will execute any additional onClick handlers that are passed
+    // to the component
+    const { onClick } = this.props;
+    if (onClick) {
+      onClick();
+    }
+  }
+
+  render() {
+    const { tagName = 'div', children, title, id = encodeURI(title) } = this.props;
+    const { isActive } = this.state;
+    const headingStyles = {
+      ...wrapperStyles,
+      textDecoration: isActive ? 'underline' : 'none',
+    };
+    const Element = tagName;
+
+    return (
+      <Element>
+        <a
+          href={`#${id}`}
+          onClick={this.handleClick}
+          aria-label={isActive ? `${title} - hides content` : `${title} - shows more content`}
+          style={headingStyles}
+        >
+          {title}
+          <span style={iconStyles}>
+            {isActive ? '-' : '+'}
+          </span>
+        </a>
+        {isActive &&
+          <div
+            id={id}
+            ref={c => this.collapsibleBody = c} // eslint-disable-line no-return-assign
+            tabIndex="-1"
+          >
+            {children}
+          </div>}
+      </Element>
+    );
+  }
+}
+
+Collapsible.propTypes = {
+  tagName: PropTypes.string,
+  children: PropTypes.node.isRequired,
+  title: PropTypes.string.isRequired,
+  id: PropTypes.string,
+  isActive: PropTypes.bool,
+  onClick: PropTypes.func,
+};
+
+export default Collapsible;
diff --git a/packages/storybook-ui/src/modules/ui/components/layout/commonLayoutStyles.js b/packages/storybook-ui/src/modules/ui/components/layout/commonLayoutStyles.js
@@ -0,0 +1,19 @@
+export const rootStyle = {
+  height: '100%',
+  backgroundColor: '#F7F7F7',
+};
+
+export const fullScreenPreviewStyle = {
+  position: 'fixed',
+  left: '0px',
+  right: '0px',
+  top: '0px',
+  zIndex: 1,
+  backgroundColor: '#FFF',
+  height: '100%',
+  width: '100%',
+  border: 0,
+  margin: 0,
+  padding: 0,
+  overflow: 'hidden',
+};