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

fix(og-card) hide footer and header when there's no content #116

Merged
merged 4 commits into from
Jan 23, 2020
Merged

fix(og-card) hide footer and header when there's no content #116

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
686be2c
fix(og-card) hide footer and header when there's no content
demkani Jan 8, 2020
bb80ab7
fix(og-card) update readme
demkani Jan 9, 2020
b00d8fa
Apply suggestions from code review
jfu-maximago Jan 17, 2020
f38268b
Merge branch 'develop' into fix_card-slots
jfu-maximago Jan 23, 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
42 changes: 20 additions & 22 deletions src/components/og-card/og-card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,58 +4,56 @@
* See LICENSE file at https://github.com/orgenic/orgenic-ui/blob/master/LICENSE
**/

import { h, Component, Prop } from '@stencil/core';
import { h, Element, Component, Prop } from '@stencil/core';

@Component({
tag: 'og-card',
styleUrl: 'og-card.scss',
shadow: true
})
export class OgCard {

@Element()
public hostElement: HTMLElement;

/**
* The title for this card (optional)
*/
@Prop()
public name: string;

public handleDivRef(el: HTMLElement) {
if (!el) {
return;
}

const slot = el.firstChild as HTMLSlotElement;
if (!slot) {
return;
}

el.style.display = slot.assignedNodes().length > 0 ? 'block' : 'none';

slot.addEventListener('slotchange', () => {
el.style.display = slot.assignedNodes().length > 0 ? 'block' : 'none';
})
/**
* Check if a given name exists as a slot inside this component.
*/
private hasSlot(name: string): boolean {
const slot = this.hostElement.querySelector(`[slot="${name}"]`);
return slot !== null;
}

public render(): HTMLElement {
return (
<div class="og-card">
<div class="og-card__header">
{
(this.hasSlot('header') || this.name) && <div class="og-card__header">
{
this.name
? <span class="og-card__title">{ this.name }</span>
: ""
}
<slot name="header"></slot>
</div>

</div>
}
<div class="og-card__content">
{/* allow the user to use an unnamed slot instead of always having to assign as "content" */}
<slot></slot>
<slot name="content"></slot>
</div>

<div class="og-card__footer" ref={ el => this.handleDivRef(el) }>
<slot name="footer"></slot>
</div>
{
this.hasSlot('footer') && <div class="og-card__footer">
<slot name="footer"></slot>
</div>
}
</div>
);
}
Expand Down
35 changes: 16 additions & 19 deletions src/components/og-list/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,19 +7,16 @@

## Properties

| Property | Attribute | Description | Type | Default |
| ------------------ | -------------------- | ----------------------------------------------------------------------------------------------------------- | -------------------- | ---------------------- |
| `disabled` | `disabled` | Determines, whether the control is disabled or not | `boolean` | `undefined` |
| `disabledProperty` | `disabled-property` | Set the property for the items to define as disabled. Default: 'disabled' | `string` | `'disabled'` |
| `emptyListMessage` | `empty-list-message` | Set the text that will be displayed if the items array is empty. | `string` | `'No items available'` |
| `imageUrlProperty` | `image-url-property` | Set the property for the items to define as image url. *Optional* Default: no image | `string` | `undefined` |
| `items` | -- | An array of items to choose from | `any[]` | `undefined` |
| `keyProperty` | `key-property` | Set the property for the items to define as value. Default: 'key' | `string` | `'key'` |
| `labelProperty` | `label-property` | Set the property for the items to define as label. Default: 'label' | `string` | `'label'` |
| `multiselect` | `multiselect` | Enables selection of multiple items | `boolean` | `undefined` |
| `required` | `required` | Requires a selection of at least one item. If one item is selected it prevents the user from deselecting it | `boolean` | `undefined` |
| `selected` | `selected` | The key of the selected list item | `string \| string[]` | `undefined` |
| `valueProperty` | `value-property` | Set the property for the items to define as value. *Optional* Default: no value | `string` | `undefined` |
| Property | Attribute | Description | Type | Default |
| ------------------ | -------------------- | ----------------------------------------------------------------------------------------------------------- | -------------------- | ------------------------------------------------------ |
| `disabled` | `disabled` | Determines, whether the control is disabled or not | `boolean` | `undefined` |
| `emptyListMessage` | `empty-list-message` | Set the text that will be displayed if the items array is empty. | `string` | `'No items available'` |
| `items` | -- | An array of items to choose from | `any[]` | `undefined` |
| `multiselect` | `multiselect` | Enables selection of multiple items | `boolean` | `undefined` |
| `required` | `required` | Requires a selection of at least one item. If one item is selected it prevents the user from deselecting it | `boolean` | `undefined` |
| `selected` | `selected` | Key(s) of the selected list item(s) | `string \| string[]` | `undefined` |
| `template` | `template` | | `string` | `'default'` |
| `templateOptions` | `template-options` | | `any` | `{ key: 'key', label: 'label', disabled: 'disabled' }` |


## Events
Expand All @@ -31,22 +28,22 @@

## CSS Custom Properties

| Name | Description |
| ----------------------------- | ------------------------------------------ |
| `--og-list-Opacity` | Overall opacity of the list |
| `--og-list-Opacity--disabled` | Overall opacity of the list when disabled. |
| Name | Description |
| ----------------------------- | ----------------------------------------- |
| `--og-list-Opacity` | Overall opacity of the list |
| `--og-list-Opacity--disabled` | Overall opacity of the list when disabled |


## Dependencies

### Depends on

- [og-list-item](..\og-list-item)
- [og-list-template-default](..\og-list-template-default)

### Graph
```mermaid
graph TD;
og-list --> og-list-item
og-list --> og-list-template-default
style og-list fill:#f9f,stroke:#333,stroke-width:4px
```

Expand Down