From b80904f8f70a42a3faa1e1115e109d597f40cb06 Mon Sep 17 00:00:00 2001 From: eliot-akira Date: Thu, 26 Sep 2024 17:32:19 +0200 Subject: [PATCH] Start HTML and React examples for all components --- components/breadcrumb.scss | 14 +++ components/forms/form-check.scss | 7 +- docs/generate.ts | 110 ----------------------- docs/lib/accordion.html | 38 ++++++++ docs/lib/accordion.tsx | 98 +++++++++++++++++++++ docs/lib/alerts.html | 24 +++++ docs/lib/alerts.tsx | 32 +++++++ docs/lib/badge.html | 8 ++ docs/lib/badge.tsx | 16 ++++ docs/lib/breadcrumb.html | 20 +++++ docs/lib/breadcrumb.tsx | 40 +++++++++ docs/lib/button-group.html | 5 ++ docs/lib/button-group.tsx | 19 ++++ docs/lib/buttons.html | 10 +++ docs/lib/buttons.tsx | 36 ++++++++ docs/lib/card.html | 8 ++ docs/lib/card.tsx | 32 +++++++ docs/lib/carousel-fade.html | 21 +++++ docs/lib/carousel.html | 38 ++++++++ docs/lib/carousel.tsx | 85 ++++++++++++++++++ docs/lib/close-button.html | 1 + docs/lib/close-button.tsx | 7 ++ docs/lib/collapse.html | 13 +++ docs/lib/collapse.tsx | 37 ++++++++ docs/{common => lib}/colors.module.scss | 0 docs/{common => lib}/colors.tsx | 64 ++++++++++++-- docs/lib/dropdown.html | 10 +++ docs/lib/dropdown.tsx | 34 +++++++ docs/lib/form-checkbox.html | 12 +++ docs/lib/form-checkbox.tsx | 31 +++++++ docs/lib/form-floating-label.html | 8 ++ docs/lib/form-floating-label.tsx | 26 ++++++ docs/lib/form-input-group.html | 35 ++++++++ docs/lib/form-input-group.tsx | 87 ++++++++++++++++++ docs/lib/form-radio.html | 12 +++ docs/lib/form-radio.tsx | 31 +++++++ docs/lib/form-range.html | 2 + docs/lib/form-range.tsx | 12 +++ docs/lib/form-switch.html | 16 ++++ docs/lib/form-switch.tsx | 59 +++++++++++++ docs/lib/form-validate.html | 64 ++++++++++++++ docs/lib/form-validate.tsx | 112 ++++++++++++++++++++++++ docs/lib/form.html | 16 ++++ docs/lib/form.tsx | 20 +++++ docs/lib/list-group.html | 7 ++ docs/lib/list-group.tsx | 15 ++++ docs/lib/modal.html | 23 +++++ docs/lib/modal.tsx | 57 ++++++++++++ docs/lib/navbar.html | 36 ++++++++ docs/lib/navbar.tsx | 104 ++++++++++++++++++++++ docs/lib/offcanvas.html | 28 ++++++ docs/lib/offcanvas.tsx | 77 ++++++++++++++++ docs/lib/pagination.html | 9 ++ docs/lib/pagination.tsx | 37 ++++++++ docs/lib/placeholders.html | 26 ++++++ docs/lib/placeholders.tsx | 52 +++++++++++ docs/lib/popovers.html | 12 +++ docs/lib/popovers.tsx | 48 ++++++++++ docs/lib/progress.html | 15 ++++ docs/lib/progress.tsx | 83 ++++++++++++++++++ docs/lib/scrollspy.html | 32 +++++++ docs/lib/scrollspy.tsx | 87 ++++++++++++++++++ docs/lib/spinners.html | 32 +++++++ docs/lib/spinners.tsx | 56 ++++++++++++ docs/lib/tabs.html | 14 +++ docs/lib/tabs.tsx | 37 ++++++++ docs/lib/toast.html | 11 +++ docs/lib/toast.tsx | 35 ++++++++ docs/lib/tooltips.html | 12 +++ docs/lib/tooltips.tsx | 44 ++++++++++ docs/pages/colors.mdx | 2 +- docs/pages/components/accordion.md | 2 - docs/pages/components/accordion.mdx | 5 ++ docs/pages/components/alerts.md | 2 - docs/pages/components/alerts.mdx | 5 ++ docs/pages/components/badge.md | 2 - docs/pages/components/badge.mdx | 6 ++ docs/pages/components/breadcrumb.md | 2 - docs/pages/components/breadcrumb.mdx | 5 ++ docs/pages/components/button-group.md | 2 - docs/pages/components/button-group.mdx | 5 ++ docs/pages/components/buttons.md | 2 - docs/pages/components/buttons.mdx | 5 ++ docs/pages/components/card.md | 2 - docs/pages/components/card.mdx | 5 ++ docs/pages/components/carousel.md | 2 - docs/pages/components/carousel.mdx | 5 ++ docs/pages/components/close-button.md | 2 - docs/pages/components/close-button.mdx | 5 ++ docs/pages/components/collapse.md | 2 - docs/pages/components/collapse.mdx | 5 ++ docs/pages/components/dropdowns.md | 2 - docs/pages/components/dropdowns.mdx | 5 ++ docs/pages/components/list-group.md | 2 - docs/pages/components/list-group.mdx | 5 ++ docs/pages/components/modal.md | 2 - docs/pages/components/modal.mdx | 5 ++ docs/pages/components/navbar.md | 2 - docs/pages/components/navbar.mdx | 5 ++ docs/pages/components/offcanvas.md | 2 - docs/pages/components/offcanvas.mdx | 5 ++ docs/pages/components/pagination.md | 2 - docs/pages/components/pagination.mdx | 5 ++ docs/pages/components/placeholders.md | 2 - docs/pages/components/placeholders.mdx | 5 ++ docs/pages/components/popovers.md | 2 - docs/pages/components/popovers.mdx | 5 ++ docs/pages/components/progress.md | 2 - docs/pages/components/progress.mdx | 5 ++ docs/pages/components/scrollspy.md | 2 - docs/pages/components/scrollspy.mdx | 5 ++ docs/pages/components/spinners.md | 2 - docs/pages/components/spinners.mdx | 5 ++ docs/pages/components/tabs.md | 2 - docs/pages/components/tabs.mdx | 5 ++ docs/pages/components/toasts.md | 2 - docs/pages/components/toasts.mdx | 5 ++ docs/pages/components/tooltips.md | 2 - docs/pages/components/tooltips.mdx | 5 ++ docs/pages/form/checkbox.mdx | 5 ++ docs/pages/form/floating-label.mdx | 5 ++ docs/pages/form/index.mdx | 5 ++ docs/pages/form/input-group.mdx | 5 ++ docs/pages/form/radio.mdx | 5 ++ docs/pages/form/range.mdx | 5 ++ docs/pages/form/switch.mdx | 5 ++ docs/pages/form/validate.mdx | 5 ++ docs/readme.md | 7 ++ docs/style.scss | 81 +++++++++-------- docusaurus.config.ts | 11 +-- mixins/color-mode.scss | 2 +- mixins/forms.scss | 10 +-- reset.scss | 47 +++++----- utilities/encode-data-svg.ts | 12 +++ utilities/placeholder.ts | 6 ++ variables.scss | 2 + 136 files changed, 2510 insertions(+), 238 deletions(-) delete mode 100644 docs/generate.ts create mode 100644 docs/lib/accordion.html create mode 100644 docs/lib/accordion.tsx create mode 100644 docs/lib/alerts.html create mode 100644 docs/lib/alerts.tsx create mode 100644 docs/lib/badge.html create mode 100644 docs/lib/badge.tsx create mode 100644 docs/lib/breadcrumb.html create mode 100644 docs/lib/breadcrumb.tsx create mode 100644 docs/lib/button-group.html create mode 100644 docs/lib/button-group.tsx create mode 100644 docs/lib/buttons.html create mode 100644 docs/lib/buttons.tsx create mode 100644 docs/lib/card.html create mode 100644 docs/lib/card.tsx create mode 100644 docs/lib/carousel-fade.html create mode 100644 docs/lib/carousel.html create mode 100644 docs/lib/carousel.tsx create mode 100644 docs/lib/close-button.html create mode 100644 docs/lib/close-button.tsx create mode 100644 docs/lib/collapse.html create mode 100644 docs/lib/collapse.tsx rename docs/{common => lib}/colors.module.scss (100%) rename docs/{common => lib}/colors.tsx (61%) create mode 100644 docs/lib/dropdown.html create mode 100644 docs/lib/dropdown.tsx create mode 100644 docs/lib/form-checkbox.html create mode 100644 docs/lib/form-checkbox.tsx create mode 100644 docs/lib/form-floating-label.html create mode 100644 docs/lib/form-floating-label.tsx create mode 100644 docs/lib/form-input-group.html create mode 100644 docs/lib/form-input-group.tsx create mode 100644 docs/lib/form-radio.html create mode 100644 docs/lib/form-radio.tsx create mode 100644 docs/lib/form-range.html create mode 100644 docs/lib/form-range.tsx create mode 100644 docs/lib/form-switch.html create mode 100644 docs/lib/form-switch.tsx create mode 100644 docs/lib/form-validate.html create mode 100644 docs/lib/form-validate.tsx create mode 100644 docs/lib/form.html create mode 100644 docs/lib/form.tsx create mode 100644 docs/lib/list-group.html create mode 100644 docs/lib/list-group.tsx create mode 100644 docs/lib/modal.html create mode 100644 docs/lib/modal.tsx create mode 100644 docs/lib/navbar.html create mode 100644 docs/lib/navbar.tsx create mode 100644 docs/lib/offcanvas.html create mode 100644 docs/lib/offcanvas.tsx create mode 100644 docs/lib/pagination.html create mode 100644 docs/lib/pagination.tsx create mode 100644 docs/lib/placeholders.html create mode 100644 docs/lib/placeholders.tsx create mode 100644 docs/lib/popovers.html create mode 100644 docs/lib/popovers.tsx create mode 100644 docs/lib/progress.html create mode 100644 docs/lib/progress.tsx create mode 100644 docs/lib/scrollspy.html create mode 100644 docs/lib/scrollspy.tsx create mode 100644 docs/lib/spinners.html create mode 100644 docs/lib/spinners.tsx create mode 100644 docs/lib/tabs.html create mode 100644 docs/lib/tabs.tsx create mode 100644 docs/lib/toast.html create mode 100644 docs/lib/toast.tsx create mode 100644 docs/lib/tooltips.html create mode 100644 docs/lib/tooltips.tsx delete mode 100644 docs/pages/components/accordion.md create mode 100644 docs/pages/components/accordion.mdx delete mode 100644 docs/pages/components/alerts.md create mode 100644 docs/pages/components/alerts.mdx delete mode 100644 docs/pages/components/badge.md create mode 100644 docs/pages/components/badge.mdx delete mode 100644 docs/pages/components/breadcrumb.md create mode 100644 docs/pages/components/breadcrumb.mdx delete mode 100644 docs/pages/components/button-group.md create mode 100644 docs/pages/components/button-group.mdx delete mode 100644 docs/pages/components/buttons.md create mode 100644 docs/pages/components/buttons.mdx delete mode 100644 docs/pages/components/card.md create mode 100644 docs/pages/components/card.mdx delete mode 100644 docs/pages/components/carousel.md create mode 100644 docs/pages/components/carousel.mdx delete mode 100644 docs/pages/components/close-button.md create mode 100644 docs/pages/components/close-button.mdx delete mode 100644 docs/pages/components/collapse.md create mode 100644 docs/pages/components/collapse.mdx delete mode 100644 docs/pages/components/dropdowns.md create mode 100644 docs/pages/components/dropdowns.mdx delete mode 100644 docs/pages/components/list-group.md create mode 100644 docs/pages/components/list-group.mdx delete mode 100644 docs/pages/components/modal.md create mode 100644 docs/pages/components/modal.mdx delete mode 100644 docs/pages/components/navbar.md create mode 100644 docs/pages/components/navbar.mdx delete mode 100644 docs/pages/components/offcanvas.md create mode 100644 docs/pages/components/offcanvas.mdx delete mode 100644 docs/pages/components/pagination.md create mode 100644 docs/pages/components/pagination.mdx delete mode 100644 docs/pages/components/placeholders.md create mode 100644 docs/pages/components/placeholders.mdx delete mode 100644 docs/pages/components/popovers.md create mode 100644 docs/pages/components/popovers.mdx delete mode 100644 docs/pages/components/progress.md create mode 100644 docs/pages/components/progress.mdx delete mode 100644 docs/pages/components/scrollspy.md create mode 100644 docs/pages/components/scrollspy.mdx delete mode 100644 docs/pages/components/spinners.md create mode 100644 docs/pages/components/spinners.mdx delete mode 100644 docs/pages/components/tabs.md create mode 100644 docs/pages/components/tabs.mdx delete mode 100644 docs/pages/components/toasts.md create mode 100644 docs/pages/components/toasts.mdx delete mode 100644 docs/pages/components/tooltips.md create mode 100644 docs/pages/components/tooltips.mdx create mode 100644 docs/pages/form/checkbox.mdx create mode 100644 docs/pages/form/floating-label.mdx create mode 100644 docs/pages/form/index.mdx create mode 100644 docs/pages/form/input-group.mdx create mode 100644 docs/pages/form/radio.mdx create mode 100644 docs/pages/form/range.mdx create mode 100644 docs/pages/form/switch.mdx create mode 100644 docs/pages/form/validate.mdx create mode 100644 utilities/encode-data-svg.ts create mode 100644 utilities/placeholder.ts diff --git a/components/breadcrumb.scss b/components/breadcrumb.scss index cc4b7d4..8330955 100644 --- a/components/breadcrumb.scss +++ b/components/breadcrumb.scss @@ -24,6 +24,7 @@ .#{$class-prefix}breadcrumb-item { // The separator between breadcrumbs (by default, a forward-slash: "/") + .#{$class-prefix}breadcrumb-item { + margin-top: 0; padding-left: var(--#{$prefix}breadcrumb-item-padding-x); &::before { @@ -38,3 +39,16 @@ color: var(--#{$prefix}breadcrumb-item-active-color); } } + +@if $enable-dark-mode { + + $breadcrumb-divider-color-dark: $gray-600 !default; + + @include color-mode(dark) { + .#{$class-prefix}breadcrumb-item + // The separator between breadcrumbs (by default, a forward-slash: "/") + + .#{$class-prefix}breadcrumb-item::before { + color: $breadcrumb-divider-color-dark; + } + } +} diff --git a/components/forms/form-check.scss b/components/forms/form-check.scss index 9c145c9..50236f8 100644 --- a/components/forms/form-check.scss +++ b/components/forms/form-check.scss @@ -2,15 +2,19 @@ // Check/radio // +$form-check-margin-right: .35rem !default; + .#{$class-prefix}form-check { - display: block; + display: flex; // block; min-height: $form-check-min-height; padding-left: $form-check-padding-start; margin-bottom: $form-check-margin-bottom; + align-items: center; .#{$class-prefix}form-check-input { float: left; margin-left: $form-check-padding-start * -1; + margin-right: $form-check-margin-right; } } @@ -51,6 +55,7 @@ &[type="radio"] { // stylelint-disable-next-line property-disallowed-list border-radius: $form-check-radio-border-radius; + margin-top: 0; } &:active { diff --git a/docs/generate.ts b/docs/generate.ts deleted file mode 100644 index 49e2bd3..0000000 --- a/docs/generate.ts +++ /dev/null @@ -1,110 +0,0 @@ -import path from 'path' -import fs from 'fs/promises' - -const modules = [ - [ - "Accordion", - "accordion" - ], - [ - "Alerts", - "alerts" - ], - [ - "Badge", - "badge" - ], - [ - "Breadcrumb", - "breadcrumb" - ], - [ - "Buttons", - "buttons" - ], - [ - "Button group", - "button-group" - ], - [ - "Card", - "card" - ], - [ - "Carousel", - "carousel" - ], - [ - "Close button", - "close-button" - ], - [ - "Collapse", - "collapse" - ], - [ - "Dropdowns", - "dropdowns" - ], - [ - "List group", - "list-group" - ], - [ - "Modal", - "modal" - ], - [ - "Navbar", - "navbar" - ], - [ - "Offcanvas", - "offcanvas" - ], - [ - "Pagination", - "pagination" - ], - [ - "Placeholders", - "placeholders" - ], - [ - "Popovers", - "popovers" - ], - [ - "Progress", - "progress" - ], - [ - "Scrollspy", - "scrollspy" - ], - [ - "Spinners", - "spinners" - ], - [ - "Tabs", - "tabs" - ], - [ - "Toasts", - "toasts" - ], - [ - "Tooltips", - "tooltips" - ] -] - -const modulesPath = path.join(process.cwd(), 'pages/modules') - -for (const [title, name] of modules) { - const markdownPath = `${modulesPath}/${name}.md` - console.log(`${name}.md`) - - await fs.writeFile(markdownPath, `# ${title}\n\n`) -} \ No newline at end of file diff --git a/docs/lib/accordion.html b/docs/lib/accordion.html new file mode 100644 index 0000000..8f499de --- /dev/null +++ b/docs/lib/accordion.html @@ -0,0 +1,38 @@ +
+
+

