Ame Mini-App Components Web - Gamma

Tokens

Bordas

Alguns componentes experimentam o uso de bordas. Você poderá alterar propriedades básicas de borda como espessura ou cor.

borderWidth

Os valores abaixo indicam espessuras de borda, começando da mais fina para a mais grossa:

| token | valor | |----------|-------| | none | 0px | | hairline | 1px | | thin | 2px | | thick | 4px | | heavy | 8px |

borderRadius

Abaixo os valores aceitos para arredondamento das bordas

| token | valor | |----------|-------| | none | 0px | | micro | 4px | | small | 8px | | medium | 16px | | pill | 500px | | circular | 50% |

borderColor

Veja aqui quais os tokens de corque você pode utilizar no borderColor

Cores

Os padrões de design estabelem que apenas as cores abaixo podem ser utilizadas. As cores são inseridas através dos tokens em componentes que possuem tais propriedades como: borderColor, color, backgroundColor e etc.

Primary

Secondary

Neutral

Feedback

Extras

Espaçamento

Em determinados momentos você precisará de uso de margem, para isso você poderá usar as propriedades descritas abaixo em componentes que aceitam todas ou algumas dessas propriedades.

Valores para propriedades de Margin e Padding

| token | valores | |---------------|---------| | 'nopne' | 0px | | 'quark' | 4px | | 'nano' | 8px | | 'extra-small' | 16px | | 'small' | 24px | | 'medium' | 32px | | 'large' | 40px | | 'extra-large' | 48px | | 'big' | 56px | | 'display' | 64px | | 'huge' | 80px | | 'giant' | 120px | | 'jumbo' | 160px | | 'immense' | 200px |

Flex

As propriedades abaixo afetam como os nós internos de um componente são ajustados ao seu conteúdo. São muito parecidas com as propriedades flex do CSS. Veja abaixo quais são:

Propriedades e Valores

| Propriedade | Valores Aceitos | | ----------- | ------------------------------------------------ | | direction | 'row', 'row-reverse', 'column', 'column-reverse' | | align | 'center', 'start', 'end' | | justify | 'center', 'start', 'end', 'between', 'around' | | flexWrap | 'wrap', 'nowrap', 'reverse' | | flexNone | boolean |

Tipografia

Propriedades e Valores

| Propriedade | Valores Aceitos | |-------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | fontSize | 'quark' (12px), 'nano' (14px), 'extra-small' (16px), 'small' (20px), 'medium'(24px), 'large' (32px), 'extra-large' (40px), 'big' (48px), 'display'(56px), 'huge' (64px), 'giant' (72px), 'jumbo'(80px) | | textAlign | 'left', 'center', 'right', 'justify' | | lineHeight | 'small' (100%), 'medium' (150%), 'large' (200%) | | fontWeight | 'light' (300), 'regular' (400), 'medium' (500), 'bold' (700) |

Target

| token | valores | |-----------------------|--------------------------------------------------------| | 'heading-display' | font-size: '56px'; line-height: 200%; font-weight: 700 | | 'heading-extra-large' | font-size: '48px'; line-height: 200%; font-weight: 700 | | 'heading-large' | font-size: '40px'; line-height: 200%; font-weight: 700 | | 'heading-medium' | font-size: '32px'; line-height: 200%; font-weight: 700 | | 'heading-small' | font-size: '24px'; line-height: 200%; font-weight: 700 | | 'title-large' | font-size: '32px'; line-height: 150%; font-weight: 700 | | 'title-medium' | font-size: '24px'; line-height: 150%; font-weight: 700 | | 'title-small' | font-size: '20px'; line-height: 150%; font-weight: 700 | | 'subtitle-large' | font-size: '24px'; line-height: 150%; font-weight: 700 | | 'subtitle-medium' | font-size: '20px'; line-height: 150%; font-weight: 700 | | 'subtitle-small' | font-size: '16px'; line-height: 150%; font-weight: 700 | | 'body-regular' | font-size: '16px'; line-height: 150%; font-weight: 400 | | 'body-medium' | font-size: '16px'; line-height: 150%; font-weight: 500 | | 'body-bold' | font-size: '16px'; line-height: 150%; font-weight: 700 | | 'caption-regular' | font-size: '14px'; line-height: 100%; font-weight: 400 | | 'caption-bold' | font-size: '14px'; line-height: 100%; font-weight: 700 | | 'disclaimer-regular' | font-size: '12px'; line-height: 100%; font-weight: 400 | | 'disclaimer-bold' | font-size: '12px'; line-height: 100%; font-weight: 700 |

Opacidade

Em determinados momentos você pode sentir a necessidade de tornar um elemento um pouco translúcido.

Para isto você deve verificar se o componente presente aceita a propriedade opacity.

opacity

| token | valores | |--------------------|---------| | 'trnasparent' | 0 | | 'semi-transparent' | 0.16 | | 'light' | 0.32 | | 'medium' | 0.4 | | 'intense' | 0.64 | | 'semiopaque' | 0.8 |

Sombras

Tokens e valores

| token | valores | |-----------|---------------------------------| | 'level-1' | 0 4px 8px rgb(28 28 28 / 8%) | | 'level-2' | 0 8px 24px rgb(28 28 28 / 16%) | | 'level-3' | 0 16px 32px rgb(28 28 28 / 16%) | | 'level-4' | 0 16px 48px rgb(28 28 28 / 24%) |

