Skip to content

fix: default header changed for components #1367

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jbadan merged 11 commits into from
Apr 4, 2019
Merged

fix: default header changed for components #1367

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
fc98b65
default header changed for menu, mega menu, modal, panel, sidenav, ac…
leannerivera Apr 1, 2019
e2243e1
minor indent fixes
leannerivera Apr 1, 2019
a5adc0e
fix action-bar.md syntax error
leannerivera Apr 2, 2019
dbeead9
docs updated correctly
leannerivera Apr 2, 2019
d54b3ee
panel h3 header blurb added
leannerivera Apr 2, 2019
3e62bfe
components that were also using other components have their headers n…
leannerivera Apr 2, 2019
9d22835
update tile and docs pages, new examples in test pages
jbadan Apr 3, 2019
62633d3
replace header note with variable
jbadan Apr 3, 2019
8d4e9f0
replace if statement with variable
jbadan Apr 4, 2019
07da7f1
missed modal
jbadan Apr 4, 2019
80251ed
more disclaimer headings on pages
jbadan Apr 4, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions docs/_includes/demo-page-components/app-sidebar-content.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@
</ul>
</div>
<div class="fd-side-nav__group">
<h1 class="fd-side-nav__title">Group</h1>
<h3 class="fd-side-nav__title">Group</h3>
<ul class="fd-side-nav__list">
<li class="fd-side-nav__item">
<a class="fd-side-nav__link" href="#">
Expand All @@ -107,9 +107,9 @@ <h1 class="fd-side-nav__title">Group</h1>
<header class="fd-page__header">
<div class="fd-action-bar">
<div class="fd-action-bar__header">
<h1 class="fd-action-bar__title">
<h3 class="fd-action-bar__title">
Page Title
</h1>
</h3>
<p class="fd-action-bar__description">Optional page intro lorem ipsum dolor</p>
</div>
<div class="fd-action-bar__actions">
Expand Down
4 changes: 2 additions & 2 deletions docs/_includes/demo-page-components/fd-page__header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<header class="fd-page__header">
<div class="fd-action-bar">
<div class="fd-action-bar__header">
<h1 class="fd-action-bar__title">
<h3 class="fd-action-bar__title">
{{ include.title }}
</h1>
</h3>
<p class="fd-action-bar__description">Optional page intro lorem ipsum dolor</p>
</div>
{% if include.hide-add-btn != "true" %}
Expand Down
2 changes: 1 addition & 1 deletion docs/_includes/demo-page-components/modal-app-overlay.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div class="fd-modal" role="dialog">
<div class="fd-modal__content" role="document">
<header class="fd-modal__header">
<h1 class="fd-modal__title">Modal Header</h1>
<h3 class="fd-modal__title">Modal Header</h3>
<button class="fd-button--light fd-modal__close"></button>
</header>
<div class="fd-modal__body">
Expand Down
14 changes: 7 additions & 7 deletions docs/pages/components/action-bar.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,9 @@ The Action Bar is located at the top of the page and is used for the following:
<button class="fd-button--light fd-button--compact sap-icon--nav-back"></button>
</div>
<div class="fd-action-bar__header">
<h1 class="fd-action-bar__title">
<h3 class="fd-action-bar__title">
Page Title
</h1>
</h3>
<p class="fd-action-bar__description">Action bar Description </p>
</div>
<div class="fd-action-bar__actions">
Expand All @@ -42,9 +42,9 @@ The Action Bar is located at the top of the page and is used for the following:
{% capture default-action-bar-multi %}
<div class="fd-action-bar">
<div class="fd-action-bar__header">
<h1 class="fd-action-bar__title">
<h3 class="fd-action-bar__title">
Page Title
</h1>
</h3>
<p class="fd-action-bar__description">Action bar Description </p>
</div>
<div class="fd-action-bar__actions">
Expand All @@ -65,9 +65,9 @@ When there are several main actions for a page, consider displaying them under a
{% capture default-action-bar-menu %}
<div class="fd-action-bar">
<div class="fd-action-bar__header">
<h1 class="fd-action-bar__title">
<h3 class="fd-action-bar__title">
Page Title
</h1>
</h3>
</div>
<div class="fd-action-bar__actions">
<div class="fd-popover">
Expand Down Expand Up @@ -130,4 +130,4 @@ When there are several main actions for a page, consider displaying them under a
</div>
{% endcapture %}

{% include display-component.html component=default-action-bar-multi %}
{% include display-component.html default-action-bar-multi %}
14 changes: 11 additions & 3 deletions test/templates/action-bar/component.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,18 @@ action_bar:
<button class="fd-button--light sap-icon--nav-back"></button>
</div>
{%- endif %}

<div class="fd-action-bar__header">
<h1 class="fd-action-bar__title">
{{ properties.title }}
</h1>
{%- if properties.title_size %}
{%- set title_size = properties.title_size %}
<{{title_size}} class="fd-action-bar__title">
{{ properties.title }}
</ {{title_size}}>
{%- else %}
<h3 class="fd-action-bar__title">
{{ properties.title }}
</h3>
{%- endif %}
{%- if properties.description %}
<p class="fd-action-bar__description">{{ properties.description }}</p>
{%- endif %}
Expand Down
76 changes: 76 additions & 0 deletions test/templates/action-bar/index.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,82 @@
)
}}

