Skip to content
This repository has been archived by the owner on Jul 12, 2020. It is now read-only.

Implement no-* attributes for <box> #129

Merged
merged 4 commits into from
Mar 8, 2020
Merged

Implement no-* attributes for <box> #129

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
3f63db9
Implement no-* attributes
nbriannl Feb 12, 2020
8af947d
Update conditional render for icon
nbriannl Feb 26, 2020
55caed4
Remove extra line
nbriannl Feb 26, 2020
2c22aee
Fix typo
nbriannl Feb 27, 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
50 changes: 42 additions & 8 deletions src/TipBox.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<div class="alert box-container" :class="[boxStyle, addClass, lightStyle, seamlessStyle]" :style="customStyle">
<div class="alert box-container" :class="[boxStyle, addClass, lightStyle, seamlessStyle, noBackgroundStyle, noBorderStyle]" :style="customStyle">
<div v-if="headerBool" :class="['box-header-wrapper', { 'alert-dismissible': dismissible }]">
<div v-show="!isDefault" class="icon-wrapper" :class="[iconStyle]">
<div v-show="hasIcon" class="icon-wrapper" :class="[iconStyle]">
<slot name="_icon">
<span v-html="iconType"></span>
</slot>
Expand All @@ -15,7 +15,7 @@
</div>
<div v-if="horizontalDividerBool" class="horizontal-divider" :class="boxStyle" aria-hidden="true"></div>
<div :class="['box-body-wrapper', { 'alert-dismissible': dismissible && !headerBool, 'box-body-wrapper-with-heading': headerBool }]">
<div v-show="!isDefault && !headerBool" class="icon-wrapper" :class="[iconStyle]">
<div v-show="hasIcon && !headerBool" class="icon-wrapper" :class="[iconStyle]">
<slot name="_icon">
<span v-html="iconType"></span>
</slot>
Expand Down Expand Up @@ -79,11 +79,20 @@
type: Boolean,
default: false,
},
noIcon: {
type: Boolean,
default: false,
},
noBackground: {
type: Boolean,
default: false,
},
noBorder: {
type: Boolean,
default: false,
}
},
computed: {
isDefault() {
return this.type === 'none'
},
isSeamless() {
return !this.light && this.seamless;
},
Expand Down Expand Up @@ -140,7 +149,7 @@
style.borderColor = this.backgroundColor;
}
if (this.borderColor) {
style.borderColor = this.borderColor;
style.border = `1px solid ${this.borderColor}`;
}
if (this.borderLeftColor) {
style.borderLeft = `5px solid ${this.borderLeftColor}`;
Expand All @@ -162,6 +171,11 @@
}
return '';
},
hasIcon() {
// this.$slots._icon is either undefined or an object
const isIconSlotFilled = !!this.$slots._icon;
return !this.noIcon || isIconSlotFilled;
},
iconType() {
switch (this.type) {
case 'wrong':
Expand All @@ -179,14 +193,26 @@
case 'definition':
return '<i class="fas fa-atlas"></i>';
default:
return '<i class="fas fa-exclamation"></i>';
Copy link
Author

Choose a reason for hiding this comment

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

Default boxes do not have icons.

return '';
}
},
iconStyle() {
if (this.iconSize) {
return `fa-${this.iconSize}`;
}
return '';
},
noBackgroundStyle() {
if (this.noBackground) {
Copy link

Choose a reason for hiding this comment

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

I wonder if this will make this part less verbose:

return this.noBackground? 'no-background' : '';

Copy link
Author

@nbriannl nbriannl Feb 26, 2020 •
edited
Loading

Choose a reason for hiding this comment

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

I made it consistent to the coding style of other computed properties. For example,

      seamlessStyle() {
        if (this.isSeamless) {
          return 'seamless';
        }
        return '';
      },
      fontBlack() {
        if (this.light) {
          return 'font-black';
        }
        return '';
      },

return 'no-background';
}
return '';
},
noBorderStyle() {
if (this.noBorder) {
return 'no-border';
}
return '';
}
}
}
Expand Down Expand Up @@ -297,6 +323,14 @@
width: calc(100% - 2.5rem);
height: 3px;
}

.no-background {
background: none;
}

.no-border {
border: none;
}
</style>

<!-- TODO move this once we upgrade vue-loader version for scoped deep selectors -->
Expand Down