Troubleshooting page (#204)

.storybook/global.css

@@ -12,3 +12,16 @@ sgds-card.intro::part(base) {
   height: 100%;
 }
 
+/* FAQ stylings */
+sgds-card.faq::part(base) {
+  border: none;
+  background-color: #f6f7fb;
+  border-radius: 24px;
+}
+sgds-faq-grid{
+  display: grid;
+  grid-template-columns: 3fr 1fr;
+  row-gap: 1rem;
+  column-gap: 2rem;
+  width: 100%;
+}

.storybook/preview.ts

@@ -44,6 +44,7 @@ export const parameters = {
       order: [
         "Getting Started",
         ["Introduction", "Installation", "Imports", "Usage", "Frameworks"],
+        "Troubleshooting",
         "Components",
         "Patterns",
         "Templates"

docs/FAQ.md

@@ -0,0 +1,27 @@
+# FAQ page
+
+<br/>
+
+<sgds-faq-grid>
+<div>
+<h3> General </h3>
+<sgds-accordion-item>
+    <div slot="accordion-header">Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry'</div>
+    <span slot="accordion-content">If you encounter this error, it means that you need to load the Scoped Custom Element Registry polyfill. Refer to the instructions <a target="_self" href="/story/getting-started-usage-scoped-elements--page">here</a></span> 
+</sgds-accordion-item>
+
+<h3> React </h3>
+<sgds-accordion-item >
+    <div slot="accordion-header">Can I use web components with react?</div>
+    <span slot="accordion-content">Yes you can! Our library offers a react wrapped version for each of our web component. This helps to provide 100% compatibility with react. <a target="_self" href="/story/getting-started-frameworks-react--page">Learn more</a></span> 
+</sgds-accordion-item>
+</div>
+
+<div>
+<sgds-card class="faq">
+<span slot="card-title">Github Issues</span>
+<p slot="card-text">Head to GitHub to view or open a new issue</p>    
+<a slot="card-link" href="https://github.com/GovTechSG/sgds-web-component/issues" target="_blank">Learn more</a>
+</sgds-card>
+</div>
+</sgds-faq-grid>

src/components/Accordion/sgds-accordion-item.scss

@@ -20,7 +20,7 @@
 .accordion-button {
   line-height: var(--accordion-item-line-height);
   &:not(.collapsed){
-    color: var(--accordion-active-color);
+    color: var(--accordion-active-color, var(--sgds-primary));
   }
   svg.bi-chevron-down {
     margin-left: auto;

stories/troubleshooting.stories.mdx

@@ -0,0 +1,7 @@
+import { Meta, Description } from "@storybook/addon-docs";
+import faq from '/docs/FAQ.md';
+
+<Meta title="Troubleshooting/FAQ" />
+
+<Description markdown={faq} />
+