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

package/lib/ToggleGroup/v2/index.js

@@ -0,0 +1,179 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ToggleGroup = void 0;
+var _react = require("react");
+var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
+var _pickProps = require("@instructure/ui-react-utils/lib/pickProps.js");
+var _getElementType = require("@instructure/ui-react-utils/lib/getElementType.js");
+var _latest = require("@instructure/ui-buttons/latest");
+var _Transition = require("@instructure/ui-motion/lib/Transition");
+var _Expandable = require("@instructure/ui-expandable/lib/Expandable");
+var _isActiveElement = require("@instructure/ui-dom-utils/lib/isActiveElement.js");
+var _latest2 = require("@instructure/ui-flex/latest");
+var _latest3 = require("@instructure/ui-view/latest");
+var _uiIcons = require("@instructure/ui-icons");
+var _props = require("./props");
+var _emotion = require("@instructure/emotion");
+var _styles = _interopRequireDefault(require("./styles"));
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _dec, _class, _ToggleGroup;
+/*
+ * 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.
+ */
+const toggleGroupSizeToIconSize = {
+  small: 'md',
+  medium: 'md',
+  large: 'lg'
+};
+
+/**
+---
+category: components
+---
+**/
+let ToggleGroup = exports.ToggleGroup = (_dec = (0, _emotion.withStyle)(_styles.default), _dec(_class = (_ToggleGroup = class ToggleGroup extends _react.Component {
+  constructor(...args) {
+    super(...args);
+    this.ref = null;
+    this._button = null;
+    this._shouldTransition = false;
+    this.handleRef = el => {
+      const elementRef = this.props.elementRef;
+      this.ref = el;
+      if (typeof elementRef === 'function') {
+        elementRef(el);
+      }
+    };
+    this.handleButtonRef = el => {
+      this._button = el;
+    };
+  }
+  get focused() {
+    return (0, _isActiveElement.isActiveElement)(this._button);
+  }
+  focus() {
+    var _this$_button;
+    (_this$_button = this._button) === null || _this$_button === void 0 ? void 0 : _this$_button.focus();
+  }
+  componentDidMount() {
+    this._shouldTransition = true;
+  }
+  componentDidUpdate() {
+    var _this$props$makeStyle, _this$props;
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, this.state);
+  }
+  renderIcon(expanded) {
+    const Icon = expanded ? this.props.iconExpanded : this.props.icon;
+    if (!Icon) return null;
+    const iconSize = toggleGroupSizeToIconSize[this.props.size];
+    return (0, _uiIcons.renderIconWithProps)(Icon, iconSize, 'baseColor');
+  }
+  renderToggle(toggleProps, expanded) {
+    const _this$props2 = this.props,
+      toggleLabel = _this$props2.toggleLabel,
+      size = _this$props2.size;
+    let label;
+    if (typeof toggleLabel === 'function') {
+      label = toggleLabel(expanded);
+    } else {
+      label = toggleLabel;
+    }
+    const props = {
+      ...toggleProps
+    };
+    return (0, _jsxRuntime.jsx)(_latest.IconButton, {
+      ...props,
+      withBackground: false,
+      withBorder: false,
+      size: size === 'large' ? 'medium' : 'small',
+      elementRef: this.handleButtonRef,
+      screenReaderLabel: label,
+      children: this.renderIcon(expanded)
+    });
+  }
+  renderDetails(detailsProps) {
+    const styles = this.props.styles;
+    return (0, _jsxRuntime.jsx)(_latest3.View, {
+      ...detailsProps,
+      display: "block",
+      borderWidth: "small none none none",
+      borderColor: styles === null || styles === void 0 ? void 0 : styles.borderColor,
+      children: this.props.transition && this._shouldTransition ? (0, _jsxRuntime.jsx)(_Transition.Transition, {
+        transitionOnMount: true,
+        in: true,
+        type: "fade",
+        children: this.props.children
+      }) : this.props.children
+    });
+  }
+  render() {
+    const Element = (0, _getElementType.getElementType)(ToggleGroup, this.props);
+    const styles = this.props.styles;
+    return (0, _jsxRuntime.jsx)(_Expandable.Expandable, {
+      ...(0, _pickProps.pickProps)(this.props, _Expandable.Expandable.allowedProps),
+      children: ({
+        expanded,
+        getToggleProps,
+        getDetailsProps
+      }) => {
+        return (0, _jsxRuntime.jsxs)(_latest3.View, {
+          ...(0, _omitProps.omitProps)(this.props, ToggleGroup.allowedProps),
+          borderWidth: this.props.border ? 'small' : 'none',
+          as: Element,
+          elementRef: this.handleRef,
+          display: "block",
+          borderRadius: "medium",
+          background: "primary",
+          borderColor: styles === null || styles === void 0 ? void 0 : styles.borderColor,
+          "data-cid": "ToggleGroup",
+          children: [(0, _jsxRuntime.jsxs)(_latest2.Flex, {
+            padding: this.props.size === 'small' ? 'x-small' : 'small small small x-small',
+            children: [(0, _jsxRuntime.jsx)(_latest2.Flex.Item, {
+              children: this.renderToggle(getToggleProps(), expanded)
+            }), (0, _jsxRuntime.jsx)(_latest2.Flex.Item, {
+              shouldGrow: true,
+              shouldShrink: true,
+              padding: "0 0 0 x-small",
+              children: this.props.summary
+            })]
+          }), expanded ? this.renderDetails(getDetailsProps()) : (0, _jsxRuntime.jsx)("span", {
+            ...getDetailsProps()
+          })]
+        });
+      }
+    });
+  }
+}, _ToggleGroup.displayName = "ToggleGroup", _ToggleGroup.componentId = 'ToggleGroup', _ToggleGroup.allowedProps = _props.allowedProps, _ToggleGroup.defaultProps = {
+  size: 'medium',
+  icon: _uiIcons.ChevronRightInstUIIcon,
+  iconExpanded: _uiIcons.ChevronDownInstUIIcon,
+  defaultExpanded: false,
+  transition: true,
+  as: 'span',
+  border: true
+}, _ToggleGroup)) || _class);
+var _default = exports.default = ToggleGroup;

