Skip to content

Commit

Permalink
docs: update demo, picture img display type
Browse files Browse the repository at this point in the history 
The demo talks about how the img element with the picture element
is an inline element and will add space. Solutions are described.
  • Loading branch information
@blackfalcon
blackfalcon committed Apr 3, 2021
1 parent e4ebe98 commit 26c2211
Show file tree
Hide file tree
Showing 2 changed files with 68 additions and 73 deletions.
39 changes: 19 additions & 20 deletions demo/banner-demo.md
View file
Original file line number Diff line number Diff line change
@@ -1,29 +1,29 @@
# Banner

The `auro-banner` element provides users a flexible way to convey a summary of information. The primary elements of a banner include an image, and details.
The `<auro-banner>` element provides users a flexible way to convey a summary of information. The primary elements of a banner include an image, and details.

The details are broken down into `prefix`, `title`, `description`, `action`, and `disclaimer`.

## Component use cases

Use the `auro-banner` element to:
Use the `<auro-banner>` element to:

* grab the attention of a user
* direct your user to another resource for further information

## Do not...

Use `auro-banner` as the primary source of information.
Use `<auro-banner>` as the primary source of information.

## Default element

The default `auro-banner` element features configuration options when using using the `displayImage`, `contentImage`, `prefix`, `title`, `description`, `action` and `disclaimer` slots for structured content placement.
The default `<auro-banner>` element features configuration options when using using the `displayImage`, `contentImage`, `prefix`, `title`, `description`, `action` and `disclaimer` slots for structured content placement.

