# Design System

## Objetivo
A implementação do Design System tem como objetivo tornar mais rápida e fácil a estilização de uma nova loja.

O Design System traz uma padronização de estilos para que poucas alterações tragam grandes resultados.

## Aplicação

Para a implementação, a estrutura da plataforma foi dividida em **default**, que são elementos comuns a todas as lojas, e **custom**, que são específicos para o projeto em questão.

A estilização da loja é aplicada no modelo SASS. Atualmente os arquivos .scss estão subdivididos em default (shared) e custom (nome do projeto).

Ao começar a estilização de um projeto, procure pelo arquivo designSystem.scss. É neste arquivo que as principais alterações serão feitas.

A primeira parte define os padrões do projeto, como as cores, tamanhos de fonte, estilo da fonte, alturas e larguras, etc. Os elementos como cores são divididos em principais e auxiliares de forma a englobar o esquema de cores da identidade visual da loja.

A definição das variáveis principais será feita no início do projeto para que sirva de base para as outras variáveis que serão utilizadas na estilização em outros arquivos do projeto.

## Nomenclatura de variáveis
Elas devem seguir o padrão, com prefixo referente a propriedade modificada seguido de uma definição clara do elemento a que esta variável se refere.

**Exemplo:**
`$CF_HEADER_TOPO_OPCOES_NOME_USUARIO`
(cor de fonte de nome de usuário nas opções do header)

As variáveis serão utilizadas em todos os arquivos do projeto, por isso a importância da nomenclatura objetiva. Esta variável deve ser utilizada para o elemento destinado em todos os locais onde aparece.

O valor das variáveis globais são definidos por variáveis primárias, que são imutáveis, enquanto as globais são mais flexíveis para o projeto.

Continuando o exemplo:

`$CF_HEADER_TOPO_OPCOES_NOME_USUARIO: $ds-inst-primary;`

No início do documento, a variável `$ds-inst-primary` é definida como `inst-primary`, que é a cor `#25312A` segundo o design system.

Logo, o nome do usuário terá a cor `#25312A`.

A variável `$CF_HEADER_TOPO_OPCOES_NOME_USUARIO` será usada como valor da propriedade `color` no elemento de classe `.nome-usuario` (arquivo header.scss).

A mesma variável pode ser reutilizada para o nome do usuário no header do mobile, por exemplo, assim quando a cor do nome de usuário precisar ser alterada em algum outro momento basta dar um novo valor a variável e o elemento sofrerá a alteração em todas as partes que ele se encontra.

Agora utilizando o exemplo da classe `.nome-usuario`, veja as regras de css aplicadas a ela no arquivo específico do header em nosso projeto:

 .nome-usuario {
        display: inline-block;
        width: 100%;
        font-weight: 600;
        font-size: $FS_HEADER_TOPO_OPCOES_NOME_USUARIO;
        line-height: $LH_HEADER_TOPO_OPCOES_NOME_USUARIO;
        color: $CF_HEADER_TOPO_OPCOES_NOME_USUARIO;
        text-align: right;
        text-overflow: ellipsis;
        white-space: nowrap;
        border-right: 1px solid $BC_HEADER_TOPO_OPCOES_NOME_USUARIO;
        padding-right: 15px;
        padding-left: 5px;
}

As propriedades de `font-size`, `line-height`, `color` e `border color` já estão com as variáveis estabelecidas para o elemento. As propriedades de `padding-right` e `padding-left` ainda não possuem variáveis, mas seria interessante estabelecer as variáveis apropriadas em nosso design system. Já as propriedades `display, width, text-align, text-overflow` e `white-space` são definidas de forma independente para garantir a especificidade deste trecho.

Para criar variáveis para `padding right` e `left`, iremos ao nosso designSystem.scss então localizamos as variáveis referentes à opção do header topo.

Neste trecho, criaremos a variável `$PR_HEADER_TOPO_OPCOES_NOME_USUARIO` com o valor 15px para o `padding-right` e a variável `$PL_HEADER_TOPO_OPCOES_NOME_USUARIO` com valor 5px para o `padding-left`.

