chore(release): 1.0.0-v1-release.3 [skip ci]nn# [1.0.0-v1-release.3](v…

…1.0.0-v1-release.2...v1.0.0-v1-release.3) (2020-08-18) ### Features * **foundryprovider:** replace useColor hook with generic useTheme hook ([7a13871](7a13871)) ### BREAKING CHANGES * **foundryprovider:** Removed the useColors function
Headstorm · Aug 18, 2020 · 7b7af19 · 7b7af19
1 parent 85d93d1
commit 7b7af19
Show file tree

Hide file tree

Showing 50 changed files with 686 additions and 619 deletions.
diff --git a/packages/hs-react-ui/CHANGELOG.md b/packages/hs-react-ui/CHANGELOG.md
@@ -1,3 +1,15 @@
+# [1.0.0-v1-release.3](https://github.com/Headstorm/rasa-ui/compare/v1.0.0-v1-release.2...v1.0.0-v1-release.3) (2020-08-18)
+
+
+### Features
+
+* **foundryprovider:** replace useColor hook with generic useTheme hook ([7a13871](https://github.com/Headstorm/rasa-ui/commit/7a13871d65dfbe78e7057d9eb9efad2eb0b335a1))
+
+
+### BREAKING CHANGES
+
+* **foundryprovider:** Removed the useColors function
+
 # [1.0.0-v1-release.2](https://github.com/Headstorm/rasa-ui/compare/v1.0.0-v1-release.1...v1.0.0-v1-release.2) (2020-08-17)
 
 

diff --git a/packages/hs-react-ui/coverage/clover.xml b/packages/hs-react-ui/coverage/clover.xml
diff --git a/packages/hs-react-ui/coverage/coverage-final.json b/packages/hs-react-ui/coverage/coverage-final.json
diff --git a/packages/hs-react-ui/coverage/lcov-report/index.html b/packages/hs-react-ui/coverage/lcov-report/index.html
@@ -23,16 +23,16 @@ <h1>All files</h1>
         <div class='clearfix'>
 
             <div class='fl pad1y space-right2'>
-                <span class="strong">42.93% </span>
+                <span class="strong">42.95% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>264/615</span>
+                <span class='fraction'>265/617</span>
             </div>
 
 
             <div class='fl pad1y space-right2'>
-                <span class="strong">36.57% </span>
+                <span class="strong">36.4% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>241/659</span>
+                <span class='fraction'>241/662</span>
             </div>
 
 
@@ -44,9 +44,9 @@ <h1>All files</h1>
 
 
             <div class='fl pad1y space-right2'>
-                <span class="strong">43.38% </span>
+                <span class="strong">43.4% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>262/604</span>
+                <span class='fraction'>263/606</span>
             </div>
 
 
@@ -299,17 +299,17 @@ <h1>All files</h1>
 
 <tr>
 	<td class="file medium" data-value="src/context"><a href="src/context/index.html">src/context</a></td>
-	<td data-value="78.57" class="pic medium">
-	<div class="chart"><div class="cover-fill" style="width: 78%"></div><div class="cover-empty" style="width: 22%"></div></div>
+	<td data-value="75" class="pic medium">
+	<div class="chart"><div class="cover-fill" style="width: 75%"></div><div class="cover-empty" style="width: 25%"></div></div>
 	</td>
-	<td data-value="78.57" class="pct medium">78.57%</td>
-	<td data-value="14" class="abs medium">11/14</td>
-	<td data-value="25" class="pct low">25%</td>
-	<td data-value="4" class="abs low">1/4</td>
+	<td data-value="75" class="pct medium">75%</td>
+	<td data-value="16" class="abs medium">12/16</td>
+	<td data-value="14.29" class="pct low">14.29%</td>
+	<td data-value="7" class="abs low">1/7</td>
 	<td data-value="80" class="pct high">80%</td>
 	<td data-value="5" class="abs high">4/5</td>
-	<td data-value="78.57" class="pct medium">78.57%</td>
-	<td data-value="14" class="abs medium">11/14</td>
+	<td data-value="75" class="pct medium">75%</td>
+	<td data-value="16" class="abs medium">12/16</td>
 	</tr>
 
 <tr>
@@ -365,7 +365,7 @@ <h1>All files</h1>
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank">istanbul</a>
-                at Mon Aug 17 2020 20:07:05 GMT+0000 (Coordinated Universal Time)
+                at Tue Aug 18 2020 15:24:37 GMT+0000 (Coordinated Universal Time)
             </div>
         </div>
         <script src="prettify.js"></script>

diff --git a/packages/hs-react-ui/coverage/lcov-report/src/components/Button/Button.tsx.html b/packages/hs-react-ui/coverage/lcov-report/src/components/Button/Button.tsx.html
@@ -448,7 +448,7 @@ <h1><a href="../../../index.html">All files</a> / <a href="index.html">src/compo
 import { darken } from 'polished';
 &nbsp;
 import timings from '../../enums/timings';
-import { useColors } from '../../context';
+import { useTheme } from '../../context';
 import variants from '../../enums/variants';
 import Progress from '../Progress/Progress';
 import { Div, Button as ButtonElement } from '../../htmlElements';
@@ -498,9 +498,9 @@ <h1><a href="../../../index.html">All files</a> / <a href="index.html">src/compo
   ButtonElement,
 )`
   ${({ disabled, elevation = <span class="branch-0 cbranch-no" title="branch not covered" >0,</span> color, variant }: ButtonContainerProps) =&gt; {
-    const { transparent, background, grayDark, shadow } = useColors();
-    const backgroundColor = getBackgroundColorFromVariant(variant, color, transparent);
-    const fontColor = getFontColorFromVariant(variant, color, background, grayDark);
+    const { colors } = useTheme();
+    const backgroundColor = getBackgroundColorFromVariant(variant, color, colors.transparent);
+    const fontColor = getFontColorFromVariant(variant, color, colors.background, colors.grayDark);
 &nbsp;
     return `
       display: inline-flex;
@@ -513,9 +513,9 @@ <h1><a href="../../../index.html">All files</a> / <a href="index.html">src/compo
         outline ${timings.slow},
         filter ${timings.slow},
         box-shadow ${timings.slow};
-      ${getShadowStyle(elevation, shadow)}
+      ${getShadowStyle(elevation, colors.shadow)}
       outline: 0 none;
-      border: ${variant === variants.outline ? `1px solid ${color || <span class="branch-1 cbranch-no" title="branch not covered" >grayDark}</span>` : '0 none;'};
+      border: ${variant === variants.outline ? `1px solid ${color || <span class="branch-1 cbranch-no" title="branch not covered" >colors.grayDark}</span>` : '0 none;'};
       cursor: pointer;
       background-color: ${backgroundColor};
       color: ${fontColor};
@@ -578,8 +578,8 @@ <h1><a href="../../../index.html">All files</a> / <a href="index.html">src/compo
   id,
 }: ButtonProps): JSX.Element | null =&gt; {
   const hasContent = Boolean(children);
-  const { grayLight } = useColors();
-  const containerColor = color || grayLight;
+  const { colors } = useTheme();
+  const containerColor = color || colors.grayLight;
   // get everything we expose + anything consumer wants to send to container
   const mergedContainerProps = {
     'data-test-id': 'hsui-button',
@@ -640,7 +640,7 @@ <h1><a href="../../../index.html">All files</a> / <a href="index.html">src/compo
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank">istanbul</a>
-                at Mon Aug 17 2020 20:07:05 GMT+0000 (Coordinated Universal Time)
+                at Tue Aug 18 2020 15:24:37 GMT+0000 (Coordinated Universal Time)
             </div>
         </div>
         <script src="../../../prettify.js"></script>

diff --git a/packages/hs-react-ui/coverage/lcov-report/src/components/Button/index.html b/packages/hs-react-ui/coverage/lcov-report/src/components/Button/index.html
@@ -95,7 +95,7 @@ <h1><a href="../../../index.html">All files</a> src/components/Button</h1>
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank">istanbul</a>
-                at Mon Aug 17 2020 20:07:05 GMT+0000 (Coordinated Universal Time)
+                at Tue Aug 18 2020 15:24:37 GMT+0000 (Coordinated Universal Time)
             </div>
         </div>
         <script src="../../../prettify.js"></script>

diff --git a/packages/hs-react-ui/coverage/lcov-report/src/components/Card/Card.tsx.html b/packages/hs-react-ui/coverage/lcov-report/src/components/Card/Card.tsx.html
@@ -179,7 +179,11 @@ <h1><a href="../../../index.html">All files</a> / <a href="index.html">src/compo
 <a name='L120'></a><a href='#L120'>120</a>
 <a name='L121'></a><a href='#L121'>121</a>
 <a name='L122'></a><a href='#L122'>122</a>
-<a name='L123'></a><a href='#L123'>123</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L123'></a><a href='#L123'>123</a>
+<a name='L124'></a><a href='#L124'>124</a>
+<a name='L125'></a><a href='#L125'>125</a>
+<a name='L126'></a><a href='#L126'>126</a>
+<a name='L127'></a><a href='#L127'>127</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -191,6 +195,7 @@ <h1><a href="../../../index.html">All files</a> / <a href="index.html">src/compo
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -207,6 +212,7 @@ <h1><a href="../../../index.html">All files</a> / <a href="index.html">src/compo
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -224,6 +230,7 @@ <h1><a href="../../../index.html">All files</a> / <a href="index.html">src/compo
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -234,6 +241,7 @@ <h1><a href="../../../index.html">All files</a> / <a href="index.html">src/compo
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -307,33 +315,35 @@ <h1><a href="../../../index.html">All files</a> / <a href="index.html">src/compo
 import timings from '../../enums/timings';
 import { Div } from '../../htmlElements';
 import { SubcomponentPropsType } from '../commonTypes';
-import { useColors } from '../../context';
+import { useTheme } from '../../context';
 import { getShadowStyle } from '../../utils/styles';
 &nbsp;
 export const CardContainer = <span class="cstat-no" title="statement not covered" >styled(Div)`</span>
   ${<span class="fstat-no" title="function not covered" >({</span> elevation }: { elevation: number }) =&gt; {
-    const { grayXlight, background, shadow } = <span class="cstat-no" title="statement not covered" >useColors();</span>
+    const { colors } = <span class="cstat-no" title="statement not covered" >useTheme();</span>
+&nbsp;
 <span class="cstat-no" title="statement not covered" >    return `</span>
       display: inline-flex;
       flex-flow: column nowrap;
       font-size: 1rem;
       border-radius: 0.25rem;
-      border: ${!elevation ? `1px solid ${grayXlight}` : '0px solid transparent'};
+      border: ${!elevation ? `1px solid ${colors.grayXlight}` : '0px solid transparent'};
       transition: filter ${timings.slow}, box-shadow ${timings.slow}, border ${timings.normal};
-      ${getShadowStyle(elevation, shadow)}
-      background-color: ${background};
+      ${getShadowStyle(elevation, colors.shadow)}
+      background-color: ${colors.background};
   `;
   }}
 `;
 &nbsp;
 export const Header = <span class="cstat-no" title="statement not covered" >styled(Div)`</span>
   ${<span class="fstat-no" title="function not covered" >()</span> =&gt; {
-    const { grayDark } = <span class="cstat-no" title="statement not covered" >useColors();</span>
+    const { colors } = <span class="cstat-no" title="statement not covered" >useTheme();</span>
+&nbsp;
 <span class="cstat-no" title="statement not covered" >    return `</span>
       padding: 1.5rem 1.5rem 0rem;
       border-radius: 0.25rem 0.25rem 0rem 0rem;
       font-weight: bold;
-      color: ${grayDark};
+      color: ${colors.grayDark};
     `;
   }}
 `;
@@ -345,25 +355,27 @@ <h1><a href="../../../index.html">All files</a> / <a href="index.html">src/compo
 &nbsp;
 export const Body = <span class="cstat-no" title="statement not covered" >styled(Div)`</span>
   ${<span class="fstat-no" title="function not covered" >()</span> =&gt; {
-    const { grayMedium } = <span class="cstat-no" title="statement not covered" >useColors();</span>
+    const { colors } = <span class="cstat-no" title="statement not covered" >useTheme();</span>
+&nbsp;
 <span class="cstat-no" title="statement not covered" >    return `</span>
       padding: 1.5rem 1.5rem;
-      color: ${grayMedium};
+      color: ${colors.grayMedium};
     `;
   }}
 `;
 &nbsp;
 export const Footer = <span class="cstat-no" title="statement not covered" >styled(Div)`</span>
   ${<span class="fstat-no" title="function not covered" >()</span> =&gt; {
-    const { grayLight } = <span class="cstat-no" title="statement not covered" >useColors();</span>
+    const { colors } = <span class="cstat-no" title="statement not covered" >useTheme();</span>
+&nbsp;
 <span class="cstat-no" title="statement not covered" >    return `</span>
       padding: 1rem 1.5rem;
       display: flex;
       flex-flow: row wrap;
 &nbsp;
       justify-content: flex-end;
 &nbsp;
-      color: ${grayLight};
+      color: ${colors.grayLight};
 &nbsp;
       border-radius: 0rem 0rem 0.25rem 0.25rem;
     `;
@@ -430,7 +442,7 @@ <h1><a href="../../../index.html">All files</a> / <a href="index.html">src/compo
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank">istanbul</a>
-                at Mon Aug 17 2020 20:07:05 GMT+0000 (Coordinated Universal Time)
+                at Tue Aug 18 2020 15:24:37 GMT+0000 (Coordinated Universal Time)
             </div>
         </div>
         <script src="../../../prettify.js"></script>

diff --git a/packages/hs-react-ui/coverage/lcov-report/src/components/Card/index.html b/packages/hs-react-ui/coverage/lcov-report/src/components/Card/index.html
@@ -95,7 +95,7 @@ <h1><a href="../../../index.html">All files</a> src/components/Card</h1>
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank">istanbul</a>
-                at Mon Aug 17 2020 20:07:05 GMT+0000 (Coordinated Universal Time)
+                at Tue Aug 18 2020 15:24:37 GMT+0000 (Coordinated Universal Time)
             </div>
         </div>
         <script src="../../../prettify.js"></script>

diff --git a/packages/hs-react-ui/coverage/lcov-report/src/components/Checkbox/Checkbox.tsx.html b/packages/hs-react-ui/coverage/lcov-report/src/components/Checkbox/Checkbox.tsx.html
@@ -522,7 +522,7 @@ <h1><a href="../../../index.html">All files</a> / <a href="index.html">src/compo
 &nbsp;
 import { Div, Input as InputElement, Label as LabelElement } from '../../htmlElements';
 import { SubcomponentPropsType } from '../commonTypes';
-import { useColors } from '../../context';
+import { useTheme } from '../../context';
 import variants from '../../enums/variants';
 import { darken } from 'polished';
 import { disabledStyles } from '../../utils/color';
@@ -552,7 +552,7 @@ <h1><a href="../../../index.html">All files</a> / <a href="index.html">src/compo
 &nbsp;
 export const Label = styled(LabelElement)`
   ${({ disabled }) =&gt; {
-    const { grayXlight } = useColors();
+    const { colors } = useTheme();
     return `
       display: flex;
       align-items: center;
@@ -561,7 +561,7 @@ <h1><a href="../../../index.html">All files</a> / <a href="index.html">src/compo
       font-size: 1em;
 
       ${Input}:focus + &amp; {
-        box-shadow: 0 0 0 3px ${grayXlight};
+        box-shadow: 0 0 0 3px ${colors.grayXlight};
       }
       ${disabled ? <span class="branch-0 cbranch-no" title="branch not covered" >disabledStyles() </span>: ''}
     `;
@@ -570,11 +570,11 @@ <h1><a href="../../../index.html">All files</a> / <a href="index.html">src/compo
 &nbsp;
 export const Box = styled(Div)`
   ${({ variant, checked, checkboxType }) =&gt; {
-    const { grayLight, success, destructive, background } = useColors();
-    let color = grayLight;
-    if (checkboxType === CheckboxTypes.check &amp;&amp; checked) color = success;
-    <span class="missing-if-branch" title="if path not taken" >I</span>if (checkboxType === CheckboxTypes.cross &amp;&amp; <span class="branch-1 cbranch-no" title="branch not covered" >checked)</span> <span class="cstat-no" title="statement not covered" >color = destructive;</span>
-    const backgroundColor = variant === variants.fill &amp;&amp; checked ? color : background;
+    const { colors } = useTheme();
+    let color = colors.grayLight;
+    if (checkboxType === CheckboxTypes.check &amp;&amp; checked) color = colors.success;
+    <span class="missing-if-branch" title="if path not taken" >I</span>if (checkboxType === CheckboxTypes.cross &amp;&amp; <span class="branch-1 cbranch-no" title="branch not covered" >checked)</span> <span class="cstat-no" title="statement not covered" >color = colors.destructive;</span>
+    const backgroundColor = variant === variants.fill &amp;&amp; checked ? color : colors.background;
 &nbsp;
     return `
       ${
@@ -611,35 +611,35 @@ <h1><a href="../../../index.html">All files</a> / <a href="index.html">src/compo
 &nbsp;
 const CheckIcon = styled(BaseIcon)`
   ${({ variant }) =&gt; {
-    const { success, background } = useColors();
+    const { colors } = useTheme();
     return `
-      color: ${variant === variants.fill ? background : <span class="branch-1 cbranch-no" title="branch not covered" >success}</span>;
+      color: ${variant === variants.fill ? colors.background : <span class="branch-1 cbranch-no" title="branch not covered" >colors.success}</span>;
     `;
   }}
 `;
 &nbsp;
 const CrossIcon = styled(BaseIcon)`
   ${<span class="fstat-no" title="function not covered" >({</span> variant }) =&gt; {
-    const { destructive, background } = <span class="cstat-no" title="statement not covered" >useColors();</span>
+    const { colors } = <span class="cstat-no" title="statement not covered" >useTheme();</span>
 <span class="cstat-no" title="statement not covered" >    return `</span>
-      color: ${variant === variants.fill ? background : destructive};
+      color: ${variant === variants.fill ? colors.background : colors.destructive};
     `;
   }}
 `;
 &nbsp;
 const DefaultIcon = styled(BaseIcon)`
   ${<span class="fstat-no" title="function not covered" >()</span> =&gt; {
-    const { grayLight } = <span class="cstat-no" title="statement not covered" >useColors();</span>
+    const { colors } = <span class="cstat-no" title="statement not covered" >useTheme();</span>
 <span class="cstat-no" title="statement not covered" >    return `</span>
-      color: ${grayLight}
+      color: ${colors.grayLight}
     `;
   }}
 `;
 &nbsp;
 const NeutralIcon = styled(BaseIcon)`
   ${<span class="fstat-no" title="function not covered" >({</span> variant }) =&gt; {
-    const { grayMedium, background } = <span class="cstat-no" title="statement not covered" >useColors();</span>
-    const color = <span class="cstat-no" title="statement not covered" >variant === variants.fill ? background : grayMedium;</span>
+    const { colors } = <span class="cstat-no" title="statement not covered" >useTheme();</span>
+    const color = <span class="cstat-no" title="statement not covered" >variant === variants.fill ? colors.background : colors.grayMedium;</span>
 <span class="cstat-no" title="statement not covered" >    return `</span>
       color: ${color};
       path {
@@ -751,7 +751,7 @@ <h1><a href="../../../index.html">All files</a> / <a href="index.html">src/compo
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank">istanbul</a>
-                at Mon Aug 17 2020 20:07:05 GMT+0000 (Coordinated Universal Time)
+                at Tue Aug 18 2020 15:24:37 GMT+0000 (Coordinated Universal Time)
             </div>
         </div>
         <script src="../../../prettify.js"></script>

diff --git a/packages/hs-react-ui/coverage/lcov-report/src/components/Checkbox/index.html b/packages/hs-react-ui/coverage/lcov-report/src/components/Checkbox/index.html
@@ -95,7 +95,7 @@ <h1><a href="../../../index.html">All files</a> src/components/Checkbox</h1>
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank">istanbul</a>
-                at Mon Aug 17 2020 20:07:05 GMT+0000 (Coordinated Universal Time)
+                at Tue Aug 18 2020 15:24:37 GMT+0000 (Coordinated Universal Time)
             </div>
         </div>
         <script src="../../../prettify.js"></script>