\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tdates && dates.map( ( date, index ) => {\n\t\t\t\t\t\t\t\t\t//sets time to 00:00:00 for timezone purposes\n\t\t\t\t\t\t\t\t\tvar dateData = new Date( new Date( date + ' 00:00:00' ) );\n\t\t\t\t\t\t\t\t\tvar weekday;\n\t\t\t\t\t\t\t\t\tvar day = dateData.getDate();\n\t\t\t\t\t\t\t\t\tvar month = dateData.toLocaleDateString( \"us-US\", { month: 'long' } );\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t// Custom day of the week labels for three days.\n\t\t\t\t\t\t\t\t\tswitch ( date ) {\n\t\t\t\t\t\t\t\t\t\tcase yesterdayYYYYMMDD:\n\t\t\t\t\t\t\t\t\t\t\tweekday = 'Yesterday';\n\t\t\t\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t\t\t\t\tcase todayYYYYMMDD:\n\t\t\t\t\t\t\t\t\t\t\tweekday = 'Today';\n\t\t\t\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t\t\t\t\tcase tomorrowYYYYMMDD:\n\t\t\t\t\t\t\t\t\t\t\tweekday = 'Tomorrow';\n\t\t\t\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t\t\t\t\tdefault:\n\t\t\t\t\t\t\t\t\t\t\tweekday = dateData.toLocaleDateString( \"us-US\", { weekday: 'long' } );\n\t\t\t\t\t\t\t\t\t}\t\t\t\t\t\t\t\t\t\n\n\t\t\t\t\t\t\t\t\treturn(\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\n\t\t\t}\n\t\t/>\n\t);\n}\n","import { useEffect, useState } from 'react';\n\n/**\n * Use:\n * At the top of the file: import Helpers from './helpers';\n * Within the file: Helpers.cleanAttributeName()\n */\nconst Helpers = {\n\t/**\n\t * Cleaned metadata name with no spaces, alphanumeric, for use in data attributes, class names, etc. \n\t */\n cleanAttributeName: function( metadata ) {\n\t\treturn metadata.trim().replaceAll(' ', '-').replace(/[^0-9a-zA-Z_-]/g, '').replaceAll('--', '-').toLowerCase();\n\t},\n\t/**\n\t * Return current screen type as an object containing 3 boolean properties.\n\t * \n\t * Use: \n\t * Mobile Only: screenSize.desktop === false && screenSize.tablet === false\n\t * Tablet Only: screenSize.mobile === false && screenSize.tablet === false\n\t * Desktop Only: screenSize.desktop === true\n\t * etc.\n\t * \n\t */\n\tscreenSize: function() {\n\t\tconst [isDesktop, setDesktop] = useState( window.innerWidth > 1440 );\n\t\tconst [isTablet, setTablet] = useState( window.innerWidth > 768 );\n\t\tconst [isMobile, setMobile] = useState( window.innerWidth > 320 );\n\t\tconst screenSize = { \n\t\t\t'desktop': isDesktop,\n\t\t\t'tablet': isTablet, \n\t\t\t'mobile': isMobile\n\t\t};\n\n\t\tconst updateMedia = () => {\n\t\t\tsetDesktop( window.innerWidth > 1440 );\n\t\t\tsetTablet( window.innerWidth > 768 );\n\t\t\tsetMobile( window.innerWidth > 320 );\n\t\t};\n\t\t\n\t\tuseEffect(() => {\n\t\t\twindow.addEventListener(\"resize\", updateMedia);\n\t\t\treturn () => window.removeEventListener(\"resize\", updateMedia);\n\t\t});\n\n\t\treturn screenSize;\n\t}\n}\n\nexport default Helpers;\n","/**\n * Recipe metadata: vegetarian, vegan, halal, carbon footprint, allergens\n */\n\nimport ContentPopover from './Popover';\nimport Helpers from './Helpers';\n\n/**\n * Component for displaying icon metadata within card component\n */\nconst MetadataItem = ( metadata ) => {\n\tconst metadataNameClean = Helpers.cleanAttributeName( metadata.name[0] );\n\treturn ( \n\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\n\t\t\t\t{ metadata.name[0] }\n\t\t\t\n\t\t
\n\t)\n}\n\n/**\n * Component for displaying metadata popover-opening link\n * \n * ucla is a global const set in the render.php\n */\nconst MetadataPopover = ( { metadata, metadataCount } ) => {\n\tif( metadataCount >= 4 ) {\n\t\treturn (\n\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t})\n\t\t\t\t\t}\n\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t{ metadataTypeLabelPrepend } { metadata[0] } { metadataTypeLabelAppend }\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\tExplore Our Nutritional Key\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t}\n\t\t\t/>\n\t\t)\n\t}\n}\n\nexport default function Metadata( {\n\trecipeAllergens,\n\trecipeDiet\n}) {\n\t// combine diets and allergens into one array for easier use\n\tconst recipeMetadata = [];\n\n\tif ( recipeDiet.length > 0 ) {\n\t\t// array of diets: jamix returns diets as a CSV string\n\t\tconst diets = recipeDiet.split(',');\n\n\t\tdiets && diets.map( ( diet ) => {\n\t\t\tif ( diet ) {\n\t\t\t\trecipeMetadata.push( [ diet.trim(), 'diet' ] );\n\t\t\t}\n\t\t})\n\t}\n\n\tif ( recipeAllergens.length > 0 ) {\n\t\trecipeAllergens && recipeAllergens.map( ( allergen ) => {\n\t\t\t// ingredient allergens are an array; recipe allergens are an object, thus the ternary pain\n\t\t\trecipeMetadata.push( [ allergen.allergenTranslations ? allergen.allergenTranslations['EN'] : allergen, 'allergen' ] );\n\t\t})\n\t}\n\n\tif ( recipeMetadata.length > 0 ) {\n\t\t// slice out the elements as needed -- design specifies a group of three, plus a\n\t\t// link to open a popover when there are more than three items of metadata\n\t\tconst truncatedRecipeMetadata = recipeMetadata.slice( 0, 3 );\n\t\tconst metadataLength = recipeMetadata.slice( 3, recipeMetadata.length ).length;\n\n\t\treturn (\n\t\t\t(subtitle = _subtitle)}>{ subtitle }
\n\t\t\t\t\t\n\t\t\t\t{ content }
\n\t\t\t\t\n\t\t\t\n\t\t\n\t);\n}\n","export default function NutritionLegend() {\n\n const output = [];\n\n const metadata = [\n {\n 'name': 'vegetarian',\n 'display': 'Vegetarian Menu Option'\n },\n {\n 'name': 'vegan',\n 'display': 'Vegan Menu Option'\n },\n {\n 'name': 'peanut',\n 'display': 'Contains Peanuts'\n },\n {\n 'name': 'tree-nuts',\n 'display': 'Contains Tree Nuts'\n },\n {\n 'name': 'wheat',\n 'display': 'Contains Wheat'\n },\n {\n 'name': 'gluten',\n 'display': 'Contains Gluten'\n },\n {\n 'name': 'soy',\n 'display': 'Contains Soy'\n },\n {\n 'name': 'sesame',\n 'display': 'Contains Sesame'\n },\n {\n 'name': 'dairy',\n 'display': 'Contains Dairy'\n },\n {\n 'name': 'eggs',\n 'display': 'Contains Eggs'\n },\n {\n 'name': 'crustacean-shellfish',\n 'display': 'Contains Crustacean Shellfish'\n },\n {\n 'name': 'fish',\n 'display': 'Contains Fish'\n },\n {\n 'name': 'alcohol',\n 'display': 'Prepared with Alcohol'\n },\n {\n 'name': 'halal',\n 'display': 'Halal Menu Option'\n },\n {\n 'name': 'low-carbon-footprint',\n 'display': 'Low Carbon Footprint'\n },\n {\n 'name': 'high-carbon-footprint',\n 'display': 'High Carbon Footprint'\n },\n {\n 'name': 'customizable',\n 'display': 'Customizable Item'\n }\n ];\n\n for (let i = 0; i< metadata.length; i++ ) {\n const {name, display} = metadata[i];\n output.push(\n \n
\n );\n }\n\n return (\n \n \n { display }\n \n
\n \n { display }\n \n\t\t Legend
\n\n\n
\n \n {output}\n\n \n
\n (subtitle = _subtitle)}>{ subtitle }
\n\t\t\t\t\t\n\t\t\t\t{ content }
\n\t\t\t\t{(() => {\n\t\t\t\t\tif( screenSize.tablet === true ) {\n\t\t\t\t\t\treturn(\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t)\n\t\t\t\t\t}\n\t\t\t\t})()}\n\t\t\t\n\t\t\n\t);\n}\n","import SingleMetadata from './SingleMetadata.js';\n\nexport default function SingleBasic ( {\n singlePageStatus,\n changeActiveRecipe,\n recipe,\n type,\n name,\n description,\n diet,\n allergens,\n calories,\n ingredients,\n nutritiveValues,\n servingSize\n} ) {\n\n /**\n * Formats ingredients for display.\n * @param {object|string} ingredients \n * @returns string\n */\n function listIngredients( ingredients ) {\n if ( ! ingredients ) {\n return '';\n }\n if ( typeof ingredients === 'object' ) {\n let ingredientList = [];\n for (let [key, ingredient] of Object.entries(ingredients)) {\n if ( ingredient.stockCardId ) {\n ingredientList.push( ingredient.ingredientNameTranslations['EN'] );\n }\n }\n return ingredientList.join( ', ' );\n }\n return ingredients;\n }\n\n /**\n * Format allergens for display.\n *\n * @param {object|string} allergens \n * @returns string\n */\n function listAllergens( allergens ) {\n if ( ! allergens ) {\n return 'None';\n }\n if ( typeof allergens === 'object' ) {\n let allergenList = [];\n for (let [key, allergen] of Object.entries(allergens)) {\n if ( typeof (allergen) === 'object' ) {\n allergenList.push( allergen.allergenTranslations['EN'] );\n } else {\n allergenList.push( allergen );\n }\n }\n return allergenList.join( ', ' );\n }\n return allergens;\n }\n\n /**\n * Format value for output.\n * \n * @param {float|int} value Nutrititve value.\n * @param {*} unit unit of measure.\n * @returns string\n */\n function formatValueOutput( value, unit ) {\n let output = '';\n if ( value > 0 ) {\n output += value.toFixed(1)\n } else {\n output += value;\n }\n output += unit;\n\n return output;\n }\n\n /**\n * Percentage Daily Value calculator.\n * \n * @param {string} nutrient enum string for nutrient recommended dv number\n * @param {float|int} value current recipe/ingredient nutrient value\n * @returns string\n */\n function calculatePDV( nutrient, value ) {\n\n // 2023 fda guidelines for daily value requirements.\n // https://www.fda.gov/media/135301/download\n const nutrients = {\n addedSugar: 50,\n biotin: 30,\n calcium: 1300,\n carbohydrate: 275,\n chloride: 2300,\n choline: 550,\n cholesterol: 300,\n chromium: 35,\n copper: 0.9,\n fibre: 28,\n fat: 78,\n folic: 400,\n iodine: 150,\n iron: 18,\n magnesium: 420,\n manganese: 2.3,\n molybdenum: 45,\n niacin: 16,\n pantothenicAcid: 5,\n phosphorus: 1250,\n potassium: 4700,\n protein: 50,\n riboflavin: 1.3,\n saturatedFat: 20,\n selenium: 55,\n sodium: 2300,\n thiamin: 1.2,\n vitamA: 900,\n vitaminB6: 1.7,\n vitaminB12: 2.4,\n vitaminC: 90,\n vitaminD: 20,\n vitaminE: 15,\n vitaminK: 120,\n zinc: 11,\n };\n\n if ( ! nutrients[nutrient] ) {\n return '';\n }\n if ( ! value ) {\n return \"0%\";\n }\n\n return Number.parseFloat( ( value / nutrients[nutrient] ) * 100 ).toFixed(0) + \"%\";\n }\n\n\t/**\n\t * Toggle tabs.\n\t *\n\t * @param {event} e click event\n\t */\n\tfunction showTabContent(e) {\n\t\tconst tabContent = document.querySelectorAll('.single-tab-content');\n\t\tconst tabs = document.querySelectorAll('.single-tab-button');\n\t\tlet reset = false;\n\n\t\tif ( e.target.classList.contains('ucla-breadcrumb__link') ) {\n\t\t\treset = true;\n\t\t}\n\n\t\ttabContent?.forEach( (tab, number) => {\n\t\t\tif ( tab.dataset.tab == e.target.dataset.tabContent || ( reset === true && number === 0 ) ) {\n\t\t\t\ttab.setAttribute('aria-hidden', 'false');\n\t\t\t} else {\n\t\t\t\ttab.setAttribute('aria-hidden', 'true');\n\t\t\t}\n\t\t});\n\n\t\ttabs?.forEach( (tab, number) => {\n\t\t\tif ( tab.id === e.target.id || ( reset === true && number === 0 ) ) {\n\t\t\t\ttab.classList.add('tab-active');\n\t\t\t} else {\n\t\t\t\ttab.classList.remove('tab-active');\n\t\t\t}\n\t\t});\n\t}\n\n return (\n \n \n \n \n \n
\n \n \n
\n
\n { name }
\n{ description }
\n\n\n showTabContent(e)}\n >\n Nutrition\n \n showTabContent(e)}\n aria-controls=\"tab_ingredients\"\n >\n Ingredients & Allergens\n \n
\n \n
\n Serving Size { servingSize }
\nAmount per Serving
\nCalories{ Number.parseFloat( calories ).toFixed( 0 ) }
\n| % Daily Value* | \n|
|---|---|
| \n Total Fat\n {\n nutritiveValues &&\n formatValueOutput(\n ( nutritiveValues?.fat?.value ?? nutritiveValues.fat),\n ( nutritiveValues?.fat?.unit ?? nutritiveValues.fatUnit )\n )\n }\n | \n{ calculatePDV( 'fat', (nutritiveValues && ( nutritiveValues?.fat?.value ?? nutritiveValues.fat )) ) } | \n
| \n Saturated Fat\n {\n nutritiveValues &&\n formatValueOutput(\n ( nutritiveValues?.saturatedFat?.value ?? nutritiveValues.saturatedFat ),\n ( nutritiveValues?.saturatedFat?.unit ?? nutritiveValues.saturatedFatUnit )\n )\n }\n | \n{ calculatePDV( 'saturatedFat', (nutritiveValues && ( nutritiveValues?.saturatedFat?.value ?? nutritiveValues.saturatedFat )) ) } | \n
| \n Trans Fat\n {\n nutritiveValues &&\n formatValueOutput(\n ( nutritiveValues?.transFattyAcids?.value ?? nutritiveValues.transFattyAcids ),\n ( nutritiveValues?.transFattyAcids?.unit ?? nutritiveValues.transFattyAcidsUnit )\n )\n }\n | \n\n |
| \n Cholesterol\n {\n nutritiveValues &&\n formatValueOutput(\n ( nutritiveValues?.cholesterol?.value ?? nutritiveValues.cholesterol ),\n ( nutritiveValues?.cholesterol?.unit ?? nutritiveValues.cholesterolUnit )\n )\n }\n | \n{ calculatePDV( 'cholesterol', (nutritiveValues && ( nutritiveValues?.cholesterol?.value ?? nutritiveValues.cholesterol )) ) } | \n
| \n Sodium\n {\n nutritiveValues &&\n formatValueOutput(\n ( nutritiveValues?.sodium?.value ?? nutritiveValues.sodium ),\n ( nutritiveValues?.sodium?.unit ?? nutritiveValues.sodiumUnit )\n )\n }\n | \n{ calculatePDV( 'sodium', (nutritiveValues && ( nutritiveValues?.sodium?.value ?? nutritiveValues.sodium )) ) } | \n
| \n Total Carbohydrate\n {\n nutritiveValues &&\n formatValueOutput(\n ( nutritiveValues?.carbohydrate?.value ?? nutritiveValues.carbohydrate ),\n ( nutritiveValues?.carbohydrate?.unit ?? nutritiveValues.carbohydrateUnit )\n )\n }\n | \n{ calculatePDV( 'carbohydrate', (nutritiveValues && ( nutritiveValues?.carbohydrate?.value ?? nutritiveValues.carbohydrate )) ) } | \n
| \n Dietary Fiber\n {\n nutritiveValues &&\n formatValueOutput(\n ( nutritiveValues?.fibre?.value ?? nutritiveValues.fibre ),\n ( nutritiveValues?.fibre?.unit ?? nutritiveValues.fibreUnit )\n )\n }\n | \n{ calculatePDV( 'fibre', (nutritiveValues && ( nutritiveValues?.fibre?.value ?? nutritiveValues.fibre )) ) } | \n
| \n Sugars\n {\n nutritiveValues &&\n formatValueOutput(\n ( nutritiveValues?.sugars?.value ?? nutritiveValues.sugars ),\n ( nutritiveValues?.sugars?.unit ?? nutritiveValues.sugarsUnit )\n )\n }\n | \n\n |
| \n Includes Added Sugars\n {\n nutritiveValues &&\n formatValueOutput(\n ( nutritiveValues?.addedSugar?.value ?? nutritiveValues.addedSugar ),\n ( nutritiveValues?.addedSugar?.unit ?? nutritiveValues.addedSugarUnit )\n )\n }\n | \n{ calculatePDV( 'addedSugar', (nutritiveValues && ( nutritiveValues?.addedSugar?.value ?? nutritiveValues.addedSugar )) ) } | \n
| \n Protein\n {\n nutritiveValues &&\n formatValueOutput(\n ( nutritiveValues?.protein?.value ?? nutritiveValues.protein ),\n ( nutritiveValues?.protein?.unit ?? nutritiveValues.proteinUnit )\n )\n }\n | \n{ calculatePDV( 'protein', (nutritiveValues && ( nutritiveValues?.protein?.value ?? nutritiveValues.protein )) ) } | \n
| \n Calcium\n {\n nutritiveValues &&\n formatValueOutput(\n ( nutritiveValues?.calcium?.value ?? nutritiveValues.calcium ),\n ( nutritiveValues?.calcium?.unit ?? nutritiveValues.calciumUnit )\n )\n }\n | \n{ calculatePDV( 'calcium', (nutritiveValues && ( nutritiveValues?.calcium?.value ?? nutritiveValues.calcium )) ) } | \n\n Iron\n {\n nutritiveValues &&\n formatValueOutput(\n ( nutritiveValues?.iron?.value ?? nutritiveValues.iron ),\n ( nutritiveValues?.iron?.unit ?? nutritiveValues.ironUnit )\n )\n }\n | \n{ calculatePDV( 'iron', (nutritiveValues && ( nutritiveValues?.iron?.value ?? nutritiveValues.iron )) ) } | \n
| \n Potassium\n {\n nutritiveValues &&\n formatValueOutput(\n ( nutritiveValues?.potassium?.value ?? nutritiveValues.potassium ),\n ( nutritiveValues?.potassium?.unit ?? nutritiveValues.potassiumUnit )\n )\n }\n | \n{ calculatePDV( 'potassium', (nutritiveValues && ( nutritiveValues?.potassium?.value ?? nutritiveValues.potassium )) ) } | \n\n Vitamin D\n {\n nutritiveValues &&\n formatValueOutput(\n ( nutritiveValues?.vitaminD?.value ?? nutritiveValues.vitaminD ),\n ( nutritiveValues?.vitaminD?.unit ?? nutritiveValues.vitaminDUnit )\n )\n }\n | \n{ calculatePDV( 'vitaminD', (nutritiveValues && ( nutritiveValues?.vitaminD?.value ?? nutritiveValues.vitaminD )) ) } | \n
*Percent Daily Values (DV) are based on a 2,000 calorie diet.
\n\n Nutrition information is approximate, based on current product and recipe data.\n Manufacturers may change their product formulation or consistency of ingredients\n without our knowledge, and product availability may fluctuate. While we make every\n effort to identify ingredients, we cannot assure against these contingencies. We\n cannot guarantee that a particular dish or item is free of a certain ingredient.\n UCLA Dining Services will assume no liability for any adverse reactions that may\n occur in the residential restaurants. Please be advised that our Bakery produces\n hamburger buns, pizza dough, and baked goods on equipment that also processes\n tree nut products.\n
\nIngredients: { listIngredients( ingredients ) }
\nAllergens*: { listAllergens( allergens ) }
\nIf you have food allergies, it is best to avoid foods cooked in our deep fryers due to the risk of cross-contamination.
\nPlease be advised that our Bakery produces hamburger buns, pizza dough, and baked goods on equipment that also processes tree nut products.
\n \n \n\n {\n screenSize.desktop === false &&\n screenSize.tablet === false &&\n setAccordionExpanded(!accordionExpanded)}\n aria-expanded={accordionExpanded}\n aria-controls={`accordion_panel_${id}`}\n >\n {heading.name}\n \n }\n {\n screenSize.tablet === true &&\n heading.name\n }\n
\n )\n }\n\n /**\n * Feth the allergens and diet for the specific ingredient\n * @param {object} ingredient Single ingredient.\n * @returns Object containing itemId, rowId, name, type, diet, allergens\n */\n async function fetchIngredientAllergens( ingredient ) {\n let fetchId = 0;\n let type = 'ingredient';\n let diet = '';\n let itemId = 0;\n let allergens = [];\n \n if ( null === ingredient.ingredientId ) {\n // This thing is actully a recipe.\n type = 'recipe';\n fetchId = ingredient.subrecipeId;\n } else {\n // This thing is actually an ingredient.\n type = 'ingredient';\n fetchId = ingredient.ingredientId;\n }\n\n // Get the single item, return things that are necessary.\n return fetch( '../wp-content/uploads/jamix/' + type + 's/' + fetchId + '.json' )\n .then((response) => {\n return response.json() \n })\n .then((response) => {\n if ( 'recipe' === type ) {\n diet = response.recipeDietFull;\n allergens = response.recipeAllergens;\n itemId = response.recipeId;\n } else {\n diet = response.ingredientDiets;\n allergens = response.ingredientAllergens;\n itemId = response.ingredientId;\n }\n return {\n itemId: itemId,\n rowId: ingredient.ingredientRowId,\n name: ingredient.ingredientNameTranslations['EN'],\n type: type,\n diet: diet,\n allergens: allergens\n }\n })\n .catch((e) => {\n console.log(e);\n });\n }\n \n /**\n * Ingredient List component, shows the name and allergens/diets with a link to the single item.\n * \n * @param {array} ingredients list of ingredient objects\n * @param {int} id ID of the row.\n *\n * @returns Ingedient List in an accordion panel\n */\n const IngredientList = ( {ingredients, id} ) => {\n const [ list, setList ] = useState( [] );\n const promises = [];\n\n // fetch the allergens and diet for each ingredient in the list when the component is loaded.\n useEffect(() => {\n for ( const ingredient of ingredients ) {\n promises.push(fetchIngredientAllergens( ingredient ));\n }\n\n Promise.all(promises).then( (results) => {\n\n const mappedList = results.map( ({itemId, rowId, name, type, diet, allergens}) => {\n return (\n \n
\n );\n }\n\n /**\n * Ingredient groups component.\n *\n * @param {array} ingredientHeadings Sections/headings\n * @param {array} ingredientGroups Elements for section\n * @returns IngredientGroups\n */\n const IngredientsGroups = ( {ingredientHeadings, ingredientGroups} ) => {\n\n const groups = [];\n\n if ( ! ingredientHeadings.length ) {\n return;\n }\n \n for (let i = 0; i < ingredientHeadings.length; i++ ) {\n groups.push(\n - \n {list}\n
\n
\n );\n }\n\n return groups;\n }\n\n /**\n * main component starts here.\n */\n const [ ingredientHeadings, setIngredientHeadings ] = useState( [] );\n const [ ingredientGroups, setIngredientGroups ] = useState( [] );\n\tconst screenSize = Helpers.screenSize();\n\n useEffect( () => {\n let currentStep = 0;\n let currentIngredientHeadings = [];\n let currentIngredientGroups = [];\n let ingredientGroupList = [];\n \n // get headings for each section.\n ingredients.forEach( (ingredient) => {\n const {ingredientRowStep, ingredientName } = ingredient;\n\n if ( ingredientRowStep > currentStep ) {\n // this is a \"step\" heading\n currentIngredientHeadings.push( {\n 'name': ingredientName,\n 'step': ingredientRowStep\n });\n if ( currentStep !== 0 ) {\n currentIngredientGroups.push( ingredientGroupList );\n }\n currentStep = ingredientRowStep;\n ingredientGroupList = [];\n } else {\n // this is an ingredient in that heading\n ingredientGroupList.push( ingredient );\n }\n });\n currentIngredientGroups.push( ingredientGroupList );\n\n setIngredientHeadings( currentIngredientHeadings );\n setIngredientGroups( currentIngredientGroups );\n }, [] );\n\n return (\n 
\n 
\n 
\n \n\t\t\t
\n\t)\n}\n\nfunction MetadataShowHide() {\n\tlet hiddenMetadata = document.querySelector('.hidden-metadata');\n\thiddenMetadata.classList.toggle( 'show' );\n\tif ( hiddenMetadata.classList.contains('show') ) {\n\t\tdocument.querySelector('.metadata-show-hide-link').querySelector('span').innerText = 'Hide';\n\t} else {\n\t\tdocument.querySelector('.metadata-show-hide-link').querySelector('span').innerText = 'Show';\n\t}\n}\n\n/**\n * Metadata with show/hide.\n */\nconst ProcessedMetadata = ( { metadata } ) => {\n\t// slice out the elements as needed -- design specifies a group of three, plus a\n\t// link to open a popover when there are more than three items of metadata\n\tconst truncatedRecipeMetadata = metadata.slice( 0, 3 );\n\tconst hiddenRecipeMetadata = metadata.slice( 3, metadata.length );\n\n\tif ( metadata.length > 3 ) {\n\t\treturn(\n\t\t\t<>\n\t\t\t\t{\n\t\t\t\t\ttruncatedRecipeMetadata && truncatedRecipeMetadata.map( ( metadata, index ) => {\n\t\t\t\t\t\treturn(\n\t\t\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t{ metadata.name[0] }\n\t\t\t\t\n\t\t\t
\n\t\t\t\n\t\t\t\t{ 'allergen' === metadata.name[1] ? 'Contains ' : '' }\n\t\t\t\t{ metadata.name[0] }\n\t\t\t\t{ 'diet' === metadata.name[1] ? ' menu option' : '' }\n\t\t\t\n\t\t\n\t\t\t\t\t{\n\t\t\t\t\t\thiddenRecipeMetadata && hiddenRecipeMetadata.map( ( metadata, index ) => {\n\t\t\t\t\t\t\treturn(\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t})\n\t\t\t\t\t}\n\t\t\t\t
\n\t\t\t\tShow all allergens/preferences (+{ hiddenRecipeMetadata.length } )\n\t\t\t\n\t\t)\n\t} else {\n\t\treturn(\n\t\t\t<>\n\t\t\t\t{\n\t\t\t\t\tmetadata && metadata.map( ( metadata, index ) => {\n\t\t\t\t\t\treturn( \n\t\t\t\t\t\n\t\t\t\t\t\tExplore Our Nutritional Key\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t