diff --git a/packages/ui-instructure/package.json b/packages/ui-instructure/package.json index 1220b677a0..3db43cbb33 100644 --- a/packages/ui-instructure/package.json +++ b/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:*", diff --git a/packages/ui-instructure/src/AiInformation/README.md b/packages/ui-instructure/src/AiInformation/README.md index e91a774ff4..df452fa188 100644 --- a/packages/ui-instructure/src/AiInformation/README.md +++ b/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." }, diff --git a/packages/ui-instructure/src/AiInformation/index.tsx b/packages/ui-instructure/src/AiInformation/index.tsx index 49460ca482..f34d9a965a 100644 --- a/packages/ui-instructure/src/AiInformation/index.tsx +++ b/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 ) => (
+
+ } + iconPlacement="end" + variant="standalone" + > + {privacyNoticeText} + +
{featureName} diff --git a/packages/ui-instructure/src/AiInformation/props.ts b/packages/ui-instructure/src/AiInformation/props.ts index b11c89cb68..287f3df5ba 100644 --- a/packages/ui-instructure/src/AiInformation/props.ts +++ b/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> -type AiInformationProps = AiInformationOwnProps & - WithStyleProps & - OtherHTMLAttributes +type AiInformationProps = AiInformationOwnProps & { + themeOverride?: ThemeOverrideValue +} & OtherHTMLAttributes type AiInformationStyle = ComponentStyle< | 'aiInformation' | 'header' + | 'privacyNotice' | 'featureName' | 'permissionLevelText' | 'permissionLevel' diff --git a/packages/ui-instructure/src/AiInformation/styles.ts b/packages/ui-instructure/src/AiInformation/styles.ts index 626c5d80c6..ef4568d2b4 100644 --- a/packages/ui-instructure/src/AiInformation/styles.ts +++ b/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, + _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', diff --git a/packages/ui-instructure/src/AiInformation/theme.ts b/packages/ui-instructure/src/AiInformation/theme.ts deleted file mode 100644 index a9ccbb5b93..0000000000 --- a/packages/ui-instructure/src/AiInformation/theme.ts +++ /dev/null @@ -1,58 +0,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. - */ - -import type { Theme } from '@instructure/ui-themes' -import type { AiInformationTheme } 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): AiInformationTheme => { - const { colors, spacing } = theme - - const componentVariables: AiInformationTheme = { - bodyPadding: spacing?.paddingCardLarge, - headingBottomMargin: spacing?.sectionElements, - featureNameBottomMargin: spacing?.moduleElements, - permissionLevelTextBottomMargin: spacing?.space8, - permissionLevelBottomMargin: spacing?.space8, - descriptionBottomMargin: spacing?.space8, - permissionLevelsModalTriggerBottomMargin: spacing?.moduleElements, - modelNameTextBottomMargin: spacing?.space4, - modelNameBottomMargin: spacing?.space4, - - dividerMargin: spacing?.moduleElements, - dividerColor: colors?.ui?.surfaceDivider, - - levelColor: colors?.contrasts?.violet5790 - } - - return { - ...componentVariables - } -} - -export default generateComponentTheme diff --git a/packages/ui-instructure/tsconfig.build.json b/packages/ui-instructure/tsconfig.build.json index 20e727cc58..cb03d96e33 100644 --- a/packages/ui-instructure/tsconfig.build.json +++ b/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" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 196873dc02..fd87bbb1ec 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -2505,6 +2505,9 @@ importers: '@instructure/ui-heading': specifier: workspace:* version: link:../ui-heading + '@instructure/ui-icons': + specifier: workspace:* + version: link:../ui-icons '@instructure/ui-link': specifier: workspace:* version: link:../ui-link