diff --git a/packages/icons/categories.yml b/packages/icons/categories.yml index 43ce95f2e..4066109eb 100644 --- a/packages/icons/categories.yml +++ b/packages/icons/categories.yml @@ -58,7 +58,9 @@ categories: - search--solid - search - settings + - star--filled - star--solid + - star - subtract--outline - subtract - upload diff --git a/packages/icons/icons.yml b/packages/icons/icons.yml index 907f6c99f..81f0c7482 100644 --- a/packages/icons/icons.yml +++ b/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: diff --git a/packages/icons/src/svg/star--filled.svg b/packages/icons/src/svg/star--filled.svg new file mode 100755 index 000000000..834f8a214 --- /dev/null +++ b/packages/icons/src/svg/star--filled.svg @@ -0,0 +1,11 @@ + + + + +star--filled + + + diff --git a/packages/icons/src/svg/star.svg b/packages/icons/src/svg/star.svg new file mode 100755 index 000000000..4b176cae8 --- /dev/null +++ b/packages/icons/src/svg/star.svg @@ -0,0 +1,13 @@ + + + + +star + + + diff --git a/packages/icons/tasks/create-iconlist.js b/packages/icons/tasks/create-iconlist.js index c92570abc..87ac8b3c4 100644 --- a/packages/icons/tasks/create-iconlist.js +++ b/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; }); diff --git a/packages/logos/readme.md b/packages/logos/readme.md index e427bc72a..cb38fd5fe 100644 --- a/packages/logos/readme.md +++ b/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. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - https://uikit.wfp.org/cdn/logos/latest/wfpLogoAcronymBlackAll.svg - https://uikit.wfp.org/cdn/logos/latest/wfpLogoAcronymBlueAll.svg diff --git a/packages/styles/scss/components/hero/_hero.scss b/packages/styles/scss/components/hero/_hero.scss index 504d711d6..e9d1136c1 100644 --- a/packages/styles/scss/components/hero/_hero.scss +++ b/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; } } diff --git a/packages/styles/scss/components/tabs/_tabs.scss b/packages/styles/scss/components/tabs/_tabs.scss index dd4966d06..0c278b937 100644 --- a/packages/styles/scss/components/tabs/_tabs.scss +++ b/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; diff --git a/packages/type/src/styles.js b/packages/type/src/styles.js index 6bf4ec00d..054d1d608 100644 --- a/packages/type/src/styles.js +++ b/packages/type/src/styles.js @@ -10,6 +10,7 @@ import { fontWeights } from './fontWeight'; import { fontFamilies } from './fontFamily'; import { scale } from './scale'; +// 12px export const caption01 = { fontSize: rem(scale[0]), fontWeight: fontWeights.regular, @@ -17,6 +18,7 @@ export const caption01 = { letterSpacing: px(0.32), }; +// 14px export const caption02 = { fontSize: rem(scale[1]), fontWeight: fontWeights.regular, @@ -24,6 +26,7 @@ export const caption02 = { letterSpacing: px(0.32), }; +// 12px export const label01 = { fontSize: rem(scale[0]), fontWeight: fontWeights.regular, @@ -31,6 +34,7 @@ export const label01 = { letterSpacing: px(0.32), }; +// 14px export const label02 = { fontSize: rem(scale[1]), fontWeight: fontWeights.regular, @@ -38,46 +42,49 @@ export const label02 = { 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]), @@ -85,7 +92,7 @@ export const code01 = { lineHeight: 1.34, letterSpacing: px(0.32), }; - +// 14px export const code02 = { fontFamily: fontFamilies.mono, fontSize: rem(scale[2]), @@ -93,14 +100,14 @@ export const code02 = { 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,11 +118,13 @@ 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, @@ -123,30 +132,31 @@ export const productiveHeading03 = { 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, }; diff --git a/packages/ui/src/components/Card/Card.stories.js b/packages/ui/src/components/Card/Card.stories.js index c62d59867..06f01635d 100644 --- a/packages/ui/src/components/Card/Card.stories.js +++ b/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" /> diff --git a/packages/ui/src/components/Footer/Footer.js b/packages/ui/src/components/Footer/Footer.js index e132f2e5e..aa4e5ba89 100755 --- a/packages/ui/src/components/Footer/Footer.js +++ b/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 ? ( - {children} + {children} ) : ( ); @@ -210,3 +264,131 @@ OverrideLogos.story = { }, }, }; + + +/** + * Twitter social icon + */ +const TwitterIcon = () => ( + + Twitter icon + + + + + + + + + +); + +/** + * Facebook social icon + */ +const FacebookIcon = () => ( + + Facebook icon + + + + + + + + + +); + +/** + * Instagram social icon + */ +const InstagramIcon = () => ( + + Instagram icon + + + + + + + + + +); + +/** + * LinkedIn social icon + */ +const LinkedinIcon = () => ( + + LinkedIn icon + + + + + + + + + +); + +/** + * YouTube social icon + */ +const YoutubeIcon = () => ( + + YouTube icon + + + + + + + + + +); + +/** + * TikTok social icon + */ +const TiktokIcon = () => ( + + TikTok icon + + + + + + + + + +); \ No newline at end of file diff --git a/packages/ui/src/components/Footer/FooterExternal.js b/packages/ui/src/components/Footer/FooterExternal.js index 26069a5f4..0aa9f9630 100644 --- a/packages/ui/src/components/Footer/FooterExternal.js +++ b/packages/ui/src/components/Footer/FooterExternal.js @@ -15,6 +15,7 @@ const FooterExternal = ({ children, metaContent, metaLinks, + socialIcons, }) => { const externalClasses = classnames(`${prefix}--footer-ext`, className); return ( @@ -31,63 +32,18 @@ const FooterExternal = ({
{metaContent}
+ {socialIcons && (

Follow WFP on:

-
+ ) + } +
- - + {children}
@@ -112,34 +68,10 @@ FooterExternal.propTypes = { children: PropTypes.node, metaContent: PropTypes.node, metaLinks: PropTypes.node, -}; - -const LinksColumn = () => { - return ( -
- {/* Title is optional */} -

Title

- -
- ); + /** + * Use this prop when you want to add any social icons + */ + socialIcons: PropTypes.node }; const FooterMetaLink = ({ className, href, children }) => { @@ -163,131 +95,6 @@ FooterMetaLink.propTypes = { children: PropTypes.node, }; -/** - * Twitter social icon - */ -const TwitterIcon = () => ( - - Twitter icon - - - - - - - - - -); - -/** - * Facebook social icon - */ -const FacebookIcon = () => ( - - Facebook icon - - - - - - - - - -); - -/** - * Instagram social icon - */ -const InstagramIcon = () => ( - - Instagram icon - - - - - - - - - -); - -/** - * LinkedIn social icon - */ -const LinkedinIcon = () => ( - - LinkedIn icon - - - - - - - - - -); - -/** - * YouTube social icon - */ -const YoutubeIcon = () => ( - - YouTube icon - - - - - - - - - -); -/** - * TikTok social icon - */ -const TiktokIcon = () => ( - - TikTok icon - - - - - - - - - -); -export { FooterExternal, LinksColumn, FooterMetaLink }; +export { FooterExternal, FooterMetaLink }; diff --git a/packages/ui/src/components/Hero/HeroExternal.js b/packages/ui/src/components/Hero/HeroExternal.js index 2e3f0f2a0..c51a2860b 100644 --- a/packages/ui/src/components/Hero/HeroExternal.js +++ b/packages/ui/src/components/Hero/HeroExternal.js @@ -1,6 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import Button from '../Button'; +import classNames from 'classnames'; import Wrapper from '../Wrapper'; import { settings } from '../../globals/js'; diff --git a/packages/ui/src/components/Search/Search.js b/packages/ui/src/components/Search/Search.js index 684cd1d1b..261f0e28a 100644 --- a/packages/ui/src/components/Search/Search.js +++ b/packages/ui/src/components/Search/Search.js @@ -154,7 +154,7 @@ Search.propTypes = { /** * Specify a custom `id` for the input */ - id: PropTypes.string.isRequired, + id: PropTypes.string, /** * The new value is available first arg 'searchValue' and evt object if needed is on second arg. diff --git a/packages/ui/src/components/Story/Story.stories.js b/packages/ui/src/components/Story/Story.stories.js index 4c551c766..0e033090c 100644 --- a/packages/ui/src/components/Story/Story.stories.js +++ b/packages/ui/src/components/Story/Story.stories.js @@ -89,8 +89,8 @@ StoryText.story = { }; const headingText = [ - { kind: 'h1', text: 'Heading 1', styling: '29px, SemiBold' }, - { kind: 'h2', text: 'Heading 2', styling: '25px, SemiBold' }, + { kind: 'h1', text: 'Heading 1', styling: '28px, SemiBold' }, + { kind: 'h2', text: 'Heading 2', styling: '24px, SemiBold' }, { kind: 'h3', text: 'Heading 3', styling: '22px, SemiBold' }, { kind: 'h4', text: 'Heading 4', styling: '20px, SemiBold' }, { kind: 'h5', text: 'Heading 5', styling: '18px, SemiBold' }, diff --git a/packages/ui/src/components/Tooltip/Tooltip.js b/packages/ui/src/components/Tooltip/Tooltip.js index 43f2f4ae6..952ae6bc8 100644 --- a/packages/ui/src/components/Tooltip/Tooltip.js +++ b/packages/ui/src/components/Tooltip/Tooltip.js @@ -127,7 +127,7 @@ Tooltip.propTypes = { /** * Provide the content for the tooltip */ - content: PropTypes.node, + content: PropTypes.oneOfType([PropTypes.node, PropTypes.func]), /** * Provide a dark styled tooltip diff --git a/packages/ui/src/documentation/Intro/Intro.js b/packages/ui/src/documentation/Intro/Intro.js index 17b2d6460..46e8be530 100644 --- a/packages/ui/src/documentation/Intro/Intro.js +++ b/packages/ui/src/documentation/Intro/Intro.js @@ -85,13 +85,13 @@ const Intro = () => (

- WFP Design System + WFP Digital Design System v{process.env.STORYBOOK_NPM_VERSION}

- The World Food Programme’s Design System
+ The World Food Programme’s Digital Design System provides you with guidelines, components and templates
to boost the user experience of your products.

diff --git a/packages/ui/src/documentation/RegularPage.js b/packages/ui/src/documentation/RegularPage.js index 80034e675..591e5d639 100644 --- a/packages/ui/src/documentation/RegularPage.js +++ b/packages/ui/src/documentation/RegularPage.js @@ -2,7 +2,7 @@ import PropTypes from 'prop-types'; import React from 'react'; import Link from '../components/Link'; -import Footer from '../components/Footer'; +import {Footer} from '../components/Footer'; import Search from '../components/Search'; import { @@ -18,7 +18,7 @@ import Tab from '../components/Tab'; import Button from '../components/Button'; -import MainNavigation from '../components/MainNavigation'; +import { MainNavigation } from '../components/MainNavigation'; import MainNavigationItem from '../components/MainNavigationItem'; import { @@ -272,7 +272,8 @@ const RegularPage = ({ {children}