Merge pull request #49 from sanity-io/update-docs

Update docs and selector UI

README.md

@@ -21,7 +21,7 @@ There are two popular methods of internationalization in Sanity Studio:
 
 This plugin adds features to the Studio to improve handling **document-level translations**.
 
-- A View Pane to create language versions of each Document
+- A Language Selector to create and browse language-specific versions of each Document
 - Document Actions to update base and translated documents to ensure references stay in tact
 - Document Badges to highlight the language version of a document
 
@@ -47,12 +47,12 @@ The plugin is now installed, but you will need to complete the following steps t
 
 ## Setup next steps
 
-1. [Customise Desk Structure](docs/desk-structure.md)  
-   To setup the 'Translations' View Pane on Documents
-2. [Configuration options](docs/configuration-options.md)  
+1. [Configuration options](docs/configuration-options.md)  
    To declare available Languages and other settings
-3. [Activating internationalization on schema](docs/activating-internationalization-on-schema.md)  
+2. [Activating internationalization on schema](docs/activating-internationalization-on-schema.md)  
    To enable all the above features on schema
+3. [Customise Desk Structure](docs/desk-structure.md)  
+   To filter documents down to the base language version
 
 ## Other documentation
 

docs/activating-internationalization-on-schema.md

@@ -2,9 +2,17 @@
 
 To enable document wide translations for a schemas you need to add the `i18n` key in a schema.
 
-Adding `i18n: true` to a schema will use the defaults in your configuration file.
+Adding `i18n: true` to a document schema will use the defaults in your configuration file. Example:
 
-Alternatively you can set an object like `i18n: {...}` to override those defaults.
+```js
+export default {
+  type: 'document',
+  i18n: true,
+  // ... all other settings
+}
+```
+
+Alternatively you can set an object like `i18n: {...}` to override your configuration file's defaults per-schema.
 
 - `base`: Override the globally configured base language ID. If there is no base language ID configured at all, the first language in the list will be used.
 - `referenceBehavior`: Can be `strong` (default), `weak` or `disabled`. This option defines how the translated documents are referenced in the parent document
@@ -18,13 +26,12 @@ Alternatively you can set an object like `i18n: {...}` to override those default
 
 Consider setting [Initial Values](https://www.sanity.io/guides/getting-started-with-initial-values-for-new-documents) so that the base language value is already set on new documents.
 
-## Example
-
 ```js
 export default {
   type: 'document',
-  name: '...',
-  title: '...',
+  initialValue: {
+    __i18n_lang: 'en_US',
+  },
   i18n: {
     base: 'en_US',
     languages: ['en_US', 'nl_NL'],
@@ -34,11 +41,8 @@ export default {
       baseReference: '__i18n_base',
     },
   },
-  initialValue: {
-    __i18n_lang: 'en_US',
-  },
-  fields: [],
+  // ... all other settings
 }
 ```
 
-With desk structure and your schema setup, you should now see the "Translations" View Pane in your Studio!
+With Desk Structure and your Schema setup, you should now see the Language Selector above the document editor in your Studio.

docs/desk-structure.md

@@ -2,27 +2,17 @@
 
 [See the Sanity docs on how to to setup Desk Structure](https://www.sanity.io/guides/getting-started-with-structure-builder) if you do not already have Desk Structure customised in your project.
 
-Once your Studio has its own Desk Structure, you can configure the plugin in two ways:
-
-## Method 1: Default implementation
-
-Use this method if you don't already have a custom desk structure of your own.
+Once your Studio has its own Desk Structure, you'll want to filter down any Lists for internationalized schema types to just base language documents:
 
 ```js
-import * as Structure from '@sanity/document-internationalization/lib/structure'
-
-export default Structure.default
-```
-
-## Method 2: Manual implementation
-
-Use this method if you need to combine your own desk structure implementation with the plugin.
-
-```js
-import * as Structure from '@sanity/document-internationalization/lib/structure'
-
-export default () => {
-  const items = Structure.getFilteredDocumentTypeListItems()
-  return S.list().id('__root__').title('Content').items(items)
-}
+S.listItem()
+  .title(`Lesson`)
+  .child(
+    S.documentList()
+      .title(`Lesson documents`)
+      .schemaType('lesson')
+      .filter('_type == "lesson" && __i18n_lang == $baseLanguage')
+      .params({baseLanguage: `en_US`})
+      .canHandleIntent(S.documentTypeList('lesson').getCanHandleIntent())
+  )
 ```

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/document-internationalization",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "license": "MIT",
   "engines": {
     "node": ">=14"

src/constants/UiMessages.ts

@@ -13,7 +13,7 @@ export const UiMessages = {
   draft: 'Draft',
   missingTranslations:
     'Following languages are missing some translations compared to the base language',
-  base: 'Base Translation',
+  base: 'Base',
   missing: 'Missing',
   deleteAll: {
     buttonTitle: 'Delete (incl. translations)',

src/language-select/components/LanguageSelect/LanguageSelectList.tsx

@@ -17,6 +17,10 @@ const Divider = styled(Box)`
   border-bottom: 1px solid var(--card-shadow-outline-color);
 `
 
+const SelectorBox = styled(Box)`
+  minwidth: 250;
+`
+
 export const LanguageSelectList: React.FC<Props> = ({
   draftLanguageObjects,
   publishedLanguageObjects,
@@ -47,7 +51,7 @@ export const LanguageSelectList: React.FC<Props> = ({
   }, [draftLanguageObjects, publishedLanguageObjects])
 
   return (
-    <Box>
+    <SelectorBox>
       {!!existingLanguageObjects.length && (
         <Box>
           <LanguageSelectLabel>{UiMessages.languageSelect.listLabels.existing}</LanguageSelectLabel>
@@ -75,6 +79,6 @@ export const LanguageSelectList: React.FC<Props> = ({
           </Grid>
         </Box>
       )}
-    </Box>
+    </SelectorBox>
   )
 }

src/language-select/components/LanguageSelect/LanguageSelectListItem.tsx

@@ -28,17 +28,6 @@ const ListItemSpinner = styled(SpinnerIcon)`
   animation: ${rotate} 500ms linear infinite;
 `
 
-const ListItemBadge = styled(Text)`
-  margin-left: ${({theme}) => `${theme.sanity.space[2]}px`};
-  margin-right: 35px;
-  margin-top: 1px;
-
-  & > span {
-    display: inline-block;
-    vertical-align: middle;
-  }
-`
-
 const ListItemSplitButton = styled(Button)`
   display: none;
   flex-shrink: 0;
@@ -207,11 +196,7 @@ export const LanguageSelectListItem: React.FC<Props> = ({status, language}) => {
         selected={language.isCurrentLanguage}
         icon={FlagIcon}
         iconRight={
-          !!baseTranslationBadgeLabel && (
-            <ListItemBadge>
-              <Badge>{baseTranslationBadgeLabel}</Badge>
-            </ListItemBadge>
-          )
+          !!baseTranslationBadgeLabel && <Badge fontSize={0}>{baseTranslationBadgeLabel}</Badge>
         }
         text={language.title}
         onClick={handleOpenClick}

src/language-select/components/SingleFlag/SingleFlag.tsx

@@ -14,9 +14,8 @@ type Props = {
 
 const FlagImageContainer = styled.span`
   display: block;
-  padding: 1px;
   font-size: 19px;
-  margin: 0px -0.05em 0px -0.1em;
+  transform: translateY(-1px);
 
   & img {
     display: block;