@progressiveui/react 1.22.0

package/src/components/Hero/Hero.stories.tsx

@@ -0,0 +1,356 @@
+import React from "react";
+
+import markdown from "./README.mdx";
+
+import { Hero, HeroExternal } from ".";
+import Button from "../Button";
+import { WfpHumEmergencyResponsePos } from "@progressiveui/pictograms-react";
+//import heroTwig from './Hero.twig';
+
+export default {
+  title: "Components/Content Related/Hero",
+  component: Hero,
+  parameters: {
+    componentSubtitle: "Component",
+    status: "released",
+    mdx: markdown,
+    //twig: heroTwig,
+  },
+};
+
+export const Regular = (args) => <Hero {...args} />;
+
+Regular.args = {
+  href: "#",
+  image: "http://www1.wfp.org/sites/default/files/images/yemen-hero-min.jpg",
+  subTitle:
+    "Food security and climate change analyses, adaptation planning, and good practices in food security adaptation programming.",
+  title: "The Climate Adaption Mangement and Innovation Initiative",
+  kind: "landscape",
+};
+
+export const HeroKinds = () => <></>;
+
+const herokinds = `
+By changing the \`kind\` prop you can use different styles of the card.
+
+| kind   |  Description  |
+|----------|-------------|
+| \`landscape\` | A card designed to highlight a link using a landscape photograph and a title with metadata above.|
+| \`landscape-light\` | A card designed to highlight a link using a landscape photograph and  white-background section below with a title and a subtitle.   |
+| \`split\` | A card of the same dimension of the landscape photo card, but split in half. One half features a landscape photograph, the other half is a white-background section with a title and a subtitle. |
+| \`hero\` | Hero block with title and a background image. It can feature an optional subtitle. |
+| \`splash\` | Page middle content section. |
+| \`splash-image\` | Page middle content section with background image. |
+| \`splash-compact\` | A card content section without space around title and subtitle. |
+| \`related\` | A card designed with landscape photograph and a title with metadata on right side. |
+
+
+`;
+
+HeroKinds.story = {
+  name: "Hero kinds",
+  parameters: {
+    markdown: "hello",
+    docs: {
+      storyDescription: herokinds,
+    },
+  },
+};
+
+export const Landscape = (args) => <Hero {...args} />;
+
+Landscape.args = {
+  ...Regular.args,
+  kind: "landscape",
+};
+
+Landscape.story = {
+  parameters: {
+    docs: {
+      storyDescription: `A card designed to highlight a link using a landscape photograph and a title with metadata above.`,
+    },
+  },
+};
+
+export const LandscapeLight = (args) => <Hero {...args} />;
+
+LandscapeLight.args = {
+  ...Regular.args,
+  kind: "landscape-light",
+};
+
+LandscapeLight.story = {
+  parameters: {
+    docs: {
+      storyDescription: `A card designed to highlight a link using a landscape photograph and  white-background section below with a title and a subtitle.`,
+    },
+  },
+};
+
+export const Split = (args) => <Hero {...args} />;
+
+Split.args = {
+  ...Regular.args,
+  metadata: "Climate Change, Publication",
+  kind: "split",
+};
+
+Split.story = {
+  parameters: {
+    docs: {
+      storyDescription: `A card of the same dimension of the landscape photo card, but split in half. One half features a landscape photograph, the other half is a white-background section with a title and a subtitle.`,
+    },
+  },
+};
+
+export const HeroCard = (args) => <Hero {...args} />;
+
+HeroCard.args = {
+  ...Regular.args,
+  kind: "hero",
+};
+
+HeroCard.story = {
+  name: "Hero",
+  parameters: {
+    docs: {
+      storyDescription: `Hero block with title and a background image. It can feature an optional subtitle.`,
+    },
+  },
+};
+
+export const Splash = (args) => <Hero {...args} />;
+
+Splash.args = {
+  ...Regular.args,
+  kind: "splash",
+  subTitle: (
+    <>
+      <div style={{ marginBottom: "1rem" }}>
+        Cras dapibus. Aenean ut eros et nisl sagittis vestibulum. Fusce risus
+        nisl, viverra et, tempor et, pretium in.
+      </div>
+      <Button kind="inverse">Read more</Button>
+    </>
+  ),
+  image: undefined,
+};
+const splashsourcecode = `
+  import { Hero, Button } from "@progressiveui/react"; 
+
+  <Hero
+    href="#"
+    kind="splash"
+    subTitle={
+        <>
+        <div style={{marginBottom: '1rem'}}>
+        Cras dapibus. Aenean ut eros et nisl sagittis vestibulum. Fusce risus nisl, viverra et, tempor et, pretium in.
+        </div>
+        <Button kind="inverse">Read more</Button>
+        </>
+        }
+    title="The Climate Adaption Mangement and Innovation Initiative"
+  />
+`;
+
+Splash.story = {
+  parameters: {
+    docs: {
+      storyDescription: `Page middle content section.`,
+    },
+  },
+};
+
+export const SplashImage = (args) => <Hero {...args} />;
+
+SplashImage.args = {
+  ...Regular.args,
+  kind: "splash-image",
+};
+
+SplashImage.story = {
+  parameters: {
+    docs: {
+      storyDescription: `Page middle content section with background image.`,
+      source: {
+        code: splashsourcecode,
+      },
+    },
+  },
+};
+
+export const SplashCompact = (args) => <Hero {...args} />;
+
+SplashCompact.args = {
+  ...Regular.args,
+  title: (
+    <>
+      <span style={{ marginRight: "1rem" }}>
+        Nulla consequat massa quis enim
+      </span>
+      <Button kind="inverse--primary">Read more</Button>
+    </>
+  ),
+  subTitle: undefined,
+  kind: "splash-compact",
+  image: undefined,
+};
+
+const splashcompactcode = `
+  import { Hero, Button } from "@progressiveui/react";
+
+  <Hero
+  href="#"
+  kind="splash-compact"
+  title={<><span style={{marginRight: '1rem'}}>Nulla consequat massa quis enim</span><Button kind="inverse--primary">Read more</Button></>}
+  />
+`;
+
+SplashCompact.story = {
+  parameters: {
+    docs: {
+      storyDescription: `A card content section without space around title and subtitle.`,
+      source: {
+        code: splashcompactcode,
+      },
+    },
+  },
+};
+
+export const Related = (args) => <Hero {...args} />;
+
+Related.args = {
+  ...Regular.args,
+  metadata: "Climate Change, Publication",
+  kind: "related",
+};
+
+Related.story = {
+  parameters: {
+    docs: {
+      storyDescription: `A card designed with landscape photograph and a title with metadata on right side.`,
+    },
+  },
+};
+// TODO learn more about changes done to Icon component by Robert
+export const Emergencies = (args) => <Hero {...args} />;
+
+Emergencies.args = {
+  ...Regular.args,
+  title: (
+    <>
+      <WfpHumEmergencyResponsePos fill="#FFF" style={{ marginRight: "1rem" }} />
+      <span>
+        Curabitur ullamcorper ultricies nisi. Proin magna.{" "}
+        <a>Etiam iaculis nunc ac metus</a>
+      </span>
+    </>
+  ),
+  subTitle: undefined,
+  image: undefined,
+  kind: "emergencies",
+};
+
+const sourcecode = `
+import { Hero, Icon } from "@progressiveui/react";
+import { iconWfpHumEmergencyResponsePos } from '@progressiveui/icons-react';
+        
+<Hero
+  href="#"
+  kind="emergencies"
+  title={
+    <>
+    <Icon
+      icon={iconWfpHumEmergencyResponsePos}
+      fill="#FFF"
+      style={{ marginRight: '1rem' }}
+    />
+    <span>
+      Curabitur ullamcorper ultricies nisi. Proin magna. Etiam iaculis nunc ac metus
+    </span>
+    </>
+    }
+/>
+
+`;
+
+Emergencies.story = {
+  parameters: {
+    docs: {
+      storyDescription: `A global card for highlighting important events, such as emergencies.`,
+      source: {
+        code: sourcecode,
+      },
+    },
+  },
+};
+
+export const External = (args) => (
+  <HeroExternal {...args}>
+    <div className={`wfp--hero-ext__actions`}>
+      <Button large kind="accent">
+        Accent action
+      </Button>
+      <Button large kind="inverse">
+        Secondary action
+      </Button>
+    </div>
+  </HeroExternal>
+);
+
+External.args = {
+  title: (
+    <>
+      A headline that can be used <br /> for the value proposition
+    </>
+  ),
+  subTitle: (
+    <>
+      A description that can contain a <a>link</a> and{" "}
+      <strong>a bold text</strong> to highlight important content. We have room
+      for one or more sentences. Like this.
+    </>
+  ),
+  image: "http://www1.wfp.org/sites/default/files/images/yemen-hero-min.jpg",
+};
+
+const externalsourcecode = `
+import { HeroExternal, Button } from "@progressiveui/react";
+        
+
+<HeroExternal
+  image="http://www1.wfp.org/sites/default/files/images/yemen-hero-min.jpg"
+  subTitle={<>A description that can contain a{' '}<a>link</a>{' '}and{' '}<strong>a bold text</strong>{' '}to highlight important content. We have room for one or more sentences. Like this.</>}
+  title={<>A headline that can be used{' '}<br />{' '}for the value proposition</>}
+>
+  <div className="wfp--hero-ext__actions">
+    <Button
+      allCaps
+      kind="accent"
+      large
+    >
+      Accent action
+    </Button>
+    <Button
+      allCaps
+      kind="inverse"
+      large
+    >
+      Secondary action
+    </Button>
+  </div>
+</HeroExternal>
+
+`;
+
+External.story = {
+  parameters: {
+    docs: {
+      storyDescription: "Add a description",
+      source: {
+        code: externalsourcecode,
+      },
+    },
+  },
+};

