From 0c0fbf2a0f500b745d8735e510354edb9e9f3e94 Mon Sep 17 00:00:00 2001 From: Wes Ruvalcaba Date: Mon, 13 Jul 2020 12:08:04 -0400 Subject: [PATCH] CPFED-3761 - Removing PFE code and replacing with deps and symlinks --- @patternfly | 1 + elements/pfe-sass | 1 + elements/pfe-sass/.npmignore | 1 - elements/pfe-sass/LICENSE.txt | 19 - elements/pfe-sass/README.md | 50 -- elements/pfe-sass/extends/_extends.scss | 36 -- elements/pfe-sass/functions/_1-tools.scss | 219 ------- .../functions/_custom-properties.scss | 236 ------- elements/pfe-sass/functions/_general.scss | 75 --- elements/pfe-sass/gulpfile.js | 62 -- elements/pfe-sass/maps/_broadcasted.scss | 40 -- elements/pfe-sass/maps/_colors.scss | 159 ----- elements/pfe-sass/maps/_general.scss | 55 -- elements/pfe-sass/maps/_zindex.scss | 6 - elements/pfe-sass/mixins/_components.scss | 232 ------- elements/pfe-sass/mixins/_containers.scss | 39 -- elements/pfe-sass/mixins/_copy-mixins.scss | 15 - .../pfe-sass/mixins/_custom-properties.scss | 250 -------- elements/pfe-sass/mixins/_mixins.scss | 111 ---- elements/pfe-sass/package-lock.json | 5 - elements/pfe-sass/package.json | 51 -- elements/pfe-sass/pfe-sass.scss | 7 - .../pfe-sass/variables/_1-definitions.scss | 7 - elements/pfe-sass/variables/_2-crayon.scss | 132 ---- elements/pfe-sass/variables/_3-colors.scss | 38 -- elements/pfe-styles | 1 + elements/pfe-styles/.babelrc | 4 - elements/pfe-styles/.editorconfig | 17 - elements/pfe-styles/.gitignore | 2 - elements/pfe-styles/.npmignore | 1 - elements/pfe-styles/LICENSE.txt | 19 - elements/pfe-styles/README.md | 152 ----- elements/pfe-styles/demo/index.html | 281 -------- elements/pfe-styles/demo/pfe-layouts.story.js | 75 --- elements/pfe-styles/demo/pfe-styles.story.js | 75 --- elements/pfe-styles/demo/theme-test.html | 599 ------------------ elements/pfe-styles/gulpfile.js | 5 - elements/pfe-styles/package-lock.json | 11 - elements/pfe-styles/package.json | 51 -- .../pfe-styles/src/layouts/_alignments.scss | 13 - .../pfe-styles/src/layouts/_bullseye.scss | 10 - elements/pfe-styles/src/layouts/_grid.scss | 187 ------ elements/pfe-styles/src/pfe-base.scss | 115 ---- elements/pfe-styles/src/pfe-colors.scss | 78 --- elements/pfe-styles/src/pfe-context.scss | 9 - elements/pfe-styles/src/pfe-layouts.scss | 5 - elements/pfelement | 1 + elements/pfelement/.npmignore | 1 - elements/pfelement/LICENSE.txt | 19 - elements/pfelement/README.md | 187 ------ elements/pfelement/demo/index.html | 23 - elements/pfelement/gulpfile.js | 4 - elements/pfelement/package-lock.json | 5 - elements/pfelement/package.json | 55 -- elements/pfelement/rollup.config.js | 5 - .../pfelement/src/pfelement--noscript.css | 4 - elements/pfelement/src/pfelement.js | 422 ------------ elements/pfelement/src/pfelement.scss | 26 - elements/pfelement/src/reveal.js | 28 - elements/pfelement/test/fouc-test.html | 79 --- elements/pfelement/test/index.html | 19 - elements/pfelement/test/module-amd-test.html | 42 -- elements/pfelement/test/module-esm-test.html | 38 -- .../pfelement/test/module-global-test.html | 39 -- .../pfelement_cascade_attribute_test.html | 159 ----- .../pfelement/test/pfelement_emitEvent.html | 108 ---- .../test/pfelement_logging_test.html | 85 --- elements/pfelement/test/pfelement_test.html | 143 ----- .../templates/scripts/gulpfile.factory.js | 4 +- package-lock.json | 21 + package.json | 6 +- scripts/gulpfile.factory.js | 2 +- 72 files changed, 32 insertions(+), 5050 deletions(-) create mode 120000 @patternfly create mode 120000 elements/pfe-sass delete mode 100644 elements/pfe-sass/.npmignore delete mode 100644 elements/pfe-sass/LICENSE.txt delete mode 100644 elements/pfe-sass/README.md delete mode 100644 elements/pfe-sass/extends/_extends.scss delete mode 100644 elements/pfe-sass/functions/_1-tools.scss delete mode 100644 elements/pfe-sass/functions/_custom-properties.scss delete mode 100644 elements/pfe-sass/functions/_general.scss delete mode 100644 elements/pfe-sass/gulpfile.js delete mode 100644 elements/pfe-sass/maps/_broadcasted.scss delete mode 100644 elements/pfe-sass/maps/_colors.scss delete mode 100644 elements/pfe-sass/maps/_general.scss delete mode 100644 elements/pfe-sass/maps/_zindex.scss delete mode 100644 elements/pfe-sass/mixins/_components.scss delete mode 100644 elements/pfe-sass/mixins/_containers.scss delete mode 100644 elements/pfe-sass/mixins/_copy-mixins.scss delete mode 100644 elements/pfe-sass/mixins/_custom-properties.scss delete mode 100644 elements/pfe-sass/mixins/_mixins.scss delete mode 100644 elements/pfe-sass/package-lock.json delete mode 100644 elements/pfe-sass/package.json delete mode 100644 elements/pfe-sass/pfe-sass.scss delete mode 100644 elements/pfe-sass/variables/_1-definitions.scss delete mode 100644 elements/pfe-sass/variables/_2-crayon.scss delete mode 100644 elements/pfe-sass/variables/_3-colors.scss create mode 120000 elements/pfe-styles delete mode 100644 elements/pfe-styles/.babelrc delete mode 100644 elements/pfe-styles/.editorconfig delete mode 100644 elements/pfe-styles/.gitignore delete mode 100644 elements/pfe-styles/.npmignore delete mode 100644 elements/pfe-styles/LICENSE.txt delete mode 100644 elements/pfe-styles/README.md delete mode 100644 elements/pfe-styles/demo/index.html delete mode 100644 elements/pfe-styles/demo/pfe-layouts.story.js delete mode 100644 elements/pfe-styles/demo/pfe-styles.story.js delete mode 100644 elements/pfe-styles/demo/theme-test.html delete mode 100644 elements/pfe-styles/gulpfile.js delete mode 100644 elements/pfe-styles/package-lock.json delete mode 100644 elements/pfe-styles/package.json delete mode 100644 elements/pfe-styles/src/layouts/_alignments.scss delete mode 100644 elements/pfe-styles/src/layouts/_bullseye.scss delete mode 100644 elements/pfe-styles/src/layouts/_grid.scss delete mode 100644 elements/pfe-styles/src/pfe-base.scss delete mode 100644 elements/pfe-styles/src/pfe-colors.scss delete mode 100644 elements/pfe-styles/src/pfe-context.scss delete mode 100644 elements/pfe-styles/src/pfe-layouts.scss create mode 120000 elements/pfelement delete mode 100644 elements/pfelement/.npmignore delete mode 100644 elements/pfelement/LICENSE.txt delete mode 100644 elements/pfelement/README.md delete mode 100644 elements/pfelement/demo/index.html delete mode 100644 elements/pfelement/gulpfile.js delete mode 100644 elements/pfelement/package-lock.json delete mode 100644 elements/pfelement/package.json delete mode 100644 elements/pfelement/rollup.config.js delete mode 100644 elements/pfelement/src/pfelement--noscript.css delete mode 100644 elements/pfelement/src/pfelement.js delete mode 100644 elements/pfelement/src/pfelement.scss delete mode 100644 elements/pfelement/src/reveal.js delete mode 100644 elements/pfelement/test/fouc-test.html delete mode 100644 elements/pfelement/test/index.html delete mode 100644 elements/pfelement/test/module-amd-test.html delete mode 100644 elements/pfelement/test/module-esm-test.html delete mode 100644 elements/pfelement/test/module-global-test.html delete mode 100644 elements/pfelement/test/pfelement_cascade_attribute_test.html delete mode 100644 elements/pfelement/test/pfelement_emitEvent.html delete mode 100644 elements/pfelement/test/pfelement_logging_test.html delete mode 100644 elements/pfelement/test/pfelement_test.html diff --git a/@patternfly b/@patternfly new file mode 120000 index 00000000..cd27a939 --- /dev/null +++ b/@patternfly @@ -0,0 +1 @@ +node_modules/@patternfly \ No newline at end of file diff --git a/elements/pfe-sass b/elements/pfe-sass new file mode 120000 index 00000000..12554e70 --- /dev/null +++ b/elements/pfe-sass @@ -0,0 +1 @@ +../node_modules/@patternfly/pfe-sass \ No newline at end of file diff --git a/elements/pfe-sass/.npmignore b/elements/pfe-sass/.npmignore deleted file mode 100644 index 61ba4300..00000000 --- a/elements/pfe-sass/.npmignore +++ /dev/null @@ -1 +0,0 @@ -_temp diff --git a/elements/pfe-sass/LICENSE.txt b/elements/pfe-sass/LICENSE.txt deleted file mode 100644 index 599bd61b..00000000 --- a/elements/pfe-sass/LICENSE.txt +++ /dev/null @@ -1,19 +0,0 @@ -Copyright 2020 Red Hat, Inc. - -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is -furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in -all copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -SOFTWARE. diff --git a/elements/pfe-sass/README.md b/elements/pfe-sass/README.md deleted file mode 100644 index 85d09e68..00000000 --- a/elements/pfe-sass/README.md +++ /dev/null @@ -1,50 +0,0 @@ -# PFE SASS - -Helper tools for building PatternFly Elements web components. - - -## Broadcast variables - -## Containers & broadcast vars - -If the container allows changes to background colors should influence the children: pfe-set-broadcasted function - -## Notes on using broadcast colors in components - -1. Try to map CSS __properties__ such as `color` only once. If updates to that property are needed, those should be done by updating the local variable. -2. Set the value equal to local variable: `color: var(--pfe-local--Color);`. Note that no fallback is defined at this level as that is done when the local variable is declared. -3. In the pfe-component, do not set __value__ of the broadcasted variables unless the component is influencing the background color; instead, set local variables to look for the value of a broadcasted variable, followed by a fallback color. This provides a hook for containers to influence the color of the typography in the component so that it remains readable. - * `--pfe-local--Color: var(--pfe-broadcasted--text, #444);` - * If a component sets it's own background color, it can and should update the value of the broadcasted variables. -4. Reset local variable values as needed for attribute overrides. - - -### CSS Example - -Let's use the pfe-cta as an example. We can start by defining local variables, namespaced for this component, and then updating the values of those variables as we go. - -``` - // 1. set up local vars equal to theme vars & fallbacks - :host { - --pfe-cta--Color: var(theme--link, #06c); - } - - // 2. Use color property once, map to local var value - :host(:not([priority]) { - ::slotted(a) { - // color: blue; CSS compiler will print this for IE11 - color: var(--pfe-cta--Color, blue) !important; - } - } - - // 3. Use broadcasted variables as needed, with theme fallback after other declarations - :host { - --pfe-cta--Color: var(broadcasted--link, var(theme--link, #06c)); - } - - // 4. Override broadcasted last - :host([color="accent"]) { - --pfe-cta--BackgroundColor: var(theme--surface--accent); - --pfe-cta--Color: var(theme--surface-accent--link); - } -``` diff --git a/elements/pfe-sass/extends/_extends.scss b/elements/pfe-sass/extends/_extends.scss deleted file mode 100644 index 730d1945..00000000 --- a/elements/pfe-sass/extends/_extends.scss +++ /dev/null @@ -1,36 +0,0 @@ -%reset-box { - margin: 0; - padding: 0; -} - -%reset-list { - margin: 0; - padding: 0; - list-style: none; -} - -%reset-button { - background-color: transparent; - border: none; - margin: 0; - padding: 0; - text-align: left; -} - -%container { - position: relative; - display: block; - width: 100%; - padding: #{pfe-var(container-spacer)}; -} - -%sr-only { - position: absolute; - overflow: hidden; - clip: rect(0, 0, 0, 0); - height: 1px; - width: 1px; - margin: -1px; - padding: 0; - border: 0; -} diff --git a/elements/pfe-sass/functions/_1-tools.scss b/elements/pfe-sass/functions/_1-tools.scss deleted file mode 100644 index 0001b315..00000000 --- a/elements/pfe-sass/functions/_1-tools.scss +++ /dev/null @@ -1,219 +0,0 @@ -// ########################## // -// STRING FUNCTIONS // -// ########################## // - -/// Replace `$search` with `$replace` in `$string` -/// @author Hugo Giraudel -/// @param {String} $string - Initial string -/// @param {String} $search - Substring to replace -/// @param {String} $replace ('') - New value -/// @return {String} - Updated string -@function str-replace($string, $search, $replace: "") { - @if type-of($string)=="string"and type-of($search)=="string" { - $index: str-index($string, $search); - - @if $index { - @return str-slice($string, 1, $index - 1)+$replace+str-replace(str-slice($string, $index + str-length($search)), $search, $replace); - } - } - - @return $string; -} - -// https://hugogiraudel.com/2013/08/08/advanced-sass-list-functions -/// Return `$list` as a string connected by `$glue` -/// @author Hugo Giraudel -/// @param {String} $list - List of strings to combine -/// @param {String} $glue ('') - Optional combinator -/// @param {String} $is-nested (false) - Indicates if the list is nested, internal use-only -/// @return {String} - Combined string of all list items -@function to-string($list, $glue: '', $is-nested: false) { - $result: null; - - @for $i from 1 through length($list) { - $e: nth($list, $i); - - @if type-of($e) == list { - $result: $result#{to-string($e, $glue, true)}; - } - @else { - $result: if($i != length($list) or $is-nested, $result#{$e}#{$glue}, $result#{$e}); - } - } - - @return $result; -} - -/// Split a `$string` by a `$separator` into a new list -/// @param {String} $string - string -/// @param {String} $separator (',') - Optional separator -/// @return {List} - new list -@function str-split($string, $separator: ',') { - // empty array/list - $split-arr: (); - // length of separator - $sep-length: str-length($separator); - // first index of separator in string - $index: str-index("#{$string}", $separator); - - // loop through string - @while $index != null { - // get the substring from the first character to the separator - $item: str-slice($string, 1, ($index - 1)); - // push item to array - $split-arr: append($split-arr, $item); - // remove item and separator from string - $string: str-slice($string, ($index + $sep-length)); - // find new index of separator - $index: str-index($string, $separator); - } - - // Add the remaining string to list (the last item) and return - @return append($split-arr, $string); -} - -// https://github.com/HugoGiraudel/SassyStrings/blob/master/dist/_SassyStrings.scss -/// Remove all trailing and leading whitespaces from `$string`. -/// @since 1.2.0 -/// @param {String} $string - string -/// @return {String} - Clean string -@function str-trim($string) { - $start: 1; - $end: str-length($string); - - @for $i from 1 through str-length($string) { - $first: str-slice($string, $i, $i); - $last: str-slice($string, -$i, -$i); - - @if $first==" "and $i+1==$start+1 { - $start: $i + 1; - } - - @if $last==" "and str-length($string) - $i==$end - 1 { - $end: str-length($string) - $i; - } - } - - @return str-slice($string, $start, $end); -} - -// https://github.com/HugoGiraudel/SassyStrings/blob/master/dist/_SassyStrings.scss -/// Check whether `$string` starts with `$needle`. -/// @param {String} $string - string to check -/// @param {String} $needle - substring to check -/// @return {Bool} - true if `$string` starts with `$needle`; false if not -@function str-starts-with($string, $needle) { - @return str-slice($string, 1, str-length($needle))==$needle; -} - - -// ########################## // -// MAP FUNCTIONS // -// ########################## // - -/// Map deep get -/// @author Hugo Giraudel -/// @access public -/// @param {Map} $map - Map -/// @param {Arglist} $keys - Key chain -/// @return {*} - Desired value -@function map-deep-get($map, $keys...) { - @each $key in $keys { - @if type-of($map)=="map" { - $map: map-get($map, $key); - } - - @else { - @warn "Map provided is not a map." - } - } - - @return $map; -} - -// Collect all maps and merge them together -@function map-collect($maps...) { - $collection: (); - - @each $map in $maps { - $collection: map-deep-merge($collection, $map); - } - - @return $collection; -} - -// https://medium.com/@pentzzsolt/a-non-destructive-map-merge-function-for-sass-f91637f87b2e -@function map-deep-merge($parent-map, $child-map) { - $result: $parent-map; - @each $key, $value in $child-map { - @if (not map-has-key($result, $key)) or (type-of(map-get($result, $key)) != type-of($value)) or (not (type-of(map-get($result, $key)) == map and type-of($value) == map)) { - $result: map-merge($result, ($key: $value)); - } - @else { - $result: map-merge($result, ($key: map-deep-merge(map-get($result, $key), $value))); - } - } - @return $result; -} - - -// ########################## // -// LIST FUNCTIONS // -// ########################## // - -// https://hugogiraudel.com/2013/08/08/advanced-sass-list-functions/ -// Get the first item in a list -@function first($list) { - @return nth($list, 1); -} - -// Get the last item in a list -@function last($list) { - @return nth($list, length($list)); -} - -// https://hugogiraudel.com/2013/08/08/advanced-sass-list-functions/#removing-values-from-list -@function remove($list, $value, $recursive: false) { - $result: (); - - @for $i from 1 through length($list) { - @if type-of(nth($list, $i))==list and $recursive { - $result: append($result, remove(nth($list, $i), $value, $recursive)); - } - - @else if nth($list, $i) !=$value { - $result: append($result, nth($list, $i)); - } - } - - @return $result; -} - - -// ########################## // -// NUMERICAL FUNCTIONS // -// ########################## // - -// Strip unit from string, return a number -@function pfe-strip-unit($number) { - @if type-of($number) == "number" and not unitless($number) { - @return $number / ($number * 0 + 1); - } - - @return $number; -} - -// Return a pixel size in ems -@function pfe-size-pem($pxval, $base: $pfe-global--font-size-root) { - @return pfe-strip-unit($pxval) / $base * 1em; -} - -// Return a pixel size in rems -@function pfe-size-prem($pxval, $base: $pfe-global--font-size-root) { - @return pfe-strip-unit($pxval) / $base * 1rem; -} - -// Return a rem size in pixels -@function pfe-size-rem2px($remval, $base: $pfe-global--font-size-root) { - @return pfe-strip-unit($remval) * ($base / 1px); -} diff --git a/elements/pfe-sass/functions/_custom-properties.scss b/elements/pfe-sass/functions/_custom-properties.scss deleted file mode 100644 index 5165c45d..00000000 --- a/elements/pfe-sass/functions/_custom-properties.scss +++ /dev/null @@ -1,236 +0,0 @@ -/// =========================================================================== -/// Get from map - used by pfe-colors, pfe-vars, pfe-zindex -/// -/// Returns CSS variable stack with exposed theme variable and respective fallback -/// -/// @param {String} $category - Category name to be appended to variables within the map/system -/// @param {String} $key - Variable name to be used and prepended with --pfe-theme -/// @param {Map} $map - SASS Map of variables -/// @param {String} $fallback [""] - Optional fallback override -/// @requires {String} $repo - Name of repo, which is "pfe" -/// @requires {Boolean} $USE-FALLBACK - True to use fallback colors, false to omit -/// @example - -/// -/// 1. To look up a color: /elements/pfe-sass/src/maps/_colors.scss -/// 2. Use like this: -/// ``` -/// .my-element { -/// color: #{pfe-color( text )}; -/// background: #{pfe-color( surface--base )}; -/// } -/// ``` -/// =========================================================================== -@function pfe-get-from-map($category, $key, $map, $fallback: null) { - // Start building the variable declaration - $var-declaration: "--#{$repo}-theme--"; - // If the category exists, inject that into the string - @if $category != "" { - $var-declaration: "#{$var-declaration}#{$category}--"; - } - // Append the key to the string - $var-declaration: "#{$var-declaration}#{$key}"; - - // If the fallback is not provided but use-fallback is set to true - @if $fallback == null and $USE-FALLBACK and map-get($map, $key) != null { - $fallback: map-get($map, $key); - } - @if $fallback != null { - // Create the variable declaration - $var-declaration: "#{$var-declaration}, #{$fallback}"; - } - - // Return the variable declaration string - @return var(#{$var-declaration}); -} - -/// =========================================================================== -/// Color fetch -/// -/// Returns CSS variable stack with exposed theme variable and respective fallback -/// -/// @param {String} $cssvar - Variable name to be used and prepended with --pfe-theme -/// @param {String} $fallback [null] - Optional custom fallback value -/// @requires {Map} $pfe-colors - A map of the colors in the repository -/// @example - -/// -/// 1. To look up a color: /elements/pfe-sass/src/maps/_colors.scss -/// 2. Use like this: -/// ``` -/// .my-element { -/// color: #{pfe-color( text )}; -/// background: #{pfe-color( surface--base )}; -/// } -/// ``` -/// =========================================================================== -@function pfe-color($cssvar, $fallback: null) { - $var-name: to-string($cssvar, "--"); - @if map-get($pfe-colors, $var-name) != null { - @return pfe-get-from-map("color", $var-name, $pfe-colors, $fallback); - } - @else { - @error "The key for #{$var-name} could not be found in the $pfe-colors map."; - } -} - -/// =========================================================================== -/// Variable fetch -/// -/// Returns CSS variable stack with exposed theme variable and respective fallback -/// -/// @param {String} $cssvar - Variable name to be used and prepended with --pfe-theme -/// @param {String} $fallback [null] - Optional custom fallback -/// @requires {Map} $pfe-vars - A map of the variables in the repository -/// @example - -/// -/// 1. To look up a value: /elements/pfe-sass/src/maps/_general.scss -/// 2. Use like this: -/// ``` -/// .my-element { -/// padding: #{pfe-var( container-spacer )}; -/// font-size: #{pfe-var( font-size )}; -/// } -/// ``` -/// 3. Which will return: -/// ``` -/// .my-element { -/// padding: var(--pfe-theme--container-spacer, 16px); -/// font-size: var(--pfe-theme--font-size, 16px); -/// } -/// ``` -/// =========================================================================== -@function pfe-var($cssvar, $fallback: null) { - $var-name: to-string($cssvar, "--"); - @if map-get($pfe-vars, $var-name) != null { - @return pfe-get-from-map("", $var-name, $pfe-vars, $fallback); - } - @else { - @error "The key for #{$var-name} could not be found in the $pfe-vars map."; - } -} - -/// =========================================================================== -/// Z-Index fetch -/// -/// Returns CSS variable stack with exposed theme variable and respective fallback -/// -/// @param {String} $cssvar - Variable name to be used and prepended with --pfe-theme -/// @requires {Map} $pfe-broadcasted - SASS Map of broadcasted values -/// @example - -/// -/// 1. To look up a value: /elements/pfe-sass/src/maps/_broadcasted.scss -/// 2. Use like this: -/// ``` -/// .my-element { -/// z-index: #{pfe-broadcasted( link-decoration )}; -/// } -/// ``` -/// 3. Which will return: -/// ``` -/// .my-element { -/// z-index: var(--pfe-theme--link-decoration, none); -/// } -/// ``` -/// =========================================================================== -@function pfe-broadcasted($cssvar) { - $var-name: to-string($cssvar, "--"); - @if map-get($pfe-broadcasted, $var-name) != null { - @return pfe-get-from-map("", $var-name, $pfe-broadcasted); - } - @else { - @error "The key for #{$var-name} could not be found in the $pfe-broadcasted map."; - } -} - -/// =========================================================================== -/// Variable fetch -/// -/// Returns CSS variable stack with exposed theme variable and respective fallback -/// -/// @param {String} $cssvar - Variable name to be used and prepended with --pfe-theme--zindex -/// @requires {Map} $pfe-zindex - SASS Map of z-index values -/// @example - -/// -/// 1. To look up a value: /elements/pfe-sass/src/maps/_zindex.scss -/// 2. Use like this: -/// ``` -/// .my-element { -/// z-index: #{pfe-zindex( content )}; -/// } -/// ``` -/// 3. Which will return: -/// ``` -/// .my-element { -/// z-index: var(--pfe-theme--zindex--content, 1); -/// } -/// ``` -/// =========================================================================== -@function pfe-zindex($cssvar) { - $var-name: to-string($cssvar, "--"); - @if map-get($pfe-zindex, $var-name) != null { - @return pfe-get-from-map("zindex", $var-name, $pfe-zindex); - } - @else { - @error "The key for #{$var-name} could not be found in the $pfe-zindex map."; - } -} - -/// =========================================================================== -/// Local -/// -/// Returns CSS Var for the local component-scoped variable -/// -/// @param {String} $cssvar - Variable identifiers which are postfixed and combined using '--' -/// @param {String} $region - Identifies the region or slot to which this is assigned -/// @requires {String} $repo - Name of repo, which is "pfe" -/// @requires {String} $LOCAL - Name of component, this is defined at the top of the sass file for the component -/// @use - -/// ``` -/// :host { -/// padding-top: #{pfe-local(paddingTop)}; -/// padding-bottom: #{pfe-local(paddingBottom)}; -/// } -/// ``` -/// =========================================================================== -@function pfe-local($cssvar, $fallback: null, $region: null) { - // If a region value exists, build the region string - @if $region != null { - $region: "__#{$region}"; - } - // Start building the variable declaration - $var-declaration: "--#{$repo}-#{$LOCAL}#{$region}--#{to-string($cssvar, '--')}"; - // If a fallback is defined, pass that in too - @if $fallback != null { - $var-declaration: "#{$var-declaration}, #{$fallback}"; - } - // Return the variable declaration string - @return var(#{$var-declaration}); -} - -/// =========================================================================== -/// Apply broadcast function, for use with text & links. -/// -/// It requests that the color property look for a broadcasted variable (from a container component) -/// first if there is one, and if not, use a theme variable, with the hex color fallback. -/// -/// @param {String} $broadcast - name of the broadcast variable to apply -/// @requires {String} $repo - Name of repo, which is "pfe" -/// -/// @example: color: #{pfe-apply-broadcast(ui-base--hover)}; -/// @output: Error: --pfe-broadcasted--ui-base--hover variable is not currently supported."; -/// -/// @example: color: #{pfe-apply-broadcast(link)}; -/// @output: color: var(--pfe-broadcasted--link); -/// Was: pfe-radio! -/// =========================================================================== -@function pfe-apply-broadcast($broadcast) { - $fallback: ""; - @if $USE-FALLBACK { - $fallback: ", #{map-get($pfe-broadcasted, #{to-string($broadcast,'--')})}"; - } - @if not index($BROADCAST-VARS, first(str-split($broadcast, '--'))) { - @error "--#{$repo}-broadcasted--#{$broadcast} variable is not currently supported."; - } - @else { - @return var(--#{$repo}-broadcasted--#{to-string($broadcast,'--')}#{unquote($fallback)}); - } -} diff --git a/elements/pfe-sass/functions/_general.scss b/elements/pfe-sass/functions/_general.scss deleted file mode 100644 index 5c661e00..00000000 --- a/elements/pfe-sass/functions/_general.scss +++ /dev/null @@ -1,75 +0,0 @@ -/// Breakpoint -/// -/// Returns the SCSS breakpoint value only -/// -/// @param {String} $size - Generally named breakpoint size to be called -/// @param {String} $max - Set to true if the provided size is the max-value -/// @use - -/// ``` -/// @media screen and (min-width: pfe-breakpoint(sm)) { -/// --pfe-band--Width: #{pfe-breakpoint(sm) - $box-padding * 2}; -/// } -/// ``` -/// -/// Max example: -/// ``` -/// @media screen and (max-width: pfe-breakpoint($size: md, $max: true)) { -/// --pfe-band--Width: #{pfe-breakpoint(sm) - $box-padding * 2}; -/// } -/// ``` -/// -/// Set $map to false if you need supplemental breakpoints in a component -/// Use: -/// ``` -/// $variables: ( -/// lg-mobile: 640, -/// sm-desktop: 1024, -/// ); -/// ``` -/// -/// ``` -/// @media screen and (min-width: pfe-breakpoint(lg-mobile, $map: false)) { } -/// ``` -/// which returns: -/// ``` -/// @media screen and (min-width: var(--pfe-navigation--breakpoint-lg-mobile, 640)) { } -/// ``` - - -@function pfe-breakpoint($size, $max: false, $map: true) { - $bp: 1px; - @if $map == true { - $bp: map-get($pfe-vars, grid-breakpoint--#{$size} ); - @if $max { - $bp: (pfe-strip-unit($bp) - 1) * 1px; - } - } - @else { - $bp: map-get($variables, #{$size} ) ; - @if $max { - $bp: (pfe-strip-unit($bp) - 1) * 1px; - - } - } - @return $bp; -} -/// Get Theme -/// -/// This utility function will return the correct theme -/// when you pass it a variable from the $pfe-colors map -/// -/// @use - -/// ``` -/// .my-custom-red-container { -/// --theme: #{ pfe-get-theme(surface--accent--theme) }; -/// } -/// ``` -/// will return -/// ``` -/// .my-custom-red-container { -/// --theme: saturated; -/// } -/// ``` -@function pfe-get-theme($context) { - @return #{map-get($pfe-colors, $context)}; -} diff --git a/elements/pfe-sass/gulpfile.js b/elements/pfe-sass/gulpfile.js deleted file mode 100644 index 26664041..00000000 --- a/elements/pfe-sass/gulpfile.js +++ /dev/null @@ -1,62 +0,0 @@ -const { task, src, dest, watch, parallel, series } = require("gulp"); - -const pfelementPackage = require("./package.json"); -const version = pfelementPackage.version; -const elementName = pfelementPackage.pfelement.elementName; - -const paths = { - source: "./src", - compiled: "./", - temp: "./_temp" -}; - -const path = require("path"); -const clean = require("gulp-clean"); -const mergeStream = require("merge-stream"); -const globSass = require("gulp-sass-globbing"); - -// Delete the temp directory -task("clean", () => { - return src([ - "__*.scss" - ], { - cwd: paths.compiled, - read: false, - allowEmpty: true - }).pipe(clean()); -}); - -// Custom gulp for sass globbing -task("sass:globbing", () => { - let stream = mergeStream(); - ["extends", "functions", "maps", "mixins", "variables"].forEach((folder) => { - stream.add(src([ - `${folder}/_*.scss` - // `!${folder}/_deprecated*.scss`, - ]) - .pipe(globSass({ - path: `__${folder}.scss` - }, { - signature: `// generated with sass globbing, v${version}` - })) - .pipe(dest(paths.compiled)) - ); - }); - - return stream; -}); - -task("build", series("clean", "sass:globbing")); - -task("watch", () => { - return watch([ - "{extends,functions,maps,mixins,variables}/_*.scss", - "pfe-sass.scss" - ], { - cwd: paths.compiled - }, series("build")); -}); - -task("dev", parallel("build", "watch")); - -task("default", series("build")); diff --git a/elements/pfe-sass/maps/_broadcasted.scss b/elements/pfe-sass/maps/_broadcasted.scss deleted file mode 100644 index 86334297..00000000 --- a/elements/pfe-sass/maps/_broadcasted.scss +++ /dev/null @@ -1,40 +0,0 @@ -$pfe-broadcasted: ( - - // ======================================================================== - // Base text and link colors, basis of "theme" - // ======================================================================== - - text: $pfe-color--text, - link: $pfe-color--link, - link--visited: $pfe-color--link--visited, - link--hover: $pfe-color--link--hover, - link--focus: $pfe-color--link--focus, - - text--on-dark: $pfe-color--text--on-dark, - link--on-dark: $pfe-color--link--on-dark, - link--visited--on-dark: $pfe-color--link--visited--on-dark, - link--hover--on-dark: $pfe-color--link--hover--on-dark, - link--focus--on-dark: $pfe-color--link--focus--on-dark, - - text--on-saturated: $pfe-color--text--on-saturated, - link--on-saturated: $pfe-color--link--on-saturated, - link--visited--on-saturated: $pfe-color--link--visited--on-saturated, - link--hover--on-saturated: $pfe-color--link--hover--on-saturated, - link--focus--on-saturated: $pfe-color--link--focus--on-saturated, - - link-decoration: none, - link-decoration--visited: none, - link-decoration--hover: underline, - link-decoration--focus: underline, - - link-decoration--on-dark: none, - link-decoration--visited--on-dark: none, - link-decoration--hover--on-dark: underline, - link-decoration--focus--on-dark: underline, - - link-decoration--on-saturated: underline, - link-decoration--visited--on-saturated: underline, - link-decoration--hover--on-saturated: underline, - link-decoration--focus--on-saturated: underline - -); \ No newline at end of file diff --git a/elements/pfe-sass/maps/_colors.scss b/elements/pfe-sass/maps/_colors.scss deleted file mode 100644 index e263c808..00000000 --- a/elements/pfe-sass/maps/_colors.scss +++ /dev/null @@ -1,159 +0,0 @@ -$pfe-colors: ( - - // ======================================================================== - // Base text and link colors, basis of "theme" - // ======================================================================== - - text: $pfe-color--text, - link: $pfe-color--link, - link--visited: $pfe-color--link--visited, - link--hover: $pfe-color--link--hover, - link--focus: $pfe-color--link--focus, - - text--on-dark: $pfe-color--text--on-dark, - link--on-dark: $pfe-color--link--on-dark, - link--visited--on-dark: $pfe-color--link--visited--on-dark, - link--hover--on-dark: $pfe-color--link--hover--on-dark, - link--focus--on-dark: $pfe-color--link--focus--on-dark, - - text--on-saturated: $pfe-color--text--on-saturated, - link--on-saturated: $pfe-color--link--on-saturated, - link--visited--on-saturated: $pfe-color--link--visited--on-saturated, - link--hover--on-saturated: $pfe-color--link--hover--on-saturated, - link--focus--on-saturated: $pfe-color--link--focus--on-saturated, - - // ======================================================================== - // Base UI Colors for Buttons, CTAs, and actionable UI elements - // ======================================================================== - - // Set of base colors - ui-base: $pfelements--blue, - ui-base--hover: darken($pfelements--blue, 20%), - ui-base--focus: darken($pfelements--blue, 20%), - ui-base--text: $pfe-color--text--on-dark, - ui-base--text--hover: $pfe-color--text--on-dark, - ui-base--text--focus: $pfe-color--text--on-dark, - - ui-base--on-dark: lighten($pfelements--blue, 40%), - ui-base--hover--on-dark: lighten($pfelements--blue, 20%), - ui-base--focus--on-dark: lighten($pfelements--blue, 20%), - ui-base--text--on-dark: $pfe-color--text, - ui-base--text--hover--on-dark: $pfe-color--text, - ui-base--text--focus--on-dark: $pfe-color--text, - - ui-base--on-saturated: $pfe-color--white, - ui-base--hover--on-saturated: darken($pfe-color--white, 20%), - ui-base--focus--on-saturated: darken($pfe-color--white, 20%), - ui-base--text--on-saturated: $pfe-color--text, - ui-base--text--hover--on-saturated: $pfe-color--text, - ui-base--text--focus--on-saturated: $pfe-color--text, - - // Set of complement colors - ui-complement: $pfe-color--gray-800, - ui-complement--hover: $pfe-color--gray-1000, - ui-complement--focus: $pfe-color--gray-1000, - ui-complement--text: $pfe-color--text--on-dark, - ui-complement--text--hover: $pfe-color--text--on-dark, - ui-complement--text--focus: $pfe-color--text--on-dark, - - ui-complement--on-dark: $pfe-color--white, - ui-complement--hover--on-dark: darken($pfe-color--white, 20%), - ui-complement--focus--on-dark: darken($pfe-color--white, 20%), - ui-complement--text--on-dark: $pfe-color--text, - ui-complement--text--hover--on-dark: $pfe-color--text, - ui-complement--text--focus--on-dark: $pfe-color--text, - - // Set of accent colors - ui-accent: $pfelements--red, - ui-accent--hover: darken($pfelements--red, 20%), - ui-accent--focus: darken($pfelements--red, 20%), - ui-accent--text: $pfe-color--text--on-dark, - ui-accent--text--hover: $pfe-color--text--on-dark, - ui-accent--text--focus: $pfe-color--text--on-dark, - - ui-accent--on-saturated: $pfe-color--white, - ui-accent--hover--on-saturated: darken($pfe-color--white, 20%), - ui-accent--focus--on-saturated: darken($pfe-color--white, 20%), - ui-accent--text--on-saturated: $pfe-color--text, - ui-accent--text--hover--on-saturated: $pfe-color--text, - ui-accent--text--focus--on-saturated: $pfe-color--text, - - // Set of disabled colors - ui-disabled: $pfelements--gray-light, - ui-disabled--hover: $pfelements--gray-light, - ui-disabled--focus: $pfe-color--gray-500, - ui-disabled--text: $pfe-color--gray-600, - ui-disabled--text--hover: $pfelements--gray, - ui-disabled--text--focus: $pfelements--gray, - - // ======================================================================== - // Base Surface Colors for Container elements - // ======================================================================== - - // Lightest group - surface--lightest: $pfe-color--white, - surface--lightest--theme: light, - - // Lighter group - surface--lighter: $pfe-color--gray-100, - surface--lighter--theme: light, - - // Base group - surface--base: $pfe-color--gray-200, - surface--base--theme: light, - - // Darker group - surface--darker: $pfe-color--gray-800, - surface--darker--theme: dark, - - // Darkest group - surface--darkest: $pfe-color--gray-1000, - surface--darkest--theme: dark, - - // Complement group - surface--complement: $pfelements--blue, - surface--complement--theme: saturated, - - // Accent group - surface--accent: $pfelements--red, - surface--accent--theme: saturated, - - // Palette of Border Colors - surface--border--lightest: $pfe-color--gray-100, - surface--border--lighter: $pfe-color--gray-100, - surface--border: $pfelements--gray-light, - surface--border--darker: $pfe-color--gray-300, - surface--border--darkest: $pfe-color--gray-800, - - - // ======================================================================== - // Base Feedback Colors for messaging, errors, etc. - // ======================================================================== - - // Palette of Feedback Colors - feedback--critical--lightest: $pfe-color--red-50, - feedback--critical: $pfe-color--red-600, - feedback--critical--darkest: $pfe-color--red-800, - - feedback--important--lightest: $pfe-color--orange-50, - feedback--important: $pfe-color--orange-500, - feedback--important--darkest: $pfe-color--orange-700, - - feedback--moderate--lightest: $pfe-color--yellow-50, - feedback--moderate: $pfe-color--yellow-400, - feedback--moderate--darkest: $pfe-color--yellow-700, - - feedback--success--lightest: $pfe-color--green-50, - feedback--success: #2e7d32, - feedback--success--darkest: #1b5e20, - - feedback--info--lightest: $pfe-color--blue-50, - feedback--info: #0277bd, - feedback--info--darkest: #01579b, - - feedback--default--lightest: $pfe-color--gray-100, - feedback--default: $pfe-color--gray-700, - feedback--default--darkest: $pfe-color--gray-800, - - overlay: rgba($pfe-color--gray-900, .5) -); diff --git a/elements/pfe-sass/maps/_general.scss b/elements/pfe-sass/maps/_general.scss deleted file mode 100644 index 50ce780b..00000000 --- a/elements/pfe-sass/maps/_general.scss +++ /dev/null @@ -1,55 +0,0 @@ -$pfe-vars: ( - container-spacer: 16px, - container-padding: 16px, - content-spacer: 24px, - - font-size: 16px, - line-height: 1.5, - - font-family: '"Overpass", Overpass, Helvetica, helvetica, arial, sans-serif', - font-family--heading: '"Overpass", Overpass, Helvetica, helvetica, arial, sans-serif', - font-family--code: '"Overpass Mono", Consolas, Monaco, 'Andale Mono', monospace', - - font-size--heading--alpha: 32px, - font-size--heading--beta: 24px, - font-size--heading--gamma: 21px, - font-size--heading--delta: 18px, - font-size--heading--epsilon: 16px, - font-size--heading--zeta: 14px, - - font-weight--light: 300, - font-weight--normal: 500, - font-weight--semi-bold: 600, - font-weight--bold: 700, - - surface--border-width: 1px, - surface--border-width--heavy: 4px, - surface--border-style: solid, - surface--border-radius: 3px, - - icon-size: 1em, - - ui--element--size: 20px, - - ui--border-width: 1px, - ui--border-style: solid, - ui--border-radius: 2px, - - ui--focus-outline-width: 1px, - ui--focus-outline-style: solid, - - grid-breakpoint--xs: 0, - grid-breakpoint--sm: 576px, - grid-breakpoint--md: 768px, - grid-breakpoint--lg: 992px, - grid-breakpoint--xl: 1200px, - - box-shadow--sm: #{0 #{pfe-size-prem(1)} #{pfe-size-prem(2)} 0 rgba($pfe-color--gray-1000, .2)}, - box-shadow--md: #{0 #{pfe-size-prem(2)} #{pfe-size-prem(1)} #{pfe-size-prem(1)} rgba($pfe-color--gray-1000, .12), 0 #{pfe-size-prem(4)} #{pfe-size-prem(11)} #{pfe-size-prem(6)} rgba($pfe-color--gray-1000, .05)}, - box-shadow--lg: #{0 #{pfe-size-prem(3)} #{pfe-size-prem(7)} #{pfe-size-prem(3)} rgba($pfe-color--gray-1000, .13), 0 #{pfe-size-prem(11)} #{pfe-size-prem(24)} #{pfe-size-prem(16)} rgba($pfe-color--gray-1000, .12)}, - box-shadow--inset: #{inset 0 0 #{pfe-size-prem(10)} 0 $pfe-color--gray-50}, - - animation-speed: .3s, - animation-timing: cubic-bezier(0.465, 0.183, 0.153, 0.946), - opacity: .3 -); diff --git a/elements/pfe-sass/maps/_zindex.scss b/elements/pfe-sass/maps/_zindex.scss deleted file mode 100644 index bc09f249..00000000 --- a/elements/pfe-sass/maps/_zindex.scss +++ /dev/null @@ -1,6 +0,0 @@ -$pfe-zindex: ( - modal: 99, - navigation: 98, - overlay: 97, - content: 0 -); \ No newline at end of file diff --git a/elements/pfe-sass/mixins/_components.scss b/elements/pfe-sass/mixins/_components.scss deleted file mode 100644 index 8ecfa302..00000000 --- a/elements/pfe-sass/mixins/_components.scss +++ /dev/null @@ -1,232 +0,0 @@ -/// =========================================================================== -/// Accordion-specific SASS Vars -/// =========================================================================== - -@mixin pfe-accordion-variables($state: default, $theme: default, $variant: default) { - // Shared variables for all themes - $variables: (); - - @if $state != expanded { // Default state - // Shared variables for all themes - $variables: ( - BorderColor--accent: transparent, - BorderColor: #{pfe-color(surface--border)}, - BorderTopWidth: #{pfe-var(surface--border-width)}, - BorderRightWidth: 0, - BorderBottomWidth: #{pfe-var(surface--border-width)}, - BorderLeftWidth: #{pfe-var(surface--border-width--heavy)}, - Color: #{pfe-apply-broadcast(text)}, - TextAlign: left, - base--Padding: #{pfe-var(container-spacer)} - ); - - @if $theme == dark { // Dark theme - $variables: map-merge($variables, ( - accent: #{pfe-color(ui-base--on-dark)} - )); - } - @else if $theme == saturated { // Saturated theme - $variables: map-merge($variables, ( - accent: #{pfe-color(ui-base--on-saturated)} - )); - } - @else { // Light theme - $variables: map-merge($variables, ( - accent: #{pfe-color(ui-base)} - )); - } - @if $variant == disclosure { - $variables: ( - BorderRightWidth: #{pfe-var(surface--border-width)}, - BorderLeftWidth: #{pfe-var(surface--border-width)}, - BorderColor--accent: #{pfe-color(surface--border)} - ); - } - } - @else { // Expanded state - // Shared variables for all themes - $variables: ( - BorderColor: #{pfe-color(surface--border)}, - BorderRightWidth: #{pfe-var(surface--border-width)}, - BorderLeftWidth: #{pfe-var(surface--border-width--heavy)} - ); - - @if $theme == dark { // Dark theme - $variables: map-merge($variables, ( - BackgroundColor: rgba(247, 247, 249, .1), - Color: #{pfe-apply-broadcast(text)}, - BorderColor--accent: #{pfe-color(ui-base--on-dark)} - )); - } - @else if $theme == saturated { // Saturated theme - $variables: map-merge($variables, ( - BackgroundColor: rgba(0, 0, 0, 0.2), - Color: #{pfe-apply-broadcast(text)}, - BorderColor--accent: #{pfe-color(ui-base--on-saturated)} - )); - } - @else { // Defaults for light theme - $variables: map-merge($variables, ( - BackgroundColor: rgba(255, 255, 255, 1), - Color: #{pfe-color(text)}, - BorderColor--accent: #{pfe-color(ui-base)} - )); - } - @if $variant == disclosure { - $variables: ( - BorderLeftWidth: #{pfe-var(surface--border-width--heavy)}, - BorderColor--accent: #{pfe-color(ui-base)} - ); - } - - @if $theme == light { // Explicitly defined light theme - // Clear the map since this uses the same as the default variables - $variables: (); - @include pfe-set-broadcast-theme(light); - --theme: light; - } - } - - @include pfe-set-local($variables); -} - -@mixin pfe-accordion-props($variant: default) { - margin: 0; - width: #{pfe-local($cssvar: Width, $fallback: 100%)}; - max-width: 100%; - height: auto; - position: relative; - - // Since the default bg color is transparent, look to broadcast values - background-color: #{pfe-local($cssvar: BackgroundColor, $fallback: transparent)}; - color: #{pfe-local($cssvar: Color)}; - - // Border settings - border-top: #{pfe-local($cssvar: BorderTopWidth, $fallback: #{pfe-var(surface--border-width)}) pfe-var(surface--border-style) pfe-local($cssvar: BorderColor, $fallback: #{pfe-color(surface--border)})}; - border-right: #{pfe-local($cssvar: BorderRightWidth, $fallback: #{pfe-var(surface--border-width)}) pfe-var(surface--border-style) pfe-local($cssvar: BorderColor, $fallback: transparent)}; - border-bottom: #{pfe-local($cssvar: BorderBottomWidth, $fallback: #{pfe-var(surface--border-width)}) pfe-var(surface--border-style) pfe-local($cssvar: BorderColor, $fallback: #{pfe-color(surface--border)})}; - border-left: #{pfe-local($cssvar: BorderLeftWidth, $fallback: #{pfe-var(surface--border-width--heavy)}) pfe-var(surface--border-style) pfe-local($cssvar: (BorderColor, accent), $fallback: transparent)}; - - box-shadow: #{pfe-local(BoxShadow)}; - - &:hover { - @include pfe-set-local(( - BorderColor--accent: #{pfe-local(accent)} - )); - } -} - -//-- Trigger-specific properties -@mixin pfe-trigger { - $chevron--spacing: 50px; - - $variables: ( - BorderBottomWidth: 0, - Trigger--padding: #{pfe-local(base--Padding)} #{$chevron--spacing} #{pfe-local(base--Padding)} calc(#{pfe-local(base--Padding)} * 1.5) !important - ); - - @include pfe-set-local($variables); - @include pfe-accordion-props; - - // -webkit-appearance: button; - cursor: pointer; - z-index: 1; - - font-family: inherit; - font-size: #{pfe-local($cssvar: FontSize--header, $fallback: calc(#{pfe-var(font-size)} * 1.1))}; - font-weight: #{pfe-var(font-weight--bold)}; - text-align: #{pfe-local($cssvar: TextAlign, $fallback: left)}; - line-height: #{pfe-var(line-height)}; - padding: #{pfe-local(Trigger--padding)}; - - &:hover { - outline: none; - z-index: 2; - } - - &:focus { - outline: none; - z-index: 2; - text-decoration: underline; - } - - &::-moz-focus-inner { - border: 0; - } -} - -@mixin pfe-trigger-last($theme: light) { - @include pfe-set-local(( - BorderBottomWidth: #{pfe-var(surface--border-width)} - )); -} - -//-- Panel-specific properties -@mixin pfe-panel-variables($theme: light) { - $variables: ( - BorderTopWidth: 0 - ); - - @if $theme == "light" { // Light theme - $variables: map-merge($variables, ( - BoxShadow: 0 5px #{pfe-var(surface--border-width--heavy)} rgba(140, 140, 140, 0.35) - )); - } - @else { - $variables: map-merge($variables, ( - BoxShadow: none - )); - } - - @include pfe-set-local($variables); -} - -@mixin pfe-panel-container() { - // Ensure the box shadow does not propagate to nest accordions - @include pfe-set-local( ( BoxShadow: none ) ); - - @extend %container; - padding: #{pfe-local(panel-container--Padding)}; -} - -/// =========================================================================== -/// Accordion chevrons -/// =========================================================================== - -@mixin pfe-chevron($state: open, $position: after, $size: .4em, $offset: $size) { - - content: ""; - position: absolute; - top: calc(#{pfe-var(container-spacer)} + #{$offset}); - - display: block; - border-style: #{pfe-var(surface--border-style)}; - height: #{$size}; - width: #{$size}; - transition: transform 0.15s; - @if $state == open { - border-width: .1em .1em 0 0; - border-bottom: 0; - transform: rotate(-45deg); - top: calc(#{pfe-var(container-spacer)} + #{$offset}); - @if $position == before { - left: calc(#{pfe-var(container-spacer)} * 1.5); - top: calc(#{pfe-var(container-spacer)} + .25em); - transform: rotate(135deg); - } - @else { - right: calc(#{pfe-var(container-spacer)} * 1.5); - } - } - @else { - border-width: 0 .1em .1em 0; - transform: rotate(45deg); - @if $position == before { - left: calc(#{pfe-var(container-spacer)} * 1.5); - transform: rotate(-45deg); - } - @else { - right: calc(#{pfe-var(container-spacer)} * 1.5); - } - } -} \ No newline at end of file diff --git a/elements/pfe-sass/mixins/_containers.scss b/elements/pfe-sass/mixins/_containers.scss deleted file mode 100644 index 6e58b0d2..00000000 --- a/elements/pfe-sass/mixins/_containers.scss +++ /dev/null @@ -1,39 +0,0 @@ -// $boxSize = any box-sizing property, default is border-box -@mixin pfe-box-sizing($boxSize: border-box) { - *, *::before, *::after { - box-sizing: $boxSize; - } -} - -@mixin pfe-clearfix { - &::after { - clear: both; - content: ""; - display: table; - } -} - -@mixin pfe-container { - @extend %container; - - padding: calc(#{pfe-local(Padding--vertical)} / 2) #{pfe-local(Padding--horizontal)}; - - @media (min-width: #{pfe-breakpoint(sm)}) { - padding: #{pfe-local(Padding)}; - } -} - -@mixin pfe-collapsible($state: closed) { - @if $state != closed { - display: block; - position: relative; - opacity: 1; - } - @else { - display: none; - overflow: hidden; - will-change: height; - border-color: transparent; - opacity: 0; - } -} diff --git a/elements/pfe-sass/mixins/_copy-mixins.scss b/elements/pfe-sass/mixins/_copy-mixins.scss deleted file mode 100644 index 171d84c4..00000000 --- a/elements/pfe-sass/mixins/_copy-mixins.scss +++ /dev/null @@ -1,15 +0,0 @@ -@mixin pfe-accessibility-focus( $color: $link-color ) { - outline-offset: 1px; - outline-style: dotted; - outline-width: 1px; - //scss-lint:disable ImportantRule - text-decoration: none !important; - @if type-of( $color ) == color { - outline-color: $color; - } -} - -@mixin pfe-underline( $color: default-link-hover-line, $opacity: 1 ) { - text-decoration: underline; - text-decoration-skip: ink; -} diff --git a/elements/pfe-sass/mixins/_custom-properties.scss b/elements/pfe-sass/mixins/_custom-properties.scss deleted file mode 100644 index 9e7d87c2..00000000 --- a/elements/pfe-sass/mixins/_custom-properties.scss +++ /dev/null @@ -1,250 +0,0 @@ -/// =========================================================================== -/// Broadcast mixin, for use with container components. -/// -/// This will print all the broadcast variables, and set the value to the theme of your choosing, like on-dark or on-saturated. -/// @param {String} $theme - Look up values from theme contexts, i.e. "light" or "saturated" -/// @param {List | String} $broadcast [$BROADCAST-VARS] - Optionally specify only one broadcast variable instead of the whole set, i.e. "text" -/// @requires {String} $repo - Name of repo, which is "pfe" -/// @requires {String} $BROADCAST-VARS - Default list of supported broadcast variables -/// -/// @example Usage in a container component, i.e. pfe-card: -/// ``` -/// :host { -/// @include pfe-set-broadcast-theme(dark); -/// } -/// ``` -/// @output: -/// ``` -/// :host { -/// --pfe-broadcasted--text: var(--pfe-theme--color--text--on-dark, #fff); -/// --pfe-broadcasted--link: var(--pfe-theme--color--link--on-dark, #99ccff); -/// --pfe-broadcasted--link--hover: var(--pfe-theme--color--link--hover--on-dark, #cce6ff); -/// --pfe-broadcasted--link--focus: var(--pfe-theme--color--link--focus--on-dark, #cce6ff); -/// --pfe-broadcasted--link--visited: var(--pfe-theme--color--link--visited--on-dark, #b38cd9); -/// --pfe-broadcasted--link-decoration: none; -/// --pfe-broadcasted--link-decoration--hover: underline; -/// --pfe-broadcasted--link-decoration--focus: underline; -/// --pfe-broadcasted--link-decoration--visited: none; -/// } -/// ``` -/// =========================================================================== -@mixin pfe-set-broadcast-theme($theme, $broadcast: $BROADCAST-VARS) { - @each $type in $broadcast { - $list: (); - $string: ""; - $context: ""; - $state: ""; - - @if str-starts-with($type, "link") { - $list: append($list, "#{$type}"); - - @each $s in (hover, focus, visited) { - $state: "--#{$s}"; - $string: "#{$type}#{$state}"; - - @if not index($list, $string) { - $list: append($list, "#{$type}#{$state}"); - } - } - } - @else { - @if not index($list, $string) { - $list: append($list, "#{$type}"); - } - } - - @if index($THEMES, $theme) != null { - @if $theme != "light" { - $context: "--on-#{$theme}"; - } - } - - @each $item in $list { - @if not index($BROADCAST-VARS, $type) { - @warn "--#{$repo}-broadcasted--#{$item} variable is not in the $BROADCAST-VARS list."; - } - @else if not map-has-key($pfe-broadcasted, #{$item}#{$context}) { - @warn "#{$item}#{$context} value does not currently exist."; - } - @else { - @if index($THEMES, $theme) != null { - @if map-get($pfe-colors, $item) != null { - --#{$repo}-broadcasted--#{$item}: var(--#{$repo}-theme--color--#{$item}#{$context}, #{map-get($pfe-broadcasted, #{$item}#{$context})}); - } - @else if map-get($pfe-vars, $item) { - --#{$repo}-broadcasted--#{$item}: var(--#{$repo}-theme--#{$item}#{$context}, #{map-get($pfe-broadcasted, #{$item}#{$context})}); - } - @else { - --#{$repo}-broadcasted--#{$item}: #{map-get($pfe-broadcasted, #{$item}#{$context})}; - } - } - @else { - @error "The #{$theme} context does not appear to be part of a supported theme."; - } - } - } - } -} - -/// =========================================================================== -/// Define local variable -/// -/// Returns CSS Variable for the local component-scoped variable -/// -/// @param {String} $cssvar - Variable identifiers which are postfixed and combined using '--' -/// @param {String} $value - The value of the css variable being defined -/// @param {String} $region - Identifies the region or slot to which this is assigned -/// @requires {String} $repo - Name of repo, which is "pfe" -/// @requires {String} $LOCAL - Name of component, this is defined at the top of the sass file for the component -/// @use - -/// ``` -/// :host { -/// padding-top: #{pfe-local(paddingTop)}; -/// padding-bottom: #{pfe-local(paddingBottom)}; -/// } -/// ``` -/// =========================================================================== -@mixin pfe-set-local($variables) { - @each $property, $value in $variables { - $name: "--#{$property}"; - $styles: $value; - - @if type-of($value) == "map" { - @each $prop, $v in $value { - $name: "__#{$property}--#{$prop}"; - $styles: $v; - - // Print the variable definition - --#{$repo}-#{$LOCAL}#{$name}: #{$styles}; - } - } - @else { - // Print the variable definition - --#{$repo}-#{$LOCAL}#{$name}: #{$styles}; - } - } -} - -/// =========================================================================== -/// @alias pfe-set-local -/// =========================================================================== -@mixin pfe-print-variables($variables) { - @include pfe-set-local($variables); -} - -/// =========================================================================== -/// Surface properties -/// This mixin creates an attribute for all the surface colors, then prints the local background color variable for the component, with the correct theme colors. -/// @param {List | String} $surfaces [$SURFACES] - defaults to the global $SURFACES list of all supported colors -/// @param {String} $attr-name [pfe-color] - defaults to pfe-color, optionally pass in a custom name for the data attribute -/// -/// @example -/// ``` -/// $LOCAL: band; -/// @include surfaces; -/// ``` -/// -/// @output -/// ``` -/// :host([pfe-color="darker"]) { -/// --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--darker, #464646); -/// --theme: dark; -/// } -/// -/// :host([pfe-color="darkest"]) { -/// --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--darkest, #131313); -/// --theme: dark; -/// } -/// -/// :host([pfe-color="base"]) { -/// --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--base, #dfdfdf); -/// --theme: light; -/// } -/// -/// :host([pfe-color="lighter"]) { -/// --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--lighter, #ececec); -/// --theme: light; -/// } -/// -/// :host([pfe-color="lightest"]) { -/// --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--lightest, #fff); -/// --theme: light; -/// } -/// -/// :host([pfe-color="accent"]) { -/// --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--accent, #ee0000); -/// --theme: saturated; -/// } -/// -/// :host([pfe-color="complement"]) { -/// --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--complement, #0477a4); -/// --theme: saturated; -/// } -/// ``` -/// =========================================================================== -@mixin pfe-surfaces($surfaces: $SURFACE, $attr-name: #{$repo}-color) { - @each $color in $surfaces { - $theme: #{pfe-get-theme(surface--#{$color}--theme)}; - :host([#{$attr-name}="#{$color}"]) { - @include pfe-set-local( - ( BackgroundColor: #{pfe-color(surface--#{$color})} ) - ); - --theme: #{pfe-color( surface--#{$color}--theme, #{$theme} ); - @include browser-query(ie11) { - background-color: #{map-get($pfe-colors, surface--lightest)} !important; - color: #{pfe-color(text)} !important; - } - } - } -} - -/// =========================================================================== -/// Context properties -/// -/// Prints the `on` attribute with IE11 fallbacks -/// -/// @param {List} themes [$THEMES] - defaults to the global $THEMES list of all supported contexts -/// @param {Boolean} ie-fallback [true] - defaults to true, prints IE11 fallbacks -/// @example -/// ``` -/// @include theme-contexts; // imports on="light" etc support -/// ``` -/// -/// @output -/// ``` -/// :host([on="dark"]) { -/// --pfe-broadcasted--text: var(--pfe-theme--color--text--on-dark, #fff); -/// --pfe-broadcasted--link: var(--pfe-theme--color--link--on-dark, #99ccff); -/// --pfe-broadcasted--link--hover: var(--pfe-theme--color--link--hover--on-dark, #cce6ff); -/// --pfe-broadcasted--link--focus: var(--pfe-theme--color--link--focus--on-dark, #cce6ff); -/// --pfe-broadcasted--link--visited: var(--pfe-theme--color--link--visited--on-dark, #b38cd9); -/// --pfe-broadcasted--link-decoration: none; -/// --pfe-broadcasted--link-decoration--hover: underline; -/// --pfe-broadcasted--link-decoration--focus: underline; -/// --pfe-broadcasted--link-decoration--visited: none; -/// } -/// -/// @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { /* IE10+ */ -/// :host([on="dark"]) { -/// color: #fff; -/// color: var(--pfe-theme--color--text--on-dark, #fff); -/// } -/// } -/// ``` -/// ...as well as all the values for :host([on="saturated"]) and :host([on="light"]) -/// =========================================================================== -@mixin pfe-theme-contexts($themes: $THEMES, $ie-fallback: true) { - // Helper attributes to aid in theming - @each $theme in $themes { - :host([on="#{$theme}"]) { - @include pfe-set-broadcast-theme($theme); - } - @if $ie-fallback { - @include browser-query(ie11) { - :host { - color: #{pfe-color(text)} !important; - } - } - } - } -} diff --git a/elements/pfe-sass/mixins/_mixins.scss b/elements/pfe-sass/mixins/_mixins.scss deleted file mode 100644 index a999ddda..00000000 --- a/elements/pfe-sass/mixins/_mixins.scss +++ /dev/null @@ -1,111 +0,0 @@ -@mixin browser-query($browser-list) { - @each $browser in $browser-list { - @if $browser == ie11 { - @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { /* IE10+ */ - @content; - } - } - @if $browser == edge12 { - @supports (-ms-accelerator: true) { /* Microsoft Edge Browser 12+ */ - @content; - } - } - @if $browser == edge { - @supports (-ms-ime-align: auto) { /* Microsoft Edge Browser 16+ (All) */ - @content; - } - } - @if $browser == firefox { - @media all and (min--moz-device-pixel-ratio:0) { /* Mozilla Firefox (All) */ - @content; - } - } - } -} - -@mixin pfe-transition($properties...) { - $return: null; - @each $property in $properties { - @if length($property) == 1 { - $return: append($return, #{$property} 250ms $pfe-global--animation-timing, comma); - } - @else if length($property) == 2 { - $return: append($return, nth($property, 1) nth($property, 2), comma); - } - } - transition: $return; -} - -// Make a CSS arrow -@mixin pfe-arrow($type, $color, $width: 8px, $height: 5px, $pseudo: false) { - $direction: ( - up: 180deg, - down: 0deg, - right: -90deg, - left: 90deg, - ); - border-style: #{pfe-var(surface--border-style)}; - border-width: $width $height 0; - border-color: transparent; - border-top-color: $color; - transform: rotate(map-get($direction, $type)); - @if $pseudo { - display: inline-block; - content: ""; - @content; - } -} - -@mixin pfe-arrow-color($color) { - border-top-color: $color; -} - -@mixin pfe-print-media { - @media print { - @content; - } -} - -@mixin pfe-print-background { - -webkit-print-color-adjust: exact; - color-adjust: exact; -} - -@mixin pfe-no-print-background { - @include pfe-print-media { - background-color: white !important; - background-image: none !important; - box-shadow: none !important; - } -} - -@mixin pfe-pipe( $position: right, $padding: 0, $margin: 0, $color: $border-color) { - border: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} transparent; - border-#{$position}-color: $color; - @if $position == right { - padding-left: $padding; - margin-right: $margin; - } - @else if $position == left { - padding-right: $padding; - margin-left: $margin; - } -} - -@mixin pfe-retina { - @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { - @content; - } -} - -@mixin pfe-icon($path, $display: flex, $size: 1em) { - display: #{$display}; - @if $path { - background: #{$path} no-repeat; - background-size: contain; - background-position: center; - } - width: #{$size}; - height: #{$size}; - @content; -} diff --git a/elements/pfe-sass/package-lock.json b/elements/pfe-sass/package-lock.json deleted file mode 100644 index 4f4d32db..00000000 --- a/elements/pfe-sass/package-lock.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "name": "@patternfly/pfe-sass", - "version": "1.0.0-prerelease.45", - "lockfileVersion": 1 -} diff --git a/elements/pfe-sass/package.json b/elements/pfe-sass/package.json deleted file mode 100644 index 47bffc47..00000000 --- a/elements/pfe-sass/package.json +++ /dev/null @@ -1,51 +0,0 @@ -{ - "name": "@patternfly/pfe-sass", - "pfelement": { - "className": "PfeSass", - "elementName": "pfe-sass" - }, - "version": "1.0.0-prerelease.45", - "publishConfig": { - "access": "public" - }, - "description": "Sass variables and mixins for PatternFly Elements", - "keywords": [ - "web-components", - "html" - ], - "repository": { - "type": "git", - "url": "github:patternfly/patternfly-elements", - "directory": "elements/pfe-sass" - }, - "scripts": { - "build": "../../node_modules/.bin/gulp", - "dev": "../../node_modules/.bin/gulp dev" - }, - "contributors": [ - { - "name": "Kyle Buchanan", - "email": "kylebuch8@gmail.com", - "url": "https://github.com/kylebuch8" - }, - { - "name": "Mark Caron", - "email": "mark@redhat.com", - "url": "https://github.com/markcaron" - }, - { - "name": "castastrophe", - "url": "https://github.com/castastrophe" - }, - { - "name": "Kendall Totten" - }, - { - "name": "cd" - } - ], - "license": "MIT", - "bugs": { - "url": "https://github.com/patternfly/patternfly-elements/issues" - } -} diff --git a/elements/pfe-sass/pfe-sass.scss b/elements/pfe-sass/pfe-sass.scss deleted file mode 100644 index 0c915dcf..00000000 --- a/elements/pfe-sass/pfe-sass.scss +++ /dev/null @@ -1,7 +0,0 @@ -/// Documented using SassDoc format: http://sassdoc.com - -@import "_variables"; -@import "_functions"; -@import "_maps"; -@import "_mixins"; -@import "_extends"; diff --git a/elements/pfe-sass/variables/_1-definitions.scss b/elements/pfe-sass/variables/_1-definitions.scss deleted file mode 100644 index d39668a6..00000000 --- a/elements/pfe-sass/variables/_1-definitions.scss +++ /dev/null @@ -1,7 +0,0 @@ -$repo: pfe !default; -$pfe-global--font-size-root: 16 !default; // root for fonts and everything else - -$USE-FALLBACK: true; // default for use-fallback is true -$BROADCAST-VARS: text link link-decoration; // supported default broadcast variables -$THEMES: dark saturated light; // supported themes -$SURFACE: darker darkest base lighter lightest accent complement; diff --git a/elements/pfe-sass/variables/_2-crayon.scss b/elements/pfe-sass/variables/_2-crayon.scss deleted file mode 100644 index 3a4a61df..00000000 --- a/elements/pfe-sass/variables/_2-crayon.scss +++ /dev/null @@ -1,132 +0,0 @@ -// ======================================================================== -// CRAYON COLORS for PFElements -// -// Basic named colors to be assigned to context in _colors.scss -// -// While these are available for styling PFElements, it's recommended -// that developers try to utilize the context-based colors in -// $pfe-colors in _maps.scss first, and _colors.scss second. -// -// ======================================================================== - - -// ======================================================================== -// PFElement Brand Colors -// Namespaced with $pfelements-- to separate from colors below, which will -// be based on these colors. -// ======================================================================== - -$pfelements--orange: #fe460d !default; -$pfelements--orange-dark: #e23b0e !default; -$pfelements--orange-darkest: #ad2b0c !default; - -$pfelements--blue: #0477a4 !default; -$pfelements--blue-dark: #046a89 !default; -$pfelements--blue-darkest: #044554 !default; - -$pfelements--green: #aee339 !default; -$pfelements--green-dark: #a2c935 !default; -$pfelements--green-darkest: #7c9328 !default; - -$pfelements--gray: #797979 !default; -$pfelements--gray-light: #d2d2d2 !default; -$pfelements--gray-dark: #333 !default; - -// Other tertiary named colors to be used below -$pfelements--red: #e00 !default; // Was #c00 -$pfelements--yellow: #f0ab00 !default; -$pfelements--cyan: #007a87 !default; -$pfelements--purple: rebeccapurple !default; // Was #703fec - -// ======================================================================== -// B&W, Gray Values -// ======================================================================== - -$pfe-color--white: #fff !default; -$pfe-color--gray-50: lighten($pfelements--gray, 48%) !default; -$pfe-color--gray-100: lighten($pfelements--gray, 45%) !default; -$pfe-color--gray-200: lighten($pfelements--gray, 40%) !default; -$pfe-color--gray-250: $pfelements--gray-light !default; -$pfe-color--gray-300: lighten($pfelements--gray, 30%) !default; -$pfe-color--gray-400: lighten($pfelements--gray, 20%) !default; -$pfe-color--gray-500: lighten($pfelements--gray, 10%) !default; -$pfe-color--gray-600: $pfelements--gray !default; // Aliased -$pfe-color--gray-700: darken($pfelements--gray, 10%) !default; -$pfe-color--gray-800: darken($pfelements--gray, 20%) !default; -$pfe-color--gray-900: darken($pfelements--gray, 30%) !default; -$pfe-color--gray-1000: darken($pfelements--gray, 40%) !default; -$pfe-color--black: $pfe-color--gray-1000 !default; // Aliased - -// ======================================================================== -// Hue Rainbow Values! -// ======================================================================== - -$pfe-color--red-50: lighten($pfelements--red, 50%) !default; -$pfe-color--red-100: lighten($pfelements--red, 40%) !default; -$pfe-color--red-200: lighten($pfelements--red, 30%) !default; -$pfe-color--red-300: lighten($pfelements--red, 20%) !default; -$pfe-color--red-400: lighten($pfelements--red, 10%) !default; -$pfe-color--red-500: $pfelements--red !default; // Aliased -$pfe-color--red-600: darken($pfelements--red, 10%) !default; -$pfe-color--red-700: darken($pfelements--red, 20%) !default; -$pfe-color--red-800: darken($pfelements--red, 30%) !default; - -$pfe-color--orange-50: lighten($pfelements--orange, 40%) !default; -$pfe-color--orange-100: lighten($pfelements--orange, 30%) !default; -$pfe-color--orange-200: lighten($pfelements--orange, 20%) !default; -$pfe-color--orange-300: lighten($pfelements--orange, 10%) !default; -$pfe-color--orange-400: $pfelements--orange !default; // Aliased -$pfe-color--orange-500: darken($pfelements--orange, 10%) !default; -$pfe-color--orange-600: darken($pfelements--orange, 20%) !default; -$pfe-color--orange-700: darken($pfelements--orange, 30%) !default; -$pfe-color--orange-800: darken($pfelements--orange, 40%) !default; - -$pfe-color--yellow-50: lighten($pfelements--yellow, 50%) !default; -$pfe-color--yellow-100: lighten($pfelements--yellow, 40%) !default; -$pfe-color--yellow-200: lighten($pfelements--yellow, 30%) !default; -$pfe-color--yellow-300: lighten($pfelements--yellow, 20%) !default; -$pfe-color--yellow-400: lighten($pfelements--yellow, 10%) !default; -$pfe-color--yellow-500: $pfelements--yellow !default; // Aliased -$pfe-color--yellow-600: darken($pfelements--yellow, 10%) !default; -$pfe-color--yellow-700: darken($pfelements--yellow, 20%) !default; -$pfe-color--yellow-800: darken($pfelements--yellow, 30%) !default; - -$pfe-color--green-50: lighten($pfelements--green, 40%) !default; -$pfe-color--green-100: lighten($pfelements--green, 30%) !default; -$pfe-color--green-200: lighten($pfelements--green, 20%) !default; -$pfe-color--green-300: lighten($pfelements--green, 10%) !default; -$pfe-color--green-400: $pfelements--green !default; // Aliased -$pfe-color--green-500: darken($pfelements--green, 10%) !default; -$pfe-color--green-600: darken($pfelements--green, 20%) !default; -$pfe-color--green-700: darken($pfelements--green, 30%) !default; -$pfe-color--green-800: darken($pfelements--green, 40%) !default; - -$pfe-color--cyan-50: lighten($pfelements--cyan, 60%) !default; -$pfe-color--cyan-100: lighten($pfelements--cyan, 50%) !default; -$pfe-color--cyan-200: lighten($pfelements--cyan, 40%) !default; -$pfe-color--cyan-300: lighten($pfelements--cyan, 30%) !default; -$pfe-color--cyan-400: lighten($pfelements--cyan, 20%) !default; -$pfe-color--cyan-500: lighten($pfelements--cyan, 10%) !default; -$pfe-color--cyan-600: $pfelements--cyan !default; // Aliased -$pfe-color--cyan-700: darken($pfelements--cyan, 10%) !default; -$pfe-color--cyan-800: darken($pfelements--cyan, 20%) !default; - -$pfe-color--blue-50: lighten($pfelements--blue, 60%) !default; -$pfe-color--blue-100: lighten($pfelements--blue, 50%) !default; -$pfe-color--blue-200: lighten($pfelements--blue, 40%) !default; -$pfe-color--blue-300: lighten($pfelements--blue, 30%) !default; -$pfe-color--blue-400: lighten($pfelements--blue, 20%) !default; -$pfe-color--blue-500: lighten($pfelements--blue, 10%) !default; -$pfe-color--blue-600: $pfelements--blue !default; // Aliased -$pfe-color--blue-700: darken($pfelements--blue, 10%) !default; -$pfe-color--blue-800: darken($pfelements--blue, 20%) !default; - -$pfe-color--purple-50: lighten($pfelements--purple, 40%) !default; -$pfe-color--purple-100: lighten($pfelements--purple, 30%) !default; -$pfe-color--purple-200: lighten($pfelements--purple, 20%) !default; -$pfe-color--purple-300: lighten($pfelements--purple, 10%) !default; -$pfe-color--purple-400: $pfelements--purple !default; // Aliased -$pfe-color--purple-500: darken($pfelements--purple, 10%) !default; -$pfe-color--purple-600: darken($pfelements--purple, 20%) !default; -$pfe-color--purple-700: darken($pfelements--purple, 30%) !default; -$pfe-color--purple-800: darken($pfelements--purple, 40%) !default; diff --git a/elements/pfe-sass/variables/_3-colors.scss b/elements/pfe-sass/variables/_3-colors.scss deleted file mode 100644 index da1f6a62..00000000 --- a/elements/pfe-sass/variables/_3-colors.scss +++ /dev/null @@ -1,38 +0,0 @@ -// TODO: Reconcile with _maps.scss so there's only one file and no middleman. - -// ======================================================================== -// COLORS for PFElements -// -// Context-based colors to be used in styling PFElements along with _maps.scss -// @requires _crayola.scss -// -// ======================================================================== - -// ======================================================================== -// Base text and link colors, basis of "theme" -// ======================================================================== - -$pfe-color--text: $pfelements--gray-dark !default; -$pfe-color--link: #06c !default; //but #00538c for base/gray, how to do that? -$pfe-color--link--visited: $pfelements--purple !default; // Was #7551a6 -$pfe-color--link--hover: darken($pfe-color--link, 20%) !default; // Was #004080 -$pfe-color--link--focus: darken($pfe-color--link, 20%) !default; // Was #004080 - -// Light gray? Not yet supported -// $pfe-color--text--on-gray: $pfe-color--text !default; -// $pfe-color--link--on-gray: #00538c !default; // Contrast with $pfe-color--link doesn't meet WCAG2 AA -// $pfe-color--link--visited--on-gray: #7551a6 !default; -// $pfe-color--link--hover--on-gray: #00305b !default; -// $pfe-color--link--focus--on-gray: #00305b !default; - -$pfe-color--text--on-dark: $pfe-color--white !default; -$pfe-color--link--on-dark: lighten($pfe-color--link, 40%) !default; // Was #97daff -$pfe-color--link--visited--on-dark: lighten($pfe-color--link--visited, 30%) !default; // Was #d8c0ff -$pfe-color--link--hover--on-dark: lighten($pfe-color--link--on-dark, 10%) !default; // Was #c0ecff -$pfe-color--link--focus--on-dark: lighten($pfe-color--link--on-dark, 10%) !default; // Was #c0ecff - -$pfe-color--text--on-saturated: $pfe-color--white !default; -$pfe-color--link--on-saturated: $pfe-color--white; // Was #97daff -$pfe-color--link--visited--on-saturated: lighten($pfe-color--link--visited, 30%) !default; // Was #d8c0ff -$pfe-color--link--hover--on-saturated: lighten($pfe-color--link--on-saturated, 10%) !default; // Was #c0ecff -$pfe-color--link--focus--on-saturated: lighten($pfe-color--link--on-saturated, 10%) !default; // Was #c0ecff diff --git a/elements/pfe-styles b/elements/pfe-styles new file mode 120000 index 00000000..c476d9f5 --- /dev/null +++ b/elements/pfe-styles @@ -0,0 +1 @@ +../node_modules/@patternfly/pfe-styles \ No newline at end of file diff --git a/elements/pfe-styles/.babelrc b/elements/pfe-styles/.babelrc deleted file mode 100644 index e56d5316..00000000 --- a/elements/pfe-styles/.babelrc +++ /dev/null @@ -1,4 +0,0 @@ -{ - "presets": [["env", { "modules": false }]], - "plugins": ["external-helpers"] -} diff --git a/elements/pfe-styles/.editorconfig b/elements/pfe-styles/.editorconfig deleted file mode 100644 index 7968a883..00000000 --- a/elements/pfe-styles/.editorconfig +++ /dev/null @@ -1,17 +0,0 @@ -# EditorConfig: http://EditorConfig.org - -# Top-most EditorConfig file -root = true - -# Rules for JavaScript files: - -[*.{js,py,json,sh,html}] -# 4 space indentation -indent_style = space -indent_size = 2 -# No trailing spaces -trim_trailing_whitespace = true -# Unix-style newlines -end_of_line = lf -# Newline ending every file -insert_final_newline = true diff --git a/elements/pfe-styles/.gitignore b/elements/pfe-styles/.gitignore deleted file mode 100644 index 93f13619..00000000 --- a/elements/pfe-styles/.gitignore +++ /dev/null @@ -1,2 +0,0 @@ -node_modules -npm-debug.log diff --git a/elements/pfe-styles/.npmignore b/elements/pfe-styles/.npmignore deleted file mode 100644 index 61ba4300..00000000 --- a/elements/pfe-styles/.npmignore +++ /dev/null @@ -1 +0,0 @@ -_temp diff --git a/elements/pfe-styles/LICENSE.txt b/elements/pfe-styles/LICENSE.txt deleted file mode 100644 index 599bd61b..00000000 --- a/elements/pfe-styles/LICENSE.txt +++ /dev/null @@ -1,19 +0,0 @@ -Copyright 2020 Red Hat, Inc. - -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is -furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in -all copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -SOFTWARE. diff --git a/elements/pfe-styles/README.md b/elements/pfe-styles/README.md deleted file mode 100644 index ef2899c7..00000000 --- a/elements/pfe-styles/README.md +++ /dev/null @@ -1,152 +0,0 @@ -# PatternFly Elements Styles - -## Usage - -PatternFly Elements Styles is available to provide helper styles that can be directly included on your page. This current includes css for layouts, context, and our flavor of "normalize". - -PatternFly Elements Layouts, like Bootstrap, is based on a 12 column grid with similar breakpoints available. We've just made the usage simpler. - -### Including pfe-styles - -To get started, include a link to the css file of your choice: `pfe-base.css`, `pfe-context.css`, or `pfe-layouts.css`. - -``` - -``` - -Since PatternFly Elements Styles are not web components, their classes can be applied to any element, giving you lots of control over where and how you utilize them. - -### Base - -This is the PatternFly Elements flavor of normalize and provides styles that will cancel out a lot of the more meddlesome browser defaults. - -### Context - -This set is available to help in updating the broadcast variables for pages where your might be setting the background color yourself with custom styles. If you manually set a background color to #000, you can add the `.on-dark` class to your element and it will load the broadcast variables for a dark context to make your life a little easier. - -```css -.dark-background { - background-color: #000; -} -``` - -```html -
...
-``` - -### Layouts - -#### Grid - -If you want a simple 3 column grid with gutters, use the following: - -```html -
-
4 cols wide
-
4 cols wide
-
4 cols wide
-
4 cols wide
-
4 cols wide
-
-``` - -##### Grid Layout Classes & Modifiers - -**Parent Grid Element classes:** - -| Class | Description | -| -------------- | ----------- | -| `pfe-l-grid` | Base grid class *required* | -| `pfe-l-grid-fill-height` | Allows children elements to fill their container's height completely; equivalent of flex-grow | -| `pfe-m-gutters` | Adds gutters based on `--pfe-theme--container-spacer` | -| `pfe-m-all-*[1-12]*-col` | Sets width of children in grid to *[1-12]* columns | -| `pfe-m-all-*[1-12]*-col-on-[xs-xl]` | Sets width of children to *[1-12]* columns on specified breakpoint *[xs-xl]* | - -**Child Grid Element Classes:** - -| Class | Description | -| -------------- | ----------- | -| `pfe-l-grid__item` | Base grid item class *optional* | -| `pfe-m-*[1-12]*-col` | Sets width of this child to *[1-12]* columns | -| `pfe-m-*[1-12]*-col-on-[xs-xl]` | Sets width of this child to *[1-12]* columns on specified breakpoint *[xs-xl]* | -| `pfe-m-startat-*[1-12]*-col` | Start/indent this child to column #*[1-12]* | -| `pfe-m-startat-*[1-12]*-col-on-[xs-xl]` | Start/indent this child to column #*[1-12]* on specified breakpoint *[xs-xl]* | - -Example: - -```html -
-
8 cols wide
-
4 cols wide
-
4 cols, indented
-
8 cols wide
-
4 cols wide
-
-``` - -##### Breakpoints - -```css -// Small devices -@media (min-width: 576px) { ... } - -// Medium devices -@media (min-width: 768px) { ... } - -// Large devices -@media (min-width: 992px) { ... } - -// Extra large devices -@media (min-width: 1200px) { ... } -``` - -#### Bullseye - -Use a bullseye layout when there is a single child element, and that child is centered both vertically and horizontally in the parent. - -| Class | Description | -| -------------- | ----------- | -| `pfe-l-bullseye` | Centers child element vertically & horizontally | - -Exampe: - -```html -
-
Perfectly centered child
-
-``` - -#### Text Alignment - -Text alignment helper classes can also be applied to any block-level element. - -| Class | Description | -| -------------- | ----------- | -| `pfe-l--text-align--left` | Align text to left | -| `pfe-l--text-align--center` | Align text to center | -| `pfe-l--text-align--right` | Align text to right | - - -## Developers - -### Test - - npm run test - -### Build - - npm run build - -### Demo - -From the PatternFly Elements root directory, run: - - npm start - -### Code style - -Card (and all PatternFly Elements) use [Prettier][prettier] to auto-format JS and JSON. The style rules get applied when you commit a change. If you choose to, you can [integrate your editor][prettier-ed] with Prettier to have the style rules applied on every save. - -[prettier]: https://github.com/prettier/prettier/ -[prettier-ed]: https://prettier.io/docs/en/editors.html -[web-component-tester]: https://github.com/Polymer/web-component-tester diff --git a/elements/pfe-styles/demo/index.html b/elements/pfe-styles/demo/index.html deleted file mode 100644 index 1e8f863d..00000000 --- a/elements/pfe-styles/demo/index.html +++ /dev/null @@ -1,281 +0,0 @@ - - - - - Layouts Demo - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-

Layouts

-
-
-

Grid

- -
-

Pure Grid

-
-
Item
-
Item
-
Item
-
Item
-
Item
-
- -

Code

- 
<div class="pfe-l-grid pfe-m-gutters pfe-m-all-6-col pfe-m-all-4-col-on-md pfe-m-all-3-col-on-lg">
-  <div>Item</div>
-  <div>Item</div>
-  <div>Item</div>
-  <div>Item</div>
-  <div>Item</div>
-</div>
-
- -
-

Bootstrap-style Columns

-
-
Default Item
-
pfe-m-2-col
-
pfe-m-10-col
-
pfe-m-4-col
-
pfe-m-4-col
-
pfe-m-4-col
-
pfe-m-6-col pfe-m-3-col-on-md
-
pfe-m-6-col pfe-m-3-col-on-md pfe-m-startat-7-col-on-md
-
pfe-m-6-col pfe-m-3-col-on-md
-
- -

Code

- 
<div class="pfe-l-grid pfe-m-gutters">
-  <div class="pfe-l-grid__item">Default Item</div>
-  <div class="pfe-l-grid__item pfe-m-2-col"><code>pfe-m-2-col</code></div>
-  <div class="pfe-l-grid__item pfe-m-10-col"><code>pfe-m-10-col</code></div>
-  <div class="pfe-l-grid__item pfe-m-4-col"><code>pfe-m-4-col</code></div>
-  <div class="pfe-l-grid__item pfe-m-4-col"><code>pfe-m-4-col</code></div>
-  <div class="pfe-l-grid__item pfe-m-4-col"><code>pfe-m-4-col</code></div>
-  <div class="pfe-l-grid__item pfe-m-6-col pfe-m-3-col-on-md"><code>pfe-m-6-col pfe-m-3-col-on-md</code></div>
-  <div class="pfe-l-grid__item pfe-m-6-col pfe-m-3-col-on-md pfe-m-startat-7-col-on-md"><code>pfe-m-6-col pfe-m-3-col-on-md pfe-m-startat-7-col-on-md</code></div>
-  <div class="pfe-l-grid__item pfe-m-6-col pfe-m-3-col-on-md"><code>pfe-m-6-col pfe-m-3-col-on-md</code></div>
-</div>
- -
- -
- -
-

Bullseye

-

Used for centering all children (typically a single item) both vertically and horizontally within a parent element.

- -
-

Basic Bullseye

-
-
Bam!
-
- -

Code

- 
<div class="pfe-l-bullseye">
-  <div class="pfe-l-bullseye__item">Bam!</div>
-</div>
-
-
-
- -
-
-

Color Palette

-
-
-
-

Click the buttons below to change the theme context of the container:

-
- - - - - - - - - -
-

UI elements

-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-

Surface elements

-
- - - - - - - -
-
- -
-
-
-
-

Text & link

-
-
- -

This is 1st level heading

-

This is a test paragraph.

-

This is 2nd level heading

-

This is a test paragraph.

-

This is 3rd level heading

-

This is a test paragraph.

-

This is 4th level heading

-

This is a test paragraph.

-
This is 5th level heading
-

This is a test paragraph.

-
This is 6th level heading
-

This is a test paragraph with a link

-
-
- - - - diff --git a/elements/pfe-styles/demo/pfe-layouts.story.js b/elements/pfe-styles/demo/pfe-layouts.story.js deleted file mode 100644 index 1e9b65bf..00000000 --- a/elements/pfe-styles/demo/pfe-layouts.story.js +++ /dev/null @@ -1,75 +0,0 @@ -import { storiesOf } from "@storybook/polymer"; - -const stories = storiesOf("Layouts", module); - -// Add the readme -import readme from "../README.md"; -stories.addParameters({ - notes: { - markdown: readme - } -}); - -stories.add( - "pfe-styles", - () => ` - - - -
-

