@instructure/ui-metric 8.9.2-snapshot.4 → 8.10.1-snapshot.4

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.10.0](https://github.com/instructure/instructure-ui/compare/v8.9.1...v8.10.0) (2021-09-28)
+
+**Note:** Version bump only for package @instructure/ui-metric
+
 ## [8.9.1](https://github.com/instructure/instructure-ui/compare/v8.9.0...v8.9.1) (2021-09-16)
 
 **Note:** Version bump only for package @instructure/ui-metric

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-metric",
-  "version": "8.9.2-snapshot.4+bf1e82efc",
+  "version": "8.10.1-snapshot.4+6c5c9e653",
   "description": "A UI component for displaying Metrics",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "commonjs",
@@ -25,20 +25,20 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/console": "8.9.2-snapshot.4+bf1e82efc",
-    "@instructure/emotion": "8.9.2-snapshot.4+bf1e82efc",
-    "@instructure/shared-types": "8.9.2-snapshot.4+bf1e82efc",
-    "@instructure/ui-prop-types": "8.9.2-snapshot.4+bf1e82efc",
-    "@instructure/ui-react-utils": "8.9.2-snapshot.4+bf1e82efc",
-    "@instructure/ui-testable": "8.9.2-snapshot.4+bf1e82efc",
+    "@instructure/console": "8.10.1-snapshot.4+6c5c9e653",
+    "@instructure/emotion": "8.10.1-snapshot.4+6c5c9e653",
+    "@instructure/shared-types": "8.10.1-snapshot.4+6c5c9e653",
+    "@instructure/ui-prop-types": "8.10.1-snapshot.4+6c5c9e653",
+    "@instructure/ui-react-utils": "8.10.1-snapshot.4+6c5c9e653",
+    "@instructure/ui-testable": "8.10.1-snapshot.4+6c5c9e653",
     "prop-types": "^15"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.9.2-snapshot.4+bf1e82efc",
-    "@instructure/ui-color-utils": "8.9.2-snapshot.4+bf1e82efc",
-    "@instructure/ui-test-locator": "8.9.2-snapshot.4+bf1e82efc",
-    "@instructure/ui-test-utils": "8.9.2-snapshot.4+bf1e82efc",
-    "@instructure/ui-themes": "8.9.2-snapshot.4+bf1e82efc"
+    "@instructure/ui-babel-preset": "8.10.1-snapshot.4+6c5c9e653",
+    "@instructure/ui-color-utils": "8.10.1-snapshot.4+6c5c9e653",
+    "@instructure/ui-test-locator": "8.10.1-snapshot.4+6c5c9e653",
+    "@instructure/ui-test-utils": "8.10.1-snapshot.4+6c5c9e653",
+    "@instructure/ui-themes": "8.10.1-snapshot.4+6c5c9e653"
   },
   "peerDependencies": {
     "react": ">=16.8 <=17"
@@ -47,5 +47,5 @@
     "access": "public"
   },
   "sideEffects": false,
-  "gitHead": "bf1e82efccb682510708448efd369eddaa24f74b"
+  "gitHead": "6c5c9e653f7ce3d239296f4ed19c5679fdddcd5b"
 }

package/src/Metric/props.ts

@@ -25,8 +25,8 @@
 import { ReactNode } from 'react'
 import PropTypes from 'prop-types'
 
