Removed Yarn from build instruction to streamline setup, updated Gith…

…ub Action, updated CDN URL
undp · Jul 24, 2023 · e583129 · e583129
1 parent 369e78a
commit e583129
Show file tree

Hide file tree

Showing 91 changed files with 635 additions and 15,121 deletions.
diff --git a/.github/workflows/release-package.yml b/.github/workflows/release-package.yml
@@ -1,25 +1,24 @@
-name: Node.js Package
+name: Publish Package to npmjs
 
 on:
   release:
     types: [created]
   workflow_dispatch:
 
 jobs:
-  publish-gpr:
+  build:
     runs-on: ubuntu-latest
     permissions:
-      packages: write
       contents: read
+      id-token: write
     steps:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          always-auth: true
-          node-version: 16
-          registry-url: https://npm.pkg.github.com/
+          node-version: '18.x'
+          registry-url: 'https://registry.npmjs.org'
+      - run: npm install -g npm
       - run: npm ci
-      - run: npm publish
+      - run: npm publish --access public
         env:
-          NPM_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
-          NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
diff --git a/.yarnrc.yml b/.yarnrc.yml
diff --git a/README.md b/README.md
@@ -27,35 +27,25 @@ Run the following commands to create/update the code.
 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
 ```
 
 ### 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.
+Make sure to run `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.
 
 ## List of components
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@undp/design-system",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "description": "UNDP Design System",
   "homepage": "https://design.undp.org",
   "main": "index.js",
@@ -9,13 +9,15 @@
     "build": "webpack --progress",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build --loglevel verbose",
-    "scss": "sass --watch ./stories/assets/scss/style.scss ./stories/assets/css/style.css",
-    "lint": "yarn run lint:css && yarn run lint:js",
-    "lint:css": "stylelint ./stories/**/*.scss --fix",
-    "lint:js": "eslint --ignore-pattern '*.mdx' --ignore-pattern '**/Table.jsx' ./stories --fix",
     "postinstall": "patch-package"
   },
