@papillonarts/components 0.7.0 → 0.9.0

package/build/primer/Icon/Icon.tsx

@@ -0,0 +1,49 @@
+import { IconProps, defaultProps, iconSize, iconAlign } from './Icon.prop'
+import { iconComponents } from './Icon.part'
+
+const defaultSize = [16, 16]
+
+export function Icon({
+  className = defaultProps.className,
+  ariaLabel = defaultProps.ariaLabel,
+  icon,
+  height = defaultProps.height,
+  width = defaultProps.width,
+  size = defaultProps.size,
+  fill = defaultProps.fill,
+  verticalAlign = defaultProps.verticalAlign,
+  ...otherProps
+}: IconProps) {
+  const widthHeight = defaultSize
+
+  const attrs = {
+    className,
+    'aria-hidden': ariaLabel ? 'false' : 'true',
+    'aria-label': ariaLabel,
+    height,
+    role: 'img',
+    viewBox: [0, 0, ...widthHeight].join(' '),
+    style: {},
+  }
+
+  if (width && height) {
+    Object.assign(attrs, { width, height })
+  } else {
+    const dims = { width: widthHeight[0], height: widthHeight[1] }
+    const given = width ? 'width' : 'height'
+    const computed = given === 'width' ? 'height' : 'width'
+    attrs[given] = width || height || iconSize[size] || size
+    attrs[computed] = attrs[given] * (dims[computed] / dims[given])
+  }
+
+  attrs.style = {
+    display: 'inline-block',
+    fill,
+    userSelect: 'none',
+    verticalAlign: iconAlign[verticalAlign] || verticalAlign,
+  }
+
+  const Element = iconComponents[icon]
+
+  return Element != null ? <Element className={className} {...attrs} {...otherProps} /> : null
+}

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

@@ -0,0 +1,58 @@
+import { withTests } from '@storybook/addon-jest'
+import { iconNameKeys, iconNameKeysDefault, iconSizeKeys, iconSizeKeysDefault } from '../Icon.prop'
+import results from '../../../../../../.jest-test-results.json'
+
+const Icon =
+  process.env.NODE_ENV === 'develop' || process.env.NODE_ENV === 'test'
+    ? require('../../../index').primer.Icon.Icon
+    : require('../../../../build').primer.Icon.Icon
+
+export default {
+  title: 'Primer/Atom/Icon',
+  component: Icon,
+  decorators: [withTests({ results })],
+  parameters: { jest: ['Icon.int.test.js'] },
+  argTypes: {
+    className: {
+      control: { type: 'text' },
+      defaultValue: '',
+    },
+    icon: {
+      control: {
+        type: 'select',
+        options: iconNameKeys,
+      },
+      defaultValue: iconNameKeysDefault,
+    },
+    size: {
+      control: {
+        type: 'select',
+        options: iconSizeKeys,
+      },
+      defaultValue: iconSizeKeysDefault,
+    },
+  },
+  excludeStories: ['custom'],
+}
+
+export function regular({ className = '', icon = iconNameKeysDefault, size = iconSizeKeysDefault, ...rest }) {
+  return <Icon className={className} icon={icon} size={size} {...rest} />
+}
+
+export function allIcons() {
+  return (
+    <div
+      style={{
+        columns: '4',
+        width: '800px',
+      }}
+    >
+      {iconNameKeys.map((icon) => (
+        <div key={icon} style={{ padding: '4px', fontSize: '14px', lineHeight: '21px' }}>
+          <Icon icon={icon} style={{ marginRight: '4px', verticalAlign: 'middle' }} />
+          <span style={{ display: 'inline-block', verticalAlign: 'middle' }}>{icon}</span>
+        </div>
+      ))}
+    </div>
+  )
+}

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

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

package/build/primer/Icon/index.ts

@@ -0,0 +1,2 @@
+export { Icon } from './Icon'
+export { iconName, iconSize } from './Icon.prop'

package/build/primer/Label/Label.mdx

