How to use Typography method in storybook-root

Best JavaScript code snippet using storybook-root

field_typography_json.js

Source:field_typography_json.js

1/*global redux_change, redux*/2/**3 * Typography4 * Dependencies:        google.com, jquery, select25 * Feature added by:    Dovy Paukstys - http://simplerain.com/6 * Date:                06.14.20137 *8 * Rewrite:             Kevin Provance (kprovance)9 * Date:                May 25, 201410 */11(function( $ ) {12    "use strict";13    redux.field_objects = redux.field_objects || {};14    redux.field_objects.typography = redux.field_objects.typography || {};15    var selVals = [];16    var isSelecting = false;17    var default_params = {18        width: 'resolve',19        triggerChange: true,20        allowClear: true21    };22    $( document ).ready(23        function() {24            //redux.field_objects.typography.init();25        }26    );27    redux.field_objects.typography.init = function( selector, skipCheck ) {28        if ( !selector ) {29            selector = $( document ).find( ".redux-group-tab:visible" ).find( '.redux-container-typography:visible' );30        }31        $( selector ).each(32            function() {33                var el = $( this );34                var parent = el;35                if ( !el.hasClass( 'redux-field-container' ) ) {36                    parent = el.parents( '.redux-field-container:first' );37                }38                if ( parent.is( ":hidden" ) ) { // Skip hidden fields39                    return;40                }41                if ( parent.hasClass( 'redux-field-init' ) ) {42                    parent.removeClass( 'redux-field-init' );43                } else {44                    return;45                }46                var fontClear;47                el.each(48                    function() {49                        // init each typography field50                        $( this ).find( '.redux-typography-container' ).each(51                            function() {52                                var family = $( this ).find( '.redux-typography-family' );53                                if ( family.data( 'value' ) === undefined ) {54                                    family = $( this );55                                } else if ( family.data( 'value' ) !== "" ) {56                                    $( family ).val( family.data( 'value' ) );57                                }58                                var select2_handle = $( this ).find( '.select2_params' );59                                if ( select2_handle.size() > 0 ) {60                                    var select2_params = select2_handle.val();61                                    select2_params = JSON.parse( select2_params );62                                    default_params = $.extend( {}, default_params, select2_params );63                                }64                                fontClear = Boolean( $( this ).find( '.redux-font-clear' ).val() );65                                redux.field_objects.typography.select( family, true );66                                window.onbeforeunload = null;67                            }68                        );69                        //init when value is changed70                        $( this ).find( '.redux-typography' ).on(71                            'change', function() {72                                redux.field_objects.typography.select( $( this ) ); //.parents('.redux-container-typography:first'));73                            }74                        );75                        //init when value is changed76                        $( this ).find( '.redux-typography-size, .redux-typography-height, .redux-typography-word, .redux-typography-letter, .redux-typography-align, .redux-typography-transform, .redux-typography-font-variant, .redux-typography-decoration' ).keyup(77                            function() {78                                redux.field_objects.typography.select( $( this ).parents( '.redux-container-typography:first' ) );79                            }80                        );81                        // Have to redeclare the wpColorPicker to get a callback function82                        $( this ).find( '.redux-typography-color' ).wpColorPicker(83                            {84                                change: function( e, ui ) {85                                    $( this ).val( ui.color.toString() );86                                    redux.field_objects.typography.select( $( this ).parents( '.redux-container-typography:first' ) );87                                }88                            }89                        );90                        // Don't allow negative numbers for size field91                        $( this ).find( ".redux-typography-size" ).numeric(92                            {93                                allowMinus: false94                            }95                        );96                        // Allow negative numbers for indicated fields97                        $( this ).find( ".redux-typography-height, .redux-typography-word, .redux-typography-letter" ).numeric(98                            {99                                allowMinus: true100                            }101                        );102                        // select2 magic, to load font-family dynamically103                        var data = [{id: 'none', text: 'none'}];104                        $( this ).find( ".redux-typography-family" ).select2(105                            {106                                matcher: function( term, text ) {107                                    return text.toUpperCase().indexOf( term.toUpperCase() ) === 0;108                                },109                                query: function( query ) {110                                    return window.Select2.query.local( data )( query );111                                },112                                initSelection: function( element, callback ) {113                                    var data = {id: element.val(), text: element.val()};114                                    callback( data );115                                },116                                allowClear: fontClear,117                                // when one clicks on the font-family select box118                            }119                        ).on(120                            "select2-opening", function( e ) {121                                // Get field ID122                                var thisID = $( this ).parents( '.redux-container-typography:first' ).attr( 'data-id' );123                                // User included fonts?124                                var isUserFonts = $( '#' + thisID + ' .redux-typography-font-family' ).data( 'user-fonts' );125                                isUserFonts = isUserFonts ? 1 : 0;126                                // Google font isn use?127                                var usingGoogleFonts = $( '#' + thisID + ' .redux-typography-google' ).val();128                                usingGoogleFonts = usingGoogleFonts ? 1 : 0;129                                // Set up data array130                                var buildData = [];131                                // If custom fonts, push onto array132                                if ( redux.customfonts !== undefined ) {133                                    buildData.push( redux.customfonts );134                                }135                                // If standard fonts, push onto array136                                if ( redux.stdfonts !== undefined && isUserFonts === 0 ) {137                                    buildData.push( redux.stdfonts );138                                }139                                // If user fonts, pull from localize and push into array140                                if ( isUserFonts == 1 ) {141                                    var fontKids = [];142                                    // <option>143                                    for ( var key in redux.typography[thisID] ) {144                                        var obj = redux.typography[thisID].std_font;145                                        for ( var prop in obj ) {146                                            if ( obj.hasOwnProperty( prop ) ) {147                                                fontKids.push(148                                                    {149                                                        id: prop,150                                                        text: prop,151                                                        'data-google': 'false'152                                                    }153                                                );154                                            }155                                        }156                                    }157                                    // <optgroup>158                                    var fontData = {159                                        text: 'Standard Fonts',160                                        children: fontKids161                                    };162                                    buildData.push( fontData );163                                }164                                // If googfonts on and had data, push into array165                                if ( usingGoogleFonts == 1 || usingGoogleFonts === true && redux.googlefonts !== undefined ) {166                                    buildData.push( redux.googlefonts );167                                }168                                // output data to drop down169                                data = buildData;170                                // get placeholder171                                var selFamily = $( '#' + thisID + ' #' + thisID + '-family' ).attr( 'placeholder' );172                                if ( !selFamily ) {173                                    selFamily = null;174                                }175                                // select current font176                                $( '#' + thisID + " .redux-typography-family" ).select2( 'val', selFamily );177                                // When selection is made.178                            }179                        ).on(180                            'select2-selecting', function( val, object ) {181                                var fontName = val.object.text;182                                var thisID = $( this ).parents( '.redux-container-typography:first' ).attr( 'data-id' );183                                $( '#' + thisID + ' #' + thisID + '-family' ).data( 'value', fontName );184                                $( '#' + thisID + ' #' + thisID + '-family' ).attr( 'placeholder', fontName );185                                // option values186                                selVals = val;187                                isSelecting = true;188                                redux.field_objects.typography.select( $( this ).parents( '.redux-container-typography:first' ) );189                            }190                        ).on(191                            'select2-clearing', function( val, choice ) {192                                var thisID = $( this ).parents( '.redux-container-typography:first' ).attr( 'data-id' );193                                $( '#' + thisID + ' #' + thisID + '-family' ).attr( 'data-value', '' );194                                $( '#' + thisID + ' #' + thisID + '-family' ).attr( 'placeholder', 'Font Family' );195                                $( '#' + thisID + ' #' + thisID + '-google-font' ).val( 'false' );196                                redux.field_objects.typography.select( $( this ).parents( '.redux-container-typography:first' ) );197                            }198                        );199                        var xx = el.find( ".redux-typography-family" );200                        if ( !xx.hasClass( 'redux-typography-family' ) ) {201                            el.find( ".redux-typography-style" ).select2( default_params );202                        }203                        // Init select2 for indicated fields204                        el.find( ".redux-typography-family-backup, .redux-typography-align, .redux-typography-transform, .redux-typography-font-variant, .redux-typography-decoration" ).select2( default_params );205                    }206                );207            }208        );209    };210    // Return font size211    redux.field_objects.typography.size = function( obj ) {212        var size = 0,213            key;214        for ( key in obj ) {215            if ( obj.hasOwnProperty( key ) ) {216                size++;217            }218        }219        return size;220    };221    // Return proper bool value222    redux.field_objects.typography.makeBool = function( val ) {223        if ( val == 'false' || val == '0' || val === false || val === 0 ) {224            return false;225        } else if ( val == 'true' || val == '1' || val === true || val == 1 ) {226            return true;227        }228    };229    redux.field_objects.typography.change = function( container ) {230        var $data = {};231        jQuery( container ).find( '.redux-typography-input' ).each(232            function() {233                if ( jQuery( this ).data( 'name' ) === undefined ) {234                    return;235                }236                $data[jQuery( this ).data( 'name' )] = jQuery( this ).val();237            }238        );239        var $input = jQuery( container ).find( '.typography-data-input:first-child' );240        $input.val( JSON.stringify( $data ) );241    };242    redux.field_objects.typography.contrastColour = function( hexcolour ) {243        // default value is black.244        var retVal = '#444444';245        // In case - for some reason - a blank value is passed.246        // This should *not* happen.  If a function passing a value247        // is canceled, it should pass the current value instead of248        // a blank.  This is how the Windows Common Controls do it.  :P249        if ( hexcolour !== '' ) {250            // Replace the hash with a blank.251            hexcolour = hexcolour.replace( '#', '' );252            var r = parseInt( hexcolour.substr( 0, 2 ), 16 );253            var g = parseInt( hexcolour.substr( 2, 2 ), 16 );254            var b = parseInt( hexcolour.substr( 4, 2 ), 16 );255            var res = ((r * 299) + (g * 587) + (b * 114)) / 1000;256            // Instead of pure black, I opted to use WP 3.8 black, so it looks uniform.  :) - kp257            retVal = (res >= 128) ? '#444444' : '#ffffff';258        }259        return retVal;260    };261    //  Sync up font options262    redux.field_objects.typography.select = function( selector, skipCheck ) {263        var mainID;264        // Main id for selected field265        mainID = $( selector ).parents( '.redux-container-typography:first' ).attr( 'data-id' );266        if ( mainID === undefined ) {267            mainID = $( selector ).attr( 'data-id' );268        }269        var parent = $( selector ).parents( '.redux-container-typography:first' );270        var data = [];271        //$.each(parent.find('.redux-typography-field'), function() {272        //    console.log();273        //});274        //console.log( selector );275        // Set all the variables to be checked against276        var family = $( '#' + mainID + ' #' + mainID + '-family' ).val();277        if ( !family ) {278            family = null; //"inherit";279        }280        var familyBackup = $( '#' + mainID + ' select.redux-typography-family-backup' ).val();281        var size = $( '#' + mainID + ' .redux-typography-size' ).val();282        var height = $( '#' + mainID + ' .redux-typography-height' ).val();283        var word = $( '#' + mainID + ' .redux-typography-word' ).val();284        var letter = $( '#' + mainID + ' .redux-typography-letter' ).val();285        var align = $( '#' + mainID + ' select.redux-typography-align' ).val();286        var transform = $( '#' + mainID + ' select.redux-typography-transform' ).val();287        var fontVariant = $( '#' + mainID + ' select.redux-typography-font-variant' ).val();288        var decoration = $( '#' + mainID + ' select.redux-typography-decoration' ).val();289        var style = $( '#' + mainID + ' select.redux-typography-style' ).val();290        var script = $( '#' + mainID + ' select.redux-typography-subsets' ).val();291        var color = $( '#' + mainID + ' .redux-typography-color' ).val();292        var units = $( '#' + mainID ).data( 'units' );293        //console.log('here3');294        //console.log(color);295        //var output = family;296        // Is selected font a google font?297        var google;298        if ( isSelecting === true ) {299            google = redux.field_objects.typography.makeBool( selVals.object['data-google'] );300            $( '#' + mainID + ' .redux-typography-google-font' ).val( google );301        } else {302            google = redux.field_objects.typography.makeBool( $( '#' + mainID + ' .redux-typography-google-font' ).val() ); // Check if font is a google font303        }304        // Page load. Speeds things up memory wise to offload to client305        if ( !$( '#' + mainID ).hasClass( 'typography-initialized' ) ) {306            style = $( '#' + mainID + ' select.redux-typography-style' ).data( 'value' );307            script = $( '#' + mainID + ' select.redux-typography-subsets' ).data( 'value' );308            if ( style !== "" ) {309                style = String( style );310            }311            if ( typeof (script) !== undefined ) {312                script = String( script );313            }314        }315        // Something went wrong trying to read google fonts, so turn google off316        if ( redux.fonts.google === undefined ) {317            google = false;318        }319        // Get font details320        var details = '';321        if ( google === true && ( family in redux.fonts.google) ) {322            details = redux.fonts.google[family];323        } else {324            details = {325                '400': 'Normal 400',326                '700': 'Bold 700',327                '400italic': 'Normal 400 Italic',328                '700italic': 'Bold 700 Italic'329            };330        }331        if ( $( selector ).hasClass( 'redux-typography-subsets' ) ) {332            $( '#' + mainID + ' input.typography-subsets' ).val( script );333        }334        // If we changed the font335        if ( $( selector ).hasClass( 'redux-typography-family' ) ) {336            var html = '<option value=""></option>';337            // Google specific stuff338            if ( google === true ) {339                // STYLES340                var selected = "";341                $.each(342                    details.variants, function( index, variant ) {343                        if ( variant.id === style || redux.field_objects.typography.size( details.variants ) === 1 ) {344                            selected = ' selected="selected"';345                            style = variant.id;346                        } else {347                            selected = "";348                        }349                        html += '<option value="' + variant.id + '"' + selected + '>' + variant.name.replace(350                                /\+/g, " "351                            ) + '</option>';352                    }353                );354                // destroy select2355                $( '#' + mainID + ' .redux-typography-style' ).select2( "destroy" );356                // Instert new HTML357                $( '#' + mainID + ' .redux-typography-style' ).html( html );358                // Init select2359                $( '#' + mainID + ' .redux-typography-style' ).select2( default_params );360                // SUBSETS361                selected = "";362                html = '<option value=""></option>';363                $.each(364                    details.subsets, function( index, subset ) {365                        if ( subset.id === script || redux.field_objects.typography.size( details.subsets ) === 1 ) {366                            selected = ' selected="selected"';367                            script = subset.id;368                            $( '#' + mainID + ' input.typography-subsets' ).val( script );369                        } else {370                            selected = "";371                        }372                        html += '<option value="' + subset.id + '"' + selected + '>' + subset.name.replace(373                                /\+/g, " "374                            ) + '</option>';375                    }376                );377                //if (typeof (familyBackup) !== "undefined" && familyBackup !== "") {378                //    output += ', ' + familyBackup;379                //}380                // Destroy select2381                $( '#' + mainID + ' .redux-typography-subsets' ).select2( "destroy" );382                // Inset new HTML383                $( '#' + mainID + ' .redux-typography-subsets' ).html( html );384                // Init select2385                $( '#' + mainID + ' .redux-typography-subsets' ).select2( default_params );386                $( '#' + mainID + ' .redux-typography-subsets' ).parent().fadeIn( 'fast' );387                $( '#' + mainID + ' .typography-family-backup' ).fadeIn( 'fast' );388            } else {389                if ( details ) {390                    $.each(391                        details, function( index, value ) {392                            if ( index === style || index === "normal" ) {393                                selected = ' selected="selected"';394                                $( '#' + mainID + ' .typography-style .select2-chosen' ).text( value );395                            } else {396                                selected = "";397                            }398                            html += '<option value="' + index + '"' + selected + '>' + value.replace(399                                    '+', ' '400                                ) + '</option>';401                        }402                    );403                    // Destory select2404                    $( '#' + mainID + ' .redux-typography-style' ).select2( "destroy" );405                    // Insert new HTML406                    $( '#' + mainID + ' .redux-typography-style' ).html( html );407                    // Init select2408                    $( '#' + mainID + ' .redux-typography-style' ).select2( default_params );409                    // Prettify things410                    $( '#' + mainID + ' .redux-typography-subsets' ).parent().fadeOut( 'fast' );411                    $( '#' + mainID + ' .typography-family-backup' ).fadeOut( 'fast' );412                }413            }414            $( '#' + mainID + ' .redux-typography-font-family' ).val( family );415        } else if ( $( selector ).hasClass( 'redux-typography-family-backup' ) && familyBackup !== "" ) {416            $( '#' + mainID + ' .redux-typography-font-family-backup' ).val( familyBackup );417        }418        // Check if the selected value exists. If not, empty it. Else, apply it.419        if ( $( '#' + mainID + " select.redux-typography-style option[value='" + style + "']" ).length === 0 ) {420            style = "";421            $( '#' + mainID + ' select.redux-typography-style' ).select2( 'val', '' );422        } else if ( style === "400" ) {423            $( '#' + mainID + ' select.redux-typography-style' ).select2( 'val', style );424        }425        // Handle empty subset select426        if ( $( '#' + mainID + " select.redux-typography-subsets option[value='" + script + "']" ).length === 0 ) {427            script = "";428            $( '#' + mainID + ' select.redux-typography-subsets' ).select2( 'val', '' );429            $( '#' + mainID + ' input.typography-subsets' ).val( script );430        }431        var _linkclass = 'style_link_' + mainID;432        //remove other elements crested in <head>433        $( '.' + _linkclass ).remove();434        if ( family !== null && family !== "inherit" && $( '#' + mainID ).hasClass( 'typography-initialized' ) ) {435            //replace spaces with "+" sign436            var the_font = family.replace( /\s+/g, '+' );437            if ( google === true ) {438                //add reference to google font family439                var link = the_font;440                if ( style && style !== "" ) {441                    link += ':' + style.replace( /\-/g, " " );442                }443                if ( script && script !== "" ) {444                    link += '&subset=' + script;445                }446                if ( isSelecting === false ) {447                    if ( typeof (WebFont) !== "undefined" && WebFont ) {448                        WebFont.load( {google: {families: [link]}} );449                    }450                }451                $( '#' + mainID + ' .redux-typography-google' ).val( true );452            } else {453                $( '#' + mainID + ' .redux-typography-google' ).val( false );454            }455        }456        // Weight and italic457        if ( style.indexOf( "italic" ) !== -1 ) {458            $( '#' + mainID + ' .typography-preview' ).css( 'font-style', 'italic' );459            $( '#' + mainID + ' .typography-font-style' ).val( 'italic' );460            style = style.replace( 'italic', '' );461        } else {462            $( '#' + mainID + ' .typography-preview' ).css( 'font-style', "normal" );463            $( '#' + mainID + ' .typography-font-style' ).val( '' );464        }465        $( '#' + mainID + ' .typography-font-weight' ).val( style );466        if ( !height ) {467            height = size;468        }469        if ( size === '' || size === undefined ) {470            $( '#' + mainID + ' .typography-font-size' ).val( '' );471        } else {472            $( '#' + mainID + ' .typography-font-size' ).val( size + units );473        }474        if ( height === '' || height === undefined ) {475            $( '#' + mainID + ' .typography-line-height' ).val( '' );476        } else {477            $( '#' + mainID + ' .typography-line-height' ).val( height + units );478        }479        if ( word === '' || word === undefined ) {480            $( '#' + mainID + ' .typography-word-spacing' ).val( '' );481        } else {482            $( '#' + mainID + ' .typography-word-spacing' ).val( word + units );483        }484        if ( letter === '' || letter === undefined ) {485            $( '#' + mainID + ' .typography-letter-spacing' ).val( '' );486        } else {487            $( '#' + mainID + ' .typography-letter-spacing' ).val( letter + units );488        }489        // Show more preview stuff490        if ( $( '#' + mainID ).hasClass( 'typography-initialized' ) ) {491            //console.log('here2');492            var isPreviewSize = $( '#' + mainID + ' .typography-preview' ).data( 'preview-size' );493            if ( isPreviewSize == '0' ) {494                $( '#' + mainID + ' .typography-preview' ).css( 'font-size', size + units );495            }496            $( '#' + mainID + ' .typography-preview' ).css( 'font-weight', style );497            //show in the preview box the font498            $( '#' + mainID + ' .typography-preview' ).css( 'font-family', family + ', sans-serif' );499            if ( family === 'none' && family === '' ) {500                //if selected is not a font remove style "font-family" at preview box501                $( '#' + mainID + ' .typography-preview' ).css( 'font-family', 'inherit' );502            }503            $( '#' + mainID + ' .typography-preview' ).css( 'line-height', height + units );504            $( '#' + mainID + ' .typography-preview' ).css( 'word-spacing', word + units );505            $( '#' + mainID + ' .typography-preview' ).css( 'letter-spacing', letter + units );506            if ( color ) {507                $( '#' + mainID + ' .typography-preview' ).css( 'color', color );508                $( '#' + mainID + ' .typography-preview' ).css(509                    'background-color', redux.field_objects.typography.contrastColour( color )510                );511            }512            $( '#' + mainID + ' .typography-style .select2-chosen' ).text( $( '#' + mainID + ' .redux-typography-style option:selected' ).text() );513            $( '#' + mainID + ' .typography-script .select2-chosen' ).text( $( '#' + mainID + ' .redux-typography-subsets option:selected' ).text() );514            if ( align ) {515                $( '#' + mainID + ' .typography-preview' ).css( 'text-align', align );516            }517            if ( transform ) {518                $( '#' + mainID + ' .typography-preview' ).css( 'text-transform', transform );519            }520            if ( fontVariant ) {521                $( '#' + mainID + ' .typography-preview' ).css( 'font-variant', fontVariant );522            }523            if ( decoration ) {524                $( '#' + mainID + ' .typography-preview' ).css( 'text-decoration', decoration );525            }526            $( '#' + mainID + ' .typography-preview' ).slideDown();527        }528        // end preview stuff529        // if not preview showing, then set preview to show530        if ( !$( '#' + mainID ).hasClass( 'typography-initialized' ) ) {531            $( '#' + mainID ).addClass( 'typography-initialized' );532        }533        isSelecting = false;534        if ( !skipCheck ) {535            redux_change( selector );536        }537    };...

OrderPrint.js

Source:OrderPrint.js

1/* eslint-disable max-len */2import React, { Fragment } from "react";3import PropTypes from "prop-types";4import Helmet from "react-helmet";5import ChevronLeftIcon from "mdi-material-ui/ChevronLeft";6import { Button, Divider, Grid, makeStyles, Typography } from "@material-ui/core";7import Address from "@reactioncommerce/components/Address/v1";8import { i18next } from "/client/api";9const useStyles = makeStyles((theme) => ({10  "dividerSpacing": {11    marginTop: theme.spacing(4)12  },13  "extraEmphasisText": {14    fontWeight: theme.typography.fontWeightSemiBold15  },16  "gridContainer": {17    border: `solid 1px ${theme.palette.colors.black}`,18    marginBottom: theme.spacing(8),19    marginLeft: "auto",20    marginRight: "auto",21    maxWidth: "960px",22    width: "960px"23  },24  "iconButton": {25    marginRight: "10px"26  },27  "@media print": {28    "@global": {29      html: {30        visibility: "hidden"31      }32    },33    "gridContainer": {34      visibility: "visible",35      display: "block",36      position: "absolute",37      top: "0",38      left: "0"39    }40  }41}));42/**43 * @name OrderPrint44 * @param {Object} props Component props45 * @returns {React.Component} returns a React component46 */47function OrderPrint(props) {48  const { order } = props;49  const classes = useStyles();50  const { fulfillmentGroups } = order;51  const orderDate = new Date(order.createdAt).toLocaleDateString("en-US");52  const printAddress = address =>{53    return{54      fullName:address.description,55      address1:address.address56    }57  }58  return (59    <Fragment>60      <Helmet title={`Order #${order.referenceId} printable invoice`} />61      <Grid container spacing={10}>62        <Grid item xs={12}>63          <Grid container alignItems="center" direction="row" justify="space-between">64            <Grid item>65              <Button66                href={`/orders/${order.referenceId}`}67              >68                <ChevronLeftIcon className={classes.iconButton} />69                Back70              </Button>71            </Grid>72            <Grid item>73              <Button74                color="primary"75                onClick={() => window.print()}76                size="large"77                variant="contained"78              >79                {i18next.t("admin.orderWorkflow.invoice.printInvoice")}80              </Button>81            </Grid>82          </Grid>83        </Grid>84        <Grid item xs={12} id="printable" className={classes.gridContainer}>85          <Grid container spacing={5}>86            <Grid item xs={12}>87              <Grid container>88                <Grid item xs={12} md={6}>89                  <Typography variant="h1" paragraph>{order.shop.name}</Typography>90                </Grid>91                <Grid item xs={12} md={6}>92                  <Typography variant="h2" paragraph>Order Invoice</Typography>93                  <Typography variant="h4" display="inline">Order ID: </Typography><Typography variant="body1" display="inline">{order.referenceId}</Typography><br />94                  <Typography variant="h4" display="inline">Date: </Typography><Typography variant="body1" display="inline">{orderDate}</Typography>95                </Grid>96              </Grid>97              <Divider className={classes.dividerSpacing} />98            </Grid>99            <Grid item xs={12}>100              <Grid container>101                <Grid item xs={12} md={6}>102                  <Typography variant="h2" paragraph>Shipping address</Typography>103                  <Address address={printAddress(fulfillmentGroups[0].data.shippingAddress)} />104                </Grid>105                <Grid item xs={12} md={6}>106                  <Typography variant="h2" paragraph>Billing address</Typography>107                  <Address address={printAddress(fulfillmentGroups[0].data.shippingAddress)} />108                </Grid>109              </Grid>110              <Divider className={classes.dividerSpacing} />111            </Grid>112            <Grid item xs={12}>113              <Typography variant="h2" paragraph>Payments</Typography>114              <Grid container spacing={4}>115                {order.payments.map((payment, index) => {116                  const { amount, displayName, processor, transactionId } = payment;117                  return (118                    <Grid item xs={12} key={index}>119                      <Grid container>120                        <Grid item xs={6} md={6}>121                          <Typography variant="h4">122                            {displayName}123                          </Typography>124                          <Typography variant="body2">125                          Processor: {processor}126                          </Typography>127                          <Typography variant="body2">128                          Transaction ID: {transactionId}129                          </Typography>130                        </Grid>131                        <Grid item xs={6} md={6}>132                          <Typography variant="body1" align="right">133                            {amount.displayAmount}134                          </Typography>135                        </Grid>136                      </Grid>137                    </Grid>138                  );139                })}140              </Grid>141              <Divider className={classes.dividerSpacing} />142            </Grid>143            <Grid item xs={12}>144              <Typography variant="h2" paragraph>Fulfillment</Typography>145              <Grid container spacing={6}>146                {fulfillmentGroups.map((fulfillmentGroup, index) => {147                  const currentGroupCount = index + 1;148                  return (149                    <Grid item xs={12} key={index}>150                      <Grid container alignItems="center">151                        <Grid item xs={12}>152                          <Typography variant="h3">153                            {i18next.t("order.fulfillmentGroupHeader", `Fulfillment group ${currentGroupCount} of ${fulfillmentGroups.length}`)}154                          </Typography>155                          <Typography variant="body2">156                            <span className={classes.extraEmphasisText}>Shipping method: </span>157                            {fulfillmentGroup.selectedFulfillmentOption.fulfillmentMethod.carrier} - {fulfillmentGroup.selectedFulfillmentOption.fulfillmentMethod.displayName}158                          </Typography>159                          <Typography variant="body2" paragraph>160                            <span className={classes.extraEmphasisText}>Tracking number: </span>161                            {fulfillmentGroup.trackingNumber || "Not available"}162                          </Typography>163                        </Grid>164                      </Grid>165                      <Grid container spacing={4}>166                        {fulfillmentGroup.items.nodes.map((item) => (167                          <Grid key={item._id} item xs={12}>168                            <Grid container>169                              <Grid item xs={6} md={6}>170                                <Grid item xs={12} md={12}>171                                  <Typography variant="h4">172                                    {item.title}173                                  </Typography>174                                  <Typography variant="body2">175                                    {item.productVendor}176                                  </Typography>177                                  <Typography variant="body2">178                                    {item.variantTitle}179                                  </Typography>180                                  <Typography variant="body2">181                                    Quantity: {item.quantity}182                                  </Typography>183                                </Grid>184                              </Grid>185                              <Grid item xs={6} md={6}>186                                <Grid item xs={12} md={12}>187                                  <Typography variant="body1" align="right">188                                    {item.price.displayAmount}189                                  </Typography>190                                  <Typography variant="body1" align="right">191                                    <span className={classes.extraEmphasisText}>Total({item.quantity}): </span>192                                    {item.subtotal.displayAmount}193                                  </Typography>194                                </Grid>195                              </Grid>196                            </Grid>197                          </Grid>198                        ))}199                      </Grid>200                    </Grid>201                  );202                })}203              </Grid>204              <Divider className={classes.dividerSpacing} />205            </Grid>206            <Grid item xs={12}>207              <Typography variant="h2" paragraph>Summary</Typography>208              <Grid container>209                <Grid item xs={6}>210                  {order.summary.itemTotal &&211                    <Typography variant="body1">212                      Items213                    </Typography>214                  }215                  {order.summary.fulfillmentTotal &&216                    <Typography variant="body1">217                      Shipping218                    </Typography>219                  }220                  {order.summary.taxTotal &&221                    <Typography variant="body1">222                      Tax223                    </Typography>224                  }225                  {order.summary.discountTotal &&226                    <Typography variant="body1">227                      Discounts228                    </Typography>229                  }230                  {order.summary.surchargeTotal &&231                    <Typography variant="body1">232                      Surcharges233                    </Typography>234                  }235                  {order.summary.total &&236                    <Typography variant="body1">237                      Total238                    </Typography>239                  }240                </Grid>241                <Grid item xs={6}>242                  <Typography variant="body1" align="right">243                    {order.summary.itemTotal && order.summary.itemTotal.displayAmount}244                  </Typography>245                  <Typography variant="body1" align="right">246                    {order.summary.fulfillmentTotal && order.summary.fulfillmentTotal.displayAmount}247                  </Typography>248                  <Typography variant="body1" align="right">249                    {order.summary.taxTotal && order.summary.taxTotal.displayAmount}250                  </Typography>251                  <Typography variant="body1" align="right">252                    {order.summary.discountTotal && order.summary.discountTotal.displayAmount}253                  </Typography>254                  <Typography variant="body1" align="right">255                    {order.summary.surchargeTotal && order.summary.surchargeTotal.displayAmount}256                  </Typography>257                  <Typography variant="body1" align="right">258                    {order.summary.total && order.summary.total.displayAmount}259                  </Typography>260                </Grid>261              </Grid>262              <Divider className={classes.dividerSpacing} />263            </Grid>264            <Grid item xs={12}>265              <Typography variant="body2">Thank you for your order.</Typography>266            </Grid>267          </Grid>268        </Grid>269      </Grid>270    </Fragment>271  );272}273OrderPrint.propTypes = {274  classes: PropTypes.object,275  order: PropTypes.object276};...

Using AI Code Generation

1import Typography from 'storybook-root/dist/typography';2import Button from 'storybook-root/dist/button';3import Icon from 'storybook-root/dist/icon';4import Input from 'storybook-root/dist/input';5import Modal from 'storybook-root/dist/modal';6import Radio from 'storybook-root/dist/radio';7import Switch from 'storybook-root/dist/switch';8import Table from 'storybook-root/dist/table';9import Tabs from 'storybook-root/dist/tabs';10import Tooltip from 'storybook-root/dist/tooltip';11import { Typography } from 'storybook-root';12import { Button } from 'storybook-root';13import { Icon } from 'storybook-root';14import { Input } from 'storybook-root';15import { Modal } from 'storybook-root';16import { Radio } from 'storybook-root';17import { Switch } from 'storybook-root';18import { Table } from 'storybook-root';19import { Tabs } from 'storybook-root';20import { Tooltip } from 'storybook-root';21import { Typography, Button, Icon, Input, Modal, Radio, Switch, Table, Tabs, Tooltip } from 'storybook-root';22import { Typography } from 'storybook-root';23const { Title, Subtitle, Text } = Typography;

Using AI Code Generation

1import Typography from 'storybook-root/src/Typography';2import Typography from 'storybook-root/Typography';3import Typography from 'storybook-root/typography';4import Typography from 'storybook-root/typography/typography';5import Typography from 'storybook-root/typography/Typography';6import Typography from 'storybook-root/typography/typography/typography';7import Typography from 'storybook-root/typography/typography/Typography';8import Typography from 'storybook-root/typography/Typography/typography';9import Typography from 'storybook-root/typography/Typography/Typography';10import Typography from 'storybook-root/typography/typography/typography/typography';11import Typography from 'storybook-root/typography/typography/typography/Typography';12import Typography from 'storybook-root/typography/typography/Typography/typography';13import Typography from 'storybook-root/typography/typography/Typography/Typography';14import Typography from 'storybook-root/typography/Typography/typography/typography';15import Typography from 'storybook-root/typography/Typography/typography/Typography';16import Typography from 'storybook-root/typography/Typography/Typography/typography';17import Typography from 'storybook-root/typography/Typography/Typography/Typography';18import Typography from 'storybook-root/typography/typography/typography/typography/typography';19import Typography from 'storybook-root/typography/typography/typography/typography/Typography';20import Typography from 'storybook-root/typography/typography/

Using AI Code Generation

1import Typography from 'storybook-root/src/Typography';2const App = () => {3  return (4  );5};6export default App;7import React from 'react';8const Typography = () => {9  return <div>Typography</div>;10};11export default Typography;

Using AI Code Generation

1import Typography from 'storybook-root/src/components/typography';2import Button from 'storybook-root/src/components/button';3import { storiesOf } from '@storybook/react';4import { action } from '@storybook/addon-actions';5storiesOf('Button', module)6  .add('with text', () => (7    <Button onClick={action('clicked')}>Hello Button</Button>8  .add('with some emoji', () => (9    <Button onClick={action('clicked')}><span role="img" aria-label="so cool">😀 😎 👍 💯</span></Button>10  ));11storiesOf('Typography', module)12  .add('with text', () => (13  .add('with some emoji', () => (14  ));

Using AI Code Generation

1import { Typography } from 'storybook-root';2import { Typography } from 'storybook-root';3const App = () => {4  return (5  );6};7export default App;8import { Typography } from 'storybook-root';9const App = () => {10  return (11  );12};13export default App;14import { Typography } from 'storybook-root';15const App = () => {16  return (17  );18};19export default App;20import { Typography } from 'storybook-root';21const App = () => {22  return (23  );24};25export default App;26import { Typography } from 'storybook-root';27const App = () => {28  return (29  );30};31export default App;32import { Typography } from 'storybook-root';33const App = () => {34  return (35  );36};37export default App;38import { Typography } from 'storybook-root';39const App = () => {40  return (41  );42};43export default App;44import { Typography } from 'storybook-root';45const App = () => {46  return (47  );48};49export default App;50import { Typography } from 'storybook

Using AI Code Generation

1import { Typography } from 'storybook-root';2export const MyComponent = () => <Typography>My component</Typography>;3import { MyComponent } from './test';4describe('MyComponent', () => {5  it('should render', () => {6    expect(shallow(<MyComponent />)).toMatchSnapshot();7  });8});9import { MyComponent } from './test';10export default {11};12export const Default = () => <MyComponent />;

Using AI Code Generation

1import Typography from 'storybook-root/src/components/Typography';2import { Text } from 'react-native';3export default () => {4  return (5  );6};

Using AI Code Generation

1import Typography from 'storybook-root/src/components/Typography';2const Test = () => {3  return (4}5module.exports = async ({ config, mode }) => {6  config.resolve.alias = {7    'storybook-root': path.resolve(__dirname, '../src'),8  };9  return config;10};11module.exports = async ({ config, mode }) => {12  config.resolve.alias = {13    'storybook-root': path.resolve(__dirname, '../src'),14  };15  config.module.rules.push({16    options: {17    },18  });19  return config;20};21module.exports = async ({ config, mode }) => {22  config.resolve.alias = {23    'storybook-root': path.resolve(__dirname, '../src'),24  };25  config.module.rules.push({26      {27        options: {28        },29      },30  });31  return config;32};33module.exports = async ({ config, mode }) => {34  config.resolve.alias = {35    'storybook-root': path.resolve(__dirname, '../src'),36  };37  config.module.rules.push({

Automation Testing Tutorials

Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.