Release/2023-51-0 #394
Merged
Release/2023-51-0 #394
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
Implemented a new SCSS mixin named 'container' to handle different container sizes: small, medium, and large. This mixin allows for dynamic styling based on the specified size parameter. Styles for 'small' and 'large' sizes are structured for future customization, while the 'medium' size is currently set with a max-width of 1440px and centered margin.
Introduced markup and CSS for `EventHeader`, now included in `EventPage`. Additionally, made small modifications to the `tag` component to allow the addition of extra CSS classes. In typography, I introduced a placeholder for `.text-header-h1` to facilitate future extension of this class
Enabling user experimentation with various images.
CSS handles uppercase transformation
-Removed the `className` property from the `Button` component due to redundancy. - Planned additional refactoring to extend the "button" classes within `event-header__button`
Extracted into a separate component to facilitate easy integration in diverse application areas.
…as` for content positioning. Removed unnecessary wrapper div in `.event-header__content` for better semantic structure
…prette-arrangement Add `EventPage` + `EventHeader`
multiple values + Refactor list-description css I need a slightly different visual presentation for the list description on the event page, so I have changed the original CSS class to be able to add a BEM modifier: `.list-description--event`
The `EventDescription` component is now part of the `EventPage`. It includes all the necessary markup and CSS for the description section. The properties for `EventDescription` have been added to `EventPage.stories`, as it is used exclusively within the `EventPage`.
To adhere to the BEM methodology for our CSS, I have added BEM classes for the `dt` and `dd` elements. The "old" html selectors should be removed once the new classes are integrated and merged into dpl-react.
Replaced grid-template-areas with a div wrapper to enhance layout stability.
Replaced margin-top in `.event-header__tag` with additional padding in `.event-header__content`.
`.list-description`
…eskrivelse Add `EventDescription` component + Refactor `ListDescription` component
DDFFORM-6
DDFFORM-6
This folder was being generated on each CSS change, in order to reflect changes in the CMS when using 'dapple' setup. I guess it doesn't hurt adding it here.
Added addtional link for /advanced-search for clarity. DDFFORM-6
Some icons that were used for animations were imported as react components, and have been modified with styling used for the animations. This styling was not updated in the public/ folder, which is the one being used in the CMS, and therefore the styling was not consistent. I've changed the namings of the icons to be consistent with what the react components are using and added a readme . Comment on the contents of the readme.md file.
Since we're using "source" to use inline SVG's in twig for the cms, we can't add classes directly to the svg. Because of this i changed the layout of the link icon to use grid, instead of flexbox, and removed the class on the svg.
Also added reference in icons folder. DDFFORM-6
This is a major overhaul and refactoring of all the basics. It moves shared items out of the individual stories, and into mixins, variables and other base files. One of the major things is that it streamlines typography: It introduces a variables.typography.scss file, that defines all the typographies, and a @include typography($VARIABLE) to use them. This way, we can keep track of typographies, and have a single place to look when we make new modules. This way, we also have an easy way of quality-secure against figma. All of this is the first step. There is still a lot of stuff that needs to be fixed. To begin with, I've made sure that all existing classes still work. E.g. '.text-h1' will still compile to the same, but in SCSS we cant use %text-h1 anymore. A future step is to look through all the stuff I've marked as 'legacy', and tweak/remove/edit the classes throughout dpl-cms, react and other places.
This is needed to support display of prices. In storybook we control this using a new layout attribute. List data with column layout gets this new class. Update list description data with a priuce example which uses this new layout. DDFFORM-57
Instead of each category/price being an entry they are instead grouped under the price entry. To prevent multiple elements from wrapping we use the new column layout. DDFFORM-57
…rything Re-factor and streamline the SCSS basics.
…nkskomponent-liste DDFFORM 6 linkskomponent liste
Fix SCS after merge conflict.
This is necessary to maintain the aspect ratio of images.
This component is used for WYSIWYG content. E.g. we cannot control classes of the underlying elements, so in this case we will target HTML tags instead.
…tikler-brodtekst Rich text / WYSIWYG styling. DDFFORM-5.
Add `height: auto` to img Elements
- Implement `%identity-placeholder` to set the background color and apply a bold border. - Introduce `image-credited__no-image` class that extends `%identity-placeholder`.
…ovedbillede-til-arrangement Adding 'Identity' CSS for missing `event` image
…illedeparagraph Styling for 'medias' component, supporting 1 or 2 images. DDFFORM-73
It worked in Storybook, but not in Drupal. That is because Storybook adds its own wrapper, which made it appear correct.
…-placeholder Add media query for border width for `%identity-placeholder`
Noticed this was not responsive on chromatic. I didn't refactor and change this old code to the new standard. I just fixed it so the component works in mobile.
Fix rich text + Re-factor layout max width as a mixin
…responsive-stories fix old non responsive stories
Reflect changes in dpl-cms where the hero image always comes with an aspect ratio of 4:6.
…rrangement-hoved-billede-skal-bruge-4-3-format Update aspect ratio in `ImageCredited`
Changed arrow from large to small DDFFORM-97
…ent-fixes links komponent fixes
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.
No description provided.