Skip to content

Commit 8437b24

Browse files
castastrophecastastrophe
committed
build: add story exports; remove context from storybook
1 parent 50016d1 commit 8437b24

File tree

120 files changed

+362
-305
lines changed

Some content is hidden

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

120 files changed

+362
-305
lines changed

‎.github/QUICK-START.md

Lines changed: 25 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
This guide will show you how to quickly install Spectrum CSS and use it to display the Button component.
44

55
## Install using Node/yarn
6+
67
Install the components you want along with their dependencies. Here's an example:
78

89
```shell
@@ -12,25 +13,33 @@ yarn add -DW @spectrum-css/tokens @spectrum-css/typography @spectrum-css/page @s
1213
Spectrum CSS components utilize custom properties in order to change themes and scales. For these to apply, a couple of classes need to be added to the document’s `<html>` tag based on the [visual language](https://github.com/adobe/spectrum-css?tab=readme-ov-file#visual-language), [scale](https://github.com/adobe/spectrum-css?tab=readme-ov-file#scales), and [theme](https://github.com/adobe/spectrum-css?tab=readme-ov-file#themes-colorstops) you wish to use. For example, the following code snippet will display styling for the default Spectrum visual language using medium scale and light color theme:
1314

1415
```html
15-
<html class="spectrum spectrum--medium spectrum--light">
16+
<html class="spectrum spectrum--medium spectrum--light"></html>
1617
```
1718

1819
Use the `index.css` files in your project to include component and global styles ([Spectrum and Express contexts](https://github.com/adobe/spectrum-css?tab=readme-ov-file#visual-language), [background theme/colorstop](https://github.com/adobe/spectrum-css?tab=readme-ov-file#themes-colorstops), [platform scaling](https://github.com/adobe/spectrum-css?tab=readme-ov-file#scales), etc.) for the component. If you don't need all of the global styles, peek at the docs for [including assets](https://github.com/adobe/spectrum-css?tab=readme-ov-file#including-assets)). Use this file by including the stylesheet (plus stylesheets for dependencies) in the `<head>` tag:
1920

2021
```html
2122
<head>
2223
<!-- Include global tokens depedency first -->
23-
<link rel="stylesheet" href="node_modules/@spectrum-css/tokens/dist/index.css"/>
24+
<link
25+
rel="stylesheet"
26+
href="node_modules/@spectrum-css/tokens/dist/index.css"
27+
/>
2428

2529
<!-- Include index.css for the components you're using -->
26-
<link rel="stylesheet" href="node_modules/@spectrum-css/button/dist/index.css"/>
30+
<link
31+
rel="stylesheet"
32+
href="node_modules/@spectrum-css/button/dist/index.css"
33+
/>
2734
</head>
2835
```
2936

3037
Inside the `<body>` tag, add the markup for your component (Spectrum button in our example). The example also includes the CSS class names `spectrum-Button--fill` and `spectrum-Button--accent`, to use the accent variant:
3138

3239
```html
33-
<button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeM">
40+
<button
41+
class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeM"
42+
>
3443
<span class="spectrum-Button-label">Button</span>
3544
</button>
3645
```
@@ -40,17 +49,25 @@ To put it all together, your final html file will look like this:
4049
```html
4150
<html class="spectrum spectrum--light spectrum--medium">
4251
<head>
43-
<link rel="stylesheet" href="node_modules/@spectrum-css/tokens/dist/index.css"/>
44-
<link rel="stylesheet" href="node_modules/@spectrum-css/page/dist/index-vars.css">
45-
<link rel="stylesheet" href="node_modules/@spectrum-css/button/dist/index-vars.css">
52+
<link
53+
rel="stylesheet"
54+
href="node_modules/@spectrum-css/tokens/dist/index.css"
55+
/>
56+
<link
57+
rel="stylesheet"
58+
href="node_modules/@spectrum-css/button/dist/index.css"
59+
/>
4660
</head>
4761
<body>
48-
<button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeM">
62+
<button
63+
class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeM"
64+
>
4965
<span class="spectrum-Button-label">Button</span>
5066
</button>
5167
</body>
5268
</html>
5369
```
5470

5571
## Include files from a CDN
72+
5673
Another way to include Spectrum CSS components in your project is to use a CDN to link to the components you want, plus their dependencies, in the `<head>` tag of your HTML. If you choose to use a CDN, please note that Spectrum CSS doesn't manage a CDN, cannot confirm the availability or up-time of external CDNs, and doesn't recommend using a CDN for Spectrum CSS in a production environment.

‎.github/actions/file-diff/README.md

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -44,9 +44,8 @@ Total size of all files for this branch in bytes.
4444
name: Compare compiled output file size
4545
uses: "spectrum-tools/gh-action-file-diff"
4646
with:
47-
head-path: ${{ github.workspace }}/pull-request
48-
base-path: ${{ github.workspace }}/base-branch
49-
file-glob-pattern: |
50-
components/*/dist/*.{css,json}
51-
components/*/dist/themes/*.css
47+
head-path: ${{ github.workspace }}/pull-request
48+
base-path: ${{ github.workspace }}/base-branch
49+
file-glob-pattern: |
50+
components/*/dist/*.{css,json}
5251
```

