Feat(web-twig): Introduce unstable_EmptyState component #DS-1308

packages/web-twig/src/Resources/components/UNSTABLE_EmptyState/README.md

@@ -0,0 +1,20 @@
+# UNSTABLE EmptyState
+
+⚠️ This component is UNSTABLE. It may significantly change at any point in the future.
+Please use it with caution.
+
+The `UNSTABLE_EmptyState` component is used to separate content in a layout.
+
+```twig
+<UNSTABLE_EmptyState />
+```
+
+## API
+
+The components accept [additional attributes][readme-additional-attributes].
+If you need more control over the styling of a component, you can use [style props][readme-style-props]
+and [escape hatches][readme-escape-hatches].
+
+[readme-additional-attributes]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#additional-attributes
+[readme-escape-hatches]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#escape-hatches
+[readme-style-props]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#style-props

packages/web-twig/src/Resources/components/UNSTABLE_EmptyState/UNSTABLE_EmptyState.stories.twig

@@ -0,0 +1,9 @@
+{% extends 'layout/plain.html.twig' %}
+
+{% block content %}
+
+    <DocsSection title="Default" stackAlignment="stretch">
+        {% include '@components/UNSTABLE_EmptyState/stories/EmptyStateDefault.twig' %}
+    </DocsSection>
+
+{% endblock %}

packages/web-twig/src/Resources/components/UNSTABLE_EmptyState/UNSTABLE_EmptyState.twig

