import { Story, Preview, Meta, Props, html, withKnobs, withWebComponentsKnobs } from '@open-wc/demoing-storybook';
import './bulib-promo.js';

<Meta 
  title="Web Components|bulib-promo"
  decorators={[withKnobs, withWebComponentsKnobs]}
  parameters={{
    component: "bulib-promo",
    options: { selectedPanel: "storybookjs/knobs/panel" }
  }}
/>

# Promo Component

Provide an advanced marketing-style box with a background image and some surrounding content.

_NOTE: can be used individually or in a group_

## Usages 

### Empty

This element is not meant to be used empty, but it's here to show you where everything goes. 
  So long as the `debug` attribute is present, it'll give you some information about what goes where.

<Preview withToolbar>
  <Story name="default">
    {html`<bulib-promo debug></bulib-promo>`}
  </Story>
</Preview>


### Customization

You can fill in particular parts of the display by specifying the following:

- _any_ element with `slot="top"` will show up in the section above the image (great for a heading, label, or preface)
- an `<img>` with `slot="main"` dropped inside, will be used to set the `background-image` of the `.main` section via the `src` attribute
- _any_ element with `slot="bottom"` will appear below the image (great for description, calls to action, more information, etc.)


<Preview withToolbar>
  <Story name="example">
    {html`
      <bulib-promo>
        <div slot="top">
          <h2>high-level label</h2>
        </div>
        <img slot="main" src="https://via.placeholder.com/500x350">
        <div slot="bottom">
          <h3>maybe our secondary label or heading</h3>
          <p>this is the description explaining the image and/or calls to action</p>
          <div class="flexnw flex-around">
            <a class="bulib-btn mhn">primary call-to-action</a>
            <a class="bulib-btn secondary mhn">secondary call-to-action</a>
          </div>
        </div>
      </bulib-promo>
    `}
  </Story>
</Preview>

### Optional Parts

If you decide you only want the top or only the bottom, feel free to leave either empty and it'll be left blank.

#### No '`top`' Section

<Preview withToolbar>
  <Story name="no-top">
    {html`
      <bulib-promo>
        <img slot="main" src="https://via.placeholder.com/500x350?text=this+is+a+custom+'<img>'">
        <div slot="bottom">
          <h3>this is a custom heading</h3>
          <p>this is a custom description</p>
          <a class="bulib-btn mhn">no secondary option this time</a>
        </div>
      </bulib-promo>
    `}
  </Story>
</Preview>

#### No '`bottom`' Section

<Preview withToolbar>
  <Story name="no-bottom-heading">
    {html`
      <bulib-promo>
        <div slot="top">
          <h3>this is a custom '<code>top heading</code>'</h3>
          <p>we'll even add a bit of a description here to explain the image, (we'll opt to not have a cta in this example)</p>
        </div>
        <img slot="main" src="https://via.placeholder.com/750x300?text=this+is+a+different+custom+img">
      </bulib-promo>
    `}
  </Story>
</Preview>

### Unconventional Customization

Technically, you can put pretty much anything in either `slot='top'` or `slot="bottom"`. The component is just to 
  standardize the look & feel of multiples of them in place. 

_NOTE: in this example, we used a square image and set the height manually. This expanded the `.main` area to that height_

<Preview withToolbar>
  <Story name="unconventional">
    {html`
      <bulib-promo>
        <h2 slot="top">Library Hours</h2>
        <img slot="main" height="450px" src="https://i.pinimg.com/originals/c8/1e/14/c81e1445f01e19c6fd7dfb0b0ba4e359.jpg" >
        <div slot="bottom" class="flexw flex-center">
          <div class="half-width">
            <p class="big-text">
              Different libraries are open at different times. We use LibCal and 
              <code>bulib-hours</code> to manage that.
            </p>
            <a href="https://www.bu.edu/library/about/hours/" class="bulib-btn bigger-text bold">see all location hours</a>
          </div>
          <ul>
            <li><bulib-hours icon="local_library" library="mugar-memorial"></bulib-hours></li>
            <li><bulib-hours icon="business" library="pardee"></bulib-hours></li>
            <li><bulib-hours icon="school" library="pickering"></bulib-hours></li>
            <li><bulib-hours icon="science" library="sel"></bulib-hours></li>
            <li><bulib-hours icon="cloud_upload" library="astronomy"></bulib-hours></li>
          </li>
        </p>
      </bulib-promo>
    `}
  </Story>
