Merge branch 'feature/UXW-981_foundation-pages'

pages/foundations/Color.mdx

@@ -1,5 +1,201 @@
-import { Meta } from '@storybook/blocks';
+
+
+import { Meta, Canvas, Controls, Source } from '@storybook/blocks';
+
+import {
+  CardHtml,
+  CardReact,
+  DesignTokensList,
+  Figma,
+  Figure,
+} from '../../blocks';
 
 <Meta title="Foundations/Color" />
 
 # Color
+
+Application of Color in Dalí is designed to be harmonious, ensure consistency, accessible text, and distinguish interface elements and components from one another.
+
+Color is also used to emphasize important information, to display different states or to add meaning and support design communication. 
+
+Dalí’s default palettes are derived from the Devo Style Guide to ensure we maintain our brand’s personality throughout the UI.
+
+## Palettes
+
+### Brand palettes
+
+The **primary palette** is used for the main action of the page. This means that there cannot be more than one action on the same page using this palette. It is used to mark active first-level navigation elements: active sections in the main menu and in the sub-section tabs located in the upper area. 
+
+Similarly, it is used to draw attention to certain elements or to add branding in certain contexts.
+
+<Figure spaceToTop>
+  <Figma aspectRatio='1x1' url="https://www.figma.com/file/4f9wa0fKYIwMue6yo6nrJL/Genesys-Design-System---Web-Previews?type=design&node-id=7274%3A6641&mode=design&t=O0arjG0dxvDqArcm-1" />
+</Figure>
+
+The **secondary palette** is used for other important actions of which there might be more than one per page. This covers elements that give feedback to the user such as progress bars and ranges, as well as active and/or selected statuses of forms or menu items: checkboxes, radios, switches, dropdown items, and so forth.
+
+<Figure spaceToTop>
+  <Figma aspectRatio='1x1' url="https://www.figma.com/file/4f9wa0fKYIwMue6yo6nrJL/Genesys-Design-System---Web-Previews?type=design&node-id=7274%3A7741&mode=design&t=O0arjG0dxvDqArcm-1" />
+</Figure>
+
+### UI palettes
+
+This palette is used to reflect the state or context of interface elements, such as an action or a user-feedback element.
+
+Typically, red represents danger or an error; orange represents a warning; and green represents normality or success. We also have information and help statuses in different shades of blue to give feedback or to define help blocks.
+
+#### Success
+
+<Figure spaceToTop>
+  <Figma aspectRatio='1x1' url="https://www.figma.com/file/4f9wa0fKYIwMue6yo6nrJL/Genesys-Design-System---Web-Previews?type=design&node-id=7274%3A9518&mode=design&t=O0arjG0dxvDqArcm-1" />
+</Figure>
+
+#### Warning
+
+<Figure spaceToTop>
+  <Figma aspectRatio='1x1' url="https://www.figma.com/file/4f9wa0fKYIwMue6yo6nrJL/Genesys-Design-System---Web-Previews?type=design&node-id=7274%3A11039&mode=design&t=O0arjG0dxvDqArcm-1" />
+</Figure>
+
+#### Error
+
+<Figure spaceToTop>
+  <Figma aspectRatio='1x1' url="https://www.figma.com/file/4f9wa0fKYIwMue6yo6nrJL/Genesys-Design-System---Web-Previews?type=design&node-id=7274%3A14228&mode=design&t=O0arjG0dxvDqArcm-1" />
+</Figure>
+
+#### Info
+
+<Figure spaceToTop>
+  <Figma aspectRatio='1x1' url="https://www.figma.com/file/4f9wa0fKYIwMue6yo6nrJL/Genesys-Design-System---Web-Previews?type=design&node-id=7274%3A14244&mode=design&t=O0arjG0dxvDqArcm-1" />
+</Figure>
+
+#### Help
+
+<Figure spaceToTop>
+  <Figma aspectRatio='1x1' url="https://www.figma.com/file/4f9wa0fKYIwMue6yo6nrJL/Genesys-Design-System---Web-Previews?type=design&node-id=7274%3A17159&mode=design&t=O0arjG0dxvDqArcm-1" />
+</Figure>
+
+### Neutral palettes
+
+This is usually used for generic texts, field borders in forms, separators, subtle backgrounds, non-highlighted actions, and so on. It is a shade of gray that is tinged by the brand color, and thus seeks to highlight the elements with sufficient contrast on the surfaces of the app.
+
+It also includes the palettes (blend) based on grayscale and transparency, which allows you to darken or lighten the text, border, or background, depending on the color scheme.
+
+<Figure spaceToTop>
+  <Figma aspectRatio='1x1' url="https://www.figma.com/file/4f9wa0fKYIwMue6yo6nrJL/Genesys-Design-System---Web-Previews?type=design&node-id=7274%3A13651&mode=design&t=RE4bbatEUXom8VAu-1" />
+</Figure>
+
+### Visualization palettes
+
+These palettes are aimed at data visualization (graphics) as well as feedback elements that are outside the scope of statuses (error, warning, success, etc.).
+
+#### Blue
+
+<Figure spaceToTop>
+  <Figma aspectRatio='16x9' url="https://www.figma.com/file/4f9wa0fKYIwMue6yo6nrJL/Genesys-Design-System---Web-Previews?type=design&node-id=7274%3A19773&mode=design&t=O0arjG0dxvDqArcm-1" />
+</Figure>
+
+#### Bronze
+
+<Figure spaceToTop>
+  <Figma aspectRatio='16x9' url="https://www.figma.com/file/4f9wa0fKYIwMue6yo6nrJL/Genesys-Design-System---Web-Previews?type=design&node-id=7274%3A21699&mode=design&t=O0arjG0dxvDqArcm-1" />
+</Figure>
+
+#### Green
+
+<Figure spaceToTop>
+  <Figma aspectRatio='16x9' url="https://www.figma.com/file/4f9wa0fKYIwMue6yo6nrJL/Genesys-Design-System---Web-Previews?type=design&node-id=7274%3A22750&mode=design&t=O0arjG0dxvDqArcm-1" />
+</Figure>
+
+#### Green
+
+<Figure spaceToTop>
+  <Figma aspectRatio='16x9' url="https://www.figma.com/file/4f9wa0fKYIwMue6yo6nrJL/Genesys-Design-System---Web-Previews?type=design&node-id=7274%3A22750&mode=design&t=O0arjG0dxvDqArcm-1" />
+</Figure>
+
+#### Teal
+
+<Figure spaceToTop>
+  <Figma aspectRatio='16x9' url="https://www.figma.com/file/4f9wa0fKYIwMue6yo6nrJL/Genesys-Design-System---Web-Previews?type=design&node-id=7274%3A23801&mode=design&t=O0arjG0dxvDqArcm-1" />
+</Figure>
+
+#### Sky
+
+<Figure spaceToTop>
+  <Figma aspectRatio='16x9' url="https://www.figma.com/file/4f9wa0fKYIwMue6yo6nrJL/Genesys-Design-System---Web-Previews?type=design&node-id=7274%3A24848&mode=design&t=O0arjG0dxvDqArcm-1" />
+</Figure>
+
+#### Slate
+
+<Figure spaceToTop>
+  <Figma aspectRatio='16x9' url="https://www.figma.com/file/4f9wa0fKYIwMue6yo6nrJL/Genesys-Design-System---Web-Previews?type=design&node-id=7274%3A24862&mode=design&t=O0arjG0dxvDqArcm-1" />
+</Figure>
+
+#### Indigo
+
+<Figure spaceToTop>
+  <Figma aspectRatio='16x9' url="https://www.figma.com/file/4f9wa0fKYIwMue6yo6nrJL/Genesys-Design-System---Web-Previews?type=design&node-id=7274%3A24876&mode=design&t=O0arjG0dxvDqArcm-1" />
+</Figure>
+
+#### Dusk
+
+<Figure spaceToTop>
+  <Figma aspectRatio='16x9' url="https://www.figma.com/file/4f9wa0fKYIwMue6yo6nrJL/Genesys-Design-System---Web-Previews?type=design&node-id=7274%3A24890&mode=design&t=O0arjG0dxvDqArcm-1" />
+</Figure>
+
+#### Purple
+
+<Figure spaceToTop>
+  <Figma aspectRatio='16x9' url="https://www.figma.com/file/4f9wa0fKYIwMue6yo6nrJL/Genesys-Design-System---Web-Previews?type=design&node-id=7274%3A29559&mode=design&t=O0arjG0dxvDqArcm-1" />
+</Figure>
+
+#### Magenta
+
+<Figure spaceToTop>
+  <Figma aspectRatio='16x9' url="https://www.figma.com/file/4f9wa0fKYIwMue6yo6nrJL/Genesys-Design-System---Web-Previews?type=design&node-id=7274%3A29573&mode=design&t=O0arjG0dxvDqArcm-1" />
+</Figure>
+
+#### Red
+
+<Figure spaceToTop>
+  <Figma aspectRatio='16x9' url="https://www.figma.com/file/4f9wa0fKYIwMue6yo6nrJL/Genesys-Design-System---Web-Previews?type=design&node-id=7274%3A29587&mode=design&t=O0arjG0dxvDqArcm-1" />
+</Figure>
+
+### Miscellany palettes
+
+The miscellaneous palettes will be used for all elements associated with very specific colors, such as links to social media, rating elements, and so forth.
+
+#### Rating
+
+<Figure>
+  <img
+    alt="Location of the 'status' icon button in a widget header"
+    src="https://img.freepik.com/free-photo/beautiful-aerial-shot-fronalpstock-mountains-switzerland-beautiful-pink-blue-sky_181624-9315.jpg?w=1380&t=st=1708008661~exp=1708009261~hmac=6709e70324b4ff7d38e25167f9f2887be86ce35b5adbf29040bdfa3e27eba099"
+  />
+</Figure>
+
+#### Social
+
+<Figure>
+  <img
+    alt="Location of the 'status' icon button in a widget header"
+    src="img/Social-2.png"
+  />
+</Figure>
+
+#### Share
+
+<Figure>
+  <img
+    alt="Location of the 'status' icon button in a widget header"
+    src="img/effect.jpg"
+  />
+</Figure>
+
+
+## Use of color by context
+
+The following table helps to decide which color palettes to use in the app, depending on the context of the element. Well-chosen colors help users to identify statuses, actions, and interactions. They also make it easy to locate help, differentiate between different types of information, and to understand which steps to take. A consistent use of color improves the user experience and requires less work on their part.
+
+<Figure spaceToTop>
+  <Figma aspectRatio='6x5' url="https://www.figma.com/file/4f9wa0fKYIwMue6yo6nrJL/Genesys-Design-System---Web-Previews?type=design&node-id=6980%3A6270&mode=design&t=RE4bbatEUXom8VAu-1" />
+</Figure>

