Release 1.1

.github/workflows/chromatic.yml

@@ -0,0 +1,27 @@
+# .github/workflows/chromatic.yml
+
+# Workflow name
+name: 'Chromatic'
+
+# Event for the workflow
+on: push
+
+# List of jobs
+jobs:
+  chromatic-deployment:
+    # Operating System
+    runs-on: ubuntu-latest
+    # Job steps
+    steps:
+      - uses: actions/checkout@v1
+      - name: Install dependencies
+        # 👇 Install dependencies with the same package manager used in the project (replace it as needed), e.g. yarn, npm, pnpm
+        run: yarn
+        # 👇 Adds Chromatic as a step in the workflow
+      - name: Publish to Chromatic
+        uses: chromaui/action@v1
+        # Chromatic GitHub Action options
+        with:
+          # 👇 Chromatic projectToken, refer to the manage page to obtain it.
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          exitOnceUploaded: true

.storybook/main.js

@@ -39,5 +39,9 @@ module.exports = {
     });
     return config;
   },
-  framework: "@storybook/react"
+  framework: "@storybook/react",
+  env: (config) => ({
+    ...config,
+    CHROMATIC_VIEWPORTS: [375, 768, 1380, 1920],
+  }),
 };

.storybook/preview.js

@@ -39,6 +39,10 @@ export const parameters = {
       includeName: true
     },
   },
+  chromatic: {
+    pauseAnimationAtEnd: true,
+    delay: 1500
+  },
 }
 
 /* Implementing locale for language switcher */
@@ -51,46 +55,39 @@ export const globalTypes = {
     toolbar: {
       icon: 'globe',
       items: [
-        { value: 'english', title: 'English' },
+        { value: 'english', title: 'English', right: 'Default' },
         { value: 'arabic', title: 'Arabic' },
         { value: 'burmese', title: 'Burmese' },
         { value: 'japanese', title: 'Japanese' }
       ],
     },
   },
+  accent: {
+    name: 'Accent color',
+    description: 'Define the accent color.',
+    defaultValue: '',
+    toolbar: {
+      icon: 'paintbrush',
+      showName: true,
+      items: [
+        { value: '', title: 'Default accent', right: 'Default' },
+        { value: 'yellow', title: 'Yellow' },
+        { value: 'green', title: 'Green' },
+        { value: 'red', title: 'Red' },
+        { value: 'blue', title: 'Azure' },
+      ]
+    }
+  }
 };
 
-
-// addParameters({
-//   options: {
-//     /**
-//      * display the top-level grouping as a "root" in the sidebar
-//      * @type {Boolean}
-//      */
-//     showRoots: true,
-//     storySort: (previous, next) => {
-//       const [previousStory, previousMeta] = previous
-//       const [nextStory, nextMeta] = next
-
-//       return anysort(previousMeta.kind, nextMeta.kind, [
-//         'Getting started/**',
-//         'Foundation/**',
-//         'Components/**',
-//         'Patterns/**',
-//         'Utilities/**',
-//         'Templates/**'
-//       ])
-//     }
-//   },
-// })
-
 /**
  * Function to get current language code.
+ * 
  * @param {*} Story renders Stories in iFrame.
  * @param {*} context Current context for Addons.
  * @returns Current Language Code.
  */
-const getLangCode=(Story,context)=>{
+const getLangCode = (Story, context) => {
   let activeLang = context.globals.locale;
 
   // trigger onload event
@@ -173,5 +170,34 @@ const setDirection = (Story, options) => {
   )
 }
 
+/**
+ * Function to set a global "accent-COLOR" class to the body.
+ * 
+ * @param {*} Story renders Stories in iFrame.
+ * @param {*} context Current context for Addons.
+ * @returns Story with accent color processed.
+ */
+const setAccentClass = (Story, context) => {
+  let accent = context.globals.accent;
+  const bodyElem = document.querySelector('body');
+
+  // Remove any prexisting accent-COLOR items so we can apply the most recent
+  // global selection.
+  bodyElem.classList.forEach((item) => {
+    if (item.startsWith('accent-')) {
+      bodyElem.classList.remove(item);
+    }
+  });
+
+  if (Boolean(accent)) {
+    // Set accent class on body tag (the most parent of parents).
+    bodyElem.classList.add(`accent-${accent}`);
+  }
+
+  return (
+    <Story {...context} />
+  )
+}
+
 // Trigger callback in Storybook Addons.
-export const decorators = [getLangCode, sbFrameReset, setDirection];
+export const decorators = [getLangCode, sbFrameReset, setDirection, setAccentClass];

.stylelintrc.json

@@ -3,7 +3,7 @@
     "stylelint-scss"
   ],
   "extends": [
-    "stylelint-config-standard", 
+    "stylelint-config-standard",
     "stylelint-config-sass-guidelines"
   ],
   "defaultSeverity": "warning",
