@longline/aqua-ui 1.0.36 → 1.0.38

package/controls/Fab/Fab.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { IIconProps } from '../Icon';
 interface IProps {
     /** @ignore */
     className?: string;
@@ -8,9 +9,9 @@ interface IProps {
     children?: React.ReactNode;
     /**
      * Path to an SVG symbol, e.g. `/aquaui-sprites.svg#close`. The `SVG` enumeration
-     * exists that offers preset paths.
+     * exists that offers preset paths. This may also be a full `IIconProps`.
      */
-    icon: string;
+    icon: string | IIconProps;
     /**
      * A disabled button cannot be interacted with. This is implemented using
      * `pointer-events: none`.

package/controls/Fab/Fab.js

@@ -26,6 +26,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import * as React from 'react';
 import styled, { css } from 'styled-components';
+import { Icon } from '../Icon';
 var FabBase = function (props) {
     var handleClick = function () {
         if (props.disabled)
@@ -34,8 +35,8 @@ var FabBase = function (props) {
             props.onClick();
     };
     return (React.createElement("button", { tabIndex: props.disabled ? -1 : 0, className: props.className, onClick: handleClick, title: props.title },
-        React.createElement("svg", null,
-            React.createElement("use", { xlinkHref: props.icon })),
+        typeof props.icon == "string" && React.createElement(Icon, { url: props.icon }),
+        typeof props.icon != "string" && React.createElement(Icon, __assign({}, props.icon)),
         props.children));
 };
 var FabStyled = styled(FabBase).attrs(function (p) {

package/controls/Gradient/PresetGradients.d.ts

@@ -1,6 +1,8 @@
 import { IGradientStop } from "../../Types";
 declare class PresetGradients {
-    static Bathymetry: IGradientStop[];
-    static Oxygen: IGradientStop[];
+    static Green: IGradientStop[];
+    static Blue: IGradientStop[];
+    static Red: IGradientStop[];
+    static Rainbow: IGradientStop[];
 }
 export { PresetGradients };

package/controls/Gradient/PresetGradients.js

@@ -1,13 +1,33 @@
 var PresetGradients = /** @class */ (function () {
     function PresetGradients() {
     }
-    PresetGradients.Bathymetry = [
-        { pos: 0.0, color: '#0000ffff' },
-        { pos: 1.0, color: '#000000ff' }
+    PresetGradients.Green = [
+        { pos: 0.00, color: '#bddb39' },
+        { pos: 0.25, color: '#78ca5a' },
+        { pos: 0.50, color: '#3eb373' },
+        { pos: 0.75, color: '#199980' },
+        { pos: 1.00, color: '#287d7d' },
     ];
-    PresetGradients.Oxygen = [
-        { pos: 0.0, color: 'red' },
-        { pos: 1.0, color: 'crimson' }
+    PresetGradients.Blue = [
+        { pos: 0.00, color: '#04bfbf' },
+        { pos: 0.25, color: '#00a0c0' },
+        { pos: 0.50, color: '#0084ad' },
+        { pos: 0.75, color: '#006c99' },
+        { pos: 1.00, color: '#1510f0' },
+    ];
+    PresetGradients.Red = [
+        { pos: 0.00, color: '#450003' },
+        { pos: 0.25, color: '#6f111a' },
+        { pos: 0.50, color: '#9d262c' },
+        { pos: 0.75, color: '#cd3c3f' },
+        { pos: 1.00, color: '#ff5252' },
+    ];
+    PresetGradients.Rainbow = [
+        { pos: 0.00, color: '#00796b' },
+        { pos: 0.25, color: '#3993cb' },
+        { pos: 0.50, color: '#d494e3' },
+        { pos: 0.75, color: '#ffb7b2' },
+        { pos: 1.00, color: '#fff176' },
     ];
     return PresetGradients;
 }());

package/controls/PrimaryButton/PrimaryButton.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { IIconProps } from '../Icon';
 interface IProps {
     /** @ignore */
     className?: string;
@@ -34,14 +35,9 @@ interface IProps {
     title?: string;
     /**
      * Path to an SVG symbol, e.g. `/aquaui-sprites.svg#close`. The `SVG` enumeration
-     * exists that offers preset paths.
+     * exists that offers preset paths. This may also be a full `IIconProps`.
      */
-    icon?: string;
-    /**
-     * The icon color defaults to the lightest neutral color, but can be
-     * overridden. This must be a valid CSS color value.
-     */
-    iconColor?: string;
+    icon?: string | IIconProps;
     /**
      * Fired when the button is clicked.
      */

package/controls/PrimaryButton/PrimaryButton.js

@@ -27,6 +27,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import * as React from 'react';
 import styled, { css } from 'styled-components';
 import { darken } from '../../helper/darken';
+import { Icon } from '../Icon';
 var PrimaryButtonBase = function (props) {
     var handleClick = function () {
         if (props.disabled)
@@ -35,8 +36,8 @@ var PrimaryButtonBase = function (props) {
             props.onClick();
     };
     return (React.createElement("button", { tabIndex: props.disabled ? -1 : 0, className: props.className, onClick: handleClick, title: props.title },
-        props.icon && React.createElement("svg", null,
-            React.createElement("use", { xlinkHref: props.icon })),
+        props.icon && typeof props.icon == "string" && React.createElement(Icon, { url: props.icon }),
+        props.icon && typeof props.icon != "string" && React.createElement(Icon, __assign({}, props.icon)),
         props.children));
 };
 var PrimaryButtonStyled = styled(PrimaryButtonBase).attrs(function (p) {
@@ -49,7 +50,7 @@ var PrimaryButtonStyled = styled(PrimaryButtonBase).attrs(function (p) {
         outlineColor: (p.positive || p.negative) ? p.theme.colors.primary[1]
             : p.theme.colors.accent
     };
-})(templateObject_2 || (templateObject_2 = __makeTemplateObject([" \n  // Size:\n  height: 56px;\n  padding-left: 16px;\n  padding-right: 16px;\n  min-width: 90px;\n  \n  // Font:\n  font: ", ";\n  color: ", ";\n\n  // Presentation:\n  background-color: ", ";\n  transition: \n    background-color ease-in-out ", "ms, \n    box-shadow ease-in-out ", "ms;\n  border-radius: ", "px;\n  border: none;\n  cursor: pointer;\n  user-select: none;\n  outline: none;\n\n  // Content:\n  display: flex;\n  align-items: center;\n  white-space: nowrap;\n  flex-wrap: nowrap;  \n  justify-content: center;  \n  gap: 12px;\n\n  box-shadow: ", ";\n  &:hover {\n    background-color: ", ";\n    box-shadow: ", ";\n  }\n  &:active {\n    background-color: ", ";\n    box-shadow: none;\n  }\n  &:focus {\n    outline: solid 2px ", ";\n  }\n  \n  svg {\n    fill: ", ";\n    width: 24px;\n    height: 24px;    \n  }\n\n  ", "\n"], [" \n  // Size:\n  height: 56px;\n  padding-left: 16px;\n  padding-right: 16px;\n  min-width: 90px;\n  \n  // Font:\n  font: ", ";\n  color: ", ";\n\n  // Presentation:\n  background-color: ", ";\n  transition: \n    background-color ease-in-out ", "ms, \n    box-shadow ease-in-out ", "ms;\n  border-radius: ", "px;\n  border: none;\n  cursor: pointer;\n  user-select: none;\n  outline: none;\n\n  // Content:\n  display: flex;\n  align-items: center;\n  white-space: nowrap;\n  flex-wrap: nowrap;  \n  justify-content: center;  \n  gap: 12px;\n\n  box-shadow: ", ";\n  &:hover {\n    background-color: ", ";\n    box-shadow: ", ";\n  }\n  &:active {\n    background-color: ", ";\n    box-shadow: none;\n  }\n  &:focus {\n    outline: solid 2px ", ";\n  }\n  \n  svg {\n    fill: ", ";\n    width: 24px;\n    height: 24px;    \n  }\n\n  ", "\n"
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject([" \n  // Size:\n  height: 56px;\n  padding-left: 16px;\n  padding-right: 16px;\n  min-width: 90px;\n  \n  // Font:\n  font: ", ";\n  color: ", ";\n\n  // Presentation:\n  background-color: ", ";\n  transition: \n    background-color ease-in-out ", "ms, \n    box-shadow ease-in-out ", "ms;\n  border-radius: ", "px;\n  border: none;\n  cursor: pointer;\n  user-select: none;\n  outline: none;\n\n  // Content:\n  display: flex;\n  align-items: center;\n  white-space: nowrap;\n  flex-wrap: nowrap;  \n  justify-content: center;  \n  gap: 12px;\n\n  box-shadow: ", ";\n  &:hover {\n    background-color: ", ";\n    box-shadow: ", ";\n  }\n  &:active {\n    background-color: ", ";\n    box-shadow: none;\n  }\n  &:focus {\n    outline: solid 2px ", ";\n  }\n  \n  svg {\n    width: 24px;\n    height: 24px;    \n  }\n\n  ", "\n"], [" \n  // Size:\n  height: 56px;\n  padding-left: 16px;\n  padding-right: 16px;\n  min-width: 90px;\n  \n  // Font:\n  font: ", ";\n  color: ", ";\n\n  // Presentation:\n  background-color: ", ";\n  transition: \n    background-color ease-in-out ", "ms, \n    box-shadow ease-in-out ", "ms;\n  border-radius: ", "px;\n  border: none;\n  cursor: pointer;\n  user-select: none;\n  outline: none;\n\n  // Content:\n  display: flex;\n  align-items: center;\n  white-space: nowrap;\n  flex-wrap: nowrap;  \n  justify-content: center;  \n  gap: 12px;\n\n  box-shadow: ", ";\n  &:hover {\n    background-color: ", ";\n    box-shadow: ", ";\n  }\n  &:active {\n    background-color: ", ";\n    box-shadow: none;\n  }\n  &:focus {\n    outline: solid 2px ", ";\n  }\n  \n  svg {\n    width: 24px;\n    height: 24px;    \n  }\n\n  ", "\n"
     /**
      * Primary buttons denote the primary action. They may have icons or not and
      * have three colors: `positive`, `negative`, and themed (the default).
@@ -62,7 +63,7 @@ var PrimaryButtonStyled = styled(PrimaryButtonBase).attrs(function (p) {
      * with `positive`, `negative` or `color`. The button can be in a `disabled`
      * state where it cannot be clicked.
      */
-])), function (p) { return p.theme.font.labelLarge; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.backgroundColor; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.radius.strong; }, function (p) { return p.theme.shadows.medium; }, function (p) { return darken(0.025, p.backgroundColor); }, function (p) { return p.theme.shadows.large; }, function (p) { return p.backgroundColor; }, function (p) { return p.outlineColor; }, function (p) { var _a; return (_a = p.iconColor) !== null && _a !== void 0 ? _a : p.theme.colors.neutral[100]; }, function (p) { return p.disabled && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    cursor: auto;\n    pointer-events: none;\n    color: ", ";\n    box-shadow: none;\n    svg {\n      fill: ", ";\n    }\n  "], ["\n    cursor: auto;\n    pointer-events: none;\n    color: ", ";\n    box-shadow: none;\n    svg {\n      fill: ", ";\n    }\n  "])), p.theme.colors.primary[3], p.theme.colors.primary[3]); });
+])), function (p) { return p.theme.font.labelLarge; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.backgroundColor; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.radius.strong; }, function (p) { return p.theme.shadows.medium; }, function (p) { return darken(0.025, p.backgroundColor); }, function (p) { return p.theme.shadows.large; }, function (p) { return p.backgroundColor; }, function (p) { return p.outlineColor; }, function (p) { return p.disabled && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    cursor: auto;\n    pointer-events: none;\n    color: ", ";\n    box-shadow: none;\n    svg {\n      fill: ", ";\n    }\n  "], ["\n    cursor: auto;\n    pointer-events: none;\n    color: ", ";\n    box-shadow: none;\n    svg {\n      fill: ", ";\n    }\n  "])), p.theme.colors.primary[3], p.theme.colors.primary[3]); });
 /**
  * Primary buttons denote the primary action. They may have icons or not and
  * have three colors: `positive`, `negative`, and themed (the default).

package/controls/SecondaryButton/SecondaryButton.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { IIconProps } from '../Icon';
 interface IProps {
     /** @ignore */
     className?: string;
@@ -9,9 +10,9 @@ interface IProps {
     disabled?: boolean;
     /**
      * Path to an SVG symbol, e.g. `/aquaui-sprites.svg#close`. The `SVG` enumeration
-     * exists that offers preset paths.
+     * exists that offers preset paths. This may also be a full `IIconProps`.
      */
-    icon: string;
+    icon: string | IIconProps;
     /**
      * A `positive` button will have a color that indicates a _positive
      * consequence_, taken from the theme (usually a shade of green).
@@ -35,11 +36,6 @@ interface IProps {
      * be relevant since this type of button has no text.
      */
     title?: string;
-    /**
-     * The icon color defaults to the lightest neutral color, but can be
-     * overridden. This must be a valid CSS color value.
-     */
-    iconColor?: string;
     /**
      * Fired when the button is clicked.
      */

package/controls/SecondaryButton/SecondaryButton.js

@@ -26,6 +26,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import * as React from 'react';
 import styled, { css } from 'styled-components';
+import { Icon } from '../Icon';
 var SecondaryButtonBase = function (props) {
     var handleClick = function () {
         if (props.disabled)
@@ -34,8 +35,8 @@ var SecondaryButtonBase = function (props) {
             props.onClick();
     };
     return (React.createElement("button", { tabIndex: props.disabled ? -1 : 0, className: props.className, onClick: handleClick, title: props.title },
-        React.createElement("svg", null,
-            React.createElement("use", { xlinkHref: props.icon }))));
+        typeof props.icon == "string" && React.createElement(Icon, { url: props.icon }),
+        typeof props.icon != "string" && React.createElement(Icon, __assign({}, props.icon))));
 };
 var SecondaryButtonStyled = styled(SecondaryButtonBase).attrs(function (p) {
     return {
@@ -45,7 +46,7 @@ var SecondaryButtonStyled = styled(SecondaryButtonBase).attrs(function (p) {
                     : p.color ? p.color
                         : p.theme.colors.neutral[10]
     };
-})(templateObject_3 || (templateObject_3 = __makeTemplateObject([" \n  // Size:\n  height: 32px;\n  width: 32px;\n\n  // Presentation:\n  background-color: ", ";\n  // (Note that there is no hover state.)\n  transition: \n    background-color ease-in-out ", "ms, \n    box-shadow ease-in-out ", "ms;\n  border-radius: ", "px;\n  border: none;\n  cursor: pointer;\n  user-select: none;\n  outline: none;\n  box-shadow: ", ";\n\n  // Content alignment:\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  white-space: nowrap;\n\n  &:hover {\n    box-shadow: ", ";\n  }\n\n  &:focus {\n    outline: solid 2px ", ";\n  }\n\n  // Button changes background & inset dropshadow when pressed:\n  &:active {\n    // Button background stays the same in case of color buttons:\n    ", "\n    box-shadow: none;\n  }\n\n  svg {\n    fill: ", ";\n    width: 13px;\n    height: 13px;\n  }  \n\n  ", "\n"], [" \n  // Size:\n  height: 32px;\n  width: 32px;\n\n  // Presentation:\n  background-color: ", ";\n  // (Note that there is no hover state.)\n  transition: \n    background-color ease-in-out ", "ms, \n    box-shadow ease-in-out ", "ms;\n  border-radius: ", "px;\n  border: none;\n  cursor: pointer;\n  user-select: none;\n  outline: none;\n  box-shadow: ", ";\n\n  // Content alignment:\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  white-space: nowrap;\n\n  &:hover {\n    box-shadow: ", ";\n  }\n\n  &:focus {\n    outline: solid 2px ", ";\n  }\n\n  // Button changes background & inset dropshadow when pressed:\n  &:active {\n    // Button background stays the same in case of color buttons:\n    ", "\n    box-shadow: none;\n  }\n\n  svg {\n    fill: ", ";\n    width: 13px;\n    height: 13px;\n  }  \n\n  ", "\n"
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject([" \n  // Size:\n  height: 32px;\n  width: 32px;\n\n  // Presentation:\n  background-color: ", ";\n  // (Note that there is no hover state.)\n  transition: \n    background-color ease-in-out ", "ms, \n    box-shadow ease-in-out ", "ms;\n  border-radius: ", "px;\n  border: none;\n  cursor: pointer;\n  user-select: none;\n  outline: none;\n  box-shadow: ", ";\n\n  // Content alignment:\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  white-space: nowrap;\n\n  &:hover {\n    box-shadow: ", ";\n  }\n\n  &:focus {\n    outline: solid 2px ", ";\n  }\n\n  // Button changes background & inset dropshadow when pressed:\n  &:active {\n    // Button background stays the same in case of color buttons:\n    ", "\n    box-shadow: none;\n  }\n\n  svg {\n    width: 13px;\n    height: 13px;\n  }  \n\n  ", "\n"], [" \n  // Size:\n  height: 32px;\n  width: 32px;\n\n  // Presentation:\n  background-color: ", ";\n  // (Note that there is no hover state.)\n  transition: \n    background-color ease-in-out ", "ms, \n    box-shadow ease-in-out ", "ms;\n  border-radius: ", "px;\n  border: none;\n  cursor: pointer;\n  user-select: none;\n  outline: none;\n  box-shadow: ", ";\n\n  // Content alignment:\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  white-space: nowrap;\n\n  &:hover {\n    box-shadow: ", ";\n  }\n\n  &:focus {\n    outline: solid 2px ", ";\n  }\n\n  // Button changes background & inset dropshadow when pressed:\n  &:active {\n    // Button background stays the same in case of color buttons:\n    ", "\n    box-shadow: none;\n  }\n\n  svg {\n    width: 13px;\n    height: 13px;\n  }  \n\n  ", "\n"
     /**
      * The `SecondaryButton` is a small button that holds only an icon. It has no
      * other content. It renders as a `<button>` element.
@@ -55,7 +56,7 @@ var SecondaryButtonStyled = styled(SecondaryButtonBase).attrs(function (p) {
      *
      * A `disabled` button cannot be clicked at all.
      */
-])), function (p) { return p.backgroundColor; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.shadows.small; }, function (p) { return p.theme.shadows.medium; }, function (p) { return p.theme.colors.primary[1]; }, function (p) { return !p.positive && !p.negative && !p.color && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["background-color: ", ";"], ["background-color: ", ";"])), p.theme.colors.neutral[10]); }, function (p) { var _a; return (_a = p.iconColor) !== null && _a !== void 0 ? _a : p.theme.colors.neutral[100]; }, function (p) { return p.disabled && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    cursor: auto;\n    pointer-events: none;\n    box-shadow: none;\n    svg {\n      fill: ", ";\n    }\n  "], ["\n    cursor: auto;\n    pointer-events: none;\n    box-shadow: none;\n    svg {\n      fill: ", ";\n    }\n  "])), p.theme.colors.primary[3]); });
+])), function (p) { return p.backgroundColor; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.shadows.small; }, function (p) { return p.theme.shadows.medium; }, function (p) { return p.theme.colors.primary[1]; }, function (p) { return !p.positive && !p.negative && !p.color && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["background-color: ", ";"], ["background-color: ", ";"])), p.theme.colors.neutral[10]); }, function (p) { return p.disabled && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    cursor: auto;\n    pointer-events: none;\n    box-shadow: none;\n    svg {\n      fill: ", ";\n    }\n  "], ["\n    cursor: auto;\n    pointer-events: none;\n    box-shadow: none;\n    svg {\n      fill: ", ";\n    }\n  "])), p.theme.colors.primary[3]); });
 /**
  * The `SecondaryButton` is a small button that holds only an icon. It has no
  * other content. It renders as a `<button>` element.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@longline/aqua-ui",
-  "version": "1.0.36",
+  "version": "1.0.38",
   "description": "AquaUI",
   "author": "Alexander van Oostenrijk / Longline Environment",
   "license": "Commercial",