Repository: maragudk/gomponents
Pull request #67 (2021-05-05 07:19:14)

Add svg package and a few helpers
Introducing SVG, to inline vector graphics in your HTML! 🥳

codecov[bot]: # [Codecov](https://codecov.io/gh/maragudk/gomponents/pull/67?src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=maragudk) Report
> Merging [#67](https://codecov.io/gh/maragudk/gomponents/pull/67?src=pr&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=maragudk) (8288ce2) into [master](https://codecov.io/gh/maragudk/gomponents/commit/3b7dceab897709fe8243c605adea90ee771c49ff?el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=maragudk) (3b7dcea) will **not change** coverage.
> The diff coverage is `100.00%`.

[![Impacted file tree graph](https://codecov.io/gh/maragudk/gomponents/pull/67/graphs/tree.svg?width=650&height=150&src=pr&token=JYN032TYAC&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=maragudk)](https://codecov.io/gh/maragudk/gomponents/pull/67?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=maragudk)

```diff
@@            Coverage Diff            @@
##            master       #67   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files            6         8    +2     
  Lines          244       252    +8     
=========================================
+ Hits           244       252    +8     
```


| [Impacted Files](https://codecov.io/gh/maragudk/gomponents/pull/67?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=maragudk) | Coverage Δ | |
|---|---|---|
| [svg/attributes.go](https://codecov.io/gh/maragudk/gomponents/pull/67/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=maragudk#diff-c3ZnL2F0dHJpYnV0ZXMuZ28=) | `100.00% <100.00%> (ø)` | |
| [svg/elements.go](https://codecov.io/gh/maragudk/gomponents/pull/67/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=maragudk#diff-c3ZnL2VsZW1lbnRzLmdv) | `100.00% <100.00%> (ø)` | |

------

[Continue to review full report at Codecov](https://codecov.io/gh/maragudk/gomponents/pull/67?src=pr&el=continue&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=maragudk).
> **Legend** - [Click here to learn more](https://docs.codecov.io/docs/codecov-delta?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=maragudk)
> `Δ = absolute <relative> (impact)`, `ø = not affected`, `? = missing data`
> Powered by [Codecov](https://codecov.io/gh/maragudk/gomponents/pull/67?src=pr&el=footer&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=maragudk). Last update [3b7dcea...8288ce2](https://codecov.io/gh/maragudk/gomponents/pull/67?src=pr&el=lastupdated&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=maragudk). Read the [comment docs](https://docs.codecov.io/docs/pull-request-comments?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=maragudk).


Patch:
diff --git a/svg/attributes.go b/svg/attributes.go
new file mode 100644
index 0000000..10b7c69
--- /dev/null
+++ b/svg/attributes.go
@@ -0,0 +1,29 @@
+package svg
+
+import (
+	g "github.com/maragudk/gomponents"
+)
+
+func ClipRule(v string) g.Node {
+	return g.Attr("clip-rule", v)
+}
+
+func D(v string) g.Node {
+	return g.Attr("d", v)
+}
+
+func Fill(v string) g.Node {
+	return g.Attr("fill", v)
+}
+
+func FillRule(v string) g.Node {
+	return g.Attr("fill-rule", v)
+}
+
+func Stroke(v string) g.Node {
+	return g.Attr("stroke", v)
+}
+
+func ViewBox(v string) g.Node {
+	return g.Attr("viewBox", v)
+}
diff --git a/svg/elements.go b/svg/elements.go
new file mode 100644
index 0000000..98db644
--- /dev/null
+++ b/svg/elements.go
@@ -0,0 +1,15 @@
+// Package svg provides common SVG elements and attributes.
+// See https://developer.mozilla.org/en-US/docs/Web/SVG/Element for an overview.
+package svg
+
+import (
+	g "github.com/maragudk/gomponents"
+)
+
+func Path(children ...g.Node) g.Node {
+	return g.El("path", children...)
+}
+
+func SVG(children ...g.Node) g.Node {
+	return g.El("svg", g.Attr("xmlns", "http://www.w3.org/2000/svg"), g.Group(children))
+}


Test patch:
diff --git a/svg/attributes_test.go b/svg/attributes_test.go
new file mode 100644
index 0000000..41935e8
--- /dev/null
+++ b/svg/attributes_test.go
@@ -0,0 +1,28 @@
+package svg_test
+
+import (
+	"fmt"
+	"testing"
+
+	g "github.com/maragudk/gomponents"
+	"github.com/maragudk/gomponents/assert"
+	. "github.com/maragudk/gomponents/svg"
+)
+
+func TestSimpleAttributes(t *testing.T) {
+	cases := map[string]func(string) g.Node{
+		"clip-rule": ClipRule,
+		"d":         D,
+		"fill":      Fill,
+		"fill-rule": FillRule,
+		"stroke":    Stroke,
+		"viewBox":   ViewBox,
+	}
+
+	for name, fn := range cases {
+		t.Run(fmt.Sprintf(`should output %v="hat"`, name), func(t *testing.T) {
+			n := g.El("element", fn("hat"))
+			assert.Equal(t, fmt.Sprintf(`<element %v="hat"></element>`, name), n)
+		})
+	}
+}
diff --git a/svg/elements_test.go b/svg/elements_test.go
new file mode 100644
index 0000000..1b5e9d8
--- /dev/null
+++ b/svg/elements_test.go
@@ -0,0 +1,29 @@
+package svg_test
+
+import (
+	"fmt"
+	"testing"
+
+	g "github.com/maragudk/gomponents"
+	"github.com/maragudk/gomponents/assert"
+	. "github.com/maragudk/gomponents/svg"
+)
+
+func TestSimpleElements(t *testing.T) {
+	cases := map[string]func(...g.Node) g.Node{
+		"path": Path,
+	}
+
+	for name, fn := range cases {
+		t.Run(fmt.Sprintf("should output %v", name), func(t *testing.T) {
+			n := fn(g.Attr("id", "hat"))
+			assert.Equal(t, fmt.Sprintf(`<%v id="hat"></%v>`, name, name), n)
+		})
+	}
+}
+
+func TestSVG(t *testing.T) {
+	t.Run("outputs svg element with xml namespace attribute", func(t *testing.T) {
+		assert.Equal(t, `<svg xmlns="http://www.w3.org/2000/svg"><path></path></svg>`, SVG(g.El("path")))
+	})
+}