diff --git a/packages/web-components/fast-components-msft/.eslintignore b/packages/web-components/fast-components-msft/.eslintignore new file mode 100644 index 00000000000..4c6a15b9360 --- /dev/null +++ b/packages/web-components/fast-components-msft/.eslintignore @@ -0,0 +1,8 @@ +# don't ever lint node_modules +node_modules +# don't lint build output (make sure it's set to your correct build folder name) +dist +# don't lint coverage output +coverage +# don't lint storybook +.storybook \ No newline at end of file diff --git a/packages/web-components/fast-components-msft/.eslintrc.js b/packages/web-components/fast-components-msft/.eslintrc.js new file mode 100644 index 00000000000..223358e0ef2 --- /dev/null +++ b/packages/web-components/fast-components-msft/.eslintrc.js @@ -0,0 +1,10 @@ +module.exports = { + extends: ["@microsoft/eslint-config-fast-dna", "prettier"], + rules: { + "no-extra-boolean-cast": "off", + "@typescript-eslint/no-use-before-define": "off", + "@typescript-eslint/typedef": "off", + "@typescript-eslint/explicit-function-return-type": "off", + "@typescript-eslint/no-non-null-assertion": "off", + }, +}; diff --git a/packages/web-components/fast-components-msft/.npmignore b/packages/web-components/fast-components-msft/.npmignore new file mode 100644 index 00000000000..7bf602fe1ae --- /dev/null +++ b/packages/web-components/fast-components-msft/.npmignore @@ -0,0 +1,20 @@ +# Tests +__test__/ +*.test.* + +# specifications +*.spec.* + +# images +images/ + +# Source files +src/ + +# config files +.eslintignore +.eslintrc.js +.prettierignore +.storybook +tsconfig.json +tsconfig.build.json \ No newline at end of file diff --git a/packages/web-components/fast-components-msft/.npmrc b/packages/web-components/fast-components-msft/.npmrc new file mode 100644 index 00000000000..43c97e719a5 --- /dev/null +++ b/packages/web-components/fast-components-msft/.npmrc @@ -0,0 +1 @@ +package-lock=false diff --git a/packages/web-components/fast-components-msft/.prettierignore b/packages/web-components/fast-components-msft/.prettierignore new file mode 100644 index 00000000000..56e2a7fa581 --- /dev/null +++ b/packages/web-components/fast-components-msft/.prettierignore @@ -0,0 +1,2 @@ +coverage/* +dist/* \ No newline at end of file diff --git a/packages/web-components/fast-components-msft/.storybook/main.js b/packages/web-components/fast-components-msft/.storybook/main.js new file mode 100644 index 00000000000..98737a46fa7 --- /dev/null +++ b/packages/web-components/fast-components-msft/.storybook/main.js @@ -0,0 +1,24 @@ +const CircularDependencyPlugin = require("circular-dependency-plugin"); + +module.exports = { + stories: ["../src/**/*.stories.ts"], + webpackFinal: async config => { + config.module.rules.push({ + test: /\.(ts)$/, + use: [ + { + loader: require.resolve("ts-loader"), + }, + ], + }); + config.resolve.extensions.push(".ts"); + config.plugins.push( + new CircularDependencyPlugin({ + exclude: /node_modules/, + failOnError: process.env.NODE_ENV === "production", + }) + ); + + return config; + }, +}; diff --git a/packages/web-components/fast-components-msft/README.md b/packages/web-components/fast-components-msft/README.md new file mode 100644 index 00000000000..5d065fa2cee --- /dev/null +++ b/packages/web-components/fast-components-msft/README.md @@ -0,0 +1,14 @@ +# FAST Components MSFT + +A set of React components which implements the Microsoft styling. + +## Installation + +`npm i --save @microsoft/fast-components-msft` + +### Known issue with Storybook site hot-reloading during development + +Storybook will watch modules for changes and hot-reload the module when necessary. This is usually great but poses a problem when the module being hot-reloaded defines a custom element. A custom element name can only be defined by the `CustomElementsRegistry` once, so reloading a module that defines a custom element will attempt to re-register the custom element name, throwing an error because the name has already been defined. This error will manifest with the following message: +`Failed to execute 'define' on 'CustomElementRegistry': the name "my-custom-element-name" has already been used with this registry` + +This is a known issue and will indicate that you need to refresh the page. We're working on surfacing a more instructive error message for this case. diff --git a/packages/web-components/fast-components-msft/package.json b/packages/web-components/fast-components-msft/package.json new file mode 100644 index 00000000000..6d3bc24bc72 --- /dev/null +++ b/packages/web-components/fast-components-msft/package.json @@ -0,0 +1,48 @@ +{ + "name": "@microsoft/fast-components-msft", + "description": "A library of Web Components with Microsoft styles", + "sideEffects": false, + "version": "0.0.0", + "author": { + "name": "Microsoft", + "url": "https://discord.gg/FcSNfg4" + }, + "license": "MIT", + "repository": { + "type": "git", + "url": "git+https://github.com/Microsoft/fast-dna.git" + }, + "bugs": { + "url": "https://github.com/Microsoft/fast-dna/issues/new/choose" + }, + "main": "./dist/index.js", + "types": "./dist/index.d.ts", + "scripts": { + "build": "tsc -p ./tsconfig.build.json", + "clean:dist": "node ../../../build/clean.js dist", + "prepare": "yarn clean:dist && yarn build", + "prettier": "prettier --config ../../../.prettierrc --write \"**/*.ts\"", + "prettier:diff": "prettier --config ../../../.prettierrc \"**/*.ts\" --list-different", + "eslint": "eslint . --ext .ts", + "eslint:fix": "eslint . --ext .ts --fix", + "start": "start-storybook -p 6006", + "test": "yarn build-storybook && yarn eslint", + "build-storybook": "build-storybook" + }, + "devDependencies": { + "@babel/core": "^7.8.4", + "@microsoft/eslint-config-fast-dna": "^1.1.1", + "@storybook/cli": "^5.3.13", + "@storybook/html": "^5.3.13", + "circular-dependency-plugin": "^5.2.0", + "prettier": "2.0.2", + "ts-loader": "^6.2.1", + "typescript": "^3.7.5" + }, + "dependencies": { + "@microsoft/fast-components": "^0.10.1", + "@microsoft/fast-components-styles-msft": "4.28.9", + "@microsoft/fast-element": "^0.8.1" + } + } + \ No newline at end of file diff --git a/packages/web-components/fast-components-msft/src/anchor/anchor.stories.ts b/packages/web-components/fast-components-msft/src/anchor/anchor.stories.ts new file mode 100644 index 00000000000..fced666e146 --- /dev/null +++ b/packages/web-components/fast-components-msft/src/anchor/anchor.stories.ts @@ -0,0 +1,13 @@ +import { FASTDesignSystemProvider } from "../design-system-provider"; +import AnchorTemplate from "./fixtures/anchor.html"; +import { FASTAnchor } from "./"; + +// Prevent tree-shaking +FASTAnchor; +FASTDesignSystemProvider; + +export default { + title: "Anchor", +}; + +export const Anchor = () => AnchorTemplate; diff --git a/packages/web-components/fast-components-msft/src/anchor/anchor.styles.ts b/packages/web-components/fast-components-msft/src/anchor/anchor.styles.ts new file mode 100644 index 00000000000..51210610a62 --- /dev/null +++ b/packages/web-components/fast-components-msft/src/anchor/anchor.styles.ts @@ -0,0 +1,59 @@ +import { css } from "@microsoft/fast-element"; +import { + AccentButtonStyles, + accentFillActiveBehavior, + accentFillHoverBehavior, + accentFillRestBehavior, + accentForegroundActiveBehavior, + accentForegroundCutRestBehavior, + accentForegroundHoverBehavior, + accentForegroundRestBehavior, + BaseButtonStyles, + HypertextStyles, + LightweightButtonStyles, + neutralFillActiveBehavior, + neutralFillFocusBehavior, + neutralFillHoverBehavior, + neutralFillRestBehavior, + neutralFillStealthActiveBehavior, + neutralFillStealthHoverBehavior, + neutralFillStealthRestBehavior, + neutralFocusBehavior, + neutralFocusInnerAccentBehavior, + neutralForegroundRestBehavior, + neutralOutlineActiveBehavior, + neutralOutlineHoverBehavior, + neutralOutlineRestBehavior, + OutlineButtonStyles, + StealthButtonStyles, +} from "../styles/"; + +export const AnchorStyles = css` + ${BaseButtonStyles} + ${AccentButtonStyles} + ${HypertextStyles} + ${LightweightButtonStyles} + ${OutlineButtonStyles} + ${StealthButtonStyles} +`.withBehaviors( + accentFillActiveBehavior, + accentFillHoverBehavior, + accentFillRestBehavior, + accentForegroundActiveBehavior, + accentForegroundCutRestBehavior, + accentForegroundHoverBehavior, + accentForegroundRestBehavior, + neutralFillActiveBehavior, + neutralFillFocusBehavior, + neutralFillHoverBehavior, + neutralFillRestBehavior, + neutralFillStealthActiveBehavior, + neutralFillStealthHoverBehavior, + neutralFillStealthRestBehavior, + neutralFocusBehavior, + neutralFocusInnerAccentBehavior, + neutralForegroundRestBehavior, + neutralOutlineActiveBehavior, + neutralOutlineHoverBehavior, + neutralOutlineRestBehavior +); diff --git a/packages/web-components/fast-components-msft/src/anchor/fixtures/anchor.html b/packages/web-components/fast-components-msft/src/anchor/fixtures/anchor.html new file mode 100644 index 00000000000..ced49db9629 --- /dev/null +++ b/packages/web-components/fast-components-msft/src/anchor/fixtures/anchor.html @@ -0,0 +1,69 @@ + +

Anchor

+ +

Default

+ Anchor + +
With target
+ Anchor + +

Neutral

+ Button + +

Accent

+ Anchor + +

Hypertext

+ Anchor +
+ Anchor (no href) + +

Lightweight

+ Anchor + +

Outline

+ Anchor + +

Stealth

+ Anchor + +

With start

+ + Anchor + + + + + +

With end

+ + Anchor + + + + + +

Icon in default slot

+ + + + + + \ No newline at end of file diff --git a/packages/web-components/fast-components-msft/src/anchor/index.ts b/packages/web-components/fast-components-msft/src/anchor/index.ts new file mode 100644 index 00000000000..02489bf9df8 --- /dev/null +++ b/packages/web-components/fast-components-msft/src/anchor/index.ts @@ -0,0 +1,14 @@ +import { customElement } from "@microsoft/fast-element"; +import { Anchor, AnchorTemplate as template } from "@microsoft/fast-foundation"; +import { AnchorStyles as styles } from "./anchor.styles"; + +// Anchor +@customElement({ + name: "fast-anchor", + template, + styles, + shadowOptions: { + delegatesFocus: true, + }, +}) +export class FASTAnchor extends Anchor {} diff --git a/packages/web-components/fast-components-msft/src/badge/badge.stories.ts b/packages/web-components/fast-components-msft/src/badge/badge.stories.ts new file mode 100644 index 00000000000..8c09cea2258 --- /dev/null +++ b/packages/web-components/fast-components-msft/src/badge/badge.stories.ts @@ -0,0 +1,13 @@ +import { FASTDesignSystemProvider } from "../design-system-provider"; +import BadgeTemplate from "./fixtures/badge.html"; +import { FASTBadge } from "./"; + +// Prevent tree-shaking +FASTBadge; +FASTDesignSystemProvider; + +export default { + title: "Badge", +}; + +export const Badge = () => BadgeTemplate; diff --git a/packages/web-components/fast-components-msft/src/badge/badge.styles.ts b/packages/web-components/fast-components-msft/src/badge/badge.styles.ts new file mode 100644 index 00000000000..0275095128d --- /dev/null +++ b/packages/web-components/fast-components-msft/src/badge/badge.styles.ts @@ -0,0 +1,49 @@ +import { css } from "@microsoft/fast-element"; +import { display } from "@microsoft/fast-foundation"; +import { + accentFillRestBehavior, + accentForegroundCutRestBehavior, + accentForegroundRestBehavior, + neutralFillInputRestBehavior, + neutralFillToggleRestBehavior, + neutralForegroundRestBehavior, +} from "../styles"; + +export const BadgeStyles = css` + ${display("inline-block")} :host { + box-sizing: border-box; + font-family: var(--body-font); + ${/* Font size, weight, and line height are temporary - + replace when adaptive typography is figured out */ ""} font-size: 12px; + font-weight: 400; + line-height: 18px; + } + + .badge { + border-radius: calc(var(--corner-radius) * 1px); + padding: calc(var(--design-unit) * 0.5px) calc(var(--design-unit) * 1px); + } + + :host(.lightweight) { + --badge-fill-lightweight: transparent; + --badge-color-value: var(--neutral-foreground-rest); + font-weight: 600; + } + + :host(.accent) { + --badge-fill-accent: var(--accent-fill-rest); + --badge-color-value: var(--accent-foreground-cut-rest); + } + + :host(.neutral) { + --badge-fill-neutral: var(--neutral-fill-toggle-rest); + --badge-color-value: var(--neutral-fill-input-rest); + } +`.withBehaviors( + accentFillRestBehavior, + accentForegroundCutRestBehavior, + accentForegroundRestBehavior, + neutralForegroundRestBehavior, + neutralFillInputRestBehavior, + neutralFillToggleRestBehavior +); diff --git a/packages/web-components/fast-components-msft/src/badge/fixtures/badge.html b/packages/web-components/fast-components-msft/src/badge/fixtures/badge.html new file mode 100644 index 00000000000..ddeb9fdc8ae --- /dev/null +++ b/packages/web-components/fast-components-msft/src/badge/fixtures/badge.html @@ -0,0 +1,19 @@ + +

Badge

+

Default

+ + Badge + +

Lightweight

+ + Badge + +

Accent

+ + Badge + +

Neutral

+ + Badge + + \ No newline at end of file diff --git a/packages/web-components/fast-components-msft/src/badge/index.ts b/packages/web-components/fast-components-msft/src/badge/index.ts new file mode 100644 index 00000000000..6e531882511 --- /dev/null +++ b/packages/web-components/fast-components-msft/src/badge/index.ts @@ -0,0 +1,21 @@ +import { attr, customElement } from "@microsoft/fast-element"; +import { Badge, BadgeTemplate as template } from "@microsoft/fast-foundation"; +import { BadgeStyles as styles } from "./badge.styles"; + +export type BadgeFill = "accent" | "lightweight" | "neutral" | "string"; + +@customElement({ + name: "fast-badge", + template, + styles, +}) +export class FASTBadge extends Badge { + @attr + public fill: BadgeFill = "lightweight"; + private fillChanged(oldValue: BadgeFill, newValue: BadgeFill): void { + if (oldValue !== newValue) { + this.classList.add(newValue); + this.classList.remove(oldValue); + } + } +} diff --git a/packages/web-components/fast-components-msft/src/button/button.stories.ts b/packages/web-components/fast-components-msft/src/button/button.stories.ts new file mode 100644 index 00000000000..833e1d0f38c --- /dev/null +++ b/packages/web-components/fast-components-msft/src/button/button.stories.ts @@ -0,0 +1,13 @@ +import { FASTDesignSystemProvider } from "../design-system-provider"; +import ButtonTemplate from "./fixtures/button.html"; +import { FASTButton } from "./"; + +// Prevent tree-shaking +FASTButton; +FASTDesignSystemProvider; + +export default { + title: "Button", +}; + +export const Button = () => ButtonTemplate; diff --git a/packages/web-components/fast-components-msft/src/button/button.styles.ts b/packages/web-components/fast-components-msft/src/button/button.styles.ts new file mode 100644 index 00000000000..d90ea45cbb8 --- /dev/null +++ b/packages/web-components/fast-components-msft/src/button/button.styles.ts @@ -0,0 +1,139 @@ +import { css } from "@microsoft/fast-element"; +import { SystemColors } from "@microsoft/fast-web-utilities"; +import { + disabledCursor, + focusVisible, + forcedColorsStylesheetBehavior, +} from "@microsoft/fast-foundation"; +import { + AccentButtonStyles, + accentFillActiveBehavior, + accentFillHoverBehavior, + accentFillRestBehavior, + accentForegroundActiveBehavior, + accentForegroundCutRestBehavior, + accentForegroundHoverBehavior, + accentForegroundRestBehavior, + BaseButtonStyles, + HypertextStyles, + LightweightButtonStyles, + neutralFillActiveBehavior, + neutralFillFocusBehavior, + neutralFillHoverBehavior, + neutralFillRestBehavior, + neutralFillStealthActiveBehavior, + neutralFillStealthHoverBehavior, + neutralFillStealthRestBehavior, + neutralFocusBehavior, + neutralFocusInnerAccentBehavior, + neutralForegroundRestBehavior, + neutralOutlineActiveBehavior, + neutralOutlineHoverBehavior, + neutralOutlineRestBehavior, + OutlineButtonStyles, + StealthButtonStyles, +} from "../styles/"; + +export const ButtonStyles = css` + ${BaseButtonStyles} + ${AccentButtonStyles} + ${HypertextStyles} + ${LightweightButtonStyles} + ${OutlineButtonStyles} + ${StealthButtonStyles} +`.withBehaviors( + accentFillActiveBehavior, + accentFillHoverBehavior, + accentFillRestBehavior, + accentForegroundActiveBehavior, + accentForegroundCutRestBehavior, + accentForegroundHoverBehavior, + accentForegroundRestBehavior, + neutralFillActiveBehavior, + neutralFillFocusBehavior, + neutralFillHoverBehavior, + neutralFillRestBehavior, + neutralFillStealthActiveBehavior, + neutralFillStealthHoverBehavior, + neutralFillStealthRestBehavior, + neutralFocusBehavior, + neutralFocusInnerAccentBehavior, + neutralForegroundRestBehavior, + neutralOutlineActiveBehavior, + neutralOutlineHoverBehavior, + neutralOutlineRestBehavior, + forcedColorsStylesheetBehavior( + css` + :host(.disabled), + :host(.disabled) .control { + forced-color-adjust: none; + background: ${SystemColors.ButtonFace}; + border-color: ${SystemColors.GrayText}; + color: ${SystemColors.GrayText}; + cursor: ${disabledCursor}; + opacity: 1; + } + :host(.accent) .control { + forced-color-adjust: none; + background: ${SystemColors.Highlight}; + color: ${SystemColors.HighlightText}; + } + + :host(.accent) .control:hover { + background: ${SystemColors.HighlightText}; + border-color: ${SystemColors.Highlight}; + color: ${SystemColors.Highlight}; + } + + :host(.accent:${focusVisible}) .control { + border-color: ${SystemColors.ButtonText}; + box-shadow: 0 0 0 2px ${SystemColors.HighlightText} inset; + } + + :host(.accent.disabled) .control, + :host(.accent.disabled) .control:hover { + background: ${SystemColors.ButtonFace}; + border-color: ${SystemColors.GrayText}; + color: ${SystemColors.GrayText}; + } + :host(.lightweight) .control:hover { + forced-color-adjust: none; + color: ${SystemColors.Highlight}; + } + + :host(.lightweight) .control:hover .content::before { + background: ${SystemColors.Highlight}; + } + + :host(.lightweight.disabled) .control { + forced-color-adjust: none; + color: ${SystemColors.GrayText}; + } + + :host(.lightweight.disabled) .control:hover .content::before { + background: none; + } + :host(.outline.disabled) .control { + border-color: ${SystemColors.GrayText}; + } + :host(.stealth) .control { + forced-color-adjust: none; + background: none; + border-color: transparent; + color: ${SystemColors.ButtonText}; + fill: currentColor; + } + :host(.stealth) .control:hover, + :host(.stealth:${focusVisible}) .control { + background: ${SystemColors.Highlight}; + border-color: ${SystemColors.Highlight}; + color: ${SystemColors.HighlightText}; + } + :host(.stealth.disabled) .control { + background: none; + border-color: transparent; + color: ${SystemColors.GrayText}; + } + ` + ) +); diff --git a/packages/web-components/fast-components-msft/src/button/fixtures/button.html b/packages/web-components/fast-components-msft/src/button/fixtures/button.html new file mode 100644 index 00000000000..7fac31b19c1 --- /dev/null +++ b/packages/web-components/fast-components-msft/src/button/fixtures/button.html @@ -0,0 +1,75 @@ + +

Button

+ +

Default

+ Button +
disabled
+ Button +
autofocus
+ Button + +

Neutral

+ Button +
disabled
+ Button + +

Accent

+ Button +
disabled
+ Button + +

Lightweight

+ Button +
disabled
+ Button + +

Outline

+ Button +
disabled
+ Button + +

Stealth

+ Button +
disabled
+ Button + +

With start

+ + Button + + + + + +

With end

+ + Button + + + + + +

Icon in default slot

