@capillarytech/blaze-ui 0.1.6-alpha.48 → 0.1.6-alpha.5

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

@@ -1,6 +1,6 @@
 import React, { useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { Input } from 'antd-v5';
+import { Input } from 'antd';
 import { WarningOutlined, CheckCircleOutlined } from '@ant-design/icons';
 import styled from 'styled-components';
 import * as styledVars from '../styled/variables';

package/CapInput/Number.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { InputNumber } from 'antd-v5';
+import { InputNumber } from 'antd';
 
 const CapInputNumber = React.forwardRef((props, ref) => {
   const { size = 'large', ...rest } = props;

package/CapInput/Search.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Input } from 'antd-v5';
+import { Input } from 'antd';
 
 const { Search } = Input;
 

package/CapInput/TextArea.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Input } from 'antd-v5';
+import { Input } from 'antd';
 
 const { TextArea } = Input;
 

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

@@ -1,126 +1,106 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classnames from 'classnames';
-import styled from 'styled-components';
-import { StyledLabelDiv, StyledLabelSpan, labelStyles } from './styles';
-import withStyles from '../utils/withStyles';
-
-const getLabelTypeStyles = (type) => {
-  const types = {
-    label1: { fontSize: '12px', color: '#5e6c84', fontWeight: 'normal', lineHeight: 'normal' },
-    label2: { fontSize: '12px', color: '#091e42', fontWeight: 'normal', lineHeight: 'normal' },
-    label3: { fontSize: '12px', color: '#97a0af', fontWeight: 'normal', lineHeight: 'normal' },
-    label4: { fontSize: '12px', color: '#091e42', fontWeight: '500', lineHeight: 'normal' },
-    label5: { fontSize: '10px', color: '#091e42', fontWeight: 'normal', lineHeight: 'normal' },
-    label6: { fontSize: '12px', color: '#b3bac5', fontWeight: 'normal', lineHeight: 'normal' },
-    label7: { fontSize: '14px', color: '#5e6c84', fontWeight: '500', lineHeight: 'normal' },
-    label8: { fontSize: '12px', color: '#091e42', fontWeight: '500', lineHeight: 'normal' },
-    label9: { fontSize: '12px', color: '#091e42', lineHeight: '16px', fontWeight: 'normal' },
-    label10: { fontSize: '12px', color: '#ffffff', lineHeight: '16px', fontWeight: 'normal' },
-    label11: { fontSize: '10px', color: '#5e6c84', fontWeight: 'normal', lineHeight: 'normal' },
-    label12: { fontSize: '12px', color: '#ffffff', fontWeight: 'normal', lineHeight: 'normal' },
-    label13: { fontSize: '10px', color: '#97a0af', fontWeight: 'normal', lineHeight: 'normal' },
-    label14: { fontSize: '14px', color: '#676e7c', fontWeight: 'normal', lineHeight: 'normal' },
-    label15: { fontSize: '14px', color: '#091e42', fontWeight: 'normal', lineHeight: 'normal' },
-    label16: { fontSize: '14px', color: '#091e42', fontWeight: '500', lineHeight: 'normal' },
-    label17: { fontSize: '16px', color: '#091e42', fontWeight: '500', lineHeight: 'normal' },
-    label18: { fontSize: '14px', color: '#5e6c84', fontWeight: 'normal', lineHeight: 'normal' },
-    label19: { fontSize: '12px', lineHeight: '16px', fontWeight: 'normal', color: 'rgba(0, 0, 0, 0.87)' },
-    label20: { fontSize: '14px', color: '#2466ea', fontWeight: '500', lineHeight: 'normal' },
-    label21: { fontSize: '12px', color: '#2466ea', fontWeight: 'normal', lineHeight: 'normal' },
-    label22: { fontSize: '24px', color: '#5f6d85', lineHeight: '28px', fontWeight: 'normal' },
-    label23: { fontSize: '14px', color: '#ffffff', fontWeight: 'normal', lineHeight: 'normal' },
-    label24: { fontSize: '14px', color: '#5e6c84', fontWeight: '400', lineHeight: '20px' },
-    label25: { fontSize: '14px', color: '#5e6c84', fontWeight: '500', lineHeight: '20px' },
-    label26: { fontSize: '10px', color: '#091E42', fontWeight: '400', lineHeight: '12px' },
-    label27: { fontSize: '12px', color: '#2466EA', fontWeight: '500', lineHeight: '16px' },
-    label28: { color: '#FFF', fontSize: '12px', fontWeight: '500', lineHeight: '16px' },
-    label29: { color: '#FFF', fontSize: '10px', fontWeight: '400', lineHeight: '12px' },
-    label30: { color: '#FFF', fontSize: '10px', fontWeight: '400', lineHeight: '12px' },
-    label31: { fontSize: '12px', color: '#091E42', fontWeight: '400', lineHeight: '16px' },
-    label32: { lineHeight: '20px', fontSize: '14px', color: '#ffffff', fontWeight: '500' },
-    label33: { fontSize: '14px', color: '#2466EA', fontWeight: '500', lineHeight: '20px' },
-  };
-  
-  return types[type] || types.label1;
-};
-
-const CapLabel = ({
-  children,
-  type = 'label1',
-  className = '',
-  style = {},
-  fontWeight,
-  lineHeight,
-  ...rest
-}) => {
-  const typeStyles = getLabelTypeStyles(type);
+import { LabelWrapper, LabelInline } from './styles';
 
+const CapLabel = ({ type = 'label1', children, fontWeight, lineHeight, ...rest }) => {
   return (
-    <StyledLabelDiv
-      className={classnames('cap-label', type, className)}
-      style={style}
-      typeStyles={typeStyles}
-      fontWeight={fontWeight}
-      lineHeight={lineHeight}
-      {...rest}
-    >
+    <LabelWrapper type={type} fontWeight={fontWeight} lineHeight={lineHeight} {...rest}>
       {children}
-    </StyledLabelDiv>
+    </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,
-  type: PropTypes.string,
-  className: PropTypes.string,
-  style: PropTypes.object,
   fontWeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   lineHeight: PropTypes.string,
 };
 
-CapLabel.defaultProps = {
-  type: 'label1',
-  className: '',
-  style: {},
-};
-
-// Static method for inline label
-const CapLabelInline = styled(({ children, type = 'label1', className = '', style = {}, fontWeight, lineHeight, ...rest }) => {
-  const typeStyles = getLabelTypeStyles(type);
-  
+// Inline span version
+const CapLabelInline = ({ type = 'label1', children, fontWeight, lineHeight, ...rest }) => {
   return (
-    <StyledLabelSpan
-      className={classnames('cap-label', type, className)}
-      style={style}
-      typeStyles={typeStyles}
-      fontWeight={fontWeight}
-      lineHeight={lineHeight}
-      {...rest}
-    >
+    <LabelInline type={type} fontWeight={fontWeight} lineHeight={lineHeight} {...rest}>
       {children}
-    </StyledLabelSpan>
+    </LabelInline>
   );
-})`
-  ${labelStyles}
-`;
+};
 
 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,
-  type: PropTypes.string,
-  className: PropTypes.string,
-  style: PropTypes.object,
   fontWeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   lineHeight: PropTypes.string,
 };
 
-CapLabelInline.defaultProps = {
-  type: 'label1',
-  className: '',
-  style: {},
-};
-
-// Attach the static method
-CapLabel.CapLabelInline = CapLabelInline;
+CapLabel.Inline = CapLabelInline;
 
-export default withStyles(CapLabel, labelStyles);
+export default CapLabel;

package/CapLabel/index.js

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