feat: replat 6101 edition slices keylines (newsuk#1913)

lili2311 · May 1, 2019 · 4919482 · 4919482
1 parent 6f5ed93
commit 4919482
Show file tree

Hide file tree

Showing 17 changed files with 107 additions and 18 deletions.
diff --git a/package.json b/package.json
@@ -50,7 +50,7 @@
     "prefmt": "prettier --write '**/*.{js,json}'",
     "fmt": "lerna run fmt",
     "cinstall": "./lib/custom_install.sh",
-    "clean": "rm -rf ./**/node_modules/",
+    "clean": "git clean -xdf",
     "bundle": "lerna run bundle",
     "build:local": "yarn install && yarn bundle && yarn prepublishOnly",
     "postinstall": "yarn run fetch-fonts && lerna run postinstall && lerna run transpile",

diff --git a/packages/edition-slices/__tests__/android/__snapshots__/slices-with-style.test.js.snap b/packages/edition-slices/__tests__/android/__snapshots__/slices-with-style.test.js.snap
@@ -443,6 +443,14 @@ exports[`2. leaders 2`] = `
 exports[`3. lead one and one 1`] = `
 <View>
   <TileA />
+  <View
+    style={
+      Object {
+        "backgroundColor": "#DBDBDB",
+        "height": 1,
+      }
+    }
+  />
   <TileB />
 </View>
 `;

diff --git a/packages/edition-slices/__tests__/android/__snapshots__/slices.test.js.snap b/packages/edition-slices/__tests__/android/__snapshots__/slices.test.js.snap
@@ -192,6 +192,7 @@ exports[`3. lead one and one 1`] = `
   <TileA
     tileName="lead"
   />
+  <View />
   <TileB
     tileName="support"
   />

diff --git a/packages/edition-slices/__tests__/ios/__snapshots__/slices-with-style.test.js.snap b/packages/edition-slices/__tests__/ios/__snapshots__/slices-with-style.test.js.snap
@@ -443,6 +443,14 @@ exports[`2. leaders 2`] = `
 exports[`3. lead one and one 1`] = `
 <View>
   <TileA />
+  <View
+    style={
+      Object {
+        "backgroundColor": "#DBDBDB",
+        "height": 1,
+      }
+    }
+  />
   <TileB />
 </View>
 `;

diff --git a/packages/edition-slices/__tests__/ios/__snapshots__/slices.test.js.snap b/packages/edition-slices/__tests__/ios/__snapshots__/slices.test.js.snap
@@ -192,6 +192,7 @@ exports[`3. lead one and one 1`] = `
   <TileA
     tileName="lead"
   />
+  <View />
   <TileB
     tileName="support"
   />

diff --git a/packages/section/__tests__/android/__snapshots__/section.test.js.snap b/packages/section/__tests__/android/__snapshots__/section.test.js.snap
@@ -4,7 +4,7 @@ exports[`Sunday Times magazine section 1`] = `
 <RCTScrollView
   style={
     Object {
-      "paddingTop": 20,
+      "paddingTop": 10,
     }
   }
 >
@@ -87,7 +87,7 @@ exports[`Times magazine section 1`] = `
 <RCTScrollView
   style={
     Object {
-      "paddingTop": 20,
+      "paddingTop": 10,
     }
   }
 >
@@ -247,7 +247,7 @@ exports[`section page 1`] = `
 <RCTScrollView
   style={
     Object {
-      "paddingTop": 20,
+      "paddingTop": 10,
     }
   }
 >
@@ -260,6 +260,7 @@ exports[`section page 1`] = `
             Object {
               "backgroundColor": "#DBDBDB",
               "height": 1,
+              "marginHorizontal": 20,
             }
           }
         />
@@ -273,6 +274,7 @@ exports[`section page 1`] = `
             Object {
               "backgroundColor": "#DBDBDB",
               "height": 1,
+              "marginHorizontal": 20,
             }
           }
         />
@@ -286,6 +288,7 @@ exports[`section page 1`] = `
             Object {
               "backgroundColor": "#DBDBDB",
               "height": 1,
+              "marginHorizontal": 20,
             }
           }
         />
@@ -299,6 +302,7 @@ exports[`section page 1`] = `
             Object {
               "backgroundColor": "#DBDBDB",
               "height": 1,
+              "marginHorizontal": 20,
             }
           }
         />
@@ -312,6 +316,7 @@ exports[`section page 1`] = `
             Object {
               "backgroundColor": "#DBDBDB",
               "height": 1,
+              "marginHorizontal": 20,
             }
           }
         />

