@papillonarts/components 0.8.0 → 0.9.0

package/build/primer/Navigation/UnderlineNav/index.ts

@@ -0,0 +1,2 @@
+export { UnderlineNav } from './UnderlineNav'
+export { underlineNavItemType, underlineNavAlignmentType } from './UnderlineNav.prop'

package/build/primer/Navigation/index.ts

@@ -0,0 +1,12 @@
+import { Menu } from './Menu'
+import { TabNav, tabNavState } from './TabNav'
+import { UnderlineNav, underlineNavItemType, underlineNavAlignmentType } from './UnderlineNav'
+
+export const Navigation = {
+  Menu,
+  TabNav,
+  tabNavState,
+  UnderlineNav,
+  underlineNavItemType,
+  underlineNavAlignmentType,
+}

package/build/primer/Pagination/PreviousNext/PreviousNext.prop.ts

@@ -0,0 +1,53 @@
+export const previousNextState = {
+  active: 'active',
+  inactive: 'inactive',
+}
+
+export const defaultProps = {
+  className: null,
+  previous: {
+    rel: 'previous',
+    href: '#url',
+    ariaAttr: {
+      label: 'Previous',
+    },
+    text: '<',
+  },
+  next: {
+    rel: 'next',
+    href: '#url',
+    ariaAttr: {
+      label: 'Next',
+    },
+    text: '>',
+  },
+  state: previousNextState.active,
+}
+
+export interface AriaAttrType {
+  label: string
+}
+
+export interface PreviousNextType {
+  rel: string
+  href: string
+  ariaAttr: AriaAttrType
+  text: string
+}
+
+export interface currentPageType {
+  indexItems: React.ReactNode[]
+  currentIndex: number
+  canMoveBackwards: boolean
+  canMoveForward: boolean
+}
+
+export interface PreviousNextProps {
+  className?: string
+  ariaAttr: AriaAttrType
+  currentPage: currentPageType
+  previous?: PreviousNextType
+  next?: PreviousNextType
+  onClick: (value) => void
+  state?: typeof previousNextState.active | typeof previousNextState.inactive
+}

package/build/primer/Pagination/PreviousNext/PreviousNext.tsx

@@ -0,0 +1,71 @@
+import cx from 'classnames'
+import displayStyles from '@papillonarts/css/build/primer/utilities/visibility-display.scss'
+import { paginationActionTypes } from '@papillonarts/library/pagination'
+import { PreviousNextProps, defaultProps, previousNextState } from './PreviousNext.prop'
+import styles from './PreviousNext.scss'
+
+export function PreviousNext({
+  className = defaultProps.className,
+  ariaAttr,
+  currentPage,
+  previous = defaultProps.previous,
+  next = defaultProps.next,
+  onClick,
+  state = defaultProps.state,
+}: PreviousNextProps) {
+  const { label } = ariaAttr
+
+  const { indexItems, currentIndex, canMoveBackwards, canMoveForward } = currentPage
+  const backwardsAriaProps = !canMoveBackwards ? { ...{ 'aria-disabled': 'true' } } : null
+  const forwardAriaProps = !canMoveForward ? { ...{ 'aria-disabled': 'true' } } : null
+
+  // @ts-ignore
+  // if (indexItems === [] || currentIndex === -1) {
+  //   return null
+  // }
+
+  return (
+    <nav
+      className={cx(className, styles['paginate-container'], {
+        [styles['previousnext-inactive']]: state === previousNextState.inactive,
+      })}
+      aria-label={label}
+    >
+      <div className={cx(styles.pagination, displayStyles['d-flex'])}>
+        {!canMoveBackwards ? (
+          // @ts-ignore
+          <span {...backwardsAriaProps}>{previous.text}</span>
+        ) : (
+          <a
+            onClick={(event) => {
+              event.preventDefault()
+              onClick(paginationActionTypes.onBackwards)
+            }}
+            rel={previous.rel}
+            href={previous.href}
+            aria-label={previous.ariaAttr.label}
+          >
+            {previous.text}
+          </a>
+        )}
+        <span>{`Viewing ${currentIndex + 1} to ${indexItems.length}`}</span>
+        {!canMoveForward ? (
+          // @ts-ignore
+          <span {...forwardAriaProps}>{next.text}</span>
+        ) : (
+          <a
+            onClick={(event) => {
+              event.preventDefault()
+              onClick(paginationActionTypes.onForward)
+            }}
+            rel={next.rel}
+            href={next.href}
+            aria-label={next.ariaAttr.label}
+          >
+            {next.text}
+          </a>
+        )}
+      </div>
+    </nav>
+  )
+}