package/lib/ToggleGroup/v2/props.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.allowedProps = void 0;
+/*
+ * 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.
+ */
+
+const allowedProps = exports.allowedProps = ['children', 'summary', 'toggleLabel', 'as', 'elementRef', 'size', 'expanded', 'defaultExpanded', 'onToggle', 'icon', 'iconExpanded', 'transition', 'border'];

package/lib/ToggleGroup/v2/styles.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+/*
+ * 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.
+ */
+
+/**
+ * ---
+ * 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, _props) => {
+  return {
+    borderColor: componentTheme.borderColor
+  };
+};
+var _default = exports.default = generateStyle;

package/lib/{index.js → exports/a.js}

@@ -6,14 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "ToggleDetails", {
   enumerable: true,
   get: function () {
-    return _ToggleDetails.ToggleDetails;
+    return _v.ToggleDetails;
   }
 });
 Object.defineProperty(exports, "ToggleGroup", {
   enumerable: true,
   get: function () {
-    return _ToggleGroup.ToggleGroup;
+    return _v2.ToggleGroup;
   }
 });
-var _ToggleDetails = require("./ToggleDetails");
-var _ToggleGroup = require("./ToggleGroup");
+var _v = require("../ToggleDetails/v1");
+var _v2 = require("../ToggleGroup/v1");

package/lib/exports/b.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ToggleDetails", {
+  enumerable: true,
+  get: function () {
+    return _v.ToggleDetails;
+  }
+});
+Object.defineProperty(exports, "ToggleGroup", {
+  enumerable: true,
+  get: function () {
+    return _v2.ToggleGroup;
+  }
+});
+var _v = require("../ToggleDetails/v2");
+var _v2 = require("../ToggleGroup/v2");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-toggle-details",
-  "version": "11.6.0",
+  "version": "11.6.1-snapshot-129",
   "description": "A styled toggleable, accordion-like component.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -15,27 +15,27 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.27.6",
-    "@instructure/emotion": "11.6.0",
-    "@instructure/ui-buttons": "11.6.0",
-    "@instructure/ui-dom-utils": "11.6.0",
-    "@instructure/shared-types": "11.6.0",
-    "@instructure/ui-expandable": "11.6.0",
-    "@instructure/ui-flex": "11.6.0",
-    "@instructure/ui-icons": "11.6.0",
-    "@instructure/ui-react-utils": "11.6.0",
-    "@instructure/ui-motion": "11.6.0",
-    "@instructure/ui-utils": "11.6.0",
-    "@instructure/ui-view": "11.6.0",
-    "@instructure/uid": "11.6.0"
+    "@instructure/shared-types": "11.6.1-snapshot-129",
+    "@instructure/emotion": "11.6.1-snapshot-129",
+    "@instructure/ui-buttons": "11.6.1-snapshot-129",
+    "@instructure/ui-dom-utils": "11.6.1-snapshot-129",
+    "@instructure/ui-expandable": "11.6.1-snapshot-129",
+    "@instructure/ui-flex": "11.6.1-snapshot-129",
+    "@instructure/ui-icons": "11.6.1-snapshot-129",
+    "@instructure/ui-utils": "11.6.1-snapshot-129",
+    "@instructure/ui-react-utils": "11.6.1-snapshot-129",
+    "@instructure/ui-motion": "11.6.1-snapshot-129",
+    "@instructure/ui-view": "11.6.1-snapshot-129",
+    "@instructure/uid": "11.6.1-snapshot-129"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "@testing-library/user-event": "^14.6.1",
     "vitest": "^3.2.2",
-    "@instructure/ui-axe-check": "11.6.0",
-    "@instructure/ui-babel-preset": "11.6.0",
-    "@instructure/ui-themes": "11.6.0"
+    "@instructure/ui-axe-check": "11.6.1-snapshot-129",
+    "@instructure/ui-themes": "11.6.1-snapshot-129",
+    "@instructure/ui-babel-preset": "11.6.1-snapshot-129"
   },
   "peerDependencies": {
     "react": ">=18 <=19"
@@ -45,17 +45,39 @@
   },
   "sideEffects": false,
   "exports": {
-    ".": {
-      "types": "./types/index.d.ts",
-      "import": "./es/index.js",
-      "require": "./lib/index.js",
-      "default": "./es/index.js"
-    },
     "./lib/*": "./lib/*",
     "./es/*": "./es/*",
     "./types/*": "./types/*",
     "./package.json": "./package.json",
-    "./src/*": "./src/*"
+    "./src/*": "./src/*",
+    ".": {
+      "src": "./src/exports/a.ts",
+      "types": "./types/exports/a.d.ts",
+      "import": "./es/exports/a.js",
+      "require": "./lib/exports/a.js",
+      "default": "./es/exports/a.js"
+    },
+    "./v11_6": {
+      "src": "./src/exports/a.ts",
+      "types": "./types/exports/a.d.ts",
+      "import": "./es/exports/a.js",
+      "require": "./lib/exports/a.js",
+      "default": "./es/exports/a.js"
+    },
+    "./v11_7": {
+      "src": "./src/exports/b.ts",
+      "types": "./types/exports/b.d.ts",
+      "import": "./es/exports/b.js",
+      "require": "./lib/exports/b.js",
+      "default": "./es/exports/b.js"
+    },
+    "./latest": {
+      "src": "./src/exports/b.ts",
+      "types": "./types/exports/b.d.ts",
+      "import": "./es/exports/b.js",
+      "require": "./lib/exports/b.js",
+      "default": "./es/exports/b.js"
+    }
   },
   "scripts": {
     "lint": "ui-scripts lint",

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

@@ -23,7 +23,7 @@
  */
 
 import { Component, createRef } from 'react'
