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

package/src/InlineList/v2/index.tsx

@@ -0,0 +1,102 @@
+/*
+ * 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 { Children, Component, ReactElement } from 'react'
+
+import { View } from '@instructure/ui-view/latest'
+import { passthroughProps, safeCloneElement } from '@instructure/ui-react-utils'
+
+import { InlineListItem } from './InlineListItem'
+
+import { allowedProps } from './props'
+import type { InlineListProps } from './props'
+
+/**
+---
+category: components
+---
+
+**/
+class InlineList extends Component<InlineListProps> {
+  static allowedProps = allowedProps
+  static defaultProps = {
+    itemSpacing: 'none',
+    as: 'ul',
+    margin: 'none',
+    delimiter: 'none',
+    size: 'medium'
+  }
+
+  static Item = InlineListItem
+
+  ref: Element | null = null
+
+  handleRef = (el: Element | null) => {
+    const { elementRef } = this.props
+
+    this.ref = el
+
+    if (typeof elementRef === 'function') {
+      elementRef(el)
+    }
+  }
+
+  renderChildren() {
+    const childrenArray = Children.toArray(this.props.children)
+    const lastIndex = childrenArray.length - 1
+
+    return childrenArray.map((child, index) => {
+      if (!child) return null
+
+      const shouldRenderPlaceholder = index === lastIndex
+
+      return safeCloneElement(child as ReactElement, {
+        delimiter: this.props.delimiter,
+        size: this.props.size,
+        spacing: this.props.itemSpacing,
+        lastPlaceholder: shouldRenderPlaceholder
+      })
+    })
+  }
+
+  render() {
+    const { as, margin, elementRef, ...rest } = this.props
+
+    return (
+      <View
+        {...passthroughProps(rest)}
+        as={as}
+        margin={margin}
+        padding="0"
+        elementRef={this.handleRef}
+        display="block"
+        data-cid="InlineList"
+      >
+        {this.renderChildren()}
+      </View>
+    )
+  }
+}
+
+export default InlineList
+export { InlineList }

package/src/InlineList/v2/props.ts

@@ -0,0 +1,80 @@
+/*
+ * 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 React from 'react'
+import type { Spacing } from '@instructure/emotion'
+import type { OtherHTMLAttributes } from '@instructure/shared-types'
+
+type InlineListOwnProps = {
+  /**
+   * Only accepts `<InlineList.Item>` as a child
+   */
+  //TODO type children better e.g.:ChildrenPropTypes.oneOf([InlineListItem])
+  children?: React.ReactNode
+  as?: 'ul' | 'ol'
+  /**
+   * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
+   * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
+   * familiar CSS-like shorthand. For example: `margin="small auto large"`.
+   */
+  margin?: Spacing
+  size?: 'small' | 'medium' | 'large'
+  delimiter?: 'none' | 'pipe' | 'slash' | 'arrow'
+  /**
+   * Sets the margin separating each ListItem.
+   */
+  itemSpacing?:
+    | 'none'
+    | 'xxx-small'
+    | 'xx-small'
+    | 'x-small'
+    | 'small'
+    | 'medium'
+    | 'large'
+    | 'x-large'
+    | 'xx-large'
+  /**
+   * provides a reference to the underlying html root element
+   */
+  elementRef?: (element: Element | null) => void
+}
+
+type PropKeys = keyof InlineListOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type InlineListProps = InlineListOwnProps &
+  OtherHTMLAttributes<InlineListOwnProps>
+const allowedProps: AllowedPropKeys = [
+  'children',
+  'as',
+  'margin',
+  'size',
+  'delimiter',
+  'itemSpacing',
+  'elementRef'
+]
+
+export type { InlineListProps }
+export { allowedProps }

package/src/List/{ListItem → v1/ListItem}/index.tsx

@@ -24,10 +24,10 @@
 
 import { Component } from 'react'
 
-import { View } from '@instructure/ui-view'
+import { View } from '@instructure/ui-view/v11_6'
 import { passthroughProps } from '@instructure/ui-react-utils'
 
-import { withStyle } from '@instructure/emotion'
+import { withStyleLegacy as withStyle } from '@instructure/emotion'
 
 import generateStyle from './styles'
 import generateComponentTheme from './theme'

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

@@ -24,12 +24,12 @@
 
 import { Children, Component, ReactElement } from 'react'
 
