From b2d93a4e497392f587911a02b4ee8abf4321c82d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Romain?= Date: Fri, 15 Dec 2023 17:07:10 +0100 Subject: [PATCH] feat(design-system): add qlik-light theme (#5062) --- .changeset/moody-lamps-cough.md | 15 + .../test/fixtures/app/node_modules/.DS_Store | Bin 6148 -> 0 bytes packages/components/package.json | 2 +- .../src/ActionList/ActionList.component.js | 6 +- .../src/ActionList/ActionList.module.scss | 5 +- .../src/HeaderBar/HeaderBar.component.js | 22 +- .../src/HeaderBar/HeaderBar.module.scss | 25 +- .../src/HeaderBar/HeaderBar.stories.js | 22 +- .../primitives/Intercom.component.js | 3 +- .../HeaderBar/primitives/Logo.component.js | 4 +- .../src/SidePanel/SidePanel.component.js | 27 +- .../src/SidePanel/SidePanel.module.scss | 39 +- .../src/SidePanel/SidePanel.stories.js | 20 +- .../__snapshots__/SidePanel.test.js.snap | 1 - .../SubHeaderBar/SubHeaderBar.component.js | 16 +- packages/containers/.storybook/preview.js | 6 +- packages/containers/package.json | 2 +- .../__snapshots__/SidePanel.test.js.snap | 1 - packages/design-docs/package.json | 20 +- packages/design-system/package.json | 20 +- .../ThemeProvider/ThemeProvider.tsx | 2 +- .../ThemeSwitcher/ThemeSwitcher.tsx | 7 +- .../src/stories/clickable/About.mdx | 16 +- .../src/stories/clickable/Button.mdx | 60 +- .../src/stories/clickable/ButtonAsLink.mdx | 50 +- .../src/stories/clickable/ButtonIcon.mdx | 49 +- .../src/stories/clickable/Dropdown.mdx | 31 +- .../src/stories/clickable/Link.mdx | 44 +- .../src/stories/feedback/EmptyState.mdx | 32 +- .../src/stories/feedback/ErrorState.mdx | 26 +- .../src/stories/feedback/Loading.mdx | 7 +- .../src/stories/feedback/Skeleton.mdx | 47 +- .../src/stories/feedback/Status.mdx | 39 +- .../design-system/src/stories/form/About.mdx | 9 +- .../src/stories/form/Affix/Affixes.mdx | 33 +- .../src/stories/form/Buttons/FormButtons.mdx | 24 +- .../stories/form/Enumeration/Enumeration.mdx | 10 +- .../form/Field/Datalist/Input.Datalist.mdx | 8 +- .../src/stories/form/Field/FormField.mdx | 27 +- .../form/Field/Input/Input.Checkbox.mdx | 29 +- .../stories/form/Field/Input/Input.Color.mdx | 8 +- .../stories/form/Field/Input/Input.Copy.mdx | 20 +- .../stories/form/Field/Input/Input.Date.mdx | 10 +- .../form/Field/Input/Input.DatetimeLocal.mdx | 8 +- .../stories/form/Field/Input/Input.Email.mdx | 8 +- .../stories/form/Field/Input/Input.File.mdx | 16 +- .../stories/form/Field/Input/Input.Month.mdx | 8 +- .../stories/form/Field/Input/Input.Number.mdx | 8 +- .../stories/form/Field/Input/Input.Radio.mdx | 25 +- .../stories/form/Field/Input/Input.Search.mdx | 10 +- .../stories/form/Field/Input/Input.Tel.mdx | 10 +- .../stories/form/Field/Input/Input.Text.mdx | 10 +- .../stories/form/Field/Input/Input.Time.mdx | 8 +- .../stories/form/Field/Input/Input.Url.mdx | 8 +- .../stories/form/Field/Input/Input.Week.mdx | 8 +- .../src/stories/form/Field/Input/Password.mdx | 10 +- .../form/Field/Select/Input.Select.mdx | 20 +- .../form/Field/Textarea/Input.Textarea.mdx | 12 +- .../src/stories/form/FieldCombobox.mdx | 11 +- .../src/stories/form/Fieldset/Fieldset.mdx | 20 +- .../stories/form/Fieldset/FormFieldset.mdx | 20 +- .../design-system/src/stories/form/Form.mdx | 24 +- .../src/stories/form/InlineEditing.mdx | 43 +- .../src/stories/form/RichRadioButton.mdx | 57 +- .../design-system/src/stories/form/Switch.mdx | 13 +- .../form/ToggleSwitch/ToggleSwitch.mdx | 24 +- .../design-system/src/stories/icons/About.mdx | 15 +- .../design-system/src/stories/icons/Icon.mdx | 11 +- .../src/stories/icons/SizedIcon.mdx | 26 +- .../design-system/src/stories/layout/Card.mdx | 10 +- .../src/stories/layout/Modal.mdx | 50 +- .../src/stories/layout/Stack.mdx | 32 +- .../src/stories/messaging/Badge.mdx | 22 +- .../src/stories/messaging/InlineMessage.mdx | 22 +- .../src/stories/messaging/Message.mdx | 32 +- .../src/stories/messaging/Popover.mdx | 29 +- .../src/stories/messaging/Tag.mdx | 41 +- .../src/stories/messaging/Tooltip.mdx | 18 +- .../src/stories/navigation/Breadcrumbs.mdx | 24 +- .../src/stories/navigation/Divider.mdx | 16 +- .../src/stories/navigation/FloatingDrawer.mdx | 22 +- .../src/stories/navigation/Stepper.Step.mdx | 17 +- .../src/stories/navigation/Stepper.mdx | 20 +- .../src/stories/navigation/Tabs.mdx | 27 +- packages/design-tokens/src/index.scss | 1 + packages/design-tokens/src/index.umd.ts | 3 +- .../design-tokens/src/qlik-light/_index.scss | 356 ++ .../src/qlik-light/dictionary.ts | 3123 +++++++++++++++++ .../design-tokens/src/qlik-light/index.ts | 345 ++ packages/faceted-search/package.json | 2 +- packages/forms/package.json | 4 +- packages/stepper/src/stories/Stepper.mdx | 7 +- packages/storybook-docs/package.json | 4 +- .../src/components/Trial/Trials.mdx | 6 +- packages/storybook-one/package.json | 16 +- .../.storybook-templates/preview.js | 1 + .../scripts-config-storybook-lib/package.json | 16 +- yarn.lock | 530 +-- 98 files changed, 4815 insertions(+), 1258 deletions(-) create mode 100644 .changeset/moody-lamps-cough.md delete mode 100644 fork/dynamic-cdn-webpack-plugin/test/fixtures/app/node_modules/.DS_Store create mode 100644 packages/design-tokens/src/qlik-light/_index.scss create mode 100644 packages/design-tokens/src/qlik-light/dictionary.ts create mode 100644 packages/design-tokens/src/qlik-light/index.ts diff --git a/.changeset/moody-lamps-cough.md b/.changeset/moody-lamps-cough.md new file mode 100644 index 00000000000..b20a1e1db9c --- /dev/null +++ b/.changeset/moody-lamps-cough.md @@ -0,0 +1,15 @@ +--- +'@talend/scripts-config-storybook-lib': minor +'@talend/react-faceted-search': minor +'@talend/storybook-docs': minor +'@talend/design-system': minor +'@talend/design-tokens': minor +'@talend/ui-storybook-one': minor +'@talend/design-docs': minor +'@talend/react-components': minor +'@talend/react-containers': minor +'@talend/react-stepper': minor +'@talend/react-forms': minor +--- + +feat: add @qlik-light theme diff --git a/fork/dynamic-cdn-webpack-plugin/test/fixtures/app/node_modules/.DS_Store b/fork/dynamic-cdn-webpack-plugin/test/fixtures/app/node_modules/.DS_Store deleted file mode 100644 index 5f0e6a4f3ff0800d82442dc3a65f16c0dc1e47e9..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 6148 zcmeHK%}&BV5S|5;1!Lr3BFA35aR4Dk4<-%b!JA2q9@Ida5@}Lf0!5;T>1*g4`2@a> zGrJ2B(SsLb$V@W(&Cbtm_G`0003ezpzXnhO0EtSNDPZ%BP@Hs0GR8wF)EHfe!1u<( zz85ZKv*SN9K;JG8HYDIe2%o-R>|x~1>xaQGsaD@bCYxJZ&r4a9#m(Z4(~HMW;wGbE z(;Zw<@61hlp0Us4IGo$AcM){Q?b7yf93^fLbqA_A@Vl6DeHlc4JZ{FL$RDb4937Cd zAPenMc`~UVR4Z1aQJYq*$>AQ^_5JCzAa{0aN2i^;hsVj&^!Y_|EATf|vSn}vuV{Q( z=DjnB!Z^Cc$gFCX&BzQe1I)mRGhntoxv}Ewspan { + > span { margin-left: $padding-normal; vertical-align: middle; transition: 0.1s opacity ease-out; diff --git a/packages/components/src/HeaderBar/HeaderBar.component.js b/packages/components/src/HeaderBar/HeaderBar.component.js index f36abcdc3ad..823ad076d0f 100644 --- a/packages/components/src/HeaderBar/HeaderBar.component.js +++ b/packages/components/src/HeaderBar/HeaderBar.component.js @@ -1,22 +1,22 @@ -import PropTypes from 'prop-types'; -import omit from 'lodash/omit'; import { useTranslation } from 'react-i18next'; -import Inject from '../Inject'; +import omit from 'lodash/omit'; +import PropTypes from 'prop-types'; + +import AppSwitcher from '../AppSwitcher'; import I18N_DOMAIN_COMPONENTS from '../constants'; +import Inject from '../Inject'; import { getTheme } from '../theme'; -import AppSwitcher from '../AppSwitcher'; - -import { Logo } from './primitives/Logo.component'; -import { Environment } from './primitives/Environment.component'; +import { AppNotification } from './primitives/AppNotification.component'; import { CallToAction } from './primitives/CallToAction.component'; +import { Environment } from './primitives/Environment.component'; import { GenericAction } from './primitives/GenericAction.component'; -import { Search } from './primitives/Search.component'; -import { User } from './primitives/User.component'; -import { Information } from './primitives/Information.component'; import { Help } from './primitives/Help.component'; -import { AppNotification } from './primitives/AppNotification.component'; +import { Information } from './primitives/Information.component'; import { Intercom } from './primitives/Intercom.component'; +import { Logo } from './primitives/Logo.component'; +import { Search } from './primitives/Search.component'; +import { User } from './primitives/User.component'; import headerBarCssModule from './HeaderBar.module.scss'; diff --git a/packages/components/src/HeaderBar/HeaderBar.module.scss b/packages/components/src/HeaderBar/HeaderBar.module.scss index 914045f80c5..3ec95978982 100644 --- a/packages/components/src/HeaderBar/HeaderBar.module.scss +++ b/packages/components/src/HeaderBar/HeaderBar.module.scss @@ -15,7 +15,8 @@ $tc-headerbar-logo-full-width: 8.5rem !default; } .tc-header-bar { - background: tokens.$coral-color-branding-navigation; + background: tokens.$coral-color-brand-background; + color: tokens.$coral-color-brand-text; display: flex; position: fixed; top: 0; @@ -34,6 +35,18 @@ $tc-headerbar-logo-full-width: 8.5rem !default; list-style: none; } + :global { + .tc-dropdown-button, + .btn-link { + color: tokens.$coral-color-brand-text; + &:hover, + &:focus { + color: tokens.$coral-color-brand-text; + background: tokens.$coral-color-brand-background-weak-hover; + } + } + } + .tc-header-bar-actions { align-items: center; display: flex; @@ -56,7 +69,7 @@ $tc-headerbar-logo-full-width: 8.5rem !default; display: block; width: 1px; height: $font-size-large; - background-color: tokens.$coral-color-neutral-background; + background-color: tokens.$coral-color-brand-text; } :global { @@ -70,6 +83,11 @@ $tc-headerbar-logo-full-width: 8.5rem !default; .tc-header-bar-logo { padding: 0; width: $tc-headerbar-logo-width; + background-image: tokens.$coral-branding-logo; + background-size: 2.8rem; + background-repeat: no-repeat; + background-position-x: center; + background-position-y: center; :global(.tc-svg-icon) { padding: 0; @@ -79,6 +97,7 @@ $tc-headerbar-logo-full-width: 8.5rem !default; &.full { width: auto; + background-image: none; :global(.tc-svg-icon) { padding: 0 $padding-normal; @@ -162,7 +181,7 @@ $tc-headerbar-logo-full-width: 8.5rem !default; .tc-header-bar-intercom-default-component { border-radius: 50%; - background: tokens.$coral-color-accent-text; + color: tokens.$coral-color-brand-text; min-height: auto; height: 3.2rem; width: 3.2rem; diff --git a/packages/components/src/HeaderBar/HeaderBar.stories.js b/packages/components/src/HeaderBar/HeaderBar.stories.js index b7e2e8b1011..457155da357 100644 --- a/packages/components/src/HeaderBar/HeaderBar.stories.js +++ b/packages/components/src/HeaderBar/HeaderBar.stories.js @@ -1,12 +1,13 @@ import { action } from '@storybook/addon-actions'; -import { makeDecorator } from '@storybook/addons'; +import Immutable from 'immutable'; -import Immutable from 'immutable'; // eslint-disable-line import/no-extraneous-dependencies +import assetsApi from '@talend/assets-api'; +import tokens from '@talend/design-tokens'; +import AppSwitcher from '../AppSwitcher'; +// eslint-disable-line import/no-extraneous-dependencies import Icon from '../Icon'; import HeaderBar from './HeaderBar.component'; -import AppSwitcher from '../AppSwitcher'; -import assetsApi from '@talend/assets-api'; const props = { brand: { @@ -40,17 +41,17 @@ const props = { products: { items: [ { - icon: 'talend-tdp-colored', + icon: 'talend-tdp-negative', key: 'tdp', label: 'Data Preparation', }, { - icon: 'talend-tic-colored', + icon: 'talend-tic-negative', key: 'tic', label: 'Integration Cloud', }, { - icon: 'talend-tmc-colored', + icon: 'talend-tmc-negative', key: 'tmc', label: 'Management Console', }, @@ -96,6 +97,11 @@ function IntercomComponent() { export default { title: 'Components/Navigation/HeaderBar', + decorators: Story => ( +
+ +
+ ), }; export const Default = () => { @@ -138,7 +144,7 @@ export const WithBrandIcon = () => { ...props, brand: { ...props.brand, - icon: 'talend-tmc-positive', + icon: 'talend-tmc-negative', }, }).toJS(); return ; diff --git a/packages/components/src/HeaderBar/primitives/Intercom.component.js b/packages/components/src/HeaderBar/primitives/Intercom.component.js index be8bd1fa1d6..e87ed3cdff9 100644 --- a/packages/components/src/HeaderBar/primitives/Intercom.component.js +++ b/packages/components/src/HeaderBar/primitives/Intercom.component.js @@ -1,6 +1,7 @@ -import PropTypes from 'prop-types'; import { useMemo } from 'react'; +import PropTypes from 'prop-types'; + import ActionIntercom from '../../ActionIntercom'; import { getTheme } from '../../theme'; diff --git a/packages/components/src/HeaderBar/primitives/Logo.component.js b/packages/components/src/HeaderBar/primitives/Logo.component.js index ef2e9961c5a..f2f6ea279fe 100644 --- a/packages/components/src/HeaderBar/primitives/Logo.component.js +++ b/packages/components/src/HeaderBar/primitives/Logo.component.js @@ -1,7 +1,7 @@ import PropTypes from 'prop-types'; -import Inject from '../../Inject'; import Action from '../../Actions/Action'; +import Inject from '../../Inject'; import { getTheme } from '../../theme'; import headerBarCssModule from '../HeaderBar.module.scss'; @@ -9,7 +9,7 @@ import headerBarCssModule from '../HeaderBar.module.scss'; const theme = getTheme(headerBarCssModule); export function Logo({ isFull, getComponent, t, ...props }) { - const icon = isFull ? 'talend-logo' : 'talend-logo-square'; + const icon = isFull ? 'talend-logo' : undefined; const itemClassName = theme('tc-header-bar-action', 'separated'); const actionClassName = theme('tc-header-bar-logo', { full: isFull, diff --git a/packages/components/src/SidePanel/SidePanel.component.js b/packages/components/src/SidePanel/SidePanel.component.js index d6cf6b12704..94b91acaf4c 100644 --- a/packages/components/src/SidePanel/SidePanel.component.js +++ b/packages/components/src/SidePanel/SidePanel.component.js @@ -1,16 +1,19 @@ -import PropTypes from 'prop-types'; -import { createRef, useState, useLayoutEffect, useEffect } from 'react'; -import classNames from 'classnames'; +import { createRef, useEffect, useLayoutEffect, useState } from 'react'; import { withTranslation } from 'react-i18next'; +import classNames from 'classnames'; +import PropTypes from 'prop-types'; import 'simplebar'; import 'simplebar/dist/simplebar.css'; -import I18N_DOMAIN_COMPONENTS from '../constants'; -import '../translate'; -import Action from '../Actions/Action'; +import tokens from '@talend/design-tokens'; + import ActionList from '../ActionList'; +import Action from '../Actions/Action'; +import I18N_DOMAIN_COMPONENTS from '../constants'; import Inject from '../Inject'; +import '../translate'; + import theme from './SidePanel.module.scss'; const DOCKED_MIN_WIDTH = '6rem'; @@ -108,14 +111,7 @@ function SidePanel({ const toggleButtonTitle = docked ? expandLabel : collapseTitle; const Components = Inject.getAll(getComponent, { Action, ActionList }); return ( -