feat(coachmark)!: migrate tokens

components/actionbutton/stories/actionbutton.stories.js

@@ -9,6 +9,7 @@ export default {
 	args: {
 		rootClass: "spectrum-ActionButton",
 		size: "m",
+		label: "More Actions",
 		iconName: "More",
 		isQuiet: false,
 		isEmphasized: false,

components/actionmenu/stories/actionmenu.stories.js

@@ -7,6 +7,7 @@ import { Template } from "./template";
 import { default as ActionButton } from "@spectrum-css/actionbutton/stories/actionbutton.stories.js";
 import { default as Menu } from "@spectrum-css/menu/stories/menu.stories.js";
 import { default as Popover } from "@spectrum-css/popover/stories/popover.stories.js";
+import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.js";
 
 export default {
 	title: "Components/Action menu",
@@ -23,6 +24,19 @@ export default {
 			},
 			control: "boolean",
 		},
+		iconName: {
+			...(IconStories?.argTypes?.iconName ?? {}),
+			if: false,
+		},
+		label: {
+			name: "Label",
+			type: { name: "string" },
+			table: {
+				type: { summary: "string" },
+				category: "Content",
+			},
+			control: { type: "text" },
+		},
 	},
 	args: {
 		isOpen: true,
@@ -56,6 +70,8 @@ Default.play = async ({ canvasElement }) => {
 Default.decorators = [(Story) => html`<div style="padding: 1em;">${Story().outerHTML || Story()}</div>`];
 Default.args = {
 	isOpen: false,
+	label: "More actions",
+	iconName: "More",
 	items: [
 		{
 			label: "Action 1",

components/actionmenu/stories/template.js

@@ -1,4 +1,5 @@
 import { html } from "lit";
+import { useArgs } from "@storybook/client-api";
 
 import { Template as ActionButton } from "@spectrum-css/actionbutton/stories/template.js";
 import { Template as Popover } from "@spectrum-css/popover/stories/template.js";
@@ -8,8 +9,12 @@ export const Template = ({
 	customClasses = [],
 	items = [],
 	isOpen = false,
+	label,
+	iconName,
+	size = "m",
 	...globals
 }) => {
+  const [_, updateArgs] = useArgs();
 
 	if (!items.length) {
 		console.warn("ActionMenu: requires items be passed in to render.");
@@ -27,14 +32,21 @@ export const Template = ({
 			Menu({ items })
 		],
 		trigger: (passthroughs) => ActionButton({
-			size: "m",
-			isQuiet: true,
+			size,
+			label,
+			iconName,
+			isQuiet: false,
+			isEmphasized: false,
+			hasPopup: false,
 			isSelected: isOpen,
-			label: "More Actions",
+			label,
 			iconName: "More",
 			id: "trigger",
 			customClasses,
 			...passthroughs,
+			onclick: function () {
+				updateArgs({ isOpen: !isOpen });
+			},
 		})
 	})
-};
+}

components/buttongroup/index.css

@@ -36,10 +36,10 @@ governing permissions and limitations under the License.
 }
 
 .spectrum-ButtonGroup {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--mod-buttongroup-spacing-horizontal, var(--spectrum-buttongroup-spacing-horizontal));
-  justify-content: var(--mod-buttongroup-justify-content, normal);
+	display: flex;
+	flex-wrap: wrap;
+	gap: var(--mod-buttongroup-spacing-horizontal, var(--spectrum-buttongroup-spacing-horizontal));
+	justify-content: var(--mod-buttongroup-justify-content, normal);
 
   .spectrum-ButtonGroup-item {
     flex-shrink: 0;

components/buttongroup/stories/buttongroup.stories.js

@@ -30,6 +30,7 @@ export default {
 	args: {
 		rootClass: "spectrum-ButtonGroup",
 		size: "m",
+		iconName: undefined,
 		vertical: false,
 	},
 	parameters: {
@@ -52,6 +53,12 @@ Default.args = {
 			treatment: "outline",
 			label: "No, thanks",
 		},
+		{
+			variant: "secondary",
+			treatment: "outline",
+			label: "Remind me later",
+
+		},
 		{
 			variant: "secondary",
 			treatment: "outline",

components/coachindicator/.npmignore

@@ -0,0 +1 @@
+/dist/docs/

components/coachindicator/CHANGELOG.md

@@ -0,0 +1,4 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

components/coachindicator/README.md

@@ -0,0 +1,7 @@
+# @spectrum-css/coachindicator
+
+> The Spectrum CSS Coach Indicator component
+
+This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css).
+
+See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/) and [Spectrum CSS on GitHub](https://github.com/adobe/spectrum-css) for details.

components/coachindicator/animation.css

@@ -0,0 +1,51 @@
+/*!
+Copyright 2023 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+.spectrum-CoachIndicator{
+  --spectrum-coach-indicator-animation-keyframe-0-scale: 1;
+  --spectrum-coach-indicator-animation-keyframe-0-opacity: 0;
+  --spectrum-coach-indicator-animation-keyframe-50-scale: 1.5;
+  --spectrum-coach-indicator-animation-keyframe-50-opacity: 1;
+  --spectrum-coach-indicator-animation-keyframe-100-scale: 2;
+  --spectrum-coach-indicator-animation-keyframe-100-opacity: 0;
+  --spectrum-coach-indicator-quiet-animation-keyframe-0-scale: 0.8;
+}
+
+
+@keyframes pulse {
+  0% {
+    -webkit-transform: scale(var(--spectrum-coach-indicator-animation-keyframe-0-scale));
+    opacity: var(--spectrum-coach-indicator-animation-keyframe-0-opacity);
+  }
+  50% {
+    -webkit-transform: scale(var(--spectrum-coach-indicator-animation-keyframe-50-scale));
+    opacity: var(--spectrum-coach-indicator-animation-keyframe-50-opacity);
+  }
+  100% {
+    -webkit-transform: scale(var(--spectrum-coach-indicator-animation-keyframe-100-scale));
+    opacity: var(--spectrum-coach-indicator-animation-keyframe-100-opacity);
+  }
+}
+
+@keyframes pulse--quiet {
+	0% {
+		-webkit-transform: scale(var(--spectrum-coach-indicator-quiet-animation-keyframe-0-scale));
+		opacity: var(--spectrum-coach-indicator-animation-keyframe-0-opacity);
+	}
+	50% {
+		-webkit-transform: scale(var(--spectrum-coach-indicator-animation-keyframe-50-scale));
+		opacity: var(--spectrum-coach-indicator-animation-keyframe-50-opacity);
+	}
+	100% {
+		-webkit-transform: scale(var(--spectrum-coach-indicator-animation-keyframe-100-scale));
+		opacity: var(--spectrum-coach-indicator-animation-keyframe-100-opacity);
+	}
+}

components/coachindicator/gulpfile.js

@@ -0,0 +1 @@
+module.exports = require("@spectrum-css/component-builder-simple");

components/coachindicator/index.css

@@ -0,0 +1,99 @@
+/*!
+Copyright 2023 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+@import "animation.css";
+
+.spectrum-CoachIndicator {
+  --spectrum-coach-indicator-ring-border-size: var(--spectrum-border-width-200);
+  --spectrum-coach-indicator-min-inline-size: calc(var(--spectrum-coach-indicator-ring-diameter) * 3);
+  --spectrum-coach-indicator-min-block-size: calc(var(--spectrum-coach-indicator-ring-diameter) * 3);
+  --spectrum-coach-indicator-ring-inline-size: var(--spectrum-coach-indicator-ring-diameter);
+  --spectrum-coach-indicator-ring-block-size: var(--spectrum-coach-indicator-ring-diameter);
+
+  --spectrum-coach-indicator-top: calc(var(--spectrum-coach-indicator-ring-diameter) * 0.75);
+  --spectrum-coach-indicator-left: calc(var(--spectrum-coach-indicator-ring-diameter) * 0.75);
+
+  /* animation */
+  --spectrum-coach-animation-indicator-ring-duration: var(--spectrum-animation-duration-6000);
+  --spectrum-coach-animation-indicator-ring-inner-delay-multiple: -0.5;
+  --spectrum-coach-animation-indicator-ring-center-delay-multiple: -0.66;
+  --spectrum-coach-animation-indicator-ring-outer-delay-multiple: -1;
+  --spectrum-coach-indicator-quiet-animation-ring-inner-delay-multiple: -0.33;
+  --spectrum-coach-indicator-animation-name: pulse;
+  --spectrum-coach-indicator-inner-animation-delay-multiple: var(--spectrum-coach-animation-indicator-ring-inner-delay-multiple);
+
+  &--quiet {
+    --mod-coach-indicator-min-inline-size: calc(var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter)) * 2.75);
+    --mod-coach-indicator-min-block-size: calc(var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter)) * 2.75);
+    --mod-coach-indicator-ring-inline-size: var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter));
+    --mod-coach-indicator-ring-block-size: var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter));
+
+    --mod-coach-indicator-top: calc(var(--spectrum-coach-indicator-quiet-ring-diameter) * 0.75);
+    --mod-coach-indicator-left: calc(var(--spectrum-coach-indicator-quiet-ring-diameter) * 0.75);
+    --mod-coach-indicator-animation-name: pulse--quiet;
+    --mod-coach-indicator-inner-animation-delay-multiple: var(--mod-coach-indicator-quiet-animation-ring-inner-delay-multiple, var(--spectrum-coach-indicator-quiet-animation-ring-inner-delay-multiple));
+  }
+}
+
+.spectrum-CoachIndicator {
+  position: relative;
+  margin: var(--mod-coach-indicator-gap, var(--spectrum-coach-indicator-gap));
+
+  min-inline-size: var(--mod-coach-indicator-min-inline-size, var(--spectrum-coach-indicator-min-inline-size));
+  min-block-size: var(--mod-coach-indicator-min-block-size, var(--spectrum-coach-indicator-min-block-size));
+}
+
+.spectrum-CoachIndicator-ring {
+  display: block;
+  position: absolute;
+
+  border-style: solid;
+  border-width: var(--mod-coach-indicator-ring-border-size, var(--spectrum-coach-indicator-ring-border-size));
+  border-radius: 50%;
+  border-color: var(--mod-coach-indicator-ring-default-color, var(--spectrum-coach-indicator-ring-default-color));
+
+  inset-block-start: var(--mod-coach-indicator-top, var(--spectrum-coach-indicator-top));
+  inset-inline-start: var(--mod-coach-indicator-left, var(--spectrum-coach-indicator-left));
+
+  inline-size: var(--mod-coach-indicator-ring-inline-size, var(--spectrum-coach-indicator-ring-inline-size));
+  block-size: var(--mod-coach-indicator-ring-block-size, var(--spectrum-coach-indicator-ring-block-size));
+  animation: var(--mod-coach-indicator-animation-name, var(--spectrum-coach-indicator-animation-name)) var(--mod-coach-animation-indicator-ring-duration, var(--spectrum-coach-animation-indicator-ring-duration)) linear infinite;
+
+  &:nth-child(1) {
+    animation-delay: calc(var(--mod-coach-animation-indicator-ring-duration, var(--spectrum-coach-animation-indicator-ring-duration))
+                      * var(--mod-coach-indicator-inner-animation-delay-multiple, var(--spectrum-coach-indicator-inner-animation-delay-multiple)));
+  }
+
+  &:nth-child(2) {
+    animation-delay: calc( var(--mod-coach-animation-indicator-ring-duration, var(--spectrum-coach-animation-indicator-ring-duration))
+                      * var(--mod-coach-animation-indicator-ring-center-delay-multiple, var(--spectrum-coach-animation-indicator-ring-center-delay-multiple)));
+  }
+
+  &:nth-child(3) {
+    animation-delay: calc(var(--mod-coach-animation-indicator-ring-duration, var(--spectrum-coach-animation-indicator-ring-duration))
+                      * var(--mod-coach-animation-indicator-ring-outer-delay-multiple, var(--spectrum-coach-animation-indicator-ring-outer-delay-multiple)));
+  }
+}
+
+.spectrum-CoachIndicator--light .spectrum-CoachIndicator-ring {
+  border-color: var(--mod-coach-indicator-ring-light-color, var(--spectrum-coach-indicator-ring-light-color));
+}
+
+.spectrum-CoachIndicator--dark .spectrum-CoachIndicator-ring {
+  border-color: var(--mod-coach-indicator-ring-dark-color, var(--spectrum-coach-indicator-ring-dark-color));
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .spectrum-CoachIndicator-ring {
+    animation: none;
+  }
+}

