Phoenix Storybook

Set assigns

Technical component illustrating how templates and assign/toggle can be used together.

Hello story Open in playground
label: hello / status: false 
<div id="template-component-single-hello" class="space-y-2" >
  <button class="btn" id="set-foo-template-component-single-hello" phx-click={JS.push("psb-assign", value: %{label: "foo"})}>Set label to foo</button>
  <button class="btn" id="set-bar-template-component-single-hello" phx-click={JS.push("psb-assign", value: %{label: "bar"})}>Set label to bar</button>
  <button class="btn" id="toggle-status-template-component-single-hello" phx-click={JS.push("psb-toggle", value: %{attr: :status})}>Toggle status</button>
  <button class="btn" id="set-status-true-template-component-single-hello" phx-click={JS.push("psb-assign", value: %{status: true})}>Set status to true</button>
  <button class="btn" id="set-status-false-template-component-single-hello" phx-click={JS.push("psb-assign", value: %{status: false})}>Set status to false</button>
  <div class="mt-2">
    <.template_component label="hello"/>
  </div>
</div>
World story Open in playground
label: world / status: false 
<div id="template-component-single-world" class="space-y-2" >
  <button class="btn" id="set-foo-template-component-single-world" phx-click={JS.push("psb-assign", value: %{label: "foo"})}>Set label to foo</button>
  <button class="btn" id="set-bar-template-component-single-world" phx-click={JS.push("psb-assign", value: %{label: "bar"})}>Set label to bar</button>
  <button class="btn" id="toggle-status-template-component-single-world" phx-click={JS.push("psb-toggle", value: %{attr: :status})}>Toggle status</button>
  <button class="btn" id="set-status-true-template-component-single-world" phx-click={JS.push("psb-assign", value: %{status: true})}>Set status to true</button>
  <button class="btn" id="set-status-false-template-component-single-world" phx-click={JS.push("psb-assign", value: %{status: false})}>Set status to false</button>
  <div class="mt-2">
    <.template_component label="world"/>
  </div>
</div>
Value template Open in playground
label: hey / status: false 
<.template_component
  label={"hey"}
  foo="zaehjzjjhejkazhekjazhejhazekzekjhazek jhzaejahzekjahzejhejkazhekjazhejhazekj"
/>
Group Open in playground
label: one / status: false
label: two / status: false 
<div id="template-component-group-one" class="space-y-2" >
  <button class="btn" id="set-foo-template-component-group-one" phx-click={JS.push("psb-assign", value: %{label: "foo"})}>Set label to foo</button>
  <button class="btn" id="set-bar-template-component-group-one" phx-click={JS.push("psb-assign", value: %{label: "bar"})}>Set label to bar</button>
  <button class="btn" id="toggle-status-template-component-group-one" phx-click={JS.push("psb-toggle", value: %{attr: :status})}>Toggle status</button>
  <button class="btn" id="set-status-true-template-component-group-one" phx-click={JS.push("psb-assign", value: %{status: true})}>Set status to true</button>
  <button class="btn" id="set-status-false-template-component-group-one" phx-click={JS.push("psb-assign", value: %{status: false})}>Set status to false</button>
  <div class="mt-2">
    <.template_component label="one"/>
  </div>
</div>

<div id="template-component-group-two" class="space-y-2" >
  <button class="btn" id="set-foo-template-component-group-two" phx-click={JS.push("psb-assign", value: %{label: "foo"})}>Set label to foo</button>
  <button class="btn" id="set-bar-template-component-group-two" phx-click={JS.push("psb-assign", value: %{label: "bar"})}>Set label to bar</button>
  <button class="btn" id="toggle-status-template-component-group-two" phx-click={JS.push("psb-toggle", value: %{attr: :status})}>Toggle status</button>
  <button class="btn" id="set-status-true-template-component-group-two" phx-click={JS.push("psb-assign", value: %{status: true})}>Set status to true</button>
  <button class="btn" id="set-status-false-template-component-group-two" phx-click={JS.push("psb-assign", value: %{status: false})}>Set status to false</button>
  <div class="mt-2">
    <.template_component label="two"/>
  </div>
</div>