package/build/primer/Pagination/PreviousNext/__tests__/PreviousNext.int.story.tsx

@@ -0,0 +1,48 @@
+import { action } from 'storybook/actions'
+import { withTests } from '@storybook/addon-jest'
+import { previousNextState } from '../PreviousNext.prop'
+import results from '../../../../../../../.jest-test-results.json'
+
+const PreviousNext =
+  process.env.NODE_ENV === 'develop' || process.env.NODE_ENV === 'test'
+    ? require('../../../../index').primer.Pagination.PreviousNext
+    : require('../../../../../build').primer.Pagination.PreviousNext
+
+export default {
+  title: 'Primer/Atom/Pagination/PreviousNext',
+  component: PreviousNext,
+  decorators: [withTests({ results })],
+  parameters: { jest: ['PreviousNext.int.test.js'] },
+  excludeStories: ['ariaAttr', 'currentPage', 'custom'],
+}
+
+export const ariaAttr = {
+  label: 'Pagination',
+}
+
+export const currentPage = {
+  indexItems: [
+    { isCurrent: false, index: 0 },
+    { isCurrent: false, index: 1 },
+    { isCurrent: true, index: 2 },
+    { isCurrent: false, index: 3 },
+    { isCurrent: false, index: 4 },
+    { isCurrent: false, index: 5 },
+    { isCurrent: false, index: 6 },
+  ],
+  currentIndex: 2,
+  canMoveBackwards: true,
+  canMoveForward: true,
+}
+
+export function custom(onClick) {
+  return <PreviousNext ariaAttr={ariaAttr} currentPage={currentPage} onClick={onClick} />
+}
+
+export function regular() {
+  return <PreviousNext ariaAttr={ariaAttr} currentPage={currentPage} onClick={action('onClick')} />
+}
+
+export function inactive() {
+  return <PreviousNext ariaAttr={ariaAttr} currentPage={currentPage} onClick={action('onClick')} state={previousNextState.inactive} />
+}

package/build/primer/Pagination/PreviousNext/__tests__/PreviousNext.int.test.ts

@@ -0,0 +1,15 @@
+import { regular, inactive } from './PreviousNext.int.story'
+
+describe('<PreviousNext />', () => {
+  afterEach(() => jest.clearAllMocks())
+
+  describe('Render', () => {
+    test('must match regular()', () => {
+      expect(global.renderToJSON(regular())).toMatchSnapshot()
+    })
+
+    test('must match inactive()', () => {
+      expect(global.renderToJSON(inactive())).toMatchSnapshot()
+    })
+  })
+})

package/build/primer/Pagination/PreviousNext/index.ts

@@ -0,0 +1,2 @@
+export { PreviousNext } from './PreviousNext'
+export { previousNextState } from './PreviousNext.prop'

package/build/primer/Pagination/index.ts

@@ -0,0 +1,6 @@
+import { PreviousNext, previousNextState } from './PreviousNext'
+
+export const Pagination = {
+  PreviousNext,
+  previousNextState,
+}

package/build/primer/Popover/Popover.mdx

