diff --git a/assets/logo.svg b/assets/logo.svg index 41de212ee..350eb1002 100644 --- a/assets/logo.svg +++ b/assets/logo.svg @@ -1,11 +1,4 @@ - - - - - - - - - - + + + diff --git a/assets/logogc.svg b/assets/logogc.svg new file mode 100644 index 000000000..41de212ee --- /dev/null +++ b/assets/logogc.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/lib/Logo/index.tsx b/lib/Logo/index.tsx index 391b5e57b..011e5ab0b 100644 --- a/lib/Logo/index.tsx +++ b/lib/Logo/index.tsx @@ -13,7 +13,7 @@ export function Logo(props: any) { typeof LogoPath === "string" ? ( {props.alt} ) : ( - + ); diff --git a/lib/Logo/styles.scss b/lib/Logo/styles.scss index f9c3091a2..6f1d2a5ed 100644 --- a/lib/Logo/styles.scss +++ b/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; + } + } + } \ No newline at end of file diff --git a/lib/LogoGC/README.md b/lib/LogoGC/README.md new file mode 100644 index 000000000..f8c8d2697 --- /dev/null +++ b/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 +``` + +``` \ No newline at end of file diff --git a/lib/LogoGC/index.tsx b/lib/LogoGC/index.tsx new file mode 100644 index 000000000..673f1dedd --- /dev/null +++ b/lib/LogoGC/index.tsx @@ -0,0 +1,28 @@ +import React from "react"; +import logoGCSVG from "../../assets/logogc.svg"; + +/** + * @usage + * + * + */ + +export function LogoGC(props: any) { + const LogoPath = props.url || logoGCSVG; + const image = + typeof LogoPath === "string" ? ( + {props.alt} + ) : ( + + + + ); + return {image}; +} + +LogoGC.defaultProps = { + url: "", + alt: "GatherContent Logo", +}; + +export default LogoGC; diff --git a/lib/LogoGC/styles.scss b/lib/LogoGC/styles.scss new file mode 100644 index 000000000..f9c3091a2 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/lib/index.ts b/lib/index.ts index 5c6cb1a56..a1f5fc003 100644 --- a/lib/index.ts +++ b/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"; diff --git a/stories/components/Logo.stories.tsx b/stories/components/Logo.stories.tsx index 905cde0eb..41b95948b 100644 --- a/stories/components/Logo.stories.tsx +++ b/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 }, }; diff --git a/stories/components/LogoGC.stories.tsx b/stories/components/LogoGC.stories.tsx new file mode 100644 index 000000000..6f636807e --- /dev/null +++ b/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 = () => ( +
+ +
+ +
+ + + + + +
+); + +LogoGC.parameters = { + controls: { hideNoControlsWarning: true }, +};