Com as devidas variáveis criadas, o mesmo trecho de código fica assim:

.nome-usuario {
        display: inline-block;
        width: 100%;
        font-weight: 600;
        font-size: $FS_HEADER_TOPO_OPCOES_NOME_USUARIO;
        line-height: $LH_HEADER_TOPO_OPCOES_NOME_USUARIO;
        color: $CF_HEADER_TOPO_OPCOES_NOME_USUARIO;
        text-align: right;
        text-overflow: ellipsis;
        white-space: nowrap;
        border-right: 1px solid $BC_HEADER_TOPO_OPCOES_NOME_USUARIO;
        padding-right: $PR_HEADER_TOPO_OPCOES_NOME_USUARIO;
        padding-left: $PL_HEADER_TOPO_OPCOES_NOME_USUARIO;
}

Caso alguma dessas regras precise ser modificada, basta modificar a variável global.

Este é um exemplo simples, no entanto, é possível perceber a praticidade quando é necessário alterar uma variável compartilhada por vários elementos.

# Componetização
Veja abaixo exemplos de componentes utilizados no projeto:
## Cores
Consulte designSystem.scss para saber a paleta de cores utilizadas no layout do projeto.

Para Mondelez, as principais cores são o roxo #4F2170, o laranja #E18719 e os tons auxiliares branco (#FFFFFF) e tons de cinza.
## Tipografia
Uso de h1, h2, h3 e h4, de acordo com necessidade.

**Parágrafo:** Para textos corridos utilizar Montserrat. Nunca utilizar a Times New Roman para textos corridos.

O tamanho pode ser definido de acordo com o layout aplicado.

# Inputs
Utilize as classes conforme informado acima de cada input.

Para utilizar o componente, é necessário inicializar o mesmo no incío do template, assim não é necessário se preocupar com classes;

<?php
    $input = Component::getComponent('Input');
?>

e então é chamado desta forma:

<? $input->render(
        array(
            'id' => 'Input1',
            'type' => 'text',
            'value' => 'Exemplo de texto 1',
            'mainClass' => 'form-control',
            'invalid' => false,
            'attributes' => array(
                'maxlenght' => 60,
                'placeholder' => 'Exemplo de placeholder',
                'readonly' => 'readonly'
            )
        )
    );
?>

os seguintes parâmetros são suportados:

array(
    'attributes' => array( // array com atributos tipo disabled, readonly, maxlength, etc
            'class' => 'class'
            'data-value' => '5'
            'disabled' => 'disabled',
            'maxlength' => 20,
            'placeholder' => 'Exemplo de placeholder',
            'id' => 'Input1', // id único para o input
            'name' => 'Input1' // name para o input
            'value' => 'Exemplo de texto 1', // texto exibido no input
            'type' => 'text',  // tipo de input
            ... => ... , qualquer outro atributo....
        )
)

### Normal
Exemplo de texto 1 (imagem)

### Inválido
Exemplo de texto 2 (imagem)

### Bloqueado
Exemplo de texto 3 (imagem)

### Readonly
Exemplo de texto 4 (imagem)

### Botão lateral
Exemplo de texto 5 (imagem)

### Input Checkbox
Checkbox para ser utilizado em qualquer lugar

Para utilizar o componente, é necessário inicializar o mesmo no incío do template, assim não é necessário se preocupar com classes;

<?php
    $input = Component::getComponent('Input');
?>

<?php
    $input->RenderCheckbox(
        array(

            'label' => 'Rótulo'                   // NÃO OBRIGATÓRIO
            'attributes' => array(                // Atributos do input
                'id' => 'politica-trocas',        // NÃO OBRIGATÓRIO
                'checked' => 'checked',           // NÃO OBRIGATÓRIO
                'disabled' => 'disabled',         // NÃO OBRIGATÓRIO
                ... // qualquer outro atributo
            ),
            'attributesLink' => array (            // NÃO OBRIGATÓRIO  - quando necessário link na label do checkbox
                'id' => 'linkTrocasCancelamentos', // NÃO OBRIGATÓRIO
                'class' => 'link link--no-style',  // NÃO OBRIGATÓRIO
                'href' => '#',                     // NÃO OBRIGATÓRIO
            ),
            'attributesLabel' => array (           // Atributos para label
                'class' => 'ckt__checkbox-termo',  // NÃO OBRIGATÓRIO
                'for' => 'politica-trocas',        // NÃO OBRIGATÓRIO
            ),
        )
    );