Notice the use of the [auro-hyperlink](https://auro.alaskaair.com/components/auro/hyperlink) element and the `action` slot in the following examples. All the [properties](https://auro.alaskaair.com/components/auro/hyperlink/api) of the Hyperlink element are directly applicable.

## Billboard

The `auro-banner` element with the `billboard` property features a single configuration using the `displayImage`, `contentImage`, `description`, `action` and `disclaimer` slots for structured content placement.
The `<auro-banner>` element with the `billboard` property features a single configuration using the `displayImage`, `contentImage`, `description`, `action` and `disclaimer` slots for structured content placement.

### Background image slot

Expand All @@ -37,8 +37,11 @@ The background image slot is configured to work with the HTML [picture](https://
<img src="https://picsum.photos/id/430/225/550" alt="" />
</picture>
```
<br>

<br>This allows the editor the upmost in image flexibility for cropped images placed at different breakpoints. A slotted `img` element is the default image shown when less than the first defined breakpoint.<br><br>
This allows the editor the upmost in image flexibility for cropped images placed at different breakpoints. A slotted `<img>` element is the default image shown when less than the first defined breakpoint.

By default `<img>` elements are `inline` elements and will add a few pixels of space below the image. To counter this, either set `display: block` on the `<img>` element, or add this [WCSS pre-defined selector](https://alaskaairlines.github.io/WebCoreStyleSheets/#core-css-#{$sym}#{$prefix}picture#{$scope}) to your project.<br><br>

<div class="exampleWrapper">
<auro-banner billboard>
Expand Down Expand Up @@ -102,9 +105,9 @@ The background image slot is configured to work with the HTML [picture](https://

## Billboard / slim / alignRight / onDark

The following example illustrates a series of additional API options available to the `auro-banner` element. In this example, this shows how a user can augment the `billboard` theme of the `auro-banner`.
The following example illustrates a series of additional API options available to the `<auro-banner>` element. In this example, this shows how a user can augment the `billboard` theme of the `<auro-banner>`.

For the call-to-action button, see in the example code that it is required to set the `onDark` attribute on the `auro-hyperlink` element itself. This is **not** controlled by the `auro-banner` element.
For the call-to-action button, see in the example code that it is required to set the `onDark` attribute on the `<auro-hyperlink>` element itself. This is **not** controlled by the `<auro-banner>` element.

<div class="exampleWrapper">
<auro-banner billboard slim alignRight ondark>
Expand Down Expand Up @@ -224,7 +227,7 @@ The following example illustrates an option to left align the text `alignLeft` a

## Hero

The following example illustrates a `auro-banner` custom element with the `hero` template style. This example also illustrates the use of the `prefix` slot.
The following example illustrates a `<auro-banner>` custom element with the `hero` template style. This example also illustrates the use of the `prefix` slot.

<div class="exampleWrapper">
<auro-banner hero>
Expand Down Expand Up @@ -278,16 +281,14 @@ The following example illustrates a `auro-banner` custom element with the `hero`

## 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.

**NOTE:** The use of `style="display: block"` on the `img` element. This is a preference of the design, but not a style that can be controlled from the shadow DOM. This style must be applied by the user of the element in this context.
The following example illustrates a `<auro-banner>` custom element with the `marquee` template style. This template configuration also supports the `slim` and `onDark` attributes.

<div class="exampleWrapper">
<auro-banner marquee>
<picture slot="displayImage">
<source srcset="https://picsum.photos/id/154/2048/2000" media="(min-width: 1024px)">
<source srcset="https://picsum.photos/id/154/736/1400" media="(min-width:660px)">
<img src="https://picsum.photos/id/154/660/420" alt="" style="display: block;">
<img src="https://picsum.photos/id/154/660/420" alt="">
</picture>
<span slot="prefix">Duis aute irure dolor</span>
<span slot="title">Duis aute irure dolor.<br>Excepteur sint occaecat.</span>
Expand All @@ -313,7 +314,7 @@ The following example illustrates a `auro-banner` custom element with the `marqu
<picture slot="displayImage">
<source srcset="https://picsum.photos/id/154/2048/2000" media="(min-width: 1024px)">
<source srcset="https://picsum.photos/id/154/736/1400" media="(min-width:660px)">
<img src="https://picsum.photos/id/154/660/420" alt="" style="display: block;">
<img src="https://picsum.photos/id/154/660/420" alt="">
</picture>
<span slot="prefix">Duis aute irure dolor</span>
<span slot="title">Duis aute irure dolor.<br>Excepteur sint occaecat.</span>
Expand All @@ -334,16 +335,14 @@ The following example illustrates a `auro-banner` custom element with the `marqu

## Marquee / solid

The following example illustrates a `auro-banner` custom element with the `marquee solid` template style. With this configuration, `onDark` is implied.

**NOTE:** The use of `style="display: block"` on the `img` element. This is a preference of the design, but not a style that can be controlled from the shadow DOM. This style must be applied by the user of the element in this context.
The following example illustrates a `<auro-banner>` custom element with the `marquee solid` template style. With this configuration, `onDark` is implied.

<div class="exampleWrapper">
<auro-banner marquee solid>
<picture slot="displayImage">
<source srcset="https://picsum.photos/id/1015/1048/2000" media="(min-width: 1024px)">
<source srcset="https://picsum.photos/id/1015/736/1400" media="(min-width:660px)">
<img src="https://picsum.photos/id/1015/660/660" alt="" style="display: block">
<img src="https://picsum.photos/id/1015/660/660" alt="">
</picture>
<auro-alaska official ondark style="width: 192px" slot="contentImage"></auro-alaska>
<p slot="description">
Expand All @@ -368,7 +367,7 @@ The following example illustrates a `auro-banner` custom element with the `marqu
<picture slot="displayImage">
<source srcset="https://picsum.photos/id/1015/1048/2000" media="(min-width: 1024px)">
<source srcset="https://picsum.photos/id/1015/736/1400" media="(min-width:660px)">
<img src="https://picsum.photos/id/1015/660/660" alt="" style="display: block">
<img src="https://picsum.photos/id/1015/660/660" alt="">
</picture>
<auro-alaska official ondark style="width: 192px" slot="contentImage"></auro-alaska>
<p slot="description">
Expand All @@ -388,7 +387,7 @@ The following example illustrates a `auro-banner` custom element with the `marqu

## RoundedBorder

The following example illustrates a `auro-banner` custom element with the `roundedBorder` variant style. With this configuration, no `displayImage` is used. Instead only the `contentImage` is used and the rest of the offer is displayed in a row.
The following example illustrates a `<auro-banner>` custom element with the `roundedBorder` variant style. With this configuration, no `displayImage` is used. Instead only the `contentImage` is used and the rest of the offer is displayed in a row.

<div class="exampleWrapper">
<auro-banner roundedBorder alignLeft>
Expand Down
102 changes: 49 additions & 53 deletions demo/demo.md
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,23 @@
# Card

The `auro-card` element provides users a flexible way to convey a summary of information. The primary elements of a card include an image, and details.
The `<auro-card>` element provides users a flexible way to convey a summary of information. The primary elements of a card include an image, and details.

The details are broken down into `title`, `description`, `cta`, and `disclaimer`.

## Component use cases

Use the `auro-card` element to:
Use the `<auro-card>` element to:

* grab the attention of a user
* direct your user to another resource for further information

## Do not...

Use `auro-card` as the primary source of information.
Use `<auro-card>` as the primary source of information.

## Default element

The default `auro-card` element features a single configuration using the `title`, `image`, `description`, `action` and `disclaimer` slots for structured content placement.
The default `<auro-card>` element features a single configuration using the `title`, `image`, `description`, `action` and `disclaimer` slots for structured content placement.

The card has a maximum width of `19rem`. The element will remain centered within the scope of a parent element.

Expand Down Expand Up @@ -52,30 +52,28 @@ Notice the use of the [auro-hyperlink](https://auro.alaskaair.com/components/aur
<span slot="trigger">See code</span>

```html
<div class="exampleWrapper">
<auro-card>
<span slot="title">
Pri dicat graece abhorreant
</span>
<img
slot="blockImage"
src="https://picsum.photos/304?random=0"
alt="Random insert 0"/>
<p slot="description">
Ei est detracto fabellas convenire, vivendo accusata intellegebat ex mei. Pri dicat graece abhorreant ut, sea ei vidit omnes, errem tempor eligendi cu eos.
</p>
<auro-hyperlink
nav
href="/"
slot="action"
target="_blank">
More info
</auro-hyperlink>
<p slot="disclaimer">
* Errem tempor eligendi cu eos
</p>
</auro-card>
</div>
<auro-card>
<span slot="title">
Pri dicat graece abhorreant
</span>
<img
slot="blockImage"
src="https://picsum.photos/304?random=0"
alt="Random insert 0"/>
<p slot="description">
Ei est detracto fabellas convenire, vivendo accusata intellegebat ex mei. Pri dicat graece abhorreant ut, sea ei vidit omnes, errem tempor eligendi cu eos.
</p>
<auro-hyperlink
nav
href="/"
slot="action"
target="_blank">
More info
</auro-hyperlink>
<p slot="disclaimer">
* Errem tempor eligendi cu eos
</p>
</auro-card>
```

</auro-accordion>
Expand Down Expand Up @@ -113,37 +111,35 @@ For card content to `align-left` within the context of the custom element, use t
<span slot="trigger">See code</span>

```html
<div class="exampleWrapper">
<auro-card alignLeft>
<span slot="title">
Pri dicat graece abhorreant
</span>
<img
slot="blockImage"
src="https://picsum.photos/304?random=1"
alt="Random insert 0"/>
<p slot="description">
Ei est detracto fabellas convenire, vivendo accusata intellegebat ex mei. Pri dicat graece abhorreant ut, sea ei vidit omnes, errem tempor eligendi cu eos.
</p>
<auro-hyperlink
nav
href="/"
slot="action"
target="_blank">
More info
</auro-hyperlink>
<p slot="disclaimer">
* Errem tempor eligendi cu eos
</p>
</auro-card>
</div>
<auro-card alignLeft>
<span slot="title">
Pri dicat graece abhorreant
</span>
<img
slot="blockImage"
src="https://picsum.photos/304?random=1"
alt="Random insert 0"/>
<p slot="description">
Ei est detracto fabellas convenire, vivendo accusata intellegebat ex mei. Pri dicat graece abhorreant ut, sea ei vidit omnes, errem tempor eligendi cu eos.
</p>
<auro-hyperlink
nav
href="/"
slot="action"
target="_blank">
More info
</auro-hyperlink>
<p slot="disclaimer">
* Errem tempor eligendi cu eos
</p>
</auro-card>
```

</auro-accordion>

## Multi-option layout

When placing multiple `auro-card` elements within a single parent container, the following example illustrates using `flexbox` for layout support.
When placing multiple `<auro-card>` elements within a single parent container, the following example illustrates using `flexbox` for layout support.

<style>
@media screen and (min-width: 1024px) {
Expand Down

0 comments on commit 26c2211

Please sign in to comment.