diff --git a/.github/resources/BF/logo_latch.png b/.github/resources/BF/logo_latch.png new file mode 100644 index 00000000000..bda3623ee5d Binary files /dev/null and b/.github/resources/BF/logo_latch.png differ diff --git a/CHANGELOG.md b/CHANGELOG.md index 26c65b38916..41a21cd3a63 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,13 @@ # Figma Changelog +[12.3.1](changelog-versions/12.3.1.md) + +[12.3.0](changelog-versions/12.3.0.md) + +[12.2.0](changelog-versions/12.2.0.md) + +[12.0.1](changelog-versions/12.0.1.md) + ## [12.0.0](changelog-versions/12.0.0.md) [11.4.0](changelog-versions/11.4.0.md) diff --git a/changelog-versions/12.0.1.md b/changelog-versions/12.0.1.md new file mode 100644 index 00000000000..63c4cb21a92 --- /dev/null +++ b/changelog-versions/12.0.1.md @@ -0,0 +1,11 @@ +## 🔄 Changed + +- Use hardcode color in ios inactive switch [#1620](https://github.com/Telefonica/mistica-design/issues/1620) + +## 🐞 Bugs fixed + +- Color token change not working in a few icons [#1604](https://github.com/Telefonica/mistica-design/issues/1604) + +## 📒 Documentation changes + +- Document the last divider in Lists & Accordions [#1614](https://github.com/Telefonica/mistica-design/issues/1614) diff --git a/changelog-versions/12.2.0.md b/changelog-versions/12.2.0.md new file mode 100644 index 00000000000..8a50b26f16c --- /dev/null +++ b/changelog-versions/12.2.0.md @@ -0,0 +1,34 @@ +## ✨ New! + +- Slider component [#977](https://github.com/Telefonica/mistica-design/issues/977) + +## ➕ Added + +- → Template Kits: Backoffice tools [#670](https://github.com/Telefonica/mistica-design/issues/670) + +## 🔄 Changed + +- ControlInverse y ControlActivated son iguales [#1637](https://github.com/Telefonica/mistica-design/issues/1637) +- Global definition for hyphens [#1622](https://github.com/Telefonica/mistica-design/issues/1622) +- Update tooltip size in mobile [#1573](https://github.com/Telefonica/mistica-design/issues/1573) + +## 🐞 Bugs fixed + +- Button secondary background [#1552](https://github.com/Telefonica/mistica-design/issues/1552) +- Stacking group resources bugged [#1619](https://github.com/Telefonica/mistica-design/issues/1619) + +## O2 + +- Cloud icon in O2 [#1634](https://github.com/Telefonica/mistica-design/issues/1634) + +## ⚙️ Icon changes + +- Cloud icon in O2 [#1634](https://github.com/Telefonica/mistica-design/issues/1634) + +## 📒 Documentation changes + +- Custom carousels controls documentation [#1632](https://github.com/Telefonica/mistica-design/issues/1632) +- Guide to tokens contribution for external design teams [#1348](https://github.com/Telefonica/mistica-design/issues/1348) +- Text wrapping in documentation [#1643](https://github.com/Telefonica/mistica-design/issues/1643) +- Update popover specs [#1569](https://github.com/Telefonica/mistica-design/issues/1569) +- Update tooltip specs [#1570](https://github.com/Telefonica/mistica-design/issues/1570) diff --git a/changelog-versions/12.3.0.md b/changelog-versions/12.3.0.md new file mode 100644 index 00000000000..4781005534e --- /dev/null +++ b/changelog-versions/12.3.0.md @@ -0,0 +1,35 @@ +## ✨ New! + +- Tu Brand [#1592](https://github.com/Telefonica/mistica-design/issues/1592) + +## ➕ Added + +- Add subtitle in Poster Card [#1635](https://github.com/Telefonica/mistica-design/issues/1635) +- Tag Evolution (Add a Badge) [#1625](https://github.com/Telefonica/mistica-design/issues/1625) +- Add double interaction with right slot in rows [#1553](https://github.com/Telefonica/mistica-design/issues/1553) + +## 🔄 Changed + +- Badge without Border [#1642](https://github.com/Telefonica/mistica-design/issues/1642) +- Fix icon chevron in buttonLink to text baseline [#1631](https://github.com/Telefonica/mistica-design/issues/1631) +- Icon Button evolution [#1601](https://github.com/Telefonica/mistica-design/issues/1601) + +## 🐞 Bugs fixed + +- Border Radius Button Group [#1589](https://github.com/Telefonica/mistica-design/issues/1589) +- Poster Card Description bug [#1654](https://github.com/Telefonica/mistica-design/issues/1654) +- Switching to android nav & status bars in feedbacks seems broken [#1638](https://github.com/Telefonica/mistica-design/issues/1638) + +## Vivo + +- Missing weight in Video-serveillance-regular icon [#1665](https://github.com/Telefonica/mistica-design/issues/1665) +- Random icon [#1666](https://github.com/Telefonica/mistica-design/issues/1666) +- signal-amplifier icon [#1667](https://github.com/Telefonica/mistica-design/issues/1667) +- Telephone icon [#1668](https://github.com/Telefonica/mistica-design/issues/1668) + +## ⚙️ Icon changes + +- Missing weight in Video-serveillance-regular icon [#1665](https://github.com/Telefonica/mistica-design/issues/1665) +- Random icon [#1666](https://github.com/Telefonica/mistica-design/issues/1666) +- signal-amplifier icon [#1667](https://github.com/Telefonica/mistica-design/issues/1667) +- Telephone icon [#1668](https://github.com/Telefonica/mistica-design/issues/1668) diff --git a/changelog-versions/12.3.1.md b/changelog-versions/12.3.1.md new file mode 100644 index 00000000000..ca75e433894 --- /dev/null +++ b/changelog-versions/12.3.1.md @@ -0,0 +1,3 @@ +## 🐞 Bugs fixed + +- Detail boolean in mobile lists [#1678](https://github.com/Telefonica/mistica-design/issues/1678) diff --git a/guides/colors-contribution.md b/guides/colors-contribution.md new file mode 100644 index 00000000000..3903907b42d --- /dev/null +++ b/guides/colors-contribution.md @@ -0,0 +1,238 @@ +# Making Changes in Tokens + +At Mística, we want any Telefónica designer to be able to contribute to the System. While it's true that being a multi-brand system used by different brands, there are some changes in the system that are somewhat delicate. However, there are other changes that do not have a global impact on other teams. We believe that there are parts of the system that can be directly controlled by the design teams of the different brands working on the product. + +That's why we created this guide to facilitate designers from different brands in making changes related to their brand. + +Currently, here is the list of changes that we believe an external design team can make efficiently: + +- [Palette](#palette) +- [Constants](#constants) +- [Border Radius](#border-radius) + +# Steps to Contribute to mistica-design + +## Install a Text Editor + +We recommend installing VSCode, but you are free to use any editor you prefer. + +[Download VSCode](https://code.visualstudio.com/download) + +💡 We have a configuration to avoid errors when changing tokens in VSCode. You can learn how to set it up [here](vsco-configuration.md). + +## Install GitHub Desktop + +GitHub Desktop is the app to work directly with the repository, and it's the easiest and most visual way to understand GitHub. + +[Download GitHub Desktop](https://desktop.github.com/) + +Follow this guide to learn how to clone a repository using GitHub Desktop: + +[Cloning a repository from GitHub to GitHub Desktop](https://docs.github.com/en/desktop/contributing-and-collaborating-using-github-desktop/adding-and-cloning-repositories/cloning-a-repository-from-github-to-github-desktop) + +Once you have cloned the repository, you should see the `Tokens` folder in your computer's Finder, containing all the token files. + +## Open the Repository in VS Code + +Once cloned, if the repository is not automatically selected in this GitHub Desktop selector, expand the menu to choose it. + +Screenshot 2023-07-06 at 17 39 09 + +From GitHub Desktop, after selecting the freshly cloned repository, open it in the editor you have configured by default: + +Screenshot 2023-07-06 at 17 33 44 + +If Visual Studio Code is not your default editor, you can change it from "preferences" in the same place. + +## Create a New Branch to Make Changes + +Before making modifications to the JSON files, it's a good practice to create a new branch in the repository. This will allow you to work in isolation and maintain a clear history of your changes. + +> [!NOTE] +> +> Before creating a new branch there are some considerations of the repo organization. The main branch is pre-production but normally the changes required, unless they have other dependencies or they need to be delayed to a specific release, can go into the production branch. + + +Follow these steps to create a new branch: + +1. In VS Code, click on the version control icon in the bottom left corner. Usually, this icon has the git symbol: + +Screenshot 2023-07-06 at 17 42 58 + +2. In the top of the version control window, you will find a text box indicating the current branch. Click on that text box and select "Create new branch" from the dropdown menu. + +> [!IMPORTANT] +> +> If you need to create a branch from production choose the option "Create branch from" and select the production branch. + + +Screenshot 2023-07-06 at 17 42 23 + +If you need to change the production branch + +3. Enter a descriptive name for your new branch and press Enter to create it. + +4. Make sure the new branch is selected as the active branch before proceeding with the modifications to the JSON files. + +## Modifying el JSON + +The JSON files for different brands are located in the tokens directory. + +Screenshot 2023-07-06 at 17 44 33 + +The JSON file for a brand has the following structure: + +``` +{ +"light": { ... }, +"dark": { ... }, +"radius": { ... }, +"text": { ... }, +"global": { + "palette": {...} +} +``` + +### Palette + +The palette is located within the `global` / `palette` category and is composed of different tokens that are later used as values by the constants. Within the palette, the following modifications can be made: + +> [!WARNING] +> +> **Changes that entail a breaking change** +> +> Although these changes are possible, modifying or removing a token from the palette may cause a breaking change in any product that directly consumes these tokens. +> +> - Name modification +> - Deletion of an existing token +> +> If you need to make a modification of either of the above types, carefully consider the impact it will have. + +#### Modify value of an existing token + +The `value` field of a token in the palette can be modified. + +- It must always be enclosed in double quotes ("..."). +- The valid format is [hexadecimal](https://developer.mozilla.org/en-US/docs/Web/CSS/hex-color). + +![palette_change](https://github.com/Telefonica/mistica-design/assets/44420072/89cdcab8-5e22-4113-aabd-7283b1c75ace) + +#### Create a new token + +A new token can be added to the palette to be used later in a constant. + +It must follow the following format: + +``` +"name": { + "value": "the desired value", + "type": "color" +} +``` + +![tokens_new_palette](https://github.com/Telefonica/mistica-design/assets/44420072/3fadf1c9-f1f7-49e4-9c13-c9e9563b33c6) + +### Constants + +The constants are located within the `light` and `dark` categories of the JSON. In the value of a constant, a hexadecimal value is never used directly; instead, it references a pre-existing value from the palette as follows: + +``` + "value": "{palette.white}" +``` + +It's also possible to apply opacity modifications to the values: + +``` + "value": "rgba({palette.white}, 0.5)" +``` + +Where 0.5 is the alpha channel and can have a value between 0 and 1. + +Constants allow the following modifications: + +> [!WARNING] +> +> **Changes that cannot be made:** +> +> - Name modification +> - Deletion of an existing token +> +> To add a constant to a skin, it's recommended to open a discussion to evaluate the need. + +#### Modify its value + +The value of a constant can be modified. It's important to note that if you want the constant to change in both light and dark, you should change the value in the constant with the same name in both categories. + +![tokens_modify_constant](https://github.com/Telefonica/mistica-design/assets/44420072/a0d8f6c8-a25d-41c9-b8dd-13c92773f57f) + +> [!NOTE] +> +> When modifying a `value`, the `description` field must also be updated with the same value. For example, if the change is from "movistarBlue" to "movistarBlue55," the value should be: "{palette.movistarBlue55}" and the description: "movistarBlue55". + +### Border radius + +The border-radius tokens are located within the `radius` category. In this category, the following modifications can be made: + +> [!WARNING] +> +> **Changes that cannot be made:** +> +> - Name modification +> - Deletion of an existing token +> +> To add a border-radius to a skin, it's recommended to open a discussion to evaluate the need. + +#### Modify its value + +The `value` field of a border-radius token can be modified: + +![tokens_modify_radius](https://github.com/Telefonica/mistica-design/assets/44420072/cb1c7f44-3c09-4fdc-961f-5a3a5e170397) + +## Save Changes and Publish Your Branch + +Once you have made the necessary modifications to the JSON files, you need to save your changes and publish the branch to the remote repository. + +### Visual Studio Code + +1. Go to the third element in the navigation bar (Source Control), where you will see the following: + +Screenshot 2023-07-06 at 17 47 26 + +Here, you will find a list of the changes that have been made. Make sure that the listed changes are correct. + +2. Enter a description of the changes to be made in the text field. +3. Click on the button to commit the changes. This commit will save the changes locally on your computer. +4. Once the changes have been saved, the button will change, showing the option to publish the branch. Click on the button. + +Screenshot 2023-07-06 at 17 51 19 + +### Github Desktop + +1. Open GitHub Desktop and select the repository you are working on. + +![Screenshot 2023-07-20 at 15 04 14](https://github.com/Telefonica/mistica-design/assets/44420072/a6003cb0-9760-4d0c-b452-85ae4ec0b317) + +2. In the top menu, click on "Changes" to view the changes you have made to the files. Here, you will find a list of the changes that have been made. Make sure that the listed changes are correct. +3. Enter a description of the changes you made in the "Summary" text field at the bottom of the screen. +4. Click on the "Commit to {the name of your branch}" button. This will create a commit and save the changes locally on your computer. +5. Once the changes have been committed, click on the "Push origin" button. This will push the changes to the remote repository and publish the branch. + +## Create a Pull Request to the mistica-design Repository + +When the branch has been published, you can create a pull request to merge the changes from that branch into the master branch. + +1. In GitHub Desktop, with the branch selected in the second dropdown of the top bar, you will see the option to create a Pull Request. + +Screenshot 2023-07-07 at 10 22 38 + +2. Clicking on the "Create Pull Request" button will open a new browser window displaying the necessary fields to complete. +3. Make sure the base branch is set to `production`, and the branch you are comparing is the one you just created. + +Screenshot 2023-07-07 at 10 26 02 + +> [!NOTE] +> +> There may be cases where the base branch is not pre-production but production. This typically happens when there are changes that need to be made quickly to fix something in one of the implementations (native / web). Before creating a PR to production, consult with design-core. + +4. When everything is correct, write a descriptive title for the Pull Request, and in the field on the right, assign a reviewer from the design-core team. +5. After creating the title and assigning a reviewer, you can proceed to create the pull request using the button at the bottom. diff --git a/guides/glossary.md b/guides/glossary.md new file mode 100644 index 00000000000..dc175caab76 --- /dev/null +++ b/guides/glossary.md @@ -0,0 +1,21 @@ +# Mística Glossary + +## Github words + +**Branch**: It is a copy from Master or other branch. You can work new things in this copy and when you finish, you can merge in Master. + +**Merge**: The union of one branch and another. + +**Master**: Main branch in the repository. In our case, production branch. + +**Repository**: The place where all the files are located. + +**Commit**: It is a confirmation to save and upload all your changes in a branch. + +**Fetch**: Just a refresh action to know if there are something new in the repository. (new commits, new branches, etc.) + +**Pull**: Download new updates to your files. + +**Push**: Upload your work to the branch. When you make push, all of the people on the repository will get a Pull. + +--- diff --git a/guides/mistica-web-for-designers.md b/guides/mistica-web-for-designers.md new file mode 100644 index 00000000000..62cdceb0d1b --- /dev/null +++ b/guides/mistica-web-for-designers.md @@ -0,0 +1,106 @@ +# Contribute to mistica web for designers + +Desde Mística creemos que los diseñadores deberíamos de ayudar a los equipos de desarrollo en aquellos detalles donde ellos no aporten valor, pequeños cambios visuales que podamos ayudar a los equipos siempre serán bienvenidos. + +❗️ Los cambios en el repo deben de estar respaldados por las specs de los componentes y hablado con el equipo de Mística Design + +Esto es un guía con todo detalle de lo que debe hacer un diseñador con conocimiento básico en la parte dev para contribuir en Mística. + +## Instalar editor de texto + +Te recomendamos que instales VSCode, pero eres libre de usar el que más te guste. +[⬇️Descarga VSCode](https://code.visualstudio.com/download) + +## Instalar + +[⬇️Descarga nodejs](https://nodejs.org/en/download/) + +## Instalar yarn + +1. Abre el Terminal desde `Applications → Utilities → Terminal` o desde spotlight `⌘ + espacio`, escribe terminal y dale a intro. +2. Copia y pega esto en el terminal → + +```zsh +npm install --global yarn +``` + +❗️ Al instalar elementos de manera global en el equipo, algunas veces salta un problema de permisos en el que verás que en el error te indica `EACES`; para resolver este tipo de problemas debes incluir `sudo` delante. Al hacer esto se te requerirá una contraseña, es la contraseña de tu usuario en el equipo. + +Ejemplo: + +```zsh +sudo npm install --global yarn +``` + +## Instalar Git + +Para poder instalar git primero tienes que contar con homebew en tu equipo: + +1.En el terminal pega → + +```zsh +/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" +``` + +2.Una vez instalado pega → + +```zsh +brew install git +``` + +## Instalar GitHub Desktop + +Si quieres una interfaz friendly con la que moverte a través de las ramas, commitear y esas cosas instalate este programa. +[⬇️ Descarga GitHub Desktop](https://desktop.github.com/) + +## Clona el repo de mistica-web + +Cuando tengas instalado los tres puntos anteriores... + +1. Abre Github Desktop +2. Dale a `File → Clone Repository...` +3. Busca `mistica-web` +4. Selecciona en qué sitio de tu ordenador quieres clonarlo +5. Dale a `Clone` (esto puede tardar algunos minutos) + +Para clonar los repositorios + +## Instalar dependencias + +Instalar dependecias significa que cuando tu clonas un repositorio como mistica-web, en realidad hay mucho más código que el que existe en el repositorio de mistica-web, solo que ese código es externo y se le llama dependencias. Esto son extensiones de código que hace que las cosas sean más fáciles desde el lado tech, pero son paquetes que no viven dentro del repositorio de mistica-web. + +Para instalar estas dependencias: + +1. En GitHub Desktop dale a `Open in Visual Studio Code` + ![image](https://user-images.githubusercontent.com/6722153/178792351-cc9ab7e8-6144-478f-b89a-3c66beaf076c.png) + +Si no aparece esto, ve a Preferencias de GitHub Desktop y en Integrations cambia el external editor a Virtual Studio Code +![image](https://user-images.githubusercontent.com/6722153/178792466-94e25453-5dce-4bb6-9c59-f10e4acca8fd.png) + +2.En VSCode dale a `CMD + SHIFT + P` y escribe "Terminal" y aparecerá en la lista algo como "Terminal: Create New Terminal" +3.Ya debe aparacer debajo de tu ventana de VSCODE una ventana de Terminal. +4.En esa ventana escribe `yarn` +5.Ya está, ya tendrías todo lo necesario para hacer commits y PRs al repo. + +## Hacer una PR limpia, sin fallos + +En mistica-web hay una serie de controles de calidad para identificar qué está pasando cuando cambias cualquier cosa en el código, de esta manera nos evitamos futuros sustos. Esto sirve por si cambias el borde de una card, saber dónde han sido aquellos sitios que ha afectado ese cambio. + +Para pasar estos test de calidad, lo primero que tendrás que hacer es instalar [⬇️ Docker](https://docs.docker.com/get-docker/). Una vez instalado Docker, lo abres y ya no necesitas tocar nada más en Docker. + +Volvemos a la ventana del terminal de tu VSCode y escribe `yarn test-acceptance` +Esto lo que hará será ir una a uno revisando qué diferencias hay con respecto a lo anterior. + +Una vez termine el proceso (suele tardar) te saldrán aquellas screenshots que han dado fallos por existir diferencias entre lo nuevo y lo anterior (normalmente es lo que ocurrirá), para solucionar esto tienes que ejecutar el siguiente comando: + +`yarn test-acceptance -u XXXXXXX-screenshot-test` + +Siendo esas "XXXXXX" el nombre del error que te haya dado anteriormente. + +P.E: `yarn test-acceptance -u carousel-screenshot-test` + +--- + +Si a la hora de crear la PR la action te da error, otro comando que puede que te faltó por hacer es: + +`yarn build` o `yarn test -u` diff --git a/guides/playroom.md b/guides/playroom.md index 74c06a9d9ac..715a9e6497b 100644 --- a/guides/playroom.md +++ b/guides/playroom.md @@ -1,53 +1,57 @@ - - # Antes de empezar Es importante contar con unas nociones básicas de HTML, CSS y Javascript para entender los conceptos explicados en esta guía. Tanto si no tienes ningún conocimiento como si partes de nociones básicas recomendamos una lectura previa de los cursos: -* [Learn HTML, Web.dev](https://web.dev/learn/html/) -* [Learn CSS, Web.dev](https://web.dev/learn/css/) -* [Una reintroducción a JavaScript, MDN Web docs](https://developer.mozilla.org/es/docs/Web/JavaScript/Language_Overview) +- [Learn HTML, Web.dev](https://web.dev/learn/html/) +- [Learn CSS, Web.dev](https://web.dev/learn/css/) +- [Una reintroducción a JavaScript, MDN Web docs](https://developer.mozilla.org/es/docs/Web/JavaScript/Language_Overview) -Su contenido es completamente gratuito y te proveerá de una buena base sobre la que se apoyan todos los conceptos que veremos a continuación. +Su contenido es completamente gratuito y te proveerá de una buena base sobre la que se apoyan todos los conceptos que veremos a continuación. De todas formas, repasaremos conceptos básicos intentando no caer en explicaciones extensas que otros recursos ya proveen para ayudarte a usar playroom en el menor tiempo posible contando con las herramientas necesarias para prototipar cualquier interfaz que necesites. --- -# Índice -**Introducción** +## Índice + +### Introducción + - [¿Qué es Playroom?](#qué-es-playroom) - [Playroom defaults](#playroom-defaults) - [Preview & preview tools](#preview--preview-tools) - [Atajos de teclado](#atajos-de-teclado) -**Básicos** +### Básicos + - [Etiquetas](#etiquetas) - [Children](#children) - [Props](#props) - [Estilos](#estilos) - [Theme variant](#theme-variant) -**Lógicas** +## Lógicas + - [Según el tamaño de pantalla](#screen-size) - [Según la marca](#brand) - [Según si es light o dark mode](#light-or-dark-modes) -**Construyendo layout** +## Construyendo layout + - [Responsive layout](#responsive-layout) - [Grid layout](#grid-layout) - [Box, Stack & Inline](#box-stack--inline) - [Carousel](#carousel) - [Composiciones de página] -**Avanzado** +## Avanzado - [Funciones](#funciones) -- [Manejando estados](#manejando-estados) +- [Manejando estados](#estado) - [Iterando con arrays](#iterando-con-arrays) - [Crear nuevos componentes](#crear-nuevos-componentes) --- + # Introducción ## ¿Qué es Playroom? @@ -64,7 +68,6 @@ El Playroom de Mística viene con una serie de funcionalidades predefinidas a la ![usePlayroom](https://user-images.githubusercontent.com/44420072/210263265-f86810a5-cc5a-4dd8-bdbc-2cfbf9349cfe.gif) - ### Component snippets Desde el panel de Playroom puedes buscar y seleccionar snippets ya preparados de una gran mayoría de los componentes de Mística lo que te ahorrará mucho tiempo de prototipado. @@ -77,7 +80,7 @@ Activando varios temas o varios tamaños de pantalla, puedes verlos en simultán ## Preview & preview tools -Playroom permite la previsualización del código en cualquiera de los temas predefinidos. +Playroom permite la previsualización del código en cualquiera de los temas predefinidos. ![preview](https://user-images.githubusercontent.com/44420072/210265026-dd99ef30-9035-484e-b857-a8f54d5e6b3d.gif) @@ -94,18 +97,18 @@ Preview tools ofrece diferentes configuraciones de customización como `floating ## Atajos de teclado -| Acción | Teclas | -|:---------------- | :------------------- | -| Formateo de código | ⌘ + S | -| Abrir snippets | ⌘ + K | -| Intercambiar por la línea superior | ⌥ + ↑ | -| Intercambiar por la línea inferior | ⌥ + ↓ | -| Duplicar la linea encima | ⇧ + ⌥ + ↑ | -| Duplicate la linea debajo | ⇧ + ⌥ + ↓ | -| Añadir cursor a la línea anterior | ⌘ + ⌥ + ↑ | +| Acción | Teclas | +| :--------------------------------- | :----------------------------------------- | +| Formateo de código | ⌘ + S | +| Abrir snippets | ⌘ + K | +| Intercambiar por la línea superior | ⌥ + ↑ | +| Intercambiar por la línea inferior | ⌥ + ↓ | +| Duplicar la linea encima | ⇧ + ⌥ + ↑ | +| Duplicate la linea debajo | ⇧ + ⌥ + ↓ | +| Añadir cursor a la línea anterior | ⌘ + ⌥ + ↑ | | Añadir cursor a la línea siguiente | ⌘ + ⌥ + ↓ | -| Seleccionar siguiente ocurrencia | ⌘ + D | -| Deshacer | ⌘ + Z | +| Seleccionar siguiente ocurrencia | ⌘ + D | +| Deshacer | ⌘ + Z | # Básicos @@ -119,8 +122,8 @@ Una etiqueta se usa para crear un elemento. Para diferenciar las etiquetas propi ![etiquetas](https://user-images.githubusercontent.com/44420072/210240149-65c85264-db03-43aa-baeb-7bfe421c0700.gif) - Ejemplo de una etiqueta HTML: + ```