@@ -0,0 +1,13 @@
+# Label
+
+> Labels add metadata or indicate status of items and navigational elements. Three different types of labels are available: Labels for adding metadata, States for indicating status, and Counters for showing the count for a number of items.
+
+# Variants
+
+> - Default
+
+## Default
+
+```jsx
+<Label text="default label" />
+```

package/build/primer/Label/Label.prop.ts

@@ -0,0 +1,31 @@
+export const labelVariant = {
+  regular: 'regular',
+  state: 'state',
+  counter: 'counter',
+  issue: 'issue',
+}
+
+export const labelBackgroundColor = {
+  blue: 'blue',
+  red: 'red',
+  green: 'green',
+}
+
+export const labelTextColor = {
+  white: 'white',
+}
+
+export const defaultProps = {
+  className: null,
+  variant: labelVariant.issue,
+  backgroundColor: labelBackgroundColor.blue,
+  textColor: labelTextColor.white,
+}
+
+export interface LabelProps {
+  className?: string
+  text: string
+  variant?: typeof labelVariant.regular | typeof labelVariant.state | typeof labelVariant.counter | typeof labelVariant.issue
+  backgroundColor?: typeof labelBackgroundColor.blue | typeof labelBackgroundColor.red | typeof labelBackgroundColor.green
+  textColor?: typeof labelTextColor.white
+}

package/build/primer/Label/Label.tsx

@@ -0,0 +1,27 @@
+import cx from 'classnames'
+import colorStyles from '@papillonarts/css/build/primer/utilities/colors.scss'
+import { LabelProps, defaultProps, labelVariant, labelBackgroundColor, labelTextColor } from './Label.prop'
+import labelsStyles from './labels.scss'
+import issueLabelsStyles from './issue-labels.scss'
+
+export function Label({
+  className = defaultProps.className,
+  text,
+  variant = defaultProps.variant,
+  backgroundColor = defaultProps.backgroundColor,
+  textColor = defaultProps.textColor,
+}: LabelProps) {
+  return (
+    <span
+      title={`Label: ${text}`}
+      className={cx(className, {
+        [labelsStyles.Label]: variant === labelVariant.regular,
+        [issueLabelsStyles.IssueLabel]: variant === labelVariant.issue,
+        [colorStyles['bg-blue']]: backgroundColor === labelBackgroundColor.blue,
+        [colorStyles['text-white']]: textColor === labelTextColor.white,
+      })}
+    >
+      {text}
+    </span>
+  )
+}

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

@@ -0,0 +1,19 @@
+import { withTests } from '@storybook/addon-jest'
+import results from '../../../../../../.jest-test-results.json'
+
+const Label =
+  process.env.NODE_ENV === 'develop' || process.env.NODE_ENV === 'test'
+    ? require('../../../index').primer.Label
+    : require('../../../../build').primer.Label
+
+export default {
+  title: 'Primer/Atom/Label',
+  component: Label,
+  decorators: [withTests({ results })],
+  parameters: { jest: ['Label.int.test.js'] },
+  excludeStories: ['custom'],
+}
+
+export function regular() {
+  return <Label text="default label" />
+}

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

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

package/build/primer/Label/index.ts

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

package/build/primer/Label/mixins.scss

@@ -1,6 +1,6 @@
-@import '@papillonbits/css/build/primer/support/variables/typography.scss';
-@import '@papillonbits/css/build/primer/support/variables/layout.scss';
-@import '@papillonbits/css/build/primer/support/variables/misc.scss';
+@import '@papillonarts/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';
 
 // Label mixins
 

package/build/primer/Layout/container.scss

@@ -1,4 +1,4 @@
-@import '@papillonbits/css/build/primer/support/variables/layout.scss';
+@import '@papillonarts/css/build/primer/support/variables/layout.scss';
 
 // Fixed-width, centered column for site content.
 // Handy container styles that match our breakpoints

package/build/primer/Layout/grid-offset.scss

@@ -1,6 +1,6 @@
 // stylelint-disable number-max-precision
 
