Prettier changes on docusaurus

website/docs/0-intro.md

@@ -13,4 +13,4 @@ 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).
+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,8 +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.
@@ -17,4 +15,3 @@ All library elements are accompanied by:
 - HTML/CSS code for implementation
 
 New components are continuously being added to the library. The team is also constantly updating visual guidelines for designers in the Guidelines section, where we provide detailed information about design principles and resources.
-

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

@@ -2,6 +2,7 @@
 title: Intro
 order: 3
 ---
+
 The ECL v3 is the Commission's design system, created with a set of guiding principles that followed throughout the process.
 
 By following a user-centred design approach, the ECL is the result of in-depth research into the users' needs and goals, offering solutions that are assessed, tested and revised continuously.
@@ -11,4 +12,4 @@ These solutions are then standardised to offer:
 - **vocabulary**: a centralised UI promotes a shared understanding of components & terminology and thus fostering a collaborative flow across the organisation, regardless of discipline. This allows us to focus more on delivering, and less on back-and-forth communications
 - **consistency**: increase page performance by decreasing design inconsistencies. By offering our users layouts, components, symbols (icons) and general visual properties they are already familiar with, a consistent design system will decrease confusion and learning curves, while offering predictable patterns of user experience with recognisable interactions
 - **re-usability and flexibility**: already existing UI sub-components pieces can be reused to roll out new features or rearranged into new components. A flexible and adaptable system to the future needs of the organisation that simplifies the processing of requesting components features, fixing bugs and improving documentation
-- **accessibility**: given our broad audience, our content needs to be accessible to everyone. For this reason ECL follows inclusive design principles, regardless of ability, environment or situation
+- **accessibility**: given our broad audience, our content needs to be accessible to everyone. For this reason ECL follows inclusive design principles, regardless of ability, environment or situation

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

@@ -3,7 +3,6 @@ title: Typography
 order: 1
 ---
 
-
 Note: all values expressed in pixels are in fact dynamically converted from rem values. The conversion depends on the settings of your browser.
 
 ## Typeface
@@ -40,43 +39,34 @@ Line-length is the number of characters displayed in a single line. Lines that a
 
 ### Heading 1
 
-
-
 |         | Font size                                    | Line height                                   |
 | ------- | -------------------------------------------- | --------------------------------------------- |
 | mobile  | 3XL - 1.75rem - <RemToPixels rem="1.75" />px | 3XL UI - 2rem - <RemToPixels rem="2" />px     |
 | desktop | 4XL - 2rem - <RemToPixels rem="2" />px       | 4XL UI - 2.5rem - <RemToPixels rem="2.5" />px |
 
 ### Heading 2
 
-
-
 |         | Font size                                    | Line height                                     |
 | ------- | -------------------------------------------- | ----------------------------------------------- |
 | mobile  | 2XL - 1.5rem - <RemToPixels rem="1.5" />px   | 2XL UI - 1.75rem - <RemToPixels rem="1.75" />px |
 | desktop | 3XL - 1.75rem - <RemToPixels rem="1.75" />px | 3XL UI - 2rem - <RemToPixels rem="2" />px       |
 
 ### Heading 3
 
-
 |         | Font size                                   | Line height                                     |
 | ------- | ------------------------------------------- | ----------------------------------------------- |
 | mobile  | XL - 1.25rem - <RemToPixels rem="1.25" />px | XL UI - 1.5rem - <RemToPixels rem="1.5" />px    |
 | desktop | 2XL - 1.5rem - <RemToPixels rem="1.5" />px  | 2XL UI - 1.75rem - <RemToPixels rem="1.75" />px |
 
 ### Heading 4
 
-
-
 |         | Font size                                    | Line height                                           |
 | ------- | -------------------------------------------- | ----------------------------------------------------- |
 | mobile  | L - 1.125rem - <RemToPixels rem="1.125" />px | L Prolonged - 1.75rem - <RemToPixels rem="1.75" />px  |
 | desktop | XL - 1.25rem - <RemToPixels rem="1.25" />px  | XL Prolonged - 1.75rem - <RemToPixels rem="1.75" />px |
 
 ### Heading 5
 
-
-
 |                  | Font size                            | Line height                                        |
 | ---------------- | ------------------------------------ | -------------------------------------------------- |
 | mobile & desktop | M - 1rem - <RemToPixels rem="1" />px | M Prolonged - 1.5rem - <RemToPixels rem="1.5" />px |
@@ -87,33 +77,25 @@ Line-length is the number of characters displayed in a single line. Lines that a
 
 ### Lead paragraph
 
