@telefonica/mistica 16.55.0 → 16.56.1-beta.1

package/doc/design-tokens.md

@@ -0,0 +1,199 @@
+# Design Tokens
+
+Mistica uses design tokens via CSS custom properties. All tokens are accessed through the `skinVars` object
+exported from `@telefonica/mistica`. Tokens adapt automatically to the active skin and color scheme
+(light/dark mode).
+
+## Critical rules
+
+- **NEVER hardcode colors.** Always use `skinVars.colors.*` for all color values.
+- Use `skinVars.rawColors.*` (not `skinVars.colors.*`) when applying alpha with `applyAlpha`.
+- Use `skinVars.borderRadii.*` for border radius values.
+- Tokens are CSS custom properties at runtime (e.g. `var(--colorBrand)`), so they work in both inline styles
+  and CSS.
+
+## Color tokens
+
+All colors are accessed via `skinVars.colors.*`. Each token resolves to a CSS custom property.
+
+### Semantic colors
+
+| Token                   | Usage                                                    |
+| ----------------------- | -------------------------------------------------------- |
+| `brand`                 | Primary brand color                                      |
+| `brandHigh`             | High-emphasis brand color                                |
+| `inverse`               | Inverse foreground color                                 |
+| `neutralHigh`           | High-emphasis neutral (e.g. primary text on default)     |
+| `neutralMedium`         | Medium-emphasis neutral (e.g. secondary text on default) |
+| `neutralLow`            | Low-emphasis neutral                                     |
+| `neutralLowAlternative` | Alternative low-emphasis neutral                         |
+| `success`               | Success semantic color                                   |
+| `warning`               | Warning semantic color                                   |
+| `error`                 | Error semantic color                                     |
+| `promo`                 | Promotional color                                        |
+| `highlight`             | Highlight color                                          |
+
+### Background colors
+
+| Token                            | Usage                               |
+| -------------------------------- | ----------------------------------- |
+| `background`                     | Default page background             |
+| `backgroundAlternative`          | Alternative section background      |
+| `backgroundBrand`                | Brand-colored background            |
+| `backgroundBrandSecondary`       | Secondary brand background          |
+| `backgroundContainer`            | Container/card background           |
+| `backgroundContainerBrand`       | Container on brand background       |
+| `backgroundContainerAlternative` | Container on alternative background |
+| `backgroundOverlay`              | Modal/sheet overlay                 |
+| `backgroundSkeleton`             | Skeleton loading placeholder        |
+| `appBarBackground`               | App bar background                  |
+| `navigationBarBackground`        | Navigation bar background           |
+
+### Text colors
+
+| Token                  | Usage                                      |
+| ---------------------- | ------------------------------------------ |
+| `textPrimary`          | Primary text on default background         |
+| `textPrimaryInverse`   | Primary text on brand/inverse background   |
+| `textPrimaryBrand`     | Primary text on brand background           |
+| `textPrimaryMedia`     | Primary text on media background           |
+| `textSecondary`        | Secondary text on default background       |
+| `textSecondaryInverse` | Secondary text on brand/inverse background |
+| `textSecondaryBrand`   | Secondary text on brand background         |
+| `textError`            | Error text                                 |
+| `textLink`             | Link text color                            |
+| `textLinkInverse`      | Link text on brand/inverse background      |
+| `textLinkDanger`       | Danger link text color                     |
+
+### Border colors
+
+| Token            | Usage                  |
+| ---------------- | ---------------------- |
+| `borderLow`      | Low-emphasis border    |
+| `border`         | Default border         |
+| `borderHigh`     | High-emphasis border   |
+| `borderSelected` | Selected/active border |
+
+### Status colors (low/high emphasis)
+
+| Low emphasis | High emphasis | Usage          |
+| ------------ | ------------- | -------------- |
+| `successLow` | `successHigh` | Success status |
+| `warningLow` | `warningHigh` | Warning status |
+| `errorLow`   | `errorHigh`   | Error status   |
+| `promoLow`   | `promoHigh`   | Promo status   |
+| `brandLow`   | `brandHigh`   | Brand status   |
+
+### Control colors
+
+| Token              | Usage                                     |
+| ------------------ | ----------------------------------------- |
+| `control`          | Default control (checkbox, radio, switch) |
+| `controlActivated` | Activated control                         |
+| `controlError`     | Error state control                       |
+| `loadingBar`       | Loading bar color                         |
+| `divider`          | Divider line color                        |
+
+### Tag colors
+
+Tags have paired `tagText*` and `tagBackground*` tokens for each type: `Promo`, `Active`, `Inactive`, `Info`,
+`Success`, `Warning`, `Error`. Each also has `Inverse`, `Negative`, and `Brand` variants.
+
+Example: `skinVars.colors.tagTextPromo`, `skinVars.colors.tagBackgroundPromo`.
+
+## Using colors in code
+
+```tsx
+import {skinVars, Text2, Box} from '@telefonica/mistica';
+
+// In inline styles
+<div style={{color: skinVars.colors.textPrimary, backgroundColor: skinVars.colors.backgroundContainer}}>
+  Content
+</div>
+
+// In component color props
+<Text2 regular color={skinVars.colors.textSecondary}>Secondary text</Text2>
+
+// Prefer Mistica components over raw divs:
+<Box padding={16}>
+  <Text2 regular color={skinVars.colors.textSecondary}>Secondary text</Text2>
+</Box>
+```
+
+## Applying alpha to colors
+
+Use `applyAlpha` with `skinVars.rawColors` (not `skinVars.colors`):
+
+```tsx
+import {applyAlpha, skinVars} from '@telefonica/mistica';
+
+// Correct: use rawColors for alpha
+const semiTransparentBrand = applyAlpha(skinVars.rawColors.brand, 0.5);
+
+// Wrong: skinVars.colors contains CSS var() references, not raw RGB values
+// applyAlpha(skinVars.colors.brand, 0.5) // Don't do this
+```
+
+## Border radius tokens
+
+Access via `skinVars.borderRadii.*`:
+
+| Token        | Usage                   |
+| ------------ | ----------------------- |
+| `container`  | Cards, boxed containers |
+| `button`     | Buttons                 |
+| `input`      | Form inputs             |
+| `popup`      | Popups, tooltips        |
+| `checkbox`   | Checkboxes              |
+| `indicator`  | Indicators              |
+| `chip`       | Chips                   |
+| `sheet`      | Bottom sheets           |
+| `bar`        | Progress bars           |
+| `avatar`     | Avatars                 |
+| `mediaSmall` | Small media elements    |
+| `tag`        | Tags                    |
+
+```tsx
+// Use in styles when building custom elements (prefer Mistica components instead)
+<div style={{borderRadius: skinVars.borderRadii.container}}>...</div>
+```
+
+## Text presets
+
+Text sizing is handled by text components (`Text1`-`Text10`, `Title1`-`Title4`). Do not manually set font
+sizes -- use the appropriate text component instead.
+
+| Component        | Weight options                       | Usage                              |
+| ---------------- | ------------------------------------ | ---------------------------------- |
+| `Text1`-`Text4`  | `light`, `regular`, `medium`, `bold` | Body text with configurable weight |
+| `Text5`-`Text10` | Fixed per skin                       | Display/headline text              |
+| `Title1`         | Default weight from skin             | Section title                      |
+| `Title2`         | Default weight from skin             | Subsection title                   |
+| `Title3`         | Default weight from skin             | Card/small title                   |
+| `Title4`         | Default weight from skin             | Smallest title                     |
+
+## ThemeVariant (variant contexts)
+
+Some sections of a page use different color contexts. Use `variant` prop on `ResponsiveLayout` or `Boxed`:
+
+```tsx
+// Brand section (colored background)
+<ResponsiveLayout variant="brand">
+  <Box paddingY={24}>
+    <Text2 regular>Text automatically adapts colors</Text2>
+    <ButtonPrimary onPress={() => {}}>Action</ButtonPrimary>
+  </Box>
+</ResponsiveLayout>
+
+// Alternative section
+<ResponsiveLayout variant="alternative">
+  <Box paddingY={24}>
+    <Text2 regular>Alternative background section</Text2>
+  </Box>
+</ResponsiveLayout>
+```
+
+Available variants: `'default'`, `'brand'`, `'negative'`, `'alternative'`, `'media'`.
+
+Components inside a variant section automatically adapt their colors. You do not need to manually set inverse
+colors.

