@ohos-ports/instructure-ui-toggle-details 11.7.5-beta.1

package/src/ToggleDetails/v1/styles.ts

@@ -0,0 +1,190 @@
+/*
+ * 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 { keyframes } from '@instructure/emotion'
+
+import type { ToggleDetailsTheme } from '@instructure/shared-types'
+import type {
+  ToggleDetailsProps,
+  ToggleDetailsStyleProps,
+  ToggleDetailsStyle
+} from './props'
+
+const contentAnimation = keyframes`
+  to {
+    opacity: 1;
+  }`
+
+/**
+ * ---
+ * 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
+ * @param  {Object} state the state of the component, the style is applied to
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = (
+  componentTheme: ToggleDetailsTheme,
+  props: ToggleDetailsProps,
+  _state: ToggleDetailsStyleProps
+): ToggleDetailsStyle => {
+  const { fluidWidth, iconPosition, size, variant } = props
+
+  const positionIconAtEnd =
+    iconPosition === 'end' && (variant === 'filled' || fluidWidth)
+  const fluidWidthStyles = fluidWidth ? { display: 'block', width: '100%' } : {}
+
+  const iconPositionStyles = {
+    start: {
+      marginInlineEnd: componentTheme.iconMargin,
+      marginInlineStart: 0
+    },
+    end: {
+      marginInlineStart: componentTheme.iconMargin,
+      marginInlineEnd: 0
+    }
+  }
+
+  const fontSizeStyles = {
+    small: { fontSize: componentTheme.fontSizeSmall },
+    medium: { fontSize: componentTheme.fontSizeMedium },
+    large: { fontSize: componentTheme.fontSizeLarge }
+  }
+
+  const iconSizeStyles = {
+    small: { fontSize: componentTheme.smallIconSize },
+    medium: { fontSize: componentTheme.mediumIconSize },
+    large: { fontSize: componentTheme.largeIconSize }
+  }
+
+  const indentDetailsStyles =
+    iconPosition === 'start' && !fluidWidth
+      ? {
+          small: {
+            paddingInlineStart: `calc(${componentTheme.smallIconSize} + ${componentTheme.togglePadding})`,
+            paddingInlineEnd: '0'
+          },
+          medium: {
+            paddingInlineStart: `calc(${componentTheme.mediumIconSize} + ${componentTheme.togglePadding})`,
+            paddingInlineEnd: '0'
+          },
+          large: {
+            paddingInlineStart: `calc(${componentTheme.largeIconSize} + ${componentTheme.togglePadding})`,
+            paddingInlineEnd: '0'
+          }
+        }
+      : {
+          small: {},
+          medium: {},
+          large: {}
+        }
+
+  return {
+    toggleDetails: {
+      label: 'toggleDetails',
+      fontFamily: componentTheme.fontFamily,
+      fontWeight: componentTheme.fontWeight,
+      lineHeight: componentTheme.lineHeight
+    },
+    summary: {
+      label: 'toggleDetails__summary',
+      position: 'relative',
+      display: 'flex',
+      alignItems: 'center',
+      boxSizing: 'border-box',
+      textAlign: 'start'
+    },
+    summaryText: {
+      label: 'toggleDetails__summaryText',
+      minWidth: '0.0625rem',
+      flexGrow: 1,
+      ...(positionIconAtEnd ? { flex: 1 } : {})
+    },
+    toggle: {
+      label: 'toggleDetails__toggle',
+      fontFamily: componentTheme.fontFamily,
+      appearance: 'none',
+      cursor: 'pointer',
+      userSelect: 'none',
+      touchAction: 'manipulation',
+      position: 'relative',
+      overflow: 'visible',
+      boxSizing: 'border-box',
+      padding: '0',
+      margin: '0',
+      outline: 'none',
+      border: 'none',
+      background: 'transparent',
+      color: componentTheme.textColor,
+      '&::-moz-focus-inner': { padding: '0', margin: '0' },
+      '&::before': {
+        content: '""',
+        position: 'absolute',
+        top: '-0.375rem',
+        left: '-0.375rem',
+        right: '-0.375rem',
+        bottom: '-0.375rem',
+        border: `${componentTheme.toggleBorderWidth} ${componentTheme.toggleBorderStyle} ${componentTheme.toggleFocusBorderColor}`,
+        borderRadius: `calc(${componentTheme.toggleBorderRadius} * 1.5)`,
+        opacity: 0,
+        pointerEvents: 'none'
+      },
+      '&:focus': { '&::before': { opacity: 1 } },
+      '&:focus, &:hover,  &:active': {
+        textDecoration: 'none',
+        color: componentTheme.textColor
+      },
+      textDecoration: 'none',
+      ...fluidWidthStyles,
+      ...fontSizeStyles[size!]
+    },
+    icon: {
+      label: 'toggleDetails__icon',
+      '& > svg': {
+        display: 'block' /* fix vertical alignment of icon */
+      },
+      ...iconPositionStyles[iconPosition!],
+      ...iconSizeStyles[size!]
+    },
+    details: {
+      label: 'toggleDetails__details',
+      boxSizing: 'border-box',
+      paddingTop: componentTheme.togglePadding,
+      color: componentTheme.textColor,
+      ...fontSizeStyles[size!],
+      ...indentDetailsStyles[size!]
+    },
+    content: {
+      label: 'toggleDetails__content',
+      opacity: 0.01,
+      animationName: contentAnimation,
+      animationFillMode: 'forwards',
+      animationDuration: '.3s'
+    }
+  }
+}
+
+export default generateStyle

