energy-foundations 0.0.1-beta.2

package/dist/stories/docs/quickStartVue.mdx

@@ -0,0 +1,98 @@
+import { Meta } from '@storybook/blocks';
+import './../styles/index.scss';
+
+<Meta title="Quick Start VUE" />
+
+# Instalar
+
+```
+yarn add energy-foundations
+```
+
+```
+npm install energy-foundations
+```
+
+## Contenido
+
+<div class="mt-0">
+
+#### CSS
+
+Importar el compilado de css. 
+Si se van a usar otras librerías Energy, este import debe ir el primero en el orden
+
+```<style lang="scss" src="./energy-foundations/dist/style.css"></style>```
+
+#### SCSS
+
+El paquete genera varios exports para diferentes usos:
+
+
+- rds-reset.scss
+- rds-variables.scss
+- rds-foundations.scss
+- global.scss (contiene todos los anteriores)
+
+</div>
+
+## Uso
+
+En una aplicación SPA, para optimizar la carga, se recomienda diferenciar los ficheros que contienen clases de los que contienen mixins y variables. 
+Para ello, los primeros se deben importar una única vez. 
+
+Esto lo encontramos en ```style.css```.
+
+Se recomienda generar en nuestro proyecto raíz un fichero que haga @import de ```style.css``` y este se cargue en el App.vue
+
+**main.scss**
+```css
+@import 'energy-foundations/dist/style.css';
+// otros estilos aquí
+```
+
+**App.vue**
+
+importante: no añadir el atributo 'scoped'
+
+```html
+<style lang="scss" src="./styles/main.scss"></style>
+```
+
+#### Variables y mixins
+
+Recomendamos crear primero un fichero que sea basic.scss en nuestro directorio raíz.
+En él hacemos un @import de las variables y mixins de la librería que están en el fichero ```rds-variables```.
+
+**basic.scss**
+```css
+@import 'energy-foundations/dist/rds-variables.scss';
+// otras variables y/o mixins aquí
+````
+
+Posteriormente, en el fichero de vite.config:
+
+**vite.config**
+```js 
+css: {
+  preprocessorOptions: {
+    scss: {
+      additionalData: `@import "./src/styles/basic.scss";`
+    }
+  }
+}
+
+```
+
+De esta manera, estos estilos serán accesibles a todos los componentes del proyecto Vue.
+
+Tambien deberemos de añadir el siguiente codigo para poder usar los estilos de node_modules en nuestro proyecto:
+
+**vite.config**
+```js
+server: {
+  fs: {
+    allow: [".."]
+  }
+}
+```

package/dist/stories/elevation/elevation.mdx

@@ -0,0 +1,113 @@
+import { Meta, Unstyled } from '@storybook/blocks';
+import './../styles/index.scss';
+
+<Meta title="Foundations/Elevaciones" name="Elevaciones" />
+
+# Elevaciones
+
+<Unstyled>
+  <table>
+
+    <tr>
+      <td class="width__one-third">
+        <h1 class="rds-title-01 rds-doc__color-headline">Imagen</h1>
+        Referencia para los ejemplos
+      </td>
+      <td class="width__one-third">
+        <div class="rds-doc-elevation rds-doc-elevation__background-image">
+          <div class="rds-doc-elevation"></div>
+        </div>
+      </td>
+      <td class="right"></td>
+    </tr>
+
+    <tr>
+      <td class="width__one-third">
+        <h1 class="rds-title-01 rds-doc__color-headline">Overlay</h1>
+      </td>
+      <td class="width__one-third">
+        <div class="rds-doc-elevation rds-doc-elevation__background-image">
+          <div class="rds-doc-elevation rds-doc-elevation__overlay"></div>
+        </div>
+      </td>
+      <td class="right">
+        `.rds-style-effect-overlay` <br />
+        `@include rds-style-effect-overlay`
+      </td>
+    </tr>
+
+    <tr>
+      <td class="width__one-third">
+        <h1 class="rds-title-01 rds-doc__color-headline">Glass</h1>
+      </td>
+      <td class="width__one-third">
+        <div class="rds-doc-elevation rds-doc-elevation__background-image">
+          <div class="rds-doc-elevation rds-style-effect-glass"></div>
+        </div>
+      </td>
+      <td class="right">
+        `.rds-style-effect-glass` <br />
+        `@include rds-style-effect-glass`
+      </td>
+    </tr>
+
+  </table>
+</Unstyled>
+
+# Estados
+
+<Unstyled>
+  <table>
+
+    <tr>
+      <td class="width__one-third">
+        <h1 class="rds-title-01 rds-doc__color-headline">Disabled</h1>
+      </td>
+      <td class="width__one-third">
+        <div class="rds-doc-elevation rds-doc-elevation__background-image rds-style-state-disabled">
+        </div>
+      </td>
+      <td class="right">
+        `.rds-style-state-disabled` <br />
+        `@include rds-style-state-disabled`
+      </td>
+    </tr>
+
+  </table>
+</Unstyled>
+
+# Sombras
+
+<Unstyled>
+  <table>
+
+    <tr>
+      <td class="width__one-third">
+        <h1 class="rds-title-01 rds-doc__color-headline">Shadow S</h1>
+      </td>
+      <td class="width__one-third">
+        <div class="rds-style-shadow-s rds-doc-elevation rds-doc-elevation__background-color rds-mb-m">
+        </div>
+      </td>
+      <td class="right">
+        `.rds-style-shadow-s` <br />
+        `@include rds-style-shadow-s`
+      </td>
+    </tr>
+
+    <tr>
+      <td class="width__one-third">
+        <h1 class="rds-title-01 rds-doc__color-headline">Shadow M</h1>
+      </td>
+      <td class="width__one-third">
+        <div class="rds-style-shadow-m rds-doc-elevation rds-doc-elevation__background-color">
+        </div>
+      </td>
+      <td class="right">
+        `.rds-style-shadow-m` <br />
+        `@include rds-style-shadow-m`
+      </td>
+    </tr>
+
+  </table>
+</Unstyled>

package/dist/stories/fonts/fonts.mdx

@@ -0,0 +1,165 @@
+import { Meta, Unstyled } from '@storybook/blocks';
+import './../styles/index.scss';
+
+<Meta title="Foundations/Fonts" name="Definition" />
+
+# Fonts
+
+Energy-foundations actualmente cuenta con dos familias de fuentes corporativas: "Sole" y "Display".
+Se encuentran disponible en los ```/assets```
+
+Las siguientes clases incluyen las media queries para el uso de las fuentes en diferentes dispositivos.
+Basta con aplicarlas para que la fuente se ajuste a la pantalla en la que se visualiza.
+
+También es posible utilizar las fuentes a través de mixins, para poder añadirlas directamente en otra clase. 
+Basta con invocar el mixin ```rds-font-style```que recibe como parámetro el nombre de la tipografía que se desea utilizar.
+El nombre va sin el prefijo ```rds-```.
+
+```scss
+.my-class {
+  @include rds-font-style('headline-01')
+}
+```
+
+<Unstyled>
+  <table>
+    <tr>
+      <th>HEADLINES</th>
+    </tr>
+    <tr>
+      <td><h2 class="rds-headline-00">Sole Repsol H1</h2></td>
+      <td class="right">```.rds-headline-00```</td>
+    </tr>
+    <tr>
+      <td><h2 class="rds-headline-01">Sole Repsol H1</h2></td>
+      <td class="right">```.rds-headline-01```</td>
+    </tr>
+    <tr>
+      <td><h2 class="rds-headline-02">Sole Repsol H2</h2></td>
+      <td class="right">```.rds-headline-02```</td>
+    </tr>
+    <tr>
+      <td><h2 class="rds-headline-03">Sole Repsol H3</h2></td>
+      <td class="right">```.rds-headline-03```</td>
+    </tr>
+  </table>
+</Unstyled>
+
+<Unstyled>
+  <table>
+  <tr>
+      <th>TITLES</th>
+    </tr>
+    <tr>
+      <td><h2 class="rds-title-01">Title 1</h2></td>
+      <td class="right">```.rds-title-01```</td>
+    </tr>
+    <tr>
+      <td><h2 class="rds-title-02">Title 2</h2></td>
+      <td class="right">```.rds-title-02```</td>
+    </tr>
+  </table>
+</Unstyled>
+
+<Unstyled>
+  <table>
+    <tr>
+      <th>BODY</th>
+    </tr>
+    <tr>
+      <td><p class="rds-body-01">Sole Repsol body 1</p></td>
+      <td class="right">```.rds-body-01```</td>
+    </tr>
+    <tr>
+      <td><p class="rds-body-01-bold">Sole Repsol body 1 - bold</p></td>
+      <td class="right">```.rds-body-01-bold```</td>
+    </tr>
+    <tr>
+      <td><p class="rds-body-01-underline">Sole Repsol body 1 - underline</p></td>
+      <td class="right">```.rds-body-01-underline```</td>
+    </tr>
+    <tr>
+      <td><p class="rds-body-02">Sole Repsol body 2</p></td>
+      <td class="right">```.rds-body-02```</td>
+    </tr>
+    <tr>
+      <td><p class="rds-body-02-bold">Sole Repsol body 2 - bold</p></td>
+      <td class="right">```.rds-body-02-bold```</td>
+    </tr>
+    <tr>
+      <td><p class="rds-body-02-underline">Sole Repsol body 2 - underline</p></td>
+      <td class="right">```.rds-body-02-underline```</td>
+    </tr>
+    <tr>
+      <td><p class="rds-caption-01">Sole Repsol caption 1</p></td>
+      <td class="right">```.rds-caption-01```</td>
+    </tr>
+    <tr>
+      <td><p class="rds-caption-02">Sole Repsol caption 2</p></td>
+      <td class="right">```.rds-caption-02```</td>
+    </tr>
+    <tr>
+      <td><p class="rds-caption-tag">Sole Repsol caption tag</p></td>
+      <td class="right">```.rds-caption-tag```</td>
+    </tr>
+    <tr>
+      <td><p class="rds-button-01">Sole Repsol Button text</p></td>
+      <td class="right">```.rds-button-01```</td>
+    </tr>
+    <tr>
+      <td><p class="rds-button-01-small">Sole Repsol Button text - small</p></td>
+      <td class="right">```.rds-button-01-small```</td>
+    </tr>
+  </table>
+</Unstyled>
+
+<Unstyled>
+  <table>
+    <tr>
+      <th>NUMBERS</th>
+    </tr>
+    <tr>
+      <td class="full-col"><span class="rds-numbers-00">1234</span></td>
+      <td class="right">```.rds-numbers-00```</td>
+    </tr>
+    <tr>
+      <td class="full-col"><span class="rds-numbers-01">1234</span></td>
+      <td class="right">```.rds-numbers-01```</td>
+    </tr>
+    <tr>
+      <td class="full-col"><span class="rds-numbers-02">1234</span></td>
+      <td class="right">```.rds-numbers-02```</td>
+    </tr>
+    <tr>
+      <td class="full-col"><span class="rds-numbers-03">1234</span></td>
+      <td class="right">```.rds-numbers-03```</td>
+    </tr>
+  </table>
+</Unstyled>
+
+## Guía de migración
+
+<Unstyled>
+  <table>
+    <tr>
+      <th>Oxygen</th>
+      <th>Energy</th>
+    </tr>
+    <tr>
+      <td><p><del>headline-bold-1</del></p></td>
+      <td>Se recomienda cambiar por headline-01</td>
+    </tr>
+    <tr>
+      <td><p><del>headline-bold-2</del></p></td>
+      <td>Se recomienda cambiar por headline-02</td>
+    </tr>
+    <tr>
+      <td><p><del>subheadline</del></p></td>
+      <td>Se recomienda cambiar por headline-03 o title-01</td>
+    </tr>
+    <tr>
+      <td><p><del>highlighted-body</del></p></td>
+      <td>Se recomienda cambiar por title-01 o title-02</td>
+    </tr>
+  </table>
+</Unstyled>

package/dist/stories/functional/Layaout.mdx

@@ -0,0 +1,42 @@
+import { Meta, Unstyled } from '@storybook/blocks';
+import './../styles/index.scss';
+
+<Meta title="Functional/Layout" name="Layout" />
+
+# Layout mixins
+
+---
+
+### breakpoint
+El siguiente listado se muestra en orden de preferencia para su uso. <br />
+Se prioriza el uso de <a href="https://developer.mozilla.org/es/docs/Glossary/Mobile_First" target="_blank" rel="noopener">mobile first</a>
+
+* $breakpoint:
+  * `mobile`
+  * `tablet`
+  * `desktop`
+  * `desktop-large`
+
+```css
+[selector] {
+  @include breakpoint($breakpoint) {
+    // Estilos
+  }
+}
+```
+
+```css
+[selector] {
+  // Estilos generales para mobile
+
+  @include breakpoint('tablet') {
+    // Estilos para tablet
+  }
+
+  // ...
+
+  @include breakpoint('desktop-large') {
+    // Estilos para desktop-large
+  }
+}
+```

package/dist/stories/functional/Utils.mdx

@@ -0,0 +1,22 @@
+import { Meta, Unstyled } from '@storybook/blocks';
+import './../styles/index.scss';
+
+<Meta title="Functional/Utils" name="Utils" />
+
+# General
+
+### Convertir px to rem
+  
+```css
+[selector]: {
+  width: pxToRem(16px);
+}
+```
+
+El uso de esta función nos devolvera el sigueinte `css`
+
+```css
+[selector]: {
+  width: 1rem;
+}
+```

package/dist/stories/grid/Breakpoint.stories.js

@@ -0,0 +1,16 @@
+import './gridsystem.scss'
+
+export default {
+  title: 'Foundations/grid',
+}
+
+export function Breakpoint() {
+  const container = document.createElement('div')
+  container.className = `playground-grid`
+
+  const container_breakpoint = document.createElement('div')
+  container_breakpoint.className = `rds-layout-max grid-item rds-docs-breakpoint`
+  container.appendChild(container_breakpoint)
+
+  return container
+}

package/dist/stories/grid/Gridsystem.mdx

@@ -0,0 +1,172 @@
+import { Meta, Unstyled } from '@storybook/blocks';
+import './../styles/index.scss';
+import './gridsystem.scss';
+
+import GridMobile from "./../assets/grid-mobile.png";
+import GridTablet from "./../assets/grid-tablet.png";
+import GridDesktop from "./../assets/grid-desktop.png";
+import GridXd from "./../assets/grid-xd.png";
+
+<Meta title="Foundations/grid" name="Layout" />
+
+# Layout
+
+<Unstyled>
+  <table>
+    <tr>
+      <th>BREAKPOINTS</th>
+    </tr>
+    <tr>
+      <td class="width__one-third rds-doc__layout-cell--label">
+        <h2 class="rds-title-01 rds-doc__color-headline">Breakpoint S</h2>
+        Mobile
+      </td>
+      <td class="width__one-third rds-doc__layout-graph rds-body-02">
+        Screen size: 375px<br />Content size: 343px
+      </td>
+      <td class="width__one-third rds-doc__layout-cell--right right">
+        ```@include breakpoint(mobile){}```
+      </td>
+    </tr>
+
+    <tr>
+      <td class="width__one-third rds-doc__layout-cell--label">
+        <h2 class="rds-title-01 rds-doc__color-headline">Breakpoint M</h2>
+        <span class="rds-body-02">Tablet</span>
+      </td>
+      <td class="width__one-third rds-doc__layout-graph rds-body-02">
+        Screen size: 720px<br />Content size: 672px
+      </td>
+      <td class="width__one-third rds-doc__layout-cell--right right">
+        ```@include breakpoint(tablet){}```
+      </td>
+    </tr>
+
+    <tr>
+      <td class="width__one-third rds-doc__layout-cell--label">
+        <h2 class="rds-title-01 rds-doc__color-headline">Breakpoint L</h2>
+        <span class="rds-body-02">Desktop</span>
+      </td>
+      <td class="width__one-third rds-doc__layout-graph rds-body-02">
+        Screen size: 1440px<br />Content size: 1376px
+      </td>
+      <td class="width__one-third rds-doc__layout-cell--right right">
+        ```@include breakpoint(desktop){}```
+      </td>
+    </tr>
+
+    <tr>
+      <td class="width__one-third rds-doc__layout-cell--label">
+        <h2 class="rds-title-01 rds-doc__color-headline">Breakpoint XL</h2>
+        <span class="rds-body-02">Ultrawide Desktop</span>
+      </td>
+      <td class="width__one-third rds-doc__layout-graph rds-body-02">
+        Screen size: 2200px<br />Content size: 1536px
+      </td>
+      <td class="width__one-third rds-doc__layout-cell--right right">
+        ```@include breakpoint(ultrawide){}```
+      </td>
+    </tr>
+  </table>
+
+</Unstyled>
+
+<Unstyled>
+ <table>
+      <tr>
+          <th>Layout-max</th>
+      </tr>
+      <tr>
+          <td class="rds-doc__layout-cell--label">
+            ```.rds-layout-max```
+          </td>
+          <td class="rds-body-02">
+              Esta clase ajusta el padding según el tamaño de la pantalla y establece un ancho máximo y margen centrado para pantallas de cada dispositivo.
+          </td>
+      </tr>
+  </table>
+
+  <div class="">
+    <div class="grid-item grid-item--no-padding">
+      <div class="rds-docs-breakpoint__layout-inner">
+        Layout max
+      </div>
+    </div>
+  </div>
+
+  <table>
+    <tr>
+      <th>Grid</th>
+    </tr>
+    <tr>
+        <td class="rds-doc__layout-cell--label ">
+            ```.rds-grid```
+        </td>
+        <td class="rds-body-02">
+            El wrapper `.rds-grid` establece un contenedor con display grid, centrado horizontalmente con márgenes automáticos y ancho del 100%. 
+            Configura una cuadrícula responsive con los siguientes ajustes específicos:
+            ```
+            - Mobile (sd): hasta 4 columnas, con un espaciado de 16px entre elementos.
+            - Tablet (md): hasta 8 columnas, con un espaciado de 16px entre elementos.
+            - Desktop (ld): hasta 12 columnas, con un espaciado de 24px entre elementos.
+            - Ultrawide: similar al anterior, por lo tanto usa las mismas clases.
+            ```
+        </td>
+    </tr>
+  </table>
+
+  <table>
+    <tr>
+        <td class="rds-doc__layout-cell--label">
+            ```.rds-col-{abbr}-{number}```
+        </td>
+        <td class="rds-body-02">
+            Define el número de columnas que un elemento debe ocupar en la cuadrícula en el breakpoint especificado.
+            Reemplaza `{abbr}` con la abreviatura del breakpoint (`sd`, `md`, `ld`, `xd`) y `{number}` con el número de columnas que el elemento ocupará.
+        </td>
+    </tr>
+  </table>
+
+
+  <table>
+    <tr>
+        <td class="rds-doc__layout-cell--label">
+            ```.rds-col-{n}```
+        </td>
+        <td class="rds-body-02">
+            Define que un elemento debe ocupar `{n}` columnas en la cuadrícula en todos los breakpoints.
+            Esta clase asigna automáticamente `{n}` columnas a un elemento en cualquier tamaño de pantalla definido en la cuadrícula.
+
+            <br />
+
+            Ejemplos:
+            ```
+            <ul>
+                <li><code>.rds-col-1</code>: Asigna una columna.</li>
+                <li><code>.rds-col-2</code>: Asigna dos columnas.</li>
+                <li><code>.rds-col-3</code>: Asigna tres columnas.</li>
+            </ul>
+            ```
+        </td>
+    </tr>
+  </table>
+
+  <div class="rds-docs-breakpoint__grid-example-container">
+    <div>
+      <h1 class="rds-title-02">Mobile</h1>
+      <h2 class="rds-body-01">rds-col-sd-[1-4]</h2>
+      <div><img src={GridMobile}/></div>
+    </div>
+    <div>
+      <h1 class="rds-title-02">Tablet</h1>
+      <h2 class="rds-body-01">rds-col-md-[1-8]</h2>
+      <div><img src={GridTablet}/></div> 
+    </div>
+    <div>
+     <h1 class="rds-title-02">Desktop y Ultrawide</h1>
+     <h2 class="rds-body-01">rds-col-ld-[1-12]</h2> 
+     <div><img src={GridDesktop}/></div> 
+    </div> 
+  </div>
+
+</Unstyled>

package/dist/stories/grid/ResponsiveGrid.stories.js

@@ -0,0 +1,47 @@
+import './gridsystem.scss'
+
+export default {
+  title: 'Foundations/grid',
+  argTypes: {
+    gridItems: {
+      control: 'object',
+    },
+  },
+}
+
+function createGridItem(content) {
+  const div = document.createElement('div')
+  div.className = 'grid-item'
+  div.textContent = content
+  return div
+}
+
+export function ResponsiveGridSystem({ gridItems }) {
+  const container = document.createElement('div')
+  container.className = 'rds-layout-max playground-grid'
+
+  const containerGrid = document.createElement('div')
+  containerGrid.className = 'rds-grid'
+  container.appendChild(containerGrid)
+
+  gridItems.forEach((item, index) => {
+    const columnDiv = document.createElement('div')
+    columnDiv.className = Object.entries(item)
+      .map(([breakpoint, columns]) => `rds-col-${breakpoint}-${columns}`)
+      .join(' ')
+    const gridItem = createGridItem(`Item ${index + 1}`)
+    columnDiv.appendChild(gridItem)
+    containerGrid.appendChild(columnDiv)
+  })
+
+  return container
+}
+
+ResponsiveGridSystem.args = {
+  gridItems: [
+    { sm: 3, md: 6, lg: 4, xl: 3 },
+    { sm: 1, md: 6, lg: 4, xl: 3 },
+    { sm: 1, md: 6, lg: 4, xl: 3 },
+    { sm: 3, md: 6, lg: 4, xl: 3 },
+  ],
+}