@instructure/ui-metric 11.6.0 → 11.6.1-snapshot-129

package/lib/MetricGroup/v2/theme.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * Generates the theme object for the component from the theme and provided additional information
+ * @param  {Object} theme The actual theme object.
+ * @return {Object} The final theme object with the overrides and component variables
+ */
+const generateComponentTheme = theme => {
+  const typography = theme.typography;
+  const componentVariables = {
+    lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightCondensed
+  };
+  return {
+    ...componentVariables
+  };
+};
+var _default = exports.default = generateComponentTheme;

package/lib/{index.js → exports/a.js}

@@ -6,14 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "Metric", {
   enumerable: true,
   get: function () {
-    return _Metric.Metric;
+    return _v.Metric;
   }
 });
 Object.defineProperty(exports, "MetricGroup", {
   enumerable: true,
   get: function () {
-    return _MetricGroup.MetricGroup;
+    return _v2.MetricGroup;
   }
 });
-var _Metric = require("./Metric");
-var _MetricGroup = require("./MetricGroup");
+var _v = require("../Metric/v1");
+var _v2 = require("../MetricGroup/v1");

package/lib/exports/b.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Metric", {
+  enumerable: true,
+  get: function () {
+    return _v.Metric;
+  }
+});
+Object.defineProperty(exports, "MetricGroup", {
+  enumerable: true,
+  get: function () {
+    return _v2.MetricGroup;
+  }
+});
+var _v = require("../Metric/v2");
+var _v2 = require("../MetricGroup/v2");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-metric",
-  "version": "11.6.0",
+  "version": "11.6.1-snapshot-129",
   "description": "A UI component for displaying Metrics",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -15,19 +15,19 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.27.6",