package/src/components/Hero/Hero.tsx

@@ -0,0 +1,142 @@
+import * as React from 'react';
+import type { PropsWithChildren } from 'react';
+import classNames from 'classnames';
+import useSettings from '../../hooks/useSettings';
+import { HeroKind } from '../../utils';
+/**
+ * Hero are a convenient means of displaying content composed of different types of objects. It is a multi usage component which creates boxes that are usually teasing some kind of content. */
+type HeroProps = PropsWithChildren<{
+  /**
+   The links target
+*/
+  href?: string;
+  /**
+   An optimized photograph
+ */
+  image?: string;
+  /**
+  External link flag
+*/
+  isExternal?: boolean;
+  /**
+  Render the Hero as link
+*/
+  isLink?: boolean;
+  /**
+  A short sentence to explain the content of the node (max 180 characters) 
+*/
+  subTitle?: React.ReactNode;
+  /**
+   A search-friendly title (ideally 50 characters, max 100) 
+*/
+  title?: string | React.ReactNode;
+  /**
+  Additional metadatas
+*/
+  metadata?: string;
+  /**
+  Additional more content
+*/
+  more?: React.ReactNode;
+  /**
+  Kind of Hero
+*/
+  kind?: HeroKind;
+  /**
+  The URL where the content uploaded is located.
+*/
+  url?: string;
+  /**
+   Additional className which will be added
+ */
+  className?: string;
+}>;
+
+const Hero: React.FC<HeroProps> = ({
+  children,
+  className,
+  image,
+  isExternal,
+  isLink,
+  metadata,
+  more,
+  subTitle,
+  title,
+  kind,
+  url,
+  ...other
+}) => {
+  const { prefix } = useSettings();
+
+  const style =
+    kind !== 'related'
+      ? {
+          backgroundImage: `url(${image})`,
+        }
+      : {};
+
+  const wrapperClasses = classNames(`${prefix}--photo-card`, {
+    [`${prefix}--photo-card--${kind}`]: kind,
+    [`${prefix}--photo-card--no-background`]: !image,
+    [`${prefix}--photo-card--link`]: isLink,
+    [`${className}`]: className,
+  });
+
+  const content = (
+    <React.Fragment>
+      <div className={`${prefix}--photo-card__background`} style={style} />
+      {image && kind === 'related' && <img src={image} /*TODO: alt={title}*/ />}
+      <div className={`${prefix}--photo-card__info`}>
+        <div>
+          {(kind === 'landscape' || kind === 'hero') && (
+            <div
+              className={`${prefix}--photo-card__info__background`}
+              style={style}
+            />
+          )}
+          {metadata && (
+            <p className={`${prefix}--photo-card__info__metadata`}>
+              {metadata}
+            </p>
+          )}
+          {title && (kind === 'hero' || kind === 'splash-compact') && (
+            <h2 className={`${prefix}--photo-card__info__title`}>{title}</h2>
+          )}
+          {title && kind !== 'hero' && kind !== 'splash-compact' && (
+            <h3 className={`${prefix}--photo-card__info__title`}>{title}</h3>
+          )}
+          {subTitle && (
+            <p className={`${prefix}--photo-card__info__subtitle`}>
+              {subTitle}
+            </p>
+          )}
+        </div>
+
+        {kind === 'hero' ||
+          kind === 'splash-image' ||
+          (kind === 'splash-compact' && (
+            <div className={`${prefix}--photo-card__info__more`}>{more}</div>
+          ))}
+      </div>
+      {children}
+    </React.Fragment>
+  );
+
+  return isLink ? (
+    <a
+      href={url}
+      target={isExternal ? '_blank' : ''}
+      className={wrapperClasses}
+      {...other}>
+      {content}
+    </a>
+  ) : (
+    <div className={wrapperClasses} {...other}>
+      {content}
+    </div>
+  );
+};
+
+Hero.displayName = 'Hero';
+
+export default Hero;

