@madie/madie-design-system 1.0.0

package/components/Tabs/Tabs.stories.js

@@ -0,0 +1,120 @@
+import React, { useState } from 'react';
+import { withKnobs } from '@storybook/addon-knobs';
+
+import Tabs from './index';
+import TabPanel from './TabPanel';
+import Button from '../Button';
+
+export default {
+  title: 'Tabs',
+  component: Tabs,
+  decorators: [withKnobs],
+};
+
+export const Default = () => {
+  return (
+    <div className="qpp-u-padding--12">
+      <Tabs>
+        <TabPanel id="summary" tab="Summary" className="my-summary-class">
+          The Bill of Rights is the first ten amendments to the United States
+          Constitution.
+        </TabPanel>
+        <TabPanel id="preamble" tab="Preamble">
+          We the People of the United States, in Order to form a more perfect
+          Union, establish Justice, insure domestic Tranquility, provide for the
+          common defence, promote the general Welfare, and secure the Blessings
+          of Liberty to ourselves and our Posterity, do ordain and establish
+          this Constitution for the United States of America.
+        </TabPanel>
+        <TabPanel id="amendments" tab="Amendments">
+          <h2 className="ds-h4">Bill of Rights</h2>
+          <ol className="ds-c-list">
+            <li>Freedoms, Petitions, Assembly</li>
+            <li>Right to bear arms</li>
+            <li>Quartering of soldiers</li>
+            <li>Search and arrest</li>
+            <li>Rights in criminal cases</li>
+            <li>Right to a fair trial</li>
+            <li>Rights in civil cases</li>
+            <li>Bail, fines, punishment</li>
+            <li>Rights retained by the People</li>
+            <li>States’ rights</li>
+          </ol>
+
+          <h2 className="ds-h4">Later Amendments</h2>
+          <ol className="ds-c-list" start="11">
+            <li>Lawsuits against states</li>
+            <li>Presidential elections</li>
+            <li>Abolition of slavery</li>
+            <li>Civil rights</li>
+            <li>Black suffrage</li>
+            <li>Income taxes</li>
+            <li>Senatorial elections</li>
+            <li>Prohibition of liquor</li>
+            <li>Women’s suffrage</li>
+            <li>Terms of office</li>
+            <li>Repeal of Prohibition</li>
+            <li>Term Limits for the Presidency</li>
+            <li>Washington, D.C., suffrage</li>
+            <li>Abolition of poll taxes</li>
+            <li>Presidential succession</li>
+            <li>18-year-old suffrage</li>
+            <li>Congressional pay raises</li>
+          </ol>
+
+          <h2 className="ds-h4">Even Later Amendments</h2>
+          <ol className="ds-c-list">
+            <li>Thou must count to three</li>
+            <li>
+              Three shall be the number of the counting and the number of the
+              counting shall be three
+            </li>
+            <li>Four shalt thou not count</li>
+            <li>
+              Neither shalt thou count two, excepting that thou then proceedeth
+              to three
+            </li>
+            <li>Five is right out</li>
+          </ol>
+        </TabPanel>
+        <TabPanel id="disabled" tab="Disabled" disabled>
+          You should not see this.
+        </TabPanel>
+      </Tabs>
+    </div>
+  );
+};
+
+export const ControlledTabs = () => {
+  const [selectedId, setSelectedId] = useState('preamble');
+  return (
+    <div className="qpp-u-padding--12">
+      <Tabs selected={selectedId} onChange={(id) => setSelectedId(id)}>
+        <TabPanel id="summary" tab="Summary" className="my-summary-class">
+          The Bill of Rights is the first ten amendments to the United States
+          Constitution.
+        </TabPanel>
+        <TabPanel id="preamble" tab="Preamble">
+          We the People of the United States, in Order to form a more perfect
+          Union, establish Justice, insure domestic Tranquility, provide for the
+          common defence, promote the general Welfare, and secure the Blessings
+          of Liberty to ourselves and our Posterity, do ordain and establish
+          this Constitution for the United States of America.
+        </TabPanel>
+        <TabPanel id="amendments" tab="Amendments">
+          All of the amendments
+          <br />
+          <Button
+            className="qpp-u-margin-top--16"
+            onClick={() => setSelectedId('summary')}
+          >
+            Go to Summary
+          </Button>
+        </TabPanel>
+        <TabPanel id="disabled" tab="Disabled" disabled>
+          You should not see this.
+        </TabPanel>
+      </Tabs>
+    </div>
+  );
+};

package/components/Tabs/index.js