-import { View } from '@instructure/ui-view'
+import { View } from '@instructure/ui-view/v11_6'
 import { passthroughProps, safeCloneElement } from '@instructure/ui-react-utils'
 
 import { ListItem } from './ListItem'
 
-import { withStyle } from '@instructure/emotion'
+import { withStyleLegacy as withStyle } from '@instructure/emotion'
 
 import generateStyle from './styles'
 import generateComponentTheme from './theme'

package/src/List/v2/ListItem/index.tsx

@@ -0,0 +1,104 @@
+/*
+ * 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 { Component } from 'react'
+
+import { View } from '@instructure/ui-view/latest'
+import { passthroughProps } from '@instructure/ui-react-utils'
+import { withStyle } from '@instructure/emotion'
+
+import generateStyle from './styles'
+import { allowedProps } from './props'
+import type { ListItemProps } from './props'
+
+/**
+---
+parent: List
+id: List.Item
+---
+**/
+@withStyle(generateStyle)
+class ListItem extends Component<ListItemProps> {
+  static readonly componentId = 'List.Item'
+
+  static allowedProps = allowedProps
+  static defaultProps = {
+    padding: 'none',
+    spacing: 'none',
+    delimiter: 'none',
+    size: 'medium'
+  }
+
+  ref: Element | null = null
+
+  handleRef = (el: Element | null) => {
+    const { elementRef } = this.props
+
+    this.ref = el
+
+    if (typeof elementRef === 'function') {
+      elementRef(el)
+    }
+  }
+
+  componentDidMount() {
+    this.props.makeStyles?.()
+  }
+
+  componentDidUpdate() {
+    this.props.makeStyles?.()
+  }
+
+  render() {
+    const {
+      delimiter,
+      spacing,
+      size,
+      margin,
+      padding,
+      elementRef,
+      children,
+      styles,
+      ...rest
+    } = this.props
+
+    return (
+      <View
+        {...passthroughProps(rest)}
+        css={styles?.listItem}
+        as="li"
+        margin={margin}
+        padding={padding}
+        maxWidth="100%"
+        elementRef={this.handleRef}
+        data-cid="ListItem"
+      >
+        {children}
+      </View>
+    )
+  }
+}
+
+export default ListItem
+export { ListItem }

package/src/List/v2/ListItem/props.ts

@@ -0,0 +1,94 @@
+/*
+ * 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 { PropsWithChildren } from 'react'
+
+import type {
+  Spacing,
+  WithStyleProps,
+  ComponentStyle
+} from '@instructure/emotion'
+import type {
+  ListItemTheme,
+  OtherHTMLAttributes
+} from '@instructure/shared-types'
+
+type ListItemOwnProps = {
+  /**
+   * Inherits delimiter from the parent List component.
+   */
+  delimiter?: 'none' | 'dashed' | 'solid'
+  size?: 'small' | 'medium' | 'large'
+  /**
+   * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
+   * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
+   * familiar CSS-like shorthand. For example: `margin="small auto large"`.
+   */
+  margin?: Spacing
+  /**
+   * Valid values are `0`, `none`, `xxx-small`, `xx-small`, `x-small`,
+   * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
+   * familiar CSS-like shorthand. For example: `padding="small x-large large"`.
+   */
+  padding?: Spacing
+  /**
+   * Inherits itemSpacing from the parent List component
+   */
+  spacing?:
+    | 'none'
+    | 'xxx-small'
+    | 'xx-small'
+    | 'x-small'
+    | 'small'
+    | 'medium'
+    | 'large'
+    | 'x-large'
+    | 'xx-large'
+  /**
+   * provides a reference to the underlying html root element
+   */
+  elementRef?: (element: Element | null) => void
+} & PropsWithChildren<unknown> // <unknown> is needed for React 17 compatibility
+
+type PropKeys = keyof ListItemOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type ListItemProps = ListItemOwnProps &
+  WithStyleProps<ListItemTheme, ListItemStyle> &
+  OtherHTMLAttributes<ListItemOwnProps>
+
+type ListItemStyle = ComponentStyle<'listItem'>
+const allowedProps: AllowedPropKeys = [
+  'children',
+  'delimiter',
+  'size',
+  'margin',
+  'padding',
+  'spacing',
+  'elementRef'
+]
+
+export type { ListItemProps, ListItemStyle }
+export { allowedProps }

package/src/List/v2/ListItem/styles.ts

