@byline/ui 6.8.0 → 6.10.0

package/src/styles/typography/article.stories.tsx

@@ -0,0 +1,39 @@
+import type { Meta } from '@storybook/react-vite'
+
+export const Article = (): React.JSX.Element => {
+  return (
+    <div style={{ marginBottom: '48px' }}>
+      <article style={{ maxWidth: '700px', margin: '2rem auto' }} className="prose">
+        <h1>An Article</h1>
+        <p>
+          This is text that that has been placed in an article element. Text in articles as well as
+          within .dynamic-text class selectors will automatically increase in size on mobile devices
+          for better readability. This is a paragraph of text that we&apos;ll use for our typography
+          storybook page. This is a paragraph of text that we&apos;ll use for our typography
+          storybook page.
+        </p>
+        <blockquote>
+          This is some text inside a blockquote. Note that we've used em to size text in the
+          blockquote, so that it also changes size in the article.
+        </blockquote>
+        <p>
+          This is a paragraph of text that we&apos;ll use for our typography storybook page. This is
+          a paragraph of text that we&apos;ll use for our typography storybook page. This is a
+          paragraph of text that we&apos;ll use for our typography storybook page. This is a
+          paragraph of text that we&apos;ll use for our typography storybook page.
+        </p>
+      </article>
+    </div>
+  )
+}
+
+const meta: Meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Typography',
+  component: Article,
+}
+
+export default meta

package/src/styles/typography/code.stories.tsx

@@ -0,0 +1,73 @@
+import type { Meta } from '@storybook/react-vite'
+import { Highlight, themes } from 'prism-react-renderer'
+
+const code = `const x = 'foo';
+function printFoo() {
+  console.log(x);
+}
+printFoo();`
+
+type CodeIntrinsicProps = React.JSX.IntrinsicElements['pre']
+interface CodeProps extends CodeIntrinsicProps {
+  className?: string
+  title?: string
+  code: string
+  language?: string
+}
+
+function CodeDemo({ code, className, language = 'jsx' }: CodeProps): React.JSX.Element {
+  return (
+    <Highlight theme={themes.nightOwl} code={code} language={language}>
+      {({ tokens, getLineProps, getTokenProps }) => (
+        <pre className={className}>
+          {tokens.map((line, i) => {
+            const lineProps = getLineProps({ line, key: i })
+            return (
+              // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+              <div {...lineProps} key={i} style={{ lineHeight: 1.3 }}>
+                <span style={{ marginLeft: '-8px', marginRight: '12px' }}>{i + 1}</span>
+                {line.map((token, key) => (
+                  // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+                  <span key={key} {...getTokenProps({ token })} />
+                ))}
+              </div>
+            )
+          })}
+        </pre>
+      )}
+    </Highlight>
+  )
+}
+
+export const Code = (): React.JSX.Element => {
+  return (
+    <div style={{ margin: '48px' }}>
+      <div style={{ maxWidth: '700px', margin: '2rem auto' }} className="prose">
+        <h1>Heading 1</h1>
+        <p>
+          This is an example of <code>inline code here</code> and text that we&apos;ll use for our
+          typography and code storybook page. This is a paragraph of text that we&apos;ll use for
+          our typography and code storybook page. Here is a code block...
+        </p>
+        <CodeDemo code={code} />
+        <p>
+          This is a paragraph of text that we&apos;ll use for our typography storybook page. This is
+          a paragraph of text that we&apos;ll use for our typography storybook page. This is a
+          paragraph of text that we&apos;ll use for our typography storybook page. This is a
+          paragraph of text that we&apos;ll use for our typography storybook page.
+        </p>
+      </div>
+    </div>
+  )
+}
+
+const meta: Meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Typography',
+  component: Code,
+}
+
+export default meta

package/src/styles/typography/default.stories.tsx

