diff --git a/src/components/MetadataEditView/MetadataEditView.js b/src/components/MetadataEditView/MetadataEditView.js index b40bdbf..eb2f9af 100644 --- a/src/components/MetadataEditView/MetadataEditView.js +++ b/src/components/MetadataEditView/MetadataEditView.js @@ -29,9 +29,9 @@ const MetadataEditView = ({ {data.map(({ values, groupLabel }) => ( -
+
{values.map(({ label, ValueComponent = DefaultValueComponent, value }) => ( - + {Array.isArray(value) ? value.map(({ name, ...props }) => ( ( +const Fieldset = ({ title, children, mode }) => ( - - - {title} - - - {children} + {mode === 'edit' + ? ( + + + + {title} + + + {children} + + ) + : ( + <> + + + {title} + + + {children} + + ) + } ); Fieldset.propTypes = { title: PropTypes.string.isRequired, children: PropTypes.node.isRequired, + mode: PropTypes.oneOf(['edit', 'display']), +}; + +Fieldset.defaultProps = { + mode: 'display', }; export default Fieldset; diff --git a/src/components/_library/Fieldset/styles.js b/src/components/_library/Fieldset/styles.js index 2244853..7af7b74 100644 --- a/src/components/_library/Fieldset/styles.js +++ b/src/components/_library/Fieldset/styles.js @@ -14,3 +14,19 @@ export const Legend = styled.legend` margin-bottom: 1rem; display: block; `; + +export const EditLegend = styled.legend` + margin-bottom: 1rem; + display: block; + background-color: white; + border: 1px solid #dee2e6; + border-radius: 5px; + padding: 0.75rem 1rem 0 1rem; +`; + +export const EditContainer = styled.fieldset` + background-color: whitesmoke; + padding: 1rem 2rem 2rem 2rem; + border: 1px solid #dee2e6; + border-radius: 5px; +`;