Merge pull request #1237 from lpsinger/modularize-css

Factor out component-specific CSS into modules

.gitignore

@@ -14,7 +14,8 @@ sam.json
 sam.yaml
 
 # Generated by sass
-/app/css
+/app/**/*.css
+/app/**/*.css.map
 
 .env
 .eslintcache

app/components/NoticeTypeCheckboxes.tsx

@@ -7,8 +7,8 @@
  */
 import { useState } from 'react'
 
-import { NestedCheckboxes } from './NestedCheckboxes'
 import type { NoticeFormat } from './NoticeFormat'
+import { NestedCheckboxes } from './nested-checkboxes/NestedCheckboxes'
 import { triggerRate } from '~/lib/prometheus'
 
 function humanizedCount(count: number, singular: string, plural?: string) {

app/components/NestedCheckboxes.tsx → app/components/nested-checkboxes/NestedCheckboxes.tsx

@@ -9,6 +9,8 @@ import { Link } from '@remix-run/react'
 import { Checkbox } from '@trussworks/react-uswds'
 import { useEffect, useRef, useState } from 'react'
 
+import styles from './nested-checkboxes.module.css'
+
 type CheckboxArgs = Parameters<typeof Checkbox>
 type CheckboxProps = CheckboxArgs[0]
 interface NestedCheckboxProps extends CheckboxProps {
@@ -70,7 +72,7 @@ function NestedCheckboxNode({
       aria-expanded={expanded}
       aria-selected={false}
       onClick={() => setExpanded(!expanded)}
-      className="nested-checkboxes__node"
+      className={styles.node}
     >
       <Checkbox
         className="display-inline-block"
@@ -107,7 +109,7 @@ function NestedCheckboxNode({
           })
         }}
       />
-      <ul hidden={!expanded} className="nested-checkboxes__leaf">
+      <ul hidden={!expanded} className={styles.leaf}>
         {nodes.map((node, index) => (
           <li role="treeitem" key={index} aria-selected={false}>
             <Checkbox

app/components/nested-checkboxes/nested-checkboxes.module.scss

@@ -0,0 +1,24 @@
+.node {
+  & {
+    list-style: url('~/../node_modules/nasawds/src/img/usa-icons/chevron_right.svg');
+  }
+
+  &[aria-expanded='true'] {
+    list-style: url('~/../node_modules/nasawds/src/img/usa-icons/expand_more.svg');
+  }
+
+  & [data-testid='checkbox'] {
+    position: relative;
+    top: -0.25rem;
+    display: inline-block;
+  }
+
+  & label {
+    margin-top: 0;
+    margin-bottom: 0.5rem;
+  }
+}
+
+.leaf {
+  list-style: none;
+}

app/components/Tabs.tsx → app/components/tabs/Tabs.tsx

@@ -7,6 +7,8 @@
  */
 import { useState } from 'react'
 
+import styles from './tabs.module.css'
+
 export interface TabProps {
   label: React.ReactNode
   children: React.ReactNode
@@ -24,7 +26,7 @@ export function Tabs({
   const [selectedTab, setSelectedTab] = useState(0)
 
   return (
-    <div className="tabs-component">
+    <div className={styles.tabs}>
       <div role="tablist">
         {children.map((tab, index) => (
           <button

app/components/tabs/tabs.module.scss

@@ -0,0 +1,46 @@
+.tabs {
+  & [role='tablist'] {
+    & {
+      display: flex;
+      flex-wrap: wrap;
+      border-bottom: 1px solid #dee2e6;
+      position: relative;
+    }
+
+    & button {
+      & {
+        border-width: 1px;
+        border-style: solid;
+        border-color: transparent;
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+        display: block;
+        padding: 0.5rem 1rem;
+        cursor: pointer;
+        margin: 0;
+        outline: none;
+        background-color: #fff;
+        transition: border 0.2s ease-in-out 0s;
+      }
+
+      &.active,
+      &:focus,
+      &:hover {
+        border-width: 1px;
+        border-color: #e9ecef #e9ecef #b41c1c;
+      }
+
+      &.active {
+        color: #495057;
+        background-color: #f8f8f8;
+      }
+    }
+  }
+
+  & [role='tabpanel'] {
+    text-align: left;
+    padding: 1rem;
+    background-color: #f8f8f8;
+    box-shadow: 1px 1px 2px rgb(204 204 204 / 75%);
+  }
+}

app/root.tsx

@@ -18,6 +18,7 @@
  *
  *
  */
+import { cssBundleHref } from '@remix-run/css-bundle'
 import type {
   DataFunctionArgs,
   LinksFunction,
@@ -73,7 +74,7 @@ import favicon_72 from '~/../node_modules/nasawds/src/img/favicons/favicon-72.pn
 import favicon_114 from '~/../node_modules/nasawds/src/img/favicons/favicon-114.png'
 import favicon_144 from '~/../node_modules/nasawds/src/img/favicons/favicon-144.png'
 import favicon_192 from '~/../node_modules/nasawds/src/img/favicons/favicon-192.png'
-import themeStyle from '~/css/custom.css'
+import themeStyle from '~/theme.css'
 
 const favicons = {
   16: favicon_16,
@@ -117,6 +118,7 @@ export const links: LinksFunction = () => [
     rel: 'stylesheet',
     href: highlightStyle,
   },
+  ...(cssBundleHref ? [{ rel: 'stylesheet', href: cssBundleHref }] : []),
   ...Object.entries(favicons).map(([size, href]) => ({
     rel: 'icon',
     href: href,

app/routes/docs_.schema.$version.$/route.tsx

@@ -13,7 +13,7 @@ import {
 } from './components'
 import { Highlight } from '~/components/Highlight'
 import { SideNavSub } from '~/components/SideNav'
-import { Tab, Tabs } from '~/components/Tabs'
+import { Tab, Tabs } from '~/components/tabs/Tabs'
 import { publicStaticShortTermCacheControlHeaders } from '~/lib/headers.server'
 import type { ExampleFiles, GitContentDataResponse } from '~/lib/schema-data'
 import {

app/routes/quickstart.code.tsx

@@ -11,7 +11,7 @@ import { Button, ButtonGroup, FormGroup } from '@trussworks/react-uswds'
 
 import { ClientCredentialVendingMachine } from './user.credentials/client_credentials.server'
 import { ClientSampleCode } from '~/components/ClientSampleCode'
-import { Tab, Tabs } from '~/components/Tabs'
+import { Tab, Tabs } from '~/components/tabs/Tabs'
 import { formatAndNoticeTypeToTopic } from '~/lib/utils'
 
 export const handle = {