wip

[scott-williams-az]

Links

• JIRA ticket
• Figma

There is still work to do, however the basic functionality is in place to allow mega menu to use new dropdown design

https://unity-uds-staging.s3.us-west-2.amazonaws.com/pr-1623/@asu/component-header-footer/index.html?path=/story/uds-asu-header--with-menu-columns

Developer Notes - changes to the prop structure
The sub item arrays are the main columns (that have a vertical line separator),

• To stack a heading insert type heading within the current sub-array (unlike previously heading always started a new array)
• Span is only used by the first item in each sub-array, this controls the width of the column. Any stacked heading will inherit the width of the column (heading 2 will have span width of 2)

Code and example image

const nav = [
  { href: "/", text: "Home", type: "icon-home", class: "home" },
  {
    href: "/",
    text: "ex",
    items: [
      [
        { href: "#", text: "heading 1", type: "heading", span: 2 },
        { href: "#", text: "..." },
        { href: "#", text: "..." },
        { href: "#", text: "heading 2", type: "heading" },
        { href: "#", text: "..." },
        { href: "#", text: "..." },
        { href: "#", text: "...", type: "button" },
      ],
      [
        { href: "#", text: "heading 3", type: "heading", span: 2 },
        { href: "#", text: "..." },
        { href: "#", text: "..." },
        { href: "#", text: "...", type: "button" },
      ],
      [
        { href: "#", text: "heading 4", type: "heading" },
        { href: "#", text: "..." },
        { href: "#", text: "..." },
        { href: "#", text: "heading 5", type: "heading" },
        { href: "#", text: "..." },
        { href: "#", text: "..." },
        { href: "#", text: "...", type: "button" },
      ],
    ]
  },
  // ...
];

[asu-jenkins-devops]

Storybook deployed at https://unity-uds-staging.s3.us-west-2.amazonaws.com/pr-1623/index.html

[davidornelas11]

I like the prop changes and array changes. its a WIP so not a big deal just throwing this out there so its know, the mobile view has the columns cutoff so theyre not full widh