From b0d7ef85684b94646395d814a0fb405e782ebe00 Mon Sep 17 00:00:00 2001
From: Nokome Bentley <nokome@stenci.la>
Date: Mon, 17 Feb 2020 18:25:18 +1300
Subject: [PATCH] refactor(Shared): Move designa to shared

See last bullet point in https://github.com/stencila/thema/issues/25#issuecomment-559620632
---
 .postcssrc                                               | 2 +-
 src/{designa => shared/styles}/mixins/list-separated.css | 2 +-
 src/{designa => shared/styles/types}/Article.css         | 2 +-
 .../mixins => shared/styles/types}/CreativeWork.css      | 7 ++-----
 src/{designa => shared/styles/types}/Entity.css          | 0
 src/{designa => shared/styles/types}/Person.css          | 4 ++--
 src/themes/nature/styles.css                             | 9 +++------
 src/themes/plos/styles.css                               | 9 +++------
 8 files changed, 13 insertions(+), 22 deletions(-)
 rename src/{designa => shared/styles}/mixins/list-separated.css (86%)
 rename src/{designa => shared/styles/types}/Article.css (92%)
 rename src/{designa/mixins => shared/styles/types}/CreativeWork.css (60%)
 rename src/{designa => shared/styles/types}/Entity.css (100%)
 rename src/{designa => shared/styles/types}/Person.css (95%)

diff --git a/.postcssrc b/.postcssrc
index bcd4ab8f1..1b70a9990 100644
--- a/.postcssrc
+++ b/.postcssrc
@@ -5,7 +5,7 @@
     "postcss-import-url": { "modernBrowser": true },
     "postcss-url": { "url": "rebase" },
     "postcss-mixins": {
-      "mixinsDir": "src/designa/mixins"
+      "mixinsDir": "src/shared/styles/mixins"
     },
     "postcss-custom-selectors": {
       "importFrom": "src/selectors.css"
diff --git a/src/designa/mixins/list-separated.css b/src/shared/styles/mixins/list-separated.css
similarity index 86%
rename from src/designa/mixins/list-separated.css
rename to src/shared/styles/mixins/list-separated.css
index 59edfd212..0b04b4153 100644
--- a/src/designa/mixins/list-separated.css
+++ b/src/shared/styles/mixins/list-separated.css
@@ -2,7 +2,7 @@
   Display a `<ol>` or `<ul>` as an inline list of items
   separated by some content `$separator`
 */
-@define-mixin list-separated $separator: ', ' {
+@define-mixin list-inline $separator: ', ' {
   display: inline;
   list-style: none;
   margin: 0;
diff --git a/src/designa/Article.css b/src/shared/styles/types/Article.css
similarity index 92%
rename from src/designa/Article.css
rename to src/shared/styles/types/Article.css
index d976c569d..192f155a7 100644
--- a/src/designa/Article.css
+++ b/src/shared/styles/types/Article.css
@@ -2,7 +2,7 @@
 @import './Person.css';
 
 :--Article {
-  @mixin CreativeWork;
+  @extend: --CreativeWork;
 
   max-width: var(--article-content-max-width);
   margin-left: auto;
diff --git a/src/designa/mixins/CreativeWork.css b/src/shared/styles/types/CreativeWork.css
similarity index 60%
rename from src/designa/mixins/CreativeWork.css
rename to src/shared/styles/types/CreativeWork.css
index ee75c7c4c..e8fcb8446 100644
--- a/src/designa/mixins/CreativeWork.css
+++ b/src/shared/styles/types/CreativeWork.css
@@ -1,12 +1,9 @@
-/*
-  A mixin for nodes that extend `CreativeWork` (e.g. `Article`, `Figure`).
-*/
-@define-mixin CreativeWork {
+:--CreativeWork {
   /*
    `authors` property: a comma separated list of authors
   */
   :--authors {
-    @mixin list-separated;
+    @mixin list-inline;
   }
 
   :--references > :--CreativeWork {
diff --git a/src/designa/Entity.css b/src/shared/styles/types/Entity.css
similarity index 100%
rename from src/designa/Entity.css
rename to src/shared/styles/types/Entity.css
diff --git a/src/designa/Person.css b/src/shared/styles/types/Person.css
similarity index 95%
rename from src/designa/Person.css
rename to src/shared/styles/types/Person.css
index 0b2e11c02..7f801dfe2 100644
--- a/src/designa/Person.css
+++ b/src/shared/styles/types/Person.css
@@ -35,7 +35,7 @@
     the email address/es (leave that to web component).
   */
   :--emails {
-    @mixin list-separated;
+    @mixin list-inline;
 
     order: 2;
 
@@ -56,7 +56,7 @@
     of integer links.
   */
   :--affiliations {
-    @mixin list-separated;
+    @mixin list-inline;
 
     order: 3;
 
diff --git a/src/themes/nature/styles.css b/src/themes/nature/styles.css
index 6b1a0253b..2b5f5d583 100644
--- a/src/themes/nature/styles.css
+++ b/src/themes/nature/styles.css
@@ -1,4 +1,5 @@
 @import '../../shared/styles/shared.css';
+@import '../../shared/styles/types/Person.css';
 @import 'prismjs/themes/prism.css';
 @import '../../shared/fonts/lora/lora.css';
 @import '../../shared/fonts/sourceSansPro/sourceSansPro.css';
@@ -422,10 +423,6 @@ blockquote {
   }
 }
 
-/* Microdata-based Styles */
-@import '../../designa/Entity.css';
-@import '../../designa/Person.css';
-
 :--Article {
   > :--headline {
     padding-left: 50px;
@@ -440,13 +437,13 @@ blockquote {
 
     :--authors,
     :--organizations {
-      @mixin list-separated;
+      @mixin list-inline;
 
       display: block;
     }
 
     :--organizations {
-      @mixin list-separated '; ';
+      @mixin list-inline '; ';
 
       :--Organization > * {
         display: inline;
diff --git a/src/themes/plos/styles.css b/src/themes/plos/styles.css
index ee6362ca3..a46d26ac6 100644
--- a/src/themes/plos/styles.css
+++ b/src/themes/plos/styles.css
@@ -1,6 +1,7 @@
 @import '../../shared/styles/shared.css';
 @import 'prismjs/themes/prism.css';
 @import '../../shared/fonts/openSans/openSans.css';
+@import '../../shared/styles/types/Person.css';
 
 :root {
   --max-width: 650px;
@@ -19,10 +20,6 @@
   --bg-color: #fff;
 }
 
-/* Microdata-based Styles */
-@import '../../designa/Entity.css';
-@import '../../designa/Person.css';
-
 :--Article {
   > :--headline + div {
     max-width: var(--max-width);
@@ -32,11 +29,11 @@
     line-height: normal;
 
     :--authors {
-      @mixin list-separated;
+      @mixin list-inline;
     }
 
     :--organizations {
-      @mixin list-separated '; ';
+      @mixin list-inline '; ';
 
       margin-top: 1.25rem;
       display: block;