refactor: RuleCard component for items rendered in rules page (act-rules#68)

Author: jeeyyy

src/components/layout.scss

@@ -128,89 +128,7 @@ section.layout-container {
           }
         }
 
-        // Styles for rules page
-        &.page-rules{
-          .rules-listing {
-            counter-reset: rule-item; 
-            
-            >article {
-              border: 1px solid $sep;
-              padding: 0.5rem;
-              display: flex;
-              flex-direction: column;
-              position: relative;
-              background-color: $bg-primary;
-
-              &:nth-child(2n) {
-                background-color: lighten($sep, 2%);
-                &::before{
-                  background-color: lighten($sep, 2%);
-                }
-              }
-
-              // Index/ counter
-              &:before {
-                counter-increment: rule-item;
-                content: counter(rule-item); 
-                position: absolute;
-                width: 30px;
-                left: -31px;
-                top: -1px;
-                border: 1px solid $sep;
-                border-right: none;
-                font-weight: bold;
-                text-align: center;
-                padding: 11px 0;
-                background-color: $bg-primary;
-              }
-
-              div.meta {
-                h3.heading,
-                span.heading {
-                  padding: 0.25rem 0.5rem;
-                  background-color: $sep;
-                  border: 1px solid $transparent;
-                  text-transform: capitalize;
-                  display: inline-block;
-                  font-weight: bold;
-                  margin-top: 1em;
-                  font-size: 90%;
-                  color: inherit;
-                  cursor: auto;
-                  &:hover {
-                    text-decoration: none;
-                  }
-                }
-                a.sc-item {
-                  cursor: pointer;
-                  text-decoration: none;
-                  text-transform: capitalize;
-                  &:hover {
-                    color: $accent;
-                  }
-                }
-              }
-
-              >section {
-                flex: 1;
-                >a{
-                  text-decoration: none;
-                }
-                h2{
-                  margin: 0;
-                  margin-bottom: 0.5rem;
-                  >p{
-                    margin: 0;
-                  }
-                }
-                &:last-child{
-                  border-bottom: none;
-                }
-              }
-            }
-          }
-        }
-
+      
         // Styles for glossary page
         &.page-glossary{
           .listing {
@@ -402,13 +320,6 @@ section.layout-container {
 	section.layout-container {
 		> main {
 			.page-container {
-				&.page-rules {
-					.rules-listing {
-						> article {
-							flex-direction: column;
-						}
-					}
-				}
 				&.page-glossary {
 					.listing {
 						> article {

src/components/rule-card.js

@@ -0,0 +1,52 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import showdown from 'showdown'
+
+import AccessibilityRequirements from './accessibility_requirements'
+import CountImplementations from './count-implementations'
+
+import { getInputRulesForRule } from '../utils/render-fragments'
+
+import './rule-card.scss'
+
+const RuleCard = ({ id = '', name = '', description = '', accessibilityRequirements, inputRules, allRules }) => {
+	const converter = new showdown.Converter()
+
+	return (
+		<article className="ruleCard">
+			<section>
+				{/* rule id */}
+				<a href={id}>
+					<h2
+						dangerouslySetInnerHTML={{
+							__html: converter.makeHtml(name),
+						}}
+					/>
+				</a>
+				{/* rule sc's */}
+				<AccessibilityRequirements accessibility_requirements={accessibilityRequirements} type="text" />
+				{/* input rules */}
+				{getInputRulesForRule(inputRules, allRules.edges, true)}
+				{/* implementation count */}
+				<CountImplementations ruleId={id} />
+				{/* rule description */}
+				<div
+					dangerouslySetInnerHTML={{
+						__html: converter.makeHtml(description),
+					}}
+				/>
+			</section>
+		</article>
+	)
+}
+
+RuleCard.propTypes = {
+	id: PropTypes.string.isRequired,
+	name: PropTypes.string.isRequired,
+	description: PropTypes.array.isRequired,
+	accessibilityRequirements: PropTypes.object,
+	inputRules: PropTypes.array,
+	allRules: PropTypes.array,
+}
+
+export default RuleCard

src/components/rule-card.scss

@@ -0,0 +1,59 @@
+@import '../styles/variables.scss';
+@import '../styles/mixins.scss';
+
+article.ruleCard {
+  padding: 1rem;
+  margin-bottom: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  background-color: rgba($sep, 0.5);
+  box-shadow: 0px 0px 12px rgba($black, 0.2);
+
+  &:hover {
+    outline: 2px solid $accent;
+  }
+  
+  div.meta {
+    h3.heading,
+    span.heading {
+      padding: 0.25rem 0.5rem;
+      background-color: $sep;
+      border: 1px solid $transparent;
+      text-transform: capitalize;
+      display: inline-block;
+      font-weight: bold;
+      margin-top: 1em;
+      font-size: 90%;
+      color: inherit;
+      cursor: auto;
+      &:hover {
+        text-decoration: none;
+      }
+    }
+    a.sc-item {
+      cursor: pointer;
+      text-decoration: none;
+      text-transform: capitalize;
+      &:hover {
+        color: $accent;
+      }
+    }
+  }
+
+  > section {
+    flex: 1;
+    > a {
+      text-decoration: none;
+    }
+    h2 {
+      margin: 0;
+      margin-bottom: 0.5rem;
+      > p {
+        margin: 0;
+      }
+    }
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+}

src/pages/rules.js

@@ -2,53 +2,33 @@ import React from 'react'
 import { graphql } from 'gatsby'
 import Layout from '../components/layout'
 import SEO from '../components/seo'
-import showdown from 'showdown'
-import { getInputRulesForRule } from './../utils/render-fragments'
-import AccessibilityRequirements from '../components/accessibility_requirements'
-import CountImplementations from '../components/count-implementations'
+import RuleCard from '../components/rule-card'
+
+import './rules.scss'
 
 export default ({ location, data }) => {
 	const { rules, allRules } = data
-	const converter = new showdown.Converter()
 
 	return (
 		<Layout location={location}>
 			<SEO title="Rules" />
-			<section className="page-container page-rules">
+			<section className="page-rules">
 				{/* Heading */}
 				<h1>Rules</h1>
 				{/* Table of rules */}
-				<section className="rules-listing">
+				<section>
 					{rules.edges.map(({ node }) => {
-						const { frontmatter, id, fields } = node
-						const { name, description, input_rules } = frontmatter
-						const { slug, fastmatterAttributes } = fields
-						const { accessibility_requirements } = JSON.parse(fastmatterAttributes)
+						const { frontmatter, fields } = node
 						return (
-							<article key={id}>
-								<section>
-									{/* rule id */}
-									<a href={slug.replace('rules/', '')}>
-										<h2
-											dangerouslySetInnerHTML={{
-												__html: converter.makeHtml(name),
-											}}
-										/>
-									</a>
-									{/* rule sc's */}
-									<AccessibilityRequirements accessibility_requirements={accessibility_requirements} type="text" />
-									{/* input rules */}
-									{getInputRulesForRule(input_rules, allRules.edges, true)}
-									{/* implementation count */}
-									<CountImplementations ruleId={slug.replace('rules/', '')} />
-									{/* rule description */}
-									<div
-										dangerouslySetInnerHTML={{
-											__html: converter.makeHtml(description),
-										}}
-									/>
-								</section>
-							</article>
+							<RuleCard
+								key={frontmatter.id}
+								id={frontmatter.id}
+								name={frontmatter.name}
+								description={frontmatter.description}
+								accessibilityRequirements={JSON.parse(fields.fastmatterAttributes).accessibility_requirements}
+								inputRules={frontmatter.input_rules}
+								allRules={allRules}
+							/>
 						)
 					})}
 				</section>
@@ -69,6 +49,7 @@ export const query = graphql`
 					fileAbsolutePath
 					id
 					frontmatter {
+						id
 						name
 						description
 						rule_type

src/pages/rules.scss

@@ -0,0 +1,6 @@
+@import '../styles//variables.scss';
+@import '../styles/mixins.scss';
+
+.page-rules {
+  @include page-container-default-styles;
+}

src/styles/mixins.scss

@@ -67,6 +67,7 @@
 @mixin page-container-default-styles() {
 	margin: 3rem 0;
 	padding: 0 4rem;
+	
 	h1 {
 		border-bottom: 1px solid $sep;
 		padding: 2rem 0;
@@ -76,6 +77,7 @@
 			margin: 0;
 		}
 	}
+
 	h2,
 	h3,
 	h4,
@@ -85,4 +87,8 @@
 			text-decoration: underline;
 		}
 	}
+
+	h2 {
+		margin-top: 3rem;
+	}
 }