chore: add RTL examples for visual testing

CHANGELOG.md

@@ -18,7 +18,8 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 ## [Unreleased]
 
 ### Features
-- Export `triangle-left` and `triangle-right` icons in Teams theme @codepretty ([#785](https://github.com/stardust-ui/react/pull/785))
+- Export `triangle-down` and `triangle-right` icons in Teams theme @codepretty ([#785](https://github.com/stardust-ui/react/pull/785))
+- Add rtl examples for `Button` and `Divider` components @mnajdova ([#792](https://github.com/stardust-ui/react/pull/792))
 
 ### Fixes
 - Handle `onClick` and `onFocus` on ListItems correctly @layershifter ([#779](https://github.com/stardust-ui/react/pull/779))

build/gulp/plugins/gulp-example-menu.ts

@@ -15,7 +15,8 @@ const SECTION_ORDER = {
   Groups: 5,
   DEFAULT_ORDER: 6,
   Usage: 9,
-  Performance: 10,
+  Rtl: 10,
+  Performance: 11,
 }
 
 const getSectionOrder = sectionName =>

docs/src/components/ComponentDoc/ComponentControls/ComponentControls.tsx

@@ -56,7 +56,7 @@ const ComponentControls: React.FC<ComponentControlsProps> = props => {
       <ComponentControlsShowVariables active={showVariables} onClick={onShowVariables} />
       <ComponentControlsShowTransparent active={showTransparent} onClick={onShowTransparent} />
       <ComponentControlsRtl active={showRtl} onClick={onShowRtl} />
-      <ComponentControlsMaximize examplePath={examplePath} />
+      <ComponentControlsMaximize examplePath={examplePath} rtl={showRtl} />
       <ComponentControlsCopyLink anchorName={anchorName} onClick={onCopyLink} />
     </Menu>
   )

docs/src/components/ComponentDoc/ComponentControls/ComponentControlsMaximize.tsx

@@ -6,10 +6,10 @@ import { NavLink } from 'react-router-dom'
 
 import { updateForKeys } from 'docs/src/hoc'
 
-const ComponentControlsMaximize: any = ({ examplePath }) => (
+const ComponentControlsMaximize: any = ({ examplePath, rtl }) => (
   <Menu.Item
     as={NavLink}
-    to={`/maximize/${_.kebabCase(examplePath.split('/').slice(-1))}`}
+    to={`/maximize/${_.kebabCase(examplePath.split('/').slice(-1))}/${rtl}`}
     target="_blank"
     rel="noopener noreferrer"
   >
@@ -22,4 +22,4 @@ ComponentControlsMaximize.propTypes = {
   examplePath: PropTypes.string.isRequired,
 }
 
-export default updateForKeys(['examplePath'])(ComponentControlsMaximize)
+export default updateForKeys(['examplePath', 'rtl'])(ComponentControlsMaximize)

docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx

@@ -64,15 +64,17 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
   constructor(props) {
     super(props)
 
-    this.anchorName = examplePathToHash(props.examplePath)
+    const { examplePath } = props
+
+    this.anchorName = examplePathToHash(examplePath)
     this.state = {
       handleMouseLeave: this.handleMouseLeave,
       handleMouseMove: this.handleMouseMove,
       knobs: this.getDefaultKnobsValue(),
       showCode: this.isActiveHash(),
       themeName: 'teams',
       componentVariables: {},
-      showRtl: false,
+      showRtl: examplePath && examplePath.endsWith('rtl') ? true : false,
       showTransparent: false,
       showVariables: false,
       isHovering: false,

docs/src/components/ExternalExampleLayout.tsx

@@ -11,11 +11,12 @@ import {
 } from 'docs/src/utils'
 import PageNotFound from '../views/PageNotFound'
 import { babelConfig, importResolver } from './Playground/renderConfig'
+import Provider from '../../../src/components/Provider/Provider'
 
 const examplePaths = exampleSourcesContext.keys()
 
 const ExternalExampleLayout: any = props => {
-  const { exampleName } = props.match.params
+  const { exampleName, rtl } = props.match.params
   const exampleFilename = exampleKebabNameToSourceFilename(exampleName)
 
   const examplePath = _.find(examplePaths, path => {
@@ -26,23 +27,29 @@ const ExternalExampleLayout: any = props => {
   if (!examplePath) return <PageNotFound />
   const exampleSource: ExampleSource = exampleSourcesContext(examplePath)
 
+  const isRtlEnabled = rtl === 'true'
+
   return (
-    <SourceRender
-      babelConfig={babelConfig}
-      source={exampleSource.js}
-      renderHtml={false}
-      resolver={importResolver}
-    >
-      <SourceRender.Consumer>
-        {({ element, error }) => (
-          <>
-            {element}
-            {/* This block allows to see issues with examples as visual regressions. */}
-            {error && <div style={{ fontSize: '5rem', color: 'red' }}>{error.toString()}</div>}
-          </>
-        )}
-      </SourceRender.Consumer>
-    </SourceRender>
+    <Provider theme={{ rtl: isRtlEnabled }}>
+      <div dir={isRtlEnabled ? 'rtl' : undefined}>
+        <SourceRender
+          babelConfig={babelConfig}
+          source={exampleSource.js}
+          renderHtml={false}
+          resolver={importResolver}
+        >
+          <SourceRender.Consumer>
+            {({ element, error }) => (
+              <>
+                {element}
+                {/* This block allows to see issues with examples as visual regressions. */}
+                {error && <div style={{ fontSize: '5rem', color: 'red' }}>{error.toString()}</div>}
+              </>
+            )}
+          </SourceRender.Consumer>
+        </SourceRender>
+      </div>
+    </Provider>
   )
 }
 

docs/src/examples/components/Button/Rtl/ButtonExample.rtl.tsx

@@ -0,0 +1,11 @@
+import { Button } from '@stardust-ui/react'
+import * as React from 'react'
+
+const ButtonExampleRtl = () => (
+  <div>
+    <Button content="مرحبا" />
+    <Button content="عالم" primary />
+  </div>
+)
+
+export default ButtonExampleRtl

docs/src/examples/components/Button/Rtl/index.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react'
+
+import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
+import PerformanceSection from 'docs/src/components/ComponentDoc/PerformanceSection'
+
+const Rtl = () => (
+  <PerformanceSection title="Rtl">
+    <ComponentExample
+      title="Default"
+      description="A default rtl example."
+      examplePath="components/Button/Rtl/ButtonExample.rtl"
+    />
+  </PerformanceSection>
+)
+
+export default Rtl

docs/src/examples/components/Button/index.tsx

@@ -4,6 +4,7 @@ import Variations from './Variations'
 import States from './States'
 import Groups from './Groups'
 import Usage from './Usage'
+import Rtl from './Rtl'
 import Performance from './Performance'
 
 const ButtonExamples = () => (
@@ -13,6 +14,7 @@ const ButtonExamples = () => (
     <Variations />
     <Groups />
     <Usage />
+    <Rtl />
     <Performance />
   </div>
 )

docs/src/examples/components/Divider/Rtl/DividerExample.rtl.tsx

@@ -0,0 +1,6 @@
+import * as React from 'react'
+import { Divider } from '@stardust-ui/react'
+
+const DividerExampleRtl = () => <Divider content="مثال النص" />
+
+export default DividerExampleRtl

docs/src/examples/components/Divider/Rtl/index.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react'
+
+import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
+import PerformanceSection from 'docs/src/components/ComponentDoc/PerformanceSection'
+
+const Rtl = () => (
+  <PerformanceSection title="Rtl">
+    <ComponentExample
+      title="Default"
+      description="A default rtl example."
+      examplePath="components/Divider/Rtl/DividerExample.rtl"
+    />
+  </PerformanceSection>
+)
+
+export default Rtl

docs/src/examples/components/Divider/index.tsx

@@ -2,11 +2,13 @@ import * as React from 'react'
 import Performance from './Performance'
 import Types from './Types'
 import Variations from './Variations'
+import Rtl from './Rtl'
 
 const DividerExamples = () => (
   <div>
     <Types />
     <Variations />
+    <Rtl />
     <Performance />
   </div>
 )

docs/src/routes.tsx

@@ -18,7 +18,7 @@ import IntegrateCustomComponents from './views/IntegrateCustomComponents'
 const Router = () => (
   <BrowserRouter basename={__BASENAME__}>
     <Switch>
-      <Route exact path="/maximize/:exampleName" component={ExternalExampleLayout} />
+      <Route exact path="/maximize/:exampleName/:rtl?" component={ExternalExampleLayout} />
       <Switch>
         <DocsLayout exact path="/" component={Introduction} />
         <DocsLayout exact path="/:type/:name" component={DocsRoot} sidebar />

docs/src/utils/exampleKebabNameToSourceFilename.ts

@@ -10,6 +10,7 @@ const exampleKebabNameToSourceFilename = (exampleKebabName: string) => {
   return `${_.startCase(exampleKebabName)
     .replace(/ /g, '')
     .replace(/Shorthand$/, '.shorthand')
+    .replace(/Rtl$/, '.rtl')
     .replace(/Perf$/, '.perf')}.source.json`
 }
 

screener.config.js

@@ -30,9 +30,10 @@ const screenerConfig = {
     .sync('docs/src/examples/**/*.tsx', { ignore: ['**/index.tsx', '**/*.knobs.tsx'] })
     .map(examplePath => {
       const { name: nameWithoutExtension, base: nameWithExtension } = path.parse(examplePath)
+      const rtl = nameWithExtension.endsWith('.rtl.tsx')
 
       return {
-        url: `http://localhost:8080/maximize/${_.kebabCase(nameWithoutExtension)}`,
+        url: `http://localhost:8080/maximize/${_.kebabCase(nameWithoutExtension)}/${rtl}`,
         name: nameWithExtension,
       }
     }),