docs: updating StepperField docs (aws-amplify#1169)

* docs: updating StepperField docs

* chore: updating description

docs/src/components/Demo.tsx

@@ -4,7 +4,6 @@ import Highlight, { defaultProps } from 'prism-react-renderer';
 import {
   Tabs,
   TabItem,
-  Card,
   Flex,
   View,
   Button,

docs/src/data/links.ts

@@ -95,7 +95,11 @@ export const inputComponents = [
   { href: '/components/textfield', label: 'Text Field', body: `` },
   { href: '/components/selectfield', label: 'Select Field', body: `` },
   { href: '/components/sliderfield', label: 'Slider Field', body: `` },
-  { href: '/components/stepperfield', label: 'Stepper Field', body: `` },
+  {
+    href: '/components/stepperfield',
+    label: 'Stepper Field',
+    body: `A StepperField is a number input with buttons to increase or decrease the value.`,
+  },
   { href: '/components/searchfield', label: 'Search Field', body: `` },
   { href: '/components/passwordfield', label: 'Password Field', body: `` },
   {

docs/src/pages/components/alert/AlertPropControls.tsx

@@ -5,7 +5,7 @@ import {
   SwitchField,
   Flex,
 } from '@aws-amplify/ui-react';
-import React from 'react';
+import * as React from 'react';
 
 export interface AlertPropControlsProps extends AlertProps {
   setVariation: (value: React.SetStateAction<AlertProps['variation']>) => void;

docs/src/pages/components/alert/examples/AlertIconExample.tsx

@@ -7,9 +7,7 @@ export const AlertIconExample = () => {
       <Alert variation="error" hasIcon={false}>
         This Alert does not have an icon
       </Alert>
-      <Alert variation="success" iconSize="large">
-        This Alert has a large icon
-      </Alert>
+      <Alert variation="success">This Alert has a large icon</Alert>
     </>
   );
 };

docs/src/pages/components/alert/examples/AlertStylePropsExample.tsx

@@ -4,16 +4,14 @@ export const AlertStylePropsExample = () => {
   const { tokens } = useTheme();
 
   return (
-    <>
-      <Alert
-        backgroundColor={tokens.colors.brand.primary[10]}
-        color={tokens.colors.font.primary}
-        fontWeight="bold"
-        border={`${tokens.borderWidths.large} solid ${tokens.colors.brand.primary[80]}`}
-        borderRadius="10px"
-      >
-        Passing props directly
-      </Alert>
-    </>
+    <Alert
+      backgroundColor={tokens.colors.brand.primary[10]}
+      color={tokens.colors.font.primary}
+      fontWeight="bold"
+      border={`${tokens.borderWidths.large} solid ${tokens.colors.brand.primary[80]}`}
+      borderRadius="10px"
+    >
+      Passing props directly
+    </Alert>
   );
 };

docs/src/pages/components/alert/useAlertProps.tsx

@@ -1,25 +1,26 @@
 import { AlertProps } from '@aws-amplify/ui-react';
-import { useState } from 'react';
+import * as React from 'react';
+
 import { AlertPropControlsProps } from './AlertPropControls';
 
 interface UseAlertProps {
   (initialValues: AlertProps & { body: string }): AlertPropControlsProps;
 }
 
 export const useAlertProps: UseAlertProps = (initialValues) => {
-  const [variation, setVariation] = useState<AlertProps['variation']>(
+  const [variation, setVariation] = React.useState<AlertProps['variation']>(
     initialValues.variation
   );
-  const [isDismissible, setIsDismissible] = useState<
+  const [isDismissible, setIsDismissible] = React.useState<
     AlertProps['isDismissible']
   >(initialValues.isDismissible);
-  const [hasIcon, setHasIcon] = useState<AlertProps['hasIcon']>(
+  const [hasIcon, setHasIcon] = React.useState<AlertProps['hasIcon']>(
     initialValues.hasIcon
   );
-  const [heading, setHeading] = useState<AlertProps['heading']>(
+  const [heading, setHeading] = React.useState<AlertProps['heading']>(
     initialValues.heading
   );
-  const [body, setBody] = useState<string>(initialValues.body);
+  const [body, setBody] = React.useState<string>(initialValues.body);
 
   return {
     variation,

docs/src/components/StepperFieldPropControls.tsx → docs/src/pages/components/stepperfield/StepperFieldPropControls.tsx

@@ -2,13 +2,12 @@ import * as React from 'react';
 
 import {
   CheckboxField,
+  Flex,
   StepperFieldProps,
   SelectField,
   TextField,
 } from '@aws-amplify/ui-react';
 
-import { DemoBox } from './DemoBox';
-
 export interface StepperFieldPropControlsProps extends StepperFieldProps {
   setVariation: (
     value: React.SetStateAction<StepperFieldProps['variation']>
@@ -40,7 +39,7 @@ export const StepperFieldPropControls: React.FC<StepperFieldPropControlsProps> =
     variation,
     setVariation,
   }) => (
-    <DemoBox primitiveName="StepperField">
+    <Flex direction="column">
       <TextField
         label="label"
         value={label as string}
@@ -100,5 +99,5 @@ export const StepperFieldPropControls: React.FC<StepperFieldPropControlsProps> =
         onChange={(event) => setLabelHidden(event.target.checked)}
         label="labelHidden"
       />
-    </DemoBox>
+    </Flex>
   );

docs/src/pages/components/stepperfield/demo.tsx

@@ -1,10 +1,31 @@
 import * as React from 'react';
 
-import { Flex, StepperField } from '@aws-amplify/ui-react';
+import { StepperField } from '@aws-amplify/ui-react';
 
-import { StepperFieldPropControls } from '@/components/StepperFieldPropControls';
-import { useStepperFieldProps } from '@/components/useStepperFieldProps';
-import { Example } from '@/components/Example';
+import { Demo } from '@/components/Demo';
+import {
+  StepperFieldPropControls,
+  StepperFieldPropControlsProps,
+} from './StepperFieldPropControls';
+import { useStepperFieldProps } from './useStepperFieldProps';
+
+const propsToCode = (props: StepperFieldPropControlsProps) => {
+  return (
+    `<StepperField
+  max={${props.max}}
+  min={${props.min}}
+  step={${props.step}}` +
+    (props.variation
+      ? `\n  variation=${JSON.stringify(props.variation)}`
+      : '') +
+    (props.size ? `\n  size="${props.size}"` : '') +
+    `
+  label="${props.label}"` +
+    (props.labelHidden ? `\n  labelHidden=${props.labelHidden}` : '') +
+    `
+/>`
+  );
+};
 
 export const StepperFieldDemo = () => {
   const stepperFieldProps = useStepperFieldProps({
@@ -16,20 +37,20 @@ export const StepperFieldDemo = () => {
   });
 
   return (
-    <Flex direction="column">
-      <StepperFieldPropControls {...stepperFieldProps} />
-      <Example>
-        <StepperField
-          label={stepperFieldProps.label}
-          defaultValue={stepperFieldProps.defaultValue}
-          max={stepperFieldProps.max}
-          min={stepperFieldProps.min}
-          size={stepperFieldProps.size}
-          variation={stepperFieldProps.variation}
-          step={stepperFieldProps.step}
-          labelHidden={stepperFieldProps.labelHidden}
-        />
-      </Example>
-    </Flex>
+    <Demo
+      code={propsToCode(stepperFieldProps)}
+      propControls={<StepperFieldPropControls {...stepperFieldProps} />}
+    >
+      <StepperField
+        label={stepperFieldProps.label}
+        defaultValue={stepperFieldProps.defaultValue}
+        max={stepperFieldProps.max}
+        min={stepperFieldProps.min}
+        size={stepperFieldProps.size}
+        variation={stepperFieldProps.variation}
+        step={stepperFieldProps.step}
+        labelHidden={stepperFieldProps.labelHidden}
+      />
+    </Demo>
   );
 };

docs/src/pages/components/stepperfield/examples.tsx → docs/src/pages/components/stepperfield/examples/ControlledStepperFieldExample.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import { StepperField } from '@aws-amplify/ui-react';
 
-export const ControlledStepperField = () => {
+export const ControlledStepperFieldExample = () => {
   const [value, setValue] = React.useState(0);
 
   return (

docs/src/pages/components/stepperfield/examples/DefaultStepperFieldExample.tsx

@@ -0,0 +1,14 @@
+import { StepperField } from '@aws-amplify/ui-react';
+
+export const DefaultStepperFieldExample = () => {
+  return (
+    <StepperField
+      label="Stepper"
+      defaultValue={0}
+      min={0}
+      max={10}
+      step={1}
+      labelHidden
+    />
+  );
+};

docs/src/pages/components/stepperfield/examples/DisabledStepperFieldExample.tsx

@@ -0,0 +1,15 @@
+import { StepperField } from '@aws-amplify/ui-react';
+
+export const DisabledStepperFieldExample = () => {
+  return (
+    <StepperField
+      label="Stepper"
+      defaultValue={0}
+      min={0}
+      max={10}
+      step={1}
+      labelHidden
+      isDisabled
+    />
+  );
+};

docs/src/pages/components/stepperfield/examples/ReadOnlyStepperFieldExample.tsx

@@ -0,0 +1,15 @@
+import { StepperField } from '@aws-amplify/ui-react';
+
+export const ReadOnlyStepperFieldExample = () => {
+  return (
+    <StepperField
+      label="Stepper"
+      defaultValue={5}
+      min={0}
+      max={10}
+      step={1}
+      labelHidden
+      isReadOnly
+    />
+  );
+};

docs/src/pages/components/stepperfield/examples/StepperFieldAccessibilityExample.tsx

@@ -0,0 +1,7 @@
+import { StepperField } from '@aws-amplify/ui-react';
+
+export const StepperFieldAccessibilityExample = () => {
+  return (
+    <StepperField label="Stepper" defaultValue={0} min={0} max={10} step={1} />
+  );
+};

docs/src/pages/components/stepperfield/examples/StepperFieldSizeExample.tsx

@@ -0,0 +1,34 @@
+import { StepperField } from '@aws-amplify/ui-react';
+
+export const StepperFieldSizeExample = () => {
+  return (
+    <>
+      <StepperField
+        label="Stepper"
+        defaultValue={0}
+        min={0}
+        max={10}
+        step={1}
+        size="small"
+        labelHidden
+      />
+      <StepperField
+        label="Stepper"
+        defaultValue={0}
+        min={0}
+        max={10}
+        step={1}
+        labelHidden
+      />
+      <StepperField
+        label="Stepper"
+        defaultValue={0}
+        min={0}
+        max={10}
+        step={1}
+        size="large"
+        labelHidden
+      />
+    </>
+  );
+};

docs/src/pages/components/stepperfield/examples/StepperFieldStylePropsExample.tsx

@@ -0,0 +1,18 @@
+import { StepperField, useTheme } from '@aws-amplify/ui-react';
+
+export const StepperFieldStylePropsExample = () => {
+  const { tokens } = useTheme();
+  return (
+    <StepperField
+      label="Stepper"
+      defaultValue={0}
+      min={0}
+      max={10}
+      step={1}
+      backgroundColor={tokens.colors.teal[60]}
+      border={`1px solid ${tokens.colors.teal[60]}`}
+      color={tokens.colors.white}
+      labelHidden
+    />
+  );
+};

docs/src/pages/components/stepperfield/examples/StepperFieldValidationErrorExample.tsx

@@ -0,0 +1,16 @@
+import { StepperField } from '@aws-amplify/ui-react';
+
+export const StepperFieldValidationErrorExample = () => {
+  return (
+    <StepperField
+      label="Stepper"
+      defaultValue={0}
+      min={0}
+      max={10}
+      step={1}
+      errorMessage="The is an error message."
+      hasError
+      labelHidden
+    />
+  );
+};

docs/src/pages/components/stepperfield/examples/index.ts

@@ -0,0 +1,8 @@
+export { ControlledStepperFieldExample } from './ControlledStepperFieldExample';
+export { DefaultStepperFieldExample } from './DefaultStepperFieldExample';
+export { DisabledStepperFieldExample } from './DisabledStepperFieldExample';
+export { ReadOnlyStepperFieldExample } from './ReadOnlyStepperFieldExample';
+export { StepperFieldAccessibilityExample } from './StepperFieldAccessibilityExample';
+export { StepperFieldSizeExample } from './StepperFieldSizeExample';
+export { StepperFieldStylePropsExample } from './StepperFieldStylePropsExample';
+export { StepperFieldValidationErrorExample } from './StepperFieldValidationErrorExample';

docs/src/pages/components/stepperfield/index.page.mdx

@@ -1,5 +1,6 @@
 ---
 title: StepperField
+description: A StepperField is a number input with buttons to increase or decrease the value.
 isPrimitive: true
 ---