energy-foundations 0.0.1-beta.2

package/dist/stories/grid/SimpleGridsystem.stories.js

@@ -0,0 +1,39 @@
+import './gridsystem.scss'
+
+export default {
+  title: 'Foundations/grid',
+  argTypes: {
+    columns: {
+      control: { type: 'range', min: 1, max: 12, step: 1 },
+    },
+  },
+}
+
+function createGridItem(content) {
+  const div = document.createElement('div')
+  div.className = 'grid-item'
+  div.textContent = content
+  return div
+}
+
+export function SimpleGridSystem({ columns }) {
+  const container = document.createElement('div')
+  container.className = `rds-layout-max playground-grid`
+
+  const container_grid = document.createElement('div')
+  container_grid.className = `rds-grid`
+  container.appendChild(container_grid)
+
+  for (let i = 0; i < 12; i++) {
+    const columnDiv = document.createElement('div')
+    columnDiv.className = `rds-col-${columns}`
+    columnDiv.appendChild(createGridItem(i + 1))
+    container_grid.appendChild(columnDiv)
+  }
+
+  return container
+}
+
+SimpleGridSystem.args = {
+  columns: 1,
+}

package/dist/stories/grid/gridsystem.scss

@@ -0,0 +1,86 @@
+@use 'sass:map';
+
+@import './../styles/index';
+@import './../styles/overwrite';
+@import '../../foundations/grid';
+
+.playground-grid {
+  background: repeating-linear-gradient(
+    45deg,
+    #e04343a5,
+    #e04343ba 1px,
+    #ffffff 1px,
+    #ffffff 10px
+  );
+  padding: 20px !important;
+}
+
+.grid-item {
+  background-color: #FBF3EF;
+  border: 1px solid rgba(0, 0, 0, 0.18);
+  border-radius: 4px;
+  padding: 14px;
+
+  &--no-padding {
+    padding: 0;
+  }
+
+}
+
+.rds-docs-breakpoint {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+
+  &:after {
+    content: 'Mobile';
+    margin: auto;
+    padding: 20px 0;
+  }
+
+  @include breakpoint(tablet) {
+    &:after {
+      content: 'Tablet';
+      margin: auto;
+      padding: 20px 0;
+    }
+  }
+
+  @include breakpoint(desktop) {
+    &:after {
+      content: 'Desktop';
+      margin: auto;
+      padding: 20px 0;
+    }
+  }
+
+  @include breakpoint(ultrawide) {
+    &:after {
+      content: 'Ultrawide desktop';
+      margin: auto;
+      padding: 20px 0;
+    }
+  }
+
+  &__layout-inner {
+    background-color: $rds-color-yellow-50;
+    color: white;
+    margin: 0 auto;
+    padding: 20px;
+    text-align: center;
+    width: 80%;
+  }
+
+
+  &__grid-example-container {
+    div {
+      margin-bottom: 30px;
+    }
+
+    img {
+      max-height: 300px;
+    }
+  }
+
+
+}

package/dist/stories/icons/icon-list.ts

@@ -0,0 +1,5 @@
+import selectionJson from '../../../public/fonts/selection.json'
+
+export default selectionJson.icons.map(
+  (icon: any) => icon.properties.name,
+)

package/dist/stories/icons/icons.mdx