package/doc/fonts.md

@@ -0,0 +1,169 @@
+# Fonts
+
+<!-- TOC -->
+
+- [Fonts](#fonts)
+  - [Font family](#font-family)
+    - [System Fonts (Roboto / San Francisco)](#system-fonts-roboto--san-francisco)
+    - [OnAir or Telefonica fonts](#onair-or-telefonica-fonts)
+    - [Override brower fonts for some specific html elements](#override-brower-fonts-for-some-specific-html-elements)
+  - [Dynamic font sizes](#dynamic-font-sizes)
+
+<!-- /TOC -->
+
+## Font family
+
+Mistica components are optimized to work with iOS/Android system fonts (Roboto and San Francisco), but it can
+also work fine with other font families.
+
+### System Fonts (Roboto / San Francisco)
+
+If you use system fonts in your web application we recommend you to setup it as follows:
+
+```css
+body {
+  font-family: -apple-system, 'Roboto', 'Helvetica', 'Arial', sans-serif;
+}
+```
+
+And additionaly declare a Roboto font family for desktop browsers. For example:
+
+```css
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  src:
+    local('Roboto Light'),
+    local('Roboto-Light'),
+    url('/static/fonts/roboto-v18-latin_latin-ext-300.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src:
+    local('Roboto'),
+    local('Roboto-Regular'),
+    url('/static/fonts/roboto-v18-latin_latin-ext-regular.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  src:
+    local('Roboto Medium'),
+    local('Roboto-Medium'),
+    url('/static/fonts/roboto-v18-latin_latin-ext-500.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  src:
+    local('Roboto Bold'),
+    local('Roboto-Bold'),
+    url('/static/fonts/roboto-v18-latin_latin-ext-700.woff2') format('woff2');
+}
+```
+
+This is just an example, you'll need to change the `url()` declarations to point to the fonts served by your
+web server. The important part here is to serve different font weights for 300 (light), 400 (regular), 500
+(medium) and 700 (bold).
+
+### OnAir or Telefonica fonts
+
+Mistica works fine too with other fonts like OnAir or Telefonica fonts, but these fonts don't have a medium
+weight (only light, regular and bold). In these cases, we recomend to use the regular font weight for the 500
+`font-weight`. Something like this:
+
+```css
+@font-face {
+  font-family: 'OnAir';
+  font-style: normal;
+  font-weight: 300;
+  src: url('/static/fonts/OnAir-Light.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'OnAir';
+  font-style: normal;
+  font-weight: 400;
+  src: url('/static/fonts/OnAir-Regular.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'OnAir';
+  font-style: normal;
+  font-weight: 500;
+  /* Note we are using OnAir Regular for medium (500) font-weight too: */
+  src: url('/static/fonts/OnAir-Regular.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'OnAir';
+  font-style: normal;
+  font-weight: 700;
+  src: url('/static/fonts/OnAir-Bold.woff2') format('woff2');
+}
+
+body {
+  font-family: 'OnAir', 'Helvetica', 'Arial', sans-serif;
+}
+```
+
+### Override brower fonts for some specific html elements
+
+All the html elements in your page will inherit the body font by default, except if a style sheet sets a
+different font family for the element, and most browsers use to set specific font families for some elements
+like `input`, `textarea`, `pre`, etc. If you want to avoid that browser behavior, you have different options:
+
+1. Explicitly set the your font family for those elements:
+
+```css
+body {
+  font-family: -apple-system, 'Roboto', 'Helvetica', 'Arial', sans-serif;
+}
+
+input,
+textarea,
+pre,
+code {
+  font: inherit;
+}
+```
+
+2. Apply the font-family with a wildcard selector:
+
+```css
+* {
+  font-family: -apple-system, 'Roboto', 'Helvetica', 'Arial', sans-serif;
+}
+```
+
+3. Use a [reset.css](https://meyerweb.com/eric/tools/css/reset/) that does this for you.
+
+We use to recomend option 3.
+
+## Dynamic font sizes
+
+Mistica components support scalling font sizes automatically based on OS or browser accesibility settings. If
+you want your web to properly work with dynamic font sizes, we recommend to setup a base font size of 16px or
+100% (which is the same as 16px in most browsers):
+
+```css
+html {
+  font-size: 16px; /* or 100% */
+}
+```
+
+Also, to make dynamic font sizes work properly in iOS devices you need to include this:
+
+```css
+/**
+ * To enable Dynamic Type in apple devices:
+ * See: https://dev.to/colingourlay/how-to-support-apple-s-dynamic-text-in-your-web-content-with-css-40c0
+ */
+@supports (font: -apple-system-body) {
+  html {
+    font: -apple-system-body !important;
+  }
+}
+```

package/doc/forms.md

@@ -0,0 +1,177 @@
+# Forms
+
+<!-- TOC depthFrom:2 -->
+
+- [Form example](#form-example)
+  - [Important notes](#important-notes)
+- [Form fields](#form-fields)
+  - [CreditCardFields](#creditcardfields)
+  - [CreditCardNumberField](#creditcardnumberfield)
+  - [CreditCardExpirationField](#creditcardexpirationfield)
+  - [CvvField](#cvvfield)
+  - [DateField](#datefield)
+  - [DecimalField](#decimalfield)
+  - [IntegerField](#integerfield)
+  - [PasswordField](#passwordfield)
+  - [EmailField](#emailfield)
+  - [Select](#select)
+  - [PhoneNumberField](#phonenumberfield)
+  - [IbanField](#ibanfield)
+- [DoubleField](#doublefield)
+- [useForm Hook](#useform-hook)
+
+<!-- /TOC -->
+
+You can build complex forms with automatic state handling using the components provided by this library
+
+## Form example
+
+Let's see a quick example to see how it works
+
+```js
+import {Form, TextField, ButtonPrimary} from '@telefonica/mistica';
+
+const validateName = (name) => (/^\w+$/.test(name) ? '' : 'bad username');
+
+const LoginForm = () => {
+  // {user, pass} contains field values for inputs named "user" and "pass"
+  const handleSubmit = ({user, pass}) =>
+    api.login({user, pass}).then(() => {
+      document.location.href = '/home';
+    });
+
+  return (
+    <Form onSubmit={handleSubmit}>
+      <TextField name="user" label="Username" validate={validateName} />
+      <TextField name="pass" label="Password" type="password" />
+      <ButtonPrimary submit>Log in</ButtonPrimary>
+    </Form>
+  );
+};
+```
+
+### Important notes
+
+- Submit button must include the `submit` prop
+- :warning: Submit handler automatically prevents default submit event (calls to `event.preventDefault()`).
+  So, for now, you can't use this component to send a `POST` request to `action` attribute URL.
+- Form fields are required by default. If a required field is empty it will be marked as error on submit or
+  blur. Add the `optional` prop to mark a field as optional.
+- `Form`'s `onSubmit` prop is a `function` that receives an `object` whose keys are the names of the form
+  fields and the values are the values of the form fields. This function must return a promise.
+- When the form is submitting (while the `onSubmit` promise is not resolved or rejected), all fields are
+  automatically disabled and a spinner is shown inside submit button.
+- Form fields accept a `validate` prop that can be used to validate field values before submitting. This
+  validation is executed on blur or submit. Validation function must return a string with the error message or
+  empty string if succeeded.
+- Form optionally accepts an object of `initialValues` e.g. `<Form initialValues={{email: prevEmail}}`
+- You can also use FormField components outside a `<Form>` component but you will lose the magic: automatic
+  form validation, disable fields when sending, show spinner on submit button, etc.
+
+## Form fields
+
+### CreditCardFields
+
+- Use it if you want to request credit card information
+- This component will render 3 fields:
+  - `CreditCardNumberField`
+  - `CreditCardExpirationField`
+  - `CvvField`
+- When used inside a `<Form>` component, these fields have built-in validations:
+  - Simple validation is performed in credit card number
+  - CVV length depends on card type
+  - Expiration date must be a future date
+
+### CreditCardNumberField
+
+- To request a Credit Card number
+- Use `acceptedCards` prop to set accepted cards. By default:
+  - `{americanExpress: true, visa: true, masterCard: true}`
+- An icon will hint the card type based on the card number
+
+### CreditCardExpirationField
+
+- To request a Credit Card expiration date
+- Format as you write (MM/YY)
+
+### CvvField
+
+- To request the Credit Card Verification value
+
+### DateField
+
+- To select dates
+- Uses device/browser native date picker
+
+### DecimalField
+
+- Shows a numeric keypad in mobile devices
+- Values restricted to decimal values
+- Decimal separator characted (comma or dot) depends on context locale
+
+### IntegerField
+
+- Shows a numeric keypad in mobile devices
+- Values restricted to integer values
+
+### PasswordField
+
+- Use this field to request a password
+- Includes an "eye" icon to show/hide password
+- Use the `autoComplete` prop to autocomplete to an existing password (`"current-password"`) or request a new
+  one (`"new-password"`)
+
+### EmailField
+
+- Use this field to request an email address
+- Has built-in email address validation (naive)
+- Uses an email keypad on mobile
+- Autocompletes to current email, to disable, set `autoComplete` to `"off"`
+
+### Select
+
+Use this component to create a `Select`
+
+```js
+const options = [
+  {value: 1, text: 'orange'},
+  {value: 2, text: 'apple'},
+];
+
+//...
+
+<Select options={options} />;
+```
+
+### PhoneNumberField
+
+To enter phone numbers
+
+- Uses Google's `libphonenumber` library to format numbers as you type (uses `locale` from theme context to
+  format numbers accordingly)
+
+### IbanField
+
+To enter bank accounts using the IBAN format
+
+- Formats the IBAN number as you type
+- Validates the number using the checksum
+
+## DoubleField
+
+Use this component to place two fields at the same row
+
+```js
+<DoubleField>
+  <TextField name="foo" label="Foo" />
+  <TextField name="bar" label="Bar" />
+</DoubleField>
+```
+
+## useForm Hook
+
+With `useForm` you can access the form context. See `form-context.tsx`.
+
+This allows you to implement advanced form logic. See form stories for examples.
+
+Please open an issue if your use case is not covered or you need additional examples.

package/doc/images/layout/box.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="152" viewBox="-1 -1 302 152">
+    <rect y="0" width="300" height="150" fill="pink" />
+    <rect y="32" x="16" width="calc(300 - 32)" height="calc(150 - 64)" fill="lightgray" stroke="black" />
+    <text x="130" y="20">32px</text>
+    <text x="0" y="80" >16px</text>
+</svg>

package/doc/images/layout/grid-layout-desktop-5-4.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="243" viewBox="-1 -1 362 242">
+  <rect x="0" y="0" height="240" width="360" fill="pink" stroke="black"/>
+  <rect x="48" y="0" height="240" width="calc(360 - 96)" fill="lightgray" stroke="black"/>
+  <rect x="69.5" y="0" height="60" width="105.5" stroke="black" fill="rgba(255,0,0,0.3)"/>
+  <rect x="205.5" y="0" height="60" width="82" stroke="black" fill="rgba(0,0,255,0.3)"/>
+  <text x="78" y="20">Left</text>
+  <text x="214" y="20">Right</text>
+</svg>

package/doc/images/layout/grid-layout-desktop-6-6.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="243" viewBox="-1 -1 362 242">
+  <rect x="0" y="0" height="240" width="360" fill="pink" stroke="black"/>
+  <rect x="48" y="0" height="240" width="calc(360 - 96)" fill="lightgray" stroke="black"/>
+  <rect x="48" y="0" height="60" width="128" stroke="black" fill="rgba(255,0,0,0.3)"/>
+  <rect x="184" y="0" height="60" width="128" stroke="black" fill="rgba(0,0,255,0.3)"/>
+  <text x="56" y="20">Left</text>
+  <text x="192" y="20">Right</text>
+</svg>

package/doc/images/layout/grid-layout-desktop-8-4.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="243" viewBox="-1 -1 362 242">
+  <rect x="0" y="0" height="240" width="360" fill="pink" stroke="black"/>
+  <rect x="48" y="0" height="240" width="calc(360 - 96)" fill="lightgray" stroke="black"/>
+  <rect x="48" y="0" height="60" width="174" stroke="black" fill="rgba(255,0,0,0.3)"/>
+  <rect x="230" y="0" height="60" width="82" stroke="black" fill="rgba(0,0,255,0.3)"/>
+  <text x="56" y="20">Left</text>
+  <text x="238" y="20">Right</text>
+</svg>

package/doc/images/layout/grid-layout-desktop.svg

@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="243" viewBox="-1 -1 362 242">
+  <rect x="0" y="0" height="240" width="360" fill="pink" stroke="black"/>
+  <rect x="48" y="0" height="240" width="calc(360 - 96)" fill="lightgray" stroke="black"/>
+  <rect x="48" y="0" height="240" width="18" fill="rgba(0,0,128,0.3)"/>
+  <rect x="70.3" y="0" height="240" width="18" fill="rgba(0,0,128,0.3)"/>
+  <rect x="92.6" y="0" height="240" width="18" fill="rgba(0,0,128,0.3)"/>
+  <rect x="114.9" y="0" height="240" width="18" fill="rgba(0,0,128,0.3)"/>
+  <rect x="137.2" y="0" height="240" width="18" fill="rgba(0,0,128,0.3)"/>
+  <rect x="159.5" y="0" height="240" width="18" fill="rgba(0,0,128,0.3)"/>
+  <rect x="181.8" y="0" height="240" width="18" fill="rgba(0,0,128,0.3)"/>
+  <rect x="204.1" y="0" height="240" width="18" fill="rgba(0,0,128,0.3)"/>
+  <rect x="226.4" y="0" height="240" width="18" fill="rgba(0,0,128,0.3)"/>
+  <rect x="248.7" y="0" height="240" width="18" fill="rgba(0,0,128,0.3)"/>
+  <rect x="271" y="0" height="240" width="18" fill="rgba(0,0,128,0.3)"/>
+  <rect x="293.3" y="0" height="240" width="18" fill="rgba(0,0,128,0.3)"/>
+</svg>

package/doc/images/layout/grid-layout-mobile-5-4.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="163" viewBox="-1 -1 102 162">
+  <rect x="0" y="0" height="160" width="100" fill="pink" stroke="black"/>
+  <rect x="8" y="0" height="160" width="calc(100 - 16)" fill="lightgray" stroke="black"/>
+
+  <rect x="8" y="0" height="60" width="calc(100 - 16)" fill="rgba(255,0,0,0.3)" stroke="black"/>
+  <rect x="8" y="60" height="60" width="calc(100 - 16)" fill="rgba(0,0,255,0.3)" stroke="black"/>
+  <text x="16" y="20">Left</text>
+  <text x="16" y="80">Right</text>
+</svg>

package/doc/images/layout/grid-layout-mobile-6-6.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="163" viewBox="-1 -1 102 162">
+  <rect x="0" y="0" height="160" width="100" fill="pink" stroke="black"/>
+  <rect x="8" y="0" height="160" width="calc(100 - 16)" fill="lightgray" stroke="black"/>
+
+  <rect x="8" y="0" height="60" width="calc(100 - 16)" fill="rgba(255,0,0,0.3)" stroke="black"/>
+  <rect x="8" y="60" height="60" width="calc(100 - 16)" fill="rgba(0,0,255,0.3)" stroke="black"/>
+  <text x="16" y="20">Left</text>
+  <text x="16" y="80">Right</text>
+</svg>

package/doc/images/layout/grid-layout-mobile-8-4.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="163" viewBox="-1 -1 102 162">
+  <rect x="0" y="0" height="160" width="100" fill="pink" stroke="black"/>
+  <rect x="8" y="0" height="160" width="calc(100 - 16)" fill="lightgray" stroke="black"/>
+
+  <rect x="8" y="0" height="60" width="calc(100 - 16)" fill="rgba(255,0,0,0.3)" stroke="black"/>
+  <rect x="8" y="60" height="60" width="calc(100 - 16)" fill="rgba(0,0,255,0.3)" stroke="black"/>
+  <text x="16" y="20">Left</text>
+  <text x="16" y="80">Right</text>
+</svg>

package/doc/images/layout/grid-layout-mobile.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="163" viewBox="-1 -1 102 162">
+  <rect x="0" y="0" height="160" width="100" fill="pink" stroke="black"/>
+  <rect x="8" y="0" height="160" width="calc(100 - 16)" fill="lightgray" stroke="black"/>
+  <rect x="8" y="0" height="160" width="calc(100 - 16)" fill="rgba(0,0,128,0.3)" stroke="black"/>
+</svg>

package/doc/images/layout/grid-layout-tablet-5-4.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="243" viewBox="-1 -1 162 242">
+  <rect x="0" y="0" height="240" width="160" fill="pink" stroke="black"/>
+  <rect x="12" y="0" height="240" width="calc(160 - 24)" fill="lightgray" stroke="black"/>
+  <rect x="12" y="0" height="60" width="calc(160 - 24)" fill="rgba(255,0,0,0.3)" stroke="black"/>
+  <rect x="12" y="60" height="60" width="calc(160 - 24)" fill="rgba(0,0,255,0.3)" stroke="black"/>
+  <text x="20" y="20">Left</text>
+  <text x="20" y="80">Right</text>
+</svg>

package/doc/images/layout/grid-layout-tablet-6-6.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="243" viewBox="-1 -1 162 242">
+  <rect x="0" y="0" height="240" width="160" fill="pink" stroke="black"/>
+  <rect x="12" y="0" height="240" width="calc(160 - 24)" fill="lightgray" stroke="black"/>
+  <rect x="12" y="0" height="60" width="calc(160 - 24)" fill="rgba(255,0,0,0.3)" stroke="black"/>
+  <rect x="12" y="60" height="60" width="calc(160 - 24)" fill="rgba(0,0,255,0.3)" stroke="black"/>
+  <text x="20" y="20">Left</text>
+  <text x="20" y="80">Right</text>
+</svg>

package/doc/images/layout/grid-layout-tablet-8-4.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="243" viewBox="-1 -1 162 242">
+  <rect x="0" y="0" height="240" width="160" fill="pink" stroke="black"/>
+  <rect x="12" y="0" height="240" width="calc(160 - 24)" fill="lightgray" stroke="black"/>
+  <rect x="12" y="0" height="60" width="calc(160 - 24)" fill="rgba(255,0,0,0.3)" stroke="black"/>
+  <rect x="12" y="60" height="60" width="calc(160 - 24)" fill="rgba(0,0,255,0.3)" stroke="black"/>
+  <text x="20" y="20">Left</text>
+  <text x="20" y="80">Right</text>
+</svg>