Skip to content

Commit f8e2b20

Browse files
hirsch88hirsch88
committed
add navbar back
1 parent 3011563 commit f8e2b20

File tree

2 files changed

+86
-139
lines changed

2 files changed

+86
-139
lines changed

‎packages/core/src/components/bal-shape/bal-shape.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import { Component, h, ComponentInterface, Host, Element, Prop } from '@stencil/core'
2-
import { BEM } from '../../utils/bem'
31
import * as BaloiseDesignToken from '@baloise/ds-tokens'
2+
import { Component, ComponentInterface, Element, h, Host, Prop } from '@stencil/core'
3+
import { BEM } from '../../utils/bem'
44

55
@Component({
66
tag: 'bal-shape',
@@ -40,7 +40,7 @@ export class Shape implements ComponentInterface {
4040
color = BaloiseDesignToken.balColorRed3
4141
break
4242
case 'purple':
43-
color = '#a8281c'
43+
color = BaloiseDesignToken.balColorPurple6
4444
break
4545
case 'purple-light':
4646
color = BaloiseDesignToken.balColorPurple3

‎packages/core/src/test/theme.visual.html‎

Lines changed: 83 additions & 136 deletions
Original file line numberDiff line numberDiff line change
@@ -12,20 +12,6 @@
1212

1313
<body>
1414
<bal-doc-app>
15-
<header class="bg-primary-1 hidden" id="nav-app">
16-
<bal-navbar interface="simple">
17-
<bal-navbar-brand id="bal-navbar-brand" href="/" target="_blank" animated="false"></bal-navbar-brand>
18-
</bal-navbar>
19-
<nav class="container">
20-
<bal-tabs spaceless value="baloise" id="theme-tabs">
21-
<bal-tab-item href="?theme" label="Baloise" value="baloise"></bal-tab-item>
22-
<bal-tab-item href="?theme=compact" label="Baloise Compact" value="compact"></bal-tab-item>
23-
<bal-tab-item href="?theme=tcs" label="TCS" value="tcs"></bal-tab-item>
24-
<bal-tab-item href="?theme=santander" label="Santander" value="santander"></bal-tab-item>
25-
<bal-tab-item href="?theme=future" label="Future" value="future"></bal-tab-item>
26-
</bal-tabs>
27-
</nav>
28-
</header>
2915
<header id="nav-web">
3016
<bal-nav id="nav" data-testid="basic">
3117
<bal-popup id="popup-call" label="24h Kundenservice" content-width="440">
@@ -94,12 +80,32 @@
9480
</bal-nav>
9581
</header>
9682
<main class="pb-medium">
97-
<bal-stage color="purple" shape size="small" containerSize="wide" class="mb-xxx-large">
83+
<bal-stage color="purple" shape="false" size="small" containerSize="wide">
9884
<bal-stage-body>
9985
<bal-stage-back-link href="#" class="mb-medium">Back</bal-stage-back-link>
10086
<bal-heading class="mb-x-small" space="none">Theme Lab</bal-heading>
10187
</bal-stage-body>
10288
</bal-stage>
89+
90+
<!-- ----------------------------------------- -->
91+
<!-- Navbar -->
92+
<!-- ----------------------------------------- -->
93+
<!-- <h1 id="colors" class="title text-xxx-large border-top-primary mt-large bg-grey-1 p-medium">App Header</h1> -->
94+
<div class="bg-primary-1">
95+
<bal-navbar interface="simple">
96+
<bal-navbar-brand id="bal-navbar-brand" href="/" target="_blank" animated="false">Navbar</bal-navbar-brand>
97+
</bal-navbar>
98+
<nav class="container">
99+
<bal-tabs spaceless value="baloise" id="theme-tabs">
100+
<bal-tab-item href="?theme" label="Baloise" value="baloise"></bal-tab-item>
101+
<bal-tab-item href="?theme=compact" label="Baloise Compact" value="compact"></bal-tab-item>
102+
<bal-tab-item href="?theme=tcs" label="TCS" value="tcs"></bal-tab-item>
103+
<bal-tab-item href="?theme=santander" label="Santander" value="santander"></bal-tab-item>
104+
<bal-tab-item href="?theme=future" label="Future" value="future"></bal-tab-item>
105+
</bal-tabs>
106+
</nav>
107+
</div>
108+
103109
<div class="container">
104110
<!-- ----------------------------------------- -->
105111
<!-- Colors -->
@@ -836,59 +842,39 @@ <h1 id="footer" class="title text-xxx-large border-top-primary mt-large bg-grey-
836842
*/
837843
const urlParams = new URLSearchParams(window.location.search)
838844
const theme = urlParams.get('theme')
839-
if (theme) {
840-
const link = document.createElement('link')
841-
link.rel = 'stylesheet'
842-
link.href = `/assets/${theme}.css`
843-
document.head.appendChild(link)
844845

845-
/**
846-
* Set the logo in the navbar according to the theme
847-
*/
848-
let logo = ''
849-
switch (theme) {
850-
case 'santander':
851-
logo = 'https://hagcli.bancosantander.es/assets/images/santander-logo.svg'
852-
break
853-
case 'tcs':
854-
logo = 'https://www.tcs.ch/global/wGlobal/layout/images/logo.png?v2'
855-
break
856-
case 'future':
857-
logo = '/assets/future-logo.svg'
858-
break
859-
default:
860-
logo = ''
861-
}
862-
863-
setTimeout(() => {
864-
const navbarBrand = document.getElementById('bal-navbar-brand')
865-
if (navbarBrand) {
866-
navbarBrand.setAttribute('logo', logo)
867-
if (theme === 'santander') {
868-
navbarBrand.setAttribute('logo-size', 'small')
869-
}
870-
}
871-
872-
const footer = document.getElementById('bal-footer')
873-
if (footer) {
874-
footer.setAttribute('logo-href', logo)
875-
}
876-
877-
const tabs = document.getElementById('theme-tabs')
878-
if (tabs) {
879-
tabs.setAttribute('value', theme || 'baloise')
880-
}
881-
}, 200)
846+
/**
847+
* Set the logo in the navbar according to the theme
848+
*/
849+
let logo = ''
850+
switch (theme) {
851+
case 'santander':
852+
logo = 'https://hagcli.bancosantander.es/assets/images/santander-logo.svg'
853+
break
854+
case 'tcs':
855+
logo = 'https://www.tcs.ch/global/wGlobal/layout/images/logo.png?v2'
856+
break
857+
case 'future':
858+
logo = '/assets/future-logo.svg'
859+
break
860+
default:
861+
logo = ''
882862
}
883-
</script>
884-
<script>
885-
const nav = document.getElementById('nav')
886863

864+
/**
865+
* Setup Navigation
866+
*/
867+
const nav = document.getElementById('nav')
887868
const logoLinkItem = {
888869
href: '/test/theme.visual.html?theme=future',
889870
ariaLabel: 'Homepage',
890871
htmlTitle: 'Homepage',
891-
url: '/assets/future-logo-black.svg',
872+
url:
873+
theme === 'future'
874+
? '/assets/future-logo-black.svg'
875+
: theme === 'santander'
876+
? 'https://www.santander.co.uk/themes/custom/santander_web18_2_0/logo.svg'
877+
: logo,
892878
}
893879

894880
const serviceLinkItem = {
@@ -1289,85 +1275,16 @@ <h1 id="footer" class="title text-xxx-large border-top-primary mt-large bg-grey-
12891275
},
12901276
},
12911277
{
1292-
label: 'Konten, Karten & Finanzierung',
1293-
sectionLinkItems: [
1294-
{
1295-
label: 'Zahlen und Sparen',
1296-
linkItems: [
1297-
{
1298-
label: 'Konten',
1299-
},
1300-
{
1301-
label: 'Bankpakete der Baloise Bank',
1302-
},
1303-
{
1304-
label: 'Karten',
1305-
},
1306-
{
1307-
label: 'Reisezahlungsmittel',
1308-
},
1309-
],
1310-
},
1311-
{
1312-
label: 'Finanzieren',
1313-
linkItems: [
1314-
{
1315-
label: 'Alle Hypotheken',
1316-
},
1317-
{
1318-
label: 'Zinsrabatte mit Hypobonus',
1319-
},
1320-
{
1321-
label: 'Online-Hypothek',
1322-
},
1323-
{
1324-
label: 'Festhypothek',
1325-
},
1326-
{
1327-
label: 'Baukredit',
1328-
},
1329-
{
1330-
label: 'Privatkredit',
1331-
},
1332-
],
1333-
},
1334-
],
1335-
serviceLinkItems: [
1336-
{
1337-
label: 'Services',
1338-
linkItems: [
1339-
{
1340-
label: 'Karte sperren',
1341-
},
1342-
{
1343-
label: 'E-Banking',
1344-
},
1345-
{
1346-
label: 'Bankkonditionen',
1347-
},
1348-
{
1349-
label: 'Mobile Payment',
1350-
},
1351-
{
1352-
label: 'Nutzungsbestimmungen Online-Hypothek',
1353-
},
1354-
],
1355-
},
1356-
],
1357-
overviewLink: {
1358-
label: 'Alle Bankprodukte',
1359-
href: '/test/theme.visual.html?theme=future',
1360-
},
1278+
label: 'Baloise',
1279+
href: '/test/theme.visual.html?theme=baloise',
13611280
},
13621281
{
1363-
label: 'Kontakt & Services',
1364-
href: 'https://www.baloise.ch/de/privatkunden/kontakt-services/berater-standorte.html',
1365-
target: '_blank',
1282+
label: 'TCS',
1283+
href: '/test/theme.visual.html?theme=tcs',
13661284
},
13671285
{
1368-
label: 'Blog',
1369-
href: 'https://www.baloise.ch/de/privatkunden/kontakt-services/berater-standorte.html',
1370-
target: '_blank',
1286+
label: 'Santander',
1287+
href: '/test/theme.visual.html?theme=santander',
13711288
},
13721289
],
13731290
},
@@ -1408,6 +1325,36 @@ <h1 id="footer" class="title text-xxx-large border-top-primary mt-large bg-grey-
14081325
],
14091326
},
14101327
]
1328+
1329+
if (theme) {
1330+
const link = document.createElement('link')
1331+
const navApp = document.createElement('nav-app')
1332+
const navWeb = document.createElement('nav-web')
1333+
const stage = document.createElement('bal-stage')
1334+
link.rel = 'stylesheet'
1335+
link.href = `/assets/${theme}.css`
1336+
document.head.appendChild(link)
1337+
1338+
setTimeout(() => {
1339+
const navbarBrand = document.getElementById('bal-navbar-brand')
1340+
if (navbarBrand) {
1341+
navbarBrand.setAttribute('logo', logo)
1342+
if (theme === 'santander') {
1343+
navbarBrand.setAttribute('logo-size', 'small')
1344+
}
1345+
}
1346+
1347+
const footer = document.getElementById('bal-footer')
1348+
if (footer) {
1349+
footer.setAttribute('logo-href', logo)
1350+
}
1351+
1352+
const tabs = document.getElementById('theme-tabs')
1353+
if (tabs) {
1354+
tabs.setAttribute('value', theme || 'baloise')
1355+
}
1356+
}, 200)
1357+
}
14111358
</script>
14121359
</body>
14131360
</html>

0 commit comments

Comments
 (0)