-import { Button } from '@instructure/ui-buttons'
+import { Button } from '@instructure/ui-buttons/v11_6'
 import {
   IconArrowOpenEndSolid,
   IconArrowOpenDownSolid
@@ -32,13 +32,13 @@ import { Expandable } from '@instructure/ui-expandable'
 import { omitProps, pickProps } from '@instructure/ui-react-utils'
 import { isActiveElement } from '@instructure/ui-dom-utils'
 
-import { withStyle } from '@instructure/emotion'
+import { withStyleLegacy as withStyle } from '@instructure/emotion'
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
 import type { ToggleDetailsProps } from './props'
 import { allowedProps } from './props'
 import type { ExpandableToggleProps } from '@instructure/ui-expandable'
-import type { ViewProps } from '@instructure/ui-view'
+import type { ViewProps } from '@instructure/ui-view/v11_6'
 
 /**
 ---

package/src/ToggleDetails/{props.ts → v1/props.ts}

@@ -29,7 +29,7 @@ import type {
   ToggleDetailsTheme
 } from '@instructure/shared-types'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
-import type { ViewProps } from '@instructure/ui-view'
+import type { ViewProps } from '@instructure/ui-view/v11_6'
 
 type ToggleDetailsOwnProps = {
   variant?: 'default' | 'filled'

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="small" 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="small">
+          <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>
+```