@@ -0,0 +1,95 @@
+import React, { useEffect, useState } from 'react'
+import PropTypes from 'prop-types'
+import MuiTabs from '@material-ui/core/Tabs'
+import TabPanel from './TabPanel'
+import LinkTab from './Tab'
+
+const isTabPanel = (child) => child?.type === TabPanel
+
+const getPanelChildren = (children) => {
+  return React.Children.toArray(children).filter(isTabPanel)
+};
+
+const Tabs = ({ children, onChange, selected, defaultSelectedId, ariaLabel }) => {
+  const [value, setValue] = useState(defaultSelectedId || selected)
+  
+  useEffect(() => {
+    if (selected) {
+      setValue(selected)
+    }
+  }, [selected])
+
+  if (!children) return null
+
+  const handleChange = (event, newValue) => {
+    if (onChange) {
+      onChange(tabList[newValue]?.id, event)
+    }
+    if (setValue) {
+      setValue(tabList[newValue]?.id)
+    }
+  }
+
+  const renderChildren = () => {
+    return React.Children.map(children, (child, index) => {
+      if (isTabPanel(child)) {
+        return React.cloneElement(child, { index, value: tabIndex })
+      }
+      return child
+    })
+  }  
+
+  const panels = getPanelChildren(children)
+  
+  const tabList = panels.map(
+    (panel) => {
+      const { id, tab, tabHref, disabled } = panel?.props || {}
+      return { tab, tabHref, disabled, id }
+    },
+  )
+
+  const foundIndex = tabList.findIndex(({ id }) => id === value)
+  
+  const tabIndex = foundIndex >= 0 ? foundIndex : 0
+
+  return (
+    <>
+      <div className="qpp-c-tabs qpp-c-tabs--mui">
+        <MuiTabs value={tabIndex} onChange={handleChange} aria-label={ariaLabel}>
+          {tabList.map(({ tab, tabHref, disabled, id }, index) => (
+            <LinkTab
+              index={index}
+              key={`link-tab-${tab}`}
+              label={tab}
+              href={tabHref}
+              disabled={disabled}
+              id={`qpp-c-tabs__item--${id}`}
+            />
+          ))}
+        </MuiTabs>
+      </div>
+      {renderChildren()}
+    </>
+  )
+}
+
+Tabs.propTypes = {
+  ariaLabel: PropTypes.string,
+  selected: PropTypes.string,
+  defaultSelectedId: PropTypes.string,
+  onChange: PropTypes.func,
+  children: PropTypes.oneOfType([
+    PropTypes.node,
+    PropTypes.array,
+  ])
+}
+
+Tabs.defaultProps = {
+  ariaLabel: 'qpp tabs',
+  selected: null,
+  defaultSelectedId: null,
+  onChange: null,
+  children: null,
+}
+
+export default Tabs

package/components/TextInput/TextInput.stories.js

@@ -0,0 +1,118 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import TextInput from './index';
+import { withKnobs } from '@storybook/addon-knobs';
+
+export default {
+  title: 'Text Input',
+  component: TextInput,
+  decorators: [withKnobs],
+};
+
+const optionalProps = {
+  'aria-label': 'example label',
+};
+
+const Wrapper = ({ children }) => (
+  <div className="qpp-u-padding--16">{children}</div>
+);
+Wrapper.propTypes = {
+  children: PropTypes.node,
+};
+
+export const InputField = () => (
+  <Wrapper>
+    <TextInput
+      style={{ width: 'auto' }}
+      id="example"
+      name="single-example"
+      value="Example value"
+      label="Input Field"
+      {...optionalProps}
+    />
+  </Wrapper>
+);
+
+export const InputFieldWithPlaceholder = () => (
+  <Wrapper>
+    <TextInput
+      id="placeholder-example"
+      name="placheholder"
+      label="Placeholder Example"
+      placeholder="Placeholder value"
+    />
+  </Wrapper>
+);
+export const DisabledInputField = () => (
+  <Wrapper>
+    <TextInput
+      disabled={true}
+      id="disabled-example"
+      name="disabled_example"
+      value="Example value"
+      label="Disabled Example"
+    />
+  </Wrapper>
+);
+
+export const FocusedInputField = () => (
+  <Wrapper>
+    <TextInput
+      id="focused-example"
+      name="focused_example"
+      value="Example value"
+      label="Focused Example"
+      className="qpp-c-text-input--focus"
+    />
+  </Wrapper>
+);
+
+export const ErrorInputField = () => (
+  <Wrapper>
+    <TextInput
+      className="qpp-u-margin-bottom--8"
+      id="error-example"
+      name="error_example"
+      value="Example value"
+      error="Error Message"
+      label="Error Example"
+    />
+  </Wrapper>
+);
+
+export const SuccessInputField = () => (
+  <Wrapper>
+    <TextInput
+      variant="success"
+      id="success-example"
+      name="success"
+      value="Example value"
+      label="Success Example"
+    />
+  </Wrapper>
+);
+
+export const InputFieldWithHint = () => (
+  <Wrapper>
+    <TextInput
+      className="qpp-u-margin-bottom--8"
+      id="hint-example"
+      name="hint"
+      value="Example value"
+      label="Hint Example"
+      hint="Hint Message"
+    />
+  </Wrapper>
+);
+
+export const BigInput = () => (
+  <Wrapper>
+    <TextInput
+      id="big-example"
+      name="hint"
+      value="Example value"
+      label="Big Example"
+      size="big"
+    />
+  </Wrapper>
+);

