@instructure/ui-instructure 10.21.1-snapshot-11

package/src/DataPermissionLevels/props.ts

@@ -0,0 +1,109 @@
+/*
+ * 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 {
+  DataPermissionLevelsTheme,
+  OtherHTMLAttributes
+} from '@instructure/shared-types'
+
+type DataPermissionLevelsOwnProps = {
+  /**
+   * i18n text for the label of the modal
+   */
+  modalLabel: string
+  /**
+   * i18n text for the dataPermissionLevels title
+   */
+  title: string
+  /**
+   * i18n text for the "model and data" heading of the dataPermissionLevels
+   */
+  data: {
+    level: string
+    title: string
+    description: string
+    highlighted?: boolean
+  }[]
+  /**
+   * i18n text for the close button
+   */
+  closeButtonText: string
+  /**
+   * i18n text for the close iconButton
+   */
+  closeIconButtonScreenReaderLabel: string
+  /**
+   * i18n text for the "current feature" text
+   */
+  currentFeatureText: string
+  /**
+   * i18n text for the current feature
+   */
+  currentFeature: string
+  /**
+   * i18n text for the trigger
+   */
+  triggerText: string
+  /**
+   * sets the modal size to 'fullscreen'. Used for small viewports
+   */
+  fullscreen?: boolean
+}
+
+type PropKeys = keyof DataPermissionLevelsOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type DataPermissionLevelsProps = DataPermissionLevelsOwnProps &
+  WithStyleProps<DataPermissionLevelsTheme, DataPermissionLevelsStyle> &
+  OtherHTMLAttributes<DataPermissionLevelsOwnProps>
+
+type DataPermissionLevelsStyle = ComponentStyle<
+  | 'dataPermissionLevels'
+  | 'body'
+  | 'card'
+  | 'level'
+  | 'highlightedCard'
+  | 'currentFeature'
+  | 'contentContainer'
+  | 'permissionTitle'
+> & {
+  maxWidth?: string
+}
+
+const allowedProps: AllowedPropKeys = [
+  'fullscreen',
+  'modalLabel',
+  'title',
+  'data',
+  'closeButtonText',
+  'closeIconButtonScreenReaderLabel',
+  'currentFeatureText',
+  'currentFeature',
+  'triggerText'
+]
+
+export type { DataPermissionLevelsProps, DataPermissionLevelsStyle }
+export { allowedProps }

package/src/DataPermissionLevels/styles.ts