-
-
 |         | Font size                                    | Line height                                           |
 | ------- | -------------------------------------------- | ----------------------------------------------------- |
 | mobile  | L - 1.125rem - <RemToPixels rem="1.125" />px | L Prolonged - 1.75rem - <RemToPixels rem="1.75" />px  |
 | desktop | XL - 1.25rem - <RemToPixels rem="1.25" />px  | XL Prolonged - 1.75rem - <RemToPixels rem="1.75" />px |
 
 ### Medium paragraph
 
-
-
 |                  | Font size                            | Line height                                        |
 | ---------------- | ------------------------------------ | -------------------------------------------------- |
 | mobile & desktop | M - 1rem - <RemToPixels rem="1" />px | M Prolonged - 1.5rem - <RemToPixels rem="1.5" />px |
 
 ### Small paragraph
 
-
-
 |                  | Font size                                    | Line height                                          |
 | ---------------- | -------------------------------------------- | ---------------------------------------------------- |
 | mobile & desktop | S - 0.875rem - <RemToPixels rem="0.875" />px | S Prolonged - 1.25rem - <RemToPixels rem="1.25" />px |
 
 ### Extra Small paragraph
 
-
-
 |                  | Font size                                   | Line height                                           |
 | ---------------- | ------------------------------------------- | ----------------------------------------------------- |
-| mobile & desktop | XS - 0.75rem - <RemToPixels rem="0.75" />px | XS Prolonged - 1.25rem - <RemToPixels rem="1.25" />px |
+| mobile & desktop | XS - 0.75rem - <RemToPixels rem="0.75" />px | XS Prolonged - 1.25rem - <RemToPixels rem="1.25" />px |

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

@@ -3,25 +3,18 @@ title: Colours
 order: 2
 ---
 
-
 The colour palette is designed to support a flexible, modular visual style that feels connected across EC and EU websites and platforms. The intent of the palette is to **convey a united and open European spirit**, and leave users feeling welcome and in good hands.
 
 ## Primary colours
 
 The **primary colour palette** is comprised of blues, yellows and greys. These colours are present accross all pages and, together with the neutral white, they make up for about 80% of the colours in the page layout. Use these colours to **create consistency** and a strong **visual hierarchy** throughout the page.
 
-
-
 ### Variations
 
-
-
 ## Notification colours
 
 The secondary colour palette is mainly used for notification colours. The secondary colours should make up 20% or less of the colour in the layout and should be used sparingly to highlight important information and calls to action.
 
-
 ## Background colour
 
 White is the background colour of the EC-website.
-

website/docs/3-Guidelines/3-images.md

