Skip to content

Commit 6dc9334

Browse files
castastrophecastastrophe
committed
build: add story exports; remove context from storybook
1 parent 8e6eb82 commit 6dc9334

File tree

35 files changed

+397
-257
lines changed

35 files changed

+397
-257
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: 8 additions & 16 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,24 +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

53-
if (!isRaw) {
54-
// add the default classes to the body to ensure labels, headings, and borders are styled correctly
55-
document.body.classList.add("spectrum", "spectrum--light", "spectrum--medium");
56-
}
57-
5848
// Start by attaching the appropriate tokens to the container
59-
toggleStyles(document.body, "tokens", tokens, !isRaw);
49+
toggleStyles(document.body, "tokens", tokens, true);
50+
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");
6053

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

6760
// Reset the context to the original values
6861
color = original.color;
69-
context = original.context;
7062
scale = original.scale;
7163

7264
let staticKey = staticColor;
@@ -81,7 +73,7 @@ export const withContextWrapper = makeDecorator({
8173
if (!staticKey) hasStaticElement = false;
8274

8375
// Every container gets the spectrum class
84-
container.classList.toggle("spectrum", !isRaw);
76+
container.classList.toggle("spectrum", true);
8577

8678
// Let the static color override the color if it's set
8779
if (!isTestingWrapper && hasStaticElement && staticColorSettings[staticKey]?.color) {
@@ -95,11 +87,11 @@ export const withContextWrapper = makeDecorator({
9587
}
9688

9789
for (let c of ["light", "dark"]) {
98-
container.classList.toggle(`spectrum--${c}`, c === color && !isRaw);
90+
container.classList.toggle(`spectrum--${c}`, c === color);
9991
}
10092

10193
for (const s of ["medium", "large"]) {
102-
container.classList.toggle(`spectrum--${s}`, s === scale && !isRaw);
94+
container.classList.toggle(`spectrum--${s}`, s === scale);
10395
}
10496

10597
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

67
import logo from "./assets/logo.svg";
@@ -66,5 +67,6 @@ addons.setConfig({
6667
}),
6768
sidebar: {
6869
showRoots: false,
70+
renderLabel: ({ name, type }) => (type === 'story' ? name : startCase(name)) + " 📚",
6971
},
7072
});

‎.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",

0 commit comments

Comments
 (0)