@papillonarts/components 0.8.0 → 0.9.0

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

@@ -0,0 +1,216 @@
+import { action } from 'storybook/actions'
+import { withTests } from '@storybook/addon-jest'
+import { popoverVariant, popoverSize } from '../Popover.prop'
+import results from '../../../../../../.jest-test-results.json'
+
+const Popover =
+  process.env.NODE_ENV === 'develop' || process.env.NODE_ENV === 'test'
+    ? require('../../../index').primer.Popover.Popover
+    : require('../../../../build').primer.Popover.Popover
+
+export default {
+  title: 'Primer/Molecule/Popover',
+  component: Popover,
+  decorators: [withTests({ results })],
+  parameters: { jest: ['Popover.int.test.js'] },
+  excludeStories: ['custom'],
+}
+
+const intro = 'UI'
+const heading = 'Popover heading'
+const message = 'Message about this particular piece of UI.'
+const acknowledge = 'Got it!'
+
+export function custom(introOnClick, acknowledgeOnClick) {
+  return (
+    <Popover
+      intro={intro}
+      heading={heading}
+      message={message}
+      acknowledge={acknowledge}
+      introOnClick={introOnClick}
+      acknowledgeOnClick={acknowledgeOnClick}
+    />
+  )
+}
+
+export function regular() {
+  return (
+    <Popover
+      intro={intro}
+      heading={heading}
+      message={message}
+      acknowledge={acknowledge}
+      introOnClick={action('introOnClick')}
+      acknowledgeOnClick={action('acknowledgeOnClick')}
+    />
+  )
+}
+
+export function regularLarge() {
+  return (
+    <Popover
+      intro={intro}
+      heading={heading}
+      message={message}
+      acknowledge={acknowledge}
+      size={popoverSize.large}
+      introOnClick={action('introOnClick')}
+      acknowledgeOnClick={action('acknowledgeOnClick')}
+    />
+  )
+}
+
+export function bottom() {
+  return (
+    <Popover
+      intro={intro}
+      heading={heading}
+      message={message}
+      acknowledge={acknowledge}
+      variant={popoverVariant.bottom}
+      introOnClick={action('introOnClick')}
+      acknowledgeOnClick={action('acknowledgeOnClick')}
+    />
+  )
+}
+
+export function bottomRight() {
+  return (
+    <Popover
+      intro={intro}
+      heading={heading}
+      message={message}
+      acknowledge={acknowledge}
+      variant={popoverVariant.bottomRight}
+      introOnClick={action('introOnClick')}
+      acknowledgeOnClick={action('acknowledgeOnClick')}
+    />
+  )
+}
+
+export function bottomLeft() {
+  return (
+    <Popover
+      intro={intro}
+      heading={heading}
+      message={message}
+      acknowledge={acknowledge}
+      variant={popoverVariant.bottomLeft}
+      introOnClick={action('introOnClick')}
+      acknowledgeOnClick={action('acknowledgeOnClick')}
+    />
+  )
+}
+
+export function left() {
+  return (
+    <Popover
+      intro={intro}
+      heading={heading}
+      message={message}
+      acknowledge={acknowledge}
+      variant={popoverVariant.left}
+      introOnClick={action('introOnClick')}
+      acknowledgeOnClick={action('acknowledgeOnClick')}
+    />
+  )
+}
+
+export function leftBottom() {
+  return (
+    <Popover
+      intro={intro}
+      heading={heading}
+      message={message}
+      acknowledge={acknowledge}
+      variant={popoverVariant.leftBottom}
+      introOnClick={action('introOnClick')}
+      acknowledgeOnClick={action('acknowledgeOnClick')}
+    />
+  )
+}
+
+export function leftTop() {
+  return (
+    <Popover
+      intro={intro}
+      heading={heading}
+      message={message}
+      acknowledge={acknowledge}
+      variant={popoverVariant.leftTop}
+      introOnClick={action('introOnClick')}
+      acknowledgeOnClick={action('acknowledgeOnClick')}
+    />
+  )
+}
+
+export function right() {
+  return (
+    <Popover
+      intro={intro}
+      heading={heading}
+      message={message}
+      acknowledge={acknowledge}
+      variant={popoverVariant.right}
+      introOnClick={action('introOnClick')}
+      acknowledgeOnClick={action('acknowledgeOnClick')}
+    />
+  )
+}
+
+export function rightBottom() {
+  return (
+    <Popover
+      intro={intro}
+      heading={heading}
+      message={message}
+      acknowledge={acknowledge}
+      variant={popoverVariant.rightBottom}
+      introOnClick={action('introOnClick')}
+      acknowledgeOnClick={action('acknowledgeOnClick')}
+    />
+  )
+}
+
+export function rightTop() {
+  return (
+    <Popover
+      intro={intro}
+      heading={heading}
+      message={message}
+      acknowledge={acknowledge}
+      variant={popoverVariant.rightTop}
+      introOnClick={action('introOnClick')}
+      acknowledgeOnClick={action('acknowledgeOnClick')}
+    />
+  )
+}
+
+export function topLeft() {
+  return (
+    <Popover
+      intro={intro}
+      heading={heading}
+      message={message}
+      acknowledge={acknowledge}
+      variant={popoverVariant.topLeft}
+      introOnClick={action('introOnClick')}
+      acknowledgeOnClick={action('acknowledgeOnClick')}
+    />
+  )
+}
+
+export function topRight() {
+  return (
+    <Popover
+      intro={intro}
+      heading={heading}
+      message={message}
+      acknowledge={acknowledge}
+      variant={popoverVariant.topRight}
+      introOnClick={action('introOnClick')}
+      acknowledgeOnClick={action('acknowledgeOnClick')}
+    />
+  )
+}

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

