@capillarytech/blaze-ui 0.1.6-alpha.29 → 0.1.6-alpha.3

package/CapHeading/CapHeading.js

@@ -0,0 +1,71 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { HeadingWrapper, HeadingSpan } from './styles';
+
+const CapHeading = ({ type = 'h5', children, as, ...rest }) => {
+  return (
+    <HeadingWrapper type={type} as={as || 'div'} {...rest}>
+      {children}
+    </HeadingWrapper>
+  );
+};
+
+CapHeading.propTypes = {
+  type: PropTypes.oneOf([
+    'h0',
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+    'h7',
+    'h8',
+    'h9',
+    'h10',
+    'label1',
+    'label2',
+    'label3',
+    'label4',
+    'label5',
+    'label6',
+  ]),
+  children: PropTypes.node,
+  as: PropTypes.string,
+};
+
+// Inline span version
+const CapHeadingSpan = ({ type = 'h5', children, ...rest }) => {
+  return (
+    <HeadingSpan type={type} {...rest}>
+      {children}
+    </HeadingSpan>
+  );
+};
+
+CapHeadingSpan.propTypes = {
+  type: PropTypes.oneOf([
+    'h0',
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+    'h7',
+    'h8',
+    'h9',
+    'h10',
+    'label1',
+    'label2',
+    'label3',
+    'label4',
+    'label5',
+    'label6',
+  ]),
+  children: PropTypes.node,
+};
+
+CapHeading.Span = CapHeadingSpan;
+
+export default CapHeading;

package/CapHeading/index.js

@@ -0,0 +1 @@
+export { default } from './CapHeading';

package/CapHeading/styles.js

@@ -0,0 +1,125 @@
+import styled, { css } from 'styled-components';
+import * as styledVars from '../styled/variables';
+
+const headings = {
+  h0: {
+    fontSize: '28px',
+    fontWeight: '500',
+    color: styledVars.CAP_G01,
+    lineHeight: '36px',
+  },
+  h1: {
+    fontSize: '24px',
+    fontWeight: '500',
+    color: styledVars.CAP_G01,
+    lineHeight: '32px',
+  },
+  h2: {
+    fontSize: '20px',
+    fontWeight: '500',
+    color: styledVars.CAP_G01,
+    lineHeight: '28px',
+  },
+  h3: {
+    fontSize: '16px',
+    fontWeight: '500',
+    color: styledVars.CAP_G01,
+    lineHeight: '24px',
+  },
+  h4: {
+    fontSize: '14px',
+    fontWeight: '500',
+    color: styledVars.CAP_G01,
+    lineHeight: '20px',
+  },
+  h5: {
+    fontSize: '14px',
+    fontWeight: 'normal',
+    color: styledVars.CAP_G01,
+    lineHeight: '20px',
+  },
+  h6: {
+    color: styledVars.CAP_G04,
+    fontSize: '14px',
+    fontWeight: 'normal',
+    lineHeight: '20px',
+  },
+  h7: {
+    fontSize: '20px',
+    fontWeight: '500',
+    color: styledVars.CAP_G04,
+    lineHeight: '28px',
+  },
+  h8: {
+    fontSize: '14px',
+    fontWeight: '400',
+    color: styledVars.CAP_G01,
+    lineHeight: '20px',
+  },
+  h9: {
+    fontSize: '14px',
+    fontWeight: '500',
+    color: styledVars.CAP_WHITE,
+    lineHeight: '20px',
+  },
+  h10: {
+    fontSize: '12px',
+    fontWeight: '500',
+    color: styledVars.CAP_G01,
+    lineHeight: '16px',
+  },
+  label1: {
+    color: styledVars.CAP_G04,
+    fontSize: '12px',
+    fontWeight: 'normal',
+    lineHeight: '20px',
+  },
+  label2: {
+    color: styledVars.CAP_G01,
+    fontSize: '12px',
+    fontWeight: 'normal',
+    lineHeight: '20px',
+  },
+  label3: {
+    color: styledVars.CAP_G05,
+    fontSize: '12px',
+    fontWeight: 'normal',
+    lineHeight: '20px',
+  },
+  label4: {
+    color: styledVars.CAP_G04,
+    fontSize: '12px',
+    fontWeight: 'normal',
+    lineHeight: '16px',
+  },
+  label5: {
+    color: styledVars.CAP_G04,
+    fontSize: '16px',
+    fontWeight: 'normal',
+    lineHeight: '24px',
+  },
+  label6: {
+    color: styledVars.CAP_G01,
+    fontSize: '16px',
+    fontWeight: 'normal',
+    lineHeight: '24px',
+  },
+};
+
+const headingStyles = css`
+  font-size: ${props => headings[props.type].fontSize};
+  font-weight: ${props => headings[props.type].fontWeight};
+  color: ${props => headings[props.type].color};
+  line-height: ${props => headings[props.type].lineHeight};
+  margin: 0;
+  padding: 0;
+`;
+
+export const HeadingWrapper = styled.div`
+  ${headingStyles}
+`;
+
+export const HeadingSpan = styled.span`
+  ${headingStyles}
+  display: inline-block;
+`;

