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

package/src/AiInformation/v2/index.tsx

@@ -0,0 +1,197 @@
+/*
+ * 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 { useState } from 'react'
+import { Popover } from '@instructure/ui-popover/latest'
+import { CloseButton } from '@instructure/ui-buttons/latest'
+import { Heading } from '@instructure/ui-heading/latest'
+import { Text } from '@instructure/ui-text/latest'
+import { Link } from '@instructure/ui-link/latest'
+import { ExternalLinkInstUIIcon } from '@instructure/ui-icons'
+import { useStyle } from '@instructure/emotion'
+import { NutritionFacts } from '../../NutritionFacts/v1'
+import { DataPermissionLevels } from '../../DataPermissionLevels/v1'
+
+import { AiInformationProps } from './props'
+import generateStyle from './styles'
+
+/**
+---
+category: components/AI Components
+---
+**/
+const AiInformation = ({
+  title,
+  data,
+  trigger,
+  fullscreenModals = false,
+
+  dataPermissionLevelsModalLabel,
+  dataPermissionLevelsTitle,
+  dataPermissionLevelsData,
+  dataPermissionLevelsCloseButtonText,
+  dataPermissionLevelsCloseIconButtonScreenReaderLabel,
+  dataPermissionLevelsCurrentFeature,
+  dataPermissionLevelsCurrentFeatureText,
+
+  nutritionFactsModalLabel,
+  nutritionFactsTitle,
+  nutritionFactsFeatureName,
+  nutritionFactsData,
+  nutritionFactsCloseButtonText,
+  nutritionFactsCloseIconButtonScreenReaderLabel,
+  themeOverride
+}: AiInformationProps) => {
+  const [open, setOpen] = useState(false)
+
+  const styles = useStyle({
+    generateStyle,
+    themeOverride,
+    componentId: 'AiInformation',
+    displayName: 'AiInformation'
+  })
+
+  return (
+    <div>
+      <Popover
+        renderTrigger={trigger}
+        isShowingContent={open}
+        on="click"
+        screenReaderLabel="Popover Dialog Example"
+        shouldContainFocus
+        shouldReturnFocus
+        shouldCloseOnDocumentClick
+        offsetY="1rem"
+        onShowContent={() => setOpen(true)}
+        onHideContent={() => setOpen(false)}
+      >
+        <div css={styles?.aiInformation}>
+          <div css={styles?.header}>
+            <Heading level="h2" aiVariant="stacked" variant="titleModule">
+              {title}
+            </Heading>
+            <CloseButton
+              placement="end"
+              offset="small"
+              onClick={() => setOpen(false)}
+              screenReaderLabel="Close"
+            />
+          </div>
+          <div>
+            {data.map(
+              (
+                {
+                  featureName,
+                  privacyNoticeText,
+                  privacyNoticeUrl,
+                  permissionLevelText,
+                  permissionLevel,
+                  description,
+                  permissionLevelsModalTriggerText,
+                  modelNameText,
+                  modelName,
+                  nutritionFactsModalTriggerText
+                },
+                index
+              ) => (
+                <div key={index}>
+                  <div css={styles?.privacyNotice}>
+                    <Link
+                      href={privacyNoticeUrl}
+                      renderIcon={<ExternalLinkInstUIIcon size="sm" />}
+                      iconPlacement="end"
+                      variant="standalone"
+                    >
+                      {privacyNoticeText}
+                    </Link>
+                  </div>
+                  <div css={styles?.featureName}>
+                    <Heading level="h3" variant="titleCardRegular">
+                      {featureName}
+                    </Heading>
+                  </div>
+
+                  <div css={styles?.permissionLevelText}>
+                    <Heading level="h4" variant="label">
+                      {permissionLevelText}
+                    </Heading>
+                  </div>
+                  <div css={styles?.permissionLevel}>
+                    <Text variant="legend"> {permissionLevel} </Text>
+                  </div>
+                  <div css={styles?.description}>
+                    <Text variant="contentSmall"> {description} </Text>
+                  </div>
+                  <div css={styles?.permissionLevelsModalTriggerText}>
+                    <DataPermissionLevels
+                      fullscreen={fullscreenModals}
+                      title={dataPermissionLevelsTitle}
+                      currentFeatureText={
+                        dataPermissionLevelsCurrentFeatureText
+                      }
+                      currentFeature={dataPermissionLevelsCurrentFeature}
+                      closeIconButtonScreenReaderLabel={
+                        dataPermissionLevelsCloseIconButtonScreenReaderLabel
+                      }
+                      closeButtonText={dataPermissionLevelsCloseButtonText}
+                      modalLabel={dataPermissionLevelsModalLabel}
+                      triggerText={permissionLevelsModalTriggerText}
+                      data={dataPermissionLevelsData}
+                    />
+                  </div>
+                  <div css={styles?.modelNameText}>
+                    <Heading level="h3" variant="label">
+                      {' '}
+                      {modelNameText}{' '}
+                    </Heading>
+                  </div>
+                  <div css={styles?.modelName}>
+                    <Text variant="contentSmall"> {modelName} </Text>
+                  </div>
+                  <NutritionFacts
+                    fullscreen={fullscreenModals}
+                    modalLabel={nutritionFactsModalLabel}
+                    title={nutritionFactsTitle}
+                    featureName={nutritionFactsFeatureName}
+                    closeButtonText={nutritionFactsCloseButtonText}
+                    closeIconButtonScreenReaderLabel={
+                      nutritionFactsCloseIconButtonScreenReaderLabel
+                    }
+                    triggerText={nutritionFactsModalTriggerText}
+                    data={nutritionFactsData}
+                  />
+                  {data.length !== index + 1 ? (
+                    <div css={styles?.divider} />
+                  ) : null}
+                </div>
+              )
+            )}
+          </div>
+        </div>
+      </Popover>
+    </div>
+  )
+}
+
+export default AiInformation
+export { AiInformation }

