From d4ce68c1d20f4a243f698ac7e8432d83a3e87265 Mon Sep 17 00:00:00 2001
From: Martin Leblanc <m26lebla@uwaterloo.ca>
Date: Mon, 13 Jun 2022 13:59:55 -0400
Subject: [PATCH] ISTWCMS-5596: addition of the button element, component,
mixin
---
src/patterns/01-core/elements/_details.scss | 2 +-
src/patterns/01-core/mixins/_button.scss | 150 ++++++++++++++++++
src/patterns/01-core/mixins/_index.scss | 1 +
src/patterns/01-core/props/_colors.scss | 2 +-
src/patterns/04-components/_index.scss | 1 +
.../04-components/button/_button.scss | 94 +++++++++++
.../button/button--cancel/button--cancel.md | 12 ++
.../button/button--cancel/button--cancel.twig | 9 ++
.../button/button--cancel/button--cancel.yml | 6 +
.../button/button--danger/button--danger.md | 12 ++
.../button/button--danger/button--danger.twig | 9 ++
.../button/button--danger/button--danger.yml | 6 +
.../button/button--large/button--large.md | 12 ++
.../button/button--large/button--large.twig | 9 ++
.../button/button--large/button--large.yml | 6 +
.../button/button--medium/button--medium.md | 12 ++
.../button/button--medium/button--medium.twig | 9 ++
.../button/button--medium/button--medium.yml | 6 +
.../button/button--primary/button--primary.md | 12 ++
.../button--primary/button--primary.twig | 9 ++
.../button--primary/button--primary.yml | 6 +
.../button--secondary/button--secondary.md | 12 ++
.../button--secondary/button--secondary.twig | 9 ++
.../button--secondary/button--secondary.yml | 6 +
.../button/button--small/button--small.md | 12 ++
.../button/button--small/button--small.twig | 9 ++
.../button/button--small/button--small.yml | 6 +
src/patterns/04-components/button/button.md | 12 ++
src/patterns/04-components/button/button.twig | 83 ++++++++++
src/patterns/04-components/button/button.yml | 19 +++
src/patterns/04-components/button/buttons.js | 66 ++++++++
31 files changed, 617 insertions(+), 2 deletions(-)
create mode 100644 src/patterns/01-core/mixins/_button.scss
create mode 100644 src/patterns/04-components/button/_button.scss
create mode 100644 src/patterns/04-components/button/button--cancel/button--cancel.md
create mode 100644 src/patterns/04-components/button/button--cancel/button--cancel.twig
create mode 100644 src/patterns/04-components/button/button--cancel/button--cancel.yml
create mode 100644 src/patterns/04-components/button/button--danger/button--danger.md
create mode 100644 src/patterns/04-components/button/button--danger/button--danger.twig
create mode 100644 src/patterns/04-components/button/button--danger/button--danger.yml
create mode 100644 src/patterns/04-components/button/button--large/button--large.md
create mode 100644 src/patterns/04-components/button/button--large/button--large.twig
create mode 100644 src/patterns/04-components/button/button--large/button--large.yml
create mode 100644 src/patterns/04-components/button/button--medium/button--medium.md
create mode 100644 src/patterns/04-components/button/button--medium/button--medium.twig
create mode 100644 src/patterns/04-components/button/button--medium/button--medium.yml
create mode 100644 src/patterns/04-components/button/button--primary/button--primary.md
create mode 100644 src/patterns/04-components/button/button--primary/button--primary.twig
create mode 100644 src/patterns/04-components/button/button--primary/button--primary.yml
create mode 100644 src/patterns/04-components/button/button--secondary/button--secondary.md
create mode 100644 src/patterns/04-components/button/button--secondary/button--secondary.twig
create mode 100644 src/patterns/04-components/button/button--secondary/button--secondary.yml
create mode 100644 src/patterns/04-components/button/button--small/button--small.md
create mode 100644 src/patterns/04-components/button/button--small/button--small.twig
create mode 100644 src/patterns/04-components/button/button--small/button--small.yml
create mode 100644 src/patterns/04-components/button/button.md
create mode 100644 src/patterns/04-components/button/button.twig
create mode 100644 src/patterns/04-components/button/button.yml
create mode 100644 src/patterns/04-components/button/buttons.js
diff --git a/src/patterns/01-core/elements/_details.scss b/src/patterns/01-core/elements/_details.scss
index 6dffe9cc..de2c96a4 100644
--- a/src/patterns/01-core/elements/_details.scss
+++ b/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;
diff --git a/src/patterns/01-core/mixins/_button.scss b/src/patterns/01-core/mixins/_button.scss
new file mode 100644
index 00000000..d96739d4
--- /dev/null
+++ b/src/patterns/01-core/mixins/_button.scss
@@ -0,0 +1,150 @@
+// @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;
+ }
+}
diff --git a/src/patterns/01-core/mixins/_index.scss b/src/patterns/01-core/mixins/_index.scss
index 37364151..12cb9174 100644
--- a/src/patterns/01-core/mixins/_index.scss
+++ b/src/patterns/01-core/mixins/_index.scss
@@ -1,4 +1,5 @@
@forward 'accessiblity';
+@forward 'button';
@forward 'clearfix';
@forward 'headings';
@forward 'image-replace';
diff --git a/src/patterns/01-core/props/_colors.scss b/src/patterns/01-core/props/_colors.scss
index a7ce2463..868ad676 100644
--- a/src/patterns/01-core/props/_colors.scss
+++ b/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);
}
diff --git a/src/patterns/04-components/_index.scss b/src/patterns/04-components/_index.scss
index c46ebe15..cff6fade 100644
--- a/src/patterns/04-components/_index.scss
+++ b/src/patterns/04-components/_index.scss
@@ -1,4 +1,5 @@
@forward 'blockquote/blockquote';
+@forward 'button/button';
@forward 'card/card';
@forward 'tag-list/tag-list';
@forward 'tag/tag';
diff --git a/src/patterns/04-components/button/_button.scss b/src/patterns/04-components/button/_button.scss
new file mode 100644
index 00000000..e6e05c19
--- /dev/null
+++ b/src/patterns/04-components/button/_button.scss
@@ -0,0 +1,94 @@
+// @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);
+}
diff --git a/src/patterns/04-components/button/button--cancel/button--cancel.md b/src/patterns/04-components/button/button--cancel/button--cancel.md
new file mode 100644
index 00000000..f547601f
--- /dev/null
+++ b/src/patterns/04-components/button/button--cancel/button--cancel.md
@@ -0,0 +1,12 @@
+---
+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.
diff --git a/src/patterns/04-components/button/button--cancel/button--cancel.twig b/src/patterns/04-components/button/button--cancel/button--cancel.twig
new file mode 100644
index 00000000..4b1078a7
--- /dev/null
+++ b/src/patterns/04-components/button/button--cancel/button--cancel.twig
@@ -0,0 +1,9 @@
+{% set button_modifier_classes -%}
+ button--cancel {{ modifier_classes }}
+{%- endset %}
+
+{% include '@components/button/button.twig' with {
+ 'url': url,
+ 'text': text,
+ 'modifier_classes': button_modifier_classes,
+} %}
diff --git a/src/patterns/04-components/button/button--cancel/button--cancel.yml b/src/patterns/04-components/button/button--cancel/button--cancel.yml
new file mode 100644
index 00000000..cffef5d9
--- /dev/null
+++ b/src/patterns/04-components/button/button--cancel/button--cancel.yml
@@ -0,0 +1,6 @@
+---
+is_button_tag: true
+is_demo: true
+url: '#'
+text: 'Cancel'
+text_demo: 'Cancel (Link)'
diff --git a/src/patterns/04-components/button/button--danger/button--danger.md b/src/patterns/04-components/button/button--danger/button--danger.md
new file mode 100644
index 00000000..90d99731
--- /dev/null
+++ b/src/patterns/04-components/button/button--danger/button--danger.md
@@ -0,0 +1,12 @@
+---
+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.
diff --git a/src/patterns/04-components/button/button--danger/button--danger.twig b/src/patterns/04-components/button/button--danger/button--danger.twig
new file mode 100644
index 00000000..f0c8362a
--- /dev/null
+++ b/src/patterns/04-components/button/button--danger/button--danger.twig
@@ -0,0 +1,9 @@
+{% set button_modifier_classes -%}
+ button--danger {{ modifier_classes }}
+{%- endset %}
+
+{% include '@components/button/button.twig' with {
+ 'url': url,
+ 'text': text,
+ 'modifier_classes': button_modifier_classes,
+} %}
diff --git a/src/patterns/04-components/button/button--danger/button--danger.yml b/src/patterns/04-components/button/button--danger/button--danger.yml
new file mode 100644
index 00000000..51477bd3
--- /dev/null
+++ b/src/patterns/04-components/button/button--danger/button--danger.yml
@@ -0,0 +1,6 @@
+---
+is_button_tag: true
+is_demo: true
+url: '#'
+text: 'Delete'
+text_demo: 'Delete (Link)'
diff --git a/src/patterns/04-components/button/button--large/button--large.md b/src/patterns/04-components/button/button--large/button--large.md
new file mode 100644
index 00000000..22fe954d
--- /dev/null
+++ b/src/patterns/04-components/button/button--large/button--large.md
@@ -0,0 +1,12 @@
+---
+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.
diff --git a/src/patterns/04-components/button/button--large/button--large.twig b/src/patterns/04-components/button/button--large/button--large.twig
new file mode 100644
index 00000000..9d395daa
--- /dev/null
+++ b/src/patterns/04-components/button/button--large/button--large.twig
@@ -0,0 +1,9 @@
+{% set button_modifier_classes -%}
+ button--large {{ modifier_classes }}
+{%- endset %}
+
+{% include '@components/button/button.twig' with {
+ 'url': url,
+ 'text': text,
+ 'modifier_classes': button_modifier_classes,
+} %}
diff --git a/src/patterns/04-components/button/button--large/button--large.yml b/src/patterns/04-components/button/button--large/button--large.yml
new file mode 100644
index 00000000..7c8ac2d6
--- /dev/null
+++ b/src/patterns/04-components/button/button--large/button--large.yml
@@ -0,0 +1,6 @@
+---
+is_button_tag: true
+is_demo: true
+url: '#'
+text: 'Submit'
+text_demo: 'Link'
diff --git a/src/patterns/04-components/button/button--medium/button--medium.md b/src/patterns/04-components/button/button--medium/button--medium.md
new file mode 100644
index 00000000..6123ac5a
--- /dev/null
+++ b/src/patterns/04-components/button/button--medium/button--medium.md
@@ -0,0 +1,12 @@
+---
+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.
diff --git a/src/patterns/04-components/button/button--medium/button--medium.twig b/src/patterns/04-components/button/button--medium/button--medium.twig
new file mode 100644
index 00000000..8a3419da
--- /dev/null
+++ b/src/patterns/04-components/button/button--medium/button--medium.twig
@@ -0,0 +1,9 @@
+{% set button_modifier_classes -%}
+ button--medium {{ modifier_classes }}
+{%- endset %}
+
+{% include '@components/button/button.twig' with {
+ 'url': url,
+ 'text': text,
+ 'modifier_classes': button_modifier_classes,
+} %}
diff --git a/src/patterns/04-components/button/button--medium/button--medium.yml b/src/patterns/04-components/button/button--medium/button--medium.yml
new file mode 100644
index 00000000..7e1cb4ff
--- /dev/null
+++ b/src/patterns/04-components/button/button--medium/button--medium.yml
@@ -0,0 +1,6 @@
+---
+is_button_tag: true
+is_demo: true
+url: '#'
+text: 'Button'
+text_demo: 'Link Button'
diff --git a/src/patterns/04-components/button/button--primary/button--primary.md b/src/patterns/04-components/button/button--primary/button--primary.md
new file mode 100644
index 00000000..2b4fc2b7
--- /dev/null
+++ b/src/patterns/04-components/button/button--primary/button--primary.md
@@ -0,0 +1,12 @@
+---
+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.
diff --git a/src/patterns/04-components/button/button--primary/button--primary.twig b/src/patterns/04-components/button/button--primary/button--primary.twig
new file mode 100644
index 00000000..cf637b5f
--- /dev/null
+++ b/src/patterns/04-components/button/button--primary/button--primary.twig
@@ -0,0 +1,9 @@
+{% set button_modifier_classes -%}
+ button--primary {{ modifier_classes }}
+{%- endset %}
+
+{% include '@components/button/button.twig' with {
+ 'url': url,
+ 'text': text,
+ 'modifier_classes': button_modifier_classes,
+} %}
diff --git a/src/patterns/04-components/button/button--primary/button--primary.yml b/src/patterns/04-components/button/button--primary/button--primary.yml
new file mode 100644
index 00000000..fb053e63
--- /dev/null
+++ b/src/patterns/04-components/button/button--primary/button--primary.yml
@@ -0,0 +1,6 @@
+---
+is_button_tag: true
+is_demo: true
+url: '#'
+text: 'Save'
+text_demo: 'Save Button'
diff --git a/src/patterns/04-components/button/button--secondary/button--secondary.md b/src/patterns/04-components/button/button--secondary/button--secondary.md
new file mode 100644
index 00000000..a423e1d6
--- /dev/null
+++ b/src/patterns/04-components/button/button--secondary/button--secondary.md
@@ -0,0 +1,12 @@
+---
+el: .button--secondary
+title: Secondary 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.
diff --git a/src/patterns/04-components/button/button--secondary/button--secondary.twig b/src/patterns/04-components/button/button--secondary/button--secondary.twig
new file mode 100644
index 00000000..83e71107
--- /dev/null
+++ b/src/patterns/04-components/button/button--secondary/button--secondary.twig
@@ -0,0 +1,9 @@
+{% set button_modifier_classes -%}
+ button--secondary {{ modifier_classes }}
+{%- endset %}
+
+{% include '@components/button/button.twig' with {
+ 'url': url,
+ 'text': text,
+ 'modifier_classes': button_modifier_classes,
+} %}
\ No newline at end of file
diff --git a/src/patterns/04-components/button/button--secondary/button--secondary.yml b/src/patterns/04-components/button/button--secondary/button--secondary.yml
new file mode 100644
index 00000000..cebf6161
--- /dev/null
+++ b/src/patterns/04-components/button/button--secondary/button--secondary.yml
@@ -0,0 +1,6 @@
+---
+is_button_tag: true
+is_demo: true
+url: '#'
+text: 'Revert'
+text_demo: 'Revert Button'
diff --git a/src/patterns/04-components/button/button--small/button--small.md b/src/patterns/04-components/button/button--small/button--small.md
new file mode 100644
index 00000000..860993d4
--- /dev/null
+++ b/src/patterns/04-components/button/button--small/button--small.md
@@ -0,0 +1,12 @@
+---
+el: .button--small
+title: Small 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.
diff --git a/src/patterns/04-components/button/button--small/button--small.twig b/src/patterns/04-components/button/button--small/button--small.twig
new file mode 100644
index 00000000..bb01b13d
--- /dev/null
+++ b/src/patterns/04-components/button/button--small/button--small.twig
@@ -0,0 +1,9 @@
+{% set button_modifier_classes -%}
+ button--small {{ modifier_classes }}
+{%- endset %}
+
+{% include '@components/button/button.twig' with {
+ 'url': url,
+ 'text': text,
+ 'modifier_classes': button_modifier_classes,
+} %}
diff --git a/src/patterns/04-components/button/button--small/button--small.yml b/src/patterns/04-components/button/button--small/button--small.yml
new file mode 100644
index 00000000..7e1cb4ff
--- /dev/null
+++ b/src/patterns/04-components/button/button--small/button--small.yml
@@ -0,0 +1,6 @@
+---
+is_button_tag: true
+is_demo: true
+url: '#'
+text: 'Button'
+text_demo: 'Link Button'
diff --git a/src/patterns/04-components/button/button.md b/src/patterns/04-components/button/button.md
new file mode 100644
index 00000000..43ac105e
--- /dev/null
+++ b/src/patterns/04-components/button/button.md
@@ -0,0 +1,12 @@
+---
+el: .button
+title: 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.
diff --git a/src/patterns/04-components/button/button.twig b/src/patterns/04-components/button/button.twig
new file mode 100644
index 00000000..8f0149a9
--- /dev/null
+++ b/src/patterns/04-components/button/button.twig
@@ -0,0 +1,83 @@
+{% if is_demo %}
+ <div class="pl-c-demo">
+{% endif %}
+{% if is_button_tag %}
+ <button
+ {% if data_type_name %}
+ data-value-{{ data_type_name }}="{{ data_type_value }}"
+ {% endif %}
+
+ {% if is_disabled %}
+ disabled
+ {% endif %}
+
+ {% if type %}
+ type="{{ type }}"
+ {% endif %}
+
+ {% if autofocus %}
+ autofocus="{{ autofocus }}"
+ {% endif %}
+
+ {% if formaction %}
+ formaction=" {{ formaction }}"
+ {% endif %}
+
+ {% if form %}
+ form="{{form}}"
+ {% endif %}
+
+ {% if formenctype %}
+ formenctype="{{ formenctype }}"
+ {% endif %}
+
+ {% if formmethod %}
+ formmethod=" {{ formmethod }}"
+ {% endif %}
+
+ {% if formtarget %}
+ formtarget=" {{ formtarget }}"
+ {% endif %}
+
+ {% if name %}
+ name="{{ name }}"
+ {% endif %}
+
+ {% if formenctype %}
+ formenctype="{{ formenctype }}"
+ {% endif %}
+
+ {% if value %}
+ value="{{ value }}"
+ {% endif %}
+
+ {% if formnovalidate %}
+ formnovalidate
+ {% endif %}
+
+ {% if btnclick %}
+ onclick="{{ btnclick }}"
+ {% endif %}
+
+ class="button {{ modifier_classes }}"
+ >
+ {{ text }}
+ </button>
+{% else %}
+ <a {% if aria %} aria-{{ aria_type_name }}="{{ aria_type_value}}" {% endif %} {% if data_type_name %} data-{{ data_type_name }}="{{ data_type_value }}"{% endif %} {% if btn_id %} id="{{ btn_id }}" {% endif %} class="button {{ modifier_classes }}" href="{{ url }}" {% if btnclick %} onclick="{{ btnclick }}" {% endif %} {% if target %}target="{{ target }}" {% endif %}>
+ {{ text }}
+ </a>
+{% endif %}
+
+{% if is_demo %}
+ <br>
+
+ <a href="{{ url }}" class="button {{ modifier_classes }}">{{ text_demo }}</a>
+ <br>
+
+ <button class="button {{ modifier_classes }}" disabled>Disabled {{ text }}</button>
+{% endif %}
+
+{% if is_demo %}
+ </div>
+{% endif %}
diff --git a/src/patterns/04-components/button/button.yml b/src/patterns/04-components/button/button.yml
new file mode 100644
index 00000000..5a1d8353
--- /dev/null
+++ b/src/patterns/04-components/button/button.yml
@@ -0,0 +1,19 @@
+---
+is_button_tag: true
+is_demo: true
+is_disabled: false
+autofocus: false
+formaction: 'form_action'
+form: 'form_id'
+formmethod: ''
+formtarget: 'form_target'
+name: ''
+formenctype: ''
+value: ''
+url: '#'
+text: 'Button'
+text_demo: 'Link Button'
+type: ''
+modifier_classes: ''
+btnclick : |
+ alert('Hello World!');
diff --git a/src/patterns/04-components/button/buttons.js b/src/patterns/04-components/button/buttons.js
new file mode 100644
index 00000000..0172b28a
--- /dev/null
+++ b/src/patterns/04-components/button/buttons.js
@@ -0,0 +1,66 @@
+/**
+* @file
+* Javascript for buttons
+
+**/
+
+(function ($, Drupal) {
+ 'use strict';
+ Drupal.behaviors.buttons = {
+ attach: function (context, settings) {
+ // Only show the show/hide button if the user is logged in
+ //on the "view", "layout", or "latest version" tabs.
+ // (We have picked elements that should only exist on those pages,
+ // and only when the user has editing access.
+ //
+ $(document).ready(
+ function () {
+ /**
+ * Javascript for toggleTabs
+ * Allows for buttons to be used.
+ * @var {Object}
+ * @var {Object}
+ * @var {Object}
+ * @returns {boolean} css for toggle.
+ */
+ function toggleTabs() {
+ var x = document.getElementById('block-tabs');
+ var y = document.getElementsByClassName('uw-content-moderation')[0];
+ var z = document.getElementById('edit-moderation-state-wrapper');
+
+ if (x.style.display === 'none') {
+ x.style.display = 'block';
+ }
+ else {
+ x.style.display = 'none';
+ }
+ if (y) {
+ if (y.style.display === 'none') {
+ y.style.display = 'block';
+ }
+ else {
+ y.style.display = 'none';
+ }
+ }
+ if (z) {
+ if (z.style.display === 'none') {
+ z.style.display = 'block';
+ }
+ else {
+ z.style.display = 'none';
+ }
+ }
+ }
+
+ if ($('.user-logged-in .uw-content-moderation, .user-logged-in #edit-moderation-state-wrapper, .user-logged-in #block-tabs a.is-active[href$=\'latest\']').length) {
+ $('.uw-show-hide').show().on(
+ 'click', function () {
+ toggleTabs();
+ }
+ );
+ }
+ }
+ );
+ }
+ };
+})(jQuery, Drupal);
--
GitLab