@papillonarts/components 0.9.0 → 0.11.0

package/build/primer/Toast/Toast.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Toast = Toast;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _padding = _interopRequireDefault(require("@papillonarts/css/build/primer/utilities/padding.scss"));
+var _Toast = require("./Toast.prop");
+var _Toast2 = _interopRequireDefault(require("./Toast.scss"));
+var _Icon = require("../Icon");
+var _jsxRuntime = require("react/jsx-runtime");
+function Toast(_ref) {
+  var _ref$className = _ref.className,
+    className = _ref$className === void 0 ? _Toast.defaultProps.className : _ref$className,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? _Toast.defaultProps.variant : _ref$variant,
+    text = _ref.text,
+    _ref$isDismissable = _ref.isDismissable,
+    isDismissable = _ref$isDismissable === void 0 ? _Toast.defaultProps.isDismissable : _ref$isDismissable,
+    _ref$onClick = _ref.onClick,
+    onClick = _ref$onClick === void 0 ? _Toast.defaultProps.onClick : _ref$onClick;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _classnames["default"])(className, _padding["default"]['p-1']),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _classnames["default"])(_Toast2["default"].Toast, (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, _Toast2["default"]['Toast--success'], variant === _Toast.toastVariant.success), _Toast2["default"]['Toast--warning'], variant === _Toast.toastVariant.warning), _Toast2["default"]['Toast--error'], variant === _Toast.toastVariant.error)),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+        className: _Toast2["default"]['Toast-icon'],
+        children: [variant === _Toast.toastVariant.info && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
+          icon: _Icon.iconName.Info16
+        }), variant === _Toast.toastVariant.success && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
+          icon: _Icon.iconName.Check16
+        }), variant === _Toast.toastVariant.warning && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
+          icon: _Icon.iconName.Alert16
+        }), variant === _Toast.toastVariant.error && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
+          icon: _Icon.iconName.Stop16
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: _Toast2["default"]['Toast-content'],
+        children: text
+      }), isDismissable && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+        type: "button",
+        className: _Toast2["default"]['Toast-dismissButton'],
+        onClick: onClick,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
+          icon: _Icon.iconName.X16,
+          size: _Icon.iconSize.small
+        })
+      })]
+    })
+  });
+}

package/build/primer/Toast/Toast.prop.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.toastVariant = exports.defaultProps = void 0;
+var toastVariant = exports.toastVariant = {
+  info: 'info',
+  success: 'success',
+  warning: 'warning',
+  error: 'error'
+};
+var defaultProps = exports.defaultProps = {
+  className: null,
+  variant: toastVariant.info,
+  isDismissable: false,
+  onClick: function onClick() {}
+};

package/build/primer/Toast/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Toast", {
+  enumerable: true,
+  get: function get() {
+    return _Toast.Toast;
+  }
+});
+Object.defineProperty(exports, "toastVariant", {
+  enumerable: true,
+  get: function get() {
+    return _Toast2.toastVariant;
+  }
+});
+var _Toast = require("./Toast");
+var _Toast2 = require("./Toast.prop");

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.9.0",
+  "version": "0.11.0",
   "description": "Papillon Arts Components",
   "homepage": "https://github.com/papillonarts/papillonarts/tree/master/packages/components",
   "repository": {
@@ -21,7 +21,7 @@
     "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",
     "build-test": "npm run build",
@@ -29,8 +29,8 @@
     "build-release": "npm run build"
   },
   "dependencies": {
-    "@papillonarts/css": "^0.9.0",
-    "@papillonarts/library": "^0.9.0"
+    "@papillonarts/css": "^0.11.0",
+    "@papillonarts/library": "^0.11.0"
   },
-  "gitHead": "584fbedfbea9771d584d15adb3396feb2e9c56b6"
+  "gitHead": "afb8232b4029b44881fa5613b3069ad2d3032f16"
 }

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
-}