matcha-components 20.15.0 → 20.16.0

package/src/documentation/foundation/displays/display-none.mdx

@@ -1,134 +0,0 @@
-import { Meta } from "@storybook/addon-docs";
-
-<Meta title="Foundation / Display / None" />
-
-# Display None
-
-As classes de display controlam a exibição dos elementos utilizando a propriedade CSS `display: none`.
-
-Todas essas classes possuem **opções** de infix de breakpoint (`xs`, `sm`, `md`, `lg`, `xl`) e suffix de `!important`.
-
-Anatomia da classe: `.d-#{$infix}#{$display-type}#{$has-important}` => `.d-md-none--force`.
-
-### Exemplo
-<div class="matcha-card background-surface flex-column gap-16">
-    <div class="matcha-card background-bg grid-2 gap-16 grid-sm-3 flex-md-space-between">
-        <div class="accent d-xs-none flex-center-center h-124 w-124 text-center font-size-14">d-xs-none</div>
-        <div class="accent d-sm-none flex-center-center h-124 w-124 text-center font-size-14">d-sm-none</div>
-        <div class="accent d-md-none flex-center-center h-124 w-124 text-center font-size-14">d-md-none</div>
-        <div class="accent d-lg-none flex-center-center h-124 w-124 text-center font-size-14">d-lg-none</div>
-        <div class="accent d-xl-none flex-center-center h-124 w-124 text-center font-size-14">d-xl-none</div>
-    </div>
-
-    <div>
-        ```html
-        <div class="d-xs-none">d-xs-none</div>
-        <div class="d-sm-none">d-sm-none</div>
-        <div class="d-md-none">d-md-none</div>
-        <div class="d-lg-none">d-lg-none</div>
-        <div class="d-xl-none">d-xl-none</div>
-        ```
-    </div>
-</div>
-
-### Atributos
-<div class="h-400 w-100-p overflow-y-scroll">
-    <table class="w-100-p">
-        <thead>
-            <tr>
-                <th>Classe</th>
-                <th>Propriedade</th>
-            </tr>
-        </thead>
-        <tbody>
-            <tr>
-                <td>.d-none</td>
-                <td>display: none;</td>
-            </tr>
-            <tr>
-                <td>.d-none--force</td>
-                <td>display: none !important;</td>
-            </tr>
-            <tr>
-                <td>.d-xs-none</td>
-                <td>display: none;</td>
-            </tr>
-            <tr>
-                <td>.d-xs-none--force</td>
-                <td>display: none !important;</td>
-            </tr>
-            <tr>
-                <td>.d-sm-none</td>
-                <td>display: none;</td>
-            </tr>
-            <tr>
-                <td>.d-sm-none--force</td>
-                <td>display: none !important;</td>
-            </tr>
-            <tr>
-                <td>.d-md-none</td>
-                <td>display: none;</td>
-            </tr>
-            <tr>
-                <td>.d-md-none--force</td>
-                <td>display: none !important;</td>
-            </tr>
-            <tr>
-                <td>.d-lg-none</td>
-                <td>display: none;</td>
-            </tr>
-            <tr>
-                <td>.d-lg-none--force</td>
-                <td>display: none !important;</td>
-            </tr>
-            <tr>
-                <td>.d-xl-none</td>
-                <td>display: none;</td>
-            </tr>
-            <tr>
-                <td>.d-xl-none--force</td>
-                <td>display: none !important;</td>
-            </tr>
-        </tbody>
-    </table>
-</div>
-
-### Instalação
-Para utilizar as classes de _Display None_, você pode fazer de duas formas:
-
-Primeira opção, você pode importar o pacote matcha-core no seu projeto.
-
-1. Instale o pacote [matcha-core](https://www.npmjs.com/package/matcha-core) via npm ou yarn.
-
-`npm install matcha-core`
-
-2. Importe o pacote no seu estilo global, diretamente no seu angular.json ou no head do seu index.html.
-
-<div class="matcha-card background-surface flex-column gap-16">
-    <span class="h6">Importação via estilo global:</span>
-    <div class="flex-column">
-        ```css
-        @import 'node_modules/matcha-core/matcha-core.min.css';
-        ```
-    </div>
-
-    <span class="h6">Importação via angular.json:</span>
-    <div class="flex-column">
-        ```js
-        "styles": [
-            "node_modules/matcha-core/matcha-core.min.css"
-        ]
-        ```
-    </div>
-</div>
-
-Segunda opção, você pode importar o pacote diretamente no seu HTML.
-
-<div class="matcha-card background-surface flex-column gap-16">
-    <span class="h6">Importação na tag header do HTML</span>
-    <div class="flex-column">
-        ```html
-        <link rel="stylesheet" href="https://unpkg.com/matcha-core@latest/matcha-core.min.css">
-        ```
-    </div>
-</div>

package/src/documentation/foundation/displays/display-table-cell.mdx

@@ -1,134 +0,0 @@
-import { Meta } from "@storybook/addon-docs";
-
-<Meta title="Foundation / Display / Table Cell" />
-
-# Display Table Cell
-
-As classes de display controlam a exibição dos elementos utilizando a propriedade CSS `display: table-cell`.
-
-Todas essas classes possuem **opções** de infix de breakpoint (`xs`, `sm`, `md`, `lg`, `xl`) e suffix de `!important`.
-
-Anatomia da classe: `.d-#{$infix}#{$display-type}#{$has-important}` => `.d-md-table-cell--force`.
-
-### Exemplo
-<div class="matcha-card background-surface flex-column gap-16">
-    <div class="matcha-card background-bg grid-2 gap-16 grid-sm-3 flex-md-space-between">
-        <div class="accent d-xs-table-cell flex-center-center h-124 w-124 text-center font-size-14">d-xs-table-cell</div>
-        <div class="accent d-sm-table-cell flex-center-center h-124 w-124 text-center font-size-14">d-sm-table-cell</div>
-        <div class="accent d-md-table-cell flex-center-center h-124 w-124 text-center font-size-14">d-md-table-cell</div>
-        <div class="accent d-lg-table-cell flex-center-center h-124 w-124 text-center font-size-14">d-lg-table-cell</div>
-        <div class="accent d-xl-table-cell flex-center-center h-124 w-124 text-center font-size-14">d-xl-table-cell</div>
-    </div>
-
-    <div>
-        ```html
-        <div class="d-xs-table-cell">d-xs-table-cell</div>
-        <div class="d-sm-table-cell">d-sm-table-cell</div>
-        <div class="d-md-table-cell">d-md-table-cell</div>
-        <div class="d-lg-table-cell">d-lg-table-cell</div>
-        <div class="d-xl-table-cell">d-xl-table-cell</div>
-        ```
-    </div>
-</div>
-
-### Atributos
-<div class="h-400 w-100-p overflow-y-scroll">
-    <table class="w-100-p">
-        <thead>
-            <tr>
-                <th>Classe</th>
-                <th>Propriedade</th>
-            </tr>
-        </thead>
-        <tbody>
-            <tr>
-                <td>.d-table-cell</td>
-                <td>display: table-cell;</td>
-            </tr>
-            <tr>
-                <td>.d-table-cell--force</td>
-                <td>display: table-cell !important;</td>
-            </tr>
-            <tr>
-                <td>.d-xs-table-cell</td>
-                <td>display: table-cell;</td>
-            </tr>
-            <tr>
-                <td>.d-xs-table-cell--force</td>
-                <td>display: table-cell !important;</td>
-            </tr>
-            <tr>
-                <td>.d-sm-table-cell</td>
-                <td>display: table-cell;</td>
-            </tr>
-            <tr>
-                <td>.d-sm-table-cell--force</td>
-                <td>display: table-cell !important;</td>
-            </tr>
-            <tr>
-                <td>.d-md-table-cell</td>
-                <td>display: table-cell;</td>
-            </tr>
-            <tr>
-                <td>.d-md-table-cell--force</td>
-                <td>display: table-cell !important;</td>
-            </tr>
-            <tr>
-                <td>.d-lg-table-cell</td>
-                <td>display: table-cell;</td>
-            </tr>
-            <tr>
-                <td>.d-lg-table-cell--force</td>
-                <td>display: table-cell !important;</td>
-            </tr>
-            <tr>
-                <td>.d-xl-table-cell</td>
-                <td>display: table-cell;</td>
-            </tr>
-            <tr>
-                <td>.d-xl-table-cell--force</td>
-                <td>display: table-cell !important;</td>
-            </tr>
-        </tbody>
-    </table>
-</div>
-
-### Instalação
-Para utilizar as classes de _Display Table Cell_, você pode fazer de duas formas:
-
-Primeira opção, você pode importar o pacote matcha-core no seu projeto.
-
-1. Instale o pacote [matcha-core](https://www.npmjs.com/package/matcha-core) via npm ou yarn.
-
-`npm install matcha-core`
-
-2. Importe o pacote no seu estilo global, diretamente no seu angular.json ou no head do seu index.html.
-
-<div class="matcha-card background-surface flex-column gap-16">
-    <span class="h6">Importação via estilo global:</span>
-    <div class="flex-column">
-        ```css
-        @import 'node_modules/matcha-core/matcha-core.min.css';
-        ```
-    </div>
-
-    <span class="h6">Importação via angular.json:</span>
-    <div class="flex-column">
-        ```js
-        "styles": [
-            "node_modules/matcha-core/matcha-core.min.css"
-        ]
-        ```
-    </div>
-</div>
-
-Segunda opção, você pode importar o pacote diretamente no seu HTML.
-
-<div class="matcha-card background-surface flex-column gap-16">
-    <span class="h6">Importação na tag header do HTML</span>
-    <div class="flex-column">
-        ```html
-        <link rel="stylesheet" href="https://unpkg.com/matcha-core@latest/matcha-core.min.css">
-        ```
-    </div>
-</div>

package/src/documentation/foundation/displays/display-table-row.mdx

@@ -1,134 +0,0 @@
-import { Meta } from "@storybook/addon-docs";
-
-<Meta title="Foundation / Display / Table Row" />
-
-# Display Table Row
-
-As classes de display controlam a exibição dos elementos utilizando a propriedade CSS `display: table-row`.
-
-Todas essas classes possuem **opções** de infix de breakpoint (`xs`, `sm`, `md`, `lg`, `xl`) e suffix de `!important`.
-
-Anatomia da classe: `.d-#{$infix}#{$display-type}#{$has-important}` => `.d-md-table-row--force`.
-
-### Exemplo
-<div class="matcha-card background-surface flex-column gap-16">
-    <div class="matcha-card background-bg grid-2 gap-16 grid-sm-3 flex-md-space-between">
-        <div class="accent d-xs-table-row flex-center-center h-124 w-124 text-center font-size-14">d-xs-table-row</div>
-        <div class="accent d-sm-table-row flex-center-center h-124 w-124 text-center font-size-14">d-sm-table-row</div>
-        <div class="accent d-md-table-row flex-center-center h-124 w-124 text-center font-size-14">d-md-table-row</div>
-        <div class="accent d-lg-table-row flex-center-center h-124 w-124 text-center font-size-14">d-lg-table-row</div>
-        <div class="accent d-xl-table-row flex-center-center h-124 w-124 text-center font-size-14">d-xl-table-row</div>
-    </div>
-
-    <div>
-        ```html
-        <div class="d-xs-table-row">d-xs-table-row</div>
-        <div class="d-sm-table-row">d-sm-table-row</div>
-        <div class="d-md-table-row">d-md-table-row</div>
-        <div class="d-lg-table-row">d-lg-table-row</div>
-        <div class="d-xl-table-row">d-xl-table-row</div>
-        ```
-    </div>
-</div>
-
-### Atributos
-<div class="h-400 w-100-p overflow-y-scroll">
-    <table class="w-100-p">
-        <thead>
-            <tr>
-                <th>Classe</th>
-                <th>Propriedade</th>
-            </tr>
-        </thead>
-        <tbody>
-            <tr>
-                <td>.d-table-row</td>
-                <td>display: table-row;</td>
-            </tr>
-            <tr>
-                <td>.d-table-row--force</td>
-                <td>display: table-row !important;</td>
-            </tr>
-            <tr>
-                <td>.d-xs-table-row</td>
-                <td>display: table-row;</td>
-            </tr>
-            <tr>
-                <td>.d-xs-table-row--force</td>
-                <td>display: table-row !important;</td>
-            </tr>
-            <tr>
-                <td>.d-sm-table-row</td>
-                <td>display: table-row;</td>
-            </tr>
-            <tr>
-                <td>.d-sm-table-row--force</td>
-                <td>display: table-row !important;</td>
-            </tr>
-            <tr>
-                <td>.d-md-table-row</td>
-                <td>display: table-row;</td>
-            </tr>
-            <tr>
-                <td>.d-md-table-row--force</td>
-                <td>display: table-row !important;</td>
-            </tr>
-            <tr>
-                <td>.d-lg-table-row</td>
-                <td>display: table-row;</td>
-            </tr>
-            <tr>
-                <td>.d-lg-table-row--force</td>
-                <td>display: table-row !important;</td>
-            </tr>
-            <tr>
-                <td>.d-xl-table-row</td>
-                <td>display: table-row;</td>
-            </tr>
-            <tr>
-                <td>.d-xl-table-row--force</td>
-                <td>display: table-row !important;</td>
-            </tr>
-        </tbody>
-    </table>
-</div>
-
-### Instalação
-Para utilizar as classes de _Display Table Row_, você pode fazer de duas formas:
-
-Primeira opção, você pode importar o pacote matcha-core no seu projeto.
-
-1. Instale o pacote [matcha-core](https://www.npmjs.com/package/matcha-core) via npm ou yarn.
-
-`npm install matcha-core`
-
-2. Importe o pacote no seu estilo global, diretamente no seu angular.json ou no head do seu index.html.
-
-<div class="matcha-card background-surface flex-column gap-16">
-    <span class="h6">Importação via estilo global:</span>
-    <div class="flex-column">
-        ```css
-        @import 'node_modules/matcha-core/matcha-core.min.css';
-        ```
-    </div>
-
-    <span class="h6">Importação via angular.json:</span>
-    <div class="flex-column">
-        ```js
-        "styles": [
-            "node_modules/matcha-core/matcha-core.min.css"
-        ]
-        ```
-    </div>
-</div>
-
-Segunda opção, você pode importar o pacote diretamente no seu HTML.
-
-<div class="matcha-card background-surface flex-column gap-16">
-    <span class="h6">Importação na tag header do HTML</span>
-    <div class="flex-column">
-        ```html
-        <link rel="stylesheet" href="https://unpkg.com/matcha-core@latest/matcha-core.min.css">
-        ```
-    </div>
-</div>

package/src/documentation/foundation/displays/display-table.mdx

@@ -1,134 +0,0 @@
-import { Meta } from "@storybook/addon-docs";
-
-<Meta title="Foundation / Display / Table" />
-
-# Display Table
-
-As classes de display controlam a exibição dos elementos utilizando a propriedade CSS `display: table`.
-
-Todas essas classes possuem **opções** de infix de breakpoint (`xs`, `sm`, `md`, `lg`, `xl`) e suffix de `!important`.
-
-Anatomia da classe: `.d-#{$infix}#{$display-type}#{$has-important}` => `.d-md-table--force`.
-
-### Exemplo
-<div class="matcha-card background-surface flex-column gap-16">
-    <div class="matcha-card background-bg grid-2 gap-16 grid-sm-3 flex-md-space-between">
-        <div class="accent d-xs-table flex-center-center h-124 w-124 text-center font-size-14">d-xs-table</div>
-        <div class="accent d-sm-table flex-center-center h-124 w-124 text-center font-size-14">d-sm-table</div>
-        <div class="accent d-md-table flex-center-center h-124 w-124 text-center font-size-14">d-md-table</div>
-        <div class="accent d-lg-table flex-center-center h-124 w-124 text-center font-size-14">d-lg-table</div>
-        <div class="accent d-xl-table flex-center-center h-124 w-124 text-center font-size-14">d-xl-table</div>
-    </div>
-
-    <div>
-        ```html
-        <div class="d-xs-table">d-xs-table</div>
-        <div class="d-sm-table">d-sm-table</div>
-        <div class="d-md-table">d-md-table</div>
-        <div class="d-lg-table">d-lg-table</div>
-        <div class="d-xl-table">d-xl-table</div>
-        ```
-    </div>
-</div>
-
-### Atributos
-<div class="h-400 w-100-p overflow-y-scroll">
-    <table class="w-100-p">
-        <thead>
-            <tr>
-                <th>Classe</th>
-                <th>Propriedade</th>
-            </tr>
-        </thead>
-        <tbody>
-            <tr>
-                <td>.d-table</td>
-                <td>display: table;</td>
-            </tr>
-            <tr>
-                <td>.d-table--force</td>
-                <td>display: table !important;</td>
-            </tr>
-            <tr>
-                <td>.d-xs-table</td>
-                <td>display: table;</td>
-            </tr>
-            <tr>
-                <td>.d-xs-table--force</td>
-                <td>display: table !important;</td>
-            </tr>
-            <tr>
-                <td>.d-sm-table</td>
-                <td>display: table;</td>
-            </tr>
-            <tr>
-                <td>.d-sm-table--force</td>
-                <td>display: table !important;</td>
-            </tr>
-            <tr>
-                <td>.d-md-table</td>
-                <td>display: table;</td>
-            </tr>
-            <tr>
-                <td>.d-md-table--force</td>
-                <td>display: table !important;</td>
-            </tr>
-            <tr>
-                <td>.d-lg-table</td>
-                <td>display: table;</td>
-            </tr>
-            <tr>
-                <td>.d-lg-table--force</td>
-                <td>display: table !important;</td>
-            </tr>
-            <tr>
-                <td>.d-xl-table</td>
-                <td>display: table;</td>
-            </tr>
-            <tr>
-                <td>.d-xl-table--force</td>
-                <td>display: table !important;</td>
-            </tr>
-        </tbody>
-    </table>
-</div>
-
-### Instalação
-Para utilizar as classes de _Display Table_, você pode fazer de duas formas:
-
-Primeira opção, você pode importar o pacote matcha-core no seu projeto.
-
-1. Instale o pacote [matcha-core](https://www.npmjs.com/package/matcha-core) via npm ou yarn.
-
-`npm install matcha-core`
-
-2. Importe o pacote no seu estilo global, diretamente no seu angular.json ou no head do seu index.html.
-
-<div class="matcha-card background-surface flex-column gap-16">
-    <span class="h6">Importação via estilo global:</span>
-    <div class="flex-column">
-        ```css
-        @import 'node_modules/matcha-core/matcha-core.min.css';
-        ```
-    </div>
-
-    <span class="h6">Importação via angular.json:</span>
-    <div class="flex-column">
-        ```js
-        "styles": [
-            "node_modules/matcha-core/matcha-core.min.css"
-        ]
-        ```
-    </div>
-</div>
-
-Segunda opção, você pode importar o pacote diretamente no seu HTML.
-
-<div class="matcha-card background-surface flex-column gap-16">
-    <span class="h6">Importação na tag header do HTML</span>
-    <div class="flex-column">
-        ```html
-        <link rel="stylesheet" href="https://unpkg.com/matcha-core@latest/matcha-core.min.css">
-        ```
-    </div>
-</div>