package/src/ToggleDetails/v1/theme.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 type { Theme, ThemeSpecificStyle } from '@instructure/ui-themes'
+import { ToggleDetailsTheme } 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): ToggleDetailsTheme => {
+  const { colors, spacing, borders, typography, key: themeName } = theme
+
+  const themeSpecificStyle: ThemeSpecificStyle<ToggleDetailsTheme> = {
+    canvas: {
+      toggleFocusBorderColor: theme['ic-brand-primary'],
+      iconColor: theme['ic-brand-font-color-dark'],
+      textColor: theme['ic-brand-font-color-dark']
+    }
+  }
+
+  const componentVariables: ToggleDetailsTheme = {
+    fontFamily: typography?.fontFamily,
+    fontWeight: typography?.fontWeightNormal,
+    lineHeight: typography?.lineHeight,
+    textColor: colors?.contrasts?.grey125125,
+
+    fontSizeSmall: typography?.fontSizeSmall,
+    fontSizeMedium: typography?.fontSizeMedium,
+    fontSizeLarge: typography?.fontSizeLarge,
+
+    smallIconSize: '0.5rem',
+    mediumIconSize: '0.75rem',
+    largeIconSize: '1rem',
+    iconMargin: spacing?.xxSmall,
+    iconColor: colors?.contrasts?.grey125125,
+
+    togglePadding: spacing?.xxSmall,
+    toggleBorderRadius: borders?.radiusMedium,
+    toggleBorderWidth: borders?.widthMedium,
+    toggleBorderStyle: borders?.style,
+    toggleFocusBorderColor: colors?.contrasts?.blue4570,
+
+    filledBackgroundColor: colors?.contrasts?.grey1111,
+    filledBorderWidth: borders?.widthSmall,
+    filledBorderStyle: borders?.style,
+    filledBorderColor: colors?.contrasts?.grey1424,
+    filledBorderRadius: borders?.radiusMedium,
+    filledPadding: spacing?.small
+  }
+
+  return {
+    ...componentVariables,
+    ...themeSpecificStyle[themeName]
+  }
+}
+
+export default generateComponentTheme

package/src/ToggleDetails/v2/README.md

