fix: add ripple to buttons

skynexui · Dec 22, 2021 · 0742fc4 · 0742fc4 · vercel · Dec 22, 2021
1 parent f71504a
commit 0742fc4
Show file tree

Hide file tree

Showing 7 changed files with 133 additions and 60 deletions.
diff --git a/lib/components/box/box.stories.mdx b/lib/components/box/box.stories.mdx
@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas } from '@storybook/addon-docs';
 import { Box } from '@lib/components';
 
 

diff --git a/lib/components/button/button.stories.mdx b/lib/components/button/button.stories.mdx
@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
 import { Button } from '@lib/components';
 
 <Meta title="Components/Button" component={Button} />
@@ -22,16 +22,19 @@ Button is the component that you use, for get user taps and clicks.
 
 <Canvas>
   <Story name="Button Component with buttonColors">
-    <Button
-      variant="secondary"
-      size="xl"
-      label="Button Component with provided colors"
-      buttonColors={{
-        contrastColor: '#FFFFFF',
-        mainColor: '#C65D21',
-        mainColorLight: '#E67635',
-        mainColorStrong: '#AB4E19',
-      }}
-    />
+    {(args) => (
+      <Button
+        variant="secondary"
+        size="xl"
+        label="Button Component with provided colors"
+        buttonColors={{
+          contrastColor: '#FFFFFF',
+          mainColor: '#C65D21',
+          mainColorLight: '#E67635',
+          mainColorStrong: '#AB4E19',
+        }}
+        {...args}
+      />
+    )}
   </Story>
 </Canvas>
diff --git a/lib/components/button/button.tsx b/lib/components/button/button.tsx
@@ -1,5 +1,6 @@
 /* eslint-disable react/button-has-type */
 import React, { ChangeEventHandler } from 'react';
+import Ripples from 'react-ripples';
 import { StyleSheet } from '@lib/core/stylesheet/stylesheet';
 import { BoxBase } from '@lib/components/box/box-base';
 import { TypographyVariants } from '@lib/core/typography/typography';
@@ -49,21 +50,17 @@ const buttonStyles = {
       backgroundColor: mainColor,
     },
   }),
