Merge pull request #77 from storybookjs/charles-fixes-post-sb8

Small fixes after Storybook 8 launch
storybookjs · Mar 11, 2024 · 6d6ebd7 · 6d6ebd7
2 parents c2dbc12 + 1cb3594
commit 6d6ebd7
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 15 deletions.
diff --git a/package.json b/package.json
@@ -50,7 +50,7 @@
     "@floating-ui/react-dom-interactions": "^0.6.5",
     "@storybook/api": "^6.5.9",
     "@storybook/design-system": "^7.9.0",
-    "@storybook/icons": "^1.2.8",
+    "@storybook/icons": "^1.2.9",
     "@storybook/theming": "^6.5.9",
     "formik": "^2.1.5",
     "human-format": "^0.11.0",

diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
@@ -1,5 +1,5 @@
 import React, { FC, useContext, useMemo } from 'react';
-import { Button, Icon } from '@storybook/design-system';
+import { GithubIcon, DiscordIcon, YoutubeIcon, XIcon } from '@storybook/icons';
 import {
   Title,
   Upper,
@@ -64,25 +64,25 @@ export const Footer: FC<FooterProps> = ({ onSubscribe, subscriberCount, inverse,
             appearance={inverse ? 'inverseOutline' : 'outline'}
             href="http://github.com/storybookjs"
           >
-            <Icon aria-label="Github" icon="github" />
+            <GithubIcon aria-label="Github" />
           </IconLink>
           <IconLink
             appearance={inverse ? 'inverseOutline' : 'outline'}
             href="https://twitter.com/storybookjs"
           >
-            <Icon aria-label="Twitter" icon="twitter" />
+            <XIcon aria-label="Twitter" />
           </IconLink>
           <IconLink
             appearance={inverse ? 'inverseOutline' : 'outline'}
             href="https://discord.gg/storybook"
           >
-            <Icon aria-label="Discord" icon="discord" />
+            <DiscordIcon aria-label="Discord" />
           </IconLink>
           <IconLink
             appearance={inverse ? 'inverseOutline' : 'outline'}
             href="https://www.youtube.com/channel/UCr7Quur3eIyA_oe8FNYexfg"
           >
-            <Icon aria-label="YouTube" icon="youtube" />
+            <YoutubeIcon aria-label="YouTube" />
           </IconLink>
         </SocialLinks>
       </Upper>

diff --git a/src/components/MailingList/MailingListSignup.tsx b/src/components/MailingList/MailingListSignup.tsx
@@ -2,7 +2,7 @@ import React, { useRef, useEffect, FC } from 'react';
 import { styled } from '@storybook/theming';
 import { Formik, FormikValues } from 'formik';
 import { useId } from '@floating-ui/react-dom-interactions';
-import { Button, Input, styles } from '@storybook/design-system';
+import { Input, styles } from '@storybook/design-system';
 import { useMailingListForm } from './useMailingListForm';
 
 const MailingListFormUIWrapper = styled.div`
@@ -20,11 +20,41 @@ const EmailInput = styled(Input)`
   }
 `;
 
-const SendButton = styled(Button)`
+const SendButton = styled.button`
+  border: 0;
+  border-radius: 3em;
+  cursor: pointer;
+  display: inline-block;
+  overflow: hidden;
+  padding: 13px 20px;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  transition: all 150ms ease-out;
+  user-select: none;
+  opacity: 1;
+  margin: 0;
+  font-size: 14px;
+  font-weight: 800;
+  line-height: 1;
+  background: #1ea7fd;
+  transform: translate3d(0, 0, 0);
+  color: #fff;
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
   border-top-right-radius: ${styles.spacing.borderRadius.small}px;
   border-bottom-right-radius: ${styles.spacing.borderRadius.small}px;
+
+  &:hover {
+    background-color: rgb(5, 157, 253);
+    transform: translate3d(0px, -2px, 0px);
+    box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 6px 0px;
+  }
+
+  &:active {
+    transform: translate3d(0px, 0px, 0px);
+    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 3em inset;
+  }
 `;
 
 interface MailingListFormUIProps {
@@ -62,9 +92,7 @@ const MailingListFormUI: FC<MailingListFormUIProps> = ({
         hideLabel
       />
 
-      <SendButton appearance="secondary" type="submit" isUnclickable={isSubmitting}>
-        Subscribe
-      </SendButton>
+      <SendButton type="submit">Subscribe</SendButton>
     </MailingListFormUIWrapper>
   );
 };

diff --git a/yarn.lock b/yarn.lock
@@ -3133,10 +3133,10 @@
   dependencies:
     "@types/jest" ">=26.0.0"
 
-"@storybook/icons@^1.2.8":
-  version "1.2.8"
-  resolved "https://registry.npmjs.org/@storybook/icons/-/icons-1.2.8.tgz#f530688ee000b487783f2d9cf7bced92e2c32915"
-  integrity sha512-YMF5DiBvMiAVH6qd6Cf6WCwZq3D1OZNxsKtZVFBlzJXqlZb1CLEuCHy5MwL4WI5mzb6q8MJsLYpVMoH84OzUpQ==
+"@storybook/icons@^1.2.9":
+  version "1.2.9"
+  resolved "https://registry.npmjs.org/@storybook/icons/-/icons-1.2.9.tgz#bb4a51a79e186b62e2dd0e04928b8617ac573838"
+  integrity sha512-cOmylsz25SYXaJL/gvTk/dl3pyk7yBFRfeXTsHvTA3dfhoU/LWSq0NKL9nM7WBasJyn6XPSGnLS4RtKXLw5EUg==
 
 "@storybook/[email protected]", "@storybook/instrumenter@^6.4.0":
   version "6.5.9"