add new images for spacing

add missing text input showcases
small improvements in various components
increase iframe height across docusaurus

website/docs/0-intro.md

@@ -3,7 +3,7 @@ title: EEA Component Library
 hide_table_of_contents: true
 ---
 
-## ec.europa.eu
+## eea.europa.eu
 
 This library contains all available components that you can use to build your own website.
 
@@ -13,4 +13,3 @@ All library elements are accompanied by
 - a visual demonstration
 - HTML/CSS code for implementation
 
-For support in building a European Commission website using the ECL, please contact [COMM Europa Management](mailto:Europamanagement@ec.europa.eu) (CEM).

website/docs/1-getting-started.mdx

@@ -4,7 +4,6 @@ title: Getting started
 hide_table_of_contents: true
 ---
 
-The Europa Component Library is a design system for the European Commission and websites managed by the Commission.
 
 We provide design guidelines and code to help users create consistent and accessible government web presence.
 

website/docs/3-Guidelines/0-intro.md

@@ -4,4 +4,4 @@ title: Intro
 ## Guidelines
 
 The DS v1 is the EEA's design system, created with a set of guiding principles that followed throughout the process.
-By following a user-centered design approach and best UX practices, the DS v1 is the result of in-depth research into the users' needs and goals, offering solutions that are assessed, tested and revised continuously. All components included in the DS v1 follow the Web Content Accessibility Guidelines (WCAG)
+By following a user-centered design approach and best UX practices, the DS v1 is the result of in-depth research into the users' needs and goals, offering solutions that are assessed, tested and revised continuously. All components included in the DS v1 follow the Web Content Accessibility Guidelines (WCAG).

website/docs/3-Guidelines/1-typography.mdx

@@ -76,19 +76,19 @@ Font weight is the thickness of a font's stroke, with various weights used to di
 ## Line height
 
 Line spacing is commonly measured as a percentage of font size. Conventional wisdom is that line spacing of 130%-150% is ideal for readability. In fact, anything from about 120% up to 200% is acceptable, but 150% tends to be the most quoted sweet spot (and a WCAG recommendation). You should experiment to see what looks best with your text. The line-height value is always divisible by 4 to support the grid.
-<table>
+<table >
     <tbody>
         <tr>
-            <td><p style={{lineHeight:100+'%' }}>Lorem ipusm <br /> Lorem ipusm </p></td>
-            <td>100%</td>
+            <td><p style={{lineHeight:100+'%',width:600+'px' }}>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p></td>
+            <td style={{width:150+'px' }}>100%</td>
         </tr>
         <tr>
-            <td><p style={{lineHeight:150+'%' }}>Lorem ipusm <br /> Lorem ipusm</p></td>
-            <td>150%</td>
+            <td><p style={{lineHeight:150+'%',width:600+'px' }}>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br /> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></td>
+            <td style={{width:150+'px' }}>150%</td>
         </tr>
         <tr>
-            <td><p style={{lineHeight:250+'%' }}>Lorem ipusm <br /> Lorem ipusm</p></td>
-            <td>250%</td>
+            <td><p style={{lineHeight:250+'%',width:600+'px' }}>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br /> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></td>
+            <td style={{width:150+'px' }}>250%</td>
         </tr>
     </tbody>
 </table>

website/docs/3-Guidelines/2-colours.md

@@ -16,68 +16,56 @@ The color system is designed to generate themes that meet WCAG 2.1 compliant con
 ## Primary Colors
 <table style={{width:30+'%',float:'left'}} >
     <tbody>
-        <tr>
-            <td style={{backgroundColor:'#2E6173',width:200+'px',height:150+'px',textAlign:'center'}}>
-                <div style={{color:'white',width:100+'%',textAlign:'center',height:150+'px'}}>Metallic Blue <br />
-                #2E6173</div>
-            </td>            
-        </tr>
         <tr>
            <td style={{backgroundColor:'#007B6C',width:200+'px',height:150+'px',textAlign:'center'}}>
