diff --git a/DEVELOPMENT.md b/DEVELOPMENT.md index 5e7d5d3..54749c8 100644 --- a/DEVELOPMENT.md +++ b/DEVELOPMENT.md @@ -59,7 +59,7 @@ and it has three top-level keys: } }, "props": { - "version": "5.15.3" + "version": "6.4.0" } } ``` @@ -78,7 +78,7 @@ and it has three top-level keys: ```json { "props": { - "version": "5.15.3" + "version": "6.4.0" } } ``` diff --git a/packages/fa-icon-chooser/package-lock.json b/packages/fa-icon-chooser/package-lock.json index 3c8298e..93d3b1d 100644 --- a/packages/fa-icon-chooser/package-lock.json +++ b/packages/fa-icon-chooser/package-lock.json @@ -1,15 +1,15 @@ { "name": "@fortawesome/fa-icon-chooser", - "version": "0.3.0", + "version": "0.4.1", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@fortawesome/fa-icon-chooser", - "version": "0.3.0", + "version": "0.4.1", "license": "MIT", "dependencies": { - "@fortawesome/fontawesome-common-types": "^6.2.0", + "@fortawesome/fontawesome-common-types": "^6.4.0", "@stencil/core": "^2.13.0", "lodash": "^4.17.21", "semver": "^6.3.0" @@ -588,10 +588,9 @@ "dev": true }, "node_modules/@fortawesome/fontawesome-common-types": { - "version": "6.2.0", - "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.2.0.tgz", - "integrity": "sha512-rBevIsj2nclStJ7AxTdfsa3ovHb1H+qApwrxcTVo+NNdeJiB9V75hsKfrkG5AwNcRUNxrPPiScGYCNmLMoh8pg==", - "hasInstallScript": true, + "version": "6.4.0", + "resolved": "https://npm.fontawesome.com/@fortawesome/fontawesome-common-types/-/6.4.0/fontawesome-common-types-6.4.0.tgz", + "integrity": "sha512-HNii132xfomg5QVZw0HwXXpN22s7VBHQBv9CeOu9tfJnhsWQNd2lmTNi8CSrnw5B+5YOmzu1UoPAyxaXsJ6RgQ==", "engines": { "node": ">=6" } @@ -4950,9 +4949,9 @@ "dev": true }, "@fortawesome/fontawesome-common-types": { - "version": "6.2.0", - "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.2.0.tgz", - "integrity": "sha512-rBevIsj2nclStJ7AxTdfsa3ovHb1H+qApwrxcTVo+NNdeJiB9V75hsKfrkG5AwNcRUNxrPPiScGYCNmLMoh8pg==" + "version": "6.4.0", + "resolved": "https://npm.fontawesome.com/@fortawesome/fontawesome-common-types/-/6.4.0/fontawesome-common-types-6.4.0.tgz", + "integrity": "sha512-HNii132xfomg5QVZw0HwXXpN22s7VBHQBv9CeOu9tfJnhsWQNd2lmTNi8CSrnw5B+5YOmzu1UoPAyxaXsJ6RgQ==" }, "@istanbuljs/load-nyc-config": { "version": "1.1.0", diff --git a/packages/fa-icon-chooser/package.json b/packages/fa-icon-chooser/package.json index 4421b04..62bd48f 100644 --- a/packages/fa-icon-chooser/package.json +++ b/packages/fa-icon-chooser/package.json @@ -34,18 +34,18 @@ "format.check": "prettier --check ." }, "dependencies": { + "@fortawesome/fontawesome-common-types": "^6.4.0", "@stencil/core": "^2.13.0", "lodash": "^4.17.21", - "semver": "^6.3.0", - "@fortawesome/fontawesome-common-types": "^6.2.0" + "semver": "^6.3.0" }, "license": "MIT", "devDependencies": { "@stencil/react-output-target": "^0.2.1", "@types/jest": "^27.4.0", + "@types/puppeteer": "^5.4.4", "jest": "^27.4.7", "jest-cli": "^27.4.7", - "@types/puppeteer": "^5.4.4", "prettier": "^2.3.2", "puppeteer": "^13.1.2" } diff --git a/packages/fa-icon-chooser/src/components/fa-icon-chooser/fa-icon-chooser.css b/packages/fa-icon-chooser/src/components/fa-icon-chooser/fa-icon-chooser.css index bdc3be4..4f16def 100644 --- a/packages/fa-icon-chooser/src/components/fa-icon-chooser/fa-icon-chooser.css +++ b/packages/fa-icon-chooser/src/components/fa-icon-chooser/fa-icon-chooser.css @@ -147,7 +147,8 @@ button.icon fa-icon { } /* custom > tablet */ -@media (min-width: 48rem) { + +@media (min-width: 62.625rem) { .icons-style-menu-listing { flex-wrap: nowrap; } @@ -155,6 +156,6 @@ button.icon fa-icon { @media (min-width: 89rem) { .icons-style-menu-listing .icons-style-choice { - display: block; + display: flex; } } diff --git a/packages/fa-icon-chooser/src/components/fa-icon-chooser/fa-icon-chooser.e2e.ts b/packages/fa-icon-chooser/src/components/fa-icon-chooser/fa-icon-chooser.e2e.ts index f2b1c6e..394cc0a 100644 --- a/packages/fa-icon-chooser/src/components/fa-icon-chooser/fa-icon-chooser.e2e.ts +++ b/packages/fa-icon-chooser/src/components/fa-icon-chooser/fa-icon-chooser.e2e.ts @@ -24,6 +24,8 @@ describe('fa-icon-chooser', () => { { family: 'classic', style: 'thin' }, { family: 'duotone', style: 'solid' }, { family: 'sharp', style: 'solid' }, + { family: 'sharp', style: 'regular' }, + { family: 'sharp', style: 'light' }, ], }, }, @@ -39,6 +41,8 @@ describe('fa-icon-chooser', () => { { family: 'classic', style: 'thin' }, { family: 'duotone', style: 'solid' }, { family: 'sharp', style: 'solid' }, + { family: 'sharp', style: 'regular' }, + { family: 'sharp', style: 'light' }, ], }, }, @@ -54,6 +58,8 @@ describe('fa-icon-chooser', () => { { family: 'classic', style: 'thin' }, { family: 'duotone', style: 'solid' }, { family: 'sharp', style: 'solid' }, + { family: 'sharp', style: 'regular' }, + { family: 'sharp', style: 'light' }, ], }, }, @@ -69,6 +75,8 @@ describe('fa-icon-chooser', () => { { family: 'classic', style: 'thin' }, { family: 'duotone', style: 'solid' }, { family: 'sharp', style: 'solid' }, + { family: 'sharp', style: 'regular' }, + { family: 'sharp', style: 'light' }, ], }, }, @@ -84,6 +92,8 @@ describe('fa-icon-chooser', () => { { family: 'classic', style: 'thin' }, { family: 'duotone', style: 'solid' }, { family: 'sharp', style: 'solid' }, + { family: 'sharp', style: 'regular' }, + { family: 'sharp', style: 'light' }, ], }, }, @@ -102,6 +112,8 @@ describe('fa-icon-chooser', () => { { family: 'classic', style: 'thin' }, { family: 'duotone', style: 'solid' }, { family: 'sharp', style: 'solid' }, + { family: 'sharp', style: 'regular' }, + { family: 'sharp', style: 'light' }, ], }, }, diff --git a/packages/fa-icon-chooser/src/components/fa-icon-chooser/fa-icon-chooser.tsx b/packages/fa-icon-chooser/src/components/fa-icon-chooser/fa-icon-chooser.tsx index cf872e7..fc71c03 100644 --- a/packages/fa-icon-chooser/src/components/fa-icon-chooser/fa-icon-chooser.tsx +++ b/packages/fa-icon-chooser/src/components/fa-icon-chooser/fa-icon-chooser.tsx @@ -18,6 +18,7 @@ import { import { faSadTear, faTire } from '../../utils/icons'; import { slotDefaults } from '../../utils/slots'; import { IconPrefix } from '@fortawesome/fontawesome-common-types'; +import semver from 'semver'; export type QueryHandler = (document: string) => Promise; @@ -51,6 +52,8 @@ const DISPLAY_NONE = { display: 'none' }; * @slot thin-requires-pro - tooltip for thin style requiring Pro * @slot duotone-requires-pro - message about requirements for accessing duotone icons * @slot sharp-solid-requires-pro - message about requirements for accessing sharp solid icons + * @slot sharp-regular-requires-pro - message about requirements for accessing sharp regular icons + * @slot sharp-light-requires-pro - message about requirements for accessing sharp light icons * @slot uploaded-requires-pro - message about requirements for accessing kit icon uploads * @slot kit-has-no-uploaded-icons - message about a kit having no icon uploads * @slot no-search-results-heading - no search results message heading @@ -58,6 +61,8 @@ const DISPLAY_NONE = { display: 'none' }; * @slot suggest-icon-upload - message suggesting to try uploading a custom icon to a kit * @slot get-fontawesome-pro - message about getting Font Awesome Pro with link to fontawesome.com * @slot sharp-solid-style-filter-sr-message - screen reader only message for style filter: sharp solid + * @slot sharp-regular-style-filter-sr-message - screen reader only message for style filter: sharp regular + * @slot sharp-light-style-filter-sr-message - screen reader only message for style filter: sharp light * @slot solid-style-filter-sr-message - screen reader only message for style filter: solid * @slot regular-style-filter-sr-message - screen reader only message for style filter: regular * @slot light-style-filter-sr-message - screen reader only message for style filter: light @@ -152,6 +157,8 @@ export class FaIconChooser { fal: false, fak: false, fass: false, + fasr: false, + fasl: false, }; @State() kitMetadata: KitMetadata; @@ -449,7 +456,15 @@ export class FaIconChooser { } isSharpSolidAvailable() { - return this.pro() && !!this.resolvedVersion().match('(6.2[0-9]*.)'); + return this.pro() && semver.satisfies(this.resolvedVersion(), '>=6.2.0'); + } + + isSharpLightAvailable() { + return this.pro() && semver.satisfies(this.resolvedVersion(), '>=6.4.0'); + } + + isSharpRegularAvailable() { + return this.pro() && semver.satisfies(this.resolvedVersion(), '>=6.3.0'); } mayHaveIconUploads() { @@ -476,7 +491,9 @@ export class FaIconChooser { render() { const falDisabled = !this.pro(); + const faslDisabled = !this.isSharpLightAvailable(); const fassDisabled = !this.isSharpSolidAvailable(); + const fasrDisabled = !this.isSharpRegularAvailable(); const fatDisabled = !(this.isV6() && this.pro()); const fadDisabled = !this.isDuotoneAvailable(); const fakDisabled = !this.mayHaveIconUploads(); @@ -533,7 +550,7 @@ export class FaIconChooser { class="input-checkbox-custom" >