fix(pagination): deprecate legacy features to align with foundations

Author: castastrophe

.storybook/guides/develop.mdx

@@ -2,7 +2,7 @@ import { Meta } from "@storybook/blocks";
 
 import Illustration from "../assets/images/spectrum_illustration_2x.png";
 
-<Meta title="Contributing"/>
+<Meta title="Contributing" />
 
 <img src={Illustration} style={{ marginTop: "-20px", marginBottom: "20px" }} />
 
@@ -31,6 +31,7 @@ For more general information about how to contribute to the Spectrum CSS project
 
 Each component has the following files:
 
+<<<<<<< HEAD
 - `index.css` - The source file for all styles related to the component. This contains all selectors and css properties for the component.
 - `stories/*.stories.js` - The storybook file that defines the component's stories and the available knobs for the component.
 - `stories/template.js` - The template function that generates the component's mark-up based on the provided settings.
@@ -39,16 +40,42 @@ Each component has the following files:
 Each component outputs the following assets to `dist`:
 
 - `index.css`: This asset includes the CSS for the component and is meant to be loaded in conjunction with the tokens for your desired color context and scales.
+=======
+- `index.css` - The source file for all styles related to the component. This contains all selectors and css properties for the component but specifically lacks any custom properties or variables. These values are sourced from the `themes` directory.
+- `themes/*.css` - The theme-specific, component-level custom properties used to style the component. These files are meant to be loaded with the source styles.
+- `stories/*.stories.js` - The storybook file that defines the component's stories and the available knobs for the component.
+- `stories/template.js` - The template function that generates the component's mark-up based on the provided settings.
+- `stories/*.test.js` - The testing grid for visual regression testing in Chromatic.
+- `stories/*.mdx` - This asset generates the component-specific documentation and is rendered in Storybook as the Docs page.
+
+Each component outputs the following assets to `dist`:
+
+- `index.css`: This asset includes the base CSS and the `themes/spectrum-two.css` definitions (without the system mapping layer). This asset is meant to be used in a environment where only the current Spectrum theme is supported.
+- `index-base.css`: This asset includes only the base CSS; that is, the CSS without any custom property definitions. This can be used in conjunction with `index-theme.css` and the desired `themes/*.css` file to render a themed component.
+- `index-theme.css`: This asset includes only the custom property definitions for the component as mapped to the system variables. This can be used in conjunction with `index-base.css` and the desired `themes/*.css` file to render a themed component.
+
+Each component outputs theme-specific assets to `dist/themes`. These assets include the system variables mapped to their global token counterparts. This file is meant to be loaded in conjunction with the `index-base.css` and `index-theme.css` files to render a themed component.
+
+- `themes/spectrum-two.css`: Represents the current Spectrum theme, aka Spectrum 2.
+>>>>>>> 27d01dfbc (fix(pagination): deprecate legacy features to align with foundations)
 
 ## Adding a new component
 
 1. Generate a new component using the `yarn new component` command. The generator will prompt you to answer questions about your component.
 2. Edit the `dependencies` within the `package.json` file to use only the dependencies your component needs. All components rely on `@spectrum-css/tokens`, and most rely on `@spectrum-css/icon`.
 3. Once your folder has been generated, you can run `yarn start` in the root of the project to begin developing.