-  ghost: ({
-    mainColor,
-    mainColorStrong,
-    contrastColor,
-  }: ButtonColorValues) => ({
+  ghost: ({ mainColor, mainColorLight, contrastColor }: ButtonColorValues) => ({
     color: mainColor,
     borderColor: 'transparent',
     backgroundColor: 'transparent',
     hover: {
       color: contrastColor,
-      backgroundColor: mainColorStrong,
+      backgroundColor: mainColorLight,
     },
     focus: {
       color: contrastColor,
-      backgroundColor: mainColorStrong,
+      backgroundColor: mainColorLight,
     },
   }),
 } as const;
@@ -168,45 +165,47 @@ export function Button({
     buttonStyles[buttonVariantToStyle[props.variant]](colorSet);
 
   return (
-    <BoxBase
-      as="button"
-      styleSheet={{
-        ...buttonSize,
-        ...buttonStyle,
-        transition: '.2s ease-in-out',
-        borderRadius,
-        display: 'inline-flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        outline: '0',
-        border: '1px solid transparent',
-        cursor: 'pointer',
-        ...styleSheet,
-        disabled: {
-          ...styleSheet.disabled,
-          cursor: 'not-allowed',
-          opacity: '.65',
-        },
-        hover: {
-          ...buttonStyle.hover,
-          ...styleSheet.hover,
-        },
-        focus: {
-          ...buttonStyle.focus,
-          ...styleSheet.focus,
-        },
-      }}
-      {...props}
-    >
-      <Text
-        variant={textVariant as TypographyVariants}
+    <Ripples during={1000} color="rgba(255,255,255,0.2)">
+      <BoxBase
+        as="button"
         styleSheet={{
-          color: 'inherit',
+          ...buttonSize,
+          ...buttonStyle,
+          transition: '.2s ease-in-out',
+          borderRadius,
+          display: 'inline-flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          outline: '0',
+          border: '1px solid transparent',
+          cursor: 'pointer',
+          ...styleSheet,
+          disabled: {
+            ...styleSheet.disabled,
+            cursor: 'not-allowed',
+            opacity: '.65',
+          },
+          hover: {
+            ...buttonStyle.hover,
+            ...styleSheet.hover,
+          },
+          focus: {
+            ...buttonStyle.focus,
+            ...styleSheet.focus,
+          },
         }}
+        {...props}
       >
-        {label}
-      </Text>
-    </BoxBase>
+        <Text
+          variant={textVariant as TypographyVariants}
+          styleSheet={{
+            color: 'inherit',
+          }}
+        >
+          {label}
+        </Text>
+      </BoxBase>
+    </Ripples>
   );
 }
 

diff --git a/lib/components/provider/provider.stories.mdx b/lib/components/provider/provider.stories.mdx
@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas } from '@storybook/addon-docs';
 import { Provider } from '@lib/components';
 
 

diff --git a/lib/components/text/text.stories.mdx b/lib/components/text/text.stories.mdx
@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
 import { Text } from '@lib/components';
 
 

diff --git a/package.json b/package.json
@@ -34,7 +34,8 @@
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@fortawesome/react-fontawesome": "^0.1.16",
     "@testing-library/react": "^12.1.2",
-    "node-fetch": "^3.1.0"
+    "node-fetch": "^3.1.0",
+    "react-ripples": "^2.2.1"
   },
   "devDependencies": {
     "@babel/core": "7.16.0",

diff --git a/yarn.lock b/yarn.lock
@@ -1750,6 +1750,61 @@
     "@types/yargs" "^16.0.0"
     chalk "^4.0.0"
 
+"@material/animation@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@material/animation/-/animation-1.0.0.tgz#dfd8575c8b031203917dc838ac0e3c0fe0f6709b"
+  integrity sha512-Ed5/vggn6ZhSJ87yn3ZS1d826VJNFz73jHF2bSsgRtHDoB8KCuOwQMfdgAgDa4lKDF6CDIPCKBZPKrs2ubehdw==
+  dependencies:
+    tslib "^1.9.3"
+
+"@material/base@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@material/base/-/base-1.0.0.tgz#e4ef0b22c54aa887af94f5988fb1c0cb3245beba"
+  integrity sha512-5dxFp46x5FA+Epg6YHLzN+5zRt9S2wR84UdvVAEJ1egea94m9UHUg7y9tAnNSN16aexRSywmzyLwPr+i8PGEYA==
+  dependencies:
+    tslib "^1.9.3"
+
+"@material/dom@^1.0.0", "@material/dom@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@material/dom/-/dom-1.1.0.tgz#3bd3d1a3415b4181118fecb182d93beda56a6f8c"
+  integrity sha512-+HWW38ZaM2UBPu4+7QCusLDSf4tFT31rsEXHkTkxYSg/QpDivfPx6YDz4OmYtafmhPR1d1YjqB3MYysUHdodyw==
+  dependencies:
+    tslib "^1.9.3"
+
+"@material/feature-targeting@^0.44.1":
+  version "0.44.1"
+  resolved "https://registry.yarnpkg.com/@material/feature-targeting/-/feature-targeting-0.44.1.tgz#afafc80294e5efab94bee31a187273d43d34979a"
+  integrity sha512-90cc7njn4aHbH9UxY8qgZth1W5JgOgcEdWdubH1t7sFkwqFxS5g3zgxSBt46TygFBVIXNZNq35Xmg80wgqO7Pg==
+
+"@material/react-ripple@^0.15.0":
+  version "0.15.0"
+  resolved "https://registry.yarnpkg.com/@material/react-ripple/-/react-ripple-0.15.0.tgz#70adfec74942b4b5dab130e71cc5d0734f2257bb"
+  integrity sha512-8YPEpiQNOaq3QtMc1DBxVVqOg/XnoWDj/EJ8eW0xmB4HvXElztKNTZoIpAAuQMZ8jbyZkRJRiFDa33u+wLFDCg==
+  dependencies:
+    "@material/dom" "^1.0.0"
+    "@material/ripple" "^1.0.0"
+    classnames "^2.2.6"
+    utility-types "^3.2.1"
+
+"@material/ripple@^1.0.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@material/ripple/-/ripple-1.1.0.tgz#236016fb30c8366faf143297df2c38166d84ffbc"
+  integrity sha512-mkfDBZAmxjpRG7V9TrfOmLxt1g/wvGHCXtYPgvH7W8ozjf53edqxLOFENEdvHbie27y9nyixzXn0gzU0HnxSeA==
+  dependencies:
+    "@material/animation" "^1.0.0"
+    "@material/base" "^1.0.0"
+    "@material/dom" "^1.1.0"
+    "@material/feature-targeting" "^0.44.1"
+    "@material/theme" "^1.1.0"
+    tslib "^1.9.3"
+
+"@material/theme@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@material/theme/-/theme-1.1.0.tgz#9c95dd804168c23c30589fcf09ecc5af5b3d1adc"
+  integrity sha512-YYUV9Rhbx4r/EMb/zoOYJUWjhXChNaLlH1rqt3vpNVyxRcxGqoVMGp5u1XALBCFiD9dACPKLIkKyRYa928nmPQ==
+  dependencies:
+    "@material/feature-targeting" "^0.44.1"
+
 "@mdx-js/loader@^1.6.22":
   version "1.6.22"
   resolved "https://registry.yarnpkg.com/@mdx-js/loader/-/loader-1.6.22.tgz#d9e8fe7f8185ff13c9c8639c048b123e30d322c4"
@@ -5352,6 +5407,11 @@ classnames@2.2.6:
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
   integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
 
+classnames@^2.2.6:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
+  integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
+
 clean-css@^4.2.3:
   version "4.2.4"
   resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.4.tgz#733bf46eba4e607c6891ea57c24a989356831178"
@@ -13532,6 +13592,11 @@ react-refresh@^0.10.0:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.10.0.tgz#2f536c9660c0b9b1d500684d9e52a65e7404f7e3"
   integrity sha512-PgidR3wST3dDYKr6b4pJoqQFpPGNKDSCDx4cZoshjXipw3LzO7mG1My2pwEzz2JVkF+inx3xRpDeQLFQGH/hsQ==
 
+react-ripples@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/react-ripples/-/react-ripples-2.2.1.tgz#bab529eb10e06f7e660561d97e2442a38b9f4687"
+  integrity sha512-TfLjgZICQlsYCN2iX4fdeZNjoDzhJVC7r+R3irqyaNvCtWezouS9j+sE+nwSk747irtV8RKRDHmwMmsNBOw8Qg==
+
 react-router-dom@^6.0.0:
   version "6.1.1"
   resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.1.1.tgz#ed59376ff9115bc49227e87982a32e91e9530ca3"
@@ -15611,7 +15676,7 @@ tsconfig-paths@^3.11.0, tsconfig-paths@^3.9.0:
     minimist "^1.2.0"
     strip-bom "^3.0.0"
 
-tslib@^1.8.1, tslib@^1.9.0:
+tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
@@ -16097,6 +16162,11 @@ utila@~0.4:
   resolved "https://registry.yarnpkg.com/utila/-/utila-0.4.0.tgz#8a16a05d445657a3aea5eecc5b12a4fa5379772c"
   integrity sha1-ihagXURWV6Oupe7MWxKk+lN5dyw=
 
+utility-types@^3.2.1:
+  version "3.10.0"
+  resolved "https://registry.yarnpkg.com/utility-types/-/utility-types-3.10.0.tgz#ea4148f9a741015f05ed74fd615e1d20e6bed82b"
+  integrity sha512-O11mqxmi7wMKCo6HKFt5AhO4BwY3VV68YU07tgxfz8zJTIxr4BpsezN49Ffwy9j3ZpwwJp4fkRwjRzq3uWE6Rg==
+
 utils-merge@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"