From ec0f1b9909e28ae311985aeaad64525b943ada18 Mon Sep 17 00:00:00 2001 From: Martina Lilja Date: Thu, 27 Feb 2025 11:59:42 +0100 Subject: [PATCH] ESY-6582 Tab can include src --- _includes/example-1.md | 4 + _includes/example-2.md | 4 + _includes/example-3.md | 4 + _includes/example.md | 25 ---- _includes/tabs.html | 126 ++++++++++++-------- _sass/accordion-table.scss | 32 ------ _sass/card.scss | 6 - _sass/front-page.scss | 127 --------------------- _sass/swedbank-pay-design-guide-theme.scss | 18 ++- _sass/tabs.scss | 11 -- index.md | 58 ++++++++-- 11 files changed, 155 insertions(+), 260 deletions(-) create mode 100644 _includes/example-1.md create mode 100644 _includes/example-2.md create mode 100644 _includes/example-3.md delete mode 100644 _includes/example.md delete mode 100644 _sass/card.scss delete mode 100644 _sass/tabs.scss diff --git a/_includes/example-1.md b/_includes/example-1.md new file mode 100644 index 000000000..f503f121b --- /dev/null +++ b/_includes/example-1.md @@ -0,0 +1,4 @@ + +### Example 1 + +The src content for **Example 1** diff --git a/_includes/example-2.md b/_includes/example-2.md new file mode 100644 index 000000000..ac27a399f --- /dev/null +++ b/_includes/example-2.md @@ -0,0 +1,4 @@ + +### Example 2 + +The src content for **Example 2** diff --git a/_includes/example-3.md b/_includes/example-3.md new file mode 100644 index 000000000..85f81f770 --- /dev/null +++ b/_includes/example-3.md @@ -0,0 +1,4 @@ + +### Example 3 + +The src content for **Example 3** diff --git a/_includes/example.md b/_includes/example.md deleted file mode 100644 index 8ce018c22..000000000 --- a/_includes/example.md +++ /dev/null @@ -1,25 +0,0 @@ - -The integration consists of three main steps. **Creating** the payment order, -**displaying** the payment menu, and **capturing** the funds. In addition, there -are other post-purchase options you need. We get to them later on. - -## Create Payment Order - -When your customer has initiated a purchase, you need to create a payment order. -Start by performing a `POST` request towards the `paymentorder` resource with -payer information and a `completeUrl`. - -The `productName` field has been removed in v3.1, and you identify the -`paymentOrder` version as v3.1 in the header instead. - -`POST`, `PATCH`, `GET` and `PUT` requests use this header: - -`Content-Type: application/json;version=3.1` - -`GET` requests can also use this header: - -`Accept: application/json;version=3.1` - -Valid versions are **3.1**, **3.0** and **2.0**. If you do not add a version, -the request will default to **2.0**. Using the `productName` and setting it to -`checkout3` will default to **3.0**. diff --git a/_includes/tabs.html b/_includes/tabs.html index f4f8761d4..5e428506b 100644 --- a/_includes/tabs.html +++ b/_includes/tabs.html @@ -1,78 +1,106 @@ {%- comment -%} **Parameters tab_list(required): An array with items having the attributes title(required), content_text (required), -content_src(optional) -active_tab_index(optional): Index of the tab to be active by default +content_src(optional), mark_with_star (optional) +default_tab_index(optional): Index of the tab to be active by default, starting from 1 {%- endcomment -%} {% assign tabs = include.tab_list %} -{% assign active_tab_index = include.active_tab_index | default: 1 %} +{% assign max_index = include.tab_list | size | minus:1 %} +{% assign default_tab_index = include.default_tab_index | minus:1 | at_least:0 | at_most:max_index %}
- -{% for tab in tabs %} -

- {{ tab.content_text }} - {% if tab.content_src %} -

- {% capture sourced_content %} - {% include {{tab.content_src}} %} - {% endcapture %} - {{ sourced_content | markdownify }} -
- {% endif %} +

