Skip to content

Fonts injection v16 #2446

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

Closed
Jialecl wants to merge 5 commits into from
Closed

Fonts injection v16 #2446

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
bd60557
Fonts injected
Jialecl Mar 25, 2026
c93ed69
Merging module declaration into a single file
Jialecl Mar 25, 2026
d715799
Fixing errors in tests
Jialecl Mar 25, 2026
7af0f3a
Tests uncommented
Jialecl Mar 25, 2026
3160b18
AWS Credentials in workflows commented
Jialecl Mar 26, 2026
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
24 changes: 12 additions & 12 deletions .github/workflows/publish-next.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,15 +45,15 @@ jobs:
- name: Test library accessibility
run: npm run test:accessibility

- name: Publish NEXT version to npm
run: |
sed -i "s#\"version\": \".*\"#\"version\": \"$(jq -r .version ./packages/lib/package.json)-${GITHUB_SHA:0:7}\"#" ./packages/lib/package.json
cd packages/lib
npm publish --tag next --access public
env:
NODE_AUTH_TOKEN: ${{ secrets.NODE_AUTH_TOKEN }}

- name: Move NEXT website to S3
run: |
aws s3 rm s3://design-system-react-cdk-site/halstack/next/ --recursive
aws s3 cp ./apps/website/out/ s3://design-system-react-cdk-site/halstack/next/ --recursive
# - name: Publish NEXT version to npm
# run: |
# sed -i "s#\"version\": \".*\"#\"version\": \"$(jq -r .version ./packages/lib/package.json)-${GITHUB_SHA:0:7}\"#" ./packages/lib/package.json
# cd packages/lib
# npm publish --tag next --access public
# env:
# NODE_AUTH_TOKEN: ${{ secrets.NODE_AUTH_TOKEN }}

# - name: Move NEXT website to S3
# run: |
# aws s3 rm s3://design-system-react-cdk-site/halstack/next/ --recursive
# aws s3 cp ./apps/website/out/ s3://design-system-react-cdk-site/halstack/next/ --recursive
42 changes: 21 additions & 21 deletions .github/workflows/publish-release.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,15 +18,15 @@ jobs:
node-version: 22.x
registry-url: https://registry.npmjs.org/

- name: Configure AWS Credentials
uses: aws-actions/configure-aws-credentials@v1
with:
aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
aws-region: us-west-2
role-to-assume: ${{ secrets.AWS_ROLE_SANDBOX }}
role-duration-seconds: 3600
role-skip-session-tagging: true
# - name: Configure AWS Credentials
# uses: aws-actions/configure-aws-credentials@v1
# with:
# aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
# aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
# aws-region: us-west-2
# role-to-assume: ${{ secrets.AWS_ROLE_SANDBOX }}
# role-duration-seconds: 3600
# role-skip-session-tagging: true

- name: Install dependencies
run: npm install
Expand All @@ -49,18 +49,18 @@ jobs:
NODE_AUTH_TOKEN: ${{ secrets.NODE_AUTH_TOKEN }}
TAG_NAME: ${{ github.event.release.tag_name }}

- name: Install scripts dependencies
run: cd scripts && npm install
# - name: Install scripts dependencies
# run: cd scripts && npm install

- name: Move RELEASE website to S3
run: node scripts/release-website.js $TAG_NAME
env:
TAG_NAME: ${{ github.event.release.tag_name }}
# - name: Move RELEASE website to S3
# run: node scripts/release-website.js $TAG_NAME
# env:
# TAG_NAME: ${{ github.event.release.tag_name }}

- name: Execute script version
run: node scripts/create-version.js $TAG_NAME
# - name: Execute script version
# run: node scripts/create-version.js $TAG_NAME

