feat(3col): add support for new layout #149

- add new layout class name `pageLayout-3col` - add demo page for new layout Changes to be committed: modified: demo/2colAnchorNav.html modified: demo/2colSideNav.html new file: demo/3col.html modified: docs/index.html modified: src/_grids.scss
AlaskaAirlines · Aug 4, 2023 · 731f708 · 731f708
1 parent 3ac145d
commit 731f708
Show file tree

Hide file tree

Showing 5 changed files with 380 additions and 19 deletions.
diff --git a/demo/2colAnchorNav.html b/demo/2colAnchorNav.html
@@ -124,7 +124,7 @@ <h1 id="sectionFour">Section Four</h1>
     </main>
     <aside class="anchornav">
       <auro-nav anchorNavContent=".main">
-        <span slot="label">Anchor Navigation</span>
+        <span slot="label">On this page</span>
         <span slot="mobileToggleCollapsed">View More</span>
         <span slot="mobileToggleExpanded">View Less</span>
         <auro-anchorlink href="#sectionOne">Section 1</auro-anchorlink>

diff --git a/demo/2colSideNav.html b/demo/2colSideNav.html
@@ -8,6 +8,10 @@
   <title>WCSS Playground</title>
   <link rel="stylesheet" href="/results/css/testBuild.css">
   <link rel="stylesheet" href="/node_modules/@alaskaairux/design-tokens/dist/tokens/CSSCustomProperties.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@alaskaairux/design-tokens@latest/dist/tokens/CSSCustomProperties.css" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/essentials.css" />
+  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-sidenav@latest/dist/auro-sidenav__bundled.js" type="module"></script>
 </head>
 
 <body>
@@ -27,17 +31,21 @@
       </auro-nav>
     </div>
     <aside class="sidenav">
-      <h3>Sidenav Placeholder</h3>
-      <auro-select>
-        <auro-menu>
-          <auro-menuoption value="stops">Stops</auro-menuoption>
-          <auro-menuoption value="price">Price</auro-menuoption>
-          <auro-menuoption value="duration">Duration</auro-menuoption>
-          <auro-menuoption value="departure">Departure</auro-menuoption>
-          <auro-menuoption value="arrival">Arrival</auro-menuoption>
-          <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
-        </auro-menu>
-      </auro-select>
+      <auro-sidenav>
+        <span slot="heading"></span>
+        <auro-sidenavitem href="/content/about-us/history">Historical overview</auro-sidenavitem>
+        <auro-sidenavitem href="/content/about-us/history/history-by-decade">History by decade</auro-sidenavitem>
+        <auro-sidenavitem href="/content/about-us/history/pioneers">Alaska Airlines pioneers</auro-sidenavitem>
+        <auro-sidenavitem href="/content/about-us/history/star-air-service">Star Air Service</auro-sidenavitem>
+        <auro-sidenavitem href="/content/about-us/history/mac-mcgee">Mac McGee</auro-sidenavitem>
+        <auro-sidenavitem href="/content/about-us/history/shell-simmons">Shell Simmons</auro-sidenavitem>
+        <auro-sidenavitem href="/content/about-us/history/bob-ellis">Bob Ellis</auro-sidenavitem>
+        <auro-sidenavitem href="/content/about-us/history/mudhole-smith">Mudhole Smith</auro-sidenavitem>
+        <auro-sidenavitem href="/content/about-us/history/magic-carpet">Operation Magic Carpet</auro-sidenavitem>
+        <auro-sidenavitem href="/content/about-us/history/carpet-pilots">Magic Carpet pilots</auro-sidenavitem>
+        <auro-sidenavitem href="/content/about-us/history/wooten-magic-carpet">James Wooten</auro-sidenavitem>
+        <auro-sidenavitem href="/content/about-us/history/horizon-air-history">Horizon Air history</auro-sidenavitem>
+      </auro-sidenav>
     </aside>
     <main class="main">
       <h1 id="sectionOne">Main Content</h1>