From 08c5becdf255aa70ffed61c14e9ced713e4ca0ec Mon Sep 17 00:00:00 2001 From: clukhei Date: Tue, 23 Jul 2024 16:04:37 +0800 Subject: [PATCH 1/4] docs(faq): add faq --- .storybook/global.css | 11 ++++++++++- .storybook/preview.ts | 1 + docs/FAQ.md | 21 +++++++++++++++++++++ stories/troubleshooting.stories.mdx | 7 +++++++ 4 files changed, 39 insertions(+), 1 deletion(-) create mode 100644 docs/FAQ.md create mode 100644 stories/troubleshooting.stories.mdx diff --git a/.storybook/global.css b/.storybook/global.css index a27a993b..a76d2bbe 100644 --- a/.storybook/global.css +++ b/.storybook/global.css @@ -5,10 +5,19 @@ grid-template-columns: repeat(3, 1fr); align-items: stretch; } -sgds-card.intro::part(base) { +sgds-card.intro::part(base), sgds-card.faq::part(base) { border: none; background-color: #f6f7fb; border-radius: 24px; height: 100%; } +/* FAQ stylings */ + +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..6834108d --- /dev/null +++ b/docs/FAQ.md @@ -0,0 +1,21 @@ +# 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 + +
+
+ +Github Issues +

Head to GitHub to view or open a new issue

+ +
+ + 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'; + + + + + From 3f5ad3a8388fa24bed184616463fed9296bb519a Mon Sep 17 00:00:00 2001 From: clukhei Date: Wed, 24 Jul 2024 16:40:42 +0800 Subject: [PATCH 2/4] docs(faq): add react qn --- docs/FAQ.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/docs/FAQ.md b/docs/FAQ.md index 6834108d..97bcd5a0 100644 --- a/docs/FAQ.md +++ b/docs/FAQ.md @@ -10,11 +10,18 @@
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
From be045680902abb54a794aa10f17801363eb91be9 Mon Sep 17 00:00:00 2001 From: clukhei Date: Tue, 30 Jul 2024 13:28:42 +0800 Subject: [PATCH 3/4] fix(accordion-item): fallback value for active color of accordion --- docs/FAQ.md | 4 ++-- src/components/Accordion/sgds-accordion-item.scss | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/FAQ.md b/docs/FAQ.md index 97bcd5a0..2129c2cd 100644 --- a/docs/FAQ.md +++ b/docs/FAQ.md @@ -6,11 +6,12 @@

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?
@@ -24,5 +25,4 @@ 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; From 257a3a9bf7bd7f297835a7448831b4b581a0b8b8 Mon Sep 17 00:00:00 2001 From: clukhei Date: Tue, 30 Jul 2024 13:36:15 +0800 Subject: [PATCH 4/4] docs(faq): remove card height 100% --- .storybook/global.css | 8 ++++++-- docs/FAQ.md | 3 +-- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/.storybook/global.css b/.storybook/global.css index a76d2bbe..7b75a606 100644 --- a/.storybook/global.css +++ b/.storybook/global.css @@ -5,7 +5,7 @@ grid-template-columns: repeat(3, 1fr); align-items: stretch; } -sgds-card.intro::part(base), sgds-card.faq::part(base) { +sgds-card.intro::part(base) { border: none; background-color: #f6f7fb; border-radius: 24px; @@ -13,7 +13,11 @@ sgds-card.intro::part(base), sgds-card.faq::part(base) { } /* 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; diff --git a/docs/FAQ.md b/docs/FAQ.md index 2129c2cd..7e2fe2b5 100644 --- a/docs/FAQ.md +++ b/docs/FAQ.md @@ -5,19 +5,18 @@

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