diff --git a/.github/workflows/generate-bs-images.yml b/.github/workflows/generate-bs-images.yml index fde54e395..ecaaf82cf 100644 --- a/.github/workflows/generate-bs-images.yml +++ b/.github/workflows/generate-bs-images.yml @@ -9,6 +9,9 @@ jobs: image: httpd:2.4 ports: - 8080:80 + permissions: + contents: read + packages: read steps: ## This clones and checks out. - name: Checkout branch diff --git a/.github/workflows/ocpl_cm_standards_check.yml b/.github/workflows/ocpl_cm_standards_check.yml index f86007368..94c8e2d08 100644 --- a/.github/workflows/ocpl_cm_standards_check.yml +++ b/.github/workflows/ocpl_cm_standards_check.yml @@ -7,3 +7,5 @@ on: jobs: commitlint_remote: uses: nciocpl/.github/.github/workflows/ocpl_cm_standards_check.yml@workflow/v2 + permissions: + contents: read diff --git a/.github/workflows/workflow.yml b/.github/workflows/workflow.yml index f822cf207..8f07b316e 100644 --- a/.github/workflows/workflow.yml +++ b/.github/workflows/workflow.yml @@ -21,6 +21,10 @@ jobs: image: httpd:2.4 ports: - 8080:80 + permissions: + contents: read + packages: read + pull-requests: write steps: ## Setup variables for build info - name: Set Variables @@ -133,6 +137,9 @@ jobs: ## be in netstorage for designsystem-dev. NOTE: this should **still** get ## set for production builds, but without the build_name. EXAMPLE_SITE_PUBLIC_PATH: ${{ format('/{0}/example-site', steps.set_vars.outputs.build_name) }} + ## The for dev cdn will be something like /cdn/pr-1234/ncids-css/ncids.min.css. + ## For prod the cdn will be something like /cdn/v3.4.0/ncids-css/ncids.min.css. + EXAMPLE_SITE_CDN_BASE_PATH: ${{ format('/cdn/{0}', steps.set_vars.outputs.build_name) }} ## This is used by the SitewideSearchApp and NEEDs to be the path that will ultimately ## be in netstorage for designsystem-dev. NOTE: this should **still** get ## set for production builds, but without the build_name. @@ -188,7 +195,7 @@ jobs: # with: # name: test-results # path: coverage - ## Upload the test results artifact + ## Upload the documentation site - name: Archive production artifacts uses: actions/upload-artifact@v4 with: @@ -196,12 +203,14 @@ jobs: path: dist/documentation-site/ include-hidden-files: true deploy-doc-site: - name: Deploy documentation site to dev server + name: Deploy documentation site and downloads to dev server ## Only do this if the repo is NCIOCPL if: startsWith(github.repository, 'NCIOCPL') ## This job depends on build completing needs: build runs-on: ubuntu-latest + permissions: + contents: read steps: - name: Download built site uses: actions/download-artifact@v4 @@ -247,6 +256,24 @@ jobs: local-path: ${{ format('{0}.zip', env.BUILD_NAME) }} ## Note this action automatically prepends the cpcode to the path. destination-path: ${{ format('/{0}.zip', env.BUILD_NAME) }} + # The CDN artifact is named with the version from package-lock so we need to find that to upload it. + - name: Get CDN artifact name + id: cdn-name + run: | + FILE=$(ls documentation-site/downloads/ncids-v*.zip 2>/dev/null | head -n 1) + FILENAME=$(basename "$FILE") + echo "filename=$FILENAME" >> "$GITHUB_OUTPUT" + - name: Upload CDN artifact to netstorage + uses: nciocpl/netstorage-upload-action@v1.0.0 + with: + hostname: ${{ secrets.ns_hostname }} + cp-code: ${{ secrets.ns_cdn_cpcode }} + key-name: ${{ secrets.ns_keyname }} + key: ${{ secrets.ns_key }} + index-zip: true + local-path: ${{ format('documentation-site/downloads/{0}', steps.cdn-name.outputs.filename) }} + ## Note this action automatically prepends the cpcode to the path. + destination-path: ${{ format('/{0}.zip', env.BUILD_NAME, steps.cdn-name.outputs.filename) }} - name: Clear Site Cache uses: nciocpl/akamai-purge-action@v1.0.2 with: @@ -255,4 +282,4 @@ jobs: client-secret: ${{ secrets.eg_client_secret }} access-token: ${{ secrets.eg_access_token }} type: "cpcodes" - ref: ${{ format('{0},{1}', secrets.ns_cpcode, secrets.prop_cpcode) }} + ref: ${{ format('{0},{1},{2}', secrets.ns_cpcode, secrets.ns_cdn_cpcode, secrets.prop_cpcode) }} diff --git a/.gitignore b/.gitignore index f0eb09c9c..a47e4bcfd 100644 --- a/.gitignore +++ b/.gitignore @@ -109,3 +109,5 @@ dist # ide .idea/* .vscode/settings.json + +cdn/ diff --git a/docs/content/get-started/developers.mdx b/docs/content/get-started/developers.mdx index 70df10c22..f6cda98ad 100644 --- a/docs/content/get-started/developers.mdx +++ b/docs/content/get-started/developers.mdx @@ -9,21 +9,21 @@ meta_description: | # Getting Started for Developers -To get started using the NCI Design System (NCIDS), developers will go through three phases: installing, compiling, and customizing the code. This page provides a step-by-step guide, taking developers through the process of each of these phases. Please reference our [contact information](/about#contact-us) if additional support is needed. +Get started using the NCI Design System (NCIDS) by installing Node and npm (recommended), using a Content Delivery Network (CDN), or through a direct download of the NCIDS files. -- [Step 1: Install](#step-1-install-node-and-npm) -- [Step 2: Compile and Import](#step-2-compile-and-import) -- [Step 3: Customize](#step-3-customize) +This page provides a step-by-step guide on how to install, compile, and customize your code using Node and npm. Options to use the CDN or a direct download of the NCIDS for your project are also provided. Please reference our [contact information](/about#contact-us) if additional support is needed. -## Step 1: Install Node and npm +## Node and npm -NCIDS distributes our source code through a node package manager (npm), which uses a flavor of JavaScript called Node.js. The best way to add NCIDS to your project is with npm via a Terminal window. (Check out some tips for using Terminal on a [Mac](https://support.apple.com/guide/terminal/open-or-quit-terminal-apd5265185d-f365-44cb-8b09-71a064a42125/mac) or [Windows](https://www.microsoft.com/en-us/p/windows-terminal/9n0dx20hk701?rtc=1&activetab=pivot:overviewtab).) +### Step 1: Install Node and npm + +NCIDS distributes our source code through a node package manager (npm), which uses a flavor of JavaScript called Node.js. We recommend using the NCIDS via npm because it provides more flexibility through its modular approach. The best way to add NCIDS to your project is with npm via a Terminal window. (Check out some tips for using Terminal on a [Mac](https://support.apple.com/guide/terminal/open-or-quit-terminal-apd5265185d-f365-44cb-8b09-71a064a42125/mac) or [Windows](https://www.microsoft.com/en-us/p/windows-terminal/9n0dx20hk701?rtc=1&activetab=pivot:overviewtab).) Installing the Design System with Node and npm not only allows you to install all the code the Design System needs to compile with just a couple commands, but will version any installed packages, like NCIDS, as well — meaning your project code is tied to a specific version of the Design System. Confirming what version you’re using and updating to a newer (or older) version is straightforward. To download fonts, refer to the [Typography](/foundations/typography) page. -### Step 1.1: Install Node +#### Step 1.1: Install Node 1. Ensure that you have Node.js installed, preferably Node 18, to meet the required runtime environment. @@ -31,7 +31,7 @@ To download fonts, refer to the [Typography](/foundations/typography) page. If you don’t have Node, we recommend installing it through a node version manager such as [Node Version Manager](https://github.com/nvm-sh/nvm) on a Mac or Linux machine, or [nvm-windows](https://github.com/coreybutler/nvm-windows) on a Windows machine. It can also be installed directly from [Node.js](https://nodejs.org/en/download/). -### Step 1.2: Authenticating to the NCIDS npm registry +#### Step 1.2: Authenticating to the NCIDS npm registry NCIDS utilizes GitHub’s npm registry to host its packages. To access and download these packages, you need to be authenticated with a valid access token. @@ -66,7 +66,7 @@ NCIDS utilizes GitHub’s npm registry to host its packages. To access and downl For more details, see [authenticating with a personal access token](https://docs.github.com/en/packages/working-with-a-github-packages-registry/working-with-the-npm-registry#authenticating-with-a-personal-access-token). -### Step 1.3: Initialize Your Project in Node +#### Step 1.3: Initialize Your Project in Node 1. Once you have Node and npm installed, go to the root of your project directory in Terminal. The root is the topmost directory associated with your project, the directory that includes all your project files and directories. In Terminal, the root will read as follows: @@ -88,7 +88,7 @@ In order to download the NCIDS, you will have to set up the @nciocpl organizatio @nciocpl:registry=https://npm.pkg.github.com ``` -### Step 1.4: Install NCIDS +#### Step 1.4: Install NCIDS
@@ -114,9 +114,9 @@ npm install @nciocpl/ncids-js **Don’t modify the source code. Now that you’ve installed the NCIDS source code, it is controlled by npm and could be rewritten at any time.** -## Step 2: Compile and Import +### Step 2: Compile and Import -### Step 2.1: Use a Sass Compiler +#### Step 2.1: Use a Sass Compiler When using NCIDS, you must use [Dart Sass](https://www.npmjs.com/package/sass)—a modern Sass compiler that can parse Sass Module syntax. This process will convert the work you’ve done on your style sheet in Sass into Cascading Style Sheet (CSS). @@ -173,7 +173,7 @@ Load paths must include a path to the `/packages` directory for NCIDS packages a }, ``` -### Step 2.2: Import the Compiled Package +#### Step 2.2: Import the Compiled Package This next step consists of creating the Sass style sheet. For more detailed instructions on how to setup your project, visit our [example app repository](https://github.com/NCIOCPL/ncids-example-sites). @@ -222,8 +222,94 @@ The @use and @forward directives are used to import and manage Sassy Cascading S **Note:** The load paths option for importing Sass partials or modules is specific to **Dart Sass**. If you're using another Sass implementation, such as Node Sass, LibSass, or Ruby Sass, the load paths option may not be available. Make sure to use the appropriate load path mechanism specific to your chosen Sass implementation. -## Step 3: Customize +### Step 3: Customize Customize the design system with settings and custom code. The USWDS [Settings](https://designsystem.digital.gov/documentation/settings/) page describes each of the settings available in the settings files, as well as the values the settings accept. Most settings accept design tokens. Visit the [Foundations](/foundations) section of our website for more information on the available tokens for color, spacing units, font size, and more. + +## Content Delivery Network + +While using the NCIDS via npm is recommended, there are three options to use the NCIDS via Content Delivery Network (CDN) - these options include using the NCIDS Minimal, NCIDS without utilities, and NCIDS with utilities. Choose the option that works best for your use case. + +The CDN allows you to use the NCIDS without installing, compiling, or customizing the code. To do so, directly include the stylesheet and JavaScript in your HTML. Then update your HTML to utilize the NCIDS CSS classes. + +import useSiteMetadata from '../../src/hooks/use-site-metadata'; +import { withPrefix } from 'gatsby'; +import PropTypes from 'prop-types'; + +export const CDNCode = ({ cssFile, jsFile }) => { + CDNCode.propTypes = { + cssFile: PropTypes.string.isRequired, + jsFile: PropTypes.string.isRequired, + }; + const v = useSiteMetadata()?.versionInfo?.ncidsVersion ?? 'ERROR'; + const cssPath = withPrefix(`/ncids-${v}/ncids-css/${cssFile}`); + const jsPath = withPrefix(`/ncids-${v}/ncids-js/${jsFile}`); + const snippet = ` +`; + return ( + + {snippet} + + ); +}; + +### NCIDS Minimal + +For a minimal configuration of the NCIDS, use the tags below: + + + +### NCIDS Without Utilities + +For the standard configuration of the NCIDS, but without utilities, use the tags below: + + + +### NCIDS With Utilities + +For the full configuration of the NCIDS, including utilities, use the tags below: + + + +## Direct Download + +You can download the NCIDS files to use on your site. Simply include the NCIDS folder in your website assets and add the stylesheet and JavaScript to your pages directly. + +export const DownloadLink = () => { + const v = useSiteMetadata()?.versionInfo?.ncidsVersion ?? 'ERROR'; + const href = withPrefix(`/downloads/ncids-${v}.zip`); + return ( + + ncids-{v}.zip + + ); +}; + +export const DownloadCode = () => { + const v = useSiteMetadata()?.versionInfo?.ncidsVersion ?? 'ERROR'; + const snippet = ` +`; + return ( + + {snippet} + + ); +}; + +Download here: . + + + +In the zip file, you will find the same three versions available as on the CDN: minimal, without utilities, and with utilities. diff --git a/docs/src/index.scss b/docs/src/index.scss index 1d30890bf..6356247f7 100644 --- a/docs/src/index.scss +++ b/docs/src/index.scss @@ -17,7 +17,7 @@ "widescreen": true ) ); -@forward "ncids"; +@forward "ncids-full"; @forward "usa-prose"; @forward "usa-table"; @forward "usa-icon"; diff --git a/package.json b/package.json index c8b31eb9c..1b1c85e18 100644 --- a/package.json +++ b/package.json @@ -19,8 +19,8 @@ "build": "lerna run build", "clean:build": "lerna run clean:build", "docs-artifact": "pnpm run docs-artifact:build && rimraf dist && pnpm run docs-artifact:copy", - "docs-artifact:build": "lerna run clean:build && pnpm run gatsby:build && pnpm run storybook:build && pnpm run example-site:build && pnpm run js-docs:build", - "docs-artifact:copy": "mkdirp dist/documentation-site && pnpm run gatsby:copy && pnpm run storybook:copy && pnpm run example-site:copy && pnpm run js-docs:copy", + "docs-artifact:build": "lerna run clean:build && pnpm run gatsby:build && pnpm run storybook:build && pnpm run example-site:build && pnpm run js-docs:build && pnpm run cdn:build", + "docs-artifact:copy": "mkdirp dist/documentation-site && pnpm run gatsby:copy && pnpm run storybook:copy && pnpm run example-site:copy && pnpm run js-docs:copy && pnpm run cdn:copy", "gatsby:build": "lerna run build --scope=nci-design-system --include-dependencies", "gatsby:copy": "ncp docs/public dist/documentation-site", "example-site:build": "lerna run build --scope=ncids-js-testing --include-dependencies", @@ -29,7 +29,9 @@ "js-docs:copy": "mkdirp dist/documentation-site/ncids-js && ncp packages/ncids-js/doc dist/documentation-site/ncids-js", "storybook:build": "lerna run build --scope=ncids-css-testing --include-dependencies", "storybook:copy": "mkdirp dist/documentation-site/storybook && ncp testing/ncids-css-testing/storybook-static dist/documentation-site/storybook", - "test": "lerna run test", + "cdn:build": "mkdirp cdn && ./scripts/zip-builds.sh", + "cdn:copy": "mkdirp dist/documentation-site/downloads && ncp cdn dist/documentation-site/downloads", + "test": "lerna run test", "test:css": "lerna run test:css", "test:a11y": "lerna run test:a11y", "test:css:generate": "lerna run test:css:generate", diff --git a/packages/ncids-css/entrypoints/ncids-full.scss b/packages/ncids-css/entrypoints/ncids-full.scss new file mode 100644 index 000000000..df28ef9cc --- /dev/null +++ b/packages/ncids-css/entrypoints/ncids-full.scss @@ -0,0 +1,17 @@ +@use "uswds-core" with ( + $theme-image-path: "../uswds-img", + $theme-show-notifications: false, + $theme-show-compile-warnings: false, + $theme-utility-breakpoints: ( + "card": false, + "card-lg": false, + "mobile": false, + "mobile-lg": true, + "tablet": true, + "tablet-lg": true, + "desktop": true, + "desktop-lg": false, + "widescreen": true + ), +); +@forward "packages/ncids-full"; diff --git a/packages/ncids-css/entrypoints/ncids-minimal.scss b/packages/ncids-css/entrypoints/ncids-minimal.scss new file mode 100644 index 000000000..e31a4a3bd --- /dev/null +++ b/packages/ncids-css/entrypoints/ncids-minimal.scss @@ -0,0 +1,17 @@ +@use "uswds-core" with ( + $theme-image-path: "../uswds-img", + $theme-show-notifications: false, + $theme-show-compile-warnings: false, + $theme-utility-breakpoints: ( + "card": false, + "card-lg": false, + "mobile": false, + "mobile-lg": true, + "tablet": true, + "tablet-lg": true, + "desktop": true, + "desktop-lg": false, + "widescreen": true + ), +); +@forward "packages/ncids-minimal"; diff --git a/packages/ncids-css/entrypoints/ncids.scss b/packages/ncids-css/entrypoints/ncids.scss new file mode 100644 index 000000000..44d5b8bce --- /dev/null +++ b/packages/ncids-css/entrypoints/ncids.scss @@ -0,0 +1,17 @@ +@use "uswds-core" with ( + $theme-image-path: "../uswds-img", + $theme-show-notifications: false, + $theme-show-compile-warnings: false, + $theme-utility-breakpoints: ( + "card": false, + "card-lg": false, + "mobile": false, + "mobile-lg": true, + "tablet": true, + "tablet-lg": true, + "desktop": true, + "desktop-lg": false, + "widescreen": true + ), +); +@forward "packages/ncids"; diff --git a/packages/ncids-css/index.scss b/packages/ncids-css/index.scss deleted file mode 100644 index 6a1434168..000000000 --- a/packages/ncids-css/index.scss +++ /dev/null @@ -1 +0,0 @@ -@forward "packages/ncids"; diff --git a/packages/ncids-css/package.json b/packages/ncids-css/package.json index e2384e2ea..6a820febb 100644 --- a/packages/ncids-css/package.json +++ b/packages/ncids-css/package.json @@ -18,38 +18,31 @@ "internal-uswds", "img" ], - "main": "index.scss", + "main": "ncids.scss", "scripts": { - "build": "pnpm run clean:build && webpack --mode='production'", + "build": "pnpm run clean:build && vite build", "clean:build": "rimraf ./dist", "lint": "stylelint \"packages/**/*.scss\"", "lint:fix": "stylelint \"packages/**/*.scss\" --fix", "patch-uswds": "echo \"Don't use me\"", - "prepare": "scripts/sync-uswds-packages.js" + "prepare": "scripts/sync-uswds-packages.js && pnpm run build" }, "author": "", "license": "ISC", "devDependencies": { "@uswds/uswds": "3.7.1", - "copy-webpack-plugin": "~9.0.1", - "css-loader": "3.6.0", "eslint": "~7.32.0", - "extract-loader": "~5.1.0", - "file-loader": "~6.2.0", "glob": "~7.1.4", "mkdirp": "^1.0.4", "ncp": "~2.0.0", - "postcss-loader": "6.1.1", "rimraf": "~3.0.2", "sass": "~1.69.0", - "sass-loader": "~12.6.0", "stylelint": "~13.13.1", "stylelint-config-prettier": "~8.0.2", "stylelint-config-recommended-scss": "~4.3.0", "stylelint-prettier": "~1.2.0", "stylelint-scss": "~3.21.0", - "webpack": "~5.89.0", - "webpack-cli": "~5.1.4" + "vite": "5.4.8" }, "peerDependencies": { "postcss": ">=8.4.0", @@ -95,5 +88,8 @@ "usa-type-spacing": "unused", "uswds-form-templates": "forwards components already imported", "uswds-validation": "forwards components already imported" + }, + "dependencies": { + "autoprefixer": "~10.4.2" } } diff --git a/packages/ncids-css/packages/ncids-full/_index.scss b/packages/ncids-css/packages/ncids-full/_index.scss new file mode 100644 index 000000000..57e04b5ed --- /dev/null +++ b/packages/ncids-css/packages/ncids-full/_index.scss @@ -0,0 +1,13 @@ +/** + * NCIDS full + * + * NCIDS with utilities + */ + +// All packages +// ------------------------------------- +@forward 'ncids'; + +// Utilities +// ------------------------------------- +@forward 'uswds-utilities'; diff --git a/packages/ncids-css/packages/ncids-minimal/_index.scss b/packages/ncids-css/packages/ncids-minimal/_index.scss new file mode 100644 index 000000000..c0c19ca35 --- /dev/null +++ b/packages/ncids-css/packages/ncids-minimal/_index.scss @@ -0,0 +1,29 @@ +/** + * NCIDS minimal + * Level 1 maturity model + * - Banner (no js) + * - Header + * - Site alert + * - Footer + */ + +// Global +// ------------------------------------- +@forward 'uswds-global'; + +// Typography & Form Controls +// ------------------------------------- +@forward 'uswds-typography'; +@forward 'uswds-form-controls'; + +// NCIDS +// ------------------------------------- +@forward 'nci-header'; +@forward 'usa-footer'; +@forward 'usa-skipnav'; + +// USWDS +// ------------------------------------- +@forward 'usa-banner'; +@forward 'usa-site-alert'; +@forward 'usa-layout-grid'; diff --git a/packages/ncids-css/packages/ncids/_index.scss b/packages/ncids-css/packages/ncids/_index.scss index c00f45290..63de4bc91 100644 --- a/packages/ncids-css/packages/ncids/_index.scss +++ b/packages/ncids-css/packages/ncids/_index.scss @@ -1,13 +1,12 @@ -/*! uswds @version */ +/** + * NCIDS + * + * NCIDS without utilities + */ -// Global +// Required // ------------------------------------- -@forward 'uswds-global'; - -// Typography & Form Controls -// ------------------------------------- -@forward 'uswds-typography'; -@forward 'uswds-form-controls'; +@forward 'ncids-minimal'; // NCIDS // ------------------------------------- @@ -16,23 +15,19 @@ @forward 'nci-card-group'; @forward 'nci-cta-strip'; @forward 'nci-guide-card'; -@forward 'nci-header'; @forward 'nci-heading'; @forward 'nci-hero'; @forward 'nci-no-print'; @forward 'nci-promo-block'; @forward 'usa-breadcrumb'; @forward 'usa-button'; -@forward 'usa-footer'; @forward 'usa-list'; @forward 'usa-section'; -@forward 'usa-skipnav'; // USWDS // ------------------------------------- @forward 'usa-accordion'; @forward 'usa-alert'; -@forward 'usa-banner'; @forward 'usa-button-group'; @forward 'usa-checklist'; @forward 'usa-collection'; @@ -41,19 +36,13 @@ @forward 'usa-icon-list'; @forward 'usa-identifier'; @forward 'usa-in-page-navigation'; -@forward 'usa-layout-grid'; @forward 'usa-modal'; @forward 'usa-pagination'; @forward 'usa-process-list'; @forward 'usa-search'; @forward 'usa-sidenav'; -@forward 'usa-site-alert'; @forward 'usa-step-indicator'; @forward 'usa-summary-box'; @forward 'usa-table'; @forward 'usa-tag'; @forward 'usa-tooltip'; - -// Utilities -// ------------------------------------- -@forward 'uswds-utilities'; diff --git a/packages/ncids-css/vite.config.mjs b/packages/ncids-css/vite.config.mjs new file mode 100644 index 000000000..4074a8c9a --- /dev/null +++ b/packages/ncids-css/vite.config.mjs @@ -0,0 +1,41 @@ +// vite.config.js +import { defineConfig } from 'vite'; +import { fileURLToPath } from 'node:url'; +import { dirname, resolve, join } from 'node:path'; +import autoprefixer from 'autoprefixer'; + +const __filename = fileURLToPath(import.meta.url); +const __dirname = dirname(__filename); + +export default defineConfig({ + build: { + rollupOptions: { + input: { + 'ncids-minimal': resolve(__dirname, 'entrypoints/ncids-minimal.scss'), + 'ncids': resolve(__dirname, 'entrypoints/ncids.scss'), + 'ncids-full': resolve(__dirname, 'entrypoints/ncids-full.scss'), + }, + output: { + assetFileNames: '[name].min.css', + }, + }, + cssMinify: true, + }, + css: { + preprocessorOptions: { + scss: { + quietDeps: true, + includePaths: [ + join(__dirname, 'packages'), + join(__dirname, 'uswds-packages'), + ], + }, + }, + postcss: { + plugins: [ + autoprefixer, + ], + }, + }, + assetsInlineLimit: 0, // inline all assets as base64 +}); diff --git a/packages/ncids-css/webpack.config.js b/packages/ncids-css/webpack.config.js deleted file mode 100644 index cbad2496c..000000000 --- a/packages/ncids-css/webpack.config.js +++ /dev/null @@ -1,44 +0,0 @@ -const path = require('path'); -const CopyPlugin = require('copy-webpack-plugin'); - -module.exports = { - mode: process.env.NODE_ENV === 'production' ? 'production' : 'development', - entry: ['./index.scss'], - resolve: { - symlinks: false, - modules: [ - path.resolve(__dirname, 'node_modules'), - 'node_modules', - '../../node_modules', - ], - }, - plugins: [], - module: { - rules: [ - { - test: /\.scss$/, - exclude: /node_modules/, - use: [ - { - loader: 'file-loader', - options: { outputPath: 'css/', name: '[name].min.css' }, - }, - 'extract-loader', - 'css-loader?-url', - 'postcss-loader', - { - loader: 'sass-loader', - options: { - sassOptions: { - includePaths: [ - path.join(__dirname, 'packages'), - path.join(__dirname, 'uswds-packages'), - ], - }, - }, - }, - ], - }, - ], - }, -}; diff --git a/packages/ncids-js/.babelrc.js b/packages/ncids-js/.babelrc.js deleted file mode 100644 index f7e672692..000000000 --- a/packages/ncids-js/.babelrc.js +++ /dev/null @@ -1,9 +0,0 @@ -module.exports = { - presets: ['@babel/preset-env', '@babel/preset-typescript'], - comments: false, - env: { - test: { - plugins: ['@babel/plugin-transform-runtime'], - }, - }, -}; diff --git a/packages/ncids-js/README.md b/packages/ncids-js/README.md index 848c007f4..3643f3828 100644 --- a/packages/ncids-js/README.md +++ b/packages/ncids-js/README.md @@ -16,20 +16,6 @@ $ yarn add @nciocpl/ncids-js $ npm install @nciocpl/ncids-js ``` -## Usage - -### .ts -todo - -### .js -todo - -### Webpack -todo - -### etc -tood - ## Contributing Guiding principles, style guides, and contributing instructions are found in the [Github Wiki](https://github.com/NCIOCPL/ncids/wiki/Technical-JS-Component-Design-Overview). @@ -40,16 +26,19 @@ Also see [The Way](https://github.com/NCIOCPL/ncids/wiki/The-Way) for more infor ### Building -Compiles TypeScript into JavaScript. +Compiles TypeScript into JavaScript and bundles for CDN/browser usage. ```shell $ npm run build ``` Under the hood: -* Runs TypeScript compiler `tsc -p tsconfig.json` to output ES modules in `./lib/esm/` -* Runs `tsc -p tsconfig-cjs.json` to output CommonJS code `./lib/cjs/` -* Transpiles javascript for older browsers to `./dist/` with `rollup --config` via RollupJS and Babel +* `tsc -b tsconfig.json` outputs ES modules to `./lib/esm/` +* `tsc -b tsconfig-cjs.json` outputs CommonJS modules to `./lib/cjs/` +* `rollup -c` bundles into: + * `dist/ncids.min.js` for use in ` + + diff --git a/testing/ncids-js-testing/public/cdn-examples/ncids-minimal.html b/testing/ncids-js-testing/public/cdn-examples/ncids-minimal.html new file mode 100644 index 000000000..0d49868c7 --- /dev/null +++ b/testing/ncids-js-testing/public/cdn-examples/ncids-minimal.html @@ -0,0 +1,455 @@ + + + + CDN NCIDS Minimal Test Page + + + + + + + + + Skip to main content + +
+
+
+
+ An official website of the United States government +
+ Español +
+
+
+ + + +
+
+ + +
+ + + +
+
+ + +
+ +
+
+ +

