Sha256: 6cfefedd9175f33e20a5aaced1cc8046cce76550b6ebfa66d1342518948f091b

Contents?: true

Size: 1.21 KB

Versions: 69

Compression:

Stored size: 1.21 KB

Contents

# frozen_string_literal: true

# Setup Playground to use all available component props
# Setup Features to use individual component props and combinations

module Primer
  module OpenProject
    # @label GridLayout
    class GridLayoutPreview < ViewComponent::Preview
      # @label Playground
      def playground
        render(Primer::OpenProject::GridLayout.new(css_class: "grid-layout", tag: :div)) do |component|
          component.with_area(:area1, bg: :attention, p: 6) do
            "Block 1"
          end
          component.with_area(:area2, bg: :accent, p: 6) do
            "Block 2"
          end
        end
      end

      # The component can be used for easy layouting of multiple child components.
      # The component sets classes as well the grid-area definitions. The actual grid template can then be defined a separate CSS file.
      # @label Default
      def default
        render(Primer::OpenProject::GridLayout.new(css_class: "grid-layout", tag: :div)) do |component|
          component.with_area(:area1, bg: :attention, p: 6) do
            "Block 1"
          end
          component.with_area(:area2, bg: :accent, p: 6) do
            "Block 2"
          end
        end
      end
    end
  end
end

Version data entries

69 entries across 69 versions & 1 rubygems

Version Path
openproject-primer_view_components-0.52.2 previews/primer/open_project/grid_layout_preview.rb
openproject-primer_view_components-0.52.1 previews/primer/open_project/grid_layout_preview.rb
openproject-primer_view_components-0.52.0 previews/primer/open_project/grid_layout_preview.rb
openproject-primer_view_components-0.51.0 previews/primer/open_project/grid_layout_preview.rb
openproject-primer_view_components-0.50.1 previews/primer/open_project/grid_layout_preview.rb
openproject-primer_view_components-0.50.0 previews/primer/open_project/grid_layout_preview.rb
openproject-primer_view_components-0.49.2 previews/primer/open_project/grid_layout_preview.rb
openproject-primer_view_components-0.49.1 previews/primer/open_project/grid_layout_preview.rb
openproject-primer_view_components-0.49.0 previews/primer/open_project/grid_layout_preview.rb
openproject-primer_view_components-0.48.2 previews/primer/open_project/grid_layout_preview.rb
openproject-primer_view_components-0.48.1 previews/primer/open_project/grid_layout_preview.rb
openproject-primer_view_components-0.48.0 previews/primer/open_project/grid_layout_preview.rb
openproject-primer_view_components-0.47.1 previews/primer/open_project/grid_layout_preview.rb
openproject-primer_view_components-0.47.0 previews/primer/open_project/grid_layout_preview.rb
openproject-primer_view_components-0.46.1 previews/primer/open_project/grid_layout_preview.rb
openproject-primer_view_components-0.46.0 previews/primer/open_project/grid_layout_preview.rb
openproject-primer_view_components-0.45.0 previews/primer/open_project/grid_layout_preview.rb
openproject-primer_view_components-0.44.3 previews/primer/open_project/grid_layout_preview.rb
openproject-primer_view_components-0.44.2 previews/primer/open_project/grid_layout_preview.rb
openproject-primer_view_components-0.44.1 previews/primer/open_project/grid_layout_preview.rb