Skip to content

Commit

Permalink
Merge 8603b8a into 2553a2c
Browse files Browse the repository at this point in the history
  • Loading branch information
jmfrancois authored Jul 27, 2023
2 parents 2553a2c + 8603b8a commit b295d90
Show file tree
Hide file tree
Showing 107 changed files with 2,398 additions and 3,623 deletions.
3 changes: 0 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -32,9 +32,6 @@
"prepare": "husky install"
},
"resolutions": {
"**/webpack": "^5.73.0",
"**/terser-webpack-plugin": "^5.3.3",
"**/webpack-dev-middleware": "^5.3.3",
"**/@types/react": "^17.0.2",
"**/@types/react-dom": "^17.0.2",
"**/i18next-scanner-typescript/typescript": "^5.0.4",
Expand Down
2 changes: 1 addition & 1 deletion packages/components/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@
"styled-components": "^5.3.11"
},
"devDependencies": {
"@storybook/addon-actions": "^6.5.16",
"@storybook/addon-actions": "^7.1.0",
"@talend/bootstrap-theme": "^8.0.0",
"@talend/design-system": "^7.10.0",
"@talend/icons": "^6.58.1",
Expand Down
2 changes: 1 addition & 1 deletion packages/containers/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@
"reselect": "^2.5.4"
},
"devDependencies": {
"@storybook/addon-actions": "^6.5.16",
"@storybook/addon-actions": "^7.1.0",
"@talend/bootstrap-theme": "^8.0.0",
"@talend/icons": "^6.58.1",
"@talend/locales-tui-containers": "^8.0.2",
Expand Down
20 changes: 10 additions & 10 deletions packages/design-system/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -47,17 +47,17 @@
"@babel/core": "^7.22.5",
"@cypress/react": "^7.0.3",
"@cypress/webpack-dev-server": "^3.4.1",
"@storybook/addon-a11y": "^6.5.16",
"@storybook/addon-actions": "^6.5.16",
"@storybook/addon-essentials": "^6.5.16",
"@storybook/addon-interactions": "^6.5.16",
"@storybook/addon-links": "^6.5.16",
"@storybook/addons": "^6.5.16",
"@storybook/core-events": "^6.5.16",
"@storybook/addon-a11y": "^7.1.0",
"@storybook/addon-actions": "^7.1.0",
"@storybook/addon-essentials": "^7.1.0",
"@storybook/addon-interactions": "^7.1.0",
"@storybook/addon-links": "^7.1.0",
"@storybook/addons": "^7.1.0",
"@storybook/core-events": "^7.1.0",
"@storybook/preset-scss": "^1.0.3",
"@storybook/react": "^6.5.16",
"@storybook/testing-library": "^0.0.13",
"@storybook/theming": "^6.5.16",
"@storybook/react": "^7.1.0",
"@storybook/testing-library": "^0.2.0",
"@storybook/theming": "^7.1.0",
"@svgr/webpack": "^5.5.0",
"@talend/bootstrap-theme": "^8.0.0",
"@talend/icons": "^6.59.0",
Expand Down
4 changes: 2 additions & 2 deletions packages/faceted-search/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -44,8 +44,8 @@
"lodash": "^4.17.21"
},
"devDependencies": {
"@storybook/addon-actions": "^6.5.16",
"@storybook/testing-library": "^0.0.13",
"@storybook/addon-actions": "^7.1.0",
"@storybook/testing-library": "^0.2.0",
"@talend/bootstrap-theme": "^8.0.0",
"@talend/design-system": "^7.14.0",
"@talend/icons": "^6.58.1",
Expand Down
3 changes: 2 additions & 1 deletion packages/forms/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,8 @@
"tv4": "^1.3.0"
},
"devDependencies": {
"@storybook/addon-actions": "^6.5.16",
"@storybook/addon-actions": "^7.1.0",
"@storybook/addon-controls": "^7.1.0",
"@talend/bootstrap-theme": "^8.0.0",
"@talend/icons": "^6.58.1",
"@talend/locales-tui-forms": "^9.0.1",
Expand Down
2 changes: 1 addition & 1 deletion packages/icons/src/metadata.json
Original file line number Diff line number Diff line change
Expand Up @@ -4374,4 +4374,4 @@
"remote": false,
"documentationLinks": []
}
]
]
18 changes: 9 additions & 9 deletions packages/storybook-docs/src/globalStyles.scss
Original file line number Diff line number Diff line change
Expand Up @@ -228,12 +228,12 @@ html {
margin: 0 0 tokens.$coral-spacing-m 0;
}