@@ -0,0 +1,83 @@
+{# API #}
+{%- set props = props | default([]) -%}
+{%- set _buttonPrimaryText = props.buttonPrimaryText | default(null) -%}
+{%- set _buttonPrimaryUrl = props.buttonPrimaryUrl | default(null) -%}
+{%- set _buttonSecondaryText = props.buttonSecondaryText | default(null) -%}
+{%- set _buttonSecondaryUrl = props.buttonSecondaryUrl | default(null) -%}
+{%- set _description = props.description -%}
+{%- set _headingElementType = props.headingElementType | default('h2') -%}
+{%- set _iconName = props.iconName | default(null) -%}
+{%- set _linkText = props.linkText | default(null) -%}
+{%- set _linkUrl = props.linkUrl | default(null) -%}
+{%- set _title = props.title -%}
+
+{# Class names #}
+{%- set _rootClassName = _spiritClassPrefix ~ 'UNSTABLE_EmptyState' -%}
+{%- set _headingClassName = _spiritClassPrefix ~ 'UNSTABLE_EmptyState__heading' -%}
+{%- set _contentClassName = _spiritClassPrefix ~ 'UNSTABLE_EmptyState__content' -%}
+{%- set _buttonsClassName = _spiritClassPrefix ~ 'UNSTABLE_EmptyState__buttons' -%}
+{%- set _wrapperClassName = _spiritClassPrefix ~ 'UNSTABLE_EmptyState__wrapper' -%}
+{%- set _iconWrapperClassName = _spiritClassPrefix ~ 'UNSTABLE_EmptyState__icon' -%}
+
+{# Miscellaneous #}
+{%- set _styleProps = useStyleProps(props) -%}
+{%- set _classNames = [ _rootClassName, _styleProps.className ] -%}
+
+<div
+    {{ mainProps(props) }}
+    {{ styleProp(_styleProps) }}
+    {{ classProp(_classNames) }}
+>
+    <div class="{{ _wrapperClassName }}">
+        {% if _iconName %}
+            <div class="{{ _iconWrapperClassName }}">
+                <Icon name="{{ _iconName }}"/>
+            </div>
+        {% endif %}
+        <div>
+            <Heading
+                elementType="{{ _headingElementType }}"
+                size="xsmall"
+                data-test-empty-tile="{{ _headingElementType }}"
+                UNSTABLE_className="{{ _headingClassName }}"
+            >
+                {{ _title }}
+            </Heading>
+            <Text color="secondary">{{ _description | raw }}</Text>
+        </div>
+    </div>
+    {% if block('content') is not empty %}
+        <div class="{{ _contentClassName }}">
+            {% block content %}{% endblock %}
+        </div>
+    {% else %}
+        {% if _buttonPrimaryUrl or _buttonSecondaryUrl %}
+            <div class="{{ _buttonsClassName }}">
+                {% if _buttonPrimaryText and _buttonPrimaryUrl %}
+                    <ButtonLink
+                        href="{{ _buttonPrimaryUrl }}"
+                        color="primary"
+                    >
+                        {{ _buttonPrimaryText }}
+                    </ButtonLink>
+                {% endif %}
+                {% if _buttonSecondaryText and _buttonSecondaryUrl %}
+                    <ButtonLink
+                        href="{{ _buttonSecondaryUrl }}"
+                        color="secondary"
+                    >
+                        {{ _buttonSecondaryText }}
+                    </ButtonLink>
+                {% endif %}
+            </div>
+        {% endif %}
+        {% if _linkUrl and _linkText %}
+            <Link
+                href="{{ _linkUrl }}"
+                color="primary"
+            >
+                {{ _linkText }}
+            </Link>
+        {% endif %}
+    {% endif %}
+</div>

packages/web-twig/src/Resources/components/UNSTABLE_EmptyState/__tests__/UNSTABLE_EmptyStateSnapshotTest.php

@@ -0,0 +1,11 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Lmc\SpiritWebTwigBundle\Resources\components\UNSTABLE_EmptyState;
+
+use Lmc\SpiritWebTwigBundle\AbstractComponentSnapshotTest;
+
+class UNSTABLE_EmptyStateSnapshotTest extends AbstractComponentSnapshotTest
+{
+}

packages/web-twig/src/Resources/components/UNSTABLE_EmptyState/__tests__/__fixtures__/UNSTABLE_EmptyState.twig

@@ -0,0 +1,12 @@
+<!-- Render with all props -->
+<UNSTABLE_EmptyState
+    buttonPrimaryText="Action"
+    buttonPrimaryUrl="#"
+    buttonSecondaryText="Action"
+    buttonSecondaryUrl="#"
+    description="Look somewhere else"
+    iconName="search"
+    linkText="Link to something"
+    linkUrl="#"
+    title="Empty State Title"
+/>

packages/web-twig/src/Resources/components/UNSTABLE_EmptyState/__tests__/__snapshots__/UNSTABLE_EmptyState.twig.snap.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!-- Render with all props --><html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>
+    </title>
+  </head>
+  <body>
+    <div class="UNSTABLE_EmptyState">
+      <div class="UNSTABLE_EmptyState__wrapper">
+        <div class="UNSTABLE_EmptyState__icon">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="0b030f932056ee26f2a78b61d3405eb8" aria-hidden="true">
+          <path d="M15.5 14H14.71L14.43 13.73C15.63 12.33 16.25 10.42 15.91 8.39002C15.44 5.61002 13.12 3.39002 10.32 3.05002C6.09001 2.53002 2.53002 6.09001 3.05002 10.32C3.39002 13.12 5.61002 15.44 8.39002 15.91C10.42 16.25 12.33 15.63 13.73 14.43L14 14.71V15.5L18.25 19.75C18.66 20.16 19.33 20.16 19.74 19.75C20.15 19.34 20.15 18.67 19.74 18.26L15.5 14ZM9.50002 14C7.01002 14 5.00002 11.99 5.00002 9.50002C5.00002 7.01002 7.01002 5.00002 9.50002 5.00002C11.99 5.00002 14 7.01002 14 9.50002C14 11.99 11.99 14 9.50002 14Z" fill="currentColor">
+          </path></svg>
+        </div>
+
+        <div>
+          <h2 data-test-empty-tile="h2" class="typography-heading-xsmall-text">
+            Empty State Title
+          </h2>
+
+          <p class="typography-body-medium-text-regular">
+            Look somewhere else
+          </p>
+        </div>
+      </div>
+
+      <div class="UNSTABLE_EmptyState__buttons">
+        <a class="Button Button--primary Button--medium" href="#">Action</a> <a class="Button Button--secondary Button--medium" href="#">Action</a>
+      </div>
+      <a href="#" class="link-primary">Link to something</a>
+    </div>
+  </body>
+</html>

packages/web-twig/src/Resources/components/UNSTABLE_EmptyState/stories/EmptyStateDefault.twig

@@ -0,0 +1,48 @@
+<UNSTABLE_EmptyState
+    description="Look somewhere else"
+    iconName="search"
+    title="Empty State Title"
+>
+    Custom content
+</UNSTABLE_EmptyState>
+
+<UNSTABLE_EmptyState
+    buttonPrimaryText="Action"
+    buttonPrimaryUrl="#"
+    buttonSecondaryText="Action"
+    buttonSecondaryUrl="#"
+    description="Look somewhere else"
+    iconName="search"
+    linkText="Link to something"
+    linkUrl="#"
+    title="Empty State Title"
+/>
+
+<UNSTABLE_EmptyState
+    description="Look somewhere else"
+    iconName="search"
+    title="Empty State Title"
+>
+    <ButtonLink href="#" color="primary">
+        Action
+    </ButtonLink>
+</UNSTABLE_EmptyState>
+
+<UNSTABLE_EmptyState
+    description="Look somewhere else"
+    iconName="search"
+    title="Empty State Title"
+    linkText="Link to something"
+    linkUrl="#"
+/>
+
+<UNSTABLE_EmptyState
+    description="Look somewhere else"
+    iconName="search"
+    title="Empty State Title"
+/>
+
+<UNSTABLE_EmptyState
+    description="Look somewhere else"
+    title="Empty State Title"
+/>

packages/web-twig/src/Resources/twig-components/unstable_EmptyState.twig

@@ -0,0 +1 @@
+{% extends '@spirit/UNSTABLE_EmptyState/UNSTABLE_EmptyState.twig' %}