go back to composable components style

oxidecomputer · Aug 18, 2023 · 98b1957 · 98b1957
1 parent 8c8fbbb
commit 98b1957
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 45 deletions.
diff --git a/app/components/MswBanner.tsx b/app/components/MswBanner.tsx
@@ -55,22 +55,17 @@ export function MswBanner() {
  development and testing and is not fully representative.
  </p>
  </Modal.Section>
- <Modal.Docs
- links={[
- {
- to: 'https://github.com/oxidecomputer/console',
- label: 'Web console',
- },
- {
- to: 'https://github.com/oxidecomputer/oxide.ts',
- label: 'TypeScript API client generator',
- },
- {
- to: 'https://github.com/oxidecomputer/omicron',
- label: 'Control plane and API',
- },
- ]}
- />
+ <Modal.Links label="Relevant repositories">
+ <Modal.Link to="https://github.com/oxidecomputer/console" label="Web console" />
+ <Modal.Link
+ to="https://github.com/oxidecomputer/oxide.ts"
+ label="TypeScript API client generator"
+ />
+ <Modal.Link
+ to="https://github.com/oxidecomputer/omicron"
+ label="Control plane and API"
+ />
+ </Modal.Links>
  <footer className="flex items-center justify-end border-t px-3 py-3 border-secondary">
  <Button size="sm" onClick={closeModal}>
  Close

diff --git a/libs/ui/lib/modal/Modal.stories.tsx b/libs/ui/lib/modal/Modal.stories.tsx
@@ -46,12 +46,10 @@ export function Default() {
  <TextInput as="textarea" rows={5} placeholder="Enter your SSH key" />
  </div>
  </Modal.Section>
- <Modal.Docs
- links={[
- { to: '#', label: 'Subnetworks' },
- { to: '#', label: 'External IPs' },
- ]}
- />
+ <Modal.Links label="Relevant docs">
+ <Modal.Link to="#" label="Subnetworks" />
+ <Modal.Link to="#" label="External IPs" />
+ </Modal.Links>
  </Modal.Body>
 
  <Modal.Footer

diff --git a/libs/ui/lib/modal/Modal.tsx b/libs/ui/lib/modal/Modal.tsx
@@ -112,35 +112,30 @@ Modal.Body = classed.div`py-2 overflow-y-auto`
 
 Modal.Section = classed.div`p-4 space-y-4 border-b border-secondary text-secondary last-of-type:border-none text-sans-md`
 
-type Link = {
- to: string
- label: string
-}
-
-Modal.Docs = ({ links }: { links?: Link[] }) => (
+Modal.Links = ({ label, children }: { label: string; children: React.ReactNode }) => (
  <Modal.Section>
  <div>
- <h3 className="mb-2 text-sans-semi-md text-default">Relevant docs</h3>
- <ul className="space-y-1 text-sans-md text-tertiary">
- {links?.map((link) => (
- <li key={link.to}>
- <a
- href={link.to}
- key={link.to}
- target="_blank"
- rel="noopener noreferrer"
- className="group flex items-center space-x-2"
- >
- <OpenLink12Icon className="text-accent group-hover:text-accent" />
- <span className="group-hover:text-default">{link.label}</span>
- </a>
- </li>
- ))}
- </ul>
+ <h3 className="mb-2 text-sans-semi-md text-default">{label}</h3>
+ <ul className="space-y-1 text-sans-md text-tertiary">{children}</ul>
  </div>
  </Modal.Section>
 )
 
+Modal.Link = ({ to, label }: { to: string; label: string }) => (
+ <li>
+ <a
+ href={to}
+ key={to}
+ target="_blank"
+ rel="noopener noreferrer"
+ className="group flex items-center space-x-2"
+ >
+ <OpenLink12Icon className="text-accent group-hover:text-accent" />
+ <span className="group-hover:text-default">{label}</span>
+ </a>
+ </li>
+)
+
 Modal.Footer = ({
  children,
  onDismiss,