- name: Deploy version to S3 Bucket
run: |
aws s3 rm s3://design.system.components.catalog/guidelines/version --recursive
aws s3 cp ./catalog/version/ s3://design.system.components.catalog/guidelines/version --recursive
# - name: Deploy version to S3 Bucket
# run: |
# aws s3 rm s3://design.system.components.catalog/guidelines/version --recursive
# aws s3 cp ./catalog/version/ s3://design.system.components.catalog/guidelines/version --recursive
26 changes: 13 additions & 13 deletions .github/workflows/publish-website.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,15 +21,15 @@ jobs:
node-version: 22.x
registry-url: https://registry.npmjs.org/

- name: Configure AWS Credentials
uses: aws-actions/configure-aws-credentials@v1
with:
aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
aws-region: us-west-2
role-to-assume: ${{ secrets.AWS_ROLE_SANDBOX }}
role-duration-seconds: 3600
role-skip-session-tagging: true
# - name: Configure AWS Credentials
# uses: aws-actions/configure-aws-credentials@v1
# with:
# aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
# aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
# aws-region: us-west-2
# role-to-assume: ${{ secrets.AWS_ROLE_SANDBOX }}
# role-duration-seconds: 3600
# role-skip-session-tagging: true

- name: Install dependencies
run: npm install
Expand All @@ -39,7 +39,7 @@ jobs:
NEXT_PUBLIC_SITE_VERSION: next
run: npm run build

- name: Move website to S3
run: |
aws s3 rm s3://design-system-react-cdk-site/halstack/next/ --recursive
aws s3 cp ./apps/website/out/ s3://design-system-react-cdk-site/halstack/next/ --recursive
# - name: Move website to S3
# run: |
# aws s3 rm s3://design-system-react-cdk-site/halstack/next/ --recursive
# aws s3 cp ./apps/website/out/ s3://design-system-react-cdk-site/halstack/next/ --recursive
30 changes: 15 additions & 15 deletions .github/workflows/push-catalog-s3.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,20 +18,20 @@ jobs:
node-version: 22.x
registry-url: https://registry.npmjs.org/

- name: Configure AWS Credentials
uses: aws-actions/configure-aws-credentials@v1
with:
aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
aws-region: us-east-1
role-to-assume: ${{ secrets.AWS_ROLE_SANDBOX }}
role-duration-seconds: 3600
role-skip-session-tagging: true
# - name: Configure AWS Credentials
# uses: aws-actions/configure-aws-credentials@v1
# with:
# aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
# aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
# aws-region: us-east-1
# role-to-assume: ${{ secrets.AWS_ROLE_SANDBOX }}
# role-duration-seconds: 3600
# role-skip-session-tagging: true

- name: Execute script catalog
run: node scripts/create-catalog.js
# - name: Execute script catalog
# run: node scripts/create-catalog.js

- name: Deploy catalog to S3 Bucket
run: |
aws s3 rm s3://design.system.components.catalog/guidelines/catalog --recursive
aws s3 cp ./catalog/components/ s3://design.system.components.catalog/guidelines/catalog --recursive
# - name: Deploy catalog to S3 Bucket
# run: |
# aws s3 rm s3://design.system.components.catalog/guidelines/catalog --recursive
# aws s3 cp ./catalog/components/ s3://design.system.components.catalog/guidelines/catalog --recursive
9 changes: 9 additions & 0 deletions apps/website/globals.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,10 @@
declare module "*.md";
declare module "*.woff2" {
const content: string;
export default content;
}

