@papillonarts/components 0.8.0 → 0.10.0

package/build/index.ts

@@ -0,0 +1 @@
+export { primer } from './primer'

package/build/primer/Alert/Alert.mdx

@@ -0,0 +1,88 @@
+# Alert
+
+> Flash messages, or alerts, inform users of successful or pending actions. Use them sparingly. Don't show more than one at a time.
+
+# Variants
+
+> - Default,
+> - Info, Warning, Error, Success
+> - Consent, Consent with input
+
+## Default
+
+> Flash messages start off looking decently neutral—they're just light blue rounded rectangles.
+
+```jsx
+<Alert variant={alertVariant.info}>{children}</Alert>
+```
+
+## Default Multiple Paragraphs
+
+> You can put multiple paragraphs of text in a flash message—the last paragraph's bottom margin will be automatically override.
+
+```jsx
+<Alert variant={alertVariant.default}>
+  <p>
+    This is a longer flash message in it&apos;s own paragraph. It ends up looking something like this. If we keep adding more text,
+    it&apos;ll eventually wrap to a new line.
+  </p>
+  <p>And this is another paragraph.</p>
+</Alert>
+```
+
+## Info
+
+```jsx
+<Alert variant={alertVariant.info}>{children}</Alert>
+```
+
+## Warning
+
+```jsx
+<Alert variant={alertVariant.warning}>{children}</Alert>
+```
+
+## Error
+
+```jsx
+<Alert variant={alertVariant.error}>{children}</Alert>
+```
+
+## Success
+
+```jsx
+<Alert variant={alertVariant.success}>{children}</Alert>
+```
+
+## Consent
+
+```jsx
+<Alert
+  variant={alertVariant.consent}
+  consent={{
+    action: {
+      approve: action('Approved'),
+      cancel: action('Cancelled'),
+    },
+  }}
+>
+  {children}
+</Alert>
+```
+
+## Consent with input
+
+```jsx
+<Alert
+  variant={alertVariant.consent}
+  consent={{
+    action: {
+      approve: action('Approved'),
+      cancel: action('Cancelled'),
+    },
+    withInput: true,
+  }}
+>
+  {children}
+</Alert>
+```

package/build/primer/Alert/Alert.prop.ts

@@ -0,0 +1,45 @@
+export const alertVariant = {
+  default: 'default',
+  info: 'info',
+  warning: 'warning',
+  error: 'error',
+  success: 'success',
+  consent: 'consent',
+}
+
+export const defaultProps = {
+  dataTest: null,
+  className: null,
+  variant: alertVariant.default,
+}
+
+export interface ActionType {
+  approve?: (value?: string) => void
+  cancel?: (value?: string) => void
+}
+
+export interface ConsentType {
+  action?: ActionType
+  withInput?: boolean
+}
+
+export interface DataTestType {
+  default?: string
+  approve?: string
+  cancel?: string
+  value?: string
+}
+
+export interface AlertProps {
+  dataTest?: DataTestType
+  className?: string
+  variant?:
+    | typeof alertVariant.default
+    | typeof alertVariant.info
+    | typeof alertVariant.warning
+    | typeof alertVariant.error
+    | typeof alertVariant.success
+    | typeof alertVariant.consent
+  children: React.ReactNode // https://react.dev/learn/typescript#typing-children
+  consent: ConsentType
+}

package/build/primer/Alert/Alert.tsx

