diff --git a/.storybook/global.css b/.storybook/global.css index a27a993b..7b75a606 100644 --- a/.storybook/global.css +++ b/.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%; +} \ No newline at end of file diff --git a/.storybook/preview.ts b/.storybook/preview.ts index 5c3f8c7e..cbe161e4 100644 --- a/.storybook/preview.ts +++ b/.storybook/preview.ts @@ -44,6 +44,7 @@ export const parameters = { order: [ "Getting Started", ["Introduction", "Installation", "Imports", "Usage", "Frameworks"], + "Troubleshooting", "Components", "Patterns", "Templates" diff --git a/docs/FAQ.md b/docs/FAQ.md new file mode 100644 index 00000000..7e2fe2b5 --- /dev/null +++ b/docs/FAQ.md @@ -0,0 +1,27 @@ +# FAQ page + +
+ + +
+

General

+ +
Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry'
+ If you encounter this error, it means that you need to load the Scoped Custom Element Registry polyfill. Refer to the instructions here +
+ +

React

+ +
Can I use web components with react?
+ Yes you can! Our library offers a react wrapped version for each of our web component. This helps to provide 100% compatibility with react. Learn more +
+
+ +
+ +Github Issues +

Head to GitHub to view or open a new issue

+Learn more +
+
+
diff --git a/src/components/Accordion/sgds-accordion-item.scss b/src/components/Accordion/sgds-accordion-item.scss index be18ec44..e6086ee6 100644 --- a/src/components/Accordion/sgds-accordion-item.scss +++ b/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; diff --git a/stories/troubleshooting.stories.mdx b/stories/troubleshooting.stories.mdx new file mode 100644 index 00000000..15e74dce --- /dev/null +++ b/stories/troubleshooting.stories.mdx @@ -0,0 +1,7 @@ +import { Meta, Description } from "@storybook/addon-docs"; +import faq from '/docs/FAQ.md'; + + + + +