?>

Normal e hover
Selecionado
Bloqueado e Selecionado
Bloqueado
(imagem com os tipos de select)

# Buttons
Utilize as classes conforme informado acima de cada botão;
Todos utilizam como base a classe .btn + as classes de customização. Desta forma, pode ser aplicado a qualquer elemento.

Para utilizar o componente, é necessário inicializar o mesmo no incío do template, assim não é necessário se preocupar com classes;

<?php
    $button = Component::getComponent('Button');
?>

e então é chamado desta forma:

`<? $button->render(array('label'=> 'button small','sizeDefault' => false,'disabled' => false));?>`

os seguintes parâmetros são suportados:

array(
    'attributes' => array(
            'id' => 'btn01', // id único para o botão
            'label' => 'button small', // texto exibido no botão,
            'class' => 'class',
            ... => ... // qualquer outro atributo
            ),
    'fawesome' => array( // quando o botao deve mostrar um icone de font awesome
        'pos' => 'L', // Left ou Right
        'icone' => 'fa fa-search' // a classe de fawesome
        )
)

(imagens de todos esses tipos de botões)
.btn .btn-primary
.btn .btn-secondary
.btn .btn-small .btn-primary
.btn .btn-small .btn-secondary
.btn .btn-small .btn-primary com icone alinhado a direita
.btn .btn-small .btn-secondary com icone alinhado a esquerda
.btn .btn-primary com icone a direita
.btn .btn-secondary com icone a esquerda

# Barra de pesquisa
A busca principal depende dos componentes de input e button.

Para utilizar o componente, é necessário chamá-lo no incío do template;

<?php
    $search = Component::getComponent('Search');
?>

Então é chamado da seguinte forma:

<?php
    $search->render(
        array(
            'action' => '/busca', // URL de destino. Vai para /Busca/Resultado por padrão
            'method' => 'post', // Método usado. Usa GET por padrão
            'class' => 'form-main-search', // classe do formulário
            'placeholder' => 'O que você procura?', // Padrão: Buscar
            'suggestions' => array(
                'title' => 'Produtos sugeridos', // Título apresentado nas sugestões
            ),
        )
    );
?>

O que você procura?(imagem da barra de busca)

# Imagens
Para utilizar o componente, é necessário inicializar o mesmo no incío do template.

<?php
    $image = Component::getComponent('Image');
?>

e então é chamado desta forma:

<? $image->render(array('src' => 'path','alt' => 'alt text', 'title' => 'title text'));?>
//os seguintes parâmetros são suportados:
array(
    'otherClass' => 'pera uva', // demais classes que se fazem necessário. Utilize sempre separada por espaço em branco.
    'attributes' => array (
        'id' => 'btn01', // id único para o botão.
        'src' => 'path', // caminho para imagem.
        'alt' => 'image teste', // alt para imagem.
        'title' => 'image teste', // title para imagem.
        'data-fornecedor' => 1,  //
        'data-value' => '2.50'   //
        ... => ... // qualquer outro atributo
    ),
)

image teste
image teste
(imagens teste)

# Carousel

<?php
    $carousel->RenderCarousel(
        array(
            'otherClass' => 'banner',
            'items' => $data->items,
            'render' => array (
                'component' => $image,
                'method' => 'RenderBanner',
                'params' => array(),
            ),
            'loop' => 'true',
            'nav'  => 'false',
            'dots' => 'true',
            'qtyItems' => '1',
        )
    );?>

### Picking
(imagem picking)

### Picking Carousel
(imagem picking carrossel)

# Seleção de Quantidade
Para utilizar o componente, é necessário inicializar o mesmo no incío do template/componente.

