@instructure/ui-instructure 10.21.1-snapshot-11

package/lib/NutritionFacts/props.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.allowedProps = 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.
+ */
+
+const allowedProps = exports.allowedProps = ['fullscreen', 'modalLabel', 'title', 'featureName', 'data', 'closeButtonText', 'closeIconButtonScreenReaderLabel', 'triggerText'];

package/lib/NutritionFacts/styles.js

@@ -0,0 +1,78 @@
+"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.
+ */
+
+/**
+ * ---
+ * 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
+ */
+const generateStyle = (componentTheme, _props) => {
+  return {
+    segmentCard: {
+      label: 'nutrition-facts__segment-card',
+      borderStyle: 'solid',
+      borderWidth: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.cardBorderWidth,
+      borderColor: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.cardBorderColor,
+      borderRadius: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.cardBorderRadius,
+      padding: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.cardPadding,
+      display: 'flex',
+      flexDirection: 'column'
+    },
+    segmentCardExplainerContainer: {
+      label: 'nutrition-facts__segment-card-explainer-container',
+      marginBottom: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.cardExplainerContainerBottomMargin
+    },
+    segmentContainer: {
+      label: 'nutrition-facts__segment-container',
+      display: 'flex',
+      flexDirection: 'column',
+      gap: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.cardGap
+    },
+    blockContainer: {
+      label: 'nutrition-facts__block-container',
+      display: 'flex',
+      flexDirection: 'column',
+      gap: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.cardGap
+    },
+    body: {
+      label: 'nutrition-facts__body',
+      display: 'flex',
+      flexDirection: 'column',
+      gap: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.blockGap,
+      padding: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.bodyPadding,
+      boxSizing: 'border-box'
+    }
+  };
+};
+var _default = exports.default = generateStyle;

package/lib/NutritionFacts/theme.js

@@ -0,0 +1,55 @@
+"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 => {
+  var _colors$ui;
+  const colors = theme.colors,
+    spacing = theme.spacing,
+    borders = theme.borders;
+  const componentVariables = {
+    cardBorderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusMedium,
+    cardBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$ui = colors.ui) === null || _colors$ui === void 0 ? void 0 : _colors$ui.lineStroke,
+    cardBorderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
+    cardPadding: spacing === null || spacing === void 0 ? void 0 : spacing.space12,
+    cardExplainerContainerBottomMargin: spacing === null || spacing === void 0 ? void 0 : spacing.space8,
+    cardGap: spacing === null || spacing === void 0 ? void 0 : spacing.modalElements,
+    bodyPadding: spacing === null || spacing === void 0 ? void 0 : spacing.paddingCardLarge,
+    blockGap: spacing === null || spacing === void 0 ? void 0 : spacing.sectionElements
+  };
+  return {
+    ...componentVariables
+  };
+};
+var _default = exports.default = generateComponentTheme;

package/lib/index.js

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

package/lib/package.json

@@ -0,0 +1 @@
+{"type":"commonjs"}

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@instructure/ui-instructure",
+  "version": "10.21.1-snapshot-11",
+  "description": "Collection of specific components for Instructure products",
+  "author": "Instructure, Inc. Engineering and Product Design",
+  "module": "./es/index.js",
+  "main": "./lib/index.js",
+  "types": "./types/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/instructure/instructure-ui.git"
+  },
+  "homepage": "https://instructure.github.io/instructure-ui/",
+  "bugs": "https://github.com/instructure/instructure-ui/issues",
+  "scripts": {
+    "lint": "ui-scripts lint",
+    "lint:fix": "ui-scripts lint --fix",
+    "clean": "ui-scripts clean",
+    "build": "ui-scripts build --modules es,cjs",
+    "build:watch": "npm run ts:check -- --watch & ui-scripts build --watch",
+    "build:types": "tsc -p tsconfig.build.json",
+    "ts:check": "tsc -p tsconfig.build.json --noEmit --emitDeclarationOnly false"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@babel/runtime": "^7.27.6",
+    "@instructure/emotion": "10.21.1-snapshot-11",
+    "@instructure/shared-types": "10.21.1-snapshot-11",
+    "@instructure/ui-heading": "10.21.1-snapshot-11",
+    "@instructure/ui-modal": "10.21.1-snapshot-11",
+    "@instructure/ui-popover": "10.21.1-snapshot-11",
+    "@instructure/ui-react-utils": "10.21.1-snapshot-11",
+    "@instructure/ui-testable": "10.21.1-snapshot-11",
+    "@instructure/ui-text": "10.21.1-snapshot-11",
+    "@instructure/ui-view": "10.21.1-snapshot-11",
+    "prop-types": "^15.8.1"
+  },
+  "devDependencies": {
+    "@instructure/ui-axe-check": "10.21.1-snapshot-11",
+    "@instructure/ui-babel-preset": "10.21.1-snapshot-11",
+    "@instructure/ui-color-utils": "10.21.1-snapshot-11",
+    "@instructure/ui-themes": "10.21.1-snapshot-11",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.0.1",
+    "vitest": "^3.2.2"
+  },
+  "peerDependencies": {
+    "react": ">=16.14 <=18"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": false
+}

package/src/AiInformation/README.md

@@ -0,0 +1,298 @@
+---
+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",
+      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 Retention",
+    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",
+      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 Retention",
+    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>
+```