@@ -0,0 +1,84 @@
+import { Meta, Unstyled } from '@storybook/blocks';
+import './../styles/index.scss';
+import { useState } from 'react';
+import iconList from './icon-list.ts';
+
+<Meta title="Foundations/Icons" name="Definition" />
+
+# Icons
+
+Para cargar cualquiera de los siguientes iconos añade a un span la clase icon + la clase del icono que desees.
+
+```html
+<span class="rds-icon rds-icon-check">
+```
+
+Hay dos tamaños disponibles. Regular, que está por defecto, y el small que se utiliza aplicando el modificador `icon--small`
+
+<div class="rds-doc-icon__container">
+  <div class="rds-doc-icon__item">
+    <span className="rds-icon rds-icon-waylet"></span>
+    <span className="caption rds-body-02">regular 20x20px</span>
+  </div>
+
+  <div class="rds-doc-icon__item">
+    <span className="rds-icon rds-icon--small rds-icon-waylet"></span>
+    <span className="caption rds-body-02">small 16x16px</span>
+  </div>
+</div>
+
+```html
+<span class="rds-icon rds-icon--small rds-icon-check">
+```
+
+Haz click en cualquiera de los iconos de abajo para copiar su nombre en el portapapeles.
+
+<Unstyled>
+  <div className="rds-doc-icon__container">
+  {iconList.map((key, index) => {
+    const IconItem = () => {
+      const [copied, setCopied] = useState(false);
+
+      const copyToClipboard = () => {
+        navigator.clipboard.writeText('rds-icon-' + key).then(() => {
+          setCopied(true);
+          setTimeout(() => setCopied(false), 3000);
+        });
+      };
+
+      return (
+        <div key={index} className={`rds-doc-icon__item ${copied ? 'rds-doc-icon__item--copied' : ''}`} onClick={copyToClipboard}>
+          <span className={'rds-icon rds-icon-' + key}></span>
+          <span className="caption rds-body-02">{copied ? 'copiado' : 'rds-icon-' + key}</span>
+        </div>
+      );
+    };
+
+    return <IconItem />;
+  })}
+  </div>
+</Unstyled>
+
+  <div class="rds-mt-l">
+    ## Guía de migración
+    
+    Se ha añadido el prefijo rds- a las clases de los iconos.
+  </div>
+
+<Unstyled>
+
+  <table>
+    <tr>
+      <th>Oxygen</th>
+      <th>Energy</th>
+    </tr>
+    <tr>
+      <td><p><del>icon</del></p></td>
+      <td>rds-icon</td>
+    </tr>
+    <tr>
+      <td><p><del>icon-waylet</del></p></td>
+      <td>rds-icon-waylet</td>
+    </tr>
+  </table>
+</Unstyled>

package/dist/stories/spacing/Spacing.mdx

