feat: add more variants to the BrandLogo

src/components/brand-logo/BrandLogo.css

@@ -1,16 +1,38 @@
 @import "variables";
 
 .brand-logo {
- &.normal {
+ display: inline-block;
+ font-size: 10px;
+
+ & .logotype,
+ & .logomark {
+ font-size: inherit;
+ }
+
+ & .logotype {
  width: 12.6em;
  height: 1.4em;
  }
 
- &.abbr {
+ & .logomark {
  width: 4.4em;
  height: 3.9em;
  }
 
+ &.horizontal .logomark {
+ margin-right: 2.5em;
+ }
+
+ &.vertical .logomark {
+ margin: 0 auto 2.5em auto;
+ display: block;
+ }
+
+ &.vertical .logotype {
+ margin: 0 auto;
+ display: block;
+ }
+
  &.colored {
  fill: var(--color-science-blue);
  }

src/components/brand-logo/BrandLogo.js

@@ -2,14 +2,12 @@ import React from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import Icon from '../icon';
-import logoSvg from '../../media/logos/discussify.svg';
-import logoAbbr from '../../media/logos/discussify-abbr.svg';
+import logotypeSvg from '../../media/logos/discussify-logotype.svg';
+import logomarkSvg from '../../media/logos/discussify-logomark.svg';
 import styles from './BrandLogo.css';
 
-const logosMap = {
- normal: logoSvg,
- abbr: logoAbbr,
-};
+const Logotype = () => <Icon svg={ logotypeSvg } className={ styles.logotype } />;
+const Logomark = () => <Icon svg={ logomarkSvg } className={ styles.logomark } />;
 
 const BrandLogo = ({ variant, colored, className, ...rest }) => {
  const finalClassName = classNames(
@@ -19,11 +17,19 @@ const BrandLogo = ({ variant, colored, className, ...rest }) => {
  className
  );
 
- return <Icon { ...rest } svg={ logosMap[variant] } className={ finalClassName } />;
+ const renderLogomark = variant === 'horizontal' || variant === 'vertical' || variant === 'logomark';
+ const renderLogotype = variant === 'horizontal' || variant === 'vertical' || variant === 'logotype';
+
+ return (
+ <div { ...rest } className={ finalClassName }>
+ { renderLogomark ? <Logomark /> : null }
+ { renderLogotype ? <Logotype /> : null }
+ </div>
+ );
 };
 
 BrandLogo.propTypes = {
- variant: PropTypes.oneOf(['normal', 'abbr']).isRequired,
+ variant: PropTypes.oneOf(['horizontal', 'vertical', 'logomark', 'logotype']).isRequired,
  colored: PropTypes.bool,
  className: PropTypes.string,
 };

src/components/brand-logo/README.md

@@ -1,13 +1,13 @@
 # BrandLogo
 
-The brand logo, normal and abbreviated.
+The brand logo.
 
 ## Usage
 
 ```jsx
 import { BrandLogo } from '@discussify/styleguide';
 
-<BrandLogo variant="normal" />
+<BrandLogo variant="horizontal" />
 ```
 
 Please read the `Icon` documentation for how to change the color and size of the logos.
@@ -16,7 +16,7 @@ Please read the `Icon` documentation for how to change the color and size of the
 
 | name | type | default | description |
 | -----| ---- | ------- | ----------- |
-| variant | string | *required* | The variant of the button, can be one of: `normal`, `abbr` |
+| variant | string | *required* | The variant of the button, can be one of: `horizontal`, `vertical`, `logotype`, `logomark` |
 | colored | bool | false | True to have the primary brand color applied (otherwise it will inherit from `fill`) |
 
 Any other properties supplied will be spread to the root element.

stories/brand-logo.js

@@ -8,20 +8,29 @@ import readme from '../src/components/brand-logo/README.md';
 storiesOf('BrandLogo', module)
 .addDecorator(withReadme(readme))
 .addDecorator(withKnobs)
-.add('Normal', () => (
- <BrandLogo variant="normal" />
+.add('Horizontal', () => (
+ <BrandLogo variant="horizontal" />
 ))
-.add('Normal colored', () => (
- <BrandLogo variant="normal" colored />
+.add('Vertical', () => (
+ <BrandLogo variant="vertical" />
 ))
-.add('Abbreviated', () => (
- <BrandLogo variant="abbr" />
+.add('Logotype', () => (
+ <BrandLogo variant="logotype" />
 ))
-.add('Abbreviated colored', () => (
- <BrandLogo variant="abbr" colored />
+.add('Logomark', () => (
+ <BrandLogo variant="logomark" />
+))
+.add('Brand color', () => (
+ <BrandLogo variant="horizontal" colored />
+))
+.add('Custom color', () => (
+ <BrandLogo variant="horizontal" style={ { fill: 'red' } } />
+))
+.add('Custom size', () => (
+ <BrandLogo variant="horizontal" style={ { fontSize: 20 } } />
 ))
 .add('Knobs playground ⚽', () => {
- const variant = selectV2('variant', ['normal', 'abbr'], 'abbr');
+ const variant = selectV2('variant', ['horizontal', 'vertical', 'logotype', 'logomark'], 'horizontal');
  const colored = boolean('colored');
  const style = object('style', { fill: 'red', fillOpacity: 1, fontSize: 20 });