Skip to content
New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

chore(deps): update gcds-components, gcds-tokens, gcds-utility packages #443

Merged
merged 11 commits into from
Dec 11, 2024
Merged

chore(deps): update gcds-components, gcds-tokens, gcds-utility packages #443

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
8adb161
chore(deps): update gcds-components, gcds-tokens, gcds-utility packages
daine Dec 5, 2024
d3d6415
refactor: update docs site with new typography and spacing
melaniebmn Dec 10, 2024
7963ff6
refactor: update docs site with new typography and spacing
melaniebmn Dec 10, 2024
f0ac260
refactor: update docs site with new typography and spacing
melaniebmn Dec 10, 2024
f1583b7
refactor: update container, heading + text guidance based on new prop…
melaniebmn Dec 10, 2024
fd36526
chore: revert accidental colour updates
melaniebmn Dec 10, 2024
ad0808a
Update .eleventy.js
melaniebmn Dec 11, 2024
bb1a0a1
Update src/_includes/partials/token_table.njk
melaniebmn Dec 11, 2024
dc33614
chore: update text guidance
melaniebmn Dec 11, 2024
6453180
chore: update text guidance
melaniebmn Dec 11, 2024
eebf7d2
chore: update tokens package
melaniebmn Dec 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 14 additions & 5 deletions .eleventy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -195,8 +195,8 @@ module.exports = function (eleventyConfig) {
}

