feat(unstable): <LoginPane compactY />

src/components/LargeCard/LargeCardKeyValue.jsx

@@ -5,7 +5,7 @@ import filterAttributesFromProps from '../../util/externalAttributeFilter'
 const LargeCardKeyValue = props => {
   const externalAttributes = filterAttributesFromProps(props)
 
-  const { label, value, renderValue } = props
+  const { label, value, renderValue = defaultRenderValue } = props
 
   return (
     <div {...externalAttributes} className={`summary_info ${props.className}`}>
@@ -17,15 +17,16 @@ const LargeCardKeyValue = props => {
 
 LargeCardKeyValue.defaultProps = {
   label: '',
-  value: 0,
-  renderValue: value =>
-    value.toLocaleString(navigator.language, { minimumFractionDigits: 0 })
+  value: 0
 }
 
 LargeCardKeyValue.propTypes = {
   label: PropTypes.string,
   value: PropTypes.number.isRequired,
-  renderValue: PropTypes.function
+  renderValue: PropTypes.func
 }
 
+function defaultRenderValue (value) {
+  return value.toLocaleString(navigator.language, { minimumFractionDigits: 0 })
+}
 export default LargeCardKeyValue

src/components/unstable/Layout/Layout.examples.md

@@ -1,7 +1,7 @@
 ### Empty layout:
 
 ```js
-<Layout className='hide-in-test' />
+<Layout className='hide-in-test' logo={<h1 style={{color: 'white'}}>LOGO</h1>} />
 ```
 
 ### Populated Layout:

src/components/unstable/LoginPane/LoginPane.css

@@ -20,7 +20,10 @@
   min-width: 460px;
   padding: 2em;
   text-align: center;
-  width: 25em;
+}
+
+.login__container--compact-y {
+  grid-row-gap: 0;
 }
 
 .login__logo {

src/components/unstable/LoginPane/LoginPane.examples.md

@@ -1,4 +1,19 @@
-### LoginPane examples:
+### Login Pane Basic
+
+```js
+const { BasicLoginPane } = require('./LoginPaneExamples');
+<BasicLoginPane />
+```
+
+### Login Pane CompactY
+
+```js
+const { BasicLoginPane } = require('./LoginPaneExamples');
+<BasicLoginPane compactY />
+```
+
+
+##### LoginPane full
 
 ```js
 const { Button, Input } = require('semantic-ui-react');

src/components/unstable/LoginPane/LoginPane.jsx

@@ -1,19 +1,26 @@
 import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
 import './LoginPane.css'
-import classnames from 'classnames'
+import cx from 'classnames'
 import xor from 'lodash/xor'
 
 export default class LoginPane extends PureComponent {
   render () {
-    const { children, className, ...rest } = this.props
+    const { children, className, compactY, ...rest } = this.props
+    const classNames = cx(
+      className,
+      'login__container',
+      compactY ? 'login__container--compact-y' : null
+    )
     return (
-      <form {...rest} className={classnames(className, 'login__container')}>
+      <form {...rest} className={classNames}>
         {children}
       </form>
     )
   }
 }
 LoginPane.propTypes = {
+  compactY: PropTypes.bool,
   children: function (props, propName, componentName) {
     var childrenTypes = props[propName].map(el => el.type.name)
     var allowedTypes = [
@@ -42,7 +49,7 @@ LoginPane.propTypes = {
 LoginPane.Logo = function LoginLogo (props) {
   const { className, children, ...rest } = props
   return (
-    <span {...rest} className={classnames(className, 'login__logo')}>
+    <span {...rest} className={cx(className, 'login__logo')}>
       {children}
     </span>
   )
@@ -51,7 +58,7 @@ LoginPane.Logo = function LoginLogo (props) {
 LoginPane.Username = function LoginUsername (props) {
   const { className, children, ...rest } = props
   return (
-    <span {...rest} className={classnames(className, 'login__username')}>
+    <span {...rest} className={cx(className, 'login__username')}>
       {children}
     </span>
   )
@@ -60,7 +67,7 @@ LoginPane.Username = function LoginUsername (props) {
 LoginPane.Password = function LoginPassword (props) {
   const { className, children, ...rest } = props
   return (
-    <span {...rest} className={classnames(className, 'login__password')}>
+    <span {...rest} className={cx(className, 'login__password')}>
       {children}
     </span>
   )
@@ -69,7 +76,7 @@ LoginPane.Password = function LoginPassword (props) {
 LoginPane.Submit = function LoginSubmit (props) {
   const { className, children, ...rest } = props
   return (
-    <span {...rest} className={classnames(className, 'login__submit')}>
+    <span {...rest} className={cx(className, 'login__submit')}>
       {children}
     </span>
   )
@@ -78,7 +85,7 @@ LoginPane.Submit = function LoginSubmit (props) {
 LoginPane.Footer = function LoginFooter (props) {
   const { className, children, ...rest } = props
   return (
-    <footer {...rest} className={classnames(className, 'login__footer')}>
+    <footer {...rest} className={cx(className, 'login__footer')}>
       {children}
     </footer>
   )

src/components/unstable/LoginPane/LoginPaneExamples.js

@@ -0,0 +1,35 @@
+import React from 'react'
+import { Button, Input } from 'semantic-ui-react'
+import LoginPane from './LoginPane'
+
+function Basic (props) {
+  return (
+    <LoginPane className='hide-in-test' {...props}>
+      <LoginPane.Logo>
+        <h1 style={{
+          padding: '20px',
+          background: 'darkslategray',
+          color: 'white'
+        }}>
+          LOGO
+        </h1>
+      </LoginPane.Logo>
+      <LoginPane.Username>
+        <Input />
+      </LoginPane.Username>
+      <LoginPane.Password>
+        <Input />
+      </LoginPane.Password>
+      <LoginPane.Submit>
+        <Button primary>
+          Login
+        </Button>
+      </LoginPane.Submit>
+      <LoginPane.Footer>
+        <footer>FOOTER</footer>
+      </LoginPane.Footer>
+    </LoginPane>
+  )
+}
+
+export const BasicLoginPane = props => <Basic {...props} />