diff --git a/packages/section/__tests__/ios/__snapshots__/section.test.js.snap b/packages/section/__tests__/ios/__snapshots__/section.test.js.snap
@@ -4,7 +4,7 @@ exports[`Sunday Times magazine section 1`] = `
 <RCTScrollView
   style={
     Object {
-      "paddingTop": 20,
+      "paddingTop": 10,
     }
   }
 >
@@ -87,7 +87,7 @@ exports[`Times magazine section 1`] = `
 <RCTScrollView
   style={
     Object {
-      "paddingTop": 20,
+      "paddingTop": 10,
     }
   }
 >
@@ -247,7 +247,7 @@ exports[`section page 1`] = `
 <RCTScrollView
   style={
     Object {
-      "paddingTop": 20,
+      "paddingTop": 10,
     }
   }
 >
@@ -260,6 +260,7 @@ exports[`section page 1`] = `
             Object {
               "backgroundColor": "#DBDBDB",
               "height": 1,
+              "marginHorizontal": 20,
             }
           }
         />
@@ -273,6 +274,7 @@ exports[`section page 1`] = `
             Object {
               "backgroundColor": "#DBDBDB",
               "height": 1,
+              "marginHorizontal": 20,
             }
           }
         />
@@ -286,6 +288,7 @@ exports[`section page 1`] = `
             Object {
               "backgroundColor": "#DBDBDB",
               "height": 1,
+              "marginHorizontal": 20,
             }
           }
         />
@@ -299,6 +302,7 @@ exports[`section page 1`] = `
             Object {
               "backgroundColor": "#DBDBDB",
               "height": 1,
+              "marginHorizontal": 20,
             }
           }
         />
@@ -312,6 +316,7 @@ exports[`section page 1`] = `
             Object {
               "backgroundColor": "#DBDBDB",
               "height": 1,
+              "marginHorizontal": 20,
             }
           }
         />

diff --git a/packages/section/src/section.js b/packages/section/src/section.js
@@ -15,6 +15,7 @@ class Section extends Component {
   constructor(props) {
     super(props);
     this.renderItem = this.renderItem.bind(this);
+    this.renderItemSeperator = this.renderItemSeperator.bind(this);
     this.onViewableItemsChanged = this.onViewableItemsChanged.bind(this);
   }
 
@@ -43,6 +44,7 @@ class Section extends Component {
 
       return <MagazineCover cover={cover} />;
     }
+
     return null;
   }
 
@@ -64,6 +66,24 @@ class Section extends Component {
     );
   }
 
