IBX-4432: added new service account view for welcome page (#665)

src/bundle/Resources/public/scss/_custom.scss

@@ -263,7 +263,7 @@ $link-hover-color: $ibexa-color-primary;
 
 // Body
 $body-bg: $ibexa-color-white;
-$body-color: $ibexa-color-black;
+$body-color: $ibexa-color-dark;
 
 // Pagination
 $pagination-color: $ibexa-color-dark;

src/bundle/Resources/public/scss/_steps.scss

@@ -0,0 +1,60 @@
+.ibexa-step {
+    display: flex;
+    position: relative;
+    width: 100%;
+    align-items: center;
+    padding: calculateRem(20px);
+
+    &__wrapper {
+        display: inline-flex;
+        padding-left: 0;
+        margin-bottom: 0;
+    }
+
+    &__separator {
+        width: 100%;
+        border-bottom: calculateRem(1px) solid $ibexa-color-light;
+    }
+
+    &__actions {
+        display: flex;
+        width: 100%;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: calculateRem(45px) calculateRem(20px) calculateRem(60px);
+    }
+
+    &__item {
+        margin-right: calculateRem(16px);
+        list-style: none;
+
+        &--active {
+            .ibexa-step__indicator {
+                background-color: $ibexa-color-info;
+            }
+        }
+
+        &--prev {
+            .ibexa-step__indicator {
+                background-color: $ibexa-color-dark;
+            }
+        }
+    }
+
+    &__label {
+        font-size: $ibexa-text-font-size-small;
+
+        .ibexa-step__item--active > & {
+            color: $ibexa-color-info;
+        }
+    }
+
+    &__indicator {
+        margin-top: calculateRem(5px);
+        border-radius: calculateRem(4px);
+        width: calculateRem(82px);
+        height: calculateRem(4px);
+        background-color: $ibexa-color-light;
+    }
+}

src/bundle/Resources/public/scss/ibexa.scss

@@ -118,3 +118,4 @@
 @import 'user-group-invitation';
 @import 'user-invitation-modal';
 @import 'default-location';
+@import 'steps';

src/bundle/Resources/views/themes/admin/ui/component/step/step.html.twig

@@ -0,0 +1,14 @@
+{% import "@ibexadesign/ui/component/macros.html.twig" as html %}
+
+{% set step_attr = step_attr|default({})|merge({
+    class: ('ibexa-step__item '
+        ~ (step_name == step.name ? 'ibexa-step__item--active ' : '')
+        ~ (is_previous_step ? 'ibexa-step__item--prev ' : '')
+        ~ step_attr.class|default(''))|trim,
+    'data-step-id': step.id
+}) %}
+
+<li {{ html.attributes(step_attr) }}>
+    <span class="ibexa-step__label">{{ step.title }}</span>
+    <div class="ibexa-step__indicator"></div>
+</li>

src/bundle/Resources/views/themes/admin/ui/component/step/steps.html.twig

@@ -0,0 +1,23 @@
+{% import "@ibexadesign/ui/component/macros.html.twig" as html %}
+
+{% set active_index = null %}
+{% for step in steps %}
+    {% if step.name == step_name %}
+        {% set active_index = loop.index %}
+    {% endif %}
+{% endfor %}
+
+{% set attr = attr|default({})|merge({
+    class: ('ibexa-step ' ~ attr.class|default(''))|trim,
+}) %}
+
+<div {{ html.attributes(attr) }}>
+    <ul class="ibexa-step__wrapper">
+        {% for step in steps %}
+            {% include '@ibexadesign/ui/component/step/step.html.twig' with {
+                step,
+                is_previous_step: active_index > loop.index
+            } %}
+        {% endfor %}
+    </ul>
+</div>