@sproutsocial/racine 12.15.0 → 12.16.1

package/__flow__/KeyboardKey/index.test.js

@@ -1,3 +1,4 @@
+// @flow
 import React from "react";
 import { render } from "../utils/react-testing-library";
 import KeyboardKey from "./";

package/__flow__/Label/index.stories.js

@@ -1,3 +1,4 @@
+// @flow
 import React from "react";
 import { text } from "@storybook/addon-knobs";
 
@@ -8,7 +9,7 @@ export default {
 };
 
 export const defaultStory = () => (
-  <Label>{text("children", "Example label")}</Label>
+  <Label htmlFor="default">{text("children", "Example label")}</Label>
 );
 
 defaultStory.story = {

package/__flow__/Label/index.test.js

@@ -1,3 +1,4 @@
+// @flow
 import React from "react";
 import { render } from "../utils/react-testing-library";
 import Label from "./";

package/__flow__/Link/index.stories.js

@@ -1,3 +1,4 @@
+// @flow
 import React from "react";
 import { boolean, text } from "@storybook/addon-knobs";
 import { Box } from "../index";

package/__flow__/Link/index.test.js

@@ -1,3 +1,4 @@
+// @flow
 import React from "react";
 import "jest-styled-components";
 import { render } from "../utils/react-testing-library";

package/__flow__/Listbox/index.stories.js

@@ -1,6 +1,8 @@
+// @flow
 import React from "react";
 import Listbox, { ListboxButton } from "./index";
 import { MenuButton } from "../Menu";
+import type { TypeListboxButtonProps } from "../Menu/index.flow";
 import { useMultiselect, useSelect } from "../utils/hooks";
 import Icon from "../Icon";
 import Button from "../Button";
@@ -59,13 +61,14 @@ const BaseListbox = () => {
   );
 };
 
