Merge pull request #134 from sonatype/Feature-Breaking-Changes-v2

Version 2 feature branch
sonatype · Oct 1, 2020 · 6881010 · 6881010
2 parents 6c4591e + f5b2fef
commit 6881010
Show file tree

Hide file tree

Showing 135 changed files with 2,774 additions and 1,723 deletions.
diff --git a/gallery/package.json b/gallery/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@sonatype/react-shared-components-gallery",
-  "version": "1.6.17",
+  "version": "2.0.0",
   "description": "Gallery application to demonstrate usage and look of Sonatype shared UI components",
   "main": "src/main.ts",
   "scripts": {

diff --git a/gallery/src/RawHtmlExample.tsx b/gallery/src/RawHtmlExample.tsx
@@ -11,6 +11,6 @@ interface Props {
 }
 
 const RawHtmlExample = ({ html }: Props) =>
-  <div className="gallery-raw-html-example" dangerouslySetInnerHTML={{ __html: html }} />;
+  <div className="gallery-example-live gallery-example-live--raw-html" dangerouslySetInnerHTML={{ __html: html }} />;
 
 export default RawHtmlExample;
diff --git a/gallery/src/components/NxLoadWrapper/NxLoadWrapperChildrenExample.tsx b/gallery/src/components/NxLoadWrapper/NxLoadWrapperChildrenExample.tsx
@@ -9,7 +9,7 @@ import React from 'react';
 import { NxLoadWrapper } from '@sonatype/react-shared-components';
 
 const NxLoadWrapperChildrenExample = () =>
-  <NxLoadWrapper>
+  <NxLoadWrapper retryHandler={() => {}}>
     <div>Children!</div>
   </NxLoadWrapper>;
 

diff --git a/gallery/src/components/NxLoadWrapper/NxLoadWrapperLoadingExample.tsx b/gallery/src/components/NxLoadWrapper/NxLoadWrapperLoadingExample.tsx
@@ -9,7 +9,7 @@ import React from 'react';
 import { NxLoadWrapper } from '@sonatype/react-shared-components';
 
 const NxLoadWrapperLoadingExample = () =>
-  <NxLoadWrapper loading={true}>
+  <NxLoadWrapper loading={true} retryHandler={() => {}}>
     <div>Children will not render</div>
   </NxLoadWrapper>;
 

diff --git a/gallery/src/components/NxLoadWrapper/NxLoadWrapperPage.tsx b/gallery/src/components/NxLoadWrapper/NxLoadWrapperPage.tsx
@@ -60,11 +60,8 @@ const NxLoadWrapperPage = () =>
             <td className="nx-cell">Function</td>
             <td className="nx-cell">Yes</td>
             <td className="nx-cell">
-              If this is defined, a Retry button will be rendered in
-              the <code className="nx-code">NxLoadError</code> which executes this function
-              when clicked. For backwards compatibility reasons, this prop is not technically required. However
-              current UX standards are that it should always be present. If not specified
-              the <code className="nx-code">NxLoadError</code> will be rendered without a Retry button.
+              A Retry button will be rendered in the <code className="nx-code">NxLoadError</code> which
+              executes this function when clicked.
             </td>
           </tr>
         </tbody>

diff --git a/gallery/src/components/NxModal/NxModalAlertExample.tsx b/gallery/src/components/NxModal/NxModalAlertExample.tsx
@@ -6,32 +6,28 @@
  */
 import React, {useState} from 'react';
 
-import {NxModal, NxWarningAlert} from '@sonatype/react-shared-components';
+import {NxModal, NxWarningAlert, NxButton} from '@sonatype/react-shared-components';
 
 export default function NxModalAlertExample() {
   const [showModal, setShowModal] = useState(false);
   const modalCloseHandler = () => setShowModal(false);
 
   return (
     <>
-      <button onClick={() => setShowModal(true)} className="nx-btn">Open Modal</button>
+      <NxButton onClick={() => setShowModal(true)}>Open Modal</NxButton>
       { showModal &&
         <NxModal id="nx-modal-alert-example" onClose={modalCloseHandler}>
           <header className="nx-modal-header">
-            <h2 className="nx-h2">
-              <span>Example NxModal with NxAlert</span>
-            </h2>
+            <h2 className="nx-h2">Example NxModal with NxAlert</h2>
           </header>
           <div className="nx-modal-content">
-            <NxWarningAlert className="nx-alert--modifier">
-              <span>
-                The page may contain unsaved changes; continuing will discard them.
-              </span>
+            <NxWarningAlert>
+              The page may contain unsaved changes; continuing will discard them.
             </NxWarningAlert>
           </div>
-          <footer className="nx-modal-footer">
+          <footer className="nx-footer">
             <div className="nx-btn-bar">
-              <button type="button" onClick={modalCloseHandler} className="nx-btn">Close</button>
+              <NxButton onClick={modalCloseHandler}>Close</NxButton>
             </div>
           </footer>
         </NxModal>

diff --git a/gallery/src/components/NxModal/NxModalExtraWideExample.tsx b/gallery/src/components/NxModal/NxModalExtraWideExample.tsx
@@ -6,31 +6,26 @@
  */
 import React, {useState} from 'react';
 
-import {NxModal} from '@sonatype/react-shared-components';
-import {NxVulnerabilityDetails} from '@sonatype/react-shared-components';
-
-const vulnerabilityDetailsJson = require('../../resources/vulnerabilities/vulnerabilityDetailsJson.json');
+import {NxModal, NxButton} from '@sonatype/react-shared-components';
 
 export default function NxModalExtraWideExample() {
   const [showModal, setShowModal] = useState(false);
   const modalCloseHandler = () => setShowModal(false);
 
   return (
     <>
-      <button onClick={() => setShowModal(true)} className="nx-btn">
-        Open modal with vulnerability details component
-      </button>
+      <NxButton onClick={() => setShowModal(true)}>Open wide modal</NxButton>
       {showModal &&
-      <NxModal id="nx-modal-with-vuln" className="nx-modal--wide" onClose={modalCloseHandler}>
+      <NxModal id="nx-modal-wide-example" variant="wide" onClose={modalCloseHandler}>
         <header className="nx-modal-header">
           <h3 className="nx-h3">Vulnerability Information</h3>
         </header>
         <div className="nx-modal-content">
-          <NxVulnerabilityDetails vulnerabilityDetails={vulnerabilityDetailsJson}/>
+          <p className="nx-p">This is some content inside a wider modal.</p>
         </div>
-        <footer className="nx-modal-footer">
+        <footer className="nx-footer">
           <div className="nx-btn-bar">
-            <button type="button" onClick={modalCloseHandler} className="nx-btn">Close</button>
+            <NxButton onClick={modalCloseHandler}>Close</NxButton>
           </div>
         </footer>
       </NxModal>

diff --git a/gallery/src/components/NxModal/NxModalFormErrorExample.tsx b/gallery/src/components/NxModal/NxModalFormErrorExample.tsx
@@ -6,7 +6,7 @@
  */
 import React, {useState} from 'react';
 
-import {NxModal, NxFontAwesomeIcon, NxTextInput, NxLoadError} from '@sonatype/react-shared-components';
+import {NxModal, NxFontAwesomeIcon, NxTextInput, NxLoadError, NxButton} from '@sonatype/react-shared-components';
 import {faAngry} from '@fortawesome/free-solid-svg-icons';
 import { initialState, userInput } from '@sonatype/react-shared-components/components/NxTextInput/stateHelpers';
 
@@ -25,10 +25,10 @@ export default function NxModalFormErrorExample() {
 
   return (
     <>
-      <button onClick={() => setShowModal(true)} className="nx-btn">Open Modal with Form and Error Styling</button>
+      <NxButton onClick={() => setShowModal(true)}>Open Modal with Form and Error Styling</NxButton>
       {showModal &&
         <NxModal id="nx-modal-form-error-example" onClose={modalCloseHandler}>
-          <form className="nx-form nx-form--simple">
+          <form className="nx-form">
             <header className="nx-modal-header">
               <h2 className="nx-h2">
                 <NxFontAwesomeIcon icon={faAngry} />
@@ -38,23 +38,21 @@ export default function NxModalFormErrorExample() {
             <div className="nx-modal-content">
               <div className="nx-form-group">
                 <label className="nx-label">
-                  Username
+                  <span className="nx-label__text">Username</span>
                   <NxTextInput { ...textFieldState } onChange={onChange} />
                 </label>
               </div>
               <div className="nx-form-group">
                 <label className="nx-label">
-                  Password
+                  <span className="nx-label__text">Password</span>
                   <NxTextInput type="password" placeholder="Enter password" onChange={onChange} { ...textFieldState }/>
                 </label>
               </div>
             </div>
-            <footer className="nx-modal-footer">
+            <footer className="nx-footer">
               <NxLoadError { ...({ error, retryHandler }) } onClick={modalCloseHandler} />
               <div className="nx-btn-bar">
-                <button type="button" onClick={modalCloseHandler} className="nx-btn">
-                  Cancel
-                </button>
+                <NxButton type="button" onClick={modalCloseHandler}>Cancel</NxButton>
               </div>
             </footer>
           </form>

diff --git a/gallery/src/components/NxModal/NxModalFormExample.tsx b/gallery/src/components/NxModal/NxModalFormExample.tsx
@@ -6,7 +6,7 @@
  */
 import React, {useState} from 'react';
 
-import {NxModal, NxFontAwesomeIcon} from '@sonatype/react-shared-components';
+import {NxModal, NxFontAwesomeIcon, NxButton, NxStatefulTextInput} from '@sonatype/react-shared-components';
 import {faAngry} from '@fortawesome/free-solid-svg-icons';
 
 export default function NxModalFormExample() {
@@ -15,10 +15,10 @@ export default function NxModalFormExample() {
 
   return (
     <>
-      <button onClick={() => setShowModal(true)} className="nx-btn">Open Modal with Form</button>
+      <NxButton onClick={() => setShowModal(true)}>Open Modal with Form</NxButton>
       {showModal &&
         <NxModal id="nx-modal-form-example" onClose={modalCloseHandler}>
-          <form className="nx-form nx-form--simple">
+          <form className="nx-form">
             <header className="nx-modal-header">
               <h2 className="nx-h2">
                 <NxFontAwesomeIcon icon={faAngry} />
@@ -28,30 +28,22 @@ export default function NxModalFormExample() {
             <div className="nx-modal-content">
               <div className="nx-form-group">
                 <label className="nx-label">
-                  Username
-                  <input type="text"
-                         className="nx-text-input"
-                         placeholder="Username"/>
+                  <span className="nx-label__text">Username</span>
+                  <NxStatefulTextInput placeholder="Username"/>
                 </label>
               </div>
               <div className="nx-form-group">
                 <label className="nx-label">
-                  Password
-                  <input type="password"
-                         className="nx-text-input"
-                         placeholder="Password"/>
+                  <span className="nx-label__text">Password</span>
+                  <NxStatefulTextInput type="password" placeholder="Password"/>
                 </label>
               </div>
             </div>
-            <footer className="nx-modal-footer">
+            <footer className="nx-footer">
               <div className="nx-btn-bar">
-                <button type="button" onClick={modalCloseHandler} className="nx-btn nx-btn--primary">
-                  Primary
-                </button>
-                <button type="button" onClick={modalCloseHandler} className="nx-btn">Default</button>
-                <button type="button" onClick={modalCloseHandler} className="nx-btn nx-btn--tertiary">
-                  Tertiary
-                </button>
+                <NxButton type="button" onClick={modalCloseHandler} variant="primary">Primary</NxButton>
+                <NxButton type="button" onClick={modalCloseHandler}>Default</NxButton>
+                <NxButton type="button" onClick={modalCloseHandler} variant="tertiary">Tertiary</NxButton>
               </div>
             </footer>
           </form>

diff --git a/gallery/src/components/NxModal/NxModalNarrowExample.tsx b/gallery/src/components/NxModal/NxModalNarrowExample.tsx
@@ -0,0 +1,42 @@
+/*
+ * Copyright (c) 2019-present Sonatype, Inc.
+ * This program and the accompanying materials are made available under
+ * the terms of the Eclipse Public License 2.0 which accompanies this
+ * distribution and is available at https://www.eclipse.org/legal/epl-2.0/.
+ */
+import React, {useState} from 'react';
+
+import {NxModal, NxFontAwesomeIcon, NxButton} from '@sonatype/react-shared-components';
+import {faAngry} from '@fortawesome/free-solid-svg-icons';
+
+export default function NxModalSimpleExample() {
+  const [showModal, setShowModal] = useState(false);
+  const modalCloseHandler = () => setShowModal(false);
+
+  return (
+    <>
+      <NxButton onClick={() => setShowModal(true)}>Open Modal</NxButton>
+      { showModal &&
+        <NxModal variant="narrow" id="nx-modal-narrow-example" onClose={modalCloseHandler}>
+          <header className="nx-modal-header">
+            <h2 className="nx-h2">
+              <NxFontAwesomeIcon icon={faAngry} />
+              <span>
+                Example NxModal header - this header is long to demonstrate the truncation that all modal headers
+                can do
+              </span>
+            </h2>
+          </header>
+          <div className="nx-modal-content">
+            <p className="nx-p">This is some content inside a narrower modal.</p>
+          </div>
+          <footer className="nx-footer">
+            <div className="nx-btn-bar">
+              <NxButton onClick={modalCloseHandler}>Close</NxButton>
+            </div>
+          </footer>
+        </NxModal>
+      }
+    </>
+  );
+};