package/src/components/Hero/Hero.twig

@@ -0,0 +1,10 @@
+<a href="{{ url }}" target="" class="wfp--photo-card wfp--photo-card--landscape wfp--photo-card--link">
+    <div class="wfp--photo-card__background" style="background-image:url({{ image }})"></div>
+    <div class="wfp--photo-card__info">
+      <div>
+        <div class="wfp--photo-card__info__background" style="background-image:url({{ image }})"></div>
+        <h3 class="wfp--photo-card__info__title">{{ hero_title }}</h3>
+        <p class="wfp--photo-card__info__subtitle">{{ hero_subtitle }}</p>
+      </div>
+    </div>
+</a

package/src/components/Hero/HeroExternal-old.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+// import Button from '../Button';
+import classNames from 'classnames';
+import Wrapper from '../Wrapper';
+
+import useSettings from '../../hooks/useSettings';
+
+const HeroExternal = ({
+  title,
+  subTitle,
+  image,
+  children,
+  className,
+  // ...other
+}) => {
+  const { prefix } = useSettings();
+
+  const wrapperClasses = classNames(`${prefix}--hero-ext`, {
+    [`${className}`]: className,
+  });
+
+  return (
+    // TODO: Provide a prop to set the backgrond image (linear-gradient should be not editable)
+    // TODO: Provide a prop [string] to set the backgrond position (optional).
+    <div
+      className={wrapperClasses}
+      // TODO: do we need a token for the linear gradient?
+      style={{
+        backgroundImage: `linear-gradient(rgba(26, 66, 98, 0.8), rgba(26, 66, 98, 0.8)), url(${image})`,
+        backgroundPosition: 'center right',
+      }}>
+      <Wrapper pageWidth="md">
+        <div className={`${prefix}--hero-ext__content`}>
+          {title && <h1 className={`${prefix}--hero-ext__heading`}>{title}</h1>}
+          {subTitle && (
+            <p className={`${prefix}--hero-ext__body-copy`}>{subTitle}</p>
+          )}
+        </div>
+        {children}
+      </Wrapper>
+    </div>
+  );
+};
+
+HeroExternal.propTypes = {
+  title: PropTypes.node,
+  subTitle: PropTypes.node,
+  image: PropTypes.string,
+  children: PropTypes.node,
+  className: PropTypes.string,
+};
+
+export default HeroExternal;

