- Card
+
+
{text}
+
+ {emojis.getUnicode(`${emoji}`)}
+
+
- )
-}
+ );
+};
Card.propTypes = {
-
+ id: PropTypes.number,
+ text: PropTypes.string,
+ emoji: PropTypes.string,
+ deleteCardCallback: PropTypes.func,
};
export default Card;
diff --git a/src/components/NewCardForm.css b/src/components/NewCardForm.css
index d11b9ad4..965764c3 100644
--- a/src/components/NewCardForm.css
+++ b/src/components/NewCardForm.css
@@ -1,9 +1,11 @@
-/* The Modal (background) */
-
.new-card-form {
width: 50%;
margin: auto;
padding-bottom: 4rem;
+ margin-left: auto;
+ margin-right: auto;
+ align-items: center;
+ justify-content: center;
}
.new-card-form__header {
@@ -14,27 +16,117 @@
.new-card-form__form {
font-size: 1.5em;
display: grid;
- grid-template-columns: [labels] auto [controls] 1fr;
+ grid-template-columns: auto auto auto;
grid-auto-flow: row;
- grid-gap: .8em;
-}
-
-.new-card-form__form-label {
- grid-column: labels;
- grid-row: auto;
+ grid-gap: 0.8em;
}
-.new-card-form__form-select,
.new-card-form__form-textarea,
.new-card-form__form-button {
- font-family: 'Raleway', sans-serif;
+ font-family: "Raleway", sans-serif;
font-size: 1.25em;
- grid-column: controls;
grid-row: auto;
}
+.new-card-form__form-select {
+ font-family: "Raleway", sans-serif;
+ font-size: 0.70em;
+ /* padding:10px 10px 10px 5px; */
+ display:block;
+ width:200px;
+ height: auto;
+ border:none;
+ grid-row: auto;
+}
+
+
.new-card-form__form-button {
- background-color: inherit;
+ background-color: black;
border: 1px solid black;
font-size: 1em;
+ font-family: 'Permanent Marker';
+ color: white;
+ display: block;
+ height: auto;
+ padding:10px 10px 10px 5px;
+}
+
+.new-card-form__form-button:hover {
+ background-color: white;
+ color: black;
+}
+
+/* for "your message text input" */
+/* source: https://codepen.io/chrisoncode/pen/IdGKH */
+/* form starting stylings ------------------------------- */
+.group {
+ position:relative;
+ margin-bottom:45px;
+}
+input {
+ font-size:18px;
+ padding:10px 10px 10px 5px;
+ display:block;
+ width:300px;
+ border:none;
+ border-bottom:1px solid #333;
+}
+input:focus { outline:none; }
+
+
+/* BOTTOM BARS ================================= */
+.bar { position:relative; display:block; width:300px; }
+.bar:before, .bar:after {
+ content:'';
+ height:2px;
+ width:0;
+ bottom:1px;
+ position:absolute;
+ background:#5264AE;
+ transition:0.2s ease all;
+ -moz-transition:0.2s ease all;
+ -webkit-transition:0.2s ease all;
+}
+.bar:before {
+ left:50%;
+}
+.bar:after {
+ right:50%;
+}
+
+/* active state */
+input:focus ~ .bar:before, input:focus ~ .bar:after {
+ width:50%;
+}
+
+/* HIGHLIGHTER ================================== */
+.highlight {
+ position:absolute;
+ height:60%;
+ width:100px;
+ top:25%;
+ left:0;
+ pointer-events:none;
+ opacity:0.5;
+}
+
+/* active state */
+input:focus ~ .highlight {
+ -webkit-animation:inputHighlighter 0.3s ease;
+ -moz-animation:inputHighlighter 0.3s ease;
+ animation:inputHighlighter 0.3s ease;
+}
+
+/* ANIMATIONS ================ */
+@-webkit-keyframes inputHighlighter {
+ from { background:#ffff88; }
+ to { width:0; background:transparent; }
+}
+@-moz-keyframes inputHighlighter {
+ from { background:#ffff88; }
+ to { width:0; background:transparent; }
}
+@keyframes inputHighlighter {
+ from { background:#ffff88; }
+ to { width:0; background:transparent; }
+}
\ No newline at end of file
diff --git a/src/components/NewCardForm.js b/src/components/NewCardForm.js
index 47331423..70427aba 100644
--- a/src/components/NewCardForm.js
+++ b/src/components/NewCardForm.js
@@ -1,6 +1,81 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import emoji from 'emoji-dictionary';
-import './NewCardForm.css';
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import "./NewCardForm.css";
+import emojis from 'emoji-dictionary';
-const EMOJI_LIST = ["", "heart_eyes", "beer", "clap", "sparkling_heart", "heart_eyes_cat", "dog"]
+
+const EMOJI_LIST = ["", "heart_eyes", "beer", "clap", "sparkling_heart", "dog", "heart_eyes_cat"]
+
+const NewCardForm = ({addCardCallback}) => {
+ const [cardFields, setCardFields] = useState({
+ text: "",
+ emoji: "",
+ });
+
+ const onInputChange = (event) => {
+ const newCardFields = {
+ ...cardFields,
+ };
+ newCardFields[event.target.name] = event.target.value;
+ setCardFields(newCardFields);
+ };
+
+ const onFormSubmit = (event) => {
+ event.preventDefault();
+
+ addCardCallback(cardFields);
+
+ setCardFields({
+ text: "",
+ emoji: "",
+ });
+ };
+
+ return (
+
+ Submit your own card~
+
+
+ );
+};
+
+NewCardForm.propTypes = {
+ addCardCallback: PropTypes.func
+};
+
+export default NewCardForm;
diff --git a/src/components/__snapshots__/Board.test.js.snap b/src/components/__snapshots__/Board.test.js.snap
new file mode 100644
index 00000000..1c3e95df
--- /dev/null
+++ b/src/components/__snapshots__/Board.test.js.snap
@@ -0,0 +1,130 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Board will render properly 1`] = `
+
+
+
+`;
+
+exports[`Board will render the NewCardForm properly 1`] = `
+
+
+
+`;
+
+exports[`Board will render the add properly 1`] = `
+
+
+
+`;
diff --git a/src/components/test/Card.test.js b/src/components/test/Card.test.js
new file mode 100644
index 00000000..18ca73ae
--- /dev/null
+++ b/src/components/test/Card.test.js
@@ -0,0 +1,50 @@
+import React from 'react';
+import { render, cleanup } from '@testing-library/react'
+import Card from '../Card';
+
+describe('Card', () => {
+ test('that it matches the existing snapshot', () => {
+ // Arrange-Act
+ const { asFragment } = render(
+
{ }}
+ />
+ )
+ // Assert
+ expect(asFragment()).toMatchSnapshot();
+ cleanup();
+ });
+
+ test('The "DeleteCardCallback" prop function is called when the `✨Take This Card✨` button is clicked on', () => {
+
+ // Arrange
+ // Create a mock callback function
+ const takeThisCard = jest.fn();
+
+ // Render card
+ const container = render(
+
+ );
+
+ // Act
+ // Find the Mark Absent Button
+ const button = container.getByText(/✨ Take this card ✨/i);
+
+ // Trigger a click event
+ button.click();
+
+ // Assert
+ // Verify that the callback function was called
+ expect(takeThisCard).toHaveBeenCalled();
+ });
+});
\ No newline at end of file
diff --git a/src/components/test/NewCardForm.test.js b/src/components/test/NewCardForm.test.js
new file mode 100644
index 00000000..d75f2bc6
--- /dev/null
+++ b/src/components/test/NewCardForm.test.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import { render, cleanup, fireEvent, getByTestId } from '@testing-library/react';
+import NewCardForm from '../NewCardForm';
+
+describe('NewCardForm', () => {
+ test('that it matches the existing snapshot', () => {
+ // Arrange-Act
+ const { asFragment } = render(
+ { }}
+ />
+ );
+
+ // Assert
+ expect(asFragment()).toMatchSnapshot();
+ cleanup();
+ });
+
+});
\ No newline at end of file
diff --git a/src/components/test/__snapshots__/Card.test.js.snap b/src/components/test/__snapshots__/Card.test.js.snap
new file mode 100644
index 00000000..a9464bb7
--- /dev/null
+++ b/src/components/test/__snapshots__/Card.test.js.snap
@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Card that it matches the existing snapshot 1`] = `
+
+
+
+ Are you a git repository? Because I would commit to you.
+
+
+ 🌌
+
+
+