ISTWCMS-5596: addition of the button element, component, mixin

src/patterns/01-core/elements/_details.scss

@@ -58,7 +58,7 @@
   display:block;
   font-family: var(--font-book);
   font-size: var(--font-size-00);
-  font-weight: var(--font-weight-700);
+  font-weight: var(--font-weight-3300);
   margin: 0;
   line-height: 1.25;
   outline: 0;

src/patterns/01-core/mixins/_button.scss

+// @file
+// Button styles
+
+$button-border-radius: 0 !default;
+$button-background-color: var(--gray-5) !default;
+$button-background-color-active: var(--gray-5) !default;
+$button-background-color-disabled: var(--gray-2) !default;
+$button-background-color-hover: var(--gray-2) !default;
+$button-background-image: none !default;
+$button-text-color: var(--uw-white) !default;
+$button-text-color-active: var(--uw-white) !default;
+$button-text-color-disabled: var(--gray-4) !default;
+$button-text-color-hover: var(--gray-6) !default;
+$button-text-shadow: none !default;
+$button-font-size: var(--font-size-1) !default;
+
+@mixin button(
+  $color-background: $button-background-color,
+  $color-text: $button-text-color,
+  $color-background-hover: $button-background-color-hover,
+  $color-text-hover: $button-text-color-hover,
+  $color-background-active: $button-background-color-active,
+  $color-text-active: $button-text-color-active,
+  $color-background-disabled: $button-background-color-disabled,
+  $color-text-disabled: $button-text-color-disabled,
+  $border-radius: $button-border-radius,
+  $font-size: $button-font-size
+) {
+  background-color: $color-background;
+  background-image:$button-background-image;
+  border: 0;
+  border-radius: $border-radius;
+  box-shadow:none;
+  color: $color-text;
+  cursor: pointer;
+  display: inline-block;
+  font-family: var(--font-condensedbook);
+  font-size: $button-font-size;
+  font-weight: var(--font-weight-300);
+  letter-spacing: var(--font-letterspacing-2);
+  line-height: var(--font-lineheight-4);
+  max-width:18.125rem;
+  padding: var(--size-2) var(--size-4);
+  text-align: center;
+  text-decoration: none;
+  text-shadow:$button-text-shadow;
+  text-transform:uppercase;
+  transition: background 200ms ease-in;
+  vertical-align: top;
+  white-space: normal;
+  width:100%;
+  &:visited {
+    color: $color-text;
+  }
+
+  &:hover,
+  &:focus {
+    background-color: $color-background-hover;
+    background-image:$button-background-image;
+    border: 0;
+    box-shadow: none !important;
+    color: $color-text-hover;
+    outline: none !important;
+    text-decoration: none;
+
+  }
+
+  &:active {
+    background-color: $color-background-active;
+    background-image:$button-background-image;
+    color: $color-text-active;
+    outline: none !important;
+  }
+
+  &[disabled] {
+    background-color: $color-background-disabled;
+    background-image:$button-background-image;
+    color: $color-text-disabled;
+    cursor: default;
+    pointer-events: none;
+  }
+}
+
+
+@mixin button-reset(
+  $color-background: inherit,
+  $color-text: inherit,
+  $color-background-hover: inherit,
+  $color-text-hover: inherit,
+  $color-background-active: inherit,
+  $color-text-active: inherit,
+  $color-background-disabled: inherit,
+  $color-text-disabled: inherit,
+  $border-radius: inherit,
+  $font-size: inherit
+) {
+  background-color: $color-background;
+  background-image:$button-background-image;
+  border: 0;
+  border-radius: $border-radius;
+  box-shadow:none;
+  color: $color-text;
+  cursor: pointer;
+  display: inherit;
+  font-family: inherit;
+  font-size:  $font-size;
+  font-weight: inherit;
+  letter-spacing: inherit;
+  line-height: inherit;
+  max-width: inherit;
+  padding: inherit;
+  text-align: inherit;
+  text-decoration: inherit;
+  text-shadow:inherit;
+  text-transform:inherit;
+  transition: inherit;
+  vertical-align: inherit;
+  white-space: inherit;
+  width: inherit;
+  &:visited {
+    color: $color-text;
+  }
+
+  &:hover,
+  &:focus {
+    background-color: $color-background-hover;
+    background-image:$button-background-image;
+    border: 0;
+    box-shadow: none !important;
+    color: $color-text-hover;
+    outline: none !important;
+    text-decoration: none;
+
+  }
+
+  &:active {
+    background-color: $color-background-active;
+    background-image:$button-background-image;
+    color: $color-text-active;
+    outline: none !important;
+  }
+
+  &[disabled] {
+    background-color: $color-background-disabled;
+    background-image:$button-background-image;
+    color: $color-text-disabled;
+    cursor: default;
+    pointer-events: none;
+  }
+}