<?php
    $input = Component::getComponent('Input');
?>

e então é chamado desta forma:

`<? $input->RenderSelectQuantity(array('id' => 'xpto','name' => 'xpto'));?>`

os seguintes parâmetros são suportados:

array(
    'disabled' => true // desabilita os seletores
    'id' => 'inputXpto', // id único para o input.
    'name' => 'nameInput', // name único para o input
    'otherClass' => 'pera uva', // demais classes que se fazem necessário. Utilize sempre separada por espaço em branco.
    'dataAttribute' => array( //quando necessário criar atributos data para capturar com js. Sempre utilizando chave X valor.
        'fornecedor' => 1,  // ficará assim: data-fornecedor = '1'
        'value' => '2.50'   // ficará assim: data-value = '2.50'
    ),
                

(imagem do seletor de quantidades)

# Cards
Card de produto para vitrine ou onde for necessário

Para utilizar o componente, é necessário chamá-lo no incío do template;

<?php
    $card = Component::getComponent('Card');
?>

Então é chamado da seguinte forma:

<?php
    $card->render(
        array(
            'item' => $produto, // OBRIGRATÓRIO  | objeto com o produto completo, contendo todas as suas propriedades.
            'direction' => '' // NÃO OBIRGATÓRIO | pode informar 'row' para altera a disposição e ele ocupar a linha inteira.
            'blockCard' => 'true' // NÃO OBIRGATÓRIO | true ou false, ele irá gerar uma div que bloqueia o card inteiro. Default false quando não informado.
        )
    );
?>

(imagens)
Sem estoque/indisponível
BORRACHA PARA GRAFITES C/ CINTA PLASTICA
BORRACHA PARA GRAFITES C/ CINTA PLASTICA

(imagens)
Desconto
10%OFF
PROMO
BORRACHA PARA GRAFITES C/ CINTA PLASTICA
BORRACHA PARA GRAFITES C/ CINTA PLASTICA

(imagens)
Selos
LíderIndicado-verdeBORRACHA PARA GRAFITES C/ CINTA PLASTICA
BORRACHA PARA GRAFITES C/ CINTA PLASTICA

Além de poder receber a direção via parametro, é possivel utilizar também a classe '.card-row' no início do compomente. Terá o mesmo efeito.

(imagens)
Sem estoque/indisponível
BORRACHA PARA GRAFITES C/ CINTA PLASTICA
BORRACHA PARA GRAFITES C/ CINTA PLASTICA

(imagens)
Desconto
10%OFF
PROMO
BORRACHA PARA GRAFITES C/ CINTA PLASTICA
BORRACHA PARA GRAFITES C/ CINTA PLASTICA

(imagens)
Selos
LíderIndicado-verdeBORRACHA PARA GRAFITES C/ CINTA PLASTICA
BORRACHA PARA GRAFITES C/ CINTA PLASTICA

# Showcase(Vitrine)
Monta a vitrine

Para utilizar o componente, é necessário chamá-lo no incío do template;

`$showcase = Component::getComponent('Showcase');`

Chama assim:

$showcase->Render(
    array(
        'item' => $vitrine, // OBRIGADTÓRIO | item da vitrine
        'otherClass' => 'xuxa', // NÃO OBRIGATÓRIO
        'img'=> array(
            'position'=>'l', //NÃO OBRIGATÓRIO | posição da imagem para banner, l = esquerda, r = direita;
        ),
    )
);

(imagens)
Material escolar
LIDER
BORRACHA PARA GRAFITES C/ CINTA PLASTICA
BORRACHA PARA GRAFITES C/ CINTA PLASTICA

10% OFF
BORRACHA PARA GRAFITES C/ CINTA PLASTICA
BORRACHA PARA GRAFITES C/ CINTA PLASTICA

BORRACHA PARA GRAFITES C/ CINTA PLASTICA
BORRACHA PARA GRAFITES C/ CINTA PLASTICA

BORRACHA PARA GRAFITES C/ CINTA PLASTICA
BORRACHA PARA GRAFITES C/ CINTA PLASTICA