@@ -93,4 +93,4 @@ To have actual plus sign icon rendered correctly, replace the `/component-librar
 
 - don't apply effects, gradients, borders or filters. It can make the picture look manipulated
 - don't pick photos with frames, rounded corners or drop shadows
-- cropping. Pay attention to the copyright. In some cases you need prior consent from the author to alter the image
+- cropping. Pay attention to the copyright. In some cases you need prior consent from the author to alter the image

website/docs/3-Guidelines/4-iconography.md

@@ -3,15 +3,8 @@ title: Iconography
 order: 5
 ---
 
-
-
 ## ECL EC icons
 
-
-
 ## Social media icons
 
-
-
 ## Flag icons
-

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

@@ -3,8 +3,6 @@ title: Spacing
 order: 6
 ---
 
-
-
 ## Two spacing scales
 
 ECL provides two separate sets of scales:
@@ -60,4 +58,4 @@ Whenever we need a fixed horizontal or vertical spacing to place components in a
 
 ## When not to use
 
-- do not use when you want to have responsive spacing since the token are fixed values
+- do not use when you want to have responsive spacing since the token are fixed values

website/docs/5-Components/0-Accordion.mdx

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

website/docs/5-Components/1-Breadcrumb.md

@@ -9,5 +9,5 @@ import Usage from '../md_components/breadcrumb_components/usage_markdown.md';
 import Showcase from '../md_components/breadcrumb_components/showcase_markdown.md';
 
 <Tabs usage={<Usage />} showcase={<Showcase />} banana={false}>
-  
-</Tabs>
+
+</Tabs>

website/docs/5-Components/2-Buttons.md

@@ -3,10 +3,11 @@ title: Buttons
 description: EEA Button Component
 hide_table_of_contents: true
 ---
+
 import Tabs from '../md_components/tab_component.mdx';
 import ButtonUsage from '../md_components/button_components/usage_markdown.md';
 import ButtonShowcase from '../md_components/button_components/showcase_markdown.md';
 
 <Tabs usage={<ButtonUsage />} showcase={<ButtonShowcase />}>
-  
-</Tabs> 
+
+</Tabs>

website/docs/5-Components/6-Messages.md

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

website/docs/5-Components/7-Tables.md

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

website/docs/5-Components/9-Forms/0-TextInput.mdx

@@ -8,6 +8,4 @@ import EEATabs from '../../md_components/tab_component.mdx';
 import Usage from '../../md_components/text_input_components/usage_markdown.md';
 import Showcase from '../../md_components/text_input_components/showcase_markdown.md';
 
-<EEATabs usage={<Usage />} showcase={<Showcase />}  >
-
-</EEATabs>
+<EEATabs usage={<Usage />} showcase={<Showcase />}></EEATabs>

website/docs/5-Components/9-Forms/1-FocusInput.mdx

@@ -8,6 +8,4 @@ import EEATabs from '../../md_components/tab_component.mdx';
 import Usage from '../../md_components/focus_input_components/usage_markdown.md';
 import Showcase from '../../md_components/focus_input_components/showcase_markdown.md';
 
-<EEATabs usage={<Usage />} showcase={<Showcase />}  >
-
-</EEATabs>
+<EEATabs usage={<Usage />} showcase={<Showcase />}></EEATabs>

website/docs/md_components/accordion_components/api_markdown.md

@@ -23,4 +23,3 @@ Use the `ECL` library's `autoInit()` (`ECL.autoInit()`) when your page is ready
 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/accordion_components/showcase_markdown.md

@@ -1,3 +1,3 @@
 import Iframe from '../iframe_component.mdx';
 
-<Iframe id='components-accordion--default&args=variant:styled;fluid:false;styled:false' > </Iframe>
+<Iframe id='components-accordion--default&args=variant:styled;fluid:false;styled:false' > </Iframe>

website/docs/md_components/breadcrumb_components/showcase_markdown.md

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

website/docs/md_components/breadcrumb_components/usage_markdown.md

@@ -1 +1 @@
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

website/docs/md_components/card_components/showcase_markdown.md

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

website/docs/md_components/focus_input_components/showcase_markdown.md

@@ -1,3 +1,3 @@
 import Iframe from '../iframe_component.mdx';
 
-<Iframe id='components-forms-input--focus-input' > </Iframe>
+<Iframe id='components-forms-input--focus-input' > </Iframe>

website/docs/md_components/iframe_component.mdx

@@ -3,12 +3,12 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 export function getUrl() {
   const { siteConfig } = useDocusaurusContext();
   const { customFields } = siteConfig;
-  return customFields.storyBookUrl
+  return customFields.storyBookUrl;
 }
 
 <div className="frameWrapper">
   <iframe
-    src={ getUrl() + '/iframe.html?id=' + props.id}
+    src={getUrl() + '/iframe.html?id=' + props.id}
     title="description"
   ></iframe>
 </div>

website/docs/md_components/label_components/showcase_markdown.md

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

website/docs/md_components/list_components/showcase_markdown.md

@@ -1,3 +1,3 @@
 import Iframe from '../iframe_component.mdx';
 
-<Iframe id='components-list-orderedlist--description' > </Iframe>
+<Iframe id='components-list-orderedlist--description' > </Iframe>

website/docs/md_components/message_components/api_markdown.md

@@ -28,4 +28,3 @@ Use the `ECL` library's `autoInit()` (`ECL.autoInit()`) when your page is ready
 Get target element, create an instance and invoke `init()`.
 
 Given you have 1 element with an attribute `data-ecl-message` on the page:
-

website/docs/md_components/message_components/showcase_markdown.md

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

website/docs/md_components/message_components/usage_markdown.md

@@ -8,7 +8,7 @@ Messages component contains important information to alert users to take a certa
 ## Don'ts
 
 - overuse messages - users may ignore them and they can get in the way of a user completing their task
-- write messages that are neutral. For example, instead of *The postal code you entered is invalid,* the message should say *Please enter a valid postal code*
+- write messages that are neutral. For example, instead of _The postal code you entered is invalid,_ the message should say _Please enter a valid postal code_
 
 ## When to use
 

website/docs/md_components/tab_component.mdx

@@ -14,10 +14,7 @@ export function getValues(args) {
   return values;
 }
 
-<Tabs
-  defaultValue="usage"
-  values={getValues(props)}
->
+<Tabs defaultValue="usage" values={getValues(props)}>
   <TabItem value="usage">{props.usage}</TabItem>
   <TabItem value="showcase">{props.showcase}</TabItem>
   <TabItem value="api">{props.api}</TabItem>

website/docs/md_components/table_components/showcase_markdown.md

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

website/docs/md_components/text_input_components/showcase_markdown.md

@@ -1,3 +1,3 @@
 import Iframe from '../iframe_component.mdx';
 
-<Iframe id='components-forms-input--standard-input' > </Iframe>
+<Iframe id='components-forms-input--standard-input' > </Iframe>