@papillonarts/components 0.17.0 → 0.19.0

package/build/primer/Button/Button.js

@@ -41,8 +41,8 @@ function Button(_ref) {
     _ref$autoFocus = _ref.autoFocus,
     autoFocus = _ref$autoFocus === void 0 ? _Button.defaultProps.autoFocus : _ref$autoFocus;
   var stateProps = state === _Button.buttonState.inactive ? _objectSpread({}, {
-    disabled: 'true',
-    'aria-disabled': 'true'
+    disabled: true,
+    'aria-disabled': true
   }) : null;
   var fileInputRef = (0, _hooks.useRef)(null);
   if (element === _Button.buttonElement.button) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@papillonarts/components",
-  "version": "0.17.0",
+  "version": "0.19.0",
   "description": "Papillon Arts Components",
   "homepage": "https://github.com/papillonarts/papillonarts/tree/master/packages/components",
   "repository": {
@@ -18,21 +18,16 @@
     "clean-up": "rm -rf build node_modules package-lock.json",
     "install-packages": "npm i",
     "install-papillonarts-latest": "npm i \"@papillonarts/css\"@latest && npm i \"@papillonarts/library\"@latest",
-    "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",
-    "remove-markdown-files": "find build -maxdepth 3 -type f -name \"*.md\" -delete",
     "generate-typing": "tsc",
-    "transpile": "babel --copy-files --no-copy-ignored --extensions '.js,.jsx,.ts,.tsx' --out-dir build src --ignore **/__tests__",
-    "generate-commonjs": "npm-run-all remove-snapshot-folders remove-build-folder transpile remove-markdown-files",
+    "generate-commonjs": "rm -rf build && babel --copy-files --no-copy-ignored --extensions '.js,.jsx,.ts,.tsx,.snap,.mdx' --out-dir build src --ignore **/__tests__,**/*.mdx",
     "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.17.0",
-    "@papillonarts/library": "^0.17.0"
+    "@papillonarts/css": "^0.19.0",
+    "@papillonarts/library": "^0.19.0"
   },
-  "gitHead": "b9680d2fc5396c1c57d726ebd508fc1bf39e61e0"
+  "gitHead": "1e0d601dc56a0abcde7730828eb1d83faca7222a"
 }

package/build/primer/Alert/Alert.mdx

@@ -1,88 +0,0 @@
-# Alert
-
-> Flash messages, or alerts, inform users of successful or pending actions. Use them sparingly. Don't show more than one at a time.
-
-# Variants
-
-> - Default,
-> - Info, Warning, Error, Success
-> - Consent, Consent with input
-
-## Default
-
-> Flash messages start off looking decently neutral—they're just light blue rounded rectangles.
-
-```jsx
-<Alert variant={alertVariant.info}>{children}</Alert>
-```
-
-## Default Multiple Paragraphs
-
-> You can put multiple paragraphs of text in a flash message—the last paragraph's bottom margin will be automatically override.
-
-```jsx
-<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>
-```
-
-## Info
-
-```jsx
-<Alert variant={alertVariant.info}>{children}</Alert>
-```
-
-## Warning
-
-```jsx
-<Alert variant={alertVariant.warning}>{children}</Alert>
-```
-
-## Error
-
-```jsx
-<Alert variant={alertVariant.error}>{children}</Alert>
-```
-
-## Success
-
-```jsx
-<Alert variant={alertVariant.success}>{children}</Alert>
-```
-
-## Consent
-
-```jsx
-<Alert
-  variant={alertVariant.consent}
-  consent={{
-    action: {
-      approve: action('Approved'),
-      cancel: action('Cancelled'),
-    },
-  }}
->
-  {children}
-</Alert>
-```
-
-## Consent with input
-
-```jsx
-<Alert
-  variant={alertVariant.consent}
-  consent={{
-    action: {
-      approve: action('Approved'),
-      cancel: action('Cancelled'),
-    },
-    withInput: true,
-  }}
->
-  {children}
-</Alert>
-```