@@ -0,0 +1,190 @@
+# Popover
+
+- Default, DefaultLarge
+- Bottom, BottomRight, BottomLeft
+- Left, LeftBottom, LeftTop
+- Right, RightBottom, RightTop
+- TopLeft, TopRight
+
+> Popovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.
+
+## Default
+
+```jsx
+<Popover
+  intro={intro}
+  heading={heading}
+  message={message}
+  acknowledge={acknowledge}
+  introOnClick={action('introOnClick')}
+  acknowledgeOnClick={action('acknowledgeOnClick')}
+/>
+```
+
+## DefaultLarge
+
+```jsx
+<Popover
+  intro={intro}
+  heading={heading}
+  message={message}
+  acknowledge={acknowledge}
+  size={popoverSize.large}
+  introOnClick={action('introOnClick')}
+  acknowledgeOnClick={action('acknowledgeOnClick')}
+/>
+```
+
+## Bottom
+
+```jsx
+<Popover
+  intro={intro}
+  heading={heading}
+  message={message}
+  acknowledge={acknowledge}
+  variant={popoverVariant.bottom}
+  introOnClick={action('introOnClick')}
+  acknowledgeOnClick={action('acknowledgeOnClick')}
+/>
+```
+
+## BottomRight
+
+```jsx
+<Popover
+  intro={intro}
+  heading={heading}
+  message={message}
+  acknowledge={acknowledge}
+  variant={popoverVariant.bottomRight}
+  introOnClick={action('introOnClick')}
+  acknowledgeOnClick={action('acknowledgeOnClick')}
+/>
+```
+
+## BottomLeft
+
+```jsx
+<Popover
+  intro={intro}
+  heading={heading}
+  message={message}
+  acknowledge={acknowledge}
+  variant={popoverVariant.bottomLeft}
+  introOnClick={action('introOnClick')}
+  acknowledgeOnClick={action('acknowledgeOnClick')}
+/>
+```
+
+## Left
+
+```jsx
+<Popover
+  intro={intro}
+  heading={heading}
+  message={message}
+  acknowledge={acknowledge}
+  variant={popoverVariant.left}
+  introOnClick={action('introOnClick')}
+  acknowledgeOnClick={action('acknowledgeOnClick')}
+/>
+```
+
+## LeftBottom
+
+```jsx
+<Popover
+  intro={intro}
+  heading={heading}
+  message={message}
+  acknowledge={acknowledge}
+  variant={popoverVariant.leftBottom}
+  introOnClick={action('introOnClick')}
+  acknowledgeOnClick={action('acknowledgeOnClick')}
+/>
+```
+
+## LeftTop
+
+```jsx
+<Popover
+  intro={intro}
+  heading={heading}
+  message={message}
+  acknowledge={acknowledge}
+  variant={popoverVariant.leftTop}
+  introOnClick={action('introOnClick')}
+  acknowledgeOnClick={action('acknowledgeOnClick')}
+/>
+```
+
+## Right
+
+```jsx
+<Popover
+  intro={intro}
+  heading={heading}
+  message={message}
+  acknowledge={acknowledge}
+  variant={popoverVariant.right}
+  introOnClick={action('introOnClick')}
+  acknowledgeOnClick={action('acknowledgeOnClick')}
+/>
+```
+
+## RightBottom
+
+```jsx
+<Popover
+  intro={intro}
+  heading={heading}
+  message={message}
+  acknowledge={acknowledge}
+  variant={popoverVariant.rightBottom}
+  introOnClick={action('introOnClick')}
+  acknowledgeOnClick={action('acknowledgeOnClick')}
+/>
+```
+
+## RightTop
+
+```jsx
+<Popover
+  intro={intro}
+  heading={heading}
+  message={message}
+  acknowledge={acknowledge}
+  variant={popoverVariant.rightTop}
+  introOnClick={action('introOnClick')}
+  acknowledgeOnClick={action('acknowledgeOnClick')}
+/>
+```
+
+## TopLeft
+
+```jsx
+<Popover
+  intro={intro}
+  heading={heading}
+  message={message}
+  acknowledge={acknowledge}
+  variant={popoverVariant.topLeft}
+  introOnClick={action('introOnClick')}
+  acknowledgeOnClick={action('acknowledgeOnClick')}
+/>
+```
+
+## TopRight
+
+```jsx
+<Popover
+  intro={intro}
+  heading={heading}
+  message={message}
+  acknowledge={acknowledge}
+  variant={popoverVariant.topRight}
+  introOnClick={action('introOnClick')}
+  acknowledgeOnClick={action('acknowledgeOnClick')}
+/>
+```

package/build/primer/Popover/Popover.prop.ts

@@ -0,0 +1,49 @@
+export const popoverVariant = {
+  default: 'default',
+  bottom: 'bottom',
+  bottomRight: 'bottomRight',
+  bottomLeft: 'bottomLeft',
+  left: 'left',
+  leftBottom: 'leftBottom',
+  leftTop: 'leftTop',
+  right: 'right',
+  rightBottom: 'rightBottom',
+  rightTop: 'rightTop',
+  topLeft: 'topLeft',
+  topRight: 'topRight',
+}
+
+export const popoverSize = {
+  normal: 'normal',
+  large: 'large',
+}
+
+export const defaultProps = {
+  className: null,
+  variant: popoverVariant.default,
+  size: popoverSize.normal,
+}
+
+export interface PopoverProps {
+  className?: string
+  variant?:
+    | typeof popoverVariant.default
+    | typeof popoverVariant.bottom
+    | typeof popoverVariant.bottomRight
+    | typeof popoverVariant.bottomLeft
+    | typeof popoverVariant.left
+    | typeof popoverVariant.leftBottom
+    | typeof popoverVariant.leftTop
+    | typeof popoverVariant.right
+    | typeof popoverVariant.rightBottom
+    | typeof popoverVariant.rightTop
+    | typeof popoverVariant.topLeft
+    | typeof popoverVariant.topRight
+  size?: typeof popoverSize.normal | typeof popoverSize.large
+  intro: string
+  heading: string
+  message: string
+  acknowledge: string
+  introOnClick: (value) => void
+  acknowledgeOnClick: (value) => void
+}