-const BaseListboxMultiselect = (props) => {
+const BaseListboxMultiselect = (props: $Shape<TypeListboxButtonProps>) => {
   const { value, onChange, onClear } = useMultiselect();
   const currentOption =
     value.length > 1 ? value.length + " selected" : value.length ? value : null;
 
   return (
     <ListboxButton
+      {...props}
       minWidth="140px"
       content={
         <Listbox
@@ -86,7 +89,6 @@ const BaseListboxMultiselect = (props) => {
           )}
         </Listbox>
       }
-      {...props}
     >
       {currentOption || "Select a fruit"}
     </ListboxButton>
@@ -198,18 +200,22 @@ export const BigVirtualizedExample = () => {
 };
 
 const ListboxFilterInput = () => {
-  const { value, onChange } = useSelect({ initialValue: null });
-  const { inputValue } = useSelect({ initialValue: null });
+  const { value, onChange } = useSelect();
   return (
     <>
-      <Text>{inputValue}</Text>
+      <Text>{value}</Text>
       <ListboxButton
         minWidth="200px"
         aria-label="Favorite fruit"
         content={
           <Listbox onChange={onChange} value={value} width="200px">
             <Listbox.Group>
-              <Listbox.FilterInput placeholder="Filter items" mb={300} />
+              <Listbox.FilterInput
+                id="list-filter"
+                name="list-filter"
+                placeholder="Filter items"
+                mb={300}
+              />
               <Listbox.Item value="Apple">Apple</Listbox.Item>
               <Listbox.Item value="Orange">Orange</Listbox.Item>
               <Listbox.Item value="Banana">Banana</Listbox.Item>

package/__flow__/Listbox/index.test.js

@@ -1,3 +1,4 @@
+// @flow
 import React from "react";
 import {
   render,

package/__flow__/Loader/index.js

@@ -2,7 +2,7 @@
 import * as React from "react";
 import Container, { Text } from "./styles";
 
-type TypeProps = {
+export type TypeProps = {
   size: "small" | "large",
   /** Text for the loader. This text is not visible, but is used for accessibility purposed */
   text: string,

package/__flow__/Loader/index.stories.js

@@ -1,12 +1,13 @@
+// @flow
 import React from "react";
-import Loader from "./";
+import Loader, { type TypeProps } from "./";
 
 export default {
   title: "Loader",
   component: Loader,
 };
 
-export const defaultStory = (args) => <Loader {...args} />;
+export const defaultStory = (args: TypeProps) => <Loader {...args} />;
 
 defaultStory.args = {
   text: "Content loading",
@@ -16,7 +17,7 @@ defaultStory.story = {
   name: "Default",
 };
 
-export const small = (args) => <Loader {...args} />;
+export const small = (args: TypeProps) => <Loader {...args} />;
 
 small.args = {
   text: "Content loading",
@@ -27,7 +28,7 @@ small.story = {
   name: "Small",
 };
 
-export const noDelay = (args) => <Loader {...args} />;
+export const noDelay = (args: TypeProps) => <Loader {...args} />;
 
 noDelay.args = {
   text: "Content loading",

package/__flow__/Loader/index.test.js

@@ -1,3 +1,4 @@
+// @flow
 import React from "react";
 import { render } from "../utils/react-testing-library";
 import "jest-styled-components";

package/__flow__/LoaderButton/index.js

@@ -14,7 +14,9 @@ type TypeLoaderButtonProps = TypeButtonProps & {
 
 const getColor = (appearance) => {
   switch (appearance) {
+    /** "default" is @deprecated in favour of unstyled */
     case "default":
+    case "unstyled":
     case "outline":
     case "secondary":
       return "dark";
@@ -44,7 +46,7 @@ const CustomLoader = styled(Loader)`
 `;
 
 export const LoaderButton = ({
-  appearance = "default",
+  appearance = "unstyled",
   isLoading: _isLoading = false,
   disabled,
   loaderLabel,

package/__flow__/LoaderButton/index.stories.js

@@ -1,3 +1,4 @@
+// @flow
 import React from "react";
 import LoaderButton from "./index";
 import Box from "../Box";

package/__flow__/LoaderButton/index.test.js

@@ -1,3 +1,4 @@
+// @flow
 import React from "react";
 import { render } from "../utils/react-testing-library";
 import "jest-styled-components";

package/__flow__/LogoViewBoxes.js

@@ -1 +1 @@
-module.exports = {"bitly-dark":"0 0 140 64","bitly":"0 0 140 64","canva-dark":"0 0 140 140","canva":"0 0 140 140","dropbox-dark":"0 0 140 119","dropbox":"0 0 140 119","facebook-audience-network-dark":"0 0 140 145","facebook-audience-network":"0 0 140 145","facebook-dark":"0 0 141 139","facebook-groups-dark":"0 0 140 140","facebook-groups":"0 0 140 140","facebook-shops-dark":"0 0 141 155","facebook-shops":"0 0 141 155","facebook":"0 0 141 139","feedly-dark":"0 0 141 123","feedly":"0 0 141 123","glassdoor-dark":"0 0 140 196","glassdoor":"0 0 140 196","google-analytics-dark":"0 0 140 160","google-analytics":"0 0 140 160","google-business-messages-dark":"0 0 140 140","google-business-messages":"0 0 140 140","google-drive-dark":"0 0 140 126","google-drive":"0 0 140 126","google-my-business-dark":"0 0 140 123","google-my-business":"0 0 140 123","hubspot-dark":"0 0 140 156","hubspot":"0 0 140 156","instagram-dark":"0 0 140 140","instagram":"0 0 140 140","linkedin-audience-network-dark":"0 0 140 141","linkedin-audience-network":"0 0 140 141","linkedin-dark":"0 0 140 140","linkedin":"0 0 140 140","marketo-dark":"0 0 140 164","marketo":"0 0 140 164","messenger-dark":"0 0 140 141","messenger":"0 0 140 140","microsoft-dynamics-dark":"0 0 140 227","microsoft-dynamics":"0 0 140 227","pinterest-dark":"0 0 140 141","pinterest":"0 0 140 141","reddit-dark":"0 0 140 140","reddit":"0 0 140 140","salesforce-dark":"0 0 140 99","salesforce":"0 0 140 99","shopify-dark":"0 0 140 159","shopify":"0 0 140 159","slack-dark":"0 0 140 140","slack":"0 0 140 140","tiktok-dark":"0 0 140 159","tiktok":"0 0 140 159","tripadvisor-dark":"0 0 140 140","tripadvisor":"0 0 140 140","tumblr-dark":"0 0 140 140","tumblr":"0 0 140 140","twitter-audience-network-dark":"0 0 140 140","twitter-audience-network":"0 0 140 140","twitter-dark":"0 0 140 114","twitter":"0 0 140 114","whatsapp-dark":"0 0 140 140","whatsapp":"0 0 140 141","woocommerce-dark":"0 0 140 84","woocommerce":"0 0 140 84","yelp-dark":"0 0 140 159","yelp":"0 0 140 159","youtube-dark":"0 0 140 99","youtube":"0 0 140 99","zendesk-dark":"0 0 140 107","zendesk":"0 0 140 107"};
+module.exports = {"bitly-dark":"0 0 140 64","bitly":"0 0 140 64","canva-dark":"0 0 140 140","canva":"0 0 140 140","dropbox-dark":"0 0 140 119","dropbox-lockup-dark":"0 0 291 57","dropbox-lockup":"0 0 291 57","dropbox-wordmark-dark":"0 0 308 71","dropbox-wordmark":"0 0 308 71","dropbox":"0 0 140 119","facebook-audience-network-dark":"0 0 140 145","facebook-audience-network":"0 0 140 145","facebook-dark":"0 0 141 139","facebook-groups-dark":"0 0 140 140","facebook-groups":"0 0 140 140","facebook-shops-dark":"0 0 141 155","facebook-shops":"0 0 141 155","facebook":"0 0 141 139","feedly-dark":"0 0 141 123","feedly":"0 0 141 123","glassdoor-dark":"0 0 140 196","glassdoor":"0 0 140 196","google-analytics-dark":"0 0 140 160","google-analytics":"0 0 140 160","google-business-messages-dark":"0 0 140 140","google-business-messages":"0 0 140 140","google-drive-dark":"0 0 140 126","google-drive":"0 0 140 126","google-my-business-dark":"0 0 140 123","google-my-business":"0 0 140 123","hubspot-dark":"0 0 140 156","hubspot":"0 0 140 156","instagram-dark":"0 0 140 140","instagram":"0 0 140 140","linkedin-audience-network-dark":"0 0 140 141","linkedin-audience-network":"0 0 140 141","linkedin-dark":"0 0 140 140","linkedin":"0 0 140 140","marketo-dark":"0 0 140 164","marketo":"0 0 140 164","messenger-dark":"0 0 140 141","messenger":"0 0 140 140","microsoft-dynamics-dark":"0 0 140 227","microsoft-dynamics":"0 0 140 227","pinterest-dark":"0 0 140 141","pinterest":"0 0 140 141","reddit-dark":"0 0 140 140","reddit":"0 0 140 140","salesforce-dark":"0 0 140 99","salesforce":"0 0 140 99","shopify-dark":"0 0 140 159","shopify":"0 0 140 159","slack-dark":"0 0 140 140","slack":"0 0 140 140","tiktok-dark":"0 0 140 159","tiktok":"0 0 140 159","tripadvisor-dark":"0 0 140 140","tripadvisor":"0 0 140 140","tumblr-dark":"0 0 140 140","tumblr":"0 0 140 140","twitter-audience-network-dark":"0 0 140 140","twitter-audience-network":"0 0 140 140","twitter-dark":"0 0 140 114","twitter":"0 0 140 114","whatsapp-dark":"0 0 140 140","whatsapp":"0 0 140 141","woocommerce-dark":"0 0 140 84","woocommerce":"0 0 140 84","yelp-dark":"0 0 140 159","yelp":"0 0 140 159","youtube-dark":"0 0 140 99","youtube":"0 0 140 99","zendesk-dark":"0 0 140 107","zendesk-lockup-dark":"0 0 160 115","zendesk-lockup":"0 0 160 115","zendesk-wordmark-dark":"0 0 350 67","zendesk-wordmark":"0 0 350 67","zendesk":"0 0 140 107"};

package/__flow__/Menu/index.flow.js

@@ -98,4 +98,6 @@ export type TypeListboxButtonProps = {
   size?: "large" | "default" | "small",
   content: React.Node,
   popoutProps?: $Shape<React.ElementConfig<typeof Popout>>,
+  "aria-label"?: string,
+  "aria-labelledby"?: string,
 };

package/__flow__/Menu/index.stories.js

@@ -1,5 +1,7 @@
+// @flow
 import React, { useContext } from "react";
 import Menu, { MenuButton, MenuCheckbox } from "./index";
+import type { TypeMenuProps } from "./index.flow";
 import { MenuButtonContext } from "./hooks";
 import OverflowList from "../OverflowList";
 import Icon from "../Icon";
@@ -33,16 +35,16 @@ const BaseContents = () => (
   </>
 );
 
-const BaseMenu = (props) => (
+const BaseMenu = (props: TypeMenuProps) => (
   <Menu width="200px" {...props}>
     <BaseContents />
   </Menu>
 );
 
-const VirtualizedMenu = (props) => {
+const VirtualizedMenu = (props: TypeMenuProps) => {
   return (
     <Menu width="200px" {...props}>
-      <OverflowList height="200px">
+      <OverflowList height="200px" width="auto">
         <Menu.Group title="1">
           {fruit.map((item) => (
             <Menu.Item key={item} onClick={() => alert(item)}>
@@ -127,6 +129,7 @@ export const PropGetters = () => {
           <Menu.Group>
             <OverflowList
               height="400px"
+              width="auto"
               items={names}
               getItemProps={({ item }) => ({ key: item, item })}
               ItemComponent={({ item }) => (
@@ -152,7 +155,7 @@ const CloseOnClick = () => {
   return (
     <Menu.Item
       onClick={() => {
-        closePopout();
+        closePopout && closePopout();
       }}
     >
       close the popout
@@ -180,7 +183,7 @@ export const OneItemCanCloseThePopout = () => {
   );
 };
 
-export const MenuWithCheckboxes = (props) => {
+export const MenuWithCheckboxes = (props: TypeMenuProps) => {
   return (
     <Menu width="200px" {...props}>
       <Menu.Group title="Fruit" titleAs="h2">
@@ -206,7 +209,7 @@ export const MenuWithCheckboxes = (props) => {
 };
 
 // Specifically testing that icons with a color inverse when active like the text does.
-export const MenuWithIcons = (props) => {
+export const MenuWithIcons = (props: TypeMenuProps) => {
   return (
     <Box
       width="200px"
@@ -234,7 +237,7 @@ export const MenuWithIcons = (props) => {
   );
 };
 
-export const MenuWithFilter = (props) => {
+export const MenuWithFilter = (props: TypeMenuProps) => {
   return (
     <Box
       width="200px"
@@ -245,7 +248,12 @@ export const MenuWithFilter = (props) => {
       backgroundColor="container.background.base"
     >
       <Menu {...props}>
-        <Menu.FilterInput placeholder="filter contents..." m={300} />
+        <Menu.FilterInput
+          id="menu-input"
+          name="menu-input"
+          placeholder="filter contents..."
+          m={300}
+        />
         <BaseContents />
       </Menu>
     </Box>

package/__flow__/Menu/index.test.js

@@ -1,3 +1,4 @@
+// @flow
 import React from "react";
 import {
   render,
@@ -8,13 +9,14 @@ import {
 import Icon from "../Icon";
 
 import Menu, { MenuButton } from "./index";
+import type { TypeMenuProps } from "./index.flow";
 import { MENU_ITEM_ROLES } from "./constants";
 
 const fruit = ["Apple", "Banana", "Orange"];
 const maybeFruit = ["Tomato", "Cucumber", "Squash"];
 const mockOnClick = jest.fn();
 
-export const AsMenu = (props) => {
+export const AsMenu = (props: TypeMenuProps) => {
   return (
     <Menu width="200px" {...props}>
       <Menu.Group title="Fruit">

package/__flow__/Message/index.stories.js

@@ -1,5 +1,6 @@
+// @flow
 import React from "react";
-import Message from "./index";
+import Message, { type EnumDensities } from "./index";
 import Box from "../Box";
 import Icon from "../Icon";
 import { select } from "@storybook/addon-knobs";
@@ -14,6 +15,8 @@ export const defaultStory = ({
     ["condensed", "compact", "small", "large"],
     "condensed"
   ),
+}: {
+  density?: EnumDensities,
 }) => (
   <Message density={density} bg="container.background.base">
     <Message.Header>
@@ -26,11 +29,16 @@ export const defaultStory = ({
         Attribution
       </Box>
       <Box>
-        <Message.Checkbox />
+        <Message.Checkbox
+          id="message-checkbox"
+          ariaLabel="Message Checkbox"
+          onChange={() => {}}
+        />
       </Box>
     </Message.Header>
     <Message.Body>Message Content</Message.Body>
     <Message.Footer>
+      {/* $FlowIssue - Could not decide which case to select */}
       <Box>
         <Message.Button>
           <Icon name="comment-alt-outline" mr={200} />
@@ -38,16 +46,16 @@ export const defaultStory = ({
         </Message.Button>
       </Box>
       <Box>
-        <Message.Button>
+        <Message.Button aria-label="Heart Icon Example">
           <Icon name="heart-outline" />
         </Message.Button>
-        <Message.Button>
+        <Message.Button aria-label="Tag Icon Example">
           <Icon name="tag-outline" />
         </Message.Button>
-        <Message.Button>
+        <Message.Button aria-label="Reply Icon Example">
           <Icon name="reply-outline" />
         </Message.Button>
-        <Message.Button>
+        <Message.Button aria-label="Check Icon Example">
           <Icon name="circle-check-outline" />
         </Message.Button>
       </Box>

package/__flow__/Message/index.test.js

@@ -1,11 +1,11 @@
-import React from "react";
+// @flow
 import { render } from "../utils/react-testing-library";
 import "jest-styled-components";
-import Message from "./";
+import { defaultStory as defaultMessageStory } from "./index.stories";
 
 describe("Message", () => {
   it("should render properly", async () => {
-    const { container, runA11yCheck } = render(<Message />);
+    const { container, runA11yCheck } = render(defaultMessageStory({}));
     expect(container).toBeTruthy();
     await runA11yCheck();
   });

package/__flow__/Modal/index.stories.js

@@ -1,3 +1,4 @@
+// @flow
 import React from "react";
 import Component from "@reach/component-component";
 import Modal from "./";

package/__flow__/Modal/index.test.js

@@ -1,3 +1,4 @@
+// @flow
 import "jest-styled-components";
 import React from "react";
 import { render, fireEvent, cleanup } from "../utils/react-testing-library";

package/__flow__/Numeral/index.js

@@ -15,7 +15,7 @@ import { EM_DASH } from "../utils/constants";
 
 type EnumNumeralFormat = "decimal" | "currency" | "percent";
 
-type TypeProps = {
+export type TypeProps = {
   /** The number to be formatted */
   number?: ?number,
   /** Locale to format. See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument */

package/__flow__/Numeral/index.stories.js

@@ -1,5 +1,6 @@
+// @flow
 import React from "react";
-import Numeral from "./index";
+import Numeral, { type TypeProps } from "./index";
 
 const localeOptions = [
   "United States (en-US)",
@@ -120,13 +121,13 @@ export default {
   },
 };
 
-export const defaultStory = (args) => <Numeral {...args} />;
+export const defaultStory = (args: TypeProps) => <Numeral {...args} />;
 
 defaultStory.story = {
   name: "Default",
 };
 
-export const total = (args) => <Numeral {...args} />;
+export const total = (args: TypeProps) => <Numeral {...args} />;
 
 total.args = {
   number: 100,
@@ -138,7 +139,7 @@ total.story = {
   name: "Total",
 };
 
-export const trend = (args) => <Numeral {...args} />;
+export const trend = (args: TypeProps) => <Numeral {...args} />;
 
 trend.args = {
   number: 100,
@@ -149,7 +150,7 @@ trend.story = {
   name: "Trend",
 };
 
-export const noPrecision = (args) => <Numeral {...args} />;
+export const noPrecision = (args: TypeProps) => <Numeral {...args} />;
 
 noPrecision.args = {
   number: 123.45678,
@@ -160,7 +161,7 @@ noPrecision.story = {
   name: "No Precision",
 };
 
-export const currencyPrecision = (args) => <Numeral {...args} />;
+export const currencyPrecision = (args: TypeProps) => <Numeral {...args} />;
 
 currencyPrecision.args = {
   number: 123.4,
@@ -171,7 +172,7 @@ currencyPrecision.story = {
   name: "Currency precision",
 };
 
-export const invalid = (args) => <Numeral {...args} />;
+export const invalid = (args: TypeProps) => <Numeral {...args} />;
 
 invalid.args = {
   number: null,

package/__flow__/OverflowList/index.flow.js

@@ -15,8 +15,8 @@ export type TypeOverflowListProps<Item, Props> = {|
   width: string,
   items?: Array<Item>,
   children?: React.Node,
-  ItemComponent: React.ComponentType<Props>,
-  getItemProps: (Item) => Props,
+  ItemComponent?: React.ComponentType<Props>,
+  getItemProps?: (Item) => Props,
   itemWrapperProps?: TypeContainerProps,
   containerProps?: TypeContainerProps,
 |};

package/__flow__/OverflowList/index.stories.js

@@ -1,3 +1,4 @@
+// @flow
 import React from "react";
 import OverflowList from "./index";
 import Box from "../Box";
@@ -9,7 +10,7 @@ export default {
 };
 
 export const defaultStory = () => (
-  <OverflowList height={300} width={200}>
+  <OverflowList height="300px" width="200px">
     {names.map((name) => (
       <Box key={name}>
         <Text color="text.body">{name}</Text>
@@ -25,8 +26,8 @@ defaultStory.story = {
 export const PropGetters = () => {
   return (
     <OverflowList
-      height={300}
-      width={200}
+      height="300px"
+      width="200px"
       items={names}
       getItemProps={({ item }) => ({ key: item, item })}
       ItemComponent={({ item }) => (

package/__flow__/OverflowList/index.test.js

@@ -1,3 +1,4 @@
+// @flow
 import React from "react";
 import { render } from "../utils/react-testing-library";
 import "jest-styled-components";
@@ -41,13 +42,15 @@ describe("List", () => {
   });
 
   it("should render properly", async () => {
-    const { container, runA11yCheck } = render(<List />);
+    const { container, runA11yCheck } = render(
+      <List height="300px" width="200px" />
+    );
     expect(container).toBeTruthy();
     await runA11yCheck();
   });
   it("should render children", () => {
     const { queryByText } = render(
-      <List>
+      <List height="300px" width="200px">
         <div>item 1</div>
         <div>item 2</div>
         <div>item 3</div>
@@ -60,6 +63,8 @@ describe("List", () => {
   it("should render items", () => {
     const { queryByText } = render(
       <List
+        height="300px"
+        width="200px"
         items={["item 1", "item 2", "item 3"]}
         getItemProps={(item) => ({
           item,

package/__flow__/PartnerLogo/index.js

@@ -3,52 +3,44 @@ import React from "react";
 import logoViewBoxes from "../LogoViewBoxes";
 import type { TypePartnerNames } from "./TypePartnerNames";
 import { useTheme } from "styled-components";
-import styled, { type StyledComponent } from "styled-components";
-import { COMMON, FLEXBOX } from "../utils/system-props";
-import type {
-  TypeSystemCommonProps,
-  TypeSystemFlexboxProps,
-} from "../types/system-props.flow";
-import type { TypeTheme } from "../types/theme.flow";
+import Container from "./styles";
 
-type TypeSystemProps = {|
-  ...TypeSystemCommonProps,
-  ...TypeSystemFlexboxProps,
-|};
-
-type TypeStyledSVG = StyledComponent<TypeSystemProps, TypeTheme, *>;
-
-const StyledSVG: TypeStyledSVG = styled.svg`
-  ${FLEXBOX};
-  ${COMMON}
-`;
-
-type TypeProps = {
+export type TypeProps = {
   /** The name of the partner whose logo you want to render. */
   partnerName: TypePartnerNames,
   /** Manually override the default mode behavior by rendering a logo based on the background it's displayed on. */
   backgroundType?: "dark" | "light",
+  logoType?: "wordmark" | "lockup",
   height?: string,
   width?: string,
+  size?:
+    | "mini" // 12x12
+    | "small" // 16x16
+    | "medium" // 24x24
+    | "large" // 32x32
+    | "jumbo", // 64x64
 };
 
 const PartnerLogo = ({
   partnerName,
   backgroundType,
+  logoType,
   height,
   width,
+  size,
   ...rest
 }: TypeProps) => {
   const { mode } = useTheme();
   const whichLogo = (type) => {
+    const logo = logoType ? partnerName + "-" + logoType : partnerName;
     if (type && type === "dark") {
-      return `${partnerName}-dark`;
+      return `${logo}-dark`;
     } else if (type && type === "light") {
-      return partnerName;
+      return logo;
     } else if (mode === "dark") {
-      return `${partnerName}-dark`;
+      return `${logo}-dark`;
     } else {
-      return partnerName;
+      return logo;
     }
   };
   const logoViewBox = logoViewBoxes[whichLogo(backgroundType)];
@@ -57,19 +49,27 @@ const PartnerLogo = ({
   const defaultHeight = viewBoxCoordinates[3];
 
   return (
-    <StyledSVG
-      width={width ? width : defaultWidth}
-      height={height ? height : defaultHeight}
-      viewBox={logoViewBox}
-      focusable={false}
+    <Container
+      //we add pixels here because view box coordinates are numbers
+      height={height ? height : defaultHeight + "px"}
+      width={width ? width : defaultWidth + "px"}
+      logoSize={size}
       // $FlowIssue - upgrade v0.112.0
       {...rest}
     >
-      <use
-        xmlnsXlink="http://www.w3.org/1999/xlink"
-        xlinkHref={`#sslogosvg-${whichLogo(backgroundType)}`}
-      />
-    </StyledSVG>
+      <svg
+        className="logo-svg"
+        viewBox={logoViewBox}
+        focusable={false}
+        // $FlowIssue - upgrade v0.112.0
+        {...rest}
+      >
+        <use
+          xmlnsXlink="http://www.w3.org/1999/xlink"
+          xlinkHref={`#sslogosvg-${whichLogo(backgroundType)}`}
+        />
+      </svg>
+    </Container>
   );
 };