feat(many): add new package (instructure) and three new components: AiInformation, NutritionFacts and DataPermissionLevels

INSTUI-4605

Author: HerrTopi

package-lock.json

@@ -54,6 +54,11 @@ export { Editable, InPlaceEdit } from '@instructure/ui-editable'
 export { Expandable } from '@instructure/ui-expandable'
 export { Focusable } from '@instructure/ui-focusable'
 export { Img } from '@instructure/ui-img'
+export {
+  NutritionFacts,
+  DataPermissionLevels,
+  AiInformation
+} from '@instructure/ui-instructure'
 export { NumberInput } from '@instructure/ui-number-input'
 export { DateInput, DateInput2 } from '@instructure/ui-date-input'
 export { DateTimeInput } from '@instructure/ui-date-time-input'

packages/__docs__/components.ts

@@ -64,6 +64,7 @@
     "@instructure/ui-i18n": "10.21.0",
     "@instructure/ui-icons": "10.21.0",
     "@instructure/ui-img": "10.21.0",
+    "@instructure/ui-instructure": "10.21.0",
     "@instructure/ui-link": "10.21.0",
     "@instructure/ui-list": "10.21.0",
     "@instructure/ui-menu": "10.21.0",

packages/__docs__/package.json

@@ -96,6 +96,7 @@ const alias = {
   '@instructure/ui-grid$': path.resolve(import.meta.dirname, '../ui-grid/src/'),
   '@instructure/ui-i18n$': path.resolve(import.meta.dirname, '../ui-i18n/src/'),
   '@instructure/ui-img$': path.resolve(import.meta.dirname, '../ui-img/src/'),
+  '@instructure/ui-instructure$': path.resolve(import.meta.dirname, '../ui-instructure/src/'),
   '@instructure/ui-link$': path.resolve(import.meta.dirname, '../ui-link/src/'),
   '@instructure/ui-list$': path.resolve(import.meta.dirname, '../ui-list/src/'),
   '@instructure/ui-menu$': path.resolve(import.meta.dirname, '../ui-menu/src/'),

packages/__docs__/resolve.mjs

@@ -39,7 +39,8 @@ const generateStyle = (): PropertiesStyle => {
     properties: {
       label: 'properties',
       marginTop: '2rem',
-      code: { background: 'transparent', border: 'none' }
+      code: { background: 'transparent', border: 'none' },
+      overflow: 'auto'
     },
 
     list: {

packages/__docs__/src/Properties/styles.ts

@@ -127,6 +127,9 @@
     {
       "path": "../ui-img/tsconfig.build.json"
     },
+    {
+      "path": "../ui-instructure/tsconfig.build.json"
+    },
     {
       "path": "../ui-link/tsconfig.build.json"
     },

packages/__docs__/tsconfig.build.json

@@ -56,7 +56,8 @@ const getComponentThemeOverride = (
   const name = displayName as ComponentName
   const id = componentId as ComponentName
 
-  const { themeOverride } = props as WithStyleProps
+  const themeOverride = props ? props.themeOverride : undefined
+
   const { componentOverrides } = theme as Overrides
 
   let overridesFromTheme: Partial<ComponentTheme> = {}

packages/emotion/src/getComponentThemeOverride.ts

@@ -682,6 +682,50 @@ export type ImgTheme = {
   imageBlurAmount: string | 0
 }
 
+export type NutritionFactsTheme = {
+  cardBorderRadius: Border['radiusMedium']
+  cardBorderColor: string
+  cardBorderWidth: Border['widthSmall']
+  cardPadding: Spacing['space12']
+  cardExplainerContainerBottomMargin: Spacing['space8']
+  cardGap: Spacing['modalElements']
+  bodyPadding: Spacing['paddingCardLarge']
+  blockGap: Spacing['sectionElements']
+}
+
+export type DataPermissionLevelsTheme = {
+  cardBorderRadius: Border['radiusMedium']
+  cardBorderColor: string
+  cardBorderWidth: Border['widthMedium']
+  cardPadding: Spacing['space12']
+  cardExplainerContainerBottomMargin: Spacing['space8']
+  cardGap: Spacing['modalElements']
+  currentFeaturePadding: Spacing['space12']
+  levelColor: string
+
+  bodyPadding: Spacing['paddingCardLarge']
+
+  aiTextLeftGradientColor: string
+  aiTextRightGradientColor: string
+}
+
+export type 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: string
+
+  levelColor: string
+}
+
 export type LinkTheme = {
   fontFamily: Typography['fontFamily']
   fontWeight: Typography['fontWeightNormal']

packages/shared-types/src/ComponentThemeVariables.ts

@@ -39,7 +39,7 @@ const generateStyle = (
   componentTheme: HeadingTheme,
   props: HeadingProps
 ): HeadingStyle => {
-  const { level, color, border, variant, renderIcon, aiVariant } = props
+  const { level, color, border, variant, aiVariant } = props
 
   const variants: Record<NonNullable<HeadingProps['variant']>, object> = {
     titlePageDesktop: {
@@ -223,10 +223,10 @@ const generateStyle = (
       alignItems: 'center',
       ...(aiVariant === 'stacked'
         ? {
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'flex-start'
-        }
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'flex-start'
+          }
         : {})
     }
   }

packages/ui-heading/src/Heading/styles.ts

@@ -5,9 +5,7 @@
     "composite": true,
     "rootDir": "./src"
   },
-  "include": [
-    "src"
-  ],
+  "include": ["src"],
   "references": [
     {
       "path": "../console/tsconfig.build.json"
@@ -39,9 +37,6 @@
     {
       "path": "../ui-babel-preset/tsconfig.build.json"
     },
-    {
-      "path": "../ui-test-utils/tsconfig.build.json"
-    },
     {
       "path": "../ui-themes/tsconfig.build.json"
     }