@@ -0,0 +1,71 @@
+import {
+  regular,
+  regularLarge,
+  bottom,
+  bottomRight,
+  bottomLeft,
+  left,
+  leftBottom,
+  leftTop,
+  right,
+  rightBottom,
+  rightTop,
+  topLeft,
+  topRight,
+} from './Popover.int.story'
+
+describe('<Popover />', () => {
+  describe('Render', () => {
+    test('must match regular()', () => {
+      expect(global.renderToJSON(regular())).toMatchSnapshot()
+    })
+
+    test('must match regularLarge()', () => {
+      expect(global.renderToJSON(regularLarge())).toMatchSnapshot()
+    })
+
+    test('must match bottom()', () => {
+      expect(global.renderToJSON(bottom())).toMatchSnapshot()
+    })
+
+    test('must match bottomRight()', () => {
+      expect(global.renderToJSON(bottomRight())).toMatchSnapshot()
+    })
+
+    test('must match bottomLeft()', () => {
+      expect(global.renderToJSON(bottomLeft())).toMatchSnapshot()
+    })
+
+    test('must match left()', () => {
+      expect(global.renderToJSON(left())).toMatchSnapshot()
+    })
+
+    test('must match leftBottom()', () => {
+      expect(global.renderToJSON(leftBottom())).toMatchSnapshot()
+    })
+
+    test('must match leftTop()', () => {
+      expect(global.renderToJSON(leftTop())).toMatchSnapshot()
+    })
+
+    test('must match right()', () => {
+      expect(global.renderToJSON(right())).toMatchSnapshot()
+    })
+
+    test('must match rightBottom()', () => {
+      expect(global.renderToJSON(rightBottom())).toMatchSnapshot()
+    })
+
+    test('must match rightTop()', () => {
+      expect(global.renderToJSON(rightTop())).toMatchSnapshot()
+    })
+
+    test('must match topLeft()', () => {
+      expect(global.renderToJSON(topLeft())).toMatchSnapshot()
+    })
+
+    test('must match topRight()', () => {
+      expect(global.renderToJSON(topRight())).toMatchSnapshot()
+    })
+  })
+})

package/build/primer/Popover/index.ts

@@ -0,0 +1,2 @@
+export { Popover } from './Popover'
+export { popoverVariant, popoverSize } from './Popover.prop'

package/build/primer/Progress/Progress.mdx

@@ -0,0 +1,31 @@
+# Progress
+
+> Use progress components to visualize task completion. The Progress class adds a background color and aligns its children horizontally with flexbox. The children (Progress-item) should be individually colored with background utilities and sized with inline width styles in percentages. Overflow is hidden, so children that overflow will be clipped.
+
+# Variants
+
+> - Normal, Large, Small
+
+## Normal
+
+> Normal progress bars have default height.
+
+```jsx
+<Progress variant={progressVariant.normal} percentage={50} />
+```
+
+## Large
+
+> Large progress bars are slightly taller than the default.
+
+```jsx
+<Progress variant={progressVariant.large} percentage={50} />
+```
+
+## Small
+
+> Small progress bars are shorter than the default.
+
+```jsx
+<Progress variant={progressVariant.small} percentage={50} />
+```

package/build/primer/Progress/Progress.prop.ts

@@ -0,0 +1,16 @@
+export const progressVariant = {
+  small: 'small',
+  normal: 'normal',
+  large: 'large',
+}
+
+export const defaultProps = {
+  className: null,
+  variant: progressVariant.normal,
+}
+
+export interface ProgressProps {
+  className?: string
+  variant?: typeof progressVariant.small | typeof progressVariant.normal | typeof progressVariant.large
+  percentage: number
+}

package/build/primer/Progress/Progress.tsx

