feat: add example for truncate

.github/workflows/pr-preview-deploy.yml

@@ -13,18 +13,18 @@ jobs:
       github.event.workflow_run.conclusion == 'success'
     steps:
       - name: Download dist
-        uses: actions/github-script@v3
+        uses: actions/github-script@v6
         with:
           script: |
-            var artifacts = await github.actions.listWorkflowRunArtifacts({
+            var artifacts = await github.rest.actions.listWorkflowRunArtifacts({
                owner: context.repo.owner,
                repo: context.repo.repo,
                run_id: ${{github.event.workflow_run.id }},
             });
             var matchArtifact = artifacts.data.artifacts.filter((artifact) => {
               return artifact.name == "dist"
             })[0];
-            var download = await github.actions.downloadArtifact({
+            var download = await github.rest.actions.downloadArtifact({
                owner: context.repo.owner,
                repo: context.repo.repo,
                artifact_id: matchArtifact.id,
@@ -33,18 +33,18 @@ jobs:
             var fs = require('fs');
             fs.writeFileSync('${{github.workspace}}/dist.zip', Buffer.from(download.data));
       - name: Download PR number
-        uses: actions/github-script@v3
+        uses: actions/github-script@v6
         with:
           script: |
-            var artifacts = await github.actions.listWorkflowRunArtifacts({
+            var artifacts = await github.rest.actions.listWorkflowRunArtifacts({
                 owner: context.repo.owner,
                 repo: context.repo.repo,
                 run_id: ${{github.event.workflow_run.id }},
             });
             var matchArtifact = artifacts.data.artifacts.filter((artifact) => {
               return artifact.name == "pr"
             })[0];
-            var download = await github.actions.downloadArtifact({
+            var download = await github.rest.actions.downloadArtifact({
                 owner: context.repo.owner,
                 repo: context.repo.repo,
                 artifact_id: matchArtifact.id,
@@ -57,7 +57,7 @@ jobs:
       - run: unzip pr.zip
 
       - name: Generate issue_number
-        uses: actions/github-script@v3
+        uses: actions/github-script@v6
         id: issue_number
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
@@ -67,13 +67,13 @@ jobs:
           result-encoding: string
 
       - name: Generate Surge URL
-        uses: actions/github-script@v3
+        uses: actions/github-script@v6
         id: surge-url
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           script: |
             const issue_number = ${{steps.issue_number.outputs.result}};
-            return `patternfly-yew-quickstarts-pr-${issue_number}-preview.surge.sh`;
+            return `patternfly-yew-quickstart-pr-${issue_number}-preview.surge.sh`;
           result-encoding: string
       - name: Install Surge
         run: npm install -g surge
@@ -83,6 +83,6 @@ jobs:
       - name: Post URL as PR comment
         uses: mshick/add-pr-comment@v2
         with:
-          message: "🚀 Deployed Preview: http://${{steps.surge-url.outputs.result}} ✨"
+          message: "🚀 Deployed Preview: https://${{steps.surge-url.outputs.result}} ✨"
           repo-token: ${{ secrets.BOT_TOKEN }}
           issue: ${{steps.issue_number.outputs.result}}

Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "patternfly-yew-quickstart"
-version = "0.5.0"
+version = "0.5.1"
 authors = ["Jens Reimann <jreimann@redhat.com>"]
 edition = "2021"
 license = "Apache-2.0"
@@ -13,7 +13,7 @@ browser-panic-hook = "0.2"
 chrono = { version = "0.4.30", default-features = false, features = ["wasmbind"] }
 gloo-utils = "0.2"
 log = "0.4"
-patternfly-yew = { version = "0.5.0", features = ["tree", "dual_list_selector", "icons-fab"] }
+patternfly-yew = { version = "0.5.1", features = ["tree", "dual_list_selector", "icons-fab"] }
 popper-rs = { version = "0.3.0", features = ["yew", "debug"] }
 serde_json = "1"
 strum = { version = "0.25", features = ["derive"] }
@@ -35,7 +35,7 @@ features = [
 
 [patch.crates-io]
 #patternfly-yew = { path = "../patternfly-yew" }
-#patternfly-yew = { git = "https://github.com/ctron/patternfly-yew", rev = "4b5025843efe1c9fce5c85168f5f5971005a0886" } # FIXME: awaiting release
+patternfly-yew = { git = "https://github.com/ctron/patternfly-yew", rev = "ef507153eabf2dd3ab4dff2ece3325896510daba" } # FIXME: awaiting release
 #yew-nested-router = { path = "../yew-nested-router" }
 #yew-more-hooks = { git = "https://github.com/ctron/yew-more-hooks", rev = "f535bb2e7b227aac7010035215c11d4aeae6cb62" } # FIXME: awaiting release
 #yew-more-hooks = { path = "../yew-more-hooks" }

src/app/mod.rs

@@ -58,6 +58,7 @@ pub enum Component {
     Toast,
     Tooltip,
     Tree,
+    Truncate,
 }
 
 #[derive(Debug, Clone, Default, PartialEq, Eq, Target)]
@@ -177,6 +178,7 @@ fn switch_app_route(target: AppRoute) -> Html {
         Component::Toast => html! {<components::ToastExample/>},
         Component::Tooltip => html! {<components::TooltipExample/>},
         Component::Tree => html! {<components::TreeExample/>},
+        Component::Truncate => html! {<components::TruncateExample/>},
     };
 
     let layout = |target: Layout| match target {
@@ -314,6 +316,7 @@ fn page(props: &PageProps) -> Html {
                         <NavRouterItem<AppRoute> to={AppRoute::Component(Component::Toast)}>{"Toast"}</NavRouterItem<AppRoute>>
                         <NavRouterItem<AppRoute> to={AppRoute::Component(Component::Tooltip)}>{"Tooltip"}</NavRouterItem<AppRoute>>
                         <NavRouterItem<AppRoute> to={AppRoute::Component(Component::Tree)}>{"Tree"}</NavRouterItem<AppRoute>>
+                        <NavRouterItem<AppRoute> to={AppRoute::Component(Component::Truncate)}>{"Truncate"}</NavRouterItem<AppRoute>>
                     </NavExpandable>
                     <NavExpandable title="Layouts">
                         <NavRouterItem<AppRoute> to={AppRoute::Layout(Layout::Bullseye)}>{"Bullseye"}</NavRouterItem<AppRoute>>
@@ -344,13 +347,13 @@ fn page(props: &PageProps) -> Html {
 
     let backdropper = use_backdrop();
 
-    let onabout = Callback::from(move |_| {
+    let onabout = use_callback((), move |_, ()| {
         if let Some(backdropper) = &backdropper {
             backdropper.open(html!(<about::About/>));
         }
     });
 
-    let onthemeswitch = Callback::from(|state| match state {
+    let onthemeswitch = use_callback((), |state, ()| match state {
         true => gloo_utils::document_element().set_class_name("pf-v5-theme-dark"),
         false => gloo_utils::document_element().set_class_name(""),
     });

src/components/mod.rs

@@ -14,8 +14,8 @@ mod date;
 mod description_list;
 mod divider;
 mod drawer;
-mod dual_list_selector;
 mod dropdown;
+mod dual_list_selector;
 mod empty;
 mod expandable_section;
 mod file_upload;
@@ -41,6 +41,7 @@ mod title;
 mod toast;
 mod tooltip;
 mod tree;
+mod truncate;
 
 pub use accordion::*;
 pub use alert::*;
@@ -85,3 +86,4 @@ pub use title::*;
 pub use toast::*;
 pub use tooltip::*;
 pub use tree::*;
+pub use truncate::*;

src/components/truncate/mod.rs

@@ -0,0 +1,32 @@
+use crate::example;
+use crate::example::ExamplePage;
+use patternfly_yew::prelude::*;
+use yew::prelude::*;
+
+#[function_component(TruncateExample)]
+pub fn truncate_example() -> Html {
+    let example1 = example! ("Default" => "truncate.1.example");
+    let example2 = example! ("Start" => "truncate.2.example");
+    let example3 = example! ("Middle" => "truncate.3.example");
+    let example4 = example! ("Middle (explicit)" => "truncate.4.example");
+
+    #[function_component(Resize)]
+    fn resize(props: &ChildrenProperties) -> Html {
+        html!(
+            <div style="resize: horizontal; border: var(--pf-v5-global--BorderWidth--sm) solid var(--pf-v5-global--BorderColor--100); padding: var(--pf-v5-global--spacer--md); overflow: auto; width: 350px; max-width: 100%;">
+                { props.children.clone() }
+            </div>
+        )
+    }
+
+    html! (
+        <>
+            <ExamplePage title="Truncate">
+                {example1}
+                {example2}
+                {example3}
+                {example4}
+            </ExamplePage>
+        </>
+    )
+}

src/components/truncate/truncate.1.example

@@ -0,0 +1,7 @@
+{
+    html!(
+        <Resize>
+            <Truncate content="Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan." />
+        </Resize>
+    )
+}

src/components/truncate/truncate.2.example

@@ -0,0 +1,7 @@
+{
+    html!(
+        <Resize>
+            <Truncate content={"Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.".truncate_start()} />
+        </Resize>
+    )
+}

src/components/truncate/truncate.3.example

@@ -0,0 +1,7 @@
+{
+    html!(
+        <Resize>
+            <Truncate content={"Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.".truncate_before(10)} />
+        </Resize>
+    )
+}

src/components/truncate/truncate.4.example

@@ -0,0 +1,10 @@
+{
+    html!(
+        <Resize>
+            <Truncate content={TruncateContent::Middle(
+                "Vestibulum interdum risus et enim faucibus, sit amet molestie est".into(),
+                " accumsan.".into()
+            )} />
+        </Resize>
+    )
+}