Skip to content

Commit a898418

Browse files
aramos-adobearamos-adobe
committed
docs(combobox): updating combobox stories
2 parents 70a0385 + 1c5d70c commit a898418

File tree

122 files changed

+873
-538
lines changed

Some content is hidden

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

122 files changed

+873
-538
lines changed

‎.storybook/blocks/PropertiesTable.jsx

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import "@spectrum-css/table";
2+
3+
import { DocsContext, useOf } from "@storybook/blocks";
4+
import { ResetWrapper } from "@storybook/components";
5+
import { NAVIGATE_URL } from "@storybook/core-events";
6+
import { styled } from "@storybook/theming";
7+
import React, { useContext } from 'react';
8+
import { Body, Code, LinkableHeading } from "./Typography.jsx";
9+
10+
export const Table = styled.table`
11+
--mod-table-cursor-row-default: auto;
12+
padding-block: 10px;
13+
`;
14+
15+
/**
16+
* Displays the modifiable custom properties for a component based on the metadata provided in the story.
17+
* The story metadata object is imported from the "metadata.json" file in the component's directory.
18+
*
19+
* If the metadata object does not contain a "modifiers" array, this component will not render.
20+
*
21+
* Usage of this doc block within MDX template(s):
22+
* <PropertiesTable />
23+
*/
24+
export const PropertiesTable = () => {
25+
const context = useContext(DocsContext);
26+
const storyMeta = useOf("meta");
27+
28+
const packageJson = storyMeta?.csfFile?.meta?.parameters?.packageJson ?? {};
29+
const metadata = storyMeta?.csfFile?.meta?.parameters?.metadata ?? {};
30+
31+
if (!packageJson?.name) return;
32+
if (!metadata?.modifiers || !metadata?.modifiers.length) return;
33+
34+
return (
35+
<ResetWrapper>
36+
<LinkableHeading id="modifiable-properties" size="m">
37+
<a aria-hidden="true" href="#modifiable-properties" tabIndex="-1" target="_self" onClick={() => {
38+
context.channel.emit(NAVIGATE_URL, "#modifiable-properties");
39+
}}></a>
40+
Modifiable custom properties
41+
</LinkableHeading>
42+
<Body>
43+
These are empty CSS custom property hooks available in this component
44+
that enable one-off customizations specific to a product implementation.
45+
</Body>
46+
<Table className="docblock-properties-table sb-unstyled spectrum-Table spectrum-Table--sizeL spectrum-Table--compact">
47+
<thead className="spectrum-Table-head">
48+
<tr>
49+
<th className="spectrum-Table-headCell">Property</th>
50+
</tr>
51+
</thead>
52+
<tbody className="spectrum-Table-body">
53+
{metadata?.modifiers.map((propertyName) => (
54+
<tr key={propertyName} className="spectrum-Table-row">
55+
<td className="spectrum-Table-cell">
56+
<Code backgroundColor={"transparent"} size="s">
57+
{propertyName}
58+
</Code>
59+
</td>
60+
</tr>
61+
))}
62+
</tbody>
63+
</Table>
64+
</ResetWrapper>
65+
);
66+
};

‎.storybook/blocks/Typography.jsx

Lines changed: 83 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,90 @@
11
import { styled } from "@storybook/theming";
22
import { fetchToken } from "./utilities";
33