@@ -17,11 +17,12 @@
     "property-no-vendor-prefix": null,
     "selector-no-vendor-prefix": null,
     "value-no-vendor-prefix": null,
+    "import-notation": "string",
     "property-no-unknown": [
       true,
       {
         "ignoreProperties": ["/box-*/", "/flex-*/"]
       }
     ]
   }
-}
+}

README.md

@@ -1,18 +1,22 @@
-# United Nations Development Programme Design system
+# United Nations Development Programme Design System
 
 ## Purpose
 
 The purpose of this project is to create unified user interfaces for UNDP by the designer and developers.
 
 These projects will have consistent look and feel and accessible in nature by just following the guidelines in the documentation.
 
-By unifiying design elements into reusable components, development will simplify and accelerate the development of these digital products.
+By unifying design elements into reusable components, development will simplify and accelerate the development of these digital products.
 
 The Guide is a living document created to meet the needs of UNDP's front-end developers and designers. If there is a Component or Pattern that you need, or you have any other feedback, question or comment please contact us.
 
 ## Demo
+
 Living Style Guide & Documentation: **[Demo](https://design.undp.org)**
 
+## Starter project
+
+Static generator using Design System as dependency: [UNDP Design System starter template](https://github.com/undp/design-system-starter-template)
 
 ## Development
 
@@ -24,59 +28,83 @@ git clone
 
 # install project dependencies
 yarn install
+or
+npm install
 
 # runs storybook locally
 yarn run storybook
+or
+npm run storybook
 
 # build storybook
 yarn run build-storybook
+or
+npm run build-storybook
+
+# build compiled css and js
+yarn run build
+or
+npm run build
 
 # linting on codebase
+# caution: this will write changes to your files
 yarn run lint
+or
+npm run lint
 ```
 
-## List of components
+### Important
+
+Make sure to run `yarn run build` or `npm run build` to compile production ready css and js files and include them with your development work. This will help save some extra steps when it comes time to deploy to production.
 
-View available Components [here](https://design.undp.org). Every components have its own documentations page on the link provided.
+## List of components
 
+View available Components [here](https://design.undp.org). Every components has its own documentation page on the link provided.
 
 ## Credits
 
 The design system is based on:
 
 - [Storybook](https://storybook.js.org/)
 
-
 ## Assets
 
-- All the icons/images can be found in the ***stories/assets/images/Icon*** directory.
-- CSS directory at: ***dist/css***.
-- JS directory at: ***dist/js***.
+=======
+
+- All the icons/images can be found in the **_docs/images_** directory.
+- Fonts: **_docs/fonts_**
+- CSS directory at: **_docs/css_**
+- JS directory at: **_docs/js_**
 
 ## Storybook and File references
 
-| Storybook path  | File path |
-| ------------- | ------------- |
-| Components/UI components/Cards/Download Card   | stories/Molecules/Blocks/DownloadCard/DownloadCard  |
-| Components/UI components/Cards/Publication Card  | stories/Molecules/Blocks/DownloadCard/PublicationCard  |
-| Components/UI components/Text/Callout   | stories/Molecules/Text/BlockquoteComponent  |
-| Components/UI components/Text/CTA Block  | stories/Molecules/Text/CtaBlock  |
-| Components/UI components/Text/Heading Big Block  | stories/Molecules/Text/HeadingBig  |
-| Components/UI components/Text/Post Block  | stories/Molecules/Text/Post  |
-| Components/UI components/Text/Small Copy Lockup  | stories/Molecules/Text/SmallCopy  |
-| Components/UI components/Text/Tertiary Block  | stories/Molecules/Text/Tertiary  |
-| Components/UI components/Text/Text Background  | stories/Molecules/Text/TextBackground  |
-| Components/UI components/Text/Text Cta  | stories/Molecules/Text/TextCta  |
-| Components/UI components/Author Summary  | stories/Organism/Blocks/Authorcard  |
-| Patterns/Card grids/Content Cards  | stories/Organism/Blocks/ContentCard  |
-| Patterns/Card grids/Content Cards With and Without Image  | stories/Organism/Blocks/ContentCardWithAndWithoutImage  |
-| Patterns/Card grids/Featured Cards  | stories/Organism/Blocks/FeaturedContentCard/FeaturedCard  |
-| Components/UI components/Pagewide Featured Content Card  | stories/Organism/Blocks/FeaturedContentCard/PagewideContentCard  |
-| Patterns/Card grids/Image Reveal Cards  | stories/Organism/Blocks/ImageRevealCards  |
-| Components/UI components/Footer  | stories/Organism/Footer  |
-| Components/UI components/Stats  | stories/Organism/Stats  |
-| Components/UI components/Stats Card Slider  | stories/Organism/Statscardslider  |
-| Utilities/Progress Bar Navigation  | stories/Atom/Navigation/ProgressBarNavigation  |
-
-## LICENSE
+| Storybook path                                           | File path                                                       |
+| -------------------------------------------------------- | --------------------------------------------------------------- |
+| Components/UI components/Cards/Download Card             | stories/Molecules/Blocks/DownloadCard/DownloadCard              |
+| Components/UI components/Cards/Publication Card          | stories/Molecules/Blocks/DownloadCard/PublicationCard           |
+| Components/UI components/Text/Callout                    | stories/Molecules/Text/BlockquoteComponent                      |
+| Components/UI components/Text/CTA Block                  | stories/Molecules/Text/CtaBlock                                 |
+| Components/UI components/Text/Heading Big Block          | stories/Molecules/Text/HeadingBig                               |
+| Components/UI components/Text/Post Block                 | stories/Molecules/Text/Post                                     |
+| Components/UI components/Text/Small Copy Lockup          | stories/Molecules/Text/SmallCopy                                |
+| Components/UI components/Text/Tertiary Block             | stories/Molecules/Text/Tertiary                                 |
+| Components/UI components/Text/Text Background            | stories/Molecules/Text/TextBackground                           |
+| Components/UI components/Text/Text Cta                   | stories/Molecules/Text/TextCta                                  |
+| Components/UI components/Author Summary                  | stories/Organism/Blocks/Authorcard                              |
+| Patterns/Card grids/Content Cards                        | stories/Organism/Blocks/ContentCard                             |
+| Patterns/Card grids/Content Cards With and Without Image | stories/Organism/Blocks/ContentCardWithAndWithoutImage          |
+| Patterns/Card grids/Featured Cards                       | stories/Organism/Blocks/FeaturedContentCard/FeaturedCard        |
+| Components/UI components/Pagewide Featured Content Card  | stories/Organism/Blocks/FeaturedContentCard/PagewideContentCard |
+| Patterns/Card grids/Image Reveal Cards                   | stories/Organism/Blocks/ImageRevealCards                        |
+| Components/UI components/Footer                          | stories/Organism/Footer                                         |
+| Components/UI components/Stats                           | stories/Organism/Stats                                          |
+| Components/UI components/Stats Card Slider               | stories/Organism/Statscardslider                                |
+| Utilities/Progress Bar Navigation                        | stories/Atom/Navigation/ProgressBarNavigation                   |
+
+## License
+
 MIT license.
+
+## Acknowledgments
+
+Thanks to <a href="https://www.chromatic.com/"><img src="https://avatars.githubusercontent.com/u/24584319?s=20&v=4" alt="Chromatic logo"> Chromatic</a> for providing the visual testing platform that helps us review UI changes and catch visual regressions.