feat(ui-instructure): add privacy notice link to the ai information panel

Author: git-nandor

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,6 +23,8 @@ 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",
       description: "We leverage anonymized aggregate data for detailed analytics to inform model development and product improvements. No AI models are used at this level.",
@@ -169,6 +171,8 @@ 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",
       description: "We leverage anonymized aggregate data for detailed analytics to inform model development and product improvements. No AI models are used at this level.",

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

@@ -26,6 +26,8 @@ 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 { Link } from '@instructure/ui-link'
+import { IconExternalLinkLine } from '@instructure/ui-icons'
 import { useStyle } from '@instructure/emotion'
 import { NutritionFacts, DataPermissionLevels } from '../'
 
@@ -99,6 +101,8 @@ const AiInformation = ({
               (
                 {
                   featureName,
+                  privacyNoticeText,
+                  privacyNoticeUrl,
                   permissionLevelText,
                   permissionLevel,
                   description,
@@ -110,6 +114,17 @@ const AiInformation = ({
                 index
               ) => (
                 <div key={index}>
+                  <div css={styles?.privacyNotice}>
+                    <Link
+                      href={privacyNoticeUrl}
+                      renderIcon={<IconExternalLinkLine />}
+                      iconPlacement="end"
+                      variant="standalone"
+                      target="_blank"
+                    >
+                      {privacyNoticeText}
+                    </Link>
+                  </div>
                   <div css={styles?.featureName}>
                     <Heading level="h3" variant="titleCardRegular">
                       {featureName}

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

@@ -39,6 +39,8 @@ type AiInformationOwnProps = {
    */
   data: {
     featureName: string
+    privacyNoticeText: string
+    privacyNoticeUrl: string
     permissionLevelText: string
     permissionLevel: string
     description: string
@@ -127,6 +129,7 @@ type AiInformationProps = AiInformationOwnProps &
 type AiInformationStyle = ComponentStyle<
   | 'aiInformation'
   | 'header'
+  | 'privacyNotice'
   | 'featureName'
   | 'permissionLevelText'
   | 'permissionLevel'

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

@@ -49,6 +49,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

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"
     },