From 105883d33f00a2c37cfbb8c8ca6273a5cd25b325 Mon Sep 17 00:00:00 2001 From: Kelsey Jackson Date: Wed, 29 Mar 2023 13:02:34 -0500 Subject: [PATCH 1/9] added sharp styles --- packages/fa-icon-chooser/package-lock.json | 19 +- packages/fa-icon-chooser/package.json | 6 +- .../fa-icon-chooser/fa-icon-chooser.e2e.ts | 6 + .../fa-icon-chooser/fa-icon-chooser.tsx | 107 ++++++- .../src/utils/defaultIconsSearchResult.json | 284 +++++++++++++----- packages/fa-icon-chooser/src/utils/slots.tsx | 8 + packages/fa-icon-chooser/src/utils/utils.ts | 10 +- 7 files changed, 354 insertions(+), 86 deletions(-) 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.e2e.ts b/packages/fa-icon-chooser/src/components/fa-icon-chooser/fa-icon-chooser.e2e.ts index f2b1c6e..8107eae 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,7 @@ describe('fa-icon-chooser', () => { { family: 'classic', style: 'thin' }, { family: 'duotone', style: 'solid' }, { family: 'sharp', style: 'solid' }, + { family: 'sharp', style: 'regular' }, ], }, }, @@ -39,6 +40,7 @@ describe('fa-icon-chooser', () => { { family: 'classic', style: 'thin' }, { family: 'duotone', style: 'solid' }, { family: 'sharp', style: 'solid' }, + { family: 'sharp', style: 'regular' }, ], }, }, @@ -54,6 +56,7 @@ describe('fa-icon-chooser', () => { { family: 'classic', style: 'thin' }, { family: 'duotone', style: 'solid' }, { family: 'sharp', style: 'solid' }, + { family: 'sharp', style: 'regular' }, ], }, }, @@ -69,6 +72,7 @@ describe('fa-icon-chooser', () => { { family: 'classic', style: 'thin' }, { family: 'duotone', style: 'solid' }, { family: 'sharp', style: 'solid' }, + { family: 'sharp', style: 'regular' }, ], }, }, @@ -84,6 +88,7 @@ describe('fa-icon-chooser', () => { { family: 'classic', style: 'thin' }, { family: 'duotone', style: 'solid' }, { family: 'sharp', style: 'solid' }, + { family: 'sharp', style: 'regular' }, ], }, }, @@ -102,6 +107,7 @@ describe('fa-icon-chooser', () => { { family: 'classic', style: 'thin' }, { family: 'duotone', style: 'solid' }, { family: 'sharp', style: 'solid' }, + { family: 'sharp', style: 'regular' }, ], }, }, 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..4a204ea 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 @@ -51,6 +51,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 +60,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 +156,8 @@ export class FaIconChooser { fal: false, fak: false, fass: false, + fasr: false, + fasl: false, }; @State() kitMetadata: KitMetadata; @@ -449,7 +455,15 @@ export class FaIconChooser { } isSharpSolidAvailable() { - return this.pro() && !!this.resolvedVersion().match('(6.2[0-9]*.)'); + return this.pro() && !!this.resolvedVersion().match('(6.4[0-9]*.)'); + } + + isSharpLightAvailable() { + return this.pro() && !!this.resolvedVersion().match('(6.4[0-9]*.)'); + } + + isSharpRegularAvailable() { + return this.pro() && !!this.resolvedVersion().match('(6.4[0-9]*.)'); } mayHaveIconUploads() { @@ -476,7 +490,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(); @@ -756,6 +772,95 @@ export class FaIconChooser { {this.slot('sharp-solid-requires-pro')} +
+ this.toggleStyleFilter('fasr')} + type="checkbox" + name="icons-style" + class="input-checkbox-custom" + > + + {this.slot('sharp-regular-requires-pro')} +
+
+ this.toggleStyleFilter('fasl')} + type="checkbox" + name="icons-style" + class="input-checkbox-custom" + > + + {this.slot('sharp-light-requires-pro')} +
Date: Wed, 29 Mar 2023 13:11:19 -0500 Subject: [PATCH 2/9] added missed readmes --- DEVELOPMENT.md | 4 ++-- readme.md | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) 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/readme.md b/readme.md index 30acdb5..e1eb8ca 100644 --- a/readme.md +++ b/readme.md @@ -26,7 +26,7 @@ When used with a kit, everything is available, according to that kit's configura - Font Awesome Pro - Font Awesome 6 - Including the Sharp Solid style, when using a Pro kit with Font Awesome 6.2.0 or newer! + Including the Sharp Regular & Light styles, when using a Pro kit with Font Awesome 6.4.0 or newer! - Kit Icon Uploads: any icons uploaded to the kit are available in the chooser. From 2b4822e3d4236aba3978c57471c8be5a7b5a0e33 Mon Sep 17 00:00:00 2001 From: Kelsey Jackson Date: Wed, 29 Mar 2023 13:26:03 -0500 Subject: [PATCH 3/9] fix to get test to pass --- packages/fa-icon-chooser/src/utils/utils.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/fa-icon-chooser/src/utils/utils.ts b/packages/fa-icon-chooser/src/utils/utils.ts index d9895de..97f0ecf 100644 --- a/packages/fa-icon-chooser/src/utils/utils.ts +++ b/packages/fa-icon-chooser/src/utils/utils.ts @@ -44,7 +44,7 @@ export const STYLE_TO_PREFIX: IconStyleToPrefix = { 'brands': 'fab', 'sharp-solid': 'fass', 'sharp-regular': 'fasr', - 'sharp-light': 'fasl' + 'sharp-light': 'fasl', }; export const PREFIX_TO_STYLE: IconPrefixToStyle = { @@ -57,7 +57,7 @@ export const PREFIX_TO_STYLE: IconPrefixToStyle = { fab: 'brands', fass: 'sharp-solid', fasr: 'sharp-regular', - fasl: 'sharp-light' + fasl: 'sharp-light', }; export type IconUpload = { @@ -164,10 +164,10 @@ export function familyStyleToPrefix(familyStyle: FamilyStyle): IconPrefix | null return STYLE_TO_PREFIX[familyStyle.style as string]; } else if ('sharp' === familyStyle.family && 'solid' === familyStyle.style) { return 'fass'; - } else if ('sharp' === familyStyle.family && 'regular' === familyStyle.style) { - return 'fasr' + } else if ('sharp' === familyStyle.family && 'regular' === familyStyle.style) { + return 'fasr'; } else if ('sharp' === familyStyle.family && 'light' === familyStyle.style) { - return 'fasl' + return 'fasl'; } else if ('duotone' === familyStyle.family && 'solid' === familyStyle.style) { return 'fad'; } else { From 4889ba50e078c6482e99aeeea1153f0fc2f66496 Mon Sep 17 00:00:00 2001 From: Kelsey Jackson Date: Wed, 29 Mar 2023 14:58:10 -0500 Subject: [PATCH 4/9] addressed feedback --- .../components/fa-icon-chooser/fa-icon-chooser.e2e.ts | 6 ++++++ .../src/components/fa-icon-chooser/fa-icon-chooser.tsx | 10 +++++++--- packages/fa-icon-chooser/src/utils/slots.tsx | 2 +- readme.md | 1 - 4 files changed, 14 insertions(+), 5 deletions(-) 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 8107eae..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 @@ -25,6 +25,7 @@ describe('fa-icon-chooser', () => { { family: 'duotone', style: 'solid' }, { family: 'sharp', style: 'solid' }, { family: 'sharp', style: 'regular' }, + { family: 'sharp', style: 'light' }, ], }, }, @@ -41,6 +42,7 @@ describe('fa-icon-chooser', () => { { family: 'duotone', style: 'solid' }, { family: 'sharp', style: 'solid' }, { family: 'sharp', style: 'regular' }, + { family: 'sharp', style: 'light' }, ], }, }, @@ -57,6 +59,7 @@ describe('fa-icon-chooser', () => { { family: 'duotone', style: 'solid' }, { family: 'sharp', style: 'solid' }, { family: 'sharp', style: 'regular' }, + { family: 'sharp', style: 'light' }, ], }, }, @@ -73,6 +76,7 @@ describe('fa-icon-chooser', () => { { family: 'duotone', style: 'solid' }, { family: 'sharp', style: 'solid' }, { family: 'sharp', style: 'regular' }, + { family: 'sharp', style: 'light' }, ], }, }, @@ -89,6 +93,7 @@ describe('fa-icon-chooser', () => { { family: 'duotone', style: 'solid' }, { family: 'sharp', style: 'solid' }, { family: 'sharp', style: 'regular' }, + { family: 'sharp', style: 'light' }, ], }, }, @@ -108,6 +113,7 @@ describe('fa-icon-chooser', () => { { 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 4a204ea..1283f01 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; @@ -455,15 +456,18 @@ export class FaIconChooser { } isSharpSolidAvailable() { - return this.pro() && !!this.resolvedVersion().match('(6.4[0-9]*.)'); + console.log(semver.satisfies(this.resolvedVersion(), '>=6.2.0')); + return this.pro() && semver.satisfies(this.resolvedVersion(), '>=6.2.0'); } isSharpLightAvailable() { - return this.pro() && !!this.resolvedVersion().match('(6.4[0-9]*.)'); + console.log(semver.satisfies(this.resolvedVersion(), '>=6.4.0')); + return this.pro() && semver.satisfies(this.resolvedVersion(), '>=6.4.0'); } isSharpRegularAvailable() { - return this.pro() && !!this.resolvedVersion().match('(6.4[0-9]*.)'); + console.log(semver.satisfies(this.resolvedVersion(), '>=6.3.0')); + return this.pro() && semver.satisfies(this.resolvedVersion(), '>=6.3.0'); } mayHaveIconUploads() { diff --git a/packages/fa-icon-chooser/src/utils/slots.tsx b/packages/fa-icon-chooser/src/utils/slots.tsx index 0a653ca..a273e2a 100644 --- a/packages/fa-icon-chooser/src/utils/slots.tsx +++ b/packages/fa-icon-chooser/src/utils/slots.tsx @@ -38,7 +38,7 @@ slotDefaults['duotone-requires-pro'] = 'You need to use a Pro kit with Version 5 slotDefaults['sharp-solid-requires-pro'] = 'You need to use a Pro kit with Version 6.2.0 or later to get Sharp Solid icons.'; -slotDefaults['sharp-regular-requires-pro'] = 'You need to use a Pro kit with Version 6.4.0 or later to get Sharp Regular icons.'; +slotDefaults['sharp-regular-requires-pro'] = 'You need to use a Pro kit with Version 6.3.0 or later to get Sharp Regular icons.'; slotDefaults['sharp-light-requires-pro'] = 'You need to use a Pro kit with Version 6.4.0 or later to get Sharp Light icons.'; diff --git a/readme.md b/readme.md index e1eb8ca..eefad5f 100644 --- a/readme.md +++ b/readme.md @@ -26,7 +26,6 @@ When used with a kit, everything is available, according to that kit's configura - Font Awesome Pro - Font Awesome 6 - Including the Sharp Regular & Light styles, when using a Pro kit with Font Awesome 6.4.0 or newer! - Kit Icon Uploads: any icons uploaded to the kit are available in the chooser. From 2e4bfc86ee28fda1d489cfae3065c76e1aaa16a3 Mon Sep 17 00:00:00 2001 From: Kelsey Jackson Date: Wed, 29 Mar 2023 15:00:12 -0500 Subject: [PATCH 5/9] another prettier fix --- .../src/components/fa-icon-chooser/fa-icon-chooser.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 1283f01..32d412b 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,7 +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' +import semver from 'semver'; export type QueryHandler = (document: string) => Promise; From 81ff15380402dd3de3d253699c56f8cf2387a8d2 Mon Sep 17 00:00:00 2001 From: Kelsey Jackson Date: Fri, 31 Mar 2023 08:46:02 -0500 Subject: [PATCH 6/9] udpated css on tablet view for filters --- .../src/components/fa-icon-chooser/fa-icon-chooser.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) 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..2c9b2aa 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,9 @@ button.icon fa-icon { } /* custom > tablet */ -@media (min-width: 48rem) { + + +@media (min-width: 62.625rem) { .icons-style-menu-listing { flex-wrap: nowrap; } From 75aa4a007aa087652cd438704f1b4cb8a06d8cf2 Mon Sep 17 00:00:00 2001 From: Kelsey Jackson Date: Fri, 31 Mar 2023 08:47:54 -0500 Subject: [PATCH 7/9] update prettier --- .../src/components/fa-icon-chooser/fa-icon-chooser.css | 1 - 1 file changed, 1 deletion(-) 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 2c9b2aa..dfe4ce4 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 @@ -148,7 +148,6 @@ button.icon fa-icon { /* custom > tablet */ - @media (min-width: 62.625rem) { .icons-style-menu-listing { flex-wrap: nowrap; From 63d36971f7c417dd43ccee49200c545673e51ae5 Mon Sep 17 00:00:00 2001 From: Kelsey Jackson Date: Fri, 31 Mar 2023 08:53:02 -0500 Subject: [PATCH 8/9] more updates --- .../fa-icon-chooser/fa-icon-chooser.css | 2 +- .../fa-icon-chooser/fa-icon-chooser.tsx | 32 +++++++++---------- 2 files changed, 17 insertions(+), 17 deletions(-) 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 dfe4ce4..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 @@ -156,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.tsx b/packages/fa-icon-chooser/src/components/fa-icon-chooser/fa-icon-chooser.tsx index 32d412b..cebf65b 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 @@ -553,7 +553,7 @@ export class FaIconChooser { class="input-checkbox-custom" >