matcha-components 20.12.0 → 20.15.0

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

@@ -0,0 +1,134 @@
+import { Meta } from "@storybook/addon-docs";
+
+<Meta title="Foundation / Display / Flex" />
+
+# Display Flex
+
+As classes de display controlam a exibição dos elementos utilizando a propriedade CSS `display: flex`.
+
+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-flex--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-flex flex-center-center h-124 w-124 text-center font-size-14">d-xs-flex</div>
+        <div class="accent d-sm-flex flex-center-center h-124 w-124 text-center font-size-14">d-sm-flex</div>
+        <div class="accent d-md-flex flex-center-center h-124 w-124 text-center font-size-14">d-md-flex</div>
+        <div class="accent d-lg-flex flex-center-center h-124 w-124 text-center font-size-14">d-lg-flex</div>
+        <div class="accent d-xl-flex flex-center-center h-124 w-124 text-center font-size-14">d-xl-flex</div>
+    </div>
+
+    <div>
+        ```html
+        <div class="d-xs-flex">d-xs-flex</div>
+        <div class="d-sm-flex">d-sm-flex</div>
+        <div class="d-md-flex">d-md-flex</div>
+        <div class="d-lg-flex">d-lg-flex</div>
+        <div class="d-xl-flex">d-xl-flex</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-flex</td>
+                <td>display: flex;</td>
+            </tr>
+            <tr>
+                <td>.d-flex--force</td>
+                <td>display: flex !important;</td>
+            </tr>
+            <tr>
+                <td>.d-xs-flex</td>
+                <td>display: flex;</td>
+            </tr>
+            <tr>
+                <td>.d-xs-flex--force</td>
+                <td>display: flex !important;</td>
+            </tr>
+            <tr>
+                <td>.d-sm-flex</td>
+                <td>display: flex;</td>
+            </tr>
+            <tr>
+                <td>.d-sm-flex--force</td>
+                <td>display: flex !important;</td>
+            </tr>
+            <tr>
+                <td>.d-md-flex</td>
+                <td>display: flex;</td>
+            </tr>
+            <tr>
+                <td>.d-md-flex--force</td>
+                <td>display: flex !important;</td>
+            </tr>
+            <tr>
+                <td>.d-lg-flex</td>
+                <td>display: flex;</td>
+            </tr>
+            <tr>
+                <td>.d-lg-flex--force</td>
+                <td>display: flex !important;</td>
+            </tr>
+            <tr>
+                <td>.d-xl-flex</td>
+                <td>display: flex;</td>
+            </tr>
+            <tr>
+                <td>.d-xl-flex--force</td>
+                <td>display: flex !important;</td>
+            </tr>
+        </tbody>
+    </table>
+</div>
+
+### Instalação
+Para utilizar as classes de _Display Flex_, 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-grid.mdx

@@ -0,0 +1,134 @@
+import { Meta } from "@storybook/addon-docs";
+
+<Meta title="Foundation / Display / Grid" />
+
+# Display Grid
+
+As classes de display controlam a exibição dos elementos utilizando a propriedade CSS `display: grid`.
+
+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-grid--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-grid flex-center-center h-124 w-124 text-center font-size-14">d-xs-grid</div>
+        <div class="accent d-sm-grid flex-center-center h-124 w-124 text-center font-size-14">d-sm-grid</div>
+        <div class="accent d-md-grid flex-center-center h-124 w-124 text-center font-size-14">d-md-grid</div>
+        <div class="accent d-lg-grid flex-center-center h-124 w-124 text-center font-size-14">d-lg-grid</div>
+        <div class="accent d-xl-grid flex-center-center h-124 w-124 text-center font-size-14">d-xl-grid</div>
+    </div>
+
+    <div>
+        ```html
+        <div class="d-xs-grid">d-xs-grid</div>
+        <div class="d-sm-grid">d-sm-grid</div>
+        <div class="d-md-grid">d-md-grid</div>
+        <div class="d-lg-grid">d-lg-grid</div>
+        <div class="d-xl-grid">d-xl-grid</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-grid</td>
+                <td>display: grid;</td>
+            </tr>
+            <tr>
+                <td>.d-grid--force</td>
+                <td>display: grid !important;</td>
+            </tr>
+            <tr>
+                <td>.d-xs-grid</td>
+                <td>display: grid;</td>
+            </tr>
+            <tr>
+                <td>.d-xs-grid--force</td>
+                <td>display: grid !important;</td>
+            </tr>
+            <tr>
+                <td>.d-sm-grid</td>
+                <td>display: grid;</td>
+            </tr>
+            <tr>
+                <td>.d-sm-grid--force</td>
+                <td>display: grid !important;</td>
+            </tr>
+            <tr>
+                <td>.d-md-grid</td>
+                <td>display: grid;</td>
+            </tr>
+            <tr>
+                <td>.d-md-grid--force</td>
+                <td>display: grid !important;</td>
+            </tr>
+            <tr>
+                <td>.d-lg-grid</td>
+                <td>display: grid;</td>
+            </tr>
+            <tr>
+                <td>.d-lg-grid--force</td>
+                <td>display: grid !important;</td>
+            </tr>
+            <tr>
+                <td>.d-xl-grid</td>
+                <td>display: grid;</td>
+            </tr>
+            <tr>
+                <td>.d-xl-grid--force</td>
+                <td>display: grid !important;</td>
+            </tr>
+        </tbody>
+    </table>
+</div>
+
+### Instalação
+Para utilizar as classes de _Display Grid_, 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-inline-block.mdx

