Merge pull request #7819 from IgniteUI/mpopov/watermark-docs

Adding watermark docs

Author: simeonoff

projects/igniteui-angular/src/lib/core/styles/components/watermark/_watermark-theme.scss

@@ -7,6 +7,10 @@
 /// Returns a map containing all style properties related to the theming the watermark directive.
 /// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.
 /// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.
+/// @param {Number} $border-radius [null] - The border radius used for the link.
+/// @param {Color} $border-color [null] - The border color used for the  link.
+/// @param {Color} $link-background [null] - The background color used for the link.
+/// @param {Color} $color [null] - The color used for the link text.
 ///
 /// @requires $default-palette
 /// @requires $light-schema
@@ -15,10 +19,10 @@
 /// @requires text-contrast
 /// @requires round-borders
 ///
-/// @example scss Change the watermark background
-///   $my-watermark-theme: igx-watermark-theme($background: magenta);
+/// @example scss Change the watermark link background
+///   $my-watermark-theme: igx-watermark-theme($link-background: magenta);
 ///   // Pass the theme to the igx-watermark component mixin
-///   @include igx-watermark($my-checkbox-theme);
+///   @include igx-watermark($my-watermark-theme);
 @function igx-watermark-theme(
     $palette: $default-palette,
     $schema: $light-schema,
@@ -85,6 +89,7 @@
         font-size: rem(14px);
         padding: rem(2px) rem(4px);
         line-height: normal;
+        border-radius: --var($theme, 'border-radius');
         border: 1px solid --var($theme, 'border-color');
         color: --var($theme, 'color');
         z-index: 10002;
@@ -111,3 +116,4 @@
         }
     }
 }
+

projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_watermark.scss

@@ -12,8 +12,13 @@ $_light-watermark-image: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3
 /// Generates a light watermark schema.
 /// @type {Map}
 /// @see $default-palette
+/// @prop {Number} $border-radius [0] - The border radius fraction, between 0-1 to be used for the link.
+/// @prop {Map} $border-color [igx-color: ('primary')] - The border color used for the link.
+/// @prop {Map} $link-background [igx-color: ('primary')] - The background color used for the link.
+/// @prop {Color} $color [#fff] - The color used for the link text.
+/// @requires {function} extend
 $_light-watermark: extend(
-    $_square-shape-watermark,
+    $_material-shape-watermark,
     (
         variant: 'material',
 
@@ -22,56 +27,59 @@ $_light-watermark: extend(
         ),
 
         background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTg0IiBoZWlnaHQ9IjEwNCIgdmlld0JveD0iMCAwIDE4NCAxMDQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIG9wYWNpdHk9IjAuMDUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTYuNyAxMC4xTDEwLjMgOC4zOTk5OUwxMi4xIDEuNjk5OTlMNy4xIDAuMzk5OTk0TDUuMyA3LjA5OTk5TDIuMyA2LjI5OTk5TDEuMSAxMC42TDQuMSAxMS40TDEuMiAyMi4yQzAuMjk5OTk3IDI1LjUgMC4xOTk5OTcgMjcuOSAwLjc5OTk5NyAyOS40QzEuNSAzMC45IDMuMSAzMiA1LjcgMzIuN0M3LjMgMzMuMSA5IDMzLjMgMTAuNiAzMy40TDExLjUgMjkuM0w3LjcgMjguNEM2LjYgMjguMSA1LjkgMjcuNiA1LjggMjYuOUM1LjggMjUuNiA2IDI0LjMgNi40IDIzTDkuMSAxMi44TDE1LjUgMTQuNUwxNi43IDEwLjFaTTE5LjcgMzUuOEwyNCAxOS42TDI1LjEgMTkuNUMyNy41IDE5LjIgMzAgMTkuMSAzMi41IDE5LjNMMzMuOSAxNC4yQzMwLjkgMTQgMjcuOSAxNC40IDI1LjEgMTUuNEwyNS44IDEyLjZMMjAuOCAxMS4zTDE0LjYgMzQuNUwxOS43IDM1LjhaTTM2LjUgNDAuM0w0Mi43IDE3LjFMMzcuNiAxNS43TDMxLjQgMzguOUwzNi41IDQwLjNaTTQzLjggMTMuMkw0NS4yIDcuODk5OTlMNDAuMSA2LjQ5OTk5TDM4LjcgMTEuOEw0My44IDEzLjJaTTYzLjggMjQuMkM2Mi45IDIyLjYgNjEgMjEuNSA1OC4yIDIwLjdDNTUgMTkuOSA1MS44IDE5LjUgNDguNiAxOS40TDQ3LjcgMjNMNDkuMiAyMy4zQzUyLjIgMjMuOCA1NC44IDI0LjQgNTYuNyAyNC45QzU3LjYgMjUuMSA1OC40IDI1LjYgNTguOSAyNi4zQzU5LjMgMjcuMiA1OS40IDI4LjIgNTkgMjkuMUw1OC41IDMwLjhMNTIuNCAyOS43QzUwLjMgMjkuMiA0OC4xIDI5LjMgNDYuMSAzMC4xQzQ0LjYgMzAuOCA0My41IDMyLjMgNDIuOCAzNC43QzQxLjUgMzkuNiA0My4xIDQyLjcgNDcuNyA0My45QzUwLjMgNDQuNiA1MyA0NC43IDU1LjYgNDQuMkM1Ny4xIDQ1LjkgNTkuMSA0Ny4xIDYxLjMgNDcuNkw2Mi41IDQzLjhDNjIgNDMuNiA2MS41IDQzLjMgNjEuMiA0Mi44QzYxIDQyLjMgNjAuOSA0MS43IDYxLjEgNDEuMUw2My45IDMwLjVDNjQuOCAyNy44IDY0LjcgMjUuNyA2My44IDI0LjJaTTU3LjcgMzQuNEw1NiA0MC41TDU1LjEgNDAuNkM1My40IDQwLjYgNTEuNiA0MC41IDUwIDQwQzQ4LjEgMzkuNSA0Ny41IDM4LjIgNDggMzZDNDguMyAzNC4yIDQ5LjkgMzMgNTEuNyAzMy4zQzUxLjkgMzMuMyA1MiAzMy40IDUyLjIgMzMuNEw1Ny43IDM0LjRaTTcxLjUgNDkuNkw4MC4zIDE2LjhMNzUuMiAxNS40TDY2LjQgNDguMkw3MS41IDQ5LjZaIiBmaWxsPSIjMDA5OUZGIi8+Cjwvc3ZnPgo='),
+
         color: #fff,
 
         border-color: (
             igx-color: ('primary'),
         ),
-
-        roundness: rem(0)
     )
 );
 
 /// Generates a light fluent watermark schema.
 /// @type {Map}