-    "@instructure/console": "11.6.0",
-    "@instructure/emotion": "11.6.0",
-    "@instructure/shared-types": "11.6.0",
-    "@instructure/ui-react-utils": "11.6.0"
+    "@instructure/console": "11.6.1-snapshot-129",
+    "@instructure/emotion": "11.6.1-snapshot-129",
+    "@instructure/shared-types": "11.6.1-snapshot-129",
+    "@instructure/ui-react-utils": "11.6.1-snapshot-129"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "vitest": "^3.2.2",
-    "@instructure/ui-axe-check": "11.6.0",
-    "@instructure/ui-babel-preset": "11.6.0",
-    "@instructure/ui-color-utils": "11.6.0",
-    "@instructure/ui-themes": "11.6.0"
+    "@instructure/ui-axe-check": "11.6.1-snapshot-129",
+    "@instructure/ui-color-utils": "11.6.1-snapshot-129",
+    "@instructure/ui-themes": "11.6.1-snapshot-129",
+    "@instructure/ui-babel-preset": "11.6.1-snapshot-129"
   },
   "peerDependencies": {
     "react": ">=18 <=19"
@@ -37,17 +37,39 @@
   },
   "sideEffects": false,
   "exports": {
-    ".": {
-      "types": "./types/index.d.ts",
-      "import": "./es/index.js",
-      "require": "./lib/index.js",
-      "default": "./es/index.js"
-    },
     "./lib/*": "./lib/*",
     "./es/*": "./es/*",
     "./types/*": "./types/*",
     "./package.json": "./package.json",
-    "./src/*": "./src/*"
+    "./src/*": "./src/*",
+    ".": {
+      "src": "./src/exports/a.ts",
+      "types": "./types/exports/a.d.ts",
+      "import": "./es/exports/a.js",
+      "require": "./lib/exports/a.js",
+      "default": "./es/exports/a.js"
+    },
+    "./v11_6": {
+      "src": "./src/exports/a.ts",
+      "types": "./types/exports/a.d.ts",
+      "import": "./es/exports/a.js",
+      "require": "./lib/exports/a.js",
+      "default": "./es/exports/a.js"
+    },
+    "./v11_7": {
+      "src": "./src/exports/b.ts",
+      "types": "./types/exports/b.d.ts",
+      "import": "./es/exports/b.js",
+      "require": "./lib/exports/b.js",
+      "default": "./es/exports/b.js"
+    },
+    "./latest": {
+      "src": "./src/exports/b.ts",
+      "types": "./types/exports/b.d.ts",
+      "import": "./es/exports/b.js",
+      "require": "./lib/exports/b.js",
+      "default": "./es/exports/b.js"
+    }
   },
   "scripts": {
     "lint": "ui-scripts lint",

package/src/Metric/{index.tsx → v1/index.tsx}

@@ -24,7 +24,7 @@
 
 import { Component } from 'react'
 
-import { withStyle } from '@instructure/emotion'
+import { withStyleLegacy as withStyle } from '@instructure/emotion'
 import { callRenderProp, passthroughProps } from '@instructure/ui-react-utils'
 
 import generateStyle from './styles'

package/src/Metric/v2/README.md

@@ -0,0 +1,30 @@
+---
+describes: Metric
+---
+
+The Metric component displays 'value' and 'label'. The default alignment is 'center'.
+
+```javascript
+---
+type: example
+---
+  <Metric textAlign="start" renderLabel="Grade" renderValue="80%" />
+```
+
+The Metric component can be set to align 'start'.
+
+```javascript
+---
+type: example
+---
+  <Metric renderLabel="Grade" renderValue="80%" />
+```
+
+The Metric component can be set to align 'end'.
+
+```javascript
+---
+type: example
+---
+  <Metric textAlign="end" renderLabel="Grade" renderValue="80%" />
+```

package/src/Metric/v2/index.tsx

@@ -0,0 +1,79 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { forwardRef } from 'react'
+
+import { useStyle } from '@instructure/emotion'
+import { callRenderProp, passthroughProps } from '@instructure/ui-react-utils'
+
+import generateStyle from './styles'
+
+import type { MetricProps } from './props'
+
+/**
+---
+category: components
+---
+**/
+const Metric = forwardRef<HTMLDivElement, MetricProps>((props, ref) => {
+  const {
+    textAlign = 'center',
+    renderLabel,
+    renderValue,
+    isGroupChild = false,
+    themeOverride
+  } = props
+
+  const styles = useStyle({
+    generateStyle,
+    themeOverride,
+    params: {
+      textAlign
+    },
+    componentId: 'Metric',
+    displayName: 'Metric'
+  })
+
+  return (
+    <div
+      {...passthroughProps(props)}
+      role={isGroupChild ? 'row' : undefined}
+      css={styles?.metric}
+      ref={ref}
+      data-cid="Metric"
+    >
+      <div role={isGroupChild ? 'rowheader' : undefined} css={styles?.label}>
+        {callRenderProp(renderLabel)}
+      </div>
+      <div role={isGroupChild ? 'gridcell' : undefined} css={styles?.value}>
+        {callRenderProp(renderValue)}
+      </div>
+    </div>
+  )
+})
+
+Metric.displayName = 'Metric'
+
+export default Metric
+export { Metric }

package/src/Metric/v2/props.ts

@@ -0,0 +1,63 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import type {
+  MetricTheme,
+  OtherHTMLAttributes,
+  Renderable
+} from '@instructure/shared-types'
+import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+import { ThemeOverrideValue } from '@instructure/emotion'
+
+type MetricOwnProps = {
+  textAlign?: 'start' | 'center' | 'end'
+  renderLabel?: Renderable
+  renderValue?: Renderable
+  /**
+   * Set to true when a child of MetricGroup so the appropriate
+   * aria labels get set
+   */
+  isGroupChild?: boolean
+}
+
+type PropKeys = keyof MetricOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type MetricProps = MetricOwnProps &
+  WithStyleProps<MetricTheme, MetricStyle> &
+  OtherHTMLAttributes<MetricOwnProps> & {
+    themeOverride?: ThemeOverrideValue
+  }
+
+type MetricStyle = ComponentStyle<'metric' | 'label' | 'value'>
+const allowedProps: AllowedPropKeys = [
+  'textAlign',
+  'renderLabel',
+  'renderValue',
+  'isGroupChild'
+]
+
+export type { MetricProps, MetricStyle }
+export { allowedProps }

package/src/Metric/v2/styles.ts

@@ -0,0 +1,77 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import type { MetricProps, MetricStyle } from './props'
+import { NewComponentTypes } from '@instructure/ui-themes'
+
+type StyleParams = {
+  textAlign: MetricProps['textAlign']
+}
+
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} params 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: NewComponentTypes['Metric'],
+  params: StyleParams
+): MetricStyle => {
+  const { textAlign } = params
+
+  return {
+    metric: {
+      label: 'metric',
+      display: 'flex',
+      flexDirection: 'column-reverse',
+      boxSizing: 'border-box',
+      paddingLeft: componentTheme.paddingHorizontal,
+      paddingRight: componentTheme.paddingHorizontal,
+      textAlign,
+      gap: componentTheme.gapTexts
+    },
+    label: {
+      label: 'metric__label',
+      fontWeight: componentTheme.labelFontWeight,
+      fontSize: componentTheme.labelFontSize,
+      color: componentTheme.labelColor,
+      fontFamily: componentTheme.labelFontFamily,
+      lineHeight: componentTheme.labelLineHeight
+    },
+    value: {
+      label: 'metric__value',
+      fontWeight: componentTheme.valueFontWeight,
+      fontSize: componentTheme.valueFontSize,
+      color: componentTheme.valueColor,
+      fontFamily: componentTheme.valueFontFamily,
+      lineHeight: componentTheme.valueLineHeight
+    }
+  }
+}
+
+export default generateStyle