@@ -0,0 +1,134 @@
+import { Meta } from "@storybook/addon-docs";
+
+<Meta title="Foundation / Display / Inline Block" />
+
+# Display Inline Block
+
+As classes de display controlam a exibição dos elementos utilizando a propriedade CSS `display: inline-block`.
+
+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-inline-block--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-inline-block flex-center-center h-124 w-124 text-center font-size-14">d-xs-inline-block</div>
+        <div class="accent d-sm-inline-block flex-center-center h-124 w-124 text-center font-size-14">d-sm-inline-block</div>
+        <div class="accent d-md-inline-block flex-center-center h-124 w-124 text-center font-size-14">d-md-inline-block</div>
+        <div class="accent d-lg-inline-block flex-center-center h-124 w-124 text-center font-size-14">d-lg-inline-block</div>
+        <div class="accent d-xl-inline-block flex-center-center h-124 w-124 text-center font-size-14">d-xl-inline-block</div>
+    </div>
+
+    <div>
+        ```html
+        <div class="d-xs-inline-block">d-xs-inline-block</div>
+        <div class="d-sm-inline-block">d-sm-inline-block</div>
+        <div class="d-md-inline-block">d-md-inline-block</div>
+        <div class="d-lg-inline-block">d-lg-inline-block</div>
+        <div class="d-xl-inline-block">d-xl-inline-block</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-inline-block</td>
+                <td>display: inline-block;</td>
+            </tr>
+            <tr>
+                <td>.d-inline-block--force</td>
+                <td>display: inline-block !important;</td>
+            </tr>
+            <tr>
+                <td>.d-xs-inline-block</td>
+                <td>display: inline-block;</td>
+            </tr>
+            <tr>
+                <td>.d-xs-inline-block--force</td>
+                <td>display: inline-block !important;</td>
+            </tr>
+            <tr>
+                <td>.d-sm-inline-block</td>
+                <td>display: inline-block;</td>
+            </tr>
+            <tr>
+                <td>.d-sm-inline-block--force</td>
+                <td>display: inline-block !important;</td>
+            </tr>
+            <tr>
+                <td>.d-md-inline-block</td>
+                <td>display: inline-block;</td>
+            </tr>
+            <tr>
+                <td>.d-md-inline-block--force</td>
+                <td>display: inline-block !important;</td>
+            </tr>
+            <tr>
+                <td>.d-lg-inline-block</td>
+                <td>display: inline-block;</td>
+            </tr>
+            <tr>
+                <td>.d-lg-inline-block--force</td>
+                <td>display: inline-block !important;</td>
+            </tr>
+            <tr>
+                <td>.d-xl-inline-block</td>
+                <td>display: inline-block;</td>
+            </tr>
+            <tr>
+                <td>.d-xl-inline-block--force</td>
+                <td>display: inline-block !important;</td>
+            </tr>
+        </tbody>
+    </table>
+</div>
+
+### Instalação
+Para utilizar as classes de _Display Inline Block_, 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-inline-flex.mdx

@@ -0,0 +1,134 @@
+import { Meta } from "@storybook/addon-docs";
+
+<Meta title="Foundation / Display / Inline Flex" />
+
+# Display Inline Flex
+
+As classes de display controlam a exibição dos elementos utilizando a propriedade CSS `display: inline-flex`.
+
+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-inline-flex--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-inline-flex flex-center-center h-124 w-124 text-center font-size-14">d-xs-inline-flex</div>
+        <div class="accent d-sm-inline-flex flex-center-center h-124 w-124 text-center font-size-14">d-sm-inline-flex</div>
+        <div class="accent d-md-inline-flex flex-center-center h-124 w-124 text-center font-size-14">d-md-inline-flex</div>
+        <div class="accent d-lg-inline-flex flex-center-center h-124 w-124 text-center font-size-14">d-lg-inline-flex</div>
+        <div class="accent d-xl-inline-flex flex-center-center h-124 w-124 text-center font-size-14">d-xl-inline-flex</div>
+    </div>
+
+    <div>
+        ```html
+        <div class="d-xs-inline-flex">d-xs-inline-flex</div>
+        <div class="d-sm-inline-flex">d-sm-inline-flex</div>
+        <div class="d-md-inline-flex">d-md-inline-flex</div>
+        <div class="d-lg-inline-flex">d-lg-inline-flex</div>
+        <div class="d-xl-inline-flex">d-xl-inline-flex</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-inline-flex</td>
+                <td>display: inline-flex;</td>
+            </tr>
+            <tr>
+                <td>.d-inline-flex--force</td>
+                <td>display: inline-flex !important;</td>
+            </tr>
+            <tr>
+                <td>.d-xs-inline-flex</td>
+                <td>display: inline-flex;</td>
+            </tr>
+            <tr>
+                <td>.d-xs-inline-flex--force</td>
+                <td>display: inline-flex !important;</td>
+            </tr>
+            <tr>
+                <td>.d-sm-inline-flex</td>
+                <td>display: inline-flex;</td>
+            </tr>
+            <tr>
+                <td>.d-sm-inline-flex--force</td>
+                <td>display: inline-flex !important;</td>
+            </tr>
+            <tr>
+                <td>.d-md-inline-flex</td>
+                <td>display: inline-flex;</td>
+            </tr>
+            <tr>
+                <td>.d-md-inline-flex--force</td>
+                <td>display: inline-flex !important;</td>
+            </tr>
+            <tr>
+                <td>.d-lg-inline-flex</td>
+                <td>display: inline-flex;</td>
+            </tr>
+            <tr>
+                <td>.d-lg-inline-flex--force</td>
+                <td>display: inline-flex !important;</td>
+            </tr>
+            <tr>
+                <td>.d-xl-inline-flex</td>
+                <td>display: inline-flex;</td>
+            </tr>
+            <tr>
+                <td>.d-xl-inline-flex--force</td>
+                <td>display: inline-flex !important;</td>
+            </tr>
+        </tbody>
+    </table>
+</div>
+
+### Instalação
+Para utilizar as classes de _Display Inline Flex_, 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-inline.mdx

