Merge pull request #893 from cagov/release/1.0.9-estero

Release 1.0.9 Estero

.gitignore

@@ -3,4 +3,5 @@ node_modules
 _site
 _site_dist
 _build_dist
-docs/site/components/*/
+docs/site/components/*/
+.history

CHANGELOG.md

@@ -1,6 +1,13 @@
 # California Design System
 
+## 1.0.9
+
+- Dependabot updates
+- Upgrade to 5.6.2 version of CAWeb icon library
+- Refactor icon component to have fewer dependencies
+
 ## 1.0.8
+
 - #797 Simple arrow animation suggestion
 - #828 - highlight section padding
 - #838 - a11y nav menu
@@ -54,6 +61,7 @@
 - Manual security updates to node packages based on dependabot alerts (a backlog of ~30 additional repeat alerst).
 
 ## 1.0.7
+
 - Dependabot updates
 - Updated color variables across most components
 - Bumped back-to-top component to v2.0.1
@@ -76,8 +84,8 @@
 - #807 - Updated "Skip to content" instructions with clearer instructions
 - #806 - Updated README to include additional information on tests, and directory structure
 - #805 - Hyperlinked the ca.gov icon in the sitewide footer
-- #802 - Added a new webpage ([Why web components](https://designsystem.webstandards.ca.gov/why-web-components)) explaining the uses of web components 
-- #799 - Standardized button styles on the homepage 
+- #802 - Added a new webpage ([Why web components](https://designsystem.webstandards.ca.gov/why-web-components)) explaining the uses of web components
+- #799 - Standardized button styles on the homepage
 - #799 - Updated color palette
 - #795 - Added additional heading font-weight options
 
@@ -102,8 +110,8 @@
 - #688 - Design tokens add a reference page
 - #694 - Update PR to allow capitalization in github branches
 - #698 - Accordion: Better multiline summaries, fixes to open indicator icon
-        ⚡️ Markup change since 2.0.0: accordion markup will need to be updated (`ds-accordion`, 2.0.1) 
-        [CHANGELOG](https://github.com/cagov/design-system/blob/main/components/accordion/CHANGELOG.md)
+  ⚡️ Markup change since 2.0.0: accordion markup will need to be updated (`ds-accordion`, 2.0.1)
+  [CHANGELOG](https://github.com/cagov/design-system/blob/main/components/accordion/CHANGELOG.md)
 - #703 - Step List: Adjust padding on `ds-step-list`
 
 ## 1.0.2
@@ -136,4 +144,4 @@
 
 ## 1.0.0
 
-* Initial release includes 18 components, principles, get started documentation, contact forms, design and content style guides. The component documentation is dynamically built from the component's README doc and includes live interactive demos of the component.
+- Initial release includes 18 components, principles, get started documentation, contact forms, design and content style guides. The component documentation is dynamically built from the component's README doc and includes live interactive demos of the component.

components/icons/.gitignore

@@ -1,3 +1,4 @@
 verify.html
 source-font.ttf
-cagovSomeIcons.svg
+cagovSomeIcons.svg
+.history

components/icons/.nvmrc

@@ -0,0 +1 @@
+16.15.1

components/icons/CHANGELOG.md

@@ -3,3 +3,8 @@
 ## 0.0.1
 
 - Initial commit
+
+## 1.0.0
+
+- Removed dependencies with security issues.
+- Changed method of getting orginal font and icon files.

components/icons/CONTRIBUTORS.md

@@ -2,19 +2,16 @@
 
 ## Development
 
-- `npm run dev:sprite-some`: A utility command for developers to create sprite with a subset of icons. Use `--ids=` to pass icon ids.
+- `npm run dev:sprite-some`: A utility command for developers to create sprite with a subset of icons. Use a space-separated list to pass icon ids.
 
-- `npm run dev:clear-cache`: Regenerates all the assets needed related to icons and cleares the website design cache.
+- `npm run dev:clear-cache`: Regenerates all the assets related to icons and cleares the website design cache.
 
 - `npm run dev:library`: Regenerates the icon library.
 
-- `npm run dev:icons`: Regenerates the icon set from the hosted CA.gov font. You should only have to run this when new versions of the font are released.
+- `npm run dev:sprite`: Regenerates the sprite from individual svgs. You should only have to run this when new versions of the font are released.
 
 - `npm run dev:font-sass`: Pipe sass file to design system website.
 
-## About fonts
-
-- Currently the fonts in the fonts folder and icon-font.scss and are hard coded. Ideally we'd create a script so they can be downloaded from source if need be.
 
 ## Design system icon library management
 

components/icons/README.md

@@ -10,7 +10,7 @@ Icons reduce cognitive load by communicating meanings or actions simply and accu
 
 ## When and how to use it
 
-Use icons as visual indicators to make key actions or information easy to find. [Organize content strategically](https://designsystem.webstandards.ca.gov/style/content/organize-content-strategically/) before using icons. Choose an existing icon from [Version 5.6.1 of the CAGov icon library](#icon-library) whenever possible.
+Use icons as visual indicators to make key actions or information easy to find. [Organize content strategically](https://designsystem.webstandards.ca.gov/style/content/organize-content-strategically/) before using icons. Choose an existing icon from [Version 5.6.2 of the CAGov icon library](#icon-library) whenever possible.
 
 Use icons for the same purpose consistently to avoid confusion for visitors and reduce cognitive load. Select an icon that’s as closely tied to the specific information or action as possible. When it may not be clear what the icon means, pair it with a label or supporting text.
 
@@ -57,15 +57,13 @@ The instructions assume familiarity with [npm](https://npmjs.com) package manage
 
 2. `npm install @cagov/ds-icons`
 
-3. Run the command `npm run dev:sprite-some -ids=[ids]` to generate a the sprite
+3. Run the command `npm run dev:sprite-some [ids]` to generate a the sprite
 
-   - `-ids` : A space-separated list of icon ids.
-
-   - Example: `npm run dev:sprite-some -ids=gear arrow-down left`
+   - Example: `npm run dev:sprite-some gear arrow-down left`
 
 4. The generated sprite will be called `cagovSomeIcons.svg`.
 
-5. Include the generated sprite and index.js in your project or page.
+5. Include the generated sprite and ./index.js as a module in your project or page.
 
 6. Place individual icon inline with `<cagov-icon data-icon="[id]"></cagov-icon>`
 
@@ -119,7 +117,7 @@ Recommended for projects where content authors need to be able to add any font i
 <html-preview>
 
 ```html preview
-<span class="ca-gov-icon-accessibility" aria-hidden="true"></span>
+<span class="ca-gov-icon-audio" aria-hidden="true"></span>
 <span class="ca-gov-icon-drive" aria-hidden="true"></span>
 <span class="ca-gov-icon-ferry" aria-hidden="true"></span>
 <span class="ca-gov-icon-van" aria-hidden="true"></span>
@@ -150,6 +148,6 @@ As a component in Alpha status, this component must pass the following accessibi
 
 ## Icon library
 
-Version 5.6.1 of the [CAGov icon library](https://template.webstandards.ca.gov/sample/icon-fonts.html). Download individual svgs using the links below.
+Version 5.6.2 of the [CAGov icon library](https://template.webstandards.ca.gov/sample/icon-fonts.html). Download individual svgs using the links below.
 
 {% include 'layouts/icon-library.njk' %}