add rangeInput guidence and variants

aries-site/src/examples/components/rangeinput/RangeInputDescriptionExample.js

@@ -0,0 +1,27 @@
+import React, { useState } from 'react';
+import { Box, FormField, RangeInput, Text } from 'grommet';
+
+export const RangeInputDescriptionExample = () => {
+  const [value, setValue] = useState(10);
+
+  return (
+    <FormField label="Label" help="RangeInput Description">
+      <Box
+        align="center"
+        pad={{ horizontal: '11px', vertical: '5px' }}
+        direction="row"
+        gap="medium"
+        width="large"
+      >
+        <Text weight={500}>0</Text>
+        <RangeInput
+          max={100}
+          min={0}
+          value={value}
+          onChange={event => setValue(event.target.value)}
+        />
+        <Text weight={600}>100</Text>
+      </Box>
+    </FormField>
+  );
+};

aries-site/src/examples/components/rangeinput/RangeInputExample.js

@@ -1,19 +1,27 @@
 import React, { useState } from 'react';
-import { Box, RangeInput, Text } from 'grommet';
+import { Box, FormField, RangeInput, Text } from 'grommet';
 
 export const RangeInputExample = () => {
   const [value, setValue] = useState(80);
 
   return (
-    <Box direction="row" gap="medium" width="large">
-      <Text weight={600}>0</Text>
-      <RangeInput
-        max={100}
-        min={0}
-        value={value}
-        onChange={event => setValue(event.target.value)}
-      />
-      <Text weight={600}>100</Text>
-    </Box>
+    <FormField label="Label" help="RangeInput Description">
+      <Box
+        align="center"
+        pad={{ horizontal: '11px', vertical: '5px' }}
+        direction="row"
+        gap="medium"
+        width="large"
+      >
+        <Text weight={600}>0</Text>
+        <RangeInput
+          max={100}
+          min={0}
+          value={value}
+          onChange={event => setValue(event.target.value)}
+        />
+        <Text weight={600}>100</Text>
+      </Box>
+    </FormField>
   );
 };

aries-site/src/examples/components/rangeinput/RangeInputInFormExample.js

@@ -0,0 +1,140 @@
+import React, { useContext } from 'react';
+import {
+  Box,
+  Button,
+  CheckBoxGroup,
+  DateInput,
+  Form,
+  FormField,
+  Header,
+  Heading,
+  Text,
+  TextInput,
+  ResponsiveContext,
+  Select,
+  RangeInput,
+} from 'grommet';
+
+export const RangeInputInFormExample = () => {
+  const [guests, setGuests] = React.useState();
+  const [price, setPrice] = React.useState('200');
+  const [dates, setDates] = React.useState([
+    '2020-07-31T15:27:42.920Z',
+    '2020-08-07T15:27:42.920Z',
+  ]);
+  const size = useContext(ResponsiveContext);
+
+  const onChange = event => {
+    const nextDates = event.value;
+    setDates(nextDates);
+  };
+  // eslint-disable-next-line no-unused-vars
+  const onSubmit = ({ value, touched }) => {
+    // Your submission logic here
+  };
+
+  return (
+    <Box gap="medium" width="medium">
+      <Header
+        direction="column"
+        align="start"
+        gap="xxsmall"
+        pad={{ horizontal: 'xxsmall' }}
+      >
+        {/* Use semantically correct heading level and adjust size as 
+        needed. In this instance, this example is presented within an 
+        HTML section element and this is the first heading within the 
+        section, therefor h2 is the semantically correct heading. For 
+        additional detail, see https://design-system.hpe.design/foundation/typography#semantic-usage-of-heading-levels). */}
+        <Heading level={2} margin="none">
+          Book a Hotel
+        </Heading>
+      </Header>
+      <Box
+        // Padding used to prevent focus from being cutoff
+        pad={{ horizontal: 'xxsmall' }}
+      >
+        <Form
+          validate="blur"
+          messages={{
+            required: 'This is a required field.',
+          }}
+          onSubmit={({ value, touched }) => onSubmit({ value, touched })}
+        >
+          <FormField label="Dates" htmlFor="date-hotel" name="date">
+            <DateInput
+              value={dates}
+              name="dateinput-range"
+              id="dateinput-range"
+              format="mm/dd/yyyy-mm/dd/yyyy"
+              onChange={onChange}
+            />
+          </FormField>
+          <FormField
+            required
+            label="Location"
+            htmlFor="location"
+            name="location"
+          >
+            <TextInput
+              placeholder="Los Angeles"
+              id="location"
+              name="location"
+            />
+          </FormField>
+          <FormField
+            label="Guests"
+            htmlFor="guests-hotel"
+            name="guests"
+            required
+          >
+            <Select
+              options={['1', '2', '3', '4', '5']}
+              value={guests}
+              onChange={({ option }) => setGuests(option)}
+              id="guests"
+              name="guests"
+            />
+          </FormField>
+          <FormField htmlFor="price" name="price" label="Price">
+            <Box
+              align="center"
+              pad={{ horizontal: '11px', vertical: '5px' }}
+              direction="row"
+              gap="medium"
+              width="large"
+            >
+              <Text weight={600}>1</Text>
+              <RangeInput
+                max={500}
+                min={1}
+                value={price}
+                onChange={event => setPrice(event.target.value)}
+              />
+              <Text weight={600}>500</Text>
+            </Box>
+          </FormField>
+          <FormField label="Offers" name="hotel-offers" htmlFor="hotel-offers">
+            <CheckBoxGroup
+              options={[
+                'Free Cancelations',
+                'WIFI',
+                'Free Breakfast',
+                'Pool',
+                'Jacuzzi',
+              ]}
+              name="checkbox-offers"
+              id="offers-checkboxgroup"
+            />
+          </FormField>
+          <Box
+            align={size !== 'small' ? 'start' : undefined}
+            margin={{ top: 'medium', bottom: 'small' }}
+          >
+            <Button label="Book" primary type="submit" />
+          </Box>
+        </Form>
+      </Box>
+    </Box>
+  );
+};

