top of page

DCL-UI

Digital Adoption of Saffron Design System

Background
Digital is a complex space made up of dozens of work streams and multiple, technology stacks and analytic tools. In an effort to adopt Saffron, our goal is to use Saffron components/tokens. However, multiple work streams within Digital utilize Adobe Analytics which do not currently support our existing Saffron design system.

Why use DCL-UI
Saffron leverages web components using the FAST component library which are heavily reliant on the shadow DOM for slot components and style encapsulation. Adobe Analytics script is not sending data from the shadow DOM allowing tracking of components.

In an effort to proceed with adopting Saffron without having to wait on a resolution, Digital will utilize the existing DCL-UI and update it using Saffron styling.

When to use DCL-UI
01.  When work streams are currently DCL-UI
02. When work streams are using AEM (Adobe Analytics)
03. When work streams are currently blocked using Saffron components

How to use DCL-UI / Digital's version of Saffron
Tokens 
Digital and Saffron teams will come together to implement variations of the hero, flex grid and datepicker tokens. (And any others that come up - but this should be it) This provides the digital team one source of truth for all tokens and prevents having to manually update any future changes. This will also help us make quick and efficient choices when building our components and keep consistency with product to some degree, which ultimately creates a cohesive Thomson Reuters brand.

Saffron will own them in the Saffron Token Library and Digital will provide the team any updates. Saffron will push on their scheduled release dates. Once we have them defined, regardless of if they are in Saffron, this should not impact our work on building out DCL-UI.

Components

Digital will build components based on their needs using the Saffron token library.
 

Our Workstreams

workstreams.png

Example of a Alert / Toast

alert.png
alert-specs.png

Governance

Step 1 is to identify the different usage of components across Digital pod and to identify edge cases that may not be included in the Saffron Component Library and determine if a variant needs to be contributed back to the Design System.    Here is one example of the multiple variations of buttons.  

image.png

Feature Roadmap

image.png
image.png

Contributing 

Why contribute?

Contributions from Digital partners enable our design system to continuously grow and provide value to the people who use it.  Digital is unique in that the parent Design System Saffron does not include the same component such as cart and checkout flows, marketing pages, price and planning, and online book stores.

​​

Contribution criteria

  1. Contribution is unique.  No existing component or pattern in DCL-UI can be used to solve this problem. 

  2. The contribution solves a use case for 3 or more Digital workstreams.

  3. Use contribution form to include:

    1. New contribution proposal​

    2. What problem does this contribution solve, improve, or fix?

    3. Description of proposed contribution

    4. How does this contribution improve DCL-UI?

    5. What other existing solutions have you explored and did those work/not work for this scenario?

    6. Contribution lead / contact information

    7. Which Digital workstreams will be impacted by this work?

    8. What assets, documentation, research, or other resources have been created for this contribution?

      1. Code​

      2. Data and research artifacts

      3. Documentation

      4. Figma Files

      5. Other

© 2024 Sydney Smith | SydneyLoves.Design.

bottom of page