@papillonarts/components 0.6.0 → 0.8.0

package/build/primer/Toast/Toast.scss

@@ -0,0 +1,145 @@
+@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
+
+// Toast
+
+.Toast {
+  display: flex;
+  margin: var(--base-size-8);
+  color: var(--fgColor-default, var(--color-fg-default));
+  background-color: var(--bgColor-default, var(--color-canvas-default));
+  // stylelint-disable-next-line primer/borders
+  border-radius: $border-radius;
+  box-shadow:
+    inset 0 0 0 1px var(--borderColor-default, var(--color-border-default)),
+    var(--shadow-floating-legacy, var(--color-overlay-shadow));
+
+  @include breakpoint(sm) {
+    width: max-content;
+    max-width: 450px;
+    margin: var(--base-size-16);
+  }
+}
+
+.Toast-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: calc(var(--base-size-16) * 3);
+  flex-shrink: 0;
+  color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
+  background-color: var(--bgColor-accent-emphasis, var(--color-accent-emphasis));
+  // stylelint-disable-next-line primer/borders
+  border: $border-width $border-style transparent;
+  border-right: 0;
+  border-top-left-radius: inherit;
+  border-bottom-left-radius: inherit;
+}
+
+.Toast-content {
+  padding: var(--base-size-16);
+}
+
+.Toast-dismissButton {
+  max-height: 54px; // keeps button aligned to the top
+  padding: var(--base-size-16);
+  color: inherit;
+  background-color: transparent;
+  border: 0;
+
+  &:hover {
+    opacity: 0.7;
+  }
+
+  &:active {
+    opacity: 0.5;
+  }
+}
+
+// Modifier
+
+.Toast--loading {
+  color: var(--fgColor-default, var(--color-fg-default));
+  box-shadow:
+    inset 0 0 0 1px var(--borderColor-default, var(--color-border-default)),
+    var(--shadow-floating-legacy, var(--color-overlay-shadow));
+
+  .Toast-icon {
+    background-color: var(--bgColor-neutral-emphasis, var(--color-neutral-emphasis));
+  }
+}
+
+.Toast--error {
+  color: var(--fgColor-default, var(--color-fg-default));
+  box-shadow:
+    inset 0 0 0 1px var(--borderColor-default, var(--color-border-default)),
+    var(--shadow-floating-legacy, var(--color-overlay-shadow));
+
+  .Toast-icon {
+    background-color: var(--bgColor-danger-emphasis, var(--color-danger-emphasis));
+  }
+}
+
+.Toast--warning {
+  color: var(--fgColor-default, var(--color-fg-default));
+  box-shadow:
+    inset 0 0 0 1px var(--borderColor-default, var(--color-border-default)),
+    var(--shadow-floating-legacy, var(--color-overlay-shadow));
+
+  .Toast-icon {
+    background-color: var(--bgColor-attention-emphasis, var(--color-attention-emphasis));
+  }
+}
+
+.Toast--success {
+  color: var(--fgColor-default, var(--color-fg-default));
+  box-shadow:
+    inset 0 0 0 1px var(--borderColor-default, var(--color-border-default)),
+    var(--shadow-floating-legacy, var(--color-overlay-shadow));
+
+  .Toast-icon {
+    background-color: var(--bgColor-success-emphasis, var(--color-success-emphasis));
+  }
+}
+
+// Animations
+
+.Toast--animateIn {
+  animation: Toast--animateIn 0.18s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
+}
+
+@keyframes Toast--animateIn {
+  0% {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+}
+
+.Toast--animateOut {
+  animation: Toast--animateOut 0.18s cubic-bezier(0.55, 0.06, 0.68, 0.19) forwards;
+}
+
+@keyframes Toast--animateOut {
+  100% {
+    pointer-events: none;
+    opacity: 0;
+    transform: translateY(100%);
+  }
+}
+
+.Toast--spinner {
+  animation: Toast--spinner 1000ms linear infinite;
+}
+
+@keyframes Toast--spinner {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}

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

@@ -4,11 +4,84 @@ 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,
-    blankslateVariantEnum: _Blankslate.blankslateVariantEnum
+    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.6.0",
+  "version": "0.8.0",
   "description": "Papillon Arts Components",
   "homepage": "https://github.com/papillonarts/papillonarts/tree/master/packages/components",
   "repository": {
@@ -21,16 +21,16 @@
     "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:js:ts": "babel --extensions .js,.jsx,.ts,.tsx --copy-files --no-copy-ignored --out-dir build src --ignore **/__tests__",
+    "transpile": "babel --copy-files --no-copy-ignored --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:js:ts remove-markdown-files",
+    "build": "npm-run-all remove-snapshot-folders remove-build-folder transpile remove-markdown-files",
     "build-test": "npm run build",
     "build-acceptance": "npm run build",
     "build-release": "npm run build"
   },
   "dependencies": {
-    "@papillonarts/css": "^0.6.0",
-    "@papillonarts/library": "^0.6.0"
+    "@papillonarts/css": "^0.8.0",
+    "@papillonarts/library": "^0.8.0"
   },
-  "gitHead": "a123d858d38beea38dcf4f948b6a5017e3906635"
+  "gitHead": "20dbfd5958c9d5cbbfbc8efd7103983409861851"
 }