package/components/TextInput/index.js

@@ -0,0 +1,137 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const TextInput = ({
+  id,
+  name,
+  placeholder,
+  disabled,
+  required,
+  size,
+  className,
+  label,
+  minLength,
+  maxLength,
+  hint,
+  errorLabel,
+  error,
+  autoComplete,
+  onChange,
+  onKeyPress,
+  style,
+  dataTestId,
+  type,
+  innerRef,
+  number,
+  variant,
+  parentElement,
+  ...props
+}) => {
+  const ContainerElement = parentElement || 'span';
+  const numberProps = {
+    pattern: '[0-9]*',
+  };
+
+  const textInputClass = [
+    'qpp-c-text-input',
+    variant === 'success' && !error && 'qpp-c-text-input--success',
+    error && 'qpp-c-text-input--error',
+    size === 'big' && 'qpp-c-text-input--big',
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <ContainerElement className="qppds ds-text-input-container">
+      {label && (
+        <label className="qpp-u-margin-bottom--8" htmlFor={id}>
+          {label}
+        </label>
+      )}
+      <input
+        {...(number ? numberProps : {})}
+        style={style}
+        data-testid={dataTestId}
+        type={type}
+        className={textInputClass || ''}
+        id={id}
+        name={name}
+        placeholder={placeholder}
+        disabled={disabled}
+        minLength={minLength}
+        maxLength={maxLength}
+        required={required}
+        autoComplete={autoComplete}
+        onChange={onChange}
+        onKeyPress={onKeyPress}
+        ref={innerRef}
+        {...props}
+      />
+      {hint && <span className="qpp-hint-message">{hint}</span>}
+      {error && (
+        <span
+          aria-label={errorLabel}
+          role="alert"
+          className="qpp-error-message"
+        >
+          {error}
+        </span>
+      )}
+    </ContainerElement>
+  );
+};
+
+TextInput.propTypes = {
+  id: PropTypes.string,
+  name: PropTypes.string,
+  placeholder: PropTypes.string,
+  disabled: PropTypes.bool,
+  required: PropTypes.bool,
+  className: PropTypes.string,
+  minLength: PropTypes.string,
+  maxLength: PropTypes.string,
+  hint: PropTypes.string,
+  errorLabel: PropTypes.string,
+  error: PropTypes.string,
+  autoComplete: PropTypes.string,
+  onChange: PropTypes.func,
+  onKeyPress: PropTypes.func,
+  style: PropTypes.object,
+  dataTestId: PropTypes.string,
+  type: PropTypes.string,
+  innerRef: PropTypes.string,
+  number: PropTypes.bool,
+  variant: PropTypes.oneOf(['success']),
+  parentElement: PropTypes.string,
+  label: PropTypes.string,
+  size: PropTypes.oneOf(['big'])
+};
+
+TextInput.defaultProps = {
+  id: '',
+  name: '',
+  placeholder: null,
+  disabled: false,
+  required: false,
+  className: '',
+  minLength: '',
+  maxLength: '',
+  error: null,
+  errorLabel: null,
+  hint: null,
+  autoComplete: 'on',
+  onChange: () => null,
+  onKeyPress: () => null,
+  style: null,
+  dataTestId: '',
+  type: 'text',
+  innerRef: null,
+  number: false,
+  variant: null,
+  parentElement: 'span',
+  label: null,
+  size: null,
+};
+
+export default TextInput;

package/components/Tooltip/Tooltip.jsx

