New sidebar

config/storybook/webpack.config.js

@@ -14,6 +14,9 @@
 
 /* eslint-env node */
 /* eslint-disable import/no-commonjs */
+import fs from 'fs'
+import path from 'path'
+
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 require('@babel/register')
 
@@ -22,9 +25,16 @@ const { default: bundleConfig, styleConfig } = require('../webpack.config.babel'
 // List of allowed plugins.
 const allow = [MiniCssExtractPlugin]
 
+const { CONTEXT = '.' } = process.env
+const context = path.resolve(CONTEXT)
+const supportedLocales = fs
+  .readdirSync(path.resolve(context, 'pkg/webui/locales'))
+  .filter(fn => fn.endsWith('.json'))
+  .map(fn => fn.split('.')[0])
+
 module.exports = async ({ config, mode }) => {
+  const webpack = require('webpack')
   if (mode === 'PRODUCTION') {
-    const webpack = require('webpack')
     allow.push(webpack.DllReferencePlugin)
   }
 
@@ -50,7 +60,13 @@ module.exports = async ({ config, mode }) => {
     module: {
       rules: [...config.module.rules, styleConfig],
     },
-    plugins: [...config.plugins, ...filteredPlugins],
+    plugins: [
+      ...config.plugins,
+      ...filteredPlugins,
+      new webpack.DefinePlugin({
+        'process.predefined.SUPPORTED_LOCALES': JSON.stringify(supportedLocales),
+      }),
+    ],
   }
 
   return cfg

pkg/webui/components/breadcrumbs/breadcrumb/breadcrumb.styl

@@ -12,27 +12,32 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-.link
-  one-liner()
-  text-decoration: none
-  color: $tc-subtle-gray
-  min-height: 18px
 
+.container
   &:not(:last-child):after
     material-icon()
     margin: 0 $cs.xxs
     content: 'keyboard_arrow_right'
     color: $tc-subtle-gray
 
+
+.link
+  one-liner()
+  text-decoration: none
+  color: $tc-subtle-gray
+  min-height: 18px
   +focus-visible()
     text-decoration: underline
     color: $tc-deep-gray
 
 
 .last
   one-liner()
+  display: flex
+  align-items: center
   color: $tc-deep-gray
   min-height: 18px
+  font-weight: $fw.bold
   +media-query($bp.s)
     &:last-child
       padding-right: $ls.xxs

pkg/webui/components/breadcrumbs/breadcrumb/index.js

@@ -29,16 +29,22 @@ const Breadcrumb = ({ className, path, content, isLast }) => {
   let componentProps
   if (!isLast) {
     Component = Link
-    componentProps = { className: classnames(className, style.link), to: path, secondary: true }
+    componentProps = {
+      className: classnames(className, style.container, style.link),
+      to: path,
+      secondary: true,
+    }
   } else {
     Component = 'span'
-    componentProps = { className: classnames(className, style.last) }
+    componentProps = { className: classnames(className, style.container, style.last) }
   }
 
   return (
-    <Component {...componentProps}>
-      {isRawText ? <span>{content}</span> : <Message content={content} />}
-    </Component>
+    <span {...componentProps}>
+      <Component {...componentProps}>
+        {isRawText ? content : <Message content={content} />}
+      </Component>
+    </span>
   )
 }