@@ -0,0 +1,106 @@
+/*
+ * 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 { DataPermissionLevelsTheme } from '@instructure/shared-types'
+import type {
+  DataPermissionLevelsProps,
+  DataPermissionLevelsStyle
+} 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: DataPermissionLevelsTheme,
+  _props: DataPermissionLevelsProps
+): DataPermissionLevelsStyle => {
+  return {
+    dataPermissionLevels: {
+      label: 'data-permission-levels'
+    },
+    body: {
+      label: 'data-permission-levels__body',
+      display: 'flex',
+      flexDirection: 'column',
+      padding: componentTheme?.bodyPadding
+    },
+    card: {
+      label: 'data-permission-levels__card',
+      padding: '2px',
+      borderStyle: 'solid',
+      borderColor: 'transparent',
+      borderWidth: componentTheme?.cardBorderWidth,
+      display: 'flex',
+      flexDirection: 'column'
+    },
+    highlightedCard: {
+      label: 'data-permission-levels__highlighted-card',
+      borderStyle: 'solid',
+      borderWidth: componentTheme?.cardBorderWidth,
+      borderColor: componentTheme?.cardBorderColor,
+      borderRadius: componentTheme?.cardBorderRadius,
+      padding: '2px',
+      display: 'flex',
+      flexDirection: 'column',
+      background: `
+        linear-gradient(to right,  ${componentTheme.aiTextLeftGradientColor} 0%, ${componentTheme.aiTextRightGradientColor} 100%) padding-box,
+        linear-gradient(to right, ${componentTheme.aiTextLeftGradientColor} 0%, ${componentTheme.aiTextRightGradientColor} 100%) border-box`,
+      border: 'solid transparent'
+    },
+    level: {
+      label: 'data-permission-levels__level',
+      color: componentTheme?.levelColor
+    },
+    currentFeature: {
+      label: 'data-permission-levels__current-feature',
+      background: `
+        linear-gradient(to right, ${componentTheme.aiTextLeftGradientColor} 0%, ${componentTheme.aiTextRightGradientColor} 100%)`,
+      paddingLeft: componentTheme?.currentFeaturePaddingSides,
+      paddingRight: componentTheme?.currentFeaturePaddingSides,
+      paddingTop: componentTheme?.currentFeaturePaddingTopBottom,
+      paddingBottom: componentTheme?.currentFeaturePaddingTopBottom,
+      borderTopLeftRadius: componentTheme?.cardBorderRadius,
+      borderTopRightRadius: componentTheme?.cardBorderRadius
+    },
+    contentContainer: {
+      label: 'data-permission-levels__content-container',
+      background: 'white',
+      padding: '10px',
+      display: 'flex',
+      flexDirection: 'column'
+    },
+    permissionTitle: {
+      label: 'data-permission-levels__permission-title',
+      marginBottom: componentTheme?.permissionTitleBottomMargin
+    }
+  }
+}
+
+export default generateStyle

package/src/DataPermissionLevels/theme.ts

@@ -0,0 +1,59 @@
+/*
+ * 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 { DataPermissionLevelsTheme } 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): DataPermissionLevelsTheme => {
+  const { colors, spacing, borders } = theme
+
+  const componentVariables: DataPermissionLevelsTheme = {
+    cardBorderRadius: borders?.radiusMedium,
+    cardBorderColor: colors?.ui?.lineStroke,
+    cardBorderWidth: borders?.widthMedium,
+    cardPadding: spacing?.space12,
+    cardExplainerContainerBottomMargin: spacing?.space8,
+    cardGap: spacing?.modalElements,
+    currentFeaturePaddingSides: spacing?.space12,
+    currentFeaturePaddingTopBottom: spacing?.space8,
+    permissionTitleBottomMargin: spacing?.space8,
+    levelColor: colors?.contrasts?.violet5790,
+
+    bodyPadding: spacing?.paddingCardLarge,
+
+    aiTextLeftGradientColor: colors?.contrasts?.violet4570,
+    aiTextRightGradientColor: colors?.contrasts?.sea4570
+  }
+
+  return {
+    ...componentVariables
+  }
+}
+
+export default generateComponentTheme

package/src/NutritionFacts/README.md

@@ -0,0 +1,99 @@
+---
+describes: NutritionFacts
+---
+
+This component is made to display specific AI related data in Instructure products.
+
+```js
+---
+type: example
+---
+<div>
+  <NutritionFacts
+  modalLabel="This is a modal for AI facts"
+  title="Nutrition Facts"
+  featureName="Feature Name"
+  closeButtonText="Close"
+  closeIconButtonScreenReaderLabel="Close"
+  triggerText="Nutrition Facts"
+  data={[
+    {
+    blockTitle: "Model & Data",
+    segmentData:[
+      {
+         segmentTitle: "Base Model",
+        description: "The foundational AI on which further training and customizations are built.",
+        value: "Value",
+        valueDescription: "Description"
+      },
+      {
+         segmentTitle: "Trained with User Data",
+        description: "Indicates the AI model has been given customer data in order to improve its results.",
+        value: "Value",
+      },
+      {
+         segmentTitle: "Data Shared with Model",
+        description: "Indicates which training or operational content was given to the model.",
+        value: "Value",
+      }
+    ]
+  },
+  {
+    blockTitle: "Privacy & Compliance",
+    segmentData:[
+      {
+        segmentTitle: "Data Retention",
+        description: "How long the model stores customer data.",
+        value: "Value",
+      },
+      {
+        segmentTitle: "Data Logging",
+        description: "Recording the AI's performance for auditing, analysis, and improvement.",
+        value: "Value",
+      },
+      {
+        segmentTitle: "Regions Supported",
+        description: "The locations where the AI model is officially available and supported.",
+        value: "Value",
+      },
+      {
+        segmentTitle: "PII",
+        description: "Sensitive data that can be used to identify an individual.",
+        value: "Value",
+      },
+    ]
+  },
+  {
+    blockTitle: "Outputs",
+    segmentData:[
+      {
+        segmentTitle: "AI Settings Control",
+        description: "The ability to turn the AI on or off within the product.",
+        value: "Value",
+      },
+      {
+        segmentTitle: "Human in the Loop",
+        description: "Indicates if a human is involved in the AI's process or output.",
+        value: "Value",
+      },
+      {
+        segmentTitle: "Guardrails",
+        description: "Preventative safety mechanisms or limitations built into the AI model.",
+        value: "Value",
+      },
+      {
+        segmentTitle: "Expected Risks",
+        description: "Any risks the model may pose to the user.",
+        value: "Value",
+      },
+      {
+        segmentTitle: "Intended Outcomes",
+        description: "The specific results the AI model is meant to achieve.",
+        value: "Value",
+      }
+    ]
+  }
+  ]}
+   />
+</div>
+```

package/src/NutritionFacts/index.tsx

@@ -0,0 +1,147 @@
+/*
+ * 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 { NutritionFactsProps } from './props'
+import generateStyle from './styles'
+import generateComponentTheme from './theme'
+
+/**
+---
+category: components/AI Components
+---
+**/
+const NutritionFacts = ({
+  modalLabel,
+  title,
+  featureName,
+  data,
+  closeButtonText,
+  closeIconButtonScreenReaderLabel,
+  triggerText,
+  fullscreen = false
+}: NutritionFactsProps) => {
+  const [open, setOpen] = useState(false)
+
+  const styles = useStyle({
+    generateStyle,
+    generateComponentTheme,
+    componentId: 'NutritionFacts',
+    displayName: 'NutritionFacts'
+  })
+
+  return (
+    <div>
+      <Link
+        variant="standalone"
+        onClick={(e) => {
+          e.preventDefault()
+          setOpen(true)
+        }}
+        forceButtonRole={false}
+        href="#"
+      >
+        {triggerText}
+      </Link>
+      <Modal
+        open={open}
+        onDismiss={() => {
+          setOpen(false)
+        }}
+        label={modalLabel}
+        shouldCloseOnDocumentClick
+        size={fullscreen ? 'fullscreen' : 'medium'}
+      >
+        <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}>
+            <Heading variant="titleSection" level="h3">
+              {' '}
+              {featureName}{' '}
+            </Heading>
+            {data.map(({ blockTitle, segmentData }, index) => {
+              return (
+                <div key={index} css={styles?.blockContainer}>
+                  <Heading variant="titleModule" level="h4">
+                    {' '}
+                    {blockTitle}{' '}
+                  </Heading>
+                  <div css={styles?.segmentContainer}>
+                    {segmentData.map(
+                      (
+                        { segmentTitle, description, value, valueDescription },
+                        index
+                      ) => {
+                        return (
+                          <div key={index} css={styles?.segmentCard}>
+                            <div css={styles?.segmentCardExplainerContainer}>
+                              <Heading variant="label">
+                                {' '}
+                                {segmentTitle}{' '}
+                              </Heading>
+                              <Text variant="contentSmall" color="secondary">
+                                {' '}
+                                {description}{' '}
+                              </Text>
+                            </div>
+                            <Text variant="content"> {value} </Text>
+                            <Text variant="contentSmall" color="secondary">
+                              {' '}
+                              {valueDescription}{' '}
+                            </Text>
+                          </div>
+                        )
+                      }
+                    )}
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+        </Modal.Body>
+        <Modal.Footer>
+          <Button onClick={() => setOpen(false)}>{closeButtonText}</Button>
+        </Modal.Footer>
+      </Modal>
+    </div>
+  )
+}
+
+export default NutritionFacts
+export { NutritionFacts }

package/src/NutritionFacts/props.ts

@@ -0,0 +1,106 @@
+/*
+ * 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 {
+  NutritionFactsTheme,
+  OtherHTMLAttributes
+} from '@instructure/shared-types'
+
+type BlockType = {
+  blockTitle: string
+  segmentData: {
+    segmentTitle: string
+    description: string
+    value: string
+    valueDescription?: string
+  }[]
+}
+
+type NutritionFactsOwnProps = {
+  /**
+   * i18n text for the label of the modal
+   */
+  modalLabel: string
+  /**
+   * i18n text for the Nutrition Facts title
+   */
+  title: string
+  /**
+   * i18n text for the feature name that the Nutrition Facts describes
+   */
+  featureName: string
+  /**
+   * i18n text for the "model and data" heading of the Nutrition Facts
+   */
+  data: BlockType[]
+  /**
+   * i18n text for the close button
+   */
+  closeButtonText: string
+  /**
+   * i18n text for the close iconButton
+   */
+  closeIconButtonScreenReaderLabel: string
+  /**
+   * i18n text for the trigger
+   */
+  triggerText: string
+  /**
+   * sets the modal size to 'fullscreen'. Used for small viewports
+   */
+  fullscreen?: boolean
+}
+
+type PropKeys = keyof NutritionFactsOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type NutritionFactsProps = NutritionFactsOwnProps &
+  WithStyleProps<NutritionFactsTheme, NutritionFactsStyle> &
+  OtherHTMLAttributes<NutritionFactsOwnProps>
+
+type NutritionFactsStyle = ComponentStyle<
+  | 'segmentCard'
+  | 'segmentCardExplainerContainer'
+  | 'segmentContainer'
+  | 'blockContainer'
+  | 'body'
+> & {
+  maxWidth?: string
+}
+
+const allowedProps: AllowedPropKeys = [
+  'fullscreen',
+  'modalLabel',
+  'title',
+  'featureName',
+  'data',
+  'closeButtonText',
+  'closeIconButtonScreenReaderLabel',
+  'triggerText'
+]
+
+export type { NutritionFactsProps, NutritionFactsStyle }
+export { allowedProps }