package/build/primer/Popover/Popover.tsx

@@ -0,0 +1,80 @@
+import cx from 'classnames'
+import boxShadowStyles from '@papillonarts/css/build/primer/utilities/box-shadow.scss'
+import layoutStyles from '@papillonarts/css/build/primer/utilities/layout.scss'
+import marginStyles from '@papillonarts/css/build/primer/utilities/margin.scss'
+import paddingStyles from '@papillonarts/css/build/primer/utilities/padding.scss'
+import typographyStyles from '@papillonarts/css/build/primer/utilities/typography.scss'
+import boxStyles from '../Box/box.scss'
+import { PopoverProps, defaultProps, popoverVariant, popoverSize } from './Popover.prop'
+import styles from './Popover.scss'
+import { Button, buttonVariant } from '../Button'
+
+export function Popover({
+  className = defaultProps.className,
+  variant = defaultProps.variant,
+  size = defaultProps.size,
+  intro,
+  heading,
+  message,
+  acknowledge,
+  introOnClick,
+  acknowledgeOnClick,
+}: PopoverProps) {
+  return (
+    <div
+      className={cx(className, layoutStyles['position-relative'], {
+        [typographyStyles['text-center']]: variant === popoverVariant.default || variant === popoverVariant.bottom,
+        [cx(typographyStyles['text-right'], paddingStyles['pr-2'])]: variant === popoverVariant.bottomRight,
+      })}
+    >
+      {variant === popoverVariant.default && <Button variant={buttonVariant.primary} text={intro} onClick={introOnClick} />}
+      <div
+        // @ts-ignore
+        className={
+          (cx(styles.Popover, layoutStyles['position-relative']),
+          {
+            [cx(layoutStyles['right-0'], layoutStyles['left-0'])]: variant === popoverVariant.default,
+            [paddingStyles['pl-2']]: variant === popoverVariant.bottomLeft,
+          })
+        }
+      >
+        <div
+          className={cx(
+            styles['Popover-message'],
+            typographyStyles['text-left'],
+            paddingStyles['p-4'],
+            boxStyles.Box,
+            boxShadowStyles['box-shadow-large'],
+            {
+              [cx(marginStyles['mx-auto'], marginStyles['mt-2'])]: variant === popoverVariant.default,
+              [cx(styles['Popover-message--bottom'], marginStyles['mx-auto'], marginStyles['mb-2'])]: variant === popoverVariant.bottom,
+              [cx(styles['Popover-message--bottom-right'], marginStyles['mb-2'])]: variant === popoverVariant.bottomRight,
+              [cx(styles['Popover-message--bottom-left'], marginStyles['mb-2'])]: variant === popoverVariant.bottomLeft,
+              [styles['Popover-message--left']]: variant === popoverVariant.left,
+              [styles['Popover-message--left-bottom']]: variant === popoverVariant.leftBottom,
+              [styles['Popover-message--left-top']]: variant === popoverVariant.leftTop,
+              [styles['Popover-message--right']]: variant === popoverVariant.right,
+              [styles['Popover-message--right-bottom']]: variant === popoverVariant.rightBottom,
+              [styles['Popover-message--right-top']]: variant === popoverVariant.rightTop,
+              [styles['Popover-message--top-left']]: variant === popoverVariant.topLeft,
+              [styles['Popover-message--top-right']]: variant === popoverVariant.topRight,
+              [styles['Popover-message--large']]: size === popoverSize.large,
+            },
+          )}
+        >
+          <h4 className={marginStyles['mb-2']}>{heading}</h4>
+          <p>{message}</p>
+          <Button
+            className={cx(marginStyles['mt-2'], typographyStyles['text-bold'])}
+            text={acknowledge}
+            variant={buttonVariant.outline}
+            onClick={acknowledgeOnClick}
+          />
+        </div>
+      </div>
+      {(variant === popoverVariant.bottom || variant === popoverVariant.bottomRight || variant === popoverVariant.bottomLeft) && (
+        <Button variant={buttonVariant.primary} text={intro} onClick={introOnClick} />
+      )}
+    </div>
+  )
+}