diff --git a/.husky/pre-commit b/.husky/pre-commit new file mode 100755 index 000000000..f3ae80c10 --- /dev/null +++ b/.husky/pre-commit @@ -0,0 +1,45 @@ +#!/bin/sh + +if [ "$LEFTHOOK" = "0" ]; then + exit 0 +fi + +call_lefthook() +{ + dir="$(git rev-parse --show-toplevel)" + osArch=$(uname | tr '[:upper:]' '[:lower:]') + cpuArch=$(uname -m | sed 's/aarch64/arm64/') + + if lefthook -h >/dev/null 2>&1 + then + lefthook "$@" + elif test -f "$dir/node_modules/lefthook/bin/index.js" + then + "$dir/node_modules/lefthook/bin/index.js" "$@" + elif test -f "$dir/node_modules/@evilmartians/lefthook/bin/lefthook_${osArch}_${cpuArch}/lefthook" + then + "$dir/node_modules/@evilmartians/lefthook/bin/lefthook_${osArch}_${cpuArch}/lefthook" "$@" + elif test -f "$dir/node_modules/@evilmartians/lefthook-installer/bin/lefthook_${osArch}_${cpuArch}/lefthook" + then + "$dir/node_modules/@evilmartians/lefthook-installer/bin/lefthook_${osArch}_${cpuArch}/lefthook" "$@" + elif bundle exec lefthook -h >/dev/null 2>&1 + then + bundle exec lefthook "$@" + elif yarn lefthook -h >/dev/null 2>&1 + then + yarn lefthook "$@" + elif pnpm lefthook -h >/dev/null 2>&1 + then + pnpm lefthook "$@" + elif command -v npx >/dev/null 2>&1 + then + npx @evilmartians/lefthook "$@" + elif swift package plugin lefthook >/dev/null 2>&1 + then + swift package --disable-sandbox plugin lefthook "$@" + else + echo "Can't find lefthook in PATH" + fi +} + +call_lefthook run "pre-commit" "$@" diff --git a/.storybook/storybook.css b/.storybook/storybook.css index 22d330f0c..2d3a9a89e 100644 --- a/.storybook/storybook.css +++ b/.storybook/storybook.css @@ -1,5 +1,3 @@ @import url('https://rsms.me/inter/inter.css'); /* Outline */ @import '../packages/outline-templates/default/outline.theme.css'; -/* Global Tailwind Utilities */ -@import '../packages/outline-templates/default/tailwind.css'; diff --git a/package.json b/package.json index b56238118..508c35cb4 100644 --- a/package.json +++ b/package.json @@ -136,7 +136,7 @@ "svgo": "^2.8.0", "tailwindcss": "3.0.0", "ts-lit-plugin": "^1.2.1", - "turbo": "^1.2.16", + "turbo": "^1.10.16", "vite": "^4.1.4" }, "dependencies": {}, diff --git a/packages/components/outline-core-button/CHANGELOG.md b/packages/components/outline-core-button/CHANGELOG.md new file mode 100644 index 000000000..e28e22f13 --- /dev/null +++ b/packages/components/outline-core-button/CHANGELOG.md @@ -0,0 +1,11 @@ +# @phase2/outline-core-button + +## 0.0.2 + +### Patch Changes + +- Updates for outline-core-button. + +## 0.0.1 + +### Patch Changes diff --git a/packages/components/outline-core-button/index.ts b/packages/components/outline-core-button/index.ts new file mode 100644 index 000000000..251eae550 --- /dev/null +++ b/packages/components/outline-core-button/index.ts @@ -0,0 +1,2 @@ +export { OutlineCoreButton } from './src/outline-core-button'; +export type { ButtonVariant, ButtonSize } from './src/outline-core-button'; diff --git a/packages/components/outline-core-button/package.json b/packages/components/outline-core-button/package.json new file mode 100644 index 000000000..e7048fb49 --- /dev/null +++ b/packages/components/outline-core-button/package.json @@ -0,0 +1,41 @@ +{ + "name": "@phase2/outline-core-button", + "version": "0.0.2", + "description": "The Outline Components for the web button component", + "keywords": [ + "outline components", + "outline design", + "button" + ], + "main": "index.ts", + "types": "index.ts", + "typings": "index.d.ts", + "files": [ + "/dist/", + "/src/", + "!/dist/tsconfig.build.tsbuildinfo" + ], + "author": "Phase2 Technology", + "repository": { + "type": "git", + "url": "https://github.com/phase2/outline.git", + "directory": "packages/outline-core-button" + }, + "license": "BSD-3-Clause", + "scripts": { + "build": "node ../../../scripts/build.js", + "package": "yarn publish" + }, + "dependencies": { + "@phase2/outline-core": "^0.1.10", + "@phase2/outline-link": "^0.1.4", + "lit": "^2.3.1", + "tslib": "^2.1.0" + }, + "publishConfig": { + "access": "public" + }, + "exports": { + ".": "./index.ts" + } +} diff --git a/packages/components/outline-core-button/src/css-variables/vars-default.css b/packages/components/outline-core-button/src/css-variables/vars-default.css new file mode 100644 index 000000000..e6de63fe8 --- /dev/null +++ b/packages/components/outline-core-button/src/css-variables/vars-default.css @@ -0,0 +1,23 @@ +/* +Default CSS Variables for `outline-core-button`. +You can override these using `outline.theme.css`, +or any css file in your consumer application with +a later loading order than `outline.theme.css`. +The variables used to override the default +`outline-core-button` styling can be found in +`outline-core-button.ts` delcared with the `@cssprop` annotations. +*/ + +/* +--outline-core-button--family +--outline-core-button--weight +--outline-core-button--padding +--outline-core-button--radius +*/ + +:host { + --outline-core-button--family--computed: var(--outline-core-button--family, var(--ff-body)); + --outline-core-button--weight--computed: var(--outline-core-button--weight, var(--fw-semibold)); + --outline-core-button--padding--computed: var(--outline-core-button--padding, var(--spacing-2) var(--spacing-4)); + --outline-core-button--radius--computed: var(--outline-core-button--radius, var(--spacing-2)); +} diff --git a/packages/components/outline-core-button/src/css-variables/vars-link.css b/packages/components/outline-core-button/src/css-variables/vars-link.css new file mode 100644 index 000000000..05ab0ffce --- /dev/null +++ b/packages/components/outline-core-button/src/css-variables/vars-link.css @@ -0,0 +1,84 @@ +/* +Default CSS Variables for the `outline-core-button` link variant. +You can override these using `outline.theme.css`, +or any css file in your consumer application with +a later loading order than `outline.theme.css`. +The variables used to override the default +`outline-core-button` styling can be found in +`outline-core-button.ts` delcared with the `@cssprop` annotations. +*/ + +/* +--outline-core-button--link-padding +--outline-core-button--link-radius +--outline-core-button--link-bg-color +--outline-core-button--link-text-color +--outline-core-button--link-decoration +--outline-core-button--link-weight +--outline-core-button--link-ring + +--outline-core-button--link-bg-color-hover +--outline-core-button--link-text-color-hover +--outline-core-button--link-decoration-hover +--outline-core-button--link-weight-hover +--outline-core-button--link-ring-hover + +--outline-core-button--link-bg-color-focus +--outline-core-button--link-text-color-focus +--outline-core-button--link-decoration-focus +--outline-core-button--link-weight-focus +--outline-core-button--link-ring-focus + +--outline-core-button--link-disabled-bg-color +--outline-core-button--link-disabled-text-color +--outline-core-button--link-disabled-decoration +--outline-core-button--link-disabled-weight +--outline-core-button--link-disabled-ring +--outline-core-button--link-disabled-bg-color-focus +--outline-core-button--link-disabled-text-color-focus +--outline-core-button--link-disabled-decoration-focus +--outline-core-button--link-disabled-weight-focus +--outline-core-button--link-disabled-ring-focus +*/ + +:host { + + /* Link Button(s) */ + --outline-core-button--link-padding--computed: var(--outline-core-button--link-padding, var(--outline-core-button--padding--computed)); + --outline-core-button--link-radius--computed: var(--outline-core-button--link-radius, var(--outline-core-button--radius--computed)); + + /* Link Button(s) - Default */ + --outline-core-button--link-bg-color--computed: var(--outline-core-button--link-bg-color, var(--outline-transparent)); + --outline-core-button--link-color--computed: var(--outline-core-button--link-color, var(--outline-link--color--computed)); + --outline-core-button--link-decoration--computed: var(--outline-core-button--link-decoration, var(--outline-link--decoration--computed)); + --outline-core-button--link-weight--computed: var(--outline-core-button--link-weight, var(--outline-core-button--weight--computed)); + --outline-core-button--link-ring--computed: var(--outline-core-button--link-ring, none); + + /* Link Button(s) - Hover */ + --outline-core-button--link-bg-color-hover--computed: var(--outline-core-button--link-bg-color-hover, var(--outline-transparent)); + --outline-core-button--link-color-hover--computed: var(--outline-core-button--link-color-hover, var(--outline-link--color-hover--computed)); + --outline-core-button--link-decoration-hover--computed: var(--outline-core-button--link-decoration-hover, underline); + --outline-core-button--link-weight-hover--computed: var(--outline-core-button--link-weight-hover, var(--outline-core-button--weight--computed)); + --outline-core-button--link-ring-hover--computed: var(--outline-core-button--link-ring-hover, none); + + /* Link Button(s) - Focus */ + --outline-core-button--link-bg-color-focus--computed: var(--outline-core-button--link-bg-color-focus, var(--outline-transparent)); + --outline-core-button--link-color-focus--computed: var(--outline-core-button--link-color-focus, var(--outline-link--color-focus--computed)); + --outline-core-button--link-decoration-focus--computed: var(--outline-core-button--link-decoration-focus, underline); + --outline-core-button--link-weight-focus--computed: var(--outline-core-button--link-weight-focus, var(--outline-core-button--weight--computed)); + --outline-core-button--link-ring-focus--computed: var(--outline-core-button--link-ring-focus, none); + + /* Link Button(s) - Disabled */ + --outline-core-button--link-disabled-bg-color--computed: var(--outline-core-button--link-disabled-bg-color, var(--outline-transparent)); + --outline-core-button--link-disabled-color--computed: var(--outline-core-button--link-disabled-color, var(--outline-gray-500)); + --outline-core-button--link-disabled-decoration--computed: var(--outline-core-button--link-disabled-decoration, none); + --outline-core-button--link-disabled-weight--computed: var(--outline-core-button--link-disabled-weight, var(--outline-core-button--weight--computed)); + --outline-core-button--link-disabled-ring--computed: var(--outline-core-button--link-disabled-ring, none); + + /* Link Button(s) - Disabled:Focus */ + --outline-core-button--link-disabled-bg-color-focus--computed: var(--outline-core-button--link-disabled-bg-color-focus, var(--outline-transparent)); + --outline-core-button--link-disabled-color-focus--computed: var(--outline-core-button--link-disabled-color-focus, var(--outline-gray-500)); + --outline-core-button--link-disabled-decoration-focus--computed: var(--outline-core-button--link-disabled-decoration-focus, none); + --outline-core-button--link-disabled-weight-focus--computed: var(--outline-core-button--link-disabled-weight-focus, var(--outline-core-button--weight--computed)); + --outline-core-button--link-disabled-ring-focus--computed: var(--outline-core-button--link-disabled-ring-focus, var(--outline-ring-inset) 0 0 0 var(--outline-ring-offset-width) var(--outline-gray-500)); +} diff --git a/packages/components/outline-core-button/src/css-variables/vars-primary.css b/packages/components/outline-core-button/src/css-variables/vars-primary.css new file mode 100644 index 000000000..1cd6d13fa --- /dev/null +++ b/packages/components/outline-core-button/src/css-variables/vars-primary.css @@ -0,0 +1,74 @@ +/* +Default CSS Variables for the `outline-core-button` primary variant. +You can override these using `outline.theme.css`, +or any css file in your consumer application with +a later loading order than `outline.theme.css`. +The variables used to override the default +`outline-core-button` styling can be found in +`outline-core-button.ts` delcared with the `@cssprop` annotations. +*/ +/* +// ### CSS Variables + +// > The following CSS Variables are used to style the primary buttons. + +// - \`--outline-core-button--primary-padding\`: Padding for the primary buttons. +// - \`--outline-core-button--primary-radius\`: Border radius for the primary buttons. +// - \`--outline-core-button--primary-bg-color\`: Background color for the primary buttons. +// - \`--outline-core-button--primary-text-color\`: Text color for the primary buttons. +// - \`--outline-core-button--primary-weight\`: Font weight for the primary buttons. +// - \`--outline-core-button--primary-ring\`: Border ring for the primary buttons. +// - \`--outline-core-button--primary-bg-color-hover\`: Background color for the primary buttons when hovered. +// - \`--outline-core-button--primary-text-color-hover\`: Text color for the primary buttons when hovered. +// - \`--outline-core-button--primary-weight-hover\`: Font weight for the primary buttons when hovered. +// - \`--outline-core-button--primary-ring-hover\`: Border ring for the primary buttons when hovered. +// - \`--outline-core-button--primary-bg-color-focus\`: Background color for the primary buttons when focused. +// - \`--outline-core-button--primary-text-color-focus\`: Text color for the primary buttons when focused. +// - \`--outline-core-button--primary-weight-focus\`: Font weight for the primary buttons when focused. +// - \`--outline-core-button--primary-ring-focus\`: Border ring for the primary buttons when focused. +// - \`--outline-core-button--primary-disabled-bg-color\`: Background color for the primary buttons when disabled. +// - \`--outline-core-button--primary-disabled-text-color\`: Text color for the primary buttons when disabled. +// - \`--outline-core-button--primary-disabled-weight\`: Font weight for the primary buttons when disabled. +// - \`--outline-core-button--primary-disabled-ring\`: Border ring for the primary buttons when disabled. +// - \`--outline-core-button--primary-disabled-bg-color-focus\`: Background color for the primary buttons when disabled and focused. +// - \`--outline-core-button--primary-disabled-text-color-focus\`: Text color for the primary buttons when disabled and focused. +// - \`--outline-core-button--primary-disabled-weight-focus\`: Font weight for the primary buttons when disabled and focused. +// - \`--outline-core-button--primary-disabled-ring-focus\`: Border ring for the primary buttons when disabled and focused. +*/ + +:host { + + /* Primary Button(s) */ + --outline-core-button--primary-padding--computed: var(--outline-core-button--primary-padding, var(--outline-core-button--padding--computed)); + --outline-core-button--primary-radius--computed: var(--outline-core-button--primary-radius, var(--outline-core-button--radius--computed)); + + /* Primary Button(s) - Default */ + --outline-core-button--primary-bg-color--computed: var(--outline-core-button--primary-bg-color, var(--outline-blue-600)); + --outline-core-button--primary-color--computed: var(--outline-core-button--primary-color, var(--outline-white)); + --outline-core-button--primary-weight--computed: var(--outline-core-button--primary-weight, var(--outline-core-button--weight--computed)); + --outline-core-button--primary-ring--computed: var(--outline-core-button--primary-ring, none); + + /* Primary Button(s) - Hover */ + --outline-core-button--primary-bg-color-hover--computed: var(--outline-core-button--primary-bg-color-hover, var(--outline-white)); + --outline-core-button--primary-color-hover--computed: var(--outline-core-button--primary-color-hover, var(--outline-blue-600)); + --outline-core-button--primary-weight-hover--computed: var(--outline-core-button--primary-weight-hover, var(--outline-core-button--weight--computed)); + --outline-core-button--primary-ring-hover--computed: var(--outline-core-button--primary-ring-hover, var(--outline-ring-inset) 0 0 0 var(--outline-ring-offset-width) var(--outline-blue-600)); + + /* Primary Button(s) - Focus */ + --outline-core-button--primary-bg-color-focus--computed: var(--outline-core-button--primary-bg-color-focus, var(--outline-white)); + --outline-core-button--primary-color-focus--computed: var(--outline-core-button--primary-color-focus, var(--outline-blue-600)); + --outline-core-button--primary-weight-focus--computed: var(--outline-core-button--primary-weight-focus, var(--outline-core-button--weight--computed)); + --outline-core-button--primary-ring-focus--computed: var(--outline-core-button--primary-ring-focus, var(--outline-ring-inset) 0 0 0 var(--outline-ring-offset-width) var(--outline-blue-600)); + + /* Primary Button(s) - Disabled */ + --outline-core-button--primary-disabled-bg-color--computed: var(--outline-core-button--primary-disabled-bg-color, var(--outline-white)); + --outline-core-button--primary-disabled-color--computed: var(--outline-core-button--primary-disabled-color, var(--outline-gray-400)); + --outline-core-button--primary-disabled-weight--computed: var(--outline-core-button--primary-disabled-weight, var(--outline-core-button--weight--computed)); + --outline-core-button--primary-disabled-ring--computed: var(--outline-core-button--primary-disabled-ring, var(--outline-ring-inset) 0 0 0 var(--outline-ring-offset-width) var(--outline-gray-300)); + + /* Primary Button(s) - Disabled:Focus */ + --outline-core-button--primary-disabled-bg-color-focus--computed: var(--outline-core-button--primary-disabled-bg-color-focus, var(--outline-white)); + --outline-core-button--primary-disabled-color-focus--computed: var(--outline-core-button--primary-disabled-color-focus, var(--outline-gray-400)); + --outline-core-button--primary-disabled-weight-focus--computed: var(--outline-core-button--primary-disabled-weight-focus, var(--outline-core-button--weight--computed)); + --outline-core-button--primary-disabled-ring-focus--computed: var(--outline-core-button--primary-disabled-ring-focus, var(--outline-ring-inset) 0 0 0 var(--outline-ring-offset-width) var(--outline-gray-400)); +} diff --git a/packages/components/outline-core-button/src/css-variables/vars-secondary.css b/packages/components/outline-core-button/src/css-variables/vars-secondary.css new file mode 100644 index 000000000..331b918f5 --- /dev/null +++ b/packages/components/outline-core-button/src/css-variables/vars-secondary.css @@ -0,0 +1,74 @@ +/* +Default CSS Variables for the `outline-core-button` secondary variant. +You can override these using `outline.theme.css`, +or any css file in your consumer application with +a later loading order than `outline.theme.css`. +The variables used to override the default +`outline-core-button` styling can be found in +`outline-core-button.ts` delcared with the `@cssprop` annotations. +*/ + +/* +--outline-core-button--secondary-padding +--outline-core-button--secondary-radius +--outline-core-button--secondary-bg-color +--outline-core-button--secondary-text-color +--outline-core-button--secondary-weight +--outline-core-button--secondary-ring + +--outline-core-button--secondary-bg-color-hover +--outline-core-button--secondary-text-color-hover +--outline-core-button--secondary-weight-hover +--outline-core-button--secondary-ring-hover + +--outline-core-button--secondary-bg-color-focus +--outline-core-button--secondary-text-color-focus +--outline-core-button--secondary-weight-focus +--outline-core-button--secondary-ring-focus + +--outline-core-button--secondary-disabled-bg-color +--outline-core-button--secondary-disabled-text-color +--outline-core-button--secondary-disabled-weight +--outline-core-button--secondary-disabled-ring +--outline-core-button--secondary-disabled-bg-color-focus +--outline-core-button--secondary-disabled-text-color-focus +--outline-core-button--secondary-disabled-weight-focus +--outline-core-button--secondary-disabled-ring-focus +*/ + +:host { + + /* Secondary Button(s) */ + --outline-core-button--secondary-padding--computed: var(--outline-core-button--secondary-padding, var(--outline-core-button--padding--computed)); + --outline-core-button--secondary-radius--computed: var(--outline-core-button--secondary-radius, var(--outline-core-button--radius--computed)); + + /* Secondary Button(s) - Default */ + --outline-core-button--secondary-bg-color--computed: var(--outline-core-button--secondary-bg-color, var(--outline-white)); + --outline-core-button--secondary-color--computed: var(--outline-core-button--secondary-color, var(--outline-blue-600)); + --outline-core-button--secondary-weight--computed: var(--outline-core-button--secondary-weight, var(--outline-core-button--weight--computed)); + --outline-core-button--secondary-ring--computed: var(--outline-core-button--secondary-ring, var(--outline-ring-inset) 0 0 0 var(--outline-ring-offset-width) var(--outline-blue-600)); + + /* Secondary Button(s) - Hover */ + --outline-core-button--secondary-bg-color-hover--computed: var(--outline-core-button--secondary-bg-color-hover, var(--outline-blue-600)); + --outline-core-button--secondary-color-hover--computed: var(--outline-core-button--secondary-color-hover, var(--outline-white)); + --outline-core-button--secondary-weight-hover--computed: var(--outline-core-button--secondary-weight-hover, var(--outline-core-button--weight--computed)); + --outline-core-button--secondary-ring-hover--computed: var(--outline-core-button--secondary-ring-hover, none); + + /* Secondary Button(s) - Focus */ + --outline-core-button--secondary-bg-color-focus--computed: var(--outline-core-button--secondary-bg-color-focus, var(--outline-blue-600)); + --outline-core-button--secondary-color-focus--computed: var(--outline-core-button--secondary-color-focus, var(--outline-white)); + --outline-core-button--secondary-weight-focus--computed: var(--outline-core-button--secondary-weight-focus, var(--outline-core-button--weight--computed)); + --outline-core-button--secondary-ring-focus--computed: var(--outline-core-button--secondary-ring-focus, none); + + /* Secondary Button(s) - Disabled */ + --outline-core-button--secondary-disabled-bg-color--computed: var(--outline-core-button--secondary-disabled-bg-color, var(--outline-white)); + --outline-core-button--secondary-disabled-color--computed: var(--outline-core-button--secondary-disabled-color, var(--outline-gray-400)); + --outline-core-button--secondary-disabled-weight--computed: var(--outline-core-button--secondary-disabled-weight, var(--outline-core-button--weight--computed)); + --outline-core-button--secondary-disabled-ring--computed: var(--outline-core-button--secondary-disabled-ring, var(--outline-ring-inset) 0 0 0 var(--outline-ring-offset-width) var(--outline-gray-300)); + + /* Secondary Button(s) - Disabled:Focus */ + --outline-core-button--secondary-disabled-bg-color-focus--computed: var(--outline-core-button--secondary-disabled-bg-color-focus, var(--outline-white)); + --outline-core-button--secondary-disabled-color-focus--computed: var(--outline-core-button--secondary-disabled-color-focus, var(--outline-gray-400)); + --outline-core-button--secondary-disabled-weight-focus--computed: var(--outline-core-button--secondary-disabled-weight-focus, var(--outline-core-button--weight--computed)); + --outline-core-button--secondary-disabled-ring-focus--computed: var(--outline-core-button--secondary-disabled-ring-focus, var(--outline-ring-inset) 0 0 0 var(--outline-ring-offset-width) var(--outline-gray-400)); +} diff --git a/packages/components/outline-core-button/src/css-variables/vars-tertiary.css b/packages/components/outline-core-button/src/css-variables/vars-tertiary.css new file mode 100644 index 000000000..3f6afc1dd --- /dev/null +++ b/packages/components/outline-core-button/src/css-variables/vars-tertiary.css @@ -0,0 +1,73 @@ +/* +Default CSS Variables for the `outline-core-button` tertiary variant. +You can override these using `outline.theme.css`, +or any css file in your consumer application with +a later loading order than `outline.theme.css`. +The variables used to override the default +`outline-core-button` styling can be found in +`outline-core-button.ts` delcared with the `@cssprop` annotations. +*/ + +/* +--outline-core-button--tertiary-padding +--outline-core-button--tertiary-radius +--outline-core-button--tertiary-padding +--outline-core-button--tertiary-radius +--outline-core-button--tertiary-bg-color +--outline-core-button--tertiary-text-color +--outline-core-button--tertiary-weight +--outline-core-button--tertiary-ring +--outline-core-button--tertiary-bg-color-hover +--outline-core-button--tertiary-text-color-hover +--outline-core-button--tertiary-weight-hover +--outline-core-button--tertiary-ring-hover +--outline-core-button--tertiary-bg-color-focus +--outline-core-button--tertiary-text-color-focus +--outline-core-button--tertiary-weight-focus +--outline-core-button--tertiary-ring-focus +--outline-core-button--tertiary-disabled-bg-color +--outline-core-button--tertiary-disabled-text-color +--outline-core-button--tertiary-disabled-weight +--outline-core-button--tertiary-disabled-ring +--outline-core-button--tertiary-disabled-bg-color-focus +--outline-core-button--tertiary-disabled-text-color-focus +--outline-core-button--tertiary-disabled-weight-focus +--outline-core-button--tertiary-disabled-ring-focus +*/ + +:host { + + /* Tertiary Button(s) */ + --outline-core-button--tertiary-padding--computed: var(--outline-core-button--tertiary-padding, var(--outline-core-button--padding--computed)); + --outline-core-button--tertiary-radius--computed: var(--outline-core-button--tertiary-radius, var(--outline-core-button--radius--computed)); + + /* Tertiary Button(s) - Default */ + --outline-core-button--tertiary-bg-color--computed: var(--outline-core-button--tertiary-bg-color, var(--outline-soft-black)); + --outline-core-button--tertiary-color--computed: var(--outline-core-button--tertiary-color, var(--outline-white)); + --outline-core-button--tertiary-weight--computed: var(--outline-core-button--tertiary-weight, var(--outline-core-button--weight--computed)); + --outline-core-button--tertiary-ring--computed: var(--outline-core-button--tertiary-ring, none); + + /* Tertiary Button(s) - Hover */ + --outline-core-button--tertiary-bg-color-hover--computed: var(--outline-core-button--tertiary-bg-color-hover, var(--outline-white)); + --outline-core-button--tertiary-color-hover--computed: var(--outline-core-button--tertiary-color-hover, var(--outline-soft-black)); + --outline-core-button--tertiary-weight-hover--computed: var(--outline-core-button--tertiary-weight-hover, var(--outline-core-button--weight--computed)); + --outline-core-button--tertiary-ring-hover--computed: var(--outline-core-button--tertiary-ring-hover, var(--outline-ring-inset) 0 0 0 var(--outline-ring-offset-width) var(--outline-soft-black)); + + /* Tertiary Button(s) - Focus */ + --outline-core-button--tertiary-bg-color-focus--computed: var(--outline-core-button--tertiary-bg-color-focus, var(--white)); + --outline-core-button--tertiary-color-focus--computed: var(--outline-core-button--tertiary-color-focus, var(--outline-soft-black)); + --outline-core-button--tertiary-weight-focus--computed: var(--outline-core-button--tertiary-weight-focus, var(--outline-core-button--weight--computed)); + --outline-core-button--tertiary-ring-focus--computed: var(--outline-core-button--tertiary-ring-focus, var(--outline-ring-inset) 0 0 0 var(--outline-ring-offset-width) var(--outline-soft-black)); + + /* Tertiary Button(s) - Disabled */ + --outline-core-button--tertiary-disabled-bg-color--computed: var(--outline-core-button--tertiary-disabled-bg-color, var(--outline-white)); + --outline-core-button--tertiary-disabled-color--computed: var(--outline-core-button--tertiary-disabled-color, var(--outline-gray-400)); + --outline-core-button--tertiary-disabled-weight--computed: var(--outline-core-button--tertiary-disabled-weight, var(--outline-core-button--weight--computed)); + --outline-core-button--tertiary-disabled-ring--computed: var(--outline-core-button--tertiary-disabled-ring, var(--outline-ring-inset) 0 0 0 var(--outline-ring-offset-width) var(--outline-gray-300)); + + /* Tertiary Button(s) - Disabled:Focus */ + --outline-core-button--tertiary-disabled-bg-color-focus--computed: var(--outline-core-button--tertiary-disabled-bg-color-focus, var(--outline-white)); + --outline-core-button--tertiary-disabled-color-focus--computed: var(--outline-core-button--tertiary-disabled-color-focus, var(--outline-gray-400)); + --outline-core-button--tertiary-disabled-weight-focus--computed: var(--outline-core-button--tertiary-disabled-weight-focus, var(--outline-core-button--weight--computed)); + --outline-core-button--tertiary-disabled-ring-focus--computed: var(--outline-core-button--tertiary-disabled-ring-focus, var(--outline-ring-inset) 0 0 0 var(--outline-ring-offset-width) var(--outline-gray-400)); +} diff --git a/packages/components/outline-core-button/src/outline-core-button.css b/packages/components/outline-core-button/src/outline-core-button.css new file mode 100644 index 000000000..53b04cb06 --- /dev/null +++ b/packages/components/outline-core-button/src/outline-core-button.css @@ -0,0 +1,244 @@ +@import './css-variables/vars-default.css'; +@import './css-variables/vars-link.css'; +@import './css-variables/vars-primary.css'; +@import './css-variables/vars-secondary.css'; +@import './css-variables/vars-tertiary.css'; + +:host { + /* + * Configuration values for `outline-core-button`. + */ + + /* Shared, but variables that can be overridden per button */ + + display: inline-flex; + + vertical-align: middle; +} + +.primary.is-disabled, +.secondary.is-disabled, +.tertiary.is-disabled { + pointer-events: none; + cursor: not-allowed; + user-select: none; + background-color: var( + --outline-core-button--primary-disabled-bg-color--computed + ) !important; + color: var( + --outline-core-button--primary-disabled-color--computed + ) !important; + border-color: var( + --outline-core-button--primary-disabled-bg-color--computed + ) !important; +} + +button { + display: flex; + flex-wrap: nowrap; + align-items: center; + cursor: pointer; + transition-property: color, background-color, border-color, + text-decoration-color, fill, stroke, outline, outline-color; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; + text-decoration-line: none; + outline: none; + border: none; + + line-height: 1.5; + + border-radius: var(--outline-core-button--radius--computed); + font-family: var(--outline-core-button--family--computed); + font-weight: var(--outline-core-button--weight--computed); + padding: var(--outline-core-button--padding--computed); +} + +[aria-disabled='true'] ::slotted(button) { + pointer-events: none; + cursor: not-allowed; + user-select: none; +} + +.primary { + padding: var(--outline-core-button--primary-padding--computed); + border-radius: var(--outline-core-button--primary-radius--computed); + /* Can change per button state */ + background-color: var(--outline-core-button--primary-bg-color--computed); + color: var(--outline-core-button--primary-color--computed); + font-weight: var(--outline-core-button--primary-weight--computed); + box-shadow: var(--outline-core-button--primary-ring--computed); + + &:hover { + background-color: var( + --outline-core-button--primary-bg-color-hover--computed + ); + color: var(--outline-core-button--primary-color-hover--computed); + font-weight: var(--outline-core-button--primary-weight-hover--computed); + box-shadow: var(--outline-core-button--primary-ring-hover--computed); + } + + &:focus { + background-color: var( + --outline-core-button--primary-bg-color-focus--computed + ); + color: var(--outline-core-button--primary-color-focus--computed); + font-weight: var(--outline-core-button--primary-weight-focus--computed); + box-shadow: var(--outline-core-button--primary-ring-focus--computed); + } +} + +.primary[aria-disabled='true'] { + background-color: var( + --outline-core-button--primary-disabled-bg-color--computed + ); + color: var(--outline-core-button--primary-disabled-color--computed); + font-weight: var(--outline-core-button--primary-disabled-weight--computed); + box-shadow: var(--outline-core-button--primary-disabled-ring--computed); + + &:focus { + background-color: var( + --outline-core-button--primary-disabled-bg-color-focus--computed + ); + color: var(--outline-core-button--primary-disabled-color-focus--computed); + font-weight: var( + --outline-core-button--primary-disabled-weight-focus--computed + ); + box-shadow: var( + --outline-core-button--primary-disabled-ring-focus--computed + ); + } +} + +.secondary { + padding: var(--outline-core-button--secondary-padding--computed); + border-radius: var(--outline-core-button--secondary-radius--computed); + + background-color: var(--outline-core-button--secondary-bg-color--computed); + color: var(--outline-core-button--secondary-color--computed); + font-weight: var(--outline-core-button--secondary-weight--computed); + box-shadow: var(--outline-core-button--secondary-ring--computed); + + &:hover { + background-color: var( + --outline-core-button--secondary-bg-color-hover--computed + ); + color: var(--outline-core-button--secondary-color-hover--computed); + font-weight: var(--outline-core-button--secondary-weight-hover--computed); + box-shadow: var(--outline-core-button--secondary-ring-hover--computed); + } + + &:focus { + background-color: var( + --outline-core-button--secondary-bg-color-focus--computed + ); + color: var(--outline-core-button--secondary-color-focus--computed); + font-weight: var(--outline-core-button--secondary-weight-focus--computed); + box-shadow: var(--outline-core-button--secondary-ring-focus--computed); + } +} + +.secondary[aria-disabled='true'] { + background-color: var( + --outline-core-button--secondary-disabled-bg-color--computed + ); + color: var(--outline-core-button--secondary-disabled-color--computed); + font-weight: var(--outline-core-button--secondary-disabled-weight--computed); + box-shadow: var(--outline-core-button--secondary-disabled-ring--computed); + + &:focus { + background-color: var( + --outline-core-button--secondary-disabled-bg-color-focus--computed + ); + color: var(--outline-core-button--secondary-disabled-color-focus--computed); + font-weight: var( + --outline-core-button--secondary-disabled-weight-focus--computed + ); + box-shadow: var( + --outline-core-button--secondary-disabled-ring-focus--computed + ); + } +} + +.tertiary { + padding: var(--outline-core-button--tertiary-padding--computed); + border-radius: var(--outline-core-button--tertiary-radius--computed); + + background-color: var(--outline-core-button--tertiary-bg-color--computed); + color: var(--outline-core-button--tertiary-color--computed); + font-weight: var(--outline-core-button--tertiary-weight-default--computed); + box-shadow: var(--outline-core-button--tertiary-ring-default--computed); + + &:hover { + background-color: var( + --outline-core-button--tertiary-bg-color-hover--computed + ); + color: var(--outline-core-button--tertiary-color-hover--computed); + font-weight: var(--outline-core-button--tertiary-weight-hover--computed); + box-shadow: var(--outline-core-button--tertiary-ring-hover--computed); + } + + &:focus { + background-color: var( + --outline-core-button--tertiary-bg-color-focus--computed + ); + color: var(--outline-core-button--tertiary-color-focus--computed); + font-weight: var(--outline-core-button--tertiary-weight-focus--computed); + box-shadow: var(--outline-core-button--tertiary-ring-focus--computed); + } +} + +.tertiary[aria-disabled='true'] { + background-color: var( + --outline-core-button--tertiary-disabled-bg-color--computed + ); + color: var(--outline-core-button--tertiary-disabled-color--computed); + font-weight: var(--outline-core-button--tertiary-disabled-weight--computed); + box-shadow: var(--outline-core-button--tertiary-disabled-ring--computed); + + &:focus { + background-color: var( + --outline-core-button--tertiary-disabled-bg-color-focus--computed + ); + color: var(--outline-core-button--tertiary-disabled-color-focus--computed); + font-weight: var( + --outline-core-button--tertiary-disabled-weight-focus--computed + ); + box-shadow: var( + --outline-core-button--tertiary-disabled-ring-focus--computed + ); + } +} + +:host(.icon__button) { + .primary { + border-top-left-radius: 0px !important; + border-bottom-left-radius: 0px !important; + } + + .secondary { + border-top-left-radius: 0px !important; + border-bottom-left-radius: 0px !important; + } + + .tertiary { + border-top-left-radius: 0px !important; + border-bottom-left-radius: 0px !important; + } +} + +/* Button Sizing */ +.small { + font-size: var(--fs-sm); + line-height: var(--lh-sm); +} + +.medium { + font-size: var(--fs-base); + line-height: var(--lh-base); +} + +.large { + font-size: var(--fs-lg); + line-height: var(--lh-lg); +} diff --git a/packages/components/outline-core-button/src/outline-core-button.lightdom.css b/packages/components/outline-core-button/src/outline-core-button.lightdom.css new file mode 100644 index 000000000..a8ab82ef3 --- /dev/null +++ b/packages/components/outline-core-button/src/outline-core-button.lightdom.css @@ -0,0 +1,218 @@ +button { + all: unset; + /* + border-radius: var(--outline-core-button--radius--computed); + font-family: var(--outline-core-button--family--computed); + font-weight: var(--outline-core-button--weight--computed); + padding: var(--outline-core-button--padding--computed); + */ +} + +.primary.is-disabled, +.secondary.is-disabled, +.tertiary.is-disabled { + pointer-events: none; + cursor: not-allowed; + user-select: none; + background-color: var( + --outline-core-button--primary-disabled-bg-color--computed + ) !important; + color: var( + --outline-core-button--primary-disabled-color--computed + ) !important; + border-color: var( + --outline-core-button--primary-disabled-bg-color--computed + ) !important; +} + +button { + display: flex; + flex-wrap: nowrap; + align-items: center; + cursor: pointer; + transition-property: color, background-color, border-color, + text-decoration-color, fill, stroke, outline, outline-color; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; + text-decoration-line: none; + outline: none; + border: none; + line-height: 1.5; + border-radius: var(--outline-core-button--radius--computed); + font-family: var(--outline-core-button--family--computed); + font-weight: var(--outline-core-button--weight--computed); + padding: var(--outline-core-button--padding--computed); +} + +.is-disabled { + pointer-events: none; + cursor: not-allowed; + user-select: none; +} + +.primary { + padding: var(--outline-core-button--primary-padding--computed); + border-radius: var(--outline-core-button--primary-radius--computed); + /* Can change per button state */ + background-color: var(--outline-core-button--primary-bg-color--computed); + color: var(--outline-core-button--primary-color--computed); + font-weight: var(--outline-core-button--primary-weight--computed); + box-shadow: var(--outline-core-button--primary-ring--computed); + + &:hover { + background-color: var( + --outline-core-button--primary-bg-color-hover--computed + ); + color: var(--outline-core-button--primary-color-hover--computed); + font-weight: var(--outline-core-button--primary-weight-hover--computed); + box-shadow: var(--outline-core-button--primary-ring-hover--computed); + } + + &:focus { + background-color: var( + --outline-core-button--primary-bg-color-focus--computed + ); + color: var(--outline-core-button--primary-color-focus--computed); + font-weight: var(--outline-core-button--primary-weight-focus--computed); + box-shadow: var(--outline-core-button--primary-ring-focus--computed); + } +} + +.primary.is-disabled { + background-color: var( + --outline-core-button--primary-disabled-bg-color--computed + ); + color: var(--outline-core-button--primary-disabled-color--computed); + font-weight: var(--outline-core-button--primary-disabled-weight--computed); + box-shadow: var(--outline-core-button--primary-disabled-ring--computed); + + &:focus { + background-color: var( + --outline-core-button--primary-disabled-bg-color-focus--computed + ); + color: var(--outline-core-button--primary-disabled-color-focus--computed); + font-weight: var( + --outline-core-button--primary-disabled-weight-focus--computed + ); + box-shadow: var( + --outline-core-button--primary-disabled-ring-focus--computed + ); + } +} + +.secondary { + padding: var(--outline-core-button--secondary-padding--computed); + border-radius: var(--outline-core-button--secondary-radius--computed); + + background-color: var(--outline-core-button--secondary-bg-color--computed); + color: var(--outline-core-button--secondary-color--computed); + font-weight: var(--outline-core-button--secondary-weight--computed); + box-shadow: var(--outline-core-button--secondary-ring--computed); + + &:hover { + background-color: var( + --outline-core-button--secondary-bg-color-hover--computed + ); + color: var(--outline-core-button--secondary-color-hover--computed); + font-weight: var(--outline-core-button--secondary-weight-hover--computed); + box-shadow: var(--outline-core-button--secondary-ring-hover--computed); + } + + &:focus { + background-color: var( + --outline-core-button--secondary-bg-color-focus--computed + ); + color: var(--outline-core-button--secondary-color-focus--computed); + font-weight: var(--outline-core-button--secondary-weight-focus--computed); + box-shadow: var(--outline-core-button--secondary-ring-focus--computed); + } +} + +.secondary.is-disabled { + background-color: var( + --outline-core-button--secondary-disabled-bg-color--computed + ); + color: var(--outline-core-button--secondary-disabled-color--computed); + font-weight: var(--outline-core-button--secondary-disabled-weight--computed); + box-shadow: var(--outline-core-button--secondary-disabled-ring--computed); + + &:focus { + background-color: var( + --outline-core-button--secondary-disabled-bg-color-focus--computed + ); + color: var(--outline-core-button--secondary-disabled-color-focus--computed); + font-weight: var( + --outline-core-button--secondary-disabled-weight-focus--computed + ); + box-shadow: var( + --outline-core-button--secondary-disabled-ring-focus--computed + ); + } +} + +.tertiary { + padding: var(--outline-core-button--tertiary-padding--computed); + border-radius: var(--outline-core-button--tertiary-radius--computed); + + background-color: var(--outline-core-button--tertiary-bg-color--computed); + color: var(--outline-core-button--tertiary-color--computed); + font-weight: var(--outline-core-button--tertiary-weight-default--computed); + box-shadow: var(--outline-core-button--tertiary-ring-default--computed); + + &:hover { + background-color: var( + --outline-core-button--tertiary-bg-color-hover--computed + ); + color: var(--outline-core-button--tertiary-color-hover--computed); + font-weight: var(--outline-core-button--tertiary-weight-hover--computed); + box-shadow: var(--outline-core-button--tertiary-ring-hover--computed); + } + + &:focus { + background-color: var( + --outline-core-button--tertiary-bg-color-focus--computed + ); + color: var(--outline-core-button--tertiary-color-focus--computed); + font-weight: var(--outline-core-button--tertiary-weight-focus--computed); + box-shadow: var(--outline-core-button--tertiary-ring-focus--computed); + } +} + +.tertiary.is-disabled { + background-color: var( + --outline-core-button--tertiary-disabled-bg-color--computed + ); + color: var(--outline-core-button--tertiary-disabled-color--computed); + font-weight: var(--outline-core-button--tertiary-disabled-weight--computed); + box-shadow: var(--outline-core-button--tertiary-disabled-ring--computed); + + &:focus { + background-color: var( + --outline-core-button--tertiary-disabled-bg-color-focus--computed + ); + color: var(--outline-core-button--tertiary-disabled-color-focus--computed); + font-weight: var( + --outline-core-button--tertiary-disabled-weight-focus--computed + ); + box-shadow: var( + --outline-core-button--tertiary-disabled-ring-focus--computed + ); + } +} + +/* Button Sizing */ + +.small { + font-size: var(--fs-sm); + line-height: var(--lh-sm); +} + +.medium { + font-size: var(--fs-base); + line-height: var(--lh-base); +} + +.large { + font-size: var(--fs-lg); + line-height: var(--lh-lg); +} diff --git a/packages/components/outline-core-button/src/outline-core-button.ts b/packages/components/outline-core-button/src/outline-core-button.ts new file mode 100644 index 000000000..5dca99091 --- /dev/null +++ b/packages/components/outline-core-button/src/outline-core-button.ts @@ -0,0 +1,152 @@ +import { CSSResultGroup, html, TemplateResult } from 'lit'; +import { customElement, property, state } from 'lit/decorators.js'; +import { OutlineElement } from '@phase2/outline-core'; +import { AdoptedStyleSheets } from '@phase2/outline-adopted-stylesheets-controller'; +import componentStyles from './outline-core-button.css.lit'; +import globalStyles from './outline-core-button.lightdom.css.lit'; + +export const buttonVariantsTypes = ['primary', 'secondary', 'tertiary']; +export const buttonSizeTypes = ['small', 'medium', 'large']; + +export type ButtonVariant = (typeof buttonVariantsTypes)[number]; +export type ButtonSize = keyof typeof buttonSizeTypes; + +/** + * The Outline Core Button component + * @element outline-core-button + * @since 0.0.1 + * + * @prop {string} buttonUrl - The url to use for a link. This will render an anchor element. + * @prop {string} buttonTarget - The target to use for a link, used in conjunction with the url attribute. + * @prop {string} buttonLabel - ARIA label attribute to pass down to the resulting button or a element. + * @prop {string} buttonVariant - The button variant. One of: link, primary, secondary, tertiary. + * @prop {string} buttonSize - The button size. One of: small, medium, large. + * @prop {boolean} isDisabled - Whether the button is disabled. + * @attr {string} button-url - The url to use for a link. This will render an anchor element. + * @attr {string} button-target - The target to use for a link, used in conjunction with the url attribute. + * @attr {string} button-label -ARIA label attribute to pass down to the resulting button or a element. + * @attr {string} button-variant - The button variant. One of: link, primary, secondary, tertiary. + * @attr {string} button-size - The button size. One of: small, medium, large. + * @attr {boolean} is-disabled - Whether the button is disabled. + * @slot - default slot, used for button text and any related visual content (icon). + */ +@customElement('outline-core-button') +export class OutlineCoreButton extends OutlineElement { + static styles: CSSResultGroup = [componentStyles]; + AdoptedStyleSheets: AdoptedStyleSheets; + + @state() buttonsVariantList = buttonVariantsTypes; + + connectedCallback() { + super.connectedCallback(); + this.AdoptedStyleSheets = new AdoptedStyleSheets(globalStyles); + this.addController(this.AdoptedStyleSheets); + } + + /** + * The url to use for a link. This will render an anchor element. + * Do not set this prop if you want to render a button element. + */ + @property({ type: String, attribute: 'button-url' }) + buttonUrl: string; + + /** + * ARIA label attribute to pass down to the resulting button or a + * element. This is required for accessibility if we use a button + * with an icon only. + */ + @property({ type: String, attribute: 'button-label' }) + buttonLabel: string; + + /** + * The button style variant to use. + */ + // @property({ type: String, attribute: 'button-variant' }) + // buttonVariant: ButtonVariant = ButtonVariant.primary; + + @property({ + type: String, + attribute: 'button-variant', + converter: buttonVariant => { + if ( + buttonVariant && + !Object.values(buttonVariantsTypes).includes(buttonVariant) + ) { + buttonVariant = buttonVariantsTypes[0]; + } + return buttonVariant; + }, + }) + buttonVariant: ButtonVariant = 'primary'; + + /** + * The button size to use. + */ + @property({ + type: String, + attribute: 'button-size', + converter: buttonSize => { + if (buttonSize && !Object.values(buttonSizeTypes).includes(buttonSize)) { + buttonSize = buttonSizeTypes[0]; + } + return buttonSize as String; + }, + }) + buttonSize: ButtonSize; + + /** + * Whether the button is disabled. Only applies to + * implementations not using the url property + */ + @property({ type: Boolean, attribute: 'is-disabled' }) + isDisabled = false; + + // Slotted elements classes arent getting overridden when the component updates. + + /** + * Component render function + * @returns TemplateResult + * @todo This should utilize `outline-core-link` component. + */ + render(): TemplateResult { + const typedValues = buttonSizeTypes.concat(buttonVariantsTypes); + // added Disabled prop to class list for removal + typedValues.push('disabled'); + const slottedButton: HTMLButtonElement | null = + this.querySelector('button') ?? null; + if (slottedButton) { + // add classes from shadow DOM of component to light DOM of Slot + slottedButton.classList.remove(...typedValues); + if (this.buttonSize) { + slottedButton?.classList.add(this.buttonSize as string); + } + if (this.buttonVariant) { + slottedButton?.classList.add(this.buttonVariant as string); + } + if (this.isDisabled) { + slottedButton?.classList.add('disabled'); + } + } + + return html` +
+ +
+ `; + } + + updated() { + // checks the is-disabled prop and manages aria-disabled attributes on the element itself. + if (this.hasAttribute('is-disabled')) { + this.setAttribute('aria-disabled', 'true'); + } else { + this.setAttribute('aria-disabled', 'false'); + } + } +} + +declare global { + interface HTMLElementTagNameMap { + 'outline-core-button': OutlineCoreButton; + } +} diff --git a/packages/components/outline-core-button/tsconfig.build.json b/packages/components/outline-core-button/tsconfig.build.json new file mode 100644 index 000000000..5eac9d313 --- /dev/null +++ b/packages/components/outline-core-button/tsconfig.build.json @@ -0,0 +1,9 @@ +{ + "extends": "../../../tsconfig.json", + "compilerOptions": { + "rootDir": ".", + "outDir": "./dist" + }, + "include": ["index.ts", "src/**/*", "tests/**/*"], + "references": [{ "path": "../../outline-core/tsconfig.build.json" }] +} diff --git a/packages/controllers/adopted-stylesheets/CHANGELOG.md b/packages/controllers/adopted-stylesheets/CHANGELOG.md index 5a7952dd0..9a0b86949 100644 --- a/packages/controllers/adopted-stylesheets/CHANGELOG.md +++ b/packages/controllers/adopted-stylesheets/CHANGELOG.md @@ -1,5 +1,11 @@ # @phase2/outline-adopted-stylesheets-controller +## 0.0.5 + +### Patch Changes + +- Updates for outline-core-button. + ## 0.0.4 ### Patch Changes diff --git a/packages/controllers/adopted-stylesheets/README.md b/packages/controllers/adopted-stylesheets/README.md index cdae3623f..858742dc3 100644 --- a/packages/controllers/adopted-stylesheets/README.md +++ b/packages/controllers/adopted-stylesheets/README.md @@ -34,7 +34,7 @@ The `AdoptedStylesheets` controller provides the following methods: Here is an example of how to use the `AdoptedStylesheets` controller in a component: ```typescript -import { AdoptedStylesheets } from '@phase2/outline-adopted-stylesheets-controller'; +import { AdoptedStyleSheets } from '@phase2/outline-adopted-stylesheets-controller'; import { css, CSSResult } from 'lit'; import { OutlineElement } from '@phase2/outline-core'; import globalStyles from './my-component.lightDom.css.lit'; diff --git a/packages/controllers/adopted-stylesheets/package.json b/packages/controllers/adopted-stylesheets/package.json index 02a0915f2..91d69f03c 100644 --- a/packages/controllers/adopted-stylesheets/package.json +++ b/packages/controllers/adopted-stylesheets/package.json @@ -1,6 +1,6 @@ { "name": "@phase2/outline-adopted-stylesheets-controller", - "version": "0.0.4", + "version": "0.0.5", "description": "Controller to help with managing native AdoptedStylesheet implementations.", "keywords": [ "outline components", diff --git a/packages/documentation/outline-storybook/CHANGELOG.md b/packages/documentation/outline-storybook/CHANGELOG.md index eac7208a5..bd701aa6f 100644 --- a/packages/documentation/outline-storybook/CHANGELOG.md +++ b/packages/documentation/outline-storybook/CHANGELOG.md @@ -1,5 +1,11 @@ # @phase2/outline-storybook +## 0.1.2 + +### Patch Changes + +- Updates for outline-core-button. + ## 0.1.1 ### Patch Changes diff --git a/packages/documentation/outline-storybook/package.json b/packages/documentation/outline-storybook/package.json index bf63ab22c..cbe7ac8df 100644 --- a/packages/documentation/outline-storybook/package.json +++ b/packages/documentation/outline-storybook/package.json @@ -1,7 +1,7 @@ { "name": "@phase2/outline-storybook", "description": "Storybook integration for Outline", - "version": "0.1.1", + "version": "0.1.2", "license": "MIT", "scripts": { "package": "yarn publish" diff --git a/packages/documentation/outline-storybook/stories/components/outline-button.stories.ts b/packages/documentation/outline-storybook/stories/components/outline-button.stories.ts deleted file mode 100644 index a83be75ce..000000000 --- a/packages/documentation/outline-storybook/stories/components/outline-button.stories.ts +++ /dev/null @@ -1,394 +0,0 @@ -/* eslint-disable @typescript-eslint/no-explicit-any */ -import { html, TemplateResult } from 'lit'; -import { ifDefined } from 'lit/directives/if-defined.js'; -import { argTypeSlotContent } from '@phase2/outline-core'; -import { ButtonVariant, ButtonSize } from '@phase2/outline-button'; - -import '@phase2/outline-button'; - -const buttonOptions: ButtonVariant[] = [ - 'link', - 'primary', - 'secondary', - 'tertiary', -]; -const buttonSizes: ButtonSize[] = ['small', 'medium', 'large']; - -export default { - title: 'Navigation/Button', - component: 'outline-button', - // Tags are a new feature coming in 7.1, that we are using to drive this behaviour. - tags: ['docsPage'], - argTypes: { - ...argTypeSlotContent, - target: { - name: 'button-target', - description: 'https://www.w3schools.com/tags/att_a_target.asp', - options: [undefined, '_blank', '_self', '_parent', '_top'], - control: { - type: 'select', - }, - table: { category: 'Properties', defaultValue: { summary: 'NULL' } }, - }, - isDisabled: { - name: 'is-disabled', - table: { category: 'Properties', defaultValue: { summary: 'false' } }, - description: - 'Set whether the button is disabled. Only applies to implementations not using the url property', - control: { - type: 'boolean', - }, - }, - url: { - name: 'button-url', - table: { category: 'Properties', defaultValue: { summary: 'NULL' } }, - description: - 'The url to use for a link. This will render an anchor element. Do not set this prop if you want to render a button element.', - control: { - type: 'text', - }, - }, - label: { - name: 'button-label', - table: { category: 'Properties', defaultValue: { summary: 'NULL' } }, - description: - 'Label to be passed to `aria-label` on the link or button element.', - control: { - type: 'text', - }, - }, - variant: { - name: 'button-variant', - table: { category: 'Properties', defaultValue: { summary: 'primary' } }, - description: 'The button style variant to use.', - options: buttonOptions, - control: { - type: 'select', - }, - }, - size: { - name: 'button-size', - table: { category: 'Properties', defaultValue: { summary: 'medium' } }, - description: 'The button size variant.', - options: buttonSizes, - control: { - type: 'select', - }, - }, - }, - args: { - variant: 'primary', - size: 'medium', - }, - parameters: { - docs: { - description: { - component: ` -## Difference from \`button\` element - -This is rendered as an \`a\` element if a link and a \`button\` element if not a link. This allows for consistent styling that matches the user expectation of a button while matching the browser expectation for those elements. - - - CSS Variables -

Any consumer application that includes \`outline.theme.css\` can simply overwrite any relevant CSS Variables in a subsequent CSS include to affect change on the element styling using the following variables.

-

Additional documentation and references for available CSS Variables can be found in the following locations.

- - - `, - }, - }, - }, -}; - -const Template = ({ - defaultSlot, - isDisabled, - url, - target, - variant, - size, - onClick, - onKeyUp, -}: any): TemplateResult => - html` - - ${defaultSlot} - - `; - -export const Link: any = Template.bind({}); -Link.args = { - defaultSlot: 'Link Button', - url: 'https://outline.phase2tech.com', - target: '_blank', - variant: 'primary', - isDisabled: false, -}; - -const PrimaryButtonsTemplate = (): TemplateResult => - html` - Default, Hover & Focus States -
- Large Link - Link - Small Link - Small Button - Button - Large Button -
- - Disabled States -
- Large Link - Link - Small Link - Small Button - Button - Large Button -
- - Including Icons -
- - Large Link - - - - Link - - - - Small Link - - - - Small Button - - - - Button - - - - Large Button - - -
-`; - -export const PrimaryButtons: any = PrimaryButtonsTemplate.bind({}); -PrimaryButtons.parameters = { - docs: { - description: { - story: ` -## The \`primary\` variant. - -This is the primary button style variant. It is used for buttons that behave like a button, but look like a link, but is a button. Or a link. -`, - }, - }, -}; - -const SecondaryButtonsTemplate = (): TemplateResult => - html` -Default, Hover & Focus States -
- Large Link - Link - Small Link - Small Button - Button - Large Button -
-Disabled States -
- Large Link - Link - Small Link - Small Button - Button - Large Button -
-Including Icons -
- - Large Link - - - - Link - - - - Small Link - - - - Small Button - - - - Button - - - - Large Button - - -
-`; - -export const SecondaryButtons: any = SecondaryButtonsTemplate.bind({}); -SecondaryButtons.parameters = { - docs: { - description: { - story: ` -## The \`secondary\` variant. - -This is the secondary button style variant. It is used for buttons that behave like a button, but look like a link, but is a button. Or a link. -`, - }, - }, -}; - -const TertiaryButtonsTemplate = (): TemplateResult => - html` - Default, Hover & Focus States -
- Large Link - Link - Small Link - Small Button - Button - Large Button -
- - Disabled States -
- Large Link - Link - Small Link - Small Button - Button - Large Button -
- - Including Icons -
- - Large Link - - - - Link - - - - Small Link - - - - Small Button - - - - Button - - - - Large Button - - -
-`; - -export const TertiaryButtons: any = TertiaryButtonsTemplate.bind({}); -TertiaryButtons.parameters = { - docs: { - description: { - story: ` -## The \`tertiary\` variant. - -This is the tertiary button style variant. It is used for buttons that behave like a button, but look like a link, but is a button. Or a link. -`, - }, - }, -}; - -const LinkButtonsTemplate = (): TemplateResult => - html` - Default, Hover & Focus States -
- Large Link - Link - Small Link - Small Button - Button - Large Button -
- - Disabled States -
- Large Link - Link - Small Link - Small Button - Button - Large Button -
- - Including Icons -
- - Large Link - - - - Link - - - - Small Link - - - - Small Button - - - - Button - - - - Large Button - - -
-`; - -export const LinkButtons: any = LinkButtonsTemplate.bind({}); -LinkButtons.parameters = { - docs: { - description: { - story: ` -## The \`link\` variant. - -This is the link button style variant. It is used for buttons that behave like a button, but look like a link, but is a button. Or a link. -`, - }, - }, -}; diff --git a/packages/documentation/outline-storybook/stories/components/outline-core-button.stories.mdx b/packages/documentation/outline-storybook/stories/components/outline-core-button.stories.mdx new file mode 100644 index 000000000..f0859810a --- /dev/null +++ b/packages/documentation/outline-storybook/stories/components/outline-core-button.stories.mdx @@ -0,0 +1,64 @@ +import { Meta } from '@storybook/addon-docs'; + +import '@phase2/outline-core-button'; + + + +[![Latest version for outline-core-button](https://img.shields.io/npm/v/@phase2/outline-core-button)](https://www.npmjs.com/package/@phase2/outline-core-button) + +# `` `OutlineCoreButton` + +The `outline-core-button` component allows complete flexibility in how you choose to render a link element across a single or multiple applications. + + + Documentation Status: Needs work +

This documentation is accurate, though the inclusion of several of the following topics or examples would be ideal.

+
    +
  • **@todo:** Fix styling for Primary variant.
    • +
  • **@todo:** Fix styling for Secondary variant.
    • +
  • **@todo:** Fix styling for Tertiary variant.
    • +
  • **@todo:** Demonstrate overriding variants, and adding new ones.
    • +
+ +
+ +## Introduction to the **`outline-core-button`** component + +The `outline-core-button` component ... + +## Primary Buttons +### Default, Hover & Focus States +
+ + + +
+--- +```html preview-story + + + +``` +### Disabled States +
+ + + +
+--- +```html preview-story + + + +``` diff --git a/yarn.lock b/yarn.lock index 5f501a8af..a0408ed67 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2859,6 +2859,18 @@ "@types/sinon-chai" "^3.2.3" chai-a11y-axe "^1.5.0" +"@phase2/outline-config@^0.0.10": + version "0.0.10" + resolved "https://registry.yarnpkg.com/@phase2/outline-config/-/outline-config-0.0.10.tgz#ddeee1a39bd2be507ce36fc9983d12cb3a8f7a03" + integrity sha512-pHykGIyBj6kmAcJ8CijQjmFANN6cAIdWLoZEOeF0rdo0alHuwsWVvOq9e5vKzDeaiIEU8rwRvF1QpLNtOf2kcA== + +"@phase2/outline-core@^0.1.10": + version "0.1.12" + resolved "https://registry.yarnpkg.com/@phase2/outline-core/-/outline-core-0.1.12.tgz#a76a369523359b87b8b23f7986d7a6e372e8c547" + integrity sha512-mWbBKAl3Z3v5ZQO/CIDXXlNQfwsG8QxG3cVY6MfJziBV5elLwS+26MECfXsh2rSov1S0sh0quq6jpvbVgSeGCg== + dependencies: + "@phase2/outline-config" "^0.0.10" + "@pkgjs/parseargs@^0.11.0": version "0.11.0" resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33" @@ -16222,47 +16234,47 @@ tunnel-agent@^0.6.0: dependencies: safe-buffer "^5.0.1" -turbo-darwin-64@1.10.12: - version "1.10.12" - resolved "https://registry.yarnpkg.com/turbo-darwin-64/-/turbo-darwin-64-1.10.12.tgz#a3d9d6bd3436e795254865bc3d76a9c79aff8085" - integrity sha512-vmDfGVPl5/aFenAbOj3eOx3ePNcWVUyZwYr7taRl0ZBbmv2TzjRiFotO4vrKCiTVnbqjQqAFQWY2ugbqCI1kOQ== - -turbo-darwin-arm64@1.10.12: - version "1.10.12" - resolved "https://registry.yarnpkg.com/turbo-darwin-arm64/-/turbo-darwin-arm64-1.10.12.tgz#ff1d9466935687ca68c0dee88a909c34cc654357" - integrity sha512-3JliEESLNX2s7g54SOBqqkqJ7UhcOGkS0ywMr5SNuvF6kWVTbuUq7uBU/sVbGq8RwvK1ONlhPvJne5MUqBCTCQ== - -turbo-linux-64@1.10.12: - version "1.10.12" - resolved "https://registry.yarnpkg.com/turbo-linux-64/-/turbo-linux-64-1.10.12.tgz#d184a491cc67c07672d339e36427378d0fc6b82e" - integrity sha512-siYhgeX0DidIfHSgCR95b8xPee9enKSOjCzx7EjTLmPqPaCiVebRYvbOIYdQWRqiaKh9yfhUtFmtMOMScUf1gg== - -turbo-linux-arm64@1.10.12: - version "1.10.12" - resolved "https://registry.yarnpkg.com/turbo-linux-arm64/-/turbo-linux-arm64-1.10.12.tgz#44e6ca10b20fd4c59f8c85acf8366c7c09ebca81" - integrity sha512-K/ZhvD9l4SslclaMkTiIrnfcACgos79YcAo4kwc8bnMQaKuUeRpM15sxLpZp3xDjDg8EY93vsKyjaOhdFG2UbA== - -turbo-windows-64@1.10.12: - version "1.10.12" - resolved "https://registry.yarnpkg.com/turbo-windows-64/-/turbo-windows-64-1.10.12.tgz#36380eca8e7b0505d08b87a084efab1500b2a80e" - integrity sha512-7FSgSwvktWDNOqV65l9AbZwcoueAILeE4L7JvjauNASAjjbuzXGCEq5uN8AQU3U5BOFj4TdXrVmO2dX+lLu8Zg== - -turbo-windows-arm64@1.10.12: - version "1.10.12" - resolved "https://registry.yarnpkg.com/turbo-windows-arm64/-/turbo-windows-arm64-1.10.12.tgz#757ad59b9abf1949f22280bee6e8aad253743ba5" - integrity sha512-gCNXF52dwom1HLY9ry/cneBPOKTBHhzpqhMylcyvJP0vp9zeMQQkt6yjYv+6QdnmELC92CtKNp2FsNZo+z0pyw== - -turbo@^1.2.16: - version "1.10.12" - resolved "https://registry.yarnpkg.com/turbo/-/turbo-1.10.12.tgz#cd6f56b92da0600dae9fd94230483556a5c83187" - integrity sha512-WM3+jTfQWnB9W208pmP4oeehZcC6JQNlydb/ZHMRrhmQa+htGhWLCzd6Q9rLe0MwZLPpSPFV2/bN5egCLyoKjQ== +turbo-darwin-64@1.10.16: + version "1.10.16" + resolved "https://registry.yarnpkg.com/turbo-darwin-64/-/turbo-darwin-64-1.10.16.tgz#5a8717c1372f2a75e8cfe0b4b6455119ce410b19" + integrity sha512-+Jk91FNcp9e9NCLYlvDDlp2HwEDp14F9N42IoW3dmHI5ZkGSXzalbhVcrx3DOox3QfiNUHxzWg4d7CnVNCuuMg== + +turbo-darwin-arm64@1.10.16: + version "1.10.16" + resolved "https://registry.yarnpkg.com/turbo-darwin-arm64/-/turbo-darwin-arm64-1.10.16.tgz#19b5b63acf7ee0fce7e1fe5850e093c2ac9c73f5" + integrity sha512-jqGpFZipIivkRp/i+jnL8npX0VssE6IAVNKtu573LXtssZdV/S+fRGYA16tI46xJGxSAivrZ/IcgZrV6Jk80bw== + +turbo-linux-64@1.10.16: + version "1.10.16" + resolved "https://registry.yarnpkg.com/turbo-linux-64/-/turbo-linux-64-1.10.16.tgz#ee97c0011553a96bd7995e7bcc6e65aab8996798" + integrity sha512-PpqEZHwLoizQ6sTUvmImcRmACyRk9EWLXGlqceogPZsJ1jTRK3sfcF9fC2W56zkSIzuLEP07k5kl+ZxJd8JMcg== + +turbo-linux-arm64@1.10.16: + version "1.10.16" + resolved "https://registry.yarnpkg.com/turbo-linux-arm64/-/turbo-linux-arm64-1.10.16.tgz#2723cc2a846d89df7484002161b25673f4f04009" + integrity sha512-TMjFYz8to1QE0fKVXCIvG/4giyfnmqcQIwjdNfJvKjBxn22PpbjeuFuQ5kNXshUTRaTJihFbuuCcb5OYFNx4uw== + +turbo-windows-64@1.10.16: + version "1.10.16" + resolved "https://registry.yarnpkg.com/turbo-windows-64/-/turbo-windows-64-1.10.16.tgz#87c46a78502a86dec73634b255a6b3471285969b" + integrity sha512-+jsf68krs0N66FfC4/zZvioUap/Tq3sPFumnMV+EBo8jFdqs4yehd6+MxIwYTjSQLIcpH8KoNMB0gQYhJRLZzw== + +turbo-windows-arm64@1.10.16: + version "1.10.16" + resolved "https://registry.yarnpkg.com/turbo-windows-arm64/-/turbo-windows-arm64-1.10.16.tgz#a6208c2bc27e5e6ef0aa4a3e64389c4285c3f274" + integrity sha512-sKm3hcMM1bl0B3PLG4ifidicOGfoJmOEacM5JtgBkYM48ncMHjkHfFY7HrJHZHUnXM4l05RQTpLFoOl/uIo2HQ== + +turbo@^1.10.16: + version "1.10.16" + resolved "https://registry.yarnpkg.com/turbo/-/turbo-1.10.16.tgz#51601a65a3aa56d1b9d9cb9a2ab3a5a2eab41e19" + integrity sha512-2CEaK4FIuSZiP83iFa9GqMTQhroW2QryckVqUydmg4tx78baftTOS0O+oDAhvo9r9Nit4xUEtC1RAHoqs6ZEtg== optionalDependencies: - turbo-darwin-64 "1.10.12" - turbo-darwin-arm64 "1.10.12" - turbo-linux-64 "1.10.12" - turbo-linux-arm64 "1.10.12" - turbo-windows-64 "1.10.12" - turbo-windows-arm64 "1.10.12" + turbo-darwin-64 "1.10.16" + turbo-darwin-arm64 "1.10.16" + turbo-linux-64 "1.10.16" + turbo-linux-arm64 "1.10.16" + turbo-windows-64 "1.10.16" + turbo-windows-arm64 "1.10.16" type-check@^0.4.0, type-check@~0.4.0: version "0.4.0"