@@ -0,0 +1,49 @@
+import type { Meta } from '@storybook/react-vite'
+
+export const Default = (): React.JSX.Element => {
+  return (
+    <div style={{ marginBottom: '48px' }}>
+      <div style={{ maxWidth: '700px', margin: '2rem auto' }} className="prose">
+        <h1>Heading 1 - With Some More Text to Test on Mobile</h1>
+        <p>
+          This is a paragraph of text that we&apos;ll use for our typography storybook page. This is
+          a paragraph of text that we&apos;ll use for our typography storybook page. This is a
+          paragraph of text that we&apos;ll use for our typography storybook page. This is a
+          paragraph of text that we&apos;ll use for our typography storybook page.
+        </p>
+        <h2>Heading 2 - With Some More Text to Test on Mobile</h2>
+        <p>
+          This is a paragraph of text that we&apos;ll use for our typography storybook page. This is
+          a paragraph of text that we&apos;ll use for our typography storybook page. This is a
+          paragraph of text that we&apos;ll use for our typography storybook page. This is a
+          paragraph of text that we&apos;ll use for our typography storybook page.
+        </p>
+        <h3>Heading 3 - With Some More Text to Test on Mobile</h3>
+        <p>
+          This is a paragraph of text that we&apos;ll use for our typography storybook page. This is
+          a paragraph of text that we&apos;ll use for our typography storybook page. This is a
+          paragraph of text that we&apos;ll use for our typography storybook page. This is a
+          paragraph of text that we&apos;ll use for our typography storybook page.
+        </p>
+        <h4>Heading 4 - With Some More Text to Test on Mobile</h4>
+        <p>
+          This is a paragraph of text that we&apos;ll use for our typography storybook page. This is
+          a paragraph of text that we&apos;ll use for our typography storybook page. This is a
+          paragraph of text that we&apos;ll use for our typography storybook page. This is a
+          paragraph of text that we&apos;ll use for our typography storybook page.
+        </p>
+      </div>
+    </div>
+  )
+}
+
+const meta: Meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Typography',
+  component: Default,
+}
+
+export default meta

package/src/styles/typography/lists.stories.tsx

@@ -0,0 +1,48 @@
+import type { Meta } from '@storybook/react-vite'
+
+export const Lists = (): React.JSX.Element => {
+  return (
+    <div style={{ marginBottom: '48px' }}>
+      <div style={{ maxWidth: '700px', margin: '2rem auto' }} className="prose">
+        <h1>Lists</h1>
+        <p>
+          This is a paragraph of text that we&apos;ll use for our typography storybook page. This is
+          a paragraph of text that we&apos;ll use for our typography storybook page. This is a
+          paragraph of text that we&apos;ll use for our typography storybook page. This is a
+          paragraph of text that we&apos;ll use for our typography storybook page.
+        </p>
+        <ol>
+          <li>One - item in a list here</li>
+          <li>Two - item in a list here</li>
+          <li>Three - item in a list here</li>
+          <li>Four - item in a list here</li>
+          <li>Five - item in a list here</li>
+        </ol>
+        <p>
+          This is a paragraph of text that we&apos;ll use for our typography storybook page. This is
+          a paragraph of text that we&apos;ll use for our typography storybook page. This is a
+          paragraph of text that we&apos;ll use for our typography storybook page. This is a
+          paragraph of text that we&apos;ll use for our typography storybook page.
+        </p>
+        <ul>
+          <li>Item - item in a list here</li>
+          <li>Item - item in a list here</li>
+          <li>Item - item in a list here</li>
+          <li>Item - item in a list here</li>
+          <li>Item - item in a list here</li>
+        </ul>
+      </div>
+    </div>
+  )
+}
+
+const meta: Meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Typography',
+  component: Lists,
+}
+
+export default meta

package/src/styles/typography/quote.stories.tsx

