@instructure/ui-instructure 10.21.1-snapshot-11

package/src/AiInformation/index.tsx

@@ -0,0 +1,182 @@
+/*
+ * 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'
+import { CloseButton } from '@instructure/ui-buttons'
+import { Heading } from '@instructure/ui-heading'
+import { Text } from '@instructure/ui-text'
+import { useStyle } from '@instructure/emotion'
+import { NutritionFacts, DataPermissionLevels } from '../'
+
+import { AiInformationProps } from './props'
+import generateStyle from './styles'
+import generateComponentTheme from './theme'
+
+/**
+---
+category: components/AI Components
+---
+**/
+const AiInformation = ({
+  title,
+  data,
+  trigger,
+  fullscreenModals = false,
+
+  dataPermissionLevelsModalLabel,
+  dataPermissionLevelsTitle,
+  dataPermissionLevelsData,
+  dataPermissionLevelsCloseButtonText,
+  dataPermissionLevelsCloseIconButtonScreenReaderLabel,
+  dataPermissionLevelsCurrentFeature,
+  dataPermissionLevelsCurrentFeatureText,
+
+  nutritionFactsModalLabel,
+  nutritionFactsTitle,
+  nutritionFactsFeatureName,
+  nutritionFactsData,
+  nutritionFactsCloseButtonText,
+  nutritionFactsCloseIconButtonScreenReaderLabel
+}: AiInformationProps) => {
+  const [open, setOpen] = useState(false)
+
+  const styles = useStyle({
+    generateStyle,
+    generateComponentTheme,
+    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,
+                  permissionLevelText,
+                  permissionLevel,
+                  description,
+                  permissionLevelsModalTriggerText,
+                  modelNameText,
+                  modelName,
+                  nutritionFactsModalTriggerText
+                },
+                index
+              ) => (
+                <div key={index}>
+                  <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/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 { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+import type {
+  AiInformationTheme,
+  OtherHTMLAttributes,
+  Renderable
+} from '@instructure/shared-types'
+import type { NutritionFactsProps, DataPermissionLevelsProps } from '../'
+
+type AiInformationOwnProps = {
+  /**
+   * i18n text for the title of popover
+   */
+  title: string
+  /**
+   * the data structure of the Features on the popover
+   */
+  data: {
+    featureName: 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 &
+  WithStyleProps<AiInformationTheme, AiInformationStyle> &
+  OtherHTMLAttributes<AiInformationOwnProps>
+
+type AiInformationStyle = ComponentStyle<
+  | 'aiInformation'
+  | 'header'
+  | '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/styles.ts

@@ -0,0 +1,92 @@
+/*
+ * 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 { AiInformationTheme } from '@instructure/shared-types'
+import type { AiInformationProps, 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
+ */
+const generateStyle = (
+  componentTheme: AiInformationTheme,
+  _props: AiInformationProps
+): AiInformationStyle => {
+  return {
+    aiInformation: {
+      label: 'ai-information',
+      width: '18.5rem',
+      padding: componentTheme.bodyPadding,
+      boxSizing: 'border-box'
+    },
+    header: {
+      label: 'ai-information__header',
+      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
+    },
+    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/AiInformation/theme.ts

@@ -0,0 +1,58 @@
+/*
+ * 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

package/src/DataPermissionLevels/README.md

@@ -0,0 +1,47 @@
+---
+describes: DataPermissionLevels
+---
+
+This component is made to display specific AI related data in Instructure products.
+
+```js
+---
+type: example
+readonly: true
+---
+<div>
+ <DataPermissionLevels
+  title="Data Permission Levels"
+  currentFeatureText="Current Feature:"
+  currentFeature="Feature name"
+  closeIconButtonScreenReaderLabel="Close"
+  closeButtonText="Close"
+  modalLabel="This is a Data Permission Levels modal"
+  triggerText="Data Permission Levels"
+  data={[
+    {
+    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."
+  },
+  ]}
+
+ />
+</div>
+```

package/src/DataPermissionLevels/index.tsx

@@ -0,0 +1,137 @@
+/*
+ * 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 { 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 { DataPermissionLevelsProps } from './props'
+import generateStyle from './styles'
+import generateComponentTheme from './theme'
+
+/**
+---
+category: components/AI Components
+---
+**/
+const DataPermissionLevels = ({
+  modalLabel,
+  title,
+  data,
+  closeButtonText,
+  closeIconButtonScreenReaderLabel,
+  currentFeature,
+  currentFeatureText,
+  triggerText,
+  fullscreen = false
+}: DataPermissionLevelsProps) => {
+  const [open, setOpen] = useState(false)
+
+  const styles = useStyle({
+    generateStyle,
+    generateComponentTheme,
+    componentId: 'DataPermissionLevels',
+    displayName: 'DataPermissionLevels'
+  })
+
+  return (
+    <div>
+      <Link
+        variant="standalone"
+        onClick={(e) => {
+          e.preventDefault()
+          setOpen(true)
+        }}
+        forceButtonRole={false}
+        href="#"
+      >
+        {triggerText}
+      </Link>
+      <Modal
+        size={fullscreen ? 'fullscreen' : 'medium'}
+        open={open}
+        onDismiss={() => {
+          setOpen(false)
+        }}
+        label={modalLabel}
+        shouldCloseOnDocumentClick
+      >
+        <Modal.Header spacing="compact">
+          <Heading aiVariant="stacked">{title}</Heading>
+          <CloseButton
+            size="medium"
+            placement="end"
+            offset="small"
+            onClick={() => setOpen(false)}
+            screenReaderLabel={closeIconButtonScreenReaderLabel}
+          />
+        </Modal.Header>
+        <Modal.Body>
+          <div css={styles?.body}>
+            {data.map(({ level, title, description, highlighted }, index) => (
+              <div
+                key={index}
+                css={highlighted ? styles?.highlightedCard : styles?.card}
+              >
+                {highlighted ? (
+                  <div css={styles?.currentFeature}>
+                    <Heading
+                      color="primary-inverse"
+                      level="reset"
+                      variant="labelInline"
+                    >
+                      {currentFeatureText}{' '}
+                    </Heading>
+                    <Text color="primary-inverse" variant="content">
+                      {currentFeature}
+                    </Text>
+                  </div>
+                ) : null}
+
+                <div css={styles?.contentContainer}>
+                  <div css={styles?.level}>{level}</div>
+                  <div css={styles?.permissionTitle}>
+                    <Text variant="descriptionPage">{title} </Text>
+                  </div>
+                  <Text variant="content" color="secondary">
+                    {description}
+                  </Text>
+                </div>
+              </div>
+            ))}
+          </div>
+        </Modal.Body>
+        <Modal.Footer>
+          <Button onClick={() => setOpen(false)}>{closeButtonText}</Button>
+        </Modal.Footer>
+      </Modal>
+    </div>
+  )
+}
+
+export default DataPermissionLevels
+export { DataPermissionLevels }