@arbor-education/design-system.components 3.2.0 → 3.2.1

package/src/components/widget/Widget.stories.tsx

@@ -165,6 +165,14 @@ const meta = {
       description: 'Renders an info icon with tooltip beside the header title.',
       table: { type: { summary: 'string' } },
     },
+    isFloating: {
+      control: 'boolean',
+      description: 'Gives the widget a permanent elevated shadow (`ds-widget--floating`), on both hover and rest, instead of the default where hovering removes the shadow entirely. Use for widgets that need to visually lift off a busy dashboard background.',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
     isLoading: {
       control: 'boolean',
       description: 'Replaces body content with a loading indicator and sets `aria-busy` on the body.',
@@ -296,7 +304,7 @@ const WithTooltipTemplate = () => (
 );
 
 const CollapsibleTemplate = () => (
-  <Widget collapsible defaultExpanded>
+  <Widget collapsible>
     <Widget.Header>Attendance summary</Widget.Header>
     <Widget.Body>
       <p style={{ margin: 0 }}>Widget body content</p>
@@ -327,9 +335,22 @@ const WithRenderLinkTemplate = () => (
   </Widget>
 );
 
+const FloatingTemplate = () => (
+  <Widget isFloating>
+    <Widget.Header>Favourites</Widget.Header>
+    <Widget.Body>
+      <ul style={{ margin: 0, padding: 0, listStyle: 'none' }}>
+        {Array.from({ length: 6 }, (_, index) => (
+          <li key={index}>Favourite</li>
+        ))}
+      </ul>
+    </Widget.Body>
+  </Widget>
+);
+
 const FixedHeightOverflowTemplate = () => (
   <FixedHeightWidgetContainer>
-    <Widget isFloating>
+    <Widget>
       <Widget.Header>Favourites</Widget.Header>
       <Widget.Body>
         <ul style={{ margin: 0, padding: 0, listStyle: 'none' }}>
@@ -483,7 +504,7 @@ import { Widget } from '@arbor-education/design-system.components';
 
 function WidgetCollapsibleExample() {
   return (
-    <Widget collapsible defaultExpanded>
+    <Widget collapsible>
       <Widget.Header>Attendance summary</Widget.Header>
       <Widget.Body>
         <p>Widget body content</p>
@@ -515,7 +536,9 @@ function WidgetLoadingExample() {
   return (
     <Widget isLoading loadingLabel="Loading alerts">
       <Widget.Header>Alerts</Widget.Header>
-      <Widget.Body />
+      <Widget.Body>
+        <p>Content hidden while loading</p>
+      </Widget.Body>
     </Widget>
   );
 }
@@ -544,7 +567,7 @@ function WidgetRenderLinkExample() {
     <Widget
       href="/alerts"
       renderLink={({ href, className, children, linkProps }) => (
-        <a href={href} className={className} {...linkProps}>
+        <a href={href} className={className} data-router-link="true" {...linkProps}>
           {children}
         </a>
       )}
@@ -577,7 +600,7 @@ import { Widget } from '@arbor-education/design-system.components';
 function WidgetFixedHeightOverflowExample() {
   return (
     <div style={{ height: 280, display: 'flex', flexDirection: 'column' }}>
-      <Widget isFloating>
+      <Widget>
         <Widget.Header>Favourites</Widget.Header>
         <Widget.Body>
           <ul>
@@ -598,3 +621,35 @@ export default WidgetFixedHeightOverflowExample;
   },
   'Parent container constrains height; the widget header stays pinned while `.ds-widget__body` scrolls overflow content.',
 );
+
+export const Floating: Story = withDescription(
+  {
+    render: FloatingTemplate,
+    parameters: {
+      controls: { disable: true },
+      docs: {
+        source: {
+          language: 'tsx',
+          code: `
+import { Widget } from '@arbor-education/design-system.components';
+
+function WidgetFloatingExample() {
+  return (
+    <Widget isFloating>
+      <Widget.Header>Favourites</Widget.Header>
+      <Widget.Body>
+        <ul>
+          <li>Favourite</li>
+        </ul>
+      </Widget.Body>
+    </Widget>
+  );
+}
+export default WidgetFloatingExample;
+`.trim(),
+        },
+      },
+    },
+  },
+  '`isFloating` gives the widget a permanent elevated shadow that does not clear on hover. Use it to visually lift a widget off a busy dashboard background.',
+);