From 16c70026b219ec3fb42a6cb58852bf4775d97cdf Mon Sep 17 00:00:00 2001 From: Alex Skrypnyk Date: Thu, 18 Jan 2024 10:38:10 +1100 Subject: [PATCH 001/295] Added GHA to post new open issues to JIRA. --- .../workflows/post-opened-issue-to-jira.yml | 45 +++++++++++++++++++ 1 file changed, 45 insertions(+) create mode 100644 .github/workflows/post-opened-issue-to-jira.yml diff --git a/.github/workflows/post-opened-issue-to-jira.yml b/.github/workflows/post-opened-issue-to-jira.yml new file mode 100644 index 0000000..bbc7145 --- /dev/null +++ b/.github/workflows/post-opened-issue-to-jira.yml @@ -0,0 +1,45 @@ +name: Post opened issue to Jira + +on: + issues: + types: + - opened + +jobs: + issue_opened: + runs-on: ubuntu-latest + + steps: + - name: Create issue body file + run: echo "${{ github.event.issue.body }}" > ${{ runner.temp }}/_github_workflow/issue.md + + - name: Convert GitHub markdown to Jira markup + uses: docker://pandoc/core:3.1 + with: + args: --from gfm --to jira --output=/github/workflow/issue.jira /github/workflow/issue.md + + - name: Put output to the variable + run: | + echo 'JIRA_CONTENT<> $GITHUB_ENV + cat ${{ runner.temp }}/_github_workflow/issue.jira >> $GITHUB_ENV + echo >> $GITHUB_ENV + echo "----" >> $GITHUB_ENV + echo "GitHub issue: ${{ github.event.issue.html_url }}" >> $GITHUB_ENV + echo 'EOF' >> $GITHUB_ENV + + - name: Login + uses: atlassian/gajira-login@v3 + env: + JIRA_BASE_URL: ${{ secrets.JIRA_BASE_URL }} + JIRA_USER_EMAIL: ${{ secrets.JIRA_USER_EMAIL }} + JIRA_API_TOKEN: ${{ secrets.JIRA_API_TOKEN }} + + - name: Create issue + id: create + uses: atlassian/gajira-create@v3 + with: + project: ${{ vars.JIRA_PROJECT_KEY }} + issuetype: Story + summary: "${{ github.event.issue.title }}" + description: ${{ env.JIRA_CONTENT }} + fields: '{"customfield_11600": "${{ github.event.issue.html_url }}"}' From 25166a622ead25fe712e1fdf0cfa586ead695021 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Wed, 17 Jan 2024 23:38:34 +0000 Subject: [PATCH 002/295] Update toshimaru/auto-author-assign action to v2.1.0 --- .github/workflows/pr-auto-assign-author.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/pr-auto-assign-author.yml b/.github/workflows/pr-auto-assign-author.yml index 14d4c01..d3b82da 100644 --- a/.github/workflows/pr-auto-assign-author.yml +++ b/.github/workflows/pr-auto-assign-author.yml @@ -13,4 +13,4 @@ jobs: assign-author: runs-on: ubuntu-latest steps: - - uses: toshimaru/auto-author-assign@v2.0.1 + - uses: toshimaru/auto-author-assign@v2.1.0 From 6f89af60acfbaa7362bd36b43172d2c2874333f4 Mon Sep 17 00:00:00 2001 From: Alex Skrypnyk Date: Thu, 18 Jan 2024 10:43:44 +1100 Subject: [PATCH 003/295] Updated GHA. --- .github/workflows/post-opened-issue-to-jira.yml | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/.github/workflows/post-opened-issue-to-jira.yml b/.github/workflows/post-opened-issue-to-jira.yml index bbc7145..4ac95fd 100644 --- a/.github/workflows/post-opened-issue-to-jira.yml +++ b/.github/workflows/post-opened-issue-to-jira.yml @@ -39,7 +39,6 @@ jobs: uses: atlassian/gajira-create@v3 with: project: ${{ vars.JIRA_PROJECT_KEY }} - issuetype: Story - summary: "${{ github.event.issue.title }}" + issuetype: Task + summary: "UI Kit (GitHub): ${{ github.event.issue.title }}" description: ${{ env.JIRA_CONTENT }} - fields: '{"customfield_11600": "${{ github.event.issue.html_url }}"}' From ad1d2dd4400b01d0c3c084f96927b4eeb546ee51 Mon Sep 17 00:00:00 2001 From: Alex Skrypnyk Date: Fri, 19 Jan 2024 09:02:18 +1100 Subject: [PATCH 004/295] Update README.md --- README.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/README.md b/README.md index b64577f..a17c567 100644 --- a/README.md +++ b/README.md @@ -22,6 +22,9 @@ ---- +> [!Tip] +> For support, see [Getting help](https://docs.civictheme.io/getting-help) documentation + ## Features - Atomic design From 38db1c113ce5dda8d39f974763dc89e08c26c7ba Mon Sep 17 00:00:00 2001 From: Alex Skrypnyk Date: Fri, 19 Jan 2024 18:36:13 +1100 Subject: [PATCH 005/295] Update post-opened-issue-to-jira.yml Pass `UIKit` component to JIRA. --- .github/workflows/post-opened-issue-to-jira.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/.github/workflows/post-opened-issue-to-jira.yml b/.github/workflows/post-opened-issue-to-jira.yml index 4ac95fd..fb15cad 100644 --- a/.github/workflows/post-opened-issue-to-jira.yml +++ b/.github/workflows/post-opened-issue-to-jira.yml @@ -42,3 +42,4 @@ jobs: issuetype: Task summary: "UI Kit (GitHub): ${{ github.event.issue.title }}" description: ${{ env.JIRA_CONTENT }} + fields: '{"components": {"name": "UIKit"}}' From 81b64a922a789d4e40aa4b687b21d58e7c1fa7a7 Mon Sep 17 00:00:00 2001 From: Alex Skrypnyk Date: Fri, 19 Jan 2024 18:38:41 +1100 Subject: [PATCH 006/295] Update post-opened-issue-to-jira.yml --- .github/workflows/post-opened-issue-to-jira.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/post-opened-issue-to-jira.yml b/.github/workflows/post-opened-issue-to-jira.yml index fb15cad..2bf339b 100644 --- a/.github/workflows/post-opened-issue-to-jira.yml +++ b/.github/workflows/post-opened-issue-to-jira.yml @@ -42,4 +42,4 @@ jobs: issuetype: Task summary: "UI Kit (GitHub): ${{ github.event.issue.title }}" description: ${{ env.JIRA_CONTENT }} - fields: '{"components": {"name": "UIKit"}}' + fields: '{"components": [{"name": "UIKit"}]}' From ef0eb3394799d02dfc5f998429b2719d27fcdbe2 Mon Sep 17 00:00:00 2001 From: Alex Skrypnyk Date: Fri, 19 Jan 2024 18:40:55 +1100 Subject: [PATCH 007/295] Update post-opened-issue-to-jira.yml --- .github/workflows/post-opened-issue-to-jira.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/post-opened-issue-to-jira.yml b/.github/workflows/post-opened-issue-to-jira.yml index 2bf339b..d110dc6 100644 --- a/.github/workflows/post-opened-issue-to-jira.yml +++ b/.github/workflows/post-opened-issue-to-jira.yml @@ -39,7 +39,7 @@ jobs: uses: atlassian/gajira-create@v3 with: project: ${{ vars.JIRA_PROJECT_KEY }} - issuetype: Task + issuetype: Story summary: "UI Kit (GitHub): ${{ github.event.issue.title }}" description: ${{ env.JIRA_CONTENT }} fields: '{"components": [{"name": "UIKit"}]}' From 3bb8a79ec5d0ee0fefdaaff84494a206060f3b4b Mon Sep 17 00:00:00 2001 From: Joshua Fernandes <83997348+joshua-salsadigital@users.noreply.github.com> Date: Tue, 23 Jan 2024 09:32:14 +0530 Subject: [PATCH 008/295] [#79] Updated markup and prop for Promo component to be Contained or not. (#84) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Joshua Fernandes <“joshua.1234511@yahoo.in”> --- components/00-base/_variables.components.scss | 1 + components/03-organisms/promo/promo.scss | 5 + .../03-organisms/promo/promo.stories.js | 2 + components/03-organisms/promo/promo.twig | 119 ++++++++++-------- 4 files changed, 72 insertions(+), 55 deletions(-) diff --git a/components/00-base/_variables.components.scss b/components/00-base/_variables.components.scss index e28d4c0..4f79a15 100644 --- a/components/00-base/_variables.components.scss +++ b/components/00-base/_variables.components.scss @@ -1101,6 +1101,7 @@ $ct-promo-light-background-color: ct-color-light('background-light') !default; $ct-promo-light-border-color: ct-color-light('border-light') !default; $ct-promo-dark-background-color: ct-color-dark('background') !default; $ct-promo-dark-border-color: ct-color-dark('border') !default; +$ct-promo-space-horizontal: ct-spacing(7) !default; // // Skip link. diff --git a/components/03-organisms/promo/promo.scss b/components/03-organisms/promo/promo.scss index 05f817a..2166b54 100644 --- a/components/03-organisms/promo/promo.scss +++ b/components/03-organisms/promo/promo.scss @@ -5,6 +5,11 @@ .ct-promo { $root: &; + &#{$root}--with-background { + padding-left: $ct-promo-space-horizontal; + padding-right: $ct-promo-space-horizontal; + } + border-top: solid ct-particle(0.125); border-bottom: solid ct-particle(0.125); diff --git a/components/03-organisms/promo/promo.stories.js b/components/03-organisms/promo/promo.stories.js index 2e27118..c5f91d5 100644 --- a/components/03-organisms/promo/promo.stories.js +++ b/components/03-organisms/promo/promo.stories.js @@ -24,6 +24,7 @@ export const Promo = () => { ), title: text('Title', 'Sign up for industry news and updates from CivicTheme', generalKnobTab), content: text('Content', randomSentence(), generalKnobTab), + is_contained: boolean('Contained', true, generalKnobTab), link: { text: text('Link text', 'Sign up', generalKnobTab), url: text('Link URL', 'https://example.com', generalKnobTab), @@ -41,6 +42,7 @@ export const Promo = () => { 'none', generalKnobTab, ), + with_background: boolean('With background', false, generalKnobTab), attributes: text('Additional attributes', '', generalKnobTab), modifier_class: text('Additional classes', '', generalKnobTab), }; diff --git a/components/03-organisms/promo/promo.twig b/components/03-organisms/promo/promo.twig index 3b52058..d171cf7 100644 --- a/components/03-organisms/promo/promo.twig +++ b/components/03-organisms/promo/promo.twig @@ -7,6 +7,7 @@ * - content_top: [string] Content slot. * - title: [string] Title text. * - content: [string] Content. + * - is_contained: [boolean] Contained or not. * - link: [object] Link: * - text: [string] Link text. * - url: [string] Link URL. @@ -15,81 +16,89 @@ * - content_bottom: [string] Content slot. * - theme: [string] Theme: light, dark. * - vertical_spacing: [string] With top, bottom or both vertical spaces. + * - with_background: [boolean] With background or not. * - attributes: [string] Additional attributes. * - modifier_class: [string] Additional classes. */ #} +{% set with_background_class = with_background ? 'ct-promo--with-background' : '' %} {% set vertical_spacing_class = vertical_spacing in ['top', 'bottom', 'both'] ? 'ct-vertical-spacing--%s'|format(vertical_spacing) : '' %} {% set theme_class = 'ct-theme-%s'|format(theme|default('light')) %} -{% set modifier_class = '%s %s %s'|format(theme_class, vertical_spacing_class, modifier_class|default('')) %} +{% set modifier_class = '%s %s %s %s'|format(theme_class, with_background_class, vertical_spacing_class, modifier_class|default('')) %} + +{% set is_contained = is_contained is not defined or is_contained != false ? true : false %} {% if title is not empty or content is not empty %}
-
-
-
- {% block content_top %} - {% if content_top is not empty %} -
- {{ content_top }} -
+ {% if is_contained %} +
+
+
{% endif %} - {% endblock %} + {% block content_top %} + {% if content_top is not empty %} +
+ {{ content_top }} +
+ {% endif %} + {% endblock %} - {% block content %} -
- {% block content_left %} -
- {% if title %} - {% include '@atoms/heading/heading.twig' with { - content: title, - level: 4, - theme: theme, - modifier_class: 'ct-promo__title', - } only %} - {% endif %} + {% block content %} +
+ {% block content_left %} +
+ {% if title %} + {% include '@atoms/heading/heading.twig' with { + content: title, + level: 4, + theme: theme, + modifier_class: 'ct-promo__title', + } only %} + {% endif %} - {% if content is not empty %} - {% include '@atoms/paragraph/paragraph.twig' with { - theme: theme, - content: content, - allow_html: true, - modifier_class: 'ct-promo__content', - } only %} - {% endif %} + {% if content is not empty %} + {% include '@atoms/paragraph/paragraph.twig' with { + theme: theme, + content: content, + allow_html: true, + modifier_class: 'ct-promo__content', + } only %} + {% endif %} +
+ {% endblock %} + + {% block content_right %} + {% if link %} + + {% endif %} + {% endblock %}
{% endblock %} - {% block content_right %} - {% if link %} - - {% endblock %} - - {% block content_bottom %} - {% if content_bottom is not empty %} -
- {{ content_bottom }} -
- {% endif %} - {% endblock %} + {% if is_contained %} +
-
+ {% endif %}
{% endif %} From 8a3177a3e1ede0d059a6ccc69e59cd6a6274a952 Mon Sep 17 00:00:00 2001 From: Alex Skrypnyk Date: Tue, 23 Jan 2024 17:19:05 +1100 Subject: [PATCH 009/295] [#68] Added deployment to Netlify. (#85) --- .github/workflows/test.yml | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index fc8aa25..ff75930 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -24,3 +24,19 @@ jobs: - run: npm run lint - run: npm run build - run: npm run test + + - name: Deploy to Netlify + if: matrix.node == 20 + uses: nwtgck/actions-netlify@v2.0 + with: + github-token: ${{ secrets.GITHUB_TOKEN }} + publish-dir: './storybook-static' + production-branch: main + deploy-message: "Deploy from GitHub Actions" + enable-pull-request-comment: true + enable-commit-comment: true + overwrites-pull-request-comment: true + env: + NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }} + NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }} + timeout-minutes: 1 From 9493de31a6de1e1ba6006b6d4a669c87a03cd3a2 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Tue, 23 Jan 2024 06:19:22 +0000 Subject: [PATCH 010/295] Update nwtgck/actions-netlify action to v2.1 --- .github/workflows/test.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index ff75930..46d49cc 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -27,7 +27,7 @@ jobs: - name: Deploy to Netlify if: matrix.node == 20 - uses: nwtgck/actions-netlify@v2.0 + uses: nwtgck/actions-netlify@v2.1 with: github-token: ${{ secrets.GITHUB_TOKEN }} publish-dir: './storybook-static' From 92c0b2c310441ae627ce6dce56e20aeeea0f9e1b Mon Sep 17 00:00:00 2001 From: Joshua Fernandes <83997348+joshua-salsadigital@users.noreply.github.com> Date: Fri, 26 Jan 2024 08:25:50 +0530 Subject: [PATCH 011/295] [#83] Updated storybook to show HTML source. (#87) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Joshua Fernandes <“joshua.1234511@yahoo.in”> --- .storybook/addon-config.js | 1 + .storybook/preview.js | 7 +++++++ package.json | 6 +++++- ...hitespace+storybook-addon-html+5.1.6.patch | 19 +++++++++++++++++++ 4 files changed, 32 insertions(+), 1 deletion(-) create mode 100644 patches/@whitespace+storybook-addon-html+5.1.6.patch diff --git a/.storybook/addon-config.js b/.storybook/addon-config.js index f08d91e..c7dd405 100644 --- a/.storybook/addon-config.js +++ b/.storybook/addon-config.js @@ -11,6 +11,7 @@ exports.default = function () { }, }, '@storybook/addon-links', + '@whitespace/storybook-addon-html', ]; // Html and pseudo knobs. diff --git a/.storybook/preview.js b/.storybook/preview.js index 507f7bd..d748f88 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -90,4 +90,11 @@ export const parameters = { }, }, }, + html: { + prettier: { + tabWidth: 4, + useTabs: false, + htmlWhitespaceSensitivity: 'strict', + }, + }, }; diff --git a/package.json b/package.json index c8a0489..cb73ec1 100644 --- a/package.json +++ b/package.json @@ -27,7 +27,8 @@ "dist:dev": "export NODE_OPTIONS=--openssl-legacy-provider && webpack --config ./webpack/webpack.dev.js", "test": "npm run test-storybook:ci", "test-storybook": "test-storybook", - "test-storybook:ci": "concurrently --kill-others --success first --names \"SB,TEST\" --prefix-colors \"magenta,blue\" \"npx http-server storybook-static --port 6006 -a 127.0.0.1 --silent\" \"wait-on --timeout 10000 http://127.0.0.1:6006 && npm run test-storybook\"" + "test-storybook:ci": "concurrently --kill-others --success first --names \"SB,TEST\" --prefix-colors \"magenta,blue\" \"npx http-server storybook-static --port 6006 -a 127.0.0.1 --silent\" \"wait-on --timeout 10000 http://127.0.0.1:6006 && npm run test-storybook\"", + "postinstall": "npx patch-package" }, "engines": { "node": ">=18.14" @@ -49,6 +50,7 @@ "@storybook/addons": "^6.1.18", "@storybook/html": "^6.3.8", "@storybook/test-runner": "^0.16.0", + "@whitespace/storybook-addon-html": "^5.1.6", "addon-screen-reader": "^1.8.6", "babel-loader": "^8.2.2", "babel-plugin-syntax-dynamic-import": "^6.18.0", @@ -70,8 +72,10 @@ "lorem-ipsum": "^2.0.4", "mini-css-extract-plugin": "^1.6.2", "node-sass-magic-importer": "^5.3.2", + "prettier": "^2.8.8", "react": "^17", "react-dom": "^17", + "react-syntax-highlighter": "^15.5.0", "sass": "^1.41.0", "sass-loader": "^10.2.0", "semver": "^7.3.8", diff --git a/patches/@whitespace+storybook-addon-html+5.1.6.patch b/patches/@whitespace+storybook-addon-html+5.1.6.patch new file mode 100644 index 0000000..feedfd4 --- /dev/null +++ b/patches/@whitespace+storybook-addon-html+5.1.6.patch @@ -0,0 +1,19 @@ +diff --git a/node_modules/@whitespace/storybook-addon-html/preset.js b/node_modules/@whitespace/storybook-addon-html/preset.js +index aca6ca4..f23183d 100644 +--- a/node_modules/@whitespace/storybook-addon-html/preset.js ++++ b/node_modules/@whitespace/storybook-addon-html/preset.js +@@ -1,7 +1,3 @@ +-function config(entry = []) { +- return [...entry, require.resolve("./dist/esm/preset/preview")]; +-} +- + function managerEntries(entry = []) { + return [...entry, require.resolve("./dist/esm/preset/manager")]; + } +@@ -12,6 +8,5 @@ function previewAnnotations(entry = []) { + + module.exports = { + managerEntries, +- config, + previewAnnotations, + }; From 0cde235c63d8b8871c6db38d8a6e1e4fab00051c Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Fri, 2 Feb 2024 17:49:27 +0000 Subject: [PATCH 012/295] Update release-drafter/release-drafter action to v6 --- .github/workflows/release-manual.yml | 2 +- .github/workflows/release-notes.yml | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/workflows/release-manual.yml b/.github/workflows/release-manual.yml index a0ce47e..8fef1a1 100644 --- a/.github/workflows/release-manual.yml +++ b/.github/workflows/release-manual.yml @@ -65,7 +65,7 @@ jobs: run: git push origin && git push --tags - name: Publish release on GitHub - uses: release-drafter/release-drafter@v5 + uses: release-drafter/release-drafter@v6 env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} with: diff --git a/.github/workflows/release-notes.yml b/.github/workflows/release-notes.yml index c33cf4c..127d99f 100644 --- a/.github/workflows/release-notes.yml +++ b/.github/workflows/release-notes.yml @@ -13,6 +13,6 @@ jobs: release-notes: runs-on: ubuntu-latest steps: - - uses: release-drafter/release-drafter@v5 + - uses: release-drafter/release-drafter@v6 env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} From ee51bf89f79103fe25a848fcca57be40de6570a2 Mon Sep 17 00:00:00 2001 From: Joshua Fernandes <83997348+joshua-salsadigital@users.noreply.github.com> Date: Fri, 1 Mar 2024 11:01:07 +0530 Subject: [PATCH 013/295] #90 Updated content in table cells to be top aligned. (#91) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Joshua Fernandes <“joshua.1234511@yahoo.in”> --- components/00-base/_variables.components.scss | 1 + components/00-base/mixins/_table.scss | 1 + components/01-atoms/table/table.stories.js | 12 ++++++++++++ 3 files changed, 14 insertions(+) diff --git a/components/00-base/_variables.components.scss b/components/00-base/_variables.components.scss index 4f79a15..f2a5975 100644 --- a/components/00-base/_variables.components.scss +++ b/components/00-base/_variables.components.scss @@ -393,6 +393,7 @@ $ct-tag-dark-tertiary-color: ct-color-dark('interaction-background') !default; // Table. // $ct-table-breakpoint: 'm' !default; +$ct-table-cell-vertical-align: top !default; $ct-table-light-background-color: ct-color-light('background-light') !default; $ct-table-light-border-color: ct-color-light('border') !default; $ct-table-light-caption-color: ct-color-light('body') !default; diff --git a/components/00-base/mixins/_table.scss b/components/00-base/mixins/_table.scss index 2f8c36a..6b6ef28 100644 --- a/components/00-base/mixins/_table.scss +++ b/components/00-base/mixins/_table.scss @@ -74,6 +74,7 @@ th, td { padding: ct-spacing(1.5) ct-spacing(); + vertical-align: $ct-table-cell-vertical-align; @include ct-breakpoint($ct-table-breakpoint) { padding: ct-spacing(1.5) ct-spacing(3); diff --git a/components/01-atoms/table/table.stories.js b/components/01-atoms/table/table.stories.js index 5c1bff0..d89c425 100644 --- a/components/01-atoms/table/table.stories.js +++ b/components/01-atoms/table/table.stories.js @@ -55,6 +55,18 @@ export const Table = (knobTab) => { 'Another column', 'One more column column', ], + [ + 'Row 6 with larger amount of content', + '

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

', + 'Another column', + 'One more column column', + ], + [ + 'Row 7 with small amount of content', + '

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

', + 'Another column', + 'One more column column', + ], ]; }; From 0b3304b74c50becf30a5b718c327271e004dd988 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Wed, 6 Mar 2024 16:50:36 +0000 Subject: [PATCH 014/295] Update bitovi/github-actions-storybook-to-github-pages action to v1.0.3 --- .github/workflows/release-storybook.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/release-storybook.yml b/.github/workflows/release-storybook.yml index 9ddaf82..b0d2725 100644 --- a/.github/workflows/release-storybook.yml +++ b/.github/workflows/release-storybook.yml @@ -14,7 +14,7 @@ jobs: release-storybook: runs-on: ubuntu-latest steps: - - uses: bitovi/github-actions-storybook-to-github-pages@v1.0.2 + - uses: bitovi/github-actions-storybook-to-github-pages@v1.0.3 with: path: storybook-static install_command: npm install From 6b1b1f4c3c73542dd1c58ded0b49e694f53350c6 Mon Sep 17 00:00:00 2001 From: Richard Gaunt Date: Sat, 2 Mar 2024 11:44:27 +1100 Subject: [PATCH 015/295] Added is_external property to object being passed to button.twig in campaign component. --- components/03-organisms/campaign/campaign.twig | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/components/03-organisms/campaign/campaign.twig b/components/03-organisms/campaign/campaign.twig index 96dbdab..31076e2 100644 --- a/components/03-organisms/campaign/campaign.twig +++ b/components/03-organisms/campaign/campaign.twig @@ -13,7 +13,11 @@ * - title: [string] Title. * - date: [string] Date. * - content: [string] Content. - * - links: [array] Links. + * - links: [array] Array of link objects containing: + * - text: [string] Link text. + * - url: [string] Link URL. + * - is_new_window: [boolean] Open link in the new window. + * - is_external: [boolean] Link is external. * - content_bottom: [string] Content slot. * - theme: [string] Theme: light, dark. * - vertical_spacing: [string] With top, bottom or both vertical spaces. @@ -104,6 +108,7 @@ text: link.text, url: link.url, is_new_window: link.is_new_window, + is_external: link.is_external } only %} {% endset %} {% set link_items = link_items|merge([link_item]) %} From ac20dbb773d1b978ddd11b2c1ab4698a95e60d95 Mon Sep 17 00:00:00 2001 From: Richard Gaunt Date: Sat, 2 Mar 2024 18:30:20 +1100 Subject: [PATCH 016/295] Add is_external to next-step component link. --- components/02-molecules/next-step/next-step.twig | 1 + 1 file changed, 1 insertion(+) diff --git a/components/02-molecules/next-step/next-step.twig b/components/02-molecules/next-step/next-step.twig index 8eec31b..7ecf7ad 100644 --- a/components/02-molecules/next-step/next-step.twig +++ b/components/02-molecules/next-step/next-step.twig @@ -51,6 +51,7 @@ url: link.url, icon: 'right-arrow-2', is_new_window: link.is_new_window, + is_external: link.is_external, modifier_class: 'ct-next-step__title__link', } only %} {% else %} From 2b65e7a36dae6ca0a343abc76a7f7129ec772a74 Mon Sep 17 00:00:00 2001 From: Richard Gaunt Date: Mon, 4 Mar 2024 22:33:49 +1100 Subject: [PATCH 017/295] Update slide link object doc and added is_external property. --- components/03-organisms/slider/slide.twig | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/components/03-organisms/slider/slide.twig b/components/03-organisms/slider/slide.twig index ef8a1a7..4f78e83 100644 --- a/components/03-organisms/slider/slide.twig +++ b/components/03-organisms/slider/slide.twig @@ -16,7 +16,11 @@ * - date_end: [string] Optional end date and time. * - date_end_iso: [string] Optional end date and time in ISO format. * - content: [string] Content text. - * - links: [array] Links. + * - links: [array] Array of link objects with the properties: + * - text: [string] Text. + * - url: [string] URL. + * - is_new_window: [boolean] Open link in a new window. + * - is_external: [boolean] Link is external or not. * - content_bottom: [string] Content slot. * - theme: [string] Theme: light, dark. * - attributes: [string] Additional attributes. @@ -114,6 +118,7 @@ type: loop.index == 1 ? 'primary' : 'secondary', text: link.text, url: link.url, + is_external: link.is_external, is_new_window: link.is_new_window, modifier_class: 'ct-slide__links__link', } only %} From b9e397918a218b20a0ccb6275db21c25756a4459 Mon Sep 17 00:00:00 2001 From: Joshua Fernandes <“joshua.1234511@yahoo.in”> Date: Wed, 6 Mar 2024 11:48:20 +0530 Subject: [PATCH 018/295] [3422805] Fixed navigation menu when 'Dropdown type; is set to 'None'. --- components/00-base/_variables.components.scss | 24 ++++++ .../03-organisms/navigation/navigation.scss | 73 +++++++++++++++++-- .../03-organisms/navigation/navigation.twig | 7 ++ 3 files changed, 98 insertions(+), 6 deletions(-) diff --git a/components/00-base/_variables.components.scss b/components/00-base/_variables.components.scss index f2a5975..fb33d09 100644 --- a/components/00-base/_variables.components.scss +++ b/components/00-base/_variables.components.scss @@ -965,6 +965,18 @@ $ct-navigation-drawer-top-offset: ct-spacing(2) !default; $ct-navigation-drawer-column-gutter: ct-spacing(4) !default; // Colors. +$ct-navigation-light-menu-border-color: ct-color-light('interaction-background') !default; +$ct-navigation-light-menu-color: ct-color-light('interaction-background') !default; +$ct-navigation-light-menu-hover-color: ct-color-light('interaction-hover-background') !default; +$ct-navigation-light-menu-active-color: ct-color-light('interaction-hover-background') !default; +$ct-navigation-light-menu-item-background-color: transparent !default; +$ct-navigation-light-menu-item-border-color: transparent !default; +$ct-navigation-light-menu-item-hover-background-color: transparent !default; +$ct-navigation-light-menu-item-hover-border-color: ct-color-light('interaction-hover-background') !default; +$ct-navigation-light-menu-item-active-background-color: transparent !default; +$ct-navigation-light-menu-item-active-border-color: ct-color-light('highlight') !default; +$ct-navigation-light-menu-item-active-trail-background-color: ct-color-light('interaction-background') !default; +$ct-navigation-light-menu-item-active-trail-color: ct-color-light('background') !default; $ct-navigation-light-drawer-border-color: ct-color-light('interaction-background') !default; $ct-navigation-light-drawer-color: ct-color-light('interaction-background') !default; $ct-navigation-light-drawer-hover-color: ct-color-light('interaction-hover-background') !default; @@ -987,6 +999,18 @@ $ct-navigation-light-drawer-sub-menu-item-hover-background-color: ct-color-light $ct-navigation-light-drawer-sub-menu-item-hover-color: ct-color-light('interaction-hover-text') !default; $ct-navigation-light-drawer-sub-menu-item-active-background-color: ct-color-light('body') !default; $ct-navigation-light-drawer-sub-menu-item-active-color: ct-color-light('background') !default; +$ct-navigation-dark-menu-border-color: ct-color-dark('interaction-background') !default; +$ct-navigation-dark-menu-color: ct-color-dark('interaction-background') !default; +$ct-navigation-dark-menu-hover-color: ct-color-dark('interaction-hover-background') !default; +$ct-navigation-dark-menu-active-color: ct-color-dark('interaction-hover-background') !default; +$ct-navigation-dark-menu-item-background-color: transparent !default; +$ct-navigation-dark-menu-item-border-color: transparent !default; +$ct-navigation-dark-menu-item-hover-background-color: transparent !default; +$ct-navigation-dark-menu-item-hover-border-color: ct-color-dark('interaction-hover-background') !default; +$ct-navigation-dark-menu-item-active-background-color: transparent !default; +$ct-navigation-dark-menu-item-active-border-color: ct-color-dark('highlight') !default; +$ct-navigation-dark-menu-item-active-trail-background-color: ct-color-dark('interaction-background') !default; +$ct-navigation-dark-menu-item-active-trail-color: ct-color-dark('background') !default; $ct-navigation-dark-drawer-border-color: ct-color-dark('interaction-background') !default; $ct-navigation-dark-drawer-color: ct-color-dark('interaction-background') !default; $ct-navigation-dark-drawer-hover-color: ct-color-dark('interaction-hover-background') !default; diff --git a/components/03-organisms/navigation/navigation.scss b/components/03-organisms/navigation/navigation.scss index 264f85a..a223ca4 100644 --- a/components/03-organisms/navigation/navigation.scss +++ b/components/03-organisms/navigation/navigation.scss @@ -18,6 +18,14 @@ &#{$root}--none { #{$root}__items { + display: none; + align-items: center; + height: 100%; + + @include ct-breakpoint($ct-navigation-breakpoint) { + display: flex; + } + #{$root}__menu { &.ct-menu, .ct-menu { @@ -28,17 +36,70 @@ margin: 0; } - .ct-menu__sub-menu { - margin-top: ct-spacing(2); + // First-level items to be displayed inline. + &.ct-menu--level-0 { + display: flex; } .ct-menu__item { - margin-bottom: ct-spacing(2); - margin-left: ct-spacing(2); + // Links - level 0. + &--level-0 { + border-bottom: solid ct-particle(0.5); + + > .ct-link { + display: block; + padding: ct-spacing(2); + text-align: center; + + &::after { + right: ct-spacing(); + margin-top: -1 * ct-particle(0.25); + top: ct-spacing(2); + } + } + } } + } + } + + @include ct-component-theme($root) using($root, $theme) { + #{$root}__items { + .ct-menu__item { + // Links - level 0. + &--level-0 { + border-bottom-color: ct-component-var($root, $theme, menu-item, border-color); + + &:hover { + @include ct-component-property($root, $theme, menu-item, hover, background-color); + + border-bottom-color: ct-component-var($root, $theme, menu-item, hover, border-color); + } + + &:active { + @include ct-component-property($root, $theme, menu-item, active, background-color); - &.ct-menu > .ct-menu__item { - margin-left: 0; + border-bottom-color: ct-component-var($root, $theme, menu-item, active, border-color); + } + + &.ct-menu__item--active-trail { + border-bottom-color: ct-component-var($root, $theme, menu, border-color); + } + + > .ct-link { + @include ct-component-property($root, $theme, menu-item, background-color); + @include ct-component-property($root, $theme, menu, color); + + &:hover { + @include ct-component-property($root, $theme, menu-item, hover, background-color); + @include ct-component-property($root, $theme, menu, hover, color); + } + + &:active { + @include ct-component-property($root, $theme, menu-item, active, background-color); + @include ct-component-property($root, $theme, menu, active, color); + } + } + } } } } diff --git a/components/03-organisms/navigation/navigation.twig b/components/03-organisms/navigation/navigation.twig index e381d9f..5c547b2 100644 --- a/components/03-organisms/navigation/navigation.twig +++ b/components/03-organisms/navigation/navigation.twig @@ -46,6 +46,13 @@ {% endif %} {% endif %} {% endfor %} + {% else %} + {% for key in items|keys %} + {% if items[key].below %} + {% set items_without_below = items[key]|merge({ 'below': null }) %} + {% set items = items|merge({(key): items_without_below}) %} + {% endif %} + {% endfor %} {% endif %}
From 48af2166bab451a86295bf0d7dfefce7ddbe7edc Mon Sep 17 00:00:00 2001 From: Alex Skrypnyk Date: Thu, 7 Mar 2024 12:15:01 +1100 Subject: [PATCH 019/295] Update README.md --- README.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/README.md b/README.md index a17c567..e0a17a4 100644 --- a/README.md +++ b/README.md @@ -19,6 +19,7 @@

UI component library with Storybook integration

+

https://uikit.civictheme.io/

---- @@ -50,6 +51,10 @@ change. ## Maintenance +### Pre-release build + +All commits to `main` branch are built as a Storybook and automatically deployed to https://civictheme-uikit.netlify.app/ + ### Build assets npm run build From ce4b4031c21c164bad0e097232d63554c471608d Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Sun, 10 Mar 2024 06:39:09 +0000 Subject: [PATCH 020/295] Update nwtgck/actions-netlify action to v3 --- .github/workflows/test.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index 46d49cc..7daac65 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -27,7 +27,7 @@ jobs: - name: Deploy to Netlify if: matrix.node == 20 - uses: nwtgck/actions-netlify@v2.1 + uses: nwtgck/actions-netlify@v3.0 with: github-token: ${{ secrets.GITHUB_TOKEN }} publish-dir: './storybook-static' From 77d7b8adbf97203854af799928590f410cee9a1f Mon Sep 17 00:00:00 2001 From: Joshua Fernandes <83997348+joshua-salsadigital@users.noreply.github.com> Date: Tue, 12 Mar 2024 03:25:53 +0530 Subject: [PATCH 021/295] [ #97] Refactored Quote component to support citation. (#99) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Joshua Fernandes <“joshua.1234511@yahoo.in”> Co-authored-by: Alex Skrypnyk --- components/00-base/_variables.components.scss | 23 +++------- components/00-base/mixins/_content.scss | 33 +++++++++++++- .../basic-content/basic-content.stories.js | 3 +- components/02-molecules/quote/quote.scss | 40 ----------------- .../02-molecules/quote/quote.stories.js | 44 ------------------- components/02-molecules/quote/quote.twig | 31 ------------- 6 files changed, 39 insertions(+), 135 deletions(-) delete mode 100644 components/02-molecules/quote/quote.scss delete mode 100644 components/02-molecules/quote/quote.stories.js delete mode 100644 components/02-molecules/quote/quote.twig diff --git a/components/00-base/_variables.components.scss b/components/00-base/_variables.components.scss index fb33d09..379d2ca 100644 --- a/components/00-base/_variables.components.scss +++ b/components/00-base/_variables.components.scss @@ -469,8 +469,10 @@ $ct-basic-content-list-marker-width: ct-particle(3.5) !default; $ct-basic-content-space-horizontal: ct-spacing(7) !default; $ct-basic-content-vertical-spacing: 1.5rem !default; $ct-basic-content-light-base-color: ct-color-light('body') !default; -$ct-basic-content-light-blockquote-block: ct-color-light('body') !default; +$ct-basic-content-light-blockquote-stripe-background-color: ct-color-light('highlight') !default; $ct-basic-content-light-blockquote-color: ct-color-light('body') !default; +$ct-basic-content-light-blockquote-background-color: ct-color-light('background-light') !default; +$ct-basic-content-light-blockquote-author-color: ct-color-light('heading') !default; $ct-basic-content-light-heading-1-color: ct-color-light('heading') !default; $ct-basic-content-light-heading-2-color: ct-color-light('heading') !default; $ct-basic-content-light-heading-3-color: ct-color-light('heading') !default; @@ -483,8 +485,10 @@ $ct-basic-content-light-ul-li-color: ct-color-light('body') !default; $ct-basic-content-light-ul-li-marker-color: ct-color-light('body') !default; $ct-basic-content-light-background-color: ct-color-light('background') !default; $ct-basic-content-dark-base-color: ct-color-dark('body') !default; -$ct-basic-content-dark-blockquote-block: ct-color-dark('body') !default; +$ct-basic-content-dark-blockquote-stripe-background-color: ct-color-dark('highlight') !default; $ct-basic-content-dark-blockquote-color: ct-color-dark('body') !default; +$ct-basic-content-dark-blockquote-background-color: ct-color-dark('background-light') !default; +$ct-basic-content-dark-blockquote-author-color: ct-color-dark('heading') !default; $ct-basic-content-dark-heading-1-color: ct-color-dark('heading') !default; $ct-basic-content-dark-heading-2-color: ct-color-dark('heading') !default; $ct-basic-content-dark-heading-3-color: ct-color-dark('heading') !default; @@ -686,21 +690,6 @@ $ct-next-step-dark-background-color: ct-color-dark('background') !default; $ct-next-step-dark-border-color: ct-color-dark('border') !default; $ct-next-step-dark-stripe-background-color: ct-color-dark('highlight') !default; -// -// Quote. -// -$ct-quote-border-width: ct-particle(0.75) !default; -$ct-quote-light-background-color: ct-color-light('background-light') !default; -$ct-quote-light-border-color: ct-color-light('highlight') !default; -$ct-quote-light-body-color: ct-color-light('body') !default; -$ct-quote-light-author-color: ct-color-light('heading') !default; -$ct-quote-light-stripe-background-color: ct-color-light('highlight') !default; -$ct-quote-dark-background-color: ct-color-dark('background-light') !default; -$ct-quote-dark-border-color: ct-color-dark('highlight') !default; -$ct-quote-dark-body-color: ct-color-dark('body') !default; -$ct-quote-dark-author-color: ct-color-dark('heading') !default; -$ct-quote-dark-stripe-background-color: ct-color-dark('highlight') !default; - // // Table Of Contents. // diff --git a/components/00-base/mixins/_content.scss b/components/00-base/mixins/_content.scss index 615b4dd..6996b73 100644 --- a/components/00-base/mixins/_content.scss +++ b/components/00-base/mixins/_content.scss @@ -103,6 +103,7 @@ margin-top: $ct-basic-content-vertical-spacing; margin-bottom: $ct-basic-content-vertical-spacing; padding: ct-spacing(2) ct-spacing(3); + display: grid; &::before { content: ''; @@ -114,6 +115,24 @@ left: 0; border-radius: $ct-basic-content-blockquote-border-radius; } + + p { + @include ct-typography('quote'); + + margin-bottom: 0; + } + + cite { + @include ct-typography('label-small'); + + padding-top: ct-spacing(2); + font-style: normal; + + &::before { + content: '-'; + margin-right: ct-spacing(0.5); + } + } } ul { @@ -212,9 +231,14 @@ blockquote { color: $ct-basic-content-light-blockquote-color; + background-color: $ct-basic-content-light-blockquote-background-color; &::before { - background-color: $ct-basic-content-light-blockquote-block; + background-color: $ct-basic-content-light-blockquote-stripe-background-color; + } + + cite { + color: $ct-basic-content-light-blockquote-color; } } @@ -272,9 +296,14 @@ blockquote { color: $ct-basic-content-dark-blockquote-color; + background-color: $ct-basic-content-dark-blockquote-background-color; &::before { - background-color: $ct-basic-content-dark-blockquote-block; + background-color: $ct-basic-content-dark-blockquote-stripe-background-color; + } + + cite { + color: $ct-basic-content-dark-blockquote-color; } } diff --git a/components/02-molecules/basic-content/basic-content.stories.js b/components/02-molecules/basic-content/basic-content.stories.js index 9002723..fcb227e 100644 --- a/components/02-molecules/basic-content/basic-content.stories.js +++ b/components/02-molecules/basic-content/basic-content.stories.js @@ -85,7 +85,8 @@ export const BasicContent = (knobTab) => { // Blockquote. html += ` -
Culpa laboris sit fugiat minim ad commodo eu id sint eu sed nisi.
+
Culpa laboris sit fugiat minim ad commodo eu id sint eu sed nisi.
+
Culpa laboris sit fugiat minim ad commodo eu id sint eu sed nisi.Sed aute
`; // Lists. diff --git a/components/02-molecules/quote/quote.scss b/components/02-molecules/quote/quote.scss deleted file mode 100644 index 91a892a..0000000 --- a/components/02-molecules/quote/quote.scss +++ /dev/null @@ -1,40 +0,0 @@ -// -// CivicTheme Quote component. -// - -.ct-quote { - $root: &; - - @include ct-reset-box-model(); - @include ct-highlight-stripe-vertical($ct-quote-border-width, 0, 0); - - position: relative; - padding-left: ct-spacing(2); - - &__content { - @include ct-typography('quote'); - - margin-bottom: 0; - } - - &__author { - @include ct-typography('label-small'); - - padding: 0 ct-spacing(3) ct-spacing(3); - - &::before { - content: '-'; - margin-right: ct-spacing(0.5); - } - } - - @include ct-component-theme($root) using($root, $theme) { - @include ct-component-property($root, $theme, background-color); - @include ct-component-property($root, $theme, body, color); - @include ct-highlight-stripe-background-color(ct-component-var($root, $theme, stripe, background-color)); - - #{$root}__author { - @include ct-component-property($root, $theme, author, color); - } - } -} diff --git a/components/02-molecules/quote/quote.stories.js b/components/02-molecules/quote/quote.stories.js deleted file mode 100644 index f8fbef1..0000000 --- a/components/02-molecules/quote/quote.stories.js +++ /dev/null @@ -1,44 +0,0 @@ -import { radios, text } from '@storybook/addon-knobs'; -import CivicThemeQuote from './quote.twig'; - -export default { - title: 'Molecules/Quote', - parameters: { - layout: 'fullscreen', - }, -}; - -export const Quote = (knobTab) => { - const generalKnobTab = typeof knobTab === 'string' ? knobTab : 'General'; - - const generalKnobs = { - theme: radios( - 'Theme', - { - Light: 'light', - Dark: 'dark', - }, - 'light', - generalKnobTab, - ), - content: text('Content', 'Quote content', generalKnobTab), - author: text('Author', 'Quote author', generalKnobTab), - vertical_spacing: radios( - 'Vertical spacing', - { - None: 'none', - Top: 'top', - Bottom: 'bottom', - Both: 'both', - }, - 'none', - generalKnobTab, - ), - attributes: text('Additional attributes', '', generalKnobTab), - modifier_class: text('Additional classes', '', generalKnobTab), - }; - - return CivicThemeQuote({ - ...generalKnobs, - }); -}; diff --git a/components/02-molecules/quote/quote.twig b/components/02-molecules/quote/quote.twig deleted file mode 100644 index ec3c98a..0000000 --- a/components/02-molecules/quote/quote.twig +++ /dev/null @@ -1,31 +0,0 @@ -{# -/** - * @file - * Quote component. - * - * Variables: - * - content: [string] Content. - * - author: [string] Author. - * - theme: [string] Theme: light, dark. - * - vertical_spacing: [string] With top, bottom or both vertical spaces. - * - attributes: [string] Additional attributes. - * - modifier_class: [string] Additional classes. - */ -#} - -{% set theme_class = 'ct-theme-%s'|format(theme|default('light')) %} -{% set vertical_spacing_class = vertical_spacing in ['top', 'bottom', 'both'] ? 'ct-vertical-spacing--%s'|format(vertical_spacing) : '' %} -{% set modifier_class = '%s %s %s'|format(theme_class, vertical_spacing_class, modifier_class|default('')) %} - -{% if content is not empty %} -
-
- {{ content }} -
- {%- if author %} -
- {{ author }} -
- {% endif -%} -
-{% endif %} From 3da32efb6ad93df60cabbd608a78b60143c43dea Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Tue, 12 Mar 2024 00:42:24 +0000 Subject: [PATCH 022/295] Update dependency @storybook/test-runner to ^0.17.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index cb73ec1..2879019 100644 --- a/package.json +++ b/package.json @@ -49,7 +49,7 @@ "@storybook/addon-links": "^6.3.8", "@storybook/addons": "^6.1.18", "@storybook/html": "^6.3.8", - "@storybook/test-runner": "^0.16.0", + "@storybook/test-runner": "^0.17.0", "@whitespace/storybook-addon-html": "^5.1.6", "addon-screen-reader": "^1.8.6", "babel-loader": "^8.2.2", From fcbf6bbfa3fd32d321b3840cd8f78f2016dd23ab Mon Sep 17 00:00:00 2001 From: Alex Skrypnyk Date: Wed, 13 Mar 2024 03:12:51 +1100 Subject: [PATCH 023/295] Fixed background not applying to navigation of type 'dropdown'. --- components/03-organisms/navigation/navigation.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/03-organisms/navigation/navigation.scss b/components/03-organisms/navigation/navigation.scss index a223ca4..84e51c4 100644 --- a/components/03-organisms/navigation/navigation.scss +++ b/components/03-organisms/navigation/navigation.scss @@ -501,7 +501,7 @@ } .ct-menu__sub-menu__wrapper--level-1 { - @include ct-component-property($root, dropdown-sub-menu, background-color); + @include ct-component-property($root, $theme, dropdown-sub-menu, background-color); } } } From 3481f690a660724b4e8cde60d85bc33c23b9610f Mon Sep 17 00:00:00 2001 From: Joshua Fernandes <83997348+joshua-salsadigital@users.noreply.github.com> Date: Thu, 14 Mar 2024 09:26:21 +0530 Subject: [PATCH 024/295] [#100] Fixed duplicated 'main-content' element is printed on the page. (#98) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Joshua Fernandes <“joshua.1234511@yahoo.in”> --- components/00-base/layout/layout.twig | 1 - components/03-organisms/banner/banner.twig | 2 ++ components/04-templates/page/page.twig | 1 - 3 files changed, 2 insertions(+), 2 deletions(-) diff --git a/components/00-base/layout/layout.twig b/components/00-base/layout/layout.twig index 3f4f4b0..69f193c 100644 --- a/components/00-base/layout/layout.twig +++ b/components/00-base/layout/layout.twig @@ -41,7 +41,6 @@ {% if content or sidebar %}
- {% block content_top %} {% if content_top is not empty %} diff --git a/components/03-organisms/banner/banner.twig b/components/03-organisms/banner/banner.twig index 754f098..6836f08 100644 --- a/components/03-organisms/banner/banner.twig +++ b/components/03-organisms/banner/banner.twig @@ -92,6 +92,8 @@
{% endif %} + + {% if site_section is not empty %}
{%- block site_section %} diff --git a/components/04-templates/page/page.twig b/components/04-templates/page/page.twig index 505a5e1..004cde0 100644 --- a/components/04-templates/page/page.twig +++ b/components/04-templates/page/page.twig @@ -49,7 +49,6 @@ {% endblock %} {% endif %} - {% block content %} {% include '@base/layout/layout.twig' with { content: content, From e4dc96f2f250e638dd9dda5e91d8fee4f81ab615 Mon Sep 17 00:00:00 2001 From: Alex Skrypnyk Date: Thu, 14 Mar 2024 15:26:56 +1100 Subject: [PATCH 025/295] Updated renovate config to not update Storybook. --- renovate.json | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/renovate.json b/renovate.json index 27da12f..82837aa 100644 --- a/renovate.json +++ b/renovate.json @@ -4,5 +4,11 @@ "dependencyDashboard": true, "extends": [ "config:base" + ], + "packageRules": [ + { + "packagePatterns": ["^@storybook/"], + "enabled": false + } ] } From 7e19c3321fa30275afe48aeb946d59f13297588c Mon Sep 17 00:00:00 2001 From: Joshua Fernandes <83997348+joshua-salsadigital@users.noreply.github.com> Date: Fri, 15 Mar 2024 05:46:15 +0530 Subject: [PATCH 026/295] [#47] Fixed the presentation of descendant list items within mixed lists. (#110) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Joshua Fernandes <“joshua.1234511@yahoo.in”> --- components/00-base/mixins/_content.scss | 12 ++++----- .../basic-content/basic-content.stories.js | 26 +++++++++++++++++++ 2 files changed, 32 insertions(+), 6 deletions(-) diff --git a/components/00-base/mixins/_content.scss b/components/00-base/mixins/_content.scss index 6996b73..850cc74 100644 --- a/components/00-base/mixins/_content.scss +++ b/components/00-base/mixins/_content.scss @@ -141,7 +141,7 @@ padding: 0; list-style: none; - li { + >li { position: relative; padding-left: $ct-basic-content-list-marker-width + $ct-basic-content-list-marker-margin; @@ -165,7 +165,7 @@ padding: 0; list-style: none; - li { + >li { counter-increment: ordered_counter; padding-left: $ct-basic-content-list-marker-width + $ct-basic-content-list-marker-margin; @@ -243,7 +243,7 @@ } ul { - li { + >li { color: $ct-basic-content-light-ul-li-color; &::before { @@ -253,7 +253,7 @@ } ol { - li { + >li { color: $ct-basic-content-light-ol-li-color; &::before { @@ -308,7 +308,7 @@ } ul { - li { + >li { color: $ct-basic-content-dark-ul-li-color; &::before { @@ -318,7 +318,7 @@ } ol { - li { + >li { color: $ct-basic-content-dark-ol-li-color; &::before { diff --git a/components/02-molecules/basic-content/basic-content.stories.js b/components/02-molecules/basic-content/basic-content.stories.js index fcb227e..35b9033 100644 --- a/components/02-molecules/basic-content/basic-content.stories.js +++ b/components/02-molecules/basic-content/basic-content.stories.js @@ -101,6 +101,32 @@ export const BasicContent = (knobTab) => {
  • Dolore ea cillum culpa nulla.
  • Lorem ipsum ex excepteur.
  • +

    Number list with bullet children

    +
      +
    1. Number
    2. +
    3. Number
    4. +
    5. Number +
        +
      • Bullet
      • +
      • Bullet
      • +
      +
    6. +
    7. Number
    8. +
    9. Number
    10. +
    +

    Bullet list with number children

    +
      +
    • Bullet
    • +
    • Bullet +
        +
      1. Number
      2. +
      3. Number
      4. +
      +
    • +
    • Bullet
    • +
    • Bullet
    • +
    • Bullet
    • +
    `; // Image. From 6431820fe2db1ead993d2dcd517c70ec04c4af54 Mon Sep 17 00:00:00 2001 From: Joshua Fernandes <83997348+joshua-salsadigital@users.noreply.github.com> Date: Fri, 15 Mar 2024 06:00:07 +0530 Subject: [PATCH 027/295] [#62] Fixed closing of the descendant item with a keyboard collapsing ancestor items in Side Navigation component. (#111) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Joshua Fernandes <“joshua.1234511@yahoo.in”> --- components/00-base/collapsible/collapsible.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/00-base/collapsible/collapsible.js b/components/00-base/collapsible/collapsible.js index 101d12a..cd7d1df 100644 --- a/components/00-base/collapsible/collapsible.js +++ b/components/00-base/collapsible/collapsible.js @@ -255,7 +255,7 @@ CivicThemeCollapsible.prototype.collapse = function (animate, evt) { } if (evt && evt.target) { - if (evt.currentTarget !== t.el) { + if (evt.currentTarget !== t.el || evt.target !== t.el) { return; } } From 8909fa9e0db0e5df01a2b4a1c2b322c146470af4 Mon Sep 17 00:00:00 2001 From: Alex Skrypnyk Date: Fri, 15 Mar 2024 12:21:21 +1100 Subject: [PATCH 028/295] Revert "[#83] Updated storybook to show HTML source. (#87)" This reverts commit 92c0b2c310441ae627ce6dce56e20aeeea0f9e1b. # Conflicts: # package.json --- .storybook/addon-config.js | 1 - .storybook/preview.js | 7 ------- package.json | 8 ++------ ...hitespace+storybook-addon-html+5.1.6.patch | 19 ------------------- 4 files changed, 2 insertions(+), 33 deletions(-) delete mode 100644 patches/@whitespace+storybook-addon-html+5.1.6.patch diff --git a/.storybook/addon-config.js b/.storybook/addon-config.js index c7dd405..f08d91e 100644 --- a/.storybook/addon-config.js +++ b/.storybook/addon-config.js @@ -11,7 +11,6 @@ exports.default = function () { }, }, '@storybook/addon-links', - '@whitespace/storybook-addon-html', ]; // Html and pseudo knobs. diff --git a/.storybook/preview.js b/.storybook/preview.js index d748f88..507f7bd 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -90,11 +90,4 @@ export const parameters = { }, }, }, - html: { - prettier: { - tabWidth: 4, - useTabs: false, - htmlWhitespaceSensitivity: 'strict', - }, - }, }; diff --git a/package.json b/package.json index 2879019..c8a0489 100644 --- a/package.json +++ b/package.json @@ -27,8 +27,7 @@ "dist:dev": "export NODE_OPTIONS=--openssl-legacy-provider && webpack --config ./webpack/webpack.dev.js", "test": "npm run test-storybook:ci", "test-storybook": "test-storybook", - "test-storybook:ci": "concurrently --kill-others --success first --names \"SB,TEST\" --prefix-colors \"magenta,blue\" \"npx http-server storybook-static --port 6006 -a 127.0.0.1 --silent\" \"wait-on --timeout 10000 http://127.0.0.1:6006 && npm run test-storybook\"", - "postinstall": "npx patch-package" + "test-storybook:ci": "concurrently --kill-others --success first --names \"SB,TEST\" --prefix-colors \"magenta,blue\" \"npx http-server storybook-static --port 6006 -a 127.0.0.1 --silent\" \"wait-on --timeout 10000 http://127.0.0.1:6006 && npm run test-storybook\"" }, "engines": { "node": ">=18.14" @@ -49,8 +48,7 @@ "@storybook/addon-links": "^6.3.8", "@storybook/addons": "^6.1.18", "@storybook/html": "^6.3.8", - "@storybook/test-runner": "^0.17.0", - "@whitespace/storybook-addon-html": "^5.1.6", + "@storybook/test-runner": "^0.16.0", "addon-screen-reader": "^1.8.6", "babel-loader": "^8.2.2", "babel-plugin-syntax-dynamic-import": "^6.18.0", @@ -72,10 +70,8 @@ "lorem-ipsum": "^2.0.4", "mini-css-extract-plugin": "^1.6.2", "node-sass-magic-importer": "^5.3.2", - "prettier": "^2.8.8", "react": "^17", "react-dom": "^17", - "react-syntax-highlighter": "^15.5.0", "sass": "^1.41.0", "sass-loader": "^10.2.0", "semver": "^7.3.8", diff --git a/patches/@whitespace+storybook-addon-html+5.1.6.patch b/patches/@whitespace+storybook-addon-html+5.1.6.patch deleted file mode 100644 index feedfd4..0000000 --- a/patches/@whitespace+storybook-addon-html+5.1.6.patch +++ /dev/null @@ -1,19 +0,0 @@ -diff --git a/node_modules/@whitespace/storybook-addon-html/preset.js b/node_modules/@whitespace/storybook-addon-html/preset.js -index aca6ca4..f23183d 100644 ---- a/node_modules/@whitespace/storybook-addon-html/preset.js -+++ b/node_modules/@whitespace/storybook-addon-html/preset.js -@@ -1,7 +1,3 @@ --function config(entry = []) { -- return [...entry, require.resolve("./dist/esm/preset/preview")]; --} -- - function managerEntries(entry = []) { - return [...entry, require.resolve("./dist/esm/preset/manager")]; - } -@@ -12,6 +8,5 @@ function previewAnnotations(entry = []) { - - module.exports = { - managerEntries, -- config, - previewAnnotations, - }; From b3f22a2c2619207f1b699591cc0125364b59cb8a Mon Sep 17 00:00:00 2001 From: Joshua Fernandes <83997348+joshua-salsadigital@users.noreply.github.com> Date: Fri, 15 Mar 2024 16:50:17 +0530 Subject: [PATCH 029/295] [#62] Fix "up" key does not close open menu/accordion. (#114) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Joshua Fernandes <“joshua.1234511@yahoo.in”> --- components/00-base/collapsible/collapsible.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/components/00-base/collapsible/collapsible.js b/components/00-base/collapsible/collapsible.js index cd7d1df..27d2a7f 100644 --- a/components/00-base/collapsible/collapsible.js +++ b/components/00-base/collapsible/collapsible.js @@ -201,7 +201,7 @@ CivicThemeCollapsible.prototype.keydownEvent = function (e) { if (this !== document) { // Up. if (e.which === 38 && !e.shiftKey) { - this.dispatchEvent(new CustomEvent('ct.collapsible.collapse', { bubbles: true, detail: { animate: true } })); + this.dispatchEvent(new CustomEvent('ct.collapsible.collapse', { bubbles: true, detail: { animate: true, keydown: true } })); return; } @@ -255,7 +255,11 @@ CivicThemeCollapsible.prototype.collapse = function (animate, evt) { } if (evt && evt.target) { - if (evt.currentTarget !== t.el || evt.target !== t.el) { + if (evt.detail.keydown) { + if (evt.target.closest('[data-collapsible="true"]') !== t.el) { + return; + } + } else if (evt.currentTarget !== t.el || evt.target !== t.el) { return; } } From 905dd99100ecb68beb6479e2fcaca8844a20d147 Mon Sep 17 00:00:00 2001 From: Joshua Fernandes <83997348+joshua-salsadigital@users.noreply.github.com> Date: Mon, 18 Mar 2024 14:32:21 +0530 Subject: [PATCH 030/295] Refactored Navigation component to use `type` instead of `dropdown` prop. (#113) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Joshua Fernandes <“joshua.1234511@yahoo.in”> --- components/00-base/_variables.components.scss | 4 + components/00-base/collapsible/collapsible.js | 4 +- components/03-organisms/header/header.scss | 138 +++++++++++- .../03-organisms/header/header.stories.twig | 4 +- .../03-organisms/navigation/navigation.scss | 200 +++--------------- .../navigation/navigation.stories.js | 5 +- .../03-organisms/navigation/navigation.twig | 8 +- 7 files changed, 186 insertions(+), 177 deletions(-) diff --git a/components/00-base/_variables.components.scss b/components/00-base/_variables.components.scss index 379d2ca..2cc3a4f 100644 --- a/components/00-base/_variables.components.scss +++ b/components/00-base/_variables.components.scss @@ -930,6 +930,10 @@ $ct-message-dark-warning-icon-color: $ct-message-dark-warning-color !default; // // Navigation can be rendered in 3 ways: plain, with dropdown and with drawer. +// Inline. +$ct-navigation-inline-column-gutter: $ct-item-list-horizontal-regular-column-gap !default; +$ct-navigation-inline-row-gutter: $ct-item-list-horizontal-regular-column-gap !default; + // Dropdown. $ct-navigation-dropdown-zindex: 11 !default; $ct-navigation-dropdown-border-radius: $ct-border-radius !default; diff --git a/components/00-base/collapsible/collapsible.js b/components/00-base/collapsible/collapsible.js index 27d2a7f..5adee97 100644 --- a/components/00-base/collapsible/collapsible.js +++ b/components/00-base/collapsible/collapsible.js @@ -226,7 +226,7 @@ CivicThemeCollapsible.prototype.closeGroup = function (group) { // eslint-disable-next-line prefer-template document.querySelectorAll('[data-collapsible-group=' + group + ']:not([data-collapsible-collapsed])').forEach((el) => { if (el !== currentEl) { - el.dispatchEvent(new CustomEvent('ct.collapsible.collapse', { bubbles: true })); + el.dispatchEvent(new CustomEvent('ct.collapsible.collapse', { bubbles: true, detail: { closeGroup: true } })); } }); } @@ -255,7 +255,7 @@ CivicThemeCollapsible.prototype.collapse = function (animate, evt) { } if (evt && evt.target) { - if (evt.detail.keydown) { + if (evt.detail.keydown && !evt.detail.closeGroup) { if (evt.target.closest('[data-collapsible="true"]') !== t.el) { return; } diff --git a/components/03-organisms/header/header.scss b/components/03-organisms/header/header.scss index 864f15c..30d4ccc 100644 --- a/components/03-organisms/header/header.scss +++ b/components/03-organisms/header/header.scss @@ -5,10 +5,38 @@ .ct-header { $root: &; - &__content-top2, + &__content-top2 { + margin-top: ct-spacing(); + margin-bottom: ct-spacing(); + } + &__content-top3 { margin-top: ct-spacing(); margin-bottom: ct-spacing(); + + .ct-navigation { + $root-dropdown: '.ct-navigation'; + &#{$root-dropdown}--dropdown { + #{$root-dropdown}__items { + #{$root-dropdown}__menu { + .ct-menu__item { + // Links - level 0. + &--level-0 { + margin-right: ct-spacing(2); + + &:last-child { + margin-right: 0; + } + + > .ct-link { + text-align: center; + } + } + } + } + } + } + } } &__middle { @@ -34,6 +62,114 @@ display: flex; justify-content: flex-end; } + + .ct-navigation { + $root-drawer: '.ct-navigation'; + + &#{$root-drawer}--drawer { + #{$root-drawer}__items { + #{$root-drawer}__menu { + .ct-menu__item { + // Links - level 0. + &--level-0 { + border-bottom: solid ct-particle(0.5); + + > .ct-link { + display: block; + padding: ct-spacing(2); + text-align: center; + + &::after { + right: ct-spacing(); + margin-top: -1 * ct-particle(0.25); + top: ct-spacing(2); + } + } + } + } + } + } + + @include ct-component-theme($root-drawer) using($root-drawer, $theme) { + #{$root-drawer}__items { + #{$root-drawer}__menu { + .ct-menu__item { + // Links - level 0. + &--level-0 { + border-bottom-color: ct-component-var($root-drawer, $theme, drawer-menu-item, border-color); + + &:hover { + @include ct-component-property($root-drawer, $theme, drawer-menu-item, hover, background-color); + + border-bottom-color: ct-component-var($root-drawer, $theme, drawer-menu-item, hover, border-color); + } + + &:active { + @include ct-component-property($root-drawer, $theme, drawer-menu-item, active, background-color); + + border-bottom-color: ct-component-var($root-drawer, $theme, drawer-menu-item, active, border-color); + } + + &[data-collapsible] { + @if $theme == 'light' { + color: $ct-navigation-light-drawer-color; + } + @else { + color: $ct-navigation-dark-drawer-color; + } + + border-bottom-color: ct-component-var($root-drawer, $theme, drawer, border-color); + + &:hover { + @if $theme == 'light' { + color: $ct-navigation-light-drawer-hover-color; + } + @else { + color: $ct-navigation-dark-drawer-hover-color; + } + + @include ct-component-property($root-drawer, $theme, drawer-menu-item, hover, background-color); + + border-bottom-color: ct-component-var($root-drawer, $theme, drawer-menu-item, hover, border-color); + } + + &:active { + @include ct-component-property($root-drawer, $theme, drawer-menu-item, active, background-color); + + border-bottom-color: ct-component-var($root-drawer, $theme, drawer-menu-item, active, border-color); + } + } + + &[data-collapsible-collapsed] { + border-bottom-color: ct-component-var($root-drawer, $theme, drawer-menu-item, border-color); + } + + &.ct-menu__item--active-trail { + border-bottom-color: ct-component-var($root-drawer, $theme, drawer, border-color); + } + + > .ct-link { + @include ct-component-property($root-drawer, $theme, drawer-menu-item, background-color); + @include ct-component-property($root-drawer, $theme, drawer, color); + + &:hover { + @include ct-component-property($root-drawer, $theme, drawer-menu-item, hover, background-color); + @include ct-component-property($root-drawer, $theme, drawer, hover, color); + } + + &[aria-expanded='true'], + &:active { + @include ct-component-property($root-drawer, $theme, drawer-menu-item, active, background-color); + @include ct-component-property($root-drawer, $theme, drawer, active, color); + } + } + } + } + } + } + } + } + } } .ct-mobile-navigation-trigger { diff --git a/components/03-organisms/header/header.stories.twig b/components/03-organisms/header/header.stories.twig index 7b20e7e..f8ba26f 100644 --- a/components/03-organisms/header/header.stories.twig +++ b/components/03-organisms/header/header.stories.twig @@ -21,7 +21,7 @@ {% include '@organisms/navigation/navigation.twig' with { theme: theme, items: secondary_navigation_items, - dropdown: 'dropdown', + type: 'dropdown', modifier_class: 'ct-justify-content-end', } only %} {% endset %} @@ -39,7 +39,7 @@ {% include '@organisms/navigation/navigation.twig' with { theme: theme, items: primary_navigation_items, - dropdown: 'drawer', + type: 'drawer', dropdown_columns: primary_navigation_dropdown_columns, dropdown_columns_fill: primary_navigation_dropdown_columns_fill, modifier_class: 'ct-justify-content-end', diff --git a/components/03-organisms/navigation/navigation.scss b/components/03-organisms/navigation/navigation.scss index 84e51c4..0897ee8 100644 --- a/components/03-organisms/navigation/navigation.scss +++ b/components/03-organisms/navigation/navigation.scss @@ -18,14 +18,6 @@ &#{$root}--none { #{$root}__items { - display: none; - align-items: center; - height: 100%; - - @include ct-breakpoint($ct-navigation-breakpoint) { - display: flex; - } - #{$root}__menu { &.ct-menu, .ct-menu { @@ -36,70 +28,53 @@ margin: 0; } - // First-level items to be displayed inline. - &.ct-menu--level-0 { - display: flex; + .ct-menu__sub-menu { + margin-top: ct-spacing(2); } .ct-menu__item { - // Links - level 0. - &--level-0 { - border-bottom: solid ct-particle(0.5); + margin-bottom: ct-spacing(2); + margin-left: ct-spacing(2); + } - > .ct-link { - display: block; - padding: ct-spacing(2); - text-align: center; - - &::after { - right: ct-spacing(); - margin-top: -1 * ct-particle(0.25); - top: ct-spacing(2); - } - } - } + &.ct-menu > .ct-menu__item { + margin-left: 0; } } } + } - @include ct-component-theme($root) using($root, $theme) { - #{$root}__items { - .ct-menu__item { - // Links - level 0. - &--level-0 { - border-bottom-color: ct-component-var($root, $theme, menu-item, border-color); - - &:hover { - @include ct-component-property($root, $theme, menu-item, hover, background-color); - - border-bottom-color: ct-component-var($root, $theme, menu-item, hover, border-color); - } - - &:active { - @include ct-component-property($root, $theme, menu-item, active, background-color); + &#{$root}--inline { + #{$root}__items { + #{$root}__menu { + // First-level items to be displayed inline. + &.ct-menu--level-0 { + display: flex; + column-gap: $ct-navigation-inline-column-gutter; + row-gap: $ct-navigation-inline-row-gutter; + flex-wrap: wrap; + } - border-bottom-color: ct-component-var($root, $theme, menu-item, active, border-color); - } + &.ct-menu, + .ct-menu { + @include ct-print-hide(); - &.ct-menu__item--active-trail { - border-bottom-color: ct-component-var($root, $theme, menu, border-color); - } + list-style: none; + padding: 0; + margin: 0; + } - > .ct-link { - @include ct-component-property($root, $theme, menu-item, background-color); - @include ct-component-property($root, $theme, menu, color); + .ct-menu__sub-menu { + margin-top: ct-spacing(2); + } - &:hover { - @include ct-component-property($root, $theme, menu-item, hover, background-color); - @include ct-component-property($root, $theme, menu, hover, color); - } + .ct-menu__item { + margin-bottom: ct-spacing(2); + margin-left: ct-spacing(2); + } - &:active { - @include ct-component-property($root, $theme, menu-item, active, background-color); - @include ct-component-property($root, $theme, menu, active, color); - } - } - } + &.ct-menu > .ct-menu__item { + margin-left: 0; } } } @@ -130,25 +105,6 @@ // First-level items to be displayed inline. display: flex; } - - .ct-menu__item { - // Links - level 0. - &--level-0 { - border-bottom: solid ct-particle(0.5); - - > .ct-link { - display: block; - padding: ct-spacing(2); - text-align: center; - - &::after { - right: ct-spacing(); - margin-top: -1 * ct-particle(0.25); - top: ct-spacing(2); - } - } - } - } } // Menu item with dropdown. @@ -271,81 +227,6 @@ @include ct-component-theme($root) using($root, $theme) { #{$root}__items { - #{$root}__menu { - .ct-menu__item { - // Links - level 0. - &--level-0 { - border-bottom-color: ct-component-var($root, $theme, drawer-menu-item, border-color); - - &:hover { - @include ct-component-property($root, $theme, drawer-menu-item, hover, background-color); - - border-bottom-color: ct-component-var($root, $theme, drawer-menu-item, hover, border-color); - } - - &:active { - @include ct-component-property($root, $theme, drawer-menu-item, active, background-color); - - border-bottom-color: ct-component-var($root, $theme, drawer-menu-item, active, border-color); - } - - &[data-collapsible] { - @if $theme == 'light' { - color: $ct-navigation-light-drawer-color; - } - @else { - color: $ct-navigation-dark-drawer-color; - } - - border-bottom-color: ct-component-var($root, $theme, drawer, border-color); - - &:hover { - @if $theme == 'light' { - color: $ct-navigation-light-drawer-hover-color; - } - @else { - color: $ct-navigation-dark-drawer-hover-color; - } - - @include ct-component-property($root, $theme, drawer-menu-item, hover, background-color); - - border-bottom-color: ct-component-var($root, $theme, drawer-menu-item, hover, border-color); - } - - &:active { - @include ct-component-property($root, $theme, drawer-menu-item, active, background-color); - - border-bottom-color: ct-component-var($root, $theme, drawer-menu-item, active, border-color); - } - } - - &[data-collapsible-collapsed] { - border-bottom-color: ct-component-var($root, $theme, drawer-menu-item, border-color); - } - - &.ct-menu__item--active-trail { - border-bottom-color: ct-component-var($root, $theme, drawer, border-color); - } - - > .ct-link { - @include ct-component-property($root, $theme, drawer-menu-item, background-color); - @include ct-component-property($root, $theme, drawer, color); - - &:hover { - @include ct-component-property($root, $theme, drawer-menu-item, hover, background-color); - @include ct-component-property($root, $theme, drawer, hover, color); - } - - &[aria-expanded='true'], - &:active { - @include ct-component-property($root, $theme, drawer-menu-item, active, background-color); - @include ct-component-property($root, $theme, drawer, active, color); - } - } - } - } - } - #{$root}__has-dropdown { .ct-menu__sub-menu__wrapper--level-1 { @include ct-component-property($root, $theme, drawer-sub-menu, background-color); @@ -436,19 +317,6 @@ display: block; } - // Links - level 0. - &--level-0 { - margin-right: ct-spacing(2); - - &:last-child { - margin-right: 0; - } - - > .ct-link { - text-align: center; - } - } - > .ct-link { &::after { right: ct-spacing(); diff --git a/components/03-organisms/navigation/navigation.stories.js b/components/03-organisms/navigation/navigation.stories.js index dbd1cb2..c71c5b8 100644 --- a/components/03-organisms/navigation/navigation.stories.js +++ b/components/03-organisms/navigation/navigation.stories.js @@ -24,10 +24,11 @@ export const Navigation = (knobTab) => { generalKnobTab, ), title: text('Title', 'Navigation title', generalKnobTab), - dropdown: radios( - 'Dropdown', + type: radios( + 'Type', { None: 'none', + Inline: 'inline', Dropdown: 'dropdown', Drawer: 'drawer', }, diff --git a/components/03-organisms/navigation/navigation.twig b/components/03-organisms/navigation/navigation.twig index 5c547b2..996afb0 100644 --- a/components/03-organisms/navigation/navigation.twig +++ b/components/03-organisms/navigation/navigation.twig @@ -7,7 +7,7 @@ * - theme: [string] Theme: light, dark. * - items: [array] Array of menu items. * - title: [string] Navigation title. - * - dropdown: [string] One of: none, dropdown, drawer. + * - type: [string] One of: none, inline, dropdown, drawer. * - dropdown_columns: [integer] Number of columns in the dropdown drawer. * - dropdown_columns_fill: [bollean] Fill columns. * - is_animated: [bollean] Use animation for transitions. @@ -18,18 +18,18 @@ #} {% set menu_id = menu_id|default('navigation') %} -{% set dropdown_class = 'ct-navigation--%s'|format(dropdown|default('none')) %} +{% set dropdown_class = 'ct-navigation--%s'|format(type|default('none')) %} {% set theme_class = 'ct-theme-%s'|format(theme|default('light')) %} {% set modifier_class = '%s %s %s'|format(theme_class, dropdown_class, modifier_class|default('')) %} {% if items is not empty %} - {% if dropdown in ['dropdown', 'drawer'] %} + {% if type in ['dropdown', 'drawer'] %} {% for key in items|keys %} {% if items[key].below %} {# Item attributes to convert them into a collapsible element. #} {% set item_attributes = 'data-collapsible data-collapsible-collapsed data-collapsible-group=' ~ menu_id ~ ' ' ~ (is_animated ? 'data-collapsible-duration=250' : 'data-collapsible-duration=0') %} - {% if dropdown == 'drawer' %} + {% if type == 'drawer' %} {# Item classes to style dynamically. #} {% set item_dropdown_columns_class = dropdown_columns ? 'ct-navigation__dropdown-columns--%s'|format(dropdown_columns) : '' %} {% set item_dropdown_columns_fill_class = dropdown_columns_fill ? 'ct-navigation__dropdown-columns--fill' : '' %} From 214119e27a426457ec8cd858546b9f0db13cc4db Mon Sep 17 00:00:00 2001 From: GitHub Actions release workflow <378794+github-actions[bot]@users.noreply.github.com> Date: Mon, 18 Mar 2024 21:23:13 +0000 Subject: [PATCH 031/295] Released version v1.7.3. --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index c8a0489..2985f19 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@civictheme/uikit", - "version": "1.7.2", + "version": "1.7.3", "license": "GPL-2.0-or-later", "description": "CivicTheme UI Kit with Storybook integration", "keywords": [ From 618d63e58054fb0b54c3c9649df8fe8bb3088045 Mon Sep 17 00:00:00 2001 From: Joshua Fernandes <83997348+joshua-salsadigital@users.noreply.github.com> Date: Thu, 21 Mar 2024 00:19:02 +0530 Subject: [PATCH 032/295] Fixed Next step component: Two link arrows are displayed. (#117) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Joshua Fernandes <“joshua.1234511@yahoo.in”> --- components/01-atoms/link/link.twig | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/01-atoms/link/link.twig b/components/01-atoms/link/link.twig index 8298f99..b5356eb 100644 --- a/components/01-atoms/link/link.twig +++ b/components/01-atoms/link/link.twig @@ -32,7 +32,7 @@ {% if text is not empty or icon is not empty %} {% set content_markup %} - {% if icon %} + {% if icon and not is_external %} {% set icon_markup %} {% include '@base/icon/icon.twig' with { symbol: icon, From 5f685aeaa58843058c6dcca2c5dc3564136a2213 Mon Sep 17 00:00:00 2001 From: GitHub Actions release workflow <378794+github-actions[bot]@users.noreply.github.com> Date: Wed, 20 Mar 2024 20:23:57 +0000 Subject: [PATCH 033/295] Released version v1.7.4. --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 2985f19..3c53b12 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@civictheme/uikit", - "version": "1.7.3", + "version": "1.7.4", "license": "GPL-2.0-or-later", "description": "CivicTheme UI Kit with Storybook integration", "keywords": [ From 4f9d5013f46890c53fedf229116d4b9a99777b86 Mon Sep 17 00:00:00 2001 From: Alex Skrypnyk Date: Thu, 21 Mar 2024 07:30:33 +1100 Subject: [PATCH 034/295] Fixed header grid for slogan and secondary navigation. --- components/03-organisms/header/header.twig | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/03-organisms/header/header.twig b/components/03-organisms/header/header.twig index fa4ed1b..996fee9 100644 --- a/components/03-organisms/header/header.twig +++ b/components/03-organisms/header/header.twig @@ -44,7 +44,7 @@
    {% block content_top2 %} -
    +
    {{ content_top2 }}
    @@ -52,7 +52,7 @@ {% endblock %} {% block content_top3 %} -
    +
    {{ content_top3 }}
    From 29d093c4fc67e299981ea95355c1cba4008c10c0 Mon Sep 17 00:00:00 2001 From: GitHub Actions release workflow <378794+github-actions[bot]@users.noreply.github.com> Date: Wed, 20 Mar 2024 20:33:31 +0000 Subject: [PATCH 035/295] Released version v1.7.5. --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 3c53b12..59debcb 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@civictheme/uikit", - "version": "1.7.4", + "version": "1.7.5", "license": "GPL-2.0-or-later", "description": "CivicTheme UI Kit with Storybook integration", "keywords": [ From 7cfbc18eb2aaae982981b5d7124e7760d27713a5 Mon Sep 17 00:00:00 2001 From: Joshua Fernandes <83997348+joshua-salsadigital@users.noreply.github.com> Date: Wed, 27 Mar 2024 17:02:35 +0530 Subject: [PATCH 036/295] Fixed Broken Slider. (#120) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Joshua Fernandes <“joshua.1234511@yahoo.in”> --- components/03-organisms/slider/slider.stories.js | 1 + 1 file changed, 1 insertion(+) diff --git a/components/03-organisms/slider/slider.stories.js b/components/03-organisms/slider/slider.stories.js index 25399e0..3f95643 100644 --- a/components/03-organisms/slider/slider.stories.js +++ b/components/03-organisms/slider/slider.stories.js @@ -4,6 +4,7 @@ import { } from '@storybook/addon-knobs'; import { getSlots, randomLinks, randomTags } from '../../00-base/base.utils'; import { randomSlidesComponent } from './slider.utils'; +import './slider'; import CivicThemeSlider from './slider.twig'; export default { From 4d1e9b9091f61b958125f48cf25911992fd50ba4 Mon Sep 17 00:00:00 2001 From: GitHub Actions release workflow <378794+github-actions[bot]@users.noreply.github.com> Date: Wed, 27 Mar 2024 11:36:12 +0000 Subject: [PATCH 037/295] Released version v1.7.6. --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 59debcb..65b6075 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@civictheme/uikit", - "version": "1.7.5", + "version": "1.7.6", "license": "GPL-2.0-or-later", "description": "CivicTheme UI Kit with Storybook integration", "keywords": [ From ad03ade6435b9bec5f9caf4f4112664a04dcf917 Mon Sep 17 00:00:00 2001 From: Joshua Fernandes <“joshua.1234511@yahoo.in”> Date: Thu, 28 Mar 2024 08:38:24 +0530 Subject: [PATCH 038/295] [#30] Moved assets/videos to .storybook/static --- .../static/demo}/images/demo1.jpg | Bin .../static/demo}/images/demo2.jpg | Bin .../static/demo}/images/demo3.jpg | Bin .../static/demo}/images/demo4.jpg | Bin .../static/demo}/images/demo5.jpg | Bin .../static/demo}/images/demo6.jpg | Bin .../static/demo}/videos/demo.avi | Bin .../static/demo}/videos/demo.mp4 | Bin .../static/demo}/videos/demo.webm | Bin .../static/demo}/videos/demo_poster.png | Bin components/00-base/base.utils.js | 20 +++++++++--------- 11 files changed, 10 insertions(+), 10 deletions(-) rename {assets => .storybook/static/demo}/images/demo1.jpg (100%) rename {assets => .storybook/static/demo}/images/demo2.jpg (100%) rename {assets => .storybook/static/demo}/images/demo3.jpg (100%) rename {assets => .storybook/static/demo}/images/demo4.jpg (100%) rename {assets => .storybook/static/demo}/images/demo5.jpg (100%) rename {assets => .storybook/static/demo}/images/demo6.jpg (100%) rename {assets => .storybook/static/demo}/videos/demo.avi (100%) rename {assets => .storybook/static/demo}/videos/demo.mp4 (100%) rename {assets => .storybook/static/demo}/videos/demo.webm (100%) rename {assets => .storybook/static/demo}/videos/demo_poster.png (100%) diff --git a/assets/images/demo1.jpg b/.storybook/static/demo/images/demo1.jpg similarity index 100% rename from assets/images/demo1.jpg rename to .storybook/static/demo/images/demo1.jpg diff --git a/assets/images/demo2.jpg b/.storybook/static/demo/images/demo2.jpg similarity index 100% rename from assets/images/demo2.jpg rename to .storybook/static/demo/images/demo2.jpg diff --git a/assets/images/demo3.jpg b/.storybook/static/demo/images/demo3.jpg similarity index 100% rename from assets/images/demo3.jpg rename to .storybook/static/demo/images/demo3.jpg diff --git a/assets/images/demo4.jpg b/.storybook/static/demo/images/demo4.jpg similarity index 100% rename from assets/images/demo4.jpg rename to .storybook/static/demo/images/demo4.jpg diff --git a/assets/images/demo5.jpg b/.storybook/static/demo/images/demo5.jpg similarity index 100% rename from assets/images/demo5.jpg rename to .storybook/static/demo/images/demo5.jpg diff --git a/assets/images/demo6.jpg b/.storybook/static/demo/images/demo6.jpg similarity index 100% rename from assets/images/demo6.jpg rename to .storybook/static/demo/images/demo6.jpg diff --git a/assets/videos/demo.avi b/.storybook/static/demo/videos/demo.avi similarity index 100% rename from assets/videos/demo.avi rename to .storybook/static/demo/videos/demo.avi diff --git a/assets/videos/demo.mp4 b/.storybook/static/demo/videos/demo.mp4 similarity index 100% rename from assets/videos/demo.mp4 rename to .storybook/static/demo/videos/demo.mp4 diff --git a/assets/videos/demo.webm b/.storybook/static/demo/videos/demo.webm similarity index 100% rename from assets/videos/demo.webm rename to .storybook/static/demo/videos/demo.webm diff --git a/assets/videos/demo_poster.png b/.storybook/static/demo/videos/demo_poster.png similarity index 100% rename from assets/videos/demo_poster.png rename to .storybook/static/demo/videos/demo_poster.png diff --git a/components/00-base/base.utils.js b/components/00-base/base.utils.js index 431eb4a..830bcfc 100644 --- a/components/00-base/base.utils.js +++ b/components/00-base/base.utils.js @@ -104,12 +104,12 @@ export const randomTags = (count, rand) => { export const demoImage = (idx) => { const images = [ - './assets/images/demo1.jpg', - './assets/images/demo2.jpg', - './assets/images/demo3.jpg', - './assets/images/demo4.jpg', - './assets/images/demo5.jpg', - './assets/images/demo6.jpg', + 'demo/images/demo1.jpg', + 'demo/images/demo2.jpg', + 'demo/images/demo3.jpg', + 'demo/images/demo4.jpg', + 'demo/images/demo5.jpg', + 'demo/images/demo6.jpg', ]; idx = typeof idx !== 'undefined' ? Math.max(0, Math.min(idx, images.length)) : Math.floor(Math.random() * images.length); @@ -119,20 +119,20 @@ export const demoImage = (idx) => { export const demoVideos = () => [ { - url: './assets/videos/demo.webm', + url: 'demo/videos/demo.webm', type: 'video/webm', }, { - url: './assets/videos/demo.mp4', + url: 'demo/videos/demo.mp4', type: 'video/mp4', }, { - url: './assets/videos/demo.avi', + url: 'demo/videos/demo.avi', type: 'video/avi', }, ]; -export const demoVideoPoster = () => './assets/videos/demo_poster.png'; +export const demoVideoPoster = () => 'demo/videos/demo_poster.png'; export const demoIcon = () => './assets/icons/megaphone.svg'; From ef0e63a960e8b6f3ca777c794498d97e1267eebe Mon Sep 17 00:00:00 2001 From: Joshua Fernandes <83997348+joshua-salsadigital@users.noreply.github.com> Date: Wed, 10 Apr 2024 11:04:55 +0530 Subject: [PATCH 039/295] [#78] Fixed Single and Group filter announcing changes to content and a "down" key trigger for collapsible. (#118) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Joshua Fernandes <“joshua.1234511@yahoo.in”> --- components/00-base/collapsible/collapsible.js | 2 +- components/01-atoms/button/button.js | 2 +- components/01-atoms/popover/popover.twig | 2 +- .../02-molecules/group-filter/group-filter.js | 33 +++++++++++++++++++ .../group-filter/group-filter.stories.js | 1 + .../single-filter/single-filter.js | 33 +++++++++++++++++++ .../single-filter/single-filter.stories.js | 1 + 7 files changed, 71 insertions(+), 3 deletions(-) create mode 100644 components/02-molecules/group-filter/group-filter.js create mode 100644 components/02-molecules/single-filter/single-filter.js diff --git a/components/00-base/collapsible/collapsible.js b/components/00-base/collapsible/collapsible.js index 5adee97..bfc4af2 100644 --- a/components/00-base/collapsible/collapsible.js +++ b/components/00-base/collapsible/collapsible.js @@ -255,7 +255,7 @@ CivicThemeCollapsible.prototype.collapse = function (animate, evt) { } if (evt && evt.target) { - if (evt.detail.keydown && !evt.detail.closeGroup) { + if (evt.detail && evt.detail.keydown && !evt.detail.closeGroup) { if (evt.target.closest('[data-collapsible="true"]') !== t.el) { return; } diff --git a/components/01-atoms/button/button.js b/components/01-atoms/button/button.js index 7edb806..bfa117a 100644 --- a/components/01-atoms/button/button.js +++ b/components/01-atoms/button/button.js @@ -53,7 +53,7 @@ CivicThemeButton.prototype.clickEvent = function (e) { * Keydown event handler. */ CivicThemeButton.prototype.keydownEvent = function (e) { - if (e.key === 'Tab' || e.key.indexOf('Arrow') === 0) { + if (e.key && (e.key === 'Tab' || e.key.indexOf('Arrow') === 0)) { this.keyboardFocused = true; } }; diff --git a/components/01-atoms/popover/popover.twig b/components/01-atoms/popover/popover.twig index 82acbd6..ca53fc1 100644 --- a/components/01-atoms/popover/popover.twig +++ b/components/01-atoms/popover/popover.twig @@ -28,7 +28,7 @@ url: trigger.url is defined ? trigger.url : null, is_new_window: trigger.is_new_window, modifier_class: 'ct-popover__link', - attributes: 'data-collapsible-trigger', + attributes: 'data-collapsible-trigger tabindex="0"', } only %}
    diff --git a/components/02-molecules/group-filter/group-filter.js b/components/02-molecules/group-filter/group-filter.js new file mode 100644 index 0000000..0e34346 --- /dev/null +++ b/components/02-molecules/group-filter/group-filter.js @@ -0,0 +1,33 @@ +/** + * @file + * Group Filter component. + */ +function CivicThemeGroupFilterComponent(el) { + if (this.el) { + return; + } + + this.el = el; + + this.el.addEventListener('ct.group-filter.update', this.update.bind(this)); + + if (!el.hasEventListener) { + el.hasEventListener = true; + el.querySelectorAll('input, textarea, select, [type="checkbox"], [type="radio"]').forEach((input) => { + input.addEventListener('change', () => { + el.dispatchEvent(new CustomEvent('ct.group-filter.update', { detail: { parent: input.parentElement } })); + }); + }); + } +} + +/** + * Update the instance. + */ +CivicThemeGroupFilterComponent.prototype.update = function (el) { + el.detail.parent.setAttribute('aria-live', 'polite'); +}; + +document.querySelectorAll('[data-ct-group-filter-filters]').forEach((el) => { + new CivicThemeGroupFilterComponent(el); +}); diff --git a/components/02-molecules/group-filter/group-filter.stories.js b/components/02-molecules/group-filter/group-filter.stories.js index e3aa319..d1ee730 100644 --- a/components/02-molecules/group-filter/group-filter.stories.js +++ b/components/02-molecules/group-filter/group-filter.stories.js @@ -7,6 +7,7 @@ import { } from '../../00-base/base.utils'; import CivicThemeGroupFilter from './group-filter.twig'; +import './group-filter'; export default { title: 'Molecules/Group Filter', diff --git a/components/02-molecules/single-filter/single-filter.js b/components/02-molecules/single-filter/single-filter.js new file mode 100644 index 0000000..22541c0 --- /dev/null +++ b/components/02-molecules/single-filter/single-filter.js @@ -0,0 +1,33 @@ +/** + * @file + * Single Filter component. + */ +function CivicThemeSingleFilterComponent(el) { + if (this.el) { + return; + } + + this.el = el; + + this.el.addEventListener('ct.single-filter.update', this.update.bind(this)); + + if (!el.hasEventListener) { + el.hasEventListener = true; + el.querySelectorAll('input, textarea, select, [type="checkbox"], [type="radio"]').forEach((input) => { + input.addEventListener('change', () => { + el.dispatchEvent(new CustomEvent('ct.single-filter.update', { detail: { parent: input.parentElement } })); + }); + }); + } +} + +/** + * Update the instance. + */ +CivicThemeSingleFilterComponent.prototype.update = function (el) { + el.detail.parent.setAttribute('aria-live', 'polite'); +}; + +document.querySelectorAll('.ct-single-filter__list').forEach((el) => { + new CivicThemeSingleFilterComponent(el); +}); diff --git a/components/02-molecules/single-filter/single-filter.stories.js b/components/02-molecules/single-filter/single-filter.stories.js index e5dd5b4..1b2c269 100644 --- a/components/02-molecules/single-filter/single-filter.stories.js +++ b/components/02-molecules/single-filter/single-filter.stories.js @@ -3,6 +3,7 @@ import { } from '@storybook/addon-knobs'; import CivicThemeSingleFilter from './single-filter.twig'; +import './single-filter'; import { getSlots, randomName, randomString, } from '../../00-base/base.utils'; From 81b14b54e30db6d4bd8aed6aec220e3a791f72a8 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Wed, 10 Apr 2024 05:35:24 +0000 Subject: [PATCH 040/295] Update dependency css-loader to v7 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 65b6075..9c060e2 100644 --- a/package.json +++ b/package.json @@ -58,7 +58,7 @@ "chalk": "^4.1.2", "clean-webpack-plugin": "^4.0.0", "concurrently": "^8.0.0", - "css-loader": "^5.2.7", + "css-loader": "^7.0.0", "dedent": "^1.0.0", "deepmerge": "^4.2.2", "eslint": "^7.32.0", From caa65b88b3b8df9e866471a0a8f61b9d7b7f6bf1 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Wed, 10 Apr 2024 05:35:27 +0000 Subject: [PATCH 041/295] Update dependency eslint to v9 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 9c060e2..ccbc8cf 100644 --- a/package.json +++ b/package.json @@ -61,7 +61,7 @@ "css-loader": "^7.0.0", "dedent": "^1.0.0", "deepmerge": "^4.2.2", - "eslint": "^7.32.0", + "eslint": "^9.0.0", "eslint-config-airbnb": "^19.0.0", "file-loader": "^6.2.0", "glob-gitignore": "^1.0.14", From 5377f7ed9d8a45e2b7717ff87d1c9283a49be1ad Mon Sep 17 00:00:00 2001 From: Joshua Fernandes <83997348+joshua-salsadigital@users.noreply.github.com> Date: Wed, 10 Apr 2024 11:07:49 +0530 Subject: [PATCH 042/295] [#69] Fixed TAB-out from the mobile menu is not working. (#112) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Joshua Fernandes <“joshua.1234511@yahoo.in”> Co-authored-by: Alex Skrypnyk --- components/00-base/flyout/flyout.js | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/components/00-base/flyout/flyout.js b/components/00-base/flyout/flyout.js index ac27f20..189a62a 100644 --- a/components/00-base/flyout/flyout.js +++ b/components/00-base/flyout/flyout.js @@ -59,6 +59,24 @@ function CivicThemeFlyout(el) { }); } + document.addEventListener('keydown', (event) => { + if (event.key === 'Tab') { + const flyoutElements = document.querySelectorAll('[data-flyout]'); + flyoutElements.forEach((flyout) => { + const focusableElements = flyout.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'); + const firstFocusable = focusableElements[0]; + const lastFocusable = focusableElements[focusableElements.length - 1]; + if (document.activeElement === lastFocusable && !event.shiftKey) { + event.preventDefault(); + firstFocusable.focus(); + } else if (document.activeElement === firstFocusable && event.shiftKey) { + event.preventDefault(); + lastFocusable.focus(); + } + }); + } + }); + // Mark as initialized. this.el.setAttribute('data-flyout', 'true'); } From 135dd24dfd87e38f870a415e65f5dae271c64a4f Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Wed, 10 Apr 2024 05:38:13 +0000 Subject: [PATCH 043/295] Update dependency style-loader to v4 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index ccbc8cf..494d4ac 100644 --- a/package.json +++ b/package.json @@ -75,7 +75,7 @@ "sass": "^1.41.0", "sass-loader": "^10.2.0", "semver": "^7.3.8", - "style-loader": "^2.0.0", + "style-loader": "^4.0.0", "stylelint": "^14.0.0", "stylelint-config-standard": "^23.0.0", "stylelint-config-standard-scss": "^2.0.0", From 4c618d10ccf869d6a2a3e1b20e9edafb54fe916b Mon Sep 17 00:00:00 2001 From: Alex Skrypnyk Date: Wed, 10 Apr 2024 18:08:55 +1000 Subject: [PATCH 044/295] Revert "Update dependency eslint to v9" This reverts commit caa65b88b3b8df9e866471a0a8f61b9d7b7f6bf1. --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 494d4ac..0e9a1e2 100644 --- a/package.json +++ b/package.json @@ -61,7 +61,7 @@ "css-loader": "^7.0.0", "dedent": "^1.0.0", "deepmerge": "^4.2.2", - "eslint": "^9.0.0", + "eslint": "^7.32.0", "eslint-config-airbnb": "^19.0.0", "file-loader": "^6.2.0", "glob-gitignore": "^1.0.14", From 2a8a91f550b00d11d198c137644352c08193e9b2 Mon Sep 17 00:00:00 2001 From: Alex Skrypnyk Date: Wed, 10 Apr 2024 18:08:59 +1000 Subject: [PATCH 045/295] Revert "Update dependency css-loader to v7" This reverts commit 81b14b54e30db6d4bd8aed6aec220e3a791f72a8. --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 0e9a1e2..b17242e 100644 --- a/package.json +++ b/package.json @@ -58,7 +58,7 @@ "chalk": "^4.1.2", "clean-webpack-plugin": "^4.0.0", "concurrently": "^8.0.0", - "css-loader": "^7.0.0", + "css-loader": "^5.2.7", "dedent": "^1.0.0", "deepmerge": "^4.2.2", "eslint": "^7.32.0", From 06eabbe3f8c86be39509baa6d08ea8267e3ea167 Mon Sep 17 00:00:00 2001 From: Alex Skrypnyk Date: Wed, 10 Apr 2024 18:28:51 +1000 Subject: [PATCH 046/295] Revert "Update dependency style-loader to v4" This reverts commit 135dd24dfd87e38f870a415e65f5dae271c64a4f. --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index b17242e..65b6075 100644 --- a/package.json +++ b/package.json @@ -75,7 +75,7 @@ "sass": "^1.41.0", "sass-loader": "^10.2.0", "semver": "^7.3.8", - "style-loader": "^4.0.0", + "style-loader": "^2.0.0", "stylelint": "^14.0.0", "stylelint-config-standard": "^23.0.0", "stylelint-config-standard-scss": "^2.0.0", From 0f92c808cb05f21870e9a3668e55c0bd2d35bccd Mon Sep 17 00:00:00 2001 From: Alex Skrypnyk Date: Fri, 19 Apr 2024 07:49:02 +1000 Subject: [PATCH 047/295] Added issue templates. [skip ci] --- .github/ISSUE_TEMPLATE/DEFECT-REPORT.yml | 32 ++++++++++++++++++++ .github/ISSUE_TEMPLATE/FEATURE-REQUEST.yml | 34 ++++++++++++++++++++++ 2 files changed, 66 insertions(+) create mode 100644 .github/ISSUE_TEMPLATE/DEFECT-REPORT.yml create mode 100644 .github/ISSUE_TEMPLATE/FEATURE-REQUEST.yml diff --git a/.github/ISSUE_TEMPLATE/DEFECT-REPORT.yml b/.github/ISSUE_TEMPLATE/DEFECT-REPORT.yml new file mode 100644 index 0000000..a6b4f1e --- /dev/null +++ b/.github/ISSUE_TEMPLATE/DEFECT-REPORT.yml @@ -0,0 +1,32 @@ +name: Defect Report +description: File a defect report +labels: ["Type: Defect"] +body: + - type: markdown + attributes: + value: | + Thanks for taking the time to fill out this defect report. + - type: textarea + id: summary + attributes: + label: Summary + validations: + required: true + - type: textarea + id: steps-to-reproduce + attributes: + label: Steps to reproduce + validations: + required: true + - type: textarea + id: observed-outcome + attributes: + label: Observed outcome + validations: + required: true + - type: textarea + id: expected-outcome + attributes: + label: Expected outcome + validations: + required: true diff --git a/.github/ISSUE_TEMPLATE/FEATURE-REQUEST.yml b/.github/ISSUE_TEMPLATE/FEATURE-REQUEST.yml new file mode 100644 index 0000000..560baa4 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/FEATURE-REQUEST.yml @@ -0,0 +1,34 @@ +name: Feature Request +description: Suggest a new feature +labels: ["Type: Feature"] +body: + - type: markdown + attributes: + value: | + Thanks for taking the time to fill out this feature request. + - type: textarea + id: user-story + attributes: + label: User story + value: | + As a + I want + So that + validations: + required: true + - type: textarea + id: description + attributes: + label: Description + validations: + required: true + - type: textarea + id: acceptance-criteria + attributes: + label: Acceptance criteria + value: | + Given I am a + When I + Then I + validations: + required: true From 4baca3461078d1eab61619979ed3e3dcbd670352 Mon Sep 17 00:00:00 2001 From: Alex Skrypnyk Date: Fri, 19 Apr 2024 08:00:12 +1000 Subject: [PATCH 048/295] Create SECURITY.md --- SECURITY.md | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 SECURITY.md diff --git a/SECURITY.md b/SECURITY.md new file mode 100644 index 0000000..ae85a70 --- /dev/null +++ b/SECURITY.md @@ -0,0 +1,3 @@ +# Security Policy + +Please report found any vulnerabilities to civictheme@salsa.digital. From cbe75626535f1560c0b68094f2321dbeb2c047a2 Mon Sep 17 00:00:00 2001 From: Alex Skrypnyk Date: Fri, 19 Apr 2024 18:11:20 +1000 Subject: [PATCH 049/295] Added more links for GitHub templates. --- .github/ISSUE_TEMPLATE/config.yml | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 .github/ISSUE_TEMPLATE/config.yml diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml new file mode 100644 index 0000000..9d03558 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/config.yml @@ -0,0 +1,8 @@ +blank_issues_enabled: false +contact_links: + - name: 💬 Drush Slack + url: https://drupal.slack.com/archives/C039UV0CQBZ + about: Join the CivicTheme Community to talk, exchange experiences or ask and answer questions. + - name: 💧 Drupal.org + url: https://www.drupal.org/project/civictheme + about: Submit an issue for Drupal theme From f3ee8c5848738799f581809117b90087236aff9b Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Tue, 7 May 2024 18:15:28 +1000 Subject: [PATCH 050/295] Update pandoc/core Docker tag to v3.13 (#140) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- .github/workflows/post-opened-issue-to-jira.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/post-opened-issue-to-jira.yml b/.github/workflows/post-opened-issue-to-jira.yml index d110dc6..786eeb8 100644 --- a/.github/workflows/post-opened-issue-to-jira.yml +++ b/.github/workflows/post-opened-issue-to-jira.yml @@ -14,7 +14,7 @@ jobs: run: echo "${{ github.event.issue.body }}" > ${{ runner.temp }}/_github_workflow/issue.md - name: Convert GitHub markdown to Jira markup - uses: docker://pandoc/core:3.1 + uses: docker://pandoc/core:3.13 with: args: --from gfm --to jira --output=/github/workflow/issue.jira /github/workflow/issue.md From bf38e418660f6ed888ad497ee7bd28ff3968d0f7 Mon Sep 17 00:00:00 2001 From: Joshua Fernandes <83997348+joshua-salsadigital@users.noreply.github.com> Date: Tue, 7 May 2024 16:51:21 +0530 Subject: [PATCH 051/295] [#124] [#125] [#127] Created/Updated centralised Storybook helpers. (#139) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Joshua Fernandes <“joshua.1234511@yahoo.in”> --- components/00-base/base.utils.js | 306 ++++++++++-------- components/00-base/layout/layout.stories.js | 4 +- .../01-atoms/checkbox/checkbox.stories.js | 2 +- components/01-atoms/checkbox/checkbox.twig | 6 +- .../field-description/field-description.scss | 4 + .../field-description.stories.js | 9 + .../field-description/field-description.twig | 5 +- .../01-atoms/fieldset/fieldset.stories.js | 6 +- components/01-atoms/fieldset/fieldset.twig | 2 +- components/01-atoms/image/image.stories.js | 4 +- components/01-atoms/label/label.stories.js | 4 +- components/01-atoms/label/label.twig | 6 +- .../01-atoms/popover/popover.stories.js | 4 +- components/01-atoms/radio/radio.stories.js | 2 +- components/01-atoms/radio/radio.twig | 6 +- components/01-atoms/select/select.stories.js | 7 +- components/01-atoms/select/select.twig | 8 +- .../01-atoms/textarea/textarea.stories.js | 3 +- components/01-atoms/textarea/textarea.twig | 8 +- .../01-atoms/textfield/textfield.stories.js | 3 +- components/01-atoms/textfield/textfield.twig | 8 +- components/01-atoms/video/video.stories.js | 6 +- .../accordion/accordion.stories.js | 4 +- .../attachment/attachment.stories.js | 4 +- .../basic-content/basic-content.stories.js | 12 +- .../02-molecules/callout/callout.stories.js | 4 +- .../event-card/event-card.stories.js | 8 +- .../02-molecules/figure/figure.stories.js | 4 +- .../form-element/form-element.stories.js | 12 +- .../group-filter/group-filter.stories.js | 8 +- components/02-molecules/map/map.stories.js | 4 +- .../navigation-card.stories.js | 8 +- .../next-step/next-step.stories.js | 4 +- .../promo-card/promo-card.stories.js | 8 +- .../publication-card.stories.js | 8 +- .../service-card/service-card.stories.js | 4 +- .../single-filter/single-filter.stories.js | 4 +- .../02-molecules/snippet/snippet.stories.js | 4 +- .../subject-card/subject-card.stories.js | 6 +- .../02-molecules/tag-list/tag-list.stories.js | 4 +- .../02-molecules/tooltip/tooltip.stories.js | 4 +- .../video-player/video-player.stories.js | 6 +- .../03-organisms/banner/banner.stories.js | 6 +- .../03-organisms/campaign/campaign.stories.js | 8 +- .../03-organisms/footer/footer.stories.js | 4 +- .../03-organisms/header/header.stories.js | 4 +- components/03-organisms/list/list.stories.js | 4 +- .../mobile-navigation.stories.js | 8 +- .../03-organisms/promo/promo.stories.js | 8 +- .../03-organisms/slider/slider.stories.js | 10 +- .../03-organisms/slider/slider.utils.js | 4 +- .../social-links/social-links.stories.js | 4 +- 52 files changed, 330 insertions(+), 263 deletions(-) diff --git a/components/00-base/base.utils.js b/components/00-base/base.utils.js index 830bcfc..58d4a2e 100644 --- a/components/00-base/base.utils.js +++ b/components/00-base/base.utils.js @@ -1,5 +1,5 @@ // -// Shared JS helpers for Storybook stories. +// Centralised helpers for all storybook components. // import { boolean } from '@storybook/addon-knobs'; @@ -12,22 +12,76 @@ import CivicThemeFormElement from '../02-molecules/form-element/form-element.twig'; import CivicThemeLabel from '../01-atoms/label/label.twig'; +// Utilities. + +export const arrayCombine = function (keys, values) { + const obj = {}; + + if (!keys || !values || keys.constructor !== Array || values.constructor !== Array) { + return false; + } + + if (keys.length !== values.length) { + return false; + } + + for (let i = 0; i < keys.length; i++) { + obj[keys[i]] = values[i]; + } + + return obj; +}; + +export const objectFromArray = (array) => { + const obj = {}; + array.forEach((item) => { + obj[item] = item; + }); + return obj; +}; + +export const capitalizeFirstLetter = (string) => string.charAt(0).toUpperCase() + string.slice(1); + +export const indexedString = 'PlaceholderText'; + +export const cleanCssIdentifier = function (string) { + return string.toLowerCase() + .replace(/(&\w+?;)/gim, ' ') + .replace(/[_.~"<>%|'!*();:@&=+$,/?%#[\]{}\n`^\\]/gim, '') + .replace(/(^\s+)|(\s+$)/gim, '') + .replace(/\s+/gm, '-'); +}; + +export const toLabels = function (values) { + const arr = []; + for (const i in values) { + arr.push(capitalizeFirstLetter(values[i].replace(/[-_]/, ' '))); + } + return arr; +}; + +export const placeholder = (content = 'Content placeholder') => `
    ${content}
    `; + export const getThemes = () => ({ light: 'Light', dark: 'Dark', }); -export const getSlots = (names) => { - const showSlots = boolean('Show story-slots', false, 'Slots'); - const obj = {}; +export const dateIsValid = function (date) { + return !Number.isNaN(Date.parse(date)); +}; - if (showSlots) { - for (const i in names) { - obj[names[i]] = `
    {{ ${names[i]} }}
    `; - } - } +// Random generators. - return obj; +export const randomBool = (skew) => { + skew = skew || 0.5; + return Math.random() > skew; +}; + +export const randomInt = (min, max) => { + min = Math.ceil(min); + max = Math.floor(max); + return Math.floor(Math.random() * (max - min) + min); }; export const randomText = (words) => { @@ -45,97 +99,20 @@ export const randomText = (words) => { return lorem.generateWords(words); }; -export const placeholder = (content = 'Content placeholder') => `
    ${content}
    `; - -export const capitalizeFirstLetter = (string) => string.charAt(0).toUpperCase() + string.slice(1); - -export const randomInt = (min, max) => { - min = Math.ceil(min); - max = Math.floor(max); - return Math.floor(Math.random() * (max - min) + min); -}; - -export const randomBool = (skew) => { - skew = skew || 0.5; - return Math.random() > skew; -}; - export const randomString = (length) => randomText(length).substring(0, length).trim(); export const randomName = (length) => randomText(length).replace(' ', '').substring(0, length).trim(); -export const randomSentence = (words) => { - words = words || randomInt(5, 25); - return capitalizeFirstLetter(randomText(words)); -}; - export const randomUrl = (domain) => { domain = domain || 'http://example.com'; return `${domain}/${(Math.random() + 1).toString(36).substring(7)}`; }; -export const randomLinks = (count, length, domain, prefix) => { - const links = []; - prefix = prefix || 'Link'; - length = length || 0; - - for (let i = 0; i < count; i++) { - links.push({ - text: `${prefix} ${i + 1}${length ? ` ${randomString(randomInt(3, length))}` : ''}`, - url: randomUrl(domain), - is_new_window: randomBool(), - is_external: randomBool(0.8), - }); - } - - return links; -}; - -export const randomTags = (count, rand) => { - const tags = []; - rand = rand || false; - - for (let i = 0; i < count; i++) { - tags.push(`Topic ${i + 1}${rand ? ` ${randomString(randomInt(2, 5))}` : ''}`); - } - - return tags; -}; - -export const demoImage = (idx) => { - const images = [ - 'demo/images/demo1.jpg', - 'demo/images/demo2.jpg', - 'demo/images/demo3.jpg', - 'demo/images/demo4.jpg', - 'demo/images/demo5.jpg', - 'demo/images/demo6.jpg', - ]; - - idx = typeof idx !== 'undefined' ? Math.max(0, Math.min(idx, images.length)) : Math.floor(Math.random() * images.length); - - return images[idx]; +export const randomDropdownFilter = () => { + const filters = ['All', 'Recent', 'Popular', 'Featured']; + return filters[Math.floor(Math.random() * filters.length)]; }; -export const demoVideos = () => [ - { - url: 'demo/videos/demo.webm', - type: 'video/webm', - }, - { - url: 'demo/videos/demo.mp4', - type: 'video/mp4', - }, - { - url: 'demo/videos/demo.avi', - type: 'video/avi', - }, -]; - -export const demoVideoPoster = () => 'demo/videos/demo_poster.png'; - -export const demoIcon = () => './assets/icons/megaphone.svg'; - export const randomFormElement = (inputType, options, theme, rand, itr) => { const isCheckboxOrRadio = inputType === 'checkbox' || inputType === 'radio'; @@ -223,19 +200,68 @@ export const randomFormElements = (count, theme, rand) => { return formElements; }; -export const randomOptions = (numOfOptions, optionType = 'option') => { - const options = []; - for (let i = 1; i <= numOfOptions; i++) { - const option = { - type: optionType, - selected: false, - label: optionType === 'optgroup' ? `Group ${i}` : randomString(randomInt(3, 8)), - value: randomString(randomInt(1, 8)), - options: optionType === 'optgroup' ? randomOptions(numOfOptions) : null, - }; - options.push(option); +export const randomLinks = (count, length, domain, prefix) => { + const links = []; + prefix = prefix || 'Link'; + length = length || 0; + + for (let i = 0; i < count; i++) { + links.push({ + text: `${prefix} ${i + 1}${length ? ` ${randomString(randomInt(3, length))}` : ''}`, + url: randomUrl(domain), + is_new_window: randomBool(), + is_external: randomBool(0.8), + }); } - return options; + + return links; +}; + +export const randomSentence = (words) => { + words = words || randomInt(5, 25); + return capitalizeFirstLetter(randomText(words)); +}; + +export const randomTags = (count, rand) => { + const tags = []; + rand = rand || false; + + for (let i = 0; i < count; i++) { + tags.push(`Topic ${i + 1}${rand ? ` ${randomString(randomInt(2, 5))}` : ''}`); + } + + return tags; +}; + +// Demo data generators + +export const generateIcon = () => './assets/icons/megaphone.svg'; + +export const generateImage = (idx) => { + const images = [ + 'demo/images/demo1.jpg', + 'demo/images/demo2.jpg', + 'demo/images/demo3.jpg', + 'demo/images/demo4.jpg', + 'demo/images/demo5.jpg', + 'demo/images/demo6.jpg', + ]; + + idx = typeof idx !== 'undefined' ? Math.max(0, Math.min(idx, images.length)) : Math.floor(Math.random() * images.length); + + return images[idx]; +}; + +export const generateInputItems = (count) => { + const items = []; + for (let i = 0; i < count; i++) { + items.push({ + id: i + 1, + label: `Input ${i + 1}`, + value: randomString(randomInt(3, 8)), + }); + } + return items; }; export const generateItems = (count, content) => { @@ -246,48 +272,58 @@ export const generateItems = (count, content) => { return items; }; -export const objectFromArray = (array) => { - const obj = {}; - array.forEach((item) => { - obj[item] = item; - }); - return obj; -}; - -export const cleanCssIdentifier = function (string) { - return string.toLowerCase() - .replace(/(&\w+?;)/gim, ' ') - .replace(/[_.~"<>%|'!*();:@&=+$,/?%#[\]{}\n`^\\]/gim, '') - .replace(/(^\s+)|(\s+$)/gim, '') - .replace(/\s+/gm, '-'); +export const generateSelectItems = (count) => { + const items = []; + for (let i = 0; i < count; i++) { + items.push({ + label: `Option ${i + 1}`, + value: randomString(randomInt(3, 8)), + }); + } + return items; }; -export const arrayCombine = function (keys, values) { +export const generateSlots = (names) => { + const showSlots = boolean('Show story-slots', false, 'Slots'); const obj = {}; - if (!keys || !values || keys.constructor !== Array || values.constructor !== Array) { - return false; - } - - if (keys.length !== values.length) { - return false; - } - - for (let i = 0; i < keys.length; i++) { - obj[keys[i]] = values[i]; + if (showSlots) { + for (const i in names) { + obj[names[i]] = `
    {{ ${names[i]} }}
    `; + } } return obj; }; -export const toLabels = function (values) { - const arr = []; - for (const i in values) { - arr.push(capitalizeFirstLetter(values[i].replace(/[-_]/, ' '))); +export const generateOptions = (numOfOptions, optionType = 'option') => { + const options = []; + for (let i = 1; i <= numOfOptions; i++) { + const option = { + type: optionType, + selected: false, + label: optionType === 'optgroup' ? `Group ${i}` : randomString(randomInt(3, 8)), + value: randomString(randomInt(1, 8)), + options: optionType === 'optgroup' ? generateOptions(numOfOptions) : null, + }; + options.push(option); } - return arr; + return options; }; -export const dateIsValid = function (date) { - return !Number.isNaN(Date.parse(date)); -}; +export const generateVideoPoster = () => 'demo/videos/demo_poster.png'; + +export const generateVideos = () => [ + { + url: 'demo/videos/demo.webm', + type: 'video/webm', + }, + { + url: 'demo/videos/demo.mp4', + type: 'video/mp4', + }, + { + url: 'demo/videos/demo.avi', + type: 'video/avi', + }, +]; diff --git a/components/00-base/layout/layout.stories.js b/components/00-base/layout/layout.stories.js index a1103c0..ea818ed 100644 --- a/components/00-base/layout/layout.stories.js +++ b/components/00-base/layout/layout.stories.js @@ -3,7 +3,7 @@ import CivicThemeLayout from './layout.twig'; import CivicThemeLayoutSingleColumn from './content-layout--single-column.twig'; import CivicThemeLayoutSingleColumnContained from './content-layout--single-column-contained.twig'; -import { getSlots, placeholder } from '../base.utils'; +import { generateSlots, placeholder } from '../base.utils'; export default { title: 'Base/Layout', @@ -74,7 +74,7 @@ export const Layout = (knobTab) => { return CivicThemeLayout({ ...generalKnobs, - ...getSlots([ + ...generateSlots([ 'content_top', 'content_bottom', ]), diff --git a/components/01-atoms/checkbox/checkbox.stories.js b/components/01-atoms/checkbox/checkbox.stories.js index bd705fc..98c306d 100644 --- a/components/01-atoms/checkbox/checkbox.stories.js +++ b/components/01-atoms/checkbox/checkbox.stories.js @@ -22,7 +22,7 @@ export const Checkbox = (knobTab) => { generalKnobTab, ), content: text('Content', 'Checkbox label', generalKnobTab), - required: boolean('Required', false, generalKnobTab), + is_required: boolean('Required', false, generalKnobTab), disabled: boolean('Disabled', false, generalKnobTab), has_error: boolean('Has error', false, generalKnobTab), modifier_class: text('Additional classes', '', generalKnobTab), diff --git a/components/01-atoms/checkbox/checkbox.twig b/components/01-atoms/checkbox/checkbox.twig index 8518d67..31b395f 100644 --- a/components/01-atoms/checkbox/checkbox.twig +++ b/components/01-atoms/checkbox/checkbox.twig @@ -8,7 +8,7 @@ * - content: [string] Input field label. * - value: [string] Input field value. * - disabled: [boolean] Disabled state. - * - required: [boolean] Required state. + * - is_required: [boolean] Required state. * - has_error: [boolean] Error state. * - attributes: [string] Additional attributes. * - modifier_class: [string] Additional classes. @@ -16,7 +16,7 @@ #} {% set disabled_class = disabled ? 'ct-checkbox--disabled' : '' %} -{% set required_class = required ? 'ct-checkbox--required' : '' %} +{% set required_class = is_required ? 'ct-checkbox--required' : '' %} {% set error_class = has_error ? 'ct-checkbox--error' : '' %} {% set theme_class = 'ct-theme-%s'|format(theme|default('light')) %} {% set modifier_class = '%s %s %s %s %s'|format(theme_class, disabled_class, required_class, error_class, modifier_class|default('')) %} @@ -27,7 +27,7 @@ class="ct-checkbox__element" value="{{ value }}" {{ disabled ? 'disabled' }} - {{ required ? 'required' }} + {{ is_required ? 'required' }} {% if attributes is not empty %}{{ attributes|raw }}{% endif %} /> diff --git a/components/01-atoms/field-description/field-description.scss b/components/01-atoms/field-description/field-description.scss index d70041d..2bf91b7 100644 --- a/components/01-atoms/field-description/field-description.scss +++ b/components/01-atoms/field-description/field-description.scss @@ -10,6 +10,10 @@ @include ct-typography('text-small'); + &--large { + @include ct-typography('text-regular'); + } + @include ct-component-theme($root) using($root, $theme) { @include ct-component-property($root, $theme, color); } diff --git a/components/01-atoms/field-description/field-description.stories.js b/components/01-atoms/field-description/field-description.stories.js index 5897315..3247841 100644 --- a/components/01-atoms/field-description/field-description.stories.js +++ b/components/01-atoms/field-description/field-description.stories.js @@ -21,6 +21,15 @@ export const FieldDescription = (knobTab) => { 'light', generalKnobTab, ), + size: radios( + 'Size', + { + Large: 'large', + Regular: 'regular', + }, + 'regular', + generalKnobTab, + ), content: text('Content', 'We will only use this to respond to your question.', generalKnobTab), modifier_class: text('Additional classes', '', generalKnobTab), attributes: text('Additional attributes', '', generalKnobTab), diff --git a/components/01-atoms/field-description/field-description.twig b/components/01-atoms/field-description/field-description.twig index a9213a8..f8c25be 100644 --- a/components/01-atoms/field-description/field-description.twig +++ b/components/01-atoms/field-description/field-description.twig @@ -6,13 +6,16 @@ * Variables: * - theme: [string] Theme: light, dark. * - content: [string] The description's content. + * - size: [string] Label size: large, regular. * - attributes: [string] Additional attributes. * - modifier_class: [string] Additional classes. */ #} +{% set size = size in ['large', 'regular'] ? size : 'regular' %} +{% set size_class = 'ct-field-description--%s'|format(size) %} {% set theme_class = 'ct-theme-%s'|format(theme|default('light')) %} -{% set modifier_class = '%s %s'|format(theme_class, modifier_class|default('')) %} +{% set modifier_class = '%s %s %s'|format(theme_class, size_class, modifier_class|default('')) %} {% if content is not empty -%}
    { - const generalKnobTab = 'General'; +export const Fieldset = (knobTab) => { + const generalKnobTab = typeof knobTab === 'string' ? knobTab : 'General'; const theme = radios( 'Theme', { @@ -24,7 +24,7 @@ export const Fieldset = () => { theme, legend: text('Legend', 'Fieldset legend', generalKnobTab), description: text('Description', 'Fieldset example description', generalKnobTab), - required: boolean('Required', true, generalKnobTab), + is_required: boolean('Required', true, generalKnobTab), modifier_class: text('Additional class', '', generalKnobTab), }; diff --git a/components/01-atoms/fieldset/fieldset.twig b/components/01-atoms/fieldset/fieldset.twig index fca6df6..5f246e1 100644 --- a/components/01-atoms/fieldset/fieldset.twig +++ b/components/01-atoms/fieldset/fieldset.twig @@ -17,7 +17,7 @@ {% set form_element_type_class = 'ct-form-element--%s'|format(type|default('default')) %} {% set form_element_name_class = name is not empty ? 'ct-form-element--%s'|format(name) : '' %} -{% set required_class = required ? 'ct-form-element--form-required' : '' %} +{% set required_class = is_required ? 'ct-form-element--form-required' : '' %} {% set error_class = errors ? 'ct-form-element--error' : '' %} {% set theme_class = 'ct-theme-%s'|format(theme|default('light')) %} {% set modifier_class = '%s %s %s %s %s %s'|format(theme_class, form_element_type_class, form_element_name_class, required_class, error_class, modifier_class|default('')) %} diff --git a/components/01-atoms/image/image.stories.js b/components/01-atoms/image/image.stories.js index fda5632..e4cd695 100644 --- a/components/01-atoms/image/image.stories.js +++ b/components/01-atoms/image/image.stories.js @@ -1,7 +1,7 @@ import { boolean, radios, text } from '@storybook/addon-knobs'; import CivicThemeImage from './image.twig'; -import { demoImage } from '../../00-base/base.utils'; +import { generateImage } from '../../00-base/base.utils'; export default { title: 'Atoms/Image', @@ -23,7 +23,7 @@ export const Image = (knobTab) => { 'light', generalKnobTab, ), - url: boolean('Show image', true, generalKnobTab) ? demoImage() : false, + url: boolean('Show image', true, generalKnobTab) ? generateImage() : false, alt: text('Image alt text', 'Alternative text', generalKnobTab), width: text('Width', '', generalKnobTab), height: text('Height', '', generalKnobTab), diff --git a/components/01-atoms/label/label.stories.js b/components/01-atoms/label/label.stories.js index 84d464b..8d869f1 100644 --- a/components/01-atoms/label/label.stories.js +++ b/components/01-atoms/label/label.stories.js @@ -1,4 +1,4 @@ -import { radios, text } from '@storybook/addon-knobs'; +import { boolean, radios, text } from '@storybook/addon-knobs'; import CivicThemeLabel from './label.twig'; export default { @@ -35,6 +35,8 @@ export const Label = (knobTab) => { generalKnobTab, ), content: text('Content', 'Label content', generalKnobTab), + for: text('For', '', generalKnobTab), + is_required: boolean('Required', false, generalKnobTab), modifier_class: text('Additional classes', '', generalKnobTab), attributes: text('Additional attributes', '', generalKnobTab), }; diff --git a/components/01-atoms/label/label.twig b/components/01-atoms/label/label.twig index 0b70eed..25ef1f2 100644 --- a/components/01-atoms/label/label.twig +++ b/components/01-atoms/label/label.twig @@ -7,6 +7,8 @@ * - content: [string] The label's content. * - size: [string] Label size: extra-large, large, regular, small, extra-small. * - theme: [string] Theme: light, dark. + * - is_required: [boolean] Mark label as requried. + * - for: [string] Which component this label belongs to. * - attributes: [string] Additional attributes. * - modifier_class: [string] Additional classes. */ @@ -14,12 +16,14 @@ {% set size = size in ['extra-large', 'large', 'regular', 'small', 'extra-small'] ? size : 'regular' %} {% set size_class = 'ct-label--%s'|format(size) %} +{% set required_class = is_required ? 'ct-label--required' : '' %} {% set theme_class = 'ct-theme-%s'|format(theme|default('light')) %} -{% set modifier_class = '%s %s %s'|format(theme_class, size_class, modifier_class|default('')) %} +{% set modifier_class = '%s %s %s %s'|format(theme_class, size_class, required_class, modifier_class|default('')) %} {% if content is not empty -%}