This repository is packaged as an npm package. To use in your project, add the following to the .npmrc file in the root directory. Replace your_personal_access_token with a github personal access token that has read:packages permission.

@nypublicradio:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=your_personal_access_token

Only commit the .npmrc file with the first line to git. Your personal access token should never be committed to git. If you accidentally commit your personal access token, delete it and generate a new personal access token with read:packages permission.

npm i

In the .env file on line 1, update the THEME env var with the name of the theme you want to use. Just use the directory name in the themes folder. src/assets/themes/. This theme will be used in the Storybook and Nuxt instances

if STORYBOOK_EDIT env var is set to true (default = false), it will use the _theme.scss file and provide real time updates as you develop. Unfortunalty, this results is a very slow build. You are better off quickly building the theme and the currently running storybook instance will update with the changes.

npm run storybook

NOTE: be sure to build the theme to see the theme updates

npm run build-theme themeName

VSCode users, install the test helper plugin: https://marketplace.visualstudio.com/items?itemName=ZixuanChen.vitest-explorer

All the tests can be found here: v2/src/tests/

Vitest config found in this file: ./vitest.config.js

npm run test

npm run test VComponentName

npm run coverage

src/assets/themes/

src/assets/library/

this will compile all the themes and output a .min and a .map file in the theme folder

npm run build-themes

this will compile one theme and output a .min and a .map file in the theme folder

npm run build-theme themeName

Manually navigate to /nuxt to view the sample pages/nuxt.vue

npm run dev

NOTE: be sure to build the theme to see the theme updates

npm run build-theme themeName

Each component has cssvars associated with it. The can befound in the v2/src/assets/cssvars/ directory. Each theme imports the _cssvars.scss file. When creating a new component, be sure to add the components cssvars to the _cssvars.scss file.

Prime Theme view is now included in the NUXT instance via pages/nuxt.vue file being rendered: src/components/Home.vue

--font-size = 16px --font-ratio = 1.125 --font-size-20 = 5.202rem/83.23px --font-size-19 = 4.624rem/73.98px --font-size-18 = 4.11rem/65.76px
--font-size-17 = 3.653rem/58.45px --font-size-16 = 3.247rem/51.96px --font-size-15 = 2.887rem/46.18px --font-size-14 = 2.566rem/41.05px --font-size-13 = 2.281rem/36.49px --font-size-12 = 2.027rem/32.44px --font-size-11 = 1.802rem/28.83px --font-size-10 = 1.602rem/25.63px --font-size-9 = 1.424rem/22.78px --font-size-8 = 1.266rem/20.25px --font-size-7 = 1.125rem/18.00px --font-size-6 = 1rem/16.00px --font-size-5 = 0.889rem/14.22px --font-size-4 = 0.79rem/12.64px --font-size-3 = 0.702rem/11.24px --font-size-2 = 0.624rem/9.99px --font-size-1 = 0.555rem/8.88px --font-size-0 = 0.493rem/7.89px

Navigate to nypr-design-system-vue3\src\assets\themes Duplicate “default” folder and rename it (no spaces in name) Delete .min.css and .min.css.map in the new theme folder In the root .env file, change THEME on line 1 to equal the new name

Make all variable changes to the nypr-design-system-vue3/src/assets/themes/newthemename/variables.scss file. Put all your colors into the $colors sass object (this will export a gradient for each color that you can use in your project where the "-500" version is the selected color. Lower values are lighter, higher numbers are darker. eg. --blue-100,--blue-200,--blue-300,--blue-400,--blue-500,--blue-600,--blue-700,--blue-800,--blue-900). You can then refer to that object in variables.scss when populating the scss variables like this map-get($colors, "blue");. Add or modify css vars in the nypr-design-system-vue3/src/assets/themes/newthemename/cssvars.scss file. Do not remove any css vars, as they may be being used by our custom components in nypr-design-system-vue3/v2/src/components. Be sure to use the css var font scale located in the cssvars.scss file for all font-sizes. Then reference chart above will how you choose. When creating/modifying custom components, make sure to use the css vars when styling. When modifying/overriding PrimeVue components for your new theme, add the styles to the nypr-design-system-vue3/src/assets/themes/newthemename/extensions.scss file. Once again, be sure to use css vars when styling. This will allow for the components to react to data-style-mode changes (dark mode etc).

default breakpoints

$xs: 375px !default;
$sm: 576px !default;
$md: 768px !default;
$lg: 992px !default;
$xl: 1200px !default;

The default PrimeFlex breakpoints css file we use (just adding xs:375 to their default) is located here: nypr-design-system-vue3/src/assets/library/primeflex.min.css

All the themes load this file by default in their respective _theme.scss file. You can create your own breakpoints by following the steps below.

To update them, clone this repo: https://github.com/primefaces/primeflex open this file primeflex\styles\lib\core\_variables.scss and update/add the breakpoints you want to use then run npm run build:sass to compile the new css files in the dist-lib directory. Put the new css file in your theme directory and update the _theme.scss file to point to the new file.

1. npm install nypr-design-system-vue3@2.0.0
2. set up the nuxt.config.js file with the @nuxt/image@rc module and options

 modules: [
    '@nuxt/image'
  ],

  image: {
    dir: 'assets-shared/images',
    wagtail: {
      baseURL: "https://cms.demo.nypr.digital/images/",
      screens: {
        xs: 375,
        sm: 576,
        md: 768,
        lg: 992,
        xl: 1280,
        xxl: 1366,
        '2xl': 1920
      },
    },
  },

3. import the css & scss files in your nuxt.config.js file (use the theme you want to use by replacing 'wnyc' with the name of the theme you want to use)

css: [
    '@nypublicradio/nypr-design-system-vue3/src/assets/themes/wnyc/fonts/fonts.css',
    'primeflex/primeflex.css',
    '@nypublicradio/nypr-design-system-vue3/src/assets/themes/wnyc/wnyc.min.css',
    'primevue/resources/primevue.min.css',
    'primeicons/primeicons.css',
  ],

  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `@import "@nypublicradio/nypr-design-system-vue3/src/assets/themes/wnyc/variables.scss"; @import "@nypublicradio/nypr-design-system-vue3/src/assets/themes/wnyc/_mixins.scss"; @import "~/assets/scss/global.scss";`,
        },
      },
      postcss: {
        plugins: [
          {
            postcssPlugin: 'internal:charset-removal',
            AtRule: {
              charset: (atRule) => {
                if (atRule.name === 'charset') {
                  atRule.remove();
                }
              }
            }
          }
        ]
      }
    },
  },

  build: {
    transpile: [
      'primevue'
    ]
  },

4. import the components you want to use in your project

import VFlexibleLink from '@nypublicradio/nypr-design-system-vue3/v2/src/components/VFlexibleLink.vue'