added page-header,footer and grid in docusaurus

rest are prettier changes

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

@@ -3,4 +3,4 @@ title: Intro
 ---
 
 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.md

@@ -6,19 +6,18 @@ order: 1
 ## Primary Font: Roboto
 
 ## Web Safe Font: Arial
+
 We use Arial as an alternative font. It is similar in character and style to Roboto typeface and is a commonly available system font.
 We set 16px (1rem) as the base font size for body text to ensure readability. It is the default font size for most browsers.
 
-
-
-
-
 ## Weight
+
 Font weight is the thickness of a font's stroke, with various weights used to differentiate content hierarchy. The bold style emphasizes the importance in comparison with the regular font style in the font family. We use 400 for regular and 600 for bold. Usually, the bold style is assigned to headings. Regular text is used for body text.
 
 ## 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.
 
+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.
 
 ## Line length
+
 Line-length is the number of characters displayed in a single line. Lines that are too long or too short can distract readers. For readability, limit to no more than 80 characters including spaces for desktop. Line length for mobile is recommended to use 40 to 60 characters including space per line.

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

@@ -4,11 +4,11 @@ order: 2
 ---
 
 ## Principles
+
 ## Communication is key
 
 Although we value an aesthetically pleasing use of color, clear communication is our focus. We use colors to support the purpose of the content, communicating things like hierarchy of information, interactive states, and the difference between distinct elements.
 
-
 ## Colors follow accessibility guidelines
 
 The color system is designed to generate themes that meet WCAG 2.1 compliant contrast ratios. This makes things easier to find, identify, and interact with. It also makes the whole experience more accessible for visitors who are color blind or who have low vision. However, you should never convey information using color alone.

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

@@ -4,43 +4,38 @@ order: 6
 ---
 
 The responsive layout grid is made up of three elements: columns, gutters, and margins.
- 
+
 ## Columns
+
 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.
-
-On mobile, at a breakpoint of 480px, this layout grid uses 4 columns.
 
+On mobile, at a breakpoint of 480px, this layout grid uses 4 columns.
 
-
 On tablet, at a breakpoint of 768px, this layout grid uses 8 columns.
 
-
 On desktop, at a breakpoint of 1024px, this layout grid uses 12 columns.
 
 ## 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.
-
 
+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.
 
-
 On mobile, at a breakpoint of 480px, this layout grid uses 20px gutters.
- 
+
 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.
 
+On desktop, at a breakpoint of 1024px, this layout grid uses 20px gutters.
 
 ## Don’ts
-
-Do not make gutters too large or the same width as the columns. Oversized gutters will not leave enough room for content and may prevent a layout from appearing unified.
 
+Do not make gutters too large or the same width as the columns. Oversized gutters will not leave enough room for content and may prevent a layout from appearing unified.
 
 ## Breakpoints
+
 A breakpoint is the screen size threshold determined by specific layout requirements. At a given breakpoint range, the layout adjusts to suit the screen size and orientation.
 ΕΕΑ provides responsive layouts based on 4-column, 8-column, and 12-column grids, available for use across different screens, devices, and orientations.
 Each breakpoint range determines the number of columns, and recommended margins and gutters for each display size.
 
-
 ## Spacing
+
 To ensure that layouts are visually balanced, most measurements align to 8px, which corresponds to both spacing and the overall layout. Components are sized in 8px increments, ensuring a consistent visual rhythm across each screen.
 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.

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

@@ -0,0 +1,9 @@
+---
+title: Intro
+description: EEA Button Component
+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.

website/docs/4-Templates/1-PageHeader.mdx

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

website/docs/4-Templates/2-Grid/0-ComponentGrid.mdx

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

website/docs/4-Templates/2-Grid/1-LayoutGrid.mdx

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

website/docs/4-Templates/3-PageFooter.mdx

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

website/docs/5-Components/1-Blockquote.mdx

@@ -9,4 +9,4 @@ import Usage from '../md_components/blockquote_components/usage_markdown.md';
 import Showcase from '../md_components/blockquote_components/showcase_markdown.md';
 import Api from '../md_components/blockquote_components/api_markdown.md';
 
-<EEATabs usage={<Usage />} showcase={<Showcase />} ></EEATabs>
+<EEATabs usage={<Usage />} showcase={<Showcase />}></EEATabs>

website/docs/5-Components/13-Logo.mdx

@@ -9,4 +9,4 @@ import Usage from '../md_components/logo_components/usage_markdown.md';
 import Showcase from '../md_components/logo_components/showcase_markdown.md';
 import Api from '../md_components/logo_components/api_markdown.md';
 
-<EEATabs usage={<Usage />} showcase={<Showcase />} ></EEATabs>
+<EEATabs usage={<Usage />} showcase={<Showcase />}></EEATabs>

website/docs/5-Components/14-Media-Container/0-Image.mdx

