npm - @transferwise/components - Versions diffs - 46.146.0 → 46.148.0 - Mend

@transferwise/components 46.146.0 → 46.148.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (109) hide show

package/build/main.css +66 -0
package/build/nudge/Nudge.js.map +1 -1
package/build/nudge/Nudge.mjs.map +1 -1
package/build/prompt/CriticalBanner/CriticalBanner.js +78 -68
package/build/prompt/CriticalBanner/CriticalBanner.js.map +1 -1
package/build/prompt/CriticalBanner/CriticalBanner.mjs +79 -69
package/build/prompt/CriticalBanner/CriticalBanner.mjs.map +1 -1
package/build/styles/main.css +66 -0
package/build/styles/nudge/Nudge.css +11 -0
package/build/styles/prompt/CriticalBanner/CriticalBanner.css +48 -0
package/build/types/nudge/Nudge.d.ts +1 -1
package/build/types/nudge/Nudge.d.ts.map +1 -1
package/build/types/prompt/CriticalBanner/CriticalBanner.d.ts.map +1 -1
package/package.json +23 -19
package/src/accordion/Accordion.story.tsx +25 -0
package/src/avatarLayout/AvatarLayout.story.tsx +10 -0
package/src/avatarView/AvatarView.story.tsx +8 -0
package/src/body/Body.story.tsx +12 -0
package/src/button/_stories/Button.story.tsx +7 -1
package/src/calendar/Calendar.story.tsx +19 -7
package/src/carousel/Carousel.story.tsx +35 -0
package/src/checkbox/Checkbox.story.tsx +20 -0
package/src/checkboxButton/CheckboxButton.story.tsx +16 -0
package/src/chevron/Chevron.story.tsx +6 -0
package/src/chips/Chips.story.tsx +23 -0
package/src/circularButton/CircularButton.story.tsx +13 -0
package/src/common/baseCard/BaseCard.story.tsx +12 -0
package/src/common/bottomSheet/BottomSheet.story.tsx +21 -0
package/src/common/circle/Circle.story.tsx +11 -0
package/src/container/Container.story.tsx +12 -0
package/src/dateInput/DateInput.story.tsx +20 -0
package/src/dateLookup/DateLookup.story.tsx +23 -0
package/src/decision/Decision.story.tsx +36 -0
package/src/definitionList/DefinitionList.story.tsx +16 -0
package/src/dimmer/Dimmer.story.tsx +24 -0
package/src/display/Display.story.tsx +11 -0
package/src/divider/Divider.story.tsx +6 -0
package/src/drawer/Drawer.story.tsx +25 -0
package/src/dropFade/DropFade.story.tsx +27 -0
package/src/emphasis/Emphasis.story.tsx +10 -0
package/src/expressiveMoneyInput/ExpressiveMoneyInput.story.tsx +37 -0
package/src/field/Field.story.tsx +16 -0
package/src/flowNavigation/FlowNavigation.story.tsx +25 -0
package/src/header/Header.story.tsx +17 -0
package/src/iconButton/IconButton.story.tsx +14 -0
package/src/image/Image.story.tsx +11 -0
package/src/info/Info.story.tsx +10 -0
package/src/inputWithDisplayFormat/InputWithDisplayFormat.story.tsx +23 -0
package/src/inputs/InputGroup.story.tsx +37 -0
package/src/inputs/SearchInput.story.tsx +22 -0
package/src/inputs/SelectInput/_stories/SelectInput.story.tsx +42 -0
package/src/inputs/TextArea.story.tsx +22 -0
package/src/instructionsList/InstructionsList.story.tsx +19 -0
package/src/label/Label.story.tsx +17 -0
package/src/link/Link.story.tsx +11 -0
package/src/list/List.story.tsx +19 -0
package/src/listItem/_stories/ListItem.story.tsx +20 -0
package/src/loader/Loader.story.tsx +6 -0
package/src/logo/Logo.story.tsx +6 -0
package/src/main.css +66 -0
package/src/markdown/Markdown.story.tsx +17 -0
package/src/modal/Modal.story.tsx +23 -0
package/src/money/Money.story.tsx +7 -0
package/src/moneyInput/MoneyInput.story.tsx +34 -0
package/src/nudge/Nudge.css +11 -0
package/src/nudge/Nudge.less +4 -0
package/src/nudge/Nudge.story.tsx +26 -0
package/src/nudge/Nudge.tsx +2 -1
package/src/overlayHeader/OverlayHeader.story.tsx +10 -0
package/src/phoneNumberInput/PhoneNumberInput.story.tsx +23 -0
package/src/popover/Popover.story.tsx +12 -0
package/src/primitives/PrimitiveAnchor/stories/PrimitiveAnchor.story.tsx +11 -0
package/src/primitives/PrimitiveButton/stories/PrimitiveButton.story.tsx +11 -0
package/src/processIndicator/ProcessIndicator.story.tsx +10 -0
package/src/progress/Progress.story.tsx +6 -0
package/src/progressBar/ProgressBar.story.tsx +12 -0
package/src/promoCard/PromoCard.story.tsx +15 -0
package/src/promoCard/PromoCardGroup.story.tsx +28 -0
package/src/prompt/ActionPrompt/ActionPrompt.story.tsx +31 -0
package/src/prompt/CriticalBanner/CriticalBanner.accessibility.docs.mdx +9 -0
package/src/prompt/CriticalBanner/CriticalBanner.css +48 -0
package/src/prompt/CriticalBanner/CriticalBanner.less +72 -0
package/src/prompt/CriticalBanner/CriticalBanner.story.tsx +180 -169
package/src/prompt/CriticalBanner/CriticalBanner.test.story.tsx +25 -6
package/src/prompt/CriticalBanner/CriticalBanner.test.tsx +37 -0
package/src/prompt/CriticalBanner/CriticalBanner.tsx +92 -83
package/src/prompt/CriticalBanner/CriticalBanner.vars.less +1 -0
package/src/prompt/InfoPrompt/InfoPrompt.story.tsx +30 -0
package/src/prompt/InlinePrompt/InlinePrompt.story.tsx +14 -0
package/src/radio/Radio.story.tsx +34 -0
package/src/radioGroup/RadioGroup.story.tsx +26 -0
package/src/section/Section.story.tsx +15 -0
package/src/segmentedControl/SegmentedControl.story.tsx +27 -0
package/src/sentimentSurface/SentimentSurface.story.tsx +11 -0
package/src/slidingPanel/SlidingPanel.story.tsx +19 -0
package/src/snackbar/Snackbar.story.tsx +24 -0
package/src/statusIcon/StatusIcon.story.tsx +6 -0
package/src/stepper/Stepper.story.tsx +30 -0
package/src/sticky/Sticky.story.tsx +22 -1
package/src/switch/Switch.story.tsx +17 -0
package/src/table/Table.story.tsx +32 -0
package/src/tabs/Tabs.story.tsx +31 -0
package/src/textareaWithDisplayFormat/TextareaWithDisplayFormat.story.tsx +23 -0
package/src/tile/Tile.story.tsx +13 -0
package/src/title/Title.story.tsx +12 -0
package/src/tooltip/Tooltip.story.tsx +8 -0
package/src/typeahead/Typeahead.story.tsx +33 -0
package/src/upload/Upload.story.tsx +24 -0
package/src/uploadInput/UploadInput.story.tsx +31 -0

