README.md

Landmrk-Stay

Components

"Components.Share.Badge"

"Components.Download.Badge"

"Components.BadgeGenerator"

"Components.BadgeList"

"Components.BadgeList.Item"

"Components.BadgeList.Progress"

"Components.UserBadgeList"

"Components.UserBadgeList.Item"

"Components.UserBadgeList.NoAuth"

"Components.Criteria.Item"

Props are required for the ActionCriterium.

"props": {
  "autoComplete": true, // if there is no requirement to complete criteria
  "onClick": true // click anywhere in the child to complete criteria
  "onScrollEnd": true // scroll to the end of a div to complete criteria. "Overflow" is needed in the styling
  "onChange": true // if an onChange event happens in the child, the criteria will be completed

"Components.Select"

"Components.Select.Item"

"Components.Input"

"props": {
  "id": "distance", // @required
  "key": "distance", // @required
  "required": true, // if a value is required to complete criteria
  "type": "number",

generating badge design

This design is for the screen that displays the generated badge.

E.G.

{
  "component": "Layout.Center",
  "props": {
    "style": {
      "backgroundColor": "violet"
    }
  },
  "children": [
    {
      "component": "Components.Badge.BadgeGenerator",
      "props": {
        "hideDownload": false,
        "hideShare": false,
        "style": {
          "height": 500
        },
        "canvasProps": {
          "style": {
            "transform": "scale(0.7)",
            "transformOrigin": "top left"
          }
        },
        "buttonWrapper": {
          "style": {
            "display": "flex",
            "justifyContent": "space-around",
            "padding": 20
          }
        },
        "buttonProps": {
          "style": {
            "width": 140,
            "height": 45,
            "backgroundColor": "#FFF",
            "fontSize": 15,
            "fontWight": "bold",
            "color": "#000",
            "fontFamily": "Roboto",
            "border": "none",
            "border-radius": 45,
            "boxShadow": "0px 8px 15px rgba(0,0,0,0.1)",
            "padding": 10
          }
        }
      }
    }
  ]
}

Buttons design

The buttons design is for the two buttons at the bottom of the Badges screens. The "Next" button and the "Finish" button. The nextButton requires two children in a specific order. children: ["Next, "Generated Badge"]. The nextButton text will change on the final piece of criteria before the generating badge design screen.

E.G.

{
  "nextButton": {
    "props": {
      "style": {
        "backgroundColor": "green"
      }
    },
    "children": ["Continue", "Generate Your Badge"]
  },
  "finishButton": {
    "props": {
      "style": {
        "backgroundColor": "indigo"
      }
    },
    "children": "Finished"
  }
}