# FloTypographySelect

Flo Typography Select is a component to choose typography from theme style kit or custom font from google fonts

## Usage

``` declare variable in php
'titleTypography' => array(
        'type'    => 'object',
        'default' => Flo_Guten_Blocks_Helper::get_default_typography_attributes('third_level/overline_2')
),
param - default theme value

```jsx edit
import { FloTypographySelect } from "components"

<FloTypographySelect
    label = { __("Title Typography")}
    value = { titleTypography }
    onChange={ ( value ) => setAttributes( { titleTypography : value } ) }
/>

## Props

### `title`

-   Type: `Text`
-   Required: Yes

Title of component

### `value`

-   Type: `Object`
-   Required: Yes

Color. Should be an object containing `theme` or custom font properties.

### `onChange`

-   Type: `Function`
-   Required: Yes

Callback which is called when the typography changes.


```jsx view
import { LoadGoogleFonts, getStyleForTypography } from 'components/typography-select/utils';

const style = {
    ...getStyleForTypography( 'post-title', titleTypography),
}

...
return (
    <>
    <LoadGoogleFonts 
        typographies={[titleTypography]} 
    />
    <div style = {style}
        <h2 data-font={ titleTypography.type=='theme' ? titleTypography.theme : '' }>{title}</h2>
    </div>
    </>
)
...

``` in php view in block style params

style="
<?php echo Flo_Guten_Blocks_Helper::get_style_for_typography( 'post-title', $titleTypography)?>
"

``` in style.scss
font-family: var(--post-title-font-family);
font-size: var(--post-title-font-size);
line-height: var(--post-title-line-height);
letter-spacing: var(--post-title-letter-spacing);
font-style: var(--post-title-font-style);
font-weight: var(--post-title-font-weight);