declare module "*.woff" {
const content: string;
export default content;
}
1 change: 0 additions & 1 deletion packages/lib/.storybook/preview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import "../src/styles/fonts.css";
import "../src/styles/variables.css";
import disabledRules from "../test/accessibility/rules/common/disabledRules";
import { CacheProvider } from "@emotion/react";
Expand Down
1 change: 1 addition & 0 deletions packages/lib/jest.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ const config: Config = {
"\\.(css|less|scss|sass)$": "identity-obj-proxy",
"\\.(svg)$": "<rootDir>/test/mocks/svgMock.ts",
"\\.(png)$": "<rootDir>/test/mocks/pngMock.ts",
"\\.(woff|woff2|ttf|eot|otf)$": "<rootDir>/test/mocks/fileMock.ts",
},
testMatch: ["**/?(*.)+(spec|test).[jt]s?(x)", "!**/?(*.)+(accessibility.)(spec|test).[jt]s?(x)"],
transform: {
Expand Down
9 changes: 9 additions & 0 deletions packages/lib/src/global.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
declare module "*.woff2" {
const content: string;
export default content;
}

declare module "*.woff" {
const content: string;
export default content;
}
2 changes: 1 addition & 1 deletion packages/lib/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import "./styles/fonts.css";
import "./styles/injectFonts";
import "./styles/variables.css";

export { default as DxcAccordion } from "./accordion/Accordion";
Expand Down
2 changes: 0 additions & 2 deletions packages/lib/src/styles/fonts.css
View file
Open in desktop

This file was deleted.

Binary file added packages/lib/src/styles/fonts/Material-symbols-outlined.woff2
View file
Open in desktop
Binary file not shown.
Binary file added packages/lib/src/styles/fonts/Open-sans-latin-ext.woff2
View file
Open in desktop
Binary file not shown.
Binary file added packages/lib/src/styles/fonts/Open-sans-latin.woff2
View file
Open in desktop
Binary file not shown.
Binary file added packages/lib/src/styles/fonts/Open-sans-math.woff2
View file
Open in desktop
Binary file not shown.
Binary file added packages/lib/src/styles/fonts/Open-sans-symbols.woff2
View file
Open in desktop
Binary file not shown.
82 changes: 82 additions & 0 deletions packages/lib/src/styles/injectFonts.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
import materialSymbols from "./fonts/Material-symbols-outlined.woff2";
import openSansMath from "./fonts/Open-sans-math.woff2";
import openSansLatin from "./fonts/Open-sans-latin.woff2";
import openSansLatinExt from "./fonts/Open-sans-latin-ext.woff2";
import openSansSymbols from "./fonts/Open-sans-symbols.woff2";

const FONT_FACE_ID = "halstack-material-symbols";

if (typeof document !== "undefined" && !document.getElementById(FONT_FACE_ID)) {
const style = document.createElement("style");
style.id = FONT_FACE_ID;
style.textContent = `
@font-face {
font-family: 'Material Symbols Outlined';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("${materialSymbols}") format("woff2");
}

.material-symbols-outlined {
font-family: 'Material Symbols Outlined';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}

/* math */
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 300 800;
font-stretch: 100%;
font-display: swap;
src: url(${openSansMath}) format('woff2');
unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-208E, U+2090-209C, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;
}

/* symbols */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300 800;
font-stretch: 100%;
font-display: swap;
src: url(${openSansSymbols}) format('woff2');
unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF, U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FA89, U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9, U+1FAF0-1FAF8, U+1FB00-1FBFF;
}

/* latin-ext */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300 800;
font-stretch: 100%;
font-display: swap;
src: url(${openSansLatinExt}) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300 800;
font-stretch: 100%;
font-display: swap;
src: url(${openSansLatin}) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
`;
document.head.appendChild(style);
}
1 change: 1 addition & 0 deletions packages/lib/test/mocks/fileMock.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
module.exports = "test-file-stub";
2 changes: 1 addition & 1 deletion packages/lib/tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,6 @@
"outDir": "dist",
"forceConsistentCasingInFileNames": true
},
"include": ["src", "test", ".", ".storybook/**/*"],
"include": ["src", "test", ".", ".storybook/**/*", "src/global.d.ts"],
"exclude": ["node_modules", "dist", "coverage", ".turbo"]
}
3 changes: 3 additions & 0 deletions packages/lib/tsup.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,9 @@ export default defineConfig({
filter: /\.[jt]sx?$/,
}),
],
loader: {
".woff2": "dataurl",
},
external: ["react", "react-data-grid", "react-dom", "@emotion/react", "@emotion/styled"],
format: ["cjs", "esm"],
injectStyle: true,
Expand Down
Loading