@@ -9,4 +9,4 @@ import Usage from '../../md_components/media_container_image_components/usage_ma
 import Showcase from '../../md_components/media_container_image_components/showcase_markdown.md';
 import Api from '../../md_components/media_container_image_components/api_markdown.md';
 
-<EEATabs usage={<Usage />} showcase={<Showcase />} ></EEATabs>
+<EEATabs usage={<Usage />} showcase={<Showcase />}></EEATabs>

website/docs/5-Components/5-Comment.mdx

@@ -9,4 +9,4 @@ import Usage from '../md_components/comment_components/usage_markdown.md';
 import Showcase from '../md_components/comment_components/showcase_markdown.md';
 import Api from '../md_components/comment_components/api_markdown.md';
 
-<EEATabs usage={<Usage />} showcase={<Showcase />} ></EEATabs>
+<EEATabs usage={<Usage />} showcase={<Showcase />}></EEATabs>

website/docs/5-Components/6-Confirm.mdx

@@ -9,4 +9,4 @@ import Usage from '../md_components/confirm_components/usage_markdown.md';
 import Showcase from '../md_components/confirm_components/showcase_markdown.md';
 import Api from '../md_components/confirm_components/api_markdown.md';
 
-<EEATabs usage={<Usage />} showcase={<Showcase />} ></EEATabs>
+<EEATabs usage={<Usage />} showcase={<Showcase />}></EEATabs>

website/docs/5-Components/7-Header.mdx

@@ -9,4 +9,4 @@ import Usage from '../md_components/header_components/usage_markdown.md';
 import Showcase from '../md_components/header_components/showcase_markdown.md';
 import Api from '../md_components/header_components/api_markdown.md';
 
-<EEATabs usage={<Usage />} showcase={<Showcase />} ></EEATabs>
+<EEATabs usage={<Usage />} showcase={<Showcase />}></EEATabs>

website/docs/md_components/blockquote_components/usage_markdown.md

@@ -1,4 +1,3 @@
-
 The blockquotes component is used to capture users' attention of an excerpt, testimonial, or a quote cited from the article or other sources. The design style makes the quoted section more distinguishable than the rest of the content in the web page.
 
 ## Do's
@@ -18,4 +17,4 @@ The blockquotes component is used to capture users' attention of an excerpt, tes
 
 ## When not to use
 
-- for the purpose of emphasising text style
+- for the purpose of emphasising text style

website/docs/md_components/breadcrumb_components/api_markdown.md

@@ -43,4 +43,4 @@ Given you have 1 element with an attribute `data-ecl-breadcrumb-core` on the pag
 var elt = document.querySelector('[data-ecl-breadcrumb-core]');
 var breadcrumb = new ECL.BreadcrumbCore(elt);
 breadcrumb.init();
-```
+```

website/docs/md_components/breadcrumb_components/showcase_markdown.md

@@ -1,8 +1,9 @@
 import Iframe from '../iframe_component.mdx';
 
 ## Default
-<Iframe id='components-breadcrumb-breadcrumb-2--default' > </Iframe>
 
+<Iframe id='components-breadcrumb-breadcrumb-2--default' > </Iframe>
 
 ## Icons
-<Iframe id='components-breadcrumb-breadcrumb-1--breadcrumb' > </Iframe>
+
+<Iframe id='components-breadcrumb-breadcrumb-1--breadcrumb' > </Iframe>

website/docs/md_components/breadcrumb_components/usage_markdown.md

@@ -1,9 +1,10 @@
 ---
 title: Usage
 ---
+
 The Breadcrumb informs the users on their current location relative to the homepage of the website and allows them to navigate to higher levels. It is a series links except the last item in the group, which is the current page.
 
-### Dos 
+### Dos
 
 - the first element of the breadcrumb must always be labelled "Home" and must link to the homepage of the actual site where the current user page is located
 
@@ -17,4 +18,4 @@ The Breadcrumb informs the users on their current location relative to the homep
 
 ### When not to use
 
-- if your website's navigational structure has less than 3 levels of depth
+- if your website's navigational structure has less than 3 levels of depth

website/docs/md_components/button_components/usage_markdown.md

@@ -38,11 +38,16 @@ Use for medium-emphasis actions. They contain actions that are important but are
 - Do not use for navigation
 - Don't use an icon when it is not relevant or necessary to the action
 
-# Text link Button 
+# Text link Button
+
 Use for low-emphasis actions or for buttons that could have a long length text. It can be grouped with other buttons or placed independently.
+
 ## When to use
+
 - use with low emphasis in a button group
 - use on pages/cards when the main focus should be the content and not the button
 - when there is a single action intended
+
 ## When not to use
+
 - do not use for navigation purpose

website/docs/md_components/checkbox_components/showcase_markdown.md

@@ -1,13 +1,17 @@
 import Iframe from '../iframe_component.mdx';
 
 ## Default
+
 <Iframe id='components-forms-checkbox--default' > </Iframe>
 
 ## Invalid