@@ -0,0 +1,233 @@
+---
+describes: ToggleDetails
+---
+
+The ToggleDetails component can be used to show/hide content in response to user action.
+
+By default, ToggleDetails content is hidden. To override, pass in the `defaultExpanded` prop.
+
+```js
+---
+type: example
+---
+<ToggleDetails
+  summary="Click to hide me!"
+  defaultExpanded
+>
+  <Text weight="bold">I am expanded!</Text> {lorem.paragraph()}
+</ToggleDetails>
+```
+
+ToggleDetails can be controlled:
+
+```js
+---
+type: example
+---
+const Example = () => {
+  const [expanded, setExpanded] = useState(true)
+
+  const handleChange = (event, expanded) => {
+    setExpanded(expanded)
+  }
+
+  const handleToggle = () => {
+    setExpanded((prevExpanded) => !prevExpanded)
+  }
+
+  return (
+    <div>
+      <Button onClick={handleToggle}>
+        <div aria-live="polite">
+          This Button {expanded ? 'Collapses' : 'Expands'}
+        </div>
+      </Button>
+      <br />
+      <br />
+      <ToggleDetails
+        summary="Click to hide me!"
+        expanded={expanded}
+        onToggle={handleChange}
+      >
+        <Text weight="bold">I am controlled and expanded!</Text>
+        {lorem.paragraph()}
+      </ToggleDetails>
+    </div>
+  )
+}
+
+render(<Example />)
+```
+
+Setting ToggleDetails to `filled` will make the toggle use a full-width [Button](Button) component.
+
+```js
+---
+type: example
+---
+<ToggleDetails
+  variant="filled"
+  summary="Click to expand me!"
+>
+  {lorem.paragraph()}
+</ToggleDetails>
+```
+
+### Icon size / summary text formatting
+
+Icon size can be adjusted using the `size` prop with small, medium, and large options.
+
+The `summary` prop accepts any node, allowing you to format the summary text as
+you see fit. In these examples, we are formatting it with the
+[Text](Text) component.
+
+```js
+---
+type: example
+---
+<div>
+  <ToggleDetails
+    size="small"
+    summary="Small icon"
+  >
+    {lorem.paragraph()}
+  </ToggleDetails>
+
+  <br />
+
+  <ToggleDetails summary="Medium icon">
+    {lorem.paragraph()}
+  </ToggleDetails>
+
+  <br />
+
+  <ToggleDetails
+    size="large"
+    summary="Large icon"
+  >
+    {lorem.paragraph()}
+  </ToggleDetails>
+</div>
+```
+
+### Icon positioning and block display
+
+The `iconPosition` prop determines if the icon comes before or after the summary.
+
+When the `fluidWidth` prop is set, the toggle fills the width of its
+container.
+
+```js
+---
+type: example
+---
+<ToggleDetails
+  summary="Block display"
+  iconPosition="end"
+  defaultExpanded
+  fluidWidth
+>
+  <Text>
+    {lorem.paragraph()}
+  </Text>
+</ToggleDetails>
+```
+
+### Example to demonstrate more properties
+
+```js
+---
+type: example
+---
+const Example = () => {
+  const [state, setState] = useState({
+    expanded: true,
+    fluidWidth: true,
+    iconPosition: 'start',
+    size: 'small',
+    variant: 'default'
+  });
+
+  const handleChange = (field, value) => setState(prevState => ({ ...prevState, [field]: value }));
+  const handleToggle = () => setState(prevState => ({ ...prevState, expanded: !prevState.expanded }));
+
+  const renderOptions = () => {
+    const { fluidWidth, iconPosition, size, variant } = state;
+    const options = [
+      { name: 'iconPosition', values: ['start', 'end'] },
+      { name: 'size', values: ['small', 'medium', 'large'] },
+      { name: 'variant', values: ['default', 'filled'] },
+    ];
+
+    return (
+      <Flex alignItems="start">
+        {options.map(({ name, values }) => (
+          <Flex.Item margin="general.spaceMd" key={name}>
+            <RadioInputGroup
+              name={name}
+              description={name}
+              value={state[name]}
+              onChange={(e, value) => handleChange(name, value)}
+            >
+              {values.map(val => (
+                <RadioInput label={val} value={val} key={val} />
+              ))}
+            </RadioInputGroup>
+          </Flex.Item>
+        ))}
+        <Flex.Item margin="general.spaceMd">
+          <Checkbox
+            label="fluidWidth"
+            checked={fluidWidth}
+            onChange={() => handleChange('fluidWidth', !fluidWidth)}
+          />
+        </Flex.Item>
+      </Flex>
+    );
+  };
+
+  const { expanded, iconPosition, size, variant, fluidWidth } = state;
+
+  return (
+    <div>
+      {renderOptions()}
+      <Button onClick={handleToggle}>
+        This Button {expanded ? 'Collapses' : 'Expands'}
+      </Button>
+      <br />
+      <br />
+      <ToggleDetails
+        summary="Click to hide me!"
+        expanded={expanded}
+        onToggle={(_, expanded) => handleChange('expanded', expanded)}
+        fluidWidth={fluidWidth}
+        iconPosition={iconPosition}
+        size={size}
+        variant={variant}
+      >
+        <span>
+          I am controlled and expanded!I am controlled and expanded!I am controlled and expanded!I am controlled and expanded!I am controlled and expanded!I am controlled and expanded!I am controlled and expanded!I am controlled and expanded!I am controlled and expanded!I am controlled and expanded!I am controlled and expanded!I am controlled and expanded!I am controlled and expanded!I am controlled and expanded!I am controlled and expanded!I am controlled and expanded!I am controlled and expanded!I am controlled and expanded!I am controlled and expanded!I am controlled and expanded!I am controlled and expanded!I am controlled and expanded!I am controlled and expanded!I am controlled and expanded!I am controlled and expanded!
+        </span>
+      </ToggleDetails>
+    </div>
+  );
+};
+
+render(<Example />)
+```
+
+### Guidelines
+
+```js
+---
+type: embed
+---
+<Guidelines>
+  <Figure recommendation="yes" title="Do">
+    <Figure.Item>Use ToggleDetails when descriptive text is longer than a short phrase</Figure.Item>
+  </Figure>
+  <Figure recommendation="no" title="Don't">
+    <Figure.Item>Nest ToggleDetails within another ToggleDetails</Figure.Item>
+  </Figure>
+</Guidelines>
+```

