feat(flags): Add Flag component and initial stories

compassion-global-experience · Sep 9, 2021 · 01a7aa4 · 01a7aa4
1 parent 62d2eb1
commit 01a7aa4
Show file tree

Hide file tree

Showing 47 changed files with 2,353 additions and 0 deletions.
diff --git a/packages/components/react-web/src/Flag/Flag.stories.js b/packages/components/react-web/src/Flag/Flag.stories.js
@@ -0,0 +1,61 @@
+import React from 'react';
+import { flags } from '@compassion-gds/elements';
+
+import FlagAustralia from './PartnerCountries/FlagAustralia';
+
+import { ProgramCountries, PartnerCountries } from './index';
+
+export default {
+  title: 'Components/Flag',
+  component: FlagAustralia,
+  args: {
+    programFlags: Object.keys(flags.programCountries),
+    partnerFlags: Object.keys(flags.partnerCountries),
+  },
+  argTypes: {},
+};
+export const Sizing = (args) => (
+  <>
+    <FlagAustralia height="4rem" />
+    <FlagAustralia height="7vw" />
+    <FlagAustralia height="calc(4rem * 2)" />
+    <FlagAustralia width="8ch" />
+    <FlagAustralia width="1em" />
+  </>
+);
+
+export const ProgramVariants = (args) => (
+  <ul style={{ display: 'flex', flexWrap: 'wrap', listStyle: 'none' }}>
+    {args.programFlags.map((name) => {
+      const flagName = `Flag${name[0].toUpperCase()}${name.substr(1)}`;
+      const Flag = ProgramCountries[flagName];
+
+      return (
+        <li
+          key="name"
+          style={{ width: 222, display: 'flex', alignItems: 'center', gap: 8 }}
+        >
+          <Flag width="2em" height="2em" /> <span>{name}</span>
+        </li>
+      );
+    })}
+  </ul>
+);
+
+export const PartnerVariants = (args) => (
+  <ul style={{ display: 'flex', flexWrap: 'wrap', listStyle: 'none' }}>
+    {args.partnerFlags.map((name) => {
+      const flagName = `Flag${name[0].toUpperCase()}${name.substr(1)}`;
+      const Flag = PartnerCountries[flagName];
+
+      return (
+        <li
+          key="name"
+          style={{ width: 222, display: 'flex', alignItems: 'center', gap: 8 }}
+        >
+          <Flag width="2em" height="2em" /> <span>{name}</span>
+        </li>
+      );
+    })}
+  </ul>
+);
diff --git a/packages/components/react-web/src/Flag/Flag.styles.js b/packages/components/react-web/src/Flag/Flag.styles.js
@@ -0,0 +1,5 @@
+import { css } from '@emotion/core';
+
+export default () => {
+  return css``;
+};
diff --git a/packages/components/react-web/src/Flag/PartnerCountries/FlagAustralia.jsx b/packages/components/react-web/src/Flag/PartnerCountries/FlagAustralia.jsx
@@ -0,0 +1,52 @@
+// =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
+// DO NOT MODIFY THIS FILE; IT WAS GENERATED BY buildFlagComponents.mjs.
+// =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
+
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { jsx } from "@emotion/core";
+import PropTypes from "prop-types";
+import flagStyles from "../Flag.styles";
+
+function FlagAustralia(props) {
+  return (
+    <svg
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 86 64"
+      className="gds-flag"
+      css={flagStyles}
+      {...props}
+    >
+      <path d="M85.333 0H0v64h85.333V0z" fill="#0C9AD0" />
+      <path
+        d="m55.489 32.454-1.895-.586-.74 1.82-.718-1.828-1.902.563 1-1.695-1.632-1.118 1.965-.285-.133-1.957 1.45 1.34 1.466-1.323-.156 1.955 1.961.308-1.645 1.099.979 1.707zM31.426 52.408l-3.345-1.034-1.305 3.213-1.268-3.227-3.356.994 1.764-2.992-2.88-1.973 3.468-.502-.234-3.455 2.558 2.365 2.588-2.334-.276 3.45 3.461.545-2.903 1.938 1.728 3.012zM64.498 21.938l-1.895-.585-.74 1.82-.718-1.83-1.902.564 1-1.695-1.631-1.118 1.964-.284-.133-1.958 1.45 1.34 1.466-1.323-.156 1.956 1.961.308-1.645 1.098.979 1.707zM76.952 31.843l-1.895-.586-.74 1.82-.718-1.828-1.902.563 1-1.695-1.632-1.118 1.965-.285-.134-1.957 1.45 1.34 1.467-1.323-.157 1.956 1.961.308-1.645 1.098.98 1.707zM64.807 49.122l-1.895-.585-.74 1.82-.718-1.829-1.901.563.999-1.694-1.632-1.119 1.965-.284-.133-1.957 1.45 1.34 1.466-1.323-.156 1.955 1.96.308-1.644 1.099.979 1.706zM44.13 0H0v33.098h44.13V0z"
+        fill="#EBEDED"
+      />
+      <path
+        d="M44.13 14.803v3.161H23.67v15.134h-3.188V17.964H0v-3.16h20.482V0h3.188v14.803h20.46z"
+        fill="#E43B3A"
+      />
+      <path
+        d="m2.332 0 16.612 13.14v.465h-1.923L0 .299V0h2.33zM44.13 33.067v.03h-2.175L25.071 19.897v-.238h2.122L44.13 33.067zM17.094 19.658h1.85v.454L2.331 33.099H.115l16.979-13.44zM44.13 0v.413L27.256 13.605h-2.185v-.248L41.955 0h2.175z"
+        fill="#E43B3A"
+      />
+      <path
+        d="M15.62 13.605H0V1.385l15.62 12.22zM18.996 0v12.23L3.325 0h15.671zM44.13 1.322v12.283H28.437L44.13 1.322zM40.733 0 25.07 12.23V0h15.662zM15.62 19.68 0 31.91V19.68h15.62zM18.996 21.053v12.045H3.576l15.42-12.045zM44.13 19.68V31.96L28.437 19.68H44.13zM40.492 33.098H25.071V21.053l15.421 12.045z"
+        fill="#0C9AD0"
+      />
+      <path
+        d="m68.305 35.998.177.931-.824.99 1.119.115.53.99.47-.932 1.178-.174-.837-.806.166-1.117-.964.526-1.015-.523z"
+        fill="#EBEDED"
+      />
+    </svg>
+  );
+}
+export default FlagAustralia;
+
+FlagAustralia.propTypes = {
+  width: PropTypes.string,
+  height: PropTypes.string,
+};
+
+FlagAustralia.defaultProps = {};
diff --git a/packages/components/react-web/src/Flag/PartnerCountries/FlagCanada.jsx b/packages/components/react-web/src/Flag/PartnerCountries/FlagCanada.jsx
@@ -0,0 +1,40 @@
+// =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
+// DO NOT MODIFY THIS FILE; IT WAS GENERATED BY buildFlagComponents.mjs.
+// =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
+
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { jsx } from "@emotion/core";
+import PropTypes from "prop-types";
+import flagStyles from "../Flag.styles";
+
+function FlagCanada(props) {
+  return (
+    <svg
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 86 64"
+      className="gds-flag"
+      css={flagStyles}
+      {...props}
+    >
+      <path
+        d="M85.333 0H56.788v64h28.545V0zM28.525 0H0v64h28.525V0z"
+        fill="#E43B3A"
+      />
+      <path d="M56.788 0H28.525v64h28.263V0z" fill="#EBEDED" />
+      <path
+        d="m42.044 37.965-.087 6.958h1.304v-6.786l5.652 1.03-.435-1.975 6.086-5.155L53 31.007l1.043-3.78-3.477.6-.957-1.975-3.478 3.866 1.218-7.302-2.348.859-2.347-4.038-2.435 3.866-2.348-.688 1.044 7.131-3.304-3.436-1.043 1.546-3.478-.43.957 3.866-1.652.945 6.26 5.155-.348 1.89 5.738-1.117z"
+        fill="#E43B3A"
+      />
+    </svg>
+  );
+}
+export default FlagCanada;
+
+FlagCanada.propTypes = {
+  width: PropTypes.string,
+  height: PropTypes.string,
+};
+
+FlagCanada.defaultProps = {};
diff --git a/packages/components/react-web/src/Flag/PartnerCountries/FlagDenmark.jsx b/packages/components/react-web/src/Flag/PartnerCountries/FlagDenmark.jsx
@@ -0,0 +1,34 @@
+// =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
+// DO NOT MODIFY THIS FILE; IT WAS GENERATED BY buildFlagComponents.mjs.
+// =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
+
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { jsx } from "@emotion/core";
+import PropTypes from "prop-types";
+import flagStyles from "../Flag.styles";
+
+function FlagDenmark(props) {
+  return (
+    <svg
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 86 64"
+      className="gds-flag"
+      css={flagStyles}
+      {...props}
+    >
+      <path d="M85.333 0H0v64h85.333V0z" fill="#E43B3A" />
+      <path d="M85.333 29.124H0v5.752h85.333v-5.752z" fill="#EBEDED" />
+      <path d="M35.237 0h-5.842v64h5.842V0z" fill="#EBEDED" />
+    </svg>
+  );
+}
+export default FlagDenmark;
+
+FlagDenmark.propTypes = {
+  width: PropTypes.string,
+  height: PropTypes.string,
+};
+
+FlagDenmark.defaultProps = {};
diff --git a/packages/components/react-web/src/Flag/PartnerCountries/FlagFrance.jsx b/packages/components/react-web/src/Flag/PartnerCountries/FlagFrance.jsx
@@ -0,0 +1,34 @@
+// =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
+// DO NOT MODIFY THIS FILE; IT WAS GENERATED BY buildFlagComponents.mjs.
+// =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
+
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { jsx } from "@emotion/core";
+import PropTypes from "prop-types";
+import flagStyles from "../Flag.styles";
+
+function FlagFrance(props) {
+  return (
+    <svg
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 86 64"
+      className="gds-flag"
+      css={flagStyles}
+      {...props}
+    >
+      <path d="M85.333 0H56.788v64h28.545V0z" fill="#E43B3A" />
+      <path d="M28.525 0H0v64h28.525V0z" fill="#0099CE" />
+      <path d="M56.788 0H28.525v64h28.263V0z" fill="#EBEDED" />
+    </svg>
+  );
+}
+export default FlagFrance;
+
+FlagFrance.propTypes = {
+  width: PropTypes.string,
+  height: PropTypes.string,
+};
+
+FlagFrance.defaultProps = {};
diff --git a/packages/components/react-web/src/Flag/PartnerCountries/FlagGermany.jsx b/packages/components/react-web/src/Flag/PartnerCountries/FlagGermany.jsx
@@ -0,0 +1,34 @@
+// =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
+// DO NOT MODIFY THIS FILE; IT WAS GENERATED BY buildFlagComponents.mjs.
+// =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
+
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { jsx } from "@emotion/core";
+import PropTypes from "prop-types";
+import flagStyles from "../Flag.styles";
+
+function FlagGermany(props) {
+  return (
+    <svg
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 86 64"
+      className="gds-flag"
+      css={flagStyles}
+      {...props}
+    >
+      <path d="M85.333 0H0v21.094h85.333V0z" fill="#2D2D2E" />
+      <path d="M85.333 21.094H0V64h85.333V21.094z" fill="#F1B920" />
+      <path d="M85.333 21.094H0v21.812h85.333V21.094z" fill="#E43B3A" />
+    </svg>
+  );
+}
+export default FlagGermany;
+
+FlagGermany.propTypes = {
+  width: PropTypes.string,
+  height: PropTypes.string,
+};
+
+FlagGermany.defaultProps = {};
diff --git a/packages/components/react-web/src/Flag/PartnerCountries/FlagIreland.jsx b/packages/components/react-web/src/Flag/PartnerCountries/FlagIreland.jsx
@@ -0,0 +1,34 @@
+// =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
+// DO NOT MODIFY THIS FILE; IT WAS GENERATED BY buildFlagComponents.mjs.
+// =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
+
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { jsx } from "@emotion/core";
+import PropTypes from "prop-types";
+import flagStyles from "../Flag.styles";
+
+function FlagIreland(props) {
+  return (
+    <svg
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 86 64"
+      className="gds-flag"
+      css={flagStyles}
+      {...props}
+    >
+      <path d="M84.314 0H56.11v64h28.204V0z" fill="#F1B920" />
+      <path d="M28.185 0H0v64h28.185V0z" fill="#008C4B" />
+      <path d="M56.11 0H28.185v64H56.11V0z" fill="#EBEDED" />
+    </svg>
+  );
+}
+export default FlagIreland;
+
+FlagIreland.propTypes = {
+  width: PropTypes.string,
+  height: PropTypes.string,
+};
+
+FlagIreland.defaultProps = {};
diff --git a/packages/components/react-web/src/Flag/PartnerCountries/FlagItaly.jsx b/packages/components/react-web/src/Flag/PartnerCountries/FlagItaly.jsx
@@ -0,0 +1,34 @@
+// =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
+// DO NOT MODIFY THIS FILE; IT WAS GENERATED BY buildFlagComponents.mjs.
+// =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
+
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { jsx } from "@emotion/core";
+import PropTypes from "prop-types";
+import flagStyles from "../Flag.styles";
+
+function FlagItaly(props) {
+  return (
+    <svg
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 86 64"
+      className="gds-flag"
+      css={flagStyles}
+      {...props}
+    >
+      <path d="M84.314 0H56.11v64h28.204V0z" fill="#E43B3A" />
+      <path d="M28.185 0H0v64h28.185V0z" fill="#008C4B" />
+      <path d="M56.11 0H28.185v64H56.11V0z" fill="#EBEDED" />
+    </svg>
+  );
+}
+export default FlagItaly;
+
+FlagItaly.propTypes = {
+  width: PropTypes.string,
+  height: PropTypes.string,
+};
+
+FlagItaly.defaultProps = {};
diff --git a/packages/components/react-web/src/Flag/PartnerCountries/FlagNetherlands.jsx b/packages/components/react-web/src/Flag/PartnerCountries/FlagNetherlands.jsx
@@ -0,0 +1,34 @@
+// =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
+// DO NOT MODIFY THIS FILE; IT WAS GENERATED BY buildFlagComponents.mjs.
+// =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
+
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { jsx } from "@emotion/core";
+import PropTypes from "prop-types";
+import flagStyles from "../Flag.styles";
+
+function FlagNetherlands(props) {
+  return (
+    <svg
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 86 64"
+      className="gds-flag"
+      css={flagStyles}
+      {...props}
+    >
+      <path d="M84.295 0H0v21.094h84.295V0z" fill="#E43B3A" />
+      <path d="M84.295 21.094H0V64h84.295V21.094z" fill="#0099CE" />
+      <path d="M84.295 21.094H0v21.812h84.295V21.094z" fill="#E7E7E8" />
+    </svg>
+  );
+}
+export default FlagNetherlands;
+
+FlagNetherlands.propTypes = {
+  width: PropTypes.string,
+  height: PropTypes.string,
+};
+
+FlagNetherlands.defaultProps = {};