[v12] feat(ui-instructure): Ai Information rework

packages/ui-instructure/package.json

@@ -29,6 +29,7 @@
     "@instructure/ui-buttons": "workspace:*",
     "@instructure/ui-heading": "workspace:*",
     "@instructure/ui-link": "workspace:*",
+    "@instructure/ui-icons": "workspace:*",
     "@instructure/ui-modal": "workspace:*",
     "@instructure/ui-popover": "workspace:*",
     "@instructure/ui-react-utils": "workspace:*",

packages/ui-instructure/src/AiInformation/README.md

@@ -23,8 +23,10 @@ readonly: true
   data={[
     {
       featureName: "Feature name",
+      privacyNoticeText: "AI Privacy Notice",
+      privacyNoticeUrl: "https://www.instructure.com/policies/artificial-intelligence-privacy",
       permissionLevelText: "Permission Level",
-      permissionLevel: "LEVEL 1",
+      permissionLevel: "Level 1",
       description: "We leverage anonymized aggregate data for detailed analytics to inform model development and product improvements. No AI models are used at this level.",
       permissionLevelsModalTriggerText: "Permission Levels",
       modelNameText: "Base Model",
@@ -42,23 +44,23 @@ readonly: true
   dataPermissionLevelsTriggerText="Data Permission Levels"
   dataPermissionLevelsData={[
     {
-    level: "LEVEL 1",
+    level: "Level 1",
     title: "Descriptive Analytics and Research",
     description: "We leverage anonymized aggregate data for detailed analytics to inform model development and product improvements. No AI models are used at this level.",
     highlighted:true
   },
     {
-    level: "LEVEL 2",
+    level: "Level 2",
     title: "AI-Powered Features Without Data Training",
     description: "We utilize off-the-shelf AI models and customer data as input to provide AI-powered features. No data is used for training this model."
   },
     {
-    level: "LEVEL 3",
+    level: "Level 3",
     title: "AI Customization for Individual Institutions",
     description: "We customize AI solutions tailored to the unique needs and resources of educational institutions. We use customer data to fine-tune data and train AI models that only serve your institution. Your institution’s data only serves them through trained models."
   },
     {
-    level: "LEVEL 4",
+    level: "Level 4",
     title: "Collaborative AI Consortium",
     description: "We established a consortium with educational institutions that shares anonymized data, best practices, and research findings. This fosters collaboration and accelerates the responsible development of AI in education. Specialized AI models are created for better outcomes in education, cost savings, and more."
   },
@@ -169,8 +171,10 @@ readonly: true
   data={[
     {
       featureName: "Feature name",
+      privacyNoticeText: "AI Privacy Notice",
+      privacyNoticeUrl: "https://www.instructure.com/policies/artificial-intelligence-privacy",
       permissionLevelText: "Permission Level",
-      permissionLevel: "LEVEL 1",
+      permissionLevel: "Level 1",
       description: "We leverage anonymized aggregate data for detailed analytics to inform model development and product improvements. No AI models are used at this level.",
       permissionLevelsModalTriggerText: "Permission Levels",
       modelNameText: "Base Model",
@@ -188,23 +192,23 @@ readonly: true
   dataPermissionLevelsTriggerText="Data Permission Levels"
   dataPermissionLevelsData={[
     {
-    level: "LEVEL 1",
+    level: "Level 1",
     title: "Descriptive Analytics and Research",
     description: "We leverage anonymized aggregate data for detailed analytics to inform model development and product improvements. No AI models are used at this level.",
     highlighted:true
   },
     {
-    level: "LEVEL 2",
+    level: "Level 2",
     title: "AI-Powered Features Without Data Training",
     description: "We utilize off-the-shelf AI models and customer data as input to provide AI-powered features. No data is used for training this model."
   },
     {
-    level: "LEVEL 3",
+    level: "Level 3",
     title: "AI Customization for Individual Institutions",
     description: "We customize AI solutions tailored to the unique needs and resources of educational institutions. We use customer data to fine-tune data and train AI models that only serve your institution. Your institution’s data only serves them through trained models."
   },
     {
-    level: "LEVEL 4",
+    level: "Level 4",
     title: "Collaborative AI Consortium",
     description: "We established a consortium with educational institutions that shares anonymized data, best practices, and research findings. This fosters collaboration and accelerates the responsible development of AI in education. Specialized AI models are created for better outcomes in education, cost savings, and more."
   },

packages/ui-instructure/src/AiInformation/index.tsx

@@ -26,12 +26,13 @@ import { Popover } from '@instructure/ui-popover'
 import { CloseButton } from '@instructure/ui-buttons'
 import { Heading } from '@instructure/ui-heading'
 import { Text } from '@instructure/ui-text'
-import { useStyleRework } from '@instructure/emotion'
+import { Link } from '@instructure/ui-link'
+import { ExternalLinkInstUIIcon } from '@instructure/ui-icons'
+import { useStyle } from '@instructure/emotion'
 import { NutritionFacts, DataPermissionLevels } from '../'
 
 import { AiInformationProps } from './props'
 import generateStyle from './styles'
-import generateComponentTheme from './theme'
 
 /**
 ---
@@ -57,13 +58,14 @@ const AiInformation = ({
   nutritionFactsFeatureName,
   nutritionFactsData,
   nutritionFactsCloseButtonText,
-  nutritionFactsCloseIconButtonScreenReaderLabel
+  nutritionFactsCloseIconButtonScreenReaderLabel,
+  themeOverride
 }: AiInformationProps) => {
   const [open, setOpen] = useState(false)
 
-  const styles = useStyleRework({
+  const styles = useStyle({
     generateStyle,
-    generateComponentTheme,
+    themeOverride,
     componentId: 'AiInformation',
     displayName: 'AiInformation'
   })
@@ -99,6 +101,8 @@ const AiInformation = ({
               (
                 {
                   featureName,
+                  privacyNoticeText,
+                  privacyNoticeUrl,
                   permissionLevelText,
                   permissionLevel,
                   description,
@@ -110,6 +114,16 @@ const AiInformation = ({
                 index
               ) => (
                 <div key={index}>
+                  <div css={styles?.privacyNotice}>
+                    <Link
+                      href={privacyNoticeUrl}
+                      renderIcon={<ExternalLinkInstUIIcon size="sm" />}
+                      iconPlacement="end"
+                      variant="standalone"
+                    >
+                      {privacyNoticeText}
+                    </Link>
+                  </div>
                   <div css={styles?.featureName}>
                     <Heading level="h3" variant="titleCardRegular">
                       {featureName}

packages/ui-instructure/src/AiInformation/props.ts

@@ -21,12 +21,8 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
-import type {
-  AiInformationTheme,
-  OtherHTMLAttributes,
-  Renderable
-} from '@instructure/shared-types'
+import type { ComponentStyle, ThemeOverrideValue } from '@instructure/emotion'
+import type { OtherHTMLAttributes, Renderable } from '@instructure/shared-types'
 import type { NutritionFactsProps, DataPermissionLevelsProps } from '../'
 
 type AiInformationOwnProps = {
@@ -39,6 +35,8 @@ type AiInformationOwnProps = {
    */
   data: {
     featureName: string
+    privacyNoticeText: string
+    privacyNoticeUrl: string
     permissionLevelText: string
     permissionLevel: string
     description: string
@@ -120,13 +118,14 @@ type PropKeys = keyof AiInformationOwnProps
 
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
-type AiInformationProps = AiInformationOwnProps &
-  WithStyleProps<AiInformationTheme, AiInformationStyle> &
-  OtherHTMLAttributes<AiInformationOwnProps>
+type AiInformationProps = AiInformationOwnProps & {
+  themeOverride?: ThemeOverrideValue
+} & OtherHTMLAttributes<AiInformationOwnProps>
 
 type AiInformationStyle = ComponentStyle<
   | 'aiInformation'
   | 'header'
+  | 'privacyNotice'
   | 'featureName'
   | 'permissionLevelText'
   | 'permissionLevel'

packages/ui-instructure/src/AiInformation/styles.ts

@@ -22,21 +22,23 @@
  * SOFTWARE.
  */
 
-import type { AiInformationTheme } from '@instructure/shared-types'
-import type { AiInformationProps, AiInformationStyle } from './props'
+import type { NewComponentTypes, SharedTokens } from '@instructure/ui-themes'
+import type { AiInformationStyle } from './props'
 
 /**
  * ---
  * private: true
  * ---
  * Generates the style object from the theme and provided additional information
- * @param  {Object} componentTheme The theme variable object.
- * @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
+ * @param componentTheme The theme variable object.
+ * @param params Additional parameters to customize the style.
+ * @param sharedTokens Shared token object that stores common values for the theme.
+ * @return The final style object, which will be used in the component
  */
 const generateStyle = (
-  componentTheme: AiInformationTheme,
-  _props: AiInformationProps
+  componentTheme: NewComponentTypes['AiInformation'],
+  _params: Record<string, never>,
+  _sharedTokens: SharedTokens
 ): AiInformationStyle => {
   return {
     aiInformation: {
@@ -49,6 +51,10 @@ const generateStyle = (
       label: 'ai-information__header',
       marginBottom: componentTheme.headingBottomMargin
     },
+    privacyNotice: {
+      label: 'ai-information__privacyNotice',
+      marginBottom: componentTheme.headingBottomMargin
+    },
     featureName: {
       label: 'ai-information__feature-name',
       marginBottom: componentTheme.featureNameBottomMargin
@@ -60,7 +66,10 @@ const generateStyle = (
     permissionLevel: {
       label: 'ai-information__permission-level',
       marginBottom: componentTheme.permissionLevelBottomMargin,
-      color: componentTheme.levelColor
+      color: componentTheme.levelColor,
+      '& > *': {
+        color: `${componentTheme.levelColor} !important`
+      }
     },
     description: {
       label: 'ai-information__description',

packages/ui-instructure/tsconfig.build.json

@@ -43,6 +43,9 @@
     {
       "path": "../ui-text/tsconfig.build.json"
     },
+    {
+      "path": "../ui-icons/tsconfig.build.json"
+    },
     {
       "path": "../ui-themes/tsconfig.build.json"
     },