+ + + + + + \ No newline at end of file diff --git a/packages/web-components/fast-components-msft/src/button/index.ts b/packages/web-components/fast-components-msft/src/button/index.ts new file mode 100644 index 00000000000..b91d7961425 --- /dev/null +++ b/packages/web-components/fast-components-msft/src/button/index.ts @@ -0,0 +1,14 @@ +import { customElement } from "@microsoft/fast-element"; +import { Button, ButtonTemplate as template } from "@microsoft/fast-foundation"; +import { ButtonStyles as styles } from "./button.styles"; + +// Button +@customElement({ + name: "fast-button", + template, + styles, + shadowOptions: { + delegatesFocus: true, + }, +}) +export class FASTButton extends Button {} diff --git a/packages/web-components/fast-components-msft/src/card/card.stories.ts b/packages/web-components/fast-components-msft/src/card/card.stories.ts new file mode 100644 index 00000000000..84da10df565 --- /dev/null +++ b/packages/web-components/fast-components-msft/src/card/card.stories.ts @@ -0,0 +1,13 @@ +import { FASTDesignSystemProvider } from "../design-system-provider"; +import CardTemplate from "./fixtures/card.html"; +import { FASTCard } from "./"; + +// Prevent tree-shaking +FASTCard; +FASTDesignSystemProvider; + +export default { + title: "Card", +}; + +export const Card = () => CardTemplate; diff --git a/packages/web-components/fast-components-msft/src/card/card.styles.ts b/packages/web-components/fast-components-msft/src/card/card.styles.ts new file mode 100644 index 00000000000..496474b4c66 --- /dev/null +++ b/packages/web-components/fast-components-msft/src/card/card.styles.ts @@ -0,0 +1,30 @@ +import { css } from "@microsoft/fast-element"; +import { display } from "@microsoft/fast-foundation"; +import { SystemColors } from "@microsoft/fast-web-utilities"; +import { forcedColorsStylesheetBehavior } from "@microsoft/fast-foundation"; +import { elevation, neutralLayerCardBehavior } from "../styles"; + +export const CardStyles = css` + ${display("block")} :host { + --elevation: 4; + display: block; + contain: content; + height: var(--card-height, 100%); + width: var(--card-width, 100%); + box-sizing: border-box; + background: var(--neutral-layer-card); + border-radius: calc(var(--elevated-corner-radius) * 1px); + ${elevation}; + } +`.withBehaviors( + neutralLayerCardBehavior, + forcedColorsStylesheetBehavior( + css` + :host { + forced-color-adjust: none; + border: calc(var(--outline-width) * 1px) solid ${SystemColors.CanvasText}; + background: ${SystemColors.Canvas}; + } + ` + ) +); diff --git a/packages/web-components/fast-components-msft/src/card/fixtures/card.html b/packages/web-components/fast-components-msft/src/card/fixtures/card.html new file mode 100644 index 00000000000..04b6acd843e --- /dev/null +++ b/packages/web-components/fast-components-msft/src/card/fixtures/card.html @@ -0,0 +1,19 @@ + + +
+ Card with text +
+ Custom depth with class-based height/width +
+ Custom depth on hover using CSS +
+ \ No newline at end of file diff --git a/packages/web-components/fast-components-msft/src/card/index.ts b/packages/web-components/fast-components-msft/src/card/index.ts new file mode 100644 index 00000000000..4bba1416411 --- /dev/null +++ b/packages/web-components/fast-components-msft/src/card/index.ts @@ -0,0 +1,10 @@ +import { customElement } from "@microsoft/fast-element"; +import { Card, CardTemplate as template } from "@microsoft/fast-foundation"; +import { CardStyles as styles } from "./card.styles"; + +@customElement({ + name: "fast-card", + template, + styles, +}) +export class FASTCard extends Card {} diff --git a/packages/web-components/fast-components-msft/src/checkbox/checkbox.stories.ts b/packages/web-components/fast-components-msft/src/checkbox/checkbox.stories.ts new file mode 100644 index 00000000000..3c2d548eb67 --- /dev/null +++ b/packages/web-components/fast-components-msft/src/checkbox/checkbox.stories.ts @@ -0,0 +1,35 @@ +import { STORY_RENDERED } from "@storybook/core-events"; +import addons from "@storybook/addons"; +import { FASTDesignSystemProvider } from "../design-system-provider"; +import Examples from "./fixtures/checkbox.html"; +import { FASTCheckbox } from "./"; + +// Prevent tree-shaking +FASTCheckbox; +FASTDesignSystemProvider; + +addons.getChannel().addListener(STORY_RENDERED, (name: string) => { + if (name.toLowerCase().startsWith("checkbox")) { + setIndeterminate(); + } +}); + +function setIndeterminate(): void { + document.querySelectorAll(".flag-indeterminate").forEach(el => { + if (el instanceof FASTCheckbox) { + el.indeterminate = true; + } + }); +} + +document.addEventListener("readystatechange", () => { + if (document.readyState === "complete") { + setIndeterminate(); + } +}); + +export default { + title: "Checkbox", +}; + +export const Checkbox = () => Examples; diff --git a/packages/web-components/fast-components-msft/src/checkbox/checkbox.styles.ts b/packages/web-components/fast-components-msft/src/checkbox/checkbox.styles.ts new file mode 100644 index 00000000000..72235529505 --- /dev/null +++ b/packages/web-components/fast-components-msft/src/checkbox/checkbox.styles.ts @@ -0,0 +1,166 @@ +import { css } from "@microsoft/fast-element"; +import { + disabledCursor, + display, + focusVisible, + forcedColorsStylesheetBehavior, +} from "@microsoft/fast-foundation"; +import { SystemColors } from "@microsoft/fast-web-utilities"; +import { + heightNumber, + neutralFillInputHoverBehavior, + neutralFillInputRestBehavior, + neutralForegroundRestBehavior, + neutralOutlineHoverBehavior, + neutralOutlineRestBehavior, +} from "../styles"; + +export const CheckboxStyles = css` + ${display("inline-flex")} :host { + align-items: center; + outline: none; + margin: calc(var(--design-unit) * 1px) 0; + ${ + /* + * Chromium likes to select label text or the default slot when + * the checkbox is clicked. Maybe there is a better solution here? + */ "" + } user-select: none; + } + + .control { + position: relative; + width: calc((${heightNumber} / 2 + var(--design-unit)) * 1px); + height: calc((${heightNumber} / 2 + var(--design-unit)) * 1px); + box-sizing: border-box; + border-radius: calc(var(--corner-radius) * 1px); + border: calc(var(--outline-width) * 1px) solid var(--neutral-outline-rest); + background: var(--neutral-fill-input-rest); + outline: none; + cursor: pointer; + } + + .label { + font-family: var(--body-font); + color: var(--neutral-foreground-rest); + ${ + /* Need to discuss with Brian how HorizontalSpacingNumber can work. https://github.com/microsoft/fast-dna/issues/2766 */ "" + } padding-inline-start: calc(var(--design-unit) * 2px + 2px); + margin-inline-end: calc(var(--design-unit) * 2px + 2px); + cursor: pointer; + ${ + /* Font size is temporary - replace when adaptive typography is figured out */ "" + } font-size: calc(1rem + (var(--density) * 2px)); + } + + .checked-indicator { + width: 100%; + height: 100%; + display: block; + fill: var(--neutral-foreground-rest); + opacity: 0; + pointer-events: none; + } + + .indeterminate-indicator { + border-radius: calc(var(--corner-radius) * 1px); + background: var(--neutral-foreground-rest); + position: absolute; + top: 25%; + right: 25%; + bottom: 25%; + left: 25%; + opacity: 0; + } + + .control:hover { + background: var(--neutral-fill-input-hover); + border-color: var(--neutral-outline-hover); + } + + :host(:${focusVisible}) .control { + box-shadow: 0 0 0 1px var(--neutral-focus) inset; + border-color: var(--neutral-focus); + } + + :host(.disabled) .label, + :host(.readonly) .label, + :host(.readonly) .control, + :host(.disabled) .control { + cursor: ${disabledCursor}; + } + + :host(.checked:not(.indeterminate)) .checked-indicator, + :host(.indeterminate) .indeterminate-indicator { + opacity: 1; + } + + :host(.disabled) { + opacity: var(--disabled-opacity); + } +`.withBehaviors( + neutralFillInputHoverBehavior, + neutralFillInputRestBehavior, + neutralForegroundRestBehavior, + neutralOutlineHoverBehavior, + neutralOutlineRestBehavior, + forcedColorsStylesheetBehavior( + css` + .control, .control:hover, .control:active { + forced-color-adjust: none; + border-color: ${SystemColors.FieldText}; + background: ${SystemColors.Field}; + } + .checked-indicator { + fill: ${SystemColors.FieldText}; + } + .indeterminate-indicator { + background: ${SystemColors.FieldText}; + } + :host(:${focusVisible}) .control { + border-color: ${SystemColors.Highlight}; + } + :host(.checked:${focusVisible}) .control { + border-color: ${SystemColors.FieldText}; + box-shadow: 0 0 0 2px ${SystemColors.Field} inset; + } + :host(.checked) .control { + background: ${SystemColors.Highlight}; + border-color: ${SystemColors.Highlight}; + } + :host(.checked) .control:hover, .control:active { + background: ${SystemColors.HighlightText}; + } + :host(.checked) .checked-indicator { + fill: ${SystemColors.HighlightText}; + } + :host(.checked) .control:hover .checked-indicator { + fill: ${SystemColors.Highlight} + } + :host(.checked) .indeterminate-indicator { + background: ${SystemColors.HighlightText}; + } + :host(.checked) .control:hover .indeterminate-indicator { + background: ${SystemColors.Highlight} + } + :host(.disabled) { + opacity: 1; + } + :host(.disabled) .control { + forced-color-adjust: none; + border-color: ${SystemColors.GrayText}; + background: ${SystemColors.Field}; + } + :host(.disabled) .indeterminate-indicator, + :host(.checked.disabled) .control:hover .indeterminate-indicator { + forced-color-adjust: none; + background: ${SystemColors.GrayText}; + } + :host(.disabled) .checked-indicator, + :host(.checked.disabled) .control:hover .checked-indicator { + forced-color-adjust: none; + fill: ${SystemColors.GrayText}; + } + ` + ) +); diff --git a/packages/web-components/fast-components-msft/src/checkbox/fixtures/checkbox.html b/packages/web-components/fast-components-msft/src/checkbox/fixtures/checkbox.html new file mode 100644 index 00000000000..25913b9f4f0 --- /dev/null +++ b/packages/web-components/fast-components-msft/src/checkbox/fixtures/checkbox.html @@ -0,0 +1,47 @@ + +

Checkbox

+

Default

+ + label + +

Checked

+ + + +

Required

+ + +

Indeterminate

+ Unchecked + Checked + + +

Disabled

+ + label + checked + Indeterminate checked + Indeterminate unchecked + +

Inline

+ Apples + Bananas + Honeydew + Oranges + +

Vertical

+
+ Fruit + Apples + Bananas + Honeydew + Oranges +
+ + +

Visual vs audio label