@@ -0,0 +1,136 @@
+/*
+ * 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 { logError as error } from '@instructure/console'
+import type { NewComponentTypes } from '@instructure/ui-themes'
+import type { ListItemProps, ListItemStyle } 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: NewComponentTypes['ListItem'],
+  props: ListItemProps
+): ListItemStyle => {
+  const { size, delimiter, spacing } = props
+
+  const withDelimiter = delimiter !== 'none'
+  const withSpacing = spacing !== 'none'
+
+  error(
+    !(withDelimiter && withSpacing),
+    `[List] \`itemSpacing\` has no effect inside Lists with the \`delimiter\` prop set to anything other than \`none\`.`
+  )
+
+  const sizeVariants = {
+    small: { fontSize: componentTheme.fontSizeSmall },
+    medium: { fontSize: componentTheme.fontSizeMedium },
+    large: { fontSize: componentTheme.fontSizeLarge }
+  }
+
+  const spacingVariants = {
+    'xxx-small': {
+      marginTop: componentTheme.spacingXXXSmall,
+      marginBottom: componentTheme.spacingXXXSmall
+    },
+    'xx-small': {
+      marginTop: componentTheme.spacingXXSmall,
+      marginBottom: componentTheme.spacingXXSmall
+    },
+    'x-small': {
+      marginTop: componentTheme.spacingXSmall,
+      marginBottom: componentTheme.spacingXSmall
+    },
+    small: {
+      marginTop: componentTheme.spacingSmall,
+      marginBottom: componentTheme.spacingSmall
+    },
+    medium: {
+      marginTop: componentTheme.spacingMedium,
+      marginBottom: componentTheme.spacingMedium
+    },
+    large: {
+      marginTop: componentTheme.spacingLarge,
+      marginBottom: componentTheme.spacingLarge
+    },
+    'x-large': {
+      marginTop: componentTheme.spacingXLarge,
+      marginBottom: componentTheme.spacingXLarge
+    },
+    'xx-large': {
+      marginTop: componentTheme.spacingXXLarge,
+      marginBottom: componentTheme.spacingXXLarge
+    },
+    none: {}
+  }
+
+  const delimiterVariants = {
+    dashed: {
+      listStylePosition: 'inside',
+      '&:not(:first-of-type)': {
+        borderTop: `
+            ${componentTheme.delimiterDashedBorder.width}
+            ${componentTheme.delimiterDashedBorder.style}
+            ${componentTheme.delimiterDashedBorder.color}
+          `
+      }
+    },
+    solid: {
+      listStylePosition: 'inside',
+      '&:not(:first-of-type)': {
+        borderTop: `
+            ${componentTheme.delimiterSolidBorder.width}
+            ${componentTheme.delimiterSolidBorder.style}
+            ${componentTheme.delimiterSolidBorder.color}
+          `
+      }
+    },
+    none: {}
+  }
+
+  return {
+    listItem: {
+      label: 'listItem',
+      fontWeight: componentTheme.fontWeight,
+      fontFamily: componentTheme.fontFamily,
+      lineHeight: componentTheme.lineHeight,
+      color: componentTheme.color,
+      padding: 0,
+      ...sizeVariants[size!],
+      ...(withSpacing && !withDelimiter && spacingVariants[spacing!]),
+      ...(withDelimiter && delimiterVariants[delimiter!]),
+
+      '&:first-of-type': { marginTop: '0' },
+      '&:last-of-type': { marginBottom: '0' }
+    }
+  }
+}
+
+export default generateStyle

package/src/List/v2/README.md

@@ -0,0 +1,142 @@
+---
+describes: List
+---
+
+> ### What about 'inline' lists?
+>
+> For inline lists use the [InlineList](InlineList) component.
+
+`<List>` accepts only `<List.Item>` as a child.
+
+```js
+---
+type: example
+---
+<div>
+  <List margin="0 0 medium">
+    <List.Item>List item 1</List.Item>
+    <List.Item>List item 2</List.Item>
+    <List.Item>List item 3</List.Item>
+  </List>
+  <List as="ol" margin="0 0 medium">
+    <List.Item>List item 1</List.Item>
+    <List.Item>List item 2</List.Item>
+    <List.Item>List item 3</List.Item>
+  </List>
+  <List isUnstyled>
+    <List.Item><Link href="https://www.canvaslms.com/try-canvas">Canvas by Instructure</Link></List.Item>
+    <List.Item><Link href="https://www.getbridge.com">Bridge by Instructure</Link></List.Item>
+    <List.Item><Link href="https://www.arcmedia.com">Arc by Instructure</Link></List.Item>
+  </List>
+</div>
+```
+
+### Adding a delimiter
+
+The `delimiter` lets you set a separator between items of the list. The predefined options are ['none', 'solid', and 'dashed'].
+
+```js
+---
+type: example
+---
+<div>
+  <List delimiter="none" margin="large 0">
+    <List.Item>{lorem.sentence()}</List.Item>
+    <List.Item>{lorem.sentence()}</List.Item>
+    <List.Item>{lorem.sentence()}</List.Item>
+  </List>
+  <List delimiter="solid" isUnstyled margin="large 0">
+    <List.Item>{lorem.sentence()}</List.Item>
+    <List.Item>{lorem.sentence()}</List.Item>
+    <List.Item>{lorem.sentence()}</List.Item>
+  </List>
+  <List delimiter="dashed" as="ol" margin="large 0">
+    <List.Item>{lorem.sentence()}</List.Item>
+    <List.Item>{lorem.sentence()}</List.Item>
+    <List.Item>{lorem.sentence()}</List.Item>
+  </List>
+</div>
+```
+
+### Sizing
+
+The `size` prop lets you adjust the font-size of the List. The predefined values are aligned with other components that use a 'size' prop for overall consistency within your application. The default is 'medium'.
+
+```javascript
+---
+type: example
+---
+<div>
+  <List size="small" margin="large 0">
+    <List.Item>{lorem.sentence()}</List.Item>
+    <List.Item>Small Size</List.Item>
+    <List.Item><b>Due:</b> Oct 1, 2019</List.Item>
+  </List>
+  <List margin="large 0">
+    <List.Item>{lorem.sentence()}</List.Item>
+    <List.Item>Medium (default) Size</List.Item>
+    <List.Item><b>Due:</b> Oct 1, 2019</List.Item>
+  </List>
+  <List size="large" margin="large 0">
+    <List.Item>{lorem.sentence()}</List.Item>
+    <List.Item>Large Size</List.Item>
+    <List.Item><b>Due:</b> Oct 1, 2019</List.Item>
+  </List>
+</div>
+```
+
+### Adding predefined space between each List.Item
+
+Use the `itemSpacing` prop to add space around your list’s items. To avoid unwanted excess space at the start/end of a List, the first and last List.Item will not receive margin via the `itemSpacing` prop.
+
+> NOTE: itemSpacing has no affect on an List.Item that has the `delimiter` prop set to anything other than **none**.
+
+```js
+---
+type: example
+---
+  <List isUnstyled itemSpacing="small">
+    <List.Item>{lorem.sentence()}</List.Item>
+    <List.Item><b>Due:</b> Oct 1, 2019</List.Item>
+    <List.Item><Link href="#">itemSpacing has been set to xx-small</Link></List.Item>
+  </List>
+```
+
+**itemSpacing** set to `medium`
+
+```js
+---
+type: example
+---
+  <List itemSpacing="medium">
+    <List.Item>{lorem.sentence()}</List.Item>
+    <List.Item><b>Due:</b>  Oct 1, 2019</List.Item>
+    <List.Item><Link href="#">itemSpacing has been set to medium</Link></List.Item>
+  </List>
+```
+
+**itemSpacing** set to `x-large`
+
+```js
+---
+type: example
+---
+    <List isUnstyled itemSpacing="x-large">
+    <List.Item>{lorem.sentence()}</List.Item>
+    <List.Item><b>Due:</b> Oct 1, 2019</List.Item>
+    <List.Item><Link href="#">itemSpacing has been set to x-large</Link></List.Item>
+  </List>
+```
+
+List.Items also accept the same `margin` prop as List, in the event you need different spacing around certain List.Items in the List.
+
+```js
+---
+type: example
+---
+<List isUnstyled itemSpacing="small">
+  <List.Item margin="x-large 0"><Link href="https://www.canvaslms.com/try-canvas">Canvas by Instructure</Link></List.Item>
+  <List.Item><Link href="https://www.getbridge.com">Bridge by Instructure</Link></List.Item>
+  <List.Item><Link href="https://www.arcmedia.com">Arc by Instructure</Link></List.Item>
+</List>
+```