npm - matcha-components - Versions diffs - 20.15.0 → 20.17.0 - Mend

matcha-components 20.15.0 → 20.17.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (810) hide show

package/src/documentation/foundation/flexbox/flexbox.mdx DELETED Viewed

@@ -1,420 +0,0 @@
-import { Meta } from "@storybook/addon-docs";
-<Meta title="Foundation / Flex / Flexbox" />
-# Flex Dependent Classes
-As classes dependentes do display `flex` controlam a exibição e o comportamento dos elementos utilizando várias propriedades CSS relacionadas ao flexbox.
-Todas essas classes possuem **opções** de infix de breakpoint (`xs`, `sm`, `md`, `lg`, `xl`) e suffix de `!important`.
-Anatomia da classe: `.flex-#{$infix}#{$flex-type}#{$has-important}` => `.flex-md-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 flex-xs-row flex-center-center h-124 w-124 text-center font-size-14">flex-xs-row</div>
-        <div class="accent flex-sm-column flex-center-center h-124 w-124 text-center font-size-14">flex-sm-column</div>
-        <div class="accent flex-md-wrap flex-center-center h-124 w-124 text-center font-size-14">flex-md-wrap</div>
-        <div class="accent flex-lg-nowrap flex-center-center h-124 w-124 text-center font-size-14">flex-lg-nowrap</div>
-        <div class="accent flex-xl-center-center flex-center-center h-124 w-124 text-center font-size-14">flex-xl-center-center</div>
-    </div>
-    <div>
-        ```html
-        <div class="flex-xs-row">flex-xs-row</div>
-        <div class="flex-sm-column">flex-sm-column</div>
-        <div class="flex-md-wrap">flex-md-wrap</div>
-        <div class="flex-lg-nowrap">flex-lg-nowrap</div>
-        <div class="flex-xl-center-center">flex-xl-center-center</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>.flex-row</td>
-                <td>flex-direction: row;</td>
-            </tr>
-            <tr>
-                <td>.flex-row--force</td>
-                <td>flex-direction: row !important;</td>
-            </tr>
-            <tr>
-                <td>.flex-row-reverse</td>
-                <td>flex-direction: row-reverse;</td>
-            </tr>
-            <tr>
-                <td>.flex-row-reverse--force</td>
-                <td>flex-direction: row-reverse !important;</td>
-            </tr>
-            <tr>
-                <td>.flex-column</td>
-                <td>flex-direction: column;</td>
-            </tr>
-            <tr>
-                <td>.flex-column--force</td>
-                <td>flex-direction: column !important;</td>
-            </tr>
-            <tr>
-                <td>.flex-column-reverse</td>
-                <td>flex-direction: column-reverse;</td>
-            </tr>
-            <tr>
-                <td>.flex-column-reverse--force</td>
-                <td>flex-direction: column-reverse !important;</td>
-            </tr>
-            <tr>
-                <td>.flex-nowrap</td>
-                <td>flex-wrap: nowrap;</td>
-            </tr>
-            <tr>
-                <td>.flex-nowrap--force</td>
-                <td>flex-wrap: nowrap !important;</td>
-            </tr>
-            <tr>
-                <td>.flex-wrap</td>
-                <td>flex-wrap: wrap;</td>
-            </tr>
-            <tr>
-                <td>.flex-wrap--force</td>
-                <td>flex-wrap: wrap !important;</td>
-            </tr>
-            <tr>
-                <td>.flex-align-center</td>
-                <td>align-items: center;</td>
-            </tr>
-            <tr>
-                <td>.flex-align-center--force</td>
-                <td>align-items: center !important;</td>
-            </tr>
-            <tr>
-                <td>.flex-align-start</td>
-                <td>align-items: flex-start;</td>
-            </tr>
-            <tr>
-                <td>.flex-align-start--force</td>
-                <td>align-items: flex-start !important;</td>
-            </tr>
-            <tr>
-                <td>.flex-align-end</td>
-                <td>align-items: flex-end;</td>
-            </tr>
-            <tr>
-                <td>.flex-align-end--force</td>
-                <td>align-items: flex-end !important;</td>
-            </tr>
-            <tr>
-                <td>.flex-align-inherit</td>
-                <td>align-items: inherit;</td>
-            </tr>
-            <tr>
-                <td>.flex-align-inherit--force</td>
-                <td>align-items: inherit !important;</td>
-            </tr>
-            <tr>
-                <td>.flex-align-initial</td>
-                <td>align-items: initial;</td>
-            </tr>
-            <tr>
-                <td>.flex-align-initial--force</td>
-                <td>align-items: initial !important;</td>
-            </tr>
-            <tr>
-                <td>.flex-align-self-end</td>
-                <td>align-self: flex-end;</td>
-            </tr>
-            <tr>
-                <td>.flex-align-self-end--force</td>
-                <td>align-self: flex-end !important;</td>
-            </tr>
-            <tr>
-                <td>.flex-align-self-start</td>
-                <td>align-self: flex-start;</td>
-            </tr>
-            <tr>
-                <td>.flex-align-self-start--force</td>
-                <td>align-self: flex-start !important;</td>
-            </tr>
-            <tr>
-                <td>.flex-align-self-inherit</td>
-                <td>align-self: inherit;</td>
-            </tr>
-            <tr>
-                <td>.flex-align-self-inherit--force</td>
-                <td>align-self: inherit !important;</td>
-            </tr>
-            <tr>
-                <td>.flex-align-self-initial</td>
-                <td>align-self: initial;</td>
-            </tr>
-            <tr>
-                <td>.flex-align-self-initial--force</td>
-                <td>align-self: initial !important;</td>
-            </tr>
-            <tr>
-                <td>.flex-center-center</td>
-                <td>justify-content: center; align-items: center;</td>
-            </tr>
-            <tr>
-                <td>.flex-center-center--force</td>
-                <td>justify-content: center !important; align-items: center !important;</td>
-            </tr>
-            <tr>
-                <td>.flex-center</td>
-                <td>justify-content: center;</td>
-            </tr>
-            <tr>
-                <td>.flex-center--force</td>
-                <td>justify-content: center !important;</td>
-            </tr>
-            <tr>
-                <td>.flex-end</td>
-                <td>justify-content: flex-end;</td>
-            </tr>
-            <tr>
-                <td>.flex-end--force</td>
-                <td>justify-content: flex-end !important;</td>
-            </tr>
-            <tr>
-                <td>.flex-start</td>
-                <td>justify-content: flex-start;</td>
-            </tr>
-            <tr>
-                <td>.flex-start--force</td>
-                <td>justify-content: flex-start !important;</td>
-            </tr>
-            <tr>
-                <td>.flex-inherit</td>
-                <td>justify-content: inherit;</td>
-            </tr>
-            <tr>
-                <td>.flex-inherit--force</td>
-                <td>justify-content: inherit !important;</td>
-            </tr>
-            <tr>
-                <td>.flex-initial</td>
-                <td>justify-content: initial;</td>
-            </tr>
-            <tr>
-                <td>.flex-initial--force</td>
-                <td>justify-content: initial !important;</td>
-            </tr>
-            <tr>
-                <td>.flex-left</td>
-                <td>justify-content: left;</td>
-            </tr>
-            <tr>
-                <td>.flex-left--force</td>
-                <td>justify-content: left !important;</td>
-            </tr>
-            <tr>
-                <td>.flex-normal</td>
-                <td>justify-content: normal;</td>
-            </tr>
-            <tr>
-                <td>.flex-normal--force</td>
-                <td>justify-content: normal !important;</td>
-            </tr>
-            <tr>
-                <td>.flex-revert</td>
-                <td>justify-content: revert;</td>
-            </tr>
-            <tr>
-                <td>.flex-revert--force</td>
-                <td>justify-content: revert !important;</td>
-            </tr>
-            <tr>
-                <td>.flex-right</td>
-                <td>justify-content: right;</td>
-            </tr>
-            <tr>
-                <td>.flex-right--force</td>
-                <td>justify-content: right !important;</td>
-            </tr>
-            <tr>
-                <td>.flex-space-around</td>
-                <td>justify-content: space-around;</td>
-            </tr>
-            <tr>
-                <td>.flex-space-around--force</td>
-                <td>justify-content: space-around !important;</td>
-            </tr>
-            <tr>
-                <td>.flex-space-between</td>
-                <td>justify-content: space-between;</td>
-            </tr>
-            <tr>
-                <td>.flex-space-between--force</td>
-                <td>justify-content: space-between !important;</td>
-            </tr>
-            <tr>
-                <td>.flex-space-evenly</td>
-                <td>justify-content: space-evenly;</td>
-            </tr>
-            <tr>
-                <td>.flex-space-evenly--force</td>
-                <td>justify-content: space-evenly !important;</td>
-            </tr>
-            <tr>
-                <td>.flex-stretch</td>
-                <td>align-items: stretch;</td>
-            </tr>
-            <tr>
-                <td>.flex-stretch--force</td>
-                <td>align-items: stretch !important;</td>
-            </tr>
-            <tr>
-                <td>.flex-unset</td>
-                <td>justify-content: unset;</td>
-            </tr>
-            <tr>
-                <td>.flex-unset--force</td>
-                <td>justify-content: unset !important;</td>
-            </tr>
-            <tr>
-                <td>.flex-grow-0</td>
-                <td>flex-grow: 0;</td>
-            </tr>
-            <tr>
-                <td>.flex-shrink-0</td>
-                <td>flex-shrink: 0;</td>
-            </tr>
-            <tr>
-                <td>.flex-grow-1</td>
-                <td>flex-grow: 1;</td>
-            </tr>
-            <tr>
-                <td>.flex-shrink-1</td>
-                <td>flex-shrink: 1;</td>
-            </tr>
-            <tr>
-                <td>.flex-grow-2</td>
-                <td>flex-grow: 2;</td>
-            </tr>
-            <tr>
-                <td>.flex-shrink-2</td>
-                <td>flex-shrink: 2;</td>
-            </tr>
-            <tr>
-                <td>.flex-grow-3</td>
-                <td>flex-grow: 3;</td>
-            </tr>
-            <tr>
-                <td>.flex-shrink-3</td>
-                <td>flex-shrink: 3;</td>
-            </tr>
-            <tr>
-                <td>.flex-full</td>
-                <td>flex: 1 1 100%;</td>
-            </tr>
-            <tr>
-                <td>.flex-basis-1</td>
-                <td>flex-basis: 1px;</td>
-            </tr>
-        </tbody>
-    </table>
-</div>
-### Atributos de Breakpoints
-<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>.flex-xs-row</td>
-                <td>flex-direction: row;</td>
-            </tr>
-            <tr>
-                <td>.flex-xs-row--force</td>
-                <td>flex-direction: row !important;</td>
-            </tr>
-            <tr>
-                <td>.flex-sm-column</td>
-                <td>flex-direction: column;</td>
-            </tr>
-            <tr>
-                <td>.flex-sm-column--force</td>
-                <td>flex-direction: column !important;</td>
-            </tr>
-            <tr>
-                <td>.flex-md-wrap</td>
-                <td>flex-wrap: wrap;</td>
-            </tr>
-            <tr>
-                <td>.flex-md-wrap--force</td>
-                <td>flex-wrap: wrap !important;</td>
-            </tr>
-            <tr>
-                <td>.flex-lg-nowrap</td>
-                <td>flex-wrap: nowrap;</td>
-            </tr>
-            <tr>
-                <td>.flex-lg-nowrap--force</td>
-                <td>flex-wrap: nowrap !important;</td>
-            </tr>
-            <tr>
-                <td>.flex-xl-center-center</td>
-                <td>justify-content: center; align-items: center;</td>
-            </tr>
-            <tr>
-                <td>.flex-xl-center-center--force</td>
-                <td>justify-content: center !important; align-items: center !important;</td>
-            </tr>
-        </tbody>
-    </table>
-</div>
-### Instalação
-Para utilizar as classes de _Flex Dependent_, 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/opacity/opacity.mdx DELETED Viewed