+
+
+{% for tab in tabs %} +{% if tab.content_src %} +
+ {% capture sourced_content %} + {% include {{tab.content_src}} %} + {% endcapture %} + {{ sourced_content | markdownify }} +
+{% endif %} {% endfor %} + + \ No newline at end of file diff --git a/_sass/accordion-table.scss b/_sass/accordion-table.scss index 32975df7e..6b3cf08ba 100644 --- a/_sass/accordion-table.scss +++ b/_sass/accordion-table.scss @@ -19,37 +19,5 @@ display: block; } } - - &:hover { - background-color: $apricot; - } - } - - .accordion-body { - padding: 0; - } - - table { - border: 1px solid rgba(153, 153, 153, 0.5); - border-radius: 0.25rem; - - th { - font-size: 0.875rem; - } - - tbody { - font-size: 0.875rem; - - tr:nth-child(odd) { - background-color: #F9F8F6; - } - - tr { - &:hover { - background-color: $apricot; - transition: .5s; - } - } - } } } diff --git a/_sass/card.scss b/_sass/card.scss deleted file mode 100644 index 65bdf5a09..000000000 --- a/_sass/card.scss +++ /dev/null @@ -1,6 +0,0 @@ -.cards-icon { - svg { - fill: $brown; - max-width: 24px; - } -} diff --git a/_sass/front-page.scss b/_sass/front-page.scss index 7b6d59fdb..9ee2e6b2a 100644 --- a/_sass/front-page.scss +++ b/_sass/front-page.scss @@ -139,7 +139,6 @@ $front-page-max-width: $breakpoint-lg; } @media screen and (min-width: $breakpoint-xxl) { - margin-bottom: 8rem; .front-page-intro-cards { left: 0; @@ -244,130 +243,4 @@ $front-page-max-width: $breakpoint-lg; } } - - .front-page-demoshop { - display: flex; - flex-direction: column; - align-items: center; - padding: $front-page-padding; - padding-top: 4rem; - margin-bottom: 4rem; - width: 100%; - height: 22.5rem; - background-color: $dark-brown; - text-decoration: none; - border-radius: 1rem; - - &:after { - display: none; - content: none; - } - - .front-page-demoshop-text { - display: flex; - flex-direction: column; - margin-bottom: 2rem; - max-width: $front-page-max-width; - width: 100%; - - .h2 { - color: $white; - } - - .demoshop-text-description { - color: $white; - width: 40%; - min-height: 4.5rem; - font-size: 1rem; - - } - - } - - @media screen and (max-width: $breakpoint-md) { - padding-top: 3rem; - height: 18rem; - - .front-page-demoshop-text { - .demoshop-text-description { - width: 100%; - min-height: 2.25rem; - } - } - - } - - .front-page-demoshop-link { - display: flex; - position: relative; - color: $white; - text-decoration: none; - background-color: $medium-brown; - align-items: center; - height: 4.625rem; - border-radius: 2px; - box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.15); - max-width: $front-page-max-width; - width: 100%; - cursor: pointer; - - a::after{ - content: ''; - } - - &:hover, - &:focus { - background-color: $white; - color: $brown; - - .h3 { - color: $brown; - } - } - - .demoshop-link-img { - display: flex; - align-items: center; - position: absolute; - bottom: -1rem; - right: 3%; - pointer-events: none; - - .demoshop-link-img-web { - width: 26.5rem; - height: 15.125rem; - border-radius: 2px; - box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.15); - } - - .demoshop-link-img-mobile { - height: 15.125rem; - border-radius: 2px; - box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.15); - margin-right: 1rem; - } - } - - .h3 { - color: $white; - padding-right: 1rem; - padding-left: 1.5rem; - margin: 0; - } - } - - @media screen and (min-width: $breakpoint-xxl) { - .front-page-demoshop-text { - margin-bottom: 1rem; - } - - .front-page-demoshop-link { - .demoshop-link-img { - bottom: -2rem; - } - } - } - } - - } diff --git a/_sass/swedbank-pay-design-guide-theme.scss b/_sass/swedbank-pay-design-guide-theme.scss index 37225b483..628543501 100644 --- a/_sass/swedbank-pay-design-guide-theme.scss +++ b/_sass/swedbank-pay-design-guide-theme.scss @@ -3,14 +3,12 @@ @import 'variables.scss'; @import 'breakpoints.scss'; -@import 'card.scss'; +@import 'accordion-table.scss'; @import 'code-view.scss'; @import 'front-page.scss'; -@import 'accordion-table.scss'; @import 'paragraph-highlight.scss'; @import 'sidebar.scss'; @import 'title-header.scss'; -@import 'tabs.scss'; $bg: #f5f2f0; $darkened-bg: darken($bg, 10%); @@ -147,6 +145,20 @@ body { } } } + + .toc-list { + list-style-type: none; + padding: 0; + margin: 0; + } + + .toc-list li { + padding: 4px 0; + } + + .toc-list ul { + padding-inline-start: 2ch; + } } .documentation { diff --git a/_sass/tabs.scss b/_sass/tabs.scss deleted file mode 100644 index 97ddeaa51..000000000 --- a/_sass/tabs.scss +++ /dev/null @@ -1,11 +0,0 @@ -.tabs { - margin: 2rem 0 3.75rem; - - li { - cursor: pointer; - } -} - -.tab-intro { - padding-bottom: 3rem; -} diff --git a/index.md b/index.md index 4cccdf481..5a6b45e2d 100644 --- a/index.md +++ b/index.md @@ -28,12 +28,15 @@ table_content_payments: swedbankPay: true tab_list: -- title: Tab 1 with content as text - content_text: Some content. -- title: Tab 2 with content from src - content_src: example.md -- title: Tab 3 with content from text - content_text: Text content +- title: Tab 1 + content_text: Some intro text for tab 1. + content_src: example-1.md +- title: Tab 2 + content_src: example-2.md +- title: Tab 3 + content_text: Tab 3 intro text + content_src: example-3.md + mark_with_star: true --- {% include card-list.html card_list=page.card_list col_class="col-lg-4" %} @@ -51,6 +54,8 @@ There should be whitespace between paragraphs. There should be whitespace between paragraphs. We recommend including a README, or a file with information about your project. +___ + ## Header 2 This is a normal paragraph following a header. GitHub is a code hosting platform @@ -62,26 +67,36 @@ projects from anywhere. > When something is important enough, you do it even if the odds are not in > your favor. +___ + ### Header 3 This is a normal paragraph following a header 3. +___ + #### Header 4 * This is an unordered list following a header 4. * This is an unordered list following a header 4. * This is an unordered list following a header 4. +___ + ##### Header 5 1. This is an ordered list following a header 5. 2. This is an ordered list following a header 5. 3. This is an ordered list following a header 5. +___ + ###### Header 6 This is a normal paragraph following a header 6. +___ + ## Accordion {% capture acc-1 %} @@ -104,6 +119,8 @@ Here we have also formatted the content as two paragraphs with padding. {% endcapture %} {% include accordion-table.html content=acc-3 header_expand_text='Expand' header_collapse_text='Collapse' header_expand_css='font-weight-normal' %} +___ + ## Cards
@@ -187,9 +204,14 @@ Here we have also formatted the content as two paragraphs with padding.
+___ + ## Tabs -{% include tabs.html tab_list=page.tab_list active_tab_index=2 %} +{% include tabs.html tab_list=page.tab_list default_tab_index=3 %} + +___ +___ ## Table @@ -215,6 +237,8 @@ Here's a striped table. | ok | good `oreos` | hmm | | ok | good `zoute` drop | yumm | +___ + ## Code examples {:.code-view-header} @@ -354,6 +378,8 @@ Here's some ``{:.language-html .highlight} that should `.be { highlighted: according; }`{:.language-css .highlight} to their language. +___ + ## Mermaid ```mermaid @@ -378,6 +404,8 @@ sequenceDiagram deactivate Merchant ``` +___ + ## Alerts {% include alert.html type='informative' header='Informational alert' @@ -402,6 +430,8 @@ through highly customizable and flexible components. Visit our [demoshop](https://ecom.externalintegration.payex.com/pspdemoshop) and try out PayEx Checkout for yourself!' %} +___ + ## Iterator {% include iterator.html next_href="page2" %} @@ -422,6 +452,8 @@ and try out PayEx Checkout for yourself!' %} * Item baz * Item zip +___ + ## And an ordered list 1. Item one @@ -429,6 +461,8 @@ and try out PayEx Checkout for yourself!' %} 3. Item three 4. Item four +___ + ## And a nested list * level 1 item @@ -447,14 +481,20 @@ and try out PayEx Checkout for yourself!' %} * level 2 item * level 1 item +___ + ## Small image ![Octocat](https://github.githubassets.com/images/icons/emoji/octocat.png) +___ + ## Large image ![Branching](https://docs.github.com/assets/cb-23923/images/help/repository/branching.png) +___ + ## Definition lists can be used with HTML syntax
@@ -476,10 +516,14 @@ Long, single-line code blocks should not wrap. They should horizontally scroll i The final element. ``` +___ + ## Emoji support :+1: :heavy_check_mark: :fire: 💡 :unicorn: +___ + ## Material design icons {% icon check %} {% icon line_weight %} {% icon gavel %} {% icon visibility %}