@papillonbits/components 0.3.0 → 0.6.0

package/build/primer/Toast/Toast.scss

@@ -0,0 +1,130 @@
+@import '../../index.scss';
+
+// Toast
+
+.Toast {
+  display: flex;
+  margin: $spacer-2;
+  color: var(--color-fg-default);
+  background-color: var(--color-canvas-default);
+  border-radius: $border-radius;
+  box-shadow: inset 0 0 0 1px var(--color-border-default), var(--color-shadow-large);
+
+  @include breakpoint(sm) {
+    width: max-content;
+    max-width: 450px;
+    margin: $spacer-3;
+  }
+}
+
+.Toast-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: $spacer-3 * 3;
+  flex-shrink: 0;
+  color: var(--color-fg-on-emphasis);
+  background-color: var(--color-accent-emphasis);
+  border: $border-width $border-style transparent;
+  border-right: 0;
+  border-top-left-radius: inherit;
+  border-bottom-left-radius: inherit;
+}
+
+.Toast-content {
+  padding: $spacer-3;
+}
+
+.Toast-dismissButton {
+  max-height: 54px; // keeps button aligned to the top
+  padding: $spacer-3;
+  color: inherit;
+  background-color: transparent;
+  border: 0;
+
+  &:focus,
+  &:hover {
+    outline: none;
+    opacity: 0.7;
+  }
+
+  &:active {
+    opacity: 0.5;
+  }
+}
+
+// Modifier
+
+.Toast--loading {
+  color: var(--color-fg-default);
+  box-shadow: inset 0 0 0 1px var(--color-border-default), var(--color-shadow-large);
+
+  .Toast-icon {
+    background-color: var(--color-neutral-emphasis);
+  }
+}
+
+.Toast--error {
+  color: var(--color-fg-default);
+  box-shadow: inset 0 0 0 1px var(--color-border-default), var(--color-shadow-large);
+
+  .Toast-icon {
+    background-color: var(--color-danger-emphasis);
+  }
+}
+
+.Toast--warning {
+  color: var(--color-fg-default);
+  box-shadow: inset 0 0 0 1px var(--color-border-default), var(--color-shadow-large);
+
+  .Toast-icon {
+    background-color: var(--color-attention-emphasis);
+  }
+}
+
+.Toast--success {
+  color: var(--color-fg-default);
+  box-shadow: inset 0 0 0 1px var(--color-border-default), var(--color-shadow-large);
+
+  .Toast-icon {
+    background-color: 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,21 @@
+"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

@@ -5,12 +5,103 @@ Object.defineProperty(exports, "__esModule", {
 });
 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");
+
 var 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
   }
 };
 exports.primer = primer;

package/build/primer/index.scss

@@ -1,6 +1,6 @@
 @mixin inactive {
   pointer-events: none;
-  color: $gray-200;
+  color: var(--color-scale-gray-2);
   cursor: not-allowed;
   user-select: none;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@papillonbits/components",
-  "version": "0.3.0",
+  "version": "0.6.0",
   "description": "Papillon Bits Components",
   "homepage": "https://github.com/papillonbits/papillonbits/tree/master/packages/components",
   "repository": {
@@ -29,7 +29,8 @@
     "build-release": "npm run build"
   },
   "dependencies": {
-    "@papillonbits/css": "^0.3.0"
+    "@papillonbits/css": "^0.6.0",
+    "@papillonbits/library": "^0.6.0"
   },
-  "gitHead": "e21b90bddff729df1b0b2998089b915dfd9a98c5"
+  "gitHead": "c8a804c952017a594fd6420ef676e70e4da4b650"
 }