@papillonarts/components 0.7.0 → 0.9.0

package/build/primer/SelectMenu/SelectMenu.tsx

@@ -0,0 +1,68 @@
+import cx from 'classnames'
+import { v1 as uuidv1 } from 'uuid'
+import { getIndexItems, getIndexItemsWithSelected } from '@papillonarts/library/array'
+import { useRef, useState } from '@papillonarts/library/hooks'
+import utilityStyles from '@papillonarts/css/build/primer/utilities/margin.scss'
+import detailsStyles from '@papillonarts/css/build/primer/utilities/details.scss'
+import { SelectMenuProps, defaultProps } from './SelectMenu.prop'
+import styles from './SelectMenu.scss'
+import buttonStyles from '../Button/Button.scss'
+import { Icon, iconSize } from '../Icon'
+
+export function SelectMenu({
+  className = defaultProps.className,
+  summary,
+  icon,
+  title = defaultProps.title,
+  ariaAttr,
+  items,
+  onClick,
+}: SelectMenuProps) {
+  const [indexItems, setIndexItems] = useState(getIndexItems(items))
+  const { haspopup } = ariaAttr
+  const details = useRef(null)
+
+  return (
+    <details ref={details} className={cx(className, detailsStyles['details-reset'], detailsStyles['details-overlay'])}>
+      <summary className={cx(buttonStyles.btn, buttonStyles['btn-outline'])} aria-haspopup={haspopup}>
+        {summary} <Icon className={cx(utilityStyles['ml-2'])} icon={icon} size={iconSize.small} />
+      </summary>
+      <div className={styles.SelectMenu}>
+        <div className={styles['SelectMenu-modal']}>
+          {title && (
+            <header className={styles['SelectMenu-header']}>
+              <h3 className={styles['SelectMenu-title']}>{title}</h3>
+              <button className={styles['SelectMenu-closeButton']} type="button" />
+            </header>
+          )}
+          <div className={styles['SelectMenu-list']}>
+            {indexItems.map((indexItem) => {
+              const { text } = indexItem
+
+              return (
+                <button
+                  type="button"
+                  key={uuidv1()}
+                  onClick={(e) => {
+                    e.preventDefault()
+                    const newIndexItems = getIndexItemsWithSelected(indexItems, indexItem)
+                    setIndexItems(newIndexItems)
+                    onClick({
+                      ariaAttr,
+                      items: newIndexItems.map((newIndexItem) => (({ text, isSelected }) => ({ text, isSelected }))(newIndexItem)), // eslint-disable-line
+                    })
+                    details.current.removeAttribute('open')
+                  }}
+                  className={styles['SelectMenu-item']}
+                  role="menuitem"
+                >
+                  {text}
+                </button>
+              )
+            })}
+          </div>
+        </div>
+      </div>
+    </details>
+  )
+}

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

@@ -0,0 +1,50 @@
+import { action } from 'storybook/actions'
+import { withTests } from '@storybook/addon-jest'
+import { iconName } from '../../Icon/Icon.prop'
+import results from '../../../../../../.jest-test-results.json'
+
+const SelectMenu =
+  process.env.NODE_ENV === 'develop' || process.env.NODE_ENV === 'test'
+    ? require('../../../index').primer.SelectMenu
+    : require('../../../../build').primer.SelectMenu
+
+export default {
+  title: 'Primer/Molecule/SelectMenu',
+  component: SelectMenu,
+  decorators: [withTests({ results })],
+  parameters: { jest: ['SelectMenu.int.test.js'] },
+  excludeStories: ['summary', 'title', 'ariaAttr', 'items', 'custom'],
+}
+
+export const summary = 'Choose an item'
+
+export const title = 'Title'
+
+export const ariaAttr = {
+  haspopup: true,
+  current: 'page',
+}
+
+export const items = [
+  { text: 'Item 1', isSelected: true },
+  { text: 'Item 2', isSelected: false },
+  { text: 'Item 3', isSelected: false },
+  { text: 'Item 4', isSelected: false },
+]
+
+export function custom(onClick) {
+  return <SelectMenu summary={summary} icon={iconName.ChevronDown16} title={title} ariaAttr={ariaAttr} items={items} onClick={onClick} />
+}
+
+export function regular() {
+  return (
+    <SelectMenu
+      summary={summary}
+      icon={iconName.ChevronDown16}
+      title={title}
+      ariaAttr={ariaAttr}
+      items={items}
+      onClick={action('onClick')}
+    />
+  )
+}

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

