Merge branch 'v-next' of https://github.com/cloudfour/cloudfour.com-p…

…atterns into chore/gutenberg-core-file

.storybook/main.js

@@ -14,6 +14,7 @@ module.exports = {
     // Community addons
     'storybook-addon-themes',
     'storybook-addon-paddings',
+    '@whitespace/storybook-addon-html/register',
   ],
   webpackFinal: async (config) => {
     const isDev = config.mode === 'development';

.storybook/preview.js

@@ -2,6 +2,7 @@ import { addDecorator, addParameters } from '@storybook/html';
 import { withA11y } from '@storybook/addon-a11y';
 import { Parser } from 'html-to-react';
 import { withPaddings } from 'storybook-addon-paddings';
+import { withHTML } from '@whitespace/storybook-addon-html/html';
 import * as colors from '../src/design-tokens/colors.yml';
 import * as breakpoints from '../src/design-tokens/breakpoint.yml';
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
@@ -13,6 +14,9 @@ import './preview.scss';
 // Accessibility testing via aXe
 addDecorator(withA11y);
 
+// Add HTML tab with output source
+addDecorator(withHTML);
+
 // Theme selection from stories
 const themes = [{ name: 'Dark', class: 't-dark', color: colors.primaryBrand }];
 addParameters({ themes });

CONTRIBUTING.md

@@ -42,8 +42,14 @@ cloudfour.com-patterns
 1. `git checkout v-next`
 2. `git pull`
 3. Make sure you have a clean working tree (`git status` should show no changes)
-4. `npm version` - This will bump the version number in `package.json` and `package-lock.json`
-5. `npm publish --access public` - This will automatically install and compile everything, run linting, and publish
+4. `git checkout -b release-X.Y.Z` - Create a new release branch, where `X.Y.Z` is the version number you're about to release.
+5. `npm version [major | minor | patch]` - This will bump the version number in `package.json` and `package-lock.json`. e.g., `npm version minor` to bump from `1.1.0` to `1.2.0`.
+6. `git push` your branch.
+7. Make a PR, get it approved, and merge your changes to `v-next`.
+8. `git checkout v-next`
+9. `git pull`
+10. Make sure you have a clean working tree (`git status` should show no changes)
+11. `npm publish --access public` - This will automatically install and compile everything, run linting, and publish
 
 You can run `npm publish --dry-run` to see everything that _would_ happen during publish, without actually publishing to the npm registry.
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudfour/patterns",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "author": "Cloud Four",
   "description": "Front-end patterns for cloudfour.com",
   "homepage": "https://github.com/cloudfour/cloudfour.com-patterns",
@@ -56,8 +56,10 @@
     "@storybook/html": "5.3.19",
     "@svgr/webpack": "5.4.0",
     "@testing-library/cypress": "6.0.0",
+    "@types/prismjs": "1.16.1",
     "@typescript-eslint/eslint-plugin": "3.1.0",
     "@typescript-eslint/parser": "3.1.0",
+    "@whitespace/storybook-addon-html": "1.2.1",
     "babel-loader": "8.1.0",
     "browserify-transform-tools": "1.7.0",
     "css-loader": "3.5.3",
@@ -89,7 +91,7 @@
     "remark-preset-lint-recommended": "4.0.0",
     "remark-preset-prettier": "0.4.0",
     "resolve": "1.17.0",
-    "rollup": "2.12.0",
+    "rollup": "2.12.1",
     "rollup-plugin-terser": "6.1.0",
     "sass": "1.26.7",
     "sass-loader": "8.0.2",

src/components/calendar-date/calendar-date.twig

@@ -1,5 +1,6 @@
 {% set datetime = datetime|default('now') %}
 {% set days = days|default(1) %}
+{% set _note %}{% block note %}{{note}}{% endblock %}{% endset %}
 
 <time class="c-calendar-date c-calendar-date--{{datetime|date('F')|lower}}{% if class %} {{class}}{% endif %}"
   datetime="{{datetime|date('Y-m-d')}}">
@@ -10,11 +11,9 @@
     <span class="c-calendar-date__day">
       {{datetime|date('j')}}
     </span>
-    {% if block('note') or note %}
+    {% if _note %}
       <span class="c-calendar-date__note">
-        {% block note %}
-          {{note}}
-        {% endblock %}
+        {{_note}}
       </span>
     {% endif %}
   </span>

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

@@ -0,0 +1,10 @@
+{
+  "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"
+    }
+  ]
+}

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

@@ -0,0 +1,14 @@
+{
+  "name": "Cloud Four, Inc.",
+  "address": {
+    "streetAddress": "510 SW 3rd Ave, Suite 420",
+    "addressLocality": "Portland",
+    "addressRegion": "Oregon",
+    "postalCode": "97204",
+    "addressCountry": "USA"
+  },
+  "email": "info@cloudfour.com",
+  "telephone": "+1 (503) 290-1090",
+  "url": "https://cloudfour.com/",
+  "foundingDate": "2007-12-13"
+}

src/components/ground-nav/demo/pwa-stats.twig

@@ -0,0 +1,12 @@
+{% embed '@cloudfour/components/ground-nav/ground-nav.twig' %}
+  {% block kudos %}
+    <p>
+      Hosted by <a href="https://www.netlify.com/">Netlify</a>, inspired by <a href="https://wpostats.com/">WPO Stats</a> and <a href="https://developers.google.com/web/showcase/">Google Web Showcase</a>
+    </p>
+  {% endblock %}
+  {% block legal %}
+    <p>
+      Designed by Cloud Four (<a href="https://github.com/cloudfour/pwastats/blob/master/LICENSE">License</a>)
+    </p>
+  {% endblock %}
+{% endembed %}

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

@@ -0,0 +1,24 @@
+{
+  "items": [
+    {
+      "link": "https://twitter.com/cloudfour",
+      "title": "Follow us on Twitter",
+      "icon": "brands/twitter"
+    },
+    {
+      "link": "https://github.com/cloudfour",
+      "title": "Find us on GitHub",
+      "icon": "brands/github"
+    },
+    {
+      "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"
+    }
+  ]
+}