package/CapInfoNote/CapInfoNote.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Alert } from 'antd';
+import { InfoNoteWrapper } from './styles';
+import CapLabel from '../CapLabel';
+import CapRow from '../CapRow';
+
+const Note = ({ noteText }) => (
+  <CapLabel.Inline type="label4" className="note-text">
+    {noteText}
+  </CapLabel.Inline>
+);
+
+Note.propTypes = {
+  noteText: PropTypes.string,
+};
+
+const CapInfoNote = ({ message, style, noteText, type = 'info', className, ...rest }) => {
+  return (
+    <InfoNoteWrapper>
+      <Alert
+        message={(
+          <CapRow className="note-message-container">
+            <Note noteText={noteText} />:
+            <CapRow className="message-text">{message}</CapRow>
+          </CapRow>
+        )}
+        className={className}
+        type={type}
+        showIcon
+        style={{
+          marginTop: '0.857rem',
+          marginBottom: '0.857rem',
+          ...style,
+        }}
+        {...rest}
+      />
+    </InfoNoteWrapper>
+  );
+};
+
+CapInfoNote.propTypes = {
+  message: PropTypes.node,
+  style: PropTypes.object,
+  noteText: PropTypes.string,
+  type: PropTypes.string,
+  className: PropTypes.string,
+};
+
+CapInfoNote.defaultProps = {
+  type: 'info',
+};
+
+export default CapInfoNote;

package/CapInfoNote/index.js

@@ -0,0 +1 @@
+export { default } from './CapInfoNote';

package/CapInfoNote/styles.js

@@ -0,0 +1,63 @@
+import styled from 'styled-components';
+import * as styledVars from '../styled/variables';
+
+export const InfoNoteWrapper = styled.div`
+  .note-text {
+    padding-left: ${styledVars.CAP_SPACE_24};
+    white-space: nowrap;
+    line-height: inherit;
+  }
+
+  .note-message-container {
+    display: flex;
+    .message-text {
+      margin-left: 0.22rem;
+    }
+  }
+
+  .ant-alert {
+    padding: 8px 12px;
+    border-radius: ${styledVars.RADIUS_04};
+    
+    .ant-alert-icon {
+      font-size: ${styledVars.ICON_SIZE_S};
+      top: 9px;
+    }
+
+    &.ant-alert-info {
+      background-color: ${styledVars.CAP_G09};
+      border: 1px solid ${styledVars.CAP_G07};
+
+      .ant-alert-icon {
+        color: ${styledVars.CAP_G01};
+      }
+    }
+
+    &.ant-alert-success {
+      background-color: ${styledVars.CAP_COLOR_01};
+      border: 1px solid ${styledVars.CAP_PRIMARY.base};
+
+      .ant-alert-icon {
+        color: ${styledVars.CAP_PRIMARY.base};
+      }
+    }
+
+    &.ant-alert-warning {
+      background-color: ${styledVars.CAP_COLOR_02};
+      border: 1px solid ${styledVars.CAP_ORANGE};
+
+      .ant-alert-icon {
+        color: ${styledVars.CAP_ORANGE};
+      }
+    }
+
+    &.ant-alert-error {
+      background-color: ${styledVars.CAP_COLOR_05};
+      border: 1px solid ${styledVars.CAP_RED};
+
+      .ant-alert-icon {
+        color: ${styledVars.CAP_RED};
+      }
+    }
+  }
+`;

package/CapInput/CapInput.js