pages/foundations/ElevationHierarchy.mdx

@@ -69,7 +69,7 @@ It's used for the App Bar, Side menu, Panel header, Rolling panel, Table header.
 ## Activated (level 2)
 
 This level is used for those actionable components that appear immediately after a specific interaction, and are usually
-positioned next to its trigger. It's used in the popper blocks as Dropdown, Inline Message, Select menu, Calendar... etc.
+positioned next to its trigger. It's used in the popper blocks as Dropdown, Inline Message, Select menu, Calendar, Tooltip... etc.
 
 <Story of={Stories.ElevationBoxActivatedLevel} />
 
@@ -81,15 +81,15 @@ positioned next to its trigger. It's used in the popper blocks as Dropdown, Inli
 
 ## Draggable (level 3)
 
-This level is used in those Panels and Windows that can be moved or repositioned across the screen.
+This level is used in those Panels and Windows that can be moved or repositioned across the screen. It's used in Draggable Window, Inline message draggable, etc.
 
 <Story of={Stories.ElevationBoxDraggableLevel} />
 
 ## Overlay (level 4)
 
 This level is used basically only in connection with Modals/Dialogs, which also has a background overlay with opacity.
 It can also be used if we want to reinforce the 'hover' event in those panels/windows that are previously at the
-'Draggable' level.
+'Draggable' level. It's used in Modal and Dialog.
 
 <Story of={Stories.ElevationBoxOverlayLevel} />
 