package/build/primer/Blankslate/Blankslate.mdx

@@ -1,57 +0,0 @@
-# Blankslate
-
-> Blankslates are for when there is a lack of content within a page or section. Use them as placeholders to tell users why something isn't there. Be sure to provide an action to add content as well.
-
-# Variants
-
-> - Default
-> - Narrow, Capped, Spacious
-> - Large, No background
-
-## Default
-
-> Wrap some content in the outer .blankslate wrapper to give it the blankslate appearance.
-
-```jsx
-<Blankslate variant={blankslateVariant.default} heading={heading} text={text} />
-```
-
-## Narrow
-
-> Narrows the blankslate container to not occupy the entire available width.
-
-```jsx
-<Blankslate variant={blankslateVariant.narrow} heading={heading} text={text} />
-```
-
-## Capped
-
-> Removes the border-radius on the top corners.
-
-```jsx
-<Blankslate variant={blankslateVariant.capped} heading={heading} text={text} />
-```
-
-## Spacious
-
-> Significantly increases the vertical padding.
-
-```jsx
-<Blankslate variant={blankslateVariant.spacious} heading={heading} text={text} />
-```
-
-## Large
-
-> Increases the size of the text in the blankslate
-
-```jsx
-<Blankslate variant={blankslateVariant.large} heading={heading} text={text} />
-```
-
-## No background
-
-> Removes the background-color and border.
-
-```jsx
-<Blankslate hasCleanBackground={true} heading={heading} text={text} />
-```

package/build/primer/Breadcrumb/Breadcrumb.mdx

@@ -1,23 +0,0 @@
-# Breadcrumb
-
-> Breadcrumbs are used to show taxonomical context on pages that are many levels deep in a site’s hierarchy. Breadcrumbs show and link to parent, grandparent, and sometimes great-grandparent pages. Breadcrumbs are most appropriate on pages that:
-
-- Are many levels deep on a site
-- Do not have a section-level navigation
-- May need the ability to quickly go back to the previous (parent) page
-
-# Variants
-
-> - Default, Inactive
-
-## Default
-
-```jsx
-<Breadcrumb ariaAttr={ariaAttr} items={items} onClick={action('onClick')} />
-```
-
-## Inactive
-
-```jsx
-<Breadcrumb ariaAttr={ariaAttr} items={items} onClick={action('onClick')} state={breadcrumbState.inactive} />
-```

package/build/primer/Button/Button.mdx