4-
export const Heading = styled.div(({
5-
theme,
6-
size = "m",
7-
}) => {
8-
const fontSize = size === "s" ? 300 : size === "l" ? 700 : size === "xl" ? 900 : 500;
9-
return {
10-
fontFamily: theme.typography.fontFamily,
11-
fontWeight: theme.typography.weight.bold,
12-
color: "inherit",
13-
fontSize: fetchToken(`font-size-${fontSize}`, 22),
4+
export const Heading = styled.h3`
5+
font-family: ${({ theme }) => theme.typography.fontFamily};
6+
font-weight: ${({ theme }) => theme.typography.weight.bold};
7+
color: inherit;
8+
font-size: ${({ size }) => fetchToken(`font-size-${size === "s" ? 300 : size === "l" ? 700 : size === "xl" ? 900 : 500}`, 22)};
9+
-webkit-font-smoothing: antialiased;
1410
15-
'> strong': {
16-
fontWeight: 900, // @todo: this uses "black" which isn't valid CSS
17-
},
11+
> strong {
12+
font-weight: 900;
13+
}
1814
19-
'> em': {
20-
fontStyle: fetchToken("heading-sans-serif-emphasized-font-style", "italic"),
21-
}
22-
};
23-
});
15+
> em {
16+
font-style: ${() => fetchToken(
17+
"heading-sans-serif-emphasized-font-style",
18+
"italic",
19+
)};
20+
}
21+
`;
2422

25-
export const Body = styled.div(({
26-
theme,
27-
size = "m",
28-
scale = "desktop",
29-
...props
30-
}) => {
31-
const fontSize = size === "s" ? 100 : size === "l" ? 300 : size === "xl" ? 400 : 200;
32-
return {
33-
fontFamily: theme.typography.fontFamily,
34-
fontWeight: "normal",
35-
color: "inherit",
36-
fontSize: fetchToken(`font-size-${fontSize}`, 16),
37-
'> strong': {
38-
fontWeight: 900, // @todo: this uses "black" which isn't valid CSS
39-
},
40-
'> em': {
41-
fontStyle: fetchToken("body-sans-serif-emphasized-font-style", "italic"),
42-
},
43-
...props
44-
};
45-
});
23+
export const Body = styled.div(
24+
({ theme, size = "m", scale = "desktop", ...props }) => {
25+
const fontSize =
26+
size === "s" ? 100 : size === "l" ? 300 : size === "xl" ? 400 : 200;
27+
return {
28+
fontFamily: theme.typography.fontFamily,
29+
fontWeight: "normal",
30+
color: "inherit",
31+
fontSize: fetchToken(`font-size-${fontSize}`, 16),
32+
"> strong": {
33+
fontWeight: 900, // @todo: this uses "black" which isn't valid CSS
34+
},
35+
"> em": {
36+
fontStyle: fetchToken(
37+
"body-sans-serif-emphasized-font-style",
38+
"italic",
39+
),
40+
},
41+
...props,
42+
};
43+
},
44+
);
4645

47-
export const Code = styled.div(({
48-
theme,
49-
size = "m",
50-
scale = "desktop",
51-
...props
52-
}) => {
53-
return {
54-
fontFamily: theme.typography.fonts.mono,
55-
fontStyle: fetchToken("code-font-style", "normal"),
56-
fontWeight: fetchToken("code-font-weight", "400"),
57-
color: fetchToken("code-color", "inherit"),
58-
fontSize: fetchToken(`code-size-${size}`, 22),
59-
backgroundColor: fetchToken("gray-200"),
60-
padding: "0.125em 0.25em",
61-
borderRadius: "0.125em",
62-
...props
63-
};
64-
});
46+
export const Code = styled.div(
47+
({ theme, size = "m", scale = "desktop", ...props }) => {
48+
return {
49+
fontFamily: theme.typography.fonts.mono,
50+
fontStyle: fetchToken("code-font-style", "normal"),
51+
fontWeight: fetchToken("code-font-weight", "400"),
52+
color: fetchToken("code-color", "inherit"),
53+
fontSize: fetchToken(`code-size-${size}`, 22),
54+
backgroundColor: props => props.backgroundColor ?? fetchToken("gray-200"),
55+
padding: "0.125em 0.25em",
56+
borderRadius: "0.125em",
57+
...props,
58+
};
59+
},
60+
);
61+
62+
export const LinkableHeading = styled(Heading)`
63+
margin: 20px 0 8px;
64+
padding: 0;
65+
cursor: text;
66+
position: relative;
67+
padding-bottom: 4px;
68+
border-bottom: 1px solid hsla(203, 50%, 30%, 0.15);
69+
70+
a {
71+
float: left;
72+
line-height: inherit;
73+
padding-right: 10px;
74+
margin-left: -24px;
75+
color: inherit;
76+
}
77+
78+
a::after {
79+
display: inline-block;
80+
content: "";
81+
visibility: hidden;
82+
background: url('data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M11.841%202.159a2.25%202.25%200%2000-3.182%200l-2.5%202.5a2.25%202.25%200%20000%203.182.5.5%200%2001-.707.707%203.25%203.25%200%20010-4.596l2.5-2.5a3.25%203.25%200%20014.596%204.596l-2.063%202.063a4.27%204.27%200%2000-.094-1.32l1.45-1.45a2.25%202.25%200%20000-3.182z%22%20fill%3D%22currentColor%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M3.61%207.21c-.1-.434-.132-.88-.095-1.321L1.452%207.952a3.25%203.25%200%20104.596%204.596l2.5-2.5a3.25%203.25%200%20000-4.596.5.5%200%2000-.707.707%202.25%202.25%200%20010%203.182l-2.5%202.5A2.25%202.25%200%20112.159%208.66l1.45-1.45z%22%20fill%3D%22currentColor%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E');
83+
block-size: 14px;
84+
inline-size: 14px;
85+
}
86+
87+
&:hover a::after {
88+
visibility: visible;
89+
}
90+
`;

‎.storybook/blocks/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,5 +13,6 @@
1313

1414
export * from "./ColorPalette.jsx";
1515
export * from "./ComponentDetails.jsx";
16+
export * from "./PropertiesTable.jsx";
1617
export * from "./ThemeContainer.jsx";
1718
export * from "./Typography.jsx";

‎.storybook/deprecated/cyclebutton/cyclebutton.stories.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { default as ActionButtonStories } from "@spectrum-css/actionbutton/stories/actionbutton.stories.js";
22
import { Template as ActionButton } from "@spectrum-css/actionbutton/stories/template.js";
3-
import pkgJson from "@spectrum-css/cyclebutton/package.json";
3+
import packageJson from "@spectrum-css/cyclebutton/package.json";
44
import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.js";
55
import { html } from "lit";
66

@@ -45,7 +45,7 @@ export default {
4545
status: {
4646
type: "deprecated"
4747
},
48-
packageJson: pkgJson,
48+
packageJson,
4949
},
5050
};
5151

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import pkgJson from "@spectrum-css/quickaction/package.json";
1+
import packageJson from "@spectrum-css/quickaction/package.json";
22
import { html } from "lit";
33
import { classMap } from "lit/directives/class-map.js";
44
import { ifDefined } from "lit/directives/if-defined.js";
@@ -72,7 +72,7 @@ export default {
7272
status: {
7373
type: "deprecated"
7474
},
75-
packageJson: pkgJson,
75+
packageJson,
7676
},
7777
};
7878

‎.storybook/deprecated/searchwithin/searchwithin.stories.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import pkgJson from "@spectrum-css/searchwithin/package.json";
1+
import packageJson from "@spectrum-css/searchwithin/package.json";
22
import { html } from "lit";
33
import { classMap } from "lit/directives/class-map.js";
44
import { ifDefined } from "lit/directives/if-defined.js";
@@ -143,7 +143,7 @@ export default {
143143
status: {
144144
type: "deprecated"
145145
},
146-
packageJson: pkgJson,
146+
packageJson,
147147
},
148148
};
149149