package/src/prompt/CriticalBanner/CriticalBanner.tsx CHANGED Viewed

@@ -77,6 +77,94 @@ export const CriticalBanner = ({
     .filter(Boolean)
     .join(' ');
+  const bannerSurface = (
+    <PrimitivePrompt
+      ref={containerRef}
+      id={id}
+      sentiment={sentiment}
+      emphasis={sentiment === 'neutral' ? 'base' : 'elevated'}
+      data-testid={testId}
+      className={clsx(
+        'wds-critical-banner',
+        'wds-critical-banner-overhang',
+        {
+          'wds-critical-banner--collapsed': !resolvedExpanded,
+          'wds-critical-banner--with-two-actions': !!actionSecondary,
+        },
+        className,
+      )}
+      media={renderPromptMedia({
+        media,
+        sentiment,
+        mediaId,
+        imgClassName: 'wds-critical-banner--media-image',
+      })}
+      actions={
+        hasActions ? (
+          <div aria-hidden={!resolvedExpanded ? true : undefined} style={{ display: 'contents' }}>
+            {actionSecondary && (
+              // @ts-expect-error onClick type mismatch
+              <Button
+                v2
+                size="md"
+                priority="secondary"
+                href={actionSecondary.href}
+                tabIndex={resolvedExpanded ? undefined : -1}
+                onClick={actionSecondary?.onClick}
+              >
+                {actionSecondary.label}
+              </Button>
+            )}
+            {action && (
+              // @ts-expect-error onClick type mismatch
+              <Button
+                v2
+                size="md"
+                priority="primary"
+                href={action.href}
+                tabIndex={resolvedExpanded ? undefined : -1}
+                onClick={action.onClick}
+              >
+                {action.label}
+              </Button>
+            )}
+          </div>
+        ) : undefined
+      }
+      role="region"
+      aria-labelledby={ariaLabelledByIds || undefined}
+      aria-describedby={description ? descId : undefined}
+    >
+      <div className="wds-critical-banner__text-wrapper">
+        {title && (
+          <Body
+            id={titleId}
+            type={Typography.BODY_LARGE_BOLD}
+            className="wds-critical-banner__content wds-critical-banner__title"
+          >
+            {title}
+          </Body>
+        )}
+        {description && (
+          <Body
+            id={descId}
+            className={clsx('wds-critical-banner__content', 'wds-critical-banner__description', {
+              'wds-critical-banner__description--with-title': !!title,
+            })}
+          >
+            {description}
+          </Body>
+        )}
+      </div>
+      <ExpanderToggle
+        expanded={resolvedExpanded}
+        size={24}
+        className="wds-critical-banner__toggle"
+        onToggle={handleToggle}
+      />
+    </PrimitivePrompt>
+  );
   return (
     <LiveRegion
       aria-live="assertive"
@@ -88,90 +176,11 @@ export const CriticalBanner = ({
         actionSecondaryLabel: actionSecondary?.label,
       })}
     >
-      <PrimitivePrompt
-        ref={containerRef}
-        id={id}
-        sentiment={sentiment}
-        emphasis={sentiment === 'neutral' ? 'base' : 'elevated'}
-        data-testid={testId}
-        className={clsx(
-          'wds-critical-banner',
-          {
-            'wds-critical-banner--collapsed': !resolvedExpanded,
-            'wds-critical-banner--with-two-actions': !!actionSecondary,
-          },
-          className,
-        )}
-        media={renderPromptMedia({
-          media,
-          sentiment,
-          mediaId,
-          imgClassName: 'wds-critical-banner--media-image',
-        })}
-        actions={
-          hasActions ? (
-            <div aria-hidden={!resolvedExpanded ? true : undefined} style={{ display: 'contents' }}>
-              {actionSecondary && (
-                // @ts-expect-error onClick type mismatch
-                <Button
-                  v2
-                  size="md"
-                  priority="secondary"
-                  href={actionSecondary.href}
-                  tabIndex={resolvedExpanded ? undefined : -1}
-                  onClick={actionSecondary?.onClick}
-                >
-                  {actionSecondary.label}
-                </Button>
-              )}
-              {action && (
-                // @ts-expect-error onClick type mismatch
-                <Button
-                  v2
-                  size="md"
-                  priority="primary"
-                  href={action.href}
-                  tabIndex={resolvedExpanded ? undefined : -1}
-                  onClick={action.onClick}
-                >
-                  {action.label}
-                </Button>
-              )}
-            </div>
-          ) : undefined
-        }
-        role="region"
-        aria-labelledby={ariaLabelledByIds || undefined}
-        aria-describedby={description ? descId : undefined}
-      >
-        <div className="wds-critical-banner__text-wrapper">
-          {title && (
-            <Body
-              id={titleId}
-              type={Typography.BODY_LARGE_BOLD}
-              className="wds-critical-banner__content wds-critical-banner__title"
-            >
-              {title}
-            </Body>
-          )}
-          {description && (
-            <Body
-              id={descId}
-              className={clsx('wds-critical-banner__content', 'wds-critical-banner__description', {
-                'wds-critical-banner__description--with-title': !!title,
-              })}
-            >
-              {description}
-            </Body>
-          )}
+      <div className="wds-critical-banner-overhang-query">
+        <div className="wds-critical-banner__entry-mask">
+          <div className="wds-critical-banner__entry-track">{bannerSurface}</div>
         </div>
-        <ExpanderToggle
-          expanded={resolvedExpanded}
-          size={24}
-          className="wds-critical-banner__toggle"
-          onToggle={handleToggle}
-        />
-      </PrimitivePrompt>
+      </div>
     </LiveRegion>
   );
 };