@@ -0,0 +1,67 @@
+import React, { useRef, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { Input } from 'antd';
+import { WarningOutlined, CheckCircleOutlined } from '@ant-design/icons';
+import styled from 'styled-components';
+import * as styledVars from '../styled/variables';
+
+const StyledIcon = styled.span`
+  color: ${(props) => props.status === "error" && styledVars.CAP_RED};
+  color: ${(props) => props.status === "success" && styledVars.CAP_PRIMARY.base};
+`;
+
+const CapInput = React.forwardRef((props, ref) => {
+  const { 
+    alwaysShowFocus, 
+    errorMessage, 
+    isVerified, 
+    suffix, 
+    showSuffix = true, 
+    ...rest 
+  } = props;
+  
+  const inputRef = useRef(null);
+  
+  useEffect(() => {
+    if (alwaysShowFocus && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [alwaysShowFocus]);
+  
+  const inputSuffix = (errorMessage && (
+    <StyledIcon status="error">
+      <WarningOutlined />
+    </StyledIcon>
+  )) || (isVerified && (
+    <StyledIcon status="success">
+      <CheckCircleOutlined />
+    </StyledIcon>
+  )) || suffix || null;
+
+  return (
+    <Input
+      {...rest}
+      ref={ref || inputRef}
+      suffix={showSuffix === false ? null : inputSuffix}
+      status={errorMessage ? 'error' : undefined}
+    />
+  );
+});
+
+CapInput.displayName = 'CapInput';
+
+CapInput.propTypes = {
+  alwaysShowFocus: PropTypes.bool,
+  errorMessage: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  isVerified: PropTypes.bool,
+  size: PropTypes.oneOf(['large', 'middle', 'small']),
+  suffix: PropTypes.node,
+  showSuffix: PropTypes.bool,
+};
+
+CapInput.defaultProps = {
+  size: 'large',
+  showSuffix: true,
+};
+
+export default CapInput; 

package/CapInput/Number.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { InputNumber } from 'antd';
+
+const CapInputNumber = React.forwardRef((props, ref) => {
+  const { size = 'large', ...rest } = props;
+
+  return (
+    <InputNumber
+      {...rest}
+      ref={ref}
+      size={size}
+    />
+  );
+});
+
+CapInputNumber.displayName = 'CapInputNumber';
+
+CapInputNumber.propTypes = {
+  size: PropTypes.oneOf(['large', 'middle', 'small']),
+  min: PropTypes.number,
+  max: PropTypes.number,
+  step: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  precision: PropTypes.number,
+  decimalSeparator: PropTypes.string,
+  formatter: PropTypes.func,
+  parser: PropTypes.func,
+  controls: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
+  keyboard: PropTypes.bool,
+  stringMode: PropTypes.bool,
+};
+
+CapInputNumber.defaultProps = {
+  size: 'large',
+  keyboard: true,
+};
+
+export default CapInputNumber; 

package/CapInput/Search.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Input } from 'antd';
+
+const { Search } = Input;
+
+const CapInputSearch = React.forwardRef((props, ref) => {
+  const { size = 'large', ...rest } = props;
+
+  return (
+    <Search
+      {...rest}
+      ref={ref}
+      size={size}
+    />
+  );
+});
+
+CapInputSearch.displayName = 'CapInputSearch';
+
+CapInputSearch.propTypes = {
+  size: PropTypes.oneOf(['large', 'middle', 'small']),
+  enterButton: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]),
+  loading: PropTypes.bool,
+  onSearch: PropTypes.func,
+};
+
+CapInputSearch.defaultProps = {
+  size: 'large',
+};
+
+export default CapInputSearch; 

package/CapInput/TextArea.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Input } from 'antd';
+
+const { TextArea } = Input;
+
+const CapInputTextArea = React.forwardRef((props, ref) => {
+  const { size = 'large', ...rest } = props;
+
+  return (
+    <TextArea
+      {...rest}
+      ref={ref}
+      size={size}
+    />
+  );
+});
+
+CapInputTextArea.displayName = 'CapInputTextArea';
+
+CapInputTextArea.propTypes = {
+  size: PropTypes.oneOf(['large', 'middle', 'small']),
+  autoSize: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.shape({
+      minRows: PropTypes.number,
+      maxRows: PropTypes.number,
+    }),
+  ]),
+  rows: PropTypes.number,
+  maxLength: PropTypes.number,
+  showCount: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.shape({
+      formatter: PropTypes.func,
+    }),
+  ]),
+};
+
+CapInputTextArea.defaultProps = {
+  size: 'large',
+  rows: 4,
+};
+
+export default CapInputTextArea; 

