diff --git a/.php-cs-fixer.cache b/.php-cs-fixer.cache index e002d5e..e6a7696 100644 --- a/.php-cs-fixer.cache +++ b/.php-cs-fixer.cache @@ -1 +1 @@ -{"php":"8.1.3","version":"3.7.0","indent":" ","lineEnding":"\n","rules":{"blank_line_after_namespace":true,"braces":true,"class_definition":true,"constant_case":true,"elseif":true,"function_declaration":true,"indentation_type":true,"line_ending":true,"lowercase_keywords":true,"method_argument_space":{"on_multiline":"ensure_fully_multiline","keep_multiple_spaces_after_comma":true},"no_break_comment":true,"no_closing_tag":true,"no_space_around_double_colon":true,"no_spaces_after_function_name":true,"no_spaces_inside_parenthesis":true,"no_trailing_whitespace":true,"no_trailing_whitespace_in_comment":true,"single_blank_line_at_eof":true,"single_class_element_per_statement":{"elements":["property"]},"single_import_per_statement":true,"single_line_after_imports":true,"switch_case_semicolon_to_colon":true,"switch_case_space":true,"visibility_required":{"elements":["method","property"]},"encoding":true,"full_opening_tag":true,"array_syntax":{"syntax":"short"},"ordered_imports":{"sort_algorithm":"alpha"},"no_unused_imports":true,"not_operator_with_successor_space":true,"trailing_comma_in_multiline":true,"phpdoc_scalar":true,"unary_operator_spaces":true,"binary_operator_spaces":true,"blank_line_before_statement":{"statements":["break","continue","declare","return","throw","try"]},"phpdoc_single_line_var_spacing":true,"phpdoc_var_without_name":true},"hashes":{"src\/JigsawServiceProvider.php":2588739270,"src\/Components\/Footers\/PreFooter\/Base.php":732497000,"src\/Components\/Footers\/PreFooter\/Column.php":1954458183,"src\/Components\/Footers\/Local.php":2447128302,"src\/Components\/Modals\/Base.php":3692213926,"src\/Components\/Alert\/Contained.php":86141818,"src\/Components\/Alert\/FullWidth.php":3559627738,"src\/Components\/Loaders\/Dark.php":664703870,"src\/Components\/Loaders\/Light.php":2521897775,"src\/Components\/LocalHeader.php":2171899310,"src\/Components\/InteriorNavigation\/Base.php":1608601251,"src\/Components\/Heroes\/SplitLayoutContentMedia.php":7068587,"src\/Components\/Heroes\/CenteredContent.php":3671358113,"src\/Components\/Selects\/Select.php":3383227601,"src\/Components\/Scripts.php":1782341397,"src\/Components\/Tabs\/Underlined.php":131669733,"src\/Components\/Tabs\/Underlined\/Item.php":3365888974,"src\/Components\/Tabs\/Bordered.php":3421530132,"src\/Components\/Tabs\/Detached\/Item.php":1810508178,"src\/Components\/Tabs\/Bordered\/Item.php":3120777194,"src\/Components\/Tabs\/Detached.php":220228215,"src\/Components\/Cards\/LinkWithMediaAndActions.php":848211306,"src\/Components\/Cards\/Event.php":1065435410,"src\/Components\/Cards\/SimpleWithActions.php":1504616037,"src\/Components\/Cards\/LinkWithMedia.php":1272885386,"src\/Components\/Cards\/SimpleLink.php":1757427018,"src\/Components\/Accordion\/Base.php":3300426367,"src\/Components\/Accordion\/Item.php":711882202,"src\/Components\/Accordion\/WithLeftIcon.php":4278113180,"src\/Components\/Tags\/Solid.php":1734713771,"src\/Components\/Tags\/Outline.php":1347425197,"src\/Components\/Paginators\/Base.php":1248793188,"src\/Components\/Banners\/WithOffsetCard.php":2034512612,"src\/Components\/Banners\/BottomTitle.php":206731089,"src\/Components\/Banners\/WithFullWidthOverlay.php":202811210,"src\/Components\/Carousel\/Base.php":2260689818,"src\/Components\/Carousel\/Split\/Slide.php":2768992717,"src\/Components\/Carousel\/Base\/Slide.php":630650441,"src\/Components\/Carousel\/Split.php":892616220,"src\/Components\/Button\/Solid.php":1316935927,"src\/Components\/Button\/Outline.php":2016858168,"src\/ServiceProvider.php":305111830,"src\/NUKernlUIBladeComponentsServiceProvider.php":1052789539}} \ No newline at end of file +{"php":"8.2.12","version":"3.37.1","indent":" ","lineEnding":"\n","rules":{"blank_line_after_namespace":true,"braces_position":true,"class_definition":true,"constant_case":true,"control_structure_braces":true,"control_structure_continuation_position":true,"elseif":true,"function_declaration":true,"indentation_type":true,"line_ending":true,"lowercase_keywords":true,"method_argument_space":{"on_multiline":"ensure_fully_multiline","keep_multiple_spaces_after_comma":true},"no_break_comment":true,"no_closing_tag":true,"no_multiple_statements_per_line":true,"no_space_around_double_colon":true,"no_spaces_after_function_name":true,"no_trailing_whitespace":true,"no_trailing_whitespace_in_comment":true,"single_blank_line_at_eof":true,"single_class_element_per_statement":{"elements":["property"]},"single_import_per_statement":true,"single_line_after_imports":true,"spaces_inside_parentheses":true,"statement_indentation":true,"switch_case_semicolon_to_colon":true,"switch_case_space":true,"visibility_required":{"elements":["method","property"]},"encoding":true,"full_opening_tag":true,"array_syntax":{"syntax":"short"},"ordered_imports":{"sort_algorithm":"alpha"},"no_unused_imports":true,"not_operator_with_successor_space":true,"trailing_comma_in_multiline":true,"phpdoc_scalar":true,"unary_operator_spaces":true,"binary_operator_spaces":true,"blank_line_before_statement":{"statements":["break","continue","declare","return","throw","try"]},"phpdoc_single_line_var_spacing":true,"phpdoc_var_without_name":true},"hashes":{"src\/ServiceProvider.php":"708a85a951b3a91c33d260d8b4bbf2bf","src\/Components\/Scripts.php":"f3fcd10b92f62b95ff6b0c716118cb64","src\/Components\/Button\/Outline.php":"e2e282f1dc66eb1acdd3a5bccd8ed379","src\/Components\/Button\/Solid.php":"9ea65bb822e030400417624822bf2907","src\/Components\/Loaders\/Dark.php":"329c818a0890623d897ebcc2a9c847c0","src\/Components\/Loaders\/Light.php":"83648ea1ac3cfdcd9470b76dc66b02e8","src\/Components\/Footers\/PreFooter\/Column.php":"a217dee9143f35d5cb7c9903f4b13562","src\/Components\/Footers\/PreFooter\/Base.php":"b50cfe70ff8c0b624fc60353cd714878","src\/Components\/Footers\/Local.php":"65cc38f43ad7b246f6e5d53fadb7c5c5","src\/Components\/Heroes\/CenteredContent.php":"bca35bb52f8365e5c8e4042a09b87708","src\/Components\/Heroes\/SplitLayoutContentMedia.php":"b3a6586ff513e5347cc08424d92ff18d","src\/Components\/Tabs\/Detached.php":"72b8a2f62385c99f2d47d5024a616cf1","src\/Components\/Tabs\/Detached\/Item.php":"ab1af8c3b7b898d3d5ae69bb34884bb9","src\/Components\/Tabs\/Underlined.php":"82a7d258598304d23f70e69a3e1d8915","src\/Components\/Tabs\/Bordered.php":"c033243f99c5d4aa70ecaaf84d28876b","src\/Components\/Tabs\/Underlined\/Item.php":"7509443d228419cf8bbf0e67b47e5f9c","src\/Components\/Tabs\/Bordered\/Item.php":"6844f96b63c6e977d443e2498f825011","src\/Components\/Paginators\/Base.php":"e295398d79a8963dba3fe16b7a5f8191","src\/Components\/Banners\/WithOffsetCard.php":"915c903e1232bbd9c6cc4c97001f387d","src\/Components\/Banners\/WithFullWidthOverlay.php":"9d556c4b853ddfc77c6e4478a59445d4","src\/Components\/Banners\/BottomTitle.php":"af594993861adb28d8b0a7ed6c3dd8a6","src\/Components\/Alert\/FullWidth.php":"a1a8bc79c6cf10c832258d01c6430f56","src\/Components\/Alert\/Contained.php":"90fe5d5bff8a94943bdbc5786cab651f","src\/Components\/Carousel\/Base\/Slide.php":"d5d58f79686f5b3ac552cc415b4fceb1","src\/Components\/Carousel\/Split\/Slide.php":"ba13af89c29913b7974a84efa5873e1f","src\/Components\/Carousel\/Base.php":"f9a54cf71039a0f068a7e36561f0c47a","src\/Components\/Carousel\/Split.php":"c212c52ce4e66eeff949325b3b887662","src\/Components\/Accordion\/Item.php":"5342be92060b8e45c832df27718bb0cd","src\/Components\/Accordion\/WithLeftIcon.php":"21ed529eb15927895833589681fc9d33","src\/Components\/Accordion\/Base.php":"10e3e62b6d3294fcbb2507cfca9eb242","src\/Components\/Selects\/Select.php":"8752f139268817780d1557e92133310b","src\/Components\/Modals\/Base.php":"b8688ef92baedbf83cebd03f2a4826cd","src\/Components\/InteriorNavigation\/Base.php":"5162a261785f213afeb10d9aaa9a9e11","src\/Components\/LocalHeader.php":"f83c53d2f571efeceb860951a2219807","src\/Components\/Cards\/LinkWithMediaAndActions.php":"7007df6d74f8732563a03a895172382b","src\/Components\/Cards\/Event.php":"d812b1df143c9538443ec2626bc358c1","src\/Components\/Cards\/LinkWithMedia.php":"6bdfe6468cec11e3e8056a32457272cb","src\/Components\/Cards\/SimpleWithActions.php":"51b5b98b8b9e65750b2355fbc8cfda17","src\/Components\/Cards\/SimpleLink.php":"ba9e52daffee77e61a361f022a73203d","src\/Components\/Tags\/Outline.php":"866bcaae1bcfd2f136446ec18ee02897","src\/Components\/Tags\/Solid.php":"216a0d61df0f9709401480022e5c6338","src\/NUKernlUIBladeComponentsServiceProvider.php":"f739c78a30fb7db0c4438d9e9f718ee8","src\/JigsawServiceProvider.php":"a7e8ed87f74af3a10a984fcfb80caf48","src\/Components\/Footers\/Local2.php":"cd9b9a03189f50d58e4b7484fbe04665"}} \ No newline at end of file diff --git a/README.md b/README.md index 16679c8..73c3b4f 100644 --- a/README.md +++ b/README.md @@ -5,8 +5,9 @@ Package of Blade components for Northeastern University websites ## Prequisites In order to use this package +- Your project must support PHP v7.3+ (Laravel 8) or PHP v8.1+ (Laravel 9). - Your project must be using the [@northeastern-web/kernl-ui JavaScript and CSS package](https://npmjs.com/package/@northeastern-web/kernl-ui). -- Your project also must support the new [Laravel Blade 7 components](https://laravel.com/docs/7.x/blade#components). +- Your project also must support [Laravel Blade 8 components](https://laravel.com/docs/8.x/blade#components) or [Laravel Blade 9 components](https://laravel.com/docs/9.x/blade#components). ## Installation @@ -66,6 +67,23 @@ module.exports = { To use the components in a Laravel app, the Service Provider should be loaded automatically, requiring no extra configuration. +### Roots Sage/Acorn +To use the components in a WordPress theme powered by [Sage](https://roots.io/sage/) or using the [Acorn](https://roots.io/acorn/) package, load the `Northeastern\Blade\NUKernlUIBladeComponentsServiceProvider` class in the `config/app.php` file under `'providers'`: + +```php +// config/app.php + +'providers' => [ + // ... Other Providers + + /** + * Application Service Providers + */ + App\Providers\ThemeServiceProvider::class, + Northeastern\Blade\NUKernlUIBladeComponentsServiceProvider::class +] +``` + ### Tighten Jigsaw To use the components in a [tightenco/jigsaw](https://jigsaw.tighten.co), load the `Northeastern\Blade\JigsawServiceProvider` class in the Jigsaw `beforeBuild` event: @@ -180,13 +198,13 @@ To use the local header component, add the following markup to your Blade templa - `megaMenuCta` - If you select 'mega' as your `menuStyle`, you can add a CTA to the footer of each menu item. It should be formatted as such: -```php - $megaMenuCta = [ - "title" => "Your Link Title", - "url" => "https://yourlinkurl.com", - "target" => "_blank" - ] -``` + ```php + $megaMenuCta = [ + "title" => "Your Link Title", + "url" => "https://yourlinkurl.com", + "target" => "_blank" + ] + ``` - `megaMenuAlert` - This is an optional string that will place a badge next to the title of your CTA. @@ -268,7 +286,7 @@ Any additional classes or attributes you put on the component will be passed thr ### Banners -### With Offset Card +#### With Offset Card To use the With Offset Card Banner component, add the following markup to your Blade template. @@ -276,15 +294,38 @@ To use the With Offset Card Banner component, add the following markup to your B - {{--Card content goes here--}} + {{-- Card content goes here --}} ``` -#### `x-kernl-banners.with-offset-card` Props +##### `x-kernl-banners.with-offset-card` Props - `background-url` - URL of background image to be applied. -### Bottom Title +#### With Full Width Overlay + +To use the With Full Width Overlay + +```blade + + {{-- Banner Content goes here --}} + + +``` + +##### `x-kernl-banners.with-full-width-overlay` Props + +- `background-url` - URL of background image to be applied. Leave blank to show only a `solid-background-color`. +- `solid-background-color` - Solid Background Color. + - Options: `red`, `blue`, `green`, `yellow`, `light`, `medium-gray`, `light-gray`, `dark`. +- `height` - Set the CSS class height to "half" or full. + - Options: `"half"` or leave empty for `"full"` height. + +#### Bottom Title To use the Bottom Title Banner component, add the following markup to your Blade template. @@ -295,7 +336,7 @@ To use the Bottom Title Banner component, add the following markup to your Blade /> ``` -#### `x-kernl-banners.bottom-title` Props +##### `x-kernl-banners.bottom-title` Props - `background-url` - URL of background image to be applied. - `title` - Title to be presented. @@ -321,7 +362,11 @@ By default, the button components will render a `button` element. If you need an Any additional classes or attributes you put on the component will be passed through. ```blade - + Button ``` @@ -334,7 +379,7 @@ Any additional classes or attributes you put on the component will be passed thr ### Carousels -### Base and Base Slide +#### Base and Base Slide To use the Carousel Base and Base Slide component, add the following markup to your Blade template. @@ -357,11 +402,11 @@ To use the Carousel Base and Base Slide component, add the following markup to y ``` -#### `x-kernl-carousel.base` Props +##### `x-kernl-carousel.base` Props - `delay` - (optional) The delay that the slides should rotate at in milliseconds. Default value is 5000. -#### `x-kernl-carousel.base.slide` Props +##### `x-kernl-carousel.base.slide` Props - `index` - The index of the slide. _Each slide's index should increment by 1, starting at 0._ - `background-classes` - (optional) Any classes you want to apply to the outer element. @@ -369,7 +414,7 @@ To use the Carousel Base and Base Slide component, add the following markup to y Any additional attributes you add to the Base Slide component (`style`, etc.), will be passed through to the background element. -### Split and Split Slide +#### Split and Split Slide To use the Split Carousel and Split Slide component, add the following markup to your Blade template. @@ -387,12 +432,12 @@ To use the Split Carousel and Split Slide component, add the following markup to ``` -#### `x-kernl-carousel.split` Props +##### `x-kernl-carousel.split` Props - `height-classes` - Classes to set the overall height on the carousel. Should be double each slide height when slides are stacked (mobile). - `delay` - (optional) The delay that the slides should rotate at in milliseconds. Default value is 5000. -#### `x-kernl-carousel.split.slide` Props +##### `x-kernl-carousel.split.slide` Props - `index` - The index of the slide. _Each slide's index should increase by 1, starting at 0._ - `class` - Any classes you want to apply to the element around the slot. This should be used to pass in the height classes. @@ -414,7 +459,7 @@ To use the Loader component, light or dark, add the following markup to your Bla ``` -#### `x-kernl-loaders.light` Props +##### `x-kernl-loaders.light` Props - `x-show` - (optional) Used to show/hide the loader based on an Alpine.js property @@ -429,13 +474,13 @@ To use the Loader component, light or dark, add the following markup to your Bla ``` -#### `x-kernl-loaders.dark` Props +##### `x-kernl-loaders.dark` Props - `x-show` - (optional) Used to show/hide the loader based on an Alpine.js property ### Tags -### Solid +#### Solid To use the Solid Tag component, add the following markup to your Blade template. @@ -449,13 +494,13 @@ To use the Solid Tag component, add the following markup to your Blade template. ``` -#### `x-kernl-tags.solid` Props +##### `x-kernl-tags.solid` Props - `color` - Color for text/background. Default is `dark` - `pill` - (optional) Rounds corners for a pill-like appearance. Default is `false` - `uppercase` - (optional) Uppercase content. Default is `false` -### Outline +#### Outline To use the Outline Tag component, add the following markup to your Blade template. @@ -469,7 +514,7 @@ To use the Outline Tag component, add the following markup to your Blade templat ``` -#### `x-kernl-tags.outline` Props +##### `x-kernl-tags.outline` Props - `color` - Color for text/border. Default is `dark` - `pill` - (optional) Rounds corners for a pill-like appearance. Default is `false` @@ -477,7 +522,7 @@ To use the Outline Tag component, add the following markup to your Blade templat ### Modals -### Base Modal +#### Base Modal To use the Base Modal component, add the following markup to your Blade template. The modal can be triggered from anywhere on your page using the `NUModals.open` and `NUModals.close` methods. @@ -495,7 +540,7 @@ To use the Base Modal component, add the following markup to your Blade template ``` -#### `x-kernl-modals.base` Props +##### `x-kernl-modals.base` Props - `id` - ID of the modal. Must be unique throughout the app. This ID can be used with `window.NUModals` methods - `closeable` - (optional) Adds close button at the top right corner. `true` by default @@ -504,7 +549,7 @@ To use the Base Modal component, add the following markup to your Blade template ### Footer -### Local +#### Local To use the Local Footer component, add the following markup to your Blade template. @@ -528,30 +573,31 @@ To use the Local Footer component, add the following markup to your Blade templa ``` -#### Props +##### `x-kernl-footers.local` Props - `links` = Array of titles and links for the navigation sections of the footer. Each title can have a `children` key that's an array of more titles/links. These titles/links will be displayed below the parent title. + Example: -```php -$links = [ - [ - 'text' => 'About', - 'href' => '/about', // (optional) - 'children' => [ - [ - 'text' => 'Careers', - 'href' => '/about/careers', - ], - [ - 'text' => 'Staff', - 'href' => '/about/staff', + ```php + $links = [ + [ + 'text' => 'About', + 'href' => '/about', // (optional) + 'children' => [ + [ + 'text' => 'Careers', + 'href' => '/about/careers', + ], + [ + 'text' => 'Staff', + 'href' => '/about/staff', + ], ], ], - ], - // ... More links -]; -``` + // ... More links + ]; + ``` - `logo-url` - (optional) URL for the footer logo. - `facebook-url` - (optional) Facebook URL for the footer. Adding the URL will display the respective social network icon. @@ -561,9 +607,79 @@ $links = [ - `twitter-url` - (optional) Twitter URL for the footer. Adding the URL will display the respective social network icon. - `instagram-url` - (optional) Instagram URL for the footer. Adding the URL will display the respective social network icon. -## PreFooter +#### Local 2 + +To use the Local 2 Footer component, add the following markup to your Blade template. + +```blade + + + {{-- Insert SVG logo here --}} + + + {{-- Insert address here --}} + + + {{-- Insert phone number(s) here --}} + + + {{-- Insert your custom form code --}} + + +``` + +##### `x-kernl-footers.local-2` Props +- `logo-url` - (optional) URL for the footer logo. +- `links` = Array of titles and links for the navigation sections of the footer. Each title can have a `children` key that's an array of more titles/links. These titles/links will be displayed below the parent title. + + Example: + + ```php + $links = [ + [ + 'text' => 'About', + 'href' => '/about', // (optional) + 'children' => [ + [ + 'text' => 'Careers', + 'href' => '/about/careers', + ], + [ + 'text' => 'Staff', + 'href' => '/about/staff', + ], + ], + ], + // ... More links + ]; + ``` +- `form` - (optional) Array of values for configuring a form for the footer (e.g., newsletter sign-up). This can also be fully customized in a `` nested component instead. + - `action` - Where the form should submit to be processed (e.g., Mailchimp Newsletter URL or other 3rd-party form processor). + - `title` - Heading 3 title for the form (e.g., "Subscribe today!") +- `social-links` - (optional) Array of titles and links for the social links section of the footer. These are presented as plain-text with a link. + + Example: + + ```php + $socialLinks = [ + [ + 'text' => 'Facebook', + 'href' => 'https://facebook.com/your-social-media-presence', + ], + // ... More social links + ]; + ``` + + +#### PreFooter -To use the PreFooter component, use the following markup to your Blade Template. Note, for a multi-column layout the element will need to be wrapped in a foreach loop, or manually populated. +To use the PreFooter component, use the following markup to your Blade Template. + +> **Note**: for a multi-column layout the `` element will need to be wrapped in a foreach loop, or manually populated. ```blade - + /> + ``` -#### `x-kernl-footers.base` Props +##### `x-kernl-footers.pre-footer.base` Props - `columns` - (optional) Set the number of grid columns to display on large screens. Default is 3. -#### `x-kernl-footers.base` Props +##### `x-kernl-footers.pre-footer.column` Props - `featherIcon` - (optional) Choose a Feather Icon from https://feathericons.com/ and enter the name of it here. - `title` - (required) The title of the PreFooter column. - `description` - (required) A description of the PreFooter column. - `link` - (required) This will be an array that must include a url, and optionally a target. Example: -```php - $link = [ - 'url' => 'https://www.google.com', - 'target' => '_blank' - ] -``` + ```php + $link = [ + 'url' => 'https://www.google.com', + 'target' => '_blank' + ] + ``` ### Tabs -### Underlined +#### Underlined ```blade @@ -617,17 +733,17 @@ To use the PreFooter component, use the following markup to your Blade Template. ``` -#### `x-kernl-tabs.underlined` Props +##### `x-kernl-tabs.underlined` Props - `default-active` - (optional) Index of the initial active tab. Default is 0 (zero). -#### `x-kernl-tabs.underlined.item` Props +##### `x-kernl-tabs.underlined.item` Props - `title` - Title of the tab contents Any additional classes or attributes you put on the `item` component will be passed through. -### Bordered +#### Bordered ```blade @@ -645,17 +761,17 @@ Any additional classes or attributes you put on the `item` component will be pas ``` -#### `x-kernl-tabs.bordered` Props +##### `x-kernl-tabs.bordered` Props - `default-active` - (optional) Index of the initial active tab. Default is 0 (zero). -#### `x-kernl-tabs.bordered.item` Props +##### `x-kernl-tabs.bordered.item` Props - `title` - Title of the tab contents Any additional classes or attributes you put on the `item` component will be passed through. -### Detached +#### Detached ```blade @@ -673,11 +789,11 @@ Any additional classes or attributes you put on the `item` component will be pas ``` -#### `x-kernl-tabs.detached` Props +##### `x-kernl-tabs.detached` Props - `default-active` - (optional) Index of the initial active tab. Default is 0 (zero). -#### `x-kernl-tabs.detached.item` Props +##### `x-kernl-tabs.detached.item` Props - `title` - Title of the tab contents @@ -685,7 +801,7 @@ Any additional classes or attributes you put on the `item` component will be pas ### Heroes -### Split Layout Media Content +#### Split Layout Media Content ```blade ``` -#### `x-kernl-heroes.split-layout-content-media` Props +##### `x-kernl-heroes.split-layout-content-media` Props - `media-url` - Url of image to show - `title` - Title of content @@ -714,9 +830,9 @@ Any additional classes or attributes you put on the `item` component will be pas Any additional classes or attributes you put on the component will be passed through. -> Note: when using the \$slot version, title, body, call-to-action and call-to-action-url are not required. +> Note: when using the `$slot` version, `title`, `body`, `call-to-action` and `call-to-action-url` are not required. -### Full Background Media Centered Content +#### Full Background Media Centered Content ```blade ``` -#### `x-kernl-heroes.full-centered-content` Props +##### `x-kernl-heroes.full-centered-content` Props - `title` - Title of content - `subtitle` - Subtitle of content @@ -781,7 +897,7 @@ Any additional classes or attributes you put on the `base` component will be pas ### Cards -### Simple Link +#### Simple Link ```blade ``` -#### `x-kernl-cards.simple-link` Props +##### `x-kernl-cards.simple-link` Props - `title` - Title text - `body` - Body text @@ -821,9 +937,9 @@ Any additional classes or attributes you put on the `base` component will be pas Any additional classes or attributes you put on the component will be passed through. -> Note: \$slot version has two named slots: 'main' and 'footer'. Use them to override the main and footer content respectively. +> Note: `$slot` version has two named slots: `'main'` and `'footer'`. Use them to override the main and footer content respectively. -### Simple With Actions +#### Simple With Actions ```blade ``` -#### `x-kernl-cards.simple-with-actions` Props +##### `x-kernl-cards.simple-with-actions` Props - `title` - Title text - `body` - Body text @@ -870,7 +986,7 @@ Any additional classes or attributes you put on the component will be passed thr > Note: \$slot version has two named slots: 'main' and 'actions'. Use them to override the main and actions content respectively. -### Link With Media +#### Link With Media ```blade ``` -#### `x-kernl-cards.link-with-media` Props +##### `x-kernl-cards.link-with-media` Props - `title` - Title text - `body` - Body text @@ -927,11 +1043,11 @@ Any additional classes or attributes you put on the component will be passed thr Any additional classes or attributes you put on the component will be passed through. -> Note: \$slot version has two named slots: 'main' and 'footer'. Use them to override the main and footer content respectively. +> Note: `$slot` version has two named slots: `'main'` and `'footer'`. Use them to override the main and footer content respectively. > > Note: The `@tailwindcss/aspect-ratio` plugin is required for the this component to work correctly. Please see [documentation](https://northeastern.netlify.app/docs/plugins/#tailwind-aspect-ratio) -### Link With Media And Actions +#### Link With Media And Actions ```blade ``` -#### `x-kernl-cards.link-with-media-and-actions` Props +##### `x-kernl-cards.link-with-media-and-actions` Props - `title` - Title text - `body` - Body text @@ -990,11 +1106,11 @@ Any additional classes or attributes you put on the component will be passed thr Any additional classes or attributes you put on the component will be passed through. -> Note: \$slot version has two named slots: 'main' and 'actions'. Use them to override the main and actions content respectively. +> Note: `$slot` version has two named slots: `'main'` and `'actions'`. Use them to override the main and actions content respectively. > > Note: The `@tailwindcss/aspect-ratio` plugin is required for the this component to work correctly. Please see [documentation](https://northeastern.netlify.app/docs/plugins/#tailwind-aspect-ratio) -### Event +#### Event ```blade ``` -#### `x-kernl-cards.event` Props +##### `x-kernl-cards.event` Props - `title` - Title text - `body` - Body text @@ -1044,7 +1160,7 @@ Any additional classes or attributes you put on the component will be passed thr Any additional classes or attributes you put on the component will be passed through. -> Note: \$slot version has two named slots: 'main' and 'footer'. Use them to override the main and footer content respectively. +> Note: `$slot` version has two named slots: `'main'` and `'footer'`. Use them to override the main and footer content respectively. > > Note: The `@tailwindcss/aspect-ratio` plugin is required for the this component to work correctly. Please see [documentation](https://northeastern.netlify.app/docs/plugins/#tailwind-aspect-ratio) diff --git a/composer.json b/composer.json index fbf86d2..c17e5ea 100644 --- a/composer.json +++ b/composer.json @@ -16,12 +16,12 @@ } ], "require": { - "php": "^7.2", - "illuminate/support": "^7.0|^8.0", - "illuminate/view": "^7.0|^8.0" + "php": "^7.3|^8.1", + "illuminate/support": "^8.0|^9.0", + "illuminate/view": "^8.0|^9.0" }, "require-dev": { - "friendsofphp/php-cs-fixer": "2.16.10" + "friendsofphp/php-cs-fixer": "^3.17.0" }, "autoload": { "psr-4": { diff --git a/src/Components/Banners/WithFullWidthOverlay.php b/src/Components/Banners/WithFullWidthOverlay.php index 67d8afe..8d07393 100644 --- a/src/Components/Banners/WithFullWidthOverlay.php +++ b/src/Components/Banners/WithFullWidthOverlay.php @@ -3,23 +3,55 @@ use Illuminate\Support\Facades\View; use Illuminate\View\Component; +use InvalidArgumentException; class WithFullWidthOverlay extends Component { - public $includeImage; + public $solidBackgroundColor; public $backgroundUrl; + public $includeImage; public $height; - public $solidBackgroundColor; - public function __construct($includeImage = null, $backgroundUrl = null, $height = null, $solidBackgroundColor = null) + protected $colors = [ + 'dark' => ['text-white', 'bg-black'], + 'light' => ['text-gray-900', 'bg-white'], + 'medium-gray' => ['text-white', 'bg-gray-600'], + 'light-gray' => ['text-gray-900', 'bg-gray-300'], + 'red' => ['text-white', 'bg-red-600'], + 'blue' => ['text-white', 'bg-blue-700'], + 'green' => ['text-white', 'bg-green-600'], + 'yellow' => ['text-black', 'bg-yellow-300'], + ]; + + public function __construct($solidBackgroundColor = 'dark', $backgroundUrl = null, $height = null) { - $this->includeImage = $includeImage; + $this->solidBackgroundColor = $solidBackgroundColor; $this->backgroundUrl = $backgroundUrl; $this->height = $height; - $this->solidBackgroundColor = $solidBackgroundColor; + + if (! array_key_exists($this->solidBackgroundColor, $this->colors)) { + throw new InvalidArgumentException('`' . $this->solidBackgroundColor . '` is not a supported color option.'); + } } + public function height() + { + return ( + $this->height == 'half' + ? 'py-8 md:py-10 lg:py-16' + : 'py-16 md:py-20 lg:py-32' + ); + } + public function compiledClasses() + { + return $this->attributes->merge([ + 'class' => collect() + ->merge($this->height()) + ->merge($this->colors[$this->solidBackgroundColor]) + ->join(' '), + ]); + } public function render() { diff --git a/src/Components/Button/Outline.php b/src/Components/Button/Outline.php index 678fe9b..3a7697d 100644 --- a/src/Components/Button/Outline.php +++ b/src/Components/Button/Outline.php @@ -18,7 +18,7 @@ class Outline extends Component protected $colors = [ 'dark' => 'text-black border-black hover:text-white hover:bg-black', - 'light' => 'text-white border-white hover:text-black', + 'light' => 'text-white border-white hover:text-black hover:bg-white', 'medium-gray' => 'text-gray-600 border-gray-600 hover:text-white hover:bg-gray-600', 'light-gray' => 'text-gray-300 border-gray-300 hover:text-gray-900 hover:bg-gray-300', 'red' => 'text-red-600 border-red-600 hover:text-white hover:bg-red-600', diff --git a/src/Components/Cards/Event.php b/src/Components/Cards/Event.php index 501d26a..fe7f345 100644 --- a/src/Components/Cards/Event.php +++ b/src/Components/Cards/Event.php @@ -84,7 +84,7 @@ public function cardClasses() return $classes->push('flex', 'flex-col', 'lg:flex-row-reverse'); }) ->join(' ') - ; + ; } public function titleClasses() @@ -105,7 +105,7 @@ public function titleClasses() ]); }) ->join(' ') - ; + ; } public function bodyClasses() @@ -126,7 +126,7 @@ public function bodyClasses() ]); }) ->join(' ') - ; + ; } public function eventClasses() @@ -209,7 +209,7 @@ public function footerClasses() ]); }) ->join(' ') - ; + ; } public function footerTextClasses() @@ -219,7 +219,7 @@ public function footerTextClasses() 'text-sm', ]) ->join(' ') - ; + ; } public function render() diff --git a/src/Components/Cards/LinkWithMedia.php b/src/Components/Cards/LinkWithMedia.php index 6a99b99..593b324 100644 --- a/src/Components/Cards/LinkWithMedia.php +++ b/src/Components/Cards/LinkWithMedia.php @@ -77,7 +77,7 @@ public function cardClasses() return $classes->push('flex', 'flex-col', 'lg:flex-row-reverse'); }) ->join(' ') - ; + ; } public function titleClasses() @@ -97,7 +97,7 @@ public function titleClasses() ]); }) ->join(' ') - ; + ; } public function bodyClasses() @@ -114,7 +114,7 @@ public function bodyClasses() return $classes->merge(['py-8']); }) ->join(' ') - ; + ; } public function preHeaderClasses() @@ -135,7 +135,7 @@ public function preHeaderClasses() ]); }) ->join(' ') - ; + ; } @@ -157,7 +157,7 @@ public function messageClasses() ]); }) ->join(' ') - ; + ; } public function imageOuterImageContainerClasses() @@ -203,7 +203,7 @@ public function imageInnerImageContainerClasses() return $classes->push('aspect-w-16', 'aspect-h-9'); }) ->join(' ') - ; + ; } public function footerClasses() @@ -228,7 +228,7 @@ public function footerClasses() ]); }) ->join(' ') - ; + ; } public function footerTextClasses() @@ -252,7 +252,7 @@ public function footerTextClasses() ]); }) ->join(' ') - ; + ; } public function render() diff --git a/src/Components/Cards/LinkWithMediaAndActions.php b/src/Components/Cards/LinkWithMediaAndActions.php index 0c59b4f..eeec82c 100644 --- a/src/Components/Cards/LinkWithMediaAndActions.php +++ b/src/Components/Cards/LinkWithMediaAndActions.php @@ -87,7 +87,7 @@ public function cardClasses() return $classes->push('flex', 'flex-col', 'lg:flex-row-reverse'); }) ->join(' ') - ; + ; } public function titleClasses() @@ -107,7 +107,7 @@ public function titleClasses() ]); }) ->join(' ') - ; + ; } public function preHeaderClasses() @@ -128,7 +128,7 @@ public function preHeaderClasses() ]); }) ->join(' ') - ; + ; } @@ -150,7 +150,7 @@ public function messageClasses() ]); }) ->join(' ') - ; + ; } public function imageOuterImageContainerClasses() @@ -196,7 +196,7 @@ public function imageInnerImageContainerClasses() return $classes->push('aspect-w-16', 'aspect-h-9'); }) ->join(' ') - ; + ; } public function render() diff --git a/src/Components/Cards/SimpleLink.php b/src/Components/Cards/SimpleLink.php index e92f4bf..0f928f9 100644 --- a/src/Components/Cards/SimpleLink.php +++ b/src/Components/Cards/SimpleLink.php @@ -71,7 +71,7 @@ public function cardClasses() return $classes->push('text-white', 'bg-red-600', 'hover:bg-red-800'); }) ->join(' ') - ; + ; } public function titleClasses() @@ -84,7 +84,7 @@ public function titleClasses() return $classes->merge(['text-sm']); }) ->join(' ') - ; + ; } public function bodyClasses() @@ -101,7 +101,7 @@ public function bodyClasses() return $classes->merge(['text-xs']); }) ->join(' ') - ; + ; } public function render() diff --git a/src/Components/Cards/SimpleWithActions.php b/src/Components/Cards/SimpleWithActions.php index 2b74be4..3a1a755 100644 --- a/src/Components/Cards/SimpleWithActions.php +++ b/src/Components/Cards/SimpleWithActions.php @@ -69,7 +69,7 @@ public function cardClasses() return $classes->push('text-white', 'bg-red-600'); }) ->join(' ') - ; + ; } public function titleClasses() @@ -82,7 +82,7 @@ public function titleClasses() return $classes->push('text-sm'); }) ->join(' ') - ; + ; } public function bodyClasses() diff --git a/src/Components/Footers/Local2.php b/src/Components/Footers/Local2.php new file mode 100644 index 0000000..c63ac59 --- /dev/null +++ b/src/Components/Footers/Local2.php @@ -0,0 +1,31 @@ +links = $links; + + $this->logoUrl = $logoUrl; + + $this->socialLinks = $socialLinks; + } + + public function render() + { + return View::make('kernl-ui::footers.local-2'); + } +} diff --git a/src/ServiceProvider.php b/src/ServiceProvider.php index e923546..36b2b0c 100644 --- a/src/ServiceProvider.php +++ b/src/ServiceProvider.php @@ -23,6 +23,7 @@ use Northeastern\Blade\Components\Carousel\Split as CarouselSplit; use Northeastern\Blade\Components\Carousel\Split\Slide as CarouselSplitSlide; use Northeastern\Blade\Components\Footers\Local as FooterLocal; +use Northeastern\Blade\Components\Footers\Local2 as FooterLocal2; use Northeastern\Blade\Components\Footers\PreFooter\Base as PreFooterBase; use Northeastern\Blade\Components\Footers\PreFooter\Column as PreFooterColumn; use Northeastern\Blade\Components\Heroes\CenteredContent as HeroesCenteredContent; @@ -65,6 +66,7 @@ class ServiceProvider extends BaseServiceProvider TagsOutline::class => 'kernl-tags.outline', ModalsBase::class => 'kernl-modals.base', FooterLocal::class => 'kernl-footers.local', + FooterLocal2::class => 'kernl-footers.local-2', PreFooterBase::class => 'kernl-footers.pre-footer.base', PreFooterColumn::class => 'kernl-footers.pre-footer.column', Scripts::class => 'kernl-scripts', diff --git a/src/views/banners/with-full-width-overlay.blade.php b/src/views/banners/with-full-width-overlay.blade.php index 0be92b1..fba6818 100644 --- a/src/views/banners/with-full-width-overlay.blade.php +++ b/src/views/banners/with-full-width-overlay.blade.php @@ -1,23 +1,11 @@
diff --git a/src/views/banners/with-offset-card.blade.php b/src/views/banners/with-offset-card.blade.php index f0b12c6..7218d78 100644 --- a/src/views/banners/with-offset-card.blade.php +++ b/src/views/banners/with-offset-card.blade.php @@ -14,6 +14,6 @@ class="py-24 md:py-20 lg:py-32 bg-black bg-center bg-cover bg-no-repeat"
- {{ $slot }} + {{ $slot }}
diff --git a/src/views/footers/local-2.blade.php b/src/views/footers/local-2.blade.php new file mode 100644 index 0000000..b90fafb --- /dev/null +++ b/src/views/footers/local-2.blade.php @@ -0,0 +1,108 @@ +
+
+
+
+ + {{ $logo }} + + + @isset($address) +
+ {{ $address }} +
+ @endisset + + @isset($phone) +
+ {{ $phone }} +
+ @endisset +
+ + @foreach($links as $link) +
+ + @isset($link['href']) + +

