Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

added sharp styles #49

Merged
merged 9 commits into from
Mar 31, 2023
Merged

added sharp styles #49

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
105883d
added sharp styles
kelseythejackson Mar 29, 2023
8892d44
added missed readmes
kelseythejackson Mar 29, 2023
2b4822e
fix to get test to pass
kelseythejackson Mar 29, 2023
4889ba5
addressed feedback
kelseythejackson Mar 29, 2023
2e4bfc8
another prettier fix
kelseythejackson Mar 29, 2023
81ff153
udpated css on tablet view for filters
kelseythejackson Mar 31, 2023
75aa4a0
update prettier
kelseythejackson Mar 31, 2023
63d3697
more updates
kelseythejackson Mar 31, 2023
7949507
more updates
kelseythejackson Mar 31, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions DEVELOPMENT.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ and it has three top-level keys:
}
},
"props": {
"version": "5.15.3"
"version": "6.4.0"
}
}
```
Expand All @@ -78,7 +78,7 @@ and it has three top-level keys:
```json
{
"props": {
"version": "5.15.3"
"version": "6.4.0"
}
}
```
Expand Down
19 changes: 9 additions & 10 deletions packages/fa-icon-chooser/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 3 additions & 3 deletions packages/fa-icon-chooser/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
Expand Down
6 changes: 6 additions & 0 deletions packages/fa-icon-chooser/src/components/fa-icon-chooser/fa-icon-chooser.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ describe('fa-icon-chooser', () => {
{ family: 'classic', style: 'thin' },
{ family: 'duotone', style: 'solid' },
{ family: 'sharp', style: 'solid' },
{ family: 'sharp', style: 'regular' },
kelseythejackson marked this conversation as resolved.
Show resolved Hide resolved
],
},
},
Expand All @@ -39,6 +40,7 @@ describe('fa-icon-chooser', () => {
{ family: 'classic', style: 'thin' },
{ family: 'duotone', style: 'solid' },
{ family: 'sharp', style: 'solid' },
{ family: 'sharp', style: 'regular' },
],
},
},
Expand All @@ -54,6 +56,7 @@ describe('fa-icon-chooser', () => {
{ family: 'classic', style: 'thin' },
{ family: 'duotone', style: 'solid' },
{ family: 'sharp', style: 'solid' },
{ family: 'sharp', style: 'regular' },
],
},
},
Expand All @@ -69,6 +72,7 @@ describe('fa-icon-chooser', () => {
{ family: 'classic', style: 'thin' },
{ family: 'duotone', style: 'solid' },
{ family: 'sharp', style: 'solid' },
{ family: 'sharp', style: 'regular' },
],
},
},
Expand All @@ -84,6 +88,7 @@ describe('fa-icon-chooser', () => {
{ family: 'classic', style: 'thin' },
{ family: 'duotone', style: 'solid' },
{ family: 'sharp', style: 'solid' },
{ family: 'sharp', style: 'regular' },
],
},
},
Expand All @@ -102,6 +107,7 @@ describe('fa-icon-chooser', () => {
{ family: 'classic', style: 'thin' },
{ family: 'duotone', style: 'solid' },
{ family: 'sharp', style: 'solid' },
{ family: 'sharp', style: 'regular' },
],
},
},
Expand Down
107 changes: 106 additions & 1 deletion packages/fa-icon-chooser/src/components/fa-icon-chooser/fa-icon-chooser.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,13 +51,17 @@ 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
* @slot no-search-results-detail - no seach results message detail
* @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
Expand Down Expand Up @@ -152,6 +156,8 @@ export class FaIconChooser {
fal: false,
fak: false,
fass: false,
fasr: false,
fasl: false,
};

@State() kitMetadata: KitMetadata;
Expand Down Expand Up @@ -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]*.)');
kelseythejackson marked this conversation as resolved.
Show resolved Hide resolved
}

isSharpLightAvailable() {
return this.pro() && !!this.resolvedVersion().match('(6.4[0-9]*.)');
kelseythejackson marked this conversation as resolved.
Show resolved Hide resolved
}

isSharpRegularAvailable() {
return this.pro() && !!this.resolvedVersion().match('(6.4[0-9]*.)');
kelseythejackson marked this conversation as resolved.
Show resolved Hide resolved
}

mayHaveIconUploads() {
Expand All @@ -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();
Comment on lines 492 to 499
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@mlwilkerson @frrrances Checked to make sure that the "pro" styles are disabled if no kit token is supplied

Screenshot 2023-03-29 at 12 48 54 PM

Screenshot 2023-03-29 at 12 50 07 PM

Expand Down Expand Up @@ -756,6 +772,95 @@ export class FaIconChooser {
</label>
<span class="disabled-tooltip size-sm">{this.slot('sharp-solid-requires-pro')}</span>
</div>
<div class="wrap-icons-style-choice size-sm laptop:size-md margin-3xs column">
<input
disabled={fasrDisabled}
id="icons-style-sharp-regular"
checked={this.styleFilterEnabled && this.styleFilters.fasr}
onChange={() => this.toggleStyleFilter('fasr')}
type="checkbox"
name="icons-style"
class="input-checkbox-custom"
></input>
<label
htmlFor="icons-style-sharp-regular"
class="icons-style-choice padding-xs tablet:padding-md laptop:padding-sm margin-0 display-flex flex-column flex-items-center "
>
{fasrDisabled ? (
<span class="style-icon position-relative display-none size-sm margin-bottom-2xs tablet:display-block laptop:display-inline-block laptop:margin-right-sm laptop:margin-bottom-0">
<fa-icon {...this.commonFaIconProps} name="meh" stylePrefix="far" size="2x" class="checked-icon fa-fw" />
</span>
) : (
<span class="style-icon position-relative display-none size-sm margin-bottom-2xs tablet:display-block laptop:display-inline-block laptop:margin-right-sm laptop:margin-bottom-0">
<fa-icon
style={!this.showCheckedStyleIcon('fasr') && DISPLAY_NONE}
{...this.commonFaIconProps}
name="grin-tongue"
stylePrefix="fasr"
size="2x"
class="checked-icon fa-fw"
/>
<fa-icon
style={this.showCheckedStyleIcon('fasr') && DISPLAY_NONE}
{...this.commonFaIconProps}
name="smile"
stylePrefix="fasr"
size="2x"
class="unchecked-icon fa-fw"
/>
</span>
)}

<span>
Sharp&nbsp;Regular <span class="sr-only">{this.slot('sharp-regular-style-filter-sr-message')}</span>
</span>
</label>
<span class="disabled-tooltip size-sm">{this.slot('sharp-regular-requires-pro')}</span>
</div>
<div class="wrap-icons-style-choice size-sm laptop:size-md margin-3xs column">
<input
disabled={faslDisabled}
id="icons-style-sharp-light"
checked={this.styleFilterEnabled && this.styleFilters.fasl}
onChange={() => this.toggleStyleFilter('fasl')}
type="checkbox"
name="icons-style"
class="input-checkbox-custom"
></input>
<label
htmlFor="icons-style-sharp-light"
class="icons-style-choice padding-xs tablet:padding-md laptop:padding-sm margin-0 display-flex flex-column flex-items-center "
>
{faslDisabled ? (
<span class="style-icon position-relative display-none size-sm margin-bottom-2xs tablet:display-block laptop:display-inline-block laptop:margin-right-sm laptop:margin-bottom-0">
<fa-icon {...this.commonFaIconProps} name="meh" stylePrefix="far" size="2x" class="checked-icon fa-fw" />
</span>
) : (
<span class="style-icon position-relative display-none size-sm margin-bottom-2xs tablet:display-block laptop:display-inline-block laptop:margin-right-sm laptop:margin-bottom-0">
<fa-icon
style={!this.showCheckedStyleIcon('fasl') && DISPLAY_NONE}
{...this.commonFaIconProps}
name="grin-tongue"
stylePrefix="fasl"
size="2x"
class="checked-icon fa-fw"
/>
<fa-icon
style={this.showCheckedStyleIcon('fasl') && DISPLAY_NONE}
{...this.commonFaIconProps}
name="smile"
stylePrefix="fasl"
size="2x"
class="unchecked-icon fa-fw"
/>
</span>
)}
<span>
Sharp&nbsp;Light <span class="sr-only">{this.slot('sharp-light-style-filter-sr-message')}</span>
</span>
</label>
<span class="disabled-tooltip size-sm">{this.slot('sharp-light-requires-pro')}</span>
</div>
<div class="wrap-icons-style-choice size-sm laptop:size-md margin-3xs column">
<input
id="icons-style-brands"
Expand Down
Loading