feat: update fundamental-styles to v0.12.0-rc.18 (#1172)

BREAKING CHANGE:
In this change we
* Update fundamental-styles to 0.12.0-rc.18 and support the new features and fixes therein.
  * Removed LayoutGrid component in favor of the new grid system based on Container, Row, and Column components
  * Remove LayoutPanel.colSpan property; added story for LayoutPanel in the new grid system.
  * Removed the TreeViewcomponent in favor of the new Tree component.
  * Shellbar avatar now has a branded border.

* Docs/Storybook:
  * update storybook to v6.0.16
  * fix missing storyDescriptions and component descriptions.
  * Add copy button to easily copy import statements to clipboard.

Author: prsdthkr

.size-limit

@@ -3,6 +3,6 @@
     name: "Fundamental-React Size",
     webpack: true,
     path: "lib/index.js",
-    limit: "230 KB"
+    limit: "236 KB"
   }
 ]

.storybook/custom/components/CopyButton.js

@@ -0,0 +1,48 @@
+import React, { useState, useEffect } from 'react';
+import Button from '../../../src/Button/Button';
+
+const CopyButton = ({ copyText }) => {
+    const [copyState, setCopyState] = useState('Copy');
+    const inputId = `offscreen-text-for-${copyText}`
+    const copyImportStatement = (eve) => {
+        const inputField = document?.getElementById(inputId);
+        if(inputField) {
+            inputField?.select();
+            inputField?.setSelectionRange(0, 99999);
+            document?.execCommand("copy");
+            setCopyState('Copied')
+            
+        }
+    }
+    useEffect(() => {
+        const resetTimer = setTimeout(() => {
+            setCopyState('Copy')
+        }, 5000);
+        return () => clearTimeout(resetTimer);
+    }, [copyState]);
+
+    return (
+        <>
+            <Button
+                className='copy-import-statement-btn'
+                compact
+                glyph='copy'
+                onClick={copyImportStatement}>
+                    {copyState}
+            </Button>
+            <input 
+                aria-hidden
+                className='docs-offscreen'
+                id={inputId}
+                readOnly
+                tabIndex='-1'
+                type="text"
+                value={copyText}
+            />
+        </>
+    );
+};
+
+CopyButton.displayName = 'CopyButton';
+
+export default CopyButton;

.storybook/custom/components/Description.js

@@ -3,7 +3,9 @@ import React from 'react';
 
 const Description = (props) => {
     return (
-        <Markdown options={{ forceBlock: true}}>{props.desc}</Markdown>
+        <div className='docs-component-description'>
+            <Markdown options={{ forceBlock: true}}>{props.desc}</Markdown>
+        </div>
     )
 }
 

.storybook/custom/components/DocsPage.js

@@ -11,6 +11,7 @@ import React, { useContext, useEffect } from 'react';
 import {
     Title,
     Subtitle,
+    Description as DocsStoryDescription,
     Heading,
     Props,
     DocsStory,
@@ -40,14 +41,44 @@ const DocsPage = () => {
         document.querySelectorAll('.toc-link').forEach( x => x.setAttribute('target','_self'));
     }, []);
 
