refactor(cicero-ui): remove prop dependency - I70

packages/cicero-ui/src/lib/ErrorLogger/Error.js

@@ -9,60 +9,48 @@ import * as ACT from './actions';
 import * as SC from './styles';
 
 const ErrorComponent = (props) => {
-  const { error, errorProps, errorNav } = props;
+  const { error, errorNav } = props;
   const [specErrorVisible, setspecErrorVisible] = useState(false);
 
   const handleClickSpecError = () => {
     setspecErrorVisible(!specErrorVisible);
   };
 
-  const componentProps = {
-    borderBottom: errorProps.ERROR_BORDER_BOTTOM,
-  };
-
-  const fileProps = {
-    errorFile: errorProps.ERROR_FILE,
-    errorFileHover: errorProps.ERROR_FILE_HOVER,
-  };
-
   const typeProps = {
     onClick: handleClickSpecError,
-    errorType: errorProps.ERROR_TYPE,
+    className: 'cicero-ui__error-type'
   };
 
   const shortMessageProps = {
     onClick: handleClickSpecError,
-    shortMessage: errorProps.ERROR_SHORT_MESSAGE,
-  };
-
-  const fullMessageProps = {
-    fullMessage: errorProps.ERROR_FULL_MESSAGE,
   };
 
   const errorArrowProps = {
     expanded: specErrorVisible,
     onClick: handleClickSpecError,
-    errorArrow: errorProps.ERROR_EXPAND_ARROW,
+    className: specErrorVisible
+      ? 'cicero-ui__error-arrow-expanded'
+      : 'cicero-ui__error-arrow-collapsed'
   };
 
   return (
-    <SC.ErrorComponent {...componentProps}>
+    <SC.ErrorComponent className="cicero-ui__error-component">
 
       <SC.ArrowDiv {...errorArrowProps} />
-      <SC.ErrorFile {...fileProps} onClick={() => errorNav(error)} >
+      <SC.ErrorFile onClick={() => errorNav(error)} className="cicero-ui__error-file">
         {ACT.typeSwitchCase(error || {})}
       </SC.ErrorFile>
 
       <SC.ErrorType {...typeProps} >
         {ACT.overalltypeSwitchCase(error).name || 'Unknown Error'}:
       </SC.ErrorType>
 
-      <SC.ErrorShortMessage {...shortMessageProps} >
+      <SC.ErrorShortMessage {...shortMessageProps} className="cicero-ui__error-short-message" >
         {ACT.truncateMessage(ACT.overalltypeSwitchCase(error).shortMessage || 'Unknown Error')}
       </SC.ErrorShortMessage>
 
       {specErrorVisible
-        && <SC.ErrorFullMessage {...fullMessageProps} >
+        && <SC.ErrorFullMessage className="cicero-ui__error-full-message" >
             {ACT.overalltypeSwitchCase(error).message || 'Unknown Error'}
           </SC.ErrorFullMessage>}
     </SC.ErrorComponent>
@@ -72,22 +60,6 @@ const ErrorComponent = (props) => {
 ErrorComponent.propTypes = {
   error: PropTypes.object.isRequired,
   errorNav: PropTypes.func,
-  errorProps: PropTypes.shape({
-    ERRORS_HEADER_BACKGROUND: PropTypes.string,
-    ERRORS_HEADER_BACKGROUND_HOVER: PropTypes.string,
-    ERRORS_HEADER_EXPAND_ARROW: PropTypes.string,
-    ERRORS_HEADER_BORDER_TOP: PropTypes.string,
-    ERRORS_HEADER_SHADOW: PropTypes.string,
-    ERRORS_DISPLAY_BACKGROUND: PropTypes.string,
-    ERRORS_DISPLAY_SHADOW: PropTypes.string,
-    ERROR_BORDER_BOTTOM: PropTypes.string,
-    ERROR_EXPAND_ARROW: PropTypes.string,
-    ERROR_FILE: PropTypes.string,
-    ERROR_FILE_HOVER: PropTypes.string,
-    ERROR_TYPE: PropTypes.string,
-    ERROR_FULL_MESSAGE: PropTypes.string,
-    ERROR_SHORT_MESSAGE: PropTypes.string,
-  }),
 };
 
 export default ErrorComponent;

packages/cicero-ui/src/lib/ErrorLogger/README.md

@@ -11,61 +11,35 @@ import { ErrorLogger } from '@accordproject/cicero-ui';
 
 const navigateToClauseError = // Insert your navigation function here.
 
-const errorsPropsObject = {
-    ERRORS_HEADER_BACKGROUND (string),
-    ERRORS_HEADER_BACKGROUND_HOVER (string),
-    ERRORS_HEADER_EXPAND_ARROW (string),
-    ERRORS_HEADER_BORDER_TOP (string),
-    ERRORS_HEADER_SHADOW (string),
-    ERRORS_DISPLAY_BACKGROUND (string),
-    ERRORS_DISPLAY_SHADOW (string),
-    ERRORS_DISPLAY_Z_INDEX (string),
-    ERROR_BORDER_BOTTOM (string),
-    ERROR_EXPAND_ARROW (string),
-    ERROR_FILE (string),
-    ERROR_FILE_HOVER (string),
-    ERROR_TYPE (string),
-    ERROR_FULL_MESSAGE (string),
-    ERROR_SHORT_MESSAGE (string),
-};
-
 const ErrorContainer = props => (
-    <ErrorLogger errors={props.errors} errorsProps={errorsPropsObject} errorNav={navigateToClauseError}/>
+    <ErrorLogger errors={props.errors} errorNav={navigateToClauseError}/>
 );
 ```
 
-### Props
+## Props
+
+### Expected Properties
 
-#### Expected to be Provided
+#### Values
 
 - `errors` : An `object` with unique key and error's data.
 
-#### Require Provision
+#### Functionality
 
-- `errorsProps` : An optional `object`, see below.
 - `errorNav` : An optional `function` which will navigate to the corresponding error.
 
-### Specifications
-
-This component is built to have the following dimensions:
-
-```js
-width: '100%';
-```
-
-You can style the error component, as well as the individual errors. An object may be passed down this component with the following possible CSS inputs as strings:
-- `ERRORS_HEADER_BACKGROUND`
-- `ERRORS_HEADER_BACKGROUND_HOVER`
-- `ERRORS_HEADER_EXPAND_ARROW`
-- `ERRORS_HEADER_BORDER_TOP`
-- `ERRORS_HEADER_SHADOW`
-- `ERRORS_DISPLAY_BACKGROUND`
-- `ERRORS_DISPLAY_SHADOW`
-- `ERRORS_DISPLAY_Z_INDEX`
-- `ERROR_BORDER_BOTTOM`
-- `ERROR_EXPAND_ARROW`
-- `ERROR_FILE`
-- `ERROR_FILE_HOVER`
-- `ERROR_TYPE`
-- `ERROR_FULL_MESSAGE`
-- `ERROR_SHORT_MESSAGE`
+### Custom Styling
+
+The component provides classes which can be used to apply custom styles to its individual parts.
+
+- `cicero-ui__error-wrapper`: Component wrapper
+- `cicero-ui__error-component`: Individual error component
+- `cicero-ui__error-header`: Summary of number of errors
+- `cicero-ui__error-display`: Component displaying when expanded
+- `cicero-ui__error-bar-arrow`: Arrow on the right to indicate expand / collapse display
+- `cicero-ui__error-arrow-div`: Arrow to indicate expand / collapse individual error
+- `cicero-ui__error-symbol`: Symbol indicating errors exist
+- `cicero-ui__error-file`: File in which error stems from
+- `cicero-ui__error-type`: Type of error generated
+- `cicero-ui__error-short-message`: Short summary
+- `cicero-ui__error-full-message`: Detailed summary

packages/cicero-ui/src/lib/ErrorLogger/index.js

@@ -14,7 +14,6 @@ import ErrorComponent from './Error';
 const ErrorLogger = (props) => {
   const { errors, errorNav } = props;
   const errorLength = Object.keys(errors).length ? Object.keys(errors).length : 0;
-  const errorsProps = props.errorsProps || Object.create(null);
 
   const [errorsVisible, setErrorsVisible] = useState(false);
 
@@ -23,27 +22,19 @@ const ErrorLogger = (props) => {
   };
 
   const headerProps = {
-    id: 'ErrorComponentHeader',
+    className: 'cicero-ui__error-header',
     errors: ACT.errorsExist(errors),
     onClick: handleClickErrorsBar,
-    headerBackground: errorsProps.ERRORS_HEADER_BACKGROUND,
-    headerBackgroundHover: errorsProps.ERRORS_HEADER_BACKGROUND_HOVER,
-    headerShadow: errorsProps.ERRORS_HEADER_SHADOW,
-    headerTop: errorsProps.ERRORS_HEADER_BORDER_TOP,
-    zIndexInput: errorsProps.ERRORS_DISPLAY_Z_INDEX,
   };
 
   const displayProps = {
-    id: 'ErrorComponentDisplay',
+    className: 'cicero-ui__error-display',
     errorDisplay: errorsVisible,
-    displayBackground: errorsProps.ERRORS_DISPLAY_BACKGROUND,
-    displayShadow: errorsProps.ERRORS_DISPLAY_SHADOW,
-    zIndexInput: errorsProps.ERRORS_DISPLAY_Z_INDEX,
   };
 
   const barArrowProps = {
     errorDisplay: errorsVisible,
-    headerBarArrow: errorsProps.ERRORS_HEADER_EXPAND_ARROW,
+    className: 'cicero-ui__error-bar-arrow',
   };
 
   const symbolProps = {
@@ -53,13 +44,12 @@ const ErrorLogger = (props) => {
 
   const errorComponentGenerator = errors => Object.values(errors)
     .map(errorValue => <ErrorComponent
-      errorProps={errorsProps}
       error={errorValue}
       errorNav={errorNav}
       key={ACT.keySwitchCase(errorValue)} />);
 
   return (
-    <div>
+    <div className="cicero-ui__error-wrapper">
       {errorsVisible
         && <SC.ErrorDisplay {...displayProps} >
             {errorComponentGenerator(errors)}
@@ -78,23 +68,6 @@ const ErrorLogger = (props) => {
 ErrorLogger.propTypes = {
   errors: PropTypes.object.isRequired,
   errorNav: PropTypes.func,
-  errorsProps: PropTypes.shape({
-    ERRORS_HEADER_BACKGROUND: PropTypes.string,
-    ERRORS_HEADER_BACKGROUND_HOVER: PropTypes.string,
-    ERRORS_HEADER_EXPAND_ARROW: PropTypes.string,
-    ERRORS_HEADER_BORDER_TOP: PropTypes.string,
-    ERRORS_HEADER_SHADOW: PropTypes.string,
-    ERRORS_DISPLAY_BACKGROUND: PropTypes.string,
-    ERRORS_DISPLAY_SHADOW: PropTypes.string,
-    ERRORS_DISPLAY_Z_INDEX: PropTypes.string,
-    ERROR_BORDER_BOTTOM: PropTypes.string,
-    ERROR_EXPAND_ARROW: PropTypes.string,
-    ERROR_FILE: PropTypes.string,
-    ERROR_FILE_HOVER: PropTypes.string,
-    ERROR_TYPE: PropTypes.string,
-    ERROR_FULL_MESSAGE: PropTypes.string,
-    ERROR_SHORT_MESSAGE: PropTypes.string,
-  }),
 };
 
 export default ErrorLogger;