Merge release/2.2.3 into main branch (#1058)

* upgrade css-loader (#1050) * Bump postcss from 8.4.29 to 8.4.31 (#1051) * Fixes Bootstrap classname collision in Tabs component for Rails Server (#1049) * Fixes prop name in Tabs (#1052) Prevents tab class name prop from getting overridden. * add trailingText to Input component (#1056) * Allow drawer to be expanded by default (#1057)
user-interviews · Nov 8, 2023 · 487a9dc · 487a9dc
1 parent b0a915e
commit 487a9dc
Show file tree

Hide file tree

Showing 12 changed files with 261 additions and 84 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@user-interviews/ui-design-system",
-  "version": "2.2.2",
+  "version": "2.2.3",
   "dependencies": {
     "@tiptap/core": "^2.0.3",
     "@tiptap/extension-bold": "^2.0.3",
@@ -122,7 +122,7 @@
     "bootstrap": "5.1",
     "chromatic": "^6.7.0",
     "classnames": "^2.2.5",
-    "css-loader": "^4.3.0",
+    "css-loader": "^6.8.1",
     "eslint": "^7.32.0",
     "eslint-config-airbnb": "^18.0.1",
     "eslint-config-react-app": "^5.2.1",

diff --git a/spec/__snapshots__/Storyshots.test.js.snap b/spec/__snapshots__/Storyshots.test.js.snap
@@ -6033,6 +6033,113 @@ Array [
 ]
 `;
 
+exports[`Storyshots Components/Drawer Default Expanded 1`] = `
+Array [
+  <button
+    className="Button btn btn-primary"
+    disabled={false}
+    onClick={[Function]}
+    type="button"
+  >
+    Open
+  </button>,
+  <div
+    className="DrawerBackgroundOverlay"
+    onClick={[Function]}
+    onKeyDown={[Function]}
+    role="presentation"
+  />,
+  <div
+    className="Drawer Drawer--right Drawer--sm Drawer--expanded Drawer--behind-nav"
+  >
+    <div
+      className="Drawer__header Drawer__header--bordered"
+    >
+      <div
+        className="Drawer__title"
+      >
+        Title goes here
+      </div>
+      <button
+        aria-label="Close"
+        className="Drawer__header-action"
+        onClick={[Function]}
+        type="button"
+      >
+        <svg
+          aria-hidden="true"
+          className="svg-inline--fa fa-xmark "
+          data-icon="xmark"
+          data-prefix="fas"
+          focusable="false"
+          role="img"
+          style={Object {}}
+          viewBox="0 0 384 512"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"
+            fill="currentColor"
+            style={Object {}}
+          />
+        </svg>
+      </button>
+    </div>
+    <div
+      className="Drawer__body"
+    >
+      <p>
+        Proin elementum vitae nibh nec tincidunt. Donec vel placerat mi, vitae malesuada odio. Sed varius libero sed erat faucibus ultrices. Suspendisse potenti. Mauris sit amet sollicitudin urna. Donec porttitor, est quis aliquet condimentum, nisi felis porta odio, eu luctus dui ex id nisi. Curabitur ultrices enim in dolor laoreet porta. Proin vehicula at nisl a maximus. Sed lorem enim, elementum in arcu eu, lacinia consequat arcu. Pellentesque non nibh viverra, imperdiet purus at, finibus turpis. Sed mattis erat a risus dignissim, eu ultrices est rhoncus. Fusce nec feugiat tortor. Quisque tincidunt nulla urna, ut egestas massa congue a. Quisque metus felis, auctor sit amet posuere eu, aliquam blandit libero. Mauris sodales, velit sit amet egestas aliquet, ipsum arcu porta lacus, vitae mattis felis elit in metus. Nulla ligula ligula, laoreet in dictum sit amet, pretium ac est.
+      </p>
+    </div>
+    <div
+      className="DrawerFooter"
+    >
+      <div />
+      <div
+        className="DrawerFooter__actions"
+      >
+        <button
+          aria-disabled={false}
+          className="Button btn btn-transparent"
+          disabled={false}
+          onClick={[Function]}
+          type="button"
+        >
+          Cancel
+        </button>
+        <button
+          aria-disabled={false}
+          className="Button btn btn-primary"
+          disabled={false}
+          onClick={[Function]}
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            className="svg-inline--fa fa-envelope icon-left"
+            data-icon="envelope"
+            data-prefix="fas"
+            focusable="false"
+            role="img"
+            style={Object {}}
+            viewBox="0 0 512 512"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"
+              fill="currentColor"
+              style={Object {}}
+            />
+          </svg>
+          Send
+        </button>
+      </div>
+    </div>
+  </div>,
+]
+`;
+
 exports[`Storyshots Components/Drawer Empty 1`] = `
 Array [
   <button
@@ -8250,6 +8357,39 @@ exports[`Storyshots Components/Form Elements/Form Group With Trailing Icon And B
 </div>
 `;
 
+exports[`Storyshots Components/Form Elements/Form Group With Trailing Text 1`] = `
+<div
+  className="FormGroup"
+  id="with-trailing-text"
+>
+  <label
+    className="InputLabel"
+    htmlFor="trailing-text-input"
+  >
+    Form Group with trailing text
+  </label>
+  <div
+    className="Input input-group"
+  >
+    <input
+      className="Input form-control"
+      disabled={false}
+      id="trailing-text-input"
+      name="default"
+      onChange={[Function]}
+      placeholder="Session length"
+      type="number"
+      value=""
+    />
+    <span
+      className="input-trailing-text input-trailing-text--input-type-number"
+    >
+      min
+    </span>
+  </div>
+</div>
+`;
+
 exports[`Storyshots Components/Form Elements/RadioButtonGroup Bordered Column Full Width 1`] = `
 <fieldset
   className="FormGroup"

diff --git a/src/Drawer/Drawer.jsx b/src/Drawer/Drawer.jsx
@@ -25,14 +25,15 @@ const Drawer = ({
   behindNav,
   children,
   className,
+  defaultExpanded,
   expandable,
   hasBackgroundOverlay,
   visible,
   orientation,
   size,
   onRequestClose,
 }) => {
-  const [expanded, setExpanded] = useState(false);
+  const [expanded, setExpanded] = useState(defaultExpanded);
 
   const handleExpand = () => setExpanded(!expanded);
 
@@ -86,6 +87,7 @@ Drawer.propTypes = {
   behindNav: propTypes.bool,
   children: propTypes.node,
   className: propTypes.string,
+  defaultExpanded: propTypes.bool,
   expandable: propTypes.bool,
   hasBackgroundOverlay: propTypes.bool,
   orientation: propTypes.oneOf([ORIENTATION_LEFT, ORIENTATION_RIGHT]),
@@ -98,6 +100,7 @@ Drawer.defaultProps = {
   behindNav: true,
   children: undefined,
   className: null,
+  defaultExpanded: false,
   expandable: false,
   hasBackgroundOverlay: true,
   orientation: ORIENTATION_RIGHT,

diff --git a/src/Drawer/Drawer.mdx b/src/Drawer/Drawer.mdx
@@ -15,7 +15,7 @@ import * as ComponentStories from './Drawer.stories';
 
 <Canvas of={ComponentStories.Default} />
 
-### When to use 
+### When to use
 When we want to focus the user’s attention on an interactive interface or a large amount of information
 
 ### When to not use
@@ -50,7 +50,12 @@ Pass `orientation="left"` to override the default behavior of sliding in from th
 
 ### Expandable
 
-Setting `expandable` allows the drawer to expand to the full size of the viewport
+Setting `expandable` allows the drawer to expand to the full size of the viewport when the expand button is clicked.
+
+### Default Expanded
+
+Setting `defaultExpanded` allows the drawer to expand the full size of the viewport by default. This can be used in conjunction with `expandable.` For example if
+you want the drawer to be the full width of the viewport but you want to disable the ability to collapse it, you can set `expandable=false` and `defaultExpanded=true`.
 
 ### Additional Actions
 

diff --git a/src/Drawer/Drawer.stories.jsx b/src/Drawer/Drawer.stories.jsx
@@ -37,6 +37,7 @@ export const Default = () => {
       <Button onClick={toggleVisible}>Open</Button>
       <Drawer
         behindNav={(boolean('behindNav', true))}
+        defaultExpanded={boolean('defaultExpanded', false)}
         expandable={boolean('expandable', false)}
         hasBackgroundOverlay={boolean('hasBackgroundOverlay', true)}
         orientation={select('orientation', ['left', 'right'], 'right')}
@@ -89,6 +90,7 @@ export const Orientation = () => {
       <Button onClick={toggleVisible}>Open</Button>
       <Drawer
         behindNav={(boolean('behindNav', true))}
+        defaultExpanded={boolean('defaultExpanded', false)}
         expandable={boolean('expandable', false)}
         hasBackgroundOverlay={boolean('hasBackgroundOverlay', true)}
         orientation={select('orientation', ['left', 'right'], 'left')}
@@ -141,6 +143,7 @@ export const Expandable = () => {
       <Button onClick={toggleVisible}>Open</Button>
       <Drawer
         behindNav={(boolean('behindNav', true))}
+        defaultExpanded={boolean('defaultExpanded', false)}
         expandable={boolean('expandable', true)}
         hasBackgroundOverlay={boolean('hasBackgroundOverlay', true)}
         orientation={select('orientation', ['left', 'right'], 'right')}
@@ -183,6 +186,59 @@ export const Expandable = () => {
   );
 };
 
+export const DefaultExpanded = () => {
+  const [isVisible, setVisible] = useState(false);
+
+  const toggleVisible = () => setVisible(!isVisible);
+
+  return (
+    <>
+      <Button onClick={toggleVisible}>Open</Button>
+      <Drawer
+        behindNav={(boolean('behindNav', true))}
+        defaultExpanded={boolean('defaultExpanded', true)}
+        expandable={boolean('expandable', false)}
+        hasBackgroundOverlay={boolean('hasBackgroundOverlay', true)}
+        orientation={select('orientation', ['left', 'right'], 'right')}
+        size={select('size', DrawerSizes, 'sm')}
+        visible={isVisible}
+        onRequestClose={toggleVisible}
+      >
+        <DrawerHeader
+          bordered={boolean('bordered', true)}
+          title="Title goes here"
+          onRequestClose={toggleVisible}
+        />
+        <DrawerBody>
+          <p>
+            Proin elementum vitae nibh nec tincidunt. Donec vel placerat mi,
+            vitae malesuada odio. Sed varius libero sed erat faucibus ultrices.
+            Suspendisse potenti. Mauris sit amet sollicitudin urna. Donec
+            porttitor, est quis aliquet condimentum, nisi felis porta odio, eu
+            luctus dui ex id nisi. Curabitur ultrices enim in dolor laoreet
+            porta. Proin vehicula at nisl a maximus. Sed lorem enim, elementum in
+            arcu eu, lacinia consequat arcu. Pellentesque non nibh viverra,
+            imperdiet purus at, finibus turpis. Sed mattis erat a risus
+            dignissim, eu ultrices est rhoncus. Fusce nec feugiat tortor. Quisque
+            tincidunt nulla urna, ut egestas massa congue a. Quisque metus felis,
+            auctor sit amet posuere eu, aliquam blandit libero. Mauris sodales,
+            velit sit amet egestas aliquet, ipsum arcu porta lacus, vitae mattis
+            felis elit in metus. Nulla ligula ligula, laoreet in dictum sit amet,
+            pretium ac est.
+          </p>
+        </DrawerBody>
+        <DrawerFooter
+          primaryActionIcon={faEnvelope}
+          primaryActionText="Send"
+          secondaryActionText="Cancel"
+          onPrimaryAction={() => null}
+          onSecondaryAction={toggleVisible}
+        />
+      </Drawer>
+    </>
+  );
+};
+
 export const AdditionalActions = () => {
   const [isVisible, setVisible] = useState(false);
 
@@ -193,6 +249,7 @@ export const AdditionalActions = () => {
       <Button onClick={toggleVisible}>Open</Button>
       <Drawer
         behindNav={(boolean('behindNav', true))}
+        defaultExpanded={boolean('defaultExpanded', false)}
         expandable={boolean('expandable', true)}
         hasBackgroundOverlay={boolean('hasBackgroundOverlay', false)}
         orientation={select('orientation', ['left', 'right'], 'right')}

diff --git a/src/FormGroup/FormGroup.mdx b/src/FormGroup/FormGroup.mdx
@@ -54,6 +54,10 @@ helpful if they do!
 
 <Canvas of={ComponentStories.WithLeadingIcon} />
 
+### Trailing Text
+
+<Canvas of={ComponentStories.WithTrailingText} />
+
 ### Trailing Icon
 
 <Canvas of={ComponentStories.WithTrailingIcon} />

diff --git a/src/FormGroup/FormGroup.stories.jsx b/src/FormGroup/FormGroup.stories.jsx
@@ -90,6 +90,16 @@ export const WithLeadingIcon = () => (
   </FormGroup>
 );
 
+export const WithTrailingText = () => (
+  <FormGroup
+    id="with-trailing-text"
+    label="Form Group with trailing text"
+    labelHtmlFor="trailing-text-input"
+  >
+    <InputComponent id="trailing-text-input" name="default" placeholder="Session length" trailingText="min" type="number" />
+  </FormGroup>
+);
+
 export const WithTrailingIcon = () => (
   <FormGroup
     helperText="with trailing icon"

diff --git a/src/Input/Input.jsx b/src/Input/Input.jsx
@@ -16,6 +16,7 @@ const Input = React.forwardRef((props, ref) => {
     trailingIconLabel,
     trailingIconOnClick,
     trailingIconOnClickSubmit,
+    trailingText,
     type,
     value,
     onChange,
@@ -47,6 +48,11 @@ const Input = React.forwardRef((props, ref) => {
         onChange={onChange}
         {...rest}
       />
+      {trailingText && (
+        <span className={`input-trailing-text ${type === 'number' ? 'input-trailing-text--input-type-number' : ''}`}>
+          {trailingText}
+        </span>
+      )}
       {(trailingIcon && trailingIconOnClick) && (
         <button
           aria-label={trailingIconLabel}
@@ -78,6 +84,7 @@ Input.propTypes = {
   trailingIconLabel: PropTypes.string,
   trailingIconOnClick: PropTypes.func,
   trailingIconOnClickSubmit: PropTypes.bool,
+  trailingText: PropTypes.string,
   type: PropTypes.string,
   value: PropTypes.string,
   onChange: PropTypes.func,
@@ -91,6 +98,7 @@ Input.defaultProps = {
   trailingIconLabel: '',
   trailingIconOnClick: undefined,
   trailingIconOnClickSubmit: false,
+  trailingText: undefined,
   type: 'text',
   value: undefined,
   onChange: undefined,