{{ action_bar(
properties={
title: "Action Bar with H2 header",
title_size: "h2",
actions: {
properties: {
items: [secbtn,primarybtn]
}
},
back_button: true
},
modifier={
block: []
},
state={},
aria={}
)
}}

{{ action_bar(
properties={
title: "Action Bar with H4 header",
title_size: "h4",
actions: {
properties: {
items: [secbtn,primarybtn]
}
},
back_button: true
},
modifier={
block: []
},
state={},
aria={}
)
}}

{{ action_bar(
properties={
title: "Action Bar with H5 header",
title_size: "h5",
actions: {
properties: {
items: [secbtn,primarybtn]
}
},
back_button: true
},
modifier={
block: []
},
state={},
aria={}
)
}}

{{ action_bar(
properties={
title: "Action Bar with H6 header",
title_size: "h6",
actions: {
properties: {
items: [secbtn,primarybtn]
}
},
back_button: true
},
modifier={
block: []
},
state={},
aria={}
)
}}

{{ action_bar(
properties={
title: "Action Bar with no back button",
Expand Down
7 changes: 6 additions & 1 deletion test/templates/mega-menu/component.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,12 @@ mega_menu:
{%- macro navgroup(properties={}) -%}
{%- for navgroup in properties -%}
<div class="fd-mega-menu__group">
<h1 class="fd-mega-menu__title">{{ navgroup.title }}</h1>
{%- if navgroup.title_size %}
{%- set title_size = navgroup.title_size %}
<{{title_size}} class="fd-mega-menu__title">{{ navgroup.title }}</{{title_size}}>
{%- else %}
<h3 class="fd-mega-menu__title">{{ navgroup.title }}</h3>
{%- endif %}
{{ navlist(navgroup.items) }}
</div>
{%- endfor -%}
Expand Down
148 changes: 148 additions & 0 deletions test/templates/mega-menu/index.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,5 +60,153 @@
{% endset %}
{{ format(example) }}

<br><br><br>

{% set example %}
{{ mega_menu(
properties = {
"title": "Group with H2 Title",
"title_size": "h2",
"navgroups": [
{
"title": "Group Name with H2 Title",
"title_size": "h2",
"items": [
{ "label": "item link" },
{
"label": "item link",
"haschild": true,
"items": [
{ "label": "Link" },
{ "label": "Link" },
{ "label": "Link" }
]
},
{ "label": "item link" }
]
}
]
},
modifier={
block: []
},
state={},
aria={}
)
}}
{% endset %}
{{ format(example) }}

<br><br><br>

{% set example %}
{{ mega_menu(
properties = {
"title": "Group with H4 Title",
"title_size": "h4",
"navgroups": [
{
"title": "Group Name with H4 Title",
"title_size": "h4",
"items": [
{ "label": "item link" },
{
"label": "item link",
"haschild": true,
"items": [
{ "label": "Link" },
{ "label": "Link" },
{ "label": "Link" }
]
},
{ "label": "item link" }
]
}
]
},
modifier={
block: []
},
state={},
aria={}
)
}}
{% endset %}
{{ format(example) }}

<br><br><br>

{% set example %}
{{ mega_menu(
properties = {
"title": "Group with H5 Title",
"title_size": "h5",
"navgroups": [
{
"title": "Group Name with H5 Title",
"title_size": "h5",
"items": [
{ "label": "item link" },
{
"label": "item link",
"haschild": true,
"items": [
{ "label": "Link" },
{ "label": "Link" },
{ "label": "Link" }
]
},
{ "label": "item link" }
]
}
]
},
modifier={
block: []
},
state={},
aria={}
)
}}
{% endset %}
{{ format(example) }}

<br><br><br>

{% set example %}
{{ mega_menu(
properties = {
"title": "Group with H6 Title",
"title_size": "h6",
"navgroups": [
{
"title": "Group Name with H6 Title",
"title_size": "h6",
"items": [
{ "label": "item link" },
{
"label": "item link",
"haschild": true,
"items": [
{ "label": "Link" },
{ "label": "Link" },
{ "label": "Link" }
]
},
{ "label": "item link" }
]
}
]
},
modifier={
block: []
},
state={},
aria={}
)
}}
{% endset %}
{{ format(example) }}


{% endblock %}
9 changes: 8 additions & 1 deletion test/templates/menu/component.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,14 @@ menu:

{% macro optgroup(properties={}, separated=false) -%}
<div class="fd-menu__group">
<h1 class="fd-menu__title">{{ properties.label }}</h1>
{%- if properties.label %}
{%- if properties.header_size %}
{%- set header_size = properties.header_size %}
<{{header_size}} class="fd-menu__title">{{ properties.label }}</{{header_size}}>
{%- else %}
<h3 class="fd-menu__title">{{ properties.label }}</h3>
{%- endif %}
{%- endif %}
<ul class="fd-menu__list{{ 'separated' | modifier('menu__list') if separated }}">
{%- for item in properties.items %}
{{ option(item) }}
Expand Down
Loading