Skip to content

Commit

Permalink
Merge pull request #1308 from Bynder/feature/new-bynder-logo
Browse files Browse the repository at this point in the history
Adding new Bynder logo
  • Loading branch information
webknit authored Oct 3, 2023
2 parents 1fbd220 + 0212a0c commit fdee243
Show file tree
Hide file tree
Showing 10 changed files with 114 additions and 17 deletions.
13 changes: 3 additions & 10 deletions assets/logo.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
11 changes: 11 additions & 0 deletions assets/logogc.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion lib/Logo/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand Down
9 changes: 9 additions & 0 deletions lib/Logo/styles.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}

}
13 changes: 13 additions & 0 deletions lib/LogoGC/README.md
Original file line number Diff line number Diff line change
@@ -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" />
```
28 changes: 28 additions & 0 deletions lib/LogoGC/index.tsx
Original file line number Diff line number Diff line change
@@ -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;
13 changes: 13 additions & 0 deletions lib/LogoGC/styles.scss
Original file line number Diff line number Diff line change
@@ -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;
}
1 change: 1 addition & 0 deletions lib/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down
12 changes: 6 additions & 6 deletions stories/components/Logo.stories.tsx
Original file line number Diff line number Diff line change
@@ -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 = () => (
Expand All @@ -25,5 +25,5 @@ export const Logo = () => (
);

Logo.parameters = {
controls: { hideNoControlsWarning: true }
controls: { hideNoControlsWarning: true },
};
29 changes: 29 additions & 0 deletions stories/components/LogoGC.stories.tsx
Original file line number Diff line number Diff line change
@@ -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 },
};

0 comments on commit fdee243

Please sign in to comment.