Skip to content
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

feat: dont show card header border #106

Merged
merged 4 commits into from
Nov 26, 2021
Merged

feat: dont show card header border #106

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6e78717
feat: dont shot card header border
Nov 24, 2021
b4a7fbe
fix: removed inverse property
Nov 24, 2021
723a55c
fix: updated coverage
Nov 24, 2021
d7453fd
feat: removed header border
Nov 26, 2021
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
2 changes: 1 addition & 1 deletion packages/dgt-components/lib/components/cards/card.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ export class CardComponent extends LitElement {

${!this.hideHeader
? html`
<card-header inverse>
<card-header class="inverse">
<slot name="icon" slot="icon"></slot>
<slot name="title" slot="title"></slot>
<slot name="subtitle" slot="subtitle"></slot>
Expand Down
19 changes: 0 additions & 19 deletions packages/dgt-components/lib/components/header/content-header.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,23 +45,4 @@ describe('ContentHeaderComponent', () => {

});

it.each([ true, false ])('should show set inverse class', async (inverse) => {

component.inverse = inverse;

window.document.body.appendChild(component);
await component.updateComplete;

if(inverse) {

expect(window.document.body.getElementsByTagName('card-header')[0].shadowRoot.querySelector('.header.inverse')).toBeFalsy();

} else {

expect(window.document.body.getElementsByTagName('card-header')[0].shadowRoot.querySelector('.header.inverse')).toBeTruthy();

}

});

});
48 changes: 17 additions & 31 deletions packages/dgt-components/lib/components/header/content-header.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,6 @@ import { Theme } from '@digita-ai/dgt-theme';
*/
export class ContentHeaderComponent extends LitElement {

/**
* Decides the color variant of this component (dark/light)
*/
@property({ type: Boolean })
public inverse = false;

/**
* Renders the component as HTML.
*
Expand All @@ -20,8 +14,6 @@ export class ContentHeaderComponent extends LitElement {
render() {

return html`
<div class="header ${this.inverse ? '' : 'inverse'}">

<div class="icon">
<slot name="icon"></slot>
</div>
Expand All @@ -34,8 +26,6 @@ export class ContentHeaderComponent extends LitElement {
<div class="actions">
<slot name="actions"></slot>
</div>

</div>
`;

}
Expand All @@ -49,63 +39,59 @@ export class ContentHeaderComponent extends LitElement {
unsafeCSS(Theme),
css`
:host {
display: block;
height: 99px;
min-height: 99px;
}
.header.inverse {
background-color: var(--colors-primary-dark);
color: var(--colors-foreground-inverse);
fill: var(--colors-foreground-inverse);
}
.header {
height: 100%;
padding: 0px var(--gap-large);
background-color: var( --colors-background-light);
color: var(--colors-foreground-normal);
fill: var(--colors-foreground-normal);
border-bottom: 1px solid var(--colors-primary-normal);
display: flex;
flex-direction: row;
align-items: center;
}
.header .icon {


:host.inverse {
background-color: var(--colors-primary-dark);
color: var(--colors-foreground-inverse);
fill: var(--colors-foreground-inverse);
}
.icon {
font-size: 25px;
}
.header.inverse .icon ::slotted(svg) {
inverse .icon ::slotted(svg) {
fill: var(--colors-foreground-inverse);
}
.header .icon ::slotted(*) {
.icon ::slotted(*) {
height: 25px;
width: 25px;
}
.header .content {
.content {
flex: 1 0;
margin: 0 var(--gap-normal);
}
.header .content slot[name="title"]::slotted(*) {
.content slot[name="title"]::slotted(*) {
overflow: hidden;
font-weight: var(--font-weight-bold);
font-size: var(--font-size-normal);
height: var(--gap-normal);
line-height: var(--gap-normal);
}
.header .content slot[name="subtitle"]::slotted(*) {
.content slot[name="subtitle"]::slotted(*) {
overflow: hidden;
margin-top: var(--gap-tiny);
font-size: var(--font-size-small);
height: var(--gap-normal);
line-height: var(--gap-normal);
}
.header .actions {
.actions {
margin-right: var(--gap-normal);
display: flex;
flex-direction: row;
}
.header .actions:last-child {
.actions:last-child {
margin-right: 0px;
}
.header .actions ::slotted(*) {
.actions ::slotted(*) {
max-height: var(--gap-normal);
max-width: var(--gap-normal);
height: var(--gap-normal);
Expand All @@ -115,7 +101,7 @@ export class ContentHeaderComponent extends LitElement {
cursor: pointer;
margin-left: var(--gap-normal);
}
.header.inverse .actions ::slotted(*) {
:host.inverse .actions ::slotted(*) {
fill: var(--colors-foreground-inverse);
color: var(--colors-foreground-inverse);
}
Expand Down
8 changes: 4 additions & 4 deletions packages/dgt-components/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,10 +90,10 @@
],
"coverageThreshold": {
"global": {
"branches": 32.14,
"functions": 33.93,
"lines": 37.64,
"statements": 37.78
"branches": 31.44,
"functions": 33.63,
"lines": 37.55,
"statements": 37.62
}
},
"coveragePathIgnorePatterns": [
Expand Down