@nypl/design-system-react-components 0.23.4 → 0.25.1

package/src/components/Button/_Button.scss

@@ -1,55 +1,19 @@
+// Keeping `button-base` and `button--outline` for the
+// Accordion component until that component is updated.
 @mixin button-base {
-  @include space-inset-xs;
-
-  border-radius: 2px;
+  border-radius: 2px !important;
   cursor: pointer;
   display: flex;
   justify-content: center;
-  padding: var(--space-xs) var(--space-s);
+  padding: var(--space-xs) var(--space-s) !important;
   text-decoration: none;
-
-  .icon {
-    @include icon;
-
-    fill: currentColor;
-
-    &--icon-left {
-      margin-right: var(--space-xs);
-    }
-
-    &--icon-right {
-      margin-left: var(--space-xs);
-    }
-  }
-}
-
-@mixin button--filled {
-  @include button-base;
-
-  background-color: var(--ui-link-primary);
-  border: none;
-  color: var(--ui-white);
-
-  &:visited {
-    color: var(--ui-white);
-  }
-
-  &:hover {
-    background-color: var(--ui-link-secondary);
-  }
-
-  &:disabled {
-    background-color: var(--ui-gray-light);
-    color: var(--ui-gray-dark);
-    pointer-events: none;
-  }
 }
 
 @mixin button--outline {
   @include button-base;
 
   background-color: var(--ui-white);
-  border: 1px solid var(--ui-gray-light);
+  border: 1px solid var(--ui-gray-light-cool);
   color: inherit;
 
   &:visited {
@@ -57,61 +21,12 @@
   }
 
   &:hover {
-    background-color: var(--ui-gray-xxlight);
+    background-color: var(--ui-gray-xx-light-cool);
   }
 
   &:disabled {
-    background-color: var(--ui-gray-light);
+    background-color: var(--ui-gray-light-cool);
     color: var(--ui-gray-dark);
     pointer-events: none;
   }
 }
-
-@mixin button--link {
-  background-color: transparent;
-  color: var(--ui-link-primary);
-  text-decoration: underline;
-
-  &--no-underline {
-    text-decoration: none;
-  }
-
-  &:hover {
-    background-color: transparent;
-    color: var(--ui-link-secondary);
-  }
-
-  &:disabled {
-    background-color: transparent;
-    color: var(--ui-gray-dark);
-    pointer-events: none;
-  }
-}
-
-@mixin button--pill {
-  @include button-base;
-  @include button--outline;
-
-  border-radius: 20px;
-  padding: var(--space-xs) var(--space-m);
-}
-
-.button {
-  @include button--filled;
-
-  &--link {
-    @include button--link;
-  }
-
-  &--outline {
-    @include button--outline;
-  }
-
-  &--pill {
-    @include button--pill;
-  }
-
-  &--icon-only {
-    padding: var(--space-xs);
-  }
-}

package/src/components/Button/__snapshots__/Button.test.tsx.snap

@@ -2,11 +2,66 @@
 
 exports[`Button Snapshot Renders the UI snapshot correctly 1`] = `
 <button
-  className="button button button--undefined "
+  className="chakra-button button  css-0"
   id="button"
   onClick={[MockFunction]}
-  type="submit"
+  type="button"
 >
-  Submit
+  Primary
+</button>
+`;
+
+exports[`Button Snapshot Renders the UI snapshot correctly 2`] = `
+<button
+  className="chakra-button button  css-0"
+  id="button"
+  onClick={[MockFunction]}
+  type="button"
+>
+  Seconday
+</button>
+`;
+
+exports[`Button Snapshot Renders the UI snapshot correctly 3`] = `
+<button
+  className="chakra-button button  css-0"
+  id="button"
+  onClick={[MockFunction]}
+  type="button"
+>
+  Callout
+</button>
+`;
+
+exports[`Button Snapshot Renders the UI snapshot correctly 4`] = `
+<button
+  className="chakra-button button  css-0"
+  id="button"
+  onClick={[MockFunction]}
+  type="button"
+>
+  Pill
+</button>
+`;
+
+exports[`Button Snapshot Renders the UI snapshot correctly 5`] = `
+<button
+  className="chakra-button button  css-0"
+  id="button"
+  onClick={[MockFunction]}
+  type="button"
+>
+  Link
+</button>
+`;
+
+exports[`Button Snapshot Renders the UI snapshot correctly 6`] = `
+<button
+  className="chakra-button button  css-0"
+  id="button"
+  onClick={[MockFunction]}
+  type="button"
+>
+  SearchBar
 </button>
 `;