package/src/AiInformation/v2/props.ts

@@ -0,0 +1,163 @@
+/*
+ * 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 { ComponentStyle, ThemeOverrideValue } from '@instructure/emotion'
+import type { OtherHTMLAttributes, Renderable } from '@instructure/shared-types'
+import type { NutritionFactsProps } from '../../NutritionFacts/v1/props'
+import type { DataPermissionLevelsProps } from '../../DataPermissionLevels/v1/props'
+
+type AiInformationOwnProps = {
+  /**
+   * i18n text for the title of popover
+   */
+  title: string
+  /**
+   * the data structure of the Features on the popover
+   */
+  data: {
+    featureName: string
+    privacyNoticeText: string
+    privacyNoticeUrl: string
+    permissionLevelText: string
+    permissionLevel: string
+    description: string
+    permissionLevelsModalTriggerText: string
+    modelNameText: string
+    modelName: string
+    nutritionFactsModalTriggerText: string
+  }[]
+  /**
+   *  sets the modal size to 'fullscreen' for NutritionFacts and DataPermissionLevels. Used for small viewports
+   */
+  fullscreenModals?: boolean
+
+  /**
+   * The element that triggers the popover
+   */
+  trigger: Renderable
+
+  // this is the same as DataPermissionLevels' props
+
+  /**
+   * i18n text for the label of the dataPermissionLevels modal
+   */
+  dataPermissionLevelsModalLabel: DataPermissionLevelsProps['modalLabel']
+  /**
+   * i18n text for the dataPermissionLevels title
+   */
+  dataPermissionLevelsTitle: DataPermissionLevelsProps['title']
+  /**
+   * i18n text for the "model and data" heading of the dataPermissionLevels
+   */
+  dataPermissionLevelsData: DataPermissionLevelsProps['data']
+  /**
+   * i18n text for the dataPermissionLevels close button
+   */
+  dataPermissionLevelsCloseButtonText: DataPermissionLevelsProps['closeButtonText']
+  /**
+   * i18n text for the dataPermissionLevels close iconButton
+   */
+  dataPermissionLevelsCloseIconButtonScreenReaderLabel: DataPermissionLevelsProps['closeIconButtonScreenReaderLabel']
+  /**
+   * i18n text for the dataPermissionLevels "current feature" text
+   */
+  dataPermissionLevelsCurrentFeatureText: DataPermissionLevelsProps['currentFeatureText']
+  /**
+   * i18n text for the dataPermissionLevels current feature
+   */
+  dataPermissionLevelsCurrentFeature: DataPermissionLevelsProps['currentFeature']
+
+  // this is the same as NutritionFacts' props
+
+  /**
+   * i18n text for the NutritionFacts label of the modal
+   */
+  nutritionFactsModalLabel: NutritionFactsProps['modalLabel']
+  /**
+   * i18n text for the NutritionFacts title
+   */
+  nutritionFactsTitle: NutritionFactsProps['title']
+  /**
+   * i18n text for the feature name that the NutritionFacts describes
+   */
+  nutritionFactsFeatureName: NutritionFactsProps['featureName']
+  /**
+   * i18n text for the "model and data" heading of the NutritionFacts
+   */
+  nutritionFactsData: NutritionFactsProps['data']
+  /**
+   * i18n text for the NutritionFacts close button
+   */
+  nutritionFactsCloseButtonText: NutritionFactsProps['closeButtonText']
+  /**
+   * i18n text for the NutritionFacts close iconButton
+   */
+  nutritionFactsCloseIconButtonScreenReaderLabel: NutritionFactsProps['closeIconButtonScreenReaderLabel']
+}
+
+type PropKeys = keyof AiInformationOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type AiInformationProps = AiInformationOwnProps & {
+  themeOverride?: ThemeOverrideValue
+} & OtherHTMLAttributes<AiInformationOwnProps>
+
+type AiInformationStyle = ComponentStyle<
+  | 'aiInformation'
+  | 'header'
+  | 'privacyNotice'
+  | 'featureName'
+  | 'permissionLevelText'
+  | 'permissionLevel'
+  | 'description'
+  | 'permissionLevelsModalTriggerText'
+  | 'modelNameText'
+  | 'modelName'
+  | 'divider'
+> & {
+  maxWidth?: string
+}
+
+const allowedProps: AllowedPropKeys = [
+  'fullscreenModals',
+  'title',
+  'data',
+  'trigger',
+  'dataPermissionLevelsModalLabel',
+  'dataPermissionLevelsTitle',
+  'dataPermissionLevelsData',
+  'dataPermissionLevelsCloseButtonText',
+  'dataPermissionLevelsCloseIconButtonScreenReaderLabel',
+  'dataPermissionLevelsCurrentFeatureText',
+  'dataPermissionLevelsCurrentFeature',
+  'nutritionFactsModalLabel',
+  'nutritionFactsTitle',
+  'nutritionFactsFeatureName',
+  'nutritionFactsData',
+  'nutritionFactsCloseButtonText',
+  'nutritionFactsCloseIconButtonScreenReaderLabel'
+]
+
+export type { AiInformationProps, AiInformationStyle }
+export { allowedProps }

