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

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/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/CapLabel/CapLabel.js

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

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

package/CapLabel/styles.js

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

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

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

package/CapRow/styles.js

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