Pure Grid

-
-
Item
-
Item
-
Item
-
Item
-
Item
-
-
-
-

Bootstrap-style Columns

-
-
Default Item
-
pfe-m-2-col
-
pfe-m-10-col
-
pfe-m-4-col
-
pfe-m-4-col
-
pfe-m-4-col
-
pfe-m-6-col pfe-m-3-col-on-md
-
pfe-m-6-col pfe-m-3-col-on-md pfe-m-startat-7-col-on-md
-
pfe-m-6-col pfe-m-3-col-on-md
-
-
-
-

Basic Bullseye

-
-
Bam!
-
-
- ` -); diff --git a/elements/pfe-styles/demo/pfe-styles.story.js b/elements/pfe-styles/demo/pfe-styles.story.js deleted file mode 100644 index 1e9b65bf..00000000 --- a/elements/pfe-styles/demo/pfe-styles.story.js +++ /dev/null @@ -1,75 +0,0 @@ -import { storiesOf } from "@storybook/polymer"; - -const stories = storiesOf("Layouts", module); - -// Add the readme -import readme from "../README.md"; -stories.addParameters({ - notes: { - markdown: readme - } -}); - -stories.add( - "pfe-styles", - () => ` - - - -
-

Pure Grid

-
-
Item
-
Item
-
Item
-
Item
-
Item
-
-
-
-

