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

package/CapHeading/styles.js

@@ -1,125 +0,0 @@
-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

@@ -1,54 +0,0 @@
-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

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

package/CapInfoNote/styles.js

@@ -1,63 +0,0 @@
-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

@@ -1,67 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

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

package/CapInput/messages.js

@@ -1,27 +0,0 @@
-/*
- * 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

@@ -1,81 +0,0 @@
-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};
-      }
-    }
-  }
-`; 

package/CapLabel/CapLabel.js

@@ -1,106 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { LabelWrapper, LabelInline } from './styles';
-
-const CapLabel = ({ type = 'label1', children, fontWeight, lineHeight, ...rest }) => {
-  return (
-    <LabelWrapper type={type} fontWeight={fontWeight} lineHeight={lineHeight} {...rest}>
-      {children}
-    </LabelWrapper>
-  );
-};
-
-CapLabel.propTypes = {
-  type: PropTypes.oneOf([
-    'label1',
-    'label2',
-    'label3',
-    'label4',
-    'label5',
-    'label6',
-    'label7',
-    'label8',
-    'label9',
-    'label10',
-    'label11',
-    'label12',
-    'label13',
-    'label14',
-    'label15',
-    'label16',
-    'label17',
-    'label18',
-    'label19',
-    'label20',
-    'label21',
-    'label22',
-    'label23',
-    'label24',
-    'label25',
-    'label26',
-    'label27',
-    'label28',
-    'label29',
-    'label30',
-    'label31',
-    'label32',
-    'label33',
-  ]),
-  children: PropTypes.node,
-  fontWeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  lineHeight: PropTypes.string,
-};
-
-// Inline span version
-const CapLabelInline = ({ type = 'label1', children, fontWeight, lineHeight, ...rest }) => {
-  return (
-    <LabelInline type={type} fontWeight={fontWeight} lineHeight={lineHeight} {...rest}>
-      {children}
-    </LabelInline>
-  );
-};
-
-CapLabelInline.propTypes = {
-  type: PropTypes.oneOf([
-    'label1',
-    'label2',
-    'label3',
-    'label4',
-    'label5',
-    'label6',
-    'label7',
-    'label8',
-    'label9',
-    'label10',
-    'label11',
-    'label12',
-    'label13',
-    'label14',
-    'label15',
-    'label16',
-    'label17',
-    'label18',
-    'label19',
-    'label20',
-    'label21',
-    'label22',
-    'label23',
-    'label24',
-    'label25',
-    'label26',
-    'label27',
-    'label28',
-    'label29',
-    'label30',
-    'label31',
-    'label32',
-    'label33',
-  ]),
-  children: PropTypes.node,
-  fontWeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  lineHeight: PropTypes.string,
-};
-
-CapLabel.Inline = CapLabelInline;
-
-export default CapLabel;

package/CapLabel/index.js

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