Feature/description

src/components/ExpandableDescription/index.tsx

@@ -0,0 +1,37 @@
+import { Typography } from "antd";
+import { ArrowDownOutlined, ArrowUpOutlined } from "@ant-design/icons";
+import "./style.css";
+
+const { Paragraph } = Typography;
+
+interface ExpandableTextProps {
+    text: string;
+}
+
+const expandSymbol = (
+    <span>
+        expand <ArrowDownOutlined />
+    </span>
+);
+
+const collapseSymbol = (
+    <span>
+        collapse <ArrowUpOutlined />
+    </span>
+);
+
+export const ExpandableText = ({ text }: ExpandableTextProps) => {
+    return (
+        <Paragraph
+            ellipsis={{
+                rows: 2,
+                expandable: "collapsible",
+                symbol: (expanded) =>
+                    expanded ? collapseSymbol : expandSymbol,
+            }}
+        >
+            {text}
+        </Paragraph>
+    );
+};
+export default ExpandableText;

src/components/ExpandableDescription/style.css

@@ -0,0 +1,8 @@
+.ant-typography-expand span, .ant-typography-collapse span {
+  font-size: 12px;
+  color: #2656AB;
+}
+
+.ant-typography-expand:hover, .ant-typography-collapse:hover {
+  text-decoration: underline;
+}

src/components/PackingInput/index.tsx

@@ -13,6 +13,7 @@ import {
 import Dropdown from "../Dropdown";
 import JSONViewer from "../JSONViewer";
 import RecipeForm from "../RecipeForm";
+import { ExpandableText } from "../ExpandableDescription";
 import "./style.css";
 
 interface PackingInputProps {
@@ -70,14 +71,19 @@ const PackingInput = (props: PackingInputProps): JSX.Element => {
             {!recipeObj ? (
                 loadingText
             ) : (
-                <Tabs defaultActiveKey="1" className="recipe-content">
-                    <Tabs.TabPane tab="Editable fields" key="1">
-                        <RecipeForm onStartPacking={handleStartPacking} />
-                    </Tabs.TabPane>
-                    <Tabs.TabPane tab="Full Recipe" key="2">
-                        <JSONViewer title="Recipe" content={recipeObj} />
-                    </Tabs.TabPane>
-                </Tabs>
+                <>
+                    {recipeObj.description && (
+                        <ExpandableText text={recipeObj.description} />
+                    )}
+                    <Tabs defaultActiveKey="1" className="recipe-content">
+                        <Tabs.TabPane tab="Editable fields" key="1">
+                            <RecipeForm onStartPacking={handleStartPacking} />
+                        </Tabs.TabPane>
+                        <Tabs.TabPane tab="Full Recipe" key="2">
+                            <JSONViewer title="Recipe" content={recipeObj} />
+                        </Tabs.TabPane>
+                    </Tabs>
+                </>
             )}
         </>
     );