@@ -0,0 +1,101 @@
+import { Fragment } from 'react'
+import { useState } from '@papillonarts/library/hooks'
+import utilityStyles from '@papillonarts/css/build/primer/utilities/margin.scss'
+import cx from 'classnames'
+import { AlertProps, defaultProps, alertVariant } from './Alert.prop'
+import styles from './Alert.scss'
+import buttonStyles from '../Button/Button.scss'
+import { Input } from '../Form/Input'
+import { Button, buttonVariant, buttonInputType, iconAlignment } from '../Button'
+import { iconName } from '../Icon/Icon.prop'
+import { Icon, iconSize } from '../Icon'
+
+export function Alert({
+  dataTest = defaultProps.dataTest,
+  className = defaultProps.className,
+  variant = defaultProps.variant,
+  children,
+  consent,
+}: AlertProps) {
+  const [consentValue, setConsentValue] = useState('')
+
+  return (
+    <div data-test={dataTest?.default} className={className}>
+      <div className={cx(styles['flash-messages'])}>
+        <div
+          className={cx(styles.flash, {
+            [styles['flash-warn']]: variant === alertVariant.warning,
+            [styles['flash-error']]: variant === alertVariant.error,
+            [styles['flash-success']]: variant === alertVariant.success,
+            [styles['flash-consent']]: variant === alertVariant.consent,
+          })}
+        >
+          {consent && (
+            <Fragment>
+              <Button
+                dataTest={dataTest?.cancel}
+                className={cx(buttonStyles.btn, buttonStyles['btn-sm'], buttonStyles.primary, styles['flash-action'])}
+                text="Cancel"
+                icon={{ name: iconName.XCircleFill16, alignment: iconAlignment.left }}
+                variant={buttonVariant.default}
+                inputType={buttonInputType.submit}
+                onClick={() => {
+                  consent?.action?.cancel()
+                  setConsentValue('')
+                }}
+              />
+              <Button
+                dataTest={dataTest?.approve}
+                className={cx(buttonStyles.btn, buttonStyles['btn-sm'], buttonStyles.primary, styles['flash-action'])}
+                text="Approve"
+                icon={{ name: iconName.CheckCircleFill16, alignment: iconAlignment.left }}
+                variant={buttonVariant.primary}
+                inputType={buttonInputType.submit}
+                autoFocus={consent?.withInput ? false : true} // eslint-disable-line
+                onClick={
+                  consent?.withInput
+                    ? () => {
+                        if (consentValue !== '') {
+                          consent?.action?.approve(consentValue)
+                          setConsentValue('')
+                        }
+                      }
+                    : consent?.action?.approve
+                }
+              />
+            </Fragment>
+          )}
+          {variant === alertVariant.info && <Icon className={utilityStyles['mr-2']} icon={iconName.Info16} size={iconSize.small} />}
+          {variant === alertVariant.warning && !consent && (
+            <Icon className={utilityStyles['mr-2']} icon={iconName.Alert16} size={iconSize.small} />
+          )}
+          {variant === alertVariant.warning && consent && (
+            <Icon className={utilityStyles['mr-2']} icon={iconName.Question16} size={iconSize.small} />
+          )}
+          {variant === alertVariant.error && <Icon className={utilityStyles['mr-2']} icon={iconName.XCircle16} size={iconSize.small} />}
+          {variant === alertVariant.success && (
+            <Icon className={utilityStyles['mr-2']} icon={iconName.CheckCircle16} size={iconSize.small} />
+          )}
+          {variant === alertVariant.consent && <Icon className={utilityStyles['mr-2']} icon={iconName.Question16} size={iconSize.small} />}
+          {children}
+          {consent?.withInput && (
+            <Input
+              dataTest={dataTest?.value}
+              className={styles['flash-action']}
+              value={consentValue}
+              placeholder=""
+              ariaAttr={{ label: '' }}
+              onChange={(event) => {
+                setConsentValue(event.target.value)
+              }}
+              onKeyUp={(event) => {
+                setConsentValue(event.target.value)
+              }}
+              autoFocus={true} // eslint-disable-line
+            />
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

package/build/primer/Alert/__tests__/Alert.int.story.tsx

@@ -0,0 +1,86 @@
+// https://storybook.js.org/docs/configure/integration/typescript
+
+import { action } from 'storybook/actions'
+import { withTests } from '@storybook/addon-jest'
+import { alertVariant } from '../Alert.prop'
+import results from '../../../../../../.jest-test-results.json'
+
+const children = 'Flash message goes here.'
+
+const Alert =
+  process.env.NODE_ENV === 'develop' || process.env.NODE_ENV === 'test'
+    ? require('../../../index').primer.Alert.Alert
+    : require('../../../../build').primer.Alert.Alert
+
+export default {
+  title: 'Primer/Molecule/Alert',
+  component: Alert,
+  decorators: [withTests({ results })],
+  parameters: { jest: ['Alert.int.test.js'] },
+  excludeStories: ['custom'],
+}
+
+export function regular() {
+  return <Alert variant={alertVariant.default}>{children}</Alert>
+}
+
+export function regularMultipleParagraphs() {
+  return (
+    <Alert variant={alertVariant.default}>
+      <p>
+        This is a longer flash message in it&apos;s own paragraph. It ends up looking something like this. If we keep adding more text,
+        it&apos;ll eventually wrap to a new line.
+      </p>
+      <p>And this is another paragraph.</p>
+    </Alert>
+  )
+}
+
+export function info() {
+  return <Alert variant={alertVariant.info}>{children}</Alert>
+}
+
+export function warning() {
+  return <Alert variant={alertVariant.warning}>{children}</Alert>
+}
+
+export function error() {
+  return <Alert variant={alertVariant.error}>{children}</Alert>
+}
+
+export function success() {
+  return <Alert variant={alertVariant.success}>{children}</Alert>
+}
+
+export function consent() {
+  return (
+    <Alert
+      variant={alertVariant.consent}
+      consent={{
+        action: {
+          approve: action('Approved'),
+          cancel: action('Cancelled'),
+        },
+      }}
+    >
+      {children}
+    </Alert>
+  )
+}
+
+export function consentWithInput() {
+  return (
+    <Alert
+      variant={alertVariant.consent}
+      consent={{
+        action: {
+          approve: action('Approved'),
+          cancel: action('Cancelled'),
+        },
+        withInput: true,
+      }}
+    >
+      {children}
+    </Alert>
+  )
+}

package/build/primer/Alert/__tests__/Alert.int.test.ts

@@ -0,0 +1,37 @@
+import { regular, regularMultipleParagraphs, info, warning, error, success, consent, consentWithInput } from './Alert.int.story'
+
+describe('<Alert />', () => {
+  describe('Render', () => {
+    test('must match regular()', () => {
+      expect(global.renderToJSON(regular())).toMatchSnapshot()
+    })
+
+    test('must match regularMultipleParagraphs()', () => {
+      expect(global.renderToJSON(regularMultipleParagraphs())).toMatchSnapshot()
+    })
+
+    test('must match info()', () => {
+      expect(global.renderToJSON(info())).toMatchSnapshot()
+    })
+
+    test('must match warning()', () => {
+      expect(global.renderToJSON(warning())).toMatchSnapshot()
+    })
+
+    test('must match error()', () => {
+      expect(global.renderToJSON(error())).toMatchSnapshot()
+    })
+
+    test('must match success()', () => {
+      expect(global.renderToJSON(success())).toMatchSnapshot()
+    })
+
+    test('must match consent()', () => {
+      expect(global.renderToJSON(consent())).toMatchSnapshot()
+    })
+
+    test('must match consentWithInput()', () => {
+      expect(global.renderToJSON(consentWithInput())).toMatchSnapshot()
+    })
+  })
+})

package/build/primer/Alert/index.ts

@@ -0,0 +1,2 @@
+export { Alert } from './Alert'
+export { alertVariant } from './Alert.prop'

package/build/primer/Blankslate/Blankslate.mdx

@@ -0,0 +1,57 @@
+# Blankslate
+
+> Blankslates are for when there is a lack of content within a page or section. Use them as placeholders to tell users why something isn't there. Be sure to provide an action to add content as well.
+
+# Variants
+
+> - Default
+> - Narrow, Capped, Spacious
+> - Large, No background
+
+## Default
+
+> Wrap some content in the outer .blankslate wrapper to give it the blankslate appearance.
+
+```jsx
+<Blankslate variant={blankslateVariant.default} heading={heading} text={text} />
+```
+
+## Narrow
+
+> Narrows the blankslate container to not occupy the entire available width.
+
+```jsx
+<Blankslate variant={blankslateVariant.narrow} heading={heading} text={text} />
+```
+
+## Capped
+
+> Removes the border-radius on the top corners.
+
+```jsx
+<Blankslate variant={blankslateVariant.capped} heading={heading} text={text} />
+```
+
+## Spacious
+
+> Significantly increases the vertical padding.
+
+```jsx
+<Blankslate variant={blankslateVariant.spacious} heading={heading} text={text} />
+```
+
+## Large
+
+> Increases the size of the text in the blankslate
+
+```jsx
+<Blankslate variant={blankslateVariant.large} heading={heading} text={text} />
+```
+
+## No background
+
+> Removes the background-color and border.
+
+```jsx
+<Blankslate hasCleanBackground={true} heading={heading} text={text} />
+```

package/build/primer/Blankslate/Blankslate.prop.ts

@@ -0,0 +1,26 @@
+export const blankslateVariant = {
+  default: 'default',
+  narrow: 'narrow',
+  capped: 'capped',
+  spacious: 'spacious',
+  large: 'large',
+}
+
+export const defaultProps = {
+  className: null,
+  variant: blankslateVariant.default,
+  hasCleanBackground: false,
+}
+
+export interface BlankslateProps {
+  className?: string
+  heading: string
+  text: string
+  variant?:
+    | typeof blankslateVariant.default
+    | typeof blankslateVariant.narrow
+    | typeof blankslateVariant.capped
+    | typeof blankslateVariant.spacious
+    | typeof blankslateVariant.large
+  hasCleanBackground?: boolean
+}

package/build/primer/Blankslate/Blankslate.tsx

@@ -0,0 +1,26 @@
+import cx from 'classnames'
+import { BlankslateProps, defaultProps, blankslateVariant } from './Blankslate.prop'
+import styles from './Blankslate.scss'
+
+export function Blankslate({
+  className = defaultProps.className,
+  heading,
+  text,
+  variant = defaultProps.variant,
+  hasCleanBackground = defaultProps.hasCleanBackground,
+}: BlankslateProps) {
+  return (
+    <div
+      className={cx(className, styles.blankslate, {
+        [styles['blankslate-narrow']]: variant === blankslateVariant.narrow,
+        [styles['blankslate-capped']]: (variant === blankslateVariant.capped) === true,
+        [styles['blankslate-spacious']]: variant === blankslateVariant.spacious,
+        [styles['blankslate-large']]: variant === blankslateVariant.large,
+        [styles['blankslate-clean-background']]: hasCleanBackground === true,
+      })}
+    >
+      <h3>{heading}</h3>
+      <p>{text}</p>
+    </div>
+  )
+}

package/build/primer/Blankslate/__tests__/Blankslate.int.story.tsx

@@ -0,0 +1,43 @@
+import { withTests } from '@storybook/addon-jest'
+import { blankslateVariant } from '../Blankslate.prop'
+import results from '../../../../../../.jest-test-results.json'
+
+const Blankslate =
+  process.env.NODE_ENV === 'develop' || process.env.NODE_ENV === 'test'
+    ? require('../../../index').primer.Blankslate.Blankslate
+    : require('../../../../build').primer.Blankslate.Blankslate
+
+const heading = 'This is a blank slate'
+const text = 'Use it to provide information when no dynamic content exists.'
+
+export default {
+  title: 'Primer/Atom/Blankslate',
+  component: Blankslate,
+  decorators: [withTests({ results })],
+  parameters: { jest: ['Blankslate.int.test.js'] },
+  excludeStories: ['custom'],
+}
+
+export function regular() {
+  return <Blankslate variant={blankslateVariant.default} heading={heading} text={text} />
+}
+
+export function narrow() {
+  return <Blankslate variant={blankslateVariant.narrow} heading={heading} text={text} />
+}
+
+export function capped() {
+  return <Blankslate variant={blankslateVariant.capped} heading={heading} text={text} />
+}
+
+export function spacious() {
+  return <Blankslate variant={blankslateVariant.spacious} heading={heading} text={text} />
+}
+
+export function large() {
+  return <Blankslate variant={blankslateVariant.large} heading={heading} text={text} />
+}
+
+export function cleanBackground() {
+  return <Blankslate hasCleanBackground={true} heading={heading} text={text} />
+}

package/build/primer/Blankslate/__tests__/Blankslate.int.test.ts

@@ -0,0 +1,29 @@
+import { regular, narrow, capped, spacious, large, cleanBackground } from './Blankslate.int.story'
+
+describe('<Blankslate />', () => {
+  describe('Render', () => {
+    test('must match regular()', () => {
+      expect(global.renderToJSON(regular())).toMatchSnapshot()
+    })
+
+    test('must match narrow()', () => {
+      expect(global.renderToJSON(narrow())).toMatchSnapshot()
+    })
+
+    test('must match capped()', () => {
+      expect(global.renderToJSON(capped())).toMatchSnapshot()
+    })
+
+    test('must match spacious()', () => {
+      expect(global.renderToJSON(spacious())).toMatchSnapshot()
+    })
+
+    test('must match large()', () => {
+      expect(global.renderToJSON(large())).toMatchSnapshot()
+    })
+
+    test('must match cleanBackground()', () => {
+      expect(global.renderToJSON(cleanBackground())).toMatchSnapshot()
+    })
+  })
+})

package/build/primer/Blankslate/index.ts

@@ -0,0 +1,2 @@
+export { Blankslate } from './Blankslate'
+export { blankslateVariant } from './Blankslate.prop'

package/build/primer/Breadcrumb/Breadcrumb.mdx

@@ -0,0 +1,23 @@
+# Breadcrumb
+
+> Breadcrumbs are used to show taxonomical context on pages that are many levels deep in a site’s hierarchy. Breadcrumbs show and link to parent, grandparent, and sometimes great-grandparent pages. Breadcrumbs are most appropriate on pages that:
+
+- Are many levels deep on a site
+- Do not have a section-level navigation
+- May need the ability to quickly go back to the previous (parent) page
+
+# Variants
+
+> - Default, Inactive
+
+## Default
+
+```jsx
+<Breadcrumb ariaAttr={ariaAttr} items={items} onClick={action('onClick')} />
+```
+
+## Inactive
+
+```jsx
+<Breadcrumb ariaAttr={ariaAttr} items={items} onClick={action('onClick')} state={breadcrumbState.inactive} />
+```

package/build/primer/Breadcrumb/Breadcrumb.prop.ts

@@ -0,0 +1,28 @@
+export const breadcrumbState = {
+  active: 'active',
+  inactive: 'inactive',
+}
+
+export const defaultProps = {
+  className: null,
+  state: breadcrumbState.active,
+}
+
+export interface AriaAttrType {
+  label: string
+  current: boolean | false | true | 'page' | 'step' | 'location' | 'date' | 'time'
+}
+
+export interface ItemType {
+  href: string
+  text: string
+  isSelected: boolean
+}
+
+export interface BreadcrumbProps {
+  className?: string
+  ariaAttr: AriaAttrType
+  items: ItemType[]
+  onClick: (value) => void
+  state?: typeof breadcrumbState.active | typeof breadcrumbState.inactive
+}

package/build/primer/Breadcrumb/Breadcrumb.tsx

@@ -0,0 +1,57 @@
+/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import cx from 'classnames'
+import { v1 as uuidv1 } from 'uuid'
+import utilityStyles from '@papillonarts/css/build/primer/utilities/typography.scss'
+import { getIndexItems, getIndexItemsWithSelected } from '@papillonarts/library/array'
+import { BreadcrumbProps, defaultProps, breadcrumbState } from './Breadcrumb.prop'
+import styles from './Breadcrumb.scss'
+
+export function Breadcrumb({ className = defaultProps.className, ariaAttr, items, onClick, state = defaultProps.state }: BreadcrumbProps) {
+  const indexItems = getIndexItems(items)
+  const { label, current } = ariaAttr
+
+  return (
+    <nav
+      className={cx(className, {
+        [styles['breadcrumb-inactive']]: state === breadcrumbState.inactive,
+      })}
+      aria-label={label}
+    >
+      <ol>
+        {indexItems.map((indexItem) => {
+          const { href, text, isSelected } = indexItem
+
+          const itemOtherProps = isSelected ? { ...{ 'aria-current': current } } : null
+
+          return (
+            <li
+              key={uuidv1()}
+              onClick={(e) => {
+                e.preventDefault()
+                const newIndexItems = getIndexItemsWithSelected(indexItems, indexItem)
+                onClick({
+                  active: text,
+                  ariaAttr,
+                  items: newIndexItems.map(
+                    (newIndexItem) => (({ href, text, isSelected }) => ({ href, text, isSelected }))(newIndexItem), // eslint-disable-line
+                  ),
+                })
+              }}
+              className={
+                !isSelected
+                  ? cx(styles['breadcrumb-item'])
+                  : cx(styles['breadcrumb-item'], styles['breadcrumb-item-selected'], utilityStyles['text-gray'])
+              }
+              // @ts-ignore
+              href={href}
+              {...itemOtherProps}
+            >
+              {isSelected ? text : <a href={href}>{text}</a>}
+            </li>
+          )
+        })}
+      </ol>
+    </nav>
+  )
+}