-                <div style={{color:'white',width:100+'%',textAlign:'center',height:150+'px'}}>Pine Green  <br />
+                <div style={{color:'white',width:100+'%',textAlign:'center',height:150+'px',display:'flex',flexDirection:'column',justifyContent:'center'}}>Pine Green  <br />
                 #007B6C</div>
             </td>            
         </tr>
         <tr>
            <td style={{backgroundColor:'#00928F',width:200+'px',height:150+'px',textAlign:'center'}}>
-                <div style={{color:'white',width:100+'%',textAlign:'center',height:150+'px'}}>Dark Cyan <br />
+                <div style={{color:'white',width:100+'%',textAlign:'center',height:150+'px',display:'flex',flexDirection:'column',justifyContent:'center'}}>Dark Cyan <br />
                 #00928F</div>
             </td>
         </tr>
         <tr>
            <td style={{backgroundColor:'#74CBC8',width:200+'px',height:150+'px',textAlign:'center'}}>
-                <div style={{color:'white',width:100+'%',textAlign:'center',height:150+'px'}}>Pearl Aqua  <br />
+                <div style={{color:'white',width:100+'%',textAlign:'center',height:150+'px',display:'flex',flexDirection:'column',justifyContent:'center'}}>Pearl Aqua  <br />
                 #74CBC8</div>
             </td>
         </tr>
         <tr>
            <td style={{backgroundColor:'#AEDFE8',width:200+'px',height:150+'px',textAlign:'center'}}>
-                <div style={{width:100+'%',height:150+'px'}}>Powder Blue <br />
+                <div style={{width:100+'%',height:150+'px',display:'flex',flexDirection:'column',justifyContent:'center'}}>Powder Blue <br />
                 #AEDFE8</div>
             </td>
         </tr>
     </tbody>
 </table>
 
 <table >
-    <tbody>
-        <tr>
-            <td style={{backgroundColor:'#0A3D61',width:200+'px',height:150+'px',textAlign:'center'}}>
-                <div style={{color:'white',width:100+'%',textAlign:'center',height:150+'px'}}>Dark Midnight Blue <br />
-                #0A3D61</div>
-            </td>            
-        </tr>
+    <tbody>        
         <tr>
            <td style={{backgroundColor:'#004B7F',width:200+'px',height:150+'px',textAlign:'center'}}>
-                <div style={{color:'white',width:100+'%',textAlign:'center',height:150+'px'}}>Dark Cerulean <br />
+                <div style={{color:'white',width:100+'%',textAlign:'center',height:150+'px',display:'flex',flexDirection:'column',justifyContent:'center'}}>Dark Cerulean <br />
                 #004B7F</div>
             </td>            
         </tr>
         <tr>
            <td style={{backgroundColor:'#0065A4',width:200+'px',height:150+'px',textAlign:'center'}}>
-                <div style={{color:'white',width:100+'%',textAlign:'center',height:150+'px'}}>Medium Persian Blue <br />
+                <div style={{color:'white',width:100+'%',textAlign:'center',height:150+'px',display:'flex',flexDirection:'column',justifyContent:'center'}}>Medium Persian Blue <br />
                 #0065A4</div>
             </td>
         </tr>
         <tr>
            <td style={{backgroundColor:'#478EA5',width:200+'px',height:150+'px',textAlign:'center'}}>
-                <div style={{color:'white',width:100+'%',textAlign:'center',height:150+'px'}}>Steel Blue <br />
+                <div style={{color:'white',width:100+'%',textAlign:'center',height:150+'px',display:'flex',flexDirection:'column',justifyContent:'center'}}>Steel Blue <br />
                 #478EA5</div>
             </td>
         </tr>
         <tr>
            <td style={{backgroundColor:'#75C9DB',width:200+'px',height:150+'px',textAlign:'center'}}>
