feat(buttons): remove solid-secondary button

projects/canopy-test-app/src/app/app.component.html

@@ -334,9 +334,6 @@
             <a href="#" lg-button variant="solid-primary">Solid primary button</a>
             <br />
 
-            <a href="#" lg-button variant="solid-secondary">Solid secondary button</a>
-            <br />
-
             <a href="#" lg-button variant="outline-primary">Outline primary button</a>
             <br />
 
@@ -348,7 +345,7 @@
             </button>
             <br />
 
-            <button lg-button variant="solid-secondary">
+            <button lg-button variant="solid-primary">
               Button with icon
               <lg-icon name="add"></lg-icon>
             </button>

projects/canopy/src/lib/button/button.component.scss

@@ -101,7 +101,7 @@
   }
 }
 
-$variants: 'solid-primary', 'solid-secondary', 'reverse-primary', 'reverse-secondary',
+$variants: 'solid-primary', 'reverse-primary', 'reverse-secondary',
   'outline-primary', 'outline-secondary', 'add-on' !default;
 
 @each $variant in $variants {

projects/canopy/src/lib/button/button.interface.ts

@@ -1,6 +1,5 @@
 export type ButtonVariant =
   | 'solid-primary'
-  | 'solid-secondary'
   | 'outline-primary'
   | 'outline-secondary'
   | 'reverse-primary'

projects/canopy/src/lib/button/button.notes.ts

@@ -56,7 +56,7 @@ The \`iconButton\` property is used to visually hide that text.
 
 | Name | Description | Type | Default | Required |
 |------|-------------|:----:|:-----:|:-----:|
-| \`\`variant\`\` | The variant of button: \`\`solid-primary\`\`, \`\`solid-secondary\`\`, \`\`outline-primary\`\`, \`\`outline-secondary\`\`, \`\`reverse-primary\`\`, \`\`reverse-secondary\`\`, \`\`add-on\`\`; | string | solid-primary | No |
+| \`\`variant\`\` | The variant of button: \`\`solid-primary\`\`, \`\`outline-primary\`\`, \`\`outline-secondary\`\`, \`\`reverse-primary\`\`, \`\`reverse-secondary\`\`, \`\`add-on\`\`; | string | solid-primary | No |
 | \`\`size\`\` | The size of the button | ButtonSize [\`\`sm\`\`, \`\`md\`\`] | \`\`md\`\` | No |
 | \`\`fullWidth\`\` | If the button has to span full width or not. For 'sm' and 'md' sized screens, the button will always be full width and this input has no affect | boolean | false | No |
 | \`\`disabled\`\` | Programmatically disable the button via this property | boolean | false | No |
@@ -85,7 +85,6 @@ In addition to \`\`lg-btn\`\`, one of the following is required to apply the spe
 |------|-------------|
 | \`\`lg-btn--add-on\`\` | Adds the add-on button styles for use inside an input field |
 | \`\`lg-btn--solid-primary\`\` | Adds the solid primary button style |
-| \`\`lg-btn--solid-secondary\`\` | Adds the solid secondary button style |
 | \`\`lg-btn--outline-primary\`\` | Adds the outline primary button style |
 | \`\`lg-btn--outline-secondary\`\` | Adds the outline secondary button style |
 | \`\`lg-btn--reverse-primary\`\` | Adds the reverse primary button style |

projects/canopy/src/lib/button/button.stories.ts

@@ -13,7 +13,6 @@ import { ButtonVariant, ButtonSize } from './button.interface';
 const buttonVariants = [
   'add-on',
   'solid-primary',
-  'solid-secondary',
   'outline-primary',
   'outline-secondary',
   'reverse-primary',
@@ -140,11 +139,6 @@ export const primaryButton = () =>
     variant: 'solid-primary',
   });
 
-export const secondaryButton = () =>
-  createBtnStory({
-    variant: 'solid-secondary',
-  });
-
 export const outlinePrimary = () =>
   createBtnStory({
     variant: 'outline-primary',

projects/canopy/src/lib/forms/input/input.stories.ts

@@ -30,7 +30,6 @@ interface KnobsConfig {
   label?: string;
   showLabel?: boolean;
   showButton?: boolean;
-  showSecondaryButton?: boolean;
   showTextPrefix?: boolean;
   showTextSuffix?: boolean;
   size?: number;
@@ -55,7 +54,6 @@ const createInputStory = (config: KnobsConfig) => ({
       [size]="size"
       [suffix]="suffix"
       [showButton]="showButton"
-      [showSecondaryButton]="showSecondaryButton"
       [showTextPrefix]="showTextPrefix"
       [showTextSuffix]="showTextSuffix"
     ></lg-reactive-form>
@@ -90,11 +88,6 @@ const createInputStory = (config: KnobsConfig) => ({
     iconButton: boolean('icon button', true, contentGroupId),
     showTextPrefix: boolean('show text prefix', config.showTextPrefix, contentGroupId),
     showTextSuffix: boolean('show text suffix', config.showTextSuffix, contentGroupId),
-    showSecondaryButton: boolean(
-      'show secondary button',
-      config.showSecondaryButton,
-      contentGroupId,
-    ),
     suffix: text('suffix', '%', contentGroupId),
     size: number('input size', 12, undefined, propsGroupId),
   },
@@ -115,7 +108,6 @@ const createInputStory = (config: KnobsConfig) => ({
           size="sm"
           [iconButton]="true"
           variant="add-on"
-          *ngIf="showSecondaryButton"
         >
           Close
           <lg-icon name="close"></lg-icon>
@@ -159,7 +151,6 @@ class ReactiveFormComponent {
   @Input() showLabel: boolean;
   @Input() prefix: string;
   @Input() showButton: boolean;
-  @Input() showSecondaryButton: boolean;
   @Input() showTextPrefix: boolean;
   @Input() showTextSuffix: boolean;
   @Input() size: number;
@@ -231,5 +222,4 @@ export const withTextPrefix = () =>
 export const withMultipleButtonSuffixes = () =>
   createInputStory({
     showButton: true,
-    showSecondaryButton: true,
   });

projects/canopy/src/lib/promo-card/promo-card.notes.ts

@@ -119,7 +119,7 @@ This example contains only one promo card. Repeat as necessary.
             fund care for you or a loved one.</p></div>
           <div class="lg-promo-card-footer">
             <button type="button"
-                    class="lg-margin__bottom--none lg-btn--solid-secondary lg-btn">
+                    class="lg-margin__bottom--none lg-btn--solid-primary lg-btn">
               <span
                 class="lg-btn__text"> Find out more </span>
             </button>

projects/canopy/src/lib/promo-card/promo-card.stories.ts

@@ -94,7 +94,7 @@ const createPromoCardListStory = (config: PromoCardListKnobsConfig) => ({
             lgMarginBottom="none"
             lg-button
             type="button"
-            [variant]="variants[i] === 'solid-white' ? 'solid-secondary' : 'reverse-secondary'">
+            [variant]="variants[i] === 'solid-white' ? 'solid-primary' : 'reverse-secondary'">
             {{ card.ctaText }}
           </button>
         </lg-promo-card-footer>

projects/canopy/src/styles/variables/components/button/_button-solid.scss

@@ -8,14 +8,4 @@
   --btn-solid-primary-hover-color: var(--color-white);
   --btn-solid-primary-hover-bg-color: var(--color-super-blue-dark);
   --btn-solid-primary-hover-border-color: var(--color-super-blue-dark);
-
-  --btn-solid-secondary-bg-color: var(--color-leafy-green);
-  --btn-solid-secondary-border-color: var(--color-leafy-green);
-  --btn-solid-secondary-color: var(--color-white);
-  --btn-solid-secondary-active-bg-color: var(--color-leafy-green-darkest);
-  --btn-solid-secondary-active-border-color: var(--color-leafy-green-darkest);
-  --btn-solid-secondary-active-color: var(--color-white);
-  --btn-solid-secondary-hover-bg-color: var(--color-leafy-green-dark);
-  --btn-solid-secondary-hover-border-color: var(--color-leafy-green-dark);
-  --btn-solid-secondary-hover-color: var(--color-white);
 }