.sbdocs-h1,
.sbdocs-h2,
.sbdocs-h3,
.sbdocs-h4,
.sbdocs-h5,
.sbdocs-h6 {
h1,
h2,
h3,
h4,
h5,
h6 {
border: none;
margin: tokens.$coral-spacing-l 0 tokens.$coral-spacing-m 0;
color: tokens.$coral-color-neutral-text;
Expand Down Expand Up @@ -363,13 +363,13 @@ html {

// stylelint-disable-next-line selector-no-qualifying-type
&.sbdocs-preview pre.prismjs {
background: #022E4D;
background: #022e4d;
}

kbd {
padding: 0.25rem 0.5rem;
color: #202020;
background-color: #EEE;
background-color: #eee;
border-radius: 0.4rem;
border: 1px solid #606060;
font-size: 1.2rem;
Expand Down Expand Up @@ -400,7 +400,7 @@ html {

& > dt::before {
content: '#';
color: #FF6D70;
color: #ff6d70;
padding-right: 1ch;
}

Expand Down
3 changes: 3 additions & 0 deletions packages/storybook/.babelrc.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"extends": "@talend/scripts-config-babel/.babelrc.json"
}
2 changes: 1 addition & 1 deletion packages/storybook/.storybook/.babelrc
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
{
"extends": "../../../../../node_modules/@talend/scripts-config-babel/.babelrc.json"
"extends": "@talend/scripts-config-babel/.babelrc.json"
}
84 changes: 84 additions & 0 deletions packages/storybook/.storybook/blocks/Badges.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
import { Fragment, useContext, useEffect, useState } from 'react';
import { DocsContext } from '@storybook/blocks';
import type { Globals } from '@storybook/csf';
import type { DocsContextProps } from '@storybook/types';
import { Helmet } from 'react-helmet';
import { BackToTop, TableOfContents } from 'storybook-docs-toc';
import { Divider, Form, StackVertical } from '@talend/design-system';
import { BadgeFigma, BadgeI18n, BadgeReact, BadgeStorybook, Badges } from '~docs';
import { GLOBALS_UPDATED } from '@storybook/core-events';
import { ComponentStatus, Status } from '.storybook/docs/StatusTable';

const useGlobalsCustom = (context: DocsContextProps): [Globals] => {
const storyContext = context.getStoryContext(context.storyById());
const [globals, setGlobals] = useState(storyContext.globals);

useEffect(() => {
const cb = (changed: { globals: Globals }) => {
setGlobals(changed.globals);
};
context.channel.on(GLOBALS_UPDATED, cb);
return () => context.channel.off(GLOBALS_UPDATED, cb);
}, []);

return [globals];
};

type BadgesBlockProps = {
status?: ComponentStatus;
figmaLink?: string;
};

export function BadgesBlock({ status = {}, figmaLink }: BadgesBlockProps) {
const context = useContext(DocsContext);
const { story } = context.resolveOf('story', ['story']);
const { id, parameters, title } = story;

const [globals] = useGlobalsCustom(context);

const titleArray = title.split('/');

const docsTitle = title.replace(/\//gi, ' / ');
const docsCategory = titleArray[0];

console.log('[GNI]-- stop');
const githubLink =
'https://github.com/Talend/ui/tree/master/packages/design-system/' +
parameters.fileName
.split('/')
.slice(1, parameters.fileName.split('/').length - 1)
.join('/')
.replace('/docs', '');

const isDesignSystemElementPage = ['design system'].find(term => {
return title?.toLocaleLowerCase().startsWith(term);
});

return (
<>
<Helmet>
<title>{docsTitle}</title>
<meta property="og:title" content={titleArray[titleArray.length - 1]} />
<meta property="og:type" content="article" />
<meta property="og:url" content={`https://design.talend.com/?path=/docs/${id}`} />
<meta
property="og:image"
content={`https://via.placeholder.com/1000x500/F3F3F3/FF6D70?text=${docsTitle}`}
/>
{titleArray.length > 1 && <meta property="article:section" content={docsCategory} />}
</Helmet>

{/* <TableOfContents>
</TableOfContents> */}

<Badges>
<BadgeFigma status={status.figma} href={figmaLink} />
<BadgeStorybook status={status.storybook} />
<BadgeReact status={status.react} href={githubLink} />
<BadgeI18n status={status.i18n} />
</Badges>

<BackToTop />
</>
);
}
3 changes: 3 additions & 0 deletions packages/storybook/.storybook/blocks/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import { BadgesBlock as Badges } from './Badges';

export { Badges };
13 changes: 6 additions & 7 deletions packages/storybook/.storybook/docs/Badge.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -65,13 +65,12 @@ export const renderStatus = (status?: Status) => {
}
};

const Badge = ({
href,
icon,
children,
status,
...props
}: AnchorHTMLAttributes<HTMLAnchorElement> & { icon: string; status?: Status }) => {
export type BadgeProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
icon: string;
status?: Status;
};

const Badge = ({ href, icon, children, status, ...props }: BadgeProps) => {
let attrs;
if (href) {
attrs = {
Expand Down
7 changes: 5 additions & 2 deletions packages/storybook/.storybook/docs/BadgeFigma.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,12 @@
import { memo } from 'react';
import type { FunctionComponent } from 'react';

import Badge from './Badge';
import Badge, { BadgeProps } from './Badge';
import { Status } from './StatusTable';

const FigmaStatus = (props: FunctionComponent) => {
type FigmaStatusProps = Omit<BadgeProps, 'icon'>;

const FigmaStatus = (props: FigmaStatusProps) => {
return (
<Badge {...props} icon="figma">
Figma
Expand Down
6 changes: 4 additions & 2 deletions packages/storybook/.storybook/docs/BadgeI18n.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
import { memo } from 'react';
import type { FunctionComponent } from 'react';

import Badge from './Badge';
import Badge, { BadgeProps } from './Badge';
import { Status } from './StatusTable';

const I18nStatus = (props: FunctionComponent) => {
type I18nStatusProps = Omit<BadgeProps, 'icon'>;
const I18nStatus = (props: I18nStatusProps) => {
return (
<Badge {...props} icon="i18next">
i18n
Expand Down
6 changes: 4 additions & 2 deletions packages/storybook/.storybook/docs/BadgeReact.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
import { memo } from 'react';
import type { FunctionComponent } from 'react';

import Badge from './Badge';
import Badge, { BadgeProps } from './Badge';

const ReactStatus = (props: FunctionComponent) => {
type ReactStatusProps = Omit<BadgeProps, 'icon'>;

const ReactStatus = (props: ReactStatusProps) => {
return (
<Badge {...props} icon="react">
React
Expand Down
6 changes: 4 additions & 2 deletions packages/storybook/.storybook/docs/BadgeStorybook.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
import { memo } from 'react';
import type { FunctionComponent } from 'react';

import Badge from './Badge';
import Badge, { BadgeProps } from './Badge';

const StorybookStatus = (props: FunctionComponent) => {
type StorybookStatusProps = Omit<BadgeProps, 'icon'>;

const StorybookStatus = (props: StorybookStatusProps) => {
return (
<Badge {...props} icon="storybook">
Storybook
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export const getDisplayName = (name: string) => {
const nameArray = name
.replace(/^coral/i, '')
.replace(/^color/i, '')
.split(/(?=[A-Z])/);
.split(/(?=[A-Z0])/);
return nameArray
.map((word: string, index: number, words: string[]) => {
let adapted = tShirtSizes.some(tShirtSize => word.toLocaleLowerCase() === tShirtSize)
Expand All @@ -41,7 +41,7 @@ export const getDisplayName = (name: string) => {

export const getScssName = (name?: string) => {
if (!name) return '';
const nameArray = name.split(/(?=[A-Z])/);
const nameArray = name.split(/(?=[A-Z0])/);
return `tokens.$${nameArray
.map((word: string, index: number, words: string[]) => {
let adapted = word.toLocaleLowerCase();
Expand All @@ -56,7 +56,7 @@ export const getScssName = (name?: string) => {
export const getCssName = (token: Token) => {
if (!token.name) return '';
const { name, value } = token;
const nameArray = name.split(/(?=[A-Z])/);
const nameArray = name.split(/(?=[A-Z0])/);
return `var(--${nameArray
.map((word: string, index: number, words: string[]) => {
let adapted = word.toLocaleLowerCase();
Expand All @@ -65,5 +65,5 @@ export const getCssName = (token: Token) => {
}
return adapted;
})
.join('')}, ${value})`;
.join('')})`;
};
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { ColorToken, GradientToken } from '../../../../../src/tokens/types';
import ColorChecker from '../../ColorChecker';

import styles from './Card.module.scss';
import { getCssName } from '../../TokenFormatter';

function CardComposition({
backgroundColor,
Expand All @@ -28,14 +29,16 @@ function CardComposition({
[styles.previewBox__composition__isHover]: isHover,
})}
style={{
background:
backgroundColor?.type === 'gradient' ? backgroundColor.value : backgroundColor.hsla,
borderColor: borderColor.hsla,
color: textColor.hsla,
background: getCssName(backgroundColor),
borderColor: getCssName(borderColor),
color: getCssName(textColor),
// backgroundColor?.type === 'gradient' ? backgroundColor.value : backgroundColor.hsla,
// borderColor: borderColor.hsla,
// color: textColor.hsla,
}}
>
<p className={styles.previewBox__composition_copy}>
<span style={{ color: iconColor?.hsla || textColor.hsla }}>
<span style={{ color: getCssName(iconColor) }}>
<SizedIcon size="S" name="overview" />
</span>
{isHover && <span>On hover</span>}
Expand Down
Loading

0 comments on commit b295d90

Please sign in to comment.