@@ -0,0 +1,38 @@
+import type { Meta } from '@storybook/react-vite'
+
+export const Quote = (): React.JSX.Element => {
+  return (
+    <div style={{ marginBottom: '48px' }}>
+      <div style={{ maxWidth: '700px', margin: '2rem auto' }} className="prose">
+        <h1>Heading 1</h1>
+        <p>
+          This is a paragraph of text that we&apos;ll use for our typography storybook page. This is
+          a paragraph of text that we&apos;ll use for our typography storybook page. This is a
+          paragraph of text that we&apos;ll use for our typography storybook page. This is a
+          paragraph of text that we&apos;ll use for our typography storybook page.
+        </p>
+        <blockquote>
+          This is some text inside a blockquote. We&apos;ll make this a little longer to see how it
+          looks when it wraps.
+        </blockquote>
+        <p>
+          This is a paragraph of text that we&apos;ll use for our typography storybook page. This is
+          a paragraph of text that we&apos;ll use for our typography storybook page. This is a
+          paragraph of text that we&apos;ll use for our typography storybook page. This is a
+          paragraph of text that we&apos;ll use for our typography storybook page.
+        </p>
+      </div>
+    </div>
+  )
+}
+
+const meta: Meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Typography',
+  component: Quote,
+}
+
+export default meta

package/src/widgets/datepicker/datepicker.stories.tsx

@@ -0,0 +1,42 @@
+import { DatePicker } from './datepicker.js'
+
+export default {
+  title: 'Widgets/DatePicker',
+  component: DatePicker,
+  argTypes: {},
+}
+
+export const Default = (): React.JSX.Element => {
+  const handleDateChange = (value: Date | null): void => {
+    console.log('Selected date:', value)
+  }
+
+  return (
+    <div style={{ maxWidth: '270px', margin: '2rem auto' }}>
+      <div style={{ display: 'flex', flexDirection: 'column', marginBottom: '1.5rem' }}>
+        <span>Date and Time</span>
+        <DatePicker
+          onDateChange={handleDateChange}
+          id="published_on"
+          name="published_on"
+          yearsInPast={70}
+          variant="outlined"
+          helpText="Select published on date."
+        />
+      </div>
+
+      <div style={{ display: 'flex', flexDirection: 'column', marginBottom: '1.5rem' }}>
+        <span>Date</span>
+        <DatePicker
+          onDateChange={handleDateChange}
+          mode="date"
+          id="published_on"
+          name="published_on"
+          variant="outlined"
+          yearsInPast={70}
+          helpText="Select published on date."
+        />
+      </div>
+    </div>
+  )
+}

package/src/widgets/drawer/drawer.stories.tsx

