feat: reorganize components, make menu more granular (#254)

* feat: reorganize components, make menu more granular
  * Add skeleton layout and docs
  * Fix menu alignment on large screens
* chore(docs): friendlier link
* chore(docs): add instructions for use with Sage 10

README.md

@@ -4,4 +4,4 @@
 
 Pinecone is a pattern library for the Platform Cooperative Development Kit.
 
-[Read the docs!](https://pinecone.platform.coop/)
+[Read the docs →](https://pinecone.platform.coop/)

src/assets/styles/layouts/_header.scss

@@ -218,6 +218,7 @@
 	[role="banner"] {
 		.inner {
 			margin-left: 0;
+			width: 100%;
 		}
 	}
 

src/components/_preview.njk

@@ -5,7 +5,8 @@
 		<meta http-equiv="x-ua-compatible" content="ie=edge">
 		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 		<script>(function(html){html.className = html.className.replace(/\bno-js\b/,'js')})(document.documentElement);</script>
-		<script src="{{ '/scripts/pinecone.umd.js' | path }}"></script>
+		<script src="{{ '/scripts/pinecone.umd.js' | path }}" defer></script>
+		<script src="{{ '/scripts/pinecone.js' | path }}" defer></script>
 		<link rel="stylesheet" href="{{ '/styles/pinecone.css' | path }}">
 		<link rel="apple-touch-icon" sizes="180x180" href="{{ '/images/apple-touch-icon.png' | path }}">
 		<link rel="icon" href="{{ '/images/favicon.png' | path }}" >
@@ -41,6 +42,5 @@
   			<div class="container">{% if _target.context.inFooter %}{{ yield | safe }}{% else %}{% render '@footer' %}{% endif %}</div>
   		</footer>
 		{% endif %}
-		<script src="{{ '/scripts/pinecone.js' | path }}"></script>
 	</body>
 </html>

src/components/atoms/atoms.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+	title: 'Atoms',
+	order: 1,
+};

src/components/01-atoms/08-badge/badge.config.js → src/components/atoms/badge/badge.config.js

@@ -1,6 +1,7 @@
 module.exports = {
 	title: 'Badge',
 	status: 'wip',
+	order: 8,
 	context: {
 		label: 'Platform Cooperativism',
 		standAlone: false

src/components/01-atoms/09-button/button.config.js → src/components/atoms/button/button.config.js

@@ -1,6 +1,7 @@
 module.exports = {
 	title: 'Button',
 	status: 'wip',
+	order: 9,
 	context: {
 		label: 'Filter',
 		labelVisuallyHidden: false,

src/components/01-atoms/06-call-to-action/call-to-action.config.js → src/components/atoms/call-to-action/call-to-action.config.js

@@ -1,6 +1,7 @@
 module.exports = {
 	title: 'Call to Action',
 	status: 'wip',
+	order: 6,
 	context: {
 		href: 'https://example.com/call-to-action',
 		label: 'Call to Action',

src/components/01-atoms/00-colors/colors.config.js → src/components/atoms/colors/colors.config.js

@@ -1,6 +1,7 @@
 module.exports = {
 	title: 'Colors',
 	status: 'wip',
+	order: 1,
 	context: {
 		colors: {
 			brand: [

src/components/01-atoms/03-divider/divider.config.js → src/components/atoms/divider/divider.config.js

@@ -1,6 +1,7 @@
 module.exports = {
 	status: 'wip',
 	title: 'Dividers',
+	order: 4,
 	context: {
 		dividers: [
 			{

src/components/01-atoms/11-form-elements/13-checkboxes/checkboxes.config.js → src/components/atoms/form-elements/checkboxes/checkboxes.config.js

@@ -1,6 +1,7 @@
 module.exports = {
 	title: 'Checkboxes',
 	status: 'wip',
+	order: 4,
 	context: {
 		standAlone: false,
 		checkboxes: [
@@ -27,10 +28,10 @@ module.exports = {
 	},
 	variants: [
 		{
-			name: 'Default (Light on Dark)',
-			label: 'Default (Light on Dark)',
+			name: 'Default Inverse',
+			label: 'Default (Inverse)',
 			context: {
-				bodyClass: 'has-dark-mint-500-background-color'
+				bodyClass: 'has-blue-500-background-color'
 			}
 		}
 	]

src/components/atoms/form-elements/form-elements.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+	title: 'Form Elements',
+	order: 10,
+};

src/components/01-atoms/11-form-elements/10-inputs/inputs.config.js → src/components/atoms/form-elements/inputs/inputs.config.js

@@ -1,6 +1,7 @@
 module.exports = {
 	title: 'Text Input',
 	status: 'wip',
+	order: 1,
 	context: {
 		standAlone: false,
 		inputs: [
@@ -20,10 +21,10 @@ module.exports = {
 	},
 	variants: [
 		{
-			name: 'Default (Light on Dark)',
-			label: 'Default (Light on Dark)',
+			name: 'Default Invers',
+			label: 'Default (Inverse)',
 			context: {
-				bodyClass: 'has-dark-mint-500-background-color'
+				bodyClass: 'has-blue-500-background-color'
 			}
 		}
 	]

src/components/01-atoms/11-form-elements/14-radio-buttons/radio-buttons.config.js → src/components/atoms/form-elements/radio-buttons/radio-buttons.config.js

@@ -1,6 +1,7 @@
 module.exports = {
 	title: 'Radio Buttons',
 	label: 'Radio Buttons',
+	order: 5,
 	status: 'wip',
 	context: {
 		standAlone: false,
@@ -20,10 +21,10 @@ module.exports = {
 	},
 	variants: [
 		{
-			name: 'Default (Light on Dark)',
-			label: 'Default (Light on Dark)',
+			name: 'Default Inverse',
+			label: 'Default (Inverse)',
 			context: {
-				bodyClass: 'has-dark-mint-500-background-color'
+				bodyClass: 'has-blue-500-background-color'
 			}
 		}
 	]

src/components/01-atoms/11-form-elements/12-selects/selects.config.js → src/components/atoms/form-elements/selects/selects.config.js

@@ -1,6 +1,7 @@
 module.exports = {
 	title: 'Selects',
 	status: 'wip',
+	order: 3,
 	context: {
 		standAlone: false,
 		selects: [
@@ -15,10 +16,10 @@ module.exports = {
 	},
 	variants: [
 		{
-			name: 'Default (Light on Dark)',
-			label: 'Default (Light on Dark)',
+			name: 'Default Inverse',
+			label: 'Default (Inverse)',
 			context: {
-				bodyClass: 'has-dark-mint-500-background-color'
+				bodyClass: 'has-blue-500-background-color'
 			}
 		}
 	]

src/components/01-atoms/11-form-elements/15-submit/submit.config.js → src/components/atoms/form-elements/submit/submit.config.js

@@ -2,6 +2,7 @@ module.exports = {
 	title: 'Submit Button',
 	label: 'Submit Button',
 	status: 'wip',
+	order: 6,
 	context: {
 		label: 'Submit',
 		id: 'submit',

src/components/01-atoms/11-form-elements/11-textareas/textareas.config.js → src/components/atoms/form-elements/textareas/textareas.config.js

@@ -2,6 +2,7 @@ module.exports = {
 	title: 'Text Areas',
 	label: 'Text Areas',
 	status: 'wip',
+	order: 2,
 	context: {
 		label: 'Text Area',
 		name: 'text',
@@ -25,10 +26,10 @@ module.exports = {
 	},
 	variants: [
 		{
-			name: 'Default (Light on Dark)',
-			label: 'Default (Light on Dark)',
+			name: 'Default Inverse',
+			label: 'Default (Inverse)',
 			context: {
-				bodyClass: 'has-dark-mint-500-background-color'
+				bodyClass: 'has-blue-500-background-color'
 			}
 		}
 	]

src/components/01-atoms/01-icons/icons.config.js → src/components/atoms/icons/icons.config.js

@@ -1,6 +1,7 @@
 module.exports = {
 	title: 'Icons',
 	status: 'wip',
+	order: 2,
 	context: {
 		iconsTitle: 'Icons',
 		icons: [

src/components/01-atoms/04-link/link.config.js → src/components/atoms/link/link.config.js

@@ -1,6 +1,7 @@
 module.exports = {
 	title: 'Link',
 	status: 'wip',
+	order: 5,
 	context: {
 		href: '/internal-link',
 		label: 'Link'

src/components/01-atoms/07-tag/tag.config.js → src/components/atoms/tag/tag.config.js

@@ -1,6 +1,7 @@
 module.exports = {
 	title: 'Tag',
 	status: 'wip',
+	order: 7,
 	context: {
 		label: 'Platform Cooperativism',
 		standAlone: false

src/components/atoms/typography/typography.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+	title: 'Typography',
+	status: 'wip',
+	order: 3
+};

src/components/03-layouts/02-archive/archive.config.js → src/components/layouts/archive/archive.config.js

@@ -85,6 +85,7 @@ for ( let i = 0; i < resourceCount; i++ ) {
 module.exports = {
 	title: 'Archive',
 	status: 'wip',
+	order: 4,
 	context: {
 		bodyClass: 'archive post-type-archive taxonomy',
 		hasMenu: true,

src/components/03-layouts/05-favorites/favorites.config.js → src/components/layouts/favorites/favorites.config.js

@@ -74,6 +74,7 @@ for ( let i = 0; i < resourceCount; i++ ) {
 module.exports = {
 	title: 'Favorites',
 	status: 'wip',
+	order: 7,
 	context: {
 		bodyClass: 'page page-template-page-favorites',
 		hasMenu: true,

src/components/03-layouts/04-home/home.config.js → src/components/layouts/home/home.config.js

@@ -73,6 +73,7 @@ for ( let i = 0; i < resourceCount; i++ ) {
 module.exports = {
 	title: 'Home',
 	status: 'wip',
+	order: 2,
 	context: {
 		bodyClass: 'page home',
 		hasMenu: true,

src/components/layouts/layouts.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+	title: 'Layouts',
+	order: 3,
+};

src/components/03-layouts/01-page/page.config.js → src/components/layouts/page/page.config.js

@@ -1,6 +1,7 @@
 module.exports = {
 	title: 'Page',
 	status: 'wip',
+	order: 3,
 	context: {
 		bodyClass: 'page',
 		hasMenu: true,

src/components/03-layouts/03-resource/resource.config.js → src/components/layouts/resource/resource.config.js

@@ -1,6 +1,7 @@
 module.exports = {
 	title: 'Resource',
 	status: 'wip',
+	order: 5,
 	context: {
 		bodyClass: 'single-lc_resource',
 		hasMenu: true,

src/components/03-layouts/06-search-results/search-results.config.js → src/components/layouts/search-results/search-results.config.js

@@ -85,6 +85,7 @@ for ( let i = 0; i < resourceCount; i++ ) {
 module.exports = {
 	title: 'Search Results',
 	status: 'wip',
+	order: 6,
 	context: {
 		bodyClass: 'search search-results',
 		hasMenu: true,

src/components/layouts/skeleton/README.md

@@ -0,0 +1,3 @@
+# Skeleton
+
+This component demonstrates the basic skeleton of a page. Other components should be included as per the HTML comments.

src/components/layouts/skeleton/_preview.njk

@@ -0,0 +1 @@
+{{ yield | safe }}

src/components/layouts/skeleton/skeleton.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+	title: 'Skeleton',
+	status: 'wip',
+	order: 1,
+};

src/components/layouts/skeleton/skeleton.njk

@@ -0,0 +1,35 @@
+<!doctype html>
+<html class="no-js" lang="en">
+	<head>
+		<meta charset="utf-8">
+		<meta http-equiv="x-ua-compatible" content="ie=edge">
+		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+		<script>(function(html){html.className = html.className.replace(/\bno-js\b/,'js')})(document.documentElement);</script>
+		<script src="{{ '/scripts/pinecone.umd.js' | path }}" defer></script>
+		<script src="{{ '/scripts/pinecone.js' | path }}" defer></script>
+		<link rel="stylesheet" href="{{ '/styles/pinecone.css' | path }}">
+		<link rel="apple-touch-icon" sizes="180x180" href="{{ '/images/apple-touch-icon.png' | path }}">
+		<link rel="icon" href="{{ '/images/favicon.png' | path }}" >
+		<title>Pinecone</title>
+	</head>
+
+	<body>
+		<header role="banner">
+			<div class="container">
+				<!-- Menu component goes here (brand, search button, search form, and nav) -->
+			</div>
+		</header>
+		<div class="wrap container" role="document">
+      		<div class="content">
+				<main>
+					<!-- Content goes here -->
+				</main>
+			</div>
+		</div>
+		<footer class="content-info">
+  			<div class="container">
+				<!-- Footer component goes here -->
+			</div>
+  		</footer>
+	</body>
+</html>

src/components/02-molecules/02-accordion/accordion.config.js → src/components/molecules/accordion/accordion.config.js

@@ -14,6 +14,7 @@ for ( let i = 0; i < paneCount; i++ ) {
 module.exports = {
 	title: 'Accordion',
 	status: 'wip',
+	order: 7,
 	context: {
 		panes: paneData,
 		standAlone: false

src/components/02-molecules/_brand/brand.config.js → src/components/molecules/brand/brand.config.js

@@ -1,7 +1,9 @@
 module.exports = {
 	title: 'Brand',
 	status: 'wip',
+	order: 1,
 	context: {
+		inBanner: true,
 		title: 'Platform Cooperativism Consortium',
 		visuallyHiddenTitle: true,
 	}

src/components/02-molecules/01-card/card.config.js → src/components/molecules/card/card.config.js

@@ -1,6 +1,7 @@
 module.exports = {
 	title: 'Card',
 	status: 'wip',
+	order: 6,
 	context: {
 		title: 'Card',
 		format: 'Card',