Esta es la etiqueta usada para crear un párrafo

``` @@ -131,7 +134,6 @@ Ejemplo de una etiqueta de un componente: Este es un componente custom de texto ``` - Cuando un elemento tiene otros elementos hijo se utilizan etiquetas de apertura y cierre, la mayor diferencia entre las mismas es que la etiqueta de cierre contiene una barra inclinada tras el paréntesis angular (`

`). Hay casos en los que el elemento no puede tener elementos hijo y la etiqueta no precisa por tanto ser cerrada. Un ejemplo: @@ -162,17 +164,14 @@ Un elemento en JSX puede prescindir de etiqueta de cierre siempre y cuando no te Todo aquello que se encuentre entre las etiquetas de apertura y cierre de un elemento se considera hijo del mismo. En JSX pueden coexistir varios tipos de children: - ### Cadenas de literales ``` Esto es una cadena de literales ``` - ### Otros elementos JSX - ``` Filtro 1 @@ -191,14 +190,12 @@ En JSX, al igual que en HTML, puedes mezclar cadenas de literales con elementos [Ver ejemplo en playroom →](https://rebrand.ly/e13jw2d) - ### Otros tipos Los siguientes tipos de children se tocarán en profundidad en el apartado avanzado de esta guía: -* Expresiones javascript -* Funciones - +- Expresiones javascript +- Funciones ## Props @@ -215,6 +212,7 @@ Las props se incluyen en la etiqueta de apertura de cada uno de los componentes: ``` ``` + En el caso del componente avatar, podemos ver en el código de arriba dos props: `size`, `src`. [Ver ejemplo en playroom →](https://rebrand.ly/mn601rg) @@ -237,11 +235,10 @@ Pueden ser de varios tipos en función de su objetivo. Para entender esto en pro ![props_string](https://user-images.githubusercontent.com/44420072/210240643-a4d1cd4e-46fd-4693-a638-6d37ca262839.gif) - En nuestro componente `SnapCard` tenemos una `prop` llamada `title` a la que le queremos asignar un valor. En este caso estamos utilizando un `string` (o una variable de texto) para asignar un valor de texto a nuestra propiedad. Esta variable almacena una cadena de caracteres de texto. -* Un string siempre tiene que ir entre comillas (es válido tanto usar comillas dobles como simples) -* Cuando se utiliza un string como valor de una prop puede prescindirse de las llaves de apertura y cierre (`{}`) +- Un string siempre tiene que ir entre comillas (es válido tanto usar comillas dobles como simples) +- Cuando se utiliza un string como valor de una prop puede prescindirse de las llaves de apertura y cierre (`{}`) [Ver ejemplo en playroom →](https://rebrand.ly/50elab5) @@ -253,7 +250,6 @@ En nuestro componente `SnapCard` tenemos una `prop` llamada `title` a la que le ![props_number](https://user-images.githubusercontent.com/44420072/210241221-baeceae3-303e-4f60-bea7-8418a35b8c2e.gif) - En nuestro componente stack la prop `prop` llamada `space` sirve para espaciar sus elementos hijo en el eje vertical, el valor de esta propiedad es numérico y siempre se escribe entre llaves. [Ver ejemplo en playroom →](https://rebrand.ly/gd0crzv) @@ -266,11 +262,10 @@ En nuestro componente stack la prop `prop` llamada `space` sirve para espaciar s ![props_boolean](https://user-images.githubusercontent.com/44420072/210241860-df7c1088-44c7-4e05-bf46-8405510ddaf4.gif) - Las variables booleanas indican si algo es verdadero o falso. En el ejemplo superior vemos como la prop `isInverse` tiene como valor `true`, lo que hace que se renderize como un elemento inverse. -* Si en un prop cuyo valor es de tipo booleano omitimos el valor, se colocará como verdadera por defecto -* Un buen indicativo de que una prop espera un valor booleano es cómo se compone su nombre (`isInverse`, `isLoading`) aunque no aplica en todos los casos. +- Si en un prop cuyo valor es de tipo booleano omitimos el valor, se colocará como verdadera por defecto +- Un buen indicativo de que una prop espera un valor booleano es cómo se compone su nombre (`isInverse`, `isLoading`) aunque no aplica en todos los casos. [Ver ejemplo en playroom →](https://rebrand.ly/2nvcodz) @@ -300,7 +295,7 @@ Puede utilizarse la etiqueta `