@@ -0,0 +1,134 @@
+import { Meta } from "@storybook/addon-docs";
+
+<Meta title="Foundation / Display / Inline" />
+
+# Display Inline
+
+As classes de display controlam a exibição dos elementos utilizando a propriedade CSS `display: inline`.
+
+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-inline--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-inline flex-center-center h-124 w-124 text-center font-size-14">d-xs-inline</div>
+        <div class="accent d-sm-inline flex-center-center h-124 w-124 text-center font-size-14">d-sm-inline</div>
+        <div class="accent d-md-inline flex-center-center h-124 w-124 text-center font-size-14">d-md-inline</div>
+        <div class="accent d-lg-inline flex-center-center h-124 w-124 text-center font-size-14">d-lg-inline</div>
+        <div class="accent d-xl-inline flex-center-center h-124 w-124 text-center font-size-14">d-xl-inline</div>
+    </div>
+
+    <div>
+        ```html
+        <div class="d-xs-inline">d-xs-inline</div>
+        <div class="d-sm-inline">d-sm-inline</div>
+        <div class="d-md-inline">d-md-inline</div>
+        <div class="d-lg-inline">d-lg-inline</div>
+        <div class="d-xl-inline">d-xl-inline</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-inline</td>
+                <td>display: inline;</td>
+            </tr>
+            <tr>
+                <td>.d-inline--force</td>
+                <td>display: inline !important;</td>
+            </tr>
+            <tr>
+                <td>.d-xs-inline</td>
+                <td>display: inline;</td>
+            </tr>
+            <tr>
+                <td>.d-xs-inline--force</td>
+                <td>display: inline !important;</td>
+            </tr>
+            <tr>
+                <td>.d-sm-inline</td>
+                <td>display: inline;</td>
+            </tr>
+            <tr>
+                <td>.d-sm-inline--force</td>
+                <td>display: inline !important;</td>
+            </tr>
+            <tr>
+                <td>.d-md-inline</td>
+                <td>display: inline;</td>
+            </tr>
+            <tr>
+                <td>.d-md-inline--force</td>
+                <td>display: inline !important;</td>
+            </tr>
+            <tr>
+                <td>.d-lg-inline</td>
+                <td>display: inline;</td>
+            </tr>
+            <tr>
+                <td>.d-lg-inline--force</td>
+                <td>display: inline !important;</td>
+            </tr>
+            <tr>
+                <td>.d-xl-inline</td>
+                <td>display: inline;</td>
+            </tr>
+            <tr>
+                <td>.d-xl-inline--force</td>
+                <td>display: inline !important;</td>
+            </tr>
+        </tbody>
+    </table>
+</div>
+
+### Instalação
+Para utilizar as classes de _Display Inline_, 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>