@@ -0,0 +1,296 @@
+
+import { Meta, Unstyled, Source } from '@storybook/blocks';
+import './../styles/index.scss';
+import './spacing-story.scss';
+
+<Meta title="Foundations/Spacing/Spacing" name="Spacing"/>
+
+# Spacing
+
+El spacing es el área negativa entre elementos y componentes. 
+
+<Unstyled>
+  <table class="spacing-table">
+
+    <tr class="table-element">
+      <td>
+        <p class="rds-headline rds-doc__color-headline">
+          Entre Bloques de texto / iconos
+        </p>
+      </td>
+      <td>
+        4px
+      </td>
+      <td>
+        <div class="spacing-example spacing-example--xxs rds-doc__color--radius-s"></div>
+      </td>
+      <td class="right">
+        ```$rds-spacing-layout-xxs```
+      </td>
+    </tr>
+
+    <tr class="table-element">
+      <td>
+        <p class="rds-headline rds-doc__color-headline">
+          Entre Bloques de texto / iconos
+        </p>
+      </td>
+      <td>
+        8px
+      </td>
+      <td>
+        <div class="spacing-example spacing-example--xs rds-doc__color--radius-s"></div>
+      </td>
+      <td class="right">
+        ```$rds-spacing-layout-xs```
+      </td>
+    </tr>
+
+    <tr class="table-element">
+      <td>
+        <p class="rds-headline rds-doc__color-headline">
+          Entre contenidos y botones
+        </p>
+      </td>
+      <td>
+        16px
+      </td>
+      <td>
+        <div class="spacing-example spacing-example--s rds-doc__color--radius-s"></div>
+      </td>
+      <td class="right">
+        ```$rds-spacing-layout-s```
+      </td>
+    </tr>
+
+    <tr class="table-element">
+      <td>
+        <p class="rds-headline rds-doc__color-headline">
+          Dentro de secciones
+        </p>
+      </td>
+      <td>
+        24px
+      </td>
+      <td>
+        <div class="spacing-example spacing-example--m rds-doc__color--radius-s"></div>
+      </td>
+      <td class="right">
+        ```$rds-spacing-layout-m```
+      </td>
+    </tr>
+
+    <tr class="table-element">
+      <td>
+        <p class="rds-headline rds-doc__color-headline">
+          Entre secciones diferentes
+        </p>
+      </td>
+      <td>
+        32px
+      </td>
+      <td>
+        <div class="spacing-example spacing-example--l rds-doc__color--radius-s"></div>
+      </td>
+      <td class="right">
+        ```$rds-spacing-layout-l```
+      </td>
+    </tr>
+
+    <tr class="table-element">
+      <td>
+        <p class="rds-headline rds-doc__color-headline">
+          Entre bloques relacionados
+        </p>
+      </td>
+      <td>
+        48px
+      </td>
+      <td>
+        <div class="spacing-example spacing-example--xl rds-doc__color--radius-s"></div>
+      </td>
+      <td class="right">
+        ```$rds-spacing-layout-xl```
+      </td>
+    </tr>
+
+    <tr class="table-element">
+      <td>
+        <p class="rds-headline rds-doc__color-headline">
+          Entre bloques
+        </p>
+      </td>
+      <td>
+        64px
+      </td>
+      <td>
+        <div class="spacing-example spacing-example--2xl rds-doc__color--radius-s"></div>
+      </td>
+      <td class="right">
+        ```$rds-spacing-layout-2xl```
+      </td>
+    </tr>
+
+    <tr class="table-element">
+      <td>
+        <p class="rds-headline rds-doc__color-headline">
+          Separación de módulos
+        </p>
+      </td>
+      <td>
+        72px
+      </td>
+      <td>
+        <div class="spacing-example spacing-example--3xl rds-doc__color--radius-s"></div>
+      </td>
+      <td class="right">
+        ```$rds-spacing-layout-3xl```
+      </td>
+    </tr>
+
+    <tr class="table-element">
+      <td>
+        <p class="rds-headline rds-doc__color-headline">
+          Separación de módulos
+        </p>
+      </td>
+      <td>
+        80px
+      </td>
+      <td>
+        <div class="spacing-example spacing-example--4xl rds-doc__color--radius-s"></div>
+      </td>
+      <td class="right">
+        ```$rds-spacing-layout-4xl```
+      </td>
+    </tr>
+
+    <tr class="table-element">
+      <td>
+        <p class="rds-headline rds-doc__color-headline">
+          Separación de módulos
+        </p>
+      </td>
+      <td>
+        96px
+      </td>
+      <td>
+        <div class="spacing-example spacing-example--5xl rds-doc__color--radius-s"></div>
+      </td>
+      <td class="right">
+        ```$rds-spacing-layout-5xl```
+      </td>
+    </tr>
+
+    <tr class="table-element">
+      <td>
+        <p class="rds-headline rds-doc__color-headline">
+          Separación de módulos
+        </p>
+      </td>
+      <td>
+        112px
+      </td>
+      <td>
+        <div class="spacing-example spacing-example--6xl rds-doc__color--radius-s"></div>
+      </td>
+      <td class="right">
+        ```$rds-spacing-layout-6xl```
+      </td>
+    </tr>
+
+    <tr class="table-element">
+      <td>
+        <p class="rds-headline rds-doc__color-headline">
+          Separación de módulos
+        </p>
+      </td>
+      <td>
+        120px
+      </td>
+      <td>
+        <div class="spacing-example spacing-example--7xl rds-doc__color--radius-s"></div>
+      </td>
+      <td class="right">
+        ```$rds-spacing-layout-7xl```
+      </td>
+    </tr>
+
+  </table>
+</Unstyled>
+
+# Como funciona
+
+Las clase de espaciado aplican *margin* y *padding* a los elementos que las contienen.
+
+Estas calses se forman de la siguiente manera:
+
+1. prefijo: `rds-`
+2. tipo de espaciado y dirección:
+  - Espaciado:
+    - `m` - Margin
+    - `p` .- Padding
+  - Dirección:
+    - `a` - All
+    - `t` - Top
+    - `r` - Right
+    - `b` - Bottom
+    - `l` - Left
+    - `x` - Horizontal
+    - `y` - Vertical
+3. tamaño del espaciado:
+  - `xxs` - 2 Extra Small
+  - `xs` - Extra Small
+  - `s` - Small
+  - `m` - Medium
+  - `l` - Large
+  - `xl` - Extra Large
+  - `2xl` - 2 Extra Large
+  - `3xl` - 3 Extra Large
+  - `4xl` - 4 Extra Large
+  - `5xl` - 5 Extra Large
+  - `6xl` - 6 Extra Large
+  - `7xl` - 7 Extra Large
+
+```css
+  .rds-mt-xs | .rds-py-xl | .rds-mb-3xl
+```
+
+## Guía de migración
+
+<Unstyled>
+  <table>
+    <tr>
+      <th>Oxygen</th>
+      <th>Energy</th>
+    </tr>
+
+    <tr>
+      <td><p><del> rds-m-(n) </del></p></td>
+      <td>Ahora para indicar el tamaño del margen se utilizan tallas `rds-ma-[xs | s | ... | 7xl]`</td>
+    </tr>
+    <tr>
+      <td><p><del> rds-p-(n) </del></p></td>
+      <td>Ahora para indicar el tamaño del padding se utilizan tallas `rds-pa-[xs | s | ... | 7xl]`</td>
+    </tr>
+
+    <tr>
+      <td><p><del> rds-m-1 </del></p></td>
+      <td>Ahora para indicar margen en todo se utiliza `rds-ma-xs`</td>
+    </tr>
+    <tr>
+      <td><p><del> rds-p-1 </del></p></td>
+      <td>Ahora para indicar padding en todo se utiliza `rds-pa-xs`</td>
+    </tr>
+
+     <tr>
+      <td><p>N/A</p></td>
+      <td>Nueva clase para espacio horizontal `rds-[p | m]x-xs`</td>
+    </tr>
+    <tr>
+      <td><p>N/A</p></td>
+      <td>Nueva clase para espacio vertical `rds-[p | m]y-xs`</td>
+    </tr>
+
+  </table>
+</Unstyled>