package/src/prompt/CriticalBanner/CriticalBanner.vars.less CHANGED Viewed

@@ -3,4 +3,5 @@
 // * collapse toggle is visible below collapsible-max token
 // At some point in the not too distant future hopefully these two value will be the same but because of launchpad quirks, for now they'll be different
 @wds-critical-banner-action-wrapper-max: 600px;
+@wds-critical-banner-mobile-overhang-max: 600px;
 @wds-critical-banner-collapsible-max: 768px;

package/src/prompt/InfoPrompt/InfoPrompt.story.tsx CHANGED Viewed

@@ -3,6 +3,10 @@ import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { action } from 'storybook/actions';
 import { Confetti, GiftBox, Star, Suitcase, Briefcase, Plane } from '@transferwise/icons';
+import {
+  createSandboxStory,
+  globalScope,
+} from '../../../.storybook/components/sandbox/SandboxEditor';
 import { lorem10, lorem20 } from '../../test-utils';
 import Button from '../../button';
 import Title from '../../title';
@@ -154,6 +158,32 @@ export const Playground: StoryObj<PreviewStoryArgs> = {
   },
 };
+export const Sandbox = createSandboxStory({
+  code: `const App = () => {
+  const [dismissed, setDismissed] = React.useState(false);
+  if (dismissed) {
+    return (
+      <Button v2 size="md" onClick={() => setDismissed(false)}>
+        Show prompt again
+      </Button>
+    );
+  }
+  return (
+    <InfoPrompt
+      sentiment="success"
+      title="Payment successful"
+      description="Your payment is being processed."
+      media={{ asset: <Star /> }}
+      action={{ label: 'View details', onClick: () => console.log('view') }}
+      onDismiss={() => setDismissed(true)}
+    />
+  );
+};`,
+  scope: globalScope,
+});
 /**
  * InfoPrompt supports multiple sentiments to communicate different types of messages:
  * - `neutral` (default): General information

package/src/prompt/InlinePrompt/InlinePrompt.story.tsx CHANGED Viewed

@@ -2,6 +2,10 @@ import type { ReactElement } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { action } from 'storybook/actions';
 import { Clock, Taxi, Suitcase } from '@transferwise/icons';
+import {
+  createSandboxStory,
+  globalScope,
+} from '../../../.storybook/components/sandbox/SandboxEditor';
 import { lorem5 } from '../../test-utils';
 import Link from '../../link';
 import { InlinePrompt, InlinePromptProps } from './InlinePrompt';
@@ -106,6 +110,16 @@ export const Playground: StoryObj<PreviewStoryArgs> = {
   },
 };
+export const Sandbox = createSandboxStory({
+  code: `<InlinePrompt sentiment="positive" media={<Suitcase />}>
+  Your travel account is set up and ready to use.{' '}
+  <Link href="https://wise.com" target="_blank" rel="noreferrer">
+    View details
+  </Link>
+</InlinePrompt>`,
+  scope: { ...globalScope, Link },
+});
 /**
  * Aside from the known `neutral`, `negative`, `warning` and `positive` sentiments, `InlinePrompt` is the first of the prompts to introduce a new `proposition` sentiment, which can be used to encourage the user to take an action that might benefit them.
  *

package/src/radio/Radio.story.tsx CHANGED Viewed

@@ -1,5 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { useState } from 'react';
+import {
+  createSandboxStory,
+  globalScope,
+} from '../../.storybook/components/sandbox/SandboxEditor';
 import Radio, { type RadioProps } from './Radio';
 import AvatarView from '../avatarView';
 import { Flag } from '@wise/art';
@@ -14,6 +18,36 @@ const meta: Meta<RadioProps> = {
 };
 export default meta;
+export const Sandbox = createSandboxStory({
+  code: `const App = () => {
+  const [selected, setSelected] = React.useState('option1');
+  return (
+    <>
+      <Radio
+        label="Standard delivery"
+        secondary="3-5 business days"
+        name="delivery"
+        id="radio-standard"
+        value="option1"
+        checked={selected === 'option1'}
+        onChange={() => setSelected('option1')}
+      />
+      <Radio
+        label="Express delivery"
+        secondary="1-2 business days"
+        name="delivery"
+        id="radio-express"
+        value="option2"
+        checked={selected === 'option2'}
+        onChange={() => setSelected('option2')}
+      />
+    </>
+  );
+};`,
+  scope: globalScope,
+});
 export const Basic: StoryObj<RadioProps> = {
   render: (args) => {
     return <Radio {...args} value="option1" onChange={fn()} />;

package/src/radioGroup/RadioGroup.story.tsx CHANGED Viewed

@@ -1,4 +1,8 @@
 import { Flag } from '@wise/art';
+import {
+  createSandboxStory,
+  globalScope,
+} from '../../.storybook/components/sandbox/SandboxEditor';
 import RadioGroup, { RadioGroupProps, RadioGroupRadio } from './RadioGroup';
 import { Field } from '../field/Field';
 import { Meta, StoryObj } from '@storybook/react-webpack5';
@@ -14,6 +18,28 @@ const meta = {
 export default meta;
 type Story<T extends string | number = string> = StoryObj<RadioGroupProps<T>>;
+export const Sandbox = createSandboxStory({
+  code: `const App = () => {
+  const [selectedValue, setSelectedValue] = React.useState('radio-1');
+  return (
+    <Field label="Choose an option">
+      <RadioGroup
+        name="radio-group"
+        selectedValue={selectedValue}
+        onChange={(value) => setSelectedValue(value)}
+        radios={[
+          { value: 'radio-1', label: 'Option 1', secondary: 'Description for option 1' },
+          { value: 'radio-2', label: 'Option 2', secondary: 'Description for option 2' },
+          { value: 'radio-3', label: 'Option 3', secondary: 'Description for option 3' },
+        ]}
+      />
+    </Field>
+  );
+};`,
+  scope: globalScope,
+});
 export const Basic: Story = {
   args: {
     selectedValue: 'radio-2',

package/src/section/Section.story.tsx CHANGED Viewed

@@ -1,6 +1,7 @@
 import { FastFlag as FastFlagIcon } from '@transferwise/icons';
 import { useState } from 'react';
 import { action } from 'storybook/actions';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 import Accordion from '../accordion';
 import Card from '../card';
 import Header from '../header';
@@ -12,6 +13,20 @@ export default {
   title: 'Content/Section',
 };
+export const Sandbox = createSandboxStory({
+  code: `<>
+  <Section>
+    <Header title="Section with header" />
+    Section content goes here.
+  </Section>
+  <Section>
+    <Header title="Another section" />
+    More content goes here.
+  </Section>
+</>`,
+  scope: globalScope,
+});
 export const Basic = () => {
   return (
     <>

package/src/segmentedControl/SegmentedControl.story.tsx CHANGED Viewed

@@ -1,6 +1,10 @@
 import { StoryFn, StoryObj } from '@storybook/react-webpack5';
 import React from 'react';
+import {
+  createSandboxStory,
+  globalScope,
+} from '../../.storybook/components/sandbox/SandboxEditor';
 import Button from '../button';
 import SegmentedControl from './SegmentedControl';
@@ -12,6 +16,29 @@ export default {
 type Story = StoryObj<typeof SegmentedControl>;
+export const Sandbox = createSandboxStory({
+  code: `const App = () => {
+  const [value, setValue] = React.useState('cupcakes');
+  const segments = [
+    { id: 'CUPCAKE', label: 'Cupcakes', value: 'cupcakes' },
+    { id: 'SPONGECAKE', label: 'Sponge cake', value: 'spongecake' },
+    { id: 'CARROT_CAKE', label: 'Carrot cake', value: 'carrotcake' },
+  ];
+  return (
+    <SegmentedControl
+      name="cake-selector"
+      mode="input"
+      segments={segments}
+      value={value}
+      onChange={(newValue) => setValue(newValue)}
+    />
+  );
+};`,
+  scope: globalScope,
+});
 const Template: Story = {
   render: (args) => {
     const [segments, setSegments] = React.useState([

package/src/sentimentSurface/SentimentSurface.story.tsx CHANGED Viewed

@@ -1,5 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { Bank, Defrost } from '@transferwise/icons';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 import Body from '../body';
 import Button from '../button';
 import Header from '../header';
@@ -127,6 +128,16 @@ export const Playground: Story = {
   },
 };
+export const Sandbox = createSandboxStory({
+  code: `<SentimentSurface sentiment="negative" className="p-a-2">
+  <p>
+    This text and its <Link href="#">inline links</Link> use sentiment-matched colour.
+  </p>
+  <Button v2 size="sm">Primary</Button>
+</SentimentSurface>`,
+  scope: { ...globalScope, Link },
+});
 const sentiments: Sentiment[] = ['negative', 'warning', 'neutral', 'success', 'proposition'];
 const emphasisLevels: Emphasis[] = ['base', 'elevated'];
 const tokenCategories = [

package/src/slidingPanel/SlidingPanel.story.tsx CHANGED Viewed

@@ -1,5 +1,6 @@
 import React from 'react';
 import Button from '../button';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 import SlidingPanel, { type SlidingPanelProps } from './SlidingPanel';
 export default {
@@ -25,6 +26,24 @@ export default {
   ],
 };
+export const Sandbox = createSandboxStory({
+  code: `const App = () => {
+  const [open, setOpen] = React.useState(false);
+  return (
+    <div>
+      <Button v2 onClick={() => setOpen(!open)}>Toggle Sliding Panel</Button>
+      <SlidingPanel open={open} position="top">
+        <div className="p-y-4 p-x-4">
+          Panel content slides in from the chosen position.
+        </div>
+      </SlidingPanel>
+    </div>
+  );
+};`,
+  scope: globalScope,
+});
 export const Basic = function Render(args: SlidingPanelProps) {
   const [open, setOpen] = React.useState(false);

package/src/snackbar/Snackbar.story.tsx CHANGED Viewed

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { fn, userEvent, within } from 'storybook/test';
 import { wait } from '../test-utils/wait';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 import Button from '../button';
 import { Snackbar } from './Snackbar';
 import { SnackbarConsumer } from './SnackbarContext';
@@ -12,6 +13,29 @@ const meta: Meta = {
 };
 export default meta;
+export const Sandbox = createSandboxStory({
+  code: `<SnackbarProvider>
+  <SnackbarConsumer>
+    {({ createSnackbar }) => (
+      <Button v2 size="md"
+        onClick={() =>
+          createSnackbar({
+            text: <span>Transfer completed successfully</span>,
+            action: {
+              label: 'View',
+              onClick: () => console.log('View clicked'),
+            },
+          })
+        }
+      >
+        Show Snackbar
+      </Button>
+    )}
+  </SnackbarConsumer>
+</SnackbarProvider>`,
+  scope: globalScope,
+});
 export const Basic: StoryObj = {
   parameters: {
     docs: {

package/src/statusIcon/StatusIcon.story.tsx CHANGED Viewed

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { createSandboxStory } from '../../.storybook/components/sandbox/SandboxEditor';
 import { Sentiment } from '../common';
 import SentimentSurface from '../sentimentSurface';
@@ -36,6 +37,11 @@ export const Playground: Story = {
   },
 };
+export const Sandbox = createSandboxStory({
+  code: `<StatusIcon sentiment="positive" size={48} />`,
+  scope: {  StatusIcon },
+});
 /**
  * All available sentiments at the selected size.
  */

