diff --git a/apps/demo/partials/web/helpers.hbs b/apps/demo/partials/web/helpers.hbs index db14687bfe..1451b71350 100644 --- a/apps/demo/partials/web/helpers.hbs +++ b/apps/demo/partials/web/helpers.hbs @@ -4,8 +4,8 @@ {{#> cardList}} {{#each @helpers as |helper|}} -
  • - {{helper.title}} +
  • + {{helper.title}}
    • {{/each}} {{/cardList}} diff --git a/apps/demo/partials/web/tabs.hbs b/apps/demo/partials/web/tabs.hbs index 35351cbf7e..9219747408 100644 --- a/apps/demo/partials/web/tabs.hbs +++ b/apps/demo/partials/web/tabs.hbs @@ -1,4 +1,4 @@ -
    +
    diff --git a/apps/web-twig-demo/templates/assets/spiritLogoInverted.html.twig b/apps/web-twig-demo/templates/assets/spiritLogoInverted.html.twig new file mode 100644 index 0000000000..e7a805d3f8 --- /dev/null +++ b/apps/web-twig-demo/templates/assets/spiritLogoInverted.html.twig @@ -0,0 +1,6 @@ +Spirit diff --git a/apps/web-twig-demo/templates/default.html.twig b/apps/web-twig-demo/templates/default.html.twig index 62336186cf..caf8a495d0 100644 --- a/apps/web-twig-demo/templates/default.html.twig +++ b/apps/web-twig-demo/templates/default.html.twig @@ -1,20 +1,21 @@ {% extends 'layout/default.html.twig' %} -{% block content %} +{% block title %}Components{% endblock%} -
    +{% block content %} -

    Components

    -
      + {% include 'partials/tabs.html.twig' %} - {% for component in components %} -
    • - {{ component }} -
      • - {% endfor %} + -
    + {% for component in components %} +
  • + + {{ component }} + +
    • + {% endfor %} -
    + {% endblock %} diff --git a/apps/web-twig-demo/templates/helpers.html.twig b/apps/web-twig-demo/templates/helpers.html.twig index 9724c52eff..c4c3c10022 100644 --- a/apps/web-twig-demo/templates/helpers.html.twig +++ b/apps/web-twig-demo/templates/helpers.html.twig @@ -1,20 +1,21 @@ {% extends 'layout/default.html.twig' %} -{% block content %} +{% block title %}Helpers{% endblock%} -
    +{% block content %} -

    Helpers

    - + {% for helper in helpers %} +
  • + + {{ helper | replace({'-': ' '}) | title }} + +
    • + {% endfor %} -
    + {% endblock %} diff --git a/apps/web-twig-demo/templates/layout/base.html.twig b/apps/web-twig-demo/templates/layout/base.html.twig index 97901db60b..0aeea3ac1a 100644 --- a/apps/web-twig-demo/templates/layout/base.html.twig +++ b/apps/web-twig-demo/templates/layout/base.html.twig @@ -3,7 +3,10 @@ - Spirit Web Twig — Development Preview + + + {%- if block('title') is defined %}{% block title %}{% endblock %} —{% endif %} Web Twig — Spirit Design System + diff --git a/apps/web-twig-demo/templates/layout/default.html.twig b/apps/web-twig-demo/templates/layout/default.html.twig index 3ef5c55e89..787c85564e 100644 --- a/apps/web-twig-demo/templates/layout/default.html.twig +++ b/apps/web-twig-demo/templates/layout/default.html.twig @@ -1,17 +1,42 @@ {% extends 'layout/base.html.twig' %} - {% block body %} - {% block header %}{% include 'partials/header.html.twig' %}{% endblock %} + {% set title -%} + {% block title %}{% endblock %} + {%- endset %} + + {% set parentPageName -%} + {% block parentPageName %}{% endblock %} + {%- endset %} + + {% set parentPageUrl = '.' %} + {% if parentPageName == 'Components' %} + {% set parentPageUrl = '/' %} + {% endif %} + + {% set isUnstable -%} + {% block isUnstable %}{% endblock %} + {%- endset %} -
    -
    + {% block header %} + {% include 'partials/header.html.twig' %} + {% include 'partials/cover.html.twig' with { isUnstable, parentPageName, parentPageUrl, title } only %} + {% endblock %} - {% include 'partials/tabs.html.twig' %} + {# Pre-render page content due to TwigX limitations. #} + {%- set renderedContent -%} + {% block content %}{% endblock %} + {%- endset -%} - {% block content %}{% endblock %} +
    + -
    + {{ renderedContent }} + +
    + + {% include 'partials/footer.html.twig' only %} + {% endblock %} diff --git a/apps/web-twig-demo/templates/layout/plain.html.twig b/apps/web-twig-demo/templates/layout/plain.html.twig deleted file mode 100644 index a9460ce42d..0000000000 --- a/apps/web-twig-demo/templates/layout/plain.html.twig +++ /dev/null @@ -1,11 +0,0 @@ -{% extends 'layout/base.html.twig' %} - -{% block body %} -
    -
    - - {% block content %}{% endblock %} - -
    -
    -{% endblock %} diff --git a/apps/web-twig-demo/templates/partials/cover.html.twig b/apps/web-twig-demo/templates/partials/cover.html.twig new file mode 100644 index 0000000000..e59712ad6b --- /dev/null +++ b/apps/web-twig-demo/templates/partials/cover.html.twig @@ -0,0 +1,39 @@ +
    + + +

    + {{ title }} + + {% if isUnstable %} + Unstable + {% endif %} +

    + + +
      +
    1. + Spirit + +
      2. +
    2. + Web Twig + +
      3. + {% if parentPageName %} +
    3. + {{ parentPageName }} + +
      4. + {% endif %} +
    4. + {# Use instead of so `href` can be empty (= current URL): #} + {{ title }} +
      5. +
    +     + +     +
    diff --git a/apps/web-twig-demo/templates/partials/footer.html.twig b/apps/web-twig-demo/templates/partials/footer.html.twig new file mode 100644 index 0000000000..c942f5323d --- /dev/null +++ b/apps/web-twig-demo/templates/partials/footer.html.twig @@ -0,0 +1,7 @@ +
    + + + © Alma Career Oy and its subsidiaries + + +
    diff --git a/apps/web-twig-demo/templates/partials/header.html.twig b/apps/web-twig-demo/templates/partials/header.html.twig index 70b29dee29..b8279bfa87 100644 --- a/apps/web-twig-demo/templates/partials/header.html.twig +++ b/apps/web-twig-demo/templates/partials/header.html.twig @@ -1,17 +1,48 @@ -
    -
    +
    -

    Spirit Design System

    -

    Web Twig — Development Preview

    + + {% include 'assets/spiritLogoInverted.html.twig' %} + -
    - - GitHub Project - - - Spirit Docs → - -
    + -
    -
    + + + + Web + + + Web React + + + Web Twig + + + Form Validations + + + + + + + + + + + + + Web + + + Web React + + + Web Twig + + + Form Validations + + + + + diff --git a/apps/web-twig-demo/templates/partials/tabs.html.twig b/apps/web-twig-demo/templates/partials/tabs.html.twig index 408edd1340..d7342ce96e 100644 --- a/apps/web-twig-demo/templates/partials/tabs.html.twig +++ b/apps/web-twig-demo/templates/partials/tabs.html.twig @@ -1,16 +1,30 @@ {% set routeName = app.request.get('_route') %} - +{% set isComponentsSelected = routeName == 'index' %} +{% set isIconsSelected = routeName == 'icons_index' %} +{% set isHelpersSelected = routeName == 'helpers_index' %} +{% set isValidationsSelected = routeName == 'validations_index' %} + +
    + + + + Components + + + Icons + + + Helpers + + + Validations + + + +
    diff --git a/apps/web-twig-demo/templates/validations.html.twig b/apps/web-twig-demo/templates/validations.html.twig index 7481fe7f7a..d08e58be0e 100644 --- a/apps/web-twig-demo/templates/validations.html.twig +++ b/apps/web-twig-demo/templates/validations.html.twig @@ -1,46 +1,47 @@ {% extends 'layout/default.html.twig' %} +{% block title %}Validations{% endblock%} + {% block content %} -
    + {% include 'partials/tabs.html.twig' %} - - -

    Real-World examples

    + + +

    Real-World examples

    -
    - - {% set usernameInputProps = { "data-spirit-required-message": "Please choose a username" }%} - - {% set zipcodeInputProps = { "data-spirit-pattern-message": "Invalid ZIP code", "data-spirit-pattern": "/d{5}|\d{3}[ ]?\d{2}/" }%} - - {% set ageInputProps = { "data-spirit-min-message": "You must be at least 14-years-old", }%} - - {% set passwordInputProps = { - "data-spirit-required-message": "Please choose a password", - "data-spirit-pattern": "/^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{8,}$/", - "data-spirit-pattern-message": "Minimum 8 characters, at least one uppercase letter, one lowercase letter and one number" - } %} - - {% set retypepasswordInputProps = { - "data-spirit-equals": "#password", - "data-spirit-equals-message": "Passwords don't match", - } %} - - {% set emailInputProps = { "data-spirit-required-message": "Please enter your email", } %} - - {% set phoneInputProps = { "data-spirit-pattern": "/^(?:\+\d{3}\s?)?(\d{3}\s?){3}$/", "data-spirit-pattern-message": "Invalid phone number", } %} - - -
    - -
    -     -
    -     -     -
    +
    + + {% set usernameInputProps = { "data-spirit-required-message": "Please choose a username" }%} + + {% set zipcodeInputProps = { "data-spirit-pattern-message": "Invalid ZIP code", "data-spirit-pattern": "/d{5}|\d{3}[ ]?\d{2}/" }%} + + {% set ageInputProps = { "data-spirit-min-message": "You must be at least 14-years-old", }%} + + {% set passwordInputProps = { + "data-spirit-required-message": "Please choose a password", + "data-spirit-pattern": "/^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{8,}$/", + "data-spirit-pattern-message": "Minimum 8 characters, at least one uppercase letter, one lowercase letter and one number" + } %} + + {% set retypepasswordInputProps = { + "data-spirit-equals": "#password", + "data-spirit-equals-message": "Passwords don't match", + } %} + + {% set emailInputProps = { "data-spirit-required-message": "Please enter your email", } %} + + {% set phoneInputProps = { "data-spirit-pattern": "/^(?:\+\d{3}\s?)?(\d{3}\s?){3}$/", "data-spirit-pattern-message": "Invalid phone number", } %} + + +
    + +
    +     +
    + + -{{ encore_entry_script_tags('formValidations') }} + {{ encore_entry_script_tags('formValidations') }} {% endblock %} diff --git a/packages/web-twig/src/Resources/components/Accordion/Accordion.stories.twig b/packages/web-twig/src/Resources/components/Accordion/Accordion.stories.twig index c712c11e8e..27e3d875b7 100644 --- a/packages/web-twig/src/Resources/components/Accordion/Accordion.stories.twig +++ b/packages/web-twig/src/Resources/components/Accordion/Accordion.stories.twig @@ -1,4 +1,7 @@ -{% extends 'layout/plain.html.twig' %} +{% extends 'layout/default.html.twig' %} + +{% block title %}Accordion{% endblock %} +{% block parentPageName %}Components{% endblock %} {% block content %} diff --git a/packages/web-twig/src/Resources/components/Alert/Alert.stories.twig b/packages/web-twig/src/Resources/components/Alert/Alert.stories.twig index 78f1d2f208..16f68a3ec6 100644 --- a/packages/web-twig/src/Resources/components/Alert/Alert.stories.twig +++ b/packages/web-twig/src/Resources/components/Alert/Alert.stories.twig @@ -1,4 +1,7 @@ -{% extends 'layout/plain.html.twig' %} +{% extends 'layout/default.html.twig' %} + +{% block title %}Alert{% endblock %} +{% block parentPageName %}Components{% endblock %} {% block content %} diff --git a/packages/web-twig/src/Resources/components/Breadcrumbs/Breadcrumbs.stories.twig b/packages/web-twig/src/Resources/components/Breadcrumbs/Breadcrumbs.stories.twig index cd9f3c4244..b9b0fb2291 100644 --- a/packages/web-twig/src/Resources/components/Breadcrumbs/Breadcrumbs.stories.twig +++ b/packages/web-twig/src/Resources/components/Breadcrumbs/Breadcrumbs.stories.twig @@ -1,4 +1,7 @@ -{% extends 'layout/plain.html.twig' %} +{% extends 'layout/default.html.twig' %} + +{% block title %}Breadcrumbs{% endblock %} +{% block parentPageName %}Components{% endblock %} {% block content %} diff --git a/packages/web-twig/src/Resources/components/Button/Button.stories.twig b/packages/web-twig/src/Resources/components/Button/Button.stories.twig index d9642537c5..d93f97fb6e 100644 --- a/packages/web-twig/src/Resources/components/Button/Button.stories.twig +++ b/packages/web-twig/src/Resources/components/Button/Button.stories.twig @@ -1,4 +1,7 @@ -{% extends 'layout/plain.html.twig' %} +{% extends 'layout/default.html.twig' %} + +{% block title %}Button{% endblock %} +{% block parentPageName %}Components{% endblock %} {% block content %} diff --git a/packages/web-twig/src/Resources/components/ButtonLink/ButtonLink.stories.twig b/packages/web-twig/src/Resources/components/ButtonLink/ButtonLink.stories.twig index c74e0289c3..1ba1743c7d 100644 --- a/packages/web-twig/src/Resources/components/ButtonLink/ButtonLink.stories.twig +++ b/packages/web-twig/src/Resources/components/ButtonLink/ButtonLink.stories.twig @@ -1,4 +1,7 @@ -{% extends 'layout/plain.html.twig' %} +{% extends 'layout/default.html.twig' %} + +{% block title %}Button Link{% endblock %} +{% block parentPageName %}Components{% endblock %} {% block content %} diff --git a/packages/web-twig/src/Resources/components/Checkbox/Checkbox.stories.twig b/packages/web-twig/src/Resources/components/Checkbox/Checkbox.stories.twig index 687ec1447e..75fb12f3bb 100644 --- a/packages/web-twig/src/Resources/components/Checkbox/Checkbox.stories.twig +++ b/packages/web-twig/src/Resources/components/Checkbox/Checkbox.stories.twig @@ -1,4 +1,7 @@ -{% extends 'layout/plain.html.twig' %} +{% extends 'layout/default.html.twig' %} + +{% block title %}Checkbox{% endblock %} +{% block parentPageName %}Components{% endblock %} {% block content %} diff --git a/packages/web-twig/src/Resources/components/Collapse/Collapse.stories.twig b/packages/web-twig/src/Resources/components/Collapse/Collapse.stories.twig index 20adb0f741..da38bf9bcb 100644 --- a/packages/web-twig/src/Resources/components/Collapse/Collapse.stories.twig +++ b/packages/web-twig/src/Resources/components/Collapse/Collapse.stories.twig @@ -1,4 +1,7 @@ -{% extends 'layout/plain.html.twig' %} +{% extends 'layout/default.html.twig' %} + +{% block title %}Collapse{% endblock %} +{% block parentPageName %}Components{% endblock %} {% block content %} diff --git a/packages/web-twig/src/Resources/components/Container/Container.stories.twig b/packages/web-twig/src/Resources/components/Container/Container.stories.twig index 96f18ba3e3..46d9af302f 100644 --- a/packages/web-twig/src/Resources/components/Container/Container.stories.twig +++ b/packages/web-twig/src/Resources/components/Container/Container.stories.twig @@ -1,4 +1,7 @@ -{% extends 'layout/plain.html.twig' %} +{% extends 'layout/default.html.twig' %} + +{% block title %}Container{% endblock %} +{% block parentPageName %}Components{% endblock %} {% block content %} diff --git a/packages/web-twig/src/Resources/components/Divider/Divider.stories.twig b/packages/web-twig/src/Resources/components/Divider/Divider.stories.twig index 29af45d039..2190728413 100644 --- a/packages/web-twig/src/Resources/components/Divider/Divider.stories.twig +++ b/packages/web-twig/src/Resources/components/Divider/Divider.stories.twig @@ -1,4 +1,7 @@ -{% extends 'layout/plain.html.twig' %} +{% extends 'layout/default.html.twig' %} + +{% block title %}Divider{% endblock %} +{% block parentPageName %}Components{% endblock %} {% block content %} diff --git a/packages/web-twig/src/Resources/components/Dropdown/Dropdown.stories.twig b/packages/web-twig/src/Resources/components/Dropdown/Dropdown.stories.twig index aa02c68245..3247fe15bb 100644 --- a/packages/web-twig/src/Resources/components/Dropdown/Dropdown.stories.twig +++ b/packages/web-twig/src/Resources/components/Dropdown/Dropdown.stories.twig @@ -1,4 +1,7 @@ -{% extends 'layout/plain.html.twig' %} +{% extends 'layout/default.html.twig' %} + +{% block title %}Dropdown{% endblock %} +{% block parentPageName %}Components{% endblock %} {% block content %} diff --git a/packages/web-twig/src/Resources/components/FieldGroup/FieldGroup.stories.twig b/packages/web-twig/src/Resources/components/FieldGroup/FieldGroup.stories.twig index 8fa64c959c..77e8eb767b 100644 --- a/packages/web-twig/src/Resources/components/FieldGroup/FieldGroup.stories.twig +++ b/packages/web-twig/src/Resources/components/FieldGroup/FieldGroup.stories.twig @@ -1,4 +1,7 @@ -{% extends 'layout/plain.html.twig' %} +{% extends 'layout/default.html.twig' %} + +{% block title %}Field Group{% endblock %} +{% block parentPageName %}Components{% endblock %} {% block content %} diff --git a/packages/web-twig/src/Resources/components/FileUploader/FileUploader.stories.twig b/packages/web-twig/src/Resources/components/FileUploader/FileUploader.stories.twig index 0e9d651504..5f0f4534dd 100644 --- a/packages/web-twig/src/Resources/components/FileUploader/FileUploader.stories.twig +++ b/packages/web-twig/src/Resources/components/FileUploader/FileUploader.stories.twig @@ -1,4 +1,7 @@ -{% extends 'layout/plain.html.twig' %} +{% extends 'layout/default.html.twig' %} + +{% block title %}File Uploader{% endblock %} +{% block parentPageName %}Components{% endblock %} {% block content %} diff --git a/packages/web-twig/src/Resources/components/Grid/Grid.stories.twig b/packages/web-twig/src/Resources/components/Grid/Grid.stories.twig index 55afbed049..fbe7ab7d89 100644 --- a/packages/web-twig/src/Resources/components/Grid/Grid.stories.twig +++ b/packages/web-twig/src/Resources/components/Grid/Grid.stories.twig @@ -1,4 +1,7 @@ -{% extends 'layout/plain.html.twig' %} +{% extends 'layout/default.html.twig' %} + +{% block title %}Grid{% endblock %} +{% block parentPageName %}Components{% endblock %} {% block content %} diff --git a/packages/web-twig/src/Resources/components/Header/Header.stories.twig b/packages/web-twig/src/Resources/components/Header/Header.stories.twig index 99f4f51c7b..3b3b72476e 100644 --- a/packages/web-twig/src/Resources/components/Header/Header.stories.twig +++ b/packages/web-twig/src/Resources/components/Header/Header.stories.twig @@ -1,4 +1,7 @@ -{% extends 'layout/plain.html.twig' %} +{% extends 'layout/default.html.twig' %} + +{% block title %}Header{% endblock %} +{% block parentPageName %}Components{% endblock %} {% block content %} diff --git a/packages/web-twig/src/Resources/components/Heading/Heading.stories.twig b/packages/web-twig/src/Resources/components/Heading/Heading.stories.twig index d2b6b29257..a79622dee4 100644 --- a/packages/web-twig/src/Resources/components/Heading/Heading.stories.twig +++ b/packages/web-twig/src/Resources/components/Heading/Heading.stories.twig @@ -1,4 +1,7 @@ -{% extends 'layout/plain.html.twig' %} +{% extends 'layout/default.html.twig' %} + +{% block title %}Heading{% endblock %} +{% block parentPageName %}Components{% endblock %} {% block content %} diff --git a/packages/web-twig/src/Resources/components/Item/Item.stories.twig b/packages/web-twig/src/Resources/components/Item/Item.stories.twig index d44ea94b4f..c5ab98c7b7 100644 --- a/packages/web-twig/src/Resources/components/Item/Item.stories.twig +++ b/packages/web-twig/src/Resources/components/Item/Item.stories.twig @@ -1,4 +1,7 @@ -{% extends 'layout/plain.html.twig' %} +{% extends 'layout/default.html.twig' %} + +{% block title %}Item{% endblock %} +{% block parentPageName %}Components{% endblock %} {% block content %} diff --git a/packages/web-twig/src/Resources/components/Link/Link.stories.twig b/packages/web-twig/src/Resources/components/Link/Link.stories.twig index 15bd52957f..3cc58f9320 100644 --- a/packages/web-twig/src/Resources/components/Link/Link.stories.twig +++ b/packages/web-twig/src/Resources/components/Link/Link.stories.twig @@ -1,4 +1,7 @@ -{% extends 'layout/plain.html.twig' %} +{% extends 'layout/default.html.twig' %} + +{% block title %}Link{% endblock %} +{% block parentPageName %}Components{% endblock %} {% block content %} diff --git a/packages/web-twig/src/Resources/components/Modal/Modal.stories.twig b/packages/web-twig/src/Resources/components/Modal/Modal.stories.twig index a5591d33d2..2250857ddc 100644 --- a/packages/web-twig/src/Resources/components/Modal/Modal.stories.twig +++ b/packages/web-twig/src/Resources/components/Modal/Modal.stories.twig @@ -1,4 +1,7 @@ -{% extends 'layout/plain.html.twig' %} +{% extends 'layout/default.html.twig' %} + +{% block title %}Modal{% endblock %} +{% block parentPageName %}Components{% endblock %} {% block content %} diff --git a/packages/web-twig/src/Resources/components/Pagination/Pagination.stories.twig b/packages/web-twig/src/Resources/components/Pagination/Pagination.stories.twig index a0fc65f40a..eb29570957 100644 --- a/packages/web-twig/src/Resources/components/Pagination/Pagination.stories.twig +++ b/packages/web-twig/src/Resources/components/Pagination/Pagination.stories.twig @@ -1,4 +1,7 @@ -{% extends 'layout/plain.html.twig' %} +{% extends 'layout/default.html.twig' %} + +{% block title %}Pagination{% endblock %} +{% block parentPageName %}Components{% endblock %} {% block content %} diff --git a/packages/web-twig/src/Resources/components/Pill/Pill.stories.twig b/packages/web-twig/src/Resources/components/Pill/Pill.stories.twig index 3e71741d01..3491e753f3 100644 --- a/packages/web-twig/src/Resources/components/Pill/Pill.stories.twig +++ b/packages/web-twig/src/Resources/components/Pill/Pill.stories.twig @@ -1,4 +1,7 @@ -{% extends 'layout/plain.html.twig' %} +{% extends 'layout/default.html.twig' %} + +{% block title %}Pill{% endblock %} +{% block parentPageName %}Components{% endblock %} {% block content %} diff --git a/packages/web-twig/src/Resources/components/Radio/Radio.stories.twig b/packages/web-twig/src/Resources/components/Radio/Radio.stories.twig index b4c976bd45..60dee2f301 100644 --- a/packages/web-twig/src/Resources/components/Radio/Radio.stories.twig +++ b/packages/web-twig/src/Resources/components/Radio/Radio.stories.twig @@ -1,4 +1,7 @@ -{% extends 'layout/plain.html.twig' %} +{% extends 'layout/default.html.twig' %} + +{% block title %}Radio{% endblock %} +{% block parentPageName %}Components{% endblock %} {% block content %} diff --git a/packages/web-twig/src/Resources/components/ScrollView/ScrollView.stories.twig b/packages/web-twig/src/Resources/components/ScrollView/ScrollView.stories.twig index e1c8aac1b6..b650e4355f 100644 --- a/packages/web-twig/src/Resources/components/ScrollView/ScrollView.stories.twig +++ b/packages/web-twig/src/Resources/components/ScrollView/ScrollView.stories.twig @@ -1,4 +1,7 @@ -{% extends 'layout/plain.html.twig' %} +{% extends 'layout/default.html.twig' %} + +{% block title %}Scroll View{% endblock %} +{% block parentPageName %}Components{% endblock %} {% block content %} diff --git a/packages/web-twig/src/Resources/components/Select/Select.stories.twig b/packages/web-twig/src/Resources/components/Select/Select.stories.twig index 4a4c6009d6..73f596f50d 100644 --- a/packages/web-twig/src/Resources/components/Select/Select.stories.twig +++ b/packages/web-twig/src/Resources/components/Select/Select.stories.twig @@ -1,4 +1,7 @@ -{% extends 'layout/plain.html.twig' %} +{% extends 'layout/default.html.twig' %} + +{% block title %}Select{% endblock %} +{% block parentPageName %}Components{% endblock %} {% block content %} diff --git a/packages/web-twig/src/Resources/components/Spinner/Spinner.stories.twig b/packages/web-twig/src/Resources/components/Spinner/Spinner.stories.twig index 351ac91584..c8cd615862 100644 --- a/packages/web-twig/src/Resources/components/Spinner/Spinner.stories.twig +++ b/packages/web-twig/src/Resources/components/Spinner/Spinner.stories.twig @@ -1,4 +1,7 @@ -{% extends 'layout/plain.html.twig' %} +{% extends 'layout/default.html.twig' %} + +{% block title %}Spinner{% endblock %} +{% block parentPageName %}Components{% endblock %} {% block content %} diff --git a/packages/web-twig/src/Resources/components/Stack/Stack.stories.twig b/packages/web-twig/src/Resources/components/Stack/Stack.stories.twig index d5cbc3b003..3843b80434 100644 --- a/packages/web-twig/src/Resources/components/Stack/Stack.stories.twig +++ b/packages/web-twig/src/Resources/components/Stack/Stack.stories.twig @@ -1,4 +1,7 @@ -{% extends 'layout/plain.html.twig' %} +{% extends 'layout/default.html.twig' %} + +{% block title %}Stack{% endblock %} +{% block parentPageName %}Components{% endblock %} {% block content %} diff --git a/packages/web-twig/src/Resources/components/Tabs/Tabs.stories.twig b/packages/web-twig/src/Resources/components/Tabs/Tabs.stories.twig index a803b973ff..ffd1c35b6f 100644 --- a/packages/web-twig/src/Resources/components/Tabs/Tabs.stories.twig +++ b/packages/web-twig/src/Resources/components/Tabs/Tabs.stories.twig @@ -1,4 +1,7 @@ -{% extends 'layout/plain.html.twig' %} +{% extends 'layout/default.html.twig' %} + +{% block title %}Tabs{% endblock %} +{% block parentPageName %}Components{% endblock %} {% block content %} diff --git a/packages/web-twig/src/Resources/components/Tag/Tag.stories.twig b/packages/web-twig/src/Resources/components/Tag/Tag.stories.twig index e74ef67188..69e673ca88 100644 --- a/packages/web-twig/src/Resources/components/Tag/Tag.stories.twig +++ b/packages/web-twig/src/Resources/components/Tag/Tag.stories.twig @@ -1,4 +1,7 @@ -{% extends 'layout/plain.html.twig' %} +{% extends 'layout/default.html.twig' %} + +{% block title %}Tag{% endblock %} +{% block parentPageName %}Components{% endblock %} {% block content %} diff --git a/packages/web-twig/src/Resources/components/Text/Text.stories.twig b/packages/web-twig/src/Resources/components/Text/Text.stories.twig index 4e2843bcba..27f8e66cb7 100644 --- a/packages/web-twig/src/Resources/components/Text/Text.stories.twig +++ b/packages/web-twig/src/Resources/components/Text/Text.stories.twig @@ -1,4 +1,7 @@ -{% extends 'layout/plain.html.twig' %} +{% extends 'layout/default.html.twig' %} + +{% block title %}Text{% endblock %} +{% block parentPageName %}Components{% endblock %} {% block content %} diff --git a/packages/web-twig/src/Resources/components/TextArea/TextArea.stories.twig b/packages/web-twig/src/Resources/components/TextArea/TextArea.stories.twig index 22b28ad836..f0ebec40df 100644 --- a/packages/web-twig/src/Resources/components/TextArea/TextArea.stories.twig +++ b/packages/web-twig/src/Resources/components/TextArea/TextArea.stories.twig @@ -1,4 +1,7 @@ -{% extends 'layout/plain.html.twig' %} +{% extends 'layout/default.html.twig' %} + +{% block title %}Text Area{% endblock %} +{% block parentPageName %}Components{% endblock %} {% block content %} diff --git a/packages/web-twig/src/Resources/components/TextField/TextField.stories.twig b/packages/web-twig/src/Resources/components/TextField/TextField.stories.twig index 560f0e664d..27e91c364e 100644 --- a/packages/web-twig/src/Resources/components/TextField/TextField.stories.twig +++ b/packages/web-twig/src/Resources/components/TextField/TextField.stories.twig @@ -1,4 +1,7 @@ -{% extends 'layout/plain.html.twig' %} +{% extends 'layout/default.html.twig' %} + +{% block title %}Text Field{% endblock %} +{% block parentPageName %}Components{% endblock %} {% block content %} diff --git a/packages/web-twig/src/Resources/components/Toast/Toast.stories.twig b/packages/web-twig/src/Resources/components/Toast/Toast.stories.twig index 56d0abb390..3c76a3fead 100644 --- a/packages/web-twig/src/Resources/components/Toast/Toast.stories.twig +++ b/packages/web-twig/src/Resources/components/Toast/Toast.stories.twig @@ -1,4 +1,7 @@ -{% extends 'layout/plain.html.twig' %} +{% extends 'layout/default.html.twig' %} + +{% block title %}Toast{% endblock %} +{% block parentPageName %}Components{% endblock %} {% block content %} diff --git a/packages/web-twig/src/Resources/components/Tooltip/Tooltip.stories.twig b/packages/web-twig/src/Resources/components/Tooltip/Tooltip.stories.twig index e57d8de551..3d2a8705cd 100644 --- a/packages/web-twig/src/Resources/components/Tooltip/Tooltip.stories.twig +++ b/packages/web-twig/src/Resources/components/Tooltip/Tooltip.stories.twig @@ -1,4 +1,7 @@ -{% extends 'layout/plain.html.twig' %} +{% extends 'layout/default.html.twig' %} + +{% block title %}Tooltip{% endblock %} +{% block parentPageName %}Components{% endblock %} {% block content %} diff --git a/packages/web-twig/src/Resources/components/UNSTABLE_ActionLayout/UNSTABLE_ActionLayout.stories.twig b/packages/web-twig/src/Resources/components/UNSTABLE_ActionLayout/UNSTABLE_ActionLayout.stories.twig index d27f54607b..d2905b5a4f 100644 --- a/packages/web-twig/src/Resources/components/UNSTABLE_ActionLayout/UNSTABLE_ActionLayout.stories.twig +++ b/packages/web-twig/src/Resources/components/UNSTABLE_ActionLayout/UNSTABLE_ActionLayout.stories.twig @@ -1,4 +1,8 @@ -{% extends 'layout/plain.html.twig' %} +{% extends 'layout/default.html.twig' %} + +{% block title %}Action Layout{% endblock %} +{% block isUnstable %}true{% endblock %} +{% block parentPageName %}Components{% endblock %} {% block content %} diff --git a/packages/web-twig/src/Resources/components/UNSTABLE_EmptyState/UNSTABLE_EmptyState.stories.twig b/packages/web-twig/src/Resources/components/UNSTABLE_EmptyState/UNSTABLE_EmptyState.stories.twig index 24aa29fa37..2988e9c99f 100644 --- a/packages/web-twig/src/Resources/components/UNSTABLE_EmptyState/UNSTABLE_EmptyState.stories.twig +++ b/packages/web-twig/src/Resources/components/UNSTABLE_EmptyState/UNSTABLE_EmptyState.stories.twig @@ -1,4 +1,8 @@ -{% extends 'layout/plain.html.twig' %} +{% extends 'layout/default.html.twig' %} + +{% block title %}Empty State{% endblock %} +{% block isUnstable %}true{% endblock %} +{% block parentPageName %}Components{% endblock %} {% block content %} diff --git a/packages/web-twig/src/Resources/helpers/accessibility/accessibility.stories.twig b/packages/web-twig/src/Resources/helpers/accessibility/accessibility.stories.twig index a68b5ffb73..730af680c7 100644 --- a/packages/web-twig/src/Resources/helpers/accessibility/accessibility.stories.twig +++ b/packages/web-twig/src/Resources/helpers/accessibility/accessibility.stories.twig @@ -1,4 +1,7 @@ -{% extends 'layout/plain.html.twig' %} +{% extends 'layout/default.html.twig' %} + +{% block title %}Accessibility{% endblock %} +{% block parentPageName %}Helpers{% endblock %} {% block content %} diff --git a/packages/web-twig/src/Resources/helpers/animations/animations.stories.twig b/packages/web-twig/src/Resources/helpers/animations/animations.stories.twig index c553dbd4f0..c7e787ed0a 100644 --- a/packages/web-twig/src/Resources/helpers/animations/animations.stories.twig +++ b/packages/web-twig/src/Resources/helpers/animations/animations.stories.twig @@ -1,4 +1,7 @@ -{% extends 'layout/plain.html.twig' %} +{% extends 'layout/default.html.twig' %} + +{% block title %}Animations{% endblock %} +{% block parentPageName %}Helpers{% endblock %} {% block content %} diff --git a/packages/web-twig/src/Resources/helpers/breakout/breakout.stories.twig b/packages/web-twig/src/Resources/helpers/breakout/breakout.stories.twig index 1ff2e31863..a1f8068fe4 100644 --- a/packages/web-twig/src/Resources/helpers/breakout/breakout.stories.twig +++ b/packages/web-twig/src/Resources/helpers/breakout/breakout.stories.twig @@ -1,4 +1,7 @@ -{% extends 'layout/plain.html.twig' %} +{% extends 'layout/default.html.twig' %} + +{% block title %}Breakout{% endblock %} +{% block parentPageName %}Helpers{% endblock %} {% block content %} diff --git a/packages/web-twig/src/Resources/helpers/images/images.stories.twig b/packages/web-twig/src/Resources/helpers/images/images.stories.twig index 6067cfb3c0..1b5a23e451 100644 --- a/packages/web-twig/src/Resources/helpers/images/images.stories.twig +++ b/packages/web-twig/src/Resources/helpers/images/images.stories.twig @@ -1,4 +1,7 @@ -{% extends 'layout/plain.html.twig' %} +{% extends 'layout/default.html.twig' %} + +{% block title %}Images{% endblock %} +{% block parentPageName %}Helpers{% endblock %} {% block content %} diff --git a/packages/web-twig/src/Resources/helpers/links/links.stories.twig b/packages/web-twig/src/Resources/helpers/links/links.stories.twig index df322a43d9..85fb937552 100644 --- a/packages/web-twig/src/Resources/helpers/links/links.stories.twig +++ b/packages/web-twig/src/Resources/helpers/links/links.stories.twig @@ -1,4 +1,7 @@ -{% extends 'layout/plain.html.twig' %} +{% extends 'layout/default.html.twig' %} + +{% block title %}Links{% endblock %} +{% block parentPageName %}Helpers{% endblock %} {% block content %} diff --git a/packages/web-twig/src/Resources/helpers/lists/lists.stories.twig b/packages/web-twig/src/Resources/helpers/lists/lists.stories.twig index f67a2ffa68..cf4dd7f0dc 100644 --- a/packages/web-twig/src/Resources/helpers/lists/lists.stories.twig +++ b/packages/web-twig/src/Resources/helpers/lists/lists.stories.twig @@ -1,4 +1,7 @@ -{% extends 'layout/plain.html.twig' %} +{% extends 'layout/default.html.twig' %} + +{% block title %}Lists{% endblock %} +{% block parentPageName %}Helpers{% endblock %} {% block content %} diff --git a/packages/web-twig/src/Resources/helpers/scroll-control/scroll-control.stories.twig b/packages/web-twig/src/Resources/helpers/scroll-control/scroll-control.stories.twig index 2860d9b61d..ec5057bc7d 100644 --- a/packages/web-twig/src/Resources/helpers/scroll-control/scroll-control.stories.twig +++ b/packages/web-twig/src/Resources/helpers/scroll-control/scroll-control.stories.twig @@ -1,4 +1,7 @@ -{% extends 'layout/plain.html.twig' %} +{% extends 'layout/default.html.twig' %} + +{% block title %}Scroll Control{% endblock %} +{% block parentPageName %}Helpers{% endblock %} {% block content %} diff --git a/packages/web-twig/src/Resources/helpers/text/text.stories.twig b/packages/web-twig/src/Resources/helpers/text/text.stories.twig index 81f8e031c0..886bf9dc40 100644 --- a/packages/web-twig/src/Resources/helpers/text/text.stories.twig +++ b/packages/web-twig/src/Resources/helpers/text/text.stories.twig @@ -1,9 +1,10 @@ +{% extends 'layout/default.html.twig' %} -{% extends 'layout/plain.html.twig' %} +{% block title %}Text{% endblock %} +{% block parentPageName %}Helpers{% endblock %} {% block content %} -

    Text

    diff --git a/packages/web-twig/src/Resources/helpers/typography/typography.stories.twig b/packages/web-twig/src/Resources/helpers/typography/typography.stories.twig index cefff70b1f..233b16cfb2 100644 --- a/packages/web-twig/src/Resources/helpers/typography/typography.stories.twig +++ b/packages/web-twig/src/Resources/helpers/typography/typography.stories.twig @@ -1,4 +1,7 @@ -{% extends 'layout/plain.html.twig' %} +{% extends 'layout/default.html.twig' %} + +{% block title %}Typography{% endblock %} +{% block parentPageName %}Helpers{% endblock %} {% block content %} diff --git a/packages/web-twig/src/Resources/icons/Icons.stories.twig b/packages/web-twig/src/Resources/icons/Icons.stories.twig index b306d1e343..035074ffb3 100644 --- a/packages/web-twig/src/Resources/icons/Icons.stories.twig +++ b/packages/web-twig/src/Resources/icons/Icons.stories.twig @@ -1,21 +1,25 @@ {% extends 'layout/default.html.twig' %} -{% block content %} - - +{% block title %}Icons{% endblock %} - +{% block content %} - {% for icon in icons %} -
  • - + {% include 'partials/tabs.html.twig' %} - {{ icon }} -
    • - {% endfor %} + - + {% for icon in icons %} +
  • + + {{ icon }} +
    • + {% endfor %} -     + {% endblock %}