katalyst-koi 4.18.1 → 5.0.0.alpha.2

data/app/assets/stylesheets/koi/layouts/_navigation.scss

@@ -1,180 +0,0 @@
-$heading: rgba(255, 255, 255, 0.6);
-$separator: rgba(255, 255, 255, 0.2);
-
-%subheading {
-  color: $heading;
-  font-size: 0.8rem;
-  font-weight: 400;
-  margin: 0;
-}
-
-@mixin header {
-  display: grid;
-  grid-template-areas: "icon primary" "icon secondary";
-  grid-template-rows: 1fr 1fr;
-  grid-template-columns: 3rem 1fr;
-  padding: 1rem;
-
-  .site-name {
-    grid-area: primary;
-    padding-left: 1rem;
-    font-size: 1.25rem;
-    font-weight: unset;
-    color: var(--site-primary);
-    margin: 0;
-    white-space: nowrap;
-    overflow-x: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .admin-name {
-    grid-area: secondary;
-    color: white;
-    padding-left: 1rem;
-    @extend %subheading;
-    opacity: 0.75;
-    white-space: nowrap;
-    overflow-x: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .site-icon {
-    grid-area: icon;
-    display: flex;
-    background-color: var(--site-primary);
-    color: var(--site-on-primary);
-    width: 3rem;
-    height: 3rem;
-    align-items: center;
-    justify-content: space-around;
-    text-transform: capitalize;
-    font-size: 2rem;
-    border-radius: 0.25rem;
-  }
-}
-
-%navigation {
-  background: black;
-  color: white;
-  padding-bottom: 2rem;
-  --site-link: white;
-
-  > * {
-    transition: opacity 0.25s;
-  }
-
-  &:not([aria-expanded]) {
-    > * {
-      opacity: 0;
-    }
-  }
-
-  header {
-    @include header;
-    border-bottom: 1px solid $separator;
-  }
-
-  ul,
-  li {
-    padding: 0;
-    list-style: none;
-    font-size: var(--heading--h6);
-  }
-
-  .filter {
-    margin: 1rem calc(1rem - 5px) 0;
-    position: relative;
-
-    input {
-      width: 100%;
-      border: none;
-      border-radius: 1px;
-    }
-
-    // keyboard shortcut
-    &::after {
-      content: "G";
-      position: absolute;
-      display: block;
-      top: 4px;
-      bottom: 4px;
-      right: 4px;
-      width: auto;
-      border-radius: 2px;
-      border: 1px solid #aaa;
-      color: #888;
-      padding: 6px 0.3rem 0 0.3rem;
-      font-size: 0.8rem;
-      pointer-events: none;
-    }
-
-    &:has(input:focus),
-    &:has(input:hover) {
-      &::after {
-        opacity: 0;
-      }
-    }
-  }
-
-  li > span {
-    display: block;
-    padding: 1.25rem 1rem 0.25rem;
-    color: $heading;
-  }
-
-  > ul > li > span {
-    border-top: 1px solid $separator;
-    margin-top: 1rem;
-    padding: 1.25rem 1rem 0.25rem;
-    @extend %subheading;
-  }
-
-  li li li > a[href] {
-    padding-left: 2.5rem;
-  }
-
-  li > a[href] {
-    display: block;
-    padding: 0.75rem 1rem;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  li > a[href]:hover,
-  li > a[href]:focus {
-    background: rgba(255, 255, 255, 0.2);
-    text-decoration: none;
-  }
-}
-
-.navigation-collapse {
-  width: 2rem;
-  border-radius: 50%;
-  margin-top: 1rem;
-  justify-self: right;
-  align-self: start;
-  background-color: white;
-  box-shadow: 0px 1px 7px 2px rgba(0, 0, 0, 0.1);
-  visibility: hidden;
-  opacity: 0;
-  transform: translateX(50%);
-  transition:
-    opacity 0.25s,
-    background-color 0.25s;
-  cursor: pointer;
-
-  nav[aria-expanded] + & {
-    transform: translateX(50%) rotate(180deg);
-  }
-
-  nav:hover + &,
-  &:hover {
-    visibility: visible;
-    opacity: 1;
-  }
-
-  &:hover {
-    background-color: var(--site-primary);
-  }
-}

data/app/assets/stylesheets/koi/layouts/_stack.scss

@@ -1,13 +0,0 @@
-.stack {
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-}
-
-.stack > * {
-  margin-block: 0;
-}
-
-.stack > * + * {
-  margin-block-start: var(--space, 1.5rem);
-}

data/app/assets/stylesheets/koi/pages/_index.scss

@@ -1 +0,0 @@
-@use "login";

data/app/assets/stylesheets/koi/pages/_login.scss

@@ -1,46 +0,0 @@
-@use "../layouts/navigation" as nav;
-@use "../layouts/flash";
-
-.admin-login {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  background: var(--site-primary);
-}
-
-.admin-login > main {
-  flex: 1 1 auto;
-  max-width: 24rem;
-  background: white;
-  border-radius: 0.25rem;
-  height: unset;
-}
-
-.admin-login header {
-  @include nav.header;
-  width: 100%;
-
-  .admin-name {
-    color: #555;
-  }
-}
-
-.admin-login form {
-  padding: 0 1rem 1rem;
-}
-
-.admin-login .actions-group {
-  display: flex;
-  flex-direction: row;
-  justify-content: stretch;
-}
-
-.admin-login .button--primary {
-  flex: 1;
-}
-
-.admin-login .govuk-error-summary {
-  padding: 15px;
-  margin-bottom: 30px;
-}

data/app/assets/stylesheets/koi/themes/_content.scss

@@ -1,62 +0,0 @@
-@use "katalyst/content/editor/variables" as variables;
-@use "katalyst/content";
-
-[data-controller="content--editor--container"] {
-  --heading--h4: 1rem;
-}
-
-[data-controller="content--editor--table"] {
-  .content--editor--table-editor {
-    // ensure the table editor is easy to target when empty
-    &:not(:has(table)) {
-      min-height: 4rem !important;
-    }
-
-    // tight wrap the table editor around the table and use table borders
-    &:has(table) {
-      border: none !important;
-      padding: 0 !important;
-    }
-
-    table {
-      width: 100%;
-    }
-
-    table,
-    th,
-    td {
-      border: 2px solid black;
-    }
-  }
-
-  // restore webkit spinners, hidden by govuk
-  // these are not ideal, but spinners are much easier to work with for this
-  // use case than the default number input, because we submit the form on
-  // change to implement the live preview
-  input[type="number"]::-webkit-inner-spin-button {
-    position: relative;
-    right: -1px;
-    margin-top: -2px;
-    margin-bottom: -4px;
-    -webkit-appearance: inner-spin-button !important;
-    opacity: 1 !important;
-  }
-}
-
-[data-enum="state"][data-value="published"] {
-  --tag-background-color: #{variables.$status-published-background-color};
-  --tag-color: #{variables.$status-published-color};
-  border: 1px solid variables.$status-published-border-color;
-}
-
-[data-enum="state"][data-value="draft"] {
-  --tag-background-color: #{variables.$status-draft-background-color};
-  --tag-color: #{variables.$status-draft-color};
-  border: 1px solid variables.$status-draft-border-color;
-}
-
-[data-enum="state"][data-value="unpublished"] {
-  --tag-background-color: #{variables.$status-draft-background-color};
-  --tag-color: #{variables.$status-draft-color};
-  border: 1px solid variables.$status-draft-border-color;
-}

data/app/assets/stylesheets/koi/themes/_govuk.scss

@@ -1,56 +0,0 @@
-@use "../utils/typography" as *;
-
-@use "katalyst/govuk/formbuilder" with (
-  $govuk-font-family: "Inter",
-  $govuk-text-colour: #{var(--site-text-color)},
-  $govuk-typography-scale: (
-    80: govuk-definition(h1),
-    48: govuk-definition(h2),
-    36: govuk-definition(h3),
-    27: govuk-definition(h4),
-    24: govuk-definition(h5),
-    19: govuk-definition(h6),
-    16: govuk-definition(paragraph),
-    14: govuk-definition(small),
-  ),
-  $govuk-input-border-colour: #{var(--site-text-color)}
-);
-
-.govuk-input,
-.govuk-textarea {
-  color: var(--site-text-color);
-}
-
-.govuk-hint {
-  max-width: var(--text-width);
-}
-
-// in the context of Koi admin forms, hang the error border in the gutter
-// not a generally applicable style
-.govuk-form-group--error:not(.govuk-form-group .govuk-form-group--error) {
-  position: relative;
-  margin-left: -18px;
-  padding-left: 13px;
-}
-
-// add some koi styling to the govuk show/hide password button
-[data-govuk-password-input-init] {
-  max-width: var(--text-width);
-
-  .govuk-password-input__wrapper {
-    gap: 0.5rem;
-  }
-
-  .govuk-button {
-    min-width: 4em;
-    background: none;
-    cursor: pointer;
-    border: 2px solid var(--site-text-color);
-  }
-
-  .govuk-button:focus-visible,
-  .govuk-button:hover {
-    color: var(--site-primary);
-    border-color: var(--site-primary);
-  }
-}

data/app/assets/stylesheets/koi/themes/_index.scss

@@ -1,5 +0,0 @@
-@use "content";
-@use "govuk";
-@use "kpop";
-@use "navigation";
-@use "trix";

data/app/assets/stylesheets/koi/themes/_kpop.scss

@@ -1,5 +0,0 @@
-@use "katalyst/kpop";
-
-.kpop-content {
-  padding: 1rem 1.5rem;
-}

data/app/assets/stylesheets/koi/themes/_navigation.scss

@@ -1,5 +0,0 @@
-@use "katalyst/navigation/editor";
-
-[data-controller="navigation--editor--menu"] {
-  --heading--h4: 1rem;
-}

data/app/assets/stylesheets/koi/themes/_trix.scss

@@ -1,32 +0,0 @@
-// navigation and content already load trix, ensure they are loaded first
-@use "content";
-@use "navigation";
-
-// overrides for default trix styles to match our button styles
-trix-toolbar {
-  .trix-button-group {
-    border: 1px solid var(--site-text-color);
-    border-radius: 0;
-  }
-
-  .trix-button {
-    color: var(--site-secondary);
-    border-bottom: none;
-  }
-
-  .trix-button:not(:first-child) {
-    border-left: 1px solid var(--site-text-color);
-  }
-
-  .trix-button.trix-active {
-    background-color: var(--site-secondary-light);
-    color: var(--site-on-secondary);
-    border-bottom: none;
-  }
-}
-
-// set a maximim width for the text editor and toolbar to match other inputs
-trix-toolbar,
-trix-editor {
-  max-width: var(--text-width);
-}

data/app/assets/stylesheets/koi/utils/_breakpoints.scss

@@ -1,13 +0,0 @@
-// At a 16px base font size this will be 640px (to match govuk)
-@mixin tablet-breakpoint {
-  @media screen and (max-width: 40rem) {
-    @content;
-  }
-}
-
-// At a 16px base font size this will be 1120px
-@mixin laptop-breakpoint {
-  @media screen and (max-width: 70rem) {
-    @content;
-  }
-}

data/app/assets/stylesheets/koi/utils/_hide.scss

@@ -1,11 +0,0 @@
-.hidden,
-[hidden],
-[data-hide] {
-  display: none !important;
-}
-
-[data-collapsed] {
-  max-height: 0;
-  overflow: hidden;
-  margin-bottom: 0 !important;
-}

data/app/assets/stylesheets/koi/utils/_index.scss

@@ -1,2 +0,0 @@
-@use "breakpoints";
-@use "hide";

data/app/assets/stylesheets/koi/utils/_typography.scss

@@ -1,42 +0,0 @@
-@use "sass:map";
-@use "sass:math";
-
-$-font-sizes: () !default;
-$-line-heights: () !default;
-
-@function font-size($size, $breakpoint: null, $unit: rem) {
-  $font-size: map.get($-font-sizes, $size);
-
-  @if $unit == rem {
-    @return $font-size;
-  } @else if $unit == px {
-    @return math.div($font-size, 1rem) * 16px;
-  }
-}
-
-@function line-height($size, $breakpoint: null, $unit: em) {
-  $line-height: map.get($-line-heights, $size);
-
-  @if $unit == em {
-    @return $line-height;
-  } @else if $unit == px {
-    @return math.div($line-height, 1em) * 16px;
-  }
-}
-
-@function govuk-definition($size) {
-  @return (
-    null: (
-      font-size: font-size($size, mobile, px),
-      line-height: line-height($size, mobile, px),
-    ),
-    tablet: (
-      font-size: font-size($size, tablet, px),
-      line-height: line-height($size, tablet, px),
-    ),
-    print: (
-      font-size: font-size($size, print, px),
-      line-height: line-height($size, print, px),
-    )
-  );
-}

data/app/components/koi/content/editor/item_form_component.html.erb

@@ -1,11 +0,0 @@
-<%= form_with model:, scope: :item, url:, builder:, **html_attributes do |form| %>
-  <%= form.hidden_field :container_type %>
-  <%= form.hidden_field :container_id %>
-  <%= form.hidden_field :type %>
-
-  <%= content %>
-
-  <%= form.content_background_field %>
-  <%= form.content_visible_field %>
-  <%= form.content_buttons %>
-<% end %>

data/app/components/koi/content/editor/item_form_component.rb

@@ -1,94 +0,0 @@
-# frozen_string_literal: true
-
-module Koi
-  module Content
-    module Editor
-      class ItemFormComponent < ViewComponent::Base
-        include Katalyst::HtmlAttributes
-
-        attr_reader :model, :url, :builder, :form
-
-        def initialize(model:, url:, builder: Koi::FormBuilder, **)
-          super(**)
-
-          @model   = model
-          @url     = url
-          @builder = builder
-        end
-
-        def form_with(**options, &block)
-          view_context.form_with(**options) do |form|
-            @form = form
-            form.extend(ContentFormHelper)
-            capture(form, &block)
-          end
-        end
-
-        def content
-          @__vc_content_evaluated = true
-          return @__vc_content if defined?(@__vc_content)
-
-          @__vc_content = view_context.capture(@form, &@__vc_render_in_block)
-        end
-
-        def inspect
-          "#<#{self.class.name} model: #{model.inspect} url: #{url.inspect}>"
-        end
-
-        module ContentFormHelper
-          def content_heading_fieldset
-            govuk_fieldset(legend: { text: "Heading", size: "m" }) do
-              concat(content_heading_field(label: nil))
-              concat(content_heading_style_field)
-            end
-          end
-
-          def content_heading_field(args = {})
-            govuk_text_field :heading,
-                             **{ label: { text: "Heading", size: "s" } }.deep_merge(args)
-          end
-
-          def content_heading_style_field(args = {})
-            govuk_collection_radio_buttons :heading_style,
-                                           Katalyst::Content.config.heading_styles,
-                                           :itself,
-                                           :itself,
-                                           **{ small: true, legend: { text: "Style", size: "s" } }.deep_merge(args)
-          end
-
-          def content_url_field(args = {})
-            govuk_text_field :url,
-                             **{ label: { text: "URL", size: "s" } }.deep_merge(args)
-          end
-
-          def content_http_method_field(methods, args = {})
-            govuk_select :http_method, methods,
-                         **{ label: { text: "HTTP method", size: "s" } }.deep_merge(args)
-          end
-
-          def content_target_field(targets, args = {})
-            govuk_select :target, targets,
-                         **{ label: { text: "HTTP target", size: "s" } }.deep_merge(args)
-          end
-
-          def content_background_field(args = {})
-            govuk_select :background, Katalyst::Content.config.backgrounds,
-                         **{ label: { size: "s" } }.deep_merge(args)
-          end
-
-          def content_visible_field(args = {})
-            govuk_check_box_field :visible,
-                                  **{ label: { text: "Visible? ", size: "s" }, small: true }.deep_merge(args)
-          end
-
-          def content_buttons
-            tag.div(class: "actions") do
-              concat(admin_save("Done"))
-              concat(admin_discard(data: { action: "click->kpop--frame#dismiss:prevent" }))
-            end
-          end
-        end
-      end
-    end
-  end
-end

data/app/components/koi/summary_list/attachment_component.rb

@@ -1,47 +0,0 @@
-# frozen_string_literal: true
-
-module Koi
-  module SummaryList
-    class AttachmentComponent < Base
-      def initialize(model, attribute, variant: :thumb, **attributes)
-        super(model, attribute, **attributes)
-
-        @variant = variant
-      end
-
-      def attribute_value
-        representation
-      end
-
-      def representation
-        if raw_value.try(:variable?) && named_variant.present?
-          image_tag(raw_value.variant(@variant))
-        elsif raw_value.try(:attached?)
-          filename.to_s
-        else
-          ""
-        end
-      end
-
-      def filename
-        raw_value.blob.filename
-      end
-
-      # Utility for accessing the path Rails provides for retrieving the
-      # attachment for use in cells. Example:
-      #    <% row.attachment :file do |cell| %>
-      #       <%= link_to "Download", cell.internal_path %>
-      #    <% end %>
-      def internal_path
-        rails_blob_path(raw_value, disposition: :attachment)
-      end
-
-      private
-
-      # Find the reflective variant by name (i.e. :thumb by default)
-      def named_variant
-        @model.attachment_reflections[@attribute.to_s].named_variants[@variant.to_sym]
-      end
-    end
-  end
-end

data/app/components/koi/summary_list/base.rb

@@ -1,59 +0,0 @@
-# frozen_string_literal: true
-
-module Koi
-  module SummaryList
-    class Base < ViewComponent::Base
-      include Katalyst::HtmlAttributes
-
-      define_html_attribute_methods :term_attributes, default: {}
-      define_html_attribute_methods :description_attributes, default: {}
-
-      def initialize(model, attribute, label: nil, skip_blank: true)
-        super()
-
-        @model      = model
-        @attribute  = attribute
-        @label      = label
-        @skip_blank = skip_blank
-      end
-
-      def call
-        tag.dt(attribute_name, **term_attributes) +
-          tag.dd(content_or_value, **description_attributes)
-      end
-
-      def render?
-        raw_value.present? || !@skip_blank
-      end
-
-      def attribute_name
-        @label&.dig(:text) || @model.class.human_attribute_name(@attribute)
-      end
-
-      def attribute_value
-        raw_value.to_s
-      end
-
-      def raw_value
-        @model.public_send(@attribute)
-      end
-
-      def inspect
-        "#<#{self.class.name} #{@attribute.inspect}>"
-      end
-
-      # Convenience method for rendering the content of the cell
-      # <% dl.text(:name) { |cell| tag.em(cell) } %>
-      # => <dt>Name</dt><dd><em>Jamie Banks</em></dd>
-      def to_s
-        attribute_value
-      end
-
-      private
-
-      def content_or_value
-        content? ? content : attribute_value
-      end
-    end
-  end
-end