aries-site/src/examples/components/rangeinput/index.js

@@ -1 +1,3 @@
 export * from './RangeInputExample';
+export * from './RangeInputDescriptionExample';
+export * from './RangeInputInFormExample';

aries-site/src/pages/components/rangeinput.mdx

@@ -1,17 +1,56 @@
 import { Example } from '../../layouts';
-import { RangeInputExample } from '../../examples';
+import {
+  RangeInputExample,
+  RangeInputInFormExample,
+  RangeInputDescriptionExample,
+} from '../../examples';
 
 <Example
   code="https://raw.githubusercontent.com/grommet/hpe-design-system/master/aries-site/src/examples/components/rangeinput/RangeInputExample.js"
   docs="https://v2.grommet.io/rangeinput?theme=hpe#props"
-  details={[
-    `The RangeInput component is a slider control that 
-    provides a handle the user can move to make changes 
-    to values. It is important that the slider provides 
-    a value displayed to communicate with the user. This
-    help ensure conficence in the use of the control.`,
-  ]}
   figma="https://www.figma.com/file/BqCjvjc0rECQ4Ln2QhyjNi/HPE-Range-Input-Component?node-id=1%3A11"
 >
   <RangeInputExample />
 </Example>
+
+## Guidance
+
+RangeInput allows a user to easily select a value lying between a minimum and maximum range.
+The value is selected by sliding a thumb control across the track.
+
+- The RangeInput should be clear within the label for the user to know what value they are choosing.
+- Each end of the range should be labeled by the minimum and maximum values so the user is aware of the range's possible values.
+- Do not use ranges that are to large i.e 1-10000 or ranges that are very small i.e 1-3
+
+### Usage
+
+RangeInput can be used when a user needs to choose a value within a fixed range of values.
+
+Changes made to RangeInput are immediate which allows the user to make adjustments when
+selecting their value.
+
+A RangeInput can be used when the value is less important to the user than the visual of seeing the difference between the min and the max.
+
+### Accessibility
+
+RangeInput should be used inside of a FormField to ensure that a label is properly associated with the input.
+
+If a RangeInput is used outside of the context of a FormField, it is important to meet accessibility requirements in an alternate way. There should always be clear visual indication, either by text or icon, that describes the purpose of the RangeInput.
+
+## Variants
+
+### RangeInput with Description
+
+Adding a description provides the user additional information about the context or purpose of the RangeInput.
+
+<Example code="https://raw.githubusercontent.com/grommet/hpe-design-system/master/aries-site/src/examples/components/rangeinput/RangeInputDescriptionExample">
+  <RangeInputDescriptionExample />
+</Example>
+
+### RangeInput within a form
+
+RangeInput can be used within a form and should not be something that is required.
+
+<Example code="https://raw.githubusercontent.com/grommet/hpe-design-system/master/aries-site/src/examples/components/rangeinput/RangeInputInFormExample">
+  <RangeInputInFormExample />
+</Example>

aries-site/src/themes/aries.js

@@ -2,6 +2,23 @@ import { hpe } from 'grommet-theme-hpe';
 import { deepMerge } from 'grommet/utils';
 
 export const aries = deepMerge(hpe, {
+  rangeInput: {
+    thumb: {
+      color: 'green',
+      extend: () => `
+        border: 1px solid ${undefined};
+        box-shadow: ${undefined};
+      `,
+    },
+    track: {
+      lower: {
+        color: 'green',
+      },
+      upper: {
+        color: 'border',
+      },
+    },
+  },
   defaultMode: 'dark',
   // To be stripped out once theme changes are made in grommet-theme-hpe
   // keeping file for use as playground for future theme adjusments that need