@@ -0,0 +1,19 @@
+import cx from 'classnames'
+import colorStyles from '@papillonarts/css/build/primer/utilities/colors.scss'
+import { ProgressProps, defaultProps, progressVariant } from './Progress.prop'
+import styles from './Progress.scss'
+
+export function Progress({ className = defaultProps.className, variant = defaultProps.variant, percentage }: ProgressProps) {
+  const percentageStyle = { width: `${percentage}%` }
+
+  return (
+    <span
+      className={cx(className, styles.Progress, {
+        [styles['Progress--large']]: variant === progressVariant.large,
+        [styles['Progress--small']]: (variant === progressVariant.small) === true,
+      })}
+    >
+      <span className={cx(styles['Progress-item'], colorStyles['bg-green'])} style={percentageStyle} />
+    </span>
+  )
+}

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

@@ -0,0 +1,28 @@
+import { withTests } from '@storybook/addon-jest'
+import { progressVariant } from '../Progress.prop'
+import results from '../../../../../../.jest-test-results.json'
+
+const Progress =
+  process.env.NODE_ENV === 'develop' || process.env.NODE_ENV === 'test'
+    ? require('../../../index').primer.Progress.Progress
+    : require('../../../../build').primer.Progress.Progress
+
+export default {
+  title: 'Primer/Atom/Progress',
+  component: Progress,
+  decorators: [withTests({ results })],
+  parameters: { jest: ['Progress.int.test.js'] },
+  excludeStories: ['custom'],
+}
+
+export function normal() {
+  return <Progress variant={progressVariant.normal} percentage={50} />
+}
+
+export function large() {
+  return <Progress variant={progressVariant.large} percentage={50} />
+}
+
+export function small() {
+  return <Progress variant={progressVariant.small} percentage={50} />
+}

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

@@ -0,0 +1,17 @@
+import { normal, large, small } from './Progress.int.story'
+
+describe('<Progress />', () => {
+  describe('Render', () => {
+    test('must match normal()', () => {
+      expect(global.renderToJSON(normal())).toMatchSnapshot()
+    })
+
+    test('must match large()', () => {
+      expect(global.renderToJSON(large())).toMatchSnapshot()
+    })
+
+    test('must match small()', () => {
+      expect(global.renderToJSON(small())).toMatchSnapshot()
+    })
+  })
+})

package/build/primer/Progress/index.ts

@@ -0,0 +1,2 @@
+export { Progress } from './Progress'
+export { progressVariant } from './Progress.prop'

package/build/primer/Select/Select.mdx

@@ -0,0 +1,19 @@
+# Select
+
+> Selects are lightweight context menus for housing navigation and actions. They're great for instances where you don't need the full power (and code) of the select menu.
+
+# Variants
+
+> - Regular, Inactive
+
+## Regular
+
+```jsx
+<Select selectedText={selectedText} items={items} onChange={action('onChange')} />
+```
+
+## Inactive
+
+```jsx
+<Select selectedText={selectedText} items={items} onChange={action('onChange')} state={selectState.inactive} />
+```

package/build/primer/Select/Select.prop.ts

@@ -0,0 +1,24 @@
+export const selectState = {
+  active: 'active',
+  inactive: 'inactive',
+}
+
+export const defaultProps = {
+  id: null,
+  className: null,
+  state: selectState.active,
+}
+
+export interface ItemType {
+  text: string
+  isSelected: boolean
+}
+
+export interface SelectProps {
+  id?: string
+  className?: string
+  selectedText: string
+  items: ItemType[]
+  onChange: (value) => void
+  state?: typeof selectState.active | typeof selectState.inactive
+}

package/build/primer/Select/Select.tsx

@@ -0,0 +1,58 @@
+import cx from 'classnames'
+import { v1 as uuidv1 } from 'uuid'
+import layoutStyles from '@papillonarts/css/build/primer/utilities/layout.scss'
+import { getIndexItems, getIndexItemsWithSelected } from '@papillonarts/library/array'
+import { SelectProps, defaultProps, selectState } from './Select.prop'
+import styles from './Select.scss'
+
+export function Select({
+  id = defaultProps.id,
+  className = defaultProps.className,
+  selectedText,
+  items,
+  onChange,
+  state = defaultProps.state,
+}: SelectProps) {
+  const indexItems = getIndexItems(items)
+
+  const handleOnChange = (event) => {
+    const indexItem = indexItems.find((item) => item.text === event.target.value)
+    const newIndexItems = getIndexItemsWithSelected(indexItems, indexItem)
+
+    onChange({
+      selectedText: indexItem.text,
+      items: newIndexItems.map((newIndexItem) =>
+        (({ text: newIndexItemText, isSelected: newIndexItemIsSelected }) => ({
+          text: newIndexItemText,
+          isSelected: newIndexItemIsSelected,
+        }))(newIndexItem),
+      ),
+    })
+  }
+
+  return (
+    <div className={cx(className, styles.select)}>
+      <select
+        id={id}
+        // @ts-ignore
+        readOnly={false}
+        onChange={handleOnChange}
+        className={cx(styles['select-menu'], layoutStyles['width-full'], {
+          [styles['select-inactive']]: state === selectState.inactive,
+        })}
+        value={selectedText}
+      >
+        {items &&
+          indexItems.map((indexItem) => {
+            const { text, isSelected } = indexItem
+
+            return (
+              <option key={uuidv1()} value={text} selected={isSelected}>
+                {text}
+              </option>
+            )
+          })}
+      </select>
+    </div>
+  )
+}

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