package/src/MetricGroup/{index.tsx → v1/index.tsx}

@@ -24,7 +24,7 @@
 
 import { Children, Component, ReactElement } from 'react'
 
-import { withStyle } from '@instructure/emotion'
+import { withStyleLegacy as withStyle } from '@instructure/emotion'
 import { passthroughProps, safeCloneElement } from '@instructure/ui-react-utils'
 
 import generateStyle from './styles'

package/src/MetricGroup/v2/README.md

@@ -0,0 +1,16 @@
+---
+describes: MetricGroup
+---
+
+A `MetricGroup` component displays multiple `Metric` (value + label) in rows.
+
+```javascript
+---
+type: example
+---
+<MetricGroup>
+  <Metric renderLabel="Grade" renderValue="80%" />
+  <Metric renderLabel="Late" renderValue="4" />
+  <Metric renderLabel="Missing" renderValue="2" />
+</MetricGroup>
+```

package/src/MetricGroup/v2/index.tsx

@@ -0,0 +1,70 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { Children, forwardRef, ReactElement } from 'react'
+
+import { passthroughProps, safeCloneElement } from '@instructure/ui-react-utils'
+
+import generateStyle from './styles'
+
+import type { MetricGroupProps } from './props'
+
+/**
+---
+category: components
+---
+**/
+const MetricGroup = forwardRef<HTMLDivElement, MetricGroupProps>(
+  (props, ref) => {
+    const { children = null, ...rest } = props
+
+    const styles = generateStyle()
+
+    const renderChildren = () => {
+      return Children.map(children, (child) => {
+        return safeCloneElement(child as ReactElement, {
+          isGroupChild: true
+        })
+      })
+    }
+
+    return (
+      <div
+        {...passthroughProps(rest)}
+        css={styles?.metricGroup}
+        role="grid"
+        aria-readonly="true"
+        ref={ref}
+        data-cid="MetricGroup"
+      >
+        {renderChildren()}
+      </div>
+    )
+  }
+)
+
+MetricGroup.displayName = 'MetricGroup'
+
+export default MetricGroup
+export { MetricGroup }

package/src/MetricGroup/v2/props.ts

@@ -0,0 +1,46 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import type { OtherHTMLAttributes } from '@instructure/shared-types'
+import type { ComponentStyle } from '@instructure/emotion'
+
+type MetricGroupOwnProps = {
+  /**
+   * children of type `Metric`
+   */
+  children?: React.ReactNode // TODO: oneOf([Metric])
+}
+
+type PropKeys = keyof MetricGroupOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type MetricGroupProps = MetricGroupOwnProps &
+  OtherHTMLAttributes<MetricGroupOwnProps>
+
+type MetricGroupStyle = ComponentStyle<'metricGroup'>
+const allowedProps: AllowedPropKeys = ['children']
+
+export type { MetricGroupProps, MetricGroupStyle }
+export { allowedProps }

package/src/MetricGroup/v2/styles.ts

@@ -0,0 +1,47 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import type { MetricGroupStyle } from './props'
+
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = (): MetricGroupStyle => {
+  return {
+    metricGroup: {
+      label: 'metricGroup',
+      boxSizing: 'border-box',
+      display: 'flex',
+      flexWrap: 'wrap',
+      alignItems: 'flex-start',
+      justifyContent: 'space-around'
+    }
+  }
+}
+
+export default generateStyle

package/src/MetricGroup/v2/theme.ts

@@ -0,0 +1,45 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import type { Theme } from '@instructure/ui-themes'
+import { MetricGroupTheme } from '@instructure/shared-types'
+
+/**
+ * Generates the theme object for the component from the theme and provided additional information
+ * @param  {Object} theme The actual theme object.
+ * @return {Object} The final theme object with the overrides and component variables
+ */
+const generateComponentTheme = (theme: Theme): MetricGroupTheme => {
+  const { typography } = theme
+
+  const componentVariables: MetricGroupTheme = {
+    lineHeight: typography?.lineHeightCondensed
+  }
+
+  return {
+    ...componentVariables
+  }
+}
+
+export default generateComponentTheme