Code Monkey home page Code Monkey logo

hlx-test's People

Contributors

benpeter avatar karlpauls avatar larsauffarth avatar mhaack avatar mlangfordsap avatar mng8fe avatar ok avatar pahupe avatar rootpea avatar sanmishr avatar saurabh-khare avatar sdmcraft avatar urfuwo avatar

Stargazers

avatar

Watchers

avatar avatar avatar avatar

Forkers

jeff0926 mlangfordsap

hlx-test's Issues

[Feedback to SAP] sap_glow theme: two design tokens (Font Family) miss "Brand"

In the sap_glow > css_variables.css that Adobe received from SAP, two entries are missing information in two font families:

--udexTypographyBodyXLFontFamily: "72", "Arial", "Helvetica", "sans-serif";
should be:
--udexTypographyBodyXLFontFamily: "72 Brand", "Arial", "Helvetica", "sans-serif";

--udexTypographyBodyXXLFontFamily: "72", "Arial", "Helvetica", "sans-serif";
should be:
--udexTypographyBodyXXLFontFamily: "72 Brand", "Arial", "Helvetica", "sans-serif";

@ok : Please provide us a version of the sap_glow theme with these changes.

Validate usage of Design Tokens

Observations:

  • Design Tokens (SAP CSS Variables) have been used to setup the hlx-text site. Some variables were chosen without proper validation by SAP and need to be validated / corrected by SAP experts
  • Currently, the Design Tokens are loaded multiple times (see #19). The design tokens values differ, so text supposed to show in white (--sapButton_Information_Active_TextColor) actually shows in blue, see Banner elements (https://main--hlx-test--urfuwo.hlx.page/blog/2023/12/being-human-in-the-age-of-ai)

Goals:

  • SAP to pick/indicate the correct design tokens
  • Correct the CSS templates accordingly

Disable hero autoblock

Goals:

  • Remove autoblock hero-generated dangling paragraph tag
  • Decision taken: Do not use autoblocks for heros

Styling of WebComponent HeroBanner

Goal: The HeroBanner styling on article/blog pages matches the design given on https://www.figma.com/file/oSetT4LbatRmXlcB2A7V8Z/Content-Hubs-2024?type=design&node-id=269-30889&mode=design&t=D0jJGSxZlJFSCg4b-0

Reference page (AEM EDS): https://main--hlx-test--urfuwo.hlx.live/blog/2023/12/being-human-in-the-age-of-ai

List of concerns:

  • Text box padding and margin (spacing to the page border)
  • Bounding box of the text (within the element)
  • Technical integration of the background image (see EDS block hero.js code)

Styling: Clarification of responsibilities

Context: Currently, foundational aspects of styling (here: fonts, viewport breakpoints) are defined both in SAP themes as well as project styles.css. We see duplication and blurring of responsibility.

Goals: Responsibilities are clarified, style definitions are provided by the designated artifact.

Examples:

  • Font definition variables exist both in Styles.css and Theme
  • Breakpoints (used by the header) are currently defined in styles.css

mock-header

Implementing a master header with basic styling and navigation links

handling word-expanded youtube links / poster images

when users paste a youtube link to word online, by default word will create a preview of the video
image

in the pipeline HTML, below is what this looks like.

so an option would be to say that **if a <p> with just a <picture> in it follows the youtube link, treat it as the poster image **
that would handle poster images as well. WDYT @mhaack ?

        <p>
          <picture>
            <source type="image/webp" srcset="./media_13b34336646679c901df9e5e97618e0f1198cde10.jpeg?width=2000&#x26;format=webply&#x26;optimize=medium" media="(min-width: 600px)">
            <source type="image/webp" srcset="./media_13b34336646679c901df9e5e97618e0f1198cde10.jpeg?width=750&#x26;format=webply&#x26;optimize=medium">
            <source type="image/jpeg" srcset="./media_13b34336646679c901df9e5e97618e0f1198cde10.jpeg?width=2000&#x26;format=jpeg&#x26;optimize=medium" media="(min-width: 600px)">
            <img loading="lazy" alt="Video titled: SAP Ariba Category Management" src="./media_13b34336646679c901df9e5e97618e0f1198cde10.jpeg?width=750&#x26;format=jpeg&#x26;optimize=medium" width="480" height="360">
          </picture>
        </p>

"Promo Tile" element

Context:

  • The element "Promo Tile" (design ref 23, see below) shall only be embedded in a template at the bottom of the page
  • NOTE: A very similar/same element exists that will be embedded in the body / copy of blog pages (design ref 16), but its design is not yet ready (WIP)
  • UPDATE: There no longer is an "align left" variant

Goals:

  • Rename the AEM EDS block "cta-banner" to "promo tile"
  • Style it according to the design ref Nr. 23 (see references below)
  • Add an instance to the footer, as all promo tiles shall reside in the footer of the page

Non-goals:

  • For the element to be included in the blog body, there will be a separate GH issue

References:

Foundational artifacts can be consumed from SAP CDN

Goal: SAP to provide a set of foundational artifacts at the same domain (mapped-in via CDN):

Foundational artifacts to be provided (mandatory):

  • WebComponent library (excluding lit)
  • Themes
  • Typography

All artifacts shall be provided both in "latest version" and with specific version numbers, so code can fixate the version if needed.

Example URLs (may change, web1.udex.services.sap.com is being used here as a placeholder for the CDN-mapped domain; the versioning pattern is following the jsdelivr URL pattern, but can be changed):

Intended use: All artifacts can directly be consumed by importing them in project code

Hero generates empty paragraphs; remove

Observation: the hero autoblock generates empty paragraphs (in the follow-up section).

Goals: Remove the empty generated paragraph
Non-goals: Remove paragraphs in the editorial source (targeted separately)

Grid system

Goals:

Constraints:

  • Implement them for all five SAP breakpoints (XS, S, M, L, XL)
  • Fixed gutter width: according to the design documentation in Frontify, the gutter (here: horizontal spacing between elements) shall have a fixed width (within each breakpoint)
  • For breakpoint XL, the grid shall be centered horizontally

Missing information:

Validation: Validate fixed gutter width using these pages:

References:

Grid System:

Tiles (for cards):

General Styling iteration 2

Update general styling to reflect designs in Figma.

Main changes:

  • Article cards in list follow the same grid that is being used on existing news.sap.com/blog pages (https://sap.frontify.com/document/223141#/layout/grid-breakpoints):
    ** The cards "stretch", while the gutter space remains fixed (gutter space is determined per breakpoint)
    ** For breakpoint XL, when reaching 1600px+, neither the cards stretch nor the gutter changes, but the margins left and right enlarge ("horizontally centered view"). See https://sap.frontify.com/document/223141#/layout/grid-breakpoints > "The grid will have a fixed width for any resolution higher than 1600px and will not grow further than that."
  • Hero Banners and Title Banners (topic/theme pages) still have full-width (may change with the upcoming second-level nav)
    ** Title Banner text has been aligned with the cards

Not covered in this ticket:

  • Topic / Author pages: Some vertical spacing between header and main area remains

Design references:

Example page: https://main--hlx-test--urfuwo.hlx.page/blog/2023/12/being-human-in-the-age-of-ai

Redirects are managed

Ensure that redirects are in place for the wordpress URLs, making sure any SEO attribution carries.

Template name mismatch for CSS

Issue: The template mapping is not being used for CSS. Specifically, as blog has been renamed to article, this should also load article.css, but it tries to load blog.css.

Article Card refined styling (follow on to #69)

Dani Kim kindly updated theFigma to reflect what's required on the Article Tile

New:
image

Current Implementation:
image

TODOs:

  • use blue pill at top right for "Hot Story", not Type
  • use grey slug line for the Type instead
  • add tags (discuss with Dani and Elaine if these are mandatory, if yes we need them in the index)

Footer - Iteration 2

Goal: Refine the footer that has been created in #3

Changes:

Desktop view:

  • Element on the left (logo, language and contact info)
    -- Horizontal spacing between icon and language selection box is missing (16px?)
    -- Too much space between telefon number and its subtext
    -- Icons are too large / different
    -- Gray background of the lang selection box is missing (note: page design and footer design disagree on this)

  • Go-to-top element
    -- Must be resized (larger)
    -- Is currently aligned with the other elements, but in desktop should not aligned differently

Mobile view

  • Element on the left (logo, language and contact info)
    -- When opening/expanding a section, the horizontal line under the topic header is missing

  • Link lists
    -- Topic header: font is too big, should be
    --udexTypographyHeadingRegularXXXXSFontSize: 16px;
    --udexTypographyHeadingRegularXXXXSFontFamily: "72 Brand", "Arial", "Helvetica", "sans-serif";
    --udexTypographyHeadingRegularXXXXSFontWeight: 400;
    --udexTypographyHeadingRegularXXXXSLineHeight: 18px;
    -- Topic header should be more indented to the right

General padding of page elements:

  • Left/right padding of the footer should align with the rest of the page (global styling). Global styling uses 72px left/right padding for Desktop (from page design).
  • For mobile (640px min width) and tablet view (980px min width), the left/right padding in the global styling can be adapted to the footer (for lack of mobile page design).

Reference:
Designs:

[Auth Eval] Authentication / Authorization Scenario for Digital Design System

Scenario to evaluate:

  • An authorized group (here: SAP employees) shall have access to the site, while everyone else shall be denied access the content
  • Anonymous users shall be redirected to a login

Use Case 1:

  • Anon user accesses the secured site (or a representation thereof)
  • Anon user is redirected to an SAP login page, logs in as a user (who may access the site) and is redirected to the original site / page again
  • The logged-in user can now access the secured site
  • Optional: Logged in user logs out

Use Case 2:

  • Anon user accesses the secured site (or a representation thereof)
  • Anon user is redirected to an SAP login page, logs in as a user (who is still not allowed to access the site) and is redirected to the original site / page
  • The logged-in user still cannot access the secured site, as they are not a member of the authorized group. The user gets an error page (HTTP 404). That page need not be styled.
  • Optional: Logged in user logs out

Technical tasks:

  • Setup a sample page that serves as a representation of the secured site. Publish the page so it becomes available at SAP CDN domain web1.udex.services.sap.com
  • Specify how authorized users can be distinguished from non-authorized users (SAP)
  • Specify login endpoint that anonymous users get redirected to (SAP)
  • Implement a simple solution using SAP (Akamai) Edge workers
  • Constraints: use HTTP-only, secure cookies on the client side only (no JS code)

Load theme init ui5 comp

Goals: Load the respective theme and initialize the web components accordingly

The theme is specified in metadata.xls in column 'SAP-Theme'

Example for theme 'sap_glow':

<script data-ui5-config type="application/json">{"theme": "sap_glow"}</script>

WebC EDS artifact: reduce to max

Goals:

  • Generate one WebC EDS artifact (= JS library) that contains all relevant code for all WebComponents, but does not contain code that is already consumed in EDS:
    ** Obsolete Themes
    ** Fonts
    ** Lit (loaded separately in EDS)
    ** Design Tokens (CSS Variables)

Non-goals of this ticket:

  • Split the WebC EDS artifact into chunks (Foundation, Extension A, Extension B) - can be evaluated later
  • Make the WebC EDS artifact available via a CDN - can be done later

Footer new design

Goals: Implement the new footer design

NOTE: There are a few open pending questions (mismatches between our footer and the "standard" footer: https://adobe-dx-support.slack.com/archives/C06H8UNQ3RS/p1707236316695689

References:

[Feedback to SAP] next page design iteration: missing design examples

Context: SAP has provided a design example ("Concept A") for next-gen content hub blog pages here: https://www.figma.com/file/oSetT4LbatRmXlcB2A7V8Z/Content-Hubs-2024?type=design&node-id=269-30889&mode=design&t=RZkr5VBRC2kSmAUI-0. This design example is intended to be the foundation of the content hub / blog pages.

The example is fine, but unfortunately missing certain aspects, and therefore the design implementation in Adobe AEM EDS must make a lot of assumptions.

Please add illustrations for the following aspects to the example:

Content Hub Masthead

Goal: Implement the content hub header

The Master Header on the Content Hub implements Global navigation, allowing users to access different sections of Content Hub i.e. Blogs, News, Press Release and so on.
It supports two level navigation where users can first land on the hub and based on the contents on the hub the second level navigation is populated.
All the navigation links are manually contributed, where a Global content team contributes to the document (globalnav.docx/nav.docx) and every hub team contributes their own second level navigation.
image (1)
image (2)
image

Global navigation (top-level) features Explore section (different from Explore SAP) which opens a flyout menu where user can seek further information regarding content hub.
Ref: https://news.sap.com/2023/12/being-human-in-the-age-of-ai/ > top line (SAP News Center)

NOTE: The header does not comprise the breadcrumb line "Corporate Blog"

Design:
Old design: https://www.figma.com/file/OFEfvhyXJvYJ6MQZ30699m/v2.0-Brand-Digital-Design-System?type=design&node-id=2822%3A829&mode=design&t=2HIhIC3XND2WyiZb-1
New Content hub design: https://www.figma.com/file/oSetT4LbatRmXlcB2A7V8Z/Content-Hubs-2024?type=design&node-id=269-30889&mode=design&t=fud1mE0It37v2hWa-0

Specifications(Old): https://sap.frontify.com/document/223143#/-/masthead

Header documentation:
https://github.wdf.sap.corp/pages/designsystem/sap-simple-elements/?path=/docs/header-integration-guide--get-started

Test Explore SAP menu JSON URL
https://contextualnavigation.api.community-qa.sap.com/navigation_explore_sap/explore_sap/de/data_latest.json

Assumptions:
As of now implementation of Explore SAP is out of scope and lies with the development of master header UI5 web component

Disable hero autoblocking

Context: A decision was taken to not use autoblocking for hero.
Goals: Remove autoblocking entirely, as there are no other use-cases

Hero Banner (Media Blend variant) as EDS block

Goals:

  • Implement the Media Blend Hero Banner variant as an Adobe AEM EDS block
  • Use this implementation as an example (for SAP) wrt/ AEM EDS best practices

Constraints:

  • For this scope of this ticket, omit the subcomponents for which we don't have metadata / content, such as:
    ** stars/ratings
    ** avatar
    ** CTAs/buttons
  • Media element:
    ** Implement a version with a background image (instead of a video) first. Reason: All existing hero banner content has an image, not a video (ref: https://main--hlx-test--urfuwo.hlx.page/blog/2023/12/being-human-in-the-age-of-ai)
    ** Optional (can be split into separate ticket): Implement a video media element, as shown in the designs. Make use of the video wrapper implemented by @benpeter

References:

Header - Iteration 2

Goal: Refine the header that has been created in #75

Changes:

  • When you resize the window to something between 980px and 1030px, then the icons on the rights (search, language switch) are cut-off. That should be changed

  • When you resize the header to mobile view, the remaining elements are not vertically aligned (centered). Instead, the SAP logo appears to be too high / too close to the top, while the burger icon and the other icons appear to be too close to the bottom. I believe all should be vertically aligned

  • When you resize the header to mobile view, the site label ("News Center") should not disappear, but remain, see https://www.figma.com/file/OFEfvhyXJvYJ6MQZ30699m/v2.0-Brand-Digital-Design-System?type=design&node-id=2822-829&mode=design&t=yNwqt7UTEFznnIXP-0

  • The header-wrapper and the header (block) divs have different heights (64px vs 60px). I believe they should have the same height to make the next element (the hero) "bump up" against it and make the header entries look correctly vertically centered within the header element. Or else they look slightly "too high" (because they are centered in the header, but not centered in the header-wrapper)

General point of discussion:

  • Does it help to make the structure of the navigation - at the editorial level - more uniform by converting all sections into bullet lists (ul/li). This way, the navigation structures would not requires dedicated CSS for p as well as for ul/li

References:

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.