Text

Modifique esse componente em tempo real pelo Storybook clique aqui

Veja um exemplo desse componente aqui

Componente de texto que recebe diversas propriedades

Importante: Este componente ainda não está de acordo com o padrão atual de design system Ame de 2022 e pode estar sujeito à mudanças visuais, de quebra de compatibilidade.

Exemplo

Utilização

<View>
  <Text>
    Componente Text
  </Text>
</View>

Propriedades

| Propriedade | Descrição | Type | Default | | ----------- | --------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------- | | fontSize | Define o tamanho da font. Veja os valores | string | xxs | | fontWeight | Define o peso da font. Veja os valores | string | regular | | lineHeight | Define a altura da linha font. Veja os valores | string | medium | | textAlign | Define o alimanhento do texto. Veja os valores | string | left | | selectable | Define se o texto será selecionavel. | boolean | false | | truncate | Define uma quantidade de linhas para mostrar o texto. Ao fim dessas linhas, caso tenha mais textos, será acresentado '...'. | number | null | | color | Define a cor do texto. Veja os valores | string | neutracolor-brand-darkest | | target | Define um estilo para o texto pré determinado. Veja os valores | string | null |

Touchable

Modifique esse componente em tempo real pelo Storybook clique aqui

Veja um exemplo desse componente aqui

Envolva um componente com Touchable para que ele passe a ter interação.

Exemplo

Utilização

<Touchable onClick={() => {console.log('Clicado!')}}>
  <Text>Agora sou clicável</Text>
</Touchable>

Propriedades

| Propriedade | Descrição | Type | Default | | --------------- | ------------------------------------------------------------- | -------- | ------- | | onPress | Função que será chamada ao tocar no componente. | function | null | | disabledOnPress | Função que será chamada caso o Touchable esteja desabilitado. | function | null | | disabled | Desabilita o componente | boolean | false | | width | Define a largura do componente | string | null | | height | Define a altura do componente | string | null |

View

Modifique esse componente em tempo real pelo Storybook clique aqui

Veja um exemplo desse componente aqui

Talvez um dos componentes mais úteis para construir telas e recebe diversas propriedades para te ajudar nessa tarefa.

Exemplo

Utilização

<View>
  <Text>
    Este paragráfo está dentro da view
  </Text>
</View>

Propriedades

| Propriedade | Descrição | Type | Default | |-------------------------|----------------------------------------------------------------------------------------------------------------|---------|---------| | background | Adiciona uma cor de fundo. Veja os valores | string | null | | border | Adiciona uma borda na View. Veja os valores | string | null | | borderRadius | Define o arredondamento da borda. Veja os valores | string | null | | borderRadiusLeftTop | Define o arredondamento da borda no canto esquerdo superior. Veja os valores | string | null | | borderRadiusRightTop | Define o arredondamento da borda no canto direito superior. Veja os valores | string | null | | borderRadiusLeftBottom | Define o arredondamento da borda no canto esquerdo inferior. Veja os valores | string | null | | borderRadiusRightBottom | Define o arredondamento da borda no canto direito inferior. Veja os valores | string | null | | borderColor | Define qual será a cor da borda. Veja os valores | string | null | | direction | Define qual será a direção do display flex. Veja os valores | string | null | | align | Define qual será o alinhamento vertical do display flex. Veja os valores | string | null | | justify | Define qual sera o alinhamento horizontal do display flex. Veja os valores | string | null | | paddingLeft | Define o padding no lado esquerdo. Veja os valores | string | xxxs | | paddingRight | Define o padding no lado direito. Veja os valores | string | xxxs | | paddingTop | Define o padding em cima. Veja os valores | string | xxxs | | paddingBottom | Define o padding em baixo. Veja os valores | string | xxxs | | paddingX | Define o padding no eixo X. Veja os valores | string | null | | paddingY | Define o padding no eixo Y. Veja os valores | string | null | | margin | Define a margem no eixo X e Y. Veja os valores | string | null | | marginLeft | Define a margem no lado esquerdo. Veja os valores | string | null | | marginRight | Define a margem no lado direito. Veja os valores | string | null | | marginTop | Define a margem em cima. Veja os valores | string | null | | marginBottom | Define a margem em baixo. Veja os valores | string | null | | marginY | Define a margem no eixo Y. Veja os valores | string | null | | marginX | Define a margem no eixo X. Veja os valores | string | null | | width | Define qual será a largura da View em % ou px | string | 100% | | height | Define qual será a altura da View em % ou px | string | auto | | display | Define qual será o display. Veja os valores | string | block | | flexWrap | Define se os itens são forçados em uma linha ou podem ser agrupados em várias linhas. Veja os valores | string | null | | flexNone | Passando essa propriedade a View respeitará o tamanho de width independente do flex | boolean | false | | opacity | Define a opacidade da View. Veja os valores | string | null | | shadow | Aplica niveis de sombra na View. Veja os valores | string | null |

Window

Modifique esse componente em tempo real pelo Storybook clique aqui

Veja um exemplo desse componente aqui

É um componente mestre que precisa envolver toda tela. Seu uso é obrigatório e ele deverá ser o primeiro nó de todas as telas. Nunca utilize Window dentro de outro Window.

Você deve usar o componente Window como no exemplo abaixo.

Utilização

<Window>
    Todas as outras tags devem ficar aqui dentro
</Window>