From 5a0089b522a8da1a935bde97a82bb313b0f67935 Mon Sep 17 00:00:00 2001
From: dennisja <dennisjjagwe@gmail.com>
Date: Thu, 11 Jun 2020 08:10:09 +0200
Subject: [PATCH 1/3] add diagonal right to left pattern

---
 packages/vx-pattern/src/constants/index.ts     |  3 ++-
 packages/vx-pattern/src/patterns/Lines.tsx     |  7 ++++++-
 packages/vx-pattern/test/PatternLines.test.tsx | 15 +++++++++++++++
 3 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/packages/vx-pattern/src/constants/index.ts b/packages/vx-pattern/src/constants/index.ts
index f070f8bf0..6e2a02c4b 100644
--- a/packages/vx-pattern/src/constants/index.ts
+++ b/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',
 };
diff --git a/packages/vx-pattern/src/patterns/Lines.tsx b/packages/vx-pattern/src/patterns/Lines.tsx
index 51c82f614..a3029bd5c 100644
--- a/packages/vx-pattern/src/patterns/Lines.tsx
+++ b/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,11 @@ 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:
+      const half = height / 2;
+      return `M 0,0 l ${height},${height}
+        M ${-height / 4},${(3 / 4) * height} l ${half},${half}
+        M ${(3 / 4) * height},${-height / 4} l ${half},${half}`;
     default:
       return `M ${height / 2}, 0 l 0, ${height}`;
   }
diff --git a/packages/vx-pattern/test/PatternLines.test.tsx b/packages/vx-pattern/test/PatternLines.test.tsx
index 02039f179..219c90645 100644
--- a/packages/vx-pattern/test/PatternLines.test.tsx
+++ b/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);
+  });
 });

From 25a5021d611d41dcef4a569d35ace0a972e43475 Mon Sep 17 00:00:00 2001
From: dennisja <dennisjjagwe@gmail.com>
Date: Thu, 11 Jun 2020 08:51:03 +0200
Subject: [PATCH 2/3] remove case declaration to fix build

---
 packages/vx-pattern/src/patterns/Lines.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/vx-pattern/src/patterns/Lines.tsx b/packages/vx-pattern/src/patterns/Lines.tsx
index a3029bd5c..0b9103a5d 100644
--- a/packages/vx-pattern/src/patterns/Lines.tsx
+++ b/packages/vx-pattern/src/patterns/Lines.tsx
@@ -20,10 +20,9 @@ export function pathForOrientation({
         2},${-height / 2}
              M ${(3 / 4) * height},${(5 / 4) * height} l ${height / 2},${-height / 2}`;
     case PatternOrientation.diagonalRightToLeft:
-      const half = height / 2;
       return `M 0,0 l ${height},${height}
-        M ${-height / 4},${(3 / 4) * height} l ${half},${half}
-        M ${(3 / 4) * height},${-height / 4} l ${half},${half}`;
+        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}`;
   }

From bd3ab7b89d2086f77184fb48e2abea284888f963 Mon Sep 17 00:00:00 2001
From: dennisja <dennisjjagwe@gmail.com>
Date: Wed, 17 Jun 2020 08:51:56 +0200
Subject: [PATCH 3/3] add diagonalRightToLeft to pattern example

---
 .../vx-demo/src/sandboxes/vx-pattern/Example.tsx     | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/vx-demo/src/sandboxes/vx-pattern/Example.tsx b/packages/vx-demo/src/sandboxes/vx-pattern/Example.tsx
index 4fec3f072..fa55d2e79 100644
--- a/packages/vx-demo/src/sandboxes/vx-pattern/Example.tsx
+++ b/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);