Add heading component #306
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
@ethanWallace reverting this back to a draft since we decided on adding the default margins. |
melaniebmn
force-pushed
the
add-heading-component
branch
from
8f71444
to
07ff4e3
Compare
melaniebmn
commented
Oct 30, 2023
packages/web/src/components/gcds-heading/stories/gcds-heading.stories.tsx
Show resolved
Hide resolved
|
Update: Added the default margin values for the heading levels. Margin-bottom will use |
melaniebmn
added a commit
that referenced
this pull request
Nov 1, 2023
* chore: synced file(s) with cds-snc/site-reliability-engineering (#323) chore: synced local '.github/workflows/backstage-catalog-helper.yml' with remote 'tools/sre_file_sync/backstage-catalog-helper.yml' Co-authored-by: sre-read-write[bot] <92993749+sre-read-write[bot]@users.noreply.github.com> * Add heading component (#306) * wip: add heading component * add heading component * add prettier formatting for storybook overview files + add missing resources links for signature * add figma link to heading resources * add default margins to heading component * add default value in events & properties table for heading story * fix: Change slot CSS in gcds-breadcrumbs to display text underline (#325) Change slot CSS in gcds-breadcrumbs to display text underline * Prep for v 0.16.0 (#326) * update EN changelog * create version v 0.16.0 * update EN changelog * update tokens --------- Co-authored-by: sre-read-write[bot] <92993749+sre-read-write[bot]@users.noreply.github.com> Co-authored-by: Ethan Wallace <ethan.wallace.91@gmail.com>
melaniebmn
added a commit
that referenced
this pull request
Nov 15, 2023
* chore: synced file(s) with cds-snc/site-reliability-engineering (#323) chore: synced local '.github/workflows/backstage-catalog-helper.yml' with remote 'tools/sre_file_sync/backstage-catalog-helper.yml' Co-authored-by: sre-read-write[bot] <92993749+sre-read-write[bot]@users.noreply.github.com> * Add heading component (#306) * wip: add heading component * add heading component * add prettier formatting for storybook overview files + add missing resources links for signature * add figma link to heading resources * add default margins to heading component * add default value in events & properties table for heading story * fix: Change slot CSS in gcds-breadcrumbs to display text underline (#325) Change slot CSS in gcds-breadcrumbs to display text underline * Prep for v 0.16.0 (#326) * update EN changelog * create version v 0.16.0 * update EN changelog * chore: synced file(s) with cds-snc/site-reliability-engineering (#324) chore: synced local '.github/workflows/backstage-catalog-helper.yml' with remote 'tools/sre_file_sync/backstage-catalog-helper.yml' Co-authored-by: sre-read-write[bot] <92993749+sre-read-write[bot]@users.noreply.github.com> * fix: give `npm publish` time to complete (#329) fix: give npm publish time to complete Update the CDN publish step to sleep for `60s` so that the npm publish has time to complete. * chore(deps): lock file maintenance (#327) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(deps): update js-devtools/npm-publish digest to 8d0621f (#330) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * Add catalog-info.yaml (#332) Co-authored-by: melaniebmn <melaniebmn@users.noreply.github.com> * feat: Link component (#305) * feat: init link component files (copied button component) * feat: wip link component * chore: updated component and tests * wip: component changes and stories * chore: add referrerpolicy inherited attribute * chore: update link component to implementation requirements also adds icons for email, download and phone numbers * chore: update gcds-tokens package version * fix: failing tests on introduction of non nullable attribute * chore: replace Tag placeholder with a tag, add a11y considerations * chore: remove unused css conditions for button text * chore: update css and update tags on index.html * chore: update spec tests * chore: refactor / moved function * chore: remove unnecessary slot * chore: updates (noreferrer, required props, validation thoughts) * chore: remove click handler * chore: update link storybook * chore: update default value for display storybook link component * chore: remove "inherit" from display * feat: add inherit as an option on size property * chore: add todos for PR review questions * chore: update todos, add variant tests for sizes, change prop target to string * fix: event emmitters and cleanup * chore: update build * test: add more tests, and some cleanup * chore: update stories * chore: update package for gcds-tokens to v1.10.0 * chore: add back button text only styling * chore: revert button styling * chore: css updates * chore: update default display settings * chore: mark optional values, fix case for icon style * chore: lint fix for button css * chore: lint fixes * chore: update i18n labels [en] * chore: update i18n * chore: update focus style, stories * chore: storybook updates * chore: story updates * chore: story updates * chore: update overview page * chore: remove small button * chore: cleanup * chore: change size to default to inherit * chore: update tests, add test for regular sized links * chore: updates a11y test * chore: update css * chore: remove display option inline-block * chore: change slot display for a11y fix and display settings * chore: update target for external story * chore: update story with link sizes * chore: updated text and i18n * chore: update link story * chore: update component build * chore: update tokens package version * chore: css and story updates * update demo page to use gcds-heading component (#334) * add default value for margin top + bottom for text component (#333) * fix gcds-link external icon spacing (#337) * Improve storybook a11y (#338) * storybook: replace boolean + radio controls in stories with select to improve support for assistive technologies * storybook: improved focus styling for control form elements * change focus colour for strybook control elements * revert gcds-error-summary story update * Update version + changelog for v 0.17.0 (#339) * update changelog * update version --------- Co-authored-by: sre-read-write[bot] <92993749+sre-read-write[bot]@users.noreply.github.com> Co-authored-by: Ethan Wallace <ethan.wallace.91@gmail.com> Co-authored-by: Pat Heard <patrick.heard@cds-snc.ca> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: melaniebmn <melaniebmn@users.noreply.github.com> Co-authored-by: Daine Trinidad <daine.trinidad@gmail.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary | Résumé
Add new gcds-heading component, introducing desktop and mobile typography styles for headings.
Supported properties
Tag
Sets the appropriate HTML tag for the selected level.
Character limit
Sets the line length to a maximum amount of characters per line for each heading level, ensuring a comfortable, accessible reading length.
Margin-top
Adds margin above the heading.
Margin-bottom
Adds margin below the heading.
Note: I will add the gcds-heading component to our components together with the gcds-text component in a new PR.