Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@cmsgov/design-system-docs
Advanced tools
@cmsgov/design-system-docs - npm Package Compare versions
Comparing version 2.0.0-beta.1 to 2.0.0-beta.3
| { | ||
| "name": "@cmsgov/design-system-docs", | ||
| "version": "2.0.0-beta.1", | ||
| "version": "2.0.0-beta.3", | ||
| "publishConfig": { | ||
@@ -12,3 +12,3 @@ "access": "public", | ||
| "dependencies": { | ||
| "@cmsgov/design-system": "2.0.0-beta.1", | ||
| "@cmsgov/design-system": "2.0.0-beta.3", | ||
| "classnames": "^2.2.5", | ||
@@ -15,0 +15,0 @@ "lodash": "^4.17.13", |
@@ -19,3 +19,3 @@ import { Choice, Dropdown } from '@cmsgov/design-system'; | ||
| options={dropdownOptions} | ||
| defaultValue={'B'} | ||
| defaultValue="B" | ||
| label="Dropdown example" | ||
@@ -22,0 +22,0 @@ labelClassName="ds-c-label ds-u-margin-top--0" |
@@ -5,3 +5,3 @@ --- | ||
| CMS strives to make its Design System work for as many people as possible, including people with disabilities. | ||
| The {{name}} strives to work for as many people as possible, including people with disabilities. | ||
@@ -18,3 +18,3 @@ ## What we do to help meet and exceed standards | ||
| The CMS Design System currently meets or exceeds [WCAG 2.0 AA](https://www.w3.org/TR/WCAG20/) and [Section 508](http://www.section508.gov/) standards, which requires information and communications technology developed, procured, maintained, or used by the federal government be accessible to both employees and members of the public with disabilities. | ||
| The {{name}} currently meets or exceeds [WCAG 2.0 AA](https://www.w3.org/TR/WCAG20/) and [Section 508](http://www.section508.gov/) standards, which requires information and communications technology developed, procured, maintained, or used by the federal government be accessible to both employees and members of the public with disabilities. | ||
@@ -21,0 +21,0 @@ More information on Section 508 can be found at: |
@@ -10,3 +10,3 @@ --- | ||
| ```jsx | ||
| import { Alert } from '@cmsgov/design-system'; | ||
| import { Alert } from '{{npm}}'; | ||
| import i18n from 'i18n'; | ||
@@ -13,0 +13,0 @@ |
@@ -6,4 +6,4 @@ --- | ||
| The CMS design system follows the [2% rule](https://gds.blog.gov.uk/2012/01/25/support-for-browsers/): we officially support any browser above 2% usage and the last 2 browsers versions for each browser as observed by [analytics.usa.gov](https://analytics.usa.gov/). For specific browser details check out [browserlist](https://browserl.ist/?q=last+2+versions%2C+%3E2%25). **Currently, the latest 2 versions of Chrome, Firefox, Safari, Internet Explorer 11, and Edge are supported.** | ||
| The {{name}} follows the [2% rule](https://gds.blog.gov.uk/2012/01/25/support-for-browsers/): we officially support any browser above 2% usage and the last 2 browsers versions for each browser as observed by [analytics.usa.gov](https://analytics.usa.gov/). For specific browser details check out [browserlist](https://browserl.ist/?q=last+2+versions%2C+%3E2%25). **Currently, the latest 2 versions of Chrome, Firefox, Safari, Internet Explorer 11, and Edge are supported.** | ||
| The CMSDS is designed to be compatible with different operating systems and browser versions in order to provide a broad range of support. [Progressive enhancement and graceful degredation](https://www.w3.org/wiki/Graceful_degradation_versus_progressive_enhancement) methodologies are used to accomplish this. |
@@ -26,6 +26,6 @@ --- | ||
| ```jsx | ||
| import { Button, TextField } from '@cmsgov/design-system'; | ||
| import { Button, TextField } from '{{npm}}'; | ||
| ``` | ||
| The `@cmsgov/design-system` package provides an ES modules version of our code (located in `dist/esnext`) to support Webpack 4's tree shaking optimizations. Our package is configured to let Webpack know to resolve imports from `"@cmsgov/design-system"` to the ES modules version when preferred. | ||
| The `{{npm}}` package provides an ES modules version of our code to support Webpack 4's tree shaking optimizations. Our package is configured to let Webpack know to resolve imports from `"{{npm}}"` to the ES modules version when preferred. | ||
@@ -37,4 +37,4 @@ ### Individual imports | ||
| ```jsx | ||
| import Button from '@cmsgov/design-system/dist/components/Button/Button'; | ||
| import TextField from '@cmsgov/design-system/dist/components/Button/TextField'; | ||
| import Button from '{{npm}}/dist/components/Button/Button'; | ||
| import TextField from '{{npm}}/dist/components/Button/TextField'; | ||
| ``` | ||
@@ -90,2 +90,2 @@ | ||
| If you're having trouble installing or setting up the design system, or if you think you've found a bug, feel free to [open an issue on GitHub](https://github.com/CMSgov/design-system/issues). | ||
| If you're having trouble installing or setting up the design system, or if you think you've found a bug, feel free to [open an issue on GitHub]({{github}}/issues). |
@@ -6,3 +6,3 @@ --- | ||
| Additional examples of the design system in use can be viewed on [GitHub](https://github.com/CMSgov/design-system). These projects demonstrate the various ways you can incorporate the design system into your development process and various use cases. | ||
| Additional examples of the CMS Design System (CMSDS) in use can be viewed on the core [CMSDS GitHub](https://github.com/CMSgov/design-system). These projects demonstrate the various ways you can incorporate the design system into your development process and various use cases. | ||
@@ -22,2 +22,2 @@ ## HTML/CSS examples | ||
| If you're having trouble installing or setting up the design system, or if you think you've found a bug, feel free to [open an issue on GitHub](https://github.com/CMSgov/design-system/tree/master/examples). | ||
| If you're having trouble installing or setting up the design system, or if you think you've found a bug, feel free to [open an issue on GitHub]({{github}}/tree/master/examples). |
@@ -39,2 +39,2 @@ --- | ||
| If you're having trouble installing or setting up the design system, or if you think you've found a bug, feel free to [open an issue on GitHub](https://github.com/CMSgov/design-system/issues). | ||
| If you're having trouble installing or setting up the design system, or if you think you've found a bug, feel free to [open an issue on GitHub]({{github}}/issues). |
@@ -6,5 +6,5 @@ --- | ||
| The design system is available an NPM package or via a <a href="https://github.com/CMSgov/design-system/releases/latest">.zip download</a>. | ||
| The design system is available an NPM package or via a <a href="{{root}}/download.zip">.zip download</a>. | ||
| The [@cmsgov/design-system](https://www.npmjs.com/package/@cmsgov/design-system) package includes: | ||
| The [{{npm}}](https://www.npmjs.com/package/{{npm}}) package includes: | ||
@@ -19,3 +19,3 @@ - Base styles | ||
| ``` | ||
| npm install --save @cmsgov/design-system | ||
| npm install --save {{npm}} | ||
| ``` | ||
@@ -29,2 +29,2 @@ | ||
| If you're having trouble installing or setting up the design system, or if you think you've found a bug, feel free to [open an issue on GitHub](https://github.com/CMSgov/design-system/issues). | ||
| If you're having trouble installing or setting up the design system, or if you think you've found a bug, feel free to [open an issue on GitHub]({{githubUrl}}/issues). |
@@ -67,2 +67,4 @@ --- | ||
| See the [theming page]({{root}}/startup/theming/) for more specific information on overriding the default Sass variables or CSS declarations. | ||
| ### Importing Javascript | ||
@@ -74,3 +76,3 @@ | ||
| ## Fonts and Images | ||
| ### Fonts and Images | ||
@@ -93,2 +95,12 @@ Fonts and images are now stored in `@cmsgov/design-system/dist/fonts` and `@cmsgov/design-system/dist/images`. Previously they were stored in `@cmsgov/design-system/fonts` and `@cmsgov/design-system/images`. | ||
| ## Focus styles | ||
| CMSDS focus styles will now be considered a `draft` feature, and will be turned off by default. Focus styles can be reenabled by setting the `$ds-include-focus-styles` build variable to true, but these styles will likely change in the future as we iterate on our design. See the [theming page](https://design.cms.gov/startup/theming/#focus-settings) for more information on how to customize or enable focus styles. | ||
| ### Why the change? | ||
| When we first released focus styles in [version 3.6.0](https://github.com/CMSgov/design-system/releases/tag/3.6.0), our goal was to provide a recommended focus style implementation that would incorporate accessibility and best practices, much of which was informed by [UKgov's research](https://design-system.service.gov.uk/get-started/focus-states/) and [USWDS's focus state implementation](https://designsystem.digital.gov/). While we spent 4 months developing, iterating, and gathering feedback before the release, we made several mistakes in the process. Due to communication and process shortcomings, our team wasn't able to fully consider how our design would impact existing focus styles, or whether or not our design was too specific. Our team assumed that the SCSS variables we provided were sufficient to adapt the focus styles for different use cases and we neglected to add an easy way to opt out of the new feature. | ||
| In this release, we worked to correct these mistakes by putting the new styles under a flag and turning them off by default. In the future, we plan on iterating on our default styles to be more generalized and more in line with existing focus styles on CMS products. We will also be adding additional mixins, variables, and documentation to make it easier for teams to customize focus styles. | ||
| ## A note on versioning | ||
@@ -95,0 +107,0 @@ |
@@ -10,4 +10,4 @@ --- | ||
| 1. Download the zip file from the latest CMS design system release and open that file. | ||
| 1. Copy the `packages/design-system/index.css` file into a relevant place in your code base — likely a directory where you keep third-party libraries. In the example below, our directory is `css/vendor`. | ||
| 1. Download the zip file from the latest design system release and open that file. | ||
| 1. Copy the `dist/css/index.css` file into a relevant place in your code base — likely a directory where you keep third-party libraries. In the example below, our directory is `css/vendor`. | ||
| 1. Add a `<link>` to the stylesheet in your site's `<head>` | ||
@@ -31,3 +31,3 @@ | ||
| ```css | ||
| @import '@cmsgov/design-system/dist/scss/index'; | ||
| @import '{{npm}}/dist/scss/index'; | ||
| ``` | ||
@@ -58,2 +58,2 @@ | ||
| If you're having trouble installing or setting up the design system, or if you think you've found a bug, feel free to [open an issue on GitHub](https://github.com/CMSgov/design-system/issues). | ||
| If you're having trouble installing or setting up the design system, or if you think you've found a bug, feel free to [open an issue on GitHub]({{github}}/issues). |
@@ -30,3 +30,3 @@ --- | ||
| @import 'overrides'; | ||
| @import '@cmsgov/design-system/dist/scss/index'; | ||
| @import '{{npm}}/dist/scss/index'; | ||
| ``` | ||
@@ -36,3 +36,3 @@ | ||
| Sass variables are documented on the relevant documentation pages, and are defined in the `@cmsgov/design-system` package: | ||
| Sass variables are documented on the relevant documentation pages, and are defined in the `{{npm}}` package: | ||
@@ -43,4 +43,26 @@ - [Breakpoints]({{root}}/guidelines/responsive/) | ||
| - [Type sizes]({{root}}/styles/typography/) | ||
| - You can also [browse all Sass variable files on GitHub](https://github.com/CMSgov/design-system/tree/master/packages/design-system/src/styles/settings/variables). | ||
| You can also [browse all Sass variable files on GitHub](https://github.com/CMSgov/design-system/tree/master/packages/design-system/src/styles/settings/variables). | ||
| #### Focus style settings | ||
| The focus styles are disabled by default. However if you'd ike to use them | ||
| set the `$ds-include-focus-styles` variable to `true`. | ||
| **Focus style variables** | ||
| - `$focus-color` - Sets background highlight color. | ||
| - `$focus-shadow` - Sets box-shadow on text fields. | ||
| - `$focus-shadow-link` - Sets box-shadow on buttons and links. | ||
| - `$focus-color-inverse`- Sets background highlight color on dark backgrounds. | ||
| - `$focus-shadow-inverse`- Sets box-shadow on text fields on dark backgrounds. | ||
| - `$focus-shadow-link-inverse` - Sets box-shadow on buttons and links on dark backgrounds. | ||
| **Mixins** | ||
| - `focus-text` - Mixin for links and buttons. | ||
| - `focus-text-inverse` - Mixin for links and buttons on dark backgrounds. | ||
| See the [v2 migration guide](https://design.cms.gov/startup/migrating-v2/#focus-styles) for more background on our focus styles. | ||
| ## CSS declarations | ||
@@ -47,0 +69,0 @@ |
@@ -6,8 +6,3 @@ import { Button } from '@cmsgov/design-system'; | ||
| import githubUrl from '../helpers/githubUrl'; | ||
| import pkg from '../../../package.json'; | ||
| // TODO: Replace with link to self hosted download | ||
| const zipUrl = githubUrl( | ||
| `releases/download/${pkg.version}/cmsgov-design-system-${pkg.version}.tgz` | ||
| ); | ||
| const GitHubLinks = (props) => { | ||
@@ -24,3 +19,3 @@ const downloadBtnClassName = classNames('ds-u-font-weight--normal', { | ||
| <Button | ||
| href={zipUrl} | ||
| href="download.zip" | ||
| inversed={props.inversed} | ||
@@ -27,0 +22,0 @@ variation="primary" |
@@ -36,10 +36,12 @@ import GitHubLinks from './GitHubLinks'; | ||
| </header> | ||
| <div className="ds-c-alert ds-c-alert--warn ds-c-alert--hide-icon ds-u-border--0 "> | ||
| <div className="ds-c-alert__body"> | ||
| <p className="ds-c-alert__text"> | ||
| <strong>CMS Design System v2 has been released!</strong> | ||
| See our <a href="/startup/migrating-v2/">migration guide</a>. | ||
| </p> | ||
| {process.env.core && ( | ||
| <div className="ds-c-alert ds-c-alert--warn ds-c-alert--hide-icon ds-u-border--0 "> | ||
| <div className="ds-c-alert__body"> | ||
| <p className="ds-c-alert__text"> | ||
| <strong>CMS Design System v2 has been released!</strong> | ||
| See our <a href="/startup/migrating-v2/">migration guide</a>. | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| )} | ||
| </div> | ||
@@ -46,0 +48,0 @@ ); |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.69%
356011
Worsened metrics
- Number of package files
- decreased by-0.42%
237
- Lines of code
- decreased by-0.12%
2398
Dependency changes
+ Added@cmsgov/design-system@2.0.0-beta.3(transitive)
- Removed@cmsgov/design-system@2.0.0-beta.1(transitive)