-                <div style={{width:100+'%',height:150+'px'}}>Mid Blue <br />
+                <div style={{width:100+'%',height:150+'px',display:'flex',flexDirection:'column',justifyContent:'center'}}>Mid Blue <br />
                 #75C9DB</div>
             </td>
         </tr>
@@ -93,31 +81,31 @@ The color system is designed to generate themes that meet WCAG 2.1 compliant con
     <tbody>
         <tr>
             <td style={{backgroundColor:'#2E3E4C',width:200+'px',height:150+'px',textAlign:'center'}}>
-                <div style={{color:'white',width:100+'%',height:150+'px'}}>Japanese Indigo <br />
+                <div style={{color:'white',width:100+'%',height:150+'px',display:'flex',flexDirection:'column',justifyContent:'center'}}>Japanese Indigo <br />
                 #2E3E4C</div>
             </td>            
         </tr>
         <tr>
            <td style={{backgroundColor:'#3D5265',width:200+'px',height:150+'px',textAlign:'center'}}>
-                <div style={{color:'white',width:100+'%',height:150+'px'}}>Deep Blue  <br />
+                <div style={{color:'white',width:100+'%',height:150+'px',display:'flex',flexDirection:'column',justifyContent:'center'}}>Deep Blue  <br />
                 #3D5265</div>
             </td>            
         </tr>
         <tr>
            <td style={{backgroundColor:'#54728C',width:200+'px',height:150+'px',textAlign:'center'}}>
-                <div style={{color:'white',width:100+'%',height:150+'px'}}>UCLA Blue <br />
+                <div style={{color:'white',width:100+'%',height:150+'px',display:'flex',flexDirection:'column',justifyContent:'center'}}>UCLA Blue <br />
                 #54728C</div>
             </td>
         </tr>
         <tr>
            <td style={{backgroundColor:'#7495B2',width:200+'px',height:150+'px',textAlign:'center'}}>
-                <div style={{color:'white',width:100+'%',height:150+'px'}}>Weldon Blue  <br />
+                <div style={{color:'white',width:100+'%',height:150+'px',display:'flex',flexDirection:'column',justifyContent:'center'}}>Weldon Blue  <br />
                 #7495B2</div>
             </td>
         </tr>
         <tr>
            <td style={{backgroundColor:'#ACCAE5',width:200+'px',height:150+'px',textAlign:'center'}}>
-                <div style={{width:100+'%',height:150+'px'}}>Light Steel Blue  <br />
+                <div style={{width:100+'%',height:150+'px',display:'flex',flexDirection:'column',justifyContent:'center'}}>Light Steel Blue  <br />
                 #ACCAE5</div>
             </td>
         </tr>
@@ -129,31 +117,31 @@ The color system is designed to generate themes that meet WCAG 2.1 compliant con
     <tbody>
         <tr>
             <td style={{backgroundColor:'#000000',width:200+'px',height:150+'px',textAlign:'center'}}>
-                <div style={{color:'white',width:100+'%',height:150+'px'}}>Black  <br />
+                <div style={{color:'white',width:100+'%',height:150+'px',display:'flex',flexDirection:'column',justifyContent:'center'}}>Black  <br />
                 #000000</div>
             </td>            
         </tr>
         <tr>
            <td style={{backgroundColor:'#808285',width:200+'px',height:150+'px',textAlign:'center'}}>
-                <div style={{width:100+'%',height:150+'px'}}>Old Silver  <br />
+                <div style={{width:100+'%',height:150+'px',display:'flex',flexDirection:'column',justifyContent:'center'}}>Old Silver  <br />
                 #808285</div>
             </td>            
         </tr>
         <tr>
            <td style={{backgroundColor:'#BCBEC0',width:200+'px',height:150+'px',textAlign:'center'}}>
