Adding more S2 ContextualHelp examples (#6875)

* Adding more S2 ContextualHelp examples * adding NumberField ContectualHelp for v3 parity * re-adding removed props when previously meant to just stop the omit of a prop. --------- Co-authored-by: Robert Snow <[email protected]>
adobe · Aug 15, 2024 · a18bcb3 · a18bcb3 · rspbot · Aug 15, 2024
1 parent 754e9ad
commit a18bcb3
Show file tree

Hide file tree

Showing 8 changed files with 529 additions and 12 deletions.
diff --git a/packages/@react-spectrum/s2/src/NumberField.tsx b/packages/@react-spectrum/s2/src/NumberField.tsx
@@ -40,7 +40,7 @@ import {useSpectrumContextProps} from './useSpectrumContextProps';
 export interface NumberFieldProps extends
   AriaNumberFieldProps,
   StyleProps,
-  Omit<SpectrumLabelableProps, 'contextualHelp'>,
+  SpectrumLabelableProps,
   HelpTextProps {
   /**
    * Whether the NumberField step buttons should be collapsed into a single column.
@@ -228,6 +228,7 @@ function NumberField(props: NumberFieldProps, ref: Ref<TextFieldRef>) {
   [props, ref] = useSpectrumContextProps(props, ref, NumberFieldContext);
   let {
     label,
+    contextualHelp,
     description: descriptionMessage,
     errorMessage,
     isCollapsed,
@@ -280,7 +281,8 @@ function NumberField(props: NumberFieldProps, ref: Ref<TextFieldRef>) {
                   size={size}
                   labelPosition={labelPosition}
                   labelAlign={labelAlign}
-                  necessityIndicator={necessityIndicator}>
+                  necessityIndicator={necessityIndicator}
+                  contextualHelp={contextualHelp}>
                   {label}
                 </FieldLabel>
                 <FieldGroup

diff --git a/packages/@react-spectrum/s2/stories/CheckboxGroup.stories.tsx b/packages/@react-spectrum/s2/stories/CheckboxGroup.stories.tsx
@@ -10,7 +10,16 @@
  * governing permissions and limitations under the License.
  */
 
-import {Checkbox, CheckboxGroup} from '../src';
+import {
+  Checkbox,
+  CheckboxGroup,
+  Content,
+  ContextualHelp,
+  Footer,
+  Heading,
+  Link,
+  Text
+} from '../src';
 import type {Meta, StoryObj} from '@storybook/react';
 
 const meta: Meta<typeof CheckboxGroup> = {
@@ -42,3 +51,64 @@ export const Example: Story = {
     label: 'Favorite sports'
   }
 };
+
+export const ContextualHelpExample = (args: any) => (
+  <CheckboxGroup {...args}>
+    <Checkbox isEmphasized value="soccer">Soccer</Checkbox>
+    <Checkbox value="baseball">Baseball</Checkbox>
+    <Checkbox value="basketball">Basketball</Checkbox>
+  </CheckboxGroup>
+);
+
+ContextualHelpExample.args = {
+  label: 'Favorite sports',
+  contextualHelp: (
+    <ContextualHelp>
+      <Heading>Sports</Heading>
+      <Content>
+        <Text>
+          Social games we paly to have fun and stay healthy.
+        </Text>
+      </Content>
+      <Footer>
+        <Link
+          isStandalone
+          href="https://en.wikipedia.org/wiki/Sport"
+          target="_blank">Learn more about sports</Link>
+      </Footer>
+    </ContextualHelp>
+  )
+};
+
+ContextualHelpExample.parameters = {
+  docs: {
+    source: {
+      transform: () => {
+        return `
+<CheckboxGroup
+  contextualHelp={
+    <ContextualHelp>
+      <Heading>Sports</Heading>
+      <Content>
+        <Text>
+          Social games we paly to have fun and stay healthy.
+        </Text>
+      </Content>
+      <Footer>
+        <Link
+          isStandalone
+          href="https://en.wikipedia.org/wiki/Sport"
+          target="_blank">Learn more about sports</Link>
+      </Footer>
+    </ContextualHelp>
+  }
+  label="Segment"
+/>
+  <Checkbox isEmphasized value="soccer">Soccer</Checkbox>
+  <Checkbox value="baseball">Baseball</Checkbox>
+  <Checkbox value="basketball">Basketball</Checkbox>
+</CheckboxGroup>`;
+      }
+    }
+  }
+};
diff --git a/packages/@react-spectrum/s2/stories/ColorField.stories.tsx b/packages/@react-spectrum/s2/stories/ColorField.stories.tsx
@@ -10,7 +10,15 @@
  * governing permissions and limitations under the License.
  */
 
-import {ColorField} from '../src/ColorField';
+import {
+  ColorField,
+  Content,
+  ContextualHelp,
+  Footer,
+  Heading,
+  Link,
+  Text
+} from '../src/';
 import type {Meta} from '@storybook/react';
 
 const meta: Meta<typeof ColorField> = {
@@ -31,3 +39,56 @@ export const Example = (args: any) => <ColorField {...args} />;
 Example.args = {
   label: 'Color'
 };
+
+export const ContextualHelpExample = (args: any) => (
+  <ColorField {...args} />
+);
+
+ContextualHelpExample.args = {
+  label: 'Color',
+  contextualHelp: (
+    <ContextualHelp>
+      <Heading>Color</Heading>
+      <Content>
+        <Text>
+          Pick your favorite color.
+        </Text>
+      </Content>
+      <Footer>
+        <Link
+          isStandalone
+          href="https://en.wikipedia.org/wiki/Color"
+          target="_blank">Learn more about color</Link>
+      </Footer>
+    </ContextualHelp>
+  )
+};
+
+ContextualHelpExample.parameters = {
+  docs: {
+    source: {
+      transform: () => {
+        return `
+<ColorField
+  contextualHelp={
+    <ContextualHelp>
+      <Heading>Color</Heading>
+      <Content>
+        <Text>
+          Pick your favorite color.
+        </Text>
+      </Content>
+      <Footer>
+        <Link
+          isStandalone
+          href="https://en.wikipedia.org/wiki/Color"
+          target="_blank">Learn more about color</Link>
+      </Footer>
+    </ContextualHelp>
+  }
+  label="Color"
+/>`;
+      }
+    }
+  }
+};
diff --git a/packages/@react-spectrum/s2/stories/NumberField.stories.tsx b/packages/@react-spectrum/s2/stories/NumberField.stories.tsx
@@ -10,9 +10,18 @@
  * governing permissions and limitations under the License.
  */
 
-import {Button, Form} from '../src';
+import {
+  Button,
+  Content,
+  ContextualHelp,
+  Footer,
+  Form,
+  Heading,
+  Link,
+  NumberField,
+  Text
+} from '../src';
 import type {Meta, StoryObj} from '@storybook/react';
-import {NumberField} from '../src/NumberField';
 import {style} from '../style/spectrum-theme' with {type: 'macro'};
 
 const meta: Meta<typeof NumberField> = {
@@ -62,3 +71,55 @@ CustomWidth.parameters = {
     disable: true
   }
 };
+
+
+export const ContextualHelpExample = (args: any) => <NumberField {...args} />;
+
+ContextualHelpExample.args = {
+  label: 'Quantity',
+  contextualHelp: (
+    <ContextualHelp>
+      <Heading>Quantity</Heading>
+      <Content>
+        <Text>
+          Pick a number between negative infinity and positive infinity.
+        </Text>
+      </Content>
+      <Footer>
+        <Link
+          isStandalone
+          href="https://en.wikipedia.org/wiki/Quantity"
+          target="_blank">Learn more about quantity</Link>
+      </Footer>
+    </ContextualHelp>
+  )
+};
+
+ContextualHelpExample.parameters = {
+  docs: {
+    source: {
+      transform: () => {
+        return `
+<NumberField
+  label="Quantity"
+  contextualHelp={
+    <ContextualHelp>
+      <Heading>Quantity</Heading>
+      <Content>
+        <Text>
+          Pick a number between negative infinity and positive infinity.
+        </Text>
+      </Content>
+      <Footer>
+        <Link
+          isStandalone
+          href="https://en.wikipedia.org/wiki/Quantity"
+          target="_blank">Learn more about quantity</Link>
+      </Footer>
+    </ContextualHelp>
+  }
+/>`;
+      }
+    }
+  }
+};
diff --git a/packages/@react-spectrum/s2/stories/Picker.stories.tsx b/packages/@react-spectrum/s2/stories/Picker.stories.tsx
@@ -10,8 +10,20 @@
  * governing permissions and limitations under the License.
  */
 
-import {Button, Form, Header, Heading, Picker, PickerItem, PickerSection, Text} from '../src';
-
+import {
+  Button,
+  Content,
+  ContextualHelp,
+  Footer,
+  Form,
+  Header,
+  Heading,
+  Link,
+  Picker,
+  PickerItem,
+  PickerSection,
+  Text
+} from '../src';
 import {categorizeArgTypes, StaticColorDecorator} from './utils';
 import DeviceDesktopIcon from '../s2wf-icons/S2_Icon_DeviceDesktop_20_N.svg';
 import DeviceTabletIcon from '../s2wf-icons/S2_Icon_DeviceTablet_20_N.svg';
@@ -140,3 +152,72 @@ CustomWidth.parameters = {
     disable: true
   }
 };
+
+export const ContextualHelpExample = (args: any) => (
+  <Picker {...args}>
+    <PickerItem>Chocolate</PickerItem>
+    <PickerItem>Mint</PickerItem>
+    <PickerItem>Strawberry</PickerItem>
+    <PickerItem>Vanilla</PickerItem>
+    <PickerItem>Chocolate Chip Cookie Dough</PickerItem>
+  </Picker>
+);
+
+ContextualHelpExample.args = {
+  label: 'Ice cream flavor',
+  contextualHelp: (
+    <ContextualHelp>
+      <Heading>What is a ice cream?</Heading>
+      <Content>
+        <Text>
+          A combination of sugar, eggs, milk, and cream is cooked to make
+          a custard base. Then, flavorings are added, and this flavored
+          mixture is carefully churned and frozen to make ice cream.
+        </Text>
+      </Content>
+      <Footer>
+        <Link
+          isStandalone
+          href="https://en.wikipedia.org/wiki/Ice_cream"
+          target="_blank">Learn more about ice cream</Link>
+      </Footer>
+    </ContextualHelp>
+  )
+};
+
+ContextualHelpExample.parameters = {
+  docs: {
+    source: {
+      transform: () => {
+        return `
+<Picker
+  contextualHelp={
+    <ContextualHelp>
+      <Heading>What is a ice cream?</Heading>
+      <Content>
+        <Text>
+          A combination of sugar, eggs, milk, and cream is cooked to make
+          a custard base. Then, flavorings are added, and this flavored
+          mixture is carefully churned and frozen to make ice cream.
+        </Text>
+      </Content>
+      <Footer>
+        <Link
+          isStandalone
+          href="https://en.wikipedia.org/wiki/Ice_cream"
+          target="_blank">Learn more about ice cream</Link>
+      </Footer>
+    </ContextualHelp>
+  }
+  label="Ice cream flavor"
+/>
+  <PickerItem>Chocolate</PickerItem>
+  <PickerItem>Mint</PickerItem>
+  <PickerItem>Strawberry</PickerItem>
+  <PickerItem>Vanilla</PickerItem>
+  <PickerItem>Chocolate Chip Cookie Dough</PickerItem>
+</Picker>`;
+      }
+    }
+  }
+};