Skip to content

Commit 915fd9e

Browse files
aramos-adobearamos-adobe
committed
Merge branch 'main' into aramos-adobe/css868-combobox-readonly
2 parents 7f6b095 + b8e8d61 commit 915fd9e

File tree

150 files changed

+1451
-562
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

150 files changed

+1451
-562
lines changed

‎.storybook/CHANGELOG.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
11
# Change Log
22

3+
## 10.11.4
4+
5+
### Patch Changes
6+
7+
- Updated dependencies [[`47f23a7`](https://github.com/adobe/spectrum-css/commit/47f23a762a5c84ffe3c82e7e1b0c4c9d5dc60f86)]:
8+
- @spectrum-css/tokens@14.5.0
9+
310
## 10.11.3
411

512
### Patch Changes

‎.storybook/assets/images/adobe_logo.svg

Lines changed: 5 additions & 0 deletions
Loading

‎.storybook/assets/images/github_logo.svg

Lines changed: 5 additions & 0 deletions
Loading

‎.storybook/assets/images/npm_logo.svg

Lines changed: 11 additions & 0 deletions
Loading

‎.storybook/blocks/ComponentDetails.jsx

Lines changed: 165 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,10 @@ import { useOf } from '@storybook/blocks';
22
import { ResetWrapper } from "@storybook/components";
33
import { styled } from "@storybook/theming";
44
import React, { useEffect, useState } from "react";
5-
import { Code } from "./Typography.jsx";
5+
import AdobeSVG from "../assets/images/adobe_logo.svg?raw";
6+
import GitHubSVG from "../assets/images/github_logo.svg?raw";
7+
import NpmSVG from "../assets/images/npm_logo.svg?raw";
8+
import { Body, Code, Heading } from "./Typography.jsx";
69
import { fetchToken } from "./utilities.js";
710

811
export const DList = styled.dl`
@@ -97,6 +100,45 @@ export const StatusLight = styled.span(({ variant = "positive", ...props }) => `
97100
margin-block-end: 1px;
98101
`);
99102

103+
export const ResourceSection = styled.section`
104+
display: flex;
105+
flex-flow: row wrap;
106+
align-items: center;
107+
`;
108+
109+
export const ResourceLink = styled.a`
110+
position: relative;
111+
display: inline-flex;
112+
flex-direction: row;
113+
align-items: center;
114+
margin-block-end: 16px;
115+
margin-inline-end: 16px;
116+
box-sizing: border-box;
117+
text-decoration: none;
118+
min-inline-size: 100px;
119+
border: 1px solid transparent;
120+
border-radius: 5px;
121+
border-color: rgb(230, 230, 230);
122+
overflow: hidden;
123+
color: rgb(0, 0, 0);
124+
125+
&:hover {
126+
border-color: rgb(213, 213, 213);
127+
}
128+
`;
129+
130+
export const ResourceIconWrapper = styled.div`
131+
background-color: rgba(248, 248, 248);
132+
padding: 12px;
133+
display: flex;
134+
inline-size: 40px;
135+
block-size: 40px;
136+
`;
137+
138+
export const ResourceTextWrapper = styled.div`
139+
margin-inline: 16px;
140+
`;
141+
100142
const VersionDetails = ({ tag, data = {}, isDeprecated = false, skipDate = false, skipLink = false }) => {
101143
let statusType = "notice";
102144
let statusMessage = "Not yet available on the npm registry.";
@@ -264,13 +306,104 @@ function fetchNpmData(packageName, setnpmData, setIsLoading) {
264306
}, [cache, setCache, packageName, setnpmData, setIsLoading]);
265307
}
266308

309+
const fetchLogo = (brand) => {
310+
switch(brand) {
311+
case "npm":
312+
return NpmSVG;
313+
case "GitHub":
314+
return GitHubSVG;
315+
case "Adobe":
316+
return AdobeSVG;
317+
}
318+
319+
return;
320+
}
321+
322+
/**
323+
* Displays a resource card containing text and an image that links to a particular resource.
324+
*
325+
* @param {string} heading - heading of the resource card
326+
* @param {string} alt - additional description of the resource card
327+
* @param {string} image - the SVG image
328+
* @param {string} href - optional link to the resource, found in packageJson?.spectrum?.guidelines
329+
* @returns {string}
330+
*/
331+
export const ResourceLinkContent = ({ heading, alt, logo, href }) => {
332+
if (!href) return;
333+
334+
return (
335+
<ResourceLink href={href} className="sb-unstyled" title={alt}>
336+
<ResourceIconWrapper dangerouslySetInnerHTML={{ __html: fetchLogo(logo) }} />
337+
<ResourceTextWrapper>
338+
{heading ? <Heading size="xs">{heading}</Heading> : ""}
339+
{alt ? <Body size="s">{alt}</Body> : ""}
340+
</ResourceTextWrapper>
341+
</ResourceLink>
342+
);
343+
};
344+
345+
/**
346+
* Displays the list of relevant component links (to NPM, repo, guidelines, etc).
347+
*
348+
* The rootClassName is read from the story's default args, found in the story's metadata.
349+
*
350+
* The for loop is particularly helpful to match guidelines links for any nested components
351+
* (i.e. meter, form). We need to check that the rootClassName matches the rootClass found
352+
* in the packageJson.spectrum, to link to the correct guidelines page.
353+
*
354+
* Deprecated components should not show a GitHub resource card.
355+
*
356+
* @param {string} packageName - packageName sourced from packageJson?.name
357+
* @param {string[]} spectrumData - an array of objects sourced from packageJson?.spectrum
358+
* @param {string} rootClassName - a component's default rootClass arg
359+
* @returns {string}
360+
*/
361+
export const ResourceListDetails = ({ packageName, spectrumData = [], rootClassName, isDeprecated }) => {
362+
if (!packageName) return;
363+
364+
let href;
365+
366+
for(let i = 0; i < spectrumData?.length; i++) {
367+
if (spectrumData[i]?.guidelines && spectrumData[i]?.rootClass === rootClassName) {
368+
href = spectrumData[i]?.guidelines;
369+
}
370+
}
371+
372+
return (
373+
<ResourceSection className="sb-unstyled">
374+
{href ?
375+
<ResourceLinkContent
376+
className="doc-block-resource-cards"
377+
heading="View guidelines"
378+
alt="Spectrum website"
379+
logo="Adobe"
380+
href={href}/> : ""}
381+
<ResourceLinkContent
382+
className="doc-block-resource-cards"
383+
heading="View package"
384+
alt="npm"
385+
logo="npm"
386+
href={`https://npmjs.com/${packageName}`}/>
387+
{!isDeprecated ?
388+
<ResourceLinkContent
389+
className="doc-block-resource-cards"
390+
heading="View repository"
391+
alt="GitHub"
392+
logo="GitHub"
393+
href={`https://github.com/adobe/spectrum-css/tree/main/components/${packageName.split('/').pop()}`}/> : ""}
394+
</ResourceSection>
395+
)
396+
};
397+
267398
/**
268399
* Displays the current version number of the component. The version is read from
269400
* the component's parameters, where it was sourced from the package.json file.
270401
*
271-
* Also displays a component status of "deprecated" if it is set in the story's
402+
* Displays a component status of "deprecated" if it is set in the story's
272403
* parameters.
273404
*
405+
* Displays the list of relevant component links (to NPM, repo, guidelines, etc).
406+
*
274407
* Usage of this doc block within MDX template(s):
275408
* <ComponentDetails />
276409
*/
@@ -279,8 +412,16 @@ export const ComponentDetails = () => {
279412

280413
const isDeprecated = storyMeta?.csfFile?.meta?.parameters?.status?.type == "deprecated";
281414
const packageJson = storyMeta?.csfFile?.meta?.parameters?.packageJson ?? {};
415+
const rootClassName = storyMeta?.csfFile?.meta?.args?.rootClass ?? "";
416+
417+
const packageName = packageJson?.name;
418+
419+
if (!packageName) return;
282420

283-
if (!packageJson?.name) return;
421+
let spectrumData = packageJson?.spectrum;
422+
if (typeof spectrumData === "string") {
423+
spectrumData = [spectrumData];
424+
}
284425

285426
const [isLoading, setIsLoading] = useState(true);
286427
const [npmData, setnpmData] = useState({});
@@ -291,26 +432,28 @@ export const ComponentDetails = () => {
291432

292433
return (
293434
<ResetWrapper>
294-
{ !isLoading ?
295-
<DList className="docblock-metadata sb-unstyled">
296-
{ isDeprecated
297-
? <>
298-
<DTerm key={'status'}>Status:</DTerm>
299-
<DDefinition key={'status-data'}>Deprecated</DDefinition>
300-
</>
301-
: ""
302-
}
303-
{ showLocalVersion
304-
? <>
305-
<DTerm key={'version-label'}>Local version:</DTerm>
306-
<DDefinition key={'version'}><VersionDetails tag={"local"} data={allVersions && allVersions.find(([tag]) => tag === "local")?.[1]} isDeprecated={isDeprecated} /></DDefinition>
435+
{ !isLoading ? <>
436+
<DList className="docblock-metadata sb-unstyled">
437+
{ isDeprecated
438+
? <>
439+
<DTerm key={'status'}>Status:</DTerm>
440+
<DDefinition key={'status-data'}>Deprecated</DDefinition>
441+
</>
442+
: ""
443+
}
444+
{ showLocalVersion
445+
? <>
446+
<DTerm key={'version-label'}>Local version:</DTerm>
447+
<DDefinition key={'version'}><VersionDetails tag={"local"} data={allVersions && allVersions.find(([tag]) => tag === "local")?.[1]} isDeprecated={isDeprecated} /></DDefinition>
448+
</>
449+
: <>
450+
<DTerm key={'version-label'}>Latest version:</DTerm>
451+
<DDefinition key={'version'}><VersionDetails tag={"latest"} data={allVersions && allVersions.find(([tag]) => tag === "latest")?.[1]} isDeprecated={isDeprecated} skipLink={true} /></DDefinition>
307452
</>
308-
: <>
309-
<DTerm key={'version-label'}>Latest version:</DTerm>
310-
<DDefinition key={'version'}><VersionDetails tag={"latest"} data={allVersions && allVersions.find(([tag]) => tag === "latest")?.[1]} isDeprecated={isDeprecated} skipLink={true} /></DDefinition>
311-
</>
312-
}
313-
</DList>
453+
}
454+
</DList>
455+
<ResourceListDetails packageName={packageName} spectrumData={spectrumData} rootClassName={rootClassName} isDeprecated={isDeprecated}/>
456+
</>
314457
: ""}
315458
</ResetWrapper>
316459
);

‎.storybook/blocks/Typography.jsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,9 @@ export const Heading = styled.h3`
55
font-family: ${({ theme }) => theme.typography.fontFamily};
66
font-weight: ${({ theme }) => theme.typography.weight.bold};
77
color: inherit;
8-
font-size: ${({ size }) => fetchToken(`font-size-${size === "s" ? 300 : size === "l" ? 700 : size === "xl" ? 900 : 500}`, 22)};
8+
font-size: ${({ size }) => fetchToken(`font-size-${size === "xs" ? 200 : size === "s" ? 300 : size === "l" ? 700 : size === "xl" ? 900 : 500}`, 22)};
99
-webkit-font-smoothing: antialiased;
10+
margin: 0;
1011
1112
> strong {
1213
font-weight: 900;

‎.storybook/decorators/utilities.js

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,28 +7,28 @@ import { capitalize } from "lodash-es";
77
/**
88
* Renders a heading or code block that identifies the test case and is ignored by the snapshots.
99
* @param {Object} props
10-
* @param {string} props.type - The type of heading or code block to render.
10+
* @param {string} props.semantics - The type of heading or code block to render.
1111
* @param {string} props.content - The content to render in the heading or code block.
1212
* @param {string} props.size - The size of the heading to render.
1313
* @param {string} props.weight - The weight of the heading to render.
1414
* @param {string[]} props.customClasses - Additional classes to apply to the heading or code block.
1515
*/
1616
const Heading = ({
17-
type = "heading",
17+
semantics = "heading",
1818
content,
1919
size = "l",
2020
weight,
2121
customClasses = [],
2222
} = {}) => {
2323
return Typography({
24-
semantics: type === "code" ? "code" : "detail",
24+
semantics,
2525
size,
2626
weight,
2727
content,
2828
skipLineBreak: true,
2929
customClasses: ["chromatic-ignore", ...customClasses],
3030
customStyles: {
31-
"color": type !== "code" ? "var(--spectrum-heading-color)" : undefined,
31+
"color": semantics === "detail" ? "var(--spectrum-heading-color)" : undefined,
3232
}
3333
});
3434
};
@@ -48,18 +48,26 @@ const Heading = ({
4848
export const Container = ({
4949
heading,
5050
content,
51-
type = "heading",
51+
type = "detail",
5252
level = 1,
5353
direction = "row",
5454
withBorder = true,
5555
containerStyles = {},
5656
wrapperStyles = {},
5757
} = {}) => {
58-
let headingConfig = { size: "l" };
58+
const headingConfig = { size: "l", semantics: type };
5959
let gap = 40;
6060

6161
if (level > 1) {
62-
headingConfig = { size: "s", weight: "light" };
62+
headingConfig.size = "s";
63+
headingConfig.weight = "light";
64+
}
65+
66+
if (level > 3) {
67+
headingConfig.size = "xxs";
68+
headingConfig.semantics = "heading";
69+
containerStyles["padding-block-start"] = "8px";
70+
wrapperStyles["padding-block-start"] = "12px";
6371
}
6472

6573
if (level === 2) {
@@ -91,7 +99,6 @@ export const Container = ({
9199
>
92100
${when(heading, () => Heading({
93101
...headingConfig,
94-
type,
95102
content: heading
96103
}))}
97104
<div

‎.storybook/deprecated/quickaction/quickaction.stories.js

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,15 @@ export default {
7272
status: {
7373
type: "deprecated"
7474
},
75-
packageJson,
75+
packageJson: {
76+
...packageJson,
77+
"spectrum": [
78+
{
79+
"guidelines": "https://spectrum.adobe.com/page/quick-actions/",
80+
"rootClass": "spectrum-QuickActions",
81+
}
82+
]
83+
}
7684
},
7785
};
7886

‎.storybook/main.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export default {
1717
},
1818
],
1919
rootDir: "../",
20-
staticDirs: ["../assets"],
20+
staticDirs: ["../assets", "./assets/images"],
2121
addons: [
2222
{
2323
name: "@storybook/addon-essentials",

0 commit comments

Comments
 (0)