+
 <Iframe id='components-forms-checkbox--invalid' > </Iframe>
 
 ## Optional
+
 <Iframe id='components-forms-checkbox--optional' > </Iframe>
 
 ## Single
-<Iframe id='components-forms-checkbox--single' > </Iframe>
+
+<Iframe id='components-forms-checkbox--single' > </Iframe>

website/docs/md_components/checkbox_components/usage_markdown.md

@@ -1,6 +1,7 @@
 ---
 title: Usage
 ---
+
 The checkbox is a form input for users to choose one or more options from the list of selections.
 
 ## Dos
@@ -31,4 +32,4 @@ The checkbox is a form input for users to choose one or more options from the li
 ## When not to use
 
 - do not use it when you have mutually exclusive items
-- do not use it if the checkbox selection will perform an action
+- do not use it if the checkbox selection will perform an action

website/docs/md_components/component_grid_components/api_markdown.md

@@ -0,0 +1,25 @@
+## API
+
+<AccordionJSDoc />
+
+## Setup
+
+There are 2 ways to initialise the component.
+
+### Automatic
+
+Add `data-ecl-auto-init="Accordion"` attribute to component's markup:
+
+```html
+<div class="ecl-accordion" data-ecl-accordion data-ecl-auto-init="Accordion">
+  ...
+</div>
+```
+
+Use the `ECL` library's `autoInit()` (`ECL.autoInit()`) when your page is ready or other custom event you want to hook onto.
+
+### Manual
+
+Get target element, create an instance and invoke `init()`.
+
+Given you have 1 element with an attribute `data-ecl-accordion` on the page:

website/docs/md_components/component_grid_components/showcase_markdown.md

@@ -0,0 +1,9 @@
+import Iframe from '../iframe_component.mdx';
+
+## Default
+
+<Iframe id='layout-grid-component-grid--default' style="height:600px!important;" > </Iframe>
+
+## Example
+
+<Iframe id='layout-grid-component-grid--example' style="height:600px!important;" > </Iframe>

website/docs/md_components/component_grid_components/usage_markdown.md

@@ -0,0 +1,38 @@
+---
+title: Grid
+---
+
+## The grid:
+
+- containers are required when using our default grid system as they are the most basic layout elements, representing a means to horizontally align components or content elements - this is done by invoking `.ecl-container`
+- the column classes **express the number of columns to be engaged out of the maximum**, which is 12 per row (such as an element invoking `.ecl-col-2` occupies two columns)
+- **container widths and breakpoints are expressed in pixels**
+- each column has **horizontal padding (gutter) for regulating the space between** them
+- **the gutters are expressed in rems**
+- **the width of the columns is always proportional to the container width**, which is fixed (except for viewports <480px), and they are expressed in percentages
+- the rows wrap around the columns, allowing you to specify the amount of columns content wraps around
+
+## ECL Grid Options
+
+The grid's breakpoints are established on the minimum width media queries, therefore the are applied on the targeted breakpoint and all those above it.
+
+| viewport        | Extra small (≥ 0px) | Small (≥ 480px) | Medium (≥ 768px) | Large (≥ 996px) | Extra large (≥ 1140px) |
+| --------------- | ------------------- | --------------- | ---------------- | --------------- | ---------------------- |
+| container width | 100%                | 480px           | 768px            | 996px           | 1140px                 |
+| class prefix    | `.ecl-col-`         | `.ecl-col-s-`   | `.ecl-col-m-`    | `.ecl-col-l-`   | `.ecl-col-xl-`         |
+
+## ECL Grid Examples
+
+## Grid offset
+
+When using the ECL grid, there is the ability to offset columns. You can offset columns from left to right by invoking the `.ecl-offset-*` classes (where \* = the number of columns). These classes simply increase the left margin by \* number of columns.
+
+## Do's
+
+- always place content within columns
+- specify the exact amount of columns content must occupy
+- use **`.ecl-offset-*` grid classes** for **offsetting content**
+
+## Don'ts
+
+- don't use margin to offset content

website/docs/md_components/dropdown_components/api_markdown.md

@@ -2,7 +2,6 @@
 title: API
 ---
 
-
 ## API
 
 <SelectJSDoc />
@@ -34,6 +33,6 @@ It's also possible to use the `Select`'s `autoInit` method and pass specific lab
 ```js
 var select = ECL.Select.autoInit(
   document.querySelector('[data-ecl-select-multiple]'),
-  { defaultText: 'string', searchText: 'string', selectAllText: 'string' }
+  { defaultText: 'string', searchText: 'string', selectAllText: 'string' },
 );
-```
+```

website/docs/md_components/dropdown_components/showcase_markdown.md

@@ -1,5 +1,5 @@
 import Iframe from '../iframe_component.mdx';
 
 ## Default
-<Iframe id='components-forms-dropdown--default' > </Iframe>
 
+<Iframe id='components-forms-dropdown--default' > </Iframe>