@papillonarts/components 0.10.0 → 0.12.0

package/build/primer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/primer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAgB,MAAM,SAAS,CAAA;AAC7C,OAAO,EAAE,UAAU,EAAmB,MAAM,cAAc,CAAA;AAC1D,OAAO,EAAE,UAAU,EAAqB,MAAM,cAAc,CAAA;AAC5D,OAAO,EAAE,MAAM,EAAyF,MAAM,UAAU,CAAA;AACxH,OAAO,EAAE,QAAQ,EAAiB,MAAM,YAAY,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAG/C,OAAO,EAAE,IAAI,EAAsB,MAAM,QAAQ,CAAA;AACjD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,MAAM,EAAiB,MAAM,UAAU,CAAA;AAGhD,OAAO,EAAE,OAAO,EAA+B,MAAM,WAAW,CAAA;AAChE,OAAO,EAAE,QAAQ,EAAmB,MAAM,YAAY,CAAA;AACtD,OAAO,EAAE,MAAM,EAAe,MAAM,UAAU,CAAA;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACnC,OAAO,EAAE,KAAK,EAAgB,MAAM,SAAS,CAAA;AAE7C,OAAO,2CAA2C,CAAA;AAElD,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4DlB,CAAA"}

package/build/primer/index.js

@@ -0,0 +1,87 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.primer = void 0;
+var _Alert = require("./Alert");
+var _Breadcrumb = require("./Breadcrumb");
+var _Blankslate = require("./Blankslate");
+var _Button = require("./Button");
+var _Dropdown = require("./Dropdown");
+var _ErrorBoundary = require("./ErrorBoundary");
+var _Form = require("./Form");
+var _Grid = require("./Grid");
+var _Icon = require("./Icon");
+var _Label = require("./Label");
+var _Loader = require("./Loader");
+var _Navigation = require("./Navigation");
+var _Pagination = require("./Pagination");
+var _Popover = require("./Popover");
+var _Progress = require("./Progress");
+var _Select = require("./Select");
+var _SelectMenu = require("./SelectMenu");
+var _Subhead = require("./Subhead");
+var _Toast = require("./Toast");
+require("@papillonarts/css/build/primer/index.scss");
+var primer = exports.primer = {
+  Alert: {
+    Alert: _Alert.Alert,
+    alertVariant: _Alert.alertVariant
+  },
+  Breadcrumb: {
+    Breadcrumb: _Breadcrumb.Breadcrumb,
+    breadcrumbState: _Breadcrumb.breadcrumbState
+  },
+  Blankslate: {
+    Blankslate: _Blankslate.Blankslate,
+    blankslateVariant: _Blankslate.blankslateVariant
+  },
+  Button: {
+    Button: _Button.Button,
+    buttonElement: _Button.buttonElement,
+    buttonVariant: _Button.buttonVariant,
+    buttonSize: _Button.buttonSize,
+    buttonState: _Button.buttonState,
+    iconAlignment: _Button.iconAlignment,
+    buttonInputType: _Button.buttonInputType
+  },
+  Dropdown: {
+    Dropdown: _Dropdown.Dropdown,
+    dropdownState: _Dropdown.dropdownState
+  },
+  ErrorBoundary: _ErrorBoundary.ErrorBoundary,
+  Form: _Form.Form,
+  Grid: _Grid.Grid,
+  Icon: {
+    Icon: _Icon.Icon,
+    iconName: _Icon.iconName,
+    iconSize: _Icon.iconSize
+  },
+  Label: _Label.Label,
+  Loader: {
+    Loader: _Loader.Loader,
+    loaderVariant: _Loader.loaderVariant
+  },
+  Navigation: _Navigation.Navigation,
+  Pagination: _Pagination.Pagination,
+  Popover: {
+    Popover: _Popover.Popover,
+    popoverVariant: _Popover.popoverVariant,
+    popoverSize: _Popover.popoverSize
+  },
+  Progress: {
+    Progress: _Progress.Progress,
+    progressVariant: _Progress.progressVariant
+  },
+  Select: {
+    Select: _Select.Select,
+    selectState: _Select.selectState
+  },
+  SelectMenu: _SelectMenu.SelectMenu,
+  Subhead: _Subhead.Subhead,
+  Toast: {
+    Toast: _Toast.Toast,
+    toastVariant: _Toast.toastVariant
+  }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@papillonarts/components",
-  "version": "0.10.0",
+  "version": "0.12.0",
   "description": "Papillon Arts Components",
   "homepage": "https://github.com/papillonarts/papillonarts/tree/master/packages/components",
   "repository": {
@@ -21,16 +21,18 @@
     "remove-test-folders": "rm -rf src/**/**/__tests__ && rm -rf src/**/**/**/__tests__ && rm -rf src/primer/Concept",
     "remove-snapshot-folders": "rm -rf src/**/**/__tests__/__snapshots__",
     "remove-build-folder": "rm -rf build",
-    "transpile": "babel --copy-files --no-copy-ignored --out-dir build src --ignore **/__tests__",
+    "transpile": "babel --copy-files --no-copy-ignored --extensions '.js,.jsx,.ts,.tsx' --out-dir build src --ignore **/__tests__",
     "remove-markdown-files": "find build -maxdepth 3 -type f -name \"*.md\" -delete",
-    "build": "npm-run-all remove-snapshot-folders remove-build-folder transpile remove-markdown-files",
+    "generate-typing": "tsc",
+    "generate-commonjs": "npm-run-all remove-snapshot-folders remove-build-folder transpile remove-markdown-files",
+    "build": "npm-run-all generate-commonjs generate-typing",
     "build-test": "npm run build",
     "build-acceptance": "npm run build",
     "build-release": "npm run build"
   },
   "dependencies": {
-    "@papillonarts/css": "^0.10.0",
-    "@papillonarts/library": "^0.10.0"
+    "@papillonarts/css": "^0.12.0",
+    "@papillonarts/library": "^0.12.0"
   },
-  "gitHead": "bd716a6232e363ba61f8c1367faefbb20d4b503f"
+  "gitHead": "a3d3650b3ada16291938971ccb30fa08dfb71b33"
 }

