npm package: @hitrecord/alpine
Description: Presentational components to share between hitRECord products.
Latest version: 1.0.0-rc.6

# ⛰ Alpine
### An internal shared component library
![](https://img.shields.io/badge/version-0.5.1-9fb5bd.svg)

---

### Publishing Alpine

1. Add any dependencies needed and increase the package version in `package.publish.json`. This is the package file and dependency list that will be installed into the consuming app.

2. `npm run package` to create the dist folder with assets

3. `npm run publish` to publish this package to HitRecord's private npm.

---
## Using Alpine

1. `npm i --save @hitrecord/alpine`

2. `@import '~@hitrecord/alpine/main.css';` in your app's main style.

---

### Grid

A 12 column grid is built into alpine and leveraged with utility classes. Grid container max width: **1344px**. Grid gap: **24px**.

A parent class of `.grid-container` will create a grid container. Use class `.grid-item` with screen size and column span (i.e. `l-4`) on direct children to control items in the grid.

Valid screen and span options are `sm-2 ...sm-12, md-2 ...md-12, lg-2 ...lg-12`

```
<div class="grid-container">
  <div class="grid-item sm-12 md-6 lg-4">Item 1</div>
  <div class="grid-item sm-12 md-6 lg-4">Item 2</div>
  <div class="grid-item sm-12 md-6 lg-4">Item 3</div>
</div>
```

Offsets can be added like this.

```
<div class="grid-container">
  <div class="grid-item sm-8 offset-sm-2">Item 1</div>
</div>
```
This will center 8 columns with two on each on side on every screen size.

You can also nest grids like this.

```
<div class="grid-container">
  <div class="grid-item sm-12 md-6 lg-4 grid-container">
    <div class="grid-item sm-12 lg-6">Nested Grid Item 1</div>
    <div class="grid-item sm-12 lg-6">Nested Grid Item 2</div>
  </div>
  <div class="grid-item sm-12 md-6 lg-4">Item 2</div>
  <div class="grid-item sm-12 md-6 lg-4">Item 3</div>
</div>
```

*All direct children will fall into a 12 column grid even if the grid-item class is not present.*

#### Customizing grid gap

By default the grid gap is 1.5 rem. This will work for most cases but additional values are available. They are `0, 1, 2` rem. You can use them on just the row, just the column, or both.

```
<section class="grid-container grid-gap-0></section>
<section class="grid-container grid-column-gap-0></section>
<section class="grid-container grid-row-gap-2></section>
```

#### Adding pipes between grid items.

Some designs call for pipes between each grid element. To do this, just add the class with the color `pipe-(color)` and pipes will appear vertically between the grid items.
If the container is not full width, use margins to avoid the last pipe from appearing. If margins can't be used, wrap the container in a div with padding. `<div class="padding-24></div>`


```
<ul class="grid-container pipe-quicksilver">
  <li class="grid-item sm-3 padding-24">Grid Content 1</li>
  <li class="grid-item sm-3 padding-24">Grid Content 2</li>
  <li class="grid-item sm-3 padding-24">Grid Content 3</li>
  <li class="grid-item sm-3 padding-24">Grid Content 4</li>
</ul>
```

---

### Layout

As new designs come in, helper classes will be added to create the layout. These should not change much, if at all, because the design team is pushing for consistency.

The `.alpine-content` class will give you the basic content area with shadow. To control the width of the content area, use `.alpine-content` along with `.sm:container, .md:container, .lg:container`. These will give the content a width of 600, 888, and 1344 pixels respectively.

```
.alpine-content {
  background: white;
  margin-left: auto;
  margin-right: auto;
  border-radius: .25rem;
  overflow: hidden;
  box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.08);
}
```

---

### Color

The colors below can be used as background or font colors. They can be applied as utility attributes or utility classes with the proper prefix (`bg-`, `color-`).

```
<p class="color-cadet bg-snow"></p>

<div color="davy" bg="pear"></div>
```


![#003A4E](https://placehold.it/15/003A4E/000000?text=+) Paris Blue `#003A4E`
![#002633](https://placehold.it/15/003A4E/000000?text=+) Paris Shade `#002633`
![#000F14](https://placehold.it/15/003A4E/000000?text=+) Paris Black `#000F14`


![#EA3C3C](https://placehold.it/15/EA3C3C/000000?text=+) Cinnabar `#EA3C3C`

![#95BE27](https://placehold.it/15/95BE27/000000?text=+) Pear `#95BE27`

![#2984A3](https://placehold.it/15/2984A3/000000?text=+) Scooter `#2984A3`

![#8BA5AE](https://placehold.it/15/8BA5AE/000000?text=+) Cadet `#8BA5AE`

![#595959](https://placehold.it/15/595959/000000?text=+) Davy `#595959`

![#A5A5A5](https://placehold.it/15/A5A5A5/000000?text=+) Quicksilver `#A5A5A5`

![#F9F9F9](https://placehold.it/15/F9F9F9/000000?text=+) Snow `#F9F9F9`

![#F0F0F0](https://placehold.it/15/F0F0F0/000000?text=+) Snow `#F0F0F0`

![#F6F9F9](https://placehold.it/15/F6F9F9/000000?text=+) Azure `#F6F9F9`

![#FFFFFF](https://placehold.it/15/FFFFFF/000000?text=+) White `#FFFFFF`

![#F6F9F9](https://placehold.it/15/9EB4BC/000000?text=+) Form Lines `#9EB4BC`

![#FFFFFF](https://placehold.it/15/DDDDDD/000000?text=+) Border `#DDDDDD`

![#FFFFFF](https://placehold.it/15/CCCCCC/000000?text=+) Dimmed `#CCCCCC`

---

### Spacing

Padding and margins can be applied as utility attributes or utility classes with the following prefixes.

Valid margin options are `margin, margin-t, margin-r, margin-b, margin-l, margin-x, margin-y`

Valid padding options are `padding, padding-t, padding-r, padding-b, padding-l, padding-x, padding-y`

Valid values are `0, 4, 8, 16, 24, 32, 48, 56, 72`

```
<p class="margin-b-72">This has margin-bottom of 72px</p>

<div class="padding-48">This has a padding of 48px</div>
```

You can use screen prefixes (md, lg) on space values.

```
<p class="margin-b-72 md:margin-b-16">This has margin-bottom of 72px on small screens and 16px on medium up</p>

<div class="padding-48 lg:padding-32">This has a padding of 48px on small and medium screens and 32px on large screens.</div>
```
---

### Buttons

```
<button class="alpine-btn primary">Primary Action</button>
<button class="alpine-btn secondary">Secondary Action</button>
<button class="alpine-btn tertiary">Dismissal Action</button>
```

You can also add an arrow left or right with the `.arrow-right` and `.arrow-left` classes.
```
<button class="alpine-btn primary arrow-right">Save & Continue</button>
<button class="alpine-btn tertiary arrow-left">Back</button>
```

Any button can be made with a custom background color. The text and hover colors will automatically be generated based on the background color.
```
<button class="alpine-btn bg-davy">Custom Button</button>
```

Add the class `.small` to make a small button.
```
<button class="alpine-btn primary small">Custom Button</button>
```
---

### Typography

#### h1, h2, h3

h1, h2, and h3 are defined in Alpine and used with the classes `.h1-alpine, .h2-alpine, .h3-alpine` accordingly. Additionally, `.h2-alpine-lite` is available for a 400 weight h2 which is a common element used.

### Alpine Body
**To make sure the following classes don't interfere with other stylesheets, a class of `.alpine-body` must be applied to a parent container.**


```
.alpine-body {
  font-family: 'Roboto', Helvetica Neue, sans-serif;
  color: davy;
  font-size: 15px;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
}
```

#### Size
Font sizes will be set on a tag but utility classes are available if needed with our defined font sizes. `10, 11, 15, 13, 19, 24, 32`

```
<p class="size-24">This font-size is 24px</p>
```

#### Weight
The three font weights available are 400, 500, and 700.

```
<p class="weight-700">This weight is 700</p>
```

#### Badge
The default badge can be used with class `.alpine-badge`. The badge will have white text on Paris Blue background.

```
<span class="alpine-badge">Default Badge</span>
```

To use badges with a different background color, just add the color as a class. The text color will automatically be set can be explicitly set with `color-pear` as well.

```
<span class="alpine-badge davy">Davy Badge</span>
```

#### Icons

We have our own icons available as a font. Use it inline `<p><i class="alpine-icon-bolt"></i> Challenge</p>`

Use it as a button `<i class="alpine-icon-bolt btn"></i>`

Standard Icons
```
alpine-icon-bolt
alpine-icon-bookmark
alpine-icon-caret--large
alpine-icon-caret--small
alpine-icon-chat
alpine-icon-checkmark-enclosed
alpine-icon-checkmark
alpine-icon-collapse
alpine-icon-collection
alpine-icon-document
alpine-icon-dots-horizontal
alpine-icon-download
alpine-icon-envelope
alpine-icon-expand
alpine-icon-following--small
alpine-icon-globe
alpine-icon-heart
alpine-icon-image
alpine-icon-list
alpine-icon-lock-closed
alpine-icon-magnifying-glass
alpine-icon-pause
alpine-icon-person
alpine-icon-play
alpine-icon-plus-hollow
alpine-icon-plus
alpine-icon-question
alpine-icon-record
alpine-icon-reel
alpine-icon-remix
alpine-icon-share
alpine-icon-slate
alpine-icon-soundwave
alpine-icon-star--small
alpine-icon-star
alpine-icon-studio
alpine-icon-tag
alpine-icon-trash
alpine-icon-tv
alpine-icon-volume
alpine-icon-x--small
alpine-icon-x-large
```

Action Icons
```
alpine-icon-action-checkmark
alpine-icon-action-close
alpine-icon-action-plus
alpine-icon-action-remove
```

Interest Type Icons
These are svg background images. They default to 74px x 74px
```
alpine-category-animation
alpine-category-filming
alpine-category-music
alpine-category-photography
alpine-category-video-editing
alpine-category-on-camera
alpine-category-visual-art
alpine-category-voice-acting
alpine-category-writing
```


---

### Flex

Utilities for creating flex containers. Flex is powerful. Reference the [MDN Flex Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout).
```
.flex	          { display: flex };
.inline-flex	  { display: inline-flex };
```

Utilities for controlling the direction of flex items. [Flex Direction](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction)
```
.flex-row         { flex-direction: row };
.flex-row-reverse { flex-direction: row-reverse };
.flex-col         { flex-direction: column };
.flex-col-reverse { flex-direction: column-reverse };
```
Utilities for controlling how flex items wrap. [Flex Wrap](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap)
```
.flex-no-wrap      { flex-wrap: nowrap };
.flex-wrap         { flex-wrap: wrap };
.flex-wrap-reverse { flex-wrap: wrap-reverse };
```
Utilities for controlling how flex items are positioned along a container's cross axis. [Align Items](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)
```
.items-stretch    { align-items: stretch };
.items-start      { align-items: flex-start };
.items-center     { align-items: center };
.items-end        { align-items: flex-end };
.items-baseline   { align-items: baseline };
```
Utilities for controlling how lines are positioned in multi-line flex containers. [Align Content](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)
```
.content-start    { align-content: flex-start };
.content-center   { align-content: center };
.content-end      { align-content: flex-end };
.content-between  { align-content: space-between };
.content-around   { align-content: space-around };
```
Utilities for controlling how an individual flex item is positioned along its container's cross axis. [Align Self](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self)
```
.self-auto        { align-self: auto };
.self-start       { align-self: flex-start };
.self-center      { align-self: center };
.self-end         { align-self: flex-end };
.self-stretch     { align-self: stretch };
```
Utilities for controlling how flex items are positioned along a container's main axis. [Justify Content](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)
```
.justify-start    { justify-content: flex-start };
.justify-center   { justify-content: center };
.justify-end      { justify-content: flex-end };
.justify-between  { justify-content: space-between };
.justify-around   { justify-content: space-around };
```
Utilities for controlling how flex items grow and shrink. [Flex](https://developer.mozilla.org/en-US/docs/Web/CSS/flex)
```
.flex-initial     { flex: initial };
.flex-auto        { flex: auto };
.flex-none        { flex: none };
.flex-grow        { flex-grow: 1 };
.flex-shrink      { flex-shrink: 1 };
.flex-no-grow     { flex-grow: 0 };
.flex-no-shrink   { flex-shrink: 0 };
```
Utilities for controlling how much space flex items occupy. Accepts 1 through 12.
```
.flex-(1-12)      {flex: (1-12)}
```

---

### Borders

A border can be added to element with a utility class.

Defaults with the alpine border color (#DDDDDD).
```
.border {
  border: 1px solid #DDDDDD;
}

.border-dashed {
  border: 1px dashed #DDDDDD;
}

.border-dashed-2 {
  border: 2px dashed #DDDDDD;
}
```

Borders can also have any color defined in the Alpine color set.
```
.border-cinnabar {
  border: 1px solid $cinnabar;
}

.border-cinnabar-dashed {
  border: 1px dashed $cinnabar;
}

.border-cinnabar-dashed-2 {
  border: 2px dashed $cinnabar;
}
```

---

### Form


#### Input

Use class `alpine-input` with type set to text.

```<input class="alpine-input" placeholder="Give your challenge an enticing call to action" type="text">```

#### Input with count

To add character counts, use an [Angular Template Reference Variable](https://blog.angulartraining.com/tutorial-the-magic-of-template-reference-variables-3183f0a0d9d1) to capture the value and max length to limit input.

Below is an example of one way to display feedback to the end user using character count.
```
  <input #input maxlength="140" class="alpine-input" placeholder="Give your challenge an enticing call to action" type="text">
  <span class="input-hint color-quicksilver margin-t-4">{{ input.value?.length || 0 }}/140</span>
```

#### Search

Use an `alpine-search-wrapper` class around an icon and `alpine-input` field with type set to search.
```
<div class="alpine-search-wrapper">
  <mat-icon class="alpine-icon">search</mat-icon>
  <input class="alpine-input" placeholder="Search" type="search">
</div>
```

---

#### Extras

These classes are available. Most are self explanatory but documentation is coming soon.

To hide any element on a particular screen size.
```
.hide-sm
.hide-md
.hide-lg
```

`.line-height-0`

`.align-left, .align-center, .align-right`

`.uppercase`

`.overflow-hidden`

`.pointer`

`.block`

`.inline`

`.inline-block`

`.bg-cover`

`.bg-contain`

`.round` This will apply a border-radius of 1000px for round images.

These will make an image square with 32x32 or 36x36 respectively. Used for avatars (with `.round`) and thumbnail images.
```
img.image-32

img.image-36
```

```
.shadow {
  box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.08);
}

.shadow-2 {
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
}
```

Opacity
```
  opacity-0
  opacity-25
  opacity-50
  opacity-75
  opacity-80
  opacity-100
```

### Components

#### Alpine Illustrations

Selector `alpine-illustrations`

Required Property Binding
- type:
'empty-contributions' |
'empty-comments' |
'empty-steps' |
'find-project' |
'start-project' |
'start-creative-prompt' |
'upload-something';

Optional Property Binding
- size?: 80

```
 <alpine-illustration [type]="'empty-steps'"></alpine-illustration>
```

The default size is 144x144 but in some places you'll need an 80x80 version. Add `[size]=80` to the end of the class to get this smaller version.

```
 <alpine-illustration [type]="'empty-steps'" [size]="80"></alpine-illustration>
```

You can also pass in custom content.

```
 <alpine-illustration [type]="'upload-something'">
  <h2>Upload Your Own Art</h2>
 </alpine-illustration>
```

---

#### Alpine Modal

Sample usage with a modal launcher. A two way binding of a boolean is required to be passed to the property of `showModal`.

```
<i class="alpine-icon-trash size-24 pointer" (click)="showModal=true"></i>


<alpine-modal [(showModal)]="showModal">
  <div class="margin-b-32">
    <h2>Delete This?</h2>
    <p>You’ve modified this project step. If you want to save this step for later you can put it in draft mode from the project overview.</p>
  </div>
  <div>
    <button class="alpine-btn tertiary margin-r-16" (click)="showModal=false">Save Draft</button>
    <button class="alpine-btn primary" (click)="showModal=false  ">Yes, Delete</button>
  </div>
</alpine-modal>
```


---

#### Alpine Dropdown

Selector `alpine-dropdown`

Types of Dropdowns

```
<li class="dropdown-item" [attr.data-value]="item.id">
  <p class="margin-0">{{challenge.title}}</p>
  <i class="alpine-icon-checkmark size-24 color-davy"></i>
</li>
```

```
<li class="badge-dropdown-item" [attr.data-value]="item.id">
  <span class="alpine-badge-mini">{{challenge.type}}</span>
  <p>{{challenge.title}}</p>
</li>
```

```
<li class="inline-icon" [attr.data-value]="item.id">
  <i class="alpine-icon-heart size-24 color-cadet margin-r-16"></i>
  <p class="margin-0" [innerHTML]="challenge.title"></p>
</li>
```

Option Bindings
- dropdownState (optional): string `2`
- placeholderHtml (optional):  html string `<p>Select Option</p>`
- locked (optional): boolean = false;
- hasTarget (optional): boolean = true;
- showDropdown (optional): boolean = false;

You have to pass in a data attribute value `[attr.data-value]` on the outer html of the iterated content. This is so the dropdown state has something to sync.

---

#### Alpine Paginator

Selector `alpine-paginator`


```
<alpine-paginator
  [length]="144"
  [pageSize]="12"
  [pageIndex]="0"
  [pageSizeOptions]="[12,24,36]">
</alpine-paginator>
```

Property Bindings
- length: total number of items.
- pageSize (optional): number of items to display on a page. Defaults to first item in pageSizeOptions.
- pageIndex (optional): zero-based index of the list of items. Defaults to 0.
- pageSizeOptions: an array of provided page size options to display.