diff --git a/.github/ISSUE_TEMPLATE/ny-oppgave.md b/.github/ISSUE_TEMPLATE/ny-oppgave.md index b9400efbdac..c07197fef2c 100644 --- a/.github/ISSUE_TEMPLATE/ny-oppgave.md +++ b/.github/ISSUE_TEMPLATE/ny-oppgave.md @@ -1,8 +1,8 @@ --- -name: Ny oppgave +name: Forslag about: Du har en idé til noe som kan endres på eller legges til i designsystemet title: "" -labels: "✨ enhancement" +labels: "✨ Forslag" assignees: "" --- diff --git a/.github/ISSUE_TEMPLATE/rapporter-en-bug.md b/.github/ISSUE_TEMPLATE/rapporter-en-bug.md index 4597b7a7f91..4846c1c3a28 100644 --- a/.github/ISSUE_TEMPLATE/rapporter-en-bug.md +++ b/.github/ISSUE_TEMPLATE/rapporter-en-bug.md @@ -2,7 +2,7 @@ name: Rapporter en bug about: Du har funnet en bug i designsystemet title: "Feil: " -labels: "\U0001F41D bug" +labels: "\U0001F41D Bug" assignees: "" --- diff --git a/.github/workflows/alpha-release.yml b/.github/workflows/alpha-release.yml new file mode 100644 index 00000000000..80cd7462c02 --- /dev/null +++ b/.github/workflows/alpha-release.yml @@ -0,0 +1,83 @@ +name: Publish alpha release + +on: + push: + branches: + - alpha-* + +jobs: + build-and-publish: + name: Build and publish alpha + runs-on: ubuntu-latest + if: ${{ !contains(github.event.head_commit.message, '[ci skip release]') }} + permissions: + actions: write + contents: write + packages: write + deployments: write + steps: + - name: Checkout branch + uses: actions/checkout@v3 + with: + token: ${{ secrets.BOT_PUBLISH_TOKEN }} + fetch-depth: "0" # fetch entire git history + + - name: Fetch version tags + run: git fetch --depth=1 origin +refs/tags/*:refs/tags/* + + - name: Configure CI Git User + run: | + git config --global user.name '@fremtind-bot' + git config --global user.email 'fremtind-bot@users.noreply.github.com' + git remote set-url origin https://fremtind-bot:$BOT_PUBLISH_TOKEN@github.com/fremtind/jokul + + - name: Setup pnpm + uses: pnpm/action-setup@v4 + with: + run_install: | + - args: [--global, lerna-clean-changelogs-cli@^2.0.18] + + - name: Setup Node + uses: actions/setup-node@v3 + with: + node-version: 18 + cache: "pnpm" + + - name: Install Packages + run: | + pnpm install --frozen-lockfile + + - name: Monorepo Runner Cache + uses: actions/cache@v3 + id: nx-cache + with: + path: .nx + key: nx-${{ hashFiles('pnpm-lock.yaml') }}-${{ github.sha }} + restore-keys: | + nx-${{ hashFiles('pnpm-lock.yaml') }}- + + - name: Try logout + continue-on-error: true + run: npm logout + + - name: Verify release is needed + id: lerna_changed + continue-on-error: true + run: pnpm version:check + + - name: Authenticate with Registry + if: steps.lerna_changed.outcome == 'success' + run: | + echo "registry=http://registry.npmjs.org/" >> .npmrc + echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" >> .npmrc + npm whoami + env: + NPM_TOKEN: ${{ secrets.NPM_TOKEN }} + + - name: Publish packages to NPM + if: steps.lerna_changed.outcome == 'success' # only run if there are changes to publish + run: pnpm release:alpha --yes + env: + GH_TOKEN: ${{ secrets.BOT_PUBLISH_TOKEN }} + GITHUB_TOKEN: ${{ secrets.BOT_PUBLISH_TOKEN }} + NPM_TOKEN: ${{ secrets.NPM_TOKEN }} diff --git a/.github/workflows/codeql-analysis.yml b/.github/workflows/codeql-analysis.yml index b0e1eb7e476..0f52be96ffd 100644 --- a/.github/workflows/codeql-analysis.yml +++ b/.github/workflows/codeql-analysis.yml @@ -13,6 +13,8 @@ on: schedule: - cron: "0 18 * * 3" +run-name: Sjekker kodekvalitet for commit ${{ github.sha }} + jobs: analyze: name: Analyze @@ -30,11 +32,11 @@ jobs: uses: actions/checkout@v3 - name: Initialize CodeQL - if: "!contains(github.event.head_commit.message, '[ci skip release]')" + if: ${{ !contains(github.event.head_commit.message, '[ci skip release]') }} uses: github/codeql-action/init@v2 with: languages: ${{ matrix.language }} - name: Perform CodeQL Analysis - if: "!contains(github.event.head_commit.message, '[ci skip release]')" + if: ${{ !contains(github.event.head_commit.message, '[ci skip release]') }} uses: github/codeql-action/analyze@v2 diff --git a/.github/workflows/pull_request.yml b/.github/workflows/pull_request.yml index e1b272a630b..f9886532735 100644 --- a/.github/workflows/pull_request.yml +++ b/.github/workflows/pull_request.yml @@ -2,8 +2,11 @@ name: Pull Request on: pull_request: - branches: - - main + branches: ["main"] + merge_group: + types: [checks_requested] + +run-name: Bygger og tester ${{ github.event_name == 'merge_group' && github.event.merge_group.head_commit.message || github.event.pull_request.title }} env: PREVIEW_PATH: preview/${{ github.event.pull_request.head.ref }} @@ -24,6 +27,8 @@ env: jobs: build: + name: Sjekk for endringer og bygg pakker + if: ${{ !contains(github.event.sender.login, 'fremtind-bot') }} outputs: visual: ${{ steps.changes.outputs.visual }} preview: ${{ steps.changes.outputs.preview }} @@ -35,11 +40,10 @@ jobs: pull-requests: write steps: - name: Checkout - if: "!contains(github.event.sender.login, 'fremtind-bot')" uses: actions/checkout@v3 - name: Check for changes that require extra verification - if: "!contains(github.event.sender.login, 'fremtind-bot')" + if: ${{ github.event_name != 'merge_group' }} uses: ./actions/paths-filter id: changes with: @@ -64,26 +68,18 @@ jobs: - "portal/src/texts/**" - name: Setup pnpm - if: steps.changes.outputs.has_matches == 'true' && !contains(github.event.sender.login, 'fremtind-bot') + if: steps.changes.outputs.has_matches == 'true' || github.event_name == 'merge_group' uses: pnpm/action-setup@v4 - name: Setup Node uses: actions/setup-node@v3 - if: steps.changes.outputs.has_matches == 'true' && !contains(github.event.sender.login, 'fremtind-bot') + if: steps.changes.outputs.has_matches == 'true' || github.event_name == 'merge_group' with: node-version: 18 cache: "pnpm" - # - name: Cypress binary cache - # if: steps.changes.outputs.visual == 'true' && !contains(github.event.sender.login, 'fremtind-bot') - # uses: actions/cache@v3 - # id: cypress-cache - # with: - # path: /home/runner/.cache/Cypress - # key: cypresss-${{ hashFiles('**/pnpm-lock.yaml') }} - - name: Monorepo Runner Cache - if: steps.changes.outputs.has_matches == 'true' && !contains(github.event.sender.login, 'fremtind-bot') + if: steps.changes.outputs.has_matches == 'true' || github.event_name == 'merge_group' uses: actions/cache@v3 id: nx-cache with: @@ -93,20 +89,45 @@ jobs: nx-${{ hashFiles('pnpm-lock.yaml') }}- - name: Install dependencies and build packages - if: steps.changes.outputs.has_matches == 'true' && !contains(github.event.sender.login, 'fremtind-bot') + if: steps.changes.outputs.has_matches == 'true' || github.event_name == 'merge_group' run: pnpm ci:install - # - name: Cypress binary install - # if: steps.changes.outputs.visual == 'true' && !contains(github.event.sender.login, 'fremtind-bot') - # run: pnpm cypress install + preview: + name: Publiser forhåndsvisning + needs: [build] + if: github.event_name != 'merge_group' && (needs.build.outputs.visual == 'true' || needs.build.outputs.preview == 'true') + runs-on: ubuntu-latest + permissions: + actions: write + contents: read + pull-requests: write + steps: + - name: Checkout + uses: actions/checkout@v3 + + - name: Setup pnpm + uses: pnpm/action-setup@v4 + + - name: Setup Node + uses: actions/setup-node@v3 + with: + node-version: 18 + cache: "pnpm" + + - name: Monorepo Runner Cache + uses: actions/cache@v3 + id: nx-cache + with: + path: .nx + key: nx-${{ hashFiles('pnpm-lock.yaml') }}-${{ github.sha }} + restore-keys: | + nx-${{ hashFiles('pnpm-lock.yaml') }}- - # Installeringen printer ikke hvor den ligger første gang, men gjør det på n+1 - # - name: Cypress binary install debug - # if: steps.changes.outputs.visual == 'true' && !contains(github.event.sender.login, 'fremtind-bot') - # run: pnpm cypress install + # Steget må være med, men vil være cachet + - name: Install dependencies and build packages + run: pnpm ci:install - name: Add a comment with a link to the preview - if: (steps.changes.outputs.visual == 'true' || steps.changes.outputs.preview == 'true') && !contains(github.event.sender.login, 'fremtind-bot') uses: marocchino/sticky-pull-request-comment@da224cb0e3c8b27cae68d40c93649421b5b93e45 with: header: preview @@ -116,13 +137,11 @@ jobs: Commit: ${{ github.sha }} - name: Build site - if: (steps.changes.outputs.visual == 'true' || steps.changes.outputs.preview == 'true') && !contains(github.event.sender.login, 'fremtind-bot') env: GATSBY_MIXPANEL_PROJECT_ID: ${{ secrets.MIXPANEL_PROJECT_ID_TEST }} run: pnpm build:docs - name: Deploy preview - if: (steps.changes.outputs.visual == 'true' || steps.changes.outputs.preview == 'true') && !contains(github.event.sender.login, 'fremtind-bot') env: GH_TOKEN: ${{ secrets.BOT_PUBLISH_TOKEN }} run: | @@ -132,7 +151,6 @@ jobs: pnpm gh-pages --add --dist portal/public --dest ${{ env.PREVIEW_PATH }} --message "docs: preview #${{ github.event.number }}" - name: Add a comment with a link to the preview - if: (steps.changes.outputs.visual == 'true' || steps.changes.outputs.preview == 'true') && !contains(github.event.sender.login, 'fremtind-bot') uses: marocchino/sticky-pull-request-comment@da224cb0e3c8b27cae68d40c93649421b5b93e45 with: header: preview @@ -144,8 +162,9 @@ jobs: Forhåndsvisningen blir tilgjengelig innen et par minutter. Den fjernes automatisk når pull requesten lukkes. testlint: + name: Kjør tester og linting needs: [build] - if: needs.build.outputs.testlint == 'true' && !contains(github.event.sender.login, 'fremtind-bot') + if: github.event_name == 'merge_group' || (needs.build.outputs.testlint == 'true' && !contains(github.event.sender.login, 'fremtind-bot')) runs-on: ubuntu-latest permissions: actions: read @@ -172,157 +191,9 @@ jobs: restore-keys: | nx-${{ hashFiles('pnpm-lock.yaml') }}- + # Steget må være med, men vil være cachet - name: Install dependencies and build packages run: pnpm ci:install - name: Lint and test run: pnpm ci:test - - # cypress: - # needs: [build] - # if: needs.build.outputs.visual == 'true' && !contains(github.event.sender.login, 'fremtind-bot') - # runs-on: ubuntu-latest - # strategy: - # fail-fast: false - # matrix: - # # Om du legger til flere grupper, husk å legge til en tilsvarende download-action i snapshot - # forced-colors: [true, false] - # permissions: - # actions: write - # contents: read - # steps: - # - name: Checkout - # uses: actions/checkout@v3 - # with: - # fetch-depth: "0" # Hent hele git-historikken, for lerna changed, som brukes i beregning av hvilke tester som skal kjøre - # - # - name: Fetch version tags - # run: git fetch --depth=1 origin +refs/tags/*:refs/tags/* # Hent tags, for lerna changed, som brukes i beregning av hvilke tester som skal kjøre - # - # - name: Setup pnpm - # uses: pnpm/action-setup@v2 - # with: - # version: 7 - # - # - name: Setup Node - # uses: actions/setup-node@v3 - # with: - # node-version: 18 - # cache: "pnpm" - # - # - name: Cypress binary cache - # uses: actions/cache@v3 - # id: cypress-cache - # with: - # path: /home/runner/.cache/Cypress - # key: cypresss-${{ hashFiles('**/pnpm-lock.yaml') }} - # - # - name: Monorepo Runner Cache - # uses: actions/cache@v3 - # id: nx-cache - # with: - # path: .nx - # key: nx-${{ hashFiles('pnpm-lock.yaml') }}-${{ github.sha }} - # restore-keys: | - # nx-${{ hashFiles('pnpm-lock.yaml') }}- - # - # - name: Build packages - # run: pnpm ci:install - # - # - name: Build site with path prefix - # run: pnpm build:docs - # - # - name: Calculate tests to run based on lerna changed - # run: | - # CHANGED_SPECS=$(node scripts/calculate-cypress-tests.js) - # EOF=$(dd if=/dev/urandom bs=15 count=1 status=none | base64) - # echo "CHANGED_SPECS<<$EOF" >> $GITHUB_ENV - # printf "%s\n" "${CHANGED_SPECS[@]}" >> $GITHUB_ENV - # echo "$EOF" >> $GITHUB_ENV - # - # - name: Run Cypress tests - # uses: cypress-io/github-action@v5 - # with: - # # We install packages above - # install: false - # browser: chrome - # start: pnpm serve - # wait-on: "http://localhost:9000/${{ env.PREVIEW_PATH }}" - # wait-on-timeout: 280 - # spec: | - # ${{ env.CHANGED_SPECS }} - # env: - # FORCED_COLORS: ${{ matrix.forced-colors }} - # - # - name: Upload screenshots - # uses: actions/upload-artifact@v3 - # if: failure() - # with: - # name: cypress-screenshots-${{ matrix.forced-colors }} - # path: | - # cypress/screenshots - # packages/*/integration/**/*.actual.png - # packages/*/integration/**/*.diff.png - # - # - name: Debug - # if: success() - # run: git status --porcelain - # - # - name: Look for new snapshots - # if: success() - # uses: ./actions/changed-files - # id: lfcf - # with: - # # See the micromatch docs for more examples: https://github.com/micromatch/micromatch#matching-features - # patterns: | - # **/__image_snapshots__/* - # - # - name: Upload snapshots - # uses: actions/upload-artifact@v3 - # if: steps.lfcf.outputs.has_changed_files == 'true' - # with: - # name: cypress-snapshots-${{ matrix.forced-colors }} - # # GitHub will find the lowest common folder to reduce the number of folders - # # in the uploaded artifact. If you want to preserve the same folder structure - # # as in your repository when downloading the artifact, include a file from - # # the root of your repository. - # path: | - # cypress.json - # ${{ steps.lfcf.outputs.changed_files }} - # - # snapshots: - # needs: [cypress] - # if: needs.build.outputs.visual == 'true' && !contains(github.event.sender.login, 'fremtind-bot') - # runs-on: ubuntu-latest - # permissions: - # actions: write - # contents: write - # steps: - # - name: Checkout - # uses: actions/checkout@v3 - # with: - # ref: ${{ github.event.pull_request.head.ref }} - # token: ${{ secrets.BOT_PUBLISH_TOKEN }} - # - # - name: Download snapshots - # uses: actions/download-artifact@v3 - # # Sannsynligvis lastet ikke alle jobbene opp nye snapshots - # # Dette gjør at vi får noen errors i oppsummeringen, men selve - # # bygget markeres som grønt. - # continue-on-error: true - # with: - # name: cypress-snapshots-false - # - # - name: Download snapshots - # uses: actions/download-artifact@v3 - # continue-on-error: true - # with: - # name: cypress-snapshots-true - # - # - name: Commit snapshots - # run: | - # git config user.email "fremtind.designsystem@fremtind.no" - # git config user.name "fremtind-bot" - # git add **/*.png || echo "No updated snapshots, nothing to add!" - # git commit -m "chore: update cypress snapshots [ci skip cypress]" --no-verify || echo "No updated snapshots, nothing to commit!" - # git push diff --git a/.github/workflows/pull_request_close.yml b/.github/workflows/pull_request_close.yml index 78b510e6ab3..9d50a2e7387 100644 --- a/.github/workflows/pull_request_close.yml +++ b/.github/workflows/pull_request_close.yml @@ -4,6 +4,8 @@ on: pull_request: types: [closed] +run-name: Fjerner preview-branch for "${{ github.event.pull_request.title }}" + jobs: remove-preview: runs-on: ubuntu-20.04 diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 732aca41e15..11333d19d6a 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -5,11 +5,13 @@ on: branches: - main +run-name: Publiserer endrede pakker. Siste commit er ${{ github.event.head_commit.message }} + jobs: build-and-publish: name: Build and publish runs-on: ubuntu-latest - if: "!contains(github.event.head_commit.message, '[ci skip release]')" + if: ${{ !contains(github.event.head_commit.message, '[ci skip release]') }} permissions: actions: write contents: write diff --git a/.gitignore b/.gitignore index 1ada4224878..6db37919bf7 100644 --- a/.gitignore +++ b/.gitignore @@ -19,3 +19,4 @@ cypress/videos .stylelintcache .turbo .nx +**/public/fonts diff --git a/doc-utils/CodeBlock/CodeBlock.scss b/doc-utils/CodeBlock/CodeBlock.scss index 26d224969bf..4a1488bedc9 100644 --- a/doc-utils/CodeBlock/CodeBlock.scss +++ b/doc-utils/CodeBlock/CodeBlock.scss @@ -40,10 +40,10 @@ padding: jkl.$spacing-xs; background-color: var(--language-tag-bg-color); color: var(--language-tag-text-color); - @include jkl.use-font-family("Fremtind Grotesk"); - @include jkl.text-style("small"); text-transform: uppercase; content: attr(data-language); + @include jkl.use-font-family("Fremtind Grotesk"); + @include jkl.text-style("small"); } &__code { diff --git a/doc-utils/component-example.scss b/doc-utils/component-example.scss index fe061390133..4a5bbaed76f 100644 --- a/doc-utils/component-example.scss +++ b/doc-utils/component-example.scss @@ -37,7 +37,7 @@ width: 100%; display: flex; flex-wrap: wrap; - align-items: center; + align-items: flex-start; color: var(--jkl-color); background-color: var(--jkl-background-color); position: relative; @@ -46,12 +46,13 @@ // Unngå at endring av tittel knekker visuell regresjonstest ved å skjule den :not([data-test-mode="e2e"]) &::before { - @include jkl.text-style("small"); color: var(--component-example-header-color); position: absolute; top: jkl.$spacing-s; left: jkl.$spacing-m; content: attr(data-example-text); + + @include jkl.text-style("small"); } &[data-test-mode="e2e-screenshot"] { @@ -75,19 +76,20 @@ } &__example-options-header { + margin-bottom: jkl.$spacing-s; + @include jkl.text-style("small"); + &:not(:first-child) { margin-top: jkl.$spacing-l; } - @include jkl.text-style("small"); - margin-bottom: jkl.$spacing-s; } &__choice-option { margin-top: jkl.$spacing-l; & .jkl-label.jkl-label--small { - @include jkl.text-style("small"); color: jkl.$color-fjellgra; + @include jkl.text-style("small"); } } diff --git a/gulpfile.js b/gulpfile.js index bc8de58ace7..8ea08608a9d 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -7,10 +7,10 @@ const litePreset = require("cssnano-preset-lite"); const postcss = require("gulp-postcss"); const rename = require("gulp-rename"); const gulpSass = require("gulp-sass"); -const sassEmbedded = require("sass-embedded"); +const _sass = require("sass"); /* eslint-enable @typescript-eslint/no-var-requires */ -const sass = gulpSass(sassEmbedded); +const sass = gulpSass(_sass); const scssFiles = ["**/*.scss", "!example/*.scss", "!documentation/*.scss"]; function throwSassError(e) { diff --git a/lerna.json b/lerna.json index c6a268b4db9..45a1bfc0415 100644 --- a/lerna.json +++ b/lerna.json @@ -8,7 +8,7 @@ "registry": "https://registry.npmjs.org/", "access": "public", "npmClient": "pnpm", - "allowBranch": ["main", "release"], + "allowBranch": ["main", "release", "alpha-*"], "ignoreChanges": [ ".eslintrc", ".prettierrc", diff --git a/package.json b/package.json index 4e9f9a84d1e..2d0da15a5a9 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "private": true, "version": "2.0.0-alpha.0", "scripts": { - "clean": "lerna run clean && rimraf .nx && rimraf node_modules/", + "clean": "git clean -xfd", "build": "lerna run build", "build:docs": "lerna run build:docs", "commit": "git-cz", @@ -27,6 +27,7 @@ "cypress:open": "ELECTRON_EXTRA_LAUNCH_ARGS=\"--force-prefers-reduced-motion\" cypress open --project .", "cypress:dev": "cypress open --project . --config baseUrl=http://localhost:8000", "release": "pnpm build && lerna publish --conventional-graduate", + "release:alpha": "pnpm build && lerna publish --conventional-prerelease --no-git-tag-version --no-changelog --no-private --dist-tag alpha", "release-gh": "lerna publish from-package", "dev": "pnpm --filter \"@fremtind/portal\" dev", "start": "pnpm dev", @@ -71,15 +72,17 @@ "@testing-library/react": "^14.0.0", "@testing-library/user-event": "^14.4.3", "@types/express": "^4.17.17", + "@types/glob": "^8.1.0", "@types/jest-axe": "^3.5.5", "@types/node": "^18.16.16", - "@types/react": "^18.2.8", - "@types/react-dom": "^18.2.4", + "@types/react": "^18.3.3", + "@types/react-dom": "^18.3.0", "@types/react-is": "^18.2.0", "@types/react-syntax-highlighter": "^15.5.7", "@types/testing-library__jest-dom": "^5.14.6", "@typescript-eslint/eslint-plugin": "^5.59.9", "@typescript-eslint/parser": "^5.59.9", + "@vitejs/plugin-react-swc": "^3.5.0", "autoprefixer": "^10.4.14", "browserslist": "^4.21.7", "commitizen": "^4.3.0", @@ -121,11 +124,12 @@ "react-syntax-highlighter": "^15.5.0", "replace-in-file": "^7.0.1", "resize-observer-polyfill": "^1.5.1", - "rimraf": "^4.4.1", - "sass-embedded": "^1.64.2", + "sass": "^1.77.6", "stylelint": "^15.7.0", "tiny-glob": "^0.2.9", - "typescript": "^5.0.4" + "typescript": "^5.0.4", + "vite": "^5.2.0", + "vite-plugin-dts": "^3.9.0" }, "browserslist": [ "extends @fremtind/browserslist-config-jkl" diff --git a/packages/accordion-react/CHANGELOG.md b/packages/accordion-react/CHANGELOG.md index 3c8254a5120..1c52136e0ca 100644 --- a/packages/accordion-react/CHANGELOG.md +++ b/packages/accordion-react/CHANGELOG.md @@ -3,40 +3,68 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 12.1.7 (2024-09-04) + +### Bug Fixes + +- build with vite ([4509712](https://github.com/fremtind/jokul/commit/4509712ae89be1949f1890c45d470707da66157d)) + +## 12.1.5 (2024-09-03) + +### Bug Fixes + +- temporarily revert back from vite ([71c4f00](https://github.com/fremtind/jokul/commit/71c4f005fd1f9bee6ad35479d913005123bb53c5)) + +# [12.0.0](https://github.com/fremtind/jokul/compare/@fremtind/jkl-accordion-react@11.1.8...@fremtind/jkl-accordion-react@12.0.0) (2024-08-27) + +### Features + +- replace gulp/esbuild with sass-dart/vite ([ee18263](https://github.com/fremtind/jokul/commit/ee182639eaa5e717c8a3f938fefa9325cc35aa16)) + +### BREAKING CHANGES + +- There is a risk that replacing the entire build-chain has + introduced regressions but internal testing has found + no issues. + +The accordion packages are now defined as ES modules but this +should not affect consumers unless packages are being linked +locally + # 11.1.0 (2024-02-13) ### Features -- legg til id-prop på accordion ([b640d76](https://github.com/fremtind/jokul/commit/b640d76537f0b4f99895f729bbea8d82d2b5034b)) +- legg til id-prop på accordion ([b640d76](https://github.com/fremtind/jokul/commit/b640d76537f0b4f99895f729bbea8d82d2b5034b)) ## 11.0.1 (2024-01-26) ### Bug Fixes -- first accordion has no top border when closed ([e3526e9](https://github.com/fremtind/jokul/commit/e3526e979f883b2a68593cbd9cf0a17848a7c7f0)), closes [#3794](https://github.com/fremtind/jokul/issues/3794) +- first accordion has no top border when closed ([e3526e9](https://github.com/fremtind/jokul/commit/e3526e979f883b2a68593cbd9cf0a17848a7c7f0)), closes [#3794](https://github.com/fremtind/jokul/issues/3794) # 11.0.0 (2023-12-08) ### Features -- make ExpandButton work before React has mounted clientside ([9ce4216](https://github.com/fremtind/jokul/commit/9ce42163c04cc9977cad3787b7e47710e454febb)) +- make ExpandButton work before React has mounted clientside ([9ce4216](https://github.com/fremtind/jokul/commit/9ce42163c04cc9977cad3787b7e47710e454febb)) ### BREAKING CHANGES -- Typing for the event in the onClick callback changed from React.MouseEvent to -React.MouseEvent +- Typing for the event in the onClick callback changed from React.MouseEvent to + React.MouseEvent # [10.1.0](https://github.com/fremtind/jokul/compare/@fremtind/jkl-accordion-react@10.0.16...@fremtind/jkl-accordion-react@10.1.0) (2023-12-04) ### Features -- accordion uses details/summary elements ([b898531](https://github.com/fremtind/jokul/commit/b8985319b59a8b3f1f36972a1aa4cfebf0a0bd61)), closes [#3767](https://github.com/fremtind/jokul/issues/3767) +- accordion uses details/summary elements ([b898531](https://github.com/fremtind/jokul/commit/b8985319b59a8b3f1f36972a1aa4cfebf0a0bd61)), closes [#3767](https://github.com/fremtind/jokul/issues/3767) ## 10.0.5 (2023-09-14) ### Bug Fixes -- deleted snapshots folder ([b742384](https://github.com/fremtind/jokul/commit/b74238480f6131af19b9f70b796377a4978a6ce3)) +- deleted snapshots folder ([b742384](https://github.com/fremtind/jokul/commit/b74238480f6131af19b9f70b796377a4978a6ce3)) ## 10.0.4 (2023-09-14) diff --git a/packages/accordion-react/documentation/AccordionExample.tsx b/packages/accordion-react/documentation/AccordionExample.tsx index 23f4770e83c..1126e5e386c 100644 --- a/packages/accordion-react/documentation/AccordionExample.tsx +++ b/packages/accordion-react/documentation/AccordionExample.tsx @@ -5,10 +5,15 @@ import { Accordion, AccordionItem } from "../src"; export const accordionExampleKnobs: ExampleKnobsProps = {}; +export const scope = { + id: "description-id", +}; + export const AccordionExample: React.FC = () => { const id = useId(); return ( <> + {/* -- EXAMPLE CODE START -- */}

