[C] improvements to slideout and share buttons

lsst-epo · Nov 29, 2023 · b7fd15b · b7fd15b
1 parent f7a142b
commit b7fd15b
Show file tree

Hide file tree

Showing 21 changed files with 264 additions and 95 deletions.
diff --git a/packages/epo-react-lib/CHANGELOG.md b/packages/epo-react-lib/CHANGELOG.md
@@ -52,3 +52,11 @@
 
 - add signature overloads to `token`
 - export `ImageShape`, `Option`, and `ListBoxOption` from their modules
+
+## 2.0.10
+
+- add `showText` to share buttons to optionally display labels
+- add links as a valid `menuitem` in Slideout
+- add `InfoCircle` icon
+- reset all icons to stroke-width: 0
+- minor refactor to use CSS variables for backgrounds and hovers.
diff --git a/packages/epo-react-lib/package.json b/packages/epo-react-lib/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@rubin-epo/epo-react-lib",
   "description": "Rubin Observatory Education & Public Outreach team React UI library.",
-  "version": "2.0.9",
+  "version": "2.0.10",
   "author": "Rubin EPO",
   "license": "MIT",
   "homepage": "https://lsst-epo.github.io/epo-react-lib",

diff --git a/packages/epo-react-lib/src/atomic/Share/BaseButton/BaseButton.tsx b/packages/epo-react-lib/src/atomic/Share/BaseButton/BaseButton.tsx
@@ -6,22 +6,23 @@ interface BaseButtonProps {
   label: string;
   icon: string;
   iconSize?: number;
-  bgColor?: string;
-  bgHoverColor?: string;
+  showText?: boolean;
 }
 
 const BaseButton: FunctionComponent<BaseButtonProps> = ({
   label,
   icon,
   iconSize,
-  bgColor = "#000",
-  bgHoverColor = "#000",
+  showText = false,
 }) => {
   return (
-    <Styled.Wrapper $bgColor={bgColor} $bgHoverColor={bgHoverColor}>
-      <IconComposer icon={icon} size={iconSize} />
-      <Styled.SrText>{label}</Styled.SrText>
-    </Styled.Wrapper>
+    <>
+      {showText && label}
+      <Styled.Wrapper>
+        <IconComposer icon={icon} size={iconSize} />
+        {!showText && <Styled.SrText>{label}</Styled.SrText>}
+      </Styled.Wrapper>
+    </>
   );
 };
 

diff --git a/packages/epo-react-lib/src/atomic/Share/BaseButton/styles.ts b/packages/epo-react-lib/src/atomic/Share/BaseButton/styles.ts
@@ -1,29 +1,17 @@
 import { ScreenreaderText } from "@/styles/utils";
 import styled from "styled-components";
 
