@capillarytech/blaze-ui 0.1.6-alpha.4 → 0.1.6-alpha.40

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/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/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';

package/CapLabel/styles.js

@@ -1,221 +0,0 @@
-import styled, { css } from 'styled-components';
-import * as styledVars from '../styled/variables';
-
-const labels = {
-  label1: {
-    color: styledVars.CAP_G04,
-    fontSize: '12px',
-    fontWeight: 'normal',
-    lineHeight: 'normal',
-  },
-  label2: {
-    color: styledVars.CAP_G01,
-    fontSize: '12px',
-    fontWeight: 'normal',
-    lineHeight: 'normal',
-  },
-  label3: {
-    color: styledVars.CAP_G05,
-    fontSize: '12px',
-    fontWeight: 'normal',
-    lineHeight: 'normal',
-  },
-  label4: {
-    color: styledVars.CAP_G01,
-    fontSize: '12px',
-    fontWeight: '500',
-    lineHeight: 'normal',
-  },
-  label5: {
-    color: styledVars.CAP_G01,
-    fontSize: '10px',
-    fontWeight: 'normal',
-    lineHeight: 'normal',
-  },
-  label6: {
-    color: styledVars.CAP_G06,
-    fontSize: '12px',
-    fontWeight: 'normal',
-    lineHeight: 'normal',
-  },
-  label7: {
-    color: styledVars.CAP_G04,
-    fontSize: '14px',
-    fontWeight: '500',
-    lineHeight: 'normal',
-  },
-  label8: {
-    color: styledVars.CAP_G01,
-    fontSize: '12px',
-    fontWeight: '500',
-    lineHeight: 'normal',
-  },
-  label9: {
-    color: styledVars.CAP_G01,
-    fontSize: '12px',
-    fontWeight: 'normal',
-    lineHeight: '16px',
-  },
-  label10: {
-    color: styledVars.CAP_WHITE,
-    fontSize: '12px',
-    fontWeight: 'normal',
-    lineHeight: '16px',
-  },
-  label11: {
-    color: styledVars.CAP_G04,
-    fontSize: '10px',
-    fontWeight: 'normal',
-    lineHeight: 'normal',
-  },
-  label12: {
-    color: styledVars.CAP_WHITE,
-    fontSize: '12px',
-    fontWeight: 'normal',
-    lineHeight: 'normal',
-  },
-  label13: {
-    color: styledVars.CAP_G05,
-    fontSize: '10px',
-    fontWeight: 'normal',
-    lineHeight: 'normal',
-  },
-  label14: {
-    color: styledVars.CAP_G03,
-    fontSize: '14px',
-    fontWeight: 'normal',
-    lineHeight: 'normal',
-  },
-  label15: {
-    color: styledVars.CAP_G01,
-    fontSize: '14px',
-    fontWeight: 'normal',
-    lineHeight: 'normal',
-  },
-  label16: {
-    color: styledVars.CAP_G01,
-    fontSize: '14px',
-    fontWeight: '500',
-    lineHeight: 'normal',
-  },
-  label17: {
-    color: styledVars.CAP_G01,
-    fontSize: '16px',
-    fontWeight: '500',
-    lineHeight: 'normal',
-  },
-  label18: {
-    color: styledVars.CAP_G04,
-    fontSize: '14px',
-    fontWeight: 'normal',
-    lineHeight: 'normal',
-  },
-  label19: {
-    color: 'rgba(0, 0, 0, 0.87)',
-    fontSize: '12px',
-    fontWeight: 'normal',
-    lineHeight: '16px',
-  },
-  label20: {
-    color: styledVars.CAP_SECONDARY.base,
-    fontSize: '14px',
-    fontWeight: '500',
-    lineHeight: 'normal',
-  },
-  label21: {
-    color: styledVars.CAP_SECONDARY.base,
-    fontSize: '12px',
-    fontWeight: 'normal',
-    lineHeight: 'normal',
-  },
-  label22: {
-    color: styledVars.CAP_G04,
-    fontSize: '24px',
-    fontWeight: 'normal',
-    lineHeight: '28px',
-  },
-  label23: {
-    color: styledVars.CAP_WHITE,
-    fontSize: '14px',
-    fontWeight: 'normal',
-    lineHeight: 'normal',
-  },
-  label24: {
-    fontSize: '14px',
-    fontWeight: '400',
-    color: styledVars.CAP_G04,
-    lineHeight: '20px',
-  },
-  label25: {
-    fontSize: '14px',
-    fontWeight: '500',
-    color: styledVars.CAP_G04,
-    lineHeight: '20px',
-  },
-  label26: {
-    fontSize: '10px',
-    fontWeight: '400',
-    color: styledVars.CAP_G01,
-    lineHeight: '12px',
-  },
-  label27: {
-    fontSize: '12px',
-    fontWeight: '500',
-    color: styledVars.CAP_SECONDARY.base,
-    lineHeight: '16px',
-  },
-  label28: {
-    fontSize: '12px',
-    fontWeight: '500',
-    color: styledVars.CAP_WHITE,
-    lineHeight: '16px',
-  },
-  label29: {
-    fontSize: '10px',
-    fontWeight: '400',
-    color: styledVars.CAP_WHITE,
-    lineHeight: '12px',
-  },
-  label30: {
-    fontSize: '10px',
-    fontWeight: '400',
-    color: styledVars.CAP_WHITE,
-    lineHeight: '12px',
-  },
-  label31: {
-    color: styledVars.CAP_G01,
-    fontSize: '12px',
-    fontWeight: '400',
-    lineHeight: '16px',
-  },
-  label32: {
-    color: styledVars.CAP_WHITE,
-    fontSize: '14px',
-    fontWeight: '500',
-    lineHeight: '20px',
-  },
-  label33: {
-    color: styledVars.CAP_SECONDARY.base,
-    fontSize: '14px',
-    fontWeight: '500',
-    lineHeight: '20px',
-  },
-};
-
-const labelStyles = css`
-  font-size: ${props => labels[props.type].fontSize};
-  font-weight: ${props => props.fontWeight || labels[props.type].fontWeight};
-  color: ${props => labels[props.type].color};
-  line-height: ${props => props.lineHeight || labels[props.type].lineHeight || 'initial'};
-  margin: 0;
-  padding: 0;
-`;
-
-export const LabelWrapper = styled.div`
-  ${labelStyles}
-`;
-
-export const LabelInline = styled.span`
-  ${labelStyles}
-  display: inline-block;
-`;