+ + Visible label + + + \ No newline at end of file diff --git a/packages/web-components/fast-components-msft/src/checkbox/index.ts b/packages/web-components/fast-components-msft/src/checkbox/index.ts new file mode 100644 index 00000000000..3213c2c745e --- /dev/null +++ b/packages/web-components/fast-components-msft/src/checkbox/index.ts @@ -0,0 +1,10 @@ +import { customElement } from "@microsoft/fast-element"; +import { Checkbox, CheckboxTemplate as template } from "@microsoft/fast-foundation"; +import { CheckboxStyles as styles } from "./checkbox.styles"; + +@customElement({ + name: "fast-checkbox", + template, + styles, +}) +export class FASTCheckbox extends Checkbox {} diff --git a/packages/web-components/fast-components-msft/src/design-system-provider/design-system-provider.styles.ts b/packages/web-components/fast-components-msft/src/design-system-provider/design-system-provider.styles.ts new file mode 100644 index 00000000000..7cc58fbc540 --- /dev/null +++ b/packages/web-components/fast-components-msft/src/design-system-provider/design-system-provider.styles.ts @@ -0,0 +1,6 @@ +import { css } from "@microsoft/fast-element"; +import { display } from "@microsoft/fast-foundation"; + +export const DesignSystemProviderStyles = css` + ${display("block")}; +`; diff --git a/packages/web-components/fast-components-msft/src/design-system-provider/index.ts b/packages/web-components/fast-components-msft/src/design-system-provider/index.ts new file mode 100644 index 00000000000..9e4300eb7e8 --- /dev/null +++ b/packages/web-components/fast-components-msft/src/design-system-provider/index.ts @@ -0,0 +1,525 @@ +import { nullableNumberConverter } from "@microsoft/fast-element"; +import { + DensityOffset, + DesignSystem, + DesignSystemDefaults, +} from "@microsoft/fast-components-styles-msft"; +import { + designSystemProperty, + designSystemProvider, + DesignSystemProvider, + DesignSystemProviderTemplate as template, +} from "@microsoft/fast-foundation"; +import { DesignSystemProviderStyles as styles } from "./design-system-provider.styles"; + +@designSystemProvider({ + name: "fast-design-system-provider", + template, + styles, +}) +export class FASTDesignSystemProvider extends DesignSystemProvider + implements + Omit< + DesignSystem, + | "contrast" + | "direction" + | "fontWeight" + | "neutralForegroundDarkIndex" + | "neutralForegroundLightIndex" + > { + /** + * Define design system property attributes + */ + @designSystemProperty({ + attribute: "background-color", + default: DesignSystemDefaults.backgroundColor, + }) + public backgroundColor: string; + + @designSystemProperty({ + attribute: "accent-base-color", + cssCustomProperty: false, + default: DesignSystemDefaults.accentBaseColor, + }) + public accentBaseColor: string; + + @designSystemProperty({ + attribute: false, + cssCustomProperty: false, + default: DesignSystemDefaults.neutralPalette, + }) + public neutralPalette: string[]; + + @designSystemProperty({ + attribute: false, + cssCustomProperty: false, + default: DesignSystemDefaults.accentPalette, + }) + public accentPalette: string[]; + + @designSystemProperty({ + default: DesignSystemDefaults.density, + converter: nullableNumberConverter, + }) + public density: DensityOffset; + + @designSystemProperty({ + attribute: "design-unit", + converter: nullableNumberConverter, + default: DesignSystemDefaults.designUnit, + }) + public designUnit: number; + + @designSystemProperty({ + attribute: "base-height-multiplier", + default: DesignSystemDefaults.baseHeightMultiplier, + converter: nullableNumberConverter, + }) + public baseHeightMultiplier: number; + + @designSystemProperty({ + attribute: "base-horizontal-spacing-multiplier", + converter: nullableNumberConverter, + default: DesignSystemDefaults.baseHorizontalSpacingMultiplier, + }) + public baseHorizontalSpacingMultiplier: number; + + @designSystemProperty({ + attribute: "corner-radius", + converter: nullableNumberConverter, + default: DesignSystemDefaults.cornerRadius, + }) + public cornerRadius: number; + + @designSystemProperty({ + attribute: "elevated-corner-radius", + converter: nullableNumberConverter, + default: DesignSystemDefaults.elevatedCornerRadius, + }) + public elevatedCornerRadius: number; + + @designSystemProperty({ + attribute: "outline-width", + converter: nullableNumberConverter, + default: DesignSystemDefaults.outlineWidth, + }) + public outlineWidth: number; + + @designSystemProperty({ + attribute: "focus-outline-width", + converter: nullableNumberConverter, + default: DesignSystemDefaults.focusOutlineWidth, + }) + public focusOutlineWidth: number; + + @designSystemProperty({ + attribute: "disabled-opacity", + converter: nullableNumberConverter, + default: DesignSystemDefaults.disabledOpacity, + }) + public disabledOpacity: number; + + @designSystemProperty({ + attribute: "type-ramp-minus-2-font-size", + default: "10px", + }) + public typeRampMinus2FontSize: string; + + @designSystemProperty({ + attribute: "type-ramp-minus-2-line-height", + default: "16px", + }) + public typeRampMinus2LineHeight: string; + + @designSystemProperty({ + attribute: "type-ramp-minus-1-font-size", + default: "12px", + }) + public typeRampMinus1FontSize: string; + + @designSystemProperty({ + attribute: "type-ramp-minus-1-line-height", + default: "16px", + }) + public typeRampMinus1LineHeight: string; + + @designSystemProperty({ + attribute: "type-ramp-base-font-size", + default: "14px", + }) + public typeRampBaseFontSize: string; + + @designSystemProperty({ + attribute: "type-ramp-base-line-height", + default: "20px", + }) + public typeRampBaseLineHeight: string; + + @designSystemProperty({ + attribute: "type-ramp-plus-1-font-size", + default: "16px", + }) + public typeRampPlus1FontSize: string; + + @designSystemProperty({ + attribute: "type-ramp-plus-1-line-height", + default: "24px", + }) + public typeRampPlus1LineHeight: string; + + @designSystemProperty({ + attribute: "type-ramp-plus-2-font-size", + default: "20px", + }) + public typeRampPlus2FontSize: string; + + @designSystemProperty({ + attribute: "type-ramp-plus-2-line-height", + default: "28px", + }) + public typeRampPlus2LineHeight: string; + + @designSystemProperty({ + attribute: "type-ramp-plus-3-font-size", + default: "28px", + }) + public typeRampPlus3FontSize: string; + + @designSystemProperty({ + attribute: "type-ramp-plus-3-line-height", + default: "36px", + }) + public typeRampPlus3LineHeight: string; + + @designSystemProperty({ + attribute: "type-ramp-plus-4-font-size", + default: "34px", + }) + public typeRampPlus4FontSize: string; + + @designSystemProperty({ + attribute: "type-ramp-plus-4-line-height", + default: "44px", + }) + public typeRampPlus4LineHeight: string; + + @designSystemProperty({ + attribute: "type-ramp-plus-5-font-size", + default: "46px", + }) + public typeRampPlus5FontSize: string; + + @designSystemProperty({ + attribute: "type-ramp-plus-5-line-height", + default: "56px", + }) + public typeRampPlus5LineHeight: string; + + @designSystemProperty({ + attribute: "type-ramp-plus-6-font-size", + default: "60px", + }) + public typeRampPlus6FontSize: string; + + @designSystemProperty({ + attribute: "type-ramp-plus-6-line-height", + default: "72px", + }) + public typeRampPlus6LineHeight: string; + + @designSystemProperty({ + attribute: "accent-fill-rest-delta", + converter: nullableNumberConverter, + cssCustomProperty: false, + default: DesignSystemDefaults.accentFillRestDelta, + }) + public accentFillRestDelta: number; + + @designSystemProperty({ + attribute: "accent-fill-hover-delta", + converter: nullableNumberConverter, + cssCustomProperty: false, + default: DesignSystemDefaults.accentFillHoverDelta, + }) + public accentFillHoverDelta: number; + + @designSystemProperty({ + attribute: "accent-fill-active-delta", + cssCustomProperty: false, + converter: nullableNumberConverter, + default: DesignSystemDefaults.accentFillActiveDelta, + }) + public accentFillActiveDelta: number; + + @designSystemProperty({ + attribute: "accent-fill-focus-delta", + converter: nullableNumberConverter, + cssCustomProperty: false, + default: DesignSystemDefaults.accentFillFocusDelta, + }) + public accentFillFocusDelta: number; + + @designSystemProperty({ + attribute: "accent-fill-selected-delta", + converter: nullableNumberConverter, + cssCustomProperty: false, + default: DesignSystemDefaults.accentFillSelectedDelta, + }) + public accentFillSelectedDelta: number; + + @designSystemProperty({ + attribute: "accent-foreground-rest-delta", + converter: nullableNumberConverter, + cssCustomProperty: false, + default: DesignSystemDefaults.accentForegroundRestDelta, + }) + public accentForegroundRestDelta: number; + + @designSystemProperty({ + attribute: "accent-foreground-hover-delta", + converter: nullableNumberConverter, + cssCustomProperty: false, + default: DesignSystemDefaults.accentForegroundHoverDelta, + }) + public accentForegroundHoverDelta: number; + + @designSystemProperty({ + attribute: "accent-foreground-active-delta", + converter: nullableNumberConverter, + cssCustomProperty: false, + default: DesignSystemDefaults.accentForegroundActiveDelta, + }) + public accentForegroundActiveDelta: number; + + @designSystemProperty({ + attribute: "accent-foreground-focus-delta", + converter: nullableNumberConverter, + cssCustomProperty: false, + default: DesignSystemDefaults.accentForegroundFocusDelta, + }) + public accentForegroundFocusDelta: number; + + @designSystemProperty({ + attribute: "neutral-fill-rest-delta", + converter: nullableNumberConverter, + cssCustomProperty: false, + default: DesignSystemDefaults.neutralFillRestDelta, + }) + public neutralFillRestDelta: number; + + @designSystemProperty({ + attribute: "neutral-fill-hover-delta", + converter: nullableNumberConverter, + cssCustomProperty: false, + default: DesignSystemDefaults.neutralFillHoverDelta, + }) + public neutralFillHoverDelta: number; + + @designSystemProperty({ + attribute: "neutral-fill-active-delta", + converter: nullableNumberConverter, + cssCustomProperty: false, + default: DesignSystemDefaults.neutralFillActiveDelta, + }) + public neutralFillActiveDelta: number; + + @designSystemProperty({ + attribute: "neutral-fill-focus-delta", + converter: nullableNumberConverter, + cssCustomProperty: false, + default: DesignSystemDefaults.neutralFillFocusDelta, + }) + public neutralFillFocusDelta: number; + + @designSystemProperty({ + attribute: "neutral-fill-selected-delta", + converter: nullableNumberConverter, + cssCustomProperty: false, + default: DesignSystemDefaults.neutralFillSelectedDelta, + }) + public neutralFillSelectedDelta: number; + + @designSystemProperty({ + attribute: "neutral-fill-input-rest-delta", + converter: nullableNumberConverter, + cssCustomProperty: false, + default: DesignSystemDefaults.neutralFillInputRestDelta, + }) + public neutralFillInputRestDelta: number; + + @designSystemProperty({ + attribute: "neutral-fill-input-hover-delta", + converter: nullableNumberConverter, + cssCustomProperty: false, + default: DesignSystemDefaults.neutralFillInputHoverDelta, + }) + public neutralFillInputHoverDelta: number; + + @designSystemProperty({ + attribute: "neutral-fill-input-active-delta", + converter: nullableNumberConverter, + cssCustomProperty: false, + default: DesignSystemDefaults.neutralFillInputActiveDelta, + }) + public neutralFillInputActiveDelta: number; + + @designSystemProperty({ + attribute: "neutral-fill-input-focus-delta", + converter: nullableNumberConverter, + cssCustomProperty: false, + default: DesignSystemDefaults.neutralFillInputFocusDelta, + }) + public neutralFillInputFocusDelta: number; + + @designSystemProperty({ + attribute: "neutral-fill-input-selected-delta", + converter: nullableNumberConverter, + cssCustomProperty: false, + default: DesignSystemDefaults.neutralFillInputSelectedDelta, + }) + public neutralFillInputSelectedDelta: number; + + @designSystemProperty({ + attribute: "neutral-fill-stealth-rest-delta", + converter: nullableNumberConverter, + cssCustomProperty: false, + default: DesignSystemDefaults.neutralFillStealthRestDelta, + }) + public neutralFillStealthRestDelta: number; + + @designSystemProperty({ + attribute: "neutral-fill-stealth-hover-delta", + converter: nullableNumberConverter, + cssCustomProperty: false, + default: DesignSystemDefaults.neutralFillStealthHoverDelta, + }) + public neutralFillStealthHoverDelta: number; + + @designSystemProperty({ + attribute: "neutral-fill-stealth-active-delta", + converter: nullableNumberConverter, + cssCustomProperty: false, + default: DesignSystemDefaults.neutralFillStealthActiveDelta, + }) + public neutralFillStealthActiveDelta: number; + + @designSystemProperty({ + attribute: "neutral-fill-stealth-focus-delta", + converter: nullableNumberConverter, + cssCustomProperty: false, + default: DesignSystemDefaults.neutralFillStealthFocusDelta, + }) + public neutralFillStealthFocusDelta: number; + + @designSystemProperty({ + attribute: "neutral-fill-stealth-selected-delta", + converter: nullableNumberConverter, + cssCustomProperty: false, + default: DesignSystemDefaults.neutralFillStealthSelectedDelta, + }) + public neutralFillStealthSelectedDelta: number; + + @designSystemProperty({ + attribute: "neutral-fill-toggle-hover-delta", + converter: nullableNumberConverter, + cssCustomProperty: false, + default: DesignSystemDefaults.neutralFillToggleHoverDelta, + }) + public neutralFillToggleHoverDelta: number; + + @designSystemProperty({ + attribute: "neutral-fill-toggle-hover-active", + converter: nullableNumberConverter, + cssCustomProperty: false, + default: DesignSystemDefaults.neutralFillToggleActiveDelta, + }) + public neutralFillToggleActiveDelta: number; + + @designSystemProperty({ + attribute: "neutral-fill-toggle-hover-focus", + converter: nullableNumberConverter, + cssCustomProperty: false, + default: DesignSystemDefaults.neutralFillToggleFocusDelta, + }) + public neutralFillToggleFocusDelta: number; + + @designSystemProperty({ + attribute: "base-layer-luminance", + converter: nullableNumberConverter, + cssCustomProperty: false, + default: DesignSystemDefaults.baseLayerLuminance, + }) + public baseLayerLuminance: number; // 0...1 + + @designSystemProperty({ + attribute: "neutral-fill-card-delta", + converter: nullableNumberConverter, + cssCustomProperty: false, + default: DesignSystemDefaults.neutralFillCardDelta, + }) + public neutralFillCardDelta: number; + + @designSystemProperty({ + attribute: "neutral-foreground-hover-delta", + converter: nullableNumberConverter, + cssCustomProperty: false, + default: DesignSystemDefaults.neutralForegroundHoverDelta, + }) + public neutralForegroundHoverDelta: number; + + @designSystemProperty({ + attribute: "neutral-foreground-active-delta", + converter: nullableNumberConverter, + cssCustomProperty: false, + default: DesignSystemDefaults.neutralForegroundActiveDelta, + }) + public neutralForegroundActiveDelta: number; + + @designSystemProperty({ + attribute: "neutral-foreground-focus-delta", + converter: nullableNumberConverter, + cssCustomProperty: false, + default: DesignSystemDefaults.neutralForegroundFocusDelta, + }) + public neutralForegroundFocusDelta: number; + + @designSystemProperty({ + attribute: "neutral-divider-rest-delta", + converter: nullableNumberConverter, + cssCustomProperty: false, + default: DesignSystemDefaults.neutralDividerRestDelta, + }) + public neutralDividerRestDelta: number; + + @designSystemProperty({ + attribute: "neutral-outline-rest-delta", + converter: nullableNumberConverter, + cssCustomProperty: false, + default: DesignSystemDefaults.neutralOutlineRestDelta, + }) + public neutralOutlineRestDelta: number; + + @designSystemProperty({ + attribute: "neutral-outline-hover-delta", + converter: nullableNumberConverter, + cssCustomProperty: false, + default: DesignSystemDefaults.neutralOutlineHoverDelta, + }) + public neutralOutlineHoverDelta: number; + + @designSystemProperty({ + attribute: "neutral-outline-active-delta", + converter: nullableNumberConverter, + cssCustomProperty: false, + default: DesignSystemDefaults.neutralOutlineActiveDelta, + }) + public neutralOutlineActiveDelta: number; + + @designSystemProperty({ + attribute: "neutral-outline-focus-delta", + converter: nullableNumberConverter, + cssCustomProperty: false, + default: DesignSystemDefaults.neutralOutlineFocusDelta, + }) + public neutralOutlineFocusDelta: number; +} diff --git a/packages/web-components/fast-components-msft/src/dialog/dialog.stories.ts b/packages/web-components/fast-components-msft/src/dialog/dialog.stories.ts new file mode 100644 index 00000000000..2bf27aa0938 --- /dev/null +++ b/packages/web-components/fast-components-msft/src/dialog/dialog.stories.ts @@ -0,0 +1,13 @@ +import { FASTDesignSystemProvider } from "../design-system-provider"; +import DialogTemplate from "./fixtures/dialog.html"; +import { FASTDialog } from "./"; + +// Prevent tree-shaking +FASTDialog; +FASTDesignSystemProvider; + +export default { + title: "Dialog", +}; + +export const Dialog = () => DialogTemplate; diff --git a/packages/web-components/fast-components-msft/src/dialog/dialog.styles.ts b/packages/web-components/fast-components-msft/src/dialog/dialog.styles.ts new file mode 100644 index 00000000000..177c7e7f21a --- /dev/null +++ b/packages/web-components/fast-components-msft/src/dialog/dialog.styles.ts @@ -0,0 +1,46 @@ +import { css } from "@microsoft/fast-element"; +import { elevation } from "../styles"; + +export const DialogStyles = css` + :host([hidden]) { + display: none; + } + + :host { + --elevation: 14; + --dialog-height: 480px; + --dialog-width: 640px; + display: block; + } + + .overlay { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.3); + touch-action: none; + } + + .positioning-region { + display: flex; + justify-content: center; + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + overflow: auto; + } + + .root { + ${elevation} margin-top: auto; + margin-bottom: auto; + border-radius: calc(var(--elevated-corner-radius)); + width: var(--dialog-width); + height: var(--dialog-height); + background: var(--background-color); + z-index: 1; + } +`; diff --git a/packages/web-components/fast-components-msft/src/dialog/fixtures/dialog.html b/packages/web-components/fast-components-msft/src/dialog/fixtures/dialog.html new file mode 100644 index 00000000000..d76073d29db --- /dev/null +++ b/packages/web-components/fast-components-msft/src/dialog/fixtures/dialog.html @@ -0,0 +1,12 @@ + + + + +

Dialog with text and button. The button should recieve focus

+ + + + \ No newline at end of file diff --git a/packages/web-components/fast-components-msft/src/dialog/index.ts b/packages/web-components/fast-components-msft/src/dialog/index.ts new file mode 100644 index 00000000000..3c5471ce387 --- /dev/null +++ b/packages/web-components/fast-components-msft/src/dialog/index.ts @@ -0,0 +1,10 @@ +import { customElement } from "@microsoft/fast-element"; +import { Dialog, DialogTemplate as template } from "@microsoft/fast-foundation"; +import { DialogStyles as styles } from "./dialog.styles"; + +@customElement({ + name: "fast-dialog", + template, + styles, +}) +export class FASTDialog extends Dialog {} diff --git a/packages/web-components/fast-components-msft/src/divider/divider.stories.ts b/packages/web-components/fast-components-msft/src/divider/divider.stories.ts new file mode 100644 index 00000000000..30622c83264 --- /dev/null +++ b/packages/web-components/fast-components-msft/src/divider/divider.stories.ts @@ -0,0 +1,13 @@ +import { FASTDesignSystemProvider } from "../design-system-provider"; +import DividerTemplate from "./fixtures/divider.html"; +import { FASTDivider } from "./"; + +// Prevent tree-shaking +FASTDivider; +FASTDesignSystemProvider; + +export default { + title: "Divider", +}; + +export const Divider = () => DividerTemplate; diff --git a/packages/web-components/fast-components-msft/src/divider/divider.styles.ts b/packages/web-components/fast-components-msft/src/divider/divider.styles.ts new file mode 100644 index 00000000000..17948e1d11e --- /dev/null +++ b/packages/web-components/fast-components-msft/src/divider/divider.styles.ts @@ -0,0 +1,13 @@ +import { css } from "@microsoft/fast-element"; +import { display } from "@microsoft/fast-foundation"; +import { neutralDividerRestBehavior } from "../styles"; + +export const DividerStyles = css` + ${display("block")} :host { + box-sizing: content-box; + height: 0; + margin: calc(var(--design-unit) * 1px) 0; + border: none; + border-top: calc(var(--outline-width) * 1px) solid var(--neutral-divider-rest); + } +`.withBehaviors(neutralDividerRestBehavior); diff --git a/packages/web-components/fast-components-msft/src/divider/fixtures/divider.html b/packages/web-components/fast-components-msft/src/divider/fixtures/divider.html new file mode 100644 index 00000000000..c746f7d7782 --- /dev/null +++ b/packages/web-components/fast-components-msft/src/divider/fixtures/divider.html @@ -0,0 +1,8 @@ + +

Divider

+

Default

+ + +

Presentation

+ + \ No newline at end of file diff --git a/packages/web-components/fast-components-msft/src/divider/index.ts b/packages/web-components/fast-components-msft/src/divider/index.ts new file mode 100644 index 00000000000..d805262a9c3 --- /dev/null +++ b/packages/web-components/fast-components-msft/src/divider/index.ts @@ -0,0 +1,10 @@ +import { customElement } from "@microsoft/fast-element"; +import { Divider, DividerTemplate as template } from "@microsoft/fast-foundation"; +import { DividerStyles as styles } from "./divider.styles"; + +@customElement({ + name: "fast-divider", + template, + styles, +}) +export class FASTDivider extends Divider {} diff --git a/packages/web-components/fast-components-msft/src/flipper/fixtures/flipper.html b/packages/web-components/fast-components-msft/src/flipper/fixtures/flipper.html new file mode 100644 index 00000000000..4499c898ada --- /dev/null +++ b/packages/web-components/fast-components-msft/src/flipper/fixtures/flipper.html @@ -0,0 +1,43 @@ + +

Flipper

+

Default

+ + +

Previous

+ + +

Previous with slotted content

+ + + + + + +

Next

+ + +

Next with slotted content

+ + + + + + +

With aria-hidden

+ + +

Disabled

+ + \ No newline at end of file diff --git a/packages/web-components/fast-components-msft/src/flipper/flipper.stories.ts b/packages/web-components/fast-components-msft/src/flipper/flipper.stories.ts new file mode 100644 index 00000000000..d53d8774435 --- /dev/null +++ b/packages/web-components/fast-components-msft/src/flipper/flipper.stories.ts @@ -0,0 +1,13 @@ +import { FASTDesignSystemProvider } from "../design-system-provider"; +import FlipperTemplate from "./fixtures/flipper.html"; +import { FASTFlipper } from "./"; + +// Prevent tree-shaking +FASTFlipper; +FASTDesignSystemProvider; + +export default { + title: "Flipper", +}; + +export const Flipper = () => FlipperTemplate; diff --git a/packages/web-components/fast-components-msft/src/flipper/flipper.styles.ts b/packages/web-components/fast-components-msft/src/flipper/flipper.styles.ts new file mode 100644 index 00000000000..69e5d116ca6 --- /dev/null +++ b/packages/web-components/fast-components-msft/src/flipper/flipper.styles.ts @@ -0,0 +1,143 @@ +import { css } from "@microsoft/fast-element"; +import { + disabledCursor, + display, + focusVisible, + forcedColorsStylesheetBehavior, +} from "@microsoft/fast-foundation"; +import { SystemColors } from "@microsoft/fast-web-utilities"; +import { + heightNumber, + neutralFillStealthActiveBehavior, + neutralFillStealthHoverBehavior, + neutralFillStealthRestBehavior, + neutralFocusBehavior, + neutralForegroundRestBehavior, + neutralOutlineActiveBehavior, + neutralOutlineHoverBehavior, + neutralOutlineRestBehavior, +} from "../styles"; + +export const FlipperStyles = css` + ${display("inline-flex")} :host { + width: calc(${heightNumber} * 1px); + height: calc(${heightNumber} * 1px); + justify-content: center; + align-items: center; + margin: 0; + position: relative; + fill: var(--neutral-foreground-rest); + color: var(--neutral-foreground-rest); + background: transparent; + border: none; + padding: 0; + } + + :host::before { + content: ""; + opacity: 0.8; + background: var(--neutral-fill-stealth-rest); + border: calc(var(--outline-width) * 1px) solid var(--neutral-outline-rest); + border-radius: 50%; + position: absolute; + top: 0; + right: 0; + left: 0; + bottom: 0; + transition: all 0.1s ease-in-out; + } + + .next, + .previous { + position: relative; + ${ + /* Glyph size and margin-left is temporary - + replace when adaptive typography is figured out */ "" + } width: 16px; + height: 16px; + } + + :host(.disabled) { + opacity: var(--disabled-opacity); + cursor: ${disabledCursor}; + } + + :host(:hover)::before { + background: var(--neutral-fill-stealth-hover); + border-color: var(--neutral-outline-hover); + } + + :host(:${focusVisible}) { + outline: none; + } + + :host(:${focusVisible})::before { + box-shadow: 0 0 0 1px var(--neutral-focus) inset; + border-color: var(--neutral-focus); + } + + :host(:active)::before { + background: var(--neutral-fill-stealth-active); + border-color: var(--neutral-outline-active); + } + + :host::-moz-focus-inner { + border: 0; + } +`.withBehaviors( + neutralFillStealthActiveBehavior, + neutralFillStealthHoverBehavior, + neutralFillStealthRestBehavior, + neutralFocusBehavior, + neutralForegroundRestBehavior, + neutralOutlineActiveBehavior, + neutralOutlineHoverBehavior, + neutralOutlineRestBehavior, + forcedColorsStylesheetBehavior( + css` + :host { + background: ${SystemColors.Canvas}; + } + :host .next, + :host .previous { + color: ${SystemColors.ButtonText}; + fill: ${SystemColors.ButtonText}; + } + :host::before { + background: ${SystemColors.Canvas}; + border-color: ${SystemColors.ButtonText}; + } + :host(:hover)::before { + forced-color-adjust: none; + background: ${SystemColors.Highlight}; + border-color: ${SystemColors.ButtonText}; + opacity: 1; + } + :host(:hover) .next, + :host(:hover) .previous { + forced-color-adjust: none; + color: ${SystemColors.HighlightText}; + fill: ${SystemColors.HighlightText}; + } + :host(.disabled) { + opacity: 1; + } + :host(.disabled)::before, + :host(.disabled:hover)::before, + :host(.disabled) .next, + :host(.disabled) .previous, + :host(.disabled:hover) .next, + :host(.disabled:hover) .previous { + forced-color-adjust: none; + background: ${SystemColors.Canvas}; + border-color: ${SystemColors.GrayText}; + color: ${SystemColors.GrayText}; + fill: ${SystemColors.GrayText}; + } + :host(:${focusVisible})::before { + forced-color-adjust: none; + box-shadow: 0 0 0 2px ${SystemColors.ButtonText}; + } + ` + ) +); diff --git a/packages/web-components/fast-components-msft/src/flipper/index.ts b/packages/web-components/fast-components-msft/src/flipper/index.ts new file mode 100644 index 00000000000..3c8dc08570c --- /dev/null +++ b/packages/web-components/fast-components-msft/src/flipper/index.ts @@ -0,0 +1,10 @@ +import { customElement } from "@microsoft/fast-element"; +import { Flipper, FlipperTemplate as template } from "@microsoft/fast-foundation"; +import { FlipperStyles as styles } from "./flipper.styles"; + +@customElement({ + name: "fast-flipper", + template, + styles, +}) +export class FASTFlipper extends Flipper {} diff --git a/packages/web-components/fast-components-msft/src/index.ts b/packages/web-components/fast-components-msft/src/index.ts new file mode 100644 index 00000000000..f72dde059bc --- /dev/null +++ b/packages/web-components/fast-components-msft/src/index.ts @@ -0,0 +1,18 @@ +export * from "./anchor/"; +export * from "./badge/"; +export * from "./button/"; +export * from "./card/"; +export * from "./checkbox/"; +export * from "./design-system-provider/"; +export * from "./dialog/"; +export * from "./divider/"; +export * from "./flipper/"; +export * from "./progress/"; +export * from "./radio/"; +export * from "./radio-group/"; +export * from "./slider/"; +export * from "./slider-label/"; +export * from "./switch/"; +export * from "./tabs/"; +export * from "./text-area/"; +export * from "./text-field/"; diff --git a/packages/web-components/fast-components-msft/src/progress/index.ts b/packages/web-components/fast-components-msft/src/progress/index.ts new file mode 100644 index 00000000000..77d192d2b41 --- /dev/null +++ b/packages/web-components/fast-components-msft/src/progress/index.ts @@ -0,0 +1,2 @@ +export * from "./progress/"; +export * from "./progress-ring/"; diff --git a/packages/web-components/fast-components-msft/src/progress/progress-ring/fixtures/circular.html b/packages/web-components/fast-components-msft/src/progress/progress-ring/fixtures/circular.html new file mode 100644 index 00000000000..fdbfa1ed29b --- /dev/null +++ b/packages/web-components/fast-components-msft/src/progress/progress-ring/fixtures/circular.html @@ -0,0 +1,45 @@ + +

Progress ring

+

Default

+ + +

Paused

+ + +

Custom Sizes

+
+ + + + + +
+
+ + + + + +
+ + \ No newline at end of file diff --git a/packages/web-components/fast-components-msft/src/progress/progress-ring/index.ts b/packages/web-components/fast-components-msft/src/progress/progress-ring/index.ts new file mode 100644 index 00000000000..8a149539d98 --- /dev/null +++ b/packages/web-components/fast-components-msft/src/progress/progress-ring/index.ts @@ -0,0 +1,13 @@ +import { customElement } from "@microsoft/fast-element"; +import { + BaseProgress, + ProgressRingTemplate as template, +} from "@microsoft/fast-foundation"; +import { ProgressRingStyles as styles } from "./progress-ring.styles"; + +@customElement({ + name: "fast-progress-ring", + template, + styles, +}) +export class FASTProgressRing extends BaseProgress {} diff --git a/packages/web-components/fast-components-msft/src/progress/progress-ring/progress-ring.stories.ts b/packages/web-components/fast-components-msft/src/progress/progress-ring/progress-ring.stories.ts new file mode 100644 index 00000000000..95df37ab32f --- /dev/null +++ b/packages/web-components/fast-components-msft/src/progress/progress-ring/progress-ring.stories.ts @@ -0,0 +1,13 @@ +import { FASTDesignSystemProvider } from "../../design-system-provider"; +import Examples from "./fixtures/circular.html"; +import { FASTProgressRing } from "./"; + +// Prevent tree-shaking +FASTProgressRing; +FASTDesignSystemProvider; + +export default { + title: "Progress Ring", +}; + +export const ProgressRing = () => Examples; diff --git a/packages/web-components/fast-components-msft/src/progress/progress-ring/progress-ring.styles.ts b/packages/web-components/fast-components-msft/src/progress/progress-ring/progress-ring.styles.ts new file mode 100644 index 00000000000..420d16baaab --- /dev/null +++ b/packages/web-components/fast-components-msft/src/progress/progress-ring/progress-ring.styles.ts @@ -0,0 +1,96 @@ +import { css } from "@microsoft/fast-element"; +import { SystemColors } from "@microsoft/fast-web-utilities"; +import { display, forcedColorsStylesheetBehavior } from "@microsoft/fast-foundation"; +import { + accentFillRestBehavior, + heightNumber, + neutralFillRestBehavior, + neutralForegroundHintBehavior, +} from "../../styles"; + +export const ProgressRingStyles = css` + ${display("flex")} :host { + align-items: center; + outline: none; + height: calc(${heightNumber} * 1px); + width: calc(${heightNumber} * 1px); + margin: calc(${heightNumber} * 1px) 0; + } + + .progress { + height: 100%; + width: 100%; + } + + .background { + stroke: var(--neutral-fill-rest); + fill: none; + stroke-width: 2px; + } + + .determinate { + stroke: var(--accent-fill-rest); + fill: none; + stroke-width: 2px; + stroke-linecap: round; + transform-origin: 50% 50%; + transform: rotate(-90deg); + transition: all 0.2s ease-in-out; + } + + .indeterminate-indicator-1 { + stroke: var(--accent-fill-rest); + fill: none; + stroke-width: 2px; + stroke-linecap: round; + transform-origin: 50% 50%; + transform: rotate(-90deg); + transition: all 0.2s ease-in-out; + animation: spin-infinite 2s linear infinite; + } + + :host(.paused) .indeterminate-indicator-1 { + animation-play-state: paused; + stroke: var(--neutral-fill-rest); + } + + :host(.paused) .determinate { + stroke: var(--neutral-foreground-hint); + } + + @keyframes spin-infinite { + 0% { + stroke-dasharray: 0.01px 43.97px; + transform: rotate(0deg); + } + 50% { + stroke-dasharray: 21.99px 21.99px; + transform: rotate(450deg); + } + 100% { + stroke-dasharray: 0.01px 43.97px; + transform: rotate(1080deg); + } + } +`.withBehaviors( + accentFillRestBehavior, + neutralFillRestBehavior, + neutralForegroundHintBehavior, + forcedColorsStylesheetBehavior( + css` + .indeterminate-indicator-1, + .determinate { + stroke: ${SystemColors.FieldText}; + } + .background { + stroke: ${SystemColors.Field}; + } + :host(.paused) .indeterminate-indicator-1 { + stroke: ${SystemColors.Field}; + } + :host(.paused) .determinate { + stroke: ${SystemColors.GrayText}; + } + ` + ) +); diff --git a/packages/web-components/fast-components-msft/src/progress/progress/fixtures/linear.html b/packages/web-components/fast-components-msft/src/progress/progress/fixtures/linear.html new file mode 100644 index 00000000000..ec23abcb8c4 --- /dev/null +++ b/packages/web-components/fast-components-msft/src/progress/progress/fixtures/linear.html @@ -0,0 +1,63 @@ + +

Progress

+

Default

+
+ + +
+

Paused

+
+ + +
+

Custom Sizes

+
+ + + + + + + + + + + + + + +
+ + \ No newline at end of file diff --git a/packages/web-components/fast-components-msft/src/progress/progress/index.ts b/packages/web-components/fast-components-msft/src/progress/progress/index.ts new file mode 100644 index 00000000000..5abb518d84a --- /dev/null +++ b/packages/web-components/fast-components-msft/src/progress/progress/index.ts @@ -0,0 +1,10 @@ +import { customElement } from "@microsoft/fast-element"; +import { BaseProgress, ProgressTemplate as template } from "@microsoft/fast-foundation"; +import { ProgressStyles as styles } from "./progress.styles"; + +@customElement({ + name: "fast-progress", + template, + styles, +}) +export class FASTProgress extends BaseProgress {} diff --git a/packages/web-components/fast-components-msft/src/progress/progress/progress.stories.ts b/packages/web-components/fast-components-msft/src/progress/progress/progress.stories.ts new file mode 100644 index 00000000000..20065c81d32 --- /dev/null +++ b/packages/web-components/fast-components-msft/src/progress/progress/progress.stories.ts @@ -0,0 +1,13 @@ +import { FASTDesignSystemProvider } from "../../design-system-provider"; +import Examples from "./fixtures/linear.html"; +import { FASTProgress } from "./"; + +// Prevent tree-shaking +FASTProgress; +FASTDesignSystemProvider; + +export default { + title: "Progress", +}; + +export const Progress = () => Examples; diff --git a/packages/web-components/fast-components-msft/src/progress/progress/progress.styles.ts b/packages/web-components/fast-components-msft/src/progress/progress/progress.styles.ts new file mode 100644 index 00000000000..5769f80049f --- /dev/null +++ b/packages/web-components/fast-components-msft/src/progress/progress/progress.styles.ts @@ -0,0 +1,136 @@ +import { css } from "@microsoft/fast-element"; +import { SystemColors } from "@microsoft/fast-web-utilities"; +import { display, forcedColorsStylesheetBehavior } from "@microsoft/fast-foundation"; +import { + accentFillRestBehavior, + neutralFillRestBehavior, + neutralForegroundHintBehavior, +} from "../../styles"; + +export const ProgressStyles = css` + ${display("flex")} :host { + align-items: center; + outline: none; + height: calc(var(--design-unit) * 1px); + margin: calc(var(--design-unit) * 1px) 0; + } + + .progress { + background-color: var(--neutral-fill-rest); + border-radius: calc(var(--design-unit) * 1px); + width: 100%; + height: 100%; + display: flex; + align-items: center; + position: relative; + } + + .determinate { + background-color: var(--accent-fill-rest); + border-radius: calc(var(--design-unit) * 1px); + height: 100%; + transition: all 0.2s ease-in-out; + display: flex; + } + + .indeterminate { + height: 100%; + border-radius: calc(var(--design-unit) * 1px); + display: flex; + width: 100%; + position: relative; + overflow: hidden; + } + + .indeterminate-indicator-1 { + position: absolute; + opacity: 0; + height: 100%; + background-color: var(--accent-fill-rest); + border-radius: calc(var(--design-unit) * 1px); + animation-timing-function: cubic-bezier(0.4, 0.0, 0.6, 1.0); + width: 40%; + animation: indeterminate-1 2s infinite; + } + + .indeterminate-indicator-2 { + position: absolute; + opacity: 0; + height: 100%; + background-color: var(--accent-fill-rest); + border-radius: calc(var(--design-unit) * 1px); + animation-timing-function: cubic-bezier(0.4, 0.0, 0.6, 1.0); + width: 60%; + animation: indeterminate-2 2s infinite; + } + + :host(.paused) .indeterminate-indicator-1, :host(.paused) .indeterminate-indicator-2 { + animation-play-state: paused; + background-color: var(--neutral-fill-rest); + } + + :host(.paused) .determinate { + background-color: var(--neutral-foreground-hint); + } + + @keyframes indeterminate-1 { + 0% { + opacity: 1; + transform: translateX(-100%); + } + 70% { + opacity: 1; + transform: translateX(300%); + } + 70.01% { + opacity: 0; + } + 100% { + opacity: 0; + transform: translateX(300%); + }, + } + + @keyframes indeterminate-2 { + 0% { + opacity: 0; + transform: translateX(-150%); + } + 29.99% { + opacity: 0; + } + 30% { + opacity: 1; + transform: translateX(-150%); + } + 100% { + transform: translateX(166.66%); + opacity: 1; + }, + }, +`.withBehaviors( + accentFillRestBehavior, + neutralFillRestBehavior, + neutralForegroundHintBehavior, + forcedColorsStylesheetBehavior( + css` + .indeterminate-indicator-1, + .indeterminate-indicator-2, + .determinate { + forced-color-adjust: none; + background-color: ${SystemColors.FieldText}; + } + .progress { + background-color: ${SystemColors.Field}; + border: calc(var(--outline-width) * 1px) solid ${SystemColors.FieldText}; + } + :host(.paused) .indeterminate-indicator-1, + .indeterminate-indicator-2 { + background-color: ${SystemColors.Field}; + } + :host(.paused) .determinate { + background-color: ${SystemColors.GrayText}; + } + ` + ) +); diff --git a/packages/web-components/fast-components-msft/src/radio-group/fixtures/radio-group.html b/packages/web-components/fast-components-msft/src/radio-group/fixtures/radio-group.html new file mode 100644 index 00000000000..ca0aa3b6a66 --- /dev/null +++ b/packages/web-components/fast-components-msft/src/radio-group/fixtures/radio-group.html @@ -0,0 +1,78 @@ + +

Radio Group

+ +

Defaults

+
+ + + One + Two + +
+ +

Single radio

+
+ + + Michael Jordan + +
+ +

With label outside group

+
+ + + Apples + Oranges + Bananas + Kiwi + Grapefruit + Mango + Blueberries + Strawberries + Pineapple + +
+ +

Within toolbar

+
+
+ + + back + forward + refresh + + +
+
+ +

Disabled

+
+ + + Lamborghini + Ferari + +
+ +

Readonly

+
+ + + Word + Excel + +
+ +

Preset value

+
+ + + Ice Man + Maverick + Viper + Jester + +
+ \ No newline at end of file diff --git a/packages/web-components/fast-components-msft/src/radio-group/index.ts b/packages/web-components/fast-components-msft/src/radio-group/index.ts new file mode 100644 index 00000000000..7c5b3ae8b22 --- /dev/null +++ b/packages/web-components/fast-components-msft/src/radio-group/index.ts @@ -0,0 +1,10 @@ +import { customElement } from "@microsoft/fast-element"; +import { RadioGroup, RadioGroupTemplate as template } from "@microsoft/fast-foundation"; +import { RadioGroupStyles as styles } from "./radio-group.styles"; + +@customElement({ + name: "fast-radio-group", + template, + styles, +}) +export class FASTRadioGroup extends RadioGroup {} diff --git a/packages/web-components/fast-components-msft/src/radio-group/radio-group.stories.ts b/packages/web-components/fast-components-msft/src/radio-group/radio-group.stories.ts new file mode 100644 index 00000000000..b0db4140aa7 --- /dev/null +++ b/packages/web-components/fast-components-msft/src/radio-group/radio-group.stories.ts @@ -0,0 +1,13 @@ +import { FASTDesignSystemProvider } from "../design-system-provider"; +import Examples from "./fixtures/radio-group.html"; +import { FASTRadioGroup } from "./"; + +// Prevent tree-shaking +FASTRadioGroup; +FASTDesignSystemProvider; + +export default { + title: "RadioGroup", +}; + +export const RadioGroup = () => Examples; diff --git a/packages/web-components/fast-components-msft/src/radio-group/radio-group.styles.ts b/packages/web-components/fast-components-msft/src/radio-group/radio-group.styles.ts new file mode 100644 index 00000000000..2e18a422852 --- /dev/null +++ b/packages/web-components/fast-components-msft/src/radio-group/radio-group.styles.ts @@ -0,0 +1,15 @@ +import { css } from "@microsoft/fast-element"; +import { display } from "@microsoft/fast-foundation"; + +export const RadioGroupStyles = css` + ${display("flex")} :host { + align-items: flex-start; + margin: calc(var(--design-unit) * 1px) 0; + flex-direction: column; + } + + .positioning-region { + display: flex; + flex-wrap: wrap; + } +`; diff --git a/packages/web-components/fast-components-msft/src/radio/fixtures/radio.html b/packages/web-components/fast-components-msft/src/radio/fixtures/radio.html new file mode 100644 index 00000000000..5fb670cd8cc --- /dev/null +++ b/packages/web-components/fast-components-msft/src/radio/fixtures/radio.html @@ -0,0 +1,32 @@ + +

Radio

+ +

Defaults

+ +
+ label +
+ +

Checked

+ + + +

Required

+ + + +

Disabled

+ + label + checked + +

Visual vs audio label

+ + Visible label + + +
+ + +
+ \ No newline at end of file diff --git a/packages/web-components/fast-components-msft/src/radio/index.ts b/packages/web-components/fast-components-msft/src/radio/index.ts new file mode 100644 index 00000000000..06068933fcf --- /dev/null +++ b/packages/web-components/fast-components-msft/src/radio/index.ts @@ -0,0 +1,10 @@ +import { customElement } from "@microsoft/fast-element"; +import { Radio, RadioTemplate as template } from "@microsoft/fast-foundation"; +import { RadioStyles as styles } from "./radio.styles"; + +@customElement({ + name: "fast-radio", + template, + styles, +}) +export class FASTRadio extends Radio {} diff --git a/packages/web-components/fast-components-msft/src/radio/radio.stories.ts b/packages/web-components/fast-components-msft/src/radio/radio.stories.ts new file mode 100644 index 00000000000..a014550a4bc --- /dev/null +++ b/packages/web-components/fast-components-msft/src/radio/radio.stories.ts @@ -0,0 +1,13 @@ +import { FASTDesignSystemProvider } from "../design-system-provider"; +import Examples from "./fixtures/radio.html"; +import { FASTRadio } from "./"; + +// Prevent tree-shaking +FASTRadio; +FASTDesignSystemProvider; + +export default { + title: "Radio", +}; + +export const Radio = () => Examples; diff --git a/packages/web-components/fast-components-msft/src/radio/radio.styles.ts b/packages/web-components/fast-components-msft/src/radio/radio.styles.ts new file mode 100644 index 00000000000..08b9e23342a --- /dev/null +++ b/packages/web-components/fast-components-msft/src/radio/radio.styles.ts @@ -0,0 +1,146 @@ +import { css } from "@microsoft/fast-element"; +import { SystemColors } from "@microsoft/fast-web-utilities"; +import { + disabledCursor, + display, + focusVisible, + forcedColorsStylesheetBehavior, +} from "@microsoft/fast-foundation"; +import { + heightNumber, + neutralFillInputHoverBehavior, + neutralFillInputRestBehavior, + neutralForegroundRestBehavior, + neutralOutlineHoverBehavior, + neutralOutlineRestBehavior, +} from "../styles"; + +export const RadioStyles = css` + ${display("inline-flex")} :host { + --input-size: calc((${heightNumber} / 2) + var(--design-unit)); + align-items: center; + outline: none; + margin: calc(var(--design-unit) * 1px) 0; + ${ + /* + * Chromium likes to select label text or the default slot when + * the radio button is clicked. Maybe there is a better solution here? + */ "" + } user-select: none; + position: relative; + flex-direction: row; + transition: all 0.2s ease-in-out; + } + + .control { + position: relative; + width: calc(var(--input-size) * 1px); + height: calc(var(--input-size) * 1px); + box-sizing: border-box; + border-radius: 50%; + border: calc(var(--outline-width) * 1px) solid var(--neutral-outline-rest); + background: var(--neutral-fill-input-rest); + outline: none; + cursor: pointer; + } + + .label { + font-family: var(--body-font); + color: var(--neutral-foreground-rest); + ${ + /* Need to discuss with Brian how HorizontalSpacingNumber can work. https://github.com/microsoft/fast-dna/issues/2766 */ "" + } padding-inline-start: calc(var(--design-unit) * 2px + 2px); + margin-inline-end: calc(var(--design-unit) * 2px + 2px); + cursor: pointer; + ${ + /* Font size is temporary - replace when adaptive typography is figured out */ "" + } font-size: calc(1rem + (var(--density) * 2px)); + } + + .checked-indicator { + position: absolute; + top: 5px; + left: 5px; + right: 5px; + bottom: 5px; + border-radius: 50%; + display: inline-block; + flex-shrink: 0; + background: var(--neutral-foreground-rest); + fill: var(--neutral-foreground-rest); + opacity: 0; + pointer-events: none; + } + + .control:hover { + background: var(--neutral-fill-input-hover); + border-color: var(--neutral-outline-hover); + } + + :host(:${focusVisible}) .control { + box-shadow: 0 0 0 1px var(--neutral-focus) inset; + border-color: var(--neutral-focus); + } + + :host(.disabled) .label, + :host(.readonly) .label, + :host(.readonly) .control, + :host(.disabled) .control { + cursor: ${disabledCursor}; + } + + :host(.checked) .checked-indicator { + opacity: 1; + } + + :host(.disabled) { + opacity: var(--disabled-opacity); + } +`.withBehaviors( + neutralFillInputHoverBehavior, + neutralFillInputRestBehavior, + neutralForegroundRestBehavior, + neutralOutlineHoverBehavior, + neutralOutlineRestBehavior, + forcedColorsStylesheetBehavior( + css` + .control, .control:hover, .control:active { + forced-color-adjust: none; + border-color: ${SystemColors.FieldText}; + background: ${SystemColors.Field}; + } + :host(:${focusVisible}) .control { + border-color: ${SystemColors.Highlight}; + } + :host(.checked) .control:hover, .control:active { + border-color: ${SystemColors.Highlight}; + background: ${SystemColors.Highlight}; + } + :host(.checked) .checked-indicator { + background: ${SystemColors.Highlight}; + fill: ${SystemColors.Highlight}; + } + :host(.checked) .control:hover .checked-indicator { + background: ${SystemColors.HighlightText}; + fill: ${SystemColors.HighlightText}; + } + :host(.disabled) { + forced-color-adjust: none; + opacity: 1; + } + :host(.disabled) .label { + color: ${SystemColors.GrayText}; + } + :host(.disabled) .control, + :host(.checked.disabled) .control:hover, .control:active { + background: ${SystemColors.Field}; + border-color: ${SystemColors.GrayText}; + } + :host(.disabled) .checked-indicator, + :host(.checked.disabled) .control:hover .checked-indicator { + fill: ${SystemColors.GrayText}; + background: ${SystemColors.GrayText}; + } + ` + ) +); diff --git a/packages/web-components/fast-components-msft/src/slider-label/fixtures/slider-label.html b/packages/web-components/fast-components-msft/src/slider-label/fixtures/slider-label.html new file mode 100644 index 00000000000..0f393dcbbd0 --- /dev/null +++ b/packages/web-components/fast-components-msft/src/slider-label/fixtures/slider-label.html @@ -0,0 +1,36 @@ + +
+

Default

+
+ + basic + +
+

Disabled

+
+ + disabled + +
+

Hide mark

+
+ + hide-mark + +
+

With position

+
+ + pos:10 + +
+

Vertical

+
+ + + vert + + +
+
+ \ No newline at end of file diff --git a/packages/web-components/fast-components-msft/src/slider-label/index.ts b/packages/web-components/fast-components-msft/src/slider-label/index.ts new file mode 100644 index 00000000000..bf8f9e94402 --- /dev/null +++ b/packages/web-components/fast-components-msft/src/slider-label/index.ts @@ -0,0 +1,10 @@ +import { customElement } from "@microsoft/fast-element"; +import { SliderLabel, SliderLabelTemplate as template } from "@microsoft/fast-foundation"; +import { SliderLabelStyles as styles } from "./slider-label.styles"; + +@customElement({ + name: "fast-slider-label", + template, + styles, +}) +export class FASTSliderLabel extends SliderLabel {} diff --git a/packages/web-components/fast-components-msft/src/slider-label/slider-label.stories.ts b/packages/web-components/fast-components-msft/src/slider-label/slider-label.stories.ts new file mode 100644 index 00000000000..730811fc5e4 --- /dev/null +++ b/packages/web-components/fast-components-msft/src/slider-label/slider-label.stories.ts @@ -0,0 +1,13 @@ +import { FASTDesignSystemProvider } from "../design-system-provider"; +import Examples from "./fixtures/slider-label.html"; +import { FASTSliderLabel } from "./"; + +// Prevent tree-shaking +FASTSliderLabel; +FASTDesignSystemProvider; + +export default { + title: "Slider label", +}; + +export const SliderLabel = () => Examples; diff --git a/packages/web-components/fast-components-msft/src/slider-label/slider-label.styles.ts b/packages/web-components/fast-components-msft/src/slider-label/slider-label.styles.ts new file mode 100644 index 00000000000..77f17de094e --- /dev/null +++ b/packages/web-components/fast-components-msft/src/slider-label/slider-label.styles.ts @@ -0,0 +1,82 @@ +import { css } from "@microsoft/fast-element"; +import { SystemColors } from "@microsoft/fast-web-utilities"; +import { display, forcedColorsStylesheetBehavior } from "@microsoft/fast-foundation"; +import { heightNumber, neutralOutlineRestBehavior } from "../styles"; + +export const SliderLabelStyles = css` + ${display("block")} :host { + } + .root { + position: absolute; + display: grid; + } + :host(.horizontal) { + align-self: start; + grid-row: 2; + margin-top: -2px; + } + :host(.vertical) { + justify-self: start; + grid-column: 2; + margin-left: 2px; + } + .container { + display: grid; + justify-self: center; + } + :host(.horizontal) .container { + grid-template-rows: auto auto; + grid-template-columns: 0; + } + :host(.vertical) .container { + grid-template-columns: auto auto; + grid-template-rows: 0; + min-width: calc(var(--thumb-size) * 1px); + height: calc(var(--thumb-size) * 1px); + } + .label { + justify-self: center; + align-self: center; + white-space: nowrap; + justify-self: center; + max-width: 30px; + margin: 2px 0; + } + .mark { + width: calc((var(--design-unit) / 2) * 1px); + height: calc(${heightNumber} * 0.25 * 1px); + background: var(--neutral-outline-rest); + justify-self: center; + } + :host(.vertical) .mark { + transform: rotate(90deg); + align-self: center; + } + :host(.vertical) .label { + margin-left: calc((var(--design-unit) / 2) * 2px); + align-self: center; + } + :host(.disabled) { + opacity: var(--disabled-opacity); + } +`.withBehaviors( + neutralOutlineRestBehavior, + forcedColorsStylesheetBehavior( + css` + .mark { + forced-color-adjust: none; + background: ${SystemColors.FieldText}; + } + :host(.disabled) { + forced-color-adjust: none; + opacity: 1; + } + :host(.disabled) .label { + color: ${SystemColors.GrayText}; + } + :host(.disabled) .mark { + background: ${SystemColors.GrayText}; + } + ` + ) +); diff --git a/packages/web-components/fast-components-msft/src/slider/fixtures/slider.html b/packages/web-components/fast-components-msft/src/slider/fixtures/slider.html new file mode 100644 index 00000000000..e662f91b7a2 --- /dev/null +++ b/packages/web-components/fast-components-msft/src/slider/fixtures/slider.html @@ -0,0 +1,287 @@ + +
+ + + + 0℃ + + + 10℃ + + + 90℃ + + + 100℃ + + + + + + + +
+ + + + 10℃ + + + 90℃ + + +
+ + +
+ +
+ + + 10 + + + 20 + + + 40 + + + 60 + + + 80 + + +
+
+ + + + + 0 + + + 10 + + + 20 + + + 30 + + + 40 + + + 50 + + + 60 + + + 70 + + + 80 + + + 90 + + + 100 + + + + + + + + + + + + + + + + 50 + + + + Clock Icon + + + + + + + + + + + + 0 + + + 10 + + + 20 + + + 30 + + + 40 + + + 50 + + + 60 + + + 70 + + + 80 + + + 90 + + + 100 + + +
+ \ No newline at end of file diff --git a/packages/web-components/fast-components-msft/src/slider/index.ts b/packages/web-components/fast-components-msft/src/slider/index.ts new file mode 100644 index 00000000000..e177019719e --- /dev/null +++ b/packages/web-components/fast-components-msft/src/slider/index.ts @@ -0,0 +1,10 @@ +import { customElement } from "@microsoft/fast-element"; +import { Slider, SliderTemplate as template } from "@microsoft/fast-foundation"; +import { SliderStyles as styles } from "./slider.styles"; + +@customElement({ + name: "fast-slider", + template, + styles, +}) +export class FASTSlider extends Slider {} diff --git a/packages/web-components/fast-components-msft/src/slider/slider.stories.ts b/packages/web-components/fast-components-msft/src/slider/slider.stories.ts new file mode 100644 index 00000000000..2bad6c10108 --- /dev/null +++ b/packages/web-components/fast-components-msft/src/slider/slider.stories.ts @@ -0,0 +1,13 @@ +import { FASTDesignSystemProvider } from "../design-system-provider"; +import Examples from "./fixtures/slider.html"; +import { FASTSlider } from "./"; + +// Prevent tree-shaking +FASTSlider; +FASTDesignSystemProvider; + +export default { + title: "Slider", +}; + +export const Slider = () => Examples; diff --git a/packages/web-components/fast-components-msft/src/slider/slider.styles.ts b/packages/web-components/fast-components-msft/src/slider/slider.styles.ts new file mode 100644 index 00000000000..a62d61e3450 --- /dev/null +++ b/packages/web-components/fast-components-msft/src/slider/slider.styles.ts @@ -0,0 +1,148 @@ +import { css } from "@microsoft/fast-element"; +import { SystemColors } from "@microsoft/fast-web-utilities"; +import { + disabledCursor, + display, + focusVisible, + forcedColorsStylesheetBehavior, +} from "@microsoft/fast-foundation"; +import { + heightNumber, + neutralForegroundActiveBehavior, + neutralForegroundHoverBehavior, + neutralForegroundRestBehavior, + neutralOutlineHoverBehavior, + neutralOutlineRestBehavior, +} from "../styles"; + +export const SliderStyles = css` + :host([hidden]) { + display: none; + } + + ${display("inline-grid")} :host { + --thumb-size: calc(${heightNumber} * 0.5); + --thumb-translate: calc(var(--thumb-size) * 0.5); + --track-overhang: calc((var(--design-unit) / 2) * -1); + align-items: center; + outline: none; + width: 100%; + margin: calc(var(--design-unit) * 1px) 0; + user-select: none; + box-sizing: border-box; + border-radius: calc(var(--corner-radius) * 1px); + outline: none; + cursor: pointer; + } + :host(.horizontal) .positioning-region { + position: relative; + margin: 0 8px; + display: grid; + grid-template-rows: calc(var(--thumb-size) * 1px) 1fr; + } + :host(.vertical) .positioning-region { + position: relative; + margin: 0 8px; + display: grid; + height: 100%; + grid-template-columns: calc(var(--thumb-size) * 1px) 1fr; + } + .thumb-container { + position: absolute; + height: calc(var(--thumb-size) * 1px); + width: calc(var(--thumb-size) * 1px); + transition: "all 0.2s ease"; + } + .thumb-cursor { + border: none; + width: calc(var(--thumb-size) * 1px); + height: calc(var(--thumb-size) * 1px); + background: var(--neutral-foreground-rest); + border-radius: 50%; + } + .thumb-cursor:hover { + background: var(--neutral-foreground-hover); + border-color: var(--neutral-outline-hover); + } + .thumb-cursor:active { + background: var(--neutral-foreground-active); + } + :host(.horizontal) .thumb-container { + transform: translateX(calc(var(--thumb-translate) * 1px)); + } + :host(.vertical) .thumb-container { + transform: translateY(calc(var(--thumb-translate) * 1px)); + } + :host(.horizontal) { + min-width: calc(var(--design-unit) * 60px); + } + :host(.horizontal) .track { + right: calc(var(--track-overhang) * 1px); + left: calc(var(--track-overhang) * 1px); + align-self: start; + margin-top: 6px; + height: 4px; + } + :host(.vertical) .track { + top: calc(var(--track-overhang) * 1px); + bottom: calc(var(--track-overhang) * 1px); + justify-self: start; + margin-left: 6px; + width: 4px; + height: 100%; + } + .track { + background: var(--neutral-outline-rest); + position: absolute; + } + :host(.vertical) { + height: 100%; + min-height: calc(var(--design-unit) * 60px); + min-width: calc(var(--design-unit) * 20px); + } + :host(.disabled) .label, + :host(.readonly) .label, + :host(.readonly) .slider, + :host(.disabled) .slider { + cursor: ${disabledCursor}; + } + :host(.disabled) { + opacity: var(--disabled-opacity); + } +`.withBehaviors( + neutralForegroundActiveBehavior, + neutralForegroundHoverBehavior, + neutralForegroundRestBehavior, + neutralOutlineHoverBehavior, + neutralOutlineRestBehavior, + forcedColorsStylesheetBehavior( + css` + .thumb-cursor { + forced-color-adjust: none; + border-color: ${SystemColors.FieldText}; + background: ${SystemColors.FieldText}; + } + .thumb-cursor:hover, + .thumb-cursor:active { + background: ${SystemColors.Highlight}; + } + .track { + forced-color-adjust: none; + background: ${SystemColors.FieldText}; + } + :host(:${focusVisible}) .thumb-cursor { + border-color: ${SystemColors.Highlight}; + } + :host(.disabled) { + opacity: 1; + cursor: ${disabledCursor}; + } + :host(.disabled) .slider, + :host(.disabled) .track, + :host(.disabled) .thumb-cursor { + forced-color-adjust: none; + background: ${SystemColors.GrayText}; + } + ` + ) +); diff --git a/packages/web-components/fast-components-msft/src/storybook-typings.d.ts b/packages/web-components/fast-components-msft/src/storybook-typings.d.ts new file mode 100644 index 00000000000..d87538bbc64 --- /dev/null +++ b/packages/web-components/fast-components-msft/src/storybook-typings.d.ts @@ -0,0 +1,4 @@ +declare module "*.html" { + const value: string; + export default value; +} diff --git a/packages/web-components/fast-components-msft/src/styles/behaviors.ts b/packages/web-components/fast-components-msft/src/styles/behaviors.ts new file mode 100644 index 00000000000..02181257187 --- /dev/null +++ b/packages/web-components/fast-components-msft/src/styles/behaviors.ts @@ -0,0 +1,338 @@ +import { cssCustomPropertyBehaviorFactory } from "@microsoft/fast-foundation"; +import { + accentBaseColor, + accentFill, + accentFillLarge, + accentForeground, + accentForegroundCut, + accentForegroundLarge, + neutralDividerRest, + neutralFill, + neutralFillCard, + neutralFillInput, + neutralFillStealth, + neutralFillToggle, + neutralFocus, + neutralFocusInnerAccent, + neutralForeground, + neutralForegroundHint, + neutralForegroundHintLarge, + neutralForegroundToggle, + neutralForegroundToggleLarge, + neutralLayerCard, + neutralLayerCardContainer, + neutralLayerFloating, + neutralLayerL1, + neutralLayerL1Alt, + neutralLayerL2, + neutralLayerL3, + neutralLayerL4, + neutralOutline, +} from "@microsoft/fast-components-styles-msft"; +import { FASTDesignSystemProvider } from "../design-system-provider"; + +export const neutralForegroundRestBehavior = cssCustomPropertyBehaviorFactory( + "neutral-foreground-rest", + x => neutralForeground(x).rest, + FASTDesignSystemProvider.findProvider +); +export const neutralForegroundHoverBehavior = cssCustomPropertyBehaviorFactory( + "neutral-foreground-hover", + x => neutralForeground(x).hover, + FASTDesignSystemProvider.findProvider +); +export const neutralForegroundActiveBehavior = cssCustomPropertyBehaviorFactory( + "neutral-foreground-active", + x => neutralForeground(x).active, + FASTDesignSystemProvider.findProvider +); +export const neutralForegroundFocusBehavior = cssCustomPropertyBehaviorFactory( + "neutral-foreground-focus", + x => neutralForeground(x).focus, + FASTDesignSystemProvider.findProvider +); +export const neutralForegroundToggleBehavior = cssCustomPropertyBehaviorFactory( + "neutral-foreground-toggle", + neutralForegroundToggle, + FASTDesignSystemProvider.findProvider +); +export const neutralForegroundToggleLargeBehavior = cssCustomPropertyBehaviorFactory( + "neutral-foreground-toggle-large", + neutralForegroundToggleLarge, + FASTDesignSystemProvider.findProvider +); +export const neutralForegroundHintBehavior = cssCustomPropertyBehaviorFactory( + "neutral-foreground-hint", + neutralForegroundHint, + FASTDesignSystemProvider.findProvider +); +export const neutralForegroundHintLargeBehavior = cssCustomPropertyBehaviorFactory( + "neutral-foreground-hint-large", + neutralForegroundHintLarge, + FASTDesignSystemProvider.findProvider +); +export const accentForegroundRestBehavior = cssCustomPropertyBehaviorFactory( + "accent-foreground-rest", + x => accentForeground(x).rest, + FASTDesignSystemProvider.findProvider +); +export const accentForegroundHoverBehavior = cssCustomPropertyBehaviorFactory( + "accent-foreground-hover", + x => accentForeground(x).hover, + FASTDesignSystemProvider.findProvider +); +export const accentForegroundActiveBehavior = cssCustomPropertyBehaviorFactory( + "accent-foreground-active", + x => accentForeground(x).active, + FASTDesignSystemProvider.findProvider +); +export const accentForegroundFocusBehavior = cssCustomPropertyBehaviorFactory( + "accent-foreground-focus", + x => accentForeground(x).focus, + FASTDesignSystemProvider.findProvider +); +export const accentForegroundCutRestBehavior = cssCustomPropertyBehaviorFactory( + "accent-foreground-cut-rest", + x => accentForegroundCut(x), + FASTDesignSystemProvider.findProvider +); +export const accentForegroundLargeRestBehavior = cssCustomPropertyBehaviorFactory( + "accent-foreground-large-rest", + x => accentForegroundLarge(x).rest, + FASTDesignSystemProvider.findProvider +); +export const accentForegroundLargeHoverBehavior = cssCustomPropertyBehaviorFactory( + "accent-foreground-large-hover", + x => accentForegroundLarge(x).hover, + FASTDesignSystemProvider.findProvider +); +export const accentForegroundLargeActiveBehavior = cssCustomPropertyBehaviorFactory( + "accent-foreground-large-active", + x => accentForegroundLarge(x).active, + FASTDesignSystemProvider.findProvider +); +export const accentForegroundLargeFocusBehavior = cssCustomPropertyBehaviorFactory( + "accent-foreground-large-focus", + x => accentForegroundLarge(x).focus, + FASTDesignSystemProvider.findProvider +); +export const neutralFillRestBehavior = cssCustomPropertyBehaviorFactory( + "neutral-fill-rest", + x => neutralFill(x).rest, + FASTDesignSystemProvider.findProvider +); +export const neutralFillHoverBehavior = cssCustomPropertyBehaviorFactory( + "neutral-fill-hover", + x => neutralFill(x).hover, + FASTDesignSystemProvider.findProvider +); +export const neutralFillActiveBehavior = cssCustomPropertyBehaviorFactory( + "neutral-fill-active", + x => neutralFill(x).active, + FASTDesignSystemProvider.findProvider +); +export const neutralFillFocusBehavior = cssCustomPropertyBehaviorFactory( + "neutral-fill-focus", + x => neutralFill(x).focus, + FASTDesignSystemProvider.findProvider +); +export const neutralFillSelectedBehavior = cssCustomPropertyBehaviorFactory( + "neutral-fill-selected", + x => neutralFill(x).selected, + FASTDesignSystemProvider.findProvider +); +export const neutralFillStealthRestBehavior = cssCustomPropertyBehaviorFactory( + "neutral-fill-stealth-rest", + x => neutralFillStealth(x).rest, + FASTDesignSystemProvider.findProvider +); +export const neutralFillStealthHoverBehavior = cssCustomPropertyBehaviorFactory( + "neutral-fill-stealth-hover", + x => neutralFillStealth(x).hover, + FASTDesignSystemProvider.findProvider +); +export const neutralFillStealthActiveBehavior = cssCustomPropertyBehaviorFactory( + "neutral-fill-stealth-active", + x => neutralFillStealth(x).active, + FASTDesignSystemProvider.findProvider +); +export const neutralFillStealthFocusBehavior = cssCustomPropertyBehaviorFactory( + "neutral-fill-stealth-focus", + x => neutralFillStealth(x).focus, + FASTDesignSystemProvider.findProvider +); +export const neutralFillStealthSelectedBehavior = cssCustomPropertyBehaviorFactory( + "neutral-fill-stealth-selected", + x => neutralFillStealth(x).selected, + FASTDesignSystemProvider.findProvider +); +export const neutralFillToggleRestBehavior = cssCustomPropertyBehaviorFactory( + "neutral-fill-toggle-rest", + x => neutralFillToggle(x).rest, + FASTDesignSystemProvider.findProvider +); +export const neutralFillToggleHoverBehavior = cssCustomPropertyBehaviorFactory( + "neutral-fill-toggle-hover", + x => neutralFillToggle(x).hover, + FASTDesignSystemProvider.findProvider +); +export const neutralFillToggleActiveBehavior = cssCustomPropertyBehaviorFactory( + "neutral-fill-toggle-active", + x => neutralFillToggle(x).active, + FASTDesignSystemProvider.findProvider +); +export const neutralFillToggleFocusBehavior = cssCustomPropertyBehaviorFactory( + "neutral-fill-toggle-focus", + x => neutralFillToggle(x).focus, + FASTDesignSystemProvider.findProvider +); +export const neutralFillInputRestBehavior = cssCustomPropertyBehaviorFactory( + "neutral-fill-input-rest", + x => neutralFillInput(x).rest, + FASTDesignSystemProvider.findProvider +); +export const neutralFillInputHoverBehavior = cssCustomPropertyBehaviorFactory( + "neutral-fill-input-hover", + x => neutralFillInput(x).hover, + FASTDesignSystemProvider.findProvider +); +export const neutralFillInputActiveBehavior = cssCustomPropertyBehaviorFactory( + "neutral-fill-input-active", + x => neutralFillInput(x).active, + FASTDesignSystemProvider.findProvider +); +export const neutralFillInputFocusBehavior = cssCustomPropertyBehaviorFactory( + "neutral-fill-input-focus", + x => neutralFillInput(x).focus, + FASTDesignSystemProvider.findProvider +); +export const accentFillRestBehavior = cssCustomPropertyBehaviorFactory( + "accent-fill-rest", + x => accentFill(x).rest, + FASTDesignSystemProvider.findProvider +); +export const accentFillHoverBehavior = cssCustomPropertyBehaviorFactory( + "accent-fill-hover", + x => accentFill(x).hover, + FASTDesignSystemProvider.findProvider +); +export const accentFillActiveBehavior = cssCustomPropertyBehaviorFactory( + "accent-fill-active", + x => accentFill(x).active, + FASTDesignSystemProvider.findProvider +); +export const accentFillFocusBehavior = cssCustomPropertyBehaviorFactory( + "accent-fill-focus", + x => accentFill(x).focus, + FASTDesignSystemProvider.findProvider +); +export const accentFillSelectedBehavior = cssCustomPropertyBehaviorFactory( + "accent-fill-selected", + x => accentFill(x).selected, + FASTDesignSystemProvider.findProvider +); +export const accentFillLargeRestBehavior = cssCustomPropertyBehaviorFactory( + "accent-fill-large-rest", + x => accentFillLarge(x).rest, + FASTDesignSystemProvider.findProvider +); +export const accentFillLargeHoverBehavior = cssCustomPropertyBehaviorFactory( + "accent-fill-large-hover", + x => accentFillLarge(x).hover, + FASTDesignSystemProvider.findProvider +); +export const accentFillLargeActiveBehavior = cssCustomPropertyBehaviorFactory( + "accent-fill-large-active", + x => accentFillLarge(x).active, + FASTDesignSystemProvider.findProvider +); +export const accentFillLargeFocusBehavior = cssCustomPropertyBehaviorFactory( + "accent-fill-large-focus", + x => accentFillLarge(x).focus, + FASTDesignSystemProvider.findProvider +); +export const accentFillLargeSelectedBehavior = cssCustomPropertyBehaviorFactory( + "accent-fill-large-selected", + x => accentFillLarge(x).selected, + FASTDesignSystemProvider.findProvider +); +export const neutralFillCardRestBehavior = cssCustomPropertyBehaviorFactory( + "neutral-fill-card-rest", + x => neutralFillCard(x), + FASTDesignSystemProvider.findProvider +); +export const neutralOutlineRestBehavior = cssCustomPropertyBehaviorFactory( + "neutral-outline-rest", + x => neutralOutline(x).rest, + FASTDesignSystemProvider.findProvider +); +export const neutralOutlineHoverBehavior = cssCustomPropertyBehaviorFactory( + "neutral-outline-hover", + x => neutralOutline(x).hover, + FASTDesignSystemProvider.findProvider +); +export const neutralOutlineActiveBehavior = cssCustomPropertyBehaviorFactory( + "neutral-outline-active", + x => neutralOutline(x).active, + FASTDesignSystemProvider.findProvider +); +export const neutralOutlineFocusBehavior = cssCustomPropertyBehaviorFactory( + "neutral-outline-focus", + x => neutralOutline(x).focus, + FASTDesignSystemProvider.findProvider +); +export const neutralDividerRestBehavior = cssCustomPropertyBehaviorFactory( + "neutral-divider-rest", + neutralDividerRest, + FASTDesignSystemProvider.findProvider +); +export const neutralLayerFloatingBehavior = cssCustomPropertyBehaviorFactory( + "neutral-layer-floating", + neutralLayerFloating, + FASTDesignSystemProvider.findProvider +); +export const neutralLayerCardBehavior = cssCustomPropertyBehaviorFactory( + "neutral-layer-card", + neutralLayerCard, + FASTDesignSystemProvider.findProvider +); +export const neutralLayerCardContainerBehavior = cssCustomPropertyBehaviorFactory( + "neutral-layer-card-container", + neutralLayerCardContainer, + FASTDesignSystemProvider.findProvider +); +export const neutralLayerL1Behavior = cssCustomPropertyBehaviorFactory( + "neutral-layer-l1", + neutralLayerL1, + FASTDesignSystemProvider.findProvider +); +export const neutralLayerL1AltBehavior = cssCustomPropertyBehaviorFactory( + "neutral-layer-l1-alt", + neutralLayerL1Alt, + FASTDesignSystemProvider.findProvider +); +export const neutralLayerL2Behavior = cssCustomPropertyBehaviorFactory( + "neutral-layer-l2", + neutralLayerL2, + FASTDesignSystemProvider.findProvider +); +export const neutralLayerL3Behavior = cssCustomPropertyBehaviorFactory( + "neutral-layer-l3", + neutralLayerL3, + FASTDesignSystemProvider.findProvider +); +export const neutralLayerL4Behavior = cssCustomPropertyBehaviorFactory( + "neutral-layer-l4", + neutralLayerL4, + FASTDesignSystemProvider.findProvider +); +export const neutralFocusBehavior = cssCustomPropertyBehaviorFactory( + "neutral-focus", + neutralFocus, + FASTDesignSystemProvider.findProvider +); +export const neutralFocusInnerAccentBehavior = cssCustomPropertyBehaviorFactory( + "neutral-focus-inner-accent", + neutralFocusInnerAccent(accentBaseColor), + FASTDesignSystemProvider.findProvider +); diff --git a/packages/web-components/fast-components-msft/src/styles/elevation.ts b/packages/web-components/fast-components-msft/src/styles/elevation.ts new file mode 100644 index 00000000000..488ed8e27ab --- /dev/null +++ b/packages/web-components/fast-components-msft/src/styles/elevation.ts @@ -0,0 +1,13 @@ +/** + * Define shadow algorithms. + * + * TODO: The --background-luminance will need to be derived from JavaScript. For now + * this is hard-coded to a 1, the relative luminance of pure white. + * https://github.com/microsoft/fast-dna/issues/2778 + */ +export const ambientShadow = + "0 0 calc((var(--elevation) * 0.225px) + 2px) rgba(0, 0, 0, calc(.11 * (2 - var(--background-luminance, 1))))"; +export const directionalShadow = + "0 calc(var(--elevation) * 0.4px) calc((var(--elevation) * 0.9px)) rgba(0, 0, 0, calc(.13 * (2 - var(--background-luminance, 1))))"; + +export const elevation = `box-shadow: ${ambientShadow}, ${directionalShadow};`; diff --git a/packages/web-components/fast-components-msft/src/styles/index.ts b/packages/web-components/fast-components-msft/src/styles/index.ts new file mode 100644 index 00000000000..c98b0dba868 --- /dev/null +++ b/packages/web-components/fast-components-msft/src/styles/index.ts @@ -0,0 +1,4 @@ +export * from "./behaviors"; +export * from "./elevation"; +export * from "./patterns/"; +export * from "./size"; diff --git a/packages/web-components/fast-components-msft/src/styles/patterns/button.ts b/packages/web-components/fast-components-msft/src/styles/patterns/button.ts new file mode 100644 index 00000000000..03ae0785778 --- /dev/null +++ b/packages/web-components/fast-components-msft/src/styles/patterns/button.ts @@ -0,0 +1,200 @@ +import { css } from "@microsoft/fast-element"; +import { display, focusVisible } from "@microsoft/fast-foundation"; +import { heightNumber } from "../size"; + +export const BaseButtonStyles = css` + ${display("inline-block")} :host { + font-family: var(--body-font); + outline: none; + } + + .control { + ${ + /* Font size is temporary - + replace when adaptive typography is figured out */ "" + } font-size: 14px; + line-height: 1; + box-sizing: border-box; + display: inline-flex; + justify-content: center; + align-items: center; + padding: 0 calc((6 + (var(--design-unit) * 2 * var(--density))) * 1px); + height: calc(${heightNumber} * 1px); + min-width: calc(${heightNumber} * 1px); + white-space: nowrap; + outline: none; + text-decoration: none; + cursor: pointer; + border-radius: calc(var(--corner-radius) * 1px); + background-color: var(--neutral-fill-rest); + color: var(--neutral-foreground-rest); + fill: var(--neutral-foreground-rest); + border: calc(var(--outline-width) * 1px) solid transparent; + } + + .control:hover { + background-color: var(--neutral-fill-hover); + } + + .control:active { + background-color: var(--neutral-fill-active); + } + + .control:${focusVisible} { + border: calc(var(--outline-width) * 1px) solid var(--neutral-focus); + box-shadow: 0 0 0 calc((var(--focus-outline-width) - var(--outline-width)) * 1px) var(--neutral-focus); + } + + .control::-moz-focus-inner { + border: 0; + } + + :host(.disabled) { + opacity: var(--disabled-opacity); + } + + .start, + .end, + ::slotted(svg) { + ${ + /* Glyph size and margin-left is temporary - + replace when adaptive typography is figured out */ "" + } width: 16px; + height: 16px; + } + + .start { + margin-inline-end: 11px; + } + + .end { + margin-inline-start: 11px; + } +`; + +export const AccentButtonStyles = css` + :host(.accent) .control { + background: var(--accent-fill-rest); + color: var(--accent-foreground-cut-rest); + } + + :host(.accent) .control:hover { + background: var(--accent-fill-hover); + } + + :host(.accent) .control:active { + background: var(--accent-fill-active); + } + + :host(.accent) .control:${focusVisible} { + box-shadow: 0 0 0 calc(var(--focus-outline-width) * 1px) inset var(--neutral-focus-inner-accent); + } +`; + +export const HypertextStyles = css` + :host(.hypertext) .control { + padding: 0; + height: auto; + border: none; + box-shadow: none; + border-radius: 0; + } + + :host a.control:not(:link) { + background-color: transparent; + cursor: default; + } + + :host(.hypertext) .control:link, + :host(.hypertext) .control:visited { + background: transparent; + color: var(--accent-foreground-rest); + border-bottom: calc(var(--outline-width) * 1px) solid var(--accent-foreground-rest); + } + + :host(.hypertext) .control:hover { + border-bottom-color: var(--accent-foreground-hover); + } + + :host(.hypertext) .control:active { + border-bottom-color: var(--accent-foreground-active); + } + + :host(.hypertext) .control:${focusVisible} { + border-bottom: calc(var(--focus-outline-width) * 1px) solid var(--neutral-focus); + } +`; + +export const LightweightButtonStyles = css` + :host(.lightweight) .control { + padding: 0; + border: none; + box-shadow: none; + border-radius: 0; + background: transparent; + color: var(--accent-foreground-rest); + } + + :host(.lightweight) .control:hover { + color: var(--accent-foreground-hover); + } + + :host(.lightweight) .control:active { + color: var(--accent-foreground-active); + } + + :host(.lightweight) .content { + position: relative; + } + + :host(.lightweight) .content::before { + content: ""; + display: block; + height: calc(var(--outline-width) * 1px); + position: absolute; + bottom: -3px; + width: 100%; + } + + :host(.lightweight) .control:hover .content::before { + background: var(--accent-foreground-hover); + } + + :host(.lightweight) .control:active .content::before { + background: var(--accent-foreground-active); + } + + :host(.lightweight) .control:${focusVisible} .content::before { + background: var(--neutral-foreground-rest); + height: calc(var(--focus-outline-width) * 1px); + } +`; + +export const OutlineButtonStyles = css` + :host(.outline) .control { + background: transparent; + border-color: var(--neutral-outline-rest); + } + + :host(.outline) .control:hover { + border-color: var(--neutral-outline-hover); + } + + :host(.outline) .control:active { + border-color: var(--neutral-outline-active); + } +`; + +export const StealthButtonStyles = css` + :host(.stealth) .control { + background: var(--neutral-fill-stealth-rest); + } + + :host(.stealth) .control:hover { + background: var(--neutral-fill-stealth-hover); + } + + :host(.stealth) .control:active { + background: var(--neutral-fill-stealth-active); + } +`; diff --git a/packages/web-components/fast-components-msft/src/styles/patterns/index.ts b/packages/web-components/fast-components-msft/src/styles/patterns/index.ts new file mode 100644 index 00000000000..98d55acde68 --- /dev/null +++ b/packages/web-components/fast-components-msft/src/styles/patterns/index.ts @@ -0,0 +1 @@ +export * from "./button"; diff --git a/packages/web-components/fast-components-msft/src/styles/size.ts b/packages/web-components/fast-components-msft/src/styles/size.ts new file mode 100644 index 00000000000..9fa9b90fa84 --- /dev/null +++ b/packages/web-components/fast-components-msft/src/styles/size.ts @@ -0,0 +1,2 @@ +export const heightNumber = + "(var(--base-height-multiplier) + var(--density)) * var(--design-unit)"; diff --git a/packages/web-components/fast-components-msft/src/switch/fixtures/switch.html b/packages/web-components/fast-components-msft/src/switch/fixtures/switch.html new file mode 100644 index 00000000000..c8081909e6a --- /dev/null +++ b/packages/web-components/fast-components-msft/src/switch/fixtures/switch.html @@ -0,0 +1,47 @@ + +

Switch

+

Default

+
+ + + Dark Mode + + + New Feature + On + Off + + + Theme + Dark + Light + +
+ +

Checked

+ + + +

Required

+ + + +

Disabled

+
+ + label + checked + + checked + On + Off + +
+ +

Inline

+ Light Speed + Ridiculous Speed + Ludicrous Speed + Plaid Speed + + \ No newline at end of file diff --git a/packages/web-components/fast-components-msft/src/switch/index.ts b/packages/web-components/fast-components-msft/src/switch/index.ts new file mode 100644 index 00000000000..a88348c7af1 --- /dev/null +++ b/packages/web-components/fast-components-msft/src/switch/index.ts @@ -0,0 +1,10 @@ +import { customElement } from "@microsoft/fast-element"; +import { Switch, SwitchTemplate as template } from "@microsoft/fast-foundation"; +import { SwitchStyles as styles } from "./switch.styles"; + +@customElement({ + name: "fast-switch", + template, + styles, +}) +export class FASTSwitch extends Switch {} diff --git a/packages/web-components/fast-components-msft/src/switch/switch.stories.ts b/packages/web-components/fast-components-msft/src/switch/switch.stories.ts new file mode 100644 index 00000000000..f448a64a9f3 --- /dev/null +++ b/packages/web-components/fast-components-msft/src/switch/switch.stories.ts @@ -0,0 +1,13 @@ +import { FASTDesignSystemProvider } from "../design-system-provider"; +import Examples from "./fixtures/switch.html"; +import { FASTSwitch } from "./"; + +// Prevent tree-shaking +FASTSwitch; +FASTDesignSystemProvider; + +export default { + title: "Switch", +}; + +export const Switch = () => Examples; diff --git a/packages/web-components/fast-components-msft/src/switch/switch.styles.ts b/packages/web-components/fast-components-msft/src/switch/switch.styles.ts new file mode 100644 index 00000000000..662f501b934 --- /dev/null +++ b/packages/web-components/fast-components-msft/src/switch/switch.styles.ts @@ -0,0 +1,185 @@ +import { css } from "@microsoft/fast-element"; +import { SystemColors } from "@microsoft/fast-web-utilities"; +import { + disabledCursor, + display, + focusVisible, + forcedColorsStylesheetBehavior, +} from "@microsoft/fast-foundation"; +import { + accentFillRestBehavior, + accentForegroundCutRestBehavior, + heightNumber, + neutralFillInputActiveBehavior, + neutralFillInputHoverBehavior, + neutralFillInputRestBehavior, + neutralForegroundRestBehavior, + neutralOutlineActiveBehavior, + neutralOutlineHoverBehavior, + neutralOutlineRestBehavior, +} from "../styles"; + +export const SwitchStyles = css` + :host([hidden]) { + display: none; + } + + ${display("inline-flex")} :host { + align-items: center; + outline: none; + margin: calc(var(--design-unit) * 1px) 0; + ${ + /* + * Chromium likes to select label text or the default slot when + * the checkbox is clicked. Maybe there is a better solution here? + */ "" + } user-select: none; + } + + :host(.disabled) { + opacity: var(--disabled-opacity); + } + + :host(.disabled) .label, + :host(.readonly) .label, + :host(.readonly) .switch, + :host(.disabled) .switch { + cursor: ${disabledCursor}; + } + + .switch { + position: relative; + outline: none; + box-sizing: border-box; + width: calc(((${heightNumber} / 2) + var(--design-unit)) * 2px); + height: calc(((${heightNumber} / 2) + var(--design-unit)) * 1px); + background: var(--neutral-fill-input-rest); + border-radius: calc(${heightNumber} * 1px); + border: calc(var(--outline-width) * 1px) solid var(--neutral-outline-rest); + } + + .switch:hover { + cursor: pointer; + } + + .switch:hover { + background: var(--neutral-fill-input-hover); + border-color: var(--neutral-outline-hover); + } + + .switch:active { + background: var(--neutral-fill-input-active); + border-color: var(--neutral-outline-active); + } + + :host(:${focusVisible}) .switch { + box-shadow: 0 0 0 1px var(--neutral-focus) inset; + border-color: var(--neutral-focus); + } + + .checked-indicator { + position: absolute; + height: calc((${heightNumber} - (var(--design-unit) * 5.5)) * 1px); + width: calc((${heightNumber} - (var(--design-unit) * 5.5)) * 1px); + top: calc(var(--design-unit) * 1px); + left: calc(var(--design-unit) * 1px); + background: var(--neutral-foreground-rest); + border-radius: 50%; + transition: all 0.2s ease-in-out; + } + + .status-message { + font-family: var(--body-font); + color: var(--neutral-foreground-rest); + cursor: pointer; + ${ + /* Font size is temporary - replace when adaptive typography is figured out */ "" + } font-size: calc(1rem + (var(--density) * 2px)); + } + + .label { + color: var(--neutral-foreground-rest); + + ${ + /* Need to discuss with Brian how HorizontalSpacingNumber can work. https://github.com/microsoft/fast-dna/issues/2766 */ "" + } margin-inline-end: calc(var(--design-unit) * 2px + 2px); + } + + ::slotted(*) { + ${ + /* Need to discuss with Brian how HorizontalSpacingNumber can work. https://github.com/microsoft/fast-dna/issues/2766 */ "" + } margin-inline-start: calc(var(--design-unit) * 2px + 2px); + } + + :host(.checked) .checked-indicator { + left: calc((((${heightNumber} / 2) + var(--design-unit)) + var(--design-unit)) * 1px); + background: var(--accent-foreground-cut-rest); + } + + :host(.checked) .switch { + background: var(--accent-fill-rest); + } + + .unchecked-message { + display: block; + } + + .checked-message { + display: none; + } + + :host(.checked) .unchecked-message { + display: none; + } + + :host(.checked) .checked-message { + display: block; + } +`.withBehaviors( + accentFillRestBehavior, + accentForegroundCutRestBehavior, + neutralFillInputActiveBehavior, + neutralFillInputHoverBehavior, + neutralFillInputRestBehavior, + neutralForegroundRestBehavior, + neutralOutlineActiveBehavior, + neutralOutlineHoverBehavior, + neutralOutlineRestBehavior, + forcedColorsStylesheetBehavior( + css` + .checked-indicator { + forced-color-adjust: none; + background: ${SystemColors.FieldText}; + } + .switch, .switch:hover, .switch:active { + forced-color-adjust: none; + background: ${SystemColors.Field}; + border-color: ${SystemColors.FieldText}; + } + :host(.checked) .switch { + background: ${SystemColors.Highlight}; + border-color: ${SystemColors.Highlight}; + } + :host(.checked) .checked-indicator { + background: ${SystemColors.HighlightText}; + } + :host(.disabled) { + opacity: 1; + } + :host(:${focusVisible}) .switch { + border-color: ${SystemColors.Highlight}; + } + :host(.checked:${focusVisible}) .switch { + border-color: ${SystemColors.FieldText}; + box-shadow: 0 0 0 2px ${SystemColors.Field} inset; + } + :host(.disabled) .checked-indicator { + background: ${SystemColors.GrayText}; + } + :host(.disabled) .switch { + background: ${SystemColors.Field}; + border-color: ${SystemColors.GrayText}; + } + ` + ) +); diff --git a/packages/web-components/fast-components-msft/src/tabs/fixtures/tabs.html b/packages/web-components/fast-components-msft/src/tabs/fixtures/tabs.html new file mode 100644 index 00000000000..ece5d5c72ae --- /dev/null +++ b/packages/web-components/fast-components-msft/src/tabs/fixtures/tabs.html @@ -0,0 +1,115 @@ + +

Tabs

+

Default

+ + Tab one + Tab two + Tab three + + Tab one content. This is for testing. + + + Tab two content. This is for testing. + + + Tab three content. This is for testing. + +
Testing
+ +

Vertical

+ + Tab one + Tab two + Tab three + + Tab one content. This is for testing. + + + Tab two content. This is for testing. + + + Tab three content. This is for testing. + + +

Suplemental content

+ +
+ + + +
+
+ + + +
+ Tab one + Tab two + Tab three + + Tab one content. This is for testing. + + + Tab two content. This is for testing. + + + Tab three content. This is for testing. + + +

Suplemental content - Vertical

+ +
+ + + +
+
+ + + +
+ Tab one + Tab two + Tab three + + Tab one content. This is for testing. + + + Tab two content. This is for testing. + + + Tab three content. This is for testing. + + +

No active indicator

+ + Tab one + Tab two + Tab three + + Tab one content. This is for testing. + + + Tab two content. This is for testing. + + + Tab three content. This is for testing. + + +

No active indicator - Vertical

+ + Tab one + Tab two + Tab three + + Tab one content. This is for testing. + + + Tab two content. This is for testing. + + + Tab three content. This is for testing. + + + + \ No newline at end of file diff --git a/packages/web-components/fast-components-msft/src/tabs/index.ts b/packages/web-components/fast-components-msft/src/tabs/index.ts new file mode 100644 index 00000000000..4d888504ea9 --- /dev/null +++ b/packages/web-components/fast-components-msft/src/tabs/index.ts @@ -0,0 +1,12 @@ +import { customElement } from "@microsoft/fast-element"; +import { Tabs, TabsTemplate as template } from "@microsoft/fast-foundation"; +import { TabsStyles as styles } from "./tabs.styles"; + +@customElement({ + name: "fast-tabs", + template, + styles, +}) +export class FASTTabs extends Tabs {} +export * from "./tab/"; +export * from "./tab-panel/"; diff --git a/packages/web-components/fast-components-msft/src/tabs/tab-panel/index.ts b/packages/web-components/fast-components-msft/src/tabs/tab-panel/index.ts new file mode 100644 index 00000000000..021baa40986 --- /dev/null +++ b/packages/web-components/fast-components-msft/src/tabs/tab-panel/index.ts @@ -0,0 +1,10 @@ +import { customElement } from "@microsoft/fast-element"; +import { TabPanel, TabPanelTemplate as template } from "@microsoft/fast-foundation"; +import { TabPanelStyles as styles } from "./tab-panel.styles"; + +@customElement({ + name: "fast-tab-panel", + template, + styles, +}) +export class FASTTabPanel extends TabPanel {} diff --git a/packages/web-components/fast-components-msft/src/tabs/tab-panel/tab-panel.styles.ts b/packages/web-components/fast-components-msft/src/tabs/tab-panel/tab-panel.styles.ts new file mode 100644 index 00000000000..b75fad04793 --- /dev/null +++ b/packages/web-components/fast-components-msft/src/tabs/tab-panel/tab-panel.styles.ts @@ -0,0 +1,14 @@ +import { css } from "@microsoft/fast-element"; +import { display } from "@microsoft/fast-foundation"; + +export const TabPanelStyles = css` + ${display("flex")} :host { + box-sizing: border-box; + font-family: var(--body-font); + ${/* Font size, weight, and line height are temporary - + replace when adaptive typography is figured out */ ""} font-size: 12px; + font-weight: 400; + line-height: 18px; + padding: 0 calc((6 + (var(--design-unit) * 2 * var(--density))) * 1px); + } +`; diff --git a/packages/web-components/fast-components-msft/src/tabs/tab/index.ts b/packages/web-components/fast-components-msft/src/tabs/tab/index.ts new file mode 100644 index 00000000000..d19777c7797 --- /dev/null +++ b/packages/web-components/fast-components-msft/src/tabs/tab/index.ts @@ -0,0 +1,10 @@ +import { customElement } from "@microsoft/fast-element"; +import { Tab, TabTemplate as template } from "@microsoft/fast-foundation"; +import { TabStyles as styles } from "./tab.styles"; + +@customElement({ + name: "fast-tab", + template, + styles, +}) +export class FASTTab extends Tab {} diff --git a/packages/web-components/fast-components-msft/src/tabs/tab/tab.styles.ts b/packages/web-components/fast-components-msft/src/tabs/tab/tab.styles.ts new file mode 100644 index 00000000000..7613a109c2e --- /dev/null +++ b/packages/web-components/fast-components-msft/src/tabs/tab/tab.styles.ts @@ -0,0 +1,100 @@ +import { css } from "@microsoft/fast-element"; +import { SystemColors } from "@microsoft/fast-web-utilities"; +import { + display, + focusVisible, + forcedColorsStylesheetBehavior, +} from "@microsoft/fast-foundation"; +import { + heightNumber, + neutralFocusBehavior, + neutralForegroundActiveBehavior, + neutralForegroundHoverBehavior, + neutralForegroundRestBehavior, +} from "../../styles"; + +export const TabStyles = css` + ${display("inline-flex")} :host { + box-sizing: border-box; + font-family: var(--body-font); + ${ + /* Font size, weight, and line height are temporary - + replace when adaptive typography is figured out */ "" + } font-size: 12px; + font-weight: 400; + line-height: 18px; + height: calc(${heightNumber} * 1px); + padding: 0 calc((6 + (var(--design-unit) * 2 * var(--density))) * 1px); + color: var(--neutral-foreground-rest); + border-radius: calc(var(--corner-radius) * 1px); + border: calc(var(--outline-width) * 1px) solid transparent; + align-items: center; + justify-content: center; + grid-row: 1; + } + + :host([aria-selected="true"]) { + z-index: 2; + } + + :host(:hover) { + color: var(--neutral-foreground-hover); + } + + :host(:active) { + color: var(--neutral-foreground-active); + } + + :host(:${focusVisible}) { + outline: none; + border: calc(var(--outline-width) * 1px) solid var(--neutral-focus); + box-shadow: 0 0 0 calc((var(--focus-outline-width) - var(--outline-width)) * 1px) + var(--neutral-focus); + } + + :host(:focus) { + outline: none; + } + + :host(.vertical) { + justify-content: end; + grid-column: 2 + } + + :host(.vertical[aria-selected="true"]) { + z-index: 2; + } + + :host(.vertical:hover) { + color: var(--neutral-foreground-hover); + } + + :host(.vertical:active) { + color: var(--neutral-foreground-active); + } + + :host(.vertical:hover[aria-selected="true"]) { + } +`.withBehaviors( + neutralFocusBehavior, + neutralForegroundRestBehavior, + neutralForegroundHoverBehavior, + neutralForegroundActiveBehavior, + forcedColorsStylesheetBehavior( + css` + :host { + forced-color-adjust: none; + border-color: transparent; + color: ${SystemColors.ButtonText}; + } + :host(:hover), + :host(.vertical:hover) { + color: ${SystemColors.ButtonText}; + } + :host(:${focusVisible}) { + border-color: ${SystemColors.ButtonText}; + box-shadow: none; + } + ` + ) +); diff --git a/packages/web-components/fast-components-msft/src/tabs/tabs.stories.ts b/packages/web-components/fast-components-msft/src/tabs/tabs.stories.ts new file mode 100644 index 00000000000..afc096b1a9b --- /dev/null +++ b/packages/web-components/fast-components-msft/src/tabs/tabs.stories.ts @@ -0,0 +1,17 @@ +import { FASTDesignSystemProvider } from "../design-system-provider"; +import Examples from "./fixtures/tabs.html"; +import { FASTTab } from "./tab"; +import { FASTTabPanel } from "./tab-panel"; +import { FASTTabs } from "./"; + +// Prevent tree-shaking +FASTTab; +FASTTabPanel; +FASTTabs; +FASTDesignSystemProvider; + +export default { + title: "Tabs", +}; + +export const Base = () => Examples; diff --git a/packages/web-components/fast-components-msft/src/tabs/tabs.styles.ts b/packages/web-components/fast-components-msft/src/tabs/tabs.styles.ts new file mode 100644 index 00000000000..d87bcb23c82 --- /dev/null +++ b/packages/web-components/fast-components-msft/src/tabs/tabs.styles.ts @@ -0,0 +1,109 @@ +import { css } from "@microsoft/fast-element"; +import { SystemColors } from "@microsoft/fast-web-utilities"; +import { display, forcedColorsStylesheetBehavior } from "@microsoft/fast-foundation"; +import { accentFillRestBehavior, neutralForegroundRestBehavior } from "../styles"; + +export const TabsStyles = css` + ${display("grid")} :host { + box-sizing: border-box; + font-family: var(--body-font); + ${/* Font size, weight, and line height are temporary - + replace when adaptive typography is figured out */ ""} font-size: 12px; + font-weight: 400; + line-height: 18px; + color: var(--neutral-foreground-rest); + grid-template-columns: auto 1fr auto; + grid-template-rows: auto 1fr; + } + + .tablist { + display: grid; + grid-template-rows: auto auto; + grid-template-columns: auto; + position: relative; + width: max-content; + align-self: end; + } + + .start { + padding: 2px; + } + + .end { + padding: 2px; + } + + .activeIndicator { + grid-row: 2; + grid-column: 1; + width: 20px; + height: 3px; + border-radius: calc(var(--corner-radius) * 1px); + justify-self: center; + background: var(--accent-fill-rest); + } + + .activeIndicatorTransition { + transition: transform 0.2s ease-in-out; + } + + .tabpanel { + grid-row: 2; + grid-column-start: 1; + grid-column-end: 4; + position: relative; + } + + :host(.vertical) { + grid-template-rows: auto 1fr auto; + grid-template-columns: auto 1fr; + } + + :host(.vertical) .tablist { + grid-row-start: 2; + grid-row-end: 2; + display: grid; + grid-template-rows: auto; + grid-template-columns: auto 1fr; + position: relative; + width: max-content; + justify-self: end; + width: 100%; + } + + :host(.vertical) .tabpanel { + grid-column: 2; + grid-row-start: 1; + grid-row-end: 4; + } + + :host(.vertical) .end { + grid-row: 3; + } + + :host(.vertical) .activeIndicator { + grid-column: 1; + grid-row: 1; + width: 3px; + height: 20px; + border-radius: calc(var(--corner-radius) * 1px); + align-self: center; + background: var(--accent-fill-rest); + } + + :host(.vertical) .activeIndicatorTransition { + transition: transform 0.2s linear; + } +`.withBehaviors( + accentFillRestBehavior, + neutralForegroundRestBehavior, + forcedColorsStylesheetBehavior( + css` + .activeIndicator, + :host(.vertical) .activeIndicator { + forced-color-adjust: none; + background: ${SystemColors.Highlight}; + } + ` + ) +); diff --git a/packages/web-components/fast-components-msft/src/text-area/fixtures/text-area.html b/packages/web-components/fast-components-msft/src/text-area/fixtures/text-area.html new file mode 100644 index 00000000000..80f5b2723bf --- /dev/null +++ b/packages/web-components/fast-components-msft/src/text-area/fixtures/text-area.html @@ -0,0 +1,83 @@ + +

Text area

+

Default

+ + + label + + +

Placeholder

+ + + +

Required

+ + + +

Disabled

+ + + label + + + + +

Read only

+ + label + + +

Autofocus

+ autofocus + + +

Resize

+
Both
+ resize both + +
Horizontal
+ resize horizontal + +
Vertical
+ resize vertical + +

Filled

+
Default
+ + + label + + +
Placeholder
+ + + +
Required
+ + + +
Disabled
+ + + label + + + + +
Read only
+ label + label + + +

Visual vs audio label

+ + Visible label + + + +

Audio label only

+ + + + + \ No newline at end of file diff --git a/packages/web-components/fast-components-msft/src/text-area/index.ts b/packages/web-components/fast-components-msft/src/text-area/index.ts new file mode 100644 index 00000000000..a8b678d68e2 --- /dev/null +++ b/packages/web-components/fast-components-msft/src/text-area/index.ts @@ -0,0 +1,10 @@ +import { customElement } from "@microsoft/fast-element"; +import { TextAreaTemplate as template, TextArea } from "@microsoft/fast-foundation"; +import { TextAreaStyles as styles } from "./text-area.styles"; + +@customElement({ + name: "fast-text-area", + template, + styles, +}) +export class FASTTextArea extends TextArea {} diff --git a/packages/web-components/fast-components-msft/src/text-area/text-area.stories.ts b/packages/web-components/fast-components-msft/src/text-area/text-area.stories.ts new file mode 100644 index 00000000000..46eb78f68cd --- /dev/null +++ b/packages/web-components/fast-components-msft/src/text-area/text-area.stories.ts @@ -0,0 +1,13 @@ +import { FASTDesignSystemProvider } from "../design-system-provider"; +import Examples from "./fixtures/text-area.html"; +import { FASTTextArea } from "./"; + +// Prevent tree-shaking +FASTTextArea; +FASTDesignSystemProvider; + +export default { + title: "Text area", +}; + +export const TextArea = () => Examples; diff --git a/packages/web-components/fast-components-msft/src/text-area/text-area.styles.ts b/packages/web-components/fast-components-msft/src/text-area/text-area.styles.ts new file mode 100644 index 00000000000..4bce8252b76 --- /dev/null +++ b/packages/web-components/fast-components-msft/src/text-area/text-area.styles.ts @@ -0,0 +1,125 @@ +import { css } from "@microsoft/fast-element"; +import { + disabledCursor, + display, + focusVisible, + forcedColorsStylesheetBehavior, +} from "@microsoft/fast-foundation"; +import { + heightNumber, + neutralFillHoverBehavior, + neutralFillInputHoverBehavior, + neutralFillInputRestBehavior, + neutralFillRestBehavior, + neutralFocusBehavior, + neutralForegroundRestBehavior, + neutralOutlineHoverBehavior, + neutralOutlineRestBehavior, +} from "../styles"; + +export const TextAreaStyles = css` + ${display("inline-block")} :host { + font-family: var(--body-font); + outline: none; + user-select: none; + } + + .control { + box-sizing: border-box; + position: relative; + color: var(--neutral-foreground-rest); + background: var(--neutral-fill-input-rest); + border-radius: calc(var(--corner-radius) * 1px); + border: calc(var(--outline-width) * 1px) solid var(--neutral-outline-rest); + height: calc(${heightNumber} * 2px); + font: inherit; + ${ + /* Font size, weight, and line height are temporary - + replace when adaptive typography is figured out */ "" + } font-size: 14px; + font-weight: 400px; + line-height: 20px; + padding-top: calc(var(--design-unit) * 1.5); + padding-bottom: calc(var(--design-unit) * 1.5); + max-width: 100%; + resize: none; + } + + .control:hover:enabled { + background: var(--neutral-fill-input-hover); + border-color: var(--neutral-outline-hover); + } + + .control:hover, + .control:${focusVisible}, + .control:disabled, + .control:active { + outline: none; + } + + :host(:focus-within) .control { + border-color: var(--neutral-focus); + box-shadow: 0 0 0 1px var(--neutral-focus) inset; + } + + :host(.filled) .control { + background: var(--neutral-fill-rest); + border-color: transparent; + } + + :host(.filled:hover:not([disabled])) .control { + background: var(--neutral-fill-hover); + border-color: transparent; + } + + :host(.resize-both) .control { + resize: both; + } + + :host(.resize-horizontal) .control { + resize: horizontal; + } + + :host(.resize-vertical) .control { + resize: vertical; + } + + .label { + display: block; + color: var(--neutral-foreground-rest); + cursor: pointer; + ${ + /* Font size, weight, and line height temporary - + replace when adaptive typography is figured out */ "" + } font-size: 14px; + font-weight: 400px; + line-height: 20px; + margin-bottom: 4px; + } + + :host([disabled]) .label, + :host([readonly]) .label, + :host([readonly]) .control, + :host([disabled]) .control { + cursor: ${disabledCursor}; + } + :host([disabled]) { + opacity: var(--disabled-opacity); + } +`.withBehaviors( + neutralFillHoverBehavior, + neutralFillInputHoverBehavior, + neutralFillInputRestBehavior, + neutralFillRestBehavior, + neutralFocusBehavior, + neutralForegroundRestBehavior, + neutralOutlineHoverBehavior, + neutralOutlineRestBehavior, + forcedColorsStylesheetBehavior( + css` + :host([disabled]) { + opacity: 1; + } + ` + ) +); diff --git a/packages/web-components/fast-components-msft/src/text-field/fixtures/text-field.html b/packages/web-components/fast-components-msft/src/text-field/fixtures/text-field.html new file mode 100644 index 00000000000..a6fba3aa1d4 --- /dev/null +++ b/packages/web-components/fast-components-msft/src/text-field/fixtures/text-field.html @@ -0,0 +1,92 @@ + +

Text field

+

Default

+ + Label + +

Placeholder

+ + + +

Required

+ + + +

Disabled

+ + label + + + +

Read only

+ + label + + +

Autofocus

+ autofocus + + +

Before Content

+ + + + + + + +

After Content

+ + + + + + +

Filled

+
Default
+ + label + +
Placeholder
+ + + +
Required
+ + + +
Disabled
+ + label + + + +
Read only
+ + label + + +

Visual vs audio label

+ + Visible label + + + +

Audio label only

+ + + + + \ No newline at end of file diff --git a/packages/web-components/fast-components-msft/src/text-field/index.ts b/packages/web-components/fast-components-msft/src/text-field/index.ts new file mode 100644 index 00000000000..0efecfcb240 --- /dev/null +++ b/packages/web-components/fast-components-msft/src/text-field/index.ts @@ -0,0 +1,13 @@ +import { customElement } from "@microsoft/fast-element"; +import { TextFieldTemplate as template, TextField } from "@microsoft/fast-foundation"; +import { TextFieldStyles as styles } from "./text-field.styles"; + +@customElement({ + name: "fast-text-field", + template, + styles, + shadowOptions: { + delegatesFocus: true, + }, +}) +export class FASTTextField extends TextField {} diff --git a/packages/web-components/fast-components-msft/src/text-field/text-field.stories.ts b/packages/web-components/fast-components-msft/src/text-field/text-field.stories.ts new file mode 100644 index 00000000000..785ed00a063 --- /dev/null +++ b/packages/web-components/fast-components-msft/src/text-field/text-field.stories.ts @@ -0,0 +1,13 @@ +import { FASTDesignSystemProvider } from "../design-system-provider"; +import Examples from "./fixtures/text-field.html"; +import { FASTTextField } from "./"; + +// Prevent tree-shaking +FASTTextField; +FASTDesignSystemProvider; + +export default { + title: "Text field", +}; + +export const TextField = () => Examples; diff --git a/packages/web-components/fast-components-msft/src/text-field/text-field.styles.ts b/packages/web-components/fast-components-msft/src/text-field/text-field.styles.ts new file mode 100644 index 00000000000..77a19ec157a --- /dev/null +++ b/packages/web-components/fast-components-msft/src/text-field/text-field.styles.ts @@ -0,0 +1,166 @@ +import { css } from "@microsoft/fast-element"; +import { + disabledCursor, + display, + focusVisible, + forcedColorsStylesheetBehavior, +} from "@microsoft/fast-foundation"; +import { SystemColors } from "@microsoft/fast-web-utilities"; +import { + heightNumber, + neutralFillHoverBehavior, + neutralFillInputHoverBehavior, + neutralFillInputRestBehavior, + neutralFillRestBehavior, + neutralFocusBehavior, + neutralForegroundRestBehavior, + neutralOutlineHoverBehavior, + neutralOutlineRestBehavior, +} from "../styles"; + +export const TextFieldStyles = css` + ${display("inline-block")} :host { + font-family: var(--body-font); + outline: none; + user-select: none; + } + + .root { + box-sizing: border-box; + position: relative; + display: flex; + flex-direction: row; + color: var(--neutral-foreground-rest); + background: var(--neutral-fill-input-rest); + border-radius: calc(var(--corner-radius) * 1px); + border: calc(var(--outline-width) * 1px) solid var(--neutral-outline-rest); + height: calc(${heightNumber} * 1px); + } + + .control { + -webkit-appearance: none; + background: transparent; + border: 0; + padding: 0; + height: calc(100% - 4px); + margin-top: auto; + margin-bottom: auto; + border: none; + padding: 0 calc(var(--design-unit) * 2px + 1px); + color: var(--neutral-foreground-rest); + ${ + /* Font size is temporary - + replace when adaptive typography is figured out */ "" + } font-size: 14px; + line-height: 20px; + } + + .control:hover, + .control:${focusVisible}, + .control:disabled, + .control:active { + outline: none; + } + + .label { + display: block; + color: var(--neutral-foreground-rest); + cursor: pointer; + ${ + /* Font size is temporary - + replace when adaptive typography is figured out */ "" + } font-size: 14px; + margin-bottom: 4px; + } + + .before-content, + .after-content { + ${ + /* Glyph size and margin-left is temporary - + replace when adaptive typography is figured out */ "" + } width: 16px; + height: 16px; + margin: auto; + fill: var(--neutral-foreground-rest); + } + + .before-content { + margin-inline-start: 11px; + } + + .after-content { + margin-inline-end: 11px; + } + + :host(:hover:not(.disabled)) .root { + background: var(--neutral-fill-input-hover); + border-color: var(--neutral-outline-hover); + } + + :host(:focus-within) .root { + border-color: var(--neutral-focus); + box-shadow: 0 0 0 1px var(--neutral-focus) inset; + } + + :host(.filled) .root { + background: var(--neutral-fill-rest); + border-color: transparent; + } + + :host(.filled:hover:not(.disabled)) .root { + background: var(--neutral-fill-hover); + border-color: transparent; + } + + :host(.disabled) .label, + :host(.readonly) .label, + :host(.readonly) .control, + :host(.disabled) .control { + cursor: ${disabledCursor}; + } + + :host(.disabled) { + opacity: var(--disabled-opacity); + } +`.withBehaviors( + neutralFillHoverBehavior, + neutralFillInputHoverBehavior, + neutralFillInputRestBehavior, + neutralFillRestBehavior, + neutralFocusBehavior, + neutralForegroundRestBehavior, + neutralOutlineHoverBehavior, + neutralOutlineRestBehavior, + forcedColorsStylesheetBehavior( + css` + .root, + :host(.filled) .root { + forced-color-adjust: none; + background: ${SystemColors.Field}; + border-color: ${SystemColors.FieldText}; + } + :host(:hover:not(.disabled)) .root, + :host(.filled:hover:not(.disabled)) .root, + :host(.filled:hover) .root { + background: ${SystemColors.Field}; + border-color: ${SystemColors.Highlight}; + } + .before-content, + .after-content { + fill: ${SystemColors.ButtonText}; + } + :host(.disabled) { + opacity: 1; + } + :host(.disabled) .root, + :host(.filled:hover.disabled) .root { + border-color: ${SystemColors.GrayText}; + background: ${SystemColors.Field}; + } + :host(:focus-within) .root { + border-color: ${SystemColors.Highlight}; + box-shadow: 0 0 0 1px ${SystemColors.Highlight} inset; + } + ` + ) +); diff --git a/packages/web-components/fast-components-msft/tsconfig.build.json b/packages/web-components/fast-components-msft/tsconfig.build.json new file mode 100644 index 00000000000..fd07bb7b611 --- /dev/null +++ b/packages/web-components/fast-components-msft/tsconfig.build.json @@ -0,0 +1,7 @@ +{ + "extends": "./tsconfig.json", + "exclude": [ + "**/*.stories.ts", + "./src/storybook-typings.d.ts" + ] +} \ No newline at end of file diff --git a/packages/web-components/fast-components-msft/tsconfig.json b/packages/web-components/fast-components-msft/tsconfig.json new file mode 100644 index 00000000000..c2ed092f081 --- /dev/null +++ b/packages/web-components/fast-components-msft/tsconfig.json @@ -0,0 +1,18 @@ +{ + "extends": "../../../tsconfig.json", + "compilerOptions": { + "outDir": "dist", + "baseUrl": ".", + "strictNullChecks": true, + "experimentalDecorators": true, + "target": "ES6", + "module": "ESNext", + }, + "include": [ + "src/**/*" + ], + "exclude": [ + "node_modules", + "**/*.spec.ts" + ] +} \ No newline at end of file diff --git a/packages/web-components/fast-components/src/anchor/anchor.styles.ts b/packages/web-components/fast-components/src/anchor/anchor.styles.ts index ba0d47ae9d2..d28388b60d6 100644 --- a/packages/web-components/fast-components/src/anchor/anchor.styles.ts +++ b/packages/web-components/fast-components/src/anchor/anchor.styles.ts @@ -1,13 +1,6 @@ import { css } from "@microsoft/fast-element"; import { AccentButtonStyles, - BaseButtonStyles, - HypertextStyles, - LightweightButtonStyles, - OutlineButtonStyles, - StealthButtonStyles, -} from "../styles"; -import { accentFillActiveBehavior, accentFillHoverBehavior, accentFillRestBehavior, @@ -15,6 +8,9 @@ import { accentForegroundCutRestBehavior, accentForegroundHoverBehavior, accentForegroundRestBehavior, + BaseButtonStyles, + HypertextStyles, + LightweightButtonStyles, neutralFillActiveBehavior, neutralFillFocusBehavior, neutralFillHoverBehavior, @@ -28,7 +24,9 @@ import { neutralOutlineActiveBehavior, neutralOutlineHoverBehavior, neutralOutlineRestBehavior, -} from "../styles/recipes"; + OutlineButtonStyles, + StealthButtonStyles, +} from "../styles"; export const AnchorStyles = css` ${BaseButtonStyles} diff --git a/packages/web-components/fast-components/src/badge/badge.styles.ts b/packages/web-components/fast-components/src/badge/badge.styles.ts index 147c404dbe9..c3d8e818e1c 100644 --- a/packages/web-components/fast-components/src/badge/badge.styles.ts +++ b/packages/web-components/fast-components/src/badge/badge.styles.ts @@ -1,6 +1,6 @@ import { css } from "@microsoft/fast-element"; -import { display } from "../styles"; -import { heightNumber } from "../styles/size"; +import { display } from "@microsoft/fast-foundation"; +import { heightNumber } from "../styles"; export const BadgeStyles = css` ${display("inline-block")} :host { diff --git a/packages/web-components/fast-components/src/button/button.styles.ts b/packages/web-components/fast-components/src/button/button.styles.ts index 205784ad228..d066a29235d 100644 --- a/packages/web-components/fast-components/src/button/button.styles.ts +++ b/packages/web-components/fast-components/src/button/button.styles.ts @@ -1,17 +1,12 @@ import { css } from "@microsoft/fast-element"; -import { forcedColorsStylesheetBehavior } from "@microsoft/fast-foundation"; -import { SystemColors } from "@microsoft/fast-web-utilities"; import { - AccentButtonStyles, - BaseButtonStyles, disabledCursor, focusVisible, - HypertextStyles, - LightweightButtonStyles, - OutlineButtonStyles, - StealthButtonStyles, -} from "../styles"; + forcedColorsStylesheetBehavior, +} from "@microsoft/fast-foundation"; +import { SystemColors } from "@microsoft/fast-web-utilities"; import { + AccentButtonStyles, accentFillActiveBehavior, accentFillHoverBehavior, accentFillRestBehavior, @@ -19,6 +14,9 @@ import { accentForegroundCutRestBehavior, accentForegroundHoverBehavior, accentForegroundRestBehavior, + BaseButtonStyles, + HypertextStyles, + LightweightButtonStyles, neutralFillActiveBehavior, neutralFillFocusBehavior, neutralFillHoverBehavior, @@ -32,7 +30,9 @@ import { neutralOutlineActiveBehavior, neutralOutlineHoverBehavior, neutralOutlineRestBehavior, -} from "../styles/recipes"; + OutlineButtonStyles, + StealthButtonStyles, +} from "../styles"; export const ButtonStyles = css` ${BaseButtonStyles} diff --git a/packages/web-components/fast-components/src/card/card.styles.ts b/packages/web-components/fast-components/src/card/card.styles.ts index 37e5f383d97..1442bb25976 100644 --- a/packages/web-components/fast-components/src/card/card.styles.ts +++ b/packages/web-components/fast-components/src/card/card.styles.ts @@ -1,8 +1,7 @@ import { css } from "@microsoft/fast-element"; -import { forcedColorsStylesheetBehavior } from "@microsoft/fast-foundation"; +import { display, forcedColorsStylesheetBehavior } from "@microsoft/fast-foundation"; import { SystemColors } from "@microsoft/fast-web-utilities"; -import { display, elevation } from "../styles"; -import { neutralLayerCardBehavior } from "../styles/recipes"; +import { elevation, neutralLayerCardBehavior } from "../styles"; export const CardStyles = css` ${display("block")} :host { diff --git a/packages/web-components/fast-components/src/checkbox/checkbox.styles.ts b/packages/web-components/fast-components/src/checkbox/checkbox.styles.ts index 49485365fef..0a5e4447338 100644 --- a/packages/web-components/fast-components/src/checkbox/checkbox.styles.ts +++ b/packages/web-components/fast-components/src/checkbox/checkbox.styles.ts @@ -1,14 +1,17 @@ import { css } from "@microsoft/fast-element"; -import { forcedColorsStylesheetBehavior } from "@microsoft/fast-foundation"; +import { + disabledCursor, + display, + focusVisible, + forcedColorsStylesheetBehavior, +} from "@microsoft/fast-foundation"; import { SystemColors } from "@microsoft/fast-web-utilities"; -import { disabledCursor, display } from "../styles"; -import { focusVisible } from "../styles/focus"; -import { heightNumber } from "../styles/size"; import { accentFillActiveBehavior, accentFillHoverBehavior, accentFillRestBehavior, accentForegroundCutRestBehavior, + heightNumber, neutralFillInputActiveBehavior, neutralFillInputHoverBehavior, neutralFillInputRestBehavior, @@ -16,7 +19,7 @@ import { neutralOutlineActiveBehavior, neutralOutlineHoverBehavior, neutralOutlineRestBehavior, -} from "../styles/recipes"; +} from "../styles"; export const CheckboxStyles = css` ${display("inline-flex")} :host { diff --git a/packages/web-components/fast-components/src/default-palette.ts b/packages/web-components/fast-components/src/default-palette.ts index 018472d317b..08955272e7f 100644 --- a/packages/web-components/fast-components/src/default-palette.ts +++ b/packages/web-components/fast-components/src/default-palette.ts @@ -96,7 +96,7 @@ export const neutralPalette: string[] = [ "#151515", "#121212", "#101010", - "#000000", + "#000000" ]; export const accentPalette: string[] = [ "#FFFFFF", @@ -192,5 +192,5 @@ export const accentPalette: string[] = [ "#260511", "#21040E", "#1C030C", - "#000000", + "#000000" ]; diff --git a/packages/web-components/fast-components/src/design-system-provider/design-system-provider.styles.ts b/packages/web-components/fast-components/src/design-system-provider/design-system-provider.styles.ts index 1dfb2385a03..7cc58fbc540 100644 --- a/packages/web-components/fast-components/src/design-system-provider/design-system-provider.styles.ts +++ b/packages/web-components/fast-components/src/design-system-provider/design-system-provider.styles.ts @@ -1,5 +1,5 @@ import { css } from "@microsoft/fast-element"; -import { display } from "../styles/display"; +import { display } from "@microsoft/fast-foundation"; export const DesignSystemProviderStyles = css` ${display("block")}; diff --git a/packages/web-components/fast-components/src/design-system-provider/index.ts b/packages/web-components/fast-components/src/design-system-provider/index.ts index 9b1001a9d2b..80b1e436436 100644 --- a/packages/web-components/fast-components/src/design-system-provider/index.ts +++ b/packages/web-components/fast-components/src/design-system-provider/index.ts @@ -1,4 +1,4 @@ -import { attr, nullableNumberConverter, observable } from "@microsoft/fast-element"; +import { nullableNumberConverter } from "@microsoft/fast-element"; import { designSystemProperty, designSystemProvider, @@ -8,15 +8,6 @@ import { import { FASTDesignSystem, fastDesignSystemDefaults } from "../fast-design-system"; import { DesignSystemProviderStyles as styles } from "./design-system-provider.styles"; -const fromView: { mode: "fromView" } = { - mode: "fromView", -}; - -const fromViewNumber: { mode: "fromView"; converter: typeof nullableNumberConverter } = { - ...fromView, - converter: nullableNumberConverter, -}; - @designSystemProvider({ name: "fast-design-system-provider", template, @@ -67,10 +58,6 @@ export class FASTDesignSystemProvider extends DesignSystemProvider }) public designUnit: number; - @attr({ - attribute: "base-height-multiplier", - ...fromViewNumber, - }) @designSystemProperty({ attribute: "base-height-multiplier", default: fastDesignSystemDefaults.baseHeightMultiplier, diff --git a/packages/web-components/fast-components/src/divider/divider.styles.ts b/packages/web-components/fast-components/src/divider/divider.styles.ts index a795e245f8a..17948e1d11e 100644 --- a/packages/web-components/fast-components/src/divider/divider.styles.ts +++ b/packages/web-components/fast-components/src/divider/divider.styles.ts @@ -1,6 +1,6 @@ import { css } from "@microsoft/fast-element"; -import { display } from "../styles"; -import { neutralDividerRestBehavior } from "../styles/recipes"; +import { display } from "@microsoft/fast-foundation"; +import { neutralDividerRestBehavior } from "../styles"; export const DividerStyles = css` ${display("block")} :host { diff --git a/packages/web-components/fast-components/src/flipper/flipper.styles.ts b/packages/web-components/fast-components/src/flipper/flipper.styles.ts index 72ff85ab4a0..c72df4e464e 100644 --- a/packages/web-components/fast-components/src/flipper/flipper.styles.ts +++ b/packages/web-components/fast-components/src/flipper/flipper.styles.ts @@ -1,18 +1,22 @@ import { css } from "@microsoft/fast-element"; -import { forcedColorsStylesheetBehavior } from "@microsoft/fast-foundation"; +import { + disabledCursor, + display, + focusVisible, + forcedColorsStylesheetBehavior, +} from "@microsoft/fast-foundation"; import { SystemColors } from "@microsoft/fast-web-utilities"; -import { disabledCursor, display, focusVisible } from "../styles"; -import { heightNumber } from "../styles/size"; import { accentFillActiveBehavior, accentFillHoverBehavior, accentFillRestBehavior, accentForegroundCutRestBehavior, + heightNumber, neutralFillStealthRestBehavior, neutralFocusBehavior, neutralForegroundRestBehavior, neutralOutlineRestBehavior, -} from "../styles/recipes"; +} from "../styles"; export const FlipperStyles = css` ${display("inline-flex")} :host { diff --git a/packages/web-components/fast-components/src/menu-item/menu-item.styles.ts b/packages/web-components/fast-components/src/menu-item/menu-item.styles.ts index f3620cce6de..ed29eca4f3e 100644 --- a/packages/web-components/fast-components/src/menu-item/menu-item.styles.ts +++ b/packages/web-components/fast-components/src/menu-item/menu-item.styles.ts @@ -1,11 +1,9 @@ import { css } from "@microsoft/fast-element"; +import { disabledCursor, display, focusVisible } from "@microsoft/fast-foundation"; import { accentFillActiveBehavior, accentFillHoverBehavior, accentForegroundCutRestBehavior, - disabledCursor, - display, - focusVisible, heightNumber, neutralFillStealthRestBehavior, neutralFocusBehavior, diff --git a/packages/web-components/fast-components/src/menu/menu.styles.ts b/packages/web-components/fast-components/src/menu/menu.styles.ts index cb20fbdc10b..00cad57c4b6 100644 --- a/packages/web-components/fast-components/src/menu/menu.styles.ts +++ b/packages/web-components/fast-components/src/menu/menu.styles.ts @@ -1,6 +1,6 @@ import { css } from "@microsoft/fast-element"; +import { display } from "@microsoft/fast-foundation"; import { - display, elevation, neutralDividerRestBehavior, neutralLayerFloatingBehavior, diff --git a/packages/web-components/fast-components/src/progress/progress-ring/progress-ring.styles.ts b/packages/web-components/fast-components/src/progress/progress-ring/progress-ring.styles.ts index f1387090017..5529e6bb5c9 100644 --- a/packages/web-components/fast-components/src/progress/progress-ring/progress-ring.styles.ts +++ b/packages/web-components/fast-components/src/progress/progress-ring/progress-ring.styles.ts @@ -1,13 +1,12 @@ import { css } from "@microsoft/fast-element"; -import { forcedColorsStylesheetBehavior } from "@microsoft/fast-foundation"; +import { display, forcedColorsStylesheetBehavior } from "@microsoft/fast-foundation"; import { SystemColors } from "@microsoft/fast-web-utilities"; -import { display } from "../../styles"; -import { heightNumber } from "../../styles/size"; import { accentFillRestBehavior, + heightNumber, neutralFillRestBehavior, neutralForegroundHintBehavior, -} from "../../styles/recipes"; +} from "../../styles"; export const ProgressRingStyles = css` ${display("flex")} :host { diff --git a/packages/web-components/fast-components/src/progress/progress/progress.styles.ts b/packages/web-components/fast-components/src/progress/progress/progress.styles.ts index 7fd28f6359a..9a8055c680c 100644 --- a/packages/web-components/fast-components/src/progress/progress/progress.styles.ts +++ b/packages/web-components/fast-components/src/progress/progress/progress.styles.ts @@ -1,12 +1,11 @@ import { css } from "@microsoft/fast-element"; -import { forcedColorsStylesheetBehavior } from "@microsoft/fast-foundation"; +import { display, forcedColorsStylesheetBehavior } from "@microsoft/fast-foundation"; import { SystemColors } from "@microsoft/fast-web-utilities"; -import { display } from "../../styles"; import { accentFillRestBehavior, neutralFillRestBehavior, neutralForegroundHintBehavior, -} from "../../styles/recipes"; +} from "../../styles"; export const ProgressStyles = css` ${display("flex")} :host { diff --git a/packages/web-components/fast-components/src/radio-group/radio-group.styles.ts b/packages/web-components/fast-components/src/radio-group/radio-group.styles.ts index ded543a8267..cc638c0186e 100644 --- a/packages/web-components/fast-components/src/radio-group/radio-group.styles.ts +++ b/packages/web-components/fast-components/src/radio-group/radio-group.styles.ts @@ -1,5 +1,5 @@ import { css } from "@microsoft/fast-element"; -import { display } from "../styles"; +import { display } from "@microsoft/fast-foundation"; export const RadioGroupStyles = css` ${display("flex")} :host { diff --git a/packages/web-components/fast-components/src/radio/radio.styles.ts b/packages/web-components/fast-components/src/radio/radio.styles.ts index e667724aafb..41ebecf37f9 100644 --- a/packages/web-components/fast-components/src/radio/radio.styles.ts +++ b/packages/web-components/fast-components/src/radio/radio.styles.ts @@ -1,14 +1,17 @@ import { css } from "@microsoft/fast-element"; -import { forcedColorsStylesheetBehavior } from "@microsoft/fast-foundation"; +import { + disabledCursor, + display, + focusVisible, + forcedColorsStylesheetBehavior, +} from "@microsoft/fast-foundation"; import { SystemColors } from "@microsoft/fast-web-utilities"; -import { disabledCursor, display } from "../styles"; -import { focusVisible } from "../styles/focus"; -import { heightNumber } from "../styles/size"; import { accentFillActiveBehavior, accentFillHoverBehavior, accentFillRestBehavior, accentForegroundCutRestBehavior, + heightNumber, neutralFillInputActiveBehavior, neutralFillInputHoverBehavior, neutralFillInputRestBehavior, @@ -16,7 +19,7 @@ import { neutralOutlineActiveBehavior, neutralOutlineHoverBehavior, neutralOutlineRestBehavior, -} from "../styles/recipes"; +} from "../styles"; export const RadioStyles = css` ${display("inline-flex")} :host { diff --git a/packages/web-components/fast-components/src/slider-label/slider-label.styles.ts b/packages/web-components/fast-components/src/slider-label/slider-label.styles.ts index 2bd380fc2c3..89603f1c025 100644 --- a/packages/web-components/fast-components/src/slider-label/slider-label.styles.ts +++ b/packages/web-components/fast-components/src/slider-label/slider-label.styles.ts @@ -1,12 +1,11 @@ import { css } from "@microsoft/fast-element"; -import { forcedColorsStylesheetBehavior } from "@microsoft/fast-foundation"; +import { display, forcedColorsStylesheetBehavior } from "@microsoft/fast-foundation"; import { SystemColors } from "@microsoft/fast-web-utilities"; -import { display } from "../styles"; -import { heightNumber } from "../styles/size"; import { + heightNumber, neutralForegroundRestBehavior, neutralOutlineRestBehavior, -} from "../styles/recipes"; +} from "../styles"; export const SliderLabelStyles = css` ${display("block")} :host { diff --git a/packages/web-components/fast-components/src/slider/slider.styles.ts b/packages/web-components/fast-components/src/slider/slider.styles.ts index ff997bba5fc..e9949e0544f 100644 --- a/packages/web-components/fast-components/src/slider/slider.styles.ts +++ b/packages/web-components/fast-components/src/slider/slider.styles.ts @@ -1,16 +1,19 @@ import { css } from "@microsoft/fast-element"; -import { forcedColorsStylesheetBehavior } from "@microsoft/fast-foundation"; +import { + disabledCursor, + display, + focusVisible, + forcedColorsStylesheetBehavior, +} from "@microsoft/fast-foundation"; import { SystemColors } from "@microsoft/fast-web-utilities"; -import { disabledCursor, display } from "../styles"; -import { focusVisible } from "../styles/focus"; -import { heightNumber } from "../styles/size"; import { + heightNumber, neutralForegroundActiveBehavior, neutralForegroundHoverBehavior, neutralForegroundRestBehavior, neutralOutlineHoverBehavior, neutralOutlineRestBehavior, -} from "../styles/recipes"; +} from "../styles"; export const SliderStyles = css` :host([hidden]) { diff --git a/packages/web-components/fast-components/src/styles/index.ts b/packages/web-components/fast-components/src/styles/index.ts index a946e71f8f1..908dd56c36c 100644 --- a/packages/web-components/fast-components/src/styles/index.ts +++ b/packages/web-components/fast-components/src/styles/index.ts @@ -1,7 +1,4 @@ -export * from "./disabled"; -export * from "./display"; export * from "./elevation"; -export * from "./focus"; export * from "./patterns"; export * from "./recipes"; export * from "./size"; diff --git a/packages/web-components/fast-components/src/styles/patterns/button.ts b/packages/web-components/fast-components/src/styles/patterns/button.ts index 0b63e8fbf28..f3e52413f20 100644 --- a/packages/web-components/fast-components/src/styles/patterns/button.ts +++ b/packages/web-components/fast-components/src/styles/patterns/button.ts @@ -1,6 +1,5 @@ import { css } from "@microsoft/fast-element"; -import { display } from "../display"; -import { focusVisible } from "../focus"; +import { display, focusVisible } from "@microsoft/fast-foundation"; import { heightNumber } from "../size"; export const BaseButtonStyles = css` diff --git a/packages/web-components/fast-components/src/switch/switch.styles.ts b/packages/web-components/fast-components/src/switch/switch.styles.ts index e28cb1d8030..958a6ba3188 100644 --- a/packages/web-components/fast-components/src/switch/switch.styles.ts +++ b/packages/web-components/fast-components/src/switch/switch.styles.ts @@ -1,14 +1,17 @@ import { css } from "@microsoft/fast-element"; -import { forcedColorsStylesheetBehavior } from "@microsoft/fast-foundation"; +import { + disabledCursor, + display, + focusVisible, + forcedColorsStylesheetBehavior, +} from "@microsoft/fast-foundation"; import { SystemColors } from "@microsoft/fast-web-utilities"; -import { disabledCursor, display } from "../styles"; -import { focusVisible } from "../styles/focus"; -import { heightNumber } from "../styles/size"; import { accentFillActiveBehavior, accentFillHoverBehavior, accentFillRestBehavior, accentForegroundCutRestBehavior, + heightNumber, neutralFillInputActiveBehavior, neutralFillInputHoverBehavior, neutralFillInputRestBehavior, @@ -16,7 +19,7 @@ import { neutralOutlineActiveBehavior, neutralOutlineHoverBehavior, neutralOutlineRestBehavior, -} from "../styles/recipes"; +} from "../styles"; export const SwitchStyles = css` :host([hidden]) { diff --git a/packages/web-components/fast-components/src/tabs/tab-panel/tab-panel.styles.ts b/packages/web-components/fast-components/src/tabs/tab-panel/tab-panel.styles.ts index 6a7eb6f8606..b75fad04793 100644 --- a/packages/web-components/fast-components/src/tabs/tab-panel/tab-panel.styles.ts +++ b/packages/web-components/fast-components/src/tabs/tab-panel/tab-panel.styles.ts @@ -1,5 +1,5 @@ import { css } from "@microsoft/fast-element"; -import { display } from "../../styles"; +import { display } from "@microsoft/fast-foundation"; export const TabPanelStyles = css` ${display("flex")} :host { diff --git a/packages/web-components/fast-components/src/tabs/tab/tab.styles.ts b/packages/web-components/fast-components/src/tabs/tab/tab.styles.ts index 9a7dbcc76ea..0b866eae596 100644 --- a/packages/web-components/fast-components/src/tabs/tab/tab.styles.ts +++ b/packages/web-components/fast-components/src/tabs/tab/tab.styles.ts @@ -1,14 +1,17 @@ import { css } from "@microsoft/fast-element"; -import { forcedColorsStylesheetBehavior } from "@microsoft/fast-foundation"; +import { + display, + focusVisible, + forcedColorsStylesheetBehavior, +} from "@microsoft/fast-foundation"; import { SystemColors } from "@microsoft/fast-web-utilities"; -import { display, focusVisible } from "../../styles"; -import { heightNumber } from "../../styles/size"; import { + heightNumber, neutralFocusBehavior, neutralForegroundActiveBehavior, neutralForegroundHoverBehavior, neutralForegroundRestBehavior, -} from "../../styles/recipes"; +} from "../../styles"; export const TabStyles = css` ${display("inline-flex")} :host { diff --git a/packages/web-components/fast-components/src/tabs/tabs.styles.ts b/packages/web-components/fast-components/src/tabs/tabs.styles.ts index 2faed0f8c2b..e95b9955b7a 100644 --- a/packages/web-components/fast-components/src/tabs/tabs.styles.ts +++ b/packages/web-components/fast-components/src/tabs/tabs.styles.ts @@ -1,8 +1,7 @@ import { css } from "@microsoft/fast-element"; -import { forcedColorsStylesheetBehavior } from "@microsoft/fast-foundation"; +import { display, forcedColorsStylesheetBehavior } from "@microsoft/fast-foundation"; import { SystemColors } from "@microsoft/fast-web-utilities"; -import { display } from "../styles"; -import { accentFillRestBehavior, neutralForegroundRestBehavior } from "../styles/recipes"; +import { accentFillRestBehavior, neutralForegroundRestBehavior } from "../styles"; export const TabsStyles = css` ${display("grid")} :host { diff --git a/packages/web-components/fast-components/src/text-area/text-area.styles.ts b/packages/web-components/fast-components/src/text-area/text-area.styles.ts index d0c8ed32d6d..b66edaabee4 100644 --- a/packages/web-components/fast-components/src/text-area/text-area.styles.ts +++ b/packages/web-components/fast-components/src/text-area/text-area.styles.ts @@ -1,21 +1,24 @@ import { css } from "@microsoft/fast-element"; -import { forcedColorsStylesheetBehavior } from "@microsoft/fast-foundation"; -import { disabledCursor, display } from "../styles"; -import { focusVisible } from "../styles/focus"; -import { heightNumber } from "../styles/size"; +import { + disabledCursor, + display, + focusVisible, + forcedColorsStylesheetBehavior, +} from "@microsoft/fast-foundation"; import { accentFillActiveBehavior, accentFillHoverBehavior, accentFillRestBehavior, - neutralFillActiveBehavior, + heightNumber, neutralFillHoverBehavior, + neutralFillInputActiveBehavior, neutralFillInputHoverBehavior, neutralFillInputRestBehavior, neutralFillRestBehavior, neutralFocusBehavior, neutralForegroundRestBehavior, neutralOutlineRestBehavior, -} from "../styles/recipes"; +} from "../styles"; export const TextAreaStyles = css` ${display("inline-block")} :host { @@ -114,7 +117,7 @@ export const TextAreaStyles = css` accentFillHoverBehavior, accentFillRestBehavior, neutralFillHoverBehavior, - neutralFillActiveBehavior, + neutralFillInputActiveBehavior, neutralFillInputHoverBehavior, neutralFillInputRestBehavior, neutralFillRestBehavior, diff --git a/packages/web-components/fast-components/src/text-field/text-field.styles.ts b/packages/web-components/fast-components/src/text-field/text-field.styles.ts index 96d68640906..1da583b3b65 100644 --- a/packages/web-components/fast-components/src/text-field/text-field.styles.ts +++ b/packages/web-components/fast-components/src/text-field/text-field.styles.ts @@ -1,14 +1,16 @@ import { css } from "@microsoft/fast-element"; -import { forcedColorsStylesheetBehavior } from "@microsoft/fast-foundation"; +import { + disabledCursor, + display, + focusVisible, + forcedColorsStylesheetBehavior, +} from "@microsoft/fast-foundation"; import { SystemColors } from "@microsoft/fast-web-utilities"; -import { disabledCursor, display } from "../styles"; -import { focusVisible } from "../styles/focus"; -import { heightNumber } from "../styles/size"; import { accentFillActiveBehavior, accentFillHoverBehavior, accentFillRestBehavior, - neutralFillActiveBehavior, + heightNumber, neutralFillHoverBehavior, neutralFillInputHoverBehavior, neutralFillInputRestBehavior, @@ -16,7 +18,7 @@ import { neutralFocusBehavior, neutralForegroundRestBehavior, neutralOutlineRestBehavior, -} from "../styles/recipes"; +} from "../styles"; export const TextFieldStyles = css` ${display("inline-block")} :host { @@ -49,6 +51,7 @@ export const TextFieldStyles = css` padding: 0 calc(var(--design-unit) * 2px + 1px); font-size: var(--type-ramp-base-font-size); line-height: var(--type-ramp-base-line-height); + color: var(--neutral-foreground-rest); } .control:hover, @@ -133,7 +136,6 @@ export const TextFieldStyles = css` accentFillHoverBehavior, accentFillRestBehavior, neutralFillHoverBehavior, - neutralFillActiveBehavior, neutralFillInputHoverBehavior, neutralFillInputRestBehavior, neutralFillRestBehavior, diff --git a/packages/web-components/fast-foundation/src/utilities/index.ts b/packages/web-components/fast-foundation/src/utilities/index.ts index 923480c3be3..19d58ced482 100644 --- a/packages/web-components/fast-foundation/src/utilities/index.ts +++ b/packages/web-components/fast-foundation/src/utilities/index.ts @@ -1,3 +1,4 @@ export * from "./apply-mixins.js"; export * from "./composed-parent.js"; export * from "./match-media-stylesheet-behavior.js"; +export * from "./style"; diff --git a/packages/web-components/fast-components/src/styles/disabled.ts b/packages/web-components/fast-foundation/src/utilities/style/disabled.ts similarity index 100% rename from packages/web-components/fast-components/src/styles/disabled.ts rename to packages/web-components/fast-foundation/src/utilities/style/disabled.ts diff --git a/packages/web-components/fast-components/src/styles/display.ts b/packages/web-components/fast-foundation/src/utilities/style/display.ts similarity index 100% rename from packages/web-components/fast-components/src/styles/display.ts rename to packages/web-components/fast-foundation/src/utilities/style/display.ts diff --git a/packages/web-components/fast-components/src/styles/focus.ts b/packages/web-components/fast-foundation/src/utilities/style/focus.ts similarity index 100% rename from packages/web-components/fast-components/src/styles/focus.ts rename to packages/web-components/fast-foundation/src/utilities/style/focus.ts diff --git a/packages/web-components/fast-foundation/src/utilities/style/index.ts b/packages/web-components/fast-foundation/src/utilities/style/index.ts new file mode 100644 index 00000000000..9f41ad5f5a5 --- /dev/null +++ b/packages/web-components/fast-foundation/src/utilities/style/index.ts @@ -0,0 +1,3 @@ +export * from "./disabled"; +export * from "./display"; +export * from "./focus"; diff --git a/yarn.lock b/yarn.lock index 872fa95c573..1419f6dc981 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4583,7 +4583,7 @@ dependencies: core-js "^3.0.1" -"@storybook/cli@^5.1.3": +"@storybook/cli@^5.1.3", "@storybook/cli@^5.3.13": version "5.3.18" resolved "https://registry.yarnpkg.com/@storybook/cli/-/cli-5.3.18.tgz#adba3ed36df35b344b3e48cdb2de0c4400b18852" integrity sha512-FiAWpjJqm417CZjLUpn8tw0CrPwk/fx3L7ciL9bYkAkCQNOcau5No02vrpVSZiZPgZ7P7q2gR249RzMu1DRVTA== @@ -4911,7 +4911,7 @@ dependencies: lodash "^4.17.15" -"@storybook/html@^5.1.3": +"@storybook/html@^5.1.3", "@storybook/html@^5.3.13": version "5.3.18" resolved "https://registry.yarnpkg.com/@storybook/html/-/html-5.3.18.tgz#7206cfb6d11c4dde692b3923aa4eb9b3518434dd" integrity sha512-u5x3VxFz08UJaBJcsE7ibijCM+pinHzi0Lz9pBAkF/NeBHkgK2c/01cMQIAw/B23uDKFlfnh3DiboHDd18NUAg==