@cfpb/cfpb-design-system 4.2.3 → 4.3.0

package/src/elements/base/normalize.scss

@@ -0,0 +1,290 @@
+/*! normalize.css v2.1.3 | MIT License | git.io/normalize */
+
+/* ==========================================================================
+    Base
+    ========================================================================== */
+
+/**
+  * 1. Set default font family to sans-serif.
+  * 2. Prevent iOS text size adjust after orientation change, without disabling
+  *    user zoom.
+  */
+
+html {
+  font-family: sans-serif; /* 1 */
+  text-size-adjust: 100%; /* 2 */
+}
+
+/**
+ * Remove default margin.
+ */
+
+body {
+  margin: 0;
+}
+
+/* ==========================================================================
+     Links
+     ========================================================================== */
+
+/**
+ * Address `outline` inconsistency between Chrome and other browsers.
+ */
+
+a:focus {
+  outline: thin dotted;
+}
+
+/**
+ * Improve readability when focused and also mouse hovered in all browsers.
+ */
+
+a:active,
+a:hover {
+  outline: 0;
+}
+
+/* ==========================================================================
+     Typography
+     ========================================================================== */
+
+/**
+ * Address variable `h1` font-size and margin within `section` and `article`
+ * contexts in Firefox 4+, Safari 5, and Chrome.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/**
+ * Address differences between Firefox and other browsers.
+ */
+
+hr {
+  box-sizing: content-box;
+  height: 0;
+}
+
+/**
+ * Correct font family set oddly in Safari 5 and Chrome.
+ */
+
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, serif;
+  font-size: 1em;
+}
+
+/**
+ * Improve readability of pre-formatted text in all browsers.
+ */
+
+pre {
+  white-space: pre-wrap;
+}
+
+/**
+ * Set consistent quote types.
+ */
+
+q {
+  quotes: '\201C' '\201D' '\2018' '\2019';
+}
+
+/**
+ * Address inconsistent and variable font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` affecting `line-height` in all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sup {
+  top: -0.5em;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+/* ==========================================================================
+     Figures
+     ========================================================================== */
+
+/**
+ * Address margin not present in IE 8/9 and Safari 5.
+ */
+
+figure {
+  margin: 0;
+}
+
+/* ==========================================================================
+     Forms
+     ========================================================================== */
+
+/**
+ * Define consistent border, margin, and padding.
+ */
+
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+
+/**
+ * 1. Correct `color` not being inherited in IE 8/9.
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+ */
+
+legend {
+  border: 0; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * 1. Correct font family not being inherited in all browsers.
+ * 2. Correct font size not being inherited in all browsers.
+ * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
+ */
+
+button,
+input,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 2 */
+  margin: 0; /* 3 */
+}
+
+/**
+ * Address Firefox 4+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+
+button,
+input {
+  line-height: normal;
+}
+
+/**
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
+ * All other form control elements do not inherit `text-transform` values.
+ * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
+ * Correct `select` style inheritance in Firefox 4+ and Opera.
+ */
+
+button,
+select {
+  text-transform: none;
+}
+
+/**
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ *    and `video` controls.
+ * 2. Correct inability to style clickable `input` types in iOS.
+ * 3. Improve usability and consistency of cursor style between image-type
+ *    `input` and others.
+ */
+
+button,
+  html input[type="button"], /* 1 */
+  input[type="reset"],
+  input[type="submit"] {
+  /* TODO: stylelint wants to convert `appearance: button` to `appearance: auto`
+     Investigate why. */
+  /* stylelint-disable */
+  appearance: button; /* 2 */
+  /* stylelint-enable */
+  cursor: pointer; /* 3 */
+}
+
+/**
+ * Re-set default cursor for disabled elements.
+ */
+
+button[disabled],
+html input[disabled] {
+  cursor: default;
+}
+
+/**
+ * 1. Address box sizing set to `content-box` in IE 8/9/10.
+ * 2. Remove excess padding in IE 8/9/10.
+ */
+
+input[type='checkbox'],
+input[type='radio'] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
+ * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome.
+ */
+
+input[type='search'] {
+  appearance: textfield; /* 1 */
+  box-sizing: content-box; /* 2 */
+}
+
+/**
+ * Remove inner padding and search cancel button in Safari 5 and Chrome
+ * on OS X.
+ */
+
+input[type='search']::-webkit-search-cancel-button,
+input[type='search']::-webkit-search-decoration {
+  appearance: none;
+}
+
+/**
+ * Remove inner padding and border in Firefox 4+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+/**
+ * 1. Remove default vertical scrollbar in IE 8/9.
+ * 2. Improve readability and alignment in all browsers.
+ */
+
+textarea {
+  overflow: auto; /* 1 */
+  vertical-align: top; /* 2 */
+}
+
+/* ==========================================================================
+     Tables
+     ========================================================================== */
+
+/**
+ * Remove most spacing between table cells.
+ */
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}