The content area left intentionally blank.

+
+
+ + + + + diff --git a/testing/ncids-js-testing/public/cdn-examples/ncids.html b/testing/ncids-js-testing/public/cdn-examples/ncids.html new file mode 100644 index 000000000..2a5c56383 --- /dev/null +++ b/testing/ncids-js-testing/public/cdn-examples/ncids.html @@ -0,0 +1,555 @@ + + + + CDN NCIDS without Utils Test Page + + + + + + + + + Skip to main content +
+
+
+
+ An official website of the United States government +
+ Español +
+
+
+ + + +
+
+ + +
+ + + +
+
+ + +
+ +
+
+
+ +
+ +
+
+ +
+

Your Follow-Up Care Schedule

+ +

In general, people return to the doctor for follow-up appointments every 3 to 4 months during the first 2 to 3 years after treatment, and once or twice a year after that.

+

At these visits, you may have a physical exam along with blood tests and other necessary tests and procedures. Which tests you receive and how often you receive them will be based on what your doctor thinks is best for you when creating your follow-up care plan.

+ +
+
+
+ Survivorship Clinics +
+
+

Some cancer centers and hospitals have programs that specialize in long-term follow-up care for cancer survivors. Many NCI-Designated Cancer Centers and large community treatment centers offer some form of survivorship program or clinic for adults who have been treated for cancer. Also, the cancer education website OncoLink has a searchable database of survivorship clinics across the United States.

For children and adolescents, NCI’s Office of Cancer Survivorship provides information on where to get follow-up care after treatment, in addition to other posttreatment resources. In addition, the National Children's Cancer Society also provides a list of long-term follow-up care clinics for children who have had cancer.

+
+
+
+
+ +
+ +
+ +
+
+ Testing utility classes using the ncids.css import. +
+ +
+
+
+
+
+ +
+
+
+ +
+
+
+ +
+ .float-left + .float-right +
+ +
+
    +
  • Red apples
    • +
  • Yellow bananas
    • +
  • Purple eggplants
    • +
+
+
+
+
+ + + + + diff --git a/testing/ncids-js-testing/public/index.html b/testing/ncids-js-testing/public/index.html index 8859f85dd..374e9afba 100644 --- a/testing/ncids-js-testing/public/index.html +++ b/testing/ncids-js-testing/public/index.html @@ -272,8 +272,22 @@

Component/Feature examples

Accordion + +

CDN

+
+