Remove BsAlert component (CenterForOpenScience#1861)

## Purpose

Remove usage of the BsAlert from ember osf web.

## Summary of Changes

1. Remove handbook docs
2. Stop subclassing BsAlert and just call it Alert
3. Fix View Only Link Banner
4. Fix Maintenance Banner
5. Fix Status Banners
6. Fix TOS Consent Banner
7. Fix tests

app/settings/account/-components/request-deactivation/template.hbs

@@ -4,13 +4,14 @@
 >
     <panel.heading @title={{t 'settings.account.deactivation.title'}} />
     <panel.body data-analytics-scope='Deactivation panel'>
-        <BsAlert
+        <Alert
             @type='warning'
             @dismissible={{false}}
+            @visible={{true}}
         >
             <strong>{{t 'settings.account.deactivation.warning'}}</strong>
             {{t 'settings.account.deactivation.warningText'}}
-        </BsAlert>
+        </Alert>
         <p>
             {{t 'settings.account.deactivation.body' htmlSafe=true}}
         </p>

lib/osf-components/addon/components/alert/component.ts

@@ -0,0 +1,66 @@
+import Component from '@glimmer/component';
+import { tracked } from 'tracked-built-ins';
+import { action } from '@ember/object';
+import { not } from '@ember/object/computed';
+
+interface Args {
+    type: string;
+    onDismissed: () => void;
+    onDismiss: () => boolean;
+    dismissible: boolean;
+    visible: boolean;
+}
+export default class Alert extends Component<Args> {
+    // Note: Most of this was ripped from:
+    // https://github.com/ember-bootstrap/ember-bootstrap/blob/v4.6.3/addon/components/bs-alert.js
+    // and then simplified to remove fade transitions
+
+    // Args
+    onDismissed?: () => void;
+    onDismiss?: () => boolean;
+    type?: string;
+    dismissible = true;
+    @tracked visible = true;
+    @not('visible') hidden!: boolean;
+
+    constructor(owner: unknown, args: Args) {
+        super(owner, args);
+        this.type = args.type;
+        if (args.visible === false) {
+            this.visible = args.visible;
+        }
+        this.dismissible = args.dismissible;
+    }
+
+    get showAlert() {
+        return this.visible;
+    }
+
+    @action
+    dismiss() {
+        if (this.args.onDismiss?.() !== false) {
+            this.visible = false;
+        }
+    }
+
+    show() {
+        this.visible = true;
+    }
+
+    hide() {
+        if (this.hidden) {
+            return;
+        }
+        this.visible = false;
+        this.args.onDismissed?.();
+    }
+
+    @action
+    showOrHide() {
+        if (this.visible) {
+            this.show();
+        } else {
+            this.hide();
+        }
+    }
+}

lib/osf-components/addon/components/alert/styles.scss

@@ -0,0 +1,52 @@
+.alert {
+    margin-bottom: 0;
+    border-radius: 2px;
+    padding: 10px 15px;
+
+    p {
+        margin-bottom: 0;
+    }
+}
+
+.dismissable {
+    padding-right: 35px;
+}
+
+.info {
+    color: #31708f;
+    background-color: #d9edf7;
+    border-color: #bce8f1;
+}
+
+.warning {
+    color: #8a6d3b;
+    background-color: #fcf8e3;
+    border-color: #faebcc;
+}
+
+.danger {
+    color: #a94442;
+    background-color: #f2dede;
+    border-color: #ebccd1;
+}
+
+.success {
+    color: #3c763d;
+    background-color: #dff0d8;
+    border-color: #d6e9c6;
+}
+
+.close {
+    padding: 0;
+    cursor: pointer;
+    background: transparent;
+    border: 0;
+    appearance: none;
+    float: right;
+    font-size: 21px;
+    font-weight: bold;
+    line-height: 1;
+    color: #000;
+    text-shadow: 0 1px 0 #fff;
+    opacity: 0.2;
+}

lib/osf-components/addon/components/alert/template.hbs

@@ -0,0 +1,19 @@
+{{#if (and this.visible @visible)}}
+    <div
+        local-class='alert {{if @type @type}} {{if @dismissible 'dismissible'}}'
+        class='{{@class}}'
+        data-test-alert
+    >
+        {{#if this.dismissible}}
+            <button
+                type='button'
+                local-class='close'
+                aria-label={{t 'general.close'}}
+                {{on 'click' this.dismiss}}
+            >
+                <span aria-hidden='true'><FaIcon @icon='times' /></span>
+            </button>
+        {{/if}}
+        {{yield}}
+    </div>
+{{/if}}

lib/osf-components/addon/components/banners/view-only-link/template.hbs

@@ -1,4 +1,4 @@
-<BsAlert
+<Alert
     data-analytics-scope='View-only link banner'
     local-class='Alert'
     @visible={{this.shouldDisplay}}
@@ -17,4 +17,4 @@
             {{t 'banners.view_only.view_normally'}}
         </Button>
     </div>
-</BsAlert>
+</Alert>

lib/osf-components/addon/components/maintenance-banner/template.hbs

@@ -1,8 +1,9 @@
 {{#if this.maintenance}}
-    <BsAlert
+    <Alert
         data-analytics-scope='Maintenance banner'
         @type={{this.alertType}}
         @onDismiss={{action this.dismiss}}
+        @visible={{true}}
     >
         <strong>{{t 'maintenance.title'}}</strong>
         {{#if this.maintenance.message.length}}
@@ -11,5 +12,5 @@
             {{t 'maintenance.line1' start=this.start end=this.end utc=this.utc htmlSafe=true}}
             {{t 'maintenance.line2'}}
         {{/if}}
-    </BsAlert>
+    </Alert>
 {{/if}}

lib/osf-components/addon/components/status-banner/styles.scss

@@ -1,25 +1,18 @@
 .StatusBanner {
-    margin: 0;
-
-    .StatusBanner__jumbo {
-        padding: 0;
+    margin: 0; 
+}
 
-        :global(.close) {
-            top: 8px;
-            right: 14px;
-        }
-    }
+.StatusBanner__jumbo {
+    padding: 15px;
+    color: inherit;
+    background-color: $color-light;
 
-    :global(.alert) {
-        margin-bottom: 0;
+    p {
+        font-size: 21px;
+        font-weight: 200;
     }
 
-    :global(.jumbotron) {
-        padding: 10px 40px;
-        margin-bottom: 0;
-
-        a {
-            color: #2d6a9f;
-        }
+    a {
+        color: $color-link-dark;
     }
 }

lib/osf-components/addon/components/status-banner/template.hbs

@@ -1,11 +1,10 @@
 {{#each this.messages as |stat|}}
-    <BsAlert
+    <Alert
         @type={{stat.class}}
         @dismissible={{stat.dismiss}}
-        class={{if stat.jumbo (local-class 'StatusBanner__jumbo')}}
+        @visible={{true}}
+        @class={{if stat.jumbo (local-class 'StatusBanner__jumbo')}}
     >
-        <div class='{{if stat.jumbo 'jumbotron'}}'>
-            <p data-test-status-message={{stat.id}}>{{t stat.id extra=stat.extra htmlSafe=true}}</p>
-        </div>
-    </BsAlert>
+        <p data-test-status-message={{stat.id}}>{{t stat.id extra=stat.extra htmlSafe=true}}</p>
+    </Alert>
 {{/each}}

lib/osf-components/addon/components/tos-consent-banner/component.ts

@@ -67,6 +67,6 @@ export default class TosConsentBanner extends Component {
         this.analytics.click('button', 'ToS Consent Banner - dismiss');
         this.set('didValidate', false);
         this.currentUser.set('showTosConsentBanner', false);
-        return false;
+        return true;
     }
 }

lib/osf-components/addon/components/tos-consent-banner/template.hbs

@@ -5,7 +5,7 @@
     class='container'
     ...attributes
 >
-    <BsAlert
+    <Alert
         @type='default'
         @dismissible={{true}}
         @visible={{this.currentUser.showTosConsentBanner}}
@@ -42,5 +42,5 @@
             </Button>
             <p></p>
         </div>
-    </BsAlert>
+    </Alert>
 </div>

lib/osf-components/app/components/alert/component.js

@@ -0,0 +1 @@
+export { default } from 'osf-components/components/alert/component';

lib/osf-components/app/components/alert/template.js

@@ -0,0 +1 @@
+export { default } from 'osf-components/components/alert/template';

tests/integration/components/maintenance-banner/component-test.ts

@@ -33,6 +33,6 @@ module('Integration | Component | maintenance-banner', hooks => {
             },
         }));
         await render(hbs`{{maintenance-banner}}`);
-        assert.dom('.alert').includesText('longstringy');
+        assert.dom('[data-test-alert]').includesText('longstringy');
     });
 });