package/src/elements/cfpb-button/cfpb-button-group.scss

@@ -0,0 +1,10 @@
+@use 'sass:math';
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
+
+.m-btn-group {
+  display: flex;
+  gap: math.div(15px, $base-font-size-px) + rem;
+  flex-wrap: wrap;
+  align-items: center;
+  width: fit-content;
+}

package/src/elements/cfpb-button/cfpb-button-link.scss

@@ -0,0 +1,96 @@
+@use 'sass:math';
+@use './vars' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
+
+//
+// Button link
+//
+
+/*
+Link text and underline.
+$v: Link link and visited color.
+$h: Link hover color.
+$f: Link focus color.
+$a: Link active color.
+*/
+@mixin u-btn-link-states($selector, $v, $h, $f, $a) {
+  #{$selector} {
+    &,
+    &:link,
+    &:visited {
+      text-decoration-color: $v;
+      background-color: transparent;
+      color: $v;
+    }
+
+    &:hover,
+    &.hover {
+      text-decoration-color: $h;
+      text-decoration-style: solid;
+      background-color: transparent;
+      color: $h;
+    }
+
+    &:focus,
+    &.focus {
+      background-color: transparent;
+      outline: 1px dotted $f;
+      color: $f;
+    }
+
+    &:active,
+    &.active {
+      text-decoration-color: $a;
+      text-decoration-style: solid;
+      background-color: transparent;
+      color: $a;
+    }
+  }
+}
+
+.a-btn--link {
+  // Padding added so the focus rectangle falls below the underline.
+  padding: 1.5px 0;
+  border-radius: 0;
+  text-decoration-line: underline;
+  text-decoration-thickness: 1px;
+  text-decoration-style: dotted;
+  text-underline-offset: 4.5px;
+
+  &:has(svg) {
+    // Button links should be closer to their icon.
+    gap: math.div(5px, $base-font-size-px) + rem;
+
+    // Button links shouldn't have a divider.
+    &::before {
+      display: none;
+    }
+  }
+}
+
+@include u-btn-link-states(
+  '.a-btn--link',
+  var(--link-text),
+  var(--link-text-hover),
+  var(--link-text),
+  var(--link-text-active)
+);
+
+//
+// Secondary button link
+//
+
+// The .a-btn--link.a-btn--secondary combo shouldn't be used,
+// so we provide no styles.
+
+//
+// Destructive action button link
+//
+
+@include u-btn-link-states(
+  '.a-btn--link.a-btn--warning',
+  var(--btn-warning-bg),
+  var(--btn-warning-bg-hover),
+  var(--btn-warning-bg),
+  var(--btn-warning-bg-active)
+);

package/src/elements/cfpb-button/cfpb-button.component.scss