@@ -0,0 +1,38 @@
+import { action } from 'storybook/actions'
+import { withTests } from '@storybook/addon-jest'
+import { selectState } from '../Select.prop'
+import results from '../../../../../../.jest-test-results.json'
+
+const Select =
+  process.env.NODE_ENV === 'develop' || process.env.NODE_ENV === 'test'
+    ? require('../../../index').primer.Select.Select
+    : require('../../../../build').primer.Select.Select
+
+export default {
+  title: 'Primer/Atom/Select',
+  component: Select,
+  decorators: [withTests({ results })],
+  parameters: { jest: ['Select.int.test.js'] },
+  excludeStories: ['selectedText', 'items', 'custom'],
+}
+
+export const selectedText = 'Select'
+
+export const items = [
+  { text: 'Select Item 1', isSelected: true },
+  { text: 'Select Item 2', isSelected: false },
+  { text: 'Select Item 3', isSelected: false },
+  { text: 'Select Item 4', isSelected: false },
+]
+
+export function custom(onChange) {
+  return <Select selectedText={selectedText} items={items} onChange={onChange} />
+}
+
+export function regular() {
+  return <Select selectedText={selectedText} items={items} onChange={action('onChange')} />
+}
+
+export function inactive() {
+  return <Select selectedText={selectedText} items={items} onChange={action('onChange')} state={selectState.inactive} />
+}

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

@@ -0,0 +1,42 @@
+import { items, regular, inactive } from './Select.int.story'
+
+jest.mock('@papillonarts/library/array', () => ({
+  getIndexItems: () => {},
+  getIndexItemsWithSelected: () => {},
+}))
+
+const libraryArrayMockObject = require('@papillonarts/library/array')
+
+describe('<Select />', () => {
+  const indexItemsDataObject = [
+    { ...items[0], index: 0 },
+    { ...items[1], index: 1 },
+    { ...items[2], index: 2 },
+    { ...items[3], index: 3 },
+  ]
+
+  const newIndexItemsWithSelectedDataObject = [
+    { ...items[0], index: 0, isSelected: true },
+    { ...items[1], index: 1, isSelected: false },
+    { ...items[2], index: 2, isSelected: false },
+    { ...items[3], index: 3, isSelected: false },
+  ]
+
+  beforeEach(() => {
+    jest.spyOn(libraryArrayMockObject, 'getIndexItems').mockReturnValue(indexItemsDataObject)
+
+    jest.spyOn(libraryArrayMockObject, 'getIndexItemsWithSelected').mockReturnValue(newIndexItemsWithSelectedDataObject)
+  })
+
+  afterEach(() => jest.clearAllMocks())
+
+  describe('Render', () => {
+    test('must match regular()', () => {
+      expect(global.renderToJSON(regular())).toMatchSnapshot()
+    })
+
+    test('must match inacive()', () => {
+      expect(global.renderToJSON(inactive())).toMatchSnapshot()
+    })
+  })
+})

package/build/primer/Select/index.ts

@@ -0,0 +1,2 @@
+export { Select } from './Select'
+export { selectState } from './Select.prop'

package/build/primer/SelectMenu/SelectMenu.mdx

@@ -0,0 +1,13 @@
+# SelectMenu
+
+> The SelectMenu component provides advanced support for navigation, filtering, and more. Any menu can make use of JavaScript-enabled live filtering, selected states, tabbed lists, and keyboard navigation with a bit of markup.
+
+# Variants
+
+> - Default
+
+## Default
+
+```jsx
+<SelectMenu summary={summary} icon={iconName.ChevronDown16} title={title} ariaAttr={ariaAttr} items={items} onClick={action('onClick')} />
+```

package/build/primer/SelectMenu/SelectMenu.prop.ts

@@ -0,0 +1,25 @@
+import { IconNameType } from '../Icon/Icon.prop'
+
+export const defaultProps = {
+  className: null,
+  title: null,
+}
+
+export interface AriaAttrType {
+  haspopup: boolean
+}
+
+export interface ItemType {
+  text: string
+  isSelected: boolean
+}
+
+export interface SelectMenuProps {
+  className?: string
+  summary: string
+  icon: IconNameType
+  title?: string
+  ariaAttr: AriaAttrType
+  items: ItemType[]
+  onClick: (value) => void
+}