feat(share-on-feedback): restyle share button

vtexdocs · Jul 15, 2024 · 74fcadf · 74fcadf
1 parent ee0aa91
commit 74fcadf
Show file tree

Hide file tree

Showing 7 changed files with 67 additions and 61 deletions.
diff --git a/dist/index.mjs b/dist/index.mjs
@@ -9392,6 +9392,7 @@ var container5 = {
   flexDirection: ["column", "row"],
   alignItems: "center",
   alignContent: ["initial", "space-between"],
+  justifyContent: ["initial", "space-between"],
   marginTop: "32px",
   marginBottom: "16px"
 };
@@ -9445,11 +9446,14 @@ var editContainer = {
   ":hover": {
     color: "#000711 !important"
   },
-  ml: ["0", "auto"],
+  // ml: ['0', 'auto'],
   color: "#4A596B !important",
   display: "flex"
 };
 var editIcon = { mr: "4px" };
+var shareButton = {
+  // ml: ['0', 'auto'],
+};
 var styles_default15 = {
   container: container5,
   question,
@@ -9461,7 +9465,8 @@ var styles_default15 = {
   box,
   button,
   buttonActive,
-  selectedButton
+  selectedButton,
+  shareButton
 };
 
 // src/lib/feedback-section/functions.ts
@@ -9766,26 +9771,8 @@ var ShareIcon = (props) => /* @__PURE__ */ jsxs37(
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     children: [
-      /* @__PURE__ */ jsx46(
-        "path",
-        {
-          d: "M12 12L21 3V10V3H14",
-          stroke: "currentcolor",
-          strokeWidth: "1.5",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
-        }
-      ),
-      /* @__PURE__ */ jsx46(
-        "path",
-        {
-          d: "M9 3H5C3.895 3 3 3.895 3 5V19C3 20.105 3.895 21 5 21H19C20.105 21 21 20.105 21 19V15",
-          stroke: "currentcolor",
-          strokeWidth: "1.5",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
-        }
-      )
+      /* @__PURE__ */ jsx46("path", { d: "m0 0h24v24h-24z", opacity: "0", stroke: "currentColor" }),
+      /* @__PURE__ */ jsx46("path", { d: "m18 15a3 3 0 0 0 -2.1.86l-7.9-3.52c0-.12 0-.22 0-.34s0-.22 0-.33l7.9-3.53a3 3 0 1 0 -.9-2.14v.34l-7.9 3.52a3 3 0 1 0 0 4.28l7.9 3.53v.33a3 3 0 1 0 3-3z", fill: "currentColor" })
     ]
   }
 );