components/coachindicator/metadata/coachindicator.yml

@@ -0,0 +1,47 @@
+name: Coach indicator
+SpectrumSiteSlug: https://spectrum.adobe.com/page/coach-mark/
+sections:
+  - name: Migration Guide
+    description: |
+      - Coach Indicator is now a seperate component from Coach Mark
+examples:
+  - id: coach-indicator
+    name: Standard
+    markup: |
+      <div class="spectrum-CoachIndicator" style="display: inline-block;">
+        <div class="spectrum-CoachIndicator-ring"></div>
+        <div class="spectrum-CoachIndicator-ring"></div>
+        <div class="spectrum-CoachIndicator-ring"></div>
+      </div>
+
+      <div class="spectrum-CoachIndicator spectrum-CoachIndicator--dark" style="display: inline-block;">
+        <div class="spectrum-CoachIndicator-ring"></div>
+        <div class="spectrum-CoachIndicator-ring"></div>
+        <div class="spectrum-CoachIndicator-ring"></div>
+      </div>
+
+      <div class="spectrum-CoachIndicator spectrum-CoachIndicator--light" style="display: inline-block;">
+        <div class="spectrum-CoachIndicator-ring"></div>
+        <div class="spectrum-CoachIndicator-ring"></div>
+        <div class="spectrum-CoachIndicator-ring"></div>
+      </div>
+  - id: coach-indicator-quiet
+    name: Quiet
+    markup: |
+      <div class="spectrum-CoachIndicator spectrum-CoachIndicator--quiet" style="display: inline-block;">
+        <div class="spectrum-CoachIndicator-ring"></div>
+        <div class="spectrum-CoachIndicator-ring"></div>
+        <div class="spectrum-CoachIndicator-ring"></div>
+      </div>
+
+      <div class="spectrum-CoachIndicator spectrum-CoachIndicator--dark spectrum-CoachIndicator--quiet" style="display: inline-block;">
+        <div class="spectrum-CoachIndicator-ring"></div>
+        <div class="spectrum-CoachIndicator-ring"></div>
+        <div class="spectrum-CoachIndicator-ring"></div>
+      </div>
+
+      <div class="spectrum-CoachIndicator spectrum-CoachIndicator--light spectrum-CoachIndicator--quiet" style="display: inline-block;">
+        <div class="spectrum-CoachIndicator-ring"></div>
+        <div class="spectrum-CoachIndicator-ring"></div>
+        <div class="spectrum-CoachIndicator-ring"></div>
+      </div>