-interface WrapperProps {
-  $bgColor: string;
-  $bgHoverColor: string;
-}
-
-export const Wrapper = styled.div<WrapperProps>`
+export const Wrapper = styled.div`
+  background-color: var(--share-background-color, #000);
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 40px;
-  height: 40px;
+  width: var(--share-size, 40px);
+  height: var(--share-size, 40px);
   border: transparent solid 2px;
   border-radius: 50%;
   color: var(--white);
   transition: background-color 0.2s, border-color 0.2s;
-
-  ${({ $bgColor, $bgHoverColor }) => `
-    background-color: ${$bgColor};
-
-    &:hover {
-      background-color: ${$bgHoverColor};
-    }
-  `}
 `;
 
 export const SrText = ScreenreaderText;
diff --git a/packages/epo-react-lib/src/atomic/Share/CopyUrlButton.stories.tsx b/packages/epo-react-lib/src/atomic/Share/CopyUrlButton.stories.tsx
@@ -1,8 +1,8 @@
-import { ComponentMeta, ComponentStoryObj } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 
 import CopyUrlButton from "./CopyUrlButton";
 
-const meta: ComponentMeta<typeof CopyUrlButton> = {
+const meta: Meta<typeof CopyUrlButton> = {
   component: CopyUrlButton,
   argTypes: {
     url: {
@@ -18,11 +18,20 @@ const meta: ComponentMeta<typeof CopyUrlButton> = {
         },
       },
     },
+    showText: {
+      description: "Shows the share button's label",
+      control: "boolean",
+      table: {
+        type: {
+          summary: "boolean",
+        },
+      },
+    },
   },
 };
 export default meta;
 
-export const Primary: ComponentStoryObj<typeof CopyUrlButton> = {
+export const Primary: StoryObj<typeof CopyUrlButton> = {
   args: {
     url: "https://rubinobservatory.org/",
   },

diff --git a/packages/epo-react-lib/src/atomic/Share/CopyUrlButton.tsx b/packages/epo-react-lib/src/atomic/Share/CopyUrlButton.tsx
@@ -4,9 +4,9 @@ import { useTranslation } from "react-i18next";
 import * as Styled from "./styles";
 import BaseButton from "./BaseButton/BaseButton";
 
-const CopyUrlButton: FunctionComponent<Omit<ShareButtonProps, "title">> = ({
-  url,
-}) => {
+const CopyUrlButton: FunctionComponent<
+  Pick<ShareButtonProps, "url" | "className" | "showText">
+> = ({ url, className, showText }) => {
   const { t } = useTranslation();
 
   function onClick() {
@@ -16,13 +16,12 @@ const CopyUrlButton: FunctionComponent<Omit<ShareButtonProps, "title">> = ({
   }
 
   return (
-    <Styled.CopyUrlButton onClick={onClick}>
+    <Styled.CopyUrlButton {...{ className, onClick }}>
       <BaseButton
         label={t("share.copy_url")}
         icon="shareCopyUrl"
         iconSize={20}
-        bgColor="var(--turquoise70)"
-        bgHoverColor="#7ac1c2"
+        showText={showText}
       />
     </Styled.CopyUrlButton>
   );

diff --git a/packages/epo-react-lib/src/atomic/Share/EmailButton.stories.tsx b/packages/epo-react-lib/src/atomic/Share/EmailButton.stories.tsx
@@ -1,8 +1,8 @@
-import { ComponentMeta, ComponentStoryObj } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 
 import EmailButton from "./EmailButton";
 
-const meta: ComponentMeta<typeof EmailButton> = {
+const meta: Meta<typeof EmailButton> = {
   component: EmailButton,
   argTypes: {
     url: {
@@ -30,11 +30,20 @@ const meta: ComponentMeta<typeof EmailButton> = {
         },
       },
     },
+    showText: {
+      description: "Shows the share button's label",
+      control: "boolean",
+      table: {
+        type: {
+          summary: "boolean",
+        },
+      },
+    },
   },
 };
 export default meta;
 
-export const Primary: ComponentStoryObj<typeof EmailButton> = {
+export const Primary: StoryObj<typeof EmailButton> = {
   args: {
     url: "https://rubinobservatory.org/",
     title: "New image gallery posts!",

diff --git a/packages/epo-react-lib/src/atomic/Share/EmailButton.tsx b/packages/epo-react-lib/src/atomic/Share/EmailButton.tsx
@@ -1,28 +1,33 @@
-import { EmailShareButton } from "react-share";
 import { useTranslation } from "react-i18next";
 import BaseButton from "./BaseButton/BaseButton";
 import { FunctionComponent } from "react";
 import { ShareButtonProps } from "@/types/share-button";
+import * as Styled from "./styles";
 
-const EmailButton: FunctionComponent<ShareButtonProps> = ({ title, url }) => {
+const EmailButton: FunctionComponent<ShareButtonProps> = ({
+  title,
+  url,
+  className,
+  showText,
+  ...shareProps
+}) => {
   const { t } = useTranslation();
 
   return (
-    <EmailShareButton
-      url={url}
+    <Styled.EmailShareButton
       subject={t("share.email_subject", {
         title,
       })}
       body={url}
+      {...{ ...shareProps, className, url }}
     >
       <BaseButton
         label={t("share.email")}
         icon="shareEmail"
         iconSize={40}
-        bgColor="var(--turquoise85)"
-        bgHoverColor="#7fb3b1"
+        showText={showText}
       />
-    </EmailShareButton>
+    </Styled.EmailShareButton>
   );
 };
 

diff --git a/packages/epo-react-lib/src/atomic/Share/FacebookButton.stories.tsx b/packages/epo-react-lib/src/atomic/Share/FacebookButton.stories.tsx
@@ -1,8 +1,8 @@
-import { ComponentMeta, ComponentStoryObj } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 
 import FacebookButton from "./FacebookButton";
 
-const meta: ComponentMeta<typeof FacebookButton> = {
+const meta: Meta<typeof FacebookButton> = {
   component: FacebookButton,
   argTypes: {
     url: {
@@ -30,11 +30,20 @@ const meta: ComponentMeta<typeof FacebookButton> = {
         },
       },
     },
+    showText: {
+      description: "Shows the share button's label",
+      control: "boolean",
+      table: {
+        type: {
+          summary: "boolean",
+        },
+      },
+    },
   },
 };
 export default meta;
 
-export const Primary: ComponentStoryObj<typeof FacebookButton> = {
+export const Primary: StoryObj<typeof FacebookButton> = {
   args: {
     url: "https://rubinobservatory.org/",
     title: "New image gallery posts!",

diff --git a/packages/epo-react-lib/src/atomic/Share/FacebookButton.tsx b/packages/epo-react-lib/src/atomic/Share/FacebookButton.tsx
@@ -1,29 +1,31 @@
-import { FacebookShareButton } from "react-share";
 import { useTranslation } from "react-i18next";
 import BaseButton from "./BaseButton/BaseButton";
 import { FunctionComponent } from "react";
 import { ShareButtonProps } from "@/types/share-button";
+import * as Styled from "./styles";
 
 const FacebookButton: FunctionComponent<ShareButtonProps> = ({
   url,
   title,
+  className,
+  showText,
+  ...shareProps
 }) => {
   const { t } = useTranslation();
 
   return (
-    <FacebookShareButton
-      url={url}
+    <Styled.FacebookShareButton
       quote={t("share.facebook_quote", { title })}
       hashtag="#RubinObs"
+      {...{ ...shareProps, className, url }}
     >
       <BaseButton
         label="Facebook"
         icon="shareFacebook"
         iconSize={32}
-        bgColor="#3d5a99"
-        bgHoverColor="#98a5cb"
+        showText={showText}
       />
-    </FacebookShareButton>
+    </Styled.FacebookShareButton>
   );
 };
 

diff --git a/packages/epo-react-lib/src/atomic/Share/TwitterButton.stories.tsx b/packages/epo-react-lib/src/atomic/Share/TwitterButton.stories.tsx
@@ -1,8 +1,8 @@
-import { ComponentMeta, ComponentStoryObj } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 
 import TwitterButton from "./TwitterButton";
 
-const meta: ComponentMeta<typeof TwitterButton> = {
+const meta: Meta<typeof TwitterButton> = {
   component: TwitterButton,
   argTypes: {
     url: {
@@ -30,11 +30,20 @@ const meta: ComponentMeta<typeof TwitterButton> = {
         },
       },
     },
+    showText: {
+      description: "Shows the share button's label",
+      control: "boolean",
+      table: {
+        type: {
+          summary: "boolean",
+        },
+      },
+    },
   },
 };
 export default meta;
 
-export const Primary: ComponentStoryObj<typeof TwitterButton> = {
+export const Primary: StoryObj<typeof TwitterButton> = {
   args: {
     url: "https://rubinobservatory.org/",
     title: "New image gallery posts!",

diff --git a/packages/epo-react-lib/src/atomic/Share/TwitterButton.tsx b/packages/epo-react-lib/src/atomic/Share/TwitterButton.tsx
@@ -1,27 +1,31 @@
 import { FunctionComponent } from "react";
 import { ShareButtonProps } from "@/types/share-button";
-
-import { TwitterShareButton } from "react-share";
 import { useTranslation } from "react-i18next";
 import BaseButton from "./BaseButton/BaseButton";
+import * as Styled from "./styles";
 
-const TwitterButton: FunctionComponent<ShareButtonProps> = ({ url, title }) => {
+const TwitterButton: FunctionComponent<ShareButtonProps> = ({
+  url,
+  title,
+  className,
+  showText,
+  ...shareProps
+}) => {
   const { t } = useTranslation();
 
   return (
-    <TwitterShareButton
-      url={url}
+    <Styled.TwitterShareButton
       title={t("share.twitter_title", { title })}
       hashtags={["RubinObs"]}
+      {...{ ...shareProps, url, className }}
     >
       <BaseButton
         label="Twitter"
         icon="shareTwitter"
         iconSize={44}
-        bgColor="#38a8e0"
-        bgHoverColor="#98d0f1"
+        showText={showText}
       />
-    </TwitterShareButton>
+    </Styled.TwitterShareButton>
   );
 };