src/patterns/01-core/mixins/_index.scss

 @forward 'accessiblity';
+@forward 'button';
 @forward 'clearfix';
 @forward 'headings';
 @forward 'image-replace';

src/patterns/01-core/props/_colors.scss

@@ -225,5 +225,5 @@
 .pl-colors .color-demo > div > div{
   background-color: rgba(0,0,0,0.6);
   font-family: var(--font-systembold);
-  font-size: var(--font-size-00);
+  font-size: var(--font-size-000);
 }

src/patterns/04-components/_index.scss

 @forward 'blockquote/blockquote';
+@forward 'button/button';
 @forward 'card/card';
 @forward 'tag-list/tag-list';
 @forward 'tag/tag';

src/patterns/04-components/button/_button.scss

+// @file
+// Styles for Button.
+
+@use '../../01-core' as *;
+
+.button,
+ button{
+  @include button();
+}
+
+// Drupal outputs this class on buttons that can delete content.
+.button--danger {
+  background-color: var(--red-9);
+  color: var(--uw-white);
+
+  &:hover,
+  &:focus {
+    background-color: var(--cgc-3);
+    color: var(--uw-white);
+
+  }
+
+  &:active {
+    background-color: var(--cgc-4);
+    color: var(--uw-white);
+  }
+}
+
+// This custom button class, included as an example, is not output by Drupal by default.
+.button--medium {
+  font-size: var(--font-size-000);
+  max-width: var(--size-20);
+  padding: var(--size-1);
+  &:hover,
+  &:focus {
+    padding: var(--size-1);
+  }
+}
+
+// This custom button class, included as an example, is not output by Drupal by default.
+.button--small {
+  font-size: var(--font-size-0000);
+  max-width: var(--size-12);
+  padding: var(--size-05);
+  &:hover,
+  &:focus {
+    padding: var(--size-05);
+  }
+}
+
+// Drupal outputs this class on buttons that can delete content.
+.button--primary {
+  background-color: var(--green-8);
+  color: var(--uw-white);
+  &:hover,
+  &:focus {
+    background-color: var(--green-9);
+    color: var(--uw-white);
+  }
+}
+
+// Drupal outputs this class on buttons that can delete content.
+.button--secondary {
+  background-color: var(--blue-5);
+  color: var(--uw-white);
+  &:hover,
+  &:focus {
+    background-color:  var(--blue-9);
+    color: var(--uw-white);
+  }
+}
+
+// Drupal outputs this class on buttons that can delete content.
+.button--cancel,
+.button[data-drupal-selector="edit-cancel"]{
+  background-color: var(--orange-5);
+  color: var(--uw-white);
+  &:hover,
+  &:focus {
+    background-color: var(--orange-8);
+    color: var(--uw-white);
+  }
+}
+// Css within pattern lab.
+.pattern-lab-content .mobile-menu-button,
+.pl-c-pattern__extra-toggle{
+  max-width:inherit;
+  width:auto;
+
+}
+.pl-c-pattern .pl-c-demo button,
+.pl-c-pattern .pl-c-demo .button{
+  margin: 0 0 var(--size-1);
+}

src/patterns/04-components/button/button--cancel/button--cancel.md

+---
+el: .button--cancel
+title: Cancel Button
+---
+
+__Variables:__
+* is_button_tag: [boolean] Whether to output as a button element.
+* is_demo: [boolean] Whether to show extra demo examples.
+* is_disabled: [boolean] Whether this button is disabled. Not used for links.
+* modifier_classes: [string] Classes to modify the default component styling.
+* url: [string] URL of the button.
+* text: [string] Text of the button.

src/patterns/04-components/button/button--cancel/button--cancel.twig