package/build/index.ts

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

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

@@ -1,45 +0,0 @@
-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

@@ -1,101 +0,0 @@
-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

@@ -1,86 +0,0 @@
-// 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

@@ -1,37 +0,0 @@
-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

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

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

@@ -1,26 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

@@ -1,43 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

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

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

@@ -1,28 +0,0 @@
-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

@@ -1,57 +0,0 @@
-/* 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>
-  )
-}

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

@@ -1,40 +0,0 @@
-import { action } from 'storybook/actions'
-import { withTests } from '@storybook/addon-jest'
-import { breadcrumbState } from '../Breadcrumb.prop'
-import results from '../../../../../../.jest-test-results.json'
-
-const Breadcrumb =
-  process.env.NODE_ENV === 'develop' || process.env.NODE_ENV === 'test'
-    ? require('../../../index').primer.Breadcrumb.Breadcrumb
-    : require('../../../../build').primer.Breadcrumb.Breadcrumb
-
-export default {
-  title: 'Primer/Atom/Breadcrumb',
-  component: Breadcrumb,
-  decorators: [withTests({ results })],
-  parameters: { jest: ['Breadcrumb.int.test.js'] },
-  excludeStories: ['ariaAttr', 'items', 'custom'],
-}
-
-export const ariaAttr = {
-  label: 'Breadcrumb',
-  current: 'page',
-}
-
-export const items = [
-  { href: '/fantastic-folder', text: 'Fantastic Folder', isSelected: false },
-  { href: '/fantastic-folder/another-fantastic-folder', text: 'Another Fantastic folder', isSelected: false },
-  { href: '', text: 'One More Fantastic Folder', isSelected: true },
-]
-
-export function custom(onClick) {
-  return <Breadcrumb ariaAttr={ariaAttr} items={items} onClick={onClick} />
-}
-
-export function regular() {
-  return <Breadcrumb ariaAttr={ariaAttr} items={items} onClick={action('onClick')} />
-}
-
-export function inactive() {
-  return <Breadcrumb ariaAttr={ariaAttr} items={items} onClick={action('onClick')} state={breadcrumbState.inactive} />
-}