+  renderItemSeperator({ leadingItem }) {
+    const {
+      section: { name }
+    } = this.props;
+    const isPuzzle = name === "PuzzleSection";
+    const isIgnored = leadingItem.ignoreSeparator;
+
+    if (isPuzzle || isIgnored) {
+      return null;
+    }
+
+    return (
+      <View style={styles.listItemSeparatorContainer}>
+        <SectionItemSeparator />
+      </View>
+    );
+  }
+
   render() {
     const {
       section: { name, slices },
@@ -79,21 +99,28 @@ class Section extends Component {
 
     if (slices) receiveChildList(data);
 
+    const excludeSliceNames = ["LeadersSlice", "DailyUniversalRegister"];
+    const sliceNames = data.map(slice => slice.name);
+    const sliceIndices = excludeSliceNames.reduce((acc, sliceName) => {
+      const index = sliceNames.indexOf(sliceName);
+      if (index > 0) {
+        return [...acc, index - 1, index];
+      }
+
+      return acc;
+    }, []);
+    sliceIndices.forEach(index => {
+      data[index].ignoreSeparator = true;
+    });
+
     return (
       <Responsive>
         <ResponsiveContext.Consumer>
           {({ isTablet }) => (
             <FlatList
               data={data}
               initialNumToRender={5}
-              ItemSeparatorComponent={
-                !isPuzzle &&
-                (() => (
-                  <View style={styles.listItemSeparatorContainer}>
-                    <SectionItemSeparator />
-                  </View>
-                ))
-              }
+              ItemSeparatorComponent={this.renderItemSeperator}
               keyExtractor={item => item.elementId}
               ListHeaderComponent={this.getHeaderComponent(
                 isPuzzle,

diff --git a/packages/section/src/styles/index.js b/packages/section/src/styles/index.js
@@ -8,7 +8,8 @@ const styles = StyleSheet.create({
   },
   listItemSeparator: {
     backgroundColor: colours.functional.keyline,
-    height: 1
+    height: 1,
+    marginHorizontal: spacing(4)
   },
   puzzleBarArrow: {
     paddingLeft: spacing(2),
@@ -27,7 +28,7 @@ const styles = StyleSheet.create({
     fontSize: 20
   },
   tabletSpacing: {
-    paddingTop: spacing(4)
+    paddingTop: spacing(2)
   }
 });
 

diff --git a/packages/slice-layout/__tests__/android/__snapshots__/l1and1-with-style.android.test.js.snap b/packages/slice-layout/__tests__/android/__snapshots__/l1and1-with-style.android.test.js.snap
@@ -5,6 +5,14 @@ exports[`1. lead one and one - small 1`] = `
   <Text>
     lead
   </Text>
+  <View
+    style={
+      Object {
+        "backgroundColor": "#DBDBDB",
+        "height": 1,
+      }
+    }
+  />
   <Text>
     support
   </Text>

diff --git a/packages/slice-layout/__tests__/android/__snapshots__/l1and1.android.test.js.snap b/packages/slice-layout/__tests__/android/__snapshots__/l1and1.android.test.js.snap
@@ -5,6 +5,7 @@ exports[`1. lead one and one - small 1`] = `
   <Text>
     lead
   </Text>
+  <View />
   <Text>
     support
   </Text>

diff --git a/packages/slice-layout/__tests__/ios/__snapshots__/l1and1-with-style.ios.test.js.snap b/packages/slice-layout/__tests__/ios/__snapshots__/l1and1-with-style.ios.test.js.snap
@@ -5,6 +5,14 @@ exports[`1. lead one and one - small 1`] = `
   <Text>
     lead
   </Text>
+  <View
+    style={
+      Object {
+        "backgroundColor": "#DBDBDB",
+        "height": 1,
+      }
+    }
+  />
   <Text>
     support
   </Text>

diff --git a/packages/slice-layout/__tests__/ios/__snapshots__/l1and1.ios.test.js.snap b/packages/slice-layout/__tests__/ios/__snapshots__/l1and1.ios.test.js.snap
@@ -5,6 +5,7 @@ exports[`1. lead one and one - small 1`] = `
   <Text>
     lead
   </Text>
+  <View />
   <Text>
     support
   </Text>

diff --git a/packages/slice-layout/__tests__/web/__snapshots__/l1and1-with-style.web.test.js.snap b/packages/slice-layout/__tests__/web/__snapshots__/l1and1-with-style.web.test.js.snap
@@ -19,6 +19,15 @@ exports[`1. lead one and one - small 1`] = `
   >
     lead
   </div>
+  <div
+    className="S1"
+    style={
+      Object {
+        "backgroundColor": "rgba(219,219,219,1.00)",
+        "height": "1px",
+      }
+    }
+  />
   <div
     className="S1"
   >

diff --git a/packages/slice-layout/__tests__/web/__snapshots__/l1and1.web.test.js.snap b/packages/slice-layout/__tests__/web/__snapshots__/l1and1.web.test.js.snap
@@ -5,6 +5,7 @@ exports[`1. lead one and one - small 1`] = `
   <div>
     lead
   </div>
+  <div />
   <div>
     support
   </div>

diff --git a/packages/slice-layout/src/templates/leadoneandone/index.js b/packages/slice-layout/src/templates/leadoneandone/index.js
@@ -10,6 +10,7 @@ const leadOneAndOneSlice = ({ breakpoint, lead, support }) => {
     return (
       <View>
         {lead}
+        <View style={styles.keyline} />
         {support}
       </View>
     );

diff --git a/packages/slice-layout/src/templates/leadoneandone/styles.js b/packages/slice-layout/src/templates/leadoneandone/styles.js
@@ -1,4 +1,4 @@
-import { spacing } from "@times-components/styleguide";
+import { spacing, colours } from "@times-components/styleguide";
 
 const styles = {
   container: {
@@ -9,6 +9,10 @@ const styles = {
   leadItem: {
     width: "83.33%"
   },
+  keyline: {
+    backgroundColor: colours.functional.keyline,
+    height: 1
+  },
   supportItem: {
     width: "16.67%"
   }