From d29fc3c20745cd175c4c8316504522d4ee6ef8b9 Mon Sep 17 00:00:00 2001
From: Kristoffer Sivertsen <kristoffer@sanity.io>
Date: Thu, 1 Aug 2019 16:37:17 +0200
Subject: [PATCH] [initial-value-templates] Add support for description

---
 .../src/lists/styles/CreateDocument.css       |  2 +-
 .../src/previews/CreateDocumentPreview.js     |  3 ++
 .../@sanity/components/src/previews/story.js  |  5 +++
 .../previews/styles/CreateDocumentPreview.css | 40 ++++++++++++++-----
 .../src/components/DefaultLayout.js           |  2 +-
 .../src/utils/styles/withInitialValue.css     |  2 +-
 .../initial-value-templates/src/Template.ts   | 13 +++++-
 packages/test-studio/src/templates.js         |  1 +
 8 files changed, 53 insertions(+), 15 deletions(-)

diff --git a/packages/@sanity/components/src/lists/styles/CreateDocument.css b/packages/@sanity/components/src/lists/styles/CreateDocument.css
index 027d776ce18..76b3e5721a4 100644
--- a/packages/@sanity/components/src/lists/styles/CreateDocument.css
+++ b/packages/@sanity/components/src/lists/styles/CreateDocument.css
@@ -3,7 +3,7 @@
 .root {
   display: grid;
   width: 100%;
-  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
   grid-gap: var(--medium-padding);
   margin: 0;
   padding: 0;
diff --git a/packages/@sanity/components/src/previews/CreateDocumentPreview.js b/packages/@sanity/components/src/previews/CreateDocumentPreview.js
index f469e367084..9feecb99f34 100644
--- a/packages/@sanity/components/src/previews/CreateDocumentPreview.js
+++ b/packages/@sanity/components/src/previews/CreateDocumentPreview.js
@@ -11,6 +11,7 @@ class CreateDocumentPreview extends React.PureComponent {
   static propTypes = {
     title: fieldProp,
     subtitle: fieldProp,
+    description: fieldProp,
     media: fieldProp,
     icon: PropTypes.func,
     isPlaceholder: PropTypes.bool,
@@ -42,6 +43,7 @@ class CreateDocumentPreview extends React.PureComponent {
       media = this.props.icon,
       isPlaceholder,
       mediaDimensions,
+      description,
       params
     } = this.props
 
@@ -83,6 +85,7 @@ class CreateDocumentPreview extends React.PureComponent {
             </h3>
           )}
         </div>
+        {description && <p className={styles.description}>{description}</p>}
         <Ink duration={1000} opacity={0.1} radius={200} />
       </IntentLink>
     )
diff --git a/packages/@sanity/components/src/previews/story.js b/packages/@sanity/components/src/previews/story.js
index 978cd86f674..55abd85c6d5 100644
--- a/packages/@sanity/components/src/previews/story.js
+++ b/packages/@sanity/components/src/previews/story.js
@@ -646,6 +646,11 @@ storiesOf('Previews')
           params={{intent: 'create', type: 'test'}}
           title={text('title', 'Movie', 'props')}
           subtitle={text('subtitle', 'Sci-fi', 'props')}
+          description={text(
+            'description',
+            'Science fiction is a genre of speculative fiction that has been called the "literature of ideas". It typically deals with imaginative and futuristic concepts such as advanced science and technology, time travel, parallel universes, fictional worlds, space exploration, and extraterrestrial life.',
+            'props'
+          )}
           icon={FileIcon}
         />
       </Sanity>
diff --git a/packages/@sanity/components/src/previews/styles/CreateDocumentPreview.css b/packages/@sanity/components/src/previews/styles/CreateDocumentPreview.css
index 2431d9e1c03..353f4b14d20 100644
--- a/packages/@sanity/components/src/previews/styles/CreateDocumentPreview.css
+++ b/packages/@sanity/components/src/previews/styles/CreateDocumentPreview.css
@@ -2,17 +2,23 @@
 
 .root {
   composes: item from 'part:@sanity/base/theme/layout/selectable-style';
-  display: flex;
-  flex-direction: row-reverse;
-  justify-content: space-between;
+  display: block;
   text-decoration: none;
   position: relative;
   background-color: var(--component-bg);
-  color: var(--text-color-secondary);
-  border-radius: var(--border-radius-medium);
+  border-radius: var(--border-radius-small);
   border: 1px solid var(--hairline-color);
   height: 100%;
   box-sizing: border-box;
+  padding: var(--medium-padding);
+
+  @media (hover: hover) {
+    color: var(--text-color-secondary);
+
+    @nest &:hover {
+      color: var(--text-color);
+    }
+  }
 
   @nest &:focus {
     background-color: var(--component-bg);
@@ -30,28 +36,42 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-  padding: var(--medium-padding);
+  min-height: calc(2.4376em);
 }
 
 .title {
   font-weight: normal;
   font-size: var(--font-size-base);
+  line-height: calc(21 / 16);
   padding: 0;
   margin: 0;
 }
 
 .subtitle {
-  color: var(--text-color-secondary);
   font-weight: normal;
   font-size: var(--font-size-xsmall);
+  line-height: calc(15 / 12);
   padding: 0;
   margin: 0;
 }
 
 .media {
+  float: right;
   display: flex;
-  align-items: center;
-  justify-content: center;
+  align-items: flex-start;
   font-size: var(--icon-size);
-  padding: var(--medium-padding);
+  padding: calc(var(--small-padding) - 1px);
+}
+
+.description {
+  composes: subtitle;
+  opacity: 0.7;
+}
+
+.root .description {
+  margin-top: 1em;
+}
+
+.description:empty {
+  display: none;
 }
diff --git a/packages/@sanity/default-layout/src/components/DefaultLayout.js b/packages/@sanity/default-layout/src/components/DefaultLayout.js
index 2340602fa5a..32b94e51fc1 100644
--- a/packages/@sanity/default-layout/src/components/DefaultLayout.js
+++ b/packages/@sanity/default-layout/src/components/DefaultLayout.js
@@ -143,7 +143,7 @@ export default withRouterHOC(
           const templates = getTemplatesBySchemaType(type.name)
           return actions.concat(
             templates.map(tpl => ({
-              title: tpl.title,
+              ...tpl,
               subtitle: type.title === tpl.title ? undefined : type.title,
               key: tpl.id,
               icon: tpl.icon || type.icon,
diff --git a/packages/@sanity/desk-tool/src/utils/styles/withInitialValue.css b/packages/@sanity/desk-tool/src/utils/styles/withInitialValue.css
index fc49e17c5d0..22c946cd9e7 100644
--- a/packages/@sanity/desk-tool/src/utils/styles/withInitialValue.css
+++ b/packages/@sanity/desk-tool/src/utils/styles/withInitialValue.css
@@ -2,5 +2,5 @@
 
 .root {
   padding: var(--medium-padding);
-  max-width: 42rem;
+  max-width: 40rem;
 }
diff --git a/packages/@sanity/initial-value-templates/src/Template.ts b/packages/@sanity/initial-value-templates/src/Template.ts
index bec59e127d0..ab65c7eee56 100644
--- a/packages/@sanity/initial-value-templates/src/Template.ts
+++ b/packages/@sanity/initial-value-templates/src/Template.ts
@@ -1,6 +1,7 @@
 export interface Template {
   id: string
   title: string
+  description?: string
   schemaType: string
   icon?: Function
   value: {[key: string]: any}
@@ -25,6 +26,14 @@ export class TemplateBuilder {
     return this.clone({title})
   }
 
+  description(description: string) {
+    return this.clone({description})
+  }
+
+  getDescription() {
+    return this.spec.description
+  }
+
   getTitle() {
     return this.spec.title
   }
@@ -54,7 +63,7 @@ export class TemplateBuilder {
   }
 
   serialize(): Template {
-    const {id, title, schemaType, value, icon} = this.spec
+    const {id, title, description, schemaType, value, icon} = this.spec
     if (!id) {
       throw new Error('Template is missing required "id"')
     }
@@ -71,7 +80,7 @@ export class TemplateBuilder {
       throw new Error(`Template with ID "${id}" is missing required "value"`)
     }
 
-    return {id, title, schemaType, value, icon}
+    return {id, title, description, schemaType, value, icon}
   }
 
   clone(withSpec?: Partial<Template>) {
diff --git a/packages/test-studio/src/templates.js b/packages/test-studio/src/templates.js
index dee5d77b55c..4a9db99be30 100644
--- a/packages/test-studio/src/templates.js
+++ b/packages/test-studio/src/templates.js
@@ -6,6 +6,7 @@ export default [
   T.template({
     id: 'author-developer',
     title: 'Developer',
+    description: `Selects the role "Developer" for you, so you don't have to`,
     schemaType: 'author',
     value: {
       role: 'developer'