-                <div style={{width:100+'%',height:150+'px'}}>Mid Gray  <br />
+                <div style={{width:100+'%',height:150+'px',display:'flex',flexDirection:'column',justifyContent:'center'}}>Mid Gray  <br />
                 #BCBEC0</div>
             </td>
         </tr>
         <tr>
            <td style={{backgroundColor:'#E6E7E8',width:200+'px',height:150+'px',textAlign:'center'}}>
-                <div style={{width:100+'%',height:150+'px'}}>Silver Gray  <br />
+                <div style={{width:100+'%',height:150+'px',display:'flex',flexDirection:'column',justifyContent:'center'}}>Silver Gray  <br />
                 #E6E7E8</div>
             </td>
         </tr>
         <tr>
            <td style={{backgroundColor:'#F9F9F9',width:200+'px',height:150+'px',textAlign:'center'}}>
-                <div style={{width:100+'%',height:150+'px'}}>Ghost White <br />
+                <div style={{width:100+'%',height:150+'px',display:'flex',flexDirection:'column',justifyContent:'center'}}>Ghost White <br />
                 #F9F9F9</div>
             </td>
         </tr>
@@ -165,7 +153,7 @@ The color system is designed to generate themes that meet WCAG 2.1 compliant con
     <tbody>
         <tr>
             <td style={{color:'black',backgroundColor:'#FFFFFF',width:200+'px',height:150+'px',textAlign:'center'}}>
-                <div style={{width:100+'%',height:150+'px'}}>White <br />  #FFFFFF</div>
+                <div style={{width:100+'%',height:150+'px',display:'flex',flexDirection:'column',justifyContent:'center'}}>White <br />  #FFFFFF</div>
             </td>            
         </tr>        
     </tbody>

website/docs/3-Guidelines/5-spacing.md

@@ -10,30 +10,41 @@ The responsive layout grid is made up of three elements: columns, gutters, and m
 Content is placed in the areas of the screen that contain columns. The number of columns displayed in the grid is determined by the breakpoint range, a range of predetermined screen sizes. A breakpoint can correspond with mobile, tablet, or other screen type.
 
 ![](../md_components/static/grid1.png)
+<br />
 
 On mobile, at a breakpoint of 480px, this layout grid uses 4 columns.
 
-![](../md_components/static/grid2.png)
+![](../md_components/static/mobile_grid.png)
+
+<br />
 
 On tablet, at a breakpoint of 834px, this layout grid uses 8 columns.
 
-![](../md_components/static/grid3.png)
+![](../md_components/static/tablet_grid.png)   
 
+<br /> 
 On desktop, at a breakpoint of 1024px, this layout grid uses 12 columns.
 
-![](../md_components/static/grid4.png)
+![](../md_components/static/desktop_grid.png)
+
 ## Gutters
 
 A gutter is the space between columns that helps separate content. Gutter widths are fixed values at each breakpoint range. Wider gutters are more appropriate for larger screens, as they create more open space between columns.
+<br />
+
+On mobile, at a breakpoint of 480px, this layout grid uses 20px gutters.  
+![](../md_components/static/mobile_grid.png)   
+
+<br />
+
+On tablet, at a breakpoint of 7687px, this layout grid uses 20px gutters.  
+![](../md_components/static/tablet_grid.png)   
 
-![](../md_components/static/columns1.png)
-On mobile, at a breakpoint of 480px, this layout grid uses 20px gutters.
+<br />
 
-![](../md_components/static/columns2.png)
-On tablet, at a breakpoint of 7687px, this layout grid uses 20px gutters.
+On desktop, at a breakpoint of 1024px, this layout grid uses 20px gutters.   
+![](../md_components/static/desktop_grid.png)   
 
-![](../md_components/static/columns3.png)
-On desktop, at a breakpoint of 1024px, this layout grid uses 20px gutters.
 
 ## Don’ts
 