@@ -1,239 +0,0 @@
-# Button
-
-> Buttons are used for actions, like in forms, while textual hyperlinks are used for destinations, or moving from one page to another.
-
-# Variants
-
-> - DefaultButton, DefaultSmallButton, DefaultLargeButton, DefaultInactiveButton, DefaultIconButtonLeftAligned, DefaultIconButtonRightAligned, DefaultLinkButton
->
-> - PrimaryButton, PrimarySmallButton, PrimaryLargeButton, PrimaryInactiveButton, PrimaryIconButtonLeftAligned, PrimaryIconButtonRightAligned
->
-> - DangerButton, DangerSmallButton, DangerLargeButton, DangerInactiveButton, DangerIconButtonLeftAligned, DangerIconButtonRightAligned
->
-> - OutlineButton, OutlineSmallButton, OutlineLargeButton, OutlineInactiveButton, OutlineIconButtonLeftAligned, OutlineIconButtonRightAligned
->
-> - BlueButton, BlueSmallButton, BlueLargeButton, BlueInactiveButton, BlueIconButtonLeftAligned, BlueIconButtonRightAligned
->
-> - OrangeButton, OrangeSmallButton, OrangeLargeButton, OrangeInactiveButton, OrangeIconButtonLeftAligned, OrangeIconButtonRightAligned
-
-## DefaultButton
-
-```jsx
-<Button text="Default button" onClick={action('onClick')} />
-```
-
-## DefaultSmallButton
-
-```jsx
-<Button text="Default small button" size={buttonSize.small} onClick={action('onClick')} />
-```
-
-## DefaultLargeButton
-
-```jsx
-<Button text="Default large button" size={buttonSize.large} onClick={action('onClick')} />
-```
-
-## DefaultInactiveButton
-
-```jsx
-<Button text="Default inactive button" state={buttonState.inactive} onClick={action('onClick')} />
-```
-
-## DefaultIconButtonLeftAligned
-
-```jsx
-<Button text="Default icon button" icon={plusIconLeftAligned} onClick={action('onClick')} />
-```
-
-## DefaultIconButtonRightAligned
-
-```jsx
-<Button text="Default icon button" icon={plusIconRightAligned} onClick={action('onClick')} />
-```
-
-## DefaultLinkButton
-
-```jsx
-<Button element={buttonElement.a} href="#url" text="Default link button" onClick={action('onClick')} />
-```
-
-## PrimaryButton
-
-```jsx
-<Button text="Primary button" variant={buttonVariant.primary} onClick={action('onClick')} />
-```
-
-## PrimarySmallButton
-
-```jsx
-<Button text="Primary small button" variant={buttonVariant.primary} size={buttonSize.small} onClick={action('onClick')} />
-```
-
-## PrimaryLargeButton
-
-```jsx
-<Button text="Primary large button" variant={buttonVariant.primary} size={buttonSize.large} onClick={action('onClick')} />
-```
-
-## PrimaryInactiveButton
-
-```jsx
-<Button text="Primary inactive button" variant={buttonVariant.primary} state={buttonState.inactive} onClick={action('onClick')} />
-```
-
-## PrimaryIconButtonLeftAligned
-
-```jsx
-<Button text="Primary icon button" variant={buttonVariant.primary} icon={plusIconLeftAligned} onClick={action('onClick')} />
-```
-
-## PrimaryIconButtonRightAligned
-
-```jsx
-<Button text="Primary icon button" variant={buttonVariant.primary} icon={plusIconRightAligned} onClick={action('onClick')} />
-```
-
-## DangerButton
-
-```jsx
-<Button text="Danger button" variant={buttonVariant.danger} onClick={action('onClick')} />
-```
-
-## DangerSmallButton
-
-```jsx
-<Button text="Danger small button" variant={buttonVariant.danger} size={buttonSize.small} onClick={action('onClick')} />
-```
-
-## DangerLargeButton
-
-```jsx
-<Button text="Danger large button" variant={buttonVariant.danger} size={buttonSize.large} onClick={action('onClick')} />
-```
-
-## DangerInactiveButton
-
-```jsx
-<Button text="Danger inactive button" variant={buttonVariant.danger} state={buttonState.inactive} onClick={action('onClick')} />
-```
-
-## DangerIconButtonLeftAligned
-
-```jsx
-<Button text="Danger icon button" variant={buttonVariant.danger} icon={plusIconLeftAligned} onClick={action('onClick')} />
-```
-
-## DangerIconButtonRightAligned
-
-```jsx
-<Button text="Danger icon button" variant={buttonVariant.danger} icon={plusIconRightAligned} onClick={action('onClick')} />
-```
-
-## OutlineButton
-
-```jsx
-<Button text="Outline button" variant={buttonVariant.outline} onClick={action('onClick')} />
-```
-
-## OutlineSmallButton
-
-```jsx
-<Button text="Outline small button" variant={buttonVariant.outline} size={buttonSize.small} onClick={action('onClick')} />
-```
-
-## OutlineLargeButton
-
-```jsx
-<Button text="Outline large button" variant={buttonVariant.outline} size={buttonSize.large} onClick={action('onClick')} />
-```
-
-## OutlineInactiveButton
-
-```jsx
-<Button text="Outline inactive button" variant={buttonVariant.outline} state={buttonState.inactive} onClick={action('onClick')} />
-```
-
-## OutlineIconButtonLeftAligned
-
-```jsx
-<Button text="Outline icon button" variant={buttonVariant.outline} icon={plusIconLeftAligned} onClick={action('onClick')} />
-```
-
-## OutlineIconButtonRightAligned
-
-```jsx
-<Button text="Outline icon button" variant={buttonVariant.outline} icon={plusIconRightAligned} onClick={action('onClick')} />
-```
-
-## BlueButton
-
-```jsx
-<Button text="Blue button" variant={buttonVariant.blue} onClick={action('onClick')} />
-```
-
-## BlueSmallButton
-
-```jsx
-<Button text="Blue small button" variant={buttonVariant.blue} size={buttonSize.small} onClick={action('onClick')} />
-```
-
-## BlueLargeButton
-
-```jsx
-<Button text="Blue large button" variant={buttonVariant.blue} size={buttonSize.large} onClick={action('onClick')} />
-```
-
-## BlueInactiveButton
-
-```jsx
-<Button text="Blue inactive button" variant={buttonVariant.blue} state={buttonState.inactive} onClick={action('onClick')} />
-```
-
-## BlueIconButtonLeftAligned
-
-```jsx
-<Button text="Blue icon button" variant={buttonVariant.blue} icon={plusIconLeftAligned} onClick={action('onClick')} />
-```
-
-## BlueIconButtonRightAligned
-
-```jsx
-<Button text="Blue icon button" variant={buttonVariant.blue} icon={plusIconRightAligned} onClick={action('onClick')} />
-```
-
-## OrangeButton
-
-```jsx
-<Button text="Orange button" variant={buttonVariant.orange} onClick={action('onClick')} />
-```
-
-## OrangeSmallButton
-
-```jsx
-<Button text="Orange small button" variant={buttonVariant.orange} size={buttonSize.small} onClick={action('onClick')} />
-```
-
-## OrangeLargeButton
-
-```jsx
-<Button text="Orange large button" variant={buttonVariant.orange} size={buttonSize.large} onClick={action('onClick')} />
-```
-
-## OrangeInactiveButton
-
-```jsx
-<Button text="Orange inactive button" variant={buttonVariant.orange} state={buttonState.inactive} onClick={action('onClick')} />
-```
-
-## OrangeIconButtonLeftAligned
-
-```jsx
-<Button text="Orange icon button" variant={buttonVariant.orange} icon={plusIconLeftAligned} onClick={action('onClick')} />
-```
-
-## OrangeIconButtonRightAligned
-
-```jsx
-<Button text="Orange icon button" variant={buttonVariant.orange} icon={plusIconRightAligned} onClick={action('onClick')} />
-```

