feat: ✨ added customized close button

hc-oss · Jan 21, 2021 · 760c4c8 · 760c4c8
1 parent 0dd509c
commit 760c4c8
Show file tree

Hide file tree

Showing 10 changed files with 2,595 additions and 1,889 deletions.
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -1,9 +1,13 @@
 module.exports = {
-  stories: ["../stories/**/*.stories.@(ts|tsx)"],
+  stories: ["../stories/**/*.stories.@(ts|tsx|js|jsx)"],
   addons: [
     "@storybook/addon-essentials",
     "@storybook/addon-links",
     "@storybook/addon-knobs",
     "@storybook/addon-storysource",
   ],
+  // https://storybook.js.org/docs/react/configure/typescript#mainjs-configuration
+  typescript: {
+    check: true, // type-check stories during Storybook build
+  },
 };
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -0,0 +1,5 @@
+// https://storybook.js.org/docs/react/writing-stories/parameters#global-parameters
+export const parameters = {
+  // https://storybook.js.org/docs/react/essentials/actions#automatically-matching-args
+  actions: { argTypesRegex: "^on.*" },
+};
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-web-share",
   "author": "Harsh Zalavadiya",
-  "version": "1.0.16",
+  "version": "1.0.18",
   "license": "MIT",
   "repository": "harshzalavadiya/react-web-share",
   "module": "dist/react-web-share.esm.js",
@@ -27,22 +27,26 @@
   "devDependencies": {
     "@ampproject/filesize": "^4.2.0",
     "@babel/core": "^7.12.10",
-    "@storybook/addon-essentials": "^6.1.11",
-    "@storybook/addon-knobs": "^6.1.11",
-    "@storybook/addon-links": "^6.1.11",
-    "@storybook/addon-storysource": "^6.1.11",
-    "@storybook/addons": "^6.1.11",
-    "@storybook/react": "^6.1.11",
+    "@size-limit/preset-small-lib": "^4.9.1",
+    "@storybook/addon-essentials": "^6.1.14",
+    "@storybook/addon-info": "^5.3.21",
+    "@storybook/addon-knobs": "^6.1.14",
+    "@storybook/addon-links": "^6.1.14",
+    "@storybook/addon-storysource": "^6.1.14",
+    "@storybook/addons": "^6.1.14",
+    "@storybook/react": "^6.1.14",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "babel-loader": "^8.2.2",
-    "husky": "^4.3.6",
+    "eslint-plugin-prettier": "^3.3.1",
+    "husky": "^4.3.8",
     "react": "^16.13.1",
     "react-dom": "^17.0.1",
     "react-is": "^17.0.1",
-    "ts-loader": "^8.0.12",
+    "size-limit": "^4.9.1",
+    "ts-loader": "^8.0.14",
     "tsdx": "^0.14.1",
-    "tslib": "^2.0.3",
+    "tslib": "^2.1.0",
     "typescript": "^4.1.3"
   },
   "husky": {
@@ -54,13 +58,24 @@
     "printWidth": 100,
     "semi": true,
     "singleQuote": false,
-    "trailingComma": "es5"
+    "trailingComma": "es5",
+    "endOfLine": "auto"
   },
   "filesize": {
     "track": [
       "./dist/*.production.min.js"
     ]
   },
