EMULSIF-240: Convert Menus to support sdc

src/components/menus/breadcrumbs/breadcrumbs.component.yml

@@ -0,0 +1,20 @@
+$schema: https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json
+
+name: Breadcrumbs
+group: Components/Menus
+status: stable
+props:
+  type: object
+  required:
+    - breadcrumb
+  properties:
+    breadcrumb:
+      type: array
+      title: Breadcrumb items
+      description: The items of the breadcrumb.
+      data:
+        - url: '#'
+          text: 'Home'
+        - url: '#'
+          text: 'Parent Page'
+        - text: 'Current Page'

src/components/menus/inline/inline-menu.component.yml

@@ -0,0 +1,21 @@
+$schema: https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json
+
+name: Inline Menu
+group: Components/Menus
+status: stable
+props:
+  type: object
+  required:
+    - inline_menu_items
+  properties:
+    inline_menu_items:
+      type: array
+      title: Inline menu items
+      description: The items of the inline menu.
+      data:
+        - title: 'Test'
+          url: '#'
+        - title: 'Number 2'
+          url: '#'
+        - title: 'Item Number 3'
+          url: '#'

src/components/menus/main-menu/main-menu.component.yml

@@ -0,0 +1,53 @@
+$schema: https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json
+
+name: Main Menu
+group: Components/Menus
+status: stable
+props:
+  type: object
+  required:
+    - menu_items
+  properties:
+    menu_items:
+      type: array
+      title: Main menu items
+      description: The items of the main menu.
+      data:
+        - title: 'Academics'
+          url: '#'
+          below:
+            - title: 'Menu Item 1 Sub 1'
+              url: '#'
+            - title: 'Menu Item 1 Sub 2'
+              url: '#'
+              below:
+                - title: 'Menu Item 1 Sub Sub 1'
+                  url: '#'
+                - title: 'Menu Item 1 Sub Sub 2'
+                  url: '#'
+            - title: 'Menu Item 1 Sub 3'
+              url: '#'
+            - title: 'Menu Item 1 Sub 4'
+              url: '#'
+        - title: 'Admissions'
+          url: '#'
+          below:
+            - title: 'Menu Item 2 Sub 1'
+              url: '#'
+            - title: 'Menu Item 2 Sub 2'
+              url: '#'
+            - title: 'Menu Item 2 Sub 3'
+              url: '#'
+        - title: 'Research'
+          url: '#'
+          below:
+            - title: 'Menu Item 3 Sub 1'
+              url: '#'
+            - title: 'Menu Item 3 Sub 2'
+              url: '#'
+            - title: 'Menu Item 3 Sub 3'
+              url: '#'
+            - title: 'Menu Item 3 Sub 4'
+              url: '#'
+        - title: 'About'
+          url: '#'

src/components/menus/menus.stories.js

@@ -3,22 +3,29 @@ import inlineMenu from './inline/inline-menu.twig';
 import mainMenu from './main-menu/main-menu.twig';
 import socialMenu from './social-menu/social-menu.twig';
 
-import breadcrumbsData from './breadcrumbs/breadcrumbs.yml';
-import inlineMenuData from './inline/inline-menu.yml';
-import mainMenuData from './main-menu/main-menu.yml';
-import socialMenuData from './social-menu/social-menu.yml';
+import breadcrumbsDataProps from './breadcrumbs/breadcrumbs.component.yml';
+import inlineMenuDataProps from './inline/inline-menu.component.yml';
+import mainMenuDataProps from './main-menu/main-menu.component.yml';
+import socialMenuDataProps from './social-menu/social-menu.component.yml';
 
 import './main-menu/main-menu';
 
+const breadcrumbsData = breadcrumbsDataProps.props.properties.breadcrumb.data;
+const inlineMenuData =
+  inlineMenuDataProps.props.properties.inline_menu_items.data;
+const mainMenuData = mainMenuDataProps.props.properties.menu_items.data;
+const socialMenuData =
+  socialMenuDataProps.props.properties.social_menu_items.data;
+
 /**
  * Storybook Definition.
  */
 export default { title: 'Components/Menus' };
 
-export const breadcrumbs = () => breadcrumb(breadcrumbsData);
+export const breadcrumbs = () => breadcrumb({ breadcrumb: breadcrumbsData });
 
-export const inline = () => inlineMenu(inlineMenuData);
+export const inline = () => inlineMenu({ inline_menu_items: inlineMenuData });
 
-export const main = () => mainMenu(mainMenuData);
+export const main = () => mainMenu({ menu_items: mainMenuData });
 
-export const social = () => socialMenu(socialMenuData);
+export const social = () => socialMenu({ social_menu_items: socialMenuData });

src/components/menus/social-menu/social-menu.component.yml

@@ -0,0 +1,27 @@
+$schema: https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json
+
+name: Social Menu
+group: Components/Menus
+status: stable
+props:
+  type: object
+  required:
+    - social_menu_items
+  properties:
+    social_menu_items:
+      type: array
+      title: Social menu items
+      description: The items of the social menu.
+      data:
+        - title: 'Twitter'
+          url: '#'
+          icon: 'twitter'
+        - title: 'Facebook'
+          url: '#'
+          icon: 'facebook'
+        - title: 'Instagram'
+          url: '#'
+          icon: 'instagram'
+        - title: 'LinkedIn'
+          url: '#'
+          icon: 'linkedin'

src/components/tokens/_tokens.scss

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 05 Aug 2024 16:30:15 GMT
+ * Generated on Tue, 06 Aug 2024 19:11:43 GMT
  */
 
 :root {