+{% set button_modifier_classes -%}
+  button--cancel {{ modifier_classes }}
+{%- endset %}
+
+{% include '@components/button/button.twig' with {
+  'url': url,
+  'text': text,
+  'modifier_classes': button_modifier_classes,
+} %}

src/patterns/04-components/button/button--cancel/button--cancel.yml

+---
+is_button_tag: true
+is_demo: true
+url: '#'
+text: 'Cancel'
+text_demo: 'Cancel (Link)'

src/patterns/04-components/button/button--danger/button--danger.md

+---
+el: .button--danger
+title: Danger Button
+---
+
+__Variables:__
+* is_button_tag: [boolean] Whether to output as a button element.
+* is_demo: [boolean] Whether to show extra demo examples.
+* is_disabled: [boolean] Whether this button is disabled. Not used for links.
+* modifier_classes: [string] Classes to modify the default component styling.
+* url: [string] URL of the button.
+* text: [string] Text of the button.

src/patterns/04-components/button/button--danger/button--danger.twig

+{% set button_modifier_classes -%}
+  button--danger {{ modifier_classes }}
+{%- endset %}
+
+{% include '@components/button/button.twig' with {
+  'url': url,
+  'text': text,
+  'modifier_classes': button_modifier_classes,
+} %}

src/patterns/04-components/button/button--danger/button--danger.yml

+---
+is_button_tag: true
+is_demo: true
+url: '#'
+text: 'Delete'
+text_demo: 'Delete (Link)'

src/patterns/04-components/button/button--large/button--large.md

+---
+el: .button--large
+title: Large Button
+---
+
+__Variables:__
+* is_button_tag: [boolean] Whether to output as a button element.
+* is_demo: [boolean] Whether to show extra demo examples.
+* is_disabled: [boolean] Whether this button is disabled. Not used for links.
+* modifier_classes: [string] Classes to modify the default component styling.
+* url: [string] URL of the button.
+* text: [string] Text of the button.

src/patterns/04-components/button/button--large/button--large.twig

+{% set button_modifier_classes -%}
+  button--large {{ modifier_classes }}
+{%- endset %}
+
+{% include '@components/button/button.twig' with {
+  'url': url,
+  'text': text,
+  'modifier_classes': button_modifier_classes,
+} %}

src/patterns/04-components/button/button--large/button--large.yml

+---
+is_button_tag: true
+is_demo: true
+url: '#'
+text: 'Submit'
+text_demo: 'Link'

src/patterns/04-components/button/button--medium/button--medium.md

+---
+el: .button--medium
+title: Medium Button
+---
+
+__Variables:__
+* is_button_tag: [boolean] Whether to output as a button element.
+* is_demo: [boolean] Whether to show extra demo examples.
+* is_disabled: [boolean] Whether this button is disabled. Not used for links.
+* modifier_classes: [string] Classes to modify the default component styling.
+* url: [string] URL of the button.
+* text: [string] Text of the button.

src/patterns/04-components/button/button--medium/button--medium.twig

+{% set button_modifier_classes -%}
+  button--medium {{ modifier_classes }}
+{%- endset %}
+
+{% include '@components/button/button.twig' with {
+  'url': url,
+  'text': text,
+  'modifier_classes': button_modifier_classes,
+} %}

src/patterns/04-components/button/button--medium/button--medium.yml

+---
+is_button_tag: true
+is_demo: true
+url: '#'
+text: 'Button'
+text_demo: 'Link Button'

src/patterns/04-components/button/button--primary/button--primary.md

+---
+el: .button--primary
+title: Primary Button (save)
+---
+
+__Variables:__
+* is_button_tag: [boolean] Whether to output as a button element.
+* is_demo: [boolean] Whether to show extra demo examples.
+* is_disabled: [boolean] Whether this button is disabled. Not used for links.
+* modifier_classes: [string] Classes to modify the default component styling.
+* url: [string] URL of the button.
+* text: [string] Text of the button.

src/patterns/04-components/button/button--primary/button--primary.twig

+{% set button_modifier_classes -%}
+    button--primary  {{ modifier_classes }}
+{%- endset %}
+
+{% include '@components/button/button.twig' with {
+    'url': url,
+    'text': text,
+    'modifier_classes': button_modifier_classes,
+} %}