+  "size-limit": [
+    {
+      "path": "dist/react-multi-select-component.cjs.production.min.js",
+      "limit": "10 KB"
+    },
+    {
+      "path": "dist/react-multi-select-component.esm.js",
+      "limit": "10 KB"
+    }
+  ],
   "keywords": [
     "react",
     "share",

diff --git a/src/components/backdrop.tsx b/src/components/backdrop.tsx
@@ -17,7 +17,7 @@ const BackdropContainerStyle: CSSProperties = {
 const inEffect = `.web-share-fade{animation:simpleFade 0.5s;animation-fill-mode:both }@keyframes simpleFade{0%{opacity:0 }100%{opacity:1 }}.web-share-fade-in-up{animation:fadeInUp 0.5s;animation-fill-mode:both }@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px) }100%{opacity:1;transform:translateY(0) }}`;
 
 export default function Backdrop({ children, onClose }) {
-  const handleOnClose = e => {
+  const handleOnClose = (e) => {
     if (e.target === e.currentTarget) {
       onClose(e);
     }

diff --git a/src/components/close.tsx b/src/components/close.tsx
@@ -10,10 +10,15 @@ const CloseStyle: CSSProperties = {
   fontSize: "1rem",
 };
 
-export default function CloseButton({ onClose }) {
+interface CloseButtonProps {
+  onClose;
+  closeText?: string;
+}
+
+export default function CloseButton({ onClose, closeText }: CloseButtonProps) {
   return (
     <button style={CloseStyle} aria-label="Close" type="button" onClick={onClose}>
-      Close
+      {closeText || "Close"}
     </button>
   );
 }
diff --git a/src/components/social-icons.tsx b/src/components/social-icons.tsx
@@ -21,7 +21,7 @@ const IconsLisStyle: CSSProperties = {
   gridGap: "1.25rem",
 };
 
-export default function SocialIcons({ onClose, sites, data }: SocialIconsProps) {
+export default function SocialIcons({ onClose, sites, data, closeText }: SocialIconsProps) {
   return (
     <section
       role="dialog"
@@ -31,11 +31,11 @@ export default function SocialIcons({ onClose, sites, data }: SocialIconsProps)
     >
       <Header title={data.title} />
       <div style={IconsLisStyle}>
-        {sites.map(name => (
+        {sites.map((name) => (
           <Icon name={name} key={name} data={data} onClose={onClose} />
         ))}
       </div>
-      <CloseButton onClose={onClose} />
+      <CloseButton onClose={onClose} closeText={closeText} />
     </section>
   );
 }
diff --git a/src/hooks/use-disclosure.tsx b/src/hooks/use-disclosure.tsx
@@ -5,7 +5,7 @@ export default function useDisclosure(isOpenDefault = false) {
 
   const onOpen = useCallback(() => setIsOpen(true), []);
   const onClose = useCallback(() => setIsOpen(false), []);
-  const onToggle = useCallback(() => setIsOpen(state => !state), []);
+  const onToggle = useCallback(() => setIsOpen((state) => !state), []);
 
   return { isOpen, onOpen, onClose, onToggle };
 }
diff --git a/src/index.tsx b/src/index.tsx
@@ -7,7 +7,12 @@ import Portal from "./components/portal";
 import SocialIcons from "./components/social-icons";
 import useDisclosure from "./hooks/use-disclosure";
 
-export const RWebShare = ({ children, data, sites = Object.keys(iconList) }: RWebShareProps) => {
+export const RWebShare = ({
+  children,
+  closeText,
+  data,
+  sites = Object.keys(iconList),
+}: RWebShareProps) => {
   const { onOpen, onClose, isOpen } = useDisclosure();
 
   const shareData = useMemo(
@@ -38,7 +43,7 @@ export const RWebShare = ({ children, data, sites = Object.keys(iconList) }: RWe
       {isOpen && (
         <Portal>
           <Backdrop onClose={onClose}>
-            <SocialIcons onClose={onClose} sites={sites} data={shareData} />
+            <SocialIcons onClose={onClose} sites={sites} data={shareData} closeText={closeText} />
           </Backdrop>
         </Portal>
       )}

diff --git a/src/interfaces.ts b/src/interfaces.ts
@@ -6,12 +6,14 @@ export interface ShareData {
 
 export interface RWebShareProps {
   children: any;
+  closeText?: string;
   data: ShareData;
   sites: string[];
 }
 
 export interface SocialIconsProps {
   onClose;
+  closeText?: string;
   sites: string[];
   data: Required<ShareData>;
 }