‎.storybook/deprecated/splitbutton/splitbutton.stories.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import pkgJson from "@spectrum-css/splitbutton/package.json";
1+
import packageJson from "@spectrum-css/splitbutton/package.json";
22
import { html } from "lit";
33
import { classMap } from "lit/directives/class-map.js";
44

@@ -64,7 +64,7 @@ export default {
6464
status: {
6565
type: "deprecated"
6666
},
67-
packageJson: pkgJson,
67+
packageJson,
6868
},
6969
};
7070

‎.storybook/package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@
2929
},
3030
"dependencies": {
3131
"@adobe/spectrum-css-workflow-icons": "^1.5.4",
32+
"@spectrum-css/table": "workspace:^",
3233
"@spectrum-css/tokens": "workspace:^",
3334
"@spectrum-css/typography": "workspace:^",
3435
"@spectrum-css/ui-icons": "workspace:^"
@@ -54,7 +55,7 @@
5455
"@storybook/theming": "^8.3.5",
5556
"@storybook/web-components-vite": "^8.3.5",
5657
"@whitespace/storybook-addon-html": "^6.1.1",
57-
"chromatic": "^11.12.0",
58+
"chromatic": "^11.12.5",
5859
"lit": "^3.2.0",
5960
"lodash-es": "^4.17.21",
6061
"npm-registry-fetch": "^17.0.1",

‎.storybook/project.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
"outputs": ["{workspaceRoot}/dist/preview"]
2828
}
2929
},
30-
"dependsOn": ["clean", "^build"],
30+
"dependsOn": ["clean", "^build", { "target": "report", "tag": "component" }],
3131
"executor": "nx:run-commands",
3232
"inputs": ["tools", { "externalDependencies": ["storybook"] }],
3333
"options": {
@@ -85,7 +85,7 @@
8585
},
8686
"start": {
8787
"cache": true,
88-
"dependsOn": ["^build"],
88+
"dependsOn": [{ "target": "report", "projects": "tag:component" }, "^build"],
8989
"executor": "nx:run-commands",
9090
"inputs": [
9191
"tools",

‎.storybook/templates/DocumentationTemplate.mdx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {
99
ArgTypes,
1010
Stories,
1111
} from "@storybook/blocks";
12-
import { ComponentDetails, TaggedReleases } from "../blocks";
12+
import { ComponentDetails, TaggedReleases, PropertiesTable } from "../blocks";
1313

1414
{/* 👇 The isTemplate property is required to tell Storybook that this is a template */}
1515

@@ -29,6 +29,8 @@ The component accepts the following inputs (properties):
2929

3030
<ArgTypes />
3131

32+
<PropertiesTable />
33+
3234
## Tagged releases
3335

3436
<TaggedReleases />

0 commit comments

Comments
 (0)