feat(console): add details summary component in guides

packages/console/package.json

@@ -60,6 +60,7 @@
     "process": "^0.11.10",
     "prop-types": "^15.8.1",
     "react": "^17.0.2",
+    "react-animate-height": "^3.0.4",
     "react-dnd": "^16.0.0",
     "react-dnd-html5-backend": "^16.0.0",
     "react-dom": "^17.0.2",

packages/console/src/assets/images/triangle-right.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.512 7.60958C10.7622 7.80974 10.7622 8.19028 10.512 8.39045L6.81235 11.3501C6.48496 11.612 6 11.3789 6 10.9597L6 5.04031C6 4.62106 6.48497 4.38797 6.81235 4.64988L10.512 7.60958Z" fill="currentColor"/>
+</svg>

packages/console/src/mdx-components/DetailsSummary/index.module.scss

@@ -0,0 +1,47 @@
+@use '@/scss/underscore' as _;
+
+.container {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--color-layer-light);
+  border-radius: 8px;
+
+  .summary {
+    display: flex;
+    align-items: center;
+    padding: _.unit(4);
+    color: var(--color-caption);
+    font: var(--font-subhead-2);
+    user-select: none;
+    cursor: pointer;
+
+    .arrow {
+      margin-right: _.unit(2);
+      transform: rotate(0deg);
+      transition: transform 0.3s;
+    }
+  }
+
+  .details {
+    color: var(--color-text);
+    font: var(--font-body-medium);
+    padding: _.unit(4);
+    border-top: 1px solid var(--color-divider);
+
+    > p {
+      margin: 0;
+    }
+  }
+
+  &.expanded {
+    .summary {
+      .arrow {
+        transform: rotate(90deg);
+      }
+    }
+  }
+}
+
+.container + .container {
+  margin-top: _.unit(6);
+}

packages/console/src/mdx-components/DetailsSummary/index.tsx

@@ -0,0 +1,37 @@
+import classNames from 'classnames';
+import React, { ReactNode, useState } from 'react';
+import AnimateHeight, { Height } from 'react-animate-height';
+
+import ArrowRight from '@/assets/images/triangle-right.svg';
+
+import * as styles from './index.module.scss';
+
+type Props = {
+  children: ReactNode[];
+};
+
+const DetailsSummary = ({ children }: Props) => {
+  const [summary, details] = children;
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [height, setHeight] = useState<Height>(0);
+
+  return (
+    <div className={classNames(styles.container, isExpanded && styles.expanded)}>
+      <div
+        className={styles.summary}
+        onClick={() => {
+          setIsExpanded(!isExpanded);
+          setHeight(height === 0 ? 'auto' : 0);
+        }}
+      >
+        <ArrowRight className={styles.arrow} />
+        {summary}
+      </div>
+      <AnimateHeight animateOpacity duration={300} height={height}>
+        <div className={styles.details}>{details}</div>
+      </AnimateHeight>
+    </div>
+  );
+};
+
+export default DetailsSummary;

packages/console/src/pages/Applications/components/Guide/index.tsx

@@ -5,6 +5,7 @@ import { MDXProps } from 'mdx/types';
 import React, { cloneElement, lazy, LazyExoticComponent, Suspense, useState } from 'react';
 
 import CodeEditor from '@/components/CodeEditor';
+import DetailsSummary from '@/mdx-components/DetailsSummary';
 import { applicationTypeAndSdkTypeMappings, SupportedSdk } from '@/types/applications';
 
 import GuideHeader from '../GuideHeader';
@@ -78,6 +79,7 @@ const Guide = ({ app, isCompact, onClose }: Props) => {
                 {children}
               </a>
             ),
+            details: DetailsSummary,
           }}
         >
           <Suspense fallback={<StepsSkeleton />}>

packages/shared/scss/_console-themes.scss

@@ -135,6 +135,7 @@
   --color-layer-1: var(--color-all-100);
   --color-layer-2: var(--color-neutral-95);
   --color-float: var(--color-all-100);
+  --color-layer-light: var(--color-neutral-99);
   --color-inverse-surface: var(--color-neutral-20);
   --color-inverse-on-surface: var(--color-neutral-95);
   --color-inverse-primary: var(--color-primary-50);
@@ -304,6 +305,7 @@
   --color-layer-1: var(--color-surface-2);
   --color-layer-2: var(--color-surface-4);
   --color-float: var(--color-surface-4);
+  --color-layer-light: var(--color-surface-4);
   --color-inverse-surface: var(--color-neutral-20);
   --color-inverse-on-surface: var(--color-neutral-95);
   --color-inverse-primary: var(--color-primary-80);