@@ -98,7 +98,7 @@ It can also be used if we want to reinforce the 'hover' event in those panels/wi
 ## Pop-out (level 5)
 
 This level determines the closest proximity to the user. It will be used mainly
-for notifications (Toast).
+for notifications. It's used in Toast message.
 
 <Story of={Stories.ElevationBoxPopOutLevel} />
 

pages/foundations/Iconography.mdx

@@ -1,5 +1,49 @@
-import { Meta } from '@storybook/blocks';
+import { Meta, Canvas, Controls, Source  } from '@storybook/blocks';
+
+import {
+  CardHtml,
+  CardReact,
+  DesignTokensList,
+  Figma,
+  Figure,
+} from '../../blocks';
 
 <Meta title="Foundations/Iconography" />
 
 # Iconography
+
+Icons are visual symbols used to represent concepts, objects, actions, processes... etc. They allow a quick communication and draw attention to specific information.
+
+<section className="mrow">
+  <div className="mcol-12 mcol-sm-6">
+    <p>
+    We use an Icon Library called [Ionicons](https://ionicons.com/) as base. When we can’t find there an icon which covers our needs, then we have to create a new one, but using as base an existing icon from the library with the same aspect ratio.
+</p>
+  </div>
+  <div className="mcol-12 mcol-sm-6">
+   <Figure>
+  <img
+    alt="Location of the 'status' icon button in a widget header"
+    src="img/iconography-1x1.png"
+  />
+</Figure>
+  </div>
+</section>
+## Icon sizes
+We can apply a very wide range of colours to our icons depending on their parent components, context, status... etc. but we should use always a size included in this limited range:
+
+<Figure>
+  <img
+    alt="Location of the 'status' icon button in a widget header"
+    src="img/icons.png"
+  />
+</Figure>
+
+## Use cases
+
+<Figure>
+  <img
+    alt="Location of the 'status' icon button in a widget header"
+    src="img/use-cases-iconography.jpg"
+  />
+</Figure>

pages/foundations/Layout.mdx

@@ -1,5 +1,74 @@
 import { Meta } from '@storybook/blocks';
 
+import {
+  CardHtml,
+  CardReact,
+  DesignTokensList,
+  Figma,
+  Figure,
+} from '../../blocks';
+
 <Meta title="Foundations/Layout" />
 
 # Layout
+
+We use it to place everything on a screen within the Devo Platform.
+
+<section className="mrow">
+  <div className="mcol-12 mcol-sm-6">
+It’s made up of different regions that define our Information Architecture. Each of them contains basic interaction, be it navigation, quick access to configurations, data sets, contents, etc.
+
+Dalí also offers different components when generating layouts, consistently and systematically. Each of them should be used according to the context of use.
+  </div>
+  <div className="mcol-12 mcol-sm-6">
+   <Figure>
+  <img
+    alt="Location of the 'status' icon button in a widget header"
+    src="img/layout-brand.png"
+  />
+</Figure>
+  </div>
+</section>
+
+## UI regions
+
+They represent the skeleton of the platform and the rest of the contents, components, navigations, etc. are placed on them. These areas are generated with the **“Grid”** component.
+
+<Figure spaceToTop>
+  <Figma aspectRatio='4x3' url="https://www.figma.com/file/4f9wa0fKYIwMue6yo6nrJL/Genesys-Design-System---Web-Previews?type=design&node-id=9887%3A38268&mode=design&t=RE4bbatEUXom8VAu-1" />
+</Figure>
+
+<section className="mrow">
+  <div className="mcol-12 mcol-sm-6">
+    <div className="mcol-12 mcol-sm-6">
+        1. Global region
+    </div>
+   <div className="mcol-12 mcol-sm-6">
+2. App header
+  </div>
+  </div>
+  <div className="mcol-12 mcol-sm-6">
+ <div className="mcol-12 mcol-sm-6">
+3. Leading region
+  </div>
+   <div className="mcol-12 mcol-sm-6">
+4. Main region
+  </div>
+  </div>
+</section>
+
+# Global region
+## Global region
+### Global region
+#### Global region
+##### Global region
+##### Global region
+The global region is reserved for the Devo sidebar and used as the main navigation within the platform.
+### App header
+The App header is reserved for the App bar and used as the first level navigation within a section. The App Bar can be replaced by specific Toolbars depending on the section (Data Search window, Activeboards, Flow). In these cases, the App bar options will be collapsed through a menu button on the right.
+### Leading region
+The leading region is primarily used for content navigation within a section that needs an additional level of depth.
+### Main region 
+The main region contains the main content of each section of the platform. Its internal structure is determined by a Fluid component.
+
+