add diagonal right to left pattern

packages/vx-demo/src/sandboxes/vx-pattern/Example.tsx

@@ -52,6 +52,16 @@ const Patterns: React.FC<{ id: string }>[] = [
       orientation={['diagonal']}
     />
   ),
+  ({ id }) => (
+    <PatternLines
+      id={id}
+      height={6}
+      width={6}
+      stroke="black"
+      strokeWidth={1}
+      orientation={['diagonalRightToLeft']}
+    />
+  ),
   ({ id }) => (
     <PatternLines
       id={id}
@@ -100,7 +110,7 @@ const Patterns: React.FC<{ id: string }>[] = [
 ];
 
 export default function Example({ width, height, margin = defaultMargin }: PatternProps) {
-  const numColumns = width > 600 ? 4 : 2;
+  const numColumns = 3;
   const numRows = Patterns.length / numColumns;
   const columnWidth = Math.max((width - margin.left - margin.right) / numColumns, 0);
   const rowHeight = Math.max((height - margin.bottom - margin.top) / numRows, 0);

packages/vx-pattern/src/constants/index.ts

@@ -1,7 +1,8 @@
-export type PatternOrientationType = 'horizontal' | 'vertical' | 'diagonal';
+export type PatternOrientationType = 'horizontal' | 'vertical' | 'diagonal' | 'diagonalRightToLeft';
 
 export const PatternOrientation: { [key in PatternOrientationType]: key } = {
   horizontal: 'horizontal',
   vertical: 'vertical',
   diagonal: 'diagonal',
+  diagonalRightToLeft: 'diagonalRightToLeft',
 };

packages/vx-pattern/src/patterns/Lines.tsx

@@ -3,7 +3,7 @@ import cx from 'classnames';
 import Pattern from './Pattern';
 import { PatternOrientation, PatternOrientationType } from '../constants';
 
-function pathForOrientation({
+export function pathForOrientation({
   height,
   orientation,
 }: {
@@ -19,6 +19,10 @@ function pathForOrientation({
       return `M 0,${height} l ${height},${-height} M ${-height / 4},${height / 4} l ${height /
         2},${-height / 2}
              M ${(3 / 4) * height},${(5 / 4) * height} l ${height / 2},${-height / 2}`;
+    case PatternOrientation.diagonalRightToLeft:
+      return `M 0,0 l ${height},${height}
+        M ${-height / 4},${(3 / 4) * height} l ${height / 2},${height / 2}
+        M ${(3 / 4) * height},${-height / 4} l ${height / 2},${height / 2}`;
     default:
       return `M ${height / 2}, 0 l 0, ${height}`;
   }

packages/vx-pattern/test/PatternLines.test.tsx

@@ -2,6 +2,8 @@ import React from 'react';
 import { shallow } from 'enzyme';
 
 import { PatternLines } from '../src';
+import { PatternOrientationType } from '../src/constants';
+import { pathForOrientation } from '../src/patterns/Lines';
 
 describe('<PatternLines />', () => {
   test('it should be defined', () => {
@@ -32,4 +34,17 @@ describe('<PatternLines />', () => {
     const wrapper = shallow(<PatternLines id="test" height={4} width={4} />);
     expect(wrapper.find('rect')).toHaveLength(0);
   });
+
+  test('it should render only the specified pattern lines', () => {
+    const size = 4;
+    const orientation: PatternOrientationType[] = ['diagonal', 'diagonalRightToLeft'];
+    const renderedPaths = orientation.map(o =>
+      pathForOrientation({ orientation: o, height: size }),
+    );
+    const wrapper = shallow(
+      <PatternLines id="test" height={size} width={size} orientation={orientation} />,
+    );
+    expect(wrapper.find('path')).toHaveLength(2);
+    expect(wrapper.find('path').map(path => path.prop('d'))).toEqual(renderedPaths);
+  });
 });