-import type { PropValidators } from '@instructure/shared-types'
-import type { WithStyleProps } from '@instructure/emotion'
+import type { PropValidators, MetricTheme } from '@instructure/shared-types'
+import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
 
 type MetricOwnProps = {
   textAlign: 'start' | 'center' | 'end'
@@ -43,7 +43,9 @@ type PropKeys = keyof MetricOwnProps
 
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
-type MetricProps = MetricOwnProps & WithStyleProps
+type MetricProps = MetricOwnProps & WithStyleProps<MetricTheme, MetricStyle>
+
+type MetricStyle = ComponentStyle<'metric' | 'label' | 'value'>
 
 const propTypes: PropValidators<PropKeys> = {
   textAlign: PropTypes.oneOf(['start', 'center', 'end']),
@@ -59,5 +61,5 @@ const allowedProps: AllowedPropKeys = [
   'isGroupChild'
 ]
 
-export type { MetricProps }
+export type { MetricProps, MetricStyle }
 export { propTypes, allowedProps }

package/src/Metric/styles.ts

@@ -22,8 +22,8 @@
  * SOFTWARE.
  */
 
-import { MetricTheme } from '@instructure/shared-types'
-import { MetricProps } from './props'
+import type { MetricTheme } from '@instructure/shared-types'
+import type { MetricProps, MetricStyle } from './props'
 
 /**
  * ---
@@ -34,7 +34,10 @@ import { MetricProps } from './props'
  * @param  {Object} props the props of the component, the style is applied to
  * @return {Object} The final style object, which will be used in the component
  */
-const generateStyle = (componentTheme: MetricTheme, props: MetricProps) => {
+const generateStyle = (
+  componentTheme: MetricTheme,
+  props: MetricProps
+): MetricStyle => {
   const { textAlign } = props
 
   return {

package/src/MetricGroup/props.ts

@@ -25,8 +25,11 @@
 import { Children as ChildrenPropTypes } from '@instructure/ui-prop-types'
 import { Metric } from '../Metric'
 
-import type { PropValidators } from '@instructure/shared-types'
-import type { WithStyleProps } from '@instructure/emotion'
+import type {
+  PropValidators,
+  MetricGroupTheme
+} from '@instructure/shared-types'
+import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
 
 type MetricGroupOwnProps = {
   /**
@@ -39,7 +42,10 @@ type PropKeys = keyof MetricGroupOwnProps
 
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
-type MetricGroupProps = MetricGroupOwnProps & WithStyleProps
+type MetricGroupProps = MetricGroupOwnProps &
+  WithStyleProps<MetricGroupTheme, MetricGrouStyle>
+
+type MetricGrouStyle = ComponentStyle<'metricGroup'>
 
 const propTypes: PropValidators<PropKeys> = {
   children: ChildrenPropTypes.oneOf([Metric])
@@ -47,5 +53,5 @@ const propTypes: PropValidators<PropKeys> = {
 
 const allowedProps: AllowedPropKeys = ['children']
 
-export type { MetricGroupProps }
+export type { MetricGroupProps, MetricGrouStyle }
 export { propTypes, allowedProps }

package/src/MetricGroup/styles.ts

@@ -22,7 +22,8 @@
  * SOFTWARE.
  */
 
-import { MetricGroupTheme } from '@instructure/shared-types'
+import type { MetricGroupTheme } from '@instructure/shared-types'
+import type { MetricGrouStyle } from './props'
 
 /**
  * ---
@@ -32,7 +33,7 @@ import { MetricGroupTheme } from '@instructure/shared-types'
  * @param  {Object} componentTheme The theme variable object.
  * @return {Object} The final style object, which will be used in the component
  */
-const generateStyle = (componentTheme: MetricGroupTheme) => {
+const generateStyle = (componentTheme: MetricGroupTheme): MetricGrouStyle => {
   return {
     metricGroup: {
       label: 'metricGroup',

package/types/Metric/props.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
-import type { PropValidators } from '@instructure/shared-types';
-import type { WithStyleProps } from '@instructure/emotion';
+import type { PropValidators, MetricTheme } from '@instructure/shared-types';
+import type { WithStyleProps, ComponentStyle } from '@instructure/emotion';
 declare type MetricOwnProps = {
     textAlign: 'start' | 'center' | 'end';
     renderLabel?: ((props?: any) => ReactNode) | ReactNode;
@@ -13,9 +13,10 @@ declare type MetricOwnProps = {
 };
 declare type PropKeys = keyof MetricOwnProps;
 declare type AllowedPropKeys = Readonly<Array<PropKeys>>;
-declare type MetricProps = MetricOwnProps & WithStyleProps;
+declare type MetricProps = MetricOwnProps & WithStyleProps<MetricTheme, MetricStyle>;
+declare type MetricStyle = ComponentStyle<'metric' | 'label' | 'value'>;
 declare const propTypes: PropValidators<PropKeys>;
 declare const allowedProps: AllowedPropKeys;
-export type { MetricProps };
+export type { MetricProps, MetricStyle };
 export { propTypes, allowedProps };
 //# sourceMappingURL=props.d.ts.map

package/types/Metric/props.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/Metric/props.ts"],"names":[],"mappings":"AAwBA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGjC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAC/D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAE1D,aAAK,cAAc,GAAG;IACpB,SAAS,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IACrC,WAAW,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,EAAE,GAAG,KAAK,SAAS,CAAC,GAAG,SAAS,CAAA;IACtD,WAAW,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,EAAE,GAAG,KAAK,SAAS,CAAC,GAAG,SAAS,CAAA;IACtD;;;OAGG;IACH,YAAY,EAAE,OAAO,CAAA;CACtB,CAAA;AAED,aAAK,QAAQ,GAAG,MAAM,cAAc,CAAA;AAEpC,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,WAAW,GAAG,cAAc,GAAG,cAAc,CAAA;AAElD,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CAKvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eAKnB,CAAA;AAED,YAAY,EAAE,WAAW,EAAE,CAAA;AAC3B,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}
+{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/Metric/props.ts"],"names":[],"mappings":"AAwBA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGjC,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAA;AAC5E,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAE1E,aAAK,cAAc,GAAG;IACpB,SAAS,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IACrC,WAAW,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,EAAE,GAAG,KAAK,SAAS,CAAC,GAAG,SAAS,CAAA;IACtD,WAAW,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,EAAE,GAAG,KAAK,SAAS,CAAC,GAAG,SAAS,CAAA;IACtD;;;OAGG;IACH,YAAY,EAAE,OAAO,CAAA;CACtB,CAAA;AAED,aAAK,QAAQ,GAAG,MAAM,cAAc,CAAA;AAEpC,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,WAAW,GAAG,cAAc,GAAG,cAAc,CAAC,WAAW,EAAE,WAAW,CAAC,CAAA;AAE5E,aAAK,WAAW,GAAG,cAAc,CAAC,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAC,CAAA;AAE/D,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CAKvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eAKnB,CAAA;AAED,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,CAAA;AACxC,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}

package/types/Metric/styles.d.ts

@@ -1,5 +1,5 @@
-import { MetricTheme } from '@instructure/shared-types';
-import { MetricProps } from './props';
+import type { MetricTheme } from '@instructure/shared-types';
+import type { MetricProps, MetricStyle } from './props';
 /**
  * ---
  * private: true
@@ -9,27 +9,6 @@ import { MetricProps } from './props';
  * @param  {Object} props the props of the component, the style is applied to
  * @return {Object} The final style object, which will be used in the component
  */
-declare const generateStyle: (componentTheme: MetricTheme, props: MetricProps) => {
-    metric: {
-        label: string;
-        display: string;
-        flexDirection: string;
-        boxSizing: string;
-        padding: string | 0;
-        fontFamily: string;
-        textAlign: "start" | "center" | "end";
-    };
-    label: {
-        label: string;
-        fontSize: string | 0;
-        color: string;
-    };
-    value: {
-        label: string;
-        fontWeight: number;
-        fontSize: string | 0;
-        color: string;
-    };
-};
+declare const generateStyle: (componentTheme: MetricTheme, props: MetricProps) => MetricStyle;
 export default generateStyle;
 //# sourceMappingURL=styles.d.ts.map

package/types/Metric/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/Metric/styles.ts"],"names":[],"mappings":"AAwBA,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAA;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAErC;;;;;;;;GAQG;AACH,QAAA,MAAM,aAAa,mBAAoB,WAAW,SAAS,WAAW;;;;;;;;;;;;;;;;;;;;;CAyBrE,CAAA;AAED,eAAe,aAAa,CAAA"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/Metric/styles.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAA;AAC5D,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAEvD;;;;;;;;GAQG;AACH,QAAA,MAAM,aAAa,mBACD,WAAW,SACpB,WAAW,KACjB,WAyBF,CAAA;AAED,eAAe,aAAa,CAAA"}

package/types/MetricGroup/props.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import type { PropValidators } from '@instructure/shared-types';
-import type { WithStyleProps } from '@instructure/emotion';
+import type { PropValidators, MetricGroupTheme } from '@instructure/shared-types';
+import type { WithStyleProps, ComponentStyle } from '@instructure/emotion';
 declare type MetricGroupOwnProps = {
     /**
      * children of type `Metric`
@@ -9,9 +9,10 @@ declare type MetricGroupOwnProps = {
 };
 declare type PropKeys = keyof MetricGroupOwnProps;
 declare type AllowedPropKeys = Readonly<Array<PropKeys>>;
-declare type MetricGroupProps = MetricGroupOwnProps & WithStyleProps;
+declare type MetricGroupProps = MetricGroupOwnProps & WithStyleProps<MetricGroupTheme, MetricGrouStyle>;
+declare type MetricGrouStyle = ComponentStyle<'metricGroup'>;
 declare const propTypes: PropValidators<PropKeys>;
 declare const allowedProps: AllowedPropKeys;
-export type { MetricGroupProps };
+export type { MetricGroupProps, MetricGrouStyle };
 export { propTypes, allowedProps };
 //# sourceMappingURL=props.d.ts.map

package/types/MetricGroup/props.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/MetricGroup/props.ts"],"names":[],"mappings":";AA2BA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAC/D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAE1D,aAAK,mBAAmB,GAAG;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,CAAA;AAED,aAAK,QAAQ,GAAG,MAAM,mBAAmB,CAAA;AAEzC,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,gBAAgB,GAAG,mBAAmB,GAAG,cAAc,CAAA;AAE5D,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CAEvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eAA8B,CAAA;AAElD,YAAY,EAAE,gBAAgB,EAAE,CAAA;AAChC,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}
+{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/MetricGroup/props.ts"],"names":[],"mappings":";AA2BA,OAAO,KAAK,EACV,cAAc,EACd,gBAAgB,EACjB,MAAM,2BAA2B,CAAA;AAClC,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAE1E,aAAK,mBAAmB,GAAG;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,CAAA;AAED,aAAK,QAAQ,GAAG,MAAM,mBAAmB,CAAA;AAEzC,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,gBAAgB,GAAG,mBAAmB,GACzC,cAAc,CAAC,gBAAgB,EAAE,eAAe,CAAC,CAAA;AAEnD,aAAK,eAAe,GAAG,cAAc,CAAC,aAAa,CAAC,CAAA;AAEpD,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CAEvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eAA8B,CAAA;AAElD,YAAY,EAAE,gBAAgB,EAAE,eAAe,EAAE,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}

package/types/MetricGroup/styles.d.ts

@@ -1,4 +1,5 @@
-import { MetricGroupTheme } from '@instructure/shared-types';
+import type { MetricGroupTheme } from '@instructure/shared-types';
+import type { MetricGrouStyle } from './props';
 /**
  * ---
  * private: true
@@ -7,16 +8,6 @@ import { MetricGroupTheme } from '@instructure/shared-types';
  * @param  {Object} componentTheme The theme variable object.
  * @return {Object} The final style object, which will be used in the component
  */
-declare const generateStyle: (componentTheme: MetricGroupTheme) => {
-    metricGroup: {
-        label: string;
-        boxSizing: string;
-        display: string;
-        flexWrap: string;
-        alignItems: string;
-        justifyContent: string;
-        lineHeight: string | number;
-    };
-};
+declare const generateStyle: (componentTheme: MetricGroupTheme) => MetricGrouStyle;
 export default generateStyle;
 //# sourceMappingURL=styles.d.ts.map

package/types/MetricGroup/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/MetricGroup/styles.ts"],"names":[],"mappings":"AAwBA,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAA;AAE5D;;;;;;;GAOG;AACH,QAAA,MAAM,aAAa,mBAAoB,gBAAgB;;;;;;;;;;CAYtD,CAAA;AAED,eAAe,aAAa,CAAA"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/MetricGroup/styles.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAA;AACjE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAE9C;;;;;;;GAOG;AACH,QAAA,MAAM,aAAa,mBAAoB,gBAAgB,KAAG,eAYzD,CAAA;AAED,eAAe,aAAa,CAAA"}