@@ -51,4 +62,4 @@ To ensure that layouts are visually balanced, most measurements align to 8px, wh
 Smaller elements, such as icons, can align to a 4px grid, while typography can fall on a 4px baseline grid, meaning that each line’s typographic baseline is spaced in increments of 4px from its neighbor.
 
 ![](../md_components/static/spacing1.png)
-![](../md_components/static/spacing2.png)
+![](../md_components/static/8px_spacing.png)

website/docs/4-Templates/0-intro.md

@@ -6,4 +6,4 @@ hide_table_of_contents: true
 
 # Templates
 
-The core website minimises the duplication of content across the European Commission services. The site hosts general information shared with many different websites or departments. The core website is the hub for users to navigate to other thematic content and/or specific services such as web information system.
+ The site hosts general information shared with many different websites or departments. The core website is the hub for users to navigate to other thematic content and/or specific services such as web information system.

website/docs/5-Components/8-Heading.mdx

@@ -0,0 +1,12 @@
+---
+title: Heading
+description: EEA Button Component
+hide_table_of_contents: true
+---
+
+import EEATabs from '../md_components/tab_component.mdx';
+import Usage from '../md_components/heading_components/usage_markdown.md';
+import Showcase from '../md_components/heading_components/showcase_markdown.md';
+import Api from '../md_components/heading_components/api_markdown.md';
+
+<EEATabs usage={<Usage />} showcase={<Showcase />}></EEATabs>

website/docs/md_components/heading_components/showcase_markdown.md

@@ -0,0 +1,3 @@
+import Iframe from '../iframe_component.mdx';
+
+<Iframe id='components-heading--default' > </Iframe>

website/docs/md_components/iframe_component.mdx

@@ -7,7 +7,7 @@ export function getUrl() {
 }
 
 <div className="frameWrapper">
-  <iframe
+  <iframe style={{height:300+'px'}}
     src={getUrl() + '/iframe.html?id=' + props.id}
     title="description"
   ></iframe>

website/docs/md_components/item_components/usage_markdown.md

@@ -0,0 +1 @@
+No specific UX guidelines

website/docs/md_components/radio_components/showcase_markdown.md

@@ -4,10 +4,12 @@ import Iframe from '../iframe_component.mdx';
 
 <Iframe id='components-forms-radio--default' > </Iframe>
 
+
 ## Invalid
 
 <Iframe id='components-forms-radio--invalid' > </Iframe>
 
+
 ## Binary
 
 <Iframe id='components-forms-radio--binary' > </Iframe>

website/docs/md_components/segment_components/usage_markdown.md

@@ -1,17 +1 @@
-Pagination component is the control to navigate through multiple pages.
-
-## Do's
-
-- place the pagination below the list of items
-
-## Don'ts
-
-- don't replace this component with an "infinite scrolling" feature
-
-## When to use
-
-- to show long lists otherwise redundant scrolling in one page
-
-## When not to use
-
-- don't use to break unrelated content on different pages
+No specific UX guidelines

website/docs/md_components/statistic_components/usage_markdown.md

@@ -1,17 +1 @@
-Pagination component is the control to navigate through multiple pages.
-
-## Do's
-
-- place the pagination below the list of items
-
-## Don'ts
-
-- don't replace this component with an "infinite scrolling" feature
-
-## When to use
-
-- to show long lists otherwise redundant scrolling in one page
-
-## When not to use
-
-- don't use to break unrelated content on different pages
+No specific UX guidelines

website/docs/md_components/text_input_components/showcase_markdown.md

@@ -1,3 +1,14 @@
 import Iframe from '../iframe_component.mdx';
 
+
+## Standard
 <Iframe id='components-forms-input--standard-input' > </Iframe>
+
+## Disabled
+<Iframe id='components-forms-input--disabled-input' > </Iframe>
+
+## Loading
+<Iframe id='components-forms-input--loading-input' > </Iframe>
+
+## Error
+<Iframe id='components-forms-input--error-input' > </Iframe>