@@ -0,0 +1,56 @@
+import { items, regular } from './SelectMenu.int.story'
+
+jest.mock('@papillonarts/library/array', () => ({
+  getIndexItems: () => {},
+  getIndexItemsWithSelected: () => {},
+}))
+
+jest.mock('@papillonarts/library/hooks', () => ({
+  useRef: () => {},
+  useState: () => {},
+}))
+
+const libraryArrayMockObject = require('@papillonarts/library/array')
+const libraryHooksMockObject = require('@papillonarts/library/hooks')
+
+describe('<SelectMenu />', () => {
+  let 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 },
+  ]
+
+  const setIndexItemsMockFn = jest.fn((indexItems) => {
+    indexItemsDataObject = indexItems
+  })
+
+  beforeEach(() => {
+    jest.spyOn(libraryArrayMockObject, 'getIndexItems').mockReturnValue(indexItemsDataObject)
+
+    jest.spyOn(libraryArrayMockObject, 'getIndexItemsWithSelected').mockReturnValue(newIndexItemsWithSelectedDataObject)
+
+    jest.spyOn(libraryHooksMockObject, 'useState').mockImplementation(() => [indexItemsDataObject, setIndexItemsMockFn])
+
+    jest.spyOn(libraryHooksMockObject, 'useRef').mockImplementation(() => ({
+      current: {
+        removeAttribute: () => {},
+      },
+    }))
+  })
+
+  afterEach(() => jest.clearAllMocks())
+
+  describe('Render', () => {
+    test('must match regular()', () => {
+      expect(global.renderToJSON(regular())).toMatchSnapshot()
+    })
+  })
+})

package/build/primer/SelectMenu/index.ts

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

package/build/primer/Subhead/Subhead.mdx

@@ -0,0 +1,20 @@
+# Subhead
+
+> The basic Subhead consists of a .Subhead container, which has a light gray bottom border. Use .Subhead-heading for the heading itself. It's an `<h2>` sized heading with normal font-weight.
+> Use a heading element whenever possible as they can be used as navigation for assistive technologies, and avoid skipping levels.
+
+# Variants
+
+> - Plain, Spacious
+
+## Plain
+
+```jsx
+<Subhead heading="Plain subhead" />
+```
+
+## Spacious
+
+```jsx
+<Subhead heading="Spacious subhead" isSpacious={true} />
+```

package/build/primer/Subhead/Subhead.prop.ts

@@ -0,0 +1,10 @@
+export const defaultProps = {
+  className: null,
+  isSpacious: false,
+}
+
+export interface SubheadProps {
+  className?: string
+  heading: string
+  isSpacious?: boolean
+}

package/build/primer/Subhead/Subhead.scss

@@ -1,7 +1,7 @@
 // @import '@primer/view-components/app/components/primer/beta/subhead';