+ +

+
+
+ This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. +
+
+
+
+

+ +

+
+
+ This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. +
+
+
+
+

+ +

+
+
+ This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. +
+
+
+
\ No newline at end of file diff --git a/docs/lib/accordion.tsx b/docs/lib/accordion.tsx new file mode 100644 index 0000000..8a17da8 --- /dev/null +++ b/docs/lib/accordion.tsx @@ -0,0 +1,98 @@ +export default function AccordionExample({ + prefix = 't-' // or '' +}) { + return ( +
+
+

+ +

+
+
+ This is the first item's accordion body. It is + shown by default, until the collapse plugin adds the appropriate + classes that we use to style each element. These classes control the + overall appearance, as well as the showing and hiding via CSS + transitions. You can modify any of this with custom CSS or + overriding our default variables. It's also worth noting that just + about any HTML can go within the .accordion-body, + though the transition does limit overflow. +
+
+
+
+

+ +

+
+
+ This is the second item's accordion body. It is + hidden by default, until the collapse plugin adds the appropriate + classes that we use to style each element. These classes control the + overall appearance, as well as the showing and hiding via CSS + transitions. You can modify any of this with custom CSS or + overriding our default variables. It's also worth noting that just + about any HTML can go within the .accordion-body, + though the transition does limit overflow. +
+
+
+
+

+ +

+
+
+ This is the third item's accordion body. It is + hidden by default, until the collapse plugin adds the appropriate + classes that we use to style each element. These classes control the + overall appearance, as well as the showing and hiding via CSS + transitions. You can modify any of this with custom CSS or + overriding our default variables. It's also worth noting that just + about any HTML can go within the .accordion-body, + though the transition does limit overflow. +
+
+
+
+ ) +} diff --git a/docs/lib/alerts.html b/docs/lib/alerts.html new file mode 100644 index 0000000..7db2b06 --- /dev/null +++ b/docs/lib/alerts.html @@ -0,0 +1,24 @@ + + + + + + + + diff --git a/docs/lib/alerts.tsx b/docs/lib/alerts.tsx new file mode 100644 index 0000000..8c2db2f --- /dev/null +++ b/docs/lib/alerts.tsx @@ -0,0 +1,32 @@ +export default function AlertsExample({ + prefix = 't-' // or '' +}) { + return ( + <> +
+ A simple primary alert—check it out! +
+
+ A simple secondary alert—check it out! +
+
+ A simple success alert—check it out! +
+
+ A simple danger alert—check it out! +
+
+ A simple warning alert—check it out! +
+
+ A simple info alert—check it out! +
+
+ A simple light alert—check it out! +
+
+ A simple dark alert—check it out! +
+ + ) +} diff --git a/docs/lib/badge.html b/docs/lib/badge.html new file mode 100644 index 0000000..53bc478 --- /dev/null +++ b/docs/lib/badge.html @@ -0,0 +1,8 @@ +Primary +Secondary +Success +Danger +Warning +Info +Light +Dark \ No newline at end of file diff --git a/docs/lib/badge.tsx b/docs/lib/badge.tsx new file mode 100644 index 0000000..0c23370 --- /dev/null +++ b/docs/lib/badge.tsx @@ -0,0 +1,16 @@ +export default function BadgesExample({ + prefix = 't-' // or '' +}) { + return ( + <> + Primary + Secondary + Success + Danger + Warning + Info + Light + Dark + + ) +} diff --git a/docs/lib/breadcrumb.html b/docs/lib/breadcrumb.html new file mode 100644 index 0000000..ac53dc8 --- /dev/null +++ b/docs/lib/breadcrumb.html @@ -0,0 +1,20 @@ + + + + + \ No newline at end of file diff --git a/docs/lib/breadcrumb.tsx b/docs/lib/breadcrumb.tsx new file mode 100644 index 0000000..0cbc726 --- /dev/null +++ b/docs/lib/breadcrumb.tsx @@ -0,0 +1,40 @@ +export default function BreadcrumbExample({ + prefix = 't-' // or '' +}) { + return ( +
+ + + + + +
+ ) +} diff --git a/docs/lib/button-group.html b/docs/lib/button-group.html new file mode 100644 index 0000000..1a960aa --- /dev/null +++ b/docs/lib/button-group.html @@ -0,0 +1,5 @@ +
+ Active link + Link + Link +
\ No newline at end of file diff --git a/docs/lib/button-group.tsx b/docs/lib/button-group.tsx new file mode 100644 index 0000000..56379cb --- /dev/null +++ b/docs/lib/button-group.tsx @@ -0,0 +1,19 @@ +export default function Example({ + prefix = 't-' // or '' +}) { + return ( + <> +
+ + Active link + + + Link + + + Link + +
+ + ) +} diff --git a/docs/lib/buttons.html b/docs/lib/buttons.html new file mode 100644 index 0000000..f36bbec --- /dev/null +++ b/docs/lib/buttons.html @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/docs/lib/buttons.tsx b/docs/lib/buttons.tsx new file mode 100644 index 0000000..b2d2f98 --- /dev/null +++ b/docs/lib/buttons.tsx @@ -0,0 +1,36 @@ +export default function ButtonsExample({ + prefix = 't-' // or '' +}) { + return ( + <> + + + + + + + + + + + + ) +} diff --git a/docs/lib/card.html b/docs/lib/card.html new file mode 100644 index 0000000..3effbfb --- /dev/null +++ b/docs/lib/card.html @@ -0,0 +1,8 @@ +
+ ... +
+
Card title
+

Some quick example text to build on the card title and make up the bulk of the card's content.

+ Go somewhere +
+
\ No newline at end of file diff --git a/docs/lib/card.tsx b/docs/lib/card.tsx new file mode 100644 index 0000000..6e49a13 --- /dev/null +++ b/docs/lib/card.tsx @@ -0,0 +1,32 @@ +import { placeholderImage300x150 } from '@site/utilities/placeholder' + +export default function Example({ + prefix = 't-', // or '' +}) { + return ( + <> +
+ ... +
+
Card title
+

+ Some quick example text to build on the card title and make up the + bulk of the card's content. +

+ + Go somewhere + +
+
+ + ) +} diff --git a/docs/lib/carousel-fade.html b/docs/lib/carousel-fade.html new file mode 100644 index 0000000..895803e --- /dev/null +++ b/docs/lib/carousel-fade.html @@ -0,0 +1,21 @@ + \ No newline at end of file diff --git a/docs/lib/carousel.html b/docs/lib/carousel.html new file mode 100644 index 0000000..54ad344 --- /dev/null +++ b/docs/lib/carousel.html @@ -0,0 +1,38 @@ + diff --git a/docs/lib/carousel.tsx b/docs/lib/carousel.tsx new file mode 100644 index 0000000..f1b078f --- /dev/null +++ b/docs/lib/carousel.tsx @@ -0,0 +1,85 @@ +export default function Example({ + prefix = 't-' // or '' +}) { + return ( + <> +
+
+ + + +
+
+
+ ... +
+
First slide label
+

+ Some representative placeholder content for the first slide. +

+
+
+
+ ... +
+
Second slide label
+

+ Some representative placeholder content for the second slide. +

+
+
+
+ ... +
+
Third slide label
+

+ Some representative placeholder content for the third slide. +

+
+
+
+ + +
+ + ) +} diff --git a/docs/lib/close-button.html b/docs/lib/close-button.html new file mode 100644 index 0000000..2dbd7f9 --- /dev/null +++ b/docs/lib/close-button.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/lib/close-button.tsx b/docs/lib/close-button.tsx new file mode 100644 index 0000000..b74f946 --- /dev/null +++ b/docs/lib/close-button.tsx @@ -0,0 +1,7 @@ +export default function Example({ + prefix = 't-' // or '' +}) { + return <> + + +} \ No newline at end of file diff --git a/docs/lib/collapse.html b/docs/lib/collapse.html new file mode 100644 index 0000000..1b98503 --- /dev/null +++ b/docs/lib/collapse.html @@ -0,0 +1,13 @@ +

+ + +

+
+
+ Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger. +
+
\ No newline at end of file diff --git a/docs/lib/collapse.tsx b/docs/lib/collapse.tsx new file mode 100644 index 0000000..7a1c491 --- /dev/null +++ b/docs/lib/collapse.tsx @@ -0,0 +1,37 @@ +export default function Example({ + prefix = 't-' // or '' +}) { + return ( + <> +

+ + +

+
+
+ Some placeholder content for the collapse component. This panel is + hidden by default but revealed when the user activates the relevant + trigger. +
+
+ + ) +} diff --git a/docs/common/colors.module.scss b/docs/lib/colors.module.scss similarity index 100% rename from docs/common/colors.module.scss rename to docs/lib/colors.module.scss diff --git a/docs/common/colors.tsx b/docs/lib/colors.tsx similarity index 61% rename from docs/common/colors.tsx rename to docs/lib/colors.tsx index 1e8b7e0..a95f873 100644 --- a/docs/common/colors.tsx +++ b/docs/lib/colors.tsx @@ -1,3 +1,6 @@ +/** + * Colors - TODO: Create from design tokens in JSON format + */ import React, { useEffect, useState, useRef } from 'react' // import Layout from '@theme/Layout' import styles from './colors.module.scss' @@ -20,9 +23,50 @@ const baseColors = [ const grades = [100, 200, 300, 400, 500, 600, 700, 800, 900] -const SassVariable = ({ children }) => ( - - {children} +function getRGB(c) { + return parseInt(c, 16) || c +} + +function getsRGB(c) { + return getRGB(c) / 255 <= 0.03928 + ? getRGB(c) / 255 / 12.92 + : Math.pow((getRGB(c) / 255 + 0.055) / 1.055, 2.4) +} + +function getLuminance(hexColor) { + return ( + 0.2126 * getsRGB(hexColor.substr(1, 2)) + + 0.7152 * getsRGB(hexColor.substr(3, 2)) + + 0.0722 * getsRGB(hexColor.substr(-2)) + ) +} + +function getContrast(f, b) { + const L1 = getLuminance(f) + const L2 = getLuminance(b) + return (Math.max(L1, L2) + 0.05) / (Math.min(L1, L2) + 0.05) +} + +function getTextColor(bgColor) { + const whiteContrast = getContrast(bgColor, '#ffffff') + const blackContrast = getContrast(bgColor, '#000000') + + return whiteContrast > blackContrast ? '#ffffff' : '#000000' +} + +const isBrightBackground = (bgColor) => + getContrast(bgColor, '#ffffff') < getContrast(bgColor, '#000000') + +const SassVariable = ({ name, color }) => ( + + {name} ) @@ -80,7 +124,10 @@ export default function Colors() { className={styles.card} style={{ backgroundColor: state.theme[key] }} > - {`\$theme-color-${key}`} + ))} @@ -98,7 +145,14 @@ export default function Colors() { : undefined, }} > - {`\$${baseColor}-${grade}`} + ))} diff --git a/docs/lib/dropdown.html b/docs/lib/dropdown.html new file mode 100644 index 0000000..47630d8 --- /dev/null +++ b/docs/lib/dropdown.html @@ -0,0 +1,10 @@ +
+ + +
\ No newline at end of file diff --git a/docs/lib/dropdown.tsx b/docs/lib/dropdown.tsx new file mode 100644 index 0000000..3aac6cf --- /dev/null +++ b/docs/lib/dropdown.tsx @@ -0,0 +1,34 @@ +export default function Dropdown({ + prefix = 't-' // or '' +}) { + return ( +
+ + +
+ ) +} diff --git a/docs/lib/form-checkbox.html b/docs/lib/form-checkbox.html new file mode 100644 index 0000000..99e7f57 --- /dev/null +++ b/docs/lib/form-checkbox.html @@ -0,0 +1,12 @@ +
+ + +
+
+ + +
\ No newline at end of file diff --git a/docs/lib/form-checkbox.tsx b/docs/lib/form-checkbox.tsx new file mode 100644 index 0000000..a647613 --- /dev/null +++ b/docs/lib/form-checkbox.tsx @@ -0,0 +1,31 @@ +export default function ({ + prefix = 't-' // or '' +}) { + return ( + <> +
+ + +
+
+ + +
+ + ) +} diff --git a/docs/lib/form-floating-label.html b/docs/lib/form-floating-label.html new file mode 100644 index 0000000..be352f3 --- /dev/null +++ b/docs/lib/form-floating-label.html @@ -0,0 +1,8 @@ +
+ + +
+
+ + +
\ No newline at end of file diff --git a/docs/lib/form-floating-label.tsx b/docs/lib/form-floating-label.tsx new file mode 100644 index 0000000..387723d --- /dev/null +++ b/docs/lib/form-floating-label.tsx @@ -0,0 +1,26 @@ +export default function Example({ + prefix = 't-' // or '' +}) { + return ( + <> +
+ + +
+
+ + +
+ + ) +} diff --git a/docs/lib/form-input-group.html b/docs/lib/form-input-group.html new file mode 100644 index 0000000..74932ed --- /dev/null +++ b/docs/lib/form-input-group.html @@ -0,0 +1,35 @@ +
+ @ + +
+ +
+ + @example.com +
+ +
+ +
+ https://example.com/users/ + +
+
Example help text goes outside the input group.
+
+ +
+ $ + + .00 +
+ +
+ + @ + +
+ +
+ With textarea + +
\ No newline at end of file diff --git a/docs/lib/form-input-group.tsx b/docs/lib/form-input-group.tsx new file mode 100644 index 0000000..7889eaa --- /dev/null +++ b/docs/lib/form-input-group.tsx @@ -0,0 +1,87 @@ +export default function Example({ + prefix = 't-' // or '' +}) { + return ( + <> +
+ + @ + + +
+ +
+ + + @example.com + +
+ +
+ +
+ + https://example.com/users/ + + +
+
+ Example help text goes outside the input group. +
+
+ +
+ $ + + .00 +
+ +
+ + @ + +
+ +
+ With textarea + +
+ + ) +} diff --git a/docs/lib/form-radio.html b/docs/lib/form-radio.html new file mode 100644 index 0000000..9300766 --- /dev/null +++ b/docs/lib/form-radio.html @@ -0,0 +1,12 @@ +
+ + +
+
+ + +
\ No newline at end of file diff --git a/docs/lib/form-radio.tsx b/docs/lib/form-radio.tsx new file mode 100644 index 0000000..21f6fc1 --- /dev/null +++ b/docs/lib/form-radio.tsx @@ -0,0 +1,31 @@ +export default function ({ + prefix = 't-' // or '' +}) { + return ( + <> +
+ + +
+
+ + +
+ + ) +} diff --git a/docs/lib/form-range.html b/docs/lib/form-range.html new file mode 100644 index 0000000..b8facbf --- /dev/null +++ b/docs/lib/form-range.html @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/docs/lib/form-range.tsx b/docs/lib/form-range.tsx new file mode 100644 index 0000000..749565e --- /dev/null +++ b/docs/lib/form-range.tsx @@ -0,0 +1,12 @@ +export default function Example({ + prefix = 't-' // or '' +}) { + return ( + <> + + + + ) +} diff --git a/docs/lib/form-switch.html b/docs/lib/form-switch.html new file mode 100644 index 0000000..601c09f --- /dev/null +++ b/docs/lib/form-switch.html @@ -0,0 +1,16 @@ +
+ + +
+
+ + +
+
+ + +
+
+ + +
\ No newline at end of file diff --git a/docs/lib/form-switch.tsx b/docs/lib/form-switch.tsx new file mode 100644 index 0000000..b852cbb --- /dev/null +++ b/docs/lib/form-switch.tsx @@ -0,0 +1,59 @@ +export default function ({ + prefix = 't-' // or '' +}) { + return ( + <> +
+ + +
+
+ + +
+
+ + +
+
+ + +
+ + ) +} diff --git a/docs/lib/form-validate.html b/docs/lib/form-validate.html new file mode 100644 index 0000000..51bb5b6 --- /dev/null +++ b/docs/lib/form-validate.html @@ -0,0 +1,64 @@ +
+
+ + +
+ Looks good! +
+
+
+ + +
+ Looks good! +
+
+
+ +
+ @ + +
+ Please choose a username. +
+
+
+
+ + +
+ Please provide a valid city. +
+
+
+ + +
+ Please select a valid state. +
+
+
+ + +
+ Please provide a valid zip. +
+
+
+
+ + +
+ You must agree before submitting. +
+
+
+
+ +
+
\ No newline at end of file diff --git a/docs/lib/form-validate.tsx b/docs/lib/form-validate.tsx new file mode 100644 index 0000000..bec8fe0 --- /dev/null +++ b/docs/lib/form-validate.tsx @@ -0,0 +1,112 @@ +export default function Example({ + prefix = 't-' // or '' +}) { + return ( + <> +
+
+ + +
Looks good!
+
+
+ + +
Looks good!
+
+
+ +
+ + @ + + +
Please choose a username.
+
+
+
+ + +
Please provide a valid city.
+
+
+ + +
Please select a valid state.
+
+
+ + +
Please provide a valid zip.
+
+
+
+ + +
+ You must agree before submitting. +
+
+
+
+ +
+
+ + ) +} diff --git a/docs/lib/form.html b/docs/lib/form.html new file mode 100644 index 0000000..041693a --- /dev/null +++ b/docs/lib/form.html @@ -0,0 +1,16 @@ +
+
+ + +
We'll never share your email with anyone else.
+
+
+ + +
+
+ + +
+ +
\ No newline at end of file diff --git a/docs/lib/form.tsx b/docs/lib/form.tsx new file mode 100644 index 0000000..b3c9dfd --- /dev/null +++ b/docs/lib/form.tsx @@ -0,0 +1,20 @@ +export default function({ + prefix = 't-' // or '' +}) { + return
+
+ + +
We'll never share your email with anyone else.
+
+
+ + +
+
+ + +
+ +
+} \ No newline at end of file diff --git a/docs/lib/list-group.html b/docs/lib/list-group.html new file mode 100644 index 0000000..e4122d6 --- /dev/null +++ b/docs/lib/list-group.html @@ -0,0 +1,7 @@ +
    +
  • An item
    • +
  • A second item
    • +
  • A third item
    • +
  • A fourth item
    • +
  • And a fifth one
    • +
\ No newline at end of file diff --git a/docs/lib/list-group.tsx b/docs/lib/list-group.tsx new file mode 100644 index 0000000..0d351ce --- /dev/null +++ b/docs/lib/list-group.tsx @@ -0,0 +1,15 @@ +export default function Example({ + prefix = 't-' // or '' +}) { + return ( + <> +
    +
  • An item
    • +
  • A second item
    • +
  • A third item
    • +
  • A fourth item
    • +
  • And a fifth one
    • +
+ + ) +} diff --git a/docs/lib/modal.html b/docs/lib/modal.html new file mode 100644 index 0000000..dd7f3ba --- /dev/null +++ b/docs/lib/modal.html @@ -0,0 +1,23 @@ + + + + + diff --git a/docs/lib/modal.tsx b/docs/lib/modal.tsx new file mode 100644 index 0000000..6ca5e90 --- /dev/null +++ b/docs/lib/modal.tsx @@ -0,0 +1,57 @@ +export default function Example({ + prefix = 't-', // or '' +}) { + return ( + <> + + + + ) +} diff --git a/docs/lib/navbar.html b/docs/lib/navbar.html new file mode 100644 index 0000000..103b488 --- /dev/null +++ b/docs/lib/navbar.html @@ -0,0 +1,36 @@ + \ No newline at end of file diff --git a/docs/lib/navbar.tsx b/docs/lib/navbar.tsx new file mode 100644 index 0000000..3e5341c --- /dev/null +++ b/docs/lib/navbar.tsx @@ -0,0 +1,104 @@ +export default function Example({ + prefix = 't-', // or '' +}) { + return ( + <> + + + ) +} diff --git a/docs/lib/offcanvas.html b/docs/lib/offcanvas.html new file mode 100644 index 0000000..f9e2a00 --- /dev/null +++ b/docs/lib/offcanvas.html @@ -0,0 +1,28 @@ + + Link with href + + + +
+
+
Offcanvas
+ +
+
+
+ Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc. +
+
+ + +
+
+
\ No newline at end of file diff --git a/docs/lib/offcanvas.tsx b/docs/lib/offcanvas.tsx new file mode 100644 index 0000000..deadc8d --- /dev/null +++ b/docs/lib/offcanvas.tsx @@ -0,0 +1,77 @@ +export default function Example({ + prefix = 't-' // or '' +}) { + return ( + <> + + Link with href + + + +
+
+
+ Offcanvas +
+ +
+
+
+ Some text as placeholder. In real life you can have the elements you + have chosen. Like, text, images, lists, etc. +
+
+ + +
+
+
+ + ) +} diff --git a/docs/lib/pagination.html b/docs/lib/pagination.html new file mode 100644 index 0000000..1622203 --- /dev/null +++ b/docs/lib/pagination.html @@ -0,0 +1,9 @@ + \ No newline at end of file diff --git a/docs/lib/pagination.tsx b/docs/lib/pagination.tsx new file mode 100644 index 0000000..96d2d2c --- /dev/null +++ b/docs/lib/pagination.tsx @@ -0,0 +1,37 @@ +export default function Example({ + prefix = 't-' // or '' +}) { + return ( + <> + + + ) +} diff --git a/docs/lib/placeholders.html b/docs/lib/placeholders.html new file mode 100644 index 0000000..1e65f6b --- /dev/null +++ b/docs/lib/placeholders.html @@ -0,0 +1,26 @@ +
+ ... + +
+
Card title
+

Some quick example text to build on the card title and make up the bulk of the card's content.

+ Go somewhere +
+
+ + \ No newline at end of file diff --git a/docs/lib/placeholders.tsx b/docs/lib/placeholders.tsx new file mode 100644 index 0000000..08b5729 --- /dev/null +++ b/docs/lib/placeholders.tsx @@ -0,0 +1,52 @@ +import { placeholderImage300x150 } from '@site/utilities/placeholder' + +export default function Example({ + prefix = 't-', // or '' +}) { + return ( + <> +
+ ... + +
+
Card title
+

+ Some quick example text to build on the card title and make up the + bulk of the card's content. +

+ + Go somewhere + +
+
+ + + + ) +} diff --git a/docs/lib/popovers.html b/docs/lib/popovers.html new file mode 100644 index 0000000..5c74d09 --- /dev/null +++ b/docs/lib/popovers.html @@ -0,0 +1,12 @@ + + + + \ No newline at end of file diff --git a/docs/lib/popovers.tsx b/docs/lib/popovers.tsx new file mode 100644 index 0000000..b3f15bf --- /dev/null +++ b/docs/lib/popovers.tsx @@ -0,0 +1,48 @@ +export default function Example({ + prefix = 't-', // or '' +}) { + return ( + <> + + + + + + ) +} diff --git a/docs/lib/progress.html b/docs/lib/progress.html new file mode 100644 index 0000000..988b5f3 --- /dev/null +++ b/docs/lib/progress.html @@ -0,0 +1,15 @@ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file diff --git a/docs/lib/progress.tsx b/docs/lib/progress.tsx new file mode 100644 index 0000000..71e3751 --- /dev/null +++ b/docs/lib/progress.tsx @@ -0,0 +1,83 @@ +export default function Example({ + prefix = 't-', // or '' +}) { + return ( + <> +

+

+
+
+

+

+

+
+
+

+

+

+
+
+

+

+

+
+
+

+

+

+
+
+

{' '} + + ) +} diff --git a/docs/lib/scrollspy.html b/docs/lib/scrollspy.html new file mode 100644 index 0000000..cec84fa --- /dev/null +++ b/docs/lib/scrollspy.html @@ -0,0 +1,32 @@ + +
+

First heading

+

...

+

Second heading

+

...

+

Third heading

+

...

+

Fourth heading

+

...

+

Fifth heading

+

...

+
\ No newline at end of file diff --git a/docs/lib/scrollspy.tsx b/docs/lib/scrollspy.tsx new file mode 100644 index 0000000..5eb2615 --- /dev/null +++ b/docs/lib/scrollspy.tsx @@ -0,0 +1,87 @@ +export default function Example({ + prefix = 't-', // or '' +}) { + return ( + <> + +
+

First heading

+

...

+

Second heading

+

...

+

Third heading

+

...

+

Fourth heading

+

...

+

Fifth heading

+

...

+
+ + ) +} diff --git a/docs/lib/spinners.html b/docs/lib/spinners.html new file mode 100644 index 0000000..cec84fa --- /dev/null +++ b/docs/lib/spinners.html @@ -0,0 +1,32 @@ + +
+

First heading

+

...

+

Second heading

+

...

+

Third heading

+

...

+

Fourth heading

+

...

+

Fifth heading

+

...

+
\ No newline at end of file diff --git a/docs/lib/spinners.tsx b/docs/lib/spinners.tsx new file mode 100644 index 0000000..64c81f0 --- /dev/null +++ b/docs/lib/spinners.tsx @@ -0,0 +1,56 @@ +export default function Example({ + prefix = 't-', // or '' +}) { + return ( + <> +
+ Loading... +
+
+ Loading... +
+
+ Loading... +
+
+ Loading... +
+
+ Loading... +
+
+ Loading... +
+
+ Loading... +
+
+ Loading... +
+ + ) +} diff --git a/docs/lib/tabs.html b/docs/lib/tabs.html new file mode 100644 index 0000000..4736590 --- /dev/null +++ b/docs/lib/tabs.html @@ -0,0 +1,14 @@ + \ No newline at end of file diff --git a/docs/lib/tabs.tsx b/docs/lib/tabs.tsx new file mode 100644 index 0000000..eb2bb0b --- /dev/null +++ b/docs/lib/tabs.tsx @@ -0,0 +1,37 @@ +export default function Example({ + prefix = 't-', // or '' +}) { + return ( + <> + + + ) +} diff --git a/docs/lib/toast.html b/docs/lib/toast.html new file mode 100644 index 0000000..aa58a29 --- /dev/null +++ b/docs/lib/toast.html @@ -0,0 +1,11 @@ + \ No newline at end of file diff --git a/docs/lib/toast.tsx b/docs/lib/toast.tsx new file mode 100644 index 0000000..9d991f5 --- /dev/null +++ b/docs/lib/toast.tsx @@ -0,0 +1,35 @@ +import { placeholderImage300x150 } from '@site/utilities/placeholder' + +export default function Example({ + prefix = 't-', // or '' +}) { + return ( + <> +
+
+ {/* ... */} + System + 11 mins ago + +
+
+ Hello, world! This is a toast message. +
+
+ + ) +} diff --git a/docs/lib/tooltips.html b/docs/lib/tooltips.html new file mode 100644 index 0000000..d5cc86d --- /dev/null +++ b/docs/lib/tooltips.html @@ -0,0 +1,12 @@ + + + + \ No newline at end of file diff --git a/docs/lib/tooltips.tsx b/docs/lib/tooltips.tsx new file mode 100644 index 0000000..06a00f7 --- /dev/null +++ b/docs/lib/tooltips.tsx @@ -0,0 +1,44 @@ +export default function Example({ + prefix = 't-' // or '' +}) { + return ( + <> + + + + + + ) +} diff --git a/docs/pages/colors.mdx b/docs/pages/colors.mdx index 7ef48d1..1d3a902 100644 --- a/docs/pages/colors.mdx +++ b/docs/pages/colors.mdx @@ -2,6 +2,6 @@ title: Colors sidebar_position: 2 --- -import Colors from '../common/colors' +import Colors from '@site/docs/lib/colors' diff --git a/docs/pages/components/accordion.md b/docs/pages/components/accordion.md deleted file mode 100644 index d4c5d34..0000000 --- a/docs/pages/components/accordion.md +++ /dev/null @@ -1,2 +0,0 @@ -# Accordion - diff --git a/docs/pages/components/accordion.mdx b/docs/pages/components/accordion.mdx new file mode 100644 index 0000000..1ca2cec --- /dev/null +++ b/docs/pages/components/accordion.mdx @@ -0,0 +1,5 @@ +import Accordion from '@site/docs/lib/accordion' + +# Accordion + + diff --git a/docs/pages/components/alerts.md b/docs/pages/components/alerts.md deleted file mode 100644 index 9061f96..0000000 --- a/docs/pages/components/alerts.md +++ /dev/null @@ -1,2 +0,0 @@ -# Alerts - diff --git a/docs/pages/components/alerts.mdx b/docs/pages/components/alerts.mdx new file mode 100644 index 0000000..a8998a1 --- /dev/null +++ b/docs/pages/components/alerts.mdx @@ -0,0 +1,5 @@ +import Alerts from '@site/docs/lib/alerts' + +# Alerts + + diff --git a/docs/pages/components/badge.md b/docs/pages/components/badge.md deleted file mode 100644 index ed4c77c..0000000 --- a/docs/pages/components/badge.md +++ /dev/null @@ -1,2 +0,0 @@ -# Badge - diff --git a/docs/pages/components/badge.mdx b/docs/pages/components/badge.mdx new file mode 100644 index 0000000..402646b --- /dev/null +++ b/docs/pages/components/badge.mdx @@ -0,0 +1,6 @@ +import Badge from '@site/docs/lib/badge' + +# Badge + + + diff --git a/docs/pages/components/breadcrumb.md b/docs/pages/components/breadcrumb.md deleted file mode 100644 index 5cfa9e5..0000000 --- a/docs/pages/components/breadcrumb.md +++ /dev/null @@ -1,2 +0,0 @@ -# Breadcrumb - diff --git a/docs/pages/components/breadcrumb.mdx b/docs/pages/components/breadcrumb.mdx new file mode 100644 index 0000000..65e4be3 --- /dev/null +++ b/docs/pages/components/breadcrumb.mdx @@ -0,0 +1,5 @@ +import Breadcrumb from '@site/docs/lib/breadcrumb' + +# Breadcrumb + + \ No newline at end of file diff --git a/docs/pages/components/button-group.md b/docs/pages/components/button-group.md deleted file mode 100644 index d91b7d2..0000000 --- a/docs/pages/components/button-group.md +++ /dev/null @@ -1,2 +0,0 @@ -# Button group - diff --git a/docs/pages/components/button-group.mdx b/docs/pages/components/button-group.mdx new file mode 100644 index 0000000..3fc4108 --- /dev/null +++ b/docs/pages/components/button-group.mdx @@ -0,0 +1,5 @@ +import ButtonGroup from '@site/docs/lib/button-group' + +# Button group + + \ No newline at end of file diff --git a/docs/pages/components/buttons.md b/docs/pages/components/buttons.md deleted file mode 100644 index 2c05157..0000000 --- a/docs/pages/components/buttons.md +++ /dev/null @@ -1,2 +0,0 @@ -# Buttons - diff --git a/docs/pages/components/buttons.mdx b/docs/pages/components/buttons.mdx new file mode 100644 index 0000000..067e979 --- /dev/null +++ b/docs/pages/components/buttons.mdx @@ -0,0 +1,5 @@ +import Buttons from '@site/docs/lib/buttons' + +# Buttons + + \ No newline at end of file diff --git a/docs/pages/components/card.md b/docs/pages/components/card.md deleted file mode 100644 index e1f19c0..0000000 --- a/docs/pages/components/card.md +++ /dev/null @@ -1,2 +0,0 @@ -# Card - diff --git a/docs/pages/components/card.mdx b/docs/pages/components/card.mdx new file mode 100644 index 0000000..d162469 --- /dev/null +++ b/docs/pages/components/card.mdx @@ -0,0 +1,5 @@ +import Card from '@site/docs/lib/card' + +# Card + + \ No newline at end of file diff --git a/docs/pages/components/carousel.md b/docs/pages/components/carousel.md deleted file mode 100644 index c1e4ed2..0000000 --- a/docs/pages/components/carousel.md +++ /dev/null @@ -1,2 +0,0 @@ -# Carousel - diff --git a/docs/pages/components/carousel.mdx b/docs/pages/components/carousel.mdx new file mode 100644 index 0000000..067fdff --- /dev/null +++ b/docs/pages/components/carousel.mdx @@ -0,0 +1,5 @@ +import Carousel from '@site/docs/lib/carousel' + +# Carousel + + \ No newline at end of file diff --git a/docs/pages/components/close-button.md b/docs/pages/components/close-button.md deleted file mode 100644 index cb11bac..0000000 --- a/docs/pages/components/close-button.md +++ /dev/null @@ -1,2 +0,0 @@ -# Close button - diff --git a/docs/pages/components/close-button.mdx b/docs/pages/components/close-button.mdx new file mode 100644 index 0000000..2f48290 --- /dev/null +++ b/docs/pages/components/close-button.mdx @@ -0,0 +1,5 @@ +import CloseButton from '@site/docs/lib/close-button' + +# Close button + + \ No newline at end of file diff --git a/docs/pages/components/collapse.md b/docs/pages/components/collapse.md deleted file mode 100644 index 0698055..0000000 --- a/docs/pages/components/collapse.md +++ /dev/null @@ -1,2 +0,0 @@ -# Collapse - diff --git a/docs/pages/components/collapse.mdx b/docs/pages/components/collapse.mdx new file mode 100644 index 0000000..71f6e8f --- /dev/null +++ b/docs/pages/components/collapse.mdx @@ -0,0 +1,5 @@ +import Collapse from '@site/docs/lib/collapse' + +# Collapse + + \ No newline at end of file diff --git a/docs/pages/components/dropdowns.md b/docs/pages/components/dropdowns.md deleted file mode 100644 index f5218be..0000000 --- a/docs/pages/components/dropdowns.md +++ /dev/null @@ -1,2 +0,0 @@ -# Dropdowns - diff --git a/docs/pages/components/dropdowns.mdx b/docs/pages/components/dropdowns.mdx new file mode 100644 index 0000000..97b9583 --- /dev/null +++ b/docs/pages/components/dropdowns.mdx @@ -0,0 +1,5 @@ +import Dropdown from '@site/docs/lib/dropdown' + +# Dropdowns + + diff --git a/docs/pages/components/list-group.md b/docs/pages/components/list-group.md deleted file mode 100644 index e72bb85..0000000 --- a/docs/pages/components/list-group.md +++ /dev/null @@ -1,2 +0,0 @@ -# List group - diff --git a/docs/pages/components/list-group.mdx b/docs/pages/components/list-group.mdx new file mode 100644 index 0000000..4d68b90 --- /dev/null +++ b/docs/pages/components/list-group.mdx @@ -0,0 +1,5 @@ +import ListGroup from '@site/docs/lib/list-group' + +# List group + + \ No newline at end of file diff --git a/docs/pages/components/modal.md b/docs/pages/components/modal.md deleted file mode 100644 index 0bcbff4..0000000 --- a/docs/pages/components/modal.md +++ /dev/null @@ -1,2 +0,0 @@ -# Modal - diff --git a/docs/pages/components/modal.mdx b/docs/pages/components/modal.mdx new file mode 100644 index 0000000..add266c --- /dev/null +++ b/docs/pages/components/modal.mdx @@ -0,0 +1,5 @@ +import Modal from '@site/docs/lib/modal' + +# Modal + + \ No newline at end of file diff --git a/docs/pages/components/navbar.md b/docs/pages/components/navbar.md deleted file mode 100644 index ad4ed5b..0000000 --- a/docs/pages/components/navbar.md +++ /dev/null @@ -1,2 +0,0 @@ -# Navbar - diff --git a/docs/pages/components/navbar.mdx b/docs/pages/components/navbar.mdx new file mode 100644 index 0000000..f084bec --- /dev/null +++ b/docs/pages/components/navbar.mdx @@ -0,0 +1,5 @@ +import Navbar from '@site/docs/lib/navbar' + +# Navbar + + \ No newline at end of file diff --git a/docs/pages/components/offcanvas.md b/docs/pages/components/offcanvas.md deleted file mode 100644 index d0bbbb6..0000000 --- a/docs/pages/components/offcanvas.md +++ /dev/null @@ -1,2 +0,0 @@ -# Offcanvas - diff --git a/docs/pages/components/offcanvas.mdx b/docs/pages/components/offcanvas.mdx new file mode 100644 index 0000000..e12aa10 --- /dev/null +++ b/docs/pages/components/offcanvas.mdx @@ -0,0 +1,5 @@ +import Offcanvas from '@site/docs/lib/offcanvas' + +# Offcanvas + + \ No newline at end of file diff --git a/docs/pages/components/pagination.md b/docs/pages/components/pagination.md deleted file mode 100644 index d51aa6c..0000000 --- a/docs/pages/components/pagination.md +++ /dev/null @@ -1,2 +0,0 @@ -# Pagination - diff --git a/docs/pages/components/pagination.mdx b/docs/pages/components/pagination.mdx new file mode 100644 index 0000000..5dc1a2a --- /dev/null +++ b/docs/pages/components/pagination.mdx @@ -0,0 +1,5 @@ +import Pagination from '@site/docs/lib/pagination' + +# Pagination + + \ No newline at end of file diff --git a/docs/pages/components/placeholders.md b/docs/pages/components/placeholders.md deleted file mode 100644 index b89574f..0000000 --- a/docs/pages/components/placeholders.md +++ /dev/null @@ -1,2 +0,0 @@ -# Placeholders - diff --git a/docs/pages/components/placeholders.mdx b/docs/pages/components/placeholders.mdx new file mode 100644 index 0000000..6c0f399 --- /dev/null +++ b/docs/pages/components/placeholders.mdx @@ -0,0 +1,5 @@ +import Placeholders from '@site/docs/lib/placeholders' + +# Placeholders + + \ No newline at end of file diff --git a/docs/pages/components/popovers.md b/docs/pages/components/popovers.md deleted file mode 100644 index fda17c2..0000000 --- a/docs/pages/components/popovers.md +++ /dev/null @@ -1,2 +0,0 @@ -# Popovers - diff --git a/docs/pages/components/popovers.mdx b/docs/pages/components/popovers.mdx new file mode 100644 index 0000000..d8de69c --- /dev/null +++ b/docs/pages/components/popovers.mdx @@ -0,0 +1,5 @@ +import Popovers from '@site/docs/lib/popovers' + +# Popovers + + \ No newline at end of file diff --git a/docs/pages/components/progress.md b/docs/pages/components/progress.md deleted file mode 100644 index 4617ec6..0000000 --- a/docs/pages/components/progress.md +++ /dev/null @@ -1,2 +0,0 @@ -# Progress - diff --git a/docs/pages/components/progress.mdx b/docs/pages/components/progress.mdx new file mode 100644 index 0000000..92637fb --- /dev/null +++ b/docs/pages/components/progress.mdx @@ -0,0 +1,5 @@ +import Progress from '@site/docs/lib/progress' + +# Progress + + diff --git a/docs/pages/components/scrollspy.md b/docs/pages/components/scrollspy.md deleted file mode 100644 index 1f91975..0000000 --- a/docs/pages/components/scrollspy.md +++ /dev/null @@ -1,2 +0,0 @@ -# Scrollspy - diff --git a/docs/pages/components/scrollspy.mdx b/docs/pages/components/scrollspy.mdx new file mode 100644 index 0000000..2e39c9e --- /dev/null +++ b/docs/pages/components/scrollspy.mdx @@ -0,0 +1,5 @@ +import Scrollspy from '@site/docs/lib/scrollspy' + +# Scrollspy + + diff --git a/docs/pages/components/spinners.md b/docs/pages/components/spinners.md deleted file mode 100644 index f698ee7..0000000 --- a/docs/pages/components/spinners.md +++ /dev/null @@ -1,2 +0,0 @@ -# Spinners - diff --git a/docs/pages/components/spinners.mdx b/docs/pages/components/spinners.mdx new file mode 100644 index 0000000..3674b02 --- /dev/null +++ b/docs/pages/components/spinners.mdx @@ -0,0 +1,5 @@ +import Spinners from '@site/docs/lib/spinners' + +# Spinners + + diff --git a/docs/pages/components/tabs.md b/docs/pages/components/tabs.md deleted file mode 100644 index a79d621..0000000 --- a/docs/pages/components/tabs.md +++ /dev/null @@ -1,2 +0,0 @@ -# Tabs - diff --git a/docs/pages/components/tabs.mdx b/docs/pages/components/tabs.mdx new file mode 100644 index 0000000..09fa330 --- /dev/null +++ b/docs/pages/components/tabs.mdx @@ -0,0 +1,5 @@ +import Tabs from '@site/docs/lib/tabs' + +# Tabs + + diff --git a/docs/pages/components/toasts.md b/docs/pages/components/toasts.md deleted file mode 100644 index 70bd641..0000000 --- a/docs/pages/components/toasts.md +++ /dev/null @@ -1,2 +0,0 @@ -# Toasts - diff --git a/docs/pages/components/toasts.mdx b/docs/pages/components/toasts.mdx new file mode 100644 index 0000000..8655032 --- /dev/null +++ b/docs/pages/components/toasts.mdx @@ -0,0 +1,5 @@ +import Toast from '@site/docs/lib/toast' + +# Toasts + + \ No newline at end of file diff --git a/docs/pages/components/tooltips.md b/docs/pages/components/tooltips.md deleted file mode 100644 index f3f6d0a..0000000 --- a/docs/pages/components/tooltips.md +++ /dev/null @@ -1,2 +0,0 @@ -# Tooltips - diff --git a/docs/pages/components/tooltips.mdx b/docs/pages/components/tooltips.mdx new file mode 100644 index 0000000..d8cf29f --- /dev/null +++ b/docs/pages/components/tooltips.mdx @@ -0,0 +1,5 @@ +import Tooltips from '@site/docs/lib/tooltips' + +# Tooltips + + \ No newline at end of file diff --git a/docs/pages/form/checkbox.mdx b/docs/pages/form/checkbox.mdx new file mode 100644 index 0000000..c37e972 --- /dev/null +++ b/docs/pages/form/checkbox.mdx @@ -0,0 +1,5 @@ +import Checkbox from '@site/docs/lib/form-checkbox' + +# Checkbox + + diff --git a/docs/pages/form/floating-label.mdx b/docs/pages/form/floating-label.mdx new file mode 100644 index 0000000..a3c0a3a --- /dev/null +++ b/docs/pages/form/floating-label.mdx @@ -0,0 +1,5 @@ +import FloatingLabel from '@site/docs/lib/form-floating-label' + +# Floating Label + + diff --git a/docs/pages/form/index.mdx b/docs/pages/form/index.mdx new file mode 100644 index 0000000..e86d2fa --- /dev/null +++ b/docs/pages/form/index.mdx @@ -0,0 +1,5 @@ +import Form from '@site/docs/lib/form' + +# Form + +
diff --git a/docs/pages/form/input-group.mdx b/docs/pages/form/input-group.mdx new file mode 100644 index 0000000..be6d96a --- /dev/null +++ b/docs/pages/form/input-group.mdx @@ -0,0 +1,5 @@ +import InputGroup from '@site/docs/lib/form-input-group' + +# Input Group + + diff --git a/docs/pages/form/radio.mdx b/docs/pages/form/radio.mdx new file mode 100644 index 0000000..a2c1ac2 --- /dev/null +++ b/docs/pages/form/radio.mdx @@ -0,0 +1,5 @@ +import Radio from '@site/docs/lib/form-radio' + +# Radio + + diff --git a/docs/pages/form/range.mdx b/docs/pages/form/range.mdx new file mode 100644 index 0000000..be75a99 --- /dev/null +++ b/docs/pages/form/range.mdx @@ -0,0 +1,5 @@ +import Range from '@site/docs/lib/form-range' + +# Range + + diff --git a/docs/pages/form/switch.mdx b/docs/pages/form/switch.mdx new file mode 100644 index 0000000..9cfa505 --- /dev/null +++ b/docs/pages/form/switch.mdx @@ -0,0 +1,5 @@ +import Switch from '@site/docs/lib/form-switch' + +# Switch + + diff --git a/docs/pages/form/validate.mdx b/docs/pages/form/validate.mdx new file mode 100644 index 0000000..70712d9 --- /dev/null +++ b/docs/pages/form/validate.mdx @@ -0,0 +1,5 @@ +import Validate from '@site/docs/lib/form-validate' + +# Validate + + diff --git a/docs/readme.md b/docs/readme.md index 10207af..992df7f 100644 --- a/docs/readme.md +++ b/docs/readme.md @@ -5,3 +5,10 @@ Docusaurus with custom configuration - `app` - React pages - `pages` - Markdown pages - `style.scss` - Tangible Design module + + +#### MDX pages + +In `pages/components`, MDX files import React examples from `lib`. + +Note that entirely React pages under `app` do not have a sidebar and don't get automatically added to the sidebar like MDX files do. Some MDX files are thin wrapper to import the main React page content. diff --git a/docs/style.scss b/docs/style.scss index 902a0dc..1ea831f 100644 --- a/docs/style.scss +++ b/docs/style.scss @@ -1,49 +1,49 @@ - // Docusaurus sets attribute `data-theme` -$data-theme-prefix: ""; +$data-theme-prefix: ''; -@import "../base.scss"; -@import "../root.scss"; -@import "../reset.scss"; +@import '../base.scss'; +@import '../root.scss'; +@import '../reset.scss'; -@import "../components/type"; -@import "../components/images"; -@import "../components/containers"; // 20K +@import '../components/type'; +@import '../components/images'; +@import '../components/containers'; // 20K -@import "../components/grid"; -@import "../components/tables"; -@import "../components/forms"; -@import "../components/buttons"; -@import "../components/transitions"; -@import "../components/dropdown"; -@import "../components/button-group"; -@import "../components/nav"; -@import "../components/navbar"; // 74K +@import '../components/grid'; +@import '../components/tables'; +@import '../components/forms'; +@import '../components/buttons'; +@import '../components/transitions'; +@import '../components/dropdown'; +@import '../components/button-group'; +@import '../components/nav'; +@import '../components/navbar'; // 74K -@import "../components/card"; -@import "../components/accordion"; -@import "../components/breadcrumb"; -@import "../components/pagination"; -@import "../components/badge"; -@import "../components/alert"; -@import "../components/progress"; -@import "../components/list-group"; -@import "../components/close"; -@import "../components/toasts"; -@import "../components/modal"; -@import "../components/tooltip"; -@import "../components/popover"; -@import "../components/carousel"; -@import "../components/spinners"; -@import "../components/offcanvas"; -@import "../components/placeholders"; // 67K +@import '../components/card'; +@import '../components/accordion'; +@import '../components/breadcrumb'; +@import '../components/pagination'; +@import '../components/badge'; +@import '../components/alert'; +@import '../components/progress'; +@import '../components/list-group'; +@import '../components/close'; +@import '../components/toasts'; +@import '../components/modal'; +@import '../components/tooltip'; +@import '../components/popover'; +@import '../components/carousel'; +@import '../components/spinners'; +@import '../components/offcanvas'; +@import '../components/placeholders'; // 67K // Utilities -@import "../helpers"; // 7K -@import "../utilities/api"; // 66K +@import '../helpers'; // 7K +@import '../utilities/api'; // 66K -// Original Docusaurus classic theme uses a CSS framework called Infima +// Docusaurus classic theme uses a CSS framework called Infima +// Ideally it should be replaced entirely :root { --ifm-color-primary: #2e8555; @@ -53,6 +53,7 @@ $data-theme-prefix: ""; --ifm-color-primary-light: #33925d; --ifm-color-primary-lighter: #359962; --ifm-color-primary-lightest: #3cad6e; + --ifm-font-size-base: 110%; // --ifm-code-font-size: 95%; --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1); } @@ -62,6 +63,12 @@ $data-theme-prefix: ""; box-shadow: var(--ifm-navbar-shadow); } +.markdown nav { + li { + margin: 0; + } +} + /* For readability concerns, you should choose a lighter palette in dark mode. */ [data-theme='dark'] { --ifm-color-primary: #25c2a0; diff --git a/docusaurus.config.ts b/docusaurus.config.ts index ff384cd..dd9213f 100644 --- a/docusaurus.config.ts +++ b/docusaurus.config.ts @@ -39,6 +39,7 @@ const config: Config = { presets: [ [ 'classic', + // './docs/preset/index.ts', { theme: { customCss: './docs/style.scss', @@ -102,11 +103,11 @@ const config: Config = { // {to: '/blog', label: 'Blog', position: 'left'}, - // { - // href: 'https://github.com/tangibleinc/design', - // label: 'GitHub', - // position: 'right', - // }, + { + href: 'https://github.com/tangibleinc/design', + label: 'GitHub', + position: 'right', + }, ], }, footer: { diff --git a/mixins/color-mode.scss b/mixins/color-mode.scss index 1f61a29..b32de42 100644 --- a/mixins/color-mode.scss +++ b/mixins/color-mode.scss @@ -13,7 +13,7 @@ } } } @else { - [data-#{$data-prefix}theme="#{$mode}"] { + [data-#{$data-theme-prefix}theme="#{$mode}"] { @content; } } diff --git a/mixins/forms.scss b/mixins/forms.scss index 3cfec41..a5352b3 100644 --- a/mixins/forms.scss +++ b/mixins/forms.scss @@ -24,7 +24,7 @@ $focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity), $border-color: $color ) { - .#{$state}-feedback { + .#{$class-prefix}#{$state}-feedback { display: none; width: 100%; margin-top: $form-feedback-margin-top; @@ -33,7 +33,7 @@ color: $color; } - .#{$state}-tooltip { + .#{$class-prefix}#{$state}-tooltip { position: absolute; top: 100%; z-index: 5; @@ -49,8 +49,8 @@ } @include form-validation-state-selector($state) { - ~ .#{$state}-feedback, - ~ .#{$state}-tooltip { + ~ .#{$class-prefix}#{$state}-feedback, + ~ .#{$class-prefix}#{$state}-tooltip { display: block; } } @@ -141,7 +141,7 @@ } } .#{$class-prefix}form-check-inline .#{$class-prefix}form-check-input { - ~ .#{$state}-feedback { + ~ .#{$class-prefix}#{$state}-feedback { margin-left: .5em; } } diff --git a/reset.scss b/reset.scss index 6611a3f..cee409a 100644 --- a/reset.scss +++ b/reset.scss @@ -9,6 +9,28 @@ @extend %reset; } +// Body +// +// 1. Remove the margin in all browsers. +// 2. As a best practice, apply a default `background-color`. +// 3. Prevent adjustments of font size after orientation changes in iOS. +// 4. Change the default tap highlight to be completely transparent in iOS. + +// scss-docs-start reboot-body-rules +.#{$class-prefix}reset body, body.#{$class-prefix}reset { + margin: 0; // 1 + font-family: var(--#{$prefix}body-font-family); + @include font-size(var(--#{$prefix}body-font-size)); + font-weight: var(--#{$prefix}body-font-weight); + line-height: var(--#{$prefix}body-line-height); + color: var(--#{$prefix}body-color); + text-align: var(--#{$prefix}body-text-align); + background-color: var(--#{$prefix}body-bg); // 2 + -webkit-text-size-adjust: 100%; // 3 + -webkit-tap-highlight-color: rgba($black, 0); // 4 + overflow: auto; +} + // Typography // // 1. Remove top margins from headings @@ -64,31 +86,6 @@ } } - -// Body -// -// 1. Remove the margin in all browsers. -// 2. As a best practice, apply a default `background-color`. -// 3. Prevent adjustments of font size after orientation changes in iOS. -// 4. Change the default tap highlight to be completely transparent in iOS. - -// scss-docs-start reboot-body-rules -&, body { - margin: 0; // 1 - font-family: var(--#{$prefix}body-font-family); - @include font-size(var(--#{$prefix}body-font-size)); - font-weight: var(--#{$prefix}body-font-weight); - line-height: var(--#{$prefix}body-line-height); - color: var(--#{$prefix}body-color); - text-align: var(--#{$prefix}body-text-align); - background-color: var(--#{$prefix}body-bg); // 2 - -webkit-text-size-adjust: 100%; // 3 - -webkit-tap-highlight-color: rgba($black, 0); // 4 - overflow: auto; -} -// scss-docs-end reboot-body-rules - - // Content grouping // // 1. Reset Firefox's gray color diff --git a/utilities/encode-data-svg.ts b/utilities/encode-data-svg.ts new file mode 100644 index 0000000..dde9325 --- /dev/null +++ b/utilities/encode-data-svg.ts @@ -0,0 +1,12 @@ +export default function encodeDataSvg(str: string) { + const cleaned = str + .replace(/[\t\n\r]/gim, '') // Strip newlines and tabs + .replace(/\s\s+/g, ' ') // Condense multiple spaces + .replace(/'/gim, '\\i') // Normalize quotes + + const encoded = encodeURIComponent(cleaned) + .replace(/\(/g, '%28') // Encode brackets + .replace(/\)/g, '%29') + + return `data:image/svg+xml;charset=UTF-8,${encoded}` +} diff --git a/utilities/placeholder.ts b/utilities/placeholder.ts new file mode 100644 index 0000000..31b9503 --- /dev/null +++ b/utilities/placeholder.ts @@ -0,0 +1,6 @@ +import encodeDataSvg from '@site/utilities/encode-data-svg' + +export const placeholderImage300x150 = encodeDataSvg(` + + 300×150 +`) diff --git a/variables.scss b/variables.scss index 8c7c3d9..dbddba5 100644 --- a/variables.scss +++ b/variables.scss @@ -15,6 +15,8 @@ $prefix: $variable-prefix !default; // Alias used in origin * not supported yet on JS side. */ $data-prefix: t- !default; +// Prefix for data-theme attribute is separate to allow matching Docusarus or site theme +$data-theme-prefix: t- !default; // Parent selector for CSS classes - Must start with ".' $parent-selector: "" !default; // ".tgbl-interface"