Add new details

user-interface/frontend/themes/datamanager/components/all.css

@@ -204,6 +204,29 @@
 .simple-paragraph {
   font-size: var(--lumo-font-size-m);
   margin-bottom: var(--lumo-space-m);
-  max-width: 40em;
+}
+
+.background-color-grey {
+  background-color: #F9F9F9;
+}
+
+.text-justify {
+  text-align: justify;
+}
+
+.padding-left-01 {
+  padding-left: 1rem
+}
+
+.padding-right-01 {
+  padding-right: 1rem
+}
+
+.line-height-01 {
+  line-height: 1.7rem;
+}
+
+.max-width-60rem {
+  max-width: 60rem;
 }
 

user-interface/src/main/java/life/qbic/datamanager/views/general/CollapsableDetails.java

@@ -0,0 +1,40 @@
+package life.qbic.datamanager.views.general;
+
+import com.vaadin.flow.component.details.Details;
+import com.vaadin.flow.component.html.Div;
+import java.util.Objects;
+
+/**
+ * <b>Collapsable Details</b>
+ *
+ * <p>Implementation of the {@link Collapsable} interface for the Vaadin component
+ * {@link Details}.</p>
+ * <p>
+ * For the Vaadin {@link Details} component, it would not be necessary to provide a wrapper object. However
+ * the interface gives a lot of flexibility to add collapsable elements wrapping other custom
+ * components while exposing a unified behaviour.
+ * <p>
+ * Also we favor a more declarative and readable object API, like {@link #collapse()} or {@link #expand() } over
+ * e.g. {@link Details#setOpened(boolean)}.
+ *
+ * @since 1.7.0
+ */
+public class CollapsableDetails extends Div implements Collapsable  {
+
+  private final Details details;
+
+  public CollapsableDetails(Details details) {
+    this.details = Objects.requireNonNull(details);
+    add(details);
+  }
+
+  @Override
+  public void collapse() {
+    this.details.setOpened(false);
+  }
+
+  @Override
+  public void expand() {
+    this.details.setOpened(true);
+  }
+}

user-interface/src/main/java/life/qbic/datamanager/views/projects/project/info/ProjectSummaryComponent.java

@@ -7,6 +7,7 @@
 import com.vaadin.flow.component.ComponentEventListener;
 import com.vaadin.flow.component.avatar.AvatarGroup;
 import com.vaadin.flow.component.button.Button;
+import com.vaadin.flow.component.details.Details;
 import com.vaadin.flow.component.html.Anchor;
 import com.vaadin.flow.component.html.Div;
 import com.vaadin.flow.component.html.Span;
@@ -36,6 +37,7 @@
 import life.qbic.datamanager.views.Context;
 import life.qbic.datamanager.views.TagFactory;
 import life.qbic.datamanager.views.account.UserAvatar.UserAvatarGroupItem;
+import life.qbic.datamanager.views.general.CollapsableDetails;
 import life.qbic.datamanager.views.general.DetailBox;
 import life.qbic.datamanager.views.general.Heading;
 import life.qbic.datamanager.views.general.IconLabel;
@@ -480,12 +482,23 @@ private void buildDesignSection(ProjectOverview projectInformation, Project proj
     projectDesignSection.setHeader(
         new SectionHeader(new SectionTitle("Project Design"), new ActionBar(editButton)));
     var content = new SectionContent();
+
+    // Set up the objective details
+    var details = new Details();
+    details.removeAll();
+    var objectiveTitle = Heading.withIconAndText(VaadinIcon.MODAL_LIST.create(), "Objective");
+    var objective = new SimpleParagraph(project.getProjectIntent().objective().objective());
+    details.setSummary(objectiveTitle);
+    details.add(objective);
+    var collapsableDetails = new CollapsableDetails(details);
+    collapsableDetails.collapse();
+    collapsableDetails.addClassNames("background-color-grey", "padding-left-01", "padding-right-01", "line-height-01", "max-width-60rem", "text-justify");
+
     content.add(
         Heading.withIconAndText(VaadinIcon.NOTEBOOK.create(), "Project ID and Title"));
     content.add(new SimpleParagraph("%s - %s".formatted(projectInformation.projectCode(),
         projectInformation.projectTitle())));
-    content.add(Heading.withIconAndText(VaadinIcon.MODAL_LIST.create(), "Objective"));
-    content.add(new SimpleParagraph(project.getProjectIntent().objective().objective()));
+    content.add(collapsableDetails);
     projectDesignSection.setContent(content);
   }