components/coachindicator/metadata/mods.md

@@ -0,0 +1,20 @@
+| Modifiable Custom Properties                                      |
+| ----------------------------------------------------------------- |
+| `--mod-coach-animation-indicator-ring-center-delay-multiple`      |
+| `--mod-coach-animation-indicator-ring-duration`                   |
+| `--mod-coach-animation-indicator-ring-outer-delay-multiple`       |
+| `--mod-coach-indicator-animation-name`                            |
+| `--mod-coach-indicator-gap`                                       |
+| `--mod-coach-indicator-inner-animation-delay-multiple`            |
+| `--mod-coach-indicator-left`                                      |
+| `--mod-coach-indicator-min-block-size`                            |
+| `--mod-coach-indicator-min-inline-size`                           |
+| `--mod-coach-indicator-quiet-animation-ring-inner-delay-multiple` |
+| `--mod-coach-indicator-quiet-ring-diameter`                       |
+| `--mod-coach-indicator-ring-block-size`                           |
+| `--mod-coach-indicator-ring-border-size`                          |
+| `--mod-coach-indicator-ring-dark-color`                           |
+| `--mod-coach-indicator-ring-default-color`                        |
+| `--mod-coach-indicator-ring-inline-size`                          |
+| `--mod-coach-indicator-ring-light-color`                          |
+| `--mod-coach-indicator-top`                                       |

components/coachindicator/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@spectrum-css/coachindicator",
+  "version": "1.0.0-alpha.3",
+  "description": "The Spectrum CSS Coach Indicator component ",
+  "license": "Apache-2.0",
+  "author": "Adobe",
+  "homepage": "https://opensource.adobe.com/spectrum-css/coachindicator",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/adobe/spectrum-css.git",
+    "directory": "components/coachindicator"
+  },
+  "bugs": {
+    "url": "https://github.com/adobe/spectrum-css/issues"
+  },
+  "main": "dist/index-vars.css",
+  "scripts": {
+    "build": "gulp"
+  },
+  "peerDependencies": {
+    "@spectrum-css/tokens": ">=11"
+  },
+  "devDependencies": {
+    "@spectrum-css/component-builder-simple": "^2.0.17",
+    "@spectrum-css/tokens": "^11.3.7",
+    "gulp": "^4.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}