@@ -1,7 +1,7 @@
-@use '@cfpb/cfpb-design-system/src/base' as *;
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
-@use '@cfpb/cfpb-design-system/src/components/cfpb-buttons/button' as *;
-@use '@cfpb/cfpb-design-system/src/components/cfpb-buttons/button-link' as *;
+@use '@cfpb/cfpb-design-system/src/elements/base' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/elements/cfpb-button/cfpb-button' as *;
+@use '@cfpb/cfpb-design-system/src/elements/cfpb-button/cfpb-button-link' as *;
 
 :host {
   // This prevents the child button from having an empty gap after the button.
@@ -13,10 +13,16 @@
   // Mobile only.
   @include respond-to-max($bp-xs-max) {
     width: 100%;
+
+    button,
+    [role='button'] {
+      width: 100%;
+    }
   }
 }
 
 :host([flush-left]) {
+  button,
   [role='button'] {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
@@ -24,6 +30,7 @@
 }
 
 :host([flush-right]) {
+  button,
   [role='button'] {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;

package/src/elements/cfpb-button/cfpb-button.scss

@@ -0,0 +1,222 @@
+@use 'sass:math';
+@use './vars' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
+
+//
+// Default button
+//
+
+button.a-btn::-moz-focus-inner,
+input.a-btn::-moz-focus-inner {
+  // Fixes inconsistent button.btn height in Firefox.
+  // Helps with inconsistent input.btn height in Firefox but not completely.
+  border: 0;
+}
+
+@mixin u-btn-divider() {
+  content: '';
+  border-left: 1px solid var(--btn-divider);
+  order: 2;
+  place-self: normal;
+}
+
+.a-btn {
+  line-height: math.div(19px, $base-font-size-px);
+  appearance: none;
+  display: flex;
+  gap: math.div(10px, $base-font-size-px) + rem;
+
+  box-sizing: border-box;
+  padding: math.div($btn-v-padding, $btn-font-size) + em
+    math.div($btn-h-padding, $btn-font-size) + em;
+  border: 0;
+  margin: 0;
+  border-radius: math.div($btn-border-radius-size, $btn-font-size) + em;
+  cursor: pointer;
+  font-size: math.div($btn-font-size, $base-font-size-px) + em;
+  font-weight: 500;
+  text-align: center;
+  text-decoration: none;
+  transition: background-color 0.1s;
+  width: fit-content;
+  height: fit-content;
+  justify-content: center;
+  align-items: center;
+
+  &,
+  &:link,
+  &:visited {
+    background-color: var(--btn-bg);
+    color: var(--btn-text);
+  }
+
+  &:hover,
+  &.hover,
+  &:focus,
+  &.focus {
+    background-color: var(--btn-bg-hover);
+    color: var(--btn-text);
+  }
+
+  &:focus,
+  &.focus {
+    outline: 1px dotted var(--btn-bg);
+
+    // The outline-offset property is not supported everywhere (e.g. IE)
+    // but it adds a nice touch in browsers where it is.
+    outline-offset: 1px;
+  }
+
+  &:active,
+  &.active {
+    background-color: var(--btn-bg-active);
+  }
+
+  //
+  // Secondary button
+  //
+
+  &--secondary {
+    &,
+    &:link,
+    &:visited {
+      background-color: var(--btn-secondary-bg);
+      color: var(--btn-secondary-text);
+      box-shadow: 0 0 0 1px var(--btn-secondary-border) inset;
+    }
+
+    &:hover,
+    &.hover,
+    &:focus,
+    &.focus {
+      background-color: var(--btn-secondary-bg-hover);
+      color: var(--btn-secondary-text-hover);
+      box-shadow: 0 0 0 1px var(--btn-secondary-border-hover) inset;
+    }
+
+    &:focus,
+    &.focus {
+      outline-color: var(--btn-secondary-border);
+    }
+
+    &:active,
+    &.active {
+      background-color: var(--btn-secondary-bg-active);
+      color: var(--btn-secondary-text-active);
+      box-shadow: 0 0 0 1px var(--btn-secondary-border-active) inset;
+    }
+  }
+
+  //
+  // Destructive action button
+  //
+
+  &--warning {
+    &,
+    &:link,
+    &:visited {
+      background-color: var(--btn-warning-bg);
+      color: var(--btn-warning-text);
+    }
+
+    &:hover,
+    &.hover,
+    &:focus,
+    &.focus {
+      background-color: var(--btn-warning-bg-hover);
+    }
+
+    &:focus,
+    &.focus {
+      outline-color: var(--btn-warning-bg);
+    }
+
+    &:active,
+    &.active {
+      background-color: var(--btn-warning-bg-active);
+    }
+  }
+
+  //
+  // Disabled button
+  //
+
+  &--disabled,
+  &[disabled],
+  &[aria-disabled='true'] {
+    &,
+    &:link,
+    &:visited,
+    &:hover,
+    &.hover,
+    &:focus,
+    &.focus,
+    &:active,
+    &.active {
+      background-color: var(--btn-disabled-bg);
+      color: var(--btn-disabled-text);
+      cursor: default; // Fallback for IE/Opera
+      cursor: not-allowed;
+    }
+
+    &:focus,
+    &.focus {
+      outline-color: var(--btn-disabled-outline);
+    }
+  }
+
+  //
+  // Full width button on x-small screens
+  //
+  &--full-on-xs {
+    // Mobile only.
+    @include respond-to-max($bp-xs-max) {
+      width: 100%;
+    }
+  }
+
+  // Set either the text or icon as the last item in the button.
+  &:has(svg + span) {
+    span {
+      order: 3;
+    }
+  }
+
+  &:has(span + svg) {
+    svg {
+      order: 3;
+
+      // Prevent icon from shrinking when button wraps.
+      flex: none;
+    }
+  }
+
+  // Handle button with icon divider logic.
+  &:not(.a-btn--hide-icon):has(svg + span)::before,
+  &:not(.a-btn--hide-icon):has(span + svg)::before {
+    @include u-btn-divider;
+  }
+
+  // Handle different coloring in divider.
+  &--secondary:has(svg)::before {
+    border-color: var(--btn-secondary-divider) !important;
+  }
+
+  &--warning:has(svg)::before {
+    border-color: var(--btn-warning-divider) !important;
+  }
+
+  &--disabled:has(svg)::before,
+  &[disabled]:has(svg)::before,
+  &[aria-disabled='true']:has(svg)::before {
+    border-color: var(--btn-disabled-divider) !important;
+  }
+
+  // Hide the icon if the a-btn--hide-icon modifier is set.
+  // Useful for showing and hiding a loading icon, for example.
+  &--hide-icon {
+    svg {
+      display: none;
+    }
+  }
+}