package/src/ToggleDetails/v2/index.tsx

@@ -0,0 +1,206 @@
+/*
+ * 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, createRef } from 'react'
+import { Button } from '@instructure/ui-buttons/latest'
+import {
+  ChevronRightInstUIIcon,
+  ChevronDownInstUIIcon
+} from '@instructure/ui-icons'
+import { Expandable } from '@instructure/ui-expandable/latest'
+import { omitProps, pickProps } from '@instructure/ui-react-utils'
+import { isActiveElement } from '@instructure/ui-dom-utils'
+
+import { withStyleNew } from '@instructure/emotion'
+import generateStyle from './styles.js'
+import type { ToggleDetailsProps } from './props'
+import { allowedProps } from './props.js'
+import type { ExpandableToggleProps } from '@instructure/ui-expandable/latest'
+import type { ViewProps } from '@instructure/ui-view/latest'
+
+/**
+---
+category: components
+---
+**/
+@withStyleNew(generateStyle)
+class ToggleDetails extends Component<ToggleDetailsProps> {
+  static displayName = 'ToggleDetails'
+  static readonly componentId = 'ToggleDetails'
+  static allowedProps = allowedProps
+
+  static defaultProps = {
+    variant: 'default',
+    size: 'medium',
+    fluidWidth: false,
+    icon: ChevronRightInstUIIcon,
+    iconExpanded: ChevronDownInstUIIcon,
+    iconPosition: 'start',
+    defaultExpanded: false,
+    children: null
+  }
+
+  _buttonNode: HTMLElement | null = null
+  ref = createRef<HTMLDivElement>()
+
+  // TODO this solution was generated with Gemini, should be tested if it works as fine as before
+  setButtonRef = (node: Element | null) => {
+    this._buttonNode = node as HTMLElement | null
+  }
+
+  get focused() {
+    return isActiveElement(this._buttonNode)
+  }
+
+  focus() {
+    this._buttonNode?.focus()
+  }
+
+  componentDidMount() {
+    this.props.makeStyles?.()
+  }
+
+  componentDidUpdate() {
+    this.props.makeStyles?.()
+  }
+
+  renderSummary(expanded: boolean) {
+    const { summary, iconPosition } = this.props
+
+    return (
+      <span css={this.props.styles?.summary}>
+        {iconPosition === 'start' && this.renderIcon(expanded)}
+        <span css={this.props.styles?.summaryText}>{summary}</span>
+        {iconPosition === 'end' && this.renderIcon(expanded)}
+      </span>
+    )
+  }
+
+  renderToggle(
+    toggleProps: ReturnType<ExpandableToggleProps>,
+    expanded: boolean
+  ) {
+    const { variant } = this.props
+    const tProps = this.props.children
+      ? toggleProps
+      : { onClick: toggleProps.onClick }
+    const props = {
+      ...omitProps(this.props, ToggleDetails.allowedProps),
+      ...tProps,
+      children: this.renderSummary(expanded)
+    } as Record<string, unknown>
+    const summary = this.renderSummary(expanded)
+
+    if (variant === 'filled') {
+      return (
+        <Button
+          {...props}
+          display="block"
+          textAlign="start"
+          elementRef={this.setButtonRef}
+        >
+          {summary}
+        </Button>
+      )
+    } else if (props.href) {
+      return (
+        <a {...props} css={this.props.styles?.toggle} ref={this.setButtonRef}>
+          {summary}
+        </a>
+      )
+    } else {
+      return (
+        <button
+          {...props}
+          type="button"
+          css={this.props.styles?.toggle}
+          ref={this.setButtonRef}
+        >
+          {summary}
+        </button>
+      )
+    }
+  }
+
+  renderIcon(expanded: boolean) {
+    const Icon = expanded ? this.props.iconExpanded : this.props.icon
+    const iconSize = this.props.size === 'large' ? 'lg' : 'md'
+    const iconColor =
+      this.props.variant === 'filled' ? 'actionSecondaryBaseColor' : 'baseColor'
+
+    return this.props.children && Icon ? (
+      <span css={this.props.styles?.icon}>
+        <Icon size={iconSize} color={iconColor} />
+      </span>
+    ) : null
+  }
+
+  renderDetails(expanded: boolean, detailsProps: { id: string }) {
+    if (!this.props.children) return null
+    const expandedStyles = expanded ? { display: 'block' } : { display: 'none' }
+    return (
+      <div {...detailsProps} css={[this.props.styles?.details, expandedStyles]}>
+        {expanded && this.renderContent()}
+      </div>
+    )
+  }
+
+  renderContent() {
+    return <div css={this.props.styles?.content}>{this.props.children}</div>
+  }
+
+  handleToggle = (
+    event: React.KeyboardEvent<ViewProps> | React.MouseEvent<ViewProps>,
+    expanded: boolean
+  ) => {
+    if (typeof this.props.onToggle === 'function') {
+      this.props.onToggle(event, expanded)
+    }
+  }
+
+  render() {
+    return (
+      <Expandable
+        {...pickProps(this.props, Expandable.allowedProps)}
+        onToggle={this.handleToggle}
+      >
+        {({ expanded, getToggleProps, getDetailsProps }) => {
+          return (
+            <div
+              css={this.props.styles?.toggleDetails}
+              ref={this.ref}
+              data-cid="ToggleDetails"
+            >
+              {this.renderToggle(getToggleProps(), expanded)}
+              {this.renderDetails(expanded, getDetailsProps())}
+            </div>
+          )
+        }}
+      </Expandable>
+    )
+  }
+}
+
+export default ToggleDetails
+export { ToggleDetails }