-@import '@papillonbits/css/build/primer/support/variables/layout.scss';
+@import '@papillonarts/css/build/primer/support/variables/layout.scss';
 
 // Optional offset options to work with grid.scss
 

package/build/primer/Layout/grid.scss

@@ -1,5 +1,5 @@
-@import '@papillonbits/css/build/primer/support/variables/layout.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/mixins/layout.scss';
 
 // stylelint-disable number-max-precision
 // stylelint-disable declaration-property-value-no-unknown

package/build/primer/Loader/Loader.mdx

@@ -0,0 +1,31 @@
+# Loader
+
+> Loaders inform users that an action is still in progress and might take a while to complete.
+
+## Variants
+
+> - Heading, Text, Label, Button
+
+## Heading
+
+```jsx
+<Loader variant={loaderVariant.heading} text={text} />
+```
+
+## Text
+
+```jsx
+<Loader variant={loaderVariant.text} text={text} />
+```
+
+## Label
+
+```jsx
+<Loader variant={loaderVariant.label} text={text} />
+```
+
+## Button
+
+```jsx
+<Loader variant={loaderVariant.button} text={text} />
+```

package/build/primer/Loader/Loader.prop.ts

@@ -0,0 +1,16 @@
+export const loaderVariant = {
+  heading: 'heading',
+  text: 'text',
+  label: 'label',
+  button: 'button',
+}
+
+export const defaultProps = {
+  className: null,
+}
+
+export interface LoaderProps {
+  className?: string
+  variant: typeof loaderVariant.heading | typeof loaderVariant.text | typeof loaderVariant.label | typeof loaderVariant.button
+  text: string
+}

package/build/primer/Loader/Loader.tsx

@@ -0,0 +1,43 @@
+import cx from 'classnames'
+import colorStyles from '@papillonarts/css/build/primer/utilities/colors.scss'
+import marginStyles from '@papillonarts/css/build/primer/utilities/margin.scss'
+import { LoaderProps, defaultProps, loaderVariant } from './Loader.prop'
+import styles from './Loader.scss'
+import branchNameStyles from '../BranchName/branch-name.scss'
+import buttonStyles from '../Button/Button.scss'
+import labelStyles from '../Label/labels.scss'
+
+export function Loader({ className = defaultProps.className, variant, text }: LoaderProps) {
+  switch (variant) {
+    case loaderVariant.heading:
+      return (
+        <h2 className={className}>
+          <span>{text}</span>
+          <span className={styles.AnimatedEllipsis} />
+        </h2>
+      )
+    case loaderVariant.text:
+      return (
+        <span className={cx(branchNameStyles['branch-name'], marginStyles['mt-2'])}>
+          <span>{text}</span>
+          <span className={styles.AnimatedEllipsis} />
+        </span>
+      )
+    case loaderVariant.label:
+      return (
+        <span className={cx(labelStyles.Label, colorStyles['bg-blue'], marginStyles['mt-3'])}>
+          <span>{text}</span>
+          <span className={styles.AnimatedEllipsis} />
+        </span>
+      )
+    case loaderVariant.button:
+      return (
+        <button type="button" className={cx(buttonStyles.btn, marginStyles['mt-3'])} aria-disabled="true">
+          <span>{text}</span>
+          <span className={styles.AnimatedEllipsis} />
+        </button>
+      )
+    default:
+      return null
+  }
+}

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

@@ -0,0 +1,34 @@
+import { withTests } from '@storybook/addon-jest'
+import { loaderVariant } from '../Loader.prop'
+import results from '../../../../../../.jest-test-results.json'
+
+const Loader =
+  process.env.NODE_ENV === 'develop' || process.env.NODE_ENV === 'test'
+    ? require('../../../index').primer.Loader.Loader
+    : require('../../../../build').primer.Loader.Loader
+
+export default {
+  title: 'Primer/Atom/Loader',
+  component: Loader,
+  decorators: [withTests({ results })],
+  parameters: { jest: ['Loader.int.test.js'] },
+  excludeStories: ['textValue', 'custom'],
+}
+
+const textValue = 'Loading'
+
+export function heading() {
+  return <Loader variant={loaderVariant.heading} text={textValue} />
+}
+
+export function text() {
+  return <Loader variant={loaderVariant.text} text={textValue} />
+}
+
+export function label() {
+  return <Loader variant={loaderVariant.label} text={textValue} />
+}
+
+export function button() {
+  return <Loader variant={loaderVariant.button} text={textValue} />
+}

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

