@scm-manager/ui-components 2.30.2-20220102-104837 → 2.30.2-20220102-142809

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scm-manager/ui-components",
-  "version": "2.30.2-20220102-104837",
+  "version": "2.30.2-20220102-142809",
   "description": "UI Components for SCM-Manager and its plugins",
   "main": "src/index.ts",
   "files": [
@@ -25,7 +25,7 @@
     "@scm-manager/jest-preset": "^2.13.0",
     "@scm-manager/prettier-config": "^2.10.1",
     "@scm-manager/tsconfig": "^2.12.0",
-    "@scm-manager/ui-tests": "^2.30.2-20220102-104837",
+    "@scm-manager/ui-tests": "^2.30.2-20220102-142809",
     "@storybook/addon-actions": "^6.3.12",
     "@storybook/addon-storyshots": "^6.3.12",
     "@storybook/builder-webpack5": "^6.3.12",
@@ -66,9 +66,9 @@
   },
   "dependencies": {
     "@headlessui/react": "^1.4.3",
-    "@scm-manager/ui-api": "^2.30.2-20220102-104837",
-    "@scm-manager/ui-extensions": "^2.30.2-20220102-104837",
-    "@scm-manager/ui-types": "^2.30.2-20220102-104837",
+    "@scm-manager/ui-api": "^2.30.2-20220102-142809",
+    "@scm-manager/ui-extensions": "^2.30.2-20220102-142809",
+    "@scm-manager/ui-types": "^2.30.2-20220102-142809",
     "classnames": "^2.2.6",
     "date-fns": "^2.4.1",
     "deepmerge": "^4.2.2",

package/src/SyntaxHighlighter.tsx

@@ -45,7 +45,6 @@ const TopRightButton = styled.button`
 `;
 
 const Container = styled.div`
-  position: relative;
   &:hover > ${TopRightButton} {
     display: inline-block;
   }
@@ -93,7 +92,7 @@ const SyntaxHighlighter: FC<Props> = ({ language = defaultLanguage, showLineNumb
   }
 
   return (
-    <Container ref={setContentRef}>
+    <Container ref={setContentRef} className="is-relative">
       <ReactSyntaxHighlighter
         showLineNumbers={false}
         language={determineLanguage(language)}
@@ -102,7 +101,7 @@ const SyntaxHighlighter: FC<Props> = ({ language = defaultLanguage, showLineNumb
       >
         {valueWithoutTrailingLineBreak}
       </ReactSyntaxHighlighter>
-      <TopRightButton title={t("syntaxHighlighting.copyButton")} onClick={copy}>
+      <TopRightButton className="is-clickable" title={t("syntaxHighlighting.copyButton")} onClick={copy}>
         <i className={copied ? "fa fa-clipboard-check" : "fa fa-clipboard"} />
       </TopRightButton>
     </Container>

package/src/__snapshots__/storyshots.test.ts.snap

@@ -4610,7 +4610,7 @@ exports[`Storyshots MarkdownView Code without Lang 1`] = `
       
 
       <div
-        className="SyntaxHighlighter__Container-ks8t62-1 eKVmMv"
+        className="SyntaxHighlighter__Container-ks8t62-1 gJqvQP is-relative"
       >
         <pre
           style={
@@ -4699,7 +4699,7 @@ exports[`Storyshots MarkdownView Code without Lang 1`] = `
           </code>
         </pre>
         <button
-          className="SyntaxHighlighter__TopRightButton-ks8t62-0 iyikPX"
+          className="SyntaxHighlighter__TopRightButton-ks8t62-0 iyikPX is-clickable"
           onClick={[Function]}
           title="syntaxHighlighting.copyButton"
         >
@@ -5760,7 +5760,7 @@ Deserunt officia esse aliquip consectetur duis ut labore laborum commodo aliquip
       
 
       <div
-        className="SyntaxHighlighter__Container-ks8t62-1 eKVmMv"
+        className="SyntaxHighlighter__Container-ks8t62-1 gJqvQP is-relative"
       >
         <pre
           style={
@@ -6929,7 +6929,7 @@ Deserunt officia esse aliquip consectetur duis ut labore laborum commodo aliquip
           </code>
         </pre>
         <button
-          className="SyntaxHighlighter__TopRightButton-ks8t62-0 iyikPX"
+          className="SyntaxHighlighter__TopRightButton-ks8t62-0 iyikPX is-clickable"
           onClick={[Function]}
           title="syntaxHighlighting.copyButton"
         >
@@ -14969,7 +14969,7 @@ exports[`Storyshots MarkdownView Inline Xml 1`] = `
       
 
       <div
-        className="SyntaxHighlighter__Container-ks8t62-1 eKVmMv"
+        className="SyntaxHighlighter__Container-ks8t62-1 gJqvQP is-relative"
       >
         <pre
           style={
@@ -15359,7 +15359,7 @@ exports[`Storyshots MarkdownView Inline Xml 1`] = `
           </code>
         </pre>
         <button
-          className="SyntaxHighlighter__TopRightButton-ks8t62-0 iyikPX"
+          className="SyntaxHighlighter__TopRightButton-ks8t62-0 iyikPX is-clickable"
           onClick={[Function]}
           title="syntaxHighlighting.copyButton"
         >
@@ -16544,7 +16544,7 @@ Deserunt officia esse aliquip consectetur duis ut labore laborum commodo aliquip
       
 
       <div
-        className="SyntaxHighlighter__Container-ks8t62-1 eKVmMv"
+        className="SyntaxHighlighter__Container-ks8t62-1 gJqvQP is-relative"
       >
         <pre
           style={
@@ -17713,7 +17713,7 @@ Deserunt officia esse aliquip consectetur duis ut labore laborum commodo aliquip
           </code>
         </pre>
         <button
-          className="SyntaxHighlighter__TopRightButton-ks8t62-0 iyikPX"
+          className="SyntaxHighlighter__TopRightButton-ks8t62-0 iyikPX is-clickable"
           onClick={[Function]}
           title="syntaxHighlighting.copyButton"
         >
@@ -17918,7 +17918,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
       
 
       <div
-        className="SyntaxHighlighter__Container-ks8t62-1 eKVmMv"
+        className="SyntaxHighlighter__Container-ks8t62-1 gJqvQP is-relative"
       >
         <pre
           style={
@@ -19359,7 +19359,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
           </code>
         </pre>
         <button
-          className="SyntaxHighlighter__TopRightButton-ks8t62-0 iyikPX"
+          className="SyntaxHighlighter__TopRightButton-ks8t62-0 iyikPX is-clickable"
           onClick={[Function]}
           title="syntaxHighlighting.copyButton"
         >
@@ -76993,7 +76993,7 @@ exports[`Storyshots SyntaxHighlighter Go 1`] = `
   className="SyntaxHighlighterstories__Spacing-sc-1dcldp5-0 jbrCso"
 >
   <div
-    className="SyntaxHighlighter__Container-ks8t62-1 eKVmMv"
+    className="SyntaxHighlighter__Container-ks8t62-1 gJqvQP is-relative"
   >
     <pre
       style={
@@ -78377,7 +78377,7 @@ exports[`Storyshots SyntaxHighlighter Go 1`] = `
       </code>
     </pre>
     <button
-      className="SyntaxHighlighter__TopRightButton-ks8t62-0 iyikPX"
+      className="SyntaxHighlighter__TopRightButton-ks8t62-0 iyikPX is-clickable"
       onClick={[Function]}
       title="syntaxHighlighting.copyButton"
     >
@@ -78394,7 +78394,7 @@ exports[`Storyshots SyntaxHighlighter Java 1`] = `
   className="SyntaxHighlighterstories__Spacing-sc-1dcldp5-0 jbrCso"
 >
   <div
-    className="SyntaxHighlighter__Container-ks8t62-1 eKVmMv"
+    className="SyntaxHighlighter__Container-ks8t62-1 gJqvQP is-relative"
   >
     <pre
       style={
@@ -81336,7 +81336,7 @@ exports[`Storyshots SyntaxHighlighter Java 1`] = `
       </code>
     </pre>
     <button
-      className="SyntaxHighlighter__TopRightButton-ks8t62-0 iyikPX"
+      className="SyntaxHighlighter__TopRightButton-ks8t62-0 iyikPX is-clickable"
       onClick={[Function]}
       title="syntaxHighlighting.copyButton"
     >
@@ -81353,7 +81353,7 @@ exports[`Storyshots SyntaxHighlighter Javascript 1`] = `
   className="SyntaxHighlighterstories__Spacing-sc-1dcldp5-0 jbrCso"
 >
   <div
-    className="SyntaxHighlighter__Container-ks8t62-1 eKVmMv"
+    className="SyntaxHighlighter__Container-ks8t62-1 gJqvQP is-relative"
   >
     <pre
       style={
@@ -82166,7 +82166,7 @@ exports[`Storyshots SyntaxHighlighter Javascript 1`] = `
       </code>
     </pre>
     <button
-      className="SyntaxHighlighter__TopRightButton-ks8t62-0 iyikPX"
+      className="SyntaxHighlighter__TopRightButton-ks8t62-0 iyikPX is-clickable"
       onClick={[Function]}
       title="syntaxHighlighting.copyButton"
     >
@@ -82183,7 +82183,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
   className="SyntaxHighlighterstories__Spacing-sc-1dcldp5-0 jbrCso"
 >
   <div
-    className="SyntaxHighlighter__Container-ks8t62-1 eKVmMv"
+    className="SyntaxHighlighter__Container-ks8t62-1 gJqvQP is-relative"
   >
     <pre
       style={
@@ -90322,7 +90322,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
       </code>
     </pre>
     <button
-      className="SyntaxHighlighter__TopRightButton-ks8t62-0 iyikPX"
+      className="SyntaxHighlighter__TopRightButton-ks8t62-0 iyikPX is-clickable"
       onClick={[Function]}
       title="syntaxHighlighting.copyButton"
     >
@@ -90339,7 +90339,7 @@ exports[`Storyshots SyntaxHighlighter Python 1`] = `
   className="SyntaxHighlighterstories__Spacing-sc-1dcldp5-0 jbrCso"
 >
   <div
-    className="SyntaxHighlighter__Container-ks8t62-1 eKVmMv"
+    className="SyntaxHighlighter__Container-ks8t62-1 gJqvQP is-relative"
   >
     <pre
       style={
@@ -91816,7 +91816,7 @@ exports[`Storyshots SyntaxHighlighter Python 1`] = `
       </code>
     </pre>
     <button
-      className="SyntaxHighlighter__TopRightButton-ks8t62-0 iyikPX"
+      className="SyntaxHighlighter__TopRightButton-ks8t62-0 iyikPX is-clickable"
       onClick={[Function]}
       title="syntaxHighlighting.copyButton"
     >
@@ -91833,7 +91833,7 @@ exports[`Storyshots SyntaxHighlighter Without line numbers 1`] = `
   className="SyntaxHighlighterstories__Spacing-sc-1dcldp5-0 jbrCso"
 >
   <div
-    className="SyntaxHighlighter__Container-ks8t62-1 eKVmMv"
+    className="SyntaxHighlighter__Container-ks8t62-1 gJqvQP is-relative"
   >
     <pre
       style={
@@ -94186,7 +94186,7 @@ exports[`Storyshots SyntaxHighlighter Without line numbers 1`] = `
       </code>
     </pre>
     <button
-      className="SyntaxHighlighter__TopRightButton-ks8t62-0 iyikPX"
+      className="SyntaxHighlighter__TopRightButton-ks8t62-0 iyikPX is-clickable"
       onClick={[Function]}
       title="syntaxHighlighting.copyButton"
     >