+ {{ data_get($link, 'text', '') }} +

+ + @else +

+ {{ data_get($link, 'text', '') }} +

+ @endisset + + @foreach(data_get($link, 'children', []) as $child) + + {{ data_get($child, 'text', '') }} + + @endforeach +
+ @endforeach + +
+ @if(isset($form) && is_array($form)) +
+

+ {{ data_get($form, 'title', '') }} +

+ +

+ {{ data_get($form, 'description', '') }} +

+ +
+ + +
+ + +
+
+
+ @else + {{ $form }} + @endif + + @if (is_array($socialLinks)) +
+ @foreach ($socialLinks as $link) + + {{ data_get($link, 'text', '#') }} + + @endforeach +
+ @else + {{ $socialLinks }} + @endif +
+
+
+
\ No newline at end of file diff --git a/src/views/includes/headers/search-desktop.blade.php b/src/views/includes/headers/search-desktop.blade.php index ddd18f7..71aa11a 100644 --- a/src/views/includes/headers/search-desktop.blade.php +++ b/src/views/includes/headers/search-desktop.blade.php @@ -79,83 +79,85 @@ class="hidden absolute top-0 right-0 m-4 text-gray-200 sm:inline-block hover:tex
- + + @endpush @endif diff --git a/src/views/includes/menus/desktop-navigation/item-with-children.blade.php b/src/views/includes/menus/desktop-navigation/item-with-children.blade.php new file mode 100644 index 0000000..bc2e965 --- /dev/null +++ b/src/views/includes/menus/desktop-navigation/item-with-children.blade.php @@ -0,0 +1,121 @@ +
  • + + + + {{ $item['text'] }} + + + + + +
    + @foreach ($item['children'] as $child) + + last) + x-on:keydown.tab="activeSection = null" + @endif + @keydown.arrow-up.prevent="focusPreviousLink" + @keydown.arrow-down.prevent="focusNextLink" + > + + + {!! $child['text'] !!} + + + @endforeach +
    +
    • \ No newline at end of file diff --git a/src/views/includes/menus/desktop-navigation/item.blade.php b/src/views/includes/menus/desktop-navigation/item.blade.php new file mode 100644 index 0000000..0de57cd --- /dev/null +++ b/src/views/includes/menus/desktop-navigation/item.blade.php @@ -0,0 +1,26 @@ +
  • + + + + + {{ $item['text'] }} + + +
    • \ No newline at end of file diff --git a/src/views/includes/menus/mega-menu/link-with-children.blade.php b/src/views/includes/menus/mega-menu/link-with-children.blade.php new file mode 100644 index 0000000..c72d6e3 --- /dev/null +++ b/src/views/includes/menus/mega-menu/link-with-children.blade.php @@ -0,0 +1,42 @@ + \ No newline at end of file diff --git a/src/views/includes/menus/mega-menu/link.blade.php b/src/views/includes/menus/mega-menu/link.blade.php new file mode 100644 index 0000000..a6799e7 --- /dev/null +++ b/src/views/includes/menus/mega-menu/link.blade.php @@ -0,0 +1,14 @@ + + {!! $item['text'] !!} + \ No newline at end of file diff --git a/src/views/includes/menus/mega-menu/pop-out.blade.php b/src/views/includes/menus/mega-menu/pop-out.blade.php new file mode 100644 index 0000000..abb9b78 --- /dev/null +++ b/src/views/includes/menus/mega-menu/pop-out.blade.php @@ -0,0 +1,110 @@ +{{-- Mega Menu - Pop-out --}} + \ No newline at end of file diff --git a/src/views/includes/menus/mobile-navigation/item-with-children.blade.php b/src/views/includes/menus/mobile-navigation/item-with-children.blade.php new file mode 100644 index 0000000..3331f9c --- /dev/null +++ b/src/views/includes/menus/mobile-navigation/item-with-children.blade.php @@ -0,0 +1,73 @@ +
    + + {!! $item['text'] !!} + + +
    +@isset ($item['children']) + @if(count($item['children']) > 0) + + @endif +@endisset \ No newline at end of file diff --git a/src/views/includes/menus/mobile-navigation/item.blade.php b/src/views/includes/menus/mobile-navigation/item.blade.php new file mode 100644 index 0000000..5355e3f --- /dev/null +++ b/src/views/includes/menus/mobile-navigation/item.blade.php @@ -0,0 +1,17 @@ + + {{ $item['text'] }} + \ No newline at end of file diff --git a/src/views/includes/menus/mobile-navigation/support-navigation/item-with-children.blade.php b/src/views/includes/menus/mobile-navigation/support-navigation/item-with-children.blade.php new file mode 100644 index 0000000..023e938 --- /dev/null +++ b/src/views/includes/menus/mobile-navigation/support-navigation/item-with-children.blade.php @@ -0,0 +1,82 @@ +
    + + {!! $item['text'] !!} + + +
    +@isset ($item['children']) + @if(count($item['children']) > 0) + + @endif +@endisset \ No newline at end of file diff --git a/src/views/includes/menus/mobile-navigation/support-navigation/item.blade.php b/src/views/includes/menus/mobile-navigation/support-navigation/item.blade.php new file mode 100644 index 0000000..44ea7c3 --- /dev/null +++ b/src/views/includes/menus/mobile-navigation/support-navigation/item.blade.php @@ -0,0 +1,16 @@ + + {{ $item['text'] }} + \ No newline at end of file diff --git a/src/views/includes/menus/support-navigation/link-with-children.blade.php b/src/views/includes/menus/support-navigation/link-with-children.blade.php new file mode 100644 index 0000000..e208933 --- /dev/null +++ b/src/views/includes/menus/support-navigation/link-with-children.blade.php @@ -0,0 +1,120 @@ +
  • + + + + {{ $item['text'] }} + + + + + +
    + @foreach ($item['children'] as $child) + + + + + {!! $child['text'] !!} + + + @endforeach +
    +
    • \ No newline at end of file diff --git a/src/views/includes/menus/support-navigation/link.blade.php b/src/views/includes/menus/support-navigation/link.blade.php new file mode 100644 index 0000000..5aa953f --- /dev/null +++ b/src/views/includes/menus/support-navigation/link.blade.php @@ -0,0 +1,27 @@ +
  • + + + + {{ $item['text'] }} + + +
    • \ No newline at end of file diff --git a/src/views/local-header.blade.php b/src/views/local-header.blade.php index 3351f97..5b5d8e0 100644 --- a/src/views/local-header.blade.php +++ b/src/views/local-header.blade.php @@ -44,7 +44,7 @@ class="ml-6 xl:hidden focus:outline-none focus:ring focus:ring-blue-500" data-toggle="collapse" data-target="#navbarContent" aria-controls="navbarContent" - x-bind:aria-expanded="navIsOpen ? 'true' : 'false' ? 'true' : 'false'" + x-bind:aria-expanded="navIsOpen ? 'true' : 'false'" aria-label="Toggle navigation" x-on:click="navIsOpen = ! navIsOpen" > diff --git a/src/views/menus/desktop-navigation.blade.php b/src/views/menus/desktop-navigation.blade.php index 665a20a..bfb57b2 100644 --- a/src/views/menus/desktop-navigation.blade.php +++ b/src/views/menus/desktop-navigation.blade.php @@ -1,160 +1,40 @@