Skip to content

Commit

Permalink
feat(iconic): add support for iconic variant
Browse files Browse the repository at this point in the history
  • Loading branch information
@braven112 @blackfalcon
braven112 authored and blackfalcon committed May 18, 2021
1 parent 26c2211 commit dc8f330
Show file tree
Hide file tree
Showing 5 changed files with 143 additions and 14 deletions.
42 changes: 42 additions & 0 deletions demo/banner-demo.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -279,6 +279,48 @@ The following example illustrates a `<auro-banner>` custom element with the `her
```
</auro-accordion>


## Iconic

The following example illustrates a `<auro-banner>` custom element with the `iconic` template style. The `iconic` template style hides the `displayImage` on small screen sizes and only shows the icon. This examples also shows how to customize the icon background color using `iconbg`.
<div class="exampleWrapper">
<auro-banner iconic iconbg="var(--auro-color-brand-neutral-400)">
<picture slot="displayImage">
<source srcset="https://picsum.photos/id/452/2800/2000.jpg" media="(min-width: 1054px)">
<source srcset="https://picsum.photos/id/452/1500/2000" media="(min-width:660px)">
<img src="https://picsum.photos/id/452/2800/2000.jpg" alt="">
</picture>
<span slot="icon">
<auro-icon category="social" name="instagram" customSize customColor style="color: white;width: 5rem"></auro-icon>
</span>
<span slot="title"><auro-header level="2" display="800" margin="both" size="none">Lorem ipsum title</auro-header><auro-header level="2" display="300" margin="top" size="none">You can add multiple auro-header's here</auro-header></span>
<p slot="description">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam possimus, quod aperiam a aut fuga qui eos reprehenderit facilis vero.
</p>
</auro-banner>
</div>

<auro-accordion lowProfile justifyRight>
<span slot="trigger">See code</span>

```html
<auro-banner iconic iconbg="var(--auro-color-brand-neutral-400)">
<picture slot="displayImage">
<source srcset="https://picsum.photos/id/452/2800/2000.jpg" media="(min-width: 1054px)">
<source srcset="https://picsum.photos/id/452/1500/2000" media="(min-width:660px)">
<img src="https://picsum.photos/id/452/2800/2000.jpg" alt="">
</picture>
<span slot="icon">
<auro-icon category="social" name="instagram" customSize customColor style="color: white;width: 5rem"></auro-icon>
</span>
<span slot="title"><auro-header level="2" display="800" margin="both" size="none">Lorem ipsum title</auro-header><auro-header level="2" display="300" margin="top" size="none">You can add multiple auro-header's here</auro-header></span>
<p slot="description">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam possimus, quod aperiam a aut fuga qui eos reprehenderit facilis vero.
</p>
</auro-banner>
```
</auro-accordion>

## Marquee

The following example illustrates a `<auro-banner>` custom element with the `marquee` template style. This template configuration also supports the `slim` and `onDark` attributes.
Expand Down
3 changes: 2 additions & 1 deletion demo/banner.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Auro Web Component Generator | auro-card custom element</title>
<title>Auro Web Component Generator | auro-banner custom element</title>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/prismjs@latest/themes/prism.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
Expand All @@ -23,6 +23,7 @@
</script>
<script type="module" src="../src/auro-banner.js"></script>
<script src="https://unpkg.com/@alaskaairux/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
<script src="https://unpkg.com/@alaskaairux/auro-icon@latest/dist/auro-icon__bundled.js" type="module"></script>
<script src="https://unpkg.com/@alaskaairux/auro-icon@latest/dist/auro-alaska__bundled.js" type="module"></script>
<script src="https://unpkg.com/@alaskaairux/auro-hyperlink@latest/dist/auro-hyperlink__bundled.js" type="module"></script>
</body>
Expand Down
2 changes: 2 additions & 0 deletions docs/api.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@ The auro-card-hero element provides users a flexible way to convey a summary of
| Property | Attribute | Type | Description |
|-----------------|-----------------|-----------|--------------------------------------------------|
| `hero` | `hero` | `Boolean` | to be used for hero style configuration |
| `iconBG` | `iconBG` | `String` | to be used in conjuction with the iconic variant this specifies the background color of the icon. |
| `iconic` | `iconic` | `Boolean` | to be used in as a hero on pages but with an icon and no displayImage on mobile |
| `marquee` | `marquee` | `Boolean` | to be used for marquee style configuration |
| `roundedBorder` | `roundedBorder` | `Boolean` | to be used for roundedBorder style configuration |

Expand Down
28 changes: 24 additions & 4 deletions src/auro-banner.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
// ---------------------------------------------------------------------

import { LitElement, html, css } from "lit-element";
import { ifDefined } from 'lit-html/directives/if-defined.js';

