Add link to selected default-snippet in SnippetAreas view (#5392)

* Add link to selected default-snippet in StipperAreas view * Add test case * Adjust import in SnippetAreas.test.js * Add and use text skin for Button component * Rename css class of button-text to prevent conflict with skin * Update a lot of snapshot tests
sulu · Sep 9, 2020 · 6df5665 · 6df5665
1 parent 40fa173
commit 6df5665
Show file tree

Hide file tree

Showing 45 changed files with 246 additions and 160 deletions.
diff --git a/.../Resources/js/components/BlockCollection/tests/__snapshots__/BlockCollection.test.js.snap b/.../Resources/js/components/BlockCollection/tests/__snapshots__/BlockCollection.test.js.snap
@@ -73,7 +73,7 @@ exports[`Should render a block list 1`] = `
       class="su-plus buttonIcon"
     />
     <span
-      class="text"
+      class="buttonText"
     >
       Add block
     </span>
@@ -155,7 +155,7 @@ exports[`Should render a disabled block list 1`] = `
       class="su-plus buttonIcon"
     />
     <span
-      class="text"
+      class="buttonText"
     >
       Add block
     </span>
@@ -237,7 +237,7 @@ exports[`Should render a fully filled block list without add button if maxOccurs
       class="su-plus buttonIcon"
     />
     <span
-      class="text"
+      class="buttonText"
     >
       Add block
     </span>
@@ -261,7 +261,7 @@ exports[`Should render an empty block list 1`] = `
       class="su-plus buttonIcon"
     />
     <span
-      class="text"
+      class="buttonText"
     >
       Add block
     </span>

diff --git a/src/Sulu/Bundle/AdminBundle/Resources/js/components/Button/Button.js b/src/Sulu/Bundle/AdminBundle/Resources/js/components/Button/Button.js
@@ -92,7 +92,7 @@ export default class Button<T> extends React.PureComponent<Props<T>> {
                     <Icon className={iconClass} name={icon} />
                 }
                 {children &&
-                    <span className={buttonStyles.text}>{children}</span>
+                    <span className={buttonStyles.buttonText}>{children}</span>
                 }
                 {showDropdownIcon &&
                     <Icon className={buttonStyles.dropdownIcon} name="su-angle-down" />

diff --git a/src/Sulu/Bundle/AdminBundle/Resources/js/components/Button/README.md b/src/Sulu/Bundle/AdminBundle/Resources/js/components/Button/README.md
@@ -45,6 +45,19 @@ const onClick = () => {
     alert('Clicked this nice button, congrats!');
 };
 
+<Button
+    skin="text"
+    onClick={onClick}>
+    Click me dude
+</Button>
+```
+
+```javascript
+const onClick = () => {
+    /* do click things */
+    alert('Clicked this nice button, congrats!');
+};
+
 <Button
     skin="icon"
     icon="su-plus"

diff --git a/src/Sulu/Bundle/AdminBundle/Resources/js/components/Button/button.scss b/src/Sulu/Bundle/AdminBundle/Resources/js/components/Button/button.scss
@@ -17,6 +17,9 @@ $secondaryDisabledColor: $silver;
 $linkColor: $black;
 $linkDisabledColor: $silverChalice;
 
+$textColor: $black;
+$textDisabledColor: $silverChalice;
+
 $iconFontSize: 14px;
 $iconBackgroundColorActive: $doveGray;
 $iconBackgroundColorHover: $mercury;
@@ -93,11 +96,11 @@ $iconColorActive: $white;
     font-size: $fontSize;
     color: $linkColor;
 
-    .text {
+    .button-text {
         text-decoration: underline;
     }
 
-    .button-icon + .text {
+    .button-icon + .button-text {
         margin-left: 10px;
     }
 
@@ -111,6 +114,28 @@ $iconColorActive: $white;
     }
 }
 
+.text {
+    padding: 0;
+    border: 0;
+    background: transparent;
+    cursor: pointer;
+    font-size: $fontSize;
+    color: $textColor;
+
+    .button-icon + .button-text {
+        margin-left: 10px;
+    }
+
+    .dropdown-icon {
+        margin-left: 10px;
+        font-size: $dropdownFontSize;
+    }
+
+    &:disabled {
+        color: $textDisabledColor;
+    }
+}
+
 .icon {
     background: none;
     min-width: 30px;
@@ -160,7 +185,7 @@ $iconColorActive: $white;
     background-color: transparent;
     border-color: transparent;
 
-    .text {
+    .button-text {
         opacity: 0;
     }
 

diff --git a/src/Sulu/Bundle/AdminBundle/Resources/js/components/Button/tests/Button.test.js b/src/Sulu/Bundle/AdminBundle/Resources/js/components/Button/tests/Button.test.js
@@ -23,6 +23,10 @@ test('Should render with skin link', () => {
     expect(render(<Button skin="link" />)).toMatchSnapshot();
 });
 
+test('Should render with skin text', () => {
+    expect(render(<Button skin="text" />)).toMatchSnapshot();
+});
+
 test('Should render with skin icon', () => {
     expect(render(<Button skin="icon" />)).toMatchSnapshot();
 });

diff --git a/...Bundle/AdminBundle/Resources/js/components/Button/tests/__snapshots__/Button.test.js.snap b/...Bundle/AdminBundle/Resources/js/components/Button/tests/__snapshots__/Button.test.js.snap
@@ -10,7 +10,7 @@ exports[`Should render the button with icon 1`] = `
     class="su-plus buttonIcon"
   />
   <span
-    class="text"
+    class="buttonText"
   >
     Add something
   </span>
@@ -100,6 +100,13 @@ exports[`Should render with skin secondary and dropdown icon 1`] = `
 </button>
 `;
 
+exports[`Should render with skin text 1`] = `
+<button
+  class="button text"
+  type="button"
+/>
+`;
+
 exports[`should render disabled with skin secondary 1`] = `
 <button
   class="button secondary"

diff --git a/src/Sulu/Bundle/AdminBundle/Resources/js/components/Button/types.js b/src/Sulu/Bundle/AdminBundle/Resources/js/components/Button/types.js
@@ -1,3 +1,3 @@
 // @flow
 
-export type ButtonSkin = 'primary' | 'secondary' | 'link' | 'icon';
+export type ButtonSkin = 'primary' | 'secondary' | 'link' | 'text' | 'icon';
diff --git a/...inBundle/Resources/js/components/ButtonGroup/tests/__snapshots__/ButtonGroup.test.js.snap b/...inBundle/Resources/js/components/ButtonGroup/tests/__snapshots__/ButtonGroup.test.js.snap
@@ -9,7 +9,7 @@ exports[`Should render a button and a dropdown button 1`] = `
     type="button"
   >
     <span
-      class="text"
+      class="buttonText"
     >
       <span
         aria-label="su-th-large"
@@ -38,7 +38,7 @@ exports[`Should render a button with a custom className 1`] = `
     type="button"
   >
     <span
-      class="text"
+      class="buttonText"
     >
       <span
         aria-label="su-th-large"
@@ -58,7 +58,7 @@ exports[`Should render more than two buttons 1`] = `
     type="button"
   >
     <span
-      class="text"
+      class="buttonText"
     >
       <span
         aria-label="su-th-large"
@@ -71,7 +71,7 @@ exports[`Should render more than two buttons 1`] = `
     type="button"
   >
     <span
-      class="text"
+      class="buttonText"
     >
       <span
         aria-label="su-align-justify"
@@ -84,7 +84,7 @@ exports[`Should render more than two buttons 1`] = `
     type="button"
   >
     <span
-      class="text"
+      class="buttonText"
     >
       <span
         aria-label="su-th-large"
@@ -97,7 +97,7 @@ exports[`Should render more than two buttons 1`] = `
     type="button"
   >
     <span
-      class="text"
+      class="buttonText"
     >
       <span
         aria-label="su-align-justify"
@@ -117,7 +117,7 @@ exports[`Should render one button 1`] = `
     type="button"
   >
     <span
-      class="text"
+      class="buttonText"
     >
       <span
         aria-label="su-th-large"
@@ -137,7 +137,7 @@ exports[`Should render one button with a custom className and another one withou
     type="button"
   >
     <span
-      class="text"
+      class="buttonText"
     >
       <span
         aria-label="su-th-large"
@@ -150,7 +150,7 @@ exports[`Should render one button with a custom className and another one withou
     type="button"
   >
     <span
-      class="text"
+      class="buttonText"
     >
       <span
         aria-label="su-align-justify"
@@ -170,7 +170,7 @@ exports[`Should render two buttons 1`] = `
     type="button"
   >
     <span
-      class="text"
+      class="buttonText"
     >
       <span
         aria-label="su-th-large"
@@ -183,7 +183,7 @@ exports[`Should render two buttons 1`] = `
     type="button"
   >
     <span
-      class="text"
+      class="buttonText"
     >
       <span
         aria-label="su-align-justify"

diff --git a/...le/Resources/js/components/CardCollection/tests/__snapshots__/CardCollection.test.js.snap b/...le/Resources/js/components/CardCollection/tests/__snapshots__/CardCollection.test.js.snap
@@ -17,7 +17,7 @@ Array [
         class="su-plus buttonIcon"
       />
       <span
-        class="text"
+        class="buttonText"
       >
         sulu_admin.add
       </span>
@@ -72,7 +72,7 @@ Array [
         class="su-plus buttonIcon"
       />
       <span
-        class="text"
+        class="buttonText"
       >
         sulu_admin.add
       </span>

diff --git a/...Bundle/AdminBundle/Resources/js/components/Dialog/tests/__snapshots__/Dialog.test.js.snap b/...Bundle/AdminBundle/Resources/js/components/Dialog/tests/__snapshots__/Dialog.test.js.snap
@@ -29,7 +29,7 @@ Array [
             type="button"
           >
             <span
-              class="text"
+              class="buttonText"
             >
               Confirm
             </span>
@@ -39,7 +39,7 @@ Array [
             type="button"
           >
             <span
-              class="text"
+              class="buttonText"
             >
               Cancel
             </span>

diff --git a/...le/Resources/js/components/DropdownButton/tests/__snapshots__/DropdownButton.test.js.snap b/...le/Resources/js/components/DropdownButton/tests/__snapshots__/DropdownButton.test.js.snap
@@ -10,7 +10,7 @@ exports[`Render dropdown button 1`] = `
     class="su-plus buttonIcon"
   />
   <span
-    class="text"
+    class="buttonText"
   >
     Add
   </span>

diff --git a/...esources/js/components/FileUploadButton/tests/__snapshots__/FileUploadButton.test.js.snap b/...esources/js/components/FileUploadButton/tests/__snapshots__/FileUploadButton.test.js.snap
@@ -9,7 +9,7 @@ exports[`Render a FileUploadButton 1`] = `
     type="button"
   >
     <span
-      class="text"
+      class="buttonText"
     >
       Upload something!
     </span>
@@ -37,7 +37,7 @@ exports[`Render a FileUploadButton with other skin and icon 1`] = `
       class="su-image buttonIcon"
     />
     <span
-      class="text"
+      class="buttonText"
     >
       Upload something!
     </span>
@@ -62,7 +62,7 @@ exports[`Render a disabled FileUploadButton 1`] = `
     type="button"
   >
     <span
-      class="text"
+      class="buttonText"
     >
       Upload something!
     </span>

diff --git a/...ndle/AdminBundle/Resources/js/components/Overlay/tests/__snapshots__/Actions.test.js.snap b/...ndle/AdminBundle/Resources/js/components/Overlay/tests/__snapshots__/Actions.test.js.snap
@@ -9,7 +9,7 @@ exports[`The component should render 1`] = `
     type="button"
   >
     <span
-      class="text"
+      class="buttonText"
     >
       Action 1
     </span>
@@ -19,7 +19,7 @@ exports[`The component should render 1`] = `
     type="button"
   >
     <span
-      class="text"
+      class="buttonText"
     >
       Action 2
     </span>

diff --git a/...ndle/AdminBundle/Resources/js/components/Overlay/tests/__snapshots__/Overlay.test.js.snap b/...ndle/AdminBundle/Resources/js/components/Overlay/tests/__snapshots__/Overlay.test.js.snap
@@ -40,7 +40,7 @@ Array [
               type="button"
             >
               <span
-                class="text"
+                class="buttonText"
               >
                 Action 1
               </span>
@@ -50,7 +50,7 @@ Array [
               type="button"
             >
               <span
-                class="text"
+                class="buttonText"
               >
                 Action 2
               </span>
@@ -61,7 +61,7 @@ Array [
             type="button"
           >
             <span
-              class="text"
+              class="buttonText"
             >
               Apply
             </span>