Skip to content

Commit 9ac14f9

Browse files
git-nandorgit-nandor
committed
feat(ui-instructure): migrate aiinformation to the new theming system
1 parent 9054739 commit 9ac14f9

8 files changed

Lines changed: 65 additions & 90 deletions

File tree

‎packages/ui-instructure/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@
2929
"@instructure/ui-buttons": "workspace:*",
3030
"@instructure/ui-heading": "workspace:*",
3131
"@instructure/ui-link": "workspace:*",
32+
"@instructure/ui-icons": "workspace:*",
3233
"@instructure/ui-modal": "workspace:*",
3334
"@instructure/ui-popover": "workspace:*",
3435
"@instructure/ui-react-utils": "workspace:*",

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

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,10 @@ readonly: true
2323
data={[
2424
{
2525
featureName: "Feature name",
26+
privacyNoticeText: "AI Privacy Notice",
27+
privacyNoticeUrl: "https://www.instructure.com/policies/artificial-intelligence-privacy",
2628
permissionLevelText: "Permission Level",
27-
permissionLevel: "LEVEL 1",
29+
permissionLevel: "Level 1",
2830
description: "We leverage anonymized aggregate data for detailed analytics to inform model development and product improvements. No AI models are used at this level.",
2931
permissionLevelsModalTriggerText: "Permission Levels",
3032
modelNameText: "Base Model",
@@ -42,23 +44,23 @@ readonly: true
4244
dataPermissionLevelsTriggerText="Data Permission Levels"
4345
dataPermissionLevelsData={[
4446
{
45-
level: "LEVEL 1",
47+
level: "Level 1",
4648
title: "Descriptive Analytics and Research",
4749
description: "We leverage anonymized aggregate data for detailed analytics to inform model development and product improvements. No AI models are used at this level.",
4850
highlighted:true
4951
},
5052
{
51-
level: "LEVEL 2",
53+
level: "Level 2",
5254
title: "AI-Powered Features Without Data Training",
5355
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."
5456
},
5557
{
56-
level: "LEVEL 3",
58+
level: "Level 3",
5759
title: "AI Customization for Individual Institutions",
5860
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."
5961
},
6062
{
61-
level: "LEVEL 4",
63+
level: "Level 4",
6264
title: "Collaborative AI Consortium",
6365
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."
6466
},
@@ -169,8 +171,10 @@ readonly: true
169171
data={[
170172
{
171173
featureName: "Feature name",
174+
privacyNoticeText: "AI Privacy Notice",
175+
privacyNoticeUrl: "https://www.instructure.com/policies/artificial-intelligence-privacy",
172176
permissionLevelText: "Permission Level",
173-
permissionLevel: "LEVEL 1",
177+
permissionLevel: "Level 1",
174178
description: "We leverage anonymized aggregate data for detailed analytics to inform model development and product improvements. No AI models are used at this level.",
175179
permissionLevelsModalTriggerText: "Permission Levels",
176180
modelNameText: "Base Model",
@@ -188,23 +192,23 @@ readonly: true
188192
dataPermissionLevelsTriggerText="Data Permission Levels"
189193
dataPermissionLevelsData={[
190194
{
191-
level: "LEVEL 1",
195+
level: "Level 1",
192196
title: "Descriptive Analytics and Research",
193197
description: "We leverage anonymized aggregate data for detailed analytics to inform model development and product improvements. No AI models are used at this level.",
194198
highlighted:true
195199
},
196200
{
197-
level: "LEVEL 2",
201+
level: "Level 2",
198202
title: "AI-Powered Features Without Data Training",
199203
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."
200204
},
201205
{
202-
level: "LEVEL 3",
206+
level: "Level 3",
203207
title: "AI Customization for Individual Institutions",
204208
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."
205209
},
206210
{
207-
level: "LEVEL 4",
211+
level: "Level 4",
208212
title: "Collaborative AI Consortium",
209213
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."
210214
},

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

Lines changed: 19 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -26,12 +26,13 @@ import { Popover } from '@instructure/ui-popover'
2626
import { CloseButton } from '@instructure/ui-buttons'
2727
import { Heading } from '@instructure/ui-heading'
2828
import { Text } from '@instructure/ui-text'
29-
import { useStyleRework } from '@instructure/emotion'
29+
import { Link } from '@instructure/ui-link'
30+
import { ExternalLinkInstUIIcon } from '@instructure/ui-icons'
31+
import { useStyle } from '@instructure/emotion'
3032
import { NutritionFacts, DataPermissionLevels } from '../'
3133

3234
import { AiInformationProps } from './props'
3335
import generateStyle from './styles'
34-
import generateComponentTheme from './theme'
3536

3637
/**
3738
---
@@ -57,13 +58,14 @@ const AiInformation = ({
5758
nutritionFactsFeatureName,
5859
nutritionFactsData,
5960
nutritionFactsCloseButtonText,
60-
nutritionFactsCloseIconButtonScreenReaderLabel
61+
nutritionFactsCloseIconButtonScreenReaderLabel,
62+
themeOverride
6163
}: AiInformationProps) => {
6264
const [open, setOpen] = useState(false)
6365

64-
const styles = useStyleRework({
66+
const styles = useStyle({
6567
generateStyle,
66-
generateComponentTheme,
68+
themeOverride,
6769
componentId: 'AiInformation',
6870
displayName: 'AiInformation'
6971
})
@@ -99,6 +101,8 @@ const AiInformation = ({
99101
(
100102
{
101103
featureName,
104+
privacyNoticeText,
105+
privacyNoticeUrl,
102106
permissionLevelText,
103107
permissionLevel,
104108
description,
@@ -110,6 +114,16 @@ const AiInformation = ({
110114
index
111115
) => (
112116
<div key={index}>
117+
<div css={styles?.privacyNotice}>
118+
<Link
119+
href={privacyNoticeUrl}
120+
renderIcon={<ExternalLinkInstUIIcon size="sm" />}
121+
iconPlacement="end"
122+
variant="standalone"
123+
>
124+
{privacyNoticeText}
125+
</Link>
126+
</div>
113127
<div css={styles?.featureName}>
114128
<Heading level="h3" variant="titleCardRegular">
115129
{featureName}

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

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -21,12 +21,8 @@
2121
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
2222
* SOFTWARE.
2323
*/
24-
import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
25-
import type {
26-
AiInformationTheme,
27-
OtherHTMLAttributes,
28-
Renderable
29-
} from '@instructure/shared-types'
24+
import type { ComponentStyle, ThemeOverrideValue } from '@instructure/emotion'
25+
import type { OtherHTMLAttributes, Renderable } from '@instructure/shared-types'
3026
import type { NutritionFactsProps, DataPermissionLevelsProps } from '../'
3127

3228
type AiInformationOwnProps = {
@@ -39,6 +35,8 @@ type AiInformationOwnProps = {
3935
*/
4036
data: {
4137
featureName: string
38+
privacyNoticeText: string
39+
privacyNoticeUrl: string
4240
permissionLevelText: string
4341
permissionLevel: string
4442
description: string
@@ -120,13 +118,14 @@ type PropKeys = keyof AiInformationOwnProps
120118

121119
type AllowedPropKeys = Readonly<Array<PropKeys>>
122120

123-
type AiInformationProps = AiInformationOwnProps &
124-
WithStyleProps<AiInformationTheme, AiInformationStyle> &
125-
OtherHTMLAttributes<AiInformationOwnProps>
121+
type AiInformationProps = AiInformationOwnProps & {
122+
themeOverride?: ThemeOverrideValue
123+
} & OtherHTMLAttributes<AiInformationOwnProps>
126124

127125
type AiInformationStyle = ComponentStyle<
128126
| 'aiInformation'
129127
| 'header'
128+
| 'privacyNotice'
130129
| 'featureName'
131130
| 'permissionLevelText'
132131
| 'permissionLevel'

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

Lines changed: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -22,21 +22,23 @@
2222
* SOFTWARE.
2323
*/
2424

25-
import type { AiInformationTheme } from '@instructure/shared-types'
26-
import type { AiInformationProps, AiInformationStyle } from './props'
25+
import type { NewComponentTypes, SharedTokens } from '@instructure/ui-themes'
26+
import type { AiInformationStyle } from './props'
2727

2828
/**
2929
* ---
3030
* private: true
3131
* ---
3232
* Generates the style object from the theme and provided additional information
33-
* @param {Object} componentTheme The theme variable object.
34-
* @param {Object} props the props of the component, the style is applied to
35-
* @return {Object} The final style object, which will be used in the component
33+
* @param componentTheme The theme variable object.
34+
* @param params Additional parameters to customize the style.
35+
* @param sharedTokens Shared token object that stores common values for the theme.
36+
* @return The final style object, which will be used in the component
3637
*/
3738
const generateStyle = (
38-
componentTheme: AiInformationTheme,
39-
_props: AiInformationProps
39+
componentTheme: NewComponentTypes['AiInformation'],
40+
_params: Record<string, never>,
41+
_sharedTokens: SharedTokens
4042
): AiInformationStyle => {
4143
return {
4244
aiInformation: {
@@ -49,6 +51,10 @@ const generateStyle = (
4951
label: 'ai-information__header',
5052
marginBottom: componentTheme.headingBottomMargin
5153
},
54+
privacyNotice: {
55+
label: 'ai-information__privacyNotice',
56+
marginBottom: componentTheme.headingBottomMargin
57+
},
5258
featureName: {
5359
label: 'ai-information__feature-name',
5460
marginBottom: componentTheme.featureNameBottomMargin
@@ -60,7 +66,10 @@ const generateStyle = (
6066
permissionLevel: {
6167
label: 'ai-information__permission-level',
6268
marginBottom: componentTheme.permissionLevelBottomMargin,
63-
color: componentTheme.levelColor
69+
color: componentTheme.levelColor,
70+
'& > *': {
71+
color: `${componentTheme.levelColor} !important`
72+
}
6473
},
6574
description: {
6675
label: 'ai-information__description',

‎packages/ui-instructure/src/AiInformation/theme.ts‎

Lines changed: 0 additions & 58 deletions
This file was deleted.

‎packages/ui-instructure/tsconfig.build.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,9 @@
4343
{
4444
"path": "../ui-text/tsconfig.build.json"
4545
},
46+
{
47+
"path": "../ui-icons/tsconfig.build.json"
48+
},
4649
{
4750
"path": "../ui-themes/tsconfig.build.json"
4851
},

‎pnpm-lock.yaml‎

Lines changed: 3 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)