@progressiveui/react 2.0.3 → 2.0.5

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

@@ -1,354 +0,0 @@
-import React from "react";
-
-import markdown from "./README.mdx";
-
-import { Hero, HeroExternal } from ".";
-import Button from "../Button";
-//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: (
-    <>
-      <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

@@ -1,142 +0,0 @@
-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

@@ -1,10 +0,0 @@
-<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

@@ -1,54 +0,0 @@
-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

@@ -1,64 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

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

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

@@ -1,17 +0,0 @@
-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

@@ -1,42 +0,0 @@
-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,
-      },
-    },
-  },
-};