@@ -0,0 +1,281 @@
+import React from 'react'
+
+import { Button } from '../../components/button/button.js'
+import { IconButton } from '../../components/button/icon-button.js'
+import { CloseIcon } from '../../icons/close-icon.js'
+import { DatePicker } from '../datepicker/datepicker.js'
+import { Drawer } from './drawer.js'
+
+export default {
+  title: 'Widgets/Drawer',
+  component: Drawer,
+  argTypes: {},
+}
+
+export const Default = (): React.JSX.Element => {
+  const [isOpen, setIsOpen] = React.useState(false)
+
+  return (
+    <>
+      <Button
+        onClick={() => {
+          setIsOpen(true)
+        }}
+      >
+        Open Drawer
+      </Button>
+      <Drawer
+        id="first-drawer"
+        closeOnOverlayClick={true}
+        isOpen={isOpen}
+        onDismiss={() => setIsOpen(false)}
+      >
+        <Drawer.Container>
+          <Drawer.TopActions>
+            <button type="button" tabIndex={0} className="sr-only">
+              no action
+            </button>
+            <IconButton
+              aria-label="Close"
+              size="xs"
+              onClick={() => {
+                setIsOpen(false)
+              }}
+            >
+              <CloseIcon width="14px" height="14px" />
+            </IconButton>
+          </Drawer.TopActions>
+          <Drawer.Header
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              marginBottom: '1rem',
+            }}
+          >
+            <h2>Drawer Actions Here</h2>
+          </Drawer.Header>
+          <Drawer.Content>
+            <p>Drawer content here...</p>
+          </Drawer.Content>
+        </Drawer.Container>
+      </Drawer>
+    </>
+  )
+}
+
+export const TopOffset = (): React.JSX.Element => {
+  const [isOpen, setIsOpen] = React.useState(false)
+
+  return (
+    <>
+      <Button
+        onClick={() => {
+          setIsOpen(true)
+        }}
+      >
+        Open Drawer
+      </Button>
+      <Drawer
+        id="top-offset-drawer"
+        topOffset="60px"
+        closeOnOverlayClick={false}
+        isOpen={isOpen}
+        onDismiss={() => setIsOpen(false)}
+      >
+        <Drawer.Container>
+          <Drawer.TopActions>
+            <button type="button" tabIndex={0} className="sr-only">
+              no action
+            </button>
+            <IconButton
+              aria-label="Close"
+              size="xs"
+              onClick={() => {
+                setIsOpen(false)
+              }}
+            >
+              <CloseIcon width="14px" height="14px" />
+            </IconButton>
+          </Drawer.TopActions>
+          <Drawer.Header
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              marginBottom: '1rem',
+            }}
+          >
+            <h2>Drawer Actions Here</h2>
+          </Drawer.Header>
+          <Drawer.Content>
+            <p>Drawer content here...</p>
+          </Drawer.Content>
+        </Drawer.Container>
+      </Drawer>
+    </>
+  )
+}
+
+export const Wide = (): React.JSX.Element => {
+  const [isOpen, setIsOpen] = React.useState(false)
+
+  return (
+    <>
+      <Button
+        onClick={() => {
+          setIsOpen(true)
+        }}
+      >
+        Open Drawer
+      </Button>
+      <Drawer
+        id="first-drawer"
+        closeOnOverlayClick={false}
+        isOpen={isOpen}
+        width="wide"
+        onDismiss={() => setIsOpen(false)}
+      >
+        <Drawer.Container>
+          <Drawer.TopActions>
+            <button type="button" tabIndex={0} className="sr-only">
+              no action
+            </button>
+            <IconButton
+              aria-label="Close"
+              size="xs"
+              onClick={() => {
+                setIsOpen(false)
+              }}
+            >
+              <CloseIcon width="14px" height="14px" svgClassName="white-icon" />
+            </IconButton>
+          </Drawer.TopActions>
+          <Drawer.Header
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              marginBottom: '1rem',
+            }}
+          >
+            <h2>Drawer Actions Here</h2>
+          </Drawer.Header>
+          <Drawer.Content>
+            <p>Drawer content here...</p>
+            <div style={{ maxWidth: '300px', marginTop: '20px', margin: '0 auto' }}>
+              <DatePicker
+                id="datepicker-1"
+                name="datepicker-1"
+                label="Select Date"
+                required
+                initialValue={new Date()}
+                onDateChange={(date) => {
+                  console.log('Selected date:', date)
+                }}
+              />
+            </div>
+          </Drawer.Content>
+        </Drawer.Container>
+      </Drawer>
+    </>
+  )
+}
+
+export const Nested = (): React.JSX.Element => {
+  const [isOpen1, setIsOpen1] = React.useState(false)
+  const [isOpen2, setIsOpen2] = React.useState(false)
+
+  return (
+    <>
+      <Button
+        onClick={() => {
+          setIsOpen1(true)
+        }}
+      >
+        Open Drawer 1
+      </Button>
+      <Drawer
+        id="first-drawer"
+        width="medium"
+        closeOnOverlayClick={true}
+        isOpen={isOpen1}
+        onDismiss={() => setIsOpen1(false)}
+      >
+        <Drawer.Container>
+          <Drawer.TopActions>
+            <button type="button" tabIndex={0} className="sr-only">
+              no action
+            </button>
+            <IconButton
+              aria-label="Close"
+              size="xs"
+              onClick={() => {
+                setIsOpen1(false)
+              }}
+            >
+              <CloseIcon width="14px" height="14px" svgClassName="white-icon" />
+            </IconButton>
+          </Drawer.TopActions>
+          <Drawer.Header
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              marginBottom: '1rem',
+            }}
+          >
+            <h2>Drawer 1</h2>
+          </Drawer.Header>
+          <Drawer.Content>
+            <p>Drawer 1 actions here...</p>
+            <Button
+              onClick={() => {
+                setIsOpen2(true)
+              }}
+            >
+              Open Drawer 2
+            </Button>
+            <Drawer
+              id="second-drawer"
+              width="medium"
+              closeOnOverlayClick={true}
+              isOpen={isOpen2}
+              onDismiss={() => setIsOpen2(false)}
+            >
+              <Drawer.Container>
+                <Drawer.TopActions>
+                  <button type="button" tabIndex={0} className="sr-only">
+                    no action
+                  </button>
+                  <IconButton
+                    aria-label="Close"
+                    size="xs"
+                    onClick={() => {
+                      setIsOpen2(false)
+                    }}
+                  >
+                    <CloseIcon width="14px" height="14px" svgClassName="white-icon" />
+                  </IconButton>
+                </Drawer.TopActions>
+                <Drawer.Header
+                  style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    marginBottom: '1rem',
+                  }}
+                >
+                  <h2>Drawer 2</h2>
+                </Drawer.Header>
+                <Drawer.Content>
+                  <p>Drawer content here...</p>
+                </Drawer.Content>
+              </Drawer.Container>
+            </Drawer>
+          </Drawer.Content>
+        </Drawer.Container>
+      </Drawer>
+    </>
+  )
+}