Bootstrap-style Columns

-
-
Default Item
-
pfe-m-2-col
-
pfe-m-10-col
-
pfe-m-4-col
-
pfe-m-4-col
-
pfe-m-4-col
-
pfe-m-6-col pfe-m-3-col-on-md
-
pfe-m-6-col pfe-m-3-col-on-md pfe-m-startat-7-col-on-md
-
pfe-m-6-col pfe-m-3-col-on-md
-
-
-
-

Basic Bullseye

-
-
Bam!
-
-
- ` -); diff --git a/elements/pfe-styles/demo/theme-test.html b/elements/pfe-styles/demo/theme-test.html deleted file mode 100644 index 24710c94..00000000 --- a/elements/pfe-styles/demo/theme-test.html +++ /dev/null @@ -1,599 +0,0 @@ - - - - - - - PatternFly Element | pfe-modal Demo - - - - - - - - - - - - - - - - - - - - -
-

Accordion component

-
-
- - -

Nested panel example

- - - - -

Panel with multiple paragraphs

- - -

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut - labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores - et ea rebum.

-

Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor - sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore - magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet - clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

-

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut - labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores - et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

- - - - -

Panel with links

- - -

The characters in the portraits are not actually ghosts. They mainly are there just to - repeat common phrases or serve as a general a href="foobarbaz.com">representation of the individual - they depict. A portrait of his parents would not be of much help to Harry.

- - -

Panel with CTA

- - -

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore - et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. -

-

Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit - amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna - aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd - gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

- - - -
- - - -
-

Accordion component on dark

-
-
- - -

Nested panel example

- - - - -

Panel with multiple paragraphs

- - -

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut - labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores - et ea rebum.

-

Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor - sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore - magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet - clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

-

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut - labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores - et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

- - - - -

Panel with links

- - -

The characters in the portraits are not actually ghosts. They mainly are there just to - repeat common phrases or serve as a general a href="foobarbaz.com">representation of the individual - they depict. A portrait of his parents would not be of much help to Harry.

- - -

Panel with CTA

- - -

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore - et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. -

-

Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit - amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna - aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd - gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

- - - -
- - - - -
-

Accordion component on saturated

-
-
- - -

Nested panel example

- - - - -

Panel with multiple paragraphs

- - -

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut - labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores - et ea rebum.

-

Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor - sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore - magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet - clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

-

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut - labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores - et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

- - - - -

Panel with links

- - -

The characters in the portraits are not actually ghosts. They mainly are there just to - repeat common phrases or serve as a general a href="foobarbaz.com">representation of the individual - they depict. A portrait of his parents would not be of much help to Harry.

- - -

Panel with CTA

- - -

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore - et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. -

-

Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit - amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna - aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd - gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

- - - -
- - - -
-

Band component

-

Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, - sed diam voluptua.

-
-
-

Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, - sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea - takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed - diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et - accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum - dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor - invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo - dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

-
- -

Card component

-

Ut wisi enim ad minim veniam.

- - Call-to-action component - - - - Call-to-action component - - - - -
-

Band component

-

Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, - sed diam voluptua.

-
- - - - -
-

Band component

-

Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, - sed diam voluptua.

-
- - - - -
-

Tab component

-
- -

Tab 1

 - -

Content 1

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et - dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex - ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat - nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit - anim id est laborum.

- -

Tab 2

 - -

Content 2

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et - dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex - ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat - nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit - anim id est laborum.

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et - dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex - ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat - nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit - anim id est laborum.

- -

Tab 3

 - -

Content 3

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et - dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex - ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat - nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit - anim id est laborum.

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et - dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex - ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat - nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit - anim id est laborum.

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et - dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex - ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat - nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit - anim id est laborum.

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et - dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex - ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat - nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit - anim id est laborum.

- - - - - -
-

Tab component

-
- -

Tab 1

 - -

Content 1

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et - dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex - ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat - nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit - anim id est laborum.

- -

Tab 2

 - -

Content 2

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et - dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex - ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat - nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit - anim id est laborum.

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et - dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex - ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat - nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit - anim id est laborum.

- -

Tab 3

 - -

Content 3

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et - dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex - ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat - nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit - anim id est laborum.

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et - dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex - ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat - nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit - anim id est laborum.

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et - dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex - ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat - nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit - anim id est laborum.

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et - dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex - ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat - nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit - anim id est laborum.

- - - - - -
-

Tab component

-
- -

Tab 1

 - -

Content 1

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et - dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex - ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat - nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit - anim id est laborum.

- -

Tab 2

 - -

Content 2

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et - dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex - ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat - nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit - anim id est laborum.

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et - dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex - ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat - nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit - anim id est laborum.

- -

Tab 3

 - -

Content 3

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et - dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex - ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat - nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit - anim id est laborum.

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et - dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex - ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat - nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit - anim id est laborum.

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et - dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex - ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat - nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit - anim id est laborum.

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et - dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex - ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat - nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit - anim id est laborum.

- - - - - -
-

Call-to-action component

-
- - - - -
-

Call-to-action component

-
- - - -
-

Call-to-action component

-
- - - - - - -
-

Band component

-
-
- - -

Card component

-

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.

- Call-to-action component - - - -

- Card heading -

-

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore - et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. - Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

-
- Learn more -
- - - - -

Card heading

-

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore - et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. - Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

- - -
- - - -

Modal demo

-
- - - Open modal -

Modal with a header

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor - incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco - laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit - esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa - qui officia deserunt mollit anim id est laborum.

- Learn more - - - - - Open modal -

Modal with a header

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor - incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco - laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit - esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa - qui officia deserunt mollit anim id est laborum.

- Learn more - - - - - Open modal -

Modal with a header

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor - incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco - laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit - esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa - qui officia deserunt mollit anim id est laborum.

- Learn more - - -
- - - - - diff --git a/elements/pfe-styles/gulpfile.js b/elements/pfe-styles/gulpfile.js deleted file mode 100644 index 45f7c7ca..00000000 --- a/elements/pfe-styles/gulpfile.js +++ /dev/null @@ -1,5 +0,0 @@ -// rollup.config.js -const gulpFactory = require("../../scripts/gulpfile.factory.js"); -const pfelementPackage = require("./package.json"); - -gulpFactory(pfelementPackage); diff --git a/elements/pfe-styles/package-lock.json b/elements/pfe-styles/package-lock.json deleted file mode 100644 index 972c81f9..00000000 --- a/elements/pfe-styles/package-lock.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "name": "@patternfly/pfe-styles", - "version": "1.0.0-prerelease.45", - "lockfileVersion": 1, - "requires": true, - "dependencies": { - "@patternfly/pfe-sass": { - "version": "1.0.0-prerelease.28" - } - } -} diff --git a/elements/pfe-styles/package.json b/elements/pfe-styles/package.json deleted file mode 100644 index 2dd6f644..00000000 --- a/elements/pfe-styles/package.json +++ /dev/null @@ -1,51 +0,0 @@ -{ - "name": "@patternfly/pfe-styles", - "pfelement": { - "className": "PfeLayouts", - "elementName": "pfe-layouts", - "assets": [ - "pfe-base.*css", - "pfe-base.*.map", - "pfe-context.*css", - "pfe-context.*.map", - "pfe-layouts.*css", - "pfe-layouts.*.map" - ] - }, - "version": "1.0.0-prerelease.45", - "publishConfig": { - "access": "public" - }, - "description": "Helper classes for PatternFly Elements", - "keywords": [ - "web-components", - "html" - ], - "files": [ - "dist" - ], - "repository": { - "type": "git", - "url": "github:patternfly/patternfly-elements", - "directory": "elements/pfe-styles" - }, - "main": "./dist/pfe-layouts.css", - "scripts": { - "build": "../../node_modules/.bin/gulp build:nojs && ../../node_modules/.bin/prettier --ignore-path ../../.prettierignore --write '**/*.{js,json}'", - "dev": "../../node_modules/.bin/gulp dev:nojs" - }, - "contributors": [ - { - "name": "Mark Caron", - "email": "mark@redhat.com", - "url": "https://github.com/markcaron" - } - ], - "license": "MIT", - "dependencies": { - "@patternfly/pfe-sass": "^1.0.0-prerelease.45" - }, - "bugs": { - "url": "https://github.com/patternfly/patternfly-elements/issues" - } -} diff --git a/elements/pfe-styles/src/layouts/_alignments.scss b/elements/pfe-styles/src/layouts/_alignments.scss deleted file mode 100644 index f43a90fe..00000000 --- a/elements/pfe-styles/src/layouts/_alignments.scss +++ /dev/null @@ -1,13 +0,0 @@ -// Text Alignment Helpers - -.pfe-l--text-align--left { - text-align: left; -} - -.pfe-l--text-align--center { - text-align: center; -} - -.pfe-l--text-align--right { - text-align: right; -} diff --git a/elements/pfe-styles/src/layouts/_bullseye.scss b/elements/pfe-styles/src/layouts/_bullseye.scss deleted file mode 100644 index 4f09bb9c..00000000 --- a/elements/pfe-styles/src/layouts/_bullseye.scss +++ /dev/null @@ -1,10 +0,0 @@ -// Bullseye Layout - -.pfe-l-bullseye { - display: flex; - align-items: center; - justify-content: center; - height: 100%; - padding: #{pfe-var(container-spacer)}; - margin: 0; -} diff --git a/elements/pfe-styles/src/layouts/_grid.scss b/elements/pfe-styles/src/layouts/_grid.scss deleted file mode 100644 index b0532455..00000000 --- a/elements/pfe-styles/src/layouts/_grid.scss +++ /dev/null @@ -1,187 +0,0 @@ -// Grid Layout - -/// =========================================================================== -/// Component Specific SASS Vars -/// =========================================================================== - -$breakpoints: ("": null, "xs": "-on-xs", "sm": "-on-sm", "md": "-on-md", "lg": "-on-lg", "xl": "-on-xl"); -$grip-gap: map-get($pfe-vars, 'container-spacer'); -$half-grip-gap: map-get($pfe-vars, 'container-spacer') / 2; - - -/// =========================================================================== -/// Media Queries for Grid -/// =========================================================================== - -/// Media query used to create responsive grid items -/// @group mixins -/// @moduleType mixin -/// @parameter {Point} xs, sm, md, lg, xl, null -@mixin GridMediaQuery($point) { - @if $point == "xs" { - @media screen and (max-width: #{map-get($pfe-vars, 'grid-breakpoint--xs')}) { - @content; - } - } - @else if $point == "sm" or $point == "" or $point == null { - @media screen and (min-width: #{map-get($pfe-vars, 'grid-breakpoint--sm')}) { - @content; - } - } - @else if $point == "md" { - @media screen and (min-width: #{map-get($pfe-vars, 'grid-breakpoint--md')}) { - @content; - } - } - @else if $point == "lg" { - @media screen and (min-width: #{map-get($pfe-vars, 'grid-breakpoint--lg')}) { - @content; - } - } - @else if $point == "xl" { - @media screen and (min-width: #{map-get($pfe-vars, 'grid-breakpoint--xl')}) { - @content; - } - } -} - -/// Creates flexbox item -/// @group mixins -/// @moduleType mixin -/// @parameter {Suffix} xs, sm, md, lg, xl, null -@mixin FlexItemModifiers($suffix: null) { - // generate column span modifiers - @for $col-num from 1 through 12 { - > .pfe-m-#{$col-num}-col#{$suffix} { - $this-size: ($col-num / 12) * 100%; - width: calc(#{$this-size} - #{$grip-gap}); - } - } - - // Start-at and row-span aren't available in fallbacks. -} - -/// Creates grid item -/// @group mixins -/// @moduleType mixin -/// @parameter {Suffix} xs, sm, md, lg, xl, null -@mixin GridItemModifiers($suffix: null) { - // generate column span modifiers - @for $col-num from 1 through 12 { - > .pfe-m-#{$col-num}-col#{$suffix} { - width: auto; // Remove IE11 - grid-column-start: auto; - grid-column-end: span $col-num; - } - } - - // generate column startat modfiers - @for $col-num from 1 through 12 { - > .pfe-m-startat-#{$col-num}-col#{$suffix} { - grid-column-start: col-start ($col-num); // removed +1 so it's value is literal. - } - } - - // generate row span modfiers - @for $row-num from 1 through 12 { - > .pfe-m-#{$row-num}-row#{$suffix} { - grid-row: span $row-num; - } - } -} - -@mixin FlexAllModifiers($suffix: null) { - @for $col-num from 1 through 12 { - &.pfe-m-all-#{$col-num}-col#{$suffix} { - > * { - $this-size: ($col-num / 12) * 100%; - width: calc(#{$this-size} - #{$grip-gap}); - } - } - } -} - -@mixin GridAllModifiers($suffix: null) { - @for $col-num from 1 through 12 { - &.pfe-m-all-#{$col-num}-col#{$suffix} { - > * { - width: auto; // Remove IE11 - grid-column-start: auto; - grid-column-end: span $col-num; - } - } - } -} - - -/// =========================================================================== -/// Flexbox for IE11 support -/// =========================================================================== -.pfe-l-grid { - box-sizing: border-box; - display: flex; - flex-wrap: wrap; - - > *, - &__item { - box-sizing: border-box; - width: 100%; - margin: 0 auto; - } - - // Loop through $breakpoints map to generate responsive classes - @each $breakpoint, $value in $breakpoints { - @include GridMediaQuery($breakpoint) { - @include FlexAllModifiers($value); - @include FlexItemModifiers($value); - } - } - - &.pfe-m-gutters { - margin: calc(#{$half-grip-gap} * -1); - - & > * { - margin: #{$half-grip-gap}; - } - } -} - -/// =========================================================================== -/// Grid for Smarter Browsers -/// =========================================================================== - -@supports (display: grid) { - .pfe-l-grid { - display: grid; - grid-template-columns: repeat(12, [col-start] 1fr); - - > *, - &__item { - width: auto; // Remove IE11 - margin: 0; // Remove IE11 - grid-column-start: auto; - grid-column-end: span 12; - } - - &.pfe-l-grid-fill-height { - height: 100%; - } - - // Loop through $breakpoints map to generate responsive classes - @each $breakpoint, $value in $breakpoints { - @include GridMediaQuery($breakpoint) { - @include GridAllModifiers($value); - @include GridItemModifiers($value); - } - } - - &.pfe-m-gutters { - grid-gap: #{$grip-gap}; - margin: 0; // Remove IE11 - - & > * { - margin: 0; // Remove IE11 - } - } - } -} diff --git a/elements/pfe-styles/src/pfe-base.scss b/elements/pfe-styles/src/pfe-base.scss deleted file mode 100644 index 10048f94..00000000 --- a/elements/pfe-styles/src/pfe-base.scss +++ /dev/null @@ -1,115 +0,0 @@ -//@TODO, pull from https://github.com/patternfly/patternfly-next/blob/master/src/patternfly/_globals.scss#L90 -@import "../../pfe-sass/pfe-sass"; -$LOCAL: pfelement; - -// NORMALIZE -*, -*::before, -*::after { - box-sizing: border-box; -} - -html, -body, -p, -ol, -ul, -li, -dl, -dt, -dd, -blockquote, -figure, -fieldset, -legend, -textarea, -pre, -iframe, -hr, -h1, -h2, -h3, -h4, -h5, -h6 { - padding: 0; - margin-top: 0; - &:last-child { - margin-bottom: 0; - } -} - -ul { - list-style: none; -} - -button, -input, -select, -textarea { - margin: 0; -} - -img, -embed, -iframe, -object, -audio, -video { - max-width: 100%; - height: auto; -} - -iframe { - border: 0; -} - -table { - border-spacing: 0; - border-collapse: collapse; -} - -td, -th { - padding: 0; - text-align: left; -} - -// PatternFly Styles - -html { - @include pfe-set-broadcast-theme(light); - font-family: sans-serif; - line-height: #{pfe-var(line-height)}; -} - - -body { - font-family: #{pfe-var(font-family)}; - font-size: #{pfe-var(font-size)}; - font-weight: #{pfe-var(font-weight--normal)}; - line-height: #{pfe-var(line-height)}; - color: #{pfe-color(text)}; - text-align: left; - margin: 0; -} - -// Links styles -a { - color: #{pfe-apply-broadcast(link)}; - text-decoration: #{pfe-apply-broadcast(link-decoration)}; - - @each $state in (hover, focus, visited) { - &:#{$state} { - color: #{pfe-apply-broadcast(link--#{$state})}; - text-decoration: #{pfe-apply-broadcast(link-decoration--#{$state})}; - } - } -} - -button, -a { - cursor: pointer; -} - - diff --git a/elements/pfe-styles/src/pfe-colors.scss b/elements/pfe-styles/src/pfe-colors.scss deleted file mode 100644 index b9ecf9a7..00000000 --- a/elements/pfe-styles/src/pfe-colors.scss +++ /dev/null @@ -1,78 +0,0 @@ -/* DEMO FILE ONLY, NOT FOR PRODUCTION USE */ - -@import "../../pfe-sass/pfe-sass"; - -:root { - @each $name, $color in $pfe-colors { - --theme--#{$name}: #{$color}; - } -} - -@function contexts($list) { - @each $item in $list { - @if str-starts-with($item, "on") { - @return '[on="#{nth(str-split($item, "-"), 2)}"] '; - } - } - @return ""; -} - -@function states($list) { - @each $s in (hover, focus, visited) { - @if index($list, $s) { - @return "--#{$s}"; - } - } - @return ""; -} - -@function themes($list, $color) { - @if index($list, theme) { - @return $color; - } - @return ""; -} - -@each $name, $color in $pfe-colors { - $list: str-split($name, $separator: "--"); - $property: background-color; - $context: #{contexts($list)}; - $state: #{states($list)}; - $theme: #{themes($list, $color)}; - - @if length($list) > 1 { - @if index($list, "text") { - $property: color; - } - } - - // UI styles, not link - @if str-starts-with(#{first($list)}, "ui") and not (str-starts-with(#{first($list)}, "link")) { - #{unquote($context)}.#{first($list)}#{unquote($state)} { - #{$property}: var(--theme--#{$name}, #{$color}); - @if str-index($string: $name, $substring: "text") == null { - &::after { - content: "#{$name}"; - } - } - } - } - - // Surface styles - @if index($list, "surface") { - #{unquote($context)}.#{nth($list, 2)}#{unquote($state)} { - @if $theme != "" and $theme != light { - color: #{pfe-color(text--on-#{$theme})}; - } @else if $theme == light { - color: #{pfe-color(text)}; - } @else { - #{$property}: var(--theme--#{$name}, #{$color}); - } - @if str-index($string: $name, $substring: "text") == null { - &::after { - content: "#{$name}"; - } - } - } - } -} diff --git a/elements/pfe-styles/src/pfe-context.scss b/elements/pfe-styles/src/pfe-context.scss deleted file mode 100644 index be2f7eac..00000000 --- a/elements/pfe-styles/src/pfe-context.scss +++ /dev/null @@ -1,9 +0,0 @@ -@import "../../pfe-sass/pfe-sass"; - -// Helper classes to aid in theming on custom pages -@each $theme in (dark, saturated, light) { - .on-#{$theme} { - @include pfe-set-broadcast-theme($theme); - --theme: #{$theme}; - } -} diff --git a/elements/pfe-styles/src/pfe-layouts.scss b/elements/pfe-styles/src/pfe-layouts.scss deleted file mode 100644 index de035569..00000000 --- a/elements/pfe-styles/src/pfe-layouts.scss +++ /dev/null @@ -1,5 +0,0 @@ -@import "../../pfe-sass/pfe-sass"; - -@import "layouts/alignments"; -@import "layouts/grid"; -@import "layouts/bullseye"; diff --git a/elements/pfelement b/elements/pfelement new file mode 120000 index 00000000..e8c69272 --- /dev/null +++ b/elements/pfelement @@ -0,0 +1 @@ +../node_modules/@patternfly/pfelement \ No newline at end of file diff --git a/elements/pfelement/.npmignore b/elements/pfelement/.npmignore deleted file mode 100644 index 61ba4300..00000000 --- a/elements/pfelement/.npmignore +++ /dev/null @@ -1 +0,0 @@ -_temp diff --git a/elements/pfelement/LICENSE.txt b/elements/pfelement/LICENSE.txt deleted file mode 100644 index 599bd61b..00000000 --- a/elements/pfelement/LICENSE.txt +++ /dev/null @@ -1,19 +0,0 @@ -Copyright 2020 Red Hat, Inc. - -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is -furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in -all copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -SOFTWARE. diff --git a/elements/pfelement/README.md b/elements/pfelement/README.md deleted file mode 100644 index 0106f815..00000000 --- a/elements/pfelement/README.md +++ /dev/null @@ -1,187 +0,0 @@ -# PFElement Element - -This is the base element that all other PFElements should extend. It handles setting up a shadow root and applies Shady CSS if it is needed. - -To create a new PFElement, use `npm run new` from the root of the PFElements repo. After answering a few questions, a new element will be generated for you by [generator-pfelement][generator]. - -Here is an example of a new element and how it extends the base PFElement. - -```javascript -import PFElement from "../pfelement/dist/pfelement.js"; - -class MyElement extends PFElement { - // The HTML tag name for this element. This will be passed into `customElements.define()`. - static get tag() { - return "my-element"; - } - - // The path to the element's SCSS file. It is compiled to CSS at build time. - get styleUrl() { - return "my-element.scss"; - } - - // The path to the element's template. This used at build time. - get templateUrl() { - return "my-element.html"; - } - - constructor() { - // The call to super is first and contains a reference to the class itself. - // This allows the base class to see any of MyElement's static properties. - super(MyElement); - - // any other work to do during the constructor goes here - } - - // connectedCallback runs when the element is placed into the DOM. Note that - // in dynamic apps, this _can_ happen more than once, for instance if an - // element is moved from one part of the DOM tree to another. - connectedCallback() { - // super's connectedCallback goes first - super.connectedCallback(); - - // any other work to do during connectedCallback goes here - } -} - -PFElement.create(MyElement); -``` - -## Tooling / functions - -The base class has a set of tools available for use inside all web components extending it. - -### Types - -Define the type of your web component by extending the PfeTypes getter. A component can be classified as container, content, or combo. These are defined in more detail in the documentation. - -``` - // Declare the type of this component - static get PfeType() { - return PFElement.PfeTypes.Container; - } -``` - -### Theme - -All components automatically observe and react to the attribute `pfe-theme` which can equal 1 of 3 possible contexts: - -- `light` -- `dark` -- `saturated` - -Theme context is automatically passed down from parent components to their children (often being defined by container elements and observed and acted upon by content components) **without** manual intervention by a developer. This is done through the `on` attribute. The `on` attribute should not be manually edited or added or manipulated by the JavaScript of a component. - -Adding the `pfe-theme` attribute to any component will **break that inheritance** and manually invoke your preferred theme. This is a way to **opt-out** of the contexts provided by parent elements. Only add this attribute if you want to walk away from inherited theme. - -### Random ID - -Need to set a random ID on any part of your web component? Use the randomId getter: - -``` - this.newId = this.randomId; -``` - -### CSS Variables - -You can query for or set the value of a CSS variable using the `cssVariable` function. It has 3 possible inputs: - -1) `name`: The name of the CSS variable you are querying for (you can omit the `--` at the beginning). -2) `value`: This input is _optional_. By passing in a value to the function, you are opting to set the variable name you provided equal to the value you have passed in. -3) `element`: This defaults to the `this` context of the web component calling the function but you can pass in any element. This is useful if you want to attach a specific CSS Variable to a shadow element in your template for example. - -Querying for a variable's value: -``` -this.cssVariable("pfe-cta--Color"); -``` - -Setting a value for a variable: -``` -this.cssVariable("pfe-cta--Color", "#333"); -``` - -Setting a value for a variable on a template element: -``` -this.cssVariable("pfe-cta--Color", "#333", this.shadowRoot.querySelector(".pfe-cta--arrow")); -``` - -### Querying for a slot(s) - -There are 2 functions, `has_slot` and `has_slots` which allow you to query for the existence of a slot in the light DOM. These are useful in the templates as a means of avoiding printing empty slots or wrappers. - -- `has_slot`: Accepts the name of the slot you are querying for (does not work for default slots yet) and returns a NodeElement of that slot if it exists and null if it does not. - -- `has_slots`: Accepts the name of the slot you are querying for (does not work for default slots yet) and returns a NodeList of all elements assigned to that slot, if they exist, and null if they do not. - -### Context set and update - -There are 2 functions for updating the theme context of a component. The first, `context_set`, will update the theme of the component calling the function using the following logic: - -1. Check that element for the value of the `--theme` variable, if it exists. -2. If it does not exist, the component then checks for a `pfe-theme` attribute. -3. Finally, if neither has a value, the optional feedback input value is used. - -If a theme value is defined at any point of this flow, an `on` attribute will be attached and assigned that value. - -The `context_update` function will use much the same logic except it updates the theme context for the component calling the function and triggers an update for all of it's pfelement children. - -### Log - -Prints a message to the console log in a standardized format when debugging is turned on: `[pfe-band]: This is my console message.`. To invoke this inside an element, you can add `this.log("This is my console message");` to your JS file. - -### Emit event - -This allows you to dispatch an event in a standardized way. The function accepts the name of the event and an object containing details about that event. That object supports the following configuration: - -| Event setting | Default value | -| --- | --- | -| bubbles | true | -| cancelable | true | -| composed | false | -| detail | {} | - - -Elements should contain an events object which lists all the event names: - -``` -static get events() { - return { - change: `${this.tag}:change` - }; -} -``` - -And then reference that object in the following way to invoke those events: - -``` -this.emitEvent( - PfeAccordion.events.change, { - detail: { - expanded: !this.expanded - } - } -); -``` - -## Test - - npm run test - -## Build - - npm run build - -## Demo - -From the PFElements root directory, run: - - npm start - -## Code style - -PFElement (and all PFElements) use [Prettier][prettier] to auto-format JS and JSON. The style rules get applied when you commit a change. If you choose to, you can [integrate your editor][prettier-ed] with Prettier to have the style rules applied on every save. - -[prettier]: https://github.com/prettier/prettier/ -[prettier-ed]: https://prettier.io/docs/en/editors.html -[web-component-tester]: https://github.com/Polymer/web-component-tester -[generator]: https://github.com/PFElements/generator-pfelement diff --git a/elements/pfelement/demo/index.html b/elements/pfelement/demo/index.html deleted file mode 100644 index 74925975..00000000 --- a/elements/pfelement/demo/index.html +++ /dev/null @@ -1,23 +0,0 @@ - - - - - PFElements: pfelement Demo - - - - - - - - - - - - - This is pfelement - - - diff --git a/elements/pfelement/gulpfile.js b/elements/pfelement/gulpfile.js deleted file mode 100644 index 556c0204..00000000 --- a/elements/pfelement/gulpfile.js +++ /dev/null @@ -1,4 +0,0 @@ -const gulpFactory = require("../../scripts/gulpfile.factory.js"); -const pfelementPackage = require("./package.json"); - -gulpFactory(pfelementPackage); diff --git a/elements/pfelement/package-lock.json b/elements/pfelement/package-lock.json deleted file mode 100644 index d09bee7c..00000000 --- a/elements/pfelement/package-lock.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "name": "@patternfly/pfelement", - "version": "1.0.0-prerelease.45", - "lockfileVersion": 1 -} diff --git a/elements/pfelement/package.json b/elements/pfelement/package.json deleted file mode 100644 index 97ae3cc6..00000000 --- a/elements/pfelement/package.json +++ /dev/null @@ -1,55 +0,0 @@ -{ - "name": "@patternfly/pfelement", - "pfelement": { - "className": "PFElement", - "elementName": "pfelement", - "assets": [ - "pfelement.*css", - "pfelement.*css.map" - ] - }, - "version": "1.0.0-prerelease.45", - "publishConfig": { - "access": "public" - }, - "description": "Base class for PatternFly Elements", - "keywords": [ - "web-components", - "html" - ], - "repository": { - "type": "git", - "url": "github:patternfly/patternfly-elements", - "directory": "elements/pfelement" - }, - "main": "./dist/pfelement.umd.js", - "module": "./dist/pfelement.js", - "unpkg": "./dist/pfelement.umd.min.js", - "files": [ - "dist" - ], - "scripts": { - "build": "../../node_modules/.bin/gulp && ../../node_modules/.bin/prettier --ignore-path ../../.prettierignore --write '**/*.{js,json}'", - "dev": "../../node_modules/.bin/gulp dev", - "test": "../../node_modules/.bin/wct --configFile ../../wct.conf.json elements/pfelement/test/" - }, - "contributors": [ - { - "name": "Kyle Buchanan", - "email": "kylebuch8@gmail.com", - "url": "https://github.com/kylebuch8" - }, - { - "name": "Michael Clayton" - }, - { - "name": "castastrophe", - "url": "https://github.com/castastrophe" - } - ], - "license": "MIT", - "generator-pfelement-version": "0.3.4", - "bugs": { - "url": "https://github.com/patternfly/patternfly-elements/issues" - } -} diff --git a/elements/pfelement/rollup.config.js b/elements/pfelement/rollup.config.js deleted file mode 100644 index 498a7da7..00000000 --- a/elements/pfelement/rollup.config.js +++ /dev/null @@ -1,5 +0,0 @@ -// rollup.config.js -import configFactory from "../../scripts/rollup.config.factory.js"; -import pfelementPackage from "./package.json"; - -export default configFactory(pfelementPackage.pfelement); diff --git a/elements/pfelement/src/pfelement--noscript.css b/elements/pfelement/src/pfelement--noscript.css deleted file mode 100644 index cbd6aa9e..00000000 --- a/elements/pfelement/src/pfelement--noscript.css +++ /dev/null @@ -1,4 +0,0 @@ -/* secret weapon in the specificificificificity wars */ -body[unresolved][unresolved] { - opacity: 1; -} diff --git a/elements/pfelement/src/pfelement.js b/elements/pfelement/src/pfelement.js deleted file mode 100644 index 8d61fd0b..00000000 --- a/elements/pfelement/src/pfelement.js +++ /dev/null @@ -1,422 +0,0 @@ -import { autoReveal } from "./reveal.js"; -const prefix = "pfe-"; - -class PFElement extends HTMLElement { - static create(pfe) { - window.customElements.define(pfe.tag, pfe); - } - - static debugLog(preference = null) { - if (preference !== null) { - PFElement._debugLog = !!preference; - } - return PFElement._debugLog; - } - - static log(...msgs) { - if (PFElement.debugLog()) { - console.log(...msgs); - } - } - - static get PfeTypes() { - return { - Container: "container", - Content: "content", - Combo: "combo" - }; - } - - static get version() { - return "{{version}}"; - } - - static get observedAttributes() { - return ["pfe-theme"]; - } - - get randomId() { - return Math.random() - .toString(36) - .substr(2, 9); - } - - get version() { - return this._pfeClass.version; - } - - get pfeType() { - return this.getAttribute(`${prefix}type`); - } - - set pfeType(value) { - this.setAttribute(`${prefix}type`, value); - } - - cssVariable(name, value, element = this) { - name = name.substr(0, 2) !== "--" ? "--" + name : name; - if (value) { - element.style.setProperty(name, value); - } - return window - .getComputedStyle(element) - .getPropertyValue(name) - .trim(); - } - - // Returns a single element assigned to that slot; if multiple, it returns the first - has_slot(name) { - return this.querySelector(`[slot='${name}']`); - } - - // Returns an array with all elements assigned to that slot - has_slots(name) { - return [...this.querySelectorAll(`[slot='${name}']`)]; - } - - // Update the theme context for self and children - context_update() { - const children = this.querySelectorAll("[pfelement]"); - let theme = this.cssVariable("theme"); - - // Manually adding `pfe-theme` overrides the css variable - if (this.hasAttribute("pfe-theme")) { - theme = this.getAttribute("pfe-theme"); - // Update the css variable to match the data attribute - this.cssVariable("theme", theme); - } - - // Update theme for self - this.context_set(theme); - - // For each nested, already upgraded component - // set the context based on the child's value of --theme - // Note: this prevents contexts from parents overriding - // the child's context should it exist - [...children].map(child => { - if (child.connected) { - child.context_set(theme); - } - }); - } - - // Get the theme variable if it exists, set it as an attribute - context_set(fallback) { - let theme = this.cssVariable("theme"); - if (!theme) { - theme = this.getAttribute("pfe-theme"); - } - if (!theme && fallback) { - theme = fallback; - } - if (theme) { - this.setAttribute("on", theme); - } - } - - constructor(pfeClass, { type = null, delayRender = false } = {}) { - super(); - - this.connected = false; - this._pfeClass = pfeClass; - this.tag = pfeClass.tag; - this.props = pfeClass.properties; - this.slots = pfeClass.slots; - this._queue = []; - this.template = document.createElement("template"); - - this.log(`Constructing...`); - - this.attachShadow({ mode: "open" }); - - if (type) { - this._queueAction({ - type: "setProperty", - data: { - name: "pfeType", - value: type - } - }); - } - - if (!delayRender) { - this.log(`Render...`); - this.render(); - this.log(`Rendered.`); - } - - this.log(`Constructed.`); - } - - connectedCallback() { - this.connected = true; - this.log(`Connecting...`); - - if (window.ShadyCSS) { - this.log(`Styling...`); - window.ShadyCSS.styleElement(this); - this.log(`Styled.`); - } - - // Throw a warning if the on attribute was manually added before upgrade - if (!this.hasAttribute("pfelement") && this.hasAttribute("on")) { - console.warn( - `${this.tag}${ - this.id ? `[#${this.id}]` : `` - }: The "on" attribute is protected and should not be manually added to a component. The base class will manage this value for you on upgrade.` - ); - } - - // @TODO maybe we should use just the attribute instead of the class? - // https://github.com/angular/angular/issues/15399#issuecomment-318785677 - this.classList.add("PFElement"); - this.setAttribute("pfelement", ""); - - if (typeof this.props === "object") { - this._mapSchemaToProperties(this.tag, this.props); - this.log(`Properties attached.`); - } - - if (typeof this.slots === "object") { - this._mapSchemaToSlots(this.tag, this.slots); - this.log(`Slots attached.`); - } - - if (this._queue.length) { - this._processQueue(); - } - - // Initialize the on attribute if a theme variable is set - // do not update the on attribute if a user has manually added it - // then trigger an update in nested components - this.context_update(); - - this.log(`Connected.`); - } - - disconnectedCallback() { - this.log(`Disconnecting...`); - - this.connected = false; - - this.log(`Disconnected.`); - } - - attributeChangedCallback(attr, oldVal, newVal) { - if (!this._pfeClass.cascadingAttributes) { - return; - } - - const cascadeTo = this._pfeClass.cascadingAttributes[attr]; - if (cascadeTo) { - this._copyAttribute(attr, cascadeTo); - } - - if (attr === "pfe-theme") { - this.context_update(); - } - } - - _copyAttribute(name, to) { - const recipients = [ - ...this.querySelectorAll(to), - ...this.shadowRoot.querySelectorAll(to) - ]; - const value = this.getAttribute(name); - const fname = value == null ? "removeAttribute" : "setAttribute"; - for (const node of recipients) { - node[fname](name, value); - } - } - - // Map the imported properties json to real props on the element - // @notice static getter of properties is built via tooling - // to edit modify src/element.json - _mapSchemaToProperties(tag, properties) { - this.log("Mapping properties..."); - // Loop over the properties provided by the schema - Object.keys(properties).forEach(attr => { - let data = properties[attr]; - - // Only attach the information if the data provided is a schema object - if (typeof data === "object") { - // Prefix default is true - let hasPrefix = true; - let attrName = attr; - // Set the attribute's property equal to the schema input - this[attr] = data; - // Initialize the value to null - this[attr].value = null; - - if (typeof this[attr].prefixed !== "undefined") { - hasPrefix = this[attr].prefixed; - } - - if (hasPrefix) { - attrName = `${prefix}${attr}`; - } - - // If the attribute exists on the host - if (this.hasAttribute(attrName)) { - // Set property value based on the existing attribute - this[attr].value = this.getAttribute(attrName); - } - // Otherwise, look for a default and use that instead - else if (data.default) { - const dependency_exists = this._hasDependency(tag, data.options); - const no_dependencies = - !data.options || - (data.options && !data.options.dependencies.length); - // If the dependency exists or there are no dependencies, set the default - if (dependency_exists || no_dependencies) { - this.setAttribute(attrName, data.default); - this[attr].value = data.default; - } - } - } - }); - - this.log("Properties mapped."); - } - - // Test whether expected dependencies exist - _hasDependency(tag, opts) { - // Get any possible dependencies for this attribute to exist - let dependencies = opts ? opts.dependencies : []; - // Initialize the dependency return value - let hasDependency = false; - // Check that dependent item exists - // Loop through the dependencies defined - for (let i = 0; i < dependencies.length; i += 1) { - const slot_exists = - dependencies[i].type === "slot" && - this.has_slots(`${tag}--${dependencies[i].id}`).length > 0; - const attribute_exists = - dependencies[i].type === "attribute" && - this.getAttribute(`${prefix}${dependencies[i].id}`); - // If the type is slot, check that it exists OR - // if the type is an attribute, check if the attribute is defined - if (slot_exists || attribute_exists) { - // If the slot does exist, add the attribute with the default value - hasDependency = true; - // Exit the loop - break; - } - } - // Return a boolean if the dependency exists - return hasDependency; - } - - // Map the imported slots json - // @notice static getter of properties is built via tooling - // to edit modify src/element.json - _mapSchemaToSlots(tag, slots) { - this.log("Validate slots..."); - // Loop over the properties provided by the schema - Object.keys(slots).forEach(slot => { - let slotObj = slots[slot]; - - // Only attach the information if the data provided is a schema object - if (typeof slotObj === "object") { - let slotExists = false; - let result = []; - // If it's a named slot, look for that slot definition - if (slotObj.namedSlot) { - // Check prefixed slots - result = this.has_slots(`${tag}--${slot}`); - if (result.length > 0) { - slotObj.nodes = result; - slotExists = true; - } - - // Check for unprefixed slots - result = this.has_slots(`${slot}`); - if (result.length > 0) { - slotObj.nodes = result; - slotExists = true; - } - // If it's the default slot, look for direct children not assigned to a slot - } else { - result = [...this.children].filter( - child => !child.hasAttribute("slot") - ); - - if (result.length > 0) { - slotObj.nodes = result; - slotExists = true; - } - } - - // If the slot exists, attach an attribute to the parent to indicate that - if (slotExists) { - this.setAttribute(`has_${slot}`, ""); - } else { - this.removeAttribute(`has_${slot}`); - } - } - }); - this.log("Slots validated."); - } - - _queueAction(action) { - this._queue.push(action); - } - - _processQueue() { - this._queue.forEach(action => { - this[`_${action.type}`](action.data); - }); - - this._queue = []; - } - - _setProperty({ name, value }) { - this[name] = value; - } - - // @TODO This is a duplicate function to cssVariable above, combine them - static var(name, element = document.body) { - return window - .getComputedStyle(element) - .getPropertyValue(name) - .trim(); - } - - var(name) { - return PFElement.var(name, this); - } - - render() { - this.shadowRoot.innerHTML = ""; - this.template.innerHTML = this.html; - - if (window.ShadyCSS) { - window.ShadyCSS.prepareTemplate(this.template, this.tag); - } - - this.shadowRoot.appendChild(this.template.content.cloneNode(true)); - } - - log(...msgs) { - PFElement.log(`[${this.tag}]`, ...msgs); - } - - emitEvent( - name, - { bubbles = true, cancelable = false, composed = false, detail = {} } = {} - ) { - this.log(`Custom event: ${name}`); - this.dispatchEvent( - new CustomEvent(name, { - bubbles, - cancelable, - composed, - detail - }) - ); - } -} - -autoReveal(PFElement.log); - -export default PFElement; diff --git a/elements/pfelement/src/pfelement.scss b/elements/pfelement/src/pfelement.scss deleted file mode 100644 index 4fbbc1c8..00000000 --- a/elements/pfelement/src/pfelement.scss +++ /dev/null @@ -1,26 +0,0 @@ -@import "../../pfe-sass/pfe-sass"; -$LOCAL: pfelement; - -body { - --pfe-reveal-duration: 0.1618s; - --pfe-reveal-delay: 2s; - - transition: opacity var(--pfe-reveal-duration) ease-in-out; - - @include pfe-set-broadcast-theme(light); -} - -body[unresolved] { - opacity: 0; - animation: reveal var(--pfe-reveal-duration) var(--pfe-reveal-delay) 1 - forwards; -} - -@keyframes reveal { - from { - opacity: 0; - } - to { - opacity: 1; - } -} diff --git a/elements/pfelement/src/reveal.js b/elements/pfelement/src/reveal.js deleted file mode 100644 index e240176f..00000000 --- a/elements/pfelement/src/reveal.js +++ /dev/null @@ -1,28 +0,0 @@ -let logger = () => null; - -export function reveal() { - logger(`[reveal] elements ready, revealing the body`); - window.document.body.removeAttribute("unresolved"); -} - -export function autoReveal(logFunction) { - logger = logFunction; - // If Web Components are already ready, run the handler right away. If they - // are not yet ready, wait. - // - // see https://github.com/github/webcomponentsjs#webcomponents-loaderjs for - // info about web component readiness events - const polyfillPresent = window.WebComponents; - const polyfillReady = polyfillPresent && window.WebComponents.ready; - - if (!polyfillPresent || polyfillReady) { - handleWebComponentsReady(); - } else { - window.addEventListener("WebComponentsReady", handleWebComponentsReady); - } -} - -function handleWebComponentsReady() { - logger("[reveal] web components ready"); - reveal(); -} diff --git a/elements/pfelement/test/fouc-test.html b/elements/pfelement/test/fouc-test.html deleted file mode 100644 index f21b884a..00000000 --- a/elements/pfelement/test/fouc-test.html +++ /dev/null @@ -1,79 +0,0 @@ - - - - - - - - - - - - - - - - - - -

Card 1

This is pfe-card. -
Text in footer
- - - - - diff --git a/elements/pfelement/test/index.html b/elements/pfelement/test/index.html deleted file mode 100644 index 4aa70772..00000000 --- a/elements/pfelement/test/index.html +++ /dev/null @@ -1,19 +0,0 @@ - - - - - - - - - - - diff --git a/elements/pfelement/test/module-amd-test.html b/elements/pfelement/test/module-amd-test.html deleted file mode 100644 index 07d6419a..00000000 --- a/elements/pfelement/test/module-amd-test.html +++ /dev/null @@ -1,42 +0,0 @@ - - - - - - - - - - - - - - - - - - - - -

Card 1

This is pfe-card. -
Text in footer
- - - - - diff --git a/elements/pfelement/test/module-esm-test.html b/elements/pfelement/test/module-esm-test.html deleted file mode 100644 index 1374aec3..00000000 --- a/elements/pfelement/test/module-esm-test.html +++ /dev/null @@ -1,38 +0,0 @@ - - - - - - - - - - - - - - - - - - -

Card 1

This is pfe-card. -
Text in footer
- - - - - - diff --git a/elements/pfelement/test/module-global-test.html b/elements/pfelement/test/module-global-test.html deleted file mode 100644 index 441fca78..00000000 --- a/elements/pfelement/test/module-global-test.html +++ /dev/null @@ -1,39 +0,0 @@ - - - - - - - - - - - - - - - - - - - - -

Card 1

This is pfe-card. -
Text in footer
- - - - - diff --git a/elements/pfelement/test/pfelement_cascade_attribute_test.html b/elements/pfelement/test/pfelement_cascade_attribute_test.html deleted file mode 100644 index 5900650b..00000000 --- a/elements/pfelement/test/pfelement_cascade_attribute_test.html +++ /dev/null @@ -1,159 +0,0 @@ - - - - - - - - - - - - - - - diff --git a/elements/pfelement/test/pfelement_emitEvent.html b/elements/pfelement/test/pfelement_emitEvent.html deleted file mode 100644 index 20c77ddd..00000000 --- a/elements/pfelement/test/pfelement_emitEvent.html +++ /dev/null @@ -1,108 +0,0 @@ - - - - - - - - - - - - This is the element content. - - - - - diff --git a/elements/pfelement/test/pfelement_logging_test.html b/elements/pfelement/test/pfelement_logging_test.html deleted file mode 100644 index d68fee49..00000000 --- a/elements/pfelement/test/pfelement_logging_test.html +++ /dev/null @@ -1,85 +0,0 @@ - - - - - - - - - - - - - - - diff --git a/elements/pfelement/test/pfelement_test.html b/elements/pfelement/test/pfelement_test.html deleted file mode 100644 index 9b7d8255..00000000 --- a/elements/pfelement/test/pfelement_test.html +++ /dev/null @@ -1,143 +0,0 @@ - - - - - - - - - - - - This is the element content. - - - - - diff --git a/generators/element/templates/scripts/gulpfile.factory.js b/generators/element/templates/scripts/gulpfile.factory.js index b6112665..77e02068 100644 --- a/generators/element/templates/scripts/gulpfile.factory.js +++ b/generators/element/templates/scripts/gulpfile.factory.js @@ -27,7 +27,7 @@ module.exports = function factory({ `${elementName}--*.min.css.map`, `${elementName}.json` ]); - + // Dedupe any items files = files.filter((item,index) => files.indexOf(item) === index); @@ -295,7 +295,7 @@ ${fs }) .pipe( replace( - /^(import .*?)(['"]\.\.\/\.\.\/(?!\.\.\/).*)\.js(['"];)$/gm, + /^(import .*?)(['"][\.\.\/]+.*)\.js(['"]; \/\/ \| umd)$/gm, "$1$2.umd$3" ) ) diff --git a/package-lock.json b/package-lock.json index 9e7da689..2bc4e88e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6152,6 +6152,27 @@ "integrity": "sha512-Wg1bImVQ8RPGutT+ySqWRDEhvSVmsvouBQiGq9NejQW33mYbttoC+lVTDR45U/ZbqegwpJT4+1UVOseNaWxvSQ==", "dev": true }, + "@patternfly/pfe-sass": { + "version": "1.0.0-prerelease.50", + "resolved": "https://registry.npmjs.org/@patternfly/pfe-sass/-/pfe-sass-1.0.0-prerelease.50.tgz", + "integrity": "sha512-sYK6UxEzVqqMxIVA5JNVv8virneY7FPSLNfJBD8ENBnwqeUmBJTsE0h3V0LlvpLJhRj0DoBOy1D5DcFB35DPyQ==", + "dev": true + }, + "@patternfly/pfe-styles": { + "version": "1.0.0-prerelease.50", + "resolved": "https://registry.npmjs.org/@patternfly/pfe-styles/-/pfe-styles-1.0.0-prerelease.50.tgz", + "integrity": "sha512-8B/PTPnjvNeuNBgpZX8ko+9/khnTJrWfsJuvy6tS9Y+IhFY7dS4/hm9R9InXale6G1H8Frr0NcV3KJCnpqWUWg==", + "dev": true, + "requires": { + "@patternfly/pfe-sass": "^1.0.0-prerelease.50" + } + }, + "@patternfly/pfelement": { + "version": "1.0.0-prerelease.50", + "resolved": "https://registry.npmjs.org/@patternfly/pfelement/-/pfelement-1.0.0-prerelease.50.tgz", + "integrity": "sha512-h3BXylNpxnt7tMXgKgk6ZbV27F/VfVOd4n7FaXDerUM74dT9l+NRjknAqHaVeYRoWpu0OjdsIQsvmkS5QUUz5A==", + "dev": true + }, "@polymer/esm-amd-loader": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/@polymer/esm-amd-loader/-/esm-amd-loader-1.0.4.tgz", diff --git a/package.json b/package.json index d1146b46..bd5dea47 100644 --- a/package.json +++ b/package.json @@ -43,6 +43,8 @@ "devDependencies": { "@babel/core": "^7.8.3", "@patternfly/patternfly": "^2.50.1", + "@patternfly/pfe-styles": "^1.0.0-prerelease.50", + "@patternfly/pfelement": "^1.0.0-prerelease.50", "@polymer/iron-test-helpers": "^3.0.1", "@storybook/addon-actions": "^5.3.8", "@storybook/addon-backgrounds": "^5.3.8", @@ -69,6 +71,7 @@ "del": "^3.0.0", "dialog-polyfill": "^0.4.10", "dotenv": "^8.2.0", + "gh-pages": "^2.2.0", "ghp": "^1.3.1", "glob": "^7.1.6", "global": "^4.4.0", @@ -123,7 +126,6 @@ "whatwg-fetch": "^3.0.0", "yeoman-generator": "^4.4.0", "yo": "^1.8.5", - "yosay": "^2.0.2", - "gh-pages": "^2.2.0" + "yosay": "^2.0.2" } } diff --git a/scripts/gulpfile.factory.js b/scripts/gulpfile.factory.js index a9732aec..11069ec7 100644 --- a/scripts/gulpfile.factory.js +++ b/scripts/gulpfile.factory.js @@ -299,7 +299,7 @@ ${fs }) .pipe( replace( - /^(import .*?)(['"]\.\.\/\.\.\/(?!\.\.\/).*)\.js(['"];)$/gm, + /^(import .*?)(['"][\.\.\/]+.*)\.js(['"]; \/\/ \| umd)$/gm, "$1$2.umd$3" ) )