> For the complete documentation index, see [llms.txt](https://openup.gitbook.io/cape-agulhas-app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://openup.gitbook.io/cape-agulhas-app/design-system/webflow-exports.md). # Webflow exports & changelog ## 2021-24-06 - App preview removal {% file src="/files/-McwYcnaMRZLY6lYGv3E" %} Webflow export {% endfile %} #### Changed: * Removed the app preview subtitle from the header nav.

## 2021-24-05 - richtext-image update {% file src="/files/-MaS4I-OOZWRZBNsxPw1" %} #### Changed: * Added `.richtext-image` to the export * Removed the reliance on a combo class for `.richtext-image`. * Updated documentation to reflect this change

## 2021-19-05 - image--richtext addition {% file src="/files/-Ma2GxZ8sxMUlvwma6BW" %} Webflow export {% endfile %} #### Added: * Added .image--richtext to the documentation and component library. * This class adds "height: auto;" to the .image class {% hint style="info" %} This may not be the best way to implement this feature. Based on dev feedback, we may be able to add "height: auto;" to the base .image class to make this class unnecessary. Please advise on this. {% endhint %} ## 2021-07-05 - Logo loading and button wrapping {% file src="/files/-M\_53gKGtDtqyAPGxMqp" %} Webflow export {% endfile %} #### Changed: * Set the loading behavior on `.nav-menu__logo` to "eager" so that it loads with the page rather than when it becomes visible. * Removed max-height on `.card.action-block` so that the label does not extend outside the button. {% hint style="warning" %} Please note that the changing of this max height will mean that we need to be careful about the length of button labels. They will grow to be as long as the label is and might cause UI/UX issues if not vetted. **Err on the side of short descriptive labels.** {% endhint %}

## 2021-04-21 - Form items and fontawesome removal {% file src="/files/-MYoA8xqAx2gLDXw0CWl" %} Webflow export {% endfile %} {% hint style="info" %} Feature preview: {% endhint %} #### Changed: * Removed label from `.form___input-block--large-field` (these labels must now be added manually above this component) * Removed font awesome fonts from the site. Now only icons created using the class approach will work. If you run into any issues with old styling that relied on the fonts, please let me know. #### Added: * Added .upload-images component to the component library as well as the documentation (see images)

* Added `.form__field-label` to the documentation and component library. This `.form__field-label` (if duplicated from the component library) will have the `` tag. * Added `.form__location-picker_expand` to the component library and documentation. This allows for the map location picker to be hidden by default and then expanded on request from the user. See the documentation for more information.

{% hint style="warning" %} Please stop using the `.label` component that is currently in the component library. Use the `.form__field-label` instead {% endhint %} ## 2021-04-08 - Remove location and pre-wrap paragraph {% file src="/files/-MXk6kPe5MiP4PkU81Dg" %} Pre-wrap and remove location {% endfile %} ### Fixed: * Removed the dummy map from `.map-container` ### Added: * Added `.paragraph--prewrap` to the component library based on this user story * Added `.map-remove-location` to the `.location-picker` component and documented it in the documentation here: * Added a `.map-loading` item to the `.map-container` which should be hidden once the map is loaded.

## 2021-04-06 - Tab Content Fix {% file src="/files/-MXeje9\_fy\_iPkTPP0m2" %} Tab content fix {% endfile %} ### Fixed: * Added elements to ensure the export html represents the structure outlined by Jaron ```

```

## 2021-04-06 - Location picker {% file src="/files/-MXaOjWRMevBgwaAh9JT" %} Location picker {% endfile %} {% hint style="info" %} Documentation link: Trello card: {% endhint %} ### Added: * Added `.location-picker` item to the component library and documented it on the documentation page.

{% hint style="info" %} Please note that the location picker does not have a heading or a prompt to drag the map to a specific location. This should be added based on the needs of the map. If this should be incorporated into the component, please let me know. {% endhint %} #### Location picker dev: * `.map-container` is where the leaflet map should be inserted. * Added the following css to the site in order to prevent users from being able to highlight and select the map pin element when swiping on the map: ``` /*Make map pin non-interactive*/ .map-pin { pointer-events: none; -webkit-user-select: none; /* Chrome all / Safari all */ -moz-user-select: none; /* Firefox all */ -ms-user-select: none; /* IE 10+ */ user-select: none; /* Likely future */ } ``` #### Location picker notes: * The location picker is for users to identify a location that might not be an address eg. the user wants to highlight a dam or a tree next to a road. * A user journey could be as follows: * User wants to locate a broken street lamp near them * The user knows the lamp is down the road from their house * They click "use my location" to center the map on their current GPS location * The user is prompted to allow the website to use their location (if they haven't already) * The map centers on their location * The then drags the map to position the map pin on the location of the lamp ## 2021-04-02 - Share button {% file src="/files/-MXGZhTG2vUoVxgZnaI1" %} Sharing menu {% endfile %} ### Fixed: * Adjusted the way that `.tab-links` display. They were filling the screen height before, which meant that when you tapped one, the entire height of the screen below the tab would be highlighted with the tap interaction. I have fixed this so now the tab is only highlighted at the top of the screen where it is visible. * Added `padding-bottom: 6px` to the bottom of `.tab-link` to make this fix work ### Changes: * Added sharing menu

{% hint style="warning" %} .share is hidden by default using a .hidden class and will not show up by default {% endhint %} #### Share menu interaction: * Tap on `.share__button` opens the menu and shows `.share__close` which is a fixed div that fills the entire screen so any tap outside the menu will close it. * Tapping a `.share__link` will also close the menu (and any functionality should be added on this click eg. linking to facebook sharing or opening the email client) * `.share-link`s have a class to describe their function (eg. facebook, email, copy-link etc.) * The `.share__link.copy-link` is the only link that doesn't close the menu, instead it plays a blinking animation saying "Link copied!" to let people know it has been copied to clipboard. The user will need to then click outside the menu to close it.

#### Share menu notes: * `.share__link_icon` is an SVG embed on the Webflow side so that the colour of the icon can be dynamically controlled. You can adjust this icon by changing the svg code. * `.share__link_alt` is only used on the `.copy-link` it is the alternate text that flashes when the link is clicked ## 2021-02-25 - Description truncation {% file src="/files/-MV0sgcskNBw5cKFzBb1" %} Description truncation {% endfile %} ### Changed: * Added `.truncate` class to `.h3-block-title` within `.link-block--subtitle-status` in order to prevent it from running onto multiple lines within the block * Added `overflow: hidden` to `.link-block__inner` to ensure truncation behaves correctly

truncate added to .h3-block-title within .link-block--subtitle-status

## 2021-02-25 - Form item changes {% file src="/files/-MUNXMpPdYC-TFT5aXEF" %} Form item changes {% endfile %} ### Rationale: These changes were implemented to make form more accessible and ### Changed: {% hint style="warning" %} Please note that there are spacing issues with the current form because form items are not being placed within `.form__inner` {% endhint %} {% hint style="info" %} Please note that **placeholder text in form items should now be example text** as apposed to a label. eg. John Smith, {% endhint %} * `.input-field` changed to `.form__input-field` and is now housed within`.form__input-block` to accommodate the default `.form__field-label` that will accompany each `.form__input-field` * `.field-label` changed to `.form__field-description` to avoid confusion now that there is an explicit field label that appears above the input field * `.form__input-field--label` changed to `.form__input-block--description` to avoid confusion and keep the concept of the "input-block" consistent. * `.form__input-field--large` is now housed within `.form__input-block--large-field` to accommodate the default `.form__field-label` that will accompany each input field

Structure of form__input-block--large-field

* Added `.form__legend-block` to be used as "headings" for form input groupings * Added `.form__legend-block--label` to be used when heading description labels are required eg. \*Required

## 2021-02-17 - Added grid--default to component library {% file src="/files/-MTiZR5oY1XWMHI\_v3NH" %} Added grid--default to component library {% endfile %} ### Changed: #### Added grid--default to component library: * Removed grid--fullwidth from component library * Added grid--default to component library ## 2021-02-12 - Status alerts and placeholder messages {% file src="/files/-MTK\_9yw\_biU7NN3Z3An" %} Status alerts and placeholder message {% endfile %} ### **Associated designs:** {% embed url="" %} {% hint style="info" %} Documentation: {% endhint %} ### Changelog: * Created component `.basic-block--placeholder` for lists that do not have any items * Created component `.basic-block--status` for success/warning/failure messages

## 2021-02-10 - Service requests {% file src="/files/-MTANkDq5R9KFlo2xST\_" %} citizen-engagement-app.webflow (service-requests - 02102021) {% endfile %} ### **Associated designs:** ### Changelog: * Created component ".form\_\_input-field--large" for "Service request description" * Created component ".link-block--subtitle-status" for "My service requests" * Created component ".dropdown" for "Ward" and "Service area of request" * Created component ".label" ### Documentation: {% embed url="" %} {% file src="/files/-MSlDylmtwbh06EmblBa" %}