Archived rules checkbox and text (#1198)

* fetch all rules - archived and unarchived

* Include archived checkbox working

* Added "archived" message next to rules title and some css

* checkbox color to red

---------

Co-authored-by: Jack Pettit [SSW] <57518417+JackDevAU@users.noreply.github.com>

src/style.css

@@ -827,6 +827,26 @@ blockquote p:after {
   margin-bottom: 1rem;
 }
 
+.rule-category-checkbox {
+  display: flex;
+  justify-content: center;
+}
+
+.rule-category-checkbox-label {
+  display: flex;
+  align-items: center;
+}
+
+.rule-category-archived-badge {
+  display: inline-block;
+  padding: 0.1rem 0.4rem;
+  background-color: #cc4141;
+  color: #fff;
+  font-size: 0.8rem;
+  border-radius: 4px;
+  vertical-align: middle;
+}
+
 /* Single Rule
 -------------------------------------------------- */
 

src/templates/category.js

@@ -35,6 +35,7 @@ export default function Category({ data }) {
 
   const [selectedOption, setSelectedOption] = useState('all');
   const [showViewButton, setShowViewButton] = useState(false);
+  const [includeArchived, setIncludeArchived] = useState(false);
 
   useEffect(() => {
     setShowViewButton(true);
@@ -44,13 +45,17 @@ export default function Category({ data }) {
     setSelectedOption(e.target.value);
   };
 
+  const handleIncludeArchivedChange = () => {
+    setIncludeArchived(!includeArchived);
+  };
+
   const components = {
     greyBox: GreyBox,
   };
 
   var rules = data.rule.nodes
     .filter((r) => {
-      return !r.frontmatter.archivedreason;
+      return includeArchived || !r.frontmatter.archivedreason;
     })
     .filter((r) => {
       return category.frontmatter.index.includes(r.frontmatter.uri);
@@ -150,6 +155,17 @@ export default function Category({ data }) {
                   labelText="Gimme everything!"
                   icon={faBook}
                 />
+                <div className="rule-category-checkbox">
+                  <label className="rule-category-checkbox-label">
+                    <input
+                      type="checkbox"
+                      checked={includeArchived}
+                      onChange={handleIncludeArchivedChange}
+                      className="h-5 w-5 accent-ssw-red"
+                    />
+                    <span className="ml-2">Include Archived</span>
+                  </label>
+                </div>
               </div>
             )}
 
@@ -172,6 +188,11 @@ export default function Category({ data }) {
                                 state={{ category: category.parent.name }}
                               >
                                 {rule.frontmatter.title}
+                                {rule.frontmatter.archivedreason && (
+                                  <span className="rule-category-archived-badge ml-2">
+                                    Archived
+                                  </span>
+                                )}
                               </Link>
                             </h2>
                             <div className="rule-buttons category flex flex-col sm:flex-row">