[MOV] website: add s_process_steps snippet from themes repo

Part of https://github.com/odoo/odoo/pull/42937
task-2088157

5 files changed, 140 insertions, 1 deletions

diff --git a/addons/website/__manifest__.py b/addons/website/__manifest__.py
index 2c06ccb0f18..d0162551820 100644
--- a/addons/website/__manifest__.py
+++ b/addons/website/__manifest__.py
@@ -62,6 +62,7 @@
         'views/snippets/s_media_list.xml',
         'views/snippets/s_showcase.xml',
         'views/snippets/s_timeline.xml',
+        'views/snippets/s_process_steps.xml',
         'views/snippets/s_mega_menu_multi_menus.xml',
         'views/snippets/s_mega_menu_menu_image_menu.xml',
         'views/website_views.xml',
diff --git a/addons/website/static/src/img/snippets_thumbs/s_process_step.png b/addons/website/static/src/img/snippets_thumbs/s_process_step.png
new file mode 100644
index 00000000000..d1b68f93877
--- /dev/null
+++ b/addons/website/static/src/img/snippets_thumbs/s_process_step.png
diff --git a/addons/website/static/src/snippets/s_process_steps/000.scss b/addons/website/static/src/snippets/s_process_steps/000.scss
new file mode 100644
index 00000000000..a0b7f942b06
--- /dev/null
+++ b/addons/website/static/src/snippets/s_process_steps/000.scss
@@ -0,0 +1,75 @@
+.s_process_steps {
+    .s_process_step_icon {
+        margin: $grid-gutter-width 0;
+        span {
+            display: block;
+            overflow: hidden;
+        }
+        .fa {
+            display: block;
+        }
+    }
+    .s_process_step_content {
+        padding: 0 $grid-gutter-width/2;
+    }
+    @include media-breakpoint-up(lg) {
+        overflow-x: hidden;
+        .s_process_step {
+            .s_process_step_icon {
+                position: relative;
+                z-index: 1;
+                span:after {
+                    content: '';
+                    z-index: -1;
+                    border-top: 1px solid gray('500');
+                    @include o-position-absolute(50%, 0, 0, auto);
+                }
+            }
+            &:not(:first-child):not(:last-child) .s_process_step_icon {
+                span:after {
+                    width: 100%;
+                }
+            }
+            &:first-child .s_process_step_icon,
+            &:last-child .s_process_step_icon {
+                span:after {
+                    width: 1000%;
+                }
+                .fa {
+                    &:after {
+                        content: '';
+                        z-index: -1;
+                        @include o-position-absolute(50%, auto, 0, auto);
+                        width: 100%;
+                        border-top: 1px solid gray('500');
+                    }
+                    &.mx-auto:after {
+                        width: 50%;
+                    }
+                }
+            }
+            &:first-child .s_process_step_icon {
+                .fa:after { right: 0; }
+                .fa.float-right:after { width: 0; }
+            }
+            &:last-child .s_process_step_icon {
+                span:after { left: 0; }
+                .fa {
+                    &:after { left: 0; }
+                    &.float-left:after { width: 0; }
+                }
+            }
+        }
+    }
+
+    $s_process_step_line_fw: true;
+
+    @if $s_process_step_line_fw == true {
+        .s_process_step:first-child,
+        .s_process_step:last-child {
+            .s_process_step_icon > span:after {
+                display: none;
+            }
+        }
+    }
+}
diff --git a/addons/website/views/snippets/s_process_steps.xml b/addons/website/views/snippets/s_process_steps.xml
new file mode 100644
index 00000000000..85b3a7e6977
--- /dev/null
+++ b/addons/website/views/snippets/s_process_steps.xml
@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template name="Steps" id="s_process_steps">
+    <section class="s_process_steps pt24 pb24">
+        <div class="container">
+            <div class="row no-gutters">
+                <div class="col-lg-3 s_process_step pt24 pb24">
+                    <div class="s_process_step_icon">
+                        <span>
+                            <i class="fa fa-shopping-basket fa-2x mx-auto rounded-circle bg-alpha"/>
+                        </span>
+                    </div>
+                    <div class="s_process_step_content text-center">
+                        <h2>Add to cart</h2>
+                        <p>Let your customers follow <br/>and understand your process.</p>
+                    </div>
+                </div>
+                <div class="col-lg-3 s_process_step pt24 pb24">
+                    <div class="s_process_step_icon">
+                        <span>
+                            <i class="fa fa-unlock-alt fa-2x mx-auto rounded-circle bg-beta"/>
+                        </span>
+                    </div>
+                    <div class="s_process_step_content text-center">
+                        <h2>Sign in</h2>
+                        <p>Click on the icon to adapt it <br/>to your purpose.</p>
+                    </div>
+                </div>
+                <div class="col-lg-3 s_process_step pt24 pb24">
+                    <div class="s_process_step_icon">
+                        <span>
+                            <i class="fa fa-paypal fa-2x mx-auto rounded-circle bg-gamma"/>
+                        </span>
+                    </div>
+                    <div class="s_process_step_content text-center">
+                        <h2>Pay</h2>
+                        <p>Duplicate blocks <br/>to add more steps.</p>
+                    </div>
+                </div>
+                <div class="col-lg-3 s_process_step pt24 pb24">
+                    <div class="s_process_step_icon">
+                        <span>
+                            <i class="fa fa-plane fa-2x mx-auto rounded-circle bg-delta"/>
+                        </span>
+                    </div>
+                    <div class="s_process_step_content text-center">
+                        <h2>Get Delivered</h2>
+                        <p>Select and delete blocks <br/>to remove some steps.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
+
+<template id="assets_snippet_s_process_steps_css_000" inherit_id="website.assets_frontend">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/snippets/s_process_steps/000.scss"/>
+    </xpath>
+</template>
+
+</odoo>
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index 0201341d747..d97548de920 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -55,7 +55,7 @@
                     <!-- Product list -->
                     <t t-snippet="website.s_tabs" t-thumbnail="/website/static/src/img/snippets_thumbs/s_tabs.png"/>
                     <t t-snippet="website.s_timeline" t-thumbnail="/website/static/src/img/snippets_thumbs/s_timeline.png"/>
-                    <!-- Steps -->
+                    <t t-snippet="website.s_process_steps" t-thumbnail="/website/static/src/img/snippets_thumbs/s_process_step.png"/>
                     <t t-snippet="website.s_quotes_carousel" t-thumbnail="/website/static/src/img/snippets_thumbs/s_quotes_carousel.png"/>
                 </div>
             </div>