Merge pull request #304 from CivicDataLab/rutu_layout

Layout and Icons documentation

packages/opub-ui/docs/Foundations/Layout.mdx

@@ -1 +1,91 @@
 # Layout
+
+Layout in the OPub DS determines the placement, positioning, and organisation of various components within the UI, such as buttons, menus, content sections, visualisation and other elements.
+
+## Overview
+
+OPub is more of a software, not a website. It needs to be treated as such. Elements need to be given hierarchy based on their importance to the user.\
+Use layout to direct attention to the action/data that the users need to prioritise.
+
+### Baseline Grid
+
+Layouts use a standardised grid and spacing system based on multiples of four. This creates consistent interfaces across all screen sizes available today. \
+Still, responsive screens must be prioritised while creating layout.
+
+**Layouts use a baseline 4-pixel grid or multiples of it.**
+
+![8-pixel grid layout](./Layout_1.png)
+_8-pixel grid_
+
+![4-pixel grid layout](./Layout_2.png)
+_4-pixel grid_
+
+The 4-pixel grid should be used for detailed elements within components including input labels, buttons, and icons.
+
+While creating overall page layouts to define page sections and component placements, multiples like the 8-pixel grid can be used.
+
+### Responsive Layout
+
+As products take a mobile first approach, a responsive layout is essential. Use columns, margins and gutters to ensure a clean, aligned layout.
+
+![Columns, Margins, Gutters](./Layout_3.png)
+_Columns, Margins, Gutters_
+
+Use columns, margins and gutters to space out content in the display. A basic 12 or 4 column layout is used in oPub.
+
+## Building Layouts
+
+Pages within OPub are built as a combination of multiple different components like cards, popovers, navigation bars, tables, etc. The arrangement of these components define the hierarchy and purpose of a page.
+
+### Surfaces
+
+Surfaces within OPub contain other elements like tags, text boxes, data visualisations, etc. These surfaces need to be designed with responsiveness in mind.
+
+Ensure that information dense surfaces have visual separation within the elements. Use divider lines or colours to create separation.
+
+For nested surfaces, grouping is used along with colour to create visual separation.
+
+**DO: For nesting, ensure that the border radiuses of the nested surfaces are reduced to create a cleaner nested look.**
+![Corner rounding specifications for nested surfaces](./Layout_4.png)
+
+## Information Density
+
+Information density can be increased or decreased by changing a layout’s spacing dimensions. High density layouts are useful when users need to scan, view, or compare a lot of information, such as in a data table. Increasing the layout density of lists, tables, and long forms makes more content available on-screen.
+
+However, it needs to be ensured that a higher density doesn’t handicap the user from accessing important information and performing key functions.
+
+### Visual Separation in high density layouts
+
+Visual separation of sections within an information dense space is essential. To create visual cohesion while having a denser layout, use grids or vertical columns to divide surfaces.
+
+Create visual separation by using different surface color and dividers.
+
+![Visual separation in use](./Layout_5.png)
+
+**DO: Balance out the information on screen by providing sections with lower information density to draw user attention.\
+DON'T: Use dividers for nested surfaces, use colours for visual separation instead.**
+
+### Interaction in high density layouts
+
+Due to the accessibility of interaction targets being essential in web design, the density of interactive components needs to be treated carefully.
+
+For individual components\
+**DON'T: Apply density to interaction targets, to avoid accessibility getting hampered.\
+DO: Ensure that all interaction targets are a minimum of 24px.**
+
+For grouped components\
+**DO: Use the spacing requirements for interactivity to define a minimum width and height for the components.\
+DO: Ensure proper spacing, based on the 4-pixel grid.**
+
+## Tokens
+
+![Spacing tokens](./Layout_6.png)
+
+Use spacing tokens when defining space around and within elements to ensure consistency in the UI.
+
+The OPub Design System is currently equipped with primitive tokens.\
+These are generic tokens which you can apply to provide spacing. They give access to the full range of spacing values within OPub for creating spacing consistency within OPub.
+
+Each is simply named by declaring the token group and then the numerical multiplier of our base value of 4px. Therefore, space#05 is equal to 2px while space#4 equals 16px.
+
+In Figma, the primitive space tokens are accessed as variables via the auto layout padding and gap inputs in the right panel.

packages/opub-ui/docs/Styles/Icons.md

@@ -1 +1,47 @@
 # Icons
+
+oPub supports the full range of Tabler icons in stroke width 2px. These icons can be used as both ‘stroke-only’ or ‘filled’ depending on the use case of the product.
+
+![Tabler Icons](./Icons_1.png)
+
+Find the Tabler icons [here](https://tabler.io/icons).
+
+## Icon Usage
+
+Use icons with and without supporting text to convey information and use case for various components.\
+Ensure that in cases where supported text is required in information dense layouts, tooltips are provided for the icons.\
+While using icons to support text, ensure that the icon isn't aligned with the text baseline. Horizontally centre the icon with the text instead.
+
+Keep minimum icon size at __24px__. Anything lesser than that will hinder accessibility.
+
+## Making Custom Icons
+
+*In case icons need to be created for specific requirements, a few guidelines are to be followed.*
+
+### Icon Sizing
+
+The space of __24px__ is considered the target area for an icon.\
+Icon content should remain inside of the target area, ideally within __20px__ of the target area, leaving a __2px__ trim.
+
+![Icon target area and trim](./Icons_2.png)
+
+If additional visual weight is needed, content may extend into the padding between the target area and the trim area.\
+ __No parts of the icon should extend outside of the trim area.__
+
+![Icon within trim area](./Icons_3.png)
+
+### Icon Style
+
+A few style rules to follow when making custom icons
+
+- make icons simple and 2-dimensional.
+- ensure consistent stroke width of 2px for all icons.
+- keep the exterior corner rounding at 2px.
+
+![Icon exterior corner rounding](./Icons_4.png)
+
+- interior corner rounding can be varied based on icon complexity.
+
+![Icon interior corner rounding](./Icons_5.png)
+
+- in case of filled icons, ensure that the negative counter strokes are also 2px.

packages/opub-ui/src/components/ShareDialog/ShareDialog.stories.tsx

@@ -24,7 +24,6 @@ export const Default: Story = {
       fetch(image)
         .then((response) => response.blob())
         .then(async (blob) => {
-          console.log(blob);
           await navigator.clipboard
             .write([
               new ClipboardItem({