feat(storybook): stub out information page, also fix icons (#159)

* feat(storybook): stub out information page, also fix icons

* fix(icons): silence eslint complaint for now

.storybook/main.js

@@ -22,6 +22,11 @@ module.exports = {
       directory: '../stories/Agency Page',
       titlePrefix: 'Agency Page/',
       files: storiesGlob
+    },
+    {
+      directory: '../stories/Pages',
+      titlePrefix: 'Pages/',
+      files: storiesGlob
     }
   ],
   core: {

elements/src/sfgov-icon.js

@@ -4,7 +4,8 @@ const icons = data.components
 
 const templates = {}
 
-for (const [id, { svg }] of Object.entries(icons)) {
+// eslint-disable-next-line no-unused-vars
+for (const [_, { id, svg }] of Object.entries(icons)) {
   const template = createElementTemplate(svg)
   templates[id] = template
 }

react/src/components/SVGIcon.tsx

@@ -31,6 +31,9 @@ type Size = { width: number, height: number }
  *   establishes a proportional height according to browser intrinsic aspect ratio rules.
  */
 export function createStyledIcon (IconComponent: ComponentType<SVGProps>, size?: Size) {
+  if (!IconComponent) {
+    throw new Error(`expected an IconComponent but got ${typeof IconComponent}`)
+  }
   const Icon = withFixedProps(SVGIcon, { as: IconComponent })
   return Object.assign(Icon, {
     displayName: IconComponent.displayName || IconComponent.name,

react/src/icons.tsx

@@ -1,34 +1,34 @@
 import * as icons from './icons/index.js'
-import { createStyledIcon as wrap } from './components'
+// import { createStyledIcon as wrap } from './components'
 
-export const IconAlert = wrap(icons.IconAlert)
-export const IconArrowDown = wrap(icons.IconArrowDown)
-export const IconArrowLeft = wrap(icons.IconArrowLeft)
-export const IconArrowRight = wrap(icons.IconArrowRight)
-export const IconArrowUp = wrap(icons.IconArrowUp)
-export const IconBuilding = wrap(icons.IconBuilding)
-export const IconCheck = wrap(icons.IconCheck)
-export const IconChevronDown = wrap(icons.IconChevronDown)
-export const IconChevronLeft = wrap(icons.IconChevronLeft)
-export const IconChevronRight = wrap(icons.IconChevronRight)
-export const IconChevronUp = wrap(icons.IconChevronUp)
-export const IconClock = wrap(icons.IconClock)
-export const IconClose = wrap(icons.IconClose)
-export const IconDocument = wrap(icons.IconDocument)
-export const IconGlobe = wrap(icons.IconGlobe)
-export const IconInfo = wrap(icons.IconInfo)
-export const IconLocation = wrap(icons.IconLocation)
-export const IconMail = wrap(icons.IconMail)
-export const IconPencil = wrap(icons.IconPencil)
-export const IconPhone = wrap(icons.IconPhone)
-export const IconSearch = wrap(icons.IconSearch)
-export const IconCalendar = wrap(icons.IconCalendar)
-export const IconAccessibility = wrap(icons.IconAccessibility)
-export const IconArchive = wrap(icons.IconArchive)
-export const IconCaution = wrap(icons.IconCaution)
-export const IconWIP = wrap(icons.IconWIP)
-export const IconChart = wrap(icons.IconChart)
-export const IconQuestion = wrap(icons.IconQuestion)
-export const IconHamburgerButton = wrap(icons.IconHamburgerButton)
-export const IconMinus = wrap(icons.IconMinus)
-export const IconPlus = wrap(icons.IconPlus)
+export const IconAlert = icons.IconAlert
+export const IconArrowDown = icons.IconArrowDown
+export const IconArrowLeft = icons.IconArrowLeft
+export const IconArrowRight = icons.IconArrowRight
+export const IconArrowUp = icons.IconArrowUp
+export const IconBuilding = icons.IconBuilding
+export const IconCheck = icons.IconCheck
+export const IconChevronDown = icons.IconChevronDown
+export const IconChevronLeft = icons.IconChevronLeft
+export const IconChevronRight = icons.IconChevronRight
+export const IconChevronUp = icons.IconChevronUp
+export const IconClock = icons.IconClock
+export const IconClose = icons.IconClose
+export const IconDocument = icons.IconDocument
+export const IconGlobe = icons.IconGlobe
+export const IconInfo = icons.IconInfo
+export const IconLocation = icons.IconLocation
+export const IconMail = icons.IconMail
+export const IconPencil = icons.IconPencil
+export const IconPhone = icons.IconPhone
+export const IconSearch = icons.IconSearch
+export const IconCalendar = icons.IconCalendar
+export const IconAccessibility = icons.IconAccessibility
+export const IconArchive = icons.IconArchive
+export const IconCaution = icons.IconCaution
+export const IconWIP = icons.IconWIP
+export const IconChart = icons.IconChart
+export const IconQuestion = icons.IconQuestion
+export const IconHamburgerButton = icons.IconHamburgerButton
+export const IconMinus = icons.IconMinus
+export const IconPlus = icons.IconPlus

stories/Pages/InformationPage.stories.tsx

@@ -0,0 +1,73 @@
+import React from 'react'
+import {
+  Box,
+  DisplayLg,
+  Section,
+  TitleXl,
+  TitleXs
+} from '../../react'
+
+/** @type {import('@storybook/addons').StoryContext} */
+export default {
+  args: {
+    title: 'An information page',
+    subtitle: 'Here is more information on the information page',
+    contentSections: [
+      {
+        id: 1,
+        type: 'custom-section',
+        title: 'San Francisco',
+        children: <p>Hello!</p>
+      },
+      {
+        id: 2,
+        type: 'image',
+        src: 'https://sf.gov/sites/default/files/styles/836x484/public/2022-09/SF%20Prepared.png?itok=3JTfkksh'
+      },
+      {
+        id: 3,
+        type: 'custom-section',
+        title: 'San Francisco',
+        children: <p>Hello!</p>
+      },
+      {
+        id: 4,
+        type: 'custom-section',
+        title: 'San Francisco',
+        children: <p>Hello!</p>
+      }
+    ]
+  },
+  argTypes: {
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/Ssyjx39mPsBSbqy7FDWwBk/Wireframes---Corey?node-id=1%3A10765&t=aOZrbzRCBt9KKM0B-0'
+    }
+  }
+}
+
+export const InformationPage = ({ title, subtitle, contentSections }) => (
+  <Section>
+    <DisplayLg css={{ mb: 28 }}>{title}</DisplayLg>
+    <TitleXs>{subtitle}</TitleXs>
+    {contentSections.map(section => {
+      let content = (
+        <>
+          <TitleXl>{section.title}</TitleXl>
+          {section.children}
+        </>
+      )
+      if (section.type === 'image') {
+        content = <img style={{ objectFit: 'contain' }} src={section.src} />
+      }
+
+      return (
+        <Box key={section.id} css={{ my: 48 }}>
+          {content}
+        </Box>
+      )
+    })}
+  </Section>
+)

stories/components/Icons.stories.tsx

@@ -26,7 +26,7 @@ export default {
     symbol: symbolNames[0],
     color: undefined,
     bg: undefined,
-    width: undefined,
+    width: 20,
     height: undefined
   },
   argTypes: {
@@ -59,6 +59,13 @@ export default {
         type: 'number',
         min: 8
       }
+    },
+    height: {
+      name: 'Height',
+      control: {
+        type: 'number',
+        min: 8
+      }
     }
   },
   parameters: {

website/src/components/ColorSwatch.js

@@ -36,7 +36,7 @@ export default function ColorSwatch ({ value, label, addBorder, className, child
                 <div className='flex justify-between items-center font-mono'>
                   {value}
                   <div className={isHover ? 'inherit' : 'text-white'}>
-                  <SFGovIcon symbol='clipboard' />
+                  <SFGovIcon symbol='document' />
                   </div>
                 </div>
                 {children}

website/src/components/IconSample.js

@@ -36,7 +36,7 @@ export default function IconSample ({
                 <div className='flex justify-between items-center font-mono' style={{ textTransform: 'lowercase' }}>
                   {iconInfo}
                   <div className={isHover ? 'inherit' : 'text-white'}>
-                    <SFGovIcon symbol='clipboard' />
+                    <SFGovIcon symbol='document' />
                   </div>
                 </div>