package/CapInput/index.js

@@ -0,0 +1,10 @@
+import CapInput from './CapInput';
+import Number from './Number';
+import Search from './Search';
+import TextArea from './TextArea';
+
+CapInput.Number = Number;
+CapInput.Search = Search;
+CapInput.TextArea = TextArea;
+
+export default CapInput;

package/CapInput/loadable.js

@@ -0,0 +1,9 @@
+/**
+ * Asynchronously loads the CapInput component
+ */
+
+import { loadable } from '@capillarytech/cap-ui-utils';
+
+const CapInputLoadable = loadable(() => import('./CapInput'));
+
+export default CapInputLoadable; 

package/CapInput/messages.js

@@ -0,0 +1,27 @@
+/*
+ * CapInput Messages
+ *
+ * This contains all the text for the CapInput component.
+ */
+import { defineMessages } from 'react-intl';
+
+const scope = 'blaze.components.CapInput';
+
+export default defineMessages({
+  placeholder: {
+    id: `${scope}.placeholder`,
+    defaultMessage: 'Enter text...',
+  },
+  searchPlaceholder: {
+    id: `${scope}.searchPlaceholder`,
+    defaultMessage: 'Search...',
+  },
+  textAreaPlaceholder: {
+    id: `${scope}.textAreaPlaceholder`,
+    defaultMessage: 'Enter your text here...',
+  },
+  numberPlaceholder: {
+    id: `${scope}.numberPlaceholder`,
+    defaultMessage: 'Enter number...',
+  },
+}); 

package/CapInput/styles.js

@@ -0,0 +1,81 @@
+import { css } from 'styled-components';
+import * as styledVars from '../styled/variables';
+
+export const inputStyles = css`
+  &.ant-input,
+  &.ant-input-affix-wrapper,
+  &.ant-input-number,
+  &.ant-input-textarea {
+    font-family: ${styledVars.FONT_FAMILY};
+    border-radius: ${styledVars.RADIUS_04};
+    transition: ${styledVars.TRANSITION_ALL};
+    
+    &:hover {
+      border-color: ${styledVars.CAP_G11};
+    }
+    
+    &:focus,
+    &.ant-input-affix-wrapper-focused {
+      border-color: ${styledVars.CAP_G01};
+      box-shadow: none;
+    }
+    
+    &.ant-input-status-error,
+    &.ant-input-affix-wrapper-status-error,
+    &.ant-input-number-status-error {
+      border-color: ${styledVars.CAP_RED};
+      
+      &:hover {
+        border-color: ${styledVars.CAP_RED};
+      }
+      
+      &:focus,
+      &.ant-input-affix-wrapper-focused {
+        border-color: ${styledVars.CAP_RED};
+        box-shadow: none;
+      }
+    }
+    
+    &.ant-input-disabled,
+    &.ant-input-affix-wrapper-disabled {
+      background-color: ${styledVars.CAP_G08};
+      cursor: not-allowed;
+    }
+  }
+  
+  /* Size variations */
+  &.ant-input-lg,
+  &.ant-input-affix-wrapper-lg {
+    font-size: 14px;
+    padding: 10px 12px;
+  }
+  
+  /* TextArea specific */
+  &.ant-input-textarea {
+    .ant-input {
+      font-family: ${styledVars.FONT_FAMILY};
+    }
+  }
+  
+  /* Number input specific */
+  &.ant-input-number {
+    width: 100%;
+    
+    .ant-input-number-handler-wrap {
+      opacity: 1;
+    }
+  }
+  
+  /* Search input specific */
+  &.ant-input-search {
+    .ant-input-search-button {
+      background-color: ${styledVars.CAP_PRIMARY.base};
+      border-color: ${styledVars.CAP_PRIMARY.base};
+      
+      &:hover {
+        background-color: ${styledVars.CAP_PRIMARY.hover};
+        border-color: ${styledVars.CAP_PRIMARY.hover};
+      }
+    }
+  }
+`;