+/// @prop {Number} $border-radius [2px] - The border radius used for the link.
 /// @requires {function} extend
 /// @requires {Map} $_light-watermark
 $_fluent-watermark: extend(
     $_light-watermark,
     $_fluent-shape-watermark,
     (
         variant: 'fluent',
+
         background-image: #{url($_light-watermark-image)},
-        roundness: rem(2px)
     )
 );
 
 /// Generates a bootstrap watermark schema.
 /// @type {Map}
+/// @prop {Number} $border-radius [4px] - The border radius used for the link.
 /// @requires {function} extend
 /// @requires {Map} $_light-watermark
 $_bootstrap-watermark: extend(
     $_light-watermark,
     $_bootstrap-shape-watermark,
     (
         variant: 'bootstrap',
+
         background-image: #{url($_light-watermark-image)},
-        roundness: rem(4px)
     )
 );
 
 /// Generates an indigo watermark schema.
 /// @type {Map}
+/// @prop {Map} $border-color [igx-color: ('primary', 300)] - The border color for the link.
+/// @prop {Number} $border-radius [1] - The border radius fraction, between 0-1 to be used for the link.
 /// @requires {function} extend
 /// @requires {Map} $_light-watermark
 $_indigo-watermark: extend(
     $_light-watermark,
+    $_indigo-shape-watermark,
     (
         variant: 'indigo-design',
+
         background-image: #{url($_light-watermark-image)},
-        link-background: (
-            igx-color: 'primary',
-        ),
+
         border-color: (
             igx-color: ('primary', 300),
         ),

projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_watermark.scss

@@ -3,19 +3,34 @@
 /// @access private
 /// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
 ////
+
+/// @type Map
 $_round-shape-watermark: (
     border-radius: 1,
 );
 
+/// @type Map
 $_square-shape-watermark: (
     border-radius: 0,
 );
 
+/// @type Map
+$_material-shape-watermark: (
+    border-radius: 0,
+);
+
+/// @type Map
 $_fluent-shape-watermark: (
     border-radius: 2px,
 );
 
+/// @type Map
 $_bootstrap-shape-watermark: (
     border-radius: 4px,
 );
 
+/// @type Map
+$_indigo-shape-watermark: (
+    border-radius: 1,
+);
+