implemented readonly property for form components

[jlamanskygitt]

Implemented readonly & created stories for all form fields except:
dt-button
dt-copy-text
dt-file-upload
dt-label

Some weren't changed much visually, including:
dt-church-health-circle
dt-toggle
dt-multi-select-button-group

Resolves #171

[netlify]

✅ Deploy Preview for jade-chebakia-17493f ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	ec42e24
🔍 Latest deploy log	https://app.netlify.com/projects/jade-chebakia-17493f/deploys/6a1dbd0973a6a90008b0e556
😎 Deploy Preview	https://deploy-preview-202--jade-chebakia-17493f.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[cairocoder01]

@jlamanskygitt This is looking great! Nice work so far. A few things from my testing:

• For the location-meta field, it would be great to have a link to be able to view the location, like the mock-up below. It can open the same map modal that is opened for the editable version
• The issue had a note about components that are marked both readonly and disabled, that they wouldn't show the edit pencil and wouldn't be able to go into edit mode. It looks like the functionality for that works. Can we add stories for that too?
• Can the readonly version of multi-select-button-group show the same as the readonly of the multi-select so that it doesn't show the button UI?
• dt-text-multi shows the plus icon instead of the edit icon for readonly
• For dt-text-multi, there is a type attribute that can be used to set the type of all the text inputs. If that is "email," we should show the values as mailto: links. If it is "tel," we should show the readonly values as tel: links. See mockup below.
• For connections and users-connection, there is an option to pass a link with each value that could link to the connected record. Can we add that to at least one of the values in the story and make sure the link is clickable.
• Can you add another story under All Components that shows all of them in readonly mode, just like there's one that shows all of them in disabled mode?

[cairocoder01]

• The location meta icons are great, but the vertical alignment is not quite centered with the text. This should be checked for the phone/email icons too.

• Thanks for adding the Readonly view for All Components. But it's not as helpful unless the fields actually have values to display. Can you give at least one or two values to each field?
• Multi-select-button-group has optional icons in each button. If the button has an icon, can we show it in the readonly view as well?
• For the multi-text email/phone links, the type I was referring to was the type attribute on the component itself, not on the value. Every value in a multi-text field will have the same type. So all emails or all phone or all text.
• For tel: links, I think we need to strip all the spaces from the phone number based on the standards it expects.

[jlamanskygitt]

@cairocoder01 I updated styling for the icons & added values to the all items stories. Please review and let me know your feedback

[cairocoder01]

@jlamanskygitt This looks great! Only one small tweak for the position of the multi-select-button-group icons.

Also, I pushed one commit for the tile component to remove the bold styling it was causing on the All Components - Read Only story.