package/src/components/Hero/HeroExternal.tsx

@@ -0,0 +1,64 @@
+import React, { ReactNode } from 'react';
+import type { PropsWithChildren } from 'react';
+import classNames from 'classnames';
+import Wrapper from '../Wrapper';
+
+import useSettings from '../../hooks/useSettings';
+
+type HeroExternalProps = PropsWithChildren<{
+  /**
+   A search-friendly title (ideally 50 characters, max 100) 
+*/
+  title?: string | ReactNode;
+  /**
+   Additional className which will be added
+ */
+  className?: string;
+  /**
+  A short sentence to explain the content of the node (max 180 characters) 
+*/
+  subTitle: React.ReactNode;
+  /**
+   An optimized photograph
+ */
+  image: string;
+}>;
+
+const HeroExternal: React.FC<HeroExternalProps> = ({
+  title,
+  subTitle,
+  image,
+  children,
+  className,
+  // ...other
+}) => {
+  const { prefix } = useSettings();
+
+  const wrapperClasses = classNames(`${prefix}--hero-ext`, {
+    [`${className}`]: className,
+  });
+
+  return (
+    // TODO: Provide a prop to set the backgrond image (linear-gradient should be not editable)
+    // TODO: Provide a prop [string] to set the backgrond position (optional).
+    <div
+      className={wrapperClasses}
+      // TODO: do we need a token for the linear gradient?
+      style={{
+        backgroundImage: `linear-gradient(rgba(26, 66, 98, 0.8), rgba(26, 66, 98, 0.8)), url(${image})`,
+        backgroundPosition: 'center right',
+      }}>
+      <Wrapper pageWidth="md">
+        <div className={`${prefix}--hero-ext__content`}>
+          {title && <h1 className={`${prefix}--hero-ext__heading`}>{title}</h1>}
+          {subTitle && (
+            <p className={`${prefix}--hero-ext__body-copy`}>{subTitle}</p>
+          )}
+        </div>
+        {children}
+      </Wrapper>
+    </div>
+  );
+};
+
+export default HeroExternal;