package/src/AiInformation/v2/styles.ts

@@ -0,0 +1,101 @@
+/*
+ * 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 { 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 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: NewComponentTypes['AiInformation'],
+  _params: Record<string, never>,
+  _sharedTokens: SharedTokens
+): AiInformationStyle => {
+  return {
+    aiInformation: {
+      label: 'ai-information',
+      width: '18.5rem',
+      padding: componentTheme.bodyPadding,
+      boxSizing: 'border-box'
+    },
+    header: {
+      label: 'ai-information__header',
+      marginBottom: componentTheme.headingBottomMargin
+    },
+    privacyNotice: {
+      label: 'ai-information__privacyNotice',
+      marginBottom: componentTheme.headingBottomMargin
+    },
+    featureName: {
+      label: 'ai-information__feature-name',
+      marginBottom: componentTheme.featureNameBottomMargin
+    },
+    permissionLevelText: {
+      label: 'ai-information__permission-level-text',
+      marginBottom: componentTheme.permissionLevelTextBottomMargin
+    },
+    permissionLevel: {
+      label: 'ai-information__permission-level',
+      marginBottom: componentTheme.permissionLevelBottomMargin,
+      color: componentTheme.levelColor,
+      '& > *': {
+        color: `${componentTheme.levelColor} !important`
+      }
+    },
+    description: {
+      label: 'ai-information__description',
+      marginBottom: componentTheme.descriptionBottomMargin
+    },
+    permissionLevelsModalTriggerText: {
+      label: 'ai-information__permission-levels-modal-trigger-text',
+      marginBottom: componentTheme.permissionLevelsModalTriggerBottomMargin
+    },
+    modelNameText: {
+      label: 'ai-information__model-name-text',
+      marginBottom: componentTheme.modelNameTextBottomMargin
+    },
+    modelName: {
+      label: 'ai-information__model-name',
+      marginBottom: componentTheme.modelNameBottomMargin
+    },
+    divider: {
+      label: 'ai-information__divider',
+      marginBottom: componentTheme.dividerMargin,
+      marginTop: componentTheme.dividerMargin,
+      borderTop: 'solid 1px',
+      width: '100%',
+      borderColor: componentTheme.dividerColor
+    }
+  }
+}
+
+export default generateStyle

package/src/DataPermissionLevels/{index.tsx → v1/index.tsx}

@@ -22,12 +22,12 @@
  * SOFTWARE.
  */
 import { useState } from 'react'
