consentful 0.1.0.pre1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: e13b7d585e3bdd7280ee42ce354366d2263a0b9196b9b339458665d70d3e1f87
+  data.tar.gz: 772a2b8441e450d903dc5ca606894ff1d0cb8f9a1704304dda9fb20c945d0185
+SHA512:
+  metadata.gz: fd9ab07491ff571ee16a01d5fc5aa8690bce6947bebe9df090ef116239472dcc9d63c39d428642789bfcc298a4c6dc153e1c17722001a43761bcff3b6778b966
+  data.tar.gz: 55c54f81dd38c2036f561dcebc1699a43094deba9c20955a8c8555a5cffe0942ec520e4a583fd1f4c3247c650e4be1f312d19bfb30c870a11eff2fef56d84e4e

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright John Arnold
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,28 @@
+# Consentful
+Short description and motivation.
+
+## Usage
+How to use my plugin.
+
+## Installation
+Add this line to your application's Gemfile:
+
+```ruby
+gem "consentful"
+```
+
+And then execute:
+```bash
+$ bundle
+```
+
+Or install it yourself as:
+```bash
+$ gem install consentful
+```
+
+## Contributing
+Contribution directions go here.
+
+## License
+The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/Rakefile

@@ -0,0 +1,6 @@
+require "bundler/setup"
+
+APP_RAKEFILE = File.expand_path("spec/dummy/Rakefile", __dir__)
+load "rails/tasks/engine.rake"
+
+require "bundler/gem_tasks"

data/app/assets/stylesheets/consentful/application.css

@@ -0,0 +1,15 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+ * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the bottom of the
+ * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
+ * files in this directory. Styles in this file should be added after the last require_* statement.
+ * It is generally better to create a new file per style scope.
+ *
+ *= require_tree .
+ *= require_self
+ */

data/app/assets/stylesheets/consentful/consent.scss