= () => { banken din. + {/* -- EXAMPLE CODE END -- */} ); }; diff --git a/packages/accordion-react/documentation/Example.tsx b/packages/accordion-react/documentation/Example.tsx index 44c2ef6c2b8..3da1a8f5777 100644 --- a/packages/accordion-react/documentation/Example.tsx +++ b/packages/accordion-react/documentation/Example.tsx @@ -1,8 +1,41 @@ +import babelParser from "prettier/parser-babel"; +import * as prettier from "prettier/standalone"; import React from "react"; -import { DevExample } from "../../../doc-utils"; -import { AccordionExample, accordionExampleCode, accordionExampleKnobs } from "./AccordionExample"; -import "../../accordion/accordion.scss"; +import { InteractiveCode } from "../../../utils/interactive-code"; +import { scope } from "./AccordionExample"; +// @ts-ignore +import AccordionExample from "./AccordionExample?raw"; + +import "@fremtind/jkl-accordion/accordion.scss"; + +const CODE_START_BLOCK = "{/* -- EXAMPLE CODE START -- */}"; +const CODE_END_BLOCK = "{/* -- EXAMPLE CODE END -- */}"; + +const exampleCode = ` +<> +${(AccordionExample as string).substring( + (AccordionExample as string).indexOf(CODE_START_BLOCK) + CODE_START_BLOCK.length, + (AccordionExample as string).indexOf(CODE_END_BLOCK), +)} +`; + +const formattedCode = prettier.format(exampleCode, { + parser: "babel", + plugins: [babelParser], + trailingComma: "none", +}); export default function Example() { - return ; + return ( +
+ +
+ ); } diff --git a/packages/accordion-react/index.html b/packages/accordion-react/index.html new file mode 100644 index 00000000000..dbfa98bdf26 --- /dev/null +++ b/packages/accordion-react/index.html @@ -0,0 +1,12 @@ + + + + + + Demooo + + +
+ + + diff --git a/packages/accordion-react/main.tsx b/packages/accordion-react/main.tsx new file mode 100644 index 00000000000..31e073ebb69 --- /dev/null +++ b/packages/accordion-react/main.tsx @@ -0,0 +1,12 @@ +import { initTabListener } from "@fremtind/jkl-core"; +import React from "react"; +import ReactDOM from "react-dom/client"; +import "@fremtind/jkl-button/button.scss"; +import "@fremtind/jkl-core/core.scss"; +import "@fremtind/jkl-icons/icons.scss"; +import "@fremtind/jkl-expand-button/expand-button.scss"; +import Example from "./documentation/Example"; + +initTabListener(); + +ReactDOM.createRoot(document.getElementById("root")!).render(); diff --git a/packages/accordion-react/package.json b/packages/accordion-react/package.json index 280f5c1f686..470c9b20b48 100644 --- a/packages/accordion-react/package.json +++ b/packages/accordion-react/package.json @@ -1,6 +1,6 @@ { "name": "@fremtind/jkl-accordion-react", - "version": "11.1.7", + "version": "12.1.11", "publishConfig": { "access": "public" }, @@ -12,39 +12,42 @@ "fremtind" ], "license": "MIT", - "types": "./build/index.d.ts", - "main": "./build/cjs/index.js", - "module": "./build/esm/index.js", - "browser": "./build/esm/index.js", "sideEffects": [ "*.css", "*.scss" ], - "directories": { - "lib": "build" - }, "files": [ "build" ], + "main": "./build/cjs/index.js", + "module": "./build/es/index.js", + "browser": "./build/es/index.js", + "types": "./build/index.d.ts", "scripts": { - "clean": "rimraf node_modules/ build/ node_modules/ ", - "build:types": "tsc -p tsconfig-for-declarations.json", - "build:scripts": "node ./esbuild.prod.mjs", - "build": "run-s build:*", + "clean": "git clean -xfd", + "build": "vite build --config vite.build.config.mjs", "test": "jest --testMatch '**/accordion-react/**/*.test.+(ts|tsx|js)' --config=../../jest.config.js", - "dev:js": "ESBUILD_WATCH=true node ./esbuild.dev.mjs", - "dev:server": "nodemon ./dist/server.js", - "dev": "run-p dev:*" + "dev": "vite --config vite.dev.config.ts --port 3000" }, "dependencies": { - "@fremtind/jkl-accordion": "^11.2.3", - "@fremtind/jkl-core": "^14.0.0", - "@fremtind/jkl-icons-react": "^8.7.4", - "@fremtind/jkl-react-hooks": "^12.1.1", + "@fremtind/jkl-accordion": "^12.0.8", + "@fremtind/jkl-core": "^14.4.0", + "@fremtind/jkl-icons-react": "^9.1.6", + "@fremtind/jkl-react-hooks": "^12.1.8", "classnames": "^2.3.2" }, "devDependencies": { - "@fremtind/jkl-list-react": "^10.1.5" + "@fremtind/jkl-button": "^12.1.8", + "@fremtind/jkl-expand-button": "^7.1.0", + "@fremtind/jkl-icons": "^9.1.4", + "@fremtind/jkl-list-react": "^10.2.8", + "@rollup/plugin-terser": "^0.4.4", + "@vitejs/plugin-react-swc": "^3.7.0", + "glob": "^8.1.0", + "rollup-plugin-node-externals": "^7.1.3", + "rollup-plugin-visualizer": "^5.12.0", + "vite": "^5.2.0", + "vite-plugin-dts": "^4.1.0" }, "peerDependencies": { "@types/react": "^16.8.6 || ^17.0.0 || ^18.0.0", diff --git a/packages/accordion-react/vite.build.config.mjs b/packages/accordion-react/vite.build.config.mjs new file mode 100644 index 00000000000..e0dfbf61958 --- /dev/null +++ b/packages/accordion-react/vite.build.config.mjs @@ -0,0 +1,52 @@ +import { fileURLToPath } from "node:url"; +import { extname, relative, resolve } from "path"; +import terser from "@rollup/plugin-terser"; +import react from "@vitejs/plugin-react-swc"; +import glob from "glob"; +import nodeExternals from "rollup-plugin-node-externals"; +import { visualizer } from "rollup-plugin-visualizer"; +import { defineConfig } from "vite"; +import dts from "vite-plugin-dts"; + +export default defineConfig({ + plugins: [ + nodeExternals({ deps: true, devDeps: true, peerDeps: true, optDeps: true }), + react(), + dts({ include: ["src"], exclude: ["src/**/*.test.tsx"] }), + visualizer({ + emitFile: true, + filename: "build-stats.html", + }), + ], + build: { + outDir: "build", + emptyOutDir: false, + sourcemap: true, + lib: { + formats: ["es", "cjs"], + entry: resolve(__dirname, "src", "**", "*"), + }, + rollupOptions: { + input: Object.fromEntries( + // https://rollupjs.org/configuration-options/#input + glob + .sync("src/**/*[!test].{ts,tsx}") + .map((file) => [ + relative("src", file.slice(0, file.length - extname(file).length)), + fileURLToPath(new URL(file, import.meta.url)), + ]), + ), + output: { + entryFileNames: () => { + return "[format]/[name].js"; + }, + plugins: [terser()], + globals: { + react: "react", + "react-dom": "ReactDOM", + "react/jsx-runtime": "react/jsx-runtime", + }, + }, + }, + }, +}); diff --git a/packages/accordion-react/vite.build.config.ts b/packages/accordion-react/vite.build.config.ts new file mode 100644 index 00000000000..dc8ea9cd32c --- /dev/null +++ b/packages/accordion-react/vite.build.config.ts @@ -0,0 +1,52 @@ +import { fileURLToPath } from "node:url"; +import { extname, relative, resolve } from "path"; +import terser from "@rollup/plugin-terser"; +import react from "@vitejs/plugin-react-swc"; +import glob from "glob"; +import nodeExternals from "rollup-plugin-node-externals"; +import { visualizer } from "rollup-plugin-visualizer"; +import { defineConfig } from "vite"; +import dts from "vite-plugin-dts"; + +export default defineConfig({ + plugins: [ + nodeExternals({ deps: true, devDeps: true, peerDeps: true, optDeps: true }), + react(), + dts({ include: ["src"], exclude: ["src/**/*.test.tsx"] }), + visualizer({ + emitFile: true, + filename: "build-stats.html", + }), + ], + build: { + outDir: "build", + emptyOutDir: false, + sourcemap: true, + lib: { + formats: ["es", "cjs"], + entry: resolve(__dirname, "src", "**", "*"), + }, + rollupOptions: { + input: Object.fromEntries( + // https://rollupjs.org/configuration-options/#input + glob + .sync("src/**/*[!test].{ts,tsx}") + .map((file) => [ + relative("src", file.slice(0, file.length - extname(file).length)), + fileURLToPath(new URL(file, import.meta.url)), + ]), + ), + output: { + entryFileNames: (chunkInfo) => { + return "[format]/[name].js"; + }, + plugins: [terser()], + globals: { + react: "react", + "react-dom": "ReactDOM", + "react/jsx-runtime": "react/jsx-runtime", + }, + }, + }, + }, +}); diff --git a/packages/accordion-react/vite.dev.config.ts b/packages/accordion-react/vite.dev.config.ts new file mode 100644 index 00000000000..4e8a1bc5b4d --- /dev/null +++ b/packages/accordion-react/vite.dev.config.ts @@ -0,0 +1,8 @@ +import { resolve } from "path"; +import react from "@vitejs/plugin-react-swc"; +import { defineConfig } from "vite"; +import copyJklFonts from "../../utils/vite/copy-jkl-fonts"; + +export default defineConfig({ + plugins: [react(), copyJklFonts(resolve(__dirname, "public", "fonts"))], +}); diff --git a/packages/accordion/CHANGELOG.md b/packages/accordion/CHANGELOG.md index 34d45303dbb..c85e7666bc5 100644 --- a/packages/accordion/CHANGELOG.md +++ b/packages/accordion/CHANGELOG.md @@ -3,65 +3,99 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 12.0.5 (2024-09-04) + +### Bug Fixes + +- build with vite ([4509712](https://github.com/fremtind/jokul/commit/4509712ae89be1949f1890c45d470707da66157d)) + +## 12.0.3 (2024-09-03) + +### Bug Fixes + +- temporarily revert back from vite ([71c4f00](https://github.com/fremtind/jokul/commit/71c4f005fd1f9bee6ad35479d913005123bb53c5)) + +## 12.0.2 (2024-09-02) + +### Bug Fixes + +- bruk outline for tastaturfokus i accordion ([f5b34f8](https://github.com/fremtind/jokul/commit/f5b34f8af05d6a8d39e015d9883a5703dd1c8ef3)) + +# [12.0.0](https://github.com/fremtind/jokul/compare/@fremtind/jkl-accordion@11.2.4...@fremtind/jkl-accordion@12.0.0) (2024-08-27) + +### Features + +- replace gulp/esbuild with sass-dart/vite ([ee18263](https://github.com/fremtind/jokul/commit/ee182639eaa5e717c8a3f938fefa9325cc35aa16)) + +### BREAKING CHANGES + +- There is a risk that replacing the entire build-chain has + introduced regressions but internal testing has found + no issues. + +The accordion packages are now defined as ES modules but this +should not affect consumers unless packages are being linked +locally + ## 11.2.1 (2024-01-26) ### Bug Fixes -- first accordion has no top border when closed ([e3526e9](https://github.com/fremtind/jokul/commit/e3526e979f883b2a68593cbd9cf0a17848a7c7f0)), closes [#3794](https://github.com/fremtind/jokul/issues/3794) +- first accordion has no top border when closed ([e3526e9](https://github.com/fremtind/jokul/commit/e3526e979f883b2a68593cbd9cf0a17848a7c7f0)), closes [#3794](https://github.com/fremtind/jokul/issues/3794) # 11.2.0 (2023-12-04) ### Features -- accordion uses details/summary elements ([b898531](https://github.com/fremtind/jokul/commit/b8985319b59a8b3f1f36972a1aa4cfebf0a0bd61)), closes [#3767](https://github.com/fremtind/jokul/issues/3767) +- accordion uses details/summary elements ([b898531](https://github.com/fremtind/jokul/commit/b8985319b59a8b3f1f36972a1aa4cfebf0a0bd61)), closes [#3767](https://github.com/fremtind/jokul/issues/3767) # 11.1.0 (2023-09-14) ### Features -- added hover color to text and changed padding on mobile ([1b482fd](https://github.com/fremtind/jokul/commit/1b482fdf791390d81fe4b574170952b4fc7f5974)) -- changed backgroundcolor when expanded to skifer ([39baa03](https://github.com/fremtind/jokul/commit/39baa03a1baa407e6cdd6d44181e69caf390ec65)) +- added hover color to text and changed padding on mobile ([1b482fd](https://github.com/fremtind/jokul/commit/1b482fdf791390d81fe4b574170952b4fc7f5974)) +- changed backgroundcolor when expanded to skifer ([39baa03](https://github.com/fremtind/jokul/commit/39baa03a1baa407e6cdd6d44181e69caf390ec65)) # 11.0.0 (2023-07-07) ### chore -- oppdater versjon på grunn av breaking change i core ([57ece48](https://github.com/fremtind/jokul/commit/57ece48fa0192fe825b544fdac24cdd56e58d0df)) +- oppdater versjon på grunn av breaking change i core ([57ece48](https://github.com/fremtind/jokul/commit/57ece48fa0192fe825b544fdac24cdd56e58d0df)) ### Code Refactoring -- migrer vekk fra deprecated tilde-importer i Sass ([7ef2cf7](https://github.com/fremtind/jokul/commit/7ef2cf7a510122c69b2c5658c402f3dd9f5322f7)), closes [#3418](https://github.com/fremtind/jokul/issues/3418) +- migrer vekk fra deprecated tilde-importer i Sass ([7ef2cf7](https://github.com/fremtind/jokul/commit/7ef2cf7a510122c69b2c5658c402f3dd9f5322f7)), closes [#3418](https://github.com/fremtind/jokul/issues/3418) ### BREAKING CHANGES -- Avhenger av ny majorversjon av core -- Tilde-prefikset er fjernet i all Sass-kode. Avhengig av oppsettet ditt kan det hende du -ikke trenger gjøre noe. Om bygget ditt brekker, konfigurer Sass sin loadPaths så den -inkluderer node_modules. +- Avhenger av ny majorversjon av core +- Tilde-prefikset er fjernet i all Sass-kode. Avhengig av oppsettet ditt kan det hende du + ikke trenger gjøre noe. Om bygget ditt brekker, konfigurer Sass sin loadPaths så den + inkluderer node_modules. ## [10.0.6](https://github.com/fremtind/jokul/compare/@fremtind/jkl-accordion@10.0.5...@fremtind/jkl-accordion@10.0.6) (2023-06-07) ### Bug Fixes -- bruk fargen til temaet, ikke parent ([9fe89bf](https://github.com/fremtind/jokul/commit/9fe89bf1532dd2aa4ba643effa84237aa6553649)) +- bruk fargen til temaet, ikke parent ([9fe89bf](https://github.com/fremtind/jokul/commit/9fe89bf1532dd2aa4ba643effa84237aa6553649)) ## 10.0.3 (2023-03-21) ### Bug Fixes -- sett charset i CSS-filene som genereres ([7346cb8](https://github.com/fremtind/jokul/commit/7346cb8644dd4b99bf0ae4d11c78a967b7b01618)), closes [#3467](https://github.com/fremtind/jokul/issues/3467) +- sett charset i CSS-filene som genereres ([7346cb8](https://github.com/fremtind/jokul/commit/7346cb8644dd4b99bf0ae4d11c78a967b7b01618)), closes [#3467](https://github.com/fremtind/jokul/issues/3467) # 10.0.0 (2023-01-30) ### Features -- bump majorversjon av core ([0b25b9c](https://github.com/fremtind/jokul/commit/0b25b9ccb4d35214037e45158264fab2da196a5f)) -- ta i bruk nye ikoner i AccordionItem ([f9c6a32](https://github.com/fremtind/jokul/commit/f9c6a32f9a924721e71f2e111f6260b052ee5bd0)) +- bump majorversjon av core ([0b25b9c](https://github.com/fremtind/jokul/commit/0b25b9ccb4d35214037e45158264fab2da196a5f)) +- ta i bruk nye ikoner i AccordionItem ([f9c6a32](https://github.com/fremtind/jokul/commit/f9c6a32f9a924721e71f2e111f6260b052ee5bd0)) ### BREAKING CHANGES -- Avhenger av en versjon av jkl-core med breaking changes -- Du må nå importere stilarket fra jkl-icons fr at komponentnen skal se riktig ut +- Avhenger av en versjon av jkl-core med breaking changes +- Du må nå importere stilarket fra jkl-icons fr at komponentnen skal se riktig ut ## 9.0.5 (2022-11-22) diff --git a/packages/accordion/accordion.scss b/packages/accordion/accordion.scss index 2e27491cb0c..760c43ea8de 100644 --- a/packages/accordion/accordion.scss +++ b/packages/accordion/accordion.scss @@ -1,90 +1,62 @@ @charset "UTF-8"; @use "@fremtind/jkl-core/jkl"; -@include jkl.light-mode-variables { - --jkl-accordion-border: #{jkl.$color-svaberg}; - --jkl-accordion-focus: #{jkl.$color-focus-color}; - --jkl-accordion-hover: #{jkl.$color-stein}; - --jkl-accordion-expanded-background: #{jkl.$color-hvit}; -} - -@include jkl.dark-mode-variables { - --jkl-accordion-border: #{jkl.$color-stein}; - --jkl-accordion-focus: #{jkl.$color-focus-color--darkbg}; - --jkl-accordion-hover: #{jkl.$color-svaberg}; - --jkl-accordion-expanded-background: #{jkl.$color-skifer}; -} - -@include jkl.comfortable-density-variables { - --jkl-accordion-title-padding: var(--jkl-spacing-16) #{jkl.rem(48px)} var(--jkl-spacing-16) var(--jkl-spacing-16); - --jkl-accordion-arrow-top: #{jkl.rem(20px)}; - --jkl-accordion-arrow-right: var(--jkl-spacing-12); - --jkl-accordion-content-padding: var(--jkl-spacing-8) var(--jkl-spacing-16) var(--jkl-spacing-16); - @include jkl.declare-font-variables("jkl-accordion-title", "body"); - @include jkl.declare-font-variables("jkl-accordion-content", "body"); - - @include jkl.small-device { - --jkl-accordion-title-padding: var(--jkl-spacing-12) #{jkl.rem(44px)} var(--jkl-spacing-12) var(--jkl-spacing-12); - --jkl-accordion-content-padding: var(--jkl-spacing-8) var(--jkl-spacing-12) var(--jkl-spacing-16) - var(--jkl-spacing-12); - --jkl-accordion-arrow-top: #{jkl.rem(23px)}; - } -} - -@include jkl.compact-density-variables { - --jkl-accordion-title-padding: var(--jkl-spacing-8) #{jkl.rem(32px)} var(--jkl-spacing-8) var(--jkl-spacing-8); - --jkl-accordion-arrow-top: var(--jkl-spacing-8); - --jkl-accordion-arrow-right: var(--jkl-spacing-4); - --jkl-accordion-content-padding: var(--jkl-spacing-8); - @include jkl.declare-font-variables("jkl-accordion-title", "small"); - @include jkl.declare-font-variables("jkl-accordion-content", "small"); -} - -@mixin hover { - border-top: jkl.rem(1px) solid; - border-top-color: var(--jkl-accordion-border); - - &:hover { - border-top-color: var(--jkl-accordion-focus); +.jkl-accordion { + width: 100%; - + .jkl-accordion-item { - border-top-color: var(--jkl-accordion-focus); + @include jkl.comfortable-density { + --title-padding: var(--jkl-spacing-16) #{jkl.rem(48px)} var(--jkl-spacing-16) var(--jkl-spacing-16); + --arrow-top: #{jkl.rem(20px)}; + --arrow-right: var(--jkl-spacing-12); + --content-padding: var(--jkl-spacing-8) var(--jkl-spacing-16) var(--jkl-spacing-16); + @include jkl.declare-font-variables("title", "body"); + @include jkl.declare-font-variables("content", "body"); + + @include jkl.small-device { + --title-padding: var(--jkl-spacing-12) #{jkl.rem(44px)} var(--jkl-spacing-12) var(--jkl-spacing-12); + --content-padding: var(--jkl-spacing-8) var(--jkl-spacing-12) var(--jkl-spacing-16) var(--jkl-spacing-12); + --arrow-top: #{jkl.rem(23px)}; } } -} -.jkl-accordion { - width: 100%; + @include jkl.compact-density { + --title-padding: var(--jkl-spacing-8) #{jkl.rem(32px)} var(--jkl-spacing-8) var(--jkl-spacing-8); + --arrow-top: var(--jkl-spacing-8); + --arrow-right: var(--jkl-spacing-4); + --content-padding: var(--jkl-spacing-8); + @include jkl.declare-font-variables("title", "small"); + @include jkl.declare-font-variables("content", "small"); + } } .jkl-accordion-item { - @include jkl.reset-outline; - @include jkl.motion("exit", "snappy"); - transition-property: border-top-color, border-bottom-color; + --background: transparent; + --text-color: var(--jkl-color-text-default); + --title-text-color: var(--jkl-color-text-interactive); + --border-color: var(--jkl-color-border-separator); - &:nth-child(n) { - @include hover; - } + background-color: var(--background); + color: var(--text-color); + border-bottom: jkl.rem(1px) solid var(--border-color); - &:last-child { - border-bottom: jkl.rem(1px) solid; - border-bottom-color: var(--jkl-accordion-border); + @include jkl.motion("standard", "snappy", border-color); - &:hover { - border-bottom-color: var(--jkl-accordion-focus); + &:hover { + --border-color: var(--jkl-color-border-separator-hover); + + &:not(:first-child) { + border-top: jkl.rem(1px) solid var(--border-color); } } - &:first-child { - border-top: none; + &:has(+ [open]), + &:has(+ :hover) { + border-bottom: none; } &[open] { - background-color: var(--jkl-accordion-expanded-background); - - &:first-child { - @include hover; - } + --background: var(--jkl-color-background-container-high); + border-top: jkl.rem(1px) solid var(--border-color); .jkl-accordion-item__title { @include jkl.no-grow-bold; @@ -92,49 +64,45 @@ } &__title { - @include jkl.use-font-variables("jkl-accordion-title"); - @include jkl.reset-outline; + @include jkl.use-font-variables("title"); - &::-webkit-details-marker { - display: none; - } + cursor: pointer; + color: var(--title-text-color); list-style: none; - - color: var(--jkl-color); background-color: transparent; position: relative; - padding: var(--jkl-accordion-title-padding); + padding: var(--title-padding); text-align: left; width: 100%; box-sizing: border-box; + @include jkl.reset-outline; + + &::-webkit-details-marker { + display: none; + } + &:hover { - cursor: pointer; - color: var(--jkl-accordion-hover); + --title-text-color: var(--jkl-color-text-interactive-hover); .jkl-accordion-item__arrow { - top: calc(var(--jkl-accordion-arrow-top) + #{jkl.rem(4px)}); - - .jkl-accordion-item--expanded & { - top: calc(var(--jkl-accordion-arrow-top) - #{jkl.rem(4px)}); - } + translate: 0 jkl.rem(4px); } } - html:not([data-mousenavigation]) &:focus { - box-shadow: inset 0 0 0 2px var(--jkl-accordion-focus); + &:focus-visible { + @include jkl.focus-outline($offset: 0); } } &__arrow { pointer-events: none; position: absolute; - right: var(--jkl-accordion-arrow-right); - top: var(--jkl-accordion-arrow-top); - color: var(--jkl-color); + right: var(--arrow-right); + top: var(--arrow-top); - @include jkl.motion("exit", "snappy"); - transition-property: top; + @include jkl.motion("standard", "snappy"); + transition-property: translate; @include jkl.forced-colors-svg-fallback($stroke: ButtonText, $fill: ButtonText); } @@ -145,10 +113,9 @@ } &__content { - @include jkl.use-font-variables("jkl-accordion-title"); - color: var(--jkl-color); + @include jkl.use-font-variables("content"); height: auto; - padding: var(--jkl-accordion-content-padding); + padding: var(--content-padding); } @include jkl.forced-colors-mode { diff --git a/packages/accordion/build.js b/packages/accordion/build.js new file mode 100644 index 00000000000..7c96eb592c8 --- /dev/null +++ b/packages/accordion/build.js @@ -0,0 +1,30 @@ +const fs = require("fs"); +const path = require("path"); +const autoprefixer = require("autoprefixer"); +const cssnano = require("cssnano"); +const litePreset = require("cssnano-preset-lite"); +const { glob, globSync, globStream, globStreamSync, Glob } = require("glob"); +const postcss = require("postcss"); +const sass = require("sass"); + +const errorHandler = (err) => { + if (err) { + console.error(err); + process.exit(0); + } +}; + +(async function build() { + glob("**/[!_]*.scss", { ignore: "node_modules/**" }, (err, files) => { + for (let file of files) { + const sourcePath = path.parse(file); + const result = sass.compile(file, { loadPaths: ["node_modules"] }); + fs.writeFile(`${sourcePath.name}.css`, result.css, errorHandler); + postcss([autoprefixer({ grid: true }), cssnano(litePreset)]) + .process(result.css, { from: undefined }) + .then((res) => { + fs.writeFile(`${sourcePath.name}.min.css`, res.css, errorHandler); + }); + } + }); +})(); diff --git a/packages/accordion/package.json b/packages/accordion/package.json index a620b6c7313..e2cb159b5fb 100644 --- a/packages/accordion/package.json +++ b/packages/accordion/package.json @@ -1,6 +1,6 @@ { "name": "@fremtind/jkl-accordion", - "version": "11.2.3", + "version": "12.0.8", "publishConfig": { "access": "public" }, @@ -12,20 +12,19 @@ "fremtind" ], "files": [ - "!example", "*.css", "*.scss" ], "license": "MIT", "scripts": { - "clean": "rimraf .turbo **/*.css", - "build": "gulp build", - "build:watch": "gulp build:watch", + "clean": "git clean -xfd", + "build": "node build.js", + "build:watch": "nodemon build.js", "test": "echo \"Error: run tests from root\" && exit 1", "dev": "echo \"Error: run dev from accordion-react\" && exit 1" }, "dependencies": { - "@fremtind/jkl-core": "^14.0.0" + "@fremtind/jkl-core": "^14.4.0" }, "repository": { "type": "git", diff --git a/packages/alert-message-react/CHANGELOG.md b/packages/alert-message-react/CHANGELOG.md deleted file mode 100644 index 6117f0a829b..00000000000 --- a/packages/alert-message-react/CHANGELOG.md +++ /dev/null @@ -1,248 +0,0 @@ -# Change Log - -All notable changes to this project will be documented in this file. -See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. - -# [11.1.0](https://github.com/fremtind/jokul/compare/@fremtind/jkl-alert-message-react@11.0.5...@fremtind/jkl-alert-message-react@11.1.0) (2023-09-21) - -### Features - -- deleted snapshots ([545e346](https://github.com/fremtind/jokul/commit/545e3460f3834ff07c2161ee0b6a6dc11286c6dd)) -- oppdaterte globale variabler for light/dark mode med funksjonsfarger ([4666eca](https://github.com/fremtind/jokul/commit/4666ecae207c17adc3b174528b9b9f3e917df42e)) - -## 11.0.4 (2023-09-14) - -### Bug Fixes - -- try removing accordion snapshots to see diff ([9a6cd15](https://github.com/fremtind/jokul/commit/9a6cd15065eb2809b3210bb61fda54deabb012cb)) - -# 11.0.0 (2023-07-07) - -### chore - -- oppdater versjon på grunn av breaking change i core ([57ece48](https://github.com/fremtind/jokul/commit/57ece48fa0192fe825b544fdac24cdd56e58d0df)) - -### BREAKING CHANGES - -- Avhenger av ny majorversjon av core - -# [10.0.0](https://github.com/fremtind/jokul/compare/@fremtind/jkl-alert-message-react@9.0.17...@fremtind/jkl-alert-message-react@10.0.0) (2023-01-30) - -### Bug Fixes - -- la ikonet endre størrelse i compact-variant ([6c0c5aa](https://github.com/fremtind/jokul/commit/6c0c5aaaba5b868d21c97d4b3e0a0212a2ef6f44)) - -### Features - -- bump majorversjon av core ([0b25b9c](https://github.com/fremtind/jokul/commit/0b25b9ccb4d35214037e45158264fab2da196a5f)) -- ta i bruk de nye ikonene i AlertMessage ([de50d55](https://github.com/fremtind/jokul/commit/de50d5503356467e2d99de894a6a77f215bbf827)) - -### BREAKING CHANGES - -- Avhenger av en versjon av jkl-core med breaking changes -- Du må nå importere jkl-icons for å vise komponenten riktig - -## 9.0.14 (2022-11-23) - -### Bug Fixes - -- rett opp i feil rundt devDependencies ([936f310](https://github.com/fremtind/jokul/commit/936f310a585f3c7f7f11af816d5c54cd5a43dd43)) - -## 9.0.13 (2022-11-22) - -### Bug Fixes - -- fjern workspace-prefix som ikke blir fjernet ([283540b](https://github.com/fremtind/jokul/commit/283540b45f1fe557168eede3ca3637077a10a15b)) - -## 9.0.9 (2022-11-11) - -### Reverts - -- Revert "chore: rigg om doc-utils som en intern pakke" ([281b0e1](https://github.com/fremtind/jokul/commit/281b0e1d7f0c6b077da45c7dd9f98a6fb218675a)) - -## 9.0.8 (2022-11-09) - -### Reverts - -- Revert "chore: rigg om doc-utils som en intern pakke" ([281b0e1](https://github.com/fremtind/jokul/commit/281b0e1d7f0c6b077da45c7dd9f98a6fb218675a)) - -# 9.0.0 (2022-09-08) - -### Features - -- innfør konseptet density med navn i stedet for boolean prop compact ([fd96f78](https://github.com/fremtind/jokul/commit/fd96f78685ef9e3979dd43625491e868efbc3068)) -- kompakt alert message ([33e249d](https://github.com/fremtind/jokul/commit/33e249d3c99cfa97333d25d50bedff9e36ef29e9)) - -### BREAKING CHANGES - -- data-compactlayout er nå data-layout-density="compact" - -## [8.0.4](https://github.com/fremtind/jokul/compare/@fremtind/jkl-alert-message-react@8.0.3...@fremtind/jkl-alert-message-react@8.0.4) (2022-06-13) - -### Bug Fixes - -- merk CSS og SCSS som side-effects ([dac2e2b](https://github.com/fremtind/jokul/commit/dac2e2b5f4d1b31485821bf6ad8ec4c7c2769cca)) - -### Performance Improvements - -- bruk tiny-glob for globbing av filer under bygg ([246952a](https://github.com/fremtind/jokul/commit/246952ae75afe20bcf0d007a0a068b76b114f9a6)) - -## 8.0.1 (2022-06-07) - -### Bug Fixes - -- rett opp avhengighet av icon-button ([d179921](https://github.com/fremtind/jokul/commit/d1799213a7859e3e72d4aecc69a74f7c6b399d54)) - -# [8.0.0](https://github.com/fremtind/jokul/compare/@fremtind/jkl-alert-message-react@7.0.17...@fremtind/jkl-alert-message-react@8.0.0) (2022-06-07) - -### chore - -- fiks lintfeil ([4093d2a](https://github.com/fremtind/jokul/commit/4093d2a2ae7bbe0d30de882b9f5d144e8e77cede)) - -### BREAKING CHANGES - -- Pakken avhenger av en breaking versjon av core - -## 7.0.4 (2022-02-22) - -### Bug Fixes - -- plasser lukk-knapp på linje med tittel og ikon ([224b0dc](https://github.com/fremtind/jokul/commit/224b0dc9828a8fa4c7b6ed6ce9b2db0bd371c2c2)), closes [#2623](https://github.com/fremtind/jokul/issues/2623) - -# 7.0.0 (2022-02-07) - -### Bug Fixes - -- fjern inverted-prop ([de5f8b8](https://github.com/fremtind/jokul/commit/de5f8b83ae8f025826f4c56d3aeb5e081dea66cc)), closes [#2646](https://github.com/fremtind/jokul/issues/2646) - -### BREAKING CHANGES - -- Fjernet `inverted`-prop. Bruk `data-theme="dark"` om du trenger overstyre temaet. - -## 6.0.5 (2021-11-18) - -### Bug Fixes - -- gi AlertMessage riktig displayName, typing ([e32bdaa](https://github.com/fremtind/jokul/commit/e32bdaa81a097b4e5b130b1447346b40774ff2f7)) - -## 6.0.0 (2021-10-28) - -### Bug Fixes - -- remove inverted option from alertMessage and always light mode inside component ([9b2466c](https://github.com/fremtind/jokul/commit/9b2466cf55cd093be9fed1ea5bb2ed86b92568b1)) - -### BREAKING CHANGES - -- Removed inverted option - -## 5.0.0 (2021-10-21) - -### chore - -- updates dependencies ([b975200](https://github.com/fremtind/jokul/commit/b97520045c02e4bcb44ebde159c60a7dff7f01d6)) - -### BREAKING CHANGES - -- depends on jkl-core v8 with breaking changes - -## 4.2.3 (2021-10-20) - -### Bug Fixes - -- always light mode inside MessageBox and AlertMessage ([547311f](https://github.com/fremtind/jokul/commit/547311f7e36aa0aef937dc62007225d9ad23b73c)) - -## 4.2.0 (2021-10-13) - -### Features - -- implement new alert message design ([657861c](https://github.com/fremtind/jokul/commit/657861ccdd0789b7935357cb8dd5a9fdbe2ecc3d)) - -## 4.1.0 (2021-09-13) - -### Features - -- prop for å styre role på MessageBox ([87646ae](https://github.com/fremtind/jokul/commit/87646ae6437cb368aa6567e637d59ab2ab923b71)), closes [#1687](https://github.com/fremtind/jokul/issues/1687) - -## 4.0.0 (2021-07-09) - -### chore - -- bump major version ([255a776](https://github.com/fremtind/jokul/commit/255a776d45a068645124499b870ecefec9d87f0e)) - -### BREAKING CHANGES - -- Depends on jkl-core-version with breaking changes - -## 3.0.0 (2021-07-06) - -### chore - -- bump major version ([559a384](https://github.com/fremtind/jokul/commit/559a384a5315931ad2ea7acc8328b383acbdbd8b)) - -### BREAKING CHANGES - -- Now depends on jkl-core 6.0.0, which introduces breaking changes - -## 2.0.0 (2021-06-07) - -### Features - -- upgrade dependency jkl-core to v5.0.0 ([c3dc8dc](https://github.com/fremtind/jokul/commit/c3dc8dcbd3cba99502f1124cbe1dcaa688177f55)) - -### BREAKING CHANGES - -- Upgrades dependency jkl-core to v5.0.0, introducing breaking changes to color variables - -## 1.6.1 (2021-03-25) - -### Bug Fixes - --
cannot appear as a descendant of

([eda1926](https://github.com/fremtind/jokul/commit/eda192667077e06f1273fe0c32ea7414aa04acc4)) - -## 1.6.0 (2021-03-05) - -### Features - -- add close button to alert messages ([71e6438](https://github.com/fremtind/jokul/commit/71e6438b3a4532eac238fc6f207bbf75f26cd467)) - -## 1.5.5 (2021-02-12) - -### Bug Fixes - -- add react 17 types as valid peerdep ([a074c34](https://github.com/fremtind/jokul/commit/a074c34dcece089ad6b4c581b8c920c8bdd4f1e0)) - -## 1.5.0 (2020-12-15) - -### Features - -- display types in portal ([5c62a16](https://github.com/fremtind/jokul/commit/5c62a161c278d3a5a136741aea8dcf9b62338bda)) - -## 1.4.0 (2020-11-25) - -### Features - -- update to react 17 ([4639058](https://github.com/fremtind/jokul/commit/4639058067eaa9be222825f8ac4f495a1e74cc0f)) - -## 1.3.0 (2020-09-01) - -### Features - -- implement global dark mode ([47b8e2d](https://github.com/fremtind/jokul/commit/47b8e2dc0abcd366212fc67f306f8523a63d11c8)) - -## 1.2.0 (2020-07-29) - -### Features - -- **build:** use @babel/runtime instead of inlining helpers in each file ([bbadce5](https://github.com/fremtind/jokul/commit/bbadce52ba4da5d540b479b07273332587bed436)), closes [#1136](https://github.com/fremtind/jokul/issues/1136) - -## 1.1.0 (2020-05-15) - -### Bug Fixes - -- change maxWidth to maxContentWidth to make it more descriptive ([88c6c9f](https://github.com/fremtind/jokul/commit/88c6c9f2a8ce04b97ae5d636d41b5be0e7157854)) -- minor cleanup ([1fd5c8e](https://github.com/fremtind/jokul/commit/1fd5c8ec9b8f7d29513506ce8c507994da8daaae)) - -### Features - -- **alert-message:** rename and split messages package ([11373ac](https://github.com/fremtind/jokul/commit/11373ac88cbfc5ed2604846c742e8a05f8c0561d)) -- **portal:** lagt til do's and dont's ([122474c](https://github.com/fremtind/jokul/commit/122474c618ffaafde8e1117df2e985df09166cda)) diff --git a/packages/alert-message-react/README.md b/packages/alert-message-react/README.md deleted file mode 100644 index 7fdfa0358bc..00000000000 --- a/packages/alert-message-react/README.md +++ /dev/null @@ -1,26 +0,0 @@ -# [`@fremtind/jkl-alert-message-react`](https://jokul.fremtind.no/komponenter/alertmessage) - -Se portalen for [bruk og prinsipper](https://jokul.fremtind.no/komponenter/alertmessage). - -## Installasjon - -**Tips:** [stilpakken](../alert-message/) blir automatisk installert som en avhengighet. - -1. `npm i @fremtind/jkl-alert-message-react`. -2. Importér _både_ React-komponent og stilark i prosjektet ditt. - -```js -import { InfoAlertMessage } from "@fremtind/jkl-alert-message-react"; - -// Importer stilark via JavaScript med CSS-loader. -import "@fremtind/jkl-alert-message/alert-message.min.css"; -// AlertMessage bruker ikonpakken og må ha stilene dens -import "@fremtind/jkl-icons/icons.min.css"; -``` - -```scss -// Eller importer stilark via SCSS. -@use "@fremtind/jkl-alert-message/alert-message"; -// AlertMessage bruker ikonpakken og må ha stilene dens -@use "@fremtind/jkl-icons/icons"; -``` diff --git a/packages/alert-message-react/documentation/Example.tsx b/packages/alert-message-react/documentation/Example.tsx deleted file mode 100644 index 25cfcb3c539..00000000000 --- a/packages/alert-message-react/documentation/Example.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import React from "react"; -import { DevExample } from "../../../doc-utils"; -import { AlertMessageExample, alertMessageExampleCode, alertMessageKnobs } from "./AlertMessageExample"; -import "../../alert-message/alert-message.scss"; - -export default function Example() { - return ( - - ); -} diff --git a/packages/alert-message-react/integration/__image_snapshots__/AlertMessage renders correctly #0.png b/packages/alert-message-react/integration/__image_snapshots__/AlertMessage renders correctly #0.png deleted file mode 100644 index 266c057e110..00000000000 Binary files a/packages/alert-message-react/integration/__image_snapshots__/AlertMessage renders correctly #0.png and /dev/null differ diff --git a/packages/alert-message-react/integration/__image_snapshots__/AlertMessage renders correctly #1.png b/packages/alert-message-react/integration/__image_snapshots__/AlertMessage renders correctly #1.png deleted file mode 100644 index c6b091d7c41..00000000000 Binary files a/packages/alert-message-react/integration/__image_snapshots__/AlertMessage renders correctly #1.png and /dev/null differ diff --git a/packages/alert-message-react/integration/__image_snapshots__/AlertMessage renders correctly #2.png b/packages/alert-message-react/integration/__image_snapshots__/AlertMessage renders correctly #2.png deleted file mode 100644 index 36ccf6b9ef1..00000000000 Binary files a/packages/alert-message-react/integration/__image_snapshots__/AlertMessage renders correctly #2.png and /dev/null differ diff --git a/packages/alert-message-react/integration/__image_snapshots__/AlertMessage renders correctly #3.png b/packages/alert-message-react/integration/__image_snapshots__/AlertMessage renders correctly #3.png deleted file mode 100644 index e847ec897d3..00000000000 Binary files a/packages/alert-message-react/integration/__image_snapshots__/AlertMessage renders correctly #3.png and /dev/null differ diff --git a/packages/alert-message-react/integration/__image_snapshots__/AlertMessage renders correctly #4.png b/packages/alert-message-react/integration/__image_snapshots__/AlertMessage renders correctly #4.png deleted file mode 100644 index c5df2a841c5..00000000000 Binary files a/packages/alert-message-react/integration/__image_snapshots__/AlertMessage renders correctly #4.png and /dev/null differ diff --git a/packages/alert-message-react/integration/__image_snapshots__/AlertMessage renders correctly #5.png b/packages/alert-message-react/integration/__image_snapshots__/AlertMessage renders correctly #5.png deleted file mode 100644 index cf5b60805de..00000000000 Binary files a/packages/alert-message-react/integration/__image_snapshots__/AlertMessage renders correctly #5.png and /dev/null differ diff --git a/packages/alert-message-react/integration/__image_snapshots__/AlertMessage renders correctly #6.png b/packages/alert-message-react/integration/__image_snapshots__/AlertMessage renders correctly #6.png deleted file mode 100644 index 9e5f4a45162..00000000000 Binary files a/packages/alert-message-react/integration/__image_snapshots__/AlertMessage renders correctly #6.png and /dev/null differ diff --git a/packages/alert-message-react/integration/__image_snapshots__/AlertMessage renders correctly #7.png b/packages/alert-message-react/integration/__image_snapshots__/AlertMessage renders correctly #7.png deleted file mode 100644 index 4a0a3c80b2f..00000000000 Binary files a/packages/alert-message-react/integration/__image_snapshots__/AlertMessage renders correctly #7.png and /dev/null differ diff --git a/packages/alert-message-react/integration/__image_snapshots__/AlertMessage renders correctly #8.png b/packages/alert-message-react/integration/__image_snapshots__/AlertMessage renders correctly #8.png deleted file mode 100644 index 494adb8ebb4..00000000000 Binary files a/packages/alert-message-react/integration/__image_snapshots__/AlertMessage renders correctly #8.png and /dev/null differ diff --git a/packages/alert-message-react/integration/__image_snapshots__/AlertMessage renders correctly #9.png b/packages/alert-message-react/integration/__image_snapshots__/AlertMessage renders correctly #9.png deleted file mode 100644 index c9a8cfffff9..00000000000 Binary files a/packages/alert-message-react/integration/__image_snapshots__/AlertMessage renders correctly #9.png and /dev/null differ diff --git a/packages/alert-message-react/integration/__image_snapshots__/AlertMessage renders correctly in high contrast #0.png b/packages/alert-message-react/integration/__image_snapshots__/AlertMessage renders correctly in high contrast #0.png deleted file mode 100644 index 27c5a8ab701..00000000000 Binary files a/packages/alert-message-react/integration/__image_snapshots__/AlertMessage renders correctly in high contrast #0.png and /dev/null differ diff --git a/packages/alert-message-react/integration/__image_snapshots__/AlertMessage renders correctly in high contrast #1.png b/packages/alert-message-react/integration/__image_snapshots__/AlertMessage renders correctly in high contrast #1.png deleted file mode 100644 index 2d8470f7b77..00000000000 Binary files a/packages/alert-message-react/integration/__image_snapshots__/AlertMessage renders correctly in high contrast #1.png and /dev/null differ diff --git a/packages/alert-message-react/integration/__image_snapshots__/AlertMessage renders correctly in high contrast #2.png b/packages/alert-message-react/integration/__image_snapshots__/AlertMessage renders correctly in high contrast #2.png deleted file mode 100644 index c269e9009a7..00000000000 Binary files a/packages/alert-message-react/integration/__image_snapshots__/AlertMessage renders correctly in high contrast #2.png and /dev/null differ diff --git a/packages/alert-message-react/integration/__image_snapshots__/AlertMessage renders correctly in high contrast #3.png b/packages/alert-message-react/integration/__image_snapshots__/AlertMessage renders correctly in high contrast #3.png deleted file mode 100644 index 547865d8370..00000000000 Binary files a/packages/alert-message-react/integration/__image_snapshots__/AlertMessage renders correctly in high contrast #3.png and /dev/null differ diff --git a/packages/alert-message-react/integration/__image_snapshots__/AlertMessage renders correctly in high contrast #4.png b/packages/alert-message-react/integration/__image_snapshots__/AlertMessage renders correctly in high contrast #4.png deleted file mode 100644 index f3c10f02d87..00000000000 Binary files a/packages/alert-message-react/integration/__image_snapshots__/AlertMessage renders correctly in high contrast #4.png and /dev/null differ diff --git a/packages/alert-message-react/src/index.ts b/packages/alert-message-react/src/index.ts deleted file mode 100644 index c75b091ceea..00000000000 --- a/packages/alert-message-react/src/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { InfoAlertMessage, WarningAlertMessage, ErrorAlertMessage, SuccessAlertMessage } from "./AlertMessage"; diff --git a/packages/alert-message/CHANGELOG.md b/packages/alert-message/CHANGELOG.md deleted file mode 100644 index 2798ac79b1e..00000000000 --- a/packages/alert-message/CHANGELOG.md +++ /dev/null @@ -1,172 +0,0 @@ -# Change Log - -All notable changes to this project will be documented in this file. -See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. - -# 9.0.0 (2023-07-07) - -### chore - -- oppdater versjon på grunn av breaking change i core ([57ece48](https://github.com/fremtind/jokul/commit/57ece48fa0192fe825b544fdac24cdd56e58d0df)) - -### Code Refactoring - -- migrer vekk fra deprecated tilde-importer i Sass ([7ef2cf7](https://github.com/fremtind/jokul/commit/7ef2cf7a510122c69b2c5658c402f3dd9f5322f7)), closes [#3418](https://github.com/fremtind/jokul/issues/3418) - -### BREAKING CHANGES - -- Avhenger av ny majorversjon av core -- Tilde-prefikset er fjernet i all Sass-kode. Avhengig av oppsettet ditt kan det hende du -ikke trenger gjøre noe. Om bygget ditt brekker, konfigurer Sass sin loadPaths så den -inkluderer node_modules. - -## 8.0.3 (2023-03-21) - -### Bug Fixes - -- sett charset i CSS-filene som genereres ([7346cb8](https://github.com/fremtind/jokul/commit/7346cb8644dd4b99bf0ae4d11c78a967b7b01618)), closes [#3467](https://github.com/fremtind/jokul/issues/3467) - -# 8.0.0 (2023-01-30) - -### Features - -- bump majorversjon av core ([0b25b9c](https://github.com/fremtind/jokul/commit/0b25b9ccb4d35214037e45158264fab2da196a5f)) -- ta i bruk de nye ikonene i AlertMessage ([de50d55](https://github.com/fremtind/jokul/commit/de50d5503356467e2d99de894a6a77f215bbf827)) - -### BREAKING CHANGES - -- Avhenger av en versjon av jkl-core med breaking changes -- Du må nå importere jkl-icons for å vise komponenten riktig - -## 7.0.9 (2022-11-22) - -### Bug Fixes - -- fjern workspace-prefix som ikke blir fjernet ([283540b](https://github.com/fremtind/jokul/commit/283540b45f1fe557168eede3ca3637077a10a15b)) - -## 7.0.6 (2022-11-22) - -### Bug Fixes - -- gjør at ikonet får riktig størrelse hvis man globalt setter box-sixing:border-box ([343a413](https://github.com/fremtind/jokul/commit/343a4135a10c3e66625df80c3e8ffcc68a2fd375)) - -# 7.0.0 (2022-09-08) - -### Bug Fixes - -- ikonstørrelse i små containers ([e129ee6](https://github.com/fremtind/jokul/commit/e129ee62e14232169ae54326f296933919fe6f92)) -- ikonstørrelse kompakt alertmessage ([88fee9b](https://github.com/fremtind/jokul/commit/88fee9b07bbe8adf925efb7e7268b6b305f26b0e)) - -### Features - -- innfør konseptet density med navn i stedet for boolean prop compact ([fd96f78](https://github.com/fremtind/jokul/commit/fd96f78685ef9e3979dd43625491e868efbc3068)) -- kompakt alert message ([33e249d](https://github.com/fremtind/jokul/commit/33e249d3c99cfa97333d25d50bedff9e36ef29e9)) - -### BREAKING CHANGES - -- data-compactlayout er nå data-layout-density="compact" - -# [6.0.0](https://github.com/fremtind/jokul/compare/@fremtind/jkl-alert-message@5.0.23...@fremtind/jkl-alert-message@6.0.0) (2022-06-07) - -### Code Refactoring - -- oppdater til nyeste core ([1db381f](https://github.com/fremtind/jokul/commit/1db381fdc0d3f1c35818d2feec49977331cd2fad)) -- skriv og følg stilguiden for Sass i Jøkul ([1cc52a4](https://github.com/fremtind/jokul/commit/1cc52a4dea6af592ed48c45b38bc4fee07a749ae)) - -### Features - -- legg til en index-fil for Sass ([c4f8d0c](https://github.com/fremtind/jokul/commit/c4f8d0cd31bcab0706a49be1bdf0214fbbbbf646)) - -### BREAKING CHANGES - -- Sass-variabler, mixins og CSS-animasjoner fra pakker annet enn core er gjort private -- Avhenger av ny majorversjon av core - -## [5.0.20](https://github.com/fremtind/jokul/compare/@fremtind/jkl-alert-message@5.0.19...@fremtind/jkl-alert-message@5.0.20) (2022-04-19) - -### Bug Fixes - -- bruk fallbackfarger for AlertMessage SVGer ([5ce4131](https://github.com/fremtind/jokul/commit/5ce41314d369a57c5a0f878812918e3b97fd51fc)) -- gjør alert-message tilgjengelig i forced-colors ([85d84e1](https://github.com/fremtind/jokul/commit/85d84e171ec72e9fdb80e361dedb5f04467c7124)) -- skriv om svgmixin etter å ha sett Icons ([093e5ec](https://github.com/fremtind/jokul/commit/093e5ec2e71e5819e68ee2383463096185f9c1f3)) -- tag i forced-colors ([d67839d](https://github.com/fremtind/jokul/commit/d67839d13b5966c17241126c5f943bc0c7eeed15)) - -## 5.0.10 (2022-02-07) - -### Bug Fixes - -- manuell delinting sans descending specificity ([20de1c8](https://github.com/fremtind/jokul/commit/20de1c8811596b054867352177225fd197c70797)) - -## 5.0.0 (2021-10-21) - -### Features - -- use new spacing scale ([5694495](https://github.com/fremtind/jokul/commit/5694495f56d3c1f0e675433b35cfb0e693b93a82)), closes [#2382](https://github.com/fremtind/jokul/issues/2382) - -### BREAKING CHANGES - -- new spacing scale: see migration guide for jkl-core - -## 4.1.0 (2021-10-13) - -### Features - -- implement new alert message design ([657861c](https://github.com/fremtind/jokul/commit/657861ccdd0789b7935357cb8dd5a9fdbe2ecc3d)) - -## 4.0.0 (2021-07-09) - -### chore - -- bump major version ([255a776](https://github.com/fremtind/jokul/commit/255a776d45a068645124499b870ecefec9d87f0e)) - -### BREAKING CHANGES - -- Depends on jkl-core-version with breaking changes - -## 3.0.0 (2021-07-06) - -### chore - -- bump major version ([559a384](https://github.com/fremtind/jokul/commit/559a384a5315931ad2ea7acc8328b383acbdbd8b)) - -### Features - -- **alert-message:** add automatic dark mode ([4a184b7](https://github.com/fremtind/jokul/commit/4a184b795a1ebb3493cf6688ea317b4aa54afd85)) - -### BREAKING CHANGES - -- Now depends on jkl-core 6.0.0, which introduces breaking changes - -## 2.0.0 (2021-06-07) - -### Features - -- new colors ([9144947](https://github.com/fremtind/jokul/commit/9144947766c73fbe5eaac3372495006e3b89dec7)) - -### BREAKING CHANGES - -- all color variables are changed - -## 1.3.0 (2021-03-05) - -### Features - -- add close button to alert messages ([71e6438](https://github.com/fremtind/jokul/commit/71e6438b3a4532eac238fc6f207bbf75f26cd467)) - -## 1.2.4 (2020-09-21) - -### Bug Fixes - -- fix a bug where alert-message would go outside screen bounds ([db41eba](https://github.com/fremtind/jokul/commit/db41ebae9406ada218feed0b57f8ce2d35cee990)) - -## 1.2.0 (2020-09-01) - -### Features - -- implement global dark mode ([47b8e2d](https://github.com/fremtind/jokul/commit/47b8e2dc0abcd366212fc67f306f8523a63d11c8)) - -## 1.1.0 (2020-05-15) - -### Features - -- **alert-message:** rename and split messages package ([11373ac](https://github.com/fremtind/jokul/commit/11373ac88cbfc5ed2604846c742e8a05f8c0561d)) diff --git a/packages/alert-message/README.md b/packages/alert-message/README.md deleted file mode 100644 index 5027a2901d4..00000000000 --- a/packages/alert-message/README.md +++ /dev/null @@ -1,20 +0,0 @@ -# [`@fremtind/jkl-alert-message`](https://jokul.fremtind.no/komponenter/alertmessage) - -Se portalen for [bruk og prinsipper](https://jokul.fremtind.no/komponenter/alertmessage). - -## Installasjon - -**Tips:** om du bruker [React-pakken](../alert-message-react/) trenger du ikke installere denne pakken direkte. - -1. `npm i @fremtind/jkl-alert-message`. -2. Importér stil-pakken i prosjektet ditt. - -```js -// Importer stilark via JavaScript med CSS-loader. -import "@fremtind/jkl-alert-message/alert-message.min.css"; -``` - -```scss -// Eller importer stilark via SCSS. -@use "@fremtind/jkl-alert-message/alert-message"; -``` diff --git a/packages/alert-message/_index.scss b/packages/alert-message/_index.scss deleted file mode 100644 index 7489b224e5b..00000000000 --- a/packages/alert-message/_index.scss +++ /dev/null @@ -1 +0,0 @@ -@forward "alert-message"; diff --git a/packages/breadcrumb-react/package.json b/packages/breadcrumb-react/package.json index 124a9ca4acb..88cd4bb6df2 100644 --- a/packages/breadcrumb-react/package.json +++ b/packages/breadcrumb-react/package.json @@ -1,6 +1,6 @@ { "name": "@fremtind/jkl-breadcrumb-react", - "version": "5.0.12", + "version": "5.0.19", "publishConfig": { "access": "public" }, @@ -26,7 +26,7 @@ "*.scss" ], "scripts": { - "clean": "rimraf node_modules/ build/ node_modules/", + "clean": "git clean -xfd", "build:types": "tsc -p tsconfig-for-declarations.json", "build:scripts": "node ./esbuild.prod.mjs", "build": "run-s build:*", @@ -36,8 +36,8 @@ "dev": "run-p dev:*" }, "dependencies": { - "@fremtind/jkl-breadcrumb": "^5.0.11", - "@fremtind/jkl-core": "^14.0.0", + "@fremtind/jkl-breadcrumb": "^5.1.0", + "@fremtind/jkl-core": "^14.4.0", "classnames": "^2.3.2" }, "peerDependencies": { diff --git a/packages/breadcrumb/CHANGELOG.md b/packages/breadcrumb/CHANGELOG.md index 3e8f2078793..9014eb4c4c1 100644 --- a/packages/breadcrumb/CHANGELOG.md +++ b/packages/breadcrumb/CHANGELOG.md @@ -3,38 +3,44 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# 5.1.0 (2024-09-09) + +### Features + +- bruk semantiske variabler i breadcrumb ([d6a9ebb](https://github.com/fremtind/jokul/commit/d6a9ebb34a59fcbca9e55d84f3a0b71dae71eec8)) + # 5.0.0 (2023-07-07) ### chore -- oppdater versjon på grunn av breaking change i core ([57ece48](https://github.com/fremtind/jokul/commit/57ece48fa0192fe825b544fdac24cdd56e58d0df)) +- oppdater versjon på grunn av breaking change i core ([57ece48](https://github.com/fremtind/jokul/commit/57ece48fa0192fe825b544fdac24cdd56e58d0df)) ### Code Refactoring -- migrer vekk fra deprecated tilde-importer i Sass ([7ef2cf7](https://github.com/fremtind/jokul/commit/7ef2cf7a510122c69b2c5658c402f3dd9f5322f7)), closes [#3418](https://github.com/fremtind/jokul/issues/3418) +- migrer vekk fra deprecated tilde-importer i Sass ([7ef2cf7](https://github.com/fremtind/jokul/commit/7ef2cf7a510122c69b2c5658c402f3dd9f5322f7)), closes [#3418](https://github.com/fremtind/jokul/issues/3418) ### BREAKING CHANGES -- Avhenger av ny majorversjon av core -- Tilde-prefikset er fjernet i all Sass-kode. Avhengig av oppsettet ditt kan det hende du -ikke trenger gjøre noe. Om bygget ditt brekker, konfigurer Sass sin loadPaths så den -inkluderer node_modules. +- Avhenger av ny majorversjon av core +- Tilde-prefikset er fjernet i all Sass-kode. Avhengig av oppsettet ditt kan det hende du + ikke trenger gjøre noe. Om bygget ditt brekker, konfigurer Sass sin loadPaths så den + inkluderer node_modules. ## 4.0.3 (2023-03-21) ### Bug Fixes -- sett charset i CSS-filene som genereres ([7346cb8](https://github.com/fremtind/jokul/commit/7346cb8644dd4b99bf0ae4d11c78a967b7b01618)), closes [#3467](https://github.com/fremtind/jokul/issues/3467) +- sett charset i CSS-filene som genereres ([7346cb8](https://github.com/fremtind/jokul/commit/7346cb8644dd4b99bf0ae4d11c78a967b7b01618)), closes [#3467](https://github.com/fremtind/jokul/issues/3467) # 4.0.0 (2023-01-30) ### Features -- bump majorversjon av core ([0b25b9c](https://github.com/fremtind/jokul/commit/0b25b9ccb4d35214037e45158264fab2da196a5f)) +- bump majorversjon av core ([0b25b9c](https://github.com/fremtind/jokul/commit/0b25b9ccb4d35214037e45158264fab2da196a5f)) ### BREAKING CHANGES -- Avhenger av en versjon av jkl-core med breaking changes +- Avhenger av en versjon av jkl-core med breaking changes ## 3.0.9 (2022-11-22) diff --git a/packages/breadcrumb/breadcrumb.scss b/packages/breadcrumb/breadcrumb.scss index 1d91f1ec9c6..39ddf80e5e2 100644 --- a/packages/breadcrumb/breadcrumb.scss +++ b/packages/breadcrumb/breadcrumb.scss @@ -5,11 +5,11 @@ a[aria-current] { text-decoration: none; background-image: none; - color: var(--jkl-color); + color: var(--jkl-color-text-interactive); &:hover { cursor: default; - color: var(--jkl-link-color); + color: var(--jkl-color-text-interactive-hover); background-image: none; } } @@ -23,12 +23,12 @@ } &__item { - margin-bottom: jkl.$spacing-xs; + margin-bottom: jkl.$spacing-8; white-space: nowrap; } &__item-separator { - padding-left: jkl.$spacing-xs; - padding-right: jkl.$spacing-xs; + padding-left: jkl.$spacing-8; + padding-right: jkl.$spacing-8; } } diff --git a/packages/breadcrumb/package.json b/packages/breadcrumb/package.json index 11729756295..fd344af1ca6 100644 --- a/packages/breadcrumb/package.json +++ b/packages/breadcrumb/package.json @@ -1,6 +1,6 @@ { "name": "@fremtind/jkl-breadcrumb", - "version": "5.0.11", + "version": "5.1.0", "publishConfig": { "access": "public" }, @@ -16,14 +16,14 @@ ], "license": "MIT", "scripts": { - "clean": "rimraf .turbo **/*.css", + "clean": "git clean -xfd", "build": "gulp build", "build:watch": "gulp build:watch", "test": "echo \"Error: run tests from root\" && exit 1", "dev": "echo \"Error: run dev from breadcrumb-react\" && exit 1" }, "dependencies": { - "@fremtind/jkl-core": "^14.0.0" + "@fremtind/jkl-core": "^14.4.0" }, "repository": { "type": "git", diff --git a/packages/browserslist-config-jkl/package.json b/packages/browserslist-config-jkl/package.json index a73b8a9822d..31377e9e895 100644 --- a/packages/browserslist-config-jkl/package.json +++ b/packages/browserslist-config-jkl/package.json @@ -1,6 +1,6 @@ { "name": "@fremtind/browserslist-config-jkl", - "version": "2.0.0", + "version": "2.0.1", "description": "Browserlist configuration for jøkul", "keywords": [ "browserlist", @@ -17,7 +17,7 @@ "index.js" ], "scripts": { - "clean": "rimraf node_modules/", + "clean": "git clean -xfd", "test": "echo \"Error: run tests from root\" && exit 1" }, "repository": { diff --git a/packages/button-react/package.json b/packages/button-react/package.json index 5f6ab63bf9c..0b5c1827550 100644 --- a/packages/button-react/package.json +++ b/packages/button-react/package.json @@ -1,6 +1,6 @@ { "name": "@fremtind/jkl-button-react", - "version": "15.1.5", + "version": "15.1.14", "publishConfig": { "access": "public" }, @@ -30,7 +30,7 @@ "build" ], "scripts": { - "clean": "rimraf node_modules/ build/ node_modules/", + "clean": "git clean -xfd", "build:types": "tsc -p tsconfig-for-declarations.json", "build:scripts": "node ./esbuild.prod.mjs", "build": "run-s build:*", @@ -40,15 +40,15 @@ "dev": "run-p dev:*" }, "dependencies": { - "@fremtind/jkl-button": "^12.1.1", - "@fremtind/jkl-core": "^14.0.0", - "@fremtind/jkl-icons-react": "^8.7.4", - "@fremtind/jkl-loader-react": "^12.0.12", - "@fremtind/jkl-react-hooks": "^12.1.1", + "@fremtind/jkl-button": "^12.1.8", + "@fremtind/jkl-core": "^14.4.0", + "@fremtind/jkl-icons-react": "^9.1.6", + "@fremtind/jkl-loader-react": "^12.0.19", + "@fremtind/jkl-react-hooks": "^12.1.8", "classnames": "^2.3.2" }, "devDependencies": { - "@fremtind/jkl-toggle-switch-react": "^13.1.12" + "@fremtind/jkl-toggle-switch-react": "^13.1.21" }, "peerDependencies": { "@types/react": "^16.8.6 || ^17.0.0 || ^18.0.0", diff --git a/packages/button/CHANGELOG.md b/packages/button/CHANGELOG.md index 6797e485c28..d30865b54f0 100644 --- a/packages/button/CHANGELOG.md +++ b/packages/button/CHANGELOG.md @@ -3,15 +3,21 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 12.1.5 (2024-09-03) + +### Bug Fixes + +- bruk outline i stedet for box-shadow for fokusringer ([9aca3f7](https://github.com/fremtind/jokul/commit/9aca3f7505079d8afd5b57c36011a5c7637cee89)) + # 12.1.0 (2024-06-11) ### Bug Fixes -- bruk riktig padding på ghost button ([85b907a](https://github.com/fremtind/jokul/commit/85b907a6a2d5332542c812f3a9222e38e3636d30)) +- bruk riktig padding på ghost button ([85b907a](https://github.com/fremtind/jokul/commit/85b907a6a2d5332542c812f3a9222e38e3636d30)) ### Features -- ny knappevariant, GhostButton ([4721168](https://github.com/fremtind/jokul/commit/472116874fb445b11644d0a33059c71a92869c1b)) +- ny knappevariant, GhostButton ([4721168](https://github.com/fremtind/jokul/commit/472116874fb445b11644d0a33059c71a92869c1b)) # [12.0.0](https://github.com/fremtind/jokul/compare/@fremtind/jkl-button@11.0.2...@fremtind/jkl-button@12.0.0) (2023-09-14) diff --git a/packages/button/button.scss b/packages/button/button.scss index 634859111cd..dd67be1cbb0 100644 --- a/packages/button/button.scss +++ b/packages/button/button.scss @@ -49,7 +49,6 @@ a.jkl-button { --focus-color: var(--jkl-color-background-action); --background-color: transparent; - @include jkl.reset-outline; display: inline-flex; box-sizing: border-box; justify-content: center; @@ -70,7 +69,9 @@ a.jkl-button { transform-origin: 50% 90%; transition-property: transform, background-color; - html:not([data-mousenavigation]):not([data-touchnavigation]) &:focus, + @include jkl.reset-outline; + + &:focus-visible, html:not([data-touchnavigation]) &:hover { transform: scale(1.05); } @@ -81,9 +82,8 @@ a.jkl-button { transform: scale(1); } - html:not([data-mousenavigation]):not([data-touchnavigation]) &:focus { - outline: $_focus-ring-width solid var(--focus-color); - outline-offset: jkl.rem(2px); + &:focus-visible { + @include jkl.focus-outline; } html[data-touchnavigation] &--pressed { @@ -139,7 +139,7 @@ a.jkl-button { border-radius: jkl.rem(4px); padding: 0 jkl.$spacing-4; - html:not([data-mousenavigation]):not([data-touchnavigation]) &:focus, + &:focus-visible, html:not([data-touchnavigation]) &:hover { --background-color: var(--jkl-color-background-interactive-hover); transform: scale(1); @@ -163,7 +163,7 @@ a.jkl-button { transition-property: box-shadow, transform, background-color; &:hover, - html:not([data-mousenavigation]):not([data-touchnavigation]) &:focus, + &:focus-visible, html[data-touchnavigation] &.jkl-button--pressed { box-shadow: inset 0 0 0 1px var(--border-color), inset 0 0 0 1px var(--border-color); } @@ -191,21 +191,11 @@ a.jkl-button { background-color: transparent; } - &::after { - border: solid $_focus-ring-width transparent; - box-shadow: none; - transition: box-shadow $_animation-timing; - content: ""; - position: absolute; - inset: (-($_button-border-width)) (-($_button-border-width)) (-($_button-border-width)) - (-($_button-border-width)); - } - html[data-touchnavigation] &.jkl-button--pressed::before { animation: jkl.easing("easeInBounceOut") jkl.timing("lazy") $_tertiary-flash-animation-name; } - html:not([data-mousenavigation]):not([data-touchnavigation]) &:focus { + &:focus-visible { border: none; @include jkl.forced-colors-mode { @@ -214,7 +204,7 @@ a.jkl-button { } &:hover, - html:not([data-mousenavigation]):not([data-touchnavigation]) &:focus, + &:focus-visible, html[data-touchnavigation] &.jkl-button--pressed { border-bottom-color: var(--focus-color); border-bottom-width: $_focus-ring-width; @@ -268,18 +258,8 @@ a.jkl-button { background-color: ButtonText; } - &.jkl-button--secondary::after { - // Selve knappen har en border, men med to borders er secondary for lik primary uten farger. - // Gjør så secondary har _en_ border for å differensiere visuelt i forced-colors-modus. - border: none; - } - &.jkl-button--tertiary { outline-offset: jkl.$spacing-3xs; - } - - &.jkl-button--tertiary, - &.jkl-button--tertiary::after { border-top-style: none; border-right-style: none; border-left-style: none; diff --git a/packages/button/package.json b/packages/button/package.json index 1507e49f94f..60f5c002ab6 100644 --- a/packages/button/package.json +++ b/packages/button/package.json @@ -1,6 +1,6 @@ { "name": "@fremtind/jkl-button", - "version": "12.1.1", + "version": "12.1.8", "publishConfig": { "access": "public" }, @@ -21,14 +21,14 @@ ], "license": "MIT", "scripts": { - "clean": "rimraf .turbo **/*.css", + "clean": "git clean -xfd", "build": "gulp build", "build:watch": "gulp build:watch", "test": "echo \"Error: run tests from root\" && exit 1", "dev": "echo \"Error: run dev from button-react\" && exit 1" }, "dependencies": { - "@fremtind/jkl-core": "^14.0.0" + "@fremtind/jkl-core": "^14.4.0" }, "repository": { "type": "git", diff --git a/packages/card-react/CHANGELOG.md b/packages/card-react/CHANGELOG.md index fd501772a21..24ca88396c8 100644 --- a/packages/card-react/CHANGELOG.md +++ b/packages/card-react/CHANGELOG.md @@ -3,39 +3,45 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [12.0.15](https://github.com/fremtind/jokul/compare/@fremtind/jkl-card-react@12.0.14...@fremtind/jkl-card-react@12.0.15) (2024-09-04) + +### Bug Fixes + +- legg til aria-label og tekst om skjermlesere på NavCard og Card ([64e7215](https://github.com/fremtind/jokul/commit/64e7215c21d37a564a25973d82201a473c692c1c)) + # [12.0.0](https://github.com/fremtind/jokul/compare/@fremtind/jkl-card-react@11.3.17...@fremtind/jkl-card-react@12.0.0) (2024-08-14) ### Features -- erstatt utgått kortkomponent med ny overordnet variant ([c2258d4](https://github.com/fremtind/jokul/commit/c2258d4ced7add2167ae46c539d11dbc633a815a)) +- erstatt utgått kortkomponent med ny overordnet variant ([c2258d4](https://github.com/fremtind/jokul/commit/c2258d4ced7add2167ae46c539d11dbc633a815a)) ### BREAKING CHANGES -- Den gamle Card-komponenten er erstattet med ny +- Den gamle Card-komponenten er erstattet med ny ## [11.3.7](https://github.com/fremtind/jokul/compare/@fremtind/jkl-card-react@11.3.6...@fremtind/jkl-card-react@11.3.7) (2024-06-11) ### Bug Fixes -- fiks bruk av knapp i gammelt kort ([05d4ee1](https://github.com/fremtind/jokul/commit/05d4ee1467cb6191a1dbfb436d5ed63ce30bba3e)) +- fiks bruk av knapp i gammelt kort ([05d4ee1](https://github.com/fremtind/jokul/commit/05d4ee1467cb6191a1dbfb436d5ed63ce30bba3e)) # [11.3.0](https://github.com/fremtind/jokul/compare/@fremtind/jkl-card-react@11.2.2...@fremtind/jkl-card-react@11.3.0) (2024-02-28) ### Features -- legg til prop for å definere ekstern lenke ([d5700d0](https://github.com/fremtind/jokul/commit/d5700d0ad88eb9fbc2d11452041b1858d6a8adf2)) +- legg til prop for å definere ekstern lenke ([d5700d0](https://github.com/fremtind/jokul/commit/d5700d0ad88eb9fbc2d11452041b1858d6a8adf2)) # [11.2.0](https://github.com/fremtind/jokul/compare/@fremtind/jkl-card-react@11.1.26...@fremtind/jkl-card-react@11.2.0) (2024-02-20) ### Features -- legg til støtte for å ha flere tags i navcard ([f836890](https://github.com/fremtind/jokul/commit/f836890c3742984afb72b02587b589740c7d1d29)) +- legg til støtte for å ha flere tags i navcard ([f836890](https://github.com/fremtind/jokul/commit/f836890c3742984afb72b02587b589740c7d1d29)) # [11.1.0](https://github.com/fremtind/jokul/compare/@fremtind/jkl-card-react@11.0.7...@fremtind/jkl-card-react@11.1.0) (2023-09-21) ### Features -- deleted snapshots ([545e346](https://github.com/fremtind/jokul/commit/545e3460f3834ff07c2161ee0b6a6dc11286c6dd)) +- deleted snapshots ([545e346](https://github.com/fremtind/jokul/commit/545e3460f3834ff07c2161ee0b6a6dc11286c6dd)) # [11.0.0](https://github.com/fremtind/jokul/compare/@fremtind/jkl-card-react@10.0.8...@fremtind/jkl-card-react@11.0.0) (2023-09-14) diff --git a/packages/card-react/package.json b/packages/card-react/package.json index 26145cc831b..0b9d22effda 100644 --- a/packages/card-react/package.json +++ b/packages/card-react/package.json @@ -1,6 +1,6 @@ { "name": "@fremtind/jkl-card-react", - "version": "12.0.0", + "version": "12.0.19", "publishConfig": { "access": "public" }, @@ -25,7 +25,7 @@ "build" ], "scripts": { - "clean": "rimraf node_modules/ build/ node_modules/", + "clean": "git clean -xfd", "build:types": "tsc -p tsconfig-for-declarations.json", "build:scripts": "node ./esbuild.prod.mjs", "build": "run-s build:*", @@ -35,15 +35,15 @@ "dev": "run-p dev:*" }, "dependencies": { - "@fremtind/jkl-button-react": "^15.1.5", - "@fremtind/jkl-card": "^12.0.0", - "@fremtind/jkl-core": "^14.0.0", - "@fremtind/jkl-image-react": "^6.0.13", - "@fremtind/jkl-tag-react": "^5.2.14", + "@fremtind/jkl-button-react": "^15.1.14", + "@fremtind/jkl-card": "^12.0.8", + "@fremtind/jkl-core": "^14.4.0", + "@fremtind/jkl-image-react": "^6.0.20", + "@fremtind/jkl-tag-react": "^5.2.23", "classnames": "^2.3.2" }, "devDependencies": { - "@fremtind/jkl-constants-util": "^3.0.60" + "@fremtind/jkl-constants-util": "^3.0.79" }, "peerDependencies": { "@types/react": "^16.8.6 || ^17.0.0 || ^18.0.0", diff --git a/packages/card-react/src/Card.tsx b/packages/card-react/src/Card.tsx index 3b3a05dfd48..ac4652d43c9 100644 --- a/packages/card-react/src/Card.tsx +++ b/packages/card-react/src/Card.tsx @@ -31,6 +31,8 @@ export type CardProps = PolymorphicPropsW * Angir om kortet visuelt skal fremstå som klikkbart. Du må selv rendre * kortet som et klikkbart element (f.eks. `` eller en `` fra * et ruting-bibliotek) og gi det en `href` eller `onClick`-handler. + * HUSK: Sett aria-label for at støtteverktøy, som skjermlesere, ikke + * skal lese alt innholdet i kortet. */ clickable?: boolean; } diff --git a/packages/card-react/src/NavCard.tsx b/packages/card-react/src/NavCard.tsx index 4da75dc2dfc..efabe81e618 100644 --- a/packages/card-react/src/NavCard.tsx +++ b/packages/card-react/src/NavCard.tsx @@ -78,7 +78,13 @@ export const NavCard: FC = React.forwardRef + {image && }

{tagArr && ( diff --git a/packages/card/CHANGELOG.md b/packages/card/CHANGELOG.md index c302346f83e..fc2a7983c98 100644 --- a/packages/card/CHANGELOG.md +++ b/packages/card/CHANGELOG.md @@ -3,27 +3,33 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [12.0.6](https://github.com/fremtind/jokul/compare/@fremtind/jkl-card@12.0.5...@fremtind/jkl-card@12.0.6) (2024-09-04) + +### Bug Fixes + +- sass-rekkefølge i card ([ab9ceb9](https://github.com/fremtind/jokul/commit/ab9ceb916c56efd3484ca7233226572b88031a7d)) + # 12.0.0 (2024-08-14) ### Features -- erstatt utgått kortkomponent med ny overordnet variant ([c2258d4](https://github.com/fremtind/jokul/commit/c2258d4ced7add2167ae46c539d11dbc633a815a)) +- erstatt utgått kortkomponent med ny overordnet variant ([c2258d4](https://github.com/fremtind/jokul/commit/c2258d4ced7add2167ae46c539d11dbc633a815a)) ### BREAKING CHANGES -- Den gamle Card-komponenten er erstattet med ny +- Den gamle Card-komponenten er erstattet med ny # [11.2.0](https://github.com/fremtind/jokul/compare/@fremtind/jkl-card@11.1.0...@fremtind/jkl-card@11.2.0) (2024-02-28) ### Features -- legg til prop for å definere ekstern lenke ([d5700d0](https://github.com/fremtind/jokul/commit/d5700d0ad88eb9fbc2d11452041b1858d6a8adf2)) +- legg til prop for å definere ekstern lenke ([d5700d0](https://github.com/fremtind/jokul/commit/d5700d0ad88eb9fbc2d11452041b1858d6a8adf2)) # 11.1.0 (2024-02-20) ### Features -- legg til støtte for å ha flere tags i navcard ([f836890](https://github.com/fremtind/jokul/commit/f836890c3742984afb72b02587b589740c7d1d29)) +- legg til støtte for å ha flere tags i navcard ([f836890](https://github.com/fremtind/jokul/commit/f836890c3742984afb72b02587b589740c7d1d29)) # 11.0.0 (2023-09-14) diff --git a/packages/card/card.scss b/packages/card/card.scss index 129612cea63..ecc8de86748 100644 --- a/packages/card/card.scss +++ b/packages/card/card.scss @@ -36,6 +36,14 @@ --border-radius: #{jkl.rem(4px)}; --background-color: var(--jkl-color-background-container); + overflow: hidden; + display: block; + background-color: var(--background-color); + border-radius: var(--border-radius); + padding: var(--padding); + text-decoration: none; + color: var(--jkl-color-text-default); + &[data-padding="xs"] { --padding: var(--jkl-card-padding-xs); } @@ -82,14 +90,6 @@ box-shadow: jkl.$shadow-navigation--hover; } } - - overflow: hidden; - display: block; - background-color: var(--background-color); - border-radius: var(--border-radius); - padding: var(--padding); - text-decoration: none; - color: var(--jkl-color-text-default); } .jkl-card-image { diff --git a/packages/card/package.json b/packages/card/package.json index 34261b4739e..0c79b0dcc44 100644 --- a/packages/card/package.json +++ b/packages/card/package.json @@ -1,6 +1,6 @@ { "name": "@fremtind/jkl-card", - "version": "12.0.0", + "version": "12.0.8", "publishConfig": { "access": "public" }, @@ -18,14 +18,14 @@ ], "license": "MIT", "scripts": { - "clean": "rimraf .turbo **/*.css", + "clean": "git clean -xfd", "build": "gulp build", "build:watch": "gulp build:watch", "test": "echo \"Error: run tests from root\" && exit 1", "dev": "echo \"Error: run dev from card-react\" && exit 1" }, "dependencies": { - "@fremtind/jkl-core": "^14.0.0" + "@fremtind/jkl-core": "^14.4.0" }, "repository": { "type": "git", diff --git a/packages/checkbox-react/package.json b/packages/checkbox-react/package.json index fe889fb0af2..a21cf6dd86c 100644 --- a/packages/checkbox-react/package.json +++ b/packages/checkbox-react/package.json @@ -1,6 +1,6 @@ { "name": "@fremtind/jkl-checkbox-react", - "version": "11.1.25", + "version": "11.1.34", "publishConfig": { "access": "public" }, @@ -28,7 +28,7 @@ "*.scss" ], "scripts": { - "clean": "rimraf node_modules/ build/ node_modules/", + "clean": "git clean -xfd", "build:types": "tsc -p tsconfig-for-declarations.json", "build:scripts": "node ./esbuild.prod.mjs", "build": "run-s build:*", @@ -38,13 +38,13 @@ "dev": "run-p dev:*" }, "dependencies": { - "@fremtind/jkl-checkbox": "^11.0.8", - "@fremtind/jkl-core": "^14.0.0", - "@fremtind/jkl-react-hooks": "^12.1.1", + "@fremtind/jkl-checkbox": "^11.1.0", + "@fremtind/jkl-core": "^14.4.0", + "@fremtind/jkl-react-hooks": "^12.1.8", "classnames": "^2.3.2" }, "devDependencies": { - "@fremtind/jkl-input-group-react": "^3.0.32" + "@fremtind/jkl-input-group-react": "^3.0.41" }, "peerDependencies": { "@types/react": "^16.8.6 || ^17.0.0 || ^18.0.0", diff --git a/packages/checkbox/CHANGELOG.md b/packages/checkbox/CHANGELOG.md index 61cdad0f50a..89436695e2a 100644 --- a/packages/checkbox/CHANGELOG.md +++ b/packages/checkbox/CHANGELOG.md @@ -3,27 +3,40 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# 11.1.0 (2024-09-09) + +### Features + +- bruk semantiske variabler i checkbox ([a666a73](https://github.com/fremtind/jokul/commit/a666a731d2841d5fb993ff62e8c4c7fb766e1c9e)) + +## 11.0.12 (2024-09-03) + +### Bug Fixes + +- bruk outline i stedet for box-shadow for fokusringer ([9aca3f7](https://github.com/fremtind/jokul/commit/9aca3f7505079d8afd5b57c36011a5c7637cee89)) + ## 11.0.6 (2024-01-19) ### Bug Fixes -- align checkbox mot toppen for å støtte label over flere linjer ([d953c17](https://github.com/fremtind/jokul/commit/d953c17143a6509d0a692f129af2a4a5e141090a)) +- align checkbox mot toppen for å støtte label over flere linjer ([d953c17](https://github.com/fremtind/jokul/commit/d953c17143a6509d0a692f129af2a4a5e141090a)) # [11.0.0](https://github.com/fremtind/jokul/compare/@fremtind/jkl-checkbox@10.1.4...@fremtind/jkl-checkbox@11.0.0) (2023-09-21) ### Bug Fixes -- use correct CSS class names ([772e41d](https://github.com/fremtind/jokul/commit/772e41d1ca0fe78cc58b8a99de3ff30b02a8f236)) +- use correct CSS class names ([772e41d](https://github.com/fremtind/jokul/commit/772e41d1ca0fe78cc58b8a99de3ff30b02a8f236)) ### Features -- add support for an indeterminate prop ([1628063](https://github.com/fremtind/jokul/commit/1628063331cf595b2fda1bbc84e44ab6f9b8706a)), closes [#3675](https://github.com/fremtind/jokul/issues/3675) +- add support for an indeterminate prop ([1628063](https://github.com/fremtind/jokul/commit/1628063331cf595b2fda1bbc84e44ab6f9b8706a)), closes [#3675](https://github.com/fremtind/jokul/issues/3675) ### BREAKING CHANGES -- CSS class names and DOM structure for the checkbox label has been changed. +- CSS class names and DOM structure for the checkbox label has been changed. Markup needs to be updated from + ```