+    const showImport = () => {
+        let groups = context.kind.split('/');
+        const name = groups[1];
+        return (
+            <div className='docs-single-import'>
+                <Import componentName={name} />
+            </div>
+        );
+    }
+
+    const showSubImports = () => {
+        const subComps = context?.parameters?.subcomponents;
+        const subImports = [];
+        if(subComps){
+            const compNames = Object.keys(subComps);
+            compNames?.forEach((name, index) => {
+                subImports.push(<Import key={index} componentName={subComps[name]?.displayName}/>)
+            })
+        }
+        return (
+            <div className='docs-multi-imports'>
+                {subImports}
+            </div>
+        );
+    };
+
     return (
         <>
         <Header />
         <Title />
         <Toc />
         <Subtitle />
-        {context?.parameters?.description && <Description desc={context?.parameters?.description} />}
-        <Import />
+        {context?.parameters?.deprecated && <Description desc={context?.parameters?.deprecated} />}
+        {!context?.parameters?.noImport && showImport()}
+        {context?.parameters?.displaySubComponentImports && showSubImports()}
+        <div className='docs-component-description'>
+                    <DocsStoryDescription />
+        </div>
         <Heading>Examples</Heading>
         {stories.map((story) => story && <DocsStory
             key={story.id}

.storybook/custom/components/Import.js

@@ -1,19 +1,22 @@
-import { DocsContext } from '@storybook/addon-docs/blocks';
-import { googlecode } from 'react-syntax-highlighter/dist/esm/styles/hljs';
+import React from 'react';
 import SyntaxHighlighter from 'react-syntax-highlighter';
-import React, { useContext } from 'react';
+import { googlecode } from 'react-syntax-highlighter/dist/esm/styles/hljs';
+import CopyButton from './CopyButton';
 
-const Import = () => {
-    const context = useContext(DocsContext);
-    let groups = context.kind.split('/');
+const Import = ({ componentName }) => {
+    const importStatement = `import { ${componentName} } from 'fundamental-react/lib/${componentName}';`
     return (
-    <SyntaxHighlighter
-        customStyle={{ padding: 10, whiteSpace: 'pre-wrap', fontSize: 14 }}
-        language='javascript'
-        style={googlecode}>
-        {`import { ${groups[groups.length - 1]} } from 'fundamental-react/lib/${groups[1]}';`}
-    </SyntaxHighlighter>)
-}
+        <div className="docs-import-statement">
+            <SyntaxHighlighter
+                customStyle={{ padding: 10, whiteSpace: 'pre-wrap', fontSize: 14 }}
+                language='javascript'
+                style={googlecode}>
+                {importStatement}
+            </SyntaxHighlighter>
+            <CopyButton copyText={importStatement} />
+        </div>
+    );
+};
 
 Import.displayName = 'Import';
 

.storybook/custom/custom.scss

@@ -2,17 +2,15 @@ body {
     font-family: '72', 'Open Sans', sans-serif;
 }
 
-/* override storybook max width */
-.sbdocs.sbdocs-content {
-    width: 100%;
-    max-width: none;
-}
-
 /* fix bug in storybook@6 where toolbar height is hardcoded - causes scrollbar */
 a[title='Open canvas in new tab'] {
     height: 34px;
 }
 
+.sbdocs.sbdocs-content {
+    max-width: 85%;
+}
+
 /* make room for TOCBot */
 @media (min-width: 1024px) {
     .sbdocs.sbdocs-content {
@@ -311,3 +309,134 @@ blockquote {
         border-color: var(--sapNegativeColor, #bb0000);
     }
 }
+
+.docs-layout-grid {
+    .col-content {
+        min-height: 4rem;
+        text-align: center;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .fd-col--10 {
+        .col-content {
+            background-color: #3694b5;
+            color: black;
+        }
+    }
+
+    .fd-col--9 {
+        .col-content {
+            background-color: #3a73a2;
+            color: black;
+        }
+    }
+
+    .fd-col--7 {
+        .col-content {
+            background-color: #43317c;
+            color: white;
+        }
+    }
+
+    .fd-col--6 {
+        .col-content {
+            background-color: #471069;
+            color: white;
+        }
+    }
+
+    .fd-col--5 {
+        .col-content {
+            background-color: #452073;
+            color: white;
+        }
+    }
+
+    .fd-col--4 {
+        .col-content {
+            background-color: #414186;
+            color: white;
+        }
+    }
+
+    .fd-col--3 {
+        .col-content {
+            background-color: #3d6299;
+            color: white;
+        }
+    }
+    .fd-col--1 {
+        .col-content {
+            background-color: #34a4bf;
+            color: black;
+        }
+    }
+
+    .docs-layout-grid-first,
+    .fd-col--12 {
+        .col-content {
+            background-color: #30c5d2;
+            color: black;
+        }
+    }
+
+    .docs-layout-grid-second,
+    .fd-col--11 {
+        .col-content {
+            background-color: #32b5c8;
+            color: black;
+        }
+    }
+
+    .docs-layout-grid-third,
+    .fd-col--8 {
+        .col-content {
+            background-color: #3f528f;
+            color: white;
+        }
+    }
+
+    .docs-layout-grid-fourth,
+    .fd-col--2 {
+        .col-content {
+            background-color: #3883ac;
+            color: black;
+        }
+    }
+}
+
+.docs-import-statement {
+    display: inline-flex;
+}
+
+.copy-import-statement-btn {
+    margin: 5px !important;
+}
+
+.docs-multi-imports,
+.docs-single-import {
+    margin-bottom: 5em;
+}
+
+.docs-single-import,
+.docs-multi-imports {
+    display: flex;
+    flex-direction: column;
+
+    pre {
+        margin: 0;
+    }
+}
+
+.docs-offscreen {
+    opacity: 0;
+    position: absolute;
+    top: -9999px;
+    left: -9999px;
+}
+
+.docs-component-description {
+    margin-bottom: 80px;
+}