matcha-components 1.0.5 → 1.0.7

package/src/foundation/sizes/max-heights.mdx

@@ -0,0 +1,237 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Fundamentos / Sizes / Max-height" />
+
+### Max-Height
+
+Nessa seção serão apresentadas as maneiras de se usar as classes para
+max-height.
+
+#### Pixels
+
+Os tamanhos em pixels das classes são sempre múltiplos de **4**, sendo o mínimo
+0 e o máximo **256**.
+
+    <div class="h-256 w-100-p overflow-y-scroll">
+        <table class="w-100-p">
+            <thead>
+                <tr>
+                    <th>Classe</th>
+                    <th>Propriedade</th>
+                </tr>
+            </thead>
+            <tbody>
+                {Array.from({ length: 65 }, (_, index) => {
+                const maxHeightValue = index * 4;
+                return (
+                    <tr key={`max-h-${maxHeightValue}`}>
+                        <td>max-h-{maxHeightValue}</td>
+                        <td>max-max-height: {maxHeightValue}px;</td>
+                    </tr>
+                );
+                })}
+            </tbody>
+        </table>
+    </div>
+
+    <div class="h-24"></div>
+
+    <p class="h5 mb-8 font-size-16 mt-4">Exemplos</p>
+
+    <div class="matcha-card background-surface d-flex-column gap-16">
+        <div class="matcha-card background-bg d-flex-row gap-8 h-40">
+            <div class="max-h-4 h-100-p w-100-p background-accent"></div>
+            <div class="max-h-8 h-100-p w-100-p background-accent"></div>
+            <div class="max-h-12 h-100-p w-100-p background-accent"></div>
+            <div class="max-h-16 h-100-p w-100-p background-accent"></div>
+            <div class="max-h-20 h-100-p w-100-p background-accent"></div>
+        </div>
+        <div>
+            ```html
+            <div class="matcha-card background-bg d-flex-row gap-8 h-40">
+                <div class="max-h-4 h-100-p w-100-p background-accent">4px max-height</div>
+                <div class="max-h-8 h-100-p w-100-p background-accent">8px max-height</div>
+                <div class="max-h-12 h-100-p w-100-p background-accent">12px max-height</div>
+                <div class="max-h-16 h-100-p w-100-p background-accent">16px max-height</div>
+                <div class="max-h-20 h-100-p w-100-p background-accent">20px max-height</div>
+            </div>
+            ```
+        </div>
+    </div>
+
+#### Porcentagem
+
+Os tamanhos em porcentagem das classes são sempre múltiplos de **5**, sendo o
+mínimo 0 e o máximo **100**.
+
+        <div class="h-256 w-100-p overflow-y-scroll">
+        <table class="w-100-p">
+            <thead>
+                <tr>
+                    <th>Classe</th>
+                    <th>Propriedade</th>
+                </tr>
+            </thead>
+            <tbody>
+                {Array.from({ length: 21 }, (_, index) => {
+                const maxHeightValue = index * 5;
+                return (
+                    <tr key={`h-${maxHeightValue}-p`}>
+                        <td>max-h-{maxHeightValue}-p</td>
+                        <td>max-max-height: {maxHeightValue}%;</td>
+                    </tr>
+                );
+                })}
+            </tbody>
+        </table>
+    </div>
+
+    <div class="h-24"></div>
+
+    <p class="h5 mb-8 font-size-16 mt-4">Exemplos</p>
+
+    <div class="matcha-card background-surface d-flex-column gap-16">
+        <div class="matcha-card background-bg d-flex-row gap-8 h-100">
+            <div class="max-h-20-p w-100-p background-accent"></div>
+            <div class="max-h-30-p w-100-p background-accent"></div>
+            <div class="max-h-50-p w-100-p background-accent"></div>
+            <div class="max-h-75-p w-100-p background-accent"></div>
+            <div class="max-h-100-p w-100-p background-accent"></div>
+        </div>
+        <div>
+            ```html
+            <div class="matcha-card background-bg d-flex-row gap-8 h-100">
+                <div class="max-h-20-p w-100-p background-accent">20% max-height</div>
+                <div class="max-h-30-p w-100-p background-accent">30% max-height</div>
+                <div class="max-h-50-p w-100-p background-accent">50% max-height</div>
+                <div class="max-h-75-p w-100-p background-accent">75% max-height</div>
+                <div class="max-h-100-p w-100-p background-accent">100% max-height</div>
+            </div>
+            ```
+        </div>
+    </div>
+
+    <div class="h-24"></div>
+
+#### Breakpoints
+
+- xs: 600px
+- sm: 1024px
+- md: 1440px
+- lg: 1920px
+- xl: 2560px
+
+As classes de altura máxima (max-height) seguem a seguinte convenção:
+
+max-h-\{**breakpoint**\}-\{**valorEmPixels**\}
+
+max-h-\{**breakpoint**\}-\{**valorEmPorcentagem**\}-p
+
+Exemplos:
+
+**max-h-xs-8** é aplicado quando a largura mínima da tela atinge 600px, e a
+altura máxima do elemento é definida como 8px.
+
+**max-h-lg-75-p** é aplicado quando a largura mínima da tela atinge 1920px, e a
+altura máxima do elemento é definida como 75%.
+
+    <div class="h-16"></div>
+
+---
+
+    <p class="h5 mb-8 font-size-16">Classes em Pixels:</p>
+
+    <div class="h-256 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>
+                {Array.from({ length: 65 }, (_, index) => {
+                const maxHeightValue = index * 4;
+                return (
+                    <>
+                        <tr key={`max-h-${maxHeightValue}`}>
+                            <td>max-h-xs-{maxHeightValue}</td>
+                            <td>max-height: {maxHeightValue}px;</td>
+                            <td>@media only screen and (min-width: 600px)</td>
+                        </tr>
+                        <tr key={`max-h-${maxHeightValue}`}>
+                            <td>max-h-sm-{maxHeightValue}</td>
+                            <td>max-height: {maxHeightValue}px;</td>
+                            <td>@media only screen and (min-width: 1024px)</td>
+                        </tr>
+                        <tr key={`max-h-${maxHeightValue}`}>
+                            <td>max-h-md-{maxHeightValue}</td>
+                            <td>max-height: {maxHeightValue}px;</td>
+                            <td>@media only screen and (min-width: 1440px)</td>
+                        </tr>
+                        <tr key={`max-h-${maxHeightValue}`}>
+                            <td>max-h-lg-{maxHeightValue}</td>
+                            <td>max-height: {maxHeightValue}px;</td>
+                            <td>@media only screen and (min-width: 1920px)</td>
+                        </tr>
+                        <tr key={`max-h-${maxHeightValue}`}>
+                            <td>max-h-xl-{maxHeightValue}</td>
+                            <td>max-height: {maxHeightValue}px;</td>
+                            <td>@media only screen and (min-width: 2560px)</td>
+                        </tr>
+                    </>
+                );
+                })}
+            </tbody>
+        </table>
+    </div>
+
+    <div class="h-16"></div>
+    <p class="h5 mb-8 font-size-16 mt-16">Classes em Porcentagem:</p>
+
+    <div class="h-256 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>
+                {Array.from({ length: 21 }, (_, index) => {
+                const maxHeightValue = index * 5;
+                return (
+                    <>
+                        <tr key={`max-h-${maxHeightValue}`}>
+                            <td>max-h-xs-{maxHeightValue}-p</td>
+                            <td>max-height: {maxHeightValue}%;</td>
+                            <td>@media only screen and (min-width: 600px)</td>
+                        </tr>
+                        <tr key={`max-h-${maxHeightValue}`}>
+                            <td>max-h-sm-{maxHeightValue}-p</td>
+                            <td>max-height: {maxHeightValue}%;</td>
+                            <td>@media only screen and (min-width: 1024px)</td>
+                        </tr>
+                        <tr key={`max-h-${maxHeightValue}`}>
+                            <td>max-h-md-{maxHeightValue}-p</td>
+                            <td>max-height: {maxHeightValue}%;</td>
+                            <td>@media only screen and (min-width: 1440px)</td>
+                        </tr>
+                        <tr key={`max-h-${maxHeightValue}`}>
+                            <td>max-h-lg-{maxHeightValue}-p</td>
+                            <td>max-height: {maxHeightValue}%;</td>
+                            <td>@media only screen and (min-width: 1920px)</td>
+                        </tr>
+                        <tr key={`max-h-${maxHeightValue}`}>
+                            <td>max-h-xl-{maxHeightValue}-p</td>
+                            <td>max-height: {maxHeightValue}%;</td>
+                            <td>@media only screen and (min-width: 2560px)</td>
+                        </tr>
+                    </>
+                );
+                })}
+            </tbody>
+        </table>
+    </div>