@@ -0,0 +1,21 @@
+import { heading, text, label, button } from './Loader.int.story'
+
+describe('<Loader />', () => {
+  describe('Render', () => {
+    test('must match heading()', () => {
+      expect(global.renderToJSON(heading())).toMatchSnapshot()
+    })
+
+    test('must match text()', () => {
+      expect(global.renderToJSON(text())).toMatchSnapshot()
+    })
+
+    test('must match label()', () => {
+      expect(global.renderToJSON(label())).toMatchSnapshot()
+    })
+
+    test('must match button()', () => {
+      expect(global.renderToJSON(button())).toMatchSnapshot()
+    })
+  })
+})

package/build/primer/Loader/index.ts

@@ -0,0 +1,2 @@
+export { Loader } from './Loader'
+export { loaderVariant } from './Loader.prop'

package/build/primer/Navigation/Menu/Menu.prop.ts

@@ -0,0 +1,26 @@
+export const defaultProps = {
+  className: null,
+  heading: null,
+}
+
+export interface AriaAttrType {
+  label: string
+  labelledBy: string
+  current: boolean | false | true | 'page' | 'step' | 'location' | 'date' | 'time'
+}
+
+export interface ItemType {
+  href: string
+  icon: string
+  text: string
+  html: React.ReactNode[]
+  isSelected: boolean
+}
+
+export interface MenuProps {
+  className?: string
+  heading?: string
+  ariaAttr: AriaAttrType
+  items: ItemType[]
+  onClick: (value) => void
+}

package/build/primer/Navigation/Menu/Menu.tsx

@@ -0,0 +1,42 @@
+import cx from 'classnames'
+import { v1 as uuidv1 } from 'uuid'
+import { getIndexItems, getIndexItemsWithSelected } from '@papillonarts/library/array'
+import { useState } from '@papillonarts/library/hooks'
+import { MenuProps, defaultProps } from './Menu.prop'
+import styles from './Menu.scss'
+import { Icon, iconSize } from '../../Icon'
+
+export function Menu({ className = defaultProps.className, heading = defaultProps.heading, ariaAttr, items, onClick }: MenuProps) {
+  const [indexItems, setIndexItems] = useState(getIndexItems(items))
+  const { label, labelledBy, current } = ariaAttr
+
+  return (
+    <nav className={cx(className, styles.menu)} aria-label={label} aria-labelledby={labelledBy}>
+      {heading && <span className={styles['menu-heading']}>{heading}</span>}
+      {indexItems.map((indexItem) => {
+        const { href, icon, text, html, isSelected } = indexItem
+
+        const itemOtherProps = isSelected ? { ...{ 'aria-current': current } } : null
+
+        return (
+          <a
+            key={uuidv1()}
+            onClick={(e) => {
+              e.preventDefault()
+              const newIndexItems = getIndexItemsWithSelected(indexItems, indexItem)
+              setIndexItems(newIndexItems)
+              onClick(newIndexItems)
+            }}
+            className={styles['menu-item']}
+            href={href}
+            {...itemOtherProps}
+          >
+            {icon && <Icon className={styles.octicon} icon={icon} size={iconSize.small} />}
+            {html || null}
+            {text}
+          </a>
+        )
+      })}
+    </nav>
+  )
+}

package/build/primer/Navigation/Menu/__tests__/Menu.int.story.tsx