package/build/primer/Dropdown/Dropdown.mdx

@@ -1,19 +0,0 @@
-# Dropdown
-
-> Dropdowns 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
-<Dropdown summary={summary} ariaAttr={ariaAttr} items={items} onClick={action('onClick')} />
-```
-
-## Inactive
-
-```jsx
-<Dropdown summary={summary} ariaAttr={ariaAttr} items={items} onClick={action('onClick')} state={dropdownState.inactive} />
-```

package/build/primer/Form/Checkbox/Checkbox.mdx

@@ -1,32 +0,0 @@
-# Checkbox
-
-> Style individual form checkbox controls and utilize common layouts.
-
-# Variants
-
-> - IsChecked, IsCheckedInactive
-> - IsNotChecked, IsNotCheckedInactive
-
-## IsChecked
-
-```jsx
-<Checkbox ariaAttr={ariaAttr} isChecked={true} onChange={action('onChange')} text={text.isChecked} />
-```
-
-## IsCheckedInactive
-
-```jsx
-<Checkbox ariaAttr={ariaAttr} isChecked={true} onChange={action('onChange')} text={text.isChecked} state={checkboxState.inactive} />
-```
-
-## IsNotChecked
-
-```jsx
-<Checkbox ariaAttr={ariaAttr} isChecked={false} onChange={action('onChange')} text={text.isNotChecked} />
-```
-
-## IsNotCheckedInactive
-
-```jsx
-<Checkbox ariaAttr={ariaAttr} isChecked={false} onChange={action('onChange')} text={text.isNotChecked} state={checkboxState.inactive} />
-```

package/build/primer/Form/Checkbox/__tests__/__snapshots__/Checkbox.int.test.ts.snap

@@ -1,75 +0,0 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
-
-exports[`<Checkbox /> Render must match isChecked() 1`] = `
-<div>
-  <div
-    class="m-0 form-checkbox"
-  >
-    <label
-      for="checkbox"
-    >
-      <input
-        aria-describedby="help-text-for-checkbox"
-        checked=""
-        type="checkbox"
-      />
-      is checked
-    </label>
-  </div>
-</div>
-`;
-
-exports[`<Checkbox /> Render must match isCheckedInactive() 1`] = `
-<div>
-  <div
-    class="m-0 form-checkbox checkbox-inactive"
-  >
-    <label
-      for="checkbox"
-    >
-      <input
-        aria-describedby="help-text-for-checkbox"
-        checked=""
-        type="checkbox"
-      />
-      is checked
-    </label>
-  </div>
-</div>
-`;
-
-exports[`<Checkbox /> Render must match isNotChecked() 1`] = `
-<div>
-  <div
-    class="m-0 form-checkbox"
-  >
-    <label
-      for="checkbox"
-    >
-      <input
-        aria-describedby="help-text-for-checkbox"
-        type="checkbox"
-      />
-      is not checked
-    </label>
-  </div>
-</div>
-`;
-
-exports[`<Checkbox /> Render must match isNotCheckedInactive() 1`] = `
-<div>
-  <div
-    class="m-0 form-checkbox checkbox-inactive"
-  >
-    <label
-      for="checkbox"
-    >
-      <input
-        aria-describedby="help-text-for-checkbox"
-        type="checkbox"
-      />
-      is not checked
-    </label>
-  </div>
-</div>
-`;

package/build/primer/Form/Input/Input.mdx

@@ -1,34 +0,0 @@
-# Input
-
-> Style individual form input controls and utilize common layouts.
-
-# Variants
-
-> - Default, Inactive
-
-## Default
-
-```jsx
-<Input
-  placeholder={placeholder}
-  ariaAttr={ariaAttr}
-  onChange={action('onChange')}
-  onKeyUp={action('onKeyUp')}
-  onFocus={action('onFocus')}
-  onBlur={action('onBlur')}
-/>
-```
-
-## Inactive
-
-```jsx
-<Input
-  placeholder={placeholder}
-  ariaAttr={ariaAttr}
-  onChange={action('onChange')}
-  onKeyUp={action('onKeyUp')}
-  onFocus={action('onFocus')}
-  onBlur={action('onBlur')}
-  state={inputState.inactive}
-/>
-```

package/build/primer/Form/Input/__tests__/__snapshots__/Input.int.test.ts.snap

@@ -1,23 +0,0 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
-
-exports[`<Input /> Render must match inactive() 1`] = `
-<div>
-  <input
-    aria-label="Repository description"
-    class="form-control input-inactive"
-    placeholder="Fantastic placeholder"
-    type="text"
-  />
-</div>
-`;
-
-exports[`<Input /> Render must match regular() 1`] = `
-<div>
-  <input
-    aria-label="Repository description"
-    class="form-control"
-    placeholder="Fantastic placeholder"
-    type="text"
-  />
-</div>
-`;

package/build/primer/Form/Radio/Radio.mdx

@@ -1,25 +0,0 @@
-# Radio
-
-> Style individual form radio controls and utilize common layouts.
-
-# Variants
-
-> - Default, Inactive
-
-## Default
-
-```jsx
-<Fragment>
-  <Radio name={name} onChange={action('onChange-white')} text="White" />
-  <Radio name={name} isChecked={true} onChange={action('onChange-black')} text="Black" />
-</Fragment>
-```
-
-## Inactive
-
-```jsx
-<Fragment>
-  <Radio name={name} onChange={action('onChange-white')} text="White" state={radioState.inactive} />
-  <Radio name={name} isChecked={true} onChange={action('onChange-black')} text="Black" state={radioState.inactive} />
-</Fragment>
-```