[UI Framework] [K7] Require modifiers for components with multiple types

ui_framework/dist/ui_framework.css

@@ -345,9 +345,8 @@ table {
   cursor: pointer;
   height: 40px;
   text-decoration: none;
-  border: solid 1px #0079a5;
+  border: solid 1px transparent;
   border-radius: 4px;
-  color: #0079a5;
   padding: 0 12px;
   min-width: 112px;
   text-align: center;
@@ -360,8 +359,6 @@ table {
    */ }
   .kuiButton.kuiButton--small {
     height: 32px; }
-  .kuiButton .kuiButton__icon {
-    fill: #0079a5; }
   .kuiButton .kuiButton__content {
     display: -webkit-box;
     display: -webkit-flex;
@@ -384,15 +381,6 @@ table {
   .kuiButton:focus {
     -webkit-animation: kuiButtonFocus 250ms cubic-bezier(0.34, 1.61, 0.7, 1);
             animation: kuiButtonFocus 250ms cubic-bezier(0.34, 1.61, 0.7, 1); }
-  .kuiButton.kuiButton--fill {
-    background-color: #0079a5;
-    color: #FFF;
-    border-color: #0079a5; }
-    .kuiButton.kuiButton--fill:hover, .kuiButton.kuiButton--fill:focus {
-      background-color: #00668c;
-      border-color: #00668c; }
-    .kuiButton.kuiButton--fill .kuiButton__icon {
-      fill: #FFF; }
   .kuiButton.kuiButton--reverse .kuiButton__content {
     -webkit-box-orient: horizontal;
     -webkit-box-direction: reverse;
@@ -403,6 +391,23 @@ table {
       margin-left: 0;
       margin-right: 8px; }
 
+.kuiButton--primary {
+  color: #0079a5;
+  border-color: #0079a5; }
+  .kuiButton--primary .kuiButton__icon {
+    fill: #0079a5; }
+  .kuiButton--primary:hover, .kuiButton--primary:focus {
+    background-color: rgba(0, 121, 165, 0.1); }
+  .kuiButton--primary.kuiButton--fill {
+    background-color: #0079a5;
+    color: #FFF;
+    border-color: #0079a5; }
+    .kuiButton--primary.kuiButton--fill:hover, .kuiButton--primary.kuiButton--fill:focus {
+      background-color: #00668c;
+      border-color: #00668c; }
+    .kuiButton--primary.kuiButton--fill .kuiButton__icon {
+      fill: #FFF; }
+
 .kuiButton--secondary {
   color: #00A69B;
   border-color: #00A69B; }
@@ -484,9 +489,15 @@ table {
 
 .kuiCallOut {
   padding: 12px 24px;
-  border-left: 4px solid #0079a5;
-  background-color: #e6f2f6;
-  /* 1 */ }
+  border-left: 4px solid transparent; }
+
+.kuiCallOut--info {
+  border-color: #0079a5;
+  background-color: #e6f2f6; }
+  .kuiCallOut--info .kuiCallOutHeader__icon {
+    fill: #005574; }
+  .kuiCallOut--info .kuiCallOutHeader__title {
+    color: #005574; }
 
 .kuiCallOut--success {
   border-color: #00A69B;

ui_framework/doc_site/src/views/button/button.js

@@ -9,7 +9,7 @@ export default () => (
     <KuiButton
       onClick={() => window.alert('Button clicked')}
     >
-      Default
+      Primary
     </KuiButton>
 
     &nbsp;&nbsp;

ui_framework/doc_site/src/views/call_out/call_out_example.js

@@ -10,9 +10,9 @@ import {
   GuideText,
 } from '../../components';
 
-import CallOut from './call_out';
-const callOutSource = require('!!raw!./call_out');
-const callOutHtml = renderToHtml(CallOut);
+import Info from './info';
+const infoSource = require('!!raw!./info');
+const infoHtml = renderToHtml(Info);
 
 import Success from './success';
 const successSource = require('!!raw!./success');
@@ -29,21 +29,21 @@ const dangerHtml = renderToHtml(Danger);
 export default props => (
   <GuidePage title={props.route.name}>
     <GuideSection
-      title="CallOut"
+      title="Info"
       source={[{
         type: GuideSectionTypes.JS,
-        code: callOutSource,
+        code: infoSource,
       }, {
         type: GuideSectionTypes.HTML,
-        code: callOutHtml,
+        code: infoHtml,
       }]}
     >
       <GuideText>
         Use this CallOut to communicate general information to the user.
       </GuideText>
 
       <GuideDemo>
-        <CallOut />
+        <Info />
       </GuideDemo>
     </GuideSection>
 

ui_framework/src/components/button/_button.scss

@@ -5,9 +5,8 @@
   cursor: pointer;
   height: $kuiSizeXXL;
   text-decoration: none;
-  border: solid 1px $kuiColorPrimary;
+  border: solid 1px transparent;
   border-radius: $kuiBorderRadius;
-  color: $kuiColorPrimary;
   padding: 0 ($kuiSize - $kuiSizeXS);
   min-width: $kuiSize * 7;
   text-align: center;
@@ -20,10 +19,6 @@
     height: $kuiSizeXL;
   }
 
-  .kuiButton__icon {
-    fill: $kuiColorPrimary;
-  }
-
   /**
    * 1. Apply margin to all but last item in the flex.
    */
@@ -46,21 +41,6 @@
     animation: kuiButtonFocus $kuiAnimSpeedNormal $kuiAnimSlightBounce;
   }
 
-  &.kuiButton--fill {
-    background-color: $kuiColorPrimary;
-    color: #FFF;
-    border-color: $kuiColorPrimary;
-
-    &:hover, &:focus {
-      background-color: darken($kuiColorPrimary, 5%);
-      border-color: darken($kuiColorPrimary, 5%);
-    }
-
-    .kuiButton__icon {
-      fill: #FFF;
-    }
-  }
-
   &.kuiButton--reverse {
     .kuiButton__content {
       flex-direction: row-reverse;
@@ -75,6 +55,7 @@
 
 // Modifier naming and colors.
 $buttonTypes: (
+  primary: $kuiColorPrimary,
   secondary: $kuiColorSecondary,
   warning: $kuiColorWarning,
   danger: $kuiColorDanger,

ui_framework/src/components/button/button.js

@@ -1,5 +1,4 @@
 import React, {
-  Component,
   PropTypes,
 } from 'react';
 
@@ -11,9 +10,10 @@ import {
 } from '../icon';
 
 const typeToClassNameMap = {
-  danger: 'kuiButton--danger',
-  warning: 'kuiButton--warning',
+  primary: 'kuiButton--primary',
   secondary: 'kuiButton--secondary',
+  warning: 'kuiButton--warning',
+  danger: 'kuiButton--danger',
   disabled: 'kuiButton--disabled',
 };
 
@@ -26,61 +26,55 @@ const sizeToClassNameMap = {
 
 export const SIZES = Object.keys(sizeToClassNameMap);
 
-export class KuiButton extends Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    const {
-      children,
-      className,
-      iconType,
-      iconReverse,
-      type,
-      size,
-      fill,
-      ...rest,
-    } = this.props;
-
-    const classes = classNames(
-      'kuiButton',
-      typeToClassNameMap[type],
-      sizeToClassNameMap[size],
-      className,
-      {
-        'kuiButton--fill': fill,
-        'kuiButton--reverse': iconReverse,
-      },
-    );
+export const KuiButton = props => {
+  const {
+    children,
+    className,
+    iconType,
+    iconReverse,
+    type,
+    size,
+    fill,
+    ...rest,
+  } = props;
 
-    // Add an icon to the button if one exists.
-    let buttonIcon;
+  const classes = classNames(
+    'kuiButton',
+    typeToClassNameMap[type],
+    sizeToClassNameMap[size],
+    className,
+    {
+      'kuiButton--fill': fill,
+      'kuiButton--reverse': iconReverse,
+    },
+  );
 
-    if (iconType) {
-      buttonIcon = (
-        <KuiIcon
-          className="kuiButton__icon"
-          type={iconType}
-          size="medium"
-          aria-hidden="true"
-        />
-      );
-    }
+  // Add an icon to the button if one exists.
+  let buttonIcon;
 
-    return (
-      <button
-        className={classes}
-        {...rest}
-      >
-        <span className="kuiButton__content">
-          {buttonIcon}
-          <span>{children}</span>
-        </span>
-      </button>
+  if (iconType) {
+    buttonIcon = (
+      <KuiIcon
+        className="kuiButton__icon"
+        type={iconType}
+        size="medium"
+        aria-hidden="true"
+      />
     );
   }
-}
+
+  return (
+    <button
+      className={classes}
+      {...rest}
+    >
+      <span className="kuiButton__content">
+        {buttonIcon}
+        <span>{children}</span>
+      </span>
+    </button>
+  );
+};
 
 KuiButton.propTypes = {
   iconType: PropTypes.oneOf(ICON_TYPES),
@@ -92,5 +86,6 @@ KuiButton.propTypes = {
 
 KuiButton.defaultProps = {
   iconReverse: false,
+  type: 'primary',
   fill: false,
 };

ui_framework/src/components/call_out/_call_out.scss

@@ -1,11 +1,11 @@
 .kuiCallOut {
   padding: $kuiSizeM $kuiSizeL;
-  border-left: 4px solid $kuiColorPrimary;
-  background-color: tintOrShade($kuiColorPrimary, 90%, 70%); /* 1 */
+  border-left: 4px solid transparent;
 }
 
 // Modifier naming and colors.
 $callOutTypes: (
+  info: $kuiColorPrimary,
   success: $kuiColorSecondary,
   warning: $kuiColorWarning,
   danger: $kuiColorDanger,
@@ -54,6 +54,5 @@ $callOutTypes: (
   }
 
   .kuiCallOutHeader__title {
-    // font-weight: $kuiFontWeightMedium;
     color: $kuiColorPrimary;
   }

ui_framework/src/components/call_out/call_out.js

@@ -10,6 +10,7 @@ import {
 } from '../icon';
 
 const typeToClassNameMap = {
+  info: 'kuiCallOut--info',
   success: 'kuiCallOut--success',
   warning: 'kuiCallOut--warning',
   danger: 'kuiCallOut--danger',
@@ -56,3 +57,7 @@ KuiCallOut.propTypes = {
   iconType: PropTypes.oneOf(ICON_TYPES),
   type: PropTypes.oneOf(TYPES),
 };
+
+KuiCallOut.defaultProps = {
+  type: 'info',
+};