@@ -9830,13 +9817,21 @@ var container7 = {
 };
 var button3 = {
   cursor: "pointer",
-  color: "#A1AAB7",
+  textTransform: "none",
+  fontSize: "16px",
+  lineHeight: "18px",
+  color: "#4A596B",
   width: "24px",
   height: "24px",
   transition: "0.3s",
   ":hover": {
-    color: "#4A4A4A"
-  }
+    color: "#000711 !important",
+    textDecoration: "none"
+  },
+  alignItems: "start"
+};
+var shareIcon = {
+  marginRight: "4px"
 };
 var innerButton = {
   gap: "16px",
@@ -9876,6 +9871,7 @@ var divider = {
 var styles_default17 = {
   container: container7,
   button: button3,
+  shareIcon,
   innerButton,
   innerContainer,
   divider
@@ -9942,7 +9938,7 @@ var link_icon_default = LinkIcon;
 
 // src/components/share-button/index.tsx
 import { jsx as jsx50, jsxs as jsxs39 } from "react/jsx-runtime";
-var ShareButton = ({ url }) => {
+var ShareButton = ({ url, sx = {} }) => {
   const [isOpen, setIsOpen] = useState11(false);
   const containerRef = useRef9();
   useClickOutside(containerRef, () => setIsOpen(false));
@@ -9954,14 +9950,17 @@ var ShareButton = ({ url }) => {
       console.error("Error copying link to clipboard:", error);
     }
   };
-  return /* @__PURE__ */ jsxs39(Flex15, { sx: styles_default17.container, ref: containerRef, children: [
-    /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsxs39(Flex15, { sx: { ...styles_default17.container, ...sx }, ref: containerRef, children: [
+    /* @__PURE__ */ jsxs39(
       Button6,
       {
         sx: styles_default17.button,
         variant: "tertiary",
-        icon: share_icon_default,
-        onClick: () => setIsOpen(!isOpen)
+        onClick: () => setIsOpen(!isOpen),
+        children: [
+          /* @__PURE__ */ jsx50(share_icon_default, { sx: styles_default17.shareIcon, size: 24 }),
+          " Share"
+        ]
       }
     ),
     isOpen && /* @__PURE__ */ jsxs39(Flex15, { sx: styles_default17.innerContainer, children: [
@@ -9997,7 +9996,7 @@ var FeedbackSection = ({
   slug,
   urlToEdit,
   suggestEdits = true,
-  shareButton = false,
+  shareButton: shareButton2 = false,
   sendFeedback
 }) => {
   const [feedback, changeFeedback] = useState12(void 0);
@@ -10020,8 +10019,8 @@ var FeedbackSection = ({
     });
   };
   return /* @__PURE__ */ jsxs40(Flex16, { sx: styles_default15.container, "data-cy": "feedback-section", children: [
-    /* @__PURE__ */ jsx51(Text12, { sx: styles_default15.question, children: feedback !== void 0 ? messages[locale]["feedback_section.response"] : messages[locale]["feedback_section.question"] }),
     /* @__PURE__ */ jsxs40(Flex16, { sx: styles_default15.likeContainer, children: [
+      /* @__PURE__ */ jsx51(Text12, { sx: styles_default15.question, children: feedback !== void 0 ? messages[locale]["feedback_section.response"] : messages[locale]["feedback_section.question"] }),
       /* @__PURE__ */ jsxs40(
         Flex16,
         {
@@ -10061,7 +10060,7 @@ var FeedbackSection = ({
         ]
       }
     ),
-    shareButton && /* @__PURE__ */ jsx51(share_button_default, { url: window.location.href }),
+    shareButton2 && /* @__PURE__ */ jsx51(share_button_default, { url: window.location.href, sx: styles_default15.shareButton }),
     modalState.modalOpen ? /* @__PURE__ */ jsx51(
       feedback_modal_default,
       {

diff --git a/dist/index.mjs.map b/dist/index.mjs.map
diff --git a/src/components/icons/share-icon.tsx b/src/components/icons/share-icon.tsx
@@ -8,20 +8,8 @@ const ShareIcon = (props: IconProps) => (
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <path
-      d="M12 12L21 3V10V3H14"
-      stroke="currentcolor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M9 3H5C3.895 3 3 3.895 3 5V19C3 20.105 3.895 21 5 21H19C20.105 21 21 20.105 21 19V15"
-      stroke="currentcolor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
+    <path d="m0 0h24v24h-24z" opacity="0" stroke="currentColor"/>
+    <path d="m18 15a3 3 0 0 0 -2.1.86l-7.9-3.52c0-.12 0-.22 0-.34s0-.22 0-.33l7.9-3.53a3 3 0 1 0 -.9-2.14v.34l-7.9 3.52a3 3 0 1 0 0 4.28l7.9 3.53v.33a3 3 0 1 0 3-3z" fill="currentColor"/>
   </Icon>
 )
 

diff --git a/src/components/share-button/index.tsx b/src/components/share-button/index.tsx
@@ -13,13 +13,15 @@ import {
 import styles from './styles'
 import EmailIcon from 'components/icons/email-icon'
 import LinkIcon from 'components/icons/link-icon'
+import { SxStyleProp } from '@vtex/brand-ui'
 import useClickOutside from 'utils/hooks/useClickOutside'
 
 interface Props {
   url: string
+  sx?: SxStyleProp
 }
 
-const ShareButton = ({ url }: Props) => {
+const ShareButton = ({ url, sx={} }: Props) => {
   const [isOpen, setIsOpen] = useState(false)
   const containerRef = useRef()
   useClickOutside(containerRef, () => setIsOpen(false))
@@ -33,13 +35,14 @@ const ShareButton = ({ url }: Props) => {
   }
 
   return (
-    <Flex sx={styles.container} ref={containerRef}>
+    <Flex sx={{...styles.container, ...sx}} ref={containerRef}>
       <Button
         sx={styles.button}
         variant="tertiary"
-        icon={ShareIcon}
         onClick={() => setIsOpen(!isOpen)}
-      ></Button>
+      >
+        <ShareIcon sx={styles.shareIcon} size={24}/> Share
+      </Button>
       {isOpen && (
         <Flex sx={styles.innerContainer}>
           <Flex sx={styles.innerButton} onClick={handleCopyLink}>

diff --git a/src/components/share-button/styles.ts b/src/components/share-button/styles.ts
@@ -7,13 +7,22 @@ const container: SxStyleProp = {
 
 const button: SxStyleProp = {
   cursor: 'pointer',
-  color: '#A1AAB7',
+  textTransform: 'none',
+  fontSize: '16px',
+  lineHeight: '18px',
+  color: '#4A596B',
   width: '24px',
   height: '24px',
   transition: '0.3s',
   ':hover': {
-    color: '#4A4A4A',
+    color: '#000711 !important',
+    textDecoration: 'none',
   },
+  alignItems: 'start',
+}
+
+const shareIcon: SxStyleProp = {
+  marginRight: '4px',
 }
 
 const innerButton: SxStyleProp = {
@@ -58,6 +67,7 @@ const divider: SxStyleProp = {
 export default {
   container,
   button,
+  shareIcon,
   innerButton,
   innerContainer,
   divider,

diff --git a/src/lib/feedback-section/index.tsx b/src/lib/feedback-section/index.tsx
@@ -56,12 +56,12 @@ const FeedbackSection = ({
 
   return (
     <Flex sx={styles.container} data-cy="feedback-section">
-      <Text sx={styles.question}>
-        {feedback !== undefined
-          ? messages[locale]['feedback_section.response']
-          : messages[locale]['feedback_section.question']}
-      </Text>
       <Flex sx={styles.likeContainer}>
+        <Text sx={styles.question}>
+          {feedback !== undefined
+            ? messages[locale]['feedback_section.response']
+            : messages[locale]['feedback_section.question']}
+        </Text>
         <Flex
           ref={likeButton}
           sx={setButtonStyle(feedback, modalState, true)}
@@ -100,7 +100,7 @@ const FeedbackSection = ({
         </Link>
       )}
       {shareButton && (
-        <ShareButton url={window.location.href}/>
+        <ShareButton url={window.location.href} sx={styles.shareButton} />
       )}
       {modalState.modalOpen ? (
         <FeedbackModal

diff --git a/src/lib/feedback-section/styles.ts b/src/lib/feedback-section/styles.ts
@@ -7,6 +7,7 @@ const container: SxStyleProp = {
   flexDirection: ['column', 'row'],
   alignItems: 'center',
   alignContent: ['initial', 'space-between'],
+  justifyContent: ['initial', 'space-between'],
   marginTop: '32px',
   marginBottom: '16px',
 }
@@ -69,13 +70,17 @@ const editContainer: SxStyleProp = {
   ':hover': {
     color: '#000711 !important',
   },
-  ml: ['0', 'auto'],
+  // ml: ['0', 'auto'],
   color: '#4A596B !important',
   display: 'flex',
 }
 
 const editIcon: SxStyleProp = { mr: '4px' }
 
+const shareButton: SxStyleProp = {
+  // ml: ['0', 'auto'],
+}
+
 export default {
   container,
   question,
@@ -88,4 +93,5 @@ export default {
   button,
   buttonActive,
   selectedButton,
+  shareButton
 }