Adding new Bynder logo

lib/Logo/index.tsx

@@ -13,7 +13,7 @@ export function Logo(props: any) {
     typeof LogoPath === "string" ? (
       <img src={props.url} alt={props.alt} className="logo__image" />
     ) : (
-      <span className="logo__image">
+      <span className="logo__image bynder-logo">
         <LogoPath />
       </span>
     );

lib/Logo/styles.scss

@@ -10,4 +10,13 @@ $logo-max-width: 150px !default;
 .logo__image {
   max-width: $logo-max-width;
   max-height: $logo-max-height;
+
+  &.bynder-logo {
+   max-width: 40px;
+
+   svg {
+      border-radius: 8px;
+   }
+  }
+
 }

lib/LogoGC/README.md

@@ -0,0 +1,13 @@
+# Logo
+A logo component which defaults to the GatherContent logo
+
+### Props
+
+| Name                | Type          | Default                     | Required | Description                    |
+| ------------------- |-------------- | --------------------------- | -------- |------------------------------- |
+| url                 | String        | ''                          | No       | Image URL for the logo         |
+| alt                 | String        | 'GatherContent Logo'        | No       | Alt attribute for the logo     |
+###Usage
+```
+<Logo url="http://example.com/myimage.png" alt="Alt Tag" />
+```

lib/LogoGC/index.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import logoGCSVG from "../../assets/logogc.svg";
+
+/**
+ * @usage
+ *
+ * <Logo url="http://example.com/myimage.png" alt="Alt Tag" />
+ */
+
+export function LogoGC(props: any) {
+  const LogoPath = props.url || logoGCSVG;
+  const image =
+    typeof LogoPath === "string" ? (
+      <img src={props.url} alt={props.alt} className="logo__image" />
+    ) : (
+      <span className="logo__image">
+        <LogoPath />
+      </span>
+    );
+  return <span className="logo">{image}</span>;
+}
+
+LogoGC.defaultProps = {
+  url: "",
+  alt: "GatherContent Logo",
+};
+
+export default LogoGC;

lib/LogoGC/styles.scss

@@ -0,0 +1,13 @@
+/* ==========================================================================
+   Config
+   ========================================================================== */
+$logo-max-height: 40px !default;
+$logo-max-width: 150px !default;
+
+/* ==========================================================================
+   Styles
+   ========================================================================== */
+.logo__image {
+  max-width: $logo-max-width;
+  max-height: $logo-max-height;
+}

lib/index.ts

@@ -56,6 +56,7 @@ export { TopBarGroup } from "./TopBar/TopBarGroup";
 export { ParticipantInfo } from "./ParticipantInfo";
 export { Navigation } from "./Navigation";
 export { Logo } from "./Logo";
+export { LogoGC } from "./LogoGC";
 export { Shortcut } from "./Shortcut";
 export { ShortcutIcon } from "./Shortcut/ShortcutIcon";
 export { ShortcutTrigger } from "./ShortcutTrigger";

stories/components/Logo.stories.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
-import LogoComponent from '../../lib/Logo';
-import StoryItem from '../styleguide/StoryItem';
+import React from "react";
+import LogoComponent from "../../lib/Logo";
+import StoryItem from "../styleguide/StoryItem";
 
 export default {
-  title: 'Legacy/Logo',
-  component: LogoComponent
+  title: "Legacy/Logo",
+  component: LogoComponent,
 };
 
 export const Logo = () => (
@@ -25,5 +25,5 @@ export const Logo = () => (
 );
 
 Logo.parameters = {
-  controls: { hideNoControlsWarning: true }
+  controls: { hideNoControlsWarning: true },
 };

stories/components/LogoGC.stories.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import LogoGCComponent from "../../lib/LogoGC";
+import StoryItem from "../styleguide/StoryItem";
+
+export default {
+  title: "Legacy/LogoGC",
+  component: LogoGCComponent,
+};
+
+export const LogoGC = () => (
+  <div>
+    <StoryItem title="Default Logo" description="A wrapper around the logo">
+      <div>
+        <LogoGCComponent />
+      </div>
+    </StoryItem>
+
+    <StoryItem title="Custom Logo" description="">
+      <LogoGCComponent
+        url="https://dummyimage.com/150x40/3d8beb/fff.png"
+        alt="Alt Tag"
+      />
+    </StoryItem>
+  </div>
+);
+
+LogoGC.parameters = {
+  controls: { hideNoControlsWarning: true },
+};