From 7129ec0d2f15771b35a03a6a50ce0367fa5f8c73 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20Kry=C5=A1p=C3=ADn?= Date: Tue, 3 Dec 2024 17:43:16 +0100 Subject: [PATCH] Docs(web-twig): Move Container into DocsSection using `container` enum prop This way the Container can be optional - see Header & Container demos. This allows us to create nice demos for full width components. --- .../web-twig-demo/templates/default.html.twig | 22 ++-- .../web-twig-demo/templates/helpers.html.twig | 22 ++-- .../templates/layout/default.html.twig | 2 - .../templates/partials/tabs.html.twig | 2 +- .../templates/validations.html.twig | 74 ++++++------ .../components/DocsSection/DocsSection.twig | 31 ++++- .../__fixtures__/docsSectionDefault.twig | 9 ++ .../docsSectionDefault.twig.snap.html | 33 ++++-- .../Button/stories/ButtonColorsSizes.twig | 2 +- .../Button/stories/ButtonDisabled.twig | 2 +- .../Button/stories/ButtonLoading.twig | 2 +- .../stories/ButtonLinkColorsSizes.twig | 2 +- .../stories/ButtonLinkDisabled.twig | 2 +- .../Container/Container.stories.twig | 7 +- .../components/Header/Header.stories.twig | 10 +- .../components/Tag/stories/TagDefault.twig | 2 +- .../accessibility/accessibility.stories.twig | 6 +- .../animations/animations.stories.twig | 6 +- .../helpers/breakout/breakout.stories.twig | 14 ++- .../helpers/images/images.stories.twig | 6 +- .../helpers/links/links.stories.twig | 107 ++++++++++++++---- .../helpers/lists/lists.stories.twig | 6 +- .../scroll-control.stories.twig | 8 +- .../Resources/helpers/text/text.stories.twig | 13 ++- .../typography/typography.stories.twig | 73 ++++++++---- .../src/Resources/icons/Icons.stories.twig | 34 +++--- 26 files changed, 320 insertions(+), 177 deletions(-) diff --git a/apps/web-twig-demo/templates/default.html.twig b/apps/web-twig-demo/templates/default.html.twig index caf8a495d0..60e5cfc0f4 100644 --- a/apps/web-twig-demo/templates/default.html.twig +++ b/apps/web-twig-demo/templates/default.html.twig @@ -6,16 +6,20 @@ {% 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 c4c3c10022..334caa319a 100644 --- a/apps/web-twig-demo/templates/helpers.html.twig +++ b/apps/web-twig-demo/templates/helpers.html.twig @@ -6,16 +6,20 @@ {% include 'partials/tabs.html.twig' %} - + - {% for helper in helpers %} -
  • - - {{ helper | replace({'-': ' '}) | title }} - -
    • - {% endfor %} + - + {% for helper in helpers %} +
  • + + {{ helper | replace({'-': ' '}) | title }} + +
    • + {% endfor %} + +     + + {% endblock %} diff --git a/apps/web-twig-demo/templates/layout/default.html.twig b/apps/web-twig-demo/templates/layout/default.html.twig index 90630d90a4..fd777f9f2c 100644 --- a/apps/web-twig-demo/templates/layout/default.html.twig +++ b/apps/web-twig-demo/templates/layout/default.html.twig @@ -30,11 +30,9 @@ {%- endset -%}
    - {{ renderedContent }} -
    {% include 'partials/footer.html.twig' only %} diff --git a/apps/web-twig-demo/templates/partials/tabs.html.twig b/apps/web-twig-demo/templates/partials/tabs.html.twig index d7342ce96e..218508c093 100644 --- a/apps/web-twig-demo/templates/partials/tabs.html.twig +++ b/apps/web-twig-demo/templates/partials/tabs.html.twig @@ -5,7 +5,7 @@ {% set isHelpersSelected = routeName == 'helpers_index' %} {% set isValidationsSelected = routeName == 'validations_index' %} -
    +
    - -

    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", } %} - - -
    - -
    -     -
    -     - + + + + +

    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", } %} + + +
    + +
    +     +
    +     +     + +     {{ encore_entry_script_tags('formValidations') }} diff --git a/packages/web-twig/docs/components/DocsSection/DocsSection.twig b/packages/web-twig/docs/components/DocsSection/DocsSection.twig index 11ce124398..5eeb7b1308 100644 --- a/packages/web-twig/docs/components/DocsSection/DocsSection.twig +++ b/packages/web-twig/docs/components/DocsSection/DocsSection.twig @@ -1,5 +1,6 @@ {# API #} {%- set props = props | default([]) -%} +{%- set _container = props.container | default('all') -%} {%- set _hasStack = props.hasStack ?? true -%} {%- set _stackAlignment = props.stackAlignment | default('start') -%} {%- set _tag = props.tag | default(null) -%} @@ -17,17 +18,23 @@ {% block content %}{% endblock %} {% endset -%} -
    +{%- set _heading -%}

    {{ _title }} {% if _tag %} {{ _tag }} {% endif %}

    +{%- endset -%} + +{%- set _content -%} + {% if _container == 'heading-only' %} + + {{- _heading -}} + + {% else %} + {{- _heading -}} + {% endif %} {% if _hasStack %} {%- embed '@spirit/DocsStack/DocsStack.twig' with { props: { stackAlignment: _stackAlignment, @@ -39,4 +46,18 @@ {% else %} {{ _renderedContent }} {% endif %} +{%- endset -%} + +
    + {% if _container == 'all' %} + + {{- _content -}} + + {% else %} + {{- _content -}} + {% endif %}
    diff --git a/packages/web-twig/docs/components/DocsSection/__tests__/__fixtures__/docsSectionDefault.twig b/packages/web-twig/docs/components/DocsSection/__tests__/__fixtures__/docsSectionDefault.twig index 83c1f21ad0..37ee810945 100644 --- a/packages/web-twig/docs/components/DocsSection/__tests__/__fixtures__/docsSectionDefault.twig +++ b/packages/web-twig/docs/components/DocsSection/__tests__/__fixtures__/docsSectionDefault.twig @@ -8,9 +8,18 @@ my content + + + my content + +
    -

    - My Title -

    +
    +

    + My Title +

    -
    +
    +
    -

    - My Title -

    +
    +

    + My Title +

    + +
    + my content +
    +
    +
    + + +
    +
    +

    + My Title +

    +
    -
    +
    my content
    diff --git a/packages/web-twig/src/Resources/components/Button/stories/ButtonColorsSizes.twig b/packages/web-twig/src/Resources/components/Button/stories/ButtonColorsSizes.twig index 37cf8855aa..87fe0537de 100644 --- a/packages/web-twig/src/Resources/components/Button/stories/ButtonColorsSizes.twig +++ b/packages/web-twig/src/Resources/components/Button/stories/ButtonColorsSizes.twig @@ -3,7 +3,7 @@ {% set title = 'Size ' ~ size %} - + {% for color in colors %}
    -
    + {% endblock %} 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 c7e787ed0a..707fbbc902 100644 --- a/packages/web-twig/src/Resources/helpers/animations/animations.stories.twig +++ b/packages/web-twig/src/Resources/helpers/animations/animations.stories.twig @@ -5,12 +5,10 @@ {% block content %} -
    - -

    Animations

    + -
    + {% endblock %} 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 a1f8068fe4..78b62a865c 100644 --- a/packages/web-twig/src/Resources/helpers/breakout/breakout.stories.twig +++ b/packages/web-twig/src/Resources/helpers/breakout/breakout.stories.twig @@ -5,12 +5,18 @@ {% block content %} -
    - -

    Breakout

    +
    Break out of Container
    -
    +
    Break out of Container from Tablet
    + +
    Break out of Container from Desktop
    + +
    Break out of Container only on Mobile
    + +
    Break out of Container only on Tablet
    + + {% endblock %} 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 1b5a23e451..b7b81d046f 100644 --- a/packages/web-twig/src/Resources/helpers/images/images.stories.twig +++ b/packages/web-twig/src/Resources/helpers/images/images.stories.twig @@ -5,9 +5,7 @@ {% block content %} -
    - -

    Images

    + -
    + {% endblock %} 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 85fb937552..355e2845d8 100644 --- a/packages/web-twig/src/Resources/helpers/links/links.stories.twig +++ b/packages/web-twig/src/Resources/helpers/links/links.stories.twig @@ -5,9 +5,7 @@ {% block content %} -
    - -

    Links

    +

    Primary Link @@ -15,50 +13,111 @@

    Secondary Link

    -

    - Inverted Link +

    + Tertiary Link +

    +

    +

    + +     + + +

    Primary Disabled Link

    Secondary Disabled Link

    -

    - Inverted Disabled Link +

    + Tertiary Disabled Link +

    +

    +

    + +     + + +

    Primary Underlined Link

    Secondary Underlined Link

    -

    - Inverted Underlined Link +

    + Tertiary Underlined Link

    +

    + +

    + +     + + +

    Primary Disabled Underlined Link

    Secondary Disabled Underlined Link

    -

    - Inverted Disabled Underlined Link +

    + Tertiary Disabled Underlined Link

    +

    + +

    + +     -

    - Heading XSmall Text with link (default style), obtains visited state -

    -

    - Heading XSmall Text with link (primary), obtains visited state -

    -

    - Heading XSmall Text with link with underlined class, obtains visited state, gets underlined only on hover and active -

    -

    - Heading XSmall Text with link without underlined class, behaves the same as the one before -

    + + +

    + Primary Not Underlined Link +

    +

    + Secondary Not Underlined Link +

    +

    + Tertiary Not Underlined Link +

    +

    + +

    + +     + + + +

    Please click on the link to see the visited state style

    + +

    + Primary Visited Link +

    +

    + Secondary Visited Link +

    +

    + Tertiary Visited Link +

    + +     + + + +

    + Primary Visited Disabled Link +

    +

    + Secondary Visited Disabled Link +

    +

    + Tertiary Visited Disabled Link +

    -
    + {% endblock %} 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 cf4dd7f0dc..8127aa4cc8 100644 --- a/packages/web-twig/src/Resources/helpers/lists/lists.stories.twig +++ b/packages/web-twig/src/Resources/helpers/lists/lists.stories.twig @@ -5,14 +5,12 @@ {% block content %} -
    - -

    Lists

    +
    • Unstyled list item — there is no marker!
    -
    + {% endblock %} 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 ec5057bc7d..67f92a8856 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 @@ -5,15 +5,13 @@ {% block content %} -
    - -

    Scroll Control

    - + +

    The class .is-scrolling-disabled blocks scrolling of the given element. The class is automatically added by Spirit Off-canvas plugin on the <body> element anytime a dialog is open.

    -
    + {% endblock %} 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 886bf9dc40..1b88ad8b6c 100644 --- a/packages/web-twig/src/Resources/helpers/text/text.stories.twig +++ b/packages/web-twig/src/Resources/helpers/text/text.stories.twig @@ -5,15 +5,20 @@ {% block content %} -
    - -

    Text

    +

    This is a truncated single-line text. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    +
    + +     + + + +

    This is a truncated multi-line text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia @@ -22,6 +27,6 @@

    -
    + {% endblock %} 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 233b16cfb2..fabb41e5c5 100644 --- a/packages/web-twig/src/Resources/helpers/typography/typography.stories.twig +++ b/packages/web-twig/src/Resources/helpers/typography/typography.stories.twig @@ -5,29 +5,54 @@ {% block content %} -
    - -

    Typography

    - -

    Heading XLarge Text

    -

    Heading Large Text

    -

    Heading Medium Text

    -

    Heading Small Text

    -

    Heading XSmall Text

    -

    Body Large Text Bold

    -

    Body Large Text Italic

    -

    Body Large Text Regular

    -

    Body Large Button

    -

    Body Medium Text Bold

    -

    Body Medium Text Italic

    -

    Body Medium Text Regular

    -

    Body Medium Button

    -

    Body Small Text Bold

    -

    Body Small Text Italic

    -

    Body Small Text Regular

    -

    Body Small Button

    -

    Body XSmall Text Regular

    - -
    + + +

    Heading XLarge Regular

    +

    Heading XLarge Semibold

    +

    Heading XLarge Bold

    +

    Heading XLarge Italic

    +

    Heading Large Regular

    +

    Heading Large Semibold

    +

    Heading Large Bold

    +

    Heading Large Italic

    +

    Heading Medium Regular

    +

    Heading Medium Semibold

    +

    Heading Medium Bold

    +

    Heading Medium Italic

    +

    Heading Small Regular

    +

    Heading Small Semibold

    +

    Heading Small Bold

    +

    Heading Small Italic

    +

    Heading XSmall Regular

    +

    Heading XSmall Semibold

    +

    Heading XSmall Bold

    +

    Heading XSmall Italic

    + +     + + + +

    Body XLarge Regular

    +

    Body XLarge Semibold

    +

    Body XLarge Bold

    +

    Body XLarge Italic

    +

    Body Large Regular

    +

    Body Large Semibold

    +

    Body Large Bold

    +

    Body Large Italic

    +

    Body Medium Regular

    +

    Body Medium Semibold

    +

    Body Medium Bold

    +

    Body Medium Italic

    +

    Body Small Regular

    +

    Body Small Semibold

    +

    Body Small Bold

    +

    Body Small Italic

    +

    Body XSmall Regular

    +

    Body XSmall Semibold

    +

    Body XSmall Bold

    +

    Body XSmall Italic

    + +     {% endblock %} diff --git a/packages/web-twig/src/Resources/icons/Icons.stories.twig b/packages/web-twig/src/Resources/icons/Icons.stories.twig index 035074ffb3..5b70175ca4 100644 --- a/packages/web-twig/src/Resources/icons/Icons.stories.twig +++ b/packages/web-twig/src/Resources/icons/Icons.stories.twig @@ -6,20 +6,24 @@ {% include 'partials/tabs.html.twig' %} - - - {% for icon in icons %} -
  • - - {{ icon }} -
    • - {% endfor %} - -     + + + + + {% for icon in icons %} +
  • + + {{ icon }} +
    • + {% endfor %} + +     + +     {% endblock %}