‎.storybook/decorators/context.js

Lines changed: 7 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@ export const withContextWrapper = makeDecorator({
1818
} = {},
1919
globals: {
2020
color = "light",
21-
context = "spectrum",
2221
scale = "medium",
2322
} = {},
2423
parameters: {
@@ -39,27 +38,18 @@ export const withContextWrapper = makeDecorator({
3938
},
4039
};
4140

42-
const original = {
43-
color,
44-
context,
45-
scale,
46-
};
41+
const original = { color, scale };
4742

4843
useEffect(() => {
4944
const isDocs = viewMode === "docs";
5045
const isTesting = showTestingGrid;
5146
const isRaw = Boolean(context === "raw");
5247

5348
// Start by attaching the appropriate tokens to the container
54-
toggleStyles(document.body, "tokens", tokens, !isRaw);
55-
56-
if (!isRaw) {
57-
// add the default classes to the body to ensure labels, headings, and borders are styled correctly
58-
document.body.classList.add("spectrum", "spectrum--light", "spectrum--medium");
59-
}
49+
toggleStyles(document.body, "tokens", tokens, true);
6050

61-
// Start by attaching the appropriate tokens to the container
62-
toggleStyles(document.body, "tokens", tokens, !isRaw);
51+
// add the default classes to the body to ensure labels, headings, and borders are styled correctly
52+
document.body.classList.add("spectrum", "spectrum--light", "spectrum--medium");
6353

6454
for (const container of fetchContainers(id, isDocs, isTesting)) {
6555
// Check if the container is a testing wrapper to prevent applying colors around the testing grid
@@ -69,7 +59,6 @@ export const withContextWrapper = makeDecorator({
6959

7060
// Reset the context to the original values
7161
color = original.color;
72-
context = original.context;
7362
scale = original.scale;
7463

7564
let staticKey = staticColor;
@@ -84,7 +73,7 @@ export const withContextWrapper = makeDecorator({
8473
if (!staticKey) hasStaticElement = false;
8574

8675
// Every container gets the spectrum class
87-
container.classList.toggle("spectrum", !isRaw);
76+
container.classList.toggle("spectrum", true);
8877

8978
// Let the static color override the color if it's set
9079
if (!isTestingWrapper && hasStaticElement && staticColorSettings[staticKey]?.color) {
@@ -98,11 +87,11 @@ export const withContextWrapper = makeDecorator({
9887
}
9988

10089
for (let c of ["light", "dark"]) {
101-
container.classList.toggle(`spectrum--${c}`, c === color && !isRaw);
90+
container.classList.toggle(`spectrum--${c}`, c === color);
10291
}
10392

10493
for (const s of ["medium", "large"]) {
105-
container.classList.toggle(`spectrum--${s}`, s === scale && !isRaw);
94+
container.classList.toggle(`spectrum--${s}`, s === scale);
10695
}
10796

10897
if (!isTestingWrapper) {

‎.storybook/manager.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11

22
import { addons } from "@storybook/manager-api";
33
import { create } from "@storybook/theming";
4+
import { startCase } from "lodash";
45

56
// Import the CSS bundle
67
import "@spectrum-css/bundle";
@@ -68,5 +69,6 @@ addons.setConfig({
6869
}),
6970
sidebar: {
7071
showRoots: false,
72+
renderLabel: ({ name, type }) => (type === 'story' ? name : startCase(name)) + " 📚",
7173
},
7274
});

‎.storybook/types/global.js

Lines changed: 0 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,6 @@
44

55
/** @type import('@storybook/types').GlobalTypes */
66
export default {
7-
context: {
8-
title: "Design context",
9-
description: "The variation of Spectrum to use in the component",
10-
defaultValue: "spectrum",
11-
type: "string",
12-
showName: true,
13-
toolbar: {
14-
items: [
15-
{ value: "spectrum", title: "Spectrum 2", right: "default" },
16-
{ value: "raw", title: "Token-free", right: "raw" },
17-
],
18-
dynamicTitle: true,
19-
},
20-
},
217
color: {
228
title: "Color",
239
description: "Controls the color context of the component",

‎components/accordion/package.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@
1717
".": "./dist/index.css",
1818
"./*.md": "./*.md",
1919
"./dist/*": "./dist/*",
20-
"./index-*.css": "./dist/index-*.css",
2120
"./index.css": "./dist/index.css",
2221
"./metadata.json": "./dist/metadata.json",
2322
"./package.json": "./package.json",

‎components/actionbar/package.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@
1717
".": "./dist/index.css",
1818
"./*.md": "./*.md",
1919
"./dist/*": "./dist/*",
20-
"./index-*.css": "./dist/index-*.css",
2120
"./index.css": "./dist/index.css",
2221
"./metadata.json": "./dist/metadata.json",
2322
"./package.json": "./package.json",

0 commit comments

Comments
 (0)