Ground Nav v2 (#2194)

This PR updates the Ground Nav component to version two. This version
intentionally drops the "PWA Stats" use case, and so is a breaking change.

The intent of this redesign is largely to allow for two "feature" blocks
which could be configured. The layout is meant to handle zero, one, or two
features automatically.

Author: spaceninja

gulpfile.js/tasks/build-scripts.js

@@ -2,6 +2,7 @@ const fs = require('node:fs').promises;
 const path = require('node:path');
 
 const { getBabelInputPlugin } = require('@rollup/plugin-babel');
+const json = require('@rollup/plugin-json');
 const nodeResolve = require('@rollup/plugin-node-resolve').default;
 const rollup = require('rollup');
 const dts = require('rollup-plugin-dts').default;
@@ -67,6 +68,7 @@ const buildJS = async () => {
       virtualRootPlugin(),
       getBabelInputPlugin({ extensions, babelHelpers: 'bundled' }),
       nodeResolve({ extensions }),
+      json(),
     ],
   });
   await Promise.all([

package-lock.json

@@ -47,6 +47,7 @@
     "@cloudfour/eslint-plugin": "21.1.0",
     "@etchteam/storybook-addon-status": "4.2.2",
     "@rollup/plugin-babel": "6.0.3",
+    "@rollup/plugin-json": "^6.0.0",
     "@rollup/plugin-node-resolve": "13.3.0",
     "@storybook/addon-a11y": "6.5.9",
     "@storybook/addon-docs": "6.5.9",

package.json

@@ -1,10 +1,5 @@
 {
   "items": [
-    { "link": "/portland-device-lab", "title": "Device Lab" },
-    { "link": "https://cloudfour-patterns.netlify.app/", "title": "Patterns" },
-    {
-      "link": "https://www.responsivefieldday.com/",
-      "title": "Responsive Field Day"
-    }
+    { "link": "https://cloudfour-patterns.netlify.app/", "title": "Patterns" }
   ]
 }

src/assets/illustrations/portland.svg

@@ -1,24 +1,29 @@
 {
   "items": [
     {
-      "link": "https://twitter.com/cloudfour",
-      "title": "Follow us on Twitter",
-      "icon": "brands/twitter"
+      "link": "https://www.linkedin.com/company/cloud-four",
+      "title": "Follow us on LinkedIn",
+      "icon": "brands/linkedin"
     },
     {
-      "link": "https://github.com/cloudfour",
-      "title": "Find us on GitHub",
-      "icon": "brands/github"
+      "link": "https://www.youtube.com/channel/UC39ZT0CMds5z0K0Z7RWa98A",
+      "title": "Follow us on YouTube",
+      "icon": "brands/youtube"
     },
     {
       "link": "https://www.instagram.com/cloudfourpdx/",
       "title": "Follow us on Instagram",
       "icon": "brands/instagram"
     },
     {
-      "link": "https://www.linkedin.com/company/cloud-four",
-      "title": "Follow us on LinkedIn",
-      "icon": "brands/linkedin"
+      "link": "https://github.com/cloudfour",
+      "title": "Find us on GitHub",
+      "icon": "brands/github"
+    },
+    {
+      "link": "/feed/atom/",
+      "title": "Subscribe to our RSS Feed",
+      "icon": "feed"
     }
   ]
 }

src/components/ground-nav/demo/menu.json

@@ -0,0 +1,12 @@
+{
+  "items": [
+    { "link": "/topics/rwd", "title": "Responsive Web Design" },
+    { "link": "/topics/ecommerce", "title": "Ecommerce" },
+    { "link": "/topics/performance", "title": "Performance" },
+    { "link": "/topics/images", "title": "Images" },
+    { "link": "/topics/accessibility", "title": "Accessibility" },
+    { "link": "/topics/spotlight", "title": "Cloud Four Spotlight" },
+    { "link": "/topics/css", "title": "CSS" },
+    { "link": "/topics/essentials", "title": "Essentials" }
+  ]
+}

src/components/ground-nav/demo/social.json

@@ -0,0 +1,76 @@
+// eslint-disable-next-line @cloudfour/import/order
+import skyNavMenu from '../sky-nav/demo/menu.json';
+import groundNavMenu from './demo/menu.json';
+import organization from './demo/organization.json';
+import social from './demo/social.json';
+import topics from './demo/topics.json';
+const menu = { items: [...skyNavMenu.items, ...groundNavMenu.items] };
+
+/**
+ * Default args for Ground Nav stories
+ *
+ * Currently storybook doesn't have support for nested or grouped args.
+ * @see https://github.com/storybookjs/storybook/issues/11525
+ * @see https://github.com/storybookjs/storybook/issues/10979
+ */
+export const defaultArgs = {
+  alternate: false,
+  features: 2,
+  organizationName: organization.name,
+  organizationStreetAddress: organization.address.street_address,
+  organizationAddressLocality: organization.address.address_locality,
+  organizationAddressRegion: organization.address.address_region,
+  organizationPostalCode: organization.address.postal_code,
+  organizationAddressCountry: organization.address.address_country,
+  organizationEmail: organization.email,
+  organizationTelephone: organization.telephone,
+  organizationUrl: organization.url,
+  organizationFoundingDate: organization.founding_date,
+};
+
+/**
+ * Storybook arg types for the defaultArgs
+ */
+export const defaultArgTypes = {
+  alternate: { control: { type: 'boolean' } },
+  features: { control: { type: 'number', min: 0, max: 2 } },
+  organizationName: { type: { name: 'string' } },
+  organizationStreetAddress: { type: { name: 'string' } },
+  organizationAddressLocality: { type: { name: 'string' } },
+  organizationAddressRegion: { type: { name: 'string' } },
+  organizationPostalCode: { type: { name: 'string' } },
+  organizationAddressCountry: { type: { name: 'string' } },
+  organizationEmail: { type: { name: 'string' } },
+  organizationTelephone: { type: { name: 'string' } },
+  organizationUrl: { type: { name: 'string' } },
+  organizationFoundingDate: { type: { name: 'string' } },
+};
+
+/**
+ * Generate Ground Nav Template Props
+ *
+ * Takes the flat args object and structures it as the template expects.
+ *
+ * @param {defaultArgs} args
+ */
+export const generateGroundNavProps = (args) => ({
+  menu,
+  social,
+  topics,
+  alternate: args.alternate,
+  features: args.features,
+  organization: {
+    name: args.organizationName,
+    address: {
+      street_address: args.organizationStreetAddress,
+      address_locality: args.organizationAddressLocality,
+      address_region: args.organizationAddressRegion,
+      postal_code: args.organizationPostalCode,
+      address_country: args.organizationAddressCountry,
+    },
+    email: args.organizationEmail,
+    telephone: args.organizationTelephone,
+    url: args.organizationUrl,
+    founding_date: args.organizationFoundingDate,
+  },
+});