Skip to content

Commit

Permalink
Merge pull request #256 from sebgroup/release/201211
Browse files Browse the repository at this point in the history 
Release/201211
  • Loading branch information
@splashdust
splashdust authored Dec 11, 2020
2 parents 38fea36 + ea338ea commit f624f81
Show file tree
Hide file tree
Showing 9 changed files with 165 additions and 55 deletions.
43 changes: 35 additions & 8 deletions src/components/alerts/_alert-ribbon-mixins.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,11 +20,12 @@
@mixin vanilla-alert-ribbon__paragraph() {
margin-bottom: 0;
margin-right: 1em;
line-height: 1.25;
flex-grow: 1;

@include media-context($vanilla-breakpoints) {
@include media('<tablet') {
flex-basis: 0;
flex-grow: 1;
margin-right: 0;
}
}
Expand All @@ -35,6 +36,7 @@
@mixin vanilla-alert-ribbon__button() {
@include vanilla-button();
margin-left: auto;
align-self: flex-end;

@include media-context($vanilla-breakpoints) {
@include media('<tablet') {
Expand All @@ -47,6 +49,7 @@
@include media-context($vanilla-breakpoints) {
@include media('>=tablet') {
@include vanilla-button--small();
margin-left: 4rem;
}
}
}
Expand All @@ -55,7 +58,20 @@
/// @access public
@mixin vanilla-alert-ribbon__icon() {
font-size: 1em;
line-height: 1.5;
line-height: 1.25;
margin-right: 1em;
}

///
/// @access public
@mixin vanilla-alert-ribbon__link() {
&,
&:hover,
&:visited {
color: inherit;
text-decoration: underline;
font-weight: bold;
}
}

///
Expand All @@ -71,21 +87,32 @@
@include vanilla-alert-ribbon__button();
}

a {
@include vanilla-alert-ribbon__link();
}

.fal,
.far,
.fas {
@include vanilla-alert-ribbon__icon();
}

&--whisper {
@include vanilla-alert--whisper();
&--whisper,
&--information {
@include vanilla-alert--information();
}

&--success {
@include vanilla-alert--success();
}

&--talk {
@include vanilla-alert--talk();
&--talk,
&--warning {
@include vanilla-alert--warning();
}

&--shout {
@include vanilla-alert--shout();
&--shout,
&--critical {
@include vanilla-alert--critical();
}
}
40 changes: 36 additions & 4 deletions src/components/alerts/_common.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,28 @@
/// Alert common features
/////////////////////////////////////////

///
/// @access private
@mixin vanilla-alert--information() {
background-color: $vanilla-color-grey8;
color: $vanilla-color-text;

button {
@include vanilla-button-ghost-dark();
}
}

///
/// @access private
@mixin vanilla-alert--whisper() {
background-color: $vanilla-color-purple;
@warn 'vanilla-alert--whisper is deprecated. Use vanilla-alert--information instead.';
@include vanilla-alert--information();
}

///
/// @access private
@mixin vanilla-alert--success() {
background-color: $vanilla-color-darkgreen2;
color: $vanilla-color-white;

button {
Expand All @@ -23,7 +41,7 @@

///
/// @access private
@mixin vanilla-alert--talk() {
@mixin vanilla-alert--warning() {
background-color: $vanilla-color-yellow;
color: $vanilla-color-text;

Expand All @@ -34,11 +52,25 @@

///
/// @access private
@mixin vanilla-alert--shout() {
background-color: $vanilla-color-red;
@mixin vanilla-alert--talk() {
@warn 'vanilla-alert--talk is deprecated. Use vanilla-alert--warning instead.';
@include vanilla-alert--warning();
}

///
/// @access private
@mixin vanilla-alert--critical() {
background-color: $vanilla-color-darkred1;
color: $vanilla-color-white;

button {
@include vanilla-button-ghost-light();
}
}

///
/// @access private
@mixin vanilla-alert--shout() {
@warn 'vanilla-alert--shout is deprecated. Use vanilla-alert--critical instead.';
@include vanilla-alert--critical();
}
66 changes: 27 additions & 39 deletions src/components/alerts/alert-ribbon.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ The alert ribbon component has three different severity levels: whisper, talk an
There are three ways to use this component.

1. Import the classes and use them as is
2. Import the aler-ribbon mixin and apply it to your own selector
2. Import the alert-ribbon mixin and apply it to your own selector
3. Import the alert-ribbon-mixins and use them in your own structure

These will be explained in the examples section, below the component preview.
Expand All @@ -20,58 +20,46 @@ These will be explained in the examples section, below the component preview.

:::componentpreview

## Whisper
## Information

```html
<div class="sdv-alert-ribbon sdv-alert-ribbon--whisper" role="alert">
<p>Whisper: Used for informative guiding messages, sometimes proactive advice. Display color is purple.</p>
</div>
```
## Whisper with button

```html
<div class="sdv-alert-ribbon sdv-alert-ribbon--whisper" role="alert">
<p>Visste du att du kan lämna in din deklaration via din internetbank?</p>
<div class="sdv-alert-ribbon" role="alert">
<i class="fas fa-info-square sdv-icon-left"></i>
<p><strong>Information!</strong> Visste du att du kan lämna in din deklaration via din internetbank?</p>
<button class="sdv-alert-ribbon__button">Visa hur</button>
</div>
```

## Talk
## Success

```html
<div class="sdv-alert-ribbon sdv-alert-ribbon--talk" role="alert">
<i class="fal fa-exclamation-triangle sdv-icon-left"></i>
<p>Talk: A gentle warning, that you may disregard, but it may influence the experience.. Display colour is yellow.</p>
<div class="sdv-alert-ribbon sdv-alert-ribbon--success" role="alert">
<i class="fas fa-check sdv-icon-left"></i>
<p><strong>Success!</strong> Transaktion registrerad. Det kan ta cirka två dagar innan transaktionen syns på kontot.</p>
<button class="sdv-alert-ribbon__button">Logga ut</button>
</div>
```

## Talk with button
## Warning

```html
<div class="sdv-alert-ribbon sdv-alert-ribbon--talk" role="alert">
<i class="fas fa-info-square sdv-icon-left"></i>
<p>Eftersom vi inte har kontaktuppgifter till dig kan vi inte meddela dig när ordern är behandlad. Uppdatera gärna dina kontaktuppgifter.</p>
<div class="sdv-alert-ribbon sdv-alert-ribbon--warning" role="alert">
<i class="fas fa-exclamation-square sdv-icon-left"></i>
<p><strong>Warning!</strong> Eftersom vi inte har kontaktuppgifter till dig kan vi inte meddela dig när ordern är behandlad. Uppdatera gärna dina kontaktuppgifter.</p>
<button class="sdv-alert-ribbon__button">Uppdatera</button>
</div>
```
## Shout

```html
<div class="sdv-alert-ribbon sdv-alert-ribbon--shout" role="alert">
<i class="fal fa-exclamation-triangle sdv-icon-left"></i>
<p>Shout: A critical warning that you may not disregard, you will probably not be able to use the function. Display colour is red.</p>
</div>
```

## Shout with button
## Critical

```html
<div class="sdv-alert-ribbon sdv-alert-ribbon--shout" role="alert">
<i class="fal fa-exclamation-triangle sdv-icon-left"></i>
<p>Just nu går det inte att logga in med BankID på grund av ett driftsproblem hos Finansiell ID-teknik. Detta drabbar alla svenska banker som använder BankID.</p>
<div class="sdv-alert-ribbon sdv-alert-ribbon--critical" role="alert">
<i class="fas fa-exclamation-square sdv-icon-left"></i>
<p><strong>Critical!</strong> Just nu går det inte att logga in med BankID på grund av ett driftsproblem hos Finansiell ID-teknik. Detta drabbar alla svenska banker som använder BankID.</p>
<button class="sdv-alert-ribbon__button">Logga in utan BankID</button>
</div>
```

:::

### Examples
Expand All @@ -85,14 +73,14 @@ These will be explained in the examples section, below the component preview.
Use them in your template:

```html
<div class="sdv-alert-ribbon sdv-alert-ribbon--talk" role="alert">
<i class="fal fa-exclamation-triangle sdv-icon-left"></i>
<div class="sdv-alert-ribbon sdv-alert-ribbon--warning" role="alert">
<i class="fal fa-exclamation-square sdv-icon-left"></i>
<p>Eftersom vi inte har kontaktuppgifter till dig kan vi inte meddela dig när ordern är behandlad. Uppdatera gärna dina kontaktuppgifter.</p>
<button class="sdv-alert-ribbon__button">Uppdatera</button>
</div>
```

The `<i>` and the `<button>` elements are optional. (the icon is never used on whisper alerts)
The `<i>` and the `<button>` elements are optional.


---
Expand Down Expand Up @@ -125,13 +113,13 @@ The `<i>` and the `<button>` elements are optional. (the icon is never used on w
@include vanilla-alert-ribbon__paragraph();
}

.my-whisper-style-class {
@include vanilla-alert--whisper();
.my-information-style-class {
@include vanilla-alert--information();
}

.my-talk-style-class {
...
}
.my-success-style-class {
...
}
```

Please refer to the source code on [Github](https://github.com/sebgroup/vanilla-pattern-library/blob/master/src/components/alerts/_alert-ribbon-mixins.scss) for a full example of how to use the mixins. (see vanilla-alert-ribbon)
Expand Down
3 changes: 2 additions & 1 deletion src/components/inputs/_common.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,8 @@
line-height: vanilla-px-to-rem(32);
min-height: vanilla-px-to-rem(32);
max-height: vanilla-px-to-rem(32);
font-size: vanilla-px-to-rem(14);
font-size: vanilla-px-to-rem(16);
padding: 0 0.5em;
}

/// Style for labels
Expand Down
4 changes: 4 additions & 0 deletions src/components/inputs/_input_base.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,10 @@
@include vanilla-text-field--small();
}

.sdv-field-wrap--small {
@include vanilla-text-field-wrap--small();
}

.sdv-field--error {
@include vanilla-text-field--error();
}
Expand Down
9 changes: 9 additions & 0 deletions src/components/inputs/_text-field-mixins.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,15 @@
@include vanilla-field-base--small();
}

/// Style for basic text field -- small modifier
///
/// @access public
@mixin vanilla-text-field-wrap--small() {
box-sizing: border-box;
min-height: vanilla-px-to-em(48px);
padding: 0.5em 0;
}

/// Style for textarea
///
/// @access public
Expand Down
3 changes: 0 additions & 3 deletions src/components/inputs/default.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,9 +95,6 @@ In addition to the classes shown in the example below, this component can be use

```html
<div>
<label for="input-field" class="sdv-field-label sdv-field-label--small"
>Field label</label
>
<input
id="input-field"
class="sdv-field sdv-field--small"
Expand Down
42 changes: 42 additions & 0 deletions src/components/tables/table.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -226,6 +226,48 @@ Import classes:
</table>
```

## Input table
```html
<table class="sdv-table">
<thead>
<tr>
<th class="pw-table__primary-col">Employee</td>
<th>New salary</td>
<th>Valid from</td>
</tr>
</thead>
<tbody>
<tr>
<td>100912</td>
<td>
<div class="sdv-field-wrap--small">
<input class="sdv-field sdv-field--small" />
</div>
</td>
<td>
<div class="sdv-field-wrap--small">
<input class="sdv-field sdv-field--small" placeholder="yyyymm" style="width: 6rem;"/>
</div>
</td>
</tr>
<tr>
<td>108501</td>
<td>
<div class="sdv-field-wrap--small">
<input class="sdv-field sdv-field--small" />
</div>
</td>
<td>
<div class="sdv-field-wrap--small">
<input class="sdv-field sdv-field--error sdv-field--small" placeholder="yyyymm" style="width: 6rem;"/>
<div class="sdv-field-notice sdv-field-notice--error">Error text</div>
</div>
</td>
</tr>
</tbody>
</table>
```

## Simple table
```html
<table class="sdv-table">
Expand Down
10 changes: 10 additions & 0 deletions src/test/alerts/alert-ribbon.spec.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,16 @@
}
}
}
@include it('Should compile vanilla-alert-ribbon__link') {
@include assert {
@include output {
@include vanilla-alert-ribbon__link();
}
@include expect {
@include vanilla-alert-ribbon__link();
}
}
}
@include it('Should compile vanilla-alert-ribbon') {
@include assert {
@include output {
Expand Down

0 comments on commit f624f81

Please sign in to comment.