+<<<<<<< HEAD
 4. The `index.css` file is where all of your styles should be added.
 5. Inside the `stories` directory you will find a `template.js` and `*.stories.js` file.
    - In the `*.stories.js` file, define the available knobs and properties for your component, as well as any standard variations you want to surface in [Storybook](https://storybook.js.org/docs/react/writing-stories/introduction).
    - Update the `template.js` file with the markup, using [lit-html syntax](https://lit.dev/docs/templates/overview/) to adjust results based on the provided settings from the Storybook knobs.
+=======
+4. The `index.css` file is where most of your styles will be added. Add any custom property mappings to the global token library in the `themes/spectrum-two.css` asset.
+5. Inside the `stories` directory you will find a `template.js`, `*.stories.js`, and `*.mdx` file.
+   - In the `*.stories.js` file, define the available knobs and properties for your component, as well as any standard variations you want to surface in [Storybook](https://storybook.js.org/docs/react/writing-stories/introduction).
+   - Update the `template.js` file with the markup, using [lit-html syntax](https://lit.dev/docs/templates/overview/) to adjust results based on the provided settings from the Storybook knobs.
+   - Update the `*.mdx` file with the documentation for your component.
+>>>>>>> 27d01dfbc (fix(pagination): deprecate legacy features to align with foundations)
 
 _Note_: Because we use scoped packages, before it can be published, you must manually publish the new component as public:
 
@@ -163,6 +190,7 @@ To import shared types into your story, use the following syntax:
 
 ```js
 import {
+<<<<<<< HEAD
 	isActive,
 	isDisabled,
 	isFocused,
@@ -185,6 +213,30 @@ export default {
 		isFocused: false,
 		isActive: false,
 	},
+=======
+  isActive,
+  isDisabled,
+  isFocused,
+  isHovered,
+  isSelected,
+} from "@spectrum-css/preview/types";
+
+export default {
+  argTypes: {
+    isDisabled,
+    isSelected,
+    isHovered,
+    isFocused,
+    isActive,
+  },
+  args: {
+    isDisabled: false,
+    isSelected: false,
+    isHovered: false,
+    isFocused: false,
+    isActive: false,
+  },
+>>>>>>> 27d01dfbc (fix(pagination): deprecate legacy features to align with foundations)
 };
 ```
 
@@ -334,6 +386,7 @@ import { when } from "lit/directives/when.js";
 import "../index.css";
 
 export const Template = (
+<<<<<<< HEAD
 	{
 		rootClass = "spectrum-Tag",
 		size = "m",
@@ -408,6 +461,82 @@ export const Template = (
 			)}
 		</div>
 	`;
+=======
+  {
+    rootClass = "spectrum-Tag",
+    size = "m",
+    iconName,
+    avatarUrl,
+    label,
+    isSelected = false,
+    isEmphasized = false,
+    isDisabled = false,
+    isInvalid = false,
+    hasClearButton = false,
+    id,
+    customClasses = [],
+    customStyles = {},
+  },
+  context,
+) => {
+  return html`
+    <div
+      class=${classMap({
+        [rootClass]: true,
+        [`${rootClass}--size${size?.toUpperCase()}`]:
+          typeof size !== "undefined",
+        "is-emphasized": isEmphasized,
+        "is-disabled": isDisabled,
+        "is-invalid": isInvalid,
+        "is-selected": isSelected,
+        ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
+      })}
+      style=${styleMap(customStyles)}
+      id=${ifDefined(id)}
+      tabindex="0"
+    >
+      ${when(avatarUrl && !iconName, () =>
+        Avatar(
+          {
+            image: avatarUrl,
+            size: "50",
+          },
+          context,
+        ),
+      )}
+      ${when(iconName, () =>
+        Icon(
+          {
+            iconName,
+            customClasses: [`${rootClass}s-itemIcon`],
+          },
+          context,
+        ),
+      )}
+      <span
+        class=${classMap({
+          [`${rootClass}s-itemLabel`]: true,
+        })}
+        >${label}</span
+      >
+      ${when(hasClearButton, () =>
+        ClearButton(
+          {
+            customClasses: [`${rootClass}-clearButton`],
+            onclick: (evt) => {
+              const el = evt.target;
+              if (!el) return;
+
+              const wrapper = el.closest(rootClass);
+              wrapper.parentNode.removeChild(wrapper);
+            },
+          },
+          context,
+        ),
+      )}
+    </div>
+  `;
+>>>>>>> 27d01dfbc (fix(pagination): deprecate legacy features to align with foundations)
 };
 ```
 
@@ -424,6 +553,7 @@ import { Variants } from "@spectrum-css/preview/decorators";
 import { Template } from "./template.js";
 
 export const AccordionGroup = Variants({
+<<<<<<< HEAD
 	Template,
 	testData: [
 		{
@@ -442,6 +572,26 @@ export const AccordionGroup = Variants({
 			disableAll: true,
 		},
 	],
+=======
+  Template,
+  testData: [
+    {
+      testHeading: "Standard",
+    },
+    {
+      testHeading: "Compact",
+      density: "compact",
+      collapseAll: true,
+      withStates: false,
+    },
+  ],
+  stateData: [
+    {
+      testHeading: "Disabled",
+      disableAll: true,
+    },
+  ],
+>>>>>>> 27d01dfbc (fix(pagination): deprecate legacy features to align with foundations)
 });
 ```
 
@@ -460,7 +610,11 @@ In the event that you don't want a story to be tested in Chromatic, you can use
 
 ```js
 Default.parameters = {
+<<<<<<< HEAD
 	chromatic: { disableSnapshot: true },
+=======
+  chromatic: { disableSnapshot: true },
+>>>>>>> 27d01dfbc (fix(pagination): deprecate legacy features to align with foundations)
 };
 ```
 

.storybook/modes/index.js

@@ -12,12 +12,22 @@
  */
 
 const modes = {
+<<<<<<< HEAD
 	"Light | LTR": {
 		color: "light",
 		textDirection: "ltr",
 	},
 	"Dark | RTL": {
 		color: "dark",
+=======
+	Light: {
+		color: "light",
+	},
+	Dark: {
+		color: "dark",
+	},
+	RTL: {
+>>>>>>> 27d01dfbc (fix(pagination): deprecate legacy features to align with foundations)
 		textDirection: "rtl",
 	},
 };

.storybook/package.json

@@ -79,7 +79,6 @@
 		"@spectrum-css/button": "workspace:^",
 		"@spectrum-css/table": "workspace:^",
 		"@spectrum-css/tokens": "workspace:^",
-		"@spectrum-css/tokens-legacy": "npm:@spectrum-css/tokens@^14.6.0",
 		"@spectrum-css/typography": "workspace:^",
 		"@spectrum-css/ui-icons": "workspace:^",
 		"@spectrum-css/underlay": "workspace:^"

.storybook/preview.js

@@ -139,11 +139,15 @@ export const parameters = {
 	// Set an empty object to avoid the "undefined" value in the ComponentDetails doc block
 	packageJson: {},
 	// A list of published npm tags that should not appear in the ComponentDetails doc block
+<<<<<<< HEAD
 <<<<<<< HEAD
 	ignoredTags: ["beta"],
 =======
 	ignoredTags: ["beta", "next"],
 >>>>>>> 24419a94f (build: align tooling with s2-foundations branch)
+=======
+	ignoredTags: ["beta"],
+>>>>>>> 27d01dfbc (fix(pagination): deprecate legacy features to align with foundations)
 };
 
 export default {

.storybook/types/global.js

@@ -4,6 +4,23 @@
 
 /** @type import('@storybook/types').GlobalTypes */
 export default {
+<<<<<<< HEAD
+=======
+	context: {
+		title: "Design context",
+		description: "The variation of Spectrum to use in the component",
+		defaultValue: "spectrum",
+		type: "string",
+		showName: true,
+		toolbar: {
+			items: [
+				{ value: "spectrum", title: "Spectrum 2", right: "default" },
+				{ value: "raw", title: "Token-free", right: "raw" },
+			],
+			dynamicTitle: true,
+		},
+	},
+>>>>>>> 27d01dfbc (fix(pagination): deprecate legacy features to align with foundations)
 	color: {
 		title: "Color",
 		description: "Controls the color context of the component",