package/src/stepper/Stepper.story.tsx CHANGED Viewed

@@ -1,5 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { fn } from 'storybook/test';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 import Stepper from './Stepper';
 const STEPS = [
@@ -37,6 +38,35 @@ export default {
 type Story = StoryObj<typeof Stepper>;
+export const Sandbox = createSandboxStory({
+  code: `const App = () => {
+  const [activeStep, setActiveStep] = React.useState(1);
+  return (
+    <Stepper
+      activeStep={activeStep}
+      steps={[
+        { label: 'Amount', onClick: () => setActiveStep(0) },
+        {
+          label: 'You',
+          hoverLabel: (
+            <>
+              <div><strong>Diana Jaramillo</strong></div>
+              dianajarm123@gmail.com
+            </>
+          ),
+          onClick: () => setActiveStep(1),
+        },
+        { label: 'Recipient', onClick: () => setActiveStep(2) },
+        { label: 'Review', onClick: () => setActiveStep(3) },
+        { label: 'Pay', onClick: () => setActiveStep(4) },
+      ]}
+    />
+  );
+};`,
+  scope: globalScope,
+});
 export const Basic: Story = {
   render: ({ activeStep, steps }) => {
     return <Stepper activeStep={activeStep} steps={steps} />;

package/src/sticky/Sticky.story.tsx CHANGED Viewed

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import React from 'react';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 import Sticky from './Sticky';
 import { allModes } from '../../.storybook/modes';
@@ -45,7 +46,27 @@ export default meta;
 // Represents a story object for the `Sticky` component.
 type Story = StoryObj<typeof Sticky>;
-export const Default: Story = {}; // Default story with no additional props
+export const Sandbox = createSandboxStory({
+  code: `const App = () => {
+  const [open, setOpen] = React.useState(false);
+  return (
+    <>
+      <Button v2 onClick={() => setOpen(!open)}>
+        {open ? 'Close' : 'Open'} Sticky
+      </Button>
+      <Sticky open={open} position="bottom">
+        <div className="d-flex justify-content-start align-items-start flex-wrap p-x-4 p-y-4">
+          <p className="m-b-0">Sticky content pinned to the bottom.</p>
+        </div>
+      </Sticky>
+    </>
+  );
+};`,
+  scope: globalScope,
+});
+export const Default: Story = {};
 export const PositionTop: Story = {
   args: {

package/src/switch/Switch.story.tsx CHANGED Viewed

@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react';
 import { fn } from 'storybook/test';
 import { storySourceWithoutNoise } from '../../.storybook/helpers';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 import Switch, { SwitchProps } from './Switch';
 import { Field } from '../field/Field';
 import { Meta, StoryObj } from '@storybook/react-webpack5';
@@ -55,6 +56,22 @@ export const Playground: Story = storySourceWithoutNoise({
   },
 });
+export const Sandbox = createSandboxStory({
+  code: `const App = () => {
+  const [checked, setChecked] = React.useState(false);
+  return (
+    <Field id="sandbox-field" label="Enable notifications">
+      <Switch
+        checked={checked}
+        onClick={() => setChecked((prev) => !prev)}
+      />
+    </Field>
+  );
+};`,
+  scope: { ...globalScope, Switch },
+});
 /**
  * Three labelling patterns: <a href="?path=/docs/forms-label--docs">Label</a>, `aria-labelledby`, and <a href="?path=/docs/forms-field--docs">Field</a>. <br />
  * Use Label for simple label-input pairs. Use `aria-labelledby` to reference existing text as the accessible name. Use Field for form layouts with labels, descriptions, and validation.