</Preview>



### Multiple Promotions

Arrange multiple promotional boxes into a row using `display: flex`, `display: grid`, or other layout helpers...

<Preview withToolbar>
  <Story name="unison">
    {html`
      <style type="text/css">
        div.promo-row { display: flex; grid-gap: 20px; }
        div.promo-row > bulib-promo { flex: 1; }
      </style>
      <div class="promo-row">
        <bulib-promo class="auto-height">
          <h2 slot="top">Library Hours</h2>
          <img slot="main" src="https://www.bu.edu/library/files/2012/04/mugar_small-150x115.jpg"
          <a slot="bottom" class="bulib-btn mhn">All Location Hours</a>
        </bulib-promo>
        <bulib-promo>
          <h2 slot="bottom">Howard Gotlieb Archival Research Center</h2>
          <img slot="main" src="http://archives.bu.edu/documents/10184/15899/about-hgarc.jpg/9b958872-9fde-482f-a579-113efacc2f2c?t=1397674399156">
        </bulib-promo>
        <bulib-promo>
          <h2 slot="top">Library Locations</h2>
          <img slot="main" src="https://www.bu.edu/library/files/2012/04/astronomy_small-150x115.jpg">
          <ul slot="bottom">
            <li><a href="">Mugar Memorial</li>
            <li><a href="">Music Library</li>
            <li><a href="">...</li>
            <li><a href="">Science and Engineering Library</li>
          </ul>
        </bulib-promo>
      </div>
    `}
  </Story>
</Preview>


### Using CSS Variables to Adjust Colors

There are a number of CSS Variables (see `bulib-promo.css`) that you can customize to adjust the color, padding, and size.

The ones for color are particularly useful:

```css
/* make the `top` black with orange letters */
--bulib-promo-top-text: orange;
--bulib-promo-top-background: black;

/* make the `bottom` orange with black letters */
--bulib-promo-bottom-text: black;
--bulib-promo-bottom-background: orange;
```

<Preview withToolbar>
  <Story name="variability">
    {html`
      <style type="text/css">
        div.custom-variables { 
          /* general */
          --bulib-promo-max-width: 550px;
          --bulib-promo-border-radius: 15px;
          --bulib-promo-padding-horizontal: 30px;
          --bulib-promo-padding-vertical: 15px;
          /* top */ 
          --bulib-promo-top-text: orange;
          --bulib-promo-top-background: black;
          /* main */ 
          --bulib-promo-main-background: var(--color-primary-background-dark, black);
          /* bottom */
          --bulib-promo-bottom-text: black;
          --bulib-promo-bottom-background: orange;
        }
      </style>
      <div class="custom-variables">
        <bulib-promo>
          <div slot="top" class="flexnw flex-between">
            <h2 class="mvn">Happy Fall!</h2>
            <small><em>(and go RIT Tigers)</em></small>
          </div>
          <img slot="main" height="350px" src="https://www.bu.edu/usc/files/2014/05/banner9.jpg">
          <div slot="bottom" class="big-text">
            <strong>Customizing CSS Variables</strong>
            <p>css variables control a number of aspects of many of our variables across our sites</p>
            <p>
              if ever you get bored, pick a web component or an active page any of our sites 
              and start fiddling with the css variables in the <code>body</code> section of the 
              chrome 'elements' inspector under the 'styles' tab. 
            </p>
            <a class="bulib-btn secondary mhn" href="https://dev.to/samanthaming/css-variables-8di">learn more about css variables</a>
          </div>
        </bulib-promo>
      </div>
    `}
  </Story>
</Preview>

## A Brief Note About How it Works

Unlike many of our other elements that use _attributes_ to control the look of the behavior (like you would with `class`)...

```html
<bulib-component attribute_1="value1" attribute_2="value2"></bulib-component>
```

...this component looks for entire elements that have been plopped _inside_ of it with particular `slot` names:

```html
<bulib-promo>
  <div slot="top">....</div>
  <img slot="main" src="...">
  <div slot="bottom"></div>
</bulib-promo>
```

This allows for greater customization and flexibility, while ensuring that a fallback exists, should the web component fail.


## API - Properties 

<Props of="bulib-promo" />