+
-
+
)
diff --git a/__tests__/components/ProgressBar.test.js b/__tests__/components/ProgressBar.test.js
index ab624ca..75dd6b1 100644
--- a/__tests__/components/ProgressBar.test.js
+++ b/__tests__/components/ProgressBar.test.js
@@ -53,8 +53,6 @@ describe(' component', () => {
it('has styled-component rendered classes', () => {
const tree = renderer.create(result).toJSON();
- // console.log(tree);
-
expect(tree.children[0].props.className).toBeDefined();
});
diff --git a/__tests__/components/__snapshots__/CodePreTag.test.jsx.snap b/__tests__/components/__snapshots__/CodePreTag.test.jsx.snap
new file mode 100644
index 0000000..b06783f
--- /dev/null
+++ b/__tests__/components/__snapshots__/CodePreTag.test.jsx.snap
@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[` component renders children properly 1`] = `
+
+
+
+ function foo() {
+ return 'bar';
+ }
+
+
+
+`;
diff --git a/__tests__/components/__snapshots__/Header.test.js.snap b/__tests__/components/__snapshots__/Header.test.js.snap
index dcca459..f2d9352 100644
--- a/__tests__/components/__snapshots__/Header.test.js.snap
+++ b/__tests__/components/__snapshots__/Header.test.js.snap
@@ -7,9 +7,10 @@ exports[` component renders with DARK theme 1`] = `
border-radius: 50%;
cursor: pointer;
height: 2.5rem;
- margin: 0 0 0 1rem;
+ margin: 0.5rem 1.5rem 0 0;
outline: 0;
width: 2.5rem;
+ z-index: 10;
}
.c5 svg,
@@ -53,7 +54,7 @@ exports[` component renders with DARK theme 1`] = `
}
.c8 {
- font: 400 0.925rem 'Karla',sans-serif;
+ font: 400 0.875rem 'Karla',sans-serif;
color: #C8C8C8;
margin: 0.75rem 0 0;
}
@@ -89,6 +90,8 @@ exports[` component renders with DARK theme 1`] = `
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
+ margin: 1rem 0;
+ width: 100%;
}
.c3 {
@@ -125,6 +128,12 @@ exports[` component renders with DARK theme 1`] = `
color: #FFFFFF;
}
+@media (min-width:769px) {
+ .c5 {
+ margin: 0 0 0 1.5rem;
+ }
+}
+
@media (min-width:769px) {
.c0 {
-webkit-box-pack: justify;
@@ -134,6 +143,13 @@ exports[` component renders with DARK theme 1`] = `
}
}
+@media (min-width:541px) {
+ .c4 {
+ margin: 0;
+ width: auto;
+ }
+}
+
component renders with DARK theme 1`] = `
- implemented in JavaScript
+ “Gang of Four” patterns in JavaScript
@@ -240,9 +256,10 @@ exports[` component renders with LIGHT theme 1`] = `
border-radius: 50%;
cursor: pointer;
height: 2.5rem;
- margin: 0 0 0 1rem;
+ margin: 0.5rem 1.5rem 0 0;
outline: 0;
width: 2.5rem;
+ z-index: 10;
}
.c5 svg,
@@ -286,7 +303,7 @@ exports[` component renders with LIGHT theme 1`] = `
}
.c8 {
- font: 400 0.925rem 'Karla',sans-serif;
+ font: 400 0.875rem 'Karla',sans-serif;
color: #6F256F;
margin: 0.75rem 0 0;
}
@@ -322,6 +339,8 @@ exports[` component renders with LIGHT theme 1`] = `
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
+ margin: 1rem 0;
+ width: 100%;
}
.c3 {
@@ -358,6 +377,12 @@ exports[` component renders with LIGHT theme 1`] = `
color: #EDB8ED;
}
+@media (min-width:769px) {
+ .c5 {
+ margin: 0 0 0 1.5rem;
+ }
+}
+
@media (min-width:769px) {
.c0 {
-webkit-box-pack: justify;
@@ -367,6 +392,13 @@ exports[` component renders with LIGHT theme 1`] = `
}
}
+@media (min-width:541px) {
+ .c4 {
+ margin: 0;
+ width: auto;
+ }
+}
+
component renders with LIGHT theme 1`] = `
- implemented in JavaScript
+ “Gang of Four” patterns in JavaScript
diff --git a/__tests__/components/__snapshots__/Pattern.test.js.snap b/__tests__/components/__snapshots__/Pattern.test.js.snap
index f64f915..ea50dc4 100644
--- a/__tests__/components/__snapshots__/Pattern.test.js.snap
+++ b/__tests__/components/__snapshots__/Pattern.test.js.snap
@@ -1,5 +1,378 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
+exports[`REFERENCE - Pattern component renders the individual pattern (Prototype) details in LIGHT mode 1`] = `
+.c0 h2,
+.c0 h3 {
+ margin-top: 2.5rem;
+}
+
+.c2 {
+ display: block;
+ margin-bottom: 8px;
+ padding: 4px;
+ text-transform: uppercase;
+}
+
+.c3 {
+ text-transform: capitalize;
+}
+
+.c1 {
+ border-bottom: 1px solid;
+ display: inline-block;
+ margin-top: 2rem;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.c1:hover {
+ border-bottom: 1px solid transparent;
+}
+
+
+
+ ← Back to Patterns List
+
+
+ Prototype
+
+
+
+ Type:
+
+
+ creational
+ pattern
+
+
+
+
+ Definition:
+
+ Specify the kind of objects to create using a prototypical instance,
+ and create new objects by copying this prototype.
+
+
+
+ Use when…
+
+ …
+ classes to instantiate are available only in runtime
+ .
+
+
+ ES6
+
+
+
+
+
+ class
+
+
+
+ Sheep
+
+
+
+ {
+
+
+ constructor
+
+ (name, weight) {
+
+
+ this
+
+ .name = name;
+
+
+ this
+
+ .weight = weight;
+ }
+
+ clone() {
+
+
+ return
+
+
+
+ new
+
+ Sheep(
+
+ this
+
+ .name,
+
+ this
+
+ .weight);
+ }
+}
+
+
+
+ export
+
+
+
+ default
+
+ Sheep;
+
+
+
+ ES5
+
+
+
+
+
+ function
+
+
+
+ Sheep
+
+ (
+
+ name, weight
+
+ )
+
+ {
+
+
+ this
+
+ .name = name;
+
+
+ this
+
+ .weight = weight;
+}
+
+Sheep.prototype.clone =
+
+
+ function
+
+ (
+
+ )
+
+ {
+
+
+ return
+
+
+
+ new
+
+ Sheep(
+
+ this
+
+ .name,
+
+ this
+
+ .weight);
+};
+
+
+
+ module
+
+ .exports = Sheep;
+
+
+
diff --git a/__tests__/components/__snapshots__/Title.test.js.snap b/__tests__/components/__snapshots__/Title.test.js.snap
index d5c6ad4..a0e1c4a 100644
--- a/__tests__/components/__snapshots__/Title.test.js.snap
+++ b/__tests__/components/__snapshots__/Title.test.js.snap
@@ -18,7 +18,7 @@ exports[`
component renders with a DARK theme 1`] = `
}
.c2 {
- font: 400 0.925rem 'Karla',sans-serif;
+ font: 400 0.875rem 'Karla',sans-serif;
color: #C8C8C8;
margin: 0.75rem 0 0;
}
@@ -34,7 +34,7 @@ exports[` component renders with a DARK theme 1`] = `
- implemented in JavaScript
+ “Gang of Four” patterns in JavaScript
`;
@@ -57,7 +57,7 @@ exports[` component renders with a LIGHT theme 1`] = `
}
.c2 {
- font: 400 0.925rem 'Karla',sans-serif;
+ font: 400 0.875rem 'Karla',sans-serif;
color: #6F256F;
margin: 0.75rem 0 0;
}
@@ -73,7 +73,7 @@ exports[` component renders with a LIGHT theme 1`] = `
- implemented in JavaScript
+ “Gang of Four” patterns in JavaScript
`;
diff --git a/__tests__/components/__snapshots__/Toggle.test.js.snap b/__tests__/components/__snapshots__/Toggle.test.js.snap
index 99df5e7..1741692 100644
--- a/__tests__/components/__snapshots__/Toggle.test.js.snap
+++ b/__tests__/components/__snapshots__/Toggle.test.js.snap
@@ -7,9 +7,10 @@ exports[` renders JS toggle in DARK more 1`] = `
border-radius: 50%;
cursor: pointer;
height: 2.5rem;
- margin: 0 0 0 1rem;
+ margin: 0.5rem 1.5rem 0 0;
outline: 0;
width: 2.5rem;
+ z-index: 10;
}
.c0 svg,
@@ -36,6 +37,12 @@ exports[` renders JS toggle in DARK more 1`] = `
fill: #F2E8F2;
}
+@media (min-width:769px) {
+ .c0 {
+ margin: 0 0 0 1.5rem;
+ }
+}
+
renders JS toggle in LIGHT more 1`] = `
border-radius: 50%;
cursor: pointer;
height: 2.5rem;
- margin: 0 0 0 1rem;
+ margin: 0.5rem 1.5rem 0 0;
outline: 0;
width: 2.5rem;
+ z-index: 10;
}
.c0 svg,
@@ -103,6 +111,12 @@ exports[`
renders JS toggle in LIGHT more 1`] = `
fill: #F2E8F2;
}
+@media (min-width:769px) {
+ .c0 {
+ margin: 0 0 0 1.5rem;
+ }
+}
+
renders the MODE toggle in DARK mode 1`] = `
border-radius: 50%;
cursor: pointer;
height: 2.5rem;
- margin: 0 0 0 1rem;
+ margin: 0.5rem 1.5rem 0 0;
outline: 0;
width: 2.5rem;
+ z-index: 10;
}
.c0 svg,
@@ -170,6 +185,12 @@ exports[`
renders the MODE toggle in DARK mode 1`] = `
fill: #F2E8F2;
}
+@media (min-width:769px) {
+ .c0 {
+ margin: 0 0 0 1.5rem;
+ }
+}
+
renders the MODE toggle in LIGHT mode 1`] = `
border-radius: 50%;
cursor: pointer;
height: 2.5rem;
- margin: 0 0 0 1rem;
+ margin: 0.5rem 1.5rem 0 0;
outline: 0;
width: 2.5rem;
+ z-index: 10;
}
.c0 svg,
@@ -231,6 +253,12 @@ exports[`
renders the MODE toggle in LIGHT mode 1`] = `
fill: #F2E8F2;
}
+@media (min-width:769px) {
+ .c0 {
+ margin: 0 0 0 1.5rem;
+ }
+}
+
component 1`] = `
}
>
component 1`] = `
}
}
>
-
component 1`] = `
}
}
>
-
- Code ES5 - Prototype
-
-
+
+
+ Code ES5 - Prototype
+
+
+
`;
@@ -592,6 +607,7 @@ exports[`Game page - GAME - LIGHT style renders a
component 1`] = `
}
>
component 1`] = `
}
}
>
-
component 1`] = `
}
}
>
-
- Code ES5 - Prototype
-
-
+
+
+ Code ES5 - Prototype
+
+
+
`;
diff --git a/__tests__/pages/__snapshots__/Patterns.test.js.snap b/__tests__/pages/__snapshots__/Patterns.test.js.snap
index eb28cce..2d00123 100644
--- a/__tests__/pages/__snapshots__/Patterns.test.js.snap
+++ b/__tests__/pages/__snapshots__/Patterns.test.js.snap
@@ -16,6 +16,11 @@ exports[`Patterns page renders the Patterns list 1`] = `
margin-top: 2.5rem;
}
+.c0 h3 {
+ border-bottom: 1px solid;
+ padding-bottom: 1rem;
+}
+
diff --git a/__tests__/styles/__snapshots__/global.test.js.snap b/__tests__/styles/__snapshots__/global.test.js.snap
index 8807dc5..d81ef10 100644
--- a/__tests__/styles/__snapshots__/global.test.js.snap
+++ b/__tests__/styles/__snapshots__/global.test.js.snap
@@ -4,7 +4,7 @@ exports[`Global style renders with a DARK theme 1`] = `
-