// Import touch detection lib
import "focus-visible/dist/focus-visible.min.js";
Expand All @@ -19,6 +20,8 @@ import "@alaskaairux/auro-header";
* The auro-card-hero element provides users a flexible way to convey a summary of information in various large formats.
* @attr {Boolean} billboard - to be used for billboard style configuration
* @attr {Boolean} hero - to be used for hero style configuration
* @attr {Boolean} iconic - to be used in as a hero on pages but with an icon and no displayImage on mobile
* @attr {String} iconBG - to be used in conjuction with the iconic variant this specifies the background color of the icon.
* @attr {Boolean} marquee - to be used for marquee style configuration
* @attr {Boolean} roundedBorder - to be used for roundedBorder style configuration
* @attr {Boolean} solid - to be used when you want a solid color as opposed to a transparent background
Expand Down Expand Up @@ -56,11 +59,17 @@ class AuroBanner extends LitElement {
hero: {
type: Boolean
},
iconic: {
type: Boolean
},
marquee: {
type: Boolean
},
roundedBorder: {
type: Boolean
},
iconBG: {
type: String
}
};
}
Expand All @@ -73,16 +82,19 @@ class AuroBanner extends LitElement {

// function that renders the HTML and CSS into the scope of the component
render() {

return html`
<div class="bannerWrapper">
${!this.roundedBorder
? html`
<slot name="displayImage" class="displayImage"></slot>`
: html``
}
<div class="bodyWrapper">
${this.iconic
? html`
<slot name="title"></slot>`
: html``
}
${this.hero
? html`
<auro-header level="2" display="300" margin="top" size="none" class="title prefix">
Expand All @@ -103,7 +115,7 @@ class AuroBanner extends LitElement {
: html``
}
${!this.roundedBorder && !this.marquee && !this.hero
${!this.marquee && !this.hero && !this.iconic && !this.roundedBorder
? html`
<auro-header level="2" display="600" margin="both" size="none" class="title">
<slot name="title"></slot>
Expand All @@ -113,7 +125,6 @@ class AuroBanner extends LitElement {
<slot name="contentImage" class="imageWrapper"></slot>
<div class="contentWrapper">
${this.roundedBorder
? html`
Expand All @@ -132,6 +143,15 @@ class AuroBanner extends LitElement {
</div>
</div>
</div>
${this.iconic
? html`
<div class="iconContainer">
<div class="roundIconBg" style="background: ${ifDefined(!this.iconBG ? undefined : this.iconBG)}">
<slot name="icon" class="icon"></slot>
</div>
</div>`
: html``
}
`;
}
}
Expand Down
82 changes: 73 additions & 9 deletions src/style-banner.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,6 @@
.title {
color: var(--auro-color-base-white);
}

}

// =-=-=-=-= billboard -=-=-=-=-=-=
Expand Down Expand Up @@ -169,6 +168,73 @@
}
}

// =-=-=-=-= iconic -=-=-=-=-=-=

:host([iconic]) {
@extend %auro-banner;

$iconBgSize: 7.5rem;

.iconAbsolute {
position: absolute;
}

.iconContainer {
display: flex;
align-items: center;
justify-content: center;
position: relative;
top: -$iconBgSize/6;
}

.roundIconBg {
width: $iconBgSize;
height: $iconBgSize;
background: var(--auro-color-brand-neutral-400);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
}

.displayImage {
display: none;

@include auro_breakpoint--sm {
display: block;
max-width: 50%;
right: 0;
position: absolute;
overflow: hidden;
}

&::slotted(img) {
display: block;
}
}
.description {
@include auro_breakpoint--sm {
padding-bottom: var(--auro-size-lg);
padding-right: var(--auro-size-lg);
}
}

.contentWrapper {
margin: 0 auto var(--auro-size-xxl);
padding-bottom: var(--auro-size-xxl);
}

.bodyWrapper {
text-align: left;
padding: var(--auro-size-xl) var(--auro-size-xl) var(--auro-size-xl) 0;
@include auro_breakpoint--sm {
width: 50%;
padding-left: 0;
}
}
}

// =-=-=-=-= marquee -=-=-=-=-=-=

:host([marquee]) {
Expand Down Expand Up @@ -224,23 +290,23 @@
}

.bodyWrapper {
align-items: center;
padding: var(--auro-size-md);

@include auro_breakpoint--sm {
flex-direction: row;
}

@include auro_breakpoint--md {
padding: var(--auro-size-lg);
}

@include auro_breakpoint--lg {
padding: var(--auro-size-xl);
}
align-items: center;

@include auro_breakpoint--sm {
flex-direction: row;
}
}

.imageWrapper {

@include auro_breakpoint--sm {
flex-basis: 30%;
display: flex;
Expand All @@ -253,7 +319,6 @@
// =-=-=-=-= right -=-=-=-=-=-=

:host([alignRight]) {

.bodyWrapper {
align-items: flex-end;
text-align: right;
Expand All @@ -263,7 +328,6 @@
// =-=-=-=-= left -=-=-=-=-=-=

:host([alignLeft]) {

.bodyWrapper {
align-items: flex-start;
text-align: left;
Expand Down

0 comments on commit dc8f330

Please sign in to comment.