return `
<div class="code-showcase mb-400">
<textarea class="showcase text-light mb-400 p-400" id="${id}" rows="8" aria-label="${langStrings[lang].code} - ${name}" aria-hidden="true" readonly>${content}</textarea>
<div class="code-showcase mb-300">
<textarea class="showcase text-light mb-300 p-300" id="${id}" rows="8" aria-label="${langStrings[lang].code} - ${name}" aria-hidden="true" readonly>${content}</textarea>
<div>
<gcds-button
class="showcase-view-button"
Expand Down Expand Up @@ -268,7 +268,7 @@ module.exports = function (eleventyConfig) {
githubLink = 'https://github.com/cds-snc/gcds-components';
}
return `
<ul class="d-flex flex-wrap gap-400">
<ul class="d-flex flex-wrap gap-300">
${stageChip} <li class="github-link">
<gcds-link external href="${githubLink}">${langStrings[locale].github}</gcds-link>
</li> ${figmaLink}
Expand All @@ -278,12 +278,12 @@ module.exports = function (eleventyConfig) {

eleventyConfig.addPairedShortcode(
'componentPreview',
(children, title, padding = 'px-300 py-400', margin = 'my-500') => {
(children, title, padding = 'px-225 py-300', margin = 'my-600') => {
const content = children;

return `
<div class="${margin} b-sm b-default component-preview" id="component-preview">
<p class="container-full font-semibold px-300 py-200 bb-sm b-default bg-light">
<p class="container-full font-semibold px-225 py-150 bb-sm b-default bg-light">
${title}
</p>
<div class="${padding}">
Expand All @@ -301,6 +301,15 @@ module.exports = function (eleventyConfig) {
return displayTokens(token, subCategory, locale);
});

/*
* Convert string from camelCase to kebab-case
*/
eleventyConfig.addFilter("camelToKebab", function(str) {
return str.replace(/[a-z][A-Z]/g, function(match) {
return match[0] + '-' + match[1].toLowerCase();
}).toLowerCase();
});

// Misc

eleventyConfig.setLibrary('md', markdownLibrary);
Expand Down
2 changes: 1 addition & 1 deletion examples/component-name/design.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,6 @@ tags: ['{navKey}{locale}', 'design']
<li><strong>list</strong></li>
</ol>

<img class="b-sm b-default p-400" src="/images/{locale}/components/anatomy/gcds-{componentNameSlugEN}-anatomy.svg" alt="An image of the anatomy." />
<img class="b-sm b-default p-300" src="/images/{locale}/components/anatomy/gcds-{componentNameSlugEN}-anatomy.svg" alt="An image of the anatomy." />

## {designA11y}
4 changes: 2 additions & 2 deletions examples/component-name/use-case.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,8 @@ Use a {componentName}

-

<article class="bg-full-width bg-primary text-light pt-500 pb-400 my-500">
<h2 class="mt-0 mb-400">{relatedComponents}</h2>
<article class="bg-full-width bg-primary text-light pt-600 pb-300 my-600">
<h2 class="mt-0 mb-300">{relatedComponents}</h2>

<a href="" class="link-light">component</a>

Expand Down
6 changes: 3 additions & 3 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,9 +34,9 @@
},
"devDependencies": {
"@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
"@cdssnc/gcds-components": "^0.26.2",
"@cdssnc/gcds-tokens": "^1.19.1",
"@cdssnc/gcds-utility": "^1.4.0",
"@cdssnc/gcds-components": "^0.28.0",
"@cdssnc/gcds-tokens": "^2.0.1",
"@cdssnc/gcds-utility": "^1.5.0",
"@quasibit/eleventy-plugin-sitemap": "^2.1.4",
"chroma-js": "^2.4.2",
"eleventy-plugin-svg-contents": "^0.7.0",
Expand Down
6 changes: 3 additions & 3 deletions src/404.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,10 @@ nocrawl: true
locale: en
---

<h1 class="mt-300 mb-400">
Page could not be found | <span lang="fr">Page introuvable</span>
<h1 class="mt-0 mb-300">
Page could not be found <br/><span lang="fr">Page introuvable</span>
</h1>

Check you’ve entered the correct web address.

<p class="mb-400" lang="fr">Assurez-vous d’avoir saisi la bonne adresse Web.</p>
<p class="mb-300" lang="fr">Assurez-vous d’avoir saisi la bonne adresse Web.</p>
4 changes: 2 additions & 2 deletions src/_includes/layouts/base.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,10 +41,10 @@
{% include "partials/header.njk" %}

<div class="content-wrapper">
<main id="mc" class="container-xl mx-auto xl:px-0 sm:px-500 px-300 general-layout" {% if not nocrawl %}data-pagefind-body{% endif %}>
<main id="mc" class="container-xl mx-auto xl:px-0 sm:px-600 px-225 general-layout" {% if not nocrawl %}data-pagefind-body{% endif %}>
{% block content %}{{ content | safe }}{% endblock %}

<gcds-date-modified class="mb-400 font-caption">
<gcds-date-modified class="mb-300">
{{ page.date | dateLastModified}}
</gcds-date-modified>
</main>
Expand Down
2 changes: 1 addition & 1 deletion src/_includes/layouts/component-documentation.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
{% block content %}
{% if tabs %}
{{ tabs.header.templateContent | safe }}
<nav class="tabs mb-400" aria-label="{{ tabsnav[locale].label }}">
<nav class="tabs mb-300" aria-label="{{ tabsnav[locale].label }}">
<ul>
{% for key, tab in documentation[locale] %}
{% if tabs[key].url %}
Expand Down
41 changes: 20 additions & 21 deletions src/_includes/layouts/demo.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,14 @@
layout: "layouts/base.njk"
---

<section class="py-600">
<h1 class="container-full text-center mb-500">{{ demo[locale].heading }}</h1>
<section class="py-900">
<h1 class="container-full text-center mb-600">{{ demo[locale].heading }}</h1>

<h2>{{ demo[locale].subheading }}</h2>

{# ------------- Alerts ------------- #}

<h3 class="container-full mt-500 mb-400 bb-sm">{{ demo[locale].alerts.heading }}</h3>
<h3 class="container-full mt-600 mb-300 bb-sm">{{ demo[locale].alerts.heading }}</h3>
<gcds-alert heading="{{ demo[locale].alerts.content.heading }}" alert-role="success" container="xl">
<p>{{ demo[locale].alerts.content.text }}</p>
</gcds-alert>
Expand All @@ -25,7 +25,7 @@ layout: "layouts/base.njk"

{# ------------- Breadcrumbs ------------- #}

<h3 class="container-full mt-500 mb-400 bb-sm">{{ demo[locale].breadcrumbs.heading }}</h3>
<h3 class="container-full mt-600 mb-300 bb-sm">{{ demo[locale].breadcrumbs.heading }}</h3>

<gcds-breadcrumbs slot="breadcrumb">
<gcds-breadcrumbs-item href="{{ demo[locale].breadcrumbs.content.gcLink }}">
Expand All @@ -38,7 +38,7 @@ layout: "layouts/base.njk"

{# ------------- Buttons ------------- #}

<h3 class="container-full mt-500 mb-400 bb-sm">{{ demo[locale].buttons.heading }}</h3>
<h3 class="container-full mt-600 mb-300 bb-sm">{{ demo[locale].buttons.heading }}</h3>
<gcds-button button-role="primary">
{{ demo[locale].buttons.content.primary }}
</gcds-button>
Expand All @@ -65,7 +65,7 @@ layout: "layouts/base.njk"

{# ------------- Container ------------- #}

<h3 class="container-full mt-700 mb-400 bb-sm">{{ demo[locale].containers.heading }}</h3>
<h3 class="container-full mt-600 mb-300 bb-sm">{{ demo[locale].containers.heading }}</h3>
<gcds-container container="full">
<div class="p-200 b-sm">{{ demo[locale].containers.content.full }}</div>
</gcds-container>
Expand All @@ -80,19 +80,19 @@ layout: "layouts/base.njk"

{# ------------- Date modified ------------- #}

<h3 class="container-full mt-700 mb-400 bb-sm">{{ demo[locale].dateModified.heading }}</h3>
<h3 class="container-full mt-600 mb-300 bb-sm">{{ demo[locale].dateModified.heading }}</h3>
<gcds-date-modified>2023-01-26</gcds-date-modified>

{# ------------- Details ------------- #}

<h3 class="container-full mt-700 mb-400 bb-sm">{{ demo[locale].details.heading }}</h3>
<h3 class="container-full mt-600 mb-300 bb-sm">{{ demo[locale].details.heading }}</h3>
<gcds-details details-title="{{ demo[locale].details.content.heading }}">
<p>{{ demo[locale].details.content.text }}</p>
</gcds-details>

{# ------------- Footer ------------- #}

<h3 class="container-full mt-700 mb-400 bb-sm">{{ demo[locale].footer.heading }}</h3>
<h3 class="container-full mt-600 mb-300 bb-sm">{{ demo[locale].footer.heading }}</h3>
<gcds-footer
display="full"
contextual-heading="{{ demo[locale].footer.content.contextualHeading }}"
Expand Down Expand Up @@ -178,13 +178,12 @@ layout: "layouts/base.njk"

{# ------------- Grid ------------- #}

<h3 class="container-full mt-700 mb-400 bb-sm">{{ demo[locale].grid.heading }}</h3>
<h3 class="container-full mt-600 mb-300 bb-sm">{{ demo[locale].grid.heading }}</h3>
<gcds-grid
tag="article"
columns-desktop="1fr 1fr 1fr 1fr"
columns-tablet="1fr 1fr"
columns="1fr"
gap="500"
>
<p>{{ demo[locale].grid.content.text }}</p>
<p>{{ demo[locale].grid.content.text }}</p>
Expand All @@ -194,7 +193,7 @@ layout: "layouts/base.njk"

{# ------------- Header ------------- #}

<h3 class="container-full mt-700 mb-400 bb-sm">{{ demo[locale].header.heading }}</h3>
<h3 class="container-full mt-600 mb-300 bb-sm">{{ demo[locale].header.heading }}</h3>
<gcds-header
lang="{{ demo[locale].header.content.lang }}"
lang-href="#"
Expand Down Expand Up @@ -222,8 +221,8 @@ layout: "layouts/base.njk"

{# ------------- Icons ------------- #}

<h3 class="container-full mt-700 mb-400 bb-sm">{{ demo[locale].icons.heading }}</h3>
<gcds-icon name="tree" size="caption" margin-right="200"></gcds-icon>
<h3 class="container-full mt-600 mb-300 bb-sm">{{ demo[locale].icons.heading }}</h3>
<gcds-icon name="tree" size="text-small" margin-right="200"></gcds-icon>
<gcds-icon name="tree" size="text" margin-right="200"></gcds-icon>
<gcds-icon name="tree" size="h6" margin-right="200"></gcds-icon>
<gcds-icon name="tree" size="h5" margin-right="200"></gcds-icon>
Expand All @@ -232,8 +231,8 @@ layout: "layouts/base.njk"
<gcds-icon name="tree" size="h2" margin-right="200"></gcds-icon>
<gcds-icon name="tree" size="h1" margin-right="200"></gcds-icon>

<h4 class="mt-500 mb-300">{{ demo[locale].icons.content.fixed }}</h4>
<gcds-icon name="tree" size="caption" fixed-width></gcds-icon>
<h4 class="mt-600 mb-300">{{ demo[locale].icons.content.fixed }}</h4>
<gcds-icon name="tree" size="text-small" fixed-width></gcds-icon>
<gcds-icon name="tree" size="text" fixed-width></gcds-icon>
<gcds-icon name="tree" size="h6" fixed-width></gcds-icon>
<gcds-icon name="tree" size="h5" fixed-width></gcds-icon>
Expand All @@ -242,8 +241,8 @@ layout: "layouts/base.njk"
<gcds-icon name="tree" size="h2" fixed-width></gcds-icon>
<gcds-icon name="tree" size="h1" fixed-width></gcds-icon>

<h4 class="mt-500 mb-300">{{ demo[locale].icons.content.variable }}</h4>
<gcds-icon name="tree" size="caption"></gcds-icon>
<h4 class="mt-600 mb-300">{{ demo[locale].icons.content.variable }}</h4>
<gcds-icon name="tree" size="text-small"></gcds-icon>
<gcds-icon name="tree" size="text"></gcds-icon>
<gcds-icon name="tree" size="h6"></gcds-icon>
<gcds-icon name="tree" size="h5"></gcds-icon>
Expand All @@ -254,7 +253,7 @@ layout: "layouts/base.njk"

{# ------------- Pagination ------------- #}

<h3 class="container-full mt-700 mb-400 bb-sm">{{ demo[locale].pagination.heading }}</h3>
<h3 class="container-full mt-600 mb-300 bb-sm">{{ demo[locale].pagination.heading }}</h3>

<p>{{ demo[locale].pagination.content.list }}:</p>
<gcds-pagination
Expand All @@ -267,7 +266,7 @@ layout: "layouts/base.njk"
pageChangeHandler={}
></gcds-pagination>

<p class="mt-500">{{ demo[locale].pagination.content.simple }}:</p>
<p class="mt-600">{{ demo[locale].pagination.content.simple }}:</p>
<gcds-pagination
display="simple"
label="{{ demo[locale].pagination.content.simple }}"
Expand All @@ -279,7 +278,7 @@ layout: "layouts/base.njk"

{# ------------- Phase banner ------------- #}

<h3 class="container-full mt-700 mb-400 bb-sm">{{ demo[locale].phaseBanner.heading }}</h3>
<h3 class="container-full mt-600 mb-300 bb-sm">{{ demo[locale].phaseBanner.heading }}</h3>
<gcds-phase-banner banner-role="primary">
<gcds-icon name="tree" size="sm" slot="banner-icon-left"></gcds-icon>
<p slot="banner-text">{{ demo[locale].phaseBanner.content.text }}</p>
Expand Down
12 changes: 6 additions & 6 deletions src/_includes/layouts/home.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,25 +43,25 @@

<main id="mc" class="general-layout">
<section>
<div class="xl:py-900 md:py-800 py-600 hero">
<div class="md:py-1250 py-900 hero">
<div class="container-xl mx-auto">
<article class="sm:py-550 py-450 xl:ps-0 sm:ps-500 ps-450 sm:pe-550 pe-400 bg-primary text-light hero__content">
<h1 class="mb-400">
<article class="sm:py-750 py-450 xl:ps-0 sm:ps-600 ps-450 sm:pe-750 pe-300 bg-primary text-light hero__content">
<h1 class="mb-300">
<span class="d-block">{{ homehero[locale].gcds }}</span>
</h1>
<p class="mb-400">{{ homehero[locale].paragraph }}</p>
<p class="mb-300">{{ homehero[locale].paragraph }}</p>
<a class="link-light" href="{{ homehero[locale].link }}">{{ homehero[locale].linkText }}</a>
</article>
</div>
</div>
</section>

<section class="container-xl mx-auto xl:px-0 sm:px-500 px-300">
<section class="container-xl mx-auto xl:px-0 sm:px-600 px-225">
{% block content %}{{ content | safe }}{% endblock %}

{% include "partials/helpus.njk" %}

<gcds-date-modified class="mb-400 font-caption">
<gcds-date-modified class="mb-300">
{{ page.date | dateLastModified}}
</gcds-date-modified>
</section>
Expand Down
6 changes: 3 additions & 3 deletions src/_includes/partials/card-list.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@
{% endif %}

{% if (cardlist.type === 'components' or cardlist.type === 'foundations') and cardlist.state === 'published' %}
<div class="my-500">
<gcds-grid tag="ul" columns="1fr" columns-tablet="1fr 1fr" columns-desktop="1fr 1fr 1fr" gap="400">
<div class="my-600">
<gcds-grid tag="ul" columns="1fr" columns-tablet="1fr 1fr" columns-desktop="1fr 1fr 1fr">
{%- for entry in navPages %}
{% if entry.state == cardlist.state %}
<gcds-card
Expand All @@ -22,7 +22,7 @@
>
<gcds-text >{{ entry.description }}</gcds-text>
{% if entry.otherNames %}
<gcds-text text-role="secondary" size="caption" margin-bottom="0">
<gcds-text text-role="secondary" size="small" margin-bottom="0">
<em>{{ documentation[locale].othernames }}{{ entry.otherNames }}</em>
</gcds-text>
{% endif %}
Expand Down
4 changes: 2 additions & 2 deletions src/_includes/partials/components-tags.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<h2 id="component-tags" class="mt-500 mb-400">{{ componenttags[locale].heading }}</h2>
<h2 id="component-tags" class="mt-600 mb-300">{{ componenttags[locale].heading }}</h2>

{% for value in componenttags[locale].paragraphs %}
<p class="mb-400">{{ value }}</p>
<p class="mb-300">{{ value }}</p>
{% endfor %}
6 changes: 3 additions & 3 deletions src/_includes/partials/helpus.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<section data-pagefind-ignore class="pt-100 mt-400 mb-600 {% if removeBorder %} {% else %}bt-sm b-dark {% endif %}">
<h2 class="mt-300 mb-400">
<section data-pagefind-ignore class="pt-75 mt-300 mb-900 {% if removeBorder %} {% else %}bt-sm b-dark {% endif %}">
<h2 class="mt-225 mb-300">
{{ helpus[locale].heading }}
</h2>

<p class="mb-400">
<p class="mb-300">
{{ helpus[locale].paragraph }}
</p>

Expand Down
4 changes: 2 additions & 2 deletions src/_includes/partials/installation/step-1.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<div class="mt-550 pt-550 pb-450 bg-full-width bg-light">
<h2 class="mb-400">{{ installation[locale].step1.heading }}</h2>
<div class="mt-750 pt-750 pb-450 bg-full-width bg-light">
<h2 class="mb-300">{{ installation[locale].step1.heading }}</h2>
<p class="mb-450">{{ installation[locale].step1.paragraph }}</p>
<gcds-select
name="select-environment"
Expand Down
14 changes: 7 additions & 7 deletions src/_includes/partials/installation/step-2-angular.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
<div id="step-2-angular" class="py-550 step-2-content">
<h2 class="mb-400">{{ installation[locale].step2.heading }}</h2>
<p class="mb-400">{{ installation[locale].step2.angular.paragraph }}</p>
<div id="step-2-angular" class="py-750 step-2-content">
<h2 class="mb-300">{{ installation[locale].step2.heading }}</h2>
<p class="mb-300">{{ installation[locale].step2.angular.paragraph }}</p>

<h3 class="mt-500 mb-400">{{ installation[locale].step2.angular.heading }}</h3>
<p class="mb-400">{{ installation[locale].step2.angular.install }}</p>
<h3 class="mt-600 mb-300">{{ installation[locale].step2.angular.heading }}</h3>
<p class="mb-300">{{ installation[locale].step2.angular.install }}</p>

{% highlight "js" %}
npm install @cdssnc/gcds-components @cdssnc/gcds-components-angular
{% endhighlight %}

<p class="mt-500 mb-400">{{ installation[locale].step2.angular.placeApp | safe }}</p>
<p class="mt-600 mb-300">{{ installation[locale].step2.angular.placeApp | safe }}</p>

{% highlight "js" %}
import { GcdsComponentsModule } from '@cdssnc/gcds-components-angular';
Expand All @@ -29,7 +29,7 @@ import { GcdsComponentsModule } from '@cdssnc/gcds-components-angular';
export class AppModule { }
{% endhighlight %}

<p class="mt-500 mb-400">{{ installation[locale].step2.angular.placeStyles | safe }}</p>
<p class="mt-600 mb-300">{{ installation[locale].step2.angular.placeStyles | safe }}</p>

{% highlight "js" %}
@import '../node_modules/@cdssnc/gcds-components/dist/gcds/gcds.css';
Expand Down
Loading
Loading