#6 Metadata Edit View styling

hyperstudio · Jul 31, 2020 · a932813 · a932813
1 parent 61d197b
commit a932813
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 10 deletions.
diff --git a/src/components/MetadataEditView/MetadataEditView.js b/src/components/MetadataEditView/MetadataEditView.js
@@ -29,9 +29,9 @@ const MetadataEditView = ({
 		<ScrollContainer>
 			<Content>
 				{data.map(({ values, groupLabel }) => (
-					<Fieldset title={groupLabel} key={groupLabel}>
+					<Fieldset title={groupLabel} key={groupLabel} mode="edit">
 						{values.map(({ label, ValueComponent = DefaultValueComponent, value }) => (
-							<MetadataRow key={label} label={label}>
+							<MetadataRow key={label} label={label} mode="edit">
 								{Array.isArray(value)
 									? value.map(({ name, ...props }) => (
 										<ValueComponent

diff --git a/src/components/_library/Fieldset/Fieldset.js b/src/components/_library/Fieldset/Fieldset.js
@@ -1,22 +1,45 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Headline from '../Headline';
-import { Container, Legend } from './styles';
+import {
+	Container, Legend, EditLegend, EditContainer,
+} from './styles';
 
-const Fieldset = ({ title, children }) => (
+const Fieldset = ({ title, children, mode }) => (
 	<Container>
-		<Legend>
-			<Headline variant="h5">
-				{title}
-			</Headline>
-		</Legend>
-		{children}
+		{mode === 'edit'
+			? (
+				<EditContainer>
+					<EditLegend>
+						<Headline variant="h5">
+							{title}
+						</Headline>
+					</EditLegend>
+					{children}
+				</EditContainer>
+			)
+			: (
+				<>
+					<Legend>
+						<Headline variant="h5">
+							{title}
+						</Headline>
+					</Legend>
+					{children}
+				</>
+			)
+		}
 	</Container>
 );
 
 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
@@ -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;
+`;