package/src/widgets/modal/modal.stories.tsx

@@ -0,0 +1,63 @@
+// biome-ignore lint/style/useImportType: <explanation>
+import React from 'react'
+
+import { Button } from '../../components/button/button.js'
+import { IconButton } from '../../components/button/icon-button.js'
+import { CloseIcon } from '../../icons/close-icon.js'
+import { Modal, useModal } from './modal.js'
+
+export default {
+  title: 'Widgets/Modal',
+  component: Modal,
+  argTypes: {},
+}
+
+export const Default = (): React.JSX.Element => {
+  const { onDismiss, onOpen, isOpen, setIsOpen } = useModal()
+
+  return (
+    <div style={{ margin: '2rem 0' }}>
+      <Button
+        onClick={() => {
+          setIsOpen(true)
+        }}
+      >
+        Open Modal
+      </Button>
+      <Modal isOpen={isOpen} onDismiss={onDismiss} closeOnOverlayClick={true}>
+        <Modal.Container style={{ maxWidth: '600px' }}>
+          <Modal.Header>
+            <h3>Modal Header</h3>
+            <IconButton
+              aria-label="Close"
+              size="xs"
+              onClick={() => {
+                setIsOpen(false)
+              }}
+            >
+              <CloseIcon width="16px" height="16px" svgClassName="white-icon" />
+            </IconButton>
+          </Modal.Header>
+          <Modal.Content>
+            <p style={{ paddingTop: '1rem' }}>
+              Modal content with some text here that should run a little longer. And longer here.
+              And the current theme is.
+            </p>
+          </Modal.Content>
+          <Modal.Actions>
+            <Button
+              size="sm"
+              intent="noeffect"
+              onClick={() => {
+                setIsOpen(false)
+              }}
+              data-autofocus
+            >
+              Close
+            </Button>
+          </Modal.Actions>
+        </Modal.Container>
+      </Modal>
+    </div>
+  )
+}

package/src/widgets/search/search.stories.tsx

@@ -0,0 +1,18 @@
+// biome-ignore lint/style/useImportType: <explanation>
+import React from 'react'
+
+import { Search } from './search.js'
+
+export default {
+  title: 'Widgets/Search',
+  component: Search,
+  argTypes: {},
+}
+
+export const Default = (): React.JSX.Element => {
+  return (
+    <div style={{ maxWidth: '600px', margin: '2rem auto' }}>
+      <Search variant="underlined" />
+    </div>
+  )
+}