[initial-value-templates] Add support for description

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;

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>
     )

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>

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;
 }

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,

packages/@sanity/desk-tool/src/utils/styles/withInitialValue.css

@@ -2,5 +2,5 @@
 
 .root {
   padding: var(--medium-padding);
-  max-width: 42rem;
+  max-width: 40rem;
 }

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>) {

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'