package/dist/stories/spacing/Spacing.stories.js

@@ -0,0 +1,132 @@
+import './../styles/index.scss'
+import './spacing-story.scss'
+
+export default {
+  title: 'Foundations/Spacing',
+}
+
+export const Playground = {
+  render: (args) => {
+    const getClassName = () => {
+      const prefix = 'rds'
+
+      const type = args.type
+      const position = args.position
+      const size = args.size
+
+      if (!type || (!position && position !== '') || !size) return ''
+      return `${prefix}-${type}${position}-${size}`
+    }
+
+    function makeTitle(className) {
+      const values = {
+        'xxs': 4,
+        'xs': 8,
+        's': 16,
+        'm': 24,
+        'l': 32,
+        'xl': 48,
+        '2xl': 64,
+        '3xl': 72,
+        '4xl': 80,
+        '5xl': 96,
+        '6xl': 112,
+        '7xl': 120,
+      }
+
+      // Generate title to show the class name
+      const $title = document.createElement('h3')
+      $title.className = 'docblock-source rds-headline-02 rds-my-m'
+      const size = args.size
+
+      let px = ''
+      if (size in values) px = `(${values[size]}px)`
+
+      const title = [px, className].filter(Boolean).join(' | ')
+      $title.textContent = title
+
+      return $title
+    }
+
+    function makeGrid() {
+      const className = getClassName()
+      let marginClass = 'rds-ma-m'
+      let paddingClass = ''
+      const $container = document.createElement('div')
+      $container.className = 'spacing-playground container'
+
+      $container.appendChild(
+        makeTitle(className),
+      )
+
+      // Generate grid
+      const $grid = document.createElement('div')
+      $grid.className = 'grid-container stripped-background'
+
+      const $gridItems = Array.from({ length: 4 }, (_, i) => {
+        const $item = document.createElement('div')
+        if (args.type === 'm') marginClass = className
+        $item.className = `grid-item ${marginClass}`
+
+        const $padding = document.createElement('div')
+        $padding.style = 'background-color: #transparent;'
+        if (args.type === 'p') {
+          paddingClass = className
+          $padding.style = 'background-color: #f0f0f0;'
+        }
+        $padding.className = paddingClass
+
+        $padding.textContent = `${i + 1}`
+
+        $item.appendChild($padding)
+
+        return $item
+      })
+
+      $gridItems.forEach($item => $grid.appendChild($item))
+      $container.appendChild($grid)
+
+      return $container
+    }
+
+    return makeGrid()
+  },
+  argTypes: {
+    type: {
+      options: ['m', 'p'],
+      control: {
+        type: 'select',
+        labels: {
+          m: 'margin',
+          p: 'padding',
+        },
+      },
+    },
+    position: {
+      options: ['a', 't', 'b', 'l', 'r', 'y', 'x'],
+      control: {
+        type: 'select',
+        labels: {
+          a: 'Todos',
+          t: 'Superior',
+          b: 'Inferior',
+          l: 'Izquierda',
+          r: 'Derecha',
+          y: 'Vertical',
+          x: 'Horizontal',
+        },
+      },
+    },
+    size: {
+      options: ['xxs', 'xs', 's', 'm', 'l', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl', '7xl'],
+      control: {
+        type: 'select',
+      },
+    },
+  },
+  args: {
+    type: 'm',
+    position: 'a',
+    size: 'm',
+  },
+}