@@ -0,0 +1,55 @@
+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 Menu =
+  process.env.NODE_ENV === 'develop' || process.env.NODE_ENV === 'test'
+    ? require('../../../../index').primer.Navigation.Menu
+    : require('../../../../../build').primer.Navigation.Menu
+
+export default {
+  title: 'Primer/Molecule/Navigation/Menu',
+  component: Menu,
+  decorators: [withTests({ results })],
+  parameters: { jest: ['Menu.int.test.js'] },
+  excludeStories: ['heading', 'ariaAttr', 'defaultItems', 'iconItems', 'custom'],
+}
+
+export const heading = 'Menu heading'
+
+export const ariaAttr = {
+  label: 'Person settings',
+  labelledBy: 'menu-heading',
+  current: 'page',
+}
+
+export const defaultItems = [
+  { href: '#url', text: 'Account', isSelected: true },
+  { href: '#url', text: 'Profile', isSelected: false },
+  { href: '#url', text: 'Emails', isSelected: false },
+  { href: '#url', text: 'Notifications', isSelected: false },
+]
+
+export const iconItems = [
+  { href: '#url', icon: iconName.Tools16, text: 'Account', isSelected: true },
+  { href: '#url', icon: iconName.Person16, text: 'Profile', isSelected: false },
+  { href: '#url', icon: iconName.Mail16, text: 'Emails', isSelected: false },
+  { href: '#url', icon: iconName.Broadcast16, text: 'Notifications', isSelected: false },
+]
+
+export function custom(onClick) {
+  return <Menu ariaAttr={ariaAttr} items={defaultItems} onClick={onClick} />
+}
+
+export function regular() {
+  return <Menu ariaAttr={ariaAttr} items={defaultItems} onClick={action('onClick')} />
+}
+
+export function withIcons() {
+  return <Menu ariaAttr={ariaAttr} items={iconItems} onClick={action('onClick')} />
+}
+
+export function withHeading() {
+  return <Menu heading={heading} ariaAttr={ariaAttr} items={defaultItems} onClick={action('onClick')} />
+}

package/build/primer/Navigation/Menu/__tests__/Menu.int.test.ts

@@ -0,0 +1,57 @@
+import { defaultItems as items, regular, withIcons, withHeading } from './Menu.int.story'
+
+jest.mock('@papillonarts/library/array', () => ({
+  getIndexItems: () => {},
+  getIndexItemsWithSelected: () => {},
+}))
+
+jest.mock('@papillonarts/library/hooks', () => ({
+  useState: () => {},
+}))
+
+const libraryArrayMockObject = require('@papillonarts/library/array')
+const libraryHooksMockObject = require('@papillonarts/library/hooks')
+
+describe('<Menu />', () => {
+  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])
+  })
+
+  afterEach(() => jest.clearAllMocks())
+
+  describe('Render', () => {
+    test('must match regular()', () => {
+      expect(global.renderToJSON(regular())).toMatchSnapshot()
+    })
+
+    test('must match withIcons()', () => {
+      expect(global.renderToJSON(withIcons())).toMatchSnapshot()
+    })
+
+    test('must match withHeading()', () => {
+      expect(global.renderToJSON(withHeading())).toMatchSnapshot()
+    })
+  })
+})

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

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

package/build/primer/Navigation/TabNav/TabNav.prop.ts

@@ -0,0 +1,39 @@
+export const tabNavState = {
+  active: 'active',
+  inactive: 'inactive',
+}
+
+export const defaultProps = {
+  className: null,
+  actions: null,
+  children: null,
+  state: tabNavState.active,
+}
+
+export interface AriaAttrType {
+  label: string
+  current: boolean | false | true | 'page' | 'step' | 'location' | 'date' | 'time'
+}
+
+export interface LinkType {
+  component: React.ReactNode
+}
+
+export interface ItemType {
+  href: string
+  text: string
+  link: LinkType
+  isSelected: boolean
+  enabled: boolean
+  visible: boolean
+}
+
+export interface TabNavProps {
+  className?: string
+  ariaAttr: AriaAttrType
+  items: ItemType[]
+  actions?: React.ReactNode[]
+  onClick: (value) => void
+  children?: React.ReactNode
+  state?: typeof tabNavState.active | typeof tabNavState.inactive
+}