@@ -0,0 +1,518 @@
+// Consentful — self-contained styles for the consent banner, modal and
+// preference centre. Override any of the palette variables before importing
+// (e.g. `@import "consentful/consent";`) to theme the widget to your brand.
+
+$blue-dark:  #002b49 !default;
+$blue-light: #0481b7 !default;
+$gold:       #ac8c30 !default;
+$gold-dark:  #9a8340 !default;
+$grey-49:    #494949 !default;
+$grey-8c:    #8c8c8c !default;
+$grey-ea:    #eaeaea !default;
+$grey-f2:    #f2f2f2 !default;
+$white:      #ffffff !default;
+
+.c-consent {
+  &__hidden {
+    display: none !important;
+  }
+}
+
+.c-consent-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  user-select: none;
+  cursor: pointer;
+
+  &--disabled {
+    cursor: not-allowed;
+  }
+
+  &__pill-wrap {
+    position: relative;
+    display: inline-block;
+    width: 2.75rem;
+    height: 1.5rem;
+  }
+
+  &__input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  &__pill {
+    position: absolute;
+    inset: 0;
+    border-radius: 9999px;
+    background-color: $blue-dark;
+    transition: background-color 0.15s ease;
+  }
+
+  &__input:checked + &__pill {
+    background-color: $blue-light;
+  }
+
+  &__input:disabled + &__pill {
+    opacity: 0.6;
+  }
+
+  &__knob {
+    position: absolute;
+    top: 0.125rem;
+    left: 0.125rem;
+    width: 1.25rem;
+    height: 1.25rem;
+    border-radius: 9999px;
+    background-color: $white;
+    transition: transform 0.15s ease;
+    pointer-events: none;
+  }
+
+  &__input:checked ~ &__knob {
+    transform: translateX(1.25rem);
+  }
+
+  &__icon {
+    position: absolute;
+    top: 0.375rem;
+    width: 0.75rem;
+    height: 0.75rem;
+    pointer-events: none;
+
+    &--off {
+      left: 0.25rem;
+      color: $white;
+    }
+
+    &--on {
+      left: 1.5rem;
+      color: $blue-light;
+      display: none;
+    }
+  }
+
+  &__input:checked ~ &__icon--off {
+    display: none;
+  }
+
+  &__input:checked ~ &__icon--on {
+    display: inline;
+  }
+
+  &__label {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: $blue-dark;
+  }
+}
+
+.c-consent-banner {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 1100;
+  background-color: $white;
+  border-top: 1px solid $grey-ea;
+  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
+
+  &__inner {
+    max-width: 1500px;
+    margin: 0 auto;
+    padding: 1rem 1.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+
+    @media (min-width: 1024px) {
+      flex-direction: row;
+      align-items: center;
+    }
+  }
+
+  &__text {
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__title {
+    font-size: 1.125rem;
+    font-weight: 700;
+    color: $blue-dark;
+    margin-bottom: 0.25rem;
+  }
+
+  &__body {
+    font-size: 0.875rem;
+    color: $blue-dark;
+    margin-bottom: 0.75rem;
+  }
+
+  &__toggles {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    column-gap: 1.5rem;
+    row-gap: 0.5rem;
+    margin-bottom: 0.75rem;
+  }
+
+  &__link {
+    display: inline-block;
+    font-size: 0.875rem;
+    color: $blue-light;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  &__actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    flex-shrink: 0;
+
+    @media (min-width: 1024px) {
+      flex-wrap: nowrap;
+    }
+  }
+}
+
+.c-consent-action {
+  padding: 0.75rem 1.5rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: $white;
+  background-color: $gold-dark;
+  border: 0;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+
+  &:hover {
+    background-color: $gold;
+  }
+}
+
+.c-consent-modal {
+  position: fixed;
+  inset: 0;
+  z-index: 1200;
+  background-color: rgba(0, 0, 0, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+
+  &__dialog {
+    width: 100%;
+    max-width: 768px;
+  }
+}
+
+.c-consent-preferences {
+  background-color: $white;
+  display: flex;
+  flex-direction: column;
+
+  &--modal {
+    border-radius: 0.5rem;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+    overflow: hidden;
+    max-height: 90vh;
+  }
+
+  &--page {
+    min-height: 100vh;
+  }
+
+  &__header {
+    background-color: $blue-dark;
+    color: $white;
+    padding: 1rem 1.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-shrink: 0;
+  }
+
+  &__header-title {
+    font-size: 1.125rem;
+    font-weight: 700;
+  }
+
+  &__close {
+    background: none;
+    border: 0;
+    color: $white;
+    cursor: pointer;
+    padding: 0.25rem;
+
+    &:hover {
+      opacity: 0.75;
+    }
+  }
+
+  &__body {
+    flex: 1;
+    min-height: 0;
+
+    .c-consent-preferences--modal & {
+      overflow-y: auto;
+    }
+  }
+
+  &__intro {
+    padding: 1.5rem 1.5rem 0.5rem;
+  }
+
+  &__page-title {
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: $blue-dark;
+    margin-bottom: 1rem;
+  }
+
+  &__intro-body {
+    font-size: 0.875rem;
+    color: $blue-dark;
+    margin-bottom: 1rem;
+  }
+
+  &__tabs {
+    padding: 0 1.5rem;
+    border-bottom: 1px solid $grey-ea;
+    display: flex;
+    gap: 2rem;
+  }
+
+  &__tab {
+    padding: 0.75rem 0;
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: $blue-dark;
+    background: none;
+    border: 0;
+    border-bottom: 2px solid transparent;
+    cursor: pointer;
+
+    &--active {
+      color: $blue-light;
+      border-bottom-color: $blue-light;
+    }
+
+    &:hover:not(&--active) {
+      color: $blue-light;
+    }
+  }
+
+  &__panel {
+    padding: 1rem 1.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  &__reference {
+    padding: 0.75rem 1.5rem;
+    background-color: $grey-f2;
+    border-top: 1px solid $grey-ea;
+    font-size: 0.75rem;
+    color: $grey-49;
+    flex-shrink: 0;
+  }
+
+  &__reference-code {
+    color: $blue-dark;
+    font-family: SFMono-Regular, Menlo, Consolas, monospace;
+  }
+
+  &__copy-button {
+    margin-left: 0.5rem;
+    background: none;
+    border: 0;
+    color: $blue-light;
+    cursor: pointer;
+    font-size: inherit;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  &__footer {
+    padding: 1rem 1.5rem;
+    border-top: 1px solid $grey-ea;
+    background-color: $white;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 0.5rem;
+    flex-shrink: 0;
+  }
+}
+
+.c-consent-category {
+  border: 1px solid $grey-ea;
+  border-radius: 0.25rem;
+
+  &__header {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.75rem;
+    padding: 1rem;
+  }
+
+  &__heading {
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__title {
+    font-size: 1rem;
+    font-weight: 700;
+    color: $blue-dark;
+  }
+
+  &__blurb {
+    font-size: 0.875rem;
+    color: $grey-49;
+    margin-top: 0.25rem;
+  }
+
+  &__chevron {
+    padding: 0.25rem;
+    color: $blue-dark;
+    background: none;
+    border: 0;
+    cursor: pointer;
+
+    &:hover {
+      color: $blue-light;
+    }
+  }
+
+  &__body {
+    border-top: 1px solid $grey-ea;
+  }
+}
+
+.c-consent-service {
+  &__row {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.5rem 1rem;
+    border-bottom: 1px solid $grey-ea;
+
+    &:last-child {
+      border-bottom: 0;
+    }
+  }
+
+  &__name {
+    flex: 1;
+    font-size: 0.875rem;
+    color: $blue-dark;
+  }
+
+  &__info {
+    background: none;
+    border: 0;
+    color: $grey-8c;
+    cursor: pointer;
+
+    &:hover {
+      color: $blue-light;
+    }
+  }
+
+  &__detail {
+    background-color: $grey-f2;
+    padding: 1rem 1.5rem;
+    font-size: 0.875rem;
+    color: $blue-dark;
+  }
+
+  &__detail-section {
+    margin-bottom: 0.75rem;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  &__detail-label {
+    font-size: 0.75rem;
+    color: $grey-49;
+    margin-bottom: 0.25rem;
+  }
+
+  &__detail-value {
+    margin: 0;
+  }
+
+  &__detail-link {
+    color: $blue-light;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  &__chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.25rem;
+  }
+
+  &__chip {
+    display: inline-block;
+    padding: 0.25rem 0.5rem;
+    border: 1px solid $grey-ea;
+    border-radius: 0.25rem;
+    font-size: 0.75rem;
+
+    &--mono {
+      font-family: SFMono-Regular, Menlo, Consolas, monospace;
+    }
+  }
+}
+
+.c-consent-services-card {
+  border: 1px solid $grey-ea;
+  border-radius: 0.25rem;
+
+  &__header {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 1rem;
+  }
+
+  &__heading {
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__name {
+    font-size: 1rem;
+    font-weight: 700;
+    color: $blue-dark;
+  }
+
+  &__category {
+    font-size: 0.75rem;
+    color: $grey-49;
+  }
+}

data/app/components/consentful/banner.html.erb

@@ -0,0 +1,53 @@
+<div
+  data-controller="consentful--banner"
+  data-consentful--banner-expected-version-id-value="<%= version.id %>"
+  data-consentful--banner-submit-path-value="<%= submit_path %>"
+  data-consentful--banner-categories-value="<%= category_data.to_json %>"
+  class="c-consent-banner c-consent__hidden"
+>
+  <div class="c-consent-banner__inner">
+    <div class="c-consent-banner__text">
+      <h2 class="c-consent-banner__title"><%= version.banner_title %></h2>
+      <p class="c-consent-banner__body"><%= version.banner_body %></p>
+
+      <div class="c-consent-banner__toggles">
+        <% categories.each do |category| %>
+          <%= render Consentful::Toggle.new(
+                id_scope: "banner",
+                name: "categories[#{category.key}]",
+                value: "true",
+                checked: category.required?,
+                disabled: category.required?,
+                label: category.name,
+                label_position: :left,
+                data: {
+                  "consentful--banner-target": "categoryToggle",
+                  "category-key": category.key
+                }
+              ) %>
+        <% end %>
+      </div>
+
+      <%= link_to version.manage_label.presence || "More Information",
+            preferences_path,
+            class: "c-consent-banner__link",
+            data: {
+              "consentful--banner-target": "manageLink",
+              controller: "consentful--modal-trigger",
+              action: "click->consentful--modal-trigger#open"
+            } %>
+    </div>
+
+    <div class="c-consent-banner__actions">
+      <button type="button" data-action="consentful--banner#save" class="c-consent-action">
+        <%= version.save_label.presence || "Save Settings" %>
+      </button>
+      <button type="button" data-action="consentful--banner#reject" class="c-consent-action">
+        <%= version.reject_label.presence || "Deny" %>
+      </button>
+      <button type="button" data-action="consentful--banner#accept" class="c-consent-action">
+        <%= version.accept_label.presence || "Accept All" %>
+      </button>
+    </div>
+  </div>
+</div>

data/app/components/consentful/banner.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module Consentful
+  class Banner < ViewComponent::Base
+    def initialize(version:, categories:, preferences_path:, submit_path:)
+      super()
+      @version = version
+      @categories = categories
+      @preferences_path = preferences_path
+      @submit_path = submit_path
+    end
+
+    def render?
+      @version.present?
+    end
+
+    private
+
+    attr_reader :version, :categories, :preferences_path, :submit_path
+
+    def category_data
+      categories.map do |category|
+        { key: category.key, name: category.name, required: category.required? }
+      end
+    end
+  end
+end

data/app/components/consentful/modal.html.erb

@@ -0,0 +1,19 @@
+<div
+  id="consent-modal-root"
+  data-controller="consentful--modal"
+  data-action="click->consentful--modal#closeFromBackdrop"
+  class="c-consent-modal c-consent__hidden"
+  role="dialog"
+  aria-modal="true"
+  aria-labelledby="consent-modal-title"
+>
+  <div class="c-consent-modal__dialog" data-consentful--modal-target="dialog">
+    <%= render Consentful::Preferences.new(
+          version: version,
+          categories: categories,
+          visitor_uuid: visitor_uuid,
+          submit_path: submit_path,
+          variant: :modal
+        ) %>
+  </div>
+</div>

data/app/components/consentful/modal.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module Consentful
+  class Modal < ViewComponent::Base
+    def initialize(version:, categories:, visitor_uuid:, submit_path:)
+      super()
+      @version = version
+      @categories = categories
+      @visitor_uuid = visitor_uuid
+      @submit_path = submit_path
+    end
+
+    def render?
+      @version.present?
+    end
+
+    private
+
+    attr_reader :version, :categories, :visitor_uuid, :submit_path
+  end
+end