-@import '@papillonbits/css/build/primer/support/variables/layout.scss';
-@import '@papillonbits/css/build/primer/support/variables/misc.scss';
-@import '@papillonbits/css/build/primer/support/variables/typography.scss';
+@import '@papillonarts/css/build/primer/support/variables/layout.scss';
+@import '@papillonarts/css/build/primer/support/variables/misc.scss';
+@import '@papillonarts/css/build/primer/support/variables/typography.scss';
 
 // Subhead styles
 .Subhead {

package/build/primer/Subhead/Subhead.tsx

@@ -0,0 +1,15 @@
+import cx from 'classnames'
+import { SubheadProps, defaultProps } from './Subhead.prop'
+import styles from './Subhead.scss'
+
+export function Subhead({ className = defaultProps.className, heading, isSpacious = defaultProps.isSpacious }: SubheadProps) {
+  return (
+    <div
+      className={cx(className, styles.Subhead, {
+        [styles['Subhead--spacious']]: isSpacious === true,
+      })}
+    >
+      <div className={styles['Subhead-heading']}>{heading}</div>
+    </div>
+  )
+}

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

@@ -0,0 +1,23 @@
+import { withTests } from '@storybook/addon-jest'
+import results from '../../../../../../.jest-test-results.json'
+
+const Subhead =
+  process.env.NODE_ENV === 'develop' || process.env.NODE_ENV === 'test'
+    ? require('../../../index').primer.Subhead
+    : require('../../../../build').primer.Subhead
+
+export default {
+  title: 'Primer/Atom/Subhead',
+  component: Subhead,
+  decorators: [withTests({ results })],
+  parameters: { jest: ['Subhead.int.test.js'] },
+  excludeStories: ['custom'],
+}
+
+export function plain() {
+  return <Subhead heading="Plain subhead" />
+}
+
+export function spacious() {
+  return <Subhead heading="Spacious subhead" isSpacious={true} />
+}

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

@@ -0,0 +1,13 @@
+import { plain, spacious } from './Subhead.int.story'
+
+describe('<Subhead />', () => {
+  describe('Render', () => {
+    test('must match plain()', () => {
+      expect(global.renderToJSON(plain())).toMatchSnapshot()
+    })
+
+    test('must match spacious()', () => {
+      expect(global.renderToJSON(spacious())).toMatchSnapshot()
+    })
+  })
+})

package/build/primer/Subhead/index.ts

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

package/build/primer/Toast/Toast.prop.ts

@@ -0,0 +1,21 @@
+export const toastVariant = {
+  info: 'info',
+  success: 'success',
+  warning: 'warning',
+  error: 'error',
+}
+
+export const defaultProps = {
+  className: null,
+  variant: toastVariant.info,
+  isDismissable: false,
+  onClick: () => {},
+}
+
+export interface ToastProps {
+  className?: string
+  variant?: typeof toastVariant.info | typeof toastVariant.success | typeof toastVariant.warning | typeof toastVariant.error
+  text: string
+  isDismissable?: boolean
+  onClick?: (value) => void
+}

package/build/primer/Toast/Toast.scss

@@ -1,6 +1,6 @@
-@import '@papillonbits/css/build/primer/support/variables/layout.scss';
-@import '@papillonbits/css/build/primer/support/variables/misc.scss';
-@import '@papillonbits/css/build/primer/support/mixins/layout.scss';
+@import '@papillonarts/css/build/primer/support/variables/layout.scss';
+@import '@papillonarts/css/build/primer/support/variables/misc.scss';
+@import '@papillonarts/css/build/primer/support/mixins/layout.scss';
 
 // stylelint-disable custom-property-pattern
 

package/build/primer/Toast/Toast.tsx

@@ -0,0 +1,38 @@
+import cx from 'classnames'
+import paddingStyles from '@papillonarts/css/build/primer/utilities/padding.scss'
+import { ToastProps, defaultProps, toastVariant } from './Toast.prop'
+import styles from './Toast.scss'
+import { Icon, iconName, iconSize } from '../Icon'
+
+export function Toast({
+  className = defaultProps.className,
+  variant = defaultProps.variant,
+  text,
+  isDismissable = defaultProps.isDismissable,
+  onClick = defaultProps.onClick,
+}: ToastProps) {
+  return (
+    <div className={cx(className, paddingStyles['p-1'])}>
+      <div
+        className={cx(styles.Toast, {
+          [styles['Toast--success']]: variant === toastVariant.success,
+          [styles['Toast--warning']]: variant === toastVariant.warning,
+          [styles['Toast--error']]: variant === toastVariant.error,
+        })}
+      >
+        <span className={styles['Toast-icon']}>
+          {variant === toastVariant.info && <Icon icon={iconName.Info16} />}
+          {variant === toastVariant.success && <Icon icon={iconName.Check16} />}
+          {variant === toastVariant.warning && <Icon icon={iconName.Alert16} />}
+          {variant === toastVariant.error && <Icon icon={iconName.Stop16} />}
+        </span>
+        <span className={styles['Toast-content']}>{text}</span>
+        {isDismissable && (
+          <button type="button" className={styles['Toast-dismissButton']} onClick={onClick}>
+            <Icon icon={iconName.X16} size={iconSize.small} />
+          </button>
+        )}
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,50 @@
+import { action } from 'storybook/actions'
+import { withTests } from '@storybook/addon-jest'
+import { toastVariant } from '../Toast.prop'
+import results from '../../../../../../.jest-test-results.json'
+
+const text = {
+  custom: 'Toast message goes here',
+  info: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.Aenean massa. Cum sociis natoquepenatibus et ma',
+  success: 'Success message goes here',
+  warning: 'Warning message goes here',
+  error: 'Error message goes here',
+  dismissable: 'This toast is dismissable.',
+}
+
+const Toast =
+  process.env.NODE_ENV === 'develop' || process.env.NODE_ENV === 'test'
+    ? require('../../../index').primer.Toast.Toast
+    : require('../../../../build').primer.Toast.Toast
+
+export default {
+  title: 'Primer/Molecule/Toast',
+  component: Toast,
+  decorators: [withTests({ results })],
+  parameters: { jest: ['Toast.int.test.js'] },
+  excludeStories: ['custom'],
+}
+
+export function custom(onClick) {
+  return <Toast text={text.custom} isDismissable={true} onClick={onClick} />
+}
+
+export function info() {
+  return <Toast variant={toastVariant.info} text={text.info} />
+}
+
+export function success() {
+  return <Toast variant={toastVariant.success} text={text.success} />
+}
+
+export function warning() {
+  return <Toast variant={toastVariant.warning} text={text.warning} />
+}
+
+export function error() {
+  return <Toast variant={toastVariant.error} text={text.error} />
+}
+
+export function dismissable() {
+  return <Toast variant={toastVariant.info} text={text.dismissable} isDismissable={true} onClick={action('onClick')} />
+}

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

@@ -0,0 +1,25 @@
+import { info, success, warning, error, dismissable } from './Toast.int.story'
+
+describe('<Button />', () => {
+  describe('Render', () => {
+    test('must match info()', () => {
+      expect(global.renderToJSON(info())).toMatchSnapshot()
+    })
+
+    test('must match success()', () => {
+      expect(global.renderToJSON(success())).toMatchSnapshot()
+    })
+
+    test('must match warning()', () => {
+      expect(global.renderToJSON(warning())).toMatchSnapshot()
+    })
+
+    test('must match error()', () => {
+      expect(global.renderToJSON(error())).toMatchSnapshot()
+    })
+
+    test('must match dismissable()', () => {
+      expect(global.renderToJSON(dismissable())).toMatchSnapshot()
+    })
+  })
+})

package/build/primer/Toast/index.ts

@@ -0,0 +1,2 @@
+export { Toast } from './Toast'
+export { toastVariant } from './Toast.prop'

package/build/primer/index.ts

@@ -0,0 +1,83 @@
+import { Alert, alertVariant } from './Alert'
+import { Breadcrumb, breadcrumbState } from './Breadcrumb'
+import { Blankslate, blankslateVariant } from './Blankslate'
+import { Button, buttonElement, buttonVariant, buttonSize, buttonState, iconAlignment, buttonInputType } from './Button'
+import { Dropdown, dropdownState } from './Dropdown'
+import { ErrorBoundary } from './ErrorBoundary'
+import { Form } from './Form'
+import { Grid } from './Grid'
+import { Icon, iconName, iconSize } from './Icon'
+import { Label } from './Label'
+import { Loader, loaderVariant } from './Loader'
+import { Navigation } from './Navigation'
+import { Pagination } from './Pagination'
+import { Popover, popoverVariant, popoverSize } from './Popover'
+import { Progress, progressVariant } from './Progress'
+import { Select, selectState } from './Select'
+import { SelectMenu } from './SelectMenu'
+import { Subhead } from './Subhead'
+import { Toast, toastVariant } from './Toast'
+
+import '@papillonarts/css/build/primer/index.scss'
+
+export const primer = {
+  Alert: {
+    Alert,
+    alertVariant,
+  },
+  Breadcrumb: {
+    Breadcrumb,
+    breadcrumbState,
+  },
+  Blankslate: {
+    Blankslate,
+    blankslateVariant,
+  },
+  Button: {
+    Button,
+    buttonElement,
+    buttonVariant,
+    buttonSize,
+    buttonState,
+    iconAlignment,
+    buttonInputType,
+  },
+  Dropdown: {
+    Dropdown,
+    dropdownState,
+  },
+  ErrorBoundary,
+  Form,
+  Grid,
+  Icon: {
+    Icon,
+    iconName,
+    iconSize,
+  },
+  Label,
+  Loader: {
+    Loader,
+    loaderVariant,
+  },
+  Navigation,
+  Pagination,
+  Popover: {
+    Popover,
+    popoverVariant,
+    popoverSize,
+  },
+  Progress: {
+    Progress,
+    progressVariant,
+  },
+  Select: {
+    Select,
+    selectState,
+  },
+  SelectMenu,
+  Subhead,
+  Toast: {
+    Toast,
+    toastVariant,
+  },
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@papillonarts/components",
-  "version": "0.7.0",
+  "version": "0.9.0",
   "description": "Papillon Arts Components",
   "homepage": "https://github.com/papillonarts/papillonarts/tree/master/packages/components",
   "repository": {
@@ -29,8 +29,8 @@
     "build-release": "npm run build"
   },
   "dependencies": {
-    "@papillonbits/css": "^1.7.0",
-    "@papillonbits/library": "^1.7.0"
+    "@papillonarts/css": "^0.9.0",
+    "@papillonarts/library": "^0.9.0"
   },
-  "gitHead": "5e6d4750895462f2cb0b1e7840eb0422e98e6043"
+  "gitHead": "584fbedfbea9771d584d15adb3396feb2e9c56b6"
 }

package/build/index.js

@@ -1,12 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "primer", {
-  enumerable: true,
-  get: function get() {
-    return _primer.primer;
-  }
-});
-var _primer = require("./primer");