matcha-components 20.12.0 → 20.15.0

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

@@ -0,0 +1,134 @@
+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

@@ -0,0 +1,134 @@
+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

@@ -0,0 +1,134 @@
+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

@@ -0,0 +1,134 @@
+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>