@openedx/paragon 22.0.0-alpha.24 → 22.1.0

package/src/Tooltip/index.scss

@@ -1,163 +1,37 @@
-// Base class
-.tooltip {
-  position: absolute;
-  z-index: var(--pgn-elevation-tooltip-zindex);
-  display: block;
-  margin: var(--pgn-spacing-tooltip-margin);
-  // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
-  // So reset our font and text properties to avoid inheriting weird values.
-  @include reset-text();
-  @include font-size(var(--pgn-typography-tooltip-font-size));
-  // Allow breaking very long words so they don't overflow the tooltip's bounds
-  word-wrap: break-word;
-  opacity: 0;
-  filter: var(--pgn-elevation-tooltip-box-shadow);
-
-  &.show {
-    opacity: var(--pgn-other-tooltip-opacity);
-  }
-
-  .arrow {
-    position: absolute;
-    display: block;
-    width: var(--pgn-size-tooltip-arrow-width);
-    height: var(--pgn-size-tooltip-arrow-height);
-
-    &::before {
-      position: absolute;
-      content: "";
-      border-color: transparent;
-      border-style: solid;
-    }
-  }
-}
-
-.bs-tooltip-top {
-  padding: var(--pgn-size-tooltip-arrow-height) 0;
-
-  .arrow {
-    bottom: 0;
-
-    &::before {
-      top: 0;
-      border-width: var(--pgn-size-tooltip-arrow-height) calc(var(--pgn-size-tooltip-arrow-width) * .5) 0;
-      border-top-color: var(--pgn-color-tooltip-arrow-base);
-    }
-  }
-}
-
-.bs-tooltip-right {
-  padding: 0 var(--pgn-size-tooltip-arrow-height);
-
-  .arrow {
-    left: 0;
-    width: var(--pgn-size-tooltip-arrow-height);
-    height: var(--pgn-size-tooltip-arrow-width);
-
-    &::before {
-      right: 0;
-      border-width:
-        calc(var(--pgn-size-tooltip-arrow-width) * .5)
-        var(--pgn-size-tooltip-arrow-height)
-        calc(var(--pgn-size-tooltip-arrow-width) * .5) 0;
-      border-right-color: var(--pgn-color-tooltip-arrow-base);
-    }
-  }
-}
-
-.bs-tooltip-bottom {
-  padding: var(--pgn-size-tooltip-arrow-height) 0;
+@import "variables";
+@import "~bootstrap/scss/tooltip";
 
-  .arrow {
-    top: 0;
-
-    &::before {
-      bottom: 0;
-      border-width: 0 calc(var(--pgn-size-tooltip-arrow-width) * .5) var(--pgn-size-tooltip-arrow-height);
-      border-bottom-color: var(--pgn-color-tooltip-arrow-base);
-    }
-  }
-}
-
-.bs-tooltip-left {
-  padding: 0 var(--pgn-size-tooltip-arrow-height);
-
-  .arrow {
-    right: 0;
-    width: var(--pgn-size-tooltip-arrow-height);
-    height: var(--pgn-size-tooltip-arrow-width);
-
-    &::before {
-      left: 0;
-      border-width:
-        calc(var(--pgn-size-tooltip-arrow-width) * .5) 0
-        calc(var(--pgn-size-tooltip-arrow-width) * .5)
-        var(--pgn-size-tooltip-arrow-height);
-      border-left-color: var(--pgn-color-tooltip-arrow-base);
-    }
-  }
-}
-
-.bs-tooltip-auto {
-  &[x-placement^="top"] {
-    // stylelint-disable-next-line scss/at-extend-no-missing-placeholder
-    @extend .bs-tooltip-top;
-  }
-
-  &[x-placement^="right"] {
-    // stylelint-disable-next-line scss/at-extend-no-missing-placeholder
-    @extend .bs-tooltip-right;
-  }
-
-  &[x-placement^="bottom"] {
-    // stylelint-disable-next-line scss/at-extend-no-missing-placeholder
-    @extend .bs-tooltip-bottom;
-  }
-
-  &[x-placement^="left"] {
-    // stylelint-disable-next-line scss/at-extend-no-missing-placeholder
-    @extend .bs-tooltip-left;
-  }
-}
-
-// Wrapper for the tooltip content
-.tooltip-inner {
-  max-width: var(--pgn-size-tooltip-max-width);
-  padding: var(--pgn-spacing-tooltip-padding-y) var(--pgn-spacing-tooltip-padding-x);
-  color: var(--pgn-color-tooltip-text);
-  text-align: center;
-  background-color: var(--pgn-color-tooltip-bg-base);
-
-  @include border-radius(var(--pgn-size-tooltip-border-radius));
+.tooltip {
+  filter: $tooltip-box-shadow;
 }
 
 .tooltip-light {
   .tooltip-inner {
-    color: var(--pgn-color-tooltip-light);
-    background-color: var(--pgn-color-tooltip-bg-light);
+    color: $tooltip-color-light;
+    background-color: $tooltip-bg-light;
   }
 
   &.bs-tooltip-top .arrow {
     &::before {
-      border-top-color: var(--pgn-color-tooltip-arrow-light);
+      border-top-color: $tooltip-arrow-color-light;
     }
   }
 
   &.bs-tooltip-right .arrow {
     &::before {
-      border-right-color: var(--pgn-color-tooltip-arrow-light);
+      border-right-color: $tooltip-arrow-color-light;
     }
   }
 
   &.bs-tooltip-bottom .arrow {
     &::before {
-      border-bottom-color: var(--pgn-color-tooltip-arrow-light);
+      border-bottom-color: $tooltip-arrow-color-light;
     }
   }
 
   &.bs-tooltip-left .arrow {
     &::before {
-      border-left-color: var(--pgn-color-tooltip-arrow-light);
+      border-left-color: $tooltip-arrow-color-light;
     }
   }
 }

package/src/TransitionReplace/README.md

@@ -25,10 +25,10 @@ TransitionReplace expects only one child at any time. Swap content inside the co
     <div>
       <TransitionReplace className="mb-3">
         {isEditing ? (
-          <Form.Group>
-            <Form.Label>First Name</Form.Label>
-            <Form.Control value="some name" />
-          </Form.Group>
+          <form key="the-form">
+            <label htmlFor="name">First Name</label>
+            <Input type="text" value="some name" />
+          </form>
         ) : (
           <div key="other">
             <h4 className="mt-0">First Name</h4>

package/src/ValidationFormGroup/README.md

@@ -0,0 +1,116 @@
+---
+title: 'ValidationFormGroup'
+type: 'component'
+components:
+- ValidationFormGroup
+categories:
+- Forms (deprecated)
+status: 'Deprecate Soon'
+designStatus: 'Done'
+devStatus: 'Done'
+notes: |
+  Replaced by Form.Group
+---
+
+Handles bootstrap style field validation and handles related aria attributes.
+
+Manages the rendering of bootstrap-style:
+
+- Help text
+- Valid and invalid feedback
+
+For children of type input, textarea, and select:
+
+- Appends bootstrap validation class names
+- Appends aria-describedby attributes (for help text and feedback)
+
+## basic usage
+
+```jsx live
+<ValidationFormGroup
+  for="firstName"
+  helpText="This is your name."
+>
+  <label htmlFor="firstName">First Name</label>
+  <Input
+    type="text"
+    id="firstName"
+    name="first-name"
+    value="Casey"
+    onChange={() => {}}
+  />
+</ValidationFormGroup>
+```
+
+## invalid message
+
+```jsx live
+<ValidationFormGroup
+  for="firstName"
+  invalid
+  invalidMessage="Wrong!"
+>
+  <label htmlFor="firstName">First Name</label>
+  <Input
+    type="text"
+    id="firstName"
+    name="first-name"
+    value="Casey"
+    onChange={() => {}}
+  />
+</ValidationFormGroup>
+```
+
+## valid message
+
+```jsx live
+<ValidationFormGroup
+  for="firstName"
+  valid
+  validMessage="What a nice name!"
+>
+  <label htmlFor="firstName">First Name</label>
+  <Input
+    type="text"
+    id="firstName"
+    name="first-name"
+    value="Casey"
+    onChange={() => {}}
+  />
+</ValidationFormGroup>
+```
+
+## with any kind of input
+
+```jsx live
+<>
+<ValidationFormGroup
+  for="weatherToday"
+  helpText="Look out the window to see."
+  valid
+  validMessage="Correct!"
+>
+  <label htmlFor="weatherToday">How is the weather today?</label>
+  <select
+    className="form-control"
+    id="weatherToday"
+    name="weather"
+    value="Sunny"
+    onChange={() => {}}
+  >
+    <option>Sunny</option>
+    <option>Cloudy</option>
+    <option>Rainy</option>
+    <option>Snowy</option>
+  </select>
+</ValidationFormGroup>
+<ValidationFormGroup
+  for="weatherTomorrow"
+  helpText="Incoming weather."
+  invalid
+  invalidMessage="No good!"
+>
+  <Form.Control type='text' value='Cloudy' />
+</ValidationFormGroup>
+</>
+```

package/src/ValidationFormGroup/ValidationFormGroup.test.jsx

@@ -0,0 +1,146 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { render, screen } from '@testing-library/react';
+
+import Input from '../Input';
+import { FormControl, Form } from '..';
+import ValidationFormGroup from '.';
+
+describe('ValidationFormGroup', () => {
+  const labelAndInputComponents = (
+    <>
+      <label htmlFor="firstName">First Name</label>
+      <input
+        className="form-control"
+        type="text"
+        id="firstName"
+        name="first-name"
+        value="Adam"
+        onChange={() => {}}
+      />
+    </>
+  );
+
+  it('renders', () => {
+    const tree = renderer.create((
+      <ValidationFormGroup
+        for="firstName"
+      >
+        {labelAndInputComponents}
+      </ValidationFormGroup>
+    )).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('renders with help text', () => {
+    const tree = renderer.create((
+      <ValidationFormGroup
+        for="firstName"
+        helpText="This is your first name."
+      >
+        {labelAndInputComponents}
+      </ValidationFormGroup>
+    )).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('renders an invalid message', () => {
+    const tree = renderer.create((
+      <ValidationFormGroup
+        for="firstName"
+        helpText="This is your first name."
+        invalid
+        invalidMessage="This is not your name."
+      >
+        {labelAndInputComponents}
+      </ValidationFormGroup>
+    )).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('renders a valid message', () => {
+    const tree = renderer.create((
+      <ValidationFormGroup
+        for="firstName"
+        helpText="This is your first name."
+        valid
+        validMessage="What a nice name."
+      >
+        {labelAndInputComponents}
+      </ValidationFormGroup>
+    )).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('renders an invalid message with a select input', () => {
+    const tree = renderer.create((
+      <ValidationFormGroup
+        for="weatherToday"
+        helpText="Look out the window to see."
+        valid
+        validMessage="Correct!"
+      >
+        <label htmlFor="weatherToday">How is the weather today?</label>
+        <select id="weatherToday" name="weather" value="Sunny" onChange={() => {}}>
+          <option>Sunny</option>
+          <option>Cloudy</option>
+          <option>Rainy</option>
+          <option>Snowy</option>
+        </select>
+      </ValidationFormGroup>
+    )).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  [
+    { Component: Input, name: 'Input' },
+    { Component: FormControl, name: 'FormControl' },
+    { Component: Form.Control, name: 'Form.Control' },
+  ].forEach(({ Component, name }) => {
+    const formControlId = 'bestForm';
+    const formControlHelp = 'So helpful';
+    const validMessage = 'Valid feedback';
+    const invalidMessage = 'Exterminate, Exterminate';
+
+    it(`renders a ${name} child with the correct aria attributes and helptext`, () => {
+      render(
+        <ValidationFormGroup
+          for={formControlId}
+          helpText={formControlHelp}
+          validMessage={validMessage}
+          valid
+        >
+          <Component id={formControlId} />
+        </ValidationFormGroup>,
+      );
+      const component = screen.getByRole('textbox');
+      expect(component.getAttribute('aria-describedby')).toBe(`${formControlId}-help-text ${formControlId}-valid-feedback`);
+      expect(screen.getByText(formControlHelp)).toBeTruthy();
+    });
+    it(`renders a ${name} child with the correct valid message`, () => {
+      render(
+        <ValidationFormGroup
+          for={formControlId}
+          helpText={formControlHelp}
+          validMessage={validMessage}
+          valid
+        >
+          <Component id={formControlId} />
+        </ValidationFormGroup>,
+      );
+      expect(screen.getByText(validMessage)).toBeTruthy();
+    });
+    it(`renders a ${name} child with the correct invalid message`, () => {
+      render(
+        <ValidationFormGroup
+          for={formControlId}
+          helpText={formControlHelp}
+          invalidMessage={invalidMessage}
+          invalid
+        >
+          <Component id={formControlId} />
+        </ValidationFormGroup>,
+      );
+      expect(screen.getByText(invalidMessage)).toBeTruthy();
+    });
+  });
+});

package/src/ValidationFormGroup/__snapshots__/ValidationFormGroup.test.jsx.snap

@@ -0,0 +1,161 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ValidationFormGroup renders 1`] = `
+<div
+  className="form-group"
+  data-testid="validation-form-group"
+>
+  <label
+    htmlFor="firstName"
+  >
+    First Name
+  </label>
+  <input
+    className="form-control"
+    id="firstName"
+    name="first-name"
+    onChange={[Function]}
+    type="text"
+    value="Adam"
+  />
+</div>
+`;
+
+exports[`ValidationFormGroup renders a valid message 1`] = `
+<div
+  className="form-group"
+  data-testid="validation-form-group"
+>
+  <label
+    htmlFor="firstName"
+  >
+    First Name
+  </label>
+  <input
+    className="form-control"
+    id="firstName"
+    name="first-name"
+    onChange={[Function]}
+    type="text"
+    value="Adam"
+  />
+  <small
+    className="form-text text-muted"
+    id="firstName-help-text"
+  >
+    This is your first name.
+  </small>
+  <div
+    className="valid-feedback"
+    id="firstName-valid-feedback"
+  >
+    What a nice name.
+  </div>
+</div>
+`;
+
+exports[`ValidationFormGroup renders an invalid message 1`] = `
+<div
+  className="form-group"
+  data-testid="validation-form-group"
+>
+  <label
+    htmlFor="firstName"
+  >
+    First Name
+  </label>
+  <input
+    className="form-control"
+    id="firstName"
+    name="first-name"
+    onChange={[Function]}
+    type="text"
+    value="Adam"
+  />
+  <small
+    className="form-text text-muted"
+    id="firstName-help-text"
+  >
+    This is your first name.
+  </small>
+  <strong
+    className="invalid-feedback"
+    id="firstName-invalid-feedback"
+  >
+    This is not your name.
+  </strong>
+</div>
+`;
+
+exports[`ValidationFormGroup renders an invalid message with a select input 1`] = `
+<div
+  className="form-group"
+  data-testid="validation-form-group"
+>
+  <label
+    htmlFor="weatherToday"
+  >
+    How is the weather today?
+  </label>
+  <select
+    aria-describedby="weatherToday-help-text weatherToday-valid-feedback"
+    className="is-valid"
+    id="weatherToday"
+    name="weather"
+    onChange={[Function]}
+    value="Sunny"
+  >
+    <option>
+      Sunny
+    </option>
+    <option>
+      Cloudy
+    </option>
+    <option>
+      Rainy
+    </option>
+    <option>
+      Snowy
+    </option>
+  </select>
+  <small
+    className="form-text text-muted"
+    id="weatherToday-help-text"
+  >
+    Look out the window to see.
+  </small>
+  <div
+    className="valid-feedback"
+    id="weatherToday-valid-feedback"
+  >
+    Correct!
+  </div>
+</div>
+`;
+
+exports[`ValidationFormGroup renders with help text 1`] = `
+<div
+  className="form-group"
+  data-testid="validation-form-group"
+>
+  <label
+    htmlFor="firstName"
+  >
+    First Name
+  </label>
+  <input
+    className="form-control"
+    id="firstName"
+    name="first-name"
+    onChange={[Function]}
+    type="text"
+    value="Adam"
+  />
+  <small
+    className="form-text text-muted"
+    id="firstName-help-text"
+  >
+    This is your first name.
+  </small>
+</div>
+`;