Adding breakpoint config, and updating component preview to support s…

…crolling

dist/config.js

@@ -71,6 +71,12 @@ var defaultConfig = function () {
             color_sort: ['primary', 'secondary', 'extra', 'system'],
             component_sort: ['primary', 'secondary', 'transparent'],
             base_path: '',
+            breakpoints: {
+                sm: { size: 576, name: 'Small' },
+                md: { size: 768, name: 'Medium' },
+                lg: { size: 992, name: 'Large' },
+                xl: { size: 1200, name: 'Extra Large' },
+            },
         },
         figma: {
             options: {},

src/app/components/ComponentPreview.tsx

@@ -44,9 +44,8 @@ export const ComponentDisplay: React.FC<{ component: PreviewObject | undefined;
   component,
   breakpoints,
 }) => {
-
   const ref = React.useRef<HTMLIFrameElement>(null);
-  const [height, setHeight] = React.useState('0px');
+  const [height, setHeight] = React.useState('100px');
   const [width, setWidth] = React.useState('100%');
   const [breakpoint, setBreakpoint] = React.useState(breakpoints ? Object.keys(breakpoints)[0] : '');
   const sortedBreakpoints = breakpoints ? Object.keys(breakpoints).sort((a, b) => breakpoints[b].size - breakpoints[a].size) : [];

src/app/components/Markdown/CodeHighlight.tsx

@@ -24,6 +24,8 @@ export const CodeHighlight: React.FC<{ data: PreviewObject | undefined; collapsi
     const states = Object.keys(data).filter((key) => ['id', 'preview'].indexOf(key) === -1);
     const [activeState, setActiveState] = useState<string>(states[0]);
     const [code, setCode] = useState<string>(data.code);
+    oneLight['pre[class*="language-"]'].overflow = 'auto';
+    oneLight['pre[class*="language-"]'].maxHeight = '450px';
     return (
       <div className={`c-code-block${collapsible && collapsed ? ' collapsed' : ''}`}>
         <SyntaxHighlighter

src/app/components/util/index.ts

@@ -243,16 +243,6 @@ export const staticBuildMenu = () => {
         search !== path.resolve(docRoot, 'index.md') &&
         (fileName.endsWith('md') || fileName.endsWith('mdx'))
       ) {
-        // check if its an mdx or an md file
-        // let contents, metadata;
-        // check if its an mdx or an md file
-        /*if(fileName.endsWith('mdx')){
-          
-        }else{
-          contents = fs.readFileSync(search, 'utf-8');
-          const front = matter(contents);
-          metadata = front.data as Metadata;
-        }*/
         const contents = fs.readFileSync(search, 'utf-8');
         const { data: metadata } = matter(contents);
         if (metadata.enabled === false) {
@@ -283,6 +273,9 @@ export const staticBuildMenu = () => {
               if (sub.enabled !== false) {
                 return sub;
               }
+              console.log(sub);
+
+              // Read the subfile if possible and get any menu items
             })
             .filter(filterOutUndefined);
         }

src/app/sass/components/_code-block.scss

@@ -68,7 +68,6 @@
 		color: #adadad;
 	}
 	transition: max-height 1s ease;
-
 	&.collapsed {
 		overflow: hidden;
 		max-height: rem( 150px );