Fixed display issue but build fails.

srm985 · Nov 24, 2023 · e27853e · e27853e
1 parent 61b1431
commit e27853e
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 75 deletions.
diff --git a/src/components/CodeBlockComponent/index.js b/src/components/CodeBlockComponent/index.js
@@ -1,8 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import {
-    Prism as SyntaxHighlighter
-} from 'react-syntax-highlighter';
+import SyntaxHighlighter from 'react-syntax-highlighter';
 import {
     vscDarkPlus
 } from 'react-syntax-highlighter/dist/esm/styles/prism';
@@ -15,36 +13,38 @@ function CodeBlockComponent(props) {
     const {
         children,
         className,
-        inline: isInline,
-        language
+        language,
+        node
     } = props;
 
-    const fieldValue = children[0];
+    const isInline = !node.properties?.className;
 
     const {
         displayName
     } = CodeBlockComponent;
 
+    const syntaxLanguage = language || className.replace('language-language', 'language');
+
     const componentClassNames = classNames(
         displayName,
-        className,
+        syntaxLanguage,
         {
             [`${displayName}--inline`]: isInline
         }
     );
 
     return (
         isInline ? (
-            <code className={componentClassNames}>{fieldValue}</code>
+            <code className={componentClassNames}>{children}</code>
         ) : (
             <SyntaxHighlighter
                 className={componentClassNames}
-                language={language}
+                language={syntaxLanguage}
                 showLineNumbers
                 style={vscDarkPlus}
                 wrapLines
             >
-                {fieldValue}
+                {children}
             </SyntaxHighlighter>
         )
     );
@@ -55,16 +55,19 @@ CodeBlockComponent.displayName = 'CodeBlockComponent';
 CodeBlockComponent.propTypes = {
     children: PropTypes.arrayOf(PropTypes.string),
     className: PropTypes.string,
-    // eslint-disable-next-line react/boolean-prop-naming
-    inline: PropTypes.bool,
-    language: PropTypes.string
+    language: PropTypes.string,
+    node: PropTypes.shape({
+        properties: PropTypes.shape({
+            className: PropTypes.arrayOf(PropTypes.string)
+        })
+    })
 };
 
 CodeBlockComponent.defaultProps = {
     children: [],
     className: '',
-    inline: false,
-    language: ''
+    language: '',
+    node: {}
 };
 
 export default CodeBlockComponent;
diff --git a/src/components/GridItemComponent/styles.scss b/src/components/GridItemComponent/styles.scss
@@ -8,7 +8,7 @@ $breakpoints: (
 );
 
 .GridItemComponent {
-    grid-column: 1 13;
+    grid-column: 1 / 13;
 
     & > * {
         width: 100%;

diff --git a/src/components/ListComponent/index.js b/src/components/ListComponent/index.js
@@ -1,98 +1,93 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 
+import Button from '../ButtonComponent';
+
+import {
+    BUTTON_STYLE_TYPE_INLINE
+} from '../ButtonComponent/config';
+
 import classNames from '../../utils/classNames';
 
 import './styles.scss';
 
+export const SHORT_LIST_LIMIT = 20;
+
 function ListComponent(props) {
     const {
         displayName
     } = ListComponent;
 
-    console.log(props);
-
     const renderListItems = (childList) => childList.map((childDetails) => {
         const {
-            children: nestedChildren,
-            key,
-            tagName: elementType,
+            children,
+            isRootList = false,
+            properties,
+            tagName,
+            type,
             value
         } = childDetails;
 
-        if (value === '\n') {
-            return undefined;
-        }
-
-        const isList = elementType === 'ul' || elementType === 'ol';
+        const componentClassNames = isRootList ? classNames(
+            displayName,
+            {
+                [`${displayName}--ordered`]: tagName === 'ol',
+                [`${displayName}--short`]: (children.length / 2) <= SHORT_LIST_LIMIT,
+                [`${displayName}--unordered`]: tagName !== 'ol'
+            }
+        ) : '';
 
-        // console.log({
-        //     childDetails
-        // });
+        // These are empty entries or new lines
+        if (type === 'text' && value === '\n') {
+            return null;
+        }
 
-        if (isList) {
-            const isOrderedList = elementType === 'ol';
-            const isShortList = nestedChildren.length <= 14;
+        if (tagName === 'ul') {
+            return (<ul className={componentClassNames}>{renderListItems(children)}</ul>);
+        }
 
-            const componentClassNames = classNames(
-                displayName,
-                {
-                    [`${displayName}--ordered`]: isOrderedList,
-                    [`${displayName}--short`]: isShortList,
-                    [`${displayName}--unordered`]: !isOrderedList
-                }
-            );
+        if (tagName === 'ol') {
+            return (<ol className={componentClassNames}>{renderListItems(children)}</ol>);
+        }
 
-            return (
-                isOrderedList ? (
-                    <ol
-                        className={componentClassNames}
-                        key={key}
-                    >{renderListItems(nestedChildren)}
-                    </ol>
-                ) : (
-                    <ul
-                        className={componentClassNames}
-                        key={key}
-                    >{renderListItems(nestedChildren)}
-                    </ul>
-                )
-            );
+        if (tagName === 'li' || tagName === 'p') {
+            return (<li>{renderListItems(children)}</li>);
         }
 
-        if (value) {
-            if (value === '.') {
-                console.log({
-                    childDetails
-                });
-            }
+        if (tagName === 'a') {
             return (
-                <li>{value}</li>
+                <Button
+                    {...properties}
+                    isInternalURL={false}
+                    label={children[0].value}
+                    styleType={BUTTON_STYLE_TYPE_INLINE}
+                />
             );
         }
 
-        return renderListItems(nestedChildren);
+        return value;
     }).filter((listItem) => listItem);
 
     return renderListItems([
-        props.node
+        {
+            ...props.node,
+            isRootList: true
+        }
     ]);
 }
 
 ListComponent.displayName = 'ListComponent';
 
 ListComponent.propTypes = {
-    node: PropTypes.shape({
-        children: PropTypes.arrayOf(PropTypes.shape({
-            children: PropTypes.arrayOf(PropTypes.shape({
-                type: PropTypes.string,
-                value: PropTypes.string
-            })),
-            tagName: PropTypes.string
-        })),
-        key: PropTypes.string,
-        tagName: PropTypes.string
-    })
+    key: PropTypes.string,
+    node: PropTypes.arrayOf(PropTypes.shape({
+        children: PropTypes.shape({}),
+        isRootList: PropTypes.string,
+        properties: PropTypes.shape({}),
+        tagName: PropTypes.string,
+        type: PropTypes.string,
+        value: PropTypes.string
+    }))
 };
 
 ListComponent.defaultProps = {