feat: support to change the lang attribute in a preview HTML

examples/angular-cli/src/stories/__snapshots__/welcome-storybook.stories.storyshot

@@ -3,98 +3,98 @@
 exports[`Storyshots Welcome/ To Storybook To Storybook 1`] = `
 <storybook-wrapper>
   <storybook-welcome-component
-    _nghost-a-c151=""
+    _nghost-a-c152=""
   >
     <main
-      _ngcontent-a-c151=""
+      _ngcontent-a-c152=""
     >
       <h1
-        _ngcontent-a-c151=""
+        _ngcontent-a-c152=""
       >
         Welcome to storybook
       </h1>
       <p
-        _ngcontent-a-c151=""
+        _ngcontent-a-c152=""
       >
         This is a UI component dev environment for your app.
       </p>
       <p
-        _ngcontent-a-c151=""
+        _ngcontent-a-c152=""
       >
          We've added some basic stories inside the 
         <span
-          _ngcontent-a-c151=""
+          _ngcontent-a-c152=""
           class="inline-code"
         >
           src/stories
         </span>
          directory. 
         <br
-          _ngcontent-a-c151=""
+          _ngcontent-a-c152=""
         />
          A story is a single state of one or more UI components. You can have as many stories as you want. 
         <br
-          _ngcontent-a-c151=""
+          _ngcontent-a-c152=""
         />
          (Basically a story is like a visual test case.) 
       </p>
       <p
-        _ngcontent-a-c151=""
+        _ngcontent-a-c152=""
       >
          See these sample 
         <a
-          _ngcontent-a-c151=""
+          _ngcontent-a-c152=""
           role="button"
           tabindex="0"
         >
           stories
         </a>
          for a component called 
         <span
-          _ngcontent-a-c151=""
+          _ngcontent-a-c152=""
           class="inline-code"
         >
           Button
         </span>
          . 
       </p>
       <p
-        _ngcontent-a-c151=""
+        _ngcontent-a-c152=""
       >
          Just like that, you can add your own components as stories. 
         <br
-          _ngcontent-a-c151=""
+          _ngcontent-a-c152=""
         />
          You can also edit those components and see changes right away. 
         <br
-          _ngcontent-a-c151=""
+          _ngcontent-a-c152=""
         />
          (Try editing the 
         <span
-          _ngcontent-a-c151=""
+          _ngcontent-a-c152=""
           class="inline-code"
         >
           Button
         </span>
          stories located at 
         <span
-          _ngcontent-a-c151=""
+          _ngcontent-a-c152=""
           class="inline-code"
         >
           src/stories/index.js
         </span>
         .) 
       </p>
       <p
-        _ngcontent-a-c151=""
+        _ngcontent-a-c152=""
       >
          Usually we create stories with smaller UI components in the app.
         <br
-          _ngcontent-a-c151=""
+          _ngcontent-a-c152=""
         />
          Have a look at the 
         <a
-          _ngcontent-a-c151=""
+          _ngcontent-a-c152=""
           href="https://storybook.js.org/basics/writing-stories"
           rel="noopener noreferrer"
           target="_blank"
@@ -104,20 +104,20 @@ exports[`Storyshots Welcome/ To Storybook To Storybook 1`] = `
          section in our documentation. 
       </p>
       <p
-        _ngcontent-a-c151=""
+        _ngcontent-a-c152=""
         class="note"
       >
         <b
-          _ngcontent-a-c151=""
+          _ngcontent-a-c152=""
         >
           NOTE:
         </b>
         <br
-          _ngcontent-a-c151=""
+          _ngcontent-a-c152=""
         />
          Have a look at the 
         <span
-          _ngcontent-a-c151=""
+          _ngcontent-a-c152=""
           class="inline-code"
         >
           .storybook/webpack.config.js

examples/angular-cli/src/stories/core/styles/__snapshots__/story-styles.stories.storyshot

@@ -3,7 +3,7 @@
 exports[`Storyshots Core / Story host styles With Args 1`] = `
 <storybook-wrapper>
   <storybook-button-component
-    _ngcontent-a-c144=""
+    _ngcontent-a-c145=""
     _nghost-a-c43=""
     ng-reflect-text="Button with custom styles"
   >
@@ -19,7 +19,7 @@ exports[`Storyshots Core / Story host styles With Args 1`] = `
 exports[`Storyshots Core / Story host styles With story template 1`] = `
 <storybook-wrapper>
   <storybook-button-component
-    _ngcontent-a-c143=""
+    _ngcontent-a-c144=""
     _nghost-a-c43=""
     ng-reflect-text="Button with custom styles"
   >

lib/builder-webpack4/src/preview/iframe-webpack.config.ts

@@ -166,6 +166,7 @@ export default async ({
           },
           headHtmlSnippet,
           bodyHtmlSnippet,
+          lang: envs.STORYBOOK_PREVIEW_HTML_LANG || 'en',
         }),
         minify: {
           collapseWhitespace: true,

lib/builder-webpack5/src/preview/iframe-webpack.config.ts

@@ -166,6 +166,7 @@ export default async ({
           },
           headHtmlSnippet,
           bodyHtmlSnippet,
+          lang: envs.STORYBOOK_PREVIEW_HTML_LANG || 'en',
         }),
         minify: {
           collapseWhitespace: true,

lib/core-common/src/templates/index.ejs

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="<%= lang %>">
   <head>
     <meta charset="utf-8" />
     <title><%= options.title || 'Storybook'%></title>

lib/manager-webpack4/src/manager-webpack.config.ts

@@ -99,6 +99,7 @@ export default async ({
             PREVIEW_URL: previewUrl, // global preview URL
           },
           headHtmlSnippet,
+          lang: envs.STORYBOOK_PREVIEW_HTML_LANG || 'en',
         }),
         template,
       }) as any) as WebpackPluginInstance,

lib/manager-webpack5/src/manager-webpack.config.ts

@@ -99,6 +99,7 @@ export default async ({
             PREVIEW_URL: previewUrl, // global preview URL
           },
           headHtmlSnippet,
+          lang: envs.STORYBOOK_PREVIEW_HTML_LANG || 'en',
         }),
         template,
       }) as any) as WebpackPluginInstance,