Skip to content

Commit

Permalink
feat(fonts): issue #631 font-display deterministic resolution (#632)
Browse files Browse the repository at this point in the history 
* issue #631: font-display dterministic

* some docs improvements

* pushing the yarn.lock

* issue #631: spell fixes
  • Loading branch information
@gullerya
gullerya committed Feb 5, 2021
1 parent 18a8b6d commit 74befed
Show file tree
Hide file tree
Showing 14 changed files with 262 additions and 156 deletions.
6 changes: 3 additions & 3 deletions common/fonts/readme.md
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
# Vivid Fonts
### Vivid Fonts

As part of the One Vonage unified branding and look'n'feel experience, we are providing a common Web fonts set.
Our font loading service will load a [variable fonts](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide) for any supporting platform, while falling back to the static fonts on the non-supporting ones.

---

# Usage
### Usage

Im most majority of the cases, consuming application should __do nothing__ with regard to fonts initialization.
Fonts service is automatically initialized (fonts pulled and installed into the global document scope) as part of the Vivid Core.
Expand All @@ -24,7 +24,7 @@ fonts.init().then(() =>
---

# Performance hints
### Performance hints

We are initializing fonts asynchronously.
This approach won't block site's contents rendering, so you'll most likely to experience FOUC behaviour.
Expand Down
10 changes: 8 additions & 2 deletions common/fonts/src/vvd-fonts.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,9 @@
@font-face {
font-family: 'SpeziaWeb';
src: url('//fonts.resources.vonage.com/fonts/v1/SpeziaWeb-Regular.woff2') format('woff2');
font-display: block;
font-style: normal;
font-weight: 400;
font-weight: 400;
}

/*
Expand All @@ -20,6 +21,7 @@
@font-face {
font-family: 'SpeziaWeb';
src: url('//fonts.resources.vonage.com/fonts/v1/SpeziaWeb-WideMedium.woff2') format('woff2');
font-display: block;
font-style: normal;
font-weight: 500;
}
Expand All @@ -30,6 +32,7 @@
@font-face {
font-family: 'SpeziaWeb';
src: url('//fonts.resources.vonage.com/fonts/v1/SpeziaWeb-SemiBold.woff2') format('woff2');
font-display: block;
font-style: normal;
font-weight: 600;
}
Expand All @@ -40,6 +43,7 @@
@font-face {
font-family: 'SpeziaMonoWeb';
src: url('//fonts.resources.vonage.com/fonts/v1/SpeziaWeb-MonoRegular.woff2') format('woff2');
font-display: block;
font-style: normal;
font-weight: 400;
}
Expand All @@ -52,6 +56,7 @@
@font-face {
font-family: 'SpeziaWebVariable';
src: url('//fonts.resources.vonage.com/fonts/v1/Spezia_Web_Complete_Upright.woff2') format('woff2-variations');
font-display: block;
font-style: normal;
font-weight: 1 1000;
font-stretch: 50% 200%;
Expand All @@ -60,7 +65,8 @@
@font-face {
font-family: 'SpeziaMonoWebVariable';
src: url('//fonts.resources.vonage.com/fonts/v1/Spezia_Web_Monospace_Complete.woff2') format('woff2-variations');
font-style: normal;
font-display: block;
font-style: normal;
font-weight: 1 1000;
font-stretch: 50% 200%;
}
Expand Down
8 changes: 4 additions & 4 deletions common/typography/readme.md
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
# Introduction
### Introduction

Vivid provides typography definitions as part of it's underlying design system.

In majority of cases consumer will have the typography set correctly either via the Vivid components or Vivid context, so nothing has to be done to get it be used.

![Vivid typography structure](typography-system-topology.svg)

# Types and Variations
### Types and Variations

Vivid typography is built from the **Spezia** font family, namely the regular one and the monospace one.

Expand All @@ -19,7 +19,7 @@ Principal distinction between the **types** and the **variations** is, that **va

![Vivid typography permutations](typography-system-permutations.svg)

## Types
#### Types

Vivid typography types are principally split into 2 categories: **Heading** and **Content**.

Expand All @@ -30,7 +30,7 @@ Usage of these kinds of typographies is simple and straight forward - just putti
Content typographies comprised from 3 types: **Body 1**, **Body 2** and **Caption**.
In this case, too, the usage is bound to the components or the HTML context.

## Variations
#### Variations

Be it heading line or regular paragraph text, we might need to style some of the words in a slightly deviating way.
Take for example the `code` element. The way this element deviates from the surrounding context is by usage of Monospaced font-family, while the rest of the typography attributes are staying the same.
Expand Down
23 changes: 15 additions & 8 deletions components/helper-message/readme.md
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,14 @@
# Introduction
### Introduction

`vwc-helper-message` component is a common helper/error message presenter.
This component is internally used in components `vwc-textarea`, `vwc-textfield`, `vwc-select`, `vwc-file-picker` and alike.
It is mostly to be used as an additional, mid length, informative hint provides below a functional blocks or elements.

# Usage
This component featured with constance font style, 1 level lesser than the regular body content one,
single-liner appearance and optional error icon when `is-error` attribute set.

> `vwc-helper-message` is internally used in: `vwc-file-picker`, `vwc-select`, `vwc-textarea`, `vwc-textfield` and more to come.
### Usage

Install the component as part of the Vivid installation bundle or on it's own.

Expand All @@ -17,12 +22,14 @@ Then use in HTML as following:
<vwc-helper-message is-error="false">Message text</vwc-helper-message>
```

# API
### API

## Slots
#### Slots

Any slotted content within the component is slotted to be a message content.
Any light DOM content within the component is slotted to be a message content.

## Attirbutes / Properties
#### Attirbutes / Properties

TODO
| Property | Attribute | Type | Description |
|-----------|------------|-----------|-------------|
| `isError` | `is-error` | `boolean` | adds error icon before the text message
1 change: 0 additions & 1 deletion components/helper-message/src/vwc-helper-message.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ declare global {
*
* @module vwc-helper-message
*
* @property {string} message - the message to be shown
* @property {boolean} [isError=false] - is the component showing the error state (will show the error icon); reflected attribute is `is-error`
*/
@customElement('vwc-helper-message')
Expand Down
12 changes: 6 additions & 6 deletions components/menu/readme.md
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
# `vwc-menu`
### `vwc-menu`

`vwc-menu` is a surfacing menu component, showing up on demand, eg upon user action.
`vwc-menu` fetured with an internal list, while all LightDOM elements of it become children of that list.

> This component is an extension of [\<mwc-menu\>](https://github.com/material-components/material-components-web-components/tree/master/packages/menu).
# Usage
### Usage

Usage example:
```html
Expand All @@ -32,11 +32,11 @@ import { VWCMenu } from '@vonage/vwc-menu';
import '@vonage/vwc-list/vwc-list-item.js';
```

# API
### API

`vwc-menu` exposes several APIs to provide its fuctionality, namely properties, methods and events.

## Properties
#### Properties

| Property | Modifiers | Type | Description |
|---------------------------|-----------|--------------------------------------------------|--------------------------------------------------|
Expand All @@ -61,7 +61,7 @@ import '@vonage/vwc-list/vwc-list-item.js';
| `x` | | `number \| null` | |
| `y` | | `number \| null` | |

## Methods
#### Methods

| Method | Type |
|-----------------------|----------------------------------------------|
Expand All @@ -72,7 +72,7 @@ import '@vonage/vwc-list/vwc-list-item.js';
| `select` | `(index: MWCListIndex): void` |
| `show` | `(): void` |

## Events
#### Events

| Event | Description |
|-----------------|------------------|
Expand Down
8 changes: 4 additions & 4 deletions components/note/readme.md
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
# vwc-note
### vwc-note

`vwc-note` component is designated to layout connotated notification content.

## Structure
### Structure

`vwc-note` is a block component, purposed to be used as part of the running article.
It may also be used as appering on demand, as part of running layout, thus moving the contents after it down below the page.
Expand All @@ -11,12 +11,12 @@ It may also be used as appering on demand, as part of running layout, thus movin
Most of th `vwc-note` is occupied by the **message body**.


## API
### API

To begin with, any light DOM within the `vwc-note` is slotted to become a message body.
Additionally, `vwc-note` exposes APIs so set its connotation, icon and header.

### Properties
#### Properties

| Property | Attribute | Type | Default |
|---------------|---------------|---------------|-----------|
Expand Down
12 changes: 6 additions & 6 deletions components/select/readme.md
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
# `vwc-select`
### `vwc-select`

`vwc-select` is a drop-down kind of input element.

> This component is an extension of [\<mwc-select\>](https://github.com/material-components/material-components-web-components/tree/master/packages/select).
# Usage
### Usage

Import the component in your context, to get it initialized:
```js
Expand Down Expand Up @@ -34,11 +34,11 @@ Few points to pay attention to, in order to get the expected result:
* Items MUST HAVE an attribute value with an actual values that you'd like to use in your applicative logic (except the empty choice);
the text/content within the items is for **labeling** purposes only, should be considered as not logically reliable (think of localization down the road, or some rich HTML)

# API
### API

`vwc-select` exposes the following properties, methods and events:

## Properties
#### Properties

| Property | Modifiers | Type | Description |
|---------------------------|-----------|--------------------------------------------------|--------------------------------------------------|
Expand All @@ -56,7 +56,7 @@ the text/content within the items is for **labeling** purposes only, should be c
| `validationMessage` | | `string` | |
| `value` | | `string` | |

## Methods
#### Methods

| Method | Type |
|---------------------|--------------------------------------------------|
Expand All @@ -70,7 +70,7 @@ the text/content within the items is for **labeling** purposes only, should be c
| `setAriaLabel` | `(label: string): void` |
| `setCustomValidity` | `(message: string): void` |

## Events
#### Events

| Event | Description |
|------------|------------------|
Expand Down
13 changes: 6 additions & 7 deletions components/slider/readme.md
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,22 @@
# vwc-slider
### vwc-slider

This component is an extension of [<mwc-slider>](https://github.com/material-components/material-components-web-components/tree/master/packages/slider)
This component is an extension of [\<mwc-slider\>](https://github.com/material-components/material-components-web-components/tree/master/packages/slider)

## Properties
### API

#### Properties

| Property | Modifiers | Type | Description |
|---------------------------|-----------|--------------------------------------------------|--------------------------------------------------|
| `disabled` | | `boolean` | |
| `floatingLabelFoundation` | | `MDCFloatingLabelFoundation \| undefined` | |
| `lineRippleFoundation` | | `MDCLineRippleFoundation \| undefined` | |
| `markers` | | `boolean` | |
| `max` | | `number` | |
| `min` | | `number` | |
| `pin` | | `boolean` | |
| `ripple` | readonly | `RippleInterface \| Promise<RippleInterface \| null> \| undefined` | Implement ripple getter for Ripple integration with mwc-formfield |
| `step` | | `number` | |
| `value` | | `number` | |

## Methods
#### Methods

| Method | Type | Description |
|----------------|-------------------------|--------------------------------------------------|
Expand Down
13 changes: 6 additions & 7 deletions components/textarea/readme.md
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
# vwc-textarea
### vwc-textarea

This component is an extension of [<mwc-textarea>](https://github.com/material-components/material-components-web-components/tree/master/packages/textarea)
This component is an extension of [\<mwc-textarea\>](https://github.com/material-components/material-components-web-components/tree/master/packages/textarea)

## Properties
### API

#### Properties

| Property | Modifiers | Type | Description |
|---------------------------|-----------|--------------------------------------------------|--------------------------------------------------|
Expand All @@ -12,14 +14,12 @@ This component is an extension of [<mwc-textarea>](https://github.com/material-c
| `cols` | | `number` | |
| `disabled` | | `boolean` | |
| `endAligned` | | `boolean` | |
| `floatingLabelFoundation` | | `MDCFloatingLabelFoundation \| undefined` | |
| `helper` | | `string` | |
| `helperPersistent` | | `boolean` | |
| `icon` | | `string` | |
| `iconTrailing` | | `string` | |
| `inputMode` | | `TextFieldInputMode` | |
| `label` | | `string` | |
| `lineRippleFoundation` | | `MDCLineRippleFoundation \| undefined` | |
| `max` | | `string \| number` | |
| `maxLength` | | `number` | |
| `min` | | `string \| number` | |
Expand All @@ -31,7 +31,6 @@ This component is an extension of [<mwc-textarea>](https://github.com/material-c
| `prefix` | | `string` | |
| `readOnly` | | `boolean` | |
| `required` | | `boolean` | |
| `ripple` | readonly | `RippleInterface \| Promise<RippleInterface \| null> \| undefined` | Implement ripple getter for Ripple integration with mwc-formfield |
| `rows` | | `number` | |
| `selectionEnd` | readonly | `number \| null` | |
| `selectionStart` | readonly | `number \| null` | |
Expand All @@ -46,7 +45,7 @@ This component is an extension of [<mwc-textarea>](https://github.com/material-c
| `value` | | `string` | |
| `willValidate` | readonly | `boolean` | |

## Methods
#### Methods

| Method | Type |
|---------------------|--------------------------------------------------|
Expand Down

0 comments on commit 74befed

Please sign in to comment.