-import { Modal } from '@instructure/ui-modal'
-import { Button, CloseButton } from '@instructure/ui-buttons'
-import { Heading } from '@instructure/ui-heading'
-import { Text } from '@instructure/ui-text'
-import { Link } from '@instructure/ui-link'
-import { useStyle } from '@instructure/emotion'
+import { Modal } from '@instructure/ui-modal/v11_6'
+import { Button, 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 { useStyleLegacy as useStyle } from '@instructure/emotion'
 
 import { DataPermissionLevelsProps } from './props'
 import generateStyle from './styles'

package/src/NutritionFacts/{index.tsx → v1/index.tsx}

@@ -22,12 +22,12 @@
  * SOFTWARE.
  */
 import { useState } from 'react'
-import { Modal } from '@instructure/ui-modal'
-import { Button, CloseButton } from '@instructure/ui-buttons'
-import { Heading } from '@instructure/ui-heading'
-import { Text } from '@instructure/ui-text'
-import { Link } from '@instructure/ui-link'
-import { useStyle } from '@instructure/emotion'
+import { Modal } from '@instructure/ui-modal/v11_6'
+import { Button, 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 { useStyleLegacy as useStyle } from '@instructure/emotion'
 
 import { NutritionFactsProps } from './props'
 import generateStyle from './styles'

package/src/{index.ts → exports/a.ts}

@@ -21,9 +21,9 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-export { NutritionFacts } from './NutritionFacts'
-export { DataPermissionLevels } from './DataPermissionLevels'
-export { AiInformation } from './AiInformation'
-export type { NutritionFactsProps } from './NutritionFacts/props'
-export type { DataPermissionLevelsProps } from './DataPermissionLevels/props'
-export type { AiInformationProps } from './AiInformation/props'
+export { NutritionFacts } from '../NutritionFacts/v1'
+export { DataPermissionLevels } from '../DataPermissionLevels/v1'
+export { AiInformation } from '../AiInformation/v1'
+export type { NutritionFactsProps } from '../NutritionFacts/v1/props'
+export type { DataPermissionLevelsProps } from '../DataPermissionLevels/v1/props'
+export type { AiInformationProps } from '../AiInformation/v1/props'

package/src/exports/b.ts

@@ -0,0 +1,29 @@
+/*
+ * 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.
+ */
+export { NutritionFacts } from '../NutritionFacts/v1'
+export { DataPermissionLevels } from '../DataPermissionLevels/v1'
+export { AiInformation } from '../AiInformation/v2'
+export type { NutritionFactsProps } from '../NutritionFacts/v1/props'
+export type { DataPermissionLevelsProps } from '../DataPermissionLevels/v1/props'
+export type { AiInformationProps } from '../AiInformation/v2/props'