package/src/components/Hero/README.mdx

@@ -0,0 +1,5 @@
+Cards mimic the behavior of different Sections that can be found on [wfp.org](https://www.wfp.org)
+
+### Related
+
+[WFP.org card pattern](https://www.wfp.org/patterns#news_teaser)

package/src/components/Hero/index.ts

@@ -0,0 +1,2 @@
+export { default as Hero } from './Hero';
+export { default as HeroExternal } from './HeroExternal';

package/src/components/InfoBar/InfoBar-test.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import InfoBar from '../InfoBar';
+import { shallow } from 'enzyme';
+
+describe('InfoBar', () => {
+    describe('renders as expected', ()=>{
+        const wrapper = shallow(<InfoBar>Info bar content </InfoBar>);
+
+        it('renders children as exepected', () => {
+            expect(wrapper.length).toBe(1);
+        })
+
+        it('renders root classes as expected', () => {
+            expect(wrapper.hasClass('wfp--info-bar')).toEqual(true);
+        })
+    })
+})

package/src/components/InfoBar/InfoBar.stories.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import markdown from "./README.mdx";
+import InfoBar from ".";
+import Link from "../Link";
+
+export default {
+  title: "Components/UI Elements/InfoBar",
+  component: InfoBar,
+  parameters: {
+    componentSubtitle: "Component",
+    status: "released",
+    mdx: markdown,
+  },
+};
+
+export const InfoBarDefault = (args) => (
+  <InfoBar {...args}>
+    InfoBar with content. <Link href="#">Click here</Link> to do Something.
+  </InfoBar>
+);
+
+const infobarsourcecode = `
+  import { InfoBar, Link  } from "@progressiveui/react";
+
+  <InfoBar>
+    InfoBar with content. 
+    <Link href="#">
+        Click here
+    </Link>
+     to do Something.
+  </InfoBar>
+`;
+
+InfoBarDefault.story = {
+  parameters: {
+    docs: {
+      source: {
+        code: infobarsourcecode,
+      },
+    },
+  },
+};