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

Header donation #91

Merged
merged 8 commits into from
Nov 20, 2020
Merged

Header donation #91

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
aad11a9
chore(header): convey styles .btn-donate for easier inject custom donate
duranmla Nov 18, 2020
caf1020
feat(header): allow to inject custom donate button
duranmla Nov 18, 2020
e8dc9a2
fix(header): align icons on user-items menu
duranmla Nov 18, 2020
abfaba7
feat(header): adjust donate button placement
duranmla Nov 19, 2020
3ddae28
feat(collapser): make open class to live on parent node
duranmla Nov 19, 2020
eedd2f9
fix(dc-dropdown): make sure icon caret change color on hover
duranmla Nov 19, 2020
0729c66
fix(header): make sure collapser icon change color on hover
duranmla Nov 19, 2020
8a7f75d
feat(header): create two separate slots for donate on header and menu
duranmla Nov 19, 2020
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
3 changes: 2 additions & 1 deletion packages/dropdown-component/src/components/dc-dropdown/dc-dropdown.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,8 @@
color: var(--text-color);
}

:host .nav-link:hover {
:host .nav-link:hover,
:host .nav-link:hover .material-icons {
color: var(--brand-color);
}

Expand Down
11 changes: 10 additions & 1 deletion packages/header-component/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@ yarn remove @debtcollective/dc-dropdown-component
yarn add @debtcollective/dc-dropdown-component
```


```bash
yarn install
yarn start
Expand Down Expand Up @@ -80,6 +79,16 @@ Alternatively, you can choose to inject your own structure by doing something li

> NOTE: be aware of not adding the latest "/" on the url props such as host and community

if you need to use router link within the donate button you should set `donateurl` to falsy value so the custom donate button will render alone

```jsx
<dc-header donateurl="">
<div slot="donate">
<Link class="btn-donate">Donate</Link>
</div>
</dc-header>
```

### Script tag

- [Publish to NPM](https://docs.npmjs.com/getting-started/publishing-npm-packages)
Expand Down
7 changes: 4 additions & 3 deletions packages/header-component/src/components/dc-header/dc-collapser.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,19 +10,20 @@ dc-collapser .collapser-items {
cursor: pointer;
}

dc-collapser .collapser-items.open {
dc-collapser.open .collapser-items {
display: block;
}

dc-collapser .collapser-items.hidden {
dc-collapser.collapsed .collapser-items {
display: none;
}

dc-collapser .collapser-item {
margin-bottom: 0.75rem;
}

dc-collapser .collapser-items .collapser-item:hover .collapser-item-text {
dc-collapser .collapser-items .collapser-item:hover .collapser-item-text,
dc-collapser .nav-link:hover .material-icons {
color: var(--brand-color);
}

Expand Down
52 changes: 23 additions & 29 deletions packages/header-component/src/components/dc-header/dc-collapser.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,10 @@
import {
Component,
h,
State,
Prop,
} from "@stencil/core";
import omit from 'lodash.omit';
import { Component, h, State, Prop, Host } from "@stencil/core";
import omit from "lodash.omit";

@Component({
assetsDirs: ["assets"],
tag: "dc-collapser",
styleUrl: "dc-collapser.css"
styleUrl: "dc-collapser.css",
})
export class Collapser {
/**
Expand All @@ -21,7 +16,7 @@ export class Collapser {
* Items to be displayed in the collapser
*/
@Prop() items: string;

@State() open: boolean;

toggleCollapser() {
Expand All @@ -30,32 +25,31 @@ export class Collapser {

render() {
//TODO: @Watch approach seems to not work correctly
const _items = JSON.parse(this.items)
const _items = JSON.parse(this.items);

return (
<div class="nav-item">
<button
class="nav-link btn btn-transparent"
onClick={this.toggleCollapser.bind(this)}
>
{this.label || ''}
<span class="material-icons">
{this.open ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}
</span>
</button>
<ul class={`collapser-items ${this.open ? "open " : "hidden"}`}>
{
_items?.map(item => (
<Host class={`${this.open ? "open " : "collapsed"}`}>
<div class="nav-item">
<button
class="nav-link btn btn-transparent"
onClick={this.toggleCollapser.bind(this)}
>
{this.label || ""}
<span class="material-icons">
{this.open ? "keyboard_arrow_up" : "keyboard_arrow_down"}
</span>
</button>
<ul class="collapser-items">
{_items?.map((item) => (
<li class="collapser-item">
<a class="collapser-item-text" {...omit(item, ['text'])}>
<a class="collapser-item-text" {...omit(item, ["text"])}>
{item.text}
</a>
</li>
))
}
</ul>
</div>
))}
</ul>
</div>
</Host>
);
}
}

38 changes: 33 additions & 5 deletions packages/header-component/src/components/dc-header/dc-header.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,6 +116,14 @@ dc-header .session-items {
margin-left: 1rem;
}

dc-header .session-items .with-user {
display: flex;
}

dc-header .session-items .with-user .btn-donate {
margin-right: 2rem;
}

dc-header .session-items .material-icons {
font-size: 1.25rem;
padding: 0.2143rem;
Expand All @@ -132,17 +140,34 @@ dc-header .session-links {
align-items: center;
}

dc-header .session-items .btn-donate {
display: none;
}

@media (min-width: 1024px) {
dc-header .session-items .btn-donate {
display: block;
}
}

/* Buttons */
dc-header .btn {
dc-header .btn,
dc-header .btn-donate {
align-items: center;
border-radius: 0.25rem;
cursor: pointer;
display: flex;
font-size: 1rem;
justify-content: space-between;
padding: 0.5rem 1rem;
transition: background 0.216s ease, color 0.216s ease;
}

dc-header .btn-donate {
display: block;
text-align: center;
}

dc-header .btn-outline {
background: transparent;
border: 0.0625rem solid var(--text-color);
Expand All @@ -153,19 +178,22 @@ dc-header .btn-outline:hover {
background: var(--outline-button-hover-color);
}

dc-header .btn-primary {
dc-header .btn-primary,
dc-header .btn-donate {
background: var(--button-color);
border: 0.0625rem solid var(--button-color);
color: #fff;
}

dc-header .btn-primary:hover {
dc-header .btn-primary:hover,
dc-header .btn-donate:hover {
border: 0.0625rem solid var(--button-hover-color);
background: var(--button-hover-color);
}

dc-header .header .btn + .btn {
margin-left: 0.4375rem;
dc-header .header .btn + .btn,
dc-header .session-items .btn-donate {
margin-left: 0.5rem;
}

dc-header .btn-transparent {
Expand Down
30 changes: 26 additions & 4 deletions packages/header-component/src/components/dc-header/dc-header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -205,7 +205,16 @@ export class Header {
</nav>
<div class="session-items">
{this.user ? (
<dc-user-items user={this.user} community={this.community} />
<div class="with-user">
<slot name="donate">
{this.donateurl && (
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we remove this now the fix has landed on Stencil?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It has been merge to master on the stenciljs project but it hasn't get released yet @orlando
https://github.com/ionic-team/stencil/commits/master currently the latest version is 2.3.0 and it doesn't have the fix yet.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have created a technical debt for this one so we can move forward now

<a href={this.donateurl} class="btn-donate">
Donate
</a>
)}
</slot>
<dc-user-items user={this.user} community={this.community} />
</div>
) : (
<div class="session-links">
<a
Expand All @@ -217,9 +226,13 @@ export class Header {
>
<span class="d-md-flex">Member</span>&nbsp;Login
</a>
<a href={this.donateurl} class="btn btn-primary">
Donate
</a>
<slot name="donate-header">
{this.donateurl && (
<a href={this.donateurl} class="btn-donate">
Donate
</a>
)}
</slot>
</div>
)}
</div>
Expand All @@ -235,6 +248,15 @@ export class Header {
))}
</slot>
<dc-collapser label="Take Action!" items={TAKE_ACTION_LINKS} />
<div class="menu-footer">
<slot name="donate-menu">
{this.donateurl && (
<a href={this.donateurl} class="btn-donate">
Donate
</a>
)}
</slot>
</div>
</dc-menu>
</Host>
);
Expand Down
14 changes: 13 additions & 1 deletion packages/header-component/src/components/dc-header/dc-menu.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ dc-menu .menu-close {
}

dc-menu .menu-logo {
width: 50%;
width: 75%;
}

dc-menu .nav-header {
Expand All @@ -73,4 +73,16 @@ dc-menu .nav-header {

dc-menu .menu-nav .nav-item {
margin-bottom: 1rem;
padding: 0 var(--column-gap);
}

dc-menu .menu-nav {
display: flex;
flex-direction: column;
flex: 1;
}

dc-menu .menu-footer {
margin-top: 1rem;
padding: 0 var(--column-gap) 1rem;
}
5 changes: 5 additions & 0 deletions packages/header-component/src/components/dc-header/dc-user-dropdown.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,3 +66,8 @@ dc-user-dropdown .user-dropdown-items .user-dropdown-item .user-dropdown-item-de
font-size: 0.75rem;
line-height: 1rem;
}

dc-user-dropdown .user-dropdown-items .material-icons {
padding-left: 0;
margin-right: 0.5rem;
}