package/src/foundation/sizes/max-width.mdx

@@ -0,0 +1,236 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Fundamentos / Sizes / Max-width" />
+
+### Max-Width
+
+Nessa seção serão apresentadas as maneiras de se usar as classes para max-width.
+
+#### Pixels
+
+Os tamanhos em pixels das classes são sempre múltiplos de **4**, sendo o mínimo
+0 e o máximo **256**.
+
+    <div class="h-256 w-100-p overflow-y-scroll">
+        <table class="w-100-p">
+            <thead>
+                <tr>
+                    <th>Classe</th>
+                    <th>Propriedade</th>
+                </tr>
+            </thead>
+            <tbody>
+                {Array.from({ length: 65 }, (_, index) => {
+                const maxWidthValue = index * 4;
+                return (
+                    <tr key={`max-w-${maxWidthValue}`}>
+                        <td>max-w-{maxWidthValue}</td>
+                        <td>max-width: {maxWidthValue}px;</td>
+                    </tr>
+                );
+                })}
+            </tbody>
+        </table>
+    </div>
+
+    <div class="h-24"></div>
+
+    <p class="h5 mb-8 font-size-16 mt-4">Exemplos</p>
+
+    <div class="matcha-card background-surface d-flex-column gap-16">
+        <div class="matcha-card background-bg d-flex-column gap-8">
+            <div class="max-w-4 w-100-p h-32 background-accent"></div>
+            <div class="max-w-8 w-100-p h-32 background-accent"></div>
+            <div class="max-w-12 w-100-p h-32 background-accent"></div>
+            <div class="max-w-16 w-100-p h-32 background-accent"></div>
+            <div class="max-w-20 w-100-p h-32 background-accent"></div>
+        </div>
+        <div>
+            ```html
+            <div class="matcha-card background-bg d-flex-column gap-8">
+                <div class="max-w-4 w-100-p h-32 background-accent">4px max-width</div>
+                <div class="max-w-8 w-100-p h-32 background-accent">8px max-width</div>
+                <div class="max-w-12 w-100-p h-32 background-accent">12px max-width</div>
+                <div class="max-w-16 w-100-p h-32 background-accent">16px max-width</div>
+                <div class="max-w-20 w-100-p h-32 background-accent">20px max-width</div>
+            </div>
+            ```
+        </div>
+    </div>
+
+#### Porcentagem
+
+Os tamanhos em porcentagem das classes são sempre múltiplos de **5**, sendo o
+mínimo 0 e o máximo **100**.
+
+        <div class="h-256 w-100-p overflow-y-scroll">
+        <table class="w-100-p">
+            <thead>
+                <tr>
+                    <th>Classe</th>
+                    <th>Propriedade</th>
+                </tr>
+            </thead>
+            <tbody>
+                {Array.from({ length: 21 }, (_, index) => {
+                const maxWidthValue = index * 5;
+                return (
+                    <tr key={`h-${maxWidthValue}-p`}>
+                        <td>max-w-{maxWidthValue}-p</td>
+                        <td>max-width: {maxWidthValue}%;</td>
+                    </tr>
+                );
+                })}
+            </tbody>
+        </table>
+    </div>
+
+    <div class="h-24"></div>
+
+    <p class="h5 mb-8 font-size-16 mt-4">Exemplos</p>
+
+    <div class="matcha-card background-surface d-flex-column gap-16">
+        <div class="matcha-card background-bg d-flex-column gap-8">
+            <div class="max-w-20-p w-100-p h-32 background-accent"></div>
+            <div class="max-w-30-p w-100-p h-32 background-accent"></div>
+            <div class="max-w-50-p w-100-p h-32 background-accent"></div>
+            <div class="max-w-75-p w-100-p h-32 background-accent"></div>
+            <div class="max-w-100-p w-100-p h-32 background-accent"></div>
+        </div>
+        <div>
+            ```html
+            <div class="matcha-card background-bg d-flex-column gap-8">
+                <div class="max-w-20-p w-100-p h-32 background-accent">20% max-width</div>
+                <div class="max-w-30-p w-100-p h-32 background-accent">30% max-width</div>
+                <div class="max-w-50-p w-100-p h-32 background-accent">50% max-width</div>
+                <div class="max-w-75-p w-100-p h-32 background-accent">75% max-width</div>
+                <div class="max-w-100-p w-100-p h-32 background-accent">100% max-width</div>
+            </div>
+            ```
+        </div>
+    </div>
+
+    <div class="h-24"></div>
+
+#### Breakpoints
+
+- xs: 600px
+- sm: 1024px
+- md: 1440px
+- lg: 1920px
+- xl: 2560px
+
+As classes de largura máxima (max-width) seguem a seguinte convenção:
+
+max-w-\{**breakpoint**\}-\{**valorEmPixels**\}
+
+max-w-\{**breakpoint**\}-\{**valorEmPorcentagem**\}-p
+
+Exemplos:
+
+**max-w-xs-8** é aplicado quando a largura mínima da tela atinge 600px, e a
+largura máxima do elemento é definida como 8px.
+
+**max-w-lg-75-p** é aplicado quando a largura mínima da tela atinge 1920px, e a
+largura máxima do elemento é definida como 75%.
+
+    <div class="h-16"></div>
+
+---
+
+    <p class="h5 mb-8 font-size-16">Classes em Pixels:</p>
+
+    <div class="h-256 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>
+                {Array.from({ length: 65 }, (_, index) => {
+                const maxWidthValue = index * 4;
+                return (
+                    <>
+                        <tr key={`max-w-${maxWidthValue}`}>
+                            <td>max-w-xs-{maxWidthValue}</td>
+                            <td>max-width: {maxWidthValue}px;</td>
+                            <td>@media only screen and (min-width: 600px)</td>
+                        </tr>
+                        <tr key={`max-w-${maxWidthValue}`}>
+                            <td>max-w-sm-{maxWidthValue}</td>
+                            <td>max-width: {maxWidthValue}px;</td>
+                            <td>@media only screen and (min-width: 1024px)</td>
+                        </tr>
+                        <tr key={`max-w-${maxWidthValue}`}>
+                            <td>max-w-md-{maxWidthValue}</td>
+                            <td>max-width: {maxWidthValue}px;</td>
+                            <td>@media only screen and (min-width: 1440px)</td>
+                        </tr>
+                        <tr key={`max-w-${maxWidthValue}`}>
+                            <td>max-w-lg-{maxWidthValue}</td>
+                            <td>max-width: {maxWidthValue}px;</td>
+                            <td>@media only screen and (min-width: 1920px)</td>
+                        </tr>
+                        <tr key={`max-w-${maxWidthValue}`}>
+                            <td>max-w-xl-{maxWidthValue}</td>
+                            <td>max-width: {maxWidthValue}px;</td>
+                            <td>@media only screen and (min-width: 2560px)</td>
+                        </tr>
+                    </>
+                );
+                })}
+            </tbody>
+        </table>
+    </div>
+
+    <div class="h-16"></div>
+    <p class="h5 mb-8 font-size-16 mt-16">Classes em Porcentagem:</p>
+
+    <div class="h-256 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>
+                {Array.from({ length: 21 }, (_, index) => {
+                const maxWidthValue = index * 5;
+                return (
+                    <>
+                        <tr key={`max-w-${maxWidthValue}`}>
+                            <td>max-w-xs-{maxWidthValue}-p</td>
+                            <td>max-width: {maxWidthValue}%;</td>
+                            <td>@media only screen and (min-width: 600px)</td>
+                        </tr>
+                        <tr key={`max-w-${maxWidthValue}`}>
+                            <td>max-w-sm-{maxWidthValue}-p</td>
+                            <td>max-width: {maxWidthValue}%;</td>
+                            <td>@media only screen and (min-width: 1024px)</td>
+                        </tr>
+                        <tr key={`max-w-${maxWidthValue}`}>
+                            <td>max-w-md-{maxWidthValue}-p</td>
+                            <td>max-width: {maxWidthValue}%;</td>
+                            <td>@media only screen and (min-width: 1440px)</td>
+                        </tr>
+                        <tr key={`max-w-${maxWidthValue}`}>
+                            <td>max-w-lg-{maxWidthValue}-p</td>
+                            <td>max-width: {maxWidthValue}%;</td>
+                            <td>@media only screen and (min-width: 1920px)</td>
+                        </tr>
+                        <tr key={`max-w-${maxWidthValue}`}>
+                            <td>max-w-xl-{maxWidthValue}-p</td>
+                            <td>max-width: {maxWidthValue}%;</td>
+                            <td>@media only screen and (min-width: 2560px)</td>
+                        </tr>
+                    </>
+                );
+                })}
+            </tbody>
+        </table>
+    </div>