Make company descriptions collapsible

app/components/CollapsibleDisplayContent/CollapsibleDisplayContent.css

@@ -0,0 +1,55 @@
+@import url('~app/styles/variables.css');
+
+.collapse {
+  position: relative;
+  overflow: hidden;
+  transition: height var(--easing-slow);
+}
+
+.base {
+  word-break: break-word;
+
+  div[data-type='todo'] > input {
+    cursor: pointer;
+    float: left;
+    position: relative;
+    top: 4px;
+    left: -4px;
+  }
+
+  ul {
+    margin-left: 15px;
+  }
+
+  ol {
+    margin-left: 15px;
+  }
+
+  figure {
+    text-align: center;
+    font-size: 13px;
+  }
+}
+
+.showMore {
+  display: flex;
+  justify-content: center;
+  height: 50px;
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+  background-image: linear-gradient(
+    rgba(0, 0, 0, 0%),
+    var(--lego-card-color),
+    var(--lego-card-color)
+  );
+  cursor: pointer;
+}
+
+.showMoreIcon {
+  padding: 3px;
+  margin: 0;
+  border-radius: 50%;
+  background-color: var(--lego-card-color);
+  box-shadow: 0 0 5px var(--lego-card-color);
+}

app/components/CollapsibleDisplayContent/index.tsx

@@ -0,0 +1,86 @@
+import Editor from '@webkom/lego-editor';
+import '@webkom/lego-editor/dist/style.css';
+import 'react-image-crop/dist/ReactCrop.css';
+import { type CSSProperties, useRef, useState } from 'react';
+import Icon from 'app/components/Icon';
+import styles from './CollapsibleDisplayContent.css';
+
+type Props = {
+  content: string;
+  id?: string;
+  className?: string;
+  style?: CSSProperties;
+  placeholder?: string;
+  collapsedHeight?: number;
+};
+
+/**
+ * Renders `content` produced by the Editor component in a collapsible read-only format.
+ */
+function CollapsibleDisplayContent({
+  content,
+  id,
+  style,
+  className,
+  placeholder,
+  collapsedHeight = 250,
+}: Props) {
+  let domParser = null;
+
+  if (!__CLIENT__) {
+    const JSDOM = require('jsdom').JSDOM;
+
+    domParser = (val) => new JSDOM(val).window.document;
+  }
+
+  const [isOpened, setIsOpened] = useState(false);
+
+  const ref = useRef<HTMLDivElement>(null);
+  const useCollapse =
+    collapsedHeight < ref.current?.clientHeight || !ref.current;
+
+  return (
+    <div
+      className={styles.collapse}
+      style={{
+        height: !useCollapse
+          ? null
+          : isOpened
+          ? ref.current?.clientHeight + 50
+          : collapsedHeight + 'px' ?? collapsedHeight,
+      }}
+    >
+      <div key={content} id={id} style={style} className={className} ref={ref}>
+        <Editor
+          onChange={() => {}}
+          onBlur={() => {}}
+          onFocus={() => {}}
+          value={content}
+          placeholder={placeholder}
+          disabled
+          domParser={domParser}
+        />
+      </div>
+      {useCollapse && (
+        <div
+          className={styles.showMore}
+          onClick={() => {
+            setIsOpened(!isOpened);
+          }}
+        >
+          <Icon
+            name={
+              isOpened
+                ? 'chevron-up-circle-outline'
+                : 'chevron-down-circle-outline'
+            }
+            className={styles.showMoreIcon}
+            size={40}
+          />
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default CollapsibleDisplayContent;

app/components/DisplayContent/index.tsx

@@ -4,16 +4,9 @@ import 'react-image-crop/dist/ReactCrop.css';
 import type { CSSProperties } from 'react';
 
 type Props = {
-  /** The content to be displayed - the text */
   content: string;
-
-  /** The id of the div wrapping the content - the id */
   id?: string;
-
-  /** The classname of the div wrapping the content - the className */
   className?: string;
-
-  /** Any style tp be added to the div wrapping the content - the style */
   style?: CSSProperties;
   placeholder?: string;
 };

app/routes/company/components/CompanyDetail.tsx

@@ -2,13 +2,13 @@ import moment from 'moment-timezone';
 import { useState } from 'react';
 import { Helmet } from 'react-helmet-async';
 import Button from 'app/components/Button';
+import CollapsibleDisplayContent from 'app/components/CollapsibleDisplayContent';
 import {
   Content,
   ContentMain,
   ContentSection,
   ContentSidebar,
 } from 'app/components/Content';
-import DisplayContent from 'app/components/DisplayContent';
 import EventListCompact from 'app/components/EventListCompact';
 import Icon from 'app/components/Icon';
 import JoblistingItem from 'app/components/JoblistingItem';
@@ -95,7 +95,7 @@ const CompanyDetail = ({
       <ContentSection>
         <ContentMain>
           <i>
-            <DisplayContent content={company.description} />
+            <CollapsibleDisplayContent content={company.description} />
           </i>
           <h3 className={styles.sectionHeader}>Kommende arrangementer</h3>
           <EventListCompact