@@ -1,104 +0,0 @@
-import { Meta } from "@storybook/addon-docs";
-<Meta title="Foundation / Opacity / Opacity" />
-### Opacity (Opacidade)
-As classes de opacidade controlam a transparência dos elementos usando a propriedade CSS `opacity`.
-Todas essas classes possuem **opções** de infix de breakpoint (`xs`, `sm`, `md`, `lg`, `xl`) e suffix de `!important`.
-Anatomia da classe: `.opacity#{$infix}-#{$value}#{$has-important}` => `.opacity-md-05--force`
-<p class="h5 mb-8 font-size-16 mt-4">Exemplos</p>
-<div class="matcha-card background-surface flex-column gap-16">
-    <div class="matcha-card background-bg gap-16 flex-row flex-wrap">
-        <div class="accent p-16 opacity-01">opacity-01</div>
-        <div class="accent p-16 opacity-03">opacity-03</div>
-        <div class="accent p-16 opacity-05">opacity-05</div>
-        <div class="accent p-16 opacity-07">opacity-07</div>
-        <div class="accent p-16 opacity-09">opacity-09</div>
-        <div class="accent p-16 opacity-1">opacity-1</div>
-    </div>
-    <div>
-        ```html
-        <div class="opacity-01">opacity: 0.1</div>
-        <div class="opacity-03">opacity: 0.3</div>
-        <div class="opacity-05">opacity: 0.5</div>
-        <div class="opacity-07">opacity: 0.7</div>
-        <div class="opacity-09">opacity: 0.9</div>
-        <div class="opacity-1">opacity: 1</div>
-        ```
-    </div>
-</div>
-<div class="h-24"></div>
-<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>opacity-0</td><td>opacity: 0;</td></tr>
-            <tr><td>opacity-01</td><td>opacity: 0.1;</td></tr>
-            <tr><td>opacity-02</td><td>opacity: 0.2;</td></tr>
-            <tr><td>opacity-03</td><td>opacity: 0.3;</td></tr>
-            <tr><td>opacity-04</td><td>opacity: 0.4;</td></tr>
-            <tr><td>opacity-05</td><td>opacity: 0.5;</td></tr>
-            <tr><td>opacity-06</td><td>opacity: 0.6;</td></tr>
-            <tr><td>opacity-07</td><td>opacity: 0.7;</td></tr>
-            <tr><td>opacity-08</td><td>opacity: 0.8;</td></tr>
-            <tr><td>opacity-09</td><td>opacity: 0.9;</td></tr>
-            <tr><td>opacity-1</td><td>opacity: 1;</td></tr>
-            <tr><td>opacity-10</td><td>opacity: 1;</td></tr>
-        </tbody>
-    </table>
-</div>
-<div class="h-400 w-100-p overflow-y-scroll">
-    <table class="w-100-p">
-        <thead>
-            <tr>
-                <th>Classe</th>
-                <th>Propriedade</th>
-                <th>Breakpoint</th>
-            </tr>
-        </thead>
-        <tbody>
-            {["0", "01", "05", "1"].map((value) => (
-                <>
-                    <tr>
-                        <td>opacity-xs-{value}</td>
-                        <td>opacity: {value === "01" ? "0.1" : value};</td>
-                        <td>@media only screen and (max-width: 599px)</td>
-                    </tr>
-                    <tr>
-                        <td>opacity-sm-{value}</td>
-                        <td>opacity: {value === "01" ? "0.1" : value};</td>
-                        <td>@media only screen and (min-width: 600px) and (max-width: 1023px)</td>
-                    </tr>
-                    <tr>
-                        <td>opacity-md-{value}</td>
-                        <td>opacity: {value === "01" ? "0.1" : value};</td>
-                        <td>@media only screen and (min-width: 1024px) and (max-width: 1439px)</td>
-                    </tr>
-                    <tr>
-                        <td>opacity-lg-{value}</td>
-                        <td>opacity: {value === "01" ? "0.1" : value};</td>
-                        <td>@media only screen and (min-width: 1440px) and (max-width: 1919px)</td>
-                    </tr>
-                    <tr>
-                        <td>opacity-xl-{value}</td>
-                        <td>opacity: {value === "01" ? "0.1" : value};</td>
-                        <td>@media only screen and (min-width: 1920px)</td>
-                    </tr>
-                </>
-            ))}
-        </tbody>
-    </table>
-</div>

