Un core v1 merge

packages/icons/categories.yml

@@ -58,7 +58,9 @@ categories:
         - search--solid
         - search
         - settings
+        - star--filled
         - star--solid
+        - star
         - subtract--outline
         - subtract
         - upload

packages/icons/icons.yml

@@ -329,12 +329,24 @@
     - WFP legacy icons
   sizes:
     - glyph
+- name: star--filled
+  friendly_name: star--filled
+  aliases:
+    - WFP legacy icons
+  sizes:
+    - glyph
 - name: star--solid
   friendly_name: star--solid
   aliases:
     - WFP legacy icons
   sizes:
     - glyph
+- name: star
+  friendly_name: star
+  aliases:
+    - WFP legacy icons
+  sizes:
+    - glyph
 - name: subtract--outline
   friendly_name: subtract--outline
   aliases:

packages/icons/tasks/create-iconlist.js

@@ -42,12 +42,12 @@ fs.readdirSync(testFolder16).forEach((file) => {
     - 16`;
 });
 
-fs.writeFile('../icons.yml', icons, (err) => {
+fs.writeFile('./icons.yml', icons, (err) => {
   if (err) throw err;
 });
 
-// Write data in 'Output.txt' .
+// Write categories in 'categories.yml' .
 
-fs.writeFile('../categories.yml', categoryList, (err) => {
+fs.writeFile('./categories.yml', categoryList, (err) => {
   if (err) throw err;
 });

packages/logos/readme.md

@@ -1,45 +1,3 @@
-# World Food Programme UI Kit (WFP-UI) Logos
-
-Status: work in progress
-
-This repository features the Logo assets of the World Food Programme.
-
-### CDN usage:
-
-All logos are available on WFP's CDN.
-By using `latest` your application will always show the latest logos. Otherwise you can use a version like `0.0.1` for fixed versioning.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
 <!---CDN Urls-->
 - https://uikit.wfp.org/cdn/logos/latest/wfpLogoAcronymBlackAll.svg
 - https://uikit.wfp.org/cdn/logos/latest/wfpLogoAcronymBlueAll.svg

packages/styles/scss/components/hero/_hero.scss

@@ -200,6 +200,7 @@
   .#{$prefix}--photo-card--splash {
     .#{$prefix}--photo-card__info__title {
       @include type.type-style('productive-heading-04');
+      font-weight: 600;
     }
   }
 

packages/styles/scss/components/tabs/_tabs.scss

@@ -48,7 +48,7 @@
   .#{$prefix}--tabs__nav__bar {
     position: absolute;
     transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
-    background: $overlay;
+    background: $interactive;
     z-index: 10;
     height: 3px;
     bottom: 0;

packages/type/src/styles.js

@@ -10,97 +10,104 @@ import { fontWeights } from './fontWeight';
 import { fontFamilies } from './fontFamily';
 import { scale } from './scale';
 
+// 12px
 export const caption01 = {
   fontSize: rem(scale[0]),
   fontWeight: fontWeights.regular,
   lineHeight: 1.34,
   letterSpacing: px(0.32),
 };
 
+// 14px
 export const caption02 = {
   fontSize: rem(scale[1]),
   fontWeight: fontWeights.regular,
   lineHeight: 1.29,
   letterSpacing: px(0.32),
 };
 
+// 12px
 export const label01 = {
   fontSize: rem(scale[0]),
   fontWeight: fontWeights.regular,
   lineHeight: 1.34,
   letterSpacing: px(0.32),
 };
 
+// 14px
 export const label02 = {
   fontSize: rem(scale[1]),
   fontWeight: fontWeights.regular,
   lineHeight: 1.29,
   letterSpacing: px(0.32),
 };
 
+// 12px
 export const helperText01 = {
   fontSize: rem(scale[0]),
   lineHeight: 1.34,
   letterSpacing: px(0.32),
 };
 
+// 14px
 export const helperText02 = {
   fontSize: rem(scale[1]),
   lineHeight: 1.29,
   letterSpacing: px(0.32),
 };
 
+// 14px
 export const bodyShort01 = {
   fontSize: rem(scale[1]),
   fontWeight: fontWeights.regular,
   lineHeight: 1.29,
   letterSpacing: px(0.16),
 };
-
+// 14px
 export const bodyLong01 = {
   fontSize: rem(scale[1]),
   fontWeight: fontWeights.regular,
   lineHeight: 1.43,
   letterSpacing: px(0.16),
 };
-
+// 16px
 export const bodyShort02 = {
   fontSize: rem(scale[2]),
   fontWeight: fontWeights.regular,
   lineHeight: 1.375,
   letterSpacing: 0,
 };
-
+// 16px
 export const bodyLong02 = {
   fontSize: rem(scale[2]),
   fontWeight: fontWeights.regular,
   lineHeight: 1.5,
   letterSpacing: 0,
 };
-
+// 12px
 export const code01 = {
   fontFamily: fontFamilies.mono,
   fontSize: rem(scale[0]),
   fontWeight: fontWeights.regular,
   lineHeight: 1.34,
   letterSpacing: px(0.32),
 };
-
+// 14px
 export const code02 = {
   fontFamily: fontFamilies.mono,
   fontSize: rem(scale[2]),
   fontWeight: fontWeights.regular,
   lineHeight: 1.43,
   letterSpacing: px(0.32),
 };
-
+// 14px
 export const heading01 = {
   fontSize: rem(scale[1]),
   fontWeight: fontWeights.semibold,
   lineHeight: 1.29,
   letterSpacing: px(0.16),
 };
-
+// 16px
 export const heading02 = {
   fontSize: rem(scale[2]),
   fontWeight: fontWeights.semibold,
@@ -111,42 +118,45 @@ export const heading02 = {
 // customize productiveHeading01 to be prev heading01
 export const productiveHeading01 = heading02;
 
+// 18px
 export const productiveHeading02 = {
   ...heading02,
   fontSize: rem(scale[3]),
 };
 
+// 20px
 export const productiveHeading03 = {
   fontSize: rem(scale[4]),
   fontWeight: fontWeights.semibold,
   lineHeight: 1.4,
   letterSpacing: 0,
 };
 
+// 22px prev:28px
 export const productiveHeading04 = {
-  fontSize: rem(scale[6]),
+  fontSize: rem(22),
   fontWeight: fontWeights.semibold,
   lineHeight: 1.29,
   letterSpacing: 0,
 };
-
+// 24px prev:32px
 export const productiveHeading05 = {
   fontSize: rem(scale[5]),
   fontWeight: fontWeights.semibold,
   lineHeight: 1.25,
   letterSpacing: 0,
 };
-
+// 28 prev:42px
 export const productiveHeading06 = {
-  fontSize: rem(scale[9]),
-  fontWeight: fontWeights.light,
+  fontSize: rem(scale[6]),
+  fontWeight: fontWeights.semibold,
   lineHeight: 1.199,
   letterSpacing: 0,
 };
-
+// 54px
 export const productiveHeading07 = {
   fontSize: rem(scale[11]),
-  fontWeight: fontWeights.light,
+  fontWeight: fontWeights.semibold,
   lineHeight: 1.19,
   letterSpacing: 0,
 };

packages/ui/src/components/Card/Card.stories.js

@@ -5,7 +5,7 @@ import cardTwig from './Card.twig';
 import Button from '../Button';
 import { Card, CardExternal } from '.';
 
-import { StarSolidGlyph } from '@wfp/icons-react';
+import { StarSolidGlyph, StarGlyph } from '@wfp/icons-react';
 
 export default {
   title: 'Components/Content Related/Card',
@@ -74,7 +74,7 @@ export const External = (args) => (
       className={`wfp--card-ext__action wfp--card-ext__action--align-to-right`}
       kind="ghost"
       small
-      icon={StarSolidGlyph}
+      icon={StarGlyph}
       iconDescription="FavoriteOutline16"
     />
   </div>

packages/ui/src/components/Footer/Footer.js

@@ -34,6 +34,7 @@ const Footer = ({
   sdgLogo,
   pageWidth,
   productName,
+  socialIcons,
   ...other
 }) => {
   const classNames = classnames(
@@ -45,7 +46,7 @@ const Footer = ({
 
   const footer = 
     external ? (
-    <FooterExternal productName={productName} metaContent={metaContent} metaLinks={metaLinks}>{children}</FooterExternal> 
+    <FooterExternal productName={productName} metaContent={metaContent} metaLinks={metaLinks} socialIcons={socialIcons}>{children}</FooterExternal> 
     ) : 
     (
       <footer className={classNames}>
@@ -161,13 +162,19 @@ Footer.propTypes = {
    When external is set to true, the logo will be left and description will right on the footer. It is false by default.
  */
   external: PropTypes.bool,
+
+  /**
+   * This prop can only be called on external footer. It can be used to apply social icons to your footer
+   */
+  socialIcons: PropTypes.node,
+
   /** 
    Meta content, usually the copyright notice
  */
   metaContent: PropTypes.node,
 
   /** 
-   Meta links, usually are leagal links like privacy, terms of use.
+   Meta links, usually are legal links like privacy, terms of use.
  */
   metaLinks: PropTypes.node,
   /**