Skip to content

Commit

Permalink
feat: add fast-components-msft as a new package (#3096)
Browse files Browse the repository at this point in the history
* initial work to create fast-components-msft

* add styles packages for patterns

* add msft anchor

* add msft button

* add msft badge - outstanding issues

* add msft card

* add msft checkbox

* add msft dialog

* add msft divider

* add msft flipper

* add msft progress - do we want to narrow support to align with guidance?

* add msft radio

* add MSFT radio group

* add msft slider and slider-label

* add msft switch

* add msft tabs - need to ensure alignment of tab panel with tabs

* add msft text area

* add msft text field

* export all components from root

* fix eslint errors

* update imports from fast-components

* add .js extension to anything distributed

* update readme to include install instructions

* update prefix to align with fast

* update package.json description

* update tsconfig

* add dependency for fast-components-styles-msft

* update design system provider to use MSFT design system

* remove js extensions for the time being

* update imports for fast-foundation

* update behavior imports to correct internal path

* update pathing for forcedColors behavior

* fix order of imports

* update system-colors path

* update imports for  shared utils added to foundation

* fix design system signature and update to new textarea api with default slot for label

* remove unused behavior and fix color on text field

* update design system values and remove unused vars

* fix text field focus bug
  • Loading branch information
chrisdholt committed May 18, 2020
1 parent 6bc4695 commit 0515fff
Show file tree
Hide file tree
Showing 129 changed files with 5,002 additions and 111 deletions.
8 changes: 8 additions & 0 deletions packages/web-components/fast-components-msft/.eslintignore
Original file line number Diff line number Diff line change
@@ -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
10 changes: 10 additions & 0 deletions packages/web-components/fast-components-msft/.eslintrc.js
Original file line number Diff line number Diff line change
@@ -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",
},
};
20 changes: 20 additions & 0 deletions packages/web-components/fast-components-msft/.npmignore
Original file line number Diff line number Diff line change
@@ -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
1 change: 1 addition & 0 deletions packages/web-components/fast-components-msft/.npmrc
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
package-lock=false
2 changes: 2 additions & 0 deletions packages/web-components/fast-components-msft/.prettierignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
coverage/*
dist/*
24 changes: 24 additions & 0 deletions packages/web-components/fast-components-msft/.storybook/main.js
Original file line number Diff line number Diff line change
@@ -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;
},
};
14 changes: 14 additions & 0 deletions packages/web-components/fast-components-msft/README.md
Original file line number Diff line number Diff line change
@@ -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.
48 changes: 48 additions & 0 deletions packages/web-components/fast-components-msft/package.json
Original file line number Diff line number Diff line change
@@ -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"
}
}

Original file line number Diff line number Diff line change
@@ -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;
Original file line number Diff line number Diff line change
@@ -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
);
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
<fast-design-system-provider use-defaults>
<h1>Anchor</h1>

<h4>Default</h4>
<fast-anchor href="#">Anchor</fast-anchor>

<h5>With target</h5>
<fast-anchor href="https://microsoft.com" target="_blank">Anchor</fast-anchor>

<h4>Neutral</h4>
<fast-anchor href="#" appearance="neutral">Button</fast-anchor>

<h4>Accent</h4>
<fast-anchor href="#" appearance="accent">Anchor</fast-anchor>

<h4>Hypertext</h4>
<fast-anchor href="#" appearance="hypertext">Anchor</fast-anchor>
<br/>
<fast-anchor appearance="hypertext">Anchor (no href)</fast-anchor>

<h4>Lightweight</h4>
<fast-anchor href="#" appearance="lightweight">Anchor</fast-anchor>

<h4>Outline</h4>
<fast-anchor href="#" appearance="outline">Anchor</fast-anchor>

<h4>Stealth</h4>
<fast-anchor href="#" appearance="stealth">Anchor</fast-anchor>

<h4>With start</h4>
<fast-anchor href="#">
Anchor
<svg
slot="start"
width="16"
height="16"
viewBox="0 0 16 16"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M6.5,7.7h-1v-1h1V7.7z M10.6,7.7h-1v-1h1V7.7z M14.7,6.7v2.1h-1v2.6c0,0.2,0,0.4-0.1,0.6c-0.1,0.2-0.2,0.4-0.3,0.5c-0.1,0.1-0.3,0.3-0.5,0.3c-0.2,0.1-0.4,0.1-0.6,0.1H10l-3.5,3v-3H3.9c-0.2,0-0.4,0-0.6-0.1c-0.2-0.1-0.4-0.2-0.5-0.3c-0.1-0.1-0.3-0.3-0.3-0.5c-0.1-0.2-0.1-0.4-0.1-0.6V8.8h-1V6.7h1V5.2c0-0.2,0-0.4,0.1-0.6c0.1-0.2,0.2-0.4,0.3-0.5c0.1-0.1,0.3-0.3,0.5-0.3c0.2-0.1,0.4-0.1,0.6-0.1h3.6V1.9C7.3,1.8,7.2,1.7,7.1,1.5C7,1.4,7,1.2,7,1C7,0.9,7,0.8,7,0.6c0.1-0.1,0.1-0.2,0.2-0.3c0.1-0.1,0.2-0.2,0.3-0.2C7.7,0,7.9,0,8,0c0.1,0,0.3,0,0.4,0.1c0.1,0.1,0.2,0.1,0.3,0.2C8.8,0.4,8.9,0.5,9,0.6C9,0.8,9,0.9,9,1c0,0.2,0,0.4-0.1,0.5C8.8,1.7,8.7,1.8,8.5,1.9v1.7h3.6c0.2,0,0.4,0,0.6,0.1c0.2,0.1,0.4,0.2,0.5,0.3c0.1,0.1,0.3,0.3,0.3,0.5c0.1,0.2,0.1,0.4,0.1,0.6v1.5H14.7z M12.6,5.2c0-0.1-0.1-0.3-0.2-0.4c-0.1-0.1-0.2-0.2-0.4-0.2H3.9c-0.1,0-0.3,0.1-0.4,0.2C3.4,4.9,3.4,5,3.4,5.2v6.2c0,0.1,0.1,0.3,0.2,0.4c0.1,0.1,0.2,0.2,0.4,0.2h3.6v1.8l2.1-1.8h2.5c0.1,0,0.3-0.1,0.4-0.2c0.1-0.1,0.2-0.2,0.2-0.4V5.2z M5.8,8.9c0.3,0.3,0.6,0.5,1,0.7C7.2,9.7,7.6,9.8,8,9.8s0.8-0.1,1.2-0.2c0.4-0.2,0.7-0.4,1-0.7l0.7,0.7c-0.4,0.4-0.8,0.7-1.4,0.9c-0.5,0.2-1,0.3-1.6,0.3s-1.1-0.1-1.6-0.3c-0.5-0.2-1-0.5-1.3-0.9L5.8,8.9z" />
</svg>
</fast-anchor>

<h4>With end</h4>
<fast-anchor href="#">
Anchor
<svg
slot="end"
width="16"
height="16"
viewBox="0 0 16 16"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M6.5,7.7h-1v-1h1V7.7z M10.6,7.7h-1v-1h1V7.7z M14.7,6.7v2.1h-1v2.6c0,0.2,0,0.4-0.1,0.6c-0.1,0.2-0.2,0.4-0.3,0.5c-0.1,0.1-0.3,0.3-0.5,0.3c-0.2,0.1-0.4,0.1-0.6,0.1H10l-3.5,3v-3H3.9c-0.2,0-0.4,0-0.6-0.1c-0.2-0.1-0.4-0.2-0.5-0.3c-0.1-0.1-0.3-0.3-0.3-0.5c-0.1-0.2-0.1-0.4-0.1-0.6V8.8h-1V6.7h1V5.2c0-0.2,0-0.4,0.1-0.6c0.1-0.2,0.2-0.4,0.3-0.5c0.1-0.1,0.3-0.3,0.5-0.3c0.2-0.1,0.4-0.1,0.6-0.1h3.6V1.9C7.3,1.8,7.2,1.7,7.1,1.5C7,1.4,7,1.2,7,1C7,0.9,7,0.8,7,0.6c0.1-0.1,0.1-0.2,0.2-0.3c0.1-0.1,0.2-0.2,0.3-0.2C7.7,0,7.9,0,8,0c0.1,0,0.3,0,0.4,0.1c0.1,0.1,0.2,0.1,0.3,0.2C8.8,0.4,8.9,0.5,9,0.6C9,0.8,9,0.9,9,1c0,0.2,0,0.4-0.1,0.5C8.8,1.7,8.7,1.8,8.5,1.9v1.7h3.6c0.2,0,0.4,0,0.6,0.1c0.2,0.1,0.4,0.2,0.5,0.3c0.1,0.1,0.3,0.3,0.3,0.5c0.1,0.2,0.1,0.4,0.1,0.6v1.5H14.7z M12.6,5.2c0-0.1-0.1-0.3-0.2-0.4c-0.1-0.1-0.2-0.2-0.4-0.2H3.9c-0.1,0-0.3,0.1-0.4,0.2C3.4,4.9,3.4,5,3.4,5.2v6.2c0,0.1,0.1,0.3,0.2,0.4c0.1,0.1,0.2,0.2,0.4,0.2h3.6v1.8l2.1-1.8h2.5c0.1,0,0.3-0.1,0.4-0.2c0.1-0.1,0.2-0.2,0.2-0.4V5.2z M5.8,8.9c0.3,0.3,0.6,0.5,1,0.7C7.2,9.7,7.6,9.8,8,9.8s0.8-0.1,1.2-0.2c0.4-0.2,0.7-0.4,1-0.7l0.7,0.7c-0.4,0.4-0.8,0.7-1.4,0.9c-0.5,0.2-1,0.3-1.6,0.3s-1.1-0.1-1.6-0.3c-0.5-0.2-1-0.5-1.3-0.9L5.8,8.9z" />
</svg>
</fast-anchor>

<h4>Icon in default slot</h4>
<fast-anchor href="#">
<svg
width="16"
height="16"
viewBox="0 0 16 16"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M6.5,7.7h-1v-1h1V7.7z M10.6,7.7h-1v-1h1V7.7z M14.7,6.7v2.1h-1v2.6c0,0.2,0,0.4-0.1,0.6c-0.1,0.2-0.2,0.4-0.3,0.5c-0.1,0.1-0.3,0.3-0.5,0.3c-0.2,0.1-0.4,0.1-0.6,0.1H10l-3.5,3v-3H3.9c-0.2,0-0.4,0-0.6-0.1c-0.2-0.1-0.4-0.2-0.5-0.3c-0.1-0.1-0.3-0.3-0.3-0.5c-0.1-0.2-0.1-0.4-0.1-0.6V8.8h-1V6.7h1V5.2c0-0.2,0-0.4,0.1-0.6c0.1-0.2,0.2-0.4,0.3-0.5c0.1-0.1,0.3-0.3,0.5-0.3c0.2-0.1,0.4-0.1,0.6-0.1h3.6V1.9C7.3,1.8,7.2,1.7,7.1,1.5C7,1.4,7,1.2,7,1C7,0.9,7,0.8,7,0.6c0.1-0.1,0.1-0.2,0.2-0.3c0.1-0.1,0.2-0.2,0.3-0.2C7.7,0,7.9,0,8,0c0.1,0,0.3,0,0.4,0.1c0.1,0.1,0.2,0.1,0.3,0.2C8.8,0.4,8.9,0.5,9,0.6C9,0.8,9,0.9,9,1c0,0.2,0,0.4-0.1,0.5C8.8,1.7,8.7,1.8,8.5,1.9v1.7h3.6c0.2,0,0.4,0,0.6,0.1c0.2,0.1,0.4,0.2,0.5,0.3c0.1,0.1,0.3,0.3,0.3,0.5c0.1,0.2,0.1,0.4,0.1,0.6v1.5H14.7z M12.6,5.2c0-0.1-0.1-0.3-0.2-0.4c-0.1-0.1-0.2-0.2-0.4-0.2H3.9c-0.1,0-0.3,0.1-0.4,0.2C3.4,4.9,3.4,5,3.4,5.2v6.2c0,0.1,0.1,0.3,0.2,0.4c0.1,0.1,0.2,0.2,0.4,0.2h3.6v1.8l2.1-1.8h2.5c0.1,0,0.3-0.1,0.4-0.2c0.1-0.1,0.2-0.2,0.2-0.4V5.2z M5.8,8.9c0.3,0.3,0.6,0.5,1,0.7C7.2,9.7,7.6,9.8,8,9.8s0.8-0.1,1.2-0.2c0.4-0.2,0.7-0.4,1-0.7l0.7,0.7c-0.4,0.4-0.8,0.7-1.4,0.9c-0.5,0.2-1,0.3-1.6,0.3s-1.1-0.1-1.6-0.3c-0.5-0.2-1-0.5-1.3-0.9L5.8,8.9z" />
</svg>
</fast-anchor>
</fast-design-system-provider>
14 changes: 14 additions & 0 deletions packages/web-components/fast-components-msft/src/anchor/index.ts
Original file line number Diff line number Diff line change
@@ -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 {}
Original file line number Diff line number Diff line change
@@ -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;
Original file line number Diff line number Diff line change
@@ -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
);
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<fast-design-system-provider use-defaults>
<h1>Badge</h1>
<h4>Default</h4>
<fast-badge>
Badge
</fast-badge>
<h4>Lightweight</h4>
<fast-badge fill="lightweight">
Badge
</fast-badge>
<h4>Accent</h4>
<fast-badge fill="accent">
Badge
</fast-badge>
<h4>Neutral</h4>
<fast-badge fill="neutral">
Badge
</fast-badge>
</fast-design-system-provider>
Loading

0 comments on commit 0515fff

Please sign in to comment.