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

package/lib/NutritionFacts/{index.js → v1/index.js}

@@ -7,12 +7,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.NutritionFacts = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
-var _Modal = require("@instructure/ui-modal/lib/Modal");
-var _Button = require("@instructure/ui-buttons/lib/Button");
-var _CloseButton = require("@instructure/ui-buttons/lib/CloseButton");
-var _Heading = require("@instructure/ui-heading/lib/Heading");
-var _Text = require("@instructure/ui-text/lib/Text");
-var _Link = require("@instructure/ui-link/lib/Link");
+var _v11_ = require("@instructure/ui-modal/v11_6");
+var _v11_2 = require("@instructure/ui-buttons/v11_6");
+var _v11_3 = require("@instructure/ui-heading/v11_6");
+var _v11_4 = require("@instructure/ui-text/v11_6");
+var _v11_5 = require("@instructure/ui-link/v11_6");
 var _emotion = require("@instructure/emotion");
 var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
@@ -59,14 +58,14 @@ category: components/AI Components
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     open = _useState2[0],
     setOpen = _useState2[1];
-  const styles = (0, _emotion.useStyle)({
+  const styles = (0, _emotion.useStyleLegacy)({
     generateStyle: _styles.default,
     generateComponentTheme: _theme.default,
     componentId: 'NutritionFacts',
     displayName: 'NutritionFacts'
   });
   return (0, _jsxRuntime.jsxs)("div", {
-    children: [(0, _jsxRuntime.jsx)(_Link.Link, {
+    children: [(0, _jsxRuntime.jsx)(_v11_5.Link, {
       variant: "standalone",
       onClick: e => {
         e.preventDefault();
@@ -75,7 +74,7 @@ category: components/AI Components
       forceButtonRole: false,
       href: "#",
       children: triggerText
-    }), (0, _jsxRuntime.jsxs)(_Modal.Modal, {
+    }), (0, _jsxRuntime.jsxs)(_v11_.Modal, {
       open: open,
       onDismiss: () => {
         setOpen(false);
@@ -83,22 +82,22 @@ category: components/AI Components
       label: modalLabel,
       shouldCloseOnDocumentClick: true,
       size: fullscreen ? 'fullscreen' : 'medium',
-      children: [(0, _jsxRuntime.jsxs)(_Modal.Modal.Header, {
+      children: [(0, _jsxRuntime.jsxs)(_v11_.Modal.Header, {
         spacing: "compact",
-        children: [(0, _jsxRuntime.jsx)(_Heading.Heading, {
+        children: [(0, _jsxRuntime.jsx)(_v11_3.Heading, {
           aiVariant: "stacked",
           children: title
-        }), (0, _jsxRuntime.jsx)(_CloseButton.CloseButton, {
+        }), (0, _jsxRuntime.jsx)(_v11_2.CloseButton, {
           size: "medium",
           placement: "end",
           offset: "small",
           onClick: () => setOpen(false),
           screenReaderLabel: closeIconButtonScreenReaderLabel
         })]
-      }), (0, _jsxRuntime.jsx)(_Modal.Modal.Body, {
+      }), (0, _jsxRuntime.jsx)(_v11_.Modal.Body, {
         children: (0, _jsxRuntime.jsxs)("div", {
           css: styles === null || styles === void 0 ? void 0 : styles.body,
-          children: [(0, _jsxRuntime.jsxs)(_Heading.Heading, {
+          children: [(0, _jsxRuntime.jsxs)(_v11_3.Heading, {
             variant: "titleSection",
             level: "h3",
             children: [' ', featureName, ' ']
@@ -108,7 +107,7 @@ category: components/AI Components
           }, index) => {
             return (0, _jsxRuntime.jsxs)("div", {
               css: styles === null || styles === void 0 ? void 0 : styles.blockContainer,
-              children: [(0, _jsxRuntime.jsxs)(_Heading.Heading, {
+              children: [(0, _jsxRuntime.jsxs)(_v11_3.Heading, {
                 variant: "titleModule",
                 level: "h4",
                 children: [' ', blockTitle, ' ']
@@ -124,18 +123,18 @@ category: components/AI Components
                     css: styles === null || styles === void 0 ? void 0 : styles.segmentCard,
                     children: [(0, _jsxRuntime.jsxs)("div", {
                       css: styles === null || styles === void 0 ? void 0 : styles.segmentCardExplainerContainer,
-                      children: [(0, _jsxRuntime.jsxs)(_Heading.Heading, {
+                      children: [(0, _jsxRuntime.jsxs)(_v11_3.Heading, {
                         variant: "label",
                         children: [' ', segmentTitle, ' ']
-                      }), (0, _jsxRuntime.jsxs)(_Text.Text, {
+                      }), (0, _jsxRuntime.jsxs)(_v11_4.Text, {
                         variant: "contentSmall",
                         color: "secondary",
                         children: [' ', description, ' ']
                       })]
-                    }), (0, _jsxRuntime.jsxs)(_Text.Text, {
+                    }), (0, _jsxRuntime.jsxs)(_v11_4.Text, {
                       variant: "content",
                       children: [" ", value, " "]
-                    }), (0, _jsxRuntime.jsxs)(_Text.Text, {
+                    }), (0, _jsxRuntime.jsxs)(_v11_4.Text, {
                       variant: "contentSmall",
                       color: "secondary",
                       children: [' ', valueDescription, ' ']
@@ -146,8 +145,8 @@ category: components/AI Components
             }, index);
           })]
         })
-      }), (0, _jsxRuntime.jsx)(_Modal.Modal.Footer, {
-        children: (0, _jsxRuntime.jsx)(_Button.Button, {
+      }), (0, _jsxRuntime.jsx)(_v11_.Modal.Footer, {
+        children: (0, _jsxRuntime.jsx)(_v11_2.Button, {
           onClick: () => setOpen(false),
           children: closeButtonText
         })

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

@@ -6,21 +6,21 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "AiInformation", {
   enumerable: true,
   get: function () {
-    return _AiInformation.AiInformation;
+    return _v3.AiInformation;
   }
 });
 Object.defineProperty(exports, "DataPermissionLevels", {
   enumerable: true,
   get: function () {
-    return _DataPermissionLevels.DataPermissionLevels;
+    return _v2.DataPermissionLevels;
   }
 });
 Object.defineProperty(exports, "NutritionFacts", {
   enumerable: true,
   get: function () {
-    return _NutritionFacts.NutritionFacts;
+    return _v.NutritionFacts;
   }
 });
-var _NutritionFacts = require("./NutritionFacts");
-var _DataPermissionLevels = require("./DataPermissionLevels");
-var _AiInformation = require("./AiInformation");
+var _v = require("../NutritionFacts/v1");
+var _v2 = require("../DataPermissionLevels/v1");
+var _v3 = require("../AiInformation/v1");

package/lib/exports/b.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "AiInformation", {
+  enumerable: true,
+  get: function () {
+    return _v3.AiInformation;
+  }
+});
+Object.defineProperty(exports, "DataPermissionLevels", {
+  enumerable: true,
+  get: function () {
+    return _v2.DataPermissionLevels;
+  }
+});
+Object.defineProperty(exports, "NutritionFacts", {
+  enumerable: true,
+  get: function () {
+    return _v.NutritionFacts;
+  }
+});
+var _v = require("../NutritionFacts/v1");
+var _v2 = require("../DataPermissionLevels/v1");
+var _v3 = require("../AiInformation/v2");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-instructure",
-  "version": "11.6.0",
+  "version": "11.6.1-snapshot-129",
   "description": "Collection of specific components for Instructure products",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -15,26 +15,26 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.27.6",
-    "@instructure/emotion": "11.6.0",
-    "@instructure/shared-types": "11.6.0",
-    "@instructure/ui-buttons": "11.6.0",
-    "@instructure/ui-heading": "11.6.0",
-    "@instructure/ui-icons": "11.6.0",
-    "@instructure/ui-link": "11.6.0",
-    "@instructure/ui-modal": "11.6.0",
-    "@instructure/ui-text": "11.6.0",
-    "@instructure/ui-view": "11.6.0",
-    "@instructure/ui-popover": "11.6.0",
-    "@instructure/ui-react-utils": "11.6.0"
+    "@instructure/emotion": "11.6.1-snapshot-129",
+    "@instructure/shared-types": "11.6.1-snapshot-129",
+    "@instructure/ui-heading": "11.6.1-snapshot-129",
+    "@instructure/ui-icons": "11.6.1-snapshot-129",
+    "@instructure/ui-buttons": "11.6.1-snapshot-129",
+    "@instructure/ui-link": "11.6.1-snapshot-129",
+    "@instructure/ui-modal": "11.6.1-snapshot-129",
+    "@instructure/ui-popover": "11.6.1-snapshot-129",
+    "@instructure/ui-react-utils": "11.6.1-snapshot-129",
+    "@instructure/ui-view": "11.6.1-snapshot-129",
+    "@instructure/ui-text": "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-babel-preset": "11.6.0",
-    "@instructure/ui-axe-check": "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-babel-preset": "11.6.1-snapshot-129",
+    "@instructure/ui-color-utils": "11.6.1-snapshot-129",
+    "@instructure/ui-themes": "11.6.1-snapshot-129"
   },
   "peerDependencies": {
     "react": ">=18 <=19"
@@ -44,17 +44,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/AiInformation/{index.tsx → v1/index.tsx}

@@ -22,14 +22,15 @@
  * SOFTWARE.
  */
 import { useState } from 'react'
-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 { Popover } from '@instructure/ui-popover/v11_6'
+import { CloseButton } from '@instructure/ui-buttons/v11_6'
+import { Heading } from '@instructure/ui-heading/v11_6'
+import { Text } from '@instructure/ui-text/v11_6'
+import { Link } from '@instructure/ui-link/v11_6'
 import { IconExternalLinkLine } from '@instructure/ui-icons'
-import { useStyle } from '@instructure/emotion'
-import { NutritionFacts, DataPermissionLevels } from '../'
+import { useStyleLegacy as useStyle } from '@instructure/emotion'
+import { NutritionFacts } from '../../NutritionFacts/v1'
+import { DataPermissionLevels } from '../../DataPermissionLevels/v1'
 
 import { AiInformationProps } from './props'
 import generateStyle from './styles'

package/src/AiInformation/{props.ts → v1/props.ts}

@@ -27,7 +27,8 @@ import type {
   OtherHTMLAttributes,
   Renderable
 } from '@instructure/shared-types'
-import type { NutritionFactsProps, DataPermissionLevelsProps } from '../'
+import type { NutritionFactsProps } from '../../NutritionFacts/v1/props'
+import type { DataPermissionLevelsProps } from '../../DataPermissionLevels/v1/props'
 
 type AiInformationOwnProps = {
   /**

package/src/AiInformation/v2/README.md

@@ -0,0 +1,302 @@
+---
+describes: AiInformation
+---
+
+This component is made to display specific AI related data in Instructure products.
+
+This component is composed from
+
+- `NutritionFacts`
+- `DataPermissionLevels`
+
+It copies their API exactly, with their name as prefix (e.g.: dataPermissionLevels' `title` becomes `dataPermissionLevelsTitle`). This leads to some redundancy of the data, but makes it easier to use the component.
+
+```js
+---
+type: example
+readonly: true
+---
+<div>
+ <AiInformation
+  trigger={<Button>AI information</Button>}
+  title="Features"
+  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.",
+      permissionLevelsModalTriggerText: "Permission Levels",
+      modelNameText: "Base Model",
+      modelName: "Claude 3 Haiku",
+      nutritionFactsModalTriggerText: "AI Nutrition Facts"
+      }
+  ]}
+
+  dataPermissionLevelsTitle="Data Permission Levels"
+  dataPermissionLevelsCurrentFeatureText="Current Feature:"
+  dataPermissionLevelsCurrentFeature="Feature name"
+  dataPermissionLevelsCloseIconButtonScreenReaderLabel="Close"
+  dataPermissionLevelsCloseButtonText="Close"
+  dataPermissionLevelsModalLabel="This is a Data Permission Levels modal"
+  dataPermissionLevelsTriggerText="Data Permission Levels"
+  dataPermissionLevelsData={[
+    {
+    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",
+    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",
+    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",
+    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."
+  },
+  ]}
+
+  nutritionFactsModalLabel="This is a modal for AI facts"
+  nutritionFactsTitle="Nutrition Facts"
+  nutritionFactsFeatureName="Feature Name"
+  nutritionFactsCloseButtonText="Close"
+  nutritionFactsCloseIconButtonScreenReaderLabel="Close"
+  nutritionFactsTriggerText="Nutrition Facts"
+  nutritionFactsData={[
+    {
+    blockTitle: "Model & Data",
+    segmentData:[
+      {
+         segmentTitle: "Base Model",
+        description: "The foundational AI on which further training and customizations are built.",
+        value: "Value",
+        valueDescription: "Description"
+      },
+      {
+         segmentTitle: "Trained with User Data",
+        description: "Indicates the AI model has been given customer data in order to improve its results.",
+        value: "Value",
+      },
+      {
+         segmentTitle: "Data Shared with Model",
+        description: "Indicates which training or operational content was given to the model.",
+        value: "Value",
+      }
+    ]
+  },
+  {
+    blockTitle: "Privacy & Compliance",
+    segmentData:[
+      {
+        segmentTitle: "Data Retention",
+        description: "How long the model stores customer data.",
+        value: "Value",
+      },
+      {
+        segmentTitle: "Data Logging",
+        description: "Recording the AI's performance for auditing, analysis, and improvement.",
+        value: "Value",
+      },
+      {
+        segmentTitle: "Regions Supported",
+        description: "The locations where the AI model is officially available and supported.",
+        value: "Value",
+      },
+      {
+        segmentTitle: "PII",
+        description: "Sensitive data that can be used to identify an individual.",
+        value: "Value",
+      },
+    ]
+  },
+  {
+    blockTitle: "Outputs",
+    segmentData:[
+      {
+        segmentTitle: "AI Settings Control",
+        description: "The ability to turn the AI on or off within the product.",
+        value: "Value",
+      },
+      {
+        segmentTitle: "Human in the Loop",
+        description: "Indicates if a human is involved in the AI's process or output.",
+        value: "Value",
+      },
+      {
+        segmentTitle: "Guardrails",
+        description: "Preventative safety mechanisms or limitations built into the AI model.",
+        value: "Value",
+      },
+      {
+        segmentTitle: "Expected Risks",
+        description: "Any risks the model may pose to the user.",
+        value: "Value",
+      },
+      {
+        segmentTitle: "Intended Outcomes",
+        description: "The specific results the AI model is meant to achieve.",
+        value: "Value",
+      }
+    ]
+  }
+  ]}
+ />
+</div>
+```
+
+### Small Viewport
+
+For mobile and other small viewport devices, modals should be fullscreen. Set the `fullscreenModals` prop to make them so.
+
+```js
+---
+type: example
+readonly: true
+---
+<div>
+ <AiInformation
+  fullscreenModals
+  trigger={<Button>AI information</Button>}
+  title="Features"
+  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.",
+      permissionLevelsModalTriggerText: "Permission Levels",
+      modelNameText: "Base Model",
+      modelName: "Claude 3 Haiku",
+      nutritionFactsModalTriggerText: "AI Nutrition Facts"
+      }
+  ]}
+
+  dataPermissionLevelsTitle="Data Permission Levels"
+  dataPermissionLevelsCurrentFeatureText="Current Feature:"
+  dataPermissionLevelsCurrentFeature="Feature name"
+  dataPermissionLevelsCloseIconButtonScreenReaderLabel="Close"
+  dataPermissionLevelsCloseButtonText="Close"
+  dataPermissionLevelsModalLabel="This is a Data Permission Levels modal"
+  dataPermissionLevelsTriggerText="Data Permission Levels"
+  dataPermissionLevelsData={[
+    {
+    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",
+    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",
+    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",
+    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."
+  },
+  ]}
+
+  nutritionFactsModalLabel="This is a modal for AI facts"
+  nutritionFactsTitle="Nutrition Facts"
+  nutritionFactsFeatureName="Feature Name"
+  nutritionFactsCloseButtonText="Close"
+  nutritionFactsCloseIconButtonScreenReaderLabel="Close"
+  nutritionFactsTriggerText="Nutrition Facts"
+  nutritionFactsData={[
+    {
+    blockTitle: "Model & Data",
+    segmentData:[
+      {
+         segmentTitle: "Base Model",
+        description: "The foundational AI on which further training and customizations are built.",
+        value: "Value",
+      },
+      {
+         segmentTitle: "Trained with User Data",
+        description: "Indicates the AI model has been given customer data in order to improve its results.",
+        value: "Value",
+      },
+      {
+         segmentTitle: "Data Shared with Model",
+        description: "Indicates which training or operational content was given to the model.",
+        value: "Value",
+      }
+    ]
+  },
+  {
+    blockTitle: "Privacy & Compliance",
+    segmentData:[
+      {
+        segmentTitle: "Data Retention",
+        description: "How long the model stores customer data.",
+        value: "Value",
+      },
+      {
+        segmentTitle: "Data Logging",
+        description: "Recording the AI's performance for auditing, analysis, and improvement.",
+        value: "Value",
+      },
+      {
+        segmentTitle: "Regions Supported",
+        description: "The locations where the AI model is officially available and supported.",
+        value: "Value",
+      },
+      {
+        segmentTitle: "PII",
+        description: "Sensitive data that can be used to identify an individual.",
+        value: "Value",
+      },
+    ]
+  },
+  {
+    blockTitle: "Outputs",
+    segmentData:[
+      {
+        segmentTitle: "AI Settings Control",
+        description: "The ability to turn the AI on or off within the product.",
+        value: "Value",
+      },
+      {
+        segmentTitle: "Human in the Loop",
+        description: "Indicates if a human is involved in the AI's process or output.",
+        value: "Value",
+      },
+      {
+        segmentTitle: "Guardrails",
+        description: "Preventative safety mechanisms or limitations built into the AI model.",
+        value: "Value",
+      },
+      {
+        segmentTitle: "Expected Risks",
+        description: "Any risks the model may pose to the user.",
+        value: "Value",
+      },
+      {
+        segmentTitle: "Intended Outcomes",
+        description: "The specific results the AI model is meant to achieve.",
+        value: "Value",
+      }
+    ]
+  }
+  ]}
+ />
+</div>
+```