@@ -0,0 +1,88 @@
+import React, { cloneElement, useLayoutEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import positionTip, { positionTriangle } from './position';
+import { useTooltip, TooltipPopup } from '@reach/tooltip';
+import Portal from '@reach/portal';
+
+// TODO: investigate ways to allow more styling via css? the triangle
+// positioning effect issue may need to be resolved to allow for this.
+const TEXT_COLOR = '#FFF';
+const BACKGROUND_COLOR = '#333';
+
+/**
+ * Generic styled tooltip component.
+ * Corresponding styles: /styles/components/_tooltip.scss
+ *
+ * Extends implementation from @reach/tooltip:
+ * https://reacttraining.com/reach-ui/tooltip
+ */
+const Tooltip = ({ children, label, ariaLabel, DEBUG_STYLE }) => {
+  const [trigger, tooltip] = useTooltip({ DEBUG_STYLE });
+  const { isVisible, triggerRect } = tooltip;
+  const tooltipPopupRef = useRef();
+  const triangleRef = useRef();
+
+  useLayoutEffect(() => {
+    // For some reason, the forwardRef for the tooltipPopup points to an undefined
+    // dom element when we first render the portal containing the triangle. Using
+    // an effect here will ensure that the ref is available when applying styles.
+    // TODO: investigate and make issue for @reach-ui/tooltip?
+    if (isVisible && tooltipPopupRef.current && triggerRect) {
+      const tooltipRect = tooltipPopupRef.current.getBoundingClientRect();
+      const positionCssText = positionTriangle(triggerRect, tooltipRect);
+      const cssText = `
+                  position: absolute;
+                  width: 0;
+                  height: 0;
+                  ${positionCssText}
+                  border-top-color: ${BACKGROUND_COLOR};
+                  border-bottom-color: ${BACKGROUND_COLOR};
+                  z-index: 1;
+                `;
+      triangleRef.current.style.cssText = cssText;
+    }
+  });
+
+  return (
+    <>
+      {cloneElement(children, trigger)}
+      <TooltipPopup
+        {...tooltip}
+        label={label}
+        ariaLabel={ariaLabel}
+        style={{
+          background: BACKGROUND_COLOR,
+          color: TEXT_COLOR,
+        }}
+        ref={tooltipPopupRef}
+        position={positionTip}
+      />
+      {isVisible && (
+        <Portal>
+          <div
+            ref={triangleRef}
+            style={{
+              position: 'absolute',
+              width: 0,
+              height: 0,
+            }}
+          />
+        </Portal>
+      )}
+    </>
+  );
+};
+
+Tooltip.propTypes = {
+  children: PropTypes.node.isRequired,
+  label: PropTypes.node.isRequired,
+  ariaLabel: PropTypes.string,
+  DEBUG_STYLE: PropTypes.bool,
+};
+
+Tooltip.defaultProps = {
+  ariaLabel: undefined,
+  DEBUG_STYLE: undefined,
+};
+
+export default Tooltip;

package/components/Tooltip/Tooltip.stories.js

@@ -0,0 +1,80 @@
+import React from 'react';
+import Tooltip from './index';
+
+const offsetDecorator = (storyFn) => (
+  <div style={{ margin: '80px' }}>{storyFn()}</div>
+);
+
+export default {
+  title: 'Tooltip',
+  component: Tooltip,
+};
+
+export const ExampleTooltip = () => (
+  <Tooltip label="FOOBAR">
+    <button>
+      <span>Tooltip Trigger</span>
+    </button>
+  </Tooltip>
+);
+
+ExampleTooltip.storyName = 'example Tooltip';
+ExampleTooltip.decorators = [offsetDecorator];
+
+export const AriaLabelTooltip = () => (
+  <Tooltip label="FOOBAR" ariaLabel="foobar">
+    <button>
+      <span>Tooltip Trigger</span>
+    </button>
+  </Tooltip>
+);
+
+AriaLabelTooltip.storyName = 'using ariaLabel';
+AriaLabelTooltip.decorators = [offsetDecorator];
+
+export const MultipleTooltip = () => (
+  <>
+    <Tooltip label="Tooltip 1">
+      <button>
+        <span>Tooltip 1 Trigger</span>
+      </button>
+    </Tooltip>
+    <Tooltip label="Tooltip 2">
+      <button>
+        <span>Tooltip 2 Trigger</span>
+      </button>
+    </Tooltip>
+    <Tooltip label="Tooltip 3">
+      <button>
+        <span>Tooltip 3 Trigger</span>
+      </button>
+    </Tooltip>
+  </>
+);
+
+MultipleTooltip.storyName = 'multiple Tooltips';
+MultipleTooltip.decorators = [offsetDecorator];
+
+export const InputElementTooltip = () => (
+  <form>
+    <label htmlFor="foobar" style={{ marginRight: '5px ' }}>
+      Text Input
+    </label>
+    <Tooltip label="example input label tooltip">
+      <input type="text" name="foobar" />
+    </Tooltip>
+  </form>
+);
+
+InputElementTooltip.storyName = 'on text input';
+InputElementTooltip.decorators = [offsetDecorator];
+
+export const PositionedBelowTargetTooltip = () => (
+  <Tooltip label="FOOBAR">
+    <button>
+      <span>Tooltip Trigger</span>
+    </button>
+  </Tooltip>
+);
+
+PositionedBelowTargetTooltip.storyName = 'positioned below trigger';

package/components/Tooltip/index.js

@@ -0,0 +1,3 @@
+import Tooltip from './Tooltip';
+
+export default Tooltip;