diff --git a/site/components/__tests__/__snapshots__/site-header.test.tsx.snap b/site/components/__tests__/__snapshots__/site-header.test.tsx.snap index d6f1f0c47c..3ea090dd68 100644 --- a/site/components/__tests__/__snapshots__/site-header.test.tsx.snap +++ b/site/components/__tests__/__snapshots__/site-header.test.tsx.snap @@ -976,6 +976,7 @@ exports[`SiteHeader has first item highlighted (About) if we are on a section wi .emotion-141>ul { box-sizing: border-box; + position: relative; list-style-type: none; margin: 0; padding: 0; @@ -1015,14 +1016,13 @@ exports[`SiteHeader has first item highlighted (About) if we are on a section wi -ms-flex-align: center; align-items: center; padding: 12px 16px; - width: 100%; min-width: 80px; min-height: 80px; box-sizing: border-box; -webkit-text-decoration: none; text-decoration: none; min-height: 80px; - min-width: auto; + min-width: 80px; cursor: default; overflow: hidden; border: none; @@ -1037,6 +1037,7 @@ exports[`SiteHeader has first item highlighted (About) if we are on a section wi border-width: 4px; border-style: solid; cursor: pointer; + width: 100%; color: #3358CC; -webkit-text-decoration: none; text-decoration: none; @@ -1148,14 +1149,13 @@ exports[`SiteHeader has first item highlighted (About) if we are on a section wi -ms-flex-align: center; align-items: center; padding: 12px 16px; - width: 100%; min-width: 80px; min-height: 80px; box-sizing: border-box; -webkit-text-decoration: none; text-decoration: none; min-height: 80px; - min-width: auto; + min-width: 80px; cursor: default; overflow: hidden; border: none; @@ -1170,6 +1170,7 @@ exports[`SiteHeader has first item highlighted (About) if we are on a section wi border-width: 4px; border-style: solid; cursor: pointer; + width: 100%; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; @@ -4030,6 +4031,7 @@ exports[`SiteHeader has first item highlighted (About) if we are on the /about s .emotion-141>ul { box-sizing: border-box; + position: relative; list-style-type: none; margin: 0; padding: 0; @@ -4069,14 +4071,13 @@ exports[`SiteHeader has first item highlighted (About) if we are on the /about s -ms-flex-align: center; align-items: center; padding: 12px 16px; - width: 100%; min-width: 80px; min-height: 80px; box-sizing: border-box; -webkit-text-decoration: none; text-decoration: none; min-height: 80px; - min-width: auto; + min-width: 80px; cursor: default; overflow: hidden; border: none; @@ -4091,6 +4092,7 @@ exports[`SiteHeader has first item highlighted (About) if we are on the /about s border-width: 4px; border-style: solid; cursor: pointer; + width: 100%; color: #3358CC; -webkit-text-decoration: none; text-decoration: none; @@ -4202,14 +4204,13 @@ exports[`SiteHeader has first item highlighted (About) if we are on the /about s -ms-flex-align: center; align-items: center; padding: 12px 16px; - width: 100%; min-width: 80px; min-height: 80px; box-sizing: border-box; -webkit-text-decoration: none; text-decoration: none; min-height: 80px; - min-width: auto; + min-width: 80px; cursor: default; overflow: hidden; border: none; @@ -4224,6 +4225,7 @@ exports[`SiteHeader has first item highlighted (About) if we are on the /about s border-width: 4px; border-style: solid; cursor: pointer; + width: 100%; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; @@ -7084,6 +7086,7 @@ exports[`SiteHeader has no highlighted items if we are on the homepage 1`] = ` .emotion-141>ul { box-sizing: border-box; + position: relative; list-style-type: none; margin: 0; padding: 0; @@ -7123,14 +7126,13 @@ exports[`SiteHeader has no highlighted items if we are on the homepage 1`] = ` -ms-flex-align: center; align-items: center; padding: 12px 16px; - width: 100%; min-width: 80px; min-height: 80px; box-sizing: border-box; -webkit-text-decoration: none; text-decoration: none; min-height: 80px; - min-width: auto; + min-width: 80px; cursor: default; overflow: hidden; border: none; @@ -7145,6 +7147,7 @@ exports[`SiteHeader has no highlighted items if we are on the homepage 1`] = ` border-width: 4px; border-style: solid; cursor: pointer; + width: 100%; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; diff --git a/site/components/sidebar/__tests__/__snapshots__/sidebar-navigation.test.tsx.snap b/site/components/sidebar/__tests__/__snapshots__/sidebar-navigation.test.tsx.snap index da2c947d3b..b916575270 100644 --- a/site/components/sidebar/__tests__/__snapshots__/sidebar-navigation.test.tsx.snap +++ b/site/components/sidebar/__tests__/__snapshots__/sidebar-navigation.test.tsx.snap @@ -39,6 +39,7 @@ exports[`Sidebar navigation should match snapshot with active link 1`] = ` .emotion-1>ul { box-sizing: border-box; + position: relative; list-style-type: none; margin: 0; padding: 0; @@ -290,7 +291,6 @@ exports[`Sidebar navigation should match snapshot with active link 1`] = ` -ms-flex-align: center; align-items: center; padding: 12px 16px; - width: 100%; min-width: 64px; min-height: 40px; padding-inline: 64px; @@ -298,7 +298,7 @@ exports[`Sidebar navigation should match snapshot with active link 1`] = ` -webkit-text-decoration: none; text-decoration: none; min-height: 40px; - min-width: auto; + min-width: 64px; cursor: default; overflow: hidden; border: none; @@ -313,6 +313,7 @@ exports[`Sidebar navigation should match snapshot with active link 1`] = ` border-style: solid; color: #5A6A79; cursor: pointer; + width: 100%; -webkit-text-decoration: none; text-decoration: none; border-color: transparent transparent transparent #3358CC; @@ -442,7 +443,6 @@ exports[`Sidebar navigation should match snapshot with active link 1`] = ` -ms-flex-align: center; align-items: center; padding: 12px 16px; - width: 100%; min-width: 64px; min-height: 40px; padding-inline: 64px; @@ -450,7 +450,7 @@ exports[`Sidebar navigation should match snapshot with active link 1`] = ` -webkit-text-decoration: none; text-decoration: none; min-height: 40px; - min-width: auto; + min-width: 64px; cursor: default; overflow: hidden; border: none; @@ -465,6 +465,7 @@ exports[`Sidebar navigation should match snapshot with active link 1`] = ` border-style: solid; color: #5A6A79; cursor: pointer; + width: 100%; -webkit-box-pack: start; -ms-flex-pack: start; -webkit-justify-content: flex-start; @@ -782,6 +783,7 @@ exports[`Sidebar navigation should match snapshot with active link 1`] = ` .emotion-1>ul { box-sizing: border-box; + position: relative; list-style-type: none; margin: 0; padding: 0; @@ -824,7 +826,6 @@ exports[`Sidebar navigation should match snapshot with active link 1`] = ` -ms-flex-align: center; align-items: center; padding: 12px 16px; - width: 100%; min-width: 64px; min-height: 40px; -webkit-padding-start: 32px; @@ -833,7 +834,7 @@ exports[`Sidebar navigation should match snapshot with active link 1`] = ` -webkit-text-decoration: none; text-decoration: none; min-height: 40px; - min-width: auto; + min-width: 64px; cursor: default; overflow: hidden; border: none; @@ -848,6 +849,7 @@ exports[`Sidebar navigation should match snapshot with active link 1`] = ` border-style: solid; color: #5A6A79; cursor: pointer; + width: 100%; -webkit-box-pack: start; -ms-flex-pack: start; -webkit-justify-content: flex-start; @@ -993,6 +995,7 @@ exports[`Sidebar navigation should match snapshot with no active link 1`] = ` .emotion-1>ul { box-sizing: border-box; + position: relative; list-style-type: none; margin: 0; padding: 0; @@ -1244,7 +1247,6 @@ exports[`Sidebar navigation should match snapshot with no active link 1`] = ` -ms-flex-align: center; align-items: center; padding: 12px 16px; - width: 100%; min-width: 64px; min-height: 40px; padding-inline: 64px; @@ -1252,7 +1254,7 @@ exports[`Sidebar navigation should match snapshot with no active link 1`] = ` -webkit-text-decoration: none; text-decoration: none; min-height: 40px; - min-width: auto; + min-width: 64px; cursor: default; overflow: hidden; border: none; @@ -1267,6 +1269,7 @@ exports[`Sidebar navigation should match snapshot with no active link 1`] = ` border-style: solid; color: #5A6A79; cursor: pointer; + width: 100%; -webkit-box-pack: start; -ms-flex-pack: start; -webkit-justify-content: flex-start; @@ -1651,6 +1654,7 @@ exports[`Sidebar navigation should match snapshot with no active link 1`] = ` .emotion-1>ul { box-sizing: border-box; + position: relative; list-style-type: none; margin: 0; padding: 0; @@ -1731,6 +1735,7 @@ exports[`Sidebar navigation should render only routes under current section 1`] .emotion-1>ul { box-sizing: border-box; + position: relative; list-style-type: none; margin: 0; padding: 0; @@ -1982,7 +1987,6 @@ exports[`Sidebar navigation should render only routes under current section 1`] -ms-flex-align: center; align-items: center; padding: 12px 16px; - width: 100%; min-width: 64px; min-height: 40px; padding-inline: 64px; @@ -1990,7 +1994,7 @@ exports[`Sidebar navigation should render only routes under current section 1`] -webkit-text-decoration: none; text-decoration: none; min-height: 40px; - min-width: auto; + min-width: 64px; cursor: default; overflow: hidden; border: none; @@ -2005,6 +2009,7 @@ exports[`Sidebar navigation should render only routes under current section 1`] border-style: solid; color: #5A6A79; cursor: pointer; + width: 100%; -webkit-box-pack: start; -ms-flex-pack: start; -webkit-justify-content: flex-start; @@ -2388,6 +2393,7 @@ exports[`Sidebar navigation should render only routes under current section 1`] .emotion-1>ul { box-sizing: border-box; + position: relative; list-style-type: none; margin: 0; padding: 0; @@ -2430,7 +2436,6 @@ exports[`Sidebar navigation should render only routes under current section 1`] -ms-flex-align: center; align-items: center; padding: 12px 16px; - width: 100%; min-width: 64px; min-height: 40px; -webkit-padding-start: 32px; @@ -2439,7 +2444,7 @@ exports[`Sidebar navigation should render only routes under current section 1`] -webkit-text-decoration: none; text-decoration: none; min-height: 40px; - min-width: auto; + min-width: 64px; cursor: default; overflow: hidden; border: none; @@ -2454,6 +2459,7 @@ exports[`Sidebar navigation should render only routes under current section 1`] border-style: solid; color: #5A6A79; cursor: pointer; + width: 100%; -webkit-box-pack: start; -ms-flex-pack: start; -webkit-justify-content: flex-start; diff --git a/site/components/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap b/site/components/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap index 0d483cd916..1d131f72b1 100644 --- a/site/components/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap +++ b/site/components/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap @@ -102,6 +102,7 @@ exports[`Sidebar renders correctly when closed 1`] = ` .emotion-5>ul { box-sizing: border-box; + position: relative; list-style-type: none; margin: 0; padding: 0; @@ -353,7 +354,6 @@ exports[`Sidebar renders correctly when closed 1`] = ` -ms-flex-align: center; align-items: center; padding: 12px 16px; - width: 100%; min-width: 64px; min-height: 40px; padding-inline: 64px; @@ -361,7 +361,7 @@ exports[`Sidebar renders correctly when closed 1`] = ` -webkit-text-decoration: none; text-decoration: none; min-height: 40px; - min-width: auto; + min-width: 64px; cursor: default; overflow: hidden; border: none; @@ -376,6 +376,7 @@ exports[`Sidebar renders correctly when closed 1`] = ` border-style: solid; color: #5A6A79; cursor: pointer; + width: 100%; -webkit-box-pack: start; -ms-flex-pack: start; -webkit-justify-content: flex-start; @@ -456,7 +457,6 @@ exports[`Sidebar renders correctly when closed 1`] = ` -ms-flex-align: center; align-items: center; padding: 12px 16px; - width: 100%; min-width: 64px; min-height: 40px; margin-block-end: 12px; @@ -465,7 +465,7 @@ exports[`Sidebar renders correctly when closed 1`] = ` -webkit-text-decoration: none; text-decoration: none; min-height: 40px; - min-width: auto; + min-width: 64px; cursor: default; overflow: hidden; border: none; @@ -480,6 +480,7 @@ exports[`Sidebar renders correctly when closed 1`] = ` border-style: solid; color: #5A6A79; cursor: pointer; + width: 100%; -webkit-box-pack: start; -ms-flex-pack: start; -webkit-justify-content: flex-start; @@ -3061,6 +3062,7 @@ exports[`Sidebar renders correctly when closed 1`] = ` .emotion-3>ul { box-sizing: border-box; + position: relative; list-style-type: none; margin: 0; padding: 0; @@ -3312,7 +3314,6 @@ exports[`Sidebar renders correctly when closed 1`] = ` -ms-flex-align: center; align-items: center; padding: 12px 16px; - width: 100%; min-width: 64px; min-height: 40px; padding-inline: 64px; @@ -3320,7 +3321,7 @@ exports[`Sidebar renders correctly when closed 1`] = ` -webkit-text-decoration: none; text-decoration: none; min-height: 40px; - min-width: auto; + min-width: 64px; cursor: default; overflow: hidden; border: none; @@ -3335,6 +3336,7 @@ exports[`Sidebar renders correctly when closed 1`] = ` border-style: solid; color: #5A6A79; cursor: pointer; + width: 100%; -webkit-box-pack: start; -ms-flex-pack: start; -webkit-justify-content: flex-start; @@ -3415,7 +3417,6 @@ exports[`Sidebar renders correctly when closed 1`] = ` -ms-flex-align: center; align-items: center; padding: 12px 16px; - width: 100%; min-width: 64px; min-height: 40px; margin-block-end: 12px; @@ -3424,7 +3425,7 @@ exports[`Sidebar renders correctly when closed 1`] = ` -webkit-text-decoration: none; text-decoration: none; min-height: 40px; - min-width: auto; + min-width: 64px; cursor: default; overflow: hidden; border: none; @@ -3439,6 +3440,7 @@ exports[`Sidebar renders correctly when closed 1`] = ` border-style: solid; color: #5A6A79; cursor: pointer; + width: 100%; -webkit-box-pack: start; -ms-flex-pack: start; -webkit-justify-content: flex-start; @@ -6546,6 +6548,7 @@ exports[`Sidebar renders correctly when open 1`] = ` .emotion-5>ul { box-sizing: border-box; + position: relative; list-style-type: none; margin: 0; padding: 0; @@ -6797,7 +6800,6 @@ exports[`Sidebar renders correctly when open 1`] = ` -ms-flex-align: center; align-items: center; padding: 12px 16px; - width: 100%; min-width: 64px; min-height: 40px; padding-inline: 64px; @@ -6805,7 +6807,7 @@ exports[`Sidebar renders correctly when open 1`] = ` -webkit-text-decoration: none; text-decoration: none; min-height: 40px; - min-width: auto; + min-width: 64px; cursor: default; overflow: hidden; border: none; @@ -6820,6 +6822,7 @@ exports[`Sidebar renders correctly when open 1`] = ` border-style: solid; color: #5A6A79; cursor: pointer; + width: 100%; -webkit-box-pack: start; -ms-flex-pack: start; -webkit-justify-content: flex-start; @@ -6900,7 +6903,6 @@ exports[`Sidebar renders correctly when open 1`] = ` -ms-flex-align: center; align-items: center; padding: 12px 16px; - width: 100%; min-width: 64px; min-height: 40px; margin-block-end: 12px; @@ -6909,7 +6911,7 @@ exports[`Sidebar renders correctly when open 1`] = ` -webkit-text-decoration: none; text-decoration: none; min-height: 40px; - min-width: auto; + min-width: 64px; cursor: default; overflow: hidden; border: none; @@ -6924,6 +6926,7 @@ exports[`Sidebar renders correctly when open 1`] = ` border-style: solid; color: #5A6A79; cursor: pointer; + width: 100%; -webkit-box-pack: start; -ms-flex-pack: start; -webkit-justify-content: flex-start; @@ -9508,6 +9511,7 @@ exports[`Sidebar renders correctly when open 1`] = ` .emotion-3>ul { box-sizing: border-box; + position: relative; list-style-type: none; margin: 0; padding: 0; @@ -9759,7 +9763,6 @@ exports[`Sidebar renders correctly when open 1`] = ` -ms-flex-align: center; align-items: center; padding: 12px 16px; - width: 100%; min-width: 64px; min-height: 40px; padding-inline: 64px; @@ -9767,7 +9770,7 @@ exports[`Sidebar renders correctly when open 1`] = ` -webkit-text-decoration: none; text-decoration: none; min-height: 40px; - min-width: auto; + min-width: 64px; cursor: default; overflow: hidden; border: none; @@ -9782,6 +9785,7 @@ exports[`Sidebar renders correctly when open 1`] = ` border-style: solid; color: #5A6A79; cursor: pointer; + width: 100%; -webkit-box-pack: start; -ms-flex-pack: start; -webkit-justify-content: flex-start; @@ -9862,7 +9866,6 @@ exports[`Sidebar renders correctly when open 1`] = ` -ms-flex-align: center; align-items: center; padding: 12px 16px; - width: 100%; min-width: 64px; min-height: 40px; margin-block-end: 12px; @@ -9871,7 +9874,7 @@ exports[`Sidebar renders correctly when open 1`] = ` -webkit-text-decoration: none; text-decoration: none; min-height: 40px; - min-width: auto; + min-width: 64px; cursor: default; overflow: hidden; border: none; @@ -9886,6 +9889,7 @@ exports[`Sidebar renders correctly when open 1`] = ` border-style: solid; color: #5A6A79; cursor: pointer; + width: 100%; -webkit-box-pack: start; -ms-flex-pack: start; -webkit-justify-content: flex-start; diff --git a/src/__tests__/__snapshots__/index.test.ts.snap b/src/__tests__/__snapshots__/index.test.ts.snap index 63c708bef4..398aa90cb4 100644 --- a/src/__tests__/__snapshots__/index.test.ts.snap +++ b/src/__tests__/__snapshots__/index.test.ts.snap @@ -89,6 +89,7 @@ Array [ "MenuDivider", "MenuGroup", "MenuItem", + "MenuSub", "Modal", "NewsKitProvider", "OrderedList", diff --git a/src/menu/__tests__/__snapshots__/menu.test.tsx.snap b/src/menu/__tests__/__snapshots__/menu.test.tsx.snap index 221bc50423..3a7de26113 100644 --- a/src/menu/__tests__/__snapshots__/menu.test.tsx.snap +++ b/src/menu/__tests__/__snapshots__/menu.test.tsx.snap @@ -9,6 +9,7 @@ exports[`Menu alignment renders with large size menu items horizontal 1`] = ` .emotion-0>ul { box-sizing: border-box; + position: relative; list-style-type: none; margin: 0; padding: 0; @@ -48,14 +49,13 @@ exports[`Menu alignment renders with large size menu items horizontal 1`] = ` -ms-flex-align: center; align-items: center; padding: 12px 16px; - width: 100%; min-width: 120px; min-height: 48px; box-sizing: border-box; -webkit-text-decoration: none; text-decoration: none; min-height: 48px; - min-width: auto; + min-width: 120px; cursor: default; overflow: hidden; border: none; @@ -69,6 +69,7 @@ exports[`Menu alignment renders with large size menu items horizontal 1`] = ` border-width: 0 0 2px 0; color: #6A6A6A; cursor: pointer; + width: 100%; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; @@ -256,6 +257,7 @@ exports[`Menu alignment renders with large size menu items vertical 1`] = ` .emotion-0>ul { box-sizing: border-box; + position: relative; list-style-type: none; margin: 0; padding: 0; @@ -298,14 +300,13 @@ exports[`Menu alignment renders with large size menu items vertical 1`] = ` -ms-flex-align: center; align-items: center; padding: 12px 16px; - width: 100%; min-width: 120px; min-height: 48px; box-sizing: border-box; -webkit-text-decoration: none; text-decoration: none; min-height: 48px; - min-width: auto; + min-width: 120px; cursor: default; overflow: hidden; border: none; @@ -319,6 +320,7 @@ exports[`Menu alignment renders with large size menu items vertical 1`] = ` border-width: 0 2px 0 0; color: #6A6A6A; cursor: pointer; + width: 100%; -webkit-box-pack: start; -ms-flex-pack: start; -webkit-justify-content: flex-start; @@ -507,6 +509,7 @@ exports[`Menu alignment renders with medium size menu items horizontal 1`] = ` .emotion-0>ul { box-sizing: border-box; + position: relative; list-style-type: none; margin: 0; padding: 0; @@ -546,14 +549,13 @@ exports[`Menu alignment renders with medium size menu items horizontal 1`] = ` -ms-flex-align: center; align-items: center; padding: 12px 16px; - width: 100%; min-width: 80px; min-height: 48px; box-sizing: border-box; -webkit-text-decoration: none; text-decoration: none; min-height: 48px; - min-width: auto; + min-width: 80px; cursor: default; overflow: hidden; border: none; @@ -567,6 +569,7 @@ exports[`Menu alignment renders with medium size menu items horizontal 1`] = ` border-width: 0 0 2px 0; color: #6A6A6A; cursor: pointer; + width: 100%; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; @@ -754,6 +757,7 @@ exports[`Menu alignment renders with medium size menu items vertical 1`] = ` .emotion-0>ul { box-sizing: border-box; + position: relative; list-style-type: none; margin: 0; padding: 0; @@ -796,14 +800,13 @@ exports[`Menu alignment renders with medium size menu items vertical 1`] = ` -ms-flex-align: center; align-items: center; padding: 12px 16px; - width: 100%; min-width: 80px; min-height: 48px; box-sizing: border-box; -webkit-text-decoration: none; text-decoration: none; min-height: 48px; - min-width: auto; + min-width: 80px; cursor: default; overflow: hidden; border: none; @@ -817,6 +820,7 @@ exports[`Menu alignment renders with medium size menu items vertical 1`] = ` border-width: 0 2px 0 0; color: #6A6A6A; cursor: pointer; + width: 100%; -webkit-box-pack: start; -ms-flex-pack: start; -webkit-justify-content: flex-start; @@ -1005,6 +1009,7 @@ exports[`Menu alignment renders with menu items aligned at the center horizontal .emotion-0>ul { box-sizing: border-box; + position: relative; list-style-type: none; margin: 0; padding: 0; @@ -1044,14 +1049,13 @@ exports[`Menu alignment renders with menu items aligned at the center horizontal -ms-flex-align: center; align-items: center; padding: 12px 16px; - width: 100%; min-width: 80px; min-height: 48px; box-sizing: border-box; -webkit-text-decoration: none; text-decoration: none; min-height: 48px; - min-width: auto; + min-width: 80px; cursor: default; overflow: hidden; border: none; @@ -1065,6 +1069,7 @@ exports[`Menu alignment renders with menu items aligned at the center horizontal border-width: 0 0 2px 0; color: #6A6A6A; cursor: pointer; + width: 100%; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; @@ -1252,6 +1257,7 @@ exports[`Menu alignment renders with menu items aligned at the center vertical 1 .emotion-0>ul { box-sizing: border-box; + position: relative; list-style-type: none; margin: 0; padding: 0; @@ -1294,14 +1300,13 @@ exports[`Menu alignment renders with menu items aligned at the center vertical 1 -ms-flex-align: center; align-items: center; padding: 12px 16px; - width: 100%; min-width: 80px; min-height: 48px; box-sizing: border-box; -webkit-text-decoration: none; text-decoration: none; min-height: 48px; - min-width: auto; + min-width: 80px; cursor: default; overflow: hidden; border: none; @@ -1315,6 +1320,7 @@ exports[`Menu alignment renders with menu items aligned at the center vertical 1 border-width: 0 2px 0 0; color: #6A6A6A; cursor: pointer; + width: 100%; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; @@ -1503,6 +1509,7 @@ exports[`Menu alignment renders with menu items aligned at the end horizontal 1` .emotion-0>ul { box-sizing: border-box; + position: relative; list-style-type: none; margin: 0; padding: 0; @@ -1542,14 +1549,13 @@ exports[`Menu alignment renders with menu items aligned at the end horizontal 1` -ms-flex-align: center; align-items: center; padding: 12px 16px; - width: 100%; min-width: 80px; min-height: 48px; box-sizing: border-box; -webkit-text-decoration: none; text-decoration: none; min-height: 48px; - min-width: auto; + min-width: 80px; cursor: default; overflow: hidden; border: none; @@ -1563,6 +1569,7 @@ exports[`Menu alignment renders with menu items aligned at the end horizontal 1` border-width: 0 0 2px 0; color: #6A6A6A; cursor: pointer; + width: 100%; -webkit-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; @@ -1750,6 +1757,7 @@ exports[`Menu alignment renders with menu items aligned at the end vertical 1`] .emotion-0>ul { box-sizing: border-box; + position: relative; list-style-type: none; margin: 0; padding: 0; @@ -1792,14 +1800,13 @@ exports[`Menu alignment renders with menu items aligned at the end vertical 1`] -ms-flex-align: center; align-items: center; padding: 12px 16px; - width: 100%; min-width: 80px; min-height: 48px; box-sizing: border-box; -webkit-text-decoration: none; text-decoration: none; min-height: 48px; - min-width: auto; + min-width: 80px; cursor: default; overflow: hidden; border: none; @@ -1813,6 +1820,7 @@ exports[`Menu alignment renders with menu items aligned at the end vertical 1`] border-width: 0 2px 0 0; color: #6A6A6A; cursor: pointer; + width: 100%; -webkit-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; @@ -1992,7 +2000,7 @@ exports[`Menu alignment renders with menu items aligned at the end vertical 1`] `; -exports[`Menu alignment renders with menu items aligned at the start horizontal 1`] = ` +exports[`Menu alignment renders with menu items aligned at the spaceBetween horizontal 1`] = ` .emotion-0 { box-sizing: border-box; @@ -2001,6 +2009,7 @@ exports[`Menu alignment renders with menu items aligned at the start horizontal .emotion-0>ul { box-sizing: border-box; + position: relative; list-style-type: none; margin: 0; padding: 0; @@ -2040,14 +2049,13 @@ exports[`Menu alignment renders with menu items aligned at the start horizontal -ms-flex-align: center; align-items: center; padding: 12px 16px; - width: 100%; min-width: 80px; min-height: 48px; box-sizing: border-box; -webkit-text-decoration: none; text-decoration: none; min-height: 48px; - min-width: auto; + min-width: 80px; cursor: default; overflow: hidden; border: none; @@ -2061,10 +2069,10 @@ exports[`Menu alignment renders with menu items aligned at the start horizontal border-width: 0 0 2px 0; color: #6A6A6A; cursor: pointer; - -webkit-box-pack: start; - -ms-flex-pack: start; - -webkit-justify-content: flex-start; - justify-content: flex-start; + width: 100%; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + justify-content: space-between; text-align: left; } @@ -2239,7 +2247,7 @@ exports[`Menu alignment renders with menu items aligned at the start horizontal `; -exports[`Menu alignment renders with menu items aligned at the start vertical 1`] = ` +exports[`Menu alignment renders with menu items aligned at the spaceBetween vertical 1`] = ` .emotion-0 { box-sizing: border-box; @@ -2248,6 +2256,7 @@ exports[`Menu alignment renders with menu items aligned at the start vertical 1` .emotion-0>ul { box-sizing: border-box; + position: relative; list-style-type: none; margin: 0; padding: 0; @@ -2290,14 +2299,13 @@ exports[`Menu alignment renders with menu items aligned at the start vertical 1` -ms-flex-align: center; align-items: center; padding: 12px 16px; - width: 100%; min-width: 80px; min-height: 48px; box-sizing: border-box; -webkit-text-decoration: none; text-decoration: none; min-height: 48px; - min-width: auto; + min-width: 80px; cursor: default; overflow: hidden; border: none; @@ -2311,10 +2319,10 @@ exports[`Menu alignment renders with menu items aligned at the start vertical 1` border-width: 0 2px 0 0; color: #6A6A6A; cursor: pointer; - -webkit-box-pack: start; - -ms-flex-pack: start; - -webkit-justify-content: flex-start; - justify-content: flex-start; + width: 100%; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + justify-content: space-between; text-align: left; } @@ -2490,7 +2498,7 @@ exports[`Menu alignment renders with menu items aligned at the start vertical 1` `; -exports[`Menu alignment renders with small size menu items horizontal 1`] = ` +exports[`Menu alignment renders with menu items aligned at the start horizontal 1`] = ` .emotion-0 { box-sizing: border-box; @@ -2499,6 +2507,7 @@ exports[`Menu alignment renders with small size menu items horizontal 1`] = ` .emotion-0>ul { box-sizing: border-box; + position: relative; list-style-type: none; margin: 0; padding: 0; @@ -2538,14 +2547,13 @@ exports[`Menu alignment renders with small size menu items horizontal 1`] = ` -ms-flex-align: center; align-items: center; padding: 12px 16px; - width: 100%; - min-width: 64px; + min-width: 80px; min-height: 48px; box-sizing: border-box; -webkit-text-decoration: none; text-decoration: none; min-height: 48px; - min-width: auto; + min-width: 80px; cursor: default; overflow: hidden; border: none; @@ -2559,16 +2567,17 @@ exports[`Menu alignment renders with small size menu items horizontal 1`] = ` border-width: 0 0 2px 0; color: #6A6A6A; cursor: pointer; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - text-align: center; + width: 100%; + -webkit-box-pack: start; + -ms-flex-pack: start; + -webkit-justify-content: flex-start; + justify-content: flex-start; + text-align: left; } .emotion-2 svg { - width: 16px; - height: 16px; + width: 24px; + height: 24px; } .emotion-2 svg { @@ -2644,8 +2653,8 @@ exports[`Menu alignment renders with small size menu items horizontal 1`] = ` .emotion-3 { margin: 0; font-family: "Poppins",sans-serif; - font-size: 12px; - line-height: 18px; + font-size: 14px; + line-height: 21px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -2737,7 +2746,7 @@ exports[`Menu alignment renders with small size menu items horizontal 1`] = ` `; -exports[`Menu alignment renders with small size menu items vertical 1`] = ` +exports[`Menu alignment renders with menu items aligned at the start vertical 1`] = ` .emotion-0 { box-sizing: border-box; @@ -2746,6 +2755,7 @@ exports[`Menu alignment renders with small size menu items vertical 1`] = ` .emotion-0>ul { box-sizing: border-box; + position: relative; list-style-type: none; margin: 0; padding: 0; @@ -2788,14 +2798,13 @@ exports[`Menu alignment renders with small size menu items vertical 1`] = ` -ms-flex-align: center; align-items: center; padding: 12px 16px; - width: 100%; - min-width: 64px; + min-width: 80px; min-height: 48px; box-sizing: border-box; -webkit-text-decoration: none; text-decoration: none; min-height: 48px; - min-width: auto; + min-width: 80px; cursor: default; overflow: hidden; border: none; @@ -2809,6 +2818,7 @@ exports[`Menu alignment renders with small size menu items vertical 1`] = ` border-width: 0 2px 0 0; color: #6A6A6A; cursor: pointer; + width: 100%; -webkit-box-pack: start; -ms-flex-pack: start; -webkit-justify-content: flex-start; @@ -2817,8 +2827,8 @@ exports[`Menu alignment renders with small size menu items vertical 1`] = ` } .emotion-2 svg { - width: 16px; - height: 16px; + width: 24px; + height: 24px; } .emotion-2 svg { @@ -2895,8 +2905,8 @@ exports[`Menu alignment renders with small size menu items vertical 1`] = ` .emotion-3 { margin: 0; font-family: "Poppins",sans-serif; - font-size: 12px; - line-height: 18px; + font-size: 14px; + line-height: 21px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; @@ -2988,7 +2998,7 @@ exports[`Menu alignment renders with small size menu items vertical 1`] = ` `; -exports[`Menu renders horizontally with menu dividers 1`] = ` +exports[`Menu alignment renders with small size menu items horizontal 1`] = ` .emotion-0 { box-sizing: border-box; @@ -2997,6 +3007,7 @@ exports[`Menu renders horizontally with menu dividers 1`] = ` .emotion-0>ul { box-sizing: border-box; + position: relative; list-style-type: none; margin: 0; padding: 0; @@ -3016,23 +3027,7 @@ exports[`Menu renders horizontally with menu dividers 1`] = ` margin-right: 8px; } -.emotion-1>ul { - box-sizing: border-box; - list-style-type: none; - margin: 0; - padding: 0; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; -} - .emotion-2 { - box-sizing: border-box; - margin-right: 8px; -} - -.emotion-3 { margin: 0; padding: 0; display: inline-grid; @@ -3052,14 +3047,13 @@ exports[`Menu renders horizontally with menu dividers 1`] = ` -ms-flex-align: center; align-items: center; padding: 12px 16px; - width: 100%; - min-width: 80px; + min-width: 64px; min-height: 48px; box-sizing: border-box; -webkit-text-decoration: none; text-decoration: none; min-height: 48px; - min-width: auto; + min-width: 64px; cursor: default; overflow: hidden; border: none; @@ -3073,6 +3067,7 @@ exports[`Menu renders horizontally with menu dividers 1`] = ` border-width: 0 0 2px 0; color: #6A6A6A; cursor: pointer; + width: 100%; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; @@ -3080,51 +3075,51 @@ exports[`Menu renders horizontally with menu dividers 1`] = ` text-align: center; } -.emotion-3 svg { - width: 24px; - height: 24px; +.emotion-2 svg { + width: 16px; + height: 16px; } -.emotion-3 svg { +.emotion-2 svg { fill: #6A6A6A; } -.emotion-3:hover:not(:disabled) { +.emotion-2:hover:not(:disabled) { border-color: #3358CC; color: #3B3B3B; } -.emotion-3:hover:not(:disabled) svg { +.emotion-2:hover:not(:disabled) svg { fill: #3B3B3B; } -.emotion-3:active:not(:disabled) { +.emotion-2:active:not(:disabled) { border-color: #254CAC; color: #111111; } -.emotion-3:active:not(:disabled) svg { +.emotion-2:active:not(:disabled) svg { fill: #111111; } -.emotion-3:selected:hover:not(:disabled) { +.emotion-2:selected:hover:not(:disabled) { border-color: #3358CC; color: #3B3B3B; } -.emotion-3:selected:hover:not(:disabled) svg { +.emotion-2:selected:hover:not(:disabled) svg { fill: #3B3B3B; } -.emotion-3:disabled { +.emotion-2:disabled { color: #ABABAB; } -.emotion-3:disabled svg { +.emotion-2:disabled svg { fill: #ABABAB; } -.emotion-3:focus-visible:not(:disabled) { +.emotion-2:focus-visible:not(:disabled) { outline-color: #3768FB; outline-style: solid; outline-width: 2px; @@ -3133,14 +3128,14 @@ exports[`Menu renders horizontally with menu dividers 1`] = ` @media not all and (min-resolution: 0.001dpcm) { @supports (-webkit-appearance: none) and (stroke-color: transparent) { - .emotion-3:focus-visible:not(:disabled) { + .emotion-2:focus-visible:not(:disabled) { outline-style: auto; } } } @media screen and (prefers-reduced-motion: no-preference) { - .emotion-3 { + .emotion-2 { transition-property: background-color; transition-duration: 200ms; transition-timing-function: cubic-bezier(0, 0, .5, 1); @@ -3148,59 +3143,36 @@ exports[`Menu renders horizontally with menu dividers 1`] = ` } @media screen and (prefers-reduced-motion: reduce) { - .emotion-3 { + .emotion-2 { transition-property: background-color; transition-duration: 0ms; transition-timing-function: cubic-bezier(0, 0, .5, 1); } } -.emotion-4 { +.emotion-3 { margin: 0; font-family: "Poppins",sans-serif; - font-size: 14px; - line-height: 21px; + font-size: 12px; + line-height: 18px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; display: inline-block; } -.emotion-4::before { +.emotion-3::before { content: ''; margin-bottom: -0.403em; display: block; } -.emotion-4::after { +.emotion-3::after { content: ''; margin-top: -0.4em; display: block; } -.emotion-5 { - box-sizing: border-box; -} - -.nk-menu-group+.emotion-5 { - margin-right: 24px; -} - -.nk-menu-item+.emotion-5 { - margin-right: 8px; -} - -.emotion-6 { - border-style: solid; - border-color: #C6C6C6; - border-width: 1px; - border-width: 0px; - margin: 0; - border-left-width: 1px; - display: inline-block; - height: 100%; -} - `; -exports[`Menu renders horizontally with menu group 1`] = ` +exports[`Menu alignment renders with small size menu items vertical 1`] = ` .emotion-0 { box-sizing: border-box; - width: 100%; + height: 100%; } .emotion-0>ul { box-sizing: border-box; + position: relative; list-style-type: none; margin: 0; padding: 0; @@ -3337,35 +3263,22 @@ exports[`Menu renders horizontally with menu group 1`] = ` display: -webkit-flex; display: -ms-flexbox; display: flex; - width: 100%; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + height: 100%; } .emotion-0 li:last-of-type { - margin-right: 0; + margin-bottom: 0; } .emotion-1 { box-sizing: border-box; - margin-right: 8px; -} - -.emotion-1>ul { - box-sizing: border-box; - list-style-type: none; - margin: 0; - padding: 0; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; + margin-bottom: 8px; } .emotion-2 { - box-sizing: border-box; - margin-right: 8px; -} - -.emotion-3 { margin: 0; padding: 0; display: inline-grid; @@ -3385,14 +3298,13 @@ exports[`Menu renders horizontally with menu group 1`] = ` -ms-flex-align: center; align-items: center; padding: 12px 16px; - width: 100%; - min-width: 80px; + min-width: 64px; min-height: 48px; box-sizing: border-box; -webkit-text-decoration: none; text-decoration: none; min-height: 48px; - min-width: auto; + min-width: 64px; cursor: default; overflow: hidden; border: none; @@ -3403,61 +3315,63 @@ exports[`Menu renders horizontally with menu group 1`] = ` background-color: transparent; border-style: solid; border-color: transparent; - border-width: 0 0 2px 0; + border-width: 0 2px 0 0; color: #6A6A6A; cursor: pointer; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - text-align: center; + width: 100%; + -webkit-box-pack: start; + -ms-flex-pack: start; + -webkit-justify-content: flex-start; + justify-content: flex-start; + text-align: left; } -.emotion-3 svg { - width: 24px; - height: 24px; +.emotion-2 svg { + width: 16px; + height: 16px; } -.emotion-3 svg { +.emotion-2 svg { fill: #6A6A6A; } -.emotion-3:hover:not(:disabled) { - border-color: #3358CC; - color: #3B3B3B; +.emotion-2:hover:not(:disabled) { + background-color: #ECF1FF; + color: #3358CC; } -.emotion-3:hover:not(:disabled) svg { - fill: #3B3B3B; +.emotion-2:hover:not(:disabled) svg { + fill: #3358CC; } -.emotion-3:active:not(:disabled) { - border-color: #254CAC; - color: #111111; +.emotion-2:active:not(:disabled) { + background-color: #D5E0FC; + color: #3358CC; } -.emotion-3:active:not(:disabled) svg { - fill: #111111; +.emotion-2:active:not(:disabled) svg { + fill: #3358CC; } -.emotion-3:selected:hover:not(:disabled) { +.emotion-2:selected:hover:not(:disabled) { + background-color: transparent; border-color: #3358CC; - color: #3B3B3B; + color: #3358CC; } -.emotion-3:selected:hover:not(:disabled) svg { - fill: #3B3B3B; +.emotion-2:selected:hover:not(:disabled) svg { + fill: #3358CC; } -.emotion-3:disabled { +.emotion-2:disabled { color: #ABABAB; } -.emotion-3:disabled svg { +.emotion-2:disabled svg { fill: #ABABAB; } -.emotion-3:focus-visible:not(:disabled) { +.emotion-2:focus-visible:not(:disabled) { outline-color: #3768FB; outline-style: solid; outline-width: 2px; @@ -3466,14 +3380,14 @@ exports[`Menu renders horizontally with menu group 1`] = ` @media not all and (min-resolution: 0.001dpcm) { @supports (-webkit-appearance: none) and (stroke-color: transparent) { - .emotion-3:focus-visible:not(:disabled) { + .emotion-2:focus-visible:not(:disabled) { outline-style: auto; } } } @media screen and (prefers-reduced-motion: no-preference) { - .emotion-3 { + .emotion-2 { transition-property: background-color; transition-duration: 200ms; transition-timing-function: cubic-bezier(0, 0, .5, 1); @@ -3481,31 +3395,31 @@ exports[`Menu renders horizontally with menu group 1`] = ` } @media screen and (prefers-reduced-motion: reduce) { - .emotion-3 { + .emotion-2 { transition-property: background-color; transition-duration: 0ms; transition-timing-function: cubic-bezier(0, 0, .5, 1); } } -.emotion-4 { +.emotion-3 { margin: 0; font-family: "Poppins",sans-serif; - font-size: 14px; - line-height: 21px; + font-size: 12px; + line-height: 18px; font-weight: 500; letter-spacing: 0; padding: 0.5px 0px; display: inline-block; } -.emotion-4::before { +.emotion-3::before { content: ''; margin-bottom: -0.403em; display: block; } -.emotion-4::after { +.emotion-3::after { content: ''; margin-top: -0.4em; display: block; @@ -3520,83 +3434,71 @@ exports[`Menu renders horizontally with menu group 1`] = ` role="list" >
  • - + Menu item + +
  • - + Menu item + +
    • `; -exports[`Menu renders horizontally with menu items 1`] = ` +exports[`Menu renders horizontally with menu dividers 1`] = ` .emotion-0 { box-sizing: border-box; @@ -3605,6 +3507,7 @@ exports[`Menu renders horizontally with menu items 1`] = ` .emotion-0>ul { box-sizing: border-box; + position: relative; list-style-type: none; margin: 0; padding: 0; @@ -3624,7 +3527,23 @@ exports[`Menu renders horizontally with menu items 1`] = ` margin-right: 8px; } +.emotion-1>ul { + box-sizing: border-box; + list-style-type: none; + margin: 0; + padding: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + .emotion-2 { + box-sizing: border-box; + margin-right: 8px; +} + +.emotion-3 { margin: 0; padding: 0; display: inline-grid; @@ -3644,14 +3563,13 @@ exports[`Menu renders horizontally with menu items 1`] = ` -ms-flex-align: center; align-items: center; padding: 12px 16px; - width: 100%; min-width: 80px; min-height: 48px; box-sizing: border-box; -webkit-text-decoration: none; text-decoration: none; min-height: 48px; - min-width: auto; + min-width: 80px; cursor: default; overflow: hidden; border: none; @@ -3665,6 +3583,7 @@ exports[`Menu renders horizontally with menu items 1`] = ` border-width: 0 0 2px 0; color: #6A6A6A; cursor: pointer; + width: 100%; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; @@ -3672,51 +3591,51 @@ exports[`Menu renders horizontally with menu items 1`] = ` text-align: center; } -.emotion-2 svg { +.emotion-3 svg { width: 24px; height: 24px; } -.emotion-2 svg { +.emotion-3 svg { fill: #6A6A6A; } -.emotion-2:hover:not(:disabled) { +.emotion-3:hover:not(:disabled) { border-color: #3358CC; color: #3B3B3B; } -.emotion-2:hover:not(:disabled) svg { +.emotion-3:hover:not(:disabled) svg { fill: #3B3B3B; } -.emotion-2:active:not(:disabled) { +.emotion-3:active:not(:disabled) { border-color: #254CAC; color: #111111; } -.emotion-2:active:not(:disabled) svg { +.emotion-3:active:not(:disabled) svg { fill: #111111; } -.emotion-2:selected:hover:not(:disabled) { +.emotion-3:selected:hover:not(:disabled) { border-color: #3358CC; color: #3B3B3B; } -.emotion-2:selected:hover:not(:disabled) svg { +.emotion-3:selected:hover:not(:disabled) svg { fill: #3B3B3B; } -.emotion-2:disabled { +.emotion-3:disabled { color: #ABABAB; } -.emotion-2:disabled svg { +.emotion-3:disabled svg { fill: #ABABAB; } -.emotion-2:focus-visible:not(:disabled) { +.emotion-3:focus-visible:not(:disabled) { outline-color: #3768FB; outline-style: solid; outline-width: 2px; @@ -3725,14 +3644,14 @@ exports[`Menu renders horizontally with menu items 1`] = ` @media not all and (min-resolution: 0.001dpcm) { @supports (-webkit-appearance: none) and (stroke-color: transparent) { - .emotion-2:focus-visible:not(:disabled) { + .emotion-3:focus-visible:not(:disabled) { outline-style: auto; } } } @media screen and (prefers-reduced-motion: no-preference) { - .emotion-2 { + .emotion-3 { transition-property: background-color; transition-duration: 200ms; transition-timing-function: cubic-bezier(0, 0, .5, 1); @@ -3740,14 +3659,14 @@ exports[`Menu renders horizontally with menu items 1`] = ` } @media screen and (prefers-reduced-motion: reduce) { - .emotion-2 { + .emotion-3 { transition-property: background-color; transition-duration: 0ms; transition-timing-function: cubic-bezier(0, 0, .5, 1); } } -.emotion-3 { +.emotion-4 { margin: 0; font-family: "Poppins",sans-serif; font-size: 14px; @@ -3758,18 +3677,41 @@ exports[`Menu renders horizontally with menu items 1`] = ` display: inline-block; } -.emotion-3::before { +.emotion-4::before { content: ''; margin-bottom: -0.403em; display: block; } -.emotion-3::after { +.emotion-4::after { content: ''; margin-top: -0.4em; display: block; } +.emotion-5 { + box-sizing: border-box; +} + +.nk-menu-group+.emotion-5 { + margin-right: 24px; +} + +.nk-menu-item+.emotion-5 { + margin-right: 8px; +} + +.emotion-6 { + border-style: solid; + border-color: #C6C6C6; + border-width: 1px; + border-width: 0px; + margin: 0; + border-left-width: 1px; + display: inline-block; + height: 100%; +} + `; -exports[`Menu renders vertically with menu dividers 1`] = ` +exports[`Menu renders horizontally with menu group 1`] = ` .emotion-0 { box-sizing: border-box; - height: 100%; + width: 100%; } .emotion-0>ul { box-sizing: border-box; + position: relative; list-style-type: none; margin: 0; padding: 0; @@ -3859,19 +3849,16 @@ exports[`Menu renders vertically with menu dividers 1`] = ` display: -webkit-flex; display: -ms-flexbox; display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - height: 100%; + width: 100%; } .emotion-0 li:last-of-type { - margin-bottom: 0; + margin-right: 0; } .emotion-1 { box-sizing: border-box; - margin-bottom: 24px; + margin-right: 8px; } .emotion-1>ul { @@ -3879,11 +3866,15 @@ exports[`Menu renders vertically with menu dividers 1`] = ` list-style-type: none; margin: 0; padding: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; } .emotion-2 { box-sizing: border-box; - margin-bottom: 8px; + margin-right: 8px; } .emotion-3 { @@ -3906,14 +3897,13 @@ exports[`Menu renders vertically with menu dividers 1`] = ` -ms-flex-align: center; align-items: center; padding: 12px 16px; - width: 100%; min-width: 80px; min-height: 48px; box-sizing: border-box; -webkit-text-decoration: none; text-decoration: none; min-height: 48px; - min-width: auto; + min-width: 80px; cursor: default; overflow: hidden; border: none; @@ -3924,14 +3914,15 @@ exports[`Menu renders vertically with menu dividers 1`] = ` background-color: transparent; border-style: solid; border-color: transparent; - border-width: 0 2px 0 0; + border-width: 0 0 2px 0; color: #6A6A6A; cursor: pointer; - -webkit-box-pack: start; - -ms-flex-pack: start; - -webkit-justify-content: flex-start; - justify-content: flex-start; - text-align: left; + width: 100%; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + text-align: center; } .emotion-3 svg { @@ -3944,31 +3935,30 @@ exports[`Menu renders vertically with menu dividers 1`] = ` } .emotion-3:hover:not(:disabled) { - background-color: #ECF1FF; - color: #3358CC; + border-color: #3358CC; + color: #3B3B3B; } .emotion-3:hover:not(:disabled) svg { - fill: #3358CC; + fill: #3B3B3B; } .emotion-3:active:not(:disabled) { - background-color: #D5E0FC; - color: #3358CC; + border-color: #254CAC; + color: #111111; } .emotion-3:active:not(:disabled) svg { - fill: #3358CC; + fill: #111111; } .emotion-3:selected:hover:not(:disabled) { - background-color: transparent; border-color: #3358CC; - color: #3358CC; + color: #3B3B3B; } .emotion-3:selected:hover:not(:disabled) svg { - fill: #3358CC; + fill: #3B3B3B; } .emotion-3:disabled { @@ -4033,28 +4023,6 @@ exports[`Menu renders vertically with menu dividers 1`] = ` display: block; } -.emotion-5 { - box-sizing: border-box; -} - -.nk-menu-group+.emotion-5 { - margin-bottom: 24px; -} - -.nk-menu-item+.emotion-5 { - margin-bottom: 8px; -} - -.emotion-6 { - border-style: solid; - border-color: #C6C6C6; - border-width: 1px; - border-width: 0px; - margin: 0; - border-top-width: 1px; - width: 100%; -} - `; -exports[`Menu renders vertically with menu items 1`] = ` +exports[`Menu renders vertically with menu dividers 1`] = ` .emotion-0 { box-sizing: border-box; @@ -4459,6 +4365,7 @@ exports[`Menu renders vertically with menu items 1`] = ` .emotion-0>ul { box-sizing: border-box; + position: relative; list-style-type: none; margin: 0; padding: 0; @@ -4478,10 +4385,22 @@ exports[`Menu renders vertically with menu items 1`] = ` .emotion-1 { box-sizing: border-box; - margin-bottom: 8px; + margin-bottom: 24px; +} + +.emotion-1>ul { + box-sizing: border-box; + list-style-type: none; + margin: 0; + padding: 0; } .emotion-2 { + box-sizing: border-box; + margin-bottom: 8px; +} + +.emotion-3 { margin: 0; padding: 0; display: inline-grid; @@ -4501,14 +4420,13 @@ exports[`Menu renders vertically with menu items 1`] = ` -ms-flex-align: center; align-items: center; padding: 12px 16px; - width: 100%; min-width: 80px; min-height: 48px; box-sizing: border-box; -webkit-text-decoration: none; text-decoration: none; min-height: 48px; - min-width: auto; + min-width: 80px; cursor: default; overflow: hidden; border: none; @@ -4522,6 +4440,7 @@ exports[`Menu renders vertically with menu items 1`] = ` border-width: 0 2px 0 0; color: #6A6A6A; cursor: pointer; + width: 100%; -webkit-box-pack: start; -ms-flex-pack: start; -webkit-justify-content: flex-start; @@ -4529,52 +4448,52 @@ exports[`Menu renders vertically with menu items 1`] = ` text-align: left; } -.emotion-2 svg { +.emotion-3 svg { width: 24px; height: 24px; } -.emotion-2 svg { +.emotion-3 svg { fill: #6A6A6A; } -.emotion-2:hover:not(:disabled) { +.emotion-3:hover:not(:disabled) { background-color: #ECF1FF; color: #3358CC; } -.emotion-2:hover:not(:disabled) svg { +.emotion-3:hover:not(:disabled) svg { fill: #3358CC; } -.emotion-2:active:not(:disabled) { +.emotion-3:active:not(:disabled) { background-color: #D5E0FC; color: #3358CC; } -.emotion-2:active:not(:disabled) svg { +.emotion-3:active:not(:disabled) svg { fill: #3358CC; } -.emotion-2:selected:hover:not(:disabled) { +.emotion-3:selected:hover:not(:disabled) { background-color: transparent; border-color: #3358CC; color: #3358CC; } -.emotion-2:selected:hover:not(:disabled) svg { +.emotion-3:selected:hover:not(:disabled) svg { fill: #3358CC; } -.emotion-2:disabled { +.emotion-3:disabled { color: #ABABAB; } -.emotion-2:disabled svg { +.emotion-3:disabled svg { fill: #ABABAB; } -.emotion-2:focus-visible:not(:disabled) { +.emotion-3:focus-visible:not(:disabled) { outline-color: #3768FB; outline-style: solid; outline-width: 2px; @@ -4583,14 +4502,14 @@ exports[`Menu renders vertically with menu items 1`] = ` @media not all and (min-resolution: 0.001dpcm) { @supports (-webkit-appearance: none) and (stroke-color: transparent) { - .emotion-2:focus-visible:not(:disabled) { + .emotion-3:focus-visible:not(:disabled) { outline-style: auto; } } } @media screen and (prefers-reduced-motion: no-preference) { - .emotion-2 { + .emotion-3 { transition-property: background-color; transition-duration: 200ms; transition-timing-function: cubic-bezier(0, 0, .5, 1); @@ -4598,14 +4517,14 @@ exports[`Menu renders vertically with menu items 1`] = ` } @media screen and (prefers-reduced-motion: reduce) { - .emotion-2 { + .emotion-3 { transition-property: background-color; transition-duration: 0ms; transition-timing-function: cubic-bezier(0, 0, .5, 1); } } -.emotion-3 { +.emotion-4 { margin: 0; font-family: "Poppins",sans-serif; font-size: 14px; @@ -4616,18 +4535,40 @@ exports[`Menu renders vertically with menu items 1`] = ` display: inline-block; } -.emotion-3::before { +.emotion-4::before { content: ''; margin-bottom: -0.403em; display: block; } -.emotion-3::after { +.emotion-4::after { content: ''; margin-top: -0.4em; display: block; } +.emotion-5 { + box-sizing: border-box; +} + +.nk-menu-group+.emotion-5 { + margin-bottom: 24px; +} + +.nk-menu-item+.emotion-5 { + margin-bottom: 8px; +} + +.emotion-6 { + border-style: solid; + border-color: #C6C6C6; + border-width: 1px; + border-width: 0px; + margin: 0; + border-top-width: 1px; + width: 100%; +} + `; -exports[`Menu renders with default props 1`] = ` +exports[`Menu renders vertically with menu group 1`] = ` .emotion-0 { box-sizing: border-box; - width: 100%; + height: 100%; } .emotion-0>ul { box-sizing: border-box; + position: relative; list-style-type: none; margin: 0; padding: 0; @@ -4717,19 +4706,34 @@ exports[`Menu renders with default props 1`] = ` display: -webkit-flex; display: -ms-flexbox; display: flex; - width: 100%; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + height: 100%; } .emotion-0 li:last-of-type { - margin-right: 0; + margin-bottom: 0; } .emotion-1 { box-sizing: border-box; - margin-right: 8px; + margin-bottom: 24px; +} + +.emotion-1>ul { + box-sizing: border-box; + list-style-type: none; + margin: 0; + padding: 0; } .emotion-2 { + box-sizing: border-box; + margin-bottom: 8px; +} + +.emotion-3 { margin: 0; padding: 0; display: inline-grid; @@ -4749,14 +4753,13 @@ exports[`Menu renders with default props 1`] = ` -ms-flex-align: center; align-items: center; padding: 12px 16px; - width: 100%; min-width: 80px; min-height: 48px; box-sizing: border-box; -webkit-text-decoration: none; text-decoration: none; min-height: 48px; - min-width: auto; + min-width: 80px; cursor: default; overflow: hidden; border: none; @@ -4767,61 +4770,63 @@ exports[`Menu renders with default props 1`] = ` background-color: transparent; border-style: solid; border-color: transparent; - border-width: 0 0 2px 0; + border-width: 0 2px 0 0; color: #6A6A6A; cursor: pointer; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - text-align: center; + width: 100%; + -webkit-box-pack: start; + -ms-flex-pack: start; + -webkit-justify-content: flex-start; + justify-content: flex-start; + text-align: left; } -.emotion-2 svg { +.emotion-3 svg { width: 24px; height: 24px; } -.emotion-2 svg { +.emotion-3 svg { fill: #6A6A6A; } -.emotion-2:hover:not(:disabled) { - border-color: #3358CC; - color: #3B3B3B; +.emotion-3:hover:not(:disabled) { + background-color: #ECF1FF; + color: #3358CC; } -.emotion-2:hover:not(:disabled) svg { - fill: #3B3B3B; +.emotion-3:hover:not(:disabled) svg { + fill: #3358CC; } -.emotion-2:active:not(:disabled) { - border-color: #254CAC; - color: #111111; +.emotion-3:active:not(:disabled) { + background-color: #D5E0FC; + color: #3358CC; } -.emotion-2:active:not(:disabled) svg { - fill: #111111; +.emotion-3:active:not(:disabled) svg { + fill: #3358CC; } -.emotion-2:selected:hover:not(:disabled) { +.emotion-3:selected:hover:not(:disabled) { + background-color: transparent; border-color: #3358CC; - color: #3B3B3B; + color: #3358CC; } -.emotion-2:selected:hover:not(:disabled) svg { - fill: #3B3B3B; +.emotion-3:selected:hover:not(:disabled) svg { + fill: #3358CC; } -.emotion-2:disabled { +.emotion-3:disabled { color: #ABABAB; } -.emotion-2:disabled svg { +.emotion-3:disabled svg { fill: #ABABAB; } -.emotion-2:focus-visible:not(:disabled) { +.emotion-3:focus-visible:not(:disabled) { outline-color: #3768FB; outline-style: solid; outline-width: 2px; @@ -4830,14 +4835,14 @@ exports[`Menu renders with default props 1`] = ` @media not all and (min-resolution: 0.001dpcm) { @supports (-webkit-appearance: none) and (stroke-color: transparent) { - .emotion-2:focus-visible:not(:disabled) { + .emotion-3:focus-visible:not(:disabled) { outline-style: auto; } } } @media screen and (prefers-reduced-motion: no-preference) { - .emotion-2 { + .emotion-3 { transition-property: background-color; transition-duration: 200ms; transition-timing-function: cubic-bezier(0, 0, .5, 1); @@ -4845,14 +4850,14 @@ exports[`Menu renders with default props 1`] = ` } @media screen and (prefers-reduced-motion: reduce) { - .emotion-2 { + .emotion-3 { transition-property: background-color; transition-duration: 0ms; transition-timing-function: cubic-bezier(0, 0, .5, 1); } } -.emotion-3 { +.emotion-4 { margin: 0; font-family: "Poppins",sans-serif; font-size: 14px; @@ -4863,13 +4868,13 @@ exports[`Menu renders with default props 1`] = ` display: inline-block; } -.emotion-3::before { +.emotion-4::before { content: ''; margin-bottom: -0.403em; display: block; } -.emotion-3::after { +.emotion-4::after { content: ''; margin-top: -0.4em; display: block; @@ -4884,81 +4889,92 @@ exports[`Menu renders with default props 1`] = ` role="list" >
  • - - +
  • - Menu item - - -
    • -
  • - - + + Menu item + + +
    • +
  • - Menu item - - + + + Menu item + + +
    • +
  • - - +
  • - Menu item - - -
    • -
  • - - + + Menu item + + +
    • +
  • - Menu item - - + + + Menu item + + +
    • +     `; -exports[`Menu renders with logical prop overrides 1`] = ` +exports[`Menu renders vertically with menu items 1`] = ` .emotion-0 { box-sizing: border-box; - width: 100%; - margin-block: 20px; - padding-inline: 30px; + height: 100%; } .emotion-0>ul { box-sizing: border-box; + position: relative; list-style-type: none; margin: 0; padding: 0; @@ -4966,16 +4982,19 @@ exports[`Menu renders with logical prop overrides 1`] = ` display: -webkit-flex; display: -ms-flexbox; display: flex; - width: 100%; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + height: 100%; } .emotion-0 li:last-of-type { - margin-right: 0; + margin-bottom: 0; } .emotion-1 { box-sizing: border-box; - margin-right: 8px; + margin-bottom: 8px; } .emotion-2 { @@ -4998,14 +5017,13 @@ exports[`Menu renders with logical prop overrides 1`] = ` -ms-flex-align: center; align-items: center; padding: 12px 16px; - width: 100%; min-width: 80px; min-height: 48px; box-sizing: border-box; -webkit-text-decoration: none; text-decoration: none; min-height: 48px; - min-width: auto; + min-width: 80px; cursor: default; overflow: hidden; border: none; @@ -5016,14 +5034,15 @@ exports[`Menu renders with logical prop overrides 1`] = ` background-color: transparent; border-style: solid; border-color: transparent; - border-width: 0 0 2px 0; + border-width: 0 2px 0 0; color: #6A6A6A; cursor: pointer; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - text-align: center; + width: 100%; + -webkit-box-pack: start; + -ms-flex-pack: start; + -webkit-justify-content: flex-start; + justify-content: flex-start; + text-align: left; } .emotion-2 svg { @@ -5036,30 +5055,31 @@ exports[`Menu renders with logical prop overrides 1`] = ` } .emotion-2:hover:not(:disabled) { - border-color: #3358CC; - color: #3B3B3B; + background-color: #ECF1FF; + color: #3358CC; } .emotion-2:hover:not(:disabled) svg { - fill: #3B3B3B; + fill: #3358CC; } .emotion-2:active:not(:disabled) { - border-color: #254CAC; - color: #111111; + background-color: #D5E0FC; + color: #3358CC; } .emotion-2:active:not(:disabled) svg { - fill: #111111; + fill: #3358CC; } .emotion-2:selected:hover:not(:disabled) { + background-color: transparent; border-color: #3358CC; - color: #3B3B3B; + color: #3358CC; } .emotion-2:selected:hover:not(:disabled) svg { - fill: #3B3B3B; + fill: #3358CC; } .emotion-2:disabled { @@ -5197,15 +5217,16 @@ exports[`Menu renders with logical prop overrides 1`] = ` `; -exports[`MenuDivider renders horizontally 1`] = ` +exports[`Menu renders with default props 1`] = ` .emotion-0 { box-sizing: border-box; - height: 100%; + width: 100%; } .emotion-0>ul { box-sizing: border-box; + position: relative; list-style-type: none; margin: 0; padding: 0; @@ -5213,36 +5234,162 @@ exports[`MenuDivider renders horizontally 1`] = ` display: -webkit-flex; display: -ms-flexbox; display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - height: 100%; + width: 100%; } .emotion-0 li:last-of-type { - margin-bottom: 0; + margin-right: 0; } .emotion-1 { box-sizing: border-box; + margin-right: 8px; } -.nk-menu-group+.emotion-1 { - margin-bottom: 24px; +.emotion-2 { + margin: 0; + padding: 0; + display: inline-grid; + -webkit-column-gap: 8px; + column-gap: 8px; + grid-template-columns: repeat(1, auto); + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + -webkit-align-content: center; + -ms-flex-line-pack: center; + align-content: center; + justify-items: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 12px 16px; + min-width: 80px; + min-height: 48px; + box-sizing: border-box; + -webkit-text-decoration: none; + text-decoration: none; + min-height: 48px; + min-width: 80px; + cursor: default; + overflow: hidden; + border: none; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + background-color: transparent; + border-style: solid; + border-color: transparent; + border-width: 0 0 2px 0; + color: #6A6A6A; + cursor: pointer; + width: 100%; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + text-align: center; } -.nk-menu-item+.emotion-1 { - margin-bottom: 8px; +.emotion-2 svg { + width: 24px; + height: 24px; } -.emotion-2 { - border-style: solid; - border-color: #C6C6C6; - border-width: 1px; - border-width: 0px; +.emotion-2 svg { + fill: #6A6A6A; +} + +.emotion-2:hover:not(:disabled) { + border-color: #3358CC; + color: #3B3B3B; +} + +.emotion-2:hover:not(:disabled) svg { + fill: #3B3B3B; +} + +.emotion-2:active:not(:disabled) { + border-color: #254CAC; + color: #111111; +} + +.emotion-2:active:not(:disabled) svg { + fill: #111111; +} + +.emotion-2:selected:hover:not(:disabled) { + border-color: #3358CC; + color: #3B3B3B; +} + +.emotion-2:selected:hover:not(:disabled) svg { + fill: #3B3B3B; +} + +.emotion-2:disabled { + color: #ABABAB; +} + +.emotion-2:disabled svg { + fill: #ABABAB; +} + +.emotion-2:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-2:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + +@media screen and (prefers-reduced-motion: no-preference) { + .emotion-2 { + transition-property: background-color; + transition-duration: 200ms; + transition-timing-function: cubic-bezier(0, 0, .5, 1); + } +} + +@media screen and (prefers-reduced-motion: reduce) { + .emotion-2 { + transition-property: background-color; + transition-duration: 0ms; + transition-timing-function: cubic-bezier(0, 0, .5, 1); + } +} + +.emotion-3 { margin: 0; - border-top-width: 1px; - width: 100%; + font-family: "Poppins",sans-serif; + font-size: 14px; + line-height: 21px; + font-weight: 500; + letter-spacing: 0; + padding: 0.5px 0px; + display: inline-block; +} + +.emotion-3::before { + content: ''; + margin-bottom: -0.403em; + display: block; +} + +.emotion-3::after { + content: ''; + margin-top: -0.4em; + display: block; } `; -exports[`MenuDivider renders vertically with default props 1`] = ` +exports[`Menu renders with logical prop overrides 1`] = ` .emotion-0 { box-sizing: border-box; width: 100%; + margin-block: 20px; + padding-inline: 30px; } .emotion-0>ul { box-sizing: border-box; + position: relative; list-style-type: none; margin: 0; padding: 0; @@ -5294,25 +5493,3224 @@ exports[`MenuDivider renders vertically with default props 1`] = ` .emotion-1 { box-sizing: border-box; + margin-right: 8px; +} + +.emotion-2 { + margin: 0; + padding: 0; + display: inline-grid; + -webkit-column-gap: 8px; + column-gap: 8px; + grid-template-columns: repeat(1, auto); + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + -webkit-align-content: center; + -ms-flex-line-pack: center; + align-content: center; + justify-items: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 12px 16px; + min-width: 80px; + min-height: 48px; + box-sizing: border-box; + -webkit-text-decoration: none; + text-decoration: none; + min-height: 48px; + min-width: 80px; + cursor: default; + overflow: hidden; + border: none; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + background-color: transparent; + border-style: solid; + border-color: transparent; + border-width: 0 0 2px 0; + color: #6A6A6A; + cursor: pointer; + width: 100%; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + text-align: center; +} + +.emotion-2 svg { + width: 24px; + height: 24px; +} + +.emotion-2 svg { + fill: #6A6A6A; +} + +.emotion-2:hover:not(:disabled) { + border-color: #3358CC; + color: #3B3B3B; +} + +.emotion-2:hover:not(:disabled) svg { + fill: #3B3B3B; +} + +.emotion-2:active:not(:disabled) { + border-color: #254CAC; + color: #111111; +} + +.emotion-2:active:not(:disabled) svg { + fill: #111111; +} + +.emotion-2:selected:hover:not(:disabled) { + border-color: #3358CC; + color: #3B3B3B; +} + +.emotion-2:selected:hover:not(:disabled) svg { + fill: #3B3B3B; +} + +.emotion-2:disabled { + color: #ABABAB; +} + +.emotion-2:disabled svg { + fill: #ABABAB; +} + +.emotion-2:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-2:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + +@media screen and (prefers-reduced-motion: no-preference) { + .emotion-2 { + transition-property: background-color; + transition-duration: 200ms; + transition-timing-function: cubic-bezier(0, 0, .5, 1); + } +} + +@media screen and (prefers-reduced-motion: reduce) { + .emotion-2 { + transition-property: background-color; + transition-duration: 0ms; + transition-timing-function: cubic-bezier(0, 0, .5, 1); + } +} + +.emotion-3 { + margin: 0; + font-family: "Poppins",sans-serif; + font-size: 14px; + line-height: 21px; + font-weight: 500; + letter-spacing: 0; + padding: 0.5px 0px; + display: inline-block; +} + +.emotion-3::before { + content: ''; + margin-bottom: -0.403em; + display: block; +} + +.emotion-3::after { + content: ''; + margin-top: -0.4em; + display: block; +} + + + +`; + +exports[`MenuDivider renders horizontally 1`] = ` + + .emotion-0 { + box-sizing: border-box; + height: 100%; +} + +.emotion-0>ul { + box-sizing: border-box; + position: relative; + list-style-type: none; + margin: 0; + padding: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + height: 100%; +} + +.emotion-0 li:last-of-type { + margin-bottom: 0; +} + +.emotion-1 { + box-sizing: border-box; +} + +.nk-menu-group+.emotion-1 { + margin-bottom: 24px; +} + +.nk-menu-item+.emotion-1 { + margin-bottom: 8px; +} + +.emotion-2 { + border-style: solid; + border-color: #C6C6C6; + border-width: 1px; + border-width: 0px; + margin: 0; + border-top-width: 1px; + width: 100%; +} + + + +`; + +exports[`MenuDivider renders vertically with default props 1`] = ` + + .emotion-0 { + box-sizing: border-box; + width: 100%; +} + +.emotion-0>ul { + box-sizing: border-box; + position: relative; + list-style-type: none; + margin: 0; + padding: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + width: 100%; +} + +.emotion-0 li:last-of-type { + margin-right: 0; +} + +.emotion-1 { + box-sizing: border-box; +} + +.nk-menu-group+.emotion-1 { + margin-right: 24px; +} + +.nk-menu-item+.emotion-1 { + margin-right: 8px; +} + +.emotion-2 { + border-style: solid; + border-color: #C6C6C6; + border-width: 1px; + border-width: 0px; + margin: 0; + border-left-width: 1px; + display: inline-block; + height: 100%; +} + + + +`; + +exports[`MenuDivider renders with overrides 1`] = ` + + .emotion-0 { + box-sizing: border-box; + width: 100%; +} + +.emotion-0>ul { + box-sizing: border-box; + position: relative; + list-style-type: none; + margin: 0; + padding: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + width: 100%; +} + +.emotion-0 li:last-of-type { + margin-right: 0; +} + +.emotion-1 { + box-sizing: border-box; +} + +.nk-menu-group+.emotion-1 { + margin-right: 12px; +} + +.nk-menu-item+.emotion-1 { + margin-right: 12px; +} + +.emotion-2 { + border-style: solid; + border-color: red; + border-width: 2px; + border-width: 0px; + margin: 0; + border-left-width: 2px; + display: inline-block; + height: 100%; +} + + + +`; + +exports[`MenuGroup renders with overrides 1`] = ` + + .emotion-0 { + box-sizing: border-box; + height: 100%; +} + +.emotion-0>ul { + box-sizing: border-box; + position: relative; + list-style-type: none; + margin: 0; + padding: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + height: 100%; +} + +.emotion-0 li:last-of-type { + margin-bottom: 0; +} + +.emotion-1 { + box-sizing: border-box; + background-color: #2f1e9f; + border-style: solid; + border-color: #8074eb; + border-width: 4px 4px 0px 4px; + color: #dfd3d3; + border-radius: 10px 10px 0 0; + margin-bottom: 12px; +} + +.emotion-1 svg { + fill: grey; +} + +.emotion-1:hover:not(:disabled) { + background-color: #d8335c; +} + +.emotion-1>ul { + box-sizing: border-box; + list-style-type: none; + margin: 0; + padding: 0; +} + +.emotion-2 { + box-sizing: border-box; + margin-bottom: 32px; + padding-left: 16px; + padding-right: 16px; +} + +.emotion-3 { + margin: 0; + color: #6A6A6A; + font-family: "Poppins",sans-serif; + font-size: 18px; + line-height: 20.25px; + font-weight: 700; + letter-spacing: 0; + padding: 0.5px 0px; +} + +.emotion-3 svg { + fill: #6A6A6A; +} + +.emotion-3::before { + content: ''; + margin-bottom: -0.2155em; + display: block; +} + +.emotion-3::after { + content: ''; + margin-top: -0.2125em; + display: block; +} + +.emotion-4 { + box-sizing: border-box; + margin-bottom: 8px; +} + +.emotion-5 { + margin: 0; + padding: 0; + display: inline-grid; + -webkit-column-gap: 8px; + column-gap: 8px; + grid-template-columns: repeat(1, auto); + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + -webkit-align-content: center; + -ms-flex-line-pack: center; + align-content: center; + justify-items: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 12px 16px; + min-width: 80px; + min-height: 48px; + box-sizing: border-box; + -webkit-text-decoration: none; + text-decoration: none; + min-height: 48px; + min-width: 80px; + cursor: default; + overflow: hidden; + border: none; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + background-color: transparent; + border-style: solid; + border-color: transparent; + border-width: 0 2px 0 0; + color: #6A6A6A; + cursor: pointer; + width: 100%; + -webkit-box-pack: start; + -ms-flex-pack: start; + -webkit-justify-content: flex-start; + justify-content: flex-start; + text-align: left; +} + +.emotion-5 svg { + width: 24px; + height: 24px; +} + +.emotion-5 svg { + fill: #6A6A6A; +} + +.emotion-5:hover:not(:disabled) { + background-color: #ECF1FF; + color: #3358CC; +} + +.emotion-5:hover:not(:disabled) svg { + fill: #3358CC; +} + +.emotion-5:active:not(:disabled) { + background-color: #D5E0FC; + color: #3358CC; +} + +.emotion-5:active:not(:disabled) svg { + fill: #3358CC; +} + +.emotion-5:selected:hover:not(:disabled) { + background-color: transparent; + border-color: #3358CC; + color: #3358CC; +} + +.emotion-5:selected:hover:not(:disabled) svg { + fill: #3358CC; +} + +.emotion-5:disabled { + color: #ABABAB; +} + +.emotion-5:disabled svg { + fill: #ABABAB; +} + +.emotion-5:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-5:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + +@media screen and (prefers-reduced-motion: no-preference) { + .emotion-5 { + transition-property: background-color; + transition-duration: 200ms; + transition-timing-function: cubic-bezier(0, 0, .5, 1); + } +} + +@media screen and (prefers-reduced-motion: reduce) { + .emotion-5 { + transition-property: background-color; + transition-duration: 0ms; + transition-timing-function: cubic-bezier(0, 0, .5, 1); + } +} + +.emotion-6 { + margin: 0; + font-family: "Poppins",sans-serif; + font-size: 14px; + line-height: 21px; + font-weight: 500; + letter-spacing: 0; + padding: 0.5px 0px; + display: inline-block; +} + +.emotion-6::before { + content: ''; + margin-bottom: -0.403em; + display: block; +} + +.emotion-6::after { + content: ''; + margin-top: -0.4em; + display: block; +} + + + +`; + +exports[`MenuGroup renders with title as a component 1`] = ` + + .emotion-0 { + box-sizing: border-box; + height: 100%; +} + +.emotion-0>ul { + box-sizing: border-box; + position: relative; + list-style-type: none; + margin: 0; + padding: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + height: 100%; +} + +.emotion-0 li:last-of-type { + margin-bottom: 0; +} + +.emotion-1 { + box-sizing: border-box; + margin-bottom: 24px; +} + +.emotion-1>ul { + box-sizing: border-box; + list-style-type: none; + margin: 0; + padding: 0; +} + +.emotion-2 { + box-sizing: border-box; + margin-bottom: 24px; +} + +.emotion-3 { + display: inline-block; + vertical-align: middle; + overflow: hidden; + fill: #3B3B3B; + vertical-align: unset; + display: inline-block; +} + +@media screen and (prefers-reduced-motion: no-preference) { + .emotion-3 { + transition-property: fill; + transition-duration: 200ms; + transition-timing-function: cubic-bezier(0, 0, .5, 1); + } +} + +@media screen and (prefers-reduced-motion: reduce) { + .emotion-3 { + transition-property: fill; + transition-duration: 0ms; + transition-timing-function: cubic-bezier(0, 0, .5, 1); + } +} + +.emotion-3.emotion-3 { + width: 16px; + height: 16px; +} + +.emotion-7 { + box-sizing: border-box; + margin-bottom: 8px; +} + +.emotion-8 { + margin: 0; + padding: 0; + display: inline-grid; + -webkit-column-gap: 8px; + column-gap: 8px; + grid-template-columns: repeat(1, auto); + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + -webkit-align-content: center; + -ms-flex-line-pack: center; + align-content: center; + justify-items: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 12px 16px; + min-width: 80px; + min-height: 48px; + box-sizing: border-box; + -webkit-text-decoration: none; + text-decoration: none; + min-height: 48px; + min-width: 80px; + cursor: default; + overflow: hidden; + border: none; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + background-color: transparent; + border-style: solid; + border-color: transparent; + border-width: 0 2px 0 0; + color: #6A6A6A; + cursor: pointer; + width: 100%; + -webkit-box-pack: start; + -ms-flex-pack: start; + -webkit-justify-content: flex-start; + justify-content: flex-start; + text-align: left; +} + +.emotion-8 svg { + width: 24px; + height: 24px; +} + +.emotion-8 svg { + fill: #6A6A6A; +} + +.emotion-8:hover:not(:disabled) { + background-color: #ECF1FF; + color: #3358CC; +} + +.emotion-8:hover:not(:disabled) svg { + fill: #3358CC; +} + +.emotion-8:active:not(:disabled) { + background-color: #D5E0FC; + color: #3358CC; +} + +.emotion-8:active:not(:disabled) svg { + fill: #3358CC; +} + +.emotion-8:selected:hover:not(:disabled) { + background-color: transparent; + border-color: #3358CC; + color: #3358CC; +} + +.emotion-8:selected:hover:not(:disabled) svg { + fill: #3358CC; +} + +.emotion-8:disabled { + color: #ABABAB; +} + +.emotion-8:disabled svg { + fill: #ABABAB; +} + +.emotion-8:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-8:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + +@media screen and (prefers-reduced-motion: no-preference) { + .emotion-8 { + transition-property: background-color; + transition-duration: 200ms; + transition-timing-function: cubic-bezier(0, 0, .5, 1); + } +} + +@media screen and (prefers-reduced-motion: reduce) { + .emotion-8 { + transition-property: background-color; + transition-duration: 0ms; + transition-timing-function: cubic-bezier(0, 0, .5, 1); + } +} + +.emotion-9 { + margin: 0; + font-family: "Poppins",sans-serif; + font-size: 14px; + line-height: 21px; + font-weight: 500; + letter-spacing: 0; + padding: 0.5px 0px; + display: inline-block; +} + +.emotion-9::before { + content: ''; + margin-bottom: -0.403em; + display: block; +} + +.emotion-9::after { + content: ''; + margin-top: -0.4em; + display: block; +} + + + +`; + +exports[`MenuGroup renders with title when vertical 1`] = ` + + .emotion-0 { + box-sizing: border-box; + height: 100%; +} + +.emotion-0>ul { + box-sizing: border-box; + position: relative; + list-style-type: none; + margin: 0; + padding: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + height: 100%; +} + +.emotion-0 li:last-of-type { + margin-bottom: 0; +} + +.emotion-1 { + box-sizing: border-box; + margin-bottom: 24px; +} + +.emotion-1>ul { + box-sizing: border-box; + list-style-type: none; + margin: 0; + padding: 0; +} + +.emotion-2 { + box-sizing: border-box; + margin-bottom: 24px; +} + +.emotion-3 { + margin: 0; + color: #6A6A6A; + font-family: "Poppins",sans-serif; + font-size: 20px; + line-height: 22.5px; + font-weight: 700; + letter-spacing: 0; + padding: 0.5px 0px; +} + +.emotion-3 svg { + fill: #6A6A6A; +} + +.emotion-3::before { + content: ''; + margin-bottom: -0.2155em; + display: block; +} + +.emotion-3::after { + content: ''; + margin-top: -0.2125em; + display: block; +} + +.emotion-4 { + box-sizing: border-box; + margin-bottom: 8px; +} + +.emotion-5 { + margin: 0; + padding: 0; + display: inline-grid; + -webkit-column-gap: 8px; + column-gap: 8px; + grid-template-columns: repeat(1, auto); + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + -webkit-align-content: center; + -ms-flex-line-pack: center; + align-content: center; + justify-items: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 12px 16px; + min-width: 80px; + min-height: 48px; + box-sizing: border-box; + -webkit-text-decoration: none; + text-decoration: none; + min-height: 48px; + min-width: 80px; + cursor: default; + overflow: hidden; + border: none; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + background-color: transparent; + border-style: solid; + border-color: transparent; + border-width: 0 2px 0 0; + color: #6A6A6A; + cursor: pointer; + width: 100%; + -webkit-box-pack: start; + -ms-flex-pack: start; + -webkit-justify-content: flex-start; + justify-content: flex-start; + text-align: left; +} + +.emotion-5 svg { + width: 24px; + height: 24px; +} + +.emotion-5 svg { + fill: #6A6A6A; +} + +.emotion-5:hover:not(:disabled) { + background-color: #ECF1FF; + color: #3358CC; +} + +.emotion-5:hover:not(:disabled) svg { + fill: #3358CC; +} + +.emotion-5:active:not(:disabled) { + background-color: #D5E0FC; + color: #3358CC; +} + +.emotion-5:active:not(:disabled) svg { + fill: #3358CC; +} + +.emotion-5:selected:hover:not(:disabled) { + background-color: transparent; + border-color: #3358CC; + color: #3358CC; +} + +.emotion-5:selected:hover:not(:disabled) svg { + fill: #3358CC; +} + +.emotion-5:disabled { + color: #ABABAB; +} + +.emotion-5:disabled svg { + fill: #ABABAB; +} + +.emotion-5:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-5:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + +@media screen and (prefers-reduced-motion: no-preference) { + .emotion-5 { + transition-property: background-color; + transition-duration: 200ms; + transition-timing-function: cubic-bezier(0, 0, .5, 1); + } +} + +@media screen and (prefers-reduced-motion: reduce) { + .emotion-5 { + transition-property: background-color; + transition-duration: 0ms; + transition-timing-function: cubic-bezier(0, 0, .5, 1); + } +} + +.emotion-6 { + margin: 0; + font-family: "Poppins",sans-serif; + font-size: 14px; + line-height: 21px; + font-weight: 500; + letter-spacing: 0; + padding: 0.5px 0px; + display: inline-block; +} + +.emotion-6::before { + content: ''; + margin-bottom: -0.403em; + display: block; +} + +.emotion-6::after { + content: ''; + margin-top: -0.4em; + display: block; +} + + + +`; + +exports[`MenuGroup renders without title when horizontal 1`] = ` + + .emotion-0 { + box-sizing: border-box; + height: 100%; +} + +.emotion-0>ul { + box-sizing: border-box; + position: relative; + list-style-type: none; + margin: 0; + padding: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + height: 100%; +} + +.emotion-0 li:last-of-type { + margin-bottom: 0; +} + +.emotion-1 { + box-sizing: border-box; + margin-bottom: 24px; +} + +.emotion-1>ul { + box-sizing: border-box; + list-style-type: none; + margin: 0; + padding: 0; +} + +.emotion-2 { + box-sizing: border-box; + margin-bottom: 24px; +} + +.emotion-3 { + margin: 0; + color: #6A6A6A; + font-family: "Poppins",sans-serif; + font-size: 20px; + line-height: 22.5px; + font-weight: 700; + letter-spacing: 0; + padding: 0.5px 0px; +} + +.emotion-3 svg { + fill: #6A6A6A; +} + +.emotion-3::before { + content: ''; + margin-bottom: -0.2155em; + display: block; +} + +.emotion-3::after { + content: ''; + margin-top: -0.2125em; + display: block; +} + +.emotion-4 { + box-sizing: border-box; + margin-bottom: 8px; +} + +.emotion-5 { + margin: 0; + padding: 0; + display: inline-grid; + -webkit-column-gap: 8px; + column-gap: 8px; + grid-template-columns: repeat(1, auto); + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + -webkit-align-content: center; + -ms-flex-line-pack: center; + align-content: center; + justify-items: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 12px 16px; + min-width: 80px; + min-height: 48px; + box-sizing: border-box; + -webkit-text-decoration: none; + text-decoration: none; + min-height: 48px; + min-width: 80px; + cursor: default; + overflow: hidden; + border: none; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + background-color: transparent; + border-style: solid; + border-color: transparent; + border-width: 0 2px 0 0; + color: #6A6A6A; + cursor: pointer; + width: 100%; + -webkit-box-pack: start; + -ms-flex-pack: start; + -webkit-justify-content: flex-start; + justify-content: flex-start; + text-align: left; +} + +.emotion-5 svg { + width: 24px; + height: 24px; +} + +.emotion-5 svg { + fill: #6A6A6A; +} + +.emotion-5:hover:not(:disabled) { + background-color: #ECF1FF; + color: #3358CC; +} + +.emotion-5:hover:not(:disabled) svg { + fill: #3358CC; +} + +.emotion-5:active:not(:disabled) { + background-color: #D5E0FC; + color: #3358CC; +} + +.emotion-5:active:not(:disabled) svg { + fill: #3358CC; +} + +.emotion-5:selected:hover:not(:disabled) { + background-color: transparent; + border-color: #3358CC; + color: #3358CC; +} + +.emotion-5:selected:hover:not(:disabled) svg { + fill: #3358CC; +} + +.emotion-5:disabled { + color: #ABABAB; +} + +.emotion-5:disabled svg { + fill: #ABABAB; +} + +.emotion-5:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-5:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + +@media screen and (prefers-reduced-motion: no-preference) { + .emotion-5 { + transition-property: background-color; + transition-duration: 200ms; + transition-timing-function: cubic-bezier(0, 0, .5, 1); + } +} + +@media screen and (prefers-reduced-motion: reduce) { + .emotion-5 { + transition-property: background-color; + transition-duration: 0ms; + transition-timing-function: cubic-bezier(0, 0, .5, 1); + } +} + +.emotion-6 { + margin: 0; + font-family: "Poppins",sans-serif; + font-size: 14px; + line-height: 21px; + font-weight: 500; + letter-spacing: 0; + padding: 0.5px 0px; + display: inline-block; +} + +.emotion-6::before { + content: ''; + margin-bottom: -0.403em; + display: block; +} + +.emotion-6::after { + content: ''; + margin-top: -0.4em; + display: block; +} + + + +`; + +exports[`MenuItem renders in large size 1`] = ` + + .emotion-0 { + box-sizing: border-box; + width: 100%; +} + +.emotion-0>ul { + box-sizing: border-box; + position: relative; + list-style-type: none; + margin: 0; + padding: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + width: 100%; +} + +.emotion-0 li:last-of-type { + margin-right: 0; +} + +.emotion-1 { + box-sizing: border-box; + margin-right: 8px; +} + +.emotion-2 { + margin: 0; + padding: 0; + display: inline-grid; + -webkit-column-gap: 8px; + column-gap: 8px; + grid-template-columns: repeat(1, auto); + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + -webkit-align-content: center; + -ms-flex-line-pack: center; + align-content: center; + justify-items: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 12px 16px; + min-width: 80px; + min-height: 48px; + box-sizing: border-box; + -webkit-text-decoration: none; + text-decoration: none; + min-height: 48px; + min-width: 80px; + cursor: default; + overflow: hidden; + border: none; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + background-color: transparent; + border-style: solid; + border-color: transparent; + border-width: 0 0 2px 0; + color: #6A6A6A; + cursor: pointer; + width: 100%; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + text-align: center; +} + +.emotion-2 svg { + width: 24px; + height: 24px; +} + +.emotion-2 svg { + fill: #6A6A6A; +} + +.emotion-2:hover:not(:disabled) { + border-color: #3358CC; + color: #3B3B3B; +} + +.emotion-2:hover:not(:disabled) svg { + fill: #3B3B3B; +} + +.emotion-2:active:not(:disabled) { + border-color: #254CAC; + color: #111111; +} + +.emotion-2:active:not(:disabled) svg { + fill: #111111; +} + +.emotion-2:selected:hover:not(:disabled) { + border-color: #3358CC; + color: #3B3B3B; +} + +.emotion-2:selected:hover:not(:disabled) svg { + fill: #3B3B3B; +} + +.emotion-2:disabled { + color: #ABABAB; +} + +.emotion-2:disabled svg { + fill: #ABABAB; +} + +.emotion-2:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-2:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + +@media screen and (prefers-reduced-motion: no-preference) { + .emotion-2 { + transition-property: background-color; + transition-duration: 200ms; + transition-timing-function: cubic-bezier(0, 0, .5, 1); + } +} + +@media screen and (prefers-reduced-motion: reduce) { + .emotion-2 { + transition-property: background-color; + transition-duration: 0ms; + transition-timing-function: cubic-bezier(0, 0, .5, 1); + } +} + +.emotion-3 { + margin: 0; + font-family: "Poppins",sans-serif; + font-size: 14px; + line-height: 21px; + font-weight: 500; + letter-spacing: 0; + padding: 0.5px 0px; + display: inline-block; +} + +.emotion-3::before { + content: ''; + margin-bottom: -0.403em; + display: block; +} + +.emotion-3::after { + content: ''; + margin-top: -0.4em; + display: block; +} + + + +`; + +exports[`MenuItem renders in medium size 1`] = ` + + .emotion-0 { + box-sizing: border-box; + width: 100%; +} + +.emotion-0>ul { + box-sizing: border-box; + position: relative; + list-style-type: none; + margin: 0; + padding: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + width: 100%; +} + +.emotion-0 li:last-of-type { + margin-right: 0; +} + +.emotion-1 { + box-sizing: border-box; + margin-right: 8px; +} + +.emotion-2 { + margin: 0; + padding: 0; + display: inline-grid; + -webkit-column-gap: 8px; + column-gap: 8px; + grid-template-columns: repeat(1, auto); + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + -webkit-align-content: center; + -ms-flex-line-pack: center; + align-content: center; + justify-items: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 12px 16px; + min-width: 80px; + min-height: 48px; + box-sizing: border-box; + -webkit-text-decoration: none; + text-decoration: none; + min-height: 48px; + min-width: 80px; + cursor: default; + overflow: hidden; + border: none; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + background-color: transparent; + border-style: solid; + border-color: transparent; + border-width: 0 0 2px 0; + color: #6A6A6A; + cursor: pointer; + width: 100%; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + text-align: center; +} + +.emotion-2 svg { + width: 24px; + height: 24px; +} + +.emotion-2 svg { + fill: #6A6A6A; +} + +.emotion-2:hover:not(:disabled) { + border-color: #3358CC; + color: #3B3B3B; +} + +.emotion-2:hover:not(:disabled) svg { + fill: #3B3B3B; +} + +.emotion-2:active:not(:disabled) { + border-color: #254CAC; + color: #111111; +} + +.emotion-2:active:not(:disabled) svg { + fill: #111111; +} + +.emotion-2:selected:hover:not(:disabled) { + border-color: #3358CC; + color: #3B3B3B; +} + +.emotion-2:selected:hover:not(:disabled) svg { + fill: #3B3B3B; +} + +.emotion-2:disabled { + color: #ABABAB; +} + +.emotion-2:disabled svg { + fill: #ABABAB; +} + +.emotion-2:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-2:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + +@media screen and (prefers-reduced-motion: no-preference) { + .emotion-2 { + transition-property: background-color; + transition-duration: 200ms; + transition-timing-function: cubic-bezier(0, 0, .5, 1); + } +} + +@media screen and (prefers-reduced-motion: reduce) { + .emotion-2 { + transition-property: background-color; + transition-duration: 0ms; + transition-timing-function: cubic-bezier(0, 0, .5, 1); + } +} + +.emotion-3 { + margin: 0; + font-family: "Poppins",sans-serif; + font-size: 14px; + line-height: 21px; + font-weight: 500; + letter-spacing: 0; + padding: 0.5px 0px; + display: inline-block; +} + +.emotion-3::before { + content: ''; + margin-bottom: -0.403em; + display: block; +} + +.emotion-3::after { + content: ''; + margin-top: -0.4em; + display: block; +} + + + +`; + +exports[`MenuItem renders in small size 1`] = ` + + .emotion-0 { + box-sizing: border-box; + width: 100%; +} + +.emotion-0>ul { + box-sizing: border-box; + position: relative; + list-style-type: none; + margin: 0; + padding: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + width: 100%; +} + +.emotion-0 li:last-of-type { + margin-right: 0; +} + +.emotion-1 { + box-sizing: border-box; + margin-right: 8px; +} + +.emotion-2 { + margin: 0; + padding: 0; + display: inline-grid; + -webkit-column-gap: 8px; + column-gap: 8px; + grid-template-columns: repeat(1, auto); + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + -webkit-align-content: center; + -ms-flex-line-pack: center; + align-content: center; + justify-items: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 12px 16px; + min-width: 80px; + min-height: 48px; + box-sizing: border-box; + -webkit-text-decoration: none; + text-decoration: none; + min-height: 48px; + min-width: 80px; + cursor: default; + overflow: hidden; + border: none; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + background-color: transparent; + border-style: solid; + border-color: transparent; + border-width: 0 0 2px 0; + color: #6A6A6A; + cursor: pointer; + width: 100%; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + text-align: center; +} + +.emotion-2 svg { + width: 24px; + height: 24px; +} + +.emotion-2 svg { + fill: #6A6A6A; +} + +.emotion-2:hover:not(:disabled) { + border-color: #3358CC; + color: #3B3B3B; +} + +.emotion-2:hover:not(:disabled) svg { + fill: #3B3B3B; +} + +.emotion-2:active:not(:disabled) { + border-color: #254CAC; + color: #111111; +} + +.emotion-2:active:not(:disabled) svg { + fill: #111111; +} + +.emotion-2:selected:hover:not(:disabled) { + border-color: #3358CC; + color: #3B3B3B; +} + +.emotion-2:selected:hover:not(:disabled) svg { + fill: #3B3B3B; +} + +.emotion-2:disabled { + color: #ABABAB; +} + +.emotion-2:disabled svg { + fill: #ABABAB; +} + +.emotion-2:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-2:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + +@media screen and (prefers-reduced-motion: no-preference) { + .emotion-2 { + transition-property: background-color; + transition-duration: 200ms; + transition-timing-function: cubic-bezier(0, 0, .5, 1); + } +} + +@media screen and (prefers-reduced-motion: reduce) { + .emotion-2 { + transition-property: background-color; + transition-duration: 0ms; + transition-timing-function: cubic-bezier(0, 0, .5, 1); + } +} + +.emotion-3 { + margin: 0; + font-family: "Poppins",sans-serif; + font-size: 14px; + line-height: 21px; + font-weight: 500; + letter-spacing: 0; + padding: 0.5px 0px; + display: inline-block; +} + +.emotion-3::before { + content: ''; + margin-bottom: -0.403em; + display: block; +} + +.emotion-3::after { + content: ''; + margin-top: -0.4em; + display: block; +} + + + +`; + +exports[`MenuItem renders menu item with anchor attributes 1`] = ` + + .emotion-0 { + box-sizing: border-box; + width: 100%; +} + +.emotion-0>ul { + box-sizing: border-box; + position: relative; + list-style-type: none; + margin: 0; + padding: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + width: 100%; +} + +.emotion-0 li:last-of-type { + margin-right: 0; +} + +.emotion-1 { + box-sizing: border-box; + margin-right: 8px; +} + +.emotion-2 { + margin: 0; + padding: 0; + display: inline-grid; + -webkit-column-gap: 8px; + column-gap: 8px; + grid-template-columns: repeat(1, auto); + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + -webkit-align-content: center; + -ms-flex-line-pack: center; + align-content: center; + justify-items: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 12px 16px; + min-width: 80px; + min-height: 48px; + box-sizing: border-box; + -webkit-text-decoration: none; + text-decoration: none; + min-height: 48px; + min-width: 80px; + cursor: default; + overflow: hidden; + border: none; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + background-color: transparent; + border-style: solid; + border-color: transparent; + border-width: 0 0 2px 0; + color: #6A6A6A; + cursor: pointer; + width: 100%; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + text-align: center; +} + +.emotion-2 svg { + width: 24px; + height: 24px; +} + +.emotion-2 svg { + fill: #6A6A6A; +} + +.emotion-2:hover:not(:disabled) { + border-color: #3358CC; + color: #3B3B3B; +} + +.emotion-2:hover:not(:disabled) svg { + fill: #3B3B3B; +} + +.emotion-2:active:not(:disabled) { + border-color: #254CAC; + color: #111111; +} + +.emotion-2:active:not(:disabled) svg { + fill: #111111; +} + +.emotion-2:selected:hover:not(:disabled) { + border-color: #3358CC; + color: #3B3B3B; +} + +.emotion-2:selected:hover:not(:disabled) svg { + fill: #3B3B3B; +} + +.emotion-2:disabled { + color: #ABABAB; +} + +.emotion-2:disabled svg { + fill: #ABABAB; +} + +.emotion-2:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-2:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + +@media screen and (prefers-reduced-motion: no-preference) { + .emotion-2 { + transition-property: background-color; + transition-duration: 200ms; + transition-timing-function: cubic-bezier(0, 0, .5, 1); + } +} + +@media screen and (prefers-reduced-motion: reduce) { + .emotion-2 { + transition-property: background-color; + transition-duration: 0ms; + transition-timing-function: cubic-bezier(0, 0, .5, 1); + } +} + +.emotion-3 { + margin: 0; + font-family: "Poppins",sans-serif; + font-size: 14px; + line-height: 21px; + font-weight: 500; + letter-spacing: 0; + padding: 0.5px 0px; + display: inline-block; +} + +.emotion-3::before { + content: ''; + margin-bottom: -0.403em; + display: block; +} + +.emotion-3::after { + content: ''; + margin-top: -0.4em; + display: block; +} + + + +`; + +exports[`MenuItem renders selected menu item with aria attributes 1`] = ` + + .emotion-0 { + box-sizing: border-box; + width: 100%; +} + +.emotion-0>ul { + box-sizing: border-box; + position: relative; + list-style-type: none; + margin: 0; + padding: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + width: 100%; +} + +.emotion-0 li:last-of-type { + margin-right: 0; +} + +.emotion-1 { + box-sizing: border-box; + margin-right: 8px; +} + +.emotion-2 { + margin: 0; + padding: 0; + display: inline-grid; + -webkit-column-gap: 8px; + column-gap: 8px; + grid-template-columns: repeat(2, auto); + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + -webkit-align-content: center; + -ms-flex-line-pack: center; + align-content: center; + justify-items: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 12px 16px; + min-width: 80px; + min-height: 48px; + box-sizing: border-box; + -webkit-text-decoration: none; + text-decoration: none; + min-height: 48px; + min-width: 80px; + cursor: default; + overflow: hidden; + border: none; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + background-color: transparent; + border-style: solid; + border-color: transparent; + border-width: 0 0 2px 0; + color: #6A6A6A; + cursor: pointer; + width: 100%; + background-color: transparent; + border-style: solid; + border-color: #3358CC; + border-width: 0 0 2px 0; + color: #3B3B3B; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + text-align: center; +} + +.emotion-2 svg { + width: 24px; + height: 24px; +} + +.emotion-2 svg { + fill: #6A6A6A; +} + +.emotion-2:hover:not(:disabled) { + border-color: #3358CC; + color: #3B3B3B; +} + +.emotion-2:hover:not(:disabled) svg { + fill: #3B3B3B; +} + +.emotion-2:active:not(:disabled) { + border-color: #254CAC; + color: #111111; +} + +.emotion-2:active:not(:disabled) svg { + fill: #111111; +} + +.emotion-2:selected:hover:not(:disabled) { + border-color: #3358CC; + color: #3B3B3B; +} + +.emotion-2:selected:hover:not(:disabled) svg { + fill: #3B3B3B; +} + +.emotion-2:disabled { + color: #ABABAB; +} + +.emotion-2:disabled svg { + fill: #ABABAB; +} + +.emotion-2:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-2:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + +@media screen and (prefers-reduced-motion: no-preference) { + .emotion-2 { + transition-property: background-color; + transition-duration: 200ms; + transition-timing-function: cubic-bezier(0, 0, .5, 1); + } +} + +@media screen and (prefers-reduced-motion: reduce) { + .emotion-2 { + transition-property: background-color; + transition-duration: 0ms; + transition-timing-function: cubic-bezier(0, 0, .5, 1); + } +} + +.emotion-2 svg { + fill: #3B3B3B; +} + +.emotion-2:hover:not(:disabled) { + border-color: #3358CC; + color: #3B3B3B; +} + +.emotion-2:hover:not(:disabled) svg { + fill: #3B3B3B; +} + +.emotion-3 { + display: inline-block; + vertical-align: middle; + overflow: hidden; + fill: #3B3B3B; + vertical-align: unset; + display: inline-block; +} + +@media screen and (prefers-reduced-motion: no-preference) { + .emotion-3 { + transition-property: fill; + transition-duration: 200ms; + transition-timing-function: cubic-bezier(0, 0, .5, 1); + } +} + +@media screen and (prefers-reduced-motion: reduce) { + .emotion-3 { + transition-property: fill; + transition-duration: 0ms; + transition-timing-function: cubic-bezier(0, 0, .5, 1); + } +} + +.emotion-5 { + margin: 0; + font-family: "Poppins",sans-serif; + font-size: 14px; + line-height: 21px; + font-weight: 500; + letter-spacing: 0; + padding: 0.5px 0px; + display: inline-block; +} + +.emotion-5::before { + content: ''; + margin-bottom: -0.403em; + display: block; +} + +.emotion-5::after { + content: ''; + margin-top: -0.4em; + display: block; +} + + + +`; + +exports[`MenuItem renders with default props 1`] = ` + + .emotion-0 { + box-sizing: border-box; + width: 100%; +} + +.emotion-0>ul { + box-sizing: border-box; + position: relative; + list-style-type: none; + margin: 0; + padding: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + width: 100%; +} + +.emotion-0 li:last-of-type { + margin-right: 0; +} + +.emotion-1 { + box-sizing: border-box; + margin-right: 8px; +} + +.emotion-2 { + margin: 0; + padding: 0; + display: inline-grid; + -webkit-column-gap: 8px; + column-gap: 8px; + grid-template-columns: repeat(1, auto); + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + -webkit-align-content: center; + -ms-flex-line-pack: center; + align-content: center; + justify-items: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 12px 16px; + min-width: 80px; + min-height: 48px; + box-sizing: border-box; + -webkit-text-decoration: none; + text-decoration: none; + min-height: 48px; + min-width: 80px; + cursor: default; + overflow: hidden; + border: none; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + background-color: transparent; + border-style: solid; + border-color: transparent; + border-width: 0 0 2px 0; + color: #6A6A6A; + cursor: pointer; + width: 100%; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + text-align: center; +} + +.emotion-2 svg { + width: 24px; + height: 24px; +} + +.emotion-2 svg { + fill: #6A6A6A; +} + +.emotion-2:hover:not(:disabled) { + border-color: #3358CC; + color: #3B3B3B; +} + +.emotion-2:hover:not(:disabled) svg { + fill: #3B3B3B; +} + +.emotion-2:active:not(:disabled) { + border-color: #254CAC; + color: #111111; +} + +.emotion-2:active:not(:disabled) svg { + fill: #111111; +} + +.emotion-2:selected:hover:not(:disabled) { + border-color: #3358CC; + color: #3B3B3B; +} + +.emotion-2:selected:hover:not(:disabled) svg { + fill: #3B3B3B; +} + +.emotion-2:disabled { + color: #ABABAB; +} + +.emotion-2:disabled svg { + fill: #ABABAB; +} + +.emotion-2:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-2:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + +@media screen and (prefers-reduced-motion: no-preference) { + .emotion-2 { + transition-property: background-color; + transition-duration: 200ms; + transition-timing-function: cubic-bezier(0, 0, .5, 1); + } +} + +@media screen and (prefers-reduced-motion: reduce) { + .emotion-2 { + transition-property: background-color; + transition-duration: 0ms; + transition-timing-function: cubic-bezier(0, 0, .5, 1); + } +} + +.emotion-3 { + margin: 0; + font-family: "Poppins",sans-serif; + font-size: 14px; + line-height: 21px; + font-weight: 500; + letter-spacing: 0; + padding: 0.5px 0px; + display: inline-block; +} + +.emotion-3::before { + content: ''; + margin-bottom: -0.403em; + display: block; +} + +.emotion-3::after { + content: ''; + margin-top: -0.4em; + display: block; +} + + + +`; + +exports[`MenuItem renders with icon 1`] = ` + + .emotion-0 { + box-sizing: border-box; + width: 100%; +} + +.emotion-0>ul { + box-sizing: border-box; + position: relative; + list-style-type: none; + margin: 0; + padding: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + width: 100%; +} + +.emotion-0 li:last-of-type { + margin-right: 0; +} + +.emotion-1 { + box-sizing: border-box; + margin-right: 8px; +} + +.emotion-2 { + margin: 0; + padding: 0; + display: inline-grid; + -webkit-column-gap: 8px; + column-gap: 8px; + grid-template-columns: repeat(2, auto); + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + -webkit-align-content: center; + -ms-flex-line-pack: center; + align-content: center; + justify-items: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 12px 16px; + min-width: 80px; + min-height: 48px; + box-sizing: border-box; + -webkit-text-decoration: none; + text-decoration: none; + min-height: 48px; + min-width: 80px; + cursor: default; + overflow: hidden; + border: none; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + background-color: transparent; + border-style: solid; + border-color: transparent; + border-width: 0 0 2px 0; + color: #6A6A6A; + cursor: pointer; + width: 100%; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + text-align: center; +} + +.emotion-2 svg { + width: 24px; + height: 24px; +} + +.emotion-2 svg { + fill: #6A6A6A; +} + +.emotion-2:hover:not(:disabled) { + border-color: #3358CC; + color: #3B3B3B; +} + +.emotion-2:hover:not(:disabled) svg { + fill: #3B3B3B; +} + +.emotion-2:active:not(:disabled) { + border-color: #254CAC; + color: #111111; +} + +.emotion-2:active:not(:disabled) svg { + fill: #111111; +} + +.emotion-2:selected:hover:not(:disabled) { + border-color: #3358CC; + color: #3B3B3B; +} + +.emotion-2:selected:hover:not(:disabled) svg { + fill: #3B3B3B; +} + +.emotion-2:disabled { + color: #ABABAB; +} + +.emotion-2:disabled svg { + fill: #ABABAB; +} + +.emotion-2:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-2:focus-visible:not(:disabled) { + outline-style: auto; + } + } +} + +@media screen and (prefers-reduced-motion: no-preference) { + .emotion-2 { + transition-property: background-color; + transition-duration: 200ms; + transition-timing-function: cubic-bezier(0, 0, .5, 1); + } +} + +@media screen and (prefers-reduced-motion: reduce) { + .emotion-2 { + transition-property: background-color; + transition-duration: 0ms; + transition-timing-function: cubic-bezier(0, 0, .5, 1); + } +} + +.emotion-3 { + display: inline-block; + vertical-align: middle; + overflow: hidden; + fill: #3B3B3B; + vertical-align: unset; + display: inline-block; +} + +@media screen and (prefers-reduced-motion: no-preference) { + .emotion-3 { + transition-property: fill; + transition-duration: 200ms; + transition-timing-function: cubic-bezier(0, 0, .5, 1); + } +} + +@media screen and (prefers-reduced-motion: reduce) { + .emotion-3 { + transition-property: fill; + transition-duration: 0ms; + transition-timing-function: cubic-bezier(0, 0, .5, 1); + } } -.nk-menu-group+.emotion-1 { - margin-right: 24px; +.emotion-5 { + margin: 0; + font-family: "Poppins",sans-serif; + font-size: 14px; + line-height: 21px; + font-weight: 500; + letter-spacing: 0; + padding: 0.5px 0px; + display: inline-block; } -.nk-menu-item+.emotion-1 { - margin-right: 8px; +.emotion-5::before { + content: ''; + margin-bottom: -0.403em; + display: block; } -.emotion-2 { - border-style: solid; - border-color: #C6C6C6; - border-width: 1px; - border-width: 0px; - margin: 0; - border-left-width: 1px; - display: inline-block; - height: 100%; +.emotion-5::after { + content: ''; + margin-top: -0.4em; + display: block; } `; -exports[`MenuDivider renders with overrides 1`] = ` +exports[`MenuItem renders with overrides 1`] = ` .emotion-0 { box-sizing: border-box; @@ -5348,6 +8766,7 @@ exports[`MenuDivider renders with overrides 1`] = ` .emotion-0>ul { box-sizing: border-box; + position: relative; list-style-type: none; margin: 0; padding: 0; @@ -5364,25 +8783,103 @@ exports[`MenuDivider renders with overrides 1`] = ` .emotion-1 { box-sizing: border-box; + margin-right: 8px; } -.nk-menu-group+.emotion-1 { - margin-right: 12px; +.emotion-2 { + margin: 0; + padding: 0; + display: inline-grid; + -webkit-column-gap: 12px; + column-gap: 12px; + grid-template-columns: repeat(1, auto); + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + -webkit-align-content: center; + -ms-flex-line-pack: center; + align-content: center; + justify-items: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 12px; + min-width: 10px; + min-height: 11px; + box-sizing: border-box; + -webkit-text-decoration: none; + text-decoration: none; + min-height: 11px; + min-width: 10px; + cursor: default; + overflow: hidden; + border: none; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + background-color: pink; + border-style: solid; + border-color: darkpink; + border-width: 0px 8px 0px 0px; + color: red; + cursor: pointer; + width: 100%; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + text-align: center; } -.nk-menu-item+.emotion-1 { - margin-right: 12px; +.emotion-2 svg { + width: 32px; + height: 32px; } -.emotion-2 { - border-style: solid; - border-color: red; - border-width: 2px; - border-width: 0px; +.emotion-2 svg { + fill: grey; +} + +@media screen and (prefers-reduced-motion: no-preference) { + .emotion-2 { + transition-property: background-color; + transition-duration: 200ms; + transition-timing-function: cubic-bezier(0, 0, .5, 1); + } +} + +@media screen and (prefers-reduced-motion: reduce) { + .emotion-2 { + transition-property: background-color; + transition-duration: 0ms; + transition-timing-function: cubic-bezier(0, 0, .5, 1); + } +} + +.emotion-3 { margin: 0; - border-left-width: 2px; + font-family: "Poppins",sans-serif; + font-size: 16px; + line-height: 24px; + font-weight: 500; + letter-spacing: 0; + padding: 0.5px 0px; display: inline-block; - height: 100%; +} + +.emotion-3::before { + content: ''; + margin-bottom: -0.403em; + display: block; +} + +.emotion-3::after { + content: ''; + margin-top: -0.4em; + display: block; } `; -exports[`MenuGroup renders with overrides 1`] = ` +exports[`MenuSub render defaultExpanded when uncontrolled 1`] = ` .emotion-0 { box-sizing: border-box; - height: 100%; + width: 100%; } .emotion-0>ul { box-sizing: border-box; + position: relative; list-style-type: none; margin: 0; - padding: 0; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - height: 100%; -} - -.emotion-0 li:last-of-type { - margin-bottom: 0; -} - -.emotion-1 { - box-sizing: border-box; - background-color: #2f1e9f; - border-style: solid; - border-color: #8074eb; - border-width: 4px 4px 0px 4px; - color: #dfd3d3; - border-radius: 10px 10px 0 0; - margin-bottom: 12px; -} - -.emotion-1 svg { - fill: grey; -} - -.emotion-1:hover:not(:disabled) { - background-color: #d8335c; -} - -.emotion-1>ul { - box-sizing: border-box; - list-style-type: none; - margin: 0; - padding: 0; -} - -.emotion-2 { - box-sizing: border-box; - margin-bottom: 32px; - padding-left: 16px; - padding-right: 16px; -} - -.emotion-3 { - margin: 0; - color: #6A6A6A; - font-family: "Poppins",sans-serif; - font-size: 18px; - line-height: 20.25px; - font-weight: 700; - letter-spacing: 0; - padding: 0.5px 0px; -} - -.emotion-3 svg { - fill: #6A6A6A; -} - -.emotion-3::before { - content: ''; - margin-bottom: -0.2155em; - display: block; + padding: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + width: 100%; } -.emotion-3::after { - content: ''; - margin-top: -0.2125em; - display: block; +.emotion-0 li:last-of-type { + margin-right: 0; } -.emotion-4 { +.emotion-1 { box-sizing: border-box; - margin-bottom: 8px; + margin-right: 8px; } -.emotion-5 { +.emotion-2 { margin: 0; padding: 0; display: inline-grid; @@ -5520,14 +8959,13 @@ exports[`MenuGroup renders with overrides 1`] = ` -ms-flex-align: center; align-items: center; padding: 12px 16px; - width: 100%; min-width: 80px; min-height: 48px; box-sizing: border-box; -webkit-text-decoration: none; text-decoration: none; min-height: 48px; - min-width: auto; + min-width: 80px; cursor: default; overflow: hidden; border: none; @@ -5538,62 +8976,62 @@ exports[`MenuGroup renders with overrides 1`] = ` background-color: transparent; border-style: solid; border-color: transparent; - border-width: 0 2px 0 0; + border-width: 0 0 2px 0; color: #6A6A6A; cursor: pointer; - -webkit-box-pack: start; - -ms-flex-pack: start; - -webkit-justify-content: flex-start; - justify-content: flex-start; - text-align: left; + width: 100%; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + text-align: center; } -.emotion-5 svg { +.emotion-2 svg { width: 24px; height: 24px; } -.emotion-5 svg { +.emotion-2 svg { fill: #6A6A6A; } -.emotion-5:hover:not(:disabled) { - background-color: #ECF1FF; - color: #3358CC; +.emotion-2:hover:not(:disabled) { + border-color: #3358CC; + color: #3B3B3B; } -.emotion-5:hover:not(:disabled) svg { - fill: #3358CC; +.emotion-2:hover:not(:disabled) svg { + fill: #3B3B3B; } -.emotion-5:active:not(:disabled) { - background-color: #D5E0FC; - color: #3358CC; +.emotion-2:active:not(:disabled) { + border-color: #254CAC; + color: #111111; } -.emotion-5:active:not(:disabled) svg { - fill: #3358CC; +.emotion-2:active:not(:disabled) svg { + fill: #111111; } -.emotion-5:selected:hover:not(:disabled) { - background-color: transparent; +.emotion-2:selected:hover:not(:disabled) { border-color: #3358CC; - color: #3358CC; + color: #3B3B3B; } -.emotion-5:selected:hover:not(:disabled) svg { - fill: #3358CC; +.emotion-2:selected:hover:not(:disabled) svg { + fill: #3B3B3B; } -.emotion-5:disabled { +.emotion-2:disabled { color: #ABABAB; } -.emotion-5:disabled svg { +.emotion-2:disabled svg { fill: #ABABAB; } -.emotion-5:focus-visible:not(:disabled) { +.emotion-2:focus-visible:not(:disabled) { outline-color: #3768FB; outline-style: solid; outline-width: 2px; @@ -5602,14 +9040,14 @@ exports[`MenuGroup renders with overrides 1`] = ` @media not all and (min-resolution: 0.001dpcm) { @supports (-webkit-appearance: none) and (stroke-color: transparent) { - .emotion-5:focus-visible:not(:disabled) { + .emotion-2:focus-visible:not(:disabled) { outline-style: auto; } } } @media screen and (prefers-reduced-motion: no-preference) { - .emotion-5 { + .emotion-2 { transition-property: background-color; transition-duration: 200ms; transition-timing-function: cubic-bezier(0, 0, .5, 1); @@ -5617,14 +9055,61 @@ exports[`MenuGroup renders with overrides 1`] = ` } @media screen and (prefers-reduced-motion: reduce) { - .emotion-5 { + .emotion-2 { transition-property: background-color; transition-duration: 0ms; transition-timing-function: cubic-bezier(0, 0, .5, 1); } } -.emotion-6 { +.emotion-3 { + display: inline-block; + vertical-align: middle; + overflow: hidden; + fill: #3B3B3B; + vertical-align: unset; + display: inline-block; +} + +@media screen and (prefers-reduced-motion: no-preference) { + .emotion-3 { + transition-property: fill; + transition-duration: 200ms; + transition-timing-function: cubic-bezier(0, 0, .5, 1); + } +} + +@media screen and (prefers-reduced-motion: reduce) { + .emotion-3 { + transition-property: fill; + transition-duration: 0ms; + transition-timing-function: cubic-bezier(0, 0, .5, 1); + } +} + +.emotion-3.emotion-3 { + width: 24px; + height: 24px; +} + +.emotion-5 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + box-sizing: border-box; + list-style-type: none; + margin: 0; + padding: 0; + position: absolute; + left: 0; + width: 100%; +} + +.emotion-8 { margin: 0; font-family: "Poppins",sans-serif; font-size: 14px; @@ -5635,13 +9120,13 @@ exports[`MenuGroup renders with overrides 1`] = ` display: inline-block; } -.emotion-6::before { +.emotion-8::before { content: ''; margin-bottom: -0.403em; display: block; } -.emotion-6::after { +.emotion-8::after { content: ''; margin-top: -0.4em; display: block; @@ -5656,76 +9141,89 @@ exports[`MenuGroup renders with overrides 1`] = ` role="list" >
  • -
    - -
    + + + + `; -exports[`MenuItem renders with icon 1`] = ` +exports[`MenuSub renders with title 1`] = ` .emotion-0 { box-sizing: border-box; @@ -7991,6 +11447,7 @@ exports[`MenuItem renders with icon 1`] = ` .emotion-0>ul { box-sizing: border-box; + position: relative; list-style-type: none; margin: 0; padding: 0; @@ -8030,14 +11487,13 @@ exports[`MenuItem renders with icon 1`] = ` -ms-flex-align: center; align-items: center; padding: 12px 16px; - width: 100%; min-width: 80px; min-height: 48px; box-sizing: border-box; -webkit-text-decoration: none; text-decoration: none; min-height: 48px; - min-width: auto; + min-width: 80px; cursor: default; overflow: hidden; border: none; @@ -8051,6 +11507,7 @@ exports[`MenuItem renders with icon 1`] = ` border-width: 0 0 2px 0; color: #6A6A6A; cursor: pointer; + width: 100%; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; @@ -8134,31 +11591,6 @@ exports[`MenuItem renders with icon 1`] = ` } .emotion-3 { - display: inline-block; - vertical-align: middle; - overflow: hidden; - fill: #3B3B3B; - vertical-align: unset; - display: inline-block; -} - -@media screen and (prefers-reduced-motion: no-preference) { - .emotion-3 { - transition-property: fill; - transition-duration: 200ms; - transition-timing-function: cubic-bezier(0, 0, .5, 1); - } -} - -@media screen and (prefers-reduced-motion: reduce) { - .emotion-3 { - transition-property: fill; - transition-duration: 0ms; - transition-timing-function: cubic-bezier(0, 0, .5, 1); - } -} - -.emotion-5 { margin: 0; font-family: "Poppins",sans-serif; font-size: 14px; @@ -8169,96 +11601,68 @@ exports[`MenuItem renders with icon 1`] = ` display: inline-block; } -.emotion-5::before { +.emotion-3::before { content: ''; margin-bottom: -0.403em; display: block; } -.emotion-5::after { +.emotion-3::after { content: ''; margin-top: -0.4em; display: block; } - - -`; - -exports[`MenuItem renders with overrides 1`] = ` - - .emotion-0 { - box-sizing: border-box; - width: 100%; +.emotion-4 { + display: inline-block; + vertical-align: middle; + overflow: hidden; + fill: #3B3B3B; + vertical-align: unset; + display: inline-block; +} + +@media screen and (prefers-reduced-motion: no-preference) { + .emotion-4 { + transition-property: fill; + transition-duration: 200ms; + transition-timing-function: cubic-bezier(0, 0, .5, 1); + } +} + +@media screen and (prefers-reduced-motion: reduce) { + .emotion-4 { + transition-property: fill; + transition-duration: 0ms; + transition-timing-function: cubic-bezier(0, 0, .5, 1); + } +} + +.emotion-4.emotion-4 { + width: 24px; + height: 24px; } -.emotion-0>ul { +.emotion-6 { + display: none; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; box-sizing: border-box; list-style-type: none; margin: 0; padding: 0; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; + position: absolute; + left: 0; width: 100%; } -.emotion-0 li:last-of-type { - margin-right: 0; -} - -.emotion-1 { - box-sizing: border-box; - margin-right: 8px; -} - -.emotion-2 { +.emotion-8 { margin: 0; padding: 0; display: inline-grid; - -webkit-column-gap: 12px; - column-gap: 12px; + -webkit-column-gap: 8px; + column-gap: 8px; grid-template-columns: repeat(1, auto); -webkit-box-pack: center; -ms-flex-pack: center; @@ -8272,15 +11676,14 @@ exports[`MenuItem renders with overrides 1`] = ` -webkit-box-align: center; -ms-flex-align: center; align-items: center; - padding: 12px; - width: 100%; - min-width: 10px; - min-height: 11px; + padding: 12px 16px; + min-width: 80px; + min-height: 48px; box-sizing: border-box; -webkit-text-decoration: none; text-decoration: none; - min-height: 11px; - min-width: auto; + min-height: 48px; + min-width: 80px; cursor: default; overflow: hidden; border: none; @@ -8288,12 +11691,13 @@ exports[`MenuItem renders with overrides 1`] = ` -moz-appearance: none; -ms-appearance: none; appearance: none; - background-color: pink; + background-color: transparent; border-style: solid; - border-color: darkpink; - border-width: 0px 8px 0px 0px; - color: red; + border-color: transparent; + border-width: 0 0 2px 0; + color: #6A6A6A; cursor: pointer; + width: 100%; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; @@ -8301,17 +11705,67 @@ exports[`MenuItem renders with overrides 1`] = ` text-align: center; } -.emotion-2 svg { - width: 32px; - height: 32px; +.emotion-8 svg { + width: 24px; + height: 24px; } -.emotion-2 svg { - fill: grey; +.emotion-8 svg { + fill: #6A6A6A; +} + +.emotion-8:hover:not(:disabled) { + border-color: #3358CC; + color: #3B3B3B; +} + +.emotion-8:hover:not(:disabled) svg { + fill: #3B3B3B; +} + +.emotion-8:active:not(:disabled) { + border-color: #254CAC; + color: #111111; +} + +.emotion-8:active:not(:disabled) svg { + fill: #111111; +} + +.emotion-8:selected:hover:not(:disabled) { + border-color: #3358CC; + color: #3B3B3B; +} + +.emotion-8:selected:hover:not(:disabled) svg { + fill: #3B3B3B; +} + +.emotion-8:disabled { + color: #ABABAB; +} + +.emotion-8:disabled svg { + fill: #ABABAB; +} + +.emotion-8:focus-visible:not(:disabled) { + outline-color: #3768FB; + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; +} + +@media not all and (min-resolution: 0.001dpcm) { + @supports (-webkit-appearance: none) and (stroke-color: transparent) { + .emotion-8:focus-visible:not(:disabled) { + outline-style: auto; + } + } } @media screen and (prefers-reduced-motion: no-preference) { - .emotion-2 { + .emotion-8 { transition-property: background-color; transition-duration: 200ms; transition-timing-function: cubic-bezier(0, 0, .5, 1); @@ -8319,36 +11773,13 @@ exports[`MenuItem renders with overrides 1`] = ` } @media screen and (prefers-reduced-motion: reduce) { - .emotion-2 { + .emotion-8 { transition-property: background-color; transition-duration: 0ms; transition-timing-function: cubic-bezier(0, 0, .5, 1); } } -.emotion-3 { - margin: 0; - font-family: "Poppins",sans-serif; - font-size: 16px; - line-height: 24px; - font-weight: 500; - letter-spacing: 0; - padding: 0.5px 0px; - display: inline-block; -} - -.emotion-3::before { - content: ''; - margin-bottom: -0.403em; - display: block; -} - -.emotion-3::after { - content: ''; - margin-top: -0.4em; - display: block; -} -
    • diff --git a/src/menu/__tests__/menu.stories.tsx b/src/menu/__tests__/menu.stories.tsx index e63af2a148..56271f31a8 100644 --- a/src/menu/__tests__/menu.stories.tsx +++ b/src/menu/__tests__/menu.stories.tsx @@ -1,4 +1,5 @@ -import React from 'react'; +/* eslint-disable no-param-reassign */ +import React, {useState} from 'react'; import {Story as StoryType} from '@storybook/react'; import { StorybookHeading, @@ -6,11 +7,16 @@ import { StorybookSpan, } from '../../test/storybook-comps'; import {ThemeProvider, CreateThemeArgs} from '../../theme'; -import {IconFilledAddCircleOutline, IconFilledClose} from '../../icons'; -import {Menu, MenuItem, MenuGroup, MenuDivider} from '..'; -import {styled, getColorCssFromTheme} from '../../utils'; +import { + IconFilledAddCircleOutline, + IconFilledClose, + IconFilledInfo, +} from '../../icons'; +import {Menu, MenuItem, MenuSub, MenuGroup, MenuDivider} from '..'; +import {styled, getColorCssFromTheme, useMediaQueryObject} from '../../utils'; import {getSSRId} from '../../utils/get-ssr-id'; import {createCustomThemeWithBaseThemeSwitch} from '../../test/theme-select-object'; +import {InlineMessage} from '../../inline-message'; // eslint-disable-next-line no-script-url const href = 'javascript:;'; @@ -339,56 +345,54 @@ export const StoryMenuItemsSizes = () => ( ); StoryMenuItemsSizes.storyName = 'menu items - sizes'; -export const StoryMenuItemsAlignment = () => { - const Flex = styled.div` - display: flex; +const Flex = styled.div` + display: flex; - & > div { - width: 500px; - border: 1px dashed lightgrey; - } - `; - return ( - <> - Menu items with different alignment - -
    - Left - - Menu item knickknackatory 1 - Menu item knickknackatory 2 - Menu item knickknackatory 3 - Menu item knickknackatory 4 - Menu item knickknackatory 5 - Menu item knickknackatory 6 - -
    -
    - Center - - Menu item knickknackatory 1 - Menu item knickknackatory 2 - Menu item knickknackatory 3 - Menu item knickknackatory 4 - Menu item knickknackatory 5 - Menu item knickknackatory 6 - -
    -
    - Right - - Menu item knickknackatory 1 - Menu item knickknackatory 2 - Menu item knickknackatory 3 - Menu item knickknackatory 4 - Menu item knickknackatory 5 - Menu item knickknackatory 6 - -
    -     - - ); -}; + & > div { + width: 500px; + border: 1px dashed lightgrey; + } +`; +export const StoryMenuItemsAlignment = () => ( + <> + Menu items with different alignment + +
    + Left + + Menu item knickknackatory 1 + Menu item knickknackatory 2 + Menu item knickknackatory 3 + Menu item knickknackatory 4 + Menu item knickknackatory 5 + Menu item knickknackatory 6 + +
    +
    + Center + + Menu item knickknackatory 1 + Menu item knickknackatory 2 + Menu item knickknackatory 3 + Menu item knickknackatory 4 + Menu item knickknackatory 5 + Menu item knickknackatory 6 + +
    +
    + Right + + Menu item knickknackatory 1 + Menu item knickknackatory 2 + Menu item knickknackatory 3 + Menu item knickknackatory 4 + Menu item knickknackatory 5 + Menu item knickknackatory 6 + +
    +     + +); StoryMenuItemsAlignment.storyName = 'menu items - alignment'; export const StoryMenuItemsHorizontalAlignment = () => { @@ -1269,6 +1273,28 @@ export const StoryMenuLogicalProps = () => ( Menu item 5 Menu item 6 + MenuSub with logical props + + Menu item 1 + Menu item 2 + + Menu item 3.1 + Menu item 3.2 + + ); StoryMenuLogicalProps.storyName = 'menu - logical props'; @@ -1294,7 +1320,483 @@ export const StoryMenuItemsOutlineOverrides = () => (
    ); -StoryMenuItemsOutlineOverrides.storyName = 'menu items outline overrides'; +StoryMenuItemsOutlineOverrides.storyName = 'menu items - outline overrides'; + +const HorizontalContainer = styled.div` + min-height: 200px; +`; +export const StorySubMenuHorizontal = () => { + const [guidesExpanded, setGuidesExpanded] = useState(false); + const [codeExpanded, setDesignExpanded] = useState(false); + + return ( + + Sub menu - horizontal + + { + setGuidesExpanded(!guidesExpanded); + }} + > + + Getting started + + + Design Overview + + setDesignExpanded(!codeExpanded)} + > + + Engineering Overview + + + + + + ); +}; +StorySubMenuHorizontal.storyName = 'sub-menu-horizontal'; + +const VerticalContainer = styled.div` + width: 300px; +`; +export const StorySubMenuVertical = () => { + const [guidesExpanded, setGuidesExpanded] = useState(false); + const [codeExpanded, setCodeExpanded] = useState(false); + const [themeExpanded, setThemeExpanded] = useState(false); + const [foundationsExpanded, setFoundationsExpanded] = useState(false); + + return ( + <> + Sub menu - vertical + + + setGuidesExpanded(!guidesExpanded)} + > + + Getting started + + + Design overview + + setCodeExpanded(!codeExpanded)} + > + + Engineering overview + + + + + setThemeExpanded(!themeExpanded)} + > + + Overview + + setFoundationsExpanded(!foundationsExpanded)} + > + + Borders + + + Breakpoints + + + + + + + ); +}; +StorySubMenuVertical.storyName = 'sub-menu-vertical'; + +const splitMenuItems = (arr: MenuElement[], n: number) => { + const visible = [...arr].splice(0, n); + const invisible = [...arr].splice(n); + return {visible, invisible}; +}; + +type MenuElement = { + title: string; + items?: MenuElement[]; +}; + +const createMenu = (items: MenuElement[]) => + items.map(({title, items: subItems}) => { + if (subItems) { + return {createMenu(subItems)}; + } + + return {title}; + }); +const createMoreMenu = (items: MenuElement[]) => + items.map(({title, items: subItems}) => { + if (subItems) { + return ( + + {createMoreMenu(subItems)} + + ); + } + + return {title}; + }); + +const MenuMore = ({children}: {children: React.ReactNode}) => ( + {children} +); + +const items: MenuElement[] = [ + {title: 'About'}, + { + title: 'Guides', + }, + { + title: 'Theme', + }, + { + title: 'Components', + items: [ + {title: 'Overview'}, + { + title: 'Actions & Inputs', + items: [{title: 'Button'}, {title: 'Checkbox'}, {title: 'Form'}], + }, + ], + }, +]; + +export const StoryMenuMultipleAuto = () => { + const splitNumber = useMediaQueryObject({ + xs: 2, + sm: 3, + md: 4, + lg: 5, + xl: 5, + }); + + const {visible, invisible} = splitMenuItems(items, splitNumber || 1000); + + return ( + + + } + overrides={{marginBlockEnd: 'space050'}} + > + Resize the browser window to see the menu items overflow. + + + {createMenu(visible)} + {invisible.length > 0 && ( + {createMoreMenu(invisible)} + )} + + + ); +}; +StoryMenuMultipleAuto.storyName = 'sub-menu-auto'; + +export const StoryMenuSubOverrides = () => { + const [expanded, setExpanded] = useState(false); + const menuItemOverrides = { + stylePreset: 'menuItemCustom', + }; + return ( + + Menu sub with overrides + + + Menu item 1 + + + Menu item 2 + + { + setExpanded(!expanded); + }} + overrides={{ + ...menuItemOverrides, + }} + > + Menu item 3.1 + Menu item 3.2 + + + + ); +}; +StoryMenuSubOverrides.storyName = 'sub-menu-overrides'; + +const routes = [ + { + title: 'About', + id: '/about', + subNav: [ + { + title: 'Introduction', + id: '/about/introduction', + }, + { + title: 'Release notes', + id: '/about/release-notes', + }, + { + title: 'Roadmap', + id: '/about/roadmap', + }, + { + title: 'Contribute', + id: '/about/contribute', + }, + { + title: 'Contact us', + id: '/about/contact-us', + }, + ], + }, + { + title: 'Guides', + id: '/getting-started', + subNav: [ + { + title: 'Getting started', + id: '/getting-started/overview', + }, + { + title: 'Design', + id: '/getting-started/design', + }, + { + title: 'Code', + id: '/getting-started/code', + subNav: [ + { + title: 'Overview', + id: '/getting-started/code/engineering-overview', + }, + { + title: 'Quickstart', + id: '/getting-started/code/engineering-quickstart', + }, + { + title: 'Form step-by-step', + id: '/getting-started/code/form-step-by-step', + }, + ], + }, + ], + }, + { + title: 'Theme', + id: '/theme', + subNav: [ + { + title: 'Overview', + id: '/theme/overview', + }, + { + title: 'Foundations', + id: '/theme/foundation', + subNav: [ + { + title: 'Borders', + id: '/theme/foundation/borders', + }, + { + title: 'Breakpoints', + id: '/theme/foundation/breakpoints', + }, + { + title: 'Colours', + id: '/theme/foundation/colours', + }, + { + title: 'Design tokens', + id: '/theme/foundation/design-tokens', + }, + { + title: 'Fonts', + id: '/theme/foundation/fonts', + }, + ], + }, + { + title: 'Presets', + id: '/theme/presets', + subNav: [ + { + title: 'Style Presets', + id: '/theme/presets/style-presets', + }, + { + title: 'Transition Presets', + id: '/theme/presets/transition-presets', + }, + { + title: 'Typography Presets', + id: '/theme/presets/typography-presets', + }, + ], + }, + { + title: 'Creating and using themes', + id: '/theme/theming', + subNav: [ + { + title: 'Overview', + id: '/theme/theming/overview', + }, + { + title: 'Creating a theme in code', + id: '/theme/theming/creating-a-theme', + }, + { + title: 'Using a theme in code', + id: '/theme/theming/using-a-theme', + }, + { + title: 'Component defaults', + id: '/theme/theming/component-defaults', + }, + ], + }, + ], + }, +]; + +type MenuNestedElement = { + id: string; + title: string; + subNav?: MenuNestedElement[]; + expanded?: boolean; + selected?: boolean; + parent?: MenuNestedElement; +}; + +const createNestedMenu = ( + menuItems: MenuNestedElement[], + fn: (id: string) => void, +) => + menuItems.map(({subNav, title, expanded, id, selected}) => { + if (subNav) { + return ( + fn(id)} + title={title} + > + {createNestedMenu(subNav, fn)} + + ); + } + return ( + + {title} + + ); + }); +const expandMyParent = (menuItem: MenuNestedElement) => { + if (menuItem) { + menuItem.expanded = true; + menuItem.selected = menuItem.expanded; + if (menuItem.parent) expandMyParent(menuItem.parent); + } +}; + +const makeExpanded = (expandedId: string, menuItems: MenuNestedElement[]) => + menuItems.map(menuItem => { + menuItem.expanded = expandedId === menuItem.id; + menuItem.selected = menuItem.expanded; + menuItem.subNav = menuItem.subNav + ? makeExpanded(expandedId, menuItem.subNav) + : undefined; + + if (menuItem.expanded && menuItem.parent) { + expandMyParent(menuItem.parent); + } + + return menuItem; + }); + +const makeTree = ( + menuItems: MenuNestedElement[], + parent: MenuNestedElement | null, +) => { + menuItems.forEach(menuItem => { + // @ts-ignore + menuItem.parent = parent; + if (menuItem.subNav) { + makeTree(menuItem.subNav, menuItem); + } + }); + return menuItems; +}; + +const treeMenu = makeTree(routes, null); + +export const StoryMenuFullDemo = () => { + const [expandedId, setExpandedId] = React.useState(''); + const expandedRoutes = makeExpanded(expandedId, treeMenu); + + const setExpanded = React.useCallback( + (id: string) => { + if (expandedId === id) { + setExpandedId(''); + } else { + setExpandedId(id); + } + }, + [expandedId, setExpandedId], + ); + + return ( + + {createNestedMenu(expandedRoutes, setExpanded)} + + ); +}; +StoryMenuFullDemo.storyName = 'sub-menu-full-demo'; export default { title: 'Components/menu', diff --git a/src/menu/__tests__/menu.test.tsx b/src/menu/__tests__/menu.test.tsx index b4a70dcb96..13cee2c6c6 100644 --- a/src/menu/__tests__/menu.test.tsx +++ b/src/menu/__tests__/menu.test.tsx @@ -1,6 +1,6 @@ import React from 'react'; import {fireEvent} from '@testing-library/react'; -import {Menu, MenuDivider, MenuGroup, MenuItem} from '..'; +import {Menu, MenuDivider, MenuGroup, MenuItem, MenuSub} from '..'; import { renderToFragmentWithTheme, renderWithImplementation, @@ -8,10 +8,15 @@ import { } from '../../test/test-utils'; import {IconFilledAddCircleOutline} from '../../icons'; import {compileTheme, createTheme, EventTrigger} from '../..'; -import {MenuItemProps, MenuItemAlign, MenuItemSize} from '../types'; +import { + MenuItemProps, + MenuItemAlign, + MenuItemSize, + MenuSubProps, +} from '../types'; const MenuItemSizeArray = ['small', 'medium', 'large']; -const MenuItemAlignKeys = ['start', 'end', 'center']; +const MenuItemAlignKeys = ['start', 'end', 'center', 'spaceBetween']; const href = 'http://'; @@ -78,6 +83,12 @@ const MenuWithItem = (props: MenuItemProps) => ( ); +const MenuWithMenuSub = ({children, ...props}: MenuSubProps) => ( + + {children} + +); + describe('MenuItem', () => { it('renders with default props', () => { const props = { @@ -455,3 +466,125 @@ describe('Menu alignment', () => { }, ); }); + +describe('MenuSub', () => { + it('renders with default props', () => { + const fragment = renderToFragmentWithTheme(MenuWithMenuSub); + expect(fragment).toMatchSnapshot(); + }); + it('renders with title', () => { + const props = { + children: menuItems, + title: 'Menu sub', + }; + const fragment = renderToFragmentWithTheme(MenuWithMenuSub, props); + expect(fragment).toMatchSnapshot(); + }); + it('renders expanded when horizontal', () => { + const props = { + children: menuItems, + expanded: true, + }; + const fragment = renderToFragmentWithTheme(MenuWithMenuSub, props); + expect(fragment).toMatchSnapshot(); + }); + it('renders expanded when vertical', () => { + const props = { + children: menuItems, + expanded: true, + }; + const fragment = renderToFragmentWithTheme( + () => ( + + {props.children} + + ), + props, + ); + expect(fragment).toMatchSnapshot(); + }); + it('render defaultExpanded when uncontrolled', () => { + const props = { + children: menuItems, + defaultExpanded: true, + }; + const fragment = renderToFragmentWithTheme(MenuWithMenuSub, props); + expect(fragment).toMatchSnapshot(); + }); + + test('should invoke onClick when clicked', () => { + const mockOnClick = jest.fn(); + const props = { + children: menuItems, + onClick: mockOnClick, + }; + const {getByTestId} = renderWithTheme(MenuWithMenuSub, props); + + const menuSubButton = getByTestId('menu-sub-button'); + + fireEvent.click(menuSubButton); + expect(mockOnClick).toHaveBeenCalled(); + }); + it('renders selected menu sub with aria attributes', () => { + const props = { + children: menuItems, + selected: true, + }; + const fragment = renderToFragmentWithTheme(MenuWithMenuSub, props); + expect(fragment).toMatchSnapshot(); + }); + it('renders with logical props overrides', () => { + const props = { + children: menuItems, + overrides: { + paddingInline: 'space020', + paddingBlock: 'space040', + marginBlock: 'space060', + marginInline: 'space080', + }, + }; + const fragment = renderToFragmentWithTheme(MenuWithMenuSub, props); + expect(fragment).toMatchSnapshot(); + }); + it('renders with overrides', () => { + const myCustomTheme = compileTheme( + createTheme({ + name: 'menu-sub-theme', + overrides: { + stylePresets: { + menuSubCustom: { + base: { + backgroundColor: 'pink', + borderStyle: 'solid', + borderColor: 'darkpink', + borderWidth: '0px 8px 0px 0px', + color: 'red', + iconColor: 'grey', + }, + }, + }, + }, + }), + ); + const props = { + children: menuItems, + href, + key: '1', + overrides: { + stylePreset: 'menuSubCustom', + typographyPreset: 'utilityButton030', + minWidth: '10px', + minHeight: '11px', + spaceInline: 'space030', + spaceInset: 'space030', + iconSize: 'iconSize030', + }, + }; + const fragment = renderToFragmentWithTheme( + MenuWithMenuSub, + props, + myCustomTheme, + ); + expect(fragment).toMatchSnapshot(); + }); +}); diff --git a/src/menu/index.ts b/src/menu/index.ts index 3cea492feb..a84b3f1b4b 100644 --- a/src/menu/index.ts +++ b/src/menu/index.ts @@ -2,4 +2,5 @@ export {Menu} from './menu'; export {MenuDivider} from './menu-divider'; export {MenuGroup} from './menu-group'; export {MenuItem} from './menu-item'; +export {MenuSub} from './menu-sub'; export type {MenuProps} from './types'; diff --git a/src/menu/menu-item.tsx b/src/menu/menu-item.tsx index 4ba59aac38..044d7cb0a8 100644 --- a/src/menu/menu-item.tsx +++ b/src/menu/menu-item.tsx @@ -50,9 +50,6 @@ export const MenuItem = React.forwardRef( eventOriginator={eventOriginator} overrides={{ ...menuItemOverrides, - // width 100% should not be overwritten - // move to StyledButton once PPDSC-1449 is resolved - width: '100%', }} aria-current={selected && 'page'} > diff --git a/src/menu/menu-sub.tsx b/src/menu/menu-sub.tsx new file mode 100644 index 0000000000..8b96e0fa3f --- /dev/null +++ b/src/menu/menu-sub.tsx @@ -0,0 +1,113 @@ +import React from 'react'; +import {useMenuContext} from './context'; +import {MenuSubIconProps, MenuSubProps} from './types'; +import {StyledButton, StyledMenuItem, StyledUl} from './styled'; +import {useTheme} from '../theme'; +import {filterOutFalsyProperties} from '../utils/filter-object'; +import {get} from '../utils/get'; +import {useControlled} from '../utils/hooks'; +import {composeEventHandlers} from '../utils/compose-event-handlers'; +import {IconFilledExpandLess, IconFilledExpandMore} from '../icons'; +import {getComponentOverrides} from '../utils/overrides'; + +const DefaultIcon = ({expanded, overrides}: MenuSubIconProps) => + expanded ? ( + + ) : ( + + ); + +export const MenuSub = React.forwardRef( + ( + { + overrides, + children, + title, + selected, + expanded: expandedProp, + defaultExpanded, + onClick, + ...rest + }, + ref, + ) => { + const [isExpanded, setIsExpanded] = useControlled({ + controlledValue: expandedProp, + defaultValue: defaultExpanded, + }); + + const [IndicatorIcon, indicatorIconProps] = getComponentOverrides( + overrides?.indicatorIcon, + DefaultIcon, + { + expanded: isExpanded, + }, + ); + + const handleClick = React.useCallback(() => { + setIsExpanded(!isExpanded); + }, [isExpanded, setIsExpanded]); + + const {vertical, size, align, overrides: menuOverrides} = useMenuContext(); + + const theme = useTheme(); + const menuItemOverrides: MenuSubProps['overrides'] = { + ...get( + theme.componentDefaults, + `menuItem.${vertical ? 'vertical' : 'horizontal'}`, + ), + ...filterOutFalsyProperties(overrides), + }; + + const buttonProps = { + ...rest, + selected, + size, + }; + + return ( + + {/* + @ts-ignore */} + + {title} + + + + {children} + + + ); + }, +); + +MenuSub.displayName = 'MenuSub'; diff --git a/src/menu/style-presets.ts b/src/menu/style-presets.ts index 5570473a50..cb4f3d4fda 100644 --- a/src/menu/style-presets.ts +++ b/src/menu/style-presets.ts @@ -39,7 +39,6 @@ export default { }, 'focus-visible': defaultFocusVisible, }, - menuItemHorizontal: { base: { backgroundColor: '{{colors.transparent}}', @@ -76,7 +75,6 @@ export default { }, 'focus-visible': defaultFocusVisible, }, - menuItemHorizontalInverse: { base: { backgroundColor: '{{colors.transparent}}', diff --git a/src/menu/styled.tsx b/src/menu/styled.tsx index bbac64ae04..2beb2475d4 100644 --- a/src/menu/styled.tsx +++ b/src/menu/styled.tsx @@ -1,17 +1,14 @@ -/* eslint-disable import/no-extraneous-dependencies */ -import {TextAlignProperty} from 'csstype'; import {Button} from '../button'; import {getStylePreset, getResponsiveSpace, styled} from '../utils/style'; -import {MenuGroupProps, MenuItemAlign, MenuProps} from './types'; +import {MenuGroupProps, MenuItemAlign, MenuProps, MenuSubProps} from './types'; import {logicalProps} from '../utils/logical-properties'; export const StyledMenu = styled.nav` box-sizing: border-box; - ${({vertical}) => (vertical ? 'height: 100%;' : 'width: 100%;')} - > ul { box-sizing: border-box; + position: relative; list-style-type: none; margin: 0; padding: 0; @@ -80,7 +77,6 @@ export const StyledMenuItem = styled.li< Pick & Pick >` box-sizing: border-box; - ${({vertical}) => getResponsiveSpace( vertical ? 'marginBottom' : 'marginRight', @@ -94,6 +90,7 @@ const menuItemFlexAlign = { start: 'flex-start', center: 'center', end: 'flex-end', + spaceBetween: 'space-between', }; const menuItemTextAlign = { @@ -102,18 +99,24 @@ const menuItemTextAlign = { end: 'right', }; +const getTextAlign = (align: MenuItemAlign) => + align === 'spaceBetween' ? menuItemTextAlign.start : menuItemTextAlign[align]; + export const StyledButton = styled(Button)<{ align?: MenuItemAlign | undefined; selected?: boolean; }>` + width: 100%; ${({selected}) => selected && getStylePreset('menuItem', '', {isSelected: selected})} ${({align}) => - align && { + align && + menuItemFlexAlign[align] && { justifyContent: menuItemFlexAlign[align], - textAlign: menuItemTextAlign[align] as TextAlignProperty, }} + + text-align: ${({align}) => align && getTextAlign(align)} `; export const StyledMenuDivider = styled.li< @@ -141,3 +144,24 @@ export const StyledMenuDivider = styled.li< )} } `; + +export const StyledUl = styled.ul< + Pick & Pick +>` + display: ${({expanded}) => (expanded ? 'flex' : 'none')}; + flex-direction: ${({vertical}) => (vertical ? 'column' : 'row')}; + box-sizing: border-box; + list-style-type: none; + margin: 0; + padding: 0; + ${logicalProps()} + + ${({vertical}) => + vertical + ? {} + : { + position: 'absolute', + left: '0', + width: '100%', + }}; +`; diff --git a/src/menu/types.ts b/src/menu/types.ts index 9183ebb8bd..20a01358e6 100644 --- a/src/menu/types.ts +++ b/src/menu/types.ts @@ -1,13 +1,15 @@ import {DividerOverrides} from '../divider'; import {BaseFlagOverrides, BaseFlagProps} from '../flag'; import {EventData} from '../instrumentation'; +import {NewsKitIconProps} from '../icons'; import {MQ} from '../utils'; import {LogicalProps} from '../utils/logical-properties'; +import {Override} from '../utils/overrides'; export type MenuItemSize = 'small' | 'medium' | 'large'; -export type MenuItemAlign = 'start' | 'end' | 'center'; +export type MenuItemAlign = 'start' | 'end' | 'center' | 'spaceBetween'; -export interface MenuProps extends React.AriaAttributes { +export interface MenuProps extends React.HTMLAttributes { children: Exclude; vertical?: boolean; size?: MenuItemSize; @@ -43,6 +45,21 @@ export interface MenuItemProps onClick?: (event: React.MouseEvent) => void; } +export type MenuSubIconProps = NewsKitIconProps & {expanded: boolean}; + +export type MenuSubProps = Omit< + MenuItemProps, + 'title' | 'overrides' | 'href' +> & { + title?: React.ReactNode; + expanded?: boolean; + defaultExpanded?: boolean; + overrides?: { + indicatorIcon?: Override; + } & MenuItemProps['overrides'] & + LogicalProps; +}; + export interface MenuDividerProps { overrides?: DividerOverrides & { spaceInline?: MQ;