diff --git a/apps/demo/config/vite/app.ts b/apps/demo/config/vite/app.ts index 49194b99d1..8fa763441d 100644 --- a/apps/demo/config/vite/app.ts +++ b/apps/demo/config/vite/app.ts @@ -41,6 +41,7 @@ export default defineConfig({ }, runtimeOptions: { data: { + is_development: process.env.NODE_ENV === 'development', // Get the list of components directories and pass their names to the data web_components: getListOfNestedDirectories('../../packages/web/src/scss/components', 'index.html'), // Get the list of helpers directories and pass their names to the data diff --git a/apps/demo/partials/boxList.hbs b/apps/demo/partials/boxList.hbs deleted file mode 100644 index 4de8e4ccba..0000000000 --- a/apps/demo/partials/boxList.hbs +++ /dev/null @@ -1,5 +0,0 @@ - diff --git a/apps/demo/partials/card.hbs b/apps/demo/partials/card.hbs new file mode 100644 index 0000000000..d934a61cff --- /dev/null +++ b/apps/demo/partials/card.hbs @@ -0,0 +1,5 @@ +
  • + + {{content}} + +
    • diff --git a/apps/demo/partials/cardList.hbs b/apps/demo/partials/cardList.hbs new file mode 100644 index 0000000000..cc56399ec3 --- /dev/null +++ b/apps/demo/partials/cardList.hbs @@ -0,0 +1,5 @@ + diff --git a/apps/demo/partials/component.hbs b/apps/demo/partials/component.hbs deleted file mode 100644 index 59fd60c5a7..0000000000 --- a/apps/demo/partials/component.hbs +++ /dev/null @@ -1,3 +0,0 @@ -
  • - {{component.title}} -
    • diff --git a/apps/demo/partials/cover.hbs b/apps/demo/partials/cover.hbs new file mode 100644 index 0000000000..3df7e5b2c8 --- /dev/null +++ b/apps/demo/partials/cover.hbs @@ -0,0 +1,50 @@ +
    +
    + +

    + {{title}} + + {{#if isUnstable}} + Unstable + {{/if}} +

    + + + +
    +
    diff --git a/apps/demo/partials/footer.hbs b/apps/demo/partials/footer.hbs new file mode 100644 index 0000000000..5208fe9c1c --- /dev/null +++ b/apps/demo/partials/footer.hbs @@ -0,0 +1,7 @@ + diff --git a/apps/demo/partials/form-validations/layout/default.hbs b/apps/demo/partials/form-validations/layout/default.hbs new file mode 100644 index 0000000000..0ed0b0e8c6 --- /dev/null +++ b/apps/demo/partials/form-validations/layout/default.hbs @@ -0,0 +1,16 @@ +{{#> layout/base package="Form Validations" packageUrl="/packages/form-validations/" title=title}} + + {{> header}} + {{> cover}} + +
    +
    + + {{> @partial-block}} + +
    +
    + + {{> footer}} + +{{/layout/base}} diff --git a/apps/demo/partials/header.hbs b/apps/demo/partials/header.hbs index 6da46cb5cd..7f70e6f491 100644 --- a/apps/demo/partials/header.hbs +++ b/apps/demo/partials/header.hbs @@ -1,20 +1,136 @@ -
    -
    +
    + + {{> web/assets/spiritLogoInverted }} + -

    Spirit Design System

    -

    {{#if package}}{{package}} - {{/if}}Development Preview

    + +
    + +
    + + + + + + +
    + + + +
    +
    -
    - +
    + + Close + + + + + + +
    -
    + + diff --git a/apps/demo/partials/layout/base.hbs b/apps/demo/partials/layout/base.hbs index a9f2839d49..8965de07a8 100644 --- a/apps/demo/partials/layout/base.hbs +++ b/apps/demo/partials/layout/base.hbs @@ -3,7 +3,15 @@ - {{#if package}}{{package}} - {{/if}}Development Preview + + {{#if title}} + {{title}} — + {{#if package}}{{package}} —{{/if}} + Spirit Design System + {{else}} + Spirit Design System — Development preview + {{/if}} + @@ -19,11 +27,13 @@ + + {{#> scripts}} {{/scripts}} - + {{> @partial-block}} diff --git a/apps/demo/partials/layout/default.hbs b/apps/demo/partials/layout/default.hbs deleted file mode 100644 index 60f41cd21a..0000000000 --- a/apps/demo/partials/layout/default.hbs +++ /dev/null @@ -1,20 +0,0 @@ -{{#> layout/base package=package}} - - {{#*inline "scripts"}} - {{/inline}} - - {{#with package as |pkgName|}} - {{> header package=pkgName}} - {{else}} - {{> header package=""}} - {{/with}} - -
    -
    - - {{> @partial-block}} - -
    -
    - -{{/layout/base}} diff --git a/apps/demo/partials/layout/plain.hbs b/apps/demo/partials/layout/plain.hbs deleted file mode 100644 index cbbe9be697..0000000000 --- a/apps/demo/partials/layout/plain.hbs +++ /dev/null @@ -1,11 +0,0 @@ -{{#> layout/base}} - -
    -
    - - {{> @partial-block}} - -
    -
    - -{{/layout/base}} diff --git a/apps/demo/partials/section.hbs b/apps/demo/partials/section.hbs deleted file mode 100644 index 92ce85719f..0000000000 --- a/apps/demo/partials/section.hbs +++ /dev/null @@ -1,7 +0,0 @@ -
    - -

    {{title}}

    - - {{> @partial-block}} - -
    diff --git a/apps/demo/partials/tileList.hbs b/apps/demo/partials/tileList.hbs deleted file mode 100644 index 4e8ae9d7f7..0000000000 --- a/apps/demo/partials/tileList.hbs +++ /dev/null @@ -1,5 +0,0 @@ - diff --git a/apps/demo/partials/web-react/demo.hbs b/apps/demo/partials/web-react/demo.hbs index f410b9e6a6..e24b9d6751 100644 --- a/apps/demo/partials/web-react/demo.hbs +++ b/apps/demo/partials/web-react/demo.hbs @@ -1,6 +1,6 @@ -{{#> web-react/layout/plain }} +{{#> web-react/layout/default }} -
    - +
    + -{{/web-react/layout/plain }} +{{/web-react/layout/default }} diff --git a/apps/demo/partials/web-react/icons.hbs b/apps/demo/partials/web-react/icons.hbs index dccd493afb..bcaba9a846 100644 --- a/apps/demo/partials/web-react/icons.hbs +++ b/apps/demo/partials/web-react/icons.hbs @@ -1,10 +1,8 @@ -{{#> web-react/layout/default page="icons"}} +{{#> web-react/layout/default page="icons" title="Icons"}} - {{#> section title="Icons"}} + {{> web-react/tabs }} -
    - - - {{/section}} +
    + {{/web-react/layout/default}} diff --git a/apps/demo/partials/web-react/index.hbs b/apps/demo/partials/web-react/index.hbs index aabbdf6f5a..70e385a499 100644 --- a/apps/demo/partials/web-react/index.hbs +++ b/apps/demo/partials/web-react/index.hbs @@ -1,11 +1,11 @@ -{{#> web-react/layout/default page="components"}} +{{#> web-react/layout/default page="components" title="Components"}} - {{#> section title="Components"}} - {{#> boxList}} - {{#each @web_react_components as |component|}} - {{> component component=component path="src/components"}} - {{/each}} - {{/boxList}} - {{/section}} + {{> web-react/tabs }} + + {{#> cardList}} + {{#each @web_react_components as |component|}} + {{> card content=component.title path="src/components" urlname=component.name}} + {{/each}} + {{/cardList}} {{/web-react/layout/default}} diff --git a/apps/demo/partials/web-react/layout/default.hbs b/apps/demo/partials/web-react/layout/default.hbs index 4268cdaa9a..55085376b6 100644 --- a/apps/demo/partials/web-react/layout/default.hbs +++ b/apps/demo/partials/web-react/layout/default.hbs @@ -1,19 +1,20 @@ -{{#> layout/base package="Spirit Web React" }} +{{#> layout/base package="Web React" packageUrl="/packages/web-react/" title=title}} {{#*inline "scripts"}} - + {{/inline}} - {{> header package="Web React" }} + {{> header}} + {{> cover}} -
    +
    - {{> web-react/tabs }} - {{> @partial-block }}
    + {{> footer}} + {{/layout/base }} diff --git a/apps/demo/partials/web-react/layout/plain.hbs b/apps/demo/partials/web-react/layout/plain.hbs deleted file mode 100644 index 183dcd3ae8..0000000000 --- a/apps/demo/partials/web-react/layout/plain.hbs +++ /dev/null @@ -1,9 +0,0 @@ -{{#> layout/plain }} - - {{#*inline "scripts"}} - - {{/inline}} - - {{> @partial-block }} - -{{/layout/plain}} diff --git a/apps/demo/partials/web-react/tabs.hbs b/apps/demo/partials/web-react/tabs.hbs index 776dd42fda..67aa2f3327 100644 --- a/apps/demo/partials/web-react/tabs.hbs +++ b/apps/demo/partials/web-react/tabs.hbs @@ -1,8 +1,20 @@ - +
    + +
    +
    +
    + + + +
    +
    +
    + +
    diff --git a/apps/demo/partials/web/assets/spiritLogoInverted.hbs b/apps/demo/partials/web/assets/spiritLogoInverted.hbs new file mode 100644 index 0000000000..e7a805d3f8 --- /dev/null +++ b/apps/demo/partials/web/assets/spiritLogoInverted.hbs @@ -0,0 +1,6 @@ +Spirit diff --git a/apps/demo/partials/web/helpers.hbs b/apps/demo/partials/web/helpers.hbs index 2200afb2ff..db14687bfe 100644 --- a/apps/demo/partials/web/helpers.hbs +++ b/apps/demo/partials/web/helpers.hbs @@ -1,17 +1,13 @@ -{{#> web/layout/default page="helpers"}} +{{#> web/layout/default page="helpers" title="Helpers"}} - {{#> section title="Helpers"}} + {{> web/tabs}} - {{#> boxList}} - - {{#each @helpers as |helper|}} + {{#> cardList}} + {{#each @helpers as |helper|}}
  • - {{helper.title}} + {{helper.title}}
    • - {{/each}} - - {{/boxList}} - - {{/section}} + {{/each}} + {{/cardList}} {{/web/layout/default}} diff --git a/apps/demo/partials/web/icons.hbs b/apps/demo/partials/web/icons.hbs index 0ef6447df8..077e2f485d 100644 --- a/apps/demo/partials/web/icons.hbs +++ b/apps/demo/partials/web/icons.hbs @@ -1,20 +1,16 @@ -{{#> web/layout/default page="icons"}} +{{#> web/layout/default page="icons" title="Icons"}} - {{#> section title="Icons"}} + {{> web/tabs}} - {{#> tileList}} - - {{#each @icons as |icon|}} -
  • - - - -

    {{icon}}

    -
    • - {{/each}} - - {{/tileList}} - - {{/section}} + {{/web/layout/default}} diff --git a/apps/demo/partials/web/index.hbs b/apps/demo/partials/web/index.hbs index d81c2ffa94..b31e3ab637 100644 --- a/apps/demo/partials/web/index.hbs +++ b/apps/demo/partials/web/index.hbs @@ -1,11 +1,11 @@ -{{#> web/layout/default page="components"}} +{{#> web/layout/default page="components" title="Components"}} - {{#>section title="Components"}} - {{#> boxList}} - {{#each @web_components as |component|}} - {{> component component=component path="src/scss/components"}} - {{/each}} - {{/boxList}} - {{/section}} + {{> web/tabs}} + + {{#> cardList}} + {{#each @web_components as |component|}} + {{> card content=component.title path="src/scss/components" urlname=component.name}} + {{/each}} + {{/cardList}} {{/web/layout/default}} diff --git a/apps/demo/partials/web/layout/default.hbs b/apps/demo/partials/web/layout/default.hbs index 8e407d6e87..27b9ff1bcf 100644 --- a/apps/demo/partials/web/layout/default.hbs +++ b/apps/demo/partials/web/layout/default.hbs @@ -1,19 +1,16 @@ -{{#> layout/base package="Spirit Web"}} +{{#> layout/base package="Web" packageUrl="/packages/web/" title=title}} - {{> header package="Web"}} + {{> header}} + {{> cover}} - {{#*inline "scripts"}} - - {{/inline}} - -
    +
    - {{> web/tabs}} - {{> @partial-block}}
    + {{> footer}} + {{/layout/base}} diff --git a/apps/demo/partials/web/layout/plain.hbs b/apps/demo/partials/web/layout/plain.hbs deleted file mode 100644 index 0244decafe..0000000000 --- a/apps/demo/partials/web/layout/plain.hbs +++ /dev/null @@ -1,9 +0,0 @@ -{{#> layout/plain}} - - {{#*inline "scripts"}} - - {{/inline}} - - {{> @partial-block}} - -{{/layout/plain}} diff --git a/apps/demo/partials/web/tabs.hbs b/apps/demo/partials/web/tabs.hbs index e31e5fc762..35351cbf7e 100644 --- a/apps/demo/partials/web/tabs.hbs +++ b/apps/demo/partials/web/tabs.hbs @@ -1,11 +1,24 @@ - +
    + +
    +
    +
    + + + +
    +
    + +
    + +
    diff --git a/index.html b/index.html index 266ae3f009..ffff536291 100644 --- a/index.html +++ b/index.html @@ -1,24 +1,63 @@ -{{#> layout/default }} - -
    - -

    Packages

    - - -
    - -{{/layout/default }} +{{#> layout/base }} + + {{> header}} + +
    +
    + +

    + Spirit Design System +

    +

    + Development Preview +

    + +
    + + Docs + + + GitHub + +
    + +
    +
    + +
    +
    +
    + +

    Packages

    + +
      +
    • + Web +
      • +
    • + Web React +
      • + {{!-- Hide link to the Twig implementation in production. Twig demo app only runs on localhost, we don't deploy it anywhere. --}} + {{#if @is_development}} +
    • + Web Twig +
      • + {{/if}} +
    • + Form Validations +
      • +
    + +
    +
    +
    + + {{> footer}} + +{{/layout/base }} diff --git a/packages/demo/scss/index.scss b/packages/demo/scss/index.scss index 54795d1b8d..6cfa931e2c 100644 --- a/packages/demo/scss/index.scss +++ b/packages/demo/scss/index.scss @@ -1,36 +1,67 @@ -.docs-TileLink { - display: block; - padding: 1rem; - border: 2px solid #e9e9e9; - border-radius: 8px; - font-size: 1.125rem; /* Based on the `body-2-semibold` style. */ - font-weight: 600; - line-height: 1.55; +// 1. Expand the page to fill the viewport height to be ready for various themes. +// 2. Make the footer sticky. + +html { + height: 100%; // 1. } -.docs-TileLink:hover, -.docs-TileLink:focus { - border-color: #dbdbdb; +body { + min-height: 100%; // 1. + display: grid; // 2. + grid-template-rows: auto auto 1fr auto; } -.docs-TileLink:active { - border-color: #d4d4d4; +.docs-Card { + display: block; + padding: var(--spirit-space-700); + border: var(--spirit-border-width-100) solid var(--spirit-color-border-interactive-default); + border-radius: var(--spirit-radius-300); + background-color: var(--spirit-color-background-primary); + font-size: var(--spirit-typography-body-large-semibold-mobile-font-size); + font-weight: var(--spirit-typography-body-large-semibold-mobile-font-weight); + line-height: var(--spirit-typography-body-large-semibold-mobile-line-height); + transition: box-shadow 125ms; + + @media (hover: hover) { + &:hover { + border-color: var(--spirit-color-border-interactive-hover); + text-decoration: none; + box-shadow: var(--spirit-shadow-100); + } + } + + &:active { + border-color: var(--spirit-color-border-interactive-active); + text-decoration: none; + } + + @media (min-width: 768px) { + padding: var(--spirit-space-900); + } } .docs-Heading { display: flex; flex-wrap: wrap; - gap: 0.5rem 0.75rem; + gap: var(--spirit-space-500) var(--spirit-space-600); align-items: baseline; - margin-bottom: 1.5rem; - font-size: 1.25rem; /* Based on the `heading-small-bold` style. */ - font-weight: 700; - line-height: 1.2; + margin-bottom: var(--spirit-space-900); + font-size: var(--spirit-typography-heading-small-bold-mobile-font-size); + font-weight: var(--spirit-typography-heading-small-bold-mobile-font-weight); + line-height: var(--spirit-typography-heading-small-bold-mobile-line-height); + + @media (min-width: 768px) { + font-size: var(--spirit-typography-heading-small-bold-tablet-font-size); + } + + @media (min-width: 1280px) { + font-size: var(--spirit-typography-heading-small-bold-desktop-font-size); + } } .docs-Stack { display: grid; - row-gap: 1rem; + row-gap: var(--spirit-space-700); } .docs-Stack--start { @@ -42,17 +73,17 @@ } .docs-Box { - min-height: 2rem; - padding: 1rem; + min-height: var(--spirit-space-1000); + padding: var(--spirit-space-700); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; - color: #fff; - background: #0b1c21; + color: var(--spirit-color-neutral-content-subtle); + background: var(--spirit-color-neutral-background-basic); } .docs-Box--small { - font-size: 0.75rem; + font-size: var(--spirit-typography-body-small-regular-mobile-font-size); text-align: center; white-space: normal; } @@ -63,35 +94,16 @@ justify-content: center; align-items: center; width: 100%; - padding: 3rem 1.5rem; + padding: var(--spirit-space-1200) var(--spirit-space-900); text-align: center; - gap: 2rem; - border: 1px dashed #b9b9b9; - background: #fff; + gap: var(--spirit-space-1000); + border: var(--spirit-border-width-200) dashed var(--spirit-color-border-basic); + border-radius: var(--spirit-radius-200); + background: var(--spirit-color-background-primary); } .docs-Placeholder__text { display: flex; flex-direction: column; - gap: 0.5rem; -} - -@media (min-width: 768px) { - .docs-TileLink { - padding: 1.5rem; - } - - .docs-Heading { - font-size: 1.5rem; - } - - .docs-Box--small { - font-size: 0.875rem; - } -} - -@media (min-width: 1280px) { - .docs-Box--small { - font-size: 1rem; - } + gap: var(--spirit-space-500); } diff --git a/packages/form-validations/index.html b/packages/form-validations/index.html index 2dd1133a32..5108444dff 100644 --- a/packages/form-validations/index.html +++ b/packages/form-validations/index.html @@ -1,4 +1,4 @@ -{{#> layout/default package="Form Validations"}} +{{#> form-validations/layout/default package="Form Validations" title="Form Validations" }} -{{/web/layout/plain }} +{{/web/layout/default }} diff --git a/packages/web/src/scss/components/Flex/index.html b/packages/web/src/scss/components/Flex/index.html index 791d49d49d..5f913a35d6 100644 --- a/packages/web/src/scss/components/Flex/index.html +++ b/packages/web/src/scss/components/Flex/index.html @@ -1,4 +1,4 @@ -{{#> web/layout/plain }} +{{#> web/layout/default title="Flex" parentPageName="Components" }}

    Row Layout

    @@ -182,4 +182,4 @@

    Responsive Spacing

    -{{/web/layout/plain }} +{{/web/layout/default }} diff --git a/packages/web/src/scss/components/Footer/index.html b/packages/web/src/scss/components/Footer/index.html index 7a64e9f8f0..29ba030dd9 100644 --- a/packages/web/src/scss/components/Footer/index.html +++ b/packages/web/src/scss/components/Footer/index.html @@ -1,4 +1,4 @@ -{{#> web/layout/plain }} +{{#> web/layout/default title="Footer" parentPageName="Components" }}

    Basic Usage

    @@ -581,4 +581,4 @@

    -{{/web/layout/plain }} +{{/web/layout/default }} diff --git a/packages/web/src/scss/components/Grid/index.html b/packages/web/src/scss/components/Grid/index.html index 0f12573772..791a461f45 100644 --- a/packages/web/src/scss/components/Grid/index.html +++ b/packages/web/src/scss/components/Grid/index.html @@ -1,4 +1,4 @@ -{{#> web/layout/plain }} +{{#> web/layout/default title="Grid" parentPageName="Components" }}

    Equal Columns

    @@ -397,4 +397,4 @@

    Responsive Alignment

    -{{/web/layout/plain }} +{{/web/layout/default }} diff --git a/packages/web/src/scss/components/Header/index.html b/packages/web/src/scss/components/Header/index.html index 944ce67b4b..ca373e9da9 100644 --- a/packages/web/src/scss/components/Header/index.html +++ b/packages/web/src/scss/components/Header/index.html @@ -1,4 +1,4 @@ -{{#> web/layout/plain }} +{{#> web/layout/default title="Header" parentPageName="Components" }}
    @@ -433,4 +433,4 @@

    Experimental RTL Support

    -{{/web/layout/plain }} +{{/web/layout/default }} diff --git a/packages/web/src/scss/components/Item/index.html b/packages/web/src/scss/components/Item/index.html index be07040d9a..4398684693 100644 --- a/packages/web/src/scss/components/Item/index.html +++ b/packages/web/src/scss/components/Item/index.html @@ -1,4 +1,4 @@ -{{#> web/layout/plain }} +{{#> web/layout/default title="Item" parentPageName="Components" }}

    Default

    @@ -147,4 +147,4 @@

    Radio Item

    -{{/web/layout/plain }} +{{/web/layout/default }} diff --git a/packages/web/src/scss/components/Modal/index.html b/packages/web/src/scss/components/Modal/index.html index fc75e39339..54689fe496 100644 --- a/packages/web/src/scss/components/Modal/index.html +++ b/packages/web/src/scss/components/Modal/index.html @@ -1,4 +1,4 @@ -{{#> web/layout/plain }} +{{#> web/layout/default title="Modal" parentPageName="Components" }}