package/src/documentation/foundation/position/alignment.mdx DELETED Viewed

@@ -1,148 +0,0 @@
-import { Meta } from "@storybook/addon-docs";
-<Meta title="Foundation / Position / Alignment" />
-### Position Alignment
-As classes de posicionamento controlam o alinhamento dos elementos utilizando as propriedades top, right, bottom e left.
-Todas essas classes possuem **opções** de infix de breakpoint(`xs`, `sm`, `md`, `lg`, `xl`) e suffix de `!important`.
-Anatomia da classe: `.place-#{$direction}#{$infix}#{$has-important}` => `.place-top-md--force`.
-    <p class="h5 mb-8 font-size-16 mt-4">Exemplos</p>
-    <div class="matcha-card background-surface flex-column gap-16">
-        <div class="matcha-card background-bg gap-16 flex-center-center position-relative h-300">
-            <div class="position-absolute accent place-top flex-center-center h-100 w-200 text-center font-size-14">place-top - top: 0;</div>
-            <div class="position-absolute accent place-bottom flex-center-center h-100 w-200 text-center font-size-14">place-bottom - bottom: 0;</div>
-            <div class="position-absolute accent place-right flex-center-center h-100 w-200 text-center font-size-14">place-right - right: 0;</div>
-            <div class="position-absolute accent place-left flex-center-center h-100 w-200 text-center font-size-14">place-left - left: 0;</div>
-        </div>
-        <div>
-            ```html
-            <div class="position-relative h-300">
-                <div class="position-absolute place-top">top: 0;</div>
-                <div class="position-absolute place-right">right: 0;</div>
-                <div class="position-absolute place-bottom">bottom: 0;</div>
-                <div class="position-absolute place-left">left: 0;</div>
-            </div>
-            ```
-        </div>
-    </div>
-    <div class="h-24"></div>
-    <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>place-top</td>
-                    <td>top: 0;</td>
-                </tr>
-                <tr>
-                    <td>place-right</td>
-                    <td>right: 0;</td>
-                </tr>
-                <tr>
-                    <td>place-bottom</td>
-                    <td>bottom: 0;</td>
-                </tr>
-                <tr>
-                    <td>place-left</td>
-                    <td>left: 0;</td>
-                </tr>
-                <tr>
-                    <td>place-top--force</td>
-                    <td>top: 0 !important;</td>
-                </tr>
-                <tr>
-                    <td>place-right--force</td>
-                    <td>right: 0 !important;</td>
-                </tr>
-                <tr>
-                    <td>place-bottom--force</td>
-                    <td>bottom: 0 !important;</td>
-                </tr>
-                <tr>
-                    <td>place-left--force</td>
-                    <td>left: 0 !important;</td>
-                </tr>
-            </tbody>
-        </table>
-    </div>
-    <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>
-            {["top", "bottom", "left", "right"].map((direction) => (
-                <>
-                        <tr key={`place-${direction}`}>
-                            <td>place-xs-{direction}</td>
-                            <td>{direction}: 0px;</td>
-                            <td>@media only screen and (min-width: 600px)</td>
-                        </tr>
-                        <tr key={`place-${direction}--force`}>
-                            <td>place-xs-{direction}--force</td>
-                            <td>{direction}: 0px !important;</td>
-                            <td>@media only screen and (min-width: 600px)</td>
-                        </tr>
-                        <tr key={`place-${direction}`}>
-                            <td>place-sm-{direction}</td>
-                            <td>{direction}: 0px;</td>
-                            <td>@media only screen and (min-width: 1024px)</td>
-                        </tr>
-                        <tr key={`place-${direction}--force`}>
-                            <td>place-sm-{direction}--force</td>
-                            <td>{direction}: 0px !important;</td>
-                            <td>@media only screen and (min-width: 1024px)</td>
-                        </tr>
-                        <tr key={`place-${direction}`}>
-                            <td>place-md-{direction}</td>
-                            <td>{direction}: 0px;</td>
-                            <td>@media only screen and (min-width: 1440px)</td>
-                        </tr>
-                        <tr key={`place-${direction}--force`}>
-                            <td>place-md-{direction}--force</td>
-                            <td>{direction}: 0px !important;</td>
-                            <td>@media only screen and (min-width: 1440px)</td>
-                        </tr>
-                        <tr key={`place-${direction}`}>
-                            <td>place-lg-{direction}</td>
-                            <td>{direction}: 0px;</td>
-                            <td>@media only screen and (min-width: 1920px)</td>
-                        </tr>
-                        <tr key={`place-${direction}--force`}>
-                            <td>place-lg-{direction}--force</td>
-                            <td>{direction}: 0px !important;</td>
-                            <td>@media only screen and (min-width: 1920px)</td>
-                        </tr>
-                        <tr key={`place-${direction}`}>
-                            <td>place-xl-{direction}</td>
-                            <td>{direction}: 0px;</td>
-                            <td>@media only screen and (min-width: 2560px)</td>
-                        </tr>
-                        <tr key={`place-${direction}--force`}>
-                            <td>place-xl-{direction}--force</td>
-                            <td>{direction}: 0px !important;</td>
-                            <td>@media only screen and (min-width: 2560px)</td>
-                        </tr>
-                    </>
-            ))}
-            </tbody>
-        </table>
-    </div>