-  "keywords": ["UNDP", "United Nations", "Design System", "React", "Storybook"],
+  "keywords": [
+    "UNDP",
+    "United Nations",
+    "Design System",
+    "React",
+    "Storybook"
+  ],
   "author": "",
   "license": "MIT",
   "devDependencies": {

diff --git a/stories/Atom/BaseTypography/BaseTypography.stories.mdx b/stories/Atom/BaseTypography/BaseTypography.stories.mdx
@@ -948,4 +948,4 @@ Add a <code>li</code> tag for each list item
 
 ### Usage
 
-- Include **https://cdn.jsdelivr.net/gh/undp/design-system/docs/css/base-minimal.min.css** file in your HTML file, no other CSS and JS file required.
+- Include **https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/base-minimal.min.css** file in your HTML file, no other CSS and JS file required.
diff --git a/stories/Atom/BaseTypography/Paragraph/Paragraph.stories.mdx b/stories/Atom/BaseTypography/Paragraph/Paragraph.stories.mdx
@@ -62,7 +62,7 @@ Typographic scale when using paragraph in text component:
 
 #### CSS:
 
-- Add the base layout style from https://cdn.jsdelivr.net/gh/undp/design-system/docs/css/base-minimal.min.css
+- Add the base layout style from https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/base-minimal.min.css
 
 #### JS:
 

diff --git a/stories/Atom/Icons/Icons.stories.mdx b/stories/Atom/Icons/Icons.stories.mdx
@@ -85,7 +85,7 @@ The Icon components can grab attention and draw users into a piece of content. T
 
 Add the base layout style from
 
-- https://cdn.jsdelivr.net/gh/undp/design-system/docs/css/base-minimal.min.css
+- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/base-minimal.min.css
 
 #### JS:
 

diff --git a/stories/Atom/Images/AuthorImage/AuthorImages.stories.mdx b/stories/Atom/Images/AuthorImage/AuthorImages.stories.mdx
@@ -87,7 +87,7 @@ There are two states in the Author Image component: Small and Large.
 
 Add the base layout style from
 
-- https://cdn.jsdelivr.net/gh/undp/design-system/docs/css/base-minimal.min.css
+- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/base-minimal.min.css
 
 #### JS:
 

diff --git a/stories/Atom/Images/ImageCaptionCredit/ImageCaptionCredit.stories.mdx b/stories/Atom/Images/ImageCaptionCredit/ImageCaptionCredit.stories.mdx
@@ -167,12 +167,12 @@ It consists of three states: Wide, Medium, and Portrait.
 
 Add the base layout style from
 
-- https://cdn.jsdelivr.net/gh/undp/design-system/docs/css/base-minimal.min.css
-- https://cdn.jsdelivr.net/gh/undp/design-system/docs/css/components/image-caption.min.css
+- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/base-minimal.min.css
+- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/components/image-caption.min.css
 
 #### JS:
 
-- https://cdn.jsdelivr.net/gh/undp/design-system/docs/js/viewport.min.js
+- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/js/viewport.min.js
 
 ### Interactions
 

diff --git a/stories/Atom/Layout/Breakpoint/Breakpoint.stories.mdx b/stories/Atom/Layout/Breakpoint/Breakpoint.stories.mdx
@@ -33,4 +33,4 @@ There are four states in Breakpoints: Desktop, Laptop, Tablet, and Mobile.
 ### CSS and JS References
 We are mostly using Foundation Grid system for layouting and managing our component for different screen sizes shared above.
 
-You need to include **https://cdn.jsdelivr.net/gh/undp/design-system/docs/css/base-minimal.min.css** in your html file and you are good to go.
+You need to include **https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/base-minimal.min.css** in your html file and you are good to go.
diff --git a/stories/Atom/Layout/Grid/Grid.stories.mdx b/stories/Atom/Layout/Grid/Grid.stories.mdx
@@ -21,7 +21,7 @@ Design system is based on [Foundation Grid](https://get.foundation/sites/docs/xy
 ### CSS and JS References
 #### CSS:
 Add the base layout style from below path which includes the grid system of Foundation.
-- https://cdn.jsdelivr.net/gh/undp/design-system/docs/css/base-minimal.min.css
+- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/base-minimal.min.css
 
 #### JS:
 - NA

diff --git a/stories/Atom/Navigation/ProgressBarNavigation/ProgressBarNavigation.stories.mdx b/stories/Atom/Navigation/ProgressBarNavigation/ProgressBarNavigation.stories.mdx
@@ -70,12 +70,12 @@ To use this component, follow these steps:
 
 Add the base layout style from
 
-- https://cdn.jsdelivr.net/gh/undp/design-system/docs/css/base-minimal.min.css
-- https://cdn.jsdelivr.net/gh/undp/design-system/docs/css/components/progress-bar.min.css
+- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/base-minimal.min.css
+- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/components/progress-bar.min.css
 
 #### JS:
 
-- https://cdn.jsdelivr.net/gh/undp/design-system/docs/js/scrolling-progress-bar.min.js
+- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/js/scrolling-progress-bar.min.js
 
 ### Changelog
 

diff --git a/stories/Atom/Table/Table.stories.mdx b/stories/Atom/Table/Table.stories.mdx
@@ -145,7 +145,7 @@ The table size can be large or small, the variant is the border. The responsiven
 
 Add the base layout style from
 
-- https://cdn.jsdelivr.net/gh/undp/design-system/docs/css/base-minimal.min.css
+- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/base-minimal.min.css
 
 #### JS:
 

diff --git a/stories/Atom/Typography/Links/Links.stories.mdx b/stories/Atom/Typography/Links/Links.stories.mdx
@@ -73,7 +73,7 @@ Desktop & Laptop: The font size of the Link is biggest in Desktop and Laptop.
 
 Add the base layout style from
 
-- https://cdn.jsdelivr.net/gh/undp/design-system/docs/css/base-minimal.min.css
+- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/base-minimal.min.css
 
 #### JS:
 

diff --git a/stories/Components/Forms/Checkbox/Checkbox.stories.mdx b/stories/Components/Forms/Checkbox/Checkbox.stories.mdx
@@ -91,8 +91,8 @@ The Light Red colored checkbox with white space indicates the hover state which
 
 Add the base layout style from
 
-- https://cdn.jsdelivr.net/gh/undp/design-system/docs/css/base-minimal.min.css
-- https://cdn.jsdelivr.net/gh/undp/design-system/docs/css/components/checkbox.min.css
+- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/base-minimal.min.css
+- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/components/checkbox.min.css
 
 #### JS:
 

diff --git a/stories/Components/Forms/Dropdowns/CustomSelect/CustomSelect.stories.mdx b/stories/Components/Forms/Dropdowns/CustomSelect/CustomSelect.stories.mdx
@@ -82,12 +82,12 @@ If you need a fixed height dropdown then apply Height to the "ul" tag of dropdow
 
 Add the base layout style from
 
-- https://cdn.jsdelivr.net/gh/undp/design-system/docs/css/base-minimal.min.css
-- https://cdn.jsdelivr.net/gh/undp/design-system/docs/css/components/custom-select.min.css
+- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/base-minimal.min.css
+- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/components/custom-select.min.css
 
 #### JS:
 
-1. https://cdn.jsdelivr.net/gh/undp/design-system/docs/js/select.min.js
+1. https://cdn.jsdelivr.net/npm/@undp/design-system/docs/js/select.min.js
 
 ### Interactions
 

diff --git a/stories/Components/Forms/Dropdowns/Multiselect/MultiSelect.stories.mdx b/stories/Components/Forms/Dropdowns/Multiselect/MultiSelect.stories.mdx
@@ -114,14 +114,14 @@ A multi-select box in an open state can adjust its height to the content (defaul
 
 Add the base layout style from
 
-- https://cdn.jsdelivr.net/gh/undp/design-system/docs/css/base-minimal.min.css
-- https://cdn.jsdelivr.net/gh/undp/design-system/docs/css/components/multi-select.min.css
-- https://cdn.jsdelivr.net/gh/undp/design-system/docs/css/components/checkbox.min.css
-- https://cdn.jsdelivr.net/gh/undp/design-system/docs/css/components/radio.min.css
+- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/base-minimal.min.css
+- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/components/multi-select.min.css
+- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/components/checkbox.min.css
+- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/components/radio.min.css
 
 #### JS:
 
-- https://cdn.jsdelivr.net/gh/undp/design-system/docs/js/multi-select.min.js
+- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/js/multi-select.min.js
 
 ### Interactions
 

diff --git a/stories/Components/Forms/InputFields/InputFields.stories.mdx b/stories/Components/Forms/InputFields/InputFields.stories.mdx
@@ -268,8 +268,8 @@ The Input Field has four states: Default, Focus. Error and Disabled.
 
 Add the base layout style from
 
-- https://cdn.jsdelivr.net/gh/undp/design-system/docs/css/base-minimal.min.css
-- https://cdn.jsdelivr.net/gh/undp/design-system/docs/css/components/input-fields.min.css
+- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/base-minimal.min.css
+- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/components/input-fields.min.css
 
 #### JS:
 

diff --git a/stories/Components/Forms/Radio/Radio.stories.mdx b/stories/Components/Forms/Radio/Radio.stories.mdx
@@ -82,8 +82,8 @@ The following behavior modifiers are available:
 
 Add the base layout style from
 
-- https://cdn.jsdelivr.net/gh/undp/design-system/docs/css/base-minimal.min.css
-- https://cdn.jsdelivr.net/gh/undp/design-system/docs/css/components/radio.min.css
+- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/base-minimal.min.css
+- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/components/radio.min.css
 
 #### JS:
 

diff --git a/stories/Components/Forms/SearchExpand/SearchExpand.stories.mdx b/stories/Components/Forms/SearchExpand/SearchExpand.stories.mdx
@@ -69,12 +69,12 @@ Copy the HTML from the HTML tab of canvas and include the Js and css files menti
 
 Add the base layout style from
 
-- https://cdn.jsdelivr.net/gh/undp/design-system/docs/css/base-minimal.min.css
-- https://cdn.jsdelivr.net/gh/undp/design-system/docs/css/components/search-expand.min.css
+- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/base-minimal.min.css
+- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/components/search-expand.min.css
 
 #### JS:
 
-- https://cdn.jsdelivr.net/gh/undp/design-system/docs/js/expand-search.min.js
+- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/js/expand-search.min.js
 
 ### Changelog
 

diff --git a/stories/Components/Forms/TextPanel/TextPanel.stories.mdx b/stories/Components/Forms/TextPanel/TextPanel.stories.mdx
@@ -174,8 +174,8 @@ Copy the HTML from the HTML tab of canvas and include the css files mentioned be
 
 Add the base layout style from
 
-- https://cdn.jsdelivr.net/gh/undp/design-system/docs/css/base-minimal.min.css
-- https://cdn.jsdelivr.net/gh/undp/design-system/docs/css/components/text-panel.min.css
+- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/base-minimal.min.css
+- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/components/text-panel.min.css
 
 #### JS:
 

diff --git a/stories/Components/Forms/Textarea/Textarea.stories.mdx b/stories/Components/Forms/Textarea/Textarea.stories.mdx
@@ -176,8 +176,8 @@ Copy HTML from the HTML tab of canvas and also include the css file mentioned be
 
 Add the base layout style from
 
-- https://cdn.jsdelivr.net/gh/undp/design-system/docs/css/base-minimal.min.css
-- https://cdn.jsdelivr.net/gh/undp/design-system/docs/css/components/input-fields.min.css
+- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/base-minimal.min.css
+- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/components/input-fields.min.css
 
 #### JS:
 

diff --git a/stories/Components/Navigationcomponents/Breadcrumbs/Breadcrumbs.stories.mdx b/stories/Components/Navigationcomponents/Breadcrumbs/Breadcrumbs.stories.mdx
@@ -138,12 +138,12 @@ There is only a Default state.
 
 Add the base layout style from
 
-- https://cdn.jsdelivr.net/gh/undp/design-system/docs/css/base-minimal.min.css
-- https://cdn.jsdelivr.net/gh/undp/design-system/docs/css/components/breadcrumbs.min.css
+- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/base-minimal.min.css
+- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/components/breadcrumbs.min.css
 
 #### JS:
 
-- https://cdn.jsdelivr.net/gh/undp/design-system/docs/js/viewport.min.js
+- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/js/viewport.min.js
 
 ### Interactions
 

diff --git a/...gationcomponents/Mainnavigation/CountrySiteHeader/CountrySiteHeader.stories.mdx b/...gationcomponents/Mainnavigation/CountrySiteHeader/CountrySiteHeader.stories.mdx
@@ -447,22 +447,22 @@ $(document).ready(function(){
 
 Add the base layout style from
 
-- https://cdn.jsdelivr.net/gh/undp/design-system/docs/css/base-minimal.min.css
-- https://cdn.jsdelivr.net/gh/undp/design-system/docs/css/components/country-site-header.min.css
-- https://cdn.jsdelivr.net/gh/undp/design-system/docs/css/components/language-switcher.min.css
-- https://cdn.jsdelivr.net/gh/undp/design-system/docs/css/components/menu.min.css
-- https://cdn.jsdelivr.net/gh/undp/design-system/docs/css/components/mega-menu.min.css
-- https://cdn.jsdelivr.net/gh/undp/design-system/docs//css/components/mobile-nav.min.css
+- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/base-minimal.min.css
+- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/components/country-site-header.min.css
+- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/components/language-switcher.min.css
+- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/components/menu.min.css
+- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/components/mega-menu.min.css
+- https://cdn.jsdelivr.net/npm/@undp/design-system/docs//css/components/mobile-nav.min.css
 
 If adding the menu overflow functionality, add the style from
 
-- https://cdn.jsdelivr.net/gh/undp/design-system/docs/css/components/menu-overflow.min.css
+- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/components/menu-overflow.min.css
 
 #### JS:
 
-- https://cdn.jsdelivr.net/gh/undp/design-system/docs/js/navigation.min.js
-- https://cdn.jsdelivr.net/gh/undp/design-system/docs/js/undp.min.js
-- https://cdn.jsdelivr.net/gh/undp/design-system/docs//js/lang-switcher.min.js
+- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/js/navigation.min.js
+- https://cdn.jsdelivr.net/npm/@undp/design-system/docs/js/undp.min.js
+- https://cdn.jsdelivr.net/npm/@undp/design-system/docs//js/lang-switcher.min.js
 
 Menu overflow functionality is included in the navigation.min.js file. It only triggers if the overflow classes are in place. Please see "Implementing menu overflow" for instructions on setting up overflow menu functionality for the main header menu.