feat(ARC-3816): HetArchief quote block #371
+431
−34
There are no files selected for viewing
This file contains hidden or 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
This file contains hidden or 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
This file contains hidden or 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
This file contains hidden or 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
File renamed without changes.
This file contains hidden or 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
This file contains hidden or 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
This file contains hidden or 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| export * from './BlockAvoQuote'; | ||
| export * from './BlockAvoQuote.editorconfig'; |
This file contains hidden or 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,82 @@ | ||
| import { | ||
| GET_BACKGROUND_COLOR_OPTIONS_ARCHIEF, | ||
| GET_FOREGROUND_COLOR_OPTIONS_ARCHIEF, | ||
| } from '~modules/content-page/const/get-color-options'; | ||
| import { tText } from '~shared/helpers/translation-functions'; | ||
| import { HET_ARCHIEF } from '~shared/types'; | ||
| import type { | ||
| ContentBlockConfig, | ||
| DefaultContentBlockState, | ||
| HetArchiefQuoteBlockComponentState, | ||
| } from '../../../types/content-block.types'; | ||
| import { Color, ContentBlockEditor, ContentBlockType } from '../../../types/content-block.types'; | ||
|
|
||
| import { | ||
| BACKGROUND_COLOR_FIELD, | ||
| BLOCK_FIELD_DEFAULTS, | ||
| BLOCK_STATE_DEFAULTS, | ||
| FOREGROUND_COLOR_FIELD, | ||
| TEXT_FIELD, | ||
| } from '../defaults'; | ||
|
|
||
| export const INITIAL_HET_ARCHIEF_QUOTE_COMPONENTS_STATE = | ||
| (): HetArchiefQuoteBlockComponentState => ({ | ||
| quote: '', | ||
| authorName: '', | ||
| textColor: Color.White, | ||
| frameColor: Color.Black, | ||
| }); | ||
|
|
||
| export const INITIAL_HET_ARCHIEF_QUOTE_BLOCK_STATE = (): DefaultContentBlockState => | ||
| BLOCK_STATE_DEFAULTS({ | ||
| padding: { | ||
| top: 'top-small', | ||
| bottom: 'bottom-small', | ||
| }, | ||
| }); | ||
|
|
||
| export const HET_ARCHIEF_QUOTE_BLOCK_CONFIG = (position = 0): ContentBlockConfig => ({ | ||
| position, | ||
| name: tText('admin/content-block/helpers/generators/hetarchief-quote___quote-kader', {}, [ | ||
| HET_ARCHIEF, | ||
| ]), | ||
| type: ContentBlockType.HetArchiefQuote, | ||
| components: { | ||
| state: INITIAL_HET_ARCHIEF_QUOTE_COMPONENTS_STATE(), | ||
| fields: { | ||
| quote: TEXT_FIELD( | ||
| { | ||
| label: tText('admin/content-block/helpers/generators/hetarchief-quote___quote', {}, [ | ||
| HET_ARCHIEF, | ||
| ]), | ||
| editorType: ContentBlockEditor.TextArea, | ||
| }, | ||
| tText('admin/content-block/helpers/generators/hetarchief-quote___quote-is-verplicht', {}, [ | ||
| HET_ARCHIEF, | ||
| ]) | ||
| ), | ||
| authorName: TEXT_FIELD({ | ||
| label: tText('admin/content-block/helpers/generators/hetarchief-quote___auteur', {}, [ | ||
| HET_ARCHIEF, | ||
| ]), | ||
| validator: undefined, | ||
| }), | ||
| textColor: FOREGROUND_COLOR_FIELD( | ||
| tText('admin/content-block/helpers/generators/hetarchief-quote___tekstkleur', {}, [ | ||
| HET_ARCHIEF, | ||
| ]), | ||
| GET_FOREGROUND_COLOR_OPTIONS_ARCHIEF()[1] | ||
| ), | ||
| frameColor: BACKGROUND_COLOR_FIELD( | ||
| tText('admin/content-block/helpers/generators/hetarchief-quote___kleur-kader', {}, [ | ||
| HET_ARCHIEF, | ||
| ]), | ||
| GET_BACKGROUND_COLOR_OPTIONS_ARCHIEF()[5] | ||
| ), | ||
| }, | ||
|
RobbeBierebeeck marked this conversation as resolved.
|
||
| }, | ||
| block: { | ||
| state: INITIAL_HET_ARCHIEF_QUOTE_BLOCK_STATE(), | ||
| fields: BLOCK_FIELD_DEFAULTS(), | ||
| }, | ||
| }); | ||
|
Contributor
There was a problem hiding this comment. Mixins gebruiken als ook variabelen. Dit ziet er ook goed uit mobiel? |
This file contains hidden or 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,101 @@ | ||
| @use "../../../../shared/styles/settings/variables" as variables; | ||
| @use "../../../../shared/styles/mixins/typography" as typography; | ||
|
|
||
| // Width of the column holding the quote mark (Figma node 455:5722). | ||
| $mark-column-width: variables.$g-spacer-unit * 13; | ||
|
|
||
| // Space between the end of the text column and the frame edge, so the text stays clear of the | ||
| // rounded right side. 24 units is the gap Figma leaves at the design's 1008px frame width. | ||
| $text-inset-right: variables.$g-spacer-unit * 24; | ||
| $text-inset-right-tablet: variables.$g-spacer-unit * 8; | ||
|
|
||
| // Figma node 455:5722: rounded-tr/br only, square on the left. At the design's 228px height CSS | ||
| // clamps both radii to height/2 so this reads as a pill; past ~800px of height it stops growing, | ||
| // which is the point - an unbounded 9999px radius would keep eating into a long quote. | ||
| $frame-radius: 40rem; | ||
| $frame-radius-mobile: 12rem; | ||
|
|
||
| $mark-font-size: variables.$g-spacer-unit * 8; | ||
| $mark-line-height: variables.$g-spacer-unit * 9; | ||
|
|
||
| .c-block-het-archief-quote { | ||
| display: grid; | ||
| grid-template-columns: $mark-column-width 1fr; | ||
| grid-template-areas: | ||
| 'mark quote' | ||
| '. author'; | ||
| margin: 0; | ||
| padding: variables.$g-spacer-unit * 5 $text-inset-right variables.$g-spacer-unit * 5 0; | ||
| background: var(--frame-color); | ||
| color: var(--text-color); | ||
| border-radius: 0 $frame-radius $frame-radius 0; | ||
|
|
||
| // Figma emits the deprecated `word-break: break-word`; this is its modern equivalent. | ||
| overflow-wrap: break-word; | ||
|
|
||
| &__mark { | ||
| grid-area: mark; | ||
|
|
||
| // Figma node 455:5723 sits at top 28 while the quote sits at top 40, so the mark is | ||
| // raised out of the shared grid row and centred in its own column. | ||
| margin-top: -(variables.$g-spacer-unit * 1.5); | ||
| text-align: center; | ||
| font-size: $mark-font-size; | ||
| line-height: $mark-line-height; | ||
|
|
||
| @media (max-width: variables.$g-bp2) { | ||
| // Figma node 455:7187: in the stacked layout the mark is in normal flow and | ||
| // left-aligned with the text below it. | ||
| margin-top: 0; | ||
| text-align: left; | ||
| } | ||
| } | ||
|
|
||
| &__quote { | ||
| grid-area: quote; | ||
| margin: 0; | ||
| white-space: pre-line; | ||
|
|
||
| // Figma node 455:5724, style "P - XL". | ||
| @include typography.sofia-pro-body-xl(); | ||
|
|
||
| @media (max-width: variables.$g-bp2) { | ||
| // Figma node 455:7186: gap below the mark, plus the padding on the text group that | ||
| // holds the quote and the author. | ||
| margin-top: variables.$g-spacer-unit * 2; | ||
| margin-left: variables.$g-spacer-unit; | ||
| } | ||
| } | ||
|
|
||
| &__author { | ||
| grid-area: author; | ||
| margin-top: variables.$g-spacer-unit; | ||
|
|
||
| // Figma node 455:5725, style "P - S". | ||
| @include typography.sofia-pro-body-xs(); | ||
|
|
||
| @media (max-width: variables.$g-bp2) { | ||
| margin-bottom: variables.$g-spacer-unit; | ||
| margin-left: variables.$g-spacer-unit; | ||
| } | ||
| } | ||
|
|
||
| // Below the design's 1008px frame width the desktop inset eats too much of the text column, | ||
| // so it scales back to a third while the pill shape is kept. | ||
| @media (max-width: variables.$g-bp4) { | ||
| padding-right: $text-inset-right-tablet; | ||
| } | ||
|
|
||
| @media (max-width: variables.$g-bp2) { | ||
| grid-template-columns: 1fr; | ||
| grid-template-areas: | ||
| 'mark' | ||
| 'quote' | ||
| 'author'; | ||
|
|
||
| // Figma node 455:7186: a single top-right radius - the desktop's two-corner pill does | ||
| // not carry over to mobile. | ||
| padding: variables.$g-spacer-unit * 3 variables.$g-spacer-unit * 2.5; | ||
| border-radius: 0 $frame-radius-mobile 0 0; | ||
| } | ||
| } |
Oops, something went wrong.
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.
Uh oh!
There was an error while loading. Please reload this page.