package/CapRow/CapRow.js

@@ -1,22 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Row } from 'antd';
-import classNames from 'classnames';
-import { RowWrapper } from './styles';
-
-const CapRow = ({ className, children, ...rest }) => {
-  return (
-    <RowWrapper>
-      <Row {...rest} className={classNames('cap-row', className)}>
-        {React.Children.toArray(children)}
-      </Row>
-    </RowWrapper>
-  );
-};
-
-CapRow.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-};
-
-export default CapRow;

package/CapRow/index.js

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

package/CapRow/styles.js

@@ -1,9 +0,0 @@
-import styled from 'styled-components';
-
-export const RowWrapper = styled.div`
-  .cap-row {
-    display: flex;
-    flex-flow: row wrap;
-    min-width: 0;
-  }
-`;

package/CapTooltip/CapTooltip.js

@@ -1,36 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Tooltip } from 'antd';
-import classNames from 'classnames';
-import { TooltipWrapper } from './styles';
-
-const CapTooltip = ({ overlayClassName, children, ...rest }) => {
-  return (
-    <TooltipWrapper>
-      <Tooltip
-        overlayClassName={classNames('cap-tooltip', overlayClassName)}
-        {...rest}
-      >
-        {children}
-      </Tooltip>
-    </TooltipWrapper>
-  );
-};
-
-/*
-  NOTE:
-    While using a disabled button with tooltip, wrap the button with an element with className "button-disabled-tooltip-wrapper".
-
-    <CapTooltip title="disabled button with tooltip">
-      <span className="button-disabled-tooltip-wrapper">
-        <CapButton disabled>Button</CapButton>
-      </span>
-    </CapTooltip>
-*/
-
-CapTooltip.propTypes = {
-  overlayClassName: PropTypes.string,
-  children: PropTypes.node,
-};
-
-export default CapTooltip;

package/CapTooltip/index.js

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

package/CapTooltip/styles.js

@@ -1,42 +0,0 @@
-import styled from 'styled-components';
-import * as styledVars from '../styled/variables';
-
-export const TooltipWrapper = styled.span`
-  .cap-tooltip {
-    max-width: 324px;
-
-    .ant-tooltip-inner {
-      background-color: ${styledVars.FONT_COLOR_01};
-      font-size: ${styledVars.FONT_SIZE_M};
-      font-weight: ${styledVars.FONT_WEIGHT_MEDIUM};
-      padding: 6px 8px;
-      min-height: 32px;
-      border-radius: ${styledVars.RADIUS_04};
-    }
-
-    &.cap-bgcolor-tooltip {
-      .ant-tooltip-inner {
-        background-color: ${styledVars.FONT_COLOR_05};
-      }
-    }
-
-    &.hide-tooltip-pointer {
-      .ant-tooltip-arrow {
-        display: none;
-      }
-    }
-  }
-
-  .button-disabled-tooltip-wrapper {
-    display: inline-flex;
-    cursor: not-allowed;
-
-    .cap-button.ant-btn[disabled] {
-      pointer-events: none;
-      & > * {
-        pointer-events: auto;
-        cursor: not-allowed;
-      }
-    }
-  }
-`;

package/CapUnifiedSelect/loadable.js

@@ -1,3 +0,0 @@
-import loadable from '@loadable/component';
-
-export default loadable(() => import('./CapUnifiedSelect'));