From bb6379e4f989052f9bb87ec400493a8a7cfb3064 Mon Sep 17 00:00:00 2001
From: Guillaume Clemens <gcl@odoo.com>
Date: Mon, 19 Apr 2021 15:20:53 +0000
Subject: [PATCH] [IMP] website: add accordion styles
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This commit adds new classes and options to the accordion snippet in
order to add new styles and allow switching the side where the collapse
status icon floats to.

task-2457232

closes odoo/odoo#69543

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Co-authored-by: Tom De Caluwé <tdc@odoo.com>
---
 .../src/snippets/s_faq_collapse/000.scss      | 96 +++++++++++++++++--
 .../website/views/snippets/s_faq_collapse.xml | 19 ++++
 2 files changed, 107 insertions(+), 8 deletions(-)

diff --git a/addons/website/static/src/snippets/s_faq_collapse/000.scss b/addons/website/static/src/snippets/s_faq_collapse/000.scss
index af236dea178..2cf4ab127d0 100644
--- a/addons/website/static/src/snippets/s_faq_collapse/000.scss
+++ b/addons/website/static/src/snippets/s_faq_collapse/000.scss
@@ -1,35 +1,115 @@
-
 .s_faq_collapse {
     .accordion .card {
         .card-header {
             cursor: pointer;
             display: inline-block;
             width: 100%;
-            padding: .5em 0;
+            position: relative;
+            padding: .5em 1em;
+            padding-left: 2.25em;
             border-radius: 0;
             outline: none;
             &:before {
-                content:'\f056';
+                content: '\f056';
                 font-family: 'FontAwesome';
-                display: inline-block;
-                margin: 0 .5em 0 .75em;
                 color: $gray-600;
+                position: absolute;
+                margin-left: -1.5em;
             }
             &.collapsed:before {
-                content:'\f055';
-                font-family: 'FontAwesome';
+                content: '\f055';
             }
             &:hover,
             &:focus {
                 text-decoration: none;
             }
         }
+        .s_faq_collapse_right_icon {
+            padding-left: 1em;
+            &:before {
+                position: static;
+                float: right;
+                margin-left: 0;
+            }
+            & + div .card-body {
+                padding-left: 1em;
+            }
+        }
         .card-body {
-            padding: 1em 2.25em;
+            padding: 1em;
+            padding-left: 2.25em;
         }
     }
     .card-body p:last-child,
     .card-body ul:last-child {
         margin-bottom: 0;
     }
+    &.s_faq_collapse_light {
+        .accordion .card {
+            border-left: 0;
+            border-right: 0;
+            border-radius: 0;
+            .card-header {
+                background-color: transparent;
+                &:before {
+                    content:'\f068';
+                }
+                &.collapsed:before {
+                    content:'\f067';
+                }
+            }
+            .s_faq_collapse_right_icon {
+                padding-left: 0;
+            }
+            .card-header + div .card-body {
+                padding-left: 0;
+                padding-right: 0;
+            }
+        }
+    }
+    &.s_faq_collapse_big {
+        .accordion .card {
+            border: 0;
+            .card-header {
+                background-color: transparent;
+                font-size: $font-size-lg * 1.5;
+                &:before {
+                    content:'\f068';
+                }
+                &.collapsed:before {
+                    content:'\f067';
+                }
+            }
+            .s_faq_collapse_right_icon {
+                padding-left: 0;
+            }
+            .card-header + div .card-body {
+                padding-left: 0;
+                padding-right: 0;
+            }
+        }
+    }
+    &.s_faq_collapse_boxed {
+        .accordion .card {
+            border: 0;
+            margin: $btn-padding-y-lg 0;
+            &:first-child {
+                margin-top: 0;
+            }
+            &:last-child {
+                margin-bottom: 0;
+            }
+            .card-header {
+                border: 0;
+            }
+            .card-header.collapsed {
+                background-color: transparent;
+            }
+            .collapse.show, .collapsing {
+                .card-body {
+                    background-color: rgba(0, 0, 0, 0.03) !important;
+                }
+            }
+        }
+    }
 }
diff --git a/addons/website/views/snippets/s_faq_collapse.xml b/addons/website/views/snippets/s_faq_collapse.xml
index 649d4b02f42..1189252f60b 100644
--- a/addons/website/views/snippets/s_faq_collapse.xml
+++ b/addons/website/views/snippets/s_faq_collapse.xml
@@ -36,6 +36,25 @@
     </section>
 </template>
 
+<template id="s_faq_collapse_options" inherit_id="website.snippet_options">
+    <xpath expr="." position="inside">
+        <div data-selector=".s_faq_collapse">
+            <we-select string="Card Style">
+                <we-button title="Default" data-select-class="">Default</we-button>
+                <we-button title="Light" data-select-class="s_faq_collapse_light">Light</we-button>
+                <we-button title="Boxed" data-select-class="s_faq_collapse_boxed">Boxed</we-button>
+                <we-button title="Big" data-select-class="s_faq_collapse_big">Big</we-button>
+            </we-select>
+            <we-button-group string="Collapse Icon" data-apply-to=".card-header">
+                <we-button title="Left" data-select-class=""
+                    data-img="/website/static/src/img/snippets_options/pos_left.svg"/>
+                <we-button title="Right" data-select-class="s_faq_collapse_right_icon"
+                    data-img="/website/static/src/img/snippets_options/pos_right.svg"/>
+            </we-button-group>
+        </div>
+    </xpath>
+</template>
